/* ==========================================================================
   NATUR'OLA — Laura Bridier · Cheffe nomade & Naturopathe
   « Une cuisine avec des racines, tournée vers demain. »
   Feuille de style maîtresse · septembre 2026, charte d'octobre 2026
   --------------------------------------------------------------------------
   Direction artistique : la charte graphique de Laura (octobre 2026). Fond lin
   clair dominant, brique en accent (boutons, mot-clé des titres), moutarde en
   secondaire, vert sauge pour la nature ; un sauge profond pour les
   respirations sombres, que la charte n'a pas mais qu'exige la lisibilité du
   texte clair. Titres en Merriweather (italique pour les mots qui portent le
   sens et les accroches), texte, menus et boutons en Montserrat.
   ========================================================================== */

:root {
  /* Couleurs de la charte : brique #B85C43, moutarde #C69A3A, vert sauge
     #789368, lin beige #E9DDC9. Les autres teintes en sont dérivées. */
  --ivoire:     #F8F3EA;   /* lin très clair, fond dominant */
  --ivoire-2:   #F2EADD;
  --sable:      #EFE5D4;   /* lin clair, sections alternées */
  --ble:        #E9DDC9;   /* lin beige de la charte */
  --or:         #C69A3A;   /* moutarde de la charte */
  --or-clair:   #E0BF72;   /* moutarde éclaircie, sur fond sombre */
  --or-texte:   #7E5D17;   /* moutarde foncée : petits textes sur fond clair (contraste 4,8) */
  --terre:      #B85C43;   /* brique de la charte */
  --terre-2:    #94442F;
  --terre-3:    #D0806A;
  --sauge:      #789368;   /* vert sauge de la charte */
  --sous-bois:  #4A5C42;   /* sauge profond : sections sombres, cartes */
  --sous-bois-2:#56694D;
  --brun:       #4A3123;   /* titres, comme sur la charte */
  --encre:      #3A2B22;
  --encre-2:    #6B5B4E;
  --blanc:      #FFFCF7;

  /* Typographie de la charte */
  --f-titre: "Merriweather", Georgia, "Times New Roman", serif;
  --f-texte: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Mouvement */
  --ease:     cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Formes */
  --r-s: .7rem;
  --r-m: 1.25rem;
  --r-l: 2rem;
  /* Masque signature : deux coins très arrondis en diagonale, deux coins
     presque droits. Cela évoque la feuille de la marque et reste stable quel
     que soit le format de l'image, là où un rayon en pourcentages finit en
     tache ovale sur les visuels larges. */
  --galet: 5.5rem 1.4rem 5.5rem 1.4rem;
  --ombre:      0 30px 64px -26px rgba(62, 52, 38, .26);
  --ombre-douce:0 18px 40px -18px rgba(62, 52, 38, .16);
  --filet: 1px solid rgba(62, 52, 38, .13);

  /* Rythme */
  --gouttiere: clamp(1.15rem, 4vw, 4rem);
  /* Resserré deux fois à la demande de Laura : 60 px en haut et en bas d'une
     section sur grand écran, contre 168 à l'origine. */
  --section:   clamp(2.1rem, 4.2vw, 3.75rem);
  --maxw:      1380px;

  /* Hauteur de la barre de navigation (sert au logo suspendu) */
  --barre: 74px;
  --logo-remonte: 0;        /* 0 = logo suspendu sous la barre, 1 = rentré dedans */

  /* Fond sombre du héros, sur lequel se pose le texte des vues */
  --nuit: #16120E;

  /* Marge de la barre de menu : le logo se cale près du coin supérieur gauche,
     le menu près du bord droit, quelle que soit la largeur de l'écran. */
  --bord: clamp(1rem, 2.2vw, 2.2rem);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--encre);
  background: var(--ivoire);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--terre); color: var(--ivoire); }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--terre); outline-offset: 3px; border-radius: 3px; }

.saut-contenu {
  position: fixed; top: -5rem; left: 1rem; z-index: 300;
  padding: .85rem 1.5rem; background: var(--sous-bois); color: var(--ivoire);
  border-radius: 999px; font-size: .82rem; transition: top .3s var(--ease);
}
.saut-contenu:focus { top: 1rem; }

.lecture-seule {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Grain — calque fixe, jamais sur un conteneur qui défile */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Lexique typographique ---------- */

.surtitre {
  display: inline-flex; align-items: center; gap: .7rem; max-width: 100%;
  font-size: .68rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--or-texte);
}
.surtitre::before { content: ""; width: 1.9rem; height: 1px; background: currentColor; opacity: .7; flex: none; }
.surtitre--centre { justify-content: center; }
.surtitre--centre::after { content: ""; width: 1.9rem; height: 1px; background: currentColor; opacity: .7; flex: none; }
.surtitre--clair { color: var(--or-clair); }

.titre {
  font-family: var(--f-titre); font-weight: 400;
  line-height: 1.08; letter-spacing: -.015em; color: var(--brun);
}
.t-xxl { font-size: clamp(2.8rem, 6vw, 5.2rem); }
.t-xl  { font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
/* Titre géant (page E-books). Sur écran large, il tient sur une seule ligne qui
   va d'un bord à l'autre du contenu. Tailles mesurées avec Merriweather : la
   phrase fait 12,2 em à 100 px de corps, 13,1 em à 60 px (l'axe de taille
   optique élargit les lettres quand le corps diminue), d'où une valeur en vw
   par palier, réglée pour remplir 95 à 98 % de la largeur utile sans la
   dépasser. Sur écran étroit, une seule ligne serait trop petite : le titre
   passe sur deux lignes, la première agrandie pour atteindre elle aussi le
   bord (« Transmettre, » est 1,3 fois plus court). */
.t-geant { font-size: clamp(2.6rem, 7vw, 6.2rem); line-height: 1; letter-spacing: -.025em; white-space: nowrap; }
.t-geant__ligne { display: inline; }
@media (max-width: 1099px) { .t-geant { font-size: 6.9vw; } }
@media (max-width: 959px)  { .t-geant { font-size: 6.6vw; } }
@media (max-width: 820px) {
  .t-geant { white-space: normal; line-height: .98; font-size: 12.8vw; }
  .t-geant__ligne { display: block; white-space: nowrap; }
  .t-geant__ligne:first-child { font-size: 1.3em; }
}
@media (max-width: 600px) { .t-geant { font-size: 12.1vw; } }
@media (max-width: 480px) { .t-geant { font-size: 11.2vw; } }
@media (max-width: 360px) { .t-geant { font-size: 10.8vw; } }
.t-l   { font-size: clamp(1.95rem, 3.4vw, 2.9rem); }
.t-m   { font-size: clamp(1.5rem, 2.3vw, 2.05rem); }
.t-s   { font-size: clamp(1.25rem, 1.7vw, 1.55rem); }

/* Le mot qui porte le sens passe en italique terre cuite : c'est le
   dispositif typographique signature du site, employé partout. */
.mot { font-style: italic; color: var(--terre); }
.section--sombre .mot { color: var(--or-clair); }

.accroche { font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.68; color: var(--encre-2); max-width: 46ch; }
.mesure { max-width: 64ch; }
p + p { margin-top: .6em; }
.texte p { color: var(--encre-2); }
.texte p + p { margin-top: .6em; }
.texte strong { color: var(--encre); font-weight: 600; }

/* ---------- Structure ---------- */

.contenant { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gouttiere); }
.contenant--etroit { max-width: 940px; }

.section { padding-block: var(--section); position: relative; }
.section--serree { padding-block: clamp(1.5rem, 2.7vw, 2.4rem); }
.section--sable { background: var(--sable); }
.section--ivoire2 { background: var(--ivoire-2); }
.section--sombre { background: var(--sous-bois); color: rgba(251, 246, 238, .82); }
.section--sombre .titre { color: var(--blanc); }
.section--sombre .accroche, .section--sombre .texte p { color: rgba(251, 246, 238, .76); }

/* Vague décorative entre deux sections (bord organique, pas un trait net) */
.vague { display: block; width: 100%; height: clamp(28px, 4vw, 54px); }
.vague path { fill: currentColor; }

/* ---------- En-tête et logo suspendu ---------- */

.entete {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: rgba(251, 246, 238, 0);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease);
}
.entete.est-posee {
  background: rgba(251, 246, 238, .88);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(62, 52, 38, .08), 0 16px 34px -28px rgba(62, 52, 38, .5);
}
/* Sur les pages dont le héros est une photo pleine largeur, la barre survole
   une image sombre : ses libellés passent en clair tant qu'elle n'est pas posée. */
.entete--sur-image:not(.est-posee) .nav a { color: rgba(255, 252, 247, .92); }
.entete--sur-image:not(.est-posee) .nav a::after { background: var(--or-clair); }
.entete--sur-image:not(.est-posee) .nav a:hover,
.entete--sur-image:not(.est-posee) .nav a[aria-current="page"] { color: var(--blanc); }
.entete--sur-image:not(.est-posee) .burger { border-color: rgba(255, 252, 247, .38); }
.entete--sur-image:not(.est-posee) .burger__traits span { background: var(--blanc); }

/* La barre ignore la largeur maximale du contenu : sur un grand écran, le logo
   aligné sur le contenu centré se retrouvait à plus de 300 px du bord. */
.barre {
  max-width: none; padding-inline: var(--bord);
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(.9rem, 1.7vw, 1.7rem);
  height: var(--barre);
}

/* Le logo est suspendu sous la barre au chargement, dans une carte, puis
   remonte dedans au défilement en se recomposant en pilule : le soleil passe à
   gauche, le nom à sa droite, le métier s'efface. Tout est interpolé par
   --logo-remonte (0 → 1) : aucune bascule de mise en page, uniquement des
   calc(), donc un mouvement continu. Calé en haut à gauche, à la demande de
   Laura ; le menu et le bouton de réservation partent à droite.
   Chaque pièce a deux états, au repos (…0) et compacte (…1), en pixels depuis
   le coin haut gauche de la carte ; --r est le facteur de passage. */
