/* e-cole — Styles communs (bootstrap.css doit être chargé avant) */

/* Polices locales */
@font-face {
    font-family: 'Cairo Play';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../data/polices/CairoPlay-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Base — header et footer toujours visibles, scroll confiné à main */
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    height: 100dvh;
    overflow: hidden;
}
main {
    min-height: 0;
    overflow-y: auto;
}

/* Header */
header h1 {
    font-size: 1.4em;
    font-family: 'Cairo Play', sans-serif;
    letter-spacing: 0.02em;
    line-height: 1.15;
}

.header-icone { color: #1e7e46; vertical-align: middle }

.header-content { max-width: 1100px; margin: 0 auto }

.sous-titre {
    position: absolute;
    left: 0; right: 0;
    margin: 0;
    pointer-events: none;
    font-family: 'Cairo Play', sans-serif;
    font-size: 1.1em;
    opacity: 0.6;
    text-align: center;
}

.header-settings {
    margin-left: auto;
    font-size: 1.3em;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s;
}
.header-settings:hover { opacity: 1 }

/* Footer */
.footer-titre {
    font-family: 'Cairo Play', sans-serif;
    font-size: 1.4em;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.footer-titre:hover { color: #fff; opacity: 0.8 }

.footer-icone { color: #1e7e46; vertical-align: middle }

/* Popovers Bootstrap (ex: icônes La Forge/Tchap du footer) : texte forcé sur une seule ligne */
.popover { max-width: none }
.popover-body { white-space: nowrap }

.footer-auteur {
    font-family: 'Cairo Play', sans-serif;
    opacity: 0.5;
    font-size: 1.1em;
    letter-spacing: 0.02em;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 480px) {
    .footer-titre { font-size: 0.8em }
    .footer-auteur { font-size: 0.8em }
}
.footer-auteur:hover {
    color: inherit;
    text-decoration: none;
}

.footer-install {
    margin-left: auto;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s;
    background: none;
    border: none;
    color: inherit;
    display: flex;
    align-items: center;
}
.footer-install:hover { opacity: 1 }
.footer-install:not(.d-none) + .footer-info { margin-left: 12px }

.footer-info {
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s;
    background: none;
    border: none;
    color: inherit;
    display: flex;
    align-items: center;
}
.footer-info:hover { opacity: 1 }

/* Compteur écoles — modale À propos */
.compteur-apropos {
    text-align: center;
    font-family: 'Cairo Play', sans-serif;
    font-size: 1.2em;
    color: #1e7e46;
    margin-bottom: 12px;
}

/* Modales — styles communs */
.modal-dialog { max-width: 500px }
.modal-dialog.modal-lg { max-width: 800px }
.modal-dialog.modal-xl { max-width: 1140px }
.modal-dialog-lg { max-width: 800px } /* classe custom legacy — à ne pas confondre avec .modal-lg Bootstrap */

.modale-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 2000;
    display: flex; align-items: center; justify-content: center;
}
.modale-cache { display: none !important }
.modale {
    background: #fff; max-width: 800px; width: 95%;
    border-radius: 8px; max-height: 85vh; overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.modale-header {
    border-bottom: none; border-radius: 8px 8px 0 0;
    background: #198754; color: #fff;
}
.modale-header h2 { font-size: 1.2em; color: inherit; font-weight: bold }
.modale-fermer {
    background: none; border: none; font-size: 1.5em;
    cursor: pointer; color: rgba(255,255,255,0.7);
}
.modale-fermer:hover { color: #fff }
.modale-contenu { padding: 16px 20px }

/* Modale partage — boutons poussoir colorés dynamiquement (--app-couleur défini en JS) */
#modale-partage .partage-modes .btn {
    border-color: var(--app-couleur, #3498db);
    color: var(--app-couleur, #3498db);
    transition: background-color .15s ease, color .15s ease;
}
#modale-partage .partage-modes .btn-check:checked + .btn {
    background-color: var(--app-couleur, #3498db);
    border-color: var(--app-couleur, #3498db);
    color: #fff;
}
#modale-partage .partage-modes .btn:hover {
    background-color: color-mix(in srgb, var(--app-couleur, #3498db) 12%, transparent);
}

/* Modale À propos (Bootstrap modal) */
#modale-apropos .apropos-icone { flex-shrink: 0 }
#modale-apropos .list-group-item-action:hover { background: #eaf7ef }

/* ── Header e-template (Bootstrap navbar) ─────────────────────────────────── */

#header-nav { z-index: 1 }

/* Marque de l'application — toujours centrée en absolu */
.app-marque {
    font-family: 'Cairo Play', sans-serif;
    font-size: 1.4em;
    letter-spacing: 0.02em;
    line-height: 1.15;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

@media (min-width: 992px) {
    #header-nav { min-height: 86px }
    #navbar-top-row {
        position: static !important;
        width: auto !important;
    }
    .app-marque { left: 50% }
}

/* Description courte — affichée après le nom, plus discrète ; masquée en mobile */
.app-description { font-size: 0.75em; opacity: 0.6; font-weight: normal }
.app-description-sep { font-size: 1.35em }
@media (max-width: 991.98px) { .app-description { display: none } }

/* Couleur de l'icône dans le header (hérite via currentColor) */
.app-icone {
    color: var(--app-couleur, #3498db);
    display: flex;
    align-items: center;
}

/* Hamburger masqué (nav vide + pas de recherche) */
@media (max-width: 991.98px) {
    #header-nav.hamburger-masque { position: relative }
    #header-nav.hamburger-masque #navbar-top-row { min-height: 38px }
    #header-nav.hamburger-masque #header-nav-content {
        display: block !important; height: 0; overflow: visible; position: static;
    }
    #header-nav.hamburger-masque #header-boutons {
        position: absolute; top: 50%; transform: translateY(-50%); margin-top: 0; flex-direction: row;
    }
    #header-nav.hamburger-masque #header-boutons .nav-link { padding: 4px 10px; display: flex; align-items: center }
    #header-nav.hamburger-masque #header-boutons .nav-link > i { font-size: 20px; margin-right: 0; width: 20px; top: 0; line-height: 1 }
}

/* Hamburger — supprime le box-shadow de focus Bootstrap */
.navbar-toggler:focus { box-shadow: none }

/* ── Footer e-template ────────────────────────────────────────────────────── */

/* Bouton "i" À propos — annule le margin-left:auto quand précédé du bouton thème */
#btn-theme + .footer-info { margin-left: 0.5rem }
#btn-aide i,
#btn-apropos i { font-size: 1.4em }

/* Bouton thème — icônes lune/soleil intégrées dans l'interrupteur */
.theme-switch {
    display: inline-flex;
    width: 46px;
    height: 24px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    position: relative;
    flex-shrink: 0;
    align-items: center;
    overflow: hidden;
    transition: background 0.2s;
}
[data-bs-theme="light"] #btn-theme .theme-switch { background: rgba(241,196,15,0.45) }
[data-bs-theme="dark"]  #btn-theme .theme-switch { background: rgba(168,200,240,0.35) }
.theme-switch-moon,
.theme-switch-sun {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    z-index: 1;
    pointer-events: none;
}
.theme-switch-moon { left: 3px;  color: #a8c8f0 }
.theme-switch-sun  { right: 3px; color: #f1c40f }
.theme-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    z-index: 2;
}
[data-bs-theme="dark"] .theme-switch-thumb { transform: translateX(22px) }

/* ── Mode sombre ──────────────────────────────────────────────────────────── */

/* Header/footer plus sombres en mode sombre */
[data-bs-theme="dark"] nav.bg-dark { background-color: #1e1e1e !important }


/* Auteur masqué sur très petit écran */
@media (max-width: 576px) and (orientation: portrait),
       (orientation: landscape) and (max-height: 500px) {
    .footer-auteur { display: none }
}

/* ── Boutons système e-cole ────────────────────────────────────────────────── */
/*
 * Style push-button 3D enfoncable — profondeur 4px.
 * ::after = face (--btn-couleur), ::before = ombre (color-mix 60% noir, décalée 4px vers le bas).
 * Scopé sur les variantes e-cole via :is() pour ne pas altérer les .btn Bootstrap natifs.
 */
.btn:is(.btn-principal, .btn-vert, .btn-rouge, .btn-orange, .btn-secondaire, .btn-violet) {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 28px; font-size: 1.05em; font-weight: bold; color: #fff;
    border: none; outline: none; border-radius: 6px;
    background-color: var(--btn-couleur); cursor: pointer;
    position: relative; will-change: transform; z-index: 0;
    transition: transform 0.5s cubic-bezier(0, 1, 0.3, 1);
    --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: var(--btn-couleur); --bs-btn-hover-bg: var(--btn-couleur); --bs-btn-active-bg: var(--btn-couleur);
    --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent;
}
.btn:is(.btn-principal, .btn-vert, .btn-rouge, .btn-orange, .btn-secondaire, .btn-violet)::before,
.btn:is(.btn-principal, .btn-vert, .btn-rouge, .btn-orange, .btn-secondaire, .btn-violet)::after {
    content: ''; border-radius: 6px;
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    transition: transform 0.5s cubic-bezier(0, 1, 0.3, 1);
}
.btn:is(.btn-principal, .btn-vert, .btn-rouge, .btn-orange, .btn-secondaire, .btn-violet)::before {
    background-color: color-mix(in srgb, var(--btn-couleur) 60%, black);
    top: 4px; bottom: -4px;
}
.btn:is(.btn-principal, .btn-vert, .btn-rouge, .btn-orange, .btn-secondaire, .btn-violet)::after {
    background-color: var(--btn-couleur);
}
.btn:is(.btn-principal, .btn-vert, .btn-rouge, .btn-orange, .btn-secondaire, .btn-violet):hover:not(:disabled)         { transform: translateY(1px) }
.btn:is(.btn-principal, .btn-vert, .btn-rouge, .btn-orange, .btn-secondaire, .btn-violet):hover:not(:disabled)::before { transform: translateY(-1px) }
.btn:is(.btn-principal, .btn-vert, .btn-rouge, .btn-orange, .btn-secondaire, .btn-violet):active:not(:disabled)         { transform: translateY(4px); transition: none }
.btn:is(.btn-principal, .btn-vert, .btn-rouge, .btn-orange, .btn-secondaire, .btn-violet):active:not(:disabled)::before { transform: translateY(-4px); transition: none }
.btn:is(.btn-principal, .btn-vert, .btn-rouge, .btn-orange, .btn-secondaire, .btn-violet):focus {
    box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
}
.btn:is(.btn-principal, .btn-vert, .btn-rouge, .btn-orange, .btn-secondaire, .btn-violet):disabled { opacity: 0.4; cursor: not-allowed }
.btn-principal  { --btn-couleur: #177bbe }
.btn-vert       { --btn-couleur: #25a277 }
.btn-rouge      { --btn-couleur: #e74c3c }
.btn-orange     { --btn-couleur: #e67e22 }
.btn-secondaire { --btn-couleur: #6c797a }
.btn-violet     { --btn-couleur: #8e44ad }

/* Case à cocher "Ne plus afficher" (popup Nouveautés) — bordure Bootstrap trop claire par défaut */
#nouveautes-ne-plus-afficher { --bs-border-width: 2px; border-color: #495057 }