/* ═══════════════════════════════════════════════════════════════════════════
   layout.css - STRUCTURE ET COMPOSANTS

   Bureau d'abord, parce que l'usage réel est sur ordinateur : on exporte
   depuis Canva sur un poste de travail et on dépose le fichier dans la foulée.
   Le mobile est la version repliée du même écran, plus bas dans ce fichier.
   ═══════════════════════════════════════════════════════════════════════════ */

.application {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ─────────────────────────── BARRE DU HAUT ─────────────────────────── */

.barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-4);
  height: var(--hauteur-barre);
  padding: 0 var(--espace-5);
  border-bottom: 1px solid var(--bordure);
  flex: none;
}

.marque { display: flex; align-items: center; }

.marque-logo { display: block; height: 28px; width: auto; }

/* Lettres blanches sur le thème sombre (par défaut), noires sur le clair. */
.marque-logo-clair { display: none; }
[data-theme="clair"] .marque-logo-sombre { display: none; }
[data-theme="clair"] .marque-logo-clair { display: block; }

.outils { display: flex; align-items: center; gap: var(--espace-2); }

/* ─────────────────────────── ÉCRAN DE DÉPÔT ───────────────────────────

   Deux colonnes : la promesse et le geste à gauche, la démonstration à
   droite. Sous 1180 px la démonstration passe dessous, sur téléphone elle se
   réduit au seul format qui ne passe pas.                                    */

.ecran-depot {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 500px) auto;
  align-items: center;
  justify-content: center;
  gap: 72px;
  padding: var(--espace-7) var(--espace-6);
}

.promesse { display: flex; flex-direction: column; gap: var(--espace-5); }

.titre-accueil {
  font-size: 40px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* Le trait signal du logo, sous les mots qui portent la promesse. */
.titre-accueil .souligne {
  background: linear-gradient(var(--signal), var(--signal)) no-repeat 0 92% / 100% 3px;
  padding-bottom: 4px;
}

.accroche { color: var(--texte-faible); font-size: 17px; line-height: 1.55; max-width: 470px; }

/* Contour pointillé : convention du glisser-déposer, comprise sans légende.
   Il devient plein et cyan quand un fichier passe au-dessus. */
.zone-depot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-3);
  padding: var(--espace-6);
  border: 2px dashed var(--bordure);
  border-radius: var(--rayon-grand);
  background: var(--surface);
  transition: border-color 120ms ease, background 120ms ease;
}
.zone-depot.survolee {
  border-style: solid;
  border-color: var(--signal);
  background: var(--surface-haute);
}

.depot-tete { display: flex; align-items: center; gap: var(--espace-4); }

.depot-icone {
  width: 44px; height: 44px;
  flex: none;
  fill: none;
  stroke: var(--signal);
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.depot-titre { font-size: var(--taille-section); font-weight: 600; }

.depot-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-4);
  margin-top: var(--espace-2);
}
/* Le seul bouton de l'accueil : un cran plus grand que les autres. */
.depot-actions .bouton-principal { padding: 11px 18px; font-weight: 600; }

/* Les réseaux vérifiés : le nom écrit et sa barre, comme sur les cartes. */
.reseaux-verifies { display: flex; flex-direction: column; gap: var(--espace-2); }
.reseaux-liste { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-3); }
.reseau { display: inline-flex; align-items: center; gap: 7px; font-size: var(--taille-etiquette); }

.vie-privee { display: flex; align-items: center; gap: var(--espace-2); font-size: var(--taille-etiquette); }
.vie-privee svg {
  width: 16px; height: 16px;
  flex: none;
  fill: none;
  stroke: var(--ok);
  stroke-width: 1.6;
}

.notice {
  max-width: 620px;
  padding: var(--espace-3) var(--espace-4);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-moyen);
  background: var(--surface);
  color: var(--texte-faible);
  font-size: var(--taille-micro);
}
.notice-erreur { border-color: var(--probleme); color: var(--texte-fort); }


/* ── La démonstration : la même affiche dans trois formats ──

   Les téléphones reconstituent une interface comme habillage.css : du blanc
   et du noir de réseau, pas les couleurs du produit, d'où les teintes
   écrites en dur ici. Les zones masquées viennent de platforms.js par
   accueil.js, en pixels du gabarit 1080 : --echelle les ramène à la taille
   de l'écran. Elle est écrite en nombre, diviser des px par des px n'étant
   pas encore compris par tous les navigateurs.                              */

.demo { display: flex; flex-direction: column; align-items: center; gap: var(--espace-4); }

/* Chaque format est une colonne : nom, téléphone, sol, verdict, phrase.
   Les colonnes partagent les mêmes rangées (subgrid) : une phrase plus
   longue sous un format ne décale ni son téléphone ni son morceau de sol.
   Le padding remplace l'écart entre colonnes, pour que les sols se touchent. */
.scene-demo {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
}
.format-demo {
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
  justify-items: center;
  row-gap: var(--espace-3);
  margin: 0;
  padding: 0 16px;
}
.format-demo .nom-format,
.format-demo .telephone { align-self: end; }
.format-demo .etiquette-verdict { align-self: start; }

.nom-format {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--taille-etiquette);
  font-weight: 600;
}
.nom-format .discret { font-weight: 500; }

.verdict-detail {
  max-width: 200px;
  font-size: 12px;
  color: var(--texte-faible);
  text-align: center;
}

