/* ===========================================================
   Vertige — Artisan Fleuriste, Duclair
   Refonte 2026 · v4

   Parti pris (inchangé depuis la v3) : le site est un atelier
   en vert profond. Les fleurs sont la seule couleur.
   L’accent suit la saison.

   Sommaire
   01. Jetons           13. Prestations
   02. Base             14. Commander
   03. Typographie      15. Décoration
   04. Composants       16. Nous trouver
   05. En-tête          17. Appel final
   06. Menu             18. Pied de page
   07. Rail             19. Barre mobile
   08. Hero             20. Visionneuse
   09. Bandeau          21. Curseur
   10. L’atelier        22. Apparitions
   11. Créations        23. Responsive
   12. Avis             24. Mouvement réduit, impression
   =========================================================== */


/* ===========================================================
   01. Jetons
   =========================================================== */
:root {
  /* Verts — la matière du site */
  --nuit:      #131d16;
  --sapin:     #1d2a20;
  --sous-bois: #243228;
  --foret:     #35452f;
  --mousse:    #7d8f68;

  /* Clairs */
  --craie:   #f5f2e9;
  --craie-2: #e9e4d6;
  --craie-3: #ddd6c4;
  --encre:   #232821;
  --encre-2: #5b6257;

  /* Accent saisonnier (remplacé par data-saison) :
     --accent sur fond clair, --accent-clair sur fond sombre */
  --accent:       #6e2433;
  --accent-clair: #db8a97;

  /* Craie et encre transparentes */
  --craie-90: rgba(245, 242, 233, .9);
  --craie-75: rgba(245, 242, 233, .75);
  --craie-55: rgba(245, 242, 233, .55);
  --craie-30: rgba(245, 242, 233, .3);
  --craie-15: rgba(245, 242, 233, .15);
  --encre-30: rgba(35, 40, 33, .3);
  --encre-15: rgba(35, 40, 33, .14);
  --voile:    rgba(19, 29, 22, .82);

  /* Mesures */
  --mesure:  1320px;
  --lisible: 60ch;
  --marge:   clamp(1.25rem, 5vw, 4.5rem);
  --section: clamp(5.5rem, 11vw, 9.5rem);
  --rayon:   4px;

  /* Mouvement : trois courbes, pas plus */
  --transi: cubic-bezier(.22, .75, .25, 1);   /* survols (hérité de la v3) */
  --sortie: cubic-bezier(.16, 1, .3, 1);      /* apparitions : part vite, se pose */
  --rideau: cubic-bezier(.76, 0, .24, 1);     /* grands mouvements : rideau, menu */

  /* Grain de papier, posé sur les fonds sombres */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

html[data-saison="printemps"] { --accent: #7d5a86; --accent-clair: #c9a6d4; }
html[data-saison="ete"]       { --accent: #a0566a; --accent-clair: #e7a3b5; }
html[data-saison="automne"]   { --accent: #7d3b2a; --accent-clair: #e0977a; }
html[data-saison="hiver"]     { --accent: #6e2433; --accent-clair: #db8a97; }


/* ===========================================================
   02. Base
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--nuit);
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
  scrollbar-gutter: stable;
}
html.menu-ouvert,
html.vision-ouverte { overflow: hidden; }

body {
  min-height: 100vh;
  font-family: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--craie);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; }
table { border-collapse: collapse; }

::selection { background: var(--accent); color: var(--craie); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}
[data-fond="sombre"] :focus-visible,
.entete :focus-visible,
.panneau :focus-visible,
.vision :focus-visible,
.barre-mobile :focus-visible { outline-color: var(--accent-clair); }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.enveloppe { max-width: var(--mesure); margin-inline: auto; }

.evitement {
  position: fixed;
  top: .6rem; left: 1rem;
  z-index: 400;
  padding: .7rem 1.3rem;
  background: var(--accent);
  color: var(--craie);
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transform: translateY(-160%);
  transition: transform .3s var(--sortie);
}
.evitement:focus { transform: none; }


/* ===========================================================
   03. Typographie
   =========================================================== */
.titre-grand, .titre-moyen, .titre-final, .masthead, .marque,
.pied-marque, .etal-titre, .presta h3, .etape h3, .chiffre dt,
.avis blockquote, .panneau-mot, .bandeau-piste, .adresse,
.paraphe, .carte-texte, .etape-num {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 30, "WONK" 1;
}

.titre-grand {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: .98;
  letter-spacing: -0.025em;
}
.titre-moyen {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.titre-grand em, .titre-moyen em, .titre-final em, .chiffre em {
  font-style: italic;
  font-variation-settings: "SOFT" 70, "WONK" 1;
}

p { text-wrap: pretty; }

/* Une ligne de titre = un masque (pour l’apparition ligne à ligne) */
.ligne {
  display: block;
  overflow: hidden;
  padding: 0 .1em .12em 0;
  margin-bottom: -.12em;
}

/* Surtitre : un filet à la couleur de la saison, puis le nom de la section */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.4rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--encre-2);
}
.surtitre::before {
  content: "";
  flex: none;
  width: 2.4rem; height: 1px;
  background: var(--accent);
}
[data-fond="sombre"] .surtitre { color: var(--craie-75); }
[data-fond="sombre"] .surtitre::before { background: var(--accent-clair); }


/* ===========================================================
   04. Composants
   =========================================================== */

/* ---- Icônes ---- */
.icone {
  width: 1.15em; height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icone-retournee { transform: scaleX(-1); }
.icone-fleur { width: .5em; height: .5em; flex: none; fill: currentColor; }

/* ---- Boutons : une nappe de couleur monte au survol ---- */
.bouton {
  --b-fond: var(--craie);
  --b-texte: var(--nuit);
  --b-bord: var(--craie);
  --b-nappe: var(--accent);
  --b-texte-survol: var(--craie);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.2rem;
  padding: .9rem 1.8rem;
  border: 1px solid var(--b-bord);
  border-radius: 999px;
  background: var(--b-fond);
  color: var(--b-texte);
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .5s var(--sortie), border-color .5s var(--sortie), transform .3s var(--transi);
}
.bouton::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--b-nappe);
  transform: translateY(102%);
  transition: transform .55s var(--sortie);
}
.bouton .icone { transition: transform .5s var(--sortie); }
.bouton:focus-visible { color: var(--b-texte-survol); border-color: var(--b-nappe); }
.bouton:focus-visible::before { transform: none; }
.bouton:active { transform: scale(.97); }
@media (hover: hover) {
  .bouton:hover { color: var(--b-texte-survol); border-color: var(--b-nappe); }
  .bouton:hover::before { transform: none; }
  .bouton:hover .icone { transform: translateX(.2rem); }
}

.bouton-fin {
  --b-fond: transparent;
  --b-texte: var(--craie);
  --b-bord: var(--craie-30);
  --b-nappe: var(--craie);
  --b-texte-survol: var(--nuit);
}
.bouton-sombre {
  --b-fond: var(--sapin);
  --b-texte: var(--craie);
  --b-bord: var(--sapin);
}
.bouton-contour {
  --b-fond: transparent;
  --b-texte: var(--encre);
  --b-bord: var(--encre-30);
  --b-nappe: var(--sapin);
}
.bouton-craie {
  --b-nappe: var(--nuit);
}
.bouton-petit { min-height: 2.7rem; padding: .7rem 1.3rem; font-size: .88rem; }

/* Libellé qui roule au survol, pendant que la nappe monte : le script double
   le texte (souris uniquement), le premier sort par le haut, son double arrive */
.roule {
  display: inline-grid;
  overflow: hidden;
  padding-bottom: .14em;   /* le masque ne rogne pas les jambages (p, g) */
  margin-bottom: -.14em;
}
.roule > span { grid-area: 1 / 1; transition: transform .55s var(--sortie); }
.roule > span + span { transform: translateY(115%); }
.bouton:focus-visible .roule > span:first-child { transform: translateY(-115%); }
.bouton:focus-visible .roule > span + span { transform: none; }
@media (hover: hover) {
  .bouton:hover .roule > span:first-child { transform: translateY(-115%); }
  .bouton:hover .roule > span + span { transform: none; }
}

.boutons { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---- Liens soulignés : le trait se retire puis revient ---- */
.lien-souligne {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  padding-bottom: .12em;
  transition: background-size .6s var(--sortie), color .3s var(--transi);
}
@media (hover: hover) {
  .lien-souligne:hover { background-size: 0 1px; background-position: 100% 100%; }
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2.4rem;
  padding-bottom: .3rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--encre);
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 100% 1px;
  transition: color .3s var(--transi);
}
.lien-fleche .icone { transition: transform .5s var(--sortie); }
@media (hover: hover) {
  .lien-fleche:hover { color: var(--accent); }
  .lien-fleche:hover .icone { transform: translateX(.35rem); }
}

/* ---- Statut d’ouverture en direct ---- */
.statut {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: .88rem;
  line-height: 1.3;
}
.pastille {
  position: relative;
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mousse);
}
.pastille[data-etat="ouvert"]  { background: #8fc46a; }
.pastille[data-etat="bientot"] { background: #e2b25a; }
.pastille[data-etat="ferme"]   { background: #c9806c; }
.pastille[data-etat="ouvert"]::after,
.pastille[data-etat="bientot"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pouls 2.6s var(--sortie) 4;
}
@keyframes pouls {
  from { transform: scale(1); opacity: .7; }
  to   { transform: scale(3.2); opacity: 0; }
}

/* ---- Photo : cadre qui recadre ---- */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--craie-3);
}
.photo picture, .photo img { display: block; width: 100%; height: 100%; }
.photo img { object-fit: cover; }


/* ===========================================================
   05. En-tête
   =========================================================== */
.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem var(--marge);
  color: var(--craie);
  transition: transform .7s var(--sortie), padding .5s var(--transi);
}
.entete::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--voile);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--craie-15);
  opacity: 0;
  transition: opacity .5s var(--transi);
}
.entete.pose { padding-top: .8rem; padding-bottom: .8rem; }
.entete.pose::before { opacity: 1; }
.entete.cache { transform: translateY(-110%); }
.menu-ouvert .entete { transform: none; }
.menu-ouvert .entete::before { opacity: 0; }

