/* Le Carré Douville — page « nouveau » (lancement / pré-location).
   Structure de la page gestion.uneo.ca/nouveau-site-web (hero + roller + CTA, bandeau de faits,
   section formulaire), habillée avec la marque Douville : valeurs dans tokens.css uniquement. */

@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; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-fond);
  color:var(--c-texte);
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.55;
}
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3{ font-family:var(--font-display); margin:0; }
p{ margin:0; }
a{ color:inherit; }
.skip{ position:absolute; left:-999px; top:0; background:var(--c-fond-2); color:var(--c-texte); padding:var(--s-3) var(--s-4); z-index:var(--z-progres); }
.skip:focus{ left:var(--s-4); top:var(--s-4); }

/* ===== En-tête flottant sur le hero ===== */
.entete{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-header);
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-4) var(--page-x);
  transition:background var(--dur-section) var(--ease), padding var(--dur-section) var(--ease);
}
.entete-logo{ display:block; position:relative; }
.entete-logo img{ height:56px; width:auto; transition:height var(--dur-section) var(--ease), opacity var(--dur-micro) var(--ease); }
.entete-logo .logo-fonce{ position:absolute; inset:0; opacity:0; }
.entete-nav{ display:flex; align-items:center; gap:var(--s-2); }
.entete-lang{
  display:inline-flex; align-items:center; min-height:var(--cible-mobile); padding:0 var(--s-3);
  color:var(--c-fond); text-decoration:none;
  font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase;
}
.entete-lang:hover{ text-decoration:underline; text-underline-offset:.3em; }
/* Bouton hamburger rond (mobile) */
.nav-toggle{
  display:none; flex:none; align-items:center; justify-content:center;
  width:var(--cible-desktop); height:var(--cible-desktop);
  border-radius:50%; cursor:pointer;
  border:var(--filet-w) solid var(--c-fond); background:transparent;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:16px; height:1.5px; background:var(--c-fond);
  position:relative; transition:transform var(--dur-section) var(--ease), top var(--dur-section) var(--ease);
}
.nav-toggle span::before{ position:absolute; top:-5px; }
.nav-toggle span::after{ position:absolute; top:5px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
.entete.scrolled .nav-toggle, .entete.menu-ouvert .nav-toggle{ border-color:var(--c-texte); }
.entete.scrolled .nav-toggle span, .entete.scrolled .nav-toggle span::before, .entete.scrolled .nav-toggle span::after,
.entete.menu-ouvert .nav-toggle span::before, .entete.menu-ouvert .nav-toggle span::after{ background:var(--c-texte); }
.entete.menu-ouvert{ background:var(--c-fond); }
.entete.menu-ouvert .logo-clair{ opacity:0; }
.entete.menu-ouvert .logo-fonce{ opacity:1; }

/* Menu plein écran (mobile) */
.menu-mobile{ display:none; }
body.nav-locked{ overflow:hidden; }
@media (max-width:900px){
  .entete-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .menu-mobile{
    display:block; position:fixed; inset:0; z-index:calc(var(--z-header) - 1);
    padding-top:96px; background:var(--c-fond); overflow-y:auto; overscroll-behavior:contain;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
    transition:opacity var(--dur-section) var(--ease), transform var(--dur-section) var(--ease), visibility var(--dur-section);
  }
  .menu-mobile.ouvert{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .menu-mobile ul{ list-style:none; margin:0; padding:var(--s-3) var(--page-x) var(--s-8); display:flex; flex-direction:column; gap:var(--s-2); }
  .menu-mobile li > a:not(.btn):not(.menu-tel){
    display:flex; align-items:center; min-height:var(--cible-mobile);
    font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem, 6vw, 2rem); line-height:1.2;
    text-decoration:none; border-bottom:var(--filet-w) solid var(--c-filet);
  }
  .menu-extras{ display:flex; flex-direction:column; gap:var(--s-4); margin-top:var(--s-6); }
  .menu-tel{
    display:inline-flex; align-items:center; justify-content:center; min-height:var(--cible-mobile);
    border:var(--filet-w) solid var(--c-texte); border-radius:var(--r-cta);
    text-decoration:none; font-weight:700; font-variant-numeric:tabular-nums;
  }
  .menu-extras .btn{ width:100%; }
}

.entete.scrolled{ background:var(--c-fond); padding-block:var(--s-2); box-shadow:var(--shadow-card); }
.entete.scrolled .entete-logo img{ height:44px; }
.entete.scrolled .logo-clair{ opacity:0; }
.entete.scrolled .logo-fonce{ opacity:1; }
.entete.scrolled .entete-tel{ border-color:var(--c-texte); color:var(--c-texte); }
.entete.scrolled .entete-tel:hover{ background:var(--c-texte); color:var(--c-fond); }
.entete.scrolled .entete-lang{ color:var(--c-texte); }
.entete-tel{
  display:inline-flex; align-items:center; min-height:var(--cible-mobile);
  padding:0 var(--s-6);
  border:var(--filet-w) solid var(--c-fond);
  border-radius:var(--r-cta);
  color:var(--c-fond); text-decoration:none;
  font-size:var(--t-label); letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
  transition:background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.entete-tel:hover{ background:var(--c-fond); color:var(--c-texte); }

/* ===== Hero ===== */
.hero{ position:relative; background:var(--c-dore); }
.hero-scene{
  --p:0; --cadre-x:var(--s-4);
  --c-texte-hero2:color-mix(in srgb, var(--c-fond) 78%, var(--c-ambre-doux));
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--c-dore);
  color:var(--c-fond);
  isolation:isolate;
  overflow:hidden;
}
@media (min-width:768px){ .hero-scene{ --cadre-x:var(--s-6); } }

/* Séquence cinéma (mouvement autorisé) : la scène reste collée pendant que la caméra avance
   et que l'image fond vers le charbon de la section suivante. --p (0 → 1) est posé par le script. */
.cine .hero{ height:230vh; height:230svh; }
.cine .hero-scene{ position:sticky; top:0; height:100vh; height:100svh; min-height:0; }

/* Temps 1 — la photo « s'ouvre » : le carré de la marque se déploie, léger recul de la prise de vue */
.hero-photo{
  position:absolute; inset:0; z-index:-3; overflow:hidden;
  animation:ouvre 1100ms var(--ease) both, recule 1800ms var(--ease) both, mise-au-point 1600ms var(--ease) backwards;
}
/* La « caméra » : un seul conteneur reçoit le recul au défilement et le décalage du pointeur */
.hero-cam{
  position:absolute; left:0; top:-7%; width:100%; height:114%;
  transform:translate3d(0,var(--py,0px),0) scale(var(--zoom,1));
  translate:calc(var(--mx,0) * -10px) calc(var(--my,0) * -6px);
  transition:translate 900ms var(--ease);
  will-change:transform;
  filter:contrast(1.12) saturate(1.02) sepia(.07) brightness(1);
}
/* Quatre plans, un film : fondu enchaîné toutes les 7 s, lent mouvement de caméra sur chaque plan */
.plan{ position:absolute; inset:0; opacity:0; animation:plan 28s linear infinite; animation-delay:calc(var(--i, 0) * 7s - 1.4s); }
.plan img{
  width:100%; height:100%; object-fit:cover;
  animation:camera 28s linear infinite; animation-delay:calc(var(--i, 0) * 7s - 1.4s);
}
@keyframes plan{ 0%{ opacity:0; } 5%, 25%{ opacity:1; } 30%, 100%{ opacity:0; } }
@keyframes camera{ 0%{ scale:1; translate:0 0; } 30%, 100%{ scale:1.09; translate:var(--kx, 0) var(--ky, 0); } }
@keyframes mise-au-point{ from{ filter:blur(14px); } }
@keyframes ouvre{ from{ clip-path:inset(7% 5% 7% 5%); } to{ clip-path:inset(0); } }
@keyframes recule{ from{ scale:1.08; } to{ scale:1; } }
.hero-scene::after{ content:""; position:absolute; inset:0; z-index:-1; background:color-mix(in srgb, var(--c-dore) 6%, transparent); }
.hero-scene::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  box-shadow:inset 0 0 16vw 3vw color-mix(in srgb, var(--c-dore) 75%, transparent);
}
/* Temps 3 — fondu vers le charbon : la scène se referme sur la section d'inscription */
/* Zone sombre douce derrière le texte : trois ellipses imbriquées, chacune à bords très flous (ombres portées),
   pour qu'aucun contour ne se lise. Mesuré (4 plans, bureau et mobile) : titre ≥ 4,8:1 et petit texte ≥ 5,3:1 aux
   endroits les plus clairs ; photo en moyenne 35 % plus lumineuse qu'avec l'ancien voile uniforme de 55 %. */
