/* base.css — comportements qui ne s'expriment pas en utilités Tailwind.
   Aucune valeur visuelle propre ici : tout vient de tokens.css.
   Polices auto-hébergées (aucun appel à Google Fonts) : Fraunces (variable, licence OFL) = display web ;
   Questrial (OFL) = doublure de Century Gothic, qui reste prioritaire s'il est installé (licence Monotype). */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Questrial"; src: url("/assets/fonts/questrial.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

html { scroll-behavior: smooth; }
body {
  background: var(--c-fond);
  color: var(--c-texte);
  font-family: var(--f-corps);
  font-size: var(--t-body);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; line-height: 1.08; }
h3 { line-height: 1.25; }
p { text-wrap: pretty; }
section[id] { scroll-margin-top: calc(var(--header-compact) + var(--s-4)); }
@media (max-width: 767px) { section[id] { scroll-margin-top: calc(var(--header-mobile) + var(--s-4)); } }

/* ── En-tête : transparent sur le hero sombre, crème pâle avec filet doré après le défilement ── */
[data-header] {
  color: var(--c-fond);
  background: transparent;
  border-bottom: var(--filet-w) solid transparent;
  transition: background var(--m-nav) ease, border-color var(--m-nav) ease, color var(--m-nav) ease;
}
[data-header].scrolled {
  color: var(--c-texte);
  background: var(--c-fond-2);
  border-bottom-color: var(--c-filet);
}

/* ── Barre de progression du défilement ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: var(--barre-h); width: 0;
  background: var(--c-cta); z-index: var(--z-progres); transition: width 80ms linear;
}

/* ── Boutons : transitions d'interaction 150-200 ms seulement ── */
.bouton, .contour { transition: background var(--m-nav) ease, color var(--m-nav) ease, border-color var(--m-nav) ease; }
.contour:hover { background: var(--c-fond); }

/* ── L'arche : cadre à double filet doré (filet extérieur + filet intérieur décalé) ── */
.arche { position: relative; border: var(--filet-w) solid var(--c-filet); border-radius: var(--r-arche); padding: var(--filet-gap); }
.arche-img { position: relative; overflow: hidden; border-radius: var(--r-arche-img); }
.arche-img::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border: var(--filet-w) solid var(--c-filet); border-radius: inherit;
}

/* ── La lueur de fenêtre : lueur radiale chaude derrière l'élément clé ── */
.lueur { position: relative; isolation: isolate; }
.lueur::after {
  content: ""; position: absolute; inset: calc(var(--s-8) * -1); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--c-lueur), transparent 70%);
}
/* Un seul moment orchestré : la lueur du hero s'intensifie (opacité 0→1) pendant que le H1 apparaît. */
@keyframes lueur-entree { from { opacity: 0; } to { opacity: 1; } }
.lueur-hero::after { animation: lueur-entree var(--m-lueur) ease-out both; }
@keyframes entree {
  from { opacity: 0; transform: translateY(var(--s-2)); }
  to { opacity: 1; transform: none; }
}
.entree { animation: entree var(--m-entree) var(--m-ease) both; }

/* ── Séparateur : hairline doré de 64 px avec le point doré du système au centre ── */
.sep { position: relative; width: var(--s-16); height: var(--filet-w); margin: 0 auto; background: var(--c-filet); }
.sep::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--s-1); height: var(--s-1);
  transform: translate(-50%, -50%); border-radius: var(--r-pill); background: var(--c-dore);
}

/* ── Apparition au défilement (mécanique reprise du site unéo) ──
   L'état masqué n'existe que si main.js a confirmé qu'il sait révéler (classe .js-reveal). */
.js-reveal [data-reveal] {
  opacity: 0; transform: translateY(var(--s-6));
  transition: opacity var(--m-reveal) var(--m-ease), transform var(--m-reveal) var(--m-ease);
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
.js-reveal [data-reveal-group] > * {
  opacity: 0; transform: translateY(var(--s-6));
  transition: opacity var(--m-reveal) var(--m-ease), transform var(--m-reveal) var(--m-ease);
}
.js-reveal [data-reveal-group].is-visible > * { opacity: 1; transform: none; }
.js-reveal [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: var(--m-stagger); }
.js-reveal [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: calc(var(--m-stagger) * 2); }
.js-reveal [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: calc(var(--m-stagger) * 3); }
.js-reveal [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: calc(var(--m-stagger) * 4); }

/* ── Photos : zoom-out à l'entrée puis scale(1.02) au survol ── */
.photo > picture > img, .photo > img, .arche-img > picture > img { transition: transform var(--m-photo) var(--m-ease); }
.js-reveal [data-zoom] picture > img { transform: scale(1.13); transition: transform var(--m-zoom) var(--m-ease); }
.js-reveal [data-zoom].is-visible picture > img { transform: scale(1); }
.photo:hover > picture > img, .arche-img:hover > picture > img, a:hover .photo > picture > img,
.js-reveal [data-zoom].is-visible:hover picture > img { transform: scale(1.02); transition-duration: var(--m-photo); }

/* Champs : focus = bordure terracotta + contour visible. Erreur = bordure terracotta, texte charbon. */
.champ:focus { border-color: var(--c-cta); }
[aria-invalid="true"] { border-color: var(--c-cta); }

.image-manquante {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  min-height: var(--s-32); background: var(--c-fond-2); color: var(--c-texte);
  font-size: var(--t-label); text-transform: uppercase;
}

/* Cadre photo : liseré doré intérieur (cartes des condos). */
.cadre { position: relative; }
.cadre::before {
  content: ""; position: absolute; inset: var(--s-2); z-index: 1; pointer-events: none;
  border: var(--filet-w) solid var(--c-filet);
}

/* ── Hero : la photo s'allume dans l'arche, comme une fenêtre le soir (600 ms) ── */
@keyframes allume { from { opacity: 0.55; } to { opacity: 0; } }
.arche-allume::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--c-texte); opacity: 0; animation: allume var(--m-allume) ease-out both;
}

