/* =========================================================
   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:"Italiana",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;
  line-height:1.06;
  letter-spacing:-.005em;
  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)}
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-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}

/* Quand deux sections consecutives sont TOUTES LES DEUX sur le papier nu
   (aucun bloc colore, aucune photo entre elles pour casser le vide), leurs
   paddings s'additionnent et ca fait jusqu'a 212px de rien. Des qu'un fond
   colore ou une photo separe les blocs, le vide ne se voit plus : on ne
   corrige donc que l'adjacence papier-sur-papier.
   L'en-tete et la premiere section ne sont PAS des freres directs : <main>
   s'intercale entre les deux. ".entete-page + .bloc" ne matchait donc
   jamais rien — corrige via "+ main > .bloc:first-child". */
.entete-page + main > .bloc:first-child:not(.sur-papier-chaud):not(.sur-paon):not(.sur-sombre):not(.sur-encre),
.entete-page + main > .bloc-serre:first-child:not(.sur-papier-chaud):not(.sur-paon):not(.sur-sombre):not(.sur-encre),
.bloc:not(.sur-papier-chaud):not(.sur-paon):not(.sur-sombre):not(.sur-encre) + .bloc:not(.sur-papier-chaud):not(.sur-paon):not(.sur-sombre):not(.sur-encre),
.bloc:not(.sur-papier-chaud):not(.sur-paon):not(.sur-sombre):not(.sur-encre) + .bloc-serre:not(.sur-papier-chaud):not(.sur-paon):not(.sur-sombre):not(.sur-encre),
.bloc-serre:not(.sur-papier-chaud):not(.sur-paon):not(.sur-sombre):not(.sur-encre) + .bloc:not(.sur-papier-chaud):not(.sur-paon):not(.sur-sombre):not(.sur-encre),
.bloc-serre:not(.sur-papier-chaud):not(.sur-paon):not(.sur-sombre):not(.sur-encre) + .bloc-serre:not(.sur-papier-chaud):not(.sur-paon):not(.sur-sombre):not(.sur-encre){
  padding-top:clamp(8px,2vw,28px);
}

