/* Espace d'un compte (02/10/2026) : bandeau persistant de la démonstration, fil conducteur de la barre haute, rail de
   l'espace, écran d'accueil (marques suivies, analyses), « Mon compte », réglages d'une marque. Grammaire de la DA v3
   « Noir » : cartes en voile, trait et arête haute, chiffre dominant, badge d'écart ; aucune valeur écrite ici hors des
   jetons (../assets/tokens.css). Chargée après app.css : elle étend la grille de la coquille d'une rangée. */

/* ---------- Coquille : une rangée de plus, tout en haut, pour le bandeau de la démonstration ---------- */
.app {
  grid-template-rows: auto var(--haut) auto minmax(0, 1fr) auto;
  grid-template-areas: "demo demo" "haut haut" "rail bandeau" "rail contenu" "rail pied";
}
body.en-demo { --decalage-demo: 44px; }
html:has(body.en-demo) { scroll-padding-top: calc(var(--haut) + 60px); }
.haut { top: var(--decalage-demo, 0px); }
.rail { top: calc(var(--haut) + var(--decalage-demo, 0px)); height: calc(100vh - var(--haut) - var(--decalage-demo, 0px)); height: calc(100dvh - var(--haut) - var(--decalage-demo, 0px)); }
.btn[hidden] { display: none; }

/* Bandeau de la démonstration : toujours visible, à toute largeur ; il dit que rien n'est enregistré et porte la sortie. */
.bandeau-demo {
  grid-area: demo; position: sticky; top: 0; z-index: 31; display: flex; align-items: center; gap: 12px;
  height: var(--decalage-demo, 44px); padding: 0 20px; background: var(--panneau); border-bottom: 1px solid var(--trait);
  font-size: var(--taille-petit); color: var(--encre-2);
}
.bandeau-demo[hidden] { display: none; }
.bandeau-demo-texte { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeau-demo .btn { flex: none; margin-left: auto; }

/* Démonstrations par offre (12/11/2026, bandeau-demo.js) : trois pastilles (l'offre jouée allumée), « Ce que comprend… »,
   puis la sortie. Le texte cède la place d'abord, puis les libellés longs : jamais de débordement à 320 px. */
.bandeau-demo-offres { display: none; }
.bandeau-demo.a-offres .bandeau-demo-offres { display: flex; align-items: center; gap: 10px; flex: none; }
.bandeau-demo.a-offres .btn { margin-left: 0; }
.demo-pastilles { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--trait); border-radius: 999px; background: var(--fond); }
.demo-pastille {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; color: var(--encre-2);
  text-decoration: none; font-weight: 600; white-space: nowrap; transition: background-color 160ms ease, color 160ms ease;
}
.demo-pastille:hover { color: var(--encre); background: var(--panneau); }
.demo-pastille[aria-current="page"] { color: var(--fond); background: var(--encre); }
.demo-pastille:focus-visible, .demo-comprend:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.demo-comprend { gap: 6px; white-space: nowrap; }
.demo-comprend .ic { width: 16px; height: 16px; }
.demo-court { display: none; }
dialog.dialogue-demo { width: min(520px, calc(100vw - 32px)); }
.demo-prix { margin: 4px 0 14px; color: var(--encre-2); }
.demo-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--trait); }
.demo-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.demo-ligne-texte { min-width: 0; overflow-wrap: anywhere; }
.demo-ligne-lien { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--bleu); font-weight: 600; text-decoration: none; }
.demo-ligne-lien:hover { text-decoration: underline; }
.demo-ligne-lien .ic { width: 14px; height: 14px; }
.demo-note { margin-top: 14px; }
@media (max-width: 1100px) { .bandeau-demo.a-offres .bandeau-demo-texte { display: none; } .bandeau-demo.a-offres .bandeau-demo-offres { margin-left: auto; } }
@media (max-width: 640px) {
  .bandeau-demo.a-offres { gap: 8px; padding: 0 12px; }
  .bandeau-demo.a-offres .badge-demo { display: none; }
  .bandeau-demo.a-offres .bandeau-demo-offres { margin-left: 0; gap: 6px; }
  .bandeau-demo.a-offres .demo-long { display: none; }
  .bandeau-demo.a-offres .demo-court { display: inline; }
  .demo-pastille { height: 36px; padding: 0 9px; } /* 36 px au doigt (28 auparavant) : le bandeau fait 44 px */
  .demo-comprend .ic { display: none; }
  .bandeau-demo.a-offres #quitter-demo { margin-left: auto; }
}
/* 13/11/2026 (audit adaptatif) : à 320 px, les pastilles + « Inclus » + « Quitter » débordaient de 18 px et élargissaient
   toute la page (la barre basse fixe suivait). On resserre les marges, rien ne disparaît. */
