/* ==========================================================================
   TerrEssenCielle — Feuille de styles principale
   Palette : la Terre (ocre, terracotta) monte vers le Ciel (bleu-gris, lin)
   ========================================================================== */

:root{
  /* Couleurs */
  --sable:#F7F2E9;
  --sable-clair:#FCFAF5;
  --lin:#EFE6D7;
  --lin-fonce:#E3D6C2;
  --terre:#B0704B;          /* aplats : boutons, filets, puces */
  --terre-clair:#C89372;
  --terre-fonce:#8A5637;
  /* Terracotta assombri, réservé aux PETITS textes (surtitres, liens, dates).
     Le terracotta clair tombe à 3,2:1 sur fond crème — sous le seuil lisible.
     Celui-ci tient 4,9:1 sur le lin et 5,8:1 sur le crème. */
  --terre-texte:#8A5637;
  --ocre:#C9A063;
  --sauge:#8B9A7C;
  --sauge-fonce:#5B6952;
  --ciel:#A6BCC6;
  --ciel-clair:#D6E3E8;
  --encre:#2C2924;
  --encre-doux:#5B544A;
  --encre-tres-doux:#6F675C;   /* gris muet : #8B8378 tombait a 3,4:1 */
  --blanc:#FFFFFF;

  /* Typographie */
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rythme */
  --max:1240px;
  --max-texte:720px;
  --gouttiere:clamp(1.25rem, 5vw, 4rem);
  --section-y:clamp(4.5rem, 11vw, 9rem);

  /* Divers */
  --radius:2px;
  --radius-doux:14px;
  --ombre:0 1px 2px rgba(44,41,36,.04), 0 8px 30px rgba(44,41,36,.06);
  --ombre-forte:0 4px 12px rgba(44,41,36,.06), 0 24px 60px rgba(44,41,36,.10);
  --transition:.6s cubic-bezier(.22,.61,.36,1);
  --header-h:84px;
  /* Hauteur de la barre d'action fixe. Valeur de repli : le script la
     remesure au chargement, car elle dépend de la police et de la langue. */
  --barre-h:78px;
}

/* --------------------------------------------------------------- Reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header-h)}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.75;
  color:var(--encre-doux);
  background:var(--sable);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%; height:auto; display:block}
/* <picture> sert seulement à proposer le WebP : il ne doit pas exister
   pour la mise en page, sinon il casse les hauteurs des conteneurs. */
picture{display:contents}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--terre); outline-offset:3px; border-radius:2px}

/* --------------------------------------------------------- Typographie -- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:300;
  color:var(--encre);
  margin:0;
  line-height:1.14;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.6rem,1.7rem + 4.2vw,5.2rem)}
h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem)}
h3{font-size:clamp(1.4rem,1.2rem + .9vw,1.95rem)}
h4{font-size:clamp(1.15rem,1.08rem + .35vw,1.35rem); font-family:var(--sans); font-weight:500; letter-spacing:.01em}
p{margin:0 0 1.35em}
p:last-child{margin-bottom:0}
em{font-style:italic}
strong{font-weight:500; color:var(--encre)}

.surtitre{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--terre-texte);
  margin:0 0 1.3rem;
  display:flex;
  align-items:center;
  gap:.9rem;
}
.surtitre::before{
  content:""; width:34px; height:1px; background:var(--terre); opacity:.5; flex:none;
}
.surtitre.is-centre{justify-content:center}
.surtitre.is-centre::after{content:""; width:34px; height:1px; background:var(--terre); opacity:.5}
/* Sur petit écran, un interlettrage large fait casser le surtitre sur trois
   lignes entre ses deux traits. On resserre plutôt que de le laisser s'étaler. */
@media (max-width:600px){
  .surtitre{font-size:.66rem; letter-spacing:.18em; gap:.7rem}
  .surtitre::before,.surtitre.is-centre::after{width:22px}
}

.chapo{
  font-family:var(--serif);
  font-size:clamp(1.25rem,1.1rem + .7vw,1.7rem);
  line-height:1.55;
  color:var(--encre);
  font-weight:300;
}
.lead{font-size:1.1em; color:var(--encre-doux)}
.texte-mesure{max-width:var(--max-texte)}
.centre{text-align:center; margin-inline:auto}

/* Citation / respiration */
.citation{
  font-family:var(--serif);
  font-size:clamp(1.5rem,1.15rem + 1.6vw,2.6rem);
  line-height:1.4;
  color:var(--encre);
  font-weight:300;
  font-style:italic;
  max-width:900px;
  margin-inline:auto;
  text-align:center;
  position:relative;
}
.citation cite{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:.75rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--terre-texte);
  margin-top:2rem;
}

/* ------------------------------------------------------------- Layout -- */
.enveloppe{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gouttiere)}
.enveloppe-large{width:100%; max-width:1480px; margin-inline:auto; padding-inline:var(--gouttiere)}
.section{padding-block:var(--section-y)}
.section--sable{background:var(--sable)}
.section--lin{background:var(--lin)}
.section--clair{background:var(--sable-clair)}
.section--nuit{background:var(--sauge-fonce); color:var(--lin)}
.section--nuit h1,.section--nuit h2,.section--nuit h3{color:var(--sable-clair)}
.section--nuit .surtitre{color:var(--ocre)}
.section--nuit .surtitre::before,.section--nuit .surtitre.is-centre::after{background:var(--ocre)}
.section--nuit .citation{color:var(--sable-clair)}
.section--terre{background:var(--terre-fonce); color:var(--lin)}
.section--terre h2,.section--terre h3{color:var(--sable-clair)}
.section--terre .surtitre{color:var(--ocre)}
.section--terre .surtitre::before,.section--terre .surtitre.is-centre::after{background:var(--ocre)}

.grille{display:grid; gap:clamp(1.5rem,3vw,2.6rem)}
/* Deux colonnes franches : avec « auto-fit », quatre cartes se rangeaient
   en 3 + 1 et laissaient un trou. */
.grille-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.grille-2{grid-template-columns:1fr}}
.grille-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grille-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.duo--texte-large{grid-template-columns:1.15fr 1fr}
@media (max-width:860px){
  .duo,.duo--texte-large{grid-template-columns:1fr}
  .duo .duo__media{order:-1}
}
.entete-section{max-width:760px; margin-bottom:clamp(2.5rem,5vw,4rem)}
.entete-section.centre{text-align:center; margin-inline:auto; max-width:640px}
.entete-section p{margin-top:1.4rem; font-size:1.08em; color:var(--encre-doux)}
.entete-section.centre p{margin-inline:auto; max-width:56ch}

/* ------------------------------------------------------------ Boutons -- */
.btn{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--sans); font-size:.8rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  padding:1.05rem 2.1rem;
  border-radius:100px;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .45s ease, background .45s ease, border-color .45s ease, transform .3s ease;
  will-change:transform;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--encre);
  transform:translateY(101%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{transform:translateY(-2px)}
.btn--plein{background:var(--terre-fonce); color:var(--sable-clair)}
.btn--plein:hover{color:#fff}
.btn--ligne{border:1px solid var(--terre); color:var(--terre-texte)}
.btn--ligne:hover{color:var(--sable-clair); border-color:var(--terre-fonce)}
.btn--clair{border:1px solid rgba(239,230,215,.45); color:var(--lin)}
.btn--clair::before{background:var(--lin)}
.btn--clair:hover{color:var(--encre); border-color:var(--lin)}
.btn .fleche{transition:transform .4s ease}
.btn:hover .fleche{transform:translateX(4px)}

.lien-souligne{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--terre-texte); padding-bottom:.35rem;
  background-image:linear-gradient(var(--terre-texte),var(--terre-texte));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .45s cubic-bezier(.22,.61,.36,1), color .3s;
}
.lien-souligne:hover{background-size:0% 1px; color:var(--terre-fonce)}
.section--nuit .lien-souligne,.section--terre .lien-souligne{
  color:var(--ocre); background-image:linear-gradient(var(--ocre),var(--ocre));
}

/* ------------------------------------------------------------ Header -- */
.entete{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:height .4s ease, background .4s ease, box-shadow .4s ease, backdrop-filter .4s;
}
.entete::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(247,242,233,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transition:opacity .4s ease;
  border-bottom:1px solid rgba(44,41,36,.07);
}
.entete.est-collee{--header-h:66px}
.entete.est-collee::after{opacity:1}
/* Voile sombre en haut de page pour que le menu reste lisible sur les photos */
.entete::before{
  content:""; position:absolute; inset:0 0 -60px 0; z-index:-2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(18,15,12,.62), rgba(18,15,12,0));
  opacity:1; transition:opacity .4s ease;
}
.entete.est-collee::before{opacity:0}
/* Tant qu'on est en haut, l'en-tête est posé sur une image : texte clair */
.entete:not(.est-collee) .logo__nom{color:#fff}
.entete:not(.est-collee) .logo__nom b{color:var(--ocre)}
.entete:not(.est-collee) .logo__bl{color:rgba(255,255,255,.72)}
.entete:not(.est-collee) .nav a{color:rgba(255,255,255,.88)}
.entete:not(.est-collee) .nav a:hover,
.entete:not(.est-collee) .nav a[aria-current="page"]{color:var(--ocre)}
.entete:not(.est-collee) .nav a::after{background:var(--ocre)}
.entete:not(.est-collee) .burger span{background:#fff}
/* Menu mobile ouvert : le panneau crème passe sous l'en-tête, donc on
   rebascule le logo et le bouton en foncé, sinon ils disparaissent. */
body.est-bloque .entete::before{opacity:0}
body.est-bloque .entete .logo__nom{color:var(--encre)}
body.est-bloque .entete .logo__nom b{color:var(--terre)}
body.est-bloque .entete .logo__bl{color:var(--encre-tres-doux)}
body.est-bloque .entete .burger span{background:var(--encre)}
.entete__inner{width:100%; max-width:1480px; margin-inline:auto; padding-inline:var(--gouttiere);
  display:flex; align-items:center; justify-content:space-between; gap:2rem}

.logo{display:flex; flex-direction:column; line-height:1; flex:none}
.logo__nom{
  font-family:var(--serif); font-size:clamp(1.35rem,1.2rem + .5vw,1.65rem);
  color:var(--encre); letter-spacing:.01em;
}
.logo__nom b{font-weight:500; color:var(--terre)}
.logo__bl{
  font-size:.56rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--encre-tres-doux); margin-top:.42rem;
}

.nav{display:flex; align-items:center; gap:clamp(1.1rem,2vw,2.1rem)}
.nav a{
  font-size:.8rem; letter-spacing:.09em; color:var(--encre-doux);
  position:relative; padding-block:.4rem; transition:color .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--terre); transform:scaleX(0); transform-origin:right;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--terre)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.entete .btn{padding:.8rem 1.5rem; font-size:.72rem}

