/* L'habillage commun du site (outils/habillage.mjs, 17/10/2026) : la barre du haut de l'accueil v2, le menu
   plein écran du téléphone, le pied de page et ses accordions. Chargé après accueil.css, dans toutes les pages.
   accueil.css coupe les clics sur le header (pointer-events:none) : tout ce qui se clique ici les reprend. */

/* ── La barre ── */
#entete.hb{position:fixed;top:0;left:0;right:0;z-index:50;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 0}
#entete.hb .v2-barre,#entete.hb .v2-barre *{pointer-events:auto}
.hb .v2-barre{width:min(1180px,100%);margin:0 auto;display:flex;align-items:center;gap:18px;min-height:60px;padding:0 10px 0 18px;border-radius:999px;border:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s}
#entete.hb.plie .v2-barre,#entete.hb.menu-ouvert .v2-barre{background:rgba(8,14,24,.9);border-color:var(--ligne);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 20px 50px -30px rgba(0,0,0,.9)}
.hb .v2-logo{display:flex;align-items:center;color:#fff}
.hb .v2-logo svg{height:24px;width:auto}
.hb .v2-liens{display:none;gap:4px;margin-left:12px}
.hb .v2-liens a{padding:9px 13px;border-radius:999px;color:#c8d3df;font-size:14.5px;font-weight:500;transition:color .2s,background .2s}
.hb .v2-liens a:hover{color:#fff;background:rgba(255,255,255,.05)}
.hb .v2-liens a[aria-current]{color:#fff;background:rgba(94,234,168,.12);box-shadow:inset 0 0 0 1px rgba(94,234,168,.28)}
.hb .v2-droite{margin-left:auto;display:flex;align-items:center;gap:6px}
.hb .v2-langues{display:none;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--ligne)}
.hb .v2-langues button{position:relative;min-width:34px;height:30px;padding:0 6px;border:0;border-radius:999px;background:none;color:var(--doux);font:600 12px/1 inherit;font-family:inherit;cursor:pointer}
.hb .v2-langues button[aria-pressed="true"]{background:rgba(255,255,255,.1);color:#fff}
.hb .v2-entrer{padding:10px 12px;color:#e6edf4;font-size:14.5px;font-weight:550;white-space:nowrap}
.hb .v2-commencer{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;background:var(--menthe);color:var(--encre-menthe);font-size:14.5px;font-weight:650;white-space:nowrap;box-shadow:0 10px 30px -12px rgba(94,234,168,.8)}
.hb .v2-commencer:hover{background:#7ff2bd}
@media (min-width:980px){.hb .v2-liens,#entete.hb .v2-langues{display:flex}}
@media (max-width:420px){.hb .v2-barre{gap:4px;padding-left:12px;padding-right:6px}.hb .v2-entrer{padding:10px 6px;font-size:14px}.hb .v2-commencer{padding:0 13px;min-height:40px;font-size:14px}}
@media (max-width:350px){.hb .v2-entrer{display:none}}

/* ── Le burger, qui devient une croix ── */
.hb-burger{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;margin-left:2px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;transition:background .25s,border-color .25s}
.hb-burger:hover{background:rgba(255,255,255,.08)}
.hb-burger[aria-expanded="true"]{border-color:rgba(94,234,168,.45);background:rgba(94,234,168,.1)}
.hb-traits{position:relative;width:18px;height:14px;display:block}
.hb-traits i{position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .2s,top .35s cubic-bezier(.16,1,.3,1)}
.hb-traits i:nth-child(1){top:0}.hb-traits i:nth-child(2){top:6px}.hb-traits i:nth-child(3){top:12px}
.hb-burger[aria-expanded="true"] .hb-traits i:nth-child(1){top:6px;transform:rotate(45deg)}
.hb-burger[aria-expanded="true"] .hb-traits i:nth-child(2){opacity:0;transform:scaleX(.2)}
.hb-burger[aria-expanded="true"] .hb-traits i:nth-child(3){top:6px;transform:rotate(-45deg)}
.hb-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:980px){.hb-burger{display:none}}

/* ── Le panneau plein écran (téléphone et tablette) ── */
.hb-panneau{position:fixed;inset:0;z-index:49;display:flex;flex-direction:column;justify-content:space-between;gap:36px;padding:calc(104px + env(safe-area-inset-top,0px)) 24px calc(28px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;background:radial-gradient(70% 45% at 50% 0%,rgba(94,234,168,.16),transparent 70%),rgba(6,11,20,.95);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);opacity:0;visibility:hidden;transition:opacity .35s cubic-bezier(.16,1,.3,1),visibility 0s linear .35s}
.hb-panneau.ouvert{opacity:1;visibility:visible;transition:opacity .35s cubic-bezier(.16,1,.3,1)}
.hb-p-liens{display:flex;flex-direction:column}
.hb-p-liens a{display:flex;align-items:center;justify-content:space-between;padding:16px 2px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;font-size:clamp(28px,8.4vw,40px);line-height:1.1;font-weight:650;letter-spacing:-.035em}
.hb-p-liens a::after{content:"→";font-size:.6em;color:var(--menthe);opacity:.75}
.hb-p-liens a[aria-current]{color:var(--menthe)}
.hb-p-bas{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.hb-p-bas .v2-langues{display:flex;align-self:flex-start}
.hb-p-bas .v2-langues button{min-width:48px;height:38px;font-size:13px}
.hb-p-entrer{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:600;font-size:16px}
.hb-p-cta{width:100%;min-height:58px;font-size:17px}
@media (prefers-reduced-motion:no-preference){
  .hb-p-liens a,.hb-p-bas{opacity:0;transform:translateY(16px);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
  .hb-panneau.ouvert .hb-p-liens a,.hb-panneau.ouvert .hb-p-bas{opacity:1;transform:none;transition-delay:calc(70ms + var(--i,0) * 55ms)}
}
@media (min-width:980px){.hb-panneau{display:none}}
html.hb-fige,html.hb-fige body{overflow:hidden}

/* ── Le pied de page ── */
footer.pd.hb{position:relative;overflow:hidden;margin-top:clamp(24px,4vw,48px);padding:clamp(56px,8vw,96px) 0 calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(94,234,168,.16);background:radial-gradient(60% 70% at 50% 0%,rgba(94,234,168,.13),transparent 70%),radial-gradient(40% 50% at 12% 0%,rgba(47,208,192,.08),transparent 70%),linear-gradient(180deg,#071119,#060b14 60%);color:var(--doux);font-size:15px}
footer.pd.hb::before{content:"";position:absolute;left:50%;top:-1px;width:min(720px,80%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(94,234,168,.7),transparent)}
.hb .pd-env{display:grid;align-items:start;gap:40px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.hb .pd-marque{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:360px}
.hb .pd-logo{display:inline-flex;color:#fff}
.hb .pd-logo svg{height:30px;width:auto}
.hb .pd-phrase{margin:0;color:#c3cedb;font-size:15.5px;line-height:1.55;text-wrap:pretty}
.hb .pd-mail{color:#e6edf4;font-weight:550}
.hb .pd-mail:hover{color:var(--menthe)}
.hb .pd-col{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:0}
.hb .pd-titre{margin:0 0 4px}
.hb .pd-bascule{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0;padding:0;border:0;background:none;color:var(--menthe);font:650 13px/1.3 inherit;font-family:inherit;letter-spacing:.12em;text-transform:uppercase;text-align:left;cursor:default}
.hb .pd-chevron{display:none;flex:none;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.hb .pd-liens-in{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hb .pd-col a,.hb .pd-col .pd-liens-in button{color:#c8d3df;font-size:15px;line-height:1.4;text-align:left}
.hb .pd-col a:hover,.hb .pd-col .pd-liens-in button:hover{color:#fff}
.hb .pd-col a[aria-current="page"]{color:#fff}
.hb .pd-col .lien-cookies{margin:0;background:none;border:0;padding:0;font:inherit;font-size:15px;cursor:pointer}
.hb .pd-env .pied-haut{grid-column:1/-1;justify-self:start}
@media (min-width:860px){.hb .pd-env{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:32px}.hb .pd-marque{grid-column:auto}}
.hb .pd-geant{margin:clamp(40px,6vw,72px) 0 0;padding:0 16px;text-align:center;font-size:clamp(120px,33vw,400px);line-height:.8;font-weight:800;letter-spacing:-.035em;background:linear-gradient(180deg,rgba(222,232,240,.42) 0%,rgba(222,232,240,.12) 60%,rgba(222,232,240,0) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;pointer-events:none;white-space:nowrap}
.hb .pd-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:22px;border-top:1px solid var(--ligne);font-size:14px}
footer.hb .v2-langues{display:flex}
footer.hb .pd-reseaux{display:flex;gap:10px;margin-top:4px}
footer.hb .pd-reseaux a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:#cfe0f2;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:color .2s,background .2s,transform .2s}
footer.hb .pd-reseaux a:hover{color:#04150f;background:#5eeaa8;transform:translateY(-2px)}
footer.hb .pd-reseaux svg{width:20px;height:20px}

/* La bande RGPD du pied (21/10/2026) : sobre, au-dessus des colonnes. Un panneau de verre, un bouclier,
   six faits vérifiés en grille (3 × 2 dès 860 px, 1 colonne au téléphone), la note honnête et le lien. */
.hb .pd-confiance{display:block;box-sizing:border-box;position:relative;margin-bottom:clamp(40px,6vw,64px);padding:clamp(22px,3.4vw,36px);border-radius:24px;border:1px solid rgba(94,234,168,.16);background:linear-gradient(180deg,rgba(94,234,168,.055),rgba(255,255,255,.018));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.hb .pd-rg-tete{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;row-gap:2px}
.hb .pd-rg-icone{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:var(--menthe);background:rgba(94,234,168,.1);box-shadow:inset 0 0 0 1px rgba(94,234,168,.22)}
.hb .pd-rg-kick{margin:0;color:var(--menthe);font-size:12px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.hb .pd-rg-titre{margin:0;color:#fff;font-size:clamp(19px,2.2vw,23px);font-weight:700;letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
.hb .pd-rg-liste{list-style:none;margin:clamp(20px,2.6vw,28px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 28px}
.hb .pd-rg-liste li{position:relative;display:flex;flex-direction:column;gap:4px;padding-left:24px;min-width:0}
.hb .pd-rg-liste li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:5px;border-left:2px solid var(--menthe);border-bottom:2px solid var(--menthe);transform:rotate(-45deg)}
.hb .pd-rg-liste b{color:#eef3f8;font-size:15px;font-weight:650;line-height:1.35}
.hb .pd-rg-liste span{color:#a9b6c6;font-size:14px;line-height:1.5;text-wrap:pretty}
.hb .pd-rg-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-top:clamp(20px,2.6vw,28px);padding-top:18px;border-top:1px solid rgba(255,255,255,.07)}
.hb .pd-rg-pied p{margin:0;flex:1 1 380px;color:#8b99ab;font-size:13px;line-height:1.5;text-wrap:pretty}
.hb .pd-rg-lien{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;color:#04150d;background:var(--menthe);font-size:14.5px;font-weight:650;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.hb .pd-rg-lien:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(94,234,168,.8)}
.hb-imp-carte{display:flex;gap:10px;align-items:flex-start;margin:-8px 0 22px;padding:10px 14px;border-radius:14px;background:rgba(98,220,240,.08);color:#9be9f6;font-size:14px;font-weight:600;line-height:1.45}
.hb-imp-carte i{font-style:normal}
.v2-defi .hb-imp-carte{margin:10px 0 0}
[data-impact][hidden]{display:none!important}
@media (max-width:859px){
  .hb .pd-rg-liste{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:599px){
  .hb .pd-confiance{padding:20px 18px;border-radius:20px;margin-bottom:36px}
  .hb .pd-rg-liste{grid-template-columns:minmax(0,1fr);gap:16px}
  .hb .pd-rg-pied p{flex-basis:100%}
  .hb .pd-rg-lien{width:100%;justify-content:center}
}
/* Sous 860 px : la marque en plus compact, les quatre colonnes en accordéons (une seule ouverte). */
@media (max-width:859px){
  footer.pd.hb{padding-top:48px;padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
  .hb .pd-env{grid-template-columns:minmax(0,1fr);gap:0}
  .hb .pd-marque{gap:10px;margin-bottom:28px}
  .hb .pd-logo svg{height:26px}
  .hb .pd-phrase{font-size:15px}
  .hb .pd-col{gap:0;border-top:1px solid rgba(255,255,255,.08)}
  .hb .pd-col:last-of-type{border-bottom:1px solid rgba(255,255,255,.08)}
  .hb .pd-titre{margin:0}
  .hb .pd-bascule{min-height:56px;padding:0 2px;font-size:13.5px;cursor:pointer}
  .hb .pd-chevron{display:block}
  .hb .pd-col.ouvert .pd-chevron{transform:rotate(180deg)}
  .hb .pd-liens{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1),visibility 0s linear .4s}
  .hb .pd-col.ouvert .pd-liens{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1)}
  .hb .pd-liens-in{min-height:0;overflow:hidden;gap:0}
  .hb .pd-liens-in>*{padding:9px 2px}
  .hb .pd-liens-in>:last-child{margin-bottom:12px}
  /* « Revenir en haut » double le bouton de la barre collante : il ne reste que là où elle n'existe pas, en discret. */
  .hb .pd-env .pied-haut{margin-top:22px;min-height:40px;border-color:rgba(255,255,255,.12);color:var(--doux);font-size:13.5px}
  body:has(.collant.avec-haut) .hb .pd-env .pied-haut{display:none}
  /* Téléphone (21/10/2026) : toutes les cibles du pied à 44 px. */
  .hb .pd-logo,.hb .pd-mail{display:inline-flex;align-items:center;min-height:44px}
  footer.hb .pd-reseaux a{width:44px;height:44px}
  .hb .pd-liens-in>*{display:flex;align-items:center;min-height:44px;padding:4px 2px}
  footer.hb .v2-langues button{min-width:44px;min-height:44px}
  .hb .pd-env .pied-haut{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.hb .pd-liens,.hb .pd-col.ouvert .pd-liens,.hb .pd-chevron{transition:none}}
/* Les garanties (21/10/2026) : une rangée de cinq, entre la bande RGPD et les bouteilles. */
.hb .pd-garanties{box-sizing:border-box;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;list-style:none;margin:calc(-1 * clamp(24px,4vw,40px)) auto 16px;padding:0}
.hb .pd-garanties li{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}
.hb .pd-ga-icone{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#5eeaa8;background:rgba(94,234,168,.1)}
.hb .pd-garanties b{display:block;font-size:14px;line-height:1.3;color:#eef3f9;margin-bottom:3px}
.hb .pd-garanties li>span:last-child>span{display:block;font-size:12.5px;line-height:1.45;color:rgba(226,232,240,.62)}
@media (max-width:1100px){.hb .pd-garanties{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.hb .pd-garanties{grid-template-columns:1fr;margin-top:-20px;gap:8px}.hb .pd-garanties li{padding:12px}}
.hb .pd-garanties{align-items:stretch}.hb .pd-garanties li{height:100%;box-sizing:border-box;align-self:stretch}
.hb .pd-garanties{margin-bottom:clamp(40px,6vw,64px)}

/* ── The Green dans le pied (21/10/2026, David : « en gros, avec un truc super sympa ») ──
   Une carte océan : le hublot (l'icône de l'app en grand, ses deux vagues roulent), des bulles, la tortue qui nage,
   la phrase validée, Jouer / Google Play / App Store, et au pied les bouteilles des Pass (data-impact).
   Les animations ne tournent que carte visible (habillage.js pose .vu) et s'arrêtent sous prefers-reduced-motion. */
.hb .pd-green{box-sizing:border-box;margin-bottom:clamp(40px,6vw,64px)}
.hb .pd-tg-carte{--tg-menthe:#5ee6a0;--tg-lagon:#1ea2b6;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);border-radius:28px;border:1px solid rgba(94,230,160,.3);background:radial-gradient(90% 60% at 80% 0%,rgba(94,230,160,.2),transparent 62%),radial-gradient(80% 60% at 0% 100%,rgba(30,162,182,.3),transparent 66%),linear-gradient(165deg,#0b2d36 0%,#08212b 48%,#061820 100%);box-shadow:0 40px 90px -50px rgba(30,162,182,.75),inset 0 1px 0 rgba(255,255,255,.08)}
.hb .pd-tg-carte::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-radial-gradient(circle at 78% 38%,transparent 0 46px,rgba(94,230,160,.035) 46px 47px);mask-image:radial-gradient(60% 70% at 78% 38%,#000,transparent)}
.hb .pd-tg-scene{position:relative;display:grid;place-items:center;height:236px;margin-top:6px}
.hb .pd-tg-halo{position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;border-radius:50%;background:radial-gradient(circle,rgba(94,230,160,.35),rgba(30,162,182,.12) 45%,transparent 70%);animation:pd-tg-souffle 6s ease-in-out infinite}
.hb .pd-tg-hublot{position:relative;z-index:1;display:block;width:176px;height:176px;border-radius:50%;box-shadow:0 0 0 7px rgba(94,230,160,.1),0 0 0 16px rgba(94,230,160,.045),0 30px 60px -18px rgba(0,0,0,.65)}
.hb .pd-tg-v1{animation:pd-tg-roule 7s linear infinite}
.hb .pd-tg-v2{animation:pd-tg-roule 11s linear infinite reverse}
.hb .pd-tg-bulle{position:absolute;z-index:2;left:50%;bottom:34px;width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(200,255,232,.7);background:rgba(200,255,232,.12);opacity:0;animation:pd-tg-monte 5.5s ease-in infinite}
.hb .pd-tg-bulle.b1{margin-left:-74px;animation-delay:.2s}
.hb .pd-tg-bulle.b2{margin-left:-52px;width:6px;height:6px;animation-delay:1.9s}
.hb .pd-tg-bulle.b3{margin-left:58px;width:7px;height:7px;animation-delay:3.1s}
.hb .pd-tg-bulle.b4{margin-left:80px;width:11px;height:11px;animation-delay:4.2s}
.hb .pd-tg-bete{position:absolute;z-index:3;left:50%;bottom:14px;width:112px;height:auto;margin-left:14px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5));animation:pd-tg-nage 6.5s ease-in-out infinite}
@keyframes pd-tg-roule{to{transform:translateX(-200px)}}
@keyframes pd-tg-souffle{50%{transform:scale(1.08);opacity:.75}}
@keyframes pd-tg-monte{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.95}100%{transform:translateY(-180px) scale(1.05);opacity:0}}
@keyframes pd-tg-nage{50%{transform:translate(-10px,-12px) rotate(-5deg)}}
.js .hb .pd-tg-carte:not(.vu) .pd-tg-halo,.js .hb .pd-tg-carte:not(.vu) .pd-tg-v1,.js .hb .pd-tg-carte:not(.vu) .pd-tg-v2,.js .hb .pd-tg-carte:not(.vu) .pd-tg-bulle,.js .hb .pd-tg-carte:not(.vu) .pd-tg-bete{animation-play-state:paused}
.hb .pd-tg-texte{position:relative;z-index:1;min-width:0;padding:2px 20px 28px}
.hb .pd-tg-marque{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:#fff;text-decoration:none}
.hb .pd-tg-marque img{flex:none;width:48px;height:48px;filter:drop-shadow(0 8px 16px rgba(30,162,182,.45))}
.hb .pd-tg-marque b{display:block;color:#fff;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.hb .pd-tg-marque span>span{display:block;margin-top:2px;color:var(--tg-menthe);font-size:11.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.hb .pd-green h2{margin:18px 0 0;color:#f2fff8;font-size:clamp(38px,5.6vw,80px);font-weight:650;line-height:1;letter-spacing:-.045em;text-wrap:balance}
.hb .pd-green h2 em{display:block;font-style:normal;font-family:inherit;font-weight:inherit;letter-spacing:inherit;background:linear-gradient(100deg,#eafff5,#5ee6a0 45%,#2fd0c0);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.hb .pd-tg-phrase{margin:18px 0 0;max-width:44ch;color:#c4d9d5;font-size:clamp(16px,1.45vw,19px);line-height:1.55;text-wrap:pretty}
.hb .pd-tg-puces{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.hb .pd-tg-puces li{padding:6px 12px;border-radius:999px;background:rgba(94,230,160,.08);box-shadow:inset 0 0 0 1px rgba(94,230,160,.2);color:#d9f5e9;font-size:13px;font-weight:550;line-height:1.3}
.hb .pd-tg-puces li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--tg-menthe);vertical-align:2px}
.hb .pd-tg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px}
.hb .pd-tg-jouer{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;background:var(--tg-menthe);color:#04150d;font-size:16px;font-weight:700;text-decoration:none;box-shadow:0 14px 34px -14px rgba(94,230,160,.9);transition:transform .2s,box-shadow .2s}
.hb .pd-tg-jouer:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(94,230,160,1)}
.hb .pd-tg-play{display:inline-flex;min-height:48px;border-radius:10px;transition:transform .2s}
.hb .pd-tg-play:hover{transform:translateY(-2px)}
.hb .pd-tg-play img{display:block;height:48px;width:auto}
.hb .pd-tg-store{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:#000;color:#fff;font-size:13.5px;font-weight:600;line-height:1.15;white-space:nowrap;opacity:.66}
.hb .pd-tg-store svg{width:20px;height:20px;flex:none}
.hb .pd-tg-lien{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;color:var(--tg-menthe);font-size:15px;font-weight:650;text-decoration:none}
.hb .pd-tg-lien:hover span:first-child{text-decoration:underline;text-underline-offset:3px}
.hb .pd-tg-lien[hidden]{display:none}
/* Les bouteilles des Pass, au pied de la carte (cachées tant que IMPACT_ACTIF vaut false dans outils/habillage.mjs). */
.hb .pd-impact{grid-column:1/-1;position:relative;z-index:1;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px 20px;padding:16px clamp(18px,3vw,36px);border-top:1px solid rgba(98,220,240,.2);background:rgba(3,16,22,.55)}
.hb .pd-imp-icone{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(98,220,240,.12);color:#9be9f6;font-size:20px}
.hb .pd-imp-texte h3{margin:0;color:#fff;font-size:15.5px;font-weight:650;line-height:1.3}
.hb .pd-imp-texte p{margin:2px 0 0;color:#a9b6c6;font-size:13.5px;line-height:1.45}
.hb .pd-imp-chiffres{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hb .pd-imp-chiffres li{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:#cfe0f2;font-size:13px;font-weight:550;white-space:nowrap}
@media (max-width:1099px){.hb .pd-impact{grid-template-columns:auto 1fr}.hb .pd-imp-chiffres{grid-column:1/-1}}
@media (max-width:599px){
  .hb .pd-tg-carte{border-radius:24px}
  .hb .pd-tg-jouer{width:100%}
  .hb .pd-imp-chiffres li{white-space:normal}
}
@media (min-width:860px){
  .hb .pd-tg-carte{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
  .hb .pd-tg-texte{grid-column:1;grid-row:1;padding:clamp(36px,4.2vw,60px) 0 clamp(36px,4.2vw,56px) clamp(32px,4.2vw,60px)}
  .hb .pd-tg-scene{grid-column:2;grid-row:1;height:auto;min-height:360px;margin:0}
  .hb .pd-tg-halo{width:400px;height:400px;margin:-200px 0 0 -200px}
  .hb .pd-tg-hublot{width:clamp(220px,21vw,290px);height:clamp(220px,21vw,290px)}
  .hb .pd-tg-bete{width:clamp(130px,12vw,170px);bottom:calc(50% - clamp(150px,13vw,190px));margin-left:clamp(0px,1.5vw,24px)}
  .hb .pd-tg-bulle{bottom:calc(50% - 110px)}
  .hb .pd-tg-bulle.b1{margin-left:-120px}.hb .pd-tg-bulle.b2{margin-left:-90px}.hb .pd-tg-bulle.b3{margin-left:96px}.hb .pd-tg-bulle.b4{margin-left:128px}
}
@media (prefers-reduced-motion:reduce){.hb .pd-tg-halo,.hb .pd-tg-v1,.hb .pd-tg-v2,.hb .pd-tg-bete{animation:none}.hb .pd-tg-bulle{display:none}.hb .pd-tg-jouer,.hb .pd-tg-play{transition:none}}

/* ── La navigation (21/10/2026) : un menu de PAGES, « Pour qui » déroulant, et la barre des sections de la page ── */
.hb .v2-liens{align-items:center}
.hb .v2-liens a,.hb .hb-pq-btn{white-space:nowrap}
.hb .hb-pq{position:relative}
.hb .hb-pq-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 11px 9px 13px;border:0;border-radius:999px;background:none;color:#c8d3df;font:500 14.5px/1.2 inherit;font-family:inherit;cursor:pointer;transition:color .2s,background .2s}
.hb .hb-pq-btn:hover,.hb .hb-pq.ouvert .hb-pq-btn{color:#fff;background:rgba(255,255,255,.05)}
.hb .hb-pq-btn[aria-current]{color:#fff;background:rgba(94,234,168,.12);box-shadow:inset 0 0 0 1px rgba(94,234,168,.28)}
.hb .hb-pq-btn .pd-chevron{transition:transform .25s}
.hb .hb-pq.ouvert .hb-pq-btn .pd-chevron{transform:rotate(180deg)}
.hb .hb-pq-menu{position:absolute;top:calc(100% + 12px);left:-8px;width:330px;padding:8px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:rgba(9,16,27,.97);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 30px 70px -30px rgba(0,0,0,.95),0 0 0 1px rgba(94,234,168,.06),inset 0 1px 0 rgba(255,255,255,.06);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s cubic-bezier(.16,1,.3,1),visibility 0s linear .25s}
.hb .hb-pq-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.hb .hb-pq.ouvert .hb-pq-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s cubic-bezier(.16,1,.3,1)}
.hb .hb-pq-lien,.hb .hb-p-pq-lien{display:flex;align-items:flex-start;gap:14px;padding:12px;border-radius:14px;color:#fff;text-decoration:none;transition:background .2s}
.hb .v2-liens .hb-pq-lien{padding:12px;border-radius:14px;color:#fff;background:none;white-space:normal}
.hb .v2-liens .hb-pq-lien:hover,.hb .v2-liens .hb-pq-lien:focus-visible{background:rgba(94,234,168,.08)}
.hb .v2-liens .hb-pq-lien[aria-current]{background:rgba(94,234,168,.1);box-shadow:inset 0 0 0 1px rgba(94,234,168,.25)}
.hb .hb-pq-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--menthe);background:rgba(94,234,168,.1);box-shadow:inset 0 0 0 1px rgba(94,234,168,.22)}
.hb .hb-pq-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.hb .hb-pq-txt b{font-size:15.5px;font-weight:650;line-height:1.25;letter-spacing:-.01em}
.hb .hb-pq-txt small{color:#9fb0c2;font-size:13.5px;line-height:1.4}
.hb .v2-liens [data-nav="ambassador"]{display:none}
@media (min-width:1240px){.hb .v2-liens [data-nav="ambassador"]{display:inline-block}}
@media (min-width:980px) and (max-width:1139px){.hb .v2-liens{gap:0;margin-left:4px}.hb .v2-liens a,.hb .hb-pq-btn{padding-left:9px;padding-right:9px;font-size:14px}.hb .v2-barre{gap:10px}}

/* La barre des sections de la page : sous la barre, quand on a commencé à descendre. */
#entete.hb .hb-sous,#entete.hb .hb-sous *{pointer-events:auto}
.hb .hb-sous{width:min(1180px,100%);margin:8px auto 0;display:flex;justify-content:center;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .35s cubic-bezier(.16,1,.3,1),visibility 0s linear .35s}
#entete.hb.plie .hb-sous{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .35s cubic-bezier(.16,1,.3,1)}
#entete.hb.menu-ouvert .hb-sous{opacity:0;visibility:hidden}
.hb .hb-sous-in{display:flex;gap:2px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px;border-radius:999px;border:1px solid var(--ligne);background:#09111c;box-shadow:0 16px 40px -20px rgba(0,0,0,.95)}
.hb .hb-sous-in::-webkit-scrollbar{display:none}
.hb .hb-sous a{flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:999px;color:#aebccb;font-size:13.5px;font-weight:550;white-space:nowrap;text-decoration:none;transition:color .2s,background .2s}
.hb .hb-sous a:hover{color:#fff}
.hb .hb-sous a[aria-current]{color:var(--encre-menthe);background:var(--menthe)}
html.hb-a-sous{scroll-padding-top:136px}
@media (max-width:979px){
  .hb .hb-sous{margin-top:6px;justify-content:flex-start}
  .hb .hb-sous-in{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent)}
}
@media (prefers-reduced-motion:reduce){.hb .hb-sous,.hb .hb-pq-menu,.hb .hb-pq-btn .pd-chevron{transition:none}}

/* Le panneau du téléphone : même structure, « Pour qui » dépliable, les sections de la page en dessous. */
.hb-panneau{justify-content:flex-start}
.hb-p-liens a,.hb-p-pq-btn{font-size:clamp(25px,7.2vw,34px);padding:14px 2px}
.hb-p-pq{border-bottom:1px solid rgba(255,255,255,.08)}
.hb-p-pq-btn{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:none;color:#fff;font-family:inherit;font-weight:650;line-height:1.1;letter-spacing:-.035em;text-align:left;cursor:pointer}
.hb-p-pq-btn .pd-chevron{width:22px;height:22px;color:var(--menthe);transition:transform .25s}
.hb-p-pq-btn[aria-expanded="true"] .pd-chevron{transform:rotate(180deg)}
.hb-p-pq-btn[aria-current]{color:var(--menthe)}
.hb-p-pq-sous{display:flex;flex-direction:column;gap:6px;padding:0 0 14px}
.hb-p-pq-sous[hidden]{display:none}
.hb .hb-p-liens .hb-p-pq-lien{display:flex;justify-content:flex-start;padding:12px;border:0;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);font-size:inherit;letter-spacing:normal;opacity:1;transform:none}
.hb .hb-p-liens .hb-p-pq-lien::after{content:none}
.hb .hb-p-liens .hb-p-pq-lien[aria-current]{box-shadow:inset 0 0 0 1px rgba(94,234,168,.35);background:rgba(94,234,168,.08)}
.hb-p-page p{margin:0 0 10px;color:var(--menthe);font-size:12px;font-weight:650;letter-spacing:.14em;text-transform:uppercase}
.hb-p-puces{display:flex;flex-wrap:wrap;gap:8px}
.hb-p-puces a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#dce6ef;font-size:14.5px;font-weight:550}
.hb-p-puces a[aria-current]{color:var(--encre-menthe);background:var(--menthe);box-shadow:none}
.hb-p-bas{margin-top:auto}
@media (prefers-reduced-motion:no-preference){
  .hb-p-pq,.hb-p-page{opacity:0;transform:translateY(16px);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
  .hb-panneau.ouvert .hb-p-pq,.hb-panneau.ouvert .hb-p-page{opacity:1;transform:none;transition-delay:calc(70ms + var(--i,0) * 55ms)}
}

/* ── « Demande à une AI » (21/10/2026, David, inspiré de taap.it) : un arc menthe qui tourne autour d'une carte de verre ── */
@property --pd-ai-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.hb .pd-ai,.hb .pd-green{display:block}
.hb .pd-ai{box-sizing:border-box;margin-bottom:clamp(20px,3vw,28px)}
.hb .pd-ai-carte{position:relative;isolation:isolate;overflow:hidden;padding:1px;border-radius:28px;background:rgba(94,234,168,.16)}
.hb .pd-ai-arc{position:absolute;inset:0;z-index:0;border-radius:inherit;background:conic-gradient(from var(--pd-ai-angle),transparent 0deg,transparent 220deg,rgba(47,208,192,.55) 290deg,#5eeaa8 330deg,#eafff5 350deg,transparent 360deg);animation:pd-ai-tour 7s linear infinite}
@keyframes pd-ai-tour{to{--pd-ai-angle:360deg}}
.hb .pd-ai-in{position:relative;z-index:1;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:26px;padding:30px 20px 22px;border-radius:27px;background:radial-gradient(70% 90% at 0% 0%,rgba(94,234,168,.13),transparent 60%),linear-gradient(160deg,#0b1724 0%,#08111c 55%,#070d17 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.hb .pd-ai-halo{position:absolute;z-index:-1;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(94,234,168,.2),rgba(47,208,192,.07) 45%,transparent 70%);pointer-events:none;animation:pd-ai-souffle 7s ease-in-out infinite}
@keyframes pd-ai-souffle{50%{transform:scale(1.12);opacity:.7}}
.hb .pd-ai-texte{min-width:0}
.hb .pd-ai-kick{display:inline-flex;align-items:center;gap:9px;margin:0;color:var(--menthe);font-size:12px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.hb .pd-ai-point{width:8px;height:8px;border-radius:50%;background:var(--menthe);box-shadow:0 0 0 4px rgba(94,234,168,.16),0 0 14px rgba(94,234,168,.8)}
.hb .pd-ai h2{margin:14px 0 0;color:#f2f7fb;font-size:clamp(28px,4vw,50px);font-weight:650;line-height:1.06;letter-spacing:-.04em;text-wrap:balance}
.hb .pd-ai h2 em{display:block;margin-top:.18em;font-style:normal;font-family:inherit;font-weight:inherit;letter-spacing:inherit;background:linear-gradient(100deg,#eafff5,#5eeaa8 50%,#2fd0c0);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.hb .pd-ai-note{margin:16px 0 0;max-width:46ch;color:#93a4b6;font-size:14px;line-height:1.5}
.hb .pd-ai-boutons{display:flex;flex-direction:column;gap:10px;min-width:0}
.hb .pd-ai-btn{position:relative;display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;min-height:60px;padding:0 16px 0 10px;border-radius:18px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.06);color:#fff;font-size:16px;font-weight:650;letter-spacing:-.01em;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.hb .pd-ai-btn:hover,.hb .pd-ai-btn:focus-visible{background:rgba(94,234,168,.08);box-shadow:inset 0 0 0 1px rgba(94,234,168,.5),0 14px 34px -18px rgba(94,234,168,.7);transform:translateY(-2px)}
.hb .pd-ai-btn:focus-visible{outline:2px solid var(--menthe);outline-offset:3px}
.hb .pd-ai-logo{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff}
.hb .pd-ai-btn>span:nth-child(2){flex:1;min-width:0}
.hb .pd-ai-sortie{flex:none;color:var(--menthe);transition:transform .2s}
.hb .pd-ai-btn:hover .pd-ai-sortie{transform:translate(2px,-2px)}
@media (min-width:860px){
  .hb .pd-ai-in{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);align-items:center;gap:clamp(32px,5vw,72px);padding:clamp(36px,4.2vw,56px) clamp(32px,4.2vw,60px)}
}
.js .hb .pd-ai-carte:not(.vu) .pd-ai-arc,.js .hb .pd-ai-carte:not(.vu) .pd-ai-halo{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hb .pd-ai-arc,.hb .pd-ai-halo{animation:none}.hb .pd-ai-arc{--pd-ai-angle:40deg}.hb .pd-ai-btn,.hb .pd-ai-sortie{transition:none}}
.hb-p-pq-lien .hb-pq-txt b{font-size:17px;letter-spacing:-.01em}
.hb-p-pq-lien .hb-pq-txt small{font-size:14px;font-weight:450;letter-spacing:0}
.hb-panneau{background:radial-gradient(70% 45% at 50% 0%,rgba(94,234,168,.14),transparent 70%),rgba(6,11,20,.985)}

/* La page unique (outils/page-unique.mjs, 25/10/2026) : le menu des pages se retire tant que seul le Pack Fondateur est en vente. */
#entete.hb .v2-liens[hidden],.hb .hb-p-pq[hidden]{display:none!important}
/* Sur téléphone, « Se connecter » passe dans le menu : le bouton du Pack et le menu tiennent dans la barre. */
@media (max-width:440px){#entete.hb .v2-entrer{display:none}}
/* La page unique (28/10/2026) : le pied du club — centré, la marque, une rangée de pastilles (Ambassadeur en avant,
   puis le légal), le grand YLC gardé tel quel. De la place en bas pour la barre collante de la page de vente. */
footer.pd.hb:has(.pd-simple){padding-bottom:calc(120px + env(safe-area-inset-bottom,0px));background:radial-gradient(60% 45% at 50% 0%,rgba(94,234,168,.10),transparent 70%),radial-gradient(40% 30% at 50% 100%,rgba(94,234,168,.06),transparent 70%),#05080d}
.hb .pd-env:has(.pd-simple){grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:34px}
.hb .pd-env:has(.pd-simple) .pd-marque{align-items:center;max-width:560px;gap:16px}
.hb .pd-env:has(.pd-simple) .pd-logo svg{height:44px}
.hb .pd-kick{margin:6px 0 0;font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.32em;text-transform:uppercase;color:var(--menthe)}
.hb .pd-env:has(.pd-simple) .pd-phrase{font-size:clamp(19px,2.2vw,24px);line-height:1.35;color:#eef3f7;font-weight:500;letter-spacing:-.01em;text-wrap:balance}
.hb .pd-env:has(.pd-simple) .pd-mail{color:#9fb0c0;font-size:14.5px}
.hb .pd-simple{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;max-width:980px}
.hb .pd-env:has(.pd-simple) .pied-haut{justify-self:center}
.hb .pd-simple a,.hb .pd-simple .lien-cookies{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:#c8d3df;font:500 14.5px/1 inherit;font-family:inherit;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.hb .pd-simple a:hover,.hb .pd-simple .lien-cookies:hover{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.hb .pd-simple .pd-s-amb{color:#04130c;font-weight:700;border-color:transparent;background:linear-gradient(135deg,#8ff5c8,var(--menthe));box-shadow:0 12px 34px -14px rgba(94,234,168,.8)}
.hb .pd-simple .pd-s-amb:hover{color:#04130c;filter:brightness(1.06);background:linear-gradient(135deg,#a8f8d4,var(--menthe))}
.hb .pd-simple .pd-s-amb svg{flex:none}
@media (max-width:600px){.hb .pd-simple{gap:8px}.hb .pd-simple a,.hb .pd-simple .lien-cookies{min-height:40px;padding:0 15px;font-size:14px}.hb .pd-simple .pd-s-amb{flex-basis:100%;justify-content:center}}