/* Socle S33D : les sites de données (communes, transports, entreprises, carburants, elec, cartes, annuaire)
   et les services (voice, vpn, hosting, api, tv).
   Source unique : MARQUE/socle-donnees/socle.css, copiée telle quelle dans le dossier statique de chaque site. */

@font-face { font-family: "Satoshi"; src: url(polices/Satoshi-Variable.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(polices/GeneralSans-Variable.woff2) format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url(polices/ClashDisplay-Variable.woff2) format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }

:root {
  /* Nuit (coque, héros, pied) */
  --nuit-950: #03060d;
  --nuit-900: #05090f;
  --nuit-850: #071122;
  --nuit-800: #0a1a38;
  --nuit-700: #10244a;
  --nuit-600: #183363;
  --verre: rgba(16, 36, 74, .34);
  --verre-fort: rgba(28, 58, 112, .5);
  --trait-nuit: rgba(124, 168, 240, .16);
  --trait-nuit-doux: rgba(124, 168, 240, .09);
  --texte-nuit: #e9f0ff;
  --texte-nuit-2: #b6c8e6;
  --texte-nuit-3: #8ea4c6;
  --texte-nuit-4: #7388ae;

  /* Azur (marque) et ambre (lumière) */
  --azur-50: #eff8ff;
  --azur-100: #dbefff;
  --azur-200: #b9e0ff;
  --azur-300: #8fc8ff;
  --azur-400: #4cb0ff;
  --azur-500: #2f8bff;
  --azur-600: #0d73e6;
  --azur-700: #0e5cc4;
  --azur-800: #124d9e;
  --azur-900: #15427d;
  --ambre-300: #ffd98a;
  --ambre-400: #ffc757;
  --ambre-500: #f7ad2b;
  --ambre-600: #e0900f;
  --ambre-700: #b06d05;

  /* Jour (zones de lecture) */
  --glace: #f2f6fc;
  --glace-2: #e8eef8;
  --blanc: #ffffff;
  --encre: #0b1630;
  --encre-2: #3d4f72;
  --encre-3: #5a6a88;
  --trait: #dbe4f1;
  --trait-fort: #c3d1e6;

  /* États */
  --vert: #16a36a;
  --vert-doux: #e3f6ee;
  --orange: #e8820c;
  --orange-doux: #fdf0dc;
  --rouge: #e0412f;
  --rouge-doux: #fde9e6;
  --violet: #7a6cff;
  --turquoise: #19b3b0;

  /* Formes et mouvement */
  --rayon-s: 10px;
  --rayon: 16px;
  --rayon-l: 24px;
  --rayon-xl: 32px;
  --ombre-jour: 0 1px 0 rgba(11, 22, 48, .04), 0 12px 32px -14px rgba(11, 22, 48, .18);
  --ombre-jour-forte: 0 2px 0 rgba(11, 22, 48, .04), 0 24px 60px -20px rgba(11, 22, 48, .28);
  --ombre-nuit: 0 24px 60px -24px rgba(0, 0, 0, .8);
  --lueur-azur: 0 10px 30px -12px rgba(47, 139, 255, .9);
  --lueur-ambre: 0 10px 30px -12px rgba(247, 173, 43, .8);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-sortie: cubic-bezier(.4, 0, 1, 1);
  --duree: .35s;

  --titre: "Satoshi", "General Sans", "Segoe UI", system-ui, sans-serif;
  --corps: "General Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --affiche: "Clash Display", "Satoshi", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --largeur: 1240px;
  --goutiere: clamp(16px, 3.2vw, 40px);
  --barre: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--barre) + 64px); }
body {
  margin: 0;
  font: 400 16px/1.6 var(--corps);
  color: var(--encre);
  background: var(--glace);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.s3-nuit { background: var(--nuit-900); color: var(--texte-nuit); }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0 0 .9em; }
