/* LA PART PARTAGÉE DU SITE — un seul endroit, quatre pages.
   §1 l'écriture · §2 le menu au téléphone
   Claudio, 2026-09-24 : « arrête de changer les écritures, fais que
   l'écriture soit unie sur tout le site… ne change pas à chaque endroit
   d'écriture, c'est pas professionnel ».

   Relevé avant d'écrire ce fichier, dans le navigateur, sur les quatre
   pages : 12 classes rendaient une écriture DIFFÉRENTE selon la page,
   Rail Heights portait une TROISIÈME famille (JetBrains Mono) que les
   trois autres n'ont pas, et les petites capitales du site employaient
   NEUF approches différentes (.16 .18 .20 .24 .26 .28 .30 .32 .36 em)
   pour le même genre de libellé.

   La règle tient en deux lignes :
     — Cormorant NOMME (titres, noms propres, chiffres d'apparat) ;
     — Inter se LIT (tout le reste, libellés compris).
   Il n'y a pas de troisième famille, et il n'y a qu'UNE approche.

   Cette feuille est chargée APRÈS le <style> de chaque page, et c'est
   une décision, pas un détail : à spécificité égale c'est la DERNIÈRE
   règle qui gagne. Chargée avant, elle perdait en silence contre chaque
   page — mesuré : le menu gardait son ancien rythme et rien ne bougeait.
   Une feuille qui fait CONTRAT doit pouvoir l'emporter. Ce qui reste en
   ligne décide donc du placement et de la couleur, jamais de l'écriture.
   Et le banc (ecriture/mesure.js) relève le style CALCULÉ des quatre
   pages : une divergence qui reviendrait ne passerait pas. */

:root{
  --serif:'Cormorant',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,system-ui,sans-serif;
  --fs-label:.72rem;   /* la seule taille de libellé du site */
  --tr:.26em;          /* la seule approche de capitales du site */
}

/* ─── CE QUI SE LIT ─────────────────────────────────────────────────── */
body{font-family:var(--sans);font-weight:400}

/* ─── LES PETITES CAPITALES ────────────────────────────────────────────
   Un seul barème : Inter 500, une seule taille, une seule approche. Les
   règles de page gardent leur couleur, leur marge et leur placement. */
.label,.h-kick,.facts span,.field label,.spec span,.three i,.tabs button,
.btn,.card .go,.card .meta,.card .tag,.menu-btn,.tlink,.ft .links a,
.ft .fine,.amen span,.bar .blink,.lv-foot .hint,
.fl .n,.fl-note,.h-bottom span,.h-bottom .where,.h-bottom .status,
.ed-fig figcaption,.plan-fig figcaption,.pl-fig figcaption,
.st-fig figcaption,.shot figcaption,#film .sig,#menu .m-close,
#menu .m-list small{
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:var(--tr);
  text-transform:uppercase;
}
/* Une note de plusieurs lignes se lit ; elle garde la casse et l'interligne
   de son bloc, pas la graisse d'un libellé. */
.fl-note{font-weight:400;text-transform:none;letter-spacing:.02em;
  font-size:var(--fs-label)}

/* ─── CE QUI NOMME ─────────────────────────────────────────────────────
   Cormorant, graisse 300. Les tailles qui dépendent du contexte restent
   à la page ; celles d'un MÊME élément présent sur plusieurs pages sont
   ici, sinon le menu n'a pas la même taille selon la page (relevé :
   28,8 px sur l'accueil contre 22,4 px ailleurs). */
.serif,.h-title,.card h3,.ed h3,.ed .n,.facts b,.spec b,.note,.hours b,
.three b,.amen b,#menu .m-list a,#menu .m-side a.big,
.rg-side a.big{
  font-family:var(--serif);
  font-weight:300;
}
#menu .m-list a{font-size:clamp(2rem,7vw,2.9rem);line-height:1.12;letter-spacing:normal}
#menu .m-side a.big{font-size:clamp(1.3rem,2.2vw,1.8rem)}
.ed .n{font-size:1.1rem;letter-spacing:normal;text-transform:none}
.facts b{font-size:clamp(2rem,3.4vw,3rem);line-height:1;letter-spacing:normal}
/* Le titre du formulaire, le meme sur les quatre pages, et plus petit
   (Claudio, 2026-09-24 : « make it smaller »). Il montait a 80 px sur
   ordinateur — plus gros que le titre du portefeuille — pour une invitation
   a ecrire. Ici et plus dans chaque page : quatre copies divergent. */
#register h2{font-size:clamp(2rem,3.6vw,3.3rem)}

