/* client.css — registre « espace client » de Claude Design/design.md.
 *
 * Servi depuis public/, donc lisible sans session : il ne contient aucune
 * donnée, seulement la charte. Les pages de /app le chargent par la même URL,
 * ce qui évite d'en tenir deux copies.
 *
 * Règles non négociables reprises de design.md : corps jamais sous 16 px,
 * cibles tactiles ≥ 48 px, une seule action principale en accent par écran,
 * aucune ombre portée sur les cartes.
 */

:root {
  color-scheme: light dark;

  --fond: #F7F8F9;
  --surface: #FFFFFF;
  --surface-basse: #ECEFF2;
  --bordure: #DDE2E7;
  --bordure-forte: #C6CDD4;
  --separateur: #EDF0F2;

  --encre: #16212B;
  --encre-2: #3A4A57;
  --encre-3: #4A5A67;
  --encre-4: #55636F;

  --accent: #1F5C82;
  --accent-survol: #17455F;
  --accent-encre: #FFFFFF;

  --succes: #28503A;
  --succes-fond: #E7EEE9;
  --alerte: #6E5312;
  --alerte-fond: #F3EBDA;
  --erreur: #8A2C22;
  --erreur-fond: #F5E6E4;

  --serif: "Source Serif 4", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #16212B;
    --surface: #1E2A34;
    --surface-basse: #263441;
    --bordure: #2A3844;
    --bordure-forte: #3A4A57;
    --separateur: #263441;

    --encre: #EEF1F3;
    --encre-2: #B9C3CB;
    --encre-3: #B9C3CB;
    --encre-4: #8FA0AD;

    --accent: #6FA8CE;
    --accent-survol: #8FBEDD;
    --accent-encre: #0F1A22;

    --succes: #7DBF9A;
    --succes-fond: #1E3329;
    --alerte: #D0A24E;
    --alerte-fond: #2E2717;
    --erreur: #E09287;
    --erreur-fond: #3A211E;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` doit l'emporter sur les classes de disposition : sans cette règle,
   un `.pile[hidden]` reste visible, sa règle `display:flex` étant plus
   spécifique que celle du navigateur. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: -.02em; }
h1 { font-size: 29px; line-height: 1.12; }
h2 { font-size: 21px; line-height: 1.2; }
h3 { font-size: 17px; line-height: 1.25; }
p { margin: 0; text-wrap: pretty; color: var(--encre-2); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-survol); text-decoration: underline; }

/* --- gabarit ------------------------------------------------------------ */

.ecran {
  min-height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  padding: 22px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ecran--centre { align-items: center; justify-content: center; text-align: center; gap: 20px; }
.pousse-bas { margin-top: auto; }
.pile { display: flex; flex-direction: column; gap: 10px; }

.marque { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; color: var(--encre); }
.marque:hover { text-decoration: none; }
.marque__pastille { width: 22px; height: 22px; border-radius: 4px; background: var(--accent); flex: none; }

.retour {
  display: inline-flex; align-items: center; gap: 6px;
  height: 48px; font-size: 16px; font-weight: 600; color: var(--encre-2);
}
.retour:hover { text-decoration: none; color: var(--accent); }

.libelle-section {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--encre-3);
}
.meta { font-size: 13.5px; color: var(--encre-4); }
.mono { font-family: var(--mono); }

/* --- cartes ------------------------------------------------------------- */

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.carte__titre { font-size: 17px; font-weight: 700; }
.encart {
  background: var(--surface-basse);
  border: 1px solid var(--bordure);
  border-radius: 5px;
  padding: 13px 15px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--encre-2);
}

.ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; font-size: 15.5px;
}
.ligne + .ligne { border-top: 1px solid var(--separateur); }
.ligne__valeur { font-family: var(--mono); font-size: 14.5px; color: var(--encre); text-align: right; }

/* --- formules (A1) ------------------------------------------------------ */

.formules { display: flex; flex-direction: column; gap: 10px; }

