/* Framehit — site (refonte design system V2, septembre 2026).
   Direction sombre et cinématographique. Couleurs, dégradés, rayons, lueurs et durées : uniquement les tokens de tokens.css.
   Règles : un seul CTA primaire (lueur) par écran, une seule carte mise en avant par écran, un seul fond graphique par section.
   N'anime que transform et opacity ; tout s'arrête avec prefers-reduced-motion ou le bouton pause. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond-0); color: var(--texte-fort); font-family: var(--font-texte); font-size: var(--corps); line-height: var(--corps-lh); letter-spacing: var(--texte-ls); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--fh-acier-300); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-evitement { position: absolute; left: var(--esp-2); top: -80px; z-index: 100; padding: 12px 20px; border-radius: var(--rayon-pilule); background: var(--fh-papier); color: var(--fh-encre); font-weight: 600; text-decoration: none; }
.lien-evitement:focus { top: var(--esp-2); color: var(--fh-encre); }
.conteneur { max-width: calc(var(--conteneur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 0 var(--gouttiere); }
.section { position: relative; padding-block: var(--section-y); }
.bordee { border-top: 1px solid var(--bord); }
.icone { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Texte ---------- */
.titre { margin: 0; font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight); letter-spacing: var(--display-ls); color: var(--texte-fort); text-wrap: balance; }
.titre-xl { font-size: var(--display-xl); line-height: var(--display-xl-lh); }
.titre-l { font-size: var(--display-l); line-height: var(--display-l-lh); }
.titre-m { font-size: var(--display-m); line-height: var(--display-m-lh); }
.titre-s { font-size: var(--display-s); line-height: var(--display-s-lh); }
.titre-carte { margin: 0; font-family: var(--font-display); font-stretch: var(--display-stretch-titre); font-weight: 800; font-size: var(--titre); line-height: var(--titre-lh); letter-spacing: var(--titre-ls); color: var(--texte-fort); text-wrap: balance; }
.accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -.01em; font-size: 1.02em; }
.eteint { color: var(--texte-3); }
.texte { margin: 0; color: var(--texte-2); text-wrap: pretty; }
.texte-l { font-size: var(--corps-l); line-height: var(--corps-l-lh); }
.texte-s { font-size: var(--corps-s); line-height: var(--corps-s-lh); }
.mot { color: var(--texte-fort); font-weight: 500; }
.surtitre { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; font-size: var(--label); line-height: 1.2; letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--texte-bleu); }
.surtitre img { height: 10px; width: auto; opacity: .9; }
.mono { font-family: var(--font-mono); font-size: var(--mention); letter-spacing: var(--mention-ls); color: var(--texte-3); }
.reassurance { margin: 0; font-size: var(--corps-s); line-height: var(--corps-s-lh); color: var(--texte-2); }
.lien { color: var(--texte-fort); text-decoration: underline; text-decoration-color: var(--blanc-40); text-underline-offset: 3px; }
.lien:hover { color: var(--texte-fort); text-decoration-color: var(--fh-papier); }

/* En-tête de section : surtitre, titre, chapeau */
.tete { display: flex; flex-direction: column; gap: 20px; max-width: 860px; }
.tete.centre { align-items: center; text-align: center; margin: 0 auto; }
.tete.centre .surtitre { justify-content: center; }
.tete .texte { max-width: 620px; }

