/* WYP Consulting — Site vitrine · Refonte 2026
   Se charge APRÈS wyp-design-system.css (tokens + composants .wyp-*).
   Ce fichier ajoute la mise en page du site : header, héros, sections,
   parcours à nœuds, formulaire RDV, footer. */

/* ============================================================
   1. Fondations de page
   ============================================================ */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}
body{background:var(--wyp-cream)}

/* Fond vert texturé partagé (carte phare, parole aux Membres, footer) :
   dégradé du vert foncé au vert profond, deux halos plus clairs, un grain
   léger posé par ::before et, au footer, le motif WYP en filigrane */
:root{
  --wyp-fond-vert:
    radial-gradient(80% 110% at 100% 100%, rgba(92,186,112,.42), transparent 58%),
    radial-gradient(60% 80% at 0% 0%, rgba(64,163,77,.5), transparent 62%),
    linear-gradient(135deg, #064B29 0%, #0C5B34 48%, #137547 100%);
  --wyp-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --wyp-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='48 52 78 76'%3E%3Cg fill='%23fff' fill-opacity='.09'%3E%3Ccircle cx='61.74' cy='117.58' r='4.69'/%3E %3Ccircle cx='84.25' cy='83.95' r='3.79'/%3E %3Ccircle cx='102.21' cy='110.56' r='6.42'/%3E %3Cpath d='M121.83,66.06c-.23-5.11-4.46-9.31-9.57-9.51-5.69-.22-10.38,4.33-10.38,9.97,0,.51.05,1,.12,1.48h-.02c.09.65.15,1.3.15,1.97,0,3.46-1.23,6.63-3.28,9.1l.02.02-12.15,14.46c-1.44,1.52-3.46,2.47-5.72,2.47-2.57,0-5.51-.68-6.95-2.59h-.01s-1.97-2.61-1.97-2.61c-.68-.91-1.28-1.89-1.73-2.93-.61-1.44-.85-2.69-.82-4.27,0-.02,0-.03,0-.05.03-1.19.27-2.34.66-3.43v-.02c.53-1.5.76-3.14.56-4.87-.64-5.26-5.19-9.36-10.49-9.4-5.92-.05-10.74,4.74-10.74,10.65s4.77,10.65,10.65,10.65v.02c3.35.13,6.3,1.84,8.17,4.41h0s2.03,2.93,2.03,2.93h0c1.16,1.75,2.7,3.84,2.7,6.08,0,.75-.08,1.48-.22,2.18h.02c-.24,1.25-.18,2.6.33,4.01.92,2.53,3.2,4.41,5.87,4.81,4.65.7,8.65-2.89,8.65-7.4,0-.27-.04-.53-.06-.79h.01c-.05-.44-.07-.89-.06-1.35.07-2.56,1.05-4.97,2.63-6.86l11.76-14.01h0c2.56-2.76,6.15-4.56,10.15-4.67v-.02c5.53-.15,9.94-4.79,9.69-10.42ZM60.1,83.83c-4.11,0-7.45-3.33-7.45-7.45s3.33-7.45,7.45-7.45,7.45,3.33,7.45,7.45-3.33,7.45-7.45,7.45Z'/%3E%3C/g%3E%3C/svg%3E");
}
.service-card--featured::before,.quotes-band::before,.site-footer::before,.page-hero__card--404::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--wyp-grain);opacity:.14;mix-blend-mode:overlay;pointer-events:none}

.container{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.container--narrow{max-width:880px}

.section{padding-block:clamp(52px,7vw,88px)}
.section--tight{padding-block:clamp(28px,4.5vw,48px)}

/* Chapeau de section : libellé en capitales */
.eyebrow{display:inline-block;font-family:var(--font-title);
  font-weight:600;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wyp-green-deep);margin:0 0 var(--space-4)}
.eyebrow--light{color:rgba(255,255,255,.85)}

.display-1{font-size:clamp(2.3rem,5.2vw,4rem);font-weight:700;line-height:1.08}
.display-2{font-size:clamp(1.9rem,3.6vw,2.75rem);font-weight:700;line-height:1.12}
.lead{font-size:var(--fs-lg);line-height:1.65;color:var(--wyp-neutral-600)}
.lead--light{color:rgba(255,255,255,.85)}

.section-head{max-width:640px;margin-bottom:clamp(32px,5vw,56px)}
.section-head p{margin-bottom:0}

/* Boutons : compléments du design system */
.wyp-btn{will-change:transform}
.wyp-btn:hover{transform:translateY(-2px)}
.wyp-btn:active{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .wyp-btn:hover{transform:none}
}
.wyp-btn--light{background:#fff;color:var(--wyp-green-dark)}
.wyp-btn--light:hover{background:var(--wyp-cream)}
.wyp-btn--outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}
.wyp-btn--outline-light:hover{background:rgba(255,255,255,.12)}
.btn-note{display:block;margin-top:var(--space-3);font-size:var(--fs-sm);color:var(--wyp-neutral-500)}

a:focus-visible{outline:2px solid var(--wyp-primary);outline-offset:3px;border-radius:4px}

/* ============================================================
   2. Header et menu
   ============================================================ */
.site-header{position:fixed;inset:16px 16px auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding:14px clamp(18px,3vw,28px);border-radius:var(--radius-lg);
  transition:background .25s ease, box-shadow .25s ease}
.site-header .logo-fonce{display:none}
.site-header.is-solid{background:rgba(255,255,255,.94);box-shadow:var(--shadow-md);backdrop-filter:blur(8px)}
.site-header.is-solid .logo-blanc{display:none}
.site-header.is-solid .logo-fonce{display:block}

/* Variante pour pages à fond clair dès le haut */
.site-header--light{background:rgba(255,255,255,.94);box-shadow:var(--shadow-sm)}
.site-header--light .logo-blanc{display:none}
.site-header--light .logo-fonce{display:block}

.site-header__brand{display:inline-flex;align-items:center;flex:none}
.site-header__brand img{height:34px;width:auto;display:block}