.burger{display:none; width:44px; height:44px; position:relative; flex:none; z-index:110}
.burger span{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--encre);
  transition:transform .4s cubic-bezier(.22,.61,.36,1), opacity .25s;
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:27px}
.burger.est-ouvert span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.est-ouvert span:nth-child(2){opacity:0}
.burger.est-ouvert span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.menu-mobile{
  /* au-dessus de la barre d'action fixe (z-index 90) */
  position:fixed; inset:0; z-index:120;
  background:var(--sable);
  padding:calc(var(--header-h) + 2.5rem) var(--gouttiere) 3rem;
  display:flex; flex-direction:column; justify-content:center; gap:.2rem;
  clip-path:circle(0% at calc(100% - 40px) 42px);
  transition:clip-path .8s cubic-bezier(.7,0,.2,1);
  overflow-y:auto;
}
.menu-mobile.est-ouvert{clip-path:circle(150% at calc(100% - 40px) 42px)}
.menu-mobile a{
  font-family:var(--serif); font-size:clamp(1.8rem,7vw,2.6rem); color:var(--encre);
  padding-block:.28rem; opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease, color .3s;
}
.menu-mobile.est-ouvert a{opacity:1; transform:none}
.menu-mobile.est-ouvert a:nth-child(1){transition-delay:.24s}
.menu-mobile.est-ouvert a:nth-child(2){transition-delay:.30s}
.menu-mobile.est-ouvert a:nth-child(3){transition-delay:.36s}
.menu-mobile.est-ouvert a:nth-child(4){transition-delay:.42s}
.menu-mobile.est-ouvert a:nth-child(5){transition-delay:.48s}
.menu-mobile.est-ouvert a:nth-child(6){transition-delay:.54s}
.menu-mobile.est-ouvert a:nth-child(7){transition-delay:.60s}
.menu-mobile.est-ouvert a:nth-child(8){transition-delay:.66s}
.menu-mobile a:hover{color:var(--terre)}
.menu-mobile__contact{margin-top:2.5rem; font-size:.9rem; color:var(--encre-doux); letter-spacing:.04em}
.menu-mobile__contact a{font-family:var(--sans); font-size:1rem; display:block; color:var(--terre-texte)}

@media (max-width:1080px){
  .nav,.entete .btn{display:none}
  .burger{display:block}
}
body.est-bloque{overflow:hidden}

/* -------------------------------------------------------------- Hero -- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:var(--header-h); overflow:hidden;
  background:var(--lin);
}
.hero__fond{position:absolute; inset:0; z-index:0}
.hero__fond img{width:100%; height:110%; object-fit:cover; will-change:transform}
/* Voile du hero — assez pour lire, pas au point d'éteindre la photo.
   Le dégradé est resserré sur le tiers gauche, là où se pose le texte :
   la photo reste lumineuse partout ailleurs. */
.hero__fond::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(18,15,12,.72) 0%, rgba(18,15,12,.52) 30%, rgba(18,15,12,.12) 58%, rgba(18,15,12,0) 100%),
    linear-gradient(to bottom, rgba(18,15,12,.30) 0%, rgba(18,15,12,0) 24%, rgba(18,15,12,0) 74%, rgba(18,15,12,.26) 100%);
}
/* Un léger halo derrière le texte suffit à compenser le voile allégé. */
.hero h1,.hero__texte{text-shadow:0 1px 24px rgba(16,13,10,.55)}
@media (max-width:860px){
  .hero__fond::after{
    background:linear-gradient(to bottom, rgba(20,17,14,.62) 0%, rgba(20,17,14,.52) 45%, rgba(20,17,14,.74) 100%);
  }
}
.hero__contenu{position:relative; z-index:2; max-width:880px; padding-block:6rem 8rem}
.hero .surtitre{color:var(--ocre)}
.hero .surtitre::before{background:var(--ocre)}
.hero h1{color:#fff}
.hero__texte{
  color:rgba(255,255,255,.9); font-size:clamp(1.05rem,1rem + .45vw,1.3rem);
  max-width:600px; margin-top:1.9rem; line-height:1.7;
}
.hero__actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.8rem}
.hero__scroll{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  font-size:.63rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.62);
}
.hero__scroll i{display:block; width:1px; height:52px; background:linear-gradient(rgba(255,255,255,.5),transparent);
  animation:descendre 2.4s ease-in-out infinite}
@keyframes descendre{0%,100%{transform:scaleY(.35); transform-origin:top; opacity:.35}
  50%{transform:scaleY(1); transform-origin:top; opacity:1}}

/* ===================================================== Hero « Terre & Ciel » ==
   Le nom du site dit Terre + EssenCiel + Ciel. La bannière le met en scène,
   en couches superposées :

     1. un fond qui monte du ciel vers la terre, avec un grain fin
     2. des ondes concentriques qui montent de l'horizon — le soleil qui se
        lève autant que la vibration du tambour
     3. la ligne d'horizon
     4. le texte, jamais posé sur une photo : la lisibilité est acquise
     5. la photo principale en arche, franchissant l'horizon
     6. deux photos satellites, à des profondeurs différentes

   Chaque couche défile à sa propre vitesse (attribut data-parallaxe), ce qui
   crée la profondeur. Tout s'arrête si le visiteur a demandé moins d'animations.
   ============================================================================= */
.hero-tc{
  position:relative; overflow:hidden; isolation:isolate;
  padding-top:calc(var(--header-h) + clamp(2rem,5vw,4.5rem));
  padding-bottom:clamp(3.5rem,7vw,6rem);
  min-height:min(100svh,900px);
  display:flex; align-items:center;
  background:linear-gradient(180deg,
    var(--ciel-clair) 0%,
    #EAEFEB 20%,
    var(--sable) 50%,
    var(--lin) 100%);
}
/* Grain très fin : donne une matière de papier au dégradé, qui sinon
   afficherait des bandes visibles sur les grands écrans. */
.hero-tc::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23b)' opacity='.055'/%3E%3C/svg%3E");
}
/* Halo chaud, comme une lumière de fin de matinée */
.hero-tc::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(78vw,880px); aspect-ratio:1; top:-20%; right:-12%;
  background:radial-gradient(circle, rgba(201,160,99,.34) 0%, rgba(201,160,99,0) 66%);
}

/* --- Les ondes qui montent de l'horizon ------------------------------- */
.hero-tc__ondes{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; bottom:14%; transform:translateX(-50%);
  width:min(150vw,1700px); height:auto; overflow:visible;
}
.hero-tc__ondes circle{
  fill:none; stroke:var(--terre); stroke-width:1; vector-effect:non-scaling-stroke;
}
.hero-tc__ondes circle:nth-child(1){opacity:.42}
.hero-tc__ondes circle:nth-child(2){opacity:.34}
.hero-tc__ondes circle:nth-child(3){opacity:.26}
.hero-tc__ondes circle:nth-child(4){opacity:.19}
.hero-tc__ondes circle:nth-child(5){opacity:.12}

