/* ============================================================
   css/base.css — Composants partagés EiKo
   Charger APRÈS css/tokens.css et AVANT le <style> de la page.
   L'ordre compte : une page peut encore surcharger localement.

   Trois couches :
     [1] IDENTIQUE PARTOUT — hoisté ici, la copie de page est supprimée.
     [2] CANONIQUE — la variante majoritaire. Les pages qui divergent
         gardent leur surcharge locale jusqu'à migration individuelle.
     [3] TRANSVERSAL — accessibilité, purement additif.
   ============================================================ */


/* ══════════ [1] IDENTIQUE PARTOUT ══════════ */

.mono{font-family:var(--font-mono)}

/* ── Bascule de thème (identique sur 16 à 19 pages) ── */
.theme-toggle-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;border-radius:12px;
  border:1px solid var(--border);background:var(--surface);
  cursor:pointer;transition:.2s;color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle-btn:hover{border-color:var(--brand)}
.th-icon{font-size:.95rem;line-height:1;user-select:none}
.tt-track{
  width:32px;height:18px;border-radius:var(--r-pill);flex-shrink:0;position:relative;
  background:rgba(255,255,255,.12);border:1px solid var(--border-champ);
  transition:background var(--t-mid);
}
.tt-thumb{
  width:12px;height:12px;border-radius:50%;background:#fff;
  position:absolute;top:2px;left:2px;
  transition:transform var(--t-mid) cubic-bezier(.34,1.4,.64,1);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
[data-theme="light"] .tt-track{background:rgba(0,0,0,.09);border-color:rgba(0,0,0,.07)}
[data-theme="dark"]  .tt-track{background:var(--brand);border-color:rgba(26,143,255,.3)}
[data-theme="dark"]  .tt-thumb{transform:translateX(14px)}

/* ── Libellé de champ ── */
label.lbl,.lbl{
  display:block;margin-bottom:5px;
  font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
}

/* NOTE — la nav (.nav-desktop / .nav-hamburger / .nav-link) n'est PAS definie
   ici : js/topnav.js injecte son propre <style> a l'execution et pilote la
   bascule par ID (#eiNav #btnNavMenu). Toute regle de classe posee ici serait
   inerte. La nav appartient a topnav.js. */


/* ══════════ [2] CANONIQUE (surchargeable par la page) ══════════ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 12px;border:none;border-radius:var(--r-sm);
  font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:600;line-height:1.2;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),opacity var(--t-fast);
  -webkit-tap-highlight-color:transparent;
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dk)}
.btn-ghost{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--brand)}
/* Le bouton d'action rouge n'existait qu'en une version, calibrée pour le
   sombre : en clair, #fca5a5 sur son fond teinté donnait 1,46:1 — du rose
   pâle sur du rose pâle, c'est le bouton « Sortir » de l'en-tête. Deux jeux
   distincts, et des bordures à 3:1 : le remplissage seul ne distingue pas ce
   bouton du fond de page (1,06:1 en clair), c'est donc son contour qui
   l'identifie. */
.btn-danger{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.75)}
.btn-danger:hover{background:rgba(239,68,68,.25)}
[data-theme="light"] .btn-danger{
  background:rgba(216,31,37,.10);color:#c01015;border-color:rgba(216,31,37,.75);
}
[data-theme="light"] .btn-danger:hover{background:rgba(216,31,37,.18)}
.btn-sm{padding:4px 10px;font-size:var(--fs-xs)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}

.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:14px 16px;
}
/* Variante « verre » : même surface, coins plus francs. Définie ici pour que
   les surcharges de thème clair qui la groupaient avec .card puissent tomber. */
.card-glass{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;
}

/* ── Deux familles delibérées, exprimées en portée plutôt qu'en redéfinition ──
   `data-density="dense"` sur <html> : pages-outils a forte densite (tableaux,
   barres d'action). `data-site="vitrine"` : pages publiques.
   Une page qui ne declare ni l'un ni l'autre recoit l'echelle standard. */

[data-density="dense"] .btn{
  padding:8px 13px;border-radius:var(--r-md);
  font-weight:700;line-height:1;min-height:36px;
}
[data-density="dense"] .btn-sm{padding:5px 9px;font-size:var(--fs-xs);min-height:30px}

/* NOTE — pas de portee vitrine pour .btn : accueil.html et tarifs.html portent
   data-site="vitrine" mais ont un bouton CTA propre dont le .btn nu ne pose ni
   fond ni couleur. Une regle de portee leur imposerait le fond creme des pages
   legales. Les 4 pages legales gardent donc leur .btn local. */

/* ── Champs ──
   background sur --surface2 et non sur un rgba(255,255,255,…) code en dur :
   plusieurs pages posaient un fond blanc translucide qui devenait invisible
   en theme clair. -webkit-appearance:none est requis sur iOS, ou Safari
   impose sinon son propre style aux select et aux input. */
