/* Doubayi — parcours de création de boutique.
   Style clair et plat : fond blanc, pas de carte ni de contours, champs gris unis,
   orange Doubayi pour l'action, police Inter
   (la même que l'espace marchand). Animations courtes, désactivées si l'appareil
   demande moins de mouvement. */

:root{
  --fond:#FFFFFF;--fond-2:#F3F2EF;--texte-fond:#1B1813;--gris-fond:#6A655B;
  --encre:#1B1813;--gris:#6A655B;--clair:#9C968A;--trait:#E7E2D8;--papier:#F6F4EF;
  --or:#F5A623;--or-encre:#2A1A00;--or-fonce:#945A00;--or-clair:#FFF4E0;
  --vert:#0F6E56;--vert-clair:#E6F4EE;--rouge:#B42318;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body.ins{
  min-height:100vh;background:var(--fond);
  color:var(--texte-fond);font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;letter-spacing:-.006em;
}
a{color:inherit}
button,input,select{font:inherit}

/* En-tête */
.ins-haut{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:20px 28px}
.ins-logo{display:flex;align-items:center;text-decoration:none;--logo-taille:20px}
.ins-connexion{justify-self:end;font-size:14px;color:var(--gris-fond);text-decoration:none}
.ins-connexion b{color:var(--texte-fond);font-weight:600}
form.ins-connexion{display:flex;align-items:center;gap:10px;margin:0;flex-wrap:wrap;justify-content:flex-end}
.ins-changer{padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--texte-fond);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ins-etapes{display:flex;gap:6px;list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--gris-fond)}
.ins-etapes li{display:flex;flex-direction:column;gap:7px;width:96px}
.ins-etapes span{height:4px;border-radius:4px;background:#ECEAE5;overflow:hidden;position:relative}
.ins-etapes span::after{content:"";position:absolute;inset:0;background:var(--or);transform:scaleX(0);transform-origin:left}
.ins-etapes li.fait span::after{transform:none}
.ins-etapes li.actif{color:var(--texte-fond);font-weight:500}
.ins-etapes li.actif span::after{animation:remplit .9s .2s cubic-bezier(.2,.8,.3,1) forwards;transform:scaleX(0)}
@keyframes remplit{to{transform:scaleX(.55)}}
@media (max-width:720px){
  .ins-haut{grid-template-columns:1fr auto;padding:16px}
  .ins-etapes{grid-column:1/-1;grid-row:2;justify-content:center}
  .ins-etapes li{width:auto;flex:1}
}

/* Page */
.ins-page{display:flex;flex-direction:column;align-items:center;padding:36px 16px 72px}
.ins-titre{margin:0;text-align:center;font-size:clamp(30px,5vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
/* Sous-titre sur une seule ligne : la taille s'adapte à la largeur du téléphone */
.ins-sous-titre{margin:12px auto 0;text-align:center;white-space:nowrap;font-size:clamp(12px,3.4vw,17px);letter-spacing:-.01em;line-height:1.5;color:var(--gris-fond)}
.ins-sous-titre b{color:var(--texte-fond);font-weight:500}
.ins-zone{position:relative;width:100%;max-width:468px;margin-top:32px}
/* Encadré léger autour du formulaire : trait fin, sans ombre */
.ins-carte{color:var(--encre);background:#fff;border:1px solid var(--trait);border-radius:22px;padding:22px}
@media (min-width:560px){.ins-carte{padding:28px}}
.ins-retour{position:absolute;left:-74px;top:0;width:52px;height:52px;border-radius:50%;background:var(--fond-2);border:0;display:grid;place-items:center;color:var(--texte-fond);text-decoration:none;transition:background .2s ease,transform .2s ease}
.ins-retour:hover{background:#E9E7E2;transform:translateX(-2px)}
.ins-retour svg{width:20px;height:20px}
.ins-svg-ic{fill:currentColor;stroke:none}
.oeil svg.ins-svg-ic{fill:currentColor;stroke:none}
@media (max-width:700px){.ins-retour{position:static;margin:0 0 14px}}

/* Arrivée de la page : titre puis carte */
.ins-titre,.ins-sous-titre,.ins-zone{animation:entre .6s cubic-bezier(.2,.7,.3,1) both}
.ins-sous-titre{animation-delay:.06s}.ins-zone{animation-delay:.12s}
@keyframes entre{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Champs */
.champ{position:relative;display:block;margin-bottom:10px}
.champ input,.champ select{
  width:100%;height:60px;padding:24px 18px 8px;border:0;border-radius:14px;background:var(--fond-2);
  font-size:16px;color:var(--encre);outline:none;transition:border-color .2s ease,box-shadow .2s ease;
}
.champ input:focus,.champ select:focus{background:#fff;box-shadow:0 0 0 2px var(--or)}
.champ label{position:absolute;left:19px;top:19px;font-size:16px;color:var(--gris);pointer-events:none;transition:transform .18s ease,font-size .18s ease,top .18s ease}
.champ input:focus + label,.champ input:not(:placeholder-shown) + label,.champ.rempli label{top:10px;font-size:12px}
.champ--erreur input{background:#FDECEA}
.erreur{display:block;margin:-6px 4px 12px;font-size:13.5px;color:var(--rouge)}
.aide{display:block;margin:8px 6px 0;font-size:13px;color:var(--gris)}

/* E-mail déjà saisi : bloc gris avec « Modifier » */
.email-fixe{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:10px 18px;margin-bottom:14px;border-radius:16px;background:var(--fond-2)}
.email-fixe small{display:block;font-size:12.5px;color:var(--gris)}
.email-fixe span{display:block;font-size:16px;color:#3D3A34;word-break:break-all}
.email-fixe button{flex:none;border:0;background:none;padding:6px 0;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--encre)}

/* Mot de passe : œil et jauge */
.oeil{position:absolute;right:10px;top:10px;width:40px;height:40px;border:0;border-radius:10px;background:none;display:grid;place-items:center;cursor:pointer;color:var(--encre)}
.oeil:hover{background:#E9E7E2}
.oeil svg{width:22px;height:22px}
.jauge{height:3px;margin:4px 6px 0;border-radius:4px;background:#ECEAE5;overflow:hidden}
.jauge i{display:block;height:100%;width:3%;border-radius:5px;background:var(--encre);transition:width .35s cubic-bezier(.2,.8,.3,1),background .35s ease}

/* Bouton principal : grisé tant que le formulaire n'est pas prêt */
.btn-ins{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;margin-top:22px;
  border:0;border-radius:999px;background:var(--or);color:var(--or-encre);font-size:17px;font-weight:600;cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .15s ease,box-shadow .25s ease;
}
.btn-ins:hover:not(:disabled){background:#F09A0C}
.btn-ins:active:not(:disabled){transform:scale(.985)}
.btn-ins:disabled{background:#F0EEE9;color:#A29D93;cursor:not-allowed}
.btn-ins--sombre{background:var(--encre);color:#fff}
.btn-ins--sombre:hover:not(:disabled){background:#000}
.btn-ins .rond{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:tourne .7s linear infinite;display:none}
.btn-ins.charge .rond{display:block}
@keyframes tourne{to{transform:rotate(360deg)}}

/* Pays */
/* Pays : même allure que les autres champs (étiquette en haut, valeur dessous) */
.pays{margin-top:10px}
.pays label{position:relative;display:flex;flex-direction:column;justify-content:center;height:60px;padding:0 44px 0 18px;border-radius:14px;background:var(--fond-2);color:var(--encre);cursor:pointer}
.pays label:focus-within{background:#fff;box-shadow:0 0 0 2px var(--or)}
.pays small{font-size:12px;color:var(--gris);line-height:1.2}
.pays-valeur{display:flex;align-items:center;gap:8px;font-size:16px;line-height:1.4}
.pays select{position:absolute;inset:0;opacity:0;cursor:pointer}
.pays label::after{content:"";position:absolute;right:20px;top:25px;width:7px;height:7px;border-right:2px solid var(--gris);border-bottom:2px solid var(--gris);transform:rotate(45deg)}
.mentions{margin:20px 0 0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--clair)}
.mentions a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Pastilles à cocher (objectifs, métier) */
.pastilles{display:flex;flex-wrap:wrap;gap:10px}
.pastille{position:relative;cursor:pointer}
.pastille input{position:absolute;opacity:0;pointer-events:none}
.pastille span{
  display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:999px;background:#F0EEE9;
  font-size:16px;color:var(--encre);transition:background .2s ease,color .2s ease,transform .15s ease;
}
.pastille span::before{content:"+";width:14px;font-size:20px;line-height:1;font-weight:300;text-align:center}
.pastille:hover span{background:#E6E3DC}
.pastille:active span{transform:scale(.97)}
.pastille input:checked + span{background:var(--encre);color:#fff}
.pastille input:checked + span::before{content:"✓";font-size:15px;font-weight:600;animation:coche .3s cubic-bezier(.2,.9,.3,1.4)}
.pastille input:focus-visible + span{outline:2px solid var(--or);outline-offset:2px}
@keyframes coche{from{transform:scale(.3)}to{transform:none}}
.pastilles--metier .pastille span{padding:10px 16px;font-size:15px}
.pastilles--metier .pastille span::before{display:none}
.pastilles--metier .pastille input:checked + span{background:var(--or);color:var(--or-encre)}

/* Étape boutique */
.bloc{margin-top:22px}
.bloc-titre{display:block;margin:0 0 10px 2px;font-size:14px;font-weight:600}
.adresse{display:flex;align-items:center;gap:8px;margin:-4px 2px 4px;font-size:14px;color:var(--gris);min-height:22px}
.adresse b{color:var(--encre);font-weight:600}
.adresse em{font-style:normal;font-size:12.5px;padding:2px 8px;border-radius:999px;background:var(--vert-clair);color:var(--vert);opacity:0;transition:opacity .25s ease}
.adresse em.vu{opacity:1}
.adresse em.pris{background:var(--or-clair);color:var(--or-fonce)}
.tel{display:flex;gap:8px}
.tel .indicatif{flex:none;display:grid;place-items:center;height:64px;padding:0 16px;border:0;border-radius:16px;background:var(--fond-2);font-weight:600}
.tel .champ{flex:1;margin:0}
.duo{display:grid;gap:14px}

/* Aperçu de la boutique, mis à jour pendant la saisie */
.apercu{margin-top:28px;padding:18px 0 0;border-top:1px solid var(--trait)}
.apercu small{display:block;margin-bottom:10px;font-size:12px;color:var(--gris)}
.apercu-boutique{display:flex;align-items:center;gap:12px}
.apercu-avatar{width:44px;height:44px;border-radius:50%;background:var(--or);color:var(--or-encre);display:grid;place-items:center;font-weight:700;font-size:19px;flex:none;transition:transform .3s cubic-bezier(.2,.9,.3,1.4)}
.apercu-avatar.saute{transform:scale(1.12)}
.apercu-boutique b{display:block;font-size:17px;letter-spacing:-.01em}
.apercu-boutique span{display:block;font-size:13px;color:var(--gris)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.btn-ins--clair{margin-top:10px;background:#F0EEE9;color:var(--encre)}
.btn-ins--clair:hover:not(:disabled){background:#E6E3DC;box-shadow:none}

/* iPhone : Safari zoome sur un champ de saisie dont le texte fait moins de 16 px.
   Sur écran tactile, les champs passent donc à 16 px minimum (le zoom manuel reste possible). */
@media (hover:none) and (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea{font-size:max(16px,1em)}
}

/* Liste complète des secteurs (« Autre secteur… ») */
.secteurs-liste{display:block;width:100%;margin-top:12px;padding:13px 14px;border:1px solid #DDD9D2;border-radius:14px;background:#fff;font:inherit;font-size:16px;color:var(--encre)}
.secteurs-liste[hidden]{display:none}