/* Pluka : pages publiques.  Lot 4 de la refonte.
 *
 * A DEPOSER : app/static/css/public.css
 *
 * COMMENT L'UTILISER : dans chacune des CINQ pages concernees, remplacer le
 * bloc <style> ... </style> et le <link> de police par ces deux lignes :
 *
 *   <link rel="stylesheet" href="/static/fonts/polices.css">
 *   <link rel="stylesheet" href="/static/css/public.css">
 *
 *   app/templates/login.html          app/templates/cgv.html
 *   app/templates/motdepasse.html     app/templates/confidentialite.html
 *   app/templates/cookies.html
 *
 * AIDE.HTML EST EXCLUE, ET CE N'EST PAS UN OUBLI
 * -----------------------------------------------
 * Trois raisons, chacune suffisante :
 *
 * 1. La regle body[data-aide="user"] .part-diet{display:none} vit dans son
 *    <style>. Sans elle, la partie reservee aux dieteticiennes s'afficherait a
 *    TOUTES les clientes. Ce n'est pas un probleme de style.
 * 2. Le PDF du guide est rendu par Gotenberg, a qui html_vers_pdf() envoie le
 *    HTML en piece jointe nommee index.html, avec les seuls fichiers
 *    explicitement attaches. Un <link href="/static/css/..."> s'y resout en
 *    file:///static/,
 *    donc 404 : le manuel sortirait entierement sans style.
 * 3. Ses 28 lignes de @media print reglent tout le rythme vertical du manuel,
 *    et ce fichier n'en porte aucune.
 *
 * Sur les 56 selecteurs de son <style>, 24 n'ont pas d'equivalent ici.
 *
 * CE QUI NE CHANGE PAS : aucun HTML, aucun script, aucune cle de traduction.
 *
 * ROLLBACK : remettre le bloc <style> d'origine dans la page concernee. Les
 * cinq pages sont independantes les unes des autres.
 */

