/* Pages annexes : conditions d'utilisation, confidentialite, page de crash.
 * Memes jetons de couleur, memes polices et meme barre superieure que le
 * site : ces pages doivent se lire comme une section du site, pas comme un
 * document a part. Theme et bouton : pages.js. */
:root{
  color-scheme: dark;
  --bg-base: #10092C;
  --surface: #1E1642;
  --surface-soft: #251B4F;
  --structure: #587DF6;
  --structure-ink: #8AA5FC;
  --on-structure: #150C33;
  --text-primary: #F2F4F7;
  --text-secondary: #C9D2DE;
  --border: rgba(178,162,216,0.30);
  --border-strong: rgba(178,162,216,0.45);
  --topbar-bg: rgba(14,8,38,0.86);
  --sunken: #180F38;
  --elev-2: #251B4F;
  --lift-2: inset 0 1px 0 rgba(255,255,255,0.07);
  --shadow-2: none;
  --lien: #8AA5FC;
  --heading: var(--text-primary);
  --marker: 'Permanent Marker', 'Barlow Condensed', system-ui, sans-serif;
}
/* Mode jour : memes jetons que le site (styles.css) : fond gris, accent
   violet de la famille des titres, titres en violet nuit. */
:root[data-theme="light"]{
  color-scheme: light;
  --bg-base: #D2D4D9;
  --surface: #DDDFE3;
  --surface-soft: #D5D7DC;
  --text-primary: #14161B;
  --text-secondary: #3A3F4A;
  --border: rgba(20,22,27,0.14);
  --border-strong: rgba(20,22,27,0.26);
  --topbar-bg: rgba(221,223,227,0.92);
  --structure: #5B2A9E;
  --structure-ink: #4A1D86;
  --on-structure: #DDDFE3;
  --sunken: #D5D7DC;
  --elev-2: #DDDFE3;
  --lift-2: none;
  --shadow-2: 0 4px 10px rgba(20,22,27,0.14), 0 24px 48px rgba(20,22,27,0.26);
  --lien: #4A1D86;
  --heading: #3F006A;
}
/* Mode Beige : variante du mode jour (styles.css) : fond sable clair,
   surfaces creme, brun cafe a la place du violet. */
:root[data-theme="light"][data-nuance="beige"]{
  --bg-base: #F1E4CE;
  --surface: #FDF8EC;
  --surface-soft: #F8EFDF;
  --sunken: #F6ECDA;
  --elev-2: #FDF8EC;
  --text-primary: #3B2A1A;
  --text-secondary: #6A5440;
  --border: rgba(139,102,64,0.22);
  --border-strong: rgba(139,102,64,0.40);
  --topbar-bg: rgba(253,248,236,0.94);
  --structure: #8B6640;
  --structure-ink: #6E4E2E;
  --on-structure: #FDF8EC;
  --lien: #6E4E2E;
  --heading: #4E3219;
}
/* Mode Noir : memes jetons que le site (styles.css) : fond noir pur,
   surfaces anthracite, memes accents. */
:root[data-theme="dark"][data-nuance="noir"]{
  --bg-base: #000000;
  --surface: #18181C;
  --surface-soft: #202025;
  --sunken: #0A0A0C;
  --elev-2: #202025;
  --text-secondary: #C2C6CE;
  --border: rgba(255,255,255,0.17);
  --border-strong: rgba(255,255,255,0.28);
  --topbar-bg: rgba(0,0,0,0.86);
  --on-structure: #000000;
}

*{ box-sizing:border-box; }
html{ background:var(--bg-base); }
body{
  margin:0; min-height:100vh;
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:16px; line-height:1.6;
  display:flex; flex-direction:column;
}
a{ color:var(--lien); text-underline-offset:3px; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--structure); outline-offset:3px; border-radius:4px; }
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:100;
  background:var(--structure); color:var(--on-structure);
  padding:10px 16px; border-radius:8px; text-decoration:none; font-weight:600;
}
.skip-link:focus{ top:12px; }

/* ---------- Barre superieure ---------- */
header.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--topbar-bg);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1180px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:20px; height:76px;
}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; text-decoration:none; color:inherit; }
.brand img{ height:52px; width:auto; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text .b1{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:20.5px; letter-spacing:0.02em; transition:color .15s ease; }
.brand-text .b2{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:13px; letter-spacing:0.12em; color:var(--text-secondary); text-transform:uppercase; }
.brand:hover .b1{ color:var(--structure); }
.current-section{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:16px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--text-secondary);
  padding-left:12px; border-left:1px solid var(--border);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.spacer{ flex:1; }
.theme-toggle{
  appearance:none; border:1px solid var(--border-strong); background:var(--surface-soft);
  width:44px; height:44px; border-radius:8px; cursor:pointer; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-secondary);
  transition:color .15s ease, border-color .15s ease;
}
.theme-toggle:hover{ color:var(--text-primary); border-color:var(--structure); }
.theme-toggle svg{ width:20px; height:20px; }

