/* =========================================
   _shared/css/responsive-utils.css
   Filets de sécurité responsive / mobile-first partagés.
   Chargé APRÈS le main.css du thème + APRÈS dark-mode.css.
   But : qu'un thème écrit "desktop d'abord" reste lisible sur mobile,
   sans toucher au code du thème.
   ========================================= */

/* ---------- Anti-overflow horizontal ----------
   Beaucoup de hero/sections ont des border-radius custom ou des
   transformations qui débordent. Coupe net le scroll horizontal sur
   mobile (où c'est insupportable).
*/
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ---------- Images responsives par défaut ----------
   Filet pour les <img> qui n'auraient pas explicitement img-fluid.
*/
img {
    max-width: 100%;
    height: auto;
}

/* ---------- Spacers étendus (p-6/m-6) mobile-first ----------
   Bootstrap 5 natif s'arrête à p-5 (3rem). Plusieurs thèmes
   (developer, webdesigner, creative) utilisent p-6 / pt-6 / pe-6
   / pb-6 / ps-6 / px-6 / py-6. webdesigner ne les définit nulle
   part -> padding=0 -> contenu collé aux bords sur mobile.
   developer les définit en valeur fixe -> non responsive.

   On définit ici des valeurs mobile-first qui montent en cascade.
   Les thèmes peuvent surcharger via leur :root si besoin.
*/
:root {
    --shared-spacer-6: 1.25rem;   /* mobile : 20px */
}

@media (min-width: 576px) { :root { --shared-spacer-6: 1.75rem; } }   /* sm : 28px */
@media (min-width: 768px) { :root { --shared-spacer-6: 2.5rem; } }    /* md : 40px */
@media (min-width: 992px) { :root { --shared-spacer-6: 3.5rem; } }    /* lg : 56px */
@media (min-width: 1200px){ :root { --shared-spacer-6: 4.5rem; } }    /* xl : 72px (valeur originale developer) */

.p-6  { padding: var(--shared-spacer-6) !important; }
.pt-6 { padding-top: var(--shared-spacer-6) !important; }
.pe-6 { padding-right: var(--shared-spacer-6) !important; }
.pb-6 { padding-bottom: var(--shared-spacer-6) !important; }
.ps-6 { padding-left: var(--shared-spacer-6) !important; }
.px-6 { padding-left: var(--shared-spacer-6) !important; padding-right: var(--shared-spacer-6) !important; }
.py-6 { padding-top: var(--shared-spacer-6) !important; padding-bottom: var(--shared-spacer-6) !important; }

.m-6  { margin: var(--shared-spacer-6) !important; }
.mt-6 { margin-top: var(--shared-spacer-6) !important; }
.me-6 { margin-right: var(--shared-spacer-6) !important; }
.mb-6 { margin-bottom: var(--shared-spacer-6) !important; }
.ms-6 { margin-left: var(--shared-spacer-6) !important; }
.mx-6 { margin-left: var(--shared-spacer-6) !important; margin-right: var(--shared-spacer-6) !important; }
.my-6 { margin-top: var(--shared-spacer-6) !important; margin-bottom: var(--shared-spacer-6) !important; }

/* ---------- Typographie display-* mobile-first ----------
   Bootstrap display-1..6 sont énormes sur mobile (display-1 = 5rem).
   On les réduit à 60-75% sur < md, retour à la normale en md+.
*/
@media (max-width: 767.98px) {
    .display-1 { font-size: 3.2rem; }
    .display-2 { font-size: 2.8rem; }
    .display-3 { font-size: 2.4rem; }
    .display-4 { font-size: 2rem; }
    .display-5 { font-size: 1.75rem; }
    .display-6 { font-size: 1.5rem; }
    h1 { font-size: calc(1.4rem + 1vw); }
    h2 { font-size: calc(1.3rem + 0.6vw); }
}

/* ---------- Hauteurs fixes -> max-height sur mobile ----------
   Les éléments avec style="height: 400px" (cartes, maps) restent à
   400px sur mobile, ce qui prend trop de viewport. On reverse en
   max-height pour permettre de respirer.
*/
@media (max-width: 767.98px) {
    [style*="height: 400px"],
    [style*="height: 500px"] { height: 280px !important; }
    [style*="height: 320px"] { height: 240px !important; }
    [style*="height: 240px"] { height: 200px !important; }
    [style*="height: 200px"] { height: 160px !important; }
    [style*="height: 120px"] { height: 90px !important; }
    [style*="width: 120px"][style*="height: 120px"] { width: 90px !important; height: 90px !important; }
    [style*="width: 100px"][style*="height: 100px"] { width: 70px !important; height: 70px !important; }
}

/* ---------- Tableaux responsive ----------
   Filet pour les <table> qui ne sont pas dans un .table-responsive.
*/
table {
    max-width: 100%;
}

