/* ═══════════════════════════════════════════════════════════════
   LES PORTES — /start/ ET /register/ — 10/11/2026

   UNE SEULE FEUILLE POUR LES DEUX PAGES. Elles se suivent (on passe
   de l'une à l'autre par un lien) : elles doivent être identiques,
   pas se ressembler. Deux feuilles séparées, c'est deux jeux de
   valeurs qui divergent à la première retouche — c'est exactement
   ce qui est arrivé.

   LES DEUX BALISAGES NE NOUS APPARTIENNENT PAS :
     /start/    = wp-login.php (#loginform, .forgetmenot, #nav…),
                  déplacé par WPS Hide Login, habillé par LoginPress ;
     /register/ = Ultimate Member (.um-field, .um-button…) dans un
                  document émis par inscription-neuf.php.
   Chaque règle liste donc les deux familles de sélecteurs. Les
   valeurs, elles, ne sont écrites qu'une fois.

   LE CORPS PORTE .km-porte DANS LES DEUX CAS : filtre
   login_body_class pour wp-login, attribut en dur pour l'autre.

   LES !important SONT POUR LOGINPRESS ET POUR DIVI, qui impriment
   leur CSS EN LIGNE dans le head — donc après les feuilles mises en
   file. functions.php imprime celle-ci en priorité 9999 pour passer
   derrière eux ; les !important ne couvrent que ce qu'ils écrivent
   en dur (fonds, polices, couleurs de bouton).
   ═══════════════════════════════════════════════════════════════ */