/* --- La ligne d'horizon ------------------------------------------------ */
.hero-tc__horizon{
  position:absolute; left:0; right:0; top:58%; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(176,112,75,.75) 12%, rgba(176,112,75,.75) 88%, transparent);
  pointer-events:none;
}

/* --- Le désert : dunes et sable qui vole -------------------------------
   Le bas de la bannière devient une étendue de dunes, et trois bandes de
   sable défilent au-dessus. C'est l'ÉCART entre leurs vitesses qui donne
   la sensation de vent, pas la vitesse elle-même : la couche du fond met
   46 s à faire un tour, celle du premier plan 13 s.
   Aucune image, aucun JavaScript — uniquement du vectoriel et du CSS.

   Point délicat : le motif de sable est dimensionné en POURCENTAGES
   (background-size:6.25%…) et jamais en pixels. La piste fait 200 % de
   large et se décale de 50 % à chaque tour ; il faut donc que ce décalage
   représente un nombre ENTIER de motifs, sinon la boucle ferait un saut
   visible. Les seules valeurs admises sont donc 25 / 12.5 / 10 / 6.25 /
   5 / 2.5 % : toutes donnent un nombre pair de motifs sur la piste. */
.hero-tc__desert{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  height:clamp(230px,40%,420px); pointer-events:none;
}
/* Brume chaude au ras du sol : c'est elle qui fait « chaleur du désert »
   plus que les dunes elles-mêmes. */
