/* =====================================================================
   Up2Front — couche « pages intérieures »
   u2f.css porte la direction artistique et l'accueil. Ce fichier n'ajoute
   que ce dont les autres pages ont besoin : menu mobile, hero de page,
   prose légale, tunnel de commande, formulaires.
   Aucun sélecteur de u2f.css n'est redéfini, sauf mention explicite.
   ===================================================================== */

/* ---------- accessibilité : lien d'évitement ---------- */
.saut-contenu{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--vert);color:#000;padding:12px 20px;border-radius:0 0 8px 0;
  font-size:14px;font-weight:600}
.saut-contenu:focus{left:0}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px}

/* ---------- en-tête : lien actif et bouton d'appel ---------- */
.topnav{align-items:center}
.topnav .est-actif{color:var(--vert)}
/* Le bouton d'appel est écrit « .topnav a.nav-cta » et non « .nav-cta ». Ce
   n'est pas du zèle : u2f.css porte « .topnav a:hover{color:var(--vert)} », de
   spécificité (0,2,1). « .nav-cta:hover » ne pèse que (0,2,0) et perdait, même
   en étant chargé après — d'où un texte vert sur un fond vert, illisible, au
   survol. Le préfixe fait passer la règle à (0,3,1) et elle gagne. */
.topnav a.nav-cta{border:1.4px solid var(--bord);border-radius:999px;
  padding:9px 18px;
  transition:border-color .3s,color .3s,background .3s,font-weight .3s,padding .3s}
.topnav a.nav-cta::before{display:none}
/* Le gras au survol coûte 4,1 px de largeur — mesuré sur « Voir les tarifs »
   en Mona Sans, poids 400 puis 700. Sans rien faire, la pastille s'élargit et
   pousse le sélecteur de langue à sa droite : un sursaut à chaque passage de
   souris. On reprend donc ces 4 px sur le padding, 2 de chaque côté, et la
   pastille garde exactement sa largeur. Les autres langues ont des libellés
   de longueur voisine, donc l'écart résiduel reste sous le pixel. */
.topnav a.nav-cta:hover{background:var(--vert);border-color:var(--vert);
  color:#000;font-weight:700;padding:9px 16px}

/* ---------- menu mobile ---------- */
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--bord);
  border-radius:999px;cursor:pointer;flex-flow:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:17px;height:1.6px;background:var(--blanc);
  transition:transform .3s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
.menu-mobile{display:none;flex-flow:column;gap:2px;padding:10px 26px 26px;
  border-top:1px solid var(--bord-2)}
.menu-mobile[hidden]{display:none}
.menu-mobile a{padding:14px 0;font-size:19px;font-weight:600;letter-spacing:-.02em;
  border-bottom:1px solid var(--bord-2)}
.menu-mobile .mm-cta{border-bottom:none;margin-top:16px;background:var(--vert);color:#000;
  border-radius:999px;text-align:center;padding:16px}

/* ---------- hero des pages intérieures ---------- */
.hero-page{padding-bottom:64px}
.hero-page h1{margin-top:34px;font-size:clamp(30px,4.6vw,68px)}
.hero-page .hgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:44px}
.sur-titre{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--vert);
  margin-top:56px}
.fil{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);
  padding-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fil a{transition:color .25s}
.fil a:hover{color:var(--vert)}
.fil span{color:var(--blanc)}
.fil .sep{color:#4a4c4e}
/* la maquette posée dans le héros d'une étude de cas : bridée, sinon elle
   repousse les boutons hors de l'écran. */
.vign-hero{display:block;max-width:400px;margin:0 0 26px}

/* ---------- sections génériques ---------- */
.sec{padding-top:88px;padding-bottom:88px;border-top:1px solid var(--bord-2)}
.sec > h2,.sec-t{font-size:clamp(24px,3vw,42px);font-weight:600;letter-spacing:-.03em;
  line-height:1.08;max-width:22ch;margin-bottom:14px}
.sec-c{color:var(--gris);max-width:56ch;font-size:16.5px;line-height:1.62}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  flex-wrap:wrap;margin-bottom:44px}

