/* ═══════════════════════════════════════════
   1. SYSTÈME DE DESIGN — échelles fluides
   ═══════════════════════════════════════════ */
:root{
  --cream:#FDFBF7; --beige:#F4F1EA; --sand:#EBE5D8;
  --forest:#2C3E2B; --brown:#3A3530;
  --sage:#7D8B67; --olive:#6E7A56; --clay:#B8A98C;

  /* Typographie fluide : aucun saut brutal entre breakpoints */
  --t-xs:   clamp(.75rem, .73rem + .10vw, .8125rem);
  --t-sm:   clamp(.8125rem, .79rem + .12vw, .875rem);
  --t-base: clamp(1rem, .97rem + .17vw, 1.0625rem);
  --t-lg:   clamp(1.0625rem, 1.02rem + .22vw, 1.1875rem);
  --t-h4:   clamp(1.15rem, 1.1rem + .3vw, 1.3125rem);
  --t-h3:   clamp(1.35rem, 1.24rem + .55vw, 1.75rem);
  --t-h2:   clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
  --t-h1:   clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem);
  --t-quote:clamp(1.1rem, 1.02rem + .4vw, 1.25rem);

  --pad-section: clamp(3rem, 2.3rem + 3.2vw, 5rem);
  --gutter:      clamp(1.25rem, .85rem + 1.7vw, 2.1875rem);
  --shell:       1400px;

  /* Ombres teintées chaud plutôt que grises */
  --sh-md: 0 18px 40px -26px rgba(44,62,43,.35);
  --sh-lg: 0 34px 80px -44px rgba(44,62,43,.5);

  --r-card: clamp(16px, 13px + .6vw, 22px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 78px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  font-size:var(--t-base);
  line-height:1.7;
  background:var(--cream);
  color:var(--brown);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.font-serif{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500; color:var(--forest);
  text-wrap:balance; margin:0;
}
p{ text-wrap:pretty; margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

/* Les ancres ne passent plus sous le header fixe */
[id]{ scroll-margin-top:calc(var(--header-h) + 24px); }

.shell{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--pad-section); }

/* Grain papier : réchauffe les aplats crème */
body::after{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.032;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════
   2. ACCESSIBILITÉ
   ═══════════════════════════════════════════ */
.skip-link{
  position:absolute; left:var(--gutter); top:-100px; z-index:200;
  background:var(--forest); color:var(--cream);
  padding:14px 24px; border-radius:999px; font-size:var(--t-sm);
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:16px; }
:focus-visible{ outline:2px solid var(--olive); outline-offset:3px; border-radius:4px; }
.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;
}

/* ═══════════════════════════════════════════
   3. BOUTONS — cibles tactiles ≥ 48 px
   ═══════════════════════════════════════════ */
.btn{
  --btn-bg:var(--olive); --btn-fg:var(--cream); --btn-bd:var(--olive);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; min-height:52px; padding:.95rem 2rem;
  font-size:var(--t-sm); line-height:1.2;
  border:1px solid var(--btn-bd); border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg);
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease), transform .3s var(--ease), box-shadow .4s var(--ease);
}
/* Remplissage animé depuis le bas */
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--forest); transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateY(0); }
.btn:hover{ color:var(--cream); border-color:var(--forest); box-shadow:var(--sh-md); }
.btn:active{ transform:scale(.975); }

.btn--outline{ --btn-bg:transparent; --btn-fg:var(--forest); --btn-bd:rgba(44,62,43,.28); }
.btn--light{ --btn-bg:var(--cream); --btn-fg:var(--brown); --btn-bd:var(--cream); }
.btn--light:hover{ border-color:var(--forest); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:44px; color:var(--forest); font-size:var(--t-sm);
}
.link-arrow span{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .45s var(--ease); padding-bottom:2px;
}
.link-arrow:hover span{ background-size:100% 1px; }
.link-arrow svg{ transition:transform .4s var(--ease); }
.link-arrow:hover svg{ transform:translateX(6px); }