/* ── Menu mobile plein écran (comme unéo) : l'en-tête devient plein, le bouton devient une croix ronde ── */
.burger-bar { display: block; width: var(--s-6); height: calc(var(--filet-w) * 2); background: currentColor; transition: transform var(--m-nav) ease, opacity var(--m-nav) ease; }
[data-header].menu-open { color: var(--c-texte); background: var(--c-fond); border-bottom-color: transparent; }
[data-menu-toggle][aria-expanded="true"] { color: var(--c-texte); }
[data-menu-toggle][aria-expanded="true"] .burger-bar:nth-child(1) { transform: translateY(calc(var(--s-1) + var(--filet-w) * 2)) rotate(45deg); }
[data-menu-toggle][aria-expanded="true"] .burger-bar:nth-child(2) { opacity: 0; }
[data-menu-toggle][aria-expanded="true"] .burger-bar:nth-child(3) { transform: translateY(calc((var(--s-1) + var(--filet-w) * 2) * -1)) rotate(-45deg); }
body.menu-lock { overflow: hidden; }

/* ── Surface bois ambré (#C89B5F) : fond de marque du hero, du bandeau final et du pied de page ──
   Texte crème, comme sur la planche (2,0:1 : choix de marque, voir tokens.css). Filets et lueur crème. */
.surface-ambre {
  background: var(--c-dore); color: var(--c-fond);
  --c-filet: rgba(242, 235, 211, 0.6);
  --c-lueur: rgba(242, 235, 211, 0.45);
}
/* En-tête flottant sur l'ambré : texte et contours crème, CTA crème. Une fois plein (crème pâle) : texte charbon, CTA terracotta. */
[data-header]:not(.scrolled):not(.menu-open) { --c-dore: var(--c-fond); --c-filet: transparent; }
[data-header]:not(.scrolled):not(.menu-open) .cta-header { background: var(--c-fond); color: var(--c-texte); }
[data-header]:not(.scrolled):not(.menu-open) .cta-header:hover { background: var(--c-fond-2); }
/* En-tête plein (crème) : CTA bois ambré, texte crème. */
[data-header].scrolled .cta-header, [data-header].menu-open .cta-header { background: var(--c-dore); color: var(--c-fond); }
[data-header].scrolled .cta-header:hover, [data-header].menu-open .cta-header:hover { background: var(--c-texte); color: var(--c-fond-2); }

/* CTA de l'en-tête : fondu de 200 ms ; masqué tant qu'un CTA équivalent est à l'écran (hero, fin de journée). */
.cta-wrap { transition: opacity var(--dur-micro) var(--ease); }
.cta-wrap.cta-masque { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-micro) var(--ease), visibility 0s linear var(--dur-micro); }
@media (prefers-reduced-motion: reduce) { .cta-wrap, .cta-wrap.cta-masque { transition: none; } }


/* ── Logo de l'en-tête : version crème sur l'ambré (flottant), charbon une fois l'en-tête plein ou le menu ouvert ── */
[data-logo] { grid-area: 1 / 1; transition: opacity var(--m-nav) ease; }
[data-header]:not(.scrolled):not(.menu-open) [data-logo="plein"] { opacity: 0; }
[data-header].scrolled [data-logo="flottant"], [data-header].menu-open [data-logo="flottant"] { opacity: 0; }

/* ── Accessibilité et confort ── */
/* Contour de focus visible sur l'ambré (le terracotta y serait quasi invisible). */
.surface-ambre :focus-visible, [data-header]:not(.scrolled):not(.menu-open) :focus-visible { outline-color: var(--c-fond); }
button:disabled { opacity: 0.6; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-progress { transition: none; }
}
/* Barre collante : respecte la zone sûre des téléphones (encoche, barre de geste). */
[data-sticky-bar] { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }

/* ── Champs de formulaire : bordure 1,5 px en charbon atténué (≥ 3:1 sur le fond), hauteur ≥ 56 px mobile ── */
.champ { border-width: var(--champ-bordure); border-style: solid; border-color: var(--c-texte-2); }
.champ:focus { border-color: var(--c-cta); }

/* Pied de page : focus 3 px avec décalage (charbon sur l'ambré). */
[data-section="footer"] :focus-visible { outline-width: 2px; outline-offset: 2px; }

/* Bande de faits : chiffres tabulaires. */
.chiffres { font-variant-numeric: tabular-nums lining-nums; }

/* ── Arc hero → journée : le moment orchestré unique ──
   Desktop ≥ 1024 px, mouvement autorisé (classe html.hero-arc-on posée avant le premier affichage) : le hero fait 200 vh,
   son calque sticky (100 vh) contient le texte, l'arche-repère et un calque média plein écran découpé par clip-path
   (jamais de width/height/scale animés). main.js pilote tout par le défilement (sans librairie). Ailleurs : mise en page statique. */
