/* ================================================================
   MOTRO — css/recrutement.css (30/10/2026, page Recrutement)
   Page /recrutement SEULE (recrutement.html). Tous les sélecteurs commencent par #recrutement
   (le <main> de la page, absent des autres) : rien ne fuit ailleurs, et un identifiant prime sur
   les classes de style.css / prime.css SANS les modifier.
   Même direction que css/avis-page.css : noir #111, texte secondaire #55555b (7:1 sur blanc),
   filets #E8E8ED, fond gris #F5F5F7, jaune #FFCC00 en accent rare. Manrope, graisses ≤ 800.
   SIGNATURE : chaque offre est une PLAQUE D'IDENTIFICATION de moteur — métal brossé clair, quatre
   rivets, référence et champs gravés. La candidature spontanée est une plaque « vierge » : mêmes
   champs, valeurs encore à frapper (soulignées en pointillés).
   Un seul mouvement : un reflet traverse chaque plaque à son entrée dans l'écran (navigateurs
   qui savent lier une animation au défilement ; rien si le mouvement est réduit).
   ================================================================ */


/* ── 0. SOCLE ───────────────────────────────────────────────────────────────── */
#recrutement {
    display: block;
    background: #ffffff;
    color: #111111;
}
/* L'attribut hidden gagne toujours sur les display: des composants ci-dessous. */
#recrutement [hidden] { display: none !important; }

#recrutement .rc-kicker {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #55555b;
    margin-bottom: 14px;
}
#recrutement .rc-h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #111111;
    margin: 0;
}
#recrutement .rc-mention {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.55;
    color: #55555b;
    margin: 0;
}

/* Boutons : noir plein ou clair à filet (mêmes mesures que la page /avis). */
#recrutement .rc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
#recrutement .rc-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border: 1px solid #111111;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
#recrutement .rc-bouton:hover {
    background: #2C2C30;
    border-color: #2C2C30;
}
#recrutement .rc-bouton:active { transform: scale(0.98); }
#recrutement .rc-bouton--clair {
    background: #ffffff;
    color: #111111;
    border-color: #D2D2D7;
}
#recrutement .rc-bouton--clair:hover {
    background: #F5F5F7;
    border-color: #111111;
}
#recrutement .rc-bouton[disabled] {
    cursor: progress;
    opacity: 0.6;
}

/* Focus visible partout où l'on peut agir. */
#recrutement a:focus-visible,
#recrutement button:focus-visible,
#recrutement select:focus-visible,
#recrutement textarea:focus-visible,
#recrutement input:focus-visible,
#recrutement summary:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 3px;
}
#recrutement .rc-succes:focus { outline: none; }


/* ── 1. HERO ────────────────────────────────────────────────────────────────── */
/* Fond blanc nu : le titre porte l'ouverture, les plaques portent l'identité (pas de quadrillage décoratif :
   le papier technique de « Pourquoi Motro » sert de fond à un schéma, il n'y en a pas ici). */
#recrutement .rc-hero {
    background: #ffffff;
    padding: 144px 0 64px;   /* l'en-tête est fixe : place réservée au-dessus */
    border-bottom: 1px solid #E8E8ED;
}
#recrutement .rc-titre {
    font-size: clamp(36px, 5.4vw, 64px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #111111;
    margin: 0 0 20px;
    max-width: 11em;      /* « Vous voulez rejoindre / nos équipes ? » : deux lignes équilibrées sur écran large */
    text-wrap: balance;
}
#recrutement .rc-chapo {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    color: #55555b;
    max-width: 56ch;
    margin: 0;
}
/* Repères : trois faits du site, ponctués du point jaune cerclé de « Pourquoi Motro ». */
#recrutement .rc-reperes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
}
#recrutement .rc-reperes li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #111111;
}
#recrutement .rc-reperes li::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FFCC00;
    box-shadow: 0 0 0 1.5px #111111;
    flex: none;
}