/* ═══════════════════════════════════════════
   4. LABELS DE SECTION
   ═══════════════════════════════════════════ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase;
  color:var(--olive); font-weight:500;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:currentColor; opacity:.55; }

/* ═══════════════════════════════════════════
   5. RÉVÉLATIONS AU SCROLL (≡ Webflow IX2)
   ═══════════════════════════════════════════ */
[data-reveal]{
  opacity:0; transform:translateY(32px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-36px); }
[data-reveal="right"]{ transform:translateX(36px); }
[data-reveal="zoom"]{ transform:scale(.95); }

/* ═══════════════════════════════════════════
   6. HEADER + NAVIGATION
   ═══════════════════════════════════════════ */
.progress{
  position:fixed; top:0; left:0; height:2px; z-index:120;
  width:var(--p,0%); background:linear-gradient(90deg,var(--sage),var(--olive));
}
.site-header{
  position:fixed; top:0; inset-inline:0; z-index:100;
  transition:background-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.site-header.scrolled{
  background:rgba(253,251,247,.9);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 rgba(44,62,43,.08);
}
/* Se rétracte en descendant, revient en remontant */
.site-header.hidden-up{ transform:translateY(-100%); }

.nav-link{
  position:relative; padding:.4rem 0; font-size:var(--t-sm);
  color:rgba(58,53,48,.72); transition:color .3s var(--ease);
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--forest); transition:width .4s var(--ease);
}
.nav-link:hover{ color:var(--forest); }
.nav-link:hover::after,.nav-link[aria-current="true"]::after{ width:100%; }
.nav-link[aria-current="true"]{ color:var(--forest); }

/* flex + gap : géométrie prévisible, indispensable pour que la croix se referme pile */
.burger{
  width:48px; height:48px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  background:none; border:0; cursor:pointer; padding:0;
}
.burger span{
  display:block; width:24px; height:1.5px; background:var(--forest); border-radius:2px;
  transition:transform .4s var(--ease), opacity .25s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.4); }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:95; background:var(--cream);
  display:flex; flex-direction:column;
  padding:calc(var(--header-h) + 24px) var(--gutter) max(24px,env(safe-area-inset-bottom));
  overflow-y:auto; overscroll-behavior:contain;
  clip-path:circle(0% at calc(100% - 44px) 44px);
  visibility:hidden;
  transition:clip-path .65s var(--ease), visibility 0s linear .65s;
}
.mobile-nav.open{
  visibility:visible; clip-path:circle(150% at calc(100% - 44px) 44px);
  transition:clip-path .7s var(--ease), visibility 0s;
}
.mobile-nav a.m-link{
  display:block; padding:.75rem 0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.75rem,1.4rem + 1.7vw,2.5rem);
  color:var(--forest); line-height:1.25;
  border-bottom:1px solid rgba(44,62,43,.1);
  opacity:0; transform:translateY(22px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-nav.open a.m-link{ opacity:1; transform:none; transition-delay:var(--d,0ms); }
/* liens de contact du menu : cible tactile confortable */
.mobile-nav .m-foot a{ min-height:44px; }
/* liens de listes du footer : la cible tactile porte sur le lien, pas sur le <li> */
footer nav ul a{ display:inline-flex; align-items:center; min-height:40px; }
/* logo : cible tactile suffisante */
.site-header a[aria-label]{ padding-block:5px; }

/* Monogramme "ED" : calligraphie, sans cercle, remplace le nom écrit en toutes lettres */
.logo-mark{
  display:inline-flex; align-items:baseline; flex:none;
  font-family:'Pinyon Script',cursive; font-weight:400;
  color:var(--forest); line-height:1;
  font-size:clamp(2.1rem,1.85rem + 1.1vw,2.7rem);
  transition:color .35s var(--ease);
}
.site-header a[aria-label]:hover .logo-mark{ color:var(--olive); }
.mobile-nav .m-foot{
  margin-top:auto; padding-top:2.5rem;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease) .35s, transform .5s var(--ease) .35s;
}
.mobile-nav.open .m-foot{ opacity:1; transform:none; }
body.nav-open{ overflow:hidden; }

/* ═══════════════════════════════════════════
   7. MÉDIAS & CARTES
   ═══════════════════════════════════════════ */
