/* Réglages : informations personnelles et préférences d'alertes.
   Reprend l'ossature de tableau-de-bord.css (.app, .rail, .zone, .carte)
   et n'ajoute que ce qui lui est propre : les onglets, les lignes
   modifiables et les bascules de familles. */

/* Même colonne centrée que les cartes et les onglets juste en dessous
   (voir plus bas) : sans ce max-width, le titre courait bord à bord
   pendant que le contenu, lui, restait resserré au milieu -- deux
   largeurs différentes sur une même page. */
.reglages__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  max-width: var(--largeur-bandeau);
  margin: 0 auto var(--space-lg);
}
.reglages__actions { display: flex; align-items: center; gap: var(--space-sm); flex: 0 0 auto; }

/* Même parti pris que la barre latérale : une section qui n'existe pas
   encore le dit, plutôt que d'offrir un bouton qui tomberait dans le
   vide (principe 8, appliqué à l'interface). */
.reglages__futur {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-button-utility-size);
  color: var(--ink-muted-48);
  cursor: not-allowed;
}
.reglages__bientot {
  font-size: var(--text-micro-size);
  color: var(--ink-muted-80);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  white-space: nowrap;
}

/* ─────────────────────────── Onglets ─────────────────────────── */
/* Un seul groupe posé sur une piste claire : l'onglet actif est plein,
   les autres restent muets. Pas de soulignement, qui se confondrait
   avec les liens de la page. */
.onglets {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--canvas);
  box-shadow: var(--ring-hairline, inset 0 0 0 1px rgba(25,20,62,.10));
}
.onglet {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-button-utility-size);
  font-weight: var(--text-button-utility-weight);
  color: var(--ink-muted-80);
  background: transparent;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.onglet:hover { color: var(--brand-1); }
.onglet--actif { background: var(--brand-gradient-diag); color: var(--on-dark); }
.onglet--actif:hover { color: var(--on-dark); }
.onglet:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }

/* Colonne centrée plutôt que collée à gauche : sur un écran large, une
   carte de 720px alignée à gauche laissait la moitié droite vide. */
.onglets, .reglages__carte, #panneau-notifications > .avis-honnete {
  margin-left: auto;
  margin-right: auto;
}
.onglets { display: flex; width: max-content; }
.reglages__carte { max-width: var(--largeur-bandeau); margin-bottom: var(--space-lg); }
#panneau-notifications > .avis-honnete { max-width: var(--largeur-bandeau); }

.reglages__retirer-protege {
  margin-top: var(--space-lg);
  color: var(--signal-critique);
}
.reglages__retirer-protege:hover { background: var(--signal-critique-tint); color: var(--signal-critique); box-shadow: none; }

/* Un dessin par carte : il dit de quoi parle la section avant qu'on
   ait lu le titre. Purement décoratif, donc aria-hidden côté HTML. */
.carte__tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
}
.carte__dessin { flex: 0 0 auto; margin-top: -6px; }
@media (max-width: 680px) { .carte__dessin { display: none; } }

/* ───────────────────── Lignes modifiables ───────────────────── */
/* Même anatomie que la référence : pictogramme, libellé, valeur, et le
   bouton de modification à droite. L'édition se fait sur place, la
   ligne ne change jamais de hauteur brutalement. */
.reglages { display: flex; flex-direction: column; }

.reglage {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--divider-soft);
}
.reglage:last-child { border-bottom: 0; padding-bottom: 0; }
.reglage:first-child { padding-top: 0; }

.reglage__icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--action-tint);
  color: var(--action);
}
.reglage__corps { flex: 1 1 auto; min-width: 0; }
.reglage__label {
  margin: 0;
  font-size: var(--text-caption-size);
  color: var(--ink-muted-80);
}
.reglage__valeur {
  margin: 2px 0 0;
  font-size: var(--text-body-strong-size);
  font-weight: var(--text-body-strong-weight);
  color: var(--brand-1);
  overflow-wrap: anywhere;
}
.reglage__valeur--vide { color: var(--ink-muted-48); font-weight: 400; }

/* Une valeur qu'on ne peut pas changer ici le dit, plutôt que d'offrir
   un bouton qui n'aboutirait nulle part. */
.reglage__fige {
  margin: 4px 0 0;
  font-size: var(--text-fine-size);
  color: var(--ink-muted-80);
}

