/* =========================================================================
   DA KAYETANNA — v1.2, août 2026
   (v1.1 : DA de la home. v1.2 : le CSS sort de index.html pour devenir
   cette feuille partagée par tout le site — home, pages cas, mentions
   légales. Les composants des pages filles sont en fin de fichier.)
   PARTI PRIS : « le contrôle de mission ». Une salle de contrôle contrôle
   toujours quelque chose : ici, un champ de corps en orbite autour d'une
   seule masse. Le site tient donc deux registres d'un même système —
   l'INSTRUMENT (papier crème quadrillé de repères techniques, encre dense,
   un seul signal rouge, les preuves traitées comme des relevés) et le CHAMP
   (un unique centre de gravité, posé dans le hero, dont les arcs traversent
   toute la page ; on s'en éloigne à mesure qu'on descend).
   Deux couches de mouvement, une seule idée : ce qui se lit est BALAYÉ
   (masque qui passe, comme une ligne de radar) ; ce qui gravite DÉRIVE
   (oscillation lente le long d'un arc, jamais une rotation gadget).
   Kayetanna est la masse : elle n'orbite autour de rien. Toute page fille
   se place DANS ce champ, jamais au centre.
   Cette DA est la loi de toutes les pages Kayetanna suivantes.
   ========================================================================= */

:root{
  /* — Palette — */
  --paper:      #F3F0E9;   /* fond principal, le crème du bandeau */
  --paper-2:    #EAE6DB;   /* fond alterné, blocs */
  --ink:        #16131A;   /* encre, texte courant, section sombre */
  --ink-70:     #4B4653;   /* texte secondaire */
  --ink-45:     #6A6472;   /* labels, métadonnées (AA vérifié sur les deux fonds) */
  /* L'accent demandé par Camille, #7E8BCB, est un bleu-pervenche clair : magnifique
     sur l'encre (5,64:1), inutilisable sur le papier crème (2,86:1 — sous AA, et le
     blanc dessus tombe à 3,26:1). Il vit donc à pleine saturation sur fond sombre, et
     sa version assombrie — même teinte — porte le fond clair. */
  --signal:     #4E5C9E;   /* accent sur papier : 5,51:1 sur crème, blanc dessus 6,27:1 */
  --signal-lt:  #7E8BCB;   /* la teinte de Camille, sur fond sombre : 5,64:1 sur encre */
  --signal-ink: #FFFFFF;   /* texte sur signal */
  --line:       rgba(22,19,26,.15);
  --line-soft:  rgba(22,19,26,.07);
  --line-dark:  rgba(243,240,233,.16);

  /* — Typographie — */
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif:"Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* échelle étirée : le courant reste sobre, les héros écrasent */
  --t-hero:  clamp(2.05rem, 5vw, 4.7rem);
  --t-h2:    clamp(2rem, 5vw, 4.2rem);
  --t-h3:    clamp(1.35rem, 2.2vw, 1.9rem);
  --t-lead:  clamp(1.12rem, 1.55vw, 1.5rem);
  --t-body:  clamp(1rem, 1.12vw, 1.125rem);
  --t-meta:  .78rem;
  --t-stat:  clamp(3.4rem, 10vw, 8.5rem);

  /* — Espace — */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:160px;
  --gutter: clamp(20px, 5vw, 84px);
  --maxw: 1360px;

  /* — Motion : durées, easings, distances. Définis une fois, utilisés partout — */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.62,.02,.16,1);
  --d-micro: .22s;
  --d-mid:   .45s;
  --d-reveal:.78s;
  --lift: 14px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;display:block}
button{font:inherit}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}

html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* la grille technique du poste de pilotage, présente partout, presque invisible */
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size:56px 56px;
}
::selection{background:var(--signal);color:var(--signal-ink)}

/* ---------- Accessibilité ---------- */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:2px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);
  padding:12px 20px;text-decoration:none;font-weight:600;
}
.skip:focus{left:8px;top:8px}
@media (max-width:520px){.hide-s{display:none}}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
section{position:relative}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Éléments de langage ---------- */
.label{
  font-family:var(--mono);
  font-size:var(--t-meta);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-45);
  display:flex;align-items:flex-start;gap:10px;
}
.label::before{
  content:"";width:9px;height:9px;flex:none;margin-top:.42em;
  background:var(--signal);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em}

/* marques d'angle : le repère de coupe du plan technique */
.marks{position:relative}
.marks::before,.marks::after{
  content:"";position:absolute;width:13px;height:13px;pointer-events:none;
  border-color:var(--signal);border-style:solid;
}
.marks::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.marks::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}

