/* Hallmark · macrostructure: Split Studio (accueil) · tone: brutalisme calme · anchor hue: 266
 * theme: studied-DNA (source: le site Nielia en ligne, lu dans publication/) · papier oklch(91% 0 0) · accent oklch(45% 0.29 266)
 * Archivo ExtraBold Expanded (titres) · Archivo (texte) · IBM Plex Mono (petites étiquettes)
 * nav: N5 capsule flottante à sous-menu · footer: Ft5 carte sombre + logo géant
 * Couche posée sur bleu-tokens.css et bleu.css (l'ADN), qui restent la source des jetons.
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 */

:root {
  /* tailles d'affichage de cette version : plus grandes, moins nombreuses */
  --t-hero: clamp(2.3rem, 1.25rem + 3.4vw, 4.75rem);
  --t-affiche: clamp(2.3rem, 1.05rem + 4.6vw, 6rem);
  --t-section: clamp(1.9rem, 1.15rem + 3vw, 4.25rem);
  --t-panneau: clamp(1.5rem, 1.15rem + 1.5vw, 2.6rem);
  --t-chapo: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  --t-chiffre: clamp(4rem, 2.4rem + 6.5vw, 9.5rem);
  --sec-gros: clamp(5rem, 3rem + 8vw, 11rem);
  --gout-large: clamp(2rem, 0.9rem + 4.4vw, 6.5rem);
  /* l'apparition au défilement : opacité et 16 px, 400 ms */
  --revele-dur: 400ms;
  --revele-decal: 16px;
  /* repère « à confirmer » : visible à la relecture, retiré avant la mise en ligne */
  --color-repere: oklch(93% 0.12 100);
  --color-repere-encre: oklch(22% 0 0);
  --color-verre-carte: oklch(100% 0 0 / 0.78);
  --color-voile-video: oklch(0% 0 0 / 0.42);
  --hauteur-nav: 64px;
}

/* ---------- le papier ----------
   Le shader PaperTexture de paper.design, rendu une fois avec les réglages de papier.js puis figé en image :
   même grain, sans script ni calcul graphique au chargement (il coûtait 300 ms de blocage sur téléphone) */
.fond-papier { background: var(--color-papier) url("/assets/oct/papier-ordinateur.webp") 50% 50% / cover no-repeat; }
@media (max-width: 767px) { .fond-papier { background-image: url("/assets/oct/papier-telephone.webp"); } }

/* ---------- textes communs ---------- */
.titre-section {
  font: 800 expanded var(--t-section)/1.02 var(--font-display);
  letter-spacing: -0.04em;
  max-width: 17ch;
  text-wrap: balance; overflow-wrap: anywhere; min-width: 0;
}
.lien-fleche {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-weight: 600; color: var(--color-encre);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.28em;
  transition: color var(--dur-court) var(--ease-out);
}
.lien-fleche::after { content: "→"; text-decoration: none; display: inline-block; transition: transform var(--dur-court) var(--ease-out); }
.lien-fleche:hover { color: var(--color-bleu); }
.lien-fleche:hover::after { transform: translateX(4px); }
.lien-discret {
  color: var(--color-texte-2); font-size: var(--t-small); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
  transition: color var(--dur-court) var(--ease-out);
}
.lien-discret:hover { color: var(--color-bleu); }
.sombre .lien-fleche { color: var(--color-texte-nuit); }
.sombre .lien-fleche:hover { color: var(--color-bleu-sur-nuit); }
.lecteur-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a-confirmer {
  display: inline; padding: 0.12em 0.4em;
  font: 500 0.78em/1.5 var(--font-mono); letter-spacing: 0; text-transform: none;
  color: var(--color-repere-encre); background: var(--color-repere);
  outline: 1px dashed var(--color-repere-encre); outline-offset: -1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.btn--grand { height: 56px; padding: 0 1.5rem; font-size: var(--t-heading-sm); }
.wa-logo { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- apparition au défilement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .revele { opacity: 0; transform: translateY(var(--revele-decal)); transition: opacity var(--revele-dur) var(--ease-out), transform var(--revele-dur) var(--ease-out); }
  .js .revele.est-vu { opacity: 1; transform: none; }
}

/* ---------- menu : capsule, sous-menu Offres, un seul bouton ---------- */
.nav__capsule { gap: var(--s-8); padding-left: 22px; }
.nav__liens { margin-left: auto; }
.nav__lien, .nav__offres {
  display: inline-flex; align-items: center; height: 48px; padding: 0 var(--s-16);
  font: 500 var(--t-body)/1 var(--font-body); color: var(--color-encre);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  transition: color var(--dur-court) var(--ease-out);
}
.nav__lien:hover, .nav__offres:hover, .nav__offres[aria-expanded="true"], .nav__lien[aria-current="page"] { color: var(--color-bleu); }
.nav__chevron { width: 7px; height: 7px; margin-left: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-court) var(--ease-out); }
.nav__offres[aria-expanded="true"] .nav__chevron { transform: translateY(1px) rotate(225deg); }
.nav__groupe { position: relative; }
.nav__etiquette { display: none; }
.nav__sous {
  position: absolute; top: calc(100% + 14px); left: -10px; z-index: 5;
  width: 23rem; padding: 8px;
  background: var(--color-feuille); border: 1px solid var(--color-filet); border-radius: var(--r-carte);
  box-shadow: 0 28px 56px -24px var(--color-ombre);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-court) var(--ease-out), transform var(--dur-court) var(--ease-out), visibility 0s linear var(--dur-court);
}
.nav__groupe.est-ouvert .nav__sous,
html:not(.js) .nav__groupe:hover .nav__sous,
html:not(.js) .nav__groupe:focus-within .nav__sous { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__sous a { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-bouton); color: var(--color-encre); text-decoration: none; transition: background-color var(--dur-court) var(--ease-out); }
.nav__sous a:hover, .nav__sous a:focus-visible, .nav__sous a[aria-current="page"] { background: var(--color-teinte-papier); }
.nav__sous b { font: 800 expanded var(--t-heading-sm)/1.2 var(--font-display); letter-spacing: -0.02em; }
.nav__sous span { font-size: var(--t-small); color: var(--color-texte-2); }
.nav__wa { margin-left: var(--s-8); }

