/* ============================================================
   COIFF'TENDANCES · style.css
   Design éditorial fidèle à la DA v2 : typographie surdimensionnée,
   color blocking Bleu Royal / Jaune Soleil / Hibiscus / Navy,
   cercles soleil, lignes d'accent, bande défilante.
   Mobile first, animations en CSS pur, révélations par IntersectionObserver dans script.js.
   ============================================================ */

/* ------------------------------------------------------------
   1. VARIABLES (palette DA v2)
   ------------------------------------------------------------ */
:root {
  --bleu-royal: #1668D4;
  --blanc-pur: #FFFFFF;
  --jaune-soleil: #F5C200;
  --hibiscus: #E02828;
  --navy: #0C1C46;
  --bleu-madras: #2A6FD6;   /* bleu madras clair : grands aplats (footer, bandeaux) — préféré au navy sombre */

  --bleu-nuit: #0E3F8F;          /* étape du dégradé hero */
  --bleu-glace: #EAF2FC;         /* fond doux dérivé du bleu */
  --creme: #FFFBEE;              /* fond doux dérivé du jaune */

  /* Teintes dérivées (ombres de dégradés, papier), rapatriées en tokens */
  --jaune-fonce: #E08A00;
  --hibiscus-fonce: #8E1030;
  --bleu-acier: #26417E;
  --gris-froid: #5A6B8C;
  --papier: #FFFDF6;

  /* Couleurs relevées sur le logo original de 2011. Elles ne sont pas
     identiques à la palette DA v2 ci-dessus : à arbitrer avec Cyprien.
     Disponibles ici pour tout élément posé au contact direct du logo. */
  --logo-bleu: #0C3084;
  --vert-wa: #25D366;        /* le vert officiel de WhatsApp */
  --logo-jaune: #FCF000;
  --logo-ciel: #C0E4FC;

  --font-titre: "Fraunces", Georgia, "Times New Roman", serif;
  --font-texte: "Hanken Grotesk", sans-serif;

  --header-h: 76px;
  --radius: 18px;
  --ombre-dure: 0.45rem 0.45rem 0 var(--navy);
  --ombre-douce: 0 18px 44px rgba(12, 28, 70, 0.16);
  --transition: 0.25s ease;
}

/* ------------------------------------------------------------
   2. RESET ET BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-texte);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--navy);
  background: var(--blanc-pur);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--bleu-royal); text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-titre);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--navy);
}

/* Échelle typographique généreuse : le waouw vient du titrage */
h1 { font-size: clamp(2.6rem, 8vw, 5.4rem); }
h2 { font-size: clamp(2rem, 5.5vw, 3.6rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); }

.container { width: min(1180px, 92%); margin-inline: auto; }

.section { padding: clamp(4rem, 10vw, 8rem) 0; position: relative; }

/* Étiquette de section : trait rouge + libellé espacé, comme la DA */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hibiscus);
  margin-bottom: 1.1rem;
}

/* Un symbole du métier plutôt qu'un tiret. Le fichier SVG n'est qu'un
   tracé : c'est un masque, donc la couleur vient d'ici et un même
   dessin sert dans n'importe quelle teinte de la palette. */
.section-label::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  background: var(--ico-couleur, var(--hibiscus));
  -webkit-mask: var(--ico, none) center / contain no-repeat;
  mask: var(--ico, none) center / contain no-repeat;
}

/* Sans symbole assigné, on retombe sur le tiret d'origine */
.section-label:not([class*="sl-"])::before {
  width: 2.2rem;
  height: 3px;
  mask: none;
  -webkit-mask: none;
}

.sl-ciseaux  { --ico: url("images/symboles/ciseaux.svg"); }
.sl-peigne   { --ico: url("images/symboles/peigne.svg"); }
.sl-seche    { --ico: url("images/symboles/seche.svg"); }
.sl-boucle   { --ico: url("images/symboles/boucle.svg"); }
.sl-flacon   { --ico: url("images/symboles/flacon.svg"); }
.sl-miroir   { --ico: url("images/symboles/miroir.svg"); }
.sl-fleur    { --ico: url("images/symboles/fleur.svg"); }
.sl-main     { --ico: url("images/symboles/main.svg"); }
.sl-agenda   { --ico: url("images/symboles/agenda.svg"); }
.sl-coeur    { --ico: url("images/symboles/coeur.svg"); }
.sl-etoile   { --ico: url("images/symboles/etoile.svg"); }
.sl-horloge  { --ico: url("images/symboles/horloge.svg"); }

/* Trois teintes seulement, en alternance : au-delà ça devient un sapin */
.ico-bleu  { --ico-couleur: var(--bleu-royal); }
.ico-rouge { --ico-couleur: var(--hibiscus); }
.ico-jaune { --ico-couleur: var(--jaune-fonce); }

/* Sur fond sombre, le symbole passe en jaune pour rester lisible */
.film-texte .section-label,
.hero-photo .section-label { --ico-couleur: var(--jaune-soleil); }

.lead {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  max-width: 48rem;
  margin-top: 1.2rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------
   3. BOUTONS : gros, francs, ombre dure façon sticker
   ------------------------------------------------------------ */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 1.02rem;
  padding: 1.05rem 1.9rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              background var(--transition), color var(--transition);
}

/* Le halo de lumière qui balaie le bouton au survol : discret,
   il signale que l'élément est vivant sans clignoter. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.btn:hover::after { transform: translateX(120%); }

/* Focus clavier visible sur tous les boutons et liens d'action */
.btn:focus-visible,
.cat-rdv:focus-visible,
.prix-demande:focus-visible,
.wa-flottant:focus-visible {
  outline: 3px solid var(--hibiscus);
  outline-offset: 3px;
}

.btn-soleil {
  background: var(--jaune-soleil);
  color: var(--navy);
  box-shadow: var(--ombre-dure);
}

.btn-soleil:hover {
  transform: translate(-3px, -3px);
  box-shadow: 0.75rem 0.75rem 0 var(--navy);
}

.btn-soleil:active { transform: translate(1px, 1px); box-shadow: 0.2rem 0.2rem 0 var(--navy); }

.btn-bleu {
  background: var(--bleu-royal);
  color: var(--blanc-pur);
  box-shadow: 0.45rem 0.45rem 0 rgba(12, 28, 70, 0.22);
}

.btn-bleu:hover { transform: translate(-3px, -3px); box-shadow: 0.75rem 0.75rem 0 rgba(12, 28, 70, 0.22); }
.btn-bleu:active { transform: translate(1px, 1px); box-shadow: 0.2rem 0.2rem 0 rgba(12, 28, 70, 0.22); }

/* Bouton fantôme : le fond se remplit depuis le bas au survol */
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 3px solid var(--navy);
  z-index: 0;
}

.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ghost:hover { color: var(--jaune-soleil); transform: translateY(-3px); }
.btn-ghost:hover::before { transform: scaleY(1); }

.btn svg { width: 1.3em; height: 1.3em; flex-shrink: 0; position: relative; z-index: 1; }

/* L'icône WhatsApp s'anime légèrement au survol du bouton */
.btn:hover svg { transform: rotate(-8deg) scale(1.08); transition: transform 0.3s ease; }

/* ------------------------------------------------------------
   4. HEADER : blanc net + barre palette tricolore (DA p.4)
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  z-index: 100;
}

/* La barre palette : bleu, blanc, jaune, rouge, navy */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--bleu-royal) 0 42%,
    var(--blanc-pur) 42% 56%,
    var(--jaune-soleil) 56% 76%,
    var(--hibiscus) 76% 88%,
    var(--navy) 88% 100%);
}

.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }

/* Le logo historique du salon, dessiné en 2011. Version couleur sur les
   fonds clairs, version blanche (logo-clair) sur le navy du pied de page :
   le bleu du logo y disparaîtrait. */
.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo img {
  display: block;
  width: 124px;
  height: auto;
}

.site-header .logo { transition: transform var(--transition); }
.site-header .logo:hover img { transform: scale(1.03); }
.logo:focus-visible { outline: 3px solid var(--jaune-soleil); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 520px) {
  .logo img { width: 96px; }
}

.main-nav ul { list-style: none; display: flex; gap: 1.7rem; }

.main-nav a {
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--navy);
  padding-bottom: 0.35rem;
  border-bottom: 3px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.main-nav a:hover { color: var(--bleu-royal); }

.main-nav a.active { border-bottom-color: var(--jaune-soleil); font-weight: 700; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 46px; height: 46px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--blanc-pur);
    transform: translateY(-130%);
    transition: transform 0.3s ease;
    box-shadow: var(--ombre-douce);
    /* 8 entrées dépassent la hauteur d'un petit écran, surtout en paysage :
       sans ces deux lignes, Rendez-vous et Contact sont hors d'atteinte. */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .main-nav.open { transform: translateY(0); }

  /* Menu fermé : hors écran ET hors tabulation clavier */
  .main-nav:not(.open) { visibility: hidden; }
  .main-nav.open { visibility: visible; }

  .main-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 0; }

  .main-nav a {
    display: block;
    padding: 1rem 1.6rem;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-titre);
    border-bottom: none;
    border-left: 5px solid transparent;
  }

  .main-nav a.active { border-left-color: var(--jaune-soleil); color: var(--bleu-royal); }

  /* L'action numéro un ne doit pas se noyer dans une liste de 8 liens */
  .main-nav a[href="reservation.html"] {
    margin: 0.5rem 1.2rem;
    padding: 0.85rem 1.2rem;
    background: var(--jaune-soleil);
    color: var(--navy);
    border-left: none;
    border-radius: 999px;
    text-align: center;
  }
  .main-nav a[href="reservation.html"].active { color: var(--navy); }
}

/* ------------------------------------------------------------
   5. HERO : color blocking, cercle soleil, titrage géant
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--blanc-pur);
}


/* Ken Burns : la photo respire lentement, l'effet d'ouverture de la DA.
   Très lent et très léger : on le sent sans le voir. */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ken-burns 22s ease-out forwards;
  transform-origin: 60% 40%;
}