@media (max-width: 360px) {
  .bandeau-demo.a-offres { gap: 4px; padding: 0 8px; }
  .bandeau-demo.a-offres .bandeau-demo-offres { gap: 4px; }
  .demo-pastilles { gap: 0; }
  .demo-pastille { padding: 0 7px; }
  .bandeau-demo.a-offres .btn-compact { padding-left: 9px; padding-right: 9px; }
}

/* ---------- Fil conducteur : Espace › marque › relevé (ou l'écran de l'espace) ---------- */
.haut-sel [hidden] { display: none; }
.fil-espace {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: var(--bouton-hauteur-compacte); padding: 0 10px;
  border-radius: var(--rayon-2); font-size: var(--taille-petit); font-weight: var(--graisse-moyenne); color: var(--encre-2); text-decoration: none;
  transition: background var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe);
}
.fil-espace:hover { background: var(--voile-2); color: var(--encre); text-decoration: none; }
.fil-espace[aria-current="page"] { color: var(--encre); }
.fil-sep { flex: none; width: 6px; height: 6px; margin: 0 2px 0 0; border-top: 1.5px solid var(--encre-3); border-right: 1.5px solid var(--encre-3); transform: rotate(45deg); }
.fil-ici { flex: none; padding: 0 6px; font-size: var(--taille-petit); font-weight: var(--graisse-moyenne); color: var(--encre); white-space: nowrap; }
/* Sur l'espace : « Espace › Mon compte », puis le sélecteur de marque, qui n'est plus un maillon du fil mais un raccourci. */
body.ecran-espace #fil-sep-marque { display: none; }
body.ecran-espace .sel-marque { order: 5; margin-left: 6px; }
.haut-compte { gap: 8px; max-width: 30ch; }
.haut-compte #moi-email { max-width: 22ch; }
.haut-compte[aria-current="page"] { background: var(--voile-2); color: var(--encre); }
.haut-compte[aria-current="page"] #moi-email { color: var(--encre); }

/* ---------- Rail : retour à l'espace, titres de groupe, marques de l'espace ---------- */
.rail li.rail-retour { margin-bottom: 4px; }
.rail li.rail-titre { margin-top: 12px; padding: 14px 12px 6px; border-top: 1px solid var(--trait); }
/* « Vos marques » (13/11/2026, Martin : « ça coupe, et en plus ça fait fouillis » ; js/rail-marques.js) : une ligne par
   marque, son logo, son nom entier quand la place existe (sinon « … », complet en info-bulle), le pays en code discret
   aligné à droite ; un groupe se lit sous son nom, repliable, ses marques en retrait le long d'un filet. Une longue liste
   (agence à 50 ou 80 marques) : ses groupes s'ouvrent repliés, le rail défile avec un ascenseur discret (app.css). */
