@charset "UTF-8";
/* =========================================================================
   LA MAIN CHAUDE — feuille de styles du site de Stéphanie
   Écrite à la main. Aucune dépendance, aucun framework.
   ========================================================================= */

/* ---------------------------------------------------------------- POLICES */
/* Auto-hébergées : aucune requête vers un serveur tiers (Google Fonts),
   donc aucun dépôt de cookie ni transfert d'adresse IP hors du site. */
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/spectral-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/spectral-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/spectral-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/spectral-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/source-sans-3-400-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/source-sans-3-400-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400 700;font-display:swap;
  src:url("../fonts/source-sans-3-400-700-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400 700;font-display:swap;
  src:url("../fonts/source-sans-3-400-700-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ----------------------------------------------------------------- JETONS */
:root{
  /* Palette. Chaque couleur est prélevée dans les photographies du site. */
  --lin:#F7F1E7;          /* papier chaud, fond principal. Jamais #fff : éblouit en plein soleil */
  --argile:#EBDFCD;       /* mur ocre, fond des sections alternées */
  --encre:#241C15;        /* brun-noir, titres et texte courant. 14,9:1 sur lin */
  --encre-douce:#5A4B3E;  /* texte secondaire UNIQUEMENT, jamais sous 15px. 7,4:1 sur lin */
  --ocre:#9A4A1C;         /* LA couleur d'action, unique. 5,5:1 avec lin dans les deux sens */
  --ocre-fonce:#7E3B14;   /* survol et appui seulement, jamais au repos */
  --nuit:#1C130D;         /* l'unique bande sombre du site */
  --or:#E9A13B;           /* INTERDIT sur fond clair (1,9:1). Fond sombre + filets 1px seulement */
  --ambre:#F6C86A;        /* accents sur fond sombre. 11,7:1 sur nuit */
  --prune:#5E2E3F;        /* prélevé sur le coussin de méditation. Dosage homéopathique */
  --trait:rgba(36,28,21,.14);

  /* Anneau de focus bicolore : visible sur clair, sur sombre et par-dessus une photo. */
  --focus-a:#241C15;
  --focus-b:#F7F1E7;

  /* Échelle typographique fluide, calibrée 360px vers 1440px. */
  --fs-h1:clamp(2.75rem,1.833rem + 4.074vw,5.5rem);
  --fs-h2:clamp(1.875rem,1.5rem + 1.667vw,3rem);
  --fs-h3:clamp(1.3125rem,1.1875rem + .556vw,1.6875rem);
  --fs-metier:clamp(1.25rem,1.104rem + .648vw,1.625rem);
  --fs-chapo:clamp(1.3125rem,1.229rem + .37vw,1.5625rem);
  --fs-corps:clamp(1.1875rem,1.146rem + .185vw,1.3125rem);
  --fs-liste:clamp(1.1875rem,1.167rem + .093vw,1.25rem);
  --fs-tel:clamp(2rem,1.5rem + 2.222vw,3.5rem);
  --fs-petit:.9375rem;    /* 15px, plancher absolu. Aucun texte en dessous, nulle part */

  --lh-corps:1.7;

  --marge:clamp(1.25rem,.667rem + 2.593vw,3rem);
  --air:clamp(3.5rem,2.167rem + 5.926vw,7.5rem);
  --mesure:34rem;         /* environ 62 signes. Le texte ne dépasse jamais cette largeur */

  --titre:"Spectral","Iowan Old Style",Georgia,"Times New Roman",serif;
  --texte:"Source Sans 3","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;

  --barre-appel:64px;     /* hauteur de la barre d'appel fixe, sous 900px */
}

/* ------------------------------------------------------------------ SOCLE */
*,*::before,*::after{box-sizing:border-box}

html{
  font-size:100%;               /* on respecte la taille de police choisie par la visiteuse */
  -webkit-text-size-adjust:100%;
  scroll-padding-top:88px;
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  overflow-x:clip;              /* jamais overflow:hidden, qui masquerait la cause */
  font-family:var(--texte);
  font-size:var(--fs-corps);
  line-height:var(--lh-corps);
  font-weight:400;
  color:var(--encre);
  background:var(--lin);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--titre);text-wrap:balance;margin:0}
h1{font-weight:500;font-size:var(--fs-h1);line-height:1.03;letter-spacing:-.018em}
h2{font-weight:600;font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.012em;
  max-width:20ch;margin-block-end:1.5rem}
h3{font-weight:600;font-size:var(--fs-h3);line-height:1.28}

p{max-width:var(--mesure);margin:0 0 1.45em;text-wrap:pretty;hyphens:none;text-align:left}
p:last-child{margin-bottom:0}
img{display:block;max-width:100%;height:auto}
ul{margin:0;padding:0;list-style:none}
figure{margin:0}   /* la marge par défaut de 40px casserait les images bord à bord */

a{color:var(--ocre);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ocre-fonce)}

