:root{
  --noir:#000; --noir-2:#080808; --noir-3:#101010;
  --vert:#d2ffc5;
  --blanc:#fff;
  --gris:#949698;
  --lavande:#ca9fff;
  --rose:#ff9ee0;
  --jaune:#fdff6d;
  --bord:rgba(255,255,255,.13);
  --bord-2:rgba(255,255,255,.07);
  --verre:rgba(255,255,255,.045);
  --sans:"Mona Sans Variable","Mona Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
/* Le débordement horizontal était coupé sur « body » seulement, en
   « overflow-x:hidden ». Sur un iPhone, cela ne suffit pas : les règles de
   propagation remontent le débordement au viewport, que Safari laisse alors
   défiler latéralement de quelques dizaines de pixels — le site « bouge sur
   la largeur » au doigt. Il faut donc le couper aussi sur « html ».
   Et il faut le couper en « clip », pas en « hidden » : « hidden » sur un axe
   force l'autre axe en « auto », ce qui fait du document une boîte de
   défilement et tue « position:sticky » — or l'en-tête et le récapitulatif de
   commande en dépendent. « clip » cohabite avec « visible » et les préserve.
   Les Safari antérieurs à la version 16 ignorent « clip » et se retrouvent
   dans l'état d'avant, ce qui est le pire acceptable. On ne leur donne surtout
   pas « hidden » en repli sur « html » : ils y perdraient l'en-tête collant. */
html{overflow-x:clip}
body{
  background:var(--noir); color:var(--blanc);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-x:clip;
}

/* ---------- Lenis (défilement lissé) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- curseur ---------- */
@media(hover:hover) and (pointer:fine){
  .pointeur{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
    background:var(--vert);pointer-events:none;z-index:9999;mix-blend-mode:difference;
    opacity:0;will-change:transform}
  .anneau{position:fixed;top:0;left:0;width:42px;height:42px;border-radius:50%;
    border:1.4px solid rgba(210,255,197,.55);pointer-events:none;z-index:9998;
    opacity:0;will-change:transform}
}
::selection{background:var(--vert);color:#000}
a{color:inherit;text-decoration:none}
.wrap{max-width:1440px;margin:0 auto;padding-left:26px;padding-right:26px}

/* ---------- puce ○ ---------- */
.o::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  border:1.4px solid currentColor;margin-right:9px;vertical-align:middle;transform:translateY(-1px)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--bord-2)}
header .in{display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;padding-bottom:16px}
.logo{font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--vert);line-height:1}
.logo span{color:var(--blanc)}
.topnav{display:flex;gap:clamp(20px,2.6vw,48px);font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;
  margin-left:auto}
.topnav a{transition:color .25s;white-space:nowrap}
.topnav a:hover{color:var(--vert)}

/* ---------- sélecteur de langue ----------
   Quatre codes de deux lettres, à droite du menu. La langue affichée n'est
   pas un lien : elle est en vert et sans survol, pour qu'on voie où l'on est
   sans avoir à cliquer pour le découvrir.
   Attention : u2f-pages.css est chargé APRÈS cette feuille. Une règle .lg
   d'une seule classe y serait prioritaire à spécificité égale — c'est ce qui
   avait silencieusement écrasé .vign. Ne pas redéclarer .lg ailleurs. */
.lg{display:flex;gap:2px;align-items:center;margin-left:30px;
  font-size:11.5px;letter-spacing:.09em;font-weight:600}
.lg a,.lg .lg-a{padding:5px 7px;border-radius:5px;line-height:1;
  color:var(--gris);transition:color .25s,background .25s}
.lg a:hover{color:var(--blanc);background:rgba(255,255,255,.07)}
.lg .lg-a{color:var(--vert);background:rgba(210,255,197,.09)}

/* ---------- bandeaux défilants ----------
   Le défilement infini est en CSS, pas en JavaScript. Trois raisons : il
   démarre même si un CDN ne répond pas, il tourne sur les vingt-deux
   sous-pages sans qu'un script les connaisse, et il ne se bat plus avec les
   parallaxes GSAP qui écrivaient la même propriété transform sur le même ul.
   La liste contient un nombre PAIR de copies : à -50 % on est donc revenu
   exactement sur une frontière de copie, et la boucle ne montre aucun raccord.
   Toucher au nombre de copies dans _construire sans garder ce nombre pair
   rouvre le saut.
   La boucle écrit « translate », pas « transform » : ce sont deux propriétés
   distinctes que le navigateur compose. GSAP peut donc continuer à poser sa
   parallaxe de défilement en « x » (donc en transform) sur le même ul sans
   que l'une efface l'autre — c'était le bug qui figeait les quatre bandes. */
@keyframes u2f-defile{
  from{translate:0 0}
  to{translate:-50% 0}
}
.tick ul,.marq ul,.moyens ul,.fmarq ul{
  animation:u2f-defile var(--vit,30s) linear infinite}
@media (prefers-reduced-motion:reduce){
  .tick ul,.marq ul,.moyens ul,.fmarq ul{animation:none}
}

/* ---------- ticker ---------- */
.tick{border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);
  overflow:hidden;margin-top:66px;max-width:420px;margin-left:auto;margin-right:auto}
.tick ul{display:flex;gap:0;list-style:none;white-space:nowrap;
  width:max-content;padding:9px 0;will-change:transform,translate;--vit:22s}