/* ---------- Boutons (pilules) ---------- */
.bouton { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 26px; border: 1px solid transparent; border-radius: var(--rayon-pilule); font-family: var(--font-texte); font-weight: 600; font-size: 15px; letter-spacing: -.005em; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--dur-court) var(--ease-sortie), box-shadow var(--dur-moyen) var(--ease-sortie), border-color var(--dur-court), color var(--dur-court); }
.bouton-lg { min-height: 56px; padding: 18px 32px; font-size: 16px; }
.bouton-sm { min-height: 44px; padding: 10px 18px; font-size: 13px; }
.bouton .fleche { display: inline-block; transition: transform var(--dur-moyen) var(--ease-sortie); }
.bouton:hover .fleche { transform: translateX(4px); }
.bouton-primaire { background: var(--fh-papier); color: var(--fh-encre); box-shadow: var(--lueur); }
.bouton-primaire:hover { color: var(--fh-encre); box-shadow: var(--lueur-survol); }
.bouton-primaire:active { background: var(--fh-acier-100); }
.bouton-secondaire { background: var(--blanc-6); color: var(--texte-fort); border-color: var(--blanc-12); -webkit-backdrop-filter: var(--flou-verre); backdrop-filter: var(--flou-verre); }
.bouton-secondaire:hover { background: var(--blanc-8); border-color: var(--blanc-20); color: var(--texte-fort); }
.bouton-secondaire:active { background: var(--blanc-4); }
.bouton-tertiaire { min-height: 44px; padding: 0; background: none; color: var(--texte-2); }
.bouton-tertiaire:hover { color: var(--texte-fort); }
.bouton[disabled] { opacity: .4; cursor: not-allowed; }
.pleine-largeur { display: flex; width: 100%; }
.bouton-rond { width: 44px; height: 44px; min-height: 44px; padding: 0; }
.bouton-rond .icone { font-size: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--rayon-pilule); font-weight: 500; font-size: 13px; line-height: 1; white-space: nowrap; }
.badge-rarete { padding: 8px 14px 8px 12px; background: var(--blanc-6); border: 1px solid var(--blanc-12); color: var(--texte-fort); -webkit-backdrop-filter: var(--flou-verre); backdrop-filter: var(--flou-verre); }
.badge-rarete::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fh-acier-300); animation: fh-pulse 2s var(--ease-sortie) infinite; }
.badge-populaire { padding: 7px 14px; background: var(--fh-acier-600); color: var(--fh-papier); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid rgba(166, 186, 205, .5); }
.badge-tag { padding: 7px 12px; background: var(--blanc-4); border: 1px solid var(--blanc-8); color: var(--texte-2); }

/* ---------- Cartes ---------- */
.carte { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--rayon-carte); padding: var(--esp-4); background: var(--surface-verre); border: 1px solid var(--bord); color: var(--texte-fort); -webkit-backdrop-filter: var(--flou-verre); backdrop-filter: var(--flou-verre); transition: background var(--dur-court) var(--ease-sortie), border-color var(--dur-court) var(--ease-sortie); }
.carte-interactive:hover { background: var(--blanc-8); border-color: var(--blanc-20); }
.carte-avant { overflow: visible; background: linear-gradient(var(--fond-1), var(--fond-1)) padding-box, var(--bord-lumineux) border-box; border: 1px solid transparent; box-shadow: var(--lueur-carte); -webkit-backdrop-filter: none; backdrop-filter: none; }
.carte-avant .halo-carte { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.carte-avant .halo-carte::before { content: ""; position: absolute; left: -20%; right: -20%; top: -45%; height: 80%; background: var(--halo-titre); animation: fh-respire var(--dur-respire) var(--ease-douce) infinite; }
.carte-coin::after { content: ""; position: absolute; top: 20px; right: 20px; width: 16px; height: 12px; background: url("../img/brand/signe-blanc.svg") center / contain no-repeat; opacity: .5; }

/* ---------- Fonds graphiques (un seul par section) ---------- */
.motif { position: relative; isolation: isolate; overflow: hidden; background: var(--fond-0); }
.motif > .fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fond-radial { background: var(--fh-degrade-radial); }
.fond-lineaire { background: var(--fh-degrade-lineaire); }
.fond-halo { background: var(--fh-degrade-halo); animation: fh-respire var(--dur-respire) var(--ease-douce) infinite; }
.fond-ondes::before { content: ""; position: absolute; inset: 0; background: var(--fh-degrade-halo); opacity: .7; }
.fond-ondes::after { content: ""; position: absolute; inset: 0; opacity: .6; background: repeating-radial-gradient(circle at 85% 120%, rgba(166, 186, 205, 0) 0 17px, rgba(166, 186, 205, .28) 17px 18px); -webkit-mask-image: radial-gradient(75% 75% at 85% 100%, var(--fh-noir) 10%, transparent 75%); mask-image: radial-gradient(75% 75% at 85% 100%, var(--fh-noir) 10%, transparent 75%); }
.particules { position: absolute; inset: -20px; background-image: radial-gradient(rgba(166, 186, 205, .55) 1px, transparent 1.6px); background-size: 14px 14px; -webkit-mask-image: radial-gradient(60% 50% at 60% 72%, var(--fh-noir) 0%, transparent 100%); mask-image: radial-gradient(60% 50% at 60% 72%, var(--fh-noir) 0%, transparent 100%); animation: fh-derive 14s var(--ease-douce) infinite; }

/* ---------- Révélation au scroll ---------- */
.js [data-revele] { opacity: 0; transform: translateY(var(--montee)); transition: opacity var(--dur-revele) var(--ease-sortie), transform var(--dur-revele) var(--ease-sortie); transition-delay: var(--delai, 0ms); }
.js [data-revele].est-vu { opacity: 1; transform: none; }
.js .sans-transition[data-revele] { transition: none; }

/* ---------- En-tête : barre pleine largeur en haut de page ; au défilement, elle se détache comme une goutte
   et devient une pilule flottante en verre flou (la largeur et l'arrondi d'abord, puis la descente). Elle se recolle en haut. ---------- */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; }