@keyframes ken-burns {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img { animation: none; }
}

/* Cercle soleil : le motif signature de la DA, à cheval sur le bord */
.cercle-soleil {
  position: absolute;
  top: -8vmin;
  right: -12vmin;
  width: 56vmin;
  height: 56vmin;
  border-radius: 50%;
  background: radial-gradient(circle, var(--jaune-soleil) 0 50%, rgba(245, 194, 0, 0) 72%);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(1180px, 92%);
  margin-inline: auto;
  padding: calc(var(--header-h) + 3rem) 0 5rem;
}

.hero-sub {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  max-width: 100%;
  font-size: clamp(0.72rem, 1.6vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  background: rgba(12, 28, 70, 0.5);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  backdrop-filter: blur(3px);
}

/* Trait hibiscus devant le sous-titre, comme les slides DA */
.hero-sub::before {
  content: "";
  width: 3rem;
  height: 4px;
  background: var(--hibiscus);
  flex-shrink: 0;
  transform-origin: left;
}

.hero h1 {
  color: var(--blanc-pur);
  font-size: clamp(2.7rem, 8.5vw, 6rem);
  max-width: 18ch;
  margin-bottom: 2.6rem;
  text-shadow: 0 2px 20px rgba(12, 28, 70, 0.5);
}

/* Le mot qui claque : jaune, italique, souligné hibiscus (DA p.2) */
.hero h1 em {
  font-style: italic;
  color: var(--jaune-soleil);
  position: relative;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(12, 28, 70, 0.75);
}

.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.02em;
  height: 0.09em;
  background: var(--hibiscus);
  border-radius: 99px;
}

/* Puce "Ouvert aujourd'hui" sous l'eyebrow du hero (remplie par script.js) */
/* Horaire du jour : une ligne écrite, pas une pastille à voyant vert.
   L'information reste utile, la quincaillerie de statut disparaît. */
.statut-ouverture {
  display: block;
  margin: 0 0 1.6rem;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: var(--blanc-pur);
  border-left: 3px solid var(--jaune-soleil);
  padding-left: 0.85rem;
  text-shadow: 0 1px 12px rgba(12, 28, 70, 0.5);
}

.statut-ouverture.ferme { border-left-color: rgba(255, 255, 255, 0.4); opacity: 0.85; }

/* Indice de scroll */
.hero-scroll {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.hero-scroll::after {
  content: "";
  width: 2px;
  height: 2.4rem;
  background: linear-gradient(var(--jaune-soleil), transparent);
  animation: scroll-pulse 1.8s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; transform-origin: top; }
  50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

/* Hero réduit des sous-pages : même caractère, moins de hauteur */
/* En-tête de page intérieure : typographique, sur papier.
   Le dégradé bleu à halos jaune et rouge qui servait de fond a été
   retiré : c'est le décor passe-partout qu'on retrouve sur n'importe
   quel site, il ne dit rien du salon et il écrasait le titre.
   Ce qui reste : le fil d'Ariane, un très grand titre aligné à gauche,
   et le filet de palette, déjà la signature de la barre d'en-tête. */
.hero-page {
  min-height: 0;
  background: var(--papier);
  border-bottom: 1px solid rgba(12, 28, 70, 0.1);
}

.hero-page .hero-content {
  padding: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(2.2rem, 5vw, 3.5rem);
  text-align: left;
}

.hero-page h1 {
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--navy);
  max-width: 22ch;
  margin: 0;
  text-shadow: none;
}

/* Cinq bandes : bleu, jaune, hibiscus, navy, bleu ciel du logo.
   Le même vocabulaire que la barre sous l'en-tête du site. */
.filet-palette {
  display: block;
  width: clamp(140px, 26vw, 260px);
  height: 6px;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--bleu-royal) 0 20%,
    var(--jaune-soleil) 20% 40%,
    var(--hibiscus) 40% 60%,
    var(--navy) 60% 80%,
    var(--logo-ciel) 80% 100%
  );
}

/* ------------------------------------------------------------
   6. BANDE DÉFILANTE : prestations en très grand, façon enseigne
   ------------------------------------------------------------ */
.bande-defilante {
  background: var(--bleu-madras);
  border-top: 4px solid var(--jaune-soleil);
  border-bottom: 4px solid var(--jaune-soleil);
  overflow: hidden;
  padding: 1.1rem 0;
}

.bande-defilante .defile {
  display: flex;
  gap: 2.8rem;
  width: max-content;
  animation: defilement 26s linear infinite;
}

.bande-defilante span {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--blanc-pur);
  white-space: nowrap;
}

/* Un mot sur deux en contour seulement : rythme visuel */
.bande-defilante span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--jaune-soleil);
}

@keyframes defilement {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Contenu en mouvement : il doit pouvoir s'arrêter (critère WCAG 2.2.2) */
.bande-defilante:hover .defile,
.bande-defilante:focus-within .defile { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .bande-defilante .defile { animation: none; }
}

/* ------------------------------------------------------------
   7. PLACEHOLDERS PHOTO : cadres décalés, monogramme, halo
   TODO PHOTO : chaque .photo-ph sera remplacé par un <img>
   (alt descriptif, width, height, loading="lazy").
   ------------------------------------------------------------ */
.photo-ph {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(145deg, var(--bleu-royal), var(--bleu-nuit) 70%, var(--navy));
  display: flex;
  align-items: flex-end;
}

.photo-ph.ph-jaune {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(255, 255, 255, 0.35), transparent 55%),
    linear-gradient(145deg, var(--jaune-soleil), var(--jaune-fonce) 75%, var(--hibiscus));
}

.photo-ph.ph-rouge {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(255, 255, 255, 0.25), transparent 55%),
    linear-gradient(145deg, var(--hibiscus), var(--hibiscus-fonce) 80%, var(--navy));
}

.photo-ph.ph-navy {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(22, 104, 212, 0.55), transparent 60%),
    linear-gradient(145deg, var(--bleu-acier), var(--navy));
}

.photo-ph.ph-mixte {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(245, 194, 0, 0.4), transparent 55%),
    linear-gradient(145deg, var(--bleu-royal) 25%, var(--hibiscus));
}

/* Monogramme géant en filigrane, en attendant les photos */
.photo-ph::before {
  content: "CT'";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(4rem, 12vw, 7.5rem);
  color: rgba(255, 255, 255, 0.14);
  letter-spacing: -0.04em;
}

.photo-ph .ph-label {
  position: relative;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.9rem 1.1rem;
}

.photo-ph.paysage { aspect-ratio: 16 / 9; }

/* Cadre décalé : ombre pleine jaune ou hibiscus + légère rotation */
.cadre {
  position: relative;
  border-radius: var(--radius);
  transform: rotate(-2deg);
  box-shadow: 0.9rem 0.9rem 0 var(--jaune-soleil);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.cadre:hover { transform: rotate(0deg); box-shadow: 0.6rem 0.6rem 0 var(--jaune-soleil); }

.cadre-rouge { box-shadow: 0.9rem 0.9rem 0 var(--hibiscus); transform: rotate(2deg); }

.cadre-rouge:hover { box-shadow: 0.6rem 0.6rem 0 var(--hibiscus); }

.cadre .photo-ph { border-radius: var(--radius); }

/* Sticker rotatif "Depuis 1992" posé sur les visuels */
.sticker {
  position: absolute;
  top: -1.6rem;
  right: -0.8rem;
  z-index: 3;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background: var(--hibiscus);
  color: var(--blanc-pur);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-titre);
  font-weight: 800;
  line-height: 1.05;
  transform: rotate(10deg);
  box-shadow: var(--ombre-douce);
}

.sticker small { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.sticker strong { font-size: 1.35rem; }

/* ------------------------------------------------------------
   8. SECTIONS APERÇU (accueil)
   ------------------------------------------------------------ */
.apercu-grid { display: grid; gap: 3rem; align-items: center; }

@media (min-width: 860px) {
  .apercu-grid { grid-template-columns: 1fr 1.05fr; gap: 4.5rem; }
  .apercu-grid.inverse .apercu-media { order: 2; }
}

.apercu-media { position: relative; padding: 1.6rem 1.2rem 1.2rem 0; }

.apercu-texte p { margin: 1.2rem 0 1.8rem; max-width: 34rem; }

.citation {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--bleu-royal);
  border-left: 5px solid var(--jaune-soleil);
  padding-left: 1.3rem;
  margin: 1.6rem 0;
}

.mini-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: end;
}

/* Composition vivante : les 3 vignettes décalées en hauteur */
.mini-grille > :nth-child(1) { transform: translateY(1.4rem) rotate(-2deg); }
.mini-grille > :nth-child(2) { transform: translateY(-0.8rem); }
.mini-grille > :nth-child(3) { transform: translateY(1rem) rotate(2deg); }

/* ------------------------------------------------------------
   9. BANDE CHIFFRES : les grands nombres de la maison
   ------------------------------------------------------------ */
.chiffres {
  background: var(--bleu-royal);
  color: var(--blanc-pur);
  padding: clamp(3rem, 7vw, 5rem) 0;
  position: relative;
  overflow: hidden;
}

/* Demi-cercle soleil qui déborde, motif DA */
.chiffres::after {
  content: "";
  position: absolute;
  right: -7rem;
  bottom: -9rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: var(--jaune-soleil);
  opacity: 0.92;
}

.chiffres-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.chiffres .nombre {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1;
  color: var(--jaune-soleil);
}

