/* Polices du site, hébergées dans css/polices/ (licence OFL) : Playfair Display (titres) et Mulish (texte) d'origine, puis celles proposées dans le panneau Apparence. Le navigateur ne charge que celles qui servent. */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("/css/polices/playfair-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/css/polices/mulish-latin.woff2") format("woff2"); }

/* Polices au choix du panneau Apparence (contenu/admin.json, « apparence.polices ») : sous-ensemble latin de Google Fonts, licence OFL. */
@font-face { font-family: "Fraunces"; src: url("/css/polices/fraunces.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("/css/polices/dm-serif-display.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/css/polices/cormorant-garamond.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Young Serif"; src: url("/css/polices/young-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("/css/polices/baloo-2.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/css/polices/lato-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/css/polices/lato-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("/css/polices/quicksand.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/css/polices/source-sans-3.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("/css/polices/work-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/css/polices/nunito-sans.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

/* Variables du site « La lumière du soir sur le parquet » : couleurs, polices, grille et espacements. Seul endroit où une valeur est écrite.
   Le panneau Apparence (php/apparence/fonctions.php) remplace les couleurs principales, les polices, les échelles et les coins. */
:root {
  /* la chaleur du fond suit l'heure réelle de Socoa (0 = matin clair, 1 = soir doré), réglée par js/effets/lumiere.js */
  --chaleur: 0.6;
  --ivoire-matin: #f6efe4;
  --ivoire-soir: #f1dfc3;
  --ivoire: color-mix(in oklab, var(--ivoire-matin), var(--ivoire-soir) calc(var(--chaleur) * 100%));
  --ivoire-2: color-mix(in oklab, var(--ivoire), var(--bois-clair) 14%);
  --ivoire-0: color-mix(in srgb, var(--ivoire), transparent 100%);
  --bois: #8a5f3a;
  --bois-clair: #b7865a;
  --bois-sombre: #5e4028;
  --brun: #3b2d24;
  --brun-doux: #6b5240;
  --jaune: #e6b63b;
  --jaune-fonce: #c99a1c;
  --blanc-chaud: #fbf6ec;
  --vert-ouvert: #5e9a4c;

  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "Mulish", "Segoe UI", system-ui, sans-serif;

  /* formes */
  --r: 20px;
  --r-lg: 32px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* échelles réglées dans le panneau Apparence : taille du texte, des titres, espace entre les sections */
  --echelle-texte: 1;
  --echelle-titres: 1;
  --echelle-espace: 1;

  /* la grille : un seul conteneur, une seule gouttière, pour toutes les sections */
  --largeur: 1400px;
  --gouttiere: clamp(20px, 4vw, 72px);
  /* distance entre le bord de l'écran et le bord du contenu (pour une photo qui déborde jusqu'au bord) */
  --bord: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere)));

  /* espacements, en nombre fini */
  --section: calc(clamp(56px, 6vw, 104px) * var(--echelle-espace));   /* haut et bas d'une section */
  --rangees: clamp(32px, 4vw, 56px);    /* entre deux rangées d'une même section */
  --colonnes: clamp(28px, 4vw, 64px);   /* entre deux colonnes */
  --bloc: 18px;                          /* entre deux blocs d'une colonne */
  --marge-carte: clamp(28px, 3.5vw, 48px); /* intérieur d'une colonne à fond */
  --retrait-numero: 56px;                /* colonne du numéro dans une liste d'étapes */

  /* Variables lues par l'administration (css/admin/*.css, reprise de Zaz'Ailes) : les noms viennent de là-bas, les couleurs d'ici. */
  --violet: var(--bois);
  --violet-fonce: var(--bois-sombre);
  --violet-vif: var(--bois-clair);
  --violet-nuit: var(--brun);
  --violet-menu: var(--bois-sombre);
  --lilas: #d9c3a6;
  --lavande: var(--ivoire-2);
  --lavande-bord: #dcc6a8;
  --encre: var(--brun);
  --encre-douce: var(--brun-doux);
  --blanc: #ffffff;
  --luciole: var(--jaune);
  --luciole-clair: #f2d484;
  --lueur: var(--bois-clair);
  --ligne-claire: #f1e6d4;
  --violet-nuit-rvb: 59 45 36;
  --violet-vif-rvb: 183 134 90;
  --lueur-rvb: 183 134 90;
  --luciole-rvb: 230 182 59;
  --fond-photo-rvb: 40 30 22;
  --succes-fond: #e9f3e4;
  --succes-texte: #2f5a24;
  --erreur-fond: #fbe9e4;
  --erreur-texte: #8a2a1c;
  --police-titre: var(--serif);
  --police-texte: var(--sans);
  --rayon: var(--r);
  --rayon-organique: var(--r);
  --ombre-bouton: 0 6px 14px rgb(59 45 36 / 0.25);
}

@supports not (color: color-mix(in oklab, red, blue)) {
  :root { --ivoire: #f3e7d3; --ivoire-2: #ecdbc0; --ivoire-0: rgba(243, 231, 211, 0); }
}

@media (max-width: 720px) {
  :root { --section: calc(56px * var(--echelle-espace)); --rangees: 32px; --colonnes: 24px; --r-lg: 24px; --marge-carte: 24px; }
}

/* Base du site : remise à zéro, texte et titres (échelles du panneau Apparence), boutons et liens, photos qui s'éclairent, apparitions. Pas de mise en page ici (css/socle/mise-en-page.css). */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--brun);
  font-family: var(--sans);
  font-size: calc(1.125rem * var(--echelle-texte));
  line-height: 1.6;
  font-feature-settings: "lnum";
  overflow-x: clip;
}
@media (min-width: 1400px) { body { font-size: calc(1.25rem * var(--echelle-texte)); } }