.entete .barre { pointer-events: auto; height: 76px; margin: 0 auto; display: flex; align-items: center; gap: 32px; max-width: calc(var(--conteneur) + 2 * var(--gouttiere)); padding: 0 var(--gouttiere); border: 1px solid transparent; border-radius: 0; background: transparent; transform: translateY(0);
  transition: max-width var(--dur-revele) var(--ease-sortie), height var(--dur-revele) var(--ease-sortie), padding var(--dur-revele) var(--ease-sortie), border-radius var(--dur-moyen) var(--ease-sortie), background var(--dur-moyen) var(--ease-sortie), border-color var(--dur-moyen) var(--ease-sortie), transform var(--dur-revele) var(--ease-sortie) 90ms; }
.entete.est-detache .barre { max-width: min(1180px, calc(100% - 24px)); height: 64px; padding: 0 8px 0 24px; border-radius: var(--rayon-pilule); border-color: var(--blanc-12); background: rgba(11, 13, 15, .72); -webkit-backdrop-filter: var(--flou-verre); backdrop-filter: var(--flou-verre); transform: translateY(12px); }
.entete .marque { display: block; flex: none; }
.entete .marque img { height: 26px; width: auto; transition: height var(--dur-moyen) var(--ease-sortie); }
.entete.est-detache .marque img { height: 22px; }
.nav { display: flex; gap: 32px; margin-left: auto; }
.nav a { font-size: 14px; font-weight: 500; color: var(--texte-2); text-decoration: none; padding: 12px 0; }
.entete.est-detache .nav a { color: var(--blanc-70); }
.nav a:hover, .nav a[aria-current="true"], .entete.est-detache .nav a:hover, .entete.est-detache .nav a[aria-current="true"] { color: var(--texte-fort); }
.entete .droite { display: flex; align-items: center; gap: 10px; }
.bouton-menu { display: none; }
.menu-mobile { display: none; }
@media (max-width: 900px) {
  .entete .barre { height: 64px; gap: 16px; }
  .entete.est-detache .barre { height: 56px; padding: 0 6px 0 18px; }
  .entete .marque img { height: 22px; }
  .entete.est-detache .marque img { height: 20px; }
  .nav { display: none; }
  .entete .droite { margin-left: auto; }
  .bouton-menu { display: inline-flex; }
  .entete .droite .bouton-offres { display: none; }
  .menu-mobile.est-ouvert { pointer-events: auto; display: flex; flex-direction: column; margin: 20px 12px 0; padding: 6px 20px; border-radius: var(--rayon-carte); border: 1px solid var(--blanc-12); background: rgba(11, 13, 15, .72); -webkit-backdrop-filter: var(--flou-verre); backdrop-filter: var(--flou-verre); }
  .menu-mobile a { padding: 14px 0; font-size: 18px; font-weight: 500; color: var(--texte-fort); text-decoration: none; border-bottom: 1px solid var(--bord); }
  .menu-mobile a:last-child { border-bottom: 0; }
}

/* ---------- Barre CTA mobile (verre flou) ---------- */
.barre-mobile { display: none; }
@media (max-width: 759px) {
  .barre-mobile { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45; padding: 8px; border-radius: var(--rayon-pilule); background: var(--noir-80); border: 1px solid var(--bord); -webkit-backdrop-filter: var(--flou-verre); backdrop-filter: var(--flou-verre); transform: translateY(160%); visibility: hidden; transition: transform var(--dur-moyen) var(--ease-sortie), visibility 0s linear var(--dur-moyen); }
  .barre-mobile.est-visible { transform: none; visibility: visible; transition: transform var(--dur-moyen) var(--ease-sortie), visibility 0s; }
}