.telephone {
  --largeur: 200px;
  --echelle: 0.18519;   /* 200 / 1080 */
  padding: 8px;
  border-radius: 30px;
  background: #000000;
  border: 1px solid var(--bordure);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.telephone-grand {
  --largeur: 240px;
  --echelle: 0.22222;   /* 240 / 1080 */
}

.ecran {
  position: relative;
  width: var(--largeur);
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  color: #FFFFFF;
}

.ecran-plein > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Mêmes hachures que la vue d'un format (voir .zone-masquee) : la
   démonstration montre ce que l'appli affichera vraiment. */
.zone-demo { position: absolute; }
.zm-haut   { top: 0;    left: 0; right: 0; height: calc(var(--haut) * var(--echelle) * 1px); }
.zm-bas    { bottom: 0; left: 0; right: 0; height: calc(var(--bas)  * var(--echelle) * 1px); }
.zm-gauche, .zm-droite {
  top:    calc(var(--haut) * var(--echelle) * 1px);
  bottom: calc(var(--bas)  * var(--echelle) * 1px);
}
.zm-gauche { left: 0;  width: calc(var(--gauche) * var(--echelle) * 1px); }
.zm-droite { right: 0; width: calc(var(--droite) * var(--echelle) * 1px); }

/* L'interface posée par-dessus : des places, pas des identités. */
.ui { position: absolute; display: flex; gap: 6px; }
.ui-barre { display: block; height: 6px; border-radius: var(--rayon-rond); background: currentColor; opacity: 0.9; }
.ui-rond  { display: block; flex: none; width: 22px; height: 22px; border-radius: var(--rayon-rond); background: currentColor; opacity: 0.75; }

/* Story : barre de progression, auteur, champ de réponse. */
.ui-progression { top: 8px; left: 8px; right: 8px; }
.ui-progression .ui-barre { flex: 1; height: 3px; }
.ui-auteur { top: 16px; left: 10px; align-items: center; }
.ui-auteur .ui-rond { width: 18px; height: 18px; }
.ui-auteur .ui-barre { width: 54px; }
.ui-reponse { left: 10px; right: 10px; bottom: 14px; align-items: center; }
.ui-reponse .ui-rond { width: 18px; height: 18px; }
.ui-champ { flex: 1; height: 26px; border: 1.5px solid currentColor; border-radius: var(--rayon-rond); opacity: 0.8; }

/* Publication : une carte dans un fil clair, l'image recadrée en 3:4. */
.ecran-fil { display: flex; flex-direction: column; background: #FFFFFF; color: #111111; }
.fil-barre { height: 34px; display: flex; align-items: center; padding: 0 10px; }
.fil-barre .ui-barre { width: 64px; }
.fil-entete { display: flex; align-items: center; gap: 7px; padding: 6px 10px; }
.fil-entete .ui-rond { width: 20px; height: 20px; }
.fil-entete .ui-barre { width: 70px; }
.fil-image { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; }
.fil-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fil-actions { display: flex; gap: 8px; padding: 8px 10px 6px; }
.fil-actions .ui-rond { width: 14px; height: 14px; }
.fil-texte { display: flex; flex-direction: column; gap: 6px; padding: 0 10px; }
.fil-texte .ui-barre:first-child { width: 60%; }
.fil-texte .ui-barre:last-child { width: 85%; opacity: 0.4; }

/* Partage de lien : un cadre en 1,91:1 où l'affiche est contenue, les bandes
   vides restent noires comme sur l'écran de résultats. */
.lien-image { flex: none; width: 100%; aspect-ratio: 1.91 / 1; min-height: 0; overflow: hidden; margin-top: 10px; background: #000000; }
.lien-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lien-titre { padding-top: 8px; padding-bottom: 4px; background: #F3F2EF; }

/* Le trait signal du logo devient le sol : chaque format porte son morceau,
   un pic au centre, et les morceaux se touchent d'une colonne à l'autre. */
.sol { display: flex; align-items: flex-end; justify-self: stretch; margin: -6px -16px 0; color: var(--signal); }
.sol::before, .sol::after { content: ''; flex: 1; border-bottom: 2px solid currentColor; }
.sol svg {
  display: block;
  width: 36px; height: 16px;
  flex: none;
  margin-bottom: -1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

/* Le carré de légende est celui de la vue d'un format, .carre-legende. */
.legende-demo { display: flex; align-items: flex-start; gap: var(--espace-2); }

@media (max-width: 1180px) {
  .ecran-depot { grid-template-columns: min(560px, 100%); gap: var(--espace-7); }
}

@media (max-width: 640px) {
  .ecran-depot { padding: var(--espace-5) var(--espace-4); }
  .titre-accueil { font-size: 30px; }
  .zone-depot { padding: var(--espace-5); }
  .format-secondaire { display: none; }
  .outils { gap: 0; }
  /* Avec « Nouveau visuel » et « Installer », la barre déborde à 360 px, même
     avec le seul monogramme (essayé le 12 nov. 2026). Sur téléphone, la
     marque reste à portée depuis le panneau « Rédiger avec une IA », là où
     elle sert. */
  #bouton-marque { display: none; }
  /* « Ton avis » reste accessible au bout des résultats (.fin-resultats). */
  #bouton-avis { display: none; }
}

/* ─────────────────────────── ÉCRAN DE RÉSULTATS ─────────────────────────── */

.corps {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* ── Colonne de contrôle ── */

.colonne {
  width: var(--largeur-colonne);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--espace-5);
  padding: var(--espace-5);
  background: var(--surface);
  border-right: 1px solid var(--bordure);
  overflow-y: auto;
}

/* Chaque bloc a son titre et son air : on voit où finit le visuel et où
   commencent les réseaux, sans avoir à lire. */
.colonne-bloc {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}
.colonne-bloc-reseaux {
  padding-top: var(--espace-5);
  border-top: 1px solid var(--bordure);
}
.colonne-bloc-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-2);
}

/* La vignette garde la forme du visuel, plafonnée : un carré imposé laissait
   deux bandes vides autour d'une story et prenait la moitié de la colonne. */
.vignette {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: var(--vide);
  border-radius: var(--rayon-moyen);
}

.source-nom {
  font-size: var(--taille-etiquette);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caracteristiques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-2);
  margin: 0;
}

.caracteristique {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-petit);
  background: var(--surface-haute);
  min-width: 0;
}
.caracteristique dt { color: var(--texte-faible); font-size: var(--taille-micro); }
.caracteristique dd {
  margin: 0;
  font-size: var(--taille-etiquette);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* L'avertissement IA est un conseil, pas une alerte : un filet discret à
   gauche, sans cadre complet qui le ferait passer pour une erreur. */
.colonne .notice-info {
  padding: var(--espace-1) var(--espace-3);
  border: none;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  background: none;
  line-height: 1.5;
}

.bouton-remplacer { justify-content: center; }

.filtres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-2);
}

/* La case reste dans le code pour le clavier et les lecteurs d'écran ; à
   l'écran, c'est toute la pastille qui change d'état. */
.filtre {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  font-size: var(--taille-etiquette);
  color: var(--texte-faible);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.filtre span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtre input { position: absolute; opacity: 0; pointer-events: none; }
.filtre:hover { border-color: var(--texte-faible); }
.filtre:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.filtre .marque-reseau { opacity: 0.35; }
.filtre:has(input:checked) {
  color: var(--texte-fort);
  font-weight: 600;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.filtre:has(input:checked) .marque-reseau { opacity: 1; }

.encart-payant {
  margin-top: auto;
  padding: var(--espace-3);
  border-radius: var(--rayon-moyen);
  background: var(--surface-haute);
}
.encart-payant-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2);
  margin-bottom: var(--espace-1);
  font-size: var(--taille-etiquette);
  font-weight: 600;
}

/* ── Zone centrale ── */

.resultats {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  padding: var(--espace-4) var(--espace-5);
  overflow-y: auto;
}

.resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
  flex-wrap: wrap;
}

.compteurs { display: flex; gap: var(--espace-2); flex-wrap: wrap; }

/* La couleur tient tout le compteur au lieu d'un rond posé à côté : à 8 px,
   un rond ne se lit pas, il se devine. */
.compteur {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--teinte) 40%, transparent);
  border-radius: var(--rayon-rond);
  background: color-mix(in srgb, var(--teinte) 14%, transparent);
  color: var(--teinte);
  font-size: 13px;
  font-weight: 600;
  transition: background 120ms ease, color 120ms ease;
}

/* Le filtre actif est PLEIN, les autres teintés. La différence doit se voir
   d'un coup d'oeil : c'est elle qui explique pourquoi la grille est courte. */
.compteur { gap: 6px; }

.compteur.actif {
  background: var(--teinte);
  color: var(--fond);
}
/* Compteur actif : le picto passe dans la couleur du fond, son dessin
   intérieur reprend donc la teinte pour rester visible. */
.compteur.actif .picto-verdict { --picto-creux: var(--teinte); }

.compteur:not(.actif):not(:disabled):hover {
  background: color-mix(in srgb, var(--teinte) 26%, transparent);
}

/* Un compteur à zéro ne se clique pas : il n'y aurait rien à montrer. */
.compteur:disabled { opacity: 0.4; cursor: default; }

/* Colonnes indépendantes, façon Pinterest. C'est la conséquence directe du
   choix des vrais ratios : une story est trois fois plus haute qu'un post
   paysage, des lignes laisseraient des trous béants. */
.grille {
  columns: 3;
  column-gap: var(--espace-4);
}
.grille > * { break-inside: avoid; margin-bottom: var(--espace-4); }

@media (max-width: 1280px) { .grille { columns: 2; } }

/* ─────────────────────────── CARTE DE RÉSULTAT ─────────────────────────── */

.carte {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-grand);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 120ms ease;
}
.carte:hover, .carte.active { border-color: var(--accent); }

.carte-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2);
}

.carte-titre {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
}
.carte-titre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Les actions n'apparaissent qu'au survol et au focus clavier. Visibles en
   permanence, elles feraient deux boutons par carte et rivaliseraient avec la
   seule information qui compte : le verdict. */
.carte-actions { display: flex; gap: var(--espace-1); opacity: 0; transition: opacity 120ms ease; }
.carte:hover .carte-actions,
.carte:focus-within .carte-actions { opacity: 1; }

.action-carte {
  padding: 3px 8px;
  border-radius: var(--rayon-petit);
  background: var(--surface-haute);
  font-size: 10px;
  font-weight: 500;
}
/* Le passage à Canva est un lien qui a l'air d'un bouton : sans soulignement. */
a.action-carte { color: inherit; text-decoration: none; }
.bouton-canva { justify-content: center; text-decoration: none; }

/* L'aperçu montre le ratio d'AFFICHAGE réel, pas le gabarit recommandé.
   La zone sombre est exactement la surface que le visuel ne couvre pas. */
.apercu {
  position: relative;
  /* Largeur explicite indispensable : le visuel est en position absolue, donc
     il ne pousse pas son parent. Sans width, le cadre se réduit à zéro et
     l'aperçu disparaît sans qu'aucune erreur ne le signale. */
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--rayon-moyen);
  background: var(--vide);
}
/* max-width est remise à zéro : la règle globale `img { max-width: 100% }` de
   base.css bride la largeur calculée, et un visuel que le réseau ROGNE doit
   justement déborder de son cadre. Sans cela, un recadrage s'affichait comme
   une bande vide, c'est-à-dire l'exact contraire de ce qui se passe. */