/* ---------- Boutons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:17px 26px;min-height:52px;
  font-weight:700;font-size:1rem;letter-spacing:-.01em;
  color:var(--fg);text-decoration:none;
  background:var(--bg);
  border:1px solid var(--ink);
  overflow:hidden;isolation:isolate;
  transition:color var(--d-micro) var(--e-out), border-color var(--d-micro) var(--e-out);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--signal);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .42s var(--e-out);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover,.btn:focus-visible{border-color:var(--signal)}
.btn .arw{transition:transform .42s var(--e-out)}
.btn:hover .arw,.btn:focus-visible .arw{transform:translateX(6px)}

.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line)}
.btn--ghost:hover,.btn--ghost:focus-visible{--fg:var(--signal-ink)}
.btn--onDark{--bg:var(--paper);--fg:var(--ink);border-color:var(--paper)}
.btn--onDark:hover,.btn--onDark:focus-visible{--fg:var(--signal-ink)}

.lnk{
  color:inherit;text-decoration:none;
  background-image:linear-gradient(var(--signal),var(--signal));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size .35s var(--e-out), color var(--d-micro) linear;
}
.lnk:hover,.lnk:focus-visible{background-size:100% 1px;color:var(--signal)}

/* ---------- Header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);
  padding:16px var(--gutter);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid transparent;
  transition:border-color var(--d-mid) var(--e-out), padding var(--d-mid) var(--e-out);
}
/* opaque dès le premier scroll : le bandeau traverse une section sombre,
   un fond semi-transparent y virerait au gris sale */
.hdr.is-stuck{background:var(--paper);border-bottom-color:var(--line);padding-block:11px}
.brand{
  display:inline-flex;align-items:center;gap:11px;
  color:inherit;text-decoration:none;
  font-weight:800;letter-spacing:-.03em;font-size:1.06rem;
}
.brand svg{width:21px;height:21px;flex:none}
.brand b{font-weight:800}
.brand-txt{display:inline-flex;align-items:baseline;gap:11px;min-width:0}
.brand-name{color:var(--ink-45);font-weight:500;font-size:.8rem;letter-spacing:0;white-space:nowrap}
.hdr .btn{padding:11px 18px;min-height:44px;font-size:.9rem;white-space:nowrap}
@media (max-width:520px){
  .hdr{padding-inline:20px;gap:12px}
  .brand-name{display:none}
  .hdr .btn{padding:11px 15px;font-size:.84rem;gap:8px}
}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(66px + var(--s4));padding-bottom:var(--s4);
  position:relative;overflow:hidden;
}
/* halo qui dérive : la vie permanente, ressentie plus que remarquée */
.hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:70vmax;height:70vmax;left:-22vmax;top:-24vmax;
  background:radial-gradient(circle at 50% 50%, rgba(78,92,158,.11), rgba(78,92,158,0) 62%);
  animation:drift 34s var(--e-io) infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(16vw,9vh,0) scale(1.22)}
}
.hero .wrap{position:relative;z-index:2;width:100%}

/* ---------- Le champ : un seul centre de gravité, posé ici ----------
   Rings et corps partagent le même repère polaire (--r, --a) depuis le même
   point : les pastilles tombent exactement sur les arcs, à toute largeur. */
.field{position:absolute;left:8px;top:50%;z-index:0;width:0;height:0;pointer-events:none}
.ring{
  position:absolute;left:0;top:0;
  width:calc(var(--r) * 2);height:calc(var(--r) * 2);
  margin:calc(var(--r) * -1);
  border:1px solid var(--line);border-radius:50%;
}
.ring--far{border-style:dashed;border-color:var(--line-soft)}
.core{
  position:absolute;left:0;top:0;width:11px;height:11px;margin:-5.5px;
  background:var(--signal);border-radius:50%;
}
.core::after{
  content:"";position:absolute;left:50%;top:50%;
  width:64px;height:64px;margin:-32px;
  border:1px solid var(--signal);border-radius:50%;opacity:.3;
  animation:pulse 6s var(--e-io) infinite;
}
@keyframes pulse{0%,100%{transform:scale(.7);opacity:.34}50%{transform:scale(1.25);opacity:.08}}
@media (max-width:1180px){.field{display:none}}

/* corps en orbite : les compétences, posées sur les arcs du champ */
.chips{position:absolute;left:0;top:50%;z-index:1;width:0;height:0;pointer-events:none}
.orbiter{
  position:absolute;left:0;top:0;
  transform:rotate(var(--a));
  animation:drift-arc var(--dur,90s) var(--e-io) infinite alternate;
}
.chip{
  position:absolute;left:var(--r);top:0;
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  animation:drift-arc-c var(--dur,90s) var(--e-io) infinite alternate;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-70);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;
  white-space:nowrap;
}
@keyframes drift-arc{
  from{transform:rotate(var(--a))}
  to{transform:rotate(calc(var(--a) + 6deg))}
}
@keyframes drift-arc-c{
  from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)))}
  to{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a) - 6deg))}
}
@media (max-width:1180px){.chips{display:none}}

