/* ==========================================================================
   AVISCHECK — Systeme de design
   Identite : papier chaud, encre profonde, or d'orfevre, vert de confiance.
   ========================================================================== */

/* ---------- 1. Jetons ---------- */
:root{
  /* Surfaces */
  --paper:      #FBF7EF;
  --paper-2:    #F4EDE0;
  --paper-3:    #EADFCC;
  --white:      #FFFDF9;

  /* Encre */
  --ink:        #14120D;
  --ink-2:      #4C463A;
  --ink-3:      #7E7565;
  --ink-4:      #A79D8B;

  /* Or */
  --gold:       #B0801F;
  --gold-2:     #D9A83C;
  --gold-3:     #F0D392;
  --gold-wash:  #FAF0D8;

  /* Vert de confiance */
  --forest:     #123529;
  --forest-2:   #0A211A;
  --forest-3:   #2B5A48;
  --mint:       #9FD3B8;

  /* Signal */
  --clay:       #9E3A22;
  --clay-soft:  #FBEAE4;
  --sky:        #1F4C6B;

  /* Traits */
  --line:        rgba(20,18,13,.12);
  --line-2:      rgba(20,18,13,.22);
  --line-dark:   rgba(251,247,239,.16);
  --line-dark-2: rgba(251,247,239,.30);

  /* Rythme */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Ombres discretes */
  --sh-1: 0 1px 0 rgba(20,18,13,.04), 0 2px 8px -4px rgba(20,18,13,.10);
  --sh-2: 0 2px 0 rgba(20,18,13,.03), 0 18px 40px -28px rgba(20,18,13,.45);
  --sh-3: 0 30px 70px -40px rgba(20,18,13,.60);

  /* Type */
  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-text: "Manrope", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:16.5px;
  line-height:1.62;
  font-weight:450;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

/* Grain papier — signature maison */
body::before{
  content:"";
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.28; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

img,svg,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
::selection{background:var(--gold-3); color:var(--ink)}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.028em;
  margin:0 0 .5em;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 96;
}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.15rem)}
h3{font-size:clamp(1.28rem,2.2vw,1.68rem); letter-spacing:-.02em}
h4{font-size:1.06rem; font-family:var(--f-text); font-weight:700; letter-spacing:-.01em; line-height:1.35}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:700}

.lead{font-size:clamp(1.08rem,1.55vw,1.28rem); line-height:1.58; color:var(--ink-2); font-weight:450}
.muted{color:var(--ink-3)}
.small{font-size:.86rem; line-height:1.55}
.tiny{font-size:.775rem; line-height:1.5}
.center{text-align:center}
.nowrap{white-space:nowrap}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}

/* ---------- 3. Grille ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.wrap-n{width:100%; max-width:var(--wrap-narrow); margin-inline:auto; padding-inline:24px}
.section{padding:clamp(64px,8.5vw,124px) 0; position:relative}
.section--tight{padding:clamp(48px,5vw,74px) 0}
/* Un enfant de grille vaut min-width:auto par défaut : un mot long ou un bloc
   large élargit alors toute la colonne et fait déborder la page horizontalement.
   On neutralise ce comportement partout, et on autorise la coupure des mots. */
.grid > *, .split > *, .stats > *, .manifest > *, .plans > *, .flowline > *,
.shop-layout > *, .ftr__grid > *, .dist__row > *, .pledge > *, .mo-prod > *,
.mo-hero > *, .cfg__row > *, .shop-hero__in > *, .hero__in > *{min-width:0}
body{overflow-wrap:break-word}

.grid{display:grid; gap:28px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center}
.split--top{align-items:start}
.stack-8>*+*{margin-top:8px}
.stack-16>*+*{margin-top:16px}
.stack-24>*+*{margin-top:24px}