.rail li.rail-marques { min-width: 0; }
.rail-marques-liste { display: grid; gap: 1px; }
.rail li.rail-marque { min-width: 0; }
.rail li.rail-marque a { height: auto; min-height: 36px; gap: 10px; min-width: 0; padding: 5px 8px 5px 12px; font-size: 13.5px; }
.rail-texte { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
/* Un nom long passe sur deux lignes avant de se couper (« … » en fin de la seconde, complet en info-bulle). */
.rail-texte .rail-nom, .rail-groupe-tete .rail-nom { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; white-space: normal; min-width: 0; line-height: 1.3; }
.rail-sous { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rail-sous { font-size: var(--taille-etiquette); font-weight: var(--graisse-corps); color: var(--encre-2); }
.rail-sous .drapeau { --drapeau-hauteur: 10px; border-radius: 2px; vertical-align: -1px; }
/* Le pays : deux lettres en capitales mono, dans un filet ; il ne rétrécit jamais, le nom cède avant lui. */
.rail-pays {
  flex: none; margin-left: auto; padding: 1px 5px; border: 1px solid var(--trait); border-radius: 5px;
  font-family: var(--police-mono); font-size: 10.5px; font-weight: var(--graisse-moyenne); line-height: 1.4; letter-spacing: 0.06em; color: var(--encre-2);
  transition: color var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe);
}
.rail li.rail-marque a:hover .rail-pays { color: var(--encre); border-color: var(--trait-fort); }
.rail-drapeau { display: grid; place-items: center; flex: none; width: 20px; height: 24px; }
.rail-drapeau .drapeau { --drapeau-hauteur: 13px; border-radius: 2px; }
/* Un groupe : son nom en tête (logo, nom, nombre de marques, chevron), un bouton qui replie la liste. */
.rail-groupe { display: grid; min-width: 0; }
.rail-groupe-tete {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; min-height: 38px; padding: 7px 8px 7px 12px; border: 0; border-radius: var(--rayon-2);
  background: transparent; font-size: 14px; font-weight: var(--graisse-moyenne); color: var(--encre); text-align: left; cursor: pointer;
  transition: background var(--duree-rapide) var(--courbe);
}
.rail-groupe-tete:hover { background: var(--voile-1); }
/* Un nom de groupe long passe sur deux lignes ; le logo, la pastille du nombre et le chevron restent en haut, sur la
   première ligne. */
.rail-groupe-tete .rail-nom { flex: 1 1 auto; padding-top: 3px; }
.rail-groupe-tete .rail-groupe-compte { margin-top: 3px; }
.rail-groupe-tete .rail-chevron { margin-top: 4px; }
.rail-groupe-compte { flex: none; min-width: 20px; padding: 1px 6px; border-radius: var(--rayon-pilule); background: var(--voile-2); font-size: var(--taille-etiquette); line-height: 1.4; text-align: center; color: var(--encre-2); }
.rail-chevron { display: grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--encre-2); transition: transform var(--duree-normale) var(--expo); }
.rail-chevron .ic { width: 14px; height: 14px; }
.rail-groupe-tete[aria-expanded="false"] .rail-chevron { transform: rotate(-90deg); }
.rail-groupe-tete:hover .rail-chevron { color: var(--encre); }
/* Les marques du groupe, en retrait : le filet part sous le logo du groupe. */
.rail ul.rail-groupe-liste { display: grid; gap: 1px; margin: 2px 0 6px 23px; padding-left: 5px; border-left: 1px solid var(--trait); }
.rail ul.rail-groupe-liste[hidden] { display: none; }
.rail ul.rail-groupe-liste li.rail-marque a { gap: 8px; padding-left: 8px; padding-right: 6px; }
/* La marque affichée, en tête du rail d'une marque : son logo, son nom, son groupe ou son pays. */
.rail li.rail-courante {
  display: flex; align-items: center; gap: 10px; min-width: 0; margin: 6px 0 2px; padding: 10px 12px; border-radius: var(--rayon-3);
  background: var(--voile-2); border: 1px solid var(--trait); box-shadow: var(--trait-lumiere); font-size: 14px; font-weight: var(--graisse-moyenne); color: var(--encre);
}
.rail li.rail-courante .rail-sous { margin-top: 1px; }
.rail li.rail-courante + li.rail-titre { margin-top: 10px; border-top: 0; padding-top: 8px; }
@media (prefers-reduced-motion: reduce) { .rail-chevron { transition: none; } }
.rail-lab[hidden] { display: none; }

