/*
  ============================================================
  MERITLY - LE LANGAGE DU SITE
  La feuille commune des pages publiques : le vocabulaire de la page
  d'accueil (index.html), extrait pour que chaque page se lise comme
  elle. Une page presque noire, un plan par section, un mot par idee,
  et la lumiere qui se deplace.
  Typo : Funnel Display (titres) + Funnel Sans (texte).
  Source Serif 4 sur le mot-marque, nulle part ailleurs.
  L'accueil garde ses styles en ligne (elle se charge sans requete
  supplementaire) : une retouche du vocabulaire se fait aux deux endroits.
  Ce fichier est la source ; docs/outils-site.py le hache dans assets/.
  ============================================================
*/
:root{
  --nuit:#0b0b0d;--nuit-2:#111114;--nuit-3:#17171b;--nuit-4:#202026;
  --ligne:rgba(255,255,255,.09);--ligne-2:rgba(255,255,255,.16);
  --blanc:#f4f1eb;--gris:#a9a59e;--gris-2:#8f8a83;
  --rouge:#e5202a;--rouge-2:#ff3b44;
  --vert:#7fd3a3;--ambre:#f0b45a;
  --papier:#faf8f4;--papier-2:#fff;--encre:#1f1b16;--encre-2:#5c554d;--encre-3:#6b645b;--ligne-j:#e6e1d8;--ligne-j2:#d3cdc2;
  --display:"Funnel Display",system-ui,sans-serif;
  --sans:"Funnel Sans",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--nuit)}
body{background:var(--nuit);color:var(--blanc);font-family:var(--sans);font-size:17px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--rouge);color:#fff}
.wrap{width:min(var(--wrap),100% - 40px);margin:0 auto}
.wrap.etroit{width:min(860px,100% - 40px)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.98;text-wrap:balance}
.em{color:var(--rouge)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px;border-radius:4px}

/* --- Les mouvements. Un vocabulaire court, reutilise partout. --- */
@keyframes m-monte{0%{opacity:0;transform:translate3d(0,42px,0) scale(.98)}100%{opacity:1;transform:none}}
@keyframes m-fondu{0%{opacity:0;transform:translate3d(0,14px,0)}100%{opacity:1;transform:none}}
@keyframes m-mot{0%{opacity:0;transform:translate3d(0,110%,0)}100%{opacity:1;transform:none}}
@keyframes m-curseur{0%,45%,100%{opacity:1}55%,90%{opacity:0}}
@keyframes m-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.rv{opacity:0}
.rv.in{animation:m-monte .9s var(--ease) both}
.rv.in.d1{animation-delay:.10s}.rv.in.d2{animation-delay:.20s}.rv.in.d3{animation-delay:.30s}.rv.in.d4{animation-delay:.40s}.rv.in.d5{animation-delay:.50s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1}.rv.in{animation:none}
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
}

/* --- Nav --- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding:14px 0;transition:background .3s ease,border-color .3s ease}
.nav.pose{background:rgba(11,11,13,.94);border-bottom:1px solid var(--ligne)}
body.jour-actif .nav.pose{background:rgba(250,248,244,.96);border-bottom-color:var(--ligne-j)}
/* Sur la partie jour, la nav passe a l'encre meme en haut de page (une page peut s'ouvrir sur le papier). */
body.jour-actif .nav{color:var(--encre)}
body.jour-actif .nav .nav-liens,body.jour-actif .nav .lien-doux{color:var(--encre-2)}
.nav-in{display:flex;align-items:center;gap:22px}
.marque{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.025em}
.marque svg{width:26px;height:26px;flex:none}
.nav-liens{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--gris)}
.nav-liens a:hover,.nav-liens a[aria-current]{color:inherit}
body.jour-actif .nav.pose .nav-liens{color:var(--encre-2)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-liens + .nav-cta{margin-left:0}
.nav-cta:only-child,.marque + .nav-cta{margin-left:auto}
.pilule{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px 0 6px;border-radius:999px;background:var(--rouge);color:#fff;font-weight:600;font-size:14.5px;letter-spacing:-.01em;transition:transform .2s var(--ease),background .2s ease}
.pilule i{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--rouge);display:inline-flex;align-items:center;justify-content:center;flex:none}
.pilule i svg{width:14px;height:14px}
.pilule:hover{transform:translateY(-2px);background:var(--rouge-2)}
.pilule .court{display:none}
@media (max-width:900px){.pilule .long{display:none}.pilule .court{display:inline}.pilule{height:40px;padding-right:14px}}
.lien-doux{font-size:14.5px;font-weight:500;color:var(--gris)}
.lien-doux:hover{color:inherit}
body.jour-actif .nav.pose .lien-doux{color:var(--encre-2)}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--ligne-2);align-items:center;justify-content:center}
.burger span{display:block;width:16px;height:1.6px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.6px;background:currentColor;transition:transform .25s var(--ease)}
.burger span::before{top:-5px}.burger span::after{top:5px}
.nav.ouvert .burger span{background:transparent}
.nav.ouvert .burger span::before{transform:translateY(5px) rotate(45deg)}
.nav.ouvert .burger span::after{transform:translateY(-5px) rotate(-45deg)}
.menu{display:none}
@media (max-width:900px){
  .nav-liens,.lien-doux{display:none}
  .burger{display:inline-flex}
  .nav.ouvert{background:var(--nuit);border-bottom:1px solid var(--ligne)}
  .menu{display:none;padding:18px 0 8px}
  .nav.ouvert .menu{display:grid;gap:4px}
  .menu a{display:block;padding:12px 4px;font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.03em;border-top:1px solid var(--ligne)}
  .menu a:first-child{border-top:0}
}