.site-nav{display:flex;align-items:center;gap:clamp(16px,2.5vw,32px)}
.site-nav a{font-family:var(--font-body);font-weight:500;font-size:var(--fs-sm);
  text-decoration:none;color:#fff;transition:opacity .15s}
.site-nav a:hover{opacity:.75}
/* Bandeau replié un cran plus lisible (retour de Jean-Pierre du 3 septembre).
   Seuls les onglets de premier niveau grandissent : la fiche dépliée et le
   bouton de rendez-vous gardent leur taille. */
.site-nav > a:not(.wyp-btn),.nav-deroulant > a{font-size:.95rem}
.site-header.is-solid .site-nav a:not(.wyp-btn),
.site-header--light .site-nav a:not(.wyp-btn){color:var(--wyp-green-dark)}
.site-nav a.is-active{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--wyp-accent)}
.site-nav .wyp-btn{margin-left:var(--space-2)}

/* Sélecteur de langue : la langue courante est un span, les deux autres sont
   des liens vers la même page dans l'autre langue. */
.lang-switch{display:inline-flex;gap:2px;padding:3px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.16)}
.site-header.is-solid .lang-switch,.site-header--light .lang-switch{background:var(--wyp-neutral-100)}
.lang-btn{border:none;background:transparent;cursor:pointer;font-family:var(--font-body);
  font-weight:600;font-size:.72rem;letter-spacing:.06em;color:#fff;
  padding:6px 10px;border-radius:var(--radius-pill);transition:background .15s,color .15s}
