/* ==========================================================================
   Compte Ibudo — composants propres à l'IdP.
   CANDIDATS AU DESIGN SYSTEM : à verser dans idl/system/extended.css
   (section « Compte Ibudo ») avec leur page catalogue, puis à retirer d'ici.
   Règles : jetons sémantiques uniquement, animations en transform/opacity,
   prefers-reduced-motion respecté, zones cliquables >= 40 px.
   ========================================================================== */

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,.display{text-wrap:balance}
p,.lead{text-wrap:pretty}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- Entrée décalée : les blocs arrivent un par un ---------- */
.enter>*{animation:cpt-rise var(--dur-4) var(--ease-out) both}
.enter>*:nth-child(2){animation-delay:70ms}
.enter>*:nth-child(3){animation-delay:140ms}
.enter>*:nth-child(4){animation-delay:210ms}
.enter>*:nth-child(5){animation-delay:280ms}
.enter>*:nth-child(6){animation-delay:350ms}
.enter>*:nth-child(n+7){animation-delay:420ms}
@keyframes cpt-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ==========================================================================
   Panneau de marque : système orbital
   ========================================================================== */
.auth-aside[data-theme="ink"]{background:var(--bg);gap:var(--s-5);padding-block:clamp(28px,4vh,48px)}
.orbit-sys{position:relative;width:min(100%,440px,44vh);aspect-ratio:1;margin:0 auto;isolation:isolate;--period:150s}
/* Les arcs tournent chacun à leur vitesse ; les planètes tournent ENSEMBLE,
   d'un seul bloc (.sky) : elles ne peuvent jamais se chevaucher. */
.orbit-sys .ring{position:absolute;inset:var(--inset);border-radius:50%}
.orbit-sys .ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:cpt-spin var(--arc) linear infinite}
.orbit-sys .ring circle{fill:none;stroke:var(--border-strong);stroke-width:1.2;vector-effect:non-scaling-stroke}
.orbit-sys .ring.r1{--inset:0%;--arc:90s}
.orbit-sys .ring.r2{--inset:15%;--arc:70s}
.orbit-sys .ring.r2 svg{animation-direction:reverse}
.orbit-sys .ring.r3{--inset:30%;--arc:55s}
.orbit-sys .sky{position:absolute;inset:0;animation:cpt-spin var(--period) linear infinite}
.orbit-sys .sky .lane{position:absolute;inset:var(--inset)}
.orbit-sys .orb{position:absolute;inset:0;transform:rotate(var(--a))}
.orbit-sys .tilt{position:absolute;left:50%;top:0;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)))}
.orbit-sys .planet{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:var(--r-pill);
  background:var(--surface);color:var(--text-muted);font-family:var(--font-display);font-weight:var(--fw-semi);font-size:var(--t-xs);
  white-space:nowrap;box-shadow:0 0 0 1px var(--border),var(--shadow-2);
  animation:cpt-spin var(--period) linear infinite reverse;
  transition-property:color,box-shadow;transition-duration:var(--dur-3)}
.orbit-sys .planet i{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:13px;font-style:normal;
  background:var(--surface-2);color:var(--text-faint);transition-property:background-color,color;transition-duration:var(--dur-3)}
/* L'application d'où l'on vient s'allume dans son accent. */
.orbit-sys .planet.is-current{color:var(--text);box-shadow:0 0 0 1.5px var(--accent),0 0 32px color-mix(in srgb,var(--accent) 45%,transparent)}
.orbit-sys .planet.is-current i{background:var(--accent);color:var(--on-accent)}
.orbit-sys .core{position:absolute;inset:38%;display:grid;place-items:center}
.orbit-sys .core::before{content:"";position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 38%,transparent),transparent);
  animation:cpt-breathe 6s var(--ease) infinite}
.orbit-sys .core svg{position:relative;width:100%;height:100%}
.orbit-sys .core .arc{fill:none;stroke:var(--text);stroke-width:7;stroke-linecap:round}
.orbit-sys .core .d1{fill:var(--a-red)}.orbit-sys .core .d2{fill:var(--a-yellow)}
.orbit-sys .core .d3{fill:var(--a-green)}.orbit-sys .core .d4{fill:var(--a-violet)}
@keyframes cpt-spin{to{transform:rotate(360deg)}}
@keyframes cpt-breathe{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}

