/* =====================================================================
 * kit.css — éléments d'interface communs à la vitrine ET à la console.
 *
 * Chargé après tokens.css par base.html et public_base.html. Ne contient
 * que ce qui doit avoir EXACTEMENT le même aspect des deux côtés : les
 * teintes de tuiles (tableau de bord de l'app = pictogrammes de la landing),
 * les pastilles d'étiquette et les statuts. Tout le reste reste propre à sa
 * feuille (app.css pour la console, le <style> de public_base pour le site).
 * ===================================================================== */

/* Logo : deux disques (source pleine, copie en anneau). */
.logo{display:flex;align-items:center;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo-dot{display:inline-flex;align-items:center;margin:0 1px}
.logo-dot i:first-child{border-radius:50%;background:var(--logo-fill);display:inline-block}
.logo-dot i:last-child{border-radius:50%;border:3px solid var(--cyan-brand);box-sizing:border-box;display:inline-block;background:transparent}

/* Sélecteur de langue FR / EN et bouton de thème : mêmes contrôles sur le
   site public et sur les pages de connexion. */
.langsel{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r-md);overflow:hidden;background:var(--panel);flex:none}
.langbtn{padding:6px 12px;border:none;cursor:pointer;font:inherit;font-size:12px;font-weight:600;
  color:var(--sub);background:var(--panel);line-height:1.5;display:inline-block}
.langbtn+.langbtn{border-left:1px solid var(--line2)}
.langbtn:hover{color:var(--ink);background:var(--surface-hi)}
.langbtn[aria-current]{background:var(--accent);color:#fff}
.langbtn[aria-current]:hover{background:var(--accent-hi);color:#fff}
.theme-toggle{width:38px;height:38px;border-radius:var(--r-md);border:1px solid var(--line2);background:var(--panel);
  color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent-text);background:var(--panel)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}

/* Teintes de tuiles d'application, avec l'encre du pictogramme associée
   (--tile-ink) : mêmes couples que le tableau de bord de la console. */
.tint-violet{background:#EEEDFC;--tile-ink:#544AE3}.tint-teal{background:#DFF5F0;--tile-ink:#0FA3B1}
.tint-orange{background:#FDEEDC;--tile-ink:#D97C2B}.tint-pink{background:#FBE7F0;--tile-ink:#C23B7C}
.tint-blue{background:#E3EEFB;--tile-ink:#2F6FE0}.tint-green{background:#E5F5E7;--tile-ink:#1F9D61}
.tint-yellow{background:#FBF3D9;--tile-ink:#B0821A}.tint-red{background:#FCE9E7;--tile-ink:#D6455B}
.tint-slate{background:#EAECF2;--tile-ink:#5B6472}
:root[data-theme="dark"] .tint-violet,:root[data-theme="dark"] .tint-teal,:root[data-theme="dark"] .tint-orange,
:root[data-theme="dark"] .tint-pink,:root[data-theme="dark"] .tint-blue,:root[data-theme="dark"] .tint-green,
:root[data-theme="dark"] .tint-yellow,:root[data-theme="dark"] .tint-red,:root[data-theme="dark"] .tint-slate{
  background:var(--surface-hi);filter:saturate(1.4)}

/* Tuile-icône : même gabarit que les tuiles du tableau de bord. */
.icon-tile{display:flex;align-items:center;justify-content:center;border-radius:var(--r-xl);
  box-shadow:0 1px 3px rgba(24,26,32,.10);flex:none;color:var(--tile-ink,var(--ink))}
.icon-tile svg{width:60%;height:60%}

/* Étiquette d'offre : même famille que `.lock-badge` de la console
   (jaune = « réservé à une offre »), vert = inclus partout. */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;line-height:1.2;
  padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line2);
  color:var(--sub);background:var(--surface);white-space:nowrap}
.tag.free{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.tag.gated{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}

/* Statuts d'un objet propagé — les six valeurs du rapport. */
.rst{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line2);color:var(--sub);white-space:nowrap}
.rst.created{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.rst.updated{color:var(--accent-text);border-color:var(--accent-line);background:var(--accent-soft)}
.rst.repaired{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.rst.skipped{color:var(--mut)}
.rst.quarantine{color:var(--warn);border-color:var(--warn-line);background:transparent;border-style:dashed}
.rst.failed{color:var(--err);border-color:var(--err-line);background:var(--err-bg)}

/* Formulaire public (contact, abonnement) : mêmes champs que la console
   (voir app.css : rayon 8, bordure --line2, anneau d'accent au focus). */
.cform{display:flex;flex-direction:column;gap:18px}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform .fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.cform label{font-size:13px;color:var(--mut)}
.cform input:not([type=checkbox]),.cform select,.cform textarea{width:100%;box-sizing:border-box;padding:10px 12px;font:inherit;font-size:14px;
  background:var(--panel);color:var(--ink);border:1px solid var(--line2);border-radius:var(--r-md)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid var(--accent-ring);border-color:var(--accent2)}
.cform input::placeholder,.cform textarea::placeholder{color:var(--mut);opacity:.7}
.cform textarea{resize:vertical}
.cform input[type=checkbox]{accent-color:var(--accent)}
.cform .btn{justify-content:center;padding:13px 0;font-size:14.5px;margin-top:4px}
@media (max-width:900px){.cform .row{grid-template-columns:1fr}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}