.chiffres .legende-chiffre {
  font-size: clamp(0.78rem, 1.6vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
  margin-top: 0.5rem;
}

/* ------------------------------------------------------------
   10. BANDEAUX CTA : gros titrage sur aplat
   ------------------------------------------------------------ */
.bandeau {
  background: var(--bleu-nuit);
  color: var(--blanc-pur);
  text-align: center;
  padding: clamp(4rem, 9vw, 7rem) 0;
  position: relative;
  overflow: hidden;
}

.bandeau::before {
  content: "";
  position: absolute;
  left: -6rem;
  top: -6rem;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  border: 3rem solid rgba(255, 255, 255, 0.08);
}

.bandeau::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -7rem;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: rgba(245, 194, 0, 0.16);
}

.bandeau .container { position: relative; z-index: 1; }

.bandeau h2 { color: var(--blanc-pur); margin-bottom: 1rem; max-width: 20ch; margin-inline: auto; }

.bandeau p { max-width: 42rem; margin: 0 auto 2.2rem; opacity: 0.92; font-size: 1.1rem; }


/* ------------------------------------------------------------
   11. PAGE HISTOIRE : récit et timeline
   ------------------------------------------------------------ */
.recit-bloc {
  display: grid;
  gap: 2.6rem;
  align-items: center;
  margin-bottom: clamp(3.5rem, 8vw, 6.5rem);
}

@media (min-width: 860px) {
  .recit-bloc { grid-template-columns: 1.05fr 1fr; gap: 4.5rem; }
  .recit-bloc.inverse .recit-media { order: 2; }
}

.recit-media { padding: 1.4rem 1.2rem 1.2rem 0; }

.recit-texte p { margin-bottom: 1.1rem; max-width: 34rem; }

.timeline { list-style: none; position: relative; margin-top: 3rem; padding-left: 2rem; }

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(var(--bleu-royal), var(--jaune-soleil), var(--hibiscus));
}

.timeline li { position: relative; padding: 0 0 2.6rem 1.6rem; }

.timeline li::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--jaune-soleil);
  border: 3px solid var(--blanc-pur);
  box-shadow: 0 0 0 4px var(--bleu-royal);
}

.timeline .annee {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--bleu-royal);
  display: block;
  margin-bottom: 0.4rem;
}

.timeline h3 { margin-bottom: 0.3rem; }

.timeline p { max-width: 36rem; }

/* ------------------------------------------------------------
   12. PAGE RÉALISATIONS : grille et avant/après
   ------------------------------------------------------------ */
.galerie {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-top: 3rem;
}

@media (min-width: 620px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .galerie { grid-template-columns: repeat(3, 1fr); } }

.galerie-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}


/* Overlay Bleu Royal au survol */
.galerie-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(22, 104, 212, 0.4);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.galerie-item:hover::after { opacity: 1; }

.galerie-item .legende {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1rem 1.1rem;
  color: var(--blanc-pur);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1rem;
  background: linear-gradient(to top, rgba(12, 28, 70, 0.85), transparent);
}

/* Slider révélateur avant/après */
.ba-slider {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  /* Même format portrait que les vignettes de la galerie, pour que
     les avant/après s'alignent avec les photos existantes. */
  aspect-ratio: 3 / 4;
  touch-action: none;
  user-select: none;
  border: 4px solid var(--navy);
}

.ba-avant, .ba-apres { position: absolute; inset: 0; }

/* TODO PHOTO : .ba-avant et .ba-apres recevront chacun un <img>
   (cheveux uniquement, sans visage) en object-fit: cover. */
.ba-avant {
  background:
    radial-gradient(100% 80% at 20% 20%, rgba(255, 255, 255, 0.12), transparent 60%),
    linear-gradient(145deg, var(--gris-froid), var(--navy));
}

.ba-apres {
  background:
    radial-gradient(100% 80% at 80% 15%, rgba(245, 194, 0, 0.5), transparent 55%),
    linear-gradient(145deg, var(--bleu-royal), var(--hibiscus));
  clip-path: inset(0 0 0 var(--pos, 50%));
}

.ba-tag {
  position: absolute;
  top: 0.9rem;
  font-family: var(--font-titre);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--blanc-pur);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}

.ba-tag.avant { left: 0.9rem; }
.ba-tag.apres { right: 0.9rem; background: var(--jaune-soleil); }

.ba-barre {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 4px;
  background: var(--jaune-soleil);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.ba-barre::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--jaune-soleil);
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ombre-douce);
}

.ba-range {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
  z-index: 3;
}

/* ------------------------------------------------------------
   13. PAGE BOUTIQUE : produits
   ------------------------------------------------------------ */
.produits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  margin-top: 3rem;
}

@media (min-width: 620px) { .produits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .produits { grid-template-columns: repeat(3, 1fr); } }

.produit {
  background: var(--blanc-pur);
  border: 3px solid var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}

.produit:hover {
  transform: translate(-4px, -4px);
  box-shadow: 0.6rem 0.6rem 0 var(--jaune-soleil);
}

.produit .photo-ph { border-radius: 0; aspect-ratio: 5 / 4; }

/* Les vrais visuels produits : detoures sur fond bleu glace, ils sont
   deja carres et centres, on ne les recadre donc pas. */
.produit img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-bottom: 3px solid var(--navy);
}

/* Les visuels sont carres : on garde ce format sur les cartes marques,
   le produit reste entier et aucune bande de raccord n'apparait. */
.marque img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.produit-corps {
  padding: 1.3rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}


.produit-corps p { font-size: 0.95rem; flex: 1; }

.prix {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--hibiscus);
}

.produit .btn { justify-content: center; font-size: 0.92rem; padding: 0.85rem 1.2rem; }

/* ------------------------------------------------------------
   14. PAGE TARIFS
   ------------------------------------------------------------ */
.tarifs-grille { display: grid; gap: 2rem; margin-top: 3rem; }

@media (min-width: 860px) { .tarifs-grille { grid-template-columns: 1fr 1fr; } }

.tarifs-cat {
  background: var(--blanc-pur);
  border: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem;
  position: relative;
}

/* Liseré coloré en tête de carte, comme les cartes de la DA */
.tarifs-cat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bleu-royal);
}

.tarifs-cat:nth-child(2)::before { background: var(--jaune-soleil); }
.tarifs-cat:nth-child(3)::before { background: var(--hibiscus); }
.tarifs-cat:nth-child(4)::before { background: var(--navy); }

.tarifs-cat h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.2rem; }

.tarifs-liste { list-style: none; }

.tarifs-liste li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.8rem 0;
}

.tarifs-liste li + li { border-top: 1.5px dashed rgba(12, 28, 70, 0.2); }

.tarifs-liste .presta { font-weight: 500; }

.tarifs-liste .points { flex: 1; border-bottom: 2px dotted rgba(12, 28, 70, 0.3); transform: translateY(-4px); }

.tarifs-liste .prix { font-size: 1.15rem; white-space: nowrap; color: var(--bleu-royal); }

/* ------------------------------------------------------------
   15. PAGE CONTACT
   ------------------------------------------------------------ */
.contact-grid { display: grid; gap: 3rem; margin-top: 3rem; }

@media (min-width: 860px) { .contact-grid { grid-template-columns: 1.1fr 1fr; } }

.btn-wa-grand { font-size: clamp(1.05rem, 2.4vw, 1.3rem); padding: 1.3rem 2.5rem; }

.info-bloc { margin-top: 2.2rem; }

.info-bloc h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 0.8rem; }

.horaires { list-style: none; max-width: 26rem; }

.horaires li {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1.5px dashed rgba(12, 28, 70, 0.2);
}

.horaires .ferme { color: var(--hibiscus); font-weight: 700; }

.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 3px solid var(--navy);
  box-shadow: 0.7rem 0.7rem 0 var(--jaune-soleil);
  min-height: 340px;
}

.map-wrap iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ------------------------------------------------------------
   16. FIL D'ARIANE
   ------------------------------------------------------------ */
.ariane { font-size: 0.85rem; letter-spacing: 0.08em; margin-bottom: 1.2rem; opacity: 0.9; }

.hero-page .ariane {
  color: var(--gris-froid);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1.4rem;
  opacity: 1;
}

.hero-page .ariane a { color: var(--bleu-royal); }
.hero-page .ariane a:hover { color: var(--hibiscus); }

/* ------------------------------------------------------------
   17. FOOTER : navy profond + signature "Belle. Depuis 1992."
   ------------------------------------------------------------ */
.site-footer {
  background: var(--bleu-madras);
  color: rgba(255, 255, 255, 0.95);
  padding: 4rem 0 2rem;
  font-size: 0.95rem;
  position: relative;
  overflow: hidden;
}

/* Barre palette en haut du footer, écho du header */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg,
    var(--bleu-royal) 0 42%,
    var(--blanc-pur) 42% 56%,
    var(--jaune-soleil) 56% 76%,
    var(--hibiscus) 76% 88%,
    var(--navy) 88% 100%);
}

.footer-statement {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--blanc-pur);
  margin-bottom: 3rem;
}

.footer-statement em { color: var(--jaune-soleil); font-style: normal; }

.footer-grid { display: grid; gap: 2.2rem; margin-bottom: 2.8rem; }

@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.site-footer .logo { margin-bottom: 0.9rem; }
.site-footer .logo img { width: 180px; }

.site-footer h3 { color: #FFFFFF; font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 1rem; }

.site-footer ul { list-style: none; }
.site-footer li { padding: 0.3rem 0; }

.site-footer a { color: rgba(255, 255, 255, 0.95); transition: color var(--transition); }
.site-footer a:hover { color: var(--jaune-soleil); }

.footer-bas {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: space-between;
  font-size: 0.82rem;
  opacity: 0.9;
}

.footer-bas a { color: rgba(255, 255, 255, 0.9); }

/* ------------------------------------------------------------
   18. BOUTON WHATSAPP FLOTTANT (Hibiscus)
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   ACTIONS FLOTTANTES : réserver (prioritaire) puis WhatsApp
   ------------------------------------------------------------ */
.actions-flottantes {
  position: fixed;
  right: 1.3rem;
  bottom: 1.3rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
}

/* Bouton principal : pastille allongée, plus visible que l'icône seule */
.rdv-flottant {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.3rem;
  border-radius: 999px;
  background: var(--bleu-royal);
  color: var(--blanc-pur);
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 10px 26px rgba(22, 104, 212, 0.45);
  transition: transform var(--transition), box-shadow var(--transition);
}

.rdv-flottant svg { width: 21px; height: 21px; flex-shrink: 0; }

.rdv-flottant:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(22, 104, 212, 0.55);
}

