/* app/acces.css
   ---------------------------------------------------------------------------
   Les trois écrans d'accès : inscription, connexion, réinitialisation.

   Parti pris : ce sont les pages les plus décisives du produit et les moins
   regardées. Un prospect qui vient de cliquer « Analyser gratuitement » arrive
   ici ; s'il hésite, il repart. Donc :

     1. On rappelle CE QU'IL VIENT DE DEMANDER. Le domaine saisi sur l'accueil
        est repris en tête de formulaire. Sans ce rappel, l'écran ressemble à
        un péage — et un péage sans raison, on fait demi-tour.

     2. Deux colonnes. Le formulaire à gauche, la preuve à droite : ce qu'on
        va analyser, ce qu'on ne fait pas, la réassurance légale. La colonne
        de droite ne se lit pas, elle rassure en périphérie.

     3. Aucun encadré dans l'encadré, même règle que l'espace client.
   --------------------------------------------------------------------------- */

:root{
  --violet:#6D5EF6; --violet-clair:#8B7CF8; --violet-fonce:#3F35C0;
  --cyan:#0FD3F2; --bleu-moyen:#007CB8;
  --fond:#06040d; --panneau:#0b0718; --carte:#0e0a1e; --haut:#161030;
  --trait:rgba(180,155,255,.10); --trait2:rgba(180,155,255,.18);
  --lueur:inset 0 1px 0 rgba(255,255,255,.05);
  --encre:#ece9f7; --doux:#a297c4; --faible:#6f6690;
  --rouge:#ff3d6e;
  --r-s:7px; --r-m:10px; --r-l:13px;
  --sans:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;min-height:100%}
body{background:var(--fond);color:var(--encre);font-family:var(--sans);
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05","ss03"}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--violet-clair);outline-offset:2px;
  border-radius:var(--r-s)}
svg{flex:none}

/* Halo d'ambiance, identique à celui du parcours : c'est ce qui donne
   l'impression d'un lieu unique plutôt que d'une page administrative. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(820px 460px at 22% -12%,rgba(109,94,246,.16),transparent 68%),
    radial-gradient(640px 420px at 88% 106%,rgba(15,211,242,.06),transparent 66%)}

.tete{position:relative;z-index:1;padding:22px 26px;display:flex;
  align-items:center;gap:14px}
.marque{display:flex;align-items:center;gap:9px;font-weight:600;
  letter-spacing:.16em;font-size:12px;color:#fff}
/* ── La marque : le rempart, pas un point ───────────────────────────────────
   Le picto vit dans le <i> déjà présent dans chaque en-tête, posé en masque
   CSS : aucune page HTML à modifier, et il se colore avec la palette au lieu
   d embarquer ses propres couleurs.
   Deux merlons et une meurtrière — la silhouette reste lisible à 14px, ce
   qu un dessin plus fin ne ferait pas. */