.tick li{font-size:14.5px;color:var(--vert);padding:0 18px;display:flex;align-items:center}
.tick li::after{content:"";width:6px;height:6px;border-radius:50%;border:1.3px solid var(--vert);margin-left:36px}

/* ---------- hero ---------- */
.hero{padding-top:34px;padding-bottom:96px;position:relative}
h1{font-size:clamp(32px,5.55vw,86px);line-height:1.02;font-weight:600;letter-spacing:-.035em;
  text-transform:uppercase;margin-top:64px}
h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
h1 .ln i{display:block;font-style:normal;transform:translateY(112%);will-change:transform}
h1 .g{color:var(--vert)}
h1 .m{color:var(--gris)}

.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto;gap:40px;
  align-items:start;margin-top:56px}
.smi{width:78px;height:78px;margin-bottom:22px}
/* le visage est creux : sans ceci, le survol ne prendrait que sur le trait.
   pointer-events:all rend le disque cliquable malgré fill:none. */
.smi circle{pointer-events:all}
.smi:hover{cursor:pointer}
.lede{color:var(--gris);font-size:16.5px;max-width:40ch;line-height:1.62}
.prix{font-size:clamp(19px,2vw,26px);font-weight:600;letter-spacing:-.02em;color:var(--vert);
  font-variant-numeric:tabular-nums}
.scroll{text-align:right;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.eyes{width:56px;height:30px;margin:0 0 14px auto;display:block}
.scroll span{display:inline-block;animation:bob 1.9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:46px}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:16px 30px;
  font-size:14.5px;font-weight:600;letter-spacing:.01em;border:1.5px solid transparent;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  will-change:transform}
.btn-p{background:var(--vert);color:#000}
.btn-p:hover{background:var(--blanc)}
.btn-s{border-color:var(--bord);color:var(--blanc)}
.btn-s:hover{border-color:var(--vert);color:var(--vert)}

.faces{display:flex;margin-top:52px}
.face{width:40px;height:40px;border-radius:50%;background:var(--vert);color:#000;
  overflow:hidden;display:block;margin-left:-11px;
  border:2px solid #000;will-change:transform}
.face:first-child{margin-left:0}
.face svg{display:block;width:100%;height:100%}
/* quatre teintes de la palette, en rotation, pour que la rangée d'avatars
   ait la variété d'une vraie photo de groupe plutôt que douze pastilles
   identiques. */
.face:nth-child(4n+2){background:var(--lavande)}
.face:nth-child(4n+3){background:var(--rose)}
.face:nth-child(4n+4){background:var(--jaune)}

.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bord-2);
  border:1px solid var(--bord-2);margin-top:46px}
.badges>div{background:var(--noir);padding:26px 22px;font-size:12.5px;color:var(--gris);
  letter-spacing:.05em;text-transform:uppercase;transition:background .3s}
.badges>div:hover{background:var(--noir-3)}
.badges b{display:block;font-size:16.5px;color:var(--blanc);text-transform:none;
  letter-spacing:-.01em;margin-bottom:7px;font-weight:600}

/* Le badge suisse. La croix est dessinée en CSS plutôt qu'insérée en SVG dans
   la page : le contenu du badge reste une phrase simple, que la couche de
   traduction déplace telle quelle vers l'anglais, l'allemand et l'italien, et
   les quatre langues partagent une seule image au lieu d'en recopier le tracé
   quatre fois. */
.badges .ch b{display:flex;align-items:center;gap:8px}
.badges .ch b::before{content:"";flex:0 0 auto;width:17px;height:17px;border-radius:3px;
  background:#D52B1E url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.4 5h3.2v4.4H18v3.2h-4.4V17h-3.2v-4.4H6V9.4h4.4z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}

/* rangée de cartes couleur (calquée sur le template) */
.fan{margin-top:34px;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;
  gap:11.2px}
.fan i{width:199px;height:236px;border-radius:0;border:4px solid #000;box-shadow:none;
  padding:8.4px;opacity:0;will-change:transform;
  display:flex;flex-flow:column;justify-content:space-between;align-items:center}
.fan i:nth-child(1){background:var(--lavande)}
.fan i:nth-child(2){background:var(--rose)}
.fan i:nth-child(3){background:var(--jaune)}
.fan i > span{width:100%;display:flex;justify-content:flex-end}
.fan i > svg{width:42px;height:42px;display:block}
.fan i > span > svg{width:18px;height:18px;display:block}
.fan i > u{width:100%;display:flex;justify-content:flex-start}
.fan i > u > svg{width:18px;height:18px;display:block}

/* ---------- logos ---------- */
.logos{padding-top:104px;padding-bottom:104px;border-top:1px solid var(--bord-2)}
.lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--vert);margin-bottom:20px}
.logos h2{font-size:clamp(26px,4vw,58px);font-weight:500;letter-spacing:-.03em;line-height:1.12;
  max-width:17ch}
.marq{margin-top:62px;border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);
  overflow:hidden;padding:22px 0}
.marq ul{display:flex;list-style:none;white-space:nowrap;width:max-content;will-change:transform,translate;--vit:34s}
.marq li{font-size:clamp(20px,2.4vw,34px);font-weight:600;letter-spacing:-.02em;color:var(--gris);
  padding:0 30px;display:flex;align-items:center;transition:color .25s}