.km-porte{
    --kx-encre:#e6e6e9;
    --kx-sub:#9a9aa2;
    --kx-dim:#6a6a74;
    --kx-fond:#08080c;
    --kx-carte:#121216;
    --kx-filet:#26262d;
    --kx-rouge:#BF1A1A;
    --kx-ui:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ── 1. LE FOND ─────────────────────────────────────────────
      Les deux nappes de la page Vox, au tiers de leur intensité :
      une porte d'entrée n'a pas à clignoter. Pas de filter:blur,
      trop cher à animer — ce sont des dégradés étirés.

      ELLES VIVENT DANS UN CALQUE À ELLES, pas sur les pseudo-
      éléments du corps. Posées sur body::before/::after, elles
      laissaient une arête droite en travers du dégradé dès que le
      corps dépassait la hauteur de l'écran (cas de /register/) :
      Chrome rogne le mélange au-delà d'une certaine surface. Le
      calque est fixe et borné à la fenêtre, le mélange aussi. */
html{ background:#08080c !important; }
/* LE GRIS DU SITE N'EST PAS SUR LE CORPS : komogo.css le peint dans
   un body::before FIXE, plein ecran, en #2a2a2a. Les fonds calcules
   de <html> et <body> annoncaient donc #08080c pendant que la page
   affichait du gris, et le mix-blend-mode des nappes se melangeait
   a ce gris sur /register/ et a rien sur wp-login. D'ou deux fonds
   differents pour une seule feuille. */
body.km-porte::before, body.km-porte::after{ content:none !important; display:none !important; }
body.km-porte{
    background-image:none !important;
    background-color:var(--kx-fond) !important;
    color:var(--kx-encre);
    font-family:var(--kx-ui);
    position:relative; isolation:isolate; min-height:100vh;
    overflow-x:hidden;
}
.km-porte .km-nappes{
    position:fixed; inset:0; z-index:-1;
    overflow:hidden; pointer-events:none;
}
.km-porte .km-nappes i{
    position:absolute; inset:-35%; display:block; mix-blend-mode:screen;
}
.km-porte .km-nappes i:nth-child(1){
    background:
      radial-gradient(ellipse 52% 22% at 28% 26%, rgba(191, 26, 26, .36), transparent 68%),
      radial-gradient(ellipse 42% 18% at 74% 68%, rgba( 79,140,240, .27), transparent 70%);
    animation:kx-derive-a 26s ease-in-out infinite alternate;
}
.km-porte .km-nappes i:nth-child(2){
    background:
      radial-gradient(ellipse 44% 19% at 66% 14%, rgba(126, 62, 214, .22), transparent 70%),
      radial-gradient(ellipse 38% 17% at 26% 82%, rgba(191, 26, 26, .20), transparent 72%);
    animation:kx-derive-b 33s ease-in-out infinite alternate;
}
@keyframes kx-derive-a{ from{ transform:translate3d(-3%,-2%,0) scale(1) }  to{ transform:translate3d(4%,3%,0) scale(1.12) } }
@keyframes kx-derive-b{ from{ transform:translate3d(3%,2%,0) scale(1.08) } to{ transform:translate3d(-4%,-3%,0) scale(1) } }

/* ── 2. LE SAS ──────────────────────────────────────────────
      /start/ tient en six champs, /register/ en sept : la colonne
      est la même, le contenu décide de la hauteur. */
.km-porte #login,
.km-porte .km-sas{
    position:relative; z-index:1;
    width:440px; max-width:92vw; margin:0 auto !important;
    padding:clamp(40px, 11vh, 118px) 0 0;
    background:transparent !important; border:0 !important; box-shadow:none !important;
}
html body.km-porte{ padding:0 0 80px; }

/* ── 3. LA MARQUE ───────────────────────────────────────────
      Le mot-symbole horizontal blanc, celui-là même que l'accueil
      pose en noir sur son papier : une seule marque, deux fonds.
      wp-login le sert en fond d'un <a>, /register/ en <img>. */
.km-porte #login h1 a,
.km-porte #login .wp-login-logo a{
    background-image:url('https://www.komogo.net/wp-content/uploads/2023/11/logo_komogo_2023_W.png') !important;
    background-size:contain !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    width:208px !important; height:42px !important;
    margin:0 auto 10px !important; padding:0 !important;
}
.km-porte .km-marque{ display:block; text-align:center; line-height:0; margin:0 0 10px; }
.km-porte .km-marque img{ display:inline-block; width:208px; max-width:70%; height:auto; }
.km-porte .km-chapo{
    margin:0 0 30px; text-align:center;
    font-size:.64rem; font-weight:600; letter-spacing:.19em;
    text-transform:uppercase; color:#8d8d96;
}

/* ── 4. LA CARTE ────────────────────────────────────────────
      12 px comme toutes les cartes du site ; les contrôles qu'elle
      contient restent à 4 px. */
.km-porte #login form,
.km-porte .km-carte{
    background:var(--kx-carte) !important;
    border:1px solid var(--kx-filet) !important;
    border-radius:12px !important;
    box-shadow:0 24px 60px rgba(0,0,0,.45) !important;
    padding:28px 26px 24px !important;
    margin-top:0 !important;
}
.km-porte #login form p{ margin-bottom:18px; }
.km-porte #login form .submit{ margin-bottom:4px; }

/* L'avertissement de /register/ : le filet rouge des encarts. */
.km-porte .km-avert{
    background:#161620; border:1px solid var(--kx-filet);
    border-left:3px solid var(--kx-rouge); border-radius:4px;
    padding:15px 17px; margin:0 0 22px;
    font-size:.8rem; line-height:1.62; color:#b4b4bc;
}
.km-porte .km-avert p{ margin:0 0 8px; }
.km-porte .km-avert p:last-child{ margin:0; }
.km-porte .km-avert b{ color:#fff; font-weight:600; }

/* ── 5. LES ÉTIQUETTES ──────────────────────────────────────
      En graisse normale et très espacées, elles se délavaient sur
      le fond sombre. 600 et un ton plus clair leur rendent leur
      présence sans les faire crier. */
.km-porte #login form > p > label,
.km-porte #login .user-pass-wrap > label,
.km-porte .um-field-label label{
    display:block !important; margin:0 0 9px !important; padding:0 !important;
    font-family:var(--kx-ui) !important;
    font-size:.66rem !important; font-weight:600 !important;
    letter-spacing:.17em !important; text-transform:uppercase !important;
    color:#b2b2ba !important; line-height:1.4 !important;
}
.km-porte .um-field-label{ margin:0 !important; border:0 !important; }
.km-porte .um-field-label .um-req{ color:var(--kx-rouge) !important; margin-left:3px; }

/* ── 6. LES CHAMPS ──────────────────────────────────────────
      Sur /register/, le texte saisi était en NEWAKE : la police
      d'affichage du site était héritée jusque dans les champs.
      Et -webkit-text-fill-color est explicite, sinon l'auto-
      remplissage de Chrome repeint le texte en sombre sur sombre. */
.km-porte input[type=text],
.km-porte input[type=password],
.km-porte input[type=email],
.km-porte input[type=number],
.km-porte .input,
.km-porte .um-form select,
.km-porte .um-form textarea{
    width:100% !important; box-sizing:border-box;
    background:#0e0e12 !important;
    border:1px solid #2c2c34 !important;
    border-radius:4px !important;
    color:var(--kx-encre) !important;
    -webkit-text-fill-color:var(--kx-encre);
    caret-color:var(--kx-rouge);
    box-shadow:none !important; outline:none !important;
    font-family:var(--kx-ui) !important;
    font-size:.95rem !important; line-height:1.3 !important;
    padding:12px 14px !important; height:auto !important;
}
.km-porte input[type=text]:focus,
.km-porte input[type=password]:focus,
.km-porte input[type=email]:focus,
.km-porte .input:focus,
.km-porte .um-form select:focus,
.km-porte .um-form textarea:focus{
    border-color:var(--kx-rouge) !important;
    box-shadow:0 0 0 3px rgba(191,26,26,.18) !important;
}
.km-porte input::placeholder{ color:var(--kx-dim) !important; }
.km-porte input:-webkit-autofill,
.km-porte input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px #0e0e12 inset !important;
    -webkit-text-fill-color:var(--kx-encre) !important;
}

/* L'œil du mot de passe était en bleu WordPress. */
.km-porte .wp-pwd{ position:relative; }
.km-porte .wp-pwd .wp-hide-pw{
    background:transparent !important; border:0 !important; box-shadow:none !important;
    color:var(--kx-dim) !important; top:0; right:2px; height:100%;
}
.km-porte .wp-pwd .wp-hide-pw:hover,
.km-porte .wp-pwd .wp-hide-pw:focus{ color:var(--kx-rouge) !important; outline:none; }
.km-porte .wp-pwd .wp-hide-pw .dashicons{ color:inherit !important; }
.km-porte .um-field-area-password{ position:relative; }
.km-porte .um-toggle-password{ color:var(--kx-dim) !important; }
.km-porte .um-toggle-password:hover{ color:var(--kx-rouge) !important; }

/* ── 7. « SE SOUVENIR DE MOI » (wp-login seul) ───────────────
      appearance:none neutralise accent-color : la case était peinte
      en #008ec2 par la règle de fond, pas par la teinte d'accent. On
      peint donc le fond, et on redessine la coche dans le ::before
      que LoginPress remplissait d'un SVG bleu. */
.km-porte #login .forgetmenot{ display:flex !important; align-items:center; gap:9px; margin:0 0 22px !important; }
.km-porte .forgetmenot input[type=checkbox]{
    appearance:none; -webkit-appearance:none;
    width:17px; height:17px; margin:0 !important; flex:none; padding:0 !important;
    background:#0e0e12 !important;
    border:1px solid #3a3a44 !important; border-radius:3px !important;
    box-shadow:none !important; position:relative;
}
.km-porte .forgetmenot input[type=checkbox]:checked{
    background:var(--kx-rouge) !important; border-color:var(--kx-rouge) !important;
}
.km-porte .forgetmenot input[type=checkbox]:checked::before{
    content:"" !important; display:block; position:absolute;
    left:5px; top:2px; width:4px; height:8px;
    border:solid #fff; border-width:0 2px 2px 0; border-radius:0;
    transform:rotate(45deg); background:none; margin:0 !important;
}
.km-porte #login .forgetmenot label{
    display:inline !important;
    font-size:.84rem !important; font-weight:400 !important; color:#b4b4bc !important;
    letter-spacing:0 !important; text-transform:none !important; margin:0 !important;
}
.km-porte .wp-tooltip__toggle{ background:transparent; border:0; color:var(--kx-dim); }
.km-porte .wp-tooltip__toggle .dashicons{ color:inherit; }