/* ---------- 4. Fioritures editoriales ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.705rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold); margin:0 0 20px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--gold); flex:none; box-shadow:0 0 0 3px var(--gold-wash);
}
.eyebrow--ink{color:var(--ink-3)}
.eyebrow--ink::before{background:var(--ink-3); box-shadow:0 0 0 3px rgba(20,18,13,.07)}
.eyebrow--light{color:var(--gold-3)}
.eyebrow--light::before{background:var(--gold-2); box-shadow:0 0 0 3px rgba(217,168,60,.18)}

.rule{height:1px; background:var(--line); border:0; margin:0}
.rule--gold{height:2px; width:52px; background:var(--gold); border:0; margin:0 0 26px; border-radius:2px}

.kicker{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--ink-4); text-transform:uppercase}
.ital{font-style:italic; font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 96}
.gold-text{color:var(--gold)}

/* Souligne dessine a la main */
.underline-hand{position:relative; display:inline-block; z-index:0}
.underline-hand::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.02em; height:.34em; z-index:-1;
  background:var(--gold-3); border-radius:.2em; transform:rotate(-.5deg);
}

/* ---------- 5. Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 24px; border-radius:var(--r-pill); border:1px solid transparent;
  font-size:.925rem; font-weight:700; letter-spacing:-.01em; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), background .18s, color .18s, border-color .18s, box-shadow .18s;
  white-space:nowrap; text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none}

.btn--gold{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn--gold:hover{background:var(--gold); border-color:var(--gold); color:#1B1403; box-shadow:0 10px 24px -14px rgba(176,128,31,.9)}

.btn--primary{background:var(--gold); color:#1B1403; border-color:var(--gold)}
.btn--primary:hover{background:var(--gold-2); border-color:var(--gold-2); box-shadow:0 12px 26px -14px rgba(176,128,31,1)}

.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink); background:rgba(20,18,13,.04)}

.btn--light{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.btn--light:hover{background:var(--gold-2); border-color:var(--gold-2)}

.btn--outline-light{background:transparent; color:var(--paper); border-color:var(--line-dark-2)}
.btn--outline-light:hover{border-color:var(--paper); background:rgba(251,247,239,.08)}

.btn--sm{padding:9px 17px; font-size:.83rem}
.btn--lg{padding:16px 32px; font-size:1rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.45; cursor:not-allowed}

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.92rem;
  border-bottom:1.5px solid var(--gold); padding-bottom:2px; transition:gap .2s, color .2s;
}
.link-arrow:hover{gap:13px; color:var(--gold)}

/* ---------- 6. Sceau tournant ---------- */
.seal{position:relative; display:inline-grid; place-items:center; flex:none}
.seal svg{display:block}
.seal__ring{animation:seal-spin 26s linear infinite; transform-origin:50% 50%}
@keyframes seal-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.seal__ring{animation:none}}

/* ---------- 7. En-tete ---------- */
.hdr{
  position:sticky; top:0; z-index:900;
  background:rgba(251,247,239,.84);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s;
}
.hdr.is-stuck{border-bottom-color:var(--line); background:rgba(251,247,239,.95)}
.hdr__in{display:flex; align-items:center; gap:20px; height:74px}
.brand{display:flex; align-items:center; gap:12px; flex:none}

/* Marque : poinçon d'orfèvre. Un octogone tracé — la forme des poinçons de
   garantie français — enfermant un A géométrique dont la barre est en or.
   Tout est en currentColor : la marque suit le fond, sans variante à gérer. */
