/**------- Parcours d'inscription commercant. Tous les jetons viennent de
 * base.css : on reprend la carte « geste » (fond blanc, contour d'encre de
 * 2 px, rayon 26 px) et les familles de caracteres du site. Rien de neuf
 * n'est invente ici, c'est la meme maison vue depuis l'arriere-boutique. -------*/

.insc{max-width:760px;margin:0 auto;padding:40px 20px 80px}
.insc-tete{display:grid;gap:10px;margin-bottom:26px}
.insc-tete h1{font-family:var(--f-titre);font-weight:700;font-size:clamp(30px,5vw,44px);
  line-height:1.05;margin:0;color:var(--encre)}
.insc-tete p{margin:0;color:var(--gris);font-size:17px;max-width:60ch}

/**------- Le fil des etapes encode une vraie sequence : on ne peut pas payer
 * avant d'avoir un commerce, ni saisir un commerce avant d'avoir un courriel
 * confirme. Les numeros sont donc justifies. -------*/
.fil{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 30px;padding:0}
.fil li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gris)}
.fil li::before{content:counter(pas);counter-increment:pas;font-family:var(--f-titre);
  font-weight:700;font-size:12px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;border:2px solid var(--trait);color:var(--gris)}
.fil{counter-reset:pas}
.fil li[data-etat="ici"]{color:var(--encre);font-weight:600}
.fil li[data-etat="ici"]::before{border-color:var(--encre);color:var(--encre)}
.fil li[data-etat="faite"]{color:var(--encre)}
.fil li[data-etat="faite"]::before{content:"\2713";background:var(--lime);border-color:var(--lime);
  color:var(--sur-accent,#04211E)}

.et{background:#fff;border:2px solid var(--encre);border-radius:26px;padding:30px 28px 32px;
  display:grid;gap:18px}
.et[hidden]{display:none}
.et h2{font-family:var(--f-titre);font-weight:700;font-size:25px;line-height:1.1;margin:0;
  color:var(--encre);outline:none}
.et .intro{margin:-6px 0 0;color:var(--gris);font-size:16px;max-width:62ch}

/* le formulaire est le seul enfant de .et : c'est lui qui doit espacer ses
   blocs, sinon les rangees de champs se touchent */
.et form{display:grid;gap:20px}
.champs{display:grid;gap:16px 18px}
.champs--2{grid-template-columns:1fr 1fr}
/* align-content:start et align-self:start empechent le champ de s'ETIRER quand
   sa colonne voisine porte une ligne d'aide en plus : sans ca, deux champs de la
   meme rangee n'ont ni la meme hauteur ni le meme haut. Mesure avant correction :
   50 px contre 63 px, decales de 13 px. */
.champ{display:grid;gap:6px;min-width:0;align-content:start}
.champ label{font-size:14px;font-weight:600;color:var(--encre)}
.champ .aide{font-size:13px;color:var(--gris)}
.champ input,.champ select{font:inherit;color:var(--encre);background:var(--papier);
  border:1.5px solid var(--trait);border-radius:12px;padding:11px 13px;width:100%;
  align-self:start;min-height:50px;line-height:1.5}
/* un <select> ne calcule pas sa hauteur comme un <input> : sans hauteur imposee
   il tombe a 46 px a cote d'un champ texte a 50 px, dans la meme rangee */
.champ select{height:50px}
.champ input:focus-visible,.champ select:focus-visible{outline:2px solid var(--encre);outline-offset:1px}
/* :user-invalid n'agit qu'APRES que la personne a touche le champ :
   un formulaire ne doit pas s'ouvrir tout en rouge */
.champ input:user-invalid{border-color:var(--orange)}

.roles{display:flex;flex-wrap:wrap;gap:10px 24px}
/* le libelle ne se coupe pas en trois lignes a cote de son bouton */
.roles label{display:flex;align-items:center;gap:9px;font-size:16px;color:var(--encre);
  cursor:pointer;white-space:nowrap}
/* le navigateur pose une marge par defaut sur un bouton radio : sans margin:0
   le groupe demarre 5 px a droite de la colonne des champs */
.roles input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--encre)}
.champ > .label{font-size:14px;font-weight:600;color:var(--encre)}

/**------- La certification est un engagement contractuel : elle a droit a son
 * propre bloc, pas a une case perdue en bas de formulaire. -------*/
.certif{background:var(--papier);border:1.5px solid var(--trait);border-radius:14px;padding:16px 18px;
  display:flex;gap:12px;align-items:flex-start}
.certif input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--encre)}
.certif span{font-size:15px;line-height:1.5;color:var(--encre)}

