/* ==========================================================================
   CEZOPE DESIGN — feuille de style unique
   Palette echantillonnee directement dans BRANDBOOK CEZOPE.png
   Aucune dependance, aucun framework.
   ========================================================================== */

/* --------------------------------------------------------- 1. Jetons */
:root {
  /* Couleurs de marque */
  --noir:        #000000;
  --noir-1:      #080808;   /* surfaces alternees */
  --noir-2:      #101010;   /* cartes */
  --noir-3:      #191919;   /* cartes survolees */
  --emeraude:    #032D2D;   /* brandbook */
  --emeraude-2:  #0C4642;   /* interactif : boutons, nav active */
  --emeraude-3:  #1E7A71;   /* survol, focus, liens */
  --bordeaux:    #39090A;   /* brandbook */
  --bordeaux-2:  #5C1416;   /* interactif */
  --gris:        #BBBBBB;   /* brandbook, texte secondaire */
  --creme:       #E4DCDC;   /* brandbook, texte principal */
  --or:          #C3A26B;   /* filets, encadres, accents */
  --or-fin:      rgba(195, 162, 107, .30);
  --or-tres-fin: rgba(195, 162, 107, .16);
  --creme-fin:   rgba(228, 220, 220, .14);

  /* Typographies */
  --titre: "Julius Sans One", "Optima", "Gill Sans", sans-serif;
  --corps: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Mesures */
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --largeur: 1560px;
  --largeur-texte: 80ch;
  --section: clamp(4.5rem, 11vh, 8.5rem);
  --rayon: 2px;

  /* Mouvement */
  --t: .5s cubic-bezier(.22, .61, .36, 1);
  --t-court: .25s ease;

  color-scheme: dark;
}

/* --------------------------------------------------------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* La place de la barre de defilement est reservee en permanence. Sans cela,
     etirer la section des realisations fait apparaitre la barre, qui retrecit
     la page, ce qui change la largeur des cartes, ce qui change la hauteur de
     la section : la mise en page ne converge jamais tout a fait. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--creme);
  font-family: var(--corps);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.75;
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  /* clip plutot que hidden : hidden ferait du body un conteneur de defilement,
     ce qui perturbe la reservation de la barre par scrollbar-gutter sur html
     et rendait la largeur disponible instable d'une mesure a l'autre. */
  overflow-x: clip;
}
body.menu-ouvert { overflow: hidden; }

img, picture, video, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--creme); text-decoration-color: var(--or-fin); text-underline-offset: .28em; }
a:hover { text-decoration-color: var(--creme); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--emeraude-3); color: #fff; }

/* --------------------------------------------------------- 3. Typographie */
h1, h2, h3, h4, .titre {
  font-family: var(--titre);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.22;
  letter-spacing: .16em;
  margin: 0 0 .6em;
  color: var(--creme);
}
h1, .t-h1 { font-size: clamp(1.9rem, 1.15rem + 3.1vw, 3.9rem); letter-spacing: .1em; line-height: 1.14; }
h2, .t-h2 { font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.5rem); letter-spacing: .17em; }
h3, .t-h3 { font-size: clamp(1.08rem, .98rem + .5vw, 1.4rem); letter-spacing: .19em; }
h4, .t-h4 { font-size: 1rem; letter-spacing: .2em; }

p { margin: 0 0 1.25em; max-width: var(--largeur-texte); }
p:last-child { margin-bottom: 0; }

.surtitre {
  font-family: var(--titre);
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: .72rem;
  color: var(--creme);
  margin: 0 0 1.5rem;
  display: block;
}
.chapo {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  font-weight: 300;
  color: var(--creme);
  line-height: 1.8;
}
.discret { color: var(--gris); font-size: .9rem; }
.centre { text-align: center; }
.centre p, .centre .chapo { margin-inline: auto; }

.signature {
  font-family: "Segoe Script", "Brush Script MT", cursive;
  text-transform: none;
  letter-spacing: .02em;
  color: var(--creme);
  font-size: clamp(1.3rem, 1.1rem + .9vw, 2rem);
  line-height: 1.4;
}

/* --------------------------------------------------------- 4. Structure */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.conteneur--etroit { max-width: 1080px; }

/* Accueil : aucune largeur maximale, les sections prennent tout l'ecran.
   Les paragraphes restent bornes par --largeur-texte, la lecture ne souffre pas.
   La valeur enorme plutot que "none" garde valides les calculs qui s'appuient
   sur --largeur, notamment le calage lateral de la rangee de projets. */
.pleine-largeur { --largeur: 100000px; }
.section { padding-block: var(--section); }
.section--dense { padding-block: clamp(3rem, 7vh, 5rem); }
/* Fiches de la page Realisations : rythme resserre, les projets s'enchainent
   sans grande respiration entre eux. */
.section--projet { padding-block: clamp(2.25rem, 5vh, 3.5rem); }
.section--noir-1 { background: var(--noir-1); }
.section--emeraude { background: var(--emeraude); }
.section--bordeaux { background: var(--bordeaux); }

