/* 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 */
/* line-height: 28px (hauteur des icônes du footer, ex. img width="28" height="28")
   — sans ça, le texte (ex. lien répertoire) rend la ligne plus haute que les
   liens icône seule (La Forge, Tchap), et donc tout le footer plus haut dès
   qu'un projet utilise NOM_REPERTOIRE. Hauteur de footer constante quel que
   soit le contenu affiché. */
.footer-titre {
    font-family: 'Cairo Play', sans-serif;
    font-size: 1.4em;
    line-height: 28px;
    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 — ligne 2 sous l'icône + le nom (ligne 1), centrée comme
   le reste de .app-marque ; plus discrète ; masquée en mobile */
.app-description { font-size: 0.75em; line-height: 1.3; opacity: 0.6; font-weight: normal }
@media (max-width: 991.98px) { .app-description { display: none } }

/* Ligne 1 (icône + nom) — largeur réduite au nom seul (display: inline-block,
   l'icône est sortie du flux ci-dessous) : .app-marque centre alors le nom et
   la description sur le même axe, sans l'icône qui décalerait la ligne 1. */
.app-ligne-nom { display: inline-block }

/* Icône du header — positionnée en absolu à gauche du nom plutôt qu'en flux,
   pour ne pas peser dans la largeur de .app-ligne-nom (voir ci-dessus) ;
   couleur héritée via currentColor */
.app-icone {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 8px;
    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 }