/*
@charset "UTF-8";
	Theme Name: Szirmay
	Theme URI: https://monaccordeur-de-piano.com
	Description: Theme du site de Geoffroy Szirmay, accordeur et restaurateur de piano. Base starter Nature Digitale (ND MetaBox).
	Author: Nature Digitale - Agence Web Eco Responsable
	Author URI: https://naturedigitale.fr
	Version: 2.0.0
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: nature-digitale
*/

/* ============================================================================
   SZIRMAY - FEUILLE DE STYLE COMMUNE
   Reprise de la maquette v2 (maquettes/szirmay-accueil/assets/style.css,
   build du 14/09/2026), partagee par toutes les pages. Les adaptations propres
   a WordPress sont regroupees en fin de feuille.
   Polices auto-hebergees dans assets/fonts/, sous-ensemble latin.
   JAMAIS d'appel a une API de polices.
   ============================================================================ */

/* ============================================================================
   MAQUETTE V2 - PAGE D'ACCUEIL SZIRMAY
   ----------------------------------------------------------------------------
   ADAPTATIONS PAR RAPPORT AUX VARIABLES PAR DEFAUT DU THEME (starter) :

   | Variable            | Starter                  | Szirmay v2            |
   |---------------------|--------------------------|-----------------------|
   | --font-body         | system-ui, Roboto...     | "DM Sans"             |
   | --font-heading      | var(--font-body)         | "Cormorant Garamond"  |
   | --color-text        | #1a1a1a                  | #1F1813 (encre)       |
   | --color-text-light  | #555                     | #57463A (encre doux)  |
   | --color-bg          | #ffffff                  | #F4ECDF (creme)       |
   | --color-bg-alt      | #f5f5f5                  | #FAF6EE (papier)      |
   | --color-border      | #e0e0e0                  | #D9CDB6 (filet)       |
   | --color-link        | #0055a5 (BLEU, interdit) | #6B3F25 (noyer)       |
   | --color-link-hover  | #003d7a                  | #A07A52 (chene)       |
   | --container-width   | 1200px                   | 1180px (brief)        |
   | --section-padding   | 80px 0                   | 64px 0 / 96px desktop |
   | --header-height     | 72px                     | 64px / 72px desktop   |

   Palette validee par le client le 21/05 puis reconfirmee le 08/08/2026.
   Aucune couleur hors de la liste. Pas de blanc pur, pas de noir pur.
   ============================================================================ */

/* Cormorant Garamond : une seule graisse utilisee (500), donc statique.
   Pas de fichier italique depuis le 25/09/2026 (23 Ko de moins) : les
   passages en italique (sous-titre du hero, devise du pied de page, notes,
   legendes) sont penches par le navigateur a partir de la romaine
   (font-synthesis, actif par defaut). Ne pas mettre font-synthesis: none.
   DM Sans : deux graisses (400 et 500), et Google ne la sert plus qu'en
   variable, donc un seul fichier variable. Sous-ensemble latin. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond/CormorantGaramond-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/dm-sans/DMSans-Variable.woff2') format('woff2');
}

:root {
  /* --- Tokens de marque --- */
  --bg-creme:   #F4ECDF;
  --bg-papier:  #FAF6EE;
  --encre:      #1F1813;
  --encre-doux: #57463A;
  --bois-noyer: #6B3F25;
  --bois-chene: #A07A52;
  --laiton:     #B68A4E;
  --filet:      #D9CDB6;
  --nuit:       #14100C; /* fond du pied de page, repris de la v1 */

  /* --- Variables du theme, remappees sur la marque --- */
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --color-text: var(--encre);
  --color-text-light: var(--encre-doux);
  --color-bg: var(--bg-creme);
  --color-bg-alt: var(--bg-papier);
  --color-border: var(--filet);
  --color-link: var(--bois-noyer);
  --color-link-hover: var(--bois-chene);
  --container-width: 1180px;
  --gouttiere: 20px;
  --header-height: 64px;
  --section-padding: 60px 0;
  /* Echelle d'espacement, base 5px :
     5 / 10 / 15 / 20 / 25 / 30 / 40 / 50 / 60 / 80 / 100 / 120.
     Aucune valeur hors de cette suite. */
  --radius-sm: 5px;
  --radius-md: 5px;
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --shadow-douce: 0 1px 2px rgba(31, 24, 19, 0.08);

  /* --- Ambiance feutree (build b29) --------------------------------------
     Grain papier : bruit fractal SVG inline en data-URI, ~600 octets, aucune
     requete reseau. Rasterise une seule fois puis repete en tuile de 180 px,
     donc sans cout de peinture au defilement. Ne JAMAIS le remplacer par un
     backdrop-filter : ce dernier repeint a chaque frame de scroll.
     Halos : deux degrades radiaux tres dilues, dans les bois de la palette.
     Aucune couleur nouvelle, aucun fichier ajoute.

     Les TROIS curseurs ci-dessous pilotent toute l'ambiance. Ce sont les seules
     valeurs a toucher pour la rendre plus discrete ou plus marquee ; les
     degrades qui suivent les consomment via var(). Reglage retenu : « moyen ».
     Le grain se juge a l'ecart-type de luminance qu'il induit sur le creme :
     en dessous de ~1.5 sur 255 l'oeil ne le voit pas. Mesures faites sur la
     maquette : 0.07 -> 0.68 (invisible), 0.13 -> 1.24 (limite), 0.17 -> 1.62,
     0.19 -> 1.81, 0.26 -> 2.5. Le premier essai etait a 0.05, soit 0.4 :
     totalement absent, c'est le retour client du 08/09. Ces mesures ont ete
     faites avec le bruit gris ; elles restent valables depuis qu'il est teinte,
     le chene ayant la meme luminance (129) que le gris qu'il remplace (128).
       doux   : 0.09 / 0.13 / 0.13
       moyen  : 0.19 / 0.21 / 0.18   <- actuel, cale par le client le 09/09
       marque : 0.26 / 0.30 / 0.26 */
  --grain-force:    0.19;
  /* Teinte du grain. Il etait gris : sur un fond chaud, du gris moyen desature
     legerement la couleur. Il est desormais peint dans le chene de la palette,
     dont la luminance (129) est celle du gris qu'il remplace (128) : poids
     percu identique, mais dans le ton. Le noyer, lui, aurait ete a 73, soit un
     ecart au creme une fois et demie plus grand : c'est le marron juge trop
     violent le 08/09. Le bruit servant de masque, la teinte reste une variable,
     modifiable sans retoucher le data-URI. */
  --grain-teinte: var(--bois-chene);
  /* Appoint de matiere sur les sections qui n'ont pas de halo. Multiplicateur
     et non seconde valeur absolue, pour que --grain-force continue de piloter
     l'ensemble depuis un seul endroit. */
  --grain-appoint: 1;
  --halo-force:     0.21;
  --vignette-force: 0.18;

  /* baseFrequency abaissee de 0.9 a 0.62 : a 0.9 le bruit etait si fin qu'il
     disparaissait sur les ecrans a forte densite de pixels. */
  --grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>");
  --grain-taille: 180px;
  /* Le marron du bas (--bois-noyer) est le plus fonce des deux et c'est lui
     qui pesait : son coefficient est descendu de 0.75 a 0.55, soit une flaque
     deux fois plus discrete, quand l'or du haut ne perd que 20 %.
     Les halos sont CONTENUS dans la section : ils s'eteignent avant d'en
     atteindre les bords. La premiere version debordait (centres poses hors du
     cadre, a -10% et 108%), donc la couleur etait a son maximum pile sur la
     jointure : partout ou deux sections se touchent sans marge, en particulier
     deux sections qui se touchent sans marge, la coupure se voyait. Contenus,
     ils forment des flaques de lumiere et aucune jointure n'apparait.
     Les versions en miroir servent une section sur deux : la lumiere descend la
     page en zigzag au lieu de se repeter a l'identique.

     Regle de containment : centre +/- rayon vertical doit rester dans
     [0%, 100%], sinon le halo est encore vif sur le bord et la jointure avec
     la section suivante se voit. Premier jet cale a 32% de centre pour 40% de
     rayon, soit -8% : la couture etait nette entre la bande sombre et le pied
     de page, deux fonds nuit qui se touchent.
       haut : 42 +/- 38  ->   4% .. 80%
       bas  : 66 +/- 34  ->  32% .. 100%
       nuit : 48 +/- 40  ->   8% .. 88%   */
  --halo-haut: radial-gradient(52% 38% at 24% 42%, rgba(182, 138, 78, var(--halo-force)), rgba(182, 138, 78, 0) 100%);
  --halo-bas:  radial-gradient(48% 34% at 80% 66%, rgba(107, 63, 37, calc(var(--halo-force) * 0.55)), rgba(107, 63, 37, 0) 100%);
  --halo-haut-m: radial-gradient(52% 38% at 76% 42%, rgba(182, 138, 78, var(--halo-force)), rgba(182, 138, 78, 0) 100%);
  --halo-bas-m:  radial-gradient(48% 34% at 20% 66%, rgba(107, 63, 37, calc(var(--halo-force) * 0.55)), rgba(107, 63, 37, 0) 100%);
  /* Sur fond nuit, une seule source, plus douce : une lampe d'atelier. */
  --halo-nuit: radial-gradient(55% 40% at 24% 48%, rgba(182, 138, 78, calc(var(--halo-force) * 0.5)), rgba(182, 138, 78, 0) 100%);
  --vignette:  radial-gradient(115% 85% at 50% 42%, rgba(20, 16, 12, 0) 45%, rgba(20, 16, 12, var(--vignette-force)) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   AMBIANCE FEUTREE
   Deux voiles fixes couvrant la fenetre, photo du hero comprise : c'est ce qui
   unifie la page et donne le grain « papier » demande le 08/09. Poses en fixed
   et en pointer-events:none, ils forment chacun une couche composee a part :
   aucun repeint au defilement, et les clics les traversent. z-index 50, donc
   sous l'en-tete (60) et sous le panneau du menu (55).
   Deux pseudo-elements et non un seul : le grain se dose par l'opacite de la
   couche, la vignette par l'alpha de son degrade. Deux leviers differents.
   --------------------------------------------------------------------------- */
/* Vignette : la lumiere retombe vers les bords. C'est elle qui fait le
   « tamise ». Voile unique, fixe, en pointer-events:none : couche composee a
   part, aucun repeint au defilement, les clics la traversent. z-index 50, donc
   sous l'en-tete (60) et sous le panneau du menu (55). Le nuit de la palette,
   jamais du noir pur. Un degrade assombrit : il respecte la photo du hero. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;
  background-image: var(--vignette);
}

/* Grain papier. Pose section par section, et JAMAIS en voile global : le bruit
   est gris, donc sur une photo sombre il remonte les noirs et delave l'image.
   Premier essai du 08/09 fait ainsi, la photo du hero virait au gris sale.
   Ici le grain se glisse entre le fond de la section et son contenu : le .container
   repasse au-dessus, les photos restent intactes. Pas de mix-blend-mode : un
   voile en fusion se recalcule a chaque frame de defilement. */
.section { position: relative; }
.section > * { position: relative; z-index: 1; }
.section::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  /* Repli : le bruit gris en image de fond. Sert tel quel a tout moteur
     depourvu de masque CSS. */
  background-image: var(--grain);
  background-size: var(--grain-taille) var(--grain-taille);
  opacity: calc(var(--grain-force) * var(--grain-appoint));
}