/* --- Hero : le titre monte ligne par ligne, le reste suit en fondu. --- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 60px;position:relative;overflow:hidden}
.hero.court{min-height:0;padding:150px 0 30px}
.hero.film{justify-content:flex-end;padding-bottom:0}
.hero-fond{position:absolute;inset:-10% -10% auto -10%;height:70%;background:
  radial-gradient(60% 55% at 50% 30%,rgba(229,32,42,.20),transparent 72%),
  radial-gradient(40% 40% at 30% 60%,rgba(229,32,42,.07),transparent 72%);
  pointer-events:none}
.hero-in{position:relative;text-align:center}
.hero .fil{display:flex;justify-content:center;gap:8px;align-items:center;font-size:13px;color:var(--gris-2);margin-bottom:26px;animation:m-fondu .8s var(--ease) both}
.hero .fil a:hover{color:var(--blanc)}
.hero .fil i{font-style:normal;color:var(--gris-2)}
.hero .fil b{font-weight:500;color:var(--gris)}
.hero .sur{animation:m-fondu .8s var(--ease) both}
.hero h1{font-size:clamp(46px,8.6vw,112px);font-weight:800;letter-spacing:-.045em;line-height:.94}
.hero h1 .l{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .06em}
.hero h1 .l > span{display:inline-block;animation:m-mot 1s var(--ease) both}
.hero h1 .l:nth-child(2) > span{animation-delay:.14s}
.hero h1 .l:nth-child(3) > span{animation-delay:.28s}
.hero h1 .l:nth-child(4) > span{animation-delay:.42s}
.hero .sous{max-width:56ch;margin:26px auto 0;font-size:clamp(16px,1.6vw,20px);color:var(--gris);line-height:1.5;animation:m-fondu 1s var(--ease) .5s both}
.hero .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;animation:m-fondu 1s var(--ease) .65s both}
.hero .sous-note{margin-top:14px;font-size:13.5px;color:var(--gris-2);animation:m-fondu 1s var(--ease) .8s both}
.hero .meri-slot{width:76px;height:76px;margin:0 auto 18px;display:flex;align-items:flex-end;justify-content:center;animation:m-fondu 1s var(--ease) .3s both}
.hero .meri-slot .owl-svg{width:76px;height:auto}
.hero-repere{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:12.5px;color:var(--gris-2);animation:m-pulse 2.4s ease-in-out infinite}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;letter-spacing:-.01em;transition:transform .2s var(--ease),background .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn-rouge{background:var(--rouge);color:#fff}.btn-rouge:hover{background:var(--rouge-2)}
.btn-blanc{background:var(--blanc);color:var(--nuit)}
.btn-fant{border:1px solid var(--ligne-2);color:var(--blanc)}.btn-fant:hover{border-color:var(--gris)}
.btn-encre{background:var(--encre);color:#fff}
.btn-ligne{border:1px solid var(--ligne-j2);color:var(--encre)}.btn-ligne:hover{border-color:var(--encre)}

/* --- Sections sombres --- */
.sec{padding:clamp(90px,12vw,160px) 0;position:relative}
.sec.serre{padding-top:0}
.sec-tete{max-width:760px;margin:0 auto 54px;text-align:center}
.sec-tete.gauche{margin-left:0;text-align:left}
.sur{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--rouge);margin-bottom:18px}
.sec h2{font-size:clamp(36px,5.6vw,68px)}
.sec .lead{margin-top:20px;color:var(--gris);font-size:clamp(16px,1.5vw,19px);line-height:1.5;max-width:58ch;margin-left:auto;margin-right:auto}
.sec-tete.gauche .lead{margin-left:0}
.filet{height:1px;background:var(--ligne);margin:0 auto}

/* Le manifeste : chaque mot s'allume quand le regard arrive dessus. */
.manifeste{max-width:960px;margin:0 auto;font-family:var(--display);font-weight:700;font-size:clamp(26px,4.2vw,50px);line-height:1.18;letter-spacing:-.03em;text-align:center}
.manifeste .mot{display:inline-block;opacity:.09;transition:opacity .35s ease;margin-right:.24em}
.manifeste .mot.lit{opacity:1}
.manifeste .mot.rouge.lit{color:var(--rouge)}
.manifeste .ligne{display:block;height:.5em}
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:960px;margin:70px auto 0;border-top:1px solid var(--ligne);padding-top:28px}
.chiffres.trois{grid-template-columns:repeat(3,1fr)}
.chiffres div b{display:block;font-family:var(--display);font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1}
.chiffres div span{display:block;margin-top:8px;font-size:13.5px;color:var(--gris)}
@media (max-width:760px){.chiffres,.chiffres.trois{grid-template-columns:1fr 1fr;gap:26px 18px}}

/* Le geant : l'ecran noir se vide, il ne reste qu'une phrase. */
.geant{padding:clamp(120px,18vw,240px) 0 clamp(60px,8vw,120px);text-align:center;overflow:hidden}
.geant h2{font-size:clamp(56px,13vw,180px);font-weight:800;letter-spacing:-.05em;line-height:.9}
.geant h2 .mot{display:inline-block;opacity:.09;transition:opacity .4s ease;margin-right:.22em}
.geant h2 .mot:last-child{margin-right:0}
.geant h2 .mot.lit{opacity:1}
.geant h2 .mot.rouge.lit{color:var(--rouge)}
.geant .vers{display:block;margin-top:34px;font-size:15px;color:var(--gris-2)}