.reglage__modifier {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-button-utility-size);
  color: var(--action);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.reglage__modifier:hover { border-color: var(--action); background: var(--action-tint); }
.reglage__modifier:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }

.reglage__edition { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); }
.reglage__edition[hidden] { display: none; }
.reglage__duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
.reglage__actions { display: flex; gap: var(--space-sm); }
.reglage__erreur {
  margin: 0;
  font-size: var(--text-caption-size);
  color: var(--signal-critique);
}
.reglage__erreur[hidden] { display: none; }

/* ───────────────────── Familles d'alertes ───────────────────── */

.avis-honnete {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--signal-vigilance-tint);
  font-size: var(--text-caption-size);
  line-height: 1.5;
  color: var(--ink-muted-80);
}
.avis-honnete svg { flex: 0 0 auto; margin-top: 2px; color: var(--signal-vigilance); }

.familles { display: flex; flex-direction: column; }

.famille {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--divider-soft);
}
.famille:last-child { border-bottom: 0; padding-bottom: 0; }
.famille:first-child { padding-top: 0; }

.famille__corps { flex: 1 1 auto; min-width: 0; }
.famille__nom {
  margin: 0;
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  color: var(--brand-1);
}
.famille__detail {
  margin: 3px 0 0;
  font-size: var(--text-caption-size);
  line-height: 1.5;
  color: var(--ink-muted-80);
}
.famille__compte {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  background: var(--action-tint);
  color: var(--brand-4);
  font-size: var(--text-fine-size);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────── Bascule ─────────────────────────── */
/* Bouton à deux états, pas une case à cocher : l'état est porté par
   aria-checked. Retour au bleu uni sur demande expresse -- plus de mot
   Actif/Coupé dans la piste, plus de rouge/vert : la position du bouton
   (gauche = coupé, droite = actif) porte l'état, pas la seule couleur.
   Largeur fixe (piste ET bouton) : sans texte a largeur variable a
   l'interieur ou a cote, rien ne peut plus decaler Email et SMS d'une
   ligne a l'autre -- voir aussi rendreCanaux() dans reglages.js, qui ne
   pose plus qu'UN bouton par tempo (Email et SMS ensemble). Toutes les
   bascules de la page (canaux, familles, services) partagent ce
   composant. */
.bascule {
  flex: 0 0 auto;
  display: inline-flex;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.bascule__piste {
  position: relative;
  width: 46px;
  height: 27px;
  border-radius: var(--radius-pill);
  background: #d9d5ea;
  transition: background var(--dur-fast) var(--ease-standard);
}
.bascule[aria-checked="true"] .bascule__piste { background: var(--action); }
.bascule__bouton {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: 0 2px 5px rgba(25, 20, 62, .28);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.bascule[aria-checked="true"] .bascule__bouton { transform: translateX(19px); }
.bascule:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 3px; border-radius: var(--radius-pill); }
.bascule:disabled { cursor: not-allowed; opacity: .55; }

/* Famille F : garde-fou, jamais désactivable (principe 5). Le cadenas
   remplace la bascule, il n'y a rien à cliquer. */
.famille__verrou {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-caption-size);
  color: var(--ink-muted-80);
}

/* ─────────────── Canaux et autres protections ─────────────── */
/* Même anatomie que les familles, mais plusieurs bascules par ligne
   (un même tempo peut arriver par email ET par SMS). */
.canaux { display: flex; flex-direction: column; }
/* Ligne simple nom + bascule, sans texte de detail ni libelle Email/SMS
   (retires sur demande expresse -- la mecanique du moteur ne regarde
   pas le senior/l'aidant). align-items: center recentre la bascule sur
   l'unique ligne de texte qui reste. */
.canal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--divider-soft);
}
.canal:last-child { border-bottom: 0; padding-bottom: 0; }
.canal:first-child { padding-top: 0; }
.canal__corps { flex: 1 1 auto; min-width: 0; }
.canal__nom {
  margin: 0;
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  color: var(--brand-1);
}
/* Encore utilise par la liste des services (Dark Web, ScamDetect...) :
   ceux-la restent utiles a expliquer, contrairement aux tempos de
   notification qui n'en ont plus besoin (voir .canal ci-dessus). */