/* Anneau de focus universel. Ne jamais écrire outline:none sans remplacement. */
:focus-visible{
  outline:3px solid var(--focus-a);
  outline-offset:3px;
  box-shadow:0 0 0 6px var(--focus-b);
  border-radius:2px;
}
.sombre{--focus-a:#F7F1E7;--focus-b:#1C130D}

::selection{background:var(--ocre);color:var(--lin)}

/* ------------------------------------------------------------ UTILITAIRES */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.evitement{
  position:absolute;left:var(--marge);top:-100px;z-index:200;
  background:var(--encre);color:var(--lin);padding:.85rem 1.25rem;
  border-radius:3px;font-weight:600;text-decoration:none;
  transition:top .18s ease;
}
.evitement:focus{top:.75rem;color:var(--lin)}

.surtitre{
  display:block;font-family:var(--texte);font-weight:600;font-size:var(--fs-petit);
  letter-spacing:.12em;text-transform:uppercase;color:var(--encre-douce);
  margin:0 0 .9rem;
}
.chapo{font-size:var(--fs-chapo);line-height:1.5;max-width:31rem}
.salut{margin-bottom:.6em}
.legende{
  font-style:italic;font-size:var(--fs-petit);line-height:1.5;color:var(--encre-douce);
  margin:0;padding-top:.75rem;max-width:32rem;
}
.legende::before{
  content:"";display:block;width:28px;height:1px;background:var(--ocre);margin-bottom:.6rem;
}
.souligne{font-weight:700;color:var(--ocre)}
.titre-centre{max-width:none;text-align:center;margin-inline:auto}
.centre-bloc{max-width:none;text-align:center;margin-top:2.5rem}

/* -------------------------------------------------------------- LA GRILLE */
/* Grille à lignes nommées : la seule technique fiable pour faire déborder une
   image jusqu'au bord de la fenêtre sans provoquer de défilement horizontal.
   Ne JAMAIS remplacer par margin-inline-end:calc(50% - 50vw) : dans une colonne
   de grille, les pourcentages se résolvent sur la piste, pas sur la page. */
.bande,.entete__grille,.pied__grille{
  display:grid;
  grid-template-columns:
    [pleine-debut] minmax(var(--marge),1fr)
    [contenu-debut] minmax(0,41rem)
    [texte-fin] minmax(0,29rem)
    [contenu-fin] minmax(var(--marge),1fr)
    [pleine-fin];
  column-gap:clamp(1.5rem,4vw,4rem);
}
/* L'en-tête et le pied de page partagent exactement la grille des sections :
   sans cela, leur contenu se décale de 13px par rapport au texte de la page. */
.entete__grille > *,.pied__grille > *{grid-column:contenu-debut/contenu-fin}
.entete__grille > .pleine,.pied__grille > .pleine{grid-column:pleine-debut/pleine-fin}

.bande{
  row-gap:clamp(2.5rem,5vw,4rem);
  align-items:start;    /* obligatoire : sans lui une figure en aspect-ratio fait exploser la piste */
  padding-block:var(--air);
  position:relative;
}
.bande > *{grid-column:contenu-debut/contenu-fin;position:relative;z-index:1}
.col-texte{grid-column:contenu-debut/texte-fin}
.col-image{grid-column:texte-fin/contenu-fin}
.col-large{grid-column:contenu-debut/contenu-fin}
.pleine{grid-column:pleine-debut/pleine-fin}

/* Rangée inversée : l'image passe à gauche et mord le bord gauche de la fenêtre,
   le texte passe à droite. Les deux pistes centrales sont simplement permutées,
   sinon la colonne d'image se retrouverait réduite à la gouttière. */
.bande--inverse{
  grid-template-columns:
    [pleine-debut] minmax(var(--marge),1fr)
    [contenu-debut] minmax(0,29rem)
    [texte-fin] minmax(0,41rem)
    [contenu-fin] minmax(var(--marge),1fr)
    [pleine-fin];
}
.bande--inverse .col-image-g{grid-column:contenu-debut/texte-fin;grid-row:1}
.bande--inverse .col-texte{grid-column:texte-fin/contenu-fin;grid-row:1}

.bande--argile{background:var(--argile)}
.bande--serree{padding-block:clamp(2.5rem,5vw,4rem)}

/* Le grain : une tuile de 160px de bruit fin, raccordable, posée sur les fonds
   clairs. Purement décoratif : si le fichier manque, le site reste juste. */
.bande::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("../img/opt/grain.webp");
  background-size:160px 160px;
  opacity:.042;mix-blend-mode:multiply;
}