.brand__mark{width:35px; height:35px; flex:none; color:var(--ink); overflow:visible}
.bm-punch{opacity:.42; transition:opacity .35s}
.bm-a{transition:fill .35s}
.bm-bar{fill:#B8862B; transition:fill .35s}
.brand:hover .bm-punch{opacity:.8}
.brand:hover .bm-bar{fill:#D9A83C}
/* Fonds sombres : pied de page et en-tête posé sur le hero */
.ftr .brand__mark{color:var(--paper)}
.ftr .bm-bar{fill:#D9A83C}

.brand__name{
  font-family:var(--f-display); font-size:1.38rem; font-weight:700; letter-spacing:-.034em;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 40; line-height:1;
}
.brand__name em{font-style:normal; color:var(--gold)}
.brand__tld{font-family:var(--f-text); font-size:.575rem; font-weight:700; letter-spacing:.19em;
  color:var(--ink-3); text-transform:uppercase; display:block; margin-top:5px}

.nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.nav a{
  padding:9px 13px; border-radius:var(--r-pill); font-size:.885rem; font-weight:600;
  color:var(--ink-2); transition:color .16s, background .16s;
}
.nav a:hover{color:var(--ink); background:rgba(20,18,13,.05)}
.nav a.is-active{color:var(--ink); background:var(--paper-3)}
.hdr__cta{display:flex; align-items:center; gap:10px; margin-left:14px; flex:none}

.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line-2); background:transparent;
  border-radius:12px; margin-left:auto; cursor:pointer; position:relative;
}
.burger span{position:absolute; left:12px; right:12px; height:1.6px; background:var(--ink); transition:.25s}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21.2px}
.burger span:nth-child(3){top:26.4px}
.burger[aria-expanded="true"] span:nth-child(1){top:21.2px; transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:21.2px; transform:rotate(-45deg)}

.mobmenu{
  position:fixed; inset:74px 0 0; z-index:899; background:var(--paper);
  padding:26px 24px 40px; overflow-y:auto;
  transform:translateY(-8px); opacity:0; pointer-events:none; transition:.28s cubic-bezier(.2,.7,.3,1);
  border-top:1px solid var(--line);
}
.mobmenu.is-open{transform:none; opacity:1; pointer-events:auto}
.mobmenu__link{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-display); font-size:1.55rem; font-weight:600; letter-spacing:-.03em;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.mobmenu__link span{font-family:var(--f-text); font-size:.7rem; color:var(--ink-4); font-weight:600}
.mobmenu__cta{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:28px}

/* ---------- 8. Pied de page ---------- */
.ftr{background:var(--forest-2); color:var(--paper-2); padding:clamp(56px,7vw,92px) 0 30px; position:relative}
.ftr h4{color:var(--paper); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px; font-weight:700}
.ftr a{color:rgba(251,247,239,.72); font-size:.9rem; transition:color .16s}
.ftr a:hover{color:var(--gold-2)}
.ftr__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:44px; border-bottom:1px solid var(--line-dark)}
.ftr__col ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:11px}
.ftr__brand p{color:rgba(251,247,239,.62); font-size:.9rem; max-width:34ch; margin-top:16px}
.ftr__bottom{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; padding-top:26px}
.ftr__bottom p{color:rgba(251,247,239,.5); font-size:.8rem; margin:0}
.ftr__legal{display:flex; flex-wrap:wrap; gap:18px; margin-left:auto}
.ftr__legal a{font-size:.8rem; color:rgba(251,247,239,.5)}
.ftr__norm{
  display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:9px 15px;
  border:1px solid var(--line-dark-2); border-radius:var(--r-pill);
  font-size:.75rem; color:var(--gold-3); letter-spacing:.02em;
}

/* ---------- 9. Cartes ---------- */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:28px; transition:border-color .2s, transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
  position:relative; height:100%;
}
.card--hover:hover{border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--sh-2)}
.card__num{
  font-family:var(--f-display); font-size:2.5rem; color:var(--gold); line-height:1;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 60; display:block; margin-bottom:14px;
}
.card__icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--gold-wash); border:1px solid rgba(176,128,31,.22); color:var(--gold);
}
.card h3,.card h4{margin-bottom:9px}
.card p{color:var(--ink-2); font-size:.935rem}
.card--dark{background:var(--forest); border-color:rgba(251,247,239,.13); color:var(--paper-2)}
.card--dark h3,.card--dark h4{color:var(--paper)}
.card--dark p{color:rgba(251,247,239,.72)}
.card--dark .card__icon{background:rgba(217,168,60,.12); border-color:rgba(217,168,60,.28); color:var(--gold-2)}
.card--roomy{padding:38px}
.card--flat{background:transparent; border:0; padding:0}
.card--ledger{border-left:2px solid var(--gold); border-radius:0 var(--r) var(--r) 0}