.hero-grid{display:grid;gap:var(--s4)}
.hero-aside{display:none}
@media (min-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:end;gap:var(--s5)}
  .hero-aside{display:block;order:-1;align-self:end;padding-bottom:4px}
}
.hero h1{
  font-size:var(--t-hero);
  font-weight:800;
  line-height:1;
  letter-spacing:-.035em;
  margin:var(--s2) 0 var(--s3);
  max-width:22ch;
  text-wrap:balance;
}
.hero h1 .it{font-weight:400;letter-spacing:-.015em}
.hero h1 em{font-style:normal;color:var(--signal)}
.hero-lead{
  font-size:var(--t-lead);
  color:var(--ink-70);
  max-width:56ch;line-height:1.45;
  margin-bottom:var(--s3);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:var(--s3)}
.hero-proof{
  border-top:1px solid var(--line);
  padding-top:var(--s2);
  font-size:.95rem;color:var(--ink-70);
  max-width:62ch;
}
.hero-proof strong{color:var(--ink);font-weight:700}
.hero-aside{font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-45);line-height:1.9;letter-spacing:.04em}
.hero-aside li{display:flex;gap:10px}
.hero-aside li::before{content:"—";color:var(--signal)}

/* révélation par masque : l'idée de mouvement du site */
.mask{display:block;overflow:hidden}
.mask>span{display:block}
.js .rv .mask>span{transform:translateY(105%);transition:transform var(--d-reveal) var(--e-out)}
.js .rv.in .mask>span{transform:translateY(0)}
.js .rv .up{opacity:0;transform:translateY(var(--lift));transition:opacity var(--d-reveal) var(--e-out), transform var(--d-reveal) var(--e-out)}
.js .rv.in .up{opacity:1;transform:none}
.js .rv .mask>span,.js .rv .up{transition-delay:var(--dl,0ms)}


/* ---------- Les planches : l'univers en pleine largeur ----------
   Une image = un argument, jamais une respiration décorative. Traitement
   duotone froid pour qu'elles appartiennent à la palette au lieu d'y être
   collées. Si le fichier manque, la planche se retire proprement (classe
   posée en JS) : la page reste publiable sans les visuels. */
.plate{
  position:relative;overflow:hidden;
  background:var(--ink);
  /* width explicite : sans elle, max-height + aspect-ratio font rétrécir la LARGEUR
     du bloc au lieu de rogner la hauteur, et la planche ne fait plus la pleine page */
  width:100%;
  aspect-ratio:16/7;
  max-height:62svh;
  border-block:1px solid var(--ink);
}
.plate.is-empty img{display:none}   /* visuel absent : la bande reste, sans image cassée ni saut de page */
.plate picture,.portrait picture{display:block;width:100%;height:100%}
.plate img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.92);
  transform:scale(1.06);
  transition:transform 1.4s var(--e-out), clip-path 1.1s var(--e-out);
}
.js .plate img{clip-path:inset(0 0 100% 0)}
.js .plate.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
/* la lumière froide de la marque, posée sur le noir et blanc */
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--signal-lt);
  mix-blend-mode:overlay;opacity:.22;
}
.plate figcaption{
  position:absolute;left:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:var(--t-meta);
  letter-spacing:.13em;text-transform:uppercase;
}
.plate figcaption b{color:var(--signal-lt);font-weight:400}
@media (max-width:640px){.plate{aspect-ratio:4/3;max-height:none}}

/* ---------- Bandeau de consentement ----------
   Accepter et refuser ont exactement le même poids visuel : la CNIL impose
   que refuser soit aussi simple qu'accepter. Rien n'est mesuré avant le choix. */
.cnsnt{
  position:fixed;left:var(--s3);bottom:var(--s3);z-index:300;
  width:min(420px, calc(100vw - var(--s3) * 2));
  background:var(--paper);border:1px solid var(--ink);
  padding:var(--s3);display:none;
  box-shadow:0 18px 40px rgba(22,19,26,.13);
}
.cnsnt.is-on{display:block}
.js .cnsnt.is-on{animation:cnsntIn .5s var(--e-out) both}
@keyframes cnsntIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cnsnt p{font-size:.92rem;line-height:1.5;color:var(--ink-70);margin:var(--s2) 0 var(--s3)}
.cnsnt-act{display:flex;gap:10px;flex-wrap:wrap}
.cnsnt-act button{
  flex:1 1 0;min-width:130px;min-height:46px;
  font-family:var(--sans);font-weight:700;font-size:.92rem;
  padding:12px 18px;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);
  transition:background var(--d-micro) var(--e-out), color var(--d-micro) var(--e-out);
}
.cnsnt-act button:hover,.cnsnt-act button:focus-visible{background:var(--ink);color:var(--paper)}
.ftr-links button{
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font:inherit;font-size:.95rem;text-decoration:none;
}