.medaillon {
  --r: var(--logo-remonte);
  --l0: 226px; --h0: 150px;  --l1: 196px; --h1: 52px;
  position: absolute; left: var(--bord); z-index: 5;
  top: calc(100% - (50% * var(--r)));
  transform: translate(0, calc(-42% - (8% * var(--r))));
  width:  calc(var(--l0) + (var(--l1) - var(--l0)) * var(--r));
  height: calc(var(--h0) + (var(--h1) - var(--h0)) * var(--r));
  background: linear-gradient(162deg, var(--blanc), var(--ivoire-2));
  border: 1px solid rgba(198, 154, 58, calc(.38 + .22 * var(--r)));
  border-radius: calc(18px + 480px * var(--r));
  box-shadow: 0 18px 38px -18px rgba(62, 52, 38, calc(.34 - .2 * var(--r)));
}
.medaillon img { position: absolute; display: block; height: auto; max-width: none; }
.medaillon__soleil {
  --w0: 54px; --x0: 86px; --y0: 15px;   --w1: 32px; --x1: 14px; --y1: 10px;
}
.medaillon__nom {
  --w0: 170px; --x0: 28px; --y0: 79px;  --w1: 128px; --x1: 54px; --y1: 12px;
}
.medaillon__metier {
  --w0: 170px; --x0: 28px; --y0: 126px; --w1: 128px; --x1: 54px; --y1: 40px;
  /* le métier disparaît dès que la carte se compacte, faute de hauteur */
  opacity: calc(1 - var(--r) * 2.6);
}
.medaillon__soleil, .medaillon__nom, .medaillon__metier {
  width: calc(var(--w0) + (var(--w1) - var(--w0)) * var(--r));
  left:  calc(var(--x0) + (var(--x1) - var(--x0)) * var(--r));
  top:   calc(var(--y0) + (var(--y1) - var(--y0)) * var(--r));
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 1.7vw, 1.7rem); }
/* Le médaillon tient la gauche (il est sorti du flux) : tout le menu est poussé
   à droite, les deux groupes de liens côte à côte. */
.nav--gauche { margin-left: auto; }
.entete .btn { margin-left: .5rem; }
/* Liens du menu agrandis à la demande de Laura (12,8 px à l'origine). */
.nav a {
  position: relative; font-size: 1.05rem; font-weight: 500; letter-spacing: .005em;
  color: var(--encre); padding-block: .3rem; transition: color .35s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--terre); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav a:hover { color: var(--terre); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--terre); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.entete .btn { padding: .66rem .66rem .66rem 1.4rem; font-size: .92rem; }
.entete .btn__pastille { width: 1.9rem; height: 1.9rem; }

/* Bouton du menu mobile */
.burger {
  display: none; position: relative; z-index: 210;
  width: 2.7rem; height: 2.7rem; border-radius: 999px;
  border: 1px solid rgba(62, 52, 38, .2);
  align-items: center; justify-content: center;
}
.burger__traits { position: relative; width: 1rem; height: .5rem; }
.burger__traits span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--encre); border-radius: 2px;
  transition: transform .5s var(--ease), background-color .4s var(--ease);
}
.burger__traits span:first-child { top: 0; }
.burger__traits span:last-child { bottom: 0; }
.menu-ouvert .burger { border-color: rgba(251, 246, 238, .3); }
.menu-ouvert .burger__traits span { background: var(--ivoire); }
.menu-ouvert .burger__traits span:first-child { transform: translateY(.25rem) rotate(45deg); }
.menu-ouvert .burger__traits span:last-child { transform: translateY(-.25rem) rotate(-45deg); }

/* Panneau plein écran */
.panneau {
  position: fixed; inset: 0; z-index: 200; background: var(--sous-bois);
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--gouttiere) 3rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.menu-ouvert .panneau {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .5s var(--ease), visibility 0s linear 0s;
}
.panneau__liste { display: flex; flex-direction: column; gap: .2rem; }
.panneau__liste a {
  font-family: var(--f-titre); font-size: clamp(1.8rem, 7vw, 2.6rem);
  line-height: 1.3; color: var(--ivoire);
  opacity: 0; transform: translateY(1.8rem);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), color .3s var(--ease);
}
.menu-ouvert .panneau__liste a { opacity: 1; transform: none; }
.panneau__liste a:hover { color: var(--or-clair); }
.panneau__liste a[aria-current="page"] { color: var(--or-clair); font-style: italic; }
.panneau__pied {
  margin-top: 2.5rem; padding-top: 1.8rem;
  border-top: 1px solid rgba(251, 246, 238, .16);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  font-size: .85rem; color: rgba(251, 246, 238, .75);
  opacity: 0; transform: translateY(1.2rem);
  transition: opacity .55s var(--ease-out) .28s, transform .55s var(--ease-out) .28s;
}
.menu-ouvert .panneau__pied { opacity: 1; transform: none; }
body.menu-ouvert { overflow: hidden; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .85rem .85rem .85rem 1.6rem;
  border-radius: 999px; font-size: .82rem; font-weight: 500; letter-spacing: .02em;
  white-space: nowrap;
  transition: transform .4s var(--ease), background-color .4s var(--ease),
              color .4s var(--ease), box-shadow .4s var(--ease);
}
.btn:active { transform: scale(.978); }
.btn__pastille {
  width: 2rem; height: 2rem; flex: none; border-radius: 999px;
  display: grid; place-items: center;
  transition: transform .4s var(--ease), background-color .4s var(--ease);
}
.btn__pastille svg { width: .78rem; height: .78rem; }
.btn:hover .btn__pastille { transform: translate(2px, -2px) scale(1.06); }

.btn--plein { background: var(--terre); color: #fff; box-shadow: 0 14px 28px -16px rgba(184, 92, 67, .75); }
.btn--plein .btn__pastille { background: rgba(255, 252, 247, .18); }
.btn--plein:hover { background: var(--terre-2); }

.btn--trait { color: var(--encre); box-shadow: inset 0 0 0 1px rgba(62, 52, 38, .22); }
.btn--trait .btn__pastille { background: rgba(62, 52, 38, .07); }
.btn--trait:hover { box-shadow: inset 0 0 0 1px rgba(62, 52, 38, .46); }

.btn--clair { color: var(--ivoire); box-shadow: inset 0 0 0 1px rgba(251, 246, 238, .32); }
.btn--clair .btn__pastille { background: rgba(251, 246, 238, .15); }
.btn--clair:hover { box-shadow: inset 0 0 0 1px rgba(251, 246, 238, .62); }

/* texte brun sur moutarde : le blanc n'y atteint pas le contraste minimal */
.btn--or { background: var(--or); color: var(--brun); box-shadow: 0 14px 28px -16px rgba(198, 154, 58, .7); }
.btn--or .btn__pastille { background: rgba(74, 49, 35, .12); }

.duo-btn { display: flex; flex-wrap: wrap; gap: .75rem; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 500; color: var(--terre);
}
.lien-fleche svg { width: .78rem; height: .78rem; transition: transform .4s var(--ease); }
.lien-fleche:hover svg { transform: translateX(4px); }

/* ---------- Médias ---------- */

.media { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--ble); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--galet { border-radius: var(--galet); }
.media--carre { aspect-ratio: 1; }
.media--portrait { aspect-ratio: 4 / 5; }
.media--haut { aspect-ratio: 3 / 4; }
.media--paysage { aspect-ratio: 3 / 2; }
.media--large { aspect-ratio: 16 / 7; }

.cadre {
  padding: .45rem; border-radius: calc(var(--r-l) + .45rem);
  background: rgba(255, 252, 247, .6);
  box-shadow: inset 0 0 0 1px rgba(62, 52, 38, .08), var(--ombre-douce);
}
.credit { margin-top: .75rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); opacity: .7; }

/* ---------- Héros ---------- */

.hero { position: relative; padding-block: calc(var(--barre) + 6rem) clamp(1.5rem, 2.7vw, 2.4rem); }
.hero__grille { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(2.2rem, 4.5vw, 4.5rem); }
.hero__texte > * + * { margin-top: .69rem; }
.hero__media .cadre { transform: rotate(-1deg); }

/* Héros pleine image (accueil) */
.hero-image {
  position: relative;
  /* Le héros occupe exactement la hauteur visible : le bandeau défilant qui le
     suit ne doit pas se montrer à l'arrivée. « svh » mesure l'écran barre
     d'adresse déployée — avec « vh », un téléphone rogne le bas du héros. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  /* Le retrait haut réserve la place du médaillon suspendu sous la barre. Il se
     resserre sur les écrans peu hauts, où la hauteur devient le bien rare. */
  padding-top: calc(var(--barre) + clamp(84px, 13vh, 150px));
  padding-bottom: clamp(5.4rem, 8vh, 7rem); overflow: hidden;
}
.hero-image__fond { position: absolute; inset: 0; z-index: 0; }
/* Cadrage décalé : le médaillon est centré en haut, le sujet doit rester
   dégagé sur la droite et laisser la partie gauche, plus sombre, au texte. */
.hero-image__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 34% 22%; }
/* Dégradé porté sur la gauche plutôt qu'un voile uniforme : le texte reste
   lisible quelle que soit la photo qui viendra remplacer celle-ci, et la
   moitié droite de l'image garde sa lumière. */
.hero-image__voile {
  position: absolute; inset: 0; z-index: 1;
  /* Assez dense à gauche pour qu'une photographie claire ne rende jamais le
     texte illisible : c'est le cas qui casse la plupart des carrousels. */
  background:
    linear-gradient(100deg, rgba(22, 18, 14, .94) 0%, rgba(22, 18, 14, .89) 30%,
                            rgba(22, 18, 14, .62) 50%, rgba(22, 18, 14, .22) 70%,
                            rgba(22, 18, 14, 0) 88%),
    linear-gradient(180deg, rgba(22, 18, 14, .42) 0%, rgba(22, 18, 14, 0) 24%,
                            rgba(22, 18, 14, 0) 60%, rgba(22, 18, 14, .5) 100%);
}
/* Le bloc de texte est calé à gauche dans le conteneur. Il ne porte jamais la
   classe « contenant » lui-même : celle-ci impose un centrage automatique qui
   ramènerait le texte au milieu de la photo. */
.hero-image__texte {
  position: relative; z-index: 2; color: var(--blanc);
  max-width: 40ch; margin-left: 0; margin-right: auto; text-align: left;
  /* Seconde ligne de défense sur les photos très claires. */
  text-shadow: 0 1px 26px rgba(18, 14, 10, .55);
}
/* Titre de diapositive : plus contenu que le t-xxl, pour tenir en trois lignes
   sous le médaillon et laisser respirer la photographie. */
.t-diapo { font-size: clamp(2.3rem, 4.1vw, 3.6rem); }
.hero-image__texte .titre { color: var(--blanc); }
.hero-image__texte .mot { color: var(--or-clair); }
.hero-image__texte p { color: rgba(255, 252, 247, .88); }
.hero-image__texte > * + * { margin-top: .66rem; }

/* ---------- Bandeau de mots-clés ---------- */