/* La liste a filet rouge, et le dossier. */
.liste{margin-top:28px;display:grid;gap:14px}
.liste div{padding-left:18px;border-left:2px solid var(--rouge)}
.liste b{display:block;font-weight:600}
.liste span{display:block;font-size:14.5px;color:var(--gris);margin-top:2px}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.deux h2{font-size:clamp(34px,4.6vw,58px)}
.deux .lead{margin:18px 0 0;color:var(--gris)}
@media (max-width:860px){.deux{grid-template-columns:1fr}}

/* --- L'outil : une grande zone de saisie, un bouton, un resultat qui se deplie. --- */
.outil{max-width:860px;margin:0 auto;background:var(--nuit-2);border:1px solid var(--ligne-2);border-radius:24px;padding:clamp(20px,3vw,34px);position:relative;
  box-shadow:0 0 0 1px rgba(229,32,42,.12),0 40px 120px -40px rgba(229,32,42,.35),0 60px 140px -60px rgba(0,0,0,.9)}
.outil label{display:block;margin-bottom:12px;font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.02em}
.outil textarea{width:100%;min-height:220px;resize:vertical;background:var(--nuit);border:1px solid var(--ligne-2);border-radius:16px;color:var(--blanc);font:400 16px/1.6 var(--sans);padding:18px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.outil textarea:focus{border-color:var(--rouge);box-shadow:0 0 0 3px rgba(229,32,42,.18)}
.outil textarea::placeholder{color:var(--gris-2)}
.outil .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.outil-pied{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;flex-wrap:wrap}
.outil-pied .compte{font-size:13px;color:var(--gris-2);font-variant-numeric:tabular-nums}
.outil .erreur{color:var(--rouge-2);font-size:14px;margin-top:12px;display:none}
.outil .erreur.show{display:block}
.outil .resultat{display:none;margin-top:30px;border-top:1px solid var(--ligne);padding-top:28px}
.outil .resultat.show{display:block;animation:m-monte .7s var(--ease) both}
.score{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.score-n{font-family:var(--display);font-size:clamp(56px,8vw,84px);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.score-n .of{font-size:.32em;color:var(--gris-2);margin-left:4px;font-weight:600;letter-spacing:-.02em}
.score-k{font-size:13px;font-weight:600;color:var(--rouge);letter-spacing:.02em}
.score-t{margin-top:4px;font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em}
.score-s{margin-top:6px;color:var(--gris);font-size:15px;max-width:52ch}
.verdict{margin:18px 0 26px;font-size:17px;max-width:60ch;line-height:1.5}
.bloc-h{font-size:13px;font-weight:600;color:var(--rouge);margin:26px 0 12px}
.item{border-top:1px solid var(--ligne);padding:14px 0;display:flex;align-items:flex-start;gap:14px}
.item:last-child{border-bottom:1px solid var(--ligne)}
.etiq{flex:none;font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:4px 10px;border-radius:999px;margin-top:3px;border:1px solid var(--ligne-2);color:var(--gris)}
.etiq.agent,.etiq.desir-souhaitee{border-color:rgba(127,211,163,.35);color:var(--vert)}
.etiq.hybride,.etiq.desir-contestee{border-color:rgba(240,180,90,.35);color:var(--ambre)}
.etiq.humain{border-color:var(--ligne-2);color:var(--gris)}
.etiq.desir-souhaitee,.etiq.desir-contestee{margin-left:6px}
.item-corps{flex:1;min-width:0}
.item-corps .tache,.item-corps .terme{font-weight:600}
.item-corps .raison,.item-corps .pourquoi{color:var(--gris);font-size:14.5px;margin-top:3px}
.item-corps .delai{color:var(--gris-2);font-size:12.5px;margin-top:5px}
.item-corps .mieux{margin-top:8px;padding-left:12px;border-left:2px solid var(--rouge);font-size:14.5px}
.item-corps .mieux b{font-weight:600;color:var(--rouge)}
.outils-l{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.outils-l a{font-size:12.5px;font-weight:600;color:var(--rouge);border:1px solid rgba(229,32,42,.3);border-radius:8px;padding:3px 9px}
.outils-l a:hover{background:rgba(229,32,42,.1)}
.coeur{border-left:2px solid var(--vert);padding:6px 0 6px 18px;margin-top:26px}
.coeur .h{font-size:13px;font-weight:600;color:var(--vert);margin-bottom:6px}
.note-douce{color:var(--gris-2);font-size:14px;margin-top:16px}
.sources{color:var(--gris-2);font-size:12.5px;margin-top:18px;padding-top:12px;border-top:1px dashed var(--ligne);line-height:1.5}
.suite{margin-top:34px;padding:26px;border-radius:18px;background:var(--nuit-3);border:1px solid var(--ligne);text-align:center}
.suite p{color:var(--gris);margin-bottom:16px;max-width:54ch;margin-left:auto;margin-right:auto}

/* --- Les cas : sans, avec, et ce que ca donne. --- */
.cas{border-top:1px solid var(--ligne);padding:clamp(48px,7vw,90px) 0;display:grid;grid-template-columns:120px 1fr;gap:clamp(20px,4vw,60px);align-items:start}
.cas:last-child{border-bottom:1px solid var(--ligne)}
.cas .n{font-family:var(--display);font-size:clamp(48px,7vw,96px);font-weight:800;letter-spacing:-.05em;color:var(--rouge);line-height:.9;position:sticky;top:110px}
.cas .tag{font-size:13px;font-weight:600;color:var(--rouge);letter-spacing:.02em}
.cas h2{margin-top:12px;font-size:clamp(28px,3.8vw,46px)}
.cas .sans-avec{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.cas .col{padding:22px 22px 24px;border-radius:18px;border:1px solid var(--ligne);background:var(--nuit-2)}
.cas .col .h{font-size:12.5px;font-weight:600;letter-spacing:.02em;margin-bottom:10px;color:var(--gris-2)}
.cas .col.avec{border-color:rgba(229,32,42,.35)}
.cas .col.avec .h{color:var(--rouge)}
.cas .col p{color:var(--gris);font-size:15.5px;line-height:1.5}
.cas .col.avec p{color:var(--blanc)}
.cas .apres{margin-top:22px;padding-left:18px;border-left:2px solid var(--rouge);font-size:17px;line-height:1.5}
.cas .apres b{font-weight:700}
@media (max-width:760px){.cas{grid-template-columns:1fr;gap:10px}.cas .n{position:static}.cas .sans-avec{grid-template-columns:1fr}}

/* --- Le comparatif : un tableau qui se lit comme une liste. --- */
.cmp{width:100%;border-collapse:collapse;margin-top:44px;font-size:15.5px}
.cmp th{text-align:left;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--gris-2);padding:0 18px 14px 0;border-bottom:1px solid var(--ligne-2)}
.cmp th.moi{color:var(--rouge)}
.cmp td{padding:16px 18px 16px 0;border-bottom:1px solid var(--ligne);vertical-align:top}
.cmp td.crit{font-weight:600;width:44%}
.cmp td.val{color:var(--gris)}
.cmp .oui{display:inline-flex;align-items:center;gap:8px;color:var(--blanc);font-weight:600}
.cmp .oui::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rouge);flex:none}
.cmp .non{color:var(--gris-2)}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){.cmp{min-width:560px}.cmp td.crit{width:auto}}

/* Les trois raisons, en colonnes a filet. */
.raisons{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:50px;border-top:1px solid var(--ligne)}
.raison{padding:28px 26px 30px 0;border-right:1px solid var(--ligne)}
.raison:last-child{border-right:0}
.raison .n{font-family:var(--display);font-size:48px;font-weight:800;letter-spacing:-.05em;color:var(--rouge);line-height:1}
.raison b{display:block;margin-top:18px;font-family:var(--display);font-size:22px;letter-spacing:-.02em;line-height:1.1}
.raison span{display:block;margin-top:10px;font-size:15px;color:var(--gris);line-height:1.5}
@media (max-width:860px){.raisons{grid-template-columns:1fr}.raison{border-right:0;border-top:1px solid var(--ligne);padding:24px 0}.raison:first-child{border-top:0}}

/* --- La partie jour --- */
.jour{background:var(--papier);color:var(--encre)}
.jour .sur{color:var(--rouge)}
.jour .sec .lead{color:var(--encre-2)}
.jour h2 .em{color:var(--rouge)}
.faq{max-width:820px;margin:44px auto 0;border-top:1px solid var(--ligne-j)}
.faq details{border-bottom:1px solid var(--ligne-j)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.02em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:1.6px solid var(--encre);border-bottom:1.6px solid var(--encre);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{padding:0 0 22px;color:var(--encre-2);font-size:15.5px;line-height:1.55;max-width:64ch}
.jour .filet{background:var(--ligne-j)}

/* --- Final --- */
.final{background:var(--nuit);color:var(--blanc);padding:clamp(100px,14vw,200px) 0;text-align:center;position:relative;overflow:hidden}
.final .halo{position:absolute;inset:auto -10% -40% -10%;height:80%;background:radial-gradient(50% 50% at 50% 100%,rgba(229,32,42,.32),transparent 72%);pointer-events:none}
.final h2{font-size:clamp(48px,9vw,120px);font-weight:800;letter-spacing:-.045em;position:relative}
.final .lead{position:relative;margin:24px auto 0;max-width:52ch;color:var(--gris)}
.final .actions{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.final .inline{position:relative;margin:26px auto 0;display:flex;gap:8px;max-width:520px;background:var(--nuit-2);border:1px solid var(--ligne-2);border-radius:999px;padding:6px 6px 6px 18px}
.final .inline input{flex:1;min-width:0;background:transparent;border:0;color:var(--blanc);font:inherit;font-size:15px;outline:none}
.final .inline input::placeholder{color:var(--gris-2)}
.final .inline .btn{height:42px;padding:0 18px}
.final .inline-note{position:relative;margin-top:12px;font-size:12.5px;color:var(--gris-2)}
.final .inline-note.ok{color:var(--vert)}
.final .fin-meri{position:relative;width:92px;height:92px;margin:30px auto -6px;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.final .fin-meri .owl-svg{width:92px;height:auto}
@media (max-width:520px){.final .inline{flex-direction:column;border-radius:20px;padding:10px}.final .inline input{padding:8px 6px}.final .inline .btn{width:100%}}

footer{background:var(--nuit);color:var(--gris);border-top:1px solid var(--ligne);padding:54px 0 30px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.f-about{margin-top:14px;max-width:34ch;line-height:1.5}
footer h4{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--blanc);margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:8px}
footer ul a:hover{color:var(--blanc)}
.f-bot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:44px;padding-top:20px;border-top:1px solid var(--ligne);font-size:13px;color:var(--gris-2)}
@media (max-width:760px){.f-grid{grid-template-columns:1fr 1fr}}

/* Le bandeau de consentement, s'il vient par-dessus : il suit la nuit. */
#consent-banner,.consent-banner{font-family:var(--sans)}

/* --- L'ambiance sonore : un bouton discret, coupe par defaut. --- */
:root{--son:0}
.son-bouton{position:fixed;left:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:10px;
  height:42px;padding:0 16px 0 14px;border-radius:999px;background:rgba(17,17,20,.82);border:1px solid var(--ligne-2);
  color:var(--gris);font-size:13px;font-weight:600;letter-spacing:.01em;
  transition:color .2s ease,border-color .2s ease,transform .2s var(--ease);backdrop-filter:blur(8px)}
.son-bouton:hover{color:var(--blanc);border-color:var(--gris-2);transform:translateY(-2px)}
.son-bouton.on{color:var(--blanc);border-color:rgba(229,32,42,.4)}
body.jour-actif .son-bouton{background:rgba(250,248,244,.9);border-color:var(--ligne-j2);color:var(--encre-2)}
body.jour-actif .son-bouton:hover,body.jour-actif .son-bouton.on{color:var(--encre)}
.son-barres{display:flex;align-items:flex-end;gap:2.5px;height:14px}
.son-barres i{width:2.5px;border-radius:2px;background:currentColor;height:3px;transition:height .12s linear}
/* Au repos, quatre traits egaux ; quand la musique joue, ils suivent le niveau. */
.son-bouton.on .son-barres i{background:var(--rouge)}
.son-bouton.on .son-barres i:nth-child(1){height:calc(3px + var(--son) * 8px)}
.son-bouton.on .son-barres i:nth-child(2){height:calc(3px + var(--son) * 13px)}
.son-bouton.on .son-barres i:nth-child(3){height:calc(3px + var(--son) * 10px)}
.son-bouton.on .son-barres i:nth-child(4){height:calc(3px + var(--son) * 6px)}
@media (max-width:640px){.son-bouton{left:14px;bottom:14px;height:38px;padding:0 13px 0 11px}.son-mot{display:none}}

/* Meri respire au rythme, discretement : six pour cent, pas davantage.
   On passe par la propriete scale, et non par transform : les entrees du hero
   animent deja transform, et une animation en cours ecrase la regle. */
.meri-slot{scale:calc(1 + var(--son) * .06);transition:scale .09s linear}
@media (prefers-reduced-motion:reduce){.meri-slot{scale:none}.son-barres i{height:6px!important}}

/* --- Les photos : des plans, avec une legende posee dessus (le meme vocabulaire que l'accueil). --- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photo{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--nuit-2);border:1px solid var(--ligne);transition:transform .4s var(--ease)}
.photo .photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo:hover{transform:translateY(-6px)}
.photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,11,13,0) 40%,rgba(11,11,13,.92))}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 20px;z-index:2}
.photo .n{display:block;font-size:12.5px;color:var(--rouge);font-weight:600;margin-bottom:8px}
.photo b{display:block;font-family:var(--display);font-size:22px;letter-spacing:-.025em;line-height:1.1}
.photo figcaption > span:not(.n){display:block;margin-top:8px;font-size:14px;color:var(--gris);line-height:1.45}
.photo.large{aspect-ratio:16/7}
.pay{margin-top:40px;text-align:center;font-family:var(--display);font-size:clamp(22px,3vw,34px);font-weight:700;letter-spacing:-.03em}
.plan{margin-top:44px;border-radius:20px;overflow:hidden;border:1px solid var(--ligne-2);aspect-ratio:1600/626;background:var(--nuit-2)}
.plan img{width:100%;height:100%;object-fit:cover}
.duo{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.jour .photo{border-color:var(--ligne-j)}
.jour .photo::before{background:linear-gradient(180deg,rgba(31,27,22,0) 45%,rgba(31,27,22,.88))}
.jour .photo b,.jour .photo figcaption > span:not(.n){color:#fff}
@media (max-width:760px){.trio{grid-template-columns:1fr;gap:10px}.photo{aspect-ratio:16/10}.duo{grid-template-columns:1fr}.photo.large{aspect-ratio:16/10}}

/* Les visages : quatre plans de deux secondes, en boucle, un metier chacun. */
.visages{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:54px}
.visage{position:relative;aspect-ratio:9/14;border-radius:18px;overflow:hidden;background:var(--nuit-2);border:1px solid var(--ligne);transition:transform .4s var(--ease)}
.visage:hover{transform:translateY(-6px)}
.visage video,.visage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visage::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,11,13,0) 50%,rgba(11,11,13,.9))}
.visage figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 18px;z-index:2}
.visage b{display:block;font-family:var(--display);font-size:20px;letter-spacing:-.025em;line-height:1.1}
.visage span{display:block;margin-top:6px;font-size:13.5px;color:var(--gris);line-height:1.4}
@media (max-width:860px){.visages{grid-template-columns:1fr 1fr;gap:10px}}

