/* e-accueil — portail d'applications */

/* 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;
}

/* Wrapper brand+toggler :
   - mobile  : position:relative + w-100 → brand centré dans la 1re ligne
   - desktop : position:static + width:auto → collapse sur la même ligne, items à gauche */
@media (min-width: 992px) {
    #header-nav { min-height: 86px }
    .navbar-collapse { padding-left: 1rem }
    #nav-gauche { gap: 0.5rem }
    #form-recherche { margin-right: 1rem }
    #header-boutons .nav-link { padding-left: 0.15em; padding-right: 0.15em; height: auto; padding-top: 6px; padding-bottom: 6px }
    #header-boutons { margin-right: 1rem }
    #navbar-top-row {
        position: static !important;  /* écrase .position-relative { position: relative !important } */
        width: auto !important;       /* écrase w-100 { width: 100% !important } */
    }
}

/* 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;
}

/* Padding droit du footer-content pour équilibrer l'espace */
.header-content { padding-right: 18px }

/* navbar-icon-top — snippet Bootsnipp nNX3a, .fa remplacé par i */
.navbar-icon-top .navbar-nav .nav-link > i {
  position: relative;
  top: 3px;
  width: 36px;
  font-size: 24px;
  line-height: 12px;
}
@media (min-width: 992px) {
  .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link {
    text-align: center;
    display: table-cell;
    height: 70px;
    vertical-align: middle;
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link > i {
    display: block;
    width: 48px;
    margin: 2px auto 4px auto;
    top: 0;
    line-height: 24px;
  }
  .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link > i > .badge {
    top: -7px;
  }
}

/* Mobile : réinitialise l'alignement icône/texte dans le menu déroulant */
@media (max-width: 991.98px) {
  .navbar-icon-top .navbar-nav .nav-link {
    padding-left: 1.5rem;
  }
  .navbar-icon-top .navbar-nav .nav-link > i {
    top: 0;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    width: 1.25em;
    text-align: center;
    margin-right: 8px;
  }
  /* Boutons droite : colonne d'icônes positionnée en absolu sous le hamburger */
  #header-nav-content { position: relative }
  #header-boutons { flex-direction: column; position: absolute; top: 0; right: 0.5rem; margin-top: 12px; }
  #header-boutons .nav-link { padding-left: 0.5rem; padding-right: 0.5rem }
  #header-boutons .nav-link > i { margin-right: 0 }

  /* Menu gauche : hauteur minimale = 4 items + marge boutons pour éviter que la recherche ne déborde */
  #nav-gauche { min-height: calc(4 * 2.5rem + 16px) }

  /* Champ de recherche et dropdown : écartés des bords */
  #form-recherche { padding: 0 1.5rem; margin-top: 1.5rem }
  .navbar-collapse .dropdown-menu { margin-left: 1.5rem; margin-right: 1.5rem }
}
/* Labels des boutons droite : toujours masqués */
.nav-label { display: none }

/* 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-theme i { line-height: 1 }

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

/* Cadre sombre autour des boutons d'action (tous modes) */
#header-boutons { background: rgba(0,0,0,0.45); border-radius: 8px; padding: 2px 4px }

/* Flèche du dropdown — centrage vertical + rotation selon état ouvert/fermé */
#nav-gauche .dropdown-toggle::after { vertical-align: middle; transform: rotate(-90deg); transition: transform .2s ease }
#nav-gauche .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(0deg) }

/* Dropdown — légère animation à l'ouverture */
#nav-gauche .dropdown-menu { animation: nav-dropdown-in .15s ease }
@keyframes nav-dropdown-in { from { opacity: 0; transform: translateY(-4px) } }

/* ── Modes compacts ──────────────────────────────────────────────────────────
   Classes appliquées sur <html> dès le <head> (script thème) → aucun flash.
   compact=1 : masque les boutons Partage et Config dans la navbar.
   compact=2 : masque le header et le footer entiers (mode pleine page / TNI).
   ─────────────────────────────────────────────────────────────────────────── */
html.mode-compact-1 #li-partage,
html.mode-compact-1 #li-config  { display: none !important }
/* Compact-1 : masquer le cadre sombre si tous les boutons restants sont cachés */
html.mode-compact-1 #header-boutons:not(:has(> li:not(#li-partage):not(#li-config))) { display: none !important }

html.mode-compact-2 #header-nav,
html.mode-compact-2 #footer-nav  { display: none !important }

/* ── Écrans ≤ 1280px ─────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .footer-forge-complet { display: none }
}
/* La Forge / "Une application de La Forge" : toujours sur une ligne */
.footer-titre { white-space: nowrap }
/* Entre 993px et 1280px : hamburger absent, on cache la recherche.
   En dessous de 993px : Bootstrap gère lui-même la visibilité dans le collapse. */
@media (min-width: 993px) and (max-width: 1280px) {
    #form-recherche { display: none !important }
}

/* QR code — taille limitée avec marge */
#partage-qrcode canvas,
#partage-qrcode-eleve canvas,
#partage-qrcode-tni canvas { max-width: 300px; height: auto; padding: 8px; background: white; border-radius: 6px }

/* ── Rendu Markdown (.markdown-body) ────────────────────────────────────────
   Styles typographiques complémentaires aux classes Bootstrap injectées par JS.
   ─────────────────────────────────────────────────────────────────────────── */
.markdown-body { max-width: 860px }

/* Espacement des titres */
.markdown-body h1 { font-size: 2em;   margin: 0.5em 0 0.4em; border-bottom: 1px solid var(--bs-border-color); padding-bottom: 0.2em }
.markdown-body h2 { font-size: 1.5em; margin: 1.2em 0 0.4em; border-bottom: 1px solid var(--bs-border-color); padding-bottom: 0.2em }
.markdown-body h3 { font-size: 1.2em; margin: 1em 0 0.3em }
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 { margin: 0.8em 0 0.3em }

/* Paragraphes et listes */
.markdown-body p,
.markdown-body ul,
.markdown-body ol { margin-bottom: 0.9em }
.markdown-body ul,
.markdown-body ol { padding-left: 1.8em }
.markdown-body li + li { margin-top: 0.25em }

/* Code inline — héritage du fond adapté au thème sombre/clair */
.markdown-body code { font-size: 0.9em }

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

/* Bouton thème — affiche lune en mode clair, soleil en mode sombre */
[data-bs-theme="dark"]  #icone-soleil,
[data-bs-theme="light"] #icone-lune  { display: none }


/* Séparateur vertical pleine hauteur dans les boutons */
.btn .vr { margin-top: -0.375rem; margin-bottom: -0.375rem }

/* Titres de section dans la modale Config — crochet [ */
.config-section-title { position: relative; padding-left: 0.75rem; margin-bottom: 2rem !important }
.config-section-title::before {
    content: ''; position: absolute; left: 0; top: -6px;
    width: 10px; height: calc(100% + 6px + 8px);
    border-left: 3px solid currentColor;
    border-top: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
}

@media (max-width: 576px) and (orientation: portrait),
       (orientation: landscape) and (max-height: 500px) {
    .footer-auteur { display: none }
    /* Répertoire : prend la place centrale du développeur */
    #footer-nav { position: relative }
    #footer-repertoire { position: absolute; left: 50%; transform: translateX(-50%) }
}

/* ── Cartes d'applications ───────────────────────────────────────────────── */
.app-card {
    position: relative;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-bottom: 4px solid var(--app-couleur);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.app-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px var(--app-ombre);
}
.app-banner {
    height: 100px;
    color: #fff;
}
.app-title {
    font-family: "Cairo Play", sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    color: var(--app-debut);
    margin: 0 0 8px 0;
    text-decoration: none;
    transition: color 0.2s;
}
.app-title:hover,
.app-card:hover .app-title { color: var(--app-couleur) }
.app-btn {
    background: var(--app-debut);
    border-color: var(--app-debut);
    color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.app-btn:hover,
.app-card:hover .app-btn {
    background: var(--app-couleur);
    border-color: var(--app-couleur);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--app-ombre);
}

/* Responsive smartphone — cards horizontales */
@media (max-width: 600px) {
    .app-card { display: flex; flex-direction: row; border-bottom-width: 0; border-right: 4px solid var(--app-couleur) }
    .app-card:hover { transform: none; box-shadow: none }
    .app-banner { height: auto; width: 80px; min-height: 80px; flex-shrink: 0; border-radius: 0 }
    .app-banner svg { width: 40px; height: 40px }
    .card-body { padding: 10px 12px !important; text-align: left !important; justify-content: center }
    .app-title { font-size: 1.1em; margin-bottom: 2px }
    .card-body p { margin-bottom: 6px !important }
    .card-body .d-flex { justify-content: flex-start !important; gap: 6px !important }
    .app-btn { font-size: 0.85em; padding: 4px 12px !important }
    .btn-outline-secondary { font-size: 0.75em }
}

/* ── Bouton flottant Tchap ───────────────────────────────────────────────── */
.btn-tchap {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border-radius: 6px;
    background: #1d3bbd;
    color: #fff;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: background 0.2s;
    z-index: 900;
    overflow: hidden;
}
.btn-tchap:hover { background: #162e96; color: #fff }
.btn-tchap-logo { width: 40px; height: 40px; display: block; flex-shrink: 0 }
.btn-tchap-texte { padding: 10px 16px; border-left: 1px solid rgba(255,255,255,0.3); white-space: nowrap }