/* Clarence&Conciergerie : noir en haut (l'intérieur de l'écrin), crème ensuite.
   Style « filets » : aucune boîte arrondie, des traits fins, beaucoup d'air, comme un magazine de luxe.
   Typo : Imbue pour les titres (magazine de mode), Ysabeau Office pour le texte. */
/* Geist et Geist Mono, hébergées sur le site (licence SIL Open Font License). Fichier écrit par tools/clarence-polices.js */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url(../fonts/Geist-latin-ext-200-600.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url(../fonts/Geist-latin-200-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/GeistMono-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/GeistMono-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/GeistMono-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/GeistMono-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --nuit: #0b0908; --noir: #15120f; --creme: #f2ebdd; --fond: #faf7f1; --sable: #eadfca;
  --gris: #6b645b; --filet: #d9d0bf; --doux: #b9ae9b; --champagne: #e8d9b9;
  --titre: "Geist", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --texte: "Geist", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --nav-h: 76px; --marge: clamp(16px, 5vw, 64px);
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--nuit); color: var(--noir); font-family: var(--texte); font-size: 17px; font-weight: 380; line-height: 1.6; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--creme); color: var(--noir); padding: 8px 14px; }
.skip:focus { left: 12px; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* Bouton : un filet rectangulaire, le texte en petites capitales et un trait qui s'allonge */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--texte); font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--noir); background: transparent; border: 1px solid currentColor; border-radius: 0; padding: 17px 26px; text-decoration: none; cursor: pointer; transition: background .35s, color .35s; font-family: var(--mono); }
.btn::after { content: ""; width: 34px; height: 1px; background: currentColor; transition: width .35s; }
.btn:hover { background: var(--noir); color: var(--creme); }
.btn:hover::after { width: 50px; }
.btn-creme { color: var(--creme); }
.btn-creme:hover { background: var(--creme); color: var(--nuit); }
.btn-ligne { color: inherit; border-color: transparent; padding-left: 0; padding-right: 0; }
.btn-ligne:hover { background: none; color: inherit; }

/* ---------- Menu ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--marge); color: var(--creme); border-bottom: 1px solid transparent; transition: background .4s, color .4s, border-color .4s; }
.nav.sur-creme { background: rgba(250, 247, 241, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--noir); border-bottom-color: var(--filet); }
.nav-logo { position: relative; display: block; width: 150px; flex: none; }
.nav-logo img { width: 100%; height: auto; transition: opacity .4s; }
.logo-n { position: absolute; inset: 0; opacity: 0; }
.nav.sur-creme .logo-c { opacity: 0; }
.nav.sur-creme .logo-n { opacity: 1; }
.nav-liens { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; font-family: var(--mono); }
.nav-liens a { text-decoration: none; opacity: .78; transition: opacity .2s; }
.nav-liens a:hover, .nav-liens a[aria-current="page"] { opacity: 1; }
.nav-liens a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.nav-devis { border: 1px solid currentColor; padding: 10px 18px; opacity: 1 !important; }
.nav-liens .nav-devis[aria-current="page"] { text-decoration: none; border-width: 2px; }
.nav-menu { display: none; font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; background: none; color: inherit; border: 1px solid currentColor; border-radius: 0; padding: 10px 16px; cursor: pointer; font-family: var(--mono); }
@media (max-width: 1100px) {
  .nav-menu { display: block; }
  .nav-liens { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 26px; background: var(--nuit); color: var(--creme); font-size: 14px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
  .nav-liens a { font-family: var(--titre); font-size: 32.8px; font-weight: 400; letter-spacing: 0; text-transform: none; }
  .nav-liens .nav-devis { font-family: var(--texte); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; margin-top: 10px; font-family: var(--mono); }
  .menu-ouvert .nav-liens { opacity: 1; visibility: visible; }
  .menu-ouvert .nav { background: transparent; color: var(--creme); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-ouvert .nav .logo-c { opacity: 1; }
  .menu-ouvert .nav .logo-n { opacity: 0; }
}

/* ---------- Haut de l'accueil : textes partagés avec la visite ---------- */
.pains, .inverse { grid-area: 1 / 1; }
.pains { max-width: min(43vw, 660px); font-family: var(--titre); font-weight: 300; font-size: clamp(32.6px, 4.6vw, 71px); line-height: 1.04; letter-spacing: -.025em; }
.pains span { display: block; }
.pains span + span { margin-top: .14em; }
.inverse { font-size: clamp(15px, 1.7vw, 21px); font-weight: 500; letter-spacing: .34em; text-transform: uppercase; font-family: var(--mono); }
.inverse::before { content: ""; display: block; width: 72px; height: 1px; background: var(--champagne); margin-bottom: 24px; }
.kicker { font-size: 12px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--champagne); font-family: var(--mono); }
@keyframes goutte { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* « L'inverse » attend son tour */
.js:not(.calme) .inverse { opacity: 0; }

/* Sans animation (mouvements réduits) : tout est posé, lisible d'un coup */

/* Téléphone : le texte en haut, l'écrin en dessous */
@media (max-aspect-ratio: 9/10) {
  .pains, .inverse { align-self: start; max-width: none; }
  .pains { font-size: clamp(40px, 11vw, 66px); }
  .inverse { margin-top: 2vh; }
}

/* ---------- Haut des pages intérieures ---------- */
.tete { position: relative; min-height: 88vh; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--nuit); color: var(--creme); }
.tete-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tete::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 9, 8, .55) 0%, rgba(11, 9, 8, .1) 35%, rgba(11, 9, 8, .3) 55%, rgba(11, 9, 8, .9) 100%); }
.tete-texte { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: calc(var(--nav-h) + 8vh) var(--marge) 9vh; }
.tete .kicker { margin-bottom: 18px; }
.tete h1 { font-family: var(--titre); font-weight: 300; font-size: clamp(37px, 5.9vw, 91.8px); line-height: 1; max-width: 9.2em; letter-spacing: -.025em; }
.tete h1 span { display: block; }
.tete-sous { font-size: clamp(18px, 1.8vw, 21px); opacity: .88; margin-top: 22px; max-width: 46ch; }
.tete-prix { margin-top: 20px; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne); font-family: var(--mono); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 30px; }

/* ---------- La partie crème ---------- */
.creme { position: relative; z-index: 1; background: var(--fond); }
.bande { text-align: center; font-size: 15px; padding: 16px var(--marge); border-bottom: 1px solid var(--filet); color: var(--gris); }
.bande b { font-family: var(--titre); font-weight: 400; font-size: 18px; color: var(--noir); }
.sec { max-width: 1240px; margin: 0 auto; padding: clamp(80px, 11vw, 150px) var(--marge) 0; scroll-margin-top: var(--nav-h); }
.eyebrow { display: flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--gris); font-family: var(--mono); }
.eyebrow::before { content: ""; width: 44px; height: 1px; background: currentColor; flex: none; }
.titre { font-family: var(--titre); font-weight: 300; font-size: clamp(34px, 4.7vw, 71px); line-height: 1.02; margin-top: 18px; max-width: 9.85em; letter-spacing: -.025em; }
.chapo { font-size: clamp(18px, 1.9vw, 22px); color: var(--gris); margin-top: 20px; max-width: 46ch; }

/* Les deux portes : deux colonnes séparées par un filet */
.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 56px; }
.plan { display: flex; flex-direction: column; border-top: 1px solid var(--noir); padding: 30px 48px 0 0; }
.plan + .plan { border-left: 1px solid var(--filet); padding: 30px 0 0 48px; }
.plan.hl { border-top-width: 3px; padding-top: 28px; }
.plan .ribbon { font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); margin-bottom: 14px; font-family: var(--mono); }
.plan .inner { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.plan .when { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); font-family: var(--mono); }
.plan h3 { font-family: var(--titre); font-weight: 300; font-size: clamp(40px, 4.4vw, 62.2px); line-height: 0.98; margin-top: -6px; letter-spacing: -.025em; }
.plan .price { font-family: var(--titre); font-weight: 400; font-size: 29.5px; line-height: 1; letter-spacing: -.025em; }
.plan .price small { font-family: var(--texte); font-size: 15px; font-weight: 400; color: var(--gris); display: block; margin-top: 8px; }
.key { display: block; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding: 14px 0; }
.key svg { display: none; }
.key b { display: block; font-family: var(--titre); font-weight: 400; font-size: 21.6px; }
.key small { color: var(--gris); font-size: 15px; }
.chk-t { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); margin: 6px 0 -10px; font-family: var(--mono); }
.chk { list-style: none; padding: 0; display: grid; }
.chk li { display: block; padding: 10px 0; border-bottom: 1px solid var(--filet); font-size: 16px; }
.chk li svg { display: none; }
.chk .ii { display: inline-grid; place-items: center; width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; font-style: italic; margin-left: 6px; color: var(--gris); cursor: help; vertical-align: 1px; }
.tiers { display: grid; font-size: 15px; }
.tiers div { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.tiers b { font-weight: 500; }
.tiers span { color: var(--gris); }
.plan .btn { align-self: flex-start; margin-top: auto; }
.plan .inner > .btn { margin-top: 14px; }

/* Calculateurs : un grand chiffre posé entre deux filets */
.calc, .sejour { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); margin-top: 48px; align-items: start; }
.sejour-champs { display: grid; gap: 22px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); font-family: var(--mono); }
input { font-family: var(--texte); font-size: 19px; color: var(--noir); background: transparent; border: 0; border-bottom: 1px solid var(--noir); border-radius: 0; padding: 10px 0; width: 100%; letter-spacing: 0; text-transform: none; }
input:focus { border-bottom-width: 2px; padding-bottom: 9px; }
#prix, #sNuit, #sNuits { font-family: var(--titre); font-size: 35.5px; font-weight: 300; line-height: 1.1; padding: 4px 0; letter-spacing: -.025em; }
.big { border-top: 1px solid var(--noir); padding-top: 22px; }
.big span { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); font-family: var(--mono); }
.big b { display: block; font-family: var(--titre); font-weight: 300; font-size: clamp(47.4px, 7.4vw, 103.6px); line-height: 0.98; margin: 12px 0 16px; letter-spacing: -.025em; }
.big p { font-size: 19px; color: var(--noir); max-width: 40ch; }
.big small { display: block; color: var(--gris); font-size: 13px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet); }

/* Démonstrations */
.demos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.demos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.demo-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; font-size: 15px; color: var(--gris); }
.tag { border: 1px solid var(--noir); color: var(--noir); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: 5px 10px; font-family: var(--mono); }

