:root{
  color-scheme:light;
  --f-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --bg:#dadeeb;--bg3:rgba(255,255,255,.5);
  --bgmesh:radial-gradient(115% 80% at 6% -12%, oklch(0.8 0.08 268 / .95) 0%, transparent 60%),
           radial-gradient(100% 68% at 100% 4%, oklch(0.82 0.09 300 / .8) 0%, transparent 62%),
           radial-gradient(85% 58% at 58% 112%, oklch(0.85 0.05 240 / .7) 0%, transparent 64%),#dadeeb;
  --surf:rgba(255,255,255,.82);--surf2:rgba(255,255,255,.58);
  --line:rgba(22,28,50,.11);--line2:rgba(22,28,50,.2);
  --t1:#0d1018;--t2:#333a4a;--t3:#6b7285;
  --ac:oklch(0.5 0.16 292);--ac2:oklch(0.42 0.15 292);--acl:oklch(0.5 0.16 292 / .1);
  --grl:oklch(0.58 0.15 165 / .13);--gr-tx:oklch(0.45 0.12 165);
  --rd:oklch(0.58 0.16 25);--rdl:oklch(0.58 0.16 25 / .12);
  --am:#a06b3a;--aml:rgba(160,107,58,.14);
  --sh:inset 0 0 0 1px rgba(255,255,255,.5), 0 2px 4px -1px rgba(20,26,44,.16),
       0 18px 32px -20px rgba(20,26,44,.36);
  --shp:0 14px 30px -22px rgba(26,32,52,.5), inset 0 1px 0 #fff;
  --r:16px;--rl:18px;--rm:14px;--rxl:26px;--blur:blur(22px) saturate(1.5);
}

*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:var(--f-body);font-size:15px;line-height:1.55;
  color:var(--t1);background:var(--bg);overflow-x:hidden;display:flex;flex-direction:column}
body::before{content:'';position:fixed;inset:0;z-index:0;background:var(--bgmesh);pointer-events:none}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.tete{position:relative;z-index:1;display:flex;align-items:center;gap:16px;
  padding:11px 20px;border-bottom:1px solid var(--line);background:var(--surf);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--t1)}
.logo{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;
  background:var(--acl);color:var(--ac);flex:none}
.logo.grand{width:52px;height:52px;border-radius:17px;margin:0 auto 14px}
.mot{font-weight:700;font-size:17px;letter-spacing:-.02em}
.mot b{color:var(--ac);font-weight:800}
.fin{margin-left:auto;display:flex;align-items:center;gap:9px}

/* Le bouton de profil : photo + nom, cliquable, vers sa propre fiche. */
.profil{display:flex;align-items:center;gap:9px;padding:4px 13px 4px 4px;border-radius:22px;
  background:var(--bg3);border:1px solid var(--line);text-decoration:none;color:var(--t1);
  max-width:230px;transition:background .15s,border-color .15s}
.profil:hover{background:var(--surf);border-color:var(--line2)}
.profil-txt{font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

main{position:relative;z-index:1;width:100%;max-width:1120px;margin:0 auto;
  padding:22px 18px 64px;flex:1}

/* ── Onglets — des LIENS, pas des boutons ────────────────────────────────── */
.atabs{display:flex;gap:5px;margin:0 0 22px;padding:5px;border-radius:var(--r);
  background:var(--surf2);border:1px solid var(--line);overflow-x:auto;
  scrollbar-width:none;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.atabs::-webkit-scrollbar{display:none}
.atab{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px 15px;
  border-radius:12px;text-decoration:none;color:var(--t2);font-size:13.5px;font-weight:700;
  white-space:nowrap;transition:background .15s,color .15s}
.atab:hover{color:var(--t1)}
.atab.on{background:var(--surf);color:var(--ac);box-shadow:var(--sh)}
/* ⚠ Grisé, pas masqué : ça enseigne ce qui vient. */
.atab.bientot{opacity:.42;cursor:default}
/* ⚠ « Réglages » est poussé tout à droite, et séparé : ce n'est pas une
   destination de plus dans le flux de travail, c'est l'endroit où l'on va
   rarement, pour configurer. La distance le dit sans qu'on l'écrive.
   ⚠ La classe s'appelle « pousse » et non « fin » : .fin désigne déjà le bloc de
   droite de l'en-tête, et deux règles homonymes se seraient appliquées à la même
   balise — le genre de collision de cascade qui ne casse rien franchement et
   déplace tout d'un cheveu. */
.atab.pousse{margin-left:auto}

/* Sous-onglets — plus discrets que le menu principal : ils sont subordonnés,
   la hiérarchie doit se voir. */
.stabs{display:flex;gap:4px;margin:-12px 0 22px;padding:0 4px;overflow-x:auto;
  scrollbar-width:none}
.stabs::-webkit-scrollbar{display:none}
.stabs .atab{padding:8px 13px;font-size:13px;border-radius:11px;box-shadow:none}
.stabs .atab.on{background:var(--acl);color:var(--ac);box-shadow:none}

/* ── Titres de section ───────────────────────────────────────────────────── */
.sec-title{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;
  color:var(--t3);text-transform:lowercase;letter-spacing:.18em;margin:26px 4px 12px}
.sec-title::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--line2),transparent)}