.hero-fond, .hero-fond::before, .hero-fond::after{
  position:absolute; left:50%; top:50%; translate:-50% -50%; border-radius:50%; pointer-events:none;
}
.hero-fond{
  z-index:0; top:46%;
  width:min(118vw, 1500px); height:88%;
  background:color-mix(in srgb, var(--c-dore) 15%, transparent);
  filter:blur(7vw);
  animation:allume 1200ms var(--ease) 200ms backwards;
}
.hero-fond::before, .hero-fond::after{ content:""; }
.hero-fond::before{
  width:78%; height:74%;
  background:color-mix(in srgb, var(--c-dore) 23%, transparent);
}
.hero-fond::after{
  width:58%; height:52%;
  background:color-mix(in srgb, var(--c-dore) 31%, transparent);
}
.hero-noir{ position:absolute; inset:0; z-index:-1; background:var(--c-dore); opacity:calc(var(--p) * .96); pointer-events:none; }

/* Lueur de fenêtre au crépuscule (seul dégradé permis par la marque), qui respire doucement */
.hero-lueur, .inscription::before{
  content:""; position:absolute; left:50%; translate:-50% 0;
  width:min(140vw, 1100px); aspect-ratio:1;
  background:radial-gradient(closest-side, var(--c-lueur), transparent);
  pointer-events:none;
}
.hero-lueur{ bottom:-38%; z-index:0; animation:allume 1400ms var(--ease) 250ms both, respire 14s ease-in-out 1.7s infinite alternate; }
@keyframes allume{ from{ opacity:0; } to{ opacity:1; } }
@keyframes respire{ from{ scale:1; } to{ scale:1.14; } }