.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-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:1180px){
  .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 1px 8px rgba(6,20,16,.65);
}
.hero h1 em{
  font-style:normal;display:block;color:var(--or-clair);
}
.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 6px rgba(6,20,16,.6);
}
.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-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-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-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-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-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}
/* triptyques des pages et photos des fiches */
.triptyque{margin:4px 0 28px}
.triptyque img{display:block;width:100%;height:auto;border-radius:var(--r)}
/* Pour qui : deux colonnes sous chaque triptyque, intro a gauche, detail a droite */
.pq-texte .lead{font-size:clamp(1.08rem,1.35vw,1.2rem)}
.pq-intro,.pq-corps{display:flex;flex-direction:column;gap:18px}
.pq-intro p,.pq-corps p{margin:0;max-width:none}
@media(min-width:900px){
  .pq-texte{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,72px);align-items:start}
}
@media(max-width:899px){.pq-texte{display:flex;flex-direction:column;gap:18px}}
.fiche-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin:0 0 18px}
.couv-fond{position:absolute;inset:0;z-index:-2}
.couv-fond img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* triptyque des trois metiers : entier et net en haut, fondu dans le vert */
.couverture-triptyque{background:#143524}
.couverture-triptyque .couv-fond{inset:0 0 auto 0}
.couverture-triptyque .couv-fond img{height:auto;max-width:none;object-fit:initial}
.couverture.couverture-triptyque::before{background:linear-gradient(to bottom,rgba(20,53,36,0) 0,rgba(20,53,36,.2) 14vw,rgba(20,53,36,.72) 26vw,#143524 35vw),linear-gradient(to right,rgba(20,53,36,.45) 0%,rgba(20,53,36,0) 55%)}
.couverture-triptyque .couv-in{padding-top:clamp(96px,23vw,330px)}
/* contenu centre et titre plus mesure sous le triptyque */
.couverture.couverture-triptyque .couv-in{text-align:center;max-width:1440px}
.couverture.couverture-triptyque .couv-medaillon{display:flex;margin:0 auto 18px}
.couverture.couverture-triptyque .couv-titre{font-size:clamp(1.9rem,3.6vw,3.3rem);max-width:none;margin-left:auto;margin-right:auto}
.couverture.couverture-triptyque .couv-devise{margin-left:auto;margin-right:auto;padding-left:0;border-left:0;max-width:72ch;font-size:clamp(1rem,1.4vw,1.16rem)}
.couverture.couverture-triptyque .duo-btn{justify-content:center;margin-left:auto;margin-right:auto}
.couverture.couverture-triptyque .lien-bilan{margin-left:auto;margin-right:auto}
.couverture.couverture-triptyque .couv-mentions{justify-content:center}
.couverture::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,rgba(20,53,36,.78) 0%,rgba(20,53,36,.5) 36%,rgba(20,53,36,.14) 64%,transparent 100%),
    linear-gradient(to top,rgba(20,53,36,.5) 0%,rgba(20,53,36,.12) 40%,transparent 72%);
}
/* 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.couv-editeur{font-family:inherit;font-size:.66rem;font-weight:700;line-height:1.5;letter-spacing:.32em;max-width:none;text-wrap:wrap}
.couverture .couv-titre{
  font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.005em;text-wrap:balance;
  font-size:clamp(2.5rem,6.2vw,4.6rem);
  color:#fff;max-width:15ch;margin:0 0 .3em;
  text-shadow:0 1px 9px rgba(6,20,16,.68);
}
.couverture .couv-titre em{
  font-style:normal;display:block;color:var(--or-clair);
}
.couv-devise{
  font-family:var(--serif);
  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 6px rgba(6,20,16,.65);
}
.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 .couv-titre{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-size:.9rem;letter-spacing:.14em;color:var(--or);min-width:3.4em;
}
.sommaire-livre .ti{
  font-family:var(--serif);
  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-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-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-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;
}
/* L'ancrage bas exige que le bloc conteneur mesure au moins ~2x la largeur
   de la plume pour l'afficher SANS AUCUNE coupe (voir bottom:0 plus bas) —
   sinon le haut du motif deborde par le haut du bloc et se fait trancher
   des deux cotes (colle en haut, coupe en bas). Mesure reelle des 5
   en-tetes du site a 1400px : 527 a 561px de haut. 230px de plume tient
   dans le plus court (527/2,067 = 255px de marge) sur tous les formats. */
.entete-page .motif-paon{--plume:min(230px,18vw)}
/* 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 — masquee en
   entier, sinon la coupe tombe en plein milieu de la tige et ca se voit. */
/* Legerement inclinee : une plume posee n'est jamais parfaitement d'aplomb.
   Le pivot est en bas, donc l'inclinaison ne decale pas l'ancrage — mais elle
   penche vers l'INTERIEUR du bloc (jamais vers le bord exterieur), sinon la
   rotation pousse le haut de la plume hors du cadre et l'overflow:hidden la
   tranche à la verticale au lieu de ne rogner que la tige en bas.
   Collee au bord reel du site (0), pas au bord du contenu : la plume doit
   deborder du cadre, pas flotter au milieu du vide. */
.motif-paon-bas-d{right:0;bottom:calc(-1 * var(--plume));
  transform:rotate(-7deg);transform-origin:bottom center}
.motif-paon-bas-g{left:0;bottom:calc(-1 * var(--plume));
  transform:rotate(7deg);transform-origin:bottom center}
/* Dans l'en-tete, la plume est dimensionnee pour tenir ENTIEREMENT dans la
   hauteur reelle du bloc (voir --plume ci-dessus) : plus besoin de la
   planquer sous le bord, elle se pose a plat, bord a bord avec le bas du
   bloc, sans rogner ni l'oeil ni la tige. */
.entete-page .motif-paon-bas-d,.entete-page .motif-paon-bas-g{bottom:0}

/* =============== 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-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)}

.rdv-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.rdv-tab{
  padding:10px 20px;border-radius:var(--r);border:1.5px solid var(--vert-profond);
  background:transparent;color:var(--vert-profond);font-family:var(--sans);
  font-size:.85rem;font-weight:700;letter-spacing:.03em;cursor:pointer;
  transition:background .2s,color .2s;
}
.rdv-tab:hover{background:var(--paon-pale)}
.rdv-tab.is-active{background:var(--vert-profond);color:var(--papier)}
.cal-panel{display:none}
.cal-panel.is-active{display:block}


/* =============== 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)}

/* Tableau des traceurs, page politique de confidentialite. */
.tbl-cookies{border-collapse:collapse;margin:16px 0;font-size:.88rem;width:100%}
.tbl-cookies th,.tbl-cookies td{border:1px solid var(--paon-clair);padding:9px 12px;text-align:left;vertical-align:top}
.tbl-cookies th{background:var(--paon-pale);font-weight:600}
.tbl-cookies code{font-size:.85em;word-break:break-all}


/* =============== Modifications du 27/09/2026 (retours de Frederique) =============== */
/* G6/M5 : la note en marge etait en Italiana fine et bleu-vert, illisible sur telephone */
.marginale{font-family:var(--sans);font-style:italic;font-size:1.04rem;line-height:1.6;color:var(--vert-encre);max-width:52ch}
.sur-paon .marginale{color:#eef4f3}
/* les petits sur-titres : plus fonces sur fond clair, dores sur les bandeaux photo */
.chapitre .ch-num{color:var(--paon-fonce)}
.bandeau .chapitre .ch-num{color:var(--or-clair)}
/* G7 : bouton Reserver du menu, couleur qui ressort */
.btn-reserver{background:var(--safran);color:#1a1405;border-color:var(--safran)}
.btn-reserver:hover{background:var(--or-clair);border-color:var(--or-clair);color:#1a1405;transform:translateY(-2px)}
.nav-liens{gap:22px}
/* un bouton seul ne s'etire pas sur toute la ligne */
.duo-btn .btn-seul{flex:0 1 auto}
/* A6/G2 : lien texte vers le bilan, sous le bouton principal */
.lien-bilan{font-size:.9rem;margin:14px 0 0;max-width:60ch}
.center .lien-bilan{margin-left:auto;margin-right:auto}
.lien-bilan a{color:inherit;text-underline-offset:3px}
.couv-in .lien-bilan{color:#eef2ec;text-shadow:0 1px 6px rgba(6,20,16,.65)}
.couv-mentions a{color:inherit;text-underline-offset:3px}
.couverture h1{max-width:24ch;font-size:clamp(2rem,3.5vw,3rem);line-height:1.12}
/* A14 : cinq cartes, les deux specialites en tete */
.sommaire-cinq{grid-template-columns:repeat(6,1fr)}
.sommaire-cinq .sommaire-item{grid-column:span 2}
.sommaire-cinq .sommaire-phare{grid-column:span 3}
.sommaire-phare h3{font-size:1.7rem}
@media(max-width:900px){.sommaire-cinq{grid-template-columns:1fr}.sommaire-cinq .sommaire-item,.sommaire-cinq .sommaire-phare{grid-column:auto}}
.pastille{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--paon-pale);color:var(--paon-fonce);
  border:1px solid var(--paon);font-size:.74rem;font-weight:700;letter-spacing:.06em}
.pastilles{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* A18/T3 : l'economie du forfait */
.prix-fort{color:var(--paon-fonce)}
.prix-barre{display:block;font-size:.55em;color:var(--encre-douce);opacity:.8;margin-bottom:4px}
/* les prix s'alignent a droite, sinon une mention longue (forfait) decale le montant */
.tarif-prix{text-align:right}
@media(max-width:620px){.tarif-prix{text-align:left}}
.fiche-inclus{font-size:.86rem;font-style:italic;color:var(--encre-douce);margin-top:-.2em}
/* P3 : la phrase qui conclut la partie intolerances */
.phrase-cle{font-family:var(--sans);font-style:italic;font-size:1.2rem;line-height:1.5;color:var(--vert-encre);
  max-width:56ch;margin-top:1.4em;padding-left:16px;border-left:3px solid var(--or)}
/* M1 : bandeau des trois metiers en tete de page, sans voile */
.triptyque-tete{margin:0;background:var(--vert-encre)}
.triptyque-tete img{display:block;width:100%;max-width:1400px;height:auto;margin:0 auto}
/* A13 : temoignages (bloc masque tant que les textes ne sont pas fournis) */
.temoin{margin:0;background:var(--blanc-casse);border:1px solid rgba(29,35,32,.2);padding:clamp(24px,3vw,34px)}
.temoin blockquote{margin:0 0 1em;font-style:italic}
.temoin figcaption{font-size:.85rem;color:var(--encre-douce)}
/* F1 */
.pied-note{font-size:.82rem;opacity:.8}
/* G3 : l'ancre du calendrier ne passe pas sous le menu fixe */
#rendez-vous{scroll-margin-top:70px}
.sommaire-phare .pastille{margin:16px 0 4px}