.marque {
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--craie);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

.entete-statut {
  color: var(--craie-90);
  font-size: .85rem;
  opacity: 0;
  transform: translateY(-.4rem);
  transition: opacity .6s var(--transi), transform .8s var(--sortie);
}
.entete.apres-hero .entete-statut,
.sans-js .entete-statut { opacity: 1; transform: none; }

.entete-actions { display: flex; align-items: center; gap: 1.8rem; }

.entete-tel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--craie);
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--transi);
}
@media (hover: hover) { .entete-tel:hover { color: var(--accent-clair); } }

/* Déclencheur du menu : « Menu » roule vers « Fermer » */
.declencheur {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem 0;
  border: 0;
  background: none;
  color: var(--craie);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.declencheur-mots {
  display: grid;
  justify-items: end;
  height: 1.2em;
  overflow: hidden;
  line-height: 1.2;
}
.declencheur-mots span {
  grid-area: 1 / 1;
  transition: transform .6s var(--sortie);
}
.declencheur-mots span + span { transform: translateY(110%); }
.declencheur[aria-expanded="true"] .declencheur-mots span:first-child { transform: translateY(-110%); }
.declencheur[aria-expanded="true"] .declencheur-mots span + span { transform: none; }

.declencheur-trait {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
}
.declencheur-trait i {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform .5s var(--sortie), width .5s var(--sortie);
}
.declencheur-trait i:last-child { width: 16px; margin-left: auto; }
@media (hover: hover) {
  .declencheur:hover .declencheur-trait i:last-child { width: 24px; }
}
.declencheur[aria-expanded="true"] .declencheur-trait i:first-child { transform: translateY(3.25px) rotate(45deg); }
.declencheur[aria-expanded="true"] .declencheur-trait i:last-child  { width: 24px; transform: translateY(-3.25px) rotate(-45deg); }


/* ===========================================================
   06. Menu plein écran — il descend comme un rideau
   =========================================================== */
.panneau {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--marge);
  padding: 7rem var(--marge) 3rem;
  background: var(--nuit);
  color: var(--craie);
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--rideau);
}
.panneau[hidden] { display: none; }
.panneau.est-ouvert { clip-path: inset(0 0 0 0); }
.panneau::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: .06;
  pointer-events: none;
}

.panneau-liens li { overflow: hidden; }
.panneau-liens a {
  display: flex;
  align-items: baseline;
  gap: 1.3rem;
  padding: .06em 0;
  color: var(--craie);
  text-decoration: none;
}
.panneau-num {
  min-width: 1.6rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--accent-clair);
  opacity: 0;
  transition: opacity .3s var(--transi);
}
.panneau-mot {
  display: inline-block;
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  transform: translateY(110%);
  transition: transform .45s var(--rideau), opacity .35s var(--transi);
}
.panneau.est-ouvert .panneau-num {
  opacity: 1;
  transition: opacity .6s var(--transi) calc(.45s + var(--i) * .07s);
}
.panneau.est-ouvert .panneau-mot {
  transform: none;
  transition: transform 1s var(--sortie) calc(.28s + var(--i) * .07s), opacity .35s var(--transi);
}
@media (hover: hover) {
  .panneau-liens:hover .panneau-mot { opacity: .35; }
  .panneau-liens a:hover .panneau-mot {
    opacity: 1;
    font-style: italic;
    transform: translateX(.7rem);
    transition: transform .6s var(--sortie), opacity .35s var(--transi);
  }
}
.panneau-liens a:focus-visible .panneau-mot { font-style: italic; }