:root{
  --bg:#F6F1EE; --bg2:#fff; --bg3:#EDE3DE;
  --border:#E3D8D2; --border2:#D3C4BC;
  /* Meme valeur que `socle.css` depuis B97 : voir sa note. */
  --txt:#31374D; --txt2:#636676; --txt3:#6E645E;
  --accent:#31374D; --accent-dark:#252A3C;
  --accent-warm:#70482E; --accent-warm-2:#AB8B74;
  --ok:#3D5A3F; --warn:#7A5320; --danger:#8C3A32;
  --soft-amber:#F5E7DA; --soft-red:#F6E2DF;
  --radius:26px; --radius-sm:18px; --pill:999px;
  --ombre:0 10px 30px rgba(49,55,77,.10);
  --ombre-forte:0 18px 48px rgba(49,55,77,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
/* CE QUE LE GABARIT CACHE RESTE CACHE - B129, 16 septembre, vu a l'oeil sur
   une capture. L'attribut vient de la feuille du NAVIGATEUR, avec la plus
   faible priorite qui soit : n'importe quelle regle d'ici qui pose un mode
   d'affichage le bat, sans erreur ni trace. La jauge de robustesse du mot de
   passe s'affichait ainsi sous un champ vide, barre pleine et verte, alors
   que le gabarit la declare cachee.

   ON VISE LA CLASSE, PAS CE CAS. Ce depot a paye le meme piege six fois, et
   la parade est restee locale chaque fois : une regle par element cache, a
   ecrire de nouveau au suivant. Celle-ci vaut pour tous, et le prochain
   element cache d'une page publique naitra protege. */
[hidden]{display:none !important}
/* CE QUE LE GABARIT CACHE RESTE CACHE - B129, 16 septembre, vu a l'oeil sur
   une capture. L'attribut vient de la feuille du NAVIGATEUR, avec la plus
   faible priorite qui soit : n'importe quelle regle d'ici qui pose un mode
   d'affichage le bat, sans erreur ni trace. La jauge de robustesse du mot de
   passe s'affichait ainsi sous un champ vide, barre pleine et verte, alors
   que le gabarit la declare cachee.

   ON VISE LA CLASSE, PAS CE CAS. Ce depot a paye le meme piege six fois, et
   la parade est restee locale chaque fois : une regle par element cache, a
   ecrire de nouveau au suivant. Celle-ci vaut pour tous, et le prochain
   element cache d'une page publique naitra protege. */
/* LA PAGE N'A PAS DE HAUTEUR FIXE, ET C'EST TOUT LE SUJET DE B129. Une
   hauteur egale a celle de l'ecran ne grandit pas avec son contenu : une
   carte plus haute que lui debordait des DEUX cotes du centrage, et ce qui
   depassait EN HAUT ne se rattrapait par aucun geste - on ne defile pas
   au-dessus de l'origine. Les deux formes de page posent desormais une
   hauteur MINIMALE, chacune dans sa regle. */
body{font-family:Figtree,system-ui,sans-serif;background:var(--bg);color:var(--txt);
  line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Caprasimo,Georgia,serif;font-weight:400;letter-spacing:0}
a{color:var(--accent-warm)}
a:hover{color:var(--accent-dark)}
*:focus-visible{outline:2px solid var(--accent-warm);outline-offset:2px}
::selection{background:var(--bg3)}
.wrap{max-width:820px;margin:0 auto;padding:0 24px}

/* ── entete commune (aide, cgv, confidentialite, cookies) ───────────── */
header{background:var(--bg);border-bottom:1px solid var(--border)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:15px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo img,.logo svg{width:36px;height:36px;border-radius:12px;display:block}
.logo span{font-family:Caprasimo,Georgia,serif;font-size:21px;color:var(--txt)}
.retour{color:var(--txt2);text-decoration:none;font-size:14px;font-weight:500}
.retour:hover{color:var(--accent-dark)}
/* sous la boite de connexion, le meme lien est centre et decolle du bouton */
.box .retour{display:block;text-align:center;margin-top:18px}
main{padding:46px 0 64px}

/* ── titres et corps de texte ───────────────────────────────────────── */
h1{font-size:36px;line-height:1.14;margin-bottom:8px}
.maj{font-size:13px;color:var(--txt3);margin-bottom:28px}
h2.sec{font-family:Caprasimo,Georgia,serif;font-weight:400;font-size:24px;
  margin:38px 0 12px;color:var(--txt);padding-bottom:0;border-bottom:none}
h3{font-size:17px;margin:22px 0 7px}
p{font-size:15px;color:var(--txt2);margin-bottom:12px}
ul.p{margin:0 0 14px 20px;font-size:15px;color:var(--txt2)}
ul.p li{padding:3px 0}

/* le sommaire : sable, sans filet, colle en haut sur grand ecran */
.somm{background:var(--bg3);border:none;border-radius:var(--radius);
  padding:22px 26px;margin-bottom:34px}
.somm h2{font-family:Figtree,system-ui,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-warm);margin-bottom:12px}
.somm ol{margin-left:18px;font-size:14.5px}
.somm li{padding:3px 0}
.somm a{color:var(--txt2);text-decoration:none}
.somm a:hover{color:var(--accent-dark)}

/* les encarts : a plat, sans bordure, la couleur porte le sens */
.avis{border-radius:var(--radius-sm);padding:15px 18px;font-size:14px;margin-bottom:28px;
  display:flex;gap:11px;align-items:flex-start;border:none}
.avis svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;
  flex-shrink:0;margin-top:2px}
.avis-amber{background:var(--soft-amber);color:var(--warn)}
.avis-red{background:var(--soft-red);color:var(--danger)}
.astuce{display:flex;gap:11px;background:var(--bg3);border:none;border-radius:var(--radius-sm);
  padding:15px 18px}
.astuce svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;fill:none;
  stroke:var(--accent-warm);stroke-width:2.2}
.astuce span{font-size:14px;color:var(--accent-dark);line-height:1.65}
.attente{border:1.5px dashed var(--accent-warm-2);background:var(--bg3);
  border-radius:var(--radius-sm);color:var(--txt2)}

/* ── tableaux (cookies, tarifs) ─────────────────────────────────────── */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;
  margin:14px 0 20px;background:var(--bg2);border:none;border-radius:var(--radius-sm);
  overflow:hidden;box-shadow:0 1px 4px rgba(49,55,77,.06)}