.hero-media, .hero-intro { display: none; }
.hero-img { position: absolute; inset: 0; }
.hero-img-int { opacity: 0; }
html.hero-arc-on #hero { height: 200vh; }
html.hero-arc-on .hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
html.hero-arc-on .hero-texte-couche { position: relative; z-index: 2; height: 100%; }
html.hero-arc-on .hero-media { display: block; position: absolute; inset: 0; z-index: 1; visibility: hidden; }
html.hero-arc-on #hero.hero-arc-pret .hero-media { visibility: visible; }
html.hero-arc-on #hero.hero-arc-pret .arche-img picture { visibility: hidden; }
html.hero-arc-on .hero-intro { display: flex; position: absolute; inset: 0; z-index: 3; align-items: flex-end; pointer-events: none; opacity: 0; }
html.hero-arc-on .journee-intro { display: none; }
/* Fin de l'arc : plus de boîte. Un voile charbon, localisé dans le quart inférieur gauche de l'image (opacité max 0,65 : à 0,55 le texte courant n’atteint que 3,95:1 sur cette image claire ; à 0,65, 4,8:1 et plus), puis le texte crème posé directement. */
.hero-intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 100% 80% at 0% 100%, rgba(247, 244, 238, 0.6) 0%, rgba(247, 244, 238, 0.6) 70%, rgba(247, 244, 238, 0) 100%); }
.hero-voile { position: relative; max-width: 40rem; color: var(--c-texte); }

/* Mobile et tablette (< 1024 px) : texte → CTA → arche. Si animation-timeline: view() existe, l'arche s'élargit jusqu'aux
   bords de l'écran (clip-path lié au défilement) ; sinon elle reste statique. */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero-arche { width: auto; margin-inline: calc(var(--page-x) * -1); padding: 0; border-color: transparent; }
    .hero-arche .arche-img { clip-path: inset(0 22% 0 22% round 999px 999px 24px 24px); animation: arche-elargie linear both; animation-timeline: view(); animation-range: entry 5% cover 45%; }
    @keyframes arche-elargie { to { clip-path: inset(0 0 0 0 round 0 0 0 0); } }
  }
}

/* ── Une journée chez vous (2b) ──
   Par défaut (mobile, mouvement réduit, sans JS) : image → heure → titre → texte, empilés, sans effet, avec une pastille d'heure
   collante. main.js ajoute .visite-fixe (≥ 1024 px, mouvement autorisé) : cadre média collant à droite, image révélée par balayage
   (clip-path, déclenché par le chapitre au centre de l'écran), fond interpolé crème → sable → ambre doux selon le défilement. */
.heure { font-size: 1.375rem; line-height: 1.2; color: var(--c-texte); font-variant-numeric: tabular-nums lining-nums; }
.visite-pastille { position: sticky; top: calc(var(--header-compact) + var(--s-2)); z-index: var(--z-pastille); align-self: flex-start; padding: var(--s-1) var(--s-3); border-radius: 999px; background: var(--c-fond-2); border: var(--filet-w) solid var(--c-dore); font-family: var(--f-titre); font-style: italic; font-size: 1.125rem; color: var(--c-texte); }
.visite-pile { display: none; }
.visite-cadre { position: relative; }
.visite-vue { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-section) var(--ease); }
.visite-vue[data-revele] { clip-path: inset(0); }
.visite-fixe { background-color: var(--journee-bg, var(--c-fond)); }
.visite-fixe .visite-pastille { display: none; }
.visite-fixe .visite-pile { display: block; position: sticky; top: max(15vh, calc(var(--header-compact) + var(--s-4))); align-self: start; }
.visite-fixe .visite-cadre { aspect-ratio: auto; height: 70vh; }
.visite-fixe .visite-photo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.visite-fixe .visite-etape { min-height: 100vh; justify-content: center; }
/* Timeline : trait fin, remplissage lié au défilement (scaleX), points = vrais boutons de 44 px minimum. */
.visite-repere { position: relative; display: flex; margin-top: var(--s-6); list-style: none; padding: 0; }
.visite-repere::before, .visite-repere::after { content: ""; position: absolute; top: calc(var(--s-3) / 2 + var(--s-2)); left: 12.5%; right: 12.5%; height: 1px; }
.visite-repere::before { background: var(--c-dore); }
.visite-repere::after { background: var(--c-texte); transform: scaleX(var(--prog, 0)); transform-origin: left; }
.visite-repere li { position: relative; flex: 1; display: flex; justify-content: center; }
.visite-point-btn { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); min-width: 44px; min-height: 44px; padding: var(--s-2) var(--s-2) 0; background: none; border: 0; cursor: pointer; touch-action: manipulation; color: var(--c-texte); }
.visite-point { position: relative; z-index: 1; width: var(--s-3); height: var(--s-3); border-radius: 50%; border: 1.5px solid var(--c-texte); background: var(--c-fond); transition: background-color var(--dur-micro) ease-out; }
.visite-repere li[data-actif] .visite-point { background: var(--c-texte); }
.visite-heure { font-size: var(--t-label); }
/* Flèche du CTA de fin de journée : avance de 4 px au survol, pression à .98 (200 ms). */
.bouton-fleche svg { transition: transform var(--dur-micro) var(--ease); }
.bouton-fleche:hover svg { transform: translateX(4px); }
.bouton-fleche:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) { .bouton-fleche:hover svg, .bouton-fleche:active { transform: none; } }