/* ── Tuiles de statistiques ──────────────────────────────────────────────── */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.tuile{background:var(--surf);border:1px solid var(--line);border-radius:var(--rl);
  padding:18px 16px;box-shadow:var(--sh);text-align:center;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.chiffre{display:block;font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.03em;
  color:var(--t1);font-variant-numeric:tabular-nums}
.chiffre i{font-style:normal;font-size:17px;font-weight:700;color:var(--am)}
.tlab{display:block;margin-top:6px;font-size:12.5px;color:var(--t3);font-weight:600}

/* ── Rangée de pastilles ─────────────────────────────────────────────────── */
.chips{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;
  padding:11px 16px;border-radius:var(--rl);background:var(--surf);
  border:1px solid var(--line);box-shadow:var(--sh);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:20px;
  background:var(--bg3);border:1px solid var(--line);font-size:12.5px;color:var(--t2)}
.chip b{font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums}
.chip.att{background:var(--aml);border-color:transparent;color:var(--am)}
.chip.att b{color:var(--am)}
.chip.non{background:var(--rdl);border-color:transparent;color:var(--rd)}
.chip.non b{color:var(--rd)}
.chips-fin{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--t3);text-transform:lowercase}

/* ── Listes ──────────────────────────────────────────────────────────────── */
.list{background:var(--surf);border:1px solid var(--line);border-radius:var(--rl);
  overflow:hidden;box-shadow:var(--sh);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.li{display:flex;align-items:center;gap:14px;padding:13px 18px;
  border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li.vide{color:var(--t3);font-size:14px;justify-content:center;padding:26px}
img.av,span.av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  flex:none;background:var(--acl);color:var(--ac);font-size:14px;font-weight:800;
  object-fit:cover;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.av.grand{width:60px;height:60px;font-size:19px}
.av.petit{width:28px;height:28px;font-size:11px}
.k{flex:1;min-width:0}
.k strong{display:block;font-size:15px;font-weight:700;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k .sub{display:block;font-size:12.5px;color:var(--t3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis}
.v{flex:none;text-align:right;min-width:0}
.v.large{min-width:158px}
.v b{display:block;font-size:14px;font-weight:700;color:var(--t1);
  font-variant-numeric:tabular-nums}
.vlab{display:block;font-size:11.5px;color:var(--t3)}
/* ⚠ Barré, pas masqué : un droit retiré doit rester LISIBLE. */
.li.off .k,.li.off .v{opacity:.5}
.li.off .k strong{text-decoration:line-through}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:750;
  padding:4px 11px;border-radius:20px;flex:none;white-space:nowrap}
.badge.ok{background:var(--grl);color:var(--gr-tx)}
.badge.att{background:var(--aml);color:var(--am)}
.badge.non{background:var(--rdl);color:var(--rd)}
.badge.zero{background:var(--bg3);color:var(--t3)}
.badge.ac{background:var(--acl);color:var(--ac)}

/* ── Boutons ronds d'action ──────────────────────────────────────────────── */
.rond{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;flex:none;
  background:var(--bg3);border:1px solid var(--line);color:var(--t2);cursor:pointer;
  text-decoration:none;transition:background .15s,color .15s,transform .12s;padding:0}
.rond:hover{background:var(--acl);color:var(--ac)}
.rond:active{transform:scale(.94)}
.rond.danger:hover{background:var(--rdl);color:var(--rd)}
.rond.fantome{background:none;border-color:transparent;pointer-events:none}
.enligne{display:inline;flex:none}

/* ── Fiche ───────────────────────────────────────────────────────────────── */
.fiche{display:flex;align-items:center;gap:17px;flex-wrap:wrap;margin:14px 0 4px;
  padding:20px;border-radius:var(--rxl);background:var(--surf);border:1px solid var(--line);
  box-shadow:var(--sh);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.fiche-txt{flex:1;min-width:0}
.fiche h1{font-size:22px;word-break:break-word}
.retour{display:inline-flex;align-items:center;gap:6px;color:var(--t2);text-decoration:none;
  font-size:13.5px;font-weight:700;margin-bottom:2px}
.retour:hover{color:var(--ac)}

h1{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0}
h1 b{color:var(--ac)}
.sous{color:var(--t2);margin:4px 0 0;font-size:13.5px}
code{font-family:var(--f-mono);font-size:.9em}

/* ── Formulaire ──────────────────────────────────────────────────────────── */
.formulaire{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  align-items:end;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--rxl);padding:20px;box-shadow:var(--sh);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:800;
  color:var(--t3);text-transform:lowercase;letter-spacing:.14em}
label.large{grid-column:1/-1}
input{font:inherit;font-size:14.5px;padding:12px 15px;border:1px solid var(--line2);
  border-radius:var(--rm);background:var(--bg3);color:var(--t1);min-width:0;
  text-transform:none;letter-spacing:normal;font-weight:500}
input::placeholder{color:var(--t3)}
input:focus,select:focus{outline:2px solid var(--ac);outline-offset:1px;border-color:transparent}
.formulaire .cta{grid-column:1/-1}
.formulaire .large,.err.large{grid-column:1/-1}

/* Les listes déroulantes reprennent la forme des champs — sinon deux grammaires
   cohabitent dans le même formulaire. */
select{font:inherit;font-size:14.5px;padding:12px 13px;border:1px solid var(--line2);
  border-radius:var(--rm);background:var(--bg3);color:var(--t1);min-width:0;
  text-transform:none;letter-spacing:normal;font-weight:500;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),
                   linear-gradient(135deg,var(--t3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}

/* ⚠ LE CHAMP FAUTIF EST DÉSIGNÉ, pas seulement nommé dans un message. « SIRET
   invalide » écrit en haut d'un formulaire à huit champs oblige à chercher ;
   un liseré rouge sur la bonne case ne l'oblige pas. */
label.faux input,label.faux select{border-color:var(--rd);
  box-shadow:0 0 0 3px var(--rdl)}
label.faux{color:var(--rd)}

/* Les rôles : des cases à cocher, parce qu'ils SE CUMULENT. Une liste déroulante
   dirait le contraire. */
fieldset.roles{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  border:1px solid var(--line);border-radius:var(--rm);padding:12px 15px;margin:0;
  background:var(--bg3)}
fieldset.roles legend{font-size:11px;font-weight:800;color:var(--t3);
  text-transform:lowercase;letter-spacing:.14em;padding:0 6px}
.coche{flex-direction:row;align-items:center;gap:8px;padding:7px 13px;border-radius:20px;
  background:var(--surf);border:1px solid var(--line);cursor:pointer;
  font-size:13px;font-weight:650;color:var(--t2);text-transform:none;letter-spacing:normal}
.coche input{width:15px;height:15px;padding:0;min-width:0;accent-color:var(--ac);cursor:pointer}
.coche:has(input:checked){background:var(--acl);border-color:transparent;color:var(--ac)}

/* ── LE MODE D'UNE ENTITÉ ──────────────────────────────────────────────────
   ⚠ L'épreuve est peinte en ORANGE, pas en rouge. Le rouge dit « faute » ;
   l'épreuve n'en est pas une, c'est un état voulu qui durera des semaines. Une
   alerte rouge permanente s'apprend à ignorer en trois jours — et le jour où
   quelque chose est vraiment rouge, plus personne ne le voit. */
.mode{border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;margin:18px 0 4px;
  background:var(--surf)}
.mode.epreuve{background:var(--aml);border-color:rgba(160,107,58,.34)}
.mode.reel{background:var(--grl);border-color:rgba(0,0,0,.06)}
.mode-t{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:9px}
.mode.epreuve .mode-t{color:var(--am)}
.mode.reel .mode-t{color:var(--gr-tx)}
.mode p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--t2);max-width:78ch}
.mode .pied{margin:0 0 10px}
.mode code{font-family:var(--f-mono);font-size:12.5px}
.mode form{display:inline-flex;margin:2px 8px 6px 0}

/* Les adresses : un bloc par usage, avec la MÊME grille que le formulaire qui
   les contient — sinon les champs d'adresse s'alignent sur eux-mêmes et le
   formulaire semble fait de deux morceaux. */
fieldset.adr{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;border:1px solid var(--line);border-radius:var(--rm);padding:12px 15px 16px;
  margin:0;background:var(--bg3)}
fieldset.adr legend{font-size:11px;font-weight:800;color:var(--t3);
  text-transform:lowercase;letter-spacing:.14em;padding:0 6px}
fieldset.adr .large{grid-column:1/-1}
/* ⚠ Le liseré rouge se pose sur le BLOC, pas sur une case : une adresse
   incomplète est refusée en tant qu'ensemble, et l'on ne sait pas laquelle des
   trois cases manquantes l'utilisateur voulait remplir. */
fieldset.adr.faux{border-color:var(--rd);box-shadow:0 0 0 3px var(--rdl)}
fieldset.adr.faux legend{color:var(--rd)}

/* La barre de recherche : une ligne, pas une carte. */
.filtre{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 4px}
.filtre input{flex:1 1 220px}
.filtre .cta{width:auto}
.cta.sm{width:auto;padding:11px 18px;font-size:13.5px;border-radius:var(--rm)}
.lien{color:var(--ac);text-decoration:underline;text-underline-offset:3px;
  font-size:13.5px;font-weight:700}

/* ── La fiche société ─────────────────────────────────────────────────────── */
.logo-soc{width:72px;height:72px;border-radius:var(--rm);object-fit:contain;flex:none;
  background:var(--bg3);border:1px solid var(--line);padding:6px}
.logo-soc.vide{display:grid;place-items:center;color:var(--t3);padding:0}

/* ⚠ Un <progress> natif : une barre dessinée en CSS aurait exigé une largeur
   variable, donc un style en ligne — que la CSP ignore EN SILENCE. */
progress.jauge{-webkit-appearance:none;appearance:none;width:100%;height:8px;
  border:none;border-radius:20px;background:var(--surf2);overflow:hidden;
  display:block;margin:16px 0 6px}
progress.jauge::-webkit-progress-bar{background:var(--surf2);border-radius:20px}
progress.jauge::-webkit-progress-value{
  background:linear-gradient(90deg,var(--ac2),var(--ac));border-radius:20px}
progress.jauge::-moz-progress-bar{
  background:linear-gradient(90deg,var(--ac2),var(--ac));border-radius:20px}
.jauge-txt{margin-top:0}

/* Le bandeau des empêchements — c'est le cœur de la page, il doit peser. */
.empeche{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.emp{background:var(--rdl);border:1px solid var(--rd);border-radius:var(--rl);padding:15px 17px}
.emp.ok{background:var(--grl);border-color:transparent}
.emp-t{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14.5px;
  color:var(--rd);letter-spacing:-.01em}
.emp.ok .emp-t{color:var(--gr-tx)}
.emp-l{margin:8px 0 0;padding-left:19px;font-size:12.5px;color:var(--t2);line-height:1.6}

.li.manque{background:color-mix(in srgb,var(--rd) 4%,transparent)}
.sub.texte{font-family:var(--f-mono);font-size:11.5px;opacity:.75;margin-top:3px}

/* Un titre de section À L'INTÉRIEUR d'une carte de formulaire. */
.sec-dans{margin-top:0}
input[type=file]{padding:10px 13px;font-size:13.5px;cursor:pointer}
input[type=file]::file-selector-button{font:inherit;font-weight:700;font-size:13px;
  padding:7px 13px;margin-right:11px;border:none;border-radius:10px;
  background:var(--acl);color:var(--ac);cursor:pointer}

/* ⚠ Le formulaire société est une SUITE de cartes, pas une carte géante : trente
   champs d'un bloc sont illisibles, et l'on ne sait plus où l'on en est. */
.societe{display:block}
.societe .formulaire{margin-bottom:4px}
.cta.grand{margin-top:24px;padding:17px 20px;font-size:16px}

/* ── Les marques d'état des sous-onglets ─────────────────────────────────── */
/* ⚠ Trois états, trois signes. Le « sans objet » n'emprunte NI le vert NI le
   rouge : lui donner le vert ferait croire à un acquis, le rouge à une faute. */
.mq{font-weight:800;font-size:13px;line-height:1;flex:none}
.mq.gros{font-size:20px;width:26px;text-align:center}
.e-vert .mq,.mq.e-vert{color:var(--gr-tx)}
.e-rouge .mq,.mq.e-rouge{color:var(--rd)}
.e-sans_objet .mq,.mq.e-sans_objet{color:var(--t3)}
.stabs .atab.e-rouge{color:var(--rd)}
.stabs .atab.e-vert{color:var(--gr-tx)}
.stabs .atab.e-sans_objet{color:var(--t3)}
.stabs .atab.on{background:var(--acl)}

/* Une ligne de liste qui est un LIEN : elle doit se comporter comme tel. */
.lien-li{text-decoration:none;color:inherit;transition:background .15s}
.lien-li:hover{background:var(--bg3)}
.fiche.mince{padding:16px 20px}
/* Un formulaire tenant sur UNE ligne de liste — renommer sans quitter la page. */
.ligne-form{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.ligne-form input{padding:8px 12px;font-size:13.5px;width:170px}
@media(max-width:720px){.ligne-form{flex:1 1 100%}.ligne-form input{width:auto;flex:1}}

/* ── Les pièces ──────────────────────────────────────────────────────────── */
.titre-type{font-size:14px;font-weight:650;color:var(--t3);letter-spacing:0}
.gros-total{font-size:19px}

/* Le pied de totaux : aligné à droite, chiffres en colonne. */
.totaux{margin-top:12px;margin-left:auto;max-width:380px;background:var(--surf);
  border:1px solid var(--line);border-radius:var(--rl);padding:14px 18px;box-shadow:var(--sh)}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:5px 0;font-size:14px;color:var(--t2)}
.tot b{color:var(--t1);font-weight:700;font-variant-numeric:tabular-nums}
.tot.fin{font-size:12.5px;color:var(--t3)}
.tot.grand{border-top:1px solid var(--line2);margin-top:6px;padding-top:10px;font-size:16px}
.tot.grand b{font-size:19px;font-weight:800;color:var(--ac)}

/* Les actions : des formulaires côte à côte, pas empilés. */
.actions{display:flex;flex-wrap:wrap;gap:10px}
.actions form{flex:0 1 auto}
.actions .cta{width:auto;padding:12px 20px;font-size:14px}
.cta.ghost{background:var(--surf);color:var(--t1);border:1px solid var(--line2);
  box-shadow:var(--sh)}
.cta.ghost:hover{filter:none;background:var(--bg3)}

.cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:14px 20px;border:none;border-radius:var(--r);cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:800;letter-spacing:-.01em;color:#fff;
  background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:var(--shp);
  transition:filter .15s,transform .12s;text-decoration:none}
.cta:hover{filter:brightness(1.08)}
.cta:active{transform:scale(.98)}

/* ── Notes et messages ───────────────────────────────────────────────────── */
/* ⚠ PAS D'ATTRIBUT style="" DANS LE HTML : la CSP est style-src 'self' SANS
   unsafe-inline, donc un style en ligne serait ignoré EN SILENCE. Toute règle
   ponctuelle prend une classe. */
.pied{color:var(--t3);font-size:12.5px;max-width:78ch;margin:12px 4px 0;line-height:1.6}
.pied strong{color:var(--t2)}
.note{color:var(--t3);font-size:13px;line-height:1.55}
.note.serre{margin:0}
.note strong{color:var(--t2)}
.ok,.err{border-radius:var(--rm);padding:13px 17px;margin:16px 0;font-size:14px;
  font-weight:600;border:1px solid transparent}
.ok{background:var(--grl);color:var(--gr-tx)}
.err{background:var(--rdl);color:var(--rd)}

/* ── Page de connexion ───────────────────────────────────────────────────── */
.accueil{max-width:27rem;margin:9vh auto;text-align:center}
.accueil h1{font-size:30px}
.acard{margin-top:22px;text-align:left;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--rxl);padding:22px;box-shadow:var(--sh);
  display:flex;flex-direction:column;gap:14px;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}

@media(max-width:720px){
  main{padding:16px 12px 48px}
  .tete{padding:10px 13px}
  .profil-txt{display:none}
  .profil{padding:4px;border-radius:50%}
  .li{flex-wrap:wrap;gap:10px}
  .k{flex:1 1 60%}
  .v.large{min-width:0;text-align:left;flex:1 1 100%;order:5}
  .fiche h1{font-size:19px}
  .tuile{padding:15px 12px}
  .chiffre{font-size:25px}
}