/* =============================================================================
   MAISON SOLENNE · CONCIERGERIE · SYSTÈME DE DESIGN
   Site de démonstration Y.R Marketing Groupe (entreprise fictive) · feuille partagée par toutes les pages

   NE PAS MODIFIER CE FICHIER depuis une page. Le spécifique va dans un <style>
   de page (voir GABARIT.md). Toute évolution du système passe par la DA.

   Direction : « nuit dorée ». Noir chaud, ivoire de lin, or travaillé comme
   une feuille d'or (dégradé métallique), bleu nuit en accent rare.
   Didone à fort contraste (Bodoni Moda, axe optique) pour la voix,
   géométrique (Jost) pour l'information. Mouvement lent, précis, jamais gadget.

   SOMMAIRE
   01. Polices
   02. Variables (couleurs, typographie, espaces, mouvement)
   03. Base
   04. Thèmes de section (.fond-*)
   05. Typographie
   06. Mise en page (conteneurs, sections, grilles)
   07. Bandeau « démonstration »
   08. En-tête et navigation
   09. Menu plein écran (mobile)
   10. Boutons et liens
   11. Ouverture de page (.hero)
   12. Composants : surtitre, entête de section, cadre, duo, carte, rail,
       chiffres, défilant, citation, liste numérotée, mosaïque, filet,
       appel à l'action, formulaire
   12b. Fiche logement : fil d'Ariane, faits, fiche, réservation,
       caractéristiques, équipements, situation
   13. Pied de page
   14. Barre d'actions mobile
   15. Curseur « Voir »
   16. Visionneuse (lightbox)
   17. Révélations
   18. Transitions de page
   19. Utilitaires
   20. Mouvement réduit
   ========================================================================== */


/* =============================================================================
   01. POLICES · woff2 variables auto-hébergées (licence SIL OFL, sous-ensemble latin)
   Bodoni Moda : graisse 400 à 900 + axe optique (opsz 6 à 96, réglé seul
   par le navigateur selon la taille). Jost : graisse 100 à 900.
   ========================================================================== */
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-italique.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* =============================================================================
   02. VARIABLES
   ========================================================================== */