.formule {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 14px 16px;
  cursor: pointer;
}
.formule:has(input:checked) { border: 2px solid var(--accent); padding: 13px 15px; }
.formule:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.formule input { position: absolute; opacity: 0; pointer-events: none; }
.formule__entete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.formule__nom { font-size: 18px; font-weight: 700; }
.formule__prix { font-size: 18px; font-weight: 700; white-space: nowrap; }
.formule__prix span { font-size: 13px; font-weight: 500; color: var(--encre-3); }
.formule__detail { font-size: 15px; line-height: 1.45; color: var(--encre-2); margin-top: 4px; }
.formule__marque {
  position: absolute; top: -10px; left: 16px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  background: var(--accent); color: var(--accent-encre);
  padding: 3px 8px; border-radius: 3px;
}
.formule__choisie {
  display: none; align-items: center; gap: 8px; margin-top: 9px;
  font-size: 14px; font-weight: 600; color: var(--succes);
}
.formule:has(input:checked) .formule__choisie { display: flex; }
.puce-cochee {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--accent-encre);
  display: flex; align-items: center; justify-content: center;
}

/* --- champs ------------------------------------------------------------- */

.champs { display: flex; flex-direction: column; gap: 11px; }

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ__libelle { font-size: 14.5px; font-weight: 600; color: var(--encre-2); }

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="password"] {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--bordure-forte);
  border-radius: 5px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--encre);
}
.champ input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.champ input::placeholder { color: var(--encre-4); }

/* Le bouton « Afficher » s'ancre sur le champ lui-même, pas sur le bloc :
   sinon il descend sur la ligne d'aide qui suit. */
.champ__boite { position: relative; display: flex; }
.champ__boite input { padding-right: 88px; }
.champ__bascule {
  position: absolute; right: 1px; top: 1px;
  height: 46px; padding: 0 14px;
  background: none; border: 0;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--accent); cursor: pointer;
}

.case { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--encre-2); }
.case input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }

.aide { font-size: 13.5px; color: var(--encre-3); line-height: 1.45; }

/* --- boutons ------------------------------------------------------------ */

.bouton {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 56px; padding: 0 16px;
  border: 0; border-radius: 6px;
  font-family: var(--sans); font-size: 17px; font-weight: 700;
  cursor: pointer; text-align: center;
}
.bouton--principal { background: var(--accent); color: var(--accent-encre); }
.bouton--principal:hover { background: var(--accent-survol); color: var(--accent-encre); text-decoration: none; }
.bouton--secondaire {
  height: 48px; font-size: 16px; font-weight: 600;
  background: var(--surface); color: var(--encre-2);
  border: 1px solid var(--bordure-forte);
}
.bouton--secondaire:hover { color: var(--encre); text-decoration: none; }
.bouton--texte { height: 48px; background: none; color: var(--accent); font-size: 15.5px; font-weight: 600; }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: .6; cursor: default; }

/* --- états -------------------------------------------------------------- */

.message { border-radius: 5px; padding: 12px 14px; font-size: 15px; line-height: 1.45; border: 1px solid; }
.message--erreur { background: var(--erreur-fond); color: var(--erreur); }
.message--succes { background: var(--succes-fond); color: var(--succes); }
.message--alerte { background: var(--alerte-fond); color: var(--alerte); }

.etiquette { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; padding: 3px 8px; border-radius: 3px; }
.etiquette--actif { background: var(--succes-fond); color: var(--succes); }
.etiquette--attente { background: var(--alerte-fond); color: var(--alerte); }
.etiquette--erreur { background: var(--erreur-fond); color: var(--erreur); }

/* Rotateur d'attente : le repère coloré tient sans l'animation, pour qui la
   désactive. */
.rotateur {
  width: 78px; height: 78px; border-radius: 50%;
  border: 6px solid var(--surface-basse); border-top-color: var(--accent);
  animation: tourne 1.1s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rotateur { animation: none; } }

.etapes { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; text-align: left; }
.etape { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--encre-3); }
.etape__puce { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent); flex: none; }
.etape--faite { color: var(--encre); }
.etape--faite .etape__puce {
  border-color: var(--succes); background: var(--succes); color: var(--surface);
  display: flex; align-items: center; justify-content: center;
}

/* --- jauge de quota ----------------------------------------------------- */

.jauge { height: 6px; border-radius: 3px; background: var(--surface-basse); overflow: hidden; }
.jauge__remplissage { height: 100%; background: var(--accent); }
.jauge__remplissage--depasse { background: var(--erreur); }

/* --- réseaux (phase 2) --------------------------------------------------- */