@media (max-width: 1100px) {
  .nav__capsule { padding-left: 16px; }
  .nav__wa { margin-left: auto; }
  .nav__offres { display: none; }
  .nav__etiquette { display: block; padding-top: var(--s-8); font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texte-2); }
  .nav__sous { position: static; width: auto; padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: inherit; transform: none; transition: none; }
  .nav__sous a { padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--color-filet); }
  .nav__sous a:hover { background: none; color: var(--color-bleu); }
  .nav__liens > .nav__lien { display: flex; height: auto; padding: 0; }
}
@media (max-width: 767px) {
  .nav__wa { display: none; }
  .nav__burger { margin-left: auto; }
}

/* sur téléphone, une seule action à portée de pouce. Elle se retire quand un bouton principal
   de la page est déjà à l'écran : jamais deux boutons principaux visibles ensemble */
@media (max-width: 767px) {
  .barre-action { grid-template-columns: minmax(0, 1fr); transition: transform 300ms var(--ease-out), visibility 0s linear 0s; }
  .barre-action.est-retiree { transform: translateY(110%); visibility: hidden; transition: transform 240ms var(--ease-in), visibility 0s linear 240ms; }
}

/* ---------- aiguillage des versions de test ---------- */
.aiguillage {
  position: fixed; left: 16px; bottom: 16px; z-index: 90;
  display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px;
  background: var(--color-nuit); color: var(--color-texte-nuit-2); border-radius: var(--r-carte);
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.aiguillage span { margin-right: 6px; }
.aiguillage a { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: var(--r-bouton); color: var(--color-texte-nuit); text-decoration: none; }
.aiguillage a:hover { background: var(--color-nuit-2); }
.aiguillage a[aria-current="page"] { background: var(--color-bleu); color: var(--color-blanc); }
@media (max-width: 767px) { .aiguillage { display: none; } }

/* ---------- 1 · hero ---------- */
/* bleu.css donnait 225 vh et une entrée animée au premier écran de l'ancien accueil : on les retire */
.hero { position: relative; height: auto; }
.js .hero__sous-titre { opacity: 1; transform: none; animation: none; }
.hero__titre { max-width: none; }
.hero__scene { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--hauteur-nav) + var(--s-48)) 0 var(--sec-144); }
.hero__grille {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas: ". cadre" "titre cadre" "texte cadre" "actions cadre" ". cadre";
  column-gap: var(--gout-large);
}
.hero__titre {
  grid-area: titre;
  font: 800 expanded var(--t-hero)/0.98 var(--font-display); letter-spacing: -0.045em;
  text-wrap: balance; overflow-wrap: anywhere; min-width: 0;
}
.hero__sous-titre { grid-area: texte; margin-top: var(--s-32); max-width: 40ch; font: 400 var(--t-chapo)/1.45 var(--font-body); color: var(--color-texte-2); text-wrap: pretty; }
.hero__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-16) var(--s-24); margin-top: var(--s-32); }
.hero__complete { display: none; }
.hero__legende { display: none; }

/* le cadre : une barre fine, deux pastilles, un site de cabinet sans nom, la visite dedans */
.cadre { grid-area: cadre; align-self: center; position: relative; margin: 0; --e: 0; }
.cadre::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-panneau);
  box-shadow: 0 0 0 1px var(--color-bord-vig), 0 2px 6px var(--color-ombre-proche), 0 40px 80px -36px var(--color-ombre);
  opacity: calc(1 - var(--e) * 3);
}
.cadre__chrome { background: var(--color-feuille); border-radius: var(--r-panneau) var(--r-panneau) 0 0; opacity: calc(1 - var(--e) * 3); }
.cadre__barre { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--color-filet); }
.cadre__barre i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-papier-2); }
.cadre__barre span { margin-left: auto; font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-texte-2); }
.cadre__mini { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 16px; }
.cadre__marque { width: 20px; height: 20px; border-radius: 50%; background: var(--color-papier-2); }
.cadre__liens { display: flex; gap: 12px; margin-left: auto; }
.cadre__liens i { width: 36px; height: 6px; border-radius: 3px; background: var(--color-papier-2); }
.cadre__rdv { width: 70px; height: 22px; margin-left: 6px; border-radius: 3px; background: var(--color-encre); }
.cadre__video {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 0 0 calc(var(--r-panneau) * (1 - var(--e))) calc(var(--r-panneau) * (1 - var(--e)));
  background: var(--color-papier-2);
}
.cadre__affiche, .cadre__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-video] { opacity: 0; transition: opacity 600ms var(--ease-out); }
[data-video].est-lue { opacity: 1; }