/* Cadre à double filet (signature de la marque) : s'écarte et s'efface quand la caméra avance */
.hero-cadre{
  position:absolute; z-index:1; pointer-events:none;
  inset:calc(var(--header-compact) + var(--s-6)) var(--cadre-x) var(--cadre-x);
  border:var(--filet-w) solid var(--c-filet-clair);
  outline:var(--filet-w) solid var(--c-filet-clair); outline-offset:calc(var(--filet-gap) * -1 - 1px);
  opacity:max(0, calc(1 - var(--p) * 1.8));
  scale:calc(1 + var(--p) * .05);
  translate:calc(var(--mx, 0) * 5px) calc(var(--my, 0) * 3px);
  transition:translate 900ms var(--ease);
  animation:allume 900ms var(--ease) 700ms backwards;
}

.hero-contenu{
  position:relative; z-index:1;
  width:100%; max-width:var(--max); margin:0 auto;
  padding:calc(var(--header-haut) + var(--s-8)) calc(var(--cadre-x) + var(--s-4)) var(--s-32);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  min-width:0;
  opacity:max(0, calc(1 - var(--p) * 2.4));
  translate:0 calc(var(--p) * -60px);
}
@media (min-width:768px){ .hero-contenu{ padding-inline:calc(var(--cadre-x) + var(--s-12)); } }
.fini .hero-contenu, .fini .faits{ visibility:hidden; }
/* Temps 2 — le texte entre : eyebrow, titre mot à mot (masque), roller, bouton */
.hero-contenu > *{ animation:monte 700ms var(--ease) both; }
.hero-contenu > :nth-child(1){ animation-delay:350ms; }
.hero-contenu > h1{ animation:none; }
.hero-contenu > :nth-child(3){ animation-delay:850ms; }
.hero-contenu > :nth-child(4){ animation-delay:980ms; }
@keyframes monte{ from{ opacity:0; translate:0 14px; } to{ opacity:1; translate:0 0; } }
.mot{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .05em .16em; margin:0 -.05em -.16em; }
.mot > span{ display:inline-block; animation:mot 950ms var(--ease) backwards; animation-delay:calc(450ms + var(--i) * 75ms); }
@keyframes mot{ from{ translate:0 112%; } }

.eyebrow{
  font-size:var(--t-label); font-weight:500;
  letter-spacing:var(--ls-spaced); text-transform:uppercase;
  margin-bottom:var(--s-4); text-wrap:balance;
}
.hero h1{
  font-weight:600; font-size:clamp(2.5rem, 7vw, 5.25rem); line-height:1.05; letter-spacing:-.015em;
  text-wrap:balance; max-width:20ch;
}
.hero-accent{ font-style:italic; font-weight:500; color:var(--c-texte-hero2); }

/* Roller : une ligne à la fois, CSS pur (textes tirés de projet.json) */
.roller{ margin-top:var(--s-6); max-width:100%; color:var(--c-texte-hero2); }
.roller-fenetre{
  --lh:1.3em;
  font-family:var(--font-display);
  font-size:clamp(.9375rem, 4.1vw, 1.875rem);
  display:inline-block; max-width:100%;
  height:var(--lh); line-height:var(--lh);
  overflow:hidden; vertical-align:top;
}
.roller-piste{ display:block; animation:roller 17.5s var(--ease) infinite; }
.roller-ligne{ display:block; white-space:nowrap; height:var(--lh); }
@keyframes roller{
  0%, 17%   { transform:translateY(0); }
  20%, 37%  { transform:translateY(calc(var(--lh) * -1)); }
  40%, 57%  { transform:translateY(calc(var(--lh) * -2)); }
  60%, 77%  { transform:translateY(calc(var(--lh) * -3)); }
  80%, 97%  { transform:translateY(calc(var(--lh) * -4)); }
  100%      { transform:translateY(calc(var(--lh) * -5)); }
}

