/* ==========================================================================
   LES SOINS EN COULEURS BY LAURENCE
   PREMIUM V5 — couche de raffinement (09/08/2026)
   --------------------------------------------------------------------------
   Se charge APRÈS styles.css et premium.css.
   Objectif : une seule matière de papier, une typographie tenue,
   des filets plutôt que des ombres, et un accueil qui respire.
   Pour revenir en arrière : supprimer la ligne <link ... premium-v5.css>.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. UNIFICATION DE LA PALETTE
   Le site portait deux beiges différents (#F0E8DA hérité et #F7F4EE premium),
   ce qui donnait des raccords salis d'une section à l'autre.
   On aligne tout sur une seule matière : un papier ivoire légèrement froid.
   -------------------------------------------------------------------------- */
:root{
  /* Papier unique */
  --sable:#F6F2EA;
  --p-sable:#F6F2EA;
  --p-albatre:#FCFAF6;
  --creme:#FBF8F2;

  /* Filets et bordures : plus clairs, plus fins */
  --bord:#E6DFD1;
  --lin:#DED5C4;
  --p-brume:#E6DFD1;

  /* Verts */
  --pin:#1E3D34;
  --pin-fonce:#14302A;
  --p-encre:#0F251C;

  /* Or : légèrement désaturé, il cesse de « briller » et devient un métal */
  --or:#B08F4E;
  --or-pale:#DCC79A;
  --p-or:#B08F4E;
  --p-or-pale:#E7DBC1;

  /* Encres */
  --grege:#7A7263;
  --p-terre:#7A7263;
  --p-texte:#242420;

  /* Rythme vertical : plus d'air entre les sections */
  --p-section:clamp(84px,11vw,148px);
}

/* --------------------------------------------------------------------------
   2. MICRO-TYPOGRAPHIE
   C'est ici que se joue 80 % de la sensation « haut de gamme » :
   des titres qui ne se coupent pas n'importe où, des veuves évitées,
   des chiffres alignés, un rendu optique soigné.
   -------------------------------------------------------------------------- */
html{ -webkit-text-size-adjust:100%; }

body{
  font-variant-ligatures:common-ligatures contextual;
  font-kerning:normal;
  color:var(--p-texte);
  background:var(--sable);
}

h1,h2,h3,.sec-titre,.titre-lecteur,blockquote{
  text-wrap:balance;              /* le titre ne laisse plus un mot seul  */
  font-optical-sizing:auto;
}
p,li,.pitch,.sec-sous,.sec-intro{
  text-wrap:pretty;               /* évite les lignes orphelines           */
  hyphens:manual;
}

/* Chiffres : prix et durées en chiffres elzéviriens dans les titres serif,
   en chiffres tabulaires partout où l'on compare. */
.infos,.tarif,.prix{
  font-family:'Cormorant Garamond',Garamond,'Times New Roman',serif;
  font-size:1.05rem;
  font-variant-numeric:oldstyle-nums;
  letter-spacing:.02em;
}

/* Guillemets français suspendus */
blockquote{ hanging-punctuation:first last; }

/* Le lien courant du texte : soulignement fin, décollé, doré au survol */
.wrap p a:not(.btn):not(.lien-fin){
  text-decoration:underline;
  text-decoration-thickness:.5px;
  text-underline-offset:.22em;
  text-decoration-color:var(--or-pale);
  transition:color .25s,text-decoration-color .25s;
}
.wrap p a:not(.btn):not(.lien-fin):hover{
  color:var(--or);
  text-decoration-color:var(--or);
}

/* --------------------------------------------------------------------------
   3. NAVIGATION — elle se resserre au défilement
   -------------------------------------------------------------------------- */