.panneau-cote {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .3s var(--transi), transform .3s var(--transi);
}
.panneau.est-ouvert .panneau-cote {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--sortie) .55s, transform 1.2s var(--sortie) .55s;
}

.panneau-apercu {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--sous-bois);
}
.apercu {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s var(--transi);
}
.apercu picture, .apercu img { width: 100%; height: 100%; }
.apercu img {
  object-fit: cover;
  object-position: 50% 22%;   /* les portraits gardent les visages */
  transform: scale(1.1);
  transition: transform 1.6s var(--sortie);
}
.apercu.est-actif { opacity: 1; }
.apercu.est-actif img { transform: none; }

.panneau-contact { font-size: .95rem; color: var(--craie-75); }
.panneau-contact .statut { margin-bottom: 1rem; color: var(--craie-90); }
.panneau-contact a {
  display: block;
  width: fit-content;
  margin-bottom: .35rem;
  font-size: 1.1rem;
  color: var(--craie);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size .5s var(--sortie);
}
@media (hover: hover) { .panneau-contact a:hover { background-size: 100% 1px; } }
.panneau-contact p { margin-top: .8rem; line-height: 1.5; }


/* ===========================================================
   07. Rail de progression
   =========================================================== */
.rail {
  position: fixed;
  right: 1.4rem;
  top: 50%;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: .95rem;
  transform: translateY(-50%);
  transition: opacity .5s var(--transi);
}
.rail a { position: relative; display: block; padding: .35rem 0; }
.rail i {
  display: block;
  width: 22px; height: 1.5px;
  margin-left: auto;
  background: var(--craie-30);
  transition: width .5s var(--sortie), background-color .4s var(--transi);
}
.rail a::before {
  content: attr(data-nom);
  position: absolute;
  right: calc(100% + .9rem);
  top: 50%;
  white-space: nowrap;
  font-size: .78rem;
  color: var(--craie);
  opacity: 0;
  transform: translate(.4rem, -50%);
  pointer-events: none;
  transition: opacity .3s var(--transi), transform .5s var(--sortie);
}
.rail a:hover i, .rail a:focus-visible i { width: 32px; background: var(--craie); }
.rail a:hover::before, .rail a:focus-visible::before { opacity: 1; transform: translate(0, -50%); }
.rail a.actif i { width: 42px; background: var(--accent-clair); }

.rail.sur-clair i { background: var(--encre-30); }
.rail.sur-clair a:hover i { background: var(--encre); }
.rail.sur-clair a.actif i { background: var(--accent); }
.rail.sur-clair a::before { color: var(--encre); }
.menu-ouvert .rail { opacity: 0; pointer-events: none; }


/* ===========================================================
   08. Hero — une « une » de magazine
   =========================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: 7rem var(--marge) 2.4rem;
  overflow: hidden;
  color: var(--craie);
  background: var(--nuit);
}

.hero-fond { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-fond-image { position: absolute; inset: -7% 0; }
.hero-fond-image picture, .hero-fond-image img { width: 100%; height: 100%; }
.hero-fond-image img { object-fit: cover; object-position: 50% 40%; }
.hero-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(19,29,22,.8) 0%, rgba(19,29,22,.34) 28%, rgba(19,29,22,.5) 52%, rgba(19,29,22,.9) 80%, var(--nuit) 100%),
    radial-gradient(120% 70% at 50% 45%, transparent 40%, rgba(19,29,22,.45) 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grain);
  opacity: .07;
  pointer-events: none;
}

/* Tout le texte se range en bas à gauche : le reste de l’écran appartient à la devanture */
.hero-contenu {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.5rem;
}
.hero-haut .surtitre { margin: 0; color: var(--craie-90); }

/* Le masthead : assez grand pour signer la une, assez discret pour laisser voir
   l’enseigne et la vitrine. Le mot remplit sa boîte (taille recalculée par le script). */
.masthead { width: clamp(15rem, 28vw, 34rem); max-width: 100%; margin-bottom: .6rem; line-height: .8; }
.masthead-mot {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  font-size: clamp(6.2rem, 11.6vw, 14.1rem); /* sans script : à peu près la largeur de la boîte */
  letter-spacing: -0.045em;
  font-variation-settings: "SOFT" 15, "WONK" 1, "opsz" 144;
  /* marge intérieure : le masque des lettres ne rogne ni le V ni le jambage du g */
  padding: .08em .03em .25em 0;
  margin: -.08em 0 -.02em;
  overflow: hidden;
  text-shadow: 0 .02em .35em rgba(19, 29, 22, .25);
}
.masthead .l { display: inline-block; }
.masthead .l:first-child { margin-right: -0.07em; } /* crénage V/e : les lettres séparées le perdent */

.hero-pied {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.8rem 3rem;
  padding-top: 1.6rem;
}
.hero-pied::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--craie-30);
  transform-origin: left;
}
.hero-accroche {
  max-width: 36ch;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--craie-90);
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.1rem;
}
.statut-hero { color: var(--craie-90); }

/* Le fil : invite discrète à descendre */
.hero-fil {
  display: none;
  position: absolute;
  left: 50%; bottom: 0;
  width: 1px; height: 4.5rem;
  overflow: hidden;
  background: linear-gradient(to bottom, transparent, var(--craie-30));
}
.hero-fil::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 40%;
  background: var(--craie);
  transform: translateY(-100%);
}


/* ===========================================================
   09. Bandeau défilant (il avance quand on fait défiler la page)
   =========================================================== */
.bandeau {
  position: relative;
  overflow: hidden;
  padding: clamp(1.3rem, 3vw, 2.1rem) 0;
  background: var(--nuit);
  color: var(--craie);
  border-top: 1px solid var(--craie-15);
}
.bandeau-piste {
  display: flex;
  align-items: center;
  gap: clamp(1.3rem, 3vw, 2.6rem);
  width: max-content;
  white-space: nowrap;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  font-style: italic;
  line-height: 1.15;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  will-change: transform;
}
.bandeau-piste .icone-fleur { color: var(--accent-clair); }


/* ===========================================================
   10. L’atelier
   =========================================================== */
