/* ==========================================================================
   MONSIEUR TOUT LE MONDE — feuille unique
   Direction « Épure » : blanc, Cormorant Garamond en display, Jost pour le
   texte, beaucoup de vide, filets d'un cheveu, un losange en ornement. Le
   registre des maisons étoilées.

   Ordre : réglages → habillage commun → accueil → maisons → annexes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Réglages
   Un seul thème, assumé : le blanc est la matière de cette direction.
   -------------------------------------------------------------------------- */
:root {
  --blanc: #FFFFFF;
  --creme: #FAF9F6;             /* les rares aplats : encadré, bandeau */
  --encre: #1C1C1A;
  --gris: #6C6C64;              /* mesuré lisible sur blanc */
  --vert: #2F4A3B;
  --trait: #E6E5DF;

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --texte: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --largeur: 1080px;
  --etroit: 760px;
  --marge: clamp(18px, 4vw, 44px);
  --rythme: clamp(44px, 6.4vw, 96px);   /* l'air est le sujet : il est large */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 128px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-weight: 400;
  font-size: clamp(.98rem, .95rem + .2vw, 1.06rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }
a:focus-visible,
button:focus-visible { outline: 1px solid var(--vert); outline-offset: 4px; }

.wrap {
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.etroit { max-width: var(--etroit); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--encre); color: var(--blanc);
  padding: 12px 18px;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* Les petites capitales de service. */
.sur-titre,
.legende {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0;
}
.sur-titre { color: var(--vert); }

/* --------------------------------------------------------------------------
   2. Apparition au défilement
   Retenue : dans cette direction, c'est le vide qui travaille. Un fondu, dix
   pixels, et rien d'autre.
   -------------------------------------------------------------------------- */
.anim {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}
.anim.est-visible { opacity: 1; transform: none; }

.anim-groupe > .anim:nth-child(2) { transition-delay: .1s; }
.anim-groupe > .anim:nth-child(3) { transition-delay: .2s; }
.anim-groupe > .anim:nth-child(4) { transition-delay: .3s; }

[data-anim="1"] { transition-delay: .05s; }
[data-anim="2"] { transition-delay: .2s; }
[data-anim="3"] { transition-delay: .35s; }
[data-anim="4"] { transition-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1; transform: none; transition: none; }
  .anim-groupe > .anim, [data-anim] { transition-delay: 0s; }
}

/* --------------------------------------------------------------------------
   3. En-tête
   Le nom au centre, la navigation en retrait à droite : la marque d'abord,
   les liens ensuite.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--blanc);
  border-bottom: 1px solid var(--trait);
}
/* Le nom sur sa ligne, la navigation sur la sienne : centrer les deux dans
   la même rangée faisait passer les liens par-dessus le nom sur les grands
   écrans. C'est aussi la disposition des maisons de cette famille. */
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 66px;
}

.marque {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(.95rem, 1.6vw, 1.12rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}

.nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px clamp(18px, 2.4vw, 30px);
  max-width: var(--largeur);
  margin-inline: auto;
  padding: 0 var(--marge) 18px;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
}
.nav a {
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.nav a:hover { color: var(--encre); }
.nav a[aria-current="page"] { color: var(--vert); border-bottom-color: var(--trait); }

.burger {
  display: none;
  position: absolute;
  right: 0;
  width: 40px; height: 32px;
  padding: 8px 6px;
  background: none; border: 0; cursor: pointer;
}
.burger span {
  display: block; height: 1px;
  background: var(--encre);
  transition: transform .3s ease, opacity .2s ease;
}
.burger span + span { margin-top: 7px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 860px) {
  .burger { display: block; }
  .marque { margin-right: auto; text-align: left; }
  .header-inner { justify-content: flex-start; }
  .nav {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0 var(--marge) 14px;
  }
  .nav.est-ouvert { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--trait); }
  .nav a:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   4. Ouverture
   Titre centré, chapeau court, ornement en losange pour clore le bloc.
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(48px, 7vw, 108px) clamp(28px, 3.6vw, 50px);
  text-align: center;
}
.hero h1,
.hero h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.2rem, 5.8vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: .005em;
  text-wrap: balance;
  margin: 0;
}
.hero em { font-style: italic; }
.hero .sur-titre { margin-bottom: 24px; }
.hero-texte {
  margin: 26px auto 0;
  max-width: 44ch;
  color: var(--gris);
  font-size: clamp(.97rem, 1.4vw, 1.06rem);
}