.canal__detail {
  margin: 3px 0 0;
  font-size: var(--text-caption-size);
  line-height: 1.5;
  color: var(--ink-muted-80);
}
.canal__bascules { display: flex; flex: 0 0 auto; }

/* Bouton « Personnaliser » : ouvre le tiroir des règles d'une famille. */
.famille__pied { display: flex; align-items: center; gap: var(--space-sm); margin-top: 10px; }
.personnaliser {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-fine-size);
  color: var(--action);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.personnaliser:hover { border-color: var(--action); background: var(--action-tint); }
.personnaliser:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }
.personnaliser[disabled] { opacity: .55; cursor: not-allowed; }

/* ─────────────────────────── Tiroir ─────────────────────────── */
.tiroir[hidden] { display: none; }
.tiroir {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}
.tiroir__voile {
  position: absolute;
  inset: 0;
  background: rgba(25, 20, 62, .42);
  animation: tiroirVoile var(--dur-base) var(--ease-standard) both;
}
.tiroir__panneau {
  position: relative;
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  box-shadow: -24px 0 60px -30px rgba(25, 20, 62, .6);
  animation: tiroirEntree var(--dur-base) var(--ease-standard) both;
  overflow-y: auto;
}
.tiroir__entete {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--canvas);
  border-bottom: 1px solid var(--divider-soft);
}
.tiroir__sur {
  margin: 0;
  font-size: var(--text-caption-size);
  color: var(--ink-muted-80);
}
.tiroir__titre {
  margin: 2px 0 0;
  font-size: var(--text-body-strong-size);
  font-weight: var(--text-body-strong-weight);
  color: var(--brand-1);
}
.tiroir__fermer {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-muted-80);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tiroir__fermer:hover { border-color: var(--action); color: var(--action); }
.tiroir__detail {
  margin: 0;
  padding: var(--space-md) var(--space-lg) 0;
  font-size: var(--text-caption-size);
  line-height: 1.55;
  color: var(--ink-muted-80);
}
.tiroir__liste { padding: var(--space-md) var(--space-lg) var(--space-xl); }

.regle {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--divider-soft);
}
.regle:last-child { border-bottom: 0; }
.regle__haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
.regle__titre {
  margin: 0;
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  line-height: 1.4;
  color: var(--brand-1);
}
.regle__id {
  display: inline-block;
  margin-right: 7px;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background: var(--action-tint);
  color: var(--brand-4);
  font-size: var(--text-fine-size);
  font-variant-numeric: tabular-nums;
}
.regle__exemple {
  appearance: none;
  cursor: pointer;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-fine-size);
  color: var(--action);
  text-decoration: underline;
}
.regle__texte {
  margin: 10px 0 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--canvas-parchment);
  font-size: var(--text-caption-size);
  line-height: 1.55;
  color: var(--ink-muted-80);
  animation: regleTexte var(--dur-fast) var(--ease-standard) both;
}
.regle__texte[hidden] { display: none; }

@keyframes tiroirVoile { from { opacity: 0; } to { opacity: 1; } }
@keyframes tiroirEntree {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes regleTexte {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .onglet, .reglage__modifier, .bascule__piste, .bascule__bouton,
  .personnaliser { transition: none; }
  .tiroir__voile, .tiroir__panneau, .regle__texte { animation: none; }
}

/* Bouton « Mon compte » : voir .bouton-mon-compte dans tableau-de-bord.css
   (partagé par toutes les pages du tableau de bord, position fixe). */

/* ═════════════════════════ Panneau « Mon compte » ═════════════════════════
   Page plein ecran, PAS un panneau lateral comme .tiroir : sur demande
   expresse, elle se deplie depuis le haut (l'entete du site) et se replie
   vers le haut a la fermeture -- jamais depuis le cote ni depuis le bas
   (deja pris par .tiroir et .article-recouvrement). Deux vues internes
   (#mc-vue-profil / #mc-vue-ajouter) plutot que deux overlays empiles : un
   seul niveau de pile a gerer, un seul Echap, un seul focus a rendre. */
.mon-compte[hidden] { display: none; }
.mon-compte {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  overflow-y: auto;
  /* Meme nappe que .app (tableau-de-bord.css) : sans elle, cette page
     plein ecran est orpheline du reste de l'appli -- blanc plat, sans le
     lavande ambiant qui fait "flotter" les cartes partout ailleurs. */
  background:
    radial-gradient(66% 52% at 84% 0%, rgba(115,111,182,.42) 0%, transparent 74%),
    radial-gradient(58% 46% at 6% 96%, rgba(94,83,152,.34) 0%, transparent 76%),
    #eeebf8;
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-standard);
}
.mon-compte--ouvert { transform: translateY(0); }
/* Meme grain que .app::before : position fixed (pas absolute) parce que
   .mon-compte est lui-meme le conteneur qui defile (overflow-y: auto) --
   le grain doit rester plaque a l'ecran, pas remonter avec le contenu. */