@media (max-width:56.25em){
  .bande{
    grid-template-columns:
      [pleine-debut] var(--marge)
      [contenu-debut] minmax(0,1fr)
      [texte-fin] 0
      [contenu-fin] var(--marge)
      [pleine-fin];
  }
  .bande > *,.col-texte,.col-image,
  .bande--inverse .col-texte{grid-column:contenu-debut/contenu-fin}
  .col-image-g,.bande--inverse .col-image-g{grid-column:contenu-debut/contenu-fin;grid-row:auto}
  .pleine{grid-column:pleine-debut/pleine-fin}
}

/* ------------------------------------------------------------- LA PLANCHE */
/* Chaque image est présentée comme une planche encadrée : un carton (le socle)
   légèrement plus grand que l'image, et la légende posée sur ce même carton,
   sous l'image. C'est le geste d'un tirage monté sous passe-partout.
   Le contenant est rigoureusement identique pour les sept images : c'est ce qui
   fait tenir ensemble une banque d'images très hétérogène.
   La version précédente posait une « plaque » en arche décalée derrière la photo :
   elle ressortait comme une tache de couleur mal placée et se faisait couper par
   le bord de la fenêtre. Abandonnée. */
.planche{margin:0}
.socle{
  background:var(--carton,var(--argile));
  border:1px solid rgba(154,74,28,.22);
  border-radius:3px;
  padding:clamp(10px,1.4vw,16px);
}
/* Le carton doit toujours se détacher du fond de la section, jamais s'y fondre. */
.bande--argile .socle{--carton:var(--lin)}

.cadre{
  position:relative;overflow:hidden;isolation:isolate;border-radius:2px;
  background:var(--argile);
}
.cadre img{width:100%;height:100%;object-fit:cover}
/* Le voile ocre est le seul liant : il donne une température commune à des
   images d'origines très différentes sans avoir à les repeindre. */
.cadre::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:multiply;
  background:linear-gradient(168deg,#C9762F,#8A4418 55%,#3A2114);
  opacity:var(--voile,.14);
}

/* -------------------------------------------------------------- LES FILETS */
/* Signature n°3 : le séparateur n'est ni un <hr> gris ni un simple changement
   de fond. Même motif des deux côtés, lisible sur clair comme sur sombre. */