/* ---------- prose (pages légales, articles) ---------- */
.prose{max-width:76ch;padding-bottom:96px}
.prose h2{font-size:clamp(21px,2.4vw,30px);font-weight:600;letter-spacing:-.025em;
  margin-top:52px;margin-bottom:14px;line-height:1.16}
.prose h3{font-size:17.5px;font-weight:600;margin-top:32px;margin-bottom:8px}
.prose p,.prose li{color:var(--gris);font-size:16.5px;line-height:1.72}
.prose p{margin-bottom:15px}
.prose ul,.prose ol{margin:0 0 18px 0;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:26px;margin-bottom:9px}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;border:1.4px solid var(--vert)}
.prose ol{counter-reset:n}
.prose ol li{position:relative;padding-left:30px;margin-bottom:9px;counter-increment:n}
.prose ol li::before{content:counter(n) ".";position:absolute;left:0;color:var(--vert);
  font-variant-numeric:tabular-nums}
.prose strong{color:var(--blanc);font-weight:600}
.prose a:not(.btn){color:var(--vert);text-decoration:underline;text-underline-offset:3px}
.prose hr{border:none;border-top:1px solid var(--bord-2);margin:44px 0}
.prose .maj{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);
  border:1px solid var(--bord-2);border-radius:999px;padding:8px 16px;display:inline-block}

/* ---------- cartes en grille ---------- */
.grille{display:grid;gap:18px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.carte{border:1px solid var(--bord-2);background:var(--noir-2);padding:30px 26px;
  transition:border-color .35s,background .35s;display:flex;flex-flow:column;gap:10px}
a.carte:hover{border-color:var(--vert);background:var(--noir-3)}
.carte h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
.carte p{color:var(--gris);font-size:15.5px;line-height:1.6}
.carte .kpi{font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:-.035em;
  color:var(--vert);font-variant-numeric:tabular-nums;line-height:1}
.carte .eti{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.carte .fleche{margin-top:auto;padding-top:16px;font-size:13.5px;color:var(--vert)}

/* ---------- avis clients ----------
   Un avis se lit d'abord par sa citation, ensuite par sa signature. La barre
   verte à gauche marque la citation sans guillemets décoratifs, qui à cette
   taille de texte deviennent du bruit. La signature reste discrète : c'est le
   lien « Voir son site » qui doit attirer l'œil, parce que c'est lui qui rend
   l'avis vérifiable — un avis qu'on ne peut pas recouper ne vaut rien. */
.avis{border:1px solid var(--bord-2);background:var(--noir-2);padding:30px 26px;
  display:flex;flex-flow:column;gap:18px;margin:0;
  transition:border-color .35s,background .35s}
.avis:hover{border-color:var(--vert);background:var(--noir-3)}
.avis blockquote{margin:0;border-left:2px solid var(--vert);padding-left:18px}
.avis blockquote p{color:var(--blanc);font-size:16.5px;line-height:1.62;
  letter-spacing:-.01em}
.avis figcaption{margin-top:auto;font-size:13.5px;color:var(--gris);line-height:1.55}
.avis figcaption b{display:block;color:var(--blanc);font-weight:600;font-size:15px;
  margin-bottom:3px}
.avis figcaption a{color:var(--vert);text-decoration:underline;text-underline-offset:3px}

/* La note reprise d'ailleurs. Elle est encadrée et sa source est cliquable :
   le visiteur doit voir d'un coup d'œil que ce chiffre ne vient pas d'ici. */
.note-src{border:1px solid var(--bord-2);border-left:2px solid var(--vert);
  background:var(--noir-2);padding:20px 24px;margin-top:24px}
.note-src p{color:var(--gris);font-size:14.5px;line-height:1.6;margin:0}
.note-src b{color:var(--blanc);font-weight:600;font-size:16.5px;
  font-variant-numeric:tabular-nums}
.note-src a{color:var(--vert);text-decoration:underline;text-underline-offset:3px}

/* vignette de projet : le dessin remplace la photo (aucun droit à acquérir) */
.vign{aspect-ratio:4/3;background:var(--noir-3);border:1px solid var(--bord-2);
  overflow:hidden;display:block;position:relative}
.vign svg{width:100%;height:100%;display:block}
.proj{display:flex;flex-flow:column;gap:0}
.proj .meta{display:flex;justify-content:space-between;gap:14px;padding-top:14px;
  font-size:13px;color:var(--gris);letter-spacing:.04em;text-transform:uppercase}
.proj h3{font-size:22px;font-weight:600;letter-spacing:-.025em;padding-top:6px}
.proj:hover .vign{border-color:var(--vert)}

/* ---------- tunnel de commande ---------- */
.etapes-fil{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gris);padding-top:26px}
.etapes-fil b{color:var(--vert);font-weight:600}
.etapes-fil i{font-style:normal;opacity:.4}

.cmd{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:26px;
  align-items:start;padding-bottom:96px}
.panneau{border:1px solid var(--bord-2);background:var(--noir-2);padding:34px 30px}
.panneau > h2{font-size:23px;font-weight:600;letter-spacing:-.025em;margin-bottom:8px}
.panneau > p.aide{color:var(--gris);font-size:15.5px;line-height:1.6;margin-bottom:26px}

.recap{position:sticky;top:96px;border:1px solid var(--bord);background:var(--noir-2);padding:30px 26px}
.recap h2{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
  margin-bottom:18px}
.recap .offre{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:19px;font-weight:600;letter-spacing:-.025em;padding-bottom:14px;
  border-bottom:1px solid var(--bord-2)}
.recap .offre span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--gris)}
.recap .ligne{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--bord-2);font-size:15px;color:var(--gris)}
.recap .ligne span:last-child{color:var(--blanc);font-variant-numeric:tabular-nums;white-space:nowrap}
.recap .total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-top:18px;margin-top:6px}
.recap .total span:first-child{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.recap .total b{font-size:30px;font-weight:600;letter-spacing:-.03em;color:var(--vert);
  font-variant-numeric:tabular-nums}
.recap .note{color:var(--gris);font-size:13.5px;line-height:1.6;margin-top:14px}

.opt{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--bord-2);
  padding:20px;cursor:pointer;transition:border-color .3s,background .3s;margin-bottom:12px}