.marq li:hover{color:var(--vert)}
.marq li::after{content:"";width:8px;height:8px;border-radius:50%;border:1.6px solid var(--vert);
  margin-left:60px;opacity:.5}

/* ---------- accroche ---------- */
.accroche{padding-top:110px;padding-bottom:110px;position:relative;overflow:hidden}
.accroche .top{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start}
.accroche h2{font-size:clamp(30px,5.4vw,80px);font-weight:600;letter-spacing:-.035em;line-height:1.06;
  text-transform:uppercase}
.accroche h2 .mot{display:inline-block;color:#2c2c2c;will-change:color}
.accroche h2 em{font-style:normal}
.pmini{color:var(--gris);font-size:15px;line-height:1.6;margin-top:14px}
.stripe{width:100%;max-width:210px;height:96px;margin-top:44px;display:block}
.enleve{font-size:clamp(24px,3.6vw,48px);font-weight:700;letter-spacing:-.03em;margin-top:50px;
  display:inline-block;position:relative}
.enleve::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:4px;background:var(--vert);
  transform:scaleX(var(--trait,0));transform-origin:left}
.args{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bord-2);
  border:1px solid var(--bord-2);margin-top:76px}
.arg{background:var(--noir);padding:34px 26px 38px;min-height:172px;display:flex;flex-direction:column;
  justify-content:space-between;transition:background .35s}
.arg:hover{background:var(--noir-3)}
.arg .n{font-size:12px;letter-spacing:.14em;color:var(--vert)}
.arg p{font-size:17.5px;line-height:1.3;letter-spacing:-.02em;font-weight:500;margin-top:36px}

/* ---------- tarifs ---------- */
/* overflow-x:clip — le redressement 3D des cartes agrandit la zone
   défilable de quelques pixels ; on la borne sans toucher au débord
   vertical de l'étiquette « Le plus choisi ». */
.tarifs{padding-top:104px;padding-bottom:130px;border-top:1px solid var(--bord-2);
  overflow-x:clip}
.thead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr);gap:56px;
  align-items:end;margin-bottom:70px}
.thead h2{font-size:clamp(27px,4.3vw,62px);font-weight:500;letter-spacing:-.033em;line-height:1.1}
.note{color:var(--gris);font-size:15px;line-height:1.65;border-left:1.5px solid var(--vert);padding-left:22px}
.note b{color:var(--vert);font-weight:600}
/* la profondeur sert au redressement des cartes au défilement (mécanique
   « project-rest-parent » du template : rotationX → 0) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;
  perspective:1600px;perspective-origin:50% 0%}
.plan{background:var(--noir-2);border:1px solid var(--bord);border-radius:20px;padding:34px 28px 32px;
  position:relative;transition:border-color .5s;will-change:transform;
  display:flex;flex-direction:column}
.plan:hover{border-color:rgba(210,255,197,.5)}
.plan.best{background:var(--vert);color:#000;border-color:var(--vert)}
.tag{position:absolute;top:-14px;right:20px;background:#000;color:var(--vert);border:1.5px solid var(--vert);
  border-radius:999px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;padding:6px 15px;
  transform:rotate(3deg);font-weight:600}
.plan h3{font-size:21px;font-weight:600;letter-spacing:-.02em}
.plan .p{font-size:clamp(38px,4.4vw,56px);font-weight:700;letter-spacing:-.045em;margin:14px 0 4px;
  font-variant-numeric:tabular-nums}
.plan .p sup{font-size:.36em;font-weight:600;vertical-align:super;letter-spacing:0}
.plan .d{font-size:15px;color:var(--gris);line-height:1.55;min-height:70px}
.plan.best .d{color:rgba(0,0,0,.66)}
.plan .liv{font-size:12.5px;letter-spacing:.02em;color:var(--vert);margin:16px 0 20px}
.plan.best .liv{color:rgba(0,0,0,.72)}
.go{display:block;text-align:center;border-radius:999px;padding:15px;font-weight:600;font-size:14.5px;
  background:var(--vert);color:#000;will-change:transform;
  transition:background .35s var(--ease),color .35s var(--ease)}
.plan.best .go{background:#000;color:var(--vert)}
.go:hover{background:var(--blanc)}
.plan.best .go:hover{background:#1a1a1a}
.gar{display:block;text-align:center;font-size:11.5px;color:var(--gris);margin-top:13px;letter-spacing:.03em}
.plan.best .gar{color:rgba(0,0,0,.6)}
.feat{list-style:none;margin-top:26px;border-top:1px solid var(--bord);padding-top:22px}
.plan.best .feat{border-color:rgba(0,0,0,.18)}
.feat li{font-size:14px;padding:7px 0 7px 25px;position:relative;color:#dcdcdc}
.plan.best .feat li{color:#141414}
.feat li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--vert)}
.plan.best .feat li::before{border-color:rgba(0,0,0,.55)}
.feat li.ttl{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--vert);
  padding-left:0;padding-bottom:12px}
.plan.best .feat li.ttl{color:rgba(0,0,0,.62)}
.feat li.ttl::before{display:none}
.feat li.no{color:#575757;text-decoration:line-through}
.plan.best .feat li.no{color:rgba(0,0,0,.32)}
.feat li.no::before{border-color:#3a3a3a}
.plan.best .feat li.no::before{border-color:rgba(0,0,0,.25)}
/* les trois cartes portent les mêmes rubriques, dans le même ordre : rubrique
   à gauche, valeur à droite, une ligne de séparation entre chacune. C'est ce
   qui rend les colonnes comparables d'un coup d'œil. */
