/* ===========================================================================
   Correctifs responsives — Idéal Profession Libérale
   Fichier d'override chargé après le CSS principal et les styles de app.js.

   Problème corrigé : les "pills" (boutons / badges à coins totalement arrondis,
   border-radius ~infini) se transforment en gros ovales / "œufs" dès que leur
   texte passe sur plusieurs lignes — ce qui arrive sur écran étroit ou quand
   l'utilisateur agrandit la police (zoom-texte / accessibilité).

   Principe : on plafonne le border-radius à 1.5rem. Comme un border-radius est
   automatiquement limité à la moitié du plus petit côté, les pills d'une seule
   ligne (hauteur <= ~48px) gardent EXACTEMENT leur forme pill ; seuls les
   éléments devenus hauts (texte sur 2-3 lignes) passent d'un ovale difforme à
   un rectangle joliment arrondi.
   =========================================================================== */

/* -- Pills "utilitaires" rounded-full porteuses de texte ------------------- */
/* Boutons radio des filtres (Type d'annonces, Catégorie), CTA liens,
   badges prix / ville sur les cartes de biens. */
/* Wrappé dans @layer utilities : le CSS Tailwind du site définit
   .rounded-full{border-radius:...!important} DANS un @layer. Avec les cascade
   layers, un !important dans un layer bat un !important hors-layer quelle que
   soit la spécificité. En plaçant notre override dans le MÊME layer utilities,
   c'est la spécificité qui tranche (p.rounded-full > .rounded-full) → on gagne. */
@layer utilities {
  [role="radiogroup"] label.rounded-full,
  a.rounded-full,
  button.rounded-full,
  p.rounded-full {
    border-radius: 1.5rem !important;
  }
}

/* -- Boutons custom (border-radius:999px en dur, injectés via app.js) ------ */
.frm-btn,
.flt-btn-p,
.flt-btn-o {
  border-radius: 1.5rem !important;
}

/* -- Contenu des boutons radio centré verticalement ------------------------ */
/* Dans une même ligne de la grille, tous les boutons prennent la hauteur du
   plus grand (texte sur plusieurs lignes). Sans centrage, les libellés courts
   ("Tous", "Bureaux") se collent en haut et laissent un grand vide en bas.
   On centre le contenu pour un rendu équilibré. */
[role="radiogroup"] label.rounded-full {
  display: flex;
  align-items: center;
}
[role="radiogroup"] label.rounded-full > div {
  width: 100%;
}

/* -- H2 SEO invisible (text-xd opacity-0 hidden md:block) ------------------ */
/* Police énorme + une seule ligne : déborde du viewport à >=768px et crée une
   barre de défilement horizontale parasite. Comme il est invisible (opacity-0)
   et purement destiné au référencement, on le borne à la largeur dispo et on
   masque le débordement. */
.text-xd {
  max-width: 100%;
  overflow: hidden;
}

/* ===========================================================================
   Lisibilité — texte sur fond bleu (fiches biens)
   "*hors honoraires" et le numéro de téléphone héritaient d'un gris foncé de
   la typographie globale, illisible sur le bleu. On force le blanc sur tout le
   contenu des blocs bleus (prix + boutons principaux).
   =========================================================================== */
.fc-price,
.fc-price *,
.fc-btn-p,
.fc-btn-p * {
  color: #fff !important;
}

/* ===========================================================================
   Accueil — le badge "Déjà +5 ans" (svg absolute en haut à droite) ne doit
   plus recouvrir le titre "Vous cherchez à vous installer". On réserve de la
   place à droite du titre à partir de 768px (là où le badge passe en absolute).
   =========================================================================== */
@media (min-width: 768px) {
  .relative:has(> svg#Calque_9) + a {
    display: block;
    padding-right: 7rem;
  }
}

/* ===========================================================================
   Cartes "Les essentiels" / articles : la hauteur s'adapte au titre (au lieu
   d'un ratio 16:9 figé qui faisait déborder/rogner les longs titres). Hauteur
   égale par rangée (grid stretch + height:100%), texte toujours dans sa marge.
   =========================================================================== */
a:has(> article.bg-primary.rounded-corners.grid) {
  display: block;
  height: 100%;
}
article.bg-primary.rounded-corners.grid {
  min-height: 13rem;
  height: 100%;
}
/* le titre reste lisible et ne colle pas les bords même sur 5-6 lignes */
article.bg-primary.rounded-corners.grid > p {
  padding: 1.5rem 1.25rem;
  line-height: 1.3;
  text-wrap: balance;
}


/* ===========================================================================
   Home « Nos nouveautés » : badges ville/prix des cartes (SSR). Le prix ne doit
   JAMAIS se couper ("425 000 €" en "425" / "000 €") ; les noms de ville longs
   ("BOULOGNE BILLANCOURT") s'équilibrent proprement sur 2 lignes au lieu de
   déborder. (Les badges du listing sont gérés séparément par app.js.)
   =========================================================================== */
