.ic{display:inline-block;width:9px;height:18px;margin:-3px 5px -3px 0;vertical-align:middle;
 background-repeat:no-repeat;background-position:center;background-size:contain}
.ic-ample{background-image:url('ic-ample.png')}
.ic-ajuste{background-image:url('ic-ajuste.png')}
*{box-sizing:border-box;margin:0;padding:0}
:root{--disp:'Poppins',system-ui,sans-serif;--sans:'Inter',system-ui,sans-serif}
body{font-family:var(--sans);font-size:15px;line-height:1.65;color:#2b2740;background:#faf8fc}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.02em}
a{color:#c0518f}.wrap{max-width:1000px;margin:0 auto;padding:0 22px}
/* BANNIERE : strictement celle de l'accueil, memes couleurs, meme hauteur,
   meme logo, meme bascule FR/EN, meme menu burger sous 860 px. Une page de
   guide ne doit pas donner l'impression d'avoir quitte le site. */
.nav{position:sticky;top:0;z-index:1200;background:rgba(255,255,255,.9);
 backdrop-filter:blur(12px);border-bottom:1px solid #efe9f2}
.nav .wrap{max-width:1220px;display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.nav .logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.nav .logo img{height:46px;width:auto;display:block}
.navlinks{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:600;color:#7a7592;white-space:nowrap}
.navlinks a{color:#7a7592;text-decoration:none;white-space:nowrap}
.navlinks a:hover{color:#2b2740}
.navr{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.lang{display:flex;background:#f3f0f7;border-radius:999px;padding:3px}
.lang a{padding:5px 12px;font-size:12px;font-weight:700;color:#7a7592;
 border-radius:999px;text-decoration:none}
.lang a.on{background:#2b2740;color:#fff}
.nav .btn{font-family:var(--disp);font-weight:600;font-size:14px;border-radius:999px;
 padding:11px 20px;border:none;background:#E691C2;color:#fff;text-decoration:none;
 display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.nav .btn:hover{background:#c0518f}
.burger{display:none;width:42px;height:42px;border:1.5px solid #efe9f2;background:#fff;
 border-radius:12px;cursor:pointer;flex-direction:column;align-items:center;
 justify-content:center;gap:4px;padding:0;flex:0 0 auto}
.burger span{display:block;width:17px;height:2px;background:#2b2740;border-radius:2px;transition:.18s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobmenu{display:none;border-top:1px solid #efe9f2;background:#fff}
.mobmenu.open{display:block}
.mobmenu a{display:block;padding:15px 22px;font-family:var(--disp);font-weight:600;
 font-size:16px;color:#2b2740;text-decoration:none;border-bottom:1px solid #efe9f2}
.mobmenu a:last-child{border-bottom:none}
@media(max-width:1060px){
 .navlinks{display:none}
 .burger{display:flex}
 .nav .wrap{height:62px;gap:10px}
 .navr .btn{display:none}
 .nav .logo img{height:36px}
}
@media(max-width:560px){.nav .logo img{height:34px}}
.crumb{font-size:13px;color:#6b6580;margin:22px 0 4px}.crumb a{text-decoration:none}
h1{font-size:30px;font-weight:800;line-height:1.15;margin:4px 0 10px;max-width:22ch}
.lead{color:#403a52;max-width:66ch;margin-bottom:8px}
.trust{background:#FFF7D5;border:1px solid #efe6bf;border-radius:12px;padding:12px 16px;font-size:13.5px;color:#5c5530;margin:16px 0 26px}
h2{font-size:20px;margin:30px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ccard{display:block;background:#fff;border:1px solid #e7e3ef;border-radius:14px;padding:14px 16px;text-decoration:none;color:#2b2740;transition:.15s}
.ccard:hover{box-shadow:0 8px 22px rgba(43,39,64,.1);transform:translateY(-2px)}
.ccard b{display:block;font-size:16px}.ccard span{color:#6b6580;font-size:13px}
.venues{display:grid;gap:10px;margin-top:6px}
.v{background:#fff;border:1px solid #e7e3ef;border-radius:14px;padding:14px 16px;display:flex;gap:14px;align-items:flex-start}
.v .ph{width:74px;height:74px;border-radius:10px;object-fit:cover;flex-shrink:0;background:#e8eff8}
.v .bd{flex:1;min-width:0}
.v h3{font-size:16px;margin:0 0 3px}.v .loc{font-size:13px;color:#6b6580;margin-bottom:6px}
.v .cit{font-size:13px;color:#4a4560;border-left:3px solid #B8DAF8;padding-left:9px;margin:6px 0}
.v .vo{font-size:11px;color:#8a8499;border-left:2px solid #e0dce8;padding-left:9px;margin:4px 0 6px;font-style:italic;line-height:1.4}
.badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.bdg{font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;display:inline-flex;gap:5px;align-items:center}
.bdg.oui{background:#e0f0e8;color:#2f8158}.bdg.non{background:#fbe4e0;color:#cf4a3a}.bdg.inc{background:#eee9f5;color:#6b6580}
.v .ext{font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
footer{border-top:1px solid #e7e3ef;margin-top:50px;padding:26px 0;color:#6b6580;font-size:13px;background:#fff}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.answer{background:linear-gradient(135deg,#eaf3fd,#fbeaf4);border:1px solid #d8e6f5;border-radius:16px;padding:16px 20px;margin:14px 0 22px}
.answer p{font-size:16.5px;line-height:1.6;color:#2b2740;margin:0;font-weight:500}
.faq{margin-top:8px}
.faq details{background:#fff;border:1px solid #e7e3ef;border-radius:12px;margin-bottom:8px;overflow:hidden}
.faq summary{cursor:pointer;padding:13px 16px;font-weight:650;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:#c0518f;font-weight:800;font-size:19px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{border-bottom:1px solid #f0edf6}
.faq p{padding:12px 16px 15px;margin:0;color:#403a52;font-size:14.5px}
.premium-lock{margin:30px 0;padding:28px;border:1px solid #e4ddea;border-radius:22px;background:linear-gradient(135deg,#fff,#f7f1f8);text-align:center;box-shadow:0 12px 36px rgba(43,39,64,.07)}
.premium-lock h2{margin:7px 0 8px}.premium-lock p{max-width:650px;margin:0 auto 18px;color:#625b76}.premium-lock .lock-badge{display:inline-flex;padding:6px 11px;border-radius:999px;background:#f5deeb;color:#943869;font-size:12px;font-weight:800}.premium-lock .unlock{display:inline-flex;padding:12px 18px;border-radius:999px;background:#2b2740;color:#fff;text-decoration:none;font-weight:800}
.premium-lock .lock-liste{max-width:560px;margin:0 auto 16px;padding:0;list-style:none;text-align:left}
.premium-lock .lock-liste li{position:relative;padding:5px 0 5px 26px;color:#403a52;font-size:14.5px}
.premium-lock .lock-liste li::before{content:"";position:absolute;left:6px;top:12px;width:8px;height:8px;border-radius:50%;background:#b74e89}
.premium-lock .lock-prix{margin:0 auto 16px;color:#2b2740;font-size:14.5px}
.premium-lock .lock-prix b{font-size:17px}
.offre{margin:44px 0 10px;padding:30px 28px;border:1px solid #e4ddea;border-radius:24px;background:linear-gradient(135deg,#fff,#f5f1f9);text-align:center}
.offre h2{margin:0 0 18px;text-wrap:balance}
.offre p{max-width:640px;margin:0 auto 14px;color:#625b76;font-size:15px}
.offre-chiffres{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:0 0 18px}
.offre-chiffres div{min-width:132px;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid #ece7f3}
.offre-chiffres b{display:block;font-size:25px;color:#2b2740;line-height:1.15}
.offre-chiffres span{display:block;margin-top:3px;color:#706b80;font-size:12.5px}
.offre-prix{color:#2b2740!important;font-size:15px}
.offre-prix b{font-size:18px}
.offre-cta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;margin-top:4px}
.offre .unlock{display:inline-flex;padding:13px 22px;border-radius:999px;background:#2b2740;color:#fff;text-decoration:none;font-weight:800}
.offre-second{color:#a33f78;font-weight:700;text-underline-offset:3px}
.cc-carte{margin:0 0 20px}
.cc-carte svg{width:100%;height:auto;max-width:640px}
.cc-carte figcaption{margin-top:8px;color:#706b80;font-size:12.5px}
.cc-lab{font:700 12px Inter,system-ui,sans-serif;fill:#2b2740;text-anchor:middle;paint-order:stroke;stroke:#eaf3f6;stroke-width:3px}
.plans-hero{text-align:center;max-width:760px;margin:28px auto 34px}.plans-hero h1{margin-left:auto;margin-right:auto;text-wrap:balance}.plans-hero p{font-size:18px;color:#625b76;text-wrap:balance}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;margin:28px 0}
.plan{background:#fff;border:1px solid #e7e3ef;border-radius:24px;padding:26px;display:grid;grid-template-rows:auto minmax(68px,auto) minmax(56px,auto) 1fr auto;box-shadow:0 10px 34px rgba(40,31,63,.07)}
.plan.featured{border:2px solid #d75b9f;position:relative}.plan-badge{display:inline-flex;align-self:flex-start;background:#f8e4f0;color:#9b356f;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800}
.plan h2{font-size:24px;margin:18px 0 5px;text-wrap:balance}.plan .price{font-size:34px;font-weight:850;color:#29233f;margin:8px 0}.plan .price small{font-size:14px;font-weight:600;color:#756e86}
.plan ul{padding-left:20px;color:#4e475f;line-height:1.65;flex:1;margin:14px 0 30px}.plan li+li{margin-top:5px}.plan button,.plan .plan-link{border:0;border-radius:13px;padding:14px 16px;min-height:52px;margin-top:8px;display:flex;align-items:center;justify-content:center;font-weight:800;line-height:1.3;text-align:center;cursor:pointer;text-decoration:none;background:#29233f;color:#fff}.plan.featured button{background:#c64f91}
.plans-note{background:#f7f4fa;border-radius:18px;padding:22px;text-align:center;color:#514a62;line-height:1.6;margin:40px 0 30px}.plans-trust{max-width:850px;margin:24px auto 0;text-align:center;color:#665f77;font-size:13px;line-height:1.75}.plans-trust a{color:#a33f78;font-weight:700}
main.wrap>h1{text-align:center;margin-left:auto;margin-right:auto;text-wrap:balance}main.wrap>.lead{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;text-wrap:balance}
/* Le design des guides vit desormais dans guides_design.py : hero, bandes,
   sommaire, FAQ et bande d'offre. Les regles etaient ici et la-bas, avec
   deux compteurs sur le meme sommaire — chaque entree sortait numerotee
   deux fois. Une seule source, et le probleme ne peut plus revenir. */
@media(max-width:800px){.plans-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}.plan{grid-template-rows:auto auto auto auto auto}.plans-hero{text-align:center}}
@media(max-width:600px){h1{font-size:24px}.v{flex-direction:column}.v .ph{width:100%;height:150px}.answer p{font-size:15px}.plan{padding:22px}.plan ul{margin-bottom:26px}.plans-note{margin-top:34px}.plans-trust{font-size:13px;line-height:1.7}.plans-hero{margin-top:16px}.plans-hero p{font-size:16px}}
footer{background:var(--ink,#2b2740);color:#e9e6f2;
 margin-top:clamp(64px,8vw,104px);padding:52px 0 24px;
 font-family:var(--sans,system-ui)}
/* La bande proprietaires termine deja la page avec un fond sombre : ajouter
   encore la marge generale creait une grande barre blanche artificielle. */
.ownerband + footer{margin-top:0}
/* Une ancienne regle des pages SEO transformait ce conteneur en flex et
   comprimait les lignes du footer. Le footer garde partout le meme flux. */
footer>.wrap{display:block}
footer a{text-decoration:none}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:34px 26px;
 align-items:start}
.fbrand .flogo{display:block;width:150px;margin-bottom:8px}
.fbrand .flogo img{display:block;width:100%;height:auto}
.fbrand .tag{color:#a49eb9;font-size:12.5px;line-height:1.65;max-width:34ch}
footer h4{font-family:var(--disp,system-ui);font-size:10.5px;font-weight:700;
 text-transform:uppercase;letter-spacing:.1em;color:#fff;margin:0 0 10px}
footer h4.fsub{margin-top:20px}
footer ul{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.5}
footer li{margin:0 0 8px}
footer li a{color:#bdb8cf;transition:color .14s}
footer li a:hover{color:#fff}

/* Par pays : une seule liste, en liens reels, lisible sur fond sombre. */
.fpays{margin-top:34px;padding-top:20px;border-top:1px solid #3d3859}
.fpays ul{display:flex;flex-wrap:wrap;gap:8px 10px;font-size:12.5px}
.fpays li{margin:0}
.fpays li a{display:inline-block;color:#cfcade;background:rgba(255,255,255,.06);
 border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:5px 13px;
 font-weight:600;transition:.14s}
.fpays li a:hover{background:rgba(255,255,255,.15);color:#fff}
.fpays li a span{color:#8f89a6;font-weight:500;font-size:11px;margin-left:3px}

.fdisc{font-size:10.5px;color:#8b86a0;line-height:1.65;max-width:96ch;
 margin:26px 0 0;padding-top:18px;border-top:1px solid #3d3859}
.fbottom{margin-top:14px;font-size:11px;color:#8b86a0;
 display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.fbottom a{color:#8b86a0}
.fbottom a:hover{color:#cfcade}

@media(max-width:900px){
 .fgrid{grid-template-columns:1fr 1fr;gap:26px 22px}
 .fbrand{grid-column:1/-1}
 .fbrand .tag{max-width:none}
}
/* Sur telephone le pied de page prenait deux ecrans. On resserre tout,
   on masque le baratin de marque et on plie la liste des pays. */
@media(max-width:640px){
 footer{margin-top:52px;padding:34px 0 18px}
 .fgrid{grid-template-columns:1fr 1fr;gap:22px 18px}
 .fbrand{grid-column:1/-1;margin-bottom:2px}
 .fbrand .flogo{width:126px;margin-bottom:0}
 .fbrand .tag{display:none}
 footer h4{font-size:10px;margin-bottom:7px}
 footer h4.fsub{margin-top:14px}
 footer ul{font-size:12px;line-height:1.45}
 footer li{margin-bottom:7px}
 .fpays{margin-top:20px;padding-top:14px}
 .fpays ul{max-height:5.4em;overflow:hidden}
 .fdisc{font-size:9.5px;margin-top:16px;padding-top:12px;
  max-height:4.4em;overflow:hidden}
 .fbottom{margin-top:10px;gap:12px;font-size:10px}
}

.langsel{position:relative;display:inline-block}
.langsel>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  padding:7px 11px;border-radius:999px;background:rgba(43,39,64,.06);
  font-weight:700;font-size:13px;color:#2b2740;user-select:none}
.langsel>summary::-webkit-details-marker{display:none}
.langsel>summary:hover{background:rgba(43,39,64,.11)}
.langsel>summary .chev{font-size:9px;opacity:.55;margin-left:1px}
.langsel .flag{font-size:15px;line-height:1}
.langsel-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:172px;
  background:#fff;border:1px solid #e7e3ef;border-radius:14px;padding:6px;
  box-shadow:0 14px 38px rgba(43,39,64,.16)}
.langsel-menu a,.langsel-menu span{display:flex;align-items:center;gap:9px;padding:9px 11px;
  border-radius:10px;font-size:14px;color:#2b2740;text-decoration:none;white-space:nowrap}
.langsel-menu a:hover{background:rgba(43,39,64,.06)}
.langsel-menu a.on{background:rgba(230,145,194,.16);font-weight:700}
.langsel-menu .code{margin-left:auto;font-size:11px;font-weight:700;opacity:.5;letter-spacing:.04em}
.langsel-menu span{opacity:.42;cursor:default}
@media(max-width:900px){.langsel-menu{right:auto;left:0}}
:root{--blue:#B8DAF8; --pink:#E691C2; --cream:#FFF7D5; --white:#fff;--blue-s:#e8f3fd; --pink-s:#fbeaf4; --cream-s:#fffcf0;--pink-d:#c0518f; --blue-d:#6ba7e6;--ink:#2b2740; --ink2:#7a7592;--oui:#2f8158; --non:#cf4a3a; --sous:#c08a2e; --sig:#8f7bbf; --wait:#a99f8f;--line:#efe9f2;--gut:clamp(20px,4.5vw,56px);--disp:'Poppins',system-ui,sans-serif; --sans:'Inter',system-ui,sans-serif;--stripes:repeating-linear-gradient(90deg,var(--blue) 0 46px,var(--cream) 46px 92px);}
/* ====================== HERO DE GUIDE ======================
   Pleine largeur, photo, voile, vague. C'est la première chose que voit une
   lectrice venue de Google, et jusqu'ici c'était un titre noir sur blanc. */
.ghero{position:relative;background-color:var(--blue-s);background-repeat:no-repeat;
 overflow:hidden;isolation:isolate;min-height:430px;display:flex;align-items:center}
.ghero::before{content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 30%,
 rgba(255,255,255,.55) 56%,rgba(255,255,255,.12) 82%)}
/* Le bassin : une photo large, cadrée à droite pour que la nageuse reste
   dans la partie découverte du voile. */
.ghero--photo{background-size:cover;background-position:center right}
/* Le portrait : détouré, vertical, sur fond crème. En `cover` il était coupé
   au visage — on ne voyait plus qu'une noix de coco. On l'affiche entier. */
.ghero--portrait{background-color:var(--cream-s);background-size:auto 100%;
 background-position:right bottom}
.ghero--portrait::before{background:linear-gradient(100deg,rgba(255,252,240,.97) 0%,
 rgba(255,252,240,.9) 34%,rgba(255,252,240,.5) 58%,rgba(255,252,240,0) 76%)}
/* La mosaïque est une texture, pas un sujet : à voile égal elle rivalise avec
   le titre. On la pousse en arrière-plan pour de bon. */
.ghero--texture{background-size:cover;background-position:center}
.ghero--texture::before{background:linear-gradient(100deg,rgba(255,255,255,.97) 0%,
 rgba(255,255,255,.93) 34%,rgba(255,255,255,.8) 62%,rgba(255,255,255,.62) 100%)}
.ghero-in{position:relative;z-index:3;max-width:1000px;margin:0 auto;width:100%;
 padding:60px var(--gut) clamp(104px,11vw,150px)}
.ghero .kick{display:inline-block;font-family:var(--disp);font-size:12px;font-weight:700;
 letter-spacing:.12em;text-transform:uppercase;color:var(--pink-d);margin-bottom:10px}
.ghero h1{font-family:var(--disp);font-size:clamp(32px,4.6vw,54px);font-weight:800;
 line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin:0;max-width:17ch;
 text-wrap:balance}
.ghero h1 .u{color:var(--pink-d)}
.ghero .g-meta{margin:18px 0 0;color:#5b566f}
.ghero-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:13px;
 color:#5b566f;font-weight:600}
.ghero-trust b{font-family:var(--disp);color:var(--ink);font-size:15px}
.ghero-back{display:inline-block;margin-top:20px;font-size:13.5px;font-weight:700;
 color:var(--pink-d);text-decoration:none}
.ghero-back:hover{text-decoration:underline}
.ghero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;
 height:clamp(64px,8vw,120px);z-index:4;pointer-events:none;display:block}
.ghero-wave svg{position:absolute;left:0;bottom:0;width:100%;height:100%;display:block}
@media(max-width:820px){
 /* Sous cette largeur le sujet passerait derrière le texte : on garde la
    couleur et la vague, on retire l'image. Un titre lisible vaut mieux
    qu'une photo devinée. */
 .ghero{min-height:auto}
 .ghero--portrait{background-size:auto 78%;background-position:right -14% bottom}
 .ghero--photo,.ghero--texture{background-position:center}
}
@media(max-width:700px){
 .ghero-in{padding:34px var(--gut) clamp(56px,14vw,88px)}
 .ghero h1{font-size:clamp(26px,7.4vw,36px);max-width:none}
 .ghero-trust{gap:12px;font-size:12.5px}
 .ghero--portrait{background-image:none!important}
}

/* ====================== CORPS ======================
   La colonne de lecture reste centrée et étroite : c'est ce qui rend un texte
   lisible. Ce qui l'entoure — bandes, cartes, offre — prend toute la largeur,
   comme les sections de l'accueil. */
body.page-guide{background:#faf8fc}
main.guide-page{max-width:none;padding:0;margin:0}
.gwrap{max-width:1000px;margin:0 auto;padding:0 var(--gut)}
.gcol{max-width:70ch;margin:0 auto}

/* Une bande par sous-titre. Une sur deux reçoit un fond, pour que l'oeil
   compte les sections sans les lire. */
.gsec{padding:46px 0}
.gsec:nth-of-type(even){background:#fff;border-block:1px solid var(--line)}
.gsec>.gwrap>.gcol>h2{font-family:var(--disp);font-size:clamp(24px,3.2vw,34px);
 font-weight:800;letter-spacing:-.02em;line-height:1.18;margin:0 0 16px;
 color:var(--ink);text-wrap:balance;border:0;padding:0}
.gsec h2 .h2-num{display:block;font-family:var(--disp);font-size:12px;font-weight:700;
 letter-spacing:.14em;color:var(--pink-d);margin-bottom:8px}
.gsec p,.gsec .lead{font-size:16.5px;line-height:1.78;color:#403a52;margin:0 0 16px}
.gsec p a,.gsec .lead a{color:var(--pink-d);font-weight:600;
 text-decoration:underline;text-underline-offset:2px;
 text-decoration-color:rgba(192,81,143,.35)}
.gsec p a:hover,.gsec .lead a:hover{text-decoration-color:var(--pink-d)}
@media(max-width:700px){.gsec{padding:34px 0}}

/* L'ouverture : la réponse directe, en carte, juste sous la vague. C'est le
   bloc que beaucoup de lectrices liront seul. */
.gopen{padding:34px 0 8px}
.gopen .answer{background:#fff;border:1px solid var(--line);
 border-left:5px solid var(--pink);border-radius:0 22px 22px 0;padding:24px 28px;
 box-shadow:0 22px 46px -34px rgba(43,39,64,.55);margin:0}
.gopen .answer p{font-size:17.5px;line-height:1.68;color:var(--ink);margin:0;
 font-weight:500}
@media(max-width:700px){.gopen .answer{padding:18px 20px;border-radius:0 16px 16px 0}
 .gopen .answer p{font-size:16px}}

/* Le sommaire : une carte, pas une liste nue. */
.g-som{background:#fff;border:1px solid var(--line);border-radius:20px;
 padding:20px 24px;margin:26px auto 0;box-shadow:0 16px 36px -30px rgba(43,39,64,.5)}
.g-som-t{font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.13em;
 text-transform:uppercase;color:var(--ink2);margin:0 0 12px}
.g-som ol{margin:0;padding:0;list-style:none;counter-reset:som;display:grid;gap:7px}
.g-som li{counter-increment:som;position:relative;padding-left:34px}
.g-som li::before{content:counter(som,decimal-leading-zero);position:absolute;left:0;
 top:1px;font-family:var(--disp);font-size:11.5px;font-weight:700;color:var(--pink-d)}
.g-som a{color:var(--ink);text-decoration:none;font-size:15.5px;font-weight:600;
 line-height:1.5}
.g-som a:hover{color:var(--pink-d)}

/* Les repères de lecture, quand ils restent dans le corps. */
.g-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;
 color:#5b566f}
.g-meta b{font-family:var(--disp);color:var(--ink)}
.g-meta i{color:var(--line);font-style:normal}

/* Les listes du corps. */
.gsec ul{list-style:none;padding:0;display:grid;gap:9px;margin:6px 0 18px}
.gsec ul>li{position:relative;padding:12px 18px 12px 42px;background:#fff;
 border:1px solid var(--line);border-radius:14px;font-size:15.5px;line-height:1.6;
 color:var(--ink)}
.gsec:nth-of-type(even) ul>li{background:#faf8fc}
.gsec ul>li::before{content:"";position:absolute;left:18px;top:19px;width:8px;
 height:8px;border-radius:50%;background:var(--pink)}

/* Les cartes pays : celles de l'accueil, en plus sobre. */
.gsec .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
 gap:12px;margin:4px 0 6px}
.gsec .ccard{display:block;background:#fff;border:1px solid var(--line);
 border-radius:18px;padding:16px 18px;text-decoration:none;color:var(--ink);
 transition:.16s;box-shadow:0 14px 30px -28px rgba(43,39,64,.6)}
.gsec .ccard:hover{transform:translateY(-3px);
 box-shadow:0 18px 34px -20px rgba(43,39,64,.35);border-color:var(--pink-s)}
.gsec .ccard b{display:block;font-family:var(--disp);font-size:16.5px;font-weight:700}
.gsec .ccard span{color:var(--ink2);font-size:13px}

/* ---- Les fiches de chaîne, sur le guide des grandes chaînes ----
   C'était une liste à puces : nom en gras, verdict, citation et source à la
   suite, en texte courant. Sur sept chaînes cela faisait un pavé où l'oeil ne
   trouvait ni le nom, ni la réponse. Une carte par chaîne, et les deux
   verdicts en pastilles : c'est la distinction que la lectrice cherche. */
.ch-grille{display:grid;gap:14px;margin:6px 0 4px}
.ch-carte{background:#fff;border:1px solid var(--line);border-radius:20px;
 padding:22px 24px;box-shadow:0 16px 34px -30px rgba(43,39,64,.6)}
.gsec:nth-of-type(even) .ch-carte{background:#faf8fc}
.ch-carte h3{font-family:var(--disp);font-size:17.5px;font-weight:800;
 margin:0 0 11px;color:var(--ink);line-height:1.3}
.ch-verdicts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}
.ch-v{display:inline-flex;align-items:center;gap:7px;border-radius:999px;
 padding:6px 13px;font-size:12.5px;font-weight:600;white-space:nowrap}
.ch-v b{font-weight:800}
.ch-v .ch-p{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ch-oui{background:#e6f4ec;color:#1f6444}.ch-oui .ch-p{background:var(--oui)}
.ch-non{background:#fdecea;color:#9d3527}.ch-non .ch-p{background:var(--non)}
.ch-cit{margin:0;padding:13px 16px;background:var(--cream-s);
 border-left:3px solid var(--cream);border-radius:0 12px 12px 0;
 font-size:15px;line-height:1.62;color:#4a4360;font-style:normal}
.ch-cit::before{content:"\00ab\00a0"}.ch-cit::after{content:"\00a0\00bb"}
.ch-pied{margin:11px 0 0;font-size:12.5px;color:var(--ink2)}
.ch-pied a{color:var(--pink-d);font-weight:600}
@media(max-width:560px){.ch-carte{padding:16px 16px;border-radius:15px}}

/* La FAQ, en cartes, pleine colonne. */
.gfaq{padding:46px 0;background:#fff;border-block:1px solid var(--line)}
.gfaq h2{font-family:var(--disp);font-size:clamp(24px,3.2vw,34px);font-weight:800;
 letter-spacing:-.02em;margin:0 0 18px;color:var(--ink);border:0;padding:0}
.gfaq details{background:#faf8fc;border:1px solid var(--line);border-radius:16px;
 margin-bottom:9px;overflow:hidden}
.gfaq summary{cursor:pointer;padding:16px 20px;font-family:var(--disp);font-weight:600;
 font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:14px;
 color:var(--ink)}
.gfaq summary::-webkit-details-marker{display:none}
.gfaq summary::after{content:"+";color:var(--pink-d);font-weight:800;font-size:20px;
 line-height:1}
.gfaq details[open] summary::after{content:"\2212"}
.gfaq details[open] summary{border-bottom:1px solid var(--line)}
.gfaq p{padding:14px 20px 17px;margin:0;color:#403a52;font-size:15px;line-height:1.7}

/* L'avertissement de fin. */
.gdisc{padding:30px 0 6px}
.gdisc .disc{font-size:12.5px;line-height:1.7;color:var(--ink2);background:#fff;
 border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:0}

/* ====================== BANDE D'OFFRE ======================
   Reprise de la section « plans » de l'accueil : même dégradé, même grille de
   chiffres, mêmes boutons. C'est la seule chose qu'on vend sur ces pages. */
/* Le pied de page garde ailleurs une marge de 50 px, qui a un sens apres une
   colonne de texte. Ici la bande d'offre fournit deja la respiration : la
   marge ajoutait une bande vide de la hauteur d'un paragraphe entre le bouton
   d'achat et le pied de page. C'est le meme defaut que la section sombre de
   l'accueil, corrige le 1er aout. */
body.page-guide footer{margin-top:0}
.gplans{padding:70px 0 64px;
 background:linear-gradient(145deg,#fff 0%,#f8f3f8 52%,#edf6fd 100%);
 border-top:1px solid var(--line)}
.gplans .offre{margin:0;padding:0;border:0;background:none;text-align:center;
 max-width:none}
.gplans .offre h2{font-family:var(--disp);font-size:clamp(28px,4vw,44px);font-weight:800;
 letter-spacing:-.025em;line-height:1.12;margin:0 auto 22px;max-width:18ch;
 text-wrap:balance;color:var(--ink)}
.gplans .cc-carte{margin:0 auto 24px;max-width:620px}
.gplans .offre-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
 max-width:620px;margin:0 auto 22px}
.gplans .offre-chiffres div{background:#fff;border:1px solid var(--line);
 border-radius:18px;padding:18px 14px;min-width:0;
 box-shadow:0 14px 30px -26px rgba(43,39,64,.6)}
.gplans .offre-chiffres b{display:block;font-family:var(--disp);font-size:26px;
 font-weight:800;color:var(--ink);line-height:1.15}
.gplans .offre-chiffres span{display:block;margin-top:4px;color:var(--ink2);
 font-size:12.5px;line-height:1.35}
.gplans .offre p{max-width:60ch;margin:0 auto 14px;color:#5b566f;font-size:15.5px;
 line-height:1.7}
.gplans .offre-prix{color:var(--ink)!important;font-size:15.5px}
.gplans .offre-prix b{font-family:var(--disp);font-size:19px}
.gplans .offre-cta{display:flex;justify-content:center;align-items:center;
 flex-wrap:wrap;gap:16px;margin-top:10px}
.gplans .offre .unlock{font-family:var(--disp);display:inline-flex;padding:14px 26px;
 border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;
 font-weight:700;font-size:15px;transition:.15s}
.gplans .offre .unlock:hover{background:var(--pink-d)}
.gplans .offre-second{color:var(--pink-d);font-weight:700;text-underline-offset:3px;
 font-size:14.5px}
@media(max-width:700px){
 .gplans{padding:46px 0 52px}
 .gplans .offre-chiffres{grid-template-columns:1fr;gap:9px}
 .gplans .offre-chiffres div{display:flex;align-items:baseline;gap:10px;
  text-align:left;padding:14px 16px}
 .gplans .offre-chiffres b{font-size:22px}
 .gplans .offre-chiffres span{margin-top:0}
}