/* ==========================================================================
   Pro Re Nata — Couche responsive mobile (Phase 2 audit mobile, 2026-05-05)
   ==========================================================================
   À charger APRÈS style.css et components.css (et avant le CSS du module).
   Centralise :
     1. Helpers safe-area iOS (encoche, home indicator)
     2. Tap targets ≥ 44×44 pt sous 820 px (Apple HIG)
     3. Police inputs ≥ 16 px sous 640 px (anti-zoom iOS Safari)
     4. Header mobile : hamburger visible, lang/prefs/user/search masqués
     5. Drawer off-canvas (slide depuis la droite)
     6. Polish : modals fullscreen sous 600 px, sticky bars adaptés
   ========================================================================== */

/* ==========================================================================
   1. Variables & helpers safe-area
   ========================================================================== */
:root {
    /* Marges safe-area iOS (0 sur autres plateformes). */
    --prn-safe-top:    env(safe-area-inset-top, 0px);
    --prn-safe-right:  env(safe-area-inset-right, 0px);
    --prn-safe-bottom: env(safe-area-inset-bottom, 0px);
    --prn-safe-left:   env(safe-area-inset-left, 0px);
    /* Breakpoint mobile unique. */
    --prn-bp-mobile: 820px;
}

/* ==========================================================================
   2. Anti-zoom iOS — tous les inputs ≥ 16 px sous 640 px
   --------------------------------------------------------------------------
   iOS Safari zoome automatiquement à `focus` quand la police d'un input est
   < 16 px. Cible TOUS les types pour couvrir la calculatrice clinique modale,
   les initials patient, les textareas free-text, les champs de date, etc.
   ========================================================================== */
@media (max-width: 640px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input:not([type]),
    select,
    textarea {
        font-size: 16px !important;   /* override les valeurs locales (0.85rem, 12 px, etc.) */
    }
}

/* ==========================================================================
   3. Tap targets ≥ 44×44 pt sous 820 px
   --------------------------------------------------------------------------
   On élargit la zone de toucher SANS forcer la taille visuelle, via min-* +
   padding. Pour les chips compacts, on garde l'apparence et on étend la zone
   via un pseudo-élément invisible (::before) — l'utilisateur peut taper à
   côté du chip sans rater la cible.
   ========================================================================== */
@media (max-width: 820px) {
    /* Boutons icônes ronds — passent à 44×44 */
    .theme-toggle,
    .prefs-toggle,
    .search-launcher {
        min-width: 44px;
        min-height: 44px;
    }
    .search-launcher {
        /* sur mobile la version icône-seule existe déjà ; on garantit 44×44 */
        height: 44px;
        padding: 0;
        width: 44px;
    }

    /* lang-switch : on agrandit la zone clickable des deux boutons FR/EN */
    .lang-switch button {
        min-width: 44px;
        min-height: 36px;        /* le pill global fait ~42 px de hauteur avec 3 px de padding */
        padding: 0.4rem 0.85rem;
    }

    /* Avatar du user-menu — 32 px → 44 px de zone tactile via padding-equivalent */
    .user-menu .avatar {
        width: 40px;
        height: 40px;
        font-size: 0.95rem;
    }

    /* Boutons supprimer voyageur — petit cross 24 px → 44×44 zone tactile */
    .prn-pat-head .prn-kid-remove,
    .prn-kid-remove {
        min-width: 44px;
        min-height: 36px;
        padding: 8px 12px;
        font-size: 12px;
    }

    /* Chips PIQ-style : on étend la zone tactile via ::before sans grossir le visuel */
    .prn-chip,
    .prn-chk {
        min-height: 44px;
        align-items: center;
    }

    /* CTA primaires en hero / actions wizard : au moins 44 px de hauteur */
    .btn,
    .btn-sm {
        min-height: 44px;
    }
    .btn-sm {
        padding: 0.55rem 1rem;
    }
}

/* ==========================================================================
   4. Header mobile — hamburger visible, autres actions masquées
   --------------------------------------------------------------------------
   Sous 820 px : on garde brand + theme-toggle + hamburger. On masque
   search-launcher (texte + kbd déjà cachés, mais l'icône prend de la place
   sur certaines pages où elle n'est pas désactivée), lang-switch, prefs,
   user-menu — tous ces éléments réapparaissent dans le drawer off-canvas.
   ========================================================================== */
