/* ==========================================================================
   AVISCHECK — Page d'accueil
   Parti pris : une ouverture cinématographique sombre, un sceau qui tourne,
   du texte qui s'encre au défilement, et une démonstration vivante du widget.
   Les états finaux sont les états par défaut : sans la classe .anim posée par
   le script, tout s'affiche normalement, sans animation.
   ========================================================================== */

/* ---------- 1. En-tête posé sur le hero ---------- */
.hdr--over{background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none}
.hdr--over:not(.is-stuck){border-bottom-color:transparent}
.hdr--over:not(.is-stuck) .brand__name{color:var(--paper)}
.hdr--over:not(.is-stuck) .brand__name em{color:var(--gold-2)}
.hdr--over:not(.is-stuck) .brand__tld{color:rgba(251,247,239,.45)}
.hdr--over:not(.is-stuck) .nav a{color:rgba(251,247,239,.76)}
.hdr--over:not(.is-stuck) .nav a:hover{color:var(--paper); background:rgba(251,247,239,.1)}
.hdr--over:not(.is-stuck) .btn--ghost{color:var(--paper); border-color:rgba(251,247,239,.3)}
.hdr--over:not(.is-stuck) .btn--ghost:hover{border-color:var(--paper); background:rgba(251,247,239,.1)}
.hdr--over:not(.is-stuck) .btn--gold{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.hdr--over:not(.is-stuck) .btn--gold:hover{background:var(--gold-2); border-color:var(--gold-2); color:#1B1403}
.hdr--over:not(.is-stuck) .burger{border-color:rgba(251,247,239,.3)}
.hdr--over:not(.is-stuck) .burger span{background:var(--paper)}
.hdr--over:not(.is-stuck) .brand__mark{color:var(--paper)}
.hdr--over:not(.is-stuck) .bm-bar{fill:#D9A83C}
.hdr--over:not(.is-stuck) .brand__tld{color:rgba(251,247,239,.5)}
.hdr--over.is-stuck{background:rgba(251,247,239,.95); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px)}

/* ---------- 2. Ouverture ---------- */
.open{
  position:relative; min-height:clamp(600px,94svh,940px); display:flex; align-items:center;
  margin-top:-74px; padding:120px 0 0; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(217,168,60,.28), transparent 56%),
    radial-gradient(90% 70% at 8% 92%, rgba(43,90,72,.55), transparent 60%),
    linear-gradient(168deg, #0E2B22 0%, #0A211A 45%, #100E09 100%);
  color:var(--paper);
}
/* halo lent, indépendant du pointeur */
.open__glow{
  position:absolute; inset:-25%; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side, rgba(217,168,60,.20), transparent 70%);
  transform:translate3d(var(--gx,20%),var(--gy,-10%),0);
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.anim .open__glow{animation:glow-drift 22s ease-in-out infinite alternate}
@keyframes glow-drift{
  from{transform:translate3d(14%,-14%,0) scale(1)}
  to{transform:translate3d(26%,-4%,0) scale(1.12)}
}
/* fines rainures verticales, texture maison */
.open__rules{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(90deg,rgba(251,247,239,.055) 0 1px,transparent 1px 132px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.open__in{position:relative; z-index:2; width:100%; display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(30px,5vw,70px); align-items:center; padding-block:clamp(30px,5vw,60px)}

.open__pill{
  display:inline-flex; align-items:center; gap:10px; padding:7px 8px 7px 16px;
  border:1px solid rgba(251,247,239,.22); border-radius:var(--r-pill);
  font-size:.735rem; letter-spacing:.02em; color:rgba(251,247,239,.82); margin-bottom:30px;
  background:rgba(251,247,239,.05); backdrop-filter:blur(6px);
}
.open__pill b{
  background:var(--gold-2); color:#1B1403; font-size:.62rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; padding:4px 9px; border-radius:var(--r-pill);
}

/* titre : révélation ligne par ligne */
.open h1{
  font-size:clamp(3.1rem,8.4vw,6.6rem); line-height:.94; letter-spacing:-.045em;
  color:var(--paper); margin:0 0 28px; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;
}
.ln{display:block; overflow:hidden; padding-bottom:.06em}
.ln > i{display:block; font-style:normal}
.anim .ln > i{transform:translateY(105%); opacity:0; transition:transform 1s cubic-bezier(.16,.84,.28,1), opacity .8s ease}
.anim .open.is-live .ln > i{transform:none; opacity:1}
.anim .open.is-live .ln:nth-child(2) > i{transition-delay:.11s}
.anim .open.is-live .ln:nth-child(3) > i{transition-delay:.22s}
.open h1 em{
  font-style:italic; font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
  background:linear-gradient(96deg,#F0D392 0%,#D9A83C 42%,#F6E4B6 72%,#C08A2E 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% 100%;
}
.anim .open h1 em{animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.open__sub{
  font-size:clamp(1rem,1.35vw,1.19rem); line-height:1.62; color:rgba(251,247,239,.74);
  max-width:50ch; margin:0 0 34px;
}
.open__cta{display:flex; flex-wrap:wrap; gap:13px; align-items:center}
.anim .open__fade{opacity:0; transform:translateY(16px); transition:opacity .8s ease .42s, transform .8s cubic-bezier(.16,.84,.28,1) .42s}
.anim .open.is-live .open__fade{opacity:1; transform:none}
.open__fade--2{transition-delay:.54s!important}

/* bouton principal avec balayage doré */
.btn--sheen{position:relative; overflow:hidden; isolation:isolate}
.btn--sheen::after{
  content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
}
.anim .btn--sheen:hover::after{transition:transform .8s cubic-bezier(.3,.7,.3,1); transform:translateX(120%)}

/* ---------- 3. Le sceau ---------- */
.openseal{position:relative; display:grid; place-items:center; aspect-ratio:1; width:100%; max-width:430px; margin-inline:auto}
.openseal__svg{width:100%; height:auto; overflow:visible}
.openseal__ring{transform-origin:100px 100px}
.anim .openseal__ring{animation:seal-spin 34s linear infinite}
.openseal__txt{
  font-family:var(--f-text); font-size:8.4px; font-weight:700; letter-spacing:2.6px;
  fill:rgba(240,211,146,.85); text-transform:uppercase;
}
.openseal__halo{
  position:absolute; inset:12%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(217,168,60,.24),transparent 72%);
}
.anim .openseal__halo{animation:pulse 6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55; transform:scale(.96)}50%{opacity:1; transform:scale(1.06)}}

/* fiche de preuve posée sur le sceau */
.openproof{
  position:absolute; right:-6%; bottom:2%; width:min(280px,80%);
  background:rgba(18,45,36,.72); backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(251,247,239,.18); border-radius:18px; padding:18px 20px;
  box-shadow:0 34px 70px -34px rgba(0,0,0,.85);
}
.anim .openproof{opacity:0; transform:translateY(24px) scale(.96); transition:.9s cubic-bezier(.16,.84,.28,1) .66s}
.anim .open.is-live .openproof{opacity:1; transform:none}
.openproof__h{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.openproof__lg{width:32px; height:32px; border-radius:9px; background:var(--paper); color:var(--forest);
  display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:.95rem; flex:none}
.openproof__n{font-size:.86rem; font-weight:800; color:var(--paper); display:block; line-height:1.2}
.openproof__u{font-size:.7rem; color:rgba(251,247,239,.55)}
.openproof__s{display:flex; align-items:flex-end; gap:11px; margin-bottom:14px}
.openproof__v{font-family:var(--f-display); font-size:2.5rem; line-height:.85; color:var(--paper);
  letter-spacing:-.045em; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 72}
.openproof__v span{font-size:.32em; color:rgba(251,247,239,.5)}
.openproof__c{font-size:.7rem; color:rgba(251,247,239,.6); display:block; margin-top:5px}
.openproof__bars{display:grid; gap:5px}
.opb{display:grid; grid-template-columns:26px 1fr; align-items:center; gap:8px;
  font-size:.65rem; color:rgba(251,247,239,.55)}
.opb__t{display:block; height:4px; background:rgba(251,247,239,.14); border-radius:4px; overflow:hidden}
.opb__f{display:block; height:100%; background:var(--gold-2); border-radius:4px; width:var(--w)}
.anim .opb__f{width:0; transition:width 1.1s cubic-bezier(.2,.8,.3,1)}
.anim .open.is-live .opb__f{width:var(--w)}
.anim .open.is-live .opb:nth-child(2) .opb__f{transition-delay:.08s}
.anim .open.is-live .opb:nth-child(3) .opb__f{transition-delay:.16s}
.anim .open.is-live .opb:nth-child(4) .opb__f{transition-delay:.24s}
.anim .open.is-live .opb:nth-child(5) .opb__f{transition-delay:.32s}

/* ---------- 4. Bandeau bas du hero ---------- */
.openfoot{
  position:relative; z-index:2; border-top:1px solid rgba(251,247,239,.14);
  display:flex; align-items:center; gap:24px; padding:18px 0; flex-wrap:wrap;
}
.openfoot__lbl{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(251,247,239,.4); flex:none}
.rota{position:relative; height:1.5em; overflow:hidden; flex:1; min-width:220px}
.rota__i{
  position:absolute; inset:0; display:flex; align-items:center; gap:10px;
  font-size:.88rem; color:rgba(251,247,239,.8);
  opacity:0; transform:translateY(100%); transition:opacity .5s, transform .5s cubic-bezier(.16,.84,.28,1);
}
.rota__i.is-on{opacity:1; transform:none}
.rota__i.is-out{opacity:0; transform:translateY(-100%)}
.rota__i::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold-2); flex:none}
.openfoot__cue{display:inline-flex; align-items:center; gap:9px; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(251,247,239,.45); flex:none}
.anim .openfoot__cue svg{animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- 5. Bande de chiffres ---------- */
.figs{border-bottom:1px solid var(--line); background:var(--paper)}
.figs__row{display:grid; grid-template-columns:repeat(4,1fr)}
.fig{padding:clamp(34px,4.4vw,58px) clamp(16px,2vw,30px); border-left:1px solid var(--line); position:relative}
.fig:first-child{border-left:0}
.fig__v{
  font-family:var(--f-display); font-size:clamp(2.5rem,5.4vw,4.1rem); line-height:.9;
  letter-spacing:-.05em; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144; display:block;
  font-variant-numeric:tabular-nums;
}
.fig__v sup{font-size:.34em; color:var(--gold); top:-1.4em; position:relative; letter-spacing:0}
.fig__l{display:block; margin-top:14px; font-size:.83rem; color:var(--ink-3); line-height:1.45; max-width:26ch}
.fig::after{content:""; position:absolute; left:clamp(16px,2vw,30px); bottom:0; height:2px; width:0; background:var(--gold)}
.anim .fig.is-in::after{width:38px; transition:width .7s cubic-bezier(.2,.8,.3,1) .3s}

/* ---------- 6. Section épinglée : le parcours ---------- */
.pinned{padding:clamp(70px,9vw,130px) 0; background:var(--paper)}
.pinned__in{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(34px,6vw,90px); align-items:start}
.pinned__side{position:sticky; top:120px}
.pinned__side h2{font-size:clamp(1.9rem,3.6vw,2.9rem); margin-bottom:18px}
.pinned__meter{display:flex; align-items:center; gap:14px; margin-top:34px}
.meter{height:3px; flex:1; background:var(--paper-3); border-radius:3px; overflow:hidden}
.meter__f{height:100%; width:25%; background:var(--gold); border-radius:3px; transition:width .5s cubic-bezier(.2,.8,.3,1)}
.pinned__no{font-family:var(--f-display); font-size:1.35rem; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 40}
.pinned__no b{color:var(--gold)}

.stp{
  padding:clamp(30px,3.4vw,44px) 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:64px 1fr; gap:clamp(18px,2.4vw,32px); align-items:start;
  transition:opacity .5s ease;
}
.stp:last-child{border-bottom:1px solid var(--line)}
.anim .stp{opacity:.34}
.anim .stp.is-on{opacity:1}
.stp__n{
  font-family:var(--f-display); font-size:2.1rem; line-height:1; color:var(--ink-4);
  letter-spacing:-.04em; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 60; transition:color .4s;
}
.stp.is-on .stp__n{color:var(--gold)}
.stp h3{font-size:clamp(1.25rem,2.1vw,1.6rem); margin-bottom:10px}
.stp p{color:var(--ink-2); font-size:.955rem; margin:0; max-width:56ch}
.stp__t{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px; padding:4px 11px;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; color:var(--ink-3);
}
.stp.is-on .stp__t{border-color:var(--gold); color:var(--gold)}

/* ---------- 7. Déclaration qui s'encre ---------- */
.creed{padding:clamp(80px,10vw,150px) 0; background:var(--paper-2); border-block:1px solid var(--line)}
.creed__t{
  font-family:var(--f-display); font-size:clamp(1.7rem,4.1vw,3.25rem); line-height:1.16;
  letter-spacing:-.032em; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 96;
  max-width:20ch; margin:0 0 46px;
}
.creed__t w{display:inline-block; transition:color .35s ease, opacity .35s ease}
.anim .creed__t w{color:rgba(20,18,13,.16)}
.anim .creed__t w.is-lit{color:var(--ink)}
.creed__t em{font-style:italic; color:var(--gold)}
.anim .creed__t em w.is-lit{color:var(--gold)}
.creed__cols{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.creed__c{background:var(--paper); padding:clamp(24px,3vw,36px)}
.creed__c:last-child{background:var(--white)}
.creed__c h3{font-size:1.2rem; margin-bottom:20px; display:flex; align-items:center; gap:10px}

/* ---------- 8. Démonstration du widget ---------- */
.live{padding:clamp(70px,9vw,130px) 0; background:var(--ink); color:var(--paper-2); position:relative; overflow:hidden}
.live::before{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 60% at 82% 20%,rgba(217,168,60,.18),transparent 60%); pointer-events:none}
.live__in{position:relative; z-index:1; display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(34px,5vw,72px); align-items:center}
.live h2{color:var(--paper); font-size:clamp(1.9rem,3.6vw,2.9rem)}
.frame{
  border-radius:16px; overflow:hidden; background:var(--paper);
  border:1px solid rgba(251,247,239,.18); box-shadow:0 50px 90px -50px rgba(0,0,0,.9);
}
.frame__bar{display:flex; align-items:center; gap:8px; padding:11px 15px;
  background:#EFE8DA; border-bottom:1px solid var(--line)}
.frame__d{width:9px; height:9px; border-radius:50%; background:rgba(20,18,13,.18)}
.frame__u{flex:1; margin-left:8px; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:4px 13px; font-family:var(--f-mono); font-size:.7rem; color:var(--ink-3)}
.frame__body{position:relative; height:370px; padding:26px; overflow:hidden; background:var(--paper)}
.ghost{opacity:.55}
.ghost i{display:block; height:10px; border-radius:5px; background:var(--paper-3); margin-bottom:10px}
.ghost b{display:block; height:104px; border-radius:12px; background:var(--paper-3); margin:16px 0}
.live__hint{display:flex; align-items:center; gap:10px; margin-top:18px; font-size:.8rem; color:rgba(251,247,239,.55)}

/* ---------- 9. Deux publics : panneaux extensibles ---------- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.duo__p{
  position:relative; overflow:hidden; border-radius:var(--r-lg); padding:clamp(28px,3.4vw,44px);
  border:1px solid var(--line); background:var(--white); display:flex; flex-direction:column;
  min-height:400px; transition:border-color .35s, transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s;
}
.duo__p::before{
  content:""; position:absolute; inset:auto -30% -60% -30%; height:70%;
  background:radial-gradient(closest-side,rgba(217,168,60,.22),transparent 72%);
  opacity:0; transition:opacity .45s;
}
.duo__p:hover{border-color:var(--gold); transform:translateY(-6px); box-shadow:var(--sh-2)}
.duo__p:hover::before{opacity:1}
.duo__p > *{position:relative; z-index:1}
.duo__k{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; color:var(--gold); text-transform:uppercase}
.duo__p h3{font-size:clamp(1.35rem,2.3vw,1.85rem); margin:14px 0 12px; max-width:15ch}
.duo__p .btn{margin-top:auto; align-self:flex-start}
.duo__p ul{margin:22px 0 28px}

/* ---------- 10. Textes de loi ---------- */
.laws{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.lawx{
  border:1px solid var(--line); border-radius:var(--r); padding:26px; background:var(--white);
  border-top:2px solid var(--forest-3); transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
}
.lawx:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.lawx__r{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.09em; color:var(--forest-3);
  text-transform:uppercase; display:block; margin-bottom:12px}
.lawx h4{font-size:1.04rem; margin-bottom:9px}
.lawx p{font-size:.9rem; color:var(--ink-2); margin:0}

/* ---------- 11. Citations défilantes ---------- */
.quotes{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,1fr); gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:thin}
.quotes::-webkit-scrollbar{height:6px}
.quotes::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:6px}
.qt{scroll-snap-align:start; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:28px; display:flex; flex-direction:column; min-width:0}
.qt blockquote{font-family:var(--f-display); font-size:1.14rem; line-height:1.42; letter-spacing:-.02em;
  margin:16px 0 20px; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 40}
.qt figcaption{margin-top:auto; font-size:.82rem; color:var(--ink-3)}

/* ---------- 12. Clôture ---------- */
.close-x{
  position:relative; overflow:hidden; text-align:center; color:var(--paper);
  padding:clamp(80px,11vw,150px) 0;
  background:
    radial-gradient(80% 70% at 50% 120%, rgba(217,168,60,.34), transparent 58%),
    linear-gradient(180deg,#0E2B22,#100E09);
}
.close-x__seal{width:78px; margin:0 auto 30px; opacity:.9}
.anim .close-x__seal .openseal__ring{animation:seal-spin 30s linear infinite}
.close-x h2{color:var(--paper); font-size:clamp(2.1rem,5vw,3.6rem); max-width:16ch; margin:0 auto 20px}
.close-x p{color:rgba(251,247,239,.7); max-width:52ch; margin:0 auto 34px}
.close-x__cta{display:flex; gap:13px; justify-content:center; flex-wrap:wrap}

/* ---------- 13. Réactif ---------- */
@media (max-width:1023px){
  .open{margin-top:-74px}
}
@media (max-width:960px){
  .open__in{grid-template-columns:1fr; gap:48px}
  .openseal{max-width:330px}
  .openproof{right:-4%; width:min(260px,86%)}
  .pinned__in{grid-template-columns:1fr; gap:34px}
  .pinned__side{position:static}
  .anim .stp{opacity:1}
  .live__in{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .duo__p{min-height:0}
  .laws{grid-template-columns:1fr}
  .figs__row{grid-template-columns:1fr 1fr}
  .fig:nth-child(3){border-left:0}
  .fig:nth-child(n+3){border-top:1px solid var(--line)}
  .creed__cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .open{min-height:0; padding:110px 0 0}
  .open h1{font-size:clamp(2.7rem,12vw,3.6rem)}
  .figs__row{grid-template-columns:1fr}
  .fig{border-left:0; border-top:1px solid var(--line)}
  .fig:first-child{border-top:0}
  .openseal{max-width:250px}
  .openproof{position:static; width:100%; margin-top:22px}
  .stp{grid-template-columns:1fr; gap:12px}
  .frame__body{height:320px; padding:18px}
  .openfoot{gap:14px}
  .openfoot__cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .anim .ln > i,.anim .open__fade,.anim .openproof{opacity:1!important; transform:none!important}
  .anim .stp{opacity:1}
  .anim .opb__f{width:var(--w)}
  .anim .creed__t w{color:var(--ink)}
}