nav{
  background:rgba(251,248,242,.86);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
nav.nav-defilee{
  background:rgba(251,248,242,.96);
  border-bottom-color:rgba(176,143,78,.28);
  box-shadow:0 1px 24px rgba(30,61,52,.06);
}
nav .nav-in{ transition:padding .35s ease; }
nav.nav-defilee .nav-in{ padding-top:6px;padding-bottom:6px; }
nav.nav-defilee .logo-img{ transform:scale(.88); transition:transform .35s ease; }

nav .menu a{
  position:relative;
}
/* Souligné qui se déploie depuis la gauche — sobre, sans changement de couleur */
nav .menu > a::after,
nav .menu .deroulant-titre::after{
  content:"";position:absolute;left:0;bottom:2px;
  width:100%;height:1px;background:var(--or);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
nav .menu > a:hover::after,
nav .menu .deroulant:hover .deroulant-titre::after,
nav .menu > a.actif::after{ transform:scaleX(1); }
nav .menu .btn-menu-mobile::after{ display:none; }

/* --------------------------------------------------------------------------
   4. L'ACCUEIL — le héros
   Une seule idée par écran : le nom de la Maison, la promesse, le visage.
   -------------------------------------------------------------------------- */
header.hero-maison{
  position:relative;
  padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,116px);
  background:
    radial-gradient(1100px 620px at 88% -18%,rgba(176,143,78,.13),transparent 62%),
    radial-gradient(760px 520px at -10% 110%,rgba(30,61,52,.06),transparent 60%),
    linear-gradient(180deg,#FCFAF5 0%,#F6F1E7 100%);
}
/* Grain de papier — très léger, il retire l'effet « aplat numérique » */
header.hero-maison::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.045'/%3E%3C/svg%3E");
}
header.hero-maison .wrap{ position:relative;z-index:1; }

@media(min-width:960px){
  header.hero-maison .duo-m{ grid-template-columns:1.08fr .92fr; gap:clamp(48px,6vw,84px); }
}

header.hero-maison .eyebrow{
  font-size:.66rem;letter-spacing:.34em;color:var(--or);
  margin:0 0 22px;display:flex;align-items:center;gap:14px;
}
header.hero-maison .eyebrow::after{
  content:"";flex:1;height:1px;max-width:120px;
  background:linear-gradient(90deg,var(--or-pale),transparent);
}

header.hero-maison h1{
  font-size:clamp(2.7rem,6vw,4.6rem);
  font-weight:400;line-height:1.02;letter-spacing:-.018em;
  max-width:15ch;margin:0 0 6px;color:var(--pin);
}
header.hero-maison h1 em{
  display:block;font-style:italic;font-weight:400;color:var(--or);
}

header.hero-maison .arc{ max-width:132px;height:1.5px;margin:26px 0 26px;opacity:.8; }

header.hero-maison .pitch{
  max-width:46ch;font-size:1.06rem;line-height:1.8;color:#4A473E;
  margin-bottom:36px;
}

header.hero-maison .hero-actions{ gap:12px 16px;margin-bottom:38px; }

/* Réassurance : une ligne de capitales séparées par des filets verticaux */
header.hero-maison .preuves{
  display:flex;flex-wrap:wrap;align-items:center;gap:0;
  padding-top:22px;border-top:1px solid var(--bord);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:.66rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--grege);
}
header.hero-maison .preuves span{
  padding:2px 20px;border-right:1px solid var(--bord);
}
header.hero-maison .preuves span:first-child{ padding-left:0; }
header.hero-maison .preuves span:last-child{ border-right:0;padding-right:0; }
header.hero-maison .preuves span::before{ content:none; }

/* Le portrait : double filet doré, arche haute, ombre portée quasi nulle */
.cadre-arche{ position:relative;justify-self:center;max-width:440px;width:100%;margin:0; }
.cadre-arche img{
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:220px 220px 8px 8px;
  box-shadow:0 26px 60px -34px rgba(20,48,42,.45);
}
.cadre-arche::before{
  content:"";position:absolute;inset:-14px;
  border:1px solid rgba(176,143,78,.42);
  border-radius:236px 236px 12px 12px;pointer-events:none;
}
.cadre-arche::after{
  content:"";position:absolute;inset:-26px;
  border:1px solid rgba(176,143,78,.16);
  border-radius:250px 250px 14px 14px;pointer-events:none;
}
.cadre-arche figcaption{
  margin-top:30px;text-align:center;color:var(--grege);
  font-family:'Cormorant Garamond',Garamond,'Times New Roman',serif;
  font-style:italic;font-size:1rem;letter-spacing:.01em;
}

/* Invitation à descendre — discrète, disparaît dès qu'on défile */
.descendre{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:'Jost',system-ui,sans-serif;font-size:.6rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--grege);
  text-decoration:none;opacity:.85;transition:opacity .4s ease;
}
.descendre:hover{ opacity:1;color:var(--or); }
.descendre i{
  display:block;width:1px;height:42px;
  background:linear-gradient(180deg,var(--or-pale),transparent);
  animation:filet-descend 2.6s ease-in-out infinite;
}
@keyframes filet-descend{
  0%,100%{ transform:scaleY(.55);transform-origin:top;opacity:.5 }
  50%    { transform:scaleY(1);  transform-origin:top;opacity:1 }
}
html.a-defile .descendre{ opacity:0;pointer-events:none; }
@media(max-width:900px){ .descendre{ display:none } }