/* Le film, dans un cadre qui respire. */
.carte-film{position:relative;margin:64px auto 0;width:min(980px,100%);animation:m-monte 1.2s var(--ease) .55s both}
.carte-film .cadre{position:relative;border-radius:22px;overflow:hidden;background:var(--nuit-2);aspect-ratio:1600/674;border:1px solid var(--ligne-2);
  box-shadow:0 0 0 1px rgba(229,32,42,.25),0 40px 120px -30px rgba(229,32,42,.45),0 60px 140px -60px rgba(0,0,0,.9)}
.carte-film video{width:100%;height:100%;object-fit:contain;transform:translateZ(0)}
.carte-film .lueur{position:absolute;inset:auto 6% -70px;height:140px;background:radial-gradient(50% 100% at 50% 100%,rgba(229,32,42,.40),transparent 72%);pointer-events:none}
.carte-film .sous-film{display:flex;justify-content:space-between;gap:14px;margin-top:14px;font-size:13px;color:var(--gris-2);padding:0 6px}
.carte-film .sous-film b{color:var(--gris);font-weight:500}
@media (max-width:640px){.carte-film .cadre{border-radius:14px}.carte-film .sous-film{flex-direction:column;gap:4px}}

/* La plateforme : de vraies captures, inclinees, qui glissent au defilement. */
.galerie{position:relative;height:min(760px,92vw);margin-top:20px}
.galerie .ecran{position:absolute;width:44%;border-radius:14px;overflow:hidden;border:1px solid var(--ligne-2);box-shadow:0 30px 70px -30px rgba(0,0,0,.85);background:var(--nuit-2);will-change:transform;contain:paint}
.galerie .ecran img{width:100%;height:auto}
.galerie .ecran figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;font-size:13px;font-weight:600;background:linear-gradient(transparent,rgba(11,11,13,.85));color:var(--blanc)}
.galerie .e1{left:0;top:6%;--r:-5deg;--v:.06}
.galerie .e2{left:38%;top:0;--r:3deg;--v:-.05;width:40%}
.galerie .e3{right:0;top:18%;--r:6deg;--v:.09;width:34%}
.galerie .e4{left:8%;top:52%;--r:4deg;--v:-.08;width:38%}
.galerie .e5{right:6%;top:58%;--r:-4deg;--v:.04;width:44%}
.galerie .titre-centre{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;z-index:2;pointer-events:none}
.galerie .titre-centre h2{font-size:clamp(40px,6.4vw,84px);text-shadow:0 10px 60px rgba(0,0,0,.9)}
.galerie .titre-centre .btn{pointer-events:auto;margin-top:22px}
@media (max-width:760px){
  .galerie{height:auto;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 0 18px;margin-top:34px;scrollbar-width:none}
  .galerie::-webkit-scrollbar{display:none}
  .galerie .ecran{position:relative;inset:auto;flex:0 0 84%;width:84%;scroll-snap-align:center;transform:none!important}
  .galerie .titre-centre{position:static;transform:none;order:-1;flex:0 0 100%;text-align:left;margin-bottom:6px}
  .galerie .titre-centre h2{text-shadow:none}
}