/* ---------- Hero ---------- */
.hero { padding: calc(76px + clamp(56px, 8vw, 112px)) 0 var(--section-y); }
.hero .halo-hero { position: absolute; left: 50%; top: 42%; width: min(1100px, 120vw); aspect-ratio: 2 / 1; transform: translate(-50%, -50%); background: var(--halo-titre); opacity: .6; pointer-events: none; z-index: -1; animation: fh-respire var(--dur-respire) var(--ease-douce) infinite; }
.hero .interieur { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.hero h1 { max-width: 1100px; }
.hero .texte { max-width: 620px; }
.hero .reassurance { color: var(--texte-fort); }
.hero-apparait { animation: hero-fondu var(--dur-revele) var(--ease-sortie) both; }
@keyframes hero-fondu { from { opacity: .001; } to { opacity: 1; } }
@media (max-width: 759px) {
  .hero { padding-top: calc(64px + 40px); padding-bottom: 72px; }
  .hero .interieur { gap: 20px; }
  .hero h1 { font-size: clamp(44px, 12.4vw, 60px); }
  .hero .texte-l { font-size: 17px; }
  .hero .actions { flex-direction: column; width: 100%; }
  .hero .actions .bouton { width: 100%; }
  /* Contraste AA : sur mobile, le bas du dégradé radial est plus clair derrière les petits textes. */
  .hero .fond-radial { opacity: .75; }
}
@media (max-width: 960px) { #methode .fond-halo { opacity: .5; } }

/* ---------- Réalisations : deux rangées qui défilent ---------- */
.rangees { display: grid; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.defile { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, var(--fh-noir) 8%, var(--fh-noir) 92%, transparent); mask-image: linear-gradient(90deg, transparent, var(--fh-noir) 8%, var(--fh-noir) 92%, transparent); }
.defile .piste { display: flex; gap: 16px; width: max-content; animation: fh-defile var(--vitesse, 120s) linear infinite; }
.defile.inverse .piste { animation-direction: reverse; }
.defile:hover .piste { animation-play-state: paused; }
.vignette { margin: 0; flex: none; width: clamp(200px, 21vw, 290px); border-radius: var(--rayon-carte-s); overflow: hidden; border: 1px solid var(--bord); background: var(--fond-2); }
.vignette img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pied-section { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; margin-top: 32px; }
.pied-section .texte-s { max-width: 640px; }

/* ---------- Preuves : chiffres réels ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 72px); }
.stat { display: flex; flex-direction: column; }
.stat .icone { font-size: 22px; color: var(--fh-acier-300); margin-bottom: var(--esp-2); }
.stat .valeur { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight); font-size: var(--display-m); line-height: var(--display-m-lh); letter-spacing: var(--display-ls); font-variant-numeric: tabular-nums; }
.stat .libelle { margin: 10px 0 0; font-size: var(--corps-s); line-height: var(--corps-s-lh); color: var(--texte-2); }
.relance { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(40px, 5vw, 56px); text-align: center; }
@media (max-width: 960px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }

/* ---------- Comparatif ---------- */
.comparatif { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 960px; margin: clamp(40px, 5vw, 64px) auto 0; }
.colonne { padding: 32px; border-radius: var(--rayon-carte); }
.colonne.classique { background: var(--blanc-4); border: 1px solid var(--bord); }
.colonne .nom { display: block; margin-bottom: 12px; font-family: var(--font-display); font-stretch: var(--display-stretch-titre); font-weight: 800; font-size: var(--titre); line-height: var(--titre-lh); }
.colonne.classique .nom { color: var(--texte-3); }
.colonne ul { list-style: none; margin: 0; padding: 0; }
.colonne li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--bord); }
.colonne .puce { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.colonne.classique .puce { background: var(--blanc-6); color: var(--texte-3); }
.colonne.framehit .puce { background: var(--fh-papier); color: var(--fh-encre); }
.colonne .critere { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.colonne .val { display: block; margin-top: 6px; font-size: 17px; }
.colonne.classique .val { color: var(--texte-3); text-decoration: line-through; text-decoration-color: var(--blanc-20); }
.colonne.framehit .val { color: var(--texte-fort); font-weight: 600; }
.source-comparatif { max-width: 960px; margin: 16px auto 0; text-align: center; font-size: var(--caption); line-height: var(--caption-lh); color: var(--texte-2); }
@media (max-width: 760px) { .comparatif { grid-template-columns: 1fr; } .colonne { padding: 24px; } }

/* ---------- Étiquette exacte + avant / après ---------- */
.etiquette { background: var(--fond-1); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.etiquette .grille { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.etiquette .tete { max-width: 560px; }
.liste-coches { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.liste-coches li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--corps); color: var(--texte-2); }
.liste-coches .puce { flex: none; margin-top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bleu-30); color: var(--fh-papier); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.ba-figure { margin: 0; display: grid; gap: 12px; }
.ba { position: relative; aspect-ratio: 4 / 5; border-radius: var(--rayon-carte); overflow: hidden; border: 1px solid var(--bord); background: var(--fh-papier); --pos: 50%; user-select: none; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .apres { clip-path: inset(0 0 0 var(--pos)); }
.ba .poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--fh-papier); pointer-events: none; }
.ba .poignee::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--fh-papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1F20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6'/%3E%3Cpath d='m15 6 6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat; }
.ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba input[type="range"]:focus-visible + .poignee::after { outline: 2px solid var(--fh-acier-300); outline-offset: 3px; }
.ba .etiq { position: absolute; top: 12px; padding: 6px 10px; border-radius: var(--rayon-pilule); background: var(--noir-80); color: var(--fh-papier); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; pointer-events: none; }
.ba .etiq.g { left: 12px; } .ba .etiq.d { right: 12px; }
@media (max-width: 880px) { .etiquette .grille { grid-template-columns: 1fr; } .ba { max-width: 480px; } }

/* ---------- Méthode : trois étapes avec mini-interfaces ---------- */
/* Les étapes s'empilent au défilement : chaque carte colle sous l'en-tête, la suivante glisse par-dessus.
   Cartes opaques (jamais de verre posé sur du verre) ; overflow: clip garde le fond sans bloquer le collage. */
#methode.motif { overflow: clip; }
#methode .reassurance { color: var(--texte-fort); }
.etapes { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1000px; margin: clamp(40px, 5vw, 72px) auto 0; }
.etape { position: sticky; top: calc(96px + var(--i, 0) * 20px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: center; min-height: 300px; padding: clamp(24px, 4vw, 40px); background: var(--fond-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.etape:nth-child(2) { background: var(--fond-2); }
.etape:nth-child(3) { background: linear-gradient(var(--blanc-4), var(--blanc-4)), var(--fond-2); }
.etape .corps { order: -1; }
.etape .num { font-family: var(--font-mono); font-size: 12px; color: var(--texte-bleu); }
.etape .titre-carte { margin-top: 10px; }
.etape .texte { margin-top: 10px; }
@media (max-width: 820px) { .etapes { max-width: 560px; gap: 16px; } .etape { top: calc(80px + var(--i, 0) * 14px); grid-template-columns: 1fr; gap: 0; min-height: 0; padding: 16px; } .etape .corps { order: 0; padding: 24px 12px 12px; } }
/* Pas d'empilement sur écran bas ou avec le mouvement réduit : les cartes se suivent simplement */
@media (max-height: 640px), (prefers-reduced-motion: reduce) { .etape { position: relative; top: auto; } }
.ecran { position: relative; height: 210px; overflow: hidden; border-radius: var(--rayon-interne); background: var(--fond-0); border: 1px solid var(--bord); padding: 14px; font-size: 11px; color: var(--texte-2); }
.ecran .lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--texte-bleu); }
.ecran .haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ecran .haut b { color: var(--texte-fort); font-weight: 600; font-size: 12px; }

/* Étape 1 : le formulaire se remplit, le texte s'écrit avec un curseur */
.mini-ligne { padding: 8px 0; border-top: 1px solid var(--bord); }
.mini-ligne .valeur-mini { margin-top: 4px; color: var(--texte-fort); font-size: 12px; }
.frappe { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; max-width: 18ch; }
.js .ecran-commande .frappe { max-width: 0; }
.js .ecran-commande.est-vivant .frappe { max-width: 18ch; transition: max-width 1.4s steps(18) .3s; }
.curseur { display: inline-block; width: 1px; height: 12px; margin-left: 2px; vertical-align: -2px; background: var(--fh-papier); animation: clignote 1s steps(1) 6; }
@keyframes clignote { 50% { opacity: 0; } }
.barre-vide { height: 5px; margin-top: 6px; border-radius: 3px; background: var(--blanc-8); }
.pastilles-couleur { display: flex; gap: 6px; margin-top: 6px; }
.pastilles-couleur i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--blanc-20); }