.opt:hover{border-color:var(--bord)}
.opt:has(input:checked){border-color:var(--vert);background:rgba(210,255,197,.045)}
.opt input{margin-top:4px;accent-color:#d2ffc5;width:17px;height:17px;flex:none}
.opt .t{font-size:16px;font-weight:600;letter-spacing:-.01em;flex:1 1 auto;min-width:0}
.opt .d{display:block;font-weight:400;color:var(--gris);font-size:14.5px;line-height:1.55;margin-top:5px}
.opt .p{margin-left:auto;color:var(--vert);font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap}

.champ{margin-bottom:18px}
.champ label{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris);margin-bottom:7px}
.champ input,.champ select,.champ textarea{width:100%;background:var(--noir);color:var(--blanc);
  border:1px solid var(--bord-2);padding:14px 16px;font:inherit;font-size:15.5px;
  border-radius:0;transition:border-color .3s}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--vert)}
.champ textarea{min-height:120px;resize:vertical}
.champ .indice{color:var(--gris);font-size:13.5px;margin-top:6px}
.duo-champ{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.btn-large{width:100%;justify-content:center;padding:19px 30px;font-size:16px;
  border:none;cursor:pointer;font-family:inherit}
.rassure{display:flex;gap:16px;flex-wrap:wrap;color:var(--gris);font-size:13px;
  letter-spacing:.03em;margin-top:16px}
.rassure span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  border:1.3px solid var(--vert);margin-right:8px;vertical-align:middle;transform:translateY(-1px)}

/* ---------- bandeau de conversion en pied de page ---------- */
.appel{border-top:1px solid var(--bord-2);padding-top:88px;padding-bottom:88px;text-align:center}
.appel h2{font-size:clamp(28px,4.4vw,62px);font-weight:600;letter-spacing:-.035em;
  line-height:1.04;text-transform:uppercase;max-width:16ch;margin:0 auto}
.appel p{color:var(--gris);max-width:52ch;margin:20px auto 0;font-size:16.5px;line-height:1.62}
.appel .cta{justify-content:center;margin-top:36px}

