/*
 * Écran de connexion (/connexion/) aux couleurs de « Qu'est-ce qu'on mange ? ».
 * Chargé après login.css de WordPress. Taille de base 1rem (16 px), le reste en rem / em.
 *
 * Mise en page :
 * - mobile et tablette (< 1024 px) : marque et titre à gauche, photos à droite, puis le formulaire ;
 *   #login passe en « display: contents » pour que ses enfants se placent dans la grille du <body>.
 * - bureau (≥ 1024 px) : photos à gauche, colonne de connexion à droite.
 * - fenêtre de reconnexion de l'administration (interim-login) : formulaire seul, compact.
 */

:root {
  --ksc-accent: #E8650F;
  --ksc-accent-fort: #B4470A;
  --ksc-accent-survol: #9C3D08;
  --ksc-accent-doux: #FDEBDD;
  --ksc-accent-ligne: #F2C9A8;
  --ksc-teinte-1: #FFE3CC;
  --ksc-teinte-2: #FFC9A0;
  --ksc-basilic: #2F6B4F;
  --ksc-basilic-fort: #24553E;
  --ksc-basilic-doux: #E4F0EA;
  --ksc-encre: #1F2421;
  --ksc-encre-douce: #5C635E;
  --ksc-fond: #F5F3EE;
  --ksc-surface: #FFFFFF;
  --ksc-ligne: #E6E1D8;
  --ksc-controle: #8A8F8A;
  --ksc-indicatif: #737973;
  --ksc-danger: #A3300B;
  --ksc-danger-doux: #FBE6DE;
  --ksc-verre: rgb(255 255 255 / .72);
  --ksc-ombre-s: 0 1px 2px rgb(74 46 20 / .06), 0 2px 8px -4px rgb(74 46 20 / .10);
  --ksc-ombre-m: 0 1px 2px rgb(74 46 20 / .05), 0 14px 34px -18px rgb(74 46 20 / .28);
  --ksc-ombre-l: 0 1px 2px rgb(74 46 20 / .05), 0 28px 64px -26px rgb(40 26 12 / .40);
  --ksc-ombre-bouton: 0 12px 24px -12px rgb(180 71 10 / .9), inset 0 1px 0 rgb(255 255 255 / .22);
  --ksc-anneau-focus: 0 0 0 4px rgb(232 101 15 / .22);
  --ksc-ease: cubic-bezier(.22, .8, .24, 1);
  --ksc-police: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ksc-organique: 46% 54% 52% 48% / 54% 44% 56% 46%;
  --ksc-organique-2: 54% 46% 44% 56% / 46% 56% 44% 54%;
  --ksc-gouttiere: 16px;
  /* Position du pointeur (-1 à 1), donnée par connexion.js au bureau : léger effet de profondeur */
  --px: 0;
  --py: 0;
  /* Icônes Lucide (ISC), dessinées en masque pour prendre la couleur du texte */
  --ksc-i-oeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --ksc-i-oeil-barre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
  --ksc-i-aide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --ksc-i-fermer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --ksc-i-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --ksc-i-alerte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  --ksc-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --ksc-i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --ksc-i-chargement: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E");
  --ksc-i-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ksc-i-majuscule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18v-6H5l7-7 7 7h-4v6H9z'/%3E%3Cpath d='M9 22h6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Page
   ========================================================================== */
html {
  font-size: 100%;
  background: var(--ksc-fond);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html { overflow-x: clip; }
}

body.ksc-connexion {
  box-sizing: border-box;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding:
    calc(14px + env(safe-area-inset-top, 0px))
    calc(var(--ksc-gouttiere) + env(safe-area-inset-right, 0px))
    calc(32px + env(safe-area-inset-bottom, 0px))
    calc(var(--ksc-gouttiere) + env(safe-area-inset-left, 0px));
  /* Fond porté par <html> : les formes du décor passent derrière le contenu sans le recouvrir */
  background: transparent;
  color: var(--ksc-encre);
  font-family: var(--ksc-police);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@supports (overflow: clip) {
  /* Formes qui débordent du bord de l'écran : jamais de défilement horizontal (iPhone compris) */
  body.ksc-connexion { overflow-x: clip; }
}
body.ksc-connexion *,
body.ksc-connexion *::before,
body.ksc-connexion *::after { box-sizing: border-box; }

body.ksc-connexion a { color: var(--ksc-accent-fort); }
body.ksc-connexion a:focus,
body.ksc-connexion button:focus,
body.ksc-connexion input[type="submit"]:focus { box-shadow: none; outline: none; }
body.ksc-connexion a:focus-visible,
body.ksc-connexion button:focus-visible,
body.ksc-connexion input[type="submit"]:focus-visible,
body.ksc-connexion input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ksc-accent-fort);
  outline-offset: 3px;
}