th{background:var(--bg3);color:var(--accent-dark);text-align:left;padding:12px 14px;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
td{padding:12px 14px;border-top:1px solid var(--border);color:var(--txt2);vertical-align:top}

/* ── boutons et selecteurs (aide) ───────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:700;
  border-radius:var(--pill);padding:13px 24px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;font-family:inherit;transition:background .15s,color .15s}
.btn-p,.btn.primary{background:var(--accent);color:var(--bg)}
.btn-p:hover,.btn.primary:hover{background:var(--accent-dark)}
.btn-w{background:var(--accent-warm);color:var(--bg)}
.btn-w:hover{background:#5C3B25}
.btn-g,.btn.ghost{color:var(--txt);border-color:var(--border2)}
.btn-g:hover,.btn.ghost:hover{background:var(--bg3)}
.selecteur{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 6px}
.selecteur a,.selecteur button{border-radius:var(--pill);border:1px solid var(--border2);
  background:none;color:var(--txt2);font-size:13.5px;font-weight:600;padding:9px 17px;
  text-decoration:none;cursor:pointer;font-family:inherit}
.selecteur a:hover,.selecteur button:hover{background:var(--bg3);color:var(--accent-dark)}
.selecteur a.on,.selecteur button.on,
.selecteur a.actif,.selecteur button.actif{background:var(--accent-warm);
  border-color:var(--accent-warm);color:var(--bg)}

/* ── CONNEXION ET MOT DE PASSE ──────────────────────────────────────────
   Ces deux pages n'ont ni entete ni pied : une carte seule, centree. On les
   reconnait a la presence de .box.

   IMAGE OPTIONNELLE : deposer app/static/img/pluka-connexion.jpg (1600x900,
   moins de 300 ko) et redemarrer : elle apparait en fond, lavee sous un voile
   creme. En son absence, le fond reste crème uni et rien ne casse. */
/* LE PIED DESCEND JUSQU'EN BAS - B4, 2 septembre.
   Sur une page courte - Cookies en tete, mais aussi CGV, confidentialite et
   le guide - le pied remontait sous le contenu et laissait du fond nu
   dessous. Le defaut n'etait PAS celui d'une page : `public.css` n'avait
   aucune regle de pied collant, et les quatre pages a `<main>` en heritaient.

   `:not(:has(.box))` LAISSE LES PAGES CENTREES TRANQUILLES. Connexion, mot de
   passe, confirmation et desabonnement portent une `.box` que la regle
   suivante centre verticalement : leur imposer une colonne poussee vers le
   bas defairait ce centrage. Les deux formes se partagent le fichier sans se
   croiser.

   `100dvh` PLUTOT QUE `100vh` : sur telephone, `vh` compte la barre d'adresse
   comme si elle n'existait pas, et la page depasse d'autant. */
body:not(:has(.box)){min-height:100dvh;display:flex;flex-direction:column}
body:not(:has(.box)) > footer{margin-top:auto}

/* UNE HAUTEUR MINIMALE, ET NON UNE HAUTEUR TOUT COURT - B129, 16 septembre.
   Mesure sur un ecran de 667 px : le formulaire d'inscription fait 1 373 px,
   et 353 d'entre eux passaient au-dessus du bord superieur. Le logo, le titre
   et les premiers champs etaient hors d'atteinte, et la personne arrivait au
   milieu d'un formulaire qu'elle ne pouvait pas remonter. Avec un plancher la
   page grandit, l'espace libre devient nul, et le centrage cesse de lui-meme :
   il ne s'applique plus que lorsqu'il y a de la place.

   LES DEUX MOITIES SONT NECESSAIRES, et une mutation l'a montre : poser le
   plancher ici sans retirer la hauteur de la racine ne suffit pas, et retirer
   la racine seule laisserait ces pages sans hauteur de reference. */
body:has(.box){min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;
  position:relative;background:var(--bg) url("/static/img/pluka-connexion.jpg")
  center/cover no-repeat fixed}
body:has(.box)::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(246,241,238,.88),rgba(246,241,238,.95))}
.box{position:relative;background:var(--bg2);border:none;border-radius:32px;
  padding:34px 30px;width:100%;max-width:380px;box-shadow:var(--ombre-forte);
  margin:auto}
/* LE CHOIX DE LA LANGUE VIT AU-DESSUS DE LA CARTE, DANS LE FLUX - B130,
   16 septembre. Il etait pose dans un coin, hors du flux : sur telephone la
   carte s'etendait dessous et le recouvrait entierement. Mesure sur un ecran
   de 375 px : ce qui repondait au clic en son centre etait la carte. On ne
   pouvait donc plus lire l'inscription en neerlandais depuis un telephone,
   sur la page meme qui accueille les gens - et le neerlandais est la seconde
   langue du produit.

   IL SUIT LA LARGEUR DE LA CARTE PLUTOT QUE DE LA REDIRE : une carte large
   emporte son selecteur, et il n'y a pas deux valeurs a garder d'accord.

   `position:relative` LE FAIT PASSER AU-DESSUS DU VOILE, qui couvre tout le
   body : sans elle il serait lave dessous, lisible mais eteint. C'est la
   meme raison que pour la carte et pour le pied. */
