/* ============================================================
   SALON CÉLINE IAQUINTA — feuille de style unique

   Direction retenue : « Atelier corrigé ».

   D'Atelier, on garde ce qui disait juste : le fond clair, le
   bordeaux de la charte en aplats francs, la page faite de tuiles
   — photo, couleur, texte — comme une planche de compte Instagram
   remise en ordre. C'est la seule direction qui assume la couleur
   du salon, et la seule qui laisse les photographies garder leurs
   vraies teintes : Céline est coloriste, un balayage doré ne se
   vend pas sur fond noir.

   De la piste « Nuit », on reprend ce qui manquait : une romaine
   fine pour les titres, avec un mot en italique, à la place des
   capitales ultra-grasses qui tenaient du sport plus que de la
   coiffure. Les avis, eux, repassent sur fond clair : ils parlent
   d'un lieu « cosy » et « chaleureux », un aplat presque noir les
   démentait.

   Les photographies fournies sont toutes verticales, prises au
   téléphone. Aucune ne va en bandeau panoramique : on avait essayé,
   la photo de groupe y perdait les visages et le balayage n'y était
   plus qu'une texture. Tous les cadres sont donc hauts ou carrés,
   et le rythme de la page est tenu par les aplats, les tuiles et la
   galerie bord à bord, pas par des images étirées.
   ============================================================ */

/* ---------- Polices servies avec le site ----------
   Cormorant Garamond (titres et nom du salon) et Montserrat (texte,
   étiquettes, boutons). Toutes deux sous licence SIL Open Font License 1.1.
   Les héberger ici plutôt que d'appeler Google évite de transmettre
   l'adresse IP des visiteurs à un tiers.
   Voir outils/polices.sh pour les rafraîchir. */