/* ---------- Accueil de l'espace ---------- */
.offre-etat { margin: -12px 0 28px; font-size: var(--taille-petit); color: var(--encre-2); }
.note.offre-etat { margin-top: 0; }
.espace-marques.section { margin-top: 0; }
.quota-marques { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--taille-petit); color: var(--encre-2); }
.quota-marques-texte { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.quota-marques-texte b { color: var(--encre); }
.quota-marques .piste { flex: 0 0 120px; }
.marques-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
.marque-carte {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px; min-height: 232px; padding: 20px 22px;
  border-radius: var(--rayon-3); background: var(--voile-2); border: 1px solid var(--trait); box-shadow: var(--trait-lumiere);
  transition: background var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe), transform var(--duree-normale) var(--expo);
}
.marque-carte:hover { background: var(--voile-3); border-color: var(--trait-fort); transform: translateY(-2px); }
.marque-carte:has(.lien-etire:focus-visible) { box-shadow: var(--anneau-focus); }
.marque-carte.en-pause .marque-corps, .marque-carte.en-pause .logo { opacity: 0.55; }
/* Le nom porte le lien ; il s'étire sur toute la carte : un seul lien, un nom court, le reste se lit comme du texte. */
.lien-etire { color: inherit; text-decoration: none; }
.lien-etire:hover { text-decoration: none; }
.lien-etire::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lien-etire:focus-visible { box-shadow: none; }
.marque-tete { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marque-tete .badge { position: relative; flex: none; margin-left: auto; }
.marque-nom { min-width: 0; }
.marque-nom h3, .marque-nouvelle h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--taille-h3); line-height: 1.3; letter-spacing: var(--approche-h3); color: var(--encre); }
.marque-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--taille-etiquette); color: var(--encre-2); }
/* La même marque sur plusieurs marchés (06/11/2026) : une petite catégorie à part sur toute la largeur de la grille,
   nommée par son en-tête ; chaque carte porte son marché en badge sous le nom, puis le domaine. */
.marques-groupe { grid-column: 1 / -1; padding: 14px; border-radius: var(--rayon-3); background: var(--voile-1); border: 1px solid var(--trait); }
.marques-groupe-corps { display: grid; gap: 12px; }
.marques-groupe-tete { display: flex; align-items: center; gap: 8px; padding-inline: 4px; font-size: var(--taille-petit); font-weight: var(--graisse-moyenne); color: var(--encre-2); }
.marques-groupe-drapeaux { display: inline-flex; align-items: center; gap: 5px; }
.marques-groupe-drapeaux:empty { display: none; }
.marque-meta-marche { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.marque-meta-marche > span:last-child:not(.badge) { overflow: hidden; text-overflow: ellipsis; }
.marque-tete .badge-marche, .compte-marques .badge-marche { position: static; margin-left: 0; flex: none; }
.badge-marche { background: var(--bleu-voile); color: var(--encre); }
/* 11/11/2026 : le drapeau est un dessin (js/drapeaux.js, .drapeau de components.css), à la hauteur d'une capitale du nom. */
.badge-marche .drapeau, .rail-marche .drapeau, .marque-marche .drapeau, .marques-groupe-drapeaux .drapeau { --drapeau-hauteur: 12px; border-radius: 2px; }
.rail-marche .drapeau, .marque-marche .drapeau { vertical-align: -1px; }
.compte-marques a.nm { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.compte-marques .nm-texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.marque-corps { display: grid; align-content: end; }
.marque-corps .chiffre { margin: 6px 0 4px; }
.marque-etat { display: flex; align-items: center; gap: 10px; font-size: var(--taille-h3); font-weight: var(--graisse-moyenne); letter-spacing: var(--approche-h3); color: var(--encre); }
.marque-etat.attente { color: var(--encre-2); }
.marque-etat + .stat-sous { margin-top: 6px; }
.marque-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-top: 14px; border-top: 1px solid var(--trait); font-size: var(--taille-petit); color: var(--encre-2); }
.marque-pied { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marque-fleche { display: grid; place-items: center; flex: none; color: var(--encre-2); transition: transform var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe); }
.marque-fleche .ic { width: 16px; height: 16px; }
/* 11/11/2026 : les Réglages d'une marque depuis sa carte de l'accueil, en toutes lettres (le pictogramme seul ne se
   voyait pas assez : c'est un lien de carte, `.lien-carte`), au-dessus du lien étiré de la carte. Sur une carte
   étroite, les gestes passent sous la date du relevé, à droite, plutôt que de la couper. */
.marque-bas-gestes { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.marque-reglages { position: relative; z-index: 1; margin: 0; }
.marque-reglages:hover .ic { transform: none; }
.marque-carte:hover .marque-fleche, .compte-marques li:hover .marque-fleche { color: var(--bleu-texte); transform: translateX(3px); }
.marque-nouvelle { grid-template-rows: none; align-content: center; justify-items: start; gap: 10px; background: transparent; border-style: dashed; border-color: var(--trait-fort); box-shadow: none; }
.marque-nouvelle:hover { background: var(--voile-1); }
.marque-plus { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bouton-accent-fond); color: var(--encre); }

.espace-suite { display: grid; gap: 16px; }
.espace-suite > .carte:hover { --carte-voile: var(--voile-2); border-color: var(--trait); }
.analyses { display: grid; }
.analyse { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 64px auto; align-items: center; gap: 14px; min-height: 60px; border-top: 1px solid var(--trait); }
.analyse:first-child { border-top: 0; }
.analyse-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-size: 14px; color: var(--encre); }
.analyse-nom b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analyse-meta { flex: 1 1 100%; font-size: var(--taille-etiquette); color: var(--encre-2); }
.analyse-statut .badge .vivant { width: 6px; height: 6px; }
.analyse-score { justify-self: end; font-size: var(--taille-etiquette); color: var(--encre-2); white-space: nowrap; }
.analyse-score b { margin-right: 1px; font-size: 20px; font-weight: var(--graisse-moyenne); letter-spacing: -0.02em; color: var(--encre); }
.analyse-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
p.vide { display: block; }
.espace-compte .carte-tete { margin-bottom: 0; align-items: center; }