@media (max-width: 820px) {
    /* Le bouton hamburger (injecté par js/mobile-nav.js) doit être visible. */
    .prn-hamburger {
        display: inline-flex !important;
    }

    /* Tout ce qui surcharge le header à droite passe dans le drawer. */
    .site-header .lang-switch,
    .site-header .prefs-toggle,
    .site-header .user-menu,
    .site-header .search-launcher {
        display: none !important;
    }

    /* On garde le theme-toggle accessible directement (action très fréquente). */
    .site-header .theme-toggle {
        display: inline-flex;
    }

    /* Réduit les marges latérales du container pour récupérer de la place. */
    .header-inner {
        gap: 0.5rem;
        padding-left: max(1rem, var(--prn-safe-left));
        padding-right: max(1rem, var(--prn-safe-right));
    }

    /* Brand-mark légèrement réduit sur très petit écran pour libérer de la
       place au profit de l'icône hamburger. */
    .brand-mark { height: 32px; }
    .brand-name { font-size: 1.05rem; }
}

/* Sur desktop, le bouton hamburger reste caché. */
.prn-hamburger {
    display: none;
}

/* ==========================================================================
   5. Bouton hamburger
   ========================================================================== */
.prn-hamburger {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--prn-line);
    background: var(--prn-surface-2);
    color: var(--prn-ink-soft);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
    transition: border-color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
}
.prn-hamburger:hover {
    border-color: var(--prn-teal);
    color: var(--prn-teal);
}
.prn-hamburger:focus-visible {
    outline: 2px solid var(--prn-teal);
    outline-offset: 2px;
}
.prn-hamburger svg {
    width: 22px;
    height: 22px;
}

/* ==========================================================================
   6. Drawer off-canvas (slide-in depuis la droite)
   --------------------------------------------------------------------------
   Markup injecté par js/mobile-nav.js :
     <div class="prn-drawer" aria-hidden="true">
       <div class="prn-drawer-backdrop"></div>
       <aside class="prn-drawer-panel" role="dialog" aria-modal="true">…</aside>
     </div>
   ========================================================================== */
.prn-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    visibility: hidden;
    pointer-events: none;
}

.prn-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.prn-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 22, 40, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 220ms var(--ease-out);
}

.prn-drawer.is-open .prn-drawer-backdrop {
    opacity: 1;
}

.prn-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 340px);
    background: var(--prn-surface);
    border-left: 1px solid var(--prn-line);
    box-shadow: -8px 0 24px rgba(10, 22, 40, 0.18);
    transform: translateX(100%);
    transition: transform 260ms var(--ease-out);
    display: flex;
    flex-direction: column;
    /* Safe-area : décale le contenu sous l'encoche / au-dessus du home indicator. */
    padding-top: max(1rem, var(--prn-safe-top));
    padding-bottom: max(1rem, var(--prn-safe-bottom));
    padding-right: max(0px, var(--prn-safe-right));
    overflow-y: auto;
}

.prn-drawer.is-open .prn-drawer-panel {
    transform: translateX(0);
}

/* Évite le scroll du body quand le drawer est ouvert. */
html.prn-drawer-open,
body.prn-drawer-open {
    overflow: hidden !important;
}

.prn-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem 0.85rem;
    border-bottom: 1px solid var(--prn-line-soft);
}

.prn-drawer-head .prn-drawer-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--prn-muted);
}

.prn-drawer-close {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--prn-ink-soft);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    font-family: inherit;
}
.prn-drawer-close:hover {
    border-color: var(--prn-line);
    color: var(--prn-ink);
}
.prn-drawer-close:focus-visible {
    outline: 2px solid var(--prn-teal);
    outline-offset: 2px;
}

.prn-drawer-section {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--prn-line-soft);
}
.prn-drawer-section:last-child {
    border-bottom: 0;
}
.prn-drawer-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--prn-muted);
    margin-bottom: 0.5rem;
}

