/* --------------------------------------------------------------------------
   REGLE DE PARTAGE DES DEUX POLICES (mesuree le 21/10/2026)

   Melodrama ne sert qu'AU-DESSUS DE 30 px rendus : display, grands titres,
   citations, chiffres en exergue, filigrane. En dessous, ses futs fins et ses
   formes tres dessinees deviennent fatigantes, constate par Celestin sur les
   questions de la FAQ. Tout ce qui est plus petit revient a Switzer.
   Controle : controle-taille-serif.mjs, qui releve la taille REELLEMENT rendue
   de chaque porteur de la serif sur les 5 pages et deux largeurs.
   -------------------------------------------------------------------------- */
/* ==========================================================================
   Écurie de Beyrieux, AB Dressage
   Direction artistique « maison » : blanc cassé dominant, photographie plein cadre,
   typographie soutenue et très aérée. Display Melodrama, texte Switzer.
   ========================================================================== */

:root {
  --ivoire: #FBFAF7;        /* blanc cassé, fond dominant */
  --sable-pale: #F3F0E9;    /* sable très clair, sections alternées */
  --encre: #1B2836;
  --ardoise: #22364B;
  --nuit: #111C27;
  --accent: #3F5265;        /* ardoise claire, sourcils et chiffres sur fond clair */
  --clair: #D8D1C4;         /* sable clair, accent sur fond sombre */
  --clair-vif: #EAE4D8;
  --brume: #5E6C7C;
  --filet: rgba(27, 40, 54, 0.14);
  --filet-clair: rgba(216, 209, 196, 0.28);

  --serif: 'Melodrama', Georgia, serif;
  --sans: 'Switzer', 'Segoe UI', sans-serif;

  --page: 1280px;
  --page-large: 1560px;
  --colonne: 660px;
  --gouttiere: clamp(22px, 5vw, 80px);

  /* Le luxe tient au blanc : les respirations sont généreuses */
  --air-s: clamp(56px, 6vw + 10px, 96px);
  --air: clamp(96px, 8vw + 28px, 186px);
  --air-l: clamp(130px, 12vw + 30px, 260px);

  /* Registre équestre : des angles nets plutôt qu'arrondis */
  --rayon: 4px;
  --rayon-s: 3px;
  --rayon-l: 6px;
  --rayon-bouton: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* clip plutôt que hidden : hidden ferait du corps un conteneur de défilement
     et casserait le position: sticky de la scène du héros. */
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
figure { margin: 0; }

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(46px, 7.6vw, 122px);
  line-height: 1.02;
  letter-spacing: -0.012em;
}
.titre {
  font-size: clamp(33px, 4.4vw, 66px);
  line-height: 1.1;
  letter-spacing: -0.008em;
}
.titre-s {
  /* 24 px sur telephone : Switzer, la serif n'y tient pas */
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.004em;
}

/* La ligne d'appel, plus petite et plus grasse, posée au-dessus de la ligne
   principale : c'est elle qui donne le ton « maison ». */
.amorce {
  display: block;
  /* 23 px rendus dans un titre : Switzer, ce qui en fait un vrai sourcil et
     laisse la serif tenir seule la ligne principale */
  font-family: var(--sans);
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: 0.008em;
  line-height: 1.35;
  margin-bottom: 0.2em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

h1 + p, h2 + p, h3 + p, .titre + p, .display + p, .titre-s + p {
  margin-top: clamp(20px, 1.6vw, 30px);
}

.chapeau {
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.68;
  color: var(--encre);
}
.menu-fin { color: var(--brume); font-size: 15px; }
.discret { color: var(--brume); }

.sourcil {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}
.sombre .sourcil { color: var(--clair); }
/* Sur une photo, le sourcil gagne la teinte la plus claire de la palette */
.hero .sourcil, .hero-court .sourcil, .bande .sourcil { color: var(--clair-vif); }

.enveloppe { max-width: var(--page); margin: 0 auto; padding: 0 var(--gouttiere); }
.enveloppe-large { max-width: var(--page-large); margin: 0 auto; padding: 0 var(--gouttiere); }
.colonne-centree { max-width: var(--colonne); margin: 0 auto; text-align: center; }
.colonne-centree .sourcil { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Boutons et liens
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 34px;
  border-radius: var(--rayon-bouton);
  border: 1px solid var(--encre);
  background: var(--encre);
  color: var(--ivoire);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.bouton:hover { background: transparent; color: var(--encre); }

.bouton-fin {
  background: transparent;
  color: var(--encre);
  border-color: var(--filet);
}
.bouton-fin:hover { background: var(--encre); color: var(--ivoire); border-color: var(--encre); }

.sombre .bouton, .hero .bouton, .bande .bouton {
  background: var(--clair);
  border-color: var(--clair);
  color: var(--nuit);
}
.sombre .bouton:hover, .hero .bouton:hover, .bande .bouton:hover { background: transparent; color: var(--clair-vif); }
.sombre .bouton-fin, .hero .bouton-fin, .bande .bouton-fin {
  background: transparent;
  color: var(--ivoire);
  border-color: rgba(241, 238, 232, 0.4);
}
.sombre .bouton-fin:hover, .hero .bouton-fin:hover, .bande .bouton-fin:hover {
  background: var(--ivoire); color: var(--encre); border-color: var(--ivoire);
}

.bouton-compact { padding: 11px 22px; font-size: 13px; }

.lien-souligne {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--filet);
  transition: border-color 0.3s;
}
.lien-souligne:hover { border-color: var(--encre); }
.sombre .lien-souligne, .hero .lien-souligne, .bande .lien-souligne { color: var(--clair-vif); border-color: var(--filet-clair); }
.sombre .lien-souligne:hover, .hero .lien-souligne:hover, .bande .lien-souligne:hover { border-color: var(--clair); }

.actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 38px; }
.colonne-centree .actions { justify-content: center; }