/* ── 2. POSTES OUVERTS : les plaques ────────────────────────────────────────── */
#recrutement .rc-offres {
    background: #F5F5F7;
    padding: 80px 0 88px;
    scroll-margin-top: 72px;
}
#recrutement .rc-offres-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 32px;
    margin-bottom: 40px;
}
#recrutement .rc-offres-compte {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: #55555b;
    margin: 0;
    max-width: 44ch;
}
#recrutement .rc-offres-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#recrutement .rc-offre {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}
#recrutement .rc-offre-texte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 0 4px;
}
#recrutement .rc-offre-texte > p:first-child {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
    color: #3A3A3F;
    margin: 0;
}
#recrutement .rc-offre-texte .rc-bouton { margin-top: 6px; }
/* Deux colonnes : plaques sur une même rangée (même hauteur), textes sur la suivante. */
@media (min-width: 961px) {
    @supports (grid-template-rows: subgrid) {
        #recrutement .rc-offres-liste { grid-template-rows: auto auto; row-gap: 24px; }
        #recrutement .rc-offre { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
    }
}

/* La plaque : métal brossé (stries horizontales très fines sur un dégradé clair), arêtes
   éclairées par le haut, ombre portée courte. Les quatre rivets sont des dégradés radiaux
   posés aux coins par ::before — aucun élément vide dans le HTML. */
#recrutement .rc-plaque {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 30px 34px 28px;
    border: 1px solid #C7C7CC;
    border-radius: 10px;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0 1px, rgba(17, 17, 17, 0.022) 1px 2px),
        linear-gradient(180deg, #F6F6F8 0%, #E4E4E9 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(17, 17, 17, 0.07),
        0 1px 1px rgba(17, 17, 17, 0.05),
        0 22px 44px -28px rgba(17, 17, 17, 0.45);
    color: #1D1D1F;
}
#recrutement .rc-plaque::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Rivet bombé : cercle centré de 5 px de rayon (closest-side), clair au centre, sombre au bord. */
    --rc-rivet: radial-gradient(circle closest-side, #FBFBFC 0, #D3D3D8 45%, #8E8E94 82%, rgba(142, 142, 148, 0) 100%);
    background:
        var(--rc-rivet) 12px 12px / 10px 10px no-repeat,
        var(--rc-rivet) calc(100% - 12px) 12px / 10px 10px no-repeat,
        var(--rc-rivet) 12px calc(100% - 12px) / 10px 10px no-repeat,
        var(--rc-rivet) calc(100% - 12px) calc(100% - 12px) / 10px 10px no-repeat;
}
#recrutement .rc-plaque-tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 0 6px 14px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.14);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);   /* filet gravé : creux sombre, lèvre claire */
}
#recrutement .rc-plaque-marque {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #111111;
}
#recrutement .rc-plaque-marque::after {   /* le point jaune du logo */
    content: ".";
    color: #E0A800;
    letter-spacing: 0;
}
#recrutement .rc-plaque-ref {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: #55555b;
}
#recrutement .rc-plaque-titre-ligne {
    display: flex;
    flex-wrap: wrap;      /* écran étroit : l'étiquette passe sous le titre, jamais dans le mot */
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 12px;
    padding: 20px 6px 18px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.14);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}
/* Titre « frappé » : capitales serrées, lèvre claire sous la lettre. */
#recrutement .rc-plaque-titre {
    font-size: clamp(22px, 2.3vw, 28px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #1D1D1F;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    margin: 0;
    flex: 1 1 11em;
    min-width: 0;
    overflow-wrap: break-word;
}
#recrutement .rc-plaque-etat {
    flex: none;
    padding: 5px 10px;
    border-radius: 999px;
    background: #FFCC00;
    color: #111111;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 rgba(17, 17, 17, 0.18);
}
#recrutement .rc-plaque-champs {
    margin: 0;
    padding: 6px 6px 0;
}
#recrutement .rc-plaque-champs > div {
    display: grid;
    grid-template-columns: 9.5em minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
#recrutement .rc-plaque-champs > div:last-child { border-bottom: 0; padding-bottom: 4px; }
#recrutement .rc-plaque-champs dt {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #55555b;
}
#recrutement .rc-plaque-champs dd {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #111111;
}

/* Plaque VIERGE : métal un peu plus mat, valeurs en attente de frappe. */
#recrutement .rc-plaque--vierge {
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0 1px, rgba(17, 17, 17, 0.015) 1px 2px),
        linear-gradient(180deg, #FAFAFB 0%, #EDEDF1 100%);
}
#recrutement .rc-plaque--vierge .rc-plaque-champs dd {
    justify-self: start;
    color: #55555b;
    font-weight: 600;
    padding-bottom: 2px;
    border-bottom: 1px dashed #A1A1A6;
}