/* Décor : deux formes floues qui dérivent lentement, derrière tout le reste */
.ksc-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ksc-decor span {
  position: absolute;
  border-radius: var(--ksc-organique);
  animation: ksc-derive 22s ease-in-out infinite alternate;
}
.ksc-decor span:first-child {
  width: 72vmax; height: 72vmax;
  top: -36vmax; right: -28vmax;
  background: radial-gradient(closest-side, var(--ksc-teinte-2), rgb(255 201 160 / 0));
  opacity: .85;
}
.ksc-decor span:last-child {
  width: 64vmax; height: 64vmax;
  bottom: -34vmax; left: -28vmax;
  background: radial-gradient(closest-side, rgb(47 107 79 / .2), rgb(47 107 79 / 0));
  animation-delay: -11s;
}

/* ==========================================================================
   Marque (remplace le logo WordPress)
   ========================================================================== */
body.ksc-connexion .wp-login-logo {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: inherit;
  line-height: 1;
  text-align: left;
  animation: ksc-monte .7s var(--ksc-ease) both;
}
body.ksc-connexion.login .wp-login-logo a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 6px 0 0;
  overflow: visible;
  background: none;
  border-radius: 16px;
  color: var(--ksc-encre);
  font-size: 1rem;
  font-weight: inherit;
  line-height: 1;
  text-decoration: none;
  text-indent: 0;
}
.ksc-marque__sceau {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--ksc-organique);
  background: linear-gradient(145deg, var(--ksc-accent) 20%, var(--ksc-accent-fort) 100%);
  color: #fff;
  box-shadow: 0 10px 20px -10px rgb(180 71 10 / .7), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform .6s var(--ksc-ease), border-radius .9s var(--ksc-ease);
}
.ksc-marque__sceau .ksc-ico {
  width: 23px; height: 23px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.wp-login-logo a:hover .ksc-marque__sceau {
  transform: rotate(-8deg) scale(1.05);
  border-radius: var(--ksc-organique-2);
}
.ksc-marque__nom {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1;
}
.ksc-marque__haut {
  font-size: .78em;
  font-weight: 500;
  color: var(--ksc-encre-douce);
  white-space: nowrap;
}
.ksc-marque__bas {
  margin-top: 3px;
  font-size: 1.25em;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.ksc-marque__q { color: var(--ksc-accent-fort); }

/* ==========================================================================
   Accroche
   ========================================================================== */
body.ksc-connexion .ksc-titre {
  margin: 0;
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.125rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--ksc-encre);
  text-wrap: balance;
}
.ksc-mot {
  display: inline-block;
  animation: ksc-mot .9s var(--ksc-ease) both;
  animation-delay: calc(.15s + var(--i, 0) * .07s);
}
body.ksc-connexion .ksc-texte {
  margin: 12px 0 0;
  max-width: 36ch;
  color: var(--ksc-encre-douce);
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: pretty;
  animation: ksc-monte .8s var(--ksc-ease) .35s both;
}

/* ==========================================================================
   Messages (erreur, confirmation, consigne de l'écran)
   ========================================================================== */
body.ksc-connexion.login .notice,
body.ksc-connexion.login .message,
body.ksc-connexion.login #login_error {
  position: relative;
  margin: 16px 0 0;
  padding: 12px 14px 12px 46px;
  border: 0;
  border-radius: 16px;
  background: var(--ksc-basilic-doux);
  box-shadow: none;
  color: var(--ksc-basilic-fort);
  font-size: .9375rem;
  line-height: 1.45;
  word-wrap: break-word;
  animation: ksc-monte .7s var(--ksc-ease) .3s both;
}
body.ksc-connexion.login .notice p,
body.ksc-connexion.login .notice ul {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
body.ksc-connexion.login .notice li { margin: 0 0 4px; }
body.ksc-connexion.login .notice li:last-child { margin: 0; }
body.ksc-connexion.login .notice::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 14px;
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask: var(--ksc-i-info) center / contain no-repeat;
  mask: var(--ksc-i-info) center / contain no-repeat;
}
body.ksc-connexion.ksc-deconnecte.login #login-message::before {
  -webkit-mask-image: var(--ksc-i-ok);
  mask-image: var(--ksc-i-ok);
}
body.ksc-connexion.login .notice a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.ksc-connexion.login .notice strong { font-weight: 700; }

