/* =========================================================
   Frédérique Barral — naturopathe micro-nutrition
   Direction : carnet de cuisine, pas brochure de bien-être.
   Palette RELEVÉE sur le logo (pixels échantillonnés) : vert pur,
   or champagne, et le bleu-vert de la plume de paon.
   ========================================================= */

:root{
  /* Couleurs relevees sur le logo (echantillonnage des pixels dominants) */
  --vert-profond:#17434c;
  --vert-encre:#0f3037;
  --vert-feuille:#2d6673;
  --sauge:#84a3aa;
  --paon:#4d8285;
  --paon-fonce:#1d5157;   /* bandes pleines */
  --paon-pale:#dfeae9;    /* fonds d'encadres */          /* la plume de paon du logo */
  --paon-clair:#a8c0c0;
  --or:#b8933c;
  --or-clair:#dcc48a;
  --or-pale:#f0d8c0;
  --safran:#c87f1e;
  --papier:#f4eee0;
  --papier-chaud:#ece2cd;
  --encre:#1b211c;
  --encre-douce:#46514a;
  --blanc-casse:#fbf8f1;

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Karla","Helvetica Neue",Arial,sans-serif;

  --wrap:1180px;
  --r:2px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  color:var(--encre);
  background:var(--papier);
  overflow-x:hidden;
}

/* --- Grain : une seule texture, en overlay, 0 requête --- */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}
a{color:var(--vert-feuille);text-decoration-thickness:1px;text-underline-offset:3px}
a:not(.btn):hover{color:var(--safran)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-large{max-width:1400px;margin:0 auto;padding:0 24px}
.wrap-etroit{max-width:660px;margin:0 auto;padding:0 24px}

/* =============== Typographie =============== */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 90;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,6.2vw,4.6rem)}
h2{font-size:clamp(1.9rem,4vw,3.1rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);font-variation-settings:"SOFT" 20,"WONK" 0,"opsz" 24}
h4{font-size:1.06rem;font-family:var(--sans);font-weight:700;letter-spacing:.02em}
p{margin:0 0 1.15em}
.lead{font-size:clamp(1.1rem,1.6vw,1.32rem);line-height:1.6;color:var(--encre-douce)}

/* Le sur-titre : petite capitale espacée, avec son filet */
.kicker{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--or);margin:0 0 1.1em;
}
.kicker::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
.sur-sombre .kicker{color:var(--or-clair)}

/* Le chiffre de marge, façon sommaire de livre de cuisine */
.num{
  font-family:var(--serif);font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 144;
  font-size:clamp(2.6rem,5vw,4rem);line-height:.8;
  color:var(--or);opacity:.45;display:block;
}

/* =============== Sections & rythme =============== */
section{position:relative}
/* Les motifs debordent volontairement de leur section : c'est elle qui les
   rogne, sinon la page gagne une barre de defilement horizontale. */
.bloc,.bloc-serre,.entete-page,.err-404,.bandeau{position:relative;overflow:hidden}
/* position:relative est indispensable ici : sans lui, le motif en absolu
   se rattache au bloc conteneur initial et overflow:hidden ne le rogne pas. */
.bloc{padding:clamp(64px,9vw,132px) 0}
.bloc-serre{padding:clamp(44px,6vw,80px) 0}

