/* Charte Bellom Carrières — extraite de index.html le 29/10/2026, à l identique.
   L index garde sa copie en ligne : ce fichier sert les pages ajoutées ensuite, pour
   qu elles soient indiscernables de la première sans qu on ait touché à celle-ci. */
  /* Charte reprise du site : noir #121212 sur blanc, jaune #F6DA1B en accent, gris olive,
     Montserrat en titre et Assistant en texte.
     Le jaune ne porte jamais de texte ni d'information seule : à 1,4:1 sur blanc il est
     invisible pour beaucoup de gens. Il souligne, il ne dit rien. */
  :root {
    color-scheme: light;
    --ground: #FFFFFF;
    --surface: #F7F7F5;
    --surface-2: #EFEFEC;
    --line: #E0E0DC;
    --border: #B0B0AB;
    --ink: #121212;
    --muted: #6A6A65;
    --accent: #F6DA1B;
    --accent-wash: #FDF7D2;
    --display: Montserrat, "Helvetica Neue", Arial, sans-serif;
    --body: Assistant, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --measure: 62ch;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

  h1, h2, h3, h4 {
    font-family: var(--display);
    text-wrap: balance;
    margin: 0;
    line-height: 1.08;
    letter-spacing: -.015em;
  }

  .eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 16px;
  }

  :focus-visible {
    outline: 3px solid var(--ink);
    box-shadow: 0 0 0 6px var(--accent);
    outline-offset: 1px;
  }

  /* ── Ouverture ───────────────────────────────────────────── */
  header.hero { padding: 76px 0 56px; }
  .hero h1 { font-size: clamp(38px, 6.4vw, 74px); font-weight: 800; }
  .hero h1 em {
    font-style: normal;
    background: linear-gradient(transparent 62%, var(--accent) 62%);
  }
  .hero p.lede {
    max-width: var(--measure);
    font-size: clamp(17px, 2vw, 20px);
    margin: 24px 0 0;
  }

  .reperes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 26px 0 32px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
  }
  .reperes b { color: var(--ink); font-weight: 500; }

  .cta {
    display: inline-block;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    background: var(--ink);
    color: var(--ground);
    text-decoration: none;
    border: 0;
    padding: 15px 30px;
    cursor: pointer;
    box-shadow: 6px 6px 0 var(--accent), 6px 6px 0 1px var(--ink);
    transition: transform .12s, box-shadow .12s;
  }
  .cta:hover, .cta:active {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 var(--accent), 4px 4px 0 1px var(--ink);
  }

  /* Appel à candidater collé en bas de l'écran, sur téléphone.
     Sur un grand écran il ne sert à rien : la page se parcourt vite et le bouton du haut reste
     proche. Sur un téléphone, la candidature est à plusieurs écrans de distance, et un visiteur
     convaincu en cours de route n'a aucun moyen d'y aller sans faire défiler tout le reste.

     Il n'apparaît qu'une fois l'accroche du haut sortie de l'écran : deux appels visibles en
     même temps se feraient concurrence. Il s'efface dès que la candidature est atteinte, sinon
     il recouvrirait précisément les champs qu'il invite à remplir. */
  .barre-candidater { display: none; }
  @media (max-width: 720px) {
    .barre-candidater {
      display: block;
      position: fixed;
      left: 14px;
      right: 14px;
      /* `env(safe-area-inset-bottom)` : sur les iPhone sans bouton, la barre de gestes
         mangerait le bas du bouton. */
      bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      z-index: 60;
      padding: 16px 20px;
      font-family: var(--display);
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      text-decoration: none;
      background: var(--ink);
      color: var(--ground);
      border-bottom: 3px solid var(--accent);
      box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
      opacity: 0;
      transform: translateY(140%);
      /* Sans `pointer-events: none`, le bouton invisible intercepterait les gestes en bas
         de l'écran. */
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
    }
    .barre-candidater.visible {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
  }

  section { padding: 64px 0; border-top: 1px solid var(--line); }
  h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 600; }
  .section-intro { color: var(--muted); max-width: var(--measure); margin: 14px 0 0; }

  /* ── Le poste ────────────────────────────────────────────── */
  .poste { display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: start; }
  @media (max-width: 780px) {
    .poste { grid-template-columns: 1fr; gap: 30px; }
    /* La rémunération et le lieu sont ce qu'on cherche en premier : sur mobile ils passent
       devant le texte, au lieu d'arriver après trois paragraphes. */
    .fiche { order: -1; position: static; }
  }

  .badge-ouvert {
    display: inline-block;
    background: var(--ink);
    color: var(--ground);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 10px;
    margin-bottom: 14px;
  }

  .poste h3 { font-size: 19px; font-weight: 600; margin: 30px 0 10px; }
  .poste h3:first-of-type { margin-top: 24px; }
  .poste ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
  .poste .gris { color: var(--muted); }

  .fiche {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 6px 22px 20px;
    position: sticky;
    top: 24px;
    /* UNE FICHE COLLEE NE DOIT JAMAIS DEPASSER LA FENETRE.

       Collee en haut, elle suit la lecture : la remuneration reste sous les yeux pendant qu on lit
       le poste, et c est bien ce qu on veut. Mais quand elle est plus haute que la fenetre — ecran
       de portable, fenetre reduite, zoom du navigateur — elle occupe tout le cote : on ne peut plus
       ni la lire en entier, ni lire le texte a cote, et rien ne defile.

       On la borne donc a la hauteur disponible, et ce qui depasse defile dans la fiche elle-meme. */
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Sur une fenetre basse, meme bornee, la fiche mangerait l ecran entier : elle redevient un bloc
     ordinaire, qu on depasse simplement en defilant. */
  @media (max-height: 760px) {
    .fiche { position: static; max-height: none; overflow-y: visible; }
  }
  .fiche dl { margin: 0; }
  .fiche dt {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 18px;
  }
  .fiche dd {
    margin: 5px 0 0;
    font-size: 17px;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
  }
  .fiche dd + dt { border-top: 1px solid var(--line); margin-top: 18px; }
  .fiche dd.precision {
    font-family: var(--body);
    font-size: 13px;
    color: var(--muted);
    margin-top: 2px;
  }
  .fiche dd.precision + dt { border-top: 1px solid var(--line); margin-top: 18px; }

  /* Les deux rythmes : un choix visible en tête de fiche plutôt que deux lignes à comparer. */
  .rythmes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 0; }
  .rythme {
    font-family: var(--body);
    background: var(--ground);
    border: 1px solid var(--border);
    padding: 10px 8px;
    cursor: pointer;
    display: grid;
    gap: 2px;
    text-align: center;
  }
  .rythme b { font-family: var(--display); font-size: 14px; font-weight: 600; }
  .rythme span { font-size: 12px; color: var(--muted); }
  .rythme:hover { border-color: var(--ink); }
  .rythme.actif {
    background: var(--ink);
    border-color: var(--ink);
  }
  .rythme.actif b { color: var(--ground); }
  .rythme.actif span { color: #C8C8C4; }

  .note-rythme {
    font-size: 12px;
    color: var(--muted);
    margin: 8px 0 0;
    min-height: 32px;
  }

  .a-remplir {
    background: var(--accent-wash);
    border: 1px dashed var(--ink);
    padding: 1px 7px;
    font-size: 15px;
    font-family: var(--mono);
  }

  /* ── Points illustrés ────────────────────────────────────── */
  /* Une icône par point, alignée dans la marge : le texte reste le contenu, l'icône sert
     de repère de lecture. Pas de carte pour chaque phrase — ce serait du décor. */
  .points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
  .points li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
  .points svg {
    width: 24px; height: 24px;
    stroke: var(--ink); fill: none;
    stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
    margin-top: 2px;
  }
  .points b { display: block; font-weight: 600; }
  .points span { color: var(--muted); }

  /* Le matériel : trois exigences de même poids, donc trois blocs de même taille. */
  .materiel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 20px;
  }
  @media (max-width: 700px) { .materiel { grid-template-columns: 1fr; } }

  .besoin {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--ink);
    padding: 20px 18px;
  }
  .besoin svg {
    width: 30px; height: 30px;
    stroke: var(--ink); fill: none;
    stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
    margin-bottom: 12px;
  }
  .besoin h4 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
  .besoin p { margin: 0; font-size: 14px; color: var(--muted); }
  .besoin .note {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink);
  }

  .encadre-formation {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    background: var(--accent-wash);
    border-left: 3px solid var(--accent);
    padding: 20px 22px;
    margin-top: 14px;
  }
  .encadre-formation svg {
    width: 28px; height: 28px;
    stroke: var(--ink); fill: none;
    stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  }
  .encadre-formation p { margin: 0; }
  .encadre-formation p + p { margin-top: 8px; color: var(--muted); font-size: 14px; }

  /* Le recrutement est une vraie séquence : la numérotation dit quelque chose de vrai. */
  .etapes {
    list-style: none;
    counter-reset: etape;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
  }
  .etapes li {
    counter-increment: etape;
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 14px;
    row-gap: 2px;
    align-items: baseline;
  }
  /* Le titre ET la description vont en colonne 2. Sans cette règle, la description retombait
     dans la colonne du numéro — 24px de large — et s'affichait un mot par ligne. */
  .etapes b, .etapes span { grid-column: 2; }
  .etapes li::before {
    content: counter(etape);
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ground);
    background: var(--ink);
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
  }
  .etapes b { display: block; font-weight: 600; }
  .etapes span { color: var(--muted); }

  /* ── Choix du type de cheveux ────────────────────────────── */
  /* Une question posée en premier, en cartes plutôt qu'en menu : elle décide de la suite,
     et le candidat doit la voir, pas la dérouler. */
  .cheveux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
  @media (max-width: 620px) { .cheveux { grid-template-columns: 1fr; } }

  .type-cheveux {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 18px;
    cursor: pointer;
    display: grid;
    gap: 6px;
  }
  .type-cheveux:hover { border-color: var(--ink); background: var(--surface-2); }
  .type-cheveux input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    clip-path: inset(50%);
  }
  .type-cheveux:focus-within { border-color: var(--ink); }
  .type-cheveux:has(input:checked) {
    background: var(--ground);
    border-color: var(--ink);
    box-shadow: 4px 4px 0 var(--accent), 4px 4px 0 1px var(--ink);
  }
  .type-cheveux svg {
    width: 30px; height: 30px;
    stroke: var(--ink); fill: none;
    stroke-width: 1.3; stroke-linecap: round;
  }
  .type-cheveux b { font-family: var(--display); font-size: 16px; font-weight: 600; }
  .type-cheveux span { font-size: 13px; color: var(--muted); }

  .suite { display: none; }
  .suite.visible { display: block; }

  .avis-gamme {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 14px;
    background: var(--accent-wash);
    border-left: 3px solid var(--accent);
    padding: 18px 20px;
    margin-top: 20px;
  }
  .avis-gamme svg {
    width: 22px; height: 22px;
    stroke: var(--ink); fill: none;
    stroke-width: 1.4; stroke-linecap: round;
  }
  .avis-gamme p { margin: 0; font-size: 14px; }
  .avis-gamme p + p { margin-top: 6px; color: var(--muted); font-size: 13px; }

  /* ── Exemples de vidéos ──────────────────────────────────── */
  /* Une seule rangée, qui défile vers la droite.
     Les trois tiennent côte à côte sur grand écran. Sur téléphone, la carte suivante
     dépasse volontairement du bord : c'est cette amorce qui dit au visiteur qu'il y a
     une suite. Empilées, les vidéos l'obligeaient à parcourir trois hauteurs d'écran
     pour atteindre la troisième — et la plupart n'y arrivaient jamais. */
  .exemples {
    display: flex;
    gap: 18px;
    margin-top: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* La barre de défilement a besoin de sa place, sinon elle recouvre la légende. */
    padding-bottom: 10px;
    scrollbar-width: thin;
  }
  .exemple {
    margin: 0;
    /* `flex: 0 0` : une carte ne se comprime jamais pour entrer de force dans la rangée. */
    flex: 0 0 calc((100% - 36px) / 3);
    scroll-snap-align: start;
  }
  @media (max-width: 720px) { .exemple { flex-basis: 45%; } }
  @media (max-width: 460px) { .exemple { flex-basis: 76%; } }
  /* Format vertical : ce sont des vidéos de réseaux sociaux, pas de la télévision. */
  .cadre-video {
    aspect-ratio: 9 / 16;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .cadre-video video { width: 100%; height: 100%; object-fit: cover; }
  .a-poser {
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted);
    text-align: center;
    padding: 12px;
    background: var(--accent-wash);
    border: 1px dashed var(--ink);
  }
  .exemple figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }

  .rappel-choix {
    background: var(--surface);
    border-left: 3px solid var(--ink);
    padding: 12px 16px;
    font-size: 14px;
    margin: 0 0 4px;
  }
  .rappel-choix a { color: var(--ink); }

  .attente p {
    background: var(--surface);
    border-left: 3px solid var(--ink);
    padding: 20px 22px;
    margin: 26px 0 0;
    max-width: var(--measure);
    color: var(--muted);
  }

  .invite-choix {
    background: var(--surface);
    border: 1px dashed var(--border);
    padding: 26px;
    text-align: center;
    color: var(--muted);
    margin-top: 26px;
  }

  /* ── Candidature ─────────────────────────────────────────── */
  fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  legend { padding: 0; }

  .champ { display: grid; gap: 7px; margin-top: 20px; }
  .champ label, .champ .intitule { font-size: 14px; font-weight: 600; }
  .champ .aide { font-size: 13px; color: var(--muted); }
  .champ input, .champ textarea, .champ select {
    background: var(--ground);
    border: 1px solid var(--border);
    color: var(--ink);
    font: inherit;
    padding: 13px;
    width: 100%;
  }
  .champ textarea { resize: vertical; min-height: 96px; }
  .obligatoire { color: var(--muted); font-weight: 400; }

  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media (max-width: 620px) { .duo { grid-template-columns: 1fr; } }

  /* Avant coiffage puis après : la seule séquence réelle du sujet. */
  .sequence { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 20px; }
  @media (max-width: 780px) { .sequence { grid-template-columns: 1fr; } }

  .etape legend {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .etape legend span {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-left: 8px;
  }
  .etape > p { margin: 0 0 14px; font-size: 13px; color: var(--muted); }

  /* L'exemple borde la séquence : à gauche du bloc « avant », à droite du bloc « après ».
     Le candidat voit donc le modèle du côté vers lequel il regarde. */
  .corps-etape { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
  .etape.apres .corps-etape { grid-template-columns: 1fr 96px; }
  .etape.apres .exemple-photo { order: 2; }
  @media (max-width: 900px) and (min-width: 781px) {
    .corps-etape, .etape.apres .corps-etape { grid-template-columns: 1fr; }
    .etape.apres .exemple-photo { order: 0; }
  }
  @media (max-width: 520px) {
    .corps-etape, .etape.apres .corps-etape { grid-template-columns: 1fr; }
    .etape.apres .exemple-photo { order: 0; }
  }

  .exemple-photo { margin: 0; display: grid; gap: 8px; }
  /* SUR TÉLÉPHONE, LES DEUX EXEMPLES SE PARTAGENT LA LARGEUR.
     Empilés, chacun prenait toute la page : il fallait faire défiler deux hauteurs d'écran pour
     voir le second, et la comparaison avant/après — qui est tout l'intérêt — devenait impossible. */
  @media (max-width: 780px) {
    .exemple-photo { grid-template-columns: 1fr 1fr; align-items: start; }
  }
  /* Deux exemples empilés : la colonne reste étroite, à côté des trois dépôts de photos. */
  .exemple-photo .cadre + .cadre { margin-top: 0; }
  .exemple-photo .cadre {
    aspect-ratio: 3 / 4;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .exemple-photo img { width: 100%; height: 100%; object-fit: cover; }
  .exemple-photo figcaption {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 6px;
    text-align: center;
  }

  .trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  /* SUR TÉLÉPHONE, UNE RANGÉE QUI DÉFILE PLUTÔT QUE DES TUILES ÉCRASÉES.
     Trois tuiles sur un iPhone SE font 102 px de large : illisible dès qu'une miniature s'y
     ajoute, et deux par ligne coupait le trio en deux. Comme pour les vidéos d'exemple, la case
     suivante dépasse du bord — c'est cette amorce qui dit qu'il y en a d'autres. */
  @media (max-width: 620px) {
    .trois {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 8px;
      scrollbar-width: thin;
    }
    .trois .depot {
      flex: 0 0 62%;
      scroll-snap-align: start;
    }
  }

  .depot {
    position: relative;
    background: var(--surface);
    border: 1px dashed var(--border);
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-align: center;
    padding: 10px;
    overflow: hidden;
    transition: border-color .15s, background .15s;
  }
  .depot:hover { border-color: var(--ink); background: var(--surface-2); }
  .depot svg { width: 20px; height: 20px; stroke: var(--muted); fill: none; stroke-width: 1.6; }
  .depot:hover svg { stroke: var(--ink); }
  .depot .titre { font-size: 12px; color: var(--muted); line-height: 1.35; }

  /* L'input reste focusable au clavier : `display:none` le sortait du parcours de tabulation
     et rendait le formulaire infranchissable sans souris. */
  /* Une zone de dépôt qu'on désigne au candidat parce que sa photo manque. Elle doit sauter aux
     yeux : c'est le seul signal qu'il aura, la bulle du navigateur ne pouvant pas s'afficher sur
     un champ invisible. */
  .depot.manquant {
    outline: 3px solid #C8102E;
    outline-offset: 3px;
  }
  .depot input[type="file"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    clip-path: inset(50%);
  }
  .depot:focus-within { border-color: var(--ink); background: var(--surface-2); }

  .depot.rempli { border-style: solid; border-color: var(--ink); padding: 0; }
  .depot.rempli .titre, .depot.rempli svg { display: none; }
  .depot img.apercu { width: 100%; height: 100%; object-fit: cover; }
  .depot .etiquette {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--ink);
    color: var(--ground);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 6px;
    display: none;
  }
  .depot.rempli .etiquette { display: block; }
  .retirer {
    position: absolute;
    top: 6px; right: 6px;
    width: 30px; height: 30px;
    border: 0;
    background: var(--ink);
    color: var(--ground);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: none;
  }
  .depot.rempli .retirer { display: block; }

  .compteur {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
    margin-top: 16px;
  }
  .compteur b { color: var(--ink); font-weight: 500; }
  /* Dire ce qui suffit ET ce qui aide : exiger six photos faisait abandonner, n'en demander
     qu'une ferait arriver des dossiers qu'on ne peut pas juger. */
  .encouragement {
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 62ch;
    margin: 8px 0 0;
  }

  .video-depot { aspect-ratio: auto; padding: 24px; flex-direction: row; gap: 12px; }

  .consentement {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 18px;
    margin-top: 34px;
  }
  .consentement input { width: 20px; height: 20px; margin: 2px 0 0; }
  .consentement label { font-size: 14px; }

  .rgpd { font-size: 13px; color: var(--muted); margin: 12px 0 0; max-width: var(--measure); }
  .rgpd a { color: var(--ink); }

  /* ── Les postes pourvus ──────────────────────────────────── */
  .pourvus {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 26px;
  }
  @media (max-width: 720px) { .pourvus { grid-template-columns: 1fr; } }
  .pourvu {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 18px 18px 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  /* Pas d'`opacity` : elle faisait tomber le texte à 2,1:1. On désature avec des couleurs
     explicites, le contenu reste lisible. */
  .pourvu svg { width: 22px; height: 22px; stroke: var(--muted); fill: none; stroke-width: 1.5; flex: none; }
  .pourvu h3 { font-size: 16px; font-weight: 600; color: var(--muted); }
  .pourvu p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }

  footer {
    border-top: 1px solid var(--line);
    padding: 32px 0 58px;
    color: var(--muted);
    font-size: 13px;
  }
  footer a { color: var(--ink); }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
  }


  /* `hidden` doit masquer, même quand une règle d'auteur pose un display.
     Sans cette ligne, `.exemples { display: flex }` l'emporte sur la règle du navigateur et
     l'attribut ne sert à rien — les vidéos restaient visibles avant tout choix. */
  [hidden] { display: none !important; }