.actions{ margin-top:var(--s-12); }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--cible-mobile); padding:0 var(--s-6);
  border:0; border-radius:var(--r-cta);
  font-family:var(--font-body); font-size:1rem; font-weight:700;
  text-align:center; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; cursor:pointer;
  transition:background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.btn:active{ transform:scale(.985); }
.btn-clair{ background:var(--c-fond); color:var(--c-texte); }
.btn-clair:hover{ background:var(--c-fond-2); }
.btn-cta{ background:var(--c-cta); color:var(--c-sur-cta); }
.btn-cta:hover{ background:var(--c-cta-hover); }
@media (min-width:768px){ .btn{ min-height:var(--cible-desktop); padding:0 var(--s-8); font-size:1.1875rem; letter-spacing:.05em; } }

/* Bandeau de faits, posé dans le cadre */
.faits{
  position:absolute; z-index:1;
  left:var(--cadre-x); right:var(--cadre-x); bottom:var(--cadre-x);
  background:color-mix(in srgb, var(--c-dore) 44%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
  border-top:var(--filet-w) solid var(--c-filet-clair);
  text-shadow:0 1px 14px color-mix(in srgb, var(--c-dore) 60%, transparent);
  opacity:max(0, calc(1 - var(--p) * 3));
  animation:monte 700ms var(--ease) 1000ms backwards;
}
.faits-liste{
  max-width:var(--max); margin:0 auto; padding:var(--s-4) var(--s-4);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-2);
  list-style:none;
}
.faits-liste li{ display:flex; flex-direction:column; gap:2px; text-align:center; align-items:center; }
.faits-liste strong{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1rem, 3vw, 2rem); line-height:1.1; text-wrap:balance;
  font-variant-numeric:tabular-nums;
}
.faits-liste span{ font-size:var(--t-caption); color:var(--c-texte-hero2); }
@media (min-width:768px){
  .faits-liste{ padding:var(--s-6) var(--s-8); }
  .faits-liste li:first-child{ text-align:left; align-items:flex-start; }
  .faits-liste li:last-child{ text-align:right; align-items:flex-end; }
  .faits-liste span{ font-size:var(--t-label); }
}

/* ===== Section formulaire : surface sombre, lueur, carte claire ===== */
.inscription{
  position:relative; isolation:isolate; overflow:hidden;
  padding:var(--s-24) var(--page-x) var(--s-16);
  background:var(--c-dore); color:var(--c-fond);
}
.inscription::before{ top:-45%; z-index:-1; }
.inscription-grille{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:var(--s-12); grid-template-columns:minmax(0, 1fr);
  justify-items:center;
}
.inscription-tete{ max-width:var(--mesure); text-align:center; }
.carte{ width:100%; }
@media (min-width:1024px){
  .inscription-grille{
    grid-template-columns:minmax(0, 1fr) minmax(0, 34rem); column-gap:var(--s-24); row-gap:var(--s-6);
    grid-template-areas:"tete carte" "alt carte"; align-items:start; justify-items:stretch;
  }
  .inscription-tete{ grid-area:tete; text-align:left; align-self:end; }
  .carte{ grid-area:carte; }
  .alt{ grid-area:alt; text-align:left; align-self:start; }
}
.inscription h2{ font-weight:600; font-size:var(--t-d2); line-height:1.1; text-wrap:balance; }
.inscription h2 em{ font-style:italic; font-weight:500; color:var(--c-ambre-doux); }
.lede{ margin-top:var(--s-4); font-size:var(--t-body-l); color:var(--c-ambre-doux); text-wrap:pretty; }

.carte{
  max-width:34rem; margin:0 auto;
  background:var(--c-fond-2); color:var(--c-texte);
  padding:var(--s-8);
  border-radius:var(--r-card);
  outline:var(--filet-w) solid var(--c-texte);
  outline-offset:calc(var(--filet-gap) * -1);
  position:relative;
  transition:outline-color 400ms var(--ease);
}
.carte:focus-within{ outline-color:var(--c-cta); }
@media (min-width:768px){ .carte{ padding:var(--s-8) var(--s-12); } }
.carte h3{ font-weight:500; font-size:var(--t-d3); line-height:1.15; }