/* ── 8. LE BOUTON ───────────────────────────────────────────
      #9e1a1a (LoginPress) et #3ba1da (Ultimate Member) étaient deux
      couleurs d'usine. Le rouge de marque ne s'ajuste pas. */
.km-porte .button-primary,
.wp-core-ui .km-porte .button-primary,
.km-porte .um .um-button,
.km-porte .um input[type=submit].um-button{
    display:block !important;
    width:100% !important; min-width:0 !important; height:auto !important;
    background:var(--kx-rouge) !important;
    border:0 !important; border-radius:4px !important;
    color:#fff !important; text-shadow:none !important;
    box-shadow:0 10px 26px rgba(191,26,26,.26) !important;
    font-family:var(--kx-ui) !important;
    font-size:.78rem !important; font-weight:700 !important;
    letter-spacing:.14em !important; text-transform:uppercase !important;
    padding:15px 20px !important; line-height:1.1 !important;
    cursor:pointer !important;
    transition:background .18s ease, transform .18s ease;
}
.km-porte .button-primary:hover,
.wp-core-ui .km-porte .button-primary:hover,
.km-porte .um .um-button:hover{ background:#a81717 !important; transform:translateY(-1px); }
.km-porte .button-primary:active{ transform:none; }
.km-porte .um-col-alt{ margin:2px 0 0 !important; padding:0 !important; }
.km-porte .um-center{ text-align:center !important; }
.km-porte .um{ margin:0 !important; opacity:1 !important; max-width:none !important; }
.km-porte .um-form{ max-width:none !important; }
.km-porte .um-row{
    background:transparent !important; border:0 !important;
    padding:0 !important; margin:0 !important; color:inherit !important;
}
.km-porte .um-field{ padding:0 0 16px !important; margin:0 !important; }

/* ── 9. LE CAPTCHA (/register/) ─────────────────────────────
      reCAPTCHA se sert en thème clair dans une iframe : sa plaque
      blanche ne se repeint pas d'ici. On l'assume — posée droit,
      centrée, encadrée comme un bloc du formulaire. */
.km-porte .g-recaptcha{
    display:flex; justify-content:center; overflow-x:auto;
    padding:12px; margin:2px 0 18px;
    background:#0e0e12; border:1px solid #2c2c34; border-radius:4px;
}

/* ── 10. CE QUI ENTOURE LA CARTE ────────────────────────────── */
.km-porte #nav, .km-porte #backtoblog, .km-porte .km-liens{
    text-align:center; padding:0; margin:20px 0 0;
    font-size:.74rem; color:var(--kx-dim);
}
.km-porte #backtoblog, .km-porte .km-liens + .km-liens{ margin-top:12px; }
.km-porte #nav a, .km-porte #backtoblog a,
.km-porte .km-liens a, .km-porte .km-cgv a,
.km-porte .privacy-policy-page-link a{
    color:var(--kx-sub) !important; text-decoration:none;
    border-bottom:1px solid transparent; padding-bottom:2px;
    transition:color .18s ease, border-color .18s ease;
}
.km-porte #nav a:hover, .km-porte #backtoblog a:hover,
.km-porte .km-liens a:hover, .km-porte .km-cgv a:hover,
.km-porte .privacy-policy-page-link a:hover{
    color:var(--kx-rouge) !important; border-bottom-color:var(--kx-rouge);
}
.km-porte .privacy-policy-page-link, .km-porte .km-cgv{
    margin:26px 0 0; text-align:center;
    font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
}

