/* Servio — page de connexion. Reprend la direction artistique du site vitrine :
   fond vert profond, accent terracotta, Manrope/DM Sans, boutons pilule. */

.auth{min-height:100svh;display:grid;grid-template-columns:1.02fr 1fr}

/* ---------- Volet gauche : photo, marque et promesse ---------- */
.auth-aside{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  justify-content:space-between;gap:40px;padding:36px clamp(30px,4vw,66px) 46px;background:var(--ink)}
.auth-aside>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% 28%}
.auth-aside:after{content:'';position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(8,32,26,.84) 0%,rgba(8,32,26,.46) 36%,rgba(8,32,26,.94) 100%),
  linear-gradient(90deg,rgba(8,32,26,.74) 0%,rgba(8,32,26,.22) 70%)}
.auth-aside .brand{font-size:26px}
.auth-aside h2{max-width:13ch;margin-top:20px;font-size:clamp(30px,3.1vw,46px)}
.auth-points{list-style:none;display:grid;gap:13px;margin:28px 0 0;padding:0}
.auth-points li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:#cfdfd6}
.auth-points svg{width:16px;height:16px;margin-top:4px;color:var(--accent)}
.auth-aside .fineprint{margin-top:26px;max-width:46ch}

/* ---------- Volet droit : la carte de connexion ---------- */
.auth-main{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:clamp(34px,5vw,64px) 24px;background:var(--ink-2)}
.auth-main:before{content:'';position:absolute;left:50%;top:-120px;width:560px;height:420px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(255,122,69,.2),transparent 68%);pointer-events:none}
.auth-card{position:relative;width:min(432px,100%);padding:clamp(26px,3vw,38px);
  background:var(--paper);color:var(--on-light);border-radius:var(--r-lg);
  box-shadow:0 44px 96px -44px rgba(0,0,0,.8)}
.auth-card h1{margin:12px 0 12px;font-size:clamp(28px,3vw,34px);line-height:1.08}
.auth-card>p{font-size:15px;line-height:1.7;color:var(--on-light-dim)}
.auth-card .eyebrow{color:var(--accent-ink)}