/* Étapes : des colonnes et de grands chiffres */
.blocs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
.bloc { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--noir); padding: 26px 32px 0 0; }
.bloc + .bloc { border-left: 1px solid var(--filet); padding-left: 32px; }
.bloc .n { font-family: var(--titre); font-size: 41.4px; line-height: 1; color: var(--noir); letter-spacing: -.025em; }
.bloc b { font-family: var(--titre); font-weight: 400; font-size: 24.6px; line-height: 1.02; letter-spacing: -.025em; }
.bloc span { color: var(--gris); font-size: 16px; }

/* Fondateurs : une bande noire, comme une double page de magazine */
.fondateurs { background: var(--noir); color: var(--creme); padding: clamp(36px, 6vw, 80px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
.fondateurs .eyebrow { color: var(--champagne); }
.prix-f { font-family: var(--titre); font-weight: 300; font-size: clamp(65.1px, 9.6vw, 133.2px); line-height: 0.96; margin-top: 18px; letter-spacing: -.025em; }
.fond-txt { font-size: clamp(18px, 1.8vw, 21px); color: var(--doux); margin-top: 18px; max-width: 34ch; }
.places-txt { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--doux); font-family: var(--mono); }
.places { display: flex; gap: 10px; margin: 14px 0 28px; }
.places i { width: 64px; height: 2px; background: var(--champagne); }

/* Qui sommes-nous */
.nous { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.nous-mono { aspect-ratio: 1; border-top: 1px solid var(--noir); border-bottom: 1px solid var(--noir); display: grid; place-items: center; }
.nous-mono img { width: 52%; height: auto; }

/* Pourquoi nous */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.why > div { border-top: 1px solid var(--noir); padding: 26px 32px 0 0; }
.why > div + div { border-left: 1px solid var(--filet); padding-left: 32px; }
.why b { font-family: var(--titre); font-weight: 400; display: block; font-size: 24.6px; line-height: 1.02; letter-spacing: -.025em; }
.why p { font-size: 16px; color: var(--gris); margin-top: 10px; }

/* Rappel */
form { display: grid; gap: 28px; margin-top: 48px; max-width: 820px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
form .btn { justify-self: start; margin-top: 8px; }
.reassure { font-size: 14px; color: var(--gris); }
.thanks { border-top: 1px solid var(--noir); padding-top: 26px; margin-top: 48px; max-width: 820px; }
.thanks h3 { font-family: var(--titre); font-weight: 300; font-size: 41.4px; line-height: 1; letter-spacing: -.025em; }
.thanks p { color: var(--gris); margin-top: 10px; }

/* Pied de page */
.pied { max-width: 1240px; margin: clamp(80px, 11vw, 150px) auto 0; padding: 40px var(--marge) 48px; border-top: 1px solid var(--noir); display: grid; grid-template-columns: auto 1fr; gap: 20px 40px; align-items: center; font-size: 13px; color: var(--gris); }
.pied img { width: 160px; height: auto; }
.pied-liens { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 28px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--noir); font-family: var(--mono); }
.pied-liens a { text-decoration: none; }
.pied > p { grid-column: 1 / -1; }

/* ---------- Pages L'Écrin et Le Carnet ---------- */
/* Bouton « à l'année / au mois » : deux mots, le choisi est souligné */
.bascule { display: inline-flex; gap: 28px; margin-top: 36px; }
.bascule button { font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 6px 0; color: var(--gris); cursor: pointer; font-family: var(--mono); }
.bascule button[aria-pressed="true"] { color: var(--noir); border-bottom-color: var(--noir); }
.bascule-note { font-size: 14px; color: var(--gris); margin-left: 28px; }

/* Tarifs : trois colonnes, celle du milieu marquée d'un filet épais */
.tarifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
.tarif { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--noir); padding: 28px 32px 0 0; }
.tarif + .tarif { border-left: 1px solid var(--filet); padding-left: 32px; }
.tarif.fort { border-top-width: 3px; padding-top: 26px; }
.tarif .when { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); font-family: var(--mono); }
.tarif.fort .when { color: var(--noir); }
.tarif h3 { font-family: var(--titre); font-weight: 400; font-size: 27.9px; line-height: 1; letter-spacing: -.025em; }
.tarif .p { font-family: var(--titre); font-weight: 300; font-size: clamp(41.4px, 4.1vw, 62.2px); line-height: 1.03; margin-top: 10px; letter-spacing: -.025em; }
.tarif small { display: block; font-size: 15px; color: var(--gris); }
.tarif ul { list-style: none; padding: 0; margin-top: 18px; display: grid; font-size: 15px; color: var(--gris); }
.tarif li { padding: 9px 0; border-top: 1px solid var(--filet); }
.tarif .btn { align-self: flex-start; margin-top: 22px; }

/* Les services */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; margin-top: 56px; }
.service { display: grid; grid-template-columns: 40px 1fr; gap: 8px 18px; align-content: start; border-top: 1px solid var(--noir); padding-top: 26px; }
.service svg { width: 28px; height: 28px; grid-row: span 3; }
.service b { font-family: var(--titre); font-weight: 400; font-size: 29.5px; line-height: 1; letter-spacing: -.025em; }
.service p { color: var(--gris); font-size: 17px; }
.service ul { list-style: none; padding: 0; display: grid; font-size: 15px; color: var(--gris); margin-top: 8px; }
.service li { padding: 8px 0; border-top: 1px solid var(--filet); }
/* Le prix d'une option, toujours dans la colonne du texte (2 colonnes sur grand écran, 1 sur téléphone) */
.service .service-prix { grid-column: -2 / -1; margin-top: 12px; font: 500 12px/1.6 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--noir); }

/* Le lancement, étape par étape */
.frise { list-style: none; padding: 0; margin-top: 56px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--noir); counter-reset: etape; }
.frise li { position: relative; padding: 26px 22px 0 0; counter-increment: etape; }
.frise li::before { content: "0" counter(etape); display: block; font-family: var(--titre); font-size: 32.6px; line-height: 1; margin-bottom: 14px; letter-spacing: -.025em; }
.frise b { display: block; font-family: var(--titre); font-weight: 400; font-size: 23px; line-height: 1.02; letter-spacing: -.025em; }
.frise span { display: block; color: var(--gris); font-size: 15px; margin-top: 8px; }

/* La carte des prestations, comme la carte d'un grand restaurant */
.carte { margin-top: 48px; border-top: 1px solid var(--noir); }
.carte-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 40px; padding: 26px 0; border-bottom: 1px solid var(--filet); align-items: baseline; }
.carte-ligne b { font-family: var(--titre); font-weight: 400; font-size: 27.9px; line-height: 1; letter-spacing: -.025em; }
.carte-ligne p { grid-column: 1; color: var(--gris); font-size: 16px; max-width: 62ch; }
.carte-prix { grid-column: 2; grid-row: 1 / span 2; font-family: var(--titre); font-size: 27.9px; text-align: right; white-space: nowrap; letter-spacing: -.025em; }
.carte-prix small { display: block; font-family: var(--texte); font-size: 14px; color: var(--gris); margin-top: 4px; }

/* Questions fréquentes */
.faq { margin-top: 48px; border-top: 1px solid var(--noir); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font-family: var(--titre); font-weight: 400; font-size: 24.6px; line-height: 1.05; letter-spacing: -.025em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 18px; height: 1px; background: var(--noir); box-shadow: none; transition: transform .3s; }
.faq summary::before { content: ""; position: absolute; right: 6px; top: 50%; width: 18px; height: 1px; background: var(--noir); transform: rotate(90deg); transition: transform .3s; }
.faq details[open] summary::before { transform: rotate(0deg); }
.faq details p { color: var(--gris); padding: 0 0 24px; max-width: 50ch; }

/* Bandeau qui renvoie vers l'autre porte */
.renvoi { border-top: 1px solid var(--noir); border-bottom: 1px solid var(--noir); padding: 36px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; }
.renvoi p { font-family: var(--titre); font-weight: 300; font-size: clamp(24.6px, 2.5vw, 34px); line-height: 1.02; max-width: 14.4em; letter-spacing: -.025em; }

/* Le Carnet : ce qu'il fait */
.fonctions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; margin-top: 56px; }
.fonction { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--noir); padding-top: 24px; }
.fonction svg { width: 26px; height: 26px; margin-bottom: 4px; }
.fonction b { font-family: var(--titre); font-weight: 400; font-size: 26.2px; line-height: 1; letter-spacing: -.025em; }
.fonction p { color: var(--gris); font-size: 16px; }

