/* Pages publiques de SuiviPeda (lot 7 de l'audit UX, 23/10/2026) : carte d'authentification, bandeau
   d'en-tête, pied de page, menu public, annuaire, choix d'établissement, recherche d'outils.
   Remplace les blocs <style> des pages ; s'appuie sur les jetons --id-* de tokens.css (mode nuit compris). */

/* ---- Repli des jetons quand l'identité est coupée (includes/identite_off) : html[data-identite] a priorité ---- */
:root {
    --id-ink: #0e2b4d;
    --id-soft: #4a5f7d;
    --id-bg: #f5f7fa;
    --id-surface: #ffffff;
    --id-surface-2: #eef2f7;
    --id-border: #d8dee8;
    --id-primary: #1f5fbf;
    --id-primary-rgb: 31, 95, 191;
    --id-radius: 8px;
    --id-radius-sm: 6px;
    --id-font: 'Atkinson Hyperlegible', system-ui, sans-serif;
    --id-nav-bg: #0e2b4d;
    --id-nav-ink: #ffffff;
    --id-nav-soft: #c9d6e8;
}

/* ---- Carte d'authentification (connexion, inscription, mot de passe, choix d'établissement, maintenance, hors ligne) ---- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: var(--id-bg);
    color: var(--id-ink);
    font-family: var(--id-font);
}
.auth-card {
    width: 100%;
    max-width: 480px;
    background: var(--id-surface);
    border: 1px solid var(--id-border);
    border-radius: var(--id-radius);
    box-shadow: 0 2px 12px rgba(14, 43, 77, 0.06);
    overflow: hidden;
    color: var(--id-ink);
}
.auth-card-large { max-width: 560px; }
.auth-header {
    background: var(--id-nav-bg);
    color: #ffffff;
    text-align: center;
    padding: 1.5rem;
}
.auth-header h1,
.auth-header h2,
.auth-header p { color: #ffffff; margin-top: 0; }
.auth-header .auth-slogan,
.auth-header small { color: var(--id-nav-soft); opacity: 1; }
.auth-body { padding: 1.5rem; }
.auth-body > :last-child { margin-bottom: 0; }
.auth-centre { text-align: center; }
.auth-footer { padding: 0 1.5rem 1.5rem; text-align: center; }
.auth-footer a { color: var(--id-soft); }
.auth-footer a:hover { color: var(--id-primary); }
.auth-card .btn-primary,
.auth-card .btn-outline-success,
.auth-card .btn-outline-primary,
.auth-card .btn-outline-secondary { min-height: 44px; }
.auth-icone { font-size: 3.5rem; line-height: 1; color: var(--id-primary); margin-bottom: 1rem; }
/* Bouton autonome (pages sans Tabler : offline.html) */
.auth-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--id-primary);
    border-radius: var(--id-radius-sm);
    background: var(--id-primary);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.auth-bouton:hover { filter: brightness(0.92); color: #ffffff; }
@media (max-width: 575.98px) {
    .auth-page { padding: 0.75rem; }
    .auth-header { padding: 1.25rem 1rem; }
    .auth-body { padding: 1rem; }
    .auth-footer { padding: 0 1rem 1rem; }
}

/* ---- Fond des pages publiques à contenu (tarifs, contact, annuaire, inscription, pages légales) ---- */
.page-public {
    min-height: 100vh;
    background: var(--id-bg);
    padding: 2.5rem 1.25rem;
}
@media (max-width: 575.98px) {
    .page-public { padding: 1.5rem 0; }
}

/* ---- Bandeau d'en-tête (accueil, tarifs, contact) ---- */
.page-hero {
    background: var(--id-nav-bg);
    color: #ffffff;
    padding: 3.5rem 0;
    text-align: center;
}
.page-hero h1,
.page-hero h2 { color: #ffffff; }
.page-hero p { color: var(--id-nav-soft); }
.page-hero p strong { color: #ffffff; }
.page-hero img { max-width: 100%; height: auto; border-radius: var(--id-radius); }
.page-hero-landing { padding: 4.5rem 0; }
@media (max-width: 575.98px) {
    .page-hero { padding: 2.25rem 0; }
    .page-hero-landing { padding: 2.5rem 0; }
}

/* ---- Pied de page public ---- */
.footer-public {
    background: var(--id-nav-bg);
    color: var(--id-nav-ink);
    padding: 2.5rem 0;
    text-align: center;
}
.footer-public a { color: var(--id-nav-soft); text-decoration: none; }
.footer-public a:hover,
.footer-public a:focus-visible { color: #ffffff; text-decoration: underline; }
.footer-public .footer-copyright { color: var(--id-nav-soft); }

/* ---- Accueil ---- */
.stat-card-landing {
    background: var(--id-primary);
    color: #ffffff;
    text-align: center;
    padding: 2.5rem 0;
}
.feature-icon-landing {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: var(--id-primary);
    color: #ffffff;
}

/* ---- Tarifs ---- */
.price-card { height: 100%; transition: transform 0.15s ease; }
.price-card:hover { transform: translateY(-4px); }
.price-card .price { font-size: 2rem; font-weight: 700; }

/* ---- Annuaire : pastilles de lettres (cible tactile 44 px) ---- */
.letter-badge {
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--id-surface-2);
    color: var(--id-ink);
    font-weight: 600;
    text-decoration: none;
}
.letter-badge:hover,
.letter-badge:focus-visible { background: var(--id-primary); color: #ffffff; }

/* ---- Choix de l'établissement ---- */
.etab-lien {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px solid var(--id-border);
    border-radius: var(--id-radius);
    background: var(--id-surface);
    color: var(--id-ink);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.etab-lien:hover,
.etab-lien:focus-visible {
    border-color: var(--id-primary);
    box-shadow: 0 4px 14px rgba(var(--id-primary-rgb), 0.25);
    transform: translateY(-2px);
    color: var(--id-ink);
}
.etab-icone {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: var(--id-radius);
    background: var(--id-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.etab-texte { flex: 1 1 auto; min-width: 0; }
.etab-nom { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.etab-meta { font-size: 0.8rem; color: var(--id-soft); overflow-wrap: anywhere; }
.etab-fleche { flex: 0 0 auto; color: var(--id-soft); font-size: 1.2rem; }

/* ---- Pot de miel des formulaires (hors écran, jamais display:none : le champ doit rester soumis vide) ---- */
.hp-champ { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Pages légales ---- */
.consentement-rgpd h2 { color: var(--id-primary); border-bottom: 1px solid var(--id-border); padding-bottom: 8px; margin-top: 24px; margin-bottom: 12px; }
.consentement-rgpd h3 { margin-top: 20px; margin-bottom: 10px; }
.eleve-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.champ-a-remplir { border-bottom: 1px dotted var(--id-soft); min-height: 1.4em; display: inline-block; min-width: 220px; }
.signature-zone { display: flex; justify-content: space-between; gap: 40px; margin-top: 20px; }
.signature-col { flex: 1; text-align: center; }
.signature-col .ligne { border-top: 1px solid var(--id-ink); margin-top: 60px; padding-top: 8px; }
.etape { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--id-border); }
.etape:last-child { border-bottom: 0; }
.etape-num { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--id-primary); color: #ffffff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (max-width: 575.98px) {
    .eleve-info-grid { grid-template-columns: 1fr; }
    .signature-zone { flex-direction: column; gap: 16px; }
}

/* ---- Menu public (ex-<style> de includes/public_nav.php) ---- */
.navbar-public { background: var(--id-nav-bg); }
/* Le sous-menu mobile hérite du texte sombre par défaut de Tabler (color: inherit remonte jusqu'au body,
   pas jusqu'au nav-link blanc du dessus) : illisible sur le fond sombre de la barre. Forcé en clair
   uniquement en dessous de la bascule navbar-expand-md (767.98px). */
@media (max-width: 767.98px) {
    #public-nav-menu .dropdown-menu .dropdown-item { color: var(--id-nav-soft); }
    #public-nav-menu .dropdown-menu .dropdown-item:hover,
    #public-nav-menu .dropdown-menu .dropdown-item:focus,
    #public-nav-menu .dropdown-menu .dropdown-item.active { color: var(--id-nav-ink); }
}
/* Une règle .navbar plus tardive dans tabler.min.css réinitialise --tblr-navbar-color pour toutes les barres
   (claires et sombres) : le bouton hamburger héritait du texte sombre du site, invisible sur ce fond. */
.navbar-public .navbar-toggler { color: var(--id-nav-ink); border-color: var(--id-nav-soft); }

/* ---- Recherche d'outils (ex-<style> de includes/recherche_outils_widget.php) ---- */
.recherche-declencheur { padding: 0.5rem; border-bottom: 1px solid var(--id-border); }
.recherche-bouton {
    width: 100%; display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem;
    border: 1.5px solid var(--id-border); border-radius: var(--id-radius); background: var(--id-surface); color: var(--id-soft);
    font-size: 0.85rem; text-align: left; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
}
.recherche-bouton:hover,
.recherche-bouton:focus-visible {
    border-color: var(--id-primary); box-shadow: 0 0 0 0.2rem rgba(var(--id-primary-rgb), 0.15); color: var(--id-ink);
}
.recherche-bouton span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche-bouton kbd,
.recherche-pied kbd,
.recherche-fermer {
    font-family: inherit; font-size: 0.72rem; padding: 0.05rem 0.4rem; border: 1px solid var(--id-border);
    border-bottom-width: 2px; border-radius: 5px; background: var(--id-surface-2); color: var(--id-soft);
}
.recherche-fenetre {
    position: fixed; inset: 0; z-index: 2100; display: flex; justify-content: center; align-items: flex-start;
    padding: 8vh 1rem 1rem; background: rgba(15, 20, 40, 0.55); backdrop-filter: blur(2px);
}
.recherche-fenetre[hidden] { display: none; }
.recherche-boite {
    width: 100%; max-width: 40rem; max-height: 80vh; display: flex; flex-direction: column;
    background: var(--id-surface); color: var(--id-ink); border-radius: var(--id-radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); overflow: hidden;
}
.recherche-entete { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--id-border); }
.recherche-entete .ti-search { font-size: 1.25rem; color: var(--id-primary); }
.recherche-champ { flex: 1; min-width: 0; border: 0; font-size: 1.05rem; background: transparent; color: var(--id-ink); border-radius: var(--id-radius-sm); }
.recherche-fermer { cursor: pointer; }
.recherche-liste { overflow-y: auto; padding: 0.4rem; }
.recherche-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.7rem; border-radius: var(--id-radius);
    color: var(--id-ink); text-decoration: none;
}
.recherche-item.actif { background: rgba(var(--id-primary-rgb), 0.12); }
.recherche-icone {
    flex: none; width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center;
    border-radius: 9px; background: var(--id-primary); color: #ffffff; font-size: 1.1rem;
}
.recherche-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.recherche-titre { font-weight: 600; }
.recherche-desc { font-size: 0.82rem; color: var(--id-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche-etiquette {
    flex: none; font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--id-surface-2); color: var(--id-soft);
    white-space: nowrap; max-width: 9rem; overflow: hidden; text-overflow: ellipsis;
}
.recherche-vide { padding: 1.25rem 1rem; color: var(--id-soft); font-size: 0.92rem; }
.recherche-vide p { margin: 0 0 0.75rem; }
.recherche-exemples { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.recherche-exemples-titre { font-size: 0.82rem; color: var(--id-soft); }
.recherche-puce {
    border: 1px solid var(--id-border); background: rgba(var(--id-primary-rgb), 0.08); color: var(--id-primary); border-radius: 999px;
    padding: 0.2rem 0.7rem; font-size: 0.85rem; cursor: pointer;
}
.recherche-puce:hover { background: rgba(var(--id-primary-rgb), 0.16); }
.recherche-lien-aide { color: var(--id-primary); font-weight: 600; }
.recherche-pied { padding: 0.5rem 1rem; border-top: 1px solid var(--id-border); font-size: 0.75rem; color: var(--id-soft); background: var(--id-surface-2); }
.recherche-annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 575.98px) {
    .recherche-fenetre { padding-top: 3vh; }
    .recherche-pied { display: none; }
    /* Sur téléphone l'étiquette passe sous le texte : sans elle, deux outils de même nom
       (par exemple « Export PDF » côté Prof et côté Admin) ne se distinguent plus. */
    .recherche-item { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.25rem; }
    .recherche-icone { grid-row: 1 / span 2; align-self: start; }
    .recherche-etiquette { grid-column: 2; justify-self: start; max-width: 100%; }
}

/* ---- Accessibilité : anneau de focus visible, jamais supprimé (complète base.css pour les éléments d'ici) ---- */
.auth-bouton:focus-visible,
.letter-badge:focus-visible,
.etab-lien:focus-visible,
.recherche-bouton:focus-visible,
.recherche-champ:focus-visible,
.recherche-fermer:focus-visible,
.recherche-puce:focus-visible,
.recherche-item:focus-visible,
.footer-public a:focus-visible,
.navbar-public .navbar-toggler:focus-visible {
    outline: 2px solid var(--id-primary);
    outline-offset: 2px;
    box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
    .price-card, .etab-lien, .recherche-bouton { transition: none; }
    .price-card:hover, .etab-lien:hover, .etab-lien:focus-visible { transform: none; }
}