/* =============================================================
   DC'CUTS - FEUILLE DE STYLE
   -------------------------------------------------------------
   Ecrite mobile d'abord : l'essentiel du trafic vient du
   telephone, et un client qui reserve le fait debout, dehors,
   d'une main. Les media queries n'ajoutent que ce que le grand
   ecran permet en plus, elles ne rattrapent jamais le petit.

   THEME CLAIR, DEPUIS LE 13/09/2026
   Le site a ete dessine sombre le 11/09 (exception assumee a la
   regle anti-noir de Nassim). Il l'a retiree le 13/09 : « un theme
   clair, pas sombre noir en fond ». La regle generale s'applique
   donc de nouveau : AUCUN aplat noir en fond, AUCUN voile sombre
   sur une photo. Le noir ne sert qu'a l'encre : texte, boutons,
   pastille, filets.
   Ce qu'on garde du salon hote (Mathieu Nayis) : la STRUCTURE
   (titres capitales condensees, tutoiement, pastille de
   reservation flottante). Pas son or, pas son noir.

   REGLES DE FORME, TENUES PARTOUT
   - Aucune couleur. L'encre, le papier, et les gris entre les deux.
   - Rayons : boutons en pilule, cartes et champs a 14 px. Deux
     valeurs, pas trois, jamais melangees au hasard.
   - Titres en Archivo condense (axe de chasse a 74 %), capitales.
     Le texte courant reste en chasse normale : des capitales
     condensees sur un paragraphe ne se lisent pas.
   - Les chiffres (heures, prix, dates) en DM Mono : une colonne
     d'horaires qui danse ne se lit pas non plus.

   SOMMAIRE
   1. Jetons
   2. Remise a zero et base
   3. Titres et texte
   4. Boutons, pastilles, reserves
   5. En-tete, barre du bas, pastille de reservation
   6. Heros
   7. Prestations
   8. Horaires
   9. Travaux
  10. Adresse
  11. Contact
  12. Pied
  13. Mouvement
  14. Grand ecran
   ============================================================= */

/* -------------------------------------------------------------
   1. JETONS
   ------------------------------------------------------------- */
:root {
  /* Papier legerement casse, pas blanc pur : le blanc pur fait
     vibrer le texte noir, et les cartes blanches ont besoin d'un
     fond un cran en dessous pour exister. */
  /* THEME CREME / BEIGE / BRUN (Nassim, 24/09/2026), remplace
     l'essai mandarine. Ancien papier gris : #f5f5f3 / #fff / #ebebe8 /
     #dcdcd8 / #141414 / #5f5f64. */
  --fond: #f3ece0;
  --surface: #fbf8f2;
  --surface-2: #e9dfcf;
  --trait: #dccfb9;
  --texte: #2a1d15;
  --texte-2: #6b5646;
  /* Le beige soutenu : boites des mots-cles de section, confettis. */
  --beige: #e4d2b4;

  /* L'ACCENT : UNE SEULE COULEUR, TENUE PARTOUT.
     Essais du 13/09/2026 : cobalt (refuse), bleu barbier #1f3d99
     (garde de cote), puis le choix de Nassim : « du vert-bleu sur du
     noir », #12c977 : boutons et pastille VERTS a texte noir (precise
     le 13/09 : « bouton de couleur et texte noir »). Le vert sert aussi de surtitre, de
     lien de page courante, de filet de prestation phare et de point
     sur le plan. Pas d'or : les six barbiers de Charleroi sont tous
     en noir et or. Changer de couleur = ces cinq valeurs. */
  /* ESSAI MANDARINE (13/09/2026, apres le vert #12c977 / #0fb56a / #0e9f5e) :
     ambre vif, texte noir dessus. Revenir au vert = ces cinq valeurs
     + assets/logo/dc-mark-vert.png?v=brun1 et favicon.png (sauvegardes du vert
     dans le dossier temporaire de la session). */
  /* BRUN (24/09/2026) : boutons bruns a texte creme. Mandarine
     d'avant : #ffb000 / #f0a300 / #141414 / #ffb000 / #d98f00. */
  --accent: #6f4a2f;
  --accent-fonce: #5a3a24;
  --sur-accent: #f6eee1;
  /* La couleur VIVE : texte et traits, jamais un aplat. Caramel,
     lisible sur le papier creme (contraste > 4,5). */
  --vif: #8c5e3c;
  --vif-fonce: #6f4a2f;

  --rayon: 14px;
  --rayon-pilule: 999px;

  /* Une seule ombre, sur la pastille flottante. Partout ailleurs la
     profondeur passe par les filets et les surfaces. */
  --ombre: 0 10px 30px rgba(42, 29, 21, .16);

  --gouttiere: 18px;
  --large: 1240px;

  --transition: 220ms cubic-bezier(.16, 1, .3, 1);
}

/* -------------------------------------------------------------
   2. REMISE A ZERO ET BASE
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* MOUVEMENT REDUIT (Nassim, 13/09/2026) : le site n'ecoute PLUS le
   reglage systeme prefers-reduced-motion. Sur beaucoup de PC fixes
   Windows, « Afficher les animations » est decoche (Accessibilite >
   Effets visuels), le navigateur annonce alors « mouvement reduit »,
   et TOUTES les animations du site disparaissaient : rideau, faits,
   apparitions, etapes, ticket. Un site vitrine sans son mouvement,
   c'est un autre site. Les anciens blocs @media sont neutralises
   (min-width: 0 = toujours, max-width: 0 = jamais) plutot que
   supprimes, pour retrouver le comportement d'un coup s'il le faut.
   Cote JS, DCC.commun.doux() rend toujours false, meme raison. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Jamais de deplacement lateral : les apparitions glissent de 32 px
   sur le cote et, le temps de la transition, elles elargissent la
   page. overflow-x: clip coupe sans creer de zone de defilement (contrairement
   a hidden), et le doigt ne peut aller que de haut en bas. */
html, body { overflow-x: clip; overscroll-behavior-x: none; }
body { touch-action: pan-y pinch-zoom; }

@media (max-width: 0px) /* desactive, jamais applique : voir la note « mouvement reduit » */ {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  /* La barre de reservation fixe mange le bas de l'ecran sur
     telephone : sans cette reserve elle recouvre le pied. */
  padding-bottom: 76px;
}

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

a { color: inherit; }

/* Un seul endroit ou l'attribut est neutralise, sinon toute classe
   posant un display le bat : specificite nulle. */
[hidden] { display: none !important; }

.zone {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: 60px; }
/* Ce qui est loin sous l'ecran n'est pas mis en page tant qu'on n'y
   arrive pas : la page s'affiche plus vite, et les animations des
   sections hors champ ne coutent rien. La taille reservee evite les
   sauts de la barre de defilement. */
/* (content-visibility retire le 13/09 : il faisait saccader le defilement rapide, chaque section entrant se mettant en page d'un coup.) */

/* AUCUNE ICONE SUR CE SITE (choix du 12/09/2026). Les libelles
   portent le sens tout seuls. La classe reste definie au cas ou une
   page en garderait une : elle serait dimensionnee, pas etalee sur
   toute la largeur de son conteneur. */
.ic { display: none; }

.chiffre {
  font-family: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-feature-settings: 'tnum' 1;
}

.saut { display: block; }

/* -------------------------------------------------------------
   3. TITRES ET TEXTE
   ------------------------------------------------------------- */
h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  /* La chasse condensee vient de l'axe variable de la police, pas
     d'un `transform: scaleX()` : mise a l'echelle, une lettre voit
     ses pleins et ses delies se deformer. */
  font-stretch: 74%;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .96;
}

h1 { font-size: clamp(2.3rem, 9.4vw, 4.8rem); }
h2 { font-size: clamp(1.9rem, 8vw, 3.2rem); }
h3 { font-size: 1.15rem; line-height: 1.2; }

p { margin: 0; }

.intro {
  color: var(--texte-2);
  font-size: 1.02rem;
  max-width: 48ch;
}

.titre-bloc { display: grid; gap: 14px; margin-bottom: 30px; }
.titre-bloc--serre { gap: 10px; margin-bottom: 18px; }
/* Titre et phrase d'accompagnement cote a cote sur grand ecran. */
.titre-bloc--ligne { align-items: end; }
.titre-bloc--ligne .intro a { color: var(--texte); }
.titre-bloc--ligne .btn { justify-self: start; }

/* Un titre de rang 3 qui a la taille d'un rang 2 : la hierarchie du
   document ne change pas, seulement le dessin. */
.h3--grand { font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: .96; }

.surtitre {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vif);
}
/* Le surtitre du heros (« Barbier · Charleroi centre ») : texte
   creme dans une pastille brune arrondie (Nassim, 25/09/2026). */
.heros .surtitre {
  display: inline-block;
  width: fit-content;
  padding: 7px 14px 7px calc(14px + .2em);
  border-radius: var(--rayon-pilule);
  background: var(--accent);
  color: var(--sur-accent);
}

/* -------------------------------------------------------------
   4. BOUTONS, PASTILLES, RESERVES
   -------------------------------------------------------------
   Un bouton dit ce qu'il fait, et rien de plus. Le trait qui
   suivait l'etiquette a ete retire le 12/09/2026 : il ajoutait une
   trentaine de pixels a chaque bouton pour ne rien dire, et le
   bouton Reserver finissait par ecraser tout le reste.
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  padding: 11px 20px;
  border: 1.5px solid var(--trait);
  border-radius: var(--rayon-pilule);
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}

.btn:active { transform: translateY(1px) scale(.995); }

.btn--premier {
  background: var(--accent);
  color: var(--sur-accent);
  border-color: var(--accent);
}
.btn--premier:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }

.btn--second:hover { border-color: var(--accent); background: var(--accent); color: var(--sur-accent); }

.btn--large { width: 100%; }

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Un bouton avec une fleche pleine a droite. */
.btn--fleche { gap: 12px; }
.btn__fleche { display: inline-grid; place-items: center; width: 18px; height: 18px; }
.btn__fleche svg { width: 18px; height: 18px; transition: transform var(--transition); }
.btn--fleche:hover .btn__fleche svg { transform: translateX(3px); }

/* La reserve : ce qui n'a pas ete confirme par le barbier le dit,
   a l'ecran, plutot que d'afficher un chiffre invente. */
.reserve {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px dashed var(--trait);
  border-radius: var(--rayon-pilule);
  color: var(--texte-2);
  font-size: .72rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* La classe .attente marque les images provisoires (donnees.js).
   Elle n'affiche plus rien depuis le 13/09/2026 (Nassim : « supprime
   image d'attente ») ; elle reste posee pour qu'on puisse les
   retrouver d'un coup d'oeil dans l'inspecteur. */
.attente { position: relative; }

/* -------------------------------------------------------------
   5. EN-TETE, BARRE DU BAS, PASTILLE DE RESERVATION
   ------------------------------------------------------------- */
/* L'en-tete : pleine largeur (la marque est alignee sur le bord
   gauche de la boite du heros, pas sur une colonne centree), sans
   filet. Au defilement, la barre devient une boite blanche
   arrondie, detachee des bords, comme sur core-agency.be : c'est
   commun.js qui pose `entete--flottante` passe 24 px. */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0;
  transition: padding 260ms cubic-bezier(.16, 1, .3, 1);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 58px;
  max-width: none;
  /* Plus de backdrop-filter : un flou recalcule a chaque image de
     defilement par-dessus une video, c'est ce qui faisait saccader
     l'en-tete. Un fond presque opaque suffit. */
  background: var(--fond);
  border-radius: 0;
  transition: background 260ms ease, border-radius 260ms ease, box-shadow 260ms ease, height 260ms ease;
}