/*
 * La ligne d'un réseau : icône · nom et état · action.
 *
 * `flex-wrap` n'est pas décoratif. L'action est un `.bouton`, qui vaut
 * `width:100%` par défaut (c'est la règle du projet : une action principale
 * occupe toute la largeur). Dans une rangée flex, cette largeur devient la
 * base de l'élément, `.reseau__corps` se fait écraser à zéro, et le nom du
 * réseau ressort SOUS le bouton — c'est le défaut constaté le 09/09/2026.
 * `.reseau__action` reprend donc la main sur la largeur, et la rangée passe à
 * la ligne quand elle n'a plus la place, plutôt que de comprimer le texte.
 */
.reseau {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 6px;
  padding: 13px 14px;
}
.reseau__action {
  flex: 0 0 auto; width: auto; margin-left: auto;
  height: 44px; padding: 0 18px; font-size: 15px;
}
/* Sous 360 px, l'action prend sa propre ligne, pleine largeur : deux mots
   plus un bouton ne tiennent pas côte à côte sur les plus petits écrans. */
@media (max-width: 359px) {
  .reseau__action { width: 100%; margin-left: 0; }
}
.reseau--attention { background: var(--surface-basse); opacity: .85; }
.reseau__icone {
  width: 42px; height: 42px; flex: none; border-radius: 5px;
  background: var(--surface-basse); display: flex; align-items: center; justify-content: center;
}
.reseau__icone img { display: block; width: 22px; height: 22px; }
.reseau__corps { flex: 1 1 auto; min-width: 0; }
.reseau__nom { font-size: 16.5px; font-weight: 700; }
.reseau__etat { font-size: 14.5px; }
.reseau__etat--connecte { color: var(--succes); font-weight: 600; }
.reseau__etat--attente { color: var(--encre-3); }
.reseau__etat--alerte { color: var(--erreur); font-weight: 600; }
.reseau__coche {
  width: 26px; height: 26px; border-radius: 50%; background: var(--succes); color: #fff;
  flex: none; display: flex; align-items: center; justify-content: center;
}
.bandeau-alerte {
  background: var(--alerte-fond); border: 1px solid var(--alerte); border-radius: 6px;
  padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.4;
}
.bandeau-alerte strong { display: block; }
.pas-de-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pas-de-liste li { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--bordure); border-radius: 6px; padding: 11px 12px; font-size: 15.5px; line-height: 1.5; }
.pas-de-liste .pas-de-liste__puce {
  width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--encre);
  color: var(--surface); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center;
}

/* --- coquille de l'espace client ---------------------------------------- */

.appli { min-height: 100dvh; display: flex; flex-direction: column; }
.appli__entete {
  height: 48px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 20px; max-width: 430px; margin: 0 auto; width: 100%;
}
.appli__corps {
  flex: 1; width: 100%; max-width: 430px; margin: 0 auto;
  padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 14px;
}

.navbas { position: sticky; bottom: 0; border-top: 1px solid var(--bordure); background: var(--surface); }
.navbas__interieur { max-width: 430px; margin: 0 auto; height: 76px; display: flex; align-items: stretch; }
.navbas a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--encre-4);
}
.navbas a:hover { text-decoration: none; color: var(--accent); }
.navbas a[aria-current="page"] { color: var(--accent); }

/* --- écran sombre de bienvenue (A2b) ------------------------------------ */