.mon-compte::before {
  content: "";
  position: fixed;
  inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .mon-compte { transition: none; } }

.mc-page { width: min(720px, 100%); padding: var(--space-lg) var(--space-lg) var(--space-section); }

.mc-marque {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-xl);
}
.mc-marque img { display: block; height: 22px; width: auto; }

.mc-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.mc-titre { margin: 0; font-size: 34px; font-weight: 700; color: var(--brand-1); }
.mc-fermer {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  /* Plein (pas transparent) : sur la nappe dégradée de .mon-compte, un
     cercle transparent se fondait dans le fond au lieu de lire comme un
     bouton. */
  background: var(--canvas);
  color: var(--ink-muted-80);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(25,20,62,.12);
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.mc-fermer:hover { border-color: var(--action); color: var(--action); box-shadow: 0 4px 14px rgba(25,20,62,.18); }
.mc-fermer:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }

/* Chaque section = une carte de verre (meme recette que .carte, voir
   tableau-de-bord.css, deja chargee par cette page) : c'est elle qui
   donne du relief a Profils / Mot de passe / E-mail / Telephone plutot
   que de laisser du texte nu flotter sur la nappe. */
.mc-section.carte { margin-bottom: var(--space-lg); }
.mc-section:last-child { margin-bottom: 0; }
.mc-section__titre {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-caption-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-muted-48);
}

/* Une ligne par profil : initiales, nom, un mot de statut, un bouton a
   droite. Meme composant pour « Vous », chaque personne protegee, une
   invitation en attente et la ligne « Ajouter ». */
.mc-profils { display: flex; flex-direction: column; border-radius: var(--radius-lg); box-shadow: var(--ring-soft); overflow: hidden; }
.mc-profil {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--divider-soft);
  background: var(--surface-pearl);
}
.mc-profil:first-child { border-top: 0; }
.mc-profil__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--action-tint-strong);
  color: var(--brand-3);
  font-size: var(--text-caption-size);
  font-weight: 600;
}
.mc-profil--attente .mc-profil__avatar { background: var(--signal-vigilance-tint); color: var(--signal-vigilance); }
.mc-profil__corps { flex: 1 1 auto; min-width: 0; }
.mc-profil__nom { margin: 0; font-size: var(--text-body-strong-size); font-weight: var(--text-body-strong-weight); color: var(--brand-1); overflow-wrap: anywhere; }
.mc-profil__detail { margin: 2px 0 0; font-size: var(--text-caption-size); color: var(--ink-muted-80); }
.mc-profil__action {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-button-utility-size);
  font-weight: 600;
  color: var(--action);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.mc-profil__action:hover { border-color: var(--action); background: var(--action-tint); }
.mc-profil__action:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }

/* Groupe « Paramètres » + retirer : un seul enfant flex côté .mc-profil,
   pour que les deux boutons passent ensemble à la ligne sur mobile (voir
   plus bas) plutôt que chacun sa propre ligne pleine largeur. */
.mc-profil__actions { display: flex; align-items: center; gap: var(--space-xs); flex: 0 0 auto; }
.mc-profil__supprimer {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-muted-48);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.mc-profil__supprimer:hover { border-color: var(--signal-critique); background: var(--signal-critique-tint); color: var(--signal-critique); }
.mc-profil__supprimer:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }
.mc-profil--vide { cursor: pointer; border: 0; text-align: left; width: 100%; }
.mc-profil--vide .mc-profil__avatar { background: var(--brand-3); color: var(--on-dark); font-size: 20px; }
.mc-profil--vide:hover { background: var(--action-tint); }