/* --------------------------------------------------------------------------
   En-tête, posé sur la photo du héros
   -------------------------------------------------------------------------- */
.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  transition: background 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.entete-rang {
  max-width: var(--page-large);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
  height: 104px;
  display: flex;
  align-items: center;
  gap: 26px;
  transition: height 0.4s;
}
.entete.pose {
  background: rgba(241, 238, 232, 0.95);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--filet);
}
.entete.pose .nav a { color: var(--encre); }
.entete.pose .bascule { border-color: var(--filet); color: var(--encre); }
/* Plus spécifique que la règle du bouton posé sur la photo, sinon le bouton
   reste ivoire sur ivoire une fois l'en-tête posé. */
.entete.pose > .entete-rang > .bouton {
  background: var(--encre); border-color: var(--encre); color: var(--ivoire);
}
.entete.pose > .entete-rang > .bouton:hover { background: transparent; color: var(--encre); }
.entete.pose .entete-rang { height: 84px; }

/* La marque est le logo de l'écurie. Deux versions : le trait clair sur la
   photo du héros, le trait encre dès que l'en-tête se pose sur l'ivoire. */
.marque {
  display: block;
  margin-right: auto;
  line-height: 0;
  text-decoration: none;
}
.marque img {
  height: 80px;
  width: auto;
  transition: height 0.4s;
}
.marque .logo-sombre { display: none; }
.entete.pose .marque .logo-clair, .nav-ouverte .marque .logo-clair { display: none; }
.entete.pose .marque .logo-sombre, .nav-ouverte .marque .logo-sombre { display: block; }
.entete.pose .marque img { height: 62px; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav a {
  color: var(--ivoire);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, color 0.4s;
}
.nav a:hover, .nav a[aria-current='page'] { border-bottom-color: currentColor; }
.nav .bouton { display: none; }

.entete > .entete-rang > .bouton {
  background: transparent;
  border-color: rgba(241, 238, 232, 0.45);
  color: var(--ivoire);
}
.entete > .entete-rang > .bouton:hover { background: var(--ivoire); color: var(--encre); border-color: var(--ivoire); }

.bascule {
  display: none;
  width: 46px; height: 46px;
  border-radius: var(--rayon-bouton);
  background: none;
  border: 1px solid rgba(241, 238, 232, 0.45);
  color: var(--ivoire);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.bascule svg { width: 18px; height: 18px; }

@media (max-width: 1100px) {
  .nav, .entete > .entete-rang > .bouton { display: none; }
  .bascule { display: inline-flex; }
  .entete-rang { height: 86px; }
  .entete.pose .entete-rang { height: 76px; }
  .nav-ouverte { background: var(--ivoire); border-bottom-color: var(--filet); }
  .nav-ouverte .nav a { color: var(--encre); }
  .nav-ouverte .bascule { border-color: var(--filet); color: var(--encre); }
  .nav-ouverte .nav {
    display: flex;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ivoire);
    border-bottom: 1px solid var(--filet);
    padding: 10px var(--gouttiere) 30px;
  }
  .nav-ouverte .nav a { padding: 17px 0; border-bottom: 1px solid var(--filet); }
  .nav-ouverte .nav .bouton {
    display: inline-flex; justify-content: center; margin-top: 22px;
    background: var(--encre); border-color: var(--encre); color: var(--ivoire);
  }
}

/* Très petits écrans : la marque se resserre pour tenir à côté du menu */
@media (max-width: 1100px) {
  .marque img { height: 62px; }
  .entete.pose .marque img { height: 54px; }
}
@media (max-width: 430px) {
  .marque img { height: 52px; }
  .entete.pose .marque img { height: 46px; }
  .bascule { width: 42px; height: 42px; }
  .entete-rang { gap: 14px; }
}

/* --------------------------------------------------------------------------
   Héros plein cadre de l'accueil : la photo, et le titre seul en bas au centre.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: var(--nuit);
  color: var(--ivoire);
  text-align: center;
}
.hero-fond { position: absolute; inset: 0; }
.hero-fond img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-voile { position: absolute; inset: 0; background: rgba(10, 18, 26, 0.12); }
.hero-contenu {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1040px;
  /* 60 px au lieu de 84 au plus serre : le titre descend vers le bas du cadre,
     ou la rampe d'assombrissement est la plus forte, donc il gagne aussi en
     lisibilite. Mesure ensuite par controle-lisibilite. */
  padding: 0 var(--gouttiere) clamp(60px, 6.4vw, 108px);
}
/* Deux lignes, pas trois : la coupe naturelle tombe apres « passionnee », ce
   qui demande une colonne d'environ 36 signes. A 84 px cette ligne ferait
   1260 px, plus large que l'enveloppe : le corps descend donc a 66 px. */