.media{ overflow:hidden; background:var(--sand); display:block; }
.media img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.media:hover img{ transform:scale(1.045); }

/* Cartes flottantes (citation du hero, pastille "5,0", label "Le cabinet") :
   bordure fine + double ombre pour qu'elles se détachent nettement de la photo/section derrière elles */
.float-card{
  background:var(--cream);
  border:1px solid rgba(44,62,43,.09);
  box-shadow:
    0 2px 6px rgba(44,62,43,.10),
    0 22px 44px -20px rgba(44,62,43,.4),
    0 48px 90px -36px rgba(44,62,43,.3);
}

/* Cartes : élévation permanente (ombre double, chaude) pour qu'elles se détachent du fond */
.card{
  background:var(--beige);
  border:1px solid rgba(44,62,43,.10);
  border-radius:var(--r-card);
  box-shadow:
    0 1px 2px rgba(44,62,43,.05),
    0 10px 24px -16px rgba(44,62,43,.26),
    0 28px 56px -36px rgba(44,62,43,.24);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
@media (hover:hover){
  .card:hover{
    transform:translateY(-6px);
    border-color:rgba(44,62,43,.17);
    box-shadow:
      0 2px 4px rgba(44,62,43,.06),
      0 20px 40px -20px rgba(44,62,43,.34),
      0 48px 90px -48px rgba(44,62,43,.4);
  }
}
/* Frise de progression (section "Déroulement") : traverse toute la largeur de la section
   avec un dégradé forêt → sauge → argile — les points restent alignés sur les cartes 01/02/03 */
.progress-track{
  top:50%; left:0; right:0; height:3px; transform:translateY(-50%);
  background:linear-gradient(90deg, var(--forest), var(--sage) 50%, var(--clay));
  border-radius:3px;
}
.progress-dot{
  position:relative; display:block; width:20px; height:20px; border-radius:50%;
  border:4px solid var(--cream); box-shadow:0 0 0 1.5px rgba(44,62,43,.16);
}

/* Encarts de tarifs : fond contrasté + élévation propre, pour bien se détacher de la section */
.inset{
  background:var(--beige);
  border:1px solid rgba(44,62,43,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 10px 24px -16px rgba(44,62,43,.28),
    0 24px 48px -30px rgba(44,62,43,.22);
}

/* ── Lavis de fond : dégradés très doux, façon papier aquarellé ── */
.wash-cream{
  background-color:var(--cream);
  background-image:
    radial-gradient(68% 52% at 6% -6%, rgba(235,229,216,.55), transparent 64%),
    radial-gradient(52% 44% at 96% 104%, rgba(199,214,180,.24), transparent 66%);
}
.wash-beige{
  background-color:var(--beige);
  background-image:
    radial-gradient(62% 50% at 94% -4%, rgba(253,251,247,.8), transparent 62%),
    radial-gradient(58% 48% at 2% 102%, rgba(224,213,186,.5), transparent 68%);
}

.price-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.25rem;
  padding-block:.9rem; position:relative;
}
.price-row+.price-row{ border-top:1px solid rgba(44,62,43,.1); }
.price-row::after{
  content:''; position:absolute; left:-.75rem; top:50%; translate:0 -50%;
  width:3px; height:60%; border-radius:2px; background:var(--sage);
  transition:height .35s var(--ease), opacity .35s var(--ease);
}
@media (hover:hover){ .price-row:hover::after{ height:0; opacity:0; } }

/* Besoins sous forme d'étiquettes : se lisent d'un coup d'œil, sans pavé de texte */
.tag-list{ list-style:none; padding:0; margin:1.25rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem; }
.tag{
  display:inline-flex; align-items:center; padding:.42rem .9rem; border-radius:999px;
  background:rgba(235,229,216,.6); border:1px solid rgba(44,62,43,.08);
  font-size:var(--t-xs); color:rgba(44,62,43,.82); line-height:1.3;
}
.tag--link{ background:transparent; border-color:rgba(44,62,43,.25); color:var(--forest); transition:background .35s var(--ease), color .35s var(--ease); }
.tag--link:hover{ background:var(--forest); color:var(--cream); }
.tag-list--sm{ margin-top:auto; }
.tag-list--sm .tag{ background:var(--beige); }
.care-note{ margin-top:1rem; font-size:var(--t-xs); line-height:1.6; color:rgba(58,53,48,.45); }

/* Accompagnements spécifiques (enfants, femmes enceintes, sportifs) */
.spec-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--cream); padding:clamp(1.6rem,1.3rem + 1.2vw,2.25rem);
}
.spec-card::before{ content:''; position:absolute; inset:0 0 auto; height:4px; background:var(--accent); }
.spec-icon{
  display:grid; place-items:center; width:58px; height:58px; border-radius:50%;
  background:var(--beige); color:var(--forest); margin-bottom:1.25rem;
}
.spec-kicker{ font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--sage); }
.spec-title{ margin-top:.45rem; font-size:var(--t-h3); line-height:1.15; }
.spec-text{ margin:.8rem 0 1.4rem; color:rgba(58,53,48,.65); line-height:1.7; font-size:var(--t-sm); }
/* l'élément du bas (étiquettes ou référence) se cale en pied de carte : cartes alignées */
.spec-proof{
  margin-top:auto; padding:1rem 1.1rem; border-radius:14px; background:var(--beige);
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:var(--t-lg); line-height:1.35; color:var(--forest);
}

