/* ==========================================================================
   SONGYAM — feuille de style partagee des pages statiques
   ==========================================================================

   Aucune dependance, aucun CDN. Ces pages sont servies par notre propre Nginx
   et doivent fonctionner sur une connexion lente, depuis un telephone.

   ⚠ Les deux pages qui comptent le plus (reinitialisation, invitation)
   s'adressent a quelqu'un qui NE PEUT DEJA PLUS SE CONNECTER. Tout ce qui
   pourrait echouer silencieusement est proscrit : pas de police distante, pas
   de script tiers, pas d'animation qui masque un etat.
   ========================================================================== */

:root {
    --encre:        #1a1a1a;
    --encre-douce:  #55595e;
    --fond:         #ffffff;
    --fond-doux:    #f6f6f4;
    --bordure:      #dcdcd6;
    /* ----------------------------------------------------------------------
       ⚠ L'ACCENT EST L'INDIGO DE LA CHARTE — RELEVE, PAS CHOISI.

       Son porteur est « frontend/lib/theme.dart », qui le tient de la maquette,
       et « ChartePubliqueTest » confronte cette valeur a la sienne : la changer
       ici sans la changer la-bas fait echouer la campagne.

       ⚠ Il a valu #0b6b3a — un VERT — jusqu'au 21/09/2026. La charte dit que
       l'indigo est le produit et que le vert est un ETAT : « l'agent a agi
       seul ». Un commercant qui ouvre le lien de reinitialisation recu par
       e-mail traversait donc deux identites visuelles dans le meme parcours.
       ---------------------------------------------------------------------- */
    --accent:       #2E3A87;
    /* ⚠ DERIVE, et non releve : la charte ne porte aucun indigo sombre. Cette
       valeur n'a donc pas de porteur, et ChartePubliqueTest ne la verifie pas.
       Elle ne sert qu'au survol d'un bouton. */
    --accent-fonce: #232C68;
    --erreur:       #a8261c;
    --erreur-fond:  #fdf1f0;
    --succes:       #0b6b3a;
    --succes-fond:  #eef7f1;
    --attention:    #8a5a00;
    --attention-fond: #fdf6e7;
}

/* ============================================================================
   Les polices de la maquette, EMBARQUEES — Sora pour les titres, Inter pour le texte.
   ⚠ Jamais chez Google (decide le 25/09/2026) : pas de changement brutal de police sur
   une connexion lente, aucune dependance a un tiers pour afficher du texte, aucune
   adresse IP transmise. Fichiers fabriques par scripts/generer-polices.py.

   ⚠ font-display: optional, et c'est la premiere raison de la decision : le navigateur
   n'emploie la police que si elle arrive tout de suite. Sinon il garde la police du
   systeme POUR TOUTE LA PAGE — jamais de bascule sous les yeux du lecteur —, et la
   police, mise en cache, sert a la page suivante. « swap » ferait exactement la bascule
   qu'on refuse ; « block » cacherait le texte.

   ⚠ Sora n'a pas ɛ ɔ ʋ ɩ : Inter la suit TOUJOURS dans la pile des titres, et le
   navigateur complete glyphe par glyphe.
   ============================================================================ */
@font-face {
    font-family: "Inter";
    src: url("/polices/Inter.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: optional;
}
@font-face {
    font-family: "Sora";
    src: url("/polices/Sora.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: optional;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--encre);
    background: var(--fond-doux);
}

h1, h2 {
    font-family: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.bandeau {
    background: var(--fond);
    border-bottom: 1px solid var(--bordure);
    padding: 14px 20px;
}

.bandeau .marque {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent);
    text-decoration: none;
    font-size: 18px;
}

main {
    max-width: 640px;
    margin: 0 auto;
    padding: 28px 20px 64px;
}

main.large { max-width: 820px; }

h1 {
    font-size: 26px;
    line-height: 1.25;
    margin: 8px 0 6px;
}

h2 {
    font-size: 20px;
    margin: 32px 0 8px;
    padding-top: 4px;
}

h3 { font-size: 17px; margin: 22px 0 6px; }

.sous-titre {
    color: var(--encre-douce);
    margin: 0 0 26px;
}

.carte {
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 22px;
}

label {
    display: block;
    font-weight: 600;
    margin: 18px 0 6px;
}

.aide {
    font-weight: 400;
    font-size: 14px;
    color: var(--encre-douce);
    display: block;
    margin-top: 2px;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 11px 12px;
    font-size: 17px;
    font-family: inherit;
    color: var(--encre);
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: 7px;
}

input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

button {
    margin-top: 24px;
    width: 100%;
    padding: 13px 16px;
    font-size: 17px;
    font-family: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

button:hover:not(:disabled) { background: var(--accent-fonce); }

/* Un lien qui mene a une action — l'apparence d'un bouton, la semantique d'un lien. */
a.bouton {
    display: inline-block;
    padding: 12px 18px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border-radius: 7px;
    text-decoration: none;
}

a.bouton:hover { background: var(--accent-fonce); }

button:disabled {
    background: var(--encre-douce);
    cursor: progress;
}

/* --------------------------------------------------------------------------
   Les messages.

   ⚠ « role=alert » n'est pas decoratif : sans lui, un lecteur d'ecran
   n'annonce pas l'apparition du message, et la page reste muette pour la
   personne qui en a le plus besoin.
   -------------------------------------------------------------------------- */
.message {
    margin: 22px 0 0;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid;
}

.message p { margin: 0; }
.message p + p { margin-top: 8px; }
.message .detail { font-size: 15px; color: var(--encre-douce); }

.message.erreur    { border-color: #e6b8b4; background: var(--erreur-fond);    color: var(--erreur); }
.message.succes    { border-color: #b6dcc4; background: var(--succes-fond);    color: var(--succes); }
.message.attention { border-color: #e8d3a0; background: var(--attention-fond); color: var(--attention); }

.message.erreur .detail,
.message.succes .detail,
.message.attention .detail { color: inherit; opacity: 0.85; }

.pied {
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid var(--bordure);
    font-size: 14px;
    color: var(--encre-douce);
}

.pied a { color: var(--encre-douce); }

a { color: var(--accent); }

table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 15px;
}

th, td {
    border: 1px solid var(--bordure);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

th { background: var(--fond-doux); font-weight: 600; }

.table-defilante { overflow-x: auto; }

ul { padding-left: 22px; }
li { margin: 4px 0; }

.note {
    background: var(--fond);
    border-left: 3px solid var(--bordure);
    padding: 10px 14px;
    margin: 16px 0;
    font-size: 15px;
    color: var(--encre-douce);
}

@media (max-width: 520px) {
    body { font-size: 16px; }
    h1 { font-size: 22px; }
    main { padding: 22px 16px 48px; }
    .carte { padding: 18px 16px; }
}