.rdv-flottant:focus-visible,
.wa-flottant:focus-visible { outline: 3px solid var(--jaune-soleil); outline-offset: 3px; }

/* Sur petits écrans, le libellé se raccourcit sans disparaître : deux
   pastilles muettes empilées n'expliquent pas ce qui les différencie. */
@media (max-width: 520px) {
  .rdv-flottant {
    flex-direction: column;
    gap: 0;
    padding: 0;
    width: 62px; height: 62px;
    border-radius: 50%;
    justify-content: center;
  }
  .rdv-flottant svg { width: 20px; height: 20px; }
  /* Le mot complet ne tient pas, mais "RDV" oui : le bouton reste explicite */
  .rdv-flottant span { font-size: 0; line-height: 1; }
  .rdv-flottant span::before {
    content: "RDV";
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }
}

.wa-flottant {
  position: relative;
  z-index: 90;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--vert-wa);
  color: var(--blanc-pur);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  transition: transform var(--transition), box-shadow var(--transition);
}

/* Un seul appel discret à l'apparition, pas de pulsation infinie */
.wa-flottant::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.45);
  opacity: 0;
  animation: pulse-wa 2.2s ease-out 1s 1;
}

@keyframes pulse-wa {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.3); opacity: 0; }
}

.wa-flottant:hover { transform: scale(1.1) translateY(-2px); }

.wa-flottant svg { width: 32px; height: 32px; }

/* ------------------------------------------------------------
   31. ENTRÉE DU HERO : le titre se dévoile par en dessous.
   Chaque élément monte derrière un masque, en cascade.
   C'est le seul moment orchestré du site.
   ------------------------------------------------------------ */
.hero-content > * {
  animation: monte-masque 0.75s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  clip-path: inset(-20% -20% -20% -20%);
}

.hero-content > *:nth-child(1) { animation-delay: 0.15s; }
.hero-content > *:nth-child(2) { animation-delay: 0.28s; }
.hero-content > *:nth-child(3) { animation-delay: 0.41s; }
.hero-content > *:nth-child(4) { animation-delay: 0.54s; }

@keyframes monte-masque {
  from { opacity: 0; transform: translateY(1.4rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Le trait rouge de l'eyebrow se trace en s'ouvrant */
.hero-sub::before { animation: trace-trait 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards; }

@keyframes trace-trait {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Le soulignement hibiscus de "belle." se trace après le titre */
.hero h1 em::after {
  transform-origin: left;
  animation: trace-trait 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.95s backwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero-content > *,
  .hero-sub::before,
  .hero h1 em::after { animation: none; }
}

/* ------------------------------------------------------------
   19. ANIMATIONS AU SCROLL (état initial, script.js anime)
   Sans JS les éléments restent visibles.
   ------------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(44px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------
   20. LIVRE D'OR : livre 3D à pages tournantes (accueil)
   Pages vierges lignées, prêtes à recevoir les scans du vrai
   livre d'or du salon. Couverture Bleu Royal, ruban Hibiscus,
   ombre dure jaune : le langage de la maison.
   ------------------------------------------------------------ */
.livre-or { background: var(--creme); overflow: hidden; }

.livre-grid { display: grid; gap: 3rem; align-items: center; }

@media (min-width: 860px) {
  .livre-grid { grid-template-columns: 1fr 1fr; gap: 4.5rem; }
}

.livre-texte p { margin: 1.2rem 0 1.8rem; max-width: 34rem; }

.book-scene {
  perspective: 1800px;
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.book {
  position: relative;
  width: min(330px, 74vw);
  aspect-ratio: 17 / 22;
  transform-style: preserve-3d;
  transform: rotateX(4deg) rotate(-2deg);
  filter: drop-shadow(0.9rem 0.9rem 0 var(--jaune-soleil));
}

.paper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  cursor: pointer;
}

.paper.flipped { transform: rotateY(-180deg); }

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px var(--radius) var(--radius) 6px;
  overflow: hidden;
}

.face.back {
  transform: rotateY(180deg);
  border-radius: var(--radius) 6px 6px var(--radius);
}

/* Pages : papier crème ligné, vierge (les scans prendront place ici) */
.face.page {
  background-color: var(--papier);
  background-image:
    linear-gradient(90deg, rgba(12, 28, 70, 0.08) 0, transparent 5%),
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(12, 28, 70, 0.12) 30px 31px);
  background-position: 0 0, 0 64px;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% calc(100% - 110px);
  border: 3px solid var(--navy);
}

.face.page .pn {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(12, 28, 70, 0.4);
}

/* Note "à venir" élégante sur la première page du livre d'or */
.face.page .page-note {
  position: absolute;
  top: 26%;
  left: 12%;
  right: 12%;
  text-align: center;
  font-family: var(--font-titre);
  font-weight: 700;
  color: rgba(12, 28, 70, 0.5);
  font-size: 0.9rem;
  line-height: 1.6;
}

.face.page .page-note em { font-style: italic; color: var(--hibiscus); }

/* Couverture Bleu Royal, titrage en serif, ruban Hibiscus */
.face.cover {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(255, 255, 255, 0.2), transparent 55%),
    var(--bleu-royal);
  border: 3px solid var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--blanc-pur);
}

.face.cover .cover-title {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  letter-spacing: -0.02em;
}

.face.cover .cover-rule {
  width: 3rem;
  height: 4px;
  border-radius: 99px;
  background: var(--jaune-soleil);
}

.face.cover .cover-sub {
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.face.cover .ruban {
  position: absolute;
  top: -6px;
  right: 2rem;
  width: 1.5rem;
  height: 5.5rem;
  background: var(--hibiscus);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
}

.face.endpaper {
  background: var(--bleu-nuit);
  border: 3px solid var(--navy);
}

.book-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.book-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--navy);
  background: var(--blanc-pur);
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.book-btn:hover { background: var(--navy); color: var(--jaune-soleil); transform: translateY(-3px); }

.book-btn:disabled { opacity: 0.3; pointer-events: none; }

.book-count {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bleu-royal);
  min-width: 7.5rem;
  text-align: center;
}

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

/* ------------------------------------------------------------
   21. ZONE DESSERVIE (contact) : signal SEO local, visible et sobre
   ------------------------------------------------------------ */
.zones {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1.5px dashed rgba(12, 28, 70, 0.2);
}

.zones h2 {
  font-size: 0.85rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bleu-royal);
  margin-bottom: 0.8rem;
}

.zones p {
  font-size: 0.92rem;
  line-height: 2.1;
  color: rgba(12, 28, 70, 0.65);
  max-width: 100%;
}

/* ------------------------------------------------------------
   22. LIEN RÉSERVER PAR PRESTATION (tarifs)
   ------------------------------------------------------------ */
.cat-rdv {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.3rem;
  min-height: 44px;
  padding: 0.6rem 0;
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu-royal);
  transition: color var(--transition), gap var(--transition);
}

.cat-rdv::after { content: "→"; }

.cat-rdv:hover { color: var(--hibiscus); gap: 0.8rem; }

/* ------------------------------------------------------------
   23. PAGE MENTIONS LÉGALES
   ------------------------------------------------------------ */
.page-legale .container { max-width: 820px; }

.page-legale h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 2.6rem 0 0.7rem;
}

.page-legale h2:first-of-type { margin-top: 0; }

.page-legale p { margin-bottom: 0.9rem; max-width: 100%; }

/* Liste des prestataires techniques */
.liste-legale { margin: 0 0 1rem 1.2rem; }
.liste-legale li { margin-bottom: 0.6rem; line-height: 1.6; }

/* ------------------------------------------------------------
   25. BANDEAU COOKIES (Google Analytics, consentement CNIL)
   ------------------------------------------------------------ */
.cookie-banniere {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 95;
  max-width: 600px;
  margin-inline: auto;
  background: var(--bleu-madras);
  color: var(--blanc-pur);
  border-radius: var(--radius);
  box-shadow: var(--ombre-douce);
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  justify-content: space-between;
}

.cookie-banniere p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  flex: 1 1 16rem;
}

.cookie-actions { display: flex; gap: 0.6rem; }

.btn-cookie {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--transition);
}

.btn-cookie:hover { transform: translateY(-2px); }

.btn-cookie-ok {
  background: var(--jaune-soleil);
  color: var(--navy);
  border-color: var(--jaune-soleil);
}

.btn-cookie-non {
  background: transparent;
  color: var(--blanc-pur);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Mobile : bandeau cookies compact et CTA du hero dégagés (audit) */
@media (max-width: 640px) {
  /* Contenu du hero aligné en haut et rythme resserré : les CTA
     ne descendent plus dans la zone du bandeau cookies. */
  .hero { align-items: flex-start; }
  .hero-content { padding-top: calc(var(--header-h) + 1.4rem); padding-bottom: 2rem; }
  .hero-sub { margin-bottom: 1rem; }
  .statut-ouverture { margin-bottom: 1rem; }
  .hero h1 { font-size: clamp(2.2rem, 8vw, 6rem); margin-bottom: 1.5rem; }
  .hero-actions { gap: 0.7rem; }
  .hero-scroll { display: none; }

  .cookie-banniere {
    left: 0.6rem; right: 0.6rem; bottom: 0.6rem;
    padding: 0.8rem 0.9rem;
    gap: 0.6rem;
  }
  .cookie-banniere p { font-size: 0.82rem; flex-basis: 100%; }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn-cookie { flex: 1; }

}

/* Tant que le bandeau cookies est affiché, on remonte les boutons flottants.
   La classe posée par cookies.js sert de repli aux navigateurs sans :has,
   sinon le bandeau recouvre les deux boutons et les rend incliquables.
   Le chevauchement va jusqu'aux tablettes, d'où la limite à 900px. */
@media (max-width: 900px) {
  body.cookies-visibles .actions-flottantes,
  body:has(.cookie-banniere) .actions-flottantes { bottom: 9rem; }
}

/* Sous 480px le bandeau est compact : une remontee de 9rem projetait les
   boutons flottants en plein milieu du titre. On la reduit d autant. */
@media (max-width: 480px) {
  body.cookies-visibles .actions-flottantes,
  body:has(.cookie-banniere) .actions-flottantes { bottom: 6.5rem; }
}

/* Page réservation : bloc du calendrier et état d'attente */
.reserve-bloc {
  margin-top: 2.5rem;
  border: 3px solid var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--blanc-pur);
  box-shadow: 0.6rem 0.6rem 0 var(--jaune-soleil);
}