/* ---------- Texte juridique ---------- */
main{ flex:1; }
.doc{ max-width:760px; margin:0 auto; padding:48px 24px 64px; }
.caption{
  font-family:'Barlow Condensed', system-ui, sans-serif; font-size:16.5px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--text-secondary);
  display:flex; align-items:center; gap:10px; margin:0 0 6px;
}
.caption::before{ content:""; width:26px; height:3px; border-radius:2px; background:var(--structure); flex-shrink:0; }
h1{ font-family:var(--marker); font-weight:400; font-size:40px; line-height:1.25; margin:0 0 10px; color:var(--heading); }
.maj{ color:var(--text-secondary); font-size:14.5px; margin:0 0 32px; }
.doc h2{
  font-family:'Barlow Condensed', system-ui, sans-serif; font-weight:700;
  font-size:24px; letter-spacing:0.01em; line-height:1.25;
  margin:36px 0 10px; padding-top:20px; border-top:1px solid var(--border);
}
.doc p, .doc li{ color:var(--text-primary); max-width:68ch; }
.doc p{ margin:0 0 14px; }
.doc ul{ margin:0 0 14px; padding-left:22px; }
.doc li{ margin:0 0 6px; }
.doc strong{ font-weight:600; }
.encadre{
  background:var(--sunken); border:1px solid var(--border-strong); border-radius:8px;
  padding:18px 20px; margin:0 0 14px;
}
.encadre p:last-child{ margin-bottom:0; }

/* ---------- Pied de page commun ---------- */
.pied{
  border-top:1px solid var(--border);
  padding:22px 24px 28px; text-align:center;
  font-size:14px; color:var(--text-secondary);
}
.pied nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-bottom:8px; }
.pied a{ color:var(--text-secondary); }
.pied a:hover, .pied a[aria-current="page"]{ color:var(--text-primary); }

/* ---------- Page de crash ---------- */
.crash{ flex:1; display:flex; align-items:center; padding:56px 0 72px; }
.crash .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; width:100%; }
.crash .content{ max-width:620px; }
.code{
  font-family:var(--marker); font-weight:400;
  font-size:clamp(64px, 14vw, 116px); line-height:1;
  color:var(--structure); margin:0 0 14px;
}
.lede{ color:var(--text-secondary); margin:0 0 28px; }
.links{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; font:600 15px/1.2 'Work Sans', system-ui, sans-serif;
  padding:12px 20px; border-radius:10px;
  border:1px solid var(--border-strong); background:var(--elev-2);
  box-shadow:var(--lift-2), var(--shadow-2);
  color:var(--text-primary);
  transition:transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.btn svg{ width:17px; height:17px; flex-shrink:0; }
.btn:hover{ transform:translateY(-2px); border-color:var(--structure); }
.btn.primary{ background:var(--structure); border-color:var(--structure); color:var(--on-structure); }
.btn.primary:hover{ background:var(--structure-ink); border-color:var(--structure-ink); }
.detail{ margin-top:26px; font-size:14px; color:var(--text-secondary); }

@media (max-width:900px){
  .topbar-inner{ height:64px; gap:12px; padding:0 16px; }
  .brand img{ height:42px; }
  .current-section{ display:none; }
  .doc{ padding:32px 16px 48px; }
  .crash .wrap{ padding:0 16px; }
  h1{ font-size:32px; }
}
@media (prefers-reduced-motion: reduce){
  .btn, .brand-text .b1, .theme-toggle{ transition:none; }
  .btn:hover{ transform:none; }
}

/* ---------- Menu des trois themes (menu-themes.js) ----------
   Meme menu que celui de l'accueil (styles.css, .mq-themes). */
.theme-toggle .i-sun, .theme-toggle .i-moon, .theme-toggle .i-noir{ display:none; }
:root[data-theme="light"] .theme-toggle .i-sun{ display:block; }
:root[data-theme="dark"]:not([data-nuance="noir"]) .theme-toggle .i-moon{ display:block; }
:root[data-theme="dark"][data-nuance="noir"] .theme-toggle .i-noir{ display:block; }
.menu-themes{
  position:fixed; z-index:1000; min-width:210px; padding:6px;
  background:var(--elev-2, var(--surface-soft)); border:1px solid var(--border-strong); border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  display:flex; flex-direction:column; gap:2px;
}
.menu-themes[hidden]{ display:none; }
.menu-themes-titre{
  padding:6px 10px; font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-secondary);
}
.menu-themes button{
  appearance:none; border:none; background:none; color:var(--text-primary); cursor:pointer;
  display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:8px 10px;
  border-radius:8px; font:600 15px 'Work Sans', system-ui, sans-serif; text-align:left;
}
.menu-themes button:hover, .menu-themes button:focus-visible{ background:rgba(127,127,127,.14); outline:none; }
.menu-themes button:focus-visible{ box-shadow:0 0 0 2px var(--structure); }
.menu-themes-pastille{
  width:26px; height:26px; border-radius:50%; flex:none;
  border:2px solid rgba(255,255,255,.35); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.menu-themes-pastille.clair { background:linear-gradient(135deg, #E2E4E8 50%, #C6C9D0 50%); border-color:rgba(20,22,27,.3); }
.menu-themes-pastille.beige { background:linear-gradient(135deg, #FDF8EC 50%, #8B6640 50%); border-color:rgba(139,102,64,.45); }
.menu-themes-pastille.violet{ background:linear-gradient(135deg, #3F006A 50%, #10092C 50%); }
.menu-themes-pastille.noir  { background:linear-gradient(135deg, #1B1B20 50%, #000 50%); }
.menu-themes-coche{ margin-left:auto; width:18px; height:18px; color:#F07D00; visibility:hidden; }
.menu-themes button[aria-checked="true"] .menu-themes-coche{ visibility:visible; }