/* ---------- Sections ---------- */
.sec{padding-block:var(--s6)}
@media (min-width:900px){.sec{padding-block:var(--s7)}}
.sec-head{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
@media (min-width:900px){
  .sec-head{grid-template-columns:minmax(0,25%) minmax(0,1fr);gap:var(--s5);align-items:start}
}
.sec h2{
  font-size:var(--t-h2);font-weight:800;line-height:1.02;letter-spacing:-.032em;
  max-width:18ch;text-wrap:balance;
}
.sec h2 .it{font-weight:400;letter-spacing:-.01em}
.prose{max-width:64ch;display:grid;gap:var(--s3);color:var(--ink-70);font-size:var(--t-lead);line-height:1.62}
.prose strong{color:var(--ink);font-weight:600}
/* le corps s'aligne sur le bord gauche du titre, pas sur celui du label */
@media (min-width:900px){
  .sec>.wrap>.prose{margin-left:calc(25% + var(--s5))}
}

/* ---------- La prise de position : le copy parle d'égal à égal ---------- */
.stand{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stand .wrap{padding-block:var(--s5)}
@media (min-width:900px){.stand .wrap{padding-block:var(--s6)}}
.stand-grid{display:grid;gap:var(--s4)}
@media (min-width:900px){
  .stand-grid{grid-template-columns:minmax(0,25%) minmax(0,1fr);gap:var(--s5);align-items:start}
}
.stand blockquote{
  margin:0;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,3.1vw,2.5rem);line-height:1.22;letter-spacing:-.015em;
  color:var(--ink);max-width:24ch;text-wrap:balance;
}
.stand blockquote em{font-style:italic;color:var(--signal)}
.stand-after{
  margin-top:var(--s3);max-width:56ch;color:var(--ink-70);
  font-size:var(--t-lead);line-height:1.6;
}
.stand-after b{color:var(--ink);font-weight:600}

/* ---------- Le système : la mécanique au service de l'argument ---------- */
.sys{display:grid;gap:var(--s3);margin-top:var(--s3);max-width:330px}
.sys svg{width:100%;height:auto;display:block;overflow:visible}
.sys .o{fill:none;stroke:var(--line);stroke-width:1}
.sys .o--far{stroke:var(--line-soft);stroke-dasharray:2.5 5}
.sys .mass{fill:var(--signal)}
.sys .body{fill:var(--ink)}
.sys .body--far{fill:var(--ink-45)}
.js .sys .spin{transform-origin:130px 130px;animation:revolve var(--rev,120s) linear infinite}
@keyframes revolve{to{transform:rotate(360deg)}}
.sys-legend{display:grid;gap:11px}
.sys-legend li{
  display:grid;grid-template-columns:14px 1fr;gap:11px;align-items:start;
  font-family:var(--mono);font-size:.7rem;line-height:1.55;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-45);
}
.sys-legend b{display:block;color:var(--ink);font-weight:700;letter-spacing:.04em}
.sys-legend i{
  display:block;width:9px;height:9px;margin-top:.42em;border-radius:50%;
  background:var(--ink);
}
.sys-legend li:last-child i{background:var(--ink)}
.sys-note{
  font-family:var(--serif);font-style:italic;font-size:1.06rem;line-height:1.35;
  color:var(--ink);border-top:1px solid var(--line);padding-top:var(--s2);
  max-width:30ch;
}

/* ---------- Section 02 : le schéma à gauche, titre et offres à droite ---------- */
.mech{display:grid;gap:var(--s4)}
@media (min-width:980px){
  .mech{grid-template-columns:minmax(0,25%) minmax(0,1fr);gap:var(--s5);align-items:start}
  .mech-aside{position:sticky;top:calc(66px + var(--s3))}
}
.mech h2{margin-bottom:var(--s4)}

/* ---------- Mécanisme ---------- */
.offers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:980px){.offers{grid-template-columns:1fr 1fr}}
.offer{
  background:var(--paper);
  padding:var(--s4) clamp(20px,3vw,44px) var(--s5);
  display:grid;gap:var(--s3);align-content:start;
  transition:background var(--d-mid) var(--e-out);
}
.offer:hover{background:var(--paper-2)}
.offer h3{font-size:var(--t-h3);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.offer .meta{
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal);
}
.offer .claim{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.28;color:var(--ink)}
.offer p{color:var(--ink-70);max-width:52ch}
.offer .out{
  border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s1);
  color:var(--ink);
}
.offer .out b{font-weight:700}