.atelier {
  background: var(--craie);
  padding: var(--section) var(--marge);
}
.atelier-grille {
  display: grid;
  grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.atelier-portrait { position: sticky; top: 6.5rem; margin: 0; }
.atelier-photo { aspect-ratio: 4 / 5; }
.parallaxe-interne { position: absolute; inset: -8% 0; }
.atelier-photo img { object-position: 50% 22%; }
.atelier-portrait figcaption {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .9rem;
  font-size: .84rem;
  color: var(--encre-2);
}
.atelier-portrait figcaption::before { content: ""; width: 1.4rem; height: 1px; background: var(--encre-30); }

.atelier-corps .titre-grand { margin-bottom: 2.1rem; }
.atelier-corps > p { max-width: var(--lisible); margin-bottom: 1.1rem; color: var(--encre-2); }
.atelier-corps > .chapeau { font-size: 1.16rem; line-height: 1.65; color: var(--encre); }

.paraphe {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 1.5rem;
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.atelier-corps > .paraphe { color: var(--accent); }
.paraphe-trait {
  width: 8.5rem;
  margin-top: .1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 2.8rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--encre-15);
}
.chiffre dt {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--encre);
  font-variant-numeric: lining-nums;
}
.chiffre dd {
  margin-top: .55rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--encre-2);
}

.etal {
  margin-top: 2.8rem;
  padding: 1.8rem;
  background: var(--craie-2);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.etal-titre { font-size: 1.24rem; line-height: 1.2; margin-bottom: 1rem; }
.etal-liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.etal-liste:empty { display: none; }
.etal-liste li {
  padding: .32rem .9rem;
  border: 1px solid rgba(35, 40, 33, .18);
  border-radius: 999px;
  background: var(--craie);
  font-size: .9rem;
  color: var(--encre-2);
}
.etal-note { margin-top: 1.1rem; font-size: .9rem; color: var(--encre-2); }


/* ===========================================================
   11. Créations — carrousel horizontal
   =========================================================== */
.creations {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--section) 0;
  background: var(--nuit);
  color: var(--craie);
}
.creations::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grain);
  opacity: .06;
  pointer-events: none;
}

.creations-tete {
  max-width: var(--mesure);
  margin: 0 auto 3rem;
  padding: 0 var(--marge);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 3rem;
}
.creations-intro { max-width: 42ch; margin-top: 1.4rem; color: var(--craie-75); }

.creations-pilote { display: flex; align-items: center; gap: 1.6rem; }
.compteur {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  color: var(--craie-55);
}
.compteur [data-compteur-actuel] { color: var(--craie); }
.compteur-trait {
  position: relative;
  width: 6rem; height: 1px;
  overflow: hidden;
  background: var(--craie-30);
}
.compteur-trait i {
  position: absolute;
  inset: 0;
  background: var(--craie);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s linear;
}

.fleches { display: flex; gap: .55rem; }
.fleche {
  display: grid;
  place-items: center;
  width: 3.1rem; height: 3.1rem;
  border: 1px solid var(--craie-30);
  border-radius: 50%;
  background: transparent;
  color: var(--craie);
  cursor: pointer;
  transition: background-color .35s var(--transi), border-color .35s var(--transi), color .35s var(--transi), opacity .35s var(--transi);
}
.fleche .icone { width: 1.2rem; height: 1.2rem; }
.fleche:disabled { opacity: .3; cursor: default; }
@media (hover: hover) {
  .fleche:hover:not(:disabled) { background: var(--craie); border-color: var(--craie); color: var(--nuit); }
}

.piste {
  --h-plaque: min(64vh, 36rem);
  --h-plaque: min(64svh, 36rem);
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--marge);
  scrollbar-width: none;
  cursor: grab;
}
.piste::-webkit-scrollbar { display: none; }
.piste:focus-visible { outline-offset: -6px; }
.piste.tire { cursor: grabbing; scroll-snap-type: none; -webkit-user-select: none; user-select: none; }
.piste.sans-curseur, .piste.sans-curseur * { cursor: none; }

.piste-liste {
  display: flex;
  gap: clamp(.8rem, 1.6vw, 1.3rem);
  width: max-content;
  padding: 0 var(--marge) .5rem;
}
.plaque { flex: none; scroll-snap-align: start; }
.plaque figure { margin: 0; }
.plaque-bouton {
  display: block;
  position: relative;
  width: calc(var(--h-plaque) * var(--r, .75));
  height: var(--h-plaque);
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--sous-bois);
  cursor: inherit;
}
.plaque-bouton picture, .plaque-bouton img { width: 100%; height: 100%; }
.plaque-bouton img {
  object-fit: cover;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 1.1s var(--sortie), opacity .4s var(--transi);
}
@media (hover: hover) { .plaque-bouton:hover img { transform: scale(1.04); } }
.plaque figcaption {
  display: flex;
  gap: .7rem;
  width: 0;
  min-width: 100%;
  margin-top: .9rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--craie-75);
}
.plaque-num {
  padding-top: .12em;
  font-size: .76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-clair);
}

.creations-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  width: calc(100% - 2 * var(--marge));
  max-width: calc(var(--mesure) - 2 * var(--marge));
  margin: 3.5rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--craie-15);
}
.creations-pied > p { max-width: 44ch; font-size: 1.05rem; color: var(--craie-90); }
.creations-pied strong { font-weight: 600; color: var(--craie); }
.creations-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; }
.creations-actions .lien-souligne { font-size: .94rem; color: var(--craie-75); }


/* ===========================================================
   12. Avis
   =========================================================== */
.avis {
  background: var(--craie);
  padding: var(--section) var(--marge);
}
.avis-grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.avis-tete { grid-row: span 2; }

.avis-une { position: relative; margin: 0; padding-top: .4rem; }
.avis-une::before {
  content: "“";
  position: absolute;
  top: -.42em;
  left: -.06em;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(7rem, 13vw, 12rem);
  line-height: 1;
  color: var(--accent);
  opacity: .16;
  pointer-events: none;
}
.avis-une blockquote p {
  position: relative;
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-style: italic;
  font-variation-settings: "SOFT" 80, "WONK" 1;
  text-wrap: balance;
}
.avis figcaption {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.3rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--accent);
}
.avis figcaption::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; }

.avis-autres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--encre-15);
}
.avis-carte { margin: 0; }
.avis-carte blockquote p {
  font-size: 1.32rem;
  line-height: 1.4;
  font-variation-settings: "SOFT" 50, "WONK" 1;
}


/* ===========================================================
   13. Prestations
   =========================================================== */
.prestations {
  background: var(--craie-2);
  padding: var(--section) var(--marge);
}
.prestations-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem 4rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.prestations-intro { max-width: 40ch; font-size: 1.08rem; color: var(--encre-2); }