::selection { background: var(--jaune); color: var(--brun); }
html { scrollbar-color: var(--bois-clair) var(--ivoire-2); caret-color: var(--bois-sombre); }
:focus-visible { outline: 3px solid var(--bois-sombre); outline-offset: 4px; border-radius: 6px; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -0.012em; }
h1 { font-size: calc(clamp(2.5rem, 1.7rem + 2.6vw, 4.2rem) * var(--echelle-titres)); line-height: 1.02; }
h2 { font-size: calc(clamp(2.1rem, 1.5rem + 1.7vw, 3.25rem) * var(--echelle-titres)); line-height: 1.08; }
h3 { font-size: calc(clamp(1.45rem, 1.25rem + 0.5vw, 1.8rem) * var(--echelle-titres)); line-height: 1.2; }
.lead { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); line-height: 1.45; }
.small { font-size: 0.9em; color: var(--brun-doux); }
mark { background: none; color: inherit; font-weight: 700; box-shadow: inset 0 -0.5em 0 var(--jaune); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- boutons et liens ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 30px; border-radius: 999px;
  background: var(--jaune); color: var(--brun);
  font-weight: 700; font-size: 1.05rem; text-decoration: none;
  transition: background .25s, transform .25s var(--ease);
}
.btn:hover { background: var(--jaune-fonce); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn--bois { background: var(--bois-sombre); color: var(--blanc-chaud); }
.btn--bois:hover { background: var(--brun); }
.btn--clair { background: var(--blanc-chaud); color: var(--brun); }
.btn--clair:hover { background: #fff; }
.btn--ligne { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn--ligne:hover { background: var(--blanc-chaud); color: var(--brun); }
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--bois); }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- photos qui s'éclairent ---------- */
.photo { position: relative; overflow: hidden; border-radius: var(--r); background: var(--ivoire-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--ivoire); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .js .photo:not(.lit)::after { opacity: .7; }
  .js .photo::after { transition: opacity 1.2s var(--ease); }
  .js .photo:not(.lit) img { transform: scale(1.04); }
  .js .photo img { transition: transform 1.6s var(--ease); }
}

/* ---------- entrées ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rv] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .js [data-rv].in { opacity: 1; transform: none; }
}

/* La grille du site, façon Divi : section > conteneur > rangée (découpage en colonnes) > colonne (fond facultatif) > blocs.
   Toute mise en page passe par ces classes ; aucune section n'a sa propre grille. */

/* ---------- section : une bande pleine largeur, avec son fond ---------- */
.section { position: relative; padding-block: var(--section); }
.section-carte { background: var(--ivoire-2); }
.section-bois { background: var(--bois); color: var(--blanc-chaud); }
.section-bois h1, .section-bois h2, .section-bois h3 { color: #fff; }
.section-bois .link { text-decoration-color: var(--blanc-chaud); }
.section-bois .btn--bois { background: var(--brun); }
.section-bois :focus-visible { outline-color: var(--blanc-chaud); }

/* ---------- conteneur : largeur et gouttière communes ; les rangées s'y empilent ---------- */
.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); display: grid; gap: var(--rangees); }