.mc-plafond {
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--action-tint);
  font-size: var(--text-caption-size);
  line-height: 1.5;
  color: var(--ink-muted-80);
}
.mc-plafond a { color: var(--action-focus); font-weight: 600; }

/* Mot de passe : jamais affiche, seulement des points, avec le bouton qui
   declenche le vrai envoi Supabase (lien de reinitialisation). */
.mc-mdp-points { margin: 0 0 var(--space-sm); font-size: 20px; letter-spacing: 3px; color: var(--ink-muted-80); }
.mc-statut { margin: var(--space-sm) 0 0; font-size: var(--text-caption-size); color: var(--ink-muted-80); }
.mc-statut--erreur { color: var(--signal-critique); }
.mc-statut--ok { color: var(--signal-sur); }

/* ── Vue « Ajouter une autre personne » ── */
.mc-retour {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-md);
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-button-utility-size);
  font-weight: 600;
  color: var(--action);
}
.mc-retour:hover { color: var(--action-focus); }

.mc-invitation__statut { margin-top: var(--space-sm); }

@media (max-width: 620px) {
  .mc-page { padding: var(--space-md) var(--space-md) var(--space-xxl); }
  .mc-titre { font-size: 28px; }
  /* Le rembourrage plein format de .carte, cumule a celui de .mc-page et
     de .mc-profil, ne laissait presque plus de place au nom : « Marguerite »
     se coupait lettre a lettre. On retrecit le rembourrage de la carte et
     on fait passer le bouton sur sa propre ligne plutot que de serrer le nom. */
  .mc-section.carte { padding: var(--space-md); }
  .mc-profil { flex-wrap: wrap; row-gap: var(--space-sm); }
  .mc-profil__action, .mc-profil__actions { flex: 0 0 100%; justify-content: flex-end; }
}

/* ═════════════════════════ Tiroir Genre ═════════════════════════
   Reprend l'anatomie de .tiroir (meme feuille de style) : une grande
   question, une liste de choix a cocher (radio), un bouton Continuer qui
   enregistre et referme. */
.choix-genre { display: flex; flex-direction: column; gap: var(--space-sm); margin: var(--space-md) 0 var(--space-lg); }
.choix-genre__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.choix-genre__option:hover { border-color: var(--action); background: var(--action-tint); }
.choix-genre__option input { flex: 0 0 auto; width: 19px; height: 19px; accent-color: var(--brand-1); }
.choix-genre__option span { font-size: var(--text-body-size); color: var(--ink); }
.choix-genre__option:has(input:checked) { border-color: var(--action); background: var(--action-tint); }

@media (prefers-reduced-motion: reduce) {
  .mc-profil__action, .choix-genre__option { transition: none; }
}

@media (max-width: 760px) {
  .reglages__entete { flex-direction: column; }
  .famille { flex-wrap: wrap; }
  .reglage__duo { grid-template-columns: minmax(0, 1fr); }

  /* Une ligne = icone | texte | « Modifier », TOUJOURS a la meme place.
     Avant, la ligne se cassait au gre de la longueur de la valeur : tantot
     « Modifier » restait a droite, tantot il tombait sous le texte, et
     l'icone de l'e-mail restait seule sur une ligne. Sans bouton (e-mail,
     ou pendant la modification), le texte prend toute la largeur. */
  .reglage {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    column-gap: var(--space-md);
    align-items: start;
  }
  .reglage__modifier { align-self: center; min-height: 44px; padding: 8px 16px; }
  .reglage:not(:has(.reglage__modifier:not([hidden]))) .reglage__corps { grid-column: 2 / -1; }
  #deconnexion-haut { min-height: 44px; }
}


/* ── Donnees et confidentialite (tout en bas de Mon compte) ──
   Volontairement en retrait : replie, sans carte, en petits caracteres
   discrets. Voir le commentaire de #mc-donnees dans reglages.html. */
.mc-discret {
  margin: var(--space-section) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline-alpha);
  font-size: 13px;
  color: var(--ink-muted-80);
}
.mc-discret summary {
  display: inline-block;
  cursor: pointer;
  color: var(--ink-muted-48);
  list-style: none;
}
.mc-discret summary::-webkit-details-marker { display: none; }
.mc-discret summary:hover { color: var(--ink-muted-80); text-decoration: underline; }
.mc-discret summary:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 3px; border-radius: 4px; }
.mc-discret__corps { margin-top: var(--space-sm); max-width: 34em; }
.mc-discret__corps p { margin: 0 0 var(--space-sm); line-height: 1.5; }
.mc-discret__lien {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink-muted-80);
  text-decoration: underline;
  cursor: pointer;
}
.mc-discret__lien:hover { color: var(--signal-critique); }
.mc-discret__lien:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 3px; border-radius: 4px; }