.entete--flottante { padding: 8px 8px 0; }
.entete--flottante .entete__barre {
  height: 52px;
  background: var(--surface); /* opaque a 100 % (Nassim, 13/09) */
  border-radius: 28px;
  /* Ni ombre ni bord (Nassim, 13/09/2026) : le blanc sur le papier
     suffit a detacher la boite. */
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-stretch: 74%;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.02rem;
  text-decoration: none;
}

/* Le monogramme du barbier, en blanc : c'est son trace d'origine,
   simplement detoure. Hauteur fixe, largeur libre - il n'est pas
   carre (689 x 517) et le forcer l'ecraserait. */
.marque__sigle { width: auto; height: 26px; }

.nav { display: none; gap: 28px; }
.nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-2);
  transition: color var(--transition);
}
.nav a:hover { color: var(--texte); }
.nav a[aria-current="page"] { color: var(--vif-fonce); }

.entete__actions { display: flex; align-items: center; gap: 10px; }
.entete .btn { display: none; }
/* Sur telephone, l'en-tete ne garde que la marque et les trois
   traits : les reseaux, Connexion et Reserver vivent dans le tiroir
   (et Reserver, aussi dans la barre du bas). */
.entete .reseaux { display: none; }

.burger {
  display: grid;
  gap: 5px;
  align-content: center;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--trait);
  border-radius: var(--rayon-pilule);
  background: transparent;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 1.5px;
  background: var(--texte);
  transition: transform var(--transition), opacity var(--transition);
}
/* Ouvert : les deux traits du bord se croisent, celui du milieu
   s'efface. */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Le tiroir : sous l'en-tete, plein ecran, sur le papier. Les liens
   ont la taille d'un titre : sur un telephone on tape avec le
   pouce, pas avec un curseur. */
.tiroir {
  position: fixed;
  left: 0;
  right: 0;
  top: 58px;
  bottom: 0;
  z-index: 26; /* au-dessus du rail a ciseaux (25) */
  display: grid;
  align-content: start;
  gap: 28px;
  padding: 28px var(--gouttiere) 40px;
  background: var(--fond);
  overflow-y: auto;
  animation: tiroir-arrive 320ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes tiroir-arrive { from { opacity: 0; transform: translateY(-10px); } }
.tiroir__liens { display: grid; }
.tiroir__liens a {
  padding: 14px 0;
  border-bottom: 1px solid var(--trait);
  font-weight: 800;
  font-stretch: 74%;
  text-transform: uppercase;
  font-size: 1.9rem;
  line-height: 1;
  text-decoration: none;
}
.tiroir__liens a[aria-current="page"] { color: var(--vif-fonce); }
.tiroir__actions { display: grid; gap: 10px; }
.tiroir__reseaux { justify-content: center; }
/* Le fond ne defile plus derriere le tiroir ouvert. */
html.menu-ouvert, html.menu-ouvert body { overflow: hidden; }

/* L'entree de la console du barbier, dans l'en-tete : un bouton
   contour, plus discret que Reserver. Sur telephone il vit dans le
   tiroir, comme les autres. */
.entete .btn { padding: 9px 14px; font-size: .74rem; }

/* Le geste principal du site, toujours sous le pouce. */
.barre-bas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom));
  background: rgba(243, 236, 224, .97);
  border-top: 1px solid var(--trait);
}

.barre-bas__etat {
  flex: 1;
  min-width: 0;
  font-size: .78rem;
  line-height: 1.25;
  color: var(--texte-2);
}
.barre-bas__etat b { display: block; color: var(--texte); font-size: .9rem; }

/* La pastille ronde, reprise du site du salon : sur grand ecran, le
   bouton de reservation ne quitte jamais l'ecran. */
/* LE TICKET DE FIDELITE (a la place de la pastille ronde, 13/09/2026).
   Un bon dessine en CSS : bord perfore par un degrade radial repete,
   deux encoches sur les cotes, fond vert. En bas a DROITE, en retrait
   du rail a ciseaux (le bandeau cookies, lui, est a gauche).
   Grand ecran seulement ; sur
   telephone la barre du bas suffit et la section de l'accueil dit
   le reste. */
.ticket {
  display: none;
  position: fixed;
  right: 56px;
  bottom: 24px;
  z-index: 30;
  width: 150px;
  padding: 12px 14px 10px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--sur-accent);
  text-decoration: none;
  text-align: center;
  box-shadow: var(--ombre);
  transform: rotate(-3deg);
  transition: transform var(--transition);
  /* Les deux encoches : des trous de la couleur du papier. */
  -webkit-mask: radial-gradient(circle at 0 62%, transparent 7px, #000 7.5px), radial-gradient(circle at 100% 62%, transparent 7px, #000 7.5px);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle at 0 62%, transparent 7px, #000 7.5px), radial-gradient(circle at 100% 62%, transparent 7px, #000 7.5px);
  mask-composite: intersect;
}
.ticket:hover { transform: rotate(0deg) scale(1.04); }
.ticket__haut {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
}
.ticket__corps {
  display: block;
  margin: 6px 0 8px;
  font-weight: 800;
  font-stretch: 74%;
  text-transform: uppercase;
  font-size: .98rem;
  line-height: 1.05;
}
.ticket__corps b { font-size: 1.5rem; font-weight: 500; }
.ticket__bas {
  display: block;
  padding-top: 8px;
  border-top: 1.5px dashed color-mix(in srgb, var(--sur-accent) 40%, transparent);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* LE BON, en grand, sur l'accueil : deux volets, le texte a gauche,
   les cases a droite, une encoche entre les deux comme un talon. */
.bon {
  display: grid;
  background: var(--accent);
  color: var(--sur-accent);
  border-radius: 20px;
  overflow: hidden;
}
.bon__gauche { display: grid; gap: 16px; justify-items: start; padding: 30px 24px; }
.bon__gauche .surtitre { color: color-mix(in srgb, var(--sur-accent) 75%, transparent); }
.bon__gauche .intro { color: color-mix(in srgb, var(--sur-accent) 85%, transparent); }
.bon__gauche .intro .reserve { border-color: color-mix(in srgb, var(--sur-accent) 45%, transparent); color: var(--sur-accent); }
.bon__gauche .btn--premier { background: var(--sur-accent); color: var(--accent); border-color: var(--sur-accent); }
.bon__gauche .btn--premier:hover { background: var(--beige); border-color: var(--beige); }
.bon__droite {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 24px;
  border-top: 2px dashed color-mix(in srgb, var(--sur-accent) 35%, transparent);
}
.bon__case {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1.5px solid color-mix(in srgb, var(--sur-accent) 40%, transparent);
  border-radius: var(--rayon-pilule);
  font-size: .9rem;
}
.bon__case--fin { background: var(--sur-accent); color: var(--accent); border-color: var(--sur-accent); font-weight: 700; }

/* La croix de chaque case : deux traits qui se TRACENT (dasharray),
   l'un apres l'autre, case apres case (--i x 260 ms). */
.bon__croix { position: absolute; inset: 0; width: 100%; height: 100%; padding: 22%; color: var(--sur-accent); }
.bon__case--fin .bon__croix { color: var(--accent); }
.bon__trait1, .bon__trait2 { stroke-dasharray: 18; stroke-dashoffset: 18; }
.bon--coche .bon__trait1 { animation: croix-trace 180ms ease-out forwards; animation-delay: calc(var(--i) * 260ms); }
.bon--coche .bon__trait2 { animation: croix-trace 180ms ease-out forwards; animation-delay: calc(var(--i) * 260ms + 140ms); }
.bon--coche .bon__case { animation: case-coche 300ms cubic-bezier(.16, 1, .3, 1); animation-delay: calc(var(--i) * 260ms); }
.bon--coche .bon__case .chiffre { transition: opacity 200ms; transition-delay: calc(var(--i) * 260ms + 120ms); opacity: .35; }
@keyframes croix-trace { to { stroke-dashoffset: 0; } }
@keyframes case-coche { 40% { transform: scale(1.14); } }

/* La fete : des confettis qui jaillissent du centre de la grille, et
   le message. */
.bon__droite { position: relative; }
.bon__fete { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.bon__fete i {
  position: absolute;
  left: -4px;
  top: -6px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: var(--beige);
  opacity: 0;
}
.bon__fete i.noir { background: var(--sur-accent); }
.bon__fete b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.6);
  padding: 12px 22px;
  border-radius: var(--rayon-pilule);
  background: var(--sur-accent);
  color: var(--accent);
  font-weight: 800;
  font-stretch: 74%;
  text-transform: uppercase;
  font-size: 1.4rem;
  white-space: nowrap;
  opacity: 0;
  box-shadow: var(--ombre);
}
.bon--fete .bon__fete i { animation: confetti 1100ms cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: var(--t); }
.bon--fete .bon__fete b { animation: fete-mot 600ms cubic-bezier(.16, 1, .3, 1) 200ms forwards; }
.bon--fete .bon__case--fin { animation: case-fete 700ms ease-in-out 2; }
@keyframes confetti {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(var(--r)); }
}
@keyframes fete-mot { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes case-fete { 50% { transform: scale(1.2) rotate(-6deg); } }
@media (max-width: 0px) /* desactive, jamais applique : voir la note « mouvement reduit » */ {
  .bon__trait1, .bon__trait2 { stroke-dashoffset: 0; }
}

/* Le ticket s'efface quand le pied est a l'ecran (classe posee par
   commun.js) : il cachait Mentions legales et Espace barbier. */
html.pied-visible .ticket { transform: translateY(160%) rotate(-3deg); pointer-events: none; }

/* -------------------------------------------------------------
   6. HEROS
   -------------------------------------------------------------
   Une boite en long, arrondie, rentree du bord, avec la video
   dedans et le texte pose dessus en bas a gauche : la mise en page
   du salon hote. Deux etats :
   - --vide : pas encore de video. Boite grise, monogramme pale a
     droite, texte a l'encre. Aucun voile.
   - --video : texte blanc, et un degrade sombre en bas du cadre,
     le seul voile du site - sans lui, un titre blanc disparait des
     que la video s'eclaircit.
   ------------------------------------------------------------- */
.heros { padding: 12px var(--gouttiere) 0; }

.heros__cadre {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* dvh et non vh : sur iOS la barre d'adresse fait varier vh et le
     bas du heros saute pendant le defilement. */
  min-height: 62dvh;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-2);
}

.heros__cadre video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Deux lecteurs en alternance : celui qui joue est visible, l'autre
   attend derriere, deja charge ; le passage est un fondu croise. */
.heros__video { opacity: 0; transition: opacity 900ms ease; }
.heros__video.est-la { opacity: 1; }