/* ---------- rangée : les découpages ; colonnes alignées en haut, étirées à la hauteur de la rangée ---------- */
.rangee { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--colonnes); align-items: stretch; }
@media (min-width: 721px) {
  .rangee-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rangee-1-1-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rangee-1-1-1-1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rangee-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .rangee-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .rangee-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .rangee-2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
/* Tablette : quatre colonnes deux par deux. */
@media (min-width: 721px) and (max-width: 1024px) {
  .rangee-1-1-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- colonne : une pile de blocs, du haut ; « centrée » est une option de la rangée ---------- */
.colonne { min-width: 0; display: grid; gap: var(--bloc); align-content: start; }
.rangee-centre > .colonne { align-content: center; }
.colonne-carte { background: var(--ivoire-2); border-radius: var(--r-lg); padding: var(--marge-carte); }
.section-carte .colonne-carte { background: var(--ivoire); }
.section-bois .colonne-carte { background: var(--bois-sombre); }
/* Une colonne qui ne contient qu'une photo : la photo remplit la colonne, donc la hauteur de la rangée. */
.colonne-photo { display: block; }
.colonne-photo > .bloc-photo { height: 100%; min-height: 320px; aspect-ratio: auto; }
.colonne-photo > .bloc-photo img { position: absolute; inset: 0; }

/* ---------- blocs ---------- */
.bloc { margin: 0; min-width: 0; }
.bloc-titre h1, .bloc-titre h2, .bloc-titre h3 { margin: 0; }
.bloc-titre + .bloc-texte, .bloc-titre + .bloc-accroche { margin-top: 4px; }
.bloc-texte p, .bloc-texte li { max-width: 64ch; }
.bloc-texte > p { margin: 0; }
.bloc-texte > :not(:first-child) { margin-top: 0.75em; }
/* Paragraphes, listes et étapes justifiés, avec coupure des mots ; les phrases d'accroche restent à gauche. */
.bloc-texte p, .bloc-liste li, .bloc-etapes p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }
/* Dans une carte, la colonne est trop étroite pour justifier une liste : de grands trous se creusent entre les mots. */
.colonne-carte .bloc-liste li { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.bloc-accroche > p { margin: 0; max-width: 40ch; text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.bloc-accroche.lead, .bloc-accroche .lead { max-width: 40ch; }
.bloc-photo { position: relative; aspect-ratio: 3 / 2; }
.bloc-photo.photo-portrait { aspect-ratio: 4 / 5; }
.bloc-photo.photo-haut { aspect-ratio: 5 / 6; }
.bloc-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-top: 6px; }
.bloc-liste { list-style: none; margin: 0; padding: 0; }
.bloc-liste li { padding: 8px 0 8px 30px; position: relative; max-width: 64ch; }
.bloc-liste li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 16px; height: 3px; border-radius: 2px; background: var(--jaune); }
.bloc-espace { height: var(--rangees); }
.bloc-espace-petit { height: var(--bloc); }

/* l'heure d'ouverture : une pastille et une phrase */
.bloc-ouvert { font-size: 1rem; color: var(--brun-doux); display: flex; align-items: center; gap: 10px; }
.bloc-ouvert i { width: 10px; height: 10px; border-radius: 50%; background: var(--bois); flex: none; }
.bloc-ouvert.is-open i { background: var(--vert-ouvert); }
.section-bois .bloc-ouvert { color: var(--blanc-chaud); }

/* des chiffres en bref : un grand nombre en serif, une légende dessous ; côte à côte, ou empilés (-pile) */
.bloc-chiffres { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px clamp(24px, 3vw, 48px); padding-top: 10px; }
.bloc-chiffres li { font-size: 0.9rem; line-height: 1.3; color: var(--brun-doux); }
.bloc-chiffres strong { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 1rem + 0.9vw, 1.8rem); line-height: 1.1; color: var(--brun); }
.bloc-chiffres-pile { display: grid; gap: 28px; padding-top: 0; }
.bloc-chiffres-pile li { font-size: 0.95rem; }
.bloc-chiffres-pile strong { font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3.4rem); line-height: 1.05; }
/* Bandes bois : chaque chiffre sur une seule ligne (« Lun, mar, jeu, ven »), taille qui suit la largeur de la colonne. */
.section-bois .bloc-chiffres-pile { container-type: inline-size; }
.section-bois .bloc-chiffres-pile strong { white-space: nowrap; }
@media (min-width: 721px) {
  .section-bois .bloc-chiffres-pile strong { font-size: min(clamp(2.4rem, 1.8rem + 1.6vw, 3.4rem), 11.5cqi); }
}
.section-bois .bloc-chiffres li { color: var(--blanc-chaud); }
.section-bois .bloc-chiffres strong { color: #fff; }

/* un grand numéro de téléphone et un mail */
.bloc-coordonnees { display: grid; gap: 4px; justify-items: start; }
.tel-grand { font-family: var(--serif); font-size: 1.9rem; text-decoration: none; }

/* une signature sous une lettre */
.bloc-signature { display: flex; flex-direction: column; padding-top: 10px; }
.bloc-signature strong { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; }
.bloc-signature span { color: var(--brun-doux); font-size: 0.95rem; }

/* ---------- téléphone : tout passe sur une colonne, les photos reprennent un format ---------- */
@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  h1 { font-size: calc(2.1rem * var(--echelle-titres)); }
  .colonne-photo > .bloc-photo { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .colonne-photo > .bloc-photo img { position: static; }
  .bloc-chiffres { gap: 14px 24px; }
  .bloc-chiffres strong { font-size: 1.35rem; }
}

/* ---------- blocs des pages intérieures ---------- */
/* une liste d'étapes numérotées : le numéro dans une colonne fixe, le texte dans la suivante */
.bloc-etapes { list-style: none; margin: 0; padding: 0; counter-reset: e; display: grid; gap: 14px; }
.bloc-etapes li { counter-increment: e; display: grid; grid-template-columns: var(--retrait-numero) minmax(0, 1fr); gap: 12px; align-items: start; }
.bloc-etapes li::before { content: counter(e); font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--bois-sombre); }
.bloc-etapes h3 { margin-bottom: 6px; }
.bloc-etapes p { margin: 0; max-width: 50ch; }
.section-bois .bloc-etapes li::before { color: var(--jaune); }