.prestations-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
  align-items: start;
}
.presta { position: relative; }
.presta:nth-child(2) { margin-top: 4rem; }
.presta-photo { aspect-ratio: 4 / 5; margin-bottom: 1.4rem; }
.presta-photo img { transition: transform 1.2s var(--sortie); }
.presta-texte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
}
.presta-num {
  grid-row: span 3;
  padding-top: .5rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent);
}
.presta h3 { font-size: 1.6rem; line-height: 1.12; letter-spacing: -0.015em; }
.presta-lien { color: inherit; text-decoration: none; }
.presta-lien::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--rayon); }
.presta-lien:focus-visible { outline: none; }
.presta-lien:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 6px; }
.presta p { margin-top: .35rem; font-size: .97rem; color: var(--encre-2); }
.presta-action {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--encre);
  transition: color .3s var(--transi);
}
.presta-action .icone { transition: transform .5s var(--sortie); }
@media (hover: hover) {
  .presta:hover .presta-photo img { transform: scale(1.05); }
  .presta:hover .presta-action { color: var(--accent); }
  .presta:hover .presta-action .icone { transform: translateX(.35rem); }
}


/* ===========================================================
   14. Commander — la bande à la couleur de la saison
   =========================================================== */
.commander {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--section) var(--marge);
  background: var(--accent);
  color: var(--craie);
}
.commander::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 90% at 88% 10%, rgba(255, 255, 255, .1), transparent 70%),
    radial-gradient(50% 80% at 0% 100%, rgba(0, 0, 0, .18), transparent 70%);
}
.commander::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grain);
  opacity: .08;
  pointer-events: none;
}
.commander .surtitre { color: var(--craie-90); }
.commander .surtitre::before { background: var(--craie); }

.commander-grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.statut-commander {
  margin-top: 2rem;
  padding: .6rem 1.05rem;
  border: 1px solid var(--craie-30);
  border-radius: 999px;
  color: var(--craie);
}

.etape {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  column-gap: 1.2rem;
  padding: 1.7rem 0;
}
.etape::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--craie-30);
  transform-origin: left;
}
.etape:last-child { border-bottom: 1px solid var(--craie-30); }
.etape-num {
  grid-row: span 2;
  font-size: 3.4rem;
  line-height: .85;
  font-style: italic;
  color: var(--craie-55);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.etape h3 { font-size: 1.55rem; line-height: 1.15; margin-bottom: .35rem; }
.etape p { max-width: 46ch; color: var(--craie-90); }
.etape a { color: var(--craie); font-weight: 600; text-underline-offset: .2em; }

.commander-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}


/* ===========================================================
   15. Décoration — mosaïque
   =========================================================== */
.decoration {
  background: var(--craie);
  padding: var(--section) var(--marge);
}
.deco-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem 4rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.deco-tete > p { max-width: 46ch; color: var(--encre-2); }

.mosaique {
  --mos-l: min(100vw - 2 * var(--marge), var(--mesure));
  --mos-gap: clamp(.6rem, 1.2vw, 1rem);
  display: grid;
  gap: var(--mos-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: calc((var(--mos-l) - 2 * var(--mos-gap)) / 3 * .82);
  grid-template-areas:
    "a a b"
    "a a c"
    "d e e";
}
.mos-a { grid-area: a; }
.mos-b { grid-area: b; }
.mos-c { grid-area: c; }
.mos-d { grid-area: d; }
.mos-e { grid-area: e; }

.mos {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--craie-3);
}
.mos picture, .mos img { width: 100%; height: 100%; }
.mos img { object-fit: cover; transition: transform 1.2s var(--sortie); }
.mos-e img { object-position: 50% 62%; }
.mos figcaption {
  position: absolute;
  left: .9rem; bottom: .9rem;
  max-width: calc(100% - 1.8rem);
  padding: .45rem .9rem;
  border-radius: 999px;
  background: rgba(245, 242, 233, .92);
  color: var(--encre);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(.6rem);
  transition: opacity .5s var(--transi), transform .7s var(--sortie);
}
@media (hover: hover) {
  .mos:hover img { transform: scale(1.05); }
  .mos:hover figcaption { opacity: 1; transform: none; }
}
@media (hover: none) {
  .mos figcaption { opacity: 1; transform: none; }
}

.deco-appel { margin-top: 2.4rem; color: var(--encre-2); }
.deco-appel a { color: var(--encre); font-weight: 600; }


/* ===========================================================
   16. Nous trouver
   =========================================================== */
.infos {
  background: var(--craie-2);
  padding: var(--section) var(--marge);
}
.infos-grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(3rem, 7vw, 7rem);
}

.coordonnees { margin: 2rem 0 1.8rem; font-style: normal; }
.adresse {
  margin-bottom: .9rem;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.lien-tel { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.reseaux { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: .9rem; }
.infos-lieu .boutons { margin-bottom: 2.2rem; }

.carte {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--sous-bois);
}
.carte-photo { position: absolute; inset: 0; }
.carte-photo picture, .carte-photo img { width: 100%; height: 100%; }
.carte-photo img { object-fit: cover; object-position: 50% 42%; transition: transform 1.4s var(--sortie); }
@media (hover: hover) { .carte:hover .carte-photo img { transform: scale(1.03); } }
.carte-voile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  color: var(--craie);
  background: linear-gradient(to top, rgba(19,29,22,.88), rgba(19,29,22,.15) 62%, transparent);
  transition: opacity .6s var(--transi);
}
.carte-texte { max-width: 22ch; font-size: 1.35rem; line-height: 1.2; }
.carte iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  opacity: 0;
  filter: saturate(.8);
  transition: opacity .8s var(--transi);
}
.carte.carte-chargee iframe { opacity: 1; }
.carte.carte-chargee .carte-voile { opacity: 0; pointer-events: none; }
.carte-note { margin-top: .75rem; font-size: .8rem; color: var(--encre-2); }

.infos-horaires .titre-moyen { margin-bottom: 1.4rem; padding-top: .4rem; }
.statut-grand {
  margin-bottom: 1.6rem;
  padding: .7rem 1.15rem;
  border-radius: 999px;
  background: var(--craie);
  font-size: .98rem;
  font-weight: 600;
  color: var(--encre);
}
.horaires { width: 100%; }
.horaires th, .horaires td {
  padding: .82rem 0;
  border-bottom: 1px solid rgba(35, 40, 33, .12);
  font-size: .97rem;
  font-weight: 400;
  text-align: left;
}
.horaires th { color: var(--encre-2); }
.horaires td { text-align: right; font-variant-numeric: tabular-nums; }
.horaires .jour-ferme { color: var(--encre-2); font-style: italic; }
.horaires tr.aujourdhui th, .horaires tr.aujourdhui td { color: var(--sapin); font-weight: 700; }
.horaires tr.aujourdhui th::before {
  content: "";
  display: inline-block;
  width: 3px; height: .9em;
  margin-right: .65rem;
  vertical-align: -1px;
  background: var(--accent);
}
.horaires tr.aujourdhui th::after {
  content: "aujourd’hui";
  margin-left: .6rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--accent);
}
.horaires-note { max-width: 36ch; margin-top: 1.8rem; color: var(--encre-2); }