.filet { border: 0; height: 1px; background: var(--or-fin); margin: 0; }
.filet--court {
  width: 64px; height: 1px; background: var(--or);
  margin: 0 0 2rem; border: 0;
}
.centre .filet--court { margin-inline: auto; }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--emeraude-2); color: var(--creme);
  padding: .9rem 1.4rem; z-index: 200;
  font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------- 5. Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  font-family: var(--corps);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.15rem 2.4rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  background: var(--emeraude-2);
  color: var(--creme);
  cursor: pointer;
  transition: background var(--t-court), border-color var(--t-court), transform var(--t-court);
  text-align: center;
}
.btn:hover, .btn:focus-visible { background: var(--emeraude-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--bordeaux { background: var(--bordeaux-2); }
.btn--bordeaux:hover, .btn--bordeaux:focus-visible { background: #74191c; }

.btn--fantome { background: transparent; border-color: var(--or-fin); color: var(--creme); }
.btn--fantome:hover, .btn--fantome:focus-visible {
  background: transparent; border-color: var(--creme); color: var(--creme);
}

.btn--large { width: 100%; }
.btn--petit { padding: .8rem 1.6rem; font-size: .74rem; }

.groupe-btn { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.centre .groupe-btn { justify-content: center; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--titre);
  text-transform: uppercase; letter-spacing: .2em;
  font-size: .78rem;
  color: var(--creme);
  text-decoration: none;
  padding-block: .4rem;
}
.lien-fleche::after {
  content: ""; width: 26px; height: 1px; background: currentColor;
  transition: width var(--t-court);
}
.lien-fleche:hover::after, .lien-fleche:focus-visible::after { width: 46px; }

/* --------------------------------------------------------- 6. En-tete et navigation */
.entete {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--creme-fin);
}
/* Le flou est porte par un pseudo-element : applique sur .entete elle-meme,
   backdrop-filter en ferait le bloc conteneur du menu mobile en position fixed,
   qui se calerait alors sur la hauteur de l'en-tete au lieu du viewport. */
.entete::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.entete__interieur {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
  padding-block: .9rem;
}
.logo { display: inline-flex; flex-shrink: 0; }
.logo img { width: clamp(112px, 12vw, 148px); height: auto; }

.nav__liste {
  display: flex; align-items: center; gap: clamp(.4rem, 1.6vw, 1.4rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__lien {
  display: inline-block;
  font-family: var(--titre);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--creme);
  padding: .75rem 1rem;
  border: 1px solid transparent;
  transition: color var(--t-court), background var(--t-court), border-color var(--t-court);
  white-space: nowrap;
}
.nav__lien:hover { color: var(--creme); }
.nav__lien[aria-current="page"] { background: var(--emeraude-2); color: var(--creme); }
.nav__lien--cta { border-color: var(--or-fin); color: var(--creme); }
.nav__lien--cta:hover { background: var(--emeraude-2); color: var(--creme); border-color: var(--emeraude-2); }

.bascule-menu {
  display: none;
  width: 46px; height: 46px;
  background: transparent; border: 1px solid var(--creme-fin);
  border-radius: var(--rayon);
  cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.bascule-menu .barre,
.bascule-menu .barre::before,
.bascule-menu .barre::after {
  content: ""; display: block;
  width: 20px; height: 1px; background: var(--creme);
  transition: transform var(--t-court), opacity var(--t-court);
}
.bascule-menu .barre { position: relative; }
.bascule-menu .barre::before { position: absolute; top: -6px; }
.bascule-menu .barre::after  { position: absolute; top: 6px; }
.bascule-menu[aria-expanded="true"] .barre { background: transparent; }
.bascule-menu[aria-expanded="true"] .barre::before { transform: translateY(6px) rotate(45deg); }
.bascule-menu[aria-expanded="true"] .barre::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .bascule-menu { display: inline-flex; }
  .nav {
    /* --h-entete est mesuree en JS : la hauteur reelle de l'en-tete varie
       avec la taille du logo et la largeur de l'ecran. */
    position: fixed; inset: var(--h-entete, 96px) 0 0 0;
    background: var(--noir);
    padding: 2.5rem var(--gouttiere) 4rem;
    transform: translateY(-12px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-court), transform var(--t-court);
    overflow-y: auto;
  }
  .nav[data-ouvert="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lien {
    padding: 1.3rem .2rem;
    border-bottom: 1px solid var(--creme-fin);
    font-size: .95rem;
  }
  .nav__lien--cta { margin-top: 1.5rem; border: 1px solid var(--or-fin); text-align: center; }
}

/* --------------------------------------------------------- 7. Hero */
.hero {
  position: relative;
  min-height: clamp(520px, 82vh, 780px);
  display: grid; align-items: center;
  isolation: isolate;
  overflow: hidden;
}
/* Sur les pages a photo, le visuel remonte sous la barre de navigation :
   elle flotte dessus, translucide et floutee, au lieu de poser une bande noire
   au-dessus de l'image. Le contenu du hero recupere la hauteur de la barre en
   marge haute pour ne pas passer dessous.

   --h-entete est posee par le script (navigation / mesurerEntete). Le repli de
   91px correspond a la hauteur reelle de la barre : si le script tarde, le
   decalage est invisible plutot que d'un demi-ecran. */
.hero--sous-entete { margin-top: calc(-1 * var(--h-entete, 91px)); }
.hero--sous-entete .hero__contenu { padding-top: calc(5rem + var(--h-entete, 91px)); }
.hero--court { min-height: clamp(340px, 48vh, 460px); }
.hero__fond { position: absolute; inset: 0; z-index: -2; }
.hero__fond img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.52) 45%, rgba(0,0,0,.9) 100%);
}
.hero__contenu { text-align: center; padding-block: 5rem; }
.hero__contenu p { margin-inline: auto; }
.hero h1 { text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.hero .chapo { max-width: 62ch; margin-inline: auto; }
.hero .groupe-btn { margin-top: 2.5rem; justify-content: center; }

.hero__prix {
  font-family: var(--titre);
  font-size: clamp(1.1rem, .95rem + .8vw, 1.6rem);
  letter-spacing: .2em;
  color: var(--creme);
  margin: 1.8rem 0 0;
  text-transform: uppercase;
}

/* --------------------------------------------------------- 8. Mention presse dans l'en-tete
   La reference Marie Claire n'a plus de bandeau a elle : elle vit dans la barre
   de navigation, a cote du logo, sur toutes les pages. Un filet vertical la
   separe de la marque sans en faire un encart.
   Elle disparait sous 1080px : la barre y est deja serree entre le logo et le
   bouton de menu. */
.presse-entete {
  display: none;
  text-decoration: none;
  line-height: 1.25;
  padding-left: clamp(.9rem, 1.6vw, 1.5rem);
  border-left: 1px solid var(--creme-fin);
  margin-right: auto;
}
@media (min-width: 1080px) { .presse-entete { display: block; } }
.presse-entete__mention {
  display: block;
  font-family: var(--titre);
  text-transform: uppercase; letter-spacing: .26em;
  font-size: .58rem;
  color: var(--gris);
}
.presse-entete__titre {
  display: block;
  font-family: var(--titre);
  text-transform: uppercase; letter-spacing: .2em;
  font-size: .82rem;
  color: var(--creme);
}
.presse-entete[href]:hover .presse-entete__titre,
.presse-entete[href]:focus-visible .presse-entete__titre { text-decoration: underline; text-underline-offset: .3em; }


/* --------------------------------------------------------- 9. Grilles */
.grille { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.entete-section { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.entete-section p { margin-bottom: 0; }

/* --------------------------------------------------------- 10. Methode */
.methode { counter-reset: etape; }
/* Les trois temps viennent sous le duo photo/texte : une respiration les en
   separe, sans reprendre toute la hauteur d'une section. */
.methode--sous-duo { margin-top: clamp(2rem, 5vh, 3.5rem); }
.methode__carte {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--or-tres-fin);
  background: var(--noir-2);
  transition: border-color var(--t), background var(--t), transform var(--t);
}
/* Au survol, la case se remplit de l'emeraude du brandbook. */
.methode__carte:hover,
.methode__carte:focus-within {
  border-color: var(--or);
  background: var(--emeraude);
  transform: translateY(-3px);
}
.methode__carte:hover p,
.methode__carte:focus-within p { color: var(--creme); }
.methode__carte::before {
  counter-increment: etape;
  content: "0" counter(etape);
  font-family: var(--titre);
  font-size: .78rem; letter-spacing: .3em;
  color: var(--creme);
  display: block; margin-bottom: 1.4rem;
}
.methode__carte h3 { margin-bottom: .8rem; }
.methode__carte p { color: var(--gris); margin-bottom: 0; }

/* --------------------------------------------------------- 11. Cartes projet */
.projet { display: block; text-decoration: none; color: inherit; position: relative; }
.projet__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--noir-2);
  border: 1px solid var(--or-tres-fin);
}
.projet__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1), filter var(--t);
  filter: saturate(.94);
}
.projet:hover .projet__media img,
.projet:focus-visible .projet__media img { transform: scale(1.045); filter: saturate(1); }