/* ---------- Preuves (inversion de thème) ---------- */
.dark{
  background:var(--ink);color:var(--paper);
  overflow:hidden;
  /* la même grille d'instrument, plus loin dans le champ : le ciel */
  background-image:
    radial-gradient(circle at 8% 14%, rgba(243,240,233,.55) .9px, transparent 1.4px),
    radial-gradient(circle at 23% 62%, rgba(243,240,233,.35) .8px, transparent 1.3px),
    radial-gradient(circle at 41% 9%,  rgba(243,240,233,.45) .7px, transparent 1.2px),
    radial-gradient(circle at 57% 78%, rgba(243,240,233,.5) 1px, transparent 1.5px),
    radial-gradient(circle at 69% 31%, rgba(243,240,233,.3) .7px, transparent 1.2px),
    radial-gradient(circle at 84% 66%, rgba(243,240,233,.5) .9px, transparent 1.4px),
    radial-gradient(circle at 92% 18%, rgba(243,240,233,.35) .8px, transparent 1.3px),
    radial-gradient(circle at 33% 91%, rgba(243,240,233,.4) .8px, transparent 1.3px),
    radial-gradient(circle at 76% 95%, rgba(243,240,233,.3) .7px, transparent 1.2px),
    linear-gradient(to right, var(--line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-dark) 1px, transparent 1px);
  background-size:
    100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,
    100% 100%,100% 100%,100% 100%,100% 100%,
    56px 56px, 56px 56px;
}
/* l'arc du même champ, vu de bien plus loin : un seul centre pour tout le site */
.dark::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:-64vw;top:50%;width:150vw;height:150vw;
  transform:translateY(-50%);
  border:1px solid var(--line-dark);border-radius:50%;
}
.dark .wrap{position:relative;z-index:1}
.dark h2{color:var(--paper)}
.dark .label{color:rgba(243,240,233,.62)}
.dark .label::before,.dark .stat dt small{color:var(--signal-lt)}
.dark .label::before{background:var(--signal-lt)}
.stats{display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
@media (min-width:760px){.stats{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.stats{grid-template-columns:repeat(3,1fr)}}
/* 5 preuves : la dernière occupe la fin de rangée, pas de cellule vide */
@media (min-width:760px){.stats > :last-child{grid-column:span 2}}
.stat{
  background:var(--ink);
  padding:var(--s4) clamp(20px,2.4vw,34px) var(--s4);
  display:grid;gap:14px;align-content:start;
  transition:background var(--d-mid) var(--e-out);
}
.stat:hover{background:#1E1A24}
.stat dt{
  font-size:var(--t-stat);font-weight:900;line-height:.86;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  color:var(--paper);
}
.stat dt small{font-size:.34em;font-weight:700;letter-spacing:-.02em;vertical-align:.55em}
.stat.is-arrow dt{font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.03em}
.stat dd{margin:0;color:rgba(243,240,233,.66);font-size:.98rem;line-height:1.5;max-width:40ch}
.stat dd b{color:var(--paper);font-weight:600}
.now{
  margin-top:var(--s4);border:1px solid var(--line-dark);
  padding:var(--s3) clamp(20px,2.4vw,34px);
  display:grid;gap:10px;
}
.now p{color:rgba(243,240,233,.72);max-width:82ch;font-size:1rem}
.now .label{color:var(--signal-lt)}
.now .label::before{background:var(--signal-lt);animation:blink 2.6s steps(1,end) infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.25}}

/* ---------- Qui ---------- */
.who{display:grid;gap:var(--s5)}
@media (min-width:900px){.who{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--s6);align-items:start}}
.portrait{
  position:relative;aspect-ratio:1;background:var(--paper-2);
  border:1px solid var(--line);overflow:hidden;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size:38px 38px;
}
.portrait img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;background:var(--paper-2);filter:grayscale(1) contrast(1.06)}
.portrait.no-img img{display:none}
/* composition de repli : trois corps en orbite sur la grille, dessinés en CSS.
   Visibles par défaut, effacés dès que la photo est chargée — donc propre
   même sans JavaScript. */