@font-face {
  font-family: 'Titres'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('../fonts/titres-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Titres'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('../fonts/titres-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Titres'; font-style: italic; font-weight: 300 600; font-display: swap;
  src: url('../fonts/titres-italique-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Titres'; font-style: italic; font-weight: 300 600; font-display: swap;
  src: url('../fonts/titres-italique-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Texte'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/texte-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Texte'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/texte-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Couleurs et mesures ---------- */

:root {
  /* Les deux codes de la charte, relevés sur Canva, et ce qu'il faut autour
     pour tenir une page entière. Le presque-noir ne sert plus qu'au pied de
     page : dans la version précédente il portait aussi les avis, qui
     parlaient pourtant d'un lieu chaleureux. */
  --bordeaux: #A8322B;
  --brique:   #8A241F;
  --creme:    #FFF9F3;
  --sable:    #F2EDE7;
  --encre:    #1C1413;
  --gris:     #5C4F4B;
  --rose:      #F3D9D4;   /* texte secondaire sur le bordeaux plein */
  --rose-clair:#FAEEEB;   /* et sur les tuiles, qui éclaircissent le fond */

  --filet:       rgba(28, 20, 19, 0.13);
  --filet-clair: rgba(255, 249, 243, 0.28);

  --cadre-max: 1280px;
  --gouttiere: clamp(18px, 4vw, 52px);
  --ecart:     clamp(12px, 1.4vw, 20px);
  --air:       clamp(72px, 9vw, 132px);
  --entete-h:  78px;
}

/* ---------- Réglages généraux ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--entete-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: 'Texte', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(0.96rem, 0.93rem + 0.15vw, 1.04rem);
  line-height: 1.68;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* `height: auto` n'est pas cosmétique : les attributs width et height des
   images sont des indications de mise en page pour le navigateur, et sans
   cette ligne la hauteur écrite dans le HTML l'emporterait sur les
   proportions demandées en CSS — les photographies s'étireraient. */
/* « height: auto » n'est pas décoratif : les attributs width/height du HTML
   sont des indications de présentation, et sans cette ligne ils l'emportent
   sur « aspect-ratio », qui ne s'applique que si une dimension est libre.
   La règle vaut pour les vidéos exactement comme pour les images — leurs
   attributs 720 x 1280 écrasaient sinon le cadre trois-quarts. */
img, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }

h1, h2 {
  font-family: 'Titres', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 1.5rem + 4.6vw, 5.2rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem); line-height: 1.08; margin-bottom: 1.2rem; }
h1 em, h2 em { font-style: italic; color: var(--bordeaux); }
.section-rouge h2 em { color: var(--rose); }

h3 {
  font-family: 'Texte', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.6rem;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--bordeaux); color: #fff; }
:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
.section-rouge :focus-visible, .tuile-rouge :focus-visible, .pied :focus-visible {
  outline-color: #fff;
}

.lien-evitement {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  padding: 10px 20px; background: var(--encre); color: var(--creme);
  font-size: 0.85rem; text-decoration: none;
  transform: translateY(-220%);
}
.lien-evitement:focus { transform: none; }

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

/* ---------- Éléments d'écriture ---------- */

.etiquette {
  display: inline-block;
  margin: 0 0 1.2rem;
  padding: 0.5em 1em;
  background: var(--bordeaux);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.section-rouge .etiquette { background: #fff; color: var(--bordeaux); }

.chapo {
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.22rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.citation {
  margin: 2rem 0 0;
  padding: clamp(18px, 2vw, 28px);
  background: var(--sable);
  border-left: 5px solid var(--bordeaux);
  font-family: 'Titres', serif;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  line-height: 1.4;
}
.section-sable .citation { background: var(--creme); }

.entete-section { margin-bottom: clamp(32px, 4vw, 56px); }
.entete-section h2 { max-width: 20ch; }
.entete-section .chapo { max-width: 54ch; }

.chiffre {
  display: block;
  margin-bottom: 1rem;
  font-family: 'Titres', serif;
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  color: var(--bordeaux);
}
.section-rouge .chiffre { color: var(--rose); }

/* ---------- Boutons et liens ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1em 2.2em;
  border: 1px solid var(--encre);
  color: var(--encre);
  background: transparent;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.bouton:hover { background: var(--encre); color: var(--creme); }

.bouton-plein { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
.bouton-plein:hover { background: var(--encre); border-color: var(--encre); }

.bouton-clair { background: #fff; border-color: #fff; color: var(--bordeaux); }
.bouton-clair:hover { background: var(--encre); border-color: var(--encre); color: #fff; }

.bouton-petit { padding: 0.85em 1.5em; font-size: 0.62rem; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--bordeaux);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.lien-fleche::after { content: '\2192'; transition: transform 0.25s ease; }
.lien-fleche:hover { color: var(--brique); }
.lien-fleche:hover::after { transform: translateX(3px); }

/* ---------- Tuiles ----------
   L'unité de la page : un bloc plein, sans arrondi ni ombre. */

.tuile { padding: clamp(20px, 2.2vw, 32px); background: var(--sable); }
.section-sable .tuile { background: var(--creme); }
/* Deux classes, pour passer devant « .section-sable .tuile » : écrite avec
   une seule, la tuile rouge redevenait crème dans une section sable, et son
   texte blanc y disparaissait. */
.tuile.tuile-rouge { background: var(--bordeaux); color: #fff; }
.tuile.tuile-rouge h3 { color: #fff; }

/* ---------- En-tête ---------- */

.entete { position: sticky; top: 0; z-index: 100; background: var(--creme); }
.entete.defile { box-shadow: 0 1px 0 var(--filet); }

.entete-inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 36px);
  min-height: var(--entete-h);
}

.marque {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  text-decoration: none;
  color: var(--encre);
  flex: none;
}
/* Le prénom et le nom sont écrits de la même main : même romaine, même
   corps, même interlettrage. Seule la couleur les distingue, comme sur la
   vignette de partage. */
.marque-prenom,
.marque-nom {
  font-family: 'Titres', Georgia, 'Times New Roman', serif;
  font-size: clamp(1rem, 0.92rem + 0.34vw, 1.24rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.marque-prenom { color: var(--bordeaux); margin-right: 0.22em; }
.marque-nom { color: var(--encre); }

.menu { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px); margin-left: auto; }
.menu a {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gris);
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.menu a:hover, .menu a.actif { color: var(--bordeaux); border-bottom-color: var(--bordeaux); }
.menu .menu-rdv { display: none; }

.entete-rdv { flex: none; }

.hamburger {
  display: none;
  width: 44px; height: 44px; margin-left: auto;
  padding: 0; background: none; border: none; cursor: pointer;
}
.hamburger span {
  display: block; width: 26px; height: 2px; margin: 6px auto;
  background: var(--encre);
  transition: transform 0.28s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Accueil ----------

   La photographie est une IMAGE, pas un fond. C'est la leçon de cinq
   essais : elle fait 1013 px de large et elle est debout. Étalée sur toute
   la largeur d'un écran, elle n'offre qu'un gros plan sur une bouche,
   agrandi d'un facteur 1,9 — violent et flou. Posée à sa taille, sur un
   écran de 1440 px elle s'affiche vers 460 px : elle est RÉDUITE, donc
   franche, et on la voit entière.

   Un seul fond, donc : le crème de la page. L'image est un objet dessus,
   avec de l'air tout autour — ce n'est pas la même chose qu'une seconde
   surface qui file jusqu'au bord. Aucun voile nulle part : les couleurs du
   salon, le noir des boucles et les reflets sont intacts.

   Les trois faits passent sous l'ensemble, en une rangée qui tient toute
   la largeur. Ils cousent les deux colonnes et donnent au bloc une assise. */

.accueil { padding-block: clamp(40px, 5.5vw, 88px) clamp(36px, 4.5vw, 72px); }

.accueil-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.accueil-texte { max-width: 34rem; }

.accueil-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Bornée en LARGEUR, pas en hauteur : une hauteur maximale avec une
     largeur à 100 % aplatit le cadre et casse le trois-quarts — le contrôle
     de format l'a d'ailleurs relevé, 0,78 au lieu de 0,75. Exprimée en
     hauteur d'écran parce que c'est la fenêtre qui décide : sur un écran
     large et bas, une photographie plus haute qu'elle écraserait le texte. */
  max-width: min(calc(66vh * 3 / 4), 620px);
  margin-inline: auto;
}

/* Une rangée de trois, sous un filet qui tient toute la largeur. Pas de
   tuiles : sur le crème, trois cartouches de plus alourdissaient un bloc
   qui n'en demandait pas. */
.accueil-faits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 56px);
  margin-top: clamp(40px, 5vw, 76px);
  border-top: 1px solid var(--filet);
  padding-top: clamp(18px, 2.2vw, 30px);
}
.accueil-faits .fait {
  min-height: 0;
  gap: 0.45rem;
}
.accueil-faits .fait span { color: var(--gris); opacity: 1; }
.accueil-faits .fait strong {
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.45rem);
  text-wrap: balance;
}

.fait {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.9rem;
  min-height: 118px;
}
.fait span {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.72;
}
.fait strong {
  font-family: 'Titres', serif;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem);
  font-weight: 400;
  line-height: 1.05;
}

/* ---------- Bandeau défilant ---------- */

.ruban {
  overflow: hidden;
  background: var(--bordeaux);
  color: #fff;
  padding-block: clamp(7px, 0.8vw, 11px);
}
.ruban-piste {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.2vw, 36px);
  width: max-content;
  font-family: 'Titres', serif;
  font-size: clamp(1.05rem, 0.85rem + 0.85vw, 1.55rem);
  line-height: 1.15;
  white-space: nowrap;
  animation: ruban 46s linear infinite;
}
.ruban-piste i { font-style: normal; opacity: 0.5; }
.ruban-piste span:nth-child(4n+1) { font-style: italic; }
@keyframes ruban { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */

.section { padding-block: var(--air); }
.section-sable { background: var(--sable); }
.section-rouge { background: var(--bordeaux); color: #fff; }
.section-rouge h2, .section-rouge h3 { color: #fff; }

.deux {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.colonne-texte { max-width: 56ch; }

/* Le module photographique de la page : une fenêtre trois-quarts, la même
   pour les sections 01, 05 et 07. Avant, chacune avait sa taille et sa
   proportion — deux vignettes serrées ici, un portrait en 4/5 là, un autre
   format ailleurs. */
.photo-section img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* ---------- 05 · L'équipe ----------
   Seule exception au cadrage centré : c'est un portrait de groupe, et le
   milieu de l'image tombe sur les mains, pas sur les visages. */
.deux-equipe { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; }
.photo-equipe img { object-position: 50% 24%; }

/* ---------- 02 · Cheveux bouclés ---------- */

.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ecart);
  margin: 0;
  padding: 0;
  list-style: none;
}
.etapes li { padding: clamp(20px, 2.2vw, 30px); background: rgba(255, 255, 255, 0.12); }
.etapes p { margin: 0; font-size: 0.94rem; color: var(--rose-clair); }

/* Les deux films de la section curly. Deux colonnes sur grand écran, l'une
   sous l'autre au téléphone. La vidéo garde ses proportions verticales de
   téléphone : on ne la recadre pas, il n'y a rien à gagner à couper une
   coiffure en deux.

   D'où la largeur plafonnée : du 9/16 étalé sur la moitié du cadre, ce sont
   deux colonnes d'un mètre de haut qui écrasent le reste de la section. À
   760 px, chaque film fait la largeur d'une tuile de la rangée voisine, et
   la page garde son rythme. */
.film-paire {
  margin: var(--ecart) 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.curly-films {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ecart);
  margin-top: 0.9rem;
  max-width: 760px;
}
.film { margin: 0; }
.film video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--encre);
  /* L'affiche est verticale comme le film : « cover » évite les deux bandes
     noires que « contain » laisserait si le cadrage bougeait d'un pixel. */
  object-fit: cover;
}
.film figcaption {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--rose-clair);
}
/* Le repère temporel — « La séance », « Le résultat » — se détache du reste
   de la légende : c'est lui qui donne l'ordre de lecture des deux films. */
.film-phrase { display: block; }
.film-temps {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.35rem;
}

.curly-bas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ecart);
  margin-top: var(--ecart);
}
.curly-bas img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.objectif {
  margin: 0;
  padding: clamp(20px, 2.2vw, 32px);
  background: #fff;
  color: var(--bordeaux);
  font-family: 'Titres', serif;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem);
  line-height: 1.15;
  display: flex;
  align-items: flex-end;
}
/* La phrase est enveloppée dans un span : sans lui, l'italique deviendrait
   un élément de flex à part entière et se détacherait du reste. */