.site-header.is-solid .lang-btn,.site-header--light .lang-btn{color:var(--wyp-neutral-600)}
.lang-btn.is-active{background:#fff;color:var(--wyp-green-dark)}
/* La pastille de la langue courante n'est pas cliquable : pas de curseur main */
span.lang-btn{cursor:default}
.site-header.is-solid .lang-btn.is-active,.site-header--light .lang-btn.is-active{background:var(--wyp-green-dark);color:#fff}
.lang-btn:focus-visible{outline:2px solid var(--wyp-primary);outline-offset:2px}
.mobile-menu .lang-switch{background:rgba(255,255,255,.14);margin-top:var(--space-4)}
.mobile-menu .lang-btn{font-size:var(--fs-sm)}
/* EN et DE sont des liens : .site-nav a et .mobile-menu a leur imposeraient
   leur police, leur taille et leur couleur. Sélecteurs renforcés pour que les
   trois pastilles restent identiques. */
.site-nav a.lang-btn,.mobile-menu a.lang-btn{font-family:var(--font-body);font-weight:600;
  font-size:.72rem;text-align:center;text-decoration:none;color:#fff;
  transition:background .15s,color .15s,opacity .15s}
.site-header.is-solid .site-nav a.lang-btn,
.site-header--light .site-nav a.lang-btn{color:var(--wyp-neutral-600)}
.mobile-menu a.lang-btn{font-size:var(--fs-sm)}
.mobile-menu a.lang-btn:hover{color:#fff}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  border:none;border-radius:var(--radius-sm);background:transparent;cursor:pointer;padding:10px}
.burger span{display:block;height:2px;border-radius:2px;background:#fff;transition:transform .2s}
.site-header.is-solid .burger span,.site-header--light .burger span{background:var(--wyp-green-dark)}
.burger:focus-visible{outline:2px solid var(--wyp-primary);outline-offset:2px}

.mobile-menu{position:fixed;inset:0;z-index:70;background:var(--wyp-green-dark);
  display:none;flex-direction:column;justify-content:safe center;align-items:center;gap:var(--space-5);
  padding:var(--space-7);overflow-y:auto}
.mobile-menu.is-open{display:flex}
.mobile-menu a{font-family:var(--font-title);font-weight:600;font-size:var(--fs-2xl);color:#fff;text-decoration:none;text-align:center}
.mobile-menu a:hover{color:var(--wyp-accent)}
.mobile-menu__close{position:fixed;top:24px;right:24px;width:44px;height:44px;border:none;
  border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:22px;cursor:pointer;line-height:1}
.mobile-menu__close:hover{background:rgba(255,255,255,.22)}

@media (max-width: 860px){
  .site-nav{display:none}
  .burger{display:flex}
  /* Le header fixe mesure 72px (14px de marge haut/bas + bouton burger 44px) et
     flotte a 16px du haut, donc jusqu'a 88px. Le heros aligne son contenu en bas
     de la carte : sur mobile, ce contenu grandit assez pour toucher le haut de la
     carte et passer sous ce bandeau (mesure : eyebrow recouvert jusqu'a 600px de
     large). --space-8 degage confortablement l'eyebrow a toutes les largeurs concernees. */
  .hero__card, .page-hero__card{padding-top:var(--space-8)}
}

/* ============================================================
   3. Héros de l'accueil
   ============================================================ */
.hero{padding:clamp(12px,1.6vw,20px)}
.hero__card{position:relative;min-height:min(92vh,860px);border-radius:clamp(20px,3vw,36px);
  overflow:hidden;display:flex;align-items:flex-end;background:var(--wyp-green-dark)}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero__veil{position:absolute;inset:0;background:
  linear-gradient(to top, rgba(6,75,41,.78) 0%, rgba(6,75,41,.30) 50%, rgba(6,75,41,.12) 100%)}
.hero__motif{position:absolute;top:-8%;right:-6%;width:clamp(280px,38vw,560px);color:#fff;opacity:.14;pointer-events:none}
.hero__content{position:relative;z-index:2;padding:clamp(28px,5vw,72px);max-width:880px;color:#fff}
.hero__content h1{color:#fff;margin-bottom:var(--space-4)}
.hero__baseline{font-family:var(--font-title);font-weight:400;font-size:var(--fs-lg);
  letter-spacing:.04em;color:rgba(255,255,255,.92);margin:0 0 var(--space-3)}
.hero__text{font-size:var(--fs-lg);line-height:1.6;color:rgba(255,255,255,.88);max-width:560px}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}

/* ============================================================
   4. Bandeau chiffres
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
@media (max-width: 760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{min-width:0;padding:clamp(10px,1.5vw,18px);text-align:center;
  transition:transform .3s ease;will-change:transform}
.stat:hover{transform:scale(1.07)}
@media (prefers-reduced-motion: reduce){.stat:hover{transform:none}}
.stat__num{font-family:var(--font-title);font-weight:700;color:var(--wyp-green-deep);
  font-size:clamp(2.4rem,4.2vw,3.6rem);line-height:1;margin-bottom:var(--space-2)}
.stat__label{color:var(--wyp-neutral-600);font-size:var(--fs-sm);margin:0}
@media (max-width: 480px){.stats{grid-template-columns:repeat(2,1fr);gap:16px 8px}
  .stat{padding:8px 4px}
  .stat__num{font-size:1.5rem}}

/* ============================================================
   5. Les accompagnements
   ============================================================ */
.services{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2.2vw,28px)}
.service-card{position:relative;display:flex;flex-direction:column;grid-column:span 2;
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .25s ease, box-shadow .25s ease}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.service-card:hover .service-card__photo{transform:scale(1.04)}
@media (prefers-reduced-motion: reduce){
  .service-card:hover{transform:none}
  .service-card:hover .service-card__photo{transform:none}}
.service-card__photo{height:190px;width:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.service-card__body{padding:var(--space-5) var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.service-card__body h3{font-size:var(--fs-lg);margin:0}
.service-card__body p{color:var(--wyp-neutral-600);font-size:var(--fs-sm);margin:0;flex:1}
/* Les pictos officiels ont une large marge transparente : l'image est
   volontairement plus grande que sa bulle pour que le dessin la remplisse. */
.service-card__picto{width:62px;height:62px;border-radius:50%;background:var(--wyp-cream);
  display:flex;align-items:center;justify-content:center;margin-top:-31px;position:relative;z-index:2;
  box-shadow:var(--shadow-sm)}
.service-card__picto img{width:82px;height:82px;object-fit:contain;flex:none}
.service-card__link{font-weight:500;color:var(--wyp-green-deep);font-size:var(--fs-sm);margin-top:var(--space-3)}

/* Carte phare : la retraite, pleine largeur en tête de grille */
.service-card--featured{grid-column:span 6;flex-direction:row;min-height:300px;background:var(--wyp-fond-vert);color:#fff;isolation:isolate}
.service-card--featured .service-card__photo{width:46%;height:auto;min-height:100%}
.service-card--featured .service-card__body{padding:clamp(28px,4vw,48px);justify-content:center;gap:var(--space-3)}
.service-card--featured h3{color:#fff;font-size:var(--fs-2xl)}
.service-card--featured p{color:rgba(255,255,255,.82);font-size:var(--fs-base)}
.service-card--featured .service-card__link{color:var(--wyp-accent);font-size:var(--fs-base)}
.service-card--featured .wyp-badge{align-self:flex-start;background:var(--wyp-accent);color:var(--wyp-green-dark)}

@media (max-width: 980px){
  .service-card{grid-column:span 3}
}
@media (max-width: 640px){
  .service-card{grid-column:span 6}
  .service-card--featured{flex-direction:column}
  .service-card--featured .service-card__photo{width:100%;height:200px;min-height:0}
}

/* ============================================================
   6. La manière WYP (méthode)
   ============================================================ */
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px)}
.method-item__picto{width:80px;height:80px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4)}
.method-item__picto img{width:106px;height:106px;object-fit:contain;flex:none}
/* Hauteur de titre réservée sur 2 lignes : les 4 titres et les 4 textes
   partent à la même hauteur, quel que soit le nombre de lignes du titre */
.method-item h3{font-size:var(--fs-lg);min-height:2.6em;margin-bottom:var(--space-2)}
.method-item p{color:var(--wyp-neutral-600);font-size:var(--fs-sm);margin:0}
@media (max-width: 980px){.method{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 520px){.method{grid-template-columns:1fr}
  .method-item h3{min-height:0}}

/* L'écosystème d'experts : bloc large sous la méthode */
.ecosystem{position:relative;overflow:hidden;display:flex;align-items:center;gap:clamp(24px,4vw,56px);
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  padding:clamp(28px,4vw,52px);margin-top:clamp(28px,4vw,48px)}
.ecosystem__texte{position:relative;flex:1}
.ecosystem__texte h3{margin-bottom:var(--space-3)}
.ecosystem__texte p{color:var(--wyp-neutral-600);margin:0;max-width:640px}
.ecosystem__partenaire{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3) var(--space-5);
  margin-top:var(--space-5)}
.ecosystem__partenaire p{font-size:var(--fs-sm);max-width:420px}
.ecosystem__partenaire img{height:44px;width:auto;display:block}
.ecosystem__partenaire a{display:inline-flex;border-radius:var(--radius-sm)}
@media (max-width: 720px){.ecosystem{flex-direction:column;align-items:flex-start}}

/* ============================================================
   7. Témoignages
   ============================================================ */
/* Fond vert texturé partagé (voir --wyp-fond-vert) : dégradé, halos et grain */
.quotes-band{background:var(--wyp-fond-vert);
  border-radius:clamp(20px,3vw,36px);
  padding:clamp(36px,6vw,80px);position:relative;overflow:hidden;isolation:isolate}
.quotes-band__motif{position:absolute;bottom:-14%;right:-4%;width:clamp(220px,30vw,420px);
  color:var(--wyp-accent);opacity:.16;pointer-events:none}
.quotes-band .section-head h2{color:#fff}

/* Avis Google : maquette fidèle de ce que l'API affichera une fois branchée */
.greviews{position:relative;z-index:2}
.greviews__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-4);margin-bottom:clamp(20px,3vw,32px)}
.greviews__score{display:flex;align-items:center;gap:clamp(14px,2vw,24px);color:#fff}
.greviews__note{font-family:var(--font-title);font-weight:700;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1}
.greviews__stars{color:#FBBC04;font-size:1.35rem;letter-spacing:3px;line-height:1}
.greviews__count{color:rgba(255,255,255,.75);font-size:var(--fs-sm)}
/* Colonnes d'avis qui défilent en boucle (recréation native du composant
   validé par Charles). Sans JavaScript ou en animations réduites : colonnes
   statiques, sans masque ni doublons. */
.avis-defile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.5vw,24px);align-items:start}
.avis-defile__piste .greview{margin-bottom:clamp(16px,2.5vw,24px)}
.avis-defile__double{display:none}
.avis-defile.est-anime{max-height:min(58vh,470px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent)}
.avis-defile.est-anime .avis-defile__double{display:block}
@media (max-width: 700px){
  .avis-defile{grid-template-columns:1fr}
  .avis-defile__col--2{display:none}
}
.greview{background:#fff;border-radius:var(--radius-lg);padding:clamp(20px,2.5vw,28px);box-shadow:var(--shadow-md)}
.greview__top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.greview__avatar{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-title);font-weight:700;color:#fff;font-size:1.1rem}
.greview__nom{font-weight:600;color:var(--wyp-ink);font-size:var(--fs-sm);line-height:1.3}
.greview__date{color:var(--wyp-neutral-500);font-size:var(--fs-xs)}
.greview__stars{color:#FBBC04;letter-spacing:2px;font-size:1rem;margin-bottom:10px}
.greview p{color:var(--wyp-neutral-600);font-size:var(--fs-sm);line-height:1.6;margin:0}
.greviews__demo{color:rgba(255,255,255,.55);font-size:var(--fs-xs);margin:clamp(16px,2vw,24px) 0 0}

/* ============================================================
   8. Appel final
   ============================================================ */
.cta-final{text-align:center;max-width:720px;margin-inline:auto}
.cta-final .lead{margin-inline:auto;max-width:520px}
.cta-final .wyp-btn{margin-top:var(--space-5)}

/* ============================================================
   9. Footer
   ============================================================ */
.site-footer{position:relative;overflow:hidden;isolation:isolate;color:rgba(255,255,255,.82);
  background:var(--wyp-motif) no-repeat right -5vw top -18% / clamp(300px,36vw,560px) auto, var(--wyp-fond-vert);
  border-radius:clamp(20px,3vw,36px) clamp(20px,3vw,36px) 0 0;
  padding:clamp(48px,7vw,88px) 0 var(--space-6);margin-top:clamp(48px,7vw,96px)}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);
  margin-bottom:clamp(36px,5vw,64px)}
.site-footer__brand img{height:40px;width:auto;margin-bottom:var(--space-4)}
.site-footer__brand p{font-size:var(--fs-sm);color:rgba(255,255,255,.6);max-width:280px}
.site-footer h4{color:#fff;font-size:var(--fs-base);letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--space-4)}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.site-footer a{color:rgba(255,255,255,.82);text-decoration:none;font-size:var(--fs-sm)}
.site-footer a:hover{color:var(--wyp-accent)}
.site-footer li > span{font-size:var(--fs-sm);color:rgba(255,255,255,.5)}
.site-footer address{font-style:normal;font-size:var(--fs-sm);line-height:1.7;color:rgba(255,255,255,.7)}
.site-footer address a{color:inherit;display:inline-block}
.site-footer address a:hover{color:var(--wyp-accent);text-decoration:underline;text-underline-offset:3px}
.site-footer__legal{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;
  padding-top:var(--space-5);font-size:var(--fs-xs);color:rgba(255,255,255,.45)}
.site-footer__legal a{font-size:var(--fs-xs);color:rgba(255,255,255,.55)}
@media (max-width: 980px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.site-footer__grid{grid-template-columns:1fr}}

/* ============================================================
   10. Pages intérieures : en-tête
   ============================================================ */
.page-hero{padding:clamp(12px,1.6vw,20px)}
.page-hero__card{position:relative;min-height:min(64vh,560px);border-radius:clamp(20px,3vw,36px);
  overflow:hidden;display:flex;align-items:flex-end;background:var(--wyp-green-dark)}
.page-hero__card .hero__content{max-width:680px}

/* ============================================================
   11. Le parcours (landing produit) : timeline à ligne de
   progression. L'étape colle à gauche pendant que son contenu
   défile, le rail se remplit d'un dégradé de verts au fil du
   défilement (rempli d'office sans JavaScript ou en animations
   réduites, le JS le vide avant de l'animer).
   ============================================================ */
.parcours{position:relative;max-width:1020px;margin-inline:auto}
.parcours__rail{position:absolute;left:30px;top:0;bottom:0;width:4px;border-radius:2px;
  background:rgba(6,75,41,.12);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent)}
.parcours__rail-avancee{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:2px;
  background:linear-gradient(to top, var(--wyp-accent) 0%, var(--wyp-green-mid) 26%, var(--wyp-green-deep) 100%)}
.parcours__etape{position:relative;display:flex;align-items:flex-start;gap:clamp(24px,4vw,56px);
  padding-top:clamp(44px,7vw,84px)}
.parcours__etape:first-child{padding-top:0}
.parcours__gauche{position:sticky;top:clamp(100px,16vh,170px);z-index:2;flex:none;
  width:min(360px,40%);display:flex;align-items:center;gap:clamp(14px,2vw,22px)}
.parcours__noeud{flex:none;width:64px;height:64px;border-radius:50%;background:#fff;
  box-shadow:var(--shadow-md), 0 0 0 6px rgba(92,186,112,.18);
  display:flex;align-items:center;justify-content:center}
.parcours__noeud img{width:82px;height:82px;object-fit:contain;flex:none}
.parcours__entete h3{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15;margin:0}
.parcours__corps{flex:1;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:clamp(22px,3vw,36px)}
.parcours__corps p{color:var(--wyp-neutral-600);margin:0;line-height:1.7}
.parcours__temps{display:block;font-family:var(--font-title);font-weight:600;font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--wyp-green-deep);margin-bottom:4px}
@media (max-width: 820px){
  .parcours__etape{flex-direction:column;gap:16px;padding-top:clamp(36px,8vw,56px)}
  .parcours__gauche{position:static;width:auto}
  .parcours__corps{width:100%}
}

/* Bloc « pour qui » */
.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,28px)}
.audience-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:clamp(22px,3vw,32px)}
.audience-card h3{font-size:var(--fs-lg);margin-bottom:var(--space-2);min-height:2.6em}
.audience-card p{color:var(--wyp-neutral-600);font-size:var(--fs-sm);margin:0}
@media (max-width: 860px){.audience{grid-template-columns:1fr}.audience-card h3{min-height:0}}

/* Effet rideau (recréation native du composant fourni par Charles) : au repos,
   carte verte, titre blanc en bas et une flèche ; au survol ou au clavier, un
   rideau blanc s'ouvre depuis le centre, le titre remonte, le texte se dévoile
   et les couleurs s'inversent. Sans souris ou en animations réduites : carte
   verte, tout visible d'office. */
.audience-card{position:relative;display:flex;flex-direction:column;min-height:300px;overflow:hidden;isolation:isolate;
  background:var(--wyp-green-deep);color:#fff;
  transition:transform .25s ease, box-shadow .25s ease}
.audience-card::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;
  clip-path:polygon(50% 0,50% 0,50% 100%,50% 100%);
  transition:clip-path .45s cubic-bezier(.25,1.2,.5,1)}
.audience-card:hover,.audience-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.audience-card:hover::before,.audience-card:focus-visible::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.audience-card:focus-visible{outline:2px solid var(--wyp-primary);outline-offset:3px}
.audience-card h3{color:#fff;max-width:calc(100% - 64px);transform:translateY(var(--rideau-decal,148px));
  transition:transform .4s cubic-bezier(.25,1,.5,1), color .35s ease}
.audience-card p{color:rgba(255,255,255,.85);clip-path:polygon(50% 0,50% 0,50% 100%,50% 100%);opacity:0;
  transition:clip-path .45s cubic-bezier(.25,1.2,.5,1), opacity .3s ease, color .35s ease}
.audience-card:hover h3,.audience-card:focus-visible h3{transform:none;color:var(--wyp-green-dark)}
.audience-card:hover p,.audience-card:focus-visible p{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1;color:var(--wyp-neutral-600)}
.audience-card__fleche{position:absolute;right:clamp(22px,3vw,32px);bottom:clamp(22px,3vw,32px);
  width:44px;height:44px;border-radius:50%;background:#fff;color:var(--wyp-green-deep);
  display:flex;align-items:center;justify-content:center;
  transition:background .35s ease, color .35s ease, transform .4s cubic-bezier(.25,1.2,.5,1)}
.audience-card:hover .audience-card__fleche,.audience-card:focus-visible .audience-card__fleche{
  background:var(--wyp-green-deep);color:#fff;transform:rotate(45deg)}
@media (hover: none), (prefers-reduced-motion: reduce){
  .audience-card{min-height:0}
  .audience-card::before{display:none}
  .audience-card h3{max-width:none;transform:none}
  .audience-card p{clip-path:none;opacity:1}
  .audience-card__fleche{display:none}
  .audience-card:hover{transform:none}
  .audience-card:hover h3{color:#fff}
  .audience-card:hover p{color:rgba(255,255,255,.85)}
}

/* Avis Google mis en avant seul (landing) : toute la carte mène à l'avis
   sur Google, et le dit au survol */
.greview--solo{display:block;max-width:640px;margin:0 auto;text-decoration:none;color:inherit;
  transition:transform .25s ease, box-shadow .25s ease}
.greview--solo:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.greview__lien{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-weight:600;font-size:var(--fs-sm);color:var(--wyp-green-deep);opacity:.75;transition:opacity .2s}
.greview--solo:hover .greview__lien{opacity:1;text-decoration:underline;text-underline-offset:3px}
.greview__lien svg{flex:none}
@media (prefers-reduced-motion: reduce){.greview--solo:hover{transform:none}}

/* Citation seule (landing) */
.quote-solo{background:var(--wyp-green-dark);border-radius:clamp(20px,3vw,36px);
  padding:clamp(32px,5vw,64px);position:relative;overflow:hidden}
.quote-solo p{font-family:var(--font-title);font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.5;color:#fff;
  max-width:760px;margin-bottom:var(--space-4)}
.quote-solo footer{color:var(--wyp-accent)}
.quote-solo__motif{position:absolute;top:-18%;right:-5%;width:clamp(200px,26vw,360px);color:#fff;opacity:.12;pointer-events:none}

/* ============================================================
   12. Page rendez-vous
   ============================================================ */
.rdv-layout{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width: 900px){.rdv-layout{grid-template-columns:1fr}}

.rdv-aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:var(--space-5)}
@media (max-width: 900px){.rdv-aside{position:static}}
.rdv-aside .wyp-card{padding:clamp(22px,3vw,32px)}
.rdv-aside ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.rdv-aside li{font-size:var(--fs-sm);color:var(--wyp-neutral-600)}

.rdv-form{background:#fff;border-radius:clamp(20px,3vw,32px);box-shadow:var(--shadow-md);
  padding:clamp(24px,4vw,48px)}
.rdv-form fieldset{border:none;margin:0 0 var(--space-6);padding:0}
.rdv-form legend{font-family:var(--font-title);font-weight:600;font-size:var(--fs-lg);
  color:var(--wyp-green-dark);margin-bottom:var(--space-4);padding:0}
/* Formulaire de rappel cal.com intégré dans la carte blanche */
.rdv-cal{padding:clamp(8px,1.5vw,16px);min-height:640px}
.rdv-cal__echec{margin:var(--space-5);font-size:var(--fs-sm);color:var(--wyp-neutral-700)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-4)}
@media (max-width: 560px){.form-row{grid-template-columns:1fr}}

/* Choix en pastilles (thèmes, pays) */
.pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pill span{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:var(--radius-pill);
  background:var(--wyp-neutral-100);color:var(--wyp-neutral-700);font-size:var(--fs-sm);font-weight:500;
  transition:background .15s, color .15s}
.pill input:checked + span{background:var(--wyp-green-deep);color:#fff}
.pill input:focus-visible + span{outline:2px solid var(--wyp-primary);outline-offset:2px}
.pill:hover span{background:var(--wyp-neutral-200)}
.pill input:checked:hover + span{background:var(--wyp-green-dark)}

/* Encart version de présentation */
/* Page bienvenue (atterrissage des QR codes) : carte verte compacte,
   dégagée du header fixe, et bannière de provenance dévoilée par le JS
   quand l'adresse contient ?de=Nom */
.page-hero__card--qr{min-height:0;padding-top:clamp(76px,9vw,92px);background:
  radial-gradient(110% 130% at 10% -10%, rgba(92,186,112,.35), transparent 52%),
  linear-gradient(150deg, var(--wyp-green-dark) 8%, var(--wyp-green-deep) 92%)}
.qr-provenance{display:inline-flex;align-items:center;background:rgba(255,255,255,.16);
  color:#fff;border-radius:var(--radius-pill);padding:9px 18px;font-weight:500;
  font-size:var(--fs-sm);margin:0 0 var(--space-4)}

.notice{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--wyp-cream);
  border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin-top:var(--space-5)}
.notice p{font-size:var(--fs-sm);color:var(--wyp-neutral-600);margin:0}
.notice strong{color:var(--wyp-green-dark)}

/* Toast de démonstration */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:var(--wyp-green-dark);color:#fff;padding:var(--space-4) var(--space-6);
  border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);
  opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s ease;z-index:80;
  max-width:min(92vw,520px);text-align:center}
.toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   13. Les bureaux : cartes dépliantes sur le vrai plan des lieux
   (recréation native du composant validé par Charles)
   ============================================================ */
.bureaux{display:flex;justify-content:center;align-items:flex-start;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.bureau{position:relative;padding-bottom:30px}
.bureau-card{position:relative;width:min(380px,86vw);height:336px;border-radius:var(--radius-lg);
  background:#fff;box-shadow:var(--shadow-md);cursor:pointer;overflow:hidden;user-select:none;
  transition:width .5s cubic-bezier(.34,1.35,.64,1), height .5s cubic-bezier(.34,1.35,.64,1), box-shadow .3s}
.bureau-card:hover{box-shadow:var(--shadow-lg)}
.bureau-card:focus-visible{outline:2px solid var(--wyp-primary);outline-offset:3px}
.bureau-card.is-ready:not(.is-open){width:min(270px,80vw);height:152px}

/* Le plan (visible déplié ; visible aussi sans JavaScript) */
.bureau-card__plan{position:absolute;inset:0;background:var(--wyp-cream);opacity:1;transition:opacity .35s}
.bureau-card.is-ready:not(.is-open) .bureau-card__plan{opacity:0}
/* Le vrai plan des lieux (OpenStreetMap teinté aux couleurs du site),
   l'épingle posée pile sur l'adresse, la mention de source en bas à droite */
.bureau-card__carte{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bureau-card__plan::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(246,243,236,.94) 0%, rgba(246,243,236,.6) 28%, rgba(246,243,236,0) 58%)}
.bureau-card__plan .bureau-card__pin{position:absolute;inset:auto;top:50%;left:50%;z-index:1;
  width:38px;height:38px;margin:-36px 0 0 -19px;filter:drop-shadow(0 4px 8px rgba(6,75,41,.35))}
