/* =============================================================================
   compat-bootstrap.css

   Reprend les SEULES règles de Bootstrap 3.3.6 dont le front public dépend
   encore. Remplace les 118,4 Ko de /css/bootstrap.min.css par ~3 Ko.

   Bootstrap 3.3.6 date de 2015 et n'est plus maintenu depuis 2019. Il était
   chargé sur toutes les pages publiques uniquement pour une poignée de règles
   de grille, un fil d'Ariane et l'état fermé d'un menu déroulant.

   L'administration n'est pas concernée : EasyAdmin embarque son propre CSS, et
   les trois pages d'admin autonomes tirent un Bootstrap 5 d'un CDN. Aucune ne
   pointait vers /css/bootstrap.min.css.

   ORDRE DE CHARGEMENT — important
     Cette feuille doit rester chargée APRÈS build/app.css, exactement là où
     bootstrap.min.css se trouvait. La partie [2] ne gagne que par la cascade :
     la déplacer plus haut ferait basculer la typographie du site d'un coup.

   DEUX PARTIES
     [1] PERMANENT    grille, fil d'Ariane, menu déroulant, méga-menu.
                      À garder tant que ces classes sont dans les gabarits.
     [2] TRANSITOIRE  typographie de base de Bootstrap 3, reproduite à
                      l'identique pour que le retrait ne change RIEN le jour J.
                      À retirer ensuite déclaration par déclaration.
   ========================================================================== */


/* ===========================================================================
   [1] PERMANENT
   ======================================================================== */

/* --- Grille ---------------------------------------------------------------
   .container sert à deux choses : enveloppe de page dans base.html.twig, et
   section interne des pages d'atterrissage SEO. app.css lui donne déjà un fond
   et une hauteur minimale ; seules la largeur et les gouttières venaient de
   Bootstrap. Sans ces règles, la page passe de 1170 px à pleine largeur. */
.container {
    width: 100%;
    max-width: 1170px;
    margin-inline: auto;
    padding-inline: 15px;
}

@media (max-width: 1199.98px) { .container { max-width: 970px; } }
@media (max-width:  991.98px) { .container { max-width: 750px; } }
@media (max-width:  767.98px) { .container { max-width: none;  } }

/* .row en flex : plus de float ni de clearfix ::before/::after à reproduire. */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -15px;
}

/* Les colonnes existent AUSSI hors .row : base.html.twig pose .col-md-12 sur
   le menu et sur <main>, tous deux enfants directs de .container. Le
   rembourrage de 15 px doit donc être porté par la colonne elle-même, sinon
   .hero-section de l'accueil — qui compense par margin: -20px -15px — déborde
   de 15 px de chaque côté. */
.col-md-4,
.col-md-6,
.col-md-8,
.col-md-12,
.col-lg-4,
.col-lg-8 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-inline: 15px;
}

.row > .col-md-4,
.row > .col-md-6,
.row > .col-md-8,
.row > .col-md-12,
.row > .col-lg-4,
.row > .col-lg-8 { flex: 0 0 auto; }

@media (min-width: 992px) {
    .col-md-4  { width: 33.333333%; }
    .col-md-6  { width: 50%; }
    .col-md-8  { width: 66.666667%; }
    .col-md-12 { width: 100%; }
}

@media (min-width: 1200px) {
    .col-lg-4 { width: 33.333333%; }
    .col-lg-8 { width: 66.666667%; }
}


/* --- Fil d'Ariane des pages d'atterrissage SEO ----------------------------
   Les surcharges de <li> sont nécessaires : app.css pose ol,ul{padding-left:24px}
   et li{margin-bottom:4px}, que Bootstrap écrasait. */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 20px;
    padding: 8px 15px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.breadcrumb > li { margin-bottom: 0; }

.breadcrumb > li + li::before {
    content: "/\00a0";
    padding: 0 5px;
    color: #ccc;
}

.breadcrumb > .active { color: #777; }


/* --- Mini-panier ----------------------------------------------------------
   Règle non négociable. Le <style> de templates/cart/_mini.html.twig
   dimensionne .mini-cart-dropdown (position, largeur, ombre) mais ne pose
   AUCUN display : l'état fermé venait uniquement de Bootstrap. Sans ce bloc,
   le panneau du panier est peint OUVERT à chaque chargement de page, puis
   refermé par le script au window.load — clignotement visible et décalage de
   mise en page sur tout le site. */
.dropdown { position: relative; }

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 160px;
    margin: 2px 0 0;
    padding: 5px 0;
    list-style: none;
    text-align: left;
    background-color: #fff;
    background-clip: padding-box;
}

.dropdown-menu-right { right: 0; left: auto; }

.open > .dropdown-menu { display: block; }


/* --- Méga-menu ------------------------------------------------------------
   templates/accueil/menu.html.twig surcharge déjà .navbar, .navbar-nav,
   .navbar-collapse, .navbar-toggle et .caret en !important. Ne restent que les
   règles héritées de .nav : sans elles, app.css (ol,ul{padding-left:24px},
   li{margin-bottom:4px}) décale la barre de 24 px vers la droite et les liens
   perdent tout rembourrage vertical.

   À la recette : le méga-menu n'est pas dans le HTML initial. menu-differe.js
   va le chercher sur /menu, et seulement au-dessus de 992 px de large. */
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav > li {
    position: relative;
    display: block;
    margin-bottom: 0;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

@media (min-width: 768px) {
    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}


/* ===========================================================================
   [2] TRANSITOIRE — à supprimer après recette visuelle

   Bootstrap était chargé APRÈS build/app.css : ses règles de base gagnaient
   donc la cascade et dictaient toute la typographie du site. Le retirer rend
   la main à app.css, ce qui change d'un seul coup :

       police       Helvetica Neue   ->  Jost
       corps        14 px            ->  18 px
       interligne   1.42857143       ->  1.5
       texte        #333             ->  #33383c
       fond         #fff             ->  #fdfdfd
       liens        #337ab7 bleu     ->  #33383c gris sombre, non souligné

   Ce bloc reproduit l'ancien rendu pour que la dépose soit invisible. À
   retirer ensuite une déclaration à la fois, en regardant les pages entre
   chaque retrait. Ordre conseillé, du moins risqué au plus risqué :
   label, puis p/ul, puis a, puis body, puis html.
   ======================================================================== */

/* À retirer EN DERNIER. Les 21 valeurs en rem des gabarits
   templates/blog/articles/*.twig et le clamp() de savphoneandpad.css ont été
   écrits contre cette racine à 10 px : les libérer les fait grossir de 60 %.
   Convertir ces déclarations en px au moment du retrait. */
html { font-size: 10px; }

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

a { color: #337ab7; }
a:hover,
a:focus { color: #23527c; text-decoration: underline; }

p { margin: 0 0 10px; }
ol, ul { margin-bottom: 10px; }

/* Les <label> des formulaires de contact, rachat, commande et connexion sont
   déjà habillés par le <style> de leur gabarit. Cette règle ne sert qu'aux
   <label> nus. */
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}