/* ==========================================================================
   pages.css — la feuille COMMUNE aux pages secondaires du site
   (mentions legales, confidentialite, conditions d utilisation, CGV, 404).

   Pourquoi ce fichier existe : ces cinq pages portaient chacune une copie
   OCTET POUR OCTET des memes deux blocs <style> (theme v5 + bilingue), soit
   2 506 caracteres repetes cinq fois. Une correction de couleur demandait
   cinq modifications, et il suffisait d en oublier une pour que deux pages
   divergent en silence.

   ⚠ ORDRE DE CASCADE : ce <link> doit rester APRES le <style> propre a la
   page. Le bloc « theme » ci-dessous est un correctif qui doit gagner sur les
   couleurs par defaut de la page — le remonter dans le <head> ramenerait le
   pave creme en mode sombre.

   Toute regle commune a ces pages vient ici, et nulle part ailleurs.
   ========================================================================== */

/* --- LARGEUR DE LECTURE --------------------------------------------------
   Meme valeur et meme unite que le site. Ces pages portaient un
   `max-width: 760px` en dur dans chaque fichier : 47.5rem vaut exactement
   760 px par defaut — aucun changement visible — mais suit desormais la taille
   de police choisie par le visiteur, ce que `px` ignorait.
   (`ch` a ete essaye puis abandonne : il se resout sur la police de chaque
   bloc et faisait tomber ces pages a 653 px.)
   ⚠ Ce fichier est charge APRES le <style> de la page : la regle ci-dessous
   gagne donc sur le `.wrap` local, sans qu il faille toucher aux cinq fichiers.
   ------------------------------------------------------------------------ */
:root { --lecture: min(47.5rem, 100%); }
.wrap { max-width: var(--lecture); margin: 0 auto; }

/* --- BARRES DE DEFILEMENT ------------------------------------------------
   Reprises a l identique d index.html : rail invisible, curseur terracotta en
   clair / creme en sombre. Les deux syntaxes sont necessaires — `scrollbar-*`
   pour Firefox, `::-webkit-scrollbar` pour Chrome et Safari. Aucune ne couvre
   les deux.
   ------------------------------------------------------------------------ */
html { scrollbar-width: thin; scrollbar-color: rgba(200,85,61,.38) transparent; }
html.dark { scrollbar-color: rgba(247,225,200,.34) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(200,85,61,.38); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(200,85,61,.62); background-clip: padding-box; border: 3px solid transparent; }
html.dark ::-webkit-scrollbar-thumb { background: rgba(247,225,200,.34); background-clip: padding-box; border: 3px solid transparent; }
html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(247,225,200,.55); background-clip: padding-box; border: 3px solid transparent; }

/* --- THEME (etait duplique 5 fois) --------------------------------------- */
  /* v5 : meme typo que l'accueil, et theme sombre pilote par le shell (?t=dark).
     Sans ce bloc, ouvrir un document legal en mode sombre affichait un pave creme. */
  :root {
    --font-display: 'Baloo 2', 'Baloo 2 Fallback', ui-rounded, 'Trebuchet MS', sans-serif;
    --font-body: 'Baloo 2', 'Baloo 2 Fallback', ui-rounded, 'Trebuchet MS', sans-serif;
    --ivory: #F7E1C8;
    --charbon: #3A2410;
    --fg-muted: #6E4E2E;
    --terracotta: #C8553D;
    --ochre: #E5A02C;
    --rule: rgba(200, 85, 61, 0.16);
  }
  html.dark {
    --ivory: #140D08;
    --charbon: #F7E1C8;
    --fg-muted: rgba(247, 225, 200, 0.72);
    --terracotta: #E08A6F;
    --ochre: #F0B65A;
    --rule: rgba(247, 225, 200, 0.16);
  }
  /* Baloo 2 n'a pas d'italique : l'accent des titres passe par la couleur, comme le hero v5 */
  h1 em, h2 em { font-style: normal; }

/* --- BILINGUE (etait duplique 5 fois) ------------------------------------- */
  /* ===== BILINGUE ==========================================================
     Les deux langues vivent dans le meme fichier : un document legal doit
     rester lisible sans construction, sans routage et sans dependance. On
     n affiche que la langue courante, portee par html[data-lang].
     ⚠ Le document part en data-lang="fr" DANS LE MARKUP : sans JavaScript, le
     francais s affiche quand meme. C est le minimum pour une page legale.
     display:revert plutot qu une valeur en dur : un <span data-l> redevient
     inline et un <div data-l> redevient bloc, sans regle par balise. */
  [data-l] { display: none; }
  html[data-lang="fr"] [data-l="fr"],
  html[data-lang="en"] [data-l="en"] { display: revert; }

  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
  }
  .lang-sw { display: flex; border: 1.5px solid var(--rule); border-radius: 999px; overflow: hidden; }
  .lang-sw button {
    border: none;
    background: none;
    font-family: var(--font-mono);
    font-size:max(0.75rem,12px);
    letter-spacing: 0.08em;
    padding: 7px 12px;
    min-height: 34px;
    color: var(--fg-muted);
    cursor: pointer;
  }
  .lang-sw button:hover { color: var(--terracotta); }
  .lang-sw button[aria-pressed="true"] { background: var(--terracotta); color: #FFF7EA; }
  .lang-sw button:focus-visible { outline: 2.5px solid var(--ochre); outline-offset: -2px; }
  /* Dans l iframe du site, c est le selecteur du shell qui commande : deux
     commutateurs a l ecran se contrediraient. */
  .embedded .lang-sw { display: none; }
  .embedded .topbar { margin-bottom: 8px; }