/* Bruit teinte. Imperativement sous @supports : le masque est ce qui decoupe
   l'aplat en grains. Sans lui, background-color peindrait un aplat chene plein
   cadre sur chaque section. La panne serait spectaculaire, le garde-fou est
   donc obligatoire, pas precautionneux. */
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .section::after,
  .panneau::before {
    background-image: none;
    background-color: var(--grain-teinte);
    -webkit-mask-image: var(--grain);
            mask-image: var(--grain);
    -webkit-mask-size: var(--grain-taille) var(--grain-taille);
            mask-size: var(--grain-taille) var(--grain-taille);
  }
}

/* Les sections creme n'ont plus de halo depuis le 09/09 : un quart de grain en
   plus leur rend de la matiere sans les rechauffer. Les chapitres papier, deja
   portes par leur halo, gardent le dosage de base. Specificite egale, l'ordre
   des deux regles fait donc foi : la seconde doit suivre la premiere. */
.section { --grain-appoint: 1.25; }
.fond-papier,
.presentation { --grain-appoint: 1; }
/* Sections sur fond nuit : meme raison que pour la photo, le grain gris y
   delaverait le noir. */
.zones-bande::after { content: none; }

/* Halos chauds sur les seuls chapitres papier, et non plus sur chaque section :
   posee partout, la flaque de lumiere revenait a chaque ecran et saturait les
   pages internes. Une section sur deux la porte donc, les sections creme
   restant calmes ; elles gardent le grain et la vignette, qui eux sont globaux.
   Le halo devient ainsi le marqueur des chapitres clairs.
   Le bandeau photo des pages internes porte la classe .page-hero, pas .section :
   il est de toute facon exclu, et c'est voulu, un halo sur une photo la delave. */
.fond-papier,
.presentation {
  background-image: var(--halo-haut), var(--halo-bas);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}
/* Quand une page compte deux chapitres papier (a-propos : le parcours puis la
   galerie), le second recoit la version en miroir : la lumiere change de cote
   au lieu de se repeter a l'identique. */
.fond-papier:nth-of-type(4n) {
  background-image: var(--halo-haut-m), var(--halo-bas-m);
}

/* ---------------------------------------------------------------------------
   FILET DE CHAPITRE
   Pose sur toute rupture de couleur de fond (demande client du 08/09). Le
   client voulait un trait epais ; la rupture de fond fait deja la coupure, un
   trait plein aurait fait doublon. Filet de la palette, marque au centre par un
   court segment laiton, du meme vocabulaire que .logo-filet du hero.
   --------------------------------------------------------------------------- */
/* UN SEUL trait, celui de l'accueil, valide par le client le 08/09. J'avais
   propose un second poids, plus leger, pour les sections partageant un meme
   fond ; la reponse a ete de reprendre partout celui de l'accueil. Plutot que
   d'affaiblir le trait, on a donc donne a ces sections un fond alterne : chaque
   separation est desormais une vraie rupture de couleur, et le trait marque y
   est a sa place. Aucun besoin d'un second niveau. */