.sur-sombre{background:var(--vert-profond);color:var(--papier)}
.sur-sombre h1,.sur-sombre h2,.sur-sombre h3{color:var(--blanc-casse)}
.sur-sombre .lead,.sur-sombre p{color:#cfd9cf}
.sur-sombre a:not(.btn){color:var(--or-clair)}
.sur-encre{background:var(--vert-encre);color:var(--papier)}
.sur-papier-chaud{background:var(--papier-chaud)}

/* Filet botanique en fond de section — gravure, pas photo */
.motif-herbier{position:absolute;pointer-events:none;opacity:.13;color:var(--vert-feuille)}
.sur-sombre .motif-herbier{opacity:.16;color:var(--sauge)}
.motif-hd{top:-30px;right:-60px;width:min(320px,38vw)}
.motif-bg{bottom:-40px;left:-70px;width:min(300px,34vw);transform:scaleX(-1)}

/* =============== Boutons =============== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:52px;padding:14px 30px;
  font-family:var(--sans);font-size:.95rem;font-weight:700;
  letter-spacing:.03em;text-decoration:none;border-radius:var(--r);
  border:1.5px solid transparent;cursor:pointer;
  transition:background .22s,color .22s,border-color .22s,transform .22s;
  white-space:normal;text-align:center;
}
.btn-or{background:var(--or);color:#1a1405;border-color:var(--or)}
.btn-or:hover{background:var(--or-clair);border-color:var(--or-clair);color:#1a1405;transform:translateY(-2px)}
.btn-vert{background:var(--vert-profond);color:var(--papier);border-color:var(--vert-profond)}
.btn-vert:hover{background:var(--vert-feuille);border-color:var(--vert-feuille);color:var(--papier);transform:translateY(-2px)}
.btn-ligne{background:transparent;color:var(--vert-profond);border-color:var(--vert-profond)}
.btn-ligne:hover{background:var(--vert-profond);color:var(--papier)}
.sur-sombre .btn-ligne{color:var(--papier);border-color:rgba(245,239,225,.5)}
.sur-sombre .btn-ligne:hover{background:var(--papier);color:var(--vert-profond);border-color:var(--papier)}
.duo-btn{display:flex;flex-wrap:wrap;gap:14px}
.duo-btn .btn{flex:1 1 240px}

/* =============== Navigation =============== */
.nav{
  position:sticky;top:0;z-index:1000;
  /* Le vert etait ecrit en dur ici : la barre ne suivait donc jamais la
     palette. Il est rattache a la variable, opacite conservee. */
  background:color-mix(in srgb, var(--vert-profond) 97%, transparent);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(184,147,60,.32);
}
.nav .wrap{max-width:1340px;display:flex;align-items:center;gap:24px;height:70px}
.nav-logo{
  flex:0 0 auto;display:flex;flex-direction:column;line-height:1;
  text-decoration:none;color:var(--papier);
}
.nav-logo b{font-family:var(--serif);font-variation-settings:"SOFT" 30,"WONK" 1;font-weight:400;font-size:1.24rem;letter-spacing:.01em}
.nav-logo span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-top:4px}
.nav-liens{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav-liens a{
  color:var(--papier);text-decoration:none;font-size:.9rem;font-weight:500;
  white-space:nowrap;padding:6px 0;border-bottom:1.5px solid transparent;
}
.nav-liens a:hover,.nav-liens a[aria-current="page"]{color:var(--or-clair);border-bottom-color:var(--or)}
.nav-liens .btn{margin-left:6px;min-height:42px;padding:9px 20px;font-size:.85rem}
.burger{
  display:none;margin-left:auto;width:44px;height:44px;
  background:transparent;border:1px solid rgba(245,239,225,.4);border-radius:var(--r);
  cursor:pointer;padding:0;align-items:center;justify-content:center;
}
.burger span{display:block;width:20px;height:2px;background:var(--papier);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--papier)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.menu-mobile{display:none;background:var(--vert-encre);border-bottom:1px solid rgba(201,160,47,.28)}
.menu-mobile.ouvert{display:block}
.menu-mobile a{
  display:block;padding:15px 24px;color:var(--papier);text-decoration:none;
  border-bottom:1px solid rgba(245,239,225,.09);font-size:1rem;
}
.menu-mobile .btn{margin:16px 24px 22px;display:flex}

@media(max-width:1080px){
  .nav-liens{display:none}
  .burger{display:flex}
}

/* =============== Hero — photo pleine largeur derrière le titre =============== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(520px,78vh,760px);
  display:flex;align-items:flex-end;
  color:var(--papier);
}
.hero-fond{position:absolute;inset:0;z-index:-2}
.hero-fond img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
/* Voile : lisible sans noyer la photo. Dégradé vertical, pas d'aplat vert. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(10,30,24,.88) 0%,rgba(10,30,24,.66) 30%,rgba(10,30,24,.24) 62%,rgba(10,30,24,.12) 100%),
    linear-gradient(to right,rgba(10,30,24,.5) 0%,rgba(10,30,24,.1) 60%,transparent 100%);
}
.hero-in{
  position:relative;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(110px,16vh,190px) 24px clamp(46px,6vw,70px);
}
.hero h1{
  color:#fff;max-width:16ch;margin-bottom:.34em;
  text-shadow:0 2px 26px rgba(6,20,16,.5);
}
.hero h1 em{
  font-style:normal;display:block;color:var(--or-clair);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
}
.hero .kicker{color:var(--or-clair)}
.hero-accroche{
  font-size:clamp(1.06rem,1.5vw,1.24rem);color:#e6ece6;max-width:46ch;margin-bottom:1.8em;
  text-shadow:0 1px 16px rgba(6,20,16,.55);
}
.hero .duo-btn{max-width:540px}
.hero .duo-btn .btn{flex:1 1 0;min-width:0;min-height:56px}
.hero .btn-ligne{color:#fff;border-color:rgba(255,255,255,.6);backdrop-filter:blur(3px);background:rgba(255,255,255,.08)}
.hero .btn-ligne:hover{background:#fff;color:var(--vert-profond);border-color:#fff}
/* l'étiquette verticale, façon bocal d'herbier */
.etiquette{
  position:absolute;right:26px;top:clamp(96px,14vh,150px);
  writing-mode:vertical-rl;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--or-clair);padding:14px 8px;
  border-left:1px solid rgba(229,196,106,.55);
}
.hero-signes{
  display:flex;flex-wrap:wrap;gap:10px 26px;
  padding-top:24px;margin-top:28px;border-top:1px solid rgba(245,239,225,.26);
  font-size:.83rem;letter-spacing:.05em;color:#dbe3db;
}
.hero-signes b{color:var(--or-clair);font-weight:700}

