@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@300;400;600;700&display=swap');

/* ═══════════════════════════════════════
   Sitesfrancaistop.com — Charte Visuelle
   Thème : Abysses Océan · Corail · Cyan
   Typo : Cormorant Garamond (titres) + Source Sans 3 (corps)
   ═══════════════════════════════════════ */

:root {
  /* Fonds */
  --abyss:       #03080F;
  --ocean:       #071628;
  --deep:        #0C2240;
  --reef:        #132E50;
  --mist:        rgba(7,22,40,.86);

  /* Bordures */
  --edge-dim:    rgba(8,145,178,.11);
  --edge-mid:    rgba(8,145,178,.25);

  /* Textes */
  --wave:        #B8D0DE;
  --foam:        #3A5870;
  --pearl:       #EAF4F8;

  /* Cyan — accent principal */
  --cyan:        #0891B2;
  --cyan2:       #22D3EE;
  --cyan-bg:     rgba(8,145,178,.10);

  /* Corail — accent secondaire */
  --coral:       #E05A2B;
  --coral2:      #FF8C5A;
  --coral-bg:    rgba(224,90,43,.10);

  /* Ambre marin — accent tertiaire */
  --tawny:       #B45309;
  --tawny-bg:    rgba(180,83,9,.10);

  /* Effets */
  --glow-cyan:   0 0 22px rgba(8,145,178,.36), 0 0 55px rgba(8,145,178,.12);
  --glow-coral:  0 0 20px rgba(224,90,43,.28);
  --shade:       0 22px 60px rgba(0,0,0,.68), 0 4px 16px rgba(0,0,0,.28);

  /* Mise en page */
  --page-w:      1170px;
  --gap:         clamp(14px,2.3vw,28px);
  --rx-xs:       3px;
  --rx-sm:       8px;
  --rx-md:       13px;
  --rx-lg:       20px;
  --rx-xl:       30px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  background: var(--abyss);
  color: var(--wave);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Fond ambient océanique */
body::before {
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 680px 480px at -12% 28%, rgba(8,145,178,.08), transparent 62%),
    radial-gradient(ellipse 560px 360px at 112% 8%, rgba(224,90,43,.06), transparent 58%),
    radial-gradient(ellipse 800px 580px at 48% 112%, rgba(8,145,178,.07), transparent 62%),
    var(--ocean);
}

img { max-width:100%; height:auto; display:block; }
a  { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--abyss); }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--cyan),var(--coral)); border-radius:3px; }

/* ── Conteneur ── */
.wrap { width:min(var(--page-w), 94vw); margin-inline:auto; }

/* ══════════════════════════════════════
   VÉRIFICATION D'ÂGE
══════════════════════════════════════ */
#age-check {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.95);
  backdrop-filter:blur(22px);
  display:none; place-items:center; padding:20px;
}
#age-check[data-show="1"] { display:grid; }

.check-card {
  width:min(530px,96vw); padding:44px;
  background:var(--deep);
  border:1px solid var(--edge-mid);
  border-top:3px solid var(--cyan);
  border-radius:var(--rx-xl);
  box-shadow: var(--glow-cyan), 0 44px 110px rgba(0,0,0,.92);
  position:relative; overflow:hidden;
}
.check-card::after {
  content:''; position:absolute; top:-55px; right:-55px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(var(--cyan),transparent 70%);
  opacity:.07; pointer-events:none;
}
.check-top {
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.age-marker {
  background:var(--cyan); color:#fff;
  font-family:'Cormorant Garamond',serif; font-size:13px; font-weight:600;
  letter-spacing:.07em; padding:5px 15px; border-radius:var(--rx-xs);
  box-shadow:var(--glow-cyan);
}
.check-top span { font-size:13px; color:var(--foam); }
.check-card h2 {
  font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:700;
  color:var(--pearl); margin-bottom:14px; line-height:1.22;
}
.check-card p { font-size:14.5px; color:var(--wave); line-height:1.86; margin-bottom:28px; }
.check-actions { display:flex; gap:13px; flex-wrap:wrap; }
.check-actions .btn { flex:1; min-width:130px; justify-content:center; }

/* ══════════════════════════════════════
   BARRE DE NAVIGATION
══════════════════════════════════════ */
#nav-strip {
  position:sticky; top:0; z-index:400;
  background:rgba(3,8,15,.93);
  backdrop-filter:blur(24px) saturate(160%);
  border-bottom:1px solid var(--edge-dim);
}
#nav-strip::before {
  content:''; display:block; height:2px;
  background:linear-gradient(90deg,
    transparent 0%, var(--cyan) 22%,
    var(--coral2) 58%, var(--cyan) 82%, transparent 100%);
  box-shadow:var(--glow-cyan);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:68px; gap:20px;
}