/* ── 11. MESSAGES ET ERREURS ────────────────────────────────
      La plaque claire de WordPress crevait le fond. Filet rouge à
      gauche, comme les encarts du site. */
.km-porte #login_error, .km-porte .message, .km-porte .notice,
.km-porte .um-notice, .km-porte .um-field-error{
    background:#161620 !important;
    border:1px solid var(--kx-filet) !important;
    border-left:3px solid var(--kx-rouge) !important;
    border-radius:4px !important;
    color:#cfcfd6 !important; box-shadow:none !important;
    font-family:var(--kx-ui) !important;
    font-size:.86rem !important; line-height:1.55 !important;
    padding:13px 16px !important; margin:0 0 20px !important;
}
.km-porte .um-field-error{
    font-size:.8rem !important; padding:9px 12px !important;
    margin:8px 0 0 !important; color:#e8b9bd !important;
}
.km-porte .um-field-error .um-field-arrow{ display:none !important; }
.km-porte .um-notice i{ display:none !important; }
.km-porte #login_error a, .km-porte .message a{ color:#fff !important; }
.km-porte .message{ border-left-color:var(--kx-dim) !important; }
.km-porte .um-notice.success{
    background:#12201a !important; border-color:#1d3a28 !important;
    border-left-color:#1d8b4a !important; color:#b7e0c6 !important;
}

/* ── 12. CE QU'ON RETIRE ────────────────────────────────────
      Le sélecteur de langue n'a rien à faire sur une page d'entrée
      française : le filtre login_display_language_dropdown le coupe
      déjà, la règle reste en garde-fou. Le bandeau de consentement
      de Limit Login Attempts était la seule plaque claire restante. */
body .language-switcher{ display:none !important; }
#llar-login-page-gdpr{
    background:#121216 !important;
    border-top:1px solid #26262d !important;
    color:#6a6a74 !important;
}
#llar-login-page-gdpr .llar-login-page-gdpr__message{
    color:#6a6a74 !important; font-size:.68rem !important; line-height:1.5 !important;
    max-width:62ch; margin:0 auto;
}
#llar-login-page-gdpr .llar-login-page-gdpr__close{ color:#9a9aa2 !important; }

@media (max-width:480px){
    .km-porte #login, .km-porte .km-sas{ padding-top:36px; }
    .km-porte #login form, .km-porte .km-carte{ padding:22px 17px 20px !important; }
}
@media (prefers-reduced-motion: reduce){
    .km-porte .km-nappes i{ animation:none; }
    .km-porte .button-primary, .km-porte .um .um-button{ transition:none; }
    .km-porte .button-primary:hover, .km-porte .um .um-button:hover{ transform:none; }
}

/* Même cause sur les portes : les champs étaient à .95rem (15,2 px),
   juste sous le seuil de 16 px où Safari sur iPhone zoome au toucher.
   Sur écran tactile seulement, l'aspect bureau ne bouge pas. */
@media (pointer:coarse){
    .km-porte input[type=text],
    .km-porte input[type=password],
    .km-porte input[type=email],
    .km-porte input[type=number],
    .km-porte .input,
    .km-porte .um-form select,
    .km-porte .um-form textarea{ font-size:16px !important; }
}