/* Reflet : une seule traversée, liée à l'entrée de la plaque dans l'écran. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        #recrutement .rc-plaque::after {
            content: "";
            position: absolute;
            inset: -20% -60%;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.6) 50%, transparent 58%);
            transform: translateX(-60%);
            opacity: 0;
            animation: rc-reflet linear both;
            animation-timeline: view();
            animation-range: entry 40% cover 45%;
        }
        @keyframes rc-reflet {
            0%   { transform: translateX(-60%); opacity: 0; }
            15%  { opacity: 1; }
            85%  { opacity: 1; }
            100% { transform: translateX(60%); opacity: 0; }
        }
    }
}


/* ── 3. POSTULER : étapes + formulaire ─────────────────────────────────────── */
#recrutement .rc-postuler {
    background: #ffffff;
    padding: 88px 0 104px;
    scroll-margin-top: 72px;
}
#recrutement .rc-postuler-grille {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
}
#recrutement .rc-postuler-intro {
    position: sticky;
    top: 112px;
}
#recrutement .rc-postuler-chapo {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    color: #55555b;
    margin: 14px 0 32px;
    max-width: 40ch;
}

/* Étapes : une vraie suite (candidature → rappel → rencontre), d'où les numéros et le fil. */
#recrutement .rc-etapes {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: rc-etape;
}
#recrutement .rc-etapes li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 0 26px 52px;
    counter-increment: rc-etape;
}
#recrutement .rc-etapes li::before {
    content: counter(rc-etape);
    position: absolute;
    left: 0;
    top: -4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #111111;
    background: #ffffff;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 800;
    color: #111111;
}
#recrutement .rc-etapes li:first-child::before {
    background: #FFCC00;
}
#recrutement .rc-etapes li:not(:last-child)::after {   /* le fil d'une étape à la suivante */
    content: "";
    position: absolute;
    left: 15.25px;
    top: 30px;
    bottom: 2px;
    width: 1.5px;
    background: #D2D2D7;
}
#recrutement .rc-etape-titre {
    font-size: 16px;
    font-weight: 800;
    color: #111111;
    margin: 0;
}
#recrutement .rc-etape-texte {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    color: #55555b;
    margin: 0;
}

/* Carte du formulaire. */
#recrutement .rc-carte {
    background: #ffffff;
    border: 1px solid #E8E8ED;
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 28px 56px -40px rgba(17, 17, 17, 0.35);
}
#recrutement .rc-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#recrutement .rc-ligne {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
}
#recrutement .rc-champ {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
#recrutement .rc-etiquette {
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    padding: 0;
}
#recrutement .rc-facultatif {
    font-weight: 600;
    color: #55555b;
}
#recrutement .rc-saisie {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid #D2D2D7;
    border-radius: 12px;
    background: #ffffff;
    color: #111111;
    font-family: inherit;
    font-size: 16px;   /* 16 px : pas de zoom automatique sur iPhone */
    font-weight: 500;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#recrutement .rc-saisie::placeholder { color: #6E6E73; }   /* 5,1:1 sur blanc : un exemple reste lisible */
#recrutement .rc-saisie:hover { border-color: #A1A1A6; }
#recrutement .rc-saisie:focus-visible {
    outline: none;
    border-color: #111111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12);
}
#recrutement .rc-saisie--texte {
    min-height: 148px;
    resize: vertical;
}
#recrutement select.rc-saisie {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}
#recrutement .rc-saisie[aria-invalid="true"] {
    border-color: #B42318;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.10);
}
#recrutement .rc-aide {
    font-size: 13px;
    font-weight: 500;
    color: #55555b;
    margin: 0;
}
#recrutement .rc-erreur {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    color: #B42318;   /* 6,1:1 sur blanc */
    margin: 0;
}

/* Choix de l'offre : deux tuiles à cocher, la tuile choisie prend le filet noir et le point jaune. */
#recrutement .rc-choix {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
#recrutement .rc-choix .rc-etiquette {
    display: block;
    margin-bottom: 10px;
}
#recrutement .rc-choix-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
#recrutement .rc-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 16px 14px 46px;
    border: 1px solid #D2D2D7;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