/* Étape 2 : le rendu progresse */
.puces-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.puces-mini span { padding: 4px 9px; border-radius: var(--rayon-pilule); background: var(--blanc-6); border: 1px solid var(--bord); color: var(--texte-2); font-size: 10px; }
.apercu-mini { position: relative; height: 84px; overflow: hidden; border-radius: var(--rayon-s); background: var(--fond-2); margin-bottom: 12px; }
.apercu-mini::before { content: ""; position: absolute; inset: 0; background: var(--fh-degrade-halo); opacity: .8; }
.apercu-mini .pot { position: absolute; left: 50%; bottom: 14%; width: 30px; height: 40px; transform: translateX(-50%); border-radius: 4px 4px 5px 5px; background: linear-gradient(var(--fh-acier-200) 0 20%, var(--fh-acier-900) 20% 100%); }
.apercu-mini .lab { position: absolute; left: 10px; bottom: 8px; color: var(--texte-2); }
.rendu { display: flex; align-items: center; gap: 10px; }
.rendu .jauge { flex: 1; height: 6px; border-radius: 3px; background: var(--blanc-8); overflow: hidden; }
.rendu .jauge i { display: block; height: 100%; background: var(--fh-acier-300); transform-origin: left; }
.js .ecran-creation .jauge i { transform: scaleX(.04); }
.js .ecran-creation.est-vivant .jauge i { transform: none; transition: transform 2.4s var(--ease-douce) .3s; }