/* ---------- 10. Chiffres ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.stat{background:var(--paper); padding:30px 26px}
.stat__v{
  font-family:var(--f-display); font-size:clamp(2.1rem,3.6vw,2.9rem); line-height:1; color:var(--ink);
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 80; letter-spacing:-.035em; display:block;
}
.stat__v sup{font-size:.42em; color:var(--gold); top:-1.1em; position:relative}
.stat__l{font-size:.815rem; color:var(--ink-3); margin-top:9px; display:block; line-height:1.45}
.dark .stat{background:var(--forest)}
.dark .stat__v{color:var(--paper)}
.dark .stat__l{color:rgba(251,247,239,.6)}
.dark .stats{background:var(--line-dark); border-color:var(--line-dark)}

/* ---------- 11. Bandeau defilant ---------- */
.marquee{overflow:hidden; border-block:1px solid var(--line); padding:20px 0; background:var(--paper-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex; gap:52px; width:max-content; animation:marquee 48s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee__item{
  display:inline-flex; align-items:center; gap:11px; white-space:nowrap;
  font-family:var(--f-display); font-size:1.16rem; font-weight:600; color:var(--ink-3);
  letter-spacing:-.02em; font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 40;
}
.marquee__item::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- 12. Etoiles ---------- */
.stars{display:inline-flex; align-items:center; gap:2.5px; line-height:0; flex:none}
.stars svg{width:1em; height:1em; display:block}
.stars--lg{font-size:26px}
.stars--md{font-size:18px}
.stars--sm{font-size:14px}
.star-empty{fill:rgba(20,18,13,.14)}
.star-full{fill:var(--gold-2)}
.on-dark .star-empty,.dark .star-empty{fill:rgba(251,247,239,.2)}

.score-block{display:flex; align-items:flex-end; gap:14px}
.score-block__n{
  font-family:var(--f-display); font-size:clamp(3.2rem,7vw,4.6rem); line-height:.86; letter-spacing:-.045em;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 120; margin:0;
}
.score-block__n span{font-size:.36em; color:var(--ink-3); letter-spacing:-.02em}

/* Histogramme de repartition */
.dist{display:grid; grid-template-columns:minmax(0,1fr); gap:9px}
.dist__row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; font-size:.83rem}
.dist__lbl{color:var(--ink-2); font-weight:600; display:inline-flex; align-items:center; gap:4px; width:36px}
.dist__bar{height:8px; background:var(--paper-3); border-radius:var(--r-pill); overflow:hidden}
.dist__fill{height:100%; background:var(--gold-2); border-radius:var(--r-pill); width:0; transition:width 1.1s cubic-bezier(.2,.8,.3,1)}
.dist__n{color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:52px; text-align:right; font-size:.8rem}
.dist__row:hover .dist__fill{background:var(--gold)}

/* ---------- 13. Avis ---------- */
.review{padding:26px 0; border-bottom:1px solid var(--line)}
.review__top{display:flex; align-items:flex-start; gap:14px; margin-bottom:6px; flex-wrap:wrap}
.avatar{
  width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-weight:700; font-size:.86rem; color:#3B2C08; background:var(--gold-3);
  border:1px solid rgba(176,128,31,.3); letter-spacing:-.02em;
}
.review__who{flex:1; min-width:150px}
.review__name{font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.review__meta{font-size:.78rem; color:var(--ink-3); margin-top:2px}
.review__date{font-size:.78rem; color:var(--ink-4); white-space:nowrap; font-variant-numeric:tabular-nums}
.review h4{margin:10px 0 6px; font-family:var(--f-display); font-weight:600; letter-spacing:-.02em; font-size:1.14rem}
.review__txt{color:var(--ink-2); font-size:.945rem; margin:0}
.review__prod{
  display:inline-flex; align-items:center; gap:7px; margin-top:13px; padding:5px 11px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:.755rem; color:var(--ink-2); font-weight:600;
}
.review__foot{display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap}
.review__act{
  display:inline-flex; align-items:center; gap:7px; font-size:.78rem; color:var(--ink-3);
  background:none; border:0; padding:0; cursor:pointer; transition:color .16s;
}
.review__act:hover{color:var(--gold)}
.review__act.is-on{color:var(--gold); font-weight:700}
.review__reply{
  margin-top:16px; padding:16px 18px; background:var(--paper-2);
  border-left:2px solid var(--forest-3); border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.review__reply-h{font-size:.78rem; font-weight:700; color:var(--forest); display:flex; align-items:center; gap:8px; margin-bottom:6px}
.review__reply p{font-size:.885rem; color:var(--ink-2); margin:0}

.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-pill);
  font-size:.685rem; font-weight:700; letter-spacing:.03em; white-space:nowrap;
}
.badge--verif{background:rgba(18,53,41,.08); color:var(--forest); border:1px solid rgba(18,53,41,.16)}
.badge--gold{background:var(--gold-wash); color:#7A5710; border:1px solid rgba(176,128,31,.24)}
.badge--clay{background:var(--clay-soft); color:var(--clay); border:1px solid rgba(158,58,34,.2)}
.badge--ghost{background:transparent; color:var(--ink-3); border:1px solid var(--line-2)}
.badge--dark{background:rgba(251,247,239,.1); color:var(--gold-3); border:1px solid var(--line-dark-2)}

/* ---------- 14. Formulaires ---------- */
.field{display:block; margin-bottom:20px}
.field__lbl{display:block; font-size:.815rem; font-weight:700; margin-bottom:7px; letter-spacing:-.005em}
.field__hint{display:block; font-size:.76rem; color:var(--ink-3); margin-top:6px}
.inp,.sel,.txt{
  width:100%; padding:13px 15px; background:var(--white); border:1px solid var(--line-2);
  border-radius:10px; font-size:.94rem; transition:border-color .16s, box-shadow .16s; font-family:inherit;
}
.inp:focus,.sel:focus,.txt:focus{outline:0; border-color:var(--gold); box-shadow:0 0 0 3.5px rgba(176,128,31,.14)}
.inp::placeholder,.txt::placeholder{color:var(--ink-4)}
.txt{min-height:150px; resize:vertical; line-height:1.6}
.sel{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237E7565' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:40px}
.field.is-error .inp,.field.is-error .sel,.field.is-error .txt{border-color:var(--clay); box-shadow:0 0 0 3.5px rgba(158,58,34,.1)}
.field__err{display:none; font-size:.76rem; color:var(--clay); margin-top:6px; font-weight:600}
.field.is-error .field__err{display:block}

.choice{
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--line-2);
  border-radius:12px; cursor:pointer; transition:border-color .16s, background .16s; background:var(--white);
}
.choice:hover{border-color:var(--ink-4)}
.choice input{margin:3px 0 0; accent-color:var(--gold); flex:none; width:17px; height:17px}
.choice__t{font-weight:700; font-size:.9rem; display:block}
.choice__d{font-size:.8rem; color:var(--ink-3); display:block; margin-top:2px}
.choice:has(input:checked){border-color:var(--gold); background:var(--gold-wash)}
.choice.is-error{border-color:var(--clay); background:var(--clay-soft); box-shadow:0 0 0 3.5px rgba(158,58,34,.1)}
.choice.is-error .choice__t{color:var(--clay)}

.steps-bar{display:flex; gap:8px; margin-bottom:38px; list-style:none; padding:0}
.steps-bar li{flex:1; padding-top:12px; border-top:2px solid var(--line-2); font-size:.72rem; font-weight:700; color:var(--ink-4); letter-spacing:.04em; text-transform:uppercase; transition:.3s}
.steps-bar li.is-done{border-top-color:var(--gold); color:var(--gold)}
.steps-bar li.is-current{border-top-color:var(--ink); color:var(--ink)}

/* ---------- 15. Accordeon ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 0; background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--f-display); font-size:clamp(1.05rem,1.7vw,1.28rem); font-weight:600;
  letter-spacing:-.02em; line-height:1.3; transition:color .16s; color:var(--ink);
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 40;
}
.acc__btn:hover{color:var(--gold)}
.acc__ico{width:26px; height:26px; flex:none; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; position:relative; transition:.25s}
.acc__ico::before,.acc__ico::after{content:""; position:absolute; background:var(--ink); border-radius:2px; transition:.25s}
.acc__ico::before{width:11px; height:1.6px}
.acc__ico::after{width:1.6px; height:11px}
.acc__btn[aria-expanded="true"] .acc__ico{background:var(--gold); border-color:var(--gold)}
.acc__btn[aria-expanded="true"] .acc__ico::after{transform:rotate(90deg); opacity:0}
.acc__btn[aria-expanded="true"] .acc__ico::before{background:#1B1403}
.acc__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.2,.7,.3,1)}
.acc__panel>div{overflow:hidden}
.acc__btn[aria-expanded="true"]+.acc__panel{grid-template-rows:1fr}
.acc__panel p,.acc__panel ul{color:var(--ink-2); font-size:.95rem; max-width:76ch}
.acc__panel>div>*:last-child{padding-bottom:24px}
.dark .acc,.dark .acc__item{border-color:var(--line-dark)}
.dark .acc__btn{color:var(--paper)}
.dark .acc__ico{border-color:var(--line-dark-2)}
.dark .acc__ico::before,.dark .acc__ico::after{background:var(--paper)}
.dark .acc__panel p{color:rgba(251,247,239,.72)}

/* ---------- 16. Sections sombres ---------- */
.dark{background:var(--forest); color:var(--paper-2)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--paper)}
.dark p{color:rgba(251,247,239,.74)}
.dark .lead{color:rgba(251,247,239,.8)}
.dark .rule{background:var(--line-dark)}
.dark .muted{color:rgba(251,247,239,.55)}
.dark .card{background:rgba(251,247,239,.045); border-color:var(--line-dark)}
.dark .card h3,.dark .card h4{color:var(--paper)}
.dark .card p{color:rgba(251,247,239,.72)}
.ink-sec{background:var(--ink); color:var(--paper-2)}
.ink-sec h2,.ink-sec h3{color:var(--paper)}
.ink-sec p{color:rgba(251,247,239,.72)}

/* ---------- 17. Divers ---------- */
.tag-row{display:flex; flex-wrap:wrap; gap:9px}
.chip{
  padding:7px 14px; border:1px solid var(--line-2); border-radius:var(--r-pill);
  font-size:.815rem; font-weight:600; background:var(--white); cursor:pointer;
  transition:.16s; color:var(--ink-2);
}
.chip:hover{border-color:var(--ink-4)}
.chip.is-on{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.note{
  padding:18px 20px; border-radius:var(--r); border:1px solid var(--line); background:var(--paper-2);
  font-size:.885rem; color:var(--ink-2); display:flex; gap:13px; align-items:flex-start;
}
.note--gold{background:var(--gold-wash); border-color:rgba(176,128,31,.24)}
.note--clay{background:var(--clay-soft); border-color:rgba(158,58,34,.2)}
.note strong{color:var(--ink)}
.note svg{flex:none; margin-top:2px; color:var(--gold)}
.note p{margin-bottom:.6em}

/* minmax(0,1fr) : sans cela, la colonne d'une grille à une colonne est dimensionnée
   par le contenu le plus large et déborde sur les petits écrans. */
.list-check{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:minmax(0,1fr); gap:13px}
.list-check li{display:flex; gap:12px; align-items:flex-start; font-size:.945rem; color:var(--ink-2); min-width:0}
.list-check li::before{
  content:""; width:19px; height:19px; border-radius:50%; flex:none; margin-top:3px;
  background:var(--gold-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.4l2.9 2.9L10 1.2' stroke='%23B0801F' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px 9px no-repeat;
  border:1px solid rgba(176,128,31,.25);
}
.list-cross li::before{
  background:var(--clay-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M1.2 1.2l6.6 6.6M7.8 1.2L1.2 7.8' stroke='%239E3A22' stroke-width='1.9' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/9px 9px no-repeat;
  border-color:rgba(158,58,34,.25);
}
.dark .list-check li{color:rgba(251,247,239,.78)}
.dark .list-check li::before{background-color:rgba(217,168,60,.14); border-color:rgba(217,168,60,.3)}

.tbl{width:100%; border-collapse:collapse; font-size:.9rem}
.tbl th{
  text-align:left; padding:14px 16px; font-size:.71rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); border-bottom:1px solid var(--line-2); font-weight:700; white-space:nowrap;
}
.tbl td{padding:16px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td strong{color:var(--ink)}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--white)}

pre.code{
  background:var(--forest-2); color:#D8E8DF; padding:20px 22px; border-radius:var(--r);
  overflow-x:auto; font-family:var(--f-mono); font-size:.8rem; line-height:1.8; margin:0;
  border:1px solid rgba(251,247,239,.1);
}
pre.code .t{color:#8FBFA8}
pre.code .a{color:var(--gold-2)}
pre.code .s{color:#F0D392}
pre.code .c{color:#6E8C80; font-style:italic}

.copybar{display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; padding:11px 14px 11px 18px;
  background:var(--forest); border:1px solid rgba(251,247,239,.12); border-bottom:0; border-radius:var(--r) var(--r) 0 0}
.copybar span{font-family:var(--f-mono); font-size:.72rem; color:var(--mint); letter-spacing:.05em}
.copybar+pre.code{border-radius:0 0 var(--r) var(--r)}

/* ---------- 18. Apparition au defilement ---------- */
.rv{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.is-in{opacity:1; transform:none}
.rv-d1{transition-delay:.07s} .rv-d2{transition-delay:.14s} .rv-d3{transition-delay:.21s} .rv-d4{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

/* ---------- 19. Fil d'Ariane & entetes de page ---------- */
.crumbs{display:flex; align-items:center; gap:9px; font-size:.78rem; color:var(--ink-3); padding:22px 0; flex-wrap:wrap}
.crumbs a:hover{color:var(--gold)}
.crumbs span{color:var(--ink-4)}
.phead{padding:clamp(30px,4vw,54px) 0 clamp(44px,5.5vw,72px); border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.phead h1{max-width:18ch; margin-bottom:20px}
.phead .lead{max-width:58ch}
.phead--dark{background:var(--forest); color:var(--paper-2); border-bottom:0}
.phead--dark .lead{color:rgba(251,247,239,.78)}
.phead--dark .crumbs{color:rgba(251,247,239,.55)}
.phead--dark .crumbs span{color:rgba(251,247,239,.4)}

/* ---------- 20. Reactif ---------- */
@media (max-width:1180px){
  .nav a{padding:9px 10px; font-size:.84rem}
  .hdr__cta{margin-left:10px}
}
@media (max-width:1140px){
  /* Sous cette largeur, seule l'action principale reste dans l'en-tête :
     la barre complète ne tient plus et débordait horizontalement. */
  .hdr__cta .btn--ghost{display:none}
}
@media (max-width:1120px){
  .ftr__grid{grid-template-columns:1.4fr 1fr 1fr; row-gap:38px}
}
@media (max-width:1023px){
  .nav,.hdr__cta{display:none}
  .burger{display:block}
}
@media (max-width:960px){
  .split{grid-template-columns:1fr; gap:40px}
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap,.wrap-n{padding-inline:20px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr 1fr; gap:30px}
  .ftr__legal{margin-left:0}
  .card,.card--roomy{padding:22px}
  .btn{white-space:normal}
  .steps-bar li{font-size:.58rem; letter-spacing:0}
}

/* ---------- 21. Impression ---------- */
@media print{
  body::before,.hdr,.ftr,.mobmenu,#AVISCHECK-widget{display:none!important}
  .section{padding:20px 0}
}