.filet{
  border:0;height:1px;margin:0;grid-column:pleine-debut/pleine-fin;
  background:linear-gradient(90deg,transparent,#9A4A1C 18%,#C9762F 50%,#9A4A1C 82%,transparent);
}

/* ---------------------------------------------------------------- BOUTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  min-height:60px;padding:.85rem 1.6rem;
  font-family:var(--texte);font-weight:600;font-size:1.125rem;line-height:1.2;
  text-decoration:none;border-radius:3px;border:2px solid transparent;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .3s ease;
  cursor:pointer;
}
.btn--plein{background:var(--ocre);color:var(--lin);border-color:var(--ocre)}
.btn--plein:hover{background:var(--ocre-fonce);border-color:var(--ocre-fonce);color:var(--lin);
  box-shadow:0 0 44px -6px rgba(246,200,106,.4)}
.btn--contour{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn--contour:hover{background:var(--encre);color:var(--lin)}
.btn svg{flex:none}

.actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.actions .btn{flex:1 1 auto;min-width:min(100%,17rem)}
.action-seule{margin-top:2.5rem}

/* Un numéro à composer est de l'interface, jamais de la typographie de titre :
   linéale, chiffres tabulaires, groupes de deux chiffres, insécable. */
.num{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"tnum" 1;
  letter-spacing:.01em;word-spacing:.12em;white-space:nowrap}

/* Un numéro écrit au fil du texte reste un numéro à composer : on lui donne une
   vraie surface tactile (≈48px) sans décaler l'interligne du paragraphe. */
p a.num{display:inline-block;padding-block:.5rem;margin-block:-.4rem}

/* ---------------------------------------------------------------- EN-TÊTE */
.entete{
  position:sticky;top:0;z-index:50;
  background:var(--lin);         /* OPAQUE dès le premier pixel : jamais de texte sur photo */
  border-bottom:1px solid var(--trait);
  transition:box-shadow .2s ease;
}
.entete[data-defile="oui"]{box-shadow:0 1px 0 rgba(36,28,21,.06),0 10px 24px -22px rgba(36,28,21,.5)}
.entete__inner{
  padding-block:.5rem;
  min-height:72px;display:flex;align-items:center;gap:1.5rem;
}
.marque{display:flex;flex-direction:column;justify-content:center;min-height:48px;
  text-decoration:none;color:var(--encre);line-height:1.15}
.marque:hover{color:var(--encre)}
.marque b{font-family:var(--titre);font-weight:600;font-size:1.25rem}
.marque span{font-size:var(--fs-petit);color:var(--encre-douce)}

.nav{margin-left:auto;display:flex;align-items:center;gap:1.75rem}
.nav__liste{display:flex;align-items:center;gap:1.5rem}
.nav__liste a{
  position:relative;color:var(--encre);text-decoration:none;white-space:nowrap;
  font-size:1rem;font-weight:500;padding:.4rem 0;display:inline-block;
}
.nav__liste a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ocre);
  transform:scaleX(0);transform-origin:left;transition:transform .24s ease;
}
.nav__liste a:hover::after,.nav__liste a[aria-current="true"]::after{transform:scaleX(1)}
.nav__liste a[aria-current="true"]{color:var(--ocre)}
.nav .btn{min-height:48px;padding:.6rem 1.15rem;font-size:1.0625rem}

.menu-ouvrir{
  margin-left:auto;display:none;align-items:center;gap:.55rem;
  min-height:48px;padding:.5rem .9rem;
  background:transparent;border:2px solid var(--encre);border-radius:3px;
  font-family:var(--texte);font-weight:600;font-size:1rem;color:var(--encre);cursor:pointer;
}

.menu{border:0;padding:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;
  background:var(--lin);color:var(--encre)}