.hero .display { color: var(--ivoire); margin-inline: auto; max-width: 100%; font-size: clamp(32px, 3.8vw, 54px); }
/* Dans le héros, la ligne d'appel passe en capitales espacées : elle annonce le
   métier, le titre en serif prend le relais. */
.hero .amorce {
  font-family: var(--sans);
  font-size: clamp(12.5px, 0.95vw, 15px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.6;
  margin-bottom: 1.9em;
  color: rgba(241, 238, 232, 0.92);
}

/* Le bloc qui prend la suite du héros : promesse, appel, note Google */
.accroche { text-align: center; max-width: 780px; margin: 0 auto; }
.accroche .chapeau { font-size: clamp(17.5px, 1.3vw, 21px); line-height: 1.68; }
.note-avis {
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  margin-top: 34px; font-size: 15px; color: var(--brume);
}
.note-avis b {
  font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1; color: var(--encre);
}

@media (max-width: 900px) {
  .hero { min-height: 92svh; }
  .hero-contenu { padding-bottom: clamp(64px, 12vw, 110px); }
}

/* Héros court des pages intérieures */
.hero-court {
  position: relative;
  justify-content: center;
  text-align: center;
  min-height: 64svh;
  display: flex;
  align-items: flex-end;
  color: var(--ivoire);
  overflow: hidden;
  background: var(--nuit);
}
/* Plein ecran : la section suivante n'apparait qu'au defilement. La photo doit
   etre recadree pour cette forme, sinon object-fit: cover rogne les cotes et
   emporte le sujet avec eux. Voir heroPremium dans heros.mjs. */
.hero-court.hero-plein { min-height: 100svh; }

.hero-court .hero-fond { position: absolute; inset: 0; }
.hero-court .hero-fond img { width: 100%; height: 100%; object-fit: cover; }
.hero-court .hero-contenu { padding-bottom: clamp(46px, 5vw, 84px); margin-inline: auto; }
.hero-court .titre { color: var(--ivoire); max-width: 19ch; margin-inline: auto; }
.hero-court .chapeau { color: rgba(241, 238, 232, 0.86); max-width: 52ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: var(--air) 0; }
.section-l { padding: var(--air-l) 0; }
.section-s { padding: var(--air-s) 0; }

.sable { background: var(--sable-pale); }
.sombre { background: var(--ardoise); color: var(--ivoire); }
.sombre .titre, .sombre .titre-s, .sombre .display, .sombre h3 { color: var(--ivoire); }
.sombre .chapeau, .sombre p { color: rgba(241, 238, 232, 0.84); }
.sombre .discret, .sombre .menu-fin { color: rgba(234, 228, 216, 0.76); }
.nuit { background: var(--nuit); color: var(--ivoire); }

/* Bloc arrondi posé sur le fond */
.cartouche { background: var(--sable-pale); border-radius: var(--rayon-l); padding: clamp(40px, 5vw, 86px); }
.cartouche-sombre { background: var(--ardoise); color: var(--ivoire); }

/* --------------------------------------------------------------------------
   Compositions d'images
   -------------------------------------------------------------------------- */
.media img { border-radius: var(--rayon); }
figcaption {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--brume);
}
.sombre figcaption { color: rgba(234, 228, 216, 0.74); }