.rupture { position: relative; border-top: 1px solid var(--filet); }
.rupture::before {
  content: "";
  position: absolute; top: -1px; left: 50%;
  width: 96px; height: 2px;
  transform: translateX(-50%);
  background: var(--laiton);
  opacity: 0.7;
}
/* Sur fond nuit, le filet creme est le meme que celui des tableaux et de la
   bande des zones ; le laiton, lui, tient sur les deux fonds sans changer. */
.rupture-sombre { border-top-color: rgba(217, 205, 182, 0.25); }

img { max-width: 100%; display: block; }
a { color: var(--color-link); }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Aucun padding tant que les bords de la fenetre ne touchent pas le contenu.
   Au-dela de 1240 px (1180 + 2 x 30) le conteneur flotte librement ; la
   gouttiere n'est appliquee qu'en dessous, par la media query en fin de
   feuille. */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
}

/* Icones HugeIcons : trait fin, jamais rempli, toujours a la couleur du texte. */
.ico { width: 20px; height: 20px; flex: none; display: inline-block; }
.ico svg { width: 100%; height: 100%; display: block; fill: none; stroke-width: 1.5; }
.ico svg [stroke] { stroke: currentColor; }

/* Petit libelle DM Sans, capitales espacees. Signalisation, jamais un badge. */
.libelle {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--encre-doux);
  margin: 0;
}

/* ============================================================================
   HEADER
   ============================================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-height);
  z-index: 60;
  background: var(--bg-creme);
  border-bottom: 1px solid var(--filet);
  transition: background var(--transition-base), border-color var(--transition-base);
}
.site-header[data-etat="photo"] {
  background: transparent;
  border-bottom-color: transparent;
}
.header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
}
.header-logo {
  justify-self: center;
  text-decoration: none;
  color: var(--encre);
  font-family: var(--font-heading);
  font-weight: 500; font-size: 19px;
  letter-spacing: 0.14em; line-height: 1;
  transition: opacity var(--transition-base);
}
/* Sur le premier ecran, le logo est deja affiche en grand dans le hero. */
.site-header[data-etat="photo"] .header-logo { opacity: 0; pointer-events: none; }

.btn-burger {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  cursor: pointer; color: var(--encre);
  transition: color var(--transition-base);
}
.site-header[data-etat="photo"] .btn-burger { color: var(--bg-creme); }
.btn-burger .ico-fermer { display: none; }
.btn-burger[aria-expanded="true"] { color: var(--encre); }
.btn-burger[aria-expanded="true"] .ico-ouvrir { display: none; }
.btn-burger[aria-expanded="true"] .ico-fermer { display: block; }

/* ============================================================================
   PANNEAU BURGER
   Porte les tarifs, le telephone et les mentions, retires de l'accueil.
   ============================================================================ */
.panneau {
  position: fixed; inset: 0; z-index: 55;
  background: var(--bg-papier);
  padding: calc(var(--header-height) + 32px) 20px 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.panneau[data-ouvert="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
/* Le menu est un calque a part : pose en fixed au-dessus du voile de vignette
   (z-index 55 contre 50), il ne recevait ni grain ni vignette et faisait donc
   une surface lisse au milieu d'un site qui a de la matiere. On lui ajoute le
   grain, dans le meme dosage que les chapitres papier dont il reprend le fond.
   En fixed et non en absolute : le panneau defile des que la navigation depasse
   la hauteur d'ecran, et un voile en absolute suivrait le contenu en laissant
   le bas nu. Le fixed se resout ici sur la boite du panneau, qui porte une
   transform, et de toute facon celle-ci couvre deja la fenetre entiere. */
.panneau::before {
  content: "";
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  /* Repli gris, comme pour les sections : voir le @supports plus bas. */
  background-image: var(--grain);
  background-size: var(--grain-taille) var(--grain-taille);
  opacity: calc(var(--grain-force) * var(--grain-appoint));
}
/* Au-dessus du grain, sans quoi la navigation passerait dessous. */
.panneau-inner { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; }

.panneau-nav { display: flex; flex-direction: column; border-top: 1px solid var(--filet); }
.panneau-nav a {
  font-family: var(--font-heading);
  font-size: 28px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--encre); text-decoration: none;
  padding: 20px 0;
  border-bottom: 1px solid var(--filet);
  transition: color var(--transition-fast);
}
.panneau-nav a:hover { color: var(--bois-noyer); }

/* Le bloc tarifs du panneau a ete retire le 17/08 : chaque page de prestation
   porte desormais sa propre grille, la reprise dans le menu faisait doublon.
   Ses styles sont partis avec lui ; le tableau des pages, table.tarifs, est
   defini plus bas et n'a rien de commun avec eux. */
.libelle-haut { margin-top: 20px; }

/* Pas de filet en haut : la derniere entree de navigation porte deja le sien,
   et depuis le retrait du bloc tarifs les deux traits se suivaient a vide. */
.panneau-pied { margin-top: 30px; }
.panneau-pied a {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--encre-doux); text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 5px 0; margin-right: 20px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.panneau-pied a:hover { color: var(--bois-noyer); border-bottom-color: var(--bois-chene); }

/* ============================================================================
   ECRAN 1 - HERO
   Photo plein cadre, logo par-dessus, picto reseau, invitation a descendre.
   Aucun texte d'accroche : refus explicite du client.
   ============================================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  align-items: center;
  overflow: hidden;
  background: var(--encre);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* Voile de lisibilite, uniforme. Pas de degrade decoratif. */
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(31, 24, 19, 0.44); }

.hero-content { position: relative; z-index: 3; text-align: center; padding: var(--header-height) 20px 0; }

/* Zone logo. Dimensions fixes : le fichier client viendra s'y substituer. */
.zone-logo { display: inline-block; min-width: 260px; padding: 10px 0; }
/* Armoiries du client (14/09). Dimensions HTML posees : aucun decalage au
   chargement. Le mot SZIRMAY reste en texte dessous. */
.logo-embleme { display: block; width: 230px; max-width: 100%; height: auto; margin: 0 auto 20px; }
.logo-mot {
  font-family: var(--font-heading);
  font-weight: 500; font-size: 46px;
  letter-spacing: 0.16em; line-height: 1;
  color: var(--bg-creme);
  margin: 0 0 0 0.16em;
}
.logo-sous {
  font-family: var(--font-heading); font-style: italic;
  font-size: 15px; letter-spacing: 0.02em;
  color: rgba(244, 236, 223, 0.82);
  margin: 10px 0 0;
}
.logo-filet { width: 56px; height: 1px; background: var(--laiton); margin: 20px auto 0; opacity: 0.75; }