/* Le visuel d'un cas : une capture ou un plan, au-dessus du sans / avec. */
.cas .cas-visuel{margin-top:24px;border-radius:18px;overflow:hidden;border:1px solid var(--ligne-2);aspect-ratio:16/8;background:var(--nuit-2)}
.cas .cas-visuel img{width:100%;height:100%;object-fit:cover;object-position:top}

/* --- Alias : les classes que les scripts des outils injectent (task, flag, strength). --- */
.task,.flag,.strength{border-top:1px solid var(--ligne);padding:14px 0;display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.task:last-child,.flag:last-child,.strength:last-child{border-bottom:1px solid var(--ligne)}
.task-badge{flex:none;font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:4px 10px;border-radius:999px;margin-top:3px;border:1px solid var(--ligne-2);color:var(--gris)}
.task-badge.agent,.task-badge.desir-souhaitee{border-color:rgba(127,211,163,.35);color:var(--vert)}
.task-badge.hybride,.task-badge.desir-contestee{border-color:rgba(240,180,90,.35);color:var(--ambre)}
.task-badge.desir-souhaitee,.task-badge.desir-contestee{margin-left:-6px}
.task-body{flex:1 1 100%;min-width:0}
.task-body .tache{font-weight:600}
.task-body .raison{color:var(--gris);font-size:14.5px;margin-top:3px}
.task-body .delai{color:var(--gris-2);font-size:12.5px;margin-top:5px}
.task-tools{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.task-tool{font-size:12.5px;font-weight:600;color:var(--rouge);border:1px solid rgba(229,32,42,.3);border-radius:8px;padding:3px 9px}
.task-tool:hover{background:rgba(229,32,42,.1)}
.flag{display:block}
.flag .excerpt{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em}
.flag .cat{display:inline-block;margin-left:10px;font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:3px 9px;border-radius:999px;border:1px solid rgba(240,180,90,.35);color:var(--ambre);vertical-align:middle}
.flag .why{color:var(--gris);font-size:14.5px;margin-top:6px;max-width:64ch}
.flag .sugg{margin-top:10px;padding-left:12px;border-left:2px solid var(--rouge);font-size:14.5px}
.flag .sugg b{font-weight:600}
.no-flags{color:var(--vert);padding:14px 0}
.strength{color:var(--blanc);font-size:15px;padding-left:20px;position:relative;display:block}
.strength::before{content:"";position:absolute;left:0;top:22px;width:8px;height:8px;border-radius:50%;background:var(--vert)}
/* ══════════════════════════════════════════════════════════════════════════
   LA MARGE (2026-09-28) : la regle rouge, la grille, le sceau.
   ══════════════════════════════════════════════════════════════════════════
   Decision prise sur docs/direction-preuve.html, variante 4. Ce bloc vient en
   dernier et redefinit le vocabulaire du site :
     . une regle rouge continue court sur toute la hauteur, a gauche du texte :
       la marge d'un cahier. Elle ne marque rien, elle est la.
     . tout ce qui compte s'ecrit en chasse fixe : numeros, dates, en-tetes.
     . plus rien d'arrondi : les coins sont a 2 px, les pilules disparaissent.
     . les boutons sont des tampons : bord, ombre dure de 2 px, ils s'enfoncent.
     . le secondaire est souligne, jamais borde.
     . plus de halo rouge, plus de lueur : la lumiere, c'etait le kit.
     . un seul rond dans tout le systeme : le sceau, sur la phrase finale.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --mono:"Fragment Mono",ui-monospace,Menlo,Consolas,monospace;
  --marge-x:max(22px,calc((100vw - var(--wrap)) / 2 - 56px));
  --regle:32px;
}
body{counter-reset:sec}
/* La regle. Fixe : elle tient pendant que la page defile, comme la marge tient sur chaque feuille. */
body::before{content:"";position:fixed;top:0;bottom:0;left:var(--marge-x);width:1.5px;background:var(--rouge);opacity:.85;z-index:49;pointer-events:none}
/* La reglure : un trait tous les 32 px, a peine visible. Elle donne le rythme, pas le decor. */
html{background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--regle) - 1px),rgba(255,255,255,.035) calc(var(--regle) - 1px) var(--regle))}
.jour{background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--regle) - 1px),rgba(31,27,22,.038) calc(var(--regle) - 1px) var(--regle))}
/* Le numero de section, dans la gouttiere a gauche de la regle. Il n'a de place que sur un grand ecran. */
.sec::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);position:absolute;left:calc(var(--marge-x) - 44px);top:clamp(90px,12vw,160px);width:32px;text-align:right;font:12px/1 var(--mono);color:var(--gris-2);letter-spacing:.04em}
@media (max-width:1330px){.sec::before{display:none}}
@media (max-width:900px){
  :root{--marge-x:14px}
  .wrap{width:calc(100% - 50px);margin:0 0 0 32px}
}