/* L'embed officiel Cal.com ajuste sa propre hauteur : on ne fixe qu'un
   minimum le temps du chargement, sans jamais créer de défilement interne. */
.cal-inline { width: 100%; }
/* Réserve la place pendant le chargement, puis laisse l'embed dicter sa
   hauteur : c'est lui qui la recalcule à chaque étape de la réservation. */
.cal-inline:empty { min-height: 620px; }

/* Si Cal.com est bloque (bloqueur de pub, DNS filtrant, reseau d entreprise),
   la zone restait vide et muette pendant 620px. On y ecrit quoi faire. */
.cal-inline:empty::before {
  content: "Le calendrier met un instant à s’afficher. S’il ne vient pas, les liens juste en dessous permettent de réserver directement.";
  display: block;
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gris-froid);
  max-width: 34rem;
  margin-inline: auto;
}
.cal-inline[hidden] { display: none; }

/* Choix coiffure / esthétique au-dessus du calendrier */
.reserve-onglets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-top: 2.5rem;
}

@media (min-width: 620px) { .reserve-onglets { grid-template-columns: 1fr 1fr; } }

.reserve-onglet {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  padding: 1rem 1.3rem;
  border: 3px solid var(--navy);
  border-radius: var(--radius);
  background: var(--blanc-pur);
  color: var(--navy);
  cursor: pointer;
  font-family: var(--font-texte);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

.reserve-onglet strong { font-family: var(--font-titre); font-weight: 800; font-size: 1.15rem; }
.reserve-onglet span { font-size: 0.88rem; opacity: 0.75; }

.reserve-onglet:hover { transform: translate(-3px, -3px); box-shadow: 0.5rem 0.5rem 0 var(--jaune-soleil); }

.reserve-onglet.actif {
  background: var(--bleu-royal);
  border-color: var(--bleu-royal);
  color: var(--blanc-pur);
}

.reserve-onglet.actif span { opacity: 0.9; }

.reserve-onglet:focus-visible { outline: 3px solid var(--hibiscus); outline-offset: 3px; }

.reserve-secours { margin-top: 1rem; font-size: 0.95rem; opacity: 0.85; }

.etapes-reserve { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* ------------------------------------------------------------
   26. HERO : double appel à l'action
   ------------------------------------------------------------ */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.btn-ghost-clair {
  background: transparent;
  color: var(--blanc-pur);
  border: 3px solid rgba(255, 255, 255, 0.7);
}

.btn-ghost-clair:hover {
  background: var(--blanc-pur);
  color: var(--navy);
  transform: translateY(-3px);
}

/* ------------------------------------------------------------
   28. NOS SERVICES (accueil) : 4 cartes liées aux tarifs
   ------------------------------------------------------------ */
.services-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 620px) { .services-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .services-grille { grid-template-columns: repeat(4, 1fr); } }

.service-carte {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--blanc-pur);
  border: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem 1.4rem;
  position: relative;
  color: var(--navy);
  transition: transform var(--transition), box-shadow var(--transition);
}

.service-carte::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bleu-royal);
}

.service-carte.sc-jaune::before { background: var(--jaune-soleil); }
.service-carte.sc-rouge::before { background: var(--hibiscus); }
.service-carte.sc-navy::before  { background: var(--navy); }

/* Cinquième carte : l'esthétique occupe toute la largeur en bas de grille */
.service-carte.sc-large::before { background: var(--jaune-soleil); }
@media (min-width: 720px) { .service-carte.sc-large { grid-column: 1 / -1; } }

.service-carte:hover {
  transform: translate(-4px, -4px);
  box-shadow: 0.6rem 0.6rem 0 var(--jaune-soleil);
}

.service-carte h3 { font-size: 1.3rem; }

.service-carte p { font-size: 0.92rem; line-height: 1.55; flex: 1; }

.service-lien {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu-royal);
}

.service-lien::after { content: " →"; }

/* Ancres des catégories tarifs sous le header fixe */
.tarifs-cat { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ------------------------------------------------------------
   29. CARTE CADEAU : bandeau navy avec bouton
   ------------------------------------------------------------ */
.carte-cadeau {
  background: var(--bleu-madras);
  color: var(--blanc-pur);
  padding: clamp(3rem, 7vw, 5rem) 0;
  position: relative;
  overflow: hidden;
}

.carte-cadeau::after {
  content: "";
  position: absolute;
  left: -6rem;
  bottom: -8rem;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: rgba(245, 194, 0, 0.15);
}

.cadeau-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.6rem;
  align-items: center;
}

@media (min-width: 860px) { .cadeau-inner { grid-template-columns: 1fr auto; } }

.carte-cadeau h2 { color: var(--blanc-pur); font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 0.6rem; }

.carte-cadeau p { max-width: 36rem; opacity: 0.92; margin: 0; }

/* ------------------------------------------------------------
   30. FAQ (contact) : accordéons natifs
   ------------------------------------------------------------ */
.faq { margin-top: 3.5rem; }

.faq h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 1rem; }

.faq-item {
  border-bottom: 1.5px dashed rgba(12, 28, 70, 0.2);
}

.faq-item summary {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.9rem 2rem 0.9rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--bleu-royal);
  transition: transform var(--transition);
}

.faq-item[open] summary::after { content: "−"; color: var(--hibiscus); }

.faq-item p { padding: 0 0 1rem; max-width: 46rem; font-size: 0.95rem; }

/* ------------------------------------------------------------
   31. HORAIRES DANS LE FOOTER
   ------------------------------------------------------------ */
.footer-horaires {
  font-size: 0.85rem;
  line-height: 1.7;
  opacity: 0.8;
  margin-top: 0.4rem;
}

/* ------------------------------------------------------------
   24. VRAIES PHOTOS (banque du salon)
   Les <img> remplacent les placeholders .photo-ph.
   ------------------------------------------------------------ */

/* Hero : photo réelle sous un voile bleu pour la lisibilité du texte */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  z-index: 0;
}
.hero-voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(12,28,70,0.9) 0%, rgba(12,28,70,0.6) 42%, rgba(12,28,70,0.2) 70%, rgba(12,28,70,0.08) 100%),
    linear-gradient(180deg, rgba(12,28,70,0.15) 40%, rgba(12,28,70,0.72) 100%);
}

/* Portrait de la section histoire (dans le cadre décalé) */
.cadre img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Trois vignettes de l'aperçu réalisations */
.mini-grille img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--ombre-douce);
}

/* Galerie de la page réalisations */
.galerie-item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.galerie-item:hover img { transform: scale(1.07); }

/* ------------------------------------------------------------
   20. PAGE ESTHÉTIQUE & BIEN-ÊTRE (esthetique.html)
   Ambiance plus douce que la coiffure : fonds crème et bleu glace,
   respiration, mais même palette et mêmes typographies.
   ------------------------------------------------------------ */

/* Bloc ambiance : le cadre apaisant + la petite touche d'humour */
.ambiance {
  background: var(--creme);
  border: 3px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: 0.6rem 0.6rem 0 var(--jaune-soleil);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  margin-top: 2.5rem;
}

.ambiance p { font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 48rem; }
.ambiance p + p { margin-top: 1rem; }
.ambiance .clin { color: var(--hibiscus); font-style: italic; }

/* Groupes de soins */
.soin-groupe { margin-top: clamp(2.5rem, 6vw, 4rem); }

.soin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: 1.6rem;
}

@media (min-width: 620px) { .soin-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .soin-grid { grid-template-columns: repeat(3, 1fr); } }

.soin-card {
  background: var(--blanc-pur);
  border: 2px solid rgba(12, 28, 70, 0.12);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.soin-card:hover {
  transform: translateY(-4px);
  border-color: var(--bleu-royal);
  box-shadow: var(--ombre-douce);
}

.soin-card h3 { font-size: 1.15rem; }

.soin-card p { font-size: 0.95rem; margin-top: 0.45rem; }

.soin-badge {
  display: inline-block;
  font-family: var(--font-titre);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--jaune-soleil);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Encart du mercredi dédié */
.jour-dedie { display: grid; gap: 1.6rem; align-items: center; margin-top: clamp(2.5rem, 6vw, 4rem); }

@media (min-width: 860px) { .jour-dedie { grid-template-columns: 1fr 1fr; } }

.jour-dedie .encart {
  background: var(--bleu-royal);
  color: var(--blanc-pur);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  position: relative;
  overflow: hidden;
}

.jour-dedie .encart::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: rgba(245, 194, 0, 0.22);
}

.jour-dedie .encart h2 { color: var(--blanc-pur); position: relative; z-index: 1; }
.jour-dedie .encart p { position: relative; z-index: 1; opacity: 0.94; margin-top: 0.6rem; }

.jour-dedie .grand-jour {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 4rem);
  line-height: 1;
  color: var(--jaune-soleil);
  margin-bottom: 0.4rem;
}