/* Fiches projet : pas d'encadre. Le rythme vient de l'alternance des fonds
   et du blanc autour des photos, pas d'un rectangle dessine autour de chaque
   projet. Voir la demande client du 12/09 : « pas de rectangle fin autour ». */
.fiche-projet { border: 0; background: none; padding: 0; }
.fiche-projet__lignes { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 760px) { .fiche-projet__lignes { grid-template-columns: repeat(3, 1fr); } }
.fiche-projet__ligne h4 { color: var(--creme); margin-bottom: .5rem; }
.fiche-projet__ligne p { color: var(--gris); font-size: .95rem; margin: 0; }
/* Fiches rédigées en points (L'écrin de sable) : un souffle entre chaque point. */
.fiche-projet__ligne p + p { margin-top: .7rem; }
.fiche-projet__ligne strong { color: var(--creme); font-weight: 500; }

.galerie {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  margin-top: 2rem;
}
.galerie button {
  padding: 0; border: 0; background: none; cursor: zoom-in;
  aspect-ratio: 3 / 2; overflow: hidden;
}
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.galerie button:hover img { transform: scale(1.05); }

/* --------------------------------------------------------- 11 bis. Section a defilement horizontal
   Le scroll vertical de la page pilote le deplacement lateral de la rangee.
   Le cadre reste colle sous l'en-tete pendant toute la traversee, puis la page
   repart normalement. Pas de fleches, pas de clic : uniquement le scroll.

   Deux modes :
   - epingle (grand ecran, mouvement autorise) : hauteur de section etiree en JS,
     cadre en position sticky, piste deplacee en translate.
   - libre (mobile, ou mouvement reduit) : simple rangee qui defile au doigt.   */

.scroll-h { position: relative; }

/* Le decor du cadre reste volontairement compact : chaque pixel repris sur le
   titre, les marges et le pied part dans la hauteur des photos. */
.scroll-h__cadre {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(.9rem, 2vh, 1.6rem);
  padding-block: clamp(1.25rem, 3vh, 2.25rem);
}
.scroll-h[data-epingle="true"] .scroll-h__cadre {
  position: sticky;
  top: var(--h-entete, 91px);
  height: calc(100svh - var(--h-entete, 91px));
  overflow: hidden;
}

.scroll-h__entete { flex: 0 0 auto; }
.scroll-h__entete .surtitre { margin-bottom: .7rem; }
.scroll-h__entete h2 { margin-bottom: .4em; }
.scroll-h__entete .filet--court { margin-bottom: 0; }

/* La fenetre occupe toute la largeur de l'ecran : la rangee file jusqu'aux
   bords, mais la premiere et la derniere carte s'alignent sur le conteneur.
   Le calcul reproduit le centrage du conteneur, en pourcentage de la section
   et non en vw, pour ne pas compter la largeur de la barre de defilement. */