.duo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 5vw, 96px);
  align-items: center;
}
.duo-inverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.duo-haut { align-items: start; }
@media (max-width: 920px) {
  .duo, .duo-inverse { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .media-dabord { order: -1; }
}

/* Composition décalée de deux photos */
.composition {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 30px);
  align-items: start;
}
.composition .c-grande { grid-column: 1 / span 7; }
.composition .c-petite { grid-column: 9 / span 4; margin-top: clamp(40px, 8vw, 130px); }
.composition img { border-radius: var(--rayon); width: 100%; }
@media (max-width: 860px) {
  .composition { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .composition .c-grande, .composition .c-petite { grid-column: auto; margin-top: 0; }
}

/* Bande immersive pleine largeur */
.bande {
  position: relative;
  min-height: clamp(380px, 56vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ivoire);
  text-align: center;
  background: var(--nuit);
}
.bande > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bande::after { content: ''; position: absolute; inset: 0; background: rgba(10, 18, 26, 0.44); }
.bande-contenu { position: relative; z-index: 2; max-width: 780px; padding: var(--air-s) var(--gouttiere); }

/* Sur une photo claire, le recadrage mobile remonte le sable et le ciel sous le
   texte : le voile se renforce a cette largeur, mesure par controle-lisibilite. */
@media (max-width: 760px) {
  .bande-dense::after { background: rgba(10, 18, 26, 0.62); }
}
.bande .titre { color: var(--ivoire); }
.bande .sourcil { color: var(--clair-vif); }
.bande p { color: rgba(241, 238, 232, 0.88); }

.bande-nue { line-height: 0; background: var(--ivoire); }
.bande-nue img { width: 100%; }

/* Filet tracé : une ligne d'horizon à peine ondulée, d'un bord à l'autre.
   Le trait garde son épaisseur quelle que soit la largeur de l'écran. */
.filet-trace { display: block; width: 100%; line-height: 0; }
.filet-trace svg { display: block; width: 100%; height: clamp(26px, 2.6vw, 44px); }
.filet-trace path {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}
.sombre .filet-trace path, .nuit .filet-trace path { stroke: var(--clair); opacity: 0.4; }

/* --------------------------------------------------------------------------
   Rail de cartes photo
   -------------------------------------------------------------------------- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
}
.carte-photo {
  position: relative;
  display: block;
  border-radius: var(--rayon);
  overflow: hidden;
  text-decoration: none;
  color: var(--ivoire);
  min-height: clamp(400px, 50vh, 580px);
  background: var(--nuit);
}
.carte-photo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.carte-photo:hover > img { transform: scale(1.045); }
.carte-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(10, 18, 26, 0.5);
}
.carte-photo-texte {
  position: relative; z-index: 2;
  padding: clamp(26px, 2.4vw, 38px);
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(400px, 50vh, 580px);
}
.carte-photo .sourcil { color: var(--clair-vif); margin-bottom: 10px; }
.carte-photo h3 { color: var(--ivoire); }
.carte-photo p { font-size: 15px; line-height: 1.55; color: rgba(241, 238, 232, 0.84); margin-top: 12px; }

@media (max-width: 900px) {
  .rail {
    grid-auto-columns: 78vw;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    padding-bottom: 14px;
    margin-right: calc(var(--gouttiere) * -1);
    padding-right: var(--gouttiere);
  }
  .carte-photo, .carte-photo-texte { min-height: 450px; }
}

/* --------------------------------------------------------------------------
   Fiche technique et listes
   -------------------------------------------------------------------------- */
.fiche { margin: 0; }
.fiche div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--filet);
}
.fiche div:first-child { border-top: 1px solid var(--filet); }
.fiche dt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); flex: none; padding-top: 5px;
}
.fiche dd { margin: 0; text-align: right; font-size: 16.5px; min-width: 0; }
/* Sur petit écran, la clé passe au-dessus de la valeur : un libellé long ne
   pousse plus la valeur hors de l'écran. */
@media (max-width: 560px) {
  .fiche div { flex-direction: column; gap: 5px; }
  .fiche dt { padding-top: 0; }
  .fiche dd { text-align: left; }
}
.sombre .fiche div, .hero .fiche div, .hero-court .fiche div { border-color: var(--filet-clair); }
.sombre .fiche dt, .hero .fiche dt, .hero-court .fiche dt { color: var(--clair); }
.sombre .fiche dd, .hero .fiche dd, .hero-court .fiche dd { color: var(--ivoire); }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-bottom: 1px solid var(--filet);
  line-height: 1.6;
}
.liste li:first-child { border-top: 1px solid var(--filet); }
.liste li::before {
  content: '';
  position: absolute; left: 0; top: 24px;
  width: 18px; height: 1px; background: var(--accent);
}
.sombre .liste li, .hero-court .liste li { border-color: var(--filet-clair); }
.sombre .liste li::before, .hero-court .liste li::before { background: var(--clair); }
.hero-court .liste li { color: rgba(241, 238, 232, 0.88); text-align: left; }
.hero-court .fiche { text-align: left; max-width: 620px; margin-inline: auto; }
.liste-deux { columns: 2; column-gap: clamp(30px, 4vw, 76px); }
.liste-deux li { break-inside: avoid; }
@media (max-width: 760px) { .liste-deux { columns: 1; } }