.bandeau {
  overflow: hidden; padding-block: clamp(1.9rem, 3.4vw, 3.1rem);
  /* Vert sauge en transparence : posé sur l'ivoire, il est nettement plus clair
     que le vert sous-bois d'origine, jugé trop sombre. Les mots en ivoire y
     gardent un contraste d'environ 4:1, suffisant à cette taille de caractère. */
  background: rgba(74, 92, 66, .74); color: var(--ivoire-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bandeau__piste { display: flex; width: max-content; animation: defile 38s linear infinite; }
.bandeau:hover .bandeau__piste { animation-play-state: paused; }
.bandeau__groupe { display: flex; align-items: center; flex: none; }
.bandeau__mot {
  display: inline-flex; align-items: center; gap: 3.2rem; padding-inline: 1.6rem;
  font-family: var(--f-titre); font-style: italic;
  font-size: clamp(1.7rem, 3.1vw, 3.1rem); white-space: nowrap;
}
.bandeau__mot::after { content: ""; width: .42rem; height: .42rem; border-radius: 999px; background: var(--or-clair); flex: none; }
@keyframes defile { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Trois chemins (cartes de l'univers) ---------- */

.chemins { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2.2rem); }
.chemin { display: flex; flex-direction: column; transition: transform .55s var(--ease); }
.chemin:nth-child(2) { margin-top: clamp(0rem, 1.2vw, 1.2rem); }
.chemin:hover { transform: translateY(-6px); }
.chemin__media { overflow: hidden; border-radius: var(--r-l); }
.chemin__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.1s var(--ease); }
.chemin:hover .chemin__media img { transform: scale(1.05); }
/* Le corps de carte s'étire jusqu'en bas : le bouton s'y cale, et les trois
   boutons sont alignés quelle que soit la longueur des textes. */
.chemin__corps { padding-top: .84rem; flex: 1; display: flex; flex-direction: column; }
.chemin__titre { margin-bottom: .6rem; }
.chemin__texte { color: var(--encre-2); font-size: .97rem; }
.chemin__liste { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.chemin__liste li {
  font-size: .76rem; padding: .3rem .75rem; border-radius: 999px;
  background: rgba(198, 154, 58, .12); color: var(--terre-2);
}
.chemin__lien { margin-top: auto; padding-top: 1.1rem; }
/* Sur fond sable, la teinte dorée des pastilles se confondait avec le fond :
   elles passent en ivoire. */
.section--sable .chemin__liste li { background: rgba(255, 252, 247, .78); box-shadow: inset 0 0 0 1px rgba(198, 154, 58, .22); }

/* ---------- Alternance texte / image ---------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.duo--inverse .duo__media { order: -1; }
/* Photo passée à droite du texte sur grand écran ; empilés, la photo reste en tête. */
.duo--photo-droite .duo__media { order: 2; }
.duo__texte > * + * { margin-top: .6rem; }
.duo--large { grid-template-columns: 1.15fr .85fr; }
.duo--etroit { grid-template-columns: .85fr 1.15fr; }

/* ---------- Étapes numérotées (demandées au cahier des charges) ---------- */

.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.8rem); }
.etape { position: relative; }
/* Le numéro est dans le flux, avec un interligne serré : posé en absolu au-dessus
   du titre, son trait débordait sur la première lettre (« Vous choisissez »). */
.etape__num {
  display: block; line-height: 1; margin-bottom: .85rem;
  font-family: var(--f-titre); font-size: 1.5rem; color: var(--or);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.etape__num::after { content: ""; display: block; width: 2.2rem; height: 1px; background: var(--or); opacity: .5; margin-top: .3rem; }
.etape__titre { margin-bottom: .5rem; }
.etape__texte { color: var(--encre-2); font-size: .97rem; }

/* ---------- Offres / parcours tarifés ---------- */

.parcours { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 2.6vw, 2.2rem); align-items: start; }
.offre {
  position: relative; padding: clamp(1.8rem, 3vw, 2.6rem);
  border-radius: var(--r-l); background: var(--blanc);
  box-shadow: inset 0 0 0 1px rgba(62, 52, 38, .1), var(--ombre-douce);
  display: flex; flex-direction: column; height: 100%;
}
.offre--phare { background: var(--sous-bois); color: rgba(251, 246, 238, .82); box-shadow: var(--ombre); }
.offre--phare .titre { color: var(--blanc); }
.offre--phare .offre__prix { color: var(--or-clair); }
.offre--phare .offre__liste li { color: rgba(251, 246, 238, .8); }
.offre--phare .offre__liste li::before { background: var(--or-clair); }
.offre__duree { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--or-texte); margin-bottom: .8rem; }
.offre--phare .offre__duree { color: var(--or-clair); }
.offre__titre { margin-bottom: .7rem; }
.offre__phrase { color: var(--encre-2); margin-bottom: 1.4rem; }
.offre--phare .offre__phrase { color: rgba(251, 246, 238, .76); }
.offre__liste { display: grid; gap: .6rem; margin-bottom: 1.6rem; }
.offre__liste li { position: relative; padding-left: 1.3rem; font-size: .93rem; color: var(--encre-2); }
.offre__liste li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .36rem; height: .36rem; border-radius: 999px 999px 999px 2px;
  background: var(--terre); transform: rotate(-45deg);
}
.offre__prix { font-family: var(--f-titre); font-size: clamp(1.8rem, 2.6vw, 2.3rem); color: var(--terre); line-height: 1; }
.offre__prix small { display: block; font-family: var(--f-texte); font-size: .8rem; color: var(--encre-2); margin-top: .35rem; letter-spacing: 0; }
.offre--phare .offre__prix small { color: rgba(251, 246, 238, .7); }
.offre__pied { margin-top: auto; padding-top: 1.4rem; }

/* ---------- Tableau de soins ---------- */


/* Liste à filets (page 404 : les pages du site) */
.soins { border-top: var(--filet); }
.soin {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 2rem;
  padding-block: 1.3rem; border-bottom: var(--filet); align-items: baseline;
}
.soin__nom { font-family: var(--f-titre); font-size: 1.22rem; color: var(--brun); }
.soin__desc { grid-column: 1 / -1; color: var(--encre-2); font-size: .94rem; max-width: 72ch; }
.soin__prix { font-family: var(--f-titre); font-size: 1.1rem; color: var(--terre); white-space: nowrap; }

/* Soins & rituels (Naturopathie) : texte à gauche, liste à droite, séparée par
   des filets, une feuille terracotta en puce. Mise en page demandée par Laura. */
.rituels {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center; gap: clamp(2rem, 6vw, 7rem);
}
.rituels__texte .accroche { max-width: 44ch; }
.rituels__liste { border-top: 1px solid rgba(62, 52, 38, .24); }
.rituels__cta { margin-top: clamp(1.4rem, 2.4vw, 1.9rem); }
/* Plus d'air entre les soins et un filet fin bien visible, à la demande de Laura */
.rituel { position: relative; padding: 2.05rem 0 2.05rem 1.7rem; border-bottom: 1px solid rgba(62, 52, 38, .24); }
.rituel::before {
  content: ""; position: absolute; left: 0; top: 2.55rem;
  width: .62rem; height: .62rem; background: var(--terre);   /* comme les puces de « Pour qui ? » */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 36C4 18 18 4 36 4 36 22 22 36 4 36Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 36C4 18 18 4 36 4 36 22 22 36 4 36Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rituel__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1.2rem; flex-wrap: wrap; }
.rituel__nom { font-family: var(--f-titre); font-weight: 400; font-size: clamp(1.2rem, 1.6vw, 1.38rem); line-height: 1.25; color: var(--brun); }
.rituel__tarif { font-family: var(--f-titre); font-size: 1.02rem; color: var(--terre); white-space: nowrap; }
.rituel__desc { margin-top: .45rem; font-size: .95rem; line-height: 1.7; color: var(--encre-2); max-width: 60ch; }
@media (max-width: 1100px) {
  .rituels { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---------- Me joindre directement (page Réserver) ------------------------
   Juste sous le titre, à la demande de Laura : le téléphone et l'e-mail à
   gauche, en deux cartes cliquables d'une rangée chacune (icône, texte,
   flèche), les lieux à droite. Fond vert pour ressortir nettement sur
   l'ivoire. */
.contact-direct {
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.6rem, 1.2vw, 1rem);
}
.contact-direct__joindre { display: grid; gap: clamp(.6rem, 1.2vw, 1rem); }
.contact-carte, .contact-lieux {
  border-radius: var(--r-m); background: var(--sous-bois); color: var(--ivoire);
  box-shadow: 0 16px 30px -20px rgba(58, 43, 34, .7);
}
.contact-carte {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: .9rem;
  padding: .85rem 1rem .85rem .85rem;
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.contact-carte:hover { background: var(--sous-bois-2); transform: translateY(-2px); }
.contact-carte__icone {
  grid-row: 1 / span 2; align-self: center;
  width: 2.6rem; height: 2.6rem; border-radius: 999px; flex: none;
  display: grid; place-items: center; background: var(--terre); color: var(--blanc);
}
.contact-carte__icone svg { width: 1.1rem; height: 1.1rem; }
.contact-carte__label { grid-column: 2; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--or-clair); }
.contact-carte__valeur { grid-column: 2; margin-top: .1rem; font-family: var(--f-titre); font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.2; color: var(--blanc); }
/* l'adresse e-mail est longue : un corps plus petit, et une coupure possible */
.contact-carte__valeur--long { font-size: clamp(.98rem, 1.2vw, 1.08rem); overflow-wrap: anywhere; }
.contact-carte__fleche {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  width: 1.8rem; height: 1.8rem; border-radius: 999px; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(251, 246, 238, .3); color: var(--ivoire);
  transition: transform .4s var(--ease), background-color .4s var(--ease);
}
.contact-carte__fleche svg { width: .72rem; height: .72rem; }
.contact-carte:hover .contact-carte__fleche { transform: translate(2px, -2px); background: rgba(251, 246, 238, .12); }

