/* ORTHETHIC V2.72 — Page de connexion / création de compte.
   Carte de taille FIXE (largeur = titre sur une ligne, zone de contenu de hauteur fixe) : rien ne bouge
   entre « Se connecter » et « Créer un compte », seul le contenu interne change.
   La carte entière est mise à l'échelle de l'écran par /Assets/js/fit-scale.js (--fit). */
:root{--ui-font:Avenir,"Segoe UI",system-ui,Arial,sans-serif;--fit:1;
  --card:#1e1e24;--head:#19191e;--field:#303038;--modal:#53535e;--modal-btn:#1b1b20;--accent:rgba(83,83,94,.58);
  --text:#eee9f1;--muted:#c5becd;--placeholder:#bdb7c8;--line:#46454e;--sep:rgba(255,255,255,.09);
  --field-h:42px;--gap:10px;--stage-h:120px;--radius:24px;--field-radius:10px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#25262b;color:var(--text);font-family:var(--ui-font)}
body{overflow-x:hidden}
button,input{font:inherit;color:inherit}

/* Fond photo pastel */
.bg-photo{position:fixed;inset:0;background:#25262b;pointer-events:none;z-index:0}
.bg-photo::before{content:"";position:absolute;inset:0;background:url("../images/accueil-mouvement.jpg") center/cover no-repeat;filter:saturate(.58) brightness(1.10) contrast(.85);opacity:.46}
.bg-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,29,34,.13),rgba(28,29,34,.31)),radial-gradient(ellipse at center,rgba(29,30,35,.15),transparent 72%)}