/* Le degrade sous le texte, video seulement. */
.heros__cadre--video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .45) 40%, rgba(10, 10, 10, 0) 72%);
}
.heros__cadre--video .heros__texte { color: #fff; }
.heros__cadre--video .intro { color: rgba(255, 255, 255, .8); }
.heros__cadre--video .btn--second { border-color: rgba(255, 255, 255, .55); color: #fff; }
.heros__cadre--video .btn--second:hover { background: #fff; border-color: #fff; color: var(--texte); }

.heros__texte {
  position: relative;
  display: grid;
  gap: 18px;
  width: 100%;
  padding: 28px 20px 30px;
}

.heros__actions { display: grid; gap: 10px; justify-items: stretch; }

/* Les trois reponses qu'un nouveau client cherche : ou, quand,
   comment on prend rendez-vous. Des filets, pas des cartes. */
/* La PUCE : une boule verte, un trace noir plein dedans. */
.puce {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--rayon-pilule);
  background: var(--accent);
  color: var(--sur-accent);
}
.puce svg { width: 20px; height: 20px; }
.puce--grande { width: 56px; height: 56px; }
.puce--grande svg { width: 28px; height: 28px; }

.faits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding-top: 6px; }
/* Chaque fait a deux faces superposees ; celle qui est la est
   visible, l'autre attend en dessous. La puce se retourne, le texte
   monte. */
.faits > .fait { position: relative; display: grid; padding: 0; border: 0; }
/* Jusqu'a DEUX lignes par valeur (25/09/2026 : « vendredi 25
   septembre, 09:0… » etait coupe sur grand ecran). Le bloc ne saute
   pas pour autant : les faces sont superposees dans la meme case de
   grille, la hauteur est celle de la plus haute. */
.faits dd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-width: 0; }
.faits__texte { min-width: 0; }
.fait__face .puce { flex: 0 0 auto; }
.fait__face {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--trait);
  opacity: 0;
  pointer-events: none;
  /* Balayage vertical (Nassim, 13/09) : la face qui arrive monte
     depuis le bas pendant que celle qui part continue vers le haut ;
     le bloc suivant fait l'inverse (--fd negatif). Les blocs, eux,
     ne bougent pas : seules les faces glissent dans leur cadre. */
  transform: translateY(var(--fd, 16px));
  transition: opacity 420ms ease, transform 560ms cubic-bezier(.16, 1, .3, 1);
}
.fait__face.est-la { opacity: 1; pointer-events: auto; transform: none; }
.fait__face.part { transform: translateY(calc(-1 * var(--fd, 16px))); }
.faits > .fait:nth-child(even) { --fd: -16px; }
.faits > .fait { overflow: hidden; }
.fait__face .puce { transform: rotateY(90deg); transition: transform 460ms cubic-bezier(.16, 1, .3, 1); }
.fait__face.est-la .puce { transform: rotateY(0); }
.faits__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1; min-width: 0; }
.faits dt { color: var(--texte-2); font-size: .86rem; }
.faits dd { margin: 0; font-weight: 700; max-width: 100%; }

/* Les mots-cles du titre : en vert sur une boite noire, coins a peine
   arrondis, la boite suit le mot s'il se replie (box-decoration-break). */