.champ{ margin-top:var(--s-6); display:flex; flex-direction:column; gap:var(--s-2); border:0; padding:0; min-width:0; }
.champ label, .champ legend{ font-size:var(--t-body); font-weight:700; line-height:1.3; padding:0; }
.facultatif{ font-weight:400; color:var(--c-texte-2); }
.champ input[type=text], .champ input[type=email], .champ input[type=tel]{
  width:100%; min-height:var(--cible-mobile); padding:0 var(--s-4);
  font:inherit; color:var(--c-texte);
  background:var(--c-fond-2);
  border:var(--champ-bordure) solid var(--c-texte-2);
  border-radius:var(--r-input);
  transition:border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.champ input:hover{ border-color:var(--c-texte); }
.champ input:focus-visible{ outline:2px solid var(--c-cta); outline-offset:2px; border-color:var(--c-cta); }
.champ input[aria-invalid="true"]{ border-color:var(--c-ambre); box-shadow:0 0 0 1px var(--c-ambre); }
.erreur{ margin:0; font-size:var(--t-label); color:var(--c-ambre); }
.puces{ position:relative; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-2); }
.puces input{ position:absolute; opacity:0; width:1px; height:1px; }
.puces label{
  display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.2;
  min-height:var(--cible-mobile); padding:var(--s-2) var(--s-3);
  font-size:var(--t-body); font-weight:400; letter-spacing:0; text-transform:none;
  border:var(--champ-bordure) solid var(--c-texte-2); border-radius:var(--r-pill);
  background:var(--c-fond-2); cursor:pointer;
  transition:background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.puces label:hover{ border-color:var(--c-texte); }
.puces input:checked + label{ background:var(--c-ambre); border-color:var(--c-ambre); color:var(--c-sur-cta); }
.puces input:focus-visible + label{ outline:2px solid var(--c-cta); outline-offset:2px; }
.carte .btn{ width:100%; margin-top:var(--s-8); }
.carte .btn[disabled]{ opacity:.6; cursor:progress; }
.fin{ margin-top:var(--s-4); font-size:var(--t-label); color:var(--c-texte-2); text-align:center; }
.consentement{ margin-top:var(--s-4); font-size:.8125rem; line-height:1.5; color:var(--c-texte-2); }
.etat{ margin-top:var(--s-4); font-size:var(--t-label); }
.etat:empty{ display:none; }
.succes{ text-align:center; padding:var(--s-8) 0; }
.succes[hidden]{ display:none; }
.succes h3{ font-size:var(--t-d3); }
.succes p{ margin-top:var(--s-3); color:var(--c-texte-2); }

/* Apparitions : le contenu reste visible par défaut, l'état masqué n'existe que si l'observateur répond */
.revele{ transition:opacity var(--m-reveal) var(--ease), translate var(--m-reveal) var(--ease); }
.js .revele:not(.vu){ opacity:0; translate:0 16px; }

/* ===== Pied de page ===== */
.pied{
  background:var(--c-dore); color:var(--c-fond);
  padding:var(--s-16) var(--page-x) var(--s-12);
  border-top:var(--filet-w) solid var(--c-filet-clair);
  text-align:center;
}
.pied-haut, .pied-bas{ max-width:var(--max); margin:0 auto; }
.pied-haut{ display:grid; gap:var(--s-12); }
.pied-marque{ display:flex; flex-direction:column; align-items:center; gap:var(--s-6); }
.pied-logo{ width:140px; height:auto; }
.pied-appel{ width:100%; max-width:24rem; text-transform:none; letter-spacing:0; }
.pied-appel span{ white-space:nowrap; }
.pied-infos{ display:grid; gap:var(--s-8); align-items:start; font-size:var(--t-body-l); }
.pied-bloc{ display:flex; flex-direction:column; align-items:center; gap:var(--s-3); }
.pied h2, .pied h3{ font-family:var(--font-display); font-weight:600; font-size:var(--t-body-l); line-height:1.2; color:var(--c-fond); }
.pied address{ font-style:normal; }
.pied-note{ font-size:var(--t-label); color:var(--c-ambre-doux); }
.pied dl{ display:flex; flex-direction:column; gap:var(--s-3); }
.pied dl > div{ display:flex; flex-direction:column; }
.pied dd{ margin:0; font-weight:700; }
.pied-lien{ display:inline-flex; align-items:center; min-height:var(--cible-mobile); color:inherit; text-decoration:underline; text-underline-offset:.2em; }
.pied-courriel{ justify-self:center; }
.pied-bas{
  margin-top:var(--s-16); padding-top:var(--s-8);
  border-top:var(--filet-w) solid var(--c-filet-clair);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-8);
}
.pied-legal{ display:flex; flex-direction:column; align-items:center; gap:var(--s-3); }
.pied-legal nav{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:var(--s-6); font-size:var(--t-body); }
.pied-mention{ max-width:40rem; font-size:var(--t-label); color:var(--c-ambre-doux); }
.signature{ display:flex; flex-direction:column; align-items:center; gap:var(--s-2); font-size:var(--t-body); }
.signature a{ display:inline-flex; padding:var(--s-1); }
.signature img{ height:2.5rem; width:auto; }

