/* ==========================================================================
   Module comptes — connexion, mot de passe, inscriptions (particulier, entreprise, vérification par code),
   Mon compte et ses sous-pages, Mon équipe et invitations, connexion par QR code, désinscription des alertes.
   Mise en page « Chantier » : composants de app.css + jetons sémantiques uniquement (docs/DESIGN.md).
   Aucune couleur ni police en dur, aucun [data-theme] : le thème change l'habillage, pas ce fichier.
   ========================================================================== */

/* ---------- 1. Tête de page, retour, mentions ---------- */
.cpt-tete { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); margin-bottom: var(--e-6); }
.cpt-tete h1 { font-size: var(--t-h1); max-width: 22ch; }
.cpt-tete .chapeau { margin-top: 0; font-size: 17px; line-height: 1.5; }
.cpt-tete .chapeau strong { color: var(--encre); }
.cpt-tete .surtitre { margin-bottom: calc(-1 * var(--e-1)); }
.lien-retour { display: inline-flex; align-items: center; gap: 8px; min-height: var(--cible); margin-top: calc(-1 * var(--e-3)); font-weight: var(--tres-gras); font-size: 15.5px; color: var(--encre-2); text-decoration: none; }
.lien-retour .ico { width: 18px; height: 18px; }
.lien-retour:hover { color: var(--encre); }
.a-la-cle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 15px; font-weight: var(--gras); color: var(--encre-2); }

.mention { font-size: 14.5px; line-height: 1.5; color: var(--encre-2); }
.mention a, .mention strong { color: var(--encre); font-weight: var(--tres-gras); }
.mention-icone { display: flex; align-items: flex-start; gap: 10px; }
.mention-icone > .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--encre); }
.lien-discret { display: inline-flex; align-items: center; min-height: var(--cible); font-size: 15.5px; font-weight: var(--tres-gras); color: var(--encre); text-underline-offset: 4px; }
.bas-de-page { margin-top: var(--e-6); }
.sans-coupure { white-space: nowrap; }
.mono-fort { font-family: var(--police-donnees); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }

/* ---------- 2. Blocs et formulaires ---------- */
.cpt-bloc { display: flex; flex-direction: column; gap: var(--e-5); padding: var(--e-6); }
.cpt-bloc > h2, .cpt-bloc-titre { font-size: 21px; }
@media (max-width: 759px) { .cpt-bloc { padding: var(--e-5) var(--e-4); } }
.cpt-formulaire { display: flex; flex-direction: column; gap: var(--e-5); }
.cpt-formulaire .btn-grand { width: 100%; white-space: normal; }
.cpt-lien-oublie { align-self: flex-end; margin-top: calc(-1 * var(--e-3)); }
.erreurs-formulaire { font-weight: var(--gras); }
.erreurs-formulaire ul, .erreurs-formulaire .erreur-champ { color: var(--danger-texte); }
.erreurs-formulaire > p { margin: 0; }
.champ-invalide .erreur-champ { margin: 2px 0 0; }
.champ-case { display: flex; flex-direction: column; gap: 2px; }
.champ-case .case { padding: 12px 14px; border: 1.5px solid var(--trait); border-radius: var(--r-champ); background: var(--surface-2); font-weight: var(--texte-graisse); line-height: 1.45; }
.champ-case .case a { font-weight: var(--tres-gras); color: var(--encre); }
.champ-case.champ-invalide .case { border-color: var(--danger-texte); }
.champ-ide { font-family: var(--police-donnees); font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.champ-ide::placeholder { font-family: var(--police-donnees); letter-spacing: .02em; }

/* Mot de passe avec « Afficher » (bouton dans le champ, 44 px) */
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 116px; }
.bouton-afficher {
    position: absolute; top: 4px; right: 4px; bottom: 4px; min-width: 100px; padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: max(0px, calc(var(--r-champ) - 3px)); background: var(--clair-fond-2); color: var(--clair-encre);
    font-weight: var(--tres-gras); font-size: 15px;
}
.bouton-afficher:hover { background: var(--clair-trait); }
.bouton-afficher[aria-pressed="true"] { background: var(--clair-encre); color: var(--clair-surface); }