/* L'ornement : deux filets et un losange. Il ferme un bloc, il ne décore
   pas une section au hasard. */
.ornement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 30px auto 0;
  max-width: 220px;
}
.ornement span { flex: 1; height: 1px; background: var(--trait); }
.ornement i { width: 4px; height: 4px; background: var(--vert); transform: rotate(45deg); flex: none; }

/* --------------------------------------------------------------------------
   5. Photo large
   Contenue, jamais pleine page : dans cette direction la marge blanche fait
   partie de l'image.
   -------------------------------------------------------------------------- */
.image-large { padding-block: clamp(22px, 3.2vw, 44px); }
.image-large .cadre {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2.35 / 1;
  background: var(--creme);
}
.image-large img {
  position: absolute;
  inset: -9% 0;
  width: 100%;
  height: 118%;
  object-fit: cover;
  will-change: transform;
}
/* La photo de tête de Poulette est verticale : un bandeau panoramique en
   jetait les deux tiers. Son cadre est donc plus haut que celui des deux
   autres maisons, le temps qu'une photo horizontale la remplace. */
@media (min-width: 701px) {
  body[data-maison="poulette"] .image-large .cadre { aspect-ratio: 3 / 2; }
}

@media (max-width: 700px) { .image-large .cadre { aspect-ratio: 4 / 3; } }
.image-legende { margin: 14px 0 0; text-align: center; }

/* --------------------------------------------------------------------------
   6. Titre de rubrique
   -------------------------------------------------------------------------- */
.rubrique { text-align: center; padding-top: var(--rythme); }
.rubrique h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  letter-spacing: .01em;
  margin: 0;
}
.rubrique .sur-titre { margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   7. Les trois maisons, en portraits
   -------------------------------------------------------------------------- */
.trois {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4.4vw, 58px);
  padding-block: clamp(38px, 5vw, 72px);
}
@media (max-width: 860px) { .trois { grid-template-columns: 1fr; } }
/* « Les deux autres maisons » n'en compte que deux : sur trois colonnes
   elles restaient collées à gauche. */
.soeurs .trois { grid-template-columns: repeat(2, 1fr); max-width: var(--etroit); margin-inline: auto; }
@media (max-width: 860px) { .soeurs .trois { grid-template-columns: 1fr; } }

.maison-col { text-align: center; text-decoration: none; display: block; }
.maison-img {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--creme);
}
.maison-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.maison-col:hover .maison-img img { transform: scale(1.03); }
@media (max-width: 860px) { .maison-img { aspect-ratio: 16 / 10; } }

.col-nom {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.62rem);
  letter-spacing: .04em;
  margin: 0 0 8px;
}
.col-genre {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vert);
  margin: 0 0 18px;
}
.fin { display: block; width: 24px; height: 1px; background: var(--trait); margin: 0 auto 18px; }
.col-lieu { margin: 0 0 18px; color: var(--gris); font-size: .88rem; }
.col-aller {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 5px;
  transition: border-color .3s ease;
}
.maison-col:hover .col-aller { border-bottom-color: var(--vert); }

/* L'état du service, calculé à l'heure de Paris. */
.statut { font-size: .86rem; margin: 0 0 4px; letter-spacing: .02em; min-height: 1.3em; }
.statut[data-ouvert="oui"] { color: var(--vert); }
.horaire-jour {
  margin: 0 0 6px;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
  font-size: .94rem;
}

