/* ==========================================================================
   TFBank — Responsive : tablettes et mobiles
   --------------------------------------------------------------------------
   Toutes les règles sont dans des media queries « max-width » : au-dessus de
   1180px (ordinateurs portables et de bureau), cette feuille ne change rien.

   Points de rupture du thème (les mêmes que style.css et templates/template-particulier.php) :
     ≤ 1180px   header compact : menu hamburger + panneau mobile (header.php)
     ≤ 1024px   tablette paysage
     ≤  768px   tablette portrait, grand mobile
     ≤  480px   mobile
   + téléphone en paysage : (orientation: landscape) and (max-height: 500px),
     largeur ≤ 1180px (section 10).
   Les colonnes Bootstrap des templates gardent leurs propres paliers
   (576 / 768 / 992px) : les règles liées à l'empilement de ces colonnes
   utilisent les mêmes valeurs (575.98 / 991.98px).

   Les templates impriment leurs styles dans la page (<style>) après cette
   feuille, et le contenu saisi dans l'éditeur contient des styles inline
   (style="…") : d'où le préfixe « html body » (comme rubriques.css) et
   !important face aux attributs style.
   ========================================================================== */


/* ── 1. Header compact (≤ 1180px) ─────────────────────────────────────────── */
@media (max-width: 1180px) {
    /* Le menu desktop, sorti de l'écran par style.css, est remplacé par le
       panneau mobile : masqué pour ne pas rester atteignable au clavier. */
    .main-navigation {
        display: none;
    }

    /* Accueil et pages de son menu : les quatre liens du menu (Investir en
       Tunisie, Historique, Rapport Annuel, Contactez-Nous) restent dans le
       header, avec la police, la graisse et la couleur du menu desktop. De
       640 à 1180px, à droite du logo, sur la ligne du bouton du menu. */
    .accueil-nav {
        display: block;
        margin-left: 40px;
    }
    .accueil-nav-menu {
        display: flex;
        gap: 20px;
    }
    .accueil-nav-menu a {
        display: block;
        padding: 12px 0;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--tf-gray-900);
        white-space: nowrap;
        /* seule la couleur s'anime (survol) : la taille, qui suit la largeur
           du menu, change sans transition au chargement et en tournant l'écran */
        transition-property: color;
    }
    .accueil-nav-menu a:hover,
    .accueil-nav-menu .current-menu-item > a {
        color: var(--tf-red);
    }
}
/* Petite tablette, téléphone en paysage (640 à 768px) : corps 13px, comme le
   menu desktop de 1181 à 1279px, pour garder de l'air avant le bouton du menu */
@media (max-width: 768px) {
    .accueil-nav {
        margin-left: 28px;
    }
    .accueil-nav-menu {
        gap: 16px;
    }
    .accueil-nav-menu a {
        font-size: 13px;
    }
}
/* Téléphone (moins de 640px) : les liens restent sur la ligne du logo, entre
   le logo et le bouton du menu, comme sur ordinateur. Le menu prend toute la
   place entre les deux (le bloc du bouton n'est plus extensible). Chaque
   libellé reste écrit sur une ligne, jamais coupé : un téléphone en portrait
   n'a pas la place de les mettre côte à côte (374px de libellés en 13px,
   237px de place sur un écran de 390px), ils y sont donc rangés en deux
   colonnes de deux liens, centrées entre le logo et le bouton, dans la hauteur
   de la ligne du logo. La taille du texte suit la largeur du menu (unités cqw
   du conteneur accueil-nav) : les deux colonnes font 16,3px par pixel de
   texte (16,6 avec la marge de sécurité), plus l'espace qui les sépare ;
   13px au plus, comme le menu des tablettes. Le logo est un peu réduit sous
   375px (32px de haut, 22px à 320px) pour garder 12px de texte à 360px. */
@media (max-width: 639.98px) {
    .site-header--accueil .header-main {
        flex: 0 0 auto;
        padding-left: 0;
    }
    .site-header--accueil .header-logo-area img {
        max-height: clamp(22px, calc(18.18vw - 36.2px), 32px);
    }
    .accueil-nav {
        flex: 1 1 0;
        min-width: 0;
        margin: 0 4px 0 8px;
        container: accueil-nav / inline-size;
    }
    .accueil-nav-menu {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        gap: 0 16px;
    }
    .accueil-nav-menu a {
        padding: 4px 0;
        font-size: 12px;
        font-size: clamp(10px, calc((100cqw - 16px) / 16.6), 13px);
        line-height: 1.25;
    }
}
/* Menu assez large (téléphone en paysage, petite tablette) : les quatre liens
   côte à côte, 14px entre deux, de 12 à 13px (28,9px de menu par pixel de
   texte, plus les espaces) */