/* ---------- Sommaire d'un écran long (Mon compte, Réglages d'une marque) ---------- */
.sommaire { margin: -8px 0 24px; }
.sommaire ul { display: flex; flex-wrap: wrap; gap: 6px; }
.sommaire a.jeton, .reglage-raccourcis a.jeton { color: var(--encre-2); text-decoration: none; transition: background var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe); }
.sommaire a.jeton:hover, .reglage-raccourcis a.jeton:hover { background: var(--voile-3); border-color: var(--trait-fort); color: var(--encre); text-decoration: none; }
.ecran > .note { margin-bottom: 16px; }
.ecran .carte:focus { outline: none; box-shadow: var(--anneau-focus); }

/* ---------- Mon compte ---------- */
.fiche { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); align-items: center; gap: 14px 24px; margin: 0; }
.fiche dt { font-size: var(--taille-petit); color: var(--encre-2); }
.fiche dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; margin: 0; font-size: 14px; font-weight: var(--graisse-moyenne); color: var(--encre); }
.fiche-email { overflow-wrap: anywhere; }
.fiche-aide { margin-top: 16px; }
.session-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--voile-3); color: var(--encre-2); box-shadow: var(--trait-lumiere); }
.session-ico .ic { width: 16px; height: 16px; }
.sessions-liste li, .compte-marques li { grid-template-columns: 32px minmax(0, 1fr) auto auto; }
.sessions-corps { max-height: 344px; overflow-y: auto; }
.sessions-liste .nm { white-space: normal; }
.compte-marques a.nm { color: var(--encre); text-decoration: none; }
.compte-marques a.nm:hover { color: var(--bleu-texte); text-decoration: none; }
#offre .note { margin: 0 0 16px; }
/* Prénom et nom (retour de Martin du 07/10 : « Prénom et nom enregistrés. » s'affichait collé au bouton et à la fiche) :
   les deux champs côte à côte, le bouton dessous, la note de réussite ou d'erreur sur toute la largeur, alignée sur les
   champs ; un filet sépare ce qui se modifie de la fiche. Les notes des autres cartes respirent de même. */