/* --------------------------------------------------------------------------
   Le rectangle de dressage, tracé au trait
   -------------------------------------------------------------------------- */
.plan { width: 100%; height: auto; display: block; margin: clamp(36px, 4vw, 64px) auto 0; max-width: 1040px; }
.plan .trait { fill: none; stroke: rgba(27, 40, 54, 0.42); stroke-width: 0.2; }
.plan .trait-fin { fill: none; stroke: rgba(27, 40, 54, 0.22); stroke-width: 0.13; stroke-dasharray: 1.2 1.2; }
.plan .lettre-plan {
  fill: var(--encre);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.9px;
  text-anchor: middle;
}
.plan .cote {
  fill: var(--accent);
  font-family: 'Switzer', sans-serif;
  font-size: 1.55px;
  font-weight: 600;
  letter-spacing: 0.16px;
  text-anchor: middle;
}
.sombre .plan .trait, .bande .plan .trait { stroke: rgba(234, 228, 216, 0.5); }
.sombre .plan .trait-fin, .bande .plan .trait-fin { stroke: rgba(234, 228, 216, 0.3); }
.sombre .plan .lettre-plan, .bande .plan .lettre-plan { fill: var(--clair-vif); }
.sombre .plan .cote, .bande .plan .cote { fill: var(--clair); }

.jeu-lettres { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.jeu-lettres span {
  width: 50px; height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-bouton);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--encre);
}
.sombre .jeu-lettres span { border-color: var(--filet-clair); color: var(--clair-vif); }

/* --------------------------------------------------------------------------
   Étapes
   -------------------------------------------------------------------------- */
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: e; }
.etapes li {
  counter-increment: e;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 56px);
  padding: clamp(28px, 3vw, 44px) 0;
  border-top: 1px solid var(--filet);
  align-items: start;
}
.etapes li:last-child { border-bottom: 1px solid var(--filet); }
.etapes li::before {
  content: counter(e, decimal-leading-zero);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  color: var(--accent);
}
.etapes h3 { margin-bottom: 10px; }
.etapes p { color: var(--brume); margin: 0; }
.sombre .etapes li { border-color: var(--filet-clair); }
.sombre .etapes li::before { color: var(--clair); }
.sombre .etapes p { color: rgba(241, 238, 232, 0.82); }
@media (max-width: 640px) {
  .etapes li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .etapes li::before { font-size: 30px; }
}

/* --------------------------------------------------------------------------
   Avis
   -------------------------------------------------------------------------- */
