@charset "utf-8";
/* ============================================================================
   Joaillerie Accompagnement — marque commerciale de 001MARKETING
   Mise en relation des marques et créateurs de bijoux avec un atelier de
   joaillerie partenaire.

   Même discipline que les autres tunnels 001MARKETING : trois outils de
   hiérarchie et trois seulement (l'échelle typographique, le filet 1 px, le
   palier de fond). Aucun rayon, aucune ombre, sauf la barre d'action mobile.
   Ici le fond est clair : un ivoire de papier, l'encre, un seul or.

   Artisanat (playbook 15_design_craft) :
     · UNE forme répétée — le FILET DOUBLE, celui qui est gravé sur le plateau
       du monogramme : deux filets d'or, 48 px et 28 px. Il ouvre chaque
       section, encadre le dessin de la bannière, coiffe le bandeau de faits et
       chaque bloc du formulaire. Il repart sur les annonces.
     · TROIS reliefs, trois métiers, pas un de plus :
         .cle   la phrase-clé d'une section (une seule), filet d'or qui se trace
                à l'arrivée du bloc ;
         .lien  un maillon de raisonnement dans une phrase, filet fin, immobile,
                jamais sur une promesse (une promesse engage : elle est en gras) ;
         .nb    les chiffres et les seuils, en Cormorant tabulaire.
       Jamais deux reliefs sur la même ligne.
     · UN effet réservé — la gravure (dessin agrandi, 7 %) n'existe que derrière
       la section nuit. Partout ailleurs, les dessins sont nets et opaques.
     · L'ornement (la règle de joaillier dans la marge) est inerte : aria-hidden,
       sans interaction, immobile, absent sous 1280 px.
   ========================================================================== */