/* Les lieux : une carte d'information, pas un lien */
.contact-lieux { padding: .85rem 1.2rem 1rem .85rem; }
.contact-lieux__tete { display: flex; align-items: center; gap: .9rem; }
.contact-lieux__liste { margin-top: .75rem; padding-left: 3.5rem; display: grid; gap: .55rem; }
.contact-lieux__liste > div { padding-top: .55rem; border-top: 1px solid rgba(251, 246, 238, .14); }
.contact-lieux__liste dt { font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--or-clair); }
.contact-lieux__liste dd { margin-top: .12rem; font-family: var(--f-titre); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.35; color: var(--blanc); }
@media (max-width: 820px) {
  .contact-direct { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .contact-lieux__liste { padding-left: 0; }
}

/* ---------- Galerie d'expériences ---------- */

.galerie { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.7rem, 1.2vw, 1.15rem); }
.galerie figure { overflow: hidden; border-radius: var(--r-m); background: var(--ble); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.galerie figure:hover img { transform: scale(1.05); }
.galerie figure:nth-child(1) { grid-column: span 5; aspect-ratio: 4/3; }
.galerie figure:nth-child(2) { grid-column: span 3; aspect-ratio: 3/4; margin-top: clamp(0rem, 2.5vw, 2.5rem); }
.galerie figure:nth-child(3) { grid-column: span 4; aspect-ratio: 1; }
.galerie figure:nth-child(4) { grid-column: span 4; aspect-ratio: 1; }
.galerie figure:nth-child(5) { grid-column: span 3; aspect-ratio: 3/4; }
.galerie figure:nth-child(6) { grid-column: span 5; aspect-ratio: 4/3; margin-top: clamp(0rem, 2vw, 2rem); }
.galerie figure:nth-child(7) { grid-column: span 6; aspect-ratio: 16/10; }
.galerie figure:nth-child(8) { grid-column: span 6; aspect-ratio: 16/10; }

/* ---------- Témoignages ---------- */

.avis { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.2vw, 2rem); }
.avis__carte {
  padding: clamp(1.5rem, 2.5vw, 2.1rem); border-radius: var(--r-l);
  background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(62, 52, 38, .09);
  display: flex; flex-direction: column;
}
.avis__etiquette { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--or-texte); margin-bottom: .9rem; }
.avis__texte { font-family: var(--f-titre); font-size: 1.1rem; line-height: 1.5; color: var(--brun); font-style: italic; }
.avis__source { margin-top: auto; padding-top: 1.2rem; font-size: .82rem; color: var(--encre-2); }

/* ---------- Citation pleine largeur ---------- */

/* Merriweather est plus large que l'ancienne police : la colonne s'élargit pour
   que la citation de John H. Tilden ne s'étire pas sur huit lignes. */
.citation { text-align: center; max-width: 44ch; margin-inline: auto; }
.citation__texte { text-wrap: balance; }
.citation__texte { font-family: var(--f-titre); font-style: italic; font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.25; color: var(--brun); }
.section--sombre .citation__texte { color: var(--blanc); }
.citation__source { margin-top: 1.6rem; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--or-texte); }
.section--sombre .citation__source { color: var(--or-clair); }
.citation--large { max-width: 58ch; }
/* Les citations (phrases de Laura et carrousels de témoignages) gardent
   l'espace d'origine, à la demande de Laura : une phrase mise en exergue a
   besoin de vide autour d'elle. Le reste du site est resserré. */
.section--citation { padding-block: clamp(5.5rem, 12vw, 10.5rem); }
.section--serree.section--citation { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* ---------- Appel à l'action final ---------- */

.appel { border-radius: calc(var(--r-l) + .5rem); background: var(--sous-bois); color: rgba(251, 246, 238, .82); padding: clamp(2.5rem, 5vw, 4.5rem); }
.appel__titre { color: var(--blanc); }
/* sur le vert profond, la brique manque de contraste : le mot passe en moutarde */
.appel .mot { color: var(--or-clair); }
.appel__choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.8rem); margin-top: clamp(.9rem, 1.68vw, 1.32rem); }
.appel__choix > div { padding-top: 1.2rem; border-top: 1px solid rgba(251, 246, 238, .22); }
.appel__question { color: var(--blanc); font-family: var(--f-titre); font-size: 1.12rem; margin-bottom: .9rem; }

/* ---------- Formulaire ---------- */

.formulaire { display: grid; gap: 1.3rem; }
.champ { display: grid; gap: .45rem; }
.champ__label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); font-weight: 500; }
.champ__aide { font-size: .8rem; color: var(--encre-2); opacity: .85; }
.champ input, .champ textarea, .champ select {
  font: inherit; color: var(--encre); padding: .9rem 1.1rem; border-radius: var(--r-s);
  background: var(--blanc); border: 1px solid rgba(62, 52, 38, .18);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.champ textarea { min-height: 8.5rem; resize: vertical; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none; border-color: var(--terre); box-shadow: 0 0 0 3px rgba(184, 92, 67, .13);
}
.champ__erreur { font-size: .8rem; color: var(--terre-2); display: none; }
.champ.invalide input, .champ.invalide textarea, .champ.invalide select { border-color: var(--terre-2); }
.champ.invalide .champ__erreur { display: block; }
.duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.choix-radio { display: flex; flex-wrap: wrap; gap: .6rem; }
.choix-radio label {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .55rem 1.1rem; border-radius: 999px; font-size: .88rem;
  background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(62, 52, 38, .18);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.choix-radio input { accent-color: var(--terre); }
.choix-radio label:has(input:checked) { background: rgba(184, 92, 67, .08); box-shadow: inset 0 0 0 1.5px var(--terre); }
.case-accord { display: flex; align-items: flex-start; gap: .65rem; font-size: .88rem; color: var(--encre-2); }
.case-accord input { margin-top: .3rem; accent-color: var(--terre); }
.formulaire__etat { display: none; padding: 1rem 1.2rem; border-radius: var(--r-s); font-size: .93rem; }
.formulaire__etat.visible { display: block; }
.formulaire__etat--ok { background: rgba(198, 154, 58, .14); color: var(--brun); }
.formulaire__etat--ko { background: rgba(184, 92, 67, .1); color: var(--terre-2); }

/* ---------- Cartes de réservation ---------- */

.orientations { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.2vw, 2rem); }
.orientation {
  padding: clamp(1.6rem, 2.8vw, 2.3rem); border-radius: var(--r-l);
  background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(62, 52, 38, .1);
  display: flex; flex-direction: column;
}
.orientation__titre { margin-bottom: .7rem; }
.orientation__texte { color: var(--encre-2); font-size: .95rem; margin-bottom: 1.5rem; }
.orientation__pied { margin-top: auto; }

/* ---------- E-books ---------- */

.ebooks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.6vw, 2.2rem); }
.ebook { display: flex; flex-direction: column; }
.ebook__couv {
  aspect-ratio: 3 / 4; border-radius: var(--r-m); overflow: hidden;
  background: linear-gradient(150deg, var(--ble), var(--sable));
  display: grid; place-items: center; text-align: center; padding: 1.5rem;
  box-shadow: var(--ombre-douce);
}
.ebook__couv img { width: 100%; height: 100%; object-fit: cover; }
.ebook__attente { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-2); opacity: .75; }
.ebook__corps { padding-top: 1.2rem; }
.ebook__titre { margin-bottom: .5rem; }
.ebook__phrase { color: var(--encre-2); font-size: .94rem; }
.ebook__meta { margin-top: .9rem; display: flex; align-items: baseline; gap: .8rem; }
.ebook__prix { font-family: var(--f-titre); font-size: 1.35rem; color: var(--terre); }
.ebook__format { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); }
.ebook__pied { margin-top: 1.1rem; }


  aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center; padding: 2rem;
  background: repeating-linear-gradient(45deg, rgba(198,154,58,.09) 0 10px, rgba(198,154,58,.04) 10px 20px);
}

/* ---------- Marqueur d'information manquante ---------- */

.a-completer {
  display: inline-block; padding: .12em .55em; border-radius: .3em;
  background: repeating-linear-gradient(45deg, rgba(198,154,58,.3) 0 6px, rgba(198,154,58,.14) 6px 12px);
  box-shadow: inset 0 0 0 1px rgba(184, 92, 67, .4);
  font-size: .85em; color: var(--terre-2); white-space: nowrap;
}

/* ---------- Liste à feuille ---------- */

.liste-feuille { display: grid; gap: .8rem; }
.liste-feuille li { position: relative; padding-left: 1.4rem; color: var(--encre-2); }
.liste-feuille li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: .36rem; height: .36rem; border-radius: 999px 999px 999px 2px;
  background: var(--terre); transform: rotate(-45deg);
}
.section--sombre .liste-feuille li { color: rgba(251, 246, 238, .78); }
.section--sombre .liste-feuille li::before { background: var(--or-clair); }

/* ---------- Valeurs ---------- */

.valeurs { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 1.8rem); }
.valeur { padding-top: 1.1rem; border-top: 1px solid rgba(198, 154, 58, .45); }
.valeur__nom { font-family: var(--f-titre); font-size: 1.15rem; color: var(--terre); margin-bottom: .5rem; letter-spacing: .04em; }
.valeur__texte { font-size: .9rem; color: var(--encre-2); }
.section--sombre .valeur__nom { color: var(--or-clair); }
.section--sombre .valeur__texte { color: rgba(251, 246, 238, .75); }

/* ---------- Pied de page ---------- */

.pied { background: var(--sous-bois); color: rgba(251, 246, 238, .74); padding-block: clamp(1.68rem, 3vw, 2.4rem) 1.2rem; }
.pied__haut { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); padding-bottom: 1.3rem; }
/* Logo complet de la charte, en moutarde claire sur le vert du pied */
.pied__logo { display: block; width: clamp(150px, 16vw, 190px); height: auto; }
.pied__role { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(251, 246, 238, .6); margin-top: 1.1rem; }
.pied__devise { margin-top: 1.3rem; font-family: var(--f-titre); font-style: italic; font-size: 1.15rem; color: var(--ivoire-2); max-width: 30ch; }
.pied__titre { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair); margin-bottom: 1.1rem; }
.pied__liste { display: grid; gap: .65rem; font-size: .92rem; }
.pied__liste a:hover { color: var(--blanc); }
.pied__bas {
  border-top: 1px solid rgba(251, 246, 238, .16); padding-top: 1.8rem;
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between; font-size: .78rem;
  color: rgba(251, 246, 238, .55);
}
.pied__bas { align-items: center; }
.pied__bas nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.pied__bas a:hover { color: var(--blanc); }

/* Signature « Site réalisé par Aide Numérique 37 » : pastille claire avec le logo
   de l'agence, en bas du pied de page de toutes les pages. */