.scroll-h__fenetre {
  /* Exactement trois cartes visibles, calees sur la largeur du conteneur.
     La valeur exacte est posee en JS (fonction dimensionnerCartes) : un
     pourcentage ecrit ici se resoudrait contre la piste, le conteneur flex,
     et non contre la fenetre. Ce qui suit n'est qu'une valeur de secours,
     utilisee tant que le script n'a pas mesure, ou sans JavaScript. */
  --ecart: clamp(1rem, 2vw, 2rem);
  --carte: 30vw;

  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  padding-inline: max(var(--gouttiere), calc((100% - var(--largeur)) / 2 + var(--gouttiere)));
}
.scroll-h[data-epingle="true"] .scroll-h__fenetre {
  overflow: hidden;
  /* Les cartes sont calees en bas : toute la marge disponible se retrouve
     ainsi au-dessus, exactement la ou la photo centrale grandit. Centrees,
     elles n'en auraient eu que la moitie et le haut de la photo se serait
     fait rogner. */
  align-items: flex-end;
}

.scroll-h__piste {
  display: flex;
  align-items: stretch;
  gap: var(--ecart, clamp(1rem, 2vw, 2rem));
  will-change: transform;
}
/* Leger lissage du suivi, retire pour qui limite les animations : le
   deplacement colle alors exactement au scroll, sans inertie. */
@media (prefers-reduced-motion: no-preference) {
  .scroll-h[data-epingle="true"] .scroll-h__piste {
    transition: transform .12s linear;
  }
}

/* La largeur est posee en pixels par le script, en style inline.
   Aucune variable CSS dans flex-basis : la valeur y reste perimee quand la
   variable change en cours de vie de la page, meme face a un style inline.
   Ce qui suit n'est qu'un repli, utilise sans JavaScript. */
.scroll-h__item {
  flex: 0 0 auto;
  width: 30vw;
  text-align: center;
  --focus: 0;            /* 1 quand la carte est au centre de l'ecran */
}
.scroll-h__item .projet__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  /* --media-h est posee en JS : la photo occupe toute la hauteur disponible.
     Quand la variable n'existe pas, la declaration est invalide et simplement
     ignoree, le format portrait ci-dessus s'applique. */
  height: var(--media-h);
}

/* Meme principe colorimetrique que la mosaique des realisations : au repos la
   photo est en noir et blanc et assombrie, elle reprend couleur et lumiere
   quand on la met en avant. Ici la mise en avant a deux sources.

   1. Le scroll. Le projet qui arrive au centre grandit, retrouve ses couleurs
      et annonce son titre ; les autres s'effacent. L'accent suit le scroll en
      continu et culmine exactement quand un projet est cadre au milieu.
   2. Le survol, qui donne la couleur pleine et le titre a n'importe quelle
      carte, ou qu'elle soit dans la rangee.

   Le filtre porte sur l'image et non sur le cadre : pose sur le cadre, il
   aurait aussi desature le titre en surimpression.

   L'agrandissement est ancre sur le bas de la photo : en grandissant depuis
   son centre, elle depassait du cadre par le bas. Ancree en bas, elle ne monte
   que vers le haut, et tous les bas de photo restent sur la meme ligne. La
   place necessaire au-dessus est reservee par le script (division par 1,075). */
.scroll-h__item .projet__media {
  transform: scale(calc(1 + .075 * var(--focus)));
  transform-origin: center bottom;
  will-change: transform;
}
.scroll-h__item .projet__media img {
  filter: grayscale(calc(1 - var(--focus))) brightness(calc(.5 + .5 * var(--focus)));
  will-change: filter;
}
/* Le carre de --focus resserre l'apparition du titre sur le vrai centre. */
.scroll-h__item .titrage { opacity: calc(var(--focus) * var(--focus)); }

/* Au survol, couleur pleine et titre complet. Le transform: none annule
   l'agrandissement de l'image herite des cartes projet ordinaires : ici c'est
   le cadre entier qui grandit, pas l'image dans son cadre. */
.scroll-h__item .projet:hover .projet__media img,
.scroll-h__item .projet:focus-visible .projet__media img {
  filter: grayscale(0) brightness(1);
  transform: none;
}
.scroll-h__item .projet:hover .titrage,
.scroll-h__item .projet:focus-visible .titrage { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .scroll-h__item .projet__media,
  .scroll-h__item .projet__media img,
  .scroll-h__item .titrage {
    transition: transform .25s ease-out, filter .25s ease-out,
                opacity .25s ease-out;
  }
}

/* Curseur en point plutot que la fleche, sur toute la rangee de projets.
   Le point est dessine en SVG, avec un lisere sombre pour rester visible
   sur les photos claires. */
.scroll-h__fenetre,
.scroll-h__fenetre a {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='5' fill='%23E4DCDC' stroke='%23000' stroke-opacity='.35' stroke-width='1.5'/%3E%3C/svg%3E") 11 11, pointer;
}

/* Sous le seuil d'epinglage, une seule carte a la fois, en portrait. */
@media (max-width: 900px) {
  .scroll-h__item { width: min(78vw, 340px); }
  .scroll-h__item .projet__media { aspect-ratio: 3 / 4; }
}

/* Mode libre : la rangee redevient un simple defilement au doigt. */
.scroll-h[data-epingle="false"] .scroll-h__fenetre {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: max(var(--gouttiere), calc((100% - var(--largeur)) / 2 + var(--gouttiere)));
  padding-block: .25rem 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.scroll-h[data-epingle="false"] .scroll-h__fenetre::-webkit-scrollbar { display: none; }
.scroll-h[data-epingle="false"] .scroll-h__fenetre:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; }
.scroll-h[data-epingle="false"] .scroll-h__item { scroll-snap-align: start; }
.scroll-h[data-epingle="false"] .scroll-h__piste { transition: none; }

