/* En-tête mince commun et pages de contenu (VIP, FAQ). */
.site-header{background:#153855;padding:7px 16px;text-align:center;font:14px/1.4 system-ui,sans-serif}
.site-header nav{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 10px}
.site-header a{color:#fff;text-decoration:none;font-weight:600;padding:4px 6px;border-radius:6px}
.site-header a:hover{color:#bfe6f7;text-decoration:underline;text-underline-offset:3px}
.site-header a:focus-visible{outline:2px solid #6cc8ea;outline-offset:1px}
.site-header a[aria-current="page"]{color:#6cc8ea}
.site-header .sep{color:#6f8aa0}

.page{max-width:820px;margin:0 auto;padding:28px 16px 48px;text-align:left}
.back-link{display:inline-flex;align-items:center;gap:4px;margin:-12px 0 4px -4px;padding:6px 8px 6px 4px;border-radius:8px;color:#139cca;font-weight:600;font-size:15px;text-decoration:none}
.back-link:hover{background:#e6f5ff;text-decoration:underline;text-underline-offset:3px}
.back-link:focus-visible{outline:2px solid #139cca;outline-offset:2px}
.page-hero{text-align:center;padding:4px 0 8px}
.page-hero img{display:block;width:120px;height:120px;object-fit:contain;margin:0 auto 6px}
.page h1{font-size:clamp(28px,5vw,42px);margin:6px 0 10px;text-align:center}
.page h1 span{color:#139cca}
.page .lead{text-align:center;max-width:600px;margin:0 auto 26px}
.page h2{font-size:24px;margin:34px 0 14px}

.perks{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.perk{background:#fff;border:1px solid #e1edf5;border-radius:16px;padding:20px}
.perk h3{margin:0 0 6px;font-size:17px}
.perk p{margin:0;font-size:15px}
.perk .icon{font-size:26px;line-height:1;display:block;margin-bottom:8px}

.compare{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e1edf5;border-radius:16px;overflow:hidden;font-size:15px}
.compare th,.compare td{padding:12px 14px;border-bottom:1px solid #e1edf5;text-align:center}
.compare th:first-child,.compare td:first-child{text-align:left}
.compare thead th{background:#f2faff}
.compare tbody tr:last-child td{border-bottom:0}
.compare .vip-col{color:#139cca;font-weight:700}

.cta-box{margin-top:34px;text-align:center;background:linear-gradient(180deg,#e6f5ff,#fff);border:1px solid #e1edf5;border-radius:16px;padding:26px 18px}
.cta-box h2{margin:0 0 8px}
.cta-box p{margin:0 auto 18px;max-width:480px}
.cta-box .btn{display:inline-block;text-decoration:none;font-size:16px}
.fine-print{font-size:13px;text-align:center;margin-top:18px}

.faq{display:grid;gap:10px}
.faq details{background:#fff;border:1px solid #e1edf5;border-radius:14px}
.faq summary{cursor:pointer;list-style:none;padding:16px 48px 16px 18px;font-weight:700;position:relative;border-radius:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:#139cca;transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:focus-visible{outline:2px solid #139cca;outline-offset:2px}
.faq details>div{padding:0 18px 16px}
.faq details>div p{margin:0 0 10px}
.faq details>div p:last-child{margin:0}

@media(max-width:650px){.perks{grid-template-columns:1fr}.compare{font-size:14px}.compare th,.compare td{padding:10px 8px}}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* Base des pages autonomes (reprend le style de index.html). */
body.content-page{margin:0;background:#f6fbff;color:#153855;font:16px system-ui,sans-serif}
.content-page p,.content-page td{color:#637c8e;line-height:1.6}
.content-page .btn{background:#f05b45;color:#fff;border:0;border-radius:12px;padding:14px 22px;font-weight:800;cursor:pointer}
.content-page .btn:hover{background:#dc4a35}
.content-page footer{background:#153855;color:#fff;padding:25px;text-align:center}
.content-page footer a{color:#d3e8f7}

/* Pages membres : connexion par lien et compte. */
.page.narrow{max-width:520px}
.page .cta-box form,.page form.cta-box{margin:0}
.account-plan{margin-top:8px}
.account-plan p{margin:0 0 6px}
.plan-badge{display:inline-block;margin:0 0 10px!important;padding:4px 12px;border-radius:999px;background:#e9f2f8;color:#153855!important;font-weight:700;font-size:14px}
.plan-badge.vip{background:#139cca;color:#fff!important}
.account-logout{text-align:center;margin-top:26px}
.content-page .login-cancel{border:1px solid #c9dce9;background:#fff;border-radius:10px;padding:12px 16px;color:#153855;font:inherit;cursor:pointer}

/* Modal « Connexion » des membres (index.html). */
.member-login-modal .login-intro{margin:0 0 4px}
.member-login-modal .login-success{color:#1d6b3a;background:#eaf7ef;border-radius:10px;padding:12px 14px;font-size:14px;margin:14px 0 0}
.member-login-modal button:disabled{cursor:not-allowed}
.member-login-modal{width:430px}
.member-login-modal .login-actions{justify-content:center}
.member-login-modal .login-intro.login-sent{display:flex;align-items:center;gap:9px;color:#1d6b3a;font-weight:700;font-size:16px}
.member-login-modal .sent-check{flex:0 0 22px}

/* Confirmation d'inscription (index.html). */
.signup-success{margin:9px 0 0;padding:10px 12px;border-radius:10px;background:#eaf7ef;color:#1d6b3a!important;font-size:14px;line-height:1.45;text-align:center}