@media (max-width: 900px) {
  .blocs, .why, .fondateurs, .tarifs, .fonctions, .services { grid-template-columns: 1fr; }
  .bloc + .bloc, .why > div + div, .tarif + .tarif { border-left: 0; padding-left: 0; }
  .bloc, .why > div, .tarif { padding: 24px 0 32px; }
  .nous { grid-template-columns: 1fr; }
  .nous-mono { max-width: 240px; }
  .frise { grid-template-columns: 1fr; border-top: 0; }
  .frise li { border-top: 1px solid var(--filet); padding: 22px 0; display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; }
  .frise li::before { grid-row: span 2; margin: 0; }
}
@media (max-width: 640px) {
  .nav-logo { width: 122px; }
  .btn { padding: 16px 20px; gap: 12px; }
  .btn::after { width: 22px; }
  .calc, .sejour, .two { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan, .plan + .plan { border-left: 0; padding: 28px 0 0; }
  .plan + .plan { margin-top: 56px; }
  .demos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .demos figure:first-child { grid-column: 1 / -1; }
  .demos figure:first-child img { aspect-ratio: 16 / 10; }
  .carte-ligne { grid-template-columns: 1fr; }
  .carte-prix { grid-column: 1; grid-row: auto; text-align: left; }
  .service { grid-template-columns: 1fr; }
  .service svg { grid-row: auto; }
  .bascule-note { display: block; margin: 10px 0 0; }
  .pied { grid-template-columns: 1fr; }
  .pied-liens { justify-content: flex-start; }
  .faq summary { font-size: 26px; }
}

/* ---------- Haut de page court (Devis, Qui sommes-nous, FAQ, mentions) ---------- */
.tete.courte { min-height: 62vh; min-height: 62svh; background: radial-gradient(110% 120% at 80% 30%, #2a221a 0%, #120f0c 50%, var(--nuit) 80%); }
.tete.courte::after { content: none; }
.tete-mono { position: absolute; right: var(--marge); bottom: 9vh; width: clamp(120px, 18vw, 260px); opacity: .9; }

/* ---------- Devis : les choix à gauche, le récapitulatif à droite ---------- */
.devis-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.etape { border-top: 1px solid var(--noir); padding: 26px 0 44px; }
.etape-t { display: flex; align-items: baseline; gap: 18px; font-family: var(--titre); font-weight: 400; font-size: 27.9px; line-height: 1; margin-bottom: 20px; letter-spacing: -.025em; }
.etape-t span { font-size: 22px; color: var(--gris); }
.choix-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choix { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--filet); cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 400; color: var(--gris); transition: border-color .25s, box-shadow .25s; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix b { font-family: var(--titre); font-weight: 400; font-size: 23px; line-height: 1; color: var(--noir); letter-spacing: -.025em; }
.choix:has(input:checked) { border-color: var(--noir); box-shadow: inset 3px 0 0 var(--noir); color: var(--noir); }
.choix:has(input:focus-visible) { outline: 1px solid var(--noir); outline-offset: 3px; }
.compteur { display: flex; align-items: center; gap: 22px; }
.compteur button { width: 48px; height: 48px; font: inherit; font-size: 22px; background: none; border: 1px solid var(--noir); border-radius: 0; color: var(--noir); cursor: pointer; }
.compteur button:disabled { opacity: .3; cursor: default; }
.compteur output { font-family: var(--titre); font-size: 47.4px; line-height: 1; min-width: 2.2ch; text-align: center; letter-spacing: -.025em; }
.note { font-size: 15px; color: var(--gris); margin-top: 14px; }
.option { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--filet); cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 400; color: var(--gris); }
.option input { width: 16px; height: 16px; margin: 0; accent-color: var(--noir); }
.option b { font-family: var(--titre); font-weight: 400; font-size: 21.6px; color: var(--noir); }
.option em { grid-column: 3; grid-row: 1; font-style: normal; font-family: var(--titre); font-size: 19.8px; color: var(--noir); white-space: nowrap; }
.option small { grid-column: 2; font-size: 15px; }
.option-groupe { padding: 16px 0; border-bottom: 1px solid var(--filet); }
.option-groupe > b { font-family: var(--titre); font-weight: 400; font-size: 21.6px; }
.option-radios { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 8px; }
.option-radios label { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--noir); cursor: pointer; }
.option-radios input { width: auto; accent-color: var(--noir); }
.recap { position: sticky; top: calc(var(--nav-h) + 24px); border-top: 3px solid var(--noir); padding-top: 22px; }
.recap dl { display: grid; margin-top: 16px; }
.recap dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--filet); }
.recap dt { font-size: 15px; color: var(--gris); }
.recap dd { margin: 0; font-family: var(--titre); font-size: 21.6px; text-align: right; }
.recap .total { margin-top: 22px; }
.recap .total span { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); font-family: var(--mono); }
.recap .total b { display: block; font-family: var(--titre); font-weight: 300; font-size: clamp(41.4px, 4.4vw, 62.2px); line-height: 1.03; margin-top: 8px; letter-spacing: -.025em; }
.recap .btn { margin-top: 24px; }
.recap .note { font-size: 14px; }

/* Formulaires : piège à robots invisible et message d'erreur */
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.erreur { font-size: 15px; color: #9c3a1f; min-height: 1.2em; }

/* ---------- Démonstrations ---------- */
.demo-bloc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: 56px; }
.demo-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.demo-photos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.demo-photos img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.demo-texte h3 { font-family: var(--titre); font-weight: 300; font-size: clamp(32.6px, 3.7vw, 53.3px); line-height: 1.03; margin-top: 16px; letter-spacing: -.025em; }
.demo-texte .chk { margin-top: 22px; }
.demo-texte .btn { margin-top: 28px; }
.telephone { width: min(300px, 100%); margin-top: 40px; border: 1px solid var(--noir); padding: 10px; }
.telephone video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--nuit); }
.telephone p { font-size: 13px; color: var(--gris); margin-top: 10px; }
.a-venir { margin-top: 56px; border-top: 1px solid var(--noir); padding-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.a-venir b { font-family: var(--titre); font-weight: 300; font-size: 32.8px; line-height: 1; letter-spacing: -.025em; }
.a-venir p { color: var(--gris); }

/* ---------- Qui sommes-nous ---------- */
.histoire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); margin-top: 48px; }
.histoire p { font-size: clamp(19px, 1.9vw, 22px); color: var(--gris); }
.histoire p + p { margin-top: 18px; }
.histoire .lettrine::first-letter { font-family: var(--titre); font-size: 4.2em; float: left; line-height: .8; margin: 6px 12px 0 0; color: var(--noir); }
.equipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 56px; }
.portrait { border-top: 1px solid var(--noir); padding-top: 22px; }
.portrait-img { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--creme); }
.portrait-img img { width: 34%; height: auto; opacity: .7; }
.portrait b { display: block; font-family: var(--titre); font-weight: 300; font-size: 32.8px; line-height: 1; margin-top: 20px; letter-spacing: -.025em; }
.portrait > span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); margin-top: 8px; font-family: var(--mono); }
.portrait p { color: var(--gris); margin-top: 12px; }
.engagements { list-style: none; padding: 0; margin-top: 48px; border-top: 1px solid var(--noir); counter-reset: eng; }
.engagements li { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 32px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--filet); counter-increment: eng; }
.engagements li::before { content: "0" counter(eng); font-family: var(--titre); font-size: 32.8px; line-height: 1; letter-spacing: -.025em; }
.engagements b { font-family: var(--titre); font-weight: 400; font-size: 26.2px; line-height: 1; letter-spacing: -.025em; }
.engagements span { color: var(--gris); }

/* ---------- La Collection ---------- */
.ouverture { display: inline-block; margin-top: 22px; border: 1px solid var(--champagne); color: var(--champagne); font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; padding: 8px 14px; font-family: var(--mono); }
.liste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 24px 32px; align-items: end; margin-top: 40px; max-width: 980px; }
.promesses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
.promesses > div { border-top: 1px solid var(--noir); padding: 26px 32px 0 0; }
.promesses > div + div { border-left: 1px solid var(--filet); padding-left: 32px; }
.promesses b { font-family: var(--titre); font-weight: 400; font-size: 26.2px; line-height: 1; display: block; letter-spacing: -.025em; }
.promesses p { color: var(--gris); margin-top: 10px; font-size: 16px; }
.apercu { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; margin-top: 48px; border-top: 1px solid var(--noir); padding-top: 28px; }
.apercu img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.apercu b { display: block; font-family: var(--titre); font-weight: 300; font-size: 35.5px; line-height: 1.03; margin-top: 14px; letter-spacing: -.025em; }
.apercu p { color: var(--gris); margin-top: 12px; }

/* ---------- Textes longs (FAQ, mentions légales) ---------- */
.texte-long { max-width: 860px; }
.texte-long h2 { font-family: var(--titre); font-weight: 300; font-size: 32.8px; line-height: 1; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--noir); letter-spacing: -.025em; }
.texte-long h2:first-child { margin-top: 0; }
.texte-long p, .texte-long li { color: var(--gris); margin-top: 12px; max-width: 50ch; }
.texte-long ul { padding-left: 20px; }
.texte-long b { color: var(--noir); font-weight: 500; }
.a-completer { background: var(--sable); color: var(--noir); padding: 0 6px; }
.faq-groupe + .faq-groupe { margin-top: 72px; }

/* ---------- Page introuvable ---------- */
.perdu { min-height: 100vh; min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 22px; text-align: center; padding: 32px; background: var(--nuit); color: var(--creme); }
.perdu img { width: 120px; }
.perdu h1 { font-family: var(--titre); font-weight: 300; font-size: clamp(38.5px, 6.7vw, 88.8px); line-height: 1; letter-spacing: -.025em; }
.perdu p { color: var(--doux); }

@media (max-width: 900px) {
  .devis-grille, .demo-bloc, .histoire, .apercu, .a-venir { grid-template-columns: 1fr; }
  .recap { position: static; }
  .promesses { grid-template-columns: 1fr; }
  .promesses > div + div { border-left: 0; padding-left: 0; }
  .promesses > div { padding: 24px 0 32px; }
  .engagements li { grid-template-columns: 56px minmax(0, 1fr); }
  .engagements span { grid-column: 2; }
  .liste { grid-template-columns: 1fr; }
  .liste .btn { justify-self: start; }
}
@media (max-width: 640px) {
  .choix-liste, .equipe { grid-template-columns: 1fr; }
  .option { grid-template-columns: 22px minmax(0, 1fr); }
  .option em { grid-column: 2; grid-row: auto; }
  .tete-mono { display: none; }
}

/* =====================================================================
   Améliorations après l'audit (message, expérience, technique)
   ===================================================================== */

/* Accessibilité : texte réservé aux lecteurs d'écran, focus bien visible, rien caché sous le menu */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html { scroll-padding-top: calc(var(--nav-h) + 16px); scroll-padding-bottom: 100px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
input:focus { border-bottom: 2px solid var(--noir); padding-bottom: 9px; background: rgba(234, 223, 202, .35); }
input[aria-invalid="true"] { border-bottom-color: #9c3a1f; }
label em { font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--gris); }
.menu-ouvert body, html.lenis-stopped { overflow: hidden; }

/* Cibles tactiles d'au moins 44 px */
.pied-liens a, .bascule button, .option-radios label { display: inline-flex; align-items: center; min-height: 44px; }
.nav-menu, .nav-devis-tel { min-height: 44px; }
.nav-logo { padding: 5px 0; }
.lecture { min-height: 44px; }

/* Transitions douces entre les pages (navigateurs récents ; ailleurs, rien ne change) */
@view-transition { navigation: auto; }
.nav { view-transition-name: menu; }
::view-transition-old(root) { animation: .35s ease both fondu-sortie; }
::view-transition-new(root) { animation: .55s cubic-bezier(.2, .7, .2, 1) both fondu-entree; }
@keyframes fondu-sortie { to { opacity: 0; } }
@keyframes fondu-entree { from { opacity: 0; } }

/* Liens « Tout savoir sur… » : petites capitales et un trait qui se retire au survol */
.lien-suite { display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; margin-top: 16px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 100% 1px no-repeat; transition: background-size .5s cubic-bezier(.2, .7, .2, 1); font-family: var(--mono); }
.lien-suite:hover { background-size: 0 1px; background-position: 100% calc(100% - 8px); }

/* ---------- Menu ---------- */
.nav-devis-tel { display: none; margin-left: auto; align-items: center; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border: 1px solid currentColor; padding: 0 16px; font-family: var(--mono); }
.nav-faq, .nav-promesse { display: none; }
@media (max-width: 1100px) {
  .nav-devis-tel { display: inline-flex; }
  .nav-liens a { opacity: 1; }
  .nav-liens .nav-faq { display: block; }
  .nav-promesse { display: block; width: min(320px, 80vw); text-align: center; border-top: 1px solid rgba(242, 235, 221, .3); padding-top: 18px; margin-top: 8px; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne); font-family: var(--mono); }
  .menu-ouvert .nav-devis-tel { visibility: hidden; }
}