@container accueil-nav (min-width: 389px) {
    .accueil-nav-menu {
        display: flex;
        justify-content: center;
        gap: 14px;
    }
    .accueil-nav-menu a {
        font-size: min(13px, calc((100cqw - 42px) / 28.9));
    }
}
/* Petit téléphone (moins de 360px : Galaxy Z Fold fermé, iPhone SE de 1re
   génération) : colonnes plus proches, pour garder 11px de texte à 320px */
@media (max-width: 359.98px) {
    .accueil-nav-menu {
        column-gap: 12px;
    }
    .accueil-nav-menu a {
        font-size: clamp(10px, calc((100cqw - 12px) / 16.6), 13px);
    }
}
/* Écran de moins de 320px (Galaxy Fold de 1re génération fermé, 280px) : les
   deux colonnes ne tiennent plus à côté du logo. Seul cas où elles passent en
   rangée sous le logo, sur toute la largeur de l'écran, plutôt que de
   déborder sur le bouton du menu. */
@media (max-width: 319.98px) {
    .accueil-nav {
        order: 1;
        flex: 0 0 calc(100% + 24px);
        margin: 0 -12px -8px;
        padding: 4px var(--page-px);
        border-top: 1px solid var(--tf-gray-300);
    }
    .site-header--accueil .header-main {
        flex: 1;
    }
}


/* ── 2. Socle : contenus et médias ────────────────────────────────────────── */
@media (max-width: 1024px) {
    html body main :is(iframe, video, embed, object) {
        max-width: 100%;
    }

    /* Bandeau des pages : la hauteur suit le contenu s'il dépasse les 400px
       (titre, sous-titre, points clés, mention et bouton) */
    html body .flexible-hero {
        height: auto;
    }
}

@media (max-width: 768px) {
    :root {
        /* Titres de section sur mobile : 24px (320px) → 30px (768px) */
        --tf-title-size-m: clamp(1.5rem, 1.15rem + 1.8vw, 1.875rem);
    }

    /* Un mot très long passe à la ligne au lieu de sortir de l'écran ; les
       liens écrits en toutes lettres (adresse web, e-mail) peuvent être coupés
       à n'importe quel caractère, même dans un bloc flex (partenaires, fiche
       agence) */
    body {
        overflow-wrap: break-word;
    }
    html body main :is(p, li, td, dd) a {
        overflow-wrap: anywhere;
    }

    /* Contenu saisi dans l'éditeur : tableaux défilants horizontalement (les
       lignes insécables sont traitées plus bas, jusqu'à 1180px) */
    html body main :is(.entry-content, .flexible-page) table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* Gouttière Bootstrap g-5 (48px) plus large que la marge de la page
       (--page-px : 20px puis 16px) : la rangée débordait de 8px */
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 2rem;
    }

    /* Rythme vertical des pages : 36px en haut et en bas de chaque section,
       comme l'interface Particulier (template-particulier.php), au lieu de 48px de section + 24 à 48px
       de conteneur (96 à 144px entre deux sections). La liste de documents
       (sans marge de section, seulement celle de son conteneur, annulée
       ci-dessous) les reçoit aussi : son bouton touchait le footer. */
    html body :is(.flexible-page, .cheque-page) > section:is(.py-5, .documents-checklist-section):not(.flexible-hero):not(.cta-banner-section) {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    html body :is(.flexible-page, .cheque-page) > section > .container:is(.py-4, .py-5) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Contenu saisi dans l'éditeur : pas de ligne insécable (white-space: nowrap
   en attribut style) plus large que son bloc. Le titre d'une carte
   (« Livret d'épargne populaire ») sortait de sa carte entre 992 et 1110px ;
   un texte qui tient sur une ligne n'est pas modifié. */
@media (max-width: 1180px) {
    html body main [style*="white-space: nowrap" i],
    html body main [style*="white-space:nowrap" i] {
        white-space: normal !important;
    }
}

/* Barre latérale fixe (raccourcis) sur tablette : plus étroite, elle ne
   recouvre plus le texte placé contre la marge droite */
@media (max-width: 1024px) {
    .hero-sidebar a {
        width: 44px;
        height: 44px;
    }
    .hero-sidebar a i {
        font-size: 20px !important;
    }
    .hero-sidebar a img {
        width: 24px;
        height: 24px;
    }
}


/* ── 3. Titres ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Titres de section des templates et titres saisis dans l'éditeur avec une
       taille inline (32 à 48px sur ordinateur) : une seule échelle mobile.
       Les titres des bandeaux (.hero-title) gardent leurs tailles, comme ceux
       des articles et des cartes de résultats (blocs <article>, 18 à 40px,
       déjà adaptés) : ils n'étaient pas réduits mais agrandis. */
    html body main .split-title,
    html body main :is(h1, h2)[style*="font-size" i]:not(.hero-title):not(article *) {
        font-size: var(--tf-title-size-m) !important;
    }
    html body main :is(h1, h2) [style*="font-size" i] {
        font-size: inherit !important;
    }

    /* Interface Particulier : titre de section sur toute la largeur */
    .section-header h2 {
        width: 100%;
    }

    /* Texte des bannières */
    html body .banniere-content {
        font-size: 18px;
    }
}


