/* ============================================================
   Bootstrap 5 – compatibilité avec le thème custom MilliWeb
   ------------------------------------------------------------
   Bootstrap 3 appliquait "position: relative" à toutes les
   colonnes (.col-*). Bootstrap 5 ne le fait plus. Or le thème
   positionne en absolu certains éléments (titres/légendes des
   cartes produits : .productN-content / .productN-caption) qui
   s'appuient sur ce contexte de positionnement. Sans cette règle,
   ces éléments s'échappent en haut de page et chevauchent le
   contenu. On restaure donc le comportement de Bootstrap 3.
   ============================================================ */

[class^="col-"],
[class*=" col-"],
.col {
    position: relative;
}

/* ------------------------------------------------------------
   Header (navbar) : le Reboot de Bootstrap 5 ajoute une marge
   basse au titre <h1> de la marque, ce qui gonfle la hauteur du
   header (~105px). On la supprime pour retrouver un header compact,
   on décale le contenu pour que #news ne passe plus SOUS le header
   fixe, et on agrandit la police du menu (12px -> 15px).
   ------------------------------------------------------------ */

.l-navbar-title {
    margin-bottom: 0;
}

.l-navbar-entry,
.l-navbar .nav-link,
.l-navbar-dropdown-entry,
.l-navbar .dropdown-item {
    font-size: 15px;
}

/* Compense la hauteur de la navbar fixe (~89px) pour ne pas
   masquer le haut de la section #news. */
body {
    padding-top: 90px;
}

/* ------------------------------------------------------------
   Footer : hauteur trop élevée (paddings de 50px hérités).
   On resserre le pied de page.
   ------------------------------------------------------------ */

.l-footer {
    padding-top: 22px;
    padding-bottom: 22px;
}

/* ------------------------------------------------------------
   Boutons du bloc news (carrousel des pages produits) :
   le thème s'appuyait sur des float (Bootstrap 3) que Bootstrap 5
   n'applique plus à la grille, d'où les deux boutons regroupés à
   gauche. On rétablit l'écartement gauche/droite via flexbox :
   « Demander un essai » à gauche, « Télécharger la plaquette » à droite.
   ------------------------------------------------------------ */

.l-carousel-buttons {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

.l-carousel-buttons > div {
    width: auto;
}

.l-carousel-buttons .btn {
    float: none;
}