.bienvenue { background: #16212B; color: #EEF1F3; }
.bienvenue .ecran { justify-content: flex-end; gap: 22px; }
.bienvenue h1 { font-size: 30px; line-height: 1.1; font-weight: 700; }
.bienvenue p { color: #B9C3CB; font-size: 16.5px; line-height: 1.55; }
.bienvenue .bouton--principal { background: #6FA8CE; color: #16212B; }
.bienvenue .bouton--principal:hover { background: #8FBEDD; color: #16212B; }
.bienvenue .bouton--secondaire { background: transparent; border-color: #263441; color: #B9C3CB; }
.visuel {
  width: 100%; height: 172px; border-radius: 6px;
  background: repeating-linear-gradient(135deg, #1E2A34 0 10px, #243240 10px 20px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12.5px; color: #8FA0AD; text-align: center; padding: 0 20px;
}

.pied { font-size: 15px; color: var(--encre-2); text-align: center; }

/* --- fil de conversation (phase 3, B4 à B6, B8, C13, E1, E3) ------------- */
/*
 * Gabarit plein écran, sans le `.appli__corps` à largeur fixe et scrollable :
 * une conversation a besoin de tout l'espace vertical, la liste de messages
 * défile seule, le compositeur reste en flux normal (jamais en
 * `position:fixed`) — c'est ce qui évite le piège classique du champ de
 * saisie qui passe sous le clavier virtuel en `100vh` (mission, contraintes
 * non négociables) : `100dvh` sur le conteneur plus un compositeur qui fait
 * partie du flux flex, poussé naturellement au-dessus du clavier par le
 * navigateur, plutôt que figé par une position absolue qui ignore la vraie
 * hauteur de viewport.
 */
.conversation { height: 100dvh; display: flex; flex-direction: column; background: var(--fond); }

.conversation__entete {
  flex: none; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 16px 10px; border-bottom: 1px solid var(--bordure); background: var(--surface);
}
.conversation__identite { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conversation__agent { display: flex; align-items: center; gap: 9px; }
.pastille-agent {
  width: 32px; height: 32px; border-radius: 4px; background: var(--accent); color: var(--accent-encre);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none;
}
.conversation__sous-titre { font-size: 14px; color: var(--encre-3); }

.entretien-progression { display: flex; gap: 5px; align-items: center; }
.entretien-progression__segment { flex: 1; height: 5px; border-radius: 3px; background: var(--bordure-forte); }
.entretien-progression__segment--faite { background: var(--succes); }
.entretien-progression__segment--courante { background: var(--accent); }

.conversation__fil {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}

.bulle {
  max-width: 88%; padding: 12px 14px; font-size: 16px; line-height: 1.5; text-wrap: pretty;
}
.bulle--agent {
  align-self: flex-start; background: var(--surface); border: 1px solid var(--bordure);
  border-radius: 6px 16px 16px 5px;
}
.bulle--client {
  align-self: flex-end; background: var(--encre); color: #EEF1F3;
  border-radius: 6px 16px 5px 16px; max-width: 86%;
}

/* Curseur de streaming : design.md §4, motif propre au client. */
.curseur-flux {
  display: inline-block; width: 8px; height: 17px; margin-left: 2px;
  background: var(--accent); vertical-align: -3px;
  animation: clignote 1s step-start infinite;
}
@media (prefers-reduced-motion: reduce) { .curseur-flux { animation: none; } }
@keyframes clignote { 50% { opacity: 0; } }

/* Puce d'outil : « l'agent travaille », jamais le nom technique de l'outil. */
.puce-outil {
  align-self: flex-start; display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--encre-3); padding: 4px 2px;
}
.puce-outil__point { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.puce-outil--fini .puce-outil__point { background: var(--succes); }
.puce-outil--fini { color: var(--encre-4); }
.puce-outil__point { animation: pulse 1.2s ease-in-out infinite; }
.puce-outil--fini .puce-outil__point { animation: none; }
@keyframes pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* Puce d'action annulable : « J'ai noté : … » (design.md §4). */
.puce-action {
  align-self: stretch; background: var(--surface-basse); border-left: 3px solid var(--accent);
  border-radius: 4px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.puce-action__texte { font-size: 14.5px; line-height: 1.4; color: var(--encre-2); }
.puce-action__annuler {
  width: 32px; height: 32px; flex: none; border-radius: 4px; background: var(--surface);
  border: 1px solid var(--bordure-forte); color: var(--erreur); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.puce-action--annulee { opacity: .55; }
.puce-action--annulee .puce-action__annuler { visibility: hidden; }

/* Carte de restitution du profil (B6, écran signature) et de proposition
   du Rédacteur (C13) : partagent la bordure épaisse en accent. */
.carte-restitution {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 8px;
  padding: 15px; display: flex; flex-direction: column; gap: 11px;
}
.carte-restitution__entete { text-align: center; }
.carte-restitution__label {
  font-size: 12.5px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-4);
}
.carte-restitution__portrait { font-size: 16px; line-height: 1.55; white-space: pre-wrap; }
.carte-restitution__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

.carte-proposition { background: var(--surface); border: 1.5px solid var(--accent); border-radius: 6px; overflow: hidden; }
.carte-proposition__corps { padding: 13px 14px; font-size: 16px; line-height: 1.55; }
.carte-proposition__pied { display: flex; border-top: 1px solid var(--separateur); }
.carte-proposition__pied button {
  border: 0; background: none; font-family: var(--sans); cursor: pointer; height: 50px; font-size: 15.5px;
}
.carte-proposition__principal { flex: 1; background: var(--accent); color: var(--accent-encre); font-weight: 700; }
.carte-proposition__secondaire { width: 130px; font-weight: 600; color: var(--encre-2); }

/* Bouton « ça ne va pas » sous chaque réponse. */
.lien-signaler {
  align-self: flex-start; background: none; border: 0; padding: 2px 2px 0;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--encre-4); cursor: pointer;
}
.lien-signaler:hover { color: var(--erreur); }
.lien-signaler--envoye { color: var(--succes); cursor: default; }

/* Bannière d'état dégradé, en tête de fil (agent coupé, quota, plafond). */
.bandeau-degrade {
  background: var(--surface-basse); border: 1px solid var(--bordure); border-radius: 6px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px; margin: 0 0 4px;
}

.conversation__compositeur {
  flex: none; padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--bordure); background: var(--surface);
  display: flex; gap: 9px; align-items: flex-end;
}
.conversation__champ {
  flex: 1; min-height: 50px; max-height: 130px; background: var(--fond);
  border: 1px solid var(--bordure-forte); border-radius: 25px; padding: 13px 16px;
  font-family: var(--sans); font-size: 16px; line-height: 1.35; color: var(--encre);
  resize: none; overflow-y: auto;
}
.conversation__champ:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.conversation__champ::placeholder { color: var(--encre-4); }
.conversation__envoyer {
  width: 50px; height: 50px; flex: none; border-radius: 25px; border: 0;
  background: var(--accent); color: var(--accent-encre); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.conversation__envoyer[disabled] { opacity: .55; cursor: default; }

/* --- profil éditorial (B8) ------------------------------------------------ */

.profil-champ {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 5px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.profil-champ--sujets { background: #E8F0F5; border-color: #CFE0EA; }
.profil-champ__entete { display: flex; justify-content: space-between; align-items: center; }
.profil-champ__valeur { font-size: 16px; line-height: 1.5; }

/* --- publication (phase 4) : éditeur, relecture, calendrier -------------- */

/* En-tête à flèche de retour, commun à l'éditeur et à la relecture (C10b,
   C10c, C11, C12) : gabarit "Retour · Titre · action de droite". */
.entete-retour {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 0 2px; flex: none;
}
.entete-retour__retour {
  display: flex; align-items: center; gap: 2px;
  font-size: 16px; font-weight: 600; color: var(--encre-2);
}
.entete-retour__titre { font-size: 16px; font-weight: 700; }
.entete-retour__action { font-size: 15px; font-weight: 600; color: var(--accent); min-width: 44px; text-align: right; }

/* Puces de sélection des réseaux ciblés ("Publier sur", C11). */
.puces-reseaux { display: flex; gap: 8px; flex-wrap: wrap; }
.puce-reseau {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; padding: 11px 14px; border-radius: 5px;
  background: var(--surface-basse); border: 1px solid var(--bordure-forte); color: var(--encre);
  cursor: pointer;
}
.puce-reseau--actif { background: var(--encre); color: #fff; border-color: var(--encre); font-weight: 700; }

/* Onglets de déclinaison par réseau + aperçu (C11). */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bordure); overflow-x: auto; }
.onglet {
  font-size: 15px; font-weight: 600; padding: 11px 12px; color: var(--encre-3);
  border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; white-space: nowrap;
}
.onglet--actif { font-weight: 700; color: var(--encre); border-bottom-color: var(--accent); }

.champ-texte {
  width: 100%; min-height: 190px; resize: vertical;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 6px;
  padding: 14px; font-family: var(--sans); font-size: 16.5px; line-height: 1.55; color: var(--encre);
}
.champ-texte:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

.compteur { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.compteur__valeur { font-family: var(--mono); color: var(--encre-3); }
.compteur__valeur--depasse { color: var(--erreur); font-weight: 600; }

/* Grille de médias : vignettes + tuile d'ajout (C11, C16). */
.grille-medias { display: flex; gap: 9px; flex-wrap: wrap; }
.media-vignette { position: relative; width: 70px; height: 70px; flex: none; border-radius: 5px; overflow: hidden; }
.media-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-vignette__retirer {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(22,33,43,.72); color: #fff; border: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
/* Retouche : bandeau bas de vignette, plutôt qu'une seconde pastille ronde —
   le libellé doit être lisible, et une icône seule n'aurait rien dit. */
.media-vignette__retoucher {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  background: rgba(22,33,43,.72); color: #fff; border: 0;
  font-family: var(--sans); font-size: 11px; line-height: 20px; cursor: pointer;
}

.media-ajouter {
  width: 70px; height: 70px; flex: none; border-radius: 5px;
  border: 1.5px dashed var(--bordure-forte); background: none; color: var(--encre-3);
  display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer;
}
.zone-capture {
  flex: 1; min-height: 220px; border-radius: 6px;
  background: repeating-linear-gradient(135deg, var(--surface-basse) 0 12px, var(--bordure) 12px 24px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--mono); font-size: 12.5px; color: var(--encre-3); padding: 0 30px;
}

/* Relecture obligatoire (C12) : une carte par réseau, filet d'état, choix du
   moment. Rien de tout cela n'appelle /publier tant que le bouton principal
   n'est pas pressé — c'est la règle produit centrale. */
/* --- carte d'idée (phase 5, design.md §4 « Motifs propres au client ») --- */

.carte-idee {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Filet vert Idéateur tant que l'idée n'a pas encore été développée. */
.carte-idee--proposee { border-left: 3px solid #4C6B57; }
/* Bordure pleine dès que la publication est planifiée. */
.carte-idee--planifiee { border-color: var(--accent); }
.carte-idee--ecartee { opacity: .55; }
.carte-idee__titre { font-size: 16.5px; font-weight: 700; }
.carte-idee__meta { font-size: 13.5px; color: var(--encre-4); }
.carte-idee__actions { display: flex; gap: 8px; }
.carte-idee__actions .bouton { height: 44px; font-size: 15px; }
.carte-idee__ecart { background: var(--surface-basse); border-radius: 5px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.carte-idee__ecart textarea {
  min-height: 64px; padding: 9px 11px; border: 1px solid var(--bordure-forte); border-radius: 5px;
  font-family: var(--sans); font-size: 15px; resize: vertical;
}

.carte-relecture { display: flex; flex-direction: column; gap: 8px; }
.carte-relecture__entete { display: flex; justify-content: space-between; align-items: baseline; }
.carte-relecture__statut { font-size: 13.5px; font-weight: 600; }
.carte-relecture__statut--pret { color: var(--succes); }
.carte-relecture__statut--echec { color: var(--erreur); }
.carte-relecture__meta {
  display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 13px; color: var(--encre-3);
}

.choix-double { display: flex; gap: 9px; }
.choix-double > * { flex: 1; height: 52px; border-radius: 5px; font-weight: 700; font-size: 16px; }
.choix-double__actif { background: var(--encre); color: #fff; }
.choix-double__inactif { background: var(--surface); border: 1px solid var(--bordure-forte); color: var(--encre); }

/* Échec partiel réseau par réseau (E5) : jamais un message global. */
.statut-cible { display: flex; gap: 11px; align-items: center; }
.statut-cible__puce {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.statut-cible__puce--ok { background: var(--succes-fond); color: var(--succes); }
.statut-cible__puce--ko { background: var(--erreur-fond); color: var(--erreur); }
.statut-cible__puce--attente { background: var(--surface-basse); color: var(--encre-3); }

/* Calendrier (C14) : bande de jours + liste chronologique par jour, filet de
   couleur en première cellule comme les tableaux du back-office (design.md §5),
   ici décliné côté client. */
.bande-jours { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.jour-chip {
  width: 44px; height: 60px; flex: none; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--bordure);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 12px; color: var(--encre-3); cursor: pointer;
}
.jour-chip b { font-size: 18px; color: var(--encre); }
.jour-chip--actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.jour-chip--actif b { color: #fff; }

.entree-calendrier {
  display: flex; gap: 11px; align-items: center;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 6px; padding: 12px 13px;
}
.entree-calendrier--attente { background: var(--surface-basse); }
.entree-calendrier__barre { width: 4px; height: 44px; flex: none; border-radius: 2px; background: var(--accent); }
.entree-calendrier__barre--brouillon { background: var(--bordure-forte); }
.entree-calendrier__barre--echec { background: var(--erreur); }
.entree-calendrier__corps { flex: 1; min-width: 0; }
.entree-calendrier__titre { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.entree-calendrier__meta { font-size: 14px; color: var(--encre-3); margin-top: 2px; }
.entree-calendrier__statut { font-size: 13.5px; font-weight: 700; flex: none; }
.entree-calendrier__statut--pret { color: var(--succes); }
.entree-calendrier__statut--attente { color: var(--accent); }
.entree-calendrier__statut--echec { color: var(--erreur); }

.libelle-jour {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-4);
}

/* Action principale d'accueil : "Publier une photo" (C9), pleine largeur,
   accent plein — c'est l'unique action principale de l'écran (design.md §4). */
.bouton-photo {
  height: 60px; flex: none; border-radius: 6px;
  background: var(--accent); color: var(--accent-encre);
  font-weight: 700; font-size: 19px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer; width: 100%;
}
.bouton-photo:hover { background: var(--accent-survol); }

/* ==========================================================================
   REGISTRE LARGE — tablette et desktop
   ==========================================================================
   Tout ce qui précède est le registre téléphone, et reste la référence : le
   produit se conçoit et se juge sur un écran de 390 px. Ce bloc n'en est pas
   une réécriture, c'est une couche posée par-dessus, à partir de 680 px.
   Aucune règle du registre téléphone n'est modifiée : elles sont seulement
   élargies. Un défaut corrigé ici ne peut donc pas casser le mobile.

   Deux paliers, et une seule idée par palier :

   680 px  la colonne respire. Le gabarit ne change pas — même barre basse,
           même empilement — mais la largeur utile passe de 430 à 620 px, et
           les rangées cessent d'être compressées.
   1024 px la barre basse devient un rail latéral. C'est le seul changement
           de gabarit du fichier, et il est purement CSS : le balisage des
           sept liens est identique sur les deux registres, aucune page n'a
           de variante desktop à maintenir.

   Ce qui ne change JAMAIS avec la largeur : la longueur de ligne. Un texte
   qui court sur 1900 px ne se lit pas. Les colonnes restent donc bornées, et
   c'est l'espace autour qui grandit, pas le texte.
   ========================================================================== */

@media (min-width: 680px) {
  .ecran { max-width: 460px; padding-top: 40px; }

  .appli__entete,
  .appli__corps { max-width: 620px; }
  .appli__entete { height: 60px; }
  .appli__corps { padding: 18px 20px 28px; gap: 16px; }

  .navbas__interieur { max-width: 620px; }

  /* Le fil de conversation garde une longueur de ligne lisible : c'est la
     colonne qui est centrée, pas les bulles qui s'étirent. Le calage passe
     par le padding plutôt que par un conteneur intérieur, qui aurait demandé
     un niveau de balisage de plus dans chaque page. */
  .conversation__entete,
  .conversation__fil { padding-inline: max(16px, calc((100% - 720px) / 2)); }
  .conversation__compositeur { padding-inline: max(14px, calc((100% - 720px) / 2)); }
  .bulle { max-width: 74%; }
  .bulle--client { max-width: 72%; }
}

@media (min-width: 1024px) {
  /* Largeur du rail. Une variable plutôt qu'un nombre répété : le décalage du
     contenu et la largeur du rail sont la même mesure, et doivent le rester. */
  :root { --rail: 236px; }

  .appli { padding-left: var(--rail); }
  .appli__entete,
  .appli__corps { max-width: 720px; }

  /* La barre basse devient un rail. `fixed` et non `sticky` : le rail doit
     tenir toute la hauteur de la fenêtre, indépendamment du défilement de la
     colonne de contenu. */
  .navbas {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--rail);
    border-top: 0;
    border-right: 1px solid var(--bordure);
  }
  .navbas__interieur {
    max-width: none;
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 20px 12px;
  }
  .navbas a {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    height: 46px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 15px;
  }
  /* La page courante se marque par un fond, pas seulement par la couleur :
     sur un rail, la seule teinte du texte se repère mal. */
  .navbas a[aria-current="page"] { background: var(--surface-basse); }
  .navbas a:hover { background: var(--surface-basse); }

  /* Le fil de conversation n'a pas de rail (l'écran est plein cadre, avec sa
     flèche de retour) : il garde donc toute la largeur, et sa colonne
     centrée du palier précédent. */
  .conversation__entete,
  .conversation__fil { padding-inline: max(20px, calc((100% - 760px) / 2)); }
  .conversation__compositeur { padding-inline: max(18px, calc((100% - 760px) / 2)); }
}

/* Au-delà de 1400 px, le contenu cesse de suivre la fenêtre : il se cale à
   gauche du rail plutôt que de dériver au milieu d'un désert. */
@media (min-width: 1400px) {
  .appli__entete,
  .appli__corps { margin-left: 0; margin-right: auto; max-width: 760px; }
}