@media (max-width: 767.98px) {
    table.table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ---------- Container fluid : padding mobile-first ---------- */
@media (max-width: 575.98px) {
    .container, .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ---------- Sections : padding vertical mobile-first ----------
   Les sections .section ou .py-5 sont souvent surdimensionnées sur
   mobile. On les réduit progressivement.
*/
@media (max-width: 575.98px) {
    section.section,
    .section-padding {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ---------- Hero : éviter les hauteurs vh trop grandes sur mobile ----------
   100vh sur mobile = barre d'adresse incluse = scroll forcé. On limite.
*/
@media (max-width: 767.98px) {
    .hero, .hero-section,
    [class*="hero"][class*="vh-100"],
    .vh-100.hero { min-height: 80vh !important; height: auto !important; }
}

/* ---------- Border-radius "blob" extrêmes -> doux sur mobile ----------
   developer/webdesigner heros utilisent un blob asymétrique
   (style="border-radius: 68% 32% 100% 0% / 0% 75% 25% 100%") qui
   produit une forme bizarre / écrasée < 576px. On force du rond doux.
*/
@media (max-width: 575.98px) {
    [style*="border-radius: 68%"],
    [style*="border-radius:68%"] {
        border-radius: 1.5rem !important;
    }
}

/* ---------- Hero & Contact "split column" (developer/webdesigner) ----------
   #pigraHero ET #pigraContact suivent le même pattern :
   col-12 col-lg-3 (bandeau bg-dark) + col-12 col-lg-9 (contenu).
   En empilé mobile, la colonne dark prenait une "h-100" vide -> bandeau
   noir énorme avec juste un titre. On normalise.
*/
@media (max-width: 991.98px) {
    #pigraHero .header-content,
    #pigraHero .header-img,
    #pigraContact .contact-header,
    #pigraContact .contact-content {
        height: auto !important;
        padding: 1.5rem !important;
    }
    #pigraHero .header-content,
    #pigraContact .contact-header {
        text-align: center;
    }
    #pigraHero .header-content .d-flex.flex-column,
    #pigraContact .contact-header .d-flex.flex-column {
        align-items: center;
    }
    /* Centrer l'image blob du hero qui tend à coller à gauche en mobile */
    #pigraHero .header-img > .row.g-5 > [class*="col-"] {
        text-align: center;
    }
    #pigraHero .header-img img {
        max-width: 280px;
        margin-inline: auto;
    }
}

/* ---------- btn-xl-square / btn-lg-square / btn-sm-square fallback ----------
   Plusieurs thèmes utilisent ces classes pour des "boutons carrés"
   (icônes contact/social) mais ne les définissent pas toujours. Sans
   width/height -> div écrasée. On donne des dimensions par défaut.
*/
.btn-xl-square { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-lg-square { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-sm-square { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- Formulaire de contact : champs pleine largeur sur mobile ----------
   Bootstrap garantit déjà 100% pour .form-control, mais certaines
   sections custom utilisent du width inline. On force du défensif.
*/
@media (max-width: 575.98px) {
    form .form-control,
    form input[type="text"],
    form input[type="email"],
    form input[type="tel"],
    form textarea {
        width: 100% !important;
    }
    /* Empêche les boutons submit côte à côte de déborder */
    form .row > [class*="col-"] {
        margin-bottom: 0.75rem;
    }
}

/* ---------- Barre de langues : wrap au lieu d'overflow sur mobile ----------
   .language-selector dans corporate utilise un d-flex avec X boutons.
   Au delà de 4 langues, ça déborde sur < 400px. On force wrap.
*/
@media (max-width: 575.98px) {
    .language-bar .language-selector,
    .language-selector,
    .language-selector form {
        flex-wrap: wrap !important;
        gap: 0.375rem !important;
        justify-content: center !important;
    }
}

/* ---------- Décorations absolues (corporate) -> cachées sur mobile ----------
   Le hero corporate empile des shapes 200px et 150px en position-absolute
   qui chevauchent le contenu sur petits écrans. On les masque < md.
*/
@media (max-width: 767.98px) {
    .hero-background > .position-absolute,
    .hero > .position-absolute[style*="border-radius"] {
        display: none !important;
    }
}

/* ---------- CTA stack mobile-first ----------
   Plusieurs heros ont 2 boutons CTA côte à côte. Sur mobile, on les
   empile en pleine largeur pour un meilleur tap target.
*/
@media (max-width: 575.98px) {
    .hero-cta .btn,
    .hero-cta > a.btn,
    .hero-cta > button.btn {
        display: block !important;
        width: 100% !important;
        margin: 0 0 0.75rem 0 !important;
    }
    .hero-cta .btn:last-child {
        margin-bottom: 0 !important;
    }
}

/* ---------- Boutons sociaux mobile : wrap au lieu d'overflow ----------
   .d-flex avec 4+ btn-sm-square peut overflow horizontalement < sm.
*/
@media (max-width: 575.98px) {
    .header-img .d-flex:has(> .btn-sm-square),
    .hero .d-flex:has(> .btn-sm-square) {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
}

/* =========================================================================
   Media bento — galerie à tuiles variées (images + vidéos).
   Bootstrap n'a pas de bento natif : classe partagée définie ICI (couche
   _shared chargée par TOUS les thèmes, après Bootstrap et le CSS du thème,
   AVANT la perso couleurs du tenant). AUCUN !important + couleurs via
   var(--bs-*) → un thème ou la perso CSS du tenant peuvent l'écraser.
   Consommé par templates/themes/_shared/components/media_bento.html.
   ========================================================================= */
.media-bento {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 10rem;
    gap: 0.75rem;
    grid-auto-flow: dense;
}
.media-bento__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--bs-border-radius, 0.5rem);
    background: var(--bs-tertiary-bg, #f1f3f5);
}
.media-bento__link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;                 /* la tuile image ouvre le lightbox (swipe) */
}
.media-bento__item img,
.media-bento__item iframe,
.media-bento__item video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.media-bento__item img {
    object-fit: cover;               /* les images remplissent leur tuile */
    transition: transform 0.3s ease;
}
.media-bento__item:hover img {
    transform: scale(1.04);
}
.media-bento__item iframe,
.media-bento__item video {
    object-fit: contain;             /* les vidéos ne sont jamais rognées */
    background: #000;
}
/* Tailles de tuiles (bento) */
.media-bento__item--wide { grid-column: span 2; }
.media-bento__item--tall { grid-row: span 2; }
.media-bento__item--big  { grid-column: span 2; grid-row: span 2; }

/* Légende superposée facultative */
.media-bento__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}

@media (min-width: 768px) {
    .media-bento {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 11rem;
    }
}