.fait-par {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .35rem .95rem .35rem .5rem; border-radius: 999px;
  background: var(--blanc); color: var(--encre);
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .6);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pied__bas .fait-par:hover { color: var(--encre); transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .7); }
.fait-par picture { display: block; line-height: 0; }
.fait-par__logo { width: 28px; height: auto; }
.fait-par__texte { display: flex; flex-direction: column; line-height: 1.15; }
.fait-par__sur { font-size: .56rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); }
.fait-par__nom { font-size: .82rem; font-weight: 700; color: #1F3B73; }

/* ---------- Révélations ---------- */

.js .reveal {
  opacity: 0; transform: translate3d(0, 2rem, 0); filter: blur(5px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out);
  will-change: transform, opacity;
}
.js .reveal.vu { opacity: 1; transform: none; filter: blur(0); }
.reveal[data-delai="1"] { transition-delay: .09s; }
.reveal[data-delai="2"] { transition-delay: .18s; }
.reveal[data-delai="3"] { transition-delay: .27s; }
.reveal[data-delai="4"] { transition-delay: .36s; }

/* ---------- Adaptations ---------- */

@media (max-width: 1100px) {
  .nav { display: none; }
  .entete .btn { display: none; }
  /* Le médaillon est sorti du flux et les menus sont masqués : le bouton reste
  seul dans la barre, et « space-between » le calerait à gauche, sous le
  médaillon. La marge automatique le renvoie à droite. */
  .burger { display: inline-flex; margin-left: auto; }
  .barre { justify-content: space-between; }
  .hero__grille { grid-template-columns: 1fr; gap: 0; }
  .hero__media .cadre { transform: none; }
  /* Les boutons passent sous la photo, à la demande de Laura : le bloc de texte
     s'efface (display: contents) pour que ses éléments se rangent dans la
     grille, et les boutons prennent la dernière place. */
  .hero__texte { display: contents; }
  .hero__media { margin-top: 2.5rem; }
  .hero__texte > .duo-btn { order: 1; margin-top: 1.6rem; }
  .chemins { grid-template-columns: 1fr; }
  .chemin:nth-child(2) { margin-top: 0; }
  .duo, .duo--large, .duo--etroit { grid-template-columns: 1fr; gap: .9rem; }
  .duo--inverse .duo__media, .duo--photo-droite .duo__media { order: 0; }
  .parcours { grid-template-columns: 1fr; }
  .valeurs { grid-template-columns: repeat(2, 1fr); }
  .pied__haut { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .etapes, .avis, .orientations, .ebooks { grid-template-columns: 1fr; }
  .appel__choix { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie figure:nth-child(n) { grid-column: span 1; margin-top: 0; aspect-ratio: 1; }
  .duo-champs { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --r-l: 1.4rem; --barre: 64px; }
  body { font-size: 1rem; }
  .medaillon { --l0: 196px; --h0: 132px; --l1: 172px; --h1: 46px; }
  .medaillon__soleil { --w0: 48px; --x0: 74px; --y0: 12px;  --w1: 28px; --x1: 12px; --y1: 9px; }
  .medaillon__nom    { --w0: 156px; --x0: 20px; --y0: 67px; --w1: 114px; --x1: 46px; --y1: 11px; }
  .medaillon__metier { --w0: 156px; --x0: 20px; --y0: 109px; --w1: 114px; --x1: 46px; --y1: 36px; }
  .valeurs, .pied__haut { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }
  .duo-btn .btn { width: 100%; justify-content: space-between; }
  .soin { grid-template-columns: 1fr; }
}

/* Très petits téléphones (moins de 360 px) : Merriweather et Montserrat sont plus
   larges que les polices d'origine. Les grands titres réduisent pour que les mots
   longs (« accompagnement », « Transformation ») tiennent sur la ligne, le cadre
   sombre des appels resserre ses marges, et le texte des boutons peut passer à
   la ligne plutôt que de sortir du bouton. */
@media (max-width: 359px) {
  .t-xl { font-size: 1.95rem; }
  .t-l  { font-size: 1.7rem; }
  .titre { overflow-wrap: break-word; }
  .appel { padding: 2rem 1.25rem; }
  .btn { white-space: normal; text-align: left; }
  .surtitre { letter-spacing: .18em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; filter: none; }
  .bandeau__piste { animation: none; }
}

@media print {
  .entete, .panneau, .grain, .bandeau, .burger { display: none !important; }
  body { background: #fff; color: #000; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
}

/* ==========================================================================
   Carrousel du héros — plusieurs photographies qui se succèdent
   ========================================================================== */

.hero-diapo { position: relative; }
.hero-diapo__vues { position: absolute; inset: 0; }
.hero-diapo__vue {
  position: absolute; inset: 0; background: var(--nuit);
  opacity: 0; visibility: hidden;
  transition: opacity 1.8s var(--ease), visibility 0s linear 1.8s;
}
.hero-diapo__vue.est-active {
  opacity: 1; visibility: visible;
  transition: opacity 1.8s var(--ease), visibility 0s linear 0s;
}
/* Chaque vue porte son propre cadrage (variables posées sur la vue, voir
   outils/blocs_accueil.py, CADRAGES) : un point commun aux quatre photos
   coupait des têtes et laissait Laura sous le titre. La photo reste en plein
   écran ; seul le point gardé change d'une vue à l'autre. */
.hero-diapo__vue picture { position: absolute; inset: 0; display: block; }
.hero-diapo__vue img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--mobile-x, 50%) 0%;
}
@media (min-width: 821px) {
  .hero-diapo__vue img { object-position: var(--photo-x, 50%) var(--photo-y, 30%); }
  /* Sujet sur la gauche de la photo : l'image glisse vers la droite et son bord
     se fond dans le fond sombre. La gauche de l'écran est de toute façon
     couverte par le voile où se pose le texte.
     Les photos de Laura sont en hauteur : étirées sur toute la largeur, on n'en
     verrait qu'un bandeau de 40 %, un visage en gros plan. --largeur réduit la
     photo à une partie de l'écran, calée à droite et sur toute la hauteur, pour
     en montrer bien davantage (voir CADRAGES dans outils/blocs_accueil.py). */
  .hero-diapo__vue picture {
    left: var(--decale, 0%); right: auto; width: var(--largeur, 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fondu, 0%));
    mask-image: linear-gradient(90deg, transparent, #000 var(--fondu, 0%));
  }
}

/* Le voile appartient à la diapositive, posé entre la photographie et le texte.
   Placé au niveau du héros, il se retrouvait AU-DESSUS des légendes, qui sont
   enfermées dans le conteneur des vues et ne pouvaient pas le dépasser. */
.hero-diapo__voile {
  position: absolute; inset: 0; display: block; pointer-events: none;
  /* Sur téléphone, le texte occupe le bas de l'écran sur toute la largeur : le
     voile monte depuis le bas, sur la hauteur du texte, et laisse claire la
     partie haute de la photo où se trouve le sujet. Les paliers sont en rem
     plutôt qu'en pourcentage, parce que le texte a la même hauteur sur un
     petit écran que sur un grand. Un léger voile en haut garde le bouton du
     menu lisible sur une photo claire. */
  background:
    linear-gradient(180deg, rgba(22, 18, 14, .5) 0, rgba(22, 18, 14, 0) 7rem),
    linear-gradient(0deg, rgba(22, 18, 14, .92) 0, rgba(22, 18, 14, .86) 18rem,
                          rgba(22, 18, 14, .5) 25rem, rgba(22, 18, 14, 0) 33rem);
}
@media (min-width: 821px) {
  .hero-diapo__voile {
    background:
      linear-gradient(100deg, rgba(22, 18, 14, .92) 0%, rgba(22, 18, 14, .86) 30%,
                              rgba(22, 18, 14, .58) 50%, rgba(22, 18, 14, .2) 70%,
                              rgba(22, 18, 14, 0) 88%),
      /* Le haut est assombri sur toute la largeur : la barre de navigation y
         passe en libellés clairs, et une photographie lumineuse la rendrait
         illisible sans cela. */
      linear-gradient(180deg, rgba(22, 18, 14, .58) 0%, rgba(22, 18, 14, .28) 14%,
                              rgba(22, 18, 14, 0) 30%, rgba(22, 18, 14, 0) 62%,
                              rgba(22, 18, 14, .48) 100%);
  }
}

/* Le texte de chaque vue occupe la même colonne de gauche. */
.hero-diapo__legende {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--barre) + clamp(84px, 13vh, 150px));
  /* Le bas laisse passer la rangée de commandes : pastilles à gauche, flèches
     à droite. */
  padding-bottom: clamp(5.4rem, 8vh, 7rem);
  opacity: 0; transform: translate3d(0, 1.4rem, 0);
  transition: opacity 1s var(--ease-out) .4s, transform 1s var(--ease-out) .4s;
  pointer-events: none;
}
.hero-diapo__vue.est-active .hero-diapo__legende { opacity: 1; transform: none; pointer-events: auto; }

/* Commandes : pastilles de position et bouton de pause.
   Un contenu qui défile seul doit toujours pouvoir être arrêté. */
.hero-diapo__commandes {
  position: absolute; z-index: 4; left: 0; right: 0;
  bottom: clamp(1.1rem, 2.4vw, 2rem);
  display: flex; align-items: center; gap: 1.1rem;
}
.hero-diapo__points { display: flex; gap: .55rem; }
.hero-diapo__point {
  width: 2.4rem; height: 3px; border-radius: 99px;
  background: rgba(255, 252, 247, .34);
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.hero-diapo__point:hover { background: rgba(255, 252, 247, .6); }
.hero-diapo__point[aria-current="true"] { background: var(--or-clair); transform: scaleY(1.6); }
.hero-diapo__pause {
  width: 2.1rem; height: 2.1rem; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 252, 247, .34); color: var(--blanc);
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.hero-diapo__pause:hover { border-color: rgba(255, 252, 247, .7); background: rgba(255, 252, 247, .12); }
.hero-diapo__pause svg { width: .7rem; height: .7rem; }
.hero-diapo__pause .icone-play { display: none; }
.hero-diapo.est-en-pause .hero-diapo__pause .icone-play { display: block; }
.hero-diapo.est-en-pause .hero-diapo__pause .icone-pause { display: none; }

/* Flèches de défilement. Elles siègent en face des pastilles, dans la même
   rangée, plutôt qu'aux deux bords de l'image : à mi-hauteur, celle de gauche
   viendrait se poser sur le texte du héros, qui est calé de ce côté. */
.hero-diapo__fleches { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.hero-diapo__fleche {
  width: 2.9rem; height: 2.9rem; border-radius: 999px; flex: none;
  display: grid; place-items: center; color: var(--blanc);
  background: rgba(22, 18, 14, .34);
  border: 1px solid rgba(255, 252, 247, .34);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              transform .35s var(--ease);
}
.hero-diapo__fleche svg { width: 1rem; height: 1rem; }
.hero-diapo__fleche:hover { background: rgba(22, 18, 14, .62); border-color: rgba(255, 252, 247, .78); }
.hero-diapo__fleche:active { transform: scale(.93); }

@media (max-width: 600px) {
  /* Sur un téléphone, la rangée doit loger quatre pastilles, la pause et les
     deux flèches : les pastilles se resserrent, les flèches gardent leur
     surface de doigt. */
  .hero-diapo__commandes { gap: .7rem; }
  .hero-diapo__points { gap: .38rem; }
  .hero-diapo__point { width: 1.5rem; }
  .hero-diapo__fleches { gap: .4rem; }
}

/* ==========================================================================
   Carrousel d'avis — un témoignage à la fois, navigation par flèches
   ========================================================================== */

.avis-carrousel { position: relative; }
.avis-carrousel__scene {
  position: relative;
  display: grid;
  min-height: 1px;
}
.avis-carrousel__vue {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translate3d(0, .9rem, 0);
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s linear .55s;
  text-align: center;
  padding-inline: clamp(0rem, 6vw, 5rem);
}
.avis-carrousel__vue.est-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s linear 0s;
}
.avis-carrousel__etiquette {
  display: inline-block; padding: .34rem .9rem; border-radius: 999px;
  background: rgba(198, 154, 58, .14); color: var(--terre-2);
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
}
.avis-carrousel__texte {
  margin-top: 1.6rem;
  font-family: var(--f-titre); font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 2.15rem); line-height: 1.38;
  color: var(--brun); max-width: 30ch; margin-inline: auto;
}
.avis-carrousel__texte p + p { margin-top: .7em; }
/* Les avis Google sont longs : un corps plus petit et une ligne plus large,
   sans quoi le plus long occuperait tout l'écran. */