@media(max-width:900px){
  .hero{min-height:auto}
  .hero-in{padding-top:clamp(76px,13vh,120px)}
  .hero h1{max-width:none}
  .etiquette{display:none}
}

/* =============== Sommaire numéroté (cookbook) =============== */
.sommaire{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;background:rgba(0,0,0,.08)}
.sommaire-item{background:var(--papier);padding:clamp(28px,3.4vw,44px)}
.sur-sombre .sommaire{background:rgba(245,239,225,.14)}
.sur-sombre .sommaire-item{background:var(--vert-profond)}
.sommaire-item h3{margin:.45em 0 .4em}
.sommaire-item p{font-size:.95rem;margin-bottom:0}

/* =============== Grille éditoriale asymétrique =============== */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.duo-decale{grid-template-columns:.86fr 1.14fr}
.duo-decale-inv{grid-template-columns:1.14fr .86fr}
.duo img{border-radius:var(--r)}
.duo-media{position:relative}
/* le cadre décalé, à l'encre */
.duo-media::after{
  content:"";position:absolute;inset:16px -16px -16px 16px;
  border:1px solid var(--or);opacity:.5;pointer-events:none;border-radius:var(--r);
}
@media(max-width:820px){
  .duo,.duo-decale,.duo-decale-inv{grid-template-columns:1fr;gap:34px}
  .duo-media::after{inset:10px -10px -10px 10px}
}

/* =============== Manifeste — colonne étroite, respiration =============== */
.manifeste{text-align:center}
.manifeste blockquote{
  margin:0;font-family:var(--serif);font-weight:400;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
  font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.24;
  color:var(--blanc-casse);text-wrap:balance;
}
.manifeste cite{
  display:block;margin-top:26px;font-style:normal;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);
}

/* =============== Cartes motifs de consultation =============== */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:24px}
/* Quatre fiches dans une grille a trois colonnes laissent une orpheline sur
   une deuxieme rangee. Ce gabarit-la les aligne a quatre, comme le sommaire
   de l'accueil, puis retombe a deux puis une. */