.menu::backdrop{background:rgba(28,19,13,.55)}
.menu__inner{padding:var(--marge);display:flex;flex-direction:column;min-height:100%}
.menu__haut{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.menu__haut b{font-family:var(--titre);font-weight:600;font-size:1.25rem}
.menu__fermer{
  min-height:48px;padding:.5rem .9rem;background:transparent;
  border:2px solid var(--encre);border-radius:3px;
  font-family:var(--texte);font-weight:600;font-size:1rem;color:var(--encre);cursor:pointer;
}
.menu__liste a{
  display:flex;align-items:center;min-height:60px;
  font-size:1.25rem;color:var(--encre);text-decoration:none;
  border-bottom:1px solid var(--trait);
}
.menu__liste a:hover{color:var(--ocre)}
.menu .btn{margin-top:1.75rem}

/* La barre de navigation complète a besoin d'environ 1050px : en dessous, elle
   débordait de la fenêtre depuis qu'elle est insécable. Son point de rupture est
   donc distinct de celui de la mise en page (900px) : entre les deux, on garde
   le menu au bouton. */
@media (max-width:68.75em){
  .nav{display:none}
  .menu-ouvrir{display:inline-flex}
}

/* ----------------------------------------------------- BARRE D'APPEL FIXE */
/* L'élément le plus important du site sur mobile : toujours sous le pouce,
   avec un VERBE, jamais un numéro nu. Se retire quand la section Contact est
   à l'écran, pour ne pas recouvrir son propre objectif. */
.appel-fixe{
  position:fixed;inset:auto 0 0 0;z-index:60;
  display:none;align-items:center;justify-content:center;gap:.6rem;
  min-height:var(--barre-appel);
  padding:0 1rem env(safe-area-inset-bottom);
  background:var(--ocre);color:var(--lin);
  font-weight:700;font-size:1.125rem;text-decoration:none;
  box-shadow:0 -8px 24px -18px rgba(28,19,13,.9);
  transition:transform .28s ease;
}
.appel-fixe:hover{color:var(--lin);background:var(--ocre-fonce)}
.appel-fixe[data-cache="oui"]{transform:translateY(105%)}
@media (max-width:56.25em){
  .appel-fixe{display:flex}
  body{padding-bottom:calc(var(--barre-appel) + env(safe-area-inset-bottom))}
}

/* ---------------------------------------------------------------- ACCUEIL */
.accueil{padding-block:clamp(2.5rem,6vw,5.5rem) var(--air)}
.accueil__texte{align-self:center}
.accueil h1{margin-bottom:.5rem}
.metier{
  font-family:var(--texte);font-weight:600;font-size:var(--fs-metier);
  line-height:1.35;color:var(--encre);margin:0 0 1.5rem;max-width:22ch;
}

/* Vraie photographie, prise en extérieur. Elle est exportée déjà recadrée en 5/6
   autour du visage : le cadre n'a plus rien à rogner, l'image s'y pose exactement.
   On ne sépiaise jamais un visage, la peau vire au cadavre : voile à 0.
   Seule une vignette discrète fait reculer l'arrière-plan de marché. */
.portrait{--voile:0;max-width:560px}
.portrait .cadre{aspect-ratio:5/6}
.portrait img{filter:saturate(.95) contrast(1.03)}
.portrait .cadre::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(76% 60% at 52% 36%,transparent 44%,rgba(36,28,21,.3) 100%);
}
@media (max-width:56.25em){
  .portrait{margin-inline:auto}
  .accueil__texte{order:2}
  .accueil__image{order:1}
  .accueil{display:flex;flex-direction:column;gap:3.5rem;padding-inline:var(--marge)}
}