.avis-carrousel--long .avis-carrousel__vue { align-self: center; }
.avis-carrousel--long .avis-carrousel__texte {
  font-size: clamp(1.08rem, 1.55vw, 1.34rem); line-height: 1.6; max-width: 56ch;
}
.avis-carrousel__source { margin-top: 1.5rem; font-size: .9rem; color: var(--encre-2); }
.avis-carrousel__source strong { display: block; color: var(--encre); font-weight: 600; font-size: .98rem; }
.avis-carrousel__etoiles { margin-top: 1.1rem; display: flex; justify-content: center; gap: .22rem; color: var(--or); }
.avis-carrousel__etoiles svg { width: .95rem; height: .95rem; }

.avis-carrousel__barre {
  margin-top: clamp(2rem, 3.6vw, 2.8rem);
  display: flex; align-items: center; justify-content: center; gap: 1.4rem;
}
.avis-carrousel__fleche {
  width: 3.1rem; height: 3.1rem; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(62, 52, 38, .22); color: var(--brun);
  transition: box-shadow .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
}
.avis-carrousel__fleche svg { width: 1rem; height: 1rem; }
.avis-carrousel__fleche:hover { background: var(--terre); color: var(--ivoire); box-shadow: inset 0 0 0 1px var(--terre); }
.avis-carrousel__fleche:active { transform: scale(.94); }
.avis-carrousel__compteur {
  font-family: var(--f-titre); font-size: 1.05rem; color: var(--encre-2); min-width: 4.5rem; text-align: center;
}
.avis-carrousel__compteur strong { color: var(--terre); font-weight: 400; }

.section--sombre .avis-carrousel__texte { color: var(--blanc); }
.section--sombre .avis-carrousel__fleche { box-shadow: inset 0 0 0 1px rgba(251, 246, 238, .3); color: var(--ivoire); }
.section--sombre .avis-carrousel__fleche:hover { background: var(--or); color: var(--brun); box-shadow: inset 0 0 0 1px var(--or); }

/* ==========================================================================
   Cadres d'appareils — présentation des e-books
   ========================================================================== */

.appareils {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(1rem, 3vw, 3rem);
}

/* Ordinateur portable : écran bordé, socle, pied */
.appareil-ordi { width: min(100%, 560px); flex: 1 1 380px; }
.appareil-ordi__ecran {
  border: 10px solid var(--sous-bois);
  border-bottom-width: 14px;
  border-radius: 12px 12px 4px 4px;
  overflow: hidden; background: var(--sous-bois);
  box-shadow: var(--ombre);
}
.appareil-ordi__ecran img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; display: block; }
.appareil-ordi__socle {
  height: 11px; border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, var(--sous-bois-2), var(--sous-bois));
  margin-inline: -5%;
  position: relative;
}
.appareil-ordi__socle::after {
  content: ""; position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: 15%; height: 4px; border-radius: 0 0 5px 5px;
  background: rgba(251, 246, 238, .2);
}

/* Téléphone : bordure épaisse, encoche, boutons latéraux */
.appareil-tel { width: min(46vw, 214px); flex: none; }
.appareil-tel__corps {
  position: relative;
  border: 9px solid var(--sous-bois);
  border-radius: 30px;
  overflow: hidden; background: var(--sous-bois);
  box-shadow: var(--ombre);
}
.appareil-tel__corps::before {
  content: ""; position: absolute; z-index: 2; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 42%; height: 17px; border-radius: 0 0 11px 11px;
  background: var(--sous-bois);
}
.appareil-tel__corps img { width: 100%; aspect-ratio: 9 / 19; object-fit: cover; display: block; }

.appareils__legende {
  margin-top: 1.4rem; text-align: center;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2);
}

/* Bandeau « exemple » — tout ce qui est fictif doit se voir comme tel */
.demo {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .8rem; border-radius: 999px;
  background: rgba(198, 154, 58, .16);
  box-shadow: inset 0 0 0 1px rgba(198, 154, 58, .45);
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--terre-2);
}
.demo::before { content: ""; width: .35rem; height: .35rem; border-radius: 999px; background: var(--or); }

.encart-demo {
  padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1.3rem, 2.6vw, 2rem);
  border-radius: var(--r-m);
  background: rgba(198, 154, 58, .1);
  box-shadow: inset 0 0 0 1px rgba(198, 154, 58, .38);
}
.encart-demo p { color: var(--encre-2); font-size: .93rem; }
.encart-demo p + p { margin-top: .7rem; }

@media (max-width: 820px) {
  .appareils { flex-direction: column; align-items: center; gap: 2.2rem; }
  /* le socle déborde de 5 % de chaque côté de l'écran : l'ordinateur laisse
     cette marge pour ne pas dépasser de la page */
  .appareil-ordi { width: 90%; }
  .appareil-tel { width: 190px; }
}

/* ==========================================================================
   Panier des e-books
   --------------------------------------------------------------------------
   Un e-book est un fichier : on en achète un exemplaire, jamais deux. Il n'y a
   donc ni quantité, ni sélecteur de quantité — juste une liste de titres.
   ========================================================================== */

/* Bouton d'ajout : les deux libellés et les deux icônes sont écrits dans la
   page, et une classe décide lequel s'affiche. Le JavaScript n'a ni texte ni
   dessin à fabriquer, et la bascule reste réversible d'un clic. */
.btn--bascule .btn__dans { display: none; }
.btn--bascule.est-dedans .btn__hors { display: none; }
.btn--bascule.est-dedans .btn__dans { display: block; }
.btn--bascule.est-dedans {
  background: transparent; color: var(--encre);
  box-shadow: inset 0 0 0 1px rgba(62, 52, 38, .3);
}
.btn--bascule.est-dedans .btn__pastille { background: rgba(62, 52, 38, .08); }
.btn--bascule.est-dedans:hover { box-shadow: inset 0 0 0 1px rgba(62, 52, 38, .55); }

/* ---------- Barre de panier ----------------------------------------------
   Elle ne paraît qu'une fois un titre choisi, et jamais sur la page du panier.
   Panier vide, elle n'existe nulle part : le site en vitrine n'a donc rien à
   retirer le jour de la mise en ligne. */
.barre-panier {
  position: fixed; z-index: 95; left: 0; right: 0; bottom: 0;
  background: var(--sous-bois); color: var(--ivoire);
  box-shadow: 0 -18px 40px -24px rgba(58, 43, 34, .55);
  /* Pas d'animation d'entrée : une barre qui arrive par le bas doit être
     décalée pour commencer, et un fil d'animation gelé — onglet en arrière-plan,
     fenêtre masquée — la laisserait sous le pli, hors d'atteinte. Elle paraît
     donc d'un coup, au clic, ce qui fait déjà une réponse nette. */
}
.barre-panier__corps { display: flex; align-items: center; gap: 1rem; padding-block: .85rem; }
.barre-panier__etat { display: inline-flex; align-items: center; gap: .65rem; font-size: .9rem; }
.barre-panier__cabas { display: grid; place-items: center; color: var(--or-clair); }
.barre-panier__cabas svg { width: 1.5rem; height: 1.5rem; }
.barre-panier__total {
  margin-left: auto; font-family: var(--f-titre); font-size: 1.25rem; color: var(--or-clair);
  white-space: nowrap;
}
.barre-panier .btn { flex: none; }
/* Les paragraphes de la barre et de l'addition sont posés côte à côte : la
   marge générale entre deux paragraphes (« p + p ») n'y a pas de sens et
   décalait le prix vers le bas. */
.barre-panier__corps > p, .panier__addition-ligne > p { margin-top: 0; }
/* La barre recouvre le bas du document : on lui rend cette hauteur, sinon le
   dernier lien du pied de page reste inatteignable. */
body.avec-panier { padding-bottom: 5.7rem; }

/* ---------- Page du panier ------------------------------------------------ */

.panier-vide {
  text-align: center;
  padding: clamp(2.4rem, 5vw, 4rem) clamp(1.2rem, 3vw, 2.5rem);
  border-radius: var(--r-l); background: var(--ivoire-2);
  box-shadow: inset 0 0 0 1px rgba(62, 52, 38, .09);
}
.panier-vide__cabas {
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem;
  margin: 0 auto 1.3rem; border-radius: 999px;
  background: rgba(198, 154, 58, .14); color: var(--or);
}
.panier-vide__cabas svg { width: 1.6rem; height: 1.6rem; }
.panier-vide__texte { margin-top: .8rem; color: var(--encre-2); max-width: 48ch; margin-inline: auto; }

.panier__liste { display: grid; gap: 1rem; }
.panier__ligne {
  display: grid; grid-template-columns: 4.6rem 1fr auto auto;
  align-items: center; gap: clamp(.9rem, 2vw, 1.6rem);
  padding: .9rem 1.1rem .9rem .9rem;
  border-radius: var(--r-m); background: var(--blanc);
  box-shadow: inset 0 0 0 1px rgba(62, 52, 38, .09), var(--ombre-douce);
}
.panier__vignette {
  width: 4.6rem; border-radius: .5rem;
  box-shadow: 0 8px 18px -10px rgba(62, 52, 38, .45);
}
.panier__titre { font-family: var(--f-titre); font-size: 1.12rem; color: var(--brun); line-height: 1.24; }
.panier__detail {
  margin-top: .32rem; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-2);
}
.panier__prix { font-family: var(--f-titre); font-size: 1.3rem; color: var(--terre); white-space: nowrap; }
.panier__retirer {
  width: 2.4rem; height: 2.4rem; border-radius: 999px; flex: none;
  display: grid; place-items: center; color: var(--encre-2);
  box-shadow: inset 0 0 0 1px rgba(62, 52, 38, .16);
  transition: color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.panier__retirer svg { width: .85rem; height: .85rem; }
.panier__retirer:hover {
  color: var(--terre-2); background: rgba(184, 92, 67, .08);
  box-shadow: inset 0 0 0 1px rgba(184, 92, 67, .4);
}

.panier__addition { margin-top: clamp(.96rem, 1.8vw, 1.44rem); display: grid; gap: .7rem; }
.panier__addition-ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .95rem; color: var(--encre-2);
}
.panier__gratuit { font-size: .84rem; }
.panier__addition-ligne--total { margin-top: .4rem; padding-top: .9rem; border-top: var(--filet); }
.panier__addition-ligne--total p { font-family: var(--f-titre); font-size: 1.5rem; color: var(--brun); }
.panier__addition-ligne--total p + p { color: var(--terre); }