#recrutement .rc-option:hover { border-color: #A1A1A6; }
#recrutement .rc-option input {
    position: absolute;
    left: 16px;
    top: 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #111111;
}
#recrutement .rc-option:has(input:checked) {
    border-color: #111111;
    background: #FAFAFB;
    box-shadow: inset 0 0 0 1px #111111;
}
#recrutement .rc-option:has(input:focus-visible) {
    outline: 2px solid #111111;
    outline-offset: 3px;
}
#recrutement .rc-option input:focus-visible { outline: none; }
#recrutement .rc-option-titre {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    color: #111111;
}
#recrutement .rc-option-ref {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #55555b;
}

/* CV : le vrai champ fichier reste dans le DOM (clavier, lecteurs d'écran), seul son aspect change. */
#recrutement .rc-fichier {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}
#recrutement .rc-fichier input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
#recrutement .rc-fichier-bouton {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border: 1px dashed #A1A1A6;
    border-radius: 999px;
    background: #F5F5F7;
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
#recrutement .rc-fichier-bouton:hover {
    border-color: #111111;
    background: #EDEDF1;
}
#recrutement .rc-fichier:has(input:focus-visible) .rc-fichier-bouton {
    outline: 2px solid #111111;
    outline-offset: 3px;
}
#recrutement .rc-fichier-nom {
    font-size: 14px;
    font-weight: 600;
    color: #55555b;
    min-width: 0;
    overflow-wrap: anywhere;
}
#recrutement .rc-fichier-retirer {
    border: 0;
    background: none;
    padding: 4px 2px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* Piège à robots : hors de l'écran, hors tabulation. */
#recrutement .rc-piege {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Information sur les données (RGPD, article 13). */
#recrutement .rc-rgpd {
    padding: 16px 18px;
    border-radius: 12px;
    background: #F5F5F7;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    color: #55555b;
}
#recrutement .rc-rgpd p { margin: 0; }
#recrutement .rc-rgpd-details { margin-top: 8px; }
#recrutement .rc-rgpd-details summary {
    cursor: pointer;
    font-weight: 700;
    color: #111111;
    width: fit-content;
}
#recrutement .rc-rgpd-details ul {
    margin: 10px 0 8px;
    padding-left: 18px;
}
#recrutement .rc-rgpd-details li { margin-bottom: 4px; }
#recrutement .rc-lien {
    font-weight: 700;
    color: #111111;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#recrutement .rc-envoi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}
#recrutement .rc-bouton--plein { padding: 15px 28px; font-size: 16px; }
#recrutement .rc-statut {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #55555b;
}
#recrutement .rc-statut.est-erreur { color: #B42318; font-weight: 700; }

/* Confirmation, à la place du formulaire. */
#recrutement .rc-succes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 8px 0;
}
#recrutement .rc-succes-pastille {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFCC00;
    color: #111111;
    box-shadow: 0 0 0 1.5px #111111;
}
#recrutement .rc-succes-titre {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111111;
    margin: 4px 0 0;
}
#recrutement .rc-succes-texte {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: #3A3A3F;
    margin: 0;
    max-width: 48ch;
}
#recrutement .rc-succes-cv {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: #B42318;
    margin: 0;
}


/* ── 4. ÉCRANS ÉTROITS ──────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    #recrutement .rc-offres-liste { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    #recrutement .rc-postuler-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    #recrutement .rc-postuler-intro { position: static; }
}
@media (max-width: 767px) {
    #recrutement .rc-hero { padding: 112px 0 48px; }
    #recrutement .rc-chapo { font-size: 16px; }
    #recrutement .rc-offres { padding: 56px 0 64px; }
    #recrutement .rc-postuler { padding: 56px 0 72px; }
    #recrutement .rc-plaque { padding: 24px 22px 22px; }
    #recrutement .rc-plaque-champs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    #recrutement .rc-carte { padding: 24px 18px; border-radius: 16px; }
}
@media (max-width: 560px) {
    #recrutement .rc-ligne,
    #recrutement .rc-choix-options { grid-template-columns: minmax(0, 1fr); }
    #recrutement .rc-actions .rc-bouton,
    #recrutement .rc-envoi .rc-bouton { width: 100%; }
}