.apercu img, .apercu video { position: absolute; max-width: none; }

.carte-info { font-size: 10px; color: var(--texte-faible); }

.carte-verdict {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.carte-raison { font-size: var(--taille-etiquette); line-height: 1.45; }

/* Le bouton qui annonce le clic. Discret au repos, franc au survol : il invite
   sans se disputer l'attention avec le visuel, qui reste le sujet. */
.bouton-voir {
  justify-content: center;
  width: 100%;
  margin-top: var(--espace-1);
}
.carte:hover .bouton-voir,
.carte:focus-within .bouton-voir {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
}

/* Une carte écartée reste en retrait (pas de bouton, pas de survol), mais
   elle n'est plus grisée en bloc : son cadre vide doit se lire. */
.carte-ecartee { cursor: default; }
.carte-ecartee:hover { border-color: var(--bordure); }
.carte-ecartee .carte-titre,
.carte-ecartee .carte-info { color: var(--texte-faible); }

/* Le cadre vide, au format de l'emplacement. Pointillé comme la zone de
   dépôt : c'est une place qui attend autre chose que ce qu'on a déposé. */
.ecartee-cadre {
  height: 200px;
  max-width: 100%;
  margin: var(--espace-2) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  border: 2px dashed var(--bordure);
  border-radius: var(--rayon-moyen);
  background: var(--vide);
  color: var(--texte-faible);
}

.picto-media {
  width: 36px; height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.picto-media .plein { fill: currentColor; stroke: none; }

.ecartee-libelle { font-size: var(--taille-etiquette); font-weight: 600; text-align: center; }

/* ────────────── PIÈCES COMMUNES DU DÉTAIL D'UN FORMAT ────────────── */

.titre-emplacement {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  font-size: 14px;
  font-weight: 600;
}

/* Les zones masquées ne se montrent QUE dans la vue d'un format. Sur la
   grille, elles rendraient chaque carte illisible.
   Hachurées et non en aplat : on voit encore le visuel dessous, et le motif
   dit « zone » même à qui distingue mal le rouge. La démonstration de
   l'accueil (.zone-demo) reprend exactement le même motif. */
.zone-masquee {
  position: absolute;
  left: 0; right: 0;
}
.zone-masquee, .zone-demo {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--probleme) 40%, transparent) 0 4px,
    transparent 4px 10px);
}

.legende-zones {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-2);
  font-size: var(--taille-etiquette);
  line-height: 1.5;
  color: var(--texte-faible);
}
.carre-legende {
  width: 12px; height: 12px;
  flex: none;
  margin-top: 3px;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--probleme) 55%, transparent);
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--probleme) 75%, transparent) 0 2px,
    transparent 2px 4px);
}

/* Le filet violet à gauche fait de la consigne l'ancre visuelle du détail.
   C'est le coeur du produit, il doit se voir en premier. */
.consigne {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-3);
  border-left: 3px solid var(--accent);
  border-radius: var(--rayon-moyen);
  background: var(--surface-haute);
  white-space: pre-line;
}
.consigne-action { font-size: var(--taille-corps); font-weight: 600; }

/* Ce qu'on lit une fois se replie. Le titre reste discret et cliquable sur
   toute sa ligne, avec un chevron qui tourne à l'ouverture. */
.depliant { display: flex; flex-direction: column; gap: var(--espace-2); }
.depliant > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  list-style: none;
  cursor: pointer;
  color: var(--texte-faible);
  font-size: var(--taille-etiquette);
  font-weight: 600;
  white-space: normal;
}
.depliant > summary::-webkit-details-marker { display: none; }
.depliant > summary::before {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}
.depliant[open] > summary::before { transform: rotate(45deg); }
.depliant > summary:hover { color: var(--texte-fort); }
.depliant[open] > summary { margin-bottom: var(--espace-2); }

/* Le texte à copier : un bloc à part, pour qu'on voie tout de suite que ce
   texte n'est pas de l'interface mais du contenu à emporter. */
/* Ta publication : même cadre que le bloc de textes, juste en dessous. */
.bloc-publication {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  padding: var(--espace-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-moyen);
  background: var(--fond);
}

.champ-legende {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: var(--espace-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--surface-haute);
  color: var(--texte-fort);
  font: inherit;
  font-size: var(--taille-corps);
  line-height: 1.5;
}
.champ-legende::placeholder { color: var(--texte-faible); }

.compteur-legende {
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
  font-size: var(--taille-etiquette);
  color: var(--texte-faible);
}
.compteur-alerte { display: flex; align-items: center; gap: var(--espace-2); color: var(--texte-fort); }

.bloc-textes {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  padding: var(--espace-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-moyen);
  background: var(--fond);
}

/* Deux onglets, jamais plus : au-delà, ce ne serait plus un choix mais un
   menu, et le texte affiché passerait au second plan. */
.onglets {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--rayon-moyen);
  background: var(--surface-haute);
}

.onglet {
  flex: 1;
  padding: 7px 10px;
  border-radius: var(--rayon-petit);
  color: var(--texte-faible);
  font-size: var(--taille-etiquette);
  font-weight: 600;
  transition: background 120ms ease, color 120ms ease;
}
.onglet:hover { color: var(--texte-fort); }

.onglet.actif {
  background: var(--accent);
  color: var(--sur-accent);
}

/* Pas de hauteur limitée ici : la colonne de détail défile déjà, deux
   ascenseurs imbriqués sur la même zone rendent la lecture pénible. */
.texte-a-copier {
  padding: var(--espace-3);
  border-radius: var(--rayon-petit);
  background: var(--surface-haute);
  font-size: var(--taille-corps);
  line-height: 1.6;
  /* Les retours à la ligne du texte sont significatifs : le prompt est écrit
     en lignes courtes, une consigne par ligne. */
  white-space: pre-line;
  /* Sélectionnable à la main : on n'en copie parfois qu'un morceau. */
  user-select: text;
}

.actions-detail { display: flex; gap: var(--espace-2); }
.actions-detail .bouton { flex: 1; justify-content: center; }

/* ─────────────────────── LA VUE D'UN FORMAT ───────────────────────

   Une surimpression plein écran, posée au-dessus de toute l'application. La
   grille reste dessous, intacte : fermer, c'est retirer cette couche.

   Le fond suit le thème de l'application, et il est opaque. Opaque parce que
   le but est de ne plus voir les autres formats du tout : une grille qui
   transparaît derrière continue de tirer l'oeil. Et il suit le thème parce
   qu'on juge un visuel selon ce qui l'entoure - c'est justement à cela que
   sert la bascule sombre / clair.                                          */

.immersion {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--fond);
}

/* La page derrière ne doit plus défiler : la molette appartient à ce qui est
   au-dessus, sinon on retrouve la grille décalée en refermant. */
body.immersion-ouverte { overflow: hidden; }

.immersion-entete {
  display: flex;
  align-items: center;
  gap: var(--espace-4);
  padding: var(--espace-3) var(--espace-5);
  border-bottom: 1px solid var(--bordure);
  flex: none;
}

.immersion-rang {
  font-size: var(--taille-etiquette);
  color: var(--texte-faible);
  font-variant-numeric: tabular-nums;
}

.immersion-outils {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  margin-left: auto;
}

/* ── Le corps : l'aperçu à gauche, tout ce qu'on en dit à droite ── */

.immersion-corps {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-height: 0;
}

.immersion-scene {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-4);
  padding: var(--espace-5);
  min-width: 0;
}

/* L'aperçu peut rétrécir : à 1,91:1 et 72 vh de haut, sa largeur calculée
   dépasse l'écran et chasse les flèches hors du cadre. */
.immersion-scene .apercu { flex: 0 1 auto; }
.immersion-scene .h-scene,
.immersion-scene .h-carte { flex: 0 1 auto; }

/* Le choix de vue vit dans l'entête : il doit y tenir sans pousser le reste. */
.onglets-vue { padding: 2px; }
.onglets-vue .onglet { flex: none; padding: 5px 12px; }

.fleche {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-rond);
  background: var(--surface-haute);
  border: 1px solid var(--bordure);
  color: var(--texte-fort);
  font-size: 24px;
  line-height: 1;
  transition: background 120ms ease;
}
.fleche:hover { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }

.fleche-chevron { font-size: 24px; line-height: 1; }

/* Le mot ne sert que sur petit écran : sur un rond de 44 px, il n'entrerait
   pas, et à côté de l'aperçu le chevron suffit. */
.fleche-mot { display: none; }

/* Le détail se lit, il ne se déchiffre pas.

   Première version : 11 px pour les explications, 13 px pour la consigne. Les
   chiffres tenaient, mais personne n'avait envie d'entrer dedans - or c'est le
   coeur du produit, le reste n'est qu'un aperçu. Tout a été remonté d'un cran
   et la colonne élargie en conséquence.                                     */

.immersion-detail {
  width: var(--largeur-detail);
  font-size: var(--taille-corps);
  line-height: 1.55;
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-left: 1px solid var(--bordure);
}

/* Trois étages : la tête et le pied ne bougent pas, seul le panneau défile. */
.detail-tete {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-5) var(--espace-5) var(--espace-4);
}
.detail-tete-ligne {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-2) var(--espace-3);
}

/* Des onglets soulignés, et non le sélecteur en pastilles du texte à
   copier : ce sont deux étages de choix différents, ils ne doivent pas se
   ressembler. */
.detail-onglets {
  flex: none;
  display: flex;
  gap: var(--espace-5);
  padding: 0 var(--espace-5);
  border-bottom: 1px solid var(--bordure);
}
.detail-onglet {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-3) 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--texte-faible);
  font-size: var(--taille-corps);
  font-weight: 600;
  transition: color 120ms ease, border-color 120ms ease;
}
.detail-onglet:hover { color: var(--texte-fort); }
.detail-onglet.actif { color: var(--texte-fort); border-bottom-color: var(--accent); }

.detail-onglet-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--rayon-rond);
  background: var(--surface-haute);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.detail-onglet.actif .detail-onglet-numero { background: var(--accent); color: var(--sur-accent); }

.detail-panneau {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  padding: var(--espace-4) var(--espace-5) var(--espace-5);
}

/* Dans l'onglet, la publication n'a plus besoin de son cadre : l'onglet en
   est un. */
.detail-panneau > .bloc-publication {
  padding: 0;
  border: none;
  background: none;
}

.detail-notes {
  padding-top: var(--espace-3);
  border-top: 1px solid var(--bordure);
}

.detail-pied {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-3) var(--espace-5);
  border-top: 1px solid var(--bordure);
}

.immersion-verdict {
  font-size: var(--taille-section);
  font-weight: 600;
  line-height: 1.3;
}

.immersion-mesures { font-size: var(--taille-etiquette); color: var(--texte-faible); }

/* Les petites lignes de la colonne de détail sont des explications, pas des
   mentions légales : elles remontent à 13 px, avec de l'air entre les lignes. */
.immersion-detail .micro {
  font-size: var(--taille-etiquette);
  line-height: 1.55;
}

.immersion-detail .etiquette-section { font-size: 11px; letter-spacing: 0.07em; }

/* ── La bande de vignettes ──
   Les autres formats ne disparaissent pas, ils se rangent ici. C'est ce qui
   empêche la vue plein écran d'être un cul-de-sac. */

.immersion-bande {
  flex: none;
  display: flex;
  gap: var(--espace-2);
  padding: var(--espace-3) var(--espace-5);
  border-top: 1px solid var(--bordure);
  background: var(--surface);
  overflow-x: auto;
}

.vignette-format {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  flex: none;
  padding: var(--espace-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-moyen);
  background: var(--surface-haute);
  text-align: left;
  opacity: 0.6;
  transition: opacity 120ms ease, border-color 120ms ease;
}
.vignette-format:hover { opacity: 1; }

/* Le format ouvert reste à sa place dans la bande : le retirer ferait sauter
   la liste d'un cran à chaque changement. */
.vignette-format.active {
  opacity: 1;
  border-color: var(--accent);
}

/* Hauteur imposée, largeur déduite du ratio : .apercu est en width 100 %, ce
   qui dans une vignette la ferait déborder de son cadre. */
.vignette-format .apercu {
  flex: none;
  height: 38px;
  width: auto;
  border-radius: var(--rayon-petit);
}

.vignette-mots { display: flex; flex-direction: column; gap: 2px; }

.vignette-titre {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.vignette-format .etiquette-verdict { padding: 1px 7px; font-size: 10px; }

/* ─────────────────────────── MOBILE ───────────────────────────

   Le mobile n'est pas le bureau réduit. La colonne de contrôle n'a pas la
   place d'exister : elle se replie en un bandeau d'une ligne. La vue d'un
   format s'empile au lieu de se poser en deux colonnes, parce qu'une colonne
   de 380 px n'a aucun sens sur un écran de 390 px.                                              */

@media (max-width: 860px) {
  .corps { flex-direction: column; }

  .colonne {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: var(--espace-3);
    padding: var(--espace-3) var(--espace-4);
    border-right: none;
    border-bottom: 1px solid var(--bordure);
    overflow-x: auto;
  }
  .colonne .etiquette-section,
  .colonne .encart-payant { display: none; }

  /* Le bloc s'efface : ses éléments reprennent leur place dans le bandeau.
     Celui des réseaux disparaît, et la règle vient après : à spécificité
     égale, « contents » l'aurait réaffiché. */
  .colonne-bloc { display: contents; }
  .colonne-bloc.colonne-bloc-reseaux { display: none; }
  .caracteristiques { display: flex; flex-wrap: wrap; }
  .caracteristique { padding: var(--espace-1) var(--espace-2); }
  .source-nom { max-width: 50%; }

  .vignette { width: 52px; height: 52px; flex: none; }

  /* Le bandeau passe à la ligne plutôt que de tout serrer : sans cela,
     l'avertissement IA tenait dans une colonne de trois mots et les
     dimensions se coupaient en « 1080 / x / 1920 ». */
  .colonne { flex-wrap: wrap; overflow-x: visible; }
  .colonne .notice { flex-basis: 100%; max-width: none; }
  .caracteristique dd { white-space: nowrap; }

  .grille { columns: 1; }

  /* Pas de survol sur téléphone : les actions ne peuvent pas être cachées.
     Elles passent sous le titre, qui garde ainsi toute la largeur. */
  .carte-actions { opacity: 1; }
  .carte-entete { flex-wrap: wrap; row-gap: var(--espace-2); }
  .action-carte { white-space: nowrap; }

  /* La vue d'un format s'empile : l'aperçu, puis ce qu'on en dit. Côte à côte,
     il resterait 100 px pour le visuel. */
  .immersion-corps { flex-direction: column; overflow-y: auto; }

  /* L'entête tient sur deux lignes : le nom et le rang d'abord, les deux
     boutons ensuite, sur toute la largeur. Sur une seule ligne, « LinkedIn -
     Partage de lien » se coupait en trois et « 1 sur 7 » en autant. */
  .immersion-entete { flex-wrap: wrap; row-gap: var(--espace-2); gap: var(--espace-3); }
  .immersion-entete .titre-emplacement { font-size: var(--taille-corps); }
  .immersion-outils { width: 100%; margin-left: 0; }
  .immersion-outils > * { flex: 1 1 0; justify-content: center; text-align: center; }
  /* Les deux onglets portent plus de texte que « Tout revoir » : à parts
     égales, « En situation » sortait de l'écran par la gauche. Deux tiers
     pour eux, un tiers pour le bouton. */
  .immersion-outils > .onglets-vue { flex-grow: 2; min-width: 0; }
  .onglets-vue .onglet { flex: 1; padding-left: var(--espace-1); padding-right: var(--espace-1); font-size: 12px; white-space: nowrap; }

  /* Les flèches deviennent deux vraies commandes sous l'aperçu, à parts
     égales. Rondes et centrées, elles flottaient au milieu du vide et
     tombaient sous la taille minimale d'une cible tactile. */
  /* Une grille, et non un flex qui passe à la ligne : avec un aperçu étroit
     comme une story, une flèche se glissait à côté de lui et l'autre passait
     dessous. Ici les places sont assignées, le résultat ne dépend plus de la
     largeur du visuel. */
  .immersion-scene {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: var(--espace-3);
    padding: var(--espace-3);
  }
  /* Tout ce qui n'est pas une flèche prend la largeur : l'aperçu nu comme
     l'aperçu en situation (.h-carte, .h-scene). Sans cela, la carte restait
     dans la première colonne, à mi-largeur, le texte coupé mot par mot. */
  .immersion-scene > :not(.fleche) { grid-row: 1; grid-column: 1 / -1; justify-self: center; }

  .fleche {
    grid-row: 2;
    width: auto;
    height: 48px;
    gap: var(--espace-2);
    border-radius: var(--rayon-moyen);
    font-size: var(--taille-etiquette);
    font-weight: 600;
  }
  .fleche-gauche { grid-column: 1; }
  .fleche-droite { grid-column: 2; flex-direction: row-reverse; }
  .fleche-mot { display: inline; }

  .immersion-detail {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--bordure);
    overflow: visible;
  }
  .detail-panneau { overflow: visible; }
  .detail-onglet { flex: 1; justify-content: center; }
  .detail-tete,
  .detail-onglets,
  .detail-panneau,
  .detail-pied { padding-left: var(--espace-4); padding-right: var(--espace-4); }

  .immersion-entete,
  .immersion-bande { padding-left: var(--espace-4); padding-right: var(--espace-4); }
}