.feat li.cmp{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0}
.feat li.cmp::before{display:none}
.feat li.cmp+li.cmp{border-top:1px solid var(--bord-2)}
.plan.best .feat li.cmp+li.cmp{border-top-color:rgba(0,0,0,.11)}
.feat li.cmp span{font-size:12.5px;letter-spacing:.02em;color:var(--gris);white-space:nowrap}
.plan.best .feat li.cmp span{color:rgba(0,0,0,.55)}
.feat li.cmp b{font-weight:500;text-align:right;color:var(--blanc)}
.plan.best .feat li.cmp b{color:#000}
.plan .socle{font-size:12.5px;line-height:1.55;color:var(--gris);margin-top:auto;padding-top:20px}
.plan .socle a{color:var(--vert);border-bottom:1px solid rgba(210,255,197,.38)}
.plan.best .socle{color:rgba(0,0,0,.62)}
.plan.best .socle a{color:#000;border-bottom-color:rgba(0,0,0,.35)}

/* =====================================================================
   SECTIONS REPRISES DU FICHIER D'ALEX
   (même vocabulaire visuel que ci-dessus : filets d'un pixel, capitales
   serrées, aplats de la palette, pastilles vertes)
   ===================================================================== */

.sec{padding-top:104px;padding-bottom:104px;border-top:1px solid var(--bord-2)}
.h2{font-size:clamp(27px,4.3vw,62px);font-weight:500;letter-spacing:-.033em;line-height:1.1;
  max-width:20ch}
.sub{color:var(--gris);font-size:16.5px;line-height:1.6;margin-top:18px;max-width:56ch}
.cta-l{display:inline-flex;align-items:center;gap:9px;margin-top:44px;font-weight:600;font-size:15px;
  border-bottom:1.5px solid var(--vert);padding-bottom:5px;color:var(--vert)}

/* ---------- d'ignoré à incontournable : la comparaison ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:64px}
.col{border:1px solid var(--bord);border-radius:20px;padding:32px 28px 34px;background:var(--noir-2)}
.col.nous{background:var(--vert);color:#000;border-color:var(--vert)}
.col h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:22px}
.col ul{list-style:none}
.col li{font-size:15.5px;padding:10px 0 10px 26px;position:relative;color:#cfcfcf;
  border-top:1px solid var(--bord)}
.col li:first-child{border-top:0}
.col.nous li{color:#101010;border-color:rgba(0,0,0,.15)}
.col li::before{content:"";position:absolute;left:0;top:18px;width:9px;height:2px;background:#6a6a6a}
.col.nous li::before{width:9px;height:9px;top:15px;border-radius:50%;background:none;
  border:1.6px solid rgba(0,0,0,.6)}
.puces{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.puce{border:1px solid var(--bord);border-radius:999px;padding:9px 17px;font-size:13.5px;
  color:#d6d6d6;transition:border-color .35s,color .35s}
.puce:hover{border-color:var(--vert);color:var(--vert)}

/* ---------- forfait complet ---------- */
.incl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bord-2);
  border:1px solid var(--bord-2);margin-top:66px}
.incl>div{background:var(--noir);padding:30px 24px 34px;transition:background .35s}
.incl>div:hover{background:var(--noir-3)}
.incl b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.incl span{font-size:14.5px;color:var(--gris);line-height:1.55}

/* ---------- réalisations ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:9px;margin-top:38px}
.filtres button{border:1px solid var(--bord);border-radius:999px;padding:8px 16px;font-size:13px;
  font-weight:500;color:#cfcfcf;background:none;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:7px;
  transition:background .25s,color .25s,border-color .25s}
.filtres button span{font-size:11px;color:var(--gris);font-variant-numeric:tabular-nums}
.filtres button:hover{border-color:var(--vert);color:#fff}
.filtres button[aria-pressed="true"]{background:var(--vert);color:#000;border-color:var(--vert)}
.filtres button[aria-pressed="true"] span{color:rgba(0,0,0,.55)}
.filtres button:focus-visible{outline:2px solid var(--vert);outline-offset:3px}
.cases-vide{margin-top:34px;color:var(--gris);font-size:15px}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.cas{border:1px solid var(--bord);border-radius:20px;overflow:hidden;background:var(--noir-2);
  transition:border-color .3s,transform .3s}
.cas:hover{border-color:var(--vert);transform:translateY(-3px)}
.cas[hidden]{display:none}
.vign{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--noir-3);
  display:grid;place-items:center}
.vign svg{width:100%;height:100%;display:block}
.cas .meta{padding:20px 22px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cas .meta b{font-size:16.5px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.cas .meta span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);
  white-space:nowrap}
/* second bandeau : l'offre, son prix, son étendue — la carte devient lisible
   sans avoir à l'ouvrir. */