/* ---------- confirmation ---------- */
.sceau-ok{width:92px;height:92px;margin-bottom:26px}
.suite{display:grid;gap:1px;background:var(--bord-2);border:1px solid var(--bord-2);margin-top:44px}
.suite > div{background:var(--noir);padding:28px 24px}
.suite .n{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--vert);
  margin-bottom:9px}
.suite h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:7px}
.suite p{color:var(--gris);font-size:15px;line-height:1.6}
.suite-3{grid-template-columns:repeat(3,1fr)}
.suite-4{grid-template-columns:repeat(4,1fr)}
.suite-5{grid-template-columns:repeat(5,1fr)}

/* ---------- pages d'offre ---------- */
.prix-hero{display:flex;flex-flow:column;gap:6px;margin-bottom:22px}
.prix-hero b{font-size:clamp(38px,5vw,62px);font-weight:600;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums}
.prix-hero b sup{font-size:.42em;vertical-align:super;letter-spacing:0;margin-left:2px}
.prix-hero span{color:var(--gris);font-size:14.5px;line-height:1.55}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bord-2);
  border:1px solid var(--bord-2);margin-top:30px}
.specs > div{background:var(--noir);padding:22px 20px}
.specs .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
  margin-bottom:8px}
.specs .v{font-size:17px;font-weight:600;letter-spacing:-.02em}
.autres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.err{color:var(--rose);font-size:14px;line-height:1.55;margin-top:12px}

/* ---------- formulaire externe (Tally) ---------- */
.cadre-form{border:1px solid var(--bord-2);background:var(--noir-2);min-height:820px;
  margin-bottom:96px}
.cadre-form iframe{width:100%;height:820px;border:0;display:block}

/* =====================================================================
   SITES EN LIGNE — vignette vivante et aperçu plein écran
   La vignette est le site lui-même, chargé dans un cadre et réduit par
   une homothétie (--k, posée par u2f-pages.js). On ne montre donc jamais
   une capture arrangée : ce qui est à l'écran est ce qui est en ligne.
   ===================================================================== */
.sites{display:flex;flex-flow:column;gap:26px}
.site{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px;
  align-items:start;border:1px solid var(--bord-2);background:var(--noir-2);padding:22px}
.site:hover{border-color:var(--bord)}

.site-vue{border:1px solid var(--bord-2);background:var(--noir-3);overflow:hidden}
.site-barre{display:flex;align-items:center;gap:7px;padding:10px 14px;
  border-bottom:1px solid var(--bord-2);background:rgba(255,255,255,.03)}
.site-barre i{width:9px;height:9px;border-radius:50%;background:var(--bord);display:block}
.site-barre span{margin-left:10px;font-size:12px;color:var(--gris);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.site-cadre{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--noir-3)}
.site-cadre iframe{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;
  transform:scale(var(--k,.28));transform-origin:top left;pointer-events:none;
  z-index:1;opacity:0;transition:opacity .6s var(--ease)}
.site-cadre.est-prete iframe{opacity:1}
/* La capture d'écran, quand elle existe (donnees.SITES → capture). Elle
   remplace le cadre vivant dans la grille — le vrai site reste à un clic,
   dans l'aperçu plein écran. L'image porte le premier écran du site : on la
   cadre en couverture, ancrée en haut, pour qu'aucun rapport de forme ne
   laisse de bande noire, quelle que soit la largeur de la carte. */
.site-cadre img.cap{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  display:block;border:0;pointer-events:none;z-index:1}
/* Le fond d'attente, un simple voile à la couleur du site
   (vignettes.attente). Le site vivant part au chargement dès que la carte
   approche de l'écran, un site à la fois ; ce fond ne tient donc la place
   qu'une seconde ou deux. Il y avait ici une maquette dessinée : elle
   ressemblait assez à un site pour qu'on la prenne pour la réalisation, ce
   qui est l'inverse du but sur la page qui doit prouver le travail. Le fond
   ne disparaît pas quand le site arrive : celui-ci se pose par-dessus, ce qui
   évite de voir le noir au travers pendant le fondu. Le halo vert marque
   l'attente et s'efface avec elle. */
.site-cadre>svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.site-cadre::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 120% at 50% 0%,rgba(210,255,197,.10),transparent 62%);
  transition:opacity .6s var(--ease)}