/* ─────────────────────── PRÉPARER AVEC UNE IA ───────────────────────

   Une boîte de dialogue au-dessus de la vue d'un format. Une seule colonne,
   lue de haut en bas : formulaire, consigne, réponse. Elle défile seule,
   la vue dessous ne bouge pas.                                             */

.bouton-ia { justify-content: center; }

/* Un lien qui agit sur place : souligné pour se lire comme une action, sans
   le poids d'un bouton à côté d'une simple note. */
.bouton-lien {
  padding: 0;
  color: var(--accent);
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bouton-lien:hover { color: var(--texte-fort); }

.note-legende-propre { display: flex; flex-wrap: wrap; gap: var(--espace-1) var(--espace-2); align-items: baseline; }

.apercu-coupure { color: var(--texte-fort); font-style: italic; }

.texte-en-plus { display: flex; flex-direction: column; gap: var(--espace-2); }
.texte-en-plus-titre { font-size: var(--taille-etiquette); font-weight: 600; color: var(--texte-faible); }

.champ-alt { min-height: 64px; }

/* ─────────────────────── AVANT DE PUBLIER ───────────────────────
   Posée à plat sous un filet, comme les parties de la fenêtre « Ta marque » :
   pas de boîte dans la boîte. Les vérifications portent la teinte de leur
   verdict sur le picto seulement ; la phrase reste dans la couleur du texte
   pour se lire. Les rappels se cochent et s'éteignent, comme les étapes.  */

.avant-de-publier {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding-top: var(--espace-3);
  border-top: 1px solid var(--bordure);
}
.avant-titre { font-size: var(--taille-corps); font-weight: 700; color: var(--texte-fort); }
.avant-sous-titre {
  font-size: var(--taille-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-faible);
}
.avant-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-2); }

.avant-ligne {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--espace-2);
  align-items: start;
  font-size: var(--taille-etiquette);
  color: var(--texte-fort);
  line-height: 1.45;
}
.avant-ligne .picto-verdict { color: var(--teinte); width: 16px; height: 16px; margin-top: 2px; }
.avant-mots { display: flex; flex-wrap: wrap; gap: 2px var(--espace-2); align-items: baseline; }
/* Le verdict en toutes lettres pour les lecteurs d'écran : à l'œil, la phrase
   dit déjà « retires-en 1 » ou « prêt », le mot ferait doublon.            */
.avant-verdict {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.avant-source {
  font-size: var(--taille-micro);
  color: var(--texte-faible);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.avant-source:hover { color: var(--texte-fort); }

.avant-rappel-ligne {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--espace-2);
  align-items: start;
  font-size: var(--taille-etiquette);
  color: var(--texte-fort);
  line-height: 1.45;
  cursor: pointer;
}
.avant-rappel-ligne input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.avant-rappel.faite span { text-decoration: line-through; color: var(--texte-faible); }

.preparation {
  width: min(720px, calc(100vw - 2 * var(--espace-4)));
  max-height: calc(100vh - 2 * var(--espace-5));
  padding: var(--espace-5);
  /* Une fenêtre flottante doit se détacher de l'appli : sa propre teinte (une
     lueur violette, la couleur des actions, en haut), un contour teinté, une
     ombre profonde, et l'appli floutée derrière. Sans cela, gris sur gris,
     elle se confondait avec l'écran du dessous. */
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--bordure));
  border-radius: var(--rayon-grand);
  background:
    radial-gradient(90% 340px at 15% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent),
    radial-gradient(60% 280px at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent),
    color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  color: var(--texte-fort);
  overflow-y: auto;
}
.preparation::backdrop { background: rgba(6, 7, 12, 0.72); backdrop-filter: blur(6px); }
.preparation[open] { display: flex; flex-direction: column; gap: var(--espace-4); }

.preparation-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); }
.preparation-titre { font-size: var(--taille-section); font-weight: 700; }

.preparation-temps {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  padding: var(--espace-4);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-moyen);
  background: color-mix(in srgb, var(--surface-haute) 45%, transparent);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--bordure));
}
.preparation-temps h3 { margin: 0; }

/* Les pastilles : des radios dont seul le libellé se voit. La radio reste
   dans le flux (et non display:none) pour garder le clavier et le lecteur
   d'écran ; c'est le contour de la pastille qui montre le focus. */
.pastilles, .choix-accroche { margin: 0; padding: 0; border: none; display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.pastilles-titre { width: 100%; padding: 0; margin-bottom: var(--espace-2); font-size: var(--taille-etiquette); font-weight: 600; }

.pastille {
  position: relative;
  padding: 6px 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-rond);
  background: var(--surface-haute);
  font-size: var(--taille-etiquette);
  font-weight: 500;
  cursor: pointer;
}
.pastille input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pastille:hover { border-color: var(--texte-faible); }
.pastille:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.pastille:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }

.preparation-champ { display: flex; flex-direction: column; gap: var(--espace-1); }
.preparation-libelle { font-size: var(--taille-etiquette); font-weight: 600; }

.champ-texte {
  width: 100%;
  padding: 9px var(--espace-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--surface-haute);
  color: var(--texte-fort);
  font: inherit;
  font-size: var(--taille-corps);
}
.champ-texte::placeholder { color: var(--texte-faible); }

.preparation-options summary { cursor: pointer; font-size: var(--taille-etiquette); font-weight: 600; color: var(--texte-faible); }
.preparation-options summary:hover { color: var(--texte-fort); }
.preparation-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-3); margin-top: var(--espace-3); }

.champ-consigne { font-size: var(--taille-etiquette); line-height: 1.5; }
.champ-legende:disabled { opacity: 0.5; }

.boutons-ia { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.boutons-ia .bouton { flex: 1 1 120px; justify-content: center; }
.bouton:disabled { opacity: 0.4; cursor: default; }
.bouton:disabled:hover { background: var(--surface-haute); }

.bilan-rangement { display: flex; flex-direction: column; gap: var(--espace-2); }
.bilan-rangement:empty { display: none; }

.choix-accroche { flex-direction: column; flex-wrap: nowrap; margin-top: var(--espace-2); }
.accroche {
  display: flex;
  gap: var(--espace-2);
  align-items: flex-start;
  padding: var(--espace-2) var(--espace-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--surface-haute);
  color: var(--texte-fort);
  cursor: pointer;
}
.accroche input { margin-top: 4px; accent-color: var(--accent); }
.accroche:has(input:checked) { border-color: var(--accent); }

@media (max-width: 640px) {
  .preparation { padding: var(--espace-4); max-height: calc(100vh - 2 * var(--espace-4)); }
  .preparation-grille { grid-template-columns: 1fr; }
}


/* ─────────────────────────── LA BULLE ───────────────────────────
   Placée par ui.js, en position fixe pour ne jamais être coupée par un
   panneau qui défile. Couleurs inversées : elle se détache des deux thèmes. */

.bulle {
  position: fixed;
  z-index: 100;
  max-width: 260px;
  padding: 8px 12px;
  border-radius: var(--rayon-petit);
  background: var(--texte-fort);
  color: var(--fond);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}


/* ─────────────── LA CONSIGNE SORT DU PANNEAU ───────────────
   C'est la phrase que le client doit lire en premier : elle déborde du
   panneau vers l'aperçu et s'allume doucement à l'ouverture.

   Le panneau défile, et un bloc qui défile coupe tout ce qui dépasse. Il est
   donc élargi vers la gauche, sur l'aperçu, avec une marge intérieure égale :
   ses contenus restent à leur place, la consigne seule profite de la place
   gagnée. Il est transparent, l'aperçu reste visible dessous.

   Le contour et la lueur sont en cyan, la signature du logo : un filet, pas
   un aplat, ce qui reste dans la règle des deux couleurs (tokens.css).               */

.immersion-detail { position: relative; z-index: 2; }

.detail-panneau {
  margin-left: calc(-1 * var(--espace-7));
  padding-left: calc(var(--espace-7) + var(--espace-5));
}

.detail-panneau > .consigne {
  margin-left: calc(-1 * var(--espace-7));
  border: 1px solid color-mix(in srgb, var(--signal) 55%, transparent);
  border-left: 4px solid var(--signal);
  border-radius: var(--rayon-grand);
  padding: var(--espace-4) var(--espace-5);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.45),
    0 0 36px color-mix(in srgb, var(--signal) 30%, transparent);
  animation: consigne-lueur 1.6s ease-out 1;
}
.detail-panneau > .consigne .consigne-action { font-size: var(--taille-section); line-height: 1.3; }