.cas .meta-2{margin:0 22px;padding:13px 0 20px;border-top:1px solid var(--bord)}
.cas .meta-2 span{font-size:12px;letter-spacing:.03em;text-transform:none;white-space:normal}
/* La vignette d'un site réellement en ligne. Le chemin normal est désormais la
   capture (règle plus bas) ; ce qui suit est le repli, gardé pour un site
   ajouté sans image : le site lui-même, chargé dans un cadre de 1440 px puis
   réduit par homothétie (--k, posé par u2f-pages.js).
   Le sélecteur porte deux classes à dessein : u2f-pages.css, chargé après
   celui-ci, remet « .vign » en display:block. Une seule classe perdrait donc
   l'arbitrage. */
.cas .vign-site{display:block;background:var(--noir-3)}
.cas .vign-site iframe{position:absolute;top:0;left:0;width:1440px;border:0;z-index:2;
  transform:scale(var(--k,.26));transform-origin:top left;pointer-events:none;
  opacity:0;transition:opacity .7s var(--ease),top 7s linear}
.cas .vign-site.est-prete iframe{opacity:1}
.cas:hover .vign-site.est-prete iframe{top:var(--defile,0)}
/* La même vignette, servie par une capture d'écran (donnees.SITES → capture).
   Elle prend la place du cadre vivant, mais sans son coût : trois navigateurs
   complets chargés puis animés faisaient ramer la page entière. L'image porte
   le premier écran du site — ce qu'une vignette doit montrer — et se cadre en
   couverture, ancrée en haut : aucune bande noire, quel que soit le rapport de
   forme de la carte. Quand la capture est là, aucune iframe n'est écrite et la
   vignette porte « est-prete » dès le départ. */
.cas .vign-site img.cap{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  display:block;border:0;z-index:2;pointer-events:none;
  transform:scale(1);transition:transform .6s var(--ease)}
.cas:hover .vign-site img.cap{transform:scale(1.04)}
/* Le fond d'attente, un voile à la couleur du site (vignettes.attente). Il
   tient la vignette jusqu'à l'arrivée du vrai site, qui part à l'approche de
   l'écran — plus au survol : celui qui ne survolait pas ne voyait jamais le
   travail. Une maquette dessinée occupait cette place ; elle ressemblait trop
   à un site fini pour être honnête. Le fond ne disparaît pas quand le site
   arrive : il se pose par-dessus, ce qui évite de voir le noir au travers
   pendant le fondu. Un halo dans le vert du site marque l'attente. */
.cas .vign-site>svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.cas .vign-site::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 120% at 50% 0%,rgba(210,255,197,.10),transparent 62%);
  transition:opacity .7s var(--ease)}
.cas .vign-site.est-prete::before{opacity:0}
/* Le voile d'aperçu, posé sur la vignette. La carte entière était un lien vers
   le site : cliquer la preuve du travail faisait quitter le site, et sur le
   domaine d'à côté plus rien ne ramène ici. La vignette ouvre donc l'aperçu
   plein écran — le vrai site, chez nous — et « Ouvrir ↗ », en bas de carte,
   garde le chemin vers le site en propre.
   Au clavier, le voile se montre dès qu'il prend le focus : sans cela on
   tabulerait sur un bouton invisible. */
.cas .vign-voile{position:absolute;inset:0;width:100%;border:0;cursor:pointer;z-index:3;
  background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.74) 100%);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;
  opacity:0;transition:opacity .35s var(--ease)}
.cas .vign-voile span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#000;background:var(--vert);padding:9px 17px;border-radius:999px;
  font-weight:600;line-height:1}
.cas:hover .vign-voile,.cas .vign-voile:focus-visible{opacity:1}
/* Sur un écran tactile il n'y a pas de survol : le voile resterait invisible
   et l'aperçu inatteignable. On le montre alors en permanence, plus discret. */
@media (hover:none){
  .cas .vign-voile{opacity:1;
    background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.6) 100%)}
}
/* « Ouvrir ↗ » n'est plus un simple mot dans une carte cliquable : c'est le
   lien vers le site, seul de son espèce dans la carte. Il se voit comme tel. */
.cas .meta-2 .cas-lien{color:var(--vert);font-size:12px;letter-spacing:.03em;
  white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:1px;
  transition:border-color .25s var(--ease)}
.cas .meta-2 .cas-lien:hover{border-bottom-color:var(--vert)}
/* Une pastille .vign-hote se posait ici, en bas à gauche de l'aperçu, avec
   l'adresse de l'hébergeur : « smash-house-984.netlify.app ». Elle a été
   retirée de p_accueil.py — le nom de l'hébergeur n'apprend rien au visiteur
   et faisait passer un site fini pour un essai sur un compte gratuit, et la
   ligne juste en dessous donne déjà le nom du site. La règle part avec elle. */
/* l'état de la carte, posé sur la vignette : ouvrable maintenant, ou pas encore.
   Le badge est frère de la vignette et non son enfant — voir p_accueil.py — et
   se cale donc sur la carte, qu'on rend relative pour lui. Comme la vignette
   est le premier élément de la carte et qu'elle en occupe toute la largeur, se
   caler sur l'une ou sur l'autre revient au même à l'œil. Le sélecteur n'est
   pas préfixé : le même badge sert à l'accueil (.cas) et à la page
   réalisations (.proj). */
