/* Feuille commune aux quatre documents légaux d'Echo.
 *
 * ── Pourquoi un fichier partagé plutôt qu'un <style> par page ───────────────
 *
 * Ces quatre pages ont vécu avec quatre copies du même CSS, déjà divergentes :
 * `privacy.html` avait des couleurs que `mentions.html` n'avait pas. Quatre
 * copies d'une charte, c'est trois occasions d'en oublier une. Une requête de
 * plus est le prix, et elle est mise en cache pour les quatre pages.
 *
 * ── Pourquoi les polices sont hébergées ici ─────────────────────────────────
 *
 * ⚠️ NE PAS les remettre sur Google Fonts. L'audit RGPD relève en finding
 * **RGPD-004** (Élevée) que `google_fonts` transmet l'IP de l'utilisateur à
 * Google avant toute interaction. Le rejouer ici serait particulièrement mal
 * choisi : la page qui décrit le traitement des données ne peut pas en déclencher
 * un, non annoncé, à son propre chargement. Fraunces et Source Serif 4 sont sous
 * licence OFL, qui autorise la redistribution — les fichiers sont dans
 * `public/fonts/`, sous-ensemble latin, en variable.
 *
 * Conséquence à préserver : ces pages ne font **aucune requête vers un tiers**.
 * C'est vrai aussi de `moderation_captcha.html` par exception assumée, mais
 * celui-là n'est pas un document légal et n'est pas servi à un utilisateur.
 *
 * ── La charte, et d'où elle vient ──────────────────────────────────────────
 *
 * Reprise de `lib/components/styles/app_colors.dart` et
 * `app_text_styles.dart`, valeur par valeur, pour qu'un utilisateur qui ouvre
 * les CGU depuis les réglages ne change pas d'univers. Les deux voix de l'app
 * sont conservées telles quelles :
 *
 *   Fraunces        — serif éditorial, la voix des TITRES
 *   Source Serif 4  — serif de lecture, la voix du TEXTE
 *
 * Ces pages sont lues dans une WebView à l'intérieur de l'app, et l'app est
 * volontairement en thème clair uniquement (cf. le commentaire `theme: 'light'`
 * de `turnstile.html`). Donc pas de `prefers-color-scheme` : un document légal
 * qui s'assombrit alors que l'écran qui l'ouvre reste clair se lit comme un bug.
 */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700; /* variable : une seule ressource pour toutes les graisses */
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/source-serif-4-latin.woff2') format('woff2');
}

:root {
  /* app_colors.dart, valeurs exactes */
  --ink: #000000;              /* cardTitle */
  --ink-soft: #616161;         /* cardSubtitle — grey.shade700, ~5.7:1 sur blanc */
  --page: #fafafa;             /* screenBackgroud — grey[50] */
  --card: #ffffff;             /* cardBackground */
  --accent: #673ab7;           /* mainColor — deepPurple */
  --accent-dark: #311b92;      /* mainColorDark — deepPurple[900] */
  --accent-pale: #ede7f6;      /* mainColorShade — deepPurple[50] */
  --rule: #eeeeee;
  --title: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--body);
  /* 17px et non 16 : ces pages se lisent surtout dans une WebView de téléphone,
   * et la police est un serif de lecture, plus étroit qu'un sans-serif. */
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--page);
  margin: 0;
  padding: 20px;
  -webkit-text-size-adjust: 100%;
}

.container {
  background: var(--card);
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 28px 40px;
  border-radius: 12px;
  border: 1px solid var(--rule);
}

h1, h2, h3 { font-family: var(--title); color: var(--ink); }

h1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

/* Le trait sous le titre reprend l'accent de l'app : c'est la seule touche de
 * couleur de la page, et elle suffit à la rattacher à Echo. */
h1 + .effective,
h1 + p {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0 0 28px;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--accent);
}

h2 {
  font-size: 21px;
  font-weight: 600;
  margin: 36px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }

p, li { font-size: 17px; }
p { margin: 0 0 14px; }

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 7px; }

strong { font-weight: 600; }

a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

/* `code` sert dans ces pages à nommer des champs techniques (`photos`,
 * `voice_url`, `location`). Volontairement discret : c'est une précision, pas
 * l'objet du paragraphe. */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--accent-pale);
  color: var(--accent-dark);
  padding: 1px 5px;
  border-radius: 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 15.5px;
}
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--title); font-weight: 600; font-size: 14px; color: var(--ink-soft); }

/* Les tableaux de ces documents (sous-traitants, durées de conservation) sont
 * larges. Ils défilent dans leur propre boîte plutôt que d'élargir la page :
 * sur un téléphone, un corps de page qui défile horizontalement rend le texte
 * illisible partout ailleurs. */
.tablewrap, .table-responsive { overflow-x: auto; margin: 0 0 20px; }
.tablewrap table, .table-responsive table { margin: 0; }