/* Étape 3 : « Modifications en cours » passe à « Validé » */
.bulle { padding: 8px 10px; border-radius: var(--rayon-s); background: var(--blanc-6); border: 1px solid var(--bord); color: var(--texte-2); font-size: 11px; }
.bulle b { color: var(--texte-fort); font-weight: 600; }
.statut { position: relative; display: inline-flex; margin: 10px 0; height: 24px; }
.statut span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--rayon-pilule); font-size: 10.5px; font-weight: 600; transition: opacity var(--dur-moyen) var(--ease-sortie) 1.4s; }
.statut .en-cours { background: var(--bleu-20); color: var(--fh-acier-200); border: 1px solid var(--bleu-40); }
.statut .valide { position: absolute; left: 0; top: 0; background: var(--fh-papier); color: var(--fh-encre); }
.js .ecran-livraison .statut .valide { opacity: 0; }
.js .ecran-livraison.est-vivant .statut .en-cours { opacity: 0; }
.js .ecran-livraison.est-vivant .statut .valide { opacity: 1; }
.fichiers { display: grid; gap: 6px; }
.fichiers div { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--texte-2); }
.fichiers .icone { font-size: 12px; color: var(--fh-acier-300); }

/* ---------- Offres ---------- */
.offres { background: var(--fond-1); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.tarifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; margin-top: clamp(48px, 5vw, 64px); padding-top: 24px; }
.tarif { display: flex; flex-direction: column; }
.tarif.carte-avant { padding: 48px 32px 32px; margin-top: -24px; }
.tarif .badge-populaire { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); }
.tarif .nom { margin: 0; font-weight: 600; font-size: var(--label); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--texte-2); }
.tarif.carte-avant .nom { color: var(--fh-acier-200); }
.tarif .ligne-prix { margin-top: var(--esp-3); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tarif .prix { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight); font-size: clamp(64px, 6vw, 88px); line-height: .86; letter-spacing: var(--display-ls); font-variant-numeric: tabular-nums; }
.tarif .periode { font-size: 13px; color: var(--texte-3); }
.tarif .unitaire { margin-top: 10px; font-size: 14px; color: var(--texte-2); }
.tarif .phrase { margin: var(--esp-3) 0 0; font-size: 15px; line-height: 1.5; color: var(--texte-fort); }
.tarif .cta { margin-top: var(--esp-3); }
.tarif .garantie { margin-top: var(--esp-2); display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texte-2); }
.tarif .garantie .icone { font-size: 14px; }
.tarif .separateur { margin: var(--esp-3) 0 var(--esp-2); height: 1px; background: var(--bord); }
.inclusions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.inclusions li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--texte-2); }
.inclusions .puce { flex: none; margin-top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--blanc-8); color: var(--fh-papier); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.carte-avant .inclusions .puce { background: var(--bleu-30); }
.tarif-video { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: center; }
.tarif-video .cta { margin-top: 20px; }
.barre-devis { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 20px 20px 20px 32px; }
.barre-devis .texte { max-width: 640px; }
.mention-offres { margin: 28px auto 0; max-width: 820px; text-align: center; font-size: var(--corps-s); line-height: var(--corps-s-lh); color: var(--texte-2); }
.mention-offres a { color: var(--texte-fort); text-underline-offset: 3px; text-decoration: underline; text-decoration-color: var(--blanc-40); }
@media (max-width: 960px) {
  .tarifs { grid-template-columns: 1fr; gap: 40px; max-width: 480px; margin-left: auto; margin-right: auto; }
  .tarif.carte-avant { order: -1; margin-top: 0; }
  .tarif-video { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .barre-devis { max-width: 480px; margin-left: auto; margin-right: auto; padding: 24px; }
}

/* ---------- Garantie ---------- */
.garantie-bloc { border-radius: var(--rayon-carte); border: 1px solid var(--bord); padding: clamp(32px, 5vw, 64px); display: flex; align-items: center; gap: clamp(28px, 5vw, 56px); }
.garantie-bloc .signe { flex: none; width: clamp(56px, 8vw, 96px); height: auto; }
.garantie-bloc .texte { margin-top: 16px; max-width: 640px; }
@media (max-width: 760px) { .garantie-bloc { flex-direction: column; align-items: flex-start; } }

/* ---------- FAQ : titre à gauche, accordéon à droite ---------- */
.faq-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(40px, 7vw, 80px); align-items: start; }
.accordeon { border-top: 1px solid var(--bord); }
.accordeon .item { border-bottom: 1px solid var(--bord); }
.accordeon h3 { margin: 0; }
.accordeon button { appearance: none; width: 100%; display: flex; align-items: center; gap: 16px; padding: 24px 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--texte-fort); font-family: var(--font-texte); font-weight: 500; font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -.01em; }
.accordeon button span:first-child { flex: 1; }
.accordeon .signe-plus { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--blanc-12); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; transition: transform var(--dur-moyen) var(--ease-sortie), background var(--dur-court); }
.accordeon button[aria-expanded="true"] .signe-plus { transform: rotate(45deg); background: var(--blanc-8); }
.accordeon .panneau { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-moyen) var(--ease-sortie); }
.accordeon .panneau > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--dur-moyen); }
.accordeon .item.est-ouvert .panneau > div { visibility: visible; transition: visibility 0s; }
.accordeon .item.est-ouvert .panneau { grid-template-rows: 1fr; }
.accordeon .panneau p { margin: 0; padding: 0 48px 24px 0; max-width: 720px; color: var(--texte-2); }
.accordeon .panneau a { color: var(--texte-fort); text-underline-offset: 3px; }
@media (max-width: 860px) { .faq-grille { grid-template-columns: 1fr; } .accordeon .panneau p { padding-right: 0; } }