.aside-copy{max-width:40ch}
.aside-copy .display{font-size:clamp(2rem,3.4vw,3rem);margin:var(--s-3) 0}
.aside-copy p{color:var(--text-muted)}
.aside-foot{display:flex;justify-content:space-between;gap:var(--s-4);color:var(--text-faint);font-size:var(--t-sm)}
.aside-foot a{color:inherit}
@media (max-width:820px){
  .auth-aside{gap:var(--s-5)}
  .orbit-sys,.aside-copy p,.aside-copy .overline,.aside-foot{display:none}
  .aside-copy .display{font-size:1.6rem;margin:var(--s-2) 0 0}
}

/* ---------- Contexte : « vous continuez vers engage.ibudo.co » ---------- */
.ctx-pill{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--text);font-size:var(--t-sm);margin-bottom:var(--s-6);max-width:100%}
.ctx-pill .mono{width:28px;height:28px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:13px}
.ctx-pill strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==========================================================================
   Champs
   ========================================================================== */
.auth-form .h2{margin-bottom:var(--s-2)}
.auth-form .sub{color:var(--text-muted);margin-bottom:var(--s-8)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media (max-width:480px){.field-row{grid-template-columns:1fr}}
.field .err{font-size:var(--t-xs);color:var(--color-feedback-danger);display:flex;gap:6px;align-items:center}
.field.is-error .input{border-color:var(--color-feedback-danger)}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
.label-row a{font-size:var(--t-sm);font-weight:var(--fw-med);color:var(--accent)}

/* Mot de passe : bouton « afficher » avec fondu croisé des deux icônes. */
.pw{position:relative}
.pw .input{padding-right:52px}
.pw-toggle{position:absolute;top:50%;right:6px;width:40px;height:40px;transform:translateY(-50%);border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--text-muted);cursor:pointer;display:grid;place-items:center}
.pw-toggle:hover{color:var(--text);background:var(--surface-2)}
.pw-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pw-toggle .ti{grid-area:1/1;font-size:20px;transition-property:opacity,transform,filter;transition-duration:var(--dur-2);
  transition-timing-function:cubic-bezier(.2,0,0,1)}
.pw-toggle .ti-eye-off,.pw-toggle[aria-pressed="true"] .ti-eye{opacity:0;transform:scale(.25);filter:blur(4px)}
.pw-toggle[aria-pressed="true"] .ti-eye-off{opacity:1;transform:none;filter:none}
.caps-hint{display:none;font-size:var(--t-xs);color:var(--text-muted);align-items:center;gap:6px}
.caps-hint.on{display:flex}

/* Robustesse du mot de passe : 4 segments. Le jaune reste une FORME, jamais du texte. */
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:2px}
.pw-meter i{height:4px;border-radius:var(--r-pill);background:var(--surface-2);transition-property:background-color;transition-duration:var(--dur-2)}
.pw-meter[data-level="1"] i:nth-child(-n+1){background:var(--a-red)}
.pw-meter[data-level="2"] i:nth-child(-n+2){background:var(--a-yellow)}
.pw-meter[data-level="3"] i:nth-child(-n+3){background:var(--a-green)}
.pw-meter[data-level="4"] i{background:var(--a-green)}
.pw-meter-label{font-size:var(--t-xs);color:var(--text-muted);min-height:1.2em}

/* Code à 6 chiffres (double authentification). */
.otp{display:flex;gap:8px;justify-content:space-between;margin:var(--s-2) 0 var(--s-6)}
.otp input{width:100%;max-width:56px;height:62px;padding:0;text-align:center;font-family:var(--font-display);font-size:1.6rem;
  font-weight:var(--fw-semi);font-variant-numeric:tabular-nums;color:var(--text);background:var(--surface-2);
  border:1.5px solid var(--border);border-radius:var(--r-sm);caret-color:var(--accent);
  transition-property:border-color,box-shadow,background-color,transform;transition-duration:var(--dur-2)}
.otp input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px var(--ring);background:var(--surface)}
.otp input.filled{background:var(--surface);border-color:var(--border-strong)}
.otp .sep{align-self:center;width:10px;height:2px;border-radius:2px;background:var(--border-strong);flex:0 0 auto}
.otp.is-error input{border-color:var(--color-feedback-danger);animation:cpt-shake .4s var(--ease)}
@keyframes cpt-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.btn-passkey{gap:10px}
.btn-passkey .ti{font-size:20px}
.btn[aria-busy="true"]{pointer-events:none;opacity:.7}
.form-foot{margin-top:var(--s-6);text-align:center;color:var(--text-muted);font-size:var(--t-sm)}
.form-foot a{color:var(--accent);font-weight:var(--fw-semi)}
.fine{font-size:var(--t-xs);color:var(--text-faint);margin-top:var(--s-6)}
.fine a{color:inherit;text-decoration:underline}

