/* =====================================================================
   VEYRA V4 · chargé après v3.css, ne fait que l'affiner.
   1. Lisibilité : texte secondaire plus clair, tailles minimales (15 px courant, 12 px étiquettes).
   2. Accueil : vignette, grain très léger, titre qui monte une seule fois.
   3. Le service : la maquette d'architecte lue au défilement (si elle est livrée), sinon l'image V3.
   4. Le tableau de bord : plus grand, à fond perdu sur la piscine la nuit, écran qui s'allume,
      un événement qui arrive ; les quatre temps en vraies cartes.
   ===================================================================== */

:root {
  --taupe: #B6AEA2;          /* était #A29A8F : texte secondaire plus lisible */
  --taupe-2: #958D82;        /* était #766F66 : mentions et aides */
}

/* ---------- 1. lisibilité ---------- */
.surtitre { font-size: 12px; letter-spacing: .22em; }
.bouton, .lien { font-size: 12px; }
.langue { font-size: 12px; }
.entete__cta { font-size: 11.5px; }
.chapeau, .tb-texte { font-size: 17px; color: var(--texte-v3); }
.liste li { font-size: 15.5px; }
.carte-offre__nom, .carte-offre__titre-liste { font-size: 12px; }
.carte-offre__pied { font-size: 15px; color: var(--taupe); }
.carte-offre__confiance li { font-size: 15px; }
.prix__periode { font-size: 15px; }
.diag__chapeau { font-size: 17px; }
.diag__discretion { font-size: 15px; }
.champ__label { font-size: 12px; color: var(--taupe); }
.champ__aide, .champ__erreur, .formulaire__obligatoire { font-size: 13px; }
.segment span, .accord__texte { font-size: 15px; }
.formulaire__information { font-size: 13px; }
.repliable__interieur p { font-size: 16px; }
.pied__territoires { font-size: 12px; }
.pied__liens a { font-size: 15px; }
.pied__mentions { font-size: 13.5px; }
.pied__responsabilite { font-size: 13px; }
.tb-mention { font-size: 13px; color: var(--taupe-2); }
/* l'incident : journal, lieu, temps écoulé, mention */
.inc-lieu, .inc-journal__titre, .inc-ecoule__l { font-size: 12px; }
.inc-ecoule { font-size: 13px; }
.inc-journal__liste li { font-size: 15px; }
.inc-journal__liste time { font-size: 13px; }
.inc-frise__liste li { font-size: 12px; }
.inc-mention { font-size: 13px; color: var(--taupe-2); }
@media (max-width: 760px) {
  .inc-journal__liste li { font-size: 15px; }
  .inc-journal__liste time { font-size: 12.5px; }
  .inc-ecoule { font-size: 12.5px; }
  .inc-mention { font-size: 12.5px; }
}

/* =====================================================================
   2. ACCUEIL
   ===================================================================== */
.accueil__media .video { filter: none; }
/* vignette : les bords s'éteignent, la lumière de la maison reste au centre */
.accueil__voile {
  background:
    radial-gradient(130% 95% at 42% 40%, rgba(10, 9, 8, 0) 46%, rgba(10, 9, 8, .62) 100%),
    linear-gradient(180deg, rgba(10, 9, 8, .6) 0%, rgba(10, 9, 8, 0) 24%),
    linear-gradient(0deg, rgba(10, 9, 8, .92) 0%, rgba(10, 9, 8, .55) 30%, rgba(10, 9, 8, 0) 58%);
}
@media (min-width: 768px) {
  .accueil__voile {
    background:
      radial-gradient(120% 110% at 40% 38%, rgba(10, 9, 8, 0) 42%, rgba(10, 9, 8, .66) 100%),
      linear-gradient(180deg, rgba(10, 9, 8, .5) 0%, rgba(10, 9, 8, 0) 20%),
      linear-gradient(0deg, rgba(10, 9, 8, .9) 0%, rgba(10, 9, 8, .52) 32%, rgba(10, 9, 8, 0) 60%),
      linear-gradient(90deg, rgba(10, 9, 8, .5) 0%, rgba(10, 9, 8, 0) 50%);
  }
}
/* grain : une image fixe, très légère, calculée une seule fois par le navigateur */
.grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .46  0 0 0 0 .42  0 0 0 1.1 -.3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.accueil__surtitre { color: rgba(236, 230, 220, .86); }
.accueil__phrase { color: rgba(236, 230, 220, .9); font-size: 16.5px; }
.accueil__titre { letter-spacing: -.035em; }
.accueil__titre .ligne { display: block; }
@media (min-width: 768px) {
  .accueil__surtitre { align-items: center; }
  .accueil__surtitre::before { display: block; content: ""; width: 34px; height: 1px; margin-right: 16px; background: var(--bronze-clair); }
  .accueil__phrase { font-size: 17.5px; max-width: 24em; }
  .accueil__titre { font-size: clamp(64px, 8.6vw, 140px); line-height: .94; }
}
/* entrée : le titre monte de 8 px, ligne par ligne, une seule fois ; le reste suit */
.titre-anim .accueil__titre .ligne { opacity: 0; transform: translateY(8px); animation: v4-monte 1.5s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.35s + var(--i, 0) * .3s); }
.titre-anim .accueil__surtitre { opacity: 0; animation: v4-apparait 1.2s ease forwards .15s; }
.titre-anim .accueil__pied { opacity: 0; transform: translateY(8px); animation: v4-monte 1.3s cubic-bezier(.2, .7, .2, 1) forwards 1.05s; }
@keyframes v4-monte { to { opacity: 1; transform: none; } }
@keyframes v4-apparait { to { opacity: 1; } }