.compte-nom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px 16px; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--trait); }
.compte-nom > .actions, .compte-nom > .note { grid-column: 1 / -1; margin: 0; }
.compte-adresse { display: grid; gap: 12px; margin: 0 0 20px; }
.compte-adresse > .note, .compte-adresse > .actions { margin: 0; }
.securite-corps + .note, #sessions > .actions + .note { margin-top: 14px; }
#offre .offres-autres .note, #offre > .note:last-child { margin: 12px 0 0; }

/* ---------- Réglages d'une marque : trois groupes, chacun dit comment il s'enregistre ---------- */
.groupe-reglages .section-tete { align-items: baseline; }
/* Le relevé, en pleine largeur : la cohorte à gauche, le geste de mesure à droite, à sa hauteur. */
@media (min-width: 901px) {
  .carte-releve.s-12 { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
  .carte-releve.s-12 > * { grid-column: 1; }
  .carte-releve.s-12 > .actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .carte-releve.s-12 > .note { grid-column: 1 / -1; margin-top: 12px; }
}
.champ-lecture { display: flex; align-items: center; min-height: var(--bouton-hauteur); padding: 0 12px; border-radius: var(--rayon-2); border: 1px dashed var(--trait-fort); font-size: 14px; font-weight: var(--graisse-moyenne); color: var(--encre); }
.barre-attente.a-enregistrer { font-weight: var(--graisse-moyenne); color: var(--attention); }
.reglages-compte { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--trait); }
.note > .btn { margin-left: 10px; }

/* ---------- Réglages de l'espace (11/11/2026, ecrans/reglages-espace.js) : une carte par marque, ses réglages à un clic.
   L'ordre ne change jamais (la marque, ses raccourcis, le bouton : celui du clavier). Large : sur une ligne ; moyen : les
   raccourcis et le bouton passent sous la marque, les raccourcis alignés sur son nom ; téléphone : tout s'empile. ---------- */
.reglages-marques { display: grid; gap: 12px; }
.reglage-marque { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 20px; padding-block: 16px; }
.reglage-identite { display: flex; align-items: center; gap: 12px; min-width: 0; }
.reglage-texte { min-width: 0; }
.reglage-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--taille-h3); line-height: 1.3; letter-spacing: var(--approche-h3); color: var(--encre); }
.reglage-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: var(--taille-etiquette); color: var(--encre-2); }
.reglage-meta > span:not(.badge) { min-width: 0; overflow-wrap: anywhere; }
.reglage-raccourcis { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 1180px) {
  .reglage-marque { grid-template-columns: minmax(0, 1fr) auto; }
  .reglage-identite { grid-column: 1 / -1; }
  .reglage-raccourcis { padding-left: calc(44px + 12px); } /* sous le nom : la largeur du logo, puis son écart */
}