.site-cadre.est-prete::before{opacity:0}
.site-voile{position:absolute;inset:0;width:100%;border:0;cursor:pointer;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.75) 100%);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px;
  opacity:0;transition:opacity .35s var(--ease)}
.site-voile span{font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:#000;background:var(--vert);padding:11px 20px;border-radius:999px}
.site-vue:hover .site-voile,.site-voile:focus-visible{opacity:1}

.site-txt{display:flex;flex-flow:column;gap:12px;padding:6px 4px}
.site-meta{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;
  color:var(--gris);letter-spacing:.06em;text-transform:uppercase}
.site-meta b{color:var(--vert);font-weight:600}
.site-txt h3{font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.03em;
  line-height:1.15}
.site-txt p{color:var(--gris);font-size:15.5px;line-height:1.6}
.site-sections{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding-top:2px}
.site-sections li{font-size:12.5px;color:var(--gris);border:1px solid var(--bord-2);
  border-radius:999px;padding:5px 12px}
.site-specs{display:flex;flex-flow:column;gap:0;border-top:1px solid var(--bord-2);
  margin-top:6px}
.site-specs div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--bord-2);font-size:13.5px}
.site-specs span{color:var(--gris)}
.site-specs b{font-weight:600;text-align:right}
.site-note{font-size:12.5px;line-height:1.5;color:var(--gris);padding-top:10px}
.site-liens{display:flex;gap:10px;flex-wrap:wrap;padding-top:12px;margin-top:auto}