/* Séquence d'apparition — une seule fois, au chargement */
@media(prefers-reduced-motion:no-preference){
  header.hero-maison .eyebrow,
  header.hero-maison h1,
  header.hero-maison .arc,
  header.hero-maison .pitch,
  header.hero-maison .hero-actions,
  header.hero-maison .preuves,
  header.hero-maison .cadre-arche{
    animation:levee .95s cubic-bezier(.22,.61,.36,1) both;
  }
  header.hero-maison h1{animation-delay:.06s}
  header.hero-maison .cadre-arche{animation-delay:.14s}
  header.hero-maison .arc{animation-delay:.20s}
  header.hero-maison .pitch{animation-delay:.26s}
  header.hero-maison .hero-actions{animation-delay:.34s}
  header.hero-maison .preuves{animation-delay:.42s}
}
@keyframes levee{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* --------------------------------------------------------------------------
   5. BOUTONS — l'invitation, pas l'injonction
   -------------------------------------------------------------------------- */
.btn{
  border-radius:1px;padding:16px 32px;
  font-size:.76rem;letter-spacing:.18em;
  box-shadow:none;
  transition:background .3s ease,color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.btn:hover{ transform:none;background:var(--pin-fonce);box-shadow:inset 0 -2px 0 var(--or); }
.btn-ghost{
  background:transparent;color:var(--pin);border:1px solid var(--lin);
}
.btn-ghost:hover{
  background:transparent;color:var(--or);border-color:var(--or);
  box-shadow:inset 0 -2px 0 var(--or);
}
.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--or);outline-offset:3px;
}

/* --------------------------------------------------------------------------
   6. BANDE D'AVIS — la preuve, en vert profond
   -------------------------------------------------------------------------- */
section.bande-avis{
  background:var(--p-encre);color:#EDE7D8;
  border-top:0;border-bottom:0;
  padding:clamp(46px,6vw,66px) 0;
}
.bande-avis .bande-etoiles{ color:var(--or-pale);letter-spacing:9px;font-size:.9rem;margin-bottom:16px }
.bande-avis blockquote{
  font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.45;
  color:#F3EEE2;max-width:38ch;margin:0 auto;
}
.bande-avis .bande-source{ color:rgba(237,231,216,.62);margin-top:16px }
.bande-avis .bande-liens{ margin-top:18px;font-size:.78rem;letter-spacing:.12em }
.bande-avis .bande-liens a{ color:var(--or-pale);text-decoration-color:rgba(220,199,154,.5) }
.bande-avis .bande-liens a:hover{ color:#fff }

/* --------------------------------------------------------------------------
   7. MANIFESTE — trois colonnes séparées par des filets, pas par du vide
   -------------------------------------------------------------------------- */
.manifeste{
  background:var(--creme);
  border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);
  padding:clamp(58px,8vw,84px) 0;
}
.manifeste .titre-lecteur{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.manifeste h3{
  font-family:'Jost',system-ui,sans-serif;font-size:.7rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--or);margin-bottom:16px;
}
.manifeste h3::after{ content:"";display:block;width:22px;height:1px;background:var(--or-pale);margin:14px auto 0 }
.manifeste p{ color:#5A564C;font-size:.97rem;line-height:1.75;max-width:32ch;margin:0 auto }
@media(min-width:760px){
  .manifeste .m-grid{ gap:0 }
  .manifeste .m-grid>div{ padding:0 clamp(20px,3vw,40px);border-right:1px solid var(--bord) }
  .manifeste .m-grid>div:last-child{ border-right:0 }
}

/* --------------------------------------------------------------------------
   8. LES CARTES DE RITUELS — filet plutôt qu'ombre, image qui respire
   -------------------------------------------------------------------------- */
.carte{
  border-radius:2px;border:1px solid var(--bord);
  background:var(--p-albatre);
  box-shadow:none;overflow:hidden;
  transition:border-color .4s ease,box-shadow .4s ease,transform .4s ease;
}
.carte:hover{
  border-color:rgba(176,143,78,.5);
  box-shadow:0 22px 48px -30px rgba(20,48,42,.4);
  transform:translateY(-3px);
}
.carte .visuel.photo{ overflow:hidden }
.carte .visuel.photo img{
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.carte:hover .visuel.photo img{ transform:scale(1.045) }
.carte h3{ font-size:1.42rem;line-height:1.2;margin-top:6px }
.carte .rituel-nom{
  font-family:'Jost',system-ui,sans-serif;font-size:.63rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--grege);
}
.carte .infos{
  color:var(--pin);border-top:1px solid var(--bord);
  padding-top:12px;margin-top:14px;
}
.carte>a[href]:last-child{
  font-family:'Jost',system-ui,sans-serif;font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--pin);
  text-decoration:none;border-bottom:1px solid var(--or-pale);padding-bottom:3px;
  transition:color .3s,border-color .3s;
}
.carte>a[href]:last-child:hover{ color:var(--or);border-color:var(--or) }