/* ---------- Écran étroit ---------- */
@media (max-width: 900px) {
  .app { grid-template-rows: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "demo" "haut" "bandeau" "contenu" "pied"; }
  .bandeau-demo { padding: 0 16px; }
  .rail { height: auto; top: auto; }
  .rail li.rail-retour, .rail li.rail-titre, .rail li.rail-marque, .rail li.rail-marques, .rail li.rail-courante { display: none; }
  .haut-compte { padding: 0 8px; }
  .haut-compte #moi-email { display: none; }
  .marques-grille { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
  .marque-carte { min-height: 200px; padding: 18px; }
  .quota-marques .piste { flex-basis: 88px; }
}
@media (max-width: 640px) {
  .bandeau-demo-texte { display: none; }
  .analyse { grid-template-columns: 32px minmax(0, 1fr) auto; row-gap: 8px; padding: 12px 0; }
  .analyse-statut { grid-column: 3; grid-row: 1; }
  .analyse-score { grid-column: 2; grid-row: 2; justify-self: start; }
  .analyse-actions { grid-column: 2 / -1; grid-row: 3; justify-content: flex-start; }
  .analyse-score.sans-score { display: none; }
  .fiche { grid-template-columns: 1fr; gap: 4px; }
  .compte-nom { grid-template-columns: minmax(0, 1fr); }
  .fiche dd { margin-bottom: 10px; }
  .sessions-liste li, .compte-marques li { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 10px 0; }
  .sessions-liste .nm, .compte-marques .nm { grid-column: 2; }
  .compte-marques .role { grid-column: 2; grid-row: 2; }
  .compte-marques .marque-fleche { grid-column: 3; grid-row: 1; }
  .espace-compte .carte-tete { display: flex; flex-wrap: wrap; }
  .reglage-marque { grid-template-columns: minmax(0, 1fr); }
  .reglage-raccourcis { padding-left: 0; }
  .reglage-ouvrir { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .marque-carte:hover { transform: none; }
}

/* ---------- Groupes de l'accueil (11/11/2026, ecrans/accueil-groupes.js) : une marque lue pays par pays ---------- */
.groupes-liste { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.groupe-bloc { display: grid; gap: 12px; padding: 16px; border-radius: var(--rayon-3); background: var(--voile-1); border: 1px solid var(--trait); min-width: 0; }
.groupe-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.groupe-titre { margin: 0; font-size: 18px; letter-spacing: -0.01em; color: var(--encre); }
.groupe-compte { font-size: var(--taille-petit); color: var(--encre-3); }
.groupe-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.groupe-champ { flex: 1 1 220px; max-width: 360px; height: 34px; padding: 0 10px; border-radius: var(--rayon-2); border: 1px solid var(--trait); background: var(--voile-1); color: var(--encre); font: inherit; }
.groupe-defile { overflow-x: auto; }
.groupe-table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: var(--taille-petit); }
.groupe-table th, .groupe-table td { padding: 10px 8px; text-align: left; vertical-align: middle; border-top: 1px solid var(--trait); }
.groupe-table thead th { border-top: 0; font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); color: var(--encre-3); line-height: 1.3; vertical-align: bottom; }
.groupe-table .num { font-variant-numeric: tabular-nums; }
.groupe-table td.num, .groupe-table th.num { text-align: right; }
.groupe-table .discret { color: var(--encre-3); }
.groupe-pays { font-weight: var(--graisse-moyenne); }
.groupe-lien { display: inline-flex; align-items: center; gap: 8px; color: var(--encre); text-decoration: none; }
.groupe-lien:hover .badge-marche, .groupe-lien:focus-visible .badge-marche { border-color: var(--trait-fort); }
.groupe-ville, .groupe-nom-marque { color: var(--encre-2); font-weight: 400; }
.groupe-nom-marque { display: block; margin-top: 2px; font-size: var(--taille-etiquette); }
.groupe-presence b { display: block; font-size: 18px; color: var(--encre); }
.groupe-sous { color: var(--encre-3); font-size: var(--taille-etiquette); }
.groupe-ia { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.groupe-puce { display: inline-flex; gap: 5px; padding: 2px 7px; border-radius: 999px; background: var(--voile-2); color: var(--encre-2); white-space: nowrap; }
.groupe-puce b { color: var(--encre); font-weight: var(--graisse-moyenne); }
.groupe-gestes { white-space: nowrap; text-align: right; }
.groupe-lien-reglages { display: inline-flex; padding: 6px; border-radius: var(--rayon-2); color: var(--encre-3); vertical-align: middle; }
.groupe-lien-reglages:hover, .groupe-lien-reglages:focus-visible { color: var(--encre); background: var(--voile-2); }
.groupe-lien-reglages svg { width: 16px; height: 16px; }
.groupe-note, .groupe-vide { margin: 0; font-size: var(--taille-petit); color: var(--encre-3); max-width: 86ch; }
.groupe-ajout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--taille-petit); color: var(--encre-2); }
.groupe-choix { height: 32px; max-width: 320px; padding: 0 8px; border-radius: var(--rayon-2); border: 1px solid var(--trait); background: var(--voile-1); color: var(--encre); font: inherit; }
.groupe-creer { margin-left: auto; }
.groupes-exemple { margin-left: 8px; vertical-align: middle; }