/* ---------- Barre d'action fixe sur téléphone ---------- */
.barre { display: none; }
@media (max-width: 640px) {
  .barre { position: fixed; inset: auto 0 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--nuit); color: var(--creme); border-top: 1px solid var(--champagne); transform: translateY(105%); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .barre.on { transform: none; }
  .menu-ouvert .barre { transform: translateY(105%); }
  .barre .btn { padding: 13px 16px; }
  .barre-devis { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; font-family: var(--mono); }
  .barre-total { display: grid; line-height: 1.1; }
  .barre-total span { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--doux); font-family: var(--mono); }
  .barre-total b { font-family: var(--titre); font-weight: 400; font-size: 23.4px; }
  .pied { padding-bottom: 96px; }
}

/* ---------- Film de l'accueil ---------- */
.tete-tag { position: absolute; z-index: 2; top: calc(var(--nav-h) + 14px); right: var(--marge); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--creme); border: 1px solid rgba(242, 235, 221, .6); padding: 5px 10px; font-family: var(--mono); }
.inverses { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 6px; max-width: 46ch; }
.inverses li { font-size: clamp(17px, 1.6vw, 20px); padding-left: 30px; position: relative; }
.inverses li::before { content: ""; position: absolute; left: 0; top: .78em; width: 18px; height: 1px; background: var(--champagne); }

/* ---------- Haut des pages intérieures ---------- */
@media (max-width: 640px) { .tete::after { background: linear-gradient(180deg, rgba(11, 9, 8, .6) 0, rgba(11, 9, 8, .25) 25%, rgba(11, 9, 8, .78) 50%, rgba(11, 9, 8, .95) 100%); } }
.tete.courte.mini { min-height: 44vh; min-height: 44svh; }
.tete.courte.mini + .creme #devis { padding-top: 56px; }

/* ---------- En-têtes de section décalés (ordinateur) ---------- */
@media (min-width: 901px) {
  .sec-tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: end; }
  .sec-tete .eyebrow { grid-column: 1 / -1; }
  .sec-tete .titre { grid-column: 1; }
  .sec-tete .chapo { grid-column: 2; margin: 0 0 10px; }
}

/* ---------- Offres ---------- */
.chk li small { display: block; font-size: 14px; color: var(--gris); }
.replie summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); border-bottom: 1px solid var(--filet); font-family: var(--mono); }
.replie summary::-webkit-details-marker { display: none; }
.replie summary::after { content: "+"; font-size: 20px; font-weight: 400; letter-spacing: 0; transition: transform .3s; }
.replie[open] summary::after { transform: rotate(45deg); }
.service .num, .fonction .num { font-family: var(--titre); font-size: 27.9px; line-height: 1; color: var(--noir); letter-spacing: -.025em; }
.service .num { grid-row: span 3; }
.exemple { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--filet); font-size: clamp(18px, 1.8vw, 21px); color: var(--gris); max-width: 62ch; }
.exemple b { font-family: var(--titre); font-weight: 500; font-size: 1.5em; color: var(--noir); }
@media (max-width: 900px) { .tarif.fort { order: -1; } }

/* ---------- Calculateur : un grand chiffre, un curseur filet ---------- */
.calc-champ label { margin-bottom: 4px; }
.calc-prix { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--noir); }
.calc-prix input { border: 0; padding: 4px 0; background: none; }
.calc-prix input:focus { outline: none; border: 0; padding: 4px 0; background: none; }
.calc-prix:focus-within { border-bottom-width: 2px; }
.calc-prix span { font-family: var(--titre); font-size: 32.8px; letter-spacing: -.025em; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.curseur { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin-top: 14px; padding: 0; border: 0; background: linear-gradient(var(--noir), var(--noir)) center / 100% 1px no-repeat; cursor: pointer; }
.curseur:focus { background: linear-gradient(var(--noir), var(--noir)) center / 100% 2px no-repeat; padding: 0; border: 0; }
/* Le trait reste fin (4 × 30 px), mais la prise au doigt fait 44 × 44 px : sur iPhone, on glisse en attrapant la poignée */
.curseur::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: content-box; width: 4px; height: 30px; background: var(--noir) content-box; border: solid transparent; border-width: 7px 20px; border-radius: 0; }
.curseur::-moz-range-thumb { box-sizing: content-box; width: 4px; height: 30px; background: var(--noir) content-box; border: solid transparent; border-width: 7px 20px; border-radius: 0; }
.big .btn { margin-top: 22px; }

/* ---------- Respiration : une grande photo, une seule phrase ---------- */
.respiration { position: relative; height: 80vh; height: 80svh; min-height: 420px; overflow: hidden; margin-top: clamp(80px, 11vw, 150px); display: grid; place-items: center; background: var(--nuit); }
.respiration img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
.respiration::after { content: ""; position: absolute; inset: 0; background: rgba(11, 9, 8, .45); }
.respiration p { position: relative; z-index: 1; max-width: 10.5em; padding: 0 var(--marge); text-align: center; font-family: var(--titre); font-weight: 300; font-size: clamp(34.4px, 4.7vw, 71px); line-height: 1.03; color: var(--creme); letter-spacing: -.025em; }

/* ---------- Fondateurs, maison ---------- */
.fond-pourquoi { font-size: 16px; color: var(--doux); margin-top: 18px; max-width: 46ch; padding-top: 16px; border-top: 1px solid #3a342e; }
.nous-centre { text-align: center; display: grid; justify-items: center; }
.nous-centre .eyebrow { justify-content: center; }
#nous > .lien-suite { margin-top: 24px; }

/* ---------- Devis ---------- */
fieldset.etape { border: 0; border-top: 1px solid var(--noir); margin: 0; padding: 26px 0 44px; min-width: 0; }
legend.etape-t { float: left; width: 100%; padding: 0; }
legend.etape-t + * { clear: both; }
.choix { border-color: #8f8678; }
.compteur button[aria-disabled="true"] { opacity: .3; cursor: default; }
.option input, .option-radios input { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin: 0; padding: 0; flex: none; border: 1px solid var(--noir); border-radius: 0; display: inline-grid; place-content: center; background: transparent; cursor: pointer; }
.option input:checked::after, .option-radios input:checked::after { content: ""; width: 6px; height: 6px; background: var(--noir); }
.option input:focus, .option-radios input:focus { background: transparent; padding: 0; border: 1px solid var(--noir); }
.option input:focus-visible, .option-radios input:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }
.recap .total small { display: block; font-size: 15px; color: var(--gris); margin-top: 8px; }

/* ---------- Démonstrations, Collection ---------- */
.lecture { font: inherit; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; background: none; border: 0; border-bottom: 1px solid currentColor; padding: 4px 0; margin-right: 8px; cursor: pointer; color: var(--noir); font-family: var(--mono); }
.ouverture { border: 0; padding: 0; display: inline-flex; align-items: center; gap: 14px; }
.ouverture::before { content: ""; width: 44px; height: 1px; background: currentColor; }
.pied-voyageurs { grid-column: 1 / -1; color: var(--gris); }
.pied-voyageurs a { color: var(--noir); }

/* Les photos s'approchent doucement au survol */
.demos figure, .demo-photos, .apercu { overflow: clip; }
.demos img, .demo-photos img, .apercu img { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .demos figure:hover img, .demo-photos img:hover, .apercu:hover img { transform: scale(1.04); } }

/* Questions fréquentes : la réponse s'ouvre en glissant (navigateurs récents) */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .5s cubic-bezier(.2, .7, .2, 1), content-visibility .5s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* ---------- Signature : les filets se tracent ---------- */
.trace-ligne { border-top-color: transparent !important; }
.trace-ligne::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--ep, 1px) * -1); height: var(--ep, 1px); background: var(--trait, var(--noir)); transform: scaleX(0); transform-origin: left; transition: transform 1.3s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.trace-ligne.vu::before { transform: scaleX(1); }
.js:not(.calme) .places i { transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.js:not(.calme) .fondateurs.vu .places i { transform: scaleX(1); }
.fondateurs.vu .places i:nth-child(2) { transition-delay: .2s; }
.fondateurs.vu .places i:nth-child(3) { transition-delay: .4s; }

/* Le bilan mensuel, en six lignes numérotées */
.bilan { list-style: none; padding: 0; margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--noir); counter-reset: bilan; }
.bilan li { counter-increment: bilan; padding: 22px 0; border-bottom: 1px solid var(--filet); font-family: var(--titre); font-weight: 400; font-size: 23.4px; line-height: 1.05; }
.bilan li::before { content: counter(bilan, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .22em; color: var(--gris); margin-bottom: 8px; }
@media (max-width: 900px) { .bilan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bilan { grid-template-columns: 1fr; } }

/* Options à la carte, repliées sous les tarifs */
details.options { margin-top: 28px; }
details.options > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid var(--noir); font-family: var(--mono); }
details.options > summary::-webkit-details-marker { display: none; }
details.options > summary::after { content: "+"; font-size: 18px; font-weight: 400; letter-spacing: 0; transition: transform .3s; }
details.options[open] > summary::after { transform: rotate(45deg); }
details.options .carte { margin-top: 24px; }
details.options::details-content { block-size: 0; overflow: hidden; transition: block-size .5s cubic-bezier(.2, .7, .2, 1), content-visibility .5s allow-discrete; }
details.options[open]::details-content { block-size: auto; }