/* --------------------------------------------------------------------------
   8. Tableaux — signatures, heures, adresses
   Trois colonnes séparées par des filets d'un cheveu.
   -------------------------------------------------------------------------- */
.tableau { max-width: var(--etroit); margin-inline: auto; padding-block: clamp(30px, 4vw, 56px) 0; }
.rang {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--trait);
  align-items: baseline;
  text-decoration: none;
  transition: padding-left .35s ease;
}
.rang:first-child { border-top: 1px solid var(--trait); }
a.rang:hover { padding-left: 8px; }
.rang-nom { font-family: var(--display); font-size: 1.24rem; letter-spacing: .03em; }
.rang-milieu { color: var(--gris); font-size: .94rem; font-variant-numeric: tabular-nums; }
.rang-fin { color: var(--gris); font-size: .88rem; text-align: right; }
@media (max-width: 700px) {
  .rang { grid-template-columns: 1fr; gap: 4px; }
  .rang-fin { text-align: left; }
}

/* --------------------------------------------------------------------------
   9. Le mot du fondateur
   -------------------------------------------------------------------------- */
.mot {
  padding-block: var(--rythme);
  text-align: center;
  border-top: 1px solid var(--trait);
  margin-top: var(--rythme);
}
.mot blockquote {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1.28;
  margin: 0 auto;
  max-width: 22ch;
}
.signe {
  margin: 26px 0 0;
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   10. Bloc à deux colonnes — signature, histoire
   -------------------------------------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(40px, 5.4vw, 80px);
}
.duo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.duo h2,
.duo h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.14;
  margin: 0 0 18px;
}
.duo p { color: var(--gris); margin: 0 0 1em; max-width: 44ch; }
.duo .sur-titre { margin-bottom: 14px; }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } }

.lien-fin {
  display: inline-block;
  margin-top: 8px;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  border-bottom: 1px solid var(--trait);
  padding-bottom: 5px;
  transition: border-color .3s ease;
}
.lien-fin:hover { border-bottom-color: var(--vert); }

/* --------------------------------------------------------------------------
   11. Galerie
   Trois photos alignées, contenues, légendées : la marge blanche fait partie
   de l'image, ici comme en tête de page.
   -------------------------------------------------------------------------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 26px);
  padding-block: clamp(30px, 4vw, 56px);
}
@media (max-width: 700px) { .galerie { grid-template-columns: 1fr; } }

.galerie figure { margin: 0; }
.vignette {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--creme);
  cursor: zoom-in;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.vignette img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.vignette:hover img { transform: scale(1.04); }
.galerie figcaption { padding-top: 12px; text-align: center; }

/* --------------------------------------------------------------------------
   12. Fiche pratique
   Sur les pages de maison : un encadré crème, centré, pas une colonne
   collante — cette direction ne supporte pas d'élément qui suit le regard.
   -------------------------------------------------------------------------- */
.pratique {
  max-width: var(--etroit);
  margin-inline: auto;
  padding: clamp(26px, 4vw, 44px);
  background: var(--creme);
  text-align: center;
}
.pratique h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 6px;
}
.pratique .statut { margin-bottom: 22px; }

.pratique-grille {
  display: grid;
  /* La colonne des horaires porte deux services par ligne : elle a besoin
     d'un quart de largeur en plus, sinon « 12h – 14h30 » se coupe. */
  grid-template-columns: 1.3fr 1fr .9fr;
  gap: clamp(18px, 3vw, 34px);
  text-align: left;
  padding-top: 22px;
  border-top: 1px solid var(--trait);
}
@media (max-width: 700px) { .pratique-grille { grid-template-columns: 1fr; } }
.pratique-grille h3 {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 10px;
}
.pratique-grille p { margin: 0 0 4px; font-size: .94rem; }
.horaires li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: .9rem;
}
.horaires span { color: var(--gris); }
.horaires b { font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pratique-note { margin-top: 20px; color: var(--gris); font-size: .9rem; font-style: italic; }

/* --------------------------------------------------------------------------
   12 bis. Revue de presse
   Deux articles, pas une grille : une liste sobre, filets d'un cheveu, la
   source en petites capitales à droite.
   -------------------------------------------------------------------------- */
.presse { padding-block: var(--rythme); text-align: center; }
.presse h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  margin: 14px 0 30px;
}
.articles { border-top: 1px solid var(--trait); text-align: left; }
/* La source sous le titre, jamais à côté : à droite, elle passait à la ligne
   sur les titres longs et restait alignée sur les courts. */
