/* ==========================================================================
   Home du site Groupe (hunyvers-groupe.com) — les deux bandes illustrées.

   Ce qu'elles règlent : sur la maquette, les bandes CaraMaps (rouge) et
   « Tout est pensé pour voyager sereinement » (teal) sont hautes COMME LEUR
   TEXTE, et l'illustration DÉBORDE par le haut. En flux normal c'est
   l'inverse : l'illustration, plus haute que le texte, dicte la hauteur de la
   bande et s'y trouve enfermée. Une marge haute négative retire son
   débordement du calcul — un flex item compte pour sa boîte de MARGES — et la
   fait sortir au-dessus.

   Ces règles n'existent que parce que le build Tailwind v3 figé de
   static/css/shared/base.css ne sait pas les exprimer : il n'a ni marge
   négative, ni hauteur d'image. Tout le reste de la page reste en utilitaires
   (cf. l'avertissement en tête du template).

   ⚠ SPÉCIFICITÉ — pourquoi des sélecteurs descendants et non des classes nues.
   templates/shared/base.html rend le bloc « metatags », d'où cette feuille est
   chargée, AVANT ses propres <link> : base.css passe donc APRÈS elle et gagne à
   spécificité égale. Une règle .illus-col{margin:0} se ferait écraser par le
   .m-auto de la balise. D'où le préfixe .bande-illustree, qui porte chaque
   règle à deux classes.

   ⚠ UNITÉS — :root pose font-size: 14px (static/css/shared/input.css) : 1rem
   vaut 14 px, et le py-[5rem] des deux sections vaut donc 70 px. Les valeurs
   ci-dessous sont en pixels pour rester lisibles face à cette règle.

   Rien ne s'applique en dessous de lg (1024 px), le point de rupture des deux
   sections : empilée, l'illustration reprend la pleine largeur, sans
   débordement.
   ========================================================================== */

/* Mobile — le mockup CaraMaps est un PORTRAIT très allongé (770 × 1188) : à la
   largeur de la colonne il ferait près de 600 px de haut et repousserait le
   texte de la bande hors de l'écran. On le cale donc en hauteur, la largeur
   suit. Les deux autres illustrations sont en paysage et n'ont pas ce défaut. */
.bande-illustree .illus-col--caramaps img {
    height: 240px;
    width: auto;
    max-width: 100%;
}

/* Le logo CaraMaps dans le H2 de la bande rouge. La maquette le pose à une fois
   et demie la hauteur du texte du titre ; base.css n'a aucun palier entre h-8
   (28 px, la racine étant à 14 px) et 70 px. La classe h-8 reste sur la balise
   comme plancher si cette feuille venait à ne pas se charger — d'où le
   sélecteur à deux classes, seul moyen de repasser devant elle (cf. la note de
   spécificité ci-dessus). */
.bande-illustree .logo-caramaps {
    height: 48px;
}

/* Les deux paires de boutons (« Besoin d'un conseil ? », « Tout est pensé pour
   voyager sereinement ») : 56 px d'écart horizontal comme sur la maquette, mais
   seulement 14 px une fois les boutons empilés sur mobile. Le build figé n'a que
   le raccourci « gap », qui vaudrait pour les deux sens. */
.content-alignment .groupe-cta-row {
    column-gap: 56px;
    row-gap: 14px;
}

/* ==========================================================================
   Tailles des logos et illustrations — retour de la communication : « les
   illustrations sont trop grosses, et encore plus sur mobile ».

   Le build figé n'a pas de paliers de hauteur entre ceux déjà utilisés, et
   « img {height:auto} » de base.css écrase toute hauteur venue du CDN : les
   hauteurs vivent donc ici, à deux classes (cf. la note de spécificité).
   ========================================================================== */

/* Le logo « Hunyvers groupe » du hero, à côté du titre. */
.content-alignment .logo-groupe-hero {
    height: 40px;
    width: auto;
}

/* Les illustrations des deux cartes univers (camping-car, bateau). */
.content-alignment .illus-univers {
    height: 56px;
    width: auto;
}

/* Empilées sous lg, les illustrations des bandes « conseils » et « services »
   prennent la largeur de la colonne (jusqu'à 385 px) : on plafonne leur
   hauteur, object-contain garde les proportions. Au-dessus de lg, la maquette
   et les règles de débordement ci-dessous reprennent la main. */
@media (max-width: 1023.98px) {
    .content-alignment .illus-bande {
        max-height: 200px;
    }
}