@media (min-width:1024px){
  .pied{ text-align:left; }
  .pied-haut{ grid-template-columns:minmax(0, .8fr) minmax(0, 1.6fr); column-gap:var(--s-24); }
  .pied-infos{ grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); column-gap:var(--s-12); row-gap:var(--s-8); }
  .pied-bloc{ align-items:flex-start; }
  .pied-courriel{ grid-column:1 / -1; justify-self:start; }
  .pied-lien{ min-height:var(--cible-desktop); }
  .pied-bas{ flex-direction:row; align-items:flex-start; justify-content:space-between; }
  .pied-legal{ align-items:flex-start; }
  .pied-legal nav{ justify-content:flex-start; }
  .signature{ align-items:flex-end; }
}

:focus-visible{ outline:2px solid var(--c-cta); outline-offset:2px; }
.entete:not(.scrolled) :focus-visible, .hero-scene :focus-visible, .inscription-tete :focus-visible, .pied :focus-visible{ outline-color:var(--c-fond); }

@media (prefers-reduced-motion:reduce){
  .hero-photo, .hero-photo img, .hero-lueur, .hero-cadre, .hero-contenu > *, .mot > span, .faits{ animation:none; }
  .js .revele:not(.vu){ opacity:1; translate:none; }
  .hero-photo img{ transform:none; }
  .roller-fenetre{ height:auto; overflow:visible; }
  .roller-piste{ animation:none; }
  .roller-ligne{ white-space:normal; height:auto; }
  .roller-ligne[aria-hidden="true"]{ display:none; }
}

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Formulaire : passe conversion ===== */
.puces input:checked + label::before{ content:"✓"; margin-right:.5em; font-weight:700; }
.piege{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.alt{ text-align:center; color:var(--c-ambre-doux); font-size:var(--t-body-l); }
.alt-tel{
  display:inline-flex; align-items:center; min-height:var(--cible-mobile); padding:0 var(--s-1);
  color:var(--c-fond); font-weight:700; font-variant-numeric:tabular-nums;
  text-underline-offset:.3em; text-decoration-thickness:1px;
}
.alt-tel:hover{ text-decoration-thickness:2px; }
.carte .btn[aria-busy="true"]{ cursor:progress; }
.succes .trace{ display:block; margin:0 auto var(--s-6); }
.trace path{ fill:none; stroke:var(--c-ambre); stroke-width:2; stroke-linecap:square; stroke-dasharray:1; stroke-dashoffset:1; }
.succes:not([hidden]) .trace-carre{ animation:trace 700ms var(--ease) forwards; }
.succes:not([hidden]) .trace-coche{ animation:trace 450ms var(--ease) 500ms forwards; }
@keyframes trace{ to{ stroke-dashoffset:0; } }
.succes:focus{ outline:none; }
.succes-tel a{ color:var(--c-texte); font-weight:700; }
@media (prefers-reduced-motion:reduce){ .trace path{ stroke-dashoffset:0; animation:none !important; } }

/* ===== Hero : passe cinéma 2 ===== */
.hero-contenu{ text-shadow:0 1px 28px color-mix(in srgb, var(--c-dore) 55%, transparent); }
.hero-contenu .btn{ text-shadow:none; }
.hero-lueur{
  translate:calc(-50% + var(--mx, 0) * 4vw) calc(var(--my, 0) * -2vw);
  transition:translate 1400ms var(--ease);
}

/* Barre de progression des plans : 4 segments posés sur le filet du bandeau */
.reperes{
  position:absolute; left:0; right:0; top:-1px; height:2px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s-1);
}
.reperes span{ position:relative; background:var(--c-filet-clair); }
.reperes span::after{
  content:""; position:absolute; inset:0; background:var(--c-fond);
  transform-origin:left; transform:scaleX(0); opacity:0;
  animation:repere 28s linear infinite; animation-delay:calc(var(--i, 0) * 7s - 1.4s);
}
@keyframes repere{ 0%, 5%{ transform:scaleX(0); opacity:1; } 25%{ transform:scaleX(1); opacity:1; } 30%{ transform:scaleX(1); opacity:0; } 100%{ transform:scaleX(1); opacity:0; } }

