/* ================================================================
   MOBILE-PP.CSS — Corrections d'affichage Paroles & Postures
   Chargé APRÈS les <style> inline de chaque page, donc il les surcharge.

   Contient désormais deux familles de correctifs :
     1. Les corrections mobiles historiques (< 850px)
     2. Les corrections « écran court » (portables 13-15 pouces pro)
        ajoutées le 26/08/2026 suite à l'audit responsive.
   ================================================================ */


/* ================================================================
   0. HAUTEUR RÉELLE DE L'EN-TÊTE
   ----------------------------------------------------------------
   L'en-tête est en position:fixed, il ne pousse donc rien : c'est au
   hero de réserver la place. Les pages réservaient 60px (55px en
   mobile) alors que l'en-tête mesure ~116px dès 481px de large
   (logo 90px + 2 x 12.8px de padding) : les 56px du haut du hero
   passaient SOUS l'en-tête.

   La valeur est mesurée en JS (voir le <script> en fin de <head> de
   chaque page) et déposée dans --pp-header-h. Le repli ci-dessous
   couvre le cas où le JS est bloqué : 116px = la valeur bureau,
   c'est-à-dire précisément le cas des postes concernés.
   ================================================================ */
:root {
    --pp-header-h: 116px;
}

/* En mobile le logo tombe a 28-55px selon les pages : repli approche,
   le JS pose ensuite la valeur exacte propre a chaque page. */
@media (max-width: 480px) {
    :root {
        --pp-header-h: 56px;
    }
}


/* ================================================================
   1. HERO : LA BOÎTE SUIT LE TEXTE, ET NON L'INVERSE
   ----------------------------------------------------------------
   Cause du bug signalé sur portable 15 pouces :
       .hero { height: 58vh; overflow: hidden; align-items: center; }
   La hauteur suivait l'écran, pas le contenu. Sur un écran large mais
   court (1366x625, ou 1920x1080 à 150% = 1280x615), 58vh ~ 357px pour
   ~440px de contenu : le débordement était coupé en haut ET en bas,
   d'où les lignes hors cadre ou collées au bas du rectangle.

   height:auto + min-height conserve l'aspect sur grand écran (le hero
   fait toujours 58vh quand la place existe) et laisse la boîte grandir
   quand elle ne suffit plus. Plus aucun texte coupé, quel que soit
   l'écran.
   ================================================================ */
.hero {
    height: auto !important;
    margin-top: var(--pp-header-h, 116px) !important;
    padding-top: clamp(1.5rem, 3vh, 2.5rem);
    padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

/* Les pages methodologie / faq / contact / mentions / mediation
   utilisent .hero-content, qui n'a aucune largeur maximale : les
   paragraphes couraient jusqu'à 1400px. On aligne sur .hero-center. */
.hero-content {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}


/* ================================================================
   2. ÉCRANS COURTS (PORTABLES PRO 13-15 POUCES)
   ----------------------------------------------------------------
   Le site n'avait que des points de rupture en LARGEUR (1200/1024/
   850/768/600/480). Un portable 15 pouces est large mais court : il
   était classé « grand bureau » et recevait le texte le plus gros
   dans la boîte la plus petite.

   min-width:700px cible les portables sans toucher aux téléphones en
   paysage, qui ont déjà leurs propres règles plus bas.
   ================================================================ */

/* Portables standards : 1920x1080 à 150%, 1366x768, 1600x900 */
@media (min-width: 700px) and (max-height: 860px) {
    .hero {
        min-height: 0 !important;
    }
    .hero-container {
        padding-top: 1.6rem !important;
        padding-bottom: 1.6rem !important;
    }
    .hero-title {
        font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
        margin-bottom: 0.9rem !important;
    }
    .hero-subtitle {
        font-size: clamp(0.95rem, 1.3vw, 1.1rem) !important;
        line-height: 1.55 !important;
        margin-bottom: 1.2rem !important;
    }
    .hero-badge {
        font-size: 0.78rem !important;
        padding: 0.4rem 0.95rem !important;
        margin-bottom: 0.85rem !important;
    }
    .hero-cta {
        padding: 0.7rem 1.8rem !important;
        font-size: 0.95rem !important;
    }
}

/* Écrans très courts : 1280x720, fenêtre réduite, barre de favoris +
   bandeau statut actifs en même temps */
@media (min-width: 700px) and (max-height: 700px) {
    .hero-container {
        padding-top: 1.2rem !important;
        padding-bottom: 1.2rem !important;
    }
    .hero-title {
        font-size: clamp(1.75rem, 3vw, 2.6rem) !important;
        margin-bottom: 0.7rem !important;
    }
    .hero-subtitle {
        font-size: 0.98rem !important;
        margin-bottom: 1rem !important;
    }
    .hero-badge {
        font-size: 0.74rem !important;
        margin-bottom: 0.7rem !important;
    }
}


/* ─── BOUTON RDV MOBILE DANS LE HEADER ─── */
.btn-rdv-mobile {
    display: none;
}
@media (max-width: 850px) {
    .btn-rdv-mobile {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #1e3a8a;
        color: #ffffff !important;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.82rem;
        font-weight: 700;
        text-decoration: none !important;
        margin-right: 6px;
        white-space: nowrap;
        flex-shrink: 0;
        letter-spacing: 0.3px;
    }
    .btn-rdv-mobile:hover {
        background: #1e40af;
        color: #ffffff !important;
        text-decoration: none !important;
    }
}

/* ─── FOOTER MOBILE : 2 COLONNES QUINCONCE ─── */
@media (max-width: 600px) {
    .footer-nav {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 1.8rem !important;
        text-align: left !important;
    }
    .footer-nav-main {
        flex-direction: column !important;
        align-items: flex-end !important;  /* aligné à droite */
        text-align: right !important;
        gap: 0.65rem !important;
    }
    .footer-nav-legal {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0.6rem !important;
        margin-top: 1.8rem; /* quinconce */
    }
    .footer-nav-main a {
        font-size: 1.05rem !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }
    .footer-nav-legal a {
        font-size: 0.95rem !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }
    .footer-nav-main a:hover,
    .footer-nav-legal a:hover {
        color: #ffffff !important;
    }
}

/* ─── HERO TITLE MOBILE : gestion double version ─── */
.hero-title-mobile {
    display: none !important;
}
.hero-title-desktop {
    display: block !important;
}
@media (max-width: 480px) {
    .hero-title-desktop {
        display: none !important;
    }
    .hero-title-mobile {
        display: block !important;
    }
}

/* ─── HERO SUBTITLE MOBILE : version courte ─── */
.hero-subtitle-mobile {
    display: none !important;
}
.hero-subtitle-desktop {
    display: block !important;
}
@media (max-width: 480px) {
    .hero-subtitle-desktop {
        display: none !important;
    }
    .hero-subtitle-mobile {
        display: block !important;
    }
}

/* ─── HERO HEIGHT MOBILE : laisser grandir pour tout afficher ─── */
@media (max-width: 480px) {
    .hero {
        height: auto !important;
        min-height: 50vh !important;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}
