/* ============================================================
   Pages juridiques publiques d'O Dlo La (2026-08-18)
   confidentialite.html · cgu.html · mentions-legales.html ·
   suppression-compte.html

   Retour Nathan : « pas du tout premium ». Ces quatre pages portaient chacune
   une copie du MÊME bloc de style, en police système, sans rien de l'identité
   de l'app. Elles sont pourtant la vitrine juridique du service : c'est ce que
   consultent les examinateurs d'Apple et de Google, et ce que voit un habitant
   qui se demande ce qu'on fait de son adresse.

   Le contenu de chaque page est inchangé. Cette feuille ne fait que lui donner
   la même voix que l'application.

   Trois contraintes ont dicté les choix :
     - la CSP du site n'autorise que 'self' pour les styles et les polices,
       donc aucune ressource externe. Les deux polices sont celles de l'app,
       déjà auto-hébergées dans /fonts/ depuis l'audit RGPD du 27/07 ;
     - la sobriété. Un examinateur de store cherche une information précise :
       la page doit être belle sans jamais gêner la lecture ;
     - aucun tiret long, ici comme dans les pages : tests/no-em-dash.test.js
       lit ces fichiers en entier, commentaires compris.
   ============================================================ */

@font-face{
  font-family:'Baloo 2';
  font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/baloo2.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito';
  font-style:normal;font-weight:400 900;font-display:swap;
  src:url('/fonts/nunito.woff2') format('woff2');
}

:root{
  /* Palette reprise de src/styles/tokens/colors.css. */
  --ocean-900:#06283b;
  --ocean-50:#f1f8fc;
  --lagoon-700:#0d8896;
  --lagoon-100:#e3fafc;
  --ink-700:#2c4654;
  --ink-500:#5a7180;
  --ink-200:#d6e0e6;
  --ink-100:#e9eff3;

  --ground:var(--ocean-50);
  --card:#ffffff;
  --text:var(--ocean-900);
  --body:var(--ink-700);
  --muted:var(--ink-500);
  --line:var(--ink-200);
  --line-soft:var(--ink-100);
  --accent:var(--lagoon-700);
  --accent-soft:var(--lagoon-100);
  --shadow:0 1px 2px rgba(6,40,59,.05), 0 10px 30px rgba(6,40,59,.06);
}

/* L'app démarre toujours en clair (décision Nathan du 22/07) mais ces pages
   s'ouvrent dans le navigateur du visiteur, hors de son contrôle : elles
   suivent donc la préférence du système. */
@media (prefers-color-scheme: dark){
  :root{
    --ground:#041c29;
    --card:#0a2f42;
    --text:#eaf6fb;
    --body:#b9d2de;
    --muted:#8aa8b8;
    --line:#164156;
    --line-soft:#123647;
    --accent:#52d6e2;
    --accent-soft:#0b3d4c;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--ground);
  color:var(--body);
  font-family:'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Le contenu vit dans une carte posée sur le fond teinté, comme les feuilles
   de l'app. Sur grand écran, la mesure reste courte : au-dela de 70 caracteres
   par ligne, un texte juridique devient franchement pénible. */
.wrap{
  max-width:720px;
  margin:0 auto;
  padding:28px 18px 56px;
}

header{
  margin-bottom:22px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
header .marque{
  display:flex;align-items:center;gap:10px;
  margin-bottom:16px;
  text-decoration:none;
}
header .marque img{
  width:34px;height:34px;border-radius:9px;
}
header .marque span{
  font-family:'Baloo 2', system-ui, sans-serif;
  font-weight:700;font-size:17px;
  color:var(--text);
}
h1{
  font-family:'Baloo 2', system-ui, sans-serif;
  font-size:clamp(26px, 5.5vw, 34px);
  font-weight:700;
  color:var(--text);
  margin:0 0 8px;
  line-height:1.15;
  text-wrap:balance;
}
.updated{
  color:var(--muted);
  font-size:14px;
}

main, .contenu{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:20px;
  padding:26px 24px 30px;
  box-shadow:var(--shadow);
}

h2{
  font-family:'Baloo 2', system-ui, sans-serif;
  font-size:20px;font-weight:700;
  color:var(--text);
  margin:34px 0 10px;
  line-height:1.25;
  text-wrap:balance;
}
/* Un filet court sous chaque titre de section : il donne le rythme sans
   alourdir, là où une bordure pleine largeur découperait la page. */
h2::after{
  content:"";
  display:block;
  width:34px;height:3px;
  margin-top:8px;
  border-radius:2px;
  background:var(--accent);
}
h2:first-child{ margin-top:0; }

h3{
  font-family:'Baloo 2', system-ui, sans-serif;
  font-size:16.5px;font-weight:700;
  color:var(--text);
  margin:24px 0 6px;
}

p{ margin:0 0 12px; }
p:last-child{ margin-bottom:0; }

ul, ol{ margin:0 0 14px; padding-left:22px; }
li{ margin-bottom:7px; }
li:last-child{ margin-bottom:0; }
li::marker{ color:var(--accent); }

strong, b{ color:var(--text); font-weight:700; }

a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
}
a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:3px;
}

/* Les tableaux portent l'essentiel de la politique de confidentialité
   (finalités, bases légales, durées). Ils doivent rester lisibles sur un
   téléphone, d'où le conteneur défilant plutôt qu'un texte comprimé. */
.scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:14px 0;
  border:1px solid var(--line);
  border-radius:14px;
}
table{
  border-collapse:collapse;
  width:100%;
  font-size:14.5px;
  margin:0;
}
.scroll table{ min-width:520px; }
th, td{
  border-bottom:1px solid var(--line-soft);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}
th{
  background:var(--accent-soft);
  color:var(--text);
  font-weight:800;
  font-size:13.5px;
  letter-spacing:.01em;
  border-bottom:1px solid var(--line);
}
tr:last-child td{ border-bottom:0; }

code{
  background:var(--accent-soft);
  color:var(--text);
  padding:2px 6px;
  border-radius:6px;
  font-family:ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size:.9em;
}

footer{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:14px;
  display:flex;flex-wrap:wrap;gap:6px 14px;
  align-items:center;
}
footer a{ color:var(--muted); }
footer a:hover{ color:var(--accent); }

@media (max-width:600px){
  main, .contenu{
    padding:20px 17px 24px;
    border-radius:16px;
  }
  .wrap{ padding:22px 14px 44px; }
}

/* Sur un telephone, un tableau a trois colonnes ne tient pas dans la carte. Il
   defile donc horizontalement, et deux details rendent ce defilement evident
   au lieu de laisser croire a un texte tronque : une ombre portee sur le bord
   droit tant qu'il reste quelque chose a voir, et une largeur minimale calee
   sur la lisibilite plutot que sur le contenu. */
@media (max-width:600px){
  table{ font-size:13.5px; }
  .scroll table{ min-width:440px; }
  th, td{ padding:9px 10px; }
  .scroll{
    background:
      linear-gradient(90deg, var(--card) 30%, transparent) left / 24px 100% no-repeat,
      linear-gradient(-90deg, var(--card) 30%, transparent) right / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(6,40,59,.14), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(6,40,59,.14), transparent) right / 12px 100% no-repeat;
    background-attachment:local, local, scroll, scroll;
  }
}