body.ksc-connexion.login #login_error {
  background: var(--ksc-danger-doux);
  color: var(--ksc-danger);
}
body.ksc-connexion.login #login_error::before {
  -webkit-mask-image: var(--ksc-i-alerte);
  mask-image: var(--ksc-i-alerte);
}

/* Consigne propre à l'écran (mot de passe oublié, nouveau mot de passe) : simple texte, sans encadré */
body.ksc-connexion.login .notice.message:not(#login-message) {
  margin-top: 12px;
  padding: 0;
  background: none;
  color: var(--ksc-encre-douce);
  font-size: 1rem;
  line-height: 1.5;
  animation-delay: .35s;
}
body.ksc-connexion.login .notice.message:not(#login-message)::before { content: none; }
body.ksc-connexion.login .notice.message:not(#login-message) a { color: var(--ksc-accent-fort); }

/* ==========================================================================
   Formulaire
   ========================================================================== */
body.ksc-connexion.login form {
  position: relative;
  margin: 20px 0 0;
  padding: clamp(20px, 5.4vw, 30px);
  overflow: visible;
  background: var(--ksc-verre);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgb(255 255 255 / .8);
  border-radius: 26px;
  box-shadow: var(--ksc-ombre-l), inset 0 1px 0 rgb(255 255 255 / .9);
  font-weight: 400;
  animation: ksc-monte .8s var(--ksc-ease) .42s both;
}
body.ksc-connexion.login form.shake {
  animation: ksc-secoue .5s var(--ksc-ease) both;
}

body.ksc-connexion #login form p,
body.ksc-connexion #login form .user-pass-wrap,
body.ksc-connexion #login form .user-pass1-wrap {
  margin: 0 0 16px;
}

body.ksc-connexion.login label {
  display: block;
  margin: 0 0 6px;
  color: var(--ksc-encre);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Champs */
body.ksc-connexion.login input[type="text"],
body.ksc-connexion.login input[type="email"],
body.ksc-connexion.login input[type="password"],
body.ksc-connexion.login input[type="number"],
body.ksc-connexion.login form .input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 52px;
  min-height: 52px;
  max-height: none;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--ksc-controle);
  border-radius: 14px;
  background: rgb(255 255 255 / .94);
  box-shadow: inset 0 1px 2px rgb(74 46 20 / .05);
  color: var(--ksc-encre);
  font-family: inherit;
  /* 16 px au moins : pas de zoom automatique sur iPhone */
  font-size: 1rem;
  line-height: 1.25;
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}
body.ksc-connexion.login input[type="text"]:hover,
body.ksc-connexion.login input[type="email"]:hover,
body.ksc-connexion.login input[type="password"]:hover,
body.ksc-connexion.login form .input:hover {
  border-color: var(--ksc-encre-douce);
}
body.ksc-connexion.login input[type="text"]:focus,
body.ksc-connexion.login input[type="email"]:focus,
body.ksc-connexion.login input[type="password"]:focus,
body.ksc-connexion.login input[type="number"]:focus,
body.ksc-connexion.login form .input:focus {
  outline: 2px solid transparent;
  border-color: var(--ksc-accent-fort);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ksc-accent-fort), var(--ksc-anneau-focus);
}
body.ksc-connexion.login input::placeholder { color: var(--ksc-indicatif); opacity: 1; }
/* Remplissage automatique du navigateur : garder le fond blanc */
body.ksc-connexion.login input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 100px #fff;
  -webkit-text-fill-color: var(--ksc-encre);
  caret-color: var(--ksc-encre);
}
body.ksc-connexion.login input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1px var(--ksc-accent-fort), inset 0 0 0 100px #fff, var(--ksc-anneau-focus);
}