.cle {
  background: var(--accent);
  color: var(--sur-accent);
  padding: 0 .14em .02em;
  margin: 0 -.02em;
  border-radius: .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* La variante des titres de section : noir sur vert. */
.cle--vert { background: var(--beige); color: var(--accent-fonce); }
/* Un titre de section qui tourne garde sa largeur de colonne. */
h2.titre-tournant, h3.titre-tournant { width: 100%; }

/* Le titre qui tourne. Le h1 est le cadre, a hauteur figee par
   script.js ; chaque phrase est une couche posee dedans. La phrase
   qui part monte et s'efface, celle qui arrive vient du bas. Pas de
   filet, pas de soulignement : le mouvement suffit. */
/* ⚠️ ACCENTS ROGNES (Nassim, 25/09/2026 : « La même tête », le Ê
   coupe) : avec un interligne serre, les accents des capitales et
   les cedilles DEBORDENT de la ligne, et `overflow: hidden` les
   coupait. Chaque couche porte donc une marge interieure haut et
   bas (mesuree avec elle par commun.js), que le cadre rend par une
   marge negative : rien ne bouge dans la page, rien n'est coupe. */
.titre-tournant { position: relative; overflow: hidden; margin-block: -.2em -.12em; }
.titre-tournant__couche {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-block: .2em .12em;
  transition: transform 720ms cubic-bezier(.16, 1, .3, 1), opacity 520ms ease;
}
.titre-tournant__couche.est-la { transform: none; opacity: 1; }
.titre-tournant__couche.arrive { transform: translateY(58%); opacity: 0; }
.titre-tournant__couche.part { transform: translateY(-46%); opacity: 0; }
/* Tant que la hauteur n'est pas figee (avant la police), la couche
   reste dans le flux pour donner sa hauteur au titre. */
.titre-tournant:not([style*="height"]) .titre-tournant__couche.est-la { position: static; }

/* -------------------------------------------------------------
   6 bis. LES TROIS GESTES
   -------------------------------------------------------------
   Trois LOSANGES verts numerotes, relies par une ligne qui se TRACE
   de l'un a l'autre a l'arrivee (Nassim, 13/09/2026). Sur grand
   ecran les trois sont en ligne et le trait court horizontalement ;
   sur telephone ils s'empilent et le trait descend. Le trait de
   liaison est le ::after de chaque etape (sauf la derniere) ; il
   grandit de 0 a 1 une fois la liste visible (.vu), l'un apres
   l'autre, apres le losange.
   ------------------------------------------------------------- */
.etapes {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.etapes li {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 4px 18px;
  padding: 0 0 30px;
}
.etapes li:last-child { padding-bottom: 0; }

/* Le losange : un carre tourne, le numero remis droit dedans. */
.etapes__num {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 2px 6px 0;
  background: var(--accent);
  color: var(--sur-accent);
  border-radius: 8px;
  transform: rotate(45deg);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}
.etapes__num > span { transform: rotate(-45deg); }
.etapes h3 { align-self: end; padding-top: 10px; }
.etapes .intro { font-size: .96rem; }

/* La liaison : verticale sur telephone, du bas du losange au
   suivant. */
.etapes li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 27px;
  top: 58px;
  bottom: 4px;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
}
@media (min-width: 0px) /* toujours : voir la note « mouvement reduit » en tete de feuille */ {
  .etapes__num { transform: rotate(45deg) scale(0); }
  .etapes.vu .etapes__num { animation: losange-arrive 620ms cubic-bezier(.16, 1, .3, 1) forwards; }
  .etapes.vu li:nth-child(1) .etapes__num { animation-delay: 0ms; }
  .etapes.vu li:nth-child(2) .etapes__num { animation-delay: 640ms; }
  .etapes.vu li:nth-child(3) .etapes__num { animation-delay: 1280ms; }
  .etapes.vu li:not(:last-child)::after { animation: liaison-trace 520ms cubic-bezier(.4, 0, .2, 1) forwards; }
  .etapes.vu li:nth-child(1)::after { animation-delay: 300ms; }
  .etapes.vu li:nth-child(2)::after { animation-delay: 940ms; }
}
@media (max-width: 0px) /* desactive, jamais applique : voir la note « mouvement reduit » */ {
  .etapes li:not(:last-child)::after { transform: none; }
}
@keyframes losange-arrive { to { transform: rotate(45deg) scale(1); } }
@keyframes liaison-trace { to { transform: scale(1); } }

/* -------------------------------------------------------------
   6 ter. LE DUO TARIFS / HORAIRES
   -------------------------------------------------------------
   Sur telephone, l'un sous l'autre. Sur grand ecran, deux colonnes
   et la semaine COLLEE au defilement : on lit les prix en gardant
   les horaires sous les yeux.
   ------------------------------------------------------------- */
.duo { display: grid; gap: 56px; }
.duo__cote { min-width: 0; }

/* -------------------------------------------------------------
   6 quater. TARIFS EN LIGNE, SEMAINE EN FRISE (24/09/2026)
   -------------------------------------------------------------
   Nassim : « je n'aime pas la disposition verticale, prends exemple
   sur Comment ça marche ». Meme grammaire que les trois gestes :
   des LOSANGES bruns poses sur un trait qui se TRACE de gauche a
   droite, l'un apres l'autre, quand le bloc arrive a l'ecran (.vu,
   pose par poserApparitions - rejouable comme le reste).
   - Tarifs : chaque carte porte son losange a cheval sur son bord
     haut ; le trait court le long des bords hauts, d'une carte a
     l'autre. Au telephone, la ligne se fait glisser au doigt.
   - Semaine : REMPLACEE le 25/09/2026 par l'horloge (voir plus bas) ;
     avant : sept losanges, pleins les jours ouverts, en creux les
     jours fermes, aujourd'hui cercle ; les heures dessous.
   ------------------------------------------------------------- */
.titre-bloc--ligne > .titre-bloc { margin-bottom: 0; }
/* L'intro de ces titres reste a gauche, sous le titre : la regle
   `.titre-bloc--ligne .intro` (a droite, pour la galerie) ne les
   concerne pas. */
.titre-bloc--ligne > .titre-bloc .intro { text-align: left; max-width: 46ch; padding-bottom: 0; }

.prestations.prestations--ligne {
  --g: 12px;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 80%);
  gap: var(--g);
  padding-top: 26px;
  padding-bottom: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.prestations--ligne::-webkit-scrollbar { display: none; }
.prestations--ligne .presta { padding-top: 42px; scroll-snap-align: start; }
/* Hauteur du badge « La plus demandée » reservee sur TOUTES les
   cartes : sinon son titre descend de quelques pixels. */
.prestations--ligne .presta__tete { justify-content: flex-end; min-height: 26px; }

/* Plus de trait brun au-dessus des cartes (Nassim, 24/09/2026 :
   « la fine ligne, j'aime pas trop visuellement, les losanges pas
   mal »). Seuls les losanges restent.
   Le losange-pastille, a cheval sur le bord haut de la carte.
   L'anneau couleur papier l'y encastre comme une encoche. */
.prestations--ligne .presta__tete .puce {
  position: absolute;
  top: -24px;
  left: 22px;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  box-shadow: 0 0 0 6px var(--fond);
  transform: rotate(45deg) scale(0);
}
.prestations--ligne .presta__tete .puce svg { transform: rotate(-45deg); }

/* La sequence, carte par carte : la carte monte, puis son losange
   eclot. 420 ms d'une carte a l'autre. */
.prestations--ligne.vu .presta__tete .puce { animation: losange-arrive 620ms cubic-bezier(.16, 1, .3, 1) forwards; }
.prestations--ligne.vu > :nth-child(1) { transition-delay: 0ms; }
.prestations--ligne.vu > :nth-child(2) { transition-delay: 420ms; }
.prestations--ligne.vu > :nth-child(3) { transition-delay: 840ms; }
.prestations--ligne.vu > :nth-child(4) { transition-delay: 1260ms; }
.prestations--ligne.vu > :nth-child(1) .puce { animation-delay: 140ms; }
.prestations--ligne.vu > :nth-child(2) .puce { animation-delay: 560ms; }
.prestations--ligne.vu > :nth-child(3) .puce { animation-delay: 980ms; }
.prestations--ligne.vu > :nth-child(4) .puce { animation-delay: 1400ms; }

/* ---- Horaires de l'accueil : afficheur + panneau (25/09/2026) ----
   Le cadran a gauche, les jours et l'etat a droite ; empiles au
   telephone. Tout est dessine en SVG par rendreHorloge (rendu.js). */
.horloge__grille { display: grid; gap: 28px; align-items: center; }
/* L'AFFICHEUR A PALETTES (25/09/2026, remplace le cadran) : un
   boitier beige a quatre vis, deux rangees de palettes brunes a
   lettres creme. Mecanique : voir palette() dans rendu.js. */
.afficheur { margin: 0; justify-self: center; max-width: 100%; }
.afficheur__boitier {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 30px 30px 32px;
  border-radius: 20px;
  background: var(--surface-2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(42, 29, 21, .08);
}
.afficheur__vis {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c4b39a;
  box-shadow: inset 0 1px 1px rgba(42, 29, 21, .25);
}
.afficheur__vis::after { content: ''; position: absolute; left: 1.5px; right: 1.5px; top: 4px; height: 1px; background: rgba(42, 29, 21, .35); transform: rotate(-35deg); }
.afficheur__vis:nth-child(1) { top: 11px; left: 11px; }
.afficheur__vis:nth-child(2) { top: 11px; right: 11px; }
.afficheur__vis:nth-child(3) { bottom: 11px; left: 11px; }
.afficheur__vis:nth-child(4) { bottom: 11px; right: 11px; }
.afficheur__legende { margin: 6px 0 0; color: var(--texte-2); font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.afficheur__legende:first-of-type { margin-top: 0; }

.afficheur__rangee { --t: clamp(2.5rem, 11vw, 4.6rem); display: flex; align-items: center; gap: .09em; font-size: var(--t); }
.afficheur__deux { width: .32em; color: var(--accent); font-weight: 800; font-stretch: 74%; line-height: 1; text-align: center; }

.pal {
  position: relative;
  width: .74em;
  height: 1.14em;
  perspective: 3em;
  color: var(--sur-accent);
  font-weight: 800;
  font-stretch: 74%;
  line-height: 1;
}
.pal__haut, .pal__bas, .pal__volet {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: var(--accent);
}
.pal__haut, .pal__volet--haut { top: 0; border-radius: .08em .08em 0 0; background: linear-gradient(#7c5337, var(--accent)); }
.pal__bas, .pal__volet--bas { bottom: 0; border-radius: 0 0 .08em .08em; box-shadow: 0 .05em .08em rgba(42, 29, 21, .28); }
/* Le caractere fait toute la hauteur de la palette ; chaque moitie
   n'en montre que sa part. */
.pal i { position: absolute; left: 0; right: 0; height: 200%; display: flex; align-items: center; justify-content: center; font-style: normal; }
.pal__haut i, .pal__volet--haut i { top: 0; }
.pal__bas i, .pal__volet--bas i { bottom: 0; }
/* Le pli au milieu, entre les deux volets. */
.pal::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: rgba(42, 29, 21, .5); z-index: 3; }

.pal__volet { z-index: 2; backface-visibility: hidden; animation-timing-function: cubic-bezier(.5, 0, .9, .6); animation-fill-mode: forwards; }
.pal__volet--haut { transform-origin: 50% 100%; animation-name: pal-tombe; }
.pal__volet--bas { transform-origin: 50% 0; transform: rotateX(90deg); animation-name: pal-rabat; animation-timing-function: cubic-bezier(.2, .6, .4, 1.3); }
@keyframes pal-tombe { to { transform: rotateX(-90deg); filter: brightness(.7); } }
@keyframes pal-rabat { from { transform: rotateX(90deg); filter: brightness(1.2); } to { transform: rotateX(0); } }

.horloge__cote { display: grid; gap: 22px; align-content: center; }
.horloge__etat {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(1.15rem, 3.4vw, 1.6rem);
  line-height: 1.2;
}
.horloge__etat strong { font-weight: 800; font-stretch: 74%; text-transform: uppercase; letter-spacing: .02em; }
.horloge__point { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #c4b39a; }
.horloge__point--ouvert { background: var(--vif); animation: horloge-pouls 1.8s ease-out infinite; }
@keyframes horloge-pouls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vif) 45%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

/* Les sept jours : un losange + trois lettres. Plein = ouvert, en
   creux = ferme, cercle = aujourd'hui, brun fonce + anneau = choisi. */
.horloge__jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.horloge__jour {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 8px 0 6px;
  border: 0;
  border-radius: var(--rayon);
  background: none;
  color: var(--texte-2);
  font: inherit;
  cursor: pointer;
  transition: background var(--transition);
}
.horloge__jour:hover { background: var(--surface); }
.horloge__losange {
  width: 20px;
  height: 20px;
  margin: 4px;
  border-radius: 5px;
  background: var(--accent);
  transform: rotate(45deg);
  transition: transform 360ms cubic-bezier(.16, 1, .3, 1), box-shadow var(--transition);
}
.horloge__jour--ferme .horloge__losange { background: var(--fond); border: 2px solid #c4b39a; }
.horloge__abr { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.horloge__jour--auj .horloge__abr { color: var(--vif-fonce); }
.horloge__jour[aria-pressed="true"] { color: var(--texte); }
.horloge__jour[aria-pressed="true"] .horloge__losange { transform: rotate(45deg) scale(1.15); box-shadow: 0 0 0 4px var(--fond), 0 0 0 6px var(--vif); }
.horloge__jour:focus-visible { outline: 2px solid var(--texte); outline-offset: 2px; }

.horloge__choisi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 16px 20px;
  border-radius: var(--rayon);
  background: var(--accent);
  color: var(--sur-accent);
}
.horloge__choisi span { font-weight: 700; }
.horloge__choisi b { font-size: 1.15rem; font-weight: 700; }
.horloge__note { margin: 0; color: var(--texte-2); font-size: .85rem; }

@media (min-width: 900px) {
  .horloge__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; }
  .afficheur { justify-self: end; }
}

/* -------------------------------------------------------------
   7. PRESTATIONS
   ------------------------------------------------------------- */
/* Une GRILLE de cartes, demandee par Nassim le 13/09/2026 (les
   lignes l'une sous l'autre faisaient « banderoles »). Chaque carte :
   le nom, le detail, puis le prix et la duree sur une meme ligne en
   bas. Deux colonnes des 480 px, trois sur la page des tarifs en
   grand ecran. */
.prestations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.presta {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 12px;
  padding: 22px 22px 20px;
  background: var(--surface);
  border-radius: var(--rayon);
  transition: transform var(--transition), box-shadow var(--transition);
}
.presta:hover { transform: translateY(-3px); }

/* La prestation mise en avant : la mention seule, ni bord ni ombre
   (Nassim, 13/09/2026). */
.presta__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.presta__tete .puce { width: 48px; height: 48px; }
.presta__tete .puce svg { width: 24px; height: 24px; }
.presta__phare {
  padding: 5px 10px;
  border-radius: var(--rayon-pilule);
  background: var(--accent);
  color: var(--sur-accent);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.presta__nom { font-weight: 800; font-size: 1.45rem; font-stretch: 74%; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.presta__detail { color: var(--texte-2); font-size: .95rem; line-height: 1.5; }

/* Les deux lignes chiffrees : une grille a filets. */
.presta__infos { display: grid; gap: 0; margin: 4px 0 0; border-top: 1px solid var(--trait); }
.presta__infos > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--trait);
}
.presta__infos dt { color: var(--texte-2); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.presta__infos dd { margin: 0; font-weight: 700; font-size: 1.05rem; }
.presta__infos dd b { font-weight: 800; font-size: 1.3rem; }

/* Le geste : une BOITE brune a texte creme (Nassim, 24/09/2026),
   avec le petit trait creme qui s'allonge au survol. */
.presta__lien {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  padding: 11px 18px;
  border-radius: var(--rayon-pilule);
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transition);
}
.presta__lien::after { content: ''; width: 18px; height: 1.5px; background: currentColor; transition: width var(--transition); }
.presta__lien:hover { background: var(--accent-fonce); }
.presta__lien:hover::after { width: 28px; }
.presta__infos dd b small { font-size: .7em; font-weight: 600; color: var(--texte-2); }

@media (min-width: 640px) {
  .prestations { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
/* Grand ecran : quatre grandes cartes en ligne sur la page des
   tarifs ; sur l'accueil, la colonne de gauche n'en tient que deux. */
@media (min-width: 1100px) {
  .page-duo .prestations, .prestations--large { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------
   8. HORAIRES
   ------------------------------------------------------------- */
.horaires {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}

.horaires__jour {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
}
.horaires__jour + .horaires__jour { border-top: 1px solid var(--trait); }

.horaires__jour--aujourdhui { background: var(--surface-2); }
.horaires__jour--aujourdhui .horaires__nom { font-weight: 800; }

.horaires__nom { font-weight: 600; }
.horaires__plage { font-size: .95rem; }
.horaires__ferme { color: var(--texte-2); }

.horaires__etat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-top: 1px solid var(--trait);
  background: var(--surface-2);
  font-size: .92rem;
}

/* -------------------------------------------------------------
   9. TRAVAUX
   ------------------------------------------------------------- */
.travaux {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.travaux figure {
  position: relative;
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--surface);
}
/* L'image est posee en absolu : sa hauteur naturelle (des affiches
   portrait 9:16) ne commande plus celle de la case, c'est la grille
   qui decide. Sans ca, la grande case etirait ses deux rangees et les
   petites flottaient au milieu de cases vides. */
.travaux img, .travaux .a-video__lien { position: absolute; inset: 0; width: 100%; height: 100%; }
.travaux img { object-fit: cover; }

/* EN ATTENDANT LES PHOTOS (Nassim, 13/09/2026) : le monogramme, pose
   en petit au centre d'une case grise. Reconnu par son chemin, pas
   par une classe : la classe .attente est retiree en ligne, le
   chemin, lui, reste tant que la vraie photo n'est pas la. */
img[src*="dc-mark"] { object-fit: contain; background: var(--surface-2); }
/* Mais le LOGO lui-meme (en-tete, pied, ouverture, maintenance) reste
   nu : le sigle seul, sans case ni cadre (Nassim, 24/09/2026). */
img.marque__sigle, img.rideau__sigle, .maintenance img { background: none; }
.travaux img[src*="dc-mark"], .galerie img[src*="dc-mark"] { padding: 30%; }
.galerie img[src*="dc-mark"] { aspect-ratio: 1; }

/* -------------------------------------------------------------
   LA BANDE QUI COULISSE (accueil)
   -------------------------------------------------------------
   Deux rangees de hauteur --r. Une verticale = une video sur les
   deux rangees (9:16) ; quatre carres = 2 x 2 ; deux carres = une
   colonne. La bande deborde a droite et le conteneur coupe.
   ------------------------------------------------------------- */
.defile {
  --r: 150px;
  --e: 8px;
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon);
  /* Isole la bande : ce qui bouge dedans ne fait pas recalculer la
     page autour. */
  contain: content;
}
/* Les bords en fondu : deux voiles couleur papier POSES PAR-DESSUS,
   pas un masque. Un mask-image sur un contenu qui bouge oblige a
   recomposer la bande entiere a chaque image ; un voile fixe, non. */
.defile::before, .defile::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
}
.defile::before { left: 0; background: linear-gradient(90deg, var(--fond), transparent); }
.defile::after { right: 0; background: linear-gradient(270deg, var(--fond), transparent); }
.defile__piste { display: flex; gap: var(--e); width: max-content; will-change: transform; }
.defile__bloc { display: grid; gap: var(--e); flex: 0 0 auto; }
.defile__bloc figure {
  position: relative;
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--surface-2);
}
.defile__bloc--verticale { grid-template-rows: 1fr; }
.defile__bloc--verticale figure { width: calc((var(--r) * 2 + var(--e)) * 9 / 16); height: calc(var(--r) * 2 + var(--e)); }
.defile__bloc--quatre { grid-template-columns: repeat(2, var(--r)); grid-template-rows: repeat(2, var(--r)); }
.defile__bloc--deux { grid-template-rows: repeat(2, var(--r)); width: var(--r); }
.defile__bloc img, .defile__bloc .a-video__lien { position: absolute; inset: 0; width: 100%; height: 100%; }
.defile__bloc img { object-fit: cover; }
.defile__bloc .a-video__video { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Les coins arrondis d'une video en lecture : le decoupage se fait
   sur le calque, pas a chaque image. */
.defile__bloc figure, .travaux figure, .galerie figure { isolation: isolate; transform: translateZ(0); }

/* Instagram est la vitrine reelle du barbier : ses coupes y sortent
   avant d'arriver ici. Le lien devient donc un bouton, au meme titre
   que Reserver, et pas une petite ligne grise en bas de page. */
.insta { margin-top: 20px; }

/* -------------------------------------------------------------
   9 bis. AVANT / APRES
   -------------------------------------------------------------
   Le « apres » est en dessous, le « avant » par-dessus, coupe a
   --avap-pos par clip-path ; la poignee est posee au meme endroit.
   Un seul cadre, format 4:3 (16:9 sur grand ecran), arrondi comme
   le reste.
   ------------------------------------------------------------- */
.avap { --avap-pos: 50%; }
.avap__cadre {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-2);
  user-select: none;
  touch-action: pan-y;
}
.avap__cote { position: absolute; inset: 0; }
.avap__cote img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avap__cote--avant { clip-path: inset(0 calc(100% - var(--avap-pos)) 0 0); }
/* Cases vides : le « avant » un ton plus sombre que le « apres »,
   pour que la coupe se voie meme sans photo. */
.avap--vide .avap__cote--avant { background: #e6dccb; }
.avap--vide .avap__cote--apres { background: var(--surface-2); }

.avap__etiquette {
  position: absolute;
  top: 14px;
  padding: 6px 12px;
  border-radius: var(--rayon-pilule);
  background: rgba(255, 255, 255, .9);
  color: var(--texte);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.avap__cote--avant .avap__etiquette { left: 14px; }
.avap__cote--apres .avap__etiquette { right: 14px; }

.avap__poignee {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--avap-pos);
  width: 44px;
  margin-left: -22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
}
.avap__trait {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(42, 29, 21, .08);
}
/* Le bouton de la poignee : rond, vert, deux chevrons en trait. */
.avap__bouton {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: var(--rayon-pilule);
  background: var(--accent);
  box-shadow: var(--ombre);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6eee1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5'/%3E%3Cpath d='m15 7 5 5-5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  transition: transform var(--transition);
}
.avap__poignee:hover .avap__bouton,
.avap[data-avap-prise] .avap__bouton { transform: scale(1.08); }
.avap__poignee:focus-visible { outline: none; }
.avap__poignee:focus-visible .avap__bouton { outline: 2px solid var(--texte); outline-offset: 3px; }

/* LES SIX PASTILLES (Nassim, 25/09/2026), centrees sous le cadre :
   une par paire. La pastille en cours s'allonge et se REMPLIT le
   temps de son balayage (--avap-duree), puis la suivante prend le
   relais. Main sur la poignee : le remplissage s'arrete, et repart
   de zero a la relance. */
.avap__points { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.avap__point {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--rayon-pilule);
  background: #d9c9ae;
  overflow: hidden;
  cursor: pointer;
  transition: width 360ms cubic-bezier(.16, 1, .3, 1), background var(--transition);
}
.avap__point:hover { background: #c4b39a; }
/* Zone de clic plus grande que le point (doigt). */
.avap__point::before { content: ''; position: absolute; inset: -10px -4px; }
.avap__point.est-la { width: 34px; background: #d9c9ae; }
.avap__point span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.avap__point.est-la span { transform: scaleX(1); }
.avap__points--roule .avap__point.est-la span { animation: avap-remplit var(--avap-duree, 5200ms) linear both; }
.avap--pause .avap__point.est-la span, .avap--main .avap__point.est-la span { animation-play-state: paused; }
@keyframes avap-remplit { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.avap__point:focus-visible { outline: 2px solid var(--texte); outline-offset: 3px; }

/* Le passage d'une paire a l'autre : un fondu court. */
.avap--change .avap__cote { animation: avap-fondu 480ms ease; }
@keyframes avap-fondu { from { opacity: .35; } }

/* -------------------------------------------------------------
   9 ter. LES AVIS : DEUX RANGEES QUI DEFILENT EN SENS OPPOSES
   -------------------------------------------------------------
   Chaque rangee est une piste dont le contenu est DOUBLE par le
   script ; elle glisse de 0 a -50 % en boucle, donc sans couture.
   La seconde va dans l'autre sens. Le survol met en pause. Sous
   mouvement reduit : pas de defilement, une grille simple.
   Une carte : etoiles, texte, prenom (facultatif), prestation, date.
   Vide : une seule carte pointillee qui invite ; en LOCAL seulement,
   des cartes d'exemple marquees EXEMPLE, jamais en ligne.
   ------------------------------------------------------------- */
.avis { display: grid; gap: 12px; }
.avis__rangee {
  position: relative;
  overflow: hidden;
  contain: content;
}
/* Les bords en fondu par deux voiles fixes (voir .defile). */
.avis__rangee::before, .avis__rangee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.avis__rangee::before { left: 0; background: linear-gradient(90deg, var(--fond), transparent); }
.avis__rangee::after { right: 0; background: linear-gradient(270deg, var(--fond), transparent); }
.avis__piste {
  display: flex;
  gap: 12px;
  width: max-content;
  will-change: transform;
  animation: avis-defile var(--avis-duree, 48s) linear infinite;
}
.avis__rangee--retour .avis__piste { animation-direction: reverse; }
.avis__rangee:hover .avis__piste { animation-play-state: paused; }
@keyframes avis-defile { to { transform: translate3d(-50%, 0, 0); } }

.avis__carte {
  display: grid;
  gap: 10px;
  width: min(78vw, 340px);
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.avis__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.avis__qui { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avis__qui > span { display: grid; line-height: 1.2; min-width: 0; }
.avis__qui b { font-weight: 700; }
.avis__qui small { color: var(--texte-2); font-size: .8rem; }
/* L'avatar : la photo, ou l'initiale sur une boule verte. */
.avis__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rayon-pilule);
  object-fit: cover;
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 800;
  font-size: 1.05rem;
}
.avis__avatar--anonyme { background: var(--surface-2); color: var(--texte-2); }
.avis__avatar--anonyme svg { width: 22px; height: 22px; }
.avis__pied { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.avis__tous { display: grid; gap: 12px; margin-top: 6px; }
.avis__tous .avis__carte { width: auto; }
.avis__note { line-height: 1; }
.avis__etoiles::before {
  content: '★★★★★';
  font-size: 1.05rem;
  letter-spacing: .08em;
  background: linear-gradient(90deg, var(--vif) calc(var(--n, 0) * 20%), var(--trait) calc(var(--n, 0) * 20%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.avis__presta {
  padding: 4px 10px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-pilule);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-2);
  white-space: nowrap;
}
.avis__texte { font-size: .98rem; line-height: 1.5; }

.avis--vide {
  gap: 18px;
  justify-items: start;
  padding: 28px 24px;
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
}
.avis__vide { color: var(--texte-2); max-width: 44ch; }

@media (max-width: 0px) /* desactive, jamais applique : voir la note « mouvement reduit » */ {
  .avis__rangee { -webkit-mask: none; mask: none; overflow-x: auto; }
  .avis__piste { animation: none; width: auto; }
  .avis__piste > :nth-child(n + 4) { display: none; }
}

/* -------------------------------------------------------------
   9 quater. LA FAQ
   -------------------------------------------------------------
   Titre a gauche, questions a droite sur grand ecran. Chaque
   question est un <details> : le « + » tourne en « x » a
   l'ouverture, la reponse se deplie en hauteur (grid-template-rows
   0fr -> 1fr, la seule facon d'animer une hauteur auto).
   ------------------------------------------------------------- */
/* Serree : la FAQ colle aux sections voisines (Nassim, 13/09/2026). */
.section--serree { padding-block: 8px 24px; }
/* Ses voisines se resserrent aussi, sinon l'ecart reste. */
#salon { padding-bottom: 28px; }
#fidelite { padding-top: 28px; }
.faq__liste { display: grid; gap: 8px; }
.faq__q {
  background: var(--surface);
  border: 0;
  border-radius: var(--rayon);
}
.faq__q summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq__q summary > span:not(.puce):not(.faq__plus) { flex: 1; }
.faq__q summary .puce { width: 38px; height: 38px; }
.faq__q summary .puce svg { width: 19px; height: 19px; }
.faq__q summary::-webkit-details-marker { display: none; }
.faq__plus {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--rayon-pilule);
  background: var(--accent);
  transition: transform 300ms cubic-bezier(.16, 1, .3, 1);
}
.faq__plus::before, .faq__plus::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  background: var(--sur-accent);
}
.faq__plus::after { transform: rotate(90deg); }
.faq__q[open] .faq__plus { transform: rotate(135deg); }
/* La reponse : un conteneur dont la hauteur est animee par
   rendu.js (Web Animations), et l'interieur qui porte le padding -
   sinon le padding empeche d'atteindre 0. */
.faq__r { overflow: hidden; color: var(--texte-2); line-height: 1.6; }
.faq__r-int { padding: 0 18px 16px 64px; }
.faq__r a { color: var(--texte); }
.faq__q:not([open]) .faq__r { display: none; }
/* Pendant la fermeture animee, le « + » se remet droit tout de suite. */
.faq__q--ferme .faq__plus { transform: none; }

/* -------------------------------------------------------------
   10. ADRESSE
   ------------------------------------------------------------- */
.lieu {
  display: grid;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}
/* Le plan est dessine par carte.js : des tuiles deja sombres,
   posees une par une. Plus d'iframe, plus de filtre d'inversion, et
   un fond de la meme couleur que le reste du site. */
.lieu__plan {
  position: relative;
  min-height: 280px;
  width: 100%;
  overflow: hidden;
  background: var(--surface-2);
}
/* Le plan est une image en cover : son centre (le salon) reste au
   centre du cadre quelle que soit la taille. */
.carte__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte__tuiles { position: absolute; inset: 0; }

/* Les tuiles d'OpenStreetMap sont bavardes et colorees. On les
   passe en gris : le plan reste lisible, et les couleurs criardes
   des routes et des parcs ne trouent plus la page. */
.carte__tuiles {
  filter: grayscale(1) contrast(.92) brightness(1.03);
}
.carte__tuiles img { position: absolute; max-width: none; }

/* Le point du salon, au centre exact du cadre. */
.carte__point {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: var(--rayon-pilule);
  background: var(--vif);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--vif) 25%, transparent), 0 2px 10px rgba(0, 0, 0, .25);
}

.carte__lien {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 9px 16px;
  border-radius: var(--rayon-pilule);
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Exigee par la licence des donnees, pas par politesse. */
.carte__credit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: var(--texte-2);
  font-size: .64rem;
  background: rgba(255, 255, 255, .8);
  padding: 3px 7px;
  border-radius: var(--rayon-pilule);
}
.lieu__infos { display: grid; gap: 0; padding: 24px; align-content: start; }
.lieu__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--trait);
  text-align: right;
}
.lieu__ligne .puce { width: 34px; height: 34px; }
.lieu__ligne .puce svg { width: 17px; height: 17px; }
.lieu__ligne > :last-child { flex: 1; }
.lieu__quoi {
  flex: 0 0 auto;
  color: var(--texte-2);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
}
.lieu__actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; }

/* -------------------------------------------------------------
   11. CONTACT
   ------------------------------------------------------------- */
.form { display: grid; gap: 16px; max-width: 560px; }

.champ { display: grid; gap: 7px; }
.champ label { font-weight: 600; font-size: .92rem; }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  color: var(--texte);
  font: inherit;
  font-size: 1rem;
}
.champ input:focus,
.champ textarea:focus { border-color: var(--texte-2); }
/* Le gris de l'indice passe le contraste AA sur la surface sombre :
   un indice trop sombre est un indice qui n'existe pas. */
.champ input::placeholder,
.champ textarea::placeholder { color: #8a7a6c; }
.champ textarea { min-height: 120px; resize: vertical; }
.champ__aide { font-size: .84rem; color: var(--texte-2); }
.champ__erreur { font-size: .86rem; color: #b3261e; font-weight: 600; }

.form__retour {
  padding: 14px 16px;
  border-radius: var(--rayon);
  background: var(--surface-2);
  border: 1px solid var(--accent);
  font-size: .94rem;
}
.form__retour--erreur { border-color: #b3261e; color: #7a1a14; }

/* -------------------------------------------------------------
   12. PIED
   -------------------------------------------------------------
   Garni (Nassim, 13/09/2026) : la marque et le geste, les pages, le
   salon, la semaine. Puis le mot en grand, pale, en signature, et
   la ligne du bas. Quatre colonnes sur grand ecran, une pile sur
   telephone. Blanc sur le papier : la seule surface de couleur
   pleine largeur du site.
   ------------------------------------------------------------- */
.pied {
  margin-top: 60px;
  padding-block: 44px 26px;
  background: var(--surface);
  border-top: 1px solid var(--trait);
}
.pied__grille { display: grid; gap: 30px; }
.pied a { text-decoration: none; color: var(--texte-2); }
.pied a:hover { color: var(--vif-fonce); }

.pied__marque { display: grid; gap: 14px; justify-items: start; }
.pied__marque .intro { font-size: .95rem; max-width: 34ch; }
.pied__marque .btn { margin-top: 4px; }

.pied__titre {
  margin-bottom: 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texte-2);
}
.pied__liens { display: grid; gap: 9px; font-size: .92rem; color: var(--texte-2); }
.pied__liens a[href$="reserver/index.html"] { color: var(--texte); font-weight: 700; }
/* ⚠️ `.pied a` (gris) est plus specifique que `.btn--premier` : le
   bouton Reserver du pied sortait en texte gris sur brun (Nassim,
   25/09/2026). Les boutons du pied gardent leurs propres couleurs. */
.pied a.btn--premier, .pied a.btn--premier:hover { color: var(--sur-accent); }
.pied a.btn--second { color: var(--texte); }
.pied a.btn--second:hover { color: var(--sur-accent); }
/* Idem pour les deux reseaux du pied : au survol, icone CREME sur
   brun (Nassim, 25/09/2026), pas le brun de `.pied a:hover`. */
.pied a.reseau { color: var(--texte); }
.pied a.reseau:hover { color: var(--sur-accent); }
.pied__liens .reserve { margin-left: 4px; }

.pied__horaires { display: grid; gap: 8px; font-size: .9rem; }
.pied__jour {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--trait);
}
.pied__jour > :first-child { color: var(--texte-2); }
.pied__ferme { color: var(--texte-2); }

.pied__bas {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--trait);
  font-size: .8rem;
  color: var(--texte-2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
}

/* Le credit Core, au centre, le meme que sur AB Cars : la phrase, le
   coeur qui bat, le logo. */
.credit-core {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--texte-2);
  font-size: .8rem;
}
.pied__bas { align-items: center; }
.credit-core a { display: inline-flex; align-items: center; color: var(--texte); text-decoration: none; }
/* Le logo Core dans la couleur du SITE (le vert), pas dans la sienne. */
.logo-core { height: 22px; width: auto; display: block; color: var(--vif); }
.coeur-credit { width: 14px; height: 14px; color: var(--vif); flex: none; position: relative; top: 1px; }
@media (min-width: 0px) /* toujours : voir la note « mouvement reduit » en tete de feuille */ {
  .coeur-credit { animation: battement-coeur 2.4s ease-in-out infinite; }
}
@keyframes battement-coeur { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1); } }
/* L'entree de la console du barbier : dans le pied, en petit, et
   pas dans le menu. C'est une porte de service, pas une page du
   site ; un client n'a rien a y faire. */
