/* ============================================================================
   public-auth.css — LOT « Public · Connexion · Inscription · Mot de passe »
   Refonte APP (2026-08-14) — habillage additif du design system sombre.
   ----------------------------------------------------------------------------
   • 100 % ADDITIF et RÉVERSIBLE. N'édite AUCUN fichier PHP. Supprimer ce
     fichier = retour exact à l'état précédent.
   • CIBLE : version APP mobile uniquement. TOUT est scopé `html.apprefonte`
     ET enfermé dans @media (max-width:768px) → le BUREAU (>768px) n'est
     JAMAIS touché (les pages login/register alignent une carte sur un fond
     maquette au desktop : on n'y touche pas).
   • Réutilise les tokens EXISTANTS de app-refonte.css (--ar-*). Aucun token
     n'est redéfini ; les `var(--ar-*, …)` portent un repli défensif au cas où
     la feuille serait activée sans app-refonte.css.
   • PALETTE : sombre unique. Cyan = exploration/communication, Ambre =
     engagement (UNE seule action pleine par écran). Rouge = destructif/112.
     Bannis : bleu / vert / violet / teal / brun / dégradés.
   • Cibles tactiles ≥44px, champs 16px (anti-zoom iOS), icônes SVG stroke.
   • Ni Gardien ni Étincelles ici : ces 4 écrans n'en contiennent pas.

   ⚠️ PRÉREQUIS D'ACTIVATION (hors périmètre — aucun fichier édité ici) :
      ces 4 pages sont AUTOPORTANTES (elles n'incluent pas header.php), donc
      elles ne posent pas `html.apprefonte` et ne chargent pas cette feuille.
      Tant que la classe racine + le lien CSS ne sont pas câblés sur ces pages,
      cet habillage reste inerte (100 % réversible). Voir la note de livraison.
   ============================================================================ */

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* ======================================================================
     A) CONNEXION — login.php  (classes réelles : .lg-*)
     Maquette : carte sombre plate, titre Inter, champ surface, 1 action
     pleine ambre « Se connecter », liens secondaires cyan.
     La page passe déjà en carte centrée < 1000px : on ne fait que reskinner.
     ====================================================================== */

  /* Scène : le repli mobile de la page vire au brun/orange (hors palette) →
     on impose le fond sombre officiel, plat. */
  html.apprefonte .lg-stage {
    background: var(--ar-bg, #071624) !important;
    padding: 6vh 16px calc(6vh + env(safe-area-inset-bottom,0px)) !important;
  }
  html.apprefonte .lg-halo { display: none !important; } /* pas de Gardien dessiné en app */

  /* Carte : gradient noir-orange → surface plate, hairline, grand rayon. */
  html.apprefonte .lg-card {
    background: var(--ar-surface, #0D2233) !important;
    border: 1px solid var(--ar-hairline, rgba(155,177,191,.18)) !important;
    border-radius: var(--ar-r-xl, 24px) !important;
    box-shadow: var(--ar-sh-card, 0 8px 24px rgba(0,0,0,.35)) !important;
    color: var(--ar-ink, #F6F0DF) !important;
    padding: 22px 18px !important;
    gap: 4px !important;
    max-width: 440px !important;
    font-size: 15px !important;
  }

  /* Titres : Cormorant serif banni → Inter, échelle DS. */
  html.apprefonte .lg-welcome {
    font: 700 22px/1.2 'Inter', system-ui, sans-serif !important;
    color: var(--ar-ink, #F6F0DF) !important;
    white-space: normal !important;
    margin: 0 0 2px !important;
  }
  html.apprefonte .lg-title {
    font: 500 13px/1.3 'Inter', system-ui, sans-serif !important;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ar-ink-soft, #9BB1BF) !important;
    opacity: 1 !important; margin: 0 0 12px !important;
  }

  /* Labels de champ. */
  html.apprefonte .lg-label {
    font: 500 14px/1.3 'Inter', system-ui, sans-serif !important;
    color: var(--ar-ink-soft, #9BB1BF) !important;
    margin: 12px 0 6px !important;
  }

  /* Champs : surface haute, bordure, 16px anti-zoom, focus cyan. */
  html.apprefonte .lg-input {
    background: var(--ar-surface-2, #123047) !important;
    border: 1px solid var(--ar-border, rgba(155,177,191,.32)) !important;
    border-radius: var(--ar-r-sm, 12px) !important;
    color: var(--ar-ink, #F6F0DF) !important;
    min-height: var(--ar-field-h, 52px) !important;
    font-size: 16px !important;
    padding: .8em .9em .8em 2.6em !important;
  }
  html.apprefonte .lg-input:focus {
    border-color: var(--ar-cyan, #35D7D1) !important;
    box-shadow: 0 0 0 3px var(--ar-cyan-10, rgba(53,215,209,.12)) !important;
  }
  html.apprefonte .lg-iw .ic { color: var(--ar-ink-soft, #9BB1BF) !important; }
  /* Œil afficher/masquer : cible ≥44px. */
  html.apprefonte .lg-eye {
    min-width: var(--ar-tap, 44px) !important; min-height: var(--ar-tap, 44px) !important;
    display: flex; align-items: center; justify-content: center;
    color: var(--ar-ink-soft, #9BB1BF) !important; right: .3em !important;
  }

  /* « Rester connecté » + « Mot de passe oublié ». */
  html.apprefonte .lg-rem {
    font-size: 14px !important; color: var(--ar-ink-soft, #9BB1BF) !important;
    min-height: var(--ar-tap, 44px);
  }
  html.apprefonte .lg-rem input[type="checkbox"] { accent-color: var(--ar-cyan, #35D7D1); width: 18px; height: 18px; }
  html.apprefonte .lg-forgot {
    font-size: 14px !important; color: var(--ar-cyan, #35D7D1) !important;
    display: inline-flex; align-items: center; min-height: var(--ar-tap, 44px);
  }

  /* Action pleine UNIQUE de l'écran = ambre (engagement « Se connecter »). */
  html.apprefonte .lg-btn {
    background: var(--ar-amber, #FFB65A) !important;
    color: var(--ar-on-accent, #071624) !important;
    border-radius: var(--ar-r-pill, 999px) !important;
    min-height: var(--ar-btn-h, 48px) !important;
    box-shadow: none !important;
    font: 700 16px/1 'Inter', system-ui, sans-serif !important;
    margin-top: 14px !important;
  }
  html.apprefonte .lg-btn:hover { filter: none !important; background: var(--ar-amber-hover, #FFC578) !important; }
  html.apprefonte .lg-btn:active { background: var(--ar-amber-press, #E09A3F) !important; }

  /* Séparateur « ou ». */
  html.apprefonte .lg-or { color: var(--ar-ink-soft, #9BB1BF) !important; font-size: 13px !important; }
  html.apprefonte .lg-or::before, html.apprefonte .lg-or::after {
    background: var(--ar-hairline, rgba(155,177,191,.18)) !important;
  }

  /* « Rejoindre la route » : action secondaire = contour cyan (communication). */
  html.apprefonte .lg-signup {
    border: 1px solid var(--ar-cyan-40, rgba(53,215,209,.40)) !important;
    background: var(--ar-cyan-10, rgba(53,215,209,.12)) !important;
    color: var(--ar-ink, #F6F0DF) !important;
    border-radius: var(--ar-r-pill, 999px) !important;
    min-height: var(--ar-btn-h, 48px) !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px !important;
  }
  html.apprefonte .lg-signup b { color: var(--ar-cyan, #35D7D1) !important; }

  /* Citation : serif décorative → discrète, Inter. */
  html.apprefonte .lg-quote {
    font: italic 400 15px/1.4 'Inter', system-ui, sans-serif !important;
    color: var(--ar-ink-soft, #9BB1BF) !important;
  }

  /* Bandeaux d'état : info en CYAN (jamais bleu), erreur en danger sobre. */
  html.apprefonte .lg-flash-info {
    background: var(--ar-cyan-10, rgba(53,215,209,.12)) !important;
    border: 1px solid var(--ar-cyan-40, rgba(53,215,209,.40)) !important;
    color: var(--ar-ink, #F6F0DF) !important;
    border-radius: var(--ar-r-sm, 12px) !important;
  }
  html.apprefonte .lg-flash-error {
    background: var(--ar-danger-10, rgba(229,84,75,.14)) !important;
    border: 1px solid var(--ar-danger, #E5544B) !important;
    color: var(--ar-ink, #F6F0DF) !important;
    border-radius: var(--ar-r-sm, 12px) !important;
  }


  /* ======================================================================
     B) INSCRIPTION — register.php  (classes réelles : .reg-*)
     La page force un thème noir-orange en !important (< 1000px) → il faut
     ré-imposer le sombre officiel en !important pour gagner.
     UNE seule action pleine ambre « Créer mon passeport de route ».
     ====================================================================== */

  html.apprefonte .reg-bg { background: var(--ar-bg, #071624) !important; }
  html.apprefonte .reg-halo { display: none !important; }

  /* Conteneur formulaire (carte). */
  html.apprefonte .reg-wrap {
    background: var(--ar-surface, #0D2233) !important;
    border: 1px solid var(--ar-hairline, rgba(155,177,191,.18)) !important;
    border-radius: var(--ar-r-xl, 24px) !important;
    box-shadow: var(--ar-sh-card, 0 8px 24px rgba(0,0,0,.35)) !important;
  }
  html.apprefonte .reg-card { background: transparent !important; border: 0 !important; box-shadow: none !important; }

  /* En-tête. */
  html.apprefonte .reg-title {
    font: 700 24px/1.2 'Inter', system-ui, sans-serif !important;
    color: var(--ar-ink, #F6F0DF) !important;
  }
  html.apprefonte .reg-sub { color: var(--ar-ink-soft, #9BB1BF) !important; font-size: 14px !important; }

  /* Labels de champ. */
  html.apprefonte .reg-f label { color: var(--ar-ink-soft, #9BB1BF) !important; }
  html.apprefonte .reg-f label .opt { color: var(--ar-ink-dis, rgba(155,177,191,.45)) !important; }
  html.apprefonte .reg-hint { color: var(--ar-ink-soft, #9BB1BF) !important; }

  /* Champs & selects : surface haute, focus cyan, icônes neutres. */
  html.apprefonte .reg-input input,
  html.apprefonte .reg-input select {
    background: var(--ar-surface-2, #123047) !important;
    border: 1px solid var(--ar-border, rgba(155,177,191,.32)) !important;
    border-radius: var(--ar-r-sm, 12px) !important;
    color: var(--ar-ink, #F6F0DF) !important;
    font-size: 16px !important; /* anti-zoom iOS */
    min-height: var(--ar-field-h, 52px) !important;
  }
  html.apprefonte .reg-input input::placeholder { color: var(--ar-ink-soft, #9BB1BF) !important; opacity: .8; }
  html.apprefonte .reg-input input:focus,
  html.apprefonte .reg-input select:focus {
    border-color: var(--ar-cyan, #35D7D1) !important;
    box-shadow: 0 0 0 3px var(--ar-cyan-10, rgba(53,215,209,.12)) !important;
  }
  html.apprefonte .reg-input .ic,
  html.apprefonte .reg-input .chev { color: var(--ar-ink-soft, #9BB1BF) !important; }
  html.apprefonte .reg-input .eye {
    color: var(--ar-ink-soft, #9BB1BF) !important;
    min-width: var(--ar-tap, 44px); min-height: var(--ar-tap, 44px);
  }

  /* Bloc consentement : boîte crème → surface haute, texte lisible, liens cyan. */
  html.apprefonte .reg-consent {
    background: var(--ar-surface-2, #123047) !important;
    border: 1px solid var(--ar-hairline, rgba(155,177,191,.18)) !important;
    border-radius: var(--ar-r-md, 16px) !important;
  }
  html.apprefonte .reg-consent .ttl { color: var(--ar-ink, #F6F0DF) !important; }
  html.apprefonte .reg-consent label { color: var(--ar-ink, #F6F0DF) !important; min-height: var(--ar-tap, 44px); }
  html.apprefonte .reg-consent a { color: var(--ar-cyan, #35D7D1) !important; text-decoration: underline !important; }
  html.apprefonte .reg-consent input[type=checkbox] { accent-color: var(--ar-cyan, #35D7D1) !important; width: 18px; height: 18px; }
  html.apprefonte .reg-shield {
    color: var(--ar-ink-soft, #9BB1BF) !important;
    border-top-color: var(--ar-hairline, rgba(155,177,191,.18)) !important;
  }
  html.apprefonte .reg-shield svg { color: var(--ar-cyan, #35D7D1) !important; }

  /* Action pleine UNIQUE = ambre (engagement) ; dégradé bleu banni. */
  html.apprefonte .reg-btn {
    background: var(--ar-amber, #FFB65A) !important;
    color: var(--ar-on-accent, #071624) !important;
    border-radius: var(--ar-r-pill, 999px) !important;
    min-height: var(--ar-btn-h, 48px) !important;
    padding: 14px 20px !important;
    box-shadow: none !important;
    text-transform: none !important; letter-spacing: .01em !important;
    font: 700 16px/1 'Inter', system-ui, sans-serif !important;
  }
  html.apprefonte .reg-btn:hover { filter: none !important; background: var(--ar-amber-hover, #FFC578) !important; }
  html.apprefonte .reg-btn:active { background: var(--ar-amber-press, #E09A3F) !important; }

  /* Pied « Déjà inscrit ? » + badge aperçu. */
  html.apprefonte .reg-foot { color: var(--ar-ink-soft, #9BB1BF) !important; }
  html.apprefonte .reg-foot a { color: var(--ar-cyan, #35D7D1) !important; }
  html.apprefonte .reg-apercu-badge {
    background: var(--ar-cyan-10, rgba(53,215,209,.12)) !important;
    border: 1px solid var(--ar-cyan-40, rgba(53,215,209,.40)) !important;
    color: var(--ar-ink, #F6F0DF) !important;
    border-radius: var(--ar-r-sm, 12px) !important;
  }


  /* ======================================================================
     C) MOT DE PASSE OUBLIÉ — mot-de-passe-oublie.php  (classes réelles : .al-*)
     Récupération admin : carte BLANCHE sur fond brun → carte sombre sur fond
     officiel. 1 action pleine ambre, retours en lien cyan.
     ====================================================================== */

  html.apprefonte body { /* fond brun de la page → sombre officiel (page autoportante) */
    background: var(--ar-bg, #071624) !important;
  }
  html.apprefonte .al-card {
    background: var(--ar-surface, #0D2233) !important;
    color: var(--ar-ink, #F6F0DF) !important;
    border: 1px solid var(--ar-hairline, rgba(155,177,191,.18)) !important;
    border-radius: var(--ar-r-xl, 24px) !important;
    box-shadow: var(--ar-sh-card, 0 8px 24px rgba(0,0,0,.35)) !important;
  }
  html.apprefonte .al-title {
    font: 700 22px/1.2 'Inter', system-ui, sans-serif !important;
    color: var(--ar-ink, #F6F0DF) !important;
  }
  html.apprefonte .al-subtitle { color: var(--ar-ink-soft, #9BB1BF) !important; }
  html.apprefonte .al-field label {
    color: var(--ar-ink-soft, #9BB1BF) !important; font-size: 14px !important;
  }
  html.apprefonte .al-field input {
    background: var(--ar-surface-2, #123047) !important;
    border: 1px solid var(--ar-border, rgba(155,177,191,.32)) !important;
    border-radius: var(--ar-r-sm, 12px) !important;
    color: var(--ar-ink, #F6F0DF) !important;
    font-size: 16px !important; /* anti-zoom iOS */
    min-height: var(--ar-field-h, 52px) !important;
    padding: 12px 14px !important;
  }
  html.apprefonte .al-field input:focus {
    border-color: var(--ar-cyan, #35D7D1) !important;
    box-shadow: 0 0 0 3px var(--ar-cyan-10, rgba(53,215,209,.12)) !important;
  }
  /* Action pleine UNIQUE = ambre ; dégradé or banni. */
  html.apprefonte .al-btn {
    background: var(--ar-amber, #FFB65A) !important;
    color: var(--ar-on-accent, #071624) !important;
    border-radius: var(--ar-r-pill, 999px) !important;
    min-height: var(--ar-btn-h, 48px) !important;
    box-shadow: none !important;
    font: 700 16px/1 'Inter', system-ui, sans-serif !important;
  }
  html.apprefonte .al-btn:hover { transform: none !important; box-shadow: none !important; background: var(--ar-amber-hover, #FFC578) !important; }
  /* Retour connexion admin : lien cyan, cible ≥44px. */
  html.apprefonte .al-link {
    color: var(--ar-cyan, #35D7D1) !important;
    min-height: var(--ar-tap, 44px);
    display: flex; align-items: center; justify-content: center;
  }
  /* Bandeaux : succès=cyan (PAS de vert), erreur=danger, info=ambre. */
  html.apprefonte .al-flash.ok {
    background: var(--ar-cyan-10, rgba(53,215,209,.12)) !important;
    border: 1px solid var(--ar-cyan-40, rgba(53,215,209,.40)) !important;
    color: var(--ar-ink, #F6F0DF) !important;
  }
  html.apprefonte .al-flash.err {
    background: var(--ar-danger-10, rgba(229,84,75,.14)) !important;
    border: 1px solid var(--ar-danger, #E5544B) !important;
    color: var(--ar-ink, #F6F0DF) !important;
  }
  html.apprefonte .al-flash.info {
    background: var(--ar-amber-10, rgba(255,182,90,.14)) !important;
    border: 1px solid var(--ar-amber-40, rgba(255,182,90,.40)) !important;
    color: var(--ar-ink, #F6F0DF) !important;
  }
  html.apprefonte .al-help {
    background: var(--ar-surface-2, #123047) !important;
    border: 1px solid var(--ar-hairline, rgba(155,177,191,.18)) !important;
    color: var(--ar-ink-soft, #9BB1BF) !important;
    border-radius: var(--ar-r-sm, 12px) !important;
  }


  /* ======================================================================
     D) PUBLIC (landing visiteurs) — index.php  (classes réelles : .hh-*)
     Thème crème/Cormorant → reskin sombre officiel (mandat DS P0), sans
     toucher à la grille de home-hero.css. « Rejoindre » = ambre (engagement),
     « Découvrir en visiteur » = contour cyan (exploration).
     ====================================================================== */

  html.apprefonte body { background: var(--ar-bg, #071624) !important; } /* couvre aussi la landing */

  html.apprefonte .hh-headline { color: var(--ar-ink, #F6F0DF) !important; }
  html.apprefonte .hh-accent { color: var(--ar-amber, #FFB65A) !important; }
  html.apprefonte .hh-text,
  html.apprefonte .hh-text-intro,
  html.apprefonte .hh-text-spirit { color: var(--ar-ink-soft, #9BB1BF) !important; }
  html.apprefonte .hh-divider-line { background: var(--ar-hairline, rgba(155,177,191,.18)) !important; }

  /* CTA principal « Rejoindre » = ambre plein. */
  html.apprefonte .hh-cta {
    background: var(--ar-amber, #FFB65A) !important;
    color: var(--ar-on-accent, #071624) !important;
    border-radius: var(--ar-r-pill, 999px) !important;
    min-height: var(--ar-btn-h, 48px) !important; box-shadow: none !important;
  }
  html.apprefonte .hh-cta svg { color: var(--ar-on-accent, #071624) !important; stroke: var(--ar-on-accent, #071624) !important; }

  /* CTA secondaire « Découvrir en visiteur » = contour cyan (surcharge le
     <style> inline de la page grâce à la spécificité html.apprefonte). */
  html.apprefonte .hh-cta-visitor {
    background: var(--ar-cyan-10, rgba(53,215,209,.12)) !important;
    border: 1px solid var(--ar-cyan-40, rgba(53,215,209,.40)) !important;
    color: var(--ar-ink, #F6F0DF) !important;
    border-radius: var(--ar-r-pill, 999px) !important;
    min-height: var(--ar-btn-h, 48px) !important; box-shadow: none !important;
  }
  html.apprefonte .hh-cta-visitor:hover { background: var(--ar-cyan-10, rgba(53,215,209,.12)) !important; transform: none !important; }
  html.apprefonte .hh-cta-visitor svg { stroke: var(--ar-cyan, #35D7D1) !important; }
  html.apprefonte .hh-visitor-links { color: var(--ar-ink-soft, #9BB1BF) !important; }
  html.apprefonte .hh-visitor-links a { color: var(--ar-cyan, #35D7D1) !important; }

  /* Cartes de la colonne droite → surface. */
  html.apprefonte .hh-card {
    background: var(--ar-surface, #0D2233) !important;
    border: 1px solid var(--ar-hairline, rgba(155,177,191,.18)) !important;
    border-radius: var(--ar-r-md, 16px) !important;
    box-shadow: var(--ar-sh-card, 0 8px 24px rgba(0,0,0,.35)) !important;
  }
  html.apprefonte .hh-card-title { color: var(--ar-ink, #F6F0DF) !important; }
  html.apprefonte .hh-card-text { color: var(--ar-ink-soft, #9BB1BF) !important; }
  html.apprefonte .hh-card-placeholder { color: var(--ar-cyan, #35D7D1) !important; }

  /* Bloc citation « liberté » : carte crème + shimmer doré → surface sobre. */
  html.apprefonte .hh-freedom {
    background: var(--ar-surface, #0D2233) !important;
    border: 1px solid var(--ar-hairline, rgba(155,177,191,.18)) !important;
    box-shadow: var(--ar-sh-card, 0 8px 24px rgba(0,0,0,.35)) !important;
    color: var(--ar-ink, #F6F0DF) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(20px, 5.5vw, 30px) !important;
  }
  html.apprefonte .hh-freedom em {
    background: none !important; -webkit-text-fill-color: var(--ar-amber, #FFB65A) !important;
    color: var(--ar-amber, #FFB65A) !important; animation: none !important;
  }
  html.apprefonte .hh-freedom .qq { color: var(--ar-ink-soft, #9BB1BF) !important; }

  /* Barre des 4 avantages. */
  html.apprefonte .hh-advantage strong { color: var(--ar-ink, #F6F0DF) !important; }
  html.apprefonte .hh-advantage span { color: var(--ar-ink-soft, #9BB1BF) !important; }
  html.apprefonte .hh-advantage-ico svg { color: var(--ar-cyan, #35D7D1) !important; stroke: var(--ar-cyan, #35D7D1) !important; }
}


/* ============================================================================
   Très petit téléphone (≤380px) : compactage doux, non destructif.
   ============================================================================ */
@media (max-width: 380px) {
  html.apprefonte .lg-card,
  html.apprefonte .reg-wrap,
  html.apprefonte .al-card { padding-left: 14px !important; padding-right: 14px !important; }
  html.apprefonte .lg-welcome,
  html.apprefonte .reg-title { font-size: 21px !important; }
}