/* Mot de passe : bouton « afficher » dans le champ */
body.ksc-connexion.login .wp-pwd { position: relative; }
body.ksc-connexion.login .wp-pwd input.password-input,
body.ksc-connexion.login .wp-pwd #user_pass,
body.ksc-connexion.login .wp-pwd #pass1 { padding-right: 54px; }
body.ksc-connexion.login .button.wp-hide-pw {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
  color: var(--ksc-encre-douce);
  transition: background-color .2s ease, color .2s ease;
}
body.ksc-connexion.login .button.wp-hide-pw:hover {
  background: var(--ksc-accent-doux);
  color: var(--ksc-accent-fort);
}
body.ksc-connexion.login .button.wp-hide-pw:focus { background: transparent; border: 0; box-shadow: none; }
body.ksc-connexion.login .button.wp-hide-pw:focus-visible {
  background: var(--ksc-accent-doux);
  color: var(--ksc-accent-fort);
  outline: 2px solid var(--ksc-accent-fort);
  outline-offset: -2px;
}
body.ksc-connexion.login .button.wp-hide-pw .dashicons {
  position: static;
  top: auto;
  width: 21px;
  height: 21px;
  font-size: 0;
  background: currentColor;
  -webkit-mask: var(--ksc-i-oeil) center / contain no-repeat;
  mask: var(--ksc-i-oeil) center / contain no-repeat;
}
body.ksc-connexion.login .button.wp-hide-pw .dashicons-hidden {
  -webkit-mask-image: var(--ksc-i-oeil-barre);
  mask-image: var(--ksc-i-oeil-barre);
}
body.ksc-connexion.login .button.wp-hide-pw .dashicons::before { content: none; }

/* Verrouillage majuscule */
body.ksc-connexion.login .wp-pwd .caps-warning {
  position: static;
  top: auto;
  margin: 8px 0 0;
  padding: 7px 12px 7px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--ksc-accent-doux);
  color: var(--ksc-accent-fort);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35;
}
body.ksc-connexion.login .wp-pwd .caps-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  background: currentColor;
  -webkit-mask: var(--ksc-i-majuscule) center / contain no-repeat;
  mask: var(--ksc-i-majuscule) center / contain no-repeat;
}
body.ksc-connexion.login .wp-pwd .caps-icon svg { display: none; }

/* Cases à cocher : rondes, cochées en basilic (comme la liste de courses) */
body.ksc-connexion.login form input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  min-width: 26px;
  margin: 0;
  padding: 0 !important;
  border: 2px solid var(--ksc-controle);
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .25s ease, border-color .25s ease, transform .2s ease;
}
body.ksc-connexion.login form input[type="checkbox"]:hover { border-color: var(--ksc-basilic); }
body.ksc-connexion.login form input[type="checkbox"]:active { transform: scale(.92); }
body.ksc-connexion.login form input[type="checkbox"]::before {
  content: "";
  float: none;
  display: block;
  width: 13px;
  height: 13px;
  margin: 0;
  background: #fff;
  -webkit-mask: var(--ksc-i-coche) center / contain no-repeat;
  mask: var(--ksc-i-coche) center / contain no-repeat;
  transform: scale(0);
  transition: transform .3s var(--ksc-ease);
}
body.ksc-connexion.login form input[type="checkbox"]:checked {
  border-color: var(--ksc-basilic);
  background: var(--ksc-basilic);
}
body.ksc-connexion.login form input[type="checkbox"]:checked::before {
  content: "";
  width: 13px;
  height: 13px;
  margin: 0;
  transform: scale(1);
}