/* En-tête compact : au-delà de 24 px de défilement (sentinelle IntersectionObserver), la hauteur passe de 120 à 72 px
   et le logo est réduit par transform: scale (sa hauteur ne change pas). < 768 px : 64 px dès le départ. */
[data-header] .hdr { height: var(--header-haut); transition: height var(--m-compact) ease-out; }
[data-header].scrolled .hdr { height: var(--header-compact); }
[data-header] [data-logo-wrap] { transform-origin: left center; transition: transform var(--m-compact) ease-out; }
[data-header].scrolled [data-logo-wrap] { transform: scale(0.6); }
@media (max-width: 767px) {
  [data-header] .hdr, [data-header].scrolled .hdr { height: var(--header-mobile); }
  [data-header] [data-logo-wrap] { transform: scale(0.6); }
}

/* Surface foncée (charbon) : le seul changement de surface fort de la page — le quartier. Texte crème (≈ 12:1). */
.surface-soir { background: var(--c-texte); color: var(--c-fond); --c-filet: rgba(242, 235, 211, 0.3); }

/* Barre d'action fixe (< 768 px) : [ Appeler ] [ Planifier ma visite ], 56 px, 12 px d'écart, zone de sécurité de l'appareil.
   Le body réserve sa hauteur pour que rien ne reste caché dessous. */
.barre-action { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }
@media (max-width: 1023px) { body { padding-bottom: calc(var(--s-24) + env(safe-area-inset-bottom)); } }

/* Sur fond caramel (texte crème, décision du client) : aucun texte sous 18 px, poids 400 minimum (corps) et 500 (liens),
   aucune opacité réduite. Le texte de la carte du formulaire (charbon sur crème) garde ses tailles. */
.surface-ambre { font-size: var(--t-ambre-min); }
.surface-ambre .text-label, .surface-ambre .text-body, .surface-ambre .text-caption { font-size: var(--t-ambre-min); }
.surface-ambre a:not([class*="font-bold"]) { font-weight: 500; }
.surface-ambre .carte-form .text-label, .surface-ambre .carte-form .text-caption { font-size: var(--t-label); }
.surface-ambre .carte-form .text-body { font-size: var(--t-body); }
.surface-ambre .carte-form a:not([class*="font-bold"]) { font-weight: inherit; }

/* Vue agrandie d'un plan : <dialog> natif (focus piégé, Échap, retour du focus). Ouverture en fondu de 300 ms (0 ms si mouvement réduit).
   L'image garde sa résolution maximale ; elle défile dans le cadre sur mobile, le zoom du navigateur reste libre. */
.dialogue { margin: auto; padding: 0; border: 0; width: min(96vw, 64rem); max-height: 92vh; border-radius: var(--r-card); background: var(--c-fond-2); color: var(--c-texte); }
.dialogue[open]:not([data-vt]) { animation: dialogue-entree var(--m-dialogue) ease-out; }
.dialogue::backdrop { background: rgba(46, 42, 38, 0.7); }
@keyframes dialogue-entree { from { opacity: 0; } to { opacity: 1; } }
.dialogue-contenu { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); max-height: 92vh; }
.dialogue-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.dialogue-corps { overflow: auto; min-height: 0; }
.dialogue-image { display: block; width: auto; max-width: none; height: auto; }
@media (min-width: 768px) { .dialogue-image { max-width: 100%; margin: 0 auto; } }
html:has(dialog[open]) { overflow: hidden; }

/* Liens de navigation sur le caramel (en-tête au repos sur le hero) : poids 500. */
[data-header] nav a { font-weight: 500; }

/* ── Samedi, 9 h : photo plein écran (seulement si le fichier existe). Texte crème sur voile local (AA).
   Entrée unique : l'image passe de scale(1.04) à scale(1) en 600 ms. Aucune parallaxe. ── */
.quartier-photo { position: relative; display: flex; align-items: flex-end; min-height: 100svh; overflow: hidden; color: var(--c-fond); background: var(--c-texte); }
.quartier-photo-cadre { position: absolute; inset: 0; }
.quartier-photo-texte { position: relative; z-index: 1; width: 100%; }
.quartier-photo-voile { max-width: 40rem; color: var(--c-fond); }
.quartier-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--c-voile), transparent 60%); }
.photo-anim .quartier-photo-cadre { transform: scale(1.04); }
.photo-anim.est-vu .quartier-photo-cadre { transform: none; transition: transform var(--dur-moment) var(--ease); }

/* ── Quartier (surface foncée) : titre, texte et liste de repères. ── */
.quartier-titre { text-wrap: balance; max-width: 16ch; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; }
.quartier-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.quartier-ligne { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-4); row-gap: var(--s-1); align-items: baseline; padding: calc(var(--s-4) + var(--s-1)) 0; border-top: var(--filet-w) solid var(--c-filet); }
.quartier-ligne > :last-child { grid-column: 2; }
.quartier-puce { width: 10px; height: 10px; border-radius: 50%; background: var(--c-dore); align-self: center; transition: transform var(--dur-micro) var(--ease); }
.quartier-ligne:nth-child(2) .quartier-puce { background: var(--c-ambre-doux); }
.quartier-ligne:nth-child(3) .quartier-puce { background: var(--c-sable); }
.quartier-ligne:nth-child(4) .quartier-puce { background: var(--c-fond); }
@media (min-width: 768px) {
  .quartier-ligne { grid-template-columns: auto minmax(0, 16rem) 1fr; column-gap: var(--s-6); align-items: center; padding: var(--s-6) 0; }
  .quartier-ligne > :last-child { grid-column: auto; }
}
@media (hover: hover) {
  .quartier-ligne:hover .quartier-puce { transform: scale(1.6); }
}