/* ---------- Champs ---------- */
.auth-card form{margin-top:8px}
.auth-field{display:grid;gap:8px;margin-top:18px;font:600 13px/1.3 var(--display);color:var(--on-light)}
.auth-field input{width:100%;padding:13px 14px;border:1px solid var(--line-light);border-radius:10px;
  background:#fcfcf9;color:var(--on-light);font:400 15px/1.45 var(--body)}
.auth-field input::placeholder{color:#9aa79f}
.auth-field input:focus-visible{outline:2px solid var(--accent-ink);outline-offset:1px;border-color:var(--accent-ink)}
.auth-pass{position:relative}
.auth-pass input{padding-right:48px}
.auth-toggle{position:absolute;top:50%;right:7px;transform:translateY(-50%);width:34px;height:34px;
  display:grid;place-items:center;border-radius:9px;color:var(--on-light-dim)}
.auth-toggle:hover{background:#f1f1e8;color:var(--on-light)}
.auth-toggle svg{width:19px;height:19px;stroke-width:1.8}
.auth-card .btn{margin-top:26px}

/* ---------- Message d'erreur ---------- */
.login-error{margin-top:20px;padding:13px 15px;border:1px solid #f0c3ab;border-left:3px solid var(--accent-2);
  border-radius:10px;background:#fdf0e9;color:#8e3a17;font:500 14px/1.55 var(--body)}
/* Double authentification : la deuxième étape remplace la première dans la carte. « hidden » doit l'emporter sur
   le display des champs, sinon le code s'affiche dès l'arrivée sur la page. */
.auth-card [hidden]{display:none!important}
#code{font:600 20px/1.3 var(--display);letter-spacing:.16em}
#code::placeholder{font-weight:400;letter-spacing:.16em}
.auth-code-help{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--on-light-dim)}
.auth-link{padding:0;border:0;background:none;font:600 13.5px/1.5 var(--body);color:var(--accent-ink);cursor:pointer;
  border-bottom:1px solid #e6c8b6}
.auth-link:hover{border-color:var(--accent-ink)}
.auth-step-back{display:block;margin:16px auto 0}
/* Code de la double authentification demandé (compte créateur) : une consigne, pas une erreur. */
.login-info{margin-top:20px;padding:13px 15px;border:1px solid #c9d8c2;border-left:3px solid #4c7a3f;
  border-radius:10px;background:#eef5ea;color:#2f5223;font:500 14px/1.55 var(--body)}

/* ---------- Bas de carte et retour ---------- */
.auth-foot{display:flex;align-items:center;gap:9px;margin-top:24px;padding-top:20px;
  border-top:1px solid var(--line-light);font-size:13.5px;color:var(--on-light-dim)}
.auth-foot svg{width:16px;height:16px;flex:none;color:var(--accent-ink);stroke-width:1.9}
.auth-signup{margin-top:14px;font-size:13.5px;color:var(--on-light-dim)}
.auth-signup a{color:var(--accent-ink);font-weight:600;border-bottom:1px solid #e6c8b6;padding-bottom:1px}
.auth-signup a:hover{border-color:var(--accent-ink)}
.auth-back{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:550;color:var(--on-dark-dim)}
.auth-back:hover{color:#fff}
.auth-back svg{width:15px;height:15px;transform:rotate(180deg)}

/* ---------- Écrans intermédiaires et mobiles ---------- */
@media(max-width:980px){
  .auth{grid-template-columns:1fr;min-height:0}
  .auth-aside{gap:0;padding:26px 22px 34px;min-height:270px}
  .auth-aside h2{margin-top:30px;max-width:18ch}
  .auth-points,.auth-aside .fineprint{display:none}
  .auth-main{padding:30px 20px 46px}
  .auth-main:before{display:none}
}
@media(max-width:520px){
  .auth-aside{min-height:220px;padding:22px 18px 28px}
  .auth-card{border-radius:var(--r);padding:24px 20px}
}

/* ---------- Page « Créer un compte » : même décor, panneau droit plus large ----------
   Sur un ordinateur, tout tient dans la hauteur de l'écran : les marges et les corps de texte suivent cette
   hauteur (vh), rien n'est à faire défiler. L'entreprise est demandée en premier, avec la recherche dans
   l'annuaire public du parcours de configuration (sirene.js). */
.auth-wide{grid-template-columns:.82fr 1fr}
.auth-wide .auth-aside{justify-content:space-between;gap:20px;padding-block:clamp(20px,4vh,36px) clamp(22px,5vh,46px)}
.auth-wide .auth-aside h2{margin-top:clamp(8px,2vh,20px);font-size:clamp(24px,min(3.1vw,5.2vh),46px)}
.auth-wide .auth-aside .signup-steps{margin-top:clamp(12px,3vh,26px);gap:clamp(8px,1.8vh,16px)}
.auth-wide .auth-aside .fineprint{margin-top:clamp(10px,2.6vh,26px)}
.auth-wide .auth-main{gap:0;padding:clamp(12px,3.2vh,44px) clamp(20px,3vw,40px)}
.signup-panel{position:relative;width:min(680px,100%)}
.signup-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* Arrivée par le lien d'un affilié (affilie-lien.js) : dit sur la ligne du haut, qui ne grandit pas. */
.signup-ref{display:flex;align-items:baseline;gap:8px;min-width:0;margin:0 auto 0 0;font:500 12px/1.5 var(--body);color:var(--on-dark-dim);white-space:nowrap}
.signup-ref[hidden]{display:none}
.signup-ref>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.signup-ref strong{font-weight:650;color:#fff}
.signup-ref-short{display:none}
.signup-head:has(.signup-ref:not([hidden]))>.eyebrow,.signup-head:has(.signup-ref:not([hidden]))>.auth-back{flex:none;white-space:nowrap}
.signup-ref button{flex:none;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.signup-panel .eyebrow{color:var(--accent)}
.signup-panel h1{margin:clamp(4px,1.1vh,11px) 0 clamp(3px,1vh,10px);font-size:clamp(24px,min(3vw,4.6vh),36px);line-height:1.08;color:#fff}
.signup-panel>p{font-size:14.5px;line-height:1.55;color:var(--on-dark-dim)}
.signup-panel .signup-form{margin-top:clamp(8px,2.2vh,22px);padding:clamp(12px,2.6vh,24px) clamp(16px,2vw,24px)}
.signup-panel .signup-fields{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(7px,1.6vh,14px) 14px}
.signup-company,.signup-panel .signup-span{grid-column:1/-1}
.signup-half{grid-column:span 3}
.signup-third{grid-column:span 2}
.signup-company{display:grid;gap:5px}
.signup-panel .signup-company>label{display:block}
.signup-panel .signup-form label{gap:5px}
.signup-panel .signup-form input:not([type=checkbox]),.signup-panel .signup-form textarea{padding:clamp(5px,1.1vh,11px) 12px}
.signup-panel .signup-form textarea{min-height:0;resize:none}
.signup-panel .signup-consent{margin-top:clamp(7px,1.6vh,14px);gap:9px;font-size:13px;line-height:1.5}
.signup-panel .signup-terms{margin-top:clamp(4px,1vh,12px);font-size:13px;line-height:1.5}
.signup-panel .contact-send{margin-top:clamp(7px,1.6vh,16px);gap:14px}
.signup-panel .contact-send .btn{padding:clamp(10px,1.8vh,15px) 26px}
.signup-panel .signup-foot{margin:0 0 0 auto;white-space:nowrap}
/* Le message (création en cours, refus) prend la place de « Déjà un accès ? » : la ligne ne grandit pas. */
.signup-panel .contact-send{flex-wrap:nowrap}
.signup-panel .contact-status{flex:1;min-width:0;font-size:13px;line-height:1.4}
.signup-panel .contact-status:not(:empty)+.signup-foot{display:none}
.signup-panel .signup-note{display:flex;align-items:flex-start;gap:9px;margin-top:clamp(8px,1.8vh,18px);font-size:12.5px;line-height:1.5}
.signup-panel .signup-note svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--accent);stroke-width:1.9}

/* L'entreprise : propositions de l'annuaire sous le champ, puis une ligne qui dit ce qui est rattaché. */
.signup-combo{position:relative}
.signup-combo .sirene-box{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:6px;max-height:min(330px,52vh);overflow:hidden auto;
  background:#fff;border:1px solid var(--line-light);border-radius:12px;box-shadow:0 18px 40px -18px rgba(8,32,26,.5)}
.signup-combo .sirene-opt{display:block;width:100%;padding:9px 13px;border:0;border-bottom:1px solid #eeeee6;background:none;
  text-align:left;color:var(--on-light);font:inherit;cursor:pointer}
.signup-combo .sirene-opt:hover,.signup-combo .sirene-opt.is-active{background:#f3f1ea}
.signup-combo .sirene-opt strong{display:block;font:600 14px/1.35 var(--body)}
.signup-combo .sirene-opt small{display:block;margin-top:2px;font:400 12.5px/1.4 var(--body);color:var(--on-light-dim)}
.signup-combo .sirene-note{margin:0;padding:8px 13px;font:400 12px/1.45 var(--body);color:var(--on-light-dim)}
.signup-found{display:flex;align-items:center;gap:7px;min-height:18px;margin:0;font:400 12px/1.5 var(--body);color:var(--on-light-dim)}
.signup-found svg{width:14px;height:14px;flex:none;color:#2f7a4b;stroke-width:2.4}
.signup-found span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.signup-found strong{font-weight:650;color:var(--on-light)}
.signup-unfound{flex:none;margin-left:auto;padding:0;border:0;background:none;font:600 12px/1.5 var(--body);color:var(--accent-ink);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Écran bas (portable en 150 %) : la phrase d'introduction s'efface, le champ libre tient sur une ligne. */
@media(min-width:981px) and (max-height:660px){
  .signup-panel>p{display:none}
  .signup-panel .signup-form textarea{height:36px;white-space:nowrap;overflow:hidden}
}
/* Plus bas encore : le panneau entier se réduit d'un cran plutôt que de déborder. */
@media(min-width:981px) and (max-height:615px){.signup-panel{zoom:.94}}
@media(min-width:981px) and (max-height:570px){.signup-panel{zoom:.9}}
/* Fenêtre étroite (981 à 1180 px) : le formulaire prend la place, les étapes se réduisent à leur titre. */
@media(min-width:981px) and (max-width:1180px){
  .auth-wide{grid-template-columns:.6fr 1fr}
  .auth-wide .auth-aside{padding-inline:26px}
  .auth-wide .signup-steps small{display:none}
  .signup-ref-more{display:none}
  .signup-ref-short{display:inline}
}
/* Tablette et téléphone : le formulaire d'abord, la photo se réduit à un bandeau avec la marque. */
@media(max-width:980px){
  .auth-wide{grid-template-columns:1fr}
  .auth-wide .auth-aside{min-height:0;padding:16px 20px}
  .auth-wide .auth-aside>div{display:none}
  .auth-wide .auth-main{align-items:center;padding:20px 18px 28px}
}
@media(max-width:620px){
  .signup-half,.signup-third.signup-user{grid-column:1/-1}
  .signup-third{grid-column:span 3}
  .signup-panel .signup-form{padding:16px}
  .signup-panel .contact-send{flex-wrap:wrap}
  .signup-found{align-items:flex-start;flex-wrap:wrap}
  .signup-found span{white-space:normal}
  /* Avec un code d'affilié seulement : la mention passe sous la ligne du haut, qui garde sa forme. */
  .signup-head:has(.signup-ref:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .signup-ref{grid-column:1/-1;grid-row:2;white-space:normal}
}
.login-ok{margin-top:20px;padding:13px 15px;border:1px solid #bfd9c4;border-left:3px solid #2f7a4b;
  border-radius:10px;background:#eef7f0;color:#1f5634;font:500 14px/1.55 var(--body)}
.auth-forgot{display:block;margin-top:10px;font-size:13.5px;color:var(--accent-ink);font-weight:600;text-align:right}
/* Inscription : confirmation qui prend la place du formulaire une fois la demande partie (signup.js). */
.signup-panel .signup-form[hidden],.signup-done[hidden]{display:none}
.signup-done{margin-top:clamp(8px,2.2vh,22px);padding:clamp(22px,4vh,36px) clamp(18px,2.4vw,32px);border:1px solid var(--line-light);border-radius:18px;background:var(--paper);color:var(--on-light);outline:0}
.signup-done-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#e3f1e6;color:#2f7a4b}
.signup-done-mark svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.signup-done h2{margin:16px 0 8px;font:700 clamp(19px,2.2vw,24px)/1.25 var(--display);color:var(--on-light)}
.signup-done p{margin:0 0 22px;font:400 15px/1.6 var(--body);color:var(--on-light-dim);overflow-wrap:anywhere}

/* ---------- Choix de l'offre avant le paiement (offre-choix.js) ----------
   Page « Créer un compte » et page « Choisissez votre offre » (abonnement.html). data-pay sur <body> : « off » quand
   le paiement en ligne n'est pas ouvert (signup.js) — la version « on » reste affichée tant que rien n'est dit. */
body[data-pay=off] [data-pay=on],body:not([data-pay=off]) [data-pay=off]{display:none!important}
.offer-pick{min-width:0;margin:0;padding:0;border:0}
.offer-pick-head{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.offer-pick legend{float:left;padding:0;font:600 13px/1.3 var(--display);color:var(--on-light)}
.offer-trial{padding:2px 9px;border-radius:var(--pill);background:#e3f1e6;color:#1f5634;font:650 11.5px/1.5 var(--body)}
.offer-trial[hidden]{display:none}
.offer-period{display:inline-flex;margin-left:auto;padding:3px;border-radius:var(--pill);background:#f1f1e8}
.signup-form .offer-period label,.offer-period label{display:block;font:600 12px/1.3 var(--body);color:var(--on-light-dim);cursor:pointer}
.offer-period span{display:block;padding:3px 10px;border-radius:var(--pill)}
.offer-period small{font-weight:650;color:#2f7a4b}
.offer-period label:has(input:checked) span{background:#fff;color:var(--on-light);box-shadow:0 1px 3px rgba(18,38,31,.16)}
.offer-pick input[type=radio],.signup-panel .signup-form .offer-pick input[type=radio]{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.offer-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:clamp(5px,1vh,10px)}
.signup-form .offer-card,.offer-card{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:4px 8px;flex-wrap:wrap;padding:clamp(7px,1.3vh,11px) 12px;border:1px solid var(--line-light);border-radius:10px;background:#fcfcf9;cursor:pointer}
.offer-card strong{font:650 14px/1.3 var(--display);color:var(--on-light)}
.offer-card>span{font:400 12px/1.4 var(--body);color:var(--on-light-dim);white-space:nowrap}
.offer-card b{font:700 14px/1.3 var(--display);color:var(--on-light)}
.offer-card:has(input:checked){border-color:var(--accent-ink);background:#fdf0e9;box-shadow:inset 0 0 0 1px var(--accent-ink)}
/* Business, l'offre conseillée (choix d'Enzo du 18/10/2026) : en premier, sur fond sombre et avec son étiquette, comme
   sur les pages Tarifs et d'accueil. Cochée, elle garde son fond et prend l'anneau orange. */
.offer-cards:has(.offer-flag){margin-top:clamp(12px,1.8vh,16px)}
.offer-card.is-main{border-color:var(--ink-2);background:var(--ink-2)}
.offer-card.is-main strong,.offer-card.is-main b{color:var(--on-dark)}
.offer-card.is-main>span{color:rgba(241,246,241,.72)}
.offer-card.is-main:has(input:checked){border-color:var(--accent);background:var(--ink-2);box-shadow:0 0 0 2px var(--accent)}
.offer-flag{position:absolute;top:-9px;right:10px;padding:1px 8px;border-radius:var(--pill);background:var(--accent);color:#fff;font:700 10.5px/1.5 var(--body);font-style:normal;white-space:nowrap}
.offer-card:has(input:focus-visible),.offer-period label:has(input:focus-visible) span{outline:2px solid var(--accent-ink);outline-offset:2px}
.offer-pick:has(input[name=period][value=annuel]:checked) .offer-monthly,.offer-pick:not(:has(input[name=period][value=annuel]:checked)) .offer-annual{display:none}
.offer-sum{margin:5px 0 0;font:400 12px/1.45 var(--body);color:var(--on-light-dim)}
.offer-sum:empty{display:none}
/* Sur un ordinateur, la page d'inscription tient toujours dans l'écran : le choix de l'offre ajoute une ligne, le
   panneau se resserre un peu plus tôt (mêmes paliers que plus haut, version « paiement » seulement). */
@media(min-width:981px) and (max-height:780px){body:not([data-pay=off]) .signup-panel{zoom:.95}}
@media(min-width:981px) and (max-height:615px){body:not([data-pay=off]) .signup-panel{zoom:.9}}
@media(min-width:981px) and (max-height:570px){body:not([data-pay=off]) .signup-panel{zoom:.86}}
@media(min-width:981px) and (max-height:550px){body:not([data-pay=off]) .signup-panel{zoom:.83}}
@media(max-width:520px){
  .offer-period{margin-left:0}
  .offer-cards{grid-template-columns:1fr}
}

/* ---------- Page « Choisissez votre offre » (abonnement.html) : un compte inscrit qui n'a pas encore payé ---------- */
.pay-card{width:min(560px,100%)}
.pay-card .offer-pick{margin-top:20px}
.pay-card .btn{width:100%;justify-content:center}
.pay-card .login-error,.pay-card .login-info{margin-top:16px}
.pay-card .auth-foot a{color:var(--accent-ink);font-weight:600}
.pay-out{display:block;margin:14px auto 0}

/* ---------- Activation obligatoire de la double authentification (double-authentification.html) ---------- */
.enrol-means{display:grid;gap:8px;margin-top:18px}
.enrol-mean{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line-light);border-radius:10px;cursor:pointer;background:#fcfcf9}
.enrol-mean:has(input:checked){border-color:var(--accent-ink);background:#fdf0e9}
.enrol-mean.is-off{opacity:.55;cursor:not-allowed}
.enrol-mean input{margin-top:3px;accent-color:var(--accent-ink)}
.enrol-mean strong{display:block;font:600 14px/1.35 var(--display);color:var(--on-light)}
.enrol-mean small{font-size:13px;line-height:1.5;color:var(--on-light-dim)}
.enrol-scan{display:flex;gap:16px;align-items:center;margin-top:14px}
.enrol-scan p,.enrol-manual p{font-size:13.5px;line-height:1.6;color:var(--on-light-dim)}
.enrol-qr{flex:none;width:168px;height:168px;border:1px solid var(--line-light);border-radius:10px;background:#fff}
.enrol-qr rect{fill:#fff;stroke:none}.enrol-qr path{fill:#000;stroke:none}
.enrol-manual{margin-top:12px}.enrol-manual summary{cursor:pointer;font:600 13.5px/1.5 var(--body);color:var(--on-light-dim)}
.enrol-key{display:block;margin-top:8px;padding:11px 13px;border-radius:10px;background:#f1f1e8;font:700 15px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.06em;word-break:break-all;user-select:all;color:var(--on-light)}
.enrol-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;margin-top:16px;padding:14px;border-radius:10px;background:#f1f1e8;font:700 15px/1.6 ui-monospace,Consolas,monospace;list-style:none;color:var(--on-light)}
.enrol-row{margin-top:10px;font-size:13.5px;color:var(--on-light-dim)}
.enrol-check{display:flex;gap:8px;align-items:center;margin-top:16px;font:500 14px/1.5 var(--body);color:var(--on-light)}
@media (max-width:520px){.enrol-scan{flex-direction:column;align-items:flex-start}}