/* TOUMA · DEV2 · la porte et le catalogue des instances (28/10/2026). Les couleurs et la police de Touma (v2/socle.css),
   rien de plus. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(/polices/manrope-latin.woff2) format("woff2")}
:root{
  --fond:#F2F5F9;--surface:#FFFFFF;--surface-2:#F7F9FC;--trait:#E6EBF2;--trait-fort:#D3DBE6;
  --texte:#0B1729;--texte-2:#4A5872;--texte-3:#7A879C;--bleu:#0F3D8A;--bleu-doux:rgba(15,61,138,.08);--orange:#E8791D;
  --vert:#1F8A5B;--rouge:#C2413B;--ambre:#B26A00;--ambre-fond:#FFF4E2;
  --ombre:0 1px 2px rgba(16,28,48,.04),0 12px 28px -18px rgba(16,28,48,.28);--r:14px;
}
@media (prefers-color-scheme:dark){:root{
  --fond:#070B12;--surface:#0F1725;--surface-2:#131C2C;--trait:#1C2537;--trait-fort:#2A3548;
  --texte:#E8EEF8;--texte-2:#A9B6CB;--texte-3:#7D8AA0;--bleu:#8FB3F5;--bleu-doux:rgba(143,179,245,.10);--orange:#F09A4A;
  --vert:#5DB88A;--rouge:#E0605A;--ambre:#EDA64A;--ambre-fond:rgba(237,166,74,.12);
  --ombre:0 1px 2px rgba(0,0,0,.4),0 14px 34px -20px rgba(0,0,0,.8);
}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fond);color:var(--texte);font:15px/1.45 "Manrope",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}

/* ---- la porte ---- */
body.porte{min-height:100vh;display:grid;place-items:center;padding:16px}
.porte-carte{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);box-shadow:var(--ombre);padding:32px 28px}
.porte-logo{display:block;height:44px;width:auto}
.porte-env{margin:10px 0 24px;color:var(--texte-2);font-weight:600;letter-spacing:.02em}
.porte form{display:grid;gap:10px}
.porte label{font-weight:600;font-size:13px;color:var(--texte-2)}
.porte input[type=password]{height:44px;border:1px solid var(--trait-fort);border-radius:10px;padding:0 12px;background:var(--surface-2)}
.porte input:focus{outline:2px solid var(--bleu);outline-offset:1px}
.porte button{height:44px;border:0;border-radius:10px;background:var(--bleu);color:#fff;font-weight:700;cursor:pointer;margin-top:6px}
@media (prefers-color-scheme:dark){.porte button{color:#071022}}
.erreur{margin:0;color:var(--rouge);font-size:13px;font-weight:600}
.porte-note{margin:20px 0 0;color:var(--texte-3);font-size:12.5px}

/* ---- le catalogue ---- */
.cat-tete{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:16px;padding:12px 24px;background:color-mix(in srgb,var(--fond) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)}
.cat-marque{display:flex;align-items:center;gap:10px;flex:none}
.cat-marque img{height:32px;width:auto}
.cat-env{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--orange);border:1px solid currentColor;border-radius:6px;padding:2px 6px}
.cat-recherche{flex:1;max-width:520px}
.cat-recherche input{width:100%;height:40px;border:1px solid var(--trait-fort);border-radius:10px;padding:0 14px;background:var(--surface)}
.cat-recherche input:focus{outline:2px solid var(--bleu);outline-offset:1px}
.cat-sortir{height:36px;border:1px solid var(--trait-fort);border-radius:10px;background:transparent;padding:0 14px;cursor:pointer;color:var(--texte-2);font-weight:600}
.cat-corps{max-width:1280px;margin:0 auto;padding:20px 24px 48px}
.cat-filtres{display:flex;gap:8px;flex-wrap:wrap}
.filtre{height:32px;border:1px solid var(--trait-fort);border-radius:999px;background:var(--surface);padding:0 14px;cursor:pointer;font-weight:600;font-size:13px;color:var(--texte-2)}
.filtre.actif{background:var(--bleu);border-color:var(--bleu);color:#fff}
@media (prefers-color-scheme:dark){.filtre.actif{color:#071022}}
.cat-bilan{margin:14px 0 18px;color:var(--texte-3);font-size:13px}
.cat-avis{margin:0 0 16px;padding:10px 14px;border-radius:10px;background:var(--ambre-fond);color:var(--ambre);font-weight:600;font-size:13.5px}
.cat-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pays{position:relative;display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);padding:14px;text-decoration:none;color:inherit;box-shadow:var(--ombre);transition:border-color .18s,transform .18s}
a.pays:hover,a.pays:focus-visible{border-color:var(--bleu);transform:translateY(-1px);outline:none}
.pays.ferme{opacity:.72;box-shadow:none}
.pays svg{width:56px;height:56px;display:block}
.pays svg path{fill:var(--bleu-doux);stroke:var(--bleu);stroke-width:1.2;vector-effect:non-scaling-stroke}
.pays.demonstration svg path{stroke:var(--ambre);fill:var(--ambre-fond)}
.pays .sans-contour{width:56px;height:56px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;font-weight:800;color:var(--texte-3);font-size:13px}
.pays h2{margin:0;font-size:15.5px;font-weight:700;line-height:1.25}
.pays .code{color:var(--texte-3);font-weight:600;font-size:12px;margin-left:4px}
.pays .ligne{margin:2px 0 0;font-size:12.5px;color:var(--texte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pays .etat{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;font-weight:700}
.pays .etat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.etat.pret{color:var(--vert)}.etat.reference{color:var(--bleu)}.etat.attente{color:var(--texte-3)}.etat.echec{color:var(--rouge)}
.pays .demo{position:absolute;top:10px;right:10px;font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--ambre);background:var(--ambre-fond);border-radius:6px;padding:2px 6px}
.pays .cause{margin:4px 0 0;font-size:12px;color:var(--texte-3);line-height:1.35}
.vide{grid-column:1/-1;color:var(--texte-3);padding:24px 0}
@media (max-width:640px){
  .cat-tete{flex-wrap:wrap;padding:10px 16px;gap:10px}
  .cat-recherche{order:3;flex-basis:100%;max-width:none}
  .cat-marque{flex:1}
  .cat-corps{padding:16px 16px 40px}
  .cat-grille{grid-template-columns:1fr}
}