/* une note : une icône et une phrase, sur un fond */
.bloc-note { display: flex; gap: 14px; align-items: flex-start; background: var(--ivoire-2); border-radius: var(--r); padding: 20px 24px; max-width: 60ch; }
.bloc-note svg { width: 26px; height: 26px; flex: none; stroke: var(--bois-sombre); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-top: 3px; }
.bloc-note p { margin: 0; }
.section-carte .bloc-note, .colonne-carte .bloc-note { background: var(--ivoire); }

/* des lignes « libellé · valeur », avec une phrase facultative dessous */
.bloc-lignes { list-style: none; margin: 0; padding: 0; }
.bloc-lignes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding: 14px 0; border-top: 1px solid color-mix(in oklab, var(--bois-clair), transparent 60%); }
.bloc-lignes li:first-child { border-top: 0; padding-top: 0; }
.bloc-lignes .nom { font-weight: 700; line-height: 1.3; }
.bloc-lignes .valeur { font-family: var(--serif); font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bloc-lignes p { grid-column: 1 / -1; margin: 0; color: var(--brun-doux); font-size: 0.98rem; max-width: 50ch; }

/* un tableau d'horaires (ou de coordonnées) : une ligne sur deux sur fond */
.bloc-horaires { width: 100%; border-collapse: collapse; }
.bloc-horaires td { padding: 10px 14px; }
.bloc-horaires tr:nth-child(odd) td { background: var(--ivoire-2); }
.bloc-horaires tr:nth-child(odd) td:first-child { border-radius: 10px 0 0 10px; }
.bloc-horaires tr:nth-child(odd) td:last-child { border-radius: 0 10px 10px 0; }
.bloc-horaires td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.colonne-carte .bloc-horaires tr:nth-child(odd) td, .section-carte .bloc-horaires tr:nth-child(odd) td { background: var(--ivoire); }

/* une adresse postale */
.bloc-adresse { font-style: normal; font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; }

/* un prix : le nom du soin, sa durée, le montant */
.bloc-nom h3 { font-size: clamp(1.8rem, 1.4rem + 1vw, 2.5rem); line-height: 1.1; }
.bloc-duree { color: var(--brun-doux); }
.bloc-montant { font-family: var(--serif); font-size: clamp(3.4rem, 2.6rem + 2.4vw, 5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.bloc-montant-moyen { font-size: clamp(2.6rem, 2rem + 1.6vw, 3.6rem); }

/* une image qui ne se rogne pas (dessin, visuel) */
.bloc-image { border-radius: var(--r); overflow: hidden; }
.bloc-image img { width: 100%; }

/* un grand compte (jours avant la saison) */
.bloc-compte { font-family: var(--serif); font-size: clamp(3.4rem, 2.6rem + 2.4vw, 5rem); line-height: 1; letter-spacing: -0.02em; }

/* Galeries de photos : trois par rangée (deux sur téléphone), une seule rangée visible puis « Voir plus » (js/effets/voir-plus.js), photo cliquable. */
.galerie-titre { margin: clamp(2.5rem, 6vw, 4rem) 0 1.25rem; }
.galerie {
  --ecart: 0.9rem;
  --colonnes: 3;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ecart);
}
.galerie li { flex: 0 0 calc((100% - (var(--colonnes) - 1) * var(--ecart)) / var(--colonnes)); }
.galerie-lien { display: block; border-radius: var(--rayon); cursor: zoom-in; }
.galerie img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: var(--rayon);
  background: var(--lavande-bord);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
}
.galerie-lien:hover img, .galerie-lien:focus-visible img { transform: translateY(-4px); box-shadow: var(--ombre); }

/* Rangée repliée : seules les trois premières photos (deux sur téléphone) restent visibles. */
.galerie[data-pliee] li:nth-child(n+4) { display: none; }
.galerie-suite { margin: 1.75rem auto 0; text-align: center; max-width: none; }

/* Téléphone : deux photos par rangée. */
@media (max-width: 39.99rem) {
  .galerie li { flex-basis: calc((100% - var(--ecart)) / 2); }
  .galerie[data-pliee] li:nth-child(n+3) { display: none; }
}

/* Fenêtre d'agrandissement d'une photo : plein écran sur fond nuit, boutons ronds précédente / suivante / fermer. */
.agrandissement {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  color: var(--blanc);
}
.agrandissement::backdrop { background: rgb(var(--fond-photo-rvb) / 0.97); }
.agrandissement[open] { display: flex; align-items: center; justify-content: center; animation: agrandir 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes agrandir { from { opacity: 0; transform: scale(0.96); } }
.agrandissement-cadre { margin: 0; display: grid; justify-items: center; gap: 0.75rem; padding: 4.5rem 1rem 1.5rem; }
.agrandissement-image {
  max-width: min(92vw, 56rem);
  max-height: calc(100dvh - 9rem);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--rayon);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
}
.agrandissement-legende { color: var(--lilas); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.agrandissement-bouton {
  position: absolute;
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border: 0; border-radius: 50%;
  background: var(--blanc); color: var(--violet-nuit);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.35);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.agrandissement-bouton:hover { background: var(--luciole); transform: scale(1.06); }
.agrandissement-bouton:focus-visible { outline: 3px solid var(--luciole); outline-offset: 3px; }
.agrandissement-bouton[hidden] { display: none; }
.agrandissement-bouton svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.agrandissement-fermer { top: 1rem; right: 1rem; }
.agrandissement-precedente, .agrandissement-suivante { top: 50%; transform: translateY(-50%); }
.agrandissement-precedente:hover, .agrandissement-suivante:hover { transform: translateY(-50%) scale(1.06); }
.agrandissement-precedente { left: max(1rem, calc(50vw - 33rem)); }
.agrandissement-suivante { right: max(1rem, calc(50vw - 33rem)); }
@media (max-width: 39.99rem) {
  .agrandissement-precedente, .agrandissement-suivante { top: auto; bottom: 1rem; transform: none; }
  .agrandissement-precedente:hover, .agrandissement-suivante:hover { transform: scale(1.06); }
  .agrandissement-cadre { padding-bottom: 5rem; }
  .agrandissement-image { max-height: calc(100dvh - 12rem); }
}

/* La barre du site : logo, menu des sept pages, téléphone ; bouton Menu sur tablette et téléphone. Même largeur et même gouttière que le conteneur. */
.bar {
  display: flex; align-items: center; gap: 36px;
  padding: 18px var(--gouttiere);
  max-width: var(--largeur); margin: 0 auto;
}
.bar__mark { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--serif); font-size: 1.5rem; }
.bar__mark img { width: 40px; height: 40px; border-radius: 50%; }
.bar nav { display: flex; gap: clamp(16px, 2vw, 30px); margin-left: auto; font-weight: 700; font-size: 0.95rem; }
.bar nav a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.bar nav a:hover, .bar nav a[aria-current="page"] { border-bottom-color: var(--jaune); }
.bar__tel { font-weight: 700; text-decoration: none; padding: 6px 0; border-bottom: 3px solid var(--jaune); white-space: nowrap; }
.bar__tel:hover { border-bottom-color: var(--brun); }
.bar__tel svg { display: none; }
.menu-btn { display: none; }

/* sur téléphone et tablette, le menu tient derrière un bouton */
@media (max-width: 1024px) {
  .js .menu-btn {
    display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
    min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
    background: var(--ivoire-2); color: var(--brun); font: 700 0.95rem/1 var(--sans); cursor: pointer;
  }
  .menu-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
  .js .bar { flex-wrap: wrap; }
  .js .bar__tel { margin-left: 0; order: 2; }
  .js .bar nav {
    order: 3; display: none; width: 100%; margin: 0; padding: 8px 0 16px;
    flex-direction: column; gap: 0; font-size: 1.1rem;
  }
  .js .bar.open nav { display: flex; }
  .js .bar nav a { padding: 12px 0; border-bottom: 0; }
  .js .bar nav a[aria-current="page"] { color: var(--bois-sombre); box-shadow: inset 4px 0 0 var(--jaune); padding-left: 14px; }
}
@media (max-width: 720px) {
  .bar { gap: 8px 16px; padding: 12px var(--gouttiere); }
  .bar__mark { font-size: 1.3rem; margin-right: auto; }
  .bar__mark img { width: 32px; height: 32px; }
  .js .bar__tel {
    order: 1; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--jaune); color: var(--brun);
  }
  .js .bar__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .js .bar__tel svg { display: block; width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .js .menu-btn { order: 2; margin-left: 0; }
}

/* En-tête de page : une rangée 3-2 (photo trois cinquièmes, texte deux cinquièmes) ; la photo de gauche remplit sa colonne et déborde jusqu'au bord de l'écran, le texte de droite est sur la deuxième colonne de la grille. */
.hero { padding-block: 0; }
.hero .rangee { min-height: min(calc(100svh - 76px), 920px); }
.hero .colonne-photo { margin-left: calc(-1 * var(--bord)); }
.hero .bloc-photo { border-radius: 0; background: none; min-height: 0; aspect-ratio: auto; }
.hero .bloc-photo img { object-position: 55% 35%; }
.hero .bloc-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--ivoire-0) 56%, var(--ivoire) 100%);
}
.hero .colonne-texte { align-content: center; padding-block: clamp(32px, 6vh, 72px) 36px; }
.hero .bloc-accroche > p { max-width: 36ch; text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }
.hero--page .rangee { min-height: min(calc(100svh - 76px), 720px); }
@media (min-width: 721px) { .hero--page h1 { font-size: clamp(2.2rem, 1.5rem + 2vw, 3.5rem); } }