.inp,select.inp,textarea.inp{
  width:100%;
  -webkit-appearance:none;appearance:none;
  background:var(--surface2);border:1px solid var(--border-champ);border-radius:var(--r-md);
  color:var(--text);font-family:var(--font-ui);font-size:.88rem;
  padding:9px 11px;outline:none;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.inp:focus{border-color:var(--brand)}
textarea.inp{resize:vertical;min-height:90px;line-height:1.5}

.pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:var(--r-pill);
  font-size:var(--fs-2xs);font-weight:700;white-space:nowrap;
}

/* ── Toasts ──
   Le canonique reprend l'union des bonnes proprietes trouvees en page : sans
   max-width ni word-break, un message long s'etirait sur toute la largeur et
   debordait. La position est unifiee en bas a droite (12 pages sur 16 ; les 4
   autres les affichaient centrees, si bien que la notification ne surgissait
   pas au meme endroit d'une page a l'autre). */
#toasts{
  position:fixed;bottom:24px;right:16px;z-index:999;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  pointer-events:none;max-width:calc(100vw - 32px);
}
.toast-item{
  padding:10px 16px;border-radius:12px;
  font-size:.8rem;font-weight:600;line-height:1.4;
  max-width:320px;word-break:break-word;
  pointer-events:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  animation:toastIn .25s ease;
}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── États de toast ──
   Le type est composé à l'exécution (`'t-' + type`, `toast-${type}`), et six
   valeurs circulent dans le code : err, ok, info, inf, error, success. Tous les
   alias sont donc couverts ici — certains n'étaient stylés nulle part et
   sortaient sans couleur. Les pages en avaient 8 variantes, dont une en violet
   (`#f0ecff` / `#5b21b6`) restée de l'ancienne palette.
   Texte ≥ 4,5:1 sur son fond dans les deux thèmes ; le contour reste un filet,
   un toast n'étant pas un contrôle : il se détache par son fond et son ombre. */
.t-ok,.toast-ok,.t-success,.toast-success{background:#064e3b;color:#6ee7b7;border:1px solid #0b7a5c}
.t-err,.t-erro,.t-error,.toast-err,.toast-error{background:#7f1d1d;color:#fca5a5;border:1px solid #b02525}
.t-info,.t-inf,.toast-info,.toast-inf{background:#1e3a5f;color:#bfdbfe;border:1px solid #2f5c92}
.t-warn,.toast-warn{background:#4a3410;color:#fcd34d;border:1px solid #7c5a19}

[data-theme="light"] .t-ok,[data-theme="light"] .toast-ok,
[data-theme="light"] .t-success,[data-theme="light"] .toast-success{
  background:#eafaf0;color:#117f3a;border-color:#bbe9cb}
[data-theme="light"] .t-err,[data-theme="light"] .t-erro,[data-theme="light"] .t-error,
[data-theme="light"] .toast-err,[data-theme="light"] .toast-error{
  background:#fdecec;color:#d52222;border-color:#f8d4d4}
[data-theme="light"] .t-info,[data-theme="light"] .t-inf,
[data-theme="light"] .toast-info,[data-theme="light"] .toast-inf{
  background:#e8f4fa;color:#0274af;border-color:#c3e0ee}
[data-theme="light"] .t-warn,[data-theme="light"] .toast-warn{
  background:#fdf3e3;color:#a75c05;border-color:#f3ddb8}


/* Aucun glissement latéral de la page.
   `clip` et non `hidden` : `hidden` crée un conteneur de défilement, ce qui
   casserait les en-têtes en position:sticky. Les zones qui doivent défiler
   horizontalement (tableaux larges) le font dans leur propre conteneur. */
html,body{overflow-x:clip}

/* ══════════ [3] TRANSVERSAL — accessibilité ══════════ */

/* Focus clavier visible partout (WCAG 2.4.7 + 2.4.13).
   Aucune page n'en définissait : ajout pur. */
/* Pas de border-radius ici : un style de focus ne doit toucher que l'anneau.
   Le poser carrait tout élément rond recevant le focus — le logo de topnav
   est un role="button" tabindex="0". */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Cible tactile 44×44 — RETIRÉE.
   La règle `@media (pointer:coarse){ .btn,.theme-toggle-btn{min-height:44px} }`
   a cassé deux mises en page réelles :
     • le tiroir mobile de topnav (22 liens × 11 px = 242 px de plus, le bouton
       « Sortir » passait sous la ligne de flottaison) ;
     • #mobileHeader d'admin.html, qui n'a pas de hauteur fixe mais un simple
       padding de 12 px : un enfant de 44 px le fait passer de ~40 à 68 px.
   Imposer une hauteur minimale à un composant sans connaître son contexte de
   mise en page ne marche pas. À reprendre composant par composant, avec une
   vérification visuelle, plutôt qu'en règle transversale. */

/* Respect de prefers-reduced-motion (aucune page ne le gérait). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}