.pied__espace { text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------
   12 bis. PAGES INTERIEURES
   -------------------------------------------------------------
   Tarifs, horaires, le travail, contact. Elles n'ont pas de heros
   photo : un bandeau de titre suffit, et le contenu commence tout
   de suite. Mettre une grande image en tete de chacune ferait
   quatre pages qui se ressemblent.
   ------------------------------------------------------------- */
.page-entete { padding-block: 34px 8px; }
.page-entete .intro { margin-top: 14px; }

/* Tarifs et horaires : le titre a gauche, colle au defilement, la
   liste a droite. Sur telephone, l'un sous l'autre. */
.page-duo { display: grid; gap: 34px; padding-top: 34px; }
.page-duo__corps { min-width: 0; }
.page-duo__tete .intro { margin-top: 14px; }

/* Le fil d'Ariane : sur un site de cinq pages il ne sert pas a se
   reperer, il sert a REMONTER d'un geste, pouce en haut a gauche. */
.fil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-2);
  text-decoration: none;
}
.fil::before {
  content: '';
  width: 18px;
  height: 1.5px;
  background: currentColor;
}
.fil:hover { color: var(--texte); }

/* Le renvoi en bas de chaque section de l'accueil vers sa page. */
.btn--suite { margin-top: 22px; }
.tout-voir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texte-2);
}
.tout-voir::after {
  content: '';
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: width var(--transition);
}
.tout-voir:hover { color: var(--vif-fonce); }
.tout-voir:hover::after { width: 32px; }

