/* =====================================================================================================================
   Pinch · version 60 · Mon compte (carte Sécurité, fenêtre de la double authentification), mention des liens
   partenaires Drive, aide du mot de passe (page Connexion), accueil juste après le questionnaire.
   Couleurs : les variables du site (--paper, --carbon, --mint, --ember, --edge…), donc mode clair et sombre.
   ===================================================================================================================== */

/* ---------- Mon compte : 4 cartes (abonnement, sécurité, données, suppression) -> 2 × 2 sur ordinateur ---------- */
@media (min-width:981px){ .acz{grid-template-columns:repeat(2,minmax(0,1fr))} }
.acz-sec .sec-st{display:grid;gap:2px;margin:0}
.acz-sec [data-sec-etat]{font-size:15px}
.acz-sec [data-sec-etat][data-st="on"]{color:var(--mint);font-weight:700}
:root:not([data-theme="dark"]) .acz-sec [data-sec-etat][data-st="on"]{color:#0b7a46}
.acz-sec .note{margin:0;font-size:14px}

/* ---------- la fenêtre « Double authentification » ---------- */
#secModal{height:fit-content}
@media (max-width:640px){ #secModal{max-height:90vh;max-height:90dvh} }
@media (min-width:641px){ #secModal .sheet-grip{display:none} }
.modal-in.secm{display:flex;flex-direction:column;gap:12px}
.secm .modal-head .note{margin-top:6px;font-size:14px}
.secm-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;gap:14px;margin:0 -4px;padding:0 4px 4px;font-size:15px;line-height:1.45}
.secm-body p{margin:0}
.sec-steps{display:grid;gap:18px;margin:0;padding:0 0 0 24px;list-style:decimal outside}
.sec-steps li{display:list-item}
.sec-steps li{padding-left:4px}
.sec-steps li::marker{font-weight:800}
.sec-steps li>*+*{margin-top:10px}
.sec-steps .sec-qr,.sec-steps .sec-app{width:fit-content}
/* le QR code reste noir sur blanc (lisible par les appareils photo), même en mode sombre */
.sec-qr{display:grid;place-items:center;width:fit-content;padding:12px;border:1px solid var(--edge,var(--carbon));border-radius:16px;background:#fff}
.sec-qr img{display:block;width:196px;height:196px;image-rendering:pixelated}
.sec-app{white-space:normal;text-align:left}
@media (pointer:fine){ .sec-steps .sec-app,.sec-app{display:none} }   /* ordinateur : on scanne le QR code avec le téléphone */
.sec-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sec-key code{padding:8px 12px;border:1px dashed var(--edge,var(--carbon));border-radius:12px;font:700 15px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;word-break:break-all;user-select:all;-webkit-user-select:all}
.sec-l{display:block;font-size:15px}
.sec-steps .sec-code{display:block;margin-top:8px}
.sec-steps .sec-aide{margin-top:6px}
.sec-code.field{width:min(100%,220px);font:800 26px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.3em;text-align:center;padding-inline:12px}
.sec-code[aria-invalid="true"]{border-color:var(--ember);box-shadow:0 0 0 3px rgba(251,73,3,.18)}
.sec-aide{min-height:18px;font-weight:700;font-size:13px}
.sec-aide:empty{min-height:0}
.sec-aide.err{color:var(--ember)}
:root[data-theme="dark"] .sec-aide.err{color:#ff9b7a}
.sec-wait{display:flex;align-items:center;gap:12px;min-height:80px;font-weight:700}
.sec-ring{flex:none;width:28px;height:28px;border-radius:50%;border:3px solid var(--edge,var(--carbon));border-top-color:var(--sun);animation:secspin .8s linear infinite}
@keyframes secspin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){ .sec-ring{animation-duration:2.4s} }
.sec-err{font-weight:700;color:var(--ember)}
.sec-done b{display:block;font-size:17px}

/* ---------- Drive : la mention des liens partenaires, discrète, juste sous « Ouvrir … » ---------- */
.dr-affil{margin:-4px 0 0;font-size:12px;line-height:1.4;opacity:.72}

/* ---------- page Connexion (ancien formulaire) : l'aide des 12 caractères, sous le champ ---------- */
.pw-aide{margin:-6px 0 0 18px;font-weight:700;font-size:13px;line-height:1.35;opacity:.8}
.pw-aide.ok{color:#0b7a46;opacity:1}
:root[data-theme="dark"] .pw-aide.ok{color:var(--mint)}
.pw-aide.err{color:var(--ember);opacity:1}
#aPass[aria-invalid="true"]{border-color:var(--ember);box-shadow:0 0 0 3px rgba(251,73,3,.18)}

/* ---------- l'accueil juste après le questionnaire : le formulaire du lien TikTok s'illumine ---------- */
.linkform.lf-pret{border-radius:var(--r-pill);animation:lfpret 1.4s ease-out 3}
.linkform.lf-pret input{box-shadow:0 0 0 3px var(--sun,#ffd731)}
:root[data-theme="dark"] .linkform.lf-pret input{box-shadow:0 0 0 3px var(--fd-accent,#ffc837)}
@keyframes lfpret{0%{box-shadow:0 0 0 0 rgba(255,200,55,.55)}70%{box-shadow:0 0 0 18px rgba(255,200,55,0)}100%{box-shadow:0 0 0 0 rgba(255,200,55,0)}}
@media (prefers-reduced-motion:reduce){ .linkform.lf-pret{animation:none} }