/* ---------- aperçu plein écran ---------- */
.apercu[hidden]{display:none}
.apercu{position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;padding:20px}
.apercu-fond{position:absolute;inset:0;background:rgba(0,0,0,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.apercu-boite{position:relative;width:min(1400px,100%);height:min(880px,100%);
  display:flex;flex-flow:column;background:var(--noir-2);border:1px solid var(--bord);
  opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.apercu.est-ouvert .apercu-boite{opacity:1;transform:none}
.apercu-tete{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 16px;border-bottom:1px solid var(--bord-2);flex-wrap:wrap}
.apercu-nom{display:flex;flex-flow:column;gap:2px;min-width:0}
.apercu-nom b{font-size:15px;font-weight:600}
.apercu-nom span{font-size:12px;color:var(--gris)}
.apercu-outils{display:flex;align-items:center;gap:10px}
.apercu-larg{display:flex;border:1px solid var(--bord-2);border-radius:999px;overflow:hidden}
.apercu-larg button{background:none;border:0;color:var(--gris);cursor:pointer;
  font:inherit;font-size:12.5px;padding:8px 15px;transition:background .25s,color .25s}
.apercu-larg button[aria-pressed="true"]{background:var(--vert);color:#000}
.apercu-lien{font-size:12.5px;color:var(--vert);border-bottom:1px solid transparent;
  transition:border-color .25s}
.apercu-lien:hover{border-color:var(--vert)}
.apercu-x{width:38px;height:38px;border-radius:50%;border:1px solid var(--bord);
  background:none;color:var(--blanc);font-size:22px;line-height:1;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s}
.apercu-x:hover{background:var(--vert);color:#000;border-color:var(--vert)}
.apercu-scene{flex:1;min-height:0;display:flex;justify-content:center;
  background:var(--noir-3);overflow:hidden}
.apercu-scene iframe{width:100%;height:100%;border:0;background:#fff;
  transition:width .45s var(--ease)}
.apercu.est-mobile .apercu-scene iframe{width:min(390px,100%);
  border-left:1px solid var(--bord-2);border-right:1px solid var(--bord-2)}
/* Mode maquette. La scène ne porte plus un site vivant mais l'image d'un
   projet dessiné, sur toute sa longueur : on la fait défiler. La boîte prend
   exactement la largeur d'origine de l'image — --maq-larg est posée par le
   script au chargement — pour que chaque maquette s'affiche à sa taille
   réelle : ni étirée sur 1400 px, ni rétrécie au point d'être illisible. Le
   sélecteur de largeur et « Ouvrir en vrai » n'ont pas de sens ici — une
   maquette n'est pas en ligne — on les retire. */
.apercu-scene img[data-vue-img]{display:block;width:100%;height:auto;
  align-self:flex-start;background:#fff}
.apercu.est-maquette .apercu-boite{width:min(var(--maq-larg,660px),100%)}
.apercu.est-maquette .apercu-scene{overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
/* Jauge de défilement. macOS masque les barres flottantes tant qu'on ne fait
   rien : rien ne disait que la maquette continuait plus bas. Celle-ci est
   dessinée, toujours visible, et dit d'un coup d'œil où l'on en est dans la
   page. Position et hauteur posées par le script, qui connaît la place exacte
   de la scène entre l'en-tête et la note. */
.apercu-jauge{position:absolute;right:5px;width:5px;border-radius:999px;
  background:rgba(255,255,255,.1);display:none;pointer-events:none;z-index:2}
.apercu.est-maquette.est-defilable .apercu-jauge{display:block}
.apercu-jauge i{position:absolute;left:0;right:0;top:0;min-height:26px;
  border-radius:999px;background:var(--vert);
  transition:top .12s linear,height .12s linear}
.apercu-scene:focus{outline:none}
.apercu-scene:focus-visible{outline:2px solid var(--vert);outline-offset:-2px}
.apercu.est-maquette .apercu-larg,
.apercu.est-maquette .apercu-lien{display:none}
/* Le mot qui dit qu'il y a une suite. Il ne s'affiche que si la maquette
   dépasse vraiment la fenêtre, et s'efface au premier coup de molette. */
.apercu-defil{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);
  display:none;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  background:rgba(8,8,8,.84);border:1px solid var(--bord);color:var(--blanc);
  font-size:12.5px;letter-spacing:.01em;pointer-events:none;opacity:0;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.apercu.est-maquette.est-defilable .apercu-defil{display:flex;opacity:1}
.apercu.est-maquette.est-defilable.a-defile .apercu-defil{opacity:0;
  transform:translate(-50%,10px)}
.apercu-defil i{width:7px;height:7px;flex:none;border-right:2px solid var(--vert);
  border-bottom:2px solid var(--vert);animation:u2f-defil 1.6s var(--ease) infinite}
@keyframes u2f-defil{
  0%,100%{transform:rotate(45deg) translate(-1px,-1px);opacity:.45}
  50%    {transform:rotate(45deg) translate(2px,2px);opacity:1}}
.apercu-note{padding:9px 16px;border-top:1px solid var(--bord-2);font-size:12px;
  color:var(--gris)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1080px){
  .site{grid-template-columns:minmax(0,1fr)}
  .site-liens{margin-top:0}
  .cmd{grid-template-columns:1fr}
  .recap{position:static}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .suite-4,.suite-5{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1060px){
  .topnav{display:none}
  .burger{display:flex}
  .menu-mobile:not([hidden]){display:flex}
}
@media(max-width:720px){
  .hero-page .hgrid{grid-template-columns:minmax(0,1fr)}
  .sec{padding-top:62px;padding-bottom:62px}
  .g-2,.g-3{grid-template-columns:minmax(0,1fr)}
  .suite-3,.suite-4,.suite-5{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
  .autres{grid-template-columns:minmax(0,1fr)}
  .duo-champ{grid-template-columns:1fr}
  .panneau{padding:26px 20px}
  .sec-h{margin-bottom:32px}
  .opt{flex-wrap:wrap}
  .opt .p{margin-left:0;width:100%}
  .cadre-form,.cadre-form iframe{min-height:900px;height:900px}
  .site{padding:14px;gap:18px}
  .site-voile{opacity:1;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.8) 100%)}
  .apercu{padding:0}
  .apercu-boite{height:100%;border:0}
  .apercu-tete{gap:10px}
  .apercu-larg{display:none}
  .site-liens .btn{flex:1;text-align:center}
  /* Même raison que dans u2f.css : le flou d'arrière-plan coûte un recalcul
     plein écran par image, et la modale plein écran couvre déjà tout. */
  .apercu-fond{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(0,0,0,.96)}
}
@media(prefers-reduced-motion:reduce){
  .apercu-boite,.apercu-scene iframe,.site-cadre iframe{transition:none}
  .apercu-defil i{animation:none}
}