.bureau-card__credit{position:absolute;right:8px;bottom:6px;z-index:3;font-size:.6rem;
  color:var(--wyp-neutral-500);pointer-events:none}

/* Petit quadrillage de points quand la carte est repliée */
.bureau-card__grille{position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle, var(--wyp-neutral-300) 1px, transparent 1.5px) 0 0 / 22px 22px}
.bureau-card.is-ready:not(.is-open) .bureau-card__grille{opacity:.55}

.bureau-card__contenu{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:space-between;padding:20px}
.bureau-card__haut{display:flex;justify-content:space-between;align-items:flex-start}
.bureau-card__icone{color:var(--wyp-primary);transition:opacity .3s}
.bureau-card.is-open .bureau-card__icone,.bureau-card:not(.is-ready) .bureau-card__icone{opacity:0}
.bureau-card__chip{padding:5px 12px;border-radius:var(--radius-pill);background:rgba(6,75,41,.07);
  font-family:var(--font-title);font-size:.66rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wyp-green-deep);transition:background .3s}
.bureau-card.is-open .bureau-card__chip,.bureau-card:not(.is-ready) .bureau-card__chip{background:rgba(255,255,255,.9)}
.bureau-card__bas h3{font-size:var(--fs-lg);margin:0}
.bureau-card__adresse{overflow:hidden;max-height:120px;opacity:1;transition:max-height .4s ease, opacity .3s;
  color:var(--wyp-neutral-600);font-size:var(--fs-sm);line-height:1.55;font-style:normal;margin:4px 0 0}
