/* ═══════════════════════════════════════════════════════════════════════
   Feuille COMMUNE du site vitrine — le gabarit des 8 pages
   (accueil, mairie, entreprises, assistant, chatbot, sécurité, jeux, boussole)

   Elle porte tout ce qui est partagé : polices, variables, base typographique,
   en-tête et menu (commun/entete.html), pied de page et mentions légales
   (commun/pied.html). On la modifie ICI, directement :
   il n'y a ni générateur ni copie.

   ⚠️ Chargée AVANT le <style> de chaque page : la page ne porte plus que sa propre
   mise en page, et peut surcharger une valeur de base (le fond de l'accueil, par
   exemple). Une page ne doit plus JAMAIS redéfinir l'en-tête, le menu, le pied de
   page ou la modale — `scripts/verifier-site.py` le contrôle.

   ⚠️ Cache : servie en `no-cache` par la location `^~ /commun/` du vhost. Sans elle,
   la règle générale des .css (`expires 1y`, `immutable`) garderait l'ancienne
   version un an chez tout visiteur déjà venu.
   ═══════════════════════════════════════════════════════════════════════ */

/* ----- Polices auto-hébergées (aucun appel à un tiers : CSP font-src 'self') ----- */
@font-face{font-family:'Exo 2';src:url('/fonts/exo-2-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Exo 2';src:url('/fonts/exo-2-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Exo 2';src:url('/fonts/exo-2-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Exo 2';src:url('/fonts/exo-2-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ----- Variables et base ----- */
:root {
    --bleu: #1E3A5F;
    --bleu-clair: #2A4A73;
    --orange: #F97316;
    --orange-hover: #EA580C;
    --gris: #475569;
    --gris-clair: #94A3B8;
    --blanc-casse: #F8FAFC;
    --blanc: #FFFFFF;
    --font-titre: 'Exo 2', sans-serif;
    --font-corps: 'Inter', sans-serif;
    --radius: 10px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-corps);
    font-size: 16px;
    line-height: 1.6;
    color: var(--gris);
    background-color: var(--blanc-casse);
}
h1, h2, h3, h4 { font-family: var(--font-titre); color: var(--bleu); line-height: 1.2; }
a { color: var(--orange); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--orange-hover); }
img { max-width: 100%; height: auto; }

/* ----- Mise en page ----- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { padding: 80px 0; }

/* ----- En-tête et menu (commun/entete.html) ----- */
header {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--blanc); box-shadow: var(--shadow);
    z-index: 1000; transition: transform 0.3s ease;
}
header .container { display: flex; justify-content: space-between; align-items: center; height: 70px; }
.logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-titre); font-weight: 600; font-size: 1.61rem; color: var(--bleu); }
.logo img { height: 58px; width: auto; }
nav { display: flex; align-items: center; gap: 28px; }
nav a { display: flex; align-items: center; color: var(--gris); font-weight: 500; font-size: 0.95rem; position: relative; }
nav a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--orange); transition: width 0.3s ease; }
nav a:hover { color: var(--bleu); }
nav a:hover::after { width: 100%; }
nav a.active { color: var(--bleu); font-weight: 600; }
nav a.active::after { width: 100%; }
.nav-cta { background: var(--orange); color: var(--blanc) !important; padding: 10px 20px; border-radius: var(--radius); font-weight: 600; }
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--orange-hover); color: var(--blanc) !important; }
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.95rem; font-weight: 500; color: var(--gris); display: flex; align-items: center; gap: 4px; padding: 0; transition: color 0.3s; }
.nav-dropdown-toggle:hover, .nav-dropdown:hover .nav-dropdown-toggle { color: var(--bleu); }
.nav-dropdown-toggle .chevron { font-size: 1.1rem; transition: transform 0.3s; }
.nav-dropdown:hover .nav-dropdown-toggle .chevron { transform: rotate(180deg); }
.nav-dropdown-menu { display: flex; flex-direction: column; opacity: 0; visibility: hidden; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--blanc); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0,0,0,0.12); padding: 8px 0; z-index: 1000; transition: opacity 0.2s, visibility 0.2s, transform 0.2s; }
.nav-dropdown-menu::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: var(--blanc); box-shadow: -2px -2px 4px rgba(0,0,0,0.04); }
.nav-dropdown-menu::after { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown-menu a { padding: 10px 20px; font-size: 0.9rem; color: var(--gris); font-weight: 500; transition: background 0.2s, color 0.2s; white-space: nowrap; position: relative; }
.nav-dropdown-menu a::after { bottom: 2px; left: 20px; width: 0; }
.nav-dropdown-menu a:hover { color: var(--bleu); }
.nav-dropdown-menu a:hover::after { width: calc(100% - 40px); }
.nav-dropdown-menu a.active { color: var(--orange); }
.nav-dropdown-menu a.active::after { width: calc(100% - 40px); }
.menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 10px; }
.menu-toggle span { width: 25px; height: 3px; background: var(--bleu); border-radius: 2px; transition: all 0.3s ease; }
.nav-dropdown-menu { min-width: 296px; padding: 6px 0 8px; }
.nav-dropdown-menu a { display: block; white-space: normal; line-height: 1.3; }
.nav-dropdown-menu a s {
    display: block; text-decoration: none; font-size: 0.76rem; font-weight: 400;
    color: #94A3B8; margin-top: 2px; line-height: 1.35;
}
.nav-dropdown-menu a:hover s { color: #64748B; }
/* le bouton de menu est un vrai <button> : on retire l'habillage du navigateur */
.menu-toggle { background: none; border: 0; font: inherit; }
.menu-toggle:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }

/* ----- Pied de page (commun/pied.html) ----- */
footer {
    background: var(--bleu); border-top: 1px solid rgba(255,255,255,0.1);
    padding: 30px 0; text-align: center; color: var(--gris-clair); font-size: 0.9rem;
}
footer a { color: var(--gris-clair); }
footer a:hover { color: var(--orange); }
.pied-liens {
    position: static;   /* garde-fou : aucune règle de balise ne doit le déplacer */
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px 26px; margin-bottom: 20px; padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pied-liens a { text-decoration: none; font-size: 0.88rem; color: #9FADC2; }
.pied-liens a:hover { text-decoration: underline; }

/* ----- Mentions légales (modale du pied de page) ----- */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.active { display: flex; }
.modal-content { background: var(--blanc); border-radius: var(--radius); max-width: 600px; max-height: 80vh; overflow-y: auto; padding: 40px; position: relative; }
.modal-close { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--gris); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; }
.modal-close:hover { background: var(--blanc-casse); color: var(--bleu); }
.modal-content h2 { font-size: 1.5rem; margin-bottom: 24px; }
.modal-content h3 { font-size: 1.1rem; margin-top: 20px; margin-bottom: 8px; }
.modal-content p { font-size: 0.95rem; margin-bottom: 12px; color: var(--gris); }

/* ----- Menu mobile (≤ 768 px) -----
   Une seule couche de règles : celles d'origine et les corrections du 2026-09-17,
   fusionnées. Le panneau s'aligne à gauche sur toute la largeur (avant, les deux
   entrées dépliantes tiraient à gauche et les liens simples au centre, parce que
   le sous-menu invisible, en `white-space:nowrap`, élargissait son parent), il
   défile s'il dépasse l'écran, et un voile ferme le tout. */
@media (max-width: 768px) {
    section { padding: 44px 0; }
    nav {
        display: none; position: absolute; top: 70px; left: 0; right: 0;
        background: var(--blanc); box-shadow: var(--shadow);
        flex-direction: column; align-items: stretch; text-align: left;
        gap: 0; padding: 6px 0 14px;
        max-height: calc(100vh - 70px);
        max-height: calc(100dvh - 70px);
        overflow-y: auto; overscroll-behavior: contain;
        border-top: 1px solid rgba(30, 58, 95, 0.09);
    }
    nav.active { display: flex; }
    nav > a, .nav-dropdown-toggle {
        width: 100%; min-height: 48px; padding: 0 24px;
        font-size: 1rem; box-sizing: border-box;
    }
    nav > a::after { display: none; }
    nav > a.nav-cta {
        margin: 12px 24px 0; width: auto; padding: 12px 20px;
        justify-content: center; border-radius: var(--radius);
    }
    .menu-toggle { display: flex; }
    .nav-dropdown { width: 100%; }
    .nav-dropdown-toggle { justify-content: space-between; }
    .nav-dropdown-toggle .chevron { transition: transform .25s ease; }
    .nav-dropdown.open .nav-dropdown-toggle .chevron { transform: rotate(180deg); }
    .nav-dropdown-menu {
        position: static; transform: none; box-shadow: none;
        min-width: 0; padding: 0; background: #F4F7FB; border-radius: 0;
        opacity: 0; visibility: hidden; max-height: 0; overflow: hidden;
        transition: opacity .2s, max-height .3s ease, padding .3s ease;
    }
    .nav-dropdown:hover .nav-dropdown-menu { opacity: 0; visibility: hidden; }
    .nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; max-height: 520px; padding: 6px 0 8px; }
    .nav-dropdown-menu::before { display: none; }
    .nav-dropdown-menu a { padding: 9px 24px 9px 38px; font-size: 0.95rem; }
    .nav-dropdown-menu a s { font-size: 0.78rem; }
    .nav-dropdown-menu a::after { left: 0; }
    .nav-dropdown-menu a:hover::after { width: 100%; }
    /* voile : fermer le menu en touchant la page derrière */
    .voile-menu {
        position: fixed; inset: 70px 0 0; z-index: 900;
        background: rgba(15, 23, 42, 0.42);
        opacity: 0; visibility: hidden;
        transition: opacity .25s ease, visibility .25s;
    }
    body.menu-ouvert .voile-menu { opacity: 1; visibility: visible; }
    body.menu-ouvert { overflow: hidden; }
    /* les trois barres deviennent une croix */
    .menu-toggle span { transform-origin: center; }
    .menu-toggle.ouvert span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.ouvert span:nth-child(2) { opacity: 0; }
    .menu-toggle.ouvert span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
@media (min-width: 769px) { .voile-menu { display: none; } }

/* ----- Typographie : des lignes PLEINES, sans mot isolé -----
   `pretty` et non `balance`. `balance` égalise les lignes, donc
   coupe exprès vers la moitié de la largeur : un titre de deux
   lignes s'arrêtait au milieu de la colonne, la place restant vide
   à droite — exactement le défaut relevé par Thibault (2026-09-18).
   `pretty` garde les lignes pleines et ne retouche que la fin du
   paragraphe, pour qu'un dernier mot ne reste pas seul. Ignoré par
   les navigateurs qui ne le connaissent pas : le texte reste alors
   celui d'avant. h1 est INCLUS : sur les pages Solutions, seul son
   ancien plafond de 16ch l'empêchait de laisser « mairie » seul sur
   la seconde ligne. Là où ses coupures sont posées à la main (<br>
   de l'accueil), chaque ligne tient déjà : `pretty` n'y change rien. */
h1, h2, h3, p, li, figcaption, blockquote { text-wrap: pretty; }
/* ⚠️ Pas de `.tt` ni de `.ss` ICI : le constructeur renomme toute classe
   présente à la fois dans ce gabarit et dans le CSS de la mise en page
   (`collisions`, dans build-accueil.py). Une règle posée sur ces deux
   noms viserait, après reconstruction, des classes qui n'existent plus —
   sans erreur, et sans effet. Leur `text-wrap` et leur largeur sont
   déclarés avec elles, dans gen-accueil.py. */

/* ----- Flèche « remonter en haut » : son style est dans commun/haut-page.js,
   avec son comportement (la SPA la charge aussi, sans cette feuille). ----- */

/* ----- Pied de page : cibles tactiles tenables au doigt ----- */
@media (max-width: 768px) {
    .pied-liens { gap: 2px 22px; }
    .pied-liens a { display: inline-flex; align-items: center; min-height: 40px; }
}