.citation {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.1vw, 48px);
  line-height: 1.26;
  letter-spacing: -0.006em;
  /* margin-block seulement : un margin: 0 écraserait le centrage automatique
     hérité de .colonne-centree et collerait le bloc à gauche. */
  margin-block: 0;
  margin-inline: auto;
  text-wrap: balance;
}
.citation-source {
  margin-top: 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.sombre .citation-source { color: var(--clair); }

.etoiles { display: inline-flex; gap: 6px; }
.etoiles svg { width: 15px; height: 15px; fill: var(--accent); }
.sombre .etoiles svg { fill: var(--clair); }

.note-large { display: flex; align-items: baseline; gap: 14px; justify-content: center; }
.note-large b {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(54px, 6vw, 92px); line-height: 1; color: var(--encre);
}
.sombre .note-large b { color: var(--clair-vif); }

.avis-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 64px);
}
.avis-trio blockquote {
  margin: 0;
  /* 18 a 21 px rendus : Switzer */
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.46;
}
.avis-trio .etoiles { margin-bottom: 20px; }
.avis-trio .citation-source { margin-top: 20px; font-size: 11px; }
@media (max-width: 880px) { .avis-trio { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Mosaïque
   -------------------------------------------------------------------------- */
.mosaique {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 1.6vw, 26px);
  align-items: start;
}
.mosaique figure img { border-radius: var(--rayon); width: 100%; }
.mosaique figure:nth-child(1) { grid-column: span 5; }
.mosaique figure:nth-child(2) { grid-column: span 4; margin-top: clamp(24px, 5vw, 86px); }
.mosaique figure:nth-child(3) { grid-column: span 3; }
.mosaique figure:nth-child(4) { grid-column: span 4; }
.mosaique figure:nth-child(5) { grid-column: span 3; margin-top: clamp(16px, 3vw, 54px); }
.mosaique figure:nth-child(6) { grid-column: span 5; }
@media (max-width: 760px) {
  .mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaique figure:nth-child(n) { grid-column: span 1; margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Questions fréquentes
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--filet); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 54px 30px 0;
  position: relative;
  /* 21 px rendus : sous le seuil de la serif, donc Switzer */
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute; right: 10px; top: 50%;
  width: 14px; height: 1px; background: var(--accent);
}
.faq summary::before {
  content: '';
  position: absolute; right: 16px; top: 50%;
  width: 1px; height: 14px; margin-top: -6.5px; background: var(--accent);
  transition: opacity 0.25s;
}
.faq details[open] summary::before { opacity: 0; }
.faq .reponse { padding: 0 clamp(0px, 7vw, 110px) 32px 0; color: var(--brume); }

/* FAQ sur deux colonnes : trois questions de chaque cote, plutot qu'une seule
   colonne qui court pendant que la moitie gauche de la page reste vide. */
.faq-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(40px, 5vw, 88px);
  align-items: start;
}
.faq-duo .faq summary { font-size: clamp(19px, 1.45vw, 23px); padding-right: 46px; }
.faq-duo .faq .reponse { padding-right: clamp(0px, 2vw, 28px); }

@media (max-width: 860px) {
  .faq-duo { grid-template-columns: minmax(0, 1fr); }
  .faq-duo .faq + .faq { border-top: 0; }
}

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */
/* minmax(0, 1fr) et non 1fr : une piste auto ou 1fr prend pour minimum le
   min-content de son contenu. Le <select> mesure 273 px de min-content, impose
   par sa plus longue option, et poussait tout le formulaire hors de l'ecran sur
   un telephone de 280 px. Seul minmax(0, ...) autorise la piste a retrecir. */
.formulaire { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
/* La rangee de l'etiquette est posee en dur : un accent qui deborde sa boite
   grossit sinon la rangee auto et decale le champ vers le bas. 11px x 1,75. */
.champ { display: grid; grid-template-rows: calc(11px * 1.75) auto; gap: 9px; }
/* Deux hauteurs etaient laissees au hasard, et la rangee « Votre nom /
   Telephone » se desalignait de 10 px :
   1. un E capitale accentue fait grandir la ligne de l'etiquette, parce que
      l'accent sort de la hauteur de capitale. « TELEPHONE » mesurait 29 px
      contre 19 pour « VOTRE NOM ». La hauteur est donc fixee, l'accent
      deborde sans pousser (overflow visible, il reste dessine).
   2. line-height: normal sur un champ depend de la police REELLEMENT utilisee,
      pas de celle declaree : 53 px d'un cote, 63 de l'autre. Une valeur
      explicite rend la hauteur identique partout. */
.champ label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent);
  display: block;
  line-height: 1.75;
  height: 1.75em;
}
/* Un champ de formulaire garde sa largeur intrinseque, autour de vingt
   caracteres : c'est la taille minimale automatique d'un item de grille
   (min-width: auto). width: 100% ne la leve pas. Sans min-width: 0 sur le champ
   ET sur ses conteneurs, le bord droit des champs sort de l'ecran sur les tres
   petits telephones, mesure a 10 px sur un Galaxy Fold ferme (280 px). */
.formulaire, .champ-duo, .champ { min-width: 0; }

.champ input, .champ textarea, .champ select {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--encre);
  background: var(--sable-pale);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-s);
  padding: 15px 18px;
  width: 100%;
  min-width: 0;
  line-height: 1.35;
}
/* 1,35em de ligne + 30 de padding + 2 de bordure : la meme hauteur pour un
   champ texte et un champ telephone, quoi que decide le navigateur. */
.champ input, .champ select { height: calc(1.35em + 32px); }
.champ textarea { min-height: 136px; resize: vertical; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.champ-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 620px) { .champ-duo { grid-template-columns: minmax(0, 1fr); } }
.mention { font-size: 13px; color: var(--brume); }

.sombre .champ label { color: var(--clair); }
.sombre .champ input, .sombre .champ textarea, .sombre .champ select {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--filet-clair);
  color: var(--ivoire);
}
.sombre .mention { color: rgba(234, 228, 216, 0.76); }