/* Identité de marque */
.brand-anchor {
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.brand-icon {
  width:44px; height:44px; border-radius:9px;
  overflow:hidden; border:1px solid var(--edge-mid);
  box-shadow:var(--glow-cyan); flex-shrink:0;
}
.brand-icon img { width:100%; height:100%; object-fit:cover; }
.brand-copy { line-height:1.1; }
.brand-title {
  font-family:'Cormorant Garamond',serif;
  font-size:19px; font-weight:700; letter-spacing:.03em;
  color:var(--pearl);
}
.brand-title .hi { color:var(--cyan2); }
.brand-sub {
  font-size:10px; color:var(--foam);
  text-transform:uppercase; letter-spacing:.14em; margin-top:2px;
}

/* Liens de navigation desktop */
.desk-nav { display:flex; align-items:center; gap:2px; }
.desk-nav a {
  font-size:13px; font-weight:600; color:var(--foam);
  padding:7px 14px; border-radius:var(--rx-sm);
  letter-spacing:.02em;
  transition:color .15s, background .15s;
}
.desk-nav a:hover {
  color:var(--pearl);
  background:rgba(8,145,178,.09);
}
.desk-nav a.active { color:var(--cyan2); }

/* Menu mobile */
.burger {
  display:none; width:40px; height:40px;
  border:1px solid var(--edge-mid); background:rgba(8,145,178,.07);
  color:var(--pearl); border-radius:var(--rx-sm);
  align-items:center; justify-content:center; font-size:18px;
  transition:box-shadow .15s;
}
.burger:hover { box-shadow:var(--glow-cyan); }
.slide-nav { border-top:1px solid var(--edge-dim); display:none; }
.slide-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; padding:12px 0 16px;
}
.slide-grid a {
  font-size:12.5px; font-weight:600; color:var(--foam);
  padding:10px; text-align:center;
  border:1px solid var(--edge-dim); border-radius:var(--rx-sm);
  background:rgba(255,255,255,.02);
  transition:color .15s, border-color .15s;
}
.slide-grid a:hover { color:var(--pearl); border-color:var(--edge-mid); }

/* ══════════════════════════════════════
   BOUTONS
══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:var(--rx-sm);
  font-weight:700; font-size:14px; letter-spacing:.03em;
  border:1px solid transparent;
  transition:transform .15s, box-shadow .2s;
}
.btn:hover { transform:translateY(-2px); }
.btn-cyan   { background:var(--cyan);  color:#fff; border-color:rgba(8,145,178,.5); }
.btn-cyan:hover  { box-shadow:var(--glow-cyan); }
.btn-coral  { background:var(--coral); color:#fff; border-color:rgba(224,90,43,.45); }
.btn-coral:hover { box-shadow:var(--glow-coral); }
.btn-ghost  { background:rgba(255,255,255,.05); color:var(--pearl); border-color:var(--edge-mid); }
.btn-ghost:hover { box-shadow:var(--glow-cyan); }
.btn-flat   { background:transparent; color:var(--cyan2); border-color:var(--edge-mid); }
.btn-xs  { padding:7px 13px; font-size:12px; }
.btn-sm  { padding:9px 16px; font-size:12.5px; }
.btn-lg  { padding:16px 30px; font-size:16px; }

/* ══════════════════════════════════════
   ÉTIQUETTES
══════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; padding:4px 10px;
  border-radius:999px; letter-spacing:.04em; text-transform:uppercase;
}
.badge-cyan   { background:var(--cyan-bg);  color:var(--cyan2);  border:1px solid rgba(8,145,178,.24); }
.badge-coral  { background:var(--coral-bg); color:var(--coral2); border:1px solid rgba(224,90,43,.24); }
.badge-tawny  { background:var(--tawny-bg); color:#FDBA74;       border:1px solid rgba(180,83,9,.24); }
.badge-plain  { background:rgba(255,255,255,.04); color:var(--foam); border:1px solid var(--edge-dim); }

/* ══════════════════════════════════════
   SECTION HERO
══════════════════════════════════════ */
#front {
  padding:clamp(66px,9vw,122px) 0 clamp(40px,5.5vw,72px);
}
.front-layout {
  display:grid; grid-template-columns:1fr 365px;
  gap:var(--gap); align-items:start;
}