body.ksc-connexion #login form .forgetmenot,
body.ksc-connexion #login form .pw-weak {
  float: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 2px 0 18px;
}
body.ksc-connexion.login form .forgetmenot label,
body.ksc-connexion.login form .pw-weak label {
  display: inline;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

/* Bulle d'aide de « Se souvenir de moi » */
body.ksc-connexion .wp-tooltip .wp-tooltip__toggle {
  width: 36px;
  height: 36px;
  margin: -4px 0 -4px -4px;
  border-radius: 50%;
  color: var(--ksc-encre-douce);
  transition: background-color .2s ease, color .2s ease;
}
body.ksc-connexion .wp-tooltip:not(:has(button[disabled])) .wp-tooltip__toggle:hover,
body.ksc-connexion .wp-tooltip .wp-tooltip__close:hover {
  background: var(--ksc-accent-doux);
  color: var(--ksc-accent-fort);
}
body.ksc-connexion :where(.wp-tooltip) .wp-tooltip__toggle:focus,
body.ksc-connexion .wp-tooltip .wp-tooltip__close:focus { box-shadow: none; }
body.ksc-connexion .wp-tooltip .wp-tooltip__toggle:focus-visible,
body.ksc-connexion .wp-tooltip .wp-tooltip__close:focus-visible {
  outline: 2px solid var(--ksc-accent-fort);
  outline-offset: 1px;
  color: var(--ksc-accent-fort);
}
body.ksc-connexion .wp-tooltip .dashicons {
  width: 19px;
  height: 19px;
  font-size: 0;
  background: currentColor;
  -webkit-mask: var(--ksc-i-aide) center / contain no-repeat;
  mask: var(--ksc-i-aide) center / contain no-repeat;
}
body.ksc-connexion .wp-tooltip .wp-tooltip__close .dashicons {
  width: 18px;
  height: 18px;
  -webkit-mask-image: var(--ksc-i-fermer);
  mask-image: var(--ksc-i-fermer);
}
body.ksc-connexion .wp-tooltip .dashicons::before { content: none; }
body.ksc-connexion .wp-tooltip .wp-tooltip__close {
  top: 8px;
  inset-inline-end: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--ksc-encre-douce);
}
body.ksc-connexion .wp-tooltip .wp-tooltip__bubble {
  max-width: min(300px, calc(100vw - 32px));
  padding: 14px 16px;
  border: 1px solid rgb(255 255 255 / .9);
  border-radius: 18px;
  background: rgb(255 255 255 / .96);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: var(--ksc-ombre-l);
  color: var(--ksc-encre);
  font-family: var(--ksc-police);
  font-size: .9375rem;
  line-height: 1.5;
}
body.ksc-connexion .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__text { padding-inline-end: 30px; }
body.ksc-connexion .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before { border-top-color: rgb(255 255 255 / .9); }
body.ksc-connexion .wp-tooltip .wp-tooltip__bubble::backdrop { background: transparent; }

/* Boutons */
body.ksc-connexion #login form .submit,
body.ksc-connexion #login form p.submit {
  position: relative;
  margin: 0;
  padding: 0;
}
body.ksc-connexion.login .button-primary {
  float: none;
  display: inline-block;
  height: 54px;
  min-height: 54px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--ksc-accent-fort);
  box-shadow: var(--ksc-ombre-bouton);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 54px;
  text-shadow: none;
  cursor: pointer;
  transition: transform .35s var(--ksc-ease), box-shadow .35s var(--ksc-ease), background-color .2s ease;
}
body.ksc-connexion.login .button-primary:hover,
body.ksc-connexion.login .button-primary:focus {
  border: 0;
  background: var(--ksc-accent-survol);
  color: #fff;
}
body.ksc-connexion.login .button-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -14px rgb(180 71 10 / .95), inset 0 1px 0 rgb(255 255 255 / .22);
}
body.ksc-connexion.login .button-primary:active {
  transform: translateY(0) scale(.98);
  background: var(--ksc-accent-survol);
  box-shadow: 0 8px 16px -10px rgb(180 71 10 / .9), inset 0 1px 0 rgb(255 255 255 / .15);
}
body.ksc-connexion.login .button-primary:focus-visible { box-shadow: var(--ksc-ombre-bouton); }

/* Boutons des formulaires principaux : pleine largeur, flèche qui avance au survol */
body.ksc-connexion.login #loginform .button-primary,
body.ksc-connexion.login #lostpasswordform .button-primary,
body.ksc-connexion.login #resetpassform .button-primary {
  display: block;
  width: 100%;
  padding: 0 52px;
}
body.ksc-connexion.login #loginform .submit::after,
body.ksc-connexion.login #lostpasswordform .submit::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: #fff;
  -webkit-mask: var(--ksc-i-fleche) center / contain no-repeat;
  mask: var(--ksc-i-fleche) center / contain no-repeat;
  pointer-events: none;
  transition: transform .45s var(--ksc-ease);
}
body.ksc-connexion.login #loginform .submit:has(.button-primary:hover)::after,
body.ksc-connexion.login #lostpasswordform .submit:has(.button-primary:hover)::after {
  transform: translateX(4px);
}
/* Envoi en cours (connexion.js) */
body.ksc-connexion.login form.ksc-envoi .submit::after {
  -webkit-mask-image: var(--ksc-i-chargement);
  mask-image: var(--ksc-i-chargement);
  animation: ksc-tourne .8s linear infinite;
}
body.ksc-connexion.login form.ksc-envoi .button-primary {
  background: var(--ksc-accent-survol);
  cursor: progress;
}

