/* Pages de contenu (SEO) de jointheclub.fr — 21/10/2026.
   Même direction artistique que le site (club.css + site.css), sans scène 3D :
   ces pages doivent s'afficher vite et se lire facilement. Contrastes ≥ 4,5:1. */

body[data-page="seo"] { background:#f9fbff; }
body[data-page="seo"] #site-main { padding-top:100px; }

.crumbs { padding-top:34px; font-size:13px; color:#5f6b7d; }
.crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.crumbs li + li::before { content:"/"; margin-right:6px; color:#9aa6b8; }
.crumbs a { color:#4f6480; }
.crumbs a:hover { color:var(--ink); }
.crumbs [aria-current] { color:#3d4756; }

.page-hero { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:56px; align-items:center;
  padding-top:34px; padding-bottom:72px; }
.page-hero .eyebrow { color:#4f6480; }
.page-hero h1 { margin:0; font-size:clamp(34px,4.4vw,54px); line-height:1.08; letter-spacing:-.03em; font-weight:600; color:var(--ink); }
.page-hero .lead-text { margin:26px 0 0; font-size:18.5px; line-height:1.65; color:#4b5158; max-width:640px; }
.page-hero__actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:36px; }
.page-hero__visual { display:flex; justify-content:center; }
.page-hero__visual img { width:100%; max-width:420px; height:auto; filter:drop-shadow(0 26px 40px rgba(19,20,23,.16)); }

.page-body { background:#fff; border-top:1px solid var(--hair); }
.page-body > .wrap { display:grid; grid-template-columns:minmax(0,760px) minmax(0,1fr); gap:64px; padding-top:72px; padding-bottom:80px; }
.article h2 { margin:56px 0 18px; font-size:clamp(25px,2.4vw,31px); line-height:1.2; letter-spacing:-.02em; font-weight:600; color:var(--ink); }
.article h2:first-child { margin-top:0; }
.article h3 { margin:32px 0 10px; font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.article p, .article li { font-size:17px; line-height:1.75; color:#4b5158; }
.article p { margin:0 0 18px; }
.article strong { color:var(--ink); font-weight:600; }
.article a { color:#3e5675; border-bottom:1px solid #c6d0dc; }
.article a:hover { color:var(--ink); border-color:var(--ink); }
.article ul, .article ol { margin:0 0 22px; padding-left:22px; }
.article li { margin-bottom:8px; }
.article ul li::marker { color:var(--accent); }
.article ol li::marker { color:var(--accent); font-weight:600; }

.steps { list-style:none; padding:0 !important; margin:8px 0 28px !important; display:grid; gap:14px; counter-reset:step; }
.steps li { counter-increment:step; position:relative; margin:0; padding:20px 22px 20px 70px; background:#f9fbff; border:1px solid var(--card-border); border-radius:14px; }
.steps li::before { content:counter(step, decimal-leading-zero); position:absolute; left:22px; top:20px; font-family:var(--display); font-weight:700; font-size:16px; color:var(--accent); }
.steps li strong { display:block; margin-bottom:4px; font-size:17px; }

.compare { width:100%; border-collapse:collapse; margin:6px 0 28px; font-size:15.5px; }
.compare th, .compare td { text-align:left; vertical-align:top; padding:13px 14px; border-bottom:1px solid var(--hair); color:#4b5158; line-height:1.6; }
.compare th { font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#5f6b7d; background:#f7f8f9; }
.compare td:first-child { color:var(--ink); font-weight:600; }
.table-scroll { overflow-x:auto; }

.note { margin:6px 0 26px; padding:18px 22px; background:#f4f7fb; border-left:3px solid var(--accent); border-radius:10px; }
.note p { margin:0; font-size:15.5px; }

.figures { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:8px 0 14px; }
.figures div { padding:18px; background:#f9fbff; border:1px solid var(--card-border); border-radius:14px; }
.figures b { display:block; font-family:var(--display); font-size:24px; letter-spacing:-.02em; color:var(--ink); }
.figures span { display:block; margin-top:4px; font-size:13px; line-height:1.45; color:#5f6b7d; }
.source { font-size:13px !important; color:#5f6b7d !important; }

.aside { position:relative; }
.aside__box { position:sticky; top:124px; padding:28px 26px; background:#f9fbff; border:1px solid var(--card-border); border-radius:18px; }
.aside__box h2 { margin:0 0 10px; font-size:19px; font-weight:600; letter-spacing:-.01em; }
.aside__box p { margin:0 0 20px; font-size:15px; line-height:1.65; color:#4b5158; }
.aside__box ul { list-style:none; margin:22px 0 0; padding:20px 0 0; border-top:1px solid var(--hair); }
.aside__box li { margin:0 0 10px; font-size:14.5px; }
.aside__box li a { color:#3e5675; }
.aside__box li a:hover { color:var(--ink); }

.page-faq { background:#f9fbff; border-top:1px solid var(--hair); }
.page-faq > .wrap { padding-top:72px; padding-bottom:72px; }
.page-faq .support-faq { margin-top:28px; }
.page-faq .support-faq details p { color:#4b5158; }

.page-cta { background:#131417; color:#fff; }
.page-cta > .wrap { padding-top:80px; padding-bottom:80px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:32px; }
.page-cta h2 { margin:0; max-width:640px; font-size:clamp(26px,3vw,36px); line-height:1.2; letter-spacing:-.02em; font-weight:600; color:#fff; }
.page-cta p { margin:14px 0 0; max-width:620px; font-size:16.5px; line-height:1.65; color:#c9d1dc; }
.page-cta .btn { background:#fff; color:var(--ink); }
.page-cta .btn:hover { background:#c6d0dc; color:var(--ink); }

.related { border-top:1px solid var(--hair); }
.related > .wrap { padding-top:64px; padding-bottom:80px; }
.related h2 { margin:0 0 26px; font-size:24px; font-weight:600; letter-spacing:-.02em; }
.related__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.related__grid a { display:block; padding:24px; background:#fff; border:1px solid var(--card-border); border-radius:16px; transition:border-color .15s ease, transform .15s ease; }
.related__grid a:hover { border-color:#9fb0c3; transform:translateY(-2px); color:var(--ink); }
.related__grid b { display:block; font-size:17px; font-weight:600; color:var(--ink); }
.related__grid span { display:block; margin-top:8px; font-size:14.5px; line-height:1.6; color:#4b5158; }

.footer__links a { color:#5f6b7d; }

@media (max-width:1000px) {
  .page-body > .wrap { grid-template-columns:minmax(0,1fr); gap:40px; }
  .aside__box { position:static; }
  .related__grid { grid-template-columns:1fr 1fr; }
  .figures { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px) {
  body[data-page="seo"] .header .nav { gap:12px; }
  body[data-page="seo"] .header .nav .btn { display:none !important; }
  body[data-page="seo"] #site-main { padding-top:118px; }
  .page-hero { grid-template-columns:1fr; gap:24px; padding-bottom:48px; }
  .page-hero__visual { order:-1; justify-content:flex-start; }
  .page-hero__visual img { max-width:200px; }
  .page-hero .lead-text { font-size:16.5px; }
  .page-body > .wrap { padding-top:48px; padding-bottom:56px; }
  .article p, .article li { font-size:16px; }
  .related__grid { grid-template-columns:1fr; }
  .page-cta > .wrap { padding-top:56px; padding-bottom:56px; }
}
@media print { .aside, .page-cta, .related { display:none; } }

/* Pied de page lisible sur les pages de contenu (contraste ≥ 4,5:1). */
body[data-page="seo"] .footer__mark { color:#5f6b7d; }

/* Logo Club animé (22/10/2026) : il flotte en 3D (7 s) et un reflet chromé balaie les lettres (toutes les 6 s).
   CSS seul ; le reflet est masqué par la forme du logo (image à fond transparent). Coupé si le visiteur réduit les animations. */
.page-hero__visual { perspective:900px; }
.logo-club { position:relative; display:inline-block; width:100%; max-width:420px; line-height:0; transform-style:preserve-3d;
  animation:club-flotte 7s ease-in-out infinite; will-change:transform; }
.page-hero__visual .logo-club img { display:block; width:100%; max-width:none; animation:club-ombre 7s ease-in-out infinite; }
.logo-club::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 44%, rgba(255,255,255,0) 46%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 54%, transparent 56%);
  background-size:250% 100%; background-repeat:no-repeat;
  -webkit-mask-image:url(/assets/club-3d-hero-420.webp); mask-image:url(/assets/club-3d-hero-420.webp);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  animation:club-reflet 6s linear infinite; }
@keyframes club-flotte {
  0%, 100% { transform:translateY(0) rotateY(-7deg) rotateX(2deg); }
  50%      { transform:translateY(-12px) rotateY(7deg) rotateX(-2deg); }
}
@keyframes club-ombre {
  0%, 100% { filter:drop-shadow(0 26px 40px rgba(19,20,23,.18)); }
  50%      { filter:drop-shadow(0 40px 46px rgba(19,20,23,.10)); }
}
@keyframes club-reflet { 0%, 50% { background-position:100% 0; } 75%, 100% { background-position:0% 0; } }
@media (max-width:700px) { .page-hero__visual .logo-club { max-width:200px; } }
@media (prefers-reduced-motion:reduce) { .logo-club, .logo-club img, .logo-club::after { animation:none; } .logo-club::after { display:none; } }
@media print { .logo-club, .logo-club img { animation:none; } .logo-club::after { display:none; } }