/* les trois cartes : ce que Nielia fait à la place du praticien */
.cartes { position: absolute; inset: 0; margin: 0; padding: 0; pointer-events: none; opacity: calc(1 - var(--e) * 4); }
.carte {
  position: absolute; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 10px; white-space: nowrap;
  font: 500 var(--t-small)/1.2 var(--font-body); color: var(--color-encre);
  background: var(--color-verre-carte); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--color-verre-bord); border-radius: var(--r-carte);
  box-shadow: 0 1px 2px var(--color-ombre-proche), 0 18px 36px -18px var(--color-ombre);
}
.carte__coche { position: relative; flex: none; width: 18px; height: 18px; border-radius: 3px; background: var(--color-bleu); }
.carte__coche::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border-right: 2px solid var(--color-blanc); border-bottom: 2px solid var(--color-blanc); transform: rotate(45deg); }
.carte--1 { left: -6%; top: 30%; }
.carte--2 { right: -5%; top: 55%; }
.carte--3 { left: 9%; bottom: -22px; }
@media (prefers-reduced-motion: no-preference) {
  .js .carte { opacity: 0; transform: translateY(10px); animation: carte-pose 500ms var(--ease-out) forwards; }
  .js .carte--1 { animation-delay: 900ms; }
  .js .carte--2 { animation-delay: 1500ms; }
  .js .carte--3 { animation-delay: 2100ms; }
}
@keyframes carte-pose { to { opacity: 1; transform: none; } }

/* v3 : titre centré en haut, la visite en pleine largeur dessous, les cartes posées sur la vidéo */
.hero--v3 .hero__scene { min-height: 0; padding-bottom: var(--sec-96); }
.hero--v3 .hero__grille {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none;
  grid-template-areas: "titre titre" "texte actions" "cadre cadre";
  align-items: end; width: 100%;
}
.hero--v3 .hero__titre { justify-self: center; max-width: 13ch; font-size: var(--t-affiche); letter-spacing: -0.05em; text-align: center; }
.hero--v3 .hero__sous-titre { margin-top: var(--s-48); max-width: 36ch; }
.hero--v3 .hero__actions { justify-content: flex-end; }
.hero--v3 .cadre { width: 100%; margin-top: var(--s-64); }
.hero--v3 .carte--1 { left: 3.5%; top: 26%; }
.hero--v3 .carte--2 { left: 3.5%; top: calc(26% + 56px); right: auto; }
.hero--v3 .carte--3 { left: 3.5%; top: calc(26% + 112px); bottom: auto; }

/* v1 : au défilement, le cadre s'efface et la visite remplit l'écran (ordinateur seulement, voir hero-v1.js) */
.hero--v1.est-plein { height: 320vh; }
.hero--v1.est-plein .hero__scene { position: sticky; top: 0; height: 100vh; min-height: 0; overflow: clip; }
.hero--v1.est-plein .cadre { will-change: transform; }
.hero--v1.est-plein .hero__titre, .hero--v1.est-plein .hero__sous-titre, .hero--v1.est-plein .hero__actions {
  opacity: calc(1 - var(--e, 0) * 2.6); transform: translateX(calc(var(--e, 0) * -48px));
}
.hero--v1.est-plein .hero__legende {
  display: block; position: absolute; left: var(--marge); bottom: var(--s-32); z-index: 3;
  padding: 10px 14px; border-radius: var(--r-bouton);
  font: 500 var(--t-tag)/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-encre); background: var(--color-verre-carte); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: var(--l, 0);
}

/* tablette */
@media (max-width: 1100px) and (min-width: 768px) {
  .hero--v1 .hero__grille, .hero--v2 .hero__grille { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "titre" "texte" "actions" "cadre"; }
  .hero--v1 .cadre, .hero--v2 .cadre { margin-top: var(--s-64); }
  .hero__titre { max-width: 14ch; }
}

/* téléphone, identique pour les trois : titre, visite en bande 16:9 pleine largeur, sous-titre, bouton, lien */
@media (max-width: 767px) {
  .hero__scene, .hero--v3 .hero__scene { min-height: 0; padding: calc(var(--hauteur-nav) + 56px) 0 var(--s-48); }
  .hero__grille, .hero--v3 .hero__grille {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "titre" "cadre" "texte" "actions";
    justify-items: stretch; text-align: left;
  }
  .hero__titre, .hero--v3 .hero__titre { max-width: none; font-size: clamp(2.05rem, 0.9rem + 5.6vw, 2.6rem); letter-spacing: -0.045em; line-height: 1; }
  .cadre, .hero--v3 .cadre { width: auto; margin: var(--s-24) calc(-1 * var(--marge)) 0; }
  .cadre::after, .cadre__chrome, .cartes { display: none; }
  .cadre__video { border-radius: 0; }
  .hero__sous-titre { margin-top: var(--s-24); }
  .hero__actions, .hero--v3 .hero__actions { flex-direction: column; align-items: stretch; gap: var(--s-16); margin-top: var(--s-24); justify-content: flex-start; }
  .hero__actions .btn { width: 100%; }
  .hero__realisations { display: none; }
  .hero__complete { display: inline-block; align-self: center; }
}

/* ---------- les feuilles blanches ----------
   bleu.css remontait chaque feuille de 6 rem sur la section précédente : seule la première,
   posée sur le hero ou sur la tête de page, garde ce chevauchement et ses coins arrondis */
.feuille { margin-top: 0; border-radius: 0; }
.hero + .feuille { margin-top: -5rem; border-radius: var(--r-feuille) var(--r-feuille) 0 0; }
.tete + .feuille { border-radius: var(--r-feuille) var(--r-feuille) 0 0; }
@media (max-width: 767px) { .hero + .feuille { margin-top: 0; } }