.cas,.proj{position:relative}
.etat{position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;line-height:1}
.etat-on{background:var(--vert);color:#000}
.etat-on::before{content:"";width:6px;height:6px;border-radius:50%;background:#000}
.etat-off{background:rgba(0,0,0,.62);color:var(--gris);border:1px solid var(--bord);
  backdrop-filter:blur(3px)}
/* Les vignettes dessinées portent une barre de navigation factice tout en haut,
   exactement là où se pose le badge : il la coupait en deux et un bout de barre
   dépassait sur sa droite, ce qui avait l'air d'un défaut d'affichage. Un voile
   dégradé sur la première bande de la vignette efface ce bout et donne au badge
   un fond franc. Sur les vignettes-adresse, qui ne dessinent rien, le voile est
   invisible. */
.vign::after{content:"";position:absolute;inset:0 0 auto;height:64px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,0))}

/* ---------- processus ---------- */
.etapes{margin-top:62px;border-top:1px solid var(--bord)}
.etape{display:grid;grid-template-columns:130px 300px minmax(0,1fr);gap:34px;
  padding:38px 0 40px;border-bottom:1px solid var(--bord);transition:background .35s}
.etape:hover{background:var(--noir-2)}
.etape .n{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--vert)}
.etape h3{font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.etape p{color:var(--gris);font-size:16px;line-height:1.62}

/* ---------- ça rapporte / ça demande ---------- */
.bal{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bord-2);
  border:1px solid var(--bord-2);margin-top:62px}
.bal>div{background:var(--noir);padding:34px 28px 38px}
.bal h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--vert);margin-bottom:26px}
.bal li{list-style:none;font-size:16px;line-height:1.45;padding:14px 0 14px 26px;position:relative;
  border-top:1px solid var(--bord-2)}
.bal li:first-of-type{border-top:0}
.bal li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--vert)}
.franc{margin-top:40px;border-left:1.5px solid var(--vert);padding-left:22px;color:var(--gris);
  font-size:15.5px;line-height:1.65;max-width:78ch}

/* ---------- garantie ---------- */
.gbloc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center}
.gbloc .h2{max-width:14ch}
/* Le sceau. « overflow:visible » parce que l'onde lancée par u2f.js sort du
   cadre du viewBox en s'élargissant, et qu'un SVG rogne ses enfants par
   défaut. La lueur n'arrive qu'avec « est-scelle », posée par le script à
   l'instant où la coche s'écrit : avant, il n'y a rien à célébrer. */
.sceau{width:100%;max-width:300px;justify-self:end;overflow:visible}
.sc-disque{transition:filter .9s cubic-bezier(.16,1,.3,1)}
.sceau.est-scelle .sc-disque{filter:drop-shadow(0 0 30px rgba(210,255,197,.45))}
@media (prefers-reduced-motion:reduce){.sc-disque{transition:none}}
.moyens{margin-top:60px;border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);
  overflow:hidden;padding:20px 0}
.moyens ul{display:flex;list-style:none;white-space:nowrap;width:max-content;will-change:transform,translate;--vit:26s}
.moyens li{font-size:17px;font-weight:600;letter-spacing:.02em;color:var(--gris);padding:0 26px;
  display:flex;align-items:center;transition:color .25s}
.moyens li:hover{color:var(--vert)}

/* ---------- équipe ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:62px}
.mbr{border:1px solid var(--bord);border-radius:20px;padding:26px 24px 28px;background:var(--noir-2);
  transition:border-color .4s}
.mbr:hover{border-color:rgba(210,255,197,.5)}
.mbr .av{width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--vert);margin-bottom:22px}
.mbr:nth-child(3n+2) .av{background:var(--lavande)}
.mbr:nth-child(3n+3) .av{background:var(--rose)}
.mbr .av svg{display:block;width:100%;height:100%}
.mbr b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--vert);
  margin-bottom:10px;font-weight:500}
.mbr em{font-style:normal;display:block;font-size:18px;font-weight:600;letter-spacing:-.02em;
  margin-bottom:8px}
.mbr span{font-size:14.5px;color:var(--gris);line-height:1.55}

/* ---------- avis ---------- */
.avis-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.avis-c{border:1px solid var(--bord);border-radius:20px;padding:28px 26px 30px;
  background:var(--noir-2);will-change:transform}
.avis-c .et{display:flex;gap:4px;margin-bottom:18px}
.avis-c .et i{width:13px;height:13px;background:var(--vert);border-radius:2px;display:block}
.avis-c h3{font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
.avis-c p{color:var(--gris);font-size:15.5px;line-height:1.6}
.avis-c .qui{margin-top:22px;padding-top:18px;border-top:1px solid var(--bord);
  font-size:13px;color:var(--gris)}
.avis-c .qui b{display:block;color:var(--blanc);font-weight:600;font-size:14px;margin-bottom:4px}

/* ---------- méthode client local ---------- */
.meth{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.bonus{display:inline-block;background:var(--vert);color:#000;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;padding:7px 14px;border-radius:999px;margin-bottom:24px}
.meth ul{list-style:none;margin-top:34px}
.meth li{font-size:16px;line-height:1.45;padding:14px 0 14px 26px;position:relative;
  border-top:1px solid var(--bord-2)}
.meth li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--vert)}
.couv{border:1px solid var(--bord);border-radius:20px;background:var(--noir-2);padding:42px 34px 46px;
  position:sticky;top:96px}
.couv .mk{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--vert);margin-bottom:70px}
.couv h3{font-size:clamp(24px,2.8vw,36px);font-weight:700;letter-spacing:-.035em;line-height:1.05;
  text-transform:uppercase;margin-bottom:20px}