/* --- La chasse fixe : ce qui compte, ce qui date, ce qui numerote. --- */
.sur,.hero .fil,.hero-repere,.score-k,.bloc-h,.cas .tag,.photo .n,.chiffres div span,.carte-film .sous-film,
.outil-pied .compte,.sources,.item-corps .delai,.task-body .delai,.f-bot,.hero .sous-note,.final .inline-note,.galerie .ecran figcaption{
  font-family:var(--mono);font-weight:400;letter-spacing:.02em}
.sur,.score-k,.bloc-h,.cas .tag{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-2)}
.sur::before,.bloc-h::before{content:"/ ";color:var(--rouge)}
.jour .sur{color:var(--encre-3)}
.hero .fil,.hero-repere{font-size:12px}
.chiffres div span{font-size:12.5px}

/* La navigation : numerotee, en chasse fixe, comme un sommaire. */
.nav-liens{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.01em;gap:22px;counter-reset:nl}
.nav-liens a::before{counter-increment:nl;content:counter(nl,decimal-leading-zero) " ";color:var(--gris-2)}
.nav-liens a:hover::before,.nav-liens a[aria-current]::before{color:var(--rouge)}
.lien-doux{font-family:var(--mono);font-size:13px;font-weight:400}
.menu a{font-family:var(--display)}