.cartes-quatre{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.carte{
  background:var(--blanc-casse);border:1px solid rgba(18,54,42,.13);
  border-radius:var(--r);padding:clamp(26px,3vw,36px);
  display:flex;flex-direction:column;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.carte:hover{border-color:var(--or);transform:translateY(-3px);box-shadow:0 14px 34px rgba(18,54,42,.11)}
.carte h3{margin-top:.3em}
.carte p{font-size:.95rem;color:var(--encre-douce)}
.carte ul{margin:0;padding-left:1.1em;font-size:.93rem;color:var(--encre-douce)}
.carte li{margin-bottom:.35em}
.carte-plein{background:var(--vert-profond);color:var(--papier);border-color:var(--vert-profond)}
.carte-plein h3{color:var(--blanc-casse)}
.carte-plein p,.carte-plein li{color:#c9d5c9}

/* =============== Tarifs — table de recette =============== */
.tarifs{border-top:2px solid var(--vert-profond)}
.tarif{
  display:grid;grid-template-columns:1fr auto;gap:14px 30px;align-items:start;
  padding:26px 0;border-bottom:1px solid rgba(18,54,42,.16);
}
.tarif h3{margin:0 0 .3em}
.tarif p{margin:0;font-size:.94rem;color:var(--encre-douce);max-width:60ch}
.tarif-prix{
  font-family:var(--serif);font-variation-settings:"SOFT" 20,"WONK" 0,"opsz" 90;
  font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;color:var(--vert-profond);white-space:nowrap;
}
.tarif-note{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or);margin-top:7px;white-space:normal}
@media(max-width:620px){.tarif{grid-template-columns:1fr}.tarif-prix{font-size:1.7rem}}

/* =============== Encadré / avertissement =============== */
.encadre{
  border-left:3px solid var(--or);background:var(--papier-chaud);
  padding:22px 26px;margin:34px 0;border-radius:0 var(--r) var(--r) 0;
}
.encadre p:last-child{margin-bottom:0}
.encadre-sobre{background:transparent;border-left-color:var(--sauge)}
.mention-legale{font-size:.88rem;color:var(--encre-douce);font-style:italic}
.sur-sombre .encadre{background:rgba(245,239,225,.07);border-left-color:var(--or)}
.sur-sombre .mention-legale{color:#b9c6ba}

/* =============== Étapes numérotées =============== */
.etapes{counter-reset:e;display:grid;gap:2px;background:rgba(18,54,42,.14)}
.etape{
  background:var(--papier);padding:clamp(24px,3vw,34px);
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;counter-increment:e;
}
.etape::before{
  content:counter(e,decimal-leading-zero);
  font-family:var(--serif);font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 144;
  font-size:2rem;line-height:.9;color:var(--or);
}
.etape h3{margin:0 0 .35em}
.etape p{margin:0;font-size:.96rem;color:var(--encre-douce)}
@media(max-width:560px){.etape{grid-template-columns:1fr;gap:8px}}

/* =============== FAQ =============== */
.faq-item{border-bottom:1px solid rgba(18,54,42,.17)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:var(--serif);font-variation-settings:"SOFT" 20,"WONK" 0,"opsz" 24;
  font-size:1.14rem;line-height:1.3;color:var(--vert-profond);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:8px;top:31px;
  width:11px;height:11px;border-right:2px solid var(--or);border-bottom:2px solid var(--or);
  transform:rotate(45deg);transition:transform .25s;
}
.faq-item[open] summary::after{transform:rotate(-135deg);top:35px}
.faq-item .reponse{padding:0 0 24px;font-size:.98rem;color:var(--encre-douce);max-width:72ch}
.faq-item .reponse p:last-child{margin-bottom:0}

/* =============== Blog =============== */
.liste-articles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.article-carte{
  display:flex;flex-direction:column;background:var(--blanc-casse);
  border:1px solid rgba(18,54,42,.13);border-radius:var(--r);
  padding:30px;text-decoration:none;color:inherit;
  transition:border-color .25s,transform .25s;
}
.article-carte:hover{border-color:var(--or);transform:translateY(-3px)}
.article-carte h3{margin:.4em 0 .5em;color:var(--vert-profond)}
.article-carte p{font-size:.94rem;color:var(--encre-douce);flex:1}
.article-carte .lire{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or);font-weight:700}

article.doc{max-width:720px;margin:0 auto}
article.doc .meta{font-size:.83rem;letter-spacing:.05em;color:var(--encre-douce);margin-bottom:2em}
article.doc .chapeau{
  border-left:3px solid var(--or);padding-left:22px;margin-bottom:2.2em;
  font-size:1.1rem;line-height:1.6;color:var(--encre-douce);
}
article.doc h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:1.9em}
article.doc a:not(.btn){color:var(--vert-feuille);text-decoration:underline}
article.doc a:not(.btn):hover{color:var(--safran)}
article.doc ul{padding-left:1.2em}
article.doc li{margin-bottom:.5em}

/* =============== Bandeau photo pleine largeur =============== */
.bandeau{position:relative;min-height:clamp(260px,34vw,420px);display:flex;align-items:center;overflow:hidden}
.bandeau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bandeau::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,53,36,.88) 0%,rgba(20,53,36,.66) 46%,rgba(20,53,36,.22) 100%)}
.bandeau .wrap{position:relative;z-index:2}
.bandeau h2,.bandeau p{color:var(--papier)}
.bandeau p{color:#cfd9cf;max-width:48ch}

/* =============== Formulaire =============== */
.form label{display:block;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vert-profond);margin:0 0 7px}
.form input,.form select,.form textarea{
  width:100%;padding:13px 15px;font-family:var(--sans);font-size:1rem;
  border:1px solid rgba(18,54,42,.28);border-radius:var(--r);
  background:var(--blanc-casse);color:var(--encre);margin-bottom:20px;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--or);outline-offset:1px;border-color:var(--or)}