/* =====================================================================
   3. LE SERVICE
   ===================================================================== */
.pastille__texte { padding: 7px 11px; background: rgba(14, 13, 12, .82); }
.pastille__label { font-size: 12px; letter-spacing: .14em; }
.pastille__etat { font-size: 12px; color: var(--taupe); }
.bascule__choix { font-size: 12px; }
.service__texte { font-size: 16px; color: rgba(236, 230, 220, .92); }
.service__domaines { font-size: 12px; color: var(--taupe); }
.service__domaines-l { font-size: 12px; }
@media (min-width: 768px) { .service__texte { font-size: 17px; } .service__domaines { font-size: 12px; } }
@media (min-width: 768px) and (max-width: 1100px) { .service__domaines { flex-wrap: wrap; white-space: normal; } }
/* deux points de veille n'existent que sur la maquette */
.pastille[data-id="acces"], .pastille[data-id="local"] { display: none; }

/* la maquette d'architecte : un canevas plein cadre, les pastilles suivent les points calculés au rendu */
.service__maquette { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; display: block; object-fit: fill; background: #0B0A09; opacity: 0; transition: opacity .8s var(--ease); }
.service--maquette { background: #0B0A09; }
.service--maquette .service__maquette.est-pret { opacity: 1; }
.service--maquette .service__plan { left: 0; top: 0; width: 100%; height: 100%; transform: none; scale: none; }
.service--maquette .service__plan picture { display: none; }
.service--maquette .service__nuit { background: radial-gradient(90% 80% at 50% 55%, rgba(8, 7, 6, .05), rgba(8, 7, 6, .5)); }
.service--maquette .pastille[data-id="acces"], .service--maquette .pastille[data-id="local"] { display: block; }
.service--maquette .pastille { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.service--maquette.est-loin .pastille { transition-delay: calc(var(--i) * .08s); }
.service--maquette.est-loin .pastille.est-cache { opacity: 0; transition-delay: 0s; }
.service--maquette .pastille__texte { transform: translate(var(--decal, 0), var(--dy, -50%)); }
.service--maquette .pastille.a-gauche { --decal: calc(-100% - 28px); }
@media (min-width: 768px) {
  .service--maquette .service__voile {
    background:
      linear-gradient(180deg, rgba(11, 10, 9, .7) 0%, rgba(11, 10, 9, 0) 22%),
      linear-gradient(0deg, rgba(11, 10, 9, .94) 0%, rgba(11, 10, 9, .5) 26%, rgba(11, 10, 9, 0) 46%),
      linear-gradient(90deg, rgba(11, 10, 9, .8) 0%, rgba(11, 10, 9, .25) 30%, rgba(11, 10, 9, 0) 46%);
  }
}

/* =====================================================================
   4. LE TABLEAU DE BORD
   ===================================================================== */
.tb-titre { max-width: 12em; }
/* la scène passe à fond perdu : la piscine la nuit, fondue dans la page en haut et en bas */
.tb-scene {
  margin: clamp(48px, 7vh, 80px) calc(50% - 50vw) 0; padding: clamp(80px, 9vw, 140px) var(--marge) clamp(96px, 10vw, 150px);
  min-height: min(980px, 100vh);
}
.tb-photo { inset: 0; left: 0; right: 0; width: auto; top: 0; bottom: 0; }
.tb-photo img { object-position: 50% 60%; filter: none; }
.tb-photo::after {
  background:
    linear-gradient(180deg, var(--noir-2) 0%, rgba(21, 19, 17, 0) 22%, rgba(21, 19, 17, 0) 70%, var(--noir-2) 100%),
    radial-gradient(75% 75% at 60% 50%, rgba(21, 19, 17, 0) 40%, rgba(21, 19, 17, .45) 100%);
}
.tb-ecran { position: relative; z-index: 1; width: min(66%, 1000px); margin: 0 0 0 auto; }
.tb-tel { z-index: 3; left: calc(var(--marge) + 1%); bottom: clamp(40px, 5vw, 80px); }
.tb-tel .m-tel { --tel-l: clamp(270px, 22.5vw, 340px); }
/* une flaque de lumière chaude sous le téléphone */
.tb-tel::before { content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; bottom: -14%; height: 40%; background: radial-gradient(50% 50% at 50% 50%, rgba(217, 164, 98, .16), rgba(217, 164, 98, 0) 70%); pointer-events: none; }
.tb-legende { position: absolute; right: var(--marge); bottom: 28px; margin: 0; font: 500 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }

/* l'écran et le téléphone s'allument (un voile noir qui s'efface), puis un événement arrive */
.tb-ui::after, .tb-tel .tb-app::after { content: ""; position: absolute; inset: 0; z-index: 20; background: #0A0908; opacity: 0; pointer-events: none; }
.tb--vivant .tb-ui::after, .tb--vivant .tb-tel .tb-app::after { opacity: 1; transition: opacity 1.4s cubic-bezier(.3, .1, .2, 1) .35s; }
.tb--vivant .tb-tel .tb-app::after { transition-delay: .75s; }
.tb--vivant .tb-ecran.est-net .tb-ui::after, .tb--vivant .tb-tel.est-net .tb-app::after { opacity: 0; }


.tb-banniere {
  position: absolute; z-index: 9; left: .9em; right: .9em; top: 4.4em; padding: 1em 1.25em 1.1em; border-radius: 1.7em;
  background: rgba(40, 37, 33, .97); box-shadow: inset 0 0 0 1px rgba(236, 230, 220, .1), 0 1.2em 2.4em -1em rgba(0, 0, 0, .7);
  opacity: 0; transform: translateY(-1.4em) scale(.97); transition: opacity .6s var(--ease), transform .9s cubic-bezier(.2, .8, .2, 1);
}
.tb--evenement .tb-banniere { opacity: 1; transform: none; }
.tb--evenement.tb--retire .tb-banniere { opacity: 0; transform: translateY(-1em); }
.tb-banniere__tete { display: flex; align-items: center; gap: .55em; margin: 0 0 .5em; font-size: 1em; letter-spacing: .2em; color: var(--taupe); }
.tb-banniere__tete .m-v { width: 1.3em; height: 1.3em; }
.tb-banniere__heure { margin-left: auto; letter-spacing: 0; font-family: var(--mono); }
.tb-banniere__titre { margin: 0 0 .2em; font-size: 1.3em; font-weight: 600; color: var(--pierre); }
.tb-banniere__texte { margin: 0; font-size: 1.25em; line-height: 1.35; color: var(--texte-v3); }
.m-v path { fill: currentColor; }

/* la ligne d'événement qui arrive en tête du journal ; la plus ancienne laisse sa place */
.tb-evts li.tb-evt--nouveau, .tb-evts li:last-child { overflow: hidden; transition: max-height .8s var(--ease), opacity .6s var(--ease), padding .8s var(--ease), background-color 2.4s var(--ease); }
.tb-evts li.tb-evt--nouveau { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; }
.tb--evenement .tb-evts li.tb-evt--nouveau { max-height: 4em; opacity: 1; padding-top: .6em; padding-bottom: .6em; border-top-width: 1px; background: rgba(176, 141, 98, .14); }
.tb--evenement.tb--retire .tb-evts li.tb-evt--nouveau { background: rgba(176, 141, 98, 0); }
.tb-evts li:last-child { max-height: 4em; }
.tb--evenement .tb-evts li:last-child { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }

/* les quatre temps : quatre cartes, l'heure de la nuit d'octobre en tête */
.temps-bloc { margin-top: clamp(16px, 3vw, 40px); }
.temps-surtitre { margin-bottom: 22px; }
.temps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 0; }
.temps__item { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px clamp(20px, 2vw, 30px) 32px; background: rgba(236, 230, 220, .03); box-shadow: inset 0 0 0 1px var(--filet-v3); }
.temps__item + .temps__item { padding-left: clamp(20px, 2vw, 30px); border-left: 0; margin-left: -1px; }
.temps__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--bronze-clair); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease); transition-delay: calc(.3s + var(--i, 0) * .18s); }
.temps__item.est-vu::before, .sans-js .temps__item::before, .mouvement-reduit .temps__item::before { transform: none; }
.temps__haut { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.temps__num { font-size: 12.5px; letter-spacing: .08em; color: var(--bronze-clair); }
.temps__heure { font-size: 13px; color: var(--taupe); }
.temps__titre { margin: 0; font: 300 clamp(26px, 2.5vw, 36px)/1.05 var(--serif); letter-spacing: -.015em; color: var(--pierre); }
.temps__texte { display: block; margin: 0; font: 400 15.5px/1.55 var(--sans); color: var(--texte-v3); }
.tb-mention { margin-top: 22px; }

@media (max-width: 1100px) and (min-width: 761px) {
  .temps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .temps__item:nth-child(3) { margin-left: 0; margin-top: -1px; }
  .temps__item:nth-child(4) { margin-top: -1px; }
  .tb-ecran { width: 72%; }
}
@media (max-width: 760px) {
  .tb-scene { display: flex; justify-content: center; margin: 36px calc(-1 * var(--gouttiere)) 0; padding: 72px 0 84px; min-height: 0; }
  .tb-photo::after { background: linear-gradient(180deg, var(--noir-2) 0%, rgba(21, 19, 17, .1) 26%, rgba(21, 19, 17, .1) 70%, var(--noir-2) 100%); }
  .tb-tel { position: relative; left: auto; bottom: auto; }
  .tb-tel .m-tel { --tel-l: min(300px, 78vw); }
  .tb-legende { left: var(--gouttiere); right: auto; bottom: 22px; font-size: 12px; }
  .temps { grid-template-columns: 1fr; }
  .temps__item + .temps__item { margin-left: 0; margin-top: -1px; }
  .temps__item { padding: 22px 20px 24px; gap: 10px; }
  .temps__titre { font-size: 26px; }
  .temps__texte { font-size: 15px; }
}

/* =====================================================================
   MOUVEMENT RÉDUIT
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .titre-anim .accueil__titre .ligne, .titre-anim .accueil__surtitre, .titre-anim .accueil__pied { opacity: 1; transform: none; animation: none; }
}

/* téléphone : la maquette est petite, les étiquettes se chevaucheraient ; seuls les points de veille restent sur la maison
   (la liste « Ce que nous suivons » les nomme sous le texte) */
@media (max-width: 767px) {
  .service--maquette .pastille__point { width: 11px; height: 11px; left: -5.5px; top: -5.5px; }
  /* V5 bis : les noms reviennent sur le téléphone, placés sans se chevaucher (maquette.js › etiqueter) quand la maison a fini de tourner */
  .service--maquette .pastille__texte { padding: 6px 9px; opacity: 0; transition: opacity .6s var(--ease); }
  .service--maquette .pastille__label { font-size: 10.5px; letter-spacing: .12em; }
  .service--maquette.service--etiquettes .pastille__texte { opacity: 1; transition-delay: calc(.15s + var(--i) * .07s); }
  .service--maquette .pastille.sans-etiquette .pastille__texte { display: none; }
}

/* =====================================================================
   V5 · UNE NUIT D'OCTOBRE : un récit, pas un tableau de bord
   (remplace l'horloge, la frise et le téléphone de la V4 ; aucun épinglage)
   ===================================================================== */
.nuit { position: relative; background: var(--noir); color: var(--texte); padding: var(--section-y) 0 calc(var(--section-y) + 8px); }
.nuit__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 0 var(--gouttiere); }
.nuit__titre { margin-top: 18px; max-width: 11em; }
.nuit__chapeau { margin-top: 20px; font: 300 17px/1.6 var(--sans); color: rgba(236, 230, 220, .84); max-width: 26em; }
.nuit__media { position: relative; margin: 36px calc(-1 * var(--gouttiere)) 0; aspect-ratio: 4 / 5; overflow: hidden; background: #0B0A09; }
.nuit__media .video { background: #0B0A09; }
/* les bords s'éteignent doucement, comme dans l'accueil */
.nuit__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 50% 46%, rgba(10, 9, 8, 0) 52%, rgba(10, 9, 8, .55) 100%), linear-gradient(0deg, rgba(14, 13, 12, .55) 0%, rgba(14, 13, 12, 0) 26%); }
.nuit__moments { list-style: none; margin: 8px 0 0; padding: 0; }
.nuit__moment { display: grid; gap: 10px; padding: 28px 0 30px; border-bottom: 1px solid var(--filet-v3); }
.nuit__heure { font: 300 34px/1 var(--serif); letter-spacing: -.01em; color: var(--pierre); font-variant-numeric: lining-nums proportional-nums; white-space: nowrap; }
.nuit__texte { font: 300 16.5px/1.65 var(--sans); color: rgba(236, 230, 220, .82); max-width: 32em; text-wrap: pretty; }
.nuit__fin { margin-top: 40px; font: 300 italic 28px/1.25 var(--serif); letter-spacing: -.01em; color: var(--pierre); }
.nuit__mention { margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--taupe-2); max-width: 36em; }
@media (min-width: 768px) and (max-width: 1023px) {
  .nuit__media { margin: 48px 0 0; aspect-ratio: 16 / 11; }
  .nuit__moment { grid-template-columns: 140px 1fr; gap: 28px; align-items: baseline; }
}
@media (min-width: 1024px) {
  /* l'image à gauche, collée pendant la lecture ; le récit à droite */
  .nuit__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "media tete" "media suite"; grid-template-rows: auto 1fr; column-gap: clamp(56px, 7vw, 120px); }
  .nuit__tete { grid-area: tete; padding-top: 2vh; }
  .nuit__media { grid-area: media; align-self: start; position: sticky; top: calc(var(--entete-h) + 28px); margin: 0; aspect-ratio: auto; height: min(calc(100vh - var(--entete-h) - 56px), 860px); }
  .nuit__suite { grid-area: suite; }
  .nuit__moments { margin-top: 48px; border-top: 1px solid var(--filet-v3); }
  .nuit__moment { grid-template-columns: 150px 1fr; gap: 32px; align-items: baseline; padding: 34px 0 36px; }
  .nuit__heure { font-size: 40px; }
  .nuit__texte { font-size: 17.5px; }
  .nuit__chapeau { font-size: 18.5px; }
  .nuit__fin { margin-top: 52px; font-size: 38px; }
}
.nuit__suite { padding-bottom: 0; }