.orb{position:absolute;z-index:1;border-radius:50%;transition:opacity .4s linear}
.portrait.has-img .orb{opacity:0}
.orb--1{width:34%;height:34%;top:11%;right:12%;background:radial-gradient(circle at 34% 30%, #8E8896, #35313D 62%, #211E28)}
.orb--2{width:17%;height:17%;bottom:23%;left:14%;background:radial-gradient(circle at 38% 32%, #A9A3B0, #4A4552)}
.orb--3{width:9%;height:9%;top:29%;left:29%;background:var(--signal)}
.portrait figcaption{
  position:absolute;left:0;right:0;bottom:0;
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.1em;text-transform:uppercase;
  padding:10px 14px;background:var(--ink);color:var(--paper);
}
.who h2{max-width:14ch}
.who .prose{max-width:60ch}
.who-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s2)}
.who-facts li{
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);padding:8px 13px;color:var(--ink-70);
}

/* ---------- Objections ---------- */
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{
  display:flex;align-items:flex-start;gap:clamp(14px,2.4vw,32px);
  padding:var(--s3) 0;cursor:pointer;list-style:none;
  font-size:clamp(1.1rem,1.9vw,1.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.25;
  transition:color var(--d-micro) var(--e-out);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--signal)}
.qa summary .n{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--signal);font-size:.9em;flex:none;min-width:2ch;
  line-height:1.2;
}
.qa summary .q{flex:1;max-width:46ch;text-wrap:balance}
.qa summary .sign{
  flex:none;width:26px;height:26px;position:relative;margin-top:4px;margin-left:auto;
  border:1px solid var(--line);
  transition:transform .4s var(--e-out), border-color var(--d-micro) linear;
}
.qa summary .sign::before,.qa summary .sign::after{
  content:"";position:absolute;background:currentColor;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.qa summary .sign::before{width:11px;height:1px}
.qa summary .sign::after{width:1px;height:11px;transition:transform .4s var(--e-out)}
.qa details[open] summary .sign{transform:rotate(90deg);border-color:var(--signal)}
.qa details[open] summary .sign::after{transform:translate(-50%,-50%) scaleY(0)}
.qa .ans{
  padding:0 0 var(--s4);
  margin-left:clamp(0px,calc(2ch + 2.4vw),56px);
  max-width:60ch;color:var(--ink-70);font-size:var(--t-lead);line-height:1.6;
}
.js .qa .ans{animation:ansIn .5s var(--e-out) both}
@keyframes ansIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- CTA final ---------- */
.end{padding-block:var(--s6)}
@media (min-width:900px){.end{padding-block:var(--s7)}}
.end h2{font-size:clamp(2.4rem,6.6vw,6rem);max-width:14ch;line-height:.98;letter-spacing:-.04em}
.end .prose{margin-block:var(--s4)}
.end .avail{
  border-left:2px solid var(--signal);padding-left:var(--s3);
  max-width:60ch;color:var(--ink-70);font-size:var(--t-lead);line-height:1.55;
}

/* ---------- Footer ---------- */
.ftr{background:var(--ink);color:var(--paper);padding-block:var(--s5) var(--s4)}
.ftr .wrap{display:grid;gap:var(--s4)}
@media (min-width:800px){.ftr .wrap{grid-template-columns:1fr auto;align-items:end}}
.ftr .brand{color:var(--paper);font-size:1.3rem}
.ftr .brand-name{color:rgba(243,240,233,.62)}
.dark .marks::before,.dark .marks::after{border-color:var(--signal-lt)}
.ftr-links{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:.95rem}
.ftr a{color:var(--paper)}
.ftr .fine{
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.06em;
  color:rgba(243,240,233,.62);
  display:flex;flex-wrap:wrap;gap:6px 20px;
}

/* ---------- Fallback sans JS ---------- */
html:not(.js) .mask>span{transform:none}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .rv .mask>span{transform:none}
  .js .rv .up{opacity:1;transform:none}
  .hero::after{animation:none}
  .orbiter,.chip,.core::after,.sys .spin{animation:none}
  .chip{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)))}
}
/* =========================================================================
   ARCHITECTURE MULTI-PAGES — ajoutée en v1.2, août 2026
   Ce fichier est LA feuille unique du site. Au-dessus : la DA et les
   composants de la home. Ci-dessous : les briques des pages filles
   (registre des cas clients, pages cas, mentions légales). Toute nouvelle
   page se construit avec ces briques — pas de CSS local dans les pages.
   ========================================================================= */

/* ---------- Header : navigation vers les pages filles ---------- */
.hdr-nav{display:flex;align-items:center;gap:clamp(16px,2vw,32px);margin-left:auto;margin-right:var(--s3)}
.hdr-nav a{
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-70);text-decoration:none;white-space:nowrap;padding:8px 0;
  background-image:linear-gradient(var(--signal),var(--signal));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size .35s var(--e-out), color var(--d-micro) linear;
}
.hdr-nav a:hover,.hdr-nav a:focus-visible{background-size:100% 1px;color:var(--signal)}
@media (max-width:520px){.hdr-nav{margin-right:10px}.hdr-nav a{font-size:.7rem}}

/* header posé dans le flux (mentions légales) : mêmes éléments, pas de fixed */
.hdr--flow{position:static;border-bottom:1px solid var(--line);background:var(--paper)}
.retour{
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-45);text-decoration:none;
}
.retour:hover,.retour:focus-visible{color:var(--signal)}

/* ---------- Le registre des cas : des lignes de relevé, pas des cartes ----------
   Sur la home (section 04) comme en bas de chaque page cas (« les autres cas »).
   Une ligne = un cas : référence mono, claim, chiffre, flèche. */