:root {
  /* --- Or ------------------------------------------------------------- */
  --or: #C89F58;               /* or de la marque */
  --or-clair: #F2D78C;         /* reflet */
  --or-satin: #D9B872;         /* italiques des titres sur fond sombre */
  --or-fonce: #7E5F27;         /* or lisible sur ivoire (contraste 5:1) */
  --or-brun: #5E461B;
  /* « Or sublimé » : dégradé métallique en feuille d'or. Prévu pour
     background-size: 200% afin de pouvoir faire glisser le reflet. */
  --or-degrade: linear-gradient(105deg, #A98341 0%, #C89F58 18%, #F2D78C 36%, #CDA65F 52%, #B08A47 70%, #E3C47F 86%, #C89F58 100%);
  --or-degrade-fonce: linear-gradient(105deg, #6E5220 0%, #8F6E30 30%, #B08A47 50%, #7E5F27 72%, #5E461B 100%);
  --or-filet: linear-gradient(90deg, transparent, rgba(200, 159, 88, .65) 20%, var(--or-clair) 50%, rgba(200, 159, 88, .65) 80%, transparent);

  /* --- Neutres ---------------------------------------------------------- */
  --noir: #0B0A08;             /* noir profond, chaud */
  --noir-2: #13110E;           /* section sombre alternée */
  --noir-3: #1C1915;           /* surfaces, fonds d'image */
  --ivoire: #F4EEE2;           /* lin */
  --sable: #E9DFCC;            /* ivoire plus dense */
  --creme: #EEE7D9;            /* texte sur sombre */
  --creme-doux: #B5AD9E;       /* texte secondaire sur sombre (7:1) */
  --encre: #191713;            /* texte sur ivoire */
  --encre-douce: #5C554A;      /* texte secondaire sur ivoire (6:1) */

  /* --- Bleu nuit du logo · accent RARE (une section par page au plus) --- */
  --nuit: #111933;
  --nuit-2: #1A2550;
  --bleu-logo: #283A7A;

  /* --- Grain (texture argentique très légère des fonds sombres) -------- */
  --grain: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* --- Motifs (masques SVG, se colorent avec background) --------------- */
  /* Soleil à seize rais, repris du « o » de Tropez dans le logo */
  --motif-soleil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C52.6 33 67 47.4 100 50C67 52.6 52.6 67 50 100C47.4 67 33 52.6 0 50C33 47.4 47.4 33 50 0ZM29 29 50 46 71 29 54 50 71 71 50 54 29 71 46 50Z'/%3E%3C/svg%3E");
  --motif-etoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M12 1.5l2.9 6.9 7.4.6-5.6 4.9 1.7 7.3L12 17.3l-6.4 3.9 1.7-7.3L1.7 9l7.4-.6z'/%3E%3C/svg%3E");

  /* --- Familles ---------------------------------------------------------- */
  --f-titre: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --f-texte: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;

  /* --- Échelle typographique (fluide, 375 px → 1440 px) ---------------- */
  --t-display: clamp(3.25rem, 1.5rem + 7.2vw, 9.5rem);  /* 52 → 128 px : ouverture */
  --t-h1: clamp(2.6rem, 1.4rem + 4.6vw, 6.5rem);        /* 42 → 88 px  : grand titre */
  --t-h2: clamp(2.1rem, 1.3rem + 2.9vw, 4.4rem);        /* 34 → 63 px  : titre de section */
  --t-h3: clamp(1.45rem, 1.15rem + 1vw, 2.1rem);        /* 23 → 33 px  */
  --t-h4: clamp(1.15rem, 1.05rem + .35vw, 1.35rem);     /* 18 → 21 px  */
  --t-chapeau: clamp(1.125rem, 1rem + .45vw, 1.4rem);   /* 18 → 22 px  : texte d'introduction */
  --t-corps: clamp(1rem, .96rem + .18vw, 1.0625rem);    /* 16 → 17 px  */
  --t-petit: .875rem;
  --t-label: .72rem;                                     /* capitales espacées */

  /* --- Espaces -------------------------------------------------------- */
  --esp-1: .25rem;
  --esp-2: .5rem;
  --esp-3: .75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: clamp(4rem, 2.5rem + 5vw, 7rem);
  --esp-section: clamp(5.5rem, 3rem + 9vw, 11rem);     /* respiration entre sections */
  --marge: clamp(1.25rem, .6rem + 3.4vw, 5rem);         /* gouttière latérale (20 → 56 px) */
  --gouttiere: clamp(1rem, .5rem + 2vw, 2.5rem);        /* entre colonnes */
  --max: 90rem;                                          /* 1440 px */
  --max-large: 110rem;
  --max-etroit: 60rem;
  --mesure: 62ch;                                        /* longueur de ligne de lecture */

  /* --- Mouvement ---------------------------------------------------- */
  --ease-luxe: cubic-bezier(.16, 1, .3, 1);      /* sortie exponentielle, très douce */
  --ease-douce: cubic-bezier(.65, 0, .35, 1);    /* entrée-sortie */
  --ease-rideau: cubic-bezier(.77, 0, .175, 1);
  --duree-1: .3s;
  --duree-2: .6s;
  --duree-3: 1.1s;
  --duree-4: 1.6s;

  /* --- Structure ---------------------------------------------------- */
  --entete-h: 4.25rem;     /* hauteur de l'en-tête (mobile) */
  --bandeau-h: 2.5rem;     /* recalculée par app.js */
  --decal: var(--bandeau-h);
  --barre-h: 3.75rem;      /* barre d'actions mobile */
  --z-entete: 80;
  --z-menu: 70;
  --z-barre: 60;
  --z-curseur: 95;

  /* --- Thème par défaut : nuit -------------------------------------- */
  --fond: var(--noir);
  --texte: var(--creme);
  --texte-doux: var(--creme-doux);
  --accent: var(--or);
  --accent-titre: var(--or-satin);
  --degrade: var(--or-degrade);
  --trait: rgba(200, 159, 88, .22);
  --trait-fort: rgba(238, 231, 217, .3);

  color-scheme: dark;
}
@media (min-width: 1100px) {
  :root { --entete-h: 5.75rem; --bandeau-h: 2rem; }
}


/* =============================================================================
   03. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete-h) + 1.5rem);
  background: var(--noir);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .005em;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
hr { border: 0; height: 1px; background: var(--trait); margin: 0; }
::selection { background: var(--or); color: var(--noir); }
/* L'attribut hidden l'emporte toujours, même sur un composant en grid ou flex */
[hidden] { display: none !important; }
:focus-visible {
  outline: 2px solid var(--or-clair);
  outline-offset: 3px;
}
.fond-ivoire :focus-visible, .fond-sable :focus-visible { outline-color: var(--or-fonce); }

/* Lien d'évitement (accessibilité clavier) */
.evitement {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  padding: .9rem 1.4rem;
  background: var(--or); color: var(--noir);
  font-size: var(--t-label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  translate: 0 -200%;
  transition: translate var(--duree-1) var(--ease-luxe);
}
.evitement:focus { translate: 0 0; }


/* =============================================================================
   04. THÈMES DE SECTION
   Chaque section porte un fond. Les composants lisent les variables
   (--texte, --accent, --trait…) et s'adaptent seuls au fond.
   .fond-noir    noir profond (défaut du site)
   .fond-noir-2  noir alterné, pour enchaîner deux sections sombres
   .fond-ivoire  lin clair, sections de lecture
   .fond-sable   ivoire plus dense, pour alterner avec .fond-ivoire
   .fond-nuit    bleu nuit de la maison : UNE section par page au plus (citation…)
   ========================================================================== */
.fond-noir, .fond-noir-2, .fond-nuit {
  --texte: var(--creme);
  --texte-doux: var(--creme-doux);
  --accent: var(--or);
  --accent-titre: var(--or-satin);
  --degrade: var(--or-degrade);
  --trait: rgba(200, 159, 88, .22);
  --trait-fort: rgba(238, 231, 217, .3);
  color-scheme: dark;
  background-color: var(--fond);
  background-image: var(--grain);
  color: var(--texte);
}
.fond-noir { --fond: var(--noir); }
.fond-noir-2 { --fond: var(--noir-2); }
.fond-nuit {
  --fond: var(--nuit);
  --texte-doux: #B9B5AC;
  --trait: rgba(200, 159, 88, .3);
  background-image: var(--grain), radial-gradient(120% 90% at 50% 0%, var(--nuit-2), var(--nuit) 70%);
}
.fond-ivoire, .fond-sable {
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --accent: var(--or-fonce);
  --accent-titre: var(--or-fonce);
  --degrade: var(--or-degrade-fonce);
  --trait: rgba(126, 95, 39, .28);
  --trait-fort: rgba(25, 23, 19, .32);
  color-scheme: light;
  background-color: var(--fond);
  color: var(--texte);
}
.fond-ivoire { --fond: var(--ivoire); }
.fond-sable { --fond: var(--sable); }


/* =============================================================================
   05. TYPOGRAPHIE
   Titres : Bodoni Moda 400, interlignage serré, italique pour l'accent (<em>).
   Texte : Jost 400. Labels : Jost 500 en capitales espacées.
   Règle : un titre ne se termine jamais par un point.
   ========================================================================== */
h1, h2, h3, h4,
.t-display, .t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--f-titre);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.012em;
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
.t-display { font-size: var(--t-display); line-height: .96; letter-spacing: -.022em; }
h1, .t-h1   { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.018em; }
h2, .t-h2   { font-size: var(--t-h2); line-height: 1.06; }
h3, .t-h3   { font-size: var(--t-h3); line-height: 1.16; letter-spacing: -.005em; }
h4, .t-h4   { font-size: var(--t-h4); line-height: 1.3; letter-spacing: 0; }

/* L'italique de la didone porte l'émotion : un ou trois mots par titre. */
:is(h1, h2, h3, h4, .t-display, .t-h1, .t-h2, .t-h3, .t-h4) em {
  font-style: italic;
  color: var(--accent-titre);
  letter-spacing: -.01em;
}

/* Or sublimé appliqué au texte (titres, chiffres, signature). */
.dore {
  background-image: var(--degrade);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

p { text-wrap: pretty; }
strong, b { font-weight: 500; }
small { font-size: var(--t-petit); }

.chapeau {
  font-size: var(--t-chapeau);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .002em;
  color: var(--texte);
  max-width: 40em;
}
.texte-doux { color: var(--texte-doux); }
.label {
  font-family: var(--f-texte);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .28em;
  text-transform: uppercase;
}

/* Bloc de lecture : paragraphes, listes, liens soulignés d'or */
.prose { max-width: var(--mesure); color: var(--texte-doux); }
.prose > * + * { margin-top: 1.15em; }
.prose strong { color: var(--texte); }
.prose a:not([class]) {
  color: var(--texte);
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1px no-repeat;
  transition: color var(--duree-1);
}
.prose a:not([class]):hover { color: var(--accent); }
.prose ul { list-style: none; display: grid; gap: .7em; }
.prose ul > li { position: relative; padding-left: 1.6em; }
.prose ul > li::before {
  content: "";
  position: absolute; left: 0; top: .78em;
  width: .8em; height: 1px;
  background: var(--accent);
}


/* =============================================================================
   06. MISE EN PAGE
   ========================================================================== */
.conteneur {
  width: min(100% - 2 * var(--marge), var(--max));
  margin-inline: auto;
}
.conteneur--large { width: min(100% - 2 * var(--marge), var(--max-large)); }
.conteneur--etroit { width: min(100% - 2 * var(--marge), var(--max-etroit)); }
.conteneur--plein { width: 100%; }

.section {
  position: relative;
  padding-block: var(--esp-section);
}
.section--serree { padding-block: var(--esp-9); }
.section--sans-haut { padding-top: 0; }
.section--sans-bas { padding-bottom: 0; }

/* Pile verticale : espace régulier entre enfants (réglable par --pile) */
.pile > * + * { margin-top: var(--pile, var(--esp-5)); }

/* Grilles ------------------------------------------------------------ */
.grille {
  display: grid;
  gap: var(--grille-v, clamp(2.5rem, 2rem + 2vw, 4rem)) var(--gouttiere);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  padding: 0;
}
@media (min-width: 700px) {
  .grille--2, .grille--3, .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Rythme éditorial : un élément sur deux descend */
  .grille--decalee > :nth-child(even) { margin-top: clamp(3rem, 6vw, 7rem); }
}
/* Grille 12 colonnes : chaque enfant choisit sa place avec --col.
   Exemple : <div style="--col: 2 / span 5">. Pleine largeur sous 900 px. */
@media (min-width: 900px) {
  .grille--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .grille--12 > * { grid-column: var(--col, 1 / -1); }
}

/* Rail : grille qui devient un défilement horizontal aimanté sous 700 px
   (s'ajoute à .grille--2/3/4). La page elle-même ne déborde jamais. */
@media (max-width: 699.98px) {
  .rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--marge));
    padding-inline: var(--marge);
    scroll-padding-inline: var(--marge);
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; }
}


/* =============================================================================
   07. BANDEAU « DÉMONSTRATION » · obligatoire en haut de chaque page
   ========================================================================== */
.bandeau {
  position: relative;
  z-index: 85;
  margin: 0;
  padding: .55rem var(--marge);
  background: #050504;
  border-bottom: 1px solid rgba(200, 159, 88, .18);
  color: rgba(238, 231, 217, .72);
  font-family: var(--f-texte);
  font-size: .6875rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .08em;
  text-align: center;
}
.bandeau strong { color: var(--or); font-weight: 500; }


