/*!
 * inc/perf/lap-perf.css
 *
 * R2 — Stabilisation CLS sur .lp-hero__subtitle (FOUT Roboto).
 *
 * Le subtitle V2 (avec sublabel H2 + paragraphe quartiers) peut atteindre
 * 3-4 lignes (sublabel) + 8-11 lignes (subtitle inner) selon métier × ville.
 * Avant chargement Roboto-Regular, le texte fallback sans-serif a une
 * métrique différente → CLS 0.125 observé sur plombier-marseille-13001
 * (Lighthouse Lab R1.5).
 *
 * Le preload Roboto-Regular ajouté par lap-perf-fonts.php résout ~95% du
 * problème. Ce CSS est un filet de sécurité pour les connexions 2G/edge
 * où la font arriverait après le 1er paint malgré preload.
 *
 * Mesures R1.5 (mobile 412×915 post-Roboto) :
 *   - chauffagiste-paris-75015 (V1 plat) : subtitle 364px / CLS 0.024
 *   - plombier-bordeaux-33000 (V2 nest)  : outer 281px / inner 205px / sublabel 60px / CLS 0.074
 *   - plombier-marseille-13001 (V2 nest) : outer 388px / inner 282px / sublabel 106px / CLS 0.200
 *
 * Browser support :has() : Chrome 105+, Safari 15.4+, Firefox 121+ → ~95% mobile 2026.
 */

/* =====================================================================
 * R9 — min-height subtitle DÉSACTIVÉE (preload Roboto-Regular suffit)
 *
 * Découverte par Arnaud via DevTools (toggle min-height: 280px sur
 * .lp-hero__subtitle:has(.lp-hero__sublabel)) sur plombier-marseille-13001 :
 * le bloc se contracte visuellement et le "vide" entre subtitle et
 * reassurance disparaît immédiatement.
 *
 * Conclusion : le preload Roboto-Regular ajouté en R2
 * (inc/perf/lap-perf-fonts.php @ wp_head priority 1) charge la font
 * avant first paint sur >99% du trafic mobile français → aucun FOUT
 * à neutraliser → la min-height ceinture+bretelles devient inutile
 * et nuisible (sur-réservation visuelle sur pages V2 courtes).
 *
 * Note méthodo R3 mesures DOM : `getBoundingClientRect().height`
 * retourne la valeur EFFECTIVE incluant min-height appliqué, pas le
 * content naturel. Pour mesurer le content réel, désactiver la règle
 * temporairement via document.styleSheets ou DevTools inspector.
 *
 * ROLLBACK : décommenter les 2 règles ci-dessous (retour R2 état).
 * ===================================================================== */
/*
.lp-hero__subtitle:has(.lp-hero__sublabel) {
    min-height: 280px;
}

@supports not (selector(:has(*))) {
    .lp-hero__subtitle {
        min-height: 200px;
    }
}
*/

/* =====================================================================
 * R3 — Header inner + reassurance stabilization
 *
 * Sources CLS panel R2.5 (15 URLs) :
 *   - <div class="flex ... h-[60px] md:h-[76px]"> (header inner)
 *     → 7/15 URLs, CLS 0.060-0.075
 *   - <div class="lp-hero__reassurance">
 *     → 2/15 URLs, CLS 0.140-0.181
 *
 * Mesures DOM R3 étape 1 (mobile 412×915) :
 *   - header inner : 60px uniforme (4/4 URLs)
 *   - reassurance  : 153px uniforme (4 tags wrap 2 lignes mobile)
 *
 * Sélecteurs : `header .flex.justify-between.items-center` (descendant
 * pas direct child, à cause d'un wrapper .lap-container intermédiaire).
 * ===================================================================== */

/* Header inner — wrap interne du <header class="fixed"> */
header .flex.justify-between.items-center {
    min-height: 60px;
}
@media (min-width: 768px) {
    header .flex.justify-between.items-center {
        min-height: 76px;
    }
}

/* Reassurance tags — wrap variable selon largeur du texte */
.lp-hero__reassurance {
    min-height: 153px;
}
@media (min-width: 768px) {
    .lp-hero__reassurance {
        min-height: 48px;
    }
}

/* =====================================================================
 * R4 — Animations composées pour INP CrUX long-terme
 *
 * Contexte (AUDIT_PERF §3, R5_PRE_CHECK §3) :
 *   PSI Lab ne mesure pas l'INP, mais Google CrUX si (ranking factor
 *   depuis mars 2024). Les ~50 occurrences `transition-all` Tailwind
 *   dans le theme animent par défaut TOUTES les properties layout/paint
 *   (padding, margin, border-radius, box-shadow, color, etc.), ce qui
 *   dégrade l'INP en touch mobile.
 *
 * Approche conservative : override `transition-property` pour limiter
 * aux 3 properties color/background-color/border-color (les seules
 * paint rapides ≤8ms). Box-shadow exclu → hover shadow apparaît
 * instantané (effet "snap-on"), pas régression visuelle dramatique.
 *
 * Pas de nouveau transform/translate ajouté (interdit régression UX).
 *
 * Cible : ~50 warnings Lighthouse "Avoid non-composited animations"
 * → ~10-15 résiduels. INP mobile : amélioration attendue 50-100ms.
 * ===================================================================== */

.tarif-card,
.prestation-card,
.tarif-pill,
.prestations-filter-pill,
.seo-summary {
    transition-property: background-color, color, border-color;
    transition-duration: 100ms;
    transition-timing-function: ease-out;
}