/* ALTCHA (anti-robot) : habillage par jetons */
.bloc-altcha { display: flex; flex-direction: column; gap: 6px; }
altcha-widget {
    --altcha-border-radius: var(--r-champ);
    --altcha-border-width: 1.5px;
    --altcha-border-color: var(--trait-champ);
    --altcha-color-base: var(--surface);
    --altcha-color-base-content: var(--encre);
    --altcha-color-text: var(--encre);
    --altcha-color-border: var(--trait-champ);
    --altcha-color-border-focus: var(--focus);
    --altcha-color-footer-bg: var(--fond-2);
    --altcha-color-primary: var(--encre);
    --altcha-color-primary-content: var(--fond);
    --altcha-color-success: var(--succes-texte);
    --altcha-color-error-text: var(--danger-texte);
    --altcha-color-error: var(--danger-texte);
    --altcha-max-width: 100%;
    --altcha-checkbox-size: 24px;
    display: block;
    font-family: var(--police-texte);
}

/* ---------- 3. Cartes de choix (type de compte, moyen de vérification) ---------- */
.choix-inscription { display: grid; gap: var(--e-3); }
.choix-inscription > a {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
    min-height: 84px; padding: 14px 14px 14px 16px;
    border: 1.5px solid var(--trait-champ); border-radius: var(--r-carte); background: var(--surface); color: var(--encre);
    text-decoration: none; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.choix-inscription > a:hover { color: var(--encre); border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.choix-icone { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--r-moyen); background: var(--fond-2); color: var(--encre); transition: background-color .15s, color .15s; }
.choix-icone .ico { width: 24px; height: 24px; }
.choix-inscription > a:hover .choix-icone { background: var(--action); color: var(--action-encre); }
.choix-inscription strong { display: block; font-family: var(--police-titre); font-weight: var(--titre-graisse); font-stretch: var(--bouton-largeur); font-variation-settings: var(--titre-variation); font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.choix-inscription .detail { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.4; color: var(--encre-2); overflow-wrap: anywhere; }
.choix-inscription .detail.mono { font: var(--donnees-graisse) 13.5px/1.4 var(--police-donnees); }
.choix-inscription .chevron { display: grid; place-items: center; width: 32px; height: 32px; color: var(--encre-2); }
.choix-inscription .chevron .ico { width: 22px; height: 22px; }
.choix-verification { grid-template-columns: 1fr; }
/* Dans une zone sombre (panneau « Pas encore de compte ? ») */
.zone-sombre .choix-inscription > a { border-color: var(--trait); background: var(--surface); }
.zone-sombre .choix-inscription > a:hover { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); background: var(--surface-2); }
.zone-sombre .choix-icone { background: var(--action); color: var(--action-encre); }

/* ---------- 4. Connexion : formulaire + panneau « Pas encore de compte ? » ---------- */
.cpt-auth { display: grid; gap: var(--e-6); }
.cpt-auth-principal { display: flex; flex-direction: column; min-width: 0; }
.cpt-auth-panneau { display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-7) var(--e-6); border-radius: var(--r-bloc); }
.cpt-auth-panneau h2 { font-size: 24px; }
.cpt-auth-panneau > p { color: var(--encre-2); }
.cpt-auth-panneau .mention { color: var(--encre-2); }
.cpt-auth-panneau .mention a { color: var(--encre); }
@media (min-width: 960px) {
    .cpt-auth { grid-template-columns: minmax(0, 560px) minmax(0, 440px); justify-content: center; align-items: start; gap: var(--e-8); padding-top: var(--e-4); }
    .cpt-auth-panneau { position: sticky; top: calc(var(--h-entete) + var(--e-6)); margin-top: 0; }
}
@media (max-width: 759px) { .cpt-auth-panneau { padding: var(--e-6) var(--e-4); } }
/* Mobile : « Pas encore de compte ? » au-dessus du formulaire (même bloc que le panneau de droite du bureau). */
.cpt-auth-panneau-mobile { margin-bottom: var(--e-6); }
@media (max-width: 959px) { .cpt-auth-panneau-bureau { display: none; } }
@media (min-width: 960px) { .cpt-auth-panneau-mobile { display: none; } }
/* Bandeau « Connecte-toi pour publier / voir le contact / créer une alerte » (page d'origine mémorisée) */
.cpt-contexte { align-self: stretch; }
.cpt-contexte a { white-space: nowrap; }
.qr-astuce { margin-top: var(--e-4); padding: 14px 16px; border: 1px dashed var(--trait-fort); border-radius: var(--r-moyen); }
.qr-astuce > .ico { color: var(--encre); }