/* =============================================================================
   08. EN-TÊTE · transparent sur l'ouverture, plein au défilement,
   masqué en descendant, rappelé en remontant (classes posées par app.js
   sur <html> : .est-defile, .entete-cache, .menu-ouvert).
   ========================================================================== */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-entete);
  color: var(--creme);
  transform: translateY(var(--decal));
  transition: translate .7s var(--ease-luxe), background-color .5s var(--ease-douce), border-color .5s;
  border-bottom: 1px solid transparent;
}
/* Voile haut : garde la lisibilité sur les photos lumineuses */
.entete::before {
  content: "";
  position: absolute;
  inset: 0 0 -3rem 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(11, 10, 8, .55), rgba(11, 10, 8, 0));
  pointer-events: none;
  transition: opacity .5s;
}
.est-defile .entete {
  background-color: rgba(11, 10, 8, .96);
  border-bottom-color: rgba(200, 159, 88, .16);
}
.est-defile .entete::before { opacity: 0; }
.entete-cache .entete { translate: 0 -105%; }
.menu-ouvert .entete {
  background-color: transparent;
  border-bottom-color: transparent;
  translate: 0 0;
}
.menu-ouvert .entete::before { opacity: 0; }

.entete__barre {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  height: var(--entete-h);
  transition: height .6s var(--ease-luxe);
}
@media (min-width: 1100px) {
  .est-defile .entete__barre { height: 4.5rem; }
}

/* Mot-symbole « Maison Solenne » : didone dorée, « Maison » en romain,
   « Solenne » en italique demi-gras, « CONCIERGERIE » en capitales espacées.
   Taille réglée par font-size. */
.marque {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .34em;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--creme);
  white-space: nowrap;
}
@media (min-width: 1100px) { .marque { font-size: 1.62rem; } }
.marque__nom {
  display: inline-flex;
  align-items: baseline;
  gap: .22em;
  font-family: var(--f-titre);
  font-weight: 400;
  letter-spacing: -.005em;
  background-image: var(--or-degrade);
  background-size: 200% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: background-position 1.4s var(--ease-luxe);
}
.marque__nom em { font-style: italic; font-weight: 600; letter-spacing: -.012em; }
.marque__nom .soleil { display: none; }
.marque__sous {
  font-family: var(--f-texte);
  font-size: .37em;
  font-weight: 500;
  letter-spacing: .6em;
  margin-right: -.6em;
  text-transform: uppercase;
  color: var(--creme);
}
.marque:hover .marque__nom { background-position: 100% 0; }

/* Navigation principale (≥ 1100 px) */
.nav { justify-self: center; display: none; }
.nav__liste {
  display: flex;
  gap: clamp(1.5rem, 2.4vw, 2.75rem);
  list-style: none;
}
.nav__lien {
  position: relative;
  display: inline-block;
  padding-block: .6rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--creme);
  transition: color var(--duree-1);
}
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .2rem;
  height: 1px;
  background: var(--or-degrade);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .7s var(--ease-luxe);
}
.nav__lien:hover { color: var(--or-clair); }
.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__lien[aria-current="page"] { color: var(--or-clair); }

.entete__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.75rem;
}
.entete__tel {
  display: none;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--creme);
  white-space: nowrap;
  transition: color var(--duree-1);
}
.entete__tel:hover { color: var(--or-clair); }
/* Spécificité renforcée (.entete …) : .bouton et .burger sont déclarés plus bas. */
.entete .entete__estimation { display: none; }

@media (min-width: 1100px) {
  .entete .nav { display: block; }
  .entete .entete__estimation { display: inline-flex; }
  .entete .burger { display: none; }
}
@media (min-width: 1320px) {
  .entete__tel { display: inline-block; }
}

/* Bouton menu (burger) */
.burger {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  min-height: 2.75rem;
  margin-right: -.5rem;
  padding: .5rem;
  background: none;
  border: 0;
  color: var(--creme);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.burger__traits {
  position: relative;
  width: 1.9rem;
  height: .55rem;
}
.burger__traits::before,
.burger__traits::after {
  content: "";
  position: absolute;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform .7s var(--ease-luxe), width .7s var(--ease-luxe);
}
.burger__traits::before { top: 0; width: 100%; }
.burger__traits::after { bottom: 0; width: 62%; }
.burger:hover .burger__traits::after { width: 100%; }
.menu-ouvert .burger__traits::before { transform: translateY(.25rem) rotate(35deg); }
.menu-ouvert .burger__traits::after { width: 100%; transform: translateY(-.25rem) rotate(-35deg); }

/* Sans JavaScript : en-tête posé (non fixe), navigation visible et repliée */
html:not(.js) .entete { position: absolute; }
html:not(.js) .burger { display: none; }
@media (max-width: 1099.98px) {
  html:not(.js) .entete__barre { grid-template-columns: 1fr; height: auto; padding-block: 1rem; gap: .5rem; }
  html:not(.js) .nav { display: block; justify-self: start; }
  html:not(.js) .nav__liste { flex-wrap: wrap; gap: .25rem 1.25rem; }
}


/* =============================================================================
   09. MENU PLEIN ÉCRAN (sous 1100 px)
   Rideau qui descend, liens en didone qui montent un à un,
   coordonnées et estimation en pied de menu.
   ========================================================================== */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: calc(var(--decal) + var(--entete-h) + clamp(1.5rem, 5vh, 3.5rem)) var(--marge) calc(1.75rem + env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--noir);
  background-image: var(--grain), radial-gradient(90% 60% at 100% 0%, rgba(26, 37, 80, .55), transparent 70%);
  color: var(--creme);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .9s var(--ease-rideau), visibility 0s linear .9s;
}
.menu-ouvert .menu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .9s var(--ease-rideau), visibility 0s;
}
@media (min-width: 1100px) { .menu { display: none; } }

.menu__decor.soleil {
  position: absolute;
  right: -28vw;
  top: 12%;
  width: 82vw;
  height: 82vw;
  opacity: .07;
  pointer-events: none;
  animation: tourne 90s linear infinite;
}
.menu__liste {
  list-style: none;
  display: grid;
  gap: .1rem;
  counter-reset: menu;
}
.menu__liste > li { overflow: hidden; }
.menu__lien {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding-block: .2rem;
  font-family: var(--f-titre);
  font-size: clamp(2.3rem, 1.4rem + 4.6vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--creme);
  translate: 0 110%;
  transition: translate .9s var(--ease-luxe), color var(--duree-1);
}
.menu__lien::before {
  counter-increment: menu;
  content: "0" counter(menu);
  min-width: 1.6rem;
  font-family: var(--f-texte);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--or);
  translate: 0 -.4em;
}
.menu__lien[aria-current="page"] { font-style: italic; color: var(--or-clair); }
.menu__lien:hover { color: var(--or-clair); }
.menu-ouvert .menu__lien { translate: 0 0; }
.menu-ouvert .menu__liste > li:nth-child(1) .menu__lien { transition-delay: .32s; }
.menu-ouvert .menu__liste > li:nth-child(2) .menu__lien { transition-delay: .38s; }
.menu-ouvert .menu__liste > li:nth-child(3) .menu__lien { transition-delay: .44s; }
.menu-ouvert .menu__liste > li:nth-child(4) .menu__lien { transition-delay: .50s; }
.menu-ouvert .menu__liste > li:nth-child(5) .menu__lien { transition-delay: .56s; }
.menu-ouvert .menu__liste > li:nth-child(6) .menu__lien { transition-delay: .62s; }
.menu-ouvert .menu__liste > li:nth-child(7) .menu__lien { transition-delay: .68s; }