.signal-row {
  display:flex; align-items:center; gap:11px; margin-bottom:28px;
}
.signal-dot {
  width:11px; height:11px; border-radius:50%;
  background:var(--cyan); box-shadow:var(--glow-cyan);
  animation:pulse-dot 2.5s infinite;
}
@keyframes pulse-dot {
  0%,100% { transform:scale(1); opacity:1; }
  50%      { transform:scale(1.75); opacity:.50; }
}
.signal-text {
  font-size:11px; text-transform:uppercase; letter-spacing:.22em;
  color:var(--cyan2); font-weight:700;
}

.main-h1 {
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(34px,5.7vw,71px);
  font-weight:700; line-height:1.04;
  letter-spacing:.01em; color:var(--pearl);
  margin-bottom:26px;
}
.main-h1 em { font-style:italic; color:var(--cyan2); }
.main-h1 .flow {
  background:linear-gradient(90deg,var(--cyan2),var(--coral2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.intro-p { font-size:15.5px; color:var(--wave); line-height:1.86; margin-bottom:18px; }
.intro-sub { font-size:14.5px; color:var(--wave); line-height:1.86; margin-bottom:30px; opacity:.88; }

.btn-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px; }

/* Bandeau jeu responsable */
.caution-bar {
  padding:16px 20px; border-radius:var(--rx-sm);
  border-left:4px solid var(--cyan);
  background:var(--cyan-bg);
  font-size:13.5px; line-height:1.84; color:var(--wave);
}
.caution-bar a { color:var(--cyan2); text-decoration:underline; }

/* Encart latéral */
.side-box {
  background:var(--reef);
  border:1px solid var(--edge-mid);
  border-top:3px solid var(--cyan);
  border-radius:var(--rx-lg);
  box-shadow: var(--glow-cyan), var(--shade);
  overflow:hidden;
}
.sb-top {
  padding:22px 24px 18px;
  border-bottom:1px solid var(--edge-dim);
}
.sb-top h3 {
  font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:700;
  color:var(--pearl); margin-top:10px;
}
.sb-body { padding:20px 24px 24px; }

.tick-list { list-style:none; display:flex; flex-direction:column; gap:14px; }
.tick-list li { display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.76; }
.tick-mark {
  width:22px; height:22px; min-width:22px; border-radius:50%;
  background:var(--cyan-bg); border:1px solid var(--edge-mid);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--cyan2); margin-top:1px;
}

.contact-zone {
  margin-top:22px; padding-top:18px;
  border-top:1px solid var(--edge-dim);
  font-size:13px;
}
.contact-zone .label { font-size:10px; text-transform:uppercase; letter-spacing:.13em; color:var(--foam); margin-bottom:5px; }
.contact-zone a { color:var(--cyan2); }
.contact-zone .site-ref { margin-top:4px; font-size:11px; color:var(--foam); }

/* Indicateurs chiffrés */
.meters {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--edge-dim);
  border:1px solid var(--edge-dim); border-radius:var(--rx-md);
  overflow:hidden; margin-top:42px;
}
.meter-cell {
  padding:22px 16px; text-align:center;
  background:var(--deep);
}
.meter-val {
  font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:700;
  color:var(--cyan2); line-height:1;
}
.meter-val.alt-val { color:var(--coral2); }
.meter-lbl { font-size:11px; color:var(--foam); margin-top:5px; letter-spacing:.04em; text-transform:uppercase; }

/* ══════════════════════════════════════
   SÉPARATEUR
══════════════════════════════════════ */
.divider { height:1px; background:var(--edge-dim); margin:0; }

/* ══════════════════════════════════════
   SECTIONS GÉNÉRALES
══════════════════════════════════════ */
.sec { padding:clamp(50px,7.5vw,96px) 0; }

