/* =============================================================
   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. */
  --fond: #f5f5f3;
  --surface: #ffffff;
  --surface-2: #ebebe8;
  --trait: #dcdcd8;
  --texte: #141414;
  --texte-2: #5f5f64;

  /* L'accent est l'encre elle-meme : un bouton noir sur du papier
     ne peut pas etre rate, et c'est la seule "couleur" de la
     marque. */
  --accent: #141414;
  --sur-accent: #ffffff;

  --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(20, 20, 20, .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; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  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; }

/* 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); }

/* 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(--texte-2);
}

/* -------------------------------------------------------------
   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: #2c2c2c; border-color: #2c2c2c; }

.btn--second:hover { border-color: var(--texte); }

.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;
}

/* 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;
}

/* Pastille posee sur les images d'attente, en local seulement.
   Retiree en ligne : voir la fin de script.js. */
.attente { position: relative; }
.attente::after {
  content: 'image d\'attente';
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 9px;
  border-radius: var(--rayon-pilule);
  background: rgba(255, 255, 255, .88);
  color: var(--texte-2);
  font-size: .7rem;
  font-weight: 700;
}

/* -------------------------------------------------------------
   5. EN-TETE, BARRE DU BAS, PASTILLE DE RESERVATION
   ------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 245, 243, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 62px;
}

.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,
.nav a[aria-current="page"] { color: var(--texte); }

.entete__actions { display: flex; align-items: center; gap: 10px; }
.entete .btn { display: none; }

/* L'entree de la console du barbier, dans l'en-tete : un bouton
   contour, plus discret que Reserver, mais visible partout - meme sur
   telephone, ou il tient a la hauteur des icones. */
.entete .btn--connexion {
  display: inline-flex;
  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(245, 245, 243, .94);
  backdrop-filter: blur(12px);
  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. */
.pastille {
  display: none;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  width: 108px;
  height: 108px;
  place-items: center;
  text-align: center;
  border-radius: var(--rayon-pilule);
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 800;
  font-stretch: 74%;
  text-transform: uppercase;
  font-size: .8rem;
  line-height: 1.1;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: var(--ombre);
  transition: transform var(--transition);
}
.pastille:hover { transform: scale(1.05); }

/* -------------------------------------------------------------
   6. HEROS
   -------------------------------------------------------------
   Le titre sur le papier, la photo a cote dans un cadre arrondi :
   plus aucun texte pose SUR la photo, donc plus aucun voile sombre
   a lui mettre dessus. Sur telephone, le titre d'abord, la photo
   ensuite ; sur grand ecran, cote a cote.
   ------------------------------------------------------------- */
.heros {
  display: grid;
  gap: 26px;
  padding-top: 28px;
}

.heros__cadre {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
}

.heros__cadre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heros__texte {
  display: grid;
  gap: 18px;
  align-content: center;
}

.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. */
.faits { display: grid; gap: 0; margin: 0; padding-top: 6px; }
.faits > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--trait);
}
.faits dt { color: var(--texte-2); font-size: .86rem; }
.faits dd { margin: 0; font-weight: 700; text-align: right; }

/* 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. */
.titre-tournant { position: relative; overflow: hidden; }
.titre-tournant__couche {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  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
   -------------------------------------------------------------
   Des numeros en grand, en DM Mono, et un filet au-dessus de
   chaque etape : ils tiennent lieu d'illustration. Trois colonnes
   sur grand ecran, une pile sur telephone.
   ------------------------------------------------------------- */
.etapes {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--trait);
}
.etapes li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--trait);
}
.etapes__num {
  grid-row: 1 / 3;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: .9;
  color: var(--texte-2);
}
.etapes h3 { align-self: end; }
.etapes .intro { font-size: .96rem; }

/* -------------------------------------------------------------
   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; }

/* -------------------------------------------------------------
   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 {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  padding: 20px 20px 18px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  transition: border-color var(--transition), transform var(--transition);
}
.presta:hover { border-color: var(--texte-2); transform: translateY(-2px); }

/* La prestation mise en avant : le filet passe a l'encre. */
.presta--phare { border-color: var(--accent); }