.menu__pied {
  position: relative;
  margin-top: auto;
  padding-top: clamp(2rem, 5vh, 3rem);
  display: grid;
  gap: 1.5rem;
  opacity: 0;
  translate: 0 1.5rem;
  transition: opacity .6s var(--ease-douce), translate .9s var(--ease-luxe);
}
.menu__pied::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--or-filet);
}
.menu-ouvert .menu__pied { opacity: 1; translate: 0 0; transition-delay: .7s; }
.menu__contact { display: grid; gap: .35rem; font-size: .9rem; color: var(--creme-doux); }
.menu__tel {
  font-family: var(--f-titre);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--creme);
  font-variant-numeric: lining-nums;
}
.menu__reseaux { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.menu__pied .bouton { width: 100%; }


/* =============================================================================
   10. BOUTONS ET LIENS
   .bouton             or sublimé plein, le reflet glisse au survol
   .bouton--contour    filet d'or, se remplit au survol
   .bouton--petit      version compacte (en-tête)
   .lien-dore          lien souligné d'or avec flèche, le trait se retrace
   .fleche             flèche fine (à placer dans un bouton ou un lien)
   ========================================================================== */
.bouton {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: .9rem 2.1rem;
  border: 0;
  border-radius: 0;
  background-image: var(--or-degrade);
  background-size: 220% 100%;
  background-position: 0 0;
  color: var(--noir);
  font-family: var(--f-texte);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: background-position 1.1s var(--ease-luxe), color .4s, box-shadow .6s var(--ease-luxe);
}
.bouton:hover {
  background-position: 100% 0;
  box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(200, 159, 88, .55);
}
.bouton:active { transform: translateY(1px); }

.bouton--contour {
  background: transparent;
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.bouton--contour::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--or-degrade);
  background-size: 220% 100%;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .7s var(--ease-luxe);
}
.bouton--contour:hover {
  color: var(--noir);
  box-shadow: inset 0 0 0 1px transparent;
}
.bouton--contour:hover::before { transform: scaleY(1); }

.bouton--petit { min-height: 2.75rem; padding: .6rem 1.4rem; font-size: .66rem; }
.bouton--plein-largeur { width: 100%; white-space: normal; line-height: 1.55; }
/* Téléphone : un libellé long passe à la ligne au lieu de déborder */
@media (max-width: 699.98px) {
  .bouton { white-space: normal; max-width: 100%; line-height: 1.55; }
}

.fleche {
  position: relative;
  display: inline-block;
  flex: none;
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  transition: translate .7s var(--ease-luxe), width .7s var(--ease-luxe);
}
.fleche::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}
.fleche--gauche { rotate: 180deg; }
:is(.bouton, .lien-dore):hover .fleche { translate: .4rem 0; }

.lien-dore {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding-block: .6rem;
  color: var(--accent);
  font-family: var(--f-texte);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: color var(--duree-1);
}
.lien-dore::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .15rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
  transform-origin: left;
}
button.lien-dore { background: none; border: 0; padding-inline: 0; cursor: pointer; }
.lien-dore:hover { color: var(--texte); }
.lien-dore:hover::after { animation: retrace .9s var(--ease-luxe); }
@keyframes retrace {
  0%   { transform: scaleX(1); transform-origin: right; }
  45%  { transform: scaleX(0); transform-origin: right; }
  46%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* Groupe d'actions (bouton + lien) */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.25rem;
}


/* =============================================================================
   11. OUVERTURE DE PAGE (.hero)
   Photo plein cadre, voile dégradé, titre en bas à gauche.
   .hero--court pour les pages intérieures. L'image peut porter
   data-parallaxe. Le zoom lent d'entrée est automatique.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--bandeau-h) + var(--entete-h) + 3rem);
  padding-bottom: calc(clamp(3rem, 8vh, 6.5rem) + var(--barre-h));
  overflow: hidden;
  background: var(--noir);
  color: var(--creme);
  --texte: var(--creme);
  --texte-doux: var(--creme-doux);
  --accent: var(--or);
  --accent-titre: var(--or-satin);
}
@media (min-width: 1100px) { .hero { padding-bottom: clamp(3.5rem, 9vh, 7rem); } }
.hero--court { min-height: min(84svh, 56rem); }
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-zoom 3.2s var(--ease-luxe) both;
}
@keyframes hero-zoom { from { scale: 1.14; } }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(11, 10, 8, .5) 0%, rgba(11, 10, 8, .08) 28%, rgba(11, 10, 8, .18) 52%, rgba(11, 10, 8, .88) 100%),
    linear-gradient(90deg, rgba(11, 10, 8, .45) 0%, rgba(11, 10, 8, 0) 60%);
}
.hero__contenu {
  display: grid;
  justify-items: start;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}
/* Photo claire (toiture, ciel, façade blanche) : voile renforcé, partout */
.hero.hero--voile-fort::before {
  background:
    linear-gradient(180deg, rgba(11, 10, 8, .62) 0%, rgba(11, 10, 8, .3) 26%, rgba(11, 10, 8, .5) 52%, rgba(11, 10, 8, .93) 100%),
    linear-gradient(90deg, rgba(11, 10, 8, .6) 0%, rgba(11, 10, 8, 0) 68%);
}
/* Téléphone : le texte occupe les deux tiers bas de la photo, souvent sur
   du clair (ciel, feuillage, toiture) : voile plus dense dès le tiers. */
@media (max-width: 699.98px) {
  .hero::before {
    background: linear-gradient(180deg, rgba(11, 10, 8, .56) 0%, rgba(11, 10, 8, .3) 14%, rgba(11, 10, 8, .6) 32%, rgba(11, 10, 8, .92) 100%);
  }
}
/* Halo très doux derrière le petit texte posé sur photo (invisible sur le sombre) */
.hero :is(.surtitre, .chapeau, .ariane, .faits) { text-shadow: 0 1px 1.25rem rgba(11, 10, 8, .55); }
/* <picture> dans un cadre d'image : même cadre que l'<img>, parallaxe comprise */
.hero__media > picture,
.appel__fond > picture,
.cadre > picture { position: absolute; inset: 0; }
.hero__media > picture > img[data-parallaxe],
.appel__fond > picture > img[data-parallaxe],
.cadre > picture > img[data-parallaxe] { inset: -10% 0 auto 0; height: 120%; }
.hero__titre { max-width: 13em; }
.hero__titre.t-h1 { max-width: 15em; }
.hero .chapeau { max-width: 34em; color: var(--creme); }
.hero__defiler {
  position: absolute;
  right: var(--marge);
  bottom: clamp(3.5rem, 9vh, 7rem);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  color: var(--creme);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero__defiler::after {
  content: "";
  width: 1px;
  height: 4.5rem;
  background: linear-gradient(to bottom, var(--or-clair), transparent);
  transform-origin: top;
  animation: goutte 2.6s var(--ease-douce) infinite;
}
@keyframes goutte {
  0% { transform: scaleY(0); opacity: 1; }
  55% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@media (min-width: 1100px) { .hero__defiler { display: flex; } }


/* =============================================================================
   12. COMPOSANTS
   ========================================================================== */

/* --- Surtitre : filet d'or + numéro + libellé ------------------------- */
.surtitre {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--accent);
  font-family: var(--f-texte);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.surtitre::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 1px;
  background: currentColor;
}
.surtitre__num {
  font-family: var(--f-titre);
  font-size: 1.45em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: lining-nums;
}
.surtitre--centre { justify-content: center; }
.surtitre--centre::after {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 1px;
  background: currentColor;
}

/* --- Entête de section ------------------------------------------------- */
.entete-section {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  margin-bottom: clamp(3rem, 2rem + 4vw, 6.5rem);
}
.entete-section > h2, .entete-section > .titre { max-width: 16em; }
.entete-section > .lien-dore { justify-self: start; align-self: end; }
.entete-section--centre { justify-items: center; text-align: center; }
.entete-section--centre .chapeau { margin-inline: auto; }
@media (min-width: 1000px) {
  /* Titre à gauche, chapeau à droite, alignés en bas */
  .entete-section--partage {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: var(--gouttiere);
    align-items: end;
  }
  .entete-section--partage > .surtitre { grid-column: 1 / -1; }
  .entete-section--partage > .chapeau { grid-column: 2; padding-bottom: .5rem; }
}

/* --- Cadre d'image : ratio fixe, image couvrante, fond de chargement ---- */
.cadre {
  position: relative;
  display: block;          /* indispensable quand le cadre est un <a> */
  overflow: hidden;
  aspect-ratio: var(--ratio, 4 / 5);
  background: var(--noir-3);
}
.cadre > img,
.cadre > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.8s var(--ease-luxe);
}
/* Parallaxe : l'image déborde de 10 % en haut et en bas */
.cadre > img[data-parallaxe],
.hero__media > img[data-parallaxe],
.appel__fond > img[data-parallaxe] {
  inset: -10% 0 auto 0;
  height: 120%;
}
.legende {
  margin-top: .9rem;
  color: var(--texte-doux);
  font-size: .78rem;
  letter-spacing: .08em;
}
.cadre .legende {
  position: absolute;
  left: 1.25rem; bottom: 1.1rem;
  margin: 0;
  color: var(--creme);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

/* --- Duo : image et texte côte à côte ------------------------------- */
.duo {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
}
.duo__media { position: relative; }
.duo__texte { display: grid; gap: var(--esp-5); justify-items: start; }
.duo__texte > .actions { margin-top: var(--esp-4); }
.duo__vignette {
  position: absolute;
  right: -.5rem;
  bottom: -2.5rem;
  width: 42%;
  outline: clamp(.4rem, .8vw, .75rem) solid var(--fond);
}
@media (min-width: 900px) {
  .duo {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gouttiere);
  }
  .duo__media { grid-column: 1 / span 6; grid-row: 1; }
  .duo__texte { grid-column: 8 / span 5; grid-row: 1; }
  .duo--inverse .duo__media { grid-column: 7 / span 6; }
  .duo--inverse .duo__texte { grid-column: 1 / span 5; }
  .duo--large .duo__media { grid-column: 1 / span 7; }
  .duo--large .duo__texte { grid-column: 9 / span 4; }
  .duo--large.duo--inverse .duo__media { grid-column: 6 / span 7; }
  .duo--large.duo--inverse .duo__texte { grid-column: 1 / span 4; }
  .duo__vignette { right: -14%; bottom: -10%; width: 40%; }
  .duo--inverse .duo__vignette { right: auto; left: -14%; }
}