/* ---------- 5. Inscription : progression et sections numérotées ---------- */
.progression-texte { font-weight: var(--donnees-graisse); }
.cpt-progression { margin: var(--e-2) 0 var(--e-6); }
.cpt-etapes { display: flex; flex-direction: column; gap: var(--e-3); }
.section-etape { display: flex; flex-direction: column; gap: var(--e-5); }
.section-etape.en-cours { padding: var(--e-6); border-color: var(--trait-fort); border-top: 4px solid var(--action); box-shadow: var(--ombre-1); }
.section-etape.fait { padding: var(--e-4); background: var(--surface-2); }
.section-etape.a-venir { padding: var(--e-4); background: transparent; border-style: dashed; border-color: var(--trait-fort); color: var(--encre-2); }
@media (max-width: 759px) { .section-etape.en-cours { padding: var(--e-5) var(--e-4); } }
.titre-etape { display: flex; align-items: center; gap: 12px; font-size: 22px; line-height: 1.15; }
.section-etape.fait .titre-etape, .section-etape.a-venir .titre-etape { font-size: 17px; }
.section-etape.a-venir .titre-etape { color: var(--encre-2); }
.pastille-etape {
    display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--r-petit);
    background: var(--action); color: var(--action-encre); font: 800 15px/1 var(--police-donnees); letter-spacing: 0;
}
.pastille-etape .ico { width: 18px; height: 18px; stroke-width: calc(var(--ico-trait) + .6px); }
.pastille-faite { width: 28px; height: 28px; background: var(--encre); color: var(--fond); }
.pastille-a-venir { width: 28px; height: 28px; background: transparent; color: var(--encre-2); box-shadow: inset 0 0 0 1.5px var(--trait-champ); }
.resume-etape { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.section-etape.fait { gap: var(--e-2); }
.resume-etape-texte { padding-left: 40px; font-size: 14.5px; line-height: 1.5; color: var(--encre-2); overflow-wrap: anywhere; }
.resume-etape-texte strong { color: var(--encre); }
.resume-etape-texte .mono { font-size: 13.5px; color: var(--encre); }
.lien-modifier { margin: -6px -8px -6px 0; }

/* Résultat du registre IDE */
.resultat-ide { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-moyen); border-left: 4px solid var(--succes); background: var(--succes-fond); color: var(--encre); }
.resultat-ide-icone { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: var(--r-petit); background: var(--succes-texte); color: var(--succes-fond); }
.resultat-ide-icone .ico { width: 18px; height: 18px; stroke-width: calc(var(--ico-trait) + .6px); }
.resultat-ide-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resultat-ide-texte strong { font-size: 16px; color: var(--succes-texte); }
.resultat-ide-texte span { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.resultat-ide.manuel { border-left-color: var(--attention); background: var(--attention-fond); }
.resultat-ide.manuel .resultat-ide-icone { background: var(--attention-texte); color: var(--attention-fond); }
.resultat-ide.manuel .resultat-ide-texte strong { color: var(--attention-texte); }

/* Destinataire du code (e-mail) */
.destinataire-code { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--trait); border-radius: var(--r-moyen); background: var(--surface-2); font-size: 15.5px; line-height: 1.45; }
.destinataire-code-icone { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--r-moyen); background: var(--encre); color: var(--fond); }
.destinataire-code-icone .ico { width: 22px; height: 22px; }
.destinataire-code strong { font-family: var(--police-donnees); font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.autre-moyen { align-self: flex-start; }

/* ---------- 6. Code à 6 chiffres ---------- */
.cases-code { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 10px repeat(3, minmax(0, 1fr)); align-items: center; gap: 8px; max-width: 420px; }
.cases-code-tiret { height: 3px; border-radius: 2px; background: var(--trait-fort); }
.cases-code input {
    width: 100%; min-width: 0; height: 64px; min-height: 64px; padding: 0;
    text-align: center; caret-color: var(--action); border: 2px solid var(--clair-trait-champ); border-radius: var(--r-champ);
    background-color: var(--clair-surface); color: var(--clair-encre);
    font: 800 30px/1 var(--police-donnees); font-variant-numeric: tabular-nums;
}
.cases-code input:not(:placeholder-shown) { border-color: var(--clair-encre); background-color: var(--clair-surface-2); }
.cases-code input:focus-visible { border-color: var(--clair-focus); box-shadow: 0 0 0 3px var(--clair-focus); background-color: var(--clair-surface); }
.champ-invalide .cases-code input { border-color: var(--danger-texte); }
@media (max-width: 380px) { .cases-code { gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)) 6px repeat(3, minmax(0, 1fr)); } .cases-code input { height: 58px; min-height: 58px; font-size: 26px; } }
.envoye-a { font-size: 14.5px; line-height: 1.5; color: var(--encre-2); }
.envoye-a strong { font-family: var(--police-donnees); font-weight: 700; color: var(--encre); overflow-wrap: anywhere; }
.envoye-a .mono { color: var(--encre); font-weight: 700; white-space: nowrap; }
.renvoi-zone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); padding-top: var(--e-4); border-top: 1px dashed var(--trait-fort); }
.renvoi { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.erreur-champ .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* ---------- 7. Mon compte ---------- */
.cpt-tableau { display: grid; gap: var(--e-4); }
.cpt-colonne { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
@media (min-width: 1100px) {
    .cpt-tableau { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: var(--e-6); }
}
.carte-compte { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.carte-compte.bloc { padding: var(--e-6); }
@media (max-width: 759px) { .carte-compte.bloc { padding: var(--e-5) var(--e-4); } }
.carte-compte h2 { display: flex; align-items: center; gap: 12px; font-size: 21px; }
.icone-titre { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-moyen); background: var(--sombre); color: var(--action-sur-sombre); }
.icone-titre .ico { width: 22px; height: 22px; }
.carte-compte > .btn, .carte-compte form > .btn { align-self: flex-start; }

/* Carte de membre (identité) : zone sombre */
.cpt-identite { gap: var(--e-5); padding: var(--e-6); border-radius: var(--r-bloc); }
@media (max-width: 759px) { .cpt-identite { padding: var(--e-5) var(--e-4); } }
.identite { display: flex; align-items: center; gap: 16px; min-width: 0; }
.avatar {
    display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: var(--r-moyen);
    background: var(--action); color: var(--action-encre); font: 800 22px/1 var(--police-donnees); letter-spacing: -.02em;
}
.avatar-petit { width: 44px; height: 44px; font-size: 16px; }
.identite > div { min-width: 0; }
.identite-nom { font-family: var(--police-titre); font-weight: var(--titre-graisse); font-stretch: var(--titre-largeur); font-variation-settings: var(--titre-variation); font-size: 24px; line-height: 1.12; letter-spacing: -.02em; overflow-wrap: anywhere; }
.identite-email { margin-top: 4px; font: var(--donnees-graisse) 14px/1.4 var(--police-donnees); color: var(--encre-2); overflow-wrap: anywhere; }
.cpt-identite .encadre { margin-top: calc(-1 * var(--e-1)); }

/* Relevé « libellé ....... valeur » */
.liste-infos { display: grid; margin: 0; border-top: 1.5px solid var(--encre); }
.liste-infos > div { display: grid; grid-template-columns: auto minmax(14px, 1fr) auto; align-items: baseline; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--releve-filet); }
.liste-infos > div::before { content: ""; grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 5px; border-bottom: 2px dotted var(--releve-pointille); }
.liste-infos dt { grid-column: 1; grid-row: 1; font: var(--donnees-graisse) 13px/1.3 var(--police-libelle); color: var(--encre-2); text-transform: var(--libelle-casse); white-space: nowrap; }
.liste-infos dd { grid-column: 3; grid-row: 1; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; font-weight: var(--gras); font-size: 15px; line-height: 1.35; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.liste-infos dd.mono { font-family: var(--police-donnees); font-weight: 700; font-size: 14.5px; }
.zone-sombre .liste-infos > div { border-bottom-color: var(--trait); }
.zone-sombre .liste-infos > div::before { opacity: .45; }
@media (max-width: 420px) { .liste-infos > div { grid-template-columns: auto minmax(10px, 1fr) auto; } .liste-infos dd { max-width: 70vw; } }

/* Entreprise */
.cpt-entreprise-nom { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cpt-entreprise-nom .identite-nom { font-size: 21px; }

/* Raccourcis (tuiles) */
.raccourcis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 10px; }
.raccourci {
    display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px 8px 10px;
    border: 1px solid var(--trait); border-radius: var(--r-carte); background: var(--surface); color: var(--encre);
    font-weight: var(--tres-gras); line-height: 1.2; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.raccourci:hover { color: var(--encre); border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.raccourci-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-moyen); background: var(--fond-2); color: var(--encre); }
.raccourci-ico .ico { width: 21px; height: 21px; }
.raccourci:hover .raccourci-ico { background: var(--action); color: var(--action-encre); }
.raccourci .compteur { margin-left: auto; min-width: 30px; height: 26px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: var(--r-etiquette); background: var(--encre); color: var(--fond); font: 700 13.5px/1 var(--police-donnees); }
.raccourci-principal { border-color: var(--encre); }

/* Téléphone (connexion par QR) */
.bloc-telephone-contenu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4); }
.bloc-telephone-texte { flex: 1 1 300px; display: flex; flex-direction: column; gap: 8px; }
.bloc-telephone-texte > p { color: var(--encre-2); }
.bloc-telephone .btn { flex: 0 0 auto; }
.qr-recentes { display: flex; flex-direction: column; gap: 8px; padding-top: var(--e-4); border-top: 1px solid var(--trait); }
.qr-recentes h3 { font-size: 16px; }
.liste-qr { list-style: none; margin: 0; padding: 0; }
.liste-qr li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 9px 0; border-top: 1px solid var(--releve-filet); font-weight: var(--gras); font-size: 15px; }
.liste-qr li:first-child { border-top: 0; }
.liste-qr li .texte-doux { font: var(--donnees-graisse) 13px/1.3 var(--police-donnees); }