.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.1rem; border-radius:999px;
  background:var(--cream); border:1px solid rgba(44,62,43,.1);
  font-size:var(--t-sm); color:rgba(58,53,48,.8);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.chip-dot{ width:5px; height:5px; border-radius:50%; background:var(--sage); transition:background .35s var(--ease); }
@media (hover:hover){
  .chip:hover{ background:var(--forest); color:var(--cream); border-color:var(--forest); transform:translateY(-2px); }
  .chip:hover .chip-dot{ background:var(--cream); }
}

/* ═══════════════════════════════════════════
   8. CARROUSEL TÉMOIGNAGES — une seule ligne à toute taille
   ═══════════════════════════════════════════ */
.testi-carousel{ display:flex; align-items:center; gap:.75rem; }

.snap-row{
  display:flex; flex:1; min-width:0;
  /* cartes de même hauteur : le texte long est tronqué et déroulé via "Voir plus" */
  align-items:stretch;
  gap:1rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1);
  scrollbar-width:none;
}
.snap-row::-webkit-scrollbar{ display:none; }
/* largeur de carte fixe : garantit une seule ligne, jamais un passage en grille */
.snap-row>*{ scroll-snap-align:start; flex:0 0 min(380px,84vw); }
/* Le survol standard des cartes (.card:hover) les soulève de 6px — dans ce carrousel
   défilant horizontalement, tout mouvement vertical rend la ligne "scrollable" en Y,
   ce qui provoque un scroll de page qui accroche au survol. On garde ici le retour
   visuel (ombre plus marquée) sans jamais déplacer la carte verticalement. */
@media (hover:hover){
  .snap-row .card:hover{
    transform:none;
    box-shadow:
      0 2px 4px rgba(44,62,43,.06),
      0 20px 40px -20px rgba(44,62,43,.34),
      0 48px 90px -48px rgba(44,62,43,.4);
  }
}

/* Citation tronquée à 6 lignes ; fondu en sortie plutôt qu'une coupe brute au milieu d'un mot,
   le bouton "Voir plus" ne s'affiche que si le texte déborde réellement */