/* --- Carte (bien, service) : l'image d'abord, jamais de pictogramme ---- */
.carte {
  display: block;
  color: inherit;
}
.carte__media { margin-bottom: 1.5rem; }
.carte__lieu {
  color: var(--accent);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.carte__titre {
  margin-top: .65rem;
  font-size: var(--t-h3);
  line-height: 1.12;
}
.carte__titre span {
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
  transition: background-size .9s var(--ease-luxe);
  padding-bottom: .08em;
}
.carte__texte { margin-top: .8rem; color: var(--texte-doux); font-size: .95rem; max-width: 34em; }
/* Séparateurs : chaque élément porte son point ; la liste est décalée à
   gauche et rognée (clip-path) pour qu'aucun point n'ouvre une ligne. */
.carte__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 0;
  margin-top: .9rem;
  margin-left: calc(-1.7rem - 3px);
  clip-path: inset(-.5em -.5em -.5em calc(1.7rem + 3px));
  color: var(--texte-doux);
  font-size: .85rem;
  letter-spacing: .03em;
  list-style: none;
}
.carte__meta > *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 .85rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  translate: 0 -.1em;
}
.carte:hover .cadre img,
.carte:focus-visible .cadre img { scale: 1.06; transition-duration: 1.4s; }
.carte:hover .carte__titre span,
.carte:focus-visible .carte__titre span { background-size: 100% 1px; }

/* --- Chiffres (uniquement des données réelles : 15 %, 7 j/7, 30 km…) -- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--trait);
}
@media (min-width: 900px) { .chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chiffre {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: .9rem;
  padding: clamp(1.75rem, 1rem + 2.5vw, 3rem) 1rem clamp(1.75rem, 1rem + 2.5vw, 3rem) 0;
  border-bottom: 1px solid var(--trait);
}
.chiffre + .chiffre { padding-left: clamp(1rem, 2vw, 2rem); border-left: 1px solid var(--trait); }
@media (max-width: 899.98px) {
  .chiffre:nth-child(odd) { padding-left: 0; border-left: 0; }
}
.chiffre__valeur {
  font-family: var(--f-titre);
  font-size: clamp(2.75rem, 1.6rem + 4.4vw, 6rem);
  line-height: .95;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.chiffre__valeur small { font-size: .45em; letter-spacing: 0; }
.chiffre__libelle {
  color: var(--texte-doux);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* --- Défilant (ticker des villages, etc.) ----------------------------- */
.defilant {
  overflow: hidden;
  padding-block: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-block: 1px solid var(--trait);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.defilant__piste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  list-style: none;
}
.defilant__piste > * {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 3.1rem);
  line-height: 1.2;
  color: var(--texte);
}
.defilant__piste > *::after {
  content: "";
  width: .42em;
  height: .42em;
  margin-inline: clamp(1.4rem, 1rem + 2vw, 3rem);
  background: var(--degrade);
  -webkit-mask: var(--motif-soleil) center / contain no-repeat;
  mask: var(--motif-soleil) center / contain no-repeat;
}
.defilant.est-pret .defilant__piste {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: defile var(--defile-duree, 50s) linear infinite;
}
.defilant:hover .defilant__piste { animation-play-state: paused; }
@keyframes defile { to { transform: translate3d(-50%, 0, 0); } }

/* --- Citation (texte mis en exergue) ---------------------------------- */
.citation {
  display: grid;
  justify-items: center;
  gap: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  max-width: 58rem;
  margin-inline: auto;
  text-align: center;
}
.citation__texte {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.45rem, 1rem + 1.7vw, 2.6rem);
  line-height: 1.32;
  letter-spacing: -.008em;
  color: var(--texte);
  text-wrap: balance;
}
.citation__auteur {
  display: grid;
  gap: .4rem;
  justify-items: center;
}
.citation__nom {
  color: var(--accent);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.citation__source { color: var(--texte-doux); font-size: .85rem; letter-spacing: .04em; }
.etoiles {
  display: block;
  width: calc(5 * 1.25rem);
  height: 1rem;
  background: var(--degrade);
  -webkit-mask: var(--motif-etoile) 0 50% / 1.25rem 1rem repeat-x;
  mask: var(--motif-etoile) 0 50% / 1.25rem 1rem repeat-x;
}

/* --- Liste numérotée (services, étapes de la méthode) ------------------ */
.liste-num {
  list-style: none;
  border-top: 1px solid var(--trait);
}
.liste-num > li {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: .75rem 1.25rem;
  padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  border-bottom: 1px solid var(--trait);
}
.liste-num > li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--degrade);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-luxe);
}
.liste-num > li:hover::after { transform: scaleX(1); }
.liste-num__n {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}
.liste-num__titre { font-size: var(--t-h3); line-height: 1.15; }
.liste-num__texte { grid-column: 2; color: var(--texte-doux); max-width: 40em; }
@media (min-width: 900px) {
  .liste-num > li {
    grid-template-columns: 5rem minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--gouttiere);
    align-items: baseline;
  }
  .liste-num__texte { grid-column: 3; }
}

/* --- Mosaïque de photos (ouvre la visionneuse avec data-galerie) ------- */
.mosaique {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.5rem, .3rem + .6vw, .9rem);
}
.mosaique__item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--noir-3);
}
.mosaique__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.mosaique__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.6s var(--ease-luxe), opacity .6s;
}
.mosaique__item:hover img { scale: 1.05; }
@media (min-width: 900px) {
  .mosaique {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(12rem, 17vw, 19rem);
  }
  .mosaique__item,
  .mosaique__item:first-child { aspect-ratio: auto; }
  .mosaique__item:first-child { grid-column: span 2; grid-row: span 2; }
}
.mosaique__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* --- Engagements : promesses numérotées de la maison ------------------ */
.engagements { display: grid; list-style: none; border-top: 1px solid var(--trait); }
.engagement {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: .6rem;
  align-items: baseline;
  padding-block: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  border-bottom: 1px solid var(--trait);
}
.engagement__n {
  grid-row: span 2;
  color: var(--accent);
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.engagement__titre {
  color: var(--texte);
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem);
  line-height: 1.2;
  text-wrap: balance;
}
.engagement__texte { grid-column: 2; max-width: 32em; color: var(--texte-doux); }
@media (min-width: 900px) {
  .engagements:not(.engagements--pile) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gouttiere);
    border-top: 0;
  }
  .engagements:not(.engagements--pile) .engagement {
    grid-template-columns: none;
    align-content: start;
    row-gap: 1rem;
    padding: 2.25rem 0 0;
    border-bottom: 0;
    border-top: 1px solid var(--trait);
  }
  .engagements:not(.engagements--pile) .engagement__n { grid-row: auto; font-size: clamp(2.6rem, 1.4rem + 2.4vw, 4rem); }
  .engagements:not(.engagements--pile) .engagement__texte { grid-column: auto; }
}