/* La lueur monte puis se pose : on attire l'oeil une fois, sans clignoter. */
@keyframes consigne-lueur {
  0%   { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 color-mix(in srgb, var(--signal) 0%, transparent); }
  40%  { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 70px color-mix(in srgb, var(--signal) 60%, transparent); }
  100% { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 36px color-mix(in srgb, var(--signal) 30%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .detail-panneau > .consigne { animation: none; }
}

/* Rien à faire : le vert du OK, sans lueur. Il n'y a rien à attirer. */
.detail-panneau > .consigne-rien {
  border-color: color-mix(in srgb, var(--ok) 50%, transparent);
  border-left-color: var(--ok);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  animation: none;
}

@media (max-width: 860px) {
  .detail-panneau { margin-left: 0; padding-left: var(--espace-4); }
  .detail-panneau > .consigne { margin-left: 0; }
}


/* ─────────────────────────── LES ÉTAPES ───────────────────────────
   Une ligne par geste : picto, nom, chiffre. Le nom en colonne fixe, pour
   que les chiffres s'alignent et se lisent de haut en bas. Une étape cochée
   s'éteint et se barre : ce qui reste à faire ressort.                     */

.etapes {
  list-style: none;
  margin: var(--espace-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.etape-ligne {
  display: grid;
  grid-template-columns: 18px 18px 74px 1fr;
  align-items: start;
  gap: var(--espace-2);
  padding: 7px var(--espace-2);
  border-radius: var(--rayon-petit);
  cursor: pointer;
  white-space: normal;
  transition: background 120ms ease;
}
.etape-ligne:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.etape-ligne input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.etape-picto {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.etape-nom {
  color: var(--texte-faible);
  font-size: var(--taille-etiquette);
  font-weight: 600;
}

.etape-valeur {
  font-size: var(--taille-etiquette);
  font-weight: 600;
  color: var(--texte-fort);
  line-height: 1.45;
}

.etape.faite .etape-valeur { text-decoration: line-through; color: var(--texte-faible); font-weight: 500; }
.etape.faite .etape-picto { stroke: var(--texte-faible); }

.texte-titre {
  font-size: var(--taille-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texte-faible);
}

/* ── « À faire » sur une carte de la grille ──
   Le même violet que la consigne dans la vue d'un format : on reconnaît la
   même information aux deux endroits. */
.carte-a-faire {
  display: flex;
  align-items: baseline;
  gap: var(--espace-2);
  padding: var(--espace-2) var(--espace-3);
  border-left: 3px solid var(--accent);
  border-radius: var(--rayon-petit);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: var(--taille-etiquette);
  font-weight: 600;
  color: var(--texte-fort);
}
.carte-a-faire-mot {
  flex: none;
  color: var(--accent);
  font-size: var(--taille-micro);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}


/* Sur téléphone, la valeur passe sous le nom de l'étape : à côté, dans
   200 px, elle se coupait sur quatre lignes. Et la phrase sur Échap et les
   flèches n'a pas de sens sans clavier. */
@media (max-width: 860px) {
  .etape-ligne { grid-template-columns: 18px 18px 1fr; row-gap: 2px; }
  .etape-valeur { grid-column: 3; }
  .detail-pied > .micro { display: none; }
}

/* ─────────────────────────── LA FENÊTRE « TA MARQUE » ───────────────────────────

   Plus large que le panneau de rédaction : à gauche le formulaire, à droite
   la carte de la marque, qui reste en vue pendant qu'on fait défiler. Le
   pied (statut, export, import) reste collé en bas.

   Pas de boîtes dans des boîtes : les parties du formulaire sont posées à
   même la fenêtre, séparées par un filet et de l'espace. Seule la carte de
   droite est un objet, parce qu'elle représente quelque chose : la marque.

   Couleurs : violet pour ce qui est choisi (la règle des actions), cyan en
   filet seulement (le trait sous la bannière, la jauge, ce que l'IA reçoit),
   comme la consigne de la vue d'un format.                                 */

.ligne-marque { padding: 0 var(--espace-1); }

.preparation.profil {
  width: min(1080px, calc(100vw - 2 * var(--espace-4)));
  padding: var(--espace-6) var(--espace-6) 0;
  gap: var(--espace-5);
}

/* ─────────────────────── TON AVIS ───────────────────────
   La fenêtre de « Ta marque », en une colonne : un message se lit et
   s'écrit d'un bloc, sans carte à côté.                                   */

.preparation.profil.avis { width: min(600px, calc(100vw - 2 * var(--espace-4))); }
.avis-corps { display: flex; flex-direction: column; gap: var(--espace-4); }
.avis-case {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--espace-2);
  align-items: start;
  font-size: var(--taille-etiquette);
  cursor: pointer;
}
.avis-case input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.avis-case-mots { display: flex; flex-direction: column; gap: 2px; }

/* La mention du lancement : sur l'accueil sous la promesse, et au bout des
   résultats avec l'accès à « Ton avis ».                                  */
.lancement { font-size: var(--taille-etiquette); }
.fin-resultats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1) var(--espace-2);
  align-items: baseline;
  justify-content: center;
  padding: var(--espace-3) 0 var(--espace-2);
  font-size: var(--taille-etiquette);
}

/* L'en-tête : un surtitre au trait cyan, un vrai titre, une croix ronde. */
.profil-entete { align-items: flex-start; }
.profil-titres { display: flex; flex-direction: column; gap: var(--espace-2); max-width: 62ch; }
.profil-surtitre {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  font-size: var(--taille-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.profil-surtitre::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--signal); }
.profil-titre { font-size: var(--taille-titre); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.profil-intro { font-size: 14px; line-height: 1.5; color: var(--texte-faible); }
.profil-fermer {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--bordure));
  border-radius: var(--rayon-rond);
  background: color-mix(in srgb, var(--surface-haute) 60%, transparent);
  color: var(--texte-faible);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.profil-fermer:hover { background: var(--surface-haute); color: var(--texte-fort); }
.profil-fermer:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.profil-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: var(--espace-6);
  align-items: start;
}
.profil-formulaire { display: flex; flex-direction: column; min-width: 0; }

/* Une partie du formulaire : à plat, séparée de la suivante par un filet. */
.profil-bloc {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  padding: var(--espace-5) 0 var(--espace-6);
  border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--bordure));
}
.profil-bloc:first-child { border-top: none; padding-top: 0; }
.profil-bloc-tete { display: flex; gap: var(--espace-3); align-items: center; }
.profil-bloc-tete .micro { font-size: var(--taille-etiquette); margin-top: 2px; }
.profil-numero {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--rayon-rond);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000));
  color: var(--sur-accent);
  font-size: var(--taille-etiquette);
  font-weight: 800;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.profil-bloc-titre { font-size: 17px; font-weight: 700; }

.profil-champ-groupe { margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: var(--espace-2); min-width: 0; }
.profil-champ-groupe legend { padding: 0; margin-bottom: var(--espace-2); }

/* Les champs de la fenêtre : un peu de la teinte, et un vrai halo au focus. */
.profil .champ-texte {
  padding: 11px var(--espace-3);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--bordure));
  border-radius: var(--rayon-moyen);
  background: color-mix(in srgb, var(--surface-haute) 70%, transparent);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.profil .champ-texte:focus,