/* `.var-desc` : une puce de description à l'intérieur d'une cellule de tableau,
 * utilisée 31 fois dans privacy.html pour énumérer les champs d'un traitement.
 * Nom conservé tel quel plutôt que renommé — le renommer aurait demandé 31
 * modifications dans un document légal pour un gain nul. */
.var-desc { display: block; margin-bottom: 5px; }
.var-desc:last-child { margin-bottom: 0; }

/* Encadré d'avertissement, pour les points qu'un lecteur ne doit pas manquer. */
.note {
  background: var(--accent-pale);
  border-left: 4px solid var(--accent);
  padding: 14px 16px;
  border-radius: 0 8px 8px 0;
  margin: 0 0 20px;
}
.note p:last-child { margin-bottom: 0; }

footer {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 14.5px;
}

/* ── Pages d'accueil et d'erreur ───────────────────────────────────────────
 *
 * `index.html` et `404.html` ne sont pas des documents légaux, mais elles sont
 * servies par le même hôte et vues par les mêmes personnes — un utilisateur qui
 * suit un lien depuis le Play Store, ou le relecteur d'un fournisseur. Les
 * laisser dans un autre style aurait été le seul endroit où le domaine ne
 * ressemble pas à l'application. */

.centered { text-align: center; }

/* La page 404 est centrée dans la FENÊTRE, pas seulement dans sa carte.
 *
 * `body.error-page` plutôt qu'une règle sur `.container` : c'est le corps qui
 * doit occuper la hauteur pour que le centrage vertical ait un sens. `min-height`
 * et non `height`, sinon un écran très court rognerait la carte au lieu de la
 * laisser défiler. */
body.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.error-page .container { width: 100%; padding: 44px 28px 40px; }

/* Le grand nombre de la page 404. Fraunces à cette taille est ce qui rend la
 * page reconnaissable d'un coup d'œil, sans y écrire un logo.
 *
 * `clamp` et non une taille fixe : 84px était trop petit pour « un gros 404 au
 * milieu » sur un écran large, et une valeur fixe assez grande pour le bureau
 * déborderait sur un téléphone. Les trois bornes sont donc min / idéal / max —
 * 76px au plus étroit, 15 % de la largeur de fenêtre entre les deux, 160px au
 * plus large. */
.bignum {
  font-family: var(--title);
  font-size: clamp(76px, 15vw, 160px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--accent);
  margin: 0 0 4px;
}

/* Le sous-titre de la 404 : pas de trait sous le titre ici — le grand nombre
 * porte déjà la couleur, et deux accents empilés se disputeraient l'attention. */
.bignum + h2 {
  border-bottom: none;
  margin: 0 0 22px;
  padding-bottom: 0;
  font-size: 24px;
}

/* Liste de liens sans puces, centrée en bloc mais alignée à gauche à
 * l'intérieur : centrer aussi le texte rendrait les intitulés flottants. */
.links-list {
  list-style: none;
  padding: 0;
  margin: 28px 0;
  display: inline-block;
  text-align: left;
}
.links-list li { margin-bottom: 13px; }
.links-list a { font-weight: 600; }

/* La phrase d'accroche de la page d'accueil : centrée, en gris de sous-titre,
 * et sans le trait d'accent que `h1 + p` poserait — la page d'accueil n'a pas de
 * date d'entrée en vigueur à séparer du titre. */
.tagline {
  text-align: center;
  color: var(--ink-soft);
  font-size: 18px;
  margin: 0 0 30px;
  border-bottom: none;
  padding-bottom: 0;
}

/* Les quatre liens de la page d'accueil : UNE TUILE PAR LIGNE.
 *
 * La première version les mettait en rangée (`flex: 1 1 210px`), et c'était un
 * mauvais choix pour deux raisons vues à l'écran : au-delà de deux tuiles la
 * rangée se casse en un pavé irrégulier, et surtout ces quatre intitulés sont
 * longs et inégaux — « Politique de confidentialité » contre « Mentions
 * légales » — donc côte à côte ils se lisaient comme une phrase et non comme un
 * menu. Empilés, chacun est une cible franche, alignée à gauche comme le reste
 * du texte de la page. */
