/* ==========================================================================
   REKA SECURITY - Finitions responsive (tablette & mobile)
   Chargé en DERNIER : l'emporte à spécificité égale sur style.css et les
   feuilles chargées en asynchrone. Uniquement des sélecteurs déjà présents
   dans le gabarit => s'applique aux 5 langues sans toucher au HTML.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLETTE ET MOINS (< 992px) - le thème bascule en header-mobile à 993px
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Les animations skrollr sont calées sur des positions de scroll absolues
       (data-0 / data-600) pensées pour le desktop : sur tablette elles laissent
       des cartes à scale(0) (grands vides) ou à moitié animées (décalages).
       Skrollr pose ses styles en inline, d'où le !important. */
    .skrollable {
        transform: none !important;
        opacity: 1 !important;
    }

    /* Pas de scroll horizontal parasite (animations fadeInRight, parallaxe). */
    html,
    body {
        overflow-x: hidden;
    }

    /* Menu mobile fermé : le thème le masque via overflow:hidden du header,
       mais le 1er lien ("Accueil") dépasse sous le logo sur tablette. */
    header.header-mobile:not(.menu-open) #mainmenu {
        visibility: hidden;
    }

    /* Menu ouvert : liste défilable sous la barre du logo. */
    header.header-mobile.menu-open #mainmenu {
        visibility: visible;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100dvh - 90px);
        padding-bottom: 120px !important;
    }

    header.header-mobile #mainmenu a.menu-item {
        min-height: 48px;
        display: flex;
        align-items: center;
        font-size: 17px;
    }

    /* Flèche de sous-menu : le thème la pose à top:48px, soit sur la ligne
       du lien suivant. On la recale sur sa ligne, en zone tactile 48x48. */
    header.header-mobile #mainmenu > li > span {
        top: 0 !important;
        margin: 0 !important;
        right: 0;
        width: 48px;
        height: 48px;
        background-position: center !important;
        cursor: pointer;
    }

    /* Méga-menu déplié : le JS du thème anime une hauteur inline mesurée trop
       tôt (contenu tronqué + 2e barre de défilement). Une fois ouvert (flèche
       .active), on libère la hauteur. Fermé, le JS garde la main (height:0). */
    header.header-mobile #mainmenu > li:has(> span.active) > ul.mega {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Les cartes de sous-menu utilisent toute la largeur. */

    header.header-mobile #mainmenu ul.mega > li {
        padding-left: 0 !important;
    }

    header.header-mobile #mainmenu ul.mega .container,
    header.header-mobile #mainmenu ul.mega .sb-menu {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Topbar : le message d'accroche ne tient pas, on garde téléphone + email. */
    #topbar .topbar-widget:has(img[src*="bell"]) {
        display: none;
    }

    #topbar .d-flex.justify-content-between {
        justify-content: center !important;
    }

    #topbar .topbar-widget.me-5 {
        margin-right: 1.5rem !important;
    }

    /* Marges latérales homogènes : le contenu ne colle plus aux bords. */
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Hero : hauteur maîtrisée et contenu centré verticalement
       (sinon la moitié basse de l'écran reste vide en portrait). */
    section:first-of-type > .v-center,
    section:first-of-type .swiper,
    section:first-of-type .swiper-inner {
        height: min(100svh, 760px) !important;
        min-height: 0 !important;
    }

    section:first-of-type .sw-caption {
        top: 50% !important;
        transform: translateY(-50%);
    }

    section:first-of-type .sw-caption .spacer-double {
        display: none;
    }

    /* CTA du hero : vrai bouton plein, facile à toucher. */
    section:first-of-type .sw-caption .btn-main,
    section:first-of-type .sw-caption a[class*="btn"] {
        background: var(--primary-color, #c0161c);
        border-color: transparent;
        min-height: 48px;
        padding: 12px 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Titres : retour à la ligne équilibré (plus de "?" orphelin). */
    h1, h2, h3, h4 {
        text-wrap: balance;
        overflow-wrap: break-word;
    }

    /* Badges de certification : plus grands et centrés. */
    .row.justify-content-center > .col-sm-2.col-6 {
        flex: 0 0 auto;
        width: 180px;
    }

    .row.justify-content-center > .col-sm-2.col-6 img {
        border-radius: 6px;
    }

    /* En-tête des pages internes : container-fluid sans marge => la grille
       d'infos projet (Client / Secteur / Lieu / Année) débordait. */
    section.jarallax > .container-fluid {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* CTA du header : le thème le passe à 11px dès la tablette. */
    header .menu_side_area .btn-main,
    header .menu_side_area .btn-main span {
        font-size: 13px !important;
    }

    /* Glissement latéral => fondu simple dès la tablette : les cartes
       Défis/Solutions (pages projet) et les grilles de secteurs sortaient
       de l'écran pendant l'animation fadeInLeft/Right. */
    .wow.fadeInRight,
    .wow.fadeInLeft {
        animation-name: fadeIn !important;
    }

    /* Grilles 2 colonnes (col-md-6) de 3 éléments : le 3e restait seul à
       gauche avec un vide à droite. On centre la dernière ligne. */
    .row:has(> .col-lg-4.col-md-6) {
        justify-content: center;
    }

    /* Page 404 : 4 raccourcis en auto-fit => 3 + 1 orphelin en tablette. */
    .links:has(> .link-card) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Paragraphes : évite les mots / caractères chinois orphelins en fin
       de bloc ("服/务?", "maintenant / ?"). */
    p, li, blockquote {
        text-wrap: pretty;
    }

    /* Pages de texte (CGV, confidentialité) : titres de section collés à la
       liste précédente. */
    p + h2, ul + h2, ol + h2,
    p + h3, ul + h3, ol + h3 {
        margin-top: 36px;
    }

    /* Adresse (lien Google Maps en nowrap) : touchait le bord de l'écran. */
    a[href*="google.com/maps"] {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Le bouton d'appel flottant ne doit plus masquer le bas du footer. */
    .subfooter {
        padding-bottom: 96px;
    }
}

/* --------------------------------------------------------------------------
   MOBILE (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Hiérarchie typographique fluide : "EXCEPTIONNELLE," tient sur 390px. */
    h2 {
        font-size: clamp(26px, 7.4vw, 34px) !important;
        line-height: 1.15;
    }

    /* Hero */
    section:first-of-type > .v-center,
    section:first-of-type .swiper,
    section:first-of-type .swiper-inner {
        height: 100svh !important;
    }

    /* Slider : 3 marges intérieures s'empilaient (sw-caption 15px + container
       20px + colonne gx-5 24px = ~59px perdus de chaque côté). On ne garde
       que les 20px du container. */
    section:first-of-type .sw-caption {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    section:first-of-type .sw-caption .row.gx-5 {
        --bs-gutter-x: 0;
    }

    /* Typographie du slider, par RÔLE et non par balise : le titre est un h1
       sur le 1er slide mais un h2 sur le 2e (un seul h1 par page).
       1. Accroche (.subtitle) */
    section:first-of-type .sw-caption .subtitle {
        font-size: 13px;
        letter-spacing: 2px;
        margin-bottom: 14px;
    }

    /* 2. Titre (.cam-style). Mesuré en situation réelle : le mot le plus large
       des 5 langues ("GEGARANDEERDE", NL) = 10,56 x font-size. La taille suit
       la largeur utile (100vw - 2x20px) / 10,8, plafonnée à 34px :
       32px @390, 29px @360, 26px @320. Retour à la ligne entre les mots
       seulement (le thème impose nowrap au h1 => "PRÄVENTIVE ÜBI" coupé).
       html[lang] pour primer sur slider-button-fix.css. */
    html[lang] section:first-of-type .sw-caption .cam-style {
        font-size: min(calc((100vw - 44px) / 10.8), 34px) !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: keep-all;
        margin-bottom: 12px !important;
        text-wrap: balance;
    }

    /* 3. Phrase d'appui (h2 hors titre) : nettement sous le titre. */
    section:first-of-type .sw-caption h2:not(.cam-style) {
        font-size: clamp(15px, 4.3vw, 18px) !important;
        line-height: 1.35 !important;
        letter-spacing: 1.5px !important;
        font-weight: 500;
        opacity: 0.9;
        margin-bottom: 28px !important;
        text-wrap: balance;
    }

    section:first-of-type .sw-caption .spacer-10,
    section:first-of-type .sw-caption .spacer-single {
        display: none;
    }

    /* Flèches : minuscules et collées au texte ; on navigue au doigt. */
    section:first-of-type .swiper-button-prev,
    section:first-of-type .swiper-button-next {
        display: none !important;
    }

    /* Cartes services : plus compactes (4 cartes = 1500px auparavant). */
    a.d-block.hover.relative.p-40 {
        padding: 28px !important;
    }

    a.d-block.hover.relative.p-40 img.w-70px {
        width: 52px !important;
        margin-bottom: 12px !important;
    }

    .mb-sm-30 {
        margin-bottom: 16px;
    }

    /* Cartes Contact / Devis / Projets : même alignement, cible tactile nette. */
    .pt60 .row.g-4 > [class*="col-"] > a.d-block.p-4 {
        min-height: 96px;
    }

    /* Footer : liens espacés pour le doigt (>= 44px de hauteur utile). */
    footer .widget ul li a,
    footer ul li a {
        display: inline-block;
        padding: 8px 0;
    }

    /* Section "Systèmes innovants" : moins d'espace mort entre les visuels. */
    .text-center.py-3 img.w-80 {
        width: 60% !important;
    }

    /* CTA du header : style.css le force à 8px dans une largeur fixe de 115px
       pour que toutes les langues tiennent. On passe à 11px lisible, largeur
       libre (max ~46% de l'écran) et 2 lignes autorisées pour les langues
       longues ("VRIJBLIJVENDE OFFERTE"). Cible tactile >= 40px. */
    header .menu_side_area .btn-main {
        font-size: 11px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 46vw !important;
        min-height: 40px;
        padding: 6px 12px !important;
        white-space: normal !important;
        line-height: 1.15 !important;
    }

    header .menu_side_area .btn-main span {
        font-size: 11px !important;
    }

    /* Cartes services DE/NL : slider-button-fix.css réduit leur texte à
       13-14px (cartes à hauteur fixe sur desktop). Sur mobile, les cartes
       s'allongent : on revient à une taille de lecture confortable. */
    html[lang] .bg-dark-2.p-40 p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* En-tête des pages internes : mots composés DE/NL très longs
       ("Veranstaltungssicherheitsprojekt" = 666px pour 350px utiles).
       Césure automatique (lang="de"/"nl" est bien posé), et en dernier
       recours coupure du mot plutôt qu'un titre tronqué. */
    section.jarallax h1.cam-style,
    #subheader h1 {
        font-size: clamp(22px, 7vw, 30px) !important;
        line-height: 1.15 !important;
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    /* Grille d'infos des pages projet : en 2x2 plutôt qu'en colonne. */
    section.jarallax > .container-fluid .row > .col-lg-3.col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    /* Gouttière gx-5 (3rem) pensée pour desktop : sur téléphone elle
       s'ajoute aux marges du container et des cartes. Ex. bloc "Suivi
       continu" de l'accueil : ~220px utiles pour le titre, "ET" orphelin. */
    .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }

    .p-60.sm-padding40 {
        padding: 32px 20px !important;
    }

    /* Fil d'Ariane : le thème le place en left:50% (moitié droite de
       l'écran seulement) => il s'empilait sur 3-4 lignes. Pleine largeur. */
    .crumb-wrapper {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        transform: none !important;
    }

    .crumb-wrapper .crumb {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal !important;
        width: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* Micro-textes : plancher de lisibilité à 13-14px. */
    .crumb,
    .crumb li,
    .crumb a {
        font-size: 14px !important;
    }

    .subtitle,
    .d-date {
        font-size: 13px !important;
    }

    /* Formulaires (devis, contact, recrutement, commercial) : carte à 40px
       de marge intérieure dans le container => champs de 269px sur 390px. */
    div:has(> form[data-netlify]) {
        padding: 24px 16px !important;
    }

    form[data-netlify] button[type="submit"] {
        font-size: 15px !important;
        padding: 14px 16px !important;
        line-height: 1.3;
    }

    /* Articles de blog : paragraphe d'intro en citation géante (16-25
       lignes de gros texte blanc sur téléphone). */
    blockquote.quote-s1 {
        font-size: 17px !important;
        line-height: 1.6 !important;
        padding-left: 18px !important;
    }

    /* Sidebar "Articles récents" : titres Orbitron sur 5-6 lignes. */
    .widget-post .d-content h4 {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }
}

/* Titres de colonne du pied de page : <h5> -> <h3 class="footer-title">
   (ordre des titres pour l'accessibilité), apparence identique à l'ancien h5. */
footer h3.footer-title {
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: normal;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 20px;
}

/* Texte du slider (visible dès l'arrivée sur la page) : pas d'apparition en
   fondu. Le fondu retardait l'affichage et faisait échouer par
   intermittence l'audit de contraste (texte à moitié transparent). */
.swiper-slide .sw-caption .wow,
.swiper-slide .sw-caption a.btn-main.wow {
    animation: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Écran de chargement : sécurité si le JavaScript échoue ou tarde, il
   s'efface de lui-même après 3 s au lieu de masquer la page indéfiniment. */
#de-loader {
    animation: de-loader-failsafe 0.3s ease 3s forwards;
}

@keyframes de-loader-failsafe {
    to { opacity: 0; visibility: hidden; }
}

/* Vignettes du méga-menu Projets : les attributs width/height (anti-CLS)
   ne doivent pas figer la hauteur quand le CSS impose width:100%. */
#mainmenu img.hover-scale-1-1[height] {
    height: auto;
}

/* Vignettes "Articles récents" (3:2) dans un cadre carré du thème :
   recadrées au lieu d'être écrasées. */
.de-bloglist-type-1 .d-image img {
    object-fit: cover;
}

/* Bouton "Devis" du header : Public Sans sur la moitié des gabarits,
   Orbitron sur l'autre => même police de marque partout. */
header .menu_side_area .btn-main,
header .menu_side_area .btn-main span {
    font-family: var(--heading-font) !important;
}

/* Pages de remerciement (merci / danke / bedankt / thank-you) : body en
   flex horizontal => le bouton thème injecté par theme-switcher.js
   devenait une colonne de 94px et écrasait le contenu à ~240px. */
body > #theme-toggle {
    position: fixed !important;
    top: 16px;
    right: 16px;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50%;
    z-index: 1000;
}

/* Respect de la préférence système "réduire les animations". */
@media (prefers-reduced-motion: reduce) {
    .wow {
        animation: none !important;
        visibility: visible !important;
    }
}