/* --- Filet d'or avec soleil central (séparateur) ----------------------- */
.filet {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--accent);
}
.filet::before, .filet::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  opacity: .6;
}
.filet::after { background: linear-gradient(90deg, var(--accent), transparent); }
.filet .soleil { width: 1.1rem; height: 1.1rem; }

/* Motif soleil, utilisable partout : <span class="soleil" aria-hidden="true"></span> */
.soleil {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background: var(--or-degrade);
  background-size: 200% 200%;
  -webkit-mask: var(--motif-soleil) center / contain no-repeat;
  mask: var(--motif-soleil) center / contain no-repeat;
}
.soleil--tourne { animation: tourne 40s linear infinite; }
@keyframes tourne { to { rotate: 1turn; } }

/* --- Appel à l'action plein cadre -------------------------------------- */
.appel {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(92svh, 56rem);
  padding-block: var(--esp-section);
  overflow: hidden;
  text-align: center;
  color: var(--creme);
  --texte: var(--creme);
  --texte-doux: var(--creme-doux);
  --accent: var(--or);
  --accent-titre: var(--or-satin);
}
.appel__fond { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--noir); }
.appel__fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.appel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(11, 10, 8, .5), rgba(11, 10, 8, .82)),
    linear-gradient(180deg, rgba(11, 10, 8, .35), rgba(11, 10, 8, .35));
}
.appel__contenu { display: grid; justify-items: center; gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.appel__titre { max-width: 12em; }
.appel .chapeau { margin-inline: auto; color: var(--creme); }
.appel .actions { justify-content: center; margin-top: .5rem; }

/* --- Formulaire (prépare un message WhatsApp, voir app.js) ------------ */
.formulaire {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem var(--gouttiere);
}
@media (min-width: 700px) {
  .formulaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulaire > .champ--large,
  .formulaire > .formulaire__pied,
  .formulaire > fieldset { grid-column: 1 / -1; }
}
.champ { position: relative; }
.champ :is(input, select, textarea) {
  display: block;
  width: 100%;
  padding: 1.55rem 0 .7rem;
  border: 0;
  border-bottom: 1px solid var(--trait-fort);
  border-radius: 0;
  background: transparent;
  color: var(--texte);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.4;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--duree-1);
}
.champ textarea { min-height: 8.5rem; resize: vertical; }
.champ select {
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(-45deg, transparent 50%, var(--accent) 50%);
  background-position: calc(100% - .6rem) 62%, calc(100% - .25rem) 62%;
  background-size: .36rem .36rem;
  background-repeat: no-repeat;
}
.champ select option { background: var(--fond); color: var(--texte); }
.champ label {
  position: absolute;
  left: 0;
  top: 1.55rem;
  color: var(--texte-doux);
  font-size: 1.05rem;
  line-height: 1.4;
  transform-origin: left top;
  pointer-events: none;
  transition: transform .5s var(--ease-luxe), color var(--duree-1), letter-spacing .5s var(--ease-luxe);
}
.champ :is(input, textarea):focus + label,
.champ :is(input, textarea):not(:placeholder-shown) + label,
.champ select + label {
  transform: translateY(-1.35rem) scale(.7);
  color: var(--accent);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.champ::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--degrade);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--ease-luxe);
}
.champ:focus-within::after { transform: scaleX(1); }
.champ :is(input, select, textarea):focus-visible { outline: none; }
.formulaire fieldset { border: 0; margin: 0; padding: 0; }
.formulaire legend {
  margin-bottom: 1rem;
  padding: 0;
  color: var(--accent);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.choix { display: flex; flex-wrap: wrap; gap: .75rem; }
.choix label { position: relative; cursor: pointer; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix span {
  display: inline-block;
  padding: .7rem 1.2rem;
  border: 1px solid var(--trait-fort);
  font-size: .9rem;
  transition: border-color var(--duree-1), background-color var(--duree-1), color var(--duree-1);
}
.choix input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--fond); }
.choix input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.formulaire__pied { display: grid; gap: 1.25rem; justify-items: start; }
.formulaire__note { max-width: 44em; color: var(--texte-doux); font-size: .85rem; line-height: 1.6; }
.formulaire__retour:empty { display: none; }
.formulaire__retour { color: var(--accent); font-size: .95rem; }
/* Étiquette « à valider » (donnée à confirmer par le client) */
.a-valider {
  display: inline-block;
  padding: .15rem .55rem;
  border: 1px dashed var(--accent);
  color: var(--accent);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}


/* =============================================================================
   12b. FICHE LOGEMENT · motif identique pour les quatre biens
   Ordre : .hero--fiche → .fiche (texte + .reserve collante) → galerie
   (.mosaique) → .situation → .appel (réserver) → autres biens (.carte).
   ========================================================================== */

/* --- Fil d'Ariane (dans l'ouverture) ----------------------------------
   Chaque élément porte son tiret ; la liste est décalée à gauche et rognée,
   pour qu'un nom long passé à la ligne ne commence jamais par un tiret. */
.ariane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 0;
  margin-left: -3.3rem;
  clip-path: inset(-.6em -.6em -.6em calc(3.3rem - 6px));
  list-style: none;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.ariane li { white-space: nowrap; }
.ariane li::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  margin: 0 .9rem;
  background: var(--accent);
  vertical-align: middle;
  translate: 0 -.12em;
}
@media (max-width: 420px) { .ariane { letter-spacing: .2em; } }
.ariane a { color: var(--texte); transition: color var(--duree-1); }
.ariane a:hover { color: var(--or-clair); }
.ariane [aria-current] { color: var(--accent); }

/* --- Faits : ligne de caractéristiques en capitales ------------------- */
.faits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 0;
  margin-left: calc(-2rem - 3px);
  clip-path: inset(-.5em -.5em -.5em calc(2rem + 3px));
  list-style: none;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texte);
}
.faits > li::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 1rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  translate: 0 -.15em;
}

/* --- Ouverture de fiche : plein écran, pied filé d'or ------------------ */
.hero--fiche .hero__titre { max-width: 10em; }
/* Nom de bien long (« La Grande Bastide ») */
.hero--fiche .hero__titre--long { font-size: calc((var(--t-display) + var(--t-h1)) / 2); max-width: 12em; }
/* Téléphone : voile plus dense, le titre passe sur les reflets de la piscine */
@media (max-width: 699.98px) {
  .hero--fiche::before {
    background: linear-gradient(180deg, rgba(11, 10, 8, .55) 0%, rgba(11, 10, 8, .2) 20%, rgba(11, 10, 8, .6) 42%, rgba(11, 10, 8, .93) 100%);
  }
}
.hero__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem 2.5rem;
  width: 100%;
  margin-top: clamp(.25rem, 1vw, 1rem);
  padding-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-top: 1px solid rgba(238, 231, 217, .22);
}

/* --- Corps de fiche : texte à gauche, réservation collante à droite --- */
.fiche__grille {
  display: grid;
  gap: clamp(3.5rem, 3rem + 3vw, 5rem);
}
.fiche__texte { display: grid; gap: var(--esp-6); justify-items: start; min-width: 0; }
.fiche__texte > h2 { max-width: 14em; }
.fiche__sous { margin-top: var(--esp-6); }
@media (min-width: 1000px) {
  .fiche__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: clamp(3rem, 7vw, 8rem);
    align-items: start;
  }
  .fiche__aside { position: sticky; top: 7rem; }
}

/* Carte de réservation (à poser avec .fond-noir) */
.reserve {
  position: relative;
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}
.reserve::before {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 1px solid rgba(200, 159, 88, .28);
  pointer-events: none;
}
.reserve > * { position: relative; }
.reserve__titre { color: var(--accent); }
.reserve__nom { font-size: var(--t-h3); line-height: 1.12; }
.reserve__note { color: var(--texte-doux); font-size: .85rem; line-height: 1.6; }
.reserve__note a { color: var(--texte); white-space: nowrap; }
.reserve__note a:hover { color: var(--or-clair); }

