/* ==========================================================================
   CercleKit — écran de CONNEXION (wp-login.php).
   ANCRÉ (décision 2026-08-01) : cet écran est LE MÊME sur tous les sites —
   couleurs de la charte, textes fixes, aucun réglage. Seul le logo du client
   reste réglable, servi par class-login.php, qui pose aussi l'unique
   variable dynamique : --ck-login-logo-filter (silhouette blanche quand le
   logo tiers n'a pas de version pour fond sombre).
   Extrait du bloc <style> de class-login.php en 4.2.552, valeurs résolues à
   l'identique. Chargé par login_enqueue_scripts, indépendant de ck-tokens.
   ========================================================================== */
/* --- Typographie : Google Sans, auto-hébergée (mêmes woff2 que le reste de
   l'interface — voir ck-composants.css). URLs relatives à assets/css/. --- */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans/google-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans/google-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

  /* ── Le fond : pleine largeur, césure au milieu de l'écran ─────────────
     La couleur n'est PAS portée par les colonnes mais par un dégradé sur le
     <body> : les colonnes font la moitié d'un bloc de 1100 px centré, donc
     leur frontière tombe pile au milieu de l'écran et chaque teinte continue
     seule jusqu'au bord. C'est ce qui donne « fond à 100 %, contenu borné ».
     `!important` partout : on écrase la feuille de wp-login.php, qui gagne
     sinon sur tout ce qui la touche. */
  /* LE <body> N'EST PAS UN CONTENEUR FLEX, et c'est un correctif, pas un
     détail de style. Il l'était : `#login` y était centré par `margin:auto`.
     Sauf que sur wp-login.php le `<body>` n'appartient à personne — Complianz,
     Wordfence, un cookie banner, n'importe quelle extension y ajoute son
     bloc. Chaque bloc devenait un FRÈRE flex qui poussait `#login` vers la
     droite : la césure, elle, restait peinte à 50 % du <body>. Résultat, les
     deux ne coïncidaient plus et la colonne sombre débordait au-delà du
     milieu. Reproduit au banc : un seul voisin de 344 px déplace la frontière
     de 860 à 1032. En flux normal, un voisin se range SOUS la page (ce que
     l'extension attend) et ne décale plus rien. */
  body.login {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    background: #f7f4f0 !important;
    font-family: "Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    color: #0b1726 !important;
    -webkit-font-smoothing: antialiased;
  }
  @media (min-width: 880px) {
    body.login {
      background: linear-gradient(to right,
        #0b1726 0 50%,
        #f7f4f0 50% 100%) !important;
    }
  }

  /* ── Le contenu, borné à 1100 px ────────────────────────────────────── */
  body.login #login {
    width: 100% !important;
    max-width: 1100px !important;
    /* `margin:0 auto` centre le bloc SANS dépendre de son parent — c'est ce
       qui garantit que sa frontière tombe au milieu de l'écran, donc sur la
       césure du dégradé, quoi qu'une extension ajoute au <body>. */
    margin: 0 auto !important;
    padding: 0 !important;
    /* La pleine hauteur est portée ICI et non par le <body> : les colonnes
       doivent monter jusqu'en haut et descendre jusqu'en bas. */
    min-height: 100vh !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  @media (max-width: 879px) {
    body.login #login { grid-template-columns: 1fr !important; }
  }

  #ck-left, #ck-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(48px, 7vh, 88px) clamp(28px, 5vw, 72px);
    min-width: 0;
  }
  /* La colonne sombre porte SA couleur : c'est elle qu'on voit une fois
     empilée, quand le dégradé du <body> ne s'applique plus. */
  #ck-left  { background: #0b1726; }
  #ck-right { background: #f7f4f0; }
  @media (min-width: 880px) {
    #ck-right { padding-left: calc(clamp(28px, 5vw, 72px) * 1.25); }
  }
  /* LES MARGES EXTÉRIEURES NE TOMBENT QU'À 1244 px, pas à 880.
     Le contenu se cale au bord du bloc de 1100 px — c'est ce qui l'aligne sur
     la grille quand l'écran est large. Mais entre 880 et 1244, ce bloc occupe
     TOUTE la largeur : sans marge, le texte se colle au bord de la fenêtre.
     1244 = 1100 + 2 × 72, soit la première largeur qui offre vraiment la
     gouttière. En dessous, les colonnes gardent la leur. */
  @media (min-width: 1244px) {
    #ck-left  { padding-left: 0; }
    #ck-right { padding-right: 0; }
  }

  /* ── Colonne gauche : le message ─────────────────────────────────────
     Le label n'est plus une pastille : un intertitre en capitales, comme sur
     la page de chantier. Une gélule colorée est le tic qu'on a retiré. */
  #ck-left-label {
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #d85a36;
  }
  #ck-left-title {
    margin: 0;
    font-size: clamp(1.4rem, 2.3vw, 1.9rem);
    line-height: 1.18;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: #f7f4f0;
  }
  /* `max-width` en `em` : la mesure suit la taille du texte, donc la ligne
     garde sa longueur de lecture à toutes les tailles. */
  #ck-left-sub {
    margin: 18px 0 0;
    max-width: 34em;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(247,244,240,0.62);
  }

  /* Le logo ouvre la colonne SOMBRE, au-dessus de l'intertitre. */
  #ck-logo { margin: 0 0 clamp(32px, 6vh, 64px); }
  /* `max-height` + `width:auto` : le logo garde ses proportions quel que soit
     son format, et ne déborde jamais. */
  #ck-logo img {
    display: block;
    max-height: 32px;
    width: auto;
    max-width: 100%;
    /* Silhouette blanche pleine — UNIQUEMENT quand class-login.php a posé la
       variable (logo tiers sans version pour fond sombre, hors modale). Sans
       la variable : none, le logo garde ses couleurs. */
    filter: var(--ck-login-logo-filter, none);
  }

  body.login #login form,
  body.login #login #nav {
    width: 100% !important;
    max-width: 23rem !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .login label {
    display: block !important;
    margin: 0 0 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #0b1726 !important;
  }
  .login form .input,
  .login input[type="text"],
  .login input[type="password"],
  .login input[type="email"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 14px !important;
    padding: 12px 13px !important;
    height: auto !important;
    border: 1px solid #ded8d0 !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    color: #0b1726 !important;
    font-family: "Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
  }
  .login input[type="text"]:focus,
  .login input[type="password"]:focus,
  .login input[type="email"]:focus {
    border-color: #d85a36 !important;
    box-shadow: none !important;
    outline: none !important;
  }
  /* Le champ mot de passe de WordPress est enveloppé pour porter l'œil de
     révélation : sans ça, la marge basse se pose sur l'enveloppe ET sur le
     champ, et l'écart double. */
  .login .user-pass-wrap { margin: 0 !important; }
  .login .wp-pwd { position: relative !important; }
  .login .wp-pwd .button.wp-hide-pw {
    position: absolute !important;
    top: 0 !important; right: 0 !important;
    height: 44px !important; width: 44px !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
  }
  .login .wp-pwd .dashicons { color: #8a8580 !important; }

  /* Se souvenir de moi — au fer à gauche, avec le reste. */
  .login .forgetmenot {
    display: block !important;
    float: none !important;
    margin: 2px 0 0 !important;
  }
  .login .forgetmenot label {
    display: inline !important;
    font-size: 12.5px !important;
    color: #8a8580 !important;
  }

  /* LE bouton : rectangle plat, angle de 2 px, aucun mouvement au survol. */
  .login .submit { margin: 0 !important; }
  .login input[type="submit"] {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 20px 0 0 !important;
    padding: 14px 26px !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: #d85a36 !important;
    color: #ffffff !important;
    font-family: "Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0.005em !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background .15s ease !important;
  }
  .login input[type="submit"]:hover { background: #c44622 !important; }

  /* L'écran de réinitialisation ajoute un bouton SECONDAIRE (« Générer un mot
     de passe ») et l'indicateur de robustesse : laissés tels quels, ils
     arrivent en bleu WordPress arrondi au milieu d'une page terracotta plate.
     Le bouton devient un contour discret, l'indicateur garde ses couleurs —
     elles portent un sens — mais perd ses angles ronds. */
  .login .button.wp-generate-pw {
    display: inline-block !important;
    margin: 0 !important;
    padding: 11px 18px !important;
    height: auto !important;
    border: 1px solid #ded8d0 !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: #0b1726 !important;
    font-family: "Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
  .login .button.wp-generate-pw:hover {
    border-color: #d85a36 !important;
    color: #d85a36 !important;
    background: transparent !important;
  }
  .login #pass-strength-result {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 10px 0 0 !important;
    padding: 9px 12px !important;
    border-radius: 2px !important;
    font-family: "Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
  }
  .login .description.indicator-hint {
    margin: 10px 0 14px !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: #8a8580 !important;
  }

  /* Les liens natifs (mot de passe oublié, inscription) : c'est un vrai
     compte WordPress, ses parcours restent à portée de main. */
  body.login #login #nav { margin-top: 16px !important; text-align: left !important; }
  body.login #login #nav a {
    font-size: 12.5px !important;
    color: #8a8580 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #ded8d0 !important;
  }
  body.login #login #nav a:hover {
    color: #d85a36 !important;
    border-bottom-color: #d85a36 !important;
  }

  /* Messages et erreurs : un filet à gauche, pas un bloc coloré. */
  body.login #login .message,
  body.login #login .success,
  body.login #login #login_error,
  body.login #login .notice {
    width: 100% !important;
    max-width: 23rem !important;
    margin: 0 0 18px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-left: 2px solid #d85a36 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #0b1726 !important;
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
    box-shadow: none !important;
  }

  /* Les liens DANS un message (« Mot de passe oublié ? » glissé dans l'erreur
     de connexion) : WordPress les laisse en bleu natif. */
  body.login #login .message a,
  body.login #login #login_error a,
  body.login #login .notice a {
    color: #d85a36 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #d85a36 !important;
  }

  /* ── LA RECONNEXION EN MODALE ────────────────────────────────────────
     Quand une session expire dans l'administration, WordPress rouvre
     wp-login.php dans une petite iframe (`body.interim-login`, ~400 px de
     large). Notre mise en page plein écran s'y appliquerait telle quelle : la
     colonne sombre passerait au-dessus du formulaire, le tout dans une boîte
     qui ne défile pas — l'utilisateur ne verrait plus ses champs. On y sert
     donc la seule colonne utile, sans hauteur imposée. */
  body.interim-login {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: #f7f4f0 !important;
  }
  body.interim-login #login {
    display: block !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 26px 24px !important;
  }
  /* La colonne sombre disparaît, mais PAS le logo qu'elle porte : une modale
     de reconnexion sans marque, c'est une boîte anonyme qui demande un mot de
     passe. On garde donc le bloc, vidé de son message, sur fond clair — donc
     sans la transformation en silhouette blanche, qui l'effacerait. */
  body.interim-login #ck-left {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
  }
  body.interim-login #ck-left-label,
  body.interim-login #ck-left-title,
  body.interim-login #ck-left-sub { display: none !important; }
  body.interim-login #ck-right {
    padding: 0 !important;
    background: transparent !important;
  }
  body.interim-login #ck-logo { margin: 0 0 20px !important; }
  body.interim-login #ck-logo img { max-height: 26px !important; filter: none !important; }
  body.interim-login #login form,
  body.interim-login #login #nav,
  body.interim-login #login .message,
  body.interim-login #login .success,
  body.interim-login #login #login_error,
  body.interim-login #login .notice { max-width: none !important; }

  /* Ce que WordPress ajoute et qui n'a pas sa place ici. */
  body.login #backtoblog,
  body.login .language-switcher,
  body.login .privacy-policy-page-link,
  body.login h1,
  body.login #login > p:not(#nav) { display: none !important; }