.bureau-card.is-ready:not(.is-open) .bureau-card__adresse{max-height:0;opacity:0}
/* Bouton « S'y rendre » : visible seulement carte dépliée, ouvre l'itinéraire Google Maps */
.bureau-card__go-zone{overflow:hidden;max-height:64px;opacity:1;transition:max-height .4s ease, opacity .3s}
.bureau-card.is-ready:not(.is-open) .bureau-card__go-zone{max-height:0;opacity:0}
.bureau-card__go{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:9px 16px;
  border-radius:var(--radius-pill);background:var(--wyp-green-dark);color:#fff;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-xs);text-decoration:none;
  transition:background .2s}
.bureau-card__go:hover{background:var(--wyp-green-deep)}
.bureau-card__go:focus-visible{outline:2px solid var(--wyp-primary);outline-offset:2px}
.bureau-card__go svg{flex:none}

.bureau-card__ligne{height:3px;border-radius:2px;margin-top:12px;
  background:linear-gradient(90deg, var(--wyp-primary), rgba(92,186,112,.3), transparent);
  transform:scaleX(.25);transform-origin:left;transition:transform .4s ease}
.bureau-card:hover .bureau-card__ligne,.bureau-card.is-open .bureau-card__ligne{transform:scaleX(1)}
.bureau__hint{position:absolute;left:50%;transform:translateX(-50%);bottom:4px;
  font-size:var(--fs-xs);color:var(--wyp-neutral-500);opacity:0;transition:opacity .25s;white-space:nowrap}