.presta__nom { font-weight: 800; font-size: 1.1rem; font-stretch: 74%; text-transform: uppercase; letter-spacing: .01em; }
.presta__detail { color: var(--texte-2); font-size: .92rem; }

/* Le bas de carte : prix a gauche, duree a droite, separes par un
   filet. L'ordre des elements dans rendu.js place le prix AVANT le
   detail ; la grille le renvoie en bas par grid-row. */
.presta__prix {
  grid-row: 3;
  align-self: end;
  padding-top: 12px;
  border-top: 1px solid var(--trait);
  font-weight: 800;
  font-size: 1.25rem;
  white-space: nowrap;
}
.presta__duree {
  grid-row: 3;
  justify-self: end;
  align-self: end;
  padding-top: 14px;
  color: var(--texte-2);
  font-size: .84rem;
  white-space: nowrap;
}
/* Prix et duree partagent la rangee du bas : deux colonnes, filet
   sur toute la largeur. */
.presta { grid-template-columns: 1fr auto; }
.presta__nom, .presta__detail { grid-column: 1 / -1; }
.presta__prix { grid-column: 1; }
.presta__duree { grid-column: 2; border-top: 1px solid var(--trait); }

@media (min-width: 480px) {
  .prestations { grid-template-columns: repeat(2, 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 {
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--surface);
}
.travaux img { width: 100%; height: 100%; 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); }
.travaux img[src*="dc-mark"], .galerie img[src*="dc-mark"] { padding: 30%; }
.heros__cadre img[src*="dc-mark"] { padding: 32%; }
.galerie img[src*="dc-mark"] { aspect-ratio: 1; }

/* La mosaique de l'accueil : la premiere image occupe deux cases,
   les quatre autres se rangent a cote. Cinq photos, pas quatre
   carres identiques. */
.travaux--mosaique figure:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

/* 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; }

/* -------------------------------------------------------------
   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(--accent);
  box-shadow: 0 0 0 5px rgba(20, 20, 20, .16), 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: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--trait);
  text-align: right;
}
.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: #77777c; }
.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(--texte); }

.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 .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); }

/* Le mot en signature : tres grand, tres pale, coupe a la largeur
   du site. Il ne se lit pas, il se reconnait. */
.pied__mot {
  margin-top: 36px;
  font-weight: 800;
  font-stretch: 74%;
  text-transform: uppercase;
  line-height: .85;
  letter-spacing: -.01em;
  font-size: clamp(4rem, 17vw, 13rem);
  color: var(--surface-2);
  user-select: none;
}

.pied__bas {
  margin-top: 18px;
  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;
}
/* 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. */
.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(--texte); }
.tout-voir:hover::after { width: 32px; }

/* 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 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;
  /* ⚠️ 158 px, ET PAS MOINS : la pastille ronde de reservation occupe
     les 132 derniers pixels en bas a droite. Avec une reserve plus
     courte, les ciseaux finissaient leur course DERRIERE elle, et on
     les voyait disparaitre au bas de chaque page. */
  bottom: 158px;
  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 #b4b4b0;
}

/* Ce qui est deja coupe : trait plein, derriere les ciseaux. */
.rail__coupe {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  margin-left: -.5px;
  background: var(--texte-2);
}