/* tablette et téléphone : la photo au-dessus, pleine largeur, puis le texte */
@media (max-width: 1024px) {
  .hero .rangee { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; }
  .hero .colonne-photo { margin-inline: calc(-1 * var(--gouttiere)); }
  .hero .bloc-photo { height: clamp(400px, 60vw, 640px); }
  .hero .bloc-photo img { position: absolute; }
  .hero .bloc-photo::before { background: linear-gradient(180deg, var(--ivoire-0) 70%, var(--ivoire) 100%); }
  .hero .colonne-texte { padding-block: 28px 0; }
}
@media (max-width: 720px) {
  .hero .bloc-photo { height: clamp(280px, 90vw, 420px); }
  .hero .colonne-texte { padding-top: 20px; }
  .hero .bloc-accroche > p { font-size: 1.05rem; max-width: none; }
}

/* Sections propres à l'accueil : les deux soins (un h3 plus grand), les trois lieux, le cabinet en images (grande photo à gauche, les autres à droite). */
.soins h3 { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.4rem); }
.lieux h3 { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.4rem); line-height: 1.1; }
.lieux .bloc-texte { color: var(--brun-doux); }

/* la galerie : la rangée 1-1 a la hauteur de la colonne de droite (deux petites photos puis une large) ; la grande photo de gauche la remplit */
.cabinet .galerie-cabinet { gap: 14px; }
.cabinet .colonne { gap: 14px; }
.cabinet .bloc-photo { aspect-ratio: 4 / 3; }
.cabinet .colonne-photo > .bloc-photo { aspect-ratio: auto; }
.cabinet .bloc-photo.photo-large { aspect-ratio: 3 / 1; }
@media (max-width: 720px) {
  .cabinet .colonne-photo > .bloc-photo { aspect-ratio: 3 / 2; }
  .cabinet .bloc-photo.photo-large { aspect-ratio: 3 / 2; }
}