body.ksc-connexion.login .button:not(.button-primary):not(.wp-hide-pw) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 0 22px;
  border: 1px solid var(--ksc-accent-ligne);
  border-radius: 999px;
  background: var(--ksc-accent-doux);
  box-shadow: none;
  color: var(--ksc-accent-fort);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: none;
  transition: background-color .2s ease, border-color .2s ease, transform .35s var(--ksc-ease);
}
body.ksc-connexion.login .button:not(.button-primary):not(.wp-hide-pw):hover {
  border-color: var(--ksc-teinte-2);
  background: var(--ksc-teinte-1);
  color: var(--ksc-accent-fort);
  transform: translateY(-1px);
}
body.ksc-connexion.login .button:not(.button-primary):not(.wp-hide-pw):focus {
  box-shadow: none;
  border-color: var(--ksc-accent-ligne);
  color: var(--ksc-accent-fort);
}

/* Nouveau mot de passe */
body.ksc-connexion.login .reset-pass-submit {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.ksc-connexion.login .reset-pass-submit .button { width: 100%; margin: 0; }
body.ksc-connexion.login #pass-strength-result {
  width: 100%;
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--ksc-ligne);
  color: var(--ksc-encre-douce);
  font-size: .875rem;
  font-weight: 600;
  text-align: left;
}
body.ksc-connexion.login #pass-strength-result.short,
body.ksc-connexion.login #pass-strength-result.bad { background: var(--ksc-danger-doux); color: var(--ksc-danger); }
body.ksc-connexion.login #pass-strength-result.good { background: var(--ksc-accent-doux); color: var(--ksc-accent-fort); }
body.ksc-connexion.login #pass-strength-result.strong { background: var(--ksc-basilic-doux); color: var(--ksc-basilic-fort); }
body.ksc-connexion.login #pass1.short,
body.ksc-connexion.login #pass1.bad { border-color: var(--ksc-danger); }
body.ksc-connexion.login #pass1.good { border-color: var(--ksc-accent-fort); }
body.ksc-connexion.login #pass1.strong { border-color: var(--ksc-basilic); }
body.ksc-connexion #login form .indicator-hint,
body.ksc-connexion #login form .description {
  margin: 0 0 18px;
  color: var(--ksc-encre-douce);
  font-size: .875rem;
  line-height: 1.45;
}

/* Liens sous le formulaire */
body.ksc-connexion.login #nav {
  margin: 12px 0 0;
  padding: 0;
  color: var(--ksc-encre-douce);
  font-size: 1rem;
  text-align: center;
  animation: ksc-monte .8s var(--ksc-ease) .55s both;
}
body.ksc-connexion.login #nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--ksc-encre-douce);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgb(92 99 94 / .35);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
body.ksc-connexion.login #nav a:hover {
  color: var(--ksc-accent-fort);
  text-decoration-color: currentColor;
}
body.ksc-connexion.login #backtoblog,
body.ksc-connexion.login .privacy-policy-page-link { display: none; }

/* ==========================================================================
   Composition de photos
   ========================================================================== */
.ksc-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 7;
  pointer-events: none;
}
.ksc-scene > * {
  position: absolute;
  display: block;
  translate: calc(var(--px) * var(--prof, 0px)) calc(var(--py) * var(--prof, 0px));
  transition: translate 1.1s var(--ksc-ease);
}

.ksc-scene__forme--halo {
  --prof: 6px;
  width: 80%;
  aspect-ratio: 1;
  top: -6%;
  right: -12%;
  border-radius: var(--ksc-organique);
  background: linear-gradient(150deg, var(--ksc-teinte-1) 10%, var(--ksc-teinte-2) 90%);
  animation: ksc-pose 1.2s var(--ksc-ease) .05s both, ksc-flotte 16s ease-in-out 1.2s infinite alternate;
}
.ksc-scene__forme--basilic {
  --prof: 10px;
  width: 44%;
  aspect-ratio: 1;
  bottom: 18%;
  left: -12%;
  border-radius: var(--ksc-organique-2);
  background: var(--ksc-basilic-doux);
  animation: ksc-pose 1.2s var(--ksc-ease) .15s both, ksc-flotte 19s ease-in-out 1.2s infinite alternate-reverse;
}
.ksc-scene__forme--graine {
  --prof: 28px;
  width: 11%;
  aspect-ratio: 1;
  top: 12%;
  left: 8%;
  border-radius: var(--ksc-organique);
  background: linear-gradient(145deg, var(--ksc-accent) 20%, var(--ksc-accent-fort) 100%);
  box-shadow: 0 10px 18px -8px rgb(180 71 10 / .7), inset 0 1px 0 rgb(255 255 255 / .35);
  animation: ksc-pose 1s var(--ksc-ease) .6s both, ksc-flotte 11s ease-in-out 1.6s infinite alternate;
}
.ksc-scene__anneau { display: none; }