.justify-evenly > p.rounded-full { text-wrap: balance; line-height: 1.25; }
.justify-evenly > p.rounded-full.text-primary { white-space: nowrap; }

/* ===========================================================================
   Iframes embarquées (vidéos YouTube des reportages TV, etc.) : le preflight
   Tailwind borne img/video à 100% mais pas iframe — une vidéo en width="560"
   déborde de l'écran mobile et crée un scroll horizontal. On borne la largeur
   et on préserve le ratio 16:9.
   =========================================================================== */
iframe[src*="youtube.com/embed"],
iframe[src*="youtube-nocookie.com/embed"] {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* ===========================================================================
   Cartes d'articles après hydratation React (ArticleGrid) : le composant
   ajoute .aspect-video (aspect-ratio 16/9). Combiné à notre height:100%,
   le navigateur dérive la LARGEUR du ratio → cartes qui débordent les unes
   sur les autres. On neutralise le ratio : la hauteur s'adapte au titre,
   identique au rendu serveur.
   =========================================================================== */
article.bg-primary.rounded-corners.grid.aspect-video {
  aspect-ratio: auto;
}

/* ===========================================================================
   CTA de fin d'article (« Voir les annonces », « Estimer mon bien »,
   « Contactez-nous ») : la classe .btn impose une hauteur fixe → texte sur
   2 lignes qui déborde du bouton, gris illisible. On en fait de vraies cartes
   d'action : hauteur libre, bordure et texte couleur du site, remplissage au
   survol.
   =========================================================================== */
a.btn.rounded {
  height: auto;
  min-height: 3.6rem;
  white-space: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .05);
  transition: background .18s, color .18s, transform .18s;
}
a.btn.rounded h3 {
  color: inherit;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
a.btn.rounded:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}

/* ===========================================================================
   Fin d'article IPL — encarts « Simulateur de changement d'usage à Paris » et
   « Rendez-vous changement d'usage à Lyon » : titres et boutons perdus sur
   fond blanc. On en fait des cartes au fond couleur du site (contraste),
   titre blanc et bouton inversé (blanc / texte couleur).
   =========================================================================== */
div.flex.flex-col.gap-4.items-center.justify-between {
  background: var(--color-primary);
  border-radius: 1.25rem;
  padding: 1.8rem 1.5rem;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
}
div.flex.flex-col.gap-4.items-center.justify-between > h3 {
  color: #fff !important;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}
div.flex.flex-col.gap-4.items-center.justify-between > a.btn.btn-primary {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--color-primary) !important;
  font-weight: 700;
  transition: transform .18s, filter .18s;
}
div.flex.flex-col.gap-4.items-center.justify-between > a.btn.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(.96);
}
div.flex.flex-col.gap-4.items-center.justify-between > a.btn.btn-primary h4 {
  color: inherit;
  margin: 0;
}

/* Les cartes « Idéal Profession Libérale, c'est : » partagent les mêmes classes
   que les encarts simulateur (fond couleur du site appliqué plus haut) mais
   contiennent des h4/p : on passe aussi leur texte en blanc. Les enfants
   directs uniquement — le texte des boutons (h4 dans <a>) reste inversé. */
div.flex.flex-col.gap-4.items-center.justify-between > h4,
div.flex.flex-col.gap-4.items-center.justify-between > p {
  color: #fff !important;
}

/* ===========================================================================
   Menu desktop aux largeurs intermédiaires (~1280-1750px) : les libellés se
   coupaient mot à mot ("Nos / annonces", "Créer une / alerte") et le logo
   collait le premier item. Libellés insécables, taille de police adaptée à
   la place réelle, marge après le logo. Seul le libellé long "Accompagnement
   en recherche de bien" (IPL) garde 2 lignes, équilibrées et centrées.
   =========================================================================== */
header ul.xl\:flex { margin-left: 1.5rem; flex-wrap: nowrap; }
header ul.xl\:flex a,
header div.xl\:flex a { white-space: nowrap; }
header ul.xl\:flex div:has(> a[href*="accompagnement"]) a {
  white-space: normal;
  text-wrap: balance;
  display: block;
  max-width: 13rem;
  text-align: center;
  line-height: 1.3;
}
@media (min-width: 1280px) and (max-width: 1750px) {
  header ul.xl\:flex a,
  header div.xl\:flex a,
  header div.xl\:flex button { font-size: .95rem !important; }
  header ul.xl\:flex { gap: .9rem; }
  header div.xl\:flex { column-gap: 1rem; }
  header div.xl\:flex.space-x-6 > * + * { margin-left: 0 !important; }
}