/* ----------------------------------------------------------- LES PRATIQUES */
.pratiques{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.25rem}
.pratique{
  display:block;padding:1.6rem 1.5rem;text-decoration:none;color:var(--encre);
  background:transparent;border-radius:3px;transition:background-color .2s ease;
}
.pratique:hover{background:var(--lin);color:var(--encre)}
.pratique::before{
  content:"";display:block;width:10px;height:10px;background:var(--ocre);
  transform:rotate(45deg);margin-bottom:1.1rem;
}
.pratique h3{margin-bottom:.45rem}
.pratique p{font-size:1.0625rem;color:var(--encre-douce);margin:0}
.secteur{margin:2.5rem 0 0;max-width:none;text-align:center;font-size:1.0625rem;color:var(--encre)}

/* ------------------------------------------------------------- BIENFAITS */
/* Une seule colonne, y compris en grand écran : sur une page web l'œil
   descend, il ne remonte pas. columns:2 rendrait l'ordre de lecture illisible. */
.bienfaits{max-width:40rem;margin-inline:auto}
.bienfaits li{
  display:grid;grid-template-columns:10px 1fr;gap:16px;align-items:start;
  padding-block:.9rem;border-bottom:1px solid var(--trait);
  font-size:var(--fs-liste);font-weight:500;line-height:1.5;
}
.bienfaits li::before{
  content:"";width:10px;height:10px;background:var(--prune);
  transform:rotate(45deg);margin-top:.5em;
}
.cloture{max-width:40rem;margin:2.5rem auto 0;text-align:center}

/* -------------------------------------------------------------- PLANNING */
.planning__intro{max-width:var(--mesure);margin-bottom:2rem}
.planning__intro a{font-weight:700;text-decoration-thickness:2px}
.cadre-agenda{
  background:var(--encre);padding:clamp(12px,2vw,20px);border-radius:4px;
  box-shadow:0 18px 46px -26px rgba(36,28,21,.35);
}
.cadre-agenda iframe{display:block;width:100%;height:620px;border:0;background:#fff;border-radius:2px}
/* Le contenu Google n'est chargé qu'après un clic : aucun cookie tiers n'est
   déposé avant que la visiteuse ne l'ait demandé. */
.consentement{
  background:var(--lin);border:1px dashed var(--ocre);border-radius:2px;
  padding:clamp(2rem,5vw,3rem);text-align:center;
}
.consentement p{max-width:38rem;margin-inline:auto;font-size:1.0625rem;color:var(--encre-douce)}
.consentement .btn{margin-top:1.4rem}
.planning__replis{margin-top:1.5rem;font-size:1.0625rem}
/* Sur telephone, l'agenda Google passe en vue liste (voir js/site.js) : on lui
   rend quelques dizaines de pixels de largeur et on raccourcit le cadre, sinon
   la liste flotte au milieu de 620px de blanc. */
@media (max-width:56.25em){
  #agenda-zone{margin-inline:calc(6px - var(--marge))}
  .cadre-agenda{padding:8px}
  .cadre-agenda iframe{height:480px}
}

/* ------------------------------------------------------------------ AVIS */
.avis{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem}
.avis h2{max-width:none;flex:1 1 20rem}

/* --------------------------------------------------------------- CONTACT */
.contact{
  position:relative;background:var(--nuit);color:var(--lin);
  padding-block:clamp(4.5rem,11vw,8rem);text-align:center;overflow:hidden;
}
.contact::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 62% at 50% 46%,rgba(246,200,106,.2),transparent 72%);
}
/* Filet de braise en haut de l'unique bande sombre : le meme motif que sur le
   fond clair, retourne cote sombre. */
.contact::after{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#E9A13B 18%,#F6C86A 50%,#E9A13B 82%,transparent);
}
.contact__inner{position:relative;max-width:46rem;margin:0 auto;padding-inline:var(--marge)}
.contact .surtitre{color:var(--ambre)}
.contact h2{
  font-family:var(--texte);font-size:1.375rem;font-weight:400;line-height:1.5;
  max-width:none;letter-spacing:0;margin-bottom:1.75rem;color:var(--lin);
}
/* Aucune animation en boucle sur ce bouton : une cible qui pulse est
   difficile à viser à 65 ans. */