.bureau:hover .bureau__hint{opacity:1}
.bureau:has(.is-open) .bureau__hint{opacity:0}
@media (prefers-reduced-motion: reduce){
  .bureau-card,.bureau-card__plan,.bureau-card__adresse,.bureau-card__ligne,.bureau-card__grille,.bureau-card__go-zone{transition:none}
}

/* Page introuvable : carte verte texturée, deux phrases pour les autres langues */
.page-hero__card--404{min-height:min(72vh,640px);background:var(--wyp-fond-vert);isolation:isolate}
.hero__langues{display:flex;flex-direction:column;gap:6px;margin:var(--space-5) 0 0;font-size:var(--fs-sm)}
.hero__langues a{color:rgba(255,255,255,.78);text-decoration:none}
.hero__langues a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   14. Divers
   ============================================================ */
.skip-link{position:absolute;left:-9999px;top:16px;z-index:100;background:#fff;color:var(--wyp-green-dark);
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);box-shadow:var(--shadow-md)}
.skip-link:focus{left:16px}

/* ============================================================
   15. Le blog : en-tête photo, filtres par thème, article
   à la une (moule de la carte phare de l'accueil) et grille
   d'articles (moule des cartes accompagnements)
   ============================================================ */
.page-hero__card--blog{min-height:min(58vh,500px)}
/* Le cadrage garde les visages et le haut du livre dans la bande visible */
.page-hero__card--blog .hero__photo{object-position:center 42%}

/* Filtres : blocs blancs sur le fond crème, comme les cartes */
.blog-filtres{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.blog-filtre{border:none;display:inline-flex;align-items:center;padding:10px 18px;
  border-radius:var(--radius-pill);background:#fff;color:var(--wyp-neutral-700);
  font-family:var(--font-body);font-size:var(--fs-sm);font-weight:500;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:background .15s,color .15s}
.blog-filtre:hover{background:var(--wyp-neutral-100)}
.blog-filtre.is-active{background:var(--wyp-green-deep);color:#fff}
.blog-filtre.is-active:hover{background:var(--wyp-green-dark)}
.blog-filtre:focus-visible{outline:2px solid var(--wyp-primary);outline-offset:2px}

/* Article à la une */
.blog-featured{display:flex;min-height:300px;background:var(--wyp-green-dark);color:#fff;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;
  text-decoration:none;transition:transform .25s ease, box-shadow .25s ease}
.blog-featured:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.blog-featured:hover .blog-featured__photo{transform:scale(1.04)}
.blog-featured__cadre{width:46%;flex:none;overflow:hidden}
.blog-featured__photo{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.blog-featured__body{flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:var(--space-3);padding:clamp(28px,4vw,48px)}
.blog-featured__entete{display:flex;align-items:center;gap:var(--space-3)}
.blog-featured__entete .wyp-badge{background:var(--wyp-accent);color:var(--wyp-green-dark)}
.blog-featured__theme{font-family:var(--font-title);font-weight:600;font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--wyp-accent)}
.blog-featured__body h2{color:#fff;font-size:var(--fs-2xl);margin:0}
.blog-featured__body p{color:rgba(255,255,255,.82);font-size:var(--fs-base);margin:0}
.blog-featured__lien{font-weight:500;color:var(--wyp-accent);font-size:var(--fs-base)}
@media (max-width: 640px){
  .blog-featured{flex-direction:column}
  .blog-featured__cadre{width:100%;height:200px}
}

/* Grille des articles */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,28px);
  margin-top:clamp(16px,2.2vw,28px)}
.blog-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .25s ease, box-shadow .25s ease}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.blog-card:hover .blog-card__photo{transform:scale(1.04)}
.blog-card__cadre{height:190px;overflow:hidden;flex:none}
.blog-card__photo{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.blog-card__body{padding:var(--space-5) var(--space-5) var(--space-6);display:flex;
  flex-direction:column;gap:var(--space-2);flex:1}
.blog-card__theme{font-family:var(--font-title);font-weight:600;font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--wyp-green-deep)}
.blog-card__body h3{font-size:var(--fs-lg);margin:0}
.blog-card__body p{color:var(--wyp-neutral-600);font-size:var(--fs-sm);margin:0;flex:1}
.blog-card__lien{font-weight:500;color:var(--wyp-green-deep);font-size:var(--fs-sm);margin-top:var(--space-3)}
@media (max-width: 980px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.blog-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){
  .blog-card:hover,.blog-featured:hover{transform:none}
  .blog-card:hover .blog-card__photo,.blog-featured:hover .blog-featured__photo{transform:none}
}

/* Un article masqué par le filtre disparaît de la grille */
.blog-featured.est-cache,.blog-card.est-cache{display:none}

/* ============================================================
   16. Pages articles : colonne de lecture étroite, encadrés
   du site actuel devenus cartes (blanche, verte douce, alerte),
   phrase mise en avant, appel à rendez-vous au fil du texte et
   « Poursuivre la lecture » en bas de page
   ============================================================ */
.article-hero .hero__content{max-width:840px}
.article-hero h1{margin-bottom:var(--space-3);hyphens:auto;overflow-wrap:anywhere}
.article-hero__infos{color:rgba(255,255,255,.75);font-size:var(--fs-sm);margin:0}

.article-retour{display:inline-block;font-weight:500;font-size:var(--fs-sm);
  color:var(--wyp-green-deep);text-decoration:none;margin-bottom:var(--space-4)}
.article-retour:hover{text-decoration:underline;text-underline-offset:4px}
.article-figure{margin:0}
.article-figure img{display:block;width:100%;height:clamp(240px,40vw,430px);object-fit:cover;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}

.article-corps{max-width:780px;margin-inline:auto;display:flex;flex-direction:column;
  gap:clamp(28px,4vw,44px)}