/* ===========================================================
   17. Appel final
   =========================================================== */
.final {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: min(92vh, 54rem);
  padding: var(--section) var(--marge);
  overflow: hidden;
  text-align: center;
  background: var(--nuit);
  color: var(--craie);
}
.final-fond { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.final-image { position: absolute; inset: -12% 0; }
.final-image picture, .final-image img { width: 100%; height: 100%; }
.final-image img { object-fit: cover; object-position: 50% 45%; }
.final-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(19,29,22,.58) 0%, rgba(19,29,22,.84) 62%, var(--nuit) 100%);
}
.final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grain);
  opacity: .07;
  pointer-events: none;
}
.titre-final {
  margin-bottom: 1.8rem;
  font-size: clamp(3.2rem, 10vw, 8.5rem);
  line-height: .9;
  letter-spacing: -0.03em;
}
.final-texte { max-width: 42ch; margin: 0 auto 2.4rem; font-size: 1.08rem; color: var(--craie-90); }
.final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.final-reseaux {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 2.2rem;
  font-size: .92rem;
  color: var(--craie-75);
}


/* ===========================================================
   18. Pied de page
   =========================================================== */
.pied {
  overflow: hidden;
  padding: clamp(4rem, 8vw, 6rem) var(--marge) 2rem;
  background: var(--sapin);
  color: var(--craie);
}
.pied-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  max-width: var(--mesure);
  margin: 0 auto;
}
.pied-titre { margin-bottom: 1rem; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--craie-55); }
.pied-col p, .pied-col li { font-size: .95rem; line-height: 1.6; color: var(--craie-90); }
.pied-col p + p { margin-top: .5rem; }
.pied-col .statut { font-size: .95rem; }
.pied-menu { display: grid; gap: .3rem; }
.pied-menu a { text-decoration: none; opacity: .82; transition: opacity .3s var(--transi); }
@media (hover: hover) { .pied-menu a:hover { opacity: 1; } }

.pied-marque {
  margin: clamp(3rem, 7vw, 5rem) 0 .4rem;
  line-height: .78;
  color: var(--foret);
  text-align: center;
  font-variation-settings: "SOFT" 15, "WONK" 1, "opsz" 144;
}
.pied-marque-mot {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  font-size: 22vw;
  letter-spacing: -0.045em;
  padding: .06em .03em .25em 0;
  margin: -.06em 0 0;
  overflow: hidden;
}
.pied-marque .l { display: inline-block; }
.pied-marque .l:first-child { margin-right: -0.07em; }

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem 2rem;
  max-width: var(--mesure);
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--craie-15);
  font-size: .84rem;
  color: var(--craie-55);
}


/* ===========================================================
   19. Barre mobile — appeler, venir
   =========================================================== */
.barre-mobile {
  display: none;
  position: fixed;
  left: .75rem; right: .75rem;
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  z-index: 150;
  gap: .45rem;
  padding: .4rem;
  border: 1px solid var(--craie-15);
  border-radius: 999px;
  background: rgba(19, 29, 22, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, .5);
  transform: translateY(calc(100% + 2rem));
  transition: transform .7s var(--sortie);
}
.barre-mobile.visible,
.sans-js .barre-mobile { transform: none; }
.menu-ouvert .barre-mobile,
.vision-ouverte .barre-mobile { transform: translateY(calc(100% + 2rem)); }
.barre-mobile a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  border-radius: 999px;
  color: var(--craie);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
}
.barre-mobile .bm-appel { background: var(--accent); }


/* ===========================================================
   20. Visionneuse
   =========================================================== */
.vision {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  padding: 4.5rem clamp(1rem, 3vw, 2.5rem) 2rem;
  color: var(--craie);
}
.vision[hidden] { display: none; }
.vision:not(.est-ouvert) { pointer-events: none; }
.vision-fond {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 12, .95);
  opacity: 0;
  transition: opacity .6s var(--transi);
}
.vision.est-ouvert .vision-fond { opacity: 1; }

.v-scene {
  position: relative;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
  margin: 0;
}
.v-image {
  display: block;
  max-width: none;
  border-radius: var(--rayon);
  background: var(--sous-bois);
  box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, .6);
  transform-origin: 50% 50%;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}
.v-legende {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  max-width: 52ch;
  text-align: center;
  font-size: .95rem;
  color: var(--craie-90);
}
.v-appel { font-size: .88rem; color: var(--accent-clair); }

.v-nav, .v-fermer {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.2rem; height: 3.2rem;
  border: 1px solid var(--craie-30);
  border-radius: 50%;
  background: rgba(19, 29, 22, .45);
  color: var(--craie);
  cursor: pointer;
  transition: background-color .3s var(--transi), color .3s var(--transi), border-color .3s var(--transi), opacity .45s var(--transi);
}
.v-nav .icone, .v-fermer .icone { width: 1.2rem; height: 1.2rem; }
.v-prec { grid-column: 1; grid-row: 1; }
.v-suiv { grid-column: 3; grid-row: 1; }
.v-scene { grid-row: 1; }
.v-fermer { position: absolute; top: 1.1rem; right: clamp(1rem, 3vw, 2.5rem); }
@media (hover: hover) {
  .v-nav:hover, .v-fermer:hover { background: var(--craie); border-color: var(--craie); color: var(--nuit); }
}
.v-compteur {
  position: absolute;
  top: 1.95rem;
  left: clamp(1rem, 3vw, 2.5rem);
  z-index: 1;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  color: var(--craie-75);
}
.v-legende, .v-nav, .v-fermer, .v-compteur { opacity: 0; transition-property: opacity, background-color, color, border-color; }
.vision.est-ouvert .v-legende,
.vision.est-ouvert .v-nav,
.vision.est-ouvert .v-fermer,
.vision.est-ouvert .v-compteur { opacity: 1; transition: opacity .5s var(--transi) .25s, background-color .3s var(--transi), color .3s var(--transi), border-color .3s var(--transi); }


/* ===========================================================
   21. Curseur de la galerie
   =========================================================== */
