:root {
    --sol:#0D0D0C; --sol2:#141412; --carte:#1A1A18;
    --encre:#E1E0CC; --filet:rgba(225,224,204,.14);
    --filet2:rgba(225,224,204,.28);
    --acier:#81A3BB; --acier-bas:#658FAC; --grad:#3C7096; --eau:#4FD1C5;
    --verre-clair:rgba(13,13,12,.44); --verre-filet:rgba(225,224,204,.16);
    --flou:blur(15px) saturate(115%);
    --points:'Silkscreen','Courier New',monospace;
    --marge:clamp(22px, 5vw, 78px); --bg:#0D0D0C; --water:#4fd1c5; --water-dim:rgba(129,163,187,.8); --cream:#E1E0CC;
          --dim:rgba(225,224,204,.66); --faint:rgba(225,224,204,.58); --line:rgba(225,224,204,.14); }a{ color:inherit; text-decoration:none; }.serif{ font-family:'Instrument Serif',serif; font-style:italic; }.grain{ position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }.nav{ position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:50;
    background:rgba(6,10,18,.92); backdrop-filter:blur(10px); border-radius:0 0 1.5rem 1.5rem;
    padding:14px 34px; display:flex; gap:46px; align-items:center; }.nav a:not(.brand){ position:relative; overflow:hidden; display:inline-flex; align-items:center; height:38px; padding:0 17px;
    border-radius:7px; font-size:13.5px; color:#E1E0CC; border:1px solid rgba(198,198,198,.4);
    background:linear-gradient(105deg,#050b14 0%,#17242f 48%,#22323f 100%);
    transition:background .35s,border-color .35s,box-shadow .35s; white-space:nowrap; }.nav a:not(.brand)::before{ content:""; position:absolute; inset:0;
    background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);
    transform:translateX(-120%); transition:transform .6s ease; }.nav a:not(.brand):hover::before{ transform:translateX(120%); }.nav a:not(.brand):hover{ border-color:rgba(120,225,215,.7); box-shadow:0 0 18px rgba(79,209,197,.18); }.nav .brand{ font-weight:800; font-size:15px; letter-spacing:.5px; }.nav .brand span{ color:var(--water); }.cta{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px;
    height:46px; padding:0 24px; border-radius:8px; font-size:15px; font-weight:700; letter-spacing:-.02em; cursor:pointer;
    background:linear-gradient(180deg,#7ef0e2 0%,#4fd1c5 48%,#35b3a8 100%); color:#04241f; border:1px solid #8ff5e8;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75); transition:box-shadow .35s; font-family:inherit; }.cta::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.45) 48%,transparent 76%);
    transform:translateX(-130%); transition:transform .65s ease; }.cta:hover::after{ transform:translateX(130%); }.cta-ghost{ background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(0,0,0,.5) 46%,rgba(120,180,190,.1));
    color:var(--cream); border:1px solid rgba(198,198,198,.5); backdrop-filter:blur(16px); }.crumb{ max-width:1160px; margin:0 auto; padding:108px 24px 0; font-size:12.5px; color:var(--faint); }.crumb a:hover{ color:var(--water); }.lp-hero{ max-width:1160px; margin:0 auto; padding:34px 24px 40px; }.k{ font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--water-dim); margin-bottom:16px; }h1{ font-size:clamp(32px,4.5vw,55px); font-weight:400; line-height:1.12; letter-spacing:-.02em; margin-bottom:18px; max-width:900px; }h1 .serif{ color:var(--water); }.lead{ font-size:16.5px; line-height:1.7; color:var(--dim); margin-bottom:26px; max-width:620px; }.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }

  /* ILLUSTRATION 1 : la vie d'un devis, avec et sans */.life{ margin-top:50px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:rgba(255,255,255,.02); }.lf-head{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }.lf-head div{ padding:17px 24px; font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--faint); }.lf-head div:first-child{ border-right:1px solid var(--line); }.lf-head b{ color:var(--cream); font-weight:700; }.lf-head .w b{ color:var(--water); }.lf-body{ display:grid; grid-template-columns:1fr 1fr; position:relative; }.lf-col{ padding:26px 24px 30px; }.lf-col:first-child{ border-right:1px solid var(--line); }.ev{ display:grid; grid-template-columns:56px 1fr; gap:14px; padding:11px 0; opacity:0; transform:translateY(10px);
    transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1); }.ev.in{ opacity:1; transform:none; }.ev .d{ font-size:12px; color:var(--faint); padding-top:2px; font-variant-numeric:tabular-nums; letter-spacing:.5px; }.ev .c{ font-size:13.8px; line-height:1.55; color:#c9d2da; }.ev .c em{ font-style:normal; display:block; font-size:11.8px; color:var(--faint); margin-top:2px; }.ev.mute .c{ color:var(--faint); }.ev.good .c{ color:var(--cream); }.ev.good .d{ color:var(--water-dim); }.ev.end .c{ font-weight:700; }.ev.end.bad .c{ color:#f0a0a0; }.ev.end.win .c{ color:var(--water); }.lf-foot{ grid-column:1 / -1; border-top:1px solid var(--line); padding:18px 24px; font-size:13px; color:var(--dim); }.lf-foot b{ color:var(--cream); }section{ max-width:1160px; margin:0 auto; padding:78px 24px; }h2{ font-size:clamp(24px,3vw,36px); font-weight:400; line-height:1.25; letter-spacing:-.02em; margin-bottom:14px; }h2 .serif{ color:var(--water); }h3{ font-size:16.5px; font-weight:700; margin-bottom:8px; }p{ font-size:15px; line-height:1.75; color:var(--dim); }.narrow{ max-width:740px; }.narrow p + p{ margin-top:14px; }.anim{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }.anim.in{ opacity:1; transform:none; }.two{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:26px; }.two h3{ color:var(--cream); }.two p{ font-size:14.5px; }

  /* ILLUSTRATION 2 : la bibliotheque de messages */.msgs{ margin-top:34px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.02);
    display:grid; grid-template-columns:290px 1fr; }.ms-side{ border-right:1px solid var(--line); padding:16px 0; }.ms-side .t{ font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--faint); padding:0 22px 12px; }.ms-row{ padding:12px 22px; cursor:pointer; font-size:13.6px; color:#b9c4cd; border-left:2px solid transparent;
    transition:background .25s,color .25s,border-color .25s; }.ms-row:hover{ background:rgba(255,255,255,.04); color:var(--cream); }.ms-row.on{ background:rgba(79,209,197,.08); color:var(--cream); border-left-color:var(--water); }.ms-row em{ font-style:normal; display:block; font-size:11.5px; color:var(--faint); margin-top:2px; }.ms-body{ padding:24px 28px; }.ms-meta{ display:flex; gap:18px; flex-wrap:wrap; font-size:11.5px; color:var(--faint); margin-bottom:16px;
    padding-bottom:14px; border-bottom:1px solid var(--line); }.ms-meta b{ color:var(--water); font-weight:700; }.ms-mail{ background:rgba(0,0,0,.32); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }.ms-obj{ font-size:13px; color:var(--faint); margin-bottom:12px; padding-bottom:11px; border-bottom:1px solid var(--line); }.ms-obj b{ color:var(--cream); font-weight:700; }.ms-txt{ font-size:14.2px; line-height:1.78; color:#c9d2da; white-space:pre-line; }.ms-txt v{ color:var(--water); font-style:normal; }.ms-why{ margin-top:16px; font-size:13px; color:var(--dim); }.ms-why b{ color:var(--cream); }.tbl{ margin-top:30px; width:100%; border-collapse:collapse; font-size:14px; }.tbl th, .tbl td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }.tbl th{ font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--faint); font-weight:400; }.tbl td b{ color:var(--cream); }.tbl tr:last-child td{ border-bottom:0; }.split{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }.sp{ border:1px solid var(--line); border-radius:16px; padding:24px; }.sp.auto{ border-color:rgba(79,209,197,.3); background:rgba(79,209,197,.04); }.sp h3{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }.sp h3 i{ width:9px; height:9px; border-radius:50%; display:inline-block; }.sp.auto h3 i{ background:var(--water); }.sp.you h3 i{ background:#ffd28a; }.sp li{ list-style:none; font-size:14px; line-height:1.6; color:var(--dim); padding:9px 0 9px 20px; position:relative;
    border-bottom:1px solid rgba(225,224,204,.05); }.sp li:last-child{ border-bottom:0; }.sp li::before{ content:""; position:absolute; left:2px; top:16px; width:6px; height:6px; border-radius:50%;
    background:var(--faint); }.faq{ margin-top:32px; }.fq{ border-bottom:1px solid var(--line); }.fq summary{ cursor:pointer; list-style:none; padding:20px 0; font-size:16px; font-weight:700; display:flex; justify-content:space-between; gap:16px; }.fq summary::-webkit-details-marker{ display:none; }.fq summary::after{ content:"+"; color:var(--water); font-weight:300; font-size:21px; transition:transform .3s; }.fq[open] summary::after{ transform:rotate(45deg); }.fq p{ padding-bottom:20px; max-width:790px; }.final{ text-align:center; padding-bottom:96px; }.final .box{ border:1px solid var(--line); border-radius:22px; padding:56px 40px; background:rgba(255,255,255,.02); }

  @media (max-width:900px) {.lf-head, .lf-body{ grid-template-columns:1fr; }.lf-head div:first-child, .lf-col:first-child{ border-right:0; border-bottom:1px solid var(--line); }.msgs{ grid-template-columns:1fr; }.ms-side{ border-right:0; border-bottom:1px solid var(--line); }.two, .split{ grid-template-columns:1fr; gap:22px; }.ms-body{ padding:20px; }}
  @media (max-width:460px) {
    /* la pilule ne tient pas a 4 entrees sur telephone : on garde marque,
       page pilier et contact, le 3e lien reste atteignable par le pied de page */.nav{ gap:9px; padding:10px 12px; }.nav a:not(.brand){ font-size:10.5px; padding:0 9px; height:32px; }.nav a:nth-child(3){ display:none; }}
  @media (max-width:860px) {.tbl, .tbl tbody, .tbl tr, .tbl td{ display:block; width:100%; }.tbl thead{ display:none; }.tbl tr{ padding:16px 0; border-bottom:1px solid var(--line); }.tbl tr:last-child{ border-bottom:0; }.tbl td{ border-bottom:0; padding:5px 0; }.tbl td::before{ content:attr(data-l); display:block; font-size:10.5px; letter-spacing:1.5px;
      text-transform:uppercase; color:var(--faint); margin-bottom:3px; }.tbl td:first-child::before{ display:none; }.tbl td:first-child{ font-size:15.5px; font-weight:700; color:var(--cream); margin-bottom:6px; }}.wcol{ position:absolute; top:0; left:0; width:72px; height:100%; z-index:0; pointer-events:none; overflow:hidden; }.wcol .rail{ position:absolute; left:35px; top:0; bottom:0; width:2px;
    background:linear-gradient(180deg, rgba(79,209,197,.14), rgba(79,209,197,.04)); }.wfill{ position:absolute; left:33px; top:0; width:6px; height:0; border-radius:0 0 3px 3px;
    background:linear-gradient(180deg, rgba(79,209,197,.25) 0%, rgba(79,209,197,.7) 60%, rgba(140,235,225,.95) 100%);
    box-shadow:0 0 18px rgba(79,209,197,.3); }.wheel{ position:absolute; left:1px; top:0; width:70px; height:70px; margin-top:-35px; will-change:transform; }.wheel svg{ width:70px; height:70px; display:block; will-change:transform; }.drop{ position:absolute; left:34px; width:4px; height:10px; border-radius:2px;
    background:linear-gradient(180deg, rgba(140,235,225,.95), rgba(79,209,197,.2)); opacity:0; }.drop.d1{ animation:ecfall 1.15s linear infinite; }.drop.d2{ animation:ecfall 1.15s linear .38s infinite; }.drop.d3{ animation:ecfall 1.15s linear .76s infinite; }@keyframes ecfall{
    0%   { transform:translateY(30px) scaleY(.6); opacity:0; }
    18%  { opacity:1; }
    100% { transform:translateY(150px) scaleY(1.5); opacity:0; }
  }.wpool{ position:absolute; left:14px; right:14px; bottom:0; height:0;
    background:linear-gradient(180deg, rgba(79,209,197,.26), rgba(79,209,197,.05));
    border-top:2px solid rgba(140,235,225,.55); }
  @media (max-width:1260px) {.wcol{ display:none; }}
  @media (prefers-reduced-motion: reduce) {.drop{ animation:none; opacity:0; }}

  /* ===== BOUTON ECLUZ : la capsule qui se remplit par le bas ===== */.cta{ border-radius:999px !important; background:transparent !important; color:var(--water) !important;
    border:1.5px solid rgba(79,209,197,.85) !important; box-shadow:none !important;
    height:48px; padding:0 27px; letter-spacing:.01em;
    transition:color .3s ease, border-color .3s ease; }.cta::after{ display:none !important; }.cta::before{ content:""; position:absolute; left:-2px; right:-2px; bottom:-2px; height:0; z-index:-1;
    background:linear-gradient(180deg,#7ef0e2,#35b3a8);
    border-radius:999px 999px 999px 999px / 26px 26px 999px 999px;
    transition:height .42s cubic-bezier(.22,1,.36,1); }.cta:hover{ color:#04241f !important; border-color:#8ff5e8 !important; }.cta:hover::before{ height:calc(100% + 4px); }.cta-ghost{ color:var(--cream) !important; border-color:rgba(225,224,204,.4) !important; backdrop-filter:none !important; }.cta-ghost::before{ background:linear-gradient(180deg,#E1E0CC,#c9d2da); }.cta-ghost:hover{ color:#0D0D0C !important; border-color:#E1E0CC !important; }.final .actes a{
      min-height:44px; display:flex; align-items:center; }body:has(> .wcol){position:relative}
.lecture{max-width:1160px;margin:0 auto;padding:0 24px 40px;display:grid;
  grid-template-columns:246px 1fr;gap:54px;align-items:start}
.sommaire{position:sticky;top:104px;font-size:12.9px;line-height:1.45}
.sommaire > span{display:block;font-size:11px;letter-spacing:3.4px;
  text-transform:uppercase;color:var(--water-dim);margin-bottom:14px}
.sommaire ol{list-style:none;margin:0;padding:0 0 0 18px;position:relative}
.sommaire ol::before{content:"";position:absolute;left:0;top:4px;bottom:4px;
  width:1px;background:rgba(225,224,204,.14)}
.sommaire .niveau-eau{position:absolute;left:0;top:4px;width:1px;height:0;
  background:linear-gradient(180deg,rgba(79,209,197,.15),var(--water));
  transition:height .18s linear}
.sommaire li{margin:0 0 11px}
.sommaire a{color:rgba(225,224,204,.52);text-decoration:none;display:block;
  transition:color .2s ease}
.sommaire a:hover{color:var(--cream)}
.sommaire a.vu{color:rgba(225,224,204,.72)}
.sommaire a.ici{color:var(--water)}
/* L'ECLUSE DESCEND JUSQU'EN BAS.

   La colonne d'eau est en position absolue avec une hauteur de 100 pour cent
   et un debordement masque. Le corps de page etant en position statique, son
   bloc conteneur n'etait pas le document mais la FENETRE : la colonne faisait
   900 pixels et coupait tout le reste. L'eau et la roue etaient pourtant a la
   bonne place, a 11 873 pixels, simplement invisibles.

   Rendre le corps relatif suffit : il devient le bloc conteneur, et les 100
   pour cent valent enfin la hauteur du document. Sur ces pages la colonne est
   le seul element absolu a la racine, rien d'autre ne s'en trouve deplace. */
body{position:relative}

/* ---------- la colonne de texte ----------

   La page modele habille ses propres composants ; elle n'a jamais eu de
   texte courant a mettre en page. Sans ces regles, les paragraphes se
   touchent, les intertitres collent au paragraphe precedent et les lignes
   font cent dix signes la ou l'oeil en suit soixante-dix sans effort. */
/* une page sans sommaire garde la meme gouttiere, sans colonne de gauche */
.lecture.solo{grid-template-columns:minmax(0,1fr)}
.corps{min-width:0;max-width:70ch}
.corps > *{max-width:100%}
.corps p{margin:0 0 19px;line-height:1.72;color:var(--dim);font-size:15.6px}
.corps h2{font-size:clamp(23px,2.5vw,31px);line-height:1.2;letter-spacing:-.01em;
  margin:0 0 18px;color:var(--cream)}
.corps section > h2:first-child{margin-top:4px}
.corps h3{font-size:17px;line-height:1.35;margin:32px 0 12px;color:var(--cream);
  font-weight:700}
.corps h4{font-size:14.6px;margin:26px 0 10px;color:var(--cream)}
.corps ul,.corps ol{margin:0 0 20px;padding-left:19px;color:var(--dim);
  font-size:15.6px;line-height:1.7}
.corps li{margin:0 0 9px}
.corps li::marker{color:var(--water)}
.corps a{color:var(--cream);text-decoration:none;
  border-bottom:1px solid rgba(79,209,197,.42);transition:border-color .2s ease,color .2s ease}
.corps a:hover{color:var(--water);border-bottom-color:var(--water)}
.corps strong{color:var(--cream);font-weight:700}
.corps blockquote{margin:26px 0;padding:2px 0 2px 20px;
  border-left:2px solid rgba(79,209,197,.5);color:var(--cream);font-size:16.4px;
  line-height:1.62}
/* la source d'un tableau ou d'un chiffre : elle doit se lire comme une
   legende, pas comme la suite du raisonnement */
.corps p:has(> em:only-child),.corps .source{font-size:12.9px;color:var(--faint);
  margin-top:-8px}

.corps table{width:100%;border-collapse:collapse;margin:8px 0 26px;
  font-size:14.2px;display:block;overflow-x:auto}
.corps thead th{text-align:left;font-weight:400;font-size:11px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--water-dim);padding:0 16px 10px 0;
  border-bottom:1px solid rgba(225,224,204,.16);white-space:nowrap}