/* ---------- CTA final ---------- */
.cta-final { min-height: 92vh; display: flex; align-items: center; }
.cta-final .interieur { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.cta-final .texte { max-width: 560px; }
/* Signe raccourci en 3D : objet de marque de fin de page. Flottement lent, jamais de rotation. */
.signe-3d { width: clamp(130px, 14vw, 200px); height: auto; margin-bottom: -8px; }
.signe-3d.est-vu { animation: fh-derive 9s var(--ease-douce) infinite; }
.agenda { width: 100%; max-width: 1060px; display: grid; gap: 14px; justify-items: center; }
.agenda .avertissement { max-width: 620px; margin: 0; font-size: var(--corps-s); line-height: var(--corps-s-lh); color: var(--texte-fort); }
.agenda .bouton-tertiaire { color: var(--texte-fort); }
.agenda .avertissement a { color: var(--texte-fort); text-underline-offset: 3px; }
.agenda .calendly-inline-widget { width: 100%; height: 820px; border-radius: var(--rayon-carte); overflow: hidden; background: var(--fh-papier); }
@media (max-width: 1000px) { .agenda .calendly-inline-widget { height: 1040px; } }
@media (max-width: 759px) { .cta-final { min-height: 640px; } }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--bord); padding: 64px 0 32px; }
.pied .signature { margin: 0 0 48px; }
.pied .grille { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.pied .marque img { height: 30px; width: auto; }
.pied .presentation { margin-top: 20px; max-width: 320px; }
.pied h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.pied ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pied ul a { font-size: 14px; color: var(--texte-2); text-decoration: none; }
.pied ul a:hover { color: var(--texte-fort); }
.pied .bas { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--bord); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 13px; color: var(--texte-3); }
.pied .bas .signe { height: 14px; width: auto; }
.pied .bas nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
.pied .bas nav a { color: var(--texte-2); text-decoration: none; }
.pied .bas nav a:hover { color: var(--texte-fort); }
.bouton-pause { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--rayon-pilule); background: var(--blanc-4); border: 1px solid var(--bord); color: var(--texte-2); font-size: 13px; font-weight: 500; cursor: pointer; }
.bouton-pause:hover { background: var(--blanc-8); color: var(--texte-fort); }
.bouton-pause .i-lecture { display: none; }
.animations-en-pause .bouton-pause .i-pause { display: none; }
.animations-en-pause .bouton-pause .i-lecture { display: inline; }
@media (max-width: 860px) { .pied .grille { grid-template-columns: 1fr 1fr; } .pied .grille > div:first-child { grid-column: 1 / -1; } .pied .bas nav { margin-left: 0; } }
@media (max-width: 759px) { .pied { padding-bottom: 104px; } }