/* Page Shiatsu : les quatre saisons de la médecine chinoise (cases réglées par lumiere.js : en ce moment, la prochaine). */
.bloc-saisons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bloc-saisons li { border-radius: var(--r); padding: 18px 20px; background: var(--ivoire); line-height: 1.35; font-size: 0.95rem; color: var(--brun-doux); transition: background .3s; }
.bloc-saisons strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--brun); margin-bottom: 4px; }
.bloc-saisons li.is-now { background: var(--bois); color: var(--blanc-chaud); }
.bloc-saisons li.is-now strong { color: var(--blanc-chaud); }
.bloc-saisons li.is-next { background: var(--jaune); color: var(--brun); }
.bloc-saisons li.is-next strong { color: var(--brun); }
.bloc-saisons em { font-style: normal; font-weight: 700; display: block; margin-top: 6px; font-size: 0.85rem; }
@media (max-width: 720px) { .bloc-saisons { gap: 8px; } }

/* Section « Mise en page libre » (sections/libre.php) : ses rangées et colonnes sont celles de la grille (css/socle/mise-en-page.css) ; ici seulement les styles des blocs choisis dans le panneau (taille, couleur, alignement, style du bouton, forme et format des photos, hauteur des espaces) et les fonds. */
.libre-titre h2 { overflow-wrap: anywhere; }
.libre-texte p { overflow-wrap: break-word; }
.libre-photo.bloc-photo { aspect-ratio: 4 / 3; }
.libre-lien { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; text-decoration-color: var(--bois); }

