/* ============================================================
   FAMICARD — LE CADRE COMMUN À TOUTES LES PAGES.

   Chaque écran avait son propre <style>, et le fond avec : quatre pages
   portaient la photo, les autres un aplat — dont DEUX VERTS DIFFÉRENTS
   (#eef3ef et #eef4ef). Personne ne le voyait sur une page, tout le monde le
   sentait en circulant.

   Ce fichier ne pose que le CADRE : le fond, la largeur, la respiration, les
   règles qui valent partout. Les composants de chaque page (tableaux, cartes,
   formulaires) restent chez elles — leur <style> est chargé APRÈS celui-ci et
   l'emporte donc en cas de désaccord. Aucune page ne peut casser parce que ce
   fichier a changé.

   ⚠️ LE FOND EST SUR <html>, PAS SUR <body>, et c'est la correction qui a
   motivé ce fichier. Posé sur le body, il s'arrête où le contenu s'arrête :
   sur un écran haut avec peu de contenu, la moitié basse virait à une autre
   teinte — la « base de page bizarre ». Sur <html>, il habille toute la
   fenêtre, quelle que soit la hauteur du contenu.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
    min-height: 100%;
    /* La couleur d'abord : si l'image tarde ou manque, la page reste dans le
       ton au lieu de clignoter en blanc. */
    background: #dfe9e0 var(--famicard-fond, none) no-repeat center center fixed;
    background-size: cover;
}

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0 0 56px;
    color: #333;
    /* dvh en second : sur mobile, vh compte la barre d'adresse et laisse une
       bande vide en bas. Les navigateurs qui l'ignorent gardent vh. */
    min-height: 100vh;
    min-height: 100dvh;
    background: transparent;
}

/* ── LE VOILE ────────────────────────────────────────────────────────────
   Les écrans denses — tableaux, formulaires longs — ont été dessinés sur un
   aplat clair. La photo derrière un tableau de 400 lignes se paie en
   lisibilité. Ils gardent donc la même famille (l'image reste visible sur les
   bords) sous un voile qui rend le texte net.

   À poser sur le <body> : <body class="voile">. */
body.voile { background: rgba(240, 246, 241, .88); }

/* ── LA LARGEUR ──────────────────────────────────────────────────────────
   Une seule respiration horizontale pour tout le site. Les pages qui ont
   besoin de plus (la base des collaborateurs, l'export) le redéclarent. */
.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }

/* ── CE QUI VAUT PARTOUT ─────────────────────────────────────────────── */

/* Un lien au clavier doit se voir. Sans ça, naviguer sans souris revient à
   chercher où l'on est. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #7fb894;
    outline-offset: 2px;
}

/* Une image trop large ne doit jamais pousser la page sur le côté : le reste
   de l'écran devient alors inatteignable sur mobile. */
img { max-width: 100%; height: auto; }

/* Les tableaux larges défilent DANS leur boîte, pas avec la page entière. */
.scroll, .table-wrap, .tableau-boite { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── IMPRESSION ──────────────────────────────────────────────────────────
   Le fond photo mangeait l'encre et grisait le texte. À l'impression, la page
   redevient noir sur blanc — sauf le badge, qui a sa propre feuille et ses
   propres cotes en millimètres. */
@media print {
    html { background: #fff; }
    body { background: #fff; color: #000; padding: 0; }
    .bandeau, .pill, .deco, .btn, .bouton { display: none !important; }
}