/* ------------------------------------------------------------
   21. TARIFS : prestations à tarif variable
   Lien "Demander le tarif" quand le prix dépend de la longueur,
   de la nature ou de la technique.
   ------------------------------------------------------------ */
.tarifs-note {
  font-size: 0.95rem;
  opacity: 0.85;
  margin-top: 1.1rem;
  max-width: 46rem;
}

.pastille-demande,
.prix-demande {
  display: inline-block;
  min-height: 44px;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
  padding: 0.26rem 0.7rem;
  border-radius: 999px;
  border: 2px solid var(--bleu-royal);
  color: var(--bleu-royal);
  background: transparent;
  text-decoration: none;
}

.prix-demande { transition: background var(--transition), color var(--transition); }
.prix-demande:hover { background: var(--bleu-royal); color: var(--blanc-pur); }

.pastille-demande { border-color: rgba(22, 104, 212, 0.45); cursor: default; }

/* Lien esthétique du mercredi dans la grille horaires */
.horaires .esth a { color: var(--hibiscus); font-weight: 700; }

/* ------------------------------------------------------------
   22. BOUTIQUE : cartes des marques exclusives
   ------------------------------------------------------------ */
.marques { display: grid; grid-template-columns: 1fr; gap: 1.8rem; margin-top: 2.2rem; }

@media (min-width: 760px) { .marques { grid-template-columns: repeat(2, 1fr); } }

.marque {
  background: var(--blanc-pur);
  border: 3px solid var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0.6rem 0.6rem 0 var(--hibiscus);
  transition: transform var(--transition), box-shadow var(--transition);
}

.marque:hover { transform: translate(-4px, -4px); box-shadow: 0.9rem 0.9rem 0 var(--hibiscus); }

.marque:nth-child(2) { box-shadow: 0.6rem 0.6rem 0 var(--bleu-royal); }
.marque:nth-child(2):hover { box-shadow: 0.9rem 0.9rem 0 var(--bleu-royal); }

.marque .photo-ph { border-radius: 0; }

.marque-corps {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.marque-corps h3 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.marque-corps p { flex: 1; }
.marque-corps .btn { align-self: flex-start; }

.marque-badge {
  align-self: flex-start;
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--jaune-soleil);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}

/* ------------------------------------------------------------
   23. GALERIE DYNAMIQUE : images dans les sliders avant/après
   (paires publiées depuis le dashboard, injectées par galerie.js)
   ------------------------------------------------------------ */
.ba-avant img,
.ba-apres img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------
   24. LABEL OFFICIEL "Salon Haute Qualité Coiffure"
   Signe de confiance : sobre, jamais tape-à-l'œil.
   ------------------------------------------------------------ */
.label-bandeau {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.3rem;
  flex-wrap: wrap;
  margin-top: 2.8rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--blanc-pur);
}

.label-bandeau img {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  background: var(--blanc-pur);
  border-radius: 50%;
  padding: 3px;
}

.label-bandeau p { margin: 0; font-size: 0.95rem; line-height: 1.55; flex: 1 1 16rem; }

.label-bandeau strong {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

/* Variante sur fond clair (page Notre Histoire) */
.label-bandeau.label-clair {
  background: var(--blanc-pur);
  border: 3px solid var(--navy);
  box-shadow: 0.5rem 0.5rem 0 var(--jaune-soleil);
  color: var(--navy);
}

/* ------------------------------------------------------------
   25. RÉSERVATION EN LIGNE (emplacement Cal.com) + QUESTION OUVERTE
   ------------------------------------------------------------ */
.reserve-enligne { margin-top: clamp(2.5rem, 6vw, 4rem); }

.reserve-enligne p { max-width: 44rem; margin-top: 0.6rem; }

/* Règle d'annulation, dite avec tact */
.reserve-regle {
  font-size: 0.92rem;
  padding-left: 1rem;
  border-left: 3px solid var(--jaune-soleil);
  opacity: 0.85;
}

/* ------------------------------------------------------------
   29. RESPIRATION : sa voix en très grand, entre deux sections.
   C'est le moment d'arrêt du scroll, le "wow" éditorial.
   ------------------------------------------------------------ */
.respiration {
  background: var(--bleu-madras);
  color: var(--blanc-pur);
  padding: clamp(4rem, 11vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}

/* Guillemet géant en filigrane, signature typographique */
.respiration::before {
  content: "“";
  position: absolute;
  top: -3rem;
  left: 2%;
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(14rem, 30vw, 26rem);
  line-height: 1;
  color: rgba(245, 194, 0, 0.12);
  pointer-events: none;
}

.respiration-phrase {
  position: relative;
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(1.9rem, 5.2vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

/* La chute de la phrase, en jaune : c'est elle qu'on retient */
.respiration-phrase span { color: var(--jaune-soleil); }

/* Variante claire, pour alterner d'une page à l'autre */
.respiration.respiration-claire {
  background: var(--jaune-soleil);
  color: var(--navy);
}

.respiration.respiration-claire::before { color: rgba(12, 28, 70, 0.12); }
.respiration.respiration-claire .respiration-phrase span { color: var(--hibiscus); }

/* ------------------------------------------------------------
   30. COMMENT ÇA SE PASSE : le déroulé d'une visite, rassurant
   ------------------------------------------------------------ */
.etapes-accueil { background: var(--bleu-glace); }

.etapes {
  list-style: none;
  counter-reset: etape;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 2.5rem;
}

@media (min-width: 700px) { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .etapes { grid-template-columns: repeat(4, 1fr); } }

.etapes li {
  position: relative;
  background: var(--blanc-pur);
  border-radius: var(--radius);
  padding: 2.4rem 1.4rem 1.5rem;
  border-top: 5px solid var(--jaune-soleil);
}

.etapes li:nth-child(2) { border-top-color: var(--bleu-royal); }
.etapes li:nth-child(3) { border-top-color: var(--hibiscus); }
.etapes li:nth-child(4) { border-top-color: var(--navy); }

/* Numéro d'étape en pastille, à cheval sur le bord de la carte */
.etape-num {
  position: absolute;
  top: -1.1rem;
  left: 1.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--jaune-soleil);
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ombre-douce);
}

.etapes h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.etapes p { font-size: 0.94rem; line-height: 1.6; }

/* ------------------------------------------------------------
   26. SECTION ROSE-MARIE (accueil) : le moment humain, haut de page
   ------------------------------------------------------------ */
.section-histoire { background: var(--creme); }

/* Citation d'ouverture : plus grande, c'est sa voix qu'on entend */
.citation.grande {
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.3;
  border-left-width: 6px;
}

.signature-rm {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hibiscus);
  margin: 0.9rem 0 1.4rem;
}


.question-ouverte {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border-radius: var(--radius);
  background: var(--creme);
  border: 3px solid var(--navy);
  box-shadow: 0.5rem 0.5rem 0 var(--hibiscus);
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: center;
  justify-content: space-between;
}

.question-ouverte h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.question-ouverte p { margin-top: 0.5rem; max-width: 34rem; }
.question-ouverte .btn { flex-shrink: 0; }

.ba-slider .legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1rem 1.1rem;
  color: var(--blanc-pur);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1rem;
  background: linear-gradient(to top, rgba(12, 28, 70, 0.85), transparent);
  pointer-events: none;
}

/* ------------------------------------------------------------
   32. CORRECTIFS D'AUDIT (07/08/2026)
   Accessibilité clavier, cibles tactiles, nouveaux blocs de la
   bascule vers la réservation en ligne.
   ------------------------------------------------------------ */

/* Lien d'évitement : premier élément focusable de chaque page */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.9rem 1.4rem;
  background: var(--navy);
  color: var(--blanc-pur);
  font-family: var(--font-titre);
  font-weight: 800;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
  outline: 3px solid var(--jaune-soleil);
  outline-offset: 2px;
}

/* Deux boutons côte à côte sous un bandeau ou un bloc de réservation */
.bandeau-actions,
.reserve-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 1.6rem;
}

.reserve-actions { justify-content: flex-start; }

/* Label officiel en version compacte, sur les pages de décision */
.label-compact {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
  padding: 0.9rem 1.2rem;
  border: 2px solid rgba(12, 28, 70, 0.14);
  border-radius: var(--radius);
  background: var(--papier);
  font-size: 0.95rem;
}

.label-compact img { flex: 0 0 auto; }

/* Horaire du mercredi, sur la page esthétique */
.jour-horaire {
  position: relative;
  z-index: 1;
  font-family: var(--font-titre);
  font-weight: 700;
  color: var(--jaune-soleil);
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

/* Renvois discrets vers les avis et le téléphone */
.map-avis,
.livre-avis {
  margin-top: 0.9rem;
  font-size: 0.92rem;
}

.footer-tel a { font-weight: 700; }

/* Les effets de survol décoratifs restent collés après un tap sur mobile :
   on les réserve donc aux pointeurs fins. */
@media (hover: none) {
  .cadre:hover,
  .produit:hover,
  .marque:hover,
  .soin-card:hover,
  .service-carte:hover,
  .reserve-onglet:hover,
  .galerie-item:hover img {
    transform: none;
    box-shadow: none;
  }
  .reserve-onglet.actif { transform: none; }
}

/* Cibles tactiles et chevauchements en bas d'écran */
@media (max-width: 640px) {
  /* Les boutons flottants couvraient "Espace pro" et le lien Cookies,
     qui sert au retrait du consentement. */
  .site-footer { padding-bottom: 10rem; }

  .btn-cookie { padding: 0.75rem 1.3rem; }
}

/* ------------------------------------------------------------
   33. LA VISITE EN VIDÉO
   La vidéo s'agrandit au fil du défilement. L'effet est piloté par la
   position réelle de la page (variable --p, de 0 à 1, posée par
   script.js) : rien n'est détourné, la molette, la barre d'espace,
   les flèches et le geste tactile gardent leur comportement natif.

   La source fait 478x270 : au-delà d'environ 720px de large elle
   devient molle, d'où le plafond posé sur .film-cadre.
   ------------------------------------------------------------ */
.film {
  --p: 0;
  background: var(--navy);
  color: var(--blanc-pur);
}

/* La piste donne la distance de défilement pendant laquelle l'image grandit */
.film-piste { height: 230vh; position: relative; }

.film-collant {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vh, 2rem);
  padding: calc(var(--header-h) + 1rem) 1rem 2rem;
  overflow: hidden;
}

