/* Hosting S33D : charte S33D posée sur style.css et les feuilles de page (chargée après elles).
   Le socle (assets/socle/socle.css) apporte jetons, polices, barre et pied ; les pages gardent leurs classes. */

:root {
  --fond-doux: var(--glace);
  --fond-appui: var(--glace-2);
  --trait: #dbe4f1;
  --trait-fort: #c3d1e6;
  --encre: #0b1630;
  --texte: #3d4f72;
  --texte-doux: #5a6a88;
  --accent: #0d73e6;
  --accent-fonce: #0e5cc4;
  --accent-doux: #eff8ff;
  --degrade: linear-gradient(180deg, #49a0ff, #0d73e6);
  --rayon: 16px;
  --ombre: 0 1px 0 rgba(11, 22, 48, .04), 0 12px 32px -14px rgba(11, 22, 48, .18);
  --ombre-forte: 0 2px 0 rgba(11, 22, 48, .04), 0 24px 60px -20px rgba(11, 22, 48, .28);
  --large: 1240px;
  --haut-entete: var(--barre);
}
body { font-family: var(--corps); background: var(--glace); }
.s3-barre, .s3-barre.est-defilee { background: rgba(5, 10, 20, .97); }
h1, h2, h3 { font-family: var(--titre); letter-spacing: -.02em; }
.large { max-width: var(--largeur); padding-left: var(--goutiere); padding-right: var(--goutiere); }

/* ── Bandeau d'ouverture et compte dans la barre ───────────────── */
.bandeau-test { background: var(--nuit-850); color: var(--ambre-300); border-bottom: 1px solid var(--trait-nuit-doux); font-size: 12.5px; letter-spacing: .04em; }
.bandeau-test strong { color: var(--ambre-400); }
.s3-barre .compte .bouton { min-height: 40px; background: transparent; border: 1px solid var(--trait-nuit); color: var(--texte-nuit-2); box-shadow: none; border-radius: 999px; }
.s3-barre .compte .bouton:hover { background: rgba(47, 139, 255, .16); color: #fff; border-color: rgba(143, 200, 255, .4); }
.s3-barre .menu-compte summary { color: var(--texte-nuit-2); border-radius: 999px; border: 1px solid var(--trait-nuit); padding: 4px 12px 4px 4px; }
.s3-barre .menu-compte summary:hover { color: #fff; border-color: rgba(143, 200, 255, .4); }
.s3-barre .menu-compte .avatar { background: radial-gradient(120% 120% at 30% 20%, #1c4f9c, #071634); color: var(--azur-300); }
.s3-barre .menu-compte .menu { background: rgba(7, 15, 32, .98); border: 1px solid var(--trait-nuit); border-radius: 18px; color: var(--texte-nuit); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); }
.s3-barre .menu-compte .menu a, .s3-barre .menu-compte .menu button { color: var(--texte-nuit) !important; }
.s3-barre .menu-compte .menu a:hover, .s3-barre .menu-compte .menu button:hover { background: rgba(47, 139, 255, .16); }
.s3-barre .menu-compte .qui { color: var(--texte-nuit-3); border-color: var(--trait-nuit); }
.s3-barre .menu-compte .qui strong { color: #fff; }
.s3-barre .compte-sortie { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--trait-nuit); background: transparent; color: var(--texte-nuit-2); }

/* ── Héros produit : nuit et horizon ───────────────────────────── */
.produit {
  position: relative; isolation: isolate; color: var(--texte-nuit); border: 0; padding: clamp(32px, 5vw, 64px) 0 clamp(28px, 4vw, 48px);
  background: radial-gradient(120% 90% at 70% 0%, #0d2147 0%, #060d1c 55%, var(--nuit-950) 100%);
}
.produit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #cfe3ff 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #cfe3ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 38% 68%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 58%, #cfe3ff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 58% 38%, #ffffff 50%, transparent 51%);
  background-size: 640px 640px;
}
.produit h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 4.2rem); letter-spacing: -.035em; }
.produit .fil, .produit .fil a { color: var(--texte-nuit-3); }
.produit .apartir { color: var(--texte-nuit-2); }
.produit .apartir strong { color: var(--ambre-400); font-family: var(--titre); font-size: 1.6rem; }
.produit .faits li { color: var(--texte-nuit-2); }
.produit .faits strong { color: #fff; }
.produit .faits .icone { color: var(--ambre-400); }
.produit a, .produit .faits a { color: var(--texte-nuit-2); text-decoration-color: rgba(143, 200, 255, .45); }
.produit .faits a:hover { color: #fff; }
.produit .doux, .produit .petit { color: var(--texte-nuit-3); }
.produit .bouton { background: linear-gradient(180deg, var(--ambre-400), var(--ambre-500)); color: #1d1100; box-shadow: var(--lueur-ambre); }
.produit .bouton:hover { background: linear-gradient(180deg, var(--ambre-300), var(--ambre-400)); color: #1d1100; }
.h-horizon { height: 72px; }
.h-horizon::before { bottom: 12px; }

/* ── Navigation de sections, boutons, cartes ───────────────────── */
.sous-nav { background: rgba(242, 246, 252, .88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.sous-nav a { border-radius: 999px; }
.bouton { border-radius: 999px; font-family: var(--corps); font-weight: 600; background: linear-gradient(180deg, #49a0ff, var(--azur-600)); color: #04101f; box-shadow: var(--lueur-azur); }
.bouton:hover { background: linear-gradient(180deg, #6ab3ff, #1a82f0); color: #04101f; }
.bouton.secondaire { background: var(--blanc); color: var(--encre); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.bouton.secondaire:hover { border-color: var(--azur-300); color: var(--azur-700); }
.carte { border-radius: var(--rayon-l); }
.section.douce { background: var(--blanc); border-block: 1px solid var(--trait); }
.section + .section:not(.douce) { border-top: 0; }