/* Les textes du haut montent dès l'affichage, sans attendre les scripts */
@keyframes monte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.js:not(.calme) .pains span, .js:not(.calme) .tete-texte > * { animation: monte 1s cubic-bezier(.2, .7, .2, 1) both; }
.pains span:nth-child(2), .tete-texte > :nth-child(2) { animation-delay: .14s; }
.pains span:nth-child(3), .tete-texte > :nth-child(3) { animation-delay: .28s; }
.tete-texte > :nth-child(4) { animation-delay: .42s; }
.tete-texte > :nth-child(5) { animation-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .demos img, .demo-photos img, .apercu img { transition: none; }
}

/* =====================================================================
   Tour 2 : finitions après le 2e audit
   ===================================================================== */

/* Police de secours aux proportions d'Imbue, si Google Fonts ne répond pas */

/* Menu : se retire quand on descend, revient quand on remonte */
.nav { transition: transform .5s var(--ease), background .4s, color .4s, border-color .4s; }
.nav.cache { transform: translateY(-100%); }
.nav-liens a { white-space: nowrap; }

/* Focus bien visibles sur les choix, le prix et le curseur */
.choix:has(input:focus-visible), .calc-prix:has(input:focus-visible), .curseur:focus-visible { outline: 2px solid var(--noir); outline-offset: 3px; }

/* Photo d'attente pendant le chargement de la 3D */


/* « Imaginez l'inverse » écrit en grand, comme les temps forts qui l'entourent */
.inverse { font-family: var(--titre); font-weight: 300; font-size: clamp(32.8px, 3.7vw, 59.2px); letter-spacing: 0; text-transform: none; line-height: 1; }
.inverses { max-width: 58ch; }
.inverses li, .chapo, .tete-sous, .titre { text-wrap: pretty; }


/* Haut de L'Écrin : une phrase en titre, les deux autres promesses en liste */
.tete .inverses { margin: 22px 0 0; }

/* Devis : récapitulatif à sa place sur téléphone, en-tête daté */
@media (max-width: 900px) { .recap { top: auto; } }
.recap-date { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); margin-bottom: 14px; font-family: var(--mono); }
.recap-date img { width: 34px; height: auto; }

