/* Anti-"tremblement" au chargement / rafraîchissement : on réserve en
   permanence la place de la barre de défilement verticale. Sans ça, au
   chargement la barre apparaît une fois le contenu monté et la largeur utile
   de la page se réduit brusquement (~15-17px) → tout le contenu se décale
   horizontalement, ce qui donne cet effet de saut/tremblement à chaque
   rafraîchissement. `overflow-y: scroll` couvre tous les navigateurs,
   `scrollbar-gutter: stable` gère proprement les barres en superposition. */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

/* Transitions de navigation natives (View Transitions API) : fondu doux entre
   les pages au clic et au retour arrière, façon SPA, SANS aucun JavaScript.
   Pris en charge par les navigateurs Chromium récents (Chrome/Edge) ; ailleurs
   la navigation reste normale, sans effet indésirable (dégradation propre). */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 250ms;
    animation-timing-function: ease;
}

/* Accessibilité : pas de fondu pour les utilisateurs qui réduisent les
   animations. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

/* Animations d'entrée AOS désactivées : elles rejouaient à chaque
   rafraîchissement (fondu + glissement) sans réelle valeur, et faisaient
   "trembler"/apparaître la page progressivement. Le contenu s'affiche
   désormais immédiatement, à sa position finale, sans fondu ni mouvement.
   Placé après aos.css avec !important ; body.css est versionné (?v=) donc
   pris en compte sans purge de cache. */
[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

body {
    background-color: #f5f5f5;
    font-family: 'Poppins', sans-serif;
}

/* Pied de page toujours calé en bas de la fenêtre.
   Sur les pages au contenu court (suivi, succès, contact…) le footer
   remontait au milieu de l'écran et le fond gris du body apparaissait en
   bande sous lui. Toutes les pages du frontend partagent la même structure
   body > header + main.main + footer, la règle vaut donc pour toutes.
   #preloader et .scroll-top sont en position: fixed, hors flux : ils ne
   deviennent pas des éléments flex. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > .main {
    flex: 1 0 auto;
    /* Le <main> est transparent par défaut : sur une page courte, l'espace
       ajouté par flex laissait apparaître le gris du body en bande entre le
       contenu et le footer. Les sections repeignent par-dessus (blanc ou
       #f4f8fc), ce fond n'est donc visible que dans cet espace de calage. */
    background-color: #ffffff;
}

body > footer {
    flex-shrink: 0;
}

/* Hauteur fixe du header public (barre du logo + menu).
   Elle était en `min-height` (extensible) et le logo n'a pas de dimensions :
   selon le contenu (nom d'établissement long, police/image en cache froid) ou
   la page, la hauteur pouvait varier et décaler tout le contenu sous le
   header. On fige la barre à 60px (topbar déjà à 40px → header = 100px
   constant) et on réserve la taille du logo pour éviter tout saut. */
.header .branding {
    height: 60px;
    min-height: 60px;
}

.header .logo img {
    height: 36px;
    width: auto;
}

.index-page .topbar {
    background-color: #082B61;
}

.index-page footer {
    background-color: #082B61;
}

.language-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
}

.language-toggle a {
    font-size: 14px;
    color: #555555;
    text-decoration: none;
    padding: 5px 10px;
    transition: color 0.3s, font-weight 0.3s;
}

.language-toggle a:hover {
    color: #0D47A1;
}

.language-toggle .active {
    font-weight: bold;
    text-decoration: underline;
    color: #0D47A1;
}

.language-toggle a:not(.active):hover {
    color: #0D47A1;
}

.navmenu .dropdown a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: flex;
    align-items: center;
}

.navmenu .dropdown:hover > a {
    background-color: #333;
}

.navmenu .dropdown ul {
    display: none;
    position: absolute;
    background-color: #fff;
    color: #333;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.navmenu .dropdown:hover > ul {
    display: block;
}

.navmenu .dropdown ul li {
    padding: 8px 15px;
    background-color: #f5f5f5;
}

.navmenu .dropdown ul li a {
    color: #555555;
    text-decoration: none;
}

.navmenu .dropdown ul li a:hover {
    color: #0D47A1;
}

.navmenu .bouton {
    border-radius: 10px;
    border: 1px solid #0D47A1;
    background-color: #FFFFF0;
    margin: 8px;
    box-shadow: 0 3px 5px #36454F;
}

.navmenu a {
    padding: 5px 10px !important;
}

.dropdown-link {
    background-color: #FFFFF0;
}