.sec-top {
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:16px; margin-bottom:42px;
}
.sec-label-wrap {
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.sec-rule { width:28px; height:2px; background:var(--cyan); }
.sec-caption { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--cyan2); }
.sec-h2 {
  font-family:'Cormorant Garamond',serif; font-size:clamp(25px,4vw,44px);
  font-weight:700; color:var(--pearl); margin-bottom:10px;
}
.sec-blurb { font-size:14.5px; color:var(--wave); max-width:640px; line-height:1.78; }

/* ══════════════════════════════════════
   TABLEAU DES PLATEFORMES
══════════════════════════════════════ */
.platform-table { display:flex; flex-direction:column; gap:16px; }

.platform-entry {
  display:flex; align-items:center; gap:20px;
  background:var(--reef);
  border:1px solid var(--edge-dim);
  border-radius:var(--rx-lg);
  padding:20px 24px;
  position:relative; overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.platform-entry:hover { border-color:var(--edge-mid); box-shadow:var(--glow-cyan); }

.entry-rank {
  position:absolute; top:12px; left:16px;
  font-family:'Cormorant Garamond',serif; font-size:54px; font-weight:700;
  color:rgba(8,145,178,.07); line-height:1;
  pointer-events:none; user-select:none;
}
.entry-logo {
  width:84px; height:68px; min-width:84px;
  background:var(--deep); border-radius:var(--rx-sm);
  border:1px solid var(--edge-dim); overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:0px;
}
.entry-logo img { max-height:55px; object-fit:contain; }
.entry-meta { flex:1; min-width:0; }
.entry-name { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:700; color:var(--pearl); margin-bottom:3px; }
.entry-desc { font-size:13px; color:var(--foam); margin-bottom:9px; }
.entry-info { font-size:13px; color:var(--wave); line-height:1.74; }
.entry-btns {
  display:flex; flex-direction:column; gap:9px; align-items:flex-end; flex-shrink:0;
}

.remark-note {
  font-size:12.5px; color:var(--foam); line-height:1.78;
  padding:14px 18px; border-radius:var(--rx-sm);
  background:var(--deep); border:1px solid var(--edge-dim);
  margin-top:18px;
}
.remark-note a { color:var(--cyan2); }

/* ══════════════════════════════════════
   GRILLE D'ARTICLES
══════════════════════════════════════ */
.article-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(278px,1fr));
  gap:20px;
}
.article-tile {
  background:var(--reef);
  border:1px solid var(--edge-dim);
  border-radius:var(--rx-md);
  padding:28px 24px;
  transition:border-color .2s, transform .2s;
}
.article-tile:hover { border-color:var(--edge-mid); transform:translateY(-3px); }
.tile-picto {
  font-size:26px; margin-bottom:16px;
  width:50px; height:50px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--rx-sm);
}
.picto-cyan   { background:var(--cyan-bg); }
.picto-coral  { background:var(--coral-bg); }
.picto-tawny  { background:var(--tawny-bg); }
.picto-plain  { background:rgba(255,255,255,.04); }
.article-tile h3 {
  font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:700;
  color:var(--pearl); margin-bottom:12px;
}
.article-tile p { font-size:14px; color:var(--wave); line-height:1.80; }
.article-tile p a { color:var(--cyan2); text-decoration:underline; }

/* ══════════════════════════════════════
   ACCORDÉON FAQ
══════════════════════════════════════ */
.faq-deck { display:flex; flex-direction:column; gap:10px; max-width:820px; }
.faq-row {
  background:var(--reef);
  border:1px solid var(--edge-dim); border-radius:var(--rx-md);
  overflow:hidden; transition:border-color .2s;
}
.faq-row[data-active="1"] { border-color:var(--edge-mid); }
.faq-btn {
  width:100%; display:flex; justify-content:space-between;
  align-items:center; gap:16px; padding:18px 22px;
  background:none; border:none; color:var(--pearl);
  font-family:'Source Sans 3',sans-serif; font-size:15px; font-weight:600;
  text-align:left; cursor:pointer; transition:color .15s;
}
.faq-btn:hover { color:var(--cyan2); }
.faq-caret {
  width:26px; height:26px; min-width:26px; border-radius:50%;
  background:var(--cyan-bg); border:1px solid var(--edge-mid);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--cyan2); transition:transform .2s;
}
.faq-row[data-active="1"] .faq-caret { transform:rotate(45deg); }
.faq-panel {
  display:none;
  padding:0 22px 20px; font-size:14px; color:var(--wave); line-height:1.82;
}
.faq-row[data-active="1"] .faq-panel { display:block; }
.faq-panel a { color:var(--cyan2); text-decoration:underline; }