.couv p{color:var(--gris);font-size:15.5px;line-height:1.6}
.couv .bar{height:5px;background:var(--vert);margin-top:44px;transform-origin:left}

/* ---------- FAQ ---------- */
.faq{margin-top:56px;border-top:1px solid var(--bord)}
.qa{border-bottom:1px solid var(--bord)}
.qa summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-size:clamp(17px,2vw,23px);font-weight:600;letter-spacing:-.022em;line-height:1.3;
  transition:color .3s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--vert)}
.qa summary::after{content:"";position:absolute;right:6px;top:50%;width:15px;height:15px;
  margin-top:-7px;background:
    linear-gradient(var(--vert),var(--vert)) center/15px 1.6px no-repeat,
    linear-gradient(var(--vert),var(--vert)) center/1.6px 15px no-repeat;
  transition:transform .4s var(--ease)}
.qa[open] summary::after{transform:rotate(135deg)}
.qa .rep{padding:0 60px 30px 0;color:var(--gris);font-size:16px;line-height:1.68}
.qa .rep p+p{margin-top:14px}

/* ---------- pied de page ---------- */
footer{border-top:1px solid var(--bord-2);padding-top:86px;padding-bottom:44px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:44px}
.fgrid h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--vert);
  margin-bottom:22px;font-weight:500}