.curseur {
  position: fixed;
  top: 0; left: 0;
  z-index: 260;
  pointer-events: none;
  will-change: transform;
}
.curseur-bulle {
  display: grid;
  place-items: center;
  width: 5.6rem; height: 5.6rem;
  margin: -2.8rem 0 0 -2.8rem;
  border-radius: 50%;
  background: var(--craie);
  color: var(--nuit);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  transform: scale(0);
  transition: transform .45s var(--sortie);
}
.curseur.visible .curseur-bulle { transform: scale(1); }
.curseur.visible.appuye .curseur-bulle { transform: scale(.82); }


/* ===========================================================
   22. Apparitions au défilement
   Actives seulement si le JS tourne et si le mouvement est permis.
   Elles jouent dans les deux sens : sorti de l’écran, un élément se
   réarme ; le script lui pose « .par-le-haut » s’il est sorti par le
   haut, pour qu’il revienne d’en haut quand on remonte la page.
   =========================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Le script replace parfois le point de départ d’un élément : sans transition */
  .avec-js .sans-transition,
  .avec-js .sans-transition * { transition: none !important; }

  /* -- Montée douce, élément par élément (descente, s’il revient par le haut) -- */
  .avec-js [data-anim=""] {
    opacity: 0;
    transform: translateY(1.6rem);
    transition: opacity .9s var(--sortie), transform 1.1s var(--sortie);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .avec-js [data-anim=""].par-le-haut { transform: translateY(-1.6rem); }
  .avec-js [data-anim=""].est-visible { opacity: 1; transform: none; }

  /* -- Titres : chaque ligne sort de son masque -- */
  .avec-js [data-anim="lignes"] .ligne > span {
    display: inline-block;
    transform: translateY(108%);
    transition: transform 1.15s var(--sortie);
    transition-delay: calc(var(--l, 0) * 110ms);
  }
  .avec-js [data-anim="lignes"].par-le-haut .ligne > span { transform: translateY(-108%); }
  .avec-js [data-anim="lignes"].est-visible .ligne > span { transform: none; }

  /* -- Photos : un rideau se lève (ou tombe, par le haut), l’image se pose -- */
  .avec-js [data-anim="rideau"] {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.3s var(--rideau);
    transition-delay: calc(var(--i, 0) * 110ms);
  }
  .avec-js [data-anim="rideau"] picture {
    transform: scale(1.22);
    transition: transform 1.9s var(--sortie);
    transition-delay: calc(var(--i, 0) * 110ms);
  }
  .avec-js [data-anim="rideau"].par-le-haut { clip-path: inset(0 0 100% 0); }
  .avec-js [data-anim="rideau"].est-visible { clip-path: inset(0 0 0 0); }
  .avec-js [data-anim="rideau"].est-visible picture { transform: none; }

  /* -- Galerie : les photos arrivent de la droite -- */
  .avec-js [data-anim="piste"] .plaque {
    opacity: 0;
    transform: translateX(14vw);
    transition: opacity 1s var(--sortie), transform 1.4s var(--sortie);
    transition-delay: calc(min(var(--i, 0), 6) * 80ms);
  }
  .avec-js [data-anim="piste"].est-visible .plaque { opacity: 1; transform: none; }

  /* -- Signature du pied de page : lettre à lettre -- */
  .avec-js [data-anim="lettres"] .l {
    transform: translateY(105%);
    transition: transform 1.2s var(--sortie);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .avec-js [data-anim="lettres"].par-le-haut .l { transform: translateY(-105%); }
  .avec-js [data-anim="lettres"].est-visible .l { transform: none; }

  /* -- Paraphe : le trait se dessine -- */
  .avec-js .paraphe .paraphe-trait { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--sortie) .45s; }
  .avec-js .paraphe.est-visible .paraphe-trait { stroke-dashoffset: 0; }

  /* -- Étal : les fleurs du moment tombent une à une -- */
  .avec-js .etal .etal-liste li {
    opacity: 0;
    transform: translateY(.6rem) scale(.96);
    transition: opacity .6s var(--sortie), transform .8s var(--sortie);
    transition-delay: calc(.3s + var(--i, 0) * 70ms);
  }
  .avec-js .etal.par-le-haut .etal-liste li { transform: translateY(-.6rem) scale(.96); }
  .avec-js .etal.est-visible .etal-liste li { opacity: 1; transform: none; }

  /* -- Étapes : le filet se trace -- */
  .avec-js .etape::before { transform: scaleX(0); transition: transform 1.3s var(--rideau); transition-delay: calc(var(--i, 0) * 120ms); }
  .avec-js .etape.est-visible::before { transform: none; }

  /* -- Citation (data-mots) : les mots s’allument un à un, au rythme du défilement.
        Le script règle --avance (0 → 1) ; le mot n s’allume quand --avance × total dépasse n -- */
  .avec-js .mots-prets .mot {
    opacity: clamp(.16, calc(var(--avance, 0) * var(--total) - var(--n)), 1);
  }

  /* -- Écrins (data-ecrin) : le fond d’une section sombre ou colorée arrive en carte
        arrondie et s’ouvre jusqu’aux bords. Le script règle transform et border-radius
        à chaque image : aucune transition CSS ici. Sous l’écrin, la section reprend la
        couleur de celle qui la précède, pour que la carte se détache sans couture. -- */
  .avec-js .a-ecrin > .ecrin {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    will-change: transform;
  }
  .avec-js .a-ecrin > .ecrin::after {   /* le grain de papier suit l’écrin */
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grain);
    opacity: .06;
  }
  .avec-js .a-ecrin > [data-ecrin-fond],
  .avec-js .a-ecrin > [data-ecrin-fond] picture { will-change: transform; }

  .avec-js .creations.a-ecrin { background: var(--craie); }
  .avec-js .creations.a-ecrin::after { content: none; }
  .avec-js .creations.a-ecrin > .ecrin { background: var(--nuit); }

  .avec-js .commander.a-ecrin { background: var(--craie-2); }
  .avec-js .commander.a-ecrin::before,
  .avec-js .commander.a-ecrin::after { content: none; }
  .avec-js .commander.a-ecrin > .ecrin {
    background:
      radial-gradient(60% 90% at 88% 10%, rgba(255, 255, 255, .1), transparent 70%),
      radial-gradient(50% 80% at 0% 100%, rgba(0, 0, 0, .18), transparent 70%),
      var(--accent);
  }
  .avec-js .commander.a-ecrin > .ecrin::after { opacity: .08; }

  .avec-js .final.a-ecrin { background: var(--craie-2); }
  .avec-js .final.a-ecrin::after { content: none; }

  /* -- Hero : entrée orchestrée, déclenchée quand l’image et les polices sont prêtes -- */
  .avec-js .hero-fond {
    clip-path: inset(14% 22% 14% 22% round 6px);
    transition: clip-path 1.7s var(--rideau);
  }
  .avec-js .hero-fond picture {
    transform: scale(1.35);
    transition: transform 2.6s var(--sortie);
  }
  .avec-js .masthead .l {
    transform: translateY(112%);
    transition: transform 1.4s var(--sortie);
    transition-delay: calc(.55s + var(--i, 0) * 70ms);
  }
  .avec-js .hero-haut,
  .avec-js .hero-accroche,
  .avec-js .hero-actions {
    opacity: 0;
    transform: translateY(1.4rem);
    transition: opacity 1.1s var(--sortie), transform 1.3s var(--sortie);
  }
  .avec-js .hero-pied::before { transform: scaleX(0); transition: transform 1.5s var(--rideau) 1s; }

  .avec-js.hero-pret .hero-fond { clip-path: inset(0 0 0 0 round 0px); }
  .avec-js.hero-pret .hero-fond picture { transform: none; }
  .avec-js.hero-pret .masthead .l { transform: none; }
  .avec-js.hero-pret .hero-haut     { opacity: 1; transform: none; transition-delay: .7s; }
  .avec-js.hero-pret .hero-accroche { opacity: 1; transform: none; transition-delay: 1.1s; }
  .avec-js.hero-pret .hero-actions  { opacity: 1; transform: none; transition-delay: 1.25s; }
  .avec-js.hero-pret .hero-pied::before { transform: none; }

  /* Le fil : une goutte de lumière descend, trois fois puis s’arrête */
  .avec-js.hero-pret .hero-fil::after { animation: goutte 2.4s var(--rideau) 2s 3; }
  @keyframes goutte {
    from { transform: translateY(-100%); }
    to   { transform: translateY(260%); }
  }
}