/* ── Plans : cartes (bordure caramel au survol, aucune ombre), loupe de 44 px, contrôle segmenté mobile, zones de pièces ── */
.plan-carte-corps { border: var(--filet-w) solid var(--c-filet); cursor: pointer; transition: border-color var(--dur-micro) var(--ease); }
.plan-carte-corps:hover, .plan-carte-corps:focus-within { border-color: var(--c-ambre); }
.plan-loupe { position: absolute; right: var(--s-3); bottom: var(--s-3); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--c-fond-2); color: var(--c-texte); cursor: pointer; touch-action: manipulation; }
.plans-onglets { display: flex; gap: var(--s-3); }
.plans-onglets[hidden] { display: none; }
.plans-onglet { flex: 1; min-height: var(--cible-mobile, 56px); padding: 0 var(--s-4); border: 2px solid var(--c-ambre); border-radius: var(--r-cta); background: var(--c-fond-2); color: var(--c-texte); font-weight: 500; cursor: pointer; touch-action: manipulation; text-align: center; transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.plans-onglet[aria-selected="true"] { background: var(--c-ambre); color: var(--c-fond); }
/* Un seul plan à la fois sur mobile, fondu croisé de 450 ms (les cartes se superposent dans la même cellule). */
.plans-pile { display: grid; }
.plans-pile > [data-plan-carte] { grid-area: 1 / 1; }
.plans-pile > [data-plan-carte]:not([data-actif]) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-section) var(--ease), visibility 0s linear var(--dur-section); }
.plans-pile > [data-plan-carte][data-actif] { opacity: 1; visibility: visible; transition: opacity var(--dur-section) var(--ease); }
/* Vue agrandie : morphing de la miniature (View Transitions API) ; repli = fondu simple. */
::view-transition-group(plan-zoom) { animation-duration: var(--dur-moment); animation-timing-function: var(--ease); }
.dialogue-planwrap { position: relative; display: inline-block; max-width: 100%; }
.plan-zone { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; border: 2px solid var(--c-fond); border-radius: 999px; background: rgba(46, 42, 38, 0.55); cursor: pointer; touch-action: manipulation; }
.plan-zone-nom { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); padding: var(--s-1) var(--s-2); border-radius: var(--r-cta); background: var(--c-texte); color: var(--c-fond); font-size: var(--t-label); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease); }
.plan-zone:hover .plan-zone-nom, .plan-zone:focus-visible .plan-zone-nom { opacity: 1; }

/* ── L'essentiel : pastilles « Inclus » (icônes à trait fin de 1,5 px), valeurs alignées à gauche, un seul fondu pour la section ── */
.inclus-pastille { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border: var(--filet-w) solid var(--c-dore); border-radius: 999px; background: var(--c-fond-2); color: var(--c-texte); font-size: var(--t-body); }
.essentiel-ligne { display: flex; flex-direction: column; gap: var(--s-1); }
@media (min-width: 640px) { .essentiel-ligne { display: grid; grid-template-columns: 11rem 1fr; column-gap: var(--s-6); align-items: baseline; } }
/* Un seul fondu-montée pour toute la section (jamais ligne par ligne). Contenu visible par défaut : l'état masqué n'existe que si main.js l'active. */
.js-fondu [data-fondu] { opacity: 0; transform: translateY(var(--rise)); }
.js-fondu [data-fondu].est-vu { opacity: 1; transform: none; transition: opacity var(--dur-section) var(--ease), transform var(--dur-section) var(--ease); }

/* ── Formulaire : puces radio (inputs natifs masqués visuellement, mais accessibles), état du bouton, écran de succès ── */
.chips-groupe { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip-texte { display: inline-flex; align-items: center; min-height: var(--cible-mobile); padding: 0 var(--s-4); border: var(--champ-bordure) solid var(--c-texte-2); border-radius: var(--r-cta); background: var(--c-fond-2); color: var(--c-texte); font-family: var(--f-corps); font-size: var(--t-body); touch-action: manipulation; transition: background-color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
@media (min-width: 768px) { .chip-texte { min-height: var(--cible-desktop); } }
.chip:hover .chip-texte { border-color: var(--c-ambre); }
.chip:active .chip-texte { transform: scale(0.98); }
.chip-input:checked + .chip-texte { background: var(--c-ambre); border-color: var(--c-ambre); color: var(--c-fond); }
.chip-input:focus-visible + .chip-texte { outline: 2px solid var(--c-texte); outline-offset: 2px; }
button[type="submit"].bouton-envoi:active { transform: scale(0.98); }
button[type="submit"][aria-busy="true"] { cursor: progress; }
.succes-arche path { stroke: var(--c-ambre); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.succes-arche.trace path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-moment) var(--ease); }

/* ── Composants transversaux (phase 7) ── */
/* Grain : bruit SVG (feTurbulence) à 3 % d'opacité, uniquement sur les surfaces caramel ; ne capte aucun clic ; image statique (aucun coût d'animation). */
.surface-ambre { position: relative; }
.surface-ambre::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Focus visible : anneau de 2 px, décalé de 2 px. Crème sur le caramel et le charbon ; charbon sur le crème et le sable (la carte du formulaire est crème, même dans le bandeau caramel). */
:focus-visible { outline: 2px solid var(--c-texte); outline-offset: 2px; }
.surface-soir :focus-visible { outline-color: var(--c-fond); }
.surface-ambre :focus-visible, [data-header]:not(.scrolled):not(.menu-open) :focus-visible { outline-color: var(--c-texte); }
.surface-ambre .carte-form :focus-visible { outline-color: var(--c-texte); }
.surface-ambre :focus-visible { outline-width: 2px; outline-offset: 2px; }

/* Tout ce qui se clique : curseur main et pas de zoom au double toucher. */
a[href], button:not(:disabled), [role="button"], [role="tab"], summary, label[for], .chip, select, input[type="radio"], input[type="checkbox"] { cursor: pointer; touch-action: manipulation; }

/* Journée en mise en page statique sur grand écran (mouvement réduit, impression, PDF) : les 4 étapes en 2 colonnes, sans colonne vide. */
@media (min-width: 1024px) {
  [data-visite]:not(.visite-fixe) .visite-grille { display: block; }
  [data-visite]:not(.visite-fixe) .visite-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16) var(--s-24); }
}