.cases{border-top:1px solid var(--line)}
.case-row{
  display:grid;gap:4px var(--s4);align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
  color:inherit;text-decoration:none;
  transition:background var(--d-mid) var(--e-out), padding var(--d-mid) var(--e-out);
}
@media (min-width:900px){
  .case-row{grid-template-columns:minmax(0,230px) minmax(0,1fr) minmax(0,215px) auto}
}
.case-row:hover,.case-row:focus-visible{background:var(--paper-2);padding-inline:var(--s2)}
.case-meta{
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-45);
}
.case-claim{
  font-weight:700;letter-spacing:-.02em;line-height:1.3;
  font-size:clamp(1.02rem,1.5vw,1.3rem);grid-column:1;
}
@media (min-width:900px){.case-claim{grid-column:auto}}
.case-num{
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-70);white-space:nowrap;grid-column:1;
}
.case-num b{
  font-family:var(--sans);font-weight:800;font-size:1.35rem;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;text-transform:none;
  margin-right:6px;vertical-align:-.08em;
}
@media (min-width:900px){.case-num{grid-column:auto}}
.case-arw{
  grid-column:2;grid-row:1;justify-self:end;
  color:var(--signal);font-weight:700;font-size:1.1rem;
  transition:transform .42s var(--e-out);
}
@media (min-width:900px){.case-arw{grid-column:auto;grid-row:auto}}
.case-row:hover .case-arw,.case-row:focus-visible .case-arw{transform:translateX(6px)}

/* lien « lire le cas » posé dans une cellule de preuve (section sombre) */
.stat-lnk{
  display:flex;align-items:center;gap:8px;margin-top:10px;justify-self:start;
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.12em;text-transform:uppercase;
  color:var(--signal-lt);text-decoration:none;
}
.stat-lnk .arw{transition:transform .42s var(--e-out)}
.stat-lnk:hover,.stat-lnk:focus-visible{color:var(--paper)}
.stat-lnk:hover .arw,.stat-lnk:focus-visible .arw{transform:translateX(5px)}

/* ---------- Page cas : le hero ----------
   La page cas vit DANS le champ de la home, loin du centre : un seul arc
   immense entre par la gauche, le reste est typographie. */
.case-hero{
  position:relative;overflow:hidden;
  padding-top:calc(66px + var(--s6));padding-bottom:var(--s5);
}
.case-hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:-118vw;top:50%;width:170vw;height:170vw;
  transform:translateY(-50%);
  border:1px solid var(--line);border-radius:50%;
}
.case-hero .wrap{position:relative;z-index:1}
.crumbs{
  display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:var(--s4);
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-45);
}
.crumbs a{color:inherit;text-decoration:none;transition:color var(--d-micro) linear}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--signal)}
.crumbs .sep{color:var(--signal)}
.case-hero h1{
  font-size:clamp(2rem,4.8vw,4.2rem);font-weight:800;line-height:1.02;letter-spacing:-.035em;
  margin:var(--s2) 0 var(--s3);max-width:22ch;text-wrap:balance;
}
.case-hero h1 .it{font-weight:400;letter-spacing:-.012em}
.case-hero h1 em{font-style:normal;color:var(--signal)}
.case-hero .hero-lead{margin-bottom:var(--s3)}

/* ---------- Mentions légales et pages « document » ---------- */
.wrap--narrow{max-width:820px}
.doc-main{padding-block:var(--s6) var(--s5)}
.doc h1{
  font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800;line-height:1.02;letter-spacing:-.035em;
  margin:var(--s3) 0 var(--s4);max-width:16ch;text-wrap:balance;
}
.doc h2{
  font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:800;letter-spacing:-.025em;line-height:1.15;
  margin:var(--s5) 0 var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);
}
.doc h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.doc h3{font-size:1rem;font-weight:700;margin:var(--s3) 0 6px}
.doc p{margin-bottom:var(--s2);color:var(--ink-70);max-width:68ch}
.doc p strong{color:var(--ink);font-weight:600}
.doc a{color:inherit}
.dl{display:grid;gap:2px 24px;margin-bottom:var(--s3)}
@media (min-width:640px){.dl{grid-template-columns:minmax(0,220px) minmax(0,1fr)}}
.dl dt{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);padding-top:5px}
.dl dd{margin:0 0 10px;color:var(--ink)}
.tbl{width:100%;border-collapse:collapse;margin-bottom:var(--s3);font-size:.94rem}
.tbl th,.tbl td{text-align:left;padding:11px 14px;border:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--paper-2);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.tbl td{color:var(--ink-70)}
.tbl code{font-family:var(--mono);font-size:.86em;color:var(--ink)}
@media (max-width:639px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tr{border:1px solid var(--line);margin-bottom:var(--s2)}
  .tbl td{border:0;border-bottom:1px solid var(--line-soft);padding:12px 14px}
  .tbl tr td:last-child{border-bottom:0}
  .tbl td::before{
    content:attr(data-th);display:block;margin-bottom:4px;
    font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);
  }
}
.note{border-left:2px solid var(--signal);padding:2px 0 2px var(--s3);margin:var(--s3) 0;max-width:68ch}