.err{margin:0;background:#FFF1EC;border:1.5px solid var(--orange);border-radius:12px;
  padding:11px 14px;font-size:15px;color:#7A2D11}
.err[hidden]{display:none}

.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.btn-suite{border:0;border-radius:12px;padding:13px 24px;font-family:var(--f-titre);font-weight:700;
  font-size:16px;background:var(--lime);color:var(--sur-accent,#04211E);cursor:pointer}
.btn-suite:disabled{opacity:.45;cursor:not-allowed}
.btn-suite[data-occupe="1"]{cursor:progress}
.btn-fin{background:transparent;border:1.5px solid var(--encre);border-radius:12px;padding:12px 20px;
  font-weight:600;color:var(--encre);cursor:pointer}
.lien-plat{background:none;border:0;padding:0;font:inherit;color:var(--encre);
  text-decoration:underline;cursor:pointer}

/**------- Les forfaits reprennent la grille de la page commercants, en plus
 * compact : ici on choisit, on ne compare plus. -------*/
.forfaits{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.f-carte{text-align:left;background:var(--papier);border:2px solid var(--trait);border-radius:16px;
  padding:16px;cursor:pointer;display:grid;gap:4px;font:inherit;color:var(--encre)}
.f-carte:hover{border-color:var(--encre)}
.f-carte[aria-pressed="true"]{border-color:var(--encre);box-shadow:0 0 0 3px var(--lime)}
/* le nom du forfait est DANS un bouton qu'on clique : c'est de l'information
   utile, pas une decoration. 10 px ne tenaient pas sur un ecran dense. */
.f-carte .f-nom{font-family:var(--f-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--encre-2)}
.f-carte .f-prix{font-family:var(--f-titre);font-weight:700;font-size:26px;line-height:1}
.f-carte .f-det{font-size:13px;color:var(--encre-2)}

.recap{display:grid;gap:10px;background:var(--papier);border:1.5px solid var(--trait);
  border-radius:14px;padding:18px}
.recap div{display:flex;justify-content:space-between;gap:16px;font-size:16px}
.recap dt{color:var(--encre-2)}
.recap .total{border-top:1.5px solid var(--trait);padding-top:10px;font-weight:700;font-size:19px}
.attente{margin:0;background:var(--papier-2);border-radius:12px;padding:14px 16px;font-size:15px;
  color:var(--encre);max-width:62ch}

@media (max-width:620px){
  .champs--2{grid-template-columns:1fr}
  .et{padding:24px 20px 26px;border-radius:22px}
  .insc{padding:28px 16px 60px}
}

/**------- MODE PRO : memes jetons, roles inverses, comme le reste de la page
 * commercants. L'encre devient le fond, le papier devient le texte. Les champs
 * de saisie restent clairs sur la carte sombre : un champ doit se voir comme
 * un champ, et le contraste y est maximal. -------*/
body.pro .insc-tete h1{color:var(--papier)}
body.pro .insc-tete p{color:rgba(243,239,228,.78)}
body.pro .fil li{color:rgba(243,239,228,.66)}
body.pro .fil li::before{border-color:rgba(243,239,228,.34);color:rgba(243,239,228,.66)}
body.pro .fil li[data-etat="ici"],body.pro .fil li[data-etat="faite"]{color:var(--papier)}
body.pro .fil li[data-etat="ici"]::before{border-color:var(--lime);color:var(--lime)}
body.pro .et{background:var(--encre-2);border-color:rgba(243,239,228,.4);color:var(--papier)}
body.pro .et h2{color:var(--papier)}
body.pro .et .intro{color:rgba(243,239,228,.78)}
body.pro .champ label,body.pro .champ > .label{color:var(--papier)}
body.pro .champ .aide{color:rgba(243,239,228,.72)}
body.pro .champ input,body.pro .champ select{background:var(--papier);color:var(--encre);
  border-color:rgba(243,239,228,.34)}
body.pro .champ input:focus-visible,body.pro .champ select:focus-visible{outline-color:var(--lime)}
body.pro .roles label{color:var(--papier)}
body.pro .roles input,body.pro .certif input{accent-color:var(--lime)}
body.pro .certif{background:rgba(243,239,228,.07);border-color:rgba(243,239,228,.3)}
body.pro .certif span{color:var(--papier)}
body.pro .btn-fin,body.pro .lien-plat{color:var(--papier);border-color:rgba(243,239,228,.5)}
body.pro .recap{background:rgba(243,239,228,.07);border-color:rgba(243,239,228,.3);color:var(--papier)}
body.pro .recap dt{color:rgba(243,239,228,.78)}
body.pro .recap .total{border-top-color:rgba(243,239,228,.3)}
body.pro .attente{background:rgba(243,239,228,.07);color:rgba(243,239,228,.85)}
body.pro .err{background:rgba(255,107,53,.14);border-color:var(--orange);color:#FFD9CC}

/**------- Suggestions d'adresse Photon : une liste collee sous le champ,
 * memes coins et memes traits que les champs eux-memes. -------*/
.adr-boite{position:relative}
.adr-suggestions{list-style:none;margin:4px 0 0;padding:6px;position:absolute;left:0;right:0;top:100%;
  z-index:30;background:#fff;border:1.5px solid var(--encre);border-radius:12px;
  box-shadow:0 10px 24px rgba(11,59,54,.18);display:grid;gap:2px}
.adr-suggestions[hidden]{display:none}
.adr-suggestions button{display:block;width:100%;text-align:left;background:none;border:0;
  font:inherit;font-size:15px;color:var(--encre);padding:9px 10px;border-radius:8px;cursor:pointer}
.adr-suggestions button:hover,.adr-suggestions button:focus-visible{background:var(--papier-2);outline:none}
body.pro .adr-suggestions{background:var(--papier)}

/**------- Validation au blur (Redha 17-09) : le contour devient ROUGE quand
 * le curseur n'est PAS dans le champ et que le contenu est mauvais. Pendant
 * la frappe, jamais de rouge : on corrige en paix. -------*/
.champ input.invalide:not(:focus){border-color:#E5484D;
  box-shadow:0 0 0 3px rgba(229,72,77,.18)}
.aide--err{color:#E5484D}
body.pro .aide--err{color:#FF9B9E}

/**------- L'infobulle discrete : un petit i pres du libelle, la bulle ne
 * sort qu'au survol ou au clavier (tabindex), jamais dans le chemin. -------*/
.champ{position:relative}
.bulle{position:absolute;top:0;right:0;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--trait);color:var(--gris);display:grid;place-items:center;
  font-size:11px;font-weight:700;cursor:help;line-height:1}
.bulle:hover,.bulle:focus-visible{border-color:var(--encre);color:var(--encre);outline:none}
.bulle__texte{display:none;position:absolute;right:-6px;bottom:24px;z-index:5;
  width:230px;background:var(--encre);color:var(--papier);font-size:13px;font-weight:400;
  line-height:1.4;padding:10px 12px;border-radius:10px;cursor:auto}
.bulle:hover .bulle__texte,.bulle:focus-visible .bulle__texte,.bulle:focus-within .bulle__texte{display:block}
body.pro .bulle{border-color:rgba(243,239,228,.4);color:rgba(243,239,228,.7)}
body.pro .bulle:hover,body.pro .bulle:focus-visible{border-color:var(--lime);color:var(--lime)}
body.pro .bulle__texte{background:var(--papier);color:var(--encre)}

/**------- Maquette Groupe 94 (Redha 17-09) : pendant la frappe du mot de
 * passe, la carte blanche a lisere lime juge les 4 regles en direct.
 * ✓ vert quand la regle est gagnee, ✗ rouge sinon. -------*/
.mdp-liste{position:absolute;left:0;top:calc(100% - 14px);z-index:6;background:#fff;
  border:2px solid var(--lime);border-radius:12px;padding:6px 0;min-width:200px;
  box-shadow:0 14px 30px rgba(4,33,30,.28)}
.mdp-liste ul{list-style:none;margin:0;padding:0}
.mdp-liste li{display:flex;align-items:center;gap:10px;padding:7px 16px;
  font-size:13px;color:var(--encre)}
.mdp-liste li::before{content:"✗";color:#E5484D;font-weight:700;
  font-size:12px;width:14px;text-align:center}
.mdp-liste li.ok::before{content:"✓";color:#1B9E4B}

/**------- L'oeil du mot de passe (Redha 17-09) : dans le champ, a droite.
 * L'oeil barre = mot de passe VISIBLE. -------*/
.oeil{position:absolute;right:10px;width:32px;height:32px;border:0;background:none;
  color:var(--gris);cursor:pointer;display:grid;place-items:center;border-radius:8px}
.oeil:hover,.oeil:focus-visible{color:var(--encre);outline:none}
.oeil .oeil__barre{display:none}
.oeil.montre .oeil__barre{display:block}
.champ:has(#c-mdp) .oeil,.champ:has(#c-mdp2) .oeil{top:33px}
.champ:has(.oeil) input{padding-right:46px}
body.pro .oeil{color:rgba(11,59,54,.55)}
body.pro .oeil:hover,body.pro .oeil:focus-visible{color:var(--encre)}

/**------- La carte de sortie : memes os que les cartes du parcours
 * (fond blanc, contour d'encre 2 px, rayon 26 px), voile derriere. -------*/
.sortie{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(4,33,30,.66);padding:20px}
.sortie[hidden]{display:none}
.sortie__carte{position:relative;background:#fff;border:2px solid var(--encre);
  border-radius:26px;padding:30px 28px;max-width:430px;width:100%;display:grid;gap:14px}
.sortie__carte h3{font-family:var(--f-titre);font-weight:700;font-size:24px;
  line-height:1.1;margin:0;color:var(--encre)}
.sortie__carte p{margin:0;color:var(--gris);font-size:15.5px;line-height:1.5}
.sortie__x{position:absolute;top:14px;right:14px;width:34px;height:34px;
  border:0;border-radius:9px;background:var(--encre);color:#fff;font-size:15px;
  cursor:pointer;display:grid;place-items:center}
.sortie__actions{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:6px}
.sortie__quitter{color:var(--gris);font-size:14.5px;text-decoration:underline;
  text-underline-offset:3px}
.sortie__quitter:hover{color:var(--encre)}