/* Formulaires : l'erreur s'affiche sur le champ concerné */
label[data-erreur]::after { content: attr(data-erreur); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 400; color: #9c3a1f; }
.erreur:empty { display: none; }
.thanks h3:focus { outline: none; }

/* Calculateurs : un seul trait (le curseur), des bornes, un résultat qui ne saute plus */
.calc-prix, .calc-prix:focus-within { border-bottom: 0; }
.curseur-bornes { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .1em; color: var(--gris); }
.big p { min-height: 4.6em; }
.sejour-champs .compteur { margin-top: 4px; }
label:not(.option):has(> em) { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
label:not(.option):has(> em) > input, label:not(.option):has(> em)[data-erreur]::after { grid-column: 1 / -1; }
label:not(.option):has(> em) > input { margin-top: 6px; }
.calc-libelle { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); font-family: var(--mono); }
.sejour-champs .compteur output, .sejour-champs .compteur span { font-size: 48px; }

/* Petites finitions */
.exemple b { display: inline-block; line-height: 1; }
@media (min-width: 641px) { .replie summary { pointer-events: none; } .replie summary::after { content: none; } }

/* ---------- Signature : l'écrin se referme (rappel et pied de page en noir) ---------- */
.creme { overflow-x: clip; }
.creme > :last-child:not(#rappel) { margin-bottom: clamp(80px, 11vw, 150px); }
#rappel { position: relative; color: var(--creme); padding-bottom: clamp(80px, 10vw, 130px); }
#rappel::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--nuit); }
#rappel .eyebrow, #rappel label, #rappel .reassure, #rappel label em { color: var(--doux); }
#rappel .chapo, #rappel .thanks p { color: var(--doux); }
#rappel input { color: var(--creme); border-bottom-color: var(--creme); }
#rappel input:focus { background: rgba(242, 235, 221, .08); border-bottom-color: var(--champagne); }
#rappel input[aria-invalid="true"] { border-bottom-color: #e0a48f; }
#rappel label[data-erreur]::after, #rappel .erreur { color: #e0a48f; }
#rappel .btn { color: var(--creme); }
#rappel .btn:hover { background: var(--creme); color: var(--nuit); }
#rappel :focus-visible { outline-color: var(--creme); }
#rappel .thanks { border-top-color: var(--creme); }
#rappel .lien-suite { color: var(--creme); }
footer.pied { max-width: none; margin: 0; background: var(--nuit); color: var(--doux); border-top: 1px solid #2a2520; padding: 48px max(var(--marge), calc((100% - 1240px) / 2 + var(--marge))) 56px; }
footer.pied .pied-liens, footer.pied a { color: var(--creme); }
footer.pied .pied-voyageurs { color: var(--doux); }
footer.pied > p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 640px) { footer.pied { padding-bottom: 96px; } }
footer.pied .pied-suivre { grid-column: 1 / -1; color: var(--doux); }
footer.pied .pied-suivre a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- Tour 3 ---------- */
/* Polices de secours mises à l'échelle, si Google Fonts ne répond pas */
@font-face { font-family: "Ysabeau repli"; src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"); size-adjust: 95%; }
/* La marge du dernier bloc reste dans le fond crème (plus de bande noire vide) */
.creme { display: flow-root; }
/* Compteur de logements du devis, à la taille de celui du Carnet */
.compteur > span { font-family: var(--titre); font-size: 47.4px; line-height: 1; min-width: 2.2ch; text-align: center; letter-spacing: -.025em; }
/* Le menu se referme en noir au-dessus du rappel et du pied de page */
.nav.sur-nuit { background: rgba(11, 9, 8, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: #2a2520; }
/* Téléphone à l'horizontale : le menu défile, les textes tiennent dans l'écran */
@media (max-width: 1100px) {
  .nav-liens { justify-content: safe center; overflow-y: auto; padding: calc(var(--nav-h) + 12px) 0 24px; gap: clamp(10px, 3vh, 26px); }
  .nav-liens a { font-size: clamp(26px, 5.4vh, 40px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .pains { font-size: clamp(28px, 9vh, 44px); }
}
/* Mouvement réduit : textes alignés à gauche, sans « Faites défiler » */
/* Survols et envoi en cours */
@media (hover: hover) and (min-width: 1101px) {
  .nav:not(.sur-creme) .nav-devis:hover { background: var(--creme); color: var(--nuit); }
  .nav.sur-creme .nav-devis:hover { background: var(--noir); color: var(--creme); }
}
@media (hover: hover) {
  .choix:hover { border-color: var(--noir); }
  .compteur button:not([aria-disabled="true"]):hover { background: var(--noir); color: var(--creme); }
  .bascule button:hover, .lecture:hover { color: var(--noir); }
}
.pied-liens a { background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.pied-liens a:hover, .pied-liens a[aria-current] { background-size: 100% 1px; }
.btn[aria-busy="true"] { cursor: progress; opacity: .6; }
/* L'erreur s'affiche une seule fois, sur le champ (elle reste lue par les lecteurs d'écran) */
form:has(label[data-erreur]) .erreur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Grands titres équilibrés : pas de mot seul sur la dernière ligne */
.titre, .tete h1, .renvoi p, .respiration p { text-wrap: balance; }
::selection { background: var(--champagne); color: var(--nuit); }
/* Calculateur : le « € » reste collé au chiffre */
.calc-prix input { flex: none; width: 4.4ch; }
@supports (field-sizing: content) { .calc-prix input { field-sizing: content; width: auto; min-width: 2ch; } }
/* Devis : le récapitulatif remonte quand le menu se retire */
.recap { transition: top .5s var(--ease); }
.nav.cache ~ main .recap { top: 24px; }

/* ---------- La visite (haut de l'accueil) : intro noire, villa en relief pilotée au défilement ---------- */
.visite { position: relative; background: var(--nuit); color: var(--creme); }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.visite-voile { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(11, 9, 8, .72), rgba(11, 9, 8, 0) 48%), linear-gradient(to bottom, rgba(11, 9, 8, .45), rgba(11, 9, 8, 0) 22%); }
#parcours { position: relative; z-index: 1; }
.creme { z-index: 2; }
#intro { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }
.rideau { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--nuit); }
.rideau-haut { top: 0; }
.rideau-bas { bottom: 0; }
#intro-ligne { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--creme); transform: scaleX(0); box-shadow: 0 0 24px 2px rgba(242, 235, 221, .55); }
#intro-logo { position: relative; width: min(560px, 78vw); }
#intro-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
#intro-logo path { opacity: 0; }
.passer { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); background: none; border: 0; color: var(--doux); font: 500 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; padding: 14px; }
.passer:hover { color: var(--creme); }
html.sans-intro #intro, html:not(.js) #intro { display: none; }
html.en-intro .nav, html.en-intro .barre, html.en-intro .legendes, html.en-intro #rail, html.en-intro .visite-demo, html.en-intro #indice, html.en-intro .visite-passer { opacity: 0; pointer-events: none; }
.legendes { position: fixed; z-index: 10; left: var(--marge); right: calc(var(--marge) + 40px); bottom: clamp(70px, 12vh, 120px); margin: 0; padding: 0; list-style: none; pointer-events: none; }
.legendes li { position: absolute; left: 0; bottom: 0; width: min(100%, 64rem); opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.legendes li.actif { opacity: 1; transform: none; }
.leg-piece { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font: 500 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--doux); }
.leg-piece::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.leg-texte { margin: 0; max-width: 13em; font-family: var(--titre); font-size: clamp(30px, 4.4vw, 66px); line-height: 1.04; letter-spacing: -.025em; font-weight: 300; text-wrap: balance; color: var(--creme); text-shadow: 0 2px 30px rgba(11, 9, 8, .35); }
.leg-inverse { margin: 0 0 12px; font: 500 12px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--champagne); }
.pains span { display: block; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.legendes li[data-etape="1"] .pains span:nth-child(n+2), .legendes li[data-etape="2"] .pains span:nth-child(n+3) { opacity: 0; transform: translateY(10px); }
.leg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.legendes li.actif .leg-actions { pointer-events: auto; }
#rail { position: fixed; z-index: 10; right: clamp(14px, 2.4vw, 34px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.rail-num { font: 500 11px/1 var(--mono); letter-spacing: .2em; color: var(--creme); }
#rail ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-end; }
#rail button { display: flex; justify-content: flex-end; align-items: center; width: 44px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; }
#rail button::after { content: ""; width: 14px; height: 1px; background: var(--creme); opacity: .4; transition: width .5s var(--ease), opacity .5s; }
#rail button:hover::after { opacity: .8; }
#rail li.actif button::after { width: 40px; opacity: 1; }
.visite-demo { position: fixed; z-index: 10; left: var(--marge); bottom: 20px; margin: 0; font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--doux); opacity: .8; }
#indice { position: fixed; z-index: 10; left: 50%; bottom: 26px; margin: 0; transform: translateX(-50%); font: 500 10px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--creme); transition: opacity .6s; }
#indice::after { content: ""; display: block; width: 1px; height: 30px; margin: 12px auto 0; background: linear-gradient(var(--creme), transparent); animation: indice 2s var(--ease) infinite; }
@keyframes indice { from { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } to { transform: scaleY(0); transform-origin: bottom; } }
#indice.parti { opacity: 0; }
.visite-passer { position: fixed; z-index: 10; right: var(--marge); bottom: 16px; display: inline-flex; align-items: center; min-height: 44px; font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--doux); text-decoration: none; }
.visite-passer:hover { color: var(--creme); }
#curseur { position: fixed; z-index: 95; left: -15px; top: -15px; width: 30px; height: 30px; border: 1px solid rgba(242, 235, 221, .75); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s, width .3s var(--ease), height .3s var(--ease), left .3s var(--ease), top .3s var(--ease), background .3s; }
html.curseur-perso #curseur { opacity: 1; }
#curseur.lien { width: 56px; height: 56px; left: -28px; top: -28px; background: rgba(242, 235, 221, .12); }
#curseur.dehors { opacity: 0 !important; }
html.visite-finie #scene, html.visite-finie .visite-voile, html.visite-finie #rail, html.visite-finie .visite-demo, html.visite-finie #indice, html.visite-finie .visite-passer { visibility: hidden; }
/* Les légendes restent dans la page pour les lecteurs d'écran (le h1 y est) : seulement invisibles et inertes */
html.visite-finie .legendes { opacity: 0; }
html.visite-finie .legendes * { pointer-events: none !important; }
/* Sans JavaScript ou sans 3D : la première photo et l'accroche, simplement */
html:not(.avec-visite) .visite { min-height: 100vh; background: var(--nuit) url("../visite/01.webp") center / cover; overflow-x: clip; }
html:not(.avec-visite) .legendes { position: absolute; }
html:not(.avec-visite) .legendes li:first-child { opacity: 1; transform: none; }
html:not(.avec-visite) #rail, html:not(.avec-visite) #indice { display: none; }
@media (max-width: 640px) {
  .legendes { right: calc(var(--marge) + 26px); bottom: 74px; }
  #rail { right: 6px; }
  #rail li.actif button::after { width: 26px; }
  #rail button::after { width: 10px; }
  .leg-actions .btn { width: 100%; }
}

/* Les choix et options du devis restent en texte courant (seules les étiquettes sont en Geist Mono) */
.choix, .option, .option-radios label, label.option, .choix small, .option small { font-family: var(--texte); }

/* ---------- Langage visuel 2026 : sections numérotées, filets qui se tracent, boutons qui se remplissent ---------- */
/* Chaque section porte son numéro devant son étiquette : 01 ——— COMMENT ÇA SE PASSE */
main { counter-reset: sec; }
.sec { counter-increment: sec; }
.sec-tete > .eyebrow::before { content: counter(sec, decimal-leading-zero) / ""; width: auto; height: auto; padding-right: 60px; background: linear-gradient(currentColor, currentColor) right 6px center / 44px 1px no-repeat; color: var(--noir); }
#rappel .sec-tete > .eyebrow::before { color: var(--creme); }
/* Un filet au-dessus de chaque section, qui se trace quand elle arrive à l'écran */
.sec > .sec-tete { padding-top: 26px; background: linear-gradient(var(--filet), var(--filet)) top left / 100% 1px no-repeat; }
@supports (animation-timeline: view()) {
  html:not(.calme) .sec > .sec-tete { background-size: 0 1px; animation: filet linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
  @keyframes filet { to { background-size: 100% 1px; } }
  /* Les photos se dévoilent par le bas en arrivant */
  html:not(.calme) :is(.demos figure, .demo-photos, .portrait, .apercu) img { animation: devoile linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
  @keyframes devoile { from { clip-path: inset(16% 0 0 0); scale: 1.08; } to { clip-path: inset(0); scale: 1; } }
  /* Fine barre de progression de lecture, tout en haut */
  body::before { content: ""; position: fixed; z-index: 120; top: 0; left: 0; right: 0; height: 2px; background: var(--champagne); transform-origin: left; transform: scaleX(0); pointer-events: none; animation: progression linear both; animation-timeline: scroll(root); }
  @keyframes progression { to { transform: scaleX(1); } }
}
/* Titres plus fins, chiffres alignés */
.titre, .tete h1, .respiration p, .perdu h1 { font-weight: 260; }
:is(.bloc .n, .num, .service .num, .fonction .num, .frise li::before, .engagements li::before) { font-weight: 200; font-variant-numeric: tabular-nums; color: var(--gris); }
:is(.prix-f, .tarif .p, .recap .total b, .big b, .plan .price, .carte-prix, .compteur output, .compteur > span, #prix, #sNuit, #sNuits) { font-weight: 250; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
/* Boutons : la couleur se remplit de gauche à droite au survol */
.btn { --remplir: var(--noir); --sur: var(--creme); font-family: var(--mono); font-size: 11px; letter-spacing: .22em; background-image: linear-gradient(var(--remplir), var(--remplir)); background-repeat: no-repeat; background-position: left; background-size: 0 100%; transition: background-size .55s var(--ease), color .35s var(--ease), border-color .35s; }
.btn:hover { background-color: transparent; background-image: linear-gradient(var(--remplir), var(--remplir)); background-size: 100% 100%; color: var(--sur); }
.btn-creme { --remplir: var(--creme); --sur: var(--nuit); }
.btn-creme:hover { background-color: transparent; }
.btn-ligne, .btn-ligne:hover { background-image: none; color: inherit; }
/* Cartes : un léger soulèvement au survol */
/* Grain de film, très discret, sur tout le site */
body::after { content: ""; position: fixed; inset: 0; z-index: 119; pointer-events: none; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html.avec-visite body::after { opacity: .025; }
/* Pied de page : la signature de la marque, en grand */
.pied-signature { grid-column: 1 / -1; margin: 56px 0 0; padding-top: 40px; border-top: 1px solid #2a2520; }
.pied .pied-signature img { display: block; width: 100%; max-width: 1100px; height: auto; opacity: .92; }
@media (prefers-reduced-motion: reduce) { .btn, :is(.bloc, .service, .fonction, .why) { transition: none; } }

/* ---------- La vitrine dans un téléphone : la vraie, qu'on fait défiler soi-même ---------- */
.vitrine { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: 56px; }
.vitrine-tel { position: relative; padding: 11px; background: #0b0908; border-radius: 46px; box-shadow: 0 50px 90px -40px rgba(21, 18, 15, .55), inset 0 0 0 1px #2a2520; }
.vitrine-tel::before { content: ""; position: absolute; z-index: 3; top: 21px; left: 50%; width: 82px; height: 22px; margin-left: -41px; border-radius: 12px; background: #0b0908; }
.vitrine-ecran { position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 36px; background: var(--nuit); }
.vitrine-apercu { display: block; width: 100%; height: 100%; object-fit: cover; }
.vitrine-lancer { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; white-space: nowrap; background: rgba(11, 9, 8, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--creme); border: 1px solid rgba(242, 235, 221, .6); font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .35s, color .35s; }
.vitrine-lancer::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--champagne); animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.vitrine-lancer:hover { background: var(--creme); color: var(--nuit); }
.vitrine-ecran iframe { position: absolute; top: 0; left: 0; width: 390px; height: 844px; border: 0; transform-origin: 0 0; background: var(--nuit); }
.vitrine-ecran.en-direct .vitrine-apercu, .vitrine-ecran.en-direct .vitrine-lancer { display: none; }
.vitrine-points { list-style: none; padding: 0; margin: 0; counter-reset: vp; border-top: 1px solid var(--filet); }
.vitrine-points li { counter-increment: vp; display: grid; grid-template-columns: 52px 1fr; gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--filet); }
.vitrine-points li::before { content: counter(vp, decimal-leading-zero); grid-row: span 2; font: 500 11px/2 var(--mono); letter-spacing: .2em; color: var(--gris); }
.vitrine-points b { font-family: var(--titre); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; color: var(--noir); }
.vitrine-points span { color: var(--gris); font-size: 15px; }
.vitrine-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 28px 0 0; }
.vitrine-actions .lien-suite { margin-top: 0; }
@media (max-width: 760px) {
  .vitrine { grid-template-columns: 1fr; }
  .vitrine-tel { width: min(300px, 82vw); margin: 0 auto; }
}

/* ---------- Interactions en relief (ordinateur) ---------- */
/* Le curseur : visible sur le crème comme sur le noir (il inverse les couleurs sous lui) */
#curseur { border-color: #fff; mix-blend-mode: difference; }
#curseur.lien { background: rgba(255, 255, 255, .9); }
#curseur.appui { width: 22px; height: 22px; left: -11px; top: -11px; }
html.curseur-perso, html.curseur-perso a, html.curseur-perso button, html.curseur-perso label { cursor: none; }
html.curseur-perso input, html.curseur-perso textarea, html.curseur-perso select { cursor: text; }
/* Cartes en relief et leur reflet */
.relief { position: relative; transform-style: preserve-3d; will-change: transform; }
.relief::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 48%); opacity: 0; transition: opacity .45s var(--ease); mix-blend-mode: soft-light; }
.relief:hover::after { opacity: 1; }
/* Le téléphone de la vitrine flotte doucement */
@media (prefers-reduced-motion: no-preference) {
  .vitrine-tel { animation: flotte 7s ease-in-out infinite; }
  @keyframes flotte { 50% { translate: 0 -12px; } }
}
/* Un bouton qu'on presse s'enfonce un peu */
.btn:active, .vitrine-lancer:active { scale: .97; }

/* ---------- Parcours client (tour 4) ---------- */
/* Téléphone : la 1re légende ne touche plus « Faites défiler », l'étiquette « démonstration » monte sous le menu */
@media (max-width: 640px) {
  .legendes { bottom: 100px; }
  .visite-demo { top: calc(var(--nav-h) + 6px); bottom: auto; right: calc(var(--marge) + 40px); line-height: 1.5; text-shadow: 0 1px 8px rgba(11, 9, 8, .6); opacity: 1; color: var(--creme); width: fit-content; padding: 4px 8px; background: rgba(11, 9, 8, .6); }
}
/* Après l'envoi : la suite, noir sur blanc, et nos comptes */
.thanks .suite { margin: 20px 0 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--doux); font-size: 15px; }
.thanks .suite a, .thanks-suivre a { color: var(--creme); }
.thanks-suivre { margin: 18px 0 0; font-size: 15px; color: var(--doux); }
/* Avis : vides tant qu'il n'y en a pas de vrais, et des preuves à vérifier soi-même */
#avis .avis-liste { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 24px; }
#avis .avis-liste:not(:has(li)) { display: none; }
#avis .avis blockquote { margin: 0; font-family: var(--titre); font-weight: 300; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; }
#avis .avis-qui, #avis .avis-quand { margin: 10px 0 0; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
#avis .preuves { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--filet); }
#avis .preuves li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--filet); }
#avis .preuves b { font-family: var(--titre); font-weight: 400; font-size: 22px; letter-spacing: -.02em; }
#avis .preuves a { white-space: nowrap; color: var(--noir); font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; text-underline-offset: 6px; }

a.ouverture { text-decoration: none; }
a.ouverture:hover { background: var(--champagne); color: var(--nuit); }
@media (max-width: 640px) { #avis .preuves li { flex-direction: column; gap: 6px; } }

/* ---------- Audit expérience et technique, tour 4 ---------- */
/* Les 3 problèmes arrivent un par un (l'ancienne animation du film les affichait d'un bloc) */
#legendes .pains span { animation: none; }
/* « Imaginez l'inverse » s'affiche seul, en grand, puis la réponse prend sa place */
#legendes li:nth-child(2) .leg-inverse { margin: 0; font: 200 clamp(44px, 8vw, 120px)/1 var(--titre); letter-spacing: -.035em; text-transform: none; color: var(--creme); transition: opacity .6s var(--ease), transform .8s var(--ease); }
#legendes li:nth-child(2) { display: grid; }
#legendes li:nth-child(2) > .leg-piece { grid-area: 1 / 1; }
#legendes li:nth-child(2) > :is(.leg-inverse, .leg-texte) { grid-area: 2 / 1; align-self: end; }
#legendes li:nth-child(2) .leg-texte { transition: opacity .6s var(--ease), transform .8s var(--ease); }
#legendes li:nth-child(2)[data-etape="1"] .leg-texte, #legendes li:nth-child(2)[data-etape="2"] .leg-inverse { opacity: 0; transform: translateY(12px); }
/* Lisibles sur les photos claires : une ombre douce derrière chaque légende, et des étiquettes en crème */
.legendes li::before { content: ""; position: absolute; z-index: -1; inset: -120px -25% -140px calc(-1 * var(--marge)); pointer-events: none; background: radial-gradient(75% 70% at 0% 100%, rgba(11, 9, 8, .62), rgba(11, 9, 8, 0)); }
.leg-piece, .tete .kicker { color: var(--creme); opacity: .85; text-shadow: 0 1px 10px rgba(11, 9, 8, .8); }
.leg-texte { text-shadow: 0 1px 2px rgba(11, 9, 8, .4), 0 6px 40px rgba(11, 9, 8, .5); }
/* La sortie de la visite : les repères s'effacent dès que l'offre entre à l'écran */
:is(.legendes, #rail, .visite-demo, #indice, .visite-passer) { transition: opacity .3s var(--ease), visibility 0s; }
html.visite-sort :is(#rail, .visite-demo, #indice, .visite-passer) { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
html.visite-sort .legendes { opacity: 0; }
html.visite-sort .legendes * { pointer-events: none !important; }
/* Le bas du premier écran, sur téléphone et à l'horizontale */
#indice { white-space: nowrap; }
@media (max-width: 640px) { #indice { bottom: 72px; } .legendes { bottom: 136px; } .visite-passer { bottom: 10px; } }
@media (orientation: landscape) and (max-height: 500px) {
  #indice { display: none; }
  .legendes { bottom: 52px; }
  .legendes .leg-texte, .legendes .pains { font-size: clamp(22px, 6.6vh, 30px); max-width: 20em; }
  .leg-piece { margin-bottom: 8px; }
  #legendes li:nth-child(2) .leg-inverse { font-size: clamp(30px, 10vh, 48px); }
}
/* Sans 3D (vieux téléphones, économie de données) : la photo de la pièce en cours */
html.sans-3d #scene { background: var(--nuit) url("../visite/01.webp") 28% 45% / cover no-repeat; }
/* Pendant l'intro, pas de rond de curseur sur le logo */
html.en-intro #curseur { opacity: 0 !important; }
/* Le curseur : un anneau sur les liens, un point sur les boutons (le texte du bouton reste lisible) */
#curseur.lien { background: transparent; width: 64px; height: 64px; left: -32px; top: -32px; }
html.curseur-perso:has(.btn:hover, .nav-devis:hover) #curseur { width: 10px; height: 10px; left: -5px; top: -5px; background: #fff; }
/* La vitrine sur téléphone : en plein écran, avec un bouton pour fermer */
.vitrine-plein { inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--nuit); }
.vitrine-plein::backdrop { background: var(--nuit); }
.vitrine-plein iframe { width: 100%; height: 100%; border: 0; }
.vitrine-fermer { position: fixed; z-index: 2; top: 12px; right: 12px; min-height: 44px; padding: 0 16px; background: rgba(11, 9, 8, .7); color: var(--creme); border: 1px solid rgba(242, 235, 221, .5); font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.vitrine-lancer { bottom: auto; top: 36%; }
.vitrine-tel:has(.en-direct) { animation: none; }
@media (orientation: landscape) and (max-height: 500px) { .vitrine-tel { width: calc((100svh - 70px) * 390 / 844 + 22px); } }
/* Numéros de section : seules les sections avec une étiquette comptent, et pas de numéros sur les pages courtes */
.sec { counter-increment: none; }
.sec:has(> .sec-tete > .eyebrow) { counter-increment: sec; }
main.sans-numero .sec-tete > .eyebrow::before { content: ""; width: 44px; height: 1px; padding: 0; background: currentColor; }
.service .num, .fonction .num { font: 500 11px/2 var(--mono); letter-spacing: .2em; }
/* Hauts de page courts : la villa en fond, voilée, sous le monogramme */
.tete.courte .tete-img { opacity: .4; filter: saturate(.7); }
.tete.courte::after { content: ""; background: linear-gradient(180deg, rgba(11, 9, 8, .7), rgba(11, 9, 8, .35) 40%, rgba(11, 9, 8, .92)); }
.tete-mono, .tete-tag { z-index: 1; }
/* Les mots-clés qui se remplissent au défilement */
.mot { display: inline; }
/* L'Écrin : une photo collante, qui change à chaque service */
.services-media { display: none; }
@media (min-width: 900px) {
  .services { grid-template-columns: 1fr 1fr; }
  .services-media { display: block; grid-column: 1; grid-row: 1 / span 4; align-self: start; position: sticky; top: 12vh; height: 76vh; overflow: hidden; }
  .services-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.06; transition: opacity .8s var(--ease), scale 1.2s var(--ease); }
  .services-media img.on { opacity: 1; scale: 1; }
  .services-media .tete-tag { top: auto; bottom: 14px; left: 14px; right: auto; background: rgba(11, 9, 8, .6); }
  .services .service { grid-column: 2; min-height: 60vh; }
}
/* Devis : le choix retenu se remplit comme les boutons */
.choix { background: linear-gradient(var(--noir), var(--noir)) left / 0 100% no-repeat; transition: background-size .55s var(--ease), color .35s; }
.choix:has(input:checked) { background-size: 100% 100%; color: var(--creme); box-shadow: none; }
.choix:has(input:checked) b { color: var(--creme); }
/* Menu à l'horizontale : les liens sur 2 colonnes */
@media (max-width: 1100px) and (orientation: landscape) and (max-height: 500px) {
  .nav-liens { flex-flow: column wrap; align-content: center; height: 100svh; padding: calc(var(--nav-h) + 8px) 0 16px; gap: 6px 56px; }
  .nav-liens a { font-size: 24px; }
}
/* Barre de lecture : cachée pendant la visite, et visible sur le crème */
html.avec-visite:not(.visite-finie) body::before { opacity: 0; }
body::before { background: var(--doux); }

/* ---------- Liste de contrôle : informations, retour en haut, pastille flottante, impression ---------- */
.maj { margin: 0 0 24px; font: 500 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.faq-groupe ~ .maj { margin: 48px 0 0; }
.donnees { margin: 10px 0 0; font-size: 13px; color: var(--gris); }
#rappel .donnees { color: var(--doux); }
.portrait .a-completer { color: var(--noir); }
.donnees a { color: inherit; }
.pied-legal a { color: inherit; }
.pied-haut { margin: 0; }
.pied-haut a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--noir); text-decoration: none; }
.pied-haut a::after { content: "↑"; letter-spacing: 0; transition: transform .4s var(--ease); }
.pied-haut a:hover::after { transform: translateY(-4px); }
.imprimer { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; padding: 4px 0; font: 500 11px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; background: none; border: 0; border-bottom: 1px solid currentColor; color: var(--noir); cursor: pointer; }
.barre-haut { display: none; }
/* Sur ordinateur, la barre devient une pastille flottante : rappel, devis et retour en haut */
@media (min-width: 641px) {
  .barre:not(.barre-tel) { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: flex; align-items: center; gap: 4px; padding: 6px; background: rgba(11, 9, 8, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(242, 235, 221, .22); color: var(--creme); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .barre.on { opacity: 1; transform: none; pointer-events: auto; }
  .barre .btn { padding: 12px 18px; }
  .barre .barre-total { display: none; }
  .barre-devis, .barre-haut { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px; font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--creme); text-decoration: none; }
  .barre-haut { border-left: 1px solid rgba(242, 235, 221, .22); font-size: 16px; letter-spacing: 0; }
  .barre-devis:hover, .barre-haut:hover { color: var(--champagne); }
}

/* Version imprimable (et « Enregistrer en PDF ») : texte noir sur blanc, sans le décor ni la 3D */
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; }
  *, *::before, *::after { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; }
  body::before, body::after { display: none !important; }
  .barre, .skip, #curseur, #intro, .visite, .vitrine, .respiration, .services-media, video, iframe, canvas, #rappel, .lecture, .imprimer, .recap .btn, #config,
  .pied-liens, .pied-voyageurs, .pied-suivre, .pied-haut, .pied-signature, .tete img, .tete video, .tete-tag { display: none !important; }
  .nav { display: block !important; position: static !important; transform: none !important; height: auto !important; padding: 0 0 8mm !important; border: 0 !important; }
  .nav > :not(.nav-logo), .nav .logo-c { display: none !important; }
  .nav .logo-n { display: block !important; width: 46mm !important; height: auto !important; opacity: 1 !important; }
  main *:not(.sr-only) { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important; }
  .tete { min-height: 0 !important; height: auto !important; padding: 0 0 8mm !important; }
  .sec { padding-top: 6mm !important; padding-bottom: 6mm !important; }
  .devis-grille { display: block !important; }
  .recap { position: static !important; border-top: 2px solid #000 !important; }
  .bloc, .recap, .total, details, li, tr { break-inside: avoid; }
  h1, h2, h3, summary { break-after: avoid; }
  .a-completer { outline: 1px dashed #000; }
  .pied { margin-top: 10mm !important; padding: 4mm 0 0 !important; }
}

/* ---------- Audit expérience, tour 5 ---------- */
/* Vitrine lancée : plate, pour que l'iframe reçoive la souris */
.vitrine-tel:has(.en-direct) { transform-style: flat; }
/* Plein écran sur téléphone : barre noire au-dessus de la démo */
.vitrine-plein[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.vitrine-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 4px 4px 4px 16px; background: var(--nuit); border-bottom: 1px solid #2a2520; color: var(--doux); font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.vitrine-plein .vitrine-fermer { position: static; }
@media (orientation: landscape) and (max-height: 500px) {
  .vitrine-lancer { top: 50%; width: 88%; padding: 0 10px; justify-content: center; text-align: center; white-space: normal; font-size: 9px; letter-spacing: .12em; transform: translate(-50%, -50%); }
}
/* L'Écrin sur téléphone et tablette : la photo devient un bandeau collant qui change à chaque service */
@media (max-width: 899px) {
  .services-media { display: block; position: sticky; top: 0; z-index: 1; height: calc(30svh + var(--nav-h) + 8px); border-top: calc(var(--nav-h) + 8px) solid var(--fond); margin-bottom: 28px; overflow: hidden; }
  /* L'étiquette dans le coin, comme sur ordinateur */
  .services-media .tete-tag { top: auto; bottom: 10px; left: 10px; right: auto; background: rgba(11, 9, 8, .6); }
  .services-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); }
  .services-media img.on { opacity: 1; }
}
/* D'une page à l'autre : la page suivante s'ouvre depuis une ligne, comme l'intro, et le logo reste en place */
.nav-logo { view-transition-name: logo; }
::view-transition-old(root) { animation: .35s cubic-bezier(.7, 0, .3, 1) both vt-sort; }
::view-transition-new(root) { animation: .8s cubic-bezier(.2, .7, .2, 1) both vt-entre; }
@keyframes vt-sort { to { opacity: 0; } }
@keyframes vt-entre { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
/* Les photos se dévoilent par bandes fines, comme nos filets */
@property --bande { syntax: "<length>"; inherits: false; initial-value: 0px; }
@supports (animation-timeline: view()) {
  html:not(.calme) :is(.demos figure, .demo-photos, .portrait, .apercu) img {
    -webkit-mask: repeating-linear-gradient(#000 0 var(--bande), transparent var(--bande) 22px);
    mask: repeating-linear-gradient(#000 0 var(--bande), transparent var(--bande) 22px);
    animation: bandes linear both; animation-timeline: view(); animation-range: entry 0% entry 85%;
  }
  @keyframes bandes { to { --bande: 22px; } }
}
/* Le calculateur : un mois de 30 traits, les nuits qui paient L'Écrin s'allument */
.big .mois { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; margin: 14px 0 6px; min-height: 0; max-width: none; }
.big .mois i { height: 22px; background: rgba(21, 18, 15, .1); transition: background .4s var(--ease); }
.big .mois i.on { background: var(--noir); }
/* Hauts de page : le titre reste lisible sur les fenêtres allumées, et L'Écrin cadre la villa sur téléphone */
.tete:not(.courte) h1 { text-shadow: 0 1px 2px rgba(11, 9, 8, .35), 0 8px 48px rgba(11, 9, 8, .55); }
@media (max-aspect-ratio: 3/4) { .tete-img[src*="tete-ecrin"] { object-position: 20% 50%; } }
/* L'aperçu de la vitrine commence sous l'encoche, comme la démo lancée */
.vitrine-apercu { box-sizing: border-box; padding-top: 34px; object-position: 50% 0; background: var(--nuit); }
/* Les options du devis se remplissent comme les choix du haut */
.option-radios label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--filet); background: linear-gradient(var(--noir), var(--noir)) left / 0 100% no-repeat; transition: background-size .45s var(--ease), color .3s; }
.option-radios label:has(input:checked) { background-size: 100% 100%; color: var(--creme); border-color: var(--noir); }
.option-radios label:has(input:focus-visible) { outline: 2px solid var(--noir); outline-offset: 3px; }
.option-radios input { position: absolute; opacity: 0; }

/* ---------- Page de paiement ---------- */
.paiement-maquette { margin: 0 auto; max-width: 1240px; padding: 12px var(--marge); background: var(--sable); color: var(--noir); font: 500 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.reglement { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px clamp(32px, 5vw, 72px); margin-top: clamp(32px, 5vw, 56px); }
.reglement h3 { margin: 0 0 6px; padding-top: 18px; border-top: 1px solid var(--noir); font-family: var(--titre); font-weight: 300; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.reglement > div > p { margin: 0 0 6px; color: var(--gris); }
.ligne-paiement { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 0; border-bottom: 1px solid var(--filet); }
.ligne-paiement p { margin: 0; }
.ligne-paiement b { display: block; font-family: var(--titre); font-weight: 300; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; color: var(--noir); }
.ligne-paiement span { display: block; margin-top: 4px; font-size: 14px; color: var(--gris); }
.ligne-paiement .btn { flex: none; }
.securite { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px 40px; margin: 0; padding: 0; list-style: none; }
.securite li { padding-top: 16px; border-top: 1px solid var(--noir); }
.securite b { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--noir); }
.securite span { display: block; margin-top: 8px; color: var(--gris); }
@media (max-width: 480px) {
  .ligne-paiement { flex-wrap: wrap; }
  .ligne-paiement .btn { width: 100%; justify-content: center; }
}

/* ---------- Tour 6 : parcours client et expérience ---------- */
/* Accueil, « Vérifiez par vous-même » : toute la ligne se touche, pas seulement les 11 px du lien */
#avis .preuves li { position: relative; }
#avis .preuves a::after { content: ""; position: absolute; inset: 0; }
/* Calculateur : la légende sous les 30 traits */
.big .mois { margin-bottom: 14px; }
.big .mois::after { content: attr(data-legende); grid-column: 1 / -1; margin-top: 6px; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
/* Pas de flash bleu au toucher : le retour visuel vient de nos propres états */
html { -webkit-tap-highlight-color: transparent; }
a:not(.btn):active, summary:active, .bascule button:active { opacity: .55; }
/* Devis : le bouton d'impression ne touche plus le bloc noir */
#devis { padding-bottom: clamp(56px, 8vw, 96px); }
/* La Collection : le lien du haut se touche bien au doigt */
a.ouverture { min-height: 44px; }
/* Devis imprimé : le haut de page sans ses grandes marges, le devis tient sur une feuille */
@media print { .tete-texte { padding-top: 6mm !important; padding-bottom: 0 !important; } }

/* L'Écrin : la phrase sous les prix (début de l'abonnement) respire */
.tarifs + .note { margin-top: 28px; max-width: 62ch; }

/* Devis : la précision sous un montant (« départ + 1er mois ») */
.recap dd small { display: block; margin-top: 2px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }

/* ---------- Guides : réponse courte, tableau, sources ---------- */
.guide .reponse { margin-top: 0; max-width: 56ch; font-size: 19px; line-height: 1.55; color: var(--noir); }
.guide ol { padding-left: 22px; }
.tableau { margin-top: 20px; overflow-x: auto; }
.tableau:focus-visible { outline: 1px solid var(--noir); outline-offset: 4px; }
.guide table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.guide th, .guide td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
.guide thead th { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); border-bottom-color: var(--noir); }
.guide tbody th { font-weight: 500; color: var(--noir); }
.guide td { color: var(--gris); }
.guide .sources li { font-size: 14px; }

/* ---------- Revue au peigne fin (29/10/2026) ---------- */
/* Gestion complète : de l'air avant la bande noire du rappel */
#comprend { padding-bottom: clamp(80px, 11vw, 150px); }
/* Les deux offres : bandeaux de même hauteur, boutons alignés en bas ; la carte mise en avant a son bouton plein */
@media (min-width: 901px) { .plan .ribbon { min-height: 2lh; } }
.plan .inner > .btn { margin-top: auto; }
.plan.hl .btn { background-size: 100% 100%; color: var(--creme); }
/* Les grandes photos : le côté du texte voilé, l'accroche et le titre restent lisibles sur les zones claires */
@media (min-width: 641px) { .tete:not(.courte)::after { background: linear-gradient(90deg, rgba(11, 9, 8, .55), rgba(11, 9, 8, 0) 60%), linear-gradient(180deg, rgba(11, 9, 8, .55) 0%, rgba(11, 9, 8, .1) 35%, rgba(11, 9, 8, .3) 55%, rgba(11, 9, 8, .9) 100%); } }
/* Devis : « Non merci » coché reste léger, le noir plein est pour les vrais choix */
.option-radios label:has(input[value="0"]:checked) { background-size: 0 100%; color: var(--noir); border-color: var(--noir); }
/* Devis : les groupes d'options alignés sur les cases à cocher ; sur téléphone, les choix les uns sous les autres */
.option-groupe { padding-left: 36px; }
@media (max-width: 640px) { .option-radios { display: grid; } }
/* Ce qu'on paie, sous les prix : en graisse normale, sans interlettrage serré */
.carte-prix small, .plan .price small { font-weight: 400; letter-spacing: 0; }
/* Contraste élevé de Windows : on voit toujours ce qui est coché */
@media (forced-colors: active) {
  .choix:has(input:checked), .option-radios label:has(input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .choix:has(input:checked) b { color: HighlightText; }
  .option input:checked::after { forced-color-adjust: none; background: CanvasText; }
}