.hero-tc__desert::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:170%;
  background:linear-gradient(180deg,
    rgba(201,160,99,0) 0%, rgba(201,160,99,.09) 52%, rgba(176,112,75,.15) 100%);
}
.hero-tc__dunes{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  /* le pied des dunes s'estompe pour fondre dans la section suivante */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.22) 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.22) 100%);
}
.dune--loin{fill:#E7DAC2}
.dune--milieu{fill:#DDCEB2}
.dune--proche{fill:#D0BE9C}

/* Une couche de sable : la boîte cadre et estompe, la piste défile dedans. */
.hero-tc__vent,
.hero-tc__poussiere{
  position:absolute; left:0; right:0; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 55%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 55%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.hero-tc__vent i,
.hero-tc__poussiere i{
  position:absolute; inset:0; width:200%;
  animation:tec-vent var(--souffle,30s) linear infinite;
  animation-delay:var(--depart,0s);
  will-change:transform;
}
/* Le déplacement horizontal est parfaitement linéaire (12,5 % par quart de
   tour) ; seule l'ondulation verticale varie, pour éviter l'effet « tapis
   roulant » d'une translation strictement rectiligne. */
@keyframes tec-vent{
  0%  {transform:translate3d(0,0,0)}
  25% {transform:translate3d(-12.5%,-7px,0)}
  50% {transform:translate3d(-25%,3px,0)}
  75% {transform:translate3d(-37.5%,-5px,0)}
  100%{transform:translate3d(-50%,0,0)}
}

/* 1. Sable lointain : fin, très lent, presque une brume */
.hero-tc__vent--1{top:-130%; bottom:14%; opacity:.5}
.hero-tc__vent--1 i{
  --souffle:46s;
  background-image:
    radial-gradient(ellipse 5px 1.2px at 18% 34%, rgba(138,86,55,.42) 0%, rgba(138,86,55,0) 72%),
    radial-gradient(ellipse 7px 1.4px at 62% 71%, rgba(176,112,75,.34) 0%, rgba(176,112,75,0) 72%),
    radial-gradient(ellipse 4px 1.1px at 84% 22%, rgba(138,86,55,.32) 0%, rgba(138,86,55,0) 72%),
    radial-gradient(ellipse 6px 1.3px at 41% 88%, rgba(201,160,99,.36) 0%, rgba(201,160,99,0) 72%);
  background-size:6.25% 44%, 12.5% 61%, 10% 83%, 5% 37%;
}

/* 2. Sable médian : le gros du souffle */
.hero-tc__vent--2{top:-80%; bottom:6%; opacity:.72}
.hero-tc__vent--2 i{
  --souffle:30s; --depart:-6s;
  background-image:
    radial-gradient(ellipse 8px 1.5px at 26% 52%, rgba(138,86,55,.46) 0%, rgba(138,86,55,0) 72%),
    radial-gradient(ellipse 5.5px 1.3px at 71% 28%, rgba(176,112,75,.40) 0%, rgba(176,112,75,0) 72%),
    radial-gradient(ellipse 10px 1.7px at 48% 79%, rgba(201,160,99,.40) 0%, rgba(201,160,99,0) 72%),
    radial-gradient(ellipse 4.5px 1.1px at 9% 15%, rgba(138,86,55,.36) 0%, rgba(138,86,55,0) 72%);
  background-size:5% 52%, 10% 71%, 2.5% 33%, 12.5% 90%;
}

/* 3. Sable qui rase les crêtes, devant les dunes */
.hero-tc__vent--3{top:-25%; bottom:0; opacity:.85}
.hero-tc__vent--3 i{
  --souffle:19s; --depart:-11s;
  background-image:
    radial-gradient(ellipse 13px 1.8px at 33% 44%, rgba(138,86,55,.40) 0%, rgba(138,86,55,0) 74%),
    radial-gradient(ellipse 9px 1.5px at 77% 68%, rgba(176,112,75,.34) 0%, rgba(176,112,75,0) 74%),
    radial-gradient(ellipse 16px 2px at 12% 82%, rgba(201,160,99,.30) 0%, rgba(201,160,99,0) 74%);
  background-size:2.5% 40%, 6.25% 66%, 5% 88%;
}

/* 4. Quelques grains passent DEVANT la photo : c'est ce plan-là qui donne
      la profondeur, donc il reste très discret pour ne pas salir l'image. */
.hero-tc__poussiere{
  bottom:0; height:clamp(150px,28%,320px); z-index:4; opacity:.42;
}
.hero-tc__poussiere i{
  --souffle:13s; --depart:-4s;
  background-image:
    radial-gradient(ellipse 22px 2.2px at 40% 36%, rgba(250,246,238,.75) 0%, rgba(250,246,238,0) 74%),
    radial-gradient(ellipse 15px 1.8px at 82% 74%, rgba(238,229,211,.65) 0%, rgba(238,229,211,0) 74%);
  background-size:12.5% 55%, 25% 78%;
}

/* La parallaxe passe par « translate » et non par « transform » : les
   animations d'entrée utilisent déjà transform, et les deux propriétés se
   composent sans se marcher dessus. */
[data-parallaxe]{translate:0 var(--decalage,0); will-change:translate}
@media (prefers-reduced-motion:reduce){ [data-parallaxe]{translate:none} }

.hero-tc__grille{
  position:relative; z-index:3; width:100%;
  display:grid; grid-template-columns:1fr 1.02fr;
  gap:clamp(1.5rem,3.2vw,3.2rem); align-items:center;
}

/* --- Le texte ---------------------------------------------------------- */
.hero-tc__texte{max-width:47ch}
.hero-tc h1{
  font-size:clamp(2.9rem,1.5rem + 5.4vw,6rem);
  line-height:1; color:var(--encre); margin-bottom:0;
}
/* Révélation par volet : chaque ligne monte de derrière un bord invisible. */
.hero-tc h1 .ligne{display:block; overflow:hidden; padding-bottom:.06em}
.hero-tc h1 .ligne > span{display:block}
html.js .hero-tc:not(.est-revele) h1 .ligne > span{
  transform:translateY(108%);
  transition:transform 1.15s cubic-bezier(.22,.61,.36,1);
}
.hero-tc h1 .ligne:nth-child(2) > span{transition-delay:.13s}
.hero-tc h1 em{font-style:italic; color:var(--terre-fonce)}

.hero-tc__intro{
  margin-top:1.9rem; font-size:clamp(1.05rem,1rem + .45vw,1.28rem);
  line-height:1.75; color:var(--encre-doux); max-width:46ch;
  transition:opacity .9s ease .38s, transform .9s cubic-bezier(.22,.61,.36,1) .38s;
}
.hero-tc .hero__actions{
  margin-top:2.5rem;
  transition:opacity .9s ease .5s, transform .9s cubic-bezier(.22,.61,.36,1) .5s;
}
.hero-tc .hero__actions .btn{padding:1rem 1.7rem; font-size:.75rem}

/* Trois repères factuels, discrets */
.hero-tc__preuves{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin-top:2.4rem;
  transition:opacity .9s ease .66s, transform .9s cubic-bezier(.22,.61,.36,1) .66s;
}
.hero-tc__preuves li{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--terre-texte); padding:.5rem .95rem;
  border:1px solid rgba(176,112,75,.32); border-radius:100px;
  background:rgba(252,250,245,.5);
}

/* États de départ de l'animation d'entrée.
   Ils ne s'appliquent QUE si le JavaScript tourne (classe « js » posée par un
   script en tête de page). Sans JS, la bannière s'affiche telle quelle : une
   panne de script ne doit jamais rendre le contenu invisible. */
html.js .hero-tc:not(.est-revele) .hero-tc__intro,
html.js .hero-tc:not(.est-revele) .hero__actions{opacity:0; transform:translateY(18px)}
html.js .hero-tc:not(.est-revele) .hero-tc__preuves{opacity:0; transform:translateY(14px)}
html.js .hero-tc:not(.est-revele) .hero-tc__arche{clip-path:inset(0 0 100% 0)}
html.js .hero-tc:not(.est-revele) .hero-tc__arche img{transform:scale(1.1)}
html.js .hero-tc:not(.est-revele) .hero-tc__satellite{opacity:0; transform:scale(.9)}

/* --- L'arche et ses satellites ----------------------------------------- */
/* L'arche déborde la gouttière pour toucher le bord de l'écran : c'est ce
   qui supprime la marge morte à droite et donne son assise à la composition. */
.hero-tc__visuel{
  position:relative; justify-self:stretch; align-self:end;
  margin-right:calc(-1 * var(--gouttiere));
  margin-bottom:calc(-1 * clamp(3.5rem,7vw,6rem));
}
.hero-tc__arche{
  position:relative; z-index:2;
  height:clamp(460px,74svh,720px); overflow:hidden;
  border-radius:999px 999px var(--radius-doux) var(--radius-doux);
  background:var(--lin-fonce);
  box-shadow:0 8px 24px rgba(44,41,36,.09), 0 34px 80px rgba(44,41,36,.18);
  transition:clip-path 1.35s cubic-bezier(.76,0,.24,1) .18s;
}
.hero-tc__arche img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.8s cubic-bezier(.22,.61,.36,1) .18s;
  will-change:transform;
}

/* Écho : un second contour d'arche, décalé derrière la photo */
.hero-tc__echo{
  position:absolute; z-index:1; inset:auto auto -30px -30px;
  width:100%; height:clamp(460px,74svh,720px);
  border:1px solid rgba(176,112,75,.42);
  border-radius:999px 999px var(--radius-doux) var(--radius-doux);
  pointer-events:none;
}

.hero-tc__satellite{
  position:absolute; z-index:3; margin:0;
  aspect-ratio:1; overflow:hidden; border-radius:var(--radius-doux);
  background:var(--lin-fonce);
  border:5px solid var(--sable);
  box-shadow:0 4px 16px rgba(44,41,36,.12), 0 18px 44px rgba(44,41,36,.16);
  transition:opacity .8s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.hero-tc__satellite img{width:100%; height:100%; object-fit:cover}
.hero-tc__satellite--1{width:min(46%,230px); top:46%; left:-16%; transition-delay:.75s}
.hero-tc__satellite--2{display:none}

/* Entre 901 et 1180 px les deux colonnes se resserrent : le satellite
   n'a plus la place de déborder sans recouvrir les boutons. On le retire
   sur cette plage, il revient quand la mise en page s'empile (≤900 px). */
@media (min-width:901px) and (max-width:1180px){
  .hero-tc__satellite--1{display:none}
}
@media (min-width:1181px) and (max-width:1340px){
  .hero-tc__satellite--1{width:min(40%,190px); left:-9%}
}
@media (max-width:900px){
  .hero-tc{min-height:0; padding-bottom:clamp(4.5rem,11vw,7rem)}
  .hero-tc__grille{grid-template-columns:1fr; gap:3rem}
  .hero-tc__texte{max-width:none}
  /* Sous 900 px la bannière s'empile : on annule les débordements
     calculés pour la composition en deux colonnes. */
  .hero-tc__visuel{
    max-width:330px; margin-inline:auto;
    margin-right:auto; margin-bottom:0; align-self:auto; justify-self:center;
  }
  .hero-tc__arche,.hero-tc__echo{height:clamp(400px,52svh,520px)}
  .hero-tc__echo{inset:auto auto -18px -18px}
  .hero-tc__horizon{top:auto; bottom:30%}
  .hero-tc__ondes{bottom:6%; width:200vw}
  .hero-tc__desert{height:clamp(110px,20%,190px)}
  .hero-tc__poussiere{height:clamp(110px,20%,190px); opacity:.3}
  .hero-tc__satellite--1{width:34%; left:-13%; top:8%}
  .hero-tc__satellite--2{width:28%; right:-11%; bottom:4%}
}
@media (max-width:420px){
  .hero-tc__satellite{border-width:4px}
  .hero-tc__satellite--1{left:-8%}
  .hero-tc__satellite--2{right:-6%}
}

/* Moins d'animations : tout est déjà en place, rien ne bouge. */
@media (prefers-reduced-motion:reduce){
  .hero-tc h1 .ligne > span{transform:none}
  .hero-tc__intro,.hero-tc .hero__actions,.hero-tc__preuves,.hero-tc__satellite{opacity:1; transform:none}
  .hero-tc__arche{clip-path:none}
  .hero-tc__arche img{transform:none}
  /* Les dunes restent dessinées, seul le sable cesse de voler. */
  .hero-tc__vent i,.hero-tc__poussiere i{animation:none}
}

/* Hero secondaire (pages intérieures) */
.hero-page{
  position:relative; min-height:min(62svh,540px); display:flex; align-items:flex-end;
  padding-top:calc(var(--header-h) + 3rem); padding-bottom:clamp(3rem,6vw,5rem);
  overflow:hidden; background:var(--sauge-fonce);
}
.hero-page__fond{position:absolute; inset:0; z-index:0}
.hero-page__fond img{width:100%; height:112%; object-fit:cover; will-change:transform}
.hero-page__fond::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(20,17,14,.90) 0%, rgba(20,17,14,.58) 42%, rgba(20,17,14,.30) 72%, rgba(20,17,14,.44) 100%),
    linear-gradient(105deg, rgba(20,17,14,.42) 0%, rgba(20,17,14,.10) 55%, rgba(20,17,14,0) 100%)}
.hero-page__contenu{position:relative; z-index:2; max-width:820px}
.hero-page .surtitre{color:var(--ocre)}
.hero-page .surtitre::before{background:var(--ocre)}
.hero-page h1{color:#fff}
.hero-page p{color:rgba(255,255,255,.86); margin-top:1.3rem; max-width:620px; font-size:1.08em}

/* Fil d'Ariane */
.ariane{font-size:.72rem; letter-spacing:.1em; color:rgba(255,255,255,.6); margin-bottom:1.6rem}
.ariane a{color:rgba(255,255,255,.78); transition:color .3s}
.ariane a:hover{color:#fff}
.ariane span{margin-inline:.55rem; opacity:.5}

/* ------------------------------------------------------------- Cartes -- */
.carte{
  background:var(--sable-clair); border-radius:var(--radius-doux);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s ease;
  box-shadow:0 1px 2px rgba(44,41,36,.03);
}
.carte:hover{transform:translateY(-7px); box-shadow:var(--ombre-forte)}
.carte__media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--lin-fonce)}
.carte__media img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1), filter .6s}
.carte:hover .carte__media img{transform:scale(1.06)}
.carte__corps{padding:clamp(1.5rem,2.4vw,2.1rem); flex:1; display:flex; flex-direction:column; gap:.85rem}
.carte__corps h3{transition:color .35s}
.carte:hover .carte__corps h3{color:var(--terre)}
.carte__corps p{font-size:.96em; flex:1}
.carte__etiquette{
  position:absolute; top:1rem; left:1rem; z-index:2;
  background:rgba(247,242,233,.94); color:var(--terre-fonce);
  font-size:.63rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.5rem 1rem; border-radius:100px; backdrop-filter:blur(6px);
}

/* Carte univers (accueil)
   La photo en haut, le texte sur un fond plein en dessous. Poser le texte SUR
   la photo obligeait à assombrir chaque image différemment et restait fragile ;
   ici la lisibilité ne dépend plus du visuel. */
.univers{
  display:flex; flex-direction:column;
  background:var(--sable-clair);
  border:1px solid rgba(44,41,36,.09);
  border-radius:var(--radius-doux); overflow:hidden;
  transition:transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, border-color .5s ease;
}
.univers:hover{
  transform:translateY(-4px);
  border-color:rgba(176,112,75,.3);
  box-shadow:0 3px 10px rgba(44,41,36,.05), 0 18px 44px rgba(44,41,36,.09);
}
.univers__media{aspect-ratio:16/10; overflow:hidden; background:var(--lin-fonce)}
.univers__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.univers:hover .univers__media img{transform:scale(1.035)}