/* Écran de message (email envoyé, déconnecté, erreur). */
.msg-ill{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin:var(--s-4) 0 var(--s-6) 10px;
  background:var(--accent-soft);color:var(--accent);font-size:38px;position:relative}
.msg-ill::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--accent) 40%,transparent);
  animation:cpt-spin 30s linear infinite}

/* ==========================================================================
   Espace « Mon compte »
   ========================================================================== */
.app-shell .app-nav .brand img{height:24px}
.app-nav .who{display:flex;align-items:center;gap:10px;padding:var(--s-3);margin:var(--s-2) 0 var(--s-4);border-radius:var(--r-md);
  background:var(--surface-2)}
.app-nav .who b{display:block;font-size:var(--t-sm);line-height:1.2}
.app-nav .who small{display:block;font-size:var(--t-xs);color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.avatar.initials{background:var(--accent);color:var(--on-accent);font-family:var(--font-display);font-weight:var(--fw-bold)}
.page-head{margin-bottom:var(--s-8)}
.page-head .h2{margin:var(--s-2) 0}
.page-head p{color:var(--text-muted);max-width:60ch}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-4)}
.section-title .h4{display:flex;gap:10px;align-items:center}
.stack-gap{display:grid;gap:var(--s-6)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--s-6);align-items:start}

/* Déconnexion : un bouton de formulaire habillé comme les liens du menu. */
.app-nav .nav-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:var(--r-sm);background:none;
  font:inherit;font-size:var(--t-sm);font-weight:var(--fw-med);color:inherit;opacity:.8;cursor:pointer;text-align:left}
.app-nav .nav-btn:hover{opacity:1;background:var(--surface-2)}
.app-nav[data-theme="ink"]{background:var(--bg)}

/* Carte d'identité Ibudo : l'objet central de l'aperçu. */
.id-card{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:var(--s-8);background:var(--bg);color:var(--text);
  box-shadow:var(--shadow-3);min-height:250px;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-6)}
.id-card .rings{position:absolute;right:-18%;top:-40%;width:78%;aspect-ratio:1;pointer-events:none;opacity:.55}
.id-card .rings circle{fill:none;stroke:var(--border-strong);stroke-width:1}
.id-card .top{display:flex;justify-content:space-between;align-items:center;position:relative}
.id-card .top img{height:22px;filter:brightness(0) invert(1)}
.id-card .who{display:flex;gap:var(--s-5);align-items:center;position:relative}
.id-card .avatar{width:72px;height:72px;font-size:1.6rem;box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--accent)}
.id-card .name{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.1}
.id-card .mail{color:var(--text-muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px;word-break:break-all}
.id-card .meta{display:flex;gap:var(--s-8);flex-wrap:wrap;position:relative;font-size:var(--t-sm)}
.id-card .meta span{display:block;color:var(--text-faint);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.id-card .meta code{font-family:var(--font-mono);font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.verified{display:inline-flex;gap:5px;align-items:center;font-size:var(--t-xs);font-weight:var(--fw-semi);padding:3px 9px;border-radius:var(--r-pill);
  background:var(--color-feedback-success-soft);color:var(--text)}
.verified .ti{color:var(--color-feedback-success)}
.id-card .verified{background:color-mix(in srgb,var(--a-green) 18%,transparent);color:var(--text)}

/* Niveau de sécurité : anneau + liste de contrôle. */
.sec-score{display:flex;gap:var(--s-5);align-items:center}
.sec-score .progress-ring{width:84px;height:84px;flex:0 0 auto}
.sec-score .progress-ring b{font-size:var(--t-h4);font-variant-numeric:tabular-nums}
.sec-score .progress-ring .v{transition:stroke-dashoffset var(--dur-4) var(--ease-out)}
.checklist{list-style:none;padding:0;margin:var(--s-4) 0 0;display:grid;gap:var(--s-3)}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm)}
.checklist .ti{font-size:20px;flex:0 0 auto;color:var(--text-faint)}
.checklist li.ok .ti{color:var(--color-feedback-success)}
.checklist li.ok span{color:var(--text-muted)}
.checklist a{color:var(--accent);font-weight:var(--fw-semi)}

/* Applications connectées. */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--s-4)}
.app-tile{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5);border-radius:var(--r-lg);background:var(--surface-raised);
  box-shadow:0 0 0 1px var(--border),var(--shadow-1);transition-property:transform,box-shadow;transition-duration:var(--dur-2)}