/* ===========================================================
   23. Responsive
   =========================================================== */
@media (max-width: 1080px) {
  .entete-tel { display: none; }
  .panneau { grid-template-columns: 1fr; align-content: center; }
  .panneau-cote { display: none; }
  .avis-grille { grid-template-columns: 1fr; }
  .avis-tete { grid-row: auto; }
}

@media (max-width: 900px) {
  .rail { display: none; }

  .atelier-grille { grid-template-columns: 1fr; }
  .atelier-portrait { position: static; max-width: 24rem; }

  .prestations-tete, .deco-tete { grid-template-columns: 1fr; }

  .commander-grille { grid-template-columns: 1fr; }
  .commander-actions { grid-column: auto; }

  .infos-grille { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  html { font-size: 16px; }

  .entete { padding-top: 1rem; padding-bottom: 1rem; }
  .entete-statut { display: none; }
  .declencheur-mots { display: none; }

  .hero { padding-top: 6rem; padding-bottom: 2rem; min-height: 92vh; min-height: 92svh; }
  .surtitre-suite { display: none; }
  .masthead-mot { letter-spacing: -0.035em; }
  .hero-pied { flex-direction: column; align-items: stretch; }
  .hero-actions { align-items: stretch; }
  .hero-actions .boutons { width: 100%; }
  .hero-actions .bouton { flex: 1; padding-inline: 1rem; }

  .chiffres { grid-template-columns: 1fr; gap: 1.2rem; }
  .chiffre { display: flex; align-items: baseline; gap: 1rem; }
  .chiffre dt { min-width: 7.5rem; }
  .chiffre dd { margin-top: 0; }

  .creations-tete { flex-direction: column; align-items: flex-start; }
  .creations-pilote { width: 100%; justify-content: space-between; }
  .piste { --h-plaque: 56vh; --h-plaque: 56svh; }

  .avis-autres { grid-template-columns: 1fr; gap: 2rem; }

  .prestations-liste { grid-template-columns: 1fr; gap: 3rem; }
  .presta:nth-child(2) { margin-top: 0; }
  .presta-photo { aspect-ratio: 5 / 4; }

  .etape { grid-template-columns: 3rem minmax(0, 1fr); }
  .etape-num { font-size: 2.6rem; }

  .mosaique {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: calc((var(--mos-l) - var(--mos-gap)) / 2 * 1.2);
    grid-template-areas:
      "a a"
      "b c"
      "d e";
  }

  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied { padding-bottom: 6.5rem; }

  .barre-mobile { display: flex; }

  .vision {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    padding: 4.2rem 1rem 1.2rem;
  }
  .v-scene { grid-column: 1; grid-row: 1; }
  .v-prec, .v-suiv { grid-row: 2; width: 2.9rem; height: 2.9rem; }
  .v-prec { grid-column: 1; justify-self: start; }
  .v-suiv { grid-column: 1; justify-self: end; }
  .v-compteur { top: 1.6rem; }
}

@media (max-width: 420px) {
  .hero-actions .boutons { flex-direction: column; }
  .pied-grille { grid-template-columns: 1fr; }
}

@media (min-width: 1280px) {
  .hero-fil { display: block; }
}

/* Écran en hauteur (téléphone, tablette debout) : la photo se resserre dans le haut,
   la devanture reste entière au-dessus du texte, qui passe sur le vert */
@media (orientation: portrait) {
  .hero-fond-image { inset: -7% 0 36% 0; }
  .hero-fond-image img { object-position: 32% 40%; } /* la porte à droite, le texte à gauche */
  .hero-fond::after {
    background:
      linear-gradient(180deg, rgba(19,29,22,.72) 0%, rgba(19,29,22,.22) 20%, rgba(19,29,22,.38) 40%, rgba(19,29,22,.86) 56%, var(--nuit) 64%),
      radial-gradient(120% 70% at 50% 30%, transparent 45%, rgba(19,29,22,.4) 100%);
  }
}

/* Écrans bas (portable en paysage) : le hero ne doit pas déborder */
@media (max-height: 640px) and (min-width: 761px) {
  .hero { padding-top: 6rem; }
}


/* ===========================================================
   24. Mouvement réduit, impression
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .panneau-mot, .panneau-num, .panneau-cote { opacity: 1; transform: none; }
}

@media print {
  .entete, .panneau, .rail, .barre-mobile, .vision, .curseur,
  .bandeau, .fleches, .carte, .ecrin { display: none !important; }
  .hero { min-height: auto; color: var(--encre); background: none; }
  .hero-fond, .final-fond { display: none; }
  .creations, .commander, .final, .pied { background: none; color: var(--encre); }
  .piste { overflow: visible; }
  .piste-liste { flex-wrap: wrap; width: auto; }
}