/* Indice de défilement (séquence cinéma seulement) */
.hero-defile{
  display:none; position:absolute; left:50%; bottom:100%; translate:-50% 0; margin-bottom:var(--s-8);
  flex-direction:column; align-items:center; gap:var(--s-2);
  font-size:var(--t-label); font-weight:500; letter-spacing:var(--ls-spaced); text-transform:uppercase;
  color:var(--c-fond); text-shadow:0 1px 14px color-mix(in srgb, var(--c-dore) 80%, transparent);
}
.cine .hero-defile{ display:flex; }
.hero-defile i{ display:block; width:1px; height:40px; background:var(--c-fond); transform-origin:top; animation:defile 2.4s var(--ease) infinite; }
@keyframes defile{ 0%{ transform:scaleY(0); opacity:1; } 60%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }
@media (max-height:760px), (max-width:767px){ .hero-defile{ display:none !important; } }

@media (prefers-reduced-motion:reduce){
  .plan{ animation:none; opacity:1; }
  .plan:not(:first-child){ display:none; }
  .plan img, .reperes span::after, .hero-defile i{ animation:none; }
  .reperes, .hero-defile{ display:none !important; }
  .hero-cam, .hero-lueur, .hero-cadre{ transition:none; }
  .hero-cadre{ translate:none; }
  .hero-fond{ animation:none; }
}

/* ===== Politique de confidentialité (page légale) ===== */
.legal-page{ padding:calc(var(--header-compact) + var(--s-16)) var(--page-x) var(--s-24); }
.legal{ max-width:45rem; margin:0 auto; }
.legal-etiquette{ font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; color:var(--c-ambre); }
.legal h1{ margin-top:var(--s-3); font-size:var(--t-d2); line-height:1.1; font-weight:600; }
.legal h2{ margin-top:var(--s-12); font-size:var(--t-d3); line-height:1.2; font-weight:600; }
.legal p, .legal li{ color:var(--c-texte-2); line-height:1.7; }
.legal p{ margin-top:var(--s-3); }
.legal ul{ margin:var(--s-3) 0 0; padding-left:1.2em; }
.legal li{ margin-bottom:6px; }
.legal strong{ color:var(--c-texte); font-weight:700; }
.legal a{ color:var(--c-texte); text-decoration:underline; text-underline-offset:.2em; }
.legal-updated{ font-size:var(--t-label); }
.legal-note{ font-style:italic; }

/* ===== Hero : passe premium ===== */
/* Deuxième scène : quand le titre s'efface, une phrase plus large prend le relais (pilotée par --p, sans script) */
.hero-temps2{ display:none; }
.cine .hero-temps2{
  --t:min(clamp(0, calc((var(--p) - .45) * 6), 1), clamp(0, calc((.97 - var(--p)) * 8), 1));
  position:absolute; inset:0; z-index:1; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-6);
  padding:0 calc(var(--cadre-x) + var(--s-6)); text-align:center;
  opacity:var(--t);
  translate:0 calc((1 - var(--t)) * 28px);
  text-shadow:0 1px 28px color-mix(in srgb, var(--c-dore) 55%, transparent);
}
.hero-temps2-titre{
  font-family:var(--font-display); font-weight:500; line-height:1.1; letter-spacing:-.015em;
  font-size:clamp(1.875rem, 5.4vw, 4rem); max-width:18ch; text-wrap:balance;
}
.hero-temps2-date{
  font-size:var(--t-label); letter-spacing:var(--ls-spaced); text-transform:uppercase; font-weight:500; text-wrap:balance;
  color:var(--c-texte-hero2);
}

/* Bouton du hero : à l'approche, un filet crème l'entoure (écho du cadre de la marque) */
.hero .btn-clair{ outline:1px solid transparent; outline-offset:8px; transition:background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease), outline-color var(--dur-micro) var(--ease), outline-offset var(--dur-micro) var(--ease); }
.hero .btn-clair:hover{ outline-color:var(--c-filet-clair); outline-offset:5px; }