.prn-drawer-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 0.75rem;
    border-radius: 10px;
    color: var(--prn-ink);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    min-height: 44px;
    transition: background var(--t-fast) var(--ease-out);
}
.prn-drawer-link:hover,
.prn-drawer-link:focus-visible {
    background: var(--prn-int-hover-bg);
    text-decoration: none;
}
.prn-drawer-link:focus-visible {
    outline: 2px solid var(--prn-teal);
    outline-offset: -2px;
}
.prn-drawer-link.is-active {
    background: var(--prn-teal-light);
    color: var(--prn-teal);
    font-weight: 600;
}
.prn-drawer-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.prn-drawer-langs {
    display: inline-flex;
    background: var(--prn-surface-2);
    border: 1px solid var(--prn-line);
    border-radius: 999px;
    padding: 3px;
}
.prn-drawer-langs button {
    border: 0;
    background: transparent;
    color: var(--prn-muted);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    min-height: 36px;
    min-width: 56px;
}
.prn-drawer-langs button.active {
    background: var(--logo-teal);
    color: #ffffff;
}

.prn-drawer-user {
    margin-top: auto;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--prn-line);
    background: var(--prn-surface-2);
}
.prn-drawer-user-email {
    display: block;
    font-size: 0.78rem;
    color: var(--prn-muted);
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
    .prn-drawer-panel,
    .prn-drawer-backdrop {
        transition: none;
    }
}
@media (max-width: 640px) {
    .prn-actions-sticky {
        padding-bottom: max(0.7rem, calc(0.7rem + var(--prn-safe-bottom)));
    }
}

/* Bouton flottant calculatrice clinique */
.prn-calc-btn {
    bottom: max(1.25rem, calc(1.25rem + var(--prn-safe-bottom)));
    right: max(1.25rem, calc(1.25rem + var(--prn-safe-right)));
}

/* Toasts — flottants en bas centre */
.prn-toast-wrap {
    bottom: max(1.25rem, calc(1.25rem + var(--prn-safe-bottom)));
    padding-left: var(--prn-safe-left);
    padding-right: var(--prn-safe-right);
}

/* Modal calc clinique — pleine hauteur en mobile + safe-area */
@media (max-width: 600px) {
    .prn-modal-overlay {
        padding: 0;
    }
    .prn-modal-overlay > * {
        max-height: calc(100vh - var(--prn-safe-top) - var(--prn-safe-bottom));
        margin-top: var(--prn-safe-top);
        margin-bottom: var(--prn-safe-bottom);
        border-radius: 0;
    }
}

/* ==========================================================================
   8. Boutons d'action des ordonnances (Imprimer / Télécharger PDF)
   --------------------------------------------------------------------------
   Le bouton "📥 Télécharger PDF" devient le primary sur mobile{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
}

/* ==========================================================================
   9. Modules — corrections ciblées sous 640 px
   ========================================================================== */
@media (max-width: 640px) {
    /* Hero index : padding plus serré, texte mieux dimensionné */
    .hero { padding: 2.5rem 0 2rem; }
    .hero-ctas { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .hero-ctas .btn { justify-content: center; width: 100%; }

    /* Cartes consultations : pleine largeur */
    .consult-card { padding: 1rem; }

    /* Wizard voyage : actions empilées si trop étroites */
    .voyage-actions {
        flex-wrap: wrap;
    }
    .voyage-actions .btn {
        flex: 1 1 100%;
        min-height: 44px;
    }

    /* Résultats voyage : rangées de boutons (nav section + sortie) empilées
       pour éviter que « Recommencer » soit tronqué sur écran étroit. */
    .prn-res-btnrow {
        flex-direction: column;
    }

    /* HTA / Périnatal / NV / Oxyures : actions empilées si manque de place */
    .hta-actions,
    .prn-final-actions {
        flex-direction: column-reverse;
    }
    .hta-actions .btn,
    .prn-final-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   10. iframe (audit) : empêche le débordement horizontal au sein du harnais
   ========================================================================== */
@media (max-width: 820px) {
    html, body {
        overflow-x: hidden;
    }
}
/* Fin responsive.css */