img, svg, video, canvas { max-width: 100%; }
a { color: var(--azur-700); text-decoration: none; transition: color .2s; }
a:hover { color: var(--azur-800); }
.s3-nuit a, .s3-zone-nuit a { color: var(--azur-300); }
.s3-nuit a:hover, .s3-zone-nuit a:hover { color: #fff; }
::selection { background: rgba(47, 139, 255, .28); }
:focus-visible { outline: 3px solid var(--azur-400); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.s3-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.s3-saut { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--azur-500); color: #04101f; font-weight: 600; }
.s3-saut:focus { top: 12px; }
.s3-enveloppe { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--goutiere); }
.s3-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; }
.s3-mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
svg.i { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.22em; }

/* ── Barre haute (coque nuit, verre) ───────────────────────────── */
.s3-barre {
  position: sticky; top: 0; z-index: 50;
  height: var(--barre);
  background: rgba(5, 10, 20, .72);
  backdrop-filter: saturate(1.5) blur(16px);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid var(--trait-nuit-doux);
  color: var(--texte-nuit);
  transition: background .3s, box-shadow .3s;
}
.s3-barre.est-defilee { background: rgba(4, 8, 16, .9); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); }
.s3-barre-ligne { height: 100%; display: flex; align-items: center; gap: 16px; }
.s3-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--texte-nuit) !important; white-space: nowrap; }
.s3-logo-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: radial-gradient(120% 120% at 30% 20%, #1c4f9c 0%, #0b2552 55%, #071634 100%);
  box-shadow: inset 0 0 0 1px rgba(143, 200, 255, .28), 0 6px 18px -8px rgba(47, 139, 255, .9);
  color: var(--azur-300);
}
.s3-logo-mark svg { width: 19px; height: 19px; }
.s3-logo-texte { display: flex; flex-direction: column; line-height: 1; }
.s3-logo-s33d { font: 700 10px/1 var(--titre); letter-spacing: .22em; color: var(--texte-nuit-3); }
.s3-logo-nom { font: 700 19px/1.05 var(--titre); letter-spacing: -.02em; color: #fff; margin-top: 3px; }
.s3-barre-nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.s3-barre-nav a { padding: 8px 13px; border-radius: 999px; font-size: 14px; color: var(--texte-nuit-2); }
.s3-barre-nav a:hover, .s3-barre-nav a[aria-current="page"] { background: rgba(47, 139, 255, .16); color: #fff; }
.s3-barre-droite { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ── Recherche (pilule, suggestions) ───────────────────────────── */
.s3-recherche { position: relative; width: min(420px, 42vw); }
.s3-champ { position: relative; display: flex; align-items: center; }
.s3-champ > svg.i { position: absolute; left: 14px; color: var(--texte-nuit-3); pointer-events: none; }
.s3-champ input {
  width: 100%; height: 42px; padding: 0 44px 0 42px; border-radius: 999px;
  background: rgba(16, 36, 74, .5); border: 1px solid var(--trait-nuit); color: #fff;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.s3-champ input::placeholder { color: var(--texte-nuit-3); }
.s3-champ input:focus { outline: none; border-color: rgba(143, 200, 255, .55); background: rgba(16, 36, 74, .8); box-shadow: 0 0 0 4px rgba(47, 139, 255, .2); }
.s3-champ kbd {
  position: absolute; right: 12px; font: 600 11px/1 var(--corps); color: var(--texte-nuit-3);
  padding: 4px 7px; border: 1px solid var(--trait-nuit); border-radius: 6px; pointer-events: none;
}
.s3-champ input:focus ~ kbd { opacity: 0; }
.s3-suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; z-index: 60;
  background: rgba(7, 15, 32, .97); border: 1px solid var(--trait-nuit); border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .3);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  max-height: min(70vh, 520px); overflow: auto; color: var(--texte-nuit);
}
.s3-suggestions li { margin: 0; }
.s3-suggestions a, .s3-suggestions .s3-sugg {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--texte-nuit) !important;
}
.s3-suggestions a:hover, .s3-suggestions [aria-selected="true"] a, .s3-suggestions a[aria-selected="true"] { background: rgba(47, 139, 255, .18); }
.s3-sugg-titre { font-weight: 600; }
.s3-sugg-detail { color: var(--texte-nuit-3); font-size: 13px; margin-left: auto; text-align: right; }
.s3-sugg-vide { padding: 14px; color: var(--texte-nuit-3); font-size: 14px; }
mark { background: none; color: var(--ambre-400); font-weight: 700; }

/* Variante grande (héros) */
.s3-recherche-grande { width: 100%; max-width: 640px; }
.s3-recherche-grande .s3-champ input { height: 62px; font-size: 18px; padding: 0 130px 0 56px; background: rgba(10, 22, 46, .72); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .9); }
.s3-recherche-grande .s3-champ > svg.i { left: 20px; width: 1.45em; height: 1.45em; }
.s3-recherche-grande .s3-btn { position: absolute; right: 7px; top: 7px; height: 48px; }