/* Les deux lignes « conseil » : des lignes de registre, pas des boutons */
.conseil-ligne{
  border:1px solid var(--bord);border-radius:2px;background:var(--p-albatre);
  transition:border-color .35s,background .35s;
}
.conseil-ligne:hover{ border-color:rgba(176,143,78,.5);background:#fff }
.conseil-ligne .cl-t{
  font-family:'Cormorant Garamond',Garamond,serif;font-size:1.22rem;color:var(--pin);
}
.conseil-ligne .cl-d{ color:var(--grege);font-size:.9rem }
.conseil-ligne .cl-f{ color:var(--or) }

/* --------------------------------------------------------------------------
   9. INDEX DES COULEURS — le registre, plus tenu
   -------------------------------------------------------------------------- */
.index-couleurs .registre a{
  border-radius:2px;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease;
}
.index-couleurs .registre a:hover{ transform:translateY(-4px);box-shadow:0 20px 44px -30px rgba(20,48,42,.5) }
.index-couleurs .index-note{
  color:var(--grege);font-size:.8rem;line-height:1.7;
  max-width:70ch;margin:34px auto 0;text-align:center;font-style:italic;
}

/* --------------------------------------------------------------------------
   10. LA PAROLE DE LAURENCE — le silence autour de la phrase
   -------------------------------------------------------------------------- */
.parole{
  background:var(--creme);
  border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);
  padding:clamp(64px,9vw,104px) 0;text-align:center;
}
.parole blockquote{
  font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.4;color:var(--pin);
  max-width:24ch;margin:0 auto;font-style:italic;
}
.parole cite{
  display:block;margin-top:26px;font-style:normal;
  font-family:'Jost',system-ui,sans-serif;font-size:.68rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--grege);
}
.parole .arc{ margin:30px auto 0 }

/* --------------------------------------------------------------------------
   11. FLÂNER — trois portes, en filet
   -------------------------------------------------------------------------- */
.flaner-titre{
  font-family:'Cormorant Garamond',Garamond,serif;font-style:italic;
  font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--pin);text-align:center;
}
.flaner-carte{
  border:1px solid var(--bord);border-radius:2px;background:var(--p-albatre);
  transition:border-color .35s,transform .35s;
}
.flaner-carte:hover{ border-color:rgba(176,143,78,.5);transform:translateY(-3px) }
.flaner-nom{ font-family:'Cormorant Garamond',Garamond,serif;color:var(--pin) }
.flaner-desc{ color:var(--grege) }
.flaner-fleche{ color:var(--or) }

/* --------------------------------------------------------------------------
   12. BANDEAU ENTREPRISES — un carton d'invitation
   -------------------------------------------------------------------------- */