.articles li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--trait);
}
.articles a {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.articles a:hover { border-bottom-color: var(--trait); }
.article-source {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris);
  flex: none;
}

/* --------------------------------------------------------------------------
   13. Réserver et boutons
   -------------------------------------------------------------------------- */
.reserver {
  padding-block: var(--rythme);
  text-align: center;
  border-top: 1px solid var(--trait);
  margin-top: var(--rythme);
}
.reserver h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin: 0 0 14px;
}
.reserver p { color: var(--gris); margin: 0 auto 30px; max-width: 42ch; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Boogie Burger ne se réserve pas. Le mettre sur la même ligne que les
   deux autres le faisait lire comme une troisième option : il est donc
   sorti des boutons et traité à part, sous eux. */
.reserver p.reserver-note {
  margin: 24px auto 0;
  max-width: 48ch;
  font-size: .88rem;
}
.reserver p.reserver-note a { color: var(--encre); text-underline-offset: 3px; }
.reserver .boutons-second { margin-top: 16px; }

.btn {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 26px;
  border: 1px solid var(--trait);
  color: var(--encre);
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.btn:hover { border-color: var(--encre); }
.btn-plein { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.btn-plein:hover { background: var(--vert); border-color: var(--vert); }

/* --------------------------------------------------------------------------
   14. Nous trouver
   -------------------------------------------------------------------------- */
.adresses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(30px, 4vw, 56px);
  text-align: center;
}
@media (max-width: 760px) { .adresses { grid-template-columns: 1fr; } }
.adresse h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  letter-spacing: .03em;
  margin: 0 0 8px;
}
.adresse-ville { color: var(--gris); margin: 0 0 6px; font-size: .94rem; }
.adresse-qui {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vert);
  margin: 0 0 20px;
}
.adresse-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.trouver-intro { max-width: 46ch; margin: 18px auto 0; color: var(--gris); text-align: center; }

/* --------------------------------------------------------------------------
   15. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(34px, 4.4vw, 56px);
  text-align: center;
  border-top: 1px solid var(--trait);
  color: var(--gris);
  margin-top: var(--rythme);
}
.footer-mot {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(.95rem, 1.6vw, 1.12rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--encre);
  margin: 0 0 16px;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  justify-content: center;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.footer-nav a { text-decoration: none; transition: color .3s ease; }
.footer-nav a:hover { color: var(--encre); }
.copyright { margin: 22px 0 0; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   16. Visionneuse
   -------------------------------------------------------------------------- */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(28, 28, 26, .94);
}
.visionneuse[hidden] { display: none; }
.visionneuse figure { margin: 0; max-width: 1100px; }
.visionneuse img { max-height: 78vh; width: auto; margin-inline: auto; }
.visionneuse figcaption {
  padding-top: 14px;
  text-align: center;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.visionneuse-fermer {
  position: absolute;
  top: 14px; right: 18px;
  width: 44px; height: 44px;
  background: none; border: 0;
  color: var(--blanc);
  font-size: 1.9rem; line-height: 1;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   17. Page de texte (mentions légales)
   -------------------------------------------------------------------------- */
.page-texte { padding-bottom: var(--rythme); }
.texte-legal { max-width: 68ch; margin-inline: auto; }
.texte-legal h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: .02em;
  margin: 36px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--trait);
}
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p { color: var(--gris); }
.texte-legal a { color: var(--vert); }
.muted { font-style: italic; }