/* Caractéristiques chiffrées : voyageurs, chambres, salles de bains */
.caracs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--trait);
}
.carac {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: .55rem;
  padding: 1.35rem .5rem 1.25rem 0;
}
.carac + .carac { padding-left: clamp(.75rem, 1.5vw, 1.25rem); border-left: 1px solid var(--trait); }
.carac dd {
  font-family: var(--f-titre);
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
  line-height: .95;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
}
.carac dt {
  color: var(--texte-doux);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* Équipements : liste filée, petit soleil d'or, aucun pictogramme rond */
.equipements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  width: 100%;
  list-style: none;
  border-top: 1px solid var(--trait);
}
@media (min-width: 700px) { .equipements { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.equipements > li {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.05rem .5rem 1.05rem 0;
  border-bottom: 1px solid var(--trait);
  color: var(--texte);
  font-size: .98rem;
  line-height: 1.4;
}
.equipements > li::before {
  content: "";
  flex: none;
  width: .75rem;
  height: .75rem;
  background: var(--degrade);
  -webkit-mask: var(--motif-soleil) center / contain no-repeat;
  mask: var(--motif-soleil) center / contain no-repeat;
}

/* --- Situation : commune en grand, repères (données réelles seulement) */
.situation { overflow: hidden; }
.situation__grille { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.situation__entete { display: grid; gap: var(--esp-6); justify-items: start; }
.situation__lieu {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: var(--t-display);
  line-height: .95;
  letter-spacing: -.025em;
  padding-right: .1em;
}
@media (min-width: 1000px) {
  .situation__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gouttiere); align-items: end; }
}
.reperes { border-top: 1px solid var(--trait); }
.repere {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--trait);
}
.repere dt {
  color: var(--texte-doux);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.repere dd {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.1;
  color: var(--accent-titre);
  text-align: right;
  font-variant-numeric: lining-nums;
}
.situation__decor.soleil {
  position: absolute;
  right: -12vw;
  top: -10vw;
  width: 42vw;
  height: 42vw;
  opacity: .05;
  pointer-events: none;
  animation: tourne 120s linear infinite;
}

/* =============================================================================
   13. PIED DE PAGE
   ========================================================================== */
.pied {
  position: relative;
  overflow: hidden;
  padding-top: var(--esp-section);
  padding-bottom: calc(1.75rem + var(--barre-h) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--trait);
}
@media (min-width: 1100px) { .pied { padding-bottom: 2rem; } }
.pied__haut {
  display: grid;
  gap: 2.5rem;
  justify-items: start;
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem);
}
.pied__accroche { max-width: 14em; }
.pied__appel { display: grid; gap: 1rem; justify-items: start; }
.pied__offre { color: var(--texte-doux); font-size: .85rem; letter-spacing: .04em; }
@media (min-width: 1000px) {
  .pied__haut { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .pied__appel { justify-items: end; text-align: right; }
}
/* Colonnes : la marque et ses coordonnées, puis le plan du site (COPY.md) */
.pied__colonnes {
  display: grid;
  gap: 3.5rem var(--gouttiere);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
  border-top: 1px solid var(--trait);
}
.pied__col--marque { display: grid; gap: 1.5rem; justify-items: start; align-content: start; }
.pied__plan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.75rem var(--gouttiere);
}
@media (min-width: 1000px) {
  /* Marque à gauche sur deux rangs ; à droite, le plan puis la zone */
  .pied__colonnes {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(3rem, 6vw, 7rem);
  }
  .pied__col--marque { grid-row: 1 / span 2; }
  .pied__plan { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pied__zone { grid-column: 2; align-self: end; }
}
.pied__devise { max-width: 22em; color: var(--texte-doux); font-size: .95rem; text-wrap: balance; }
.pied__titre {
  margin-bottom: 1.4rem;
  color: var(--accent);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.pied .pied__titre a { color: var(--accent); }
.pied__liste { list-style: none; display: grid; gap: .7rem; font-size: .95rem; line-height: 1.45; }
.pied a:not(.bouton):not(.marque):not(.lien-dore) { transition: color var(--duree-1); }
.pied a:not(.bouton):not(.marque):not(.lien-dore):hover { color: var(--or-clair); }
.pied__contact { display: grid; gap: 1.1rem; color: var(--texte-doux); font-size: .95rem; }
.pied__contact a:not(.lien-dore) { color: var(--texte); }
.pied__tel {
  font-family: var(--f-titre);
  font-size: 1.85rem;
  line-height: 1.1;
  font-variant-numeric: lining-nums;
}
.pied__reseaux { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.pied__reseaux .lien-dore { text-transform: none; letter-spacing: .06em; font-size: .85rem; }
/* Zone : une ligne de villages en italique, séparés par l'étoile d'or.
   Chaque nom porte son soleil ; la liste est décalée et rognée à gauche
   pour qu'aucun soleil n'ouvre une ligne. */
.pied__zone {
  display: grid;
  gap: .25rem;
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--trait);
}
.pied__villages {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 0;
  margin-left: -1.9em;
  clip-path: inset(-.5em -.5em -.5em 1.9em);
  list-style: none;
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem);
  line-height: 1.6;
  color: var(--texte);
}
.pied__villages > li { white-space: nowrap; }
.pied__villages > li::before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  margin: 0 .7em;
  background: var(--degrade);
  -webkit-mask: var(--motif-soleil) center / contain no-repeat;
  mask: var(--motif-soleil) center / contain no-repeat;
  vertical-align: middle;
  translate: 0 -.08em;
}
.pied__signature {
  margin: clamp(1rem, 3vw, 3rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-family: var(--f-titre);
  font-style: italic;
  font-weight: 500;
  font-size: min(22rem, 23vw);
  line-height: .9;
  letter-spacing: -.025em;
  white-space: nowrap;
  user-select: none;
}
.pied__signature .soleil { width: .64em; height: .64em; align-self: center; translate: 0 .07em; margin: 0 .01em 0 .02em; }
.pied__signature .dore { padding-right: .06em; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--trait);
  color: var(--texte-doux);
  font-size: .78rem;
  letter-spacing: .04em;
}
.pied__bas p { margin: 0; }
.pied__remonter { display: inline-flex; align-items: center; gap: .75rem; color: var(--texte); }
.pied__remonter .fleche { rotate: -90deg; width: 1.4rem; }


/* =============================================================================
   14. BARRE D'ACTIONS MOBILE (sous 1100 px) · Appeler / Estimer mon bien
   ========================================================================== */
.barre-mobile {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-barre);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--noir);
  border-top: 1px solid rgba(200, 159, 88, .3);
  transition: translate .7s var(--ease-luxe);
}
.barre-mobile a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  height: var(--barre-h);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.barre-mobile svg { width: 1.05rem; height: 1.05rem; flex: none; }
.barre-mobile__appel { color: var(--creme); }
.barre-mobile__estimation {
  background-image: var(--or-degrade);
  background-size: 220% 100%;
  color: var(--noir);
}
.menu-ouvert .barre-mobile,
.visionneuse-ouverte .barre-mobile { translate: 0 110%; }
@media (min-width: 1100px) { .barre-mobile { display: none; } }


/* =============================================================================
   15. CURSEUR « VOIR » (souris uniquement, créé par app.js)
   S'affiche sur tout élément [data-curseur]. Texte : valeur de l'attribut,
   « Voir » par défaut (ex. data-curseur="Agrandir").
   ========================================================================== */
.curseur {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-curseur);
  display: grid;
  place-items: center;
  width: 6.75rem;
  height: 6.75rem;
  margin: -3.375rem 0 0 -3.375rem;
  border-radius: 50%;
  background-image: var(--or-degrade);
  background-size: 200% 200%;
  color: var(--noir);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  scale: 0;
  opacity: 0;
  transition: scale .6s var(--ease-luxe), opacity .3s;
  will-change: transform;
}
.curseur.est-actif { scale: 1; opacity: 1; }
.curseur__texte { padding-left: .22em; }
.curseur-pret [data-curseur],
.curseur-pret [data-curseur] * { cursor: none; }