.form textarea{min-height:150px;resize:vertical}
.form .pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{font-size:.85rem;color:var(--encre-douce)}
.form-retour{padding:14px 18px;border-radius:var(--r);margin-bottom:18px;display:none;font-size:.95rem}
.form-retour.ok{display:block;background:#e3efe4;color:#1c4a2b;border:1px solid #b7d5bc}
.form-retour.ko{display:block;background:#f8e6e0;color:#7c2d12;border:1px solid #e8bfae}

/* =============== Pied de page =============== */
.pied{background:var(--vert-encre);color:#c2cfc4;padding:clamp(52px,6vw,80px) 0 30px;font-size:.93rem}
.pied a{color:#c2cfc4;text-decoration:none}
.pied a:hover{color:var(--or-clair)}
.pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:44px}
.pied h4{color:var(--papier);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 16px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:9px}
.pied-marque b{font-family:var(--serif);font-variation-settings:"SOFT" 30,"WONK" 1;font-weight:400;font-size:1.3rem;color:var(--papier);display:block;margin-bottom:6px}
.pied-bas{
  border-top:1px solid rgba(245,239,225,.14);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;font-size:.85rem;
}
.pied-bas .credit{margin-left:auto}
@media(max-width:760px){
  .pied-grille{grid-template-columns:1fr;gap:32px}
  .pied-bas .credit{margin-left:0}
}

/* =============== Bandeau cookies =============== */
#cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:10000;display:none;
  background:var(--vert-encre);color:var(--papier);
  border-top:2px solid var(--or);padding:20px 24px;
  box-shadow:0 -8px 30px rgba(0,0,0,.24);
}
#cookie-banner.visible{display:block}
.cookie-inner{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.cookie-inner p{margin:0;flex:1 1 340px;font-size:.9rem;color:#cfd9cf}
.cookie-inner a{color:var(--or-clair)}
.cookie-actions{display:flex;gap:12px;flex-wrap:wrap}
.cookie-actions .btn{min-height:44px;padding:11px 22px;font-size:.88rem}

/* =============== Reveal au défilement =============== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.carte:hover,.article-carte:hover{transform:none}
}

/* =============== Divers =============== */
.saut{margin-top:clamp(30px,4vw,52px)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.liste-nue{list-style:none;padding:0;margin:0}
.liste-nue li{padding-left:26px;position:relative;margin-bottom:.6em}
.liste-nue li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border:1.5px solid var(--or);transform:rotate(45deg);
}
.err-404{padding:clamp(80px,12vw,160px) 0;text-align:center}

/* =========================================================
   LIVRE DE CUISINE
   Le site est un ouvrage : papier, chapitres, sommaire à
   points de conduite, folios en marge, fiches recette.
   La page se tourne à la navigation — enrichissement pur,
   invisible là où les view-transitions ne sont pas gérées.
   ========================================================= */

/* --- Le papier --- */
body{
  background-color:var(--papier);
  background-image:
    /* fibres */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .35 0 0 0 0 .21 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23p)'/%3E%3C/svg%3E"),
    /* ombre de reliure, à gauche */
    linear-gradient(90deg,rgba(90,72,40,.13) 0,rgba(90,72,40,.04) 26px,transparent 74px);
}

/* --- La page qui se tourne --- */
/* Une feuille pivote sur sa reliure, a gauche, et decouvre celle du dessous.
   La perspective est indispensable : sans elle, rotateY n'est qu'un
   ecrasement horizontal a plat et l'effet ne se lit pas du tout. */
@view-transition{navigation:auto}

@media(prefers-reduced-motion:no-preference){
  ::view-transition{background:var(--vert-encre)}
  ::view-transition-group(root){
    perspective:2200px;
    perspective-origin:0% 50%;
  }
  ::view-transition-image-pair(root){transform-style:preserve-3d}

  /* la feuille qu'on quitte : elle se souleve et bascule vers la gauche */
  ::view-transition-old(root){
    animation:feuille-tourne .86s cubic-bezier(.36,.02,.26,1) both;
    transform-origin:left center;
    backface-visibility:hidden;
    z-index:3;
    mix-blend-mode:normal;
  }
  /* la feuille du dessous : elle attend, a peine assombrie, puis se pose */
  ::view-transition-new(root){
    animation:feuille-dessous .86s cubic-bezier(.3,0,.2,1) both;
    z-index:1;
  }

  @keyframes feuille-tourne{
    /* On s'arrete a -90deg : au-dela, on verrait le dos de la feuille,
       c'est-a-dire la page en texte miroir. La feuille s'efface juste avant. */
    0%  {transform:rotateY(0deg)   translateZ(0);    filter:brightness(1);   opacity:1}
    12% {transform:rotateY(-18deg) translateZ(24px); filter:brightness(.95) drop-shadow(-16px 0 28px rgba(6,20,14,.34)); opacity:1}
    45% {transform:rotateY(-54deg) translateZ(30px); filter:brightness(.78) drop-shadow(-30px 0 46px rgba(6,20,14,.44)); opacity:1}
    78% {transform:rotateY(-82deg) translateZ(18px); filter:brightness(.58) drop-shadow(-22px 0 38px rgba(6,20,14,.34)); opacity:1}
    100%{transform:rotateY(-90deg) translateZ(0);    filter:brightness(.5);  opacity:0}
  }
  @keyframes feuille-dessous{
    0%  {filter:brightness(.74) saturate(.9); transform:scale(.988)}
    55% {filter:brightness(.86) saturate(.95); transform:scale(.994)}
    100%{filter:none;                         transform:none}
  }
}

/* --- La couverture --- */
.couverture{position:relative;isolation:isolate;overflow:hidden;color:#fff}
.couv-fond{position:absolute;inset:0;z-index:-2}
.couv-fond img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.couverture::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,rgba(20,53,36,.84) 0%,rgba(20,53,36,.64) 38%,rgba(20,53,36,.28) 66%,rgba(20,53,36,.12) 100%),
    linear-gradient(to top,rgba(20,53,36,.58) 0%,rgba(20,53,36,.2) 42%,transparent 78%);
}
/* le double filet imprimé de la couverture */
.couv-cadre{
  position:absolute;inset:clamp(16px,2.4vw,30px);z-index:0;pointer-events:none;
  border:1px solid rgba(229,196,106,.5);
}
.couv-cadre::after{content:"";position:absolute;inset:5px;border:1px solid rgba(229,196,106,.26)}
.couv-in{
  position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding:clamp(118px,17vh,196px) clamp(38px,5vw,58px) clamp(52px,6vw,76px);
}
.couv-editeur{
  display:inline-block;
  font-size:.66rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:#f7e4b0;margin:0 0 clamp(18px,3vw,30px);
  padding:8px 14px;background:rgba(10,30,24,.58);
  border:1px solid rgba(229,196,106,.45);backdrop-filter:blur(3px);
  text-shadow:0 1px 8px rgba(6,20,16,.8);
}
.couverture h1{
  color:#fff;max-width:15ch;margin:0 0 .3em;
  text-shadow:0 2px 30px rgba(6,20,16,.55);
}
.couverture h1 em{
  font-style:normal;display:block;color:var(--or-clair);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
}
.couv-devise{
  font-family:var(--serif);font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 60;
  font-size:clamp(1.06rem,1.7vw,1.34rem);line-height:1.44;
  color:#eef2ec;max-width:40ch;margin:0 0 1.7em;
  padding-left:18px;border-left:2px solid var(--or);
  text-shadow:0 1px 16px rgba(6,20,16,.6);
}
.couv-in .duo-btn{max-width:540px}
.couv-in .duo-btn .btn{flex:1 1 0;min-width:0;min-height:56px}
.couv-in .btn-ligne{color:#fff;border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.09);backdrop-filter:blur(3px)}
.couv-in .btn-ligne:hover{background:#fff;color:var(--vert-profond);border-color:#fff}
.couv-mentions{
  display:flex;flex-wrap:wrap;gap:9px 26px;
  padding-top:24px;margin-top:28px;border-top:1px solid rgba(229,196,106,.4);
  font-size:.82rem;letter-spacing:.04em;color:#dde4dc;
}
.couv-mentions b{color:var(--or-clair);font-weight:700}
@media(max-width:900px){
  .couv-in{padding-left:26px;padding-right:26px}
  .couverture h1{max-width:none}
}

/* --- Le sommaire, à points de conduite --- */
.sommaire-livre{list-style:none;margin:0;padding:0;max-width:720px}
.sommaire-livre li{border-bottom:1px dotted rgba(29,35,32,.35)}
.sommaire-livre a{
  display:flex;align-items:baseline;gap:14px;
  padding:15px 2px;text-decoration:none;color:var(--encre);
  transition:color .2s,padding-left .2s;
}
.sommaire-livre a:hover{color:var(--safran);padding-left:8px}
.sommaire-livre .ch{
  flex:0 0 auto;font-family:var(--serif);font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 24;
  font-size:.9rem;letter-spacing:.14em;color:var(--or);min-width:3.4em;
}
.sommaire-livre .ti{
  font-family:var(--serif);font-variation-settings:"SOFT" 20,"WONK" 0,"opsz" 40;
  font-size:clamp(1.1rem,1.7vw,1.34rem);line-height:1.2;
}
.sommaire-livre .pts{flex:1;border-bottom:1px dotted rgba(29,35,32,.32);transform:translateY(-4px)}
.sommaire-livre .fo{flex:0 0 auto;font-size:.86rem;letter-spacing:.1em;color:var(--encre-douce)}

/* --- L'ouverture de chapitre --- */
.chapitre{margin:0 0 clamp(26px,3.4vw,44px)}
.chapitre .ch-num{
  display:block;font-family:var(--serif);font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 24;
  font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--or);margin-bottom:14px;
}
.chapitre .ch-filet{
  display:block;width:56px;height:0;border-top:1px solid var(--or);
  border-bottom:1px solid var(--or);height:4px;margin-top:18px;
}
.sur-sombre .chapitre .ch-num,.sur-sombre .chapitre .ch-filet{color:var(--or-clair);border-color:var(--or-clair)}

/* --- La note en marge, écrite à la main --- */
.marginale{
  font-family:var(--serif);font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 30;
  font-size:1.02rem;line-height:1.45;color:var(--vert-feuille);
  border-left:2px solid var(--or);padding-left:16px;margin:26px 0;max-width:38ch;
}
.sur-sombre .marginale{color:var(--or-clair);border-left-color:var(--or-clair)}

/* --- La fiche recette (prestations) --- */
.fiche{
  background:var(--blanc-casse);border:1px solid rgba(29,35,32,.2);
  padding:clamp(26px,3vw,38px);position:relative;
  box-shadow:2px 3px 0 rgba(29,35,32,.07);
}
.fiche::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  border-top:1px solid var(--or);border-bottom:1px solid var(--or);
}
.fiche h3{margin:.5em 0 .45em}
.fiche .ingredients{list-style:none;margin:0 0 1em;padding:0;font-size:.94rem;color:var(--encre-douce)}
.fiche .ingredients li{padding-left:22px;position:relative;margin-bottom:.42em}
.fiche .ingredients li::before{content:"—";position:absolute;left:0;color:var(--or)}
.fiche .duree{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or);font-weight:700}

/* --- Le folio, en pied de page --- */
.folio{
  text-align:center;padding:clamp(30px,4vw,48px) 0 0;
  font-family:var(--serif);font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 24;
  font-size:.86rem;letter-spacing:.3em;color:var(--encre-douce);opacity:.75;
}
.sur-sombre .folio{color:var(--sauge)}


/* =============== Le logo, sur sa pastille =============== */
/* La calligraphie du logo est vert foncé : il n'est lisible que sur un fond
   clair. Partout où le fond est sombre, il est posé sur une pastille crème. */
.medaillon{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--papier);border-radius:50%;
  box-shadow:0 10px 34px rgba(6,20,14,.34);
  padding:8px;
}
.medaillon img{width:100%;height:auto;border-radius:50%}
.couv-medaillon{width:clamp(124px,14vw,184px);margin-bottom:clamp(20px,3vw,30px)}
.pied-medaillon{width:124px;margin-bottom:18px}
.medaillon-filet{position:relative}
.medaillon-filet::after{
  content:"";position:absolute;inset:-7px;border:1px solid rgba(220,196,138,.55);border-radius:50%;
}