.panier__actions {
  margin-top: 1.7rem; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 1rem;
}
.lien-sobre {
  font-size: .84rem; color: var(--encre-2);
  border-bottom: 1px solid rgba(107, 91, 78, .35);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.lien-sobre:hover { color: var(--terre-2); border-color: rgba(184, 92, 67, .5); }
/* Flèche de retour : elle doit partir vers la gauche au survol, pas vers la
   droite comme les liens qui avancent. */
.lien-fleche--retour:hover svg { transform: translateX(-4px); }

.panier__commande {
  margin-top: clamp(1.2rem, 2.1vw, 1.68rem);
  padding-top: clamp(1.08rem, 1.8vw, 1.44rem);
  border-top: var(--filet);
}

.encart-demo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em; padding: .1rem .35rem; border-radius: .3rem;
  background: rgba(62, 52, 38, .08);
}

@media (max-width: 620px) {
  /* La ligne passe en deux rangées : vignette à gauche sur toute la hauteur,
     titre au-dessus du prix, croix en haut à droite. */
  .panier__ligne { grid-template-columns: 3.6rem 1fr auto; align-items: start; row-gap: 0; }
  .panier__vignette { width: 3.6rem; grid-row: 1 / span 2; }
  .panier__corps { grid-column: 2; grid-row: 1; }
  .panier__prix { grid-column: 2; grid-row: 2; justify-self: start; margin-top: .5rem; }
  .panier__retirer { grid-column: 3; grid-row: 1; }
}

@media (max-width: 600px) {
  /* La barre tient mal sur une seule ligne à cette largeur : le bouton passe
     en dessous, sur toute la largeur, là où le pouce le trouve. */
  .barre-panier__corps { flex-wrap: wrap; gap: .5rem .8rem; }
  .barre-panier__etat { font-size: .84rem; }
  .barre-panier__total { font-size: 1.15rem; }
  .barre-panier .btn {
    width: 100%; justify-content: space-between;
    padding: .66rem .66rem .66rem 1.2rem; font-size: .78rem;
  }
  .barre-panier .btn__pastille { width: 1.8rem; height: 1.8rem; }
  body.avec-panier { padding-bottom: 7.9rem; }
}

/* ==========================================================================
   Fiche d'un e-book — une page par titre
   --------------------------------------------------------------------------
   Composition reprise de la page produit de la référence (scène d'écrans,
   carte d'achat à cheval, aplat de couverture, bandeau au nom du livre,
   galerie en quinconce, texte éditorial), dans l'identité de Natur'Ola : la
   grande forme pâle est la feuille de la marque, pas une fleur.
   ========================================================================== */

/* Carte de la collection : la couverture et le titre mènent à la fiche. */
a.ebook__couv { transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
a.ebook__couv:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.ebook__titre a { transition: color .3s var(--ease); }
.ebook__titre a:hover { color: var(--terre); }
.ebook__pied { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.panier__titre a { transition: color .3s var(--ease); }
.panier__titre a:hover { color: var(--terre); }

/* Fil d'Ariane */
.ariane ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .65rem;
  font-size: .78rem; color: var(--encre-2);
}
.ariane li { display: inline-flex; align-items: center; gap: .65rem; }
.ariane li + li::before {
  content: ""; width: .3rem; height: .3rem; flex: none;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg); opacity: .55;
}
.ariane a { transition: color .3s var(--ease); }
.ariane a:hover { color: var(--terre); }
.ariane [aria-current] { color: var(--brun); }

/* ---------- 1. Scène d'ouverture ------------------------------------------ */
.scene-livre {
  position: relative; overflow: hidden; background: var(--sable);
  padding-top: calc(var(--barre) + clamp(5.5rem, 7vw, 6rem));
  /* le bas laisse la place à la carte d'achat, qui remonte sur la scène */
  padding-bottom: clamp(7rem, 11vw, 9.5rem);
}
.scene-livre .contenant { position: relative; z-index: 1; }
.scene-livre__feuille {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(64vw, 860px); left: -9vw; top: 26%;
  transform: rotate(-12deg);
  fill: var(--ble); opacity: .75;
}
.scene-livre__feuille .nervure { fill: none; stroke: var(--sable); stroke-width: .9; stroke-linecap: round; }
.scene-livre__auteure {
  margin-top: .7rem; font-family: var(--f-titre); font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.38rem); color: var(--encre-2);
}
.scene-livre__appareils { position: relative; max-width: 1040px; margin: clamp(2.4rem, 4.5vw, 3.6rem) auto 0; }
.scene-livre .appareil-ordi { width: 80%; margin-left: 3%; }
.scene-livre .appareil-tel { position: absolute; z-index: 2; right: 1%; bottom: -5%; width: 21%; }

/* ---------- 2. Carte d'achat ---------------------------------------------- */
.achat-conteneur { position: relative; z-index: 3; margin-top: calc(-1 * clamp(4.6rem, 7.5vw, 6.4rem)); }
.achat {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "v i p b"; align-items: center;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  padding: 1rem clamp(1.1rem, 2.4vw, 2rem) 1rem 1rem;
  border-radius: var(--r-l); background: var(--blanc);
  box-shadow: inset 0 0 0 1px rgba(198, 154, 58, .34), var(--ombre);
}
.achat__vignette {
  grid-area: v; width: 5.2rem; overflow: hidden;
  border-radius: 3px 8px 8px 3px; box-shadow: 0 10px 22px -12px rgba(58, 43, 34, .55);
}
.achat__vignette img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.achat__infos { grid-area: i; }
.achat__note { margin-top: .5rem; font-size: .86rem; line-height: 1.6; color: var(--encre-2); max-width: 54ch; }
.achat__prix {
  grid-area: p; font-family: var(--f-titre); font-size: clamp(1.8rem, 2.5vw, 2.3rem);
  line-height: 1; color: var(--terre); white-space: nowrap;
}
.achat__bouton { grid-area: b; }

/* ---------- 3. Le livre --------------------------------------------------- */
/* L'aplat de la couverture part du bord gauche de l'écran ; le texte, lui, se
   cale sur le bord droit du conteneur, comme le reste du site. */
.livre {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center;
  gap: clamp(2.4rem, 5.5vw, 6rem);
  padding-block: clamp(1.8rem, 3vw, 2.7rem);
  padding-right: max(var(--gouttiere), calc((100% - var(--maxw)) / 2 + var(--gouttiere)));
}
.livre__aplat {
  display: grid; place-items: center; align-self: stretch;
  padding: clamp(2.6rem, 5vw, 4.6rem) clamp(1.6rem, 4vw, 3.6rem);
  background: var(--sable); border-radius: 0 5.5rem 1.4rem 0;
}
.fiche__livre {
  position: relative; width: min(100%, 330px);
  border-radius: 3px 12px 12px 3px; overflow: hidden;
  box-shadow: 0 36px 60px -30px rgba(58, 43, 34, .6), 0 10px 22px -12px rgba(58, 43, 34, .35);
  transform: rotate(-1.5deg);
}
.fiche__livre img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.fiche__livre::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 7%; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .06) 62%, rgba(255, 255, 255, .14));
}
.livre__etiquettes { display: flex; flex-wrap: wrap; gap: .5rem; }
.etiquette {
  display: inline-block; padding: .34rem .9rem; border-radius: 999px;
  font-size: .64rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  background: rgba(62, 52, 38, .07); color: var(--brun);
}
.etiquette--or { background: rgba(198, 154, 58, .16); color: var(--terre-2); }
.livre__texte > .titre { margin-top: 1.1rem; }
.livre__texte > .accroche { margin-top: 1.1rem; max-width: 50ch; }
.livre__pour-qui { margin-top: .9rem; }
.livre__pour-qui .liste-feuille { margin-top: .9rem; }

.fiche__faits { margin-top: .9rem; display: flex; border-block: var(--filet); }
.fiche__faits > div { flex: 1 1 0; padding: .95rem 1rem .95rem 0; }
.fiche__faits > div + div { padding-left: 1.1rem; border-left: var(--filet); }
.fiche__faits dt { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-2); }
.fiche__faits dd { margin-top: .25rem; font-family: var(--f-titre); font-size: 1.2rem; color: var(--brun); }
.fiche__caisse { margin-top: .78rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.7rem; }
.fiche__prix { font-family: var(--f-titre); font-size: clamp(2.1rem, 3.2vw, 2.7rem); line-height: 1; color: var(--terre); }