.testi-quote{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden;
}
.testi-quote:not(.expanded){
  mask-image:linear-gradient(to bottom, #000 74%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 74%, transparent 100%);
}
.testi-quote.expanded{ display:block; -webkit-line-clamp:unset; overflow:visible; }
.testi-more{
  display:none; margin-top:.6rem; padding:0; background:none; border:0; cursor:pointer;
  font-size:var(--t-xs); color:var(--olive); text-decoration:underline; text-underline-offset:3px;
}
.testi-more.show{ display:inline-block; }
/* le pied (avatar + nom) reste calé en bas, quelle que soit la longueur du texte au-dessus */
.testi-foot{ margin-top:auto; }

/* Pastille d'initiale : jamais une photo d'inconnu associée au nom d'une vraie personne */
.avatar{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--sand); color:var(--forest);
  font-family:'Cormorant Garamond',Georgia,serif; font-size:1.25rem; line-height:1;
}
/* Puces de pagination : même style et même rôle de navigation à toutes les tailles */
.dots{ display:flex; gap:.5rem; justify-content:center; margin-top:1.5rem; }
.dot{ position:relative; width:7px; height:7px; border-radius:50%; background:rgba(44,62,43,.2); border:0; padding:0; cursor:pointer; transition:all .35s var(--ease); }
/* zone tactile élargie sans changer le visuel */
.dot::before{ content:''; position:absolute; inset:-18px -9px; }
.dot[aria-current="true"]{ width:24px; border-radius:4px; background:var(--olive); }
@media (hover:hover){
  .dot:not([aria-current="true"]):hover{ background:rgba(44,62,43,.4); }
}

/* ═══════════════════════════════════════════
   9. FAQ
   ═══════════════════════════════════════════ */
.faq-item{ border-bottom:1px solid rgba(44,62,43,.12); }
.faq-head{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.5rem; padding:1.6rem 0; background:none; border:0; cursor:pointer;
  text-align:left; color:var(--forest);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:var(--t-h4); line-height:1.35;
  transition:color .3s var(--ease);
}
.faq-head:hover{ color:var(--olive); }
.faq-icon{ flex:none; margin-top:.35rem; color:var(--sage); transition:transform .45s var(--ease); }
.faq-item[data-open="true"] .faq-icon{ transform:rotate(135deg); }
.faq-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.faq-item[data-open="true"] .faq-panel{ grid-template-rows:1fr; }
.faq-panel>div{ overflow:hidden; }
.faq-panel p{ padding-bottom:1.6rem; padding-right:2rem; font-size:var(--t-sm); line-height:1.8; color:rgba(58,53,48,.68); }

/* ═══════════════════════════════════════════
   10. BANDEAU DÉFILANT
   ═══════════════════════════════════════════ */