/* =============== La plume de paon, en fond de page =============== */
/* Gravure au trait, posée très pâle derrière le contenu. Elle ne coûte
   aucune requête : c'est le même symbole SVG réutilisé. */
/* Elle ne parait plus que sur les blocs bleus, là où elle ressort ; sur une
   page qui n'a aucun bloc bleu, une seule fois, pour ne pas laisser la page
   nue. Ancrage bas : l'œil du dessin reste entier et seule la tige file sous
   le bord du bloc, au lieu d'un morceau de plume rogné au hasard. */
.motif-paon{
  --plume:min(360px,44vw);
  position:absolute;pointer-events:none;z-index:0;
  width:var(--plume);aspect-ratio:300/620;
  background:url("/assets/plume-paon.svg") top center/contain no-repeat;
  opacity:.34;
}
/* Sur le vert profond, la plume est éclaircie pour rester lisible sans crier. */
.sur-sombre .motif-paon,.sur-encre .motif-paon{opacity:.5;filter:brightness(1.35) saturate(.85)}
/* L'œil occupe les 320 premiers points du dessin sur 620. La tige à cacher
   vaut donc (620-320)/300 = exactement une largeur de motif. */
/* Legerement inclinee : une plume posee n'est jamais parfaitement d'aplomb.
   Le pivot est en bas, donc l'inclinaison ne decale pas l'ancrage. */