.article-bloc h2{font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.2;margin:0 0 var(--space-4)}
.article-bloc h3{font-size:var(--fs-lg);margin:var(--space-5) 0 var(--space-3)}
.article-bloc p{color:var(--wyp-neutral-700);line-height:1.75;margin:0 0 var(--space-4)}
.article-bloc ul{margin:0 0 var(--space-4);padding-left:1.15em;color:var(--wyp-neutral-700);
  line-height:1.7;display:flex;flex-direction:column;gap:var(--space-2)}
.article-bloc li::marker{color:var(--wyp-primary)}
.article-bloc > :last-child{margin-bottom:0}
.article-bloc .wyp-table-wrap{margin:var(--space-5) 0;overflow-x:auto}
.article-note{font-size:var(--fs-sm);color:var(--wyp-neutral-500)}
.article-action{margin-top:var(--space-5)}

/* Les encadrés : carte blanche posée sur le crème, teinte verte pour
   les repères, teinte chaude pour les cas particuliers à surveiller */
.article-carte{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:clamp(22px,3.5vw,36px)}
.article-carte--verte{background:#E9F3EA}
.article-carte--alerte{background:#F9EDE9}

/* Phrase mise en avant entre deux sections */
.article-grand{font-family:var(--font-title);font-weight:600;font-size:clamp(1.25rem,2.2vw,1.6rem);
  line-height:1.45;color:var(--wyp-green-deep);margin:0}

/* Appel à rendez-vous au fil du texte : même fond que l'en-tête du blog */
.article-rdv{background:
  radial-gradient(110% 130% at 10% -10%, rgba(92,186,112,.35), transparent 52%),
  linear-gradient(150deg, var(--wyp-green-dark) 8%, var(--wyp-green-deep) 92%);
  border-radius:var(--radius-lg);padding:clamp(28px,4.5vw,52px);text-align:center}
.article-rdv__titre{font-family:var(--font-title);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.75rem);
  color:#fff;margin:0 0 var(--space-5)}

.lire-ensuite__entete{display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:var(--space-3)}
.lire-ensuite__tous{font-weight:500;color:var(--wyp-green-deep);text-decoration:none}
.lire-ensuite__tous:hover{text-decoration:underline;text-underline-offset:4px}

/* ============================================================
   17. Menu déroulant des accompagnements
   ============================================================ */
.nav-deroulant{position:relative}
.nav-fiche{position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(10px);
  min-width:330px;border-radius:var(--radius-lg);background:#fff;
  box-shadow:var(--shadow-lg);
  display:grid;gap:2px;
  /* padding-top genereux = pont de survol : aucun trou entre l'onglet et la fiche */
  padding:var(--space-4) var(--space-3) var(--space-3);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s}
.nav-deroulant:hover .nav-fiche,
.nav-deroulant:focus-within .nav-fiche{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);transition-delay:0s}
.nav-fiche__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm);font-weight:600;text-decoration:none}
/* .site-nav a impose un texte blanc (en-tete transparent sur le heros) :
   selecteur renforce pour que les libelles restent lisibles sur la fiche, toujours blanche */
.site-header .site-nav .nav-deroulant .nav-fiche .nav-fiche__item{color:var(--wyp-ink)}
.nav-fiche__item:hover,.nav-fiche__item.is-active{background:rgba(43,145,53,.08)}
.nav-fiche__item img{width:34px;height:34px;object-fit:contain}
.mobile-menu__groupe{display:grid;gap:var(--space-1)}
.mobile-menu__titre{color:#fff;opacity:.6;font-size:.85em;text-transform:uppercase;letter-spacing:.04em}
.mobile-menu__groupe a{padding-left:var(--space-4)}
@media (prefers-reduced-motion: reduce){.nav-fiche{transition:none}}

/* ============================================================
   18. Héros : pays et citation
   ============================================================ */
/* Note Google en tête du héros (demande de Jean-Pierre du 3 septembre :
   retenir le visiteur dès l'arrivée). C'est un lien vers les avis Google. */
.hero__note{display:flex;flex-wrap:wrap;width:fit-content;align-items:center;gap:var(--space-2);
  margin:0 0 var(--space-4);padding:8px 14px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);color:#fff;text-decoration:none;
  font-size:var(--fs-sm);line-height:1;transition:background .2s ease}
.hero__note:hover{background:rgba(255,255,255,.26)}
.hero__note-etoiles{color:#FBBC04;letter-spacing:2px}
/* Le libellé ne se coupe jamais au milieu : sur mobile, en allemand, il passe
   entier sous les étoiles plutôt que de laisser « Bewertungen » seul. */
.hero__note > span:not(.hero__note-etoiles){white-space:nowrap}
.hero__note strong{font-family:var(--font-title);font-weight:700;font-size:var(--fs-base)}
.hero__pays{display:flex;gap:8px;align-items:center}
.drapeau{height:20px;width:auto;display:block}
/* L'avis du héros est un lien : il mène aux avis Google du cabinet */
.hero__avis{display:block;margin:var(--space-6) 0 0;max-width:400px;background:rgba(255,255,255,.12);
  border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);text-decoration:none;color:#fff;
  transition:background .2s ease, transform .25s ease}
.hero__avis:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.hero__avis blockquote{margin:0 0 var(--space-2);font-size:var(--fs-lg);line-height:1.4;color:#fff}
.hero__avis-source{display:block;font-size:var(--fs-sm);color:rgba(255,255,255,.75)}
.hero__avis-etoiles{color:#FBBC04;letter-spacing:2px;margin-right:var(--space-2)}
.hero__avis-cta{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:var(--fs-xs);
  font-weight:600;color:#fff;opacity:.7;transition:opacity .2s}
.hero__avis:hover .hero__avis-cta{opacity:1;text-decoration:underline;text-underline-offset:3px}
.hero__avis-cta svg{flex:none}
@media (prefers-reduced-motion: reduce){.hero__avis:hover{transform:none}}

/* Avis Google traduits : mention discrète sous le texte de l'avis */
.greview__trad{display:block;margin-top:6px;opacity:.55;font-size:.8em}