.marquee{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee__track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee span{
  display:inline-flex; align-items:center; gap:2.5rem; padding-inline:1.25rem;
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
  font-size:clamp(1.1rem,.95rem + .7vw,1.6rem); color:rgba(44,62,43,.42);
  white-space:nowrap;
}

/* ═══════════════════════════════════════════
   11. BARRE CTA MOBILE + RETOUR HAUT
   ═══════════════════════════════════════════ */
.mobile-cta{
  position:fixed; inset-inline:0; bottom:0; z-index:90;
  display:flex; gap:.65rem; align-items:center;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(253,251,247,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(44,62,43,.1);
  transform:translateY(110%); transition:transform .5s var(--ease);
}
.mobile-cta.show{ transform:none; }
@media (min-width:1024px){ .mobile-cta{ display:none; } }

/* Sur mobile, la barre CTA occupe déjà le bas : un seul élément flottant */
.to-top{ display:none; }
@media (min-width:1024px){ .to-top{ display:grid; } }
.to-top{
  position:fixed; right:var(--gutter); bottom:var(--gutter);
  z-index:88; width:48px; height:48px; border-radius:50%;
  place-items:center; border:1px solid rgba(44,62,43,.15);
  background:rgba(253,251,247,.94); color:var(--forest); cursor:pointer;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:all .45s var(--ease);
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--forest); color:var(--cream); border-color:var(--forest); }

/* Bouton flottant "Prendre rendez-vous" (ordinateur uniquement) */
.desktop-cta{ display:none; }
@media (min-width:1024px){
  .desktop-cta{
    display:inline-flex; align-items:center; gap:.6rem;
    position:fixed; left:var(--gutter); bottom:var(--gutter);
    z-index:88; padding:.85rem 1.5rem .85rem 1.15rem; border-radius:999px;
    background:var(--olive); color:var(--cream); font-size:var(--t-sm); white-space:nowrap;
    box-shadow:var(--sh-md);
    opacity:0; transform:translateY(12px) scale(.94); pointer-events:none;
    transition:opacity .45s var(--ease), transform .45s var(--ease), background .35s var(--ease);
  }
}
.desktop-cta.show{ opacity:1; transform:none; pointer-events:auto; }
.desktop-cta:hover{ background:var(--forest); }

/* ═══════════════════════════════════════════
   12. ARTICLES DE BLOG
   ═══════════════════════════════════════════ */
.article-back{ font-size:var(--t-sm); }
.article-back svg{ transform:rotate(180deg); transition:transform .4s var(--ease); }
.article-back:hover svg{ transform:rotate(180deg) translateX(6px); }

.article-hero{ border-radius:var(--r-card); aspect-ratio:21/10; }
@media (max-width:640px){ .article-hero{ aspect-ratio:4/3.2; } }

.prose{ max-width:66ch; margin-inline:auto; }
.prose > * + *{ margin-top:1.4em; }
.prose p{ font-size:var(--t-base); line-height:1.85; color:var(--brown); }
.prose h2{
  font-size:var(--t-h3); line-height:1.25; margin-top:2.2em;
  padding-top:.2em;
}
.prose h2 + p{ margin-top:.9em; }
.prose ul,.prose ol{ padding-left:1.35rem; }
.prose li{ margin-top:.55em; line-height:1.8; color:var(--brown); }
.prose li::marker{ color:var(--sage); }
.prose li strong{ color:var(--forest); }
.prose strong{ color:var(--forest); font-weight:600; }
.prose blockquote{
  border-left:2px solid var(--sage); margin-inline:0; padding:.2em 0 .2em 1.35rem;
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
  font-size:var(--t-lg); color:var(--forest); line-height:1.6;
}
.prose .lead{ font-size:var(--t-lg); color:rgba(58,53,48,.78); line-height:1.75; }

.article-cta{
  border-radius:var(--r-card); background:var(--beige);
  padding:clamp(1.5rem,1.2rem + 1.4vw,2.25rem); text-align:center;
}

.tag-pill{
  display:inline-block; padding:.35rem .85rem; border-radius:999px;
  font-size:var(--t-xs); color:rgba(44,62,43,.8); background:var(--beige);
}

.related-card{ display:block; }
.related-card .media{ border-radius:var(--r-card); aspect-ratio:4/3; }

/* ═══════════════════════════════════════════
   13. DÉCOR BOTANIQUE
   ═══════════════════════════════════════════ */
@keyframes drift{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-16px) rotate(1.6deg)} }
.drift{ animation:drift 12s ease-in-out infinite; }
.drift-slow{ animation:drift 18s ease-in-out infinite; }
.decor{ position:absolute; pointer-events:none; z-index:0; }

/* ═══════════════════════════════════════════
   15. POLISH GÉNÉRAL
   ═══════════════════════════════════════════ */
/* Sélection de texte teintée plutôt que le bleu par défaut du navigateur */
::selection{ background:var(--sage); color:var(--cream); }
::-moz-selection{ background:var(--sage); color:var(--cream); }

/* Pas de halo gris au tap sur mobile ; retour tactile propre à la place */
a,button{ -webkit-tap-highlight-color:transparent; }
@media (hover:none){
  .btn:active,.car-arrow:active,.dot:active,.chip:active{ transform:scale(.96); }
  .card:active{ transform:scale(.985); }
}

/* Photos : légère apparition en fondu à leur chargement plutôt qu'un pop-in brut
   (même logique que les révélations au scroll : dépend de JS, comme le reste du site) */
.media img{ opacity:0; transition:opacity .6s var(--ease), transform 1.2s var(--ease); }
.media img.is-loaded{ opacity:1; }

/* Liens du pied de page : même soulignement animé que la navigation principale */
.footer-link{ position:relative; transition:color .3s var(--ease); }
.footer-link::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:currentColor; opacity:.75; transition:width .35s var(--ease);
}
.footer-link:hover::after{ width:100%; }

/* ═══════════════════════════════════════════
   16. MOUVEMENT RÉDUIT
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .mobile-nav{ clip-path:none !important; }
  .mobile-nav a.m-link{ opacity:1 !important; transform:none !important; }
}