/* =============================================================================
   16. VISIONNEUSE · lightbox plein écran (<dialog> créé par app.js)
   ========================================================================== */
.visionneuse {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: rgba(8, 7, 6, .985);
  background-image: var(--grain);
  color: var(--creme);
  overflow: hidden;
}
.visionneuse[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: fondu-in .6s var(--ease-luxe) both;
}
.visionneuse.est-fermeture { animation: fondu-out .4s var(--ease-douce) both; }
.visionneuse::backdrop { background: rgba(8, 7, 6, .6); }
@keyframes fondu-in { from { opacity: 0; } }
@keyframes fondu-out { to { opacity: 0; } }
.visionneuse__haut {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem var(--marge);
}
.visionneuse__compte {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--f-titre);
  font-size: 1.1rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.visionneuse__compte span:last-child { color: var(--creme-doux); }
.visionneuse__sep { width: 2rem; height: 1px; background: var(--or); }
.visionneuse__titre {
  color: var(--or);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-align: center;
}
.visionneuse__fermer {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  min-height: 2.75rem;
  padding: .5rem 0 .5rem .5rem;
  background: none;
  border: 0;
  color: var(--creme);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.visionneuse__croix { position: relative; width: 1.5rem; height: 1.5rem; }
.visionneuse__croix::before, .visionneuse__croix::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: currentColor;
  rotate: 45deg;
  transition: rotate .6s var(--ease-luxe);
}
.visionneuse__croix::after { rotate: -45deg; }
.visionneuse__fermer:hover .visionneuse__croix::before { rotate: 135deg; }
.visionneuse__fermer:hover .visionneuse__croix::after { rotate: 45deg; }
.visionneuse__scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 var(--marge);
  touch-action: pan-y;
}
.visionneuse__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .45s var(--ease-douce), scale .9s var(--ease-luxe), translate .9s var(--ease-luxe);
}
.visionneuse__img.est-sortant { opacity: 0; scale: .985; }
.visionneuse__img.est-sortant[data-sens="suiv"] { translate: -1.5rem 0; }
.visionneuse__img.est-sortant[data-sens="prec"] { translate: 1.5rem 0; }
.visionneuse__bas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem var(--marge) calc(1.25rem + env(safe-area-inset-bottom));
}
.visionneuse__legende { color: var(--creme-doux); font-size: .85rem; letter-spacing: .04em; }
.visionneuse__navs { display: flex; gap: .75rem; }
.visionneuse__nav {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(200, 159, 88, .45);
  border-radius: 50%;
  background: transparent;
  color: var(--creme);
  transition: border-color var(--duree-1), background-color var(--duree-1), color var(--duree-1);
}
.visionneuse__nav:hover { background: var(--or); border-color: var(--or); color: var(--noir); }
.visionneuse__nav .fleche { width: 1.25rem; }
.visionneuse-ouverte, html:has(.visionneuse[open]) { overflow: hidden; }


/* =============================================================================
   17. RÉVÉLATIONS (activées seulement si app.js tourne : classe .js sur <html>)
   .revele          fondu et légère montée
   .revele-lignes   le texte monte ligne à ligne derrière un masque (titres)
   .revele-image    l'image se dévoile de bas en haut, en se resserrant
   .revele-image--gauche  dévoilement de gauche à droite
   data-delai="200" retard en ms (sinon cascade automatique)
   [data-trace]     SVG dont les traits se dessinent (clé, carte…)
   Sans JS, ou avec mouvement réduit, tout est visible tout de suite.
   ========================================================================== */
.js .revele:not(.est-visible) { opacity: 0; translate: 0 2rem; }
.revele {
  transition:
    opacity 1.2s var(--ease-douce) var(--delai, 0ms),
    translate 1.4s var(--ease-luxe) var(--delai, 0ms);
}

/* Ligne à ligne : app.js enveloppe chaque mot (.mot > .mot__in) et lui
   donne l'index de sa ligne (--i). */
.mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .08em .1em .16em;
  margin: -.08em -.1em -.16em;
}
.mot__in {
  display: inline-block;
  transition: transform 1.25s var(--ease-luxe);
  transition-delay: calc(var(--delai, 0ms) + var(--i, 0) * 95ms);
}
.js .revele-lignes:not(.est-visible) .mot__in { transform: translateY(112%); }
/* Ponctuation rattachée au mot précédent (app.js) : jamais en tête de ligne */
.mot__ponct { letter-spacing: 0; }
/* Or sublimé conservé après découpage */
.est-decoupe .dore, .est-decoupe.dore { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
.est-decoupe .dore .mot__in, .est-decoupe.dore .mot__in {
  background-image: var(--degrade);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.revele-image { transition: clip-path 1.5s var(--ease-rideau) var(--delai, 0ms); }
.revele-image img { transition: scale 2s var(--ease-luxe) var(--delai, 0ms); }
.js .revele-image:not(.est-visible) { clip-path: inset(100% 0 0 0); }
.js .revele-image--gauche:not(.est-visible) { clip-path: inset(0 100% 0 0); }
.js .revele-image:not(.est-visible) img { scale: 1.22; }
.revele-image.est-visible { clip-path: inset(0 0 0 0); }

[data-trace] :is(path, line, polyline, polygon, circle, ellipse, rect) {
  transition: stroke-dashoffset 2.6s var(--ease-douce) var(--delai, 0ms);
}
.js [data-trace]:not(.est-visible) :is(path, line, polyline, polygon, circle, ellipse, rect)[pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js [data-trace].est-visible :is(path, line, polyline, polygon, circle, ellipse, rect)[pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
/* SVG étiré (preserveAspectRatio="none") + trait non mis à l'échelle :
   la longueur réelle dépasse pathLength, on allonge le tiret. */
.js [data-trace]:not(.est-visible) [vector-effect="non-scaling-stroke"][pathLength] { stroke-dasharray: 1.5; stroke-dashoffset: 1.5; }
.js [data-trace].est-visible [vector-effect="non-scaling-stroke"][pathLength] { stroke-dasharray: 1.5; stroke-dashoffset: 0; }


/* =============================================================================
   18. TRANSITIONS DE PAGE
   Navigateurs récents : View Transitions entre documents (aucun JS).
   L'en-tête, le bandeau et la barre mobile restent immobiles,
   le contenu s'efface puis le nouveau monte.
   Repli (classe .vt-repli posée dans <head>) : fondu à l'arrivée et au départ.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .entete { view-transition-name: entete; }
  .bandeau { view-transition-name: bandeau; }
  .barre-mobile { view-transition-name: barre-mobile; }

  ::view-transition-old(root) { animation: vt-sortie .5s var(--ease-douce) both; }
  ::view-transition-new(root) { animation: vt-entree 1s var(--ease-luxe) .12s both; }
  ::view-transition-group(entete),
  ::view-transition-group(bandeau),
  ::view-transition-group(barre-mobile) { animation-duration: .5s; }

  .vt-repli body { animation: page-entree .9s var(--ease-luxe) both; }
  .vt-repli.sortie body { opacity: 0; transition: opacity .38s var(--ease-douce); }
}
@keyframes vt-sortie { to { opacity: 0; transform: translateY(-1rem); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(2.25rem); } }
@keyframes page-entree { from { opacity: 0; } }


/* =============================================================================
   19. UTILITAIRES
   ========================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.centre { text-align: center; }
.accent { color: var(--accent); }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: var(--esp-4); }
.mt-m { margin-top: var(--esp-6); }
.mt-l { margin-top: var(--esp-8); }
.mt-xl { margin-top: var(--esp-9); }
@media (max-width: 699.98px) { .masque-mobile { display: none !important; } }
@media (min-width: 700px) { .seulement-mobile { display: none !important; } }


/* =============================================================================
   20. MOUVEMENT RÉDUIT · état final immédiat, aucun déplacement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js .revele:not(.est-visible) { opacity: 1; translate: none; }
  .js .revele-lignes:not(.est-visible) .mot__in { transform: none; }
  .js .revele-image:not(.est-visible) { clip-path: none; }
  .js .revele-image:not(.est-visible) img { scale: 1; }
  .defilant.est-pret .defilant__piste { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .hero__media img { animation: none; }
}