/* ── Essentiel : « À prévoir » (même pastille, contour plus discret) et « Comment ça se passe » (numéros en serif d'affichage) ── */
.aprevoir-pastille { background: transparent; border-color: var(--c-filet); }
.etapes { counter-reset: etape; list-style: none; margin: 0; padding: 0; }
.etape { counter-increment: etape; }
.etape-num::before { content: counter(etape); font-family: var(--f-titre); font-size: var(--t-d2); line-height: 1; color: var(--c-ambre); font-variant-numeric: lining-nums; }


/* ── Hero : entrée chorégraphiée (kicker → titre → sous-titre → faits → boutons, pas de 40 ms, ≤ 600 ms au total) ; arche agrandie, bornée par la hauteur de l'écran ── */
@keyframes hero-monte { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
.hero-texte .entree { animation: none; }
.hero-texte .entree > * { animation: hero-monte var(--m-entree) var(--m-ease) both; animation-delay: calc(var(--m-stagger) * var(--n, 0) / 2); }
.hero-texte .entree > :nth-child(2) { --n: 1; }
.hero-texte .entree > :nth-child(3) { --n: 2; }
.hero-texte .entree > :nth-child(4) { --n: 3; }
.hero-texte .entree > :nth-child(5) { --n: 4; }
.hero-texte .lead, .hero-texte .text-body-l { text-wrap: pretty; }
@media (min-width: 1024px) {
  #hero .hero-arche { width: min(100%, calc((100svh - 15rem) * 0.8)); }
}

/* ── HERO V2 (famille, chaleureux) : pastille photo dans le titre, titre resserré, entrée en deux temps. Scopé à .hero-v2. ── */
.hero-v2 #hero-titre { text-wrap: balance; letter-spacing: -0.02em; line-height: 1.04; }

/* ── HERO V3 (heure dorée) : image réchauffée, lueur dorée au pied de l'arche, 3e filet qui apparaît en fondu (600 ms). Scopé à .hero-v3. ── */
@keyframes hero-filet-apparait { from { outline-color: rgba(242, 235, 211, 0); } to { outline-color: rgba(242, 235, 211, 0.4); } }
.hero-v3 .hero-arche { outline: var(--filet-w) solid rgba(242, 235, 211, 0.4); outline-offset: var(--s-3); animation: hero-filet-apparait var(--m-lueur) var(--m-ease) both; animation-delay: var(--m-entree); }
.hero-v3 .hero-arche .arche-img { box-shadow: inset 0 -5rem 4rem -3rem rgba(200, 155, 95, 0.4); }
.hero-v3 .hero-arche .arche-img img { filter: saturate(1.1) contrast(1.03) sepia(0.08); }

/* ── HERO ALLÉGÉ (v4) : ligne de faits unique, boutons côte à côte, un seul contour d'arche, titre sur 2 lignes ── */
#hero #hero-titre { font-size: clamp(2.4rem, 5.2vw, 4rem); }
/* Rythme de la colonne : eyebrow → H1 24 · H1 → caractéristiques 24 · caractéristiques → boutons 32 · boutons → microcopy 12 (échelle --s-*, 20/14 px n'existant pas). */
#hero .hero-texte .entree { gap: 0; }
#hero #hero-titre { margin: var(--s-6) 0 0; }
.hero-ligne { margin: var(--s-6) 0 0; font-size: max(1.125rem, var(--t-body-l)); font-weight: 400; }
.hero-prix { font-weight: 600; }
.hero-actions { margin-top: var(--s-8); }
.hero-microcopy { margin: 0; }
/* Focus clavier : contour crème 2 px, décalé de 3 px, sur les deux boutons du hero */
#hero .hero-actions a:focus-visible { outline: 2px solid var(--c-fond); outline-offset: 3px; }
#hero .hero-arche { border-color: transparent; padding: 0; }
/* Photo de famille : cadrage sur le groupe (centre de l'image). Le calque de l'arc (bureau) reçoit une transformation calculée par main.js pour montrer exactement le même cadrage que l'arche au départ. */
#hero .hero-arche .arche-img img, #hero .hero-img-ext img { object-position: 54% center; }
#hero .hero-img-ext img { transform-origin: 0 0; will-change: transform; }

/* ── « Autour de chez vous » : accordéon sous les 4 lignes du quartier (surface charcoal, puces et filets déjà présents). ──
   Fermé par défaut (si JS actif : classe html.js) ; le contenu reste dans le DOM ; plusieurs panneaux peuvent être ouverts ; 300 ms ; imprimé : tout déplié. */
.autour { margin-top: var(--s-12); display: flex; flex-direction: column; gap: var(--s-3); }
@media (min-width: 768px) { .autour { margin-top: var(--s-16); } }
.autour-sous { margin: 0 0 var(--s-4); color: var(--c-fond); }
.autour-cats { display: grid; }
.autour-cat { border-top: var(--filet-w) solid var(--c-filet); }
.autour-cat:last-child { border-bottom: var(--filet-w) solid var(--c-filet); }
.autour-h { margin: 0; font: inherit; }
.autour-btn { display: flex; align-items: center; gap: var(--s-4); width: 100%; min-height: var(--cible-mobile); padding: var(--s-3) 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
@media (min-width: 768px) { .autour-btn { min-height: var(--cible-desktop); } }
.autour-btn .quartier-puce { align-self: center; flex: none; }
.autour-btn > span:nth-child(2) { flex: 1; }
.autour-cat:nth-child(1) .quartier-puce { background: var(--c-dore); }
.autour-cat:nth-child(2) .quartier-puce { background: var(--c-ambre-doux); }
.autour-cat:nth-child(3) .quartier-puce { background: var(--c-sable); }
.autour-cat:nth-child(4) .quartier-puce { background: var(--c-fond); }
.autour-cat:nth-child(5) .quartier-puce { background: var(--c-dore); }
.autour-plus { position: relative; width: 18px; height: 18px; flex: none; }
.autour-plus::before, .autour-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--c-fond); transition: transform var(--m-dialogue) var(--ease); }
.autour-plus::after { transform: rotate(90deg); }
.autour-btn[aria-expanded="true"] .autour-plus::after { transform: rotate(0deg); }
.autour-panel { display: grid; grid-template-rows: 1fr; }
.autour-liste { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0 0 var(--s-4) calc(10px + var(--s-4)); }
.js .autour-panel { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows var(--m-dialogue) var(--ease), opacity var(--m-dialogue) var(--ease), visibility 0s linear var(--m-dialogue); }
.js .autour-panel[data-ouvert] { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows var(--m-dialogue) var(--ease), opacity var(--m-dialogue) var(--ease), visibility 0s; }
.autour-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; border-top: var(--filet-w) solid var(--c-filet); }
.autour-item:first-child { border-top: 0; }
.autour-lib { display: flex; flex-wrap: wrap; column-gap: var(--s-3); row-gap: 0; max-width: 75ch; }
.autour-nom { color: var(--c-fond); }
.autour-type { color: var(--c-fond); opacity: 0.78; }
.autour-dist { color: var(--c-fond); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.02em; }
@media print { .autour-panel, .js .autour-panel { grid-template-rows: 1fr !important; opacity: 1 !important; visibility: visible !important; } .autour-plus { display: none; } }