/* Sans JavaScript, la rangee reste consultable au doigt et a la barre native. */
.no-js .scroll-h__fenetre { overflow-x: auto; }

.scroll-h__pied {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem clamp(1.5rem, 3vw, 2.5rem);
}
.scroll-h__rail {
  position: relative; flex: 1 1 220px;
  height: 1px; background: var(--or-tres-fin);
}
.scroll-h__jauge {
  position: absolute; top: 0; left: 0; height: 1px;
  background: var(--or);
  width: 30%;
  transform-origin: left center;
  will-change: transform;
}
.scroll-h__aide {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gris); margin: 0; flex: 0 0 auto;
}

/* --------------------------------------------------------- 11 ter. Titrage revele
   Bloc partage par la mosaique des realisations et par le carrousel de
   l'accueil : le titre du projet et une fleche apparaissent en surimpression
   sur la photo. Le voile est porte par le bloc lui-meme, il apparait donc
   exactement avec le texte ; il est concentre au centre pour rendre le titre
   lisible sans reassombrir la photo qu'on vient justement d'eclaircir. */
.titrage {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(.9rem, 2.2vh, 1.5rem);
  padding: 1.25rem; text-align: center;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5), rgba(0, 0, 0, .1) 72%);
  opacity: 0;
  transition: opacity .45s ease;
}
.titrage__titre {
  margin: 0; max-width: 15ch;
  font-family: var(--titre); font-weight: 400;
  font-size: clamp(.95rem, .8rem + .45vw, 1.3rem);
  letter-spacing: .17em; text-transform: uppercase; line-height: 1.55;
  color: var(--creme);
}
.titrage__fleche {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--creme); border-radius: 50%;
  color: var(--creme);
}
.titrage__fleche svg { width: 15px; height: 15px; display: block; }
@media (prefers-reduced-motion: reduce) { .titrage { transition: none; } }

/* --------------------------------------------------------- 11 quater. Mosaique des realisations
   Page Realisations : les six projets forment une mosaique pleine largeur,
   sans gouttiere. Au repos chaque visuel est desature et assombri, la page
   respire. Au survol le projet reprend sa couleur et sa luminosite, son
   titrage s'annonce.
   Sur ecran tactile il n'y a pas de survol : les titres restent affiches et
   la luminosite est remontee. */
.mosaique { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 620px) { .mosaique { grid-template-columns: repeat(2, 1fr); } }
/* Trois tuiles par ligne, posées sur une grille de six colonnes : chaque tuile en
   occupe deux. Cette finesse permet de partager équitablement une dernière ligne
   incomplète, voir plus bas. */
@media (min-width: 980px) {
  .mosaique { grid-template-columns: repeat(6, 1fr); }
  .mosaique__projet { grid-column: span 2; }
}

.mosaique__projet {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3;
  text-decoration: none; color: inherit;
  background: var(--noir-2);
}
.mosaique__projet img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(.5);
  transition: filter .6s cubic-bezier(.22, .61, .36, 1);
}
.mosaique__projet:hover img,
.mosaique__projet:focus-visible img { filter: grayscale(0) brightness(1); }
.mosaique__projet:hover .titrage,
.mosaique__projet:focus-visible .titrage { opacity: 1; }

/* Nombre de projets qui ne tombe pas juste : la dernière tuile, seule sur sa
   ligne, s'étire en bandeau panoramique au lieu de laisser un trou dans la
   grille. Le décompte dépend du nombre de colonnes, d'où deux règles. */
@media (min-width: 620px) and (max-width: 979px) {
  .mosaique__projet:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
}
@media (min-width: 980px) {
  /* Un projet seul sur la dernière ligne : bandeau panoramique. */
  .mosaique__projet:last-child:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
  /* Deux projets sur la dernière ligne : chacun prend la moitié de la largeur, au
     format 2/1, ce qui garde exactement la hauteur des lignes pleines. */
  .mosaique__projet:nth-last-child(2):nth-child(3n+1),
  .mosaique__projet:last-child:nth-child(3n+2) { grid-column: span 3; aspect-ratio: 2 / 1; }
}

@media (hover: none) {
  .mosaique__projet img { filter: grayscale(0) brightness(.62); }
  .mosaique__projet .titrage { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mosaique__projet img { transition: none; }
}

/* --------------------------------------------------------- 12. Avant / apres */
.avant-apres {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 0;
  user-select: none;
  touch-action: pan-y;
}
.avant-apres img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avant-apres__apres { clip-path: inset(0 0 0 var(--position, 50%)); }
.avant-apres__poignee {
  position: absolute; top: 0; bottom: 0;
  left: var(--position, 50%);
  width: 1px; background: var(--or);
  pointer-events: none;
}
.avant-apres__poignee::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  border: 1px solid var(--or);
  background: rgba(0,0,0,.55);
  border-radius: 50%;
}
.avant-apres__curseur {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: ew-resize;
}
.avant-apres__curseur:focus-visible { opacity: .001; outline: 2px solid var(--or); outline-offset: -2px; }
.avant-apres__etiquette {
  position: absolute; bottom: 12px;
  font-family: var(--titre); font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase;
  background: rgba(0,0,0,.66); color: var(--creme);
  padding: .35rem .8rem; pointer-events: none;
}
.avant-apres__etiquette--g { left: 12px; }
.avant-apres__etiquette--d { right: 12px; }

/* --------------------------------------------------------- 13. Bloc portrait */
.portrait { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 860px) { .portrait { grid-template-columns: 5fr 6fr; } }
.portrait__media {
  position: relative;
  border: 1px solid var(--or-tres-fin);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.portrait__media img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 32%; }
.portrait__media--large { aspect-ratio: 16 / 9; }