/* Une vignette qui joue une video : le bouton prend toute la case,
   le triangle de lecture est pose dessus ; la video, une fois lancee,
   prend la place de l'image. */
.a-video { position: relative; }
.a-video__lien { display: block; width: 100%; height: 100%; }
/* La video est SOUS l'image ; quand elle joue, l'image s'efface. */
.a-video__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); }
.a-video img { position: relative; transition: opacity 500ms ease; }
.a-video--joue img { opacity: 0; }
.galerie .a-video__video { height: auto; aspect-ratio: 9 / 16; position: absolute; }
.galerie .a-video { aspect-ratio: 9 / 16; }
.galerie .a-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lecture { display: none; }
.lecture-inutile {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: var(--rayon-pilule);
  background: rgba(255, 255, 255, .92);
  color: var(--texte);
  box-shadow: var(--ombre);
  transition: transform var(--transition);
  pointer-events: none;
}
.lecture svg { width: 22px; height: 22px; margin-left: 2px; }
.a-video__bouton:hover .lecture { transform: scale(1.08); }
.a-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.travaux .a-video video { position: absolute; inset: 0; aspect-ratio: auto; }
.galerie .a-video video { height: auto; aspect-ratio: 9 / 16; }
.mur__vue--video { display: block; width: 100%; padding: 0; border: 0; background: var(--surface-2); cursor: pointer; }
.mur__vue--lecture { width: 100%; background: #000; object-fit: cover; }

/* La galerie de /travail/ : une mosaique en colonnes, pas une
   grille a portees. Une grille avec `grid-row: span 2` laisse de
   grandes cases vides des qu'il manque une image de la bonne
   hauteur ; les colonnes, elles, se remplissent toujours. */
.galerie { column-count: 2; column-gap: 8px; }
.galerie figure {
  margin: 0 0 8px;
  break-inside: avoid;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--surface);
}
.galerie img { width: 100%; height: auto; }

/* Le bloc d'appel en fin de page interieure. */
.rappel {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding: 28px 22px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.rappel h2 { font-size: clamp(1.6rem, 6.5vw, 2.4rem); }

/* L'appel final : un bloc blanc SANS filet (Nassim, 13/09/2026), et
   le titre a la taille du heros. Pas d'aplat noir : c'est la taille
   du titre qui fait le poids, pas un cadre. */
.rappel--grand {
  border: 0;
  border-radius: 20px;
  padding: 34px 24px;
  gap: 26px;
}
.rappel--grand h2 { font-size: clamp(2.3rem, 9.4vw, 5rem); }
.rappel--grand .intro { margin-top: 14px; }

/* La prochaine place libre, annoncee en clair sur /horaires/ : un
   client qui lit "ferme" sans savoir quand ca rouvre n'a rien
   appris. */
.prochaine {
  display: grid;
  gap: 6px;
  padding: 20px 22px;
  margin-bottom: 22px;
  border: 1px solid var(--accent);
  border-radius: var(--rayon);
  background: var(--surface-2);
}
.prochaine__quand { font-size: 1.35rem; font-weight: 800; }
.prochaine__note { color: var(--texte-2); font-size: .88rem; }

/* Les fermetures annoncees (conges), lues dans la base. */
.conges { display: grid; gap: 10px; margin-top: 22px; }
.conges__i {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  font-size: .93rem;
}

/* -------------------------------------------------------------
   12 bis b. SOCIALS : LES DEUX MURS
   -------------------------------------------------------------
   Deux cartes cote a cote sur grand ecran, l'une sous l'autre sur
   telephone. Dans chacune, une grille de vignettes 3 x 3 au format
   des publications (portrait 4:5), chaque vignette etant un lien.
   ------------------------------------------------------------- */
.flux { display: grid; gap: 18px; }
.flux__carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}
.flux__tete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--trait);
}
.flux__bulle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--trait);
  border-radius: var(--rayon-pilule);
}
.flux__bulle svg { width: 19px; height: 19px; }
.flux__qui { display: grid; line-height: 1.25; min-width: 0; flex: 1; }
.flux__qui b { font-weight: 800; font-stretch: 74%; text-transform: uppercase; letter-spacing: .02em; }
.flux__qui span { color: var(--texte-2); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flux__ouvrir { padding: 8px 14px; font-size: .74rem; }
.flux__date { margin-top: 14px; color: var(--texte-2); font-size: .84rem; }

.mur {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  background: var(--surface);
}
.mur__vue {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-2);
}
.mur__vue img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.16, 1, .3, 1); }
.mur__vue:hover img { transform: scale(1.04); }
.mur__play {
  position: absolute;
  right: 8px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--rayon-pilule);
  background: rgba(255, 255, 255, .9);
  color: var(--texte);
}
.mur__play svg { width: 14px; height: 14px; }
.mur--vide { display: grid; gap: 14px; justify-items: start; padding: 28px 20px; }

/* -------------------------------------------------------------
   12 ter. LE RAIL EN CISEAUX
   -------------------------------------------------------------
   Repris du rail detache de core-agency.be, monte par
   defilement.js. La barre native ne disparait QUE si le script a
   pose `rail-actif`, et seulement au pointeur fin : une page sans
   aucune barre visible est un piege.
   ------------------------------------------------------------- */
html.rail-actif { scrollbar-width: none; }
html.rail-actif::-webkit-scrollbar { width: 0; height: 0; }

.rail {
  position: fixed;
  /* Detachee du bord : c'est ce decalage qui la fait lire comme un
     element pose sur la page, et non comme la barre du navigateur. */
  right: 16px;
  top: 92px;
  /* ⚠️ 170 px, ET PAS MOINS : le ticket de fidelite occupe les ~145
     derniers pixels en bas a droite. Meme valeur dans defilement.js
     (BAS). */
  bottom: 170px;
  width: 26px;
  z-index: 25;
  cursor: pointer;
}

/* La ligne a couper : pointillee, comme un patron de decoupe. */
.rail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0;
  transform: translateX(-.5px);
  /* Plus clair que --trait : a 1 px, un pointille de la couleur des
     filets se confond avec le fond et la ligne n'existe plus. */
  border-left: 1px dashed #c4b39a;
}

/* Ce qui est deja coupe : un SERPENTIN vert, une onde qui suit les
   ciseaux. Fond SVG repete verticalement, une periode = 24 px. */
.rail__coupe {
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  margin-left: -6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24' fill='none' stroke='%238c5e3c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 0c0 4 4 4 4 8s-8 4-8 8 4 4 4 8'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 12px 24px;
  background-position: center top;
}

/* Les ciseaux, A LA VERTICALE, pointes vers le bas : ils descendent
   la ligne en la coupant. Le SVG est pose dans le DOM par
   defilement.js (pas en fond), pour que les deux lames puissent
   s'ouvrir et se fermer pendant le defilement. */
.rail__ciseaux {
  position: absolute;
  left: 50%;
  top: 0;
  width: 26px;
  height: 30px;
  margin-left: -13px;
  /* `translateY` et non `top` : la position est recalculee a chaque
     image de defilement, et `top` forcerait une remise en page. */
  transform: translateY(var(--rail-y, 0px));
  transition: transform 60ms linear;
  color: var(--texte);
}
.rail__ciseaux svg { width: 26px; height: 30px; display: block; overflow: visible; }
.rail__lame { transform-box: fill-box; transform-origin: 50% 40%; }
/* La decoupe : les lames s'ouvrent et se ferment tant que la page
   defile (classe posee par defilement.js, retiree 220 ms apres le
   dernier mouvement). */
/* Pendant un defilement (classe posee par commun.js), les animations
   continues s'arretent : le gel au defilement rapide venait de leur
   addition (24/09/2026). */