.ksc-scene__photo {
  overflow: hidden;
  background: linear-gradient(150deg, var(--ksc-teinte-1), var(--ksc-teinte-2));
  box-shadow: var(--ksc-ombre-l);
  /* Isole l'arrondi pendant le zoom de l'image (Safari) */
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.ksc-scene__photo--arche {
  --prof: 14px;
  width: 74%;
  aspect-ratio: 3 / 4;
  top: 0;
  right: 2%;
  /* Arche : demi-cercle en haut (rayon = demi-largeur = 37,5 % de la hauteur en 3/4) */
  border-radius: 50% 50% 22px 22px / 37.5% 37.5% 22px 22px;
  animation: ksc-pose 1.1s var(--ksc-ease) .1s both;
}
.ksc-scene__photo--rond {
  --prof: 24px;
  width: 54%;
  aspect-ratio: 1;
  bottom: 0;
  left: -4%;
  border: 4px solid #fff;
  border-radius: 50%;
  animation: ksc-pose 1.1s var(--ksc-ease) .28s both, ksc-flotte-rond 9s ease-in-out 1.4s infinite;
}
.ksc-scene__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ksc-zoom 1.8s var(--ksc-ease) .1s both;
}
.ksc-scene__photo--rond .ksc-scene__img { animation-delay: .3s; }
.ksc-scene__photo--vide {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #fff 10%, var(--ksc-accent-doux) 90%);
}
.ksc-scene__photo--vide .ksc-ico {
  width: 38%;
  height: auto;
  fill: none; stroke: var(--ksc-accent-fort); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .55;
}

/* ==========================================================================
   Mise en page : mobile et tablette (< 1024 px)
   ========================================================================== */