/* --------------------------------------------------------- 13 bis. Duo de panneaux
   Module de base de la presentation : deux panneaux accoles, de meme hauteur,
   a angles droits. Une photo d'un cote, un aplat de texte de l'autre.
   La hauteur est donnee par le panneau de texte, la photo s'y aligne et se
   recadre, ce qui garde les deux bords parfaitement au meme niveau. */
.duo-panneaux {
  display: grid;
  gap: 0;
  align-items: stretch;
}
@media (min-width: 880px) {
  .duo-panneaux { grid-template-columns: 1fr 1fr; }
}
/* Duo de la methode : la photo prend plus de place que le texte, et monte
   plus haut. Le texte y est court, il n'a pas besoin de la moitie de l'ecran. */
@media (min-width: 880px) {
  .duo-panneaux--methode { grid-template-columns: 5fr 7fr; }
}
.duo-panneaux--methode .duo-panneaux__media { min-height: clamp(380px, 68vh, 740px); }

/* Deux duos empiles se touchent presque, comme dans la maquette. */
.duo-panneaux + .duo-panneaux { margin-top: clamp(.5rem, 1vh, .75rem); }

.duo-panneaux__media {
  position: relative;
  overflow: hidden;
  min-height: clamp(240px, 38vh, 420px);
}
.duo-panneaux__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.duo-panneaux__media--portrait img { object-position: 42% 24%; }

.duo-panneaux__texte {
  /* Le panneau citation est un blockquote : sans cette remise a zero, ses
     marges par defaut le retrecissent de 80 px et cassent l'alignement des
     deux panneaux. */
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Les duos touchent les bords de l'ecran : c'est ce padding qui tient lieu
     de marge de page pour le texte. */
  padding: clamp(1.75rem, 3.5vw, 3.5rem) clamp(1.5rem, 4vw, 4.5rem);
}
.duo-panneaux__texte--bordeaux { background: var(--bordeaux); }
.duo-panneaux__texte h2 { margin-bottom: .7em; }
.duo-panneaux__texte p { color: var(--creme); }
.duo-panneaux__texte .lien-fleche { margin-top: .8rem; align-self: flex-start; }

/* Panneau citation : ferre a droite, face a la photo qui le suit. */
.duo-panneaux__texte--citation { text-align: right; }
.duo-panneaux__texte--citation .lien-fleche { align-self: flex-end; }
.duo-panneaux__texte--citation p { margin-left: auto; }

.citation-forte {
  font-family: var(--titre);
  text-transform: none;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.15rem);
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--creme);
  max-width: 24ch;
  margin: 0;
}
.citation-suite {
  margin: clamp(1.25rem, 3vh, 2rem) 0 0;
  font-size: .95rem;
  color: var(--gris);
  max-width: 34ch;
}

@media (max-width: 879px) {
  /* Ferrer a droite un texte sur une colonne etroite nuit a la lecture. */
  .duo-panneaux__texte--citation { text-align: left; }
  .duo-panneaux__texte--citation p { margin-left: 0; }
  .duo-panneaux__texte--citation .lien-fleche { align-self: flex-start; }
}

/* --------------------------------------------------------- 14. Citation */
.citation {
  border-left: 2px solid var(--or);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--bordeaux);
  margin: 0;
}
.citation p {
  font-family: var(--titre);
  text-transform: none;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.75rem);
  line-height: 1.5; letter-spacing: .04em;
  color: var(--creme);
  margin: 0; max-width: none;
}
/* --------------------------------------------------------- 15. Encadre dore */
.encadre-or {
  border: 1px solid var(--or);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.4rem);
  background: rgba(195, 162, 107, .05);
  display: flex; gap: 1.2rem; align-items: flex-start;
}
.encadre-or__pastille {
  flex: 0 0 auto; width: 8px; height: 8px; margin-top: .7rem;
  background: var(--or); border-radius: 50%;
}
.encadre-or p {
  margin: 0;
  font-family: var(--titre); text-transform: uppercase;
  letter-spacing: .14em; font-size: .88rem; line-height: 1.7;
  color: var(--creme);
}

/* --------------------------------------------------------- 16. Offres */
.offre {
  border: 1px solid var(--or-tres-fin);
  background: var(--noir-2);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  display: flex; flex-direction: column; gap: 1.2rem;
  transition: border-color var(--t), transform var(--t);
}
.offre:hover { border-color: var(--or-fin); transform: translateY(-3px); }
.offre--phare { border-color: var(--or); background: linear-gradient(180deg, rgba(3,45,45,.5), var(--noir-2)); }
.offre__prix {
  font-family: var(--titre);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  letter-spacing: .12em; color: var(--creme);
}
.offre__prix small {
  display: block; font-size: .68rem; letter-spacing: .2em;
  color: var(--gris); margin-top: .5rem;
}
.offre ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.offre li {
  position: relative; padding-left: 1.6rem;
  color: var(--gris); font-size: .95rem; line-height: 1.65;
}
.offre li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1px; background: var(--or);
}
.offre .btn { margin-top: auto; }
.offre__pour { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--creme); }

/* --------------------------------------------------------- 17. Avis */
.avis {
  border: 1px solid var(--or-tres-fin);
  background: var(--noir-2);
  padding: clamp(1.6rem, 3.5vw, 2.2rem);
  display: flex; flex-direction: column; gap: 1rem;
  margin: 0;
}
.avis__note { color: var(--creme); letter-spacing: .3em; font-size: .9rem; }
.avis blockquote { margin: 0; color: var(--creme); font-weight: 300; font-size: 1rem; line-height: 1.75; }
.avis figcaption {
  font-family: var(--titre); text-transform: uppercase;
  letter-spacing: .2em; font-size: .74rem; color: var(--gris);
  margin-top: auto;
}