.corps tbody td{padding:11px 16px 11px 0;color:var(--dim);line-height:1.5;
  border-bottom:1px solid rgba(225,224,204,.07);vertical-align:top}
.corps tbody tr:last-child td{border-bottom:0}
.corps tbody td:first-child{color:var(--cream)}

/* le bloc de cloture n'avait aucun conteneur : il partait sur toute la
   largeur, passait sous la colonne d'eau et perdait ses premiers caracteres */
.cloture{max-width:1160px;margin:0 auto;padding:64px 24px 78px}
.cloture h2{font-size:clamp(25px,3vw,38px);line-height:1.16;margin:0 0 14px;
  color:var(--cream)}
.cloture .lead{margin-bottom:24px}

/* ---------- la FAQ, en accordeon ----------

   LES REPONSES RESTENT DANS LE DOCUMENT, refermees mais presentes : c'est ce
   qui permet a la fois l'animation et la declaration FAQPage. Un panneau
   dont le contenu n'existe qu'a l'ouverture ne serait pas indexable, et je
   me suis deja fait prendre a ranger du texte dans un attribut. */
.q{border-bottom:1px solid rgba(225,224,204,.1)}
.q:first-of-type{border-top:1px solid rgba(225,224,204,.1)}
.q > summary{list-style:none;cursor:pointer;display:flex;gap:16px;
  align-items:flex-start;padding:17px 0;font-size:16px;line-height:1.42;
  color:var(--cream);transition:color .2s ease}