.coordonnees { display: grid; gap: 28px; }
/* Une adresse mail est un mot insecable : a 280 px elle mesure 209 px pour
   199 disponibles et sort de l'ecran. Un item de flex a lui aussi min-width:
   auto, donc le texte doit pouvoir se couper ET l'item retrecir. */
.coord-ligne { display: flex; gap: 18px; align-items: flex-start; margin: 0; }
.coord-ligne > span { min-width: 0; }
.coord-ligne a { overflow-wrap: anywhere; }
.coord-ligne svg { width: 19px; height: 19px; flex: none; margin-top: 5px; stroke: var(--accent); fill: none; stroke-width: 1.3; }
.coord-ligne strong {
  display: block; font-weight: 600; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.coord-ligne a { text-decoration-color: var(--filet); text-underline-offset: 4px; }
.sombre .coord-ligne svg { stroke: var(--clair); }
.sombre .coord-ligne strong { color: var(--clair); }
.sombre .coord-ligne a { color: var(--clair-vif); }

/* Barre d'appel mobile */
.appel-mobile {
  display: none;
  position: fixed; left: 14px; right: 14px; bottom: 14px;
  z-index: 80;
  background: var(--encre);
  color: var(--ivoire);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 16px;
  text-align: center;
  border-radius: var(--rayon-bouton);
  box-shadow: 0 12px 30px -12px rgba(17, 28, 39, 0.5);
}
@media (max-width: 760px) {
  .appel-mobile { display: block; }
  body { padding-bottom: 78px; }
}
/* Sous 300 px le libelle passait sur deux lignes, la barre montait a 81 px et
   depassait les 78 px reserves au bas du corps : elle recouvrait la fin de la
   page. Mesure sur un Galaxy Fold ferme. */
@media (max-width: 310px) {
  .appel-mobile { font-size: 12.5px; letter-spacing: 0.02em; padding: 15px 10px; }
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied { background: var(--nuit); color: rgba(241, 238, 232, 0.78); padding: var(--air-s) 0 0; overflow: hidden; }
.pied-grille {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: clamp(34px, 4vw, 80px);
  padding-bottom: 52px;
  border-bottom: 1px solid var(--filet-clair);
}
.pied img { width: 190px; margin-bottom: 24px; }
.pied h4, .pied .pied-titre { font-family: var(--sans); font-weight: 600; color: var(--ivoire); font-size: 20px; margin-bottom: 18px; }
.pied a { color: rgba(241, 238, 232, 0.78); text-decoration: none; }
.pied a:hover { color: var(--clair-vif); }
.pied-liens { display: grid; gap: 12px; font-size: 15px; }
.pied-bas {
  display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between;
  padding: 26px 0;
  font-size: 13px;
  color: rgba(241, 238, 232, 0.55);
}
.pied-signature {
  font-family: var(--serif);
  font-weight: 500;
  /* 11,5vw et non 12,6 : la valeur d'origine calait le filigrane pour remplir
     la ligne a 100 % exactement, a toutes les largeurs. Avec white-space:
     nowrap, la moindre variation coupait le dernier x : police de repli le
     temps du chargement, zoom du navigateur, barre de defilement. Mesure a
     92 % de remplissage, la serif du site comme Georgia. */
  font-size: clamp(32px, 11.5vw, 178px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: rgba(241, 238, 232, 0.1);
  white-space: nowrap;
  margin: 8px 0 -0.17em;
  user-select: none;
}
@media (max-width: 860px) { .pied-grille { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Révélations, en bonus : le contenu est visible par défaut
   -------------------------------------------------------------------------- */
.js-reveal { opacity: 1; }
/* --------------------------------------------------------------------------
   Animations : du relief, pas du spectacle

   Quatre gestes seulement, tous discrets, tous annules par
   prefers-reduced-motion. Le site reste entierement lisible sans JavaScript :
   ces regles ne vivent que sous body.anime, que le script ajoute.
   -------------------------------------------------------------------------- */

/* 1. Parallaxe. La photo glisse plus lentement que la page. L'agrandissement
      de 6 % donne la marge necessaire pour qu'aucun bord ne se decouvre quand
      elle bouge. La rampe d'assombrissement voyage avec l'image, donc le
      contraste du texte est remesure apres coup. */
/* remplace par la deuxieme passe, plus bas */

/* 2. Les photos se posent au lieu d'apparaitre : elles arrivent legerement
      agrandies et rejoignent leur taille. Donne du poids sans attirer l'oeil. */
/* remplace par le devoilement en volet, plus bas */

/* 3. Le filet dessine a la main se trace. C'est le geste signature du site :
      il mime la plume, et il ne dure qu'une seconde et demie. */
body.anime .filet-trace path { transition: stroke-dashoffset 1.6s cubic-bezier(0.33, 1, 0.68, 1); }

/* 4. Le grand titre du heros monte d'un peu plus bas et un peu plus lentement
      que le reste : c'est la premiere chose que l'on voit, elle merite son
      temps. */
body.anime .hero .display,
body.anime .hero-court .titre {
  opacity: 0;
  transform: translateY(26px);
  animation: monte 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
body.anime .hero .amorce,
body.anime .hero-court .chapeau {
  opacity: 0;
  animation: monte 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}
@keyframes monte { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body.anime [data-para] { transform: none; }
  body.anime .js-reveal figure.media img,
  body.anime figure.media.js-reveal img { transform: none; transition: none; }
  body.anime .filet-trace path { transition: none; stroke-dashoffset: 0 !important; }
  body.anime .hero .display, body.anime .hero-court .titre,
  body.anime .hero .amorce, body.anime .hero-court .chapeau {
    opacity: 1; transform: none; animation: none;
  }
}

/* --------------------------------------------------------------------------
   Deuxieme passe : le relief se voyait a peine, on monte le niveau.
   -------------------------------------------------------------------------- */

/* L'agrandissement passe de 6 a 12 % : il faut cette marge pour que la photo
   puisse glisser de 54 px sans jamais decouvrir un bord. */
body.anime [data-para] {
  will-change: transform;
  transform: scale(1.12) translate3d(0, var(--para, 0px), 0);
}

/* Les photos se devoilent par le bas, derriere un volet qui se leve. Beaucoup
   plus visible qu'un simple agrandissement, et toujours sobre. */
body.anime figure.media.js-reveal img,
body.anime .js-reveal figure.media img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path 1.25s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
body.anime figure.media.js-reveal.vu img,
body.anime .js-reveal.vu figure.media img {
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* Le grand titre se leve mot a mot, chacun derriere son propre volet. C'est le
   geste le plus visible du site, reserve au heros. */
body.anime .mot { display: inline-block; overflow: hidden; vertical-align: bottom; }
body.anime .mot > span {
  display: inline-block;
  transform: translateY(104%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--retard, 0ms);
}
body.anime .mot.leve > span { transform: none; }

/* Les douze lettres du rectangle tombent une par une. */
body.anime .jeu-lettres span {
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--retard, 0ms);
}
body.anime .jeu-lettres.vu span { opacity: 1; transform: none; }

/* Les photos de carte respirent au survol. */
.carte-photo { overflow: hidden; }
.carte-photo > img { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.carte-photo:hover > img, .carte-photo:focus-within > img { transform: scale(1.055); }

figure.media { overflow: hidden; border-radius: var(--rayon); }
figure.media img { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
figure.media:hover img { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
  body.anime [data-para] { transform: none; }
  body.anime figure.media.js-reveal img,
  body.anime .js-reveal figure.media img { clip-path: none; transform: none; transition: none; }
  body.anime .mot { overflow: visible; }
  body.anime .mot > span { transform: none; transition: none; }
  body.anime .jeu-lettres span { opacity: 1; transform: none; transition: none; }
  .carte-photo > img, figure.media img { transition: none; }
  .carte-photo:hover > img, figure.media:hover img { transform: none; }
}

body.anime .js-reveal { opacity: 0; transform: translateY(30px); }
body.anime .js-reveal.vu {
  opacity: 1; transform: none;
  transition: opacity 0.95s ease, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  body.anime .js-reveal { opacity: 1; transform: none; }
}

.saut-contenu { position: absolute; left: -9999px; }
.saut-contenu:focus {
  left: 14px; top: 14px; z-index: 100;
  background: var(--encre); color: var(--ivoire);
  padding: 13px 22px; border-radius: var(--rayon-bouton);
}

/* --------------------------------------------------------------------------
   Impression : la page doit rester utilisable sur papier
   -------------------------------------------------------------------------- */
@media print {
  .entete, .appel-mobile, .hero-fond, .hero-voile, .bande > img, .bande-nue, .filet-trace,
  .carte-photo > img, .pied-signature { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .hero-court, .bande, .sombre, .nuit, .pied { background: #fff !important; color: #000 !important; }
  .hero .display, .hero-court .titre, .bande .titre, .sombre .titre, .sombre .titre-s,
  .sombre p, .bande p, .hero .chapeau, .hero-court .chapeau, .pied, .pied a { color: #000 !important; }
  .hero, .hero-court { min-height: 0; padding: 0; }
  .section, .section-l, .section-s { padding: 18pt 0; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .carte-photo, .carte-photo-texte { min-height: 0; color: #000; }
  .carte-photo::after { display: none; }
}