/* ── PLANS V2 (famille) : un grand plan à la fois, bascule A · Coin / B · Centre à toutes les largeurs, fondu croisé (450 ms), détails à côté. Scopé à .plans-v2. ── */
.plans-v2 .plans-onglets { max-width: 28rem; }
@media (min-width: 768px) { .plans-v2 .plans-onglet { min-height: var(--cible-desktop); } }
.plans-v2 .plans-pile { grid-template-columns: minmax(0, 1fr); }
.plans-v2 .plan-carte-corps { cursor: default; border-radius: var(--r-card); }
.plans-v2 .plan-media { border-bottom: var(--filet-w) solid var(--c-filet); }
.plans-v2 .plan-media img { object-fit: contain; }
.plans-v2 .plan-nom { font-size: var(--t-d2); line-height: 1.1; }
.plans-v2 .plan-legende { margin: 0; color: var(--c-texte-2); }
@media (min-width: 768px) {
  .plans-v2 .plan-carte-corps { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .plans-v2 .plan-media { border-bottom: 0; border-right: var(--filet-w) solid var(--c-filet); align-self: stretch; display: flex; align-items: center; }
  .plans-v2 .plan-details { padding: var(--s-12) var(--s-8); justify-content: center; }
}

/* ── L'ESSENTIEL V2 (famille) : groupes en deux colonnes, valeurs à 19 px, libellés en gris chaud lisible, panneau de sortie avec téléphone. Scopé à .essentiel-v2. ── */
.essentiel-v2 .essentiel-ligne dt { color: var(--c-texte-2); font-weight: 500; }
.essentiel-v2 .essentiel-ligne dd { font-size: var(--t-body-l); line-height: 1.5; }
.essentiel-v2 .essentiel-ligne { padding-block: var(--s-4); }
@media (min-width: 640px) { .essentiel-v2 .essentiel-ligne { grid-template-columns: 8.5rem 1fr; } }
.essentiel-v2 .inclus-pastille { padding: var(--s-3) var(--s-5, 20px); font-size: var(--t-body-l); }
.essentiel-sortie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-8); padding: var(--s-8); border-radius: var(--r-card); background: var(--c-sable); color: var(--c-texte); }
.essentiel-sortie p { margin: 0; }