.q > summary::-webkit-details-marker{display:none}
.q > summary:hover{color:var(--water)}
.q > summary::before{content:"";flex:0 0 9px;height:9px;margin-top:6px;
  border-right:1.4px solid var(--water);border-bottom:1.4px solid var(--water);
  transform:rotate(45deg);transition:transform .3s cubic-bezier(.22,.7,.3,1)}
.q:not(.ferme) > summary::before{transform:rotate(-135deg)}
.q:not(.ferme) > summary{color:var(--water)}
/* l'ouverture se joue sur la hauteur en fractions de grille : c'est la seule
   facon d'animer un contenu dont on ignore la taille a l'avance */
.q .r{display:grid;grid-template-rows:1fr;padding:0 0 6px 25px;
  transition:grid-template-rows .34s cubic-bezier(.22,.7,.3,1)}
.q .r > div{overflow:hidden}
.q .r p:last-child{margin-bottom:14px}
/* TOUS LES PANNEAUX SONT OUVERTS DANS LE DOCUMENT ; c'est le script qui les
   replie. Sans lui, la FAQ se lit d'un bloc au lieu d'etre injoignable. */
.q.ferme .r{grid-template-rows:0fr}
@media (prefers-reduced-motion: reduce){ .q .r{transition:none} }

/* un intervalle franc entre deux sections : c'est lui qui dit au lecteur
   qu'un sujet se termine, bien plus surement qu'un filet */