body.ksc-avec-scene {
  --ksc-largeur: 540px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  grid-template-areas:
    "marque scene"
    "titre  scene";
  column-gap: 12px;
  align-content: start;
  padding-left: max(calc(var(--ksc-gouttiere) + env(safe-area-inset-left, 0px)), calc((100% - var(--ksc-largeur)) / 2));
  padding-right: max(calc(var(--ksc-gouttiere) + env(safe-area-inset-right, 0px)), calc((100% - var(--ksc-largeur)) / 2));
}
body.ksc-avec-scene #login {
  display: contents;
}
body.ksc-avec-scene #login > * {
  grid-column: 1 / -1;
  min-width: 0;
}
body.ksc-avec-scene #login > .wp-login-logo {
  grid-area: marque;
  align-self: start;
}
body.ksc-avec-scene #login > .ksc-titre {
  grid-area: titre;
  align-self: end;
  padding: 16px 0 4px;
}
body.ksc-avec-scene > .ksc-scene {
  grid-area: scene;
  align-self: start;
}
/* Téléphone : en cas d'erreur, la phrase d'accueil s'efface pour garder le bouton à l'écran */
@media (max-width: 599px) {
  body.ksc-connexion:has(#login_error) .ksc-texte { display: none; }
}

@media (min-width: 600px) {
  :root { --ksc-gouttiere: 24px; }
  body.ksc-avec-scene {
    column-gap: 20px;
    align-content: center;
    padding-top: calc(32px + env(safe-area-inset-top, 0px));
  }
  .ksc-scene__anneau {
    --prof: 22px;
    display: block;
    width: calc(54% + 22px);
    aspect-ratio: 1;
    bottom: -11px;
    left: calc(-4% - 11px);
    border: 1.5px dashed var(--ksc-accent-ligne);
    border-radius: 50%;
    animation: ksc-pose 1s var(--ksc-ease) .5s both, ksc-tourne 70s linear infinite;
  }
  .ksc-scene__photo--rond { border-width: 6px; }
  .ksc-scene__photo--arche { border-radius: 50% 50% 30px 30px / 37.5% 37.5% 30px 30px; }
  body.ksc-connexion .ksc-titre { font-size: clamp(2rem, 1.2rem + 2vw, 2.5rem); }
}

/* ==========================================================================
   Bureau (≥ 1024 px) : photos à gauche, connexion à droite
   ========================================================================== */
@media (min-width: 1024px) {
  body.ksc-avec-scene {
    --ksc-largeur: 1160px;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    grid-template-areas: "scene contenu";
    column-gap: clamp(48px, 7vw, 128px);
    align-items: center;
    align-content: center;
    padding-top: calc(40px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }
  body.ksc-avec-scene #login {
    display: block;
    grid-area: contenu;
    width: auto;
    margin: 0;
    padding: 0;
  }
  body.ksc-avec-scene > .ksc-scene {
    grid-area: scene;
    justify-self: center;
    align-self: center;
    width: min(100%, 600px, calc((100vh - 80px) * 14 / 15));
    aspect-ratio: 14 / 15;
  }
  body.ksc-avec-scene #login > .ksc-titre { padding: 0; }
  body.ksc-connexion .wp-login-logo { margin-bottom: clamp(28px, 7vh, 64px); }
  body.ksc-connexion .wp-login-logo a { font-size: 1.0625rem; }
  .ksc-marque__sceau { width: 48px; height: 48px; }
  body.ksc-connexion .ksc-titre { font-size: clamp(2.375rem, 1.3rem + 1.7vw, 3rem); line-height: 1.04; }
  body.ksc-connexion .ksc-texte { font-size: 1.0625rem; }
  body.ksc-connexion.login form { margin-top: 28px; border-radius: 28px; }

  .ksc-scene__forme--halo { width: 68%; top: -2%; left: 2%; right: auto; }
  .ksc-scene__forme--basilic { width: 36%; bottom: 4%; left: -2%; }
  .ksc-scene__forme--graine { width: 8%; top: 7%; left: auto; right: 14%; }
  .ksc-scene__photo--arche {
    width: 54%;
    top: 4%;
    left: 14%;
    right: auto;
    border-radius: 50% 50% 40px 40px / 37.5% 37.5% 40px 40px;
  }
  .ksc-scene__photo--rond {
    width: 40%;
    left: auto;
    right: 5%;
    bottom: 7%;
    border-width: 8px;
  }
  .ksc-scene__anneau {
    width: calc(40% + 34px);
    left: auto;
    right: calc(5% - 17px);
    bottom: calc(7% - 17px);
  }
}

/* Écrans peu hauts : on resserre */
@media (min-width: 1024px) and (max-height: 760px) {
  body.ksc-connexion .wp-login-logo { margin-bottom: 24px; }
  body.ksc-connexion.login form { margin-top: 20px; }
  body.ksc-connexion #login form p:not(.submit):not(.forgetmenot),
  body.ksc-connexion #login form .user-pass-wrap { margin-bottom: 12px; }
}

/* ==========================================================================
   Sans composition (reconnexion dans l'administration, vérification de l'e-mail…)
   ========================================================================== */
body.ksc-connexion:not(.ksc-avec-scene) #login {
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 24px 0 0;
}
body.ksc-connexion:not(.ksc-avec-scene) .wp-login-logo { margin-bottom: 20px; }
body.interim-login.ksc-connexion {
  min-height: 0;
  padding: 16px;
}
body.interim-login.ksc-connexion #login { padding: 0; }
body.interim-login.ksc-connexion.login form { margin-top: 12px; }
body.interim-login.ksc-connexion .notice { margin-top: 0; }
body.ksc-connexion.login .admin-email__heading {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ksc-ligne);
  color: var(--ksc-encre);
  font-size: 1.25rem;
  font-weight: 700;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes ksc-monte { from { opacity: 0; transform: translateY(16px); } }
@keyframes ksc-mot { from { opacity: 0; transform: translateY(.45em); } }
@keyframes ksc-pose { from { opacity: 0; scale: .9; } }
@keyframes ksc-zoom { from { opacity: 0; transform: scale(1.16); } }
@keyframes ksc-flotte { to { transform: translate(4%, -3%) rotate(9deg); } }
@keyframes ksc-flotte-rond { 50% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes ksc-tourne { to { transform: rotate(360deg); } }
@keyframes ksc-derive { to { transform: translate(-3vmax, 2vmax) rotate(8deg); } }
@keyframes ksc-secoue {
  15%, 55% { transform: translateX(-7px); }
  35%, 75% { transform: translateX(6px); }
  90% { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  body.ksc-connexion *,
  body.ksc-connexion *::before,
  body.ksc-connexion *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .ksc-scene > * { translate: none; }
}