/* ---------- 2 · ce que nous faisons ---------- */
.offres { padding: var(--sec-gros) 0; }
.offres > .conteneur > .titre-section { max-width: 14ch; margin-bottom: var(--sec-96); }
.offre {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-48) var(--gout-large); align-items: center;
}
.offre + .offre { margin-top: var(--sec-gros); }
.offre--inverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.offre--inverse .offre__visuel { order: 2; }
.offre__visuel { position: relative; margin: 0; min-width: 0; }
.offre__titre { font: 800 expanded var(--t-panneau)/1.06 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
.offre__corps { margin-top: var(--s-24); max-width: 40ch; font: 400 var(--t-chapo)/1.5 var(--font-body); color: var(--color-texte-2); text-wrap: pretty; }
.offre__corps strong { font-weight: 600; color: var(--color-encre); }
.offre__texte .lien-fleche { margin-top: var(--s-32); }

/* le site livré, qui défile lentement dans sa fenêtre */
.offre__visuel:has(.defile), .offre__visuel--grille {
  padding: clamp(14px, 3vw, 44px); padding-bottom: 0;
  background: var(--color-teinte-papier); border-radius: var(--r-panneau); overflow: hidden;
}
.defile {
  container-type: inline-size;
  display: flex; flex-direction: column; aspect-ratio: 16 / 10;
  background: var(--color-blanc); border-radius: var(--r-carte) var(--r-carte) 0 0; overflow: hidden;
  box-shadow: 0 0 40px -6px var(--color-ombre);
}
.defile__nav { flex: none; width: 100%; height: auto; position: relative; z-index: 1; }
.defile__fenetre { flex: 1; min-height: 0; overflow: hidden; }
.defile__page { width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .defile__page { animation: defile 34s var(--ease-in-out) infinite alternate; animation-play-state: paused; }
  .defile.est-visible .defile__page { animation-play-state: running; }
}
/* hauteur de la fenêtre : 62,5 cqw (16:10) moins la barre du site (36/720, soit 5 cqw) */
@keyframes defile { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(calc(-100% + 57.5cqw)); } }

.offre__visuel--video { aspect-ratio: 16 / 9; border-radius: var(--r-panneau); overflow: hidden; background: var(--color-papier-2); }
.offre__visuel--video img, .offre__visuel--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offre__visuel--grille { padding-bottom: clamp(14px, 3vw, 44px); display: grid; place-items: center; }
.offre__visuel--grille img { width: min(100%, 26rem); height: auto; border-radius: var(--r-vignette); box-shadow: 0 0 40px -6px var(--color-ombre); }

.etiquette-visuel {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  padding: 6px 9px; border-radius: var(--r-bouton);
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-blanc); background: var(--color-encre);
}
.etiquette-bleue {
  position: absolute; left: clamp(12px, 2vw, 24px); top: clamp(12px, 2vw, 24px); z-index: 2;
  padding: 10px 14px; border-radius: var(--r-bouton);
  font: 800 expanded var(--t-heading-sm)/1 var(--font-display); letter-spacing: -0.02em;
  color: var(--color-blanc); background: var(--color-bleu);
}

@media (max-width: 991px) {
  .offre, .offre--inverse { grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
  .offre--inverse .offre__visuel { order: 0; }
}

/* ---------- 3 · réalisations ---------- */
.cas { padding: var(--sec-gros) 0; }
.cas__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-64) var(--gout); margin-top: var(--sec-96); }
.cas__item--grand { grid-column: 1 / -1; }
.cas__lien { display: block; color: var(--color-encre); text-decoration: none; }
.cas__image { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-panneau); background: var(--color-papier-2); }
.cas__item--grand .cas__image { aspect-ratio: 21 / 9; }
.cas__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 700ms var(--ease-out); }
a.cas__lien:hover .cas__image img, a.cas__lien:focus-visible .cas__image img { transform: scale(1.025); }
.cas__image--vide { display: grid; place-items: center; padding: var(--s-24); border: 1px dashed var(--color-filet-fort); background: transparent; }
.cas__ligne { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-16); margin-top: var(--s-16); padding-top: 12px; border-top: 1px solid var(--color-encre); font: 500 var(--t-heading-sm)/1.35 var(--font-body); }
.cas__ligne b { font: 500 var(--t-tag)/1.9 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-bleu); }
a.cas__lien:hover .cas__ligne { color: var(--color-bleu); }
.cas__tout { margin-top: var(--s-64); }
@media (max-width: 767px) {
  .cas__liste { grid-template-columns: minmax(0, 1fr); gap: var(--s-48); }
  .cas__item--grand .cas__image { aspect-ratio: 4 / 3; }
  .cas__ligne { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- 4 · comment ça se passe ---------- */
.etapes-section { padding: var(--sec-gros) 0; }
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-48) var(--gout); margin-top: var(--sec-96); }
.etape { padding-top: var(--s-24); border-top: 1px solid var(--color-encre); }
.etape__num { display: inline-flex; align-items: baseline; gap: 0.06em; font: 800 expanded var(--t-chiffre)/0.8 var(--font-display); letter-spacing: -0.06em; }
/* le carré du logo en point final */
.etape__num::after { content: ""; width: 0.15em; height: 0.15em; background: var(--color-bleu); }
.etape p { margin-top: var(--s-32); max-width: 22ch; font: 500 var(--t-heading-md)/1.3 var(--font-body); text-wrap: pretty; }
.etape:nth-child(2) { transition-delay: 80ms; }
.etape:nth-child(3) { transition-delay: 160ms; }
@media (max-width: 767px) { .etapes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 5 · qui répond ---------- */
.repond { padding: var(--sec-gros) 0; }
.repond__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-64) var(--gout-large); align-items: center; }
.repond__carte { display: flex; align-items: center; gap: var(--s-24); margin-top: var(--s-48); }
.repond__photo { flex: none; display: grid; place-items: center; width: 7.5rem; aspect-ratio: 1; padding: 8px; border: 1px dashed var(--color-filet-nuit-fort); border-radius: var(--r-carte); text-align: center; }
.repond__qui { display: grid; gap: var(--s-8); min-width: 0; }
.repond__nom { font: 800 expanded var(--t-heading-md)/1.2 var(--font-display); letter-spacing: -0.02em; }
.repond__tel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.repond__tel a { font: 800 expanded var(--t-heading-lg)/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--color-texte-nuit); text-decoration: none; white-space: nowrap; }
.repond__tel a:hover { color: var(--color-bleu-sur-nuit); }
.repond__tel span { font: 500 var(--t-tag)/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texte-nuit-2); }
.repond__ligne { margin-top: var(--s-32); max-width: 46ch; font: 400 var(--t-chapo)/1.5 var(--font-body); color: var(--color-texte-nuit-2); }
.garanties { margin-top: var(--s-48); border-top: 1px solid var(--color-filet-nuit-fort); }
.garanties li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-filet-nuit); font-size: var(--t-body); }
.garanties li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.55em; background: var(--color-bleu-sur-nuit); }
.feuille .garanties { border-top-color: var(--color-encre); }
.feuille .garanties li { border-bottom-color: var(--color-filet-fort); }
.feuille .garanties li::before { background: var(--color-bleu); }