/* la page modele donne a « section » la largeur et les 78 pixels de respiration
   d'une section de page entiere. Ici une section est un chapitre DANS une
   colonne : elle heritait de 156 pixels de vide et d'un retrait lateral. */
.corps section{max-width:none;margin:0 0 58px;padding:0}
.corps section:last-child{margin-bottom:0}
.repere-lecture{display:flex;gap:22px;font-size:11.6px;letter-spacing:.6px;
  color:var(--faint);margin-top:20px}
.repere-lecture b{color:var(--cream);font-weight:400}
.bloc-lu{opacity:0;transform:translateY(16px);
  transition:opacity .62s cubic-bezier(.22,.7,.3,1),
             transform .62s cubic-bezier(.22,.7,.3,1)}
.bloc-lu.la{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .bloc-lu{opacity:1;transform:none;transition:none}
}
@media (max-width:900px){
  .lecture{grid-template-columns:1fr;gap:0}
  .sommaire{position:static;margin-bottom:34px}
}

/* ---------- les schemas de section ---------- */
.fig{margin:26px 0 30px;padding:22px 22px 20px;border-radius:4px;
  border:1px solid rgba(225,224,204,.11);
  background:linear-gradient(155deg,rgba(225,224,204,.035),rgba(13,13,12,.5))}