/* ---------- 4. Bandeau au nom du livre ------------------------------------ */
/* À cheval entre le fond ivoire et le sable de la section suivante. */
.bandeau--titre {
  padding-block: clamp(.6rem, 1.4vw, 1.2rem);
  background: linear-gradient(180deg, var(--ivoire) 0 50%, var(--sable) 50% 100%);
  color: var(--or);
  /* Pas de fondu sur les bords ici : il effacerait aussi le fond sable, qui doit
     se raccorder sans couture à la section suivante. Le titre file hors champ. */
  -webkit-mask-image: none; mask-image: none;
}
.bandeau--titre .bandeau__mot { font-size: clamp(2.6rem, 6.2vw, 5.6rem); gap: clamp(2rem, 4vw, 3.6rem); }
.bandeau--titre .bandeau__mot::after {
  width: clamp(1.1rem, 1.9vw, 1.7rem); height: clamp(1.1rem, 1.9vw, 1.7rem);
  border-radius: 0; background: var(--terre-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 36C4 18 18 4 36 4 36 22 22 36 4 36Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 36C4 18 18 4 36 4 36 22 22 36 4 36Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 5. Trois recettes du livre ------------------------------------ */
.recettes-du-livre { padding-top: clamp(1.5rem, 2.7vw, 2.4rem); }
.plats { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(1.5rem, 5vw, 6rem); }
.plat { position: relative; overflow: hidden; border-radius: var(--r-m); background: var(--ble); }
.plat--haut { width: 80%; }
.plat--bas { width: 88%; justify-self: end; margin-top: clamp(1.8rem, 4.8vw, 4.2rem); }
.plat__media { aspect-ratio: 4 / 5; }
.plat--bas .plat__media { aspect-ratio: 5 / 4; }
.plat--vedette .plat__media { aspect-ratio: 1; }
.plat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.plat:hover .plat__media img { transform: scale(1.04); }
.plat__etiquette {
  position: absolute; top: 1rem; left: 1rem;
  padding: .38rem .8rem; border-radius: 999px; background: var(--blanc); color: var(--terre);
  font-size: .6rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.plat__nom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3.4rem 1.2rem 1.1rem;
  background: linear-gradient(180deg, rgba(22, 18, 14, 0), rgba(22, 18, 14, .66));
  color: var(--blanc); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}

.vedette {
  margin-top: clamp(1.5rem, 3.3vw, 3rem);
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: center;
  gap: clamp(2rem, 6vw, 6.5rem);
}
.vedette__devise {
  font-family: var(--f-titre); font-size: clamp(2.6rem, 5.4vw, 4.8rem);
  line-height: 1.02; letter-spacing: -.02em; color: var(--brun);
}
.vedette__nom {
  margin-top: 1.2rem; font-family: var(--f-titre); font-style: italic; font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: var(--terre);
}
.vedette__desc { margin-top: 1rem; color: var(--encre-2); max-width: 46ch; }

/* ---------- 6. Texte éditorial -------------------------------------------- */
.edito-livre { padding-top: clamp(1rem, 3vw, 2.5rem); overflow: clip; }
.edito-livre .contenant { position: relative; }
.edito-livre__trait {
  position: absolute; top: -3.2rem; left: max(-1.4rem, calc(var(--gouttiere) - 4rem));
  width: clamp(6.5rem, 11vw, 9.5rem); pointer-events: none;
  fill: none; stroke: var(--terre-3); stroke-width: .6; stroke-linecap: round; stroke-linejoin: round;
  opacity: .6; transform: rotate(-26deg);
}
.edito-livre__titre {
  /* décalé pour que la feuille au trait se pose avant le titre, pas dessus */
  padding-left: clamp(0rem, 5vw, 4.6rem);
  position: relative; font-family: var(--f-titre); font-style: italic; font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.15; color: var(--brun);
}
.edito-livre__colonnes {
  margin-top: clamp(1.08rem, 2.04vw, 1.68rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem);
  padding-left: clamp(0rem, 6vw, 6rem);
}
.edito-livre__sous-titre {
  margin-bottom: .7rem; font-size: .68rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--or-texte);
}

/* Sommaire en table des matières : des points de conduite relient chaque
   chapitre à son nombre de recettes. */
.sommaire { display: grid; }
.sommaire__ligne {
  display: flex; align-items: baseline; gap: .8rem;
  padding-block: .95rem; border-bottom: 1px solid rgba(62, 52, 38, .16);
}
.sommaire__ligne:first-child { border-top: 1px solid rgba(62, 52, 38, .16); }
.sommaire__chapitre { font-family: var(--f-titre); font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--brun); }
.sommaire__points { flex: 1 1 1rem; min-width: 1rem; border-bottom: 1px dotted rgba(62, 52, 38, .32); transform: translateY(-.28em); }
.sommaire__nb { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or-texte); white-space: nowrap; }

/* ---------- 8. Les autres e-books ----------------------------------------- */
.autres-livres__tete { text-align: center; margin-bottom: clamp(.96rem, 1.8vw, 1.44rem); }
.livres-cartes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: center; gap: clamp(1.2rem, 3vw, 2.4rem);
}
.livre-carte {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border-radius: var(--r-l); background: var(--blanc);
  box-shadow: inset 0 0 0 1px rgba(198, 154, 58, .26);
  transition: box-shadow .5s var(--ease);
}
.livre-carte:hover { box-shadow: inset 0 0 0 1px rgba(198, 154, 58, .5), var(--ombre-douce); }
.livre-carte__couv {
  width: 72%; overflow: hidden; border-radius: 3px 10px 10px 3px;
  box-shadow: 0 22px 36px -22px rgba(58, 43, 34, .55);
}
.livre-carte__couv img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.livre-carte__feuille { display: flex; align-items: center; gap: .8rem; width: 100%; margin-top: 1.4rem; color: var(--or); }
.livre-carte__feuille::before, .livre-carte__feuille::after { content: ""; flex: 1; height: 1px; background: rgba(198, 154, 58, .32); }
.livre-carte__feuille svg { width: 1.05rem; height: 1.05rem; flex: none; }
.livre-carte__titre {
  margin-top: 1rem; font-family: var(--f-titre); font-weight: 400;
  font-size: 1.35rem; line-height: 1.2; color: var(--brun);
}
.livre-carte__titre a { transition: color .3s var(--ease); }
.livre-carte__titre a:hover { color: var(--terre); }
.livre-carte__meta { margin-top: .45rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); }
.livre-carte .lien-fleche { margin-top: 1.1rem; }
.livre-carte__bouton { margin-top: 1.2rem; }

/* ---------- Adaptations --------------------------------------------------- */
@media (max-width: 1100px) {
  .livre { grid-template-columns: 1fr; padding-right: 0; gap: 2.6rem; }
  .livre__aplat { margin-right: var(--gouttiere); }
  .livre__texte { padding-inline: var(--gouttiere); }
  .vedette { grid-template-columns: 1fr; }
  .edito-livre__colonnes { padding-left: 0; }
}
@media (max-width: 820px) {
  .scene-livre .appareil-ordi { width: 90%; margin-left: 0; }
  .scene-livre .appareil-tel { width: 31%; right: 0; bottom: -9%; }
  .scene-livre .appareil-tel__corps { border-width: 6px; border-radius: 20px; }
  .scene-livre .appareil-tel__corps::before { height: 11px; border-radius: 0 0 7px 7px; }
  .achat { grid-template-columns: 4.2rem minmax(0, 1fr) auto; grid-template-areas: "v i i" "p p b"; }
  .achat__vignette { width: 4.2rem; }
  .plats { grid-template-columns: 1fr; gap: 1.6rem; }
  .plat--haut, .plat--bas { width: 100%; margin-top: 0; }
  .plat--haut .plat__media, .plat--bas .plat__media { aspect-ratio: 4 / 3; }
  .edito-livre__colonnes { grid-template-columns: 1fr; }
  .edito-livre__titre { padding-left: 0; padding-right: 4.5rem; }
  .edito-livre__trait { left: auto; right: -1.2rem; top: -2.6rem; width: 6rem; }
  .livres-cartes { grid-template-columns: minmax(0, 360px); }
}
@media (max-width: 460px) {
  .achat { grid-template-areas: "v i i" "p p p" "b b b"; }
  .achat__bouton .btn { width: 100%; justify-content: space-between; }
  .fiche__faits > div { padding-right: .6rem; }
  .fiche__faits > div + div { padding-left: .7rem; }
  .fiche__faits dd { font-size: 1.05rem; }
}

/* ---------- Liens en boutons ----------------------------------------------
   À la demande de Laura, les liens texte (« Parlons de votre projet → »,
   « Découvrir le livre → »…) sont des boutons, sur téléphone comme sur
   ordinateur : orange plein, texte blanc, calés à droite, aux proportions des
   autres boutons pleins du site. Le lien de retour du panier reste un lien :
   en bouton orange, il concurrencerait « Valider ma commande ». */
.lien-fleche:not(.lien-fleche--retour) {
  display: flex; width: fit-content; margin-left: auto;
  align-items: center; gap: .75rem;
  padding: .85rem .85rem .85rem 1.6rem; border-radius: 999px;
  background: var(--terre); color: var(--blanc);
  font-size: .82rem; font-weight: 500; letter-spacing: .02em;
  box-shadow: 0 14px 28px -16px rgba(184, 92, 67, .75);
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.lien-fleche:not(.lien-fleche--retour):hover { background: var(--terre-2); }
.lien-fleche:not(.lien-fleche--retour):active { transform: scale(.978); }
/* La flèche passe dans une pastille, comme sur les autres boutons du site. */
.lien-fleche:not(.lien-fleche--retour) svg {
  box-sizing: border-box; width: 2rem; height: 2rem; padding: .61rem;
  border-radius: 999px; background: rgba(255, 252, 247, .18);
}
/* Dans les blocs centrés (cartes et en-tête des fiches e-books), le bouton
   reste centré : calé à droite, il paraîtrait décalé. */
.livre-carte .lien-fleche, .autres-livres__tete .lien-fleche { margin-inline: auto; }

/* ---------- Agenda des ateliers (page Taplink de Laura) --------------------
   La page d'inscription est intégrée telle quelle, sous le texte, sur toute la
   largeur de l'écran et au format 16:9 demandés par Laura. À 1250 × 704 px, la
   page tient entière (son contenu s'arrête à 702 px). Sur téléphone, un 16:9
   ne ferait que 210 px de haut : le cadre y reprend une hauteur réglée sur le
   contenu. */
.agenda__texte { max-width: 64ch; }
.agenda__cadre {
  margin-top: clamp(1.2rem, 2.4vw, 2rem);
  background: #F2F2F2;
  border-top: 1px solid rgba(62, 52, 38, .1);
}
.agenda__cadre { position: relative; }
.agenda__cadre iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
/* Bouton « Ouvrir la page d'inscription », posé en bas à droite de la page
   affichée, en verre dépoli à la demande de Laura : on devine la page à travers. */
.agenda__ouvrir {
  position: absolute; z-index: 2;
  bottom: clamp(1rem, 2.4vw, 2rem); right: clamp(1rem, 2.4vw, 2rem);
}
.btn--verre {
  color: var(--brun);
  background: rgba(255, 252, 247, .36);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 12px 32px -14px rgba(58, 43, 34, .4);
}
.btn--verre .btn__pastille { background: var(--terre); color: var(--blanc); }
.btn--verre:hover { background: rgba(255, 252, 247, .62); }
@media (max-width: 820px) {
  /* Sur écran étroit, la colonne de Taplink prend toute la largeur : le cadre
     s'allonge pour que le bouton, en bas à droite, se pose sous son contenu. */
  .agenda__cadre iframe { aspect-ratio: auto; height: 900px; }
  .agenda__ouvrir { right: 1rem; bottom: 1.2rem; }
  .agenda__ouvrir .btn { white-space: nowrap; }
}
@media (max-width: 600px) {
  .agenda__cadre iframe { height: 960px; }
}

@media print {
  .barre-panier { display: none !important; }
  body.avec-panier { padding-bottom: 0; }
}