.tel-geant{
  display:block;min-height:72px;padding:18px 32px;
  font-family:var(--texte);font-weight:600;font-size:var(--fs-tel);line-height:1.2;
  color:var(--lin);text-decoration:none;
  border:1.5px solid var(--ambre);border-radius:4px;
  transition:background-color .18s ease,box-shadow .3s ease;
}
.tel-geant:hover{background:var(--ocre);color:var(--lin);box-shadow:0 0 44px -6px rgba(246,200,106,.4)}
.contact p{text-align:center;margin-inline:auto}
.contact__secteur{margin:1.25rem auto 0;color:var(--argile);font-size:1.0625rem;max-width:32rem}

/* ----------------------------------------------------------- PIED DE PAGE */
.pied{background:var(--nuit);color:var(--argile);font-size:var(--fs-petit);line-height:1.65}
.pied__inner{
  padding-block:3rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2.5rem;
}
.pied b{font-family:var(--titre);font-weight:600;font-size:1.125rem;color:var(--lin);
  display:block;margin-bottom:.35rem}
.pied p{max-width:26rem}
/* La liste des communes est du référencement local honnête : elle est visible,
   elle décrit vraiment le secteur, et elle reste discrète typographiquement. */
.pied__secteur{font-size:.875rem;line-height:1.7;color:var(--argile);opacity:.92;max-width:30rem}
.pied a{color:var(--or)}
.pied a:hover{color:var(--ambre)}
.pied li{margin-bottom:.5rem}
.pied__mention{
  border-top:1px solid rgba(233,161,59,.35);
  padding:1.25rem var(--marge);text-align:center;color:var(--argile);
  max-width:none;
}
.pied__mention span{display:block;margin-top:.4rem;opacity:.9}

/* --------------------------------------------------- LE FIL DE LA JOURNÉE */
/* Signature n°2 : une portion éclairée descend le long de la page au rythme de
   la lecture. Repère de progression autant que geste graphique. 1100px et plus. */
.fil{
  position:fixed;left:clamp(20px,2.2vw,34px);top:96px;bottom:96px;width:3px;
  border-radius:2px;background:rgba(36,28,21,.1);z-index:5;pointer-events:none;display:none;
}
.fil__lumiere{
  display:block;width:100%;border-radius:2px;
  height:calc(var(--p,0) * 100%);
  /* Le rail est posé sur du papier clair : l'or #E9A13B n'y ressort qu'à 1,4:1,
     soit moins que la piste vide (1,19:1). On descend donc en terre cuite. */
  background:linear-gradient(180deg,#C9762F,#9A4A1C 45%,#7E3B14);
}
@media (min-width:68.75em){.fil{display:block}}

/* ------------------------------------------------------------- RÉVÉLATION */
/* Sécurité anti-page-blanche : l'état caché n'existe QUE si le JS a démarré
   (html.js) ET si la visiteuse n'a pas demandé moins de mouvement. Sans JS,
   avec un JS en erreur, ou en mouvement réduit, tout est visible d'emblée.
   Il est structurellement impossible qu'un texte reste bloqué à opacity:0. */
@media (prefers-reduced-motion:no-preference){
  html.js .revele{
    opacity:0;transform:translateY(14px);
    transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
    transition-delay:calc(var(--i,0) * 70ms);
  }
  html.js .revele.est-vu{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .revele{opacity:1!important;transform:none!important}
  .fil__lumiere{height:100%!important}
}

/* -------------------------------------------------------------- IMPRESSION */
@media print{
  .entete,.appel-fixe,.fil,.menu,.consentement,.cadre-agenda,.evitement{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .bande::before,.cadre::after,.planche::before{display:none!important}
  .contact,.pied,.bande--argile{background:#fff!important;color:#000!important}
  .tel-geant,.contact h2,.contact__secteur,.contact .surtitre,.pied,.pied a,.pied b{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}