/* --- Les tampons : un bord, une ombre dure, et le clic les enfonce. --- */
.btn,.pilule{border-radius:2px;border:1.5px solid var(--blanc);box-shadow:2px 2px 0 var(--blanc);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .15s ease,color .15s ease}
.btn:hover,.pilule:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--blanc)}
.btn:active,.pilule:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--blanc)}
.btn-rouge,.pilule{background:var(--rouge);color:#fff;border-color:var(--blanc)}
.btn-rouge:hover,.pilule:hover{background:var(--rouge)}
.btn-blanc{background:var(--blanc);color:var(--nuit);border-color:var(--blanc);box-shadow:2px 2px 0 var(--rouge)}
.btn-blanc:hover{box-shadow:3px 3px 0 var(--rouge)}
.btn-blanc:active{box-shadow:0 0 0 var(--rouge)}
.pilule i{border-radius:2px;width:26px;height:26px}
.pilule{height:40px;padding:0 14px 0 6px}
/* Le secondaire : souligne. Pas de bord, pas d'ombre, pas de boite. */
.btn-fant{height:auto;padding:0 0 2px;border:0;border-bottom:1.5px solid currentColor;border-radius:0;box-shadow:none;color:var(--blanc)}
.btn-fant:hover{transform:none;box-shadow:none;border-color:var(--rouge);color:var(--blanc)}
.btn-fant:active{transform:translateY(1px);box-shadow:none}
/* Sur la partie jour, l'ombre est a l'encre. */
.jour .btn,.btn-encre,.btn-ligne{border-color:var(--encre);box-shadow:2px 2px 0 var(--encre)}
.jour .btn:hover,.btn-encre:hover,.btn-ligne:hover{box-shadow:3px 3px 0 var(--encre)}
.jour .btn:active,.btn-encre:active,.btn-ligne:active{box-shadow:0 0 0 var(--encre)}
.btn-encre{background:var(--encre);color:#fff}
.btn-ligne{background:var(--papier-2);color:var(--encre)}
.jour .btn-fant{height:auto;padding:0 0 2px;border:0;border-bottom:1.5px solid currentColor;box-shadow:none;color:var(--encre)}
.btn:disabled{transform:none;box-shadow:none;opacity:.45}
.final .inline{border-radius:2px;border-color:var(--ligne-2)}
.final .inline .btn{box-shadow:none;border:0;height:40px}
.final .inline .btn:hover{transform:none}
@media (max-width:520px){.final .inline{border-radius:2px}}

/* --- Plus rien d'arrondi. --- */
.outil,.outil textarea,.suite,.cas .col,.photo,.plan,.visage,.carte-film .cadre,.galerie .ecran,.cas .cas-visuel,
.etiq,.task-badge,.outils-l a,.task-tool,.flag .cat,#pre .pan,#pre input[type=email],#pre input[type=text],#pre .choix button,
.dim,.dossier,.offre,.offre .ico,.sim-saisie,.sim-bloc,.an-carte,.burger,.son-bouton,.faq summary::after{border-radius:2px}
.son-bouton{border-radius:2px}
@media (max-width:640px){.carte-film .cadre{border-radius:2px}}
@media (max-width:520px){#pre .pan{border-radius:2px}}

/* --- Plus de halo. La lumiere du kit s'eteint ; il reste la page et la regle. --- */
.hero-fond,.final .halo,.carte-film .lueur{display:none}
.outil{box-shadow:none;border-color:var(--ligne-2)}
.carte-film .cadre{box-shadow:none}
.galerie .ecran{box-shadow:none}
.outil textarea:focus{box-shadow:none;border-color:var(--rouge)}

/* --- Les traits rouges a gauche deviennent des numeros ou des filets. --- */
.liste{counter-reset:li;gap:0}
.liste div{border-left:0;padding:12px 0 12px 44px;position:relative;border-top:1px solid var(--ligne)}
.liste div:last-child{border-bottom:1px solid var(--ligne)}
.liste div::before{counter-increment:li;content:counter(li,decimal-leading-zero);position:absolute;left:0;top:15px;font:12px/1 var(--mono);color:var(--rouge)}
.cas .apres,.item-corps .mieux,.flag .sugg,.coeur{border-left:0;padding-left:0;border-top:1px solid var(--rouge);padding-top:12px}
.coeur .h{color:var(--blanc)}
.strength::before{border-radius:0;width:7px;height:7px;background:var(--blanc)}
.cmp .oui::before{border-radius:0;width:7px;height:7px}

/* --- Les etiquettes : une seule couleur, en chasse fixe. --- */
.etiq,.task-badge,.flag .cat,.outils-l a,.task-tool{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px}
.etiq.agent,.etiq.desir-souhaitee,.task-badge.agent,.task-badge.desir-souhaitee{border-color:var(--blanc);color:var(--blanc)}
.etiq.hybride,.etiq.desir-contestee,.task-badge.hybride,.task-badge.desir-contestee{border-color:var(--ligne-2);color:var(--gris)}
.flag .cat{border-color:var(--rouge);color:var(--rouge)}
.no-flags{color:var(--blanc)}
.final .inline-note.ok{color:var(--blanc)}

/* --- Le comparatif devient un registre : une vraie grille, des en-tetes en capitales. --- */
.cmp{margin-top:36px;border-top:1px solid var(--blanc)}
.cmp th{font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris);padding:12px 16px;border-bottom:1px solid var(--blanc);border-right:1px solid var(--ligne)}
.cmp th:last-child,.cmp td:last-child{border-right:0}
.cmp th.moi{color:var(--rouge)}
.cmp td{padding:14px 16px;border-right:1px solid var(--ligne)}
.cmp td.crit{padding-left:0}
.cmp th:first-child{padding-left:0}
.chiffres div b{font-variant-numeric:tabular-nums}

/* --- La FAQ : le chevron devient un signe, plus ou moins, en chasse fixe. --- */
.faq summary::after{content:"+";border:0;width:auto;height:auto;transform:translateY(-50%);font:400 18px/1 var(--mono);color:var(--encre);transition:none}
.faq details[open] summary::after{content:"-";transform:translateY(-50%)}

/* --- Le sceau : une seule fois, sur la phrase finale. Le seul rond du site. --- */
.final h2 .em{position:relative;white-space:nowrap}
.final h2 .em::after{content:"OUI";position:absolute;right:-.62em;top:-.34em;width:.5em;height:.5em;border-radius:50%;background:var(--rouge);color:#fff;
  display:grid;place-items:center;font:800 .13em/1 var(--display);letter-spacing:.02em;transform:rotate(-12deg);
  box-shadow:0 0 0 .04em var(--nuit),0 0 0 .06em var(--rouge)}
@media (max-width:640px){.final h2 .em::after{right:-.5em;top:-.3em}}