.defile-en-cours .avis__piste,
.defile-en-cours .coeur-credit { animation-play-state: paused; }
/* Le rail vit sur son propre calque : ses ciseaux bougent a chaque
   image, sans faire repeindre la page dessous. */
.rail, .rail__coupe { will-change: transform; }
.rail--coupe .rail__lame--g { animation: lame-g 260ms ease-in-out infinite; }
.rail--coupe .rail__lame--d { animation: lame-d 260ms ease-in-out infinite; }
@keyframes lame-g { 50% { transform: rotate(-16deg); } }
@keyframes lame-d { 50% { transform: rotate(16deg); } }

.rail:hover .rail__ciseaux,
.rail[data-prise] .rail__ciseaux { color: var(--vif-fonce); }
.rail[data-prise] { cursor: grabbing; }

/* Au toucher, on ne monte rien : la barre systeme reste. */
@media (pointer: coarse) {
  .rail { display: none; }
  html.rail-actif { scrollbar-width: thin; }
}

/* -------------------------------------------------------------
   12 quater. LES RESEAUX
   -------------------------------------------------------------
   Instagram et TikTok sont les deux vitrines reelles du barbier :
   ses coupes y sortent avant d'arriver ici. Ce sont les SEULES
   icones du site - partout ailleurs, les libelles portent le sens
   tout seuls. Une marque se reconnait a son logo, pas au mot
   « Instagram » ecrit en petit.
   ------------------------------------------------------------- */
.reseaux { display: inline-flex; align-items: center; gap: 8px; }

.reseau {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--trait);
  border-radius: var(--rayon-pilule);
  color: var(--texte);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.reseau:hover { border-color: var(--accent); background: var(--accent); color: var(--sur-accent); }
.titre-bloc--ligne .intro a:hover { color: var(--vif-fonce); }
.reseau svg { width: 19px; height: 19px; }

/* Un reseau dont l'adresse n'est pas encore connue : visible en
   local pour qu'on n'oublie pas de la demander, retire en ligne. */
.reseau--attente { border-style: dashed; opacity: .5; cursor: not-allowed; }
.reseau--attente:hover { background: transparent; color: var(--texte); border-color: var(--trait); }

/* La page des mentions legales : une colonne de lecture. */
.legal { max-width: 68ch; }
.legal h2 { font-size: 1.15rem; margin: 30px 0 10px; }
.legal p { color: var(--texte-2); line-height: 1.6; margin-bottom: 10px; }
.legal p strong { color: var(--texte); }
.legal a { color: var(--texte); }

/* Le bandeau d'annonce (variable « annonce » de la console) : une
   ligne verte sous l'en-tete. Et la page de maintenance. */
.annonce {
  margin: 0;
  padding: 10px var(--gouttiere);
  background: var(--accent);
  color: var(--sur-accent);
  text-align: center;
  font-weight: 700;
  font-size: .9rem;
}
.annonce--maintenance { background: var(--texte); color: var(--beige); }
.maintenance {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 40px var(--gouttiere);
  text-align: center;
}
.maintenance img { width: min(40vw, 180px); height: auto; }
.maintenance h1 { font-size: clamp(2rem, 8vw, 3.6rem); }
.maintenance p { color: var(--texte-2); max-width: 40ch; }
.maintenance a { color: var(--texte); font-weight: 700; }

/* -------------------------------------------------------------
   12 quinquies. LE BANDEAU COOKIES
   -------------------------------------------------------------
   Le site ne pose AUCUN cookie de suivi : pas de statistiques, pas
   de publicite. Ce qui est stocke : le choix fait ici (localStorage),
   et, pour le barbier, sa session dans la console. Le bandeau le
   dit, et propose deux boutons de meme poids : refuser ne coute pas
   plus de clics qu'accepter. Pose en bas, au-dessus de la barre de
   reservation sur telephone.
   ------------------------------------------------------------- */
.cookies {
  position: fixed;
  left: var(--gouttiere);
  right: var(--gouttiere);
  bottom: calc(76px + 12px);
  z-index: 40;
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  font-size: .9rem;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  animation: tiroir-arrive 360ms cubic-bezier(.16, 1, .3, 1);
}
.cookies p { color: var(--texte-2); }
.cookies p a { color: var(--texte); }
.cookies__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookies__actions .btn { padding: 9px 16px; font-size: .74rem; }
.cookies__options { display: grid; gap: 10px; padding-top: 4px; border-top: 1px solid var(--trait); padding-top: 14px; }
.cookies__opt { display: flex; align-items: flex-start; gap: 12px; font-size: .86rem; cursor: pointer; }
.cookies__opt input { flex: none; width: 18px; height: 18px; margin: .1em 0 0; appearance: none; border-radius: 6px; border: 1.5px solid rgba(42, 29, 21, .3); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.cookies__opt input:checked { border-color: var(--accent); background: var(--accent); }
.cookies__opt input:checked::after { content: ''; width: 9px; height: 5px; border: 2px solid var(--sur-accent); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.cookies__opt input:disabled { opacity: .55; cursor: default; }
.cookies__opt em { display: block; font-style: normal; color: var(--texte-2); font-size: .78rem; margin-top: 2px; }
.cookies__opt b { font-weight: 600; }

/* -------------------------------------------------------------
   13. MOUVEMENT
   -------------------------------------------------------------
   Une seule intention : accompagner l'arrivee de chaque bloc. Rien
   ne tourne en boucle, rien ne detourne le defilement. Tout tombe
   a plat des que le systeme demande moins de mouvement.
   ------------------------------------------------------------- */
@media (min-width: 0px) /* toujours : voir la note « mouvement reduit » en tete de feuille */ {
  [data-apparait] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease, transform 700ms cubic-bezier(.16, 1, .3, 1);
  }
  /* Quatre entrees, posees par commun.js : d'en bas, de gauche, de
     droite, ou en grandissant. */
  [data-apparait][data-anim="gauche"] { transform: translateX(-32px); }
  [data-apparait][data-anim="droite"] { transform: translateX(32px); }
  [data-apparait][data-anim="zoom"] { transform: scale(.94); }
  [data-apparait].vu { opacity: 1; transform: none; }

  /* Les grilles font entrer leurs enfants l'un apres l'autre. */
  .prestations[data-apparait] > *, .travaux[data-apparait] > *,
  .faq__liste > *, .bon[data-apparait] .bon__droite > *, .faits > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms ease, transform 620ms cubic-bezier(.16, 1, .3, 1);
  }
  .vu > *, .bon.vu .bon__droite > * { opacity: 1 !important; transform: none !important; }
  .vu > :nth-child(1) { transition-delay: 60ms; }
  .vu > :nth-child(2) { transition-delay: 140ms; }
  .vu > :nth-child(3) { transition-delay: 220ms; }
  .vu > :nth-child(4) { transition-delay: 300ms; }
  .vu > :nth-child(5) { transition-delay: 380ms; }
  .vu > :nth-child(6) { transition-delay: 460ms; }
  .vu > :nth-child(7) { transition-delay: 540ms; }
  .vu > :nth-child(8) { transition-delay: 620ms; }
  .vu > :nth-child(9) { transition-delay: 700ms; }
  .vu > :nth-child(10) { transition-delay: 780ms; }
  /* Les puces tournent en arrivant. */
  .vu .puce { animation: puce-arrive 700ms cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes puce-arrive { from { transform: scale(.4) rotate(-40deg); } }
}

/* -------------------------------------------------------------
   13 bis. L'ECRAN DE CHARGEMENT : LE COUP DE CISEAUX
   -------------------------------------------------------------
   Choisi par Nassim le 25/09/2026, a la place du monogramme en
   quatre morceaux (« quelque chose de mieux et plus visuel »).

   L'ecran est DEUX MOITIES brunes (.rideau__moitie), coupees par
   clip-path au milieu, qui portent chacune la MEME scene : a l'oeil,
   un seul ecran, le monogramme et DC'CUTS en geant. Une ligne
   pointillee traverse le mot a mi-hauteur ; les ciseaux la
   parcourent de gauche a droite en claquant, le pointille disparait
   derriere eux (coupe). Puis ouverture.js pose `rideau--ouvre` : la
   moitie haute s'envole, la basse tombe, le mot est tranche en deux
   et le site apparait dessous.

   `--v` regle la vitesse de tout : 1 a la premiere entree, .4 d'une
   page a l'autre (rideau--rapide, meme onglet).

   ⚠️ SECOURS : sans script, l'ecran disparait seul a 6 s
   (rideau-secours). Un site cache derriere un ecran qui ne se leve
   jamais est pire que pas d'ecran.
   ------------------------------------------------------------- */
.rideau {
  --v: 1;
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  animation: rideau-secours 0s linear 6s forwards;
}
/* Les clics passent des que les moities s'ecartent. */
.rideau--ouvre { pointer-events: none; }
.rideau--rapide { --v: .4; }
@keyframes rideau-secours { to { visibility: hidden; opacity: 0; } }

.rideau__moitie {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transition: transform calc(820ms * var(--v)) cubic-bezier(.7, 0, .2, 1);
  will-change: transform;
}
.rideau__moitie--haut { clip-path: inset(0 0 50% 0); transform-origin: 0 50%; }
.rideau__moitie--bas { clip-path: inset(50% 0 0 0); transform-origin: 100% 50%; }
/* L'ouverture : les deux moities s'ecartent, un rien de biais, comme
   deux pans de tissu qui tombent apres le coup de lame. */
.rideau--ouvre .rideau__moitie--haut { transform: translateY(-52%) rotate(-3deg); }
.rideau--ouvre .rideau__moitie--bas { transform: translateY(52%) rotate(-3deg); }
.rideau--ouvre .rideau__coupe { opacity: 0; transition: opacity 120ms; }

/* La scene, identique dans les deux moities. */
/* Trois rangees 1fr / auto / 1fr : le MOT tombe pile au milieu de
   l'ecran, donc sur la ligne de coupe, et il est tranche en son
   centre. Le monogramme se cale au-dessus, le lieu dessous. */
.rideau__scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  row-gap: clamp(14px, 2.4vw, 26px);
  color: var(--sur-accent);
  text-align: center;
}
/* Deux classes : la regle des images d'attente (img[src*="dc-mark"])
   pose un fond, il faut la battre. */
.rideau .rideau__sigle {
  align-self: end;
  width: clamp(64px, 9vw, 104px);
  height: auto;
  background: none;
  opacity: 0;
  transform: translateY(-10px) scale(.9);
  animation: rideau-entre calc(600ms * var(--v)) cubic-bezier(.16, 1, .3, 1) forwards;
}
.rideau__mot {
  display: flex;
  margin: 0;
  font-weight: 800;
  font-stretch: 74%;
  text-transform: uppercase;
  font-size: clamp(4.2rem, 21vw, 14rem);
  line-height: .82;
  letter-spacing: -.01em;
}
.rideau__mot i {
  font-style: normal;
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em);
  animation: rideau-entre calc(560ms * var(--v)) cubic-bezier(.16, 1, .3, 1) forwards;
}
.rideau__mot i:nth-child(1) { animation-delay: calc(80ms * var(--v)); }
.rideau__mot i:nth-child(2) { animation-delay: calc(130ms * var(--v)); }
.rideau__mot i:nth-child(3) { animation-delay: calc(180ms * var(--v)); }
.rideau__mot i:nth-child(4) { animation-delay: calc(230ms * var(--v)); }
.rideau__mot i:nth-child(5) { animation-delay: calc(280ms * var(--v)); }
.rideau__mot i:nth-child(6) { animation-delay: calc(330ms * var(--v)); }
.rideau__mot i:nth-child(7) { animation-delay: calc(380ms * var(--v)); }
.rideau__lieu {
  align-self: start;
  font-size: clamp(.68rem, 1.4vw, .82rem);
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  opacity: 0;
  animation: rideau-entre calc(500ms * var(--v)) ease calc(460ms * var(--v)) forwards;
}
@keyframes rideau-entre { to { opacity: 1; transform: none; } }