.presentation { justify-self: end; width: min(100%, 21rem); margin: 0; }
.presentation__cadre { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r-carte); background: var(--color-nuit-2); }
.presentation video { width: 100%; height: 100%; object-fit: cover; }
.presentation__lancer {
  position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: var(--r-bouton);
  font: 600 var(--t-body)/1 var(--font-body); color: var(--color-encre); background: var(--color-blanc);
  cursor: pointer; transition: background-color var(--dur-court) var(--ease-out), color var(--dur-court) var(--ease-out);
}
.presentation__lancer:hover { background: var(--color-bleu); color: var(--color-blanc); }
.presentation__icone { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.presentation.est-lancee .presentation__lancer { display: none; }
.presentation figcaption { margin-top: var(--s-16); font-size: var(--t-small); color: var(--color-texte-2); }
.sombre .presentation figcaption { color: var(--color-texte-nuit-2); }
@media (max-width: 991px) {
  .repond__grille { grid-template-columns: minmax(0, 1fr); }
  .presentation { justify-self: start; }
}
@media (max-width: 479px) {
  .repond__carte { flex-direction: column; align-items: flex-start; }
}

/* ---------- 6 · questions ---------- */
.questions-section { padding: var(--sec-gros) 0; }
.questions-section__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-48) var(--gout); align-items: start; }
.replis { border-top: var(--bord) solid var(--color-filet-fort); }
.repli { border-bottom: var(--bord) solid var(--color-filet-fort); }
.repli summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-16);
  padding: var(--s-24) 0; cursor: pointer; list-style: none;
  font: 600 var(--t-heading-sm)/1.35 var(--font-body);
  transition: color var(--dur-court) var(--ease-out);
}
.repli summary::-webkit-details-marker { display: none; }
.repli summary:hover { color: var(--color-bleu); }
.repli summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.repli[open] .plus::before { transform: rotate(-180deg); }
.repli[open] .plus::after { transform: rotate(-270deg); opacity: 0; }
.repli__corps p { max-width: 60ch; padding-bottom: var(--s-24); color: var(--color-texte-2); }
.repli__corps p + p { margin-top: calc(-1 * var(--s-8)); }
@media (max-width: 991px) { .questions-section__grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 7 · contact, sur la plaque bleue ---------- */
.contact-bloc__carte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-64) var(--gout-large); align-items: start; }
.contact-bloc__tete .titre-section { max-width: 11ch; }
.contact-bloc__bouton { margin-top: var(--s-32); }
.coordonnees { margin-top: var(--s-32); }
.coordonnees div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-16); padding: 12px 0; border-top: 1px solid var(--color-filet-fort); }
.coordonnees dt { font: 500 var(--t-tag)/1.9 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
.coordonnees dd { min-width: 0; overflow-wrap: anywhere; }
.coordonnees a { font-weight: 600; color: var(--color-encre); text-decoration: none; }
.coordonnees a:hover { color: var(--color-bleu); }
.formulaire { width: 100%; }
.formulaire__large { grid-column: 1 / -1; }
.formulaire .miroir__boutons { justify-content: flex-start; }
.contact-bloc__formulaire .miroir__suite { margin-top: var(--s-16); width: 100%; }
.contact-bloc__formulaire .appel__note { margin-top: var(--s-16); }
@media (max-width: 991px) { .contact-bloc__carte { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .contact-bloc .btn--grand { width: 100%; }
  .coordonnees div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* bleu.css resserrait la chasse des boutons de formulaire au téléphone : nos libellés tiennent sans */
.formulaire .miroir__boutons .btn, .contact-form .miroir__boutons .btn { font-stretch: normal; letter-spacing: 0; }

/* ---------- pied ---------- */
/* la carte du pied chevauche la plaque bleue : la marge négative ne doit pas traverser le pied */
.pied { display: flow-root; }
.pied__legal { display: block; font-size: var(--t-small); color: var(--color-texte-nuit-2); }
.pied__geant span { transform: translateY(16%); }

/* ---------- visionneuse : la visite complète en plein écran ---------- */
.visionneuse { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--color-nuit); color: var(--color-texte-nuit); }
.visionneuse::backdrop { background: var(--color-nuit); }
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse video { width: 100%; height: 100%; object-fit: contain; background: var(--color-nuit); }
.visionneuse__fermer {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 2;
  height: 44px; padding: 0 16px; border: 1px solid var(--color-filet-nuit-fort); border-radius: var(--r-bouton);
  font: 500 var(--t-small)/1 var(--font-body); color: var(--color-texte-nuit); background: var(--color-nuit-2); cursor: pointer;
}
.visionneuse__fermer:focus-visible { outline: 2px solid var(--color-focus-nuit); outline-offset: 3px; }

/* ---------- pages intérieures : tête, sections, prix ---------- */
.tete { padding: calc(var(--hauteur-nav) + var(--sec-96)) 0 var(--sec-96); }
.tete__titre { font: 800 expanded var(--t-affiche)/0.98 var(--font-display); letter-spacing: -0.05em; max-width: 14ch; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
.tete__titre--long { font-size: var(--t-hero); max-width: 20ch; }
.tete__chapo { margin-top: var(--s-32); max-width: 44ch; font: 400 var(--t-chapo)/1.5 var(--font-body); color: var(--color-texte-2); text-wrap: pretty; }
.tete__action { margin-top: var(--s-32); }
.bloc { padding: var(--sec-gros) 0; }
.bloc--serre { padding: var(--sec-96) 0; }
.bloc__titre { font: 800 expanded var(--t-section)/1.02 var(--font-display); letter-spacing: -0.04em; max-width: 18ch; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
.bloc__titre--md { font-size: var(--t-panneau); max-width: 24ch; }
.bloc__chapo { margin-top: var(--s-24); max-width: 52ch; font: 400 var(--t-chapo)/1.5 var(--font-body); color: var(--color-texte-2); text-wrap: pretty; }
.bloc__corps { margin-top: var(--s-64); }
.deux { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-48) var(--gout-large); align-items: start; }
.deux--centre { align-items: center; }
@media (max-width: 991px) { .deux { grid-template-columns: minmax(0, 1fr); } }
.liste-carres li { position: relative; padding: 14px 0 14px 22px; border-top: 1px solid var(--color-filet-fort); font-size: var(--t-body); }
.liste-carres li:last-child { border-bottom: 1px solid var(--color-filet-fort); }
.liste-carres li::before { content: ""; position: absolute; left: 0; top: calc(14px + 0.55em); width: 8px; height: 8px; background: var(--color-bleu); }

/* le sommaire des tarifs */
.sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-32); }
.sommaire a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: var(--bord) solid var(--color-filet-fort); border-radius: var(--r-bouton); font-weight: 500; color: var(--color-encre); text-decoration: none; transition: border-color var(--dur-court) var(--ease-out), color var(--dur-court) var(--ease-out); }
.sommaire a:hover { border-color: var(--color-bleu); color: var(--color-bleu); }