/* Styles des blocs : seulement des choix finis, rien pour les valeurs de départ. */
.libre-taille-petit h2 { font-size: calc(clamp(1.45rem, 1.25rem + 0.5vw, 1.8rem) * var(--echelle-titres)); }
.libre-taille-grand h2 { font-size: calc(clamp(2.5rem, 1.7rem + 2.6vw, 4.2rem) * var(--echelle-titres)); }
.libre-taille-petit p, .libre-taille-petit li { font-size: 0.95em; }
.libre-taille-grand p, .libre-taille-grand li { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); line-height: 1.45; }
.libre-aligne-centre { text-align: center; }
.libre-aligne-centre p, .libre-aligne-centre h2 { margin-inline: auto; }
.libre-aligne-centre p, .libre-aligne-centre li { text-align: center; hyphens: manual; -webkit-hyphens: manual; }
.libre-liste.libre-aligne-centre li { padding-left: 0; }
.libre-liste.libre-aligne-centre li::before { display: none; }
.libre-bloc.libre-c-bois h2, .libre-bloc.libre-c-bois p, .libre-bloc.libre-c-bois li { color: var(--bois-sombre); }
.libre-bloc.libre-c-douce h2, .libre-bloc.libre-c-douce p, .libre-bloc.libre-c-douce li { color: var(--brun-doux); }
.libre-bloc.libre-c-clair h2, .libre-bloc.libre-c-clair p, .libre-bloc.libre-c-clair li { color: var(--blanc-chaud); }
.libre-bloc.libre-c-jaune h2, .libre-bloc.libre-c-jaune p, .libre-bloc.libre-c-jaune li { color: var(--jaune); }
.libre-forme-arrondie.bloc-photo { border-radius: var(--r-lg); }
.libre-forme-ronde.bloc-photo { border-radius: 50%; aspect-ratio: 1; }
.libre-forme-carree.bloc-photo { border-radius: 0; }
.libre-format-carre.bloc-photo { aspect-ratio: 1; }
.libre-format-portrait.bloc-photo { aspect-ratio: 4 / 5; }
.libre-espace-petit { height: var(--bloc); }
.libre-espace-grand { height: calc(var(--rangees) * 2); }