/* résultats à deux cellules (pages cas) : deux colonnes égales, sans la
   règle « la dernière occupe la fin de rangée » pensée pour les 5 preuves */
@media (min-width:760px){
  .stats--duo{grid-template-columns:1fr 1fr}
  .stats--duo > :last-child{grid-column:auto}
}
@media (min-width:1180px){
  .stats--duo{grid-template-columns:1fr 1fr}
}

/* résultats à trois cellules (pages cas) : 2+1 pleine largeur en tablette,
   trois colonnes pleines en grand écran — jamais de colonne fantôme */
@media (min-width:1180px){
  .stats--trio{grid-template-columns:repeat(3,1fr)}
  .stats--trio > :last-child{grid-column:auto}
}

/* renvoi CPO sous la grille des offres : une ligne, pas un composant */
.offers-cpo{margin-top:var(--s3);font-size:.95rem;color:var(--ink-70)}

/* =========================================================================
   NAVIGATION v1.3 — burger sous 1100px, nav complète au-dessus.
   Sous le seuil : le bandeau ne garde que la marque et le bouton menu ;
   le CTA vit dans le panneau. Plus rien n'est rogné, à aucune largeur.
   ========================================================================= */
@media (max-width:1099px){
  .hdr-nav{display:none}
  .hdr > .btn{display:none}
}
.nav-toggle{
  display:none;
  width:48px;height:48px;flex:none;
  align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--line);cursor:pointer;padding:0;
  transition:border-color var(--d-micro) var(--e-out);
}
.nav-toggle:hover,.nav-toggle:focus-visible{border-color:var(--signal)}
@media (max-width:1099px){.nav-toggle{display:inline-flex}}
html:not(.js) .nav-toggle{display:none}
.nav-toggle i{position:relative;display:block;width:20px;height:2px;background:var(--ink);transition:background var(--d-micro) linear}
.nav-toggle i::before,.nav-toggle i::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);
  transition:transform .32s var(--e-out), top .32s var(--e-out);
}
.nav-toggle i::before{top:-6px}
.nav-toggle i::after{top:6px}
.nav-toggle[aria-expanded="true"] i{background:transparent}
.nav-toggle[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

/* le panneau : plein écran sous le bandeau, même papier, même grille */
.menu{
  position:fixed;inset:0;z-index:90;display:none;
  background:var(--paper);
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size:56px 56px;
  padding:calc(66px + var(--s4)) var(--gutter) var(--s4);
  overflow:auto;
}
.menu.is-on{display:flex;flex-direction:column;gap:var(--s5)}
.js .menu.is-on{animation:menuIn .38s var(--e-out) both}
@keyframes menuIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (min-width:1100px){.menu{display:none !important}}
html.menu-open{overflow:hidden}
.menu-links{display:grid;border-top:1px solid var(--line)}
.menu-links a{
  display:flex;align-items:baseline;gap:var(--s3);
  padding:20px 0;border-bottom:1px solid var(--line);
  color:inherit;text-decoration:none;
  font-weight:800;font-size:clamp(1.5rem,6.4vw,2.1rem);letter-spacing:-.03em;line-height:1.1;
  transition:color var(--d-micro) var(--e-out), padding-left var(--d-mid) var(--e-out);
}
.menu-links a:hover,.menu-links a:focus-visible{color:var(--signal);padding-left:var(--s2)}
.menu-links a i{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:.55em;color:var(--signal);min-width:2ch;
}
.menu-cta{margin-top:auto;display:grid;gap:12px}
.menu-cta .btn{justify-content:center}

/* ---------- Pages d'offre et méthode : le déroulé en deux temps ---------- */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:900px){.steps{grid-template-columns:1fr 1fr}}
.step{
  background:var(--paper);
  padding:var(--s4) clamp(20px,3vw,44px) var(--s5);
  display:grid;gap:var(--s3);align-content:start;
  transition:background var(--d-mid) var(--e-out);
}
.step:hover{background:var(--paper-2)}
.step .meta{
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal);
}
.step h3{font-size:var(--t-h3);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.step p{color:var(--ink-70);max-width:52ch}

/* ---------- 404 : un corps sorti du champ ---------- */
.lost{min-height:72svh;display:flex;align-items:center}
.lost-code{
  font-size:clamp(5rem,22vw,13rem);font-weight:900;line-height:.9;letter-spacing:-.06em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.lost-code em{font-style:normal;color:var(--signal)}