.profil .champ-texte:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.profil textarea.champ-texte { resize: vertical; line-height: 1.45; }

/* Les segments : un interrupteur à plusieurs positions. */
.segments {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--bordure));
  border-radius: var(--rayon-moyen);
  background: color-mix(in srgb, var(--surface-haute) 70%, transparent);
  width: fit-content;
  max-width: 100%;
}
.segment {
  position: relative;
  padding: 8px 16px;
  border-radius: var(--rayon-petit);
  font-size: var(--taille-etiquette);
  font-weight: 600;
  color: var(--texte-faible);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segment:hover { color: var(--texte-fort); }
.segment:has(input:checked) { background: var(--accent); color: var(--sur-accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 40%, transparent); }
.segment:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Les tons en cartes : le nom, la phrase qui le fait entendre, une coche. */
.cartes-ton { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-3); }
.carte-ton {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--espace-4);
  padding-right: calc(var(--espace-4) + 28px);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--bordure));
  border-radius: var(--rayon-moyen);
  background: color-mix(in srgb, var(--surface-haute) 55%, transparent);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.carte-ton input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.carte-ton:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--bordure)); transform: translateY(-1px); }
.carte-ton-nom { font-size: 14px; font-weight: 700; }
.carte-ton-exemple { font-size: var(--taille-etiquette); line-height: 1.5; color: var(--texte-faible); font-style: italic; }
.carte-ton-coche {
  position: absolute;
  top: var(--espace-3);
  right: var(--espace-3);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--rayon-rond);
  border: 1.5px solid var(--bordure);
  font-size: 11px;
  font-weight: 800;
  color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.carte-ton-ia { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: var(--espace-3); padding-top: var(--espace-3); padding-bottom: var(--espace-3); }
.carte-ton-ia .carte-ton-exemple { font-style: normal; }
.carte-ton-ia .carte-ton-coche { top: 50%; transform: translateY(-50%); }
/* Choisie : fond teinté, contour et coche pleine. La couleur n'est jamais seule. */
.carte-ton:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.carte-ton:has(input:checked) .carte-ton-coche { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.carte-ton:has(input:checked) .carte-ton-exemple { color: var(--texte-fort); }
.carte-ton:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Les étiquettes : hashtags et mots à éviter. */
.jetons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 46px;
  padding: 6px var(--espace-2);
  cursor: text;
}
.jeton {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 4px 11px;
  border-radius: var(--rayon-rond);
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-size: var(--taille-etiquette);
  font-weight: 600;
}
/* À éviter : barré, en plus du libellé. Gris et non rouge, ce n'est pas une erreur. */
.jetons-a-eviter .jeton { background: var(--surface); border-color: var(--bordure); }
.jetons-a-eviter .jeton-texte { text-decoration: line-through; text-decoration-color: var(--texte-faible); color: var(--texte-faible); }
.jeton-retirer {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: var(--rayon-rond);
  background: transparent;
  color: var(--texte-faible);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.jeton-retirer:hover { background: var(--surface-haute); color: var(--texte-fort); }
.jetons-saisie {
  flex: 1 1 120px;
  min-width: 100px;
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--texte-fort);
  font: inherit;
  font-size: var(--taille-corps);
  outline: none;
}
.jetons-saisie::placeholder { color: var(--texte-faible); }

/* ── La carte de la marque : un profil, avec sa bannière ── */

.profil-apercu {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--bordure));
  border-radius: var(--rayon-grand);
  background: color-mix(in srgb, var(--surface-haute) 80%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* La bannière violette et son filet cyan, la signature du logo. */
.profil-couverture {
  position: relative;
  height: 88px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, #FFFFFF 18%, transparent), transparent 55%),
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #0A0C0F));
  border-bottom: 2px solid var(--signal);
}
.profil-monogramme {
  position: absolute;
  left: var(--espace-5);
  bottom: -30px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--rayon-moyen);
  border: 3px solid var(--surface-haute);
  background: var(--surface);
  color: var(--texte-fort);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.profil-monogramme-vide { color: var(--texte-faible); border-style: dashed; border-color: var(--bordure); }

.profil-carte-corps { display: flex; flex-direction: column; gap: var(--espace-3); padding: 44px var(--espace-5) var(--espace-4); }
.profil-nom { font-size: var(--taille-section); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.profil-activite { margin-top: -6px; font-size: var(--taille-etiquette); color: var(--texte-faible); overflow-wrap: anywhere; }

.profil-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.profil-etiquette {
  padding: 4px 10px;
  border-radius: var(--rayon-rond);
  border: 1px solid var(--bordure);
  background: var(--surface);
  font-size: var(--taille-micro);
  font-weight: 600;
}
.profil-etiquette-libre { border-style: dashed; background: transparent; }

.profil-jauge { display: flex; flex-direction: column; gap: 6px; }
.profil-jauge-piste { height: 3px; border-radius: var(--rayon-rond); background: var(--bordure); overflow: hidden; }
.profil-jauge-plein { height: 100%; background: var(--signal); transition: width 0.25s ease; }

.profil-carte-bas {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  padding: var(--espace-4) var(--espace-5) var(--espace-5);
  border-top: 1px solid var(--bordure);
}
.profil-bloc-apercu { display: flex; flex-direction: column; gap: var(--espace-2); }
.profil-apercu-titre { font-size: var(--taille-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-faible); }

/* Une publication dans un fil neutre : en-tête, visuel, légende. */
.profil-post {
  overflow: hidden;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-moyen);
  background: var(--surface);
}
.profil-post-tete { display: flex; align-items: center; gap: var(--espace-2); padding: 10px var(--espace-3); font-size: var(--taille-etiquette); }
.profil-post-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--rayon-rond);
  background: var(--accent);
  color: var(--sur-accent);
  font-size: 10px;
  font-weight: 800;
}
.profil-post-visuel {
  height: 54px;
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--bordure) 60%, transparent) 8px 9px),
    var(--surface-haute);
}
.profil-legende {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px var(--espace-3) var(--espace-3);
  font-size: var(--taille-etiquette);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.profil-legende-suggere { color: var(--texte-faible); }
.profil-legende-signature { white-space: pre-line; font-weight: 500; }
.profil-legende-hashtags { color: var(--accent); font-weight: 600; }
.profil-legende-manque { color: var(--texte-faible); font-style: italic; }

/* Ce que l'IA reçoit : replié, avec son compte ; ouvert, le filet cyan. */
.profil-ia { border: 1px solid var(--bordure); border-radius: var(--rayon-moyen); background: var(--surface); }
.profil-ia-resume {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  padding: 10px var(--espace-3);
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
}
.profil-ia-resume::-webkit-details-marker { display: none; }
.profil-ia-resume::before {
  content: '›';
  display: inline-block;
  width: 10px;
  color: var(--texte-faible);
  font-size: 16px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.profil-ia[open] .profil-ia-resume::before { transform: rotate(90deg); }
.profil-ia-titre { flex: 1; }
.profil-ia-compte {
  padding: 2px 8px;
  border-radius: var(--rayon-rond);
  background: var(--surface-haute);
  color: var(--texte-faible);
  font-size: var(--taille-micro);
  font-weight: 600;
}
.profil-ia-resume:hover .profil-ia-titre { color: var(--texte-fort); }
.profil-ia-resume:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; border-radius: var(--rayon-moyen); }
.profil-ia-contenu {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  margin: 0 var(--espace-3) var(--espace-3);
  padding: var(--espace-3) var(--espace-3) var(--espace-3) var(--espace-4);
  border-left: 3px solid var(--signal);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  background: var(--surface-haute);
}
.profil-ia-explication { font-size: var(--taille-etiquette); line-height: 1.5; color: var(--texte-faible); }
.profil-ia-liste {
  margin: 0;
  padding-left: var(--espace-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--taille-etiquette);
  line-height: 1.5;
  color: var(--texte-fort);
  overflow-wrap: anywhere;
}
.profil-ia-liste li::marker { color: var(--signal); }

/* Le pied collé en bas : on sait toujours que c'est enregistré. */
.profil-pied {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3) var(--espace-5);
  margin: 0 calc(-1 * var(--espace-6));
  padding: var(--espace-4) var(--espace-6);
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--bordure));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.profil-pied-texte { display: flex; flex-direction: column; gap: 2px; max-width: 560px; }
.profil-pied-actions { display: flex; gap: var(--espace-2); }
.profil-retour { flex-basis: 100%; }
.profil-retour:empty { display: none; }
.profil-statut { font-size: var(--taille-etiquette); font-weight: 600; }
.profil-statut::before { content: '✓ '; color: var(--texte-faible); }
.profil-statut-ok::before { color: var(--ok); }