.univers__corps{
  flex:1; display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(1.6rem,2.6vw,2.3rem);
}
.univers__num{
  font-family:var(--sans); font-size:.7rem; font-weight:400;
  letter-spacing:.28em; color:var(--terre-texte);
  display:flex; align-items:center; gap:.75rem; margin-bottom:1rem;
}
.univers__num::after{content:""; width:26px; height:1px; background:var(--terre); opacity:.45}
.univers h3{
  color:var(--encre); margin-bottom:.85rem;
  font-size:clamp(1.5rem,1.3rem + .9vw,2rem);
  transition:color .35s ease;
}
.univers:hover h3{color:var(--terre-fonce)}
.univers p{
  color:var(--encre-doux); font-size:1rem; line-height:1.7;
  margin-bottom:1.6rem; max-width:44ch;
}
.univers .lien-souligne{margin-top:auto}
.univers:hover .lien-souligne{background-size:0% 1px}

/* Carte simple / sobre */
.carte-sobre{
  padding:clamp(1.7rem,3vw,2.4rem);
  background:var(--sable-clair); border-radius:var(--radius-doux);
  border:1px solid rgba(44,41,36,.06);
  transition:transform .5s ease, box-shadow .5s ease, border-color .5s;
  height:100%;
}
.carte-sobre:hover{transform:translateY(-5px); box-shadow:var(--ombre); border-color:rgba(176,112,75,.22)}
.carte-sobre h3,.carte-sobre h4{margin-bottom:.8rem}
.carte-sobre__icone{
  width:52px; height:52px; margin-bottom:1.4rem; color:var(--terre);
}
.carte-sobre__icone svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.1}
.section--nuit .carte-sobre,.section--terre .carte-sobre{
  background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.12); color:rgba(239,230,215,.86);
}
.section--nuit .carte-sobre__icone,.section--terre .carte-sobre__icone{color:var(--ocre)}

/* -------------------------------------------------------------- Tarifs -- */
.tarif{
  background:var(--sable-clair); border-radius:var(--radius-doux);
  border:1px solid rgba(44,41,36,.07); padding:clamp(1.8rem,3vw,2.5rem);
  display:flex; flex-direction:column; gap:1.1rem; height:100%;
  transition:transform .5s ease, box-shadow .5s ease;
}
.tarif:hover{transform:translateY(-5px); box-shadow:var(--ombre)}
.tarif__lieu{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--terre-texte)}
.tarif h3{font-size:clamp(1.3rem,1.2rem + .5vw,1.6rem)}
.tarif__creneau{
  display:flex; align-items:baseline; gap:.7rem; padding-block:.55rem;
  border-bottom:1px solid rgba(44,41,36,.07); font-size:.95em;
}
.tarif__creneau:last-of-type{border-bottom:0}
.tarif__creneau b{font-weight:500; color:var(--encre); min-width:5.5rem}
.tarif__prix{margin-top:auto; padding-top:1.2rem; border-top:1px solid rgba(176,112,75,.25)}
.tarif__prix .montant{
  font-family:var(--serif); font-size:2.3rem; color:var(--terre-fonce); line-height:1;
}
.tarif__prix .detail{display:block; font-size:.85em; margin-top:.5rem; color:var(--encre-tres-doux)}

/* --------------------------------------------------------- Chronologie -- */
.chrono{position:relative; padding-left:2.4rem}
.chrono::before{
  content:""; position:absolute; left:6px; top:.6rem; bottom:.6rem; width:1px;
  background:linear-gradient(var(--terre),var(--sauge),transparent);
}
.chrono li{position:relative; padding-bottom:2.1rem}
.chrono li:last-child{padding-bottom:0}
.chrono li::before{
  content:""; position:absolute; left:-2.4rem; top:.62rem; width:13px; height:13px;
  border-radius:50%; background:var(--sable); border:1.5px solid var(--terre);
  transition:background .4s, transform .4s;
}
.chrono li:hover::before{background:var(--terre); transform:scale(1.2)}
.chrono__an{
  display:block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terre-texte); margin-bottom:.4rem;
}
.chrono h4{margin-bottom:.35rem}
.chrono p{font-size:.95em}
.section--nuit .chrono li::before{background:var(--sauge-fonce); border-color:var(--ocre)}
.section--nuit .chrono__an{color:var(--ocre)}

/* ------------------------------------------------------------ Accordéon -- */
.accordeon{border-top:1px solid rgba(44,41,36,.11)}
.accordeon__item{border-bottom:1px solid rgba(44,41,36,.11)}
.accordeon__tete{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0; text-align:left; transition:color .3s;
}
.accordeon__tete h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem); transition:color .3s}
.accordeon__tete:hover h3{color:var(--terre)}
.accordeon__plus{
  flex:none; width:26px; height:26px; position:relative; margin-top:.35rem;
}
.accordeon__plus::before,.accordeon__plus::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--terre);
  transform:translate(-50%,-50%); transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.accordeon__plus::before{width:15px; height:1.5px}
.accordeon__plus::after{width:1.5px; height:15px}
.accordeon__item.est-ouvert .accordeon__plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)}
.accordeon__corps{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.22,.61,.36,1);
}
.accordeon__item.est-ouvert .accordeon__corps{grid-template-rows:1fr}
.accordeon__corps>div{overflow:hidden}
.accordeon__corps p{padding-bottom:1.6rem; max-width:70ch}
.accordeon__corps ul{padding-bottom:1.6rem}

/* ------------------------------------------------------------ Média/img -- */
.media{position:relative; overflow:hidden; border-radius:var(--radius-doux)}
.media img{width:100%; height:100%; object-fit:cover}
.media--portrait{aspect-ratio:4/5}
.media--carre{aspect-ratio:1/1}
.media--paysage{aspect-ratio:16/10}
.media-duo{display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start}
.media-duo>:nth-child(2){margin-top:3.5rem}

/* ------------------------------------------------- Mosaïque flottante --
   Une grande photo, et trois carrés qui débordent sur ses bords en
   flottant très lentement. L'amplitude est volontairement minuscule
   (quelques pixels) : on doit sentir que ça respire, pas le voir bouger. */
.mosaique{position:relative; padding:0 clamp(1.5rem,4vw,3.5rem) clamp(2.5rem,5vw,4rem) 0}
.mosaique__principale{
  border-radius:var(--radius-doux); overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 3px 12px rgba(44,41,36,.06), 0 24px 60px rgba(44,41,36,.10);
}
.mosaique__principale img{width:100%; height:100%; object-fit:cover}

.mosaique__carre{
  position:absolute; overflow:hidden; border-radius:var(--radius-doux);
  aspect-ratio:1/1; background:var(--lin-fonce);
  border:5px solid var(--sable);
  box-shadow:0 3px 14px rgba(44,41,36,.10), 0 16px 40px rgba(44,41,36,.13);
  animation:flotte 9s ease-in-out infinite;
  will-change:transform;
}
.mosaique__carre img{width:100%; height:100%; object-fit:cover}
.section--lin .mosaique__carre{border-color:var(--lin)}
.section--clair .mosaique__carre{border-color:var(--sable-clair)}

.mosaique__carre--1{width:38%; top:8%;  right:0;    animation-duration:9s;  animation-delay:0s}
.mosaique__carre--2{width:30%; bottom:0; right:14%; animation-duration:11s; animation-delay:-3.5s}
.mosaique__carre--3{width:26%; bottom:16%; left:-6%; animation-duration:13s; animation-delay:-7s}

@keyframes flotte{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-9px,0)}
}
@media (max-width:520px){
  /* Sur petit écran, les carrés mangeraient la photo : on les range en ligne. */
  .mosaique{padding:0}
  .mosaique__carre{position:static; width:auto; animation:none; border-width:0}
  .mosaique__carres{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-top:.7rem}
}
@media (min-width:521px){ .mosaique__carres{display:contents} }

/* ------------------------------ Section d'introduction « Terre et Ciel » --
   Le texte est long, la colonne d'images courte : sans réglage, la page
   affiche deux rectangles côte à côte et un grand vide sous les photos.
   Quatre gestes suffisent à la détendre, et aucun n'est une décoration :

   1. l'ouverture est indentée derrière un filet vertical — le tronc de
      l'Arbre dont parle justement le texte ;
   2. la taille de caractère descend par paliers au lieu de chuter d'un
      coup du grand serif au petit texte courant ;
   3. les photos accompagnent la lecture au lieu de rester plantées en haut ;
   4. elles prennent des formes différentes — une arche, un cercle, un carré
      incliné. C'est la variété des FORMES qui casse la grille, pas les
      couleurs ni les ombres. */
/* Attention : cette règle est plus spécifique que l'empilement mobile de
   .duo--texte-large. Sans le media query, elle le battrait et la section
   resterait en deux colonnes de 157 px sur téléphone. */

