/* =====================================================================================================================
   Mise en page « pleine largeur » (Aldric, 02/10/2026 : « une version du site qui utilise plus la largeur de l'écran
   et s'adapte bien à chaque PC, téléphone, tablette »).

   Avant : le thème figeait le contenu à 1140 px sur tout ordinateur (1920 px d'écran = 780 px de bandes vides) et à
   450 px sur les grands téléphones tenus à l'horizontale (480-767 px).
   Maintenant : le contenu suit la largeur de l'écran, avec une marge qui grandit avec lui, jusqu'à 1680 px au plus
   (au-delà, des lignes de texte trop longues deviennent pénibles à lire).

   Tout est réglé ici, par deux valeurs :
     --dqn-page-max  largeur maximale d'une page, marges comprises
     --dqn-gutter    marge de part et d'autre du contenu
   Pour revenir à l'ancienne mise en page : retirer ce fichier de BundleConfig.cs.
   ===================================================================================================================== */

:root {
    --dqn-page-max: 1680px;
    --dqn-gutter: 16px;
}
@media (min-width: 768px)  { :root { --dqn-gutter: 24px; } }
@media (min-width: 1200px) { :root { --dqn-gutter: 40px; } }
@media (min-width: 1600px) { :root { --dqn-gutter: 56px; } }

/* Conteneur de page : le thème (style.min.css) et Bootstrap imposent 450 / 750 / 970 / 1170 px, parfois en !important */
.container,
body .container {
    width: 100% !important;
    max-width: var(--dqn-page-max) !important;
    padding-left: var(--dqn-gutter);
    padding-right: var(--dqn-gutter);
}

/* Accueil : ses sections ont leur propre cadre (1180 px dans HomeIndex.cshtml) */
.hp .hp-wrap {
    max-width: var(--dqn-page-max);
    padding-left: var(--dqn-gutter);
    padding-right: var(--dqn-gutter);
}

/* Support : le rail des 3 étapes se pose dans la marge gauche, à côté du contenu ; il n'apparaît que si cette marge
   est assez large (172 px), sinon les étapes restent dans la carte comme sur écran moyen */
@media (min-width: 1480px) {
    .supportRail { display: none !important; }
}
@media (min-width: 2030px) {
    .supportRail { display: block !important; left: calc((100% - var(--dqn-page-max)) / 2 + var(--dqn-gutter) - 172px) !important; }
}

/* ---- Rien ne dépasse de l'écran (téléphone, tablette) : ces éléments obligeaient à faire glisser la page de côté ---- */

/* Fiche produit : la photo de détail était figée à 600 px ; ses zones cliquables suivent (imageMapResize) */
.imageDetail { max-width: 100%; height: auto; }

/* Diaporamas : la rangée de points était décalée de 15 px tout en faisant toute la largeur */
.slick-slider > .slick-dots { left: 0; right: 0; width: auto; }

/* Mentions légales : un tableau trop large défile dans son cadre au lieu d'élargir la page */
.legalTable { display: block; max-width: 100%; overflow-x: auto; }

/* Histoire (frise) : photos figées à 400 px */
.timeline img { max-width: 100%; height: auto; }

/* Vignettes des produits (250 px) : jamais plus larges que leur colonne */
.productImage img { max-width: 100%; height: auto; }

/* En-tête : custom.css retirait toute marge au menu entre 768 et 1200 px (logo collé au bord de l'écran) */
.navbar-default .container,
.topBar .container {
    padding-left: var(--dqn-gutter);
    padding-right: var(--dqn-gutter);
}