/* Apparence (choix du thème, composant système) */
.cpt-apparence .choix-theme { display: block; }
.cpt-apparence .choix-theme-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cpt-apparence .choix-theme-options { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cpt-apparence .choix-theme button { width: 100%; min-height: 60px; padding: 8px 14px 8px 10px; gap: 12px; background: var(--surface); }
.cpt-apparence .choix-theme button > span:not(.pastille-theme) { flex: 1; }
.cpt-apparence .choix-theme button small { margin-top: 2px; font-size: 13.5px; line-height: 1.3; }
.cpt-apparence .pastille-theme { width: 36px; height: 36px; border-radius: var(--r-petit); }
.cpt-apparence .pastille-theme::before { left: 7px; right: 7px; bottom: 7px; height: 9px; }
.cpt-apparence .pastille-theme::after { left: 7px; top: 7px; width: 12px; height: 9px; }
@media (min-width: 760px) and (max-width: 1099px) { .cpt-apparence .choix-theme-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Dépliant (Changer mon mot de passe, Pas d'appareil photo ?) */
details.depliant { border-top: 1px solid var(--trait); }
details.depliant > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; font-weight: var(--tres-gras); font-size: 16.5px; cursor: pointer; list-style: none; }
details.depliant > summary::-webkit-details-marker { display: none; }
details.depliant > summary::after { content: ""; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
details.depliant[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.depliant[open] > summary { margin-bottom: var(--e-3); }
details.depliant > .cpt-formulaire, details.depliant > .pile-serree { padding-bottom: var(--e-3); }
.btn-deconnexion { align-self: flex-start; }

/* Zone sensible (suppression, confirmations) */
.zone-sensible { border-color: var(--trait); border-top: 4px solid var(--danger); }
.zone-sensible h2 { color: var(--danger-texte); }
.zone-sensible .icone-titre { background: var(--danger-fond); color: var(--danger-texte); }
.liste-consequences { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.liste-consequences li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.liste-consequences li > .ico { width: 30px; height: 30px; padding: 6px; flex: none; border-radius: var(--r-petit); background: var(--fond-2); color: var(--encre); }
.liste-consequences li.csq-non > .ico { background: var(--danger-fond); color: var(--danger-texte); }
.liste-consequences li.csq-oui > .ico { background: var(--succes-fond); color: var(--succes-texte); }
.liste-consequences li.csq-attention > .ico { background: var(--attention-fond); color: var(--attention-texte); }
.liste-consequences li > span { padding-top: 3px; }
.cpt-choix-final { display: flex; flex-direction: column; gap: var(--e-3); }
.cpt-choix-final .btn { width: 100%; white-space: normal; }
@media (min-width: 760px) { .cpt-choix-final { flex-direction: row; flex-wrap: wrap; } .cpt-choix-final .btn { width: auto; } }

/* Suggestion « Invite ton équipe » */
.suggestion-equipe { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4); border-color: var(--encre); border-left: 4px solid var(--action); }
.suggestion-equipe-texte { flex: 1 1 280px; display: flex; flex-direction: column; gap: 6px; }
.suggestion-equipe-texte p { color: var(--encre-2); }
.suggestion-equipe .btn { flex: 0 0 auto; }
.a-verifier { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* ---------- 8. Mon équipe ---------- */
.equipe-titre { display: flex; flex-direction: column; gap: var(--e-3); }
.equipe-titre h2 { flex-wrap: wrap; }
.compteur-titre { display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 8px; border-radius: var(--r-etiquette); background: var(--encre); color: var(--fond); font: 700 14px/1 var(--police-donnees); letter-spacing: 0; }
.cpt-usage { display: flex; flex-direction: column; gap: 6px; }
.cpt-usage p { font: var(--donnees-graisse) 13.5px/1.4 var(--police-donnees); color: var(--encre-2); }
.cpt-jauge { position: relative; height: 8px; border-radius: 4px; background: var(--fond-2); box-shadow: inset 0 0 0 1px var(--trait); overflow: hidden; }
.cpt-jauge > span { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--encre); }
.cpt-jauge.est-pleine > span { background: var(--attention); }
.cpt-jauge.illimitee > span { width: 100%; background: repeating-linear-gradient(135deg, var(--succes-fond) 0 8px, var(--surface-2) 8px 16px); }
.badge-responsable { background: var(--encre); color: var(--fond); }
.liste-membres { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .liste-membres-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); } }
.membre { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: var(--e-4); border: 1px solid var(--trait); border-radius: var(--r-carte); background: var(--surface); }
.membre-inactif { background: var(--surface-2); border-style: dashed; border-color: var(--trait-fort); }
.membre-inactif .avatar { background: var(--fond-2); color: var(--encre-2); box-shadow: inset 0 0 0 1.5px var(--trait-champ); }
.membre-tete { display: flex; align-items: center; gap: 12px; min-width: 0; }
.membre-identite { min-width: 0; }
.membre-nom { font-weight: var(--tres-gras); font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.membre-nom .texte-doux { font-weight: var(--texte-graisse); }
.membre-email { margin-top: 2px; font: var(--donnees-graisse) 0.875rem/1.35 var(--police-donnees); color: var(--encre-2); overflow-wrap: anywhere; }
.membre-email-seul { font-family: var(--police-donnees); font-weight: 700; font-size: 15.5px; overflow-wrap: anywhere; }
.membre-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.membre-connexion { font: var(--donnees-graisse) 0.875rem/1.4 var(--police-donnees); color: var(--encre-2); }
.membre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--trait-fort); }
.membre-actions form { margin: 0; }
.membre-actions > p { flex-basis: 100%; }
.membre .liste-infos { border-top-width: 1px; border-top-color: var(--trait); }
.membre .liste-infos > div { padding: 8px 0; }
.tuiles-role { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.tuile .tuile-aide { font-weight: var(--texte-graisse); font-size: 14px; line-height: 1.4; color: var(--encre-2); }
.tuiles-role .tuile { min-height: 84px; padding: 14px 16px; }
.equipe-formulaire[disabled] .tuile { cursor: not-allowed; background: var(--fond-2); border-style: dashed; color: var(--encre-2); box-shadow: none; }
.equipe-formulaire[disabled] .btn { background: var(--fond-2); color: var(--encre-2); border-color: var(--trait); cursor: not-allowed; transform: none; }
.limite-equipe a { font-weight: var(--tres-gras); }
.legende-champ { margin-bottom: 6px; padding: 0; font-size: 15px; font-weight: var(--tres-gras); }

/* Invitation reçue : fiche de l'entreprise */
.invitation-entreprise { display: flex; align-items: flex-start; gap: 14px; padding: var(--e-4); border: 1px solid var(--trait); border-radius: var(--r-carte); background: var(--surface-2); }
.invitation-icone { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--r-moyen); background: var(--sombre); color: var(--action-sur-sombre); }
.invitation-icone .ico { width: 24px; height: 24px; }
.invitation-entreprise .identite-nom { font-size: 20px; }
.invitation-carte input[readonly] { background-color: var(--clair-fond-2); color: var(--clair-encre); font-family: var(--police-donnees); font-weight: 700; }

/* ---------- 9. Pages de refus / de fin (invitation, QR) ---------- */
.cpt-message { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); padding: var(--e-7) var(--e-6); }
.cpt-message h1 { font-size: clamp(26px, 5vw, 34px); }
.cpt-message > p { font-size: 17px; color: var(--encre-2); max-width: 36em; }
.cpt-message-icone { display: grid; place-items: center; width: 60px; height: 60px; border-radius: var(--r-moyen); background: var(--attention-fond); color: var(--attention-texte); }
.cpt-message-icone .ico { width: 30px; height: 30px; }
@media (max-width: 759px) { .cpt-message { padding: var(--e-6) var(--e-4); } .cpt-message .btn { width: 100%; white-space: normal; } }
.qr-question { font-size: 19px; line-height: 1.45; }