.objectif span { display: block; }
.objectif em { font-style: italic; }

/* ---------- 03 · Prestations ---------- */

.familles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--ecart);
}
.famille h3 {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 1rem;
}
.famille ul { margin: 0; padding: 0; list-style: none; }
.famille li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--filet);
  font-family: 'Titres', serif;
  font-size: 1.24rem;
}
.famille li:first-child { border-top: none; }
.famille-note {
  margin: 1.2rem 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--gris);
}

.tarifs { display: flex; flex-direction: column; }
.tarifs h3 {
  font-family: 'Titres', serif;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}
.tarifs h3 em { font-style: italic; }
.tarifs p { font-size: 0.94rem; color: var(--rose); }
.tarifs .bouton { margin-top: auto; padding-top: 1.1em; align-self: flex-start; }

/* La galerie court d'un bord à l'autre de l'écran. Trois colonnes depuis
   qu'elle compte six photos : deux rangées pleines, et chaque photo gagne un
   tiers de largeur au passage. */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(48px, 6vw, 88px);
  background: var(--filet);
}
.galerie figure { overflow: hidden; }
.galerie img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.galerie img:hover { transform: scale(1.04); }

/* ---------- 04 · Avant le rendez-vous ---------- */

.conseils {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ecart);
}
.conseil p { margin: 0; font-size: 0.95rem; color: var(--gris); }