/* ── Lanceur des sites de données ──────────────────────────────── */
.s3-lanceur { position: relative; }
.s3-lanceur-bouton {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: transparent; border: 1px solid var(--trait-nuit); color: var(--texte-nuit-2);
  transition: background .2s, color .2s, border-color .2s;
}
.s3-lanceur-bouton:hover, .s3-lanceur-bouton[aria-expanded="true"] { background: rgba(47, 139, 255, .16); color: #fff; border-color: rgba(143, 200, 255, .4); }
.s3-lanceur-menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: 452px; padding: 10px; z-index: 70;
  max-height: calc(100vh - var(--barre) - 24px); overflow: auto;
  background: rgba(7, 15, 32, .97); border: 1px solid var(--trait-nuit); border-radius: 20px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transform-origin: top right; animation: s3-pop .22s var(--ease);
}
.s3-lanceur-menu p { margin: 6px 10px 10px; font: 600 11px/1 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-nuit-4); }
.s3-lanceur-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.s3-lanceur-grille + p { margin-top: 14px; }
.s3-lanceur-grille a {
  display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; color: var(--texte-nuit) !important;
  border: 1px solid transparent; transition: background .2s, border-color .2s;
}
.s3-lanceur-grille a:hover { background: rgba(47, 139, 255, .12); border-color: var(--trait-nuit); }
.s3-lanceur-grille a[aria-current="true"] { background: rgba(47, 139, 255, .18); border-color: rgba(143, 200, 255, .35); }
.s3-lanceur-grille svg.i { width: 22px; height: 22px; color: var(--azur-300); }
.s3-lanceur-grille b { font: 600 14px/1.1 var(--titre); }
.s3-lanceur-grille small { color: var(--texte-nuit-3); font-size: 12px; line-height: 1.3; }
.s3-compte {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px;
  background: transparent; border: 1px solid var(--trait-nuit); color: var(--texte-nuit-2) !important; font: 500 14px/1 var(--corps); white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.s3-compte:hover { background: rgba(47, 139, 255, .16); color: #fff !important; border-color: rgba(143, 200, 255, .4); }
.s3-compte form { display: contents; }
.s3-compte button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
@keyframes s3-pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Boutons, pastilles, badges ────────────────────────────────── */
.s3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--corps); white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.s3-btn:active { transform: translateY(1px) scale(.99); }
.s3-btn-azur { background: linear-gradient(180deg, #49a0ff, var(--azur-600)); color: #04101f !important; box-shadow: var(--lueur-azur); }
.s3-btn-azur:hover { background: linear-gradient(180deg, #6ab3ff, #1a82f0); transform: translateY(-1px); }
.s3-btn-ambre { background: linear-gradient(180deg, var(--ambre-400), var(--ambre-500)); color: #1d1100 !important; box-shadow: var(--lueur-ambre); }
.s3-btn-ambre:hover { background: linear-gradient(180deg, var(--ambre-300), var(--ambre-400)); transform: translateY(-1px); }
.s3-btn-verre { background: var(--verre); border-color: var(--trait-nuit); color: var(--texte-nuit) !important; backdrop-filter: blur(14px); }
.s3-btn-verre:hover { background: var(--verre-fort); border-color: rgba(143, 200, 255, .4); }
.s3-btn-clair { background: var(--blanc); border-color: var(--trait); color: var(--encre) !important; box-shadow: var(--ombre-jour); }
.s3-btn-clair:hover { border-color: var(--azur-300); color: var(--azur-700) !important; }
.s3-btn-petit { min-height: 36px; padding: 0 14px; font-size: 13.5px; }

.s3-pastille {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 13px; border-radius: 999px;
  font: 500 13.5px/1 var(--corps); white-space: nowrap;
  background: var(--blanc); border: 1px solid var(--trait); color: var(--encre-2) !important;
  transition: border-color .2s, color .2s, background .2s, transform .2s var(--ease);
}
a.s3-pastille:hover, button.s3-pastille:hover { border-color: var(--azur-300); color: var(--azur-700) !important; transform: translateY(-1px); }
.s3-pastille[aria-pressed="true"], .s3-pastille.est-active { background: var(--azur-600); border-color: var(--azur-600); color: #fff !important; }
.s3-nuit .s3-pastille, .s3-zone-nuit .s3-pastille { background: var(--verre); border-color: var(--trait-nuit); color: var(--texte-nuit-2) !important; }
.s3-nuit a.s3-pastille:hover, .s3-zone-nuit a.s3-pastille:hover, .s3-zone-nuit button.s3-pastille:hover { border-color: rgba(143, 200, 255, .45); color: #fff !important; }
.s3-zone-nuit .s3-pastille[aria-pressed="true"], .s3-zone-nuit .s3-pastille.est-active { background: rgba(47, 139, 255, .3); border-color: rgba(143, 200, 255, .6); color: #fff !important; }

.s3-surtitre { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; font: 600 11.5px/1 var(--corps); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-nuit-2); background: var(--verre); border: 1px solid var(--trait-nuit); }
.s3-surtitre::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--azur-400); box-shadow: 0 0 0 4px rgba(47, 139, 255, .2), 0 0 12px var(--azur-400); }
.s3-surtitre.ambre::before { background: var(--ambre-400); box-shadow: 0 0 0 4px rgba(247, 173, 43, .2), 0 0 12px var(--ambre-400); }

.s3-direct { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--corps); letter-spacing: .06em; text-transform: uppercase; color: var(--vert); }
.s3-direct::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: s3-pouls 1.8s infinite; }
@keyframes s3-pouls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.s3-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.3 var(--corps); background: var(--azur-50); color: var(--azur-700); }
.s3-badge.vert { background: var(--vert-doux); color: #0c7a4e; }
.s3-badge.orange { background: var(--orange-doux); color: #a85a00; }
.s3-badge.rouge { background: var(--rouge-doux); color: #b42d1d; }
.s3-badge.ambre { background: #fff4d9; color: #8a5600; }
.s3-badge.gris { background: var(--glace-2); color: var(--encre-2); }

/* ── Héros de nuit et horizon ──────────────────────────────────── */
.s3-zone-nuit {
  position: relative; isolation: isolate; color: var(--texte-nuit);
  background: radial-gradient(120% 90% at 50% 0%, #0b1d3f 0%, #060c18 58%, #03060d 100%);
}
.s3-zone-nuit .s3-ciel { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
.s3-etoiles::before {
  content: ""; position: absolute; inset: 0; z-index: -2; 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(1px 1px at 22% 82%, #cfe3ff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 58% 38%, #ffffff 50%, transparent 51%);
  background-size: 640px 640px;
}
.s3-horizon { position: relative; height: 120px; margin-top: -1px; background: linear-gradient(180deg, var(--nuit-950) 0%, #0b1a35 38%, #3a4f78 72%, var(--glace) 100%); overflow: hidden; }
.s3-horizon::before { content: ""; position: absolute; left: 50%; bottom: 18px; width: min(1100px, 92vw); height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255, 199, 87, .0) 8%, rgba(255, 199, 87, .85) 50%, rgba(255, 199, 87, 0) 92%, transparent); filter: blur(.4px); }
.s3-horizon::after { content: ""; position: absolute; left: 50%; bottom: -60px; width: min(900px, 80vw); height: 140px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(255, 199, 87, .35), transparent 70%); }
.s3-titre-affiche { font: 700 clamp(2.6rem, 6.4vw, 5.6rem)/.98 var(--titre); letter-spacing: -.035em; }
.s3-titre-affiche em { font-style: normal; background: linear-gradient(100deg, var(--azur-300), var(--azur-500) 45%, var(--ambre-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s3-chapeau { font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6; color: var(--texte-nuit-2); max-width: 60ch; }

/* ── Cartes ────────────────────────────────────────────────────── */
.s3-carte { position: relative; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-l); box-shadow: var(--ombre-jour); padding: 22px; }
.s3-carte-lien { display: block; color: inherit !important; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.s3-carte-lien:hover { transform: translateY(-3px); box-shadow: var(--ombre-jour-forte); border-color: var(--azur-200); }
.s3-verre { position: relative; background: linear-gradient(180deg, rgba(22, 46, 92, .5), rgba(10, 22, 46, .42)); border: 1px solid var(--trait-nuit); border-radius: var(--rayon-l); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--ombre-nuit); padding: 22px; color: var(--texte-nuit); }
.s3-verre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 60% at 0% 0%, rgba(143, 200, 255, .1), transparent 50%); }

.s3-chiffre { display: flex; flex-direction: column; gap: 4px; }
.s3-chiffre-valeur { font: 700 clamp(1.8rem, 3.2vw, 2.6rem)/1 var(--titre); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.s3-chiffre-unite { font-size: .55em; font-weight: 600; color: var(--encre-3); margin-left: 3px; letter-spacing: 0; }
.s3-zone-nuit .s3-chiffre-unite, .s3-verre .s3-chiffre-unite { color: var(--texte-nuit-3); }
.s3-chiffre-libelle { font-size: 13.5px; color: var(--encre-3); line-height: 1.35; }
.s3-zone-nuit .s3-chiffre-libelle, .s3-verre .s3-chiffre-libelle { color: var(--texte-nuit-3); }

/* ── En-tête de section (emblème + titre) ──────────────────────── */
.s3-section { padding: clamp(36px, 5vw, 64px) 0 0; }
.s3-section-tete { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.s3-embleme { flex: none; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 20%, #163d7d, #071634); box-shadow: inset 0 0 0 1px rgba(143, 200, 255, .22), 0 14px 30px -16px rgba(13, 115, 230, .9); overflow: hidden; }
.s3-embleme img { width: 100%; height: 100%; object-fit: cover; }
.s3-embleme svg.i { width: 28px; height: 28px; color: var(--azur-300); }
.s3-section-tete h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.s3-section-tete p { margin: 4px 0 0; color: var(--encre-3); font-size: 14.5px; }
.s3-source { margin: 16px 0 0; font-size: 12.5px; color: var(--encre-3); }
.s3-source a { color: var(--encre-2); text-decoration: underline; text-decoration-color: var(--trait-fort); text-underline-offset: 3px; }

/* ── Navigation de chapitres (collante, suivie au défilement) ──── */
.s3-chapitres { position: sticky; top: var(--barre); z-index: 40; background: rgba(242, 246, 252, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--trait); }
.s3-chapitres-ligne { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; }
.s3-chapitres-ligne::-webkit-scrollbar { display: none; }
.s3-chapitres a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font: 500 14px/1 var(--corps); color: var(--encre-2); transition: background .2s, color .2s; }
.s3-chapitres a:hover { background: var(--glace-2); color: var(--encre); }
.s3-chapitres a.est-actif { background: var(--encre); color: #fff; }
.s3-chapitres a svg.i { width: 1.05em; height: 1.05em; }

/* ── Tableaux ──────────────────────────────────────────────────── */
.s3-table-cadre { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--blanc); }
.s3-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.s3-table th { text-align: left; font: 600 12px/1.2 var(--corps); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); padding: 12px 14px; background: var(--glace); border-bottom: 1px solid var(--trait); white-space: nowrap; }
.s3-table td { padding: 11px 14px; border-bottom: 1px solid var(--glace-2); vertical-align: top; }
.s3-table tr:last-child td { border-bottom: 0; }
.s3-table tbody tr { transition: background .15s; }
.s3-table tbody tr:hover { background: #f7faff; }
.s3-table .d { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Squelettes, apparitions ───────────────────────────────────── */
.s3-squelette { position: relative; overflow: hidden; background: var(--glace-2); border-radius: 10px; min-height: 1em; }
.s3-squelette::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: s3-reflet 1.4s infinite; }
.s3-zone-nuit .s3-squelette { background: rgba(124, 168, 240, .1); }
.s3-zone-nuit .s3-squelette::after { background: linear-gradient(90deg, transparent, rgba(143, 200, 255, .14), transparent); }
@keyframes s3-reflet { to { transform: translateX(100%); } }
.s3-apparition { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--retard, 0s); }
.s3-apparition.est-vue { opacity: 1; transform: none; }

/* ── Pied (coque nuit) ─────────────────────────────────────────── */
.s3-pied { position: relative; margin-top: clamp(56px, 8vw, 110px); background: var(--nuit-950); color: var(--texte-nuit-3); font-size: 14px; overflow: hidden; }
.s3-pied::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1100px, 92vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(143, 200, 255, .5), rgba(255, 199, 87, .6), rgba(143, 200, 255, .5), transparent); }
.s3-pied-grille { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding: 52px 0 32px; }
.s3-pied h3 { font: 600 12px/1 var(--corps); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-nuit-4); margin: 6px 0 14px; }
.s3-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.s3-pied a { color: var(--texte-nuit-2); }
.s3-pied a:hover { color: #fff; }
.s3-pied-marque p { max-width: 42ch; margin: 14px 0 0; line-height: 1.6; }
.s3-pied-bas { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; padding: 18px 0 28px; border-top: 1px solid var(--trait-nuit-doux); font-size: 12.5px; color: var(--texte-nuit-4); }

/* ── Mise en page adaptative ───────────────────────────────────── */
@media (max-width: 960px) {
  .s3-pied-grille { grid-template-columns: 1fr 1fr; }
  .s3-barre-nav { display: none; }
}
@media (max-width: 720px) {
  :root { --barre: 58px; }
  .s3-logo-s33d { display: none; }
  .s3-logo-nom { margin-top: 0; font-size: 18px; }
  .s3-recherche { width: auto; flex: 1; }
  .s3-barre .s3-champ kbd { display: none; }
  .s3-barre .s3-champ input::placeholder { color: transparent; }
  .s3-recherche-grande .s3-champ input { height: 56px; font-size: 16px; padding-right: 56px; }
  .s3-recherche-grande .s3-btn span { display: none; }
  .s3-recherche-grande .s3-btn { width: 44px; padding: 0; height: 42px; }
  .s3-pied-grille { grid-template-columns: 1fr; }
  .s3-lanceur-menu { position: fixed; left: 12px; right: 12px; top: calc(var(--barre) + 8px); width: auto; }
  .s3-lanceur-grille { grid-template-columns: 1fr 1fr; }
  .s3-compte span { display: none; }
  .s3-compte { width: 42px; padding: 0; justify-content: center; }
  .s3-carte, .s3-verre { padding: 18px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .s3-apparition { opacity: 1; transform: none; }
}