/* Fond choisi : ivoire (comme la page), carte ou bois (classes section-carte et section-bois de la grille) ; la colonne vide ne laisse pas de blanc sur téléphone. */
@media (max-width: 720px) { .libre-colonne-vide { display: none; } }
body.edition .libre-colonne-vide { display: grid; }

/* Pied de page (bande bois sombre sur une rangée 1-1-1) et bande d'appel fixe en bas sur téléphone. */
.pied { background: var(--bois-sombre); color: var(--blanc-chaud); padding: clamp(48px, 6vw, 80px) 0 32px; margin-top: var(--section); }
.pied__mark { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--serif); font-size: 1.6rem; }
.pied__mark img { width: 44px; height: 44px; border-radius: 50%; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* liens assez hauts pour le doigt (24 px au moins) : la marge passe dans le lien au lieu d'être entre les lignes */
.pied ul a { display: inline-block; padding-block: 6px; }
.pied .bloc-texte a { display: inline-block; padding-block: 3px; }
.pied a { text-decoration: none; }
.pied ul a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.pied .bloc-texte p { max-width: none; text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.pied__legal { font-size: 0.85rem; opacity: .8; max-width: 70ch; padding-top: 12px; }
/* signature de Tandem Lab : son symbole (déjà en blanc chaud) devant le texte, collée à la mention légale */
.pied__credit { display: flex; align-items: center; gap: 10px; padding-top: 0; }
.pied__credit img { height: 20px; width: auto; flex: none; }

/* la bande d'appel : une bande à elle, jamais posée sur le texte */
.appel-flottant { display: none; }
@media (max-width: 720px) {
  body { padding-bottom: 72px; }
  .appel-flottant {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    min-height: 64px; padding: 0 20px; border-radius: 0; justify-content: center;
    opacity: 0; pointer-events: none; transform: translateY(100%);
    transition: opacity .3s, transform .35s var(--ease);
  }
  .appel-flottant.on:not(.off) { opacity: 1; pointer-events: auto; transform: none; }
  .appel-flottant svg { width: 22px; height: 22px; }
}

/* le bouton pour remonter : apparaît après une hauteur et demie d'écran ; un fin contour le garde visible sur les bandes bois ; sur téléphone, au-dessus de la bande d'appel */
.remonter {
  position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: 24px; z-index: 9;
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer;
  color: var(--blanc-chaud); background: var(--bois-sombre); border: 1px solid color-mix(in srgb, var(--blanc-chaud) 55%, transparent); border-radius: 50%; box-shadow: var(--ombre-bouton);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .3s var(--ease), visibility .25s, background-color .2s, color .2s;
}
.remonter.on { opacity: 1; visibility: visible; transform: none; }
.remonter:hover { color: var(--brun); background: var(--jaune); }
.remonter:focus-visible { outline-color: var(--jaune); }
@media (max-width: 720px) {
  .remonter { right: max(16px, env(safe-area-inset-right, 0px)); bottom: 76px; }
}