/* Les deux titres s'écartent doucement pendant que l'image grandit */
.film-texte { text-align: center; z-index: 2; }

.film-texte .section-label {
  color: var(--jaune-soleil);
  transform: translateY(calc(var(--p) * -1.4rem));
  opacity: calc(1 - var(--p) * 0.5);
}

.film-texte h2 {
  color: var(--blanc-pur);
  margin: 0.3rem 0 0;
  transform: translateY(calc(var(--p) * -1rem));
}

.film-cadre {
  position: relative;
  /* L'agrandissement vise exactement le plafond : avec une largeur fixe,
     l'image butait sur max-width avant la fin de la course et la moitié
     du défilement ne produisait plus rien à l'écran. */
  width: calc(320px + var(--p) * min(440px, 94vw - 320px));
  max-width: min(94vw, 760px);
  aspect-ratio: 478 / 270;
  border-radius: calc(var(--radius) + var(--p) * 6px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  background: #000;
}

.film-cadre video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Voile qui s'efface : l'image se révèle en même temps qu'elle grandit */
.film-cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 28, 70, 0.55);
  opacity: calc(1 - var(--p));
  pointer-events: none;
  /* Pas de transition : la valeur est déjà pilotée par le défilement,
     une transition par-dessus ne ferait qu'ajouter du retard à l'image. */
}

.film-legende {
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  opacity: var(--p);
}

/* Bouton son : la vidéo démarre muette, c'est la condition de la
   lecture automatique. Le son reste un choix de la visiteuse. */
.film-son {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(12, 28, 70, 0.72);
  color: var(--blanc-pur);
  font-family: var(--font-texte);
  font-size: 0.85rem;
  cursor: pointer;
  opacity: var(--p);
  transition: background var(--transition), border-color var(--transition);
}

.film-son:hover { background: var(--bleu-royal); border-color: var(--bleu-royal); }
.film-son:focus-visible { outline: 3px solid var(--jaune-soleil); outline-offset: 3px; }
.film-son[aria-pressed="true"] { background: var(--jaune-soleil); border-color: var(--jaune-soleil); color: var(--navy); }

@media (max-width: 620px) {
  .film-piste { height: 200vh; }
  .film-cadre { width: calc(62vw + var(--p) * 32vw); }
  .film-son-txt { display: none; }
  .film-son { padding: 0.55rem; width: 44px; justify-content: center; }
}

/* Mouvement réduit : plus d'agrandissement, la vidéo est posée à sa
   taille finale et la piste n'ajoute plus de défilement inutile. */
@media (prefers-reduced-motion: reduce) {
  .film-piste { height: auto; }
  .film-collant { position: static; height: auto; padding: clamp(3rem, 8vh, 5rem) 1rem; }
  .film-cadre { width: min(94vw, 760px); }
  .film-cadre::after { opacity: 0; }
  .film-legende, .film-son { opacity: 1; }
  .film-texte .section-label, .film-texte h2 { transform: none; opacity: 1; }
}

/* Vidéo d'accès, sur la page Contact */


/* ------------------------------------------------------------
   34. LABEL DANS L'EN-TÊTE
   La seule reconnaissance officielle du salon, visible en permanence
   plutôt qu'une seule fois en bas de l'accueil.
   ------------------------------------------------------------ */
.header-inner { position: relative; }

/* Ordre voulu sur grand écran : logo, menu, puis le label tout à droite */
@media (min-width: 1100px) {
  .site-header .logo { order: 1; }
  .site-header .main-nav { order: 2; margin-left: auto; }
  .header-label { order: 3; }
}

.header-label {
  display: none;
  align-items: center;
  gap: 0.55rem;
  margin-left: 1.8rem;
  padding: 0.35rem 0.8rem 0.35rem 0.4rem;
  border: 1.5px solid rgba(12, 28, 70, 0.14);
  border-radius: 999px;
  background: var(--papier);
  line-height: 1.15;
  cursor: default;
}

.header-label img { display: block; flex-shrink: 0; }

.header-label > span {
  display: flex;
  flex-direction: column;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-froid);
}

.header-label strong {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--navy);
}

/* Sous 1100px la place manque : le label reste sur les pages où il
   compte vraiment (bandeau d'accueil, réservation, tarifs). */
@media (min-width: 1100px) { .header-label { display: inline-flex; } }

/* ------------------------------------------------------------
   35. EN-TÊTE DE PAGE EN FONDU PHOTO
   La photo est là pour donner de la matière, pas pour être lue :
   elle est assombrie et fondue vers le bas, le titre reste roi.
   ------------------------------------------------------------ */
.hero-photo { background: var(--logo-bleu); border-bottom: none; }

.tete-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
}

.tete-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0.5;
  animation: tete-entree 1.2s ease-out both;
}

/* Le voile s'assombrit vers le bas au lieu de virer au blanc.
   La première version finissait sur le papier de la page : ça créait
   une bande claire juste sous le titre, qui venait s'ajouter au blanc
   de la page. Ici le bandeau se ferme sur le navy, le titre est ancré
   dessus, et la coupure avec la page devient franche et voulue. */
.tete-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(12, 48, 132, 0.40) 0%,
      rgba(12, 48, 132, 0.66) 55%,
      rgba(12, 48, 132, 0.86) 100%);
}

@keyframes tete-entree {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 0.5; transform: scale(1); }
}

.hero-photo .hero-content { position: relative; z-index: 2; }
.hero-photo h1 { color: var(--blanc-pur); }
.hero-photo .ariane { color: rgba(255, 255, 255, 0.8); }
.hero-photo .ariane a { color: var(--jaune-soleil); }
.hero-photo .ariane a:hover { color: var(--blanc-pur); }

@media (prefers-reduced-motion: reduce) {
  .tete-photo img { animation: none; }
}

/* ------------------------------------------------------------
   36. DE LA VIE, SANS LIBRAIRIE
   Trois règles simples, appliquées partout, plutôt qu'un effet
   différent par bloc : c'est la répétition qui fait le style.
   1. Ce qui apparaît monte de quelques pixels, jamais plus.
   2. Ce qui se survole se soulève, avec une ombre portée nette.
   3. Ce sur quoi on appuie s'enfonce, pour donner la sensation du clic.
   ------------------------------------------------------------ */

/* Le clic se sent : tous les boutons s'enfoncent légèrement */
.btn:active,
.btn-cookie:active,
.cat-rdv:active,
.prix-demande:active,
.reserve-onglet:active,
.film-son:active { transform: translateY(1px) scale(0.99); }

/* Les liens de contenu se soulignent d'un trait qui pousse depuis la gauche */
.site-footer a:not(.logo),
.faq-item a,
.lead a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.28s ease, color var(--transition);
}

.site-footer a:not(.logo):hover,
.faq-item a:hover,
.lead a:hover { background-size: 100% 1.5px; }

/* Pied de page : la signature s'écrit en arrivant, le jaune arrive après */
.site-footer { position: relative; }

.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--bleu-royal) 0 42%,
    var(--blanc-pur) 42% 56%,
    var(--jaune-soleil) 56% 76%,
    var(--hibiscus) 76% 88%,
    var(--logo-ciel) 88% 100%);
}

.footer-statement { overflow: hidden; }

.js .footer-statement > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.site-footer.vue .footer-statement > span { transform: translateY(0); }

/* Les colonnes du pied de page montent l'une après l'autre */
.js .footer-grid > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-footer.vue .footer-grid > * { opacity: 1; transform: none; }
.site-footer.vue .footer-grid > *:nth-child(2) { transition-delay: 0.1s; }
.site-footer.vue .footer-grid > *:nth-child(3) { transition-delay: 0.2s; }

/* Cartes de soins : elles arrivent en cascade au lieu d'être là d'un bloc */
.js .soin-grid .soin-card,
.js .services-grille .service-carte {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.soin-grid.vue .soin-card,
.services-grille.vue .service-carte { opacity: 1; transform: none; }

.soin-grid.vue .soin-card:nth-child(2),
.services-grille.vue .service-carte:nth-child(2) { transition-delay: 0.07s; }
.soin-grid.vue .soin-card:nth-child(3),
.services-grille.vue .service-carte:nth-child(3) { transition-delay: 0.14s; }
.soin-grid.vue .soin-card:nth-child(4),
.services-grille.vue .service-carte:nth-child(4) { transition-delay: 0.21s; }
.soin-grid.vue .soin-card:nth-child(5),
.services-grille.vue .service-carte:nth-child(5) { transition-delay: 0.28s; }
.soin-grid.vue .soin-card:nth-child(n+6) { transition-delay: 0.35s; }

/* Le survol d'une carte de soin la soulève franchement */
.soin-card:hover { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
  .footer-statement > span,
  .footer-grid > *,
  .soin-grid .soin-card,
  .services-grille .service-carte {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   37. MADRAS
   Le tissu des Antilles, réduit à sa mécanique : des bandes qui
   se croisent. Utilisé en liseré, jamais en aplat : sur une grande
   surface il mange le texte.
   ------------------------------------------------------------ */
:root {
  --madras:
    repeating-linear-gradient(90deg,
      var(--jaune-soleil) 0 7px,
      var(--hibiscus) 7px 12px,
      var(--bleu-royal) 12px 21px,
      var(--navy) 21px 26px),
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.34) 0 6px,
      transparent 6px 13px,
      rgba(12, 28, 70, 0.24) 13px 19px,
      transparent 19px 26px);
  --madras-taille: 26px 26px;
}

/* Bouton rendez-vous : fond navy pour la tenue, liseré madras pour
   dire d'où vient le salon. La couleur reste au bord, le texte reste net. */
.rdv-flottant {
  position: relative;
  background: var(--bleu-madras);
  box-shadow: 0 10px 26px rgba(12, 28, 70, 0.45);
}

.rdv-flottant::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 999px;
  background: var(--madras);
  background-size: var(--madras-taille);
  background-blend-mode: multiply;
}