.app-tile:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--accent),var(--shadow-2)}
.app-tile .hd{display:flex;gap:var(--s-3);align-items:center}
.app-mono{width:44px;height:44px;flex:0 0 auto;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.15rem}
.app-tile .hd b{display:block;font-family:var(--font-display)}
.app-tile .hd small{color:var(--text-faint);font-size:var(--t-xs)}
.app-tile .ft{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);font-size:var(--t-sm);color:var(--text-muted);margin-top:auto}

/* Appareils et sessions. */
.devices{display:grid}
.device{display:flex;gap:var(--s-4);align-items:center;padding:var(--s-4) 0;box-shadow:0 1px 0 var(--border)}
.device:last-child{box-shadow:none}
.device .ic{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:22px;color:var(--text-muted)}
.device.current .ic{background:var(--accent-soft);color:var(--accent)}
.device .tx{min-width:0;flex:1}
.device .tx b{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--t-sm)}
.device .tx small{display:block;color:var(--text-faint);font-size:var(--t-xs);font-variant-numeric:tabular-nums}

/* Journal d'activité. */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{position:relative;display:flex;gap:var(--s-3);padding:0 0 var(--s-5) 0}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:17px;top:38px;bottom:4px;width:1.5px;background:var(--border)}
.timeline .dot{width:36px;height:36px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--text-muted);font-size:18px}
.timeline li.alert .dot{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger)}
.timeline b{display:block;font-size:var(--t-sm);font-weight:var(--fw-semi);padding-top:2px}
.timeline small{color:var(--text-faint);font-size:var(--t-xs);font-variant-numeric:tabular-nums}

/* Secret montré une seule fois. */
.secret{display:flex;gap:var(--s-2);align-items:center;padding:6px 6px 6px var(--s-4);border-radius:var(--r-md);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--border)}
.secret code{flex:1;min-width:0;overflow-wrap:anywhere;font-family:var(--font-mono);font-size:var(--t-sm)}
.secret .btn{flex:0 0 auto;border-radius:calc(var(--r-md) - 6px)}

/* Codes de secours. */
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:var(--s-4);border-radius:var(--r-md);background:var(--surface-2);
  font-family:var(--font-mono);font-size:var(--t-sm);font-variant-numeric:tabular-nums;margin:var(--s-4) 0}
.codes span{padding:6px 10px;border-radius:calc(var(--r-md) - var(--s-4) + 4px);background:var(--surface)}

.qr{display:inline-grid;place-items:center;padding:var(--s-3);border-radius:var(--r-md);background:var(--surface);box-shadow:0 0 0 1px var(--border)}
.qr svg{width:176px;height:176px;display:block}

/* Zone sensible (suppression du compte). */
.danger-zone{border-radius:var(--r-lg);padding:var(--s-6);box-shadow:inset 0 0 0 1.5px var(--color-feedback-danger-soft);
  background:color-mix(in srgb,var(--color-feedback-danger-soft) 35%,var(--surface))}
.danger-zone .h4{color:var(--color-feedback-danger);display:flex;gap:8px;align-items:center}
.btn-danger{background:var(--color-feedback-danger);color:var(--on-accent)}
.btn-danger:hover{filter:brightness(.92)}

/* Consentement OAuth. */
.consent-apps{display:flex;align-items:center;justify-content:center;gap:var(--s-3);margin-bottom:var(--s-6)}
.consent-apps .link{display:flex;gap:5px}
.consent-apps .link i{width:5px;height:5px;border-radius:50%;background:var(--border-strong)}
.consent-apps .ibu{width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--bg-subtle);box-shadow:0 0 0 1px var(--border)}
.consent-apps .ibu img{width:32px}
.consent-apps .app-mono{width:56px;height:56px;border-radius:var(--r-md);font-size:1.4rem}
.scopes{list-style:none;padding:0;margin:0 0 var(--s-6);display:grid;gap:var(--s-3)}
.scopes li{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--surface-2);font-size:var(--t-sm)}
.scopes .ti{font-size:20px;color:var(--accent)}

/* Mouvement réduit : tout s'arrête, rien ne disparaît. */
@media (prefers-reduced-motion:reduce){
  .enter>*,.orbit-sys .ring svg,.orbit-sys .sky,.orbit-sys .planet,.orbit-sys .core::before,.msg-ill::after,.otp.is-error input{animation:none}
  .app-tile,.app-tile:hover{transform:none}
}