/* ══════════════════════════════════════
   PIED DE PAGE
══════════════════════════════════════ */
#bottom-bar {
  background:var(--deep);
  border-top:1px solid var(--edge-dim);
  padding:48px 0 30px;
}
.bottom-layout {
  display:grid; grid-template-columns:1fr auto;
  gap:42px; align-items:start;
}
.bottom-brand { display:flex; align-items:center; gap:11px; margin-bottom:15px; }
.bottom-icon { width:38px; height:38px; border-radius:8px; overflow:hidden; }
.bottom-copy {
  font-size:13.5px; color:var(--foam); line-height:1.80; max-width:480px;
  margin-bottom:15px;
}
.bottom-copy a { color:var(--cyan2); }
.bottom-year { font-size:11.5px; color:var(--foam); }
.bottom-alert {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:var(--rx-sm);
  background:var(--coral-bg); color:var(--coral2);
  border:1px solid rgba(224,90,43,.22);
  font-size:12px; font-weight:700; margin-bottom:16px;
}
.bottom-links {
  display:flex; flex-direction:column; gap:8px;
}
.bottom-links a { font-size:13px; color:var(--foam); transition:color .15s; }
.bottom-links a:hover { color:var(--cyan2); }

/* ══════════════════════════════════════
   PAGES DOCS
══════════════════════════════════════ */
.doc-wrap { padding:clamp(30px,5.5vw,66px) 0; }
.doc-body {
  max-width:760px;
  background:var(--reef); border:1px solid var(--edge-dim);
  border-radius:var(--rx-lg); padding:42px 46px;
}
.doc-body h1 {
  font-family:'Cormorant Garamond',serif; font-size:clamp(26px,4vw,40px);
  font-weight:700; color:var(--pearl); margin-bottom:10px;
}
.doc-body h2 {
  font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:700;
  color:var(--pearl); margin:28px 0 10px;
}
.doc-body p,
.doc-body li { font-size:14px; color:var(--wave); line-height:1.84; margin-bottom:10px; }
.doc-body ul { padding-left:20px; margin-bottom:10px; }
.doc-body a { color:var(--cyan2); text-decoration:underline; }
.doc-body .meta { font-size:12px; color:var(--foam); margin-bottom:28px; }

/* ══════════════════════════════════════
   FICHE OPÉRATEUR
══════════════════════════════════════ */
.op-header {
  display:flex; align-items:flex-start; gap:22px; flex-wrap:wrap;
  margin-bottom:28px;
  background:var(--reef); border:1px solid var(--edge-mid);
  border-radius:var(--rx-lg); padding:28px 30px;
}
.op-logo-box {
  width:88px; height:66px; min-width:88px;
  background:var(--deep); border-radius:var(--rx-sm);
  border:1px solid var(--edge-dim); overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:10px;
}
.op-logo-box img { max-height:46px; object-fit:contain; }
.op-info { flex:1; min-width:0; }
.op-info h1 {
  font-family:'Cormorant Garamond',serif; font-size:29px; font-weight:700;
  color:var(--pearl); margin:10px 0 4px;
}
.op-tagline { font-size:14px; color:var(--foam); margin-bottom:14px; }
.rating-row { display:flex; align-items:center; gap:10px; }
.stars-str { font-size:19px; color:var(--cyan2); letter-spacing:2px; }
.score-big { font-family:'Cormorant Garamond',serif; font-size:23px; color:var(--pearl); }
.score-label { font-size:13px; color:var(--foam); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:900px) {
  .front-layout { grid-template-columns:1fr; }
  .desk-nav { display:none; }
  .burger { display:flex; }
  .meters { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .platform-entry { flex-wrap:wrap; }
  .entry-btns { flex-direction:row; }
  .bottom-layout { grid-template-columns:1fr; }
  .doc-body { padding:28px 22px; }
}