/* ══════════════════════════════════════════════════════════════════════════
   HOME v4 — les deux offres d'entree en onglets
   ──────────────────────────────────────────────────────────────────────────
   CETTE FEUILLE S'AJOUTE A home_v3.css, ELLE NE LA REMPLACE PAS. Elle est
   chargee apres elle (cf. router_fr.php) et ne porte que ce que les onglets
   ajoutent : la barre, les panneaux, et le seul ajustement de hauteur que
   leur presence impose. Tout le dessin des deux offres reste dans la v3,
   ou il n'y a rien a changer.

   Le composant visuel des onglets lui-meme n'est pas ici : .gdn-impl-tabs
   et .gdn-impl-tab viennent de style.css, ou ils servent deja la section
   « Du challenge a la solution » des cas clients. Les reprendre tels quels
   garde un seul dessin d'onglet sur tout le site.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── LA BARRE D'ONGLETS ───────────────────────────────────────────────────
   Le pli est une colonne flex dont l'offre prend toute la hauteur libre
   (.gdn-hero-v3__offre, home_v3.css). La barre doit donc explicitement ne
   pas s'etirer, sans quoi elle se partagerait cette hauteur avec l'offre. */
.gdn-home-offres__onglets {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: calc(var(--offre-pas) * 1.1) 22px calc(var(--offre-pas) * .4);
}

/* Les onglets sont des <a> et non des <button> : le fragment d'URL porte
   l'etat (voir home_fr_v4.php). Il faut donc leur retirer le soulignement
   et la couleur de lien que .gdn-impl-tab, ecrit pour des <button>, ne
   prevoit pas. Le reste du dessin vient de style.css sans retouche. */
.gdn-home-offres__onglets .gdn-impl-tab {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

.gdn-home-offres__onglets .gdn-impl-tab:hover { text-decoration: none; }

/* Le focus clavier doit rester visible : l'onglet actif est sur fond noir,
   un contour noir y disparaitrait. */
.gdn-home-offres__onglets .gdn-impl-tab:focus-visible {
  outline: 2px solid var(--gdn-green);
  outline-offset: 2px;
}

/* ─── LES PANNEAUX ─────────────────────────────────────────────────────────
   Chaque panneau porte une offre ET son bandeau de preuve. Il s'interpose
   entre le pli et la section d'offre, qui etaient parent et enfant en v3 :
   il doit donc se comporter exactement comme le pli le faisait, sinon
   .gdn-hero-v3__offre { flex: 1 1 auto } ne trouve plus de colonne ou
   s'etirer et l'offre cesse d'etre centree dans la fenetre. */
.gdn-home-offres__panneau {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

/* LE MASQUAGE EST ICI ET NON EN JAVASCRIPT, A DESSEIN. Le script se contente
   de poser data-onglet-actif sur le pli, avant meme que les panneaux ne
   soient analyses : il n'y a donc aucun clignotement au chargement, et
   SANS JAVASCRIPT AUCUN ATTRIBUT N'EST POSE, donc aucune regle ci-dessous
   ne s'applique et les deux offres s'empilent comme en v3.

   Les deux valeurs sont enumerees parce qu'une feuille de style ne sait pas
   comparer deux attributs entre eux. Un troisieme onglet demanderait une
   ligne de plus dans le selecteur, et rien d'autre. */
.gdn-home-offres[data-onglet-actif] .gdn-home-offres__panneau { display: none; }

.gdn-home-offres[data-onglet-actif="offre"] .gdn-home-offres__panneau[data-panneau="offre"],
.gdn-home-offres[data-onglet-actif="offre-cadrage"] .gdn-home-offres__panneau[data-panneau="offre-cadrage"] {
  display: flex;
}

/* ─── LA HAUTEUR DU PLI ────────────────────────────────────────────────────
   home_v3.css donne l'ecran entier au pli de l'offre a partir de 1200x640,
   seuil mesure sur le bloc seul : « 19px de marge a 1200x640, 25px a
   1240x650 ». La barre d'onglets ajoute une soixantaine de pixels, cette
   marge devient donc negative dans la bande 640-699px de haut, et le pli
   couperait la carte prix au lieu de la contenir.

   On y rend sa hauteur naturelle au pli, comme la v3 le fait deja partout
   ou le bloc ne tient pas : mieux vaut descendre d'un cran que rogner. Au
   dela de 700px, la regle de la v3 s'applique sans retouche. */
@media (min-width: 1200px) and (min-height: 640px) and (max-height: 699px) {
  .gdn-hero-v3__fold--offre {
    min-height: 0;
    scroll-snap-align: none;
  }
}

/* ─── MOBILE ───────────────────────────────────────────────────────────────
   style.css empile .gdn-impl-tabs en colonne pleine largeur sous 992px, ce
   qui convient aux trois onglets des cas clients mais coute deux pleines
   lignes pour deux onglets courts. On les garde cote a cote tant qu'ils y
   tiennent, et on ne repasse en colonne que sur les tres petits ecrans. */
@media (max-width: 992px) {
  .gdn-home-offres__onglets .gdn-impl-tabs {
    flex-direction: row;
    width: auto;
    gap: 0;
  }
}

@media (max-width: 520px) {
  .gdn-home-offres__onglets .gdn-impl-tabs {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .gdn-home-offres__onglets .gdn-impl-tab { justify-content: center; }
}