/* ---------- 06 · Avis ----------
   Sur fond clair : les avis parlent d'un salon « cosy », « chaleureux »,
   « on s'y sent bien » — un aplat sombre disait le contraire. */

.avis {
  columns: 3 250px;
  column-gap: var(--ecart);
}
.avis blockquote {
  break-inside: avoid;
  margin: 0 0 var(--ecart);
  border-top: 3px solid var(--bordeaux);
}
.avis p {
  font-family: 'Titres', serif;
  font-size: 1.2rem;
  line-height: 1.45;
  margin-bottom: 1rem;
}
.avis cite {
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bordeaux);
}

/* ---------- 07 · Marques ---------- */

/* ---------- 08 · Venir au salon ---------- */

.infos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--ecart);
}
.info-bloc h3 {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 1rem;
}
.info-bloc p { color: var(--gris); }
.info-sous-titre { margin-top: 1.8rem; }
.info-rdv { display: flex; flex-direction: column; }
.info-rdv h3 { color: #fff; }
.info-rdv p { color: var(--rose); font-size: 0.95rem; }
.info-rdv .bouton { margin-top: auto; align-self: flex-start; }

.horaires { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.horaires th, .horaires td {
  padding: 0.45rem 0;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--filet);
}
.horaires td { text-align: right; color: var(--gris); }
.horaires tr:last-child th, .horaires tr:last-child td { border-bottom: none; }
.horaires .ferme { color: #7A6E6A; }  /* tenu au seuil 4,5:1 sur la crème */
.horaires .aujourdhui th, .horaires .aujourdhui td { color: var(--bordeaux); font-weight: 600; }

/* ---------- Pied de page ---------- */

.pied {
  background: var(--encre);
  color: var(--creme);
  padding-block: clamp(48px, 6vw, 80px) 32px;
}
.pied-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: clamp(24px, 3.5vw, 56px);
  padding-bottom: clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid rgba(255, 249, 243, 0.16);
}
.pied .marque-prenom,
.pied .marque-nom {
  color: var(--creme);
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.95rem);
}
.pied-marque p {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: rgba(255, 249, 243, 0.68);
  max-width: 34ch;
}
.pied-menu, .pied-contact { display: flex; flex-direction: column; gap: 0.55rem; }
.pied-menu a, .pied-contact a {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 249, 243, 0.72);
  width: fit-content;
  transition: color 0.2s ease;
}
.pied-menu a:hover, .pied-contact a:hover { color: var(--creme); }