.hero-reseaux { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.picto-reseau {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(244, 236, 223, 0.75);
  border: 1px solid rgba(244, 236, 223, 0.3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.picto-reseau:hover { color: var(--bg-creme); border-color: rgba(244, 236, 223, 0.7); }

/* Invitation a descendre. Seul ornement anime de la page. */
.descendre {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0 0 30px;
  text-decoration: none;
  color: rgba(244, 236, 223, 0.72);
  transition: color var(--transition-fast);
}
.descendre:hover { color: var(--bg-creme); }
.descendre .libelle { color: inherit; font-size: 10px; }
.descendre-corde { position: relative; width: 1px; height: 52px; background: linear-gradient(to bottom, rgba(182,138,78,0.12), var(--laiton)); }
.descendre-cheville {
  position: absolute; left: 50%; top: 0;
  width: 5px; height: 5px; transform: translateX(-50%);
  border-radius: 50%; background: var(--laiton);
  animation: descente 2.8s ease-in-out infinite;
}
@keyframes descente {
  0%   { top: 0;    opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { top: 47px; opacity: 0; }
}

/* ============================================================================
   ECRAN 2 - LES QUATRE ENTREES
   Quatre tuiles menant chacune a une page dediee. Image en 4/3, libelle, puis
   une phrase courte. Composition identique a toutes les tailles d'ecran.
   ============================================================================ */
.section { padding: var(--section-padding); }
.section-titre-zone { margin-bottom: 30px; }
.section-titre-zone > .section-title:first-child { margin-top: 0; }
.section-title {
  font-family: var(--font-heading);
  font-weight: 500; font-size: 38px;
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--encre); margin: 10px 0 0;
  text-wrap: balance;
}

/* Une seule composition a toutes les tailles : image au-dessus, titre, phrase.
   Seul le nombre de colonnes change : 1 en mobile, 2 a 768px, 4 a 1024px. */
/* Deux colonnes des le mobile : les quatre entrees tiennent sur DEUX rangees
   a toutes les tailles, une seule a partir de 1024 px (demande client du
   08/09 : « sur une row ou deux max »). L'ancienne colonne unique empilait
   quatre tuiles de 466 px, soit pres de quatre ecrans de defilement. */
.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 15px; align-items: stretch; }
.tuile {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.tuile-cadre { display: block; overflow: hidden; border: 1px solid var(--filet); }
/* Le ratio est impose par le CSS, jamais par le fichier : en production les
   visuels arrivent du client via ND MetaBox et peuvent avoir n'importe quel
   format. object-fit: cover recadre sans deformer. */
.tuile-cadre img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--transition-base);
}
.tuile:hover .tuile-cadre img,
.tuile:focus-visible .tuile-cadre img { transform: scale(1.03); }
/* Le bloc texte s'etire jusqu'en bas de la carte : les filets s'alignent
   d'une tuile a l'autre quelle que soit la longueur du libelle. */
.tuile-texte {
  display: flex; flex-direction: column; flex: 1;
  margin: 15px 0 0;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--filet);
  transition: border-color var(--transition-base);
}
.tuile:hover .tuile-texte { border-bottom-color: var(--bois-chene); }
.tuile-texte { margin-top: 12px; }
.tuile-titre {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500; font-size: 19px;
  line-height: 1.15; letter-spacing: -0.01em;
  color: var(--encre);
}
.tuile-phrase {
  display: block;
  font-size: 13px; line-height: 1.45;
  color: var(--encre-doux);
  margin: 5px 0 0;
}

/* ============================================================================
   ECRAN 3 - LE TECHNICIEN ET L'ATELIER
   Un seul bloc depuis le 14/09 (les deux blocs parcours / atelier ont ete
   fusionnes) : texte sous son titre a gauche, photo a droite. En mobile la
   photo suit le texte.
   ============================================================================ */
.presentation { background-color: var(--bg-papier); }
.presentation-grille { display: grid; gap: 35px; align-items: center; }
/* Meme corps que le titre de la section precedente (14/09). */
.presentation-titre { margin: 0 0 25px; }
/* Ratio impose par le CSS, meme raison que pour les tuiles : les visuels
   uploades par le client ne seront pas tous au bon format. */
.presentation-image {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 30%;
  border: 1px solid var(--filet);
}
.bloc-titre {
  font-family: var(--font-heading);
  font-weight: 500; font-size: 28px;
  line-height: 1.15; letter-spacing: -0.01em;
  color: var(--encre); margin: 10px 0 10px;
}
.bloc-texte { font-size: 16px; line-height: 1.7; color: var(--encre-doux); margin: 0 0 20px; }

.lien-souligne {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500;
  color: var(--bois-noyer); text-decoration: none;
  border-bottom: 1px solid var(--bois-noyer);
  padding-bottom: 5px;
  transition: color var(--transition-fast), border-color var(--transition-fast), gap var(--transition-fast);
}
.lien-souligne:hover { color: var(--bois-chene); border-bottom-color: var(--bois-chene); gap: 15px; }
.lien-souligne .ico { width: 15px; height: 15px; }

/* ============================================================================
   ECRAN 4a - LOCALISATION ET ZONE DE TRAVAIL
   Le telephone figure ici, en ligne de texte. Jamais en bouton.
   Pas d'iframe Maps : cout de perf et RGPD, un lien suffit.
   ============================================================================ */
.localisation { background-color: var(--bg-creme); }
.local-grille { display: grid; gap: 40px; }
.local-lieu {
  font-family: var(--font-heading);
  font-weight: 500; font-size: 34px;
  line-height: 1.1; letter-spacing: -0.01em;
  color: var(--encre); margin: 10px 0 10px;
}
.local-texte { font-size: 16px; line-height: 1.7; color: var(--encre-doux); margin: 0 0 15px; }
.local-zones { list-style: none; margin: 10px 0 0; padding: 0; }
.local-zones li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--filet);
  font-family: var(--font-heading); font-size: 20px; color: var(--encre);
}
.local-zones li:first-child { border-top: 1px solid var(--filet); }
.local-zones .precision {
  margin-left: auto;
  font-family: var(--font-body); font-size: 13px;
  color: var(--encre-doux); text-align: right;
}

/* ============================================================================
   ECRAN 4b - PIED DE PAGE
   Reprend le fond sombre de la v1. Pas de bloc CTA : le client a retire celui
   de la v1 et demande que le telephone ne soit pas mis en avant.
   ============================================================================ */
