/* ============================================================
   mobile-optimizations.css
   Couche de durcissement mobile (téléphone). Chargée en DERNIER,
   après responsive.css, dans layouts/front.blade.php.

   Objectif : supprimer les débordements/clippings et corriger les
   alignements sur petits écrans, SANS toucher aux fichiers de page
   déjà en place. Les sélecteurs sont volontairement plus spécifiques
   que les règles d'origine pour gagner la cascade sans !important.

   Diagnostic réalisé via émulation iPhone (375x812, CDP) sur les 12
   pages publiques. Les éléments décoratifs qui débordent volontairement
   (blobs, orbes, tickers, carrousels owl, dégradés de survol) sont
   laissés intacts : ils sont clippés par overflow:hidden et ne créent
   pas de scroll horizontal.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. FILET DE SÉCURITÉ GLOBAL (≤ 768px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Médias fluides : aucune image/vidéo ne force une largeur > écran */
    body.common-front img,
    body.common-front svg:not([class*="blob"]):not([class*="orb"]),
    body.common-front video,
    body.common-front iframe,
    body.common-front embed {
        max-width: 100%;
    }
    body.common-front img:not([width]):not([height]) { height: auto; }

    /* Césure des mots longs (URLs, mots techniques) dans le texte courant */
    body.common-front p,
    body.common-front li,
    body.common-front h1,
    body.common-front h2,
    body.common-front h3,
    body.common-front h4,
    body.common-front h5,
    body.common-front blockquote,
    body.common-front dd {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Boutons Bootstrap génériques : jamais plus large que le conteneur,
       et le libellé s'enroule plutôt que de déborder */
    body.common-front .btn-primary,
    body.common-front .btn-secondary,
    body.common-front .btn-slider2,
    body.common-front .btn-slider3 {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }
}

/* ════════════════════════════════════════════════════════════
   2. SECTION « APPEL » (présente sur TOUTES les pages)
   Le CTA en nowrap dépassait de ~21px à droite (clippé).
   → bouton pleine largeur, centré, texte sur plusieurs lignes.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .appel-section .appel-row {
        gap: 16px;
    }
    .appel-section .appel-btn-col {
        width: 100%;
        flex: 1 1 100%;
    }
    .appel-section .appel-btn-col .appel-cta {
        display: flex;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
        line-height: 1.3;
        padding: 14px 18px;
    }
    /* l'icône loupe + le texte typé : éviter tout dépassement */
    .appel-section .appel-prefix-wrap { flex-wrap: wrap; }
    .appel-section .appel-h4 { min-width: 0; word-break: break-word; }
}

/* ════════════════════════════════════════════════════════════
   3. TARIFS-FORFAITS — séparateurs de catégorie
   .tf-cat-sep-badge (white-space:nowrap) faisait 446px → clippé
   des deux côtés. On empile et on autorise le retour à la ligne.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .tf-cat-sep {
        flex-wrap: wrap;
        gap: 12px;
        margin-left: 4px;
        margin-right: 4px;
    }
    .tf-cat-sep .tf-cat-sep-badge {
        flex: 1 1 100%;
        max-width: 100%;
        white-space: normal;
        justify-content: flex-start;
        padding: 12px 18px;
    }
    .tf-cat-sep .tf-cat-sep-label {
        white-space: normal;
        line-height: 1.35;
    }
    /* lignes décoratives latérales : inutiles une fois le badge empilé */
    .tf-cat-sep .tf-cat-sep-line { display: none; }
}

/* ════════════════════════════════════════════════════════════
   4. ACCUEIL — section « manifeste »
   Les enfants de la grille ne rétrécissaient pas (min-width:auto),
   ce qui décalait le contenu de ~30px et clippait 15px à droite.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .manifeste .manifeste-inner {
        max-width: 100%;
    }
    .manifeste .manifeste-left,
    .manifeste .manifeste-right {
        min-width: 0;
        max-width: 100%;
    }
    .manifeste .manifeste-val-head {
        gap: 12px;
    }
    .manifeste .manifeste-val-label {
        min-width: 0;
        overflow-wrap: break-word;
    }
    /* État initial de l'animation d'entrée : translateX(30px) décalait la
       colonne hors écran (clipping transitoire). On retire le déplacement
       horizontal sur mobile (le fondu d'opacité suffit). */
    body.common-front .manifeste.mf-anim .manifeste-right {
        transform: none;
    }
}

/* ════════════════════════════════════════════════════════════
   5. ACCUEIL — barre de recherche du hero
   Le champ était trop étroit (placeholder tronqué) car le bouton
   « Trouver » prenait trop de place. On compacte le bouton sur
   très petits écrans pour redonner de la largeur au champ.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 430px) {
    .search-slider-input-wrapper .search-slider-btn {
        padding: 12px 16px;
    }
    .search-slider-input-wrapper .search-slider-btn svg {
        width: 14px;
        height: 14px;
    }
    .search-slider-input-wrapper .search-slider-input {
        font-size: 16px; /* ≥16px : évite le zoom auto iOS au focus */
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* ════════════════════════════════════════════════════════════
   6. NOTRE-HISTOIRE (about) — CTA .btn-primary qui dépassait (r408)
   Couvert par la règle générique §1, on s'assure du centrage propre.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .common-front a.btn-primary,
    .common-front a.btn-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}