.motif-paon-bas-d{right:clamp(10px,3vw,56px);bottom:calc(-1 * var(--plume));
  transform:rotate(7deg);transform-origin:bottom center}
.motif-paon-bas-g{left:clamp(10px,3vw,56px);bottom:calc(-1 * var(--plume));
  transform:rotate(-7deg);transform-origin:bottom center}

/* =============== La fleur de vie, sur les blocs beiges =============== */
/* Demandée par Frédérique. Uniquement sur le beige uni : le fond papier est
   déjà fibré, un second motif par-dessus surcharge.
   Elle n'est jamais posée en pleine trame, qui alourdit, mais entrée par un
   bord dans le vide réel du bloc, comme la plume de paon. Les trous ont été
   mesurés bloc par bloc : cinq blocs sur six l'ont en haut à droite du titre
   (660x240 px dans le cas le plus serré), le sixième l'a en bande basse. */
.motif-fleur{
  --fleur:min(340px,56vw);
  position:absolute;pointer-events:none;z-index:0;
  width:var(--fleur);aspect-ratio:1;
  background:url("/assets/fleur-de-vie.svg") center/contain no-repeat;
  opacity:.18;
}
/* Haut droite : on voit les trois quarts du disque, il ne sort du cadre que
   d'un cinquieme par le haut et par la droite. */
.motif-fleur-hd{top:calc(-.22 * var(--fleur));right:calc(-.2 * var(--fleur))}
/* Bande basse : on voit le haut du disque sur 0,6 de sa taille. */
.motif-fleur-bas{bottom:calc(-.4 * var(--fleur));left:6%}
/* Quand le bloc laisse tout un flanc vide, la fleur le prend en entier.
   Mesure du vide sur « La ménopause » : 480 px de large sur 720 de haut. */
.motif-fleur-large{--fleur:min(600px,72vw)}
.bloc>.wrap,.bloc-serre>.wrap,.wrap-etroit{position:relative;z-index:1}