.fgrid li{list-style:none;padding:7px 0;font-size:15px;color:#c9c9c9;transition:color .25s}
.fgrid li:hover{color:var(--vert)}
.fgrid .intro{color:var(--gris);font-size:15.5px;line-height:1.62;margin-top:20px;max-width:38ch}
.fgrid .serv{margin-top:22px;font-size:15px;color:#c9c9c9}
.fgrid .serv a{color:var(--vert)}
.fbas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:74px;
  padding-top:26px;border-top:1px solid var(--bord-2);font-size:13px;color:var(--gris)}
.fmarq{margin-top:64px;overflow:hidden}
.fmarq ul{display:flex;list-style:none;white-space:nowrap;width:max-content;will-change:transform,translate;--vit:30s}
.fmarq li{font-size:clamp(56px,11vw,168px);font-weight:800;letter-spacing:-.045em;line-height:.94;
  color:#151515;padding-right:44px}

/* ---------- révélations ---------- */
.rv{opacity:0}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .hgrid{grid-template-columns:1fr 1fr;gap:34px}
  .scroll{display:none}
  .args{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr;max-width:520px}
  .thead{grid-template-columns:1fr;gap:30px;align-items:start}
  .accroche .top{grid-template-columns:1fr;gap:26px}
  .incl{grid-template-columns:repeat(2,1fr)}
  .cases{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:repeat(2,1fr)}
  .etape{grid-template-columns:96px minmax(0,1fr);gap:22px}
  .etape p{grid-column:2}
  .gbloc{grid-template-columns:1fr;gap:38px}
  .sceau{justify-self:start;max-width:220px}
  .meth{grid-template-columns:1fr;gap:38px}
  .couv{position:static}
  .fgrid{grid-template-columns:1fr 1fr;gap:34px}
  .avis-g{grid-template-columns:1fr 1fr}
  .avis-g .avis-c:last-child{grid-column:1/-1}
}
/* =====================================================================
   TÉLÉPHONE — ce que le site doit cesser de demander à la machine

   Le site se rechargeait tout seul sur iPhone, avec la page « Un problème
   récurrent est survenu ». Ce n'est pas une erreur de script : c'est iOS qui
   tue l'onglet quand il dépasse la mémoire vidéo qu'il a le droit d'occuper.
   Deux postes la mangeaient sur toutes les pages, en plus des aperçus de
   sites traités dans u2f-pages.js.

   1. Le flou d'arrière-plan de l'en-tête collant. Il est recalculé sur toute
      la largeur de l'écran à chaque image du défilement, et le défilement
      lissé produit une image toutes les 16 ms sans interruption. Sur un
      téléphone, on le remplace par un noir presque opaque : à cette taille
      personne ne verra la différence, et le coût tombe à zéro.

   2. Les « will-change ». Chacun demande au navigateur de garder l'élément
      sur une couche graphique séparée, en permanence. Les quatre bandeaux
      défilants font 8 000 px de large : à la densité d'un écran Retina, cela
      représente une vingtaine de mégaoctets chacun, réservés en continu.
      Sur ordinateur c'est un bon échange contre la fluidité ; sur téléphone
      c'est ce qui fait déborder le vase. On rend la main au navigateur, qui
      promeut ce qu'il veut au moment où il en a besoin.
   ===================================================================== */
@media(max-width:900px){
  header{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(0,0,0,.96)}
  .etat-off{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(0,0,0,.78)}
  .marq ul,.moyens ul,.fmarq ul,h1 .ln i,.accroche h2 .mot,
  .fan i,.cas,.btn,.pastille,.sceau{will-change:auto}
}
@media(max-width:720px){
  .wrap{padding-left:18px;padding-right:18px}
  .topnav{display:none}
  .lg{margin-left:auto;margin-right:14px;gap:0;font-size:11px}
  .lg a,.lg .lg-a{padding:5px 5px}
  .hgrid{grid-template-columns:minmax(0,1fr)}
  .badges{grid-template-columns:1fr 1fr}
  .args{grid-template-columns:1fr}
  .fan{gap:8px;margin-top:26px}
  .fan i{width:150px;height:178px}
  .fan i > svg{width:34px;height:34px}
  .duo{grid-template-columns:1fr}
  .incl{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .bal{grid-template-columns:1fr}
  .avis-g{grid-template-columns:1fr}
  .avis-g .avis-c:last-child{grid-column:auto}
  .etape{grid-template-columns:1fr;gap:12px;padding:30px 0 32px}
  .etape p{grid-column:auto}
  .fgrid{grid-template-columns:1fr}
  .qa .rep{padding-right:26px}
}
/* sous 520px les trois cartes ne tiennent plus côte à côte : on les
   réduit en gardant la proportion 199 × 236 du template, plutôt que de
   laisser la troisième passer seule à la ligne. */
@media(max-width:520px){
  .fan{gap:6px}
  .fan i{width:104px;height:123px;border-width:3px;padding:6px}
  .fan i > svg{width:26px;height:26px}
  .fan i > span > svg,.fan i > u > svg{width:13px;height:13px}
}
/* la rangée d'avatars a une largeur minimale de 359px : on la resserre
   sous 420px, sinon elle force la grille à déborder de 20px. */
@media(max-width:420px){
  .face{width:34px;height:34px;font-size:12px;margin-left:-9px}
}
/* Le titre tient sur quatre lignes non sécables : si l'une déborde, elle se
   coupe en deux à l'intérieur de son masque et la révélation se voit mal.
   Sous 380px, le plancher de 32px du clamp est trop haut d'un cheveu — on
   descend à 29px. L'allemand compose des mots plus longs (GROSSAGENTUR) et
   réclame un cran de plus. */
@media(max-width:380px){
  h1{font-size:29px}
  html[lang^="de"] h1{font-size:26px}
}
/* =====================================================================
   WHATSAPP — bulle flottante et volet
   =====================================================================
   La bulle est le seul élément vert plein du site : elle doit se distinguer
   du contenu sans le recouvrir. Elle est donc posée en bas à droite, à la
   marge du texte, et elle est la dernière chose du document — un lecteur
   d'écran la rencontre après le contenu, pas avant.

   Le z-index reste sous celui du menu mobile et des modales : quand une
   fenêtre s'ouvre, la bulle passe derrière, elle ne flotte pas par-dessus. */
.wa{position:fixed;right:20px;bottom:20px;z-index:60;
  display:flex;flex-flow:column;align-items:flex-end;gap:12px}

.wa-bulle{width:56px;height:56px;border:none;border-radius:50%;cursor:pointer;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 26px rgba(0,0,0,.5);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.wa-bulle:hover{transform:scale(1.07);box-shadow:0 10px 32px rgba(37,211,102,.35)}
.wa-bulle:focus-visible{outline:2px solid var(--blanc);outline-offset:3px}

/* Le volet. « hidden » suffit à le cacher tant que le script n'a pas pris la
   main ; l'attribut est retiré à l'ouverture, et c'est la classe qui anime. */
.wa-volet[hidden]{display:none}
.wa-volet{position:relative;width:min(320px,calc(100vw - 40px));
  background:var(--noir-2);border:1px solid var(--bord);
  padding:26px 22px 22px;display:flex;flex-flow:column;gap:10px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
.wa-volet.ouvert{opacity:1;transform:none}

.wa-x{position:absolute;top:12px;right:12px;width:28px;height:28px;
  background:none;border:none;color:var(--gris);cursor:pointer;
  display:grid;place-items:center;transition:color .25s}
.wa-x:hover{color:var(--blanc)}

.wa-nom{font-size:15px;font-weight:600;color:var(--blanc);letter-spacing:-.01em}
.wa-dispo{font-size:12.5px;color:#25D366;letter-spacing:.02em}
.wa-msg{font-size:14px;color:var(--gris);line-height:1.55;margin-top:6px}
.wa-volet label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);margin-top:6px}
.wa-volet textarea{width:100%;background:var(--noir);color:var(--blanc);
  border:1px solid var(--bord-2);padding:11px 12px;font-family:var(--sans);
  font-size:14px;line-height:1.5;resize:vertical;min-height:74px;
  transition:border-color .25s}
.wa-volet textarea:focus{outline:none;border-color:#25D366}
.wa-go{margin-top:6px;background:#25D366;color:#000;text-align:center;
  padding:13px 18px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;transition:background .25s}
.wa-go:hover{background:#1fb457}

/* Sur téléphone la bulle se rapproche du bord et le volet prend la largeur
   utile, sans jamais dépasser — c'est exactement le débordement horizontal
   qu'on vient de corriger ailleurs. */
@media(max-width:520px){
  .wa{right:14px;bottom:14px}
  .wa-bulle{width:52px;height:52px}
  .wa-volet{width:calc(100vw - 28px)}
}

@media(prefers-reduced-motion:reduce){
  .wa-bulle:hover{transform:none}
  .wa-volet{transition:none;opacity:1;transform:none}
  .rv{opacity:1;transform:none}
  h1 .ln i{transform:none}
  .scroll span{animation:none}
  .fan i{opacity:1}
  .accroche h2 .mot{color:var(--blanc)}
  .enleve::after{--trait:1}
  .pointeur,.anneau{display:none}
}