/* --------------------------------------------------------- 18. FAQ */
.faq { border-top: 1px solid var(--or-tres-fin); }
.faq__item { border-bottom: 1px solid var(--or-tres-fin); }
.faq__item summary {
  cursor: pointer; list-style: none;
  padding: 1.6rem 3rem 1.6rem 0;
  position: relative;
  font-family: var(--titre); text-transform: uppercase;
  letter-spacing: .14em; font-size: clamp(.86rem, .82rem + .2vw, 1rem);
  color: var(--creme);
  transition: color var(--t-court);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--creme); }
.faq__item summary::after {
  content: ""; position: absolute; right: .6rem; top: 50%;
  width: 12px; height: 1px; background: var(--or);
  transform: translateY(-50%);
}
.faq__item summary::before {
  content: ""; position: absolute; right: 1.15rem; top: 50%;
  width: 1px; height: 12px; background: var(--or);
  transform: translateY(-50%);
  transition: opacity var(--t-court), transform var(--t-court);
}
.faq__item[open] summary::before { opacity: 0; transform: translateY(-50%) rotate(90deg); }
.faq__reponse { padding: 0 0 1.8rem; color: var(--gris); }
.faq__reponse p { margin-bottom: .8rem; }

/* --------------------------------------------------------- 19. Formulaires */
.formulaire { display: grid; gap: 1.4rem; }
.champ { display: grid; gap: .5rem; }
.champ label {
  font-family: var(--titre); text-transform: uppercase;
  letter-spacing: .16em; font-size: .72rem; color: var(--gris);
}
.champ label .requis { color: var(--creme); }
.champ input, .champ select, .champ textarea {
  font-family: var(--corps); font-size: 1rem;
  color: var(--creme);
  background: var(--noir-2);
  border: 1px solid var(--creme-fin);
  border-radius: var(--rayon);
  padding: .95rem 1.1rem;
  width: 100%;
  transition: border-color var(--t-court), background var(--t-court);
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--or-fin); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--or); background: var(--noir-3); outline: none;
}
.champ select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--creme) 50%), linear-gradient(135deg, var(--creme) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.8rem;
}
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: #C4666A; }
.champ__erreur { color: #E39EA1; font-size: .82rem; }
.duo { display: grid; gap: 1.4rem; }
@media (min-width: 620px) { .duo { grid-template-columns: 1fr 1fr; } }
.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.mention-rgpd { font-size: .8rem; color: var(--gris); line-height: 1.7; }
.message-form {
  padding: 1.2rem 1.4rem; border: 1px solid var(--or); background: rgba(195,162,107,.06);
  font-size: .92rem;
}
.message-form[data-etat="erreur"] { border-color: #C4666A; background: rgba(196,102,106,.08); }

/* --------------------------------------------------------- 20. Reservation */
.reservation {
  border: 1px solid var(--or);
  background: linear-gradient(180deg, rgba(3,45,45,.55), var(--noir-1));
  padding: clamp(1.8rem, 5vw, 3.5rem);
}
#calendly-embed { min-height: 700px; }
#calendly-embed:empty { display: none; min-height: 0; }

/* --------------------------------------------------------- 21. Pied de page */
.pied {
  background: var(--noir-1);
  border-top: 1px solid var(--or-tres-fin);
  padding-block: clamp(3rem, 7vw, 4.5rem) 2rem;
}
.pied__grille {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.pied h4 { color: var(--creme); margin-bottom: 1.2rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pied a { color: var(--gris); text-decoration: none; font-size: .92rem; }
.pied a:hover { color: var(--creme); }
.pied p { font-size: .92rem; color: var(--gris); }
.pied__logo img { width: 130px; margin-bottom: 1.4rem; }
.pied__bas {
  margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--creme-fin);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center;
  font-size: .8rem; color: var(--gris);
}
.pied__bas p { margin: 0; font-size: .8rem; }

/* --------------------------------------------------------- 22. Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.95);
  display: grid; place-items: center;
  padding: clamp(1rem, 5vw, 4rem);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 84vh; object-fit: contain; }
.lightbox__legende {
  margin-top: 1rem; text-align: center; color: var(--gris);
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
}
.lightbox__btn {
  position: absolute; background: transparent; color: var(--creme);
  border: 1px solid var(--creme-fin); cursor: pointer;
  width: 48px; height: 48px; font-size: 1.2rem; line-height: 1;
  display: grid; place-items: center;
}
.lightbox__btn:hover { border-color: var(--creme); color: var(--creme); }
.lightbox__fermer { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prec { left: clamp(.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__suiv { right: clamp(.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------- 23. Consentement */
.consentement {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  background: var(--noir-2);
  border-top: 1px solid var(--or-fin);
  padding: 1.4rem var(--gouttiere);
}
.consentement[hidden] { display: none; }
.consentement__interieur {
  max-width: var(--largeur); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 1.2rem 2rem;
  align-items: center; justify-content: space-between;
}
.consentement p { font-size: .86rem; color: var(--gris); margin: 0; max-width: 62ch; }
.consentement .groupe-btn { flex-shrink: 0; }

/* --------------------------------------------------------- 24. Fil d'Ariane */
.ariane {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris); padding-block: 1.4rem;
}
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.ariane li:not(:last-child)::after { content: "/"; margin-left: .5rem; color: var(--or-fin); }
.ariane a { color: var(--gris); text-decoration: none; }
.ariane a:hover { color: var(--creme); }

/* --------------------------------------------------------- 25. Apparition au defilement */
.apparait { opacity: 0; transform: translateY(18px); }
.apparait.visible {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) { .apparait { opacity: 1; transform: none; } }
.no-js .apparait { opacity: 1; transform: none; }

/* --------------------------------------------------------- 26. Contenu long */
.texte-long p { font-weight: 300; }
.texte-long h2 { margin-top: 2.8rem; }
.texte-long h3 { margin-top: 2.2rem; }
.texte-long ul,
.texte-long ol { color: var(--gris); padding-left: 1.2rem; max-width: var(--largeur-texte); }
.texte-long li { margin-bottom: .6rem; }
/* Sous-listes des CGV (échéancier de paiement) : moins d'air, puce ouverte. */
.texte-long li > ul { margin: .6rem 0 0; list-style-type: circle; }
.marqueur {
  background: rgba(92, 20, 22, .55);
  border-bottom: 1px dashed var(--or);
  padding: 0 .2em;
}

/* --------------------------------------------------------- 27. Utilitaires */
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }

/* --------------------------------------------------------- 28. Telephone
   Les sections gardent sur telephone exactement la mise en page qu'elles ont
   sur ordinateur : memes hauteurs, memes rembourrages, memes proportions,
   memes colonnes. Tout est ecrit en clamp() et en grilles fluides, la mise a
   l'echelle se fait donc toute seule, et aucune page ne deborde lateralement,
   mesure de 360 a 820px.

   Ne restent ici que deux corrections qui ne touchent pas a la composition :
   la taille minimale des textes et la surface des zones tactiles. Sans elles
   le site reste beau mais devient illisible ou impossible a viser au pouce.
   Les hauteurs de section, les marges, le nombre de colonnes des galeries et
   la disposition des boutons ne sont volontairement pas touches : demande
   cliente du 12/09, meme resultat que sur ordinateur. */

/* L'indication sous le carrousel depend du mode : on epingle et l'on fait
   defiler la page, ou l'on glisse la rangee au doigt. */
.aide--libre { display: none; }
.scroll-h[data-epingle="false"] .aide--epingle { display: none; }
.scroll-h[data-epingle="false"] .aide--libre { display: inline; }

/* Surfaces tactiles. Sur un appareil sans survol, un lien de 18px de haut est
   trop juste pour un pouce : on vise les 44px recommandes par le WCAG (2.5.8,
   Target Size). Seul du rembourrage vertical est ajoute, rien ne se deplace
   et la mise en page ne bouge pas d'un pixel. */
@media (hover: none) {
  .lien-fleche { padding-block: .85rem; }
  .pied a { display: inline-block; padding-block: .6rem; }
  /* Telephone et courriel : ce sont les appels a l'action de la page contact,
     ils meritent une surface de pouce meme places dans un paragraphe. */
  a[href^="tel:"], a[href^="mailto:"] { display: inline-block; padding-block: .5rem; }
  .pied ul { gap: .1rem; }
  .ariane a { display: inline-block; padding-block: .5rem; }
  .avis figcaption { padding-block: .3rem; }
}

@media (max-width: 640px) {
  /* Aucun texte sous 12px. En dessous, les capitales tres espacees de la
     charte deviennent penibles a lire sur un ecran tenu a bout de bras.
     C'est le seul endroit ou le telephone s'ecarte de l'ordinateur, et
     l'ecart se compte en fractions de millimetre. */
  .surtitre { font-size: .8rem; }
  .champ label { font-size: .8rem; }
  .scroll-h__aide { font-size: .78rem; }
  .offre__pour, .offre__prix small { font-size: .78rem; }
  .avis__note { font-size: .82rem; }
  .avis figcaption { font-size: .8rem; }
  .avant-apres__etiquette { font-size: .78rem; }
  .pied__bas p { font-size: .82rem; }
  .ariane { font-size: .78rem; }
  .barre-reservation .btn { font-size: .78rem; }

  /* Visionneuse : les fleches reviennent en bas, a portee de pouce, au lieu de
     rester collees aux bords au milieu de l'image. Ce n'est pas une section du
     site mais une surimpression, la demande ne la concerne pas. */
  .lightbox__prec, .lightbox__suiv { top: auto; bottom: 1.25rem; transform: none; }
  .lightbox__prec { left: 1.25rem; }
  .lightbox__suiv { right: 1.25rem; }
  .lightbox img { max-height: 70svh; }
}

/* --------------------------------------------------------- 29. Barre de reservation (telephone)
   Uniquement sur la page conseil deco, qui fait pres de 10 000px de haut sur un
   telephone : sans elle, le visiteur qui lit la preuve sociale au milieu de la
   page doit remonter ou descendre longtemps pour trouver le bouton.
   Elle disparait des que le bloc de reservation est lui-meme a l'ecran, pour ne
   pas doubler le bouton principal ni masquer le calendrier. */
.barre-reservation { display: none; }

@media (max-width: 640px) {
  .barre-reservation {
    position: fixed; z-index: 90;
    left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: .7rem var(--gouttiere) calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--creme-fin);
    transition: transform var(--t-court), opacity var(--t-court);
  }
  .barre-reservation[data-cachee="true"] {
    transform: translateY(110%); opacity: 0; pointer-events: none;
  }
  .barre-reservation__offre {
    margin: 0; line-height: 1.3;
    font-family: var(--titre); text-transform: uppercase;
    letter-spacing: .14em; font-size: .78rem; color: var(--creme);
  }
  .barre-reservation__offre span {
    display: block;
    font-family: var(--corps); text-transform: none;
    letter-spacing: .02em; font-size: .78rem; color: var(--gris);
  }
  .barre-reservation .btn { flex: 0 0 auto; padding: .85rem 1.3rem; font-size: .78rem; }
  /* De la place sous le pied de page pour que la barre ne recouvre jamais la
     derniere ligne de la page. */
  body:has(.barre-reservation) .pied__bas { padding-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .barre-reservation { transition: none; }
}