/* ---------- 10. Connexion par QR code (« Ouvrir sur mon téléphone ») ---------- */
.qr-grille { display: grid; gap: var(--e-4); }
@media (min-width: 900px) { .qr-grille { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: start; gap: var(--e-6); } }
.qr-carte { display: flex; flex-direction: column; align-items: center; gap: var(--e-4); padding: var(--e-6); text-align: center; }
@media (max-width: 759px) { .qr-carte { padding: var(--e-5) var(--e-4); } }
/* Le QR code reste noir sur clair dans tous les thèmes (lecture par l'appareil photo) */
.qr-zone { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 10px; border-radius: var(--r-carte); background-color: var(--clair-surface); color: var(--clair-encre); box-shadow: inset 0 0 0 1px var(--clair-trait); }
.qr-zone::before {
    content: ""; position: absolute; inset: -6px; pointer-events: none; border-radius: calc(var(--r-carte) + 4px);
    background:
        linear-gradient(var(--action), var(--action)) 0 0 / 34px 4px no-repeat, linear-gradient(var(--action), var(--action)) 0 0 / 4px 34px no-repeat,
        linear-gradient(var(--action), var(--action)) 100% 0 / 34px 4px no-repeat, linear-gradient(var(--action), var(--action)) 100% 0 / 4px 34px no-repeat,
        linear-gradient(var(--action), var(--action)) 0 100% / 34px 4px no-repeat, linear-gradient(var(--action), var(--action)) 0 100% / 4px 34px no-repeat,
        linear-gradient(var(--action), var(--action)) 100% 100% / 34px 4px no-repeat, linear-gradient(var(--action), var(--action)) 100% 100% / 4px 34px no-repeat;
}
.qr-image { width: 100%; height: 100%; }
.qr-image svg { display: block; width: 100%; height: 100%; }
.qr-zone-utilise { background-color: var(--succes-fond); box-shadow: inset 0 0 0 2px var(--succes); }
.qr-zone-utilise::before, .qr-zone-expire::before { display: none; }
.qr-zone-expire { background-color: var(--clair-fond-2); box-shadow: inset 0 0 0 2px var(--clair-trait-fort); }
.qr-fin { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--e-4); }
.qr-fin-titre { font-family: var(--police-titre); font-weight: var(--titre-graisse); font-stretch: var(--titre-largeur); font-variation-settings: var(--titre-variation); font-size: 26px; line-height: 1.1; }
.qr-fin-icone { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: var(--r-moyen); background: var(--attention-texte); color: var(--attention-fond); }
.qr-fin-ok { background: var(--succes-texte); color: var(--succes-fond); }
.qr-statut { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; min-height: 28px; margin: 0; font-weight: var(--tres-gras); }
.qr-statut-ok { color: var(--succes-texte); font-size: 17px; }
.qr-statut-ok span { font-weight: var(--gras); color: var(--encre-2); }
.qr-statut-expire { color: var(--danger-texte); }
.qr-pulsation { position: relative; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--action); }
.qr-pulsation::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--action); animation: qr-pulsation 1.6s ease-out infinite; }
@keyframes qr-pulsation { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qr-pulsation::after { animation: none; } }
.qr-delai { margin: 0; font-size: 15px; color: var(--encre-2); }
.qr-delai strong { font: 800 22px/1 var(--police-donnees); font-variant-numeric: tabular-nums; color: var(--encre); vertical-align: -2px; }
.qr-aide { display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-6); }
@media (max-width: 759px) { .qr-aide { padding: var(--e-5) var(--e-4); } }
.qr-aide h2 { font-size: 22px; }
.qr-etapes { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: qr; font-size: 16.5px; line-height: 1.45; }
.qr-etapes li { counter-increment: qr; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.qr-etapes li::before { content: counter(qr, decimal-leading-zero); display: grid; place-items: center; width: 32px; height: 28px; border-radius: var(--r-petit); background: var(--sombre); color: var(--action-sur-sombre); font: 700 13px/1 var(--police-donnees); }
.qr-lien code { display: block; padding: 12px 14px; border: 1px solid var(--trait); border-radius: var(--r-moyen); background: var(--surface-2); font-size: 13px; line-height: 1.45; word-break: break-all; user-select: all; }
.qr-copier { align-self: flex-start; }
.qr-astuce-bloc { margin-top: auto; }
.cpt-formulaire .grille-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Sécurité du compte : double authentification (admins), appareils connectés */
.qr-2fa { max-width: 260px; margin: 6px 6px var(--e-4); }
.codes-secours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 0 0 var(--e-4); padding-left: 1.6em; font-size: 18px; }
.cpt-appareils { display: flex; flex-direction: column; gap: 8px; padding-top: var(--e-4); border-top: 1px solid var(--trait); }
.cpt-appareils form { margin: 0; }

/* Mon compte : actions de la carte d'identité, contact sur les annonces (juridique) */
.cpt-identite-actions { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.cpt-coordonnees-perso { gap: var(--e-3); margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--trait); }

/* Résumé des erreurs d'un formulaire renvoyé par le serveur (inscription.js) */
.cpt-resume-erreurs { margin-bottom: var(--e-2); }
.cpt-resume-erreurs-liste { display: grid; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; }
.cpt-resume-erreurs-liste a { display: inline-flex; align-items: center; min-height: var(--cible); color: var(--danger-texte); font-weight: var(--tres-gras); }