@media (min-width: 1024px) {

    .content-alignment .logo-groupe-hero {
        height: 56px;
    }

    .content-alignment .illus-univers {
        height: 72px;
    }

    /* La colonne de l'illustration ne prend que la largeur de son image, le
       texte occupe le reste. Sans cela, les largeurs en tiers (lg:w-1/3 /
       lg:w-2/3) redimensionneraient l'image que l'on vient de caler en
       hauteur. */
    .bande-illustree .illus-col {
        width: auto;
        max-width: none;
        margin: 0;
        flex: 0 0 auto;
        align-self: flex-start;
    }

    .bande-illustree .illus-col img {
        width: auto;
        max-width: none;
    }

    .bande-illustree .bande-texte {
        width: auto;
        flex: 1 1 0%;
    }

    /* Les deux illustrations sont ancrées EN HAUT et remontées par une marge
       négative : c'est elle, et elle seule, qui produit le débordement. La
       marge basse, quand il y en a une, ne déplace rien — elle ne fait que
       retirer le reste du dépassement de la hauteur de bande.

       Le compte, pour chacune (padding de section = 70 px) :
         débordement en haut   = marge haute − 70
         hauteur de bande      = max(hauteur du texte, image + marges) + 140
         air sous l'image      = hauteur de bande − (70 − marge haute + image) */

    /* CaraMaps — 340 px de haut : 34 px au-dessus du bord haut, 48 px d'air
       au-dessus du bord bas, bande inchangée à 354 px. */
    .bande-illustree .illus-col--caramaps {
        margin-top: -104px;
        margin-bottom: -22px;
    }

    .bande-illustree .illus-col--caramaps img {
        height: 340px;
    }

    /* Services — la valise et les montgolfières flottent : 25 px au-dessus du
       bord haut, et de l'air sous la valise, comme sur la maquette. */
    .bande-illustree .illus-col--services {
        margin-top: -95px;
    }

    .bande-illustree .illus-col--services img {
        height: 323px;
    }
}

/* ==========================================================================
   « Le groupe Hunyvers à vos côtés » — la carte doit dominer la section.

   Exigence de rendu : la carte de France est plus HAUTE que le bloc des deux
   listes de concessions, comme sur la maquette. Elle est quasi carrée
   (639,6 × 650,64), donc sa hauteur ne dépend que de sa largeur — et sa
   largeur, de ce que les deux autres colonnes lui laissent.

   Ce que le gabarit pose déjà en utilitaires, à partir de lg : bases
   1/4 + 3/5 + 1/2 (elles dépassent 100 %, flex-shrink les ramène au prorata)
   et gouttière lg:gap-3. Mesuré : à 1440 px la carte fait 444 px de haut
   contre 412 px pour les listes, et l'écart se creuse au-dessus.

   Sauf qu'en dessous de 1440 px l'arithmétique s'inverse. Le
   content-alignment retire 203 px de CHAQUE côté : il ne reste que 875 px de
   contenu à 1280 px, 695 px à 1100 px. Les listes, elles, ne rétrécissent pas
   — leurs libellés passent à la ligne et le bloc GRANDIT. Mesuré à 1280 px
   dans le découpage à trois colonnes : carte 374 px, listes 464 px. L'inverse
   de ce qu'on veut.

   D'où deux redécoupages, que le build Tailwind figé ne sait pas exprimer
   (pas de xl:flex-row, pas de largeur en pourcentage arbitraire).

   ⚠ SPÉCIFICITÉ — même contrainte que le reste de la feuille : base.css est
   chargée APRÈS et gagne à spécificité égale. Chaque règle porte donc deux
   classes.
   ========================================================================== */

/* 1280 → 1599 px : le texte passe en pleine largeur au-dessus, la carte et les
   listes se partagent la ligne. La carte y prend 58 % (≈ 557 px à 1366 px)
   contre ~40 % aux listes, dont les sous-colonnes restent assez larges pour
   que les libellés tiennent sur une ligne. */
@media (min-width: 1280px) and (max-width: 1599.98px) {
    .content-alignment .bande-cotes {
        flex-wrap: wrap;
        row-gap: 40px;
    }

    .bande-cotes .cotes-texte {
        width: 100%;
    }

    .bande-cotes .cotes-carte {
        width: 58%;
    }

    .bande-cotes .cotes-listes {
        width: calc(42% - 11px);
    }
}

/* En dessous de 1280 px, aucun découpage côte à côte ne tient : à 1100 px les
   695 px de contenu ne suffisent même pas à deux colonnes. Tout s'empile, la
   carte prend la pleine largeur (plafonnée par son max-w-[36rem], soit 504 px
   — la racine est à 14 px) et redevient de loin l'élément le plus haut. Les
   deux listes, elles, restent côte à côte tant que la grille est en
   lg:grid-cols-2 : le bloc reste compact. */
@media (max-width: 1279.98px) {
    .content-alignment .bande-cotes {
        flex-direction: column;
        row-gap: 40px;
    }

    /* Deux classes par règle, obligatoirement : « .bande-cotes > * » ne pèse
       qu'une classe et le .lg:w-1/4 de base.css, chargée après, l'emporterait
       — la colonne de texte resterait un ruban de 200 px. */
    .bande-cotes .cotes-texte,
    .bande-cotes .cotes-carte,
    .bande-cotes .cotes-listes {
        width: 100%;
    }
}