/* Carte centrée, à l'échelle de l'écran */
.wrap{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:12px}
.card{zoom:var(--fit);width:max-content;min-width:440px;flex:none;border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:0 24px 80px rgba(0,0,0,.34)}
.form-head{padding:26px 34px 20px;background:var(--head)}
.logo-art{width:180px;height:43px;display:flex;align-items:center;margin-bottom:14px}
.logo-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
.title{margin:0 0 5px;white-space:nowrap;font-size:15px;font-weight:600;line-height:1.4;color:#f4f0f7}
.sub{margin:0;white-space:nowrap;font-size:12px;line-height:1.5;color:var(--muted)}
.form-body{padding:22px 34px 18px}


/* Zone de contenu : hauteur fixe, un seul volet visible */
.stage{position:relative;height:var(--stage-h)}
.pane{position:absolute;inset:0;display:flex;flex-direction:column;gap:var(--gap)}
.pane[hidden]{display:none}
.step-head{display:flex;align-items:baseline;justify-content:space-between;height:16px;margin-bottom:0}
.form-section{margin:0;font-size:12px;font-weight:600;line-height:16px;color:var(--text)}
.step-count{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Champs */
.input-wrap{position:relative;height:var(--field-h);min-width:0;flex:none}
.field{width:100%;height:100%;border:0;outline:none;border-radius:var(--field-radius);background:var(--field);color:var(--text);-webkit-text-fill-color:var(--text);caret-color:var(--text);padding:0 14px 0 40px;font-size:13px;box-shadow:inset 2px 3px 7px #00000020,inset -1px -1px 3px #ffffff05}
.field::placeholder{color:var(--placeholder);-webkit-text-fill-color:var(--placeholder);opacity:1}
.field:focus{box-shadow:inset 2px 3px 7px #00000020,0 0 0 2px rgba(203,188,246,.35)}
.field:-webkit-autofill,.field:-webkit-autofill:hover,.field:-webkit-autofill:focus{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--field) inset;caret-color:var(--text)}
.field.is-locked{opacity:.55;cursor:not-allowed}
.field.is-locked[readonly]{opacity:.7;cursor:default}
.field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--placeholder);pointer-events:none}
.field-icon svg{display:block;width:100%;height:100%;fill:currentColor}
.password-wrap .field{padding-right:44px}
.password-eye{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;background:none;color:#fff;cursor:pointer;visibility:hidden}
.password-wrap:focus-within .password-eye{visibility:visible}
.password-eye svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.password-eye[aria-pressed="true"] .eye-slash{display:none}
.password-eye:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:8px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.pair .field{padding-left:38px}.pair .field-icon{left:13px}

/* Mot de passe oublié */
.forgot-row{display:flex;justify-content:flex-end;height:16px}
.forgot{border:0;background:none;padding:0;color:#fff;font-size:11px;cursor:pointer}
.forgot:focus-visible{outline:2px solid #cbbcf6;outline-offset:3px;border-radius:3px}

/* Choix du type d'entreprise */
.company-choice{display:flex;gap:20px;height:22px;align-items:center;padding:0 2px}
.choice{position:relative;display:flex;align-items:center;gap:8px;color:#e1dbe8;font-size:12px;cursor:pointer;user-select:none;white-space:nowrap}
.choice input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.choice-box{width:15px;height:15px;border-radius:4px;background:var(--field);box-shadow:inset 1px 2px 4px #00000030;display:grid;place-items:center}
.choice-box::after{content:"";width:4px;height:7px;border:solid #eee9f1;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);opacity:0}
.choice:has(input:checked){color:#fff}
.choice:has(input:checked) .choice-box::after{opacity:1}
.choice:has(input:focus-visible) .choice-box{outline:2px solid #fff;outline-offset:2px}

/* Vérification (reCAPTCHA) : voir aussi captcha.css */
.pane .captcha-slot{flex:1;margin:0;justify-content:flex-start;align-items:center}

/* Boutons du bas : même emplacement dans les deux modes */
.actions-row{display:flex;justify-content:space-between;gap:var(--gap);height:var(--field-h);margin-top:14px}
.btn{height:100%;border:0;border-radius:var(--field-radius);background:var(--accent);color:#fff;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 5px 15px #0002,inset 0 1px #ffffff12}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible{outline:2px solid #cbbcf6;outline-offset:3px}
.btn.full{flex:1}
.btn.half{flex:0 0 calc(50% - var(--gap) / 2)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line);font-weight:600}
.btn.invisible{visibility:hidden}
.btn[hidden]{display:none}

/* Lien vers l'autre mode, sous un trait fin */
.switch-row{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:18px;padding-top:14px;border-top:.5px solid var(--sep);font-size:12px;line-height:1.45;text-align:center;color:var(--muted)}
.switch-link{border:0;background:none;padding:0;color:#fff;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}
.switch-link:hover{color:#e4d9ff}
.switch-link:disabled{opacity:.45;cursor:not-allowed}
.switch-link:focus-visible{outline:2px solid #cbbcf6;outline-offset:3px;border-radius:3px}

.contact-line{display:flex;align-items:center;justify-content:center;gap:7px;margin:14px 0 0;padding-top:13px;border-top:.5px solid var(--sep);font-size:11px;color:#bdb7c8}
.contact-line a{color:var(--text);text-decoration:none}
.contact-line a:hover{color:#fff}
.contact-line a:focus-visible{outline:2px solid #cbbcf6;outline-offset:4px;border-radius:3px}
.contact-separator{color:#a6a0b2}

/* Fenêtres */
.modal-backdrop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto;background:rgba(10,9,14,.34);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.modal,.registration-loading{zoom:var(--fit);flex:none;width:380px;max-width:calc((100vw - 32px) / var(--fit));margin:auto;border-radius:16px;background:var(--modal);color:#fff;box-shadow:0 24px 80px rgba(0,0,0,.55);padding:20px;overflow-wrap:anywhere}
.modal h2{font-size:14px;font-weight:600;margin:0 0 10px}
.modal p{font-size:11px;line-height:1.55;color:#eee;margin:0 0 18px}
.modal .actions{display:flex;justify-content:flex-end;gap:8px}
.modal .actions button{min-width:80px;height:36px;padding:0 12px;border:0;border-radius:9px;background:var(--modal-btn);color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.modal .actions button.secondary{background:transparent;box-shadow:inset 0 0 0 1px #ffffff40}
.modal .field{height:40px;padding-left:14px;margin:8px 0 16px;background:rgba(24,24,29,.65)}
.registration-loading{background:var(--card)}
.registration-loading h2{font-size:14px;font-weight:600;margin:0 0 10px}
.registration-loading p{font-size:11px;color:#b8b5c8;line-height:1.5;margin:0 0 23px}
.registration-track{height:9px;border-radius:99px;overflow:hidden;background:#ffffff0c}
.registration-fill{height:100%;border-radius:99px;transform-origin:left;background:linear-gradient(90deg,#cbb7ee 0%,#efc7a9 33.33%,#b8dbc7 66.67%,#eee1a6 100%);animation:registration-progress 3s linear forwards}
@keyframes registration-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Récapitulatif avant envoi */
.recap-modal{width:400px}
.recap{display:flex;flex-direction:column;gap:10px;margin:0 0 18px}
.recap section{padding:12px 14px;border-radius:12px;background:rgba(27,27,32,.45)}
.recap h3{margin:0 0 7px;font-size:10px;font-weight:600;color:#d9d3e2}
.recap dl{display:grid;grid-template-columns:115px 1fr;gap:5px 10px;margin:0;font-size:11px}
.recap dt{color:#c9c2d2}.recap dd{margin:0;color:#fff;font-weight:600}
.recap .terms-ok{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600}
.recap .tick{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#9fdcc4;color:#1b1b20;font-size:12px;font-weight:800}

@media(prefers-reduced-motion:reduce){.registration-fill{animation-duration:.01s}}

/* V2.89 — Titre sur une ligne, typographie plus fine */
.form-head .title{font-family:"Avenir","Segoe UI",Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:-.22px;white-space:nowrap}

/* V2.97 - harmonisation des typographies et boutons compacts */
.form-section,.step-head .form-section,.modal h2,.registration-loading h2{font-size:15px;font-weight:600;line-height:1.4}
.step-head{height:auto;min-height:21px}
.modal p,.registration-loading p,.modal .terms-content,.choice,.step-count{font-size:12px;line-height:1.5}
.actions-row{height:36px;justify-content:center}
.actions-row .btn{height:36px;font-size:12px;font-weight:600;border-radius:9px;transition:box-shadow .22s ease,filter .22s ease;background-color:var(--accent)}
.actions-row .btn.full{flex:0 1 100%;max-width:100%}
.actions-row .btn.half{flex:0 0 calc(50% - var(--gap)/2)}
.actions-row .btn:not(:disabled):hover{background-color:var(--accent)!important;color:#fff!important;filter:none!important;box-shadow:0 0 12px rgba(183,156,240,.13),0 0 26px rgba(164,143,229,.10),0 0 40px rgba(130,209,179,.045),inset 0 1px #ffffff12!important;transform:none!important}
.actions-row .btn.ghost:hover{background-color:transparent!important}

/* V2.98 : le survol ne modifie jamais la couleur du bouton. */
.actions-row .btn:not(.ghost),
.actions-row .btn:not(.ghost):hover,
.actions-row .btn:not(.ghost):focus,
.actions-row .btn:not(.ghost):active {
  background:rgba(83,83,94,.58)!important;
  background-image:none!important;
  color:#fff!important;
  filter:none!important;
  transform:none!important;
  border-color:transparent!important;
}
.actions-row .btn:not(.ghost){
  transition:box-shadow .3s ease!important;
  box-shadow:0 5px 15px #0002,inset 0 1px #ffffff12!important;
}
.actions-row .btn:not(.ghost):not(:disabled):hover {
  box-shadow:0 0 8px 2px rgba(186,161,241,.22),0 0 22px 5px rgba(176,151,236,.12),0 0 38px 8px rgba(125,211,177,.06),inset 0 1px #ffffff12!important;
}

/* V2.99 - lien de creation de compte et bouton Precedent */
.switch-row .switch-link,
.switch-row .switch-link:hover,
.switch-row .switch-link:focus,
.switch-row .switch-link:active{
  color:#fff!important;
  background:transparent!important;
  background-image:none!important;
  filter:none!important;
  transform:none!important;
  border-radius:7px;
  padding:3px 9px;
  margin:-3px -9px;
  transition:box-shadow .3s ease!important;
}
.switch-row .switch-link:not(:disabled):hover{
  box-shadow:0 0 8px 2px rgba(186,161,241,.20),0 0 22px 5px rgba(176,151,236,.11),0 0 38px 8px rgba(125,211,177,.05)!important;
}
.actions-row #prevStep,
.actions-row #prevStep:hover,
.actions-row #prevStep:focus,
.actions-row #prevStep:active{
  background:transparent!important;
  background-image:none!important;
  color:#fff!important;
  filter:none!important;
  transform:none!important;
  box-shadow:inset 0 0 0 1px var(--line)!important;
  transition:box-shadow .3s ease!important;
}
.actions-row #prevStep:not(:disabled):hover{
  box-shadow:inset 0 0 0 1px var(--line),0 0 8px 2px rgba(186,161,241,.22),0 0 22px 5px rgba(176,151,236,.12),0 0 38px 8px rgba(125,211,177,.06)!important;
}

/* V3.00 - halos blancs uniquement, sans teinte violette ni verte. */
.actions-row .btn:not(:disabled):hover,
.actions-row .btn:not(.ghost):not(:disabled):hover {
  box-shadow:0 0 8px 2px rgba(255,255,255,.18),0 0 22px 5px rgba(255,255,255,.09),0 0 38px 8px rgba(255,255,255,.035),inset 0 1px rgba(255,255,255,.07)!important;
}
.actions-row #prevStep:not(:disabled):hover {
  box-shadow:inset 0 0 0 1px var(--line),0 0 8px 2px rgba(255,255,255,.18),0 0 22px 5px rgba(255,255,255,.09),0 0 38px 8px rgba(255,255,255,.035)!important;
}
.switch-row .switch-link:not(:disabled):hover {
  box-shadow:0 0 8px 2px rgba(255,255,255,.18),0 0 22px 5px rgba(255,255,255,.09),0 0 38px 8px rgba(255,255,255,.035)!important;
}

/* V3.01 — Formulaire légèrement plus haut et respirations régulières. */
:root{--stage-h:144px;--gap:14px}
.form-head{padding-bottom:25px}
.form-body{padding-top:27px;padding-bottom:23px}
.pane{gap:var(--gap)}
.actions-row{margin-top:20px}
.switch-row{margin-top:23px;padding-top:18px;gap:11px}
.contact-line{margin-top:19px;padding-top:16px}

/* V3.27 — CGU : fenêtre sur fond sombre, dans le style de la carte de connexion
   (fond #1e1e24, en-tête #19191e avec logo, arrondi 24 px). Pastilles aux 4 couleurs pastel Orthethic. */
.terms-backdrop{background:rgba(8,8,12,.62)}
.modal.terms-modal{width:640px;padding:0;display:flex;flex-direction:column;max-height:calc((100dvh - 32px) / var(--fit));border-radius:var(--radius);background:var(--card);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 0 1px #ffffff0d}
.terms-head{display:flex;align-items:center;gap:18px;padding:22px 28px 18px;background:var(--head);border-bottom:1px solid #ffffff0f;flex:none}
.terms-logo{width:118px;height:auto;flex:none;display:block}
.terms-head-text{flex:1;min-width:0;padding-left:18px;border-left:1px solid #ffffff1a}
.modal .terms-head h2{margin:0 0 3px;font-size:15px;font-weight:600;color:#f4f0f7}
.modal .terms-head p{margin:0;font-size:11px;color:var(--muted)}
.terms-pdf{flex:none;align-self:center;font-size:11px;font-weight:600;color:var(--text);text-decoration:none;padding:7px 12px;border-radius:9px;box-shadow:inset 0 0 0 1px #ffffff2a;transition:background .2s}
.terms-pdf::before{content:"↓ "}
.terms-pdf:hover{background:#ffffff12}
.modal .terms-lead{margin:16px 28px 0;padding:11px 14px;border-radius:12px;background:#e4c66824;color:#f6e7b6;font-size:12px;line-height:1.5}
.terms-scroll{flex:1;min-height:0;display:flex;padding:6px 0 0}
.modal .terms-content{flex:1;min-height:0;max-height:none;overflow-y:auto;padding:16px 28px 26px;margin:0;border:0;background:transparent;color:#d9d3e0;font-size:12px;line-height:1.6;scrollbar-width:thin;scrollbar-color:#4a4a55 transparent}
.modal .terms-content:focus{outline:none}
.modal .terms-content:focus-visible{box-shadow:inset 0 0 0 2px #ffffff30}
.terms-content p{margin:0 0 9px;font-size:12px;line-height:1.6;color:#d9d3e0}
.terms-content a{color:#fff;text-decoration:underline;text-decoration-color:#ffffff55;text-underline-offset:2px}
.terms-content strong{color:#fff;font-weight:600}
.terms-identity{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;color:var(--muted);margin:0 0 16px}
.terms-identity strong{width:100%;font-size:12px}
.terms-summary{padding:16px;border-radius:16px;background:var(--field);margin:0 0 22px}
.terms-summary h3{margin:0 0 12px;font-size:12px;font-weight:600;color:#fff;letter-spacing:.02em}
.terms-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.terms-tile{position:relative;padding:12px 11px 11px;border-radius:11px;background:#1e1e24;display:flex;flex-direction:column;gap:5px;font-size:10.5px;line-height:1.45;color:#c9c2d2}
.terms-tile::before{content:"";width:18px;height:4px;border-radius:4px;background:var(--tile)}
.terms-tile strong{font-size:11.5px;color:var(--tile)}
.tile-1{--tile:#c3a6ea}.tile-2{--tile:#f0b88f}.tile-3{--tile:#a8d8bd}.tile-4{--tile:#ecd58b}
.modal .terms-note{margin:11px 0 0;font-size:10.5px;color:var(--muted);font-style:italic}
.terms-article{padding:14px 0 6px;border-top:1px solid #ffffff10}
.terms-article h3{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font-size:13px;font-weight:600;color:#fff}
.terms-num{flex:none;min-width:26px;font-size:11px;font-weight:700;color:#9e96aa;font-variant-numeric:tabular-nums}
.terms-article h4{margin:12px 0 5px;font-size:11.5px;font-weight:600;color:#ece6f2}
.terms-article ul{margin:0 0 10px;padding-left:18px}
.terms-article li{margin:0 0 5px}
.terms-article li::marker{color:#8f8899}
.terms-progress{height:2px;background:#ffffff0f;flex:none}
.terms-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#c3a6ea,#f0b88f,#a8d8bd,#ecd58b);transition:width .12s linear}
.terms-foot{display:flex;align-items:center;gap:14px;padding:14px 20px 16px 28px;background:var(--head);flex:none}
.modal .terms-hint{flex:1;margin:0;font-size:11px;color:var(--muted)}
.modal .terms-hint.done{color:#a8d8bd}
.terms-foot .actions{margin-left:auto;flex:none}
.modal .terms-foot .actions button{height:38px;padding:0 16px;background:var(--accent);box-shadow:0 5px 15px #0002,inset 0 1px #ffffff12}
.modal .terms-foot .actions button.secondary{background:transparent;box-shadow:inset 0 0 0 1px #ffffff30}
.modal .terms-foot .actions button:disabled{opacity:.4;cursor:not-allowed}
.modal .terms-foot .actions button:not(:disabled):not(.secondary):hover{filter:brightness(1.25)}
.terms-link{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:#ffffff40;text-underline-offset:2px}
.terms-link:hover{color:#fff}
@media (max-width:700px){
 .modal.terms-modal{width:calc((100vw - 24px) / var(--fit))}
 .terms-tiles{grid-template-columns:repeat(2,1fr)}
 .terms-head{flex-wrap:wrap;padding:18px 20px 14px}.terms-head-text{border-left:0;padding-left:0;flex-basis:100%}
 .modal .terms-content{padding:14px 20px 22px}.terms-foot{flex-wrap:wrap;padding:12px 16px}.modal .terms-hint{flex-basis:100%}
}
.terms-logo{filter:brightness(0) invert(1)}
.modal .terms-content:focus,.modal .terms-content:focus-visible{outline:none!important;box-shadow:none!important}
.terms-foot{flex-wrap:wrap;row-gap:10px}
.modal .terms-hint{flex-basis:100%;order:-1}
.terms-summary h3{margin-top:0!important;padding-top:0}
@media (max-width:700px){.modal .terms-lead{margin:14px 20px 0}}

/* V3.42 - Intégration du front gris du configurateur, sans changer l'authentification. */
:root{--card:#2a2d32;--head:#2a2d32;--field:#202227;--text:#eef0f2;--muted:#9b9fa5;--placeholder:#858b92;--line:#363a40;--sep:#ffffff12;--radius:20px;--field-radius:10px}
html,body{background:#111315;color:#eef0f2;font-family:Avenir,"Segoe UI",system-ui,Arial,sans-serif}
body{background:radial-gradient(circle at 50% 5%,#222428,#111315 65%) fixed}
#orth-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.bg-photo{display:none!important}
.wrap{padding:30px 20px}
.card{background:#2a2d32;border:1px solid #363a40;box-shadow:0 18px 60px #0003;border-radius:20px;overflow:hidden}
.form-head{background:#2a2d32;text-align:center;padding:27px 28px 20px}
.logo-art{width:260px;height:55px;margin:0 auto 28px;justify-content:center}
.logo-art img{object-position:center;filter:brightness(0) invert(46%)}
.form-head .title{font-family:Avenir,"Segoe UI",system-ui,Arial,sans-serif;font-size:22px;font-weight:600;letter-spacing:-.2px;color:#e9ebed;line-height:1.3}
.form-head .sub{font-size:12px;color:#8a8f95;margin-top:13px}
.form-body{padding:22px 28px 26px}
.field{background:#202227;border:0;border-radius:10px;color:#f6f6f6;box-shadow:none}
.field:focus{background:#25282d;box-shadow:none;outline:1px solid #555a61}
.field:-webkit-autofill,.field:-webkit-autofill:hover,.field:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #202227 inset}
.switch-row{border-top:1px solid #ffffff12;color:#969ba2}
.switch-link{color:#c9cdd2}
.contact-line{color:#969ba2;border-top:1px solid #ffffff12}
.contact-line a{color:#c9cdd2}

/* V3.42 correction : entete et contact HORS du formulaire. */
.page{zoom:var(--fit);width:584px;max-width:calc(100vw - 40px);flex:none;text-align:center}
.card{zoom:1;width:100%;min-width:0;text-align:left}
.form-head{background:transparent;padding:0 0 30px;text-align:center}
.logo-art{margin:0 auto 32px;width:260px;height:65px}
.form-head .title{font-size:29px;line-height:1.2;margin:0 0 8px;white-space:normal}
.form-head .sub{margin:0;font-size:12px}
.form-head .title::after{content:"Appareillages orthopédiques sur-mesure";display:block;font-size:14px;font-weight:400;color:#c3c7cc;margin-top:8px}
.form-head .sub{margin-top:23px}
.form-body{padding:28px}
.contact-line{margin:21px 0 0;padding:0;border:0;text-align:center;justify-content:center}
@media(max-width:650px){.page{width:100%}.form-head .title{font-size:24px}.logo-art{width:220px}}

/* Logo pastel final et hierarchie typographique */
.logo-art{width:300px;height:72px;margin-bottom:30px}
.logo-art img{filter:none}
.form-head .title{font-size:25px}
@media(max-width:650px){.logo-art{width:255px;height:62px}.form-head .title{font-size:22px}}

/* Ajustements accueil : logo, titre et contact sur deux lignes */
.logo-art{width:325px;height:78px}
.form-head .title{font-size:29px}
.contact-line{display:flex;flex-direction:column;align-items:center;gap:7px}
.contact-line .terms-link{font-size:inherit}
@media(max-width:650px){.logo-art{width:min(290px,85vw);height:70px}.form-head .title{font-size:clamp(22px,5vw,29px)}}

/* Contact et CGU integres dans la carte, apres le second separateur */
.card .contact-line{display:flex;flex-direction:column;align-items:center;gap:9px;margin:19px 0 0;padding:18px 0 0;border:0;border-top:1px solid #ffffff1c;text-align:center;font-size:12px;color:#aeb2b8}
.card .contact-line .terms-link{font-weight:700;text-decoration:none!important;color:#c9cdd2}
.card .contact-line .terms-link:hover{color:#fff;text-decoration:none!important}

/* Onglets cote a cote, style historique. Logo gris neutre. */
.logo-art img{filter:brightness(0) invert(46%)!important}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#222428;border-radius:11px;margin-bottom:25px}
.auth-tab{border:0;border-radius:8px;background:transparent;color:#a6abb2;padding:11px 5px;font:500 13px Avenir,"Segoe UI",system-ui,sans-serif;cursor:pointer}
.auth-tab.active{background:#41454c;color:#fff}
.switch-row{display:none!important}
.card .contact-line{margin-top:20px}

/* OrthEthic : two selectable four-pastel effects, original canvas grid unchanged */
.logo-art{position:relative;isolation:isolate;overflow:visible}
.logo-art img{position:relative;z-index:2;filter:brightness(0) invert(1)!important}
.form-head .title{color:#777!important}
.logo-nebula{position:absolute;left:-17%;right:-17%;top:-70%;bottom:-65%;z-index:0;pointer-events:none;opacity:0;border-radius:50%;overflow:hidden;filter:blur(19px);animation:oe-breathe 9s ease-in-out infinite alternate}
.logo-nebula span{position:absolute;top:11%;width:38%;height:78%;border-radius:50%;mix-blend-mode:screen;filter:blur(10px)}
.logo-nebula span:nth-child(1){left:1%;background:radial-gradient(ellipse at 75% 50%,#ae81e7b5 0%,#ae81e76b 35%,transparent 76%)}
.logo-nebula span:nth-child(2){left:22%;background:radial-gradient(ellipse at 50% 50%,#f2ad83ad 0%,#f2ad8365 38%,transparent 78%)}
.logo-nebula span:nth-child(3){left:43%;background:radial-gradient(ellipse at 50% 50%,#8fd7b0ae 0%,#8fd7b061 38%,transparent 78%)}
.logo-nebula span:nth-child(4){left:64%;background:radial-gradient(ellipse at 25% 50%,#f4d987b8 0%,#f4d9876b 35%,transparent 76%)}
body[data-effect=nebula] .logo-nebula{opacity:var(--fx-strength,.75)}
@keyframes oe-breathe{from{transform:scale(.96)}to{transform:scale(1.04)}}
.page{position:relative}
.fx-halo{position:absolute;left:7%;right:7%;bottom:-18px;height:65px;z-index:-1;opacity:0;pointer-events:none;border-radius:50%;background:linear-gradient(90deg,#ac78e9,#f5a478,#83d7a6,#f6d67b);filter:blur(22px)}
body[data-effect=halo] .fx-halo{opacity:var(--fx-strength,.75)}
.fx-switch{position:fixed;bottom:15px;right:15px;z-index:100;display:flex;align-items:center;gap:8px;padding:10px 12px;background:#24262beF;border:1px solid #44474e;border-radius:12px;color:#ddd;font:12px Arial,sans-serif}
.fx-switch button,#fxShow{background:#34373d;color:#ddd;border:0;border-radius:8px;padding:8px 10px;cursor:pointer}
.fx-switch button.active{background:#676b74;color:white}
.fx-switch input{width:75px;vertical-align:middle}
#fxShow{position:fixed;bottom:15px;right:15px;z-index:100}
[hidden]{display:none!important}
@media(max-width:650px){.fx-switch{left:10px;right:10px;flex-wrap:wrap;justify-content:center}}

/* Fixed final design: white heading, rounded four-colour nebula; no effects UI */
.form-head .title{color:#fff!important}
.logo-nebula{opacity:.75!important}
.fx-halo{opacity:0!important}

/* Typographie globale : Avenir (logo SVG conserve) */
:root{--ui-font:Avenir,"Segoe UI",Arial,sans-serif}
html,body,button,input,textarea,select{font-family:Avenir,"Segoe UI",Arial,sans-serif}

/* Crisp, unfiltered vector logo; nebula remains on separate background layer. */
.logo-art img{filter:none!important;opacity:1!important;transform:none!important;backdrop-filter:none!important;image-rendering:auto;mix-blend-mode:normal!important;}
.logo-art{filter:none!important;}

/* V3.42: logo SVG vivid gradient, original dark grey grid, no halo, single subtitle */
.logo-art img{filter:none!important;opacity:1!important}
.logo-nebula,.fx-halo,.fx-switch{display:none!important}
.form-head .title::after{content:none!important;display:none!important}
.form-head .title{color:#fff!important;background:none!important;-webkit-text-fill-color:#fff!important}

/* Final: unique subtitle below the white heading */
.form-head .title::after{content:"Appareillages orthopédiques sur-mesure"!important;display:block!important;font-family:Avenir,"Segoe UI",Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:#c3c7cc;margin-top:8px;-webkit-text-fill-color:#c3c7cc!important;background:none!important;}

/* V3.44 - Accueil anthracite, reference OrthEthic_Connexion_Gris_Sombre */
:root{--card:#30343a;--head:transparent;--field:#25282d;--accent:#d7dade;--text:#eef0f2;--muted:#9b9fa5;--placeholder:#858b92;--line:#555a61;--sep:rgba(255,255,255,.12);--field-radius:10px;--radius:20px}
html,body{background:#17191c!important;color:#eef0f2}
body{background:radial-gradient(circle at 50% 5%,#292c30 0%,#17191c 65%)!important}
.scene{position:relative;min-height:100vh;min-height:100dvh;isolation:isolate;background:transparent!important}
.scene::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 34% 26% at 50% 47%,rgba(245,248,255,.105) 0%,rgba(226,233,243,.055) 32%,transparent 78%),radial-gradient(ellipse 23% 32% at 54% 52%,rgba(255,255,255,.045),transparent 80%);filter:blur(28px);animation:orth-white-nebula 12s ease-in-out infinite alternate}
@keyframes orth-white-nebula{from{opacity:.7;transform:translate(-1%,1%) scale(.97)}to{opacity:1;transform:translate(1%,-1%) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.scene::before{animation:none}}
.bg-photo,.bg-photo::before,.bg-photo::after,#orth-bg{display:none!important}
.wrap{position:relative;z-index:1}
.page{position:relative;z-index:1}
.form-head{background:transparent!important}
.form-head .title{color:#e5e7e9!important;-webkit-text-fill-color:#e5e7e9!important}
.form-head .title::after{color:#9b9fa5!important;-webkit-text-fill-color:#9b9fa5!important}
.form-head .sub{color:#9b9fa5!important}
.card{background:#30343a!important;border:1px solid #41464d!important;box-shadow:0 18px 60px rgba(0,0,0,.2)!important;border-radius:20px!important}
.auth-tabs{background:#26292e!important}
.auth-tab{color:#a6abb2!important}
.auth-tab.active{background:#454a51!important;color:#fff!important}
.field{background:#25282d!important;border:1px solid #555a61!important;box-shadow:none!important;color:#f6f6f6!important;-webkit-text-fill-color:#f6f6f6!important}
.field:focus{border-color:#a4aab1!important;box-shadow:0 0 0 1px #a4aab1!important}
.field::placeholder{color:#858b92!important;-webkit-text-fill-color:#858b92!important}
.btn:not(.ghost){background:#d7dade!important;color:#24272b!important;box-shadow:none!important}
.btn:not(.ghost):hover{background:#f0f1f3!important}
.btn.ghost{border:1px solid #555a61!important;color:#c9cdd2!important}
.switch-link,.forgot,.contact-line a{color:#c9cdd2!important}
.logo-nebula,.fx-halo{display:none!important}

/* V3 - formulaire sans contours, typographie harmonisee */
.card{border:0!important}
.field,.field:focus,.field:focus-visible{border:0!important;outline:none!important;box-shadow:none!important}
.forgot{font-size:12px!important}
.actions-row .btn,#submit{font-size:13px!important}

/* Harmonisation des titres d'etapes d'inscription a 13 px */
.form-section,.step-head .form-section,.step-count{font-size:13px!important}

/* Palette gris froid des maquettes - conserve la structure et les contours supprimes */
:root{--card:#292e35;--field:#363c45;--accent:#d5d8de;--text:#f3f4f6;--placeholder:#a9b0ba;--line:#555d69}
html,body{background:#1b1f25!important;color:#f3f4f6}
body{background:radial-gradient(circle at 50% 5%,#292e35 0%,#1b1f25 65%)!important}
.card{background:#292e35!important;border:0!important}
.auth-tabs{background:#22272e!important}
.auth-tab.active{background:#555d69!important}
.field,.field:focus,.field:focus-visible{background:#363c45!important;border:0!important;outline:none!important;box-shadow:none!important}
.field::placeholder{color:#a9b0ba!important;-webkit-text-fill-color:#a9b0ba!important}
.btn:not(.ghost){background:#d5d8de!important;color:#24272b!important}
.form-head .title{color:#f3f4f6!important;-webkit-text-fill-color:#f3f4f6!important}

/* V3.45 - Slogans accueil */
.form-head .title::after{content:"scannez — modélisez — innovez"!important;display:block!important;font-family:Avenir,"Segoe UI",Arial,sans-serif!important;font-size:13px!important;font-weight:400!important;letter-spacing:1.5px!important;line-height:1.6!important;color:#b8bec7!important;-webkit-text-fill-color:#b8bec7!important;margin-top:16px!important;text-transform:none!important;white-space:normal!important;}
.form-head .title{font-size:29px;line-height:1.25;}
@media(max-width:650px){.form-head .title{font-size:24px}.form-head .title::after{font-size:12px!important;letter-spacing:1px!important}}

/* V3.45 - Slogans accueil */
.form-head .title::after{content:"scannez — modélisez — innovez"!important;display:block!important;font-family:Avenir,"Segoe UI",Arial,sans-serif!important;font-size:13px!important;font-weight:400!important;letter-spacing:1.5px!important;line-height:1.6!important;color:#b8bec7!important;-webkit-text-fill-color:#b8bec7!important;margin-top:16px!important;text-transform:none!important;white-space:normal!important;}
.form-head .title{font-size:29px;line-height:1.25;}
@media(max-width:650px){.form-head .title{font-size:24px}.form-head .title::after{font-size:12px!important;letter-spacing:1px!important}}

/* V3.46 - Slogans sur une ligne, desktop et smartphone */
.form-head .title{font-size:clamp(10px,2.8vw,20px)!important;line-height:1.3!important;letter-spacing:-.45px!important;white-space:nowrap!important;font-weight:600!important;}
.form-head .title::after{content:"Chaque courbe compte. Chaque patient inspire."!important;display:block!important;font-size:13px!important;letter-spacing:.45px!important;font-weight:400!important;line-height:1.5!important;margin-top:14px!important;white-space:nowrap!important;color:#b8bec7!important;-webkit-text-fill-color:#b8bec7!important;}
@media(max-width:650px){.form-head .title{font-size:clamp(9px,2.65vw,16px)!important;letter-spacing:-.45px!important}.form-head .title::after{font-size:clamp(9px,2.6vw,12px)!important;letter-spacing:0!important}}

/* Correctif : le sous-titre est deja present dans le HTML ; supprimer le doublon genere en CSS. */
.form-head .title::after{content:none!important;display:none!important;}

/* V3.47 - Titre mobile : utilise toute la largeur disponible du telephone. */
@media (max-width:650px){
 .form-head .title{
  position:relative!important;left:50%!important;transform:translateX(-50%)!important;
  width:calc(100vw - 16px)!important;max-width:none!important;
  margin-left:0!important;margin-right:0!important;
  font-size:clamp(12px,3.35vw,16px)!important;
  letter-spacing:-.55px!important;font-weight:600!important;
  white-space:nowrap!important;text-align:center!important;
 }
}

/* V3.54 — Logo blanc decoupe en 9 calques (une lettre par calque) ; animation pilotee par le script
   de fin de Accueil/index.php (mise au point du logo + phrases en particules, 3 s). */
.logo-focus{position:relative;display:block;width:100%;height:100%}
.logo-focus .oe-l{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}

/* V3.49 — Nebuleuse blanche retiree : fond uni en degrade anthracite. */
.scene::before{content:none!important;display:none!important;animation:none!important}

/* V3.54 — Intro : rien n'est affiche avant que le script ait prepare l'animation ;
   formulaire visible mais grise et inactif (attribut inert) jusqu'a la fin de l'intro. */
html.oe-js:not(.oe-intro-ready) .logo-focus,html.oe-js:not(.oe-intro-ready) .form-head .title,html.oe-js:not(.oe-intro-ready) .form-head .sub{visibility:hidden}
.form-head .oe-ch{display:inline-block;white-space:pre}
html.oe-js .card{transition:opacity .9s ease,filter .9s ease}
html.oe-js:not(.oe-form-on) .card{opacity:.42;filter:grayscale(1) brightness(.85);pointer-events:none;user-select:none}
@media(prefers-reduced-motion:reduce){html.oe-js .card{transition:none}}