/* ═══════════════════════════════════════════════════════════════════════════
   LA DA DE SELIIA, EN UN SEUL ENDROIT.

   Ce fichier est LE point de vérité des pages web hors application : la
   confidentialité, les conditions, les mentions légales. Le jour où la DA
   change, on change CE fichier, et les trois pages suivent. Rien à rouvrir,
   rien à oublier.

   ── D'OÙ VIENNENT CES VALEURS ──

   Elles sont recopiées de `SeliiaSwift/Seliia.swiftpm/DesignSystem/Theme.swift`,
   à l'octet près, et portent les MÊMES NOMS. `--rose` ici, c'est `DA.rose`
   là-bas. Un écart entre les deux se voit tout de suite, et se corrige en
   comparant deux lignes au lieu de fouiller trois fichiers HTML.

   Quand la DA bouge, l'ordre est : Theme.swift d'abord (c'est l'app qui
   commande), puis ce fichier, en recopiant.

   ── LA TYPOGRAPHIE ──

   Poppins, comme l'app. Ces pages étaient en Archivo : une police que Seliia
   n'utilise nulle part ailleurs, sur les trois seules pages qu'un étudiant
   lit AVANT de donner accès à ses mails. Ce n'est pas le moment de ne pas se
   reconnaître.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* les encres, du plus appuyé au plus discret (Theme.swift, DA.encre…) */
  --encre:        #17171B;
  --encre-2:      #1E1E24;
  --gris-encre:   #5A5A63;
  --gris-fort:    #6A6A75;
  --gris:         #9B9BA3;
  --gris-clair:   #C0C0C8;

  /* les fonds */
  --fond-haut:    #FFFFFF;
  --fond-bas:     #FDF3F8;
  --surface:      #FFFFFF;
  --trait:        #F2E3EC;

  /* la marque */
  --rose:         #E8447F;
  --rose-clair:   #F4699B;
  --magenta:      #C42B8A;
  --violet:       #B466E4;
  --peche:        #F58F6C;
  --rose-teinte:  #FDF0F6;

  /* la mascotte, costume Jade : celui que tout le monde a au départ */
  --seli-haut:    #ABF9CB;
  --seli-milieu:  #5DC291;
  --seli-bas:     #008B5C;

  --rayon:        20px;
  --texte: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           Helvetica, Arial, sans-serif;
}

/* LE SOMBRE N'INVERSE PAS, IL TRANSPOSE. Un simple négatif donnerait un rose
   fluorescent illisible sur noir : la marque monte en clarté pendant que les
   fonds descendent, et le contraste reste tenu des deux côtés. */
@media (prefers-color-scheme: dark) {
  :root {
    --encre:      #F7F1F4;
    --encre-2:    #EDE4E9;
    --gris-encre: #C3B7BE;
    --gris-fort:  #A8999F;
    --gris:       #8E8189;
    --gris-clair: #6B6067;

    --fond-haut:  #171316;
    --fond-bas:   #100D10;
    --surface:    #1F1A1E;
    --trait:      #322A30;

    --rose:       #FF77A8;
    --rose-clair: #FF9CBF;
    --magenta:    #E86BB6;
    --violet:     #C89BF0;
    --rose-teinte:#2A1E26;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--encre);
  background: radial-gradient(120% 70% at 50% -10%,
              var(--fond-haut) 0%, var(--fond-bas) 100%) fixed;
  font-family: var(--texte);
  font-size: 15.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 48px 22px 96px; }

/* ── L'EN-TÊTE ── */

header { border-bottom: 1px solid var(--trait); padding-bottom: 26px; margin-bottom: 34px; }

.marque {
  display: inline-flex; align-items: center; gap: 11px;
  font-weight: 700; font-size: 17px; letter-spacing: -.02em;
  color: var(--encre); text-decoration: none;
}
.marque:hover { color: var(--rose); }

/* SELI A UN VISAGE. Une bille nue est une pastille de couleur ; deux yeux et
   une bouche, c'est quelqu'un. C'est la règle de la marque, elle vaut ici
   comme dans l'app. */
.seli { width: 27px; height: 27px; flex: none; }

h1 {
  font-size: 33px; line-height: 1.15; letter-spacing: -.03em;
  margin: 22px 0 6px; font-weight: 700; text-wrap: balance;
}
.date { color: var(--gris); font-size: 13px; margin: 0; }

/* ── LE CORPS ── */

h2 {
  font-size: 19px; letter-spacing: -.02em; font-weight: 700;
  margin: 40px 0 10px; text-wrap: balance;
}
h3 { font-size: 15.5px; font-weight: 600; margin: 26px 0 6px; }
p, li { color: var(--gris-encre); }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 20px; }
li { margin-bottom: 7px; }
strong { color: var(--encre); font-weight: 600; }

a { color: var(--rose); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: currentColor; }
a:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 3px; }

/* ── LES TABLEAUX ──
   Ils débordent sur un iPhone : ils défilent DANS leur cadre, pour que la
   page, elle, ne parte jamais de travers. */

.cadre { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
table {
  border-collapse: collapse; width: 100%; min-width: 460px;
  font-size: 13.5px; background: var(--surface);
  border-radius: var(--rayon); overflow: hidden;
  box-shadow: 0 1px 3px rgba(23,23,27,.05);
}
th, td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait); }
th {
  background: var(--rose-teinte); color: var(--magenta);
  font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
}
tr:last-child td { border-bottom: 0; }
td { color: var(--gris-encre); }

/* ── LES ENCADRÉS ── */

.note {
  background: var(--rose-teinte);
  border-left: 3px solid var(--rose);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 15px 18px; margin: 0 0 22px;
}
.note p:last-child { margin-bottom: 0; }

/* ── LE PIED ── */

footer {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--trait);
  color: var(--gris); font-size: 13px;
}
footer a { color: var(--gris-fort); }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 12px; }

@media (max-width: 520px) {
  .wrap { padding: 34px 18px 72px; }
  h1 { font-size: 27px; }
  h2 { font-size: 17.5px; }
}