/* comparativ auto · haut de page de l'accueil (fusion V5 : l'atelier + les devis qui flottent).
   La scène garde les coordonnées de la photo (1536 × 1584 unités, « u »).
   Tout le cadrage est en CSS : sans JavaScript, l'image est fixe et complète.
   accueil.js n'ajoute que le mouvement (transformations), jamais la mise en page. */

.hero {
  position: relative;
  height: max(100svh, 620px);
  overflow: clip;
  background: var(--pierre);
  container-type: size;
  isolation: isolate;
  /* Bureau : plan large, la scène couvre tout le cadre et reste centrée. */
  /* Lot 4 : la scène ne grandit plus avec toute la hauteur (160cqh), mais avec la hauteur moins 180 px de
     texte : en 4/3 (1024 × 768), elle couvre la largeur sans déborder et la feuille orange finit au-dessus
     du titre. À 1440 × 900 et plus large que 1,6, rien ne change. */
  --W: max(100cqw, calc(1.6 * (100cqh - 180px)));
  --u: calc(var(--W) / 1536);
  --sx: calc((100cqw - var(--W)) / 2);
  --sy: calc(var(--u) * -50);
  /* Lot 3 : quand la scène déborde du cadre à gauche (fenêtre moins large que 1,6 × sa hauteur : tablette,
     petit écran), les trois feuilles et leurs ombres glissent ensemble vers la droite, juste assez pour que
     la feuille de gauche reste entière dans le cadre, à --feuilles-marge du bord. La mise en scène ne change pas.
     --gauche-u = bord gauche de #f-onex en unités de scène (--x − --cw / 2). */
  --feuilles-marge: 16px;
  --gauche-u: 39.5;
  --decal: max(0px, calc(var(--feuilles-marge) - var(--sx) - var(--u) * var(--gauche-u)));
}

/* La barre du haut de page : posée sur la scène, sans fond au bureau. */
.barre--hero {
  position: absolute; z-index: 5; left: 0; right: 0; top: 0;
  border-bottom: 0; background: transparent; min-height: 0;
  padding: 24px var(--marge);
}
.barre--hero .barre__zone { color: var(--graphite); }

.hero__cadre { position: absolute; inset: 0; z-index: 0; }
.scene {
  position: absolute;
  left: var(--sx); top: var(--sy);
  width: var(--W); height: calc(var(--u) * 1584);
}
.plan {
  position: absolute; inset: 0;
  transform-origin: 59.57% 36.93%;   /* la bosse (915, 585 u) : point vers lequel la caméra avance */
}
.plan img, .plan picture, .plan > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.plan picture img { position: static; width: 100%; height: 100%; }
.air {
  position: absolute; left: 0; top: calc(var(--u) * 40);
  width: calc(var(--u) * 1000); height: calc(var(--u) * 760);
  pointer-events: none;
}
.porte {
  position: absolute; left: calc(var(--u) * 720); top: calc(var(--u) * 495);
  width: calc(var(--u) * 355); height: calc(var(--u) * 195);
  pointer-events: none;
}

/* Le mot géant, entre les baies et la voiture. Calé sur la largeur du cadre, pas de la scène :
   il ne se coupe jamais, même quand la scène déborde. Ligne de base sur 450 u. */
.mot {
  position: absolute;
  --mot-marge: 36px;
  font-family: var(--police-titre); font-weight: 800;
  font-size: calc((100cqw - 2 * var(--mot-marge)) / 5.26);
  line-height: 1; letter-spacing: -0.02em;
  left: calc(var(--mot-marge) - var(--sx));
  top: calc(var(--u) * var(--mot-base, 450) - 0.8565em);
  color: var(--graphite); white-space: nowrap; user-select: none;
}

/* Les ombres des feuilles, posées sur le sol. */
.ombre {
  position: absolute; max-width: none; pointer-events: none;
  width: calc(var(--u) * var(--ow));
  height: calc(var(--u) * var(--ow) * var(--oh));
  left: calc(var(--u) * (var(--ox) - var(--ow) / 2) + var(--decal));
  top: calc(var(--u) * (var(--oy) - var(--ow) * var(--oh) / 2));
  opacity: var(--oa);
}
#o-onex    { --oh: 0.4882; }
#o-carouge { --oh: 0.4880; }
#o-lancy-pres, #o-lancy-loin { --oh: 0.4680; }
#o-lancy-pres { --oa: 0; }

/* Les trois feuilles de devis (découpes de V4-A). Les montants sont masqués :
   aucun prix n'est présenté comme réel. */
.feuille {
  position: absolute;
  width: calc(var(--u) * var(--cw));
  height: calc(var(--u) * var(--cw) * var(--ah));
  left: calc(var(--u) * (var(--x) - var(--cw) / 2) + var(--decal));
  top: calc(var(--u) * (var(--y) - var(--cw) * var(--ah) / 2));
  transform: rotate(calc(var(--r) * 1deg));
  transform-origin: 50% 50%;
  pointer-events: none;
}
.feuille .couche { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.feuille .flou2 { opacity: 0; }
#f-onex { --ah: 1.3300; opacity: 0.9; }
#f-carouge { --ah: 1.3300; opacity: 0.95; }
#f-lancy { --ah: 1.2774; background: url("/assets/img/f-lancy.webp?v=2951f503") 0 0 / 100% 100% no-repeat; }
#f-carouge .flou2 { opacity: 1; }
#f-onex .flou2 { opacity: 1; }

.etiquette {
  position: absolute; left: var(--lx); top: var(--ly);
  transform: rotate(calc(var(--lr) * 1deg)); transform-origin: 0 0;
  font-family: var(--police-titre); color: var(--graphite);
  line-height: 1.08; white-space: nowrap;
}
.etiquette span { display: block; font-size: calc(var(--u) * var(--nom)); font-weight: 700; }
/* §8.5 : le lieu vient de functions/index.js. S'il ne tient pas après « Garage · », il passe à la ligne ;
   --lieu-max (en em) = RETOUR_LIGNE_EM de outils/generer_fiches.py (seuil de retour à la ligne) ; le lieu seul,
   sur sa ligne, peut aller jusqu'à LARGEUR_ETIQUETTE_EM moins 3 % (lieu.js). */
.etiquette .etiquette__nom { white-space: normal; max-width: calc(var(--lieu-max) * 1em); }
.etiquette .lieu { font-weight: inherit; white-space: nowrap; }
.etiquette .montant {
  display: flex; align-items: center; gap: 0.22em; margin-top: 0.12em;
  font-size: calc(var(--u) * var(--prix)); font-weight: 800; letter-spacing: -0.01em;
}
/* Le montant masqué : une barre pleine, comme un chiffre caviardé. */
.etiquette .montant i { display: block; width: 2.3em; height: 0.46em; background: currentColor; opacity: 0.3; border-radius: 1px; }
#f-onex .etiquette    { --lx: 26%;   --ly: 16.6%; --lr: 0.8; --lieu-max: 6.3; }
#f-carouge .etiquette { --lx: 22.1%; --ly: 17.4%; --lr: -4.6; --lieu-max: 9.4; }
#f-lancy .etiquette   { --lx: 22.8%; --ly: 17.8%; --lr: -2; --lieu-max: 8.6; color: var(--blanc); }
#f-lancy .etiquette .montant i { opacity: 0.55; }
/* Lot 4 : barre du montant de gauche à 1,8 em, par marge. Le contact avec la feuille du milieu relevé au
   lot 3 venait de l'instrument (transition de 0,01 ms en mouvement réduit), pas de la page. */
#f-onex .etiquette .montant i { width: 1.8em; }

/* Positions au bureau, en unités de scène (centre de la feuille, largeur du canevas). */
#f-onex    { --x: 136.5; --y: 553.5; --cw: 194.0; --r: 3;  --nom: 10.7; --prix: 22.4; }
#f-carouge { --x: 294.4; --y: 576.9; --cw: 215.9; --r: -3; --nom: 11.2; --prix: 24.5; }
#f-lancy   { --x: 494.9; --y: 619.6; --cw: 306.2; --r: 0;  --nom: 20.0; --prix: 37.3;
             --dx0: -25.6; --dy0: -59.7; --s0: 0.66; --r0: 8; --ody0: -42.7; } /* pose de départ (mouvement) */
#o-onex    { --ox: 155.7; --oy: 732.7; --ow: 264.3; --oa: 0.30; }
#o-carouge { --ox: 313.6; --oy: 762.5; --ow: 293.1; --oa: 0.34; }
#o-lancy-pres, #o-lancy-loin { --ox: 516.3; --oy: 828.7; --ow: 435.5; }
#o-lancy-loin { --oa: 0.34; }

/* Le texte : titre, phrase, bouton, mention. Un voile de pierre, sans bord, garde le contraste sur le sol. */
.hero__texte {
  position: absolute; z-index: 4;
  left: 0; right: 0; bottom: 0;
  padding: 28px var(--marge) 34px;
  display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 48px; row-gap: 20px;
}
.hero__voile {
  position: absolute; inset: 0; z-index: -1;
  background: var(--voile);
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 62%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0, #000 62%, transparent 100%);
}
.hero h1 {
  font-size: clamp(2.375rem, 1.2rem + 3.3vw, 4rem);
  line-height: 1.02; letter-spacing: -0.025em;
}
.hero__sous { margin-top: 12px; font-size: 1.1875rem; line-height: 1.45; max-width: 60ch; font-weight: 500; }
.hero__action { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hero__gratuit { font-size: 0.9375rem; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.hero__gratuit::before { content: ""; width: 14px; height: 3px; background: var(--orange); flex: none; }

/* ---- Téléphone : la voiture entière, le sol prolongé dessous ----------- */
@media (max-width: 699px) {
  .hero {
    /* Lot 3 : sur un téléphone court, le texte du bas montait sur les étiquettes (320 × 640). Les feuilles
       finissent vers 56 px + 1,032 × largeur ; le texte du bas fait au plus ~300 px, plus 24 px d'air. */
    height: max(100svh, 640px, calc(380px + 103.2vw));
    --barre-h: 56px;
    --W: calc(100cqw * 1536 / 760);
    --u: calc(var(--W) / 1536);
    --sx: calc(100cqw * -598 / 760);
    --sy: calc(var(--barre-h) - var(--u) * 40);
    --gauche-u: 659.4;   /* 770 − 221,2 / 2 */
  }
  .barre--hero { padding: 0 var(--marge); height: 56px; background: var(--pierre); }
  .barre--hero .barre__marque img { height: 24px; }
  .barre--hero .barre__zone { font-size: 0.875rem; }
  .mot { --mot-marge: 15px; --mot-base: 425; }

  #f-onex    { --x: 770;  --y: 856; --cw: 221.2; --nom: 12.6; --prix: 23.4; }
  #f-carouge { --x: 928;  --y: 878; --cw: 258.9; --nom: 13.8; --prix: 27.0; }
  #f-lancy   { --x: 1166; --y: 868; --cw: 350; --r: 0; --nom: 23.4; --prix: 42.6; --dx0: -45.5; --dy0: -48.7; --s0: 0.7; --ody0: -24.3; }
  #o-onex    { --ox: 798;  --oy: 1000; --ow: 301.3; --oa: 0.22; }
  #o-carouge { --ox: 955;  --oy: 1032; --ow: 351.4; --oa: 0.26; }
  #o-lancy-pres, #o-lancy-loin { --ox: 1192; --oy: 1018; --ow: 498; }
  #o-lancy-loin { --oa: 0.24; }

  .hero__texte { display: block; padding: 40px var(--marge) 22px; }
  .hero h1 { font-size: clamp(2rem, 1.2rem + 4vw, 2.5rem); }
  .hero__sous { font-size: 1.0625rem; margin-top: 10px; }
  .hero__action { margin-top: 18px; align-items: stretch; }
  .hero__action .bouton { justify-content: space-between; width: 100%; }
}

/* ---- Tablette en portrait, fenêtre haute (≥ 700 px et plus haute que large) -----------------------------
   Lot 4 : la composition du téléphone (les feuilles sous la voiture, l'homme et la bosse visibles), mise à
   l'échelle pour que les feuilles finissent au-dessus du texte du bas. Unité de scène --u, la plus grande de :
   - 100cqw / 1536 : la scène couvre la largeur ;
   - (100cqh − barre) / 1544 : la scène couvre la hauteur (rien de vide sous le texte) ;
   - la plus petite de 100cqw / 760 (cadrage du téléphone) et de l'unité qui loge les feuilles, de 40 u à leur
     bas en fin de mouvement (1122 u), entre la barre et le texte (au plus 300 px) avec 24 px d'air.
   La fenêtre visible reste centrée sur 978 u (comme au téléphone), sans dépasser le bord droit de la scène. */
@media (min-width: 700px) and (orientation: portrait) {
  .hero {
    --barre-h: 80px;
    --texte-h: 300px;
    --u: max(calc(100cqw / 1536), calc((100cqh - var(--barre-h)) / 1544),
             min(calc(100cqw / 760), calc((100cqh - var(--barre-h) - var(--texte-h) - 24px) / 1082)));
    --W: calc(var(--u) * 1536);
    --sx: max(calc(100cqw - var(--W)), min(0px, calc(50cqw - var(--u) * 978)));
    --sy: calc(var(--barre-h) - var(--u) * 40);
    --gauche-u: 659.4;
  }
  .mot { --mot-base: 425; }

  #f-onex    { --x: 770;  --y: 856; --cw: 221.2; --nom: 12.6; --prix: 23.4; }
  #f-carouge { --x: 928;  --y: 878; --cw: 258.9; --nom: 13.8; --prix: 27.0; }
  #f-lancy   { --x: 1166; --y: 868; --cw: 350; --r: 0; --nom: 23.4; --prix: 42.6; --dx0: -45.5; --dy0: -48.7; --s0: 0.7; --ody0: -24.3; }
  #o-onex    { --ox: 798;  --oy: 1000; --ow: 301.3; --oa: 0.22; }
  #o-carouge { --ox: 955;  --oy: 1032; --ow: 351.4; --oa: 0.26; }
  #o-lancy-pres, #o-lancy-loin { --ox: 1192; --oy: 1018; --ow: 498; }
  #o-lancy-loin { --oa: 0.24; }
}