.marque i{width:19px;height:13px;border-radius:0;flex:none;font-style:normal;
  background:linear-gradient(140deg,#8B7CF8,#4F46E5);box-shadow:none;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 36 24%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M0 0h6v5h4V0h6v5h4V0h6v5h4V0h6v24H0zM14 24v-6a4 4 0 0 1 8 0v6z%22/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 36 24%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M0 0h6v5h4V0h6v5h4V0h6v5h4V0h6v24H0zM14 24v-6a4 4 0 0 1 8 0v6z%22/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  filter:drop-shadow(0 0 9px rgba(109,94,246,.55))}
.tete .fin{margin-left:auto;font-size:13px;color:var(--faible)}
.tete .fin a{color:var(--violet-clair);font-weight:500}
.tete .fin a:hover{text-decoration:underline}

/* ── deux colonnes ── */
.scene{position:relative;z-index:1;max-width:1060px;margin:0 auto;
  padding:14px 26px 60px;display:grid;grid-template-columns:1fr 1fr;
  gap:56px;align-items:start}

.form-col{max-width:400px}
.form-col h1{margin:0 0 8px;font-size:27px;font-weight:600;letter-spacing:-.026em;
  line-height:1.16}
.form-col .sous{margin:0 0 24px;font-size:14px;color:var(--doux)}

/* Rappel du domaine saisi sur l'accueil. */
.cible{display:flex;align-items:center;gap:11px;padding:11px 14px;
  border-radius:var(--r-m);margin-bottom:22px;
  border:1px solid rgba(109,94,246,.26);
  background:linear-gradient(180deg,rgba(109,94,246,.13),rgba(109,94,246,.05));
  box-shadow:var(--lueur)}
.cible .ic{width:28px;height:28px;border-radius:8px;flex:none;display:flex;
  align-items:center;justify-content:center;color:var(--violet-clair);
  background:rgba(109,94,246,.2);border:1px solid rgba(109,94,246,.3)}
.cible .ic svg{width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cible .txt{min-width:0;line-height:1.35}
.cible .txt b{display:block;font-size:14px;font-weight:600;
  font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cible .txt span{font-size:12px;color:var(--doux)}
.cible .chg{margin-left:auto;font-size:12px;color:var(--faible);flex:none}
.cible .chg:hover{color:var(--doux);text-decoration:underline}

/* ── champs ── */
.champs{display:flex;flex-direction:column;gap:15px}
.rangee label{display:block;font-size:12.5px;color:var(--doux);
  margin-bottom:6px;font-weight:500}
.champ{width:100%;height:44px;padding:0 14px;font:inherit;font-size:14.5px;
  color:var(--encre);background:var(--carte);border:1px solid var(--trait2);
  border-radius:var(--r-m);box-shadow:var(--lueur);
  transition:border-color .15s,box-shadow .15s}
.champ::placeholder{color:var(--faible)}
.champ:focus{outline:none;border-color:rgba(180,155,255,.55);
  box-shadow:var(--lueur),0 0 0 3px rgba(109,94,246,.2)}
.champ[aria-invalid="true"]{border-color:rgba(255,61,110,.5)}
.rangee .aide{margin:6px 0 0;font-size:12px;color:var(--faible)}

/* Jauge de robustesse : un minimum de 10 caractères annoncé sans retour
   visuel, c'est un champ qu'on remplit deux fois. */
.jauge{display:flex;gap:4px;margin-top:8px}
.jauge i{flex:1;height:3px;border-radius:99px;background:rgba(180,155,255,.12);
  transition:background .25s}
.jauge.n1 i:nth-child(1){background:var(--rouge)}
.jauge.n2 i:nth-child(-n+2){background:#ff8a3d}
.jauge.n3 i:nth-child(-n+3){background:#ffc94d}
.jauge.n4 i{background:var(--cyan)}
.force{margin:6px 0 0;font-size:12px;color:var(--faible);min-height:1em}

.mdp-boite{position:relative}
.mdp-boite .voir{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:var(--r-s);display:flex;
  align-items:center;justify-content:center;color:var(--faible);
  transition:background .13s,color .13s}
.mdp-boite .voir:hover{background:rgba(180,155,255,.1);color:var(--encre)}
.mdp-boite .voir svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mdp-boite .champ{padding-right:44px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:46px;border-radius:var(--r-m);font-size:15px;font-weight:600;
  color:#fff;border:1px solid transparent;
  background:linear-gradient(180deg,var(--violet-clair),var(--violet));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 3px 20px rgba(109,94,246,.4);
  transition:filter .15s,box-shadow .15s,transform .1s}
.btn:hover{filter:brightness(1.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 5px 26px rgba(109,94,246,.52)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;pointer-events:none;box-shadow:none}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ── connexions tierces ── */
.ou{display:flex;align-items:center;gap:14px;margin:22px 0;font-size:12px;
  color:var(--faible)}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--trait)}
.tiers{display:flex;flex-direction:column;gap:9px}
.btn-tiers{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:44px;border-radius:var(--r-m);font-size:14px;font-weight:500;
  color:var(--encre);border:1px solid var(--trait2);
  background:rgba(180,155,255,.03);box-shadow:var(--lueur);
  transition:background .13s,border-color .13s}
.btn-tiers:hover{background:rgba(180,155,255,.09);
  border-color:rgba(180,155,255,.3)}
.btn-tiers svg{width:17px;height:17px}

.msg{margin:14px 0 0;font-size:13px;min-height:1px;line-height:1.55}
.msg.err{color:var(--rouge)}
.msg.ok{color:var(--cyan)}
.msg.info{color:var(--doux)}

.bas{margin-top:22px;font-size:13.5px;color:var(--faible);text-align:center}
.bas a{color:var(--violet-clair);font-weight:500}
.bas a:hover{text-decoration:underline}
.legal{margin-top:18px;font-size:11.5px;color:var(--faible);line-height:1.6}
.legal a{color:var(--doux);text-decoration:underline}

/* ── colonne de droite : la preuve ── */
.preuve-col{padding-top:52px}
.bloc-t{font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faible);font-weight:600;margin:0 0 12px}
.liste{border:1px solid var(--trait);border-radius:var(--r-l);overflow:hidden;
  background:var(--carte);box-shadow:var(--lueur);margin-bottom:22px}
.lg{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;
  border-bottom:1px solid var(--trait)}
.lg:last-child{border-bottom:0}
.lg .pastille{width:18px;height:18px;border-radius:50%;flex:none;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(15,211,242,.16);border:1px solid rgba(15,211,242,.32)}
.lg .pastille svg{width:10px;height:10px;fill:none;stroke:var(--cyan);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lg .txt{min-width:0}
.lg .txt b{display:block;font-size:13.5px;font-weight:500;margin-bottom:1px}
.lg .txt span{font-size:12.5px;color:var(--faible);line-height:1.5}

.familles{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--trait);border:1px solid var(--trait);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--lueur)}
.fam{background:var(--carte);padding:11px 13px;display:flex;
  align-items:baseline;gap:8px}
.fam b{font-family:var(--mono);font-size:12px;color:var(--violet-clair);
  font-weight:500;font-variant-numeric:tabular-nums}
.fam span{font-size:12.5px;color:var(--doux);line-height:1.4}

.rassure{display:flex;gap:11px;margin-top:20px;padding:13px 15px;
  border-radius:var(--r-m);border:1px solid var(--trait);
  border-left:2px solid var(--cyan);background:rgba(15,211,242,.05)}
.rassure p{margin:0;font-size:12.5px;color:var(--doux);line-height:1.6}
.rassure p b{color:var(--encre);font-weight:600}

@media (max-width:900px){
  .scene{grid-template-columns:1fr;gap:34px;padding:10px 20px 48px}
  .form-col{max-width:none}
  .preuve-col{padding-top:0}
  .familles{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE CONNEXION — écran scindé en deux (façon Leo AI)
   Gauche : l'effet de particules qui écrit REMPARO, le logo, une ligne.
   Droite : le strict nécessaire pour entrer — d'abord les accès en un clic
   (Google, Apple), puis l'e-mail. Rien à lire, tout à faire.
   ═══════════════════════════════════════════════════════════════════════════ */
body.acces-split{min-height:100vh}
body.acces-split::before{display:none}   /* le halo est porté par le panneau */

.split{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}

/* ── panneau visuel ── */
.pane-visuel{position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:space-between;padding:34px 40px;
  background:
    radial-gradient(780px 520px at 32% 26%,rgba(109,94,246,.24),transparent 66%),
    radial-gradient(680px 520px at 82% 96%,rgba(15,211,242,.08),transparent 64%),
    linear-gradient(160deg,#0a0716,#06040d 70%)}
.pane-visuel::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-right:1px solid var(--trait);
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(5,4,11,.6) 100%)}
#scene{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.pane-haut,.pane-bas{position:relative;z-index:2}
.pane-haut .marque{font-size:15px;letter-spacing:.2em}
.pane-haut .marque i{width:26px;height:17px}
.pane-bas{max-width:34ch}
.pane-bas h2{margin:0 0 8px;font-size:20px;font-weight:600;letter-spacing:-.02em;
  line-height:1.28;color:#fff}
.pane-bas p{margin:0;font-size:13.5px;color:var(--doux);line-height:1.6}

/* ── panneau formulaire ── */
.pane-form{display:flex;align-items:center;justify-content:center;
  padding:40px 32px;background:var(--fond)}
.form-wrap{width:100%;max-width:380px}
.form-wrap>.marque{display:none;margin-bottom:26px}
.form-wrap h1{margin:0 0 6px;font-size:26px;font-weight:600;letter-spacing:-.026em}
.form-wrap .sous{margin:0 0 26px;font-size:14px;color:var(--doux)}

/* Les accès tiers passent EN HAUT sur cet écran : c'est le geste le plus
   rapide, on le propose avant de demander un mot de passe. */
.pane-form .tiers{margin-bottom:0}
.pane-form .ou{margin:20px 0}

.bas.compte{margin-top:26px;padding-top:20px;border-top:1px solid var(--trait);
  text-align:center}

@media (max-width:860px){
  .split{grid-template-columns:1fr;min-height:100vh}
  /* Mobile : on masque COMPLÈTEMENT le panneau visuel (murmuration + halo +
     ancienne bande haute). Il ne laissait qu'un grand vide sombre. La page
     devient un écran de formulaire plein, fond noir, la marque étant déjà
     rappelée dans le formulaire. */
  .pane-visuel{display:none}
  .form-wrap>.marque{display:flex}
  .pane-form{min-height:100vh;padding:44px 24px}
}
/* Google OAuth est branché → on montre « Continuer avec Google ». Apple reste
   masqué (compte développeur payant non souscrit). */
#btn-apple{display:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}