.rdv-flottant:hover { background: var(--bleu-acier); }

/* Le même liseré ferme le bandeau de rappel en bas des pages */
.bandeau { position: relative; }

.bandeau::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  background: var(--madras);
  background-size: var(--madras-taille);
  background-blend-mode: multiply;
}

/* ------------------------------------------------------------
   38. L'HORAIRE DU JOUR, MIS EN AVANT
   C'est l'information que cherche une cliente qui arrive : est-ce
   ouvert, jusqu'à quand. Elle passe donc en gros, en Fraunces
   italique, dans un encadré de verre. Aucun clignotement : ça
   attirerait l'oeil une fois puis fatiguerait à chaque visite.
   ------------------------------------------------------------ */
.statut-ouverture {
  display: inline-block;
  margin: 0 0 1.7rem;
  padding: 0.7rem 1.2rem 0.7rem 1.1rem;
  border: 0;
  border-left: 4px solid var(--jaune-soleil);
  border-radius: 0 10px 10px 0;
  background: rgba(12, 28, 70, 0.34);
  backdrop-filter: blur(6px);
  font-family: var(--font-titre);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  line-height: 1.25;
  color: var(--blanc-pur);
  text-shadow: 0 1px 14px rgba(12, 28, 70, 0.55);
}

.statut-ouverture.ferme {
  border-left-color: rgba(255, 255, 255, 0.45);
  font-style: normal;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
}

@media (max-width: 620px) {
  .statut-ouverture { padding: 0.6rem 0.9rem; }
}

/* ------------------------------------------------------------
   39. LE LABEL DANS LE PIED DE PAGE
   En haut il est discret par nécessité de place. En bas il peut
   respirer, et c'est là qu'on lit vraiment ce qui est écrit.
   ------------------------------------------------------------ */
.footer-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
  padding: 1rem 1.2rem;
  border: 1.5px solid rgba(245, 194, 0, 0.35);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.footer-label img { flex-shrink: 0; }

.footer-label strong {
  display: block;
  font-family: var(--font-titre);
  font-size: 1rem;
  color: var(--jaune-soleil);
  margin-bottom: 0.15rem;
}

.footer-label span { font-size: 0.88rem; color: rgba(255, 255, 255, 0.8); line-height: 1.4; }

/* ------------------------------------------------------------
   40. DIPLÔMES (page Histoire)
   Présentés comme des pièces encadrées, pas comme des photos de
   galerie : c'est une preuve, elle se regarde de près.
   ------------------------------------------------------------ */
.section-diplomes { background: var(--papier); }

.diplomes {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 680px) { .diplomes { grid-template-columns: repeat(2, 1fr); } }

.diplome {
  margin: 0;
  background: var(--blanc-pur);
  border: 1px solid rgba(12, 28, 70, 0.14);
  border-radius: var(--radius);
  padding: 0.9rem 0.9rem 0;
  box-shadow: 0 10px 30px rgba(12, 28, 70, 0.07);
}

.diplome img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--papier);
  border-radius: 6px;
}

.diplome figcaption {
  padding: 0.85rem 0.2rem 1rem;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  text-align: center;
}

/* Le récit sans photo occupe toute la largeur au lieu de laisser un vide */
.recit-bloc.recit-seul:not(:has(.recit-media)) { grid-template-columns: 1fr; }
.recit-bloc.recit-seul:not(:has(.recit-media)) .recit-texte { max-width: 46rem; }

/* ------------------------------------------------------------
   41. LE LIVRE D'OR, VRAIES PAGES
   Les scans remplacent les pages vides. L'image occupe toute la
   face, on la lit comme on lirait le carnet posé sur le comptoir.
   ------------------------------------------------------------ */
.face.scan { padding: 0; overflow: hidden; background: #FFFDF6; }

.face.scan img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ------------------------------------------------------------
   42. CATALOGUES DUDLEY'S (page Histoire)
   Ses coiffures, photographiées pour la marque pendant ses
   formations. C'est une preuve, pas une décoration.
   ------------------------------------------------------------ */
.catalogues {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1.5px dashed rgba(12, 28, 70, 0.2);
}

.catalogues h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin-bottom: 0.6rem; }
.catalogues > p { max-width: 46rem; margin-bottom: 1.8rem; }

.catalogues-grille {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 780px) { .catalogues-grille { grid-template-columns: repeat(4, 1fr); } }

.catalogues-grille figure { margin: 0; }

.catalogues-grille img {
  width: 100%;
  height: auto;
  /* Ce sont des pages de catalogue en portrait (1000x1333), comme les
     diplomes : recadrees en 4/3 cover, on n en voyait qu une bande. */
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--blanc-pur);
  border-radius: var(--radius);
  border: 2px solid rgba(12, 28, 70, 0.12);
  transition: transform var(--transition), box-shadow var(--transition);
}

@media (hover: hover) {
  .catalogues-grille figure:hover img {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(12, 28, 70, 0.16);
  }
}

.catalogues-grille figcaption {
  margin-top: 0.5rem;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
}

/* Les légendes de diplômes portent maintenant deux niveaux */
.diplome figcaption { text-align: left; padding: 0.9rem 0.3rem 1rem; }
.diplome figcaption strong { display: block; font-size: 1rem; margin-bottom: 0.15rem; }
.diplome figcaption span {
  display: block;
  font-family: var(--font-texte);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--gris-froid);
  line-height: 1.4;
}

/* .diplome img : le recadrage 4/3 cover amputait les diplomes portrait.
   La regle ligne 3074 (3/4 contain) est la bonne, on ne l ecrase plus. */

@media (min-width: 900px) { .diplomes { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------
   43. LOUPE : agrandir un document au toucher
   Les diplômes, les catalogues et les pages du livre d'or sont
   des documents. Sous 300 px ils sont illisibles, or c'est le
   contenu qui compte le plus. Un toucher les ouvre en grand.
   ------------------------------------------------------------ */
.agrandissable { cursor: zoom-in; }
/* Le contour part vers l interieur : les vignettes et les pages du livre
   sont dans des conteneurs en overflow hidden, un contour exterieur y etait
   rogne et le focus clavier devenait invisible. */
.agrandissable:focus-visible { outline: 3px solid var(--jaune-soleil); outline-offset: -3px; }

.loupe {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.loupe::backdrop { background: rgba(12, 28, 70, 0.92); }

.loupe img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 96vw;
  max-height: 82dvh;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.loupe-legende {
  position: absolute;
  left: 0; right: 0; bottom: 1.2rem;
  margin: 0 auto;
  max-width: 44rem;
  padding: 0 1.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  line-height: 1.4;
}

.loupe-fermer {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--blanc-pur);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}

.loupe-fermer:hover { background: rgba(255, 255, 255, 0.3); }
.loupe-fermer:focus-visible { outline: 3px solid var(--jaune-soleil); outline-offset: 2px; }

/* Taille réelle : l'image dépasse l'écran et on la fait glisser.
   C'est ce qui permet de lire une écriture manuscrite sur un téléphone. */
.loupe.zoomee { overflow: auto; -webkit-overflow-scrolling: touch; }

.loupe.zoomee img {
  position: static;
  transform: none;
  display: block;
  margin: 0 auto;
  max-width: none;
  max-height: none;
  width: auto;
  cursor: zoom-out;
}

.loupe.zoomee .loupe-legende { display: none; }

.book-astuce {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--gris-froid);
  max-width: 26rem;
}

/* Un visuel paysage dans le récit : la photo du salon perd sa
   profondeur si on la force en portrait comme les autres. */
.cadre-paysage img { aspect-ratio: 4 / 3; }

/* ------------------------------------------------------------
   44. TROUVER LE SALON
   La vidéo d'itinéraire était rangée sous la carte, dans une
   colonne étroite : personne ne la voyait. Elle a sa section,
   avec la vidéo assez grande pour qu'on lise les indications
   incrustées à l'écran.
   ------------------------------------------------------------ */
.acces {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 3px solid var(--navy);
  border-radius: var(--radius);
  background: var(--papier);
}

.acces h2 { margin-bottom: 0.6rem; }
.acces .lead { margin-bottom: 1.6rem; }

.acces-video {
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0.6rem 0.6rem 0 var(--jaune-soleil);
  max-width: 720px;
}

.acces-video video { display: block; width: 100%; height: auto; }

.acces-legende {
  font-size: 0.9rem;
  margin-top: 1rem;
  color: var(--gris-froid);
}

/* Sur téléphone, la marge intérieure du bloc mangeait la vidéo :
   elle occupe toute la largeur disponible, bord à bord. */
@media (max-width: 620px) {
  .acces { padding: 1.4rem 1rem; }
  .acces-video {
    margin-inline: -1rem;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
  }
}


/* ------------------------------------------------------------
   BANDEAU COOKIES SUR PETIT ECRAN
   A 360x640 le bandeau recouvrait les deux boutons du hero au
   premier chargement. On le compacte pour degager la zone d appel.
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .cookie-banniere {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0.7rem 0.85rem;
    gap: 0.55rem;
  }
  .cookie-banniere p { font-size: 0.78rem; line-height: 1.4; }
  .btn-cookie { font-size: 0.78rem; padding: 0.5rem 1rem; }
}


/* ------------------------------------------------------------
   PAGE INTROUVABLE
   Les deux issues sont cote a cote, pour ne pas laisser
   la visiteuse dans une impasse.
   ------------------------------------------------------------ */
.erreur-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.8rem 0 2.6rem;
}