.bandeau-ent .carton{
  background:var(--pin);
  border:1px solid rgba(176,143,78,.34);
  border-radius:2px;
  position:relative;
}
.bandeau-ent .carton::before{
  content:"";position:absolute;inset:9px;border:1px solid rgba(176,143,78,.24);
  border-radius:1px;pointer-events:none;
}
.bandeau-ent .surtitre{ color:var(--or-pale);letter-spacing:.3em }
.bandeau-ent h2{ color:#F5F1E6 }
.bandeau-ent h2 em{ color:var(--or-pale) }
.bandeau-ent p{ color:rgba(240,235,224,.86) }
.bandeau-ent .btn{ background:var(--or);color:#1B2E27 }
.bandeau-ent .btn:hover{ background:var(--or-pale);color:#14302A;box-shadow:none }

/* --------------------------------------------------------------------------
   13. SIGNATURE VIDÉO — plein cadre, légende centrée
   -------------------------------------------------------------------------- */
.signature-legende{
  font-family:'Cormorant Garamond',Garamond,serif;font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.6rem);color:var(--pin);
  text-align:center;margin-top:26px;
}

/* --------------------------------------------------------------------------
   14. « OÙ TROUVER LA MAISON » — la carte de visite
   -------------------------------------------------------------------------- */
.zone{ background:var(--creme);border-top:1px solid var(--bord);padding:clamp(66px,9vw,104px) 0;text-align:center }
.zone .adresse{ font-family:'Cormorant Garamond',Garamond,serif;font-size:1.2rem;color:var(--pin);margin:0 auto 6px }
.zone .tel{
  display:inline-block;margin:6px 0 18px;
  font-family:'Cormorant Garamond',Garamond,serif;font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--pin);text-decoration:none;
  font-variant-numeric:oldstyle-nums;letter-spacing:.04em;
  border-bottom:1px solid var(--or-pale);padding-bottom:4px;
  transition:color .3s,border-color .3s;
}
.zone .tel:hover{ color:var(--or);border-color:var(--or) }
.zone .villes{ margin:26px auto 32px;max-width:760px }
.zone .ville{
  background:transparent;border:1px solid var(--bord);border-radius:1px;
  color:var(--grege);font-family:'Jost',system-ui,sans-serif;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;
}
/* Météo : une note de bas de page, plus un gadget */
.zone .meteo{
  justify-content:center;gap:8px;margin:0 auto 22px;
  font-family:'Cormorant Garamond',Garamond,serif;font-style:italic;
  font-size:.98rem;color:var(--grege);
}
.zone .meteo .ico{ font-size:.9em;opacity:.7;filter:saturate(.7) }

/* --------------------------------------------------------------------------
   15. NEWSLETTER — encadré discret
   -------------------------------------------------------------------------- */
.newsletter{ background:var(--sable);border-top:1px solid var(--bord);padding:clamp(58px,8vw,88px) 0;text-align:center }
.newsletter-titre{
  font-family:'Cormorant Garamond',Garamond,serif;font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--pin);margin:0 auto 10px;
}
.newsletter-sous{ color:var(--grege);max-width:52ch;margin:0 auto 22px }
.newsletter-rgpd{ color:var(--grege);font-size:.78rem;max-width:56ch;margin:16px auto 0 }

/* --------------------------------------------------------------------------
   16. PIED DE PAGE
   -------------------------------------------------------------------------- */
footer{ background:var(--p-encre);color:#E4DECF }
footer a{ color:var(--or-pale);text-decoration:none }
footer a:hover{ color:#fff }
footer .nav-titre{
  font-family:'Jost',system-ui,sans-serif;font-size:.64rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--or);
  padding-bottom:12px;border-bottom:1px solid rgba(176,143,78,.24);margin-bottom:16px;
}
footer address{ font-style:normal;line-height:1.9;color:rgba(228,222,207,.8);font-size:.92rem }
footer .pied-mention{ color:rgba(228,222,207,.55);font-size:.76rem;line-height:1.7 }
footer .pied-copy{ color:rgba(228,222,207,.45);font-size:.74rem }
.pied-spectre{ height:2px;opacity:.55 }

/* --------------------------------------------------------------------------
   17. BOUTON FLOTTANT — il s'efface tant qu'on est dans le héros
   -------------------------------------------------------------------------- */
.reserver-flottant a{
  background:var(--pin);color:#FBF8F2;border-radius:1px;
  letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;
  border:1px solid rgba(176,143,78,.4);
  box-shadow:0 16px 40px -22px rgba(20,48,42,.6);
}
.reserver-flottant a:hover{ background:var(--pin-fonce);box-shadow:inset 0 -2px 0 var(--or) }

/* --------------------------------------------------------------------------
   18. APPARITIONS AU DÉFILEMENT — plus lentes, moins nombreuses
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:no-preference){
  .reveal{ opacity:0;transform:translateY(18px);
           transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1) }
  .reveal.visible{ opacity:1;transform:none }
}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.visible{ opacity:1;transform:none }
  .descendre i{ animation:none }
  header.hero-maison *{ animation:none !important }
}

/* --------------------------------------------------------------------------
   19. MOBILE — l'accueil reste tenu sur un écran de téléphone
   -------------------------------------------------------------------------- */
@media(max-width:760px){
  header.hero-maison{ padding-top:36px;text-align:left }
  header.hero-maison h1{ font-size:clamp(2.3rem,10vw,3rem);max-width:none }
  header.hero-maison .pitch{ font-size:1rem;margin-bottom:28px }
  header.hero-maison .hero-actions{ flex-direction:column;align-items:stretch;gap:10px }
  header.hero-maison .hero-actions .btn{ width:100% }
  header.hero-maison .preuves{ flex-direction:column;align-items:flex-start;gap:10px }
  header.hero-maison .preuves span{ padding:0;border-right:0 }
  .cadre-arche{ max-width:300px;margin:0 auto }
  .cadre-arche::after{ display:none }
  .manifeste .m-grid>div{ border-right:0 }
}

/* ==========================================================================
   20. DONNER ENVIE D'OUVRIR LES PAGES
   Ajout du 9 août 2026 — les quatre portes de la découverte :
   le Journal sur l'accueil, les cartes Flâner en image, les vignettes
   « À lire ensuite », et le rebond en bas des pages de rituel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   20.1 LE JOURNAL SUR L'ACCUEIL
   Un article de tête en grand, trois autres en sommaire : la mise en page
   d'un magazine, qui hiérarchise au lieu d'aligner.
   -------------------------------------------------------------------------- */
.journal-accueil{
  background:var(--sable);
  border-top:1px solid var(--bord);
  padding:clamp(66px,9vw,112px) 0;
}
.journal-tete{ margin-bottom:clamp(34px,4vw,50px) }
.journal-tete .eyebrow{ margin-bottom:14px }
.journal-tete h2{ margin:0 0 10px }
.journal-tete .sec-sous{ color:var(--grege);max-width:56ch;margin:0 }

.journal-grille{ display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:1fr }
@media(min-width:940px){ .journal-grille{ grid-template-columns:1.15fr .85fr;align-items:start } }

/* L'article de tête */
.journal-une{ display:block;text-decoration:none;color:inherit }
.journal-une-photo{
  display:block;overflow:hidden;border-radius:2px;
  border:1px solid var(--bord);background:var(--p-albatre);
}
.journal-une-photo img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.journal-une:hover .journal-une-photo img{ transform:scale(1.04) }
.journal-meta{
  display:block;margin:22px 0 12px;
  font-family:'Jost',system-ui,sans-serif;font-size:.64rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--or);
}
.journal-une h3{
  font-size:clamp(1.6rem,3vw,2.15rem);line-height:1.16;color:var(--pin);
  margin:0 0 14px;transition:color .3s;
}
.journal-une:hover h3{ color:var(--or) }
.journal-chapo{ color:#5A564C;font-size:1rem;line-height:1.75;max-width:52ch;margin:0 0 18px }
.journal-lire{
  display:inline-block;font-family:'Jost',system-ui,sans-serif;
  font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pin);border-bottom:1px solid var(--or-pale);padding-bottom:3px;
  transition:color .3s,border-color .3s;
}
.journal-une:hover .journal-lire{ color:var(--or);border-color:var(--or) }