/* ── 4. Bandeaux titre seul : convertisseur, compte chèque, agences ───────── */
@media (max-width: 768px) {
    /* même hauteur que les bandeaux de Particulier, de Professionnel et
       d'Entreprise sur tablette et mobile (400px au minimum) */
    html body .converter-hero,
    html body .cheque-hero,
    html body .agences-hero {
        height: 400px;
    }
    html body .converter-hero .hero-title,
    html body .cheque-hero .hero-title,
    html body .agences-hero h1 {
        font-size: 36px !important;
    }
    html body .agences-hero .hero-subtitle,
    html body .converter-hero .hero-subtitle,
    html body .cheque-hero .hero-subtitle {
        margin-top: 16px;
        font-size: 18px;
    }
    /* Bandeau des pages sans style d'interface : 48px sur ordinateur, même
       échelle que les bandeaux ci-dessus. Les bandeaux Particulier /
       Professionnel / Entreprise gardent leur échelle (rubriques.css, plus
       prioritaire). */
    html body .flexible-hero .hero-title {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    html body .converter-hero .hero-title,
    html body .cheque-hero .hero-title,
    html body .agences-hero h1 {
        font-size: 30px !important;
    }
    html body .agences-hero .hero-subtitle,
    html body .converter-hero .hero-subtitle,
    html body .cheque-hero .hero-subtitle {
        font-size: 16px;
    }
    html body .flexible-hero .hero-title {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    /* Bandeau des pages : une seule marge verticale (celle de la section) */
    html body .flexible-hero > .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}


/* ── 5. Images des sections (template « Sections alternées ») ─────────────── */
/* Colonnes Bootstrap col-lg empilées : la photo garde ses proportions au lieu
   d'une hauteur minimale prévue pour la colonne d'à côté */
@media (max-width: 991.98px) {
    html body .swact-image-wrapper img {
        min-height: 0 !important;
        height: auto !important;
    }
}

@media (max-width: 575.98px) {
    html body .red-image-col img,
    html body .red-image-col > div {
        min-height: 260px !important;
    }
    html body .offdt-card-img {
        height: auto !important;
        aspect-ratio: 4 / 3;
    }
}


/* ── 6. Onglets, tableaux, cartes ─────────────────────────────────────────── */
/* Cartes « Besoin d'informations ? / Une insatisfaction ? » : icône au-dessus
   du texte sur téléphone et quand les deux cartes sont côte à côte sur une
   tablette (colonnes col-md-5 de 768 à 991px : le titre en 24px sortait de la
   carte jusqu'à 870px) */
@media (max-width: 575.98px), (min-width: 768px) and (max-width: 991.98px) {
    html body .contact-info-card {
        flex-direction: column;
        align-items: flex-start !important;
    }
    html body .contact-info-card .card-icon {
        margin: 0 0 .75rem !important;
    }
}

@media (max-width: 575.98px) {
    /* Onglets « Je suis client / Je ne suis pas client » */
    html body :is(.rdv-section, .contact-section) .nav-tabs .nav-link {
        font-size: 1.1rem;
        padding: 1rem 0;
    }
    /* Onglets des cartes bancaires et du tableau comparatif */
    html body :is(.tabs-section, .comparison-section) .nav-tabs .nav-link {
        padding: 12px 10px;
    }

    /* Tableau comparatif : colonne des libellés plus large, texte plus petit */
    html body .comparison-table .row {
        font-size: .875rem;
    }
    html body .comparison-table .row > .col-4 {
        flex: 0 0 40%;
        max-width: 40%;
        padding-left: .75rem !important;
        padding-right: .5rem !important;
    }

    /* Fiche agence */
    html body .agence-card {
        padding: 24px !important;
    }

    /* Article : date, auteur et catégorie passent à la ligne d'un bloc (icône
       et texte ensemble) au lieu de se tasser, icônes au-dessus des textes */
    html body.single-post article h1 + div {
        flex-wrap: wrap;
        row-gap: 4px;
    }
    html body.single-post article h1 + div > span {
        white-space: nowrap;
    }

    /* Bannière CTA : boutons empilés, de même largeur */
    html body .cta-buttons .btn {
        width: 100%;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}


/* ── 7. Boutons et formulaires ────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Boutons Bootstrap à grande marge latérale (px-5 = 48px) : le libellé
       tient sur une ligne (ex. « Simuler votre demande » dans le bandeau) */
    html body main .btn.px-5 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Bouton d'envoi : 280px minimum, plus large que le formulaire à 320px */
    /* emplacement « Image de l'application » (300 × 600px fixes) */
    html body .phone-placeholder {
        width: 100%;
        max-width: 300px;
        height: auto;
        aspect-ratio: 1 / 2;
    }

    html body .wpcf7 input.wpcf7-submit {
        min-width: 0 !important;
        max-width: 100%;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Très petits téléphones (320 à 374px, iPhone SE 1re génération) : boutons saisis
   dans l'éditeur (lien avec fond et marges intérieures en attribut style, ex.
   « Contactez-Nous », padding 20px 70px) : marges latérales réduites comme les
   boutons Bootstrap ci-dessus. Ils dépassaient du bord droit de l'écran (Safari). */
@media (max-width: 374.98px) {
    html body main a[style*="padding" i][style*="background" i] {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}


/* ── 8. Convertisseur de devises ──────────────────────────────────────────── */
@media (max-width: 1180px) {
    /* étiquettes « De » / « Vers » : 11px trop petit sur écran tactile */
    html body .field-label {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    html body .converter-card {
        padding: 1.5rem 1rem 1.25rem;
    }
    /* « De » et « Vers » l'un sous l'autre, bouton d'inversion entre les deux */
    html body .converter-fields {
        flex-direction: column;
        gap: 24px;
    }
    html body .swap-btn i {
        transform: rotate(90deg);
    }
    /* Montant et résultat : leur largeur suit leur valeur (template du
       convertisseur) sans dépasser la place laissée au symbole et à la devise */
    html body .amount-input {
        max-width: 60%;
    }
    html body .converter-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        margin-top: 1.5rem;
        text-align: left;
    }
    html body .convert-btn {
        width: 100%;
    }
}


/* ── 9. Nos agences (carte) ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* La carte suit la hauteur de son bloc (400px, style.css) au lieu de 600px ;
       flex: none, sinon flex: 1 (style.css) remplace cette hauteur dans la
       colonne et le bloc prend la hauteur de la carte */
    .agences-map-container {
        flex: none;
    }
    #agences-map {
        height: 100%;
    }
}

@media (max-width: 480px) {
    .agences-map-container {
        height: 340px;
    }
    .agences-filter h2 {
        font-size: 22px;
    }
}


/* ── 10. Téléphone en paysage (hauteur ≤ 500px) ───────────────────────────── */
/* L'écran ne fait que 320 à 430px de haut : header plus bas, bandeaux à la
   hauteur de leur contenu, texte et photo côte à côte comme sur tablette. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1180px) {
    /* Header : 71px au lieu de 93px (le quart de l'écran) */
    .header-main {
        height: 56px;
    }
    html body .header-wrapper {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* Barre latérale de raccourcis masquée, comme sur téléphone en portrait */
    .hero-sidebar {
        display: none;
    }

    /* Bandeaux : hauteur du contenu (titre, texte et bouton visibles d'un coup
       d'œil) au lieu de 400 à 500px */
    html body .hero-section,
    html body .hero-slide {
        min-height: 0;
    }
    html body.page-template-template-particulier .hero-section .hero-slide::before,
    html body:is(.page-slug-professionnel, .page-slug-entreprise, .page-slug-entreprise-2, .page-template-template-alternating) .flexible-hero::before,
    html body :is(.converter-hero, .cheque-hero, .agences-hero)::after {
        padding-top: 0;
    }
    html body .hero-content-acceuil {
        padding-top: 24px;
        padding-bottom: 32px;
    }
    html body .flexible-hero {
        min-height: 0 !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    html body .flexible-hero > .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    html body :is(.converter-hero, .cheque-hero, .agences-hero) {
        height: 200px;
    }
    html body .cta-banner-section {
        min-height: 0 !important;
    }

    /* Photos de l'interface Particulier et maquette de l'application : jamais plus hautes
       que l'écran */
    html body :is(.pret-image, .why-image, .besoin-image) img {
        max-height: 75vh !important;
    }
    html body .agences-right,
    html body .agences-right img {
        height: 75vh !important;
        min-height: 0 !important;
    }
    html body .app-phone-wrapper img {
        max-height: 75vh;
        width: auto;
    }
}

/* Écran peu haut (téléphone ou tablette en paysage, ≤ 700px) : les photos
   des sections ne dépassent pas la hauteur de l'écran (recadrées au centre ;
   l'image des onglets, en « contain », reste entière) */
@media (orientation: landscape) and (max-height: 700px) and (max-width: 1180px) {
    html body :is(.split-image, .swact-image-wrapper) img {
        max-height: 85vh;
        object-fit: cover;
    }
    html body .tabs-section img {
        max-height: 85vh;
    }
}

/* Texte et photo côte à côte (colonnes Bootstrap col-lg-6, empilées sous
   992px), comme sur ordinateur, dès que la largeur le permet : tablettes en
   portrait (768 à 991px), téléphones en paysage (640px et plus). Empilées,
   les photos verticales atteignaient 900px de haut. */
@media (min-width: 768px) and (max-width: 991.98px),
       (orientation: landscape) and (max-height: 500px) and (min-width: 640px) and (max-width: 991.98px) {
    .row > .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .row.flex-lg-row-reverse {
        flex-direction: row-reverse;
    }
}


/* ── 11. Section « Atouts » (4 colonnes : icône, titre, texte) ────────────────
   Même comportement que la section Services de l'interface Particulier :
   4 colonnes, 2 colonnes à partir de 1024px, puis une liste (icône à gauche,
   titre et texte à droite) sous 480px. Rythme vertical et taille des titres
   de section du site sous 768px. */
@media (max-width: 1180px) {
    .atouts-grid {
        gap: 24px;
    }
}
@media (max-width: 1024px) {
    .atouts-title {
        margin-bottom: 44px;
        font-size: clamp(30px, 3.6vw, 36px);
        line-height: 1.2;
    }
    .atouts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }
}
@media (max-width: 768px) {
    .atouts-section {
        padding: 36px 0;
    }
    .atouts-title {
        margin-bottom: 32px;
        font-size: var(--tf-title-size-m);
    }
    .atouts-grid {
        gap: 32px 16px;
    }
    .atouts-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 20px;
    }
    .atouts-item-title {
        margin-bottom: 8px;
        font-size: 15px;
        line-height: 20px;
    }
    .atouts-item-text {
        font-size: 14px;
        line-height: 21px;
    }
}
@media (max-width: 480px) {
    .atouts-title {
        margin-bottom: 16px;
    }
    .atouts-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    /* icône à gauche, titre et texte empilés à droite, depuis la marge de la page */
    .atouts-item {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        align-items: start;
        padding: 16px 0;
        text-align: left;
    }
    .atouts-icon {
        grid-row: span 2;
        width: 56px;
        height: 56px;
        margin: 0;
    }
    .atouts-item-title {
        margin-bottom: 4px;
        font-size: 14px;
        line-height: 18px;
    }
    .atouts-item-text {
        font-size: 13px;
        line-height: 19px;
    }
    /* texte en continu dans la colonne étroite (retours à la ligne de la maquette ignorés) */
    .atouts-item-text br {
        display: none;
    }
}


/* ── 12. Section « À la une » (cartes en carrousel) ───────────────────────────
   3 cartes visibles sur ordinateur, 2 de 601 à 1024px, 1 sous 600px (main.js) ;
   tailles réduites par palier comme les autres sections, rythme vertical et
   taille des titres de section du site sous 768px. */
@media (max-width: 1024px) {
    .alaune-title {
        font-size: clamp(30px, 3.6vw, 36px);
        line-height: 1.2;
    }
    .alaune-subtitle {
        margin-bottom: 32px;
        font-size: 18px;
        line-height: 26px;
    }
    .alaune-slider:not(.swiper-initialized) .swiper-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .alaune-slider:not(.swiper-initialized) .alaune-card:nth-child(n+3) {
        display: none;
    }
    .alaune-card-title {
        font-size: 19px;
        line-height: 23px;
    }
    .alaune-nav {
        margin-top: 40px;
    }
}
@media (max-width: 768px) {
    .alaune-section {
        padding: 36px 0;
    }
    .alaune-title {
        margin-bottom: 6px;
        font-size: var(--tf-title-size-m);
    }
    .alaune-subtitle {
        margin-bottom: 32px;
        font-size: 17px;
        line-height: 24px;
    }
    .alaune-badge {
        font-size: 11px;
        line-height: 24px;
    }
    .alaune-card-title {
        margin-top: 14px;
        font-size: 18px;
        line-height: 22px;
    }
    .alaune-card-text {
        font-size: 14px;
        line-height: 22px;
    }
    .alaune-card-link {
        font-size: 14px;
    }
    .alaune-section .alaune-pagination {
        --swiper-pagination-bullet-size: 12px;
    }
    .alaune-nav {
        gap: 14px;
        margin-top: 32px;
    }
    .alaune-nav-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}
@media (max-width: 600px) {
    .alaune-slider:not(.swiper-initialized) .swiper-wrapper {
        grid-template-columns: 1fr;
    }
    .alaune-slider:not(.swiper-initialized) .alaune-card:nth-child(n+2) {
        display: none;
    }
}
@media (max-width: 480px) {
    .alaune-subtitle {
        font-size: 15px;
        line-height: 22px;
    }
}


/* ── 13. Bandeau de l'accueil (maquette « Une Nouvelle Dynamique ») ──────────
   Même mise en page qu'à l'écran d'ordinateur (rubriques.css « 6 quater ter »),
   tailles réduites par palier ; le fond crème s'élargit quand le texte occupe une
   plus grande part de la largeur, comme le voile des autres bandeaux (« 6 quater
   bis »). Hauteur du bandeau : règles communes à tous les bandeaux. */
@media (max-width: 1180px) {
    html body.home .flexible-hero--light .hero-overlay {
        background: linear-gradient(90deg, rgb(253, 245, 235) 0%, rgba(253, 245, 235, .96) 46%, rgba(253, 245, 235, .35) 72%, rgba(253, 245, 235, 0) 92%);
    }
    html body.home .flexible-hero--light .hero-kicker {
        margin: 0 0 15px;
        font-size: 16px;
        line-height: 20px;
    }
    html body.home .flexible-hero--light .hero-content h1.hero-title {
        font-size: 36px;
        line-height: 44px;
    }
    html body.home .flexible-hero--light .hero-title::after {
        width: 135px;
        height: 9px;
        margin-top: 10px;
    }
    html body.home .flexible-hero--light .hero-content .hero-subtitle {
        max-width: 500px;
        margin: 17px 0 0 !important;
        font-size: 18px;
        line-height: 22px;
    }
    html body.home .flexible-hero--light .hero-content .btn {
        gap: 9px;
        height: 58px;
        margin-top: 25px !important;
        padding: 5px 34px 0 35px !important;
        font-size: 18px;
    }
}
@media (max-width: 1024px) {
    html body.home .flexible-hero--light .hero-overlay {
        background: linear-gradient(90deg, rgb(253, 245, 235) 0%, rgba(253, 245, 235, .96) 50%, rgba(253, 245, 235, .55) 75%, rgba(253, 245, 235, .15) 100%);
    }
    html body.home .flexible-hero--light .hero-kicker {
        margin: 0 0 13px;
        font-size: 15px;
        line-height: 19px;
    }
    html body.home .flexible-hero--light .hero-content h1.hero-title {
        font-size: 32px;
        line-height: 40px;
    }
    html body.home .flexible-hero--light .hero-title::after {
        width: 120px;
        height: 8px;
        margin-top: 9px;
    }
    html body.home .flexible-hero--light .hero-content .hero-subtitle {
        max-width: 460px;
        margin: 15px 0 0 !important;
        font-size: 17px;
        line-height: 22px;
    }
    html body.home .flexible-hero--light .hero-content .btn {
        gap: 8px;
        height: 54px;
        margin-top: 22px !important;
        padding: 4px 30px 0 31px !important;
        font-size: 17px;
    }
}
@media (max-width: 768px) {
    html body.home .flexible-hero--light .hero-overlay {
        background: linear-gradient(90deg, rgb(253, 245, 235) 0%, rgba(253, 245, 235, .96) 55%, rgba(253, 245, 235, .6) 82%, rgba(253, 245, 235, .25) 100%);
    }
    html body.home .flexible-hero--light .hero-kicker {
        margin: 0 0 10px;
        font-size: 13px;
        line-height: 17px;
    }
    html body.home .flexible-hero--light .hero-content h1.hero-title {
        font-size: 28px;
        line-height: 34px;
    }
    html body.home .flexible-hero--light .hero-title::after {
        width: 100px;
        height: 7px;
        margin-top: 8px;
    }
    html body.home .flexible-hero--light .hero-content .hero-subtitle {
        max-width: 440px;
        margin: 13px 0 0 !important;
        font-size: 16px;
        line-height: 21px;
    }
    html body.home .flexible-hero--light .hero-content .btn {
        gap: 8px;
        height: 50px;
        margin-top: 20px !important;
        padding: 4px 26px 0 27px !important;
        font-size: 16px;
    }
}
@media (max-width: 480px) {
    html body.home .flexible-hero--light .hero-kicker {
        font-size: 12px;
        line-height: 16px;
    }
    html body.home .flexible-hero--light .hero-content h1.hero-title {
        font-size: 25px;
        line-height: 31px;
    }
    html body.home .flexible-hero--light .hero-content .hero-subtitle {
        font-size: 15px;
        line-height: 20px;
    }
}
/* Téléphone en paysage : texte compact pour que le bandeau (hauteur du contenu)
   ne remplisse pas l'écran */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1180px) {
    html body.home .flexible-hero--light .hero-kicker {
        margin-bottom: 8px;
        font-size: 12px;
        line-height: 16px;
    }
    html body.home .flexible-hero--light .hero-content h1.hero-title {
        font-size: 24px;
        line-height: 29px;
    }
    html body.home .flexible-hero--light .hero-title::after {
        width: 90px;
        height: 6px;
        margin-top: 7px;
    }
    html body.home .flexible-hero--light .hero-content .hero-subtitle {
        max-width: 390px;
        margin-top: 10px !important;
        font-size: 14px;
        line-height: 19px;
    }
    html body.home .flexible-hero--light .hero-content .btn {
        height: 44px;
        margin-top: 14px !important;
        padding: 3px 22px 0 23px !important;
        font-size: 15px;
    }
}


/* ── 14. Accueil : blocs Particulier, Professionnel, Entreprise ──────────────
   Tailles d'ordinateur : style.css (« ACCUEIL — blocs … »). Sous 1180px, les
   retours à la ligne saisis coupaient les phrases avant la fin de la colonne :
   texte en continu, aligné à gauche comme dans les autres sections Split. Le
   titre suit l'échelle mobile des titres (section 3). */
@media (max-width: 1180px) {
    body.home .split-section .split-desc p[style] {
        text-align: left !important;
    }
    body.home .split-section .split-desc p[style] br {
        display: none;
    }
}
@media (max-width: 768px) {
    body.home .split-section .col-lg-6 > h3[style] {
        font-size: 18px !important;
    }
}
@media (max-width: 480px) {
    body.home .split-section .col-lg-6 > h3[style] {
        font-size: 16px !important;
    }
}