/* La ligne de coupe, a mi-hauteur de l'ecran, et les ciseaux. */
.rideau__coupe {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  z-index: 1;
}
.rideau__pointilles {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--sur-accent) 75%, transparent) 0 10px, transparent 10px 18px);
  transform: scaleX(0);
  transform-origin: left;
  /* 1. le pointille se deroule ; 2. les ciseaux le mangent. */
  animation:
    rideau-deroule calc(520ms * var(--v)) cubic-bezier(.4, 0, .2, 1) calc(1000ms * var(--v)) forwards,
    rideau-mange calc(1400ms * var(--v)) cubic-bezier(.45, 0, .25, 1) calc(1650ms * var(--v)) forwards;
}
@keyframes rideau-deroule { to { transform: scaleX(1); } }
@keyframes rideau-mange { from { clip-path: inset(0 0 0 0); transform: scaleX(1); } to { clip-path: inset(0 0 0 100%); transform: scaleX(1); } }

.rideau__ciseaux {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(44px, 5vw, 60px);
  height: clamp(44px, 5vw, 60px);
  margin: calc(clamp(44px, 5vw, 60px) / -2) 0 0 calc(clamp(44px, 5vw, 60px) / -2);
  color: var(--sur-accent);
  transform: translateX(-80px);
  animation: rideau-coupe calc(1400ms * var(--v)) cubic-bezier(.45, 0, .25, 1) calc(1650ms * var(--v)) forwards;
}
/* Le SVG des ciseaux du rail (pointes vers le bas), tourne d'un
   quart : pointes vers la droite, dans le sens de la coupe. */
.rideau__ciseaux svg { width: 100%; height: 100%; display: block; overflow: visible; transform: rotate(-90deg); }
.rideau__ciseaux .rideau__lame { transform-box: fill-box; transform-origin: 50% 40%; animation: calc(175ms * var(--v)) ease-in-out calc(1650ms * var(--v)) 8 alternate both; }
.rideau__ciseaux .rideau__lame--g { animation-name: rideau-lame-g; }
.rideau__ciseaux .rideau__lame--d { animation-name: rideau-lame-d; }
@keyframes rideau-lame-g { from { transform: rotate(-18deg); } to { transform: rotate(4deg); } }
@keyframes rideau-lame-d { from { transform: rotate(18deg); } to { transform: rotate(-4deg); } }
@keyframes rideau-coupe { to { transform: translateX(calc(100vw + 80px)); } }

/* Les pages interieures : leur en-tete entre comme le heros. */
.page-entete > *,
.page-duo__tete > * { opacity: 0; transform: translateY(14px); animation: heros-secours 0s linear 5600ms forwards; }
body.ouvert .page-entete > *,
body.ouvert .page-duo__tete > * { opacity: 1; transform: none; transition: opacity 600ms cubic-bezier(.16, 1, .3, 1), transform 700ms cubic-bezier(.16, 1, .3, 1); }
body.ouvert .page-entete > :nth-child(1), body.ouvert .page-duo__tete > :nth-child(1) { transition-delay: 380ms; }
body.ouvert .page-entete > :nth-child(2), body.ouvert .page-duo__tete > :nth-child(2) { transition-delay: 470ms; }
body.ouvert .page-entete > :nth-child(3), body.ouvert .page-duo__tete > :nth-child(3) { transition-delay: 560ms; }
body.ouvert--sans-mouvement .page-entete > *, body.ouvert--sans-mouvement .page-duo__tete > *,
body:not(:has(#rideau)):not(.ouvert) .page-entete > *, body:not(:has(#rideau)):not(.ouvert) .page-duo__tete > * { opacity: 1; transform: none; transition: none; }

/* L'entree du heros : avant `ouvert`, chaque element attend, un
   peu plus bas et transparent. A `ouvert`, ils montent l'un apres
   l'autre. La photo, elle, s'ouvre par son cadre. */
.heros__texte > *,
.heros__cadre {
  opacity: 0;
  transform: translateY(18px);
  /* Secours : si `ouvert` n'arrive jamais, tout devient visible a
     3,2 s. fill forwards seulement : avant l'echeance, les
     transitions ci-dessous gardent la main. */
  animation: heros-secours 0s linear 5600ms forwards;
}
@keyframes heros-secours { to { opacity: 1; transform: none; clip-path: none; } }
.heros__cadre { transform: none; clip-path: inset(0 0 10% 0 round 20px); }

body.ouvert .heros__texte > *,
body.ouvert .heros__cadre {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0 round 20px);
  transition:
    opacity 640ms cubic-bezier(.16, 1, .3, 1),
    transform 760ms cubic-bezier(.16, 1, .3, 1),
    clip-path 900ms cubic-bezier(.16, 1, .3, 1);
}
/* Le decalage : 90 ms entre chaque element, la photo en dernier. */
body.ouvert .heros__texte > :nth-child(1) { transition-delay: 380ms; }
body.ouvert .heros__texte > :nth-child(2) { transition-delay: 470ms; }
body.ouvert .heros__texte > :nth-child(3) { transition-delay: 560ms; }
body.ouvert .heros__texte > :nth-child(4) { transition-delay: 650ms; }
body.ouvert .heros__cadre { transition-delay: 520ms; }

/* Sans mouvement (reglage systeme) ou sans rideau (pages
   interieures) : tout est visible, sans transition. */
body.ouvert--sans-mouvement .heros__texte > *,
body.ouvert--sans-mouvement .heros__cadre,
body:not(:has(#rideau)):not(.ouvert) .heros__texte > *,
body:not(:has(#rideau)):not(.ouvert) .heros__cadre { opacity: 1; transform: none; clip-path: none; transition: none; }

@media (max-width: 0px) /* desactive, jamais applique : voir la note « mouvement reduit » */ {
  .rideau { display: none; }
  .heros__texte > *, .heros__cadre, .page-entete > *, .page-duo__tete > * { opacity: 1; transform: none; clip-path: none; animation: none; }
}

/* -------------------------------------------------------------
   14. GRAND ECRAN
   -------------------------------------------------------------
   Regroupees en fin de feuille : une media query ecrite plus haut
   perd contre toute regle posee plus bas, et le mobile se met a
   ressembler au bureau sans qu'aucune erreur ne le signale.
   ------------------------------------------------------------- */
@media (min-width: 700px) {
  :root { --gouttiere: 26px; }

  .section { padding-block: 88px; }
  .section--serree { padding-block: 8px 28px; }
  #salon { padding-bottom: 36px; }
  #fidelite { padding-top: 36px; }

  .heros__cadre { min-height: min(66dvh, 620px); }
  /* En-tete et boite du heros : MEME largeur, centres, plus courts
     que l'ecran (Nassim, 13/09/2026). La marque tombe sur le bord
     gauche de la boite, les boutons sur son bord droit, et le rail a
     ciseaux garde sa place a droite. */
  .heros, .entete__barre { max-width: 1240px; margin-inline: auto; }
  .entete--flottante .entete__barre { max-width: 1256px; }
  .heros__texte { padding: 44px 44px 46px; max-width: 900px; }
  .heros__actions { display: flex; flex-wrap: wrap; }
  .heros__actions .btn { width: auto; }

  .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .fait__face { padding: 18px 0; }


  .etapes { grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
  .etapes li { grid-template-columns: 1fr; gap: 16px 0; padding: 0; align-content: start; }
  .etapes__num { grid-row: auto; margin: 6px 0 12px 6px; }
  .etapes h3 { align-self: auto; padding-top: 0; }
  /* La liaison, horizontale : du losange au losange suivant, par-
     dessus la gouttiere. */
  .etapes li:not(:last-child)::after {
    left: 66px;
    right: -22px;
    top: 27px;
    bottom: auto;
    width: auto;
    height: 2px;
    margin: -1px 0 0;
    transform: scaleX(0);
    transform-origin: left;
  }

  .titre-bloc--ligne { grid-template-columns: 1fr auto; }
  .titre-bloc--ligne .btn { justify-self: end; align-self: end; margin-bottom: 6px; }
  .avap__cadre { aspect-ratio: 16 / 8; }
  .faq__liste { grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
  .avis__tous { grid-template-columns: repeat(3, 1fr); }
  .titre-bloc--ligne .intro { text-align: right; max-width: 34ch; padding-bottom: 6px; }

  .defile { --r: 220px; --e: 10px; }

  /* Marge droite plus large : la pastille ronde de reservation est
     fixee en bas a droite et passait DEVANT le bouton du bloc. */
  .rappel--grand { grid-template-columns: 1fr auto; align-items: end; padding: 56px 160px 56px 52px; }
  .rappel--grand .btn { padding: 16px 30px; font-size: .9rem; }
  .galerie { column-count: 3; }
  .rappel { padding: 44px 40px; }
  .page-entete { padding-block: 48px 8px; }

  .lieu { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .lieu__plan { min-height: 100%; }

  .pied__grille { grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr; gap: 40px; }
  .faits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .barre-bas { display: none; }
  .ticket { display: block; }
  .cookies { left: 24px; right: auto; bottom: 24px; width: 380px; }
  .bon { grid-template-columns: 1.1fr 1fr; }
  .bon__gauche { padding: 44px 40px; }
  .bon__droite { border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--sur-accent) 35%, transparent); padding: 40px; align-content: center; }

  .galerie { column-count: 4; }

  .duo { grid-template-columns: 1.35fr 1fr; gap: 72px; align-items: start; }

  /* Tarifs : les quatre cartes en ligne, plus de glisser. */
  .prestations.prestations--ligne {
    --g: 16px;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-duo { grid-template-columns: 1fr 1.5fr; gap: 64px; align-items: start; padding-top: 48px; }
  .flux { grid-template-columns: 1fr 1fr; gap: 24px; }
  .page-duo__tete { position: sticky; top: 98px; }

  .nav { display: flex; }
  .entete .btn { display: inline-flex; }
  .entete .reseaux { display: inline-flex; }
  .burger, .tiroir { display: none; }
  .entete__barre { height: 64px; }
}

/* -------------------------------------------------------------
   GRANDS ECRANS (2K, 2560 x 1440 - Nassim, 13/09/2026)
   -------------------------------------------------------------
   A 2560 px, la colonne de 1240 px flottait au milieu d'un vide et
   les textes de 16 px devenaient minuscules. Tout est en rem : on
   monte la base a 18 px, et la colonne, l'en-tete et la boite du
   heros a 1520 px. Les grilles gagnent une colonne quand elles ont
   la place. Rien d'autre a toucher : les composants suivent.
   ------------------------------------------------------------- */

@media (min-width: 1900px) {
  :root { --gouttiere: 32px; --large: 1520px; }
  body { font-size: 18px; }
  .section { padding-block: 110px; }
  .heros, .entete__barre { max-width: 1520px; }
  .entete--flottante .entete__barre { max-width: 1536px; }
  .entete__barre { height: 66px; }
  .heros__cadre { min-height: min(68dvh, 820px); border-radius: 26px; }
  .heros__texte { padding: 56px 56px 58px; max-width: 1100px; }
  .galerie { column-count: 5; }
  .avis__tous { grid-template-columns: repeat(4, 1fr); }
  .faq__liste { gap: 14px; }
  .duo { gap: 96px; }
  .etapes { gap: 0 48px; }
  .etapes li:not(:last-child)::after { right: -38px; }
  .cookies { width: 420px; }
}
@media (min-width: 2400px) {
  :root { --large: 1680px; }
  body { font-size: 19px; }
  .heros, .entete__barre { max-width: 1680px; }
  .entete--flottante .entete__barre { max-width: 1696px; }
}