.pied-legal { padding-top: 26px; }
.legal summary {
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 249, 243, 0.7);
  list-style: none;
}
.legal summary::-webkit-details-marker { display: none; }
.legal summary::before { content: '+ '; }
.legal[open] summary::before { content: '– '; }
.legal summary:hover { color: var(--creme); }

.legal-corps {
  max-width: 72ch;
  margin-top: 1.6rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(255, 249, 243, 0.68);
}
.legal-corps h3 {
  margin: 1.6rem 0 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--creme);
}
.legal-corps h3:first-child { margin-top: 0; }
.legal-corps a { color: var(--creme); }

.copyright {
  margin: 2rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(255, 249, 243, 0.45);
}

/* ---------- Visionneuse ---------- */

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 64px);
  background: rgba(28, 20, 19, 0.95);
}
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: min(100%, 720px); max-height: 88svh; width: auto; object-fit: contain; }
.visionneuse-fermer {
  position: absolute;
  top: clamp(12px, 2vw, 26px);
  right: clamp(12px, 2vw, 26px);
  width: 48px; height: 48px;
  background: none;
  border: 1px solid var(--filet-clair);
  color: var(--creme);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.visionneuse-fermer:hover { background: rgba(255, 249, 243, 0.12); }

/* Le fond ne défile pas derrière la visionneuse ouverte. La classe évite
   d'écrire un style en ligne, que la politique de sécurité interdit. */
.sans-defilement { overflow: hidden; }

/* ---------- Rendez-vous flottant (mobile) ---------- */

.rdv-flottant {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  padding: 1.15em 2em;
  background: var(--bordeaux);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
.rdv-flottant.visible { transform: none; }

/* ---------- Apparitions au défilement ---------- */

.apparition {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.apparition.vue { opacity: 1; transform: none; }

/* ============================================================
   Tablette
   ============================================================ */

@media (max-width: 1040px) {
  .menu a { font-size: 0.63rem; letter-spacing: 0.08em; }
  .accueil-grille { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --entete-h: 66px; }

  /* Le menu devient un rideau plein écran. */
  .menu {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.3rem;
    margin: 0;
    padding: var(--entete-h) var(--gouttiere) 40px;
    background: var(--creme);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.5s cubic-bezier(0.7, 0, 0.2, 1);
    overflow-y: auto;
  }
  .menu.ouvert { clip-path: inset(0 0 0 0); }
  .menu a {
    font-family: 'Titres', serif;
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--encre);
    padding: 0.22em 0;
    border-bottom: none;
  }
  .menu .menu-rdv { display: block; font-style: italic; color: var(--bordeaux); margin-top: 0.3em; }

  /* Le nom du salon et le bouton restent au-dessus du rideau. */
  .marque, .hamburger { position: relative; z-index: 2; }
  .hamburger { display: block; }
  .entete-rdv { display: none; }
  .rdv-flottant { display: block; }

  /* Sur téléphone, la photographie passe devant le texte. Sinon l'arrivée
     sur le site, c'est une étiquette, un titre de quatre lignes, un
     paragraphe et deux boutons — un écran entier avant la moindre image,
     pour un salon de coiffure. L'ordre du HTML ne change pas : le titre
     reste le premier élément de la page pour un lecteur d'écran. */
  /* Sur téléphone, la photographie passe devant le texte : sinon l'arrivée
     sur le site d'un salon de coiffure, c'est un écran entier de mots avant
     la moindre image. L'ordre du HTML ne bouge pas — le titre reste le
     premier élément pour un lecteur d'écran. */
  .accueil-grille { gap: clamp(26px, 5vw, 40px); }
  .accueil-photo { order: -1; }
  .accueil-photo img { max-width: calc(54vh * 3 / 4); }
  .accueil-texte { max-width: none; }

  .deux, .deux-equipe { grid-template-columns: minmax(0, 1fr); }
  .colonne-texte { max-width: none; }
  .curly-bas { grid-template-columns: 1fr 1fr; }

  /* Les deux films restent côte à côte — empilés, on ne voit jamais la
     séance et le résultat en même temps, et l'avant-après disparaît. Trois
     cadrages ont été essayés : empilés en 4/3, le recadrage tranche la
     cliente (une vidéo de téléphone est debout, pas couchée) ; empilés et
     rétrécis, le second film tombe sous la ligne de flottaison. Reste le
     côte à côte, qu'on fait courir d'un bord à l'autre de l'écran pour
     rendre aux vignettes la gouttière qu'elles perdaient — comme la
     galerie, quelques sections plus bas. */
  .curly-films {
    margin-inline: calc(var(--gouttiere) * -1);
    gap: 2px;
  }
  .film figcaption { margin-top: 0.6rem; padding-inline: var(--gouttiere); }
  .film:last-child figcaption { padding-inline: 0 var(--gouttiere); }
  .film-phrase { display: none; }

  /* Bornées en hauteur d'écran, pas en pixels : c'est la hauteur de
     l'appareil qui décide de ce qui est « immense ». La largeur suit le
     3/4, donc la forme est intacte. */
  .photo-section img { max-width: calc(44vh * 3 / 4); margin-inline: auto; }
  .objectif { grid-column: span 2; }
  .galerie { grid-template-columns: 1fr 1fr; }
  .pied-inner { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Téléphone
   ============================================================ */

@media (max-width: 620px) {
  .accueil-actions { flex-direction: column; align-items: stretch; }
  .accueil-actions .bouton { width: 100%; }
  .avis { columns: 1; }
  .pied { padding-bottom: 84px; }  /* place pour le bouton flottant */
  .pied .marque-prenom, .pied .marque-nom { font-size: 1.3rem; }
}

/* ============================================================
   Préférences du visiteur
   ============================================================ */

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

@media print {
  .entete, .rdv-flottant, .visionneuse, .hamburger, .ruban { display: none !important; }
  body { background: #fff; color: #000; }
  .section-rouge, .tuile-rouge, .pied { background: #fff; color: #000; }
  .section-rouge h2, .section-rouge h3, .etapes p, .tarifs p { color: #000; }
}