/* les tableaux de prix : une fois en chiffres d'encre, chaque mois sur une étiquette de métal */
.prix-bloc + .prix-bloc { margin-top: var(--sec-gros); }
.prix-bloc__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-16) var(--s-48); }
.prix-bloc__lien { white-space: nowrap; }
.prix-table { width: 100%; margin-top: var(--s-48); border-collapse: collapse; border-top: 1px solid var(--color-encre); }
.prix-table th, .prix-table td { padding: var(--s-24) var(--s-16) var(--s-24) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-filet-fort); font-weight: 400; }
.prix-table thead th { padding-top: 12px; padding-bottom: 12px; font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
.prix-table tbody th { width: 30%; }
.prix-table__nom { display: block; font: 800 expanded var(--t-heading-md)/1.2 var(--font-display); letter-spacing: -0.02em; }
.prix-table td { color: var(--color-texte-2); }
.prix-table .prix-table__prix { width: 1%; padding-right: 0; text-align: right; white-space: nowrap; color: var(--color-encre); }
.prix-table thead .prix-table__prix { text-align: right; }
.montant { font: 800 expanded clamp(1.8rem, 1.3rem + 1.8vw, 3rem)/1 var(--font-display); letter-spacing: -0.04em; }
.montant--petit { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.9rem); }
.rythme { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 500 var(--t-tag)/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
.rythme::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; }
.rythme--mois { color: var(--color-bleu); }
.rythme--mois::before { background: currentColor; border-color: currentColor; }
.au-mois {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-end;
  padding: 18px 16px 12px 22px; background: var(--metal);
  border: 1px solid var(--color-filet-fort); border-radius: var(--r-carte);
}
.au-mois::before { content: ""; position: absolute; left: 9px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--color-feuille); box-shadow: inset 0 1px 2px var(--color-ombre); }
.au-mois .montant { color: var(--color-bleu); }
.au-mois small { margin-top: 6px; font: 500 var(--t-tag)/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-encre); }
.prix-note { margin-top: var(--s-24); max-width: 62ch; font-size: var(--t-small); color: var(--color-texte-2); }
.prix-note strong { color: var(--color-encre); font-weight: 600; }
.prix-cle { margin-top: var(--s-32); padding: var(--s-24); max-width: 52rem; border-left: 3px solid var(--color-bleu); background: var(--color-teinte-papier); font: 500 var(--t-heading-sm)/1.45 var(--font-body); }
@media (max-width: 767px) {
  .prix-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prix-table, .prix-table tbody, .prix-table tr, .prix-table th, .prix-table td { display: block; width: auto; }
  .prix-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px var(--s-16); padding: var(--s-24) 0; border-bottom: 1px solid var(--color-filet-fort); }
  .prix-table th, .prix-table td { padding: 0; border: 0; }
  .prix-table tbody th { grid-column: 1; grid-row: 1; width: auto; }
  .prix-table .prix-table__prix { grid-column: 2; grid-row: 1; width: auto; }
  .prix-table td:not(.prix-table__prix) { grid-column: 1 / -1; }
  .prix-table td[data-libelle]::before { content: attr(data-libelle); display: block; margin-bottom: 4px; font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
  .prix-table--colonnes td.prix-table__prix { grid-column: auto; grid-row: auto; text-align: left; }
  .prix-table--colonnes tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prix-table--colonnes tbody th { grid-column: 1 / -1; }
}

/* conditions */
.conditions { columns: 2 22rem; column-gap: var(--gout-large); margin-top: var(--s-48); }
.conditions li { position: relative; break-inside: avoid; padding: 14px 0 14px 22px; border-top: 1px solid var(--color-filet-fort); font-size: var(--t-body); }
.conditions li::before { content: ""; position: absolute; left: 0; top: calc(14px + 0.55em); width: 8px; height: 8px; background: var(--color-encre); }
.conditions-titre { margin-top: var(--sec-96); }

