/* ▸ docs/notes/connexion.md#n024 — KONSENT · Espace agence — connexion */

:root{
  /* Fait suivre ce que le navigateur dessine lui-même et que le CSS
     n'atteint pas : ascenseurs, sélecteurs natifs, remplissage auto. */
  color-scheme:dark;

  --ink:var(--k-sapin,#04201C);          /* fond de page — le hero de l'accueil */
  --card:var(--k-surface,#0B2E29);       /* carte — surface sombre de l'accueil */
  --bone:var(--k-bone,#F2FAF5);          /* encre principale sur sombre */
  --green:var(--k-green,#25E389);        /* vert du fichier de marque */
  --greenSoft:var(--k-mint,#8FE3CD);     /* accent de texte et anneau de focus */
  --mint:var(--k-mint-pale,#DFF6E9);
  --btn:var(--k-green,#25E389); --btnHover:var(--k-green-hover,#2FB87A); --onBtn:var(--k-ink-on-green,#04201C);   /* 10,1:1 */

  /* Équivalents opaques des surfaces translucides — utilisés là où une
     couleur transparente ne suffit pas (remplissage auto, réserve du logo). */
  --cardSolid:var(--k-surface,#0B2E29);
  /* Teinte composite du champ CREUSÉ (noir 24 % sur le vert sapin) :
     c'est elle que l'aplat anti-autofill doit reproduire. */
  --fieldSolid:var(--k-field,#031A16);

  /* Texte : une seule teinte, tenue par l'opacité. Base #EBF6F0, la même
     que les textes secondaires de l'accueil. Plancher .58 (5,4:1). */
  --t78:rgba(235,246,240,.78);
  --t72:rgba(235,246,240,.72);
  --t62:rgba(235,246,240,.62);
  --t58:rgba(235,246,240,.58);
  --t55:rgba(235,246,240,.58);   /* aligné sur .58 : .55 passait sous AA
                                     sur le fond sapin, plus sombre que
                                     l'ancien graphite */
  --t42:rgba(235,246,240,.52);   /* texte indicatif des champs */

  --line:rgba(235,246,240,.10);
  --lineBtn:rgba(235,246,240,.18);
  --lineBtnHover:rgba(235,246,240,.45);
  --glass:rgba(235,246,240,.06);
  --glassSoft:rgba(235,246,240,.04);

  /* Les deux états de message. Le vert de marque sert au succès : il ne
     dit plus « une couleur = un état », il dit « Konsent ». */
  --ok:37,227,137;
  --ko:240,165,148;

  --t:var(--k-t,.12s cubic-bezier(.25,.1,.25,1));
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:'Poppins',-apple-system,system-ui,sans-serif;
  background:var(--ink);
  /* ▸ docs/notes/connexion.md#n025 — La nappe principale tombe d'APLOMB SUR LA CARTE (50 % / 4 %), pas */
  background-image:
    radial-gradient(1100px 760px at 50% 4%,  rgba(46,196,163,.13),   transparent 60%),
    radial-gradient(700px 520px at 16% 72%,  rgba(143,227,205,.04),  transparent 68%),
    radial-gradient(620px 480px at 88% 74%,  rgba(37,227,137,.045),  transparent 70%),
    radial-gradient(1300px 900px at 50% 50%, transparent 42%,        rgba(0,0,0,.28));
  background-attachment:fixed;
  color:var(--bone);
  font-variant-numeric:tabular-nums;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  align-items:safe center;
  /* Marges d'aire sûre conservées par précaution : elles valent 0 tant que
     `viewport-fit` reste à `contain`, et reprendraient leur rôle si la page
     repassait un jour en pleine page. */
  padding:calc(32px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
          calc(32px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--greenSoft); outline-offset:3px; border-radius:6px; }

/* ── Carte ── */
.card{
  width:100%; max-width:440px;
  /* Sur téléphone la carte devient une vraie surface, comme les cartes
     de l'accueil : aplat #0B2E29, angle de 24 px. Le verre dépoli ne
     tenait que sur un fond gris. */
  background:var(--card);
  border:0;
  border-radius:24px;
  /* ▸ docs/notes/connexion.md#n026 — Le cadre parti, c'est une lueur qui détache la carte du fond — */
  box-shadow:0 -16px 46px -22px rgba(62,207,142,.34), 0 0 42px rgba(62,207,142,.08);
  padding:36px 30px 30px;
  position:relative;
  animation:fadein .22s cubic-bezier(.25,.1,.25,1);
}
@keyframes fadein{ from{ opacity:0 } to{ opacity:1 } }

/* ── En-tête ── */
/* ▸ docs/notes/connexion.md#n027 — SCÈNE : une seule carte, centrée, à toutes les largeurs */
.stage{ width:100%; display:flex; align-items:center; justify-content:center; }
.col-form{ width:100%; display:flex; align-items:center; justify-content:center; }

/* Au-dessus de 640 px la carte respire un peu plus : mêmes marges que
   la carte des e-mails, qui fait 520 px de large pour un contenu plus
   aéré. En dessous, les valeurs de base suffisent. */
@media (min-width:640px){
  .card{ padding:44px 40px 36px; }
}

.brand{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  margin-bottom:28px;
}
.brand svg.logo{ height:40px; width:auto; }

/* Le lockup est recoloré ici, pas dans le fichier source : l'original est
   dessiné pour fond clair (mot en #131312, invisible sur le graphite). */
.brand .km{ fill:var(--green); }
.brand .kp{ fill:var(--ink); }
.brand .kw{ fill:var(--bone); }
.brand .kb{ fill:rgba(235,246,240,.55); }

.lede{
  font-size:15px; line-height:1.6; font-weight:400;
  color:var(--t72); text-align:center; max-width:34ch;
}
.brand .eyebrow{
  font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mint);
}

/* ── Onglets ── */
.tabs{
  display:flex; gap:4px;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:14px;
  padding:4px;
  margin-bottom:26px;
}
.tab{
  flex:1; padding:10px 12px; border:none; background:transparent;
  border-radius:10px;
  font-size:13px; font-weight:600; color:var(--t72);
  transition:background var(--t), color var(--t);
}
.tab:hover{ color:var(--bone); }
.tab.act{ background:var(--btn); color:var(--onBtn); font-weight:600; }
.tab.act:hover{ background:var(--btnHover); color:var(--onBtn); }

/* ── Panneaux ── */
.panel{ display:none; }
.panel.act{ display:block; animation:fadein .18s cubic-bezier(.25,.1,.25,1); }
.panel-head{ margin-bottom:24px; }
.panel-title{
  font-size:30px; font-weight:700; letter-spacing:-.01em;
  line-height:1.15; margin-bottom:10px; color:#FFFFFF;
}
.panel-sub{ font-size:14px; font-weight:400; color:var(--t72); line-height:1.6; }
.panel-sub strong{ font-weight:600; color:var(--bone); }

/* ── Champs ── */
.field{ margin-bottom:14px; }
.field label{
  /* Bas de casse : l'accueil n'a aucune capitale interlettrée. Le
     libellé gagne en lisibilité et le champ en calme. */
  display:block; font-size:13px; font-weight:600; letter-spacing:0;
  color:var(--t78); margin-bottom:8px;
}
.field .input-wrap{ position:relative; }
.field input{
  width:100%; height:48px; padding:0 16px;
  font-family:inherit; font-size:15px; color:var(--bone);
  /* Sans contour : c'est le CREUX qui délimite le champ. Un remplissage
     plus sombre que la page, plus une ombre portée intérieure, donnent une
     boîte enfoncée — la bordure devenait redondante et durcissait l'écran. */
  background:rgba(0,0,0,.24); border:0;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
  border-radius:10px; outline:none;
  transition:box-shadow var(--t), background var(--t);
}
.field input:hover{ background:rgba(0,0,0,.28); }
.field input:focus{ background:rgba(0,0,0,.3); box-shadow:inset 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1.5px var(--greenSoft); }
.field input::placeholder{ color:var(--t42); }
.field.two-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field.two-cols > div{ display:flex; flex-direction:column; }

/* ▸ docs/notes/connexion.md#n028 — Remplissage automatique */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--bone);
  caret-color:var(--greenSoft);
  /* ▸ docs/notes/connexion.md#n029 — Le champ n'a plus de contour : l'aplat opaque qui recouvre le bleu de */
  -webkit-box-shadow:0 0 0 1000px var(--fieldSolid) inset;
  box-shadow:0 0 0 1000px var(--fieldSolid) inset;
  border:0;
  border-radius:10px;
  transition:background-color 9999s ease-out 0s;
}
input:-webkit-autofill:focus{ box-shadow:0 0 0 1000px var(--fieldSolid) inset, inset 0 0 0 1.5px var(--greenSoft); }

.pw-toggle{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:none; background:transparent;
  color:var(--t55); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  transition:color var(--t);
}
.pw-toggle:hover{ color:var(--bone); }
.pw-toggle svg{ width:17px; height:17px; }

/* ── Mot de passe oublié ── */
.row-opts{ display:flex; justify-content:flex-end; margin:-4px 0 18px; }
.link-btn{
  background:transparent; border:none; padding:4px 2px;
  font-size:13px; font-weight:500; color:var(--t72);
  transition:color var(--t);
}
.link-btn:hover{ color:var(--bone); }

/* ── Conditions générales ── */
.cgu{
  display:flex; align-items:flex-start; gap:11px;
  margin:8px 0 18px; cursor:pointer;
  font-size:13px; font-weight:400; color:var(--t72); line-height:1.6;
}
.cgu .box{
  width:18px; height:18px; flex-shrink:0; margin-top:1px;
  border:1px solid var(--lineBtn); border-radius:5px;
  background:var(--glass); position:relative;
  transition:background var(--t), border-color var(--t);
}
.cgu:hover .box{ border-color:var(--lineBtnHover); }
.cgu.on .box{ background:var(--btn); border-color:var(--btn); }
.cgu.on .box::after{
  content:''; position:absolute; left:6px; top:2px;
  width:4px; height:9px;
  border-right:2px solid var(--onBtn); border-bottom:2px solid var(--onBtn);
  transform:rotate(45deg);
}
.cgu a{ color:var(--greenSoft); border-bottom:1px solid rgba(143,227,205,.45); text-decoration:none; }
.cgu a:hover{ border-bottom-color:var(--greenSoft); }

/* ── Bouton principal ── */
.btn-primary{
  width:100%; height:50px; border:none; border-radius:12px;
  background:var(--btn); color:var(--onBtn);
  font-size:15px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:background var(--t);
}
.btn-primary:hover:not(:disabled){ background:var(--btnHover); }
.btn-primary:disabled{ opacity:.5; cursor:default; }
.spin{
  display:none; width:15px; height:15px;
  border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
/* État « en cours » posé par setLoading() : la roue apparaît, le libellé s'efface. */
.btn-primary.is-loading .spin{ display:block; }
.btn-primary.is-loading > span:not(.spin){ opacity:.4; }

/* ── Séparateur « ou » ── */
.divider{ display:flex; align-items:center; gap:14px; margin:22px 0 16px; }
.divider::before,.divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.divider span{
  font-size:12.5px; font-weight:600; color:var(--t72);
}

/* ▸ docs/notes/connexion.md#n030 — Boutons OAuth */
.oauth-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.btn-oauth{
  height:48px; padding:0 12px; border-radius:12px;
  background:transparent; border:1px solid var(--lineBtn);
  color:var(--bone); font-size:14px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:border-color var(--t);
}
.btn-oauth:hover:not(:disabled){ border-color:var(--lineBtnHover); }
.btn-oauth:disabled{ opacity:.5; cursor:default; }
.btn-oauth svg{ width:15px; height:15px; }

/* ▸ docs/notes/connexion.md#n031 — Messages */
.alert{
  display:none; padding:12px 15px; border-radius:12px;
  font-size:13px; font-weight:500; line-height:1.5;
  margin-bottom:14px;
}
.alert.show{ display:block; animation:fadein .18s cubic-bezier(.25,.1,.25,1); }
.alert.err{ background:rgba(var(--ko),.12); border:1px solid rgba(var(--ko),.42); color:rgb(var(--ko)); }
.alert.ok { background:rgba(var(--ok),.12); border:1px solid rgba(var(--ok),.42); color:rgb(var(--ok)); }

/* ── Bas de carte ── */
.foot{
  margin-top:24px; padding-top:18px; border-top:1px solid var(--line);
  text-align:center;
}
.foot .back-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; border:none; color:var(--t72);
  font-size:13px; font-weight:500;
  transition:color var(--t);
}
.foot .back-btn:hover{ color:var(--bone); }

@media (max-width:480px){
  .card{ padding:28px 20px 24px; border-radius:20px; }
  .brand svg.logo{ height:32px; }
  .panel-title{ font-size:26px; }
  .oauth-row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; }
}

/* ══ LE BOUTON GOOGLE DE LA CONNEXION ══  (04/09/2026)
   Sur le panneau d'inscription, les fournisseurs vont par deux dans une
   grille (`.oauth-row`) : chacun n'a que la place de son nom. Sur la
   connexion il est seul et porte la phrase entière — il prend donc toute
   la largeur et la hauteur d'un bouton d'action, au-dessus du séparateur
   « ou ». Même dessin que `.btn-oauth` pour le reste. */
.btn-oauth-large{ width:100%; height:46px; font-size:14px; gap:10px; }
.btn-oauth-large svg{ width:17px; height:17px; }

/* ══ LA VÉRIFICATION ANTI-ROBOT ══  (05/09/2026)
   Turnstile dessine un cadre de 300 × 65 px qu'on ne peut pas restyler (il
   vit dans une iframe). On lui donne sa place au-dessus du bouton, centré,
   et on réserve la hauteur dès le départ : sans `min-height`, le formulaire
   sautait de 65 px quand le widget finissait de se charger. */
.cap-wrap{ display:flex; justify-content:center; min-height:65px; margin:18px 0 4px; }
.cap-wrap:empty{ min-height:0; margin:0; }