.fig-t{font-size:10.6px;letter-spacing:3.2px;text-transform:uppercase;
  color:var(--water-dim);margin-bottom:18px}
.fig-n{font-size:12.4px;color:var(--faint);margin-top:16px;line-height:1.5}

/* la chaine : les maillons s'allument au passage de l'eau, comme sur la
   vitrine. Le trait se remplit une fois, a l'entree dans l'ecran. */
.chaine{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.chaine::before{content:"";position:absolute;left:9%;right:9%;top:13px;height:1px;
  background:rgba(225,224,204,.15)}
.chaine::after{content:"";position:absolute;left:9%;top:13px;height:1px;width:0;
  background:var(--water);transition:width 1.5s cubic-bezier(.3,.7,.3,1)}
.fig.la .chaine::after{width:82%}
.maillon{position:relative;padding-top:34px;text-align:center;
  opacity:.32;transition:opacity .45s ease}
.fig.la .maillon{opacity:1}
.fig.la .maillon:nth-child(2){transition-delay:.34s}
.fig.la .maillon:nth-child(3){transition-delay:.68s}
.fig.la .maillon:nth-child(4){transition-delay:1.02s}
.maillon::before{content:"";position:absolute;top:7px;left:50%;margin-left:-6px;
  width:12px;height:12px;border-radius:50%;border:1.4px solid var(--water);
  background:var(--sol)}
.maillon:last-child::before{border-style:dashed}
.maillon b{display:block;font-size:13.2px;color:var(--cream);font-weight:400;
  margin-bottom:4px}
.maillon span{display:block;font-size:11.8px;color:var(--faint);line-height:1.45;
  padding:0 6px}

/* les trois couches : on les survole, elles se decalent. Le decalage dit
   qu'elles se superposent au lieu de se remplacer. */
.couches{display:flex;flex-direction:column;gap:9px}
.couche{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:baseline;
  padding:13px 15px;border-radius:3px;border:1px solid rgba(225,224,204,.1);
  background:rgba(225,224,204,.02);
  transition:transform .32s cubic-bezier(.22,.7,.3,1),border-color .32s ease,
             background .32s ease}
.couche:hover,.couche:focus-within{transform:translateX(9px);
  border-color:rgba(79,209,197,.4);background:rgba(79,209,197,.05)}
.couche i{font-style:normal;font-size:12.4px;letter-spacing:.4px;color:var(--water)}
.couche p{margin:0 !important;font-size:13.4px !important;line-height:1.5 !important;
  color:var(--dim)}
.fig.la .couche{animation:entre .5s backwards cubic-bezier(.22,.7,.3,1)}
.fig.la .couche:nth-child(2){animation-delay:.1s}
.fig.la .couche:nth-child(3){animation-delay:.2s}
@keyframes entre{from{opacity:0;transform:translateX(-14px)}}

/* le triage : trois criteres, un verdict. Il ne calcule rien qu'on ne dise
   pas dans le texte, il rend la regle manipulable. */
.triage{display:flex;flex-wrap:wrap;gap:9px}
.critere{all:unset;cursor:pointer;font-size:13px;line-height:1.3;padding:10px 15px;
  border-radius:999px;border:1px solid rgba(225,224,204,.22);color:var(--dim);
  transition:all .24s ease}
.critere:hover{border-color:rgba(79,209,197,.5);color:var(--cream)}
.critere:focus-visible{outline:2px solid var(--water);outline-offset:2px}
.critere[aria-pressed="true"]{background:rgba(79,209,197,.13);
  border-color:var(--water);color:var(--water)}
.verdict{margin-top:18px;padding:15px 17px;border-radius:3px;
  border-left:2px solid var(--water);background:rgba(225,224,204,.03);
  font-size:14.2px;line-height:1.55;color:var(--cream);
  transition:opacity .25s ease}
.verdict b{color:var(--water);font-weight:400}

/* le seuil : l'eau avance, bute, et repart vers l'humain */
.seuil{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.seuil .bord{padding:13px 15px;border-radius:3px;font-size:13px;line-height:1.5;
  border:1px solid rgba(225,224,204,.12);color:var(--dim)}
.seuil .bord b{display:block;color:var(--cream);font-weight:400;margin-bottom:5px;
  font-size:13.4px}
.seuil .vanne{width:2px;height:74px;background:rgba(225,224,204,.16);position:relative}
.seuil .vanne::after{content:"";position:absolute;left:-4px;top:0;width:10px;height:0;
  background:var(--water);transition:height 1.1s cubic-bezier(.3,.7,.3,1)}
.fig.la .seuil .vanne::after{height:38px}
.seuil .humain{border-color:rgba(79,209,197,.38)}
.seuil .humain b{color:var(--water)}
.seuil ul{margin:8px 0 0 !important;padding-left:16px !important;
  font-size:12.4px !important;color:var(--faint) !important}
.seuil li{margin:0 0 4px !important}

@media (max-width:640px){
  .chaine{grid-template-columns:1fr 1fr;row-gap:22px}
  .chaine::before,.chaine::after{display:none}
  .couche{grid-template-columns:1fr;gap:4px}
  .seuil{grid-template-columns:1fr}
  .seuil .vanne{width:74px;height:2px;justify-self:center}
  .seuil .vanne::after{left:0;top:-4px;height:10px;width:0;transition:width 1.1s ease}
  .fig.la .seuil .vanne::after{height:10px;width:38px}
}
@media (prefers-reduced-motion: reduce){
  .fig *{animation:none !important;transition:none !important}
  .fig.la .chaine::after{width:82%}
}