/* ---------- /site ---------- */
/* trois modèles côte à côte, chacun avec sa palette : la preuve du sur-mesure */
.surmesure-oct { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); align-items: start; }
.surmesure-oct__site { margin: 0; }
.surmesure-oct__site:nth-child(2) { margin-top: var(--s-64); }
.surmesure-oct__site:nth-child(3) { margin-top: calc(var(--s-64) * 2); }
.surmesure-oct__site img { width: 100%; height: auto; aspect-ratio: 720 / 500; object-fit: cover; object-position: 0 0; border-radius: var(--r-vignette); box-shadow: 0 0 0 1px var(--color-bord-vig), 0 24px 48px -28px var(--color-ombre); }
.surmesure-oct__site figcaption { display: flex; align-items: center; gap: 6px; margin-top: var(--s-16); font: 500 var(--t-tag)/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.surmesure-oct__site figcaption span { margin-right: auto; }
.surmesure-oct__site figcaption i { width: 14px; height: 14px; background: var(--c); border: 1px solid var(--color-filet-fort); }
@media (max-width: 767px) {
  .surmesure-oct { grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
  .surmesure-oct__site:nth-child(n) { margin-top: 0; }
}
.maquette__etapes { grid-template-columns: minmax(0, 1fr); width: 100%; margin-top: var(--s-32); }
.maquette__etapes li { grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; }
.compris { columns: 2 20rem; column-gap: var(--gout-large); }
.compris li { break-inside: avoid; }
.preuve-site { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-48) var(--gout-large); align-items: start; }
.notes-site { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-48); border-top: 1px solid var(--color-texte-nuit); }
.notes-site div { display: grid; grid-template-rows: 1fr auto; padding: var(--s-24) var(--s-16) 0 0; }
.notes-site dt { align-self: start; }
.notes-site dt { font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-nuit-2); }
.notes-site dd { margin-top: 10px; font: 800 expanded clamp(2.4rem, 1.6rem + 3vw, 4.5rem)/0.9 var(--font-display); letter-spacing: -0.05em; }
.notes-site div:first-child dd { color: var(--color-bleu-sur-nuit); }
.comparatif { width: 100%; margin-top: var(--s-48); border-collapse: collapse; font-size: var(--t-small); }
.comparatif th, .comparatif td { padding: 12px 10px 12px 0; text-align: left; border-bottom: 1px solid var(--color-filet-nuit); font-weight: 400; color: var(--color-texte-nuit-2); }
.comparatif thead th { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.comparatif tbody th { color: var(--color-texte-nuit); }
.comparatif td { font-variant-numeric: tabular-nums; }
.comparatif tr:first-child td, .comparatif tr:first-child th { color: var(--color-texte-nuit); font-weight: 600; }
.defile-tableau { overflow-x: auto; }
.defile-tableau .comparatif { min-width: 30rem; }
.capture-ia { width: min(100%, 18rem); margin: 0; justify-self: center; }
.capture-ia__ecran { max-height: 34rem; overflow: hidden; border-radius: var(--r-carte); background: var(--color-blanc); box-shadow: 0 0 40px var(--color-ombre); }
.capture-ia img { width: 100%; height: auto; }
.capture-ia figcaption { margin-top: var(--s-16); font-size: var(--t-small); color: var(--color-texte-nuit-2); }
.sombre .texte, .sombre .bloc__chapo { color: var(--color-texte-nuit-2); }
@media (max-width: 991px) {
  .preuve-site { grid-template-columns: minmax(0, 1fr); }
  .notes-site { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- /visite ---------- */
.visite-grand { position: relative; margin: 0 auto; border-radius: var(--r-panneau); overflow: hidden; background: var(--color-nuit); aspect-ratio: 4 / 3; width: min(100%, calc(80vh * 4 / 3)); }
.visite-pratique { margin-top: var(--sec-96); }
.visite-grand + .prix-note { margin-inline: auto; max-width: min(100%, calc(80vh * 4 / 3)); }
.visite-grand video { width: 100%; height: 100%; object-fit: contain; }
.origine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gout); margin-top: var(--s-48); }
.origine__colonne { display: grid; gap: var(--s-16); align-content: start; }
.origine__titre { font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
.origine__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.origine__vide { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 10px; border: 1px dashed var(--color-filet-fort); border-radius: var(--r-vignette); text-align: center; }
.origine__video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-vignette); background: var(--color-papier-2); }
.origine__video img, .origine__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.formats { display: grid; grid-template-columns: minmax(0, 16fr) minmax(0, 5.5fr); gap: var(--gout); align-items: end; margin-top: var(--s-48); }
.format { margin: 0; }
.format__image { overflow: hidden; border-radius: var(--r-vignette); background: var(--color-papier-2); }
.format__image img { width: 100%; height: auto; }
.format figcaption { display: grid; gap: 4px; margin-top: var(--s-16); padding-top: 10px; border-top: 1px solid var(--color-encre); font-size: var(--t-small); color: var(--color-texte-2); }
.format figcaption b { font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-encre); }
@media (max-width: 767px) {
  .origine { grid-template-columns: minmax(0, 1fr); }
  .formats { grid-template-columns: minmax(0, 1fr) minmax(0, 0.45fr); gap: 10px; }
}
.choix { display: grid; gap: 8px; grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.choix legend { margin-bottom: 6px; padding: 0; font: 500 var(--t-tag)/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
.choix__options { display: flex; flex-wrap: wrap; gap: 8px; }
.choix label { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: var(--bord) solid var(--color-filet-fort); border-radius: var(--r-bouton); background: var(--color-blanc); cursor: pointer; font-size: var(--t-body); }
.choix label:hover { border-color: var(--color-encre); }
.choix label:has(input:checked) { border-color: var(--color-bleu); box-shadow: inset 0 0 0 1px var(--color-bleu); }
.choix input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-bleu); }
.choix input:focus-visible { outline: 2px solid var(--color-bleu); outline-offset: 2px; }
.miroir input[type="number"] { -moz-appearance: textfield; }