/* ─── CE QUI SE TAPE ───────────────────────────────────────────────────
   Un champ n'est pas un titre : il se lit et s'écrit, donc Inter (règle
   de la maison depuis le 2026-09-20). Jamais sous 16 px — en dessous,
   Safari iOS ZOOME la page à la prise de focus, et l'acquéreur se
   retrouve à faire glisser la page pour voir ce qu'il tape. */
.field input,.field textarea{
  font-family:var(--sans);
  font-size:1.02rem;
  font-weight:400;
  letter-spacing:.01em;
}

/* ═══ §2 · LE MENU AU TÉLÉPHONE ═══════════════════════════════════════
   Claudio, 2026-09-24 : « le menu, fais-le plus professionnel ».
   Relevé avant de toucher une ligne, à 390 x 844 :
     — il DÉBORDE sur les trois pages projet (967 px dans 844) : il faut
       défiler pour atteindre le téléphone et le portail, dans un panneau
       qui tient sur un écran ailleurs ;
     — TROIS cibles font 25 à 26 px — l'adresse, le numéro et le portail,
       c'est-à-dire précisément ce qu'on touche depuis un téléphone.
   Ces règles vivent ICI et non dans chaque page : quatre copies d'un même
   menu, c'est la divergence qu'on vient de corriger sur l'écriture. */
@media(max-width:860px){
  /* On agrandit la ZONE, pas le dessin (règle de la maison) : la ligne ne
     grossit pas, elle devient touchable. */
  /* L'approche unifiée est plus large que celle de Rail Heights : un
     sous-titre long passe donc à la ligne, et « LEVEL » se retrouvait
     seul. On ÉQUILIBRE les deux lignes plutôt que de réécrire le texte
     de la maison. */
  #menu .m-list small,.h-kick,.h-bottom span,.h-bottom .where,
  .h-bottom .status,.card .meta{text-wrap:balance}
  #menu .m-side a,#menu .tlink,#menu .m-more a{position:relative}
  #menu .m-side a::before,#menu .tlink::before,#menu .m-more a::before{
    content:"";position:absolute;left:0;right:0;
    top:50%;transform:translateY(-50%);height:44px;min-width:44px}
}
@media(max-width:860px){#menu{gap:3rem}}
@media(max-width:860px) and (max-height:900px){
  /* Un menu qui tient sur l'écran se lit d'un regard ; un menu qui défile
     cache sa dernière ligne. On resserre le rythme, on ne retire rien. */
  /* Relevé sur une page projet : 101 px de marge en haut et 51 px en bas
     pour un panneau qui déborde déjà de 68 px. Un menu plein écran n'a
     pas besoin d'une marge de page — la croix vit à 1,35 rem du bord. */
  #menu{gap:1.25rem;
    padding-top:clamp(3.6rem,8vh,5rem);
    padding-bottom:clamp(1.2rem,3vh,2rem)}
  #menu .m-side{gap:1rem}
  #menu .m-list .m-proj a{padding:.15rem 0}
  /* Deux lignes voisines a 39 px ne peuvent pas porter chacune une zone
     de 44 px sans se marcher dessus : la sonde touche la voisine et
     s.arrete. On ecarte les lignes, on ne grossit pas le texte. */
  #menu .m-list .m-more a{padding:.45rem 0}
}

/* ═══ §3 · LE HERO SE LIT ══════════════════════════════════════════════
   Claudio, 2026-09-24 : « c'est pas assez clair ».
   Mesuré sur les PIXELS, à 390 x 844, texte masqué : le titre du hero
   tombait à 1,66:1 et le sur-titre à 1,25:1 — sur trois pages sur quatre.
   La cause n'était pas la couleur du texte : il n'y avait AUCUN voile,
   le blanc était posé à nu sur un ciel clair. Même défaut, même méthode
   et même correction que la porte du portail (2026-09-21, 2,2:1 → 11,4).
   Le voile part du BAS et meurt avant la moitié : l'architecture reste
   visible, c'est elle qu'on vend. */
#hero .h-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(12,14,18,.84) 0%,
    rgba(12,14,18,.72) 25%,
    rgba(12,14,18,.54) 50%,
    rgba(12,14,18,.20) 68%,
    rgba(12,14,18,0) 82%)}
/* Relevé : le sur-titre commence à 51 % de la hauteur du hero au
   téléphone — c'est pour LUI que le voile tient encore à mi-hauteur.
   Au-dessus de 82 %, rien : le ciel et la couronne du bâtiment restent
   nus, et c'est l'architecture qu'on vend. */