/* L'ouverture : le filet fait le tronc, les deux paragraphes ses branches. */
.intro-tc__ouverture{
  position:relative;
  padding-left:clamp(1.1rem,2.4vw,2rem);
  margin-bottom:clamp(2rem,4vw,2.9rem);
}
.intro-tc__ouverture::before{
  content:""; position:absolute; left:0; top:.5em; bottom:.4em; width:1px;
  background:linear-gradient(180deg,
    transparent 0%, var(--terre) 14%, var(--terre) 80%, transparent 100%);
  opacity:.45;
}
/* Deux paliers : le second chapô sert de marche entre le grand serif et
   le texte courant. Sans lui, l'œil tombe d'un étage. */
.intro-tc__ouverture .chapo{font-size:clamp(1.32rem,1.12rem + .85vw,1.82rem)}
.intro-tc__ouverture .chapo + .chapo{
  font-size:clamp(1.1rem,1rem + .5vw,1.4rem);
  color:var(--encre-doux);
  margin-top:1.15em;
}

/* La conclusion se détache du récit par un filet, pas par un blanc de plus. */
.intro-tc__final{
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  padding-top:clamp(1.5rem,3vw,2.1rem);
  border-top:1px solid rgba(176,112,75,.22);
}

@media (min-width:861px){
  .intro-tc .duo--texte-large{grid-template-columns:1.08fr 1fr; align-items:start}

  /* Les photos suivent le texte : plus de vide sous la mosaïque. */
  .intro-tc .duo__media{
    position:sticky; top:calc(var(--header-h) + 2.5rem); align-self:start;
  }
  /* et elles mordent légèrement vers l'extérieur, comme la bannière */
  .intro-tc .mosaique{margin-right:calc(-1 * var(--gouttiere) / 2)}
}

/* Les formes. L'arche reprend celle de la bannière : le regard reconnaît. */
.intro-tc .mosaique__principale{
  border-radius:999px 999px var(--radius-doux) var(--radius-doux);
  aspect-ratio:4/5.1;
}
.intro-tc .mosaique__carre--1{border-radius:50%; top:13%}
.intro-tc .mosaique__carre--2{
  border-radius:999px 999px var(--radius-doux) var(--radius-doux);
}
/* « rotate » et non « transform » : l'animation de flottement utilise déjà
   transform, les deux propriétés se composent sans se marcher dessus. */
.intro-tc .mosaique__carre--3{rotate:-4.5deg}

@media (max-width:520px){
  .intro-tc .mosaique__carre--3{rotate:none}
  .intro-tc__ouverture{padding-left:1rem}
}

/* ------------------------------------------ Bandeau de photos défilant --
   Défilement continu et lent. La piste est dupliquée par le script pour
   que la boucle soit invisible. */
.ruban{
  overflow:hidden; padding-block:clamp(2rem,4vw,3rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ruban__piste{
  display:flex; gap:clamp(.8rem,1.6vw,1.4rem); width:max-content;
  animation:defiler 70s linear infinite;
}
.ruban:hover .ruban__piste{animation-play-state:paused}
.ruban figure{
  margin:0; flex:none;
  width:clamp(200px,24vw,320px); aspect-ratio:4/3;
  border-radius:var(--radius-doux); overflow:hidden; background:var(--lin-fonce);
}
/* Un tambour est rond : dans une case 4/3 il perd son haut et son bas.
   Cette case carrée lui rend sa forme entière. */
.ruban figure.est-carre{aspect-ratio:1/1; width:clamp(170px,19vw,260px)}
.ruban img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.ruban figure:hover img{transform:scale(1.04)}

/* --------------------------------------------------------------- Blog -- */
.article-carte{display:flex; flex-direction:column; gap:1.1rem; height:100%}
.article-carte__media{aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius-doux); background:var(--lin-fonce)}
.article-carte__media img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.article-carte:hover .article-carte__media img{transform:scale(1.05)}
.article-carte__meta{
  display:flex; gap:1rem; align-items:center; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--encre-tres-doux);
}
.article-carte__meta .cat{color:var(--terre-texte)}
.article-carte h3{font-size:clamp(1.25rem,1.15rem + .5vw,1.55rem); transition:color .35s}
.article-carte:hover h3{color:var(--terre)}
.article-carte p{font-size:.95em}

/* --------------------------------------------------------- Formulaire -- */
.form{display:grid; gap:1.4rem}
.form__ligne{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
@media (max-width:640px){.form__ligne{grid-template-columns:1fr}}
.champ{display:flex; flex-direction:column; gap:.55rem}
.champ label{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--encre-doux)}
.champ input,.champ select,.champ textarea{
  font:inherit; font-size:1rem; color:var(--encre);
  background:var(--sable-clair); border:1px solid rgba(44,41,36,.14);
  border-radius:6px; padding:.95rem 1.1rem; width:100%;
  transition:border-color .35s, box-shadow .35s, background .35s;
}
.champ textarea{min-height:170px; resize:vertical; line-height:1.65}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none; border-color:var(--terre); background:#fff;
  box-shadow:0 0 0 4px rgba(176,112,75,.09);
}
.champ--case{flex-direction:row; align-items:flex-start; gap:.85rem}
.champ--case input{width:18px; height:18px; margin-top:.28rem; flex:none; accent-color:var(--terre)}
.champ--case label{text-transform:none; letter-spacing:0; font-size:.86rem; line-height:1.6}

/* Bloc contact latéral */
.contact-info{display:grid; gap:1.9rem}
.contact-info__bloc{display:flex; gap:1.1rem; align-items:flex-start}
.contact-info__ico{
  flex:none; width:42px; height:42px; border-radius:50%;
  background:var(--lin); color:var(--terre);
  display:grid; place-items:center;
}
.contact-info__ico svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.3}
.contact-info h4{margin-bottom:.3rem}
.contact-info a{color:var(--terre-texte); transition:color .3s}
.contact-info a:hover{color:var(--terre-fonce)}