/* Le sommaire : trois lignes séparées par des filets */
.journal-sommaire{ display:flex;flex-direction:column;border-top:1px solid var(--bord) }
.journal-ligne{
  display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--bord);
  text-decoration:none;color:inherit;
  transition:padding-left .35s cubic-bezier(.22,.61,.36,1);
}
.journal-ligne:hover{ padding-left:10px }
.journal-vignette{ overflow:hidden;border-radius:2px;border:1px solid var(--bord) }
.journal-vignette img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  transition:transform 1s cubic-bezier(.22,.61,.36,1);
}
.journal-ligne:hover .journal-vignette img{ transform:scale(1.07) }
.journal-ligne .journal-meta{ margin:0 0 6px;font-size:.6rem;letter-spacing:.22em }
.journal-ligne h3{
  font-size:1.08rem;line-height:1.3;color:var(--pin);margin:0;
  transition:color .3s;
}
.journal-ligne:hover h3{ color:var(--or) }
.journal-tout{ margin-top:30px;text-align:right }
@media(max-width:939px){ .journal-tout{ text-align:left } }

/* --------------------------------------------------------------------------
   20.2 FLÂNER — les trois portes deviennent des images
   -------------------------------------------------------------------------- */
.flaner-cartes{ display:grid;gap:18px;grid-template-columns:1fr }
@media(min-width:720px){ .flaner-cartes{ grid-template-columns:repeat(3,1fr) } }

.flaner-carte{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:230px;padding:26px;overflow:hidden;
  border:1px solid rgba(176,143,78,.28);border-radius:2px;
  background:var(--p-encre);color:#F2EDE1;text-decoration:none;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),border-color .4s;
}
.flaner-carte:hover{ transform:translateY(-4px);border-color:rgba(176,143,78,.6) }
.flaner-carte img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.flaner-carte:hover img{ transform:scale(1.07) }
.flaner-carte::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,37,28,.06) 0%,rgba(15,37,28,.52) 55%,rgba(15,37,28,.88) 100%);
}
.flaner-carte>span{ position:relative;z-index:1 }
.flaner-nom{
  font-family:'Cormorant Garamond',Garamond,serif;font-size:1.5rem;
  color:#F6F2E6;line-height:1.15;margin-bottom:6px;
}
.flaner-desc{ color:rgba(240,235,224,.78);font-size:.9rem;line-height:1.5 }
.flaner-fleche{
  color:var(--or-pale);margin-top:14px;font-size:.72rem;letter-spacing:.2em;
  transition:transform .35s;display:inline-block;
}
.flaner-carte:hover .flaner-fleche{ transform:translateX(6px) }