/* =====================================================================
   V5 bis (retours d’Evan sur téléphone)
   ===================================================================== */
/* la piscine de l’offre (fond collé) débordait sur le pied de page et le cachait en fin de défilement */
.offre-zone { clip-path: inset(0); }
.pied { position: relative; z-index: 1; }
/* « Une nuit d’octobre » : une image nette qui respire, au lieu d’une boucle vidéo */
.nuit__photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: 50% 55%; animation: nuit-respire 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes nuit-respire { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .nuit__photo { animation: none; } }
/* le service : des mots simples, en minuscules, plutôt que des capitales espacées partout */
.bascule__choix { font: 400 14px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.service__domaines { display: block; margin-top: 20px; padding-top: 16px; font: 400 15px/1.6 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(236, 230, 220, .88); white-space: normal; }
.service__domaines-l { display: block; margin: 0 0 4px; font: 400 13px/1.4 var(--sans); letter-spacing: .01em; color: var(--taupe); }
.service__domaine:not(:last-child)::after { margin: 0 .5em; color: var(--taupe-2); }
@media (min-width: 768px) { .service__domaines { font-size: 15.5px; } }

/* =====================================================================
   V5 ter : moins de nuit vide entre les blocs (« trop d'espace noir »)
   Rythme resserré d'environ un tiers, et plus de double marge entre deux sections qui se suivent.
   ===================================================================== */
:root { --section-y: 72px; }
@media (min-width: 768px) { :root { --section-y: 96px; } }
@media (min-width: 1280px) { :root { --section-y: 112px; } }
.nuit { padding-bottom: calc(var(--section-y) * .4); }
.offre-zone__contenu { padding-bottom: calc(var(--section-y) * .6); }
.pied { padding-top: 48px; }
/* fin du tableau de bord → l'offre : la piscine se fondait dans une longue bande sombre */
.tb-cadre { padding-bottom: 20px; }
.tb-scene { padding-bottom: clamp(64px, 6.5vw, 100px); min-height: min(900px, 96vh); }
.offre-zone__contenu { padding-top: calc(var(--section-y) * .75); }
@media (max-width: 760px) { .tb-scene { padding: 64px 0 56px; } }
/* « petit-déjeuner » ne se coupe plus au trait d'union */
.nuit__fin .insec { white-space: nowrap; }
.tb-scene { min-height: 0; }
.tb-mention { margin-top: 16px; }
@media (max-width: 760px) { .tb-scene { padding: 56px 0 28px; } }
@media (min-width: 761px) { .tb-scene { padding-bottom: clamp(48px, 4vw, 64px); } }