.links { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.links a {
  display: block;
  padding: 15px 18px;
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: 8px;
  /* Le chevron dit « ça mène ailleurs » sans ajouter de mot, et il est en
   * pseudo-élément pour ne pas se retrouver dans le texte copié. */
  position: relative;
  padding-right: 40px;
}
.links a::after {
  content: '→';
  position: absolute;
  right: 18px;
  color: var(--ink-soft);
}
.links a:hover {
  background: var(--accent-pale);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.links a:hover::after { color: var(--accent); }

.container > footer:last-child { text-align: center; }

/* Pas de surcharge de `.bignum` en petit écran : le `clamp` ci-dessus s'en
 * charge déjà, et une media query par-dessus se battrait avec lui. */

@media (max-width: 600px) {
  body { padding: 12px; }
  .container { padding: 24px 18px 32px; border-radius: 10px; }
  h1 { font-size: 26px; }
  h2 { font-size: 19px; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * SÉLECTEUR DE LANGUE — 21 août 2026, mécanique revue le 22
 *
 * Un seul fichier par document, deux blocs de langue, un seul visible. En CSS
 * pur, sans une ligne de JavaScript : `public/` n'a aucune étape de build, et
 * une bascule qui dépendrait de JS tomberait dans une WebView qui le refuse.
 *
 * Le français est la version qui fait foi (clause de prévalence dans chaque
 * document, alignée sur le CGU §8 : droit français, juridiction française).
 * C'est pourquoi il est l'état PAR DÉFAUT et le premier dans le DOM : une URL
 * nue rend le texte qui gouverne. `#en` est un choix explicite.
 *
 * ⚠️ Ce qui a changé le 22 août, et qu'il ne faut pas défaire. La première
 * version portait l'id sur la <section> elle-même et cachait le français par
 * `#en:target ~ #fr`, un sélecteur de frère SUIVANT — ce qui obligeait à placer
 * l'anglais AVANT le français dans le DOM. Deux défauts, dont un visible :
 * l'ordre était contre-intuitif et se « corrigeait » tout seul au premier
 * relecteur, et surtout `:target` faisait DÉFILER la page jusqu'à la section,
 * donc le sélecteur de langue sortait de l'écran à chaque clic. Porter l'id sur
 * une ancre vide placée avant `.container` règle les deux : le sélecteur devient
 * un descendant (`#en:target ~ .container .lang-en`), l'ordre des deux sections
 * cesse d'être porteur, et cibler l'ancre revient à défiler jusqu'au haut du
 * document.
 * ───────────────────────────────────────────────────────────────────────── */

.langswitch {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 0 0 20px;
}

.langswitch a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid rgba(127, 127, 127, 0.35);
  border-radius: 999px;
  text-decoration: none;
}

/* ⚠️ PAS D'INDICATEUR D'ONGLET ACTIF, et ce n'est pas un oubli. Le styler
 * demanderait un sélecteur de frère depuis l'ancre, donc que la bascule suive
 * l'ancre dans le DOM — faisable, mais `.container` s'interpose. L'autre issue
 * était de passer `.container` en `display:flex` pour réordonner avec `order:`,
 * écartée parce que ça change la fusion des marges sur les huit pages d'un coup,
 * pour un liseré. La langue affichée se lit dans le texte ; les deux libellés
 * sont écrits en clair (« Français », « English ») pour que la bascule reste
 * évidente sans état. */

/* ⚠️ L'ANCRE EST UN ÉLÉMENT VIDE EN HAUT DU BODY, ET C'EST TOUT L'OBJET DE
 * CETTE FORME — corrigé le 22 août 2026.
 *
 * `:target` fait défiler le navigateur jusqu'à l'élément ciblé. Quand l'id
 * vivait sur la <section> elle-même, cliquer sur « English » faisait donc
 * descendre la page : la section commençant SOUS le sélecteur de langue, celui-ci
 * sortait de l'écran, avec le haut de la carte. Constaté en captures d'écran, pas
 * déduit.
 *
 * L'id est désormais porté par une ancre vide placée AVANT `.container`, d'où
 * `#en:target ~ .container .lang-en` — l'ancre est frère du conteneur, la
 * section en est descendante. Cibler cette ancre revient à défiler jusqu'au
 * haut du document : aucun mouvement visible quand on y est déjà.
 *
 * Deux propriétés font le travail, et retirer l'une des deux ramène le défaut :
 *
 *   - `position: absolute` la sort du flux. Indispensable et non cosmétique :
 *     `body.error-page` (la 404) est en `display:flex`, où deux <span> en tête
 *     deviendraient des éléments flex posés À CÔTÉ de la carte et la
 *     décaleraient horizontalement.
 *   - `scroll-margin-top: 100vh` force le clamp. Sans elle il resterait le saut
 *     du padding du body (~40 px) : le navigateur viserait `offsetTop`, qui n'est
 *     pas zéro. Avec elle la cible calculée est négative, donc bornée à 0. */
.langtarget {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  scroll-margin-top: 100vh;
}

/* La bascule. L'anglais caché par défaut, révélé quand son ancre est ciblée ; le
 * français s'efface alors. Les deux sections sont descendantes du même
 * `.container`, qui suit l'ancre. */
.lang-en { display: none; }
#en:target ~ .container .lang-en { display: block; }
#en:target ~ .container .lang-fr { display: none; }

/* La clause de prévalence : présente dans les deux langues, discrète, et
 * jamais cachée par la bascule puisqu'elle vit hors des deux blocs. */
.prevalence {
  font-size: 13px;
  opacity: 0.72;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
  margin-top: 32px;
  padding-top: 14px;
}