/* ---------- /instagram ---------- */
.types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); margin-top: var(--s-64); }
.type { position: relative; margin: 0; }
.type--carrousel > .type__badge { z-index: 5; }
.etiquette-modele { margin-bottom: var(--s-16); }
.etiquette-visuel--en-ligne { position: static; display: inline-block; }
.type__visuel { position: relative; aspect-ratio: 4 / 5; overflow: visible; }
.type__visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-vignette); box-shadow: 0 0 30px -6px var(--color-ombre); }
.type__visuel--pile img:nth-child(1) { transform: translate(14px, -14px) rotate(3deg); opacity: 0.55; }
.type__visuel--pile img:nth-child(2) { transform: translate(7px, -7px) rotate(1.5deg); opacity: 0.8; }
.type__visuel--reel { display: grid; place-items: center; border: 1px dashed var(--color-filet-fort); border-radius: var(--r-vignette); background: var(--color-teinte-papier); }
.type__visuel--reel img { opacity: 0.35; filter: grayscale(1); }
.type__badge { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 6px 9px; border-radius: var(--r-bouton); font: 500 10px/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-blanc); background: var(--color-encre); }
.type__badge--bleu { background: var(--color-bleu); }
.type figcaption { margin-top: var(--s-24); padding-top: 12px; border-top: 1px solid var(--color-encre); }
.type__nom { font: 800 expanded var(--t-heading-md)/1.2 var(--font-display); letter-spacing: -0.02em; }
.type__prix { margin-top: 6px; font-size: var(--t-small); color: var(--color-texte-2); }
@media (max-width: 767px) { .types { grid-template-columns: minmax(0, 1fr); gap: var(--s-48); } .type__visuel { max-width: 22rem; } }

.composeur { margin-top: var(--s-64); }
.composeur__cases { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; }
.case-pack {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; width: 100%; aspect-ratio: 4 / 6.2;
  padding: 10px; border: var(--bord) solid var(--color-filet-fort); border-radius: var(--r-carte);
  background: var(--color-blanc); color: var(--color-encre); text-align: left; cursor: pointer;
  transition: border-color var(--dur-court) var(--ease-out), background-color var(--dur-court) var(--ease-out), transform var(--dur-court) var(--ease-out);
}
.case-pack:hover { border-color: var(--color-encre); }
.case-pack:active { transform: translateY(1px); }
.case-pack:focus-visible { outline: 2px solid var(--color-bleu); outline-offset: 2px; }
.case-pack[aria-pressed="true"] { border-color: var(--color-bleu); box-shadow: inset 0 0 0 1px var(--color-bleu); }
.case-pack__num { font: 500 11px/1 var(--font-mono); color: var(--color-texte-2); }
.case-pack__dessin { position: relative; align-self: center; justify-self: center; width: 72%; aspect-ratio: 4 / 5; }
.case-pack__dessin i { position: absolute; inset: 0; border-radius: 3px; background: var(--color-feuille); border: 1px solid var(--color-filet-fort); opacity: 0; transition: transform var(--dur-moyen) var(--ease-out), opacity var(--dur-moyen) var(--ease-out); }
.case-pack__dessin img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; box-shadow: 0 1px 2px var(--color-ombre-proche); }
.case-pack[aria-pressed="true"] .case-pack__dessin i:nth-child(1) { opacity: 1; transform: translate(9px, -9px); }
.case-pack[aria-pressed="true"] .case-pack__dessin i:nth-child(2) { opacity: 1; transform: translate(4.5px, -4.5px); }
/* le carrousel se reconnaît à sa pile et à son compteur, comme sur Instagram */
.case-pack[aria-pressed="true"] .case-pack__dessin::after { content: "1/5"; position: absolute; z-index: 2; right: 4px; top: 4px; padding: 3px 4px; border-radius: 2px; font: 500 9px/1 var(--font-mono); color: var(--color-blanc); background: var(--color-encre); }
.case-pack__type { font: 600 var(--t-small)/1.2 var(--font-body); }
.case-pack__prix { display: block; margin-top: 2px; font: 500 11px/1 var(--font-mono); color: var(--color-texte-2); }
.composeur__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-24); margin-top: var(--s-32); padding-top: var(--s-24); border-top: 1px solid var(--color-encre); }
.composeur__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px var(--s-24); }
.composeur__compte { font-size: var(--t-body); color: var(--color-texte-2); }
.composeur__montant { font: 800 expanded clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem)/1 var(--font-display); letter-spacing: -0.045em; }
@media (max-width: 991px) { .composeur__cases { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 599px) { .composeur__cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } .case-pack { aspect-ratio: 4 / 5; } .composeur__pied .btn { width: 100%; } }

.insta-tete__texte .tete__titre { font-size: clamp(2rem, 1.25rem + 2.3vw, 3.5rem); line-height: 1.02; max-width: 16ch; }
.mensuel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-32) var(--gout-large); align-items: center; padding: var(--s-48); border-radius: var(--r-panneau); background: var(--color-teinte-papier); }
@media (max-width: 767px) { .mensuel { grid-template-columns: minmax(0, 1fr); padding: var(--s-32) var(--s-24); } .mensuel .au-mois { justify-self: start; } }

/* ---------- Comprendre : la vidéo ---------- */
.video-niel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-48) var(--gout-large); align-items: center; }
@media (max-width: 991px) { .video-niel { grid-template-columns: minmax(0, 1fr); } }

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-video] { display: none; }
  .defile__page { animation: none; }
}