/* ------------------------------------------------------------- Bandeau -- */
.bandeau-cta{position:relative; overflow:hidden; isolation:isolate}
.bandeau-cta img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.bandeau-cta::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(28,25,21,.86), rgba(28,25,21,.55))}
.bandeau-cta h2{color:#fff}
.bandeau-cta p{color:rgba(255,255,255,.85); margin-top:1.4rem}
.bandeau-cta .surtitre{color:var(--ocre)}
.bandeau-cta .surtitre::before,.bandeau-cta .surtitre.is-centre::after{background:var(--ocre)}

/* Bande défilante */
.marquee{overflow:hidden; padding-block:1.5rem; border-block:1px solid rgba(44,41,36,.09);
  background:var(--sable-clair); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__piste{display:flex; gap:3.5rem; width:max-content; animation:defiler 42s linear infinite}
.marquee:hover .marquee__piste{animation-play-state:paused}
.marquee span{
  font-family:var(--serif); font-size:clamp(1.15rem,1rem + .7vw,1.7rem); color:var(--encre-doux);
  display:flex; align-items:center; gap:3.5rem; white-space:nowrap;
}
.marquee span::after{content:"\2726"; font-size:.6em; color:var(--terre)}
@keyframes defiler{to{transform:translateX(-50%)}}

/* ------------------------------------------------ Barre d'action fixe --
   Présente en bas de toutes les pages, sur tous les écrans. Le téléphone
   et le formulaire sont les deux seules actions qui comptent vraiment :
   on les garde à portée de pouce en permanence. */
.barre-action{
  position:fixed; inset:auto 0 0 0; z-index:90;
  background:rgba(252,250,245,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(44,41,36,.1);
  box-shadow:0 -2px 24px rgba(44,41,36,.07);
  padding-bottom:env(safe-area-inset-bottom);   /* encoche des iPhone */
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.barre-action__inner{
  max-width:var(--max); margin-inline:auto;
  padding:.85rem var(--gouttiere);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.barre-action__texte{
  margin:0; font-size:.95rem; color:var(--encre-doux); line-height:1.4;
}
.barre-action__texte b{color:var(--encre); font-weight:500}
.barre-action__boutons{display:flex; gap:.7rem; flex:none}
.barre-action .btn{padding:.85rem 1.7rem; font-size:.74rem}

/* Le menu mobile passe par-dessus : on efface la barre pendant son ouverture. */
body.est-bloque .barre-action{transform:translateY(110%)}

/* La barre recouvre le bas de page : on réserve la place correspondante. */
body{padding-bottom:var(--barre-h)}

@media (max-width:760px){
  .barre-action__texte{display:none}
  .barre-action__inner{padding:.7rem .8rem; gap:.6rem}
  .barre-action__boutons{flex:1; gap:.6rem}
  .barre-action .btn{flex:1; justify-content:center; padding:.95rem .8rem; font-size:.72rem}
  :root{--barre-h:86px}
}
@media print{ .barre-action{display:none} body{padding-bottom:0} }

/* ----------------------------------------------- Retour en haut de page --
   Une pousse qui grandit. Le pictogramme doit se comprendre sans hésiter :
   la tige file vers le haut et se termine par un chevron, qui est à la fois
   le bourgeon de la plante et une flèche « monter ». Et dès qu'il y a la
   place, le libellé « Haut de page » est écrit en toutes lettres — un joli
   dessin qu'il faut deviner reste un mauvais bouton.

   C'est un vrai lien vers #haut, pas un bouton JavaScript : il fonctionne
   même si le script ne se charge pas, le défilement doux étant déjà porté
   par « scroll-behavior » sur <html>. Le script ne sert qu'à le faire
   apparaître une fois la bannière dépassée. */
.remonter{
  position:fixed; z-index:85;
  right:var(--gouttiere); bottom:calc(var(--barre-h) + 1rem);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem 1.05rem .5rem .5rem;
  background:rgba(252,250,245,.95);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(176,112,75,.28); border-radius:999px;
  color:var(--terre-texte); text-decoration:none;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 6px 22px rgba(44,41,36,.10);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(14px);
  transition:opacity .45s, transform .45s cubic-bezier(.22,.61,.36,1),
             visibility .45s, border-color .35s, box-shadow .35s;
}
/* La règle qui MONTRE est plus spécifique que celle qui cache : c'est le
   sens sûr. L'inverse ferait un bouton invisible en permanence. */
.remonter.est-visible{opacity:1; visibility:visible; pointer-events:auto; transform:none}
.remonter:hover,.remonter:focus-visible{
  border-color:var(--terre); box-shadow:0 10px 28px rgba(44,41,36,.15);
}
.remonter__pousse{
  width:34px; height:34px; flex:none; border-radius:50%;
  display:grid; place-items:center; background:rgba(139,154,124,.16);
}
.remonter svg{width:23px; height:23px; overflow:visible}
.pousse__tige,.pousse__pointe{
  fill:none; stroke:var(--terre); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.pousse__feuille{
  fill:var(--sauge); transform-origin:12px 15.6px;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
/* Au survol, la plante pousse : c'est ce geste-là qui dit « ça remonte ». */
.remonter:hover .pousse__pointe,
.remonter:focus-visible .pousse__pointe{transform:translateY(-2.5px)}
.remonter:hover .pousse__feuille,
.remonter:focus-visible .pousse__feuille{transform:scale(1.12)}
.remonter__texte{white-space:nowrap}

/* Le menu mobile passe par-dessus tout : le bouton s'efface avec la barre. */
body.est-bloque .remonter{opacity:0; pointer-events:none; transform:translateY(14px)}

@media (max-width:760px){
  .remonter{padding:.45rem .95rem .45rem .45rem; gap:.5rem; font-size:.66rem}
  .remonter__suite{display:none}
}
@media (prefers-reduced-motion:reduce){
  .remonter,.pousse__tige,.pousse__pointe,.pousse__feuille{transition:none}
}
@media print{ .remonter{display:none} }

/* Signature du concepteur, dans le bas de page */
.pied__signature a{color:rgba(239,230,215,.9); border-bottom:1px solid rgba(239,230,215,.3)}
.pied__signature a:hover{color:var(--sable-clair); border-bottom-color:var(--sable-clair)}

/* Mention légale glissée dans un texte : elle doit être lisible et honnête,
   sans casser l élan de la lecture. D où le petit corps et le filet, plutôt
   qu un encadré qui arrêterait l œil. */
.mention-discrete{
  margin-top:2.2rem; padding-top:1.2rem;
  border-top:1px solid rgba(176,112,75,.2);
  font-size:.86rem; color:var(--encre-tres-doux); font-style:italic;
}

/* ------------------------------------------ Pages de soins : le détail --
   Les deux soins détaillés étaient deux murs de texte identiques, sans une
   seule image sur 3 500 px. Trois corrections :
   1. chacun passe en deux colonnes, texte + photo ;
   2. la photo accompagne la lecture (sticky) au lieu de rester en haut ;
   3. le second bloc est en MIROIR du premier — l'œil ne relit pas deux fois
      la même page. */
.soin-detail .duo--texte-large{align-items:start}
.soin-detail h3{margin-bottom:.9rem}
.soin-detail p + p{margin-top:1.1em}

@media (min-width:861px){
  /* 1.25fr donnait une colonne de 578 px : le texte s allongeait et la page
     gagnait 500 px en hauteur. 1.7fr rend 655 px, soit environ 75 signes par
     ligne — dans la zone de confort, sans rallonger la page. */
  .soin-detail .duo--texte-large{grid-template-columns:1.7fr 1fr}
  .soin-detail .duo__media{
    position:sticky; top:calc(var(--header-h) + 2.5rem); align-self:start;
  }
  /* Le miroir : la photo passe à gauche, le texte à droite.
     ATTENTION — « order » change la CASE occupée, pas la largeur : sans
     inverser aussi le gabarit de colonnes, la photo hérite des 655 px et le
     texte des 385 px. La section passait alors de 1 630 à 2 626 px de haut. */
  .soin-detail--miroir .duo--texte-large{grid-template-columns:1fr 1.7fr}
  .soin-detail--miroir .duo__media{order:-1}
}

/* La fiche pratique : durée et tarifs, au moment où la question se pose. */
.fiche-soin{
  margin-top:clamp(2rem,4vw,2.8rem);
  padding:clamp(1.3rem,2.6vw,1.9rem);
  background:var(--sable-clair);
  border:1px solid rgba(176,112,75,.22);
  border-radius:var(--radius-doux);
}
.section--sable .fiche-soin{background:var(--blanc)}
.fiche-soin h4{margin-bottom:1.1rem}
.fiche-soin p{margin-top:1rem; font-size:.92em; color:var(--encre-tres-doux)}

/* Citation courte posée dans le fil du texte : ni bloc isolé, ni paragraphe
   ordinaire. Le filet à gauche fait le travail de la guillemet. */
.citation-ligne{
  margin:1.8rem 0 0; padding-left:clamp(1rem,2.2vw,1.6rem);
  border-left:2px solid rgba(176,112,75,.35);
  font-family:var(--serif); font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);
  line-height:1.5; color:var(--encre); font-style:italic;
}
.citation-ligne cite{
  display:block; margin-top:.9rem;
  font-family:var(--sans); font-style:normal;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--terre-texte);
}

/* --------------------------------------------------------------- Footer -- */
.pied{background:var(--encre); color:rgba(239,230,215,.66); padding-block:clamp(3.5rem,7vw,5.5rem) 0}
.pied h4{color:var(--sable-clair); margin-bottom:1.4rem; font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; font-weight:400}
.pied__grille{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:3.5rem;
}
@media (max-width:900px){.pied__grille{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pied__grille{grid-template-columns:1fr}}
.pied .logo__nom{color:var(--sable-clair)}
.pied .logo__nom b{color:var(--ocre)}
.pied .logo__bl{color:rgba(239,230,215,.42)}
.pied__intro{margin-top:1.6rem; max-width:34ch; font-size:.95em; line-height:1.8}
.pied li{margin-bottom:.7rem}
.pied a{transition:color .3s}
.pied a:hover{color:var(--ocre)}
.pied__bas{
  border-top:1px solid rgba(239,230,215,.13); padding-block:1.8rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-size:.78rem;
}
.pied__reseaux{display:flex; gap:.8rem; margin-top:1.8rem}
.pied__reseaux a{
  width:40px; height:40px; border:1px solid rgba(239,230,215,.2); border-radius:50%;
  display:grid; place-items:center; transition:background .4s, border-color .4s, transform .4s;
}
.pied__reseaux a:hover{background:var(--terre); border-color:var(--terre); transform:translateY(-3px)}
.pied__reseaux svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.3}

/* ------------------------------------------------------------ Animations --
   L'état masqué s'exprime en « :not(.est-visible) ». Dès que le script pose la
   classe, la règle cesse tout simplement de s'appliquer et l'élément revient à
   son état naturel : aucune règle concurrente, donc aucun conflit de
   spécificité possible. Une règle « masquer » qui l'emporterait sur une règle
   « révéler » rendrait tout le site invisible — c'est arrivé. */
[data-anim]{
  transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--retard,0s);
}
html.js [data-anim]:not(.est-visible){opacity:0; will-change:transform,opacity}
html.js [data-anim="monte"]:not(.est-visible){transform:translateY(34px)}
html.js [data-anim="gauche"]:not(.est-visible){transform:translateX(-38px)}
html.js [data-anim="droite"]:not(.est-visible){transform:translateX(38px)}
html.js [data-anim="zoom"]:not(.est-visible){transform:scale(.94)}

/* Révélation d'image par volet */
.reveal-img{position:relative; overflow:hidden}
.reveal-img::after{
  content:""; position:absolute; inset:0; background:var(--lin); z-index:2;
  transform-origin:bottom; transform:scaleY(0);
  transition:transform 1.15s cubic-bezier(.76,0,.24,1); transition-delay:var(--retard,0s);
}
html.js .reveal-img:not(.est-visible)::after{transform:scaleY(1)}
.reveal-img img{transition:transform 1.6s cubic-bezier(.22,.61,.36,1); transition-delay:var(--retard,0s)}
html.js .reveal-img:not(.est-visible) img{transform:scale(1.14)}

/* Révélation de texte mot à mot */
.mot{display:inline-block; transition:opacity .8s ease, transform .9s cubic-bezier(.22,.61,.36,1)}
html.js :not(.est-visible) > .mot{opacity:0; transform:translateY(.5em) rotate(2deg)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-anim]{opacity:1!important; transform:none!important}
  .reveal-img::after{transform:scaleY(0)}
  .reveal-img img{transform:none}
  .mot{opacity:1; transform:none}
  /* Ni flottement, ni défilement pour qui a demandé moins d'animations. */
  .mosaique__carre{animation:none}
  .ruban__piste,.marquee__piste{animation:none}
  .ruban{overflow-x:auto}
}

/* --------------------------------------------------------------- Divers -- */
.saut-contenu{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--terre-fonce); color:#fff; padding:.9rem 1.5rem; border-radius:0 0 6px 0;
}
.saut-contenu:focus{left:0}
.puces{display:grid; gap:.9rem}
.puces li{position:relative; padding-left:1.75rem; font-size:.98em}
.puces li::before{
  content:""; position:absolute; left:0; top:.65em; width:8px; height:8px;
  border-radius:50%; border:1px solid var(--terre);
}
.section--nuit .puces li::before,.section--terre .puces li::before{border-color:var(--ocre)}
.note{
  padding:1.5rem 1.7rem; background:var(--lin); border-left:2px solid var(--terre);
  border-radius:0 var(--radius-doux) var(--radius-doux) 0; font-size:.96em;
}
.section--nuit .note{background:rgba(255,255,255,.06); border-left-color:var(--ocre)}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ------------------------------------------- Contenu rédigé dans WordPress --
   Tout ce qu'Edith écrit depuis l'éditeur atterrit dans .tec-article.
   Sans ces règles, ses articles et ses pages seraient sans mise en forme. */
.tec-article > *:first-child{margin-top:0}
.tec-article h2{
  font-size:clamp(1.6rem,1.3rem + 1.3vw,2.35rem);
  margin:2.8rem 0 1.1rem; line-height:1.2;
}
.tec-article h3{
  font-size:clamp(1.25rem,1.15rem + .6vw,1.6rem);
  margin:2.2rem 0 .9rem;
}
.tec-article h4{margin:1.9rem 0 .7rem}
.tec-article p{margin:0 0 1.4em}
.tec-article a{
  color:var(--terre-texte);
  background-image:linear-gradient(var(--terre-texte),var(--terre-texte));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .4s cubic-bezier(.22,.61,.36,1);
}
.tec-article a:hover{background-size:0% 1px}
.tec-article ul,.tec-article ol{margin:0 0 1.6em; padding-left:0; display:grid; gap:.75rem}
.tec-article ol{counter-reset:tec}
.tec-article li{position:relative; padding-left:1.8rem}
.tec-article ul > li::before{
  content:""; position:absolute; left:0; top:.65em; width:8px; height:8px;
  border-radius:50%; border:1px solid var(--terre);
}
.tec-article ol > li{counter-increment:tec}
.tec-article ol > li::before{
  content:counter(tec) "."; position:absolute; left:0; top:0;
  font-family:var(--serif); color:var(--terre); font-size:1.05em;
}
.tec-article blockquote{
  margin:2.4rem 0; padding:.3rem 0 .3rem 1.8rem;
  border-left:2px solid var(--terre);
  font-family:var(--serif); font-size:clamp(1.2rem,1.1rem + .55vw,1.6rem);
  line-height:1.5; color:var(--encre); font-style:italic;
}
.tec-article blockquote p:last-child{margin-bottom:0}
.tec-article blockquote cite{
  display:block; font-family:var(--sans); font-style:normal; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--terre); margin-top:1.2rem;
}
.tec-article img,.tec-article .wp-block-image img{border-radius:var(--radius-doux)}
.tec-article figure{margin:2.4rem 0}
.tec-article figcaption,.tec-article .wp-element-caption{
  margin-top:.9rem; font-size:.85em; color:var(--encre-tres-doux); text-align:center;
}
.tec-article hr,.tec-article .wp-block-separator{
  border:0; height:1px; background:rgba(44,41,36,.14); margin:3rem 0;
}
.tec-article table{
  width:100%; border-collapse:collapse; margin:2rem 0; font-size:.95em;
  display:block; overflow-x:auto;
}
.tec-article th,.tec-article td{
  padding:.85rem 1rem; text-align:left; border-bottom:1px solid rgba(44,41,36,.1);
}
.tec-article th{font-weight:500; color:var(--encre)}
.tec-article code{
  background:var(--lin); padding:.15em .45em; border-radius:4px; font-size:.9em;
}
.tec-article .alignleft{float:left; margin:.4rem 2rem 1.4rem 0; max-width:50%}
.tec-article .alignright{float:right; margin:.4rem 0 1.4rem 2rem; max-width:50%}
.tec-article .aligncenter{margin-inline:auto}
.tec-article .wp-block-button__link{
  display:inline-flex; align-items:center; background:var(--terre); color:var(--sable-clair);
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  padding:1.05rem 2.1rem; border-radius:100px; background-image:none;
  transition:background .4s, transform .3s;
}
.tec-article .wp-block-button__link:hover{background:var(--terre-fonce); transform:translateY(-2px)}
@media (max-width:640px){
  .tec-article .alignleft,.tec-article .alignright{float:none; margin-inline:0; max-width:100%}
}

/* Pagination du journal */
.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 1rem; border-radius:100px;
  font-size:.85rem; color:var(--encre-doux);
  border:1px solid rgba(44,41,36,.16); transition:all .35s ease;
}
.page-numbers:hover{border-color:var(--terre); color:var(--terre)}
.page-numbers.current{background:var(--terre); border-color:var(--terre); color:var(--sable-clair)}
.page-numbers.dots{border-color:transparent}