/* Le formulaire et le pied de page, dans le BLEU DU LOGO (2026-09-30,
   Claudio). Mesure sur le lockup : #303E59, soit le --navy de la maison.
   Ici, et pas quatre fois : la page LYV n'a meme pas de --navy, d'ou le
   repli. Le fond de html suit, sinon le rebond sous le pied de page
   montrerait l'ancien noir. Le texte d'exemple des champs remonte a .62 :
   a .5 il passait sous 4,5:1 sur le bleu. */
/* Puis un cran plus SOMBRE (2026-09-30, Claudio : « bleu un peu plus
   dark ») : #252F44, le meme bleu, la lumiere en moins. Les libelles y
   gagnent du contraste, ils n'en perdent pas. */
/* Et encore plus FONCE (2026-09-30, Claudio : « c trop clair, c pas le
   vrai ») : #1A2236, un marine de nuit — toujours bleu, jamais noir. */
html{background:#1A2236}
#register,footer{background:#1A2236}
#register .field input::placeholder,#register .field textarea::placeholder{color:rgba(245,242,236,.62)}

/* ─── UN PEU PLUS DE MOUVEMENT (2026-10-02, Claudio : « rend le site un
   peu plus motion ») ───────────────────────────────────────────────────
   Ici, et pas quatre fois. Tout est sous no-preference : un visiteur qui
   demande moins de mouvement ne voit RIEN de ce bloc. Et rien ne coûte au
   défilement : on n'anime que clip-path, opacity, transform et scale, et
   le hero suit le défilement par le navigateur lui-même (scroll-driven
   animations), pas par un script à chaque image. */
@media (prefers-reduced-motion:no-preference){
  /* Une photo se DÉVOILE en montant, comme un rideau qu'on lève, et
     l'image se pose en reculant un peu. */
  .ed-fig.rv,.st-fig.rv,.pl-fig.rv{clip-path:inset(16% 0 0 0);
    transition:clip-path 1.5s var(--ease),opacity 1.1s var(--ease),transform 1.1s var(--ease)}
  .ed-fig.rv.in,.st-fig.rv.in,.pl-fig.rv.in{clip-path:inset(0 0 0 0)}
  .ed-fig.rv img,.st-fig.rv img,.pl-fig.rv img{scale:1.14;transition:scale 2s var(--ease)}
  .ed-fig.rv.in img,.st-fig.rv.in img,.pl-fig.rv.in img{scale:1}
  /* Les cartes du portefeuille : même rideau, l'une après l'autre. */
  .card.rv .im{clip-path:inset(16% 0 0 0);transition:clip-path 1.5s var(--ease)}
  .card.rv.in .im{clip-path:inset(0 0 0 0)}
  .pf-grid .card.rv:nth-child(2),.pf-grid .card.rv:nth-child(2) .im{transition-delay:.14s}
  .pf-grid .card.rv:nth-child(3),.pf-grid .card.rv:nth-child(3) .im{transition-delay:.28s}
  /* Les titres montent de plus loin, et plus lentement. */
  h2.serif.rv{transform:translateY(38px);transition:opacity 1.3s var(--ease),transform 1.5s var(--ease)}
  h2.serif.rv.in{transform:none}
  /* Le film du hero arrive en reculant doucement, au lieu d'apparaître. */
  .h-media video{transform:scale(1.05);transition:opacity 1.8s ease,transform 4s var(--ease)}
  .h-media video.on{transform:none}
}
/* Le hero suit le défilement : l'image descend plus lentement que la
   page, le texte s'en va en premier. Seulement là où le navigateur sait
   le faire seul ; ailleurs, le hero reste immobile comme avant. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    #hero .h-media{animation:fd-hero-m linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    #hero .h-core,#hero .h-bottom{animation:fd-hero-c linear both;animation-timeline:scroll(root);animation-range:0 50vh}
  }
}
@keyframes fd-hero-m{to{transform:translateY(22%)}}
@keyframes fd-hero-c{to{opacity:0;transform:translateY(-6vh)}}


/* ─── LA BROCHURE SE DEMANDE (2026-10-02, Claudio : « qu'ils demandent la
   brochure, prénom, nom, numéro, e-mail, et la reçoivent par courriel ») ─
   La feuille d'assets/brochure.js. Une seule, pour les quatre pages. Les
   champs reprennent `.field` du formulaire — mais celui-ci vit sur le bleu
   de nuit, et ses règles de page posent le texte en IVOIRE : ici, sur la
   feuille ivoire, tout est repris à l'encre, sinon on taperait à blanc. */
#brochureDlg{width:min(36rem,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;
  margin:auto;padding:clamp(1.6rem,4vw,2.8rem);border:0;border-radius:0;
  background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(16,18,22,.28)}