/* --------------------------------------------------------------------------
   20.3 « À LIRE ENSUITE » — les cartes reçoivent leur visuel
   Un lien illustré est ouvert bien plus souvent qu'une ligne de texte.
   -------------------------------------------------------------------------- */
.lies-grid{ display:grid;gap:18px;grid-template-columns:1fr }
@media(min-width:720px){ .lies-grid{ grid-template-columns:repeat(3,1fr) } }

.lies-carte{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--bord);border-radius:2px;background:var(--p-albatre);
  text-decoration:none;color:inherit;padding:0;
  transition:border-color .35s,transform .35s,box-shadow .35s;
}
.lies-carte:hover{
  border-color:rgba(176,143,78,.5);transform:translateY(-3px);
  box-shadow:0 20px 44px -32px rgba(20,48,42,.45);
}
.lies-vignette{ display:block;overflow:hidden;background:var(--sable) }
.lies-vignette img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.lies-carte:hover .lies-vignette img{ transform:scale(1.05) }
.lies-carte .etiq{
  font-family:'Jost',system-ui,sans-serif;font-size:.6rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--or);
  padding:18px 20px 8px;
}
.lies-carte .titre{
  font-family:'Cormorant Garamond',Garamond,serif;font-size:1.18rem;line-height:1.28;
  color:var(--pin);padding:0 20px;flex:1;transition:color .3s;
}
.lies-carte:hover .titre{ color:var(--or) }
.lies-carte .fleche{
  font-family:'Jost',system-ui,sans-serif;font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grege);
  padding:14px 20px 20px;transition:color .3s,transform .35s;
}
.lies-carte:hover .fleche{ color:var(--or);transform:translateX(4px) }
.lies h2{
  font-size:clamp(1.4rem,2.6vw,1.8rem);margin-bottom:20px;
  padding-bottom:14px;border-bottom:1px solid var(--bord);
}

/* --------------------------------------------------------------------------
   20.4 REBOND EN BAS DES PAGES DE RITUEL
   Une page qui ne propose rien après elle est une page où l'on s'arrête.
   -------------------------------------------------------------------------- */
.rebond{
  margin:clamp(44px,6vw,68px) 0 0;
  padding:clamp(30px,4vw,42px);
  background:var(--creme);
  border:1px solid var(--bord);border-radius:2px;
}
.rebond .eyebrow{ margin-bottom:12px }
.rebond h2{
  font-size:clamp(1.4rem,2.6vw,1.85rem);margin:0 0 8px;
}
.rebond>p{ color:var(--grege);margin:0 0 24px;max-width:56ch }
.rebond-liens{ display:grid;gap:14px;grid-template-columns:1fr }
@media(min-width:720px){ .rebond-liens{ grid-template-columns:repeat(2,1fr) } }
.rebond-lien{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:18px 20px;background:var(--p-albatre);
  border:1px solid var(--bord);border-radius:2px;
  text-decoration:none;color:inherit;
  transition:border-color .35s,background .35s,transform .35s;
}
.rebond-lien:hover{ border-color:rgba(176,143,78,.5);background:#fff;transform:translateY(-2px) }
.rebond-lien .rl-etiq{
  display:block;font-family:'Jost',system-ui,sans-serif;font-size:.58rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--or);margin-bottom:6px;
}
.rebond-lien .rl-titre{
  display:block;font-family:'Cormorant Garamond',Garamond,serif;
  font-size:1.14rem;line-height:1.3;color:var(--pin);transition:color .3s;
}
.rebond-lien:hover .rl-titre{ color:var(--or) }
.rebond-lien .rl-fleche{ color:var(--or);font-size:1.1rem;transition:transform .35s }
.rebond-lien:hover .rl-fleche{ transform:translateX(5px) }

/* --------------------------------------------------------------------------
   21. FILET DE SÉCURITÉ
   Les blocs « .reveal » sont masqués tant qu'un script ne les révèle pas.
   Si le JavaScript est désactivé ou échoue, tout doit rester visible :
   un contenu invisible est pire qu'un contenu sans animation.
   -------------------------------------------------------------------------- */