@media (max-width: 860px) {
  .profil-colonnes { grid-template-columns: minmax(0, 1fr); }
  /* Sur une colonne, la carte passe sous le formulaire et ne colle plus. */
  .profil-apercu { position: static; order: 2; }
}

@media (max-width: 640px) {
  .preparation.profil { padding: var(--espace-5) var(--espace-4) 0; }
  .profil-titre { font-size: 22px; }
  .cartes-ton { grid-template-columns: minmax(0, 1fr); }
  .carte-ton-ia { flex-direction: column; }
  /* Collé en bas, le pied mangerait un tiers de l'écran : il reprend sa
     place, à la fin, après la carte. */
  .profil-pied { position: static; margin: 0 calc(-1 * var(--espace-4)); padding: var(--espace-4); }
  /* Les segments prennent toute la largeur et se partagent les lignes. */
  .segments { width: 100%; }
  .segment { flex: 1 1 auto; text-align: center; padding: 8px 10px; }
  .profil-pied-actions { width: 100%; }
  .profil-pied-actions .bouton { flex: 1; justify-content: center; }
}

/* ─────────────────────────── LE SÉLECTEUR DE MARQUE ───────────────────────────

   Dans la barre : le monogramme et le nom de la marque en cours. Le menu
   flotte sous le bouton, teinté comme les autres fenêtres flottantes. Le
   violet marque la marque en cours, le mot « en cours » le dit aussi.       */

.selecteur-marque { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; }
.selecteur-nom { overflow: hidden; text-overflow: ellipsis; }
.selecteur-fleche { font-size: 10px; opacity: 0.7; }

.selecteur-pastille {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--rayon-petit);
  background: var(--accent);
  color: var(--sur-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.selecteur-pastille-vide { background: transparent; color: var(--texte-faible); border: 1px dashed var(--bordure); }

.menu-marques {
  position: fixed;
  z-index: 50;
  width: min(300px, calc(100vw - 16px));
  padding: var(--espace-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-moyen);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.menu-marques-titre { padding: 6px 10px 8px; font-size: var(--taille-etiquette); font-weight: 700; color: var(--texte-fort); overflow-wrap: anywhere; }
.menu-marques-explication { padding: 0 10px 10px; }

.menu-marques-liste { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.menu-marques-choix,
.menu-marques-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--texte-fort);
  font: inherit;
  font-size: var(--taille-etiquette);
  text-align: left;
  cursor: pointer;
}
.menu-marques-choix:hover,
.menu-marques-action:hover:not(:disabled) { background: var(--surface-haute); }
.menu-marques-action:disabled { opacity: 0.5; cursor: not-allowed; }
.menu-marques-choix-en-cours { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.menu-marques-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-marques-en-cours { font-size: var(--taille-micro); color: var(--texte-faible); }

.menu-marques-actions { margin-top: var(--espace-2); padding-top: var(--espace-2); border-top: 1px solid var(--bordure); }
.menu-marques-action { color: var(--texte-faible); }
.menu-marques-action:hover:not(:disabled) { color: var(--texte-fort); }
.menu-marques-danger:hover:not(:disabled) { color: var(--probleme); }

.menu-marques-confirmation { display: flex; justify-content: flex-end; gap: var(--espace-2); padding: 0 10px 6px; }
.bouton-danger { background: var(--probleme); border-color: var(--probleme); color: #FFFFFF; }
.bouton-danger:hover { filter: brightness(1.08); }

/* ─────────────────────────── LE RECADRAGE ───────────────────────────

   L'image entière, assombrie, et le cadre au ratio du format qui seul reste
   clair. Le filet du cadre est cyan : c'est un repère, pas un bouton.        */

.recadrage { width: min(760px, calc(100vw - 2 * var(--espace-4))); }
.recadrage-corps { display: flex; flex-direction: column; gap: var(--espace-3); min-height: 0; overflow-y: auto; }

.recadrage-scene {
  position: relative;
  align-self: center;
  overflow: hidden;
  border-radius: var(--rayon-petit);
  background: var(--vide);
  user-select: none;
}
.recadrage-image { display: block; max-width: none; pointer-events: none; }

.recadrage-cadre {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--signal);
  box-shadow: 0 0 0 9999px rgba(6, 7, 12, 0.62);
  cursor: grab;
  touch-action: none;
}
.recadrage-cadre:focus-visible { outline: 2px solid var(--texte-fort); outline-offset: 2px; }
.recadrage-cadre-saisi { cursor: grabbing; }
.recadrage-zone-gauche, .recadrage-zone-droite { top: 0; bottom: 0; left: auto; right: auto; }
.recadrage-zone-gauche { left: 0; }
.recadrage-zone-droite { right: 0; }

.recadrage-reglages { display: flex; align-items: center; gap: var(--espace-3); }
.recadrage-curseur { flex: 1; accent-color: var(--accent); }
.recadrage-info { color: var(--texte-faible); }
.recadrage-info-alerte { color: var(--attention); }

.recadrage-pied { display: flex; justify-content: flex-end; gap: var(--espace-2); }

.recadrage-ailleurs { display: flex; flex-direction: column; gap: var(--espace-2); }
.recadrage-ailleurs-ligne {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: 10px 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  font-size: var(--taille-etiquette);
  cursor: pointer;
}
.recadrage-ailleurs-ligne input { accent-color: var(--accent); width: 16px; height: 16px; }

/* Dans l'onglet Corriger : Canva et Recadrer côte à côte. */
.actions-corriger { display: flex; flex-wrap: wrap; gap: var(--espace-2); }

/* Un format jugé sur sa version : le mot sur la carte, la note dans l'onglet. */
.etiquette-version {
  margin-left: var(--espace-2);
  padding: 2px 8px;
  border-radius: var(--rayon-rond);
  border: 1px solid color-mix(in srgb, var(--signal) 55%, transparent);
  color: var(--texte-fort);
  font-size: var(--taille-micro);
  font-weight: 600;
  white-space: nowrap;
}
.notice-version { display: flex; flex-direction: column; gap: 6px; border-left: 3px solid var(--signal); }
.notice-version-actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); }

/* ─────────────────────────── LA RECOMPOSITION ───────────────────────────

   Trois étapes numérotées, comme les onglets du détail. La zone de dépôt
   reprend le pointillé de l'accueil : on reconnaît le geste.                */

.recomposition { width: min(680px, calc(100vw - 2 * var(--espace-4))); }
.recomposition-etape { display: flex; flex-direction: column; gap: var(--espace-2); }
.recomposition-etape + .recomposition-etape { padding-top: var(--espace-3); border-top: 1px solid var(--bordure); }
.recomposition-etape-tete { display: flex; align-items: center; gap: var(--espace-2); }
.recomposition-etape-tete h3 { margin: 0; }
.recomposition-consigne { width: 100%; resize: vertical; font-size: var(--taille-etiquette); line-height: 1.5; }
.recomposition-assistants { display: flex; flex-wrap: wrap; gap: var(--espace-2); }

.recomposition-depot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2) var(--espace-3);
  padding: var(--espace-5) var(--espace-4);
  border: 1.5px dashed color-mix(in srgb, var(--signal) 55%, var(--bordure));
  border-radius: var(--rayon-moyen);
  font-size: var(--taille-etiquette);
  color: var(--texte-faible);
  text-align: center;
}
.recomposition-depot p { margin: 0; }
.recomposition-depot.survolee { background: color-mix(in srgb, var(--signal) 8%, transparent); border-style: solid; }

/* Les idées du mois : la date, plus discrète que le nom du temps fort. */
.temps-fort-date { color: var(--texte-faible); font-weight: 400; }
.pastille input:checked + span .temps-fort-date { color: inherit; opacity: 0.8; }

/* Les versions mises de côté au remplacement du visuel : une ligne entière
   sous les compteurs. */
.note-versions-retirees { flex-basis: 100%; max-width: none; }