.site-footer {
  background-color: var(--nuit);
  background-image: var(--halo-nuit);
  color: #D6C9B1;
  padding: 60px 0 30px;
}
.footer-grille { display: grid; gap: 35px; }
.footer-marque {
  font-family: var(--font-heading);
  font-weight: 500; font-size: 28px;
  letter-spacing: 0.14em; color: #F0E6D3;
  margin: 0 0 5px;
}
.footer-tag {
  font-family: var(--font-heading); font-style: italic;
  font-size: 15px; color: #A89A7E; margin: 0 0 15px;
}
.footer-col h2 {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #A89A7E; margin: 0 0 15px;
}
.footer-col p { margin: 0 0 5px; font-size: 14px; line-height: 1.7; color: #D6C9B1; }
.footer-col a {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; line-height: 1.9;
  color: #D6C9B1; text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-col a:hover { color: #F0E6D3; }
.footer-liste { display: flex; flex-direction: column; align-items: flex-start; }
.footer-bas {
  margin-top: 50px; padding-top: 20px;
  border-top: 1px solid #2A221B;
  display: flex; flex-wrap: wrap; gap: 10px 25px;
  justify-content: space-between;
  font-size: 12px; color: #6B5E48;
}
.footer-bas a { color: #8A7D65; text-decoration: none; border-bottom: 1px solid #2A221B; display: inline; }
.footer-bas a:hover { color: #D6C9B1; }

/* Mentions + note eco, groupees a droite (retour a la ligne sur mobile). */
.footer-droite { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

/* Note eco (Options Dev > Eco-badge) : pastille filet laiton, note en
   Cormorant, meme discretion que le reste de la ligne. */
.footer-bas a.eco-pill {
  display: inline-flex; align-items: stretch;
  border: 1px solid #3A2F24; border-radius: 999px; overflow: hidden;
  line-height: 1; color: #8A7D65;
  transition: border-color .25s ease, color .25s ease;
}
.eco-note {
  display: flex; align-items: center; padding: 4px 10px 5px;
  background: #221B15; border-right: 1px solid #3A2F24;
  font-family: var(--font-heading); font-size: 15px; color: var(--laiton);
  transition: border-color .25s ease;
}
.eco-co2 { display: flex; align-items: center; padding: 4px 12px; letter-spacing: .04em; }
.eco-co2 sub { font-size: .75em; vertical-align: baseline; position: relative; top: .2em; }
.footer-bas a.eco-pill:hover, .footer-bas a.eco-pill:focus-visible { border-color: var(--laiton); color: #D6C9B1; }
.footer-bas a.eco-pill:hover .eco-note, .footer-bas a.eco-pill:focus-visible .eco-note { border-color: var(--laiton); }

/* ============================================================================
   TABLETTE - 768px
   ============================================================================ */
@media (min-width: 768px) {
  :root { --gouttiere: 30px; --section-padding: 100px 0; --header-height: 72px; }
  body { font-size: 17px; }
  .logo-mot { font-size: 68px; }
  .logo-embleme { width: 300px; }
  .logo-sous { font-size: 18px; }
  .section-title { font-size: 54px; }
  .tuiles { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
  .tuile-titre { font-size: 22px; }
  .tuile-phrase { font-size: 15px; }
  .panneau { padding: calc(var(--header-height) + 48px) 32px 48px; }
  .panneau-nav a { font-size: 34px; }
  .local-grille { grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
  .presentation-grille { grid-template-columns: 1fr 1fr; gap: 45px; }
  .local-lieu { font-size: 40px; }
  .footer-grille { grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; }
}

/* ============================================================================
   DESKTOP - 1024px
   Ecran 3 : deux blocs strictement de meme largeur, sans separateur.
   ============================================================================ */
@media (min-width: 1024px) {
  .logo-mot { font-size: 86px; }
  .logo-embleme { width: 340px; margin-bottom: 25px; }
  .tuiles { grid-template-columns: repeat(4, 1fr); gap: 25px; }
  /* Le portrait allonge (3/6) montait a 552 px de haut : la rangee debordait
     de l'ecran. Retour au 3/4 des autres tailles, la section entiere tient
     desormais dans une fenetre de 1280x800. */
  .tuile-cadre img { aspect-ratio: 3 / 4; }
  .presentation-grille { grid-template-columns: 1.15fr 1fr; gap: 70px; }
}

/* ============================================================================
   MOUVEMENT REDUIT
   ============================================================================ */
@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;
  }
  .descendre-cheville { animation: none; top: 23px; opacity: 1; }
}

/* ============================================================================
   PAGES INTERNES
   ============================================================================ */

/* --- Bandeau : photo, voile, titre pose en bas a gauche, comme l'accueil --- */
.page-hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 340px;
  padding-bottom: 40px;
  background: var(--encre);
  overflow: hidden;
}
.page-hero > img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(31, 24, 19, 0.48);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .libelle { color: rgba(244, 236, 223, 0.75); }
.page-titre {
  font-family: var(--font-heading);
  font-weight: 500; font-size: 44px;
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--bg-creme); margin: 10px 0 0;
  text-wrap: balance;
}
.page-hero .logo-filet { margin: 20px 0 0; }

/* Utilitaires de rythme vertical, en remplacement des anciens styles inline. */
/* Le bloc tarifs etait colle au texte qui le precede (padding haut nul). Il
   porte desormais son propre fond et son filet de chapitre : c'est un sujet
   distinct, il reprend donc le rythme vertical commun. */
/* Enchainement de deux blocs d'un meme ensemble : on reduit l'ecart au lieu
   d'additionner les paddings de deux sections completes. */
.section-liee { padding-top: 50px; }
.libelle-bloc { margin-bottom: 40px; }

/* --- Corps de page : texte justifie + image en vis-a-vis --- */
.contenu-grille { display: grid; gap: 30px; align-items: start; }
.contenu-image {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid var(--filet);
}
/* Pages de prestation : en mobile l'image s'empilait sous le texte, elle est
   masquee (demande client du 14/09) et reste en vis-a-vis a partir de 768 px.
   Image en loading="lazy" : masquee, elle n'est pas telechargee. */
@media (max-width: 767px) {
  .contenu-image.sans-mobile { display: none; }
}
.prose > h2:first-child { margin-top: 0; }
.prose h2 {
  font-family: var(--font-heading);
  font-weight: 500; font-size: 38px;
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--encre); margin: 55px 0 25px;
}
.prose p {
  font-size: 17px; line-height: 1.8;
  color: var(--encre-doux); margin: 0 0 20px;
  text-align: justify;
  hyphens: auto;
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--encre); font-weight: 500; }

/* ---------------------------------------------------------------------------
   TABLEAU DE TARIFS
   Bandeau d'en-tete sombre, filets sur toutes les separations, lignes alternees.
   Il doit se lire comme un tableau, pas comme une liste flottante.
   --------------------------------------------------------------------------- */
.bloc-tarifs-titre { margin: 0 0 40px; }
.table-wrap {
  overflow-x: auto; margin: 0 0 30px;
  border: 1px solid var(--filet);
  -webkit-overflow-scrolling: touch;
}
table.tarifs {
  border-collapse: separate; border-spacing: 0;
  width: 100%; min-width: 520px;
  font-size: 14px; background: var(--bg-papier);
}
table.tarifs th, table.tarifs td {
  padding: 12px 12px; text-align: center;
  border-left: 1px solid var(--filet);
}
table.tarifs th:first-child, table.tarifs td:first-child { border-left: 0; }

/* En-tete : bandeau sombre sur deux niveaux */
table.tarifs thead th {
  background: var(--nuit); color: var(--bg-creme);
  font-family: var(--font-body); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  vertical-align: middle;
  border-left-color: rgba(217, 205, 182, 0.22);
}
table.tarifs thead tr:first-child th[colspan] { border-bottom: 1px solid rgba(217, 205, 182, 0.22); }

/* Colonne des prestations, figee au defilement horizontal, en-tete compris.
   Le filet de droite marque nettement la limite de la zone fixe. */
table.tarifs thead th[rowspan],
table.tarifs tbody th[scope="row"] {
  position: sticky; left: 0; z-index: 2;
  text-align: left; white-space: nowrap;
  box-shadow: 1px 0 0 var(--filet);
}
table.tarifs thead th[rowspan] { z-index: 3; box-shadow: 1px 0 0 rgba(217, 205, 182, 0.22); }
/* La cellule qui suit la colonne figee ne doit pas ajouter sa propre bordure :
   le bord de la zone fixe est deja trace par le box-shadow ci-dessus, sinon les
   deux traits se cumulent et le filet parait deux fois plus epais. */
table.tarifs thead tr:first-child th[rowspan] + th,
table.tarifs tbody th[scope="row"] + td { border-left: 0; }
table.tarifs tbody th[scope="row"] {
  font-family: var(--font-heading); font-size: 18px; font-weight: 500;
  color: var(--encre); background: inherit;
}
table.tarifs tbody tr { background: var(--bg-papier); }
table.tarifs tbody tr + tr th, table.tarifs tbody tr + tr td { border-top: 1px solid var(--filet); }
table.tarifs tbody td {
  font-variant-numeric: tabular-nums;
  font-size: 16px; color: var(--bois-noyer); font-weight: 500;
  white-space: nowrap;
}

/* Appels de note dans le tableau et numeros en regard des conditions */
.renvoi {
  font-family: var(--font-body); font-size: 0.62em; font-weight: 500;
  vertical-align: super; line-height: 0;
  color: var(--bois-chene); margin-left: 3px;
  text-transform: none; letter-spacing: 0;
}
table.tarifs thead .renvoi { color: var(--laiton); }
.notes li { display: flex; gap: 10px; }
.notes .num {
  flex: none;
  font-family: var(--font-body); font-style: normal;
  font-size: 12px; font-weight: 500; color: var(--bois-chene);
  padding-top: 4px;
}
table.tarifs.simple { min-width: 0; }
table.tarifs.simple tbody td { text-align: right; }
/* Ligne de deplacement : rattachee a la prestation qui la precede, en retrait
   typographique. */
table.tarifs.simple tbody tr.tarif-km th[scope="row"] {
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  letter-spacing: 0.02em; color: var(--encre-doux);
}
table.tarifs.simple tbody tr.tarif-km td {
  font-size: 15px; font-weight: 400; color: var(--encre-doux);
}
/* Fond legerement plus soutenu sur la ligne de deplacement : les lignes se
   distinguent sans filet supplementaire (14/09). */
table.tarifs.simple tbody tr.tarif-km { background: var(--bg-creme); }
@media (min-width: 768px) {
  /* Filet marque entre deux prestations, comme les groupes de la carte mobile. */
  table.tarifs.simple tbody tr.tarif-km + tr th,
  table.tarifs.simple tbody tr.tarif-km + tr td { border-top-color: var(--bois-chene); }
}

/* ---------------------------------------------------------------------------
   PAGINATION DES PRESTATIONS
   Sous les tarifs : prestation precedente a gauche, suivante a droite.
   Circulaire entre les trois pages. Deux cadres de meme poids.
   --------------------------------------------------------------------------- */
.pagination-prestations {
  display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
  margin-top: 50px;
}
.pagination-lien {
  display: flex; align-items: center; gap: 10px;
  padding: 15px;
  background: var(--bg-creme);
  border: 1px solid var(--filet);
  text-decoration: none; color: var(--encre);
  transition: border-color var(--transition-fast);
}
.pagination-suiv { justify-content: flex-end; text-align: right; }
.pagination-textes { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pagination-titre {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 19px; line-height: 1.15; color: var(--encre);
  transition: color var(--transition-fast);
}
.pagination-lien .ico { width: 18px; height: 18px; color: var(--bois-chene); transition: transform var(--transition-fast); }
.pagination-prec .ico svg { transform: scaleX(-1); }
.pagination-lien:hover { border-color: var(--bois-chene); }
.pagination-lien:hover .pagination-titre { color: var(--bois-noyer); }
.pagination-prec:hover .ico { transform: translateX(-4px); }
.pagination-suiv:hover .ico { transform: translateX(4px); }
@media (min-width: 768px) {
  .pagination-prestations { gap: 25px; margin-top: 70px; }
  .pagination-lien { padding: 25px 30px; gap: 20px; }
  .pagination-titre { font-size: 28px; }
  .pagination-lien .ico { width: 22px; height: 22px; }
}

.notes { margin: 0; padding: 0; list-style: none; }
.notes li {
  font-family: var(--font-heading); font-style: italic;
  font-size: 16px; line-height: 1.55; color: var(--encre-doux);
  margin: 0 0 12px; text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   PAGE A PROPOS
   Une seule page pour le parcours et l'atelier, appelee par les deux liens de
   l'ecran 3 via les ancres #parcours et #atelier. Aucun fond colore alterne :
   les trois ensembles sont separes par des filets alignes sur la gouttiere.
   --------------------------------------------------------------------------- */
/* Fond papier, en alternance avec le creme du body : c'est ce qui fait de
   chaque separation une rupture de couleur, donc un chapitre. */
.fond-papier { background-color: var(--bg-papier); }

/* Le header est fixe : sans cette marge, une arrivee sur #parcours ou #atelier
   depuis l'accueil placerait le titre de section sous le bandeau. */
.section[id] { scroll-margin-top: calc(var(--header-height) + 20px); }

/* Bloc en vis-a-vis inverse. En mobile l'ordre de lecture reste le meme dans
   les deux blocs, titre puis texte puis image ; l'alternance n'apparait qu'en
   desktop, ou elle evite deux rangees identiques l'une sous l'autre. */
.contenu-grille.inverse { grid-template-columns: 1fr; }

/* ---------------------------------------------------------------------------
   GALERIE
   Grille de carres pleins, filet 1px, aucun arrondi ni ombre. Au survol, le
   seul effet autorise par le brief : zoom 1.03 de l'image. Chaque vignette est
   un bouton et non un lien : elle n'amene nulle part, elle agrandit sur place.
   --------------------------------------------------------------------------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.galerie-item {
  display: block; padding: 0;
  background: none; border: 1px solid var(--filet);
  overflow: hidden; cursor: pointer;
  transition: border-color var(--transition-base);
}
.galerie-item img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform var(--transition-base);
}
.galerie-item:hover { border-color: var(--bois-chene); }
.galerie-item:hover img,
.galerie-item:focus-visible img { transform: scale(1.03); }
/* ---------------------------------------------------------------------------
   AGRANDISSEMENT AU CLIC
   Ecrit a la main, une cinquantaine de lignes, aucune librairie. Le fond
   reprend le nuit du pied de page. Fermeture par la croix, par Echap ou par un
   clic hors de l'image ; fleches gauche et droite pour circuler.
   --------------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 80;
  /* minmax(0, 1fr) et non 1fr : sans cela la piste se cale sur la hauteur
     naturelle de l'image, qui deborde alors de la fenetre. */
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  padding: 60px 15px 20px;
  background: rgba(20, 16, 12, 0.95);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.lightbox[data-ouvert="true"] { opacity: 1; visibility: visible; }
.lightbox-scene { display: grid; place-items: center; min-height: 0; }
/* Le plafond en vh double la contrainte de la grille : sur les navigateurs ou
   la barre d'adresse mobile fait varier la hauteur, l'image reste entiere. */
.lightbox-img {
  max-width: 100%; max-height: calc(100vh - 260px);
  width: auto; height: auto;
  object-fit: contain;
  border: 1px solid rgba(217, 205, 182, 0.25);
}
@supports (height: 100dvh) {
  .lightbox-img { max-height: calc(100dvh - 260px); }
}
/* La legende occupe sa propre ligne, sous l'image. Partagee avec le compteur
   et les fleches, elle se retrouvait comprimee en trois lignes sur telephone. */
.lightbox-pied {
  padding: 15px 5px 0;
  border-top: 1px solid rgba(217, 205, 182, 0.2);
  margin-top: 15px;
}
.lightbox-legende {
  margin: 0 0 15px;
  font-family: var(--font-heading); font-style: italic;
  font-size: 17px; line-height: 1.4; color: var(--filet);
  text-wrap: pretty;
}
.lightbox-legende:empty { display: none; }
.lightbox-barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.lightbox-compteur {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #8A7D65; white-space: nowrap;
}
.lightbox-nav { display: flex; gap: 5px; }
.lightbox button {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(217, 205, 182, 0.25);
  border-radius: var(--radius-sm);
  color: var(--bg-creme); cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.lightbox button:hover { border-color: var(--laiton); color: #fff; }
.lightbox button[disabled] { opacity: 0.3; cursor: default; }
.lightbox button[disabled]:hover { border-color: rgba(217, 205, 182, 0.25); color: var(--bg-creme); }
.lightbox-fermer { position: absolute; top: 10px; right: 15px; }
.lightbox .ico { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------------
   APPEL DE FIN DE PAGE
   Le seul bouton plein du site. Il renvoie vers la page contact, jamais vers
   le telephone : le client ne veut pas de son numero en avant.
   Texte a gauche, bouton a droite : un bloc centre aurait fait bandeau promo.
   --------------------------------------------------------------------------- */
.appel-bloc { display: grid; gap: 25px; }
.appel-titre {
  font-family: var(--font-heading);
  font-weight: 500; font-size: 34px;
  line-height: 1.1; letter-spacing: -0.01em;
  color: var(--encre); margin: 10px 0 10px;
}
.appel-texte {
  font-size: 16px; line-height: 1.7;
  color: var(--encre-doux); margin: 0;
  max-width: 46ch;
}
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 15px 25px;
  background: var(--bois-noyer);
  border: 1px solid var(--bois-noyer);
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  color: var(--bg-creme); text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-primary:hover { background: var(--bois-chene); border-color: var(--bois-chene); }

@media (min-width: 768px) {
  .contenu-grille.inverse { grid-template-columns: 1fr 1.35fr; }
  .contenu-grille.inverse .contenu-image { order: -1; }
  .galerie { grid-template-columns: repeat(3, 1fr); gap: 15px; }
  .lightbox { padding: 70px 30px 25px; }
  .appel-bloc { grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
  .appel-titre { font-size: 40px; }
}

@media (min-width: 1024px) {
  .galerie { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------------
   PAGE CONTACT
   Quatre moyens de joindre, en vignettes de meme poids, puis la zone de travail
   en bandeau. Les listes verticales en demi-colonne se lisaient mal.
   --------------------------------------------------------------------------- */
.moyens { display: grid; grid-template-columns: 1fr; gap: 15px; }
.moyens-titre { margin: 50px 0 25px; }
.moyen {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 5px; padding: 25px 25px 30px;
  background: var(--bg-papier);
  border: 1px solid var(--filet);
  text-decoration: none; color: inherit;
  transition: border-color var(--transition-base);
}
.moyen:hover { border-color: var(--bois-chene); }
.moyen .ico { color: var(--bois-chene); margin-bottom: 10px; }
.moyen-libelle {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--encre-doux);
}
.moyen-valeur {
  font-family: var(--font-heading); font-weight: 500; font-size: 28px;
  line-height: 1.1; letter-spacing: -0.01em; color: var(--encre);
  transition: color var(--transition-fast);
}
.moyen:hover .moyen-valeur { color: var(--bois-noyer); }
.moyen-detail {
  font-family: var(--font-heading); font-style: italic;
  font-size: 16px; line-height: 1.4; color: var(--encre-doux);
  margin-top: 5px; overflow-wrap: anywhere;
}
/* Invitation a cliquer (demande client du 14/09 : on ne devinait pas que la
   vignette etait un lien). Petit bouton au trait, pousse en bas de vignette
   pour que les quatre s'alignent. */
.moyen > :nth-last-child(2) { margin-bottom: 20px; }
.moyen-action {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding: 9px 15px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--bois-noyer);
  border: 1px solid var(--bois-noyer); border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.moyen-action .ico { width: 15px; height: 15px; margin: 0; color: currentColor; transition: transform var(--transition-fast); }
.moyen:hover .moyen-action { background: var(--bois-noyer); color: var(--bg-creme); }
.moyen:hover .moyen-action .ico { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   ZONE DE TRAVAIL
   Bande sombre : la palette n'a que deux clairs tres proches, empiler creme sur
   papier ne contraste pas. Ce bandeau repond a l'en-tete des tarifs et au pied
   de page. Creme sur nuit = 16:1, filet sur nuit = 12:1.
   --------------------------------------------------------------------------- */
/* .section.zones-bande et non .zones-bande seule : la regle d'alternance
   .section:nth-of-type(odd) pese 0,2,0 et l'emporterait sur une simple classe,
   quel que soit l'ordre dans la feuille. Ici la bande est la 3e section de
   contact.html, donc impaire : sans ce poids egal elle recevrait le halo clair
   des fonds creme au lieu de sa lampe. */
.section.zones-bande { background-color: var(--nuit); background-image: var(--halo-nuit); }
.zones-bande .section-title { color: var(--bg-creme); }
.zones-rangee {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid rgba(217, 205, 182, 0.25);
}
.zones-rangee li {
  padding: 20px 0;
  border-bottom: 1px solid rgba(217, 205, 182, 0.25);
}
.zone-nom {
  display: block;
  font-family: var(--font-heading); font-weight: 500; font-size: 26px;
  line-height: 1.1; color: var(--bg-creme);
}
.zone-detail {
  display: block; margin-top: 5px;
  font-family: var(--font-body); font-size: 13px;
  letter-spacing: 0.04em; color: var(--filet);
}
.zones-note {
  margin: 30px 0 0;
  font-family: var(--font-heading); font-style: italic;
  font-size: 17px; line-height: 1.55; color: var(--filet);
}

@media (min-width: 768px) {
  .page-hero { min-height: 420px; padding-bottom: 50px; }
  .page-titre { font-size: 68px; }
  .prose p { font-size: 18px; }
  .prose h2 { font-size: 54px; }
  /* L'image epouse la hauteur de la colonne de texte : un ratio fixe laissait
     un vide quand le texte etait plus court que l'image. */
  .contenu-grille { grid-template-columns: 1.35fr 1fr; gap: 50px; align-items: stretch; }
  .contenu-image { height: 100%; aspect-ratio: auto; min-height: 320px; }
  .moyens { grid-template-columns: repeat(2, 1fr); gap: 25px; }
  .zones-rangee { grid-template-columns: repeat(2, 1fr); }
  .zones-rangee li { padding: 25px 30px; }
  .zones-rangee li:nth-child(odd)  { padding-left: 0; }
  .zones-rangee li:nth-child(even) { padding-right: 0; border-left: 1px solid rgba(217, 205, 182, 0.25); }
  table.tarifs { font-size: 15px; }
  table.tarifs th, table.tarifs td { padding: 14px 15px; }
  table.tarifs thead th { font-size: 11px; }
  table.tarifs tbody th[scope="row"] { font-size: 20px; }
  table.tarifs tbody td { font-size: 17px; }
}

@media (min-width: 1024px) {
  .page-hero { min-height: 480px; padding-bottom: 60px; }
  /* Les regles tablette ci-dessus ont la meme specificite : il faut les
     neutraliser explicitement, sans quoi la 3e colonne perd son padding. */
  .zones-rangee {
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid rgba(217, 205, 182, 0.25);
  }
  .zones-rangee li {
    padding: 30px; border-bottom: 0;
    border-left: 1px solid rgba(217, 205, 182, 0.25);
  }
  .zones-rangee li:nth-child(odd)  { padding-left: 30px; }
  .zones-rangee li:nth-child(even) { padding-right: 30px; }
  .zones-rangee li:first-child { border-left: 0; padding-left: 0; }
  .zones-rangee li:last-child  { padding-right: 0; }
  .page-titre { font-size: 84px; }
}

/* ============================================================================
   GOUTTIERE
   Le contenu fait 1180 px au maximum. La gouttiere n'entre en jeu que lorsque
   la fenetre est trop etroite pour la loger, pas avant.
   ============================================================================ */
@media (max-width: 1240px) {
  .container { padding-inline: var(--gouttiere); }
}

/* ---------------------------------------------------------------------------
   TARIFS EN MODE CARTE, SOUS 768 px
   Quatre colonnes chiffrees ne tiennent pas sur un telephone. Plutot que de
   faire defiler, chaque ligne devient une carte : bandeau sombre portant la
   prestation, puis une paire libelle / prix par cas de figure. Meme HTML,
   le libelle de colonne est repris de l'attribut data-col.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .table-wrap { overflow-x: visible; border: 0; margin-bottom: 25px; }
  table.tarifs { display: block; min-width: 0; background: transparent; font-size: inherit; }
  table.tarifs thead { display: none; }
  table.tarifs tbody { display: grid; gap: 20px; }

  table.tarifs tbody tr {
    display: block;
    background: var(--bg-papier);
    border: 1px solid var(--filet);
  }

  table.tarifs tbody th[scope="row"] {
    display: block; position: static; box-shadow: none;
    background: var(--nuit); color: var(--bg-creme);
    padding: 15px 20px; white-space: normal;
    font-size: 22px; line-height: 1.15;
    border: 0;
  }
  table.tarifs tbody th[scope="row"] .renvoi { color: var(--laiton); }

  table.tarifs tbody td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
    padding: 12px 20px;
    border: 0; border-top: 1px solid var(--filet);
    text-align: right; font-size: 18px;
  }
  table.tarifs tbody tr + tr th,
  table.tarifs tbody tr + tr td { border-top: 1px solid var(--filet); }
  table.tarifs tbody tr + tr th[scope="row"] { border-top: 0; }

  table.tarifs tbody td::before {
    content: attr(data-col);
    font-family: var(--font-body); font-size: 12px; font-weight: 400;
    letter-spacing: 0.04em; color: var(--encre-doux);
    text-align: left; text-transform: none;
  }
  /* Separation nette entre les deux groupes de distance. */
  table.tarifs tbody td:nth-of-type(3) { border-top: 1px solid var(--bois-chene); }

  /* Tableau a une seule valeur : pas de libelle a repeter. */
  table.tarifs.simple tbody td { justify-content: flex-end; }
  table.tarifs.simple tbody td::before { content: none; }

  /* Tarifs simplifies : la ligne de deplacement se colle a la carte de sa
     prestation au lieu d'ouvrir sa propre carte a bandeau sombre. */
  table.tarifs.simple tbody { gap: 0; }
  table.tarifs.simple tbody tr.tarif + tr.tarif,
  table.tarifs.simple tbody tr.tarif-km + tr.tarif { margin-top: 20px; }
  table.tarifs.simple tbody tr.tarif-km {
    display: flex; align-items: baseline; justify-content: space-between; gap: 15px;
    padding: 12px 20px; border-top: 0;
  }
  table.tarifs.simple tbody tr.tarif-km th[scope="row"],
  table.tarifs.simple tbody tr.tarif-km td {
    display: block; padding: 0; border: 0;
    background: transparent; white-space: normal;
  }
  table.tarifs.simple tbody tr.tarif-km th[scope="row"] { color: var(--encre-doux); font-size: 13px; }
  table.tarifs.simple tbody tr.tarif-km td { text-align: right; }
}


/* ============================================================================
   ADAPTATIONS WORDPRESS
   Tout ce qui suit n'existe pas dans la maquette : ce sont les ajustements
   qu'impose le passage en theme (contenus saisis dans l'admin, barre d'admin).
   ============================================================================ */

/* Texte riche saisi dans l'editeur (ND MetaBox, champ wysiwyg) : memes
   reglages que les paragraphes .bloc-texte de la maquette. */
.texte-riche > * { margin: 0 0 20px; }
.texte-riche p,
.texte-riche li { font-size: 16px; line-height: 1.7; color: var(--encre-doux); }
.texte-riche ul,
.texte-riche ol { padding-left: 20px; }
.texte-riche strong { color: var(--encre); font-weight: 500; }
.texte-riche a { color: var(--bois-noyer); }

/* Texte long saisi dans l'editeur (pages legales) : intertitres de second
   niveau, listes et liens, absents des pages de la maquette. Memes corps et
   couleurs que .prose p. */
.prose h3 {
  font-family: var(--font-heading);
  font-weight: 500; font-size: 26px;
  line-height: 1.15; color: var(--encre);
  margin: 35px 0 15px;
}
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 20px; }
.prose li { font-size: 17px; line-height: 1.8; color: var(--encre-doux); margin: 0 0 5px; }
.prose a { color: var(--bois-noyer); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--bois-chene); }
@media (min-width: 768px) {
  .prose h3 { font-size: 30px; }
  .prose li { font-size: 18px; }
}

/* Page 404 : liens du menu principal sous le bloc d'appel, au style des
   liens soulignes de l'accueil (.lien-souligne). */
.liens-404 {
  display: flex; flex-wrap: wrap; gap: 15px 30px;
  margin-top: 50px; padding-top: 30px;
  border-top: 1px solid var(--filet);
}
.liens-404 a {
  font-size: 14px; font-weight: 500;
  color: var(--bois-noyer); text-decoration: none;
  border-bottom: 1px solid var(--bois-noyer);
  padding-bottom: 5px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.liens-404 a:hover { color: var(--bois-chene); border-bottom-color: var(--bois-chene); }

/* Barre d'administration WordPress (visible seulement connecte) : l'en-tete
   fixe passe dessous au lieu d'etre masque par elle. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}