.lang-haut{position:relative;width:100%;max-width:380px;
  display:flex;justify-content:flex-end;margin-bottom:6px}
body:has(.box-large) .lang-haut{max-width:520px}
/* AU DOIGT, UN LIEN DE TREIZE PIXELS N'EST PAS UNE CIBLE. Les styles du
   fragment sont poses en ligne et battent toute regle exterieure, mais ils ne
   disent rien de la taille : c'est la seule prise qui reste, et elle suffit. */
.lang-haut a,.lang-haut b{display:inline-flex;align-items:center;
  min-height:44px;padding:0 8px}
/* LES DEUX BLOCS SE CENTRENT ENSEMBLE, ET C'EST TOUT L'INTERET DE LA MARGE
   AUTOMATIQUE : elle consomme l'espace libre. Laissee de part et d'autre de
   la carte, elle repousserait le selecteur tout en haut de l'ecran, loin de
   ce qu'il commande. Le haut revient donc au selecteur, le bas a la carte, et
   les pages qui n'en ont pas gardent leur centrage intact. */
body:has(.lang-haut) .box{margin-top:0}
.lang-haut{margin-top:auto}
/* LE PIED D'UNE PAGE A BOITE. Le body est une colonne flex centree : sans
   ces trois declarations, la barre sombre se poserait A COTE du cadre, a sa
   largeur de contenu. Les marges negatives annulent le `padding:20px` du
   body pour qu'elle touche les bords, et `position:relative` la fait passer
   AU-DESSUS du voile `::before`, qui couvre tout le body. */
body:has(.box) footer{position:relative;align-self:stretch;
  margin:20px -20px -20px}
.box .logo{justify-content:center;margin-bottom:18px}
.box .logo img{width:52px;height:52px;border-radius:16px}
.box h1{font-size:26px;text-align:center;margin-bottom:5px}
.sub{text-align:center;color:var(--txt2);font-size:14px;margin-bottom:24px}
/* ============================================================
   FORMULAIRE D'INSCRIPTION (artboard 9b)
   `--txt2` et non `--txt3` : au lot 3.1a ce dernier donnait 2,35
   de contraste, un gris decoratif, illisible a cette taille.
   ============================================================ */
.aide{font-size:12.5px;line-height:1.5;color:var(--txt2);margin:7px 0 0}
.aide-ok{color:var(--ok);font-weight:600}
.aide-ko{color:var(--danger)}
/* la boite d'inscription est plus large : prenom et nom tiennent sur une
   ligne, et deux colonnes de 200 px ne rentrent pas dans 380 */
.box-large{max-width:520px}
.ins-entete{display:flex;flex-direction:column;align-items:center;
  text-align:center;margin-bottom:26px}
.ins-entete img{width:52px;height:52px;border-radius:16px;display:block}
.ins-entete h1{font-size:30px;line-height:1.1;margin:14px 0 0}
.ins-entete p{font-size:14.5px;line-height:1.6;color:var(--txt);
  margin:8px 0 0;max-width:420px}
/* CHAQUE CHAMP EST UN BLOC, et l'ecart vient du conteneur : les marges
   negatives que portait `.aide` faisaient chevaucher l'aide et le champ
   suivant. */
.ins-lignes{display:flex;flex-direction:column;gap:16px}
.ins-lignes label{margin:0 0 7px;color:var(--txt)}
.ins-lignes input[type=text],.ins-lignes input[type=email],
.ins-lignes input[type=password],.ins-lignes input[type=number]{
  border-color:var(--border);padding:13px 20px;font-size:14.5px}
.ins-lignes input.ok{border-color:var(--ok)}
.ins-lignes input.ko{border-color:var(--danger)}
.ins-duo{display:flex;gap:14px;flex-wrap:wrap}
.ins-duo > div{flex:1;min-width:200px}
.ins-sep{border-top:1px solid var(--border);padding-top:16px}
/* la jauge de robustesse : INDICATIVE. Le seul refus est celui du serveur. */
.ins-force{display:flex;align-items:center;gap:10px;margin-top:9px}
.ins-jauge{flex:1;height:5px;border-radius:var(--pill);background:var(--border);
  overflow:hidden}