/* =============== Le paon dans l'interface =============== */
/* Il était déclaré dans la palette sans être employé nulle part. */
.chapitre .ch-num{color:var(--paon)}
.chapitre .ch-filet{border-top-color:var(--or);border-bottom-color:var(--paon)}
.sur-sombre .chapitre .ch-num{color:var(--paon-clair)}
.sur-sombre .chapitre .ch-filet{border-top-color:var(--or-clair);border-bottom-color:var(--paon-clair)}
.sommaire-livre .ch{color:var(--paon)}
.sommaire-livre .pts{border-bottom-color:rgba(95,141,141,.55)}
.sommaire-livre li{border-bottom-color:rgba(95,141,141,.3)}
.fiche::before{border-top-color:var(--or);border-bottom-color:var(--paon)}
.fiche .ingredients li::before{color:var(--paon)}
.marginale{border-left-color:var(--paon);color:var(--vert-feuille)}
.liste-nue li::before{border-color:var(--paon)}
.faq-item summary::after{border-right-color:var(--paon);border-bottom-color:var(--paon)}
.encadre-sobre{border-left-color:var(--paon)}
.nav-logo span{color:var(--paon-clair)}


/* =============== « Vous vous reconnaissez ? » =============== */
/* Releve sur les sites de naturopathie qui convertissent : la liste de
   signes adressee directement au lecteur, avant toute description d'offre. */
.reconnait{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 34px;max-width:960px}
.reconnait li{
  list-style:none;position:relative;padding-left:32px;margin:0;
  font-size:1.02rem;line-height:1.5;color:var(--encre);
}
.reconnait li::before{
  content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;
  border:1.5px solid var(--paon);border-radius:2px;
}
.reconnait li::after{
  content:"";position:absolute;left:4px;top:.62em;width:8px;height:4px;
  border-left:2px solid var(--or);border-bottom:2px solid var(--or);
  transform:rotate(-45deg);
}
.sur-sombre .reconnait li{color:#dbe4da}
.sur-sombre .reconnait li::before{border-color:var(--paon-clair)}
.sur-sombre .reconnait li::after{border-color:var(--or-clair)}

/* =============== Prise de rendez-vous =============== */
.rdv-cadre{
  background:var(--blanc-casse);border:1px solid rgba(27,33,28,.2);
  padding:clamp(26px,3.4vw,44px);max-width:1040px;margin:0 auto;
  box-shadow:2px 3px 0 rgba(27,33,28,.07);
}
.rdv-cadre::before{
  content:"";display:block;height:4px;margin:-4px 0 26px;
  border-top:1px solid var(--or);border-bottom:1px solid var(--paon);
}
#cal-inline{width:100%;min-height:520px}
.rdv-etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-bottom:30px}
.rdv-etape{counter-increment:rdv}
.rdv-etape b{
  display:block;font-family:var(--serif);font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 144;
  font-size:1.9rem;line-height:1;color:var(--or);font-weight:400;margin-bottom:10px;
}
.rdv-etape p{margin:0;font-size:.96rem;color:var(--encre-douce)}


/* =============== Le paon en surface, pas en filet =============== */
/* Compte fait le 11/09 : le bleu-vert ne couvrait que 1,2 % de la page,
   uniquement sur des filets d'un pixel. Invisible. Il lui faut des aplats. */
.sur-paon{background:var(--paon-fonce);color:var(--papier)}
.sur-paon h1,.sur-paon h2,.sur-paon h3,.sur-paon blockquote{color:var(--blanc-casse)}
.sur-paon p,.sur-paon .lead{color:#d3e2e1}
.sur-paon .kicker,.sur-paon cite,.sur-paon .chapitre .ch-num{color:var(--or-clair)}
.sur-paon .chapitre .ch-filet{border-top-color:var(--or-clair);border-bottom-color:#8fc0bf}
.sur-paon a:not(.btn){color:var(--or-clair)}
.sur-paon .btn-ligne{color:var(--papier);border-color:rgba(244,238,224,.55);background:rgba(244,238,224,.07)}
.sur-paon .btn-ligne:hover{background:var(--papier);color:var(--paon-fonce);border-color:var(--papier)}
.sur-paon .motif-paon{opacity:.6;filter:brightness(1.5) saturate(1.15)}
.sur-paon .reconnait li{color:#d8e6e5}
.sur-paon .reconnait li::before{border-color:#8fc0bf}

/* l'encadre « la regle a retenir » passe en bleu-vert pale */
.encadre{background:var(--paon-pale);border-left-color:var(--paon)}
.encadre-sobre{background:transparent;border-left-color:var(--paon)}
.sur-paon .encadre{background:rgba(244,238,224,.09);border-left-color:var(--or-clair)}

/* la question ouverte de la FAQ se teinte */
.faq-item[open]{background:var(--paon-pale);border-left:3px solid var(--paon);padding-left:18px}
.faq-item[open] summary{color:var(--paon-fonce)}

/* la fiche recette : filet superieur plein, et non deux cheveux */
.fiche::before{height:5px;border:0;background:linear-gradient(90deg,var(--or) 0 42%,var(--paon) 42% 100%)}

/* les tarifs : le filet de tete devient une bande paon */
.tarifs{border-top:4px solid var(--paon-fonce)}
.tarif-prix{color:var(--paon-fonce)}

/* le sommaire : la colonne des chiffres romains sur fond pale */
.sommaire-livre li:hover{background:var(--paon-pale)}