/* ---------------------------------------------------------------- polices */
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant-var.woff2') format('woff2-variations'),
       url('../fonts/cormorant-var.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant-italic-var.woff2') format('woff2-variations'),
       url('../fonts/cormorant-italic-var.woff2') format('woff2');
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Afacad';
  src: url('../fonts/afacad-var.woff2') format('woff2-variations'),
       url('../fonts/afacad-var.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- jetons */
:root {
  --ground:   #F4EFE6;
  --surface:  #FAF7F1;
  --elev:     #ECE5D8;
  --ink:      #1D1B18;
  --muted:    #5F574C;
  --line:     #D8CFBF;   /* décor seulement : 1,35:1 */
  --strong:   #877B6B;   /* contours de champs : 3,61:1 */
  --or:       #A88345;   /* décor et grand texte */
  --or-texte: #7A5C2E;   /* petit texte doré : 5,40:1 */
  --argent:   #59636C;
  --alert:    #A33A2A;

  --nuit:         #17181B;
  --nuit-surface: #202226;
  --nuit-line:    #34363B;
  --nuit-muted:   #A9A396;
  --or-nuit:      #C9A56A;

  --gut: 20px;
  --max: 1200px;
  --e: cubic-bezier(.22, .61, .36, 1);
  --serif: 'Cormorant', 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --sans: 'Afacad', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (min-width: 1024px) { :root { --gut: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 27px;
  font-variant-numeric: tabular-nums;
  font-synthesis: none;   /* l'italique de Cormorant est un vrai fichier, jamais un romain penché */
  -webkit-font-synthesis: none;
}
@media (min-width: 1024px) { body { font-size: 18px; line-height: 30px; } }

img, video, svg { display: block; max-width: 100%; }
a { color: var(--or-texte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------------------------------------------------------------- titres */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); margin: 0; letter-spacing: -.005em; }
h1 { font-size: 40px; line-height: 44px; }
h2 { font-size: 32px; line-height: 38px; }
h3 { font-size: 23px; line-height: 29px; font-weight: 600; }
h1 em, h2 em { font-style: italic; color: var(--or-texte); }
@media (min-width: 1024px) {
  h1 { font-size: 68px; line-height: 72px; }
  h2 { font-size: 48px; line-height: 54px; }
  h3 { font-size: 26px; line-height: 32px; }
}
p { margin: 0; }

.sur {
  font-family: var(--sans); font-weight: 600;
  font-size: 12px; line-height: 16px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--or-texte); margin: 0 0 18px;
}
/* Le FILET DOUBLE : deux filets d'or, 48 px puis 28 px, 4 px d'écart. C'est la gravure du
   plateau du monogramme, ramenée à plat. Unique forme répétée de la marque. */
.sur::before { content: ''; }
.filet2, .sur::before {
  display: block; width: 48px; height: 5px; margin-bottom: 14px;
  background:
    linear-gradient(var(--or), var(--or)) 0 0 / 48px 1px no-repeat,
    linear-gradient(var(--or), var(--or)) 0 4px / 28px 1px no-repeat;
}
.nuit .filet2, .nuit .sur::before {
  background:
    linear-gradient(var(--or-nuit), var(--or-nuit)) 0 0 / 48px 1px no-repeat,
    linear-gradient(var(--or-nuit), var(--or-nuit)) 0 4px / 28px 1px no-repeat;
}
.filet2--centre { margin-left: auto; margin-right: auto; }
.sur--nu::before { display: none; }
@media (min-width: 1024px) { .sur { font-size: 13px; line-height: 18px; } }
.chapo { font-size: 19px; line-height: 30px; color: var(--ink); }
@media (min-width: 1024px) { .chapo { font-size: 21px; line-height: 34px; } }
.mut { color: var(--muted); }
.leg { font-size: 13px; line-height: 20px; color: var(--muted); }
@media (min-width: 1024px) { .leg { font-size: 14px; line-height: 22px; } }

/* ------------------------------------------------- les trois reliefs, rationnés
   Un seul par ligne. Une seule .cle par section. Deux .lien par paragraphe au plus. */
.cle {                               /* le filet SEUL : gras + filet feraient deux reliefs sur la ligne */
  background-image: linear-gradient(var(--or), var(--or));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px;
  padding-bottom: 3px;
}
.nuit .cle { background-image: linear-gradient(var(--or-nuit), var(--or-nuit)); }
.js .rev .cle { background-size: 0 2px; }
.js .rev.vu .cle { background-size: 100% 2px; transition: background-size .8s var(--e) .2s; }

.lien {                              /* un maillon du raisonnement : filet fin, immobile */
  text-decoration: underline; text-decoration-color: var(--strong);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.nuit .lien { text-decoration-color: var(--nuit-muted); }

.nb {                                /* chiffres et seuils : on les scanne, on ne les lit pas */
  font-family: var(--serif); font-weight: 600; font-size: 1.1em; letter-spacing: .005em;
  color: var(--or-texte); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nuit .nb { color: var(--or-nuit); }

@media (prefers-reduced-motion: reduce) {
  .js .rev .cle, .js .rev.vu .cle { background-size: 100% 2px; transition: none; }
}

/* ---------------------------------------------------------------- trame */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
section { padding: 64px 0; }
@media (min-width: 1024px) { section { padding: 104px 0; } }
/* Le poids [class] met ces utilitaires AU-DESSUS des « margin: 0 » des composants qui viennent
   plus bas dans la feuille. Sans lui, .temps{margin:0} annulait .t-48 en silence : le titre de la
   section nuit touchait la liste, et .filets{margin:0} annulait .t-32 partout ailleurs. */
.t-8[class] { margin-top: 8px; } .t-16[class] { margin-top: 16px; }
.t-24[class] { margin-top: 24px; } .t-32[class] { margin-top: 32px; }
.t-40[class] { margin-top: 40px; } .t-48[class] { margin-top: 48px; } .t-64[class] { margin-top: 64px; }
.etroit { max-width: 760px; }
.palier { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* section sombre : l'écrin */
.nuit { background: var(--nuit); color: #F4EFE6; }
.nuit h1, .nuit h2, .nuit h3 { color: #F4EFE6; }
.nuit h2 em { color: var(--or-nuit); }
.nuit .sur { color: var(--or-nuit); }
.nuit .sur::before { background: var(--or-nuit); }
.nuit .chapo { color: #F4EFE6; }
.nuit .mut, .nuit .leg { color: var(--nuit-muted); }
.nuit a { color: var(--or-nuit); }

/* ---------------------------------------------------------------- bouton */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--ink); color: #F4EFE6;
  font-family: var(--sans); font-weight: 600;
  font-size: 15px; line-height: 15px; letter-spacing: .12em; text-transform: uppercase;
  padding: 18px 28px; text-decoration: none; min-height: 48px;
  transition: background .2s var(--e), color .2s var(--e);
}
.btn:hover, .btn:focus-visible { background: var(--or-texte); color: #FAF7F1; }
.btn--vide { background: transparent; color: var(--ink); outline: 1px solid var(--strong); outline-offset: -1px; }
.btn--vide:hover { background: transparent; color: var(--or-texte); outline-color: var(--or-texte); }
.nuit .btn { background: var(--or-nuit); color: var(--nuit); }
.nuit .btn:hover { background: #F4EFE6; color: var(--nuit); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------------- en-tête */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 239, 230, .94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
@media (min-width: 1024px) { .hdr__in { height: 76px; } }
.hdr__mark { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.hdr__mark svg { width: 34px; height: 34px; flex: none; }
.hdr__nom { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 22px; white-space: nowrap; color: var(--ink); }
@media (min-width: 1024px) { .hdr__nom { font-size: 23px; } }
.hdr .btn { padding: 12px 18px; min-height: 44px; }
@media (max-width: 560px) { .hdr .btn { display: none; } }

.skip {
  position: absolute; top: 0; left: 0; z-index: 100;
  background: var(--ink); color: #F4EFE6; padding: 12px 18px;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { clip-path: none; }

/* ---------------------------------------------------------------- bannière */
.hero { padding: 48px 0 56px; }
@media (min-width: 1024px) { .hero { padding: 88px 0 96px; } }
.hero__g { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .hero__g { grid-template-columns: 7fr 5fr; gap: 64px; } }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.hero__illu { width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 1 / 1; }
@media (max-width: 1023px) { .hero__illu { max-width: 300px; } }
.hero__illu svg { width: 100%; height: 100%; }

/* Le passe-partout : le filet double posé en cadre autour du dessin (encre dehors, or dedans). */
.mat { position: relative; }
.mat > .illu-carre { outline: 1px solid var(--strong); }
.mat::after {
  content: ''; position: absolute; inset: 9px; pointer-events: none;
  outline: 1px solid var(--or); opacity: .5;
}

/* ---------------------------------------------------------------- bandeau de faits
   Deux à quatre faits selon ce qui est certifié : une rangée de colonnes séparées par
   un filet, jamais une grille qui laisserait des trous quand un fait est retiré. */
.faits { padding: 0; background: var(--elev); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faits__g { display: flex; flex-wrap: wrap; margin: 0; }
.faits__i { flex: 1 1 200px; padding: 18px var(--gut) 20px; position: relative; }
.faits__i + .faits__i { border-left: 1px solid var(--line); }
@media (max-width: 639px) {
  .faits__i { flex: 1 1 100%; }
  .faits__i + .faits__i { border-left: 0; border-top: 1px solid var(--line); }
}
.faits__i dt {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--or-texte);
  font-weight: 600; margin: 0 0 8px; padding-top: 9px; position: relative;
}
.faits__i dt::before {                 /* le filet double, en réduction */
  content: ''; position: absolute; top: 0; left: 0; width: 28px; height: 5px;
  background:
    linear-gradient(var(--or), var(--or)) 0 0 / 28px 1px no-repeat,
    linear-gradient(var(--or), var(--or)) 0 4px / 16px 1px no-repeat;
}
.faits__i dd { margin: 0; font-size: 16px; line-height: 22px; color: var(--ink); }

/* ---------------------------------------------------------------- respiration
   Une pause entre les six étapes et le tableau des métaux : la signature de la marque,
   dans la voix de la marque (Cormorant italique doré), et rien d'autre. */
.respire { background: var(--elev); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 0; text-align: center; }
@media (min-width: 1024px) { .respire { padding: 72px 0; } }
.respire svg { width: 52px; height: 52px; margin: 0 auto 22px; color: var(--or-texte); }
.respire p {
  font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--or-texte);
  font-size: 28px; line-height: 36px; max-width: 26ch; margin: 0 auto;
}
@media (min-width: 1024px) { .respire p { font-size: 38px; line-height: 48px; } }

/* ---------------------------------------------------------------- grilles */
.duo { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .duo { gap: 64px; grid-template-columns: 5fr 7fr; align-items: start; }
  .duo--egal { grid-template-columns: 1fr 1fr; }
}
.filets { list-style: none; margin: 0; padding: 0; }
.filets li { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 26px; }
.filets li:first-child { border-top: 1px solid var(--line); }
.nuit .filets li { border-color: var(--nuit-line); }

/* pour qui / pas pour qui */
.tri { display: grid; gap: 1px; background: var(--line); outline: 1px solid var(--line); }
@media (min-width: 768px) { .tri { grid-template-columns: 1fr 1fr; } }
.tri > div { background: var(--surface); padding: 32px 24px; }
@media (min-width: 1024px) { .tri > div { padding: 40px; } }
.tri h3 { margin-bottom: 8px; }
.tri li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.tri li::before { font-family: var(--serif); font-size: 22px; line-height: 26px; }
.tri .oui li::before { content: '+'; color: var(--or-texte); }
.tri .non li::before { content: '\2013'; color: var(--muted); }

/* les six étapes */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); outline: 1px solid var(--line); counter-reset: e; }
@media (min-width: 640px)  { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
.etape { background: var(--surface); padding: 28px 24px 32px; counter-increment: e; }
.etape svg { width: 72px; height: 72px; margin-bottom: 18px; }
.etape__n { font-family: var(--serif); font-size: 15px; color: var(--or-texte); letter-spacing: .08em; }
.etape__n::before { content: counter(e, decimal-leading-zero) ' — '; }
.etape h3 { margin: 6px 0 10px; }
.etape p { color: var(--muted); font-size: 16px; line-height: 25px; }

/* déroulé en trois temps */
.temps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 1024px) { .temps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.temps li { border-top: 1px solid var(--nuit-line); padding-top: 24px; }
.temps b { display: block; font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 44px; color: var(--or-nuit); margin-bottom: 14px; }
.temps h3 { font-size: 23px; line-height: 29px; margin-bottom: 8px; }

/* tableau argent / or */
.metaux { width: 100%; border-collapse: collapse; }
.metaux-boite { overflow-x: auto; }
.metaux th, .metaux td { text-align: left; vertical-align: top; padding: 16px 20px 16px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 24px; }
.metaux thead th { border-top: 0; border-bottom: 1px solid var(--ink); font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 30px; padding-bottom: 12px; }
.metaux tbody th { font-weight: 600; color: var(--muted); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; width: 26%; }
.pastille { display: inline-block; width: 12px; height: 12px; margin-right: 10px; vertical-align: 1px; }
.pastille--argent { background: linear-gradient(135deg, #DDE1E4, #8C959C); outline: 1px solid var(--argent); }
.pastille--or { background: linear-gradient(135deg, #E9CF94, #A88345); outline: 1px solid var(--or-texte); }

/* chevalière */
.illu-carre { aspect-ratio: 1 / 1; width: 100%; max-width: 480px; background: var(--surface); outline: 1px solid var(--line); outline-offset: -1px; padding: 8%; }
.illu-carre svg { width: 100%; height: 100%; }
.illu-carre.nuit { background: var(--nuit); outline-color: var(--nuit-line); }
.illu-detail { aspect-ratio: 3 / 2; padding: 5%; }   /* un détail se cadre serré, pas en carré */
.leg-illu { margin-top: 10px; }

/* qui fait quoi */
.roles { display: grid; gap: 1px; background: var(--line); outline: 1px solid var(--line); }
@media (min-width: 768px) { .roles { grid-template-columns: 1fr 1fr; } }
.roles > div { background: var(--surface); padding: 28px 24px; }

/* ---------------------------------------------------------------- questions */
.faq { max-width: 840px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 28px; color: var(--ink); min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--or-texte); font-size: 26px; line-height: 1; }
.faq details[open] summary::after { content: '\2013'; }
.faq details > div { padding: 0 0 24px; color: var(--muted); font-size: 17px; line-height: 27px; }
.faq details > div p + p { margin-top: 10px; }

/* ---------------------------------------------------------------- formulaire */
.form-carte { background: var(--surface); outline: 1px solid var(--line); outline-offset: -1px; padding: 28px 20px; max-width: 760px; color: var(--ink); }
@media (min-width: 1024px) { .form-carte { padding: 48px 44px; } }
.form-carte fieldset { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.form-carte legend {
  font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 30px;
  padding: 0; margin: 8px 0 18px; color: var(--ink);
}
.form-carte legend small { display: block; font-family: var(--sans); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--or-texte); margin-bottom: 6px; padding-top: 9px; position: relative; }
.form-carte legend small::before {     /* le filet double ouvre chaque bloc du formulaire */
  content: ''; position: absolute; top: 0; left: 0; width: 28px; height: 5px;
  background:
    linear-gradient(var(--or), var(--or)) 0 0 / 28px 1px no-repeat,
    linear-gradient(var(--or), var(--or)) 0 4px / 16px 1px no-repeat;
}
.form-carte .sep { height: 1px; background: var(--line); margin: 24px 0; border: 0; }
.champ { display: block; margin-bottom: 20px; }
.champ > span, .groupe > p { display: block; font-size: 14px; line-height: 20px; letter-spacing: .04em; color: var(--ink); margin-bottom: 8px; font-weight: 600; }
.champ small, .groupe small { display: block; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.champ input, .champ select, .champ textarea {
  width: 100%; background: #FFFFFF; color: var(--ink);
  border: 1px solid var(--strong); border-radius: 0; padding: 13px 14px; min-height: 48px;
  font-family: inherit; font-size: 17px; line-height: 24px;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 0; }
.champ--2 { display: grid; gap: 0 20px; }
@media (min-width: 768px) { .champ--2 { grid-template-columns: 1fr 1fr; } }
.groupe { margin: 0 0 22px; }
.choix { display: grid; gap: 8px; }
@media (min-width: 640px) { .choix--2 { grid-template-columns: 1fr 1fr; } }
.choix label {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; min-height: 48px; cursor: pointer;
  background: #FFFFFF; outline: 1px solid var(--strong); outline-offset: -1px;
  font-size: 16px; line-height: 23px;
}
.choix label:has(input:checked) { outline: 2px solid var(--ink); outline-offset: -2px; background: var(--ground); }
.choix input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }
.choix .hors { color: var(--muted); }
.stop { display: none; border-left: 2px solid var(--alert); padding: 12px 0 12px 16px; margin: 4px 0 22px; font-size: 15px; line-height: 23px; }
.stop.vu { display: block; }
.case { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin-bottom: 16px; font-size: 15px; line-height: 22px; color: var(--ink); }
.case input { width: 22px; height: 22px; accent-color: var(--ink); margin: 1px 0 0; }
.case .mut { color: var(--muted); }
.form-carte .btn { width: 100%; }
@media (min-width: 768px) { .form-carte .btn { width: auto; } }
.invalide { outline: 2px solid var(--alert) !important; outline-offset: -2px; }

/* ---------------------------------------------------------------- pied */
.pied { border-top: 1px solid var(--line); padding: 64px 0 40px; background: var(--ground); }
.pied__g { display: grid; gap: 40px; }
@media (min-width: 1024px) { .pied__g { grid-template-columns: 1fr 1fr; } }
.pied a { color: var(--muted); }
.pied a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- barre mobile */
.barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(244, 239, 230, .97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(29, 27, 24, .10);   /* la seule ombre de la page */
}
.barre .btn { display: block; text-align: center; }
@media (min-width: 768px) { .barre { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 84px; } }

/* ------------------------------------------------- la gravure : l'effet réservé
   Le dessin de la chevalière, agrandi et sorti du cadre, à 7 % derrière la seule
   section nuit. Un voile dégradé passe par-dessus : le contraste du texte ne
   dépend jamais du dessin. Nulle part ailleurs sur la page. */
.nuit--grave { position: relative; overflow: hidden; }
.grave {
  position: absolute; top: 50%; right: -8%; width: 620px; height: 620px;
  transform: translateY(-50%); opacity: .07; color: var(--or-nuit);
  pointer-events: none; z-index: 0;
}
.grave svg { width: 100%; height: 100%; }
.nuit--grave::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--nuit) 0 38%, rgba(23, 24, 27, .82) 66%, rgba(23, 24, 27, .45) 100%);
}
.nuit--grave > .wrap { position: relative; z-index: 1; }
@media (max-width: 767px) { .grave { display: none; } }

/* ------------------------------------------------- LA PLANCHE (le « flyer »)
   Le site accompagne des gens qui montent une gamme : il se présente donc lui-même
   comme une suite de planches numérotées, 001 à 005 — le vocabulaire de l'atelier.
   Anatomie, reprise des affiches de référence :
     · un numéro d'index posé sur le FILET DOUBLE (la forme de la marque) ;
     · un mot de titrage qui enjambe le bord du cadre et finit sur une facette, pas un point ;
     · [la nature du mot], sa définition, un dessin au trait dans le cadre ;
     · une cote verticale à gauche, un mot fantôme au trait à droite ;
     · une glose entre guillemets ; des repères de coupe aux quatre angles ;
     · deux feuilles derrière, qui s'éventent à l'arrivée : une pile de planches, pas une carte.
   Une définition est un fait du métier, jamais une affirmation sur l'atelier partenaire. */
.fly { position: relative; margin: 0 auto; width: 100%; max-width: 440px; --mot: clamp(38px, 10.5vw, 56px); }
.fly__dos {
  position: absolute; inset: 0; background: var(--surface);
  outline: 1px solid var(--line); outline-offset: -1px;
  transform: rotate(-2deg); transform-origin: 50% 62%;
}
.fly__dos--2 { background: var(--elev); transform: rotate(2.3deg) translate(4px, 3px); }
.fly__feuille {
  position: relative; z-index: 1; background: var(--surface);
  outline: 1px solid var(--strong); outline-offset: -1px;
  padding: 30px 26px 24px;
  display: grid; grid-template-columns: 17% minmax(0, 1fr);
  grid-template-areas: "logo idx" "mot mot" "cote gram" "cote def" "cote img" "glose glose";
  grid-template-rows: auto auto auto auto 1fr auto;
}
.fly__feuille::before {                /* repères de coupe : 8 traits, un seul élément */
  content: ''; position: absolute; inset: 0; pointer-events: none; --m: var(--strong);
  background:
    linear-gradient(var(--m), var(--m)) 0 14px / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 14px 0 / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 14px / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) calc(100% - 14px) 0 / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 calc(100% - 14px) / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 14px 100% / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% calc(100% - 14px) / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) calc(100% - 14px) 100% / 1px 9px no-repeat;
}
.fly__logo { grid-area: logo; width: 30px; height: 30px; color: var(--ink); }
.fly__idx {
  grid-area: idx; justify-self: end; position: relative; margin: 0; padding-bottom: 10px;
  font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 20px; letter-spacing: .1em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.fly__idx::after {                     /* 001 posé sur le filet double, aligné à droite */
  content: ''; position: absolute; right: 0; bottom: 0; width: 36px; height: 5px;
  background:
    linear-gradient(var(--or), var(--or)) 100% 0 / 36px 1px no-repeat,
    linear-gradient(var(--or), var(--or)) 100% 4px / 21px 1px no-repeat;
}
.fly__mot {
  grid-area: mot; position: relative; z-index: 2; margin: 14px 0 0;
  font-family: var(--serif); font-weight: 600; font-size: var(--mot); line-height: 1; letter-spacing: -.012em;
  color: var(--ink); white-space: nowrap;
}
.fly__mot dfn {                        /* le papier du mot masque le filet du cadre sur toute sa largeur, */
  font-style: normal;                  /* espace entre deux mots compris : sinon « Fichier 3D » se lit « Fichier-3D » */
  background: var(--surface); padding-right: .04em;
}
.fly__gemme { display: inline-block; width: .27em; height: .36em; margin-left: .06em; color: var(--or); vertical-align: baseline; overflow: visible; }
.fly__cadre {                          /* le cadre commence à mi-hauteur du mot : le mot l'enjambe */
  grid-area: 2 / 2 / 6 / 3; z-index: 0; margin-top: calc(14px + var(--mot) * .52);
  background: var(--surface); outline: 1px solid var(--strong); outline-offset: -1px;
}
.fly__gram {
  grid-area: gram; z-index: 1; margin: 12px 0 0; padding: 0 44px 0 18px;
  font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 22px; color: var(--muted);
}
.fly__def { grid-area: def; z-index: 1; margin: 6px 0 0; padding: 0 44px 0 18px; font-size: 15px; line-height: 23px; color: var(--ink); }
.fly__img { grid-area: img; z-index: 1; padding: 10px 44px 18px 18px; }
.fly__img svg { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.fly__img--large svg { aspect-ratio: 300 / 210; }
.fly__img--feuille svg { aspect-ratio: 360 / 300; }
.fly__fant {                           /* mot fantôme : du trait, pas de l'encre */
  grid-area: 3 / 2 / 6 / 3; z-index: 1; justify-self: end; align-self: center; margin: 0 9px 0 0;
  writing-mode: vertical-rl; transform: rotate(180deg); user-select: none;
  font-family: var(--sans); font-weight: 700; font-size: 27px; line-height: 1; letter-spacing: .05em;
  color: transparent; -webkit-text-stroke: 1px var(--strong);
}
.fly__cote {
  grid-area: cote; justify-self: start; align-self: end; margin: 0 0 18px 2px;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font-size: 10.5px; line-height: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.fly__glose {                          /* la voix de la marque : Cormorant italique doré */
  grid-area: glose; margin: 20px 0 0; text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 19px; line-height: 26px; color: var(--or-texte);
}
.fly__glose::before { content: '«\a0'; font-style: normal; color: var(--ink); }
.fly__glose::after  { content: '\a0»'; font-style: normal; color: var(--ink); }

/* planche large : le texte à gauche, le dessin à droite, dans le même cadre */
@media (min-width: 900px) {
  .fly--large { max-width: none; --mot: 64px; }
  .fly--large .fly__feuille {
    padding: 34px 34px 28px; grid-template-columns: 9% minmax(0, 5fr) minmax(0, 4fr);
    grid-template-areas: "logo idx idx" "mot mot mot" "cote gram img" "cote def img" "glose glose glose";
    grid-template-rows: auto auto auto 1fr auto;
  }
  .fly--large .fly__cadre { grid-area: 2 / 2 / 5 / 4; }
  .fly--large .fly__fant { grid-area: 3 / 3 / 5 / 4; }
  .fly--large .fly__gram, .fly--large .fly__def { padding-left: 28px; padding-right: 20px; }
  .fly--large .fly__def { font-size: 19px; line-height: 30px; padding-bottom: 30px; max-width: 30em; }
  .fly--large .fly__img { padding: 20px 60px 20px 8px; align-self: center; }
  .fly--large .fly__img svg { max-width: 320px; margin-left: auto; }
}

/* arrivée : la pile s'évente, la facette s'allume. L'état replié n'existe que sous .js. */
.js .fly:not(.vu) .fly__dos { transform: none; }
.js .fly.vu .fly__dos { transition: transform .95s var(--e) .2s; }
.js .fly:not(.vu) .fly__gemme { transform: scale(0) rotate(-40deg); }
.js .fly .fly__gemme { transform-origin: 50% 80%; transition: transform .7s cubic-bezier(.3, 1.6, .5, 1) 1s; }

/* ------------------------------------------------- LA PHOTOGRAPHIE : trois emplois, trois hauteurs
   Des visages, pour que le visiteur se reconnaisse. Les images sont GÉNÉRÉES : c'est dit dans les
   mentions légales (rubrique « Images », désignée par le pied de page), pas sur la page. Elles figurent le visiteur (une créatrice, un gérant de boutique), jamais
   l'atelier partenaire, jamais un client, jamais une pièce. Noir et blanc de naissance (fichiers en
   niveaux de gris, preparer_photos.py) : aucun filtre CSS ne s'applique à une photo.
     1. le portrait DANS la planche 001 — hauteur moyenne ;
     2. les camées de « À qui s'adresse ce service » — petits, dans l'ovale du plateau du monogramme ;
     3. la bande immersive avant le formulaire — haute, plein cadre, une phrase dans une boîte. */
.fly--photo .fly__img { padding: 0; margin: 12px 1px 1px; line-height: 0; }
.fly--photo .fly__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.fly--photo .fly__gram, .fly--photo .fly__def { padding-right: 18px; }
.fly--photo .fly__fant { -webkit-text-stroke-color: rgba(250, 247, 241, .92); align-self: end; margin-bottom: 26px; }

/* les camées : l'ovale est celui du plateau de la chevalière, avec son double filet. C'est la
   seule exception au rayon 0, et ce n'est pas une forme de plus : c'est le logotype. */
.camees { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 760px; }
@media (min-width: 768px) { .camees { gap: 40px; } }
.camee { text-align: center; }
.camee__ovale {
  position: relative; display: block; width: 100%; max-width: 168px; margin: 0 auto 16px; aspect-ratio: 4 / 5;
  border-radius: 50%; padding: 7px; outline: 1px solid var(--strong); outline-offset: -1px;
}
.camee__ovale::after {                 /* le second filet, en or, comme la gravure */
  content: ''; position: absolute; inset: 4px; border-radius: 50%; outline: 1px solid var(--or); outline-offset: -1px;
  pointer-events: none;
}
.camee__ovale img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform .6s var(--e); }
.camee:hover .camee__ovale img { transform: scale(1.045); }
.camee__titre { font-family: var(--serif); font-weight: 600; font-size: 17px; line-height: 22px; color: var(--ink); }
@media (min-width: 768px) { .camee__titre { font-size: 22px; line-height: 28px; } }

/* la bande immersive : la photo existe parce que le texte tient dans une boîte, sur un côté,
   et qu'un voile léger (58 % au plus) garantit le contraste sans éteindre l'image. */
.immersion { position: relative; padding: 0; overflow: hidden; background: var(--elev); min-height: 340px; display: flex; align-items: flex-end; }
@media (min-width: 1024px) { .immersion { min-height: clamp(480px, 38vw, 640px); align-items: center; } }
.immersion__photo { position: absolute; inset: 0; overflow: hidden; }
/* Parallaxe HORIZONTALE : ses cheveux touchent le haut du cadre, un glissement vertical lui couperait
   la tête. L'image déborde de 6 % de chaque côté et glisse de ±6 % : la marge vient du mur vide. */
.immersion__photo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% 0; will-change: transform; }
@media (min-width: 1024px) { .immersion__photo img { left: -6%; width: 112%; max-width: none; } }   /* max-width:100% global bridait le débord */
.immersion::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(244, 239, 230, .58) 0%, rgba(244, 239, 230, .2) 38%, rgba(244, 239, 230, 0) 60%);
}
.immersion__in { position: relative; z-index: 1; padding-top: 28px; padding-bottom: 28px; }
.immersion__boite { background: var(--surface); outline: 1px solid var(--strong); outline-offset: -1px; padding: 26px 24px; max-width: 430px; }
@media (min-width: 1024px) { .immersion__boite { padding: 38px 36px; } }
.immersion__phrase { font-size: 34px; line-height: 38px; margin: 0 0 12px; }
@media (min-width: 1024px) { .immersion__phrase { font-size: 46px; line-height: 50px; } }
@media (prefers-reduced-motion: reduce) { .camee__ovale img { transition: none; } .immersion__photo img { transform: none !important; } }

/* ------------------------------------------------- le trait qui se dessine
   Dans un conteneur .trace, la construction remplace <use> par le dessin lui-même : les tracés
   sont alors de vrais éléments de la page, et pathLength="1" les fait se dessiner à vitesse égale.
   Sans JavaScript, ou si le script tombe, aucun tiret n'est posé : le dessin est entier. */
.js .trace [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .vu .trace [pathLength], .js .trace.vu [pathLength] {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.3s var(--e) calc(var(--trace-delai, .25s) + var(--k, 0s));
}
.trace g > :nth-child(3n+2) { --k: .12s; }
.trace g > :nth-child(3n)   { --k: .24s; }
.titre-niveau > :nth-child(1) { --k: .30s; } .titre-niveau > :nth-child(2) { --k: .42s; }
.titre-niveau > :nth-child(3) { --k: .54s; } .titre-niveau > :nth-child(4) { --k: .66s; }
.titre-niveau > :nth-child(5) { --k: .78s; } .titre-niveau > :nth-child(6) { --k: .90s; }
.titre-niveau > :nth-child(7) { --k: 1.02s; } .titre-niveau > :nth-child(8) { --k: 1.14s; }

/* le seul mouvement continu d'un dessin : le balayage du fichier 3D */
.cao-scan { opacity: 0; }
.js .vu .cao-scan { animation: balayage 7s ease-in-out 1.6s infinite; }
@keyframes balayage {
  0%   { transform: translateY(-62px); opacity: 0; }
  12%  { opacity: .9; }
  55%  { transform: translateY(62px); opacity: .9; }
  66%, 100% { transform: translateY(62px); opacity: 0; }
}

/* ------------------------------------------------- le défilé : les six métiers, au trait */
.defile { overflow: hidden; white-space: nowrap; margin: 0 0 40px; user-select: none; }
.defile__piste { display: inline-flex; align-items: center; gap: 36px; padding-right: 36px; animation: defile 60s linear infinite; }
.defile__piste span {
  font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 8vw, 84px); line-height: 1.15;
  color: transparent; -webkit-text-stroke: 1px var(--strong);
}
.defile__piste svg { width: 16px; height: 22px; flex: none; color: var(--or); margin: 0; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ------------------------------------------------- le relais : la demande fait le trajet 1 → 2 → 3 */
@media (min-width: 1024px) {
  .temps { position: relative; }
  .temps li { position: relative; border-top-color: transparent; }
  .temps::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--nuit-line);
    transform-origin: 0 50%;
  }
  .temps::after {
    content: ''; position: absolute; top: -4px; left: calc(66.666% + 21px); width: 9px; height: 9px; border-radius: 50%;
    background: var(--or-nuit);
  }
  .temps li::before {
    content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%;
    background: var(--nuit); outline: 1px solid var(--or-nuit);
  }
  .js .temps:not(.vu)::before { transform: scaleX(0); }
  .js .temps.vu::before { transition: transform 1.5s var(--e) .2s; }
  .js .temps:not(.vu)::after { opacity: 0; }
  .js .temps.vu::after { animation: relais 3.2s var(--e) .5s 1 both; }
}
@keyframes relais {
  0% { left: 0; opacity: 0; } 8% { opacity: 1; }
  38%, 52% { left: calc(33.333% + 10px); }
  92%, 100% { left: calc(66.666% + 21px); opacity: 1; }
}

/* ------------------------------------------------- les six étapes : un chiffre fantôme derrière chaque dessin */
.etape { position: relative; overflow: hidden; }
.etape::after {
  content: counter(e, decimal-leading-zero); position: absolute; right: 14px; top: 2px; pointer-events: none;
  font-family: var(--serif); font-weight: 500; font-size: 92px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--line);
}
.etape > * { position: relative; z-index: 1; }

/* ------------------------------------------------- semis d'éclats autour de la planche de la bannière */
.hero__fly { position: relative; max-width: 440px; margin: 0 auto; }
.semis { position: absolute; inset: -26px -30px; pointer-events: none; z-index: 2; }
.semis svg { position: absolute; width: 18px; height: 18px; color: var(--or); opacity: .55; animation: scintille 6s ease-in-out infinite; }
.semis svg:nth-child(1) { left: 0; top: 9%; }
.semis svg:nth-child(2) { right: 2px; top: 1%; width: 24px; height: 24px; animation-delay: -2.2s; }
.semis svg:nth-child(3) { left: 6px; bottom: 16%; width: 13px; height: 13px; animation-delay: -4s; }
.semis svg:nth-child(4) { right: 0; bottom: 5%; animation-delay: -1.1s; }
.semis svg:nth-child(5) { right: 9px; top: 46%; width: 11px; height: 11px; animation-delay: -3.1s; }
@keyframes scintille { 0%, 100% { opacity: .18; transform: scale(.82); } 50% { opacity: .8; transform: scale(1); } }
@media (max-width: 1023px) { .semis { display: none; } }

/* deux rôles : un dessin par société */
.roles svg.trace { width: 56px; height: 56px; margin-bottom: 14px; color: var(--ink); }

/* les planches dans la trame des sections */
@media (min-width: 1024px) {
  .duo--fly > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .duo--fly > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .duo--fly > .fly { grid-column: 1; grid-row: 2; margin: 8px 0 0; }
}
@media (max-width: 1023px) { .duo--fly > .fly { margin-top: 16px; } }
@media (min-width: 1100px) {
  .faq-trame {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 72px; align-items: start;
    grid-template-areas: "intro fly" "liste fly";
  }
  .faq-trame > .etroit { grid-area: intro; }
  .faq-trame > .faq { grid-area: liste; }
  .faq-trame > .fly { grid-area: fly; position: sticky; top: 116px; margin: 0; }
}
@media (max-width: 1099px) { .faq-trame > .fly { margin-top: 40px; } }

@media (prefers-reduced-motion: reduce) {
  .js .trace [pathLength] { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .js .fly:not(.vu) .fly__dos { transform: rotate(-2deg); }
  .js .fly:not(.vu) .fly__dos--2 { transform: rotate(2.3deg) translate(4px, 3px); }
  .js .fly:not(.vu) .fly__gemme { transform: none; }
  .js .fly .fly__dos, .js .fly .fly__gemme { transition: none; }
  .js .vu .cao-scan, .defile__piste, .semis svg, .js .temps.vu::after { animation: none; }
  .js .temps:not(.vu)::before { transform: none; }
  .js .temps:not(.vu)::after { opacity: 1; }
  .defile__piste { flex-wrap: wrap; justify-content: center; white-space: normal; }
}

/* ------------------------------------------------- ornement : la règle de joaillier
   Inerte par construction : aria-hidden, aucune interaction, immobile, et absente
   sous 1280 px — un téléphone n'a pas de marge à décorer. */
.regle {
  position: fixed; top: 0; bottom: 0; width: 9px; z-index: 0; pointer-events: none; opacity: .34;
  left: max(10px, calc((100% - var(--max)) / 2 - 28px));
  background:
    linear-gradient(var(--line), var(--line)) 0 0 / 1px 100% repeat-y,
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 16px) 0 0 / 4px 100%,
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 80px) 0 0 / 9px 100%;
}
@media (max-width: 1279px) { .regle { display: none; } }

/* ---------------------------------------------------------------- apparitions */
.js .rev { opacity: 0; transform: translateY(14px); }
.js .rev.vu { opacity: 1; transform: none; transition: opacity .5s var(--e), transform .5s var(--e); }
.js .rev.d1.vu { transition-delay: .08s; }
.js .rev.d2.vu { transition-delay: .16s; }

/* Ce qui doit être COMPTÉ apparaît un par un : les six étapes, les trois temps, les
   critères. Le reste arrive d'un bloc — on ne fait pas attendre un lecteur devant un
   paragraphe. L'entrée dure moins que le pas, jamais deux états visibles à la fois. */
.js .serie > * { opacity: 0; transform: translateY(10px); }
.js .serie.vu > * { opacity: 1; transform: none; transition: opacity .34s var(--e), transform .34s var(--e); }
.js .serie.vu > :nth-child(1) { transition-delay: .00s; }
.js .serie.vu > :nth-child(2) { transition-delay: .07s; }
.js .serie.vu > :nth-child(3) { transition-delay: .14s; }
.js .serie.vu > :nth-child(4) { transition-delay: .21s; }
.js .serie.vu > :nth-child(5) { transition-delay: .28s; }
.js .serie.vu > :nth-child(6) { transition-delay: .35s; }
.js .serie.vu > :nth-child(7) { transition-delay: .42s; }
.js .serie.vu > :nth-child(8) { transition-delay: .49s; }

@media (prefers-reduced-motion: reduce) {
  .js .rev, .js .rev.vu, .js .serie > *, .js .serie.vu > * { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------- bandeau traceurs
   Accepter et Refuser : même format, même taille, même poids (CNIL, 17/09/2020).
   Grille à deux colonnes égales, pas un flex. Bandeau non modal. */
.traceurs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--surface); border-top: 1px solid var(--strong); padding: 20px 0 calc(20px + env(safe-area-inset-bottom)); }
.traceurs[hidden] { display: none; }
.traceurs__in { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .traceurs__in { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; } }
.traceurs__txt p { margin: 0; font-size: 15px; line-height: 23px; }
.traceurs__txt .sur { margin-bottom: 8px; }
.traceurs__txt .sur::before { display: none; }
.traceurs__btn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.traceurs__btn .btn { text-align: center; padding: 16px 22px; }
@media (min-width: 900px) { .traceurs__btn { grid-template-columns: 160px 160px; } }
body.traceurs-ouvert .barre { display: none; }
.traceurs__avis { position: fixed; left: var(--gut); right: var(--gut); bottom: 16px; z-index: 71; margin: 0; padding: 12px 16px; background: var(--ink); color: #F4EFE6; font-size: 15px; line-height: 21px; }
.traceurs__avis[hidden] { display: none; }
@media (min-width: 900px) { .traceurs__avis { left: auto; max-width: 420px; } }

.traceurs-liste { width: 100%; border-collapse: collapse; }
.tableau-boite { overflow-x: auto; }
.traceurs-liste caption { text-align: left; margin-bottom: 12px; }
.traceurs-liste th, .traceurs-liste td { border-top: 1px solid var(--line); padding: 12px 16px 12px 0; text-align: left; vertical-align: top; font-size: 15px; line-height: 22px; }
.traceurs-liste thead th { border-top: 0; border-bottom: 1px solid var(--ink); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; }
.traceurs-liste code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--or-texte); }

/* pages de texte (mentions, politique) */
.texte h2 { font-size: 30px; line-height: 36px; margin-top: 48px; }
@media (min-width: 1024px) { .texte h2 { font-size: 36px; line-height: 42px; } }
.texte p, .texte ul { margin-top: 14px; }
.texte ul { padding-left: 20px; }
.texte li + li { margin-top: 8px; }

#form, #projet, #traceurs, #etapes, #questions { scroll-margin-top: 84px; }
@media (min-width: 1024px) { #form, #projet, #traceurs, #etapes, #questions { scroll-margin-top: 96px; } }