/* ---------- Pages légales ---------- */

.page-legale .entete .droite { margin-left: auto; }
.legal { max-width: 820px; padding-top: calc(76px + clamp(48px, 6vw, 88px)); padding-bottom: var(--section-y); }
.legal h1 { margin: 18px 0 12px; }
.legal .maj { margin: 0 0 40px; color: var(--texte-3); font-size: var(--corps-s); }
.legal h2 { margin: 56px 0 14px; font-family: var(--font-display); font-stretch: var(--display-stretch-titre); font-weight: 800; font-size: var(--titre); line-height: var(--titre-lh); letter-spacing: var(--titre-ls); }
.legal h3 { margin: 28px 0 8px; font-size: 17px; font-weight: 600; }
.legal p, .legal li { color: var(--texte-2); max-width: 68ch; }
.legal p + p { margin-top: 12px; }
.legal ul, .legal ol { padding-left: 1.2em; display: grid; gap: 8px; margin: 12px 0; }
.legal a { color: var(--texte-fort); text-decoration: underline; text-decoration-color: var(--blanc-40); text-underline-offset: 3px; }
.legal b, .legal strong { color: var(--texte-fort); font-weight: 600; }
.legal .resume { margin: 24px 0; padding: 24px 32px; border-radius: var(--rayon-carte); background: var(--surface-verre); border: 1px solid var(--bord); }
.legal .resume p:first-child { color: var(--texte-fort); font-weight: 600; }
.legal .tableau { overflow-x: auto; margin: 16px 0; border-radius: var(--rayon-interne); border: 1px solid var(--bord); background: var(--blanc-4); }
.legal table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--bord); color: var(--texte-2); }
.legal th { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-bleu); }
.legal td:first-child { color: var(--texte-fort); }
.legal tr:last-child td { border-bottom: 0; }
.nav-legale { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--bord); }
.nav-legale a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--rayon-pilule); background: var(--blanc-6); border: 1px solid var(--blanc-12); color: var(--texte-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav-legale a:hover { background: var(--blanc-8); border-color: var(--blanc-20); color: var(--texte-fort); }
.nav-legale a[aria-current="page"] { background: var(--fh-papier); color: var(--fh-encre); border-color: transparent; }

/* ---------- Pause des animations (WCAG 2.2.2) et mouvement réduit ---------- */
.animations-en-pause *, .animations-en-pause *::before, .animations-en-pause *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-revele] { opacity: 1; transform: none; }
  .defile { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .js .ecran-commande .frappe { max-width: 18ch; }
  .js .ecran-creation .jauge i { transform: none; }
  .js .ecran-livraison .statut .en-cours { opacity: 0; }
  .js .ecran-livraison .statut .valide { opacity: 1; }
  .bouton-pause { display: none; }
}