/* ── Fenetre de confirmation de la suppression ── */
/* Ouverte DEPUIS Mon compte (z-index 80) : elle doit passer au-dessus, et
   defiler sur un petit ecran plutot que de sortir par le haut. */
#suppression { z-index: 120; }
.suppression {
  max-width: 520px;
  max-height: calc(100dvh - 2 * var(--space-md));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.suppression__sur { color: var(--signal-critique); }
.suppression__texte { margin: 0 0 var(--space-md); font-size: var(--text-body-size); line-height: var(--text-body-lh); color: var(--ink-muted-80); }
.suppression__texte p { margin: 0 0 var(--space-sm); }
.suppression__texte ul { margin: 0 0 var(--space-sm); padding-left: 1.2em; display: grid; gap: 6px; }
.suppression__case { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--space-md); font-weight: 600; color: var(--ink); cursor: pointer; }
.suppression__case input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--signal-critique); }
.suppression__statut { margin: var(--space-sm) 0 0; color: var(--signal-critique); }
.suppression__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); }
.suppression__danger { background: var(--signal-critique); color: var(--on-dark); border-color: var(--signal-critique); }
.suppression__danger:hover:not(:disabled) { filter: brightness(.92); }
.suppression__danger:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 560px) {
  .suppression__actions { flex-direction: column-reverse; }
  .suppression__actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 860px), (pointer: coarse) {
  .suppression__actions .btn, .suppression__case { min-height: 44px; }
  .mc-discret summary, .mc-discret__lien { display: inline-block; padding: 10px 0; }
}

/* ═════════════ Abonnement : l'état, en une phrase, et l'action ═════════════ */
.abo { display: grid; gap: var(--space-md); justify-items: start; }
.abo__ligne { --ton: var(--signal-neutre); display: grid; gap: 4px; width: 100%; padding: 12px 14px 12px 18px; border-radius: 14px; position: relative; background: color-mix(in srgb, var(--ton) 8%, #fff); }
.abo__ligne::before { content: ""; position: absolute; inset: 10px auto 10px 0; width: 3px; border-radius: 3px; background: var(--ton); }
.abo__ligne--sur { --ton: var(--signal-sur); }
.abo__ligne--alerte { --ton: var(--signal-critique); }
.abo__etat { font-weight: 700; color: var(--brand-1); }
.abo__detail { margin: 0; font-size: var(--text-caption-size); line-height: 1.5; color: var(--ink-muted-80); }
.abo__erreur { margin: var(--space-sm) 0 0; font-size: var(--text-caption-size); color: var(--signal-critique); }

/* Consentement a l'apprentissage (dans Donnees et confidentialite) : meme case que la suppression, sans le rouge. */
.mc-consentement { margin: 0 0 var(--space-xs); color: var(--ink-muted-80); }
.mc-consentement input { accent-color: var(--action-focus); }
.mc-consentement__detail { margin: 0 0 var(--space-md); padding-left: 32px; }
.mc-consentement__statut { margin: 0 0 var(--space-md); padding-left: 32px; color: var(--ink-muted-80); }

.abo__ligne--attention { --ton: var(--signal-vigilance); }

/* Proposition de passer à l'offre Sentinelle (carte Abonnement, offre Essentiel). */
.abo__montee { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; width: 100%; padding: 14px 16px; border-radius: 16px; background: var(--action-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--action) 30%, transparent); }
.abo__montee > div { flex: 1 1 260px; }
.abo__montee-titre { margin: 0 0 2px; font-weight: 700; color: var(--brand-1); }
.abo__montee-texte { margin: 0; font-size: var(--text-caption-size); line-height: 1.5; color: var(--ink-muted-80); }
.reglages__carte:target { box-shadow: 0 0 0 2px var(--action); }
@media (max-width: 560px) { .abo__montee .abo__bouton { width: 100%; justify-content: center; } }