.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));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  /* Des ciseaux poses a plat sur la ligne verticale : c'est le
     dessin de « decouper ici », que tout le monde lit sans legende.
     Le SVG est ecrit ici plutot que dans une balise : le rail est
     monte par JavaScript et n'a pas de HTML a lui. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6.5' r='2.5'/%3E%3Ccircle cx='5' cy='17.5' r='2.5'/%3E%3Cpath d='M7.2 7.8 20 17'/%3E%3Cpath d='M7.2 16.2 20 7'/%3E%3C/svg%3E");
  transition: transform 60ms linear;
}

.rail:hover .rail__ciseaux,
.rail[data-prise] .rail__ciseaux { background-color: var(--surface); border-radius: var(--rayon-pilule); }
.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); }
.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); }

/* -------------------------------------------------------------
   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 (prefers-reduced-motion: no-preference) {
  [data-apparait] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 540ms ease, transform 540ms cubic-bezier(.16, 1, .3, 1);
  }
  [data-apparait].vu { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------
   13 bis. LE RIDEAU D'OUVERTURE ET L'ENTREE DU HEROS
   -------------------------------------------------------------
   Accueil seulement. Le rideau est du papier, pas un aplat noir :
   le monogramme s'y pose, un trait d'encre se tire dessous (le
   geste du rasoir), le mot apparait, puis le rideau monte et le
   heros entre element par element.

   ⚠️ Le rideau se retire TOUT SEUL a 3 s par l'animation
   `rideau-secours`, meme si ouverture.js ne tourne jamais. Un site
   cache derriere un rideau qui ne se leve pas est pire que pas de
   rideau.
   ------------------------------------------------------------- */
.rideau {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: var(--fond);
  transition: transform 720ms cubic-bezier(.76, 0, .24, 1), visibility 0s linear 720ms;
  animation: rideau-secours 0s linear 3s forwards;
}
.rideau--leve { transform: translateY(-100%); visibility: hidden; }
@keyframes rideau-secours { to { transform: translateY(-100%); visibility: hidden; } }

.rideau__marque {
  display: grid;
  justify-items: center;
  gap: 14px;
}
.rideau__marque img {
  height: 46px;
  width: auto;
  opacity: 0;
  transform: translateY(8px);
  animation: rideau-monte 520ms cubic-bezier(.16, 1, .3, 1) 120ms forwards;
}
.rideau__trait {
  display: block;
  width: 120px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: rideau-trait 560ms cubic-bezier(.76, 0, .24, 1) 360ms forwards;
}
.rideau__mot {
  font-weight: 800;
  font-stretch: 74%;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
  opacity: 0;
  animation: rideau-monte 420ms ease 720ms forwards;
}
@keyframes rideau-monte { to { opacity: 1; transform: none; } }
@keyframes rideau-trait { to { transform: scaleX(1); } }

/* 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 3200ms forwards;
}
@keyframes heros-secours { to { opacity: 1; transform: none; clip-path: none; } }
.heros__cadre { transform: translateY(0) scale(.97); clip-path: inset(0 0 12% 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 (prefers-reduced-motion: reduce) {
  .rideau { display: none; }
  .heros__texte > *, .heros__cadre { opacity: 1; transform: none; clip-path: 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; }

  .heros { grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding-top: 44px; }
  /* dvh et non vh : sur iOS la barre d'adresse fait varier vh. */
  .heros__cadre { aspect-ratio: auto; height: min(74dvh, 720px); }
  .heros__actions { display: flex; flex-wrap: wrap; }
  .heros__actions .btn { width: auto; }

  .faits { grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
  .faits > div { flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 0; }
  .faits dd { text-align: left; }

  .page-duo .prestations { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .etapes { grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
  .etapes li { grid-template-columns: 1fr; gap: 18px 0; padding: 26px 0 30px; border-bottom: 0; border-top: 1px solid var(--trait); align-content: start; }
  .etapes { border-top: 0; }
  .etapes__num { grid-row: auto; font-size: 3.4rem; }
  .etapes h3 { align-self: auto; }

  .titre-bloc--ligne { grid-template-columns: 1fr auto; }
  .titre-bloc--ligne .intro { text-align: right; max-width: 34ch; padding-bottom: 6px; }

  /* Une grande a gauche sur deux rangees, quatre petites a droite. */
  .travaux--mosaique { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
  .travaux--mosaique figure:first-child { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }

  /* 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; }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .barre-bas { display: none; }
  .pastille { display: grid; }

  .galerie { column-count: 4; }

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

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

  .nav { display: flex; }
  .entete .btn { display: inline-flex; }
  .entete__barre { height: 74px; }
}