.ins-jauge span{display:block;height:100%;border-radius:var(--pill);
  background:var(--ok);transition:width .15s}
.ins-force-mot{font-size:12px;font-weight:700;color:var(--ok);flex-shrink:0}
.ins-force[data-force="1"] .ins-jauge span,
.ins-force[data-force="1"] ~ .ins-force-mot{background:var(--accent-warm)}
.ins-force[data-force="1"] .ins-force-mot{color:var(--accent-warm)}
/* le nombre de personnes : des pilules, pas un champ nombre */
.ins-pills{display:flex;gap:8px;flex-wrap:wrap}
.ins-pill{width:auto;margin:0;font-size:14px;font-weight:600;color:var(--txt);
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--pill);
  padding:10px 20px}
.ins-pill:hover{background:var(--bg3)}
.ins-pill.on{background:var(--accent-warm);color:var(--bg);border-color:transparent;
  font-weight:700}
.ins-pill.on:hover{background:#5C3B25}
/* LES DEUX CASES SONT DES ENCADRES, et la seconde est distincte : la clause
   d'usage n'est pas une note de bas de formulaire mais un engagement. */
.ins-case{display:flex;gap:12px;align-items:flex-start;background:var(--bg3);
  border-radius:22px;padding:16px 18px;font-size:13.5px;line-height:1.6;
  color:var(--txt);cursor:pointer}
.ins-case input{width:auto;margin:2px 0 0;flex-shrink:0;accent-color:var(--accent)}
.ins-case a{color:var(--accent-warm);font-weight:600}
.ins-case-usage{background:#F5E7DA;color:#7A5320}
.ins-case-usage input{accent-color:#AB8B74}
/* `.ins-valider` NE PORTE PLUS DE COULEUR depuis le 2 septembre : la regle
   `button` est bleu nuit pour toutes les pages publiques, et repeter la
   couleur ici la ferait diverger au premier changement. Seule la HAUTEUR
   reste, propre a ce formulaire. */
.ins-valider{min-height:54px}
.ins-pied{text-align:center;font-size:13.5px;color:var(--txt);margin-top:16px}
.ins-pied a{color:var(--accent-warm);font-weight:600;text-decoration:none}
/* l'ecran de succes : il REMPLACE le formulaire */
.ins-rond{width:56px;height:56px;border-radius:50%;background:var(--bg3);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  color:var(--accent-warm)}
.ins-rond svg{width:26px;height:26px}
.ins-ok h2{font-family:Caprasimo,Georgia,serif;font-size:23px;line-height:1.15;
  color:var(--txt);text-align:center;margin:0 0 10px}
.ins-ok-texte{font-size:14.5px;line-height:1.65;color:var(--txt);text-align:center}
.ins-ok-aide{font-size:13px;line-height:1.6;color:var(--txt2);text-align:center;
  margin-top:8px}
.ins-ok-aide a{color:var(--accent-warm);font-weight:600;text-decoration:none}
label{display:block;font-size:12.5px;font-weight:600;color:var(--txt2);
  margin:16px 0 6px}
input{width:100%;background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--pill);padding:14px 18px;color:var(--txt);font-size:15px;
  font-family:inherit}
input:focus{outline:none;border-color:var(--accent-warm)}
textarea{border-radius:var(--radius-sm);border:1px solid var(--border2);font-family:inherit}
.pwd-wrap{position:relative}
.pwd-wrap input{padding-right:48px}
.pwd-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:auto;
  margin:0;background:none;border:none;padding:9px;cursor:pointer;color:var(--txt3);
  display:flex;align-items:center;justify-content:center;border-radius:50%}
.pwd-eye:hover{color:var(--txt2);background:var(--bg3)}
.pwd-eye.on{color:var(--accent-warm)}
.pwd-eye svg{width:19px;height:19px}
/* LE BOUTON PRINCIPAL DES PAGES PUBLIQUES EST BLEU NUIT - 2 septembre 2026.

   IL ETAIT BRUN, et la page d'inscription posait deja `.ins-valider` pour le
   passer au bleu chez elle seule ; son commentaire disait « unifier toucherait
   la page de connexion, que ce lot ne vise pas ». Cedric a tranche : partout.

   NEUF GABARITS SUIVENT CETTE REGLE - connexion, mot de passe, confirmation
   d'adresse, inscription, desabonnement et les pages legales. C'est le sujet
   de la demande, pas un effet de bord.

   LE BRUN RESTE SUR LES LIENS ET LES ACCENTS : `--accent-warm` continue de
   marquer les liens, les sur-titres et les pastilles. Ce qui change est le
   bouton d'action, qui devient le meme bleu que dans l'application. */
button{width:100%;margin-top:24px;background:var(--accent);color:var(--bg);
  border:none;border-radius:var(--pill);padding:15px;font-size:16px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:background .15s}
button:hover{background:var(--accent-dark);filter:none}
button:disabled{opacity:.45;cursor:not-allowed}
/* les messages de retour gardent leurs classes : le JS les pilote */
.err{background:var(--soft-red);border:none;color:var(--danger);
  border-radius:var(--radius-sm);padding:12px 16px;font-size:13.5px;margin-top:18px;
  display:none}
.err.show{display:block}
.msg{border-radius:var(--radius-sm);padding:12px 16px;font-size:13.5px;margin-top:18px;
  display:none}
/* CE QUE showMsg() POSE REELLEMENT, dans motdepasse.html :
     msg.className = "msg " + (ok ? "ok" : "err")
   donc les classes "ok" et "err", jamais "show" ni "ko". Avec les seules
   regles .msg.show / .msg.ok / .msg.ko, les DEUX messages de la page
   restaient en display:none : la personne qui definit son mot de passe ne
   savait pas si cela avait marche, et celle qui se trompait ne voyait rien.
   Les quatre classes affichent desormais. Corrige ici plutot que dans le JS :
   le lot ne modifie aucun script. */
/* `ok` et `err`, et RIEN D'AUTRE : ce sont les seules classes que showMsg()
   pose. Garder `show` et `ko` « au cas ou » etait du code defensif, c'est-a-dire
   une regle qui ne peut rien atteindre et qui fait croire qu'un cas est
   couvert. */
.msg.ok,.msg.err{display:block}
.msg.ok{background:var(--bg3);color:var(--ok)}
.msg.err{background:var(--soft-red);color:var(--danger)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(246,241,238,.35);
  border-top-color:var(--bg);border-radius:50%;animation:rot .7s linear infinite;
  vertical-align:-2px;margin-right:7px}
@keyframes rot{to{transform:rotate(360deg)}}

/* ── pied commun (_pied.html) ───────────────────────────────────────── */
footer{background:var(--accent-dark);color:#C3CBD9;padding:30px 0;font-size:13px;
  text-align:center}
footer a{color:#C3CBD9;text-decoration:none}
footer a:hover{color:var(--bg)}

@media(max-width:880px){
  h1{font-size:29px}
  h2.sec{font-size:21px}
  .somm{border-radius:var(--radius-sm);padding:18px 20px}
  main{padding:34px 0 48px}
}
@media(prefers-reduced-motion:reduce){
  .spin{animation-duration:2s}
}

/* ============================================================
   LE TEXTE COURANT EST JUSTIFIE (lot 14f)

   AVEC CESURES, TOUJOURS. Sans `hyphens`, le francais creuse des rivieres
   blanches : le mot moyen y est long, et une colonne etroite ne peut pas
   repartir l'espace autrement qu'en l'etirant. C'est la regle que la vitrine
   pose deja sur son chapeau depuis sa refonte, et qui vaut ici.

   `lang` est pose sur `<html>` par `rendre_page_publique()` : c'est lui qui
   decide des regles de cesure, francaises ou neerlandaises.

   ON NE JUSTIFIE QUE LE TEXTE COURANT, et le selecteur suffit a le tenir :
   il vise l'ELEMENT `p`, donc (0,0,1), quand tout ce qui doit rester centre
   porte une CLASSE, donc (0,1,0). `.sub`, `.ins-ok-texte`, `.ins-ok-aide` et
   `.ins-pied` l'emportent d'elles-memes, ou qu'elles soient dans le fichier.
   Un libelle de formulaire, une cellule de tableau ou un bouton n'ont pas de
   seconde ligne : les justifier n'ajouterait rien.
   ============================================================ */
p, ul.p li, ol.p li, li.p{text-align:justify;hyphens:auto}