/* ===== Formulaire : passe premium ===== */
/* Prénom et téléphone côte à côte : une ligne de moins, même lecture */
.rang{ display:grid; grid-template-columns:minmax(0, 1fr); column-gap:var(--s-4); }
@media (min-width:640px){ .rang{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* Les trois questions facultatives forment un groupe distinct, de moindre poids visuel */
.optionnel{ margin-top:var(--s-8); padding-top:var(--s-6); border-top:var(--filet-w) solid var(--c-filet); }
.optionnel-titre{ font-size:var(--t-body); font-weight:700; line-height:1.3; }
.optionnel .champ{ margin-top:var(--s-4); }
.optionnel .champ label, .optionnel .champ legend{ font-size:var(--t-label); font-weight:600; }
.optionnel .champ + .champ{ margin-top:var(--s-6); }

/* Modèle : 4½ et 5½ côte à côte, « je ne sais pas » pleine largeur ; emménagement : 2 × 2 */
.puces label:last-of-type:nth-of-type(odd){ grid-column:1 / -1; }
@media (min-width:768px){ .puces label{ min-height:var(--cible-desktop); } }
@media (min-width:480px){
  .puces-modele{ grid-template-columns:1fr 1fr 2fr; }
  .puces-modele label:last-of-type:nth-of-type(odd){ grid-column:auto; }
}

/* Retour positif : une coche près du libellé dès que le champ est valide (après la saisie, jamais pendant) */
.champ:has(> input[aria-invalid="false"]) > label::after{
  content:"✓" / ""; margin-left:.5em; font-weight:700; color:var(--c-ambre);
}

/* Progression : la barre du haut de la carte avance à chaque champ obligatoire valide */
.carte::before{
  content:""; position:absolute; left:0; top:0; right:0; height:3px; pointer-events:none;
  background:var(--c-cta); transform-origin:left; transform:scaleX(var(--avance, 0));
  transition:transform 500ms var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .carte, .carte::before{ transition:none; }
}

/* ===== Hero : passe cinéma 3 ===== */
/* A. Mobile : plus d'air. Sur-titre sur une ligne, sous-titre plus grand, bouton sur une ligne, bandeau compact */
.roller-fenetre{ font-size:clamp(1.0625rem, 4.8vw, 1.875rem); }
@media (max-width:479px){
  .eyebrow-av{ display:none; }
  .eyebrow{ font-size:.8125rem; letter-spacing:.1em; }
  .actions{ margin-top:var(--s-8); }
  .hero .btn-clair{ width:100%; padding:0 var(--s-3); font-size:.875rem; letter-spacing:.03em; white-space:nowrap; }
  .faits-liste{ padding:var(--s-3) var(--s-3); }
  .faits-liste span{ font-size:.75rem; }
}

/* E. Second chemin : le téléphone, sous le bouton */
.actions{ display:flex; flex-direction:column; align-items:center; }
.hero-appel{ margin-top:var(--s-4); font-size:var(--t-label); color:var(--c-texte-hero2); }
.hero-appel a{ color:var(--c-fond); font-weight:700; text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px; white-space:nowrap; }
.hero-appel a:hover{ text-decoration-thickness:2px; }
@media (min-width:768px){ .hero-appel{ font-size:var(--t-body); } }

/* D. Légende des plans : numéro et pièce, synchronisés avec le fondu enchaîné (28 s) */
.hero-legende{
  position:absolute; left:0; bottom:100%; margin:0 0 var(--s-4); height:1.4em; min-width:14rem;
  font-size:var(--t-label); font-weight:500; letter-spacing:var(--ls-spaced); text-transform:uppercase;
  color:var(--c-fond); text-shadow:0 1px 14px color-mix(in srgb, var(--c-dore) 80%, transparent);
}
.hero-legende span{ position:absolute; left:0; top:0; white-space:nowrap; opacity:0; animation:plan 28s linear infinite; animation-delay:calc(var(--i, 0) * 7s - 1.4s); }
.hero-legende b{ font-weight:700; color:var(--c-ambre-doux); }
@media (max-width:767px){ .hero-legende{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .hero-legende span{ animation:none; }
  .hero-legende span:not(:first-child){ display:none; }
  .hero-legende span:first-child{ opacity:1; }
}
/* Le contenu remonte un peu pour laisser respirer le téléphone et l'indice « Défiler » */
@media (min-width:768px){ .hero-contenu{ padding-bottom:calc(var(--s-32) + var(--s-16)); } }
@media (max-width:479px){
  .faits-liste{ grid-template-columns:auto auto auto; justify-content:space-between; }
  .faits-liste strong{ font-size:.9375rem; white-space:nowrap; }
}

/* « Défiler » dans le flux, sous le téléphone : il suit le contenu et ne peut plus le chevaucher. La légende des plans reste à gauche du bandeau. */
.hero-defile{ position:static; left:auto; bottom:auto; translate:none; margin:var(--s-6) 0 0; align-items:center; }
.hero-defile i{ height:32px; }
.hero-legende{ left:var(--s-8); }