/* ----------------------------------------------------- Confort tactile --
   Sur écran tactile, tout ce qui se clique doit faire au moins 44 px de haut :
   c'est la taille d'un doigt, et Google en tient compte pour le référencement
   mobile. On agrandit la zone cliquable sans changer la taille du texte. */
@media (pointer:coarse), (max-width:1080px){
  .lien-souligne{min-height:44px; align-items:center; padding-block:.6rem .55rem}
  .menu-mobile__contact a{min-height:44px; display:flex; align-items:center}
  .logo{padding-block:.3rem}
  .article-carte__meta{gap:.9rem}
  .nav a{padding-block:.7rem}
}

/* ---- Section « Comprendre » de la page Soins -------------------------- */
/* Les quatre traditions sont des jalons de lecture, pas des cartes : un
   filet au-dessus de chaque mot suffit a les aligner, sans fabriquer quatre
   boites de plus dans une section deja dense en texte. */
.origines{
  list-style:none; display:grid; gap:1.3rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:clamp(2.2rem,4.5vw,3.2rem) 0;
}
.origines li{padding-top:.85rem; border-top:1px solid rgba(176,112,75,.28)}
.origines b{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:1.14rem; color:var(--terre-texte);
}
.origines span{display:block; margin-top:.4rem; font-size:.88rem; color:var(--encre-doux); line-height:1.55}

/* L'encart : une respiration au milieu du recit. Le lin se detache du sable
   de la section sans introduire une couleur de plus dans la palette. */
.encart-doux{
  margin:clamp(2rem,4vw,2.8rem) 0; padding:clamp(1.6rem,3.5vw,2.4rem);
  background:var(--lin); border-radius:var(--radius-doux);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.12rem,1.02rem + .45vw,1.38rem);
  line-height:1.55; color:var(--encre); text-align:center;
}
.section--lin .encart-doux,.section--clair .encart-doux{background:var(--sable)}

/* « Soins energetiques » rallonge la baseline du logo de treize caracteres :
   sur un telephone elle passerait sous le burger. On resserre l'interlettrage
   plutot que de la laisser se casser en deux lignes sous le nom. */
@media (max-width:560px){
  .logo__bl{font-size:.5rem; letter-spacing:.17em}
}

/* Un capteur de rêves pend : dans une case 4/3 il n'en reste que la branche.
   Cette case 4/5 lui rend sa hauteur. La largeur est calée pour que la case
   fasse 260 px de haut, comme les cases carrées : la bande ne bouge pas. */
.ruban figure.est-portrait{aspect-ratio:4/5; width:clamp(136px,15.2vw,208px)}