/* ── FORMULAIRE V2 : prénom et téléphone côte à côte (≥ 1024 px), champs de 56 px, anneau de focus doux, libellés plus affirmés. Scopé à .form-v2. ── */
.form-v2 label[for], .form-v2 legend { font-size: var(--t-body); font-weight: 600; letter-spacing: 0.01em; }
.form-v2 .champ { min-height: 56px; font-size: var(--t-body-l); border-radius: var(--r-cta); background: var(--c-fond); transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease); }
.form-v2 .champ:hover { border-color: var(--c-texte); }
.form-v2 .champ:focus { border-color: var(--c-cta); box-shadow: 0 0 0 3px rgba(181, 101, 45, 0.2); outline: none; }
@media (min-width: 1024px) {
  .carte-form .form-v2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); row-gap: var(--s-6); }
  .carte-form .form-v2 > * { grid-column: 1 / -1; }
  .carte-form .form-v2 > div:nth-child(1), .carte-form .form-v2 > div:nth-child(2) { grid-column: auto; }
}

/* Journée, 16 h : photo en paysage recadrée pour le cadre vertical du bureau — on garde la femme et l'enfant à l'îlot. */
.visite-vue:nth-child(2) img { object-position: 60% 50%; }

/* Journée, 7 h 05 : photo en paysage recadrée pour le cadre vertical du bureau — douche vitrée et bain. */
.visite-vue:nth-child(1) img { object-position: 46% 50%; }

/* Journée, 18 h 30 : photo en paysage recadrée pour le cadre vertical du bureau — la porte du balcon et la famille. */
.visite-vue:nth-child(3) img { object-position: 47% 50%; }
/* Journée, 20 h : photo de la lecture du soir, recadrée sur la femme et l'enfant. */
.visite-vue:nth-child(4) img { object-position: 60% 50%; }

/* ── Scores de mobilité (Walk Score® / Bike Score®) : anneau qui se remplit (600 ms, une fois), chiffre en serif. Sans JS ou mouvement réduit : état final. ── */
.scores { margin-top: var(--s-12); display: flex; flex-direction: column; gap: var(--s-6); }
@media (min-width: 768px) { .scores { margin-top: var(--s-16); } }
.scores-grille { display: grid; gap: var(--s-8); grid-template-columns: minmax(0, 1fr); border-top: var(--filet-w) solid var(--c-filet); padding-top: var(--s-8); }
@media (min-width: 640px) { .scores-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-16); } }
.score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-6); }
.score-anneau { position: relative; width: 112px; height: 112px; flex: none; }
@media (min-width: 768px) { .score-anneau { width: 128px; height: 128px; } }
.score-anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.score-anneau circle { fill: none; stroke-width: 5; }
.score-piste { stroke: var(--c-filet); }
.score-arc { stroke: var(--c-dore); stroke-linecap: round; stroke-dasharray: var(--v, 0) 100; }
.score-val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-titre); font-size: 2.6rem; line-height: 1; color: var(--c-fond); }
.score-txt { display: flex; flex-direction: column; gap: var(--s-1); }
.score-txt p { margin: 0; }
.score-lib { color: var(--c-fond); }
.score-source { margin: 0; color: var(--c-fond); opacity: 0.78; }
.js .scores-anim .score-arc { stroke-dasharray: 0 100; }
.js .scores-anim.est-vu .score-arc { stroke-dasharray: var(--v, 0) 100; transition: stroke-dasharray var(--dur-moment) var(--ease); }

/* ── Sceau « Une des plus belles villes du Québec » (texte seulement). Desktop : en débord sur le coin bas-gauche de l'arche ; mobile : ligne sous la microcopy. Aucune animation, aucun lien. ── */
/* Position : point à 45° sur le demi-cercle supérieur de l'arche (rayon = largeur / 2, vérifié : border-radius 999px est ramené à largeur/2).
   x = 50 % + 35,36 % = 85,4 % de la largeur ; y = 50 % − 35,36 % = 14,6 % de la largeur. L'arche fait 4/5 : 14,64 % de la largeur = 11,71 % de la hauteur.
   Équivalent en pourcentages des unités de conteneur (cqi), sans containment qui pourrait écraser la largeur automatique de l'arche. */
.sceau { position: absolute; left: 85.36%; top: 11.71%; margin: 0; width: clamp(144px, 34%, 168px); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 3px rgba(60, 38, 15, 0.18)); pointer-events: none; z-index: 1; }
.sceau svg { display: block; width: 100%; height: 100%; }
.sceau__arc { font-family: var(--f-corps); font-size: 13px; font-weight: 600; letter-spacing: 2.2px; fill: var(--caramel-encre); }
.sceau__trait { fill: none; stroke: var(--caramel-encre); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sceau-ligne { display: none; margin-top: 28px; }
.sceau-ligne svg { display: none; }
.sceau-ligne p { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.45; }
/* Mobile (< 768 px) : le sceau reste sur la courbe de l'arche (1 h 30), plus petit ; la phrase d'ancrage s'affiche en pleine largeur sous la microcopy (sans mini-sceau). */
@media (max-width: 767px) { .sceau { width: clamp(96px, 50%, 112px); } .sceau-ligne { display: block; } }
/* Eyebrow : « AU PIED DU MONT SAINT-HILAIRE » tient sur une ligne à 375 px (interlettrage resserré, taille inchangée). */
@media (max-width: 480px) { #hero .hero-texte .entree > p:first-child { letter-spacing: 0.06em; } }