html:not(.js) .reveal{ opacity:1 !important;transform:none !important }

/* ==========================================================================
   22. LE RAFFINEMENT — états visuels pilotés par raffinement.js
   Rien ici ne masque un contenu de façon durable : chaque état de départ
   est posé par le script, qui garantit son propre retour à la normale.
   ========================================================================== */

/* --------------------------------------------------------------------------
   22.1 L'ARRIVÉE SUR LA PAGE — en CSS pur, volontairement
   Un voile couleur papier se retire au chargement. Aucun JavaScript n'est
   impliqué : l'animation se termine seule, elle ne peut donc pas rester
   bloquée et laisser le visiteur devant un écran vide.
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:no-preference){
  html.js body::after{
    content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
    background:var(--sable);
    animation:voile-se-leve .62s cubic-bezier(.22,.61,.36,1) forwards;
  }
}
@keyframes voile-se-leve{
  0%  { opacity:1;visibility:visible }
  99% { opacity:0;visibility:visible }
  100%{ opacity:0;visibility:hidden }
}
/* À l'impression, aucun voile : ni celui de l'arrivée, ni celui du départ. */
@media print{
  html.js body::after{ display:none }
  .voile-sortie{ display:none }
  .j-mot{ transform:none }
  .j-devoile{ clip-path:none }
  .j-cascade{ opacity:1;translate:none }
}

/* Le départ vers une autre page — créé et retiré par raffinement.js */
.voile-sortie{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:var(--sable);opacity:0;
  transition:opacity .36s cubic-bezier(.4,0,.2,1);
}
.voile-sortie.pose{ opacity:1 }

/* --------------------------------------------------------------------------
   22.2 LES TITRES QUI SE LÈVENT
   Chaque mot vit dans un masque de la hauteur d'une ligne. Le débord bas
   compensé (padding + marge négative) évite de rogner les jambages des
   lettres g, j, p, q et y.
   -------------------------------------------------------------------------- */
.j-masque{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em;
}
.j-mot{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .82s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.j-titre.j-leve .j-mot{ transform:none }

/* --------------------------------------------------------------------------
   22.3 LES IMAGES QUI SE DÉVOILENT
   Le rideau se retire du haut vers le bas pendant que l'image revient de
   son léger agrandissement — deux mouvements de vitesses différentes, ce
   qui donne la sensation de profondeur.
   -------------------------------------------------------------------------- */
.j-devoile{ clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.22,.61,.36,1) }
.j-devoile.j-vu{ clip-path:inset(0 0 0 0) }
/* On agit sur la propriété « scale » et non sur « transform » : les deux se
   composent, si bien que le zoom au survol continue de fonctionner sans
   qu'aucune règle n'ait à se battre avec l'autre. */
.j-devoile img{ scale:1.09;transition:scale 1.5s cubic-bezier(.22,.61,.36,1) }
.j-devoile.j-vu img{ scale:none }

/* --------------------------------------------------------------------------
   22.4 LES GRILLES EN CASCADE
   -------------------------------------------------------------------------- */
/* Même principe : « translate » plutôt que « transform », pour que le
   soulèvement des cartes au survol reste intact. */
.j-cascade{
  opacity:0;translate:0 22px;
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),
             translate .85s cubic-bezier(.22,.61,.36,1);
}
.j-cascade.j-monte{ opacity:1;translate:none }

/* --------------------------------------------------------------------------
   22.5 LA PARALLAXE DU PORTRAIT
   -------------------------------------------------------------------------- */
.cadre-arche img{ will-change:transform }

/* --------------------------------------------------------------------------
   22.6 MOUVEMENT RÉDUIT — tout est immédiatement en place
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .j-mot{ transform:none;transition:none }
  .j-devoile,.j-devoile.j-vu{ clip-path:none;transition:none }
  .j-devoile img{ scale:none;transition:none }
  .j-cascade{ opacity:1;translate:none;transition:none }
  .voile-sortie{ display:none }
  .cadre-arche img{ transform:none !important }
}

/* 17/09/2026 — H1 d'accueil : complément local VISIBLE sous l'accroche de marque */
header.hero-maison h1 .h1-local{display:block;margin-top:14px;font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(.78rem,1.6vw,.95rem);font-weight:500;font-style:normal;letter-spacing:.18em;text-transform:uppercase;
  line-height:1.5;color:var(--or,#B08F4E);max-width:none}
@media(max-width:600px){header.hero-maison h1 .h1-local{letter-spacing:.12em;margin-top:10px}}