#brochureDlg::backdrop{background:rgba(16,18,22,.58)}
#brochureDlg .br-x{position:absolute;top:.6rem;right:.6rem;min-width:44px;min-height:44px;padding:0 .8rem;
  background:none;border:0;color:var(--ink-3);cursor:pointer;font:500 var(--fs-label)/1 var(--sans);
  letter-spacing:var(--tr);text-transform:uppercase}
#brochureDlg .br-x:hover{color:var(--ink)}
#brochureDlg .br-k{display:block;margin-bottom:1rem;color:var(--ink-3)}
#brochureDlg h2{font-size:clamp(1.8rem,4.2vw,2.5rem);line-height:1.08;color:var(--ink)}
#brochureDlg h2 em{font-style:italic}
#brochureDlg .br-lede{margin-top:.9rem;color:var(--ink-3);max-width:30em}
#brochureDlg .br-form{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.8rem;margin-top:1.8rem}
#brochureDlg .field.full,#brochureDlg .br-act{grid-column:1/-1}
#brochureDlg .field label{color:var(--ink-3)}
#brochureDlg .field input{color:var(--ink);border-bottom:1px solid var(--line);background:transparent}
#brochureDlg .field input::placeholder{color:rgba(20,21,23,.42)}
#brochureDlg .field input:focus{outline:none;border-bottom-color:var(--ink)}
#brochureDlg .field input:focus-visible{box-shadow:0 1px 0 var(--ink)}
#brochureDlg .field select{width:100%;font-family:var(--sans);font-size:1.02rem;font-weight:400;letter-spacing:.01em;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.8rem 1.6rem .8rem 0;min-height:44px;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 9px) 55%,calc(100% - 4px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
#brochureDlg .field select:focus{outline:none;border-bottom-color:var(--ink)}
#brochureDlg .field select:focus-visible{box-shadow:0 1px 0 var(--ink)}
#brochureDlg .br-opt{text-transform:none;letter-spacing:0;font-size:.85em;opacity:.8;margin-left:.3em}
#brochureDlg .br-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#brochureDlg .br-act{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:.4rem}
#brochureDlg .br-go{background:var(--navy,#323F59);color:#F5F2EC;border-color:var(--navy,#323F59);cursor:pointer;min-height:44px}
#brochureDlg .br-go:hover{background:#1A2236;border-color:#1A2236}
#brochureDlg .br-note{flex-basis:100%;color:var(--ink-3);font-size:.95rem;line-height:1.5}
#brochureDlg.busy .br-go{opacity:.7;pointer-events:none}
#brochureDlg.sent .br-go{opacity:.55}
#brochureDlg.sent .br-note{color:var(--ink)}
@media(max-width:520px){#brochureDlg .br-form{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){
  #brochureDlg[open]{animation:fd-br-in .5s var(--ease) both}
  #brochureDlg[open]::backdrop{animation:fd-br-fade .4s ease both}
}
@keyframes fd-br-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fd-br-fade{from{opacity:0}to{opacity:1}}

/* ─── TALK TO US ─────────────────────────────────────────────────────────
   Le bouton WhatsApp des quatre pages (2026-10-07, assets/wa.js) : un ONGLET
   collé au bord droit, à mi-hauteur, le texte à la verticale (choisi par
   Claudio sur planche, direction H). Bleu nuit et ivoire, comme le pied de
   page ; il passe à l'ivoire sur ce qui est sombre (.on-dark, posé par wa.js
   d'après le fond qu'il couvre). Sous la barre (120), le menu (300) et le
   voile d'entrée (400). La zone tactile déborde de 8 px vers la gauche
   (::before) : 44 px sous le doigt sans élargir le dessin. */
.talk{position:fixed;right:0;top:50%;z-index:110;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 12px;border-radius:12px 0 0 12px;background:#1A2236;color:#F5F2EC;text-decoration:none;box-shadow:-10px 0 30px -14px rgba(26,34,54,.6),inset 0 0 0 1px rgba(245,242,236,.14);transition:background-color .4s,color .4s,box-shadow .4s,transform .25s}
.talk::before{content:"";position:absolute;top:0;bottom:0;left:-8px;right:0}
.talk svg{width:18px;height:18px;flex:0 0 auto}
.talk span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sans);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--tr);text-transform:uppercase;line-height:1;white-space:nowrap}
.talk.on-dark{background:#F5F2EC;color:#1A2236;box-shadow:-10px 0 30px -14px rgba(0,0,0,.55),inset 0 0 0 1px rgba(26,34,54,.1)}
.talk:focus-visible{outline:2px solid #C9B68E;outline-offset:3px}
@media(hover:hover){.talk:hover{transform:translate(-3px,-50%)}}
@media(max-width:860px){.talk{gap:10px;padding:14px 10px}.talk svg{width:16px;height:16px}}
@media print{.talk{display:none}}