/* ======================================================================
   L'UNIVERS : LA CHAMBRE NOIRE. Choisi par Axel le 04/09/2026 parmi
   quatre propositions montrées côte à côte.
   ======================================================================
   Un noir CHAUD, pas un gris : la salle où l'on monte, la lumière de
   travail, l'or du voyant. C'est la seule des quatre qui ait l'air d'un
   endroit plutôt que d'un logiciel.

   LE DÉFAUT DE LA PROPOSITION, CORRIGÉ ICI. Telle que montrée, elle
   employait l'or pour l'action ET pour ce qui est validé : deux états
   opposés dans la même famille chaude, donc indistinguables d'un coup
   d'oeil. Le validé passe au vert froid, qui tranche sur le noir chaud
   sans entrer en concurrence avec l'or.

     OR      ce qui demande une action, ce qui est en cours
     VERT    ce qui est fait, mesuré, acquis
     ROUGE   ce qui est refusé ou bloqué

   Higgsfield, pour situer : gris neutres #0f1113 et vert lime #d1fe17,
   un seul accent. Ils peuvent, rien n'y est mesuré. Studio mesure, donc
   il lui faut dire « en cours » et « acquis » sans faire lire.

   Contrastes CALCULÉS (test/palette.test.mjs), rien sous 4,5 : ici tout
   dépasse 5,5, et l'or atteint 10,5 sur le fond.
   ====================================================================== */
:root {
  /* L'ENCRE ET LE CUIVRE (05/09/2026, demande d'Axel : « rendre le site plus beau »).
     La chambre noire du 04/09 était un noir BRUN avec un or moutarde : chaleureux, mais
     terne à l'écran, et son thème clair (papier crème, texte café, accent laiton) est
     la palette par défaut de tous les sites générés. Le noir devient une encre bleutée,
     l'or un cuivre plus franc, le clair un blanc froid : l'accent chaud tranche sur un
     fond froid au lieu de s'y fondre. Les rôles ne bougent pas : CUIVRE pour ce qui
     demande une action, CYAN pour ce qui est fait, ROUGE pour ce qui est refusé. */
  --fond: #f3f5f8;
  --surface: #fcfdfe;
  --surface-2: #e9edf2;
  --trait: #d8dee6;
  --texte: #121821;
  --texte-2: #5b6674;
  --chaud: #a04d00;
  --froid: #0b6e63;
  --alerte: #b8281f;
  --sur-couleur: #fcfdfe;
  --bandeau: rgba(252, 253, 254, 0.88);
  --ombre: 0 1px 2px rgba(18, 24, 33, 0.05), 0 10px 26px rgba(18, 24, 33, 0.07);
  --r: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #0b0e13;
    --surface: #131820;
    --surface-2: #1b222c;
    --trait: #29323e;
    --texte: #eef2f6;
    --texte-2: #98a3b1;
    --chaud: #f2a541;
    --froid: #56d6c0;
    --alerte: #ff6b60;
    --sur-couleur: #0b0e13;
    --bandeau: rgba(8, 11, 16, 0.86);
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 34px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="sombre"] {
  --fond: #0b0e13; --surface: #131820; --surface-2: #1b222c; --trait: #29323e;
  --texte: #eef2f6; --texte-2: #98a3b1;
  --chaud: #f2a541; --froid: #56d6c0; --alerte: #ff6b60;
  --sur-couleur: #0b0e13;
  --bandeau: rgba(8, 11, 16, 0.86);
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 34px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

:root { --accent: var(--chaud); --ok: var(--froid); --sur-accent: var(--sur-couleur); }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.55 -apple-system, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: ui-monospace, "SF Mono", monospace; font-variant-numeric: tabular-nums; }
a { color: var(--chaud); }
:focus-visible { outline: 2px solid var(--chaud); outline-offset: 2px; border-radius: 6px; }

/* ---- LE BANDEAU DE RÉGIE : plus sombre que la zone de travail, comme la
   console devant l'écran. Il ne flotte pas, il porte. */
header {
  position: sticky; top: 0; z-index: 30;
  background: var(--bandeau); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--trait);
}
.rangee {
  display: flex; align-items: center; gap: 16px;
  max-width: 1500px; margin: 0 auto; padding: 10px 24px;
}
.marque { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: inherit; }
.marque h1 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.marque .sous { color: var(--texte-2); font-size: 11.5px; margin-top: -2px; }

nav { display: flex; gap: 2px; margin-left: 8px; flex: 1 1 auto; flex-wrap: wrap; }
nav a {
  text-decoration: none; border-radius: 8px; padding: 7px 12px;
  font-size: 13.5px; font-weight: 500; color: var(--texte-2);
  display: flex; align-items: center; gap: 7px;
}
nav a:hover { color: var(--texte); background: var(--surface-2); }
/* La page où l'on est : un aplat, pas une bordure. C'est ce qui rend la
   barre lisible d'un coup d'oeil au lieu de demander une comparaison. */
nav a[aria-current="page"] { background: var(--chaud); color: var(--sur-couleur); font-weight: 650; }
nav a[aria-current="page"] .compteur { background: rgba(0, 0, 0, 0.18); color: inherit; }
.compteur {
  font-family: ui-monospace, monospace; font-size: 11px; line-height: 1;
  padding: 3px 6px; border-radius: 999px; background: var(--surface-2); color: var(--texte-2);
}

.outils { display: flex; gap: 8px; align-items: center; flex: none; }
button, select {
  font: inherit; font-size: 13px; color: var(--texte);
  background: var(--surface); border: 1px solid var(--trait); border-radius: 8px;
  padding: 6px 12px; cursor: pointer;
}
button:hover, select:hover { border-color: var(--texte-2); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: default; }
button.action {
  background: var(--chaud); border-color: var(--chaud);
  color: var(--sur-couleur); font-weight: 650;
}
button.action:hover { filter: brightness(1.08); border-color: var(--chaud); }
#choix-marque { max-width: 200px; }
/* LE BOUTON SECONDAIRE (renommé le 06/09/2026 : il s'appelait « démarchage » parce que
   le premier lien qui l'a porté y menait, et il habillait depuis les exports, les
   connexions OAuth, les retours vers Créations). Un lien qui a l'air d'un bouton. */
.secondaire, button.secondaire {
  display: inline-block; background: var(--surface); border: 1px solid var(--trait);
  color: var(--texte); font-size: 13px; padding: 6px 13px; border-radius: 8px;
  text-decoration: none; font-weight: 550; cursor: pointer; font-family: inherit;
}
.secondaire:hover, button.secondaire:hover { border-color: var(--texte-2); }

/* LE LIEN D'ÉVITEMENT : invisible jusqu'au premier Tab, puis il mène au contenu sans
   traverser la barre. Un lecteur d'écran ou un clavier le trouve en premier. */
.evitement {
  position: absolute; left: -9999px; top: 8px; z-index: 50;
  background: var(--chaud); color: var(--sur-couleur); padding: 8px 12px; border-radius: 8px;
  font-weight: 650; text-decoration: none;
}
.evitement:focus { left: 12px; }

/* Pendant qu'une page relit l'état, son contenu s'atténue : elle le dit aussi (aria-busy). */
main[aria-busy="true"] #contenu { opacity: 0.6; transition: opacity 0.2s; }

/* Un tableau plus large que l'écran défile dans son cadre, la page ne déborde jamais. */
.tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tableau-defile .tableau { min-width: 640px; }

dialog.confirmation { padding: 18px 20px; max-width: 440px; }
dialog.confirmation p { margin: 0 0 14px; font-size: 15px; }
dialog.confirmation .boutons { justify-content: flex-end; }

main { max-width: 1500px; margin: 0 auto; padding: 22px 24px 60px; }
h2 { font-size: 17px; margin: 0; letter-spacing: -0.01em; }
h3 {
  font-size: 11px; font-weight: 700; color: var(--texte-2);
  letter-spacing: 0.07em; text-transform: uppercase;
  margin: 0 0 14px; display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.entete-page { margin: 2px 0 20px; }
.entete-page h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.entete-page .note { margin: 3px 0 0; }

/* ---- LES PANNEAUX. Higgsfield ne met aucune bordure : les cartes se
   distinguent par la valeur de gris, ce qui fait beaucoup moins de bruit
   que des filets partout. On garde une bordure très discrète, parce
   qu'ici les panneaux portent des chiffres et non des images. */
.carte {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 18px; box-shadow: var(--ombre);
}
.note { color: var(--texte-2); font-size: 13px; }
.accent { color: var(--chaud); }
.etat-ok { color: var(--froid); }
.etat-alerte { color: var(--alerte); }

/* ---- LES CHIFFRES. C'est ce qu'on vient lire : ils doivent frapper avant
   leur légende, pas l'inverse. */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.chiffre { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--ombre); }
.chiffre .v { font-size: 30px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.chiffre .l { color: var(--texte-2); font-size: 12px; margin-top: 5px; line-height: 1.35; }
.chiffre .sur { color: var(--texte-2); font-size: 17px; font-weight: 500; }

/* ---- LE PROCHAIN GESTE : la seule chose qu'on lit si on ne lit qu'une
   chose. Un aplat ambre, pas une carte de plus. */
.geste {
  display: flex; align-items: flex-start; gap: 14px;
  /* Assez pour qu'on ne voie que lui, pas au point de saturer l'écran : l'or est
     dense, 12 % de fond en faisaient un pavé doré. Le liseré porte, le fond suit. */
  background: color-mix(in srgb, var(--chaud) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--chaud) 55%, var(--trait));
  border-radius: var(--r); padding: 16px 18px; margin-bottom: 18px;
}
.geste .rond {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--chaud); color: var(--sur-couleur); display: grid; place-items: center; font-size: 14px;
}
.geste .quoi { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--chaud); font-weight: 700; }
.geste .texte { font-size: 15.5px; margin-top: 3px; }
.geste code {
  display: inline-block; margin-top: 8px; font-family: ui-monospace, monospace; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--trait); border-radius: 7px; padding: 5px 10px;
  user-select: all;
}

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.large { grid-column: 1 / -1; }
.ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 14px; }
.ligne .cle { color: var(--texte-2); flex: 1; min-width: 0; }
.ligne .mono, .ligne .etat-ok, .ligne .etat-alerte { white-space: nowrap; text-align: right; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.resultat { font-size: 13px; margin-top: 8px; }

/* ---- LA GALERIE. Une vidéo verticale se montre verticale, comme sur le
   téléphone où elle sera vue. */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.video {
  background: var(--surface-2); border: 0; border-radius: var(--r);
  overflow: hidden; cursor: pointer; text-align: left; padding: 0;
  display: flex; flex-direction: column; transition: transform 0.12s ease;
}
.video:hover { transform: translateY(-3px); }
.video .cadre { position: relative; aspect-ratio: 9 / 16; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.video .cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video .cadre .absente { color: var(--texte-2); font-size: 12px; padding: 12px; text-align: center; }
.video .lire {
  position: absolute; inset: auto auto 10px 10px;
  width: 30px; height: 30px; border-radius: 50%; background: rgba(8, 9, 12, 0.7);
  color: #fff; display: grid; place-items: center; font-size: 12px; backdrop-filter: blur(4px);
}
.video .bas { padding: 10px 12px 12px; }
.video .titre { font-size: 13px; font-weight: 650; }
.video .meta { color: var(--texte-2); font-size: 11.5px; margin-top: 2px; }
.etiquette {
  position: absolute; top: 8px; left: 8px;
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: 0.03em;
  background: rgba(8, 9, 12, 0.7); color: #fff; backdrop-filter: blur(4px);
}
.etiquette.a-coller, .etiquette.a-mesurer { background: var(--chaud); color: var(--sur-couleur); }
.etiquette.mesuree { background: var(--froid); color: var(--sur-couleur); }

/* Un aperçu n'est pas la galerie : quatre vignettes en 9:16 mangeraient toute la
   hauteur d'une carte pour ne rien dire de plus qu'un carré. */
.galerie.apercu .cadre { aspect-ratio: 1 / 1; }
.galerie.apercu .etiquette { font-size: 11px; padding: 2px 5px; top: 5px; left: 5px; }

/* ---- LE PARCOURS. L'oeil doit trouver en une seconde où ça bloque. */
.etapes { display: grid; }
.etape { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--trait); }
.etape:first-child { border-top: 0; }
.etape .rond {
  flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px;
  border: 1px solid var(--trait); display: grid; place-items: center; font-size: 12px; color: var(--texte-2);
}
.etape.faite .rond { background: var(--froid); border-color: var(--froid); color: var(--sur-couleur); }
.etape.refusee .rond { background: var(--alerte); border-color: var(--alerte); color: var(--sur-couleur); }
.etape.courante .rond { border-color: var(--chaud); border-width: 2px; }
.etape.courante .titre { color: var(--chaud); font-weight: 650; }
.etape.courante {
  box-shadow: inset 2px 0 0 var(--chaud);
  padding-left: 12px; margin-left: -12px; border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--chaud) 6%, transparent);
}
.etape .titre { font-size: 14px; }
.etape .actions { margin-top: 8px; }

/* ---- LE SCRIPT, plan par plan : ce qui se dit, ce qui s'affiche, ce
   qu'il faut avoir. Les trois se corrigent séparément. */
.plan { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--trait); }
.plan:first-of-type { border-top: 0; }
.plan .rang {
  flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2);
  display: grid; place-items: center; font-size: 12px; color: var(--texte-2);
}
.plan .role { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-2); font-weight: 650; }
.plan .dit { font-size: 15px; margin-top: 2px; }
.plan .ecran { font-size: 13.5px; color: var(--chaud); margin-top: 2px; }

/* ---- LA PROGRESSION VERS LE VERDICT. La barre ne décore pas : elle dit
   combien de vidéos séparent d'un « on sait ». */
.angle { padding: 12px 0; border-bottom: 1px solid var(--trait); }
.angle:last-child { border-bottom: 0; }
.angle .tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.angle .nom { font-weight: 650; }
.angle .promesse { color: var(--texte-2); font-size: 12.5px; margin: 2px 0 8px; }
.rail { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; display: flex; }
.rail .part { height: 100%; }
.rail .mesurees { background: var(--froid); }
.rail .publiees { background: var(--chaud); }
.rail .fabriquees { background: var(--trait); }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texte-2); margin-top: 8px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.barres { display: grid; gap: 10px; }
.barre-ligne { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.barre-piste { height: 24px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.barre-part { display: block; height: 100%; background: var(--froid); border-radius: 7px; min-width: 3px; }

.pastilles { display: flex; gap: 6px; flex-wrap: wrap; }
.pastille {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--trait); border-radius: 999px; padding: 3px 10px;
  font-size: 11.5px; color: var(--texte-2); background: var(--surface);
}
.pastille .point { width: 7px; height: 7px; border-radius: 50%; background: var(--trait); flex: none; }
.pastille.relie { color: var(--texte); }
.pastille.relie .point { background: var(--froid); }

.compte { padding: 10px 0; border-top: 1px solid var(--trait); }
.compte:first-of-type { border-top: 0; }
.compte .tete { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.compte .valeur { margin-left: auto; color: var(--texte-2); font-size: 12.5px; max-width: 55%; overflow-wrap: anywhere; text-align: right; }
.compte.relie .valeur { color: var(--texte); }
details summary { cursor: pointer; font-size: 13px; color: var(--chaud); padding: 5px 0; }
details form { display: flex; gap: 7px; margin: 6px 0 2px; flex-wrap: wrap; }
input {
  font: inherit; font-size: 13px; color: var(--texte); background: var(--surface-2);
  border: 1px solid var(--trait); border-radius: 8px; padding: 7px 11px; flex: 1; min-width: 150px;
}
input::placeholder { color: var(--texte-2); }

.concurrent { padding: 10px 0; border-top: 1px solid var(--trait); }
.concurrent:first-of-type { border-top: 0; }
.concurrent .tete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 13.5px; }
.concurrent .accroche { color: var(--texte-2); font-size: 12.5px; margin-top: 3px; font-style: italic; }

.message { color: var(--texte-2); padding: 40px 20px; text-align: center; border: 1px dashed var(--trait); border-radius: var(--r); }
.message.erreur { color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 40%, var(--trait)); }

dialog {
  border: 1px solid var(--trait); border-radius: 14px; padding: 0; background: var(--surface);
  color: var(--texte); max-width: min(94vw, 420px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
dialog::backdrop { background: rgba(4, 5, 7, 0.72); backdrop-filter: blur(4px); }
dialog video { width: 100%; display: block; background: #05060a; aspect-ratio: 9 / 16; }
dialog .pied { padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
dialog .pied .infos { font-size: 13px; }

footer { color: var(--texte-2); font-size: 12px; text-align: center; padding: 28px 20px 0; }

@media (max-width: 860px) {
  .rangee { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .marque .sous { display: none; }
  nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; }
  nav a { white-space: nowrap; }
  .outils { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .outils .qui { max-width: 120px; }
  main { padding: 16px 16px 48px; }
  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .chiffre .v { font-size: 24px; }
  .barre-ligne { grid-template-columns: 90px 1fr auto; }
}

/* ---- Comptes et formulaires (04/09/2026) */
.formulaire { max-width: 440px; margin: 24px auto; display: grid; gap: 4px; }
.formulaire label { display: grid; gap: 5px; font-size: 13px; color: var(--texte-2); margin-top: 10px; }
.formulaire input { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; }
.formulaire .actions a { font-size: 13px; }
.formulaire-ligne { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-top: 8px; }
.formulaire-ligne label { display: grid; gap: 4px; font-size: 12.5px; color: var(--texte-2); flex: 1 1 240px; }
.outils .solde { font-size: 12px; font-weight: 650; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--trait); color: var(--texte); text-decoration: none; white-space: nowrap; }
.outils .solde.etat-alerte { border-color: currentColor; }
.outils .qui { color: var(--texte-2); font-size: 12px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tableau { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.tableau th { text-align: left; color: var(--texte-2); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 8px; border-bottom: 1px solid var(--trait); }
.tableau td { padding: 8px; border-bottom: 1px solid var(--trait); vertical-align: top; }

/* ---- L'interface qui écrit (04/09/2026) */
textarea {
  font: inherit; font-size: 14px; color: var(--texte); background: var(--surface-2);
  border: 1px solid var(--trait); border-radius: 8px; padding: 8px 11px; width: 100%; box-sizing: border-box;
  min-height: 44px; resize: vertical; line-height: 1.4;
}
textarea::placeholder { color: var(--texte-2); }
.plan textarea { margin-top: 4px; }
.plan .quoi { flex: 1; min-width: 0; }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; margin-top: 8px; }
.champs label, .champ { display: grid; gap: 4px; font-size: 12.5px; color: var(--texte-2); }
.champs input, .champ input, .champs select, .champ select { width: 100%; box-sizing: border-box; min-width: 0; }
.champs .large { grid-column: 1 / -1; }
.champ-erreur { color: var(--alerte); font-size: 12px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--alerte); }
.boutons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
button.discret { background: transparent; border-color: transparent; color: var(--texte-2); }
button.discret:hover { color: var(--texte); border-color: var(--trait); }
.video .actions-video { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 12px; }
.video .actions-video button, .video .actions-video a { font-size: 12px; padding: 5px 9px; }
.video .actions-video a { border: 1px solid var(--trait); border-radius: 8px; text-decoration: none; color: var(--texte); background: var(--surface); }
.carte-video { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; }
.carte-video .video { border: 0; border-radius: 0; box-shadow: none; }
.carte-video form { display: grid; gap: 6px; padding: 8px 12px 12px; border-top: 1px solid var(--trait); }
.carte-video form input { min-width: 0; }
dialog.devis { padding: 18px 20px; }
dialog.devis h3 { margin: 0 0 10px; }
dialog.devis .boutons { justify-content: flex-end; margin-top: 16px; }
.angle-form { padding: 10px 0; border-top: 1px solid var(--trait); }
.angle-form:first-of-type { border-top: 0; }
.angle-form .tete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.refus-detail { padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--alerte) 30%, transparent); }
.refus-detail:first-of-type { border-top: 0; margin-top: 8px; }

/* ---- LA REFONTE EN BOUTONS (05/09/2026). Les choix d'une création sont des
   pastilles cliquables ; le parcours est un stepper d'une ligne ; le geste principal
   est un seul grand bouton. Moins de texte, plus de boutons. */
.rangee-choix { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--trait); }
.rangee-choix:first-of-type { border-top: 0; }
.rangee-choix .lib { font-size: 11px; font-weight: 700; color: var(--texte-2); text-transform: uppercase; letter-spacing: 0.06em; min-width: 78px; }
.chip {
  font: inherit; font-size: 13px; color: var(--texte); background: var(--surface);
  border: 1px solid var(--trait); border-radius: 999px; padding: 5px 12px; cursor: pointer; line-height: 1.2;
}
.chip:hover { border-color: var(--texte-2); }
.chip.actif { background: var(--chaud); border-color: var(--chaud); color: var(--sur-couleur); font-weight: 650; }
.chip.fixe { cursor: default; background: var(--surface-2); color: var(--texte-2); }
.chip:disabled { opacity: 0.55; cursor: default; }
.chip small { font-size: 10.5px; opacity: 0.8; }
.stepper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--texte-2); margin: 4px 0 10px; }
.stepper .pas { padding: 3px 9px; border-radius: 6px; border: 1px solid var(--trait); }
.stepper .pas.fait { color: var(--froid); border-color: color-mix(in srgb, var(--froid) 50%, var(--trait)); }
.stepper .pas.courant { color: var(--chaud); border-color: var(--chaud); font-weight: 650; }
.stepper .pas.refuse { color: var(--alerte); border-color: var(--alerte); }
.stepper .fleche { color: var(--trait); }
.cout-credits { font-size: 14px; margin: 6px 0; }
.cout-credits .grand { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
button.grand { font-size: 15px; padding: 10px 18px; }
.bouton-lien { text-decoration: none; background: var(--chaud); color: var(--sur-couleur); font-weight: 650; font-size: 13px; padding: 8px 14px; border-radius: 8px; white-space: nowrap; }
.geste .texte { font-size: 15px; margin-top: 0; }
.geste { align-items: center; }
.bareme { width: 100%; font-size: 13px; border-collapse: collapse; }
.bareme td { padding: 4px 0; border-bottom: 1px solid var(--trait); }
.bareme td:last-child { text-align: right; font-family: ui-monospace, monospace; }

/* ---- CRÉER EN TROIS TEMPS (05/09/2026, deuxième passe). Un seul panneau, trois temps
   séparés par un filet, des titres en clair (pas de capitales espacées partout), et le
   temps 3 sur un fond à peine chauffé : c'est là qu'on lance. */
.creer { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre); overflow: hidden; }
.temps { padding: 20px 22px; border-top: 1px solid var(--trait); }
.temps:first-child { border-top: 0; }
.temps-tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.temps-tete .numero {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; align-self: center;
  background: var(--surface-2); color: var(--texte-2); font-size: 12px; font-weight: 700; font-family: ui-monospace, monospace;
}
.temps-tete .titre { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.cartes-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.carte-type {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px;
  text-align: left; padding: 16px 18px; border-radius: var(--r); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--trait); color: var(--texte); font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.carte-type:hover { border-color: var(--texte-2); }
.carte-type.actif { border-color: var(--chaud); background: color-mix(in srgb, var(--chaud) 9%, var(--surface)); box-shadow: inset 0 0 0 1px var(--chaud); }
.carte-type:disabled { opacity: 0.45; cursor: default; }
.carte-type .icone { grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: var(--surface); border: 1px solid var(--trait); color: var(--texte-2); }
.carte-type.actif .icone { background: var(--chaud); border-color: var(--chaud); color: var(--sur-couleur); }
.carte-type .titre { font-size: 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.carte-type .quoi { font-size: 13px; color: var(--texte-2); line-height: 1.4; }
.carte-type .prix { grid-column: 2; font-size: 12px; color: var(--chaud); font-weight: 650; margin-top: 4px; }
.groupes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 22px; }
.groupe { padding: 8px 0; }
.groupe-titre { font-size: 14px; font-weight: 650; }
.groupe-aide { font-size: 12.5px; color: var(--texte-2); margin: 1px 0 8px; min-height: 17px; }
.groupe-choix { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.groupe-choix .sep { width: 1px; height: 18px; background: var(--trait); margin: 0 4px; }
.chip { transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.lancement { background: color-mix(in srgb, var(--chaud) 5%, var(--surface)); }
.lancement-corps { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: start; }
.recap { font-size: 16px; line-height: 1.45; max-width: 60ch; }
.etat-parcours { font-size: 13.5px; color: var(--texte-2); margin-top: 8px; }
.lancement-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 220px; }
.lancement-droite .cout { display: flex; align-items: baseline; gap: 8px; }
.lancement-droite .cout .grand { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.lancement-droite .cout .unite { font-size: 14px; color: var(--texte-2); }
.lancement-droite .sous-cout { font-size: 12.5px; color: var(--texte-2); text-align: right; }
.lancement-droite .boutons { justify-content: flex-end; margin-top: 10px; }
.lancement .stepper { margin: 10px 0 0; }
@media (max-width: 860px) {
  .cartes-type { grid-template-columns: 1fr; }
  .lancement-corps { grid-template-columns: 1fr; }
  .lancement-droite { align-items: flex-start; }
  .lancement-droite .sous-cout { text-align: left; }
  .lancement-droite .boutons { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .carte-type, .chip, .video { transition: none; }
}

/* ---- CRÉER, troisième passe (05/09/2026) : les formats se voient, les personnes ont un
   visage, le script est un temps à part entière avant de lancer. */
.chip.format { display: inline-flex; align-items: center; gap: 7px; }
.silhouette { display: inline-block; height: 14px; border: 1.5px solid currentColor; border-radius: 2px; opacity: 0.85; }
.chip.personne { display: inline-flex; align-items: center; gap: 7px; padding-left: 5px; }
.chip.personne .avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--texte-2); border: 1px solid var(--trait); }
.chip.personne.actif .avatar { border-color: var(--sur-couleur); }
.chip.personne.actif .avatar.initiale { background: rgba(0, 0, 0, 0.18); color: var(--sur-couleur); }
.chip.personne.muette { opacity: 0.5; }
.chip.personne.muette.actif { opacity: 1; }
.ecouter {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; margin: 0 6px 0 -2px; font-size: 11px;
  display: inline-grid; place-items: center; color: var(--texte-2);
}
.ecouter.joue { border-color: var(--froid); color: var(--froid); }
.script-vide { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.script-vide-titre { font-size: 15px; margin-bottom: 3px; }
.script-plans { margin-top: 10px; }
.script-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--trait); }
.rushes { margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--trait); border-radius: 10px; max-width: 60ch; }
.rushes-titre { font-size: 14px; font-weight: 650; }
.rushes ol { margin: 4px 0 8px; padding-left: 18px; }
.rushes .depot { display: block; cursor: pointer; }
.rushes .depot input { width: 100%; }
.rushes .depot span { display: none; }
.rushes-ok { margin-top: 10px; font-size: 13.5px; }

/* ---- SOUS 560 px, TROIS RANGÉES QUI NE TIENNENT PAS (05/09/2026, vu en regardant
   Résultats sur un écran de téléphone et non en lisant le code). Le bandeau du geste
   réduisait sa phrase à une colonne de trois mots pour garder son bouton sur la même
   ligne ; la barre d'un angle tombait à trente pixels derrière sa valeur ; l'accroche
   d'une publicité et son annonceur se chevauchaient. Chacune se remet à la ligne. */
@media (max-width: 560px) {
  .geste { flex-wrap: wrap; }
  .geste .texte { flex: 1 1 100%; }
  .geste .bouton-lien, .geste button { margin-left: 44px; }
  .barre-ligne { grid-template-columns: 1fr auto; }
  .barre-ligne .barre-piste { grid-column: 1 / -1; height: 14px; }
  .concurrent .tete { flex-wrap: wrap; }
  .concurrent .tete .mono { text-align: left; }
}

/* ======================================================================
   RÉGLAGES : ONGLETS ET BLOCS (05/09/2026, deuxième passe)
   ======================================================================
   Retour d'Axel : « trop de trucs, ce n'est pas clair ». Sept cartes et
   quarante champs arrivaient d'un coup, tous du même poids. Trois onglets
   n'en montrent qu'un tiers, et dans chacun un bloc dit en une ligne ce
   qu'il change. Un bloc replié garde dans son titre de quoi décider s'il
   faut l'ouvrir : replier sans dire ce qu'il y a dedans, c'est cacher.
   ====================================================================== */
/* UN FORMULAIRE NE GAGNE RIEN A ETRE LARGE : sur 1500 px le libelle se retrouvait
   a un demi-metre de son champ, et l oeil devait traverser l ecran pour les relier. */
.onglets, .panneau, .barre-bas { max-width: 1040px; }
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 18px; border-bottom: 1px solid var(--trait); }
.onglet {
  display: grid; gap: 1px; text-align: left; background: transparent; border: 0;
  border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
  padding: 8px 14px 10px; cursor: pointer; color: var(--texte-2); margin-bottom: -1px;
}
.onglet:hover { background: var(--surface-2); color: var(--texte); }
.onglet .nom { font-size: 14.5px; font-weight: 650; }
.onglet .quoi { font-size: 12px; color: var(--texte-2); }
.onglet.actif { color: var(--texte); border-bottom-color: var(--chaud); background: transparent; }
.onglet.actif .nom { color: var(--chaud); }

.panneau { display: grid; gap: 12px; }
/* `hidden` ne pese rien face a `display: grid` : sans cette ligne les trois onglets
   s affichaient EN MEME TEMPS, ce qui est exactement le defaut qu on repare. */
.panneau[hidden] { display: none; }
.bloc {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--ombre);
}
.bloc > summary, .bloc-tete {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 0.02em;
}
.bloc > summary { cursor: pointer; color: var(--texte); padding: 0; font-size: 12px; }
.bloc > summary::marker { color: var(--texte-2); }
.bloc-titre { font-size: 14.5px; font-weight: 650; letter-spacing: 0; color: var(--texte); }
.bloc-quoi { font-size: 12.5px; color: var(--texte-2); letter-spacing: 0; flex: 1; }
.bloc-etat { font-size: 12.5px; letter-spacing: 0; margin-left: auto; }
.bloc-corps { margin-top: 4px; }
.bloc .champs { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.aide { font-size: 11.5px; color: var(--texte-2); line-height: 1.35; }
.angle-bloc { background: var(--surface-2); box-shadow: none; margin-bottom: 8px; }
.comptes { margin-top: 12px; }

/* LA BARRE D'ENREGISTREMENT reste sous les yeux : les champs du dossier vivent
   maintenant sur deux onglets, un bouton posé au bas d'un seul d'entre eux aurait
   laissé croire que l'autre s'enregistre tout seul. Elle dit aussi s'il reste
   quelque chose à écrire, ce que l'ancienne page ne disait jamais. */
.barre-bas {
  position: sticky; bottom: 0; z-index: 5; margin-top: 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--bandeau); backdrop-filter: blur(8px);
}
.barre-bas .resultat { margin-top: 0; }
.barre-bas button { margin-left: auto; }

@media (max-width: 560px) {
  .onglets { gap: 0; }
  .onglet { padding: 7px 10px 9px; flex: 1 1 auto; }
  .onglet .quoi { display: none; }
  .bloc-etat { margin-left: 0; }
}

/* ---- REGLAGES : CE QUI MANQUE, EN TETE ET CLIQUABLE (05/09/2026, troisieme passe)
   Trois onglets rangent la page mais ne disent pas par ou commencer. Le bandeau nomme
   ce qui empeche la prochaine creation, et chaque ligne emmene au reglage concerne.
   Deux niveaux seulement : ce qui BLOQUE (rouge) et ce qui diminue (or). */
.bandeau-ok, .bandeau { max-width: 1040px; margin: 0 0 14px; }
.bandeau-ok {
  font-size: 13px; color: var(--froid); padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--froid) 35%, var(--trait)); border-radius: var(--r);
  background: color-mix(in srgb, var(--froid) 7%, var(--surface));
}
.bandeau {
  padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--trait);
  background: var(--surface); box-shadow: var(--ombre);
  border-left: 3px solid var(--chaud);
}
.bandeau.bloque { border-left-color: var(--alerte); }
.bandeau-titre { font-size: 14px; font-weight: 650; margin-bottom: 8px; }
.bandeau-points { display: grid; gap: 4px; }
.point {
  display: flex; align-items: baseline; gap: 9px; text-align: left; width: 100%;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 5px 8px; cursor: pointer; color: var(--texte-2); font-size: 13px;
}
.point:hover { background: var(--surface-2); color: var(--texte); border-color: var(--trait); }
.point .puce {
  flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: color-mix(in srgb, var(--chaud) 20%, transparent); color: var(--chaud);
}
.point.bloque .puce { background: color-mix(in srgb, var(--alerte) 20%, transparent); color: var(--alerte); }
.point.bloque { color: var(--texte); }

.onglet .compte {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  margin-left: 6px; border-radius: 9px; font-size: 11px; font-weight: 700; vertical-align: 1px;
  background: color-mix(in srgb, var(--chaud) 22%, transparent); color: var(--chaud);
}
.onglet .compte.bloque { background: color-mix(in srgb, var(--alerte) 22%, transparent); color: var(--alerte); }

/* LE HALO : on arrive au bon endroit sans savoir lequel des huit blocs on venait voir. */
.bloc.vise { animation: vise 1.6s ease-out; }
@keyframes vise {
  0%, 30% { border-color: var(--chaud); box-shadow: 0 0 0 3px color-mix(in srgb, var(--chaud) 22%, transparent); }
  100% { border-color: var(--trait); box-shadow: var(--ombre); }
}
@media (prefers-reduced-motion: reduce) { .bloc.vise { animation: none; border-color: var(--chaud); } }

/* LA JAUGE dit toujours son denominateur : « 24 % » ne se decide pas, « 1,18 € sur
   5,00 € » se decide. */
.jauge { margin-top: 8px; }
.jauge-tete { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; align-items: baseline; }
.jauge-piste { margin-top: 5px; height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.jauge-part { height: 100%; background: var(--froid); border-radius: 4px; }
.jauge-part.pleine { background: var(--alerte); }

/* ---- REGLAGES : LE KIT SE VOIT (05/09/2026, quatrieme passe)
   On tapait « #c4502e » sans jamais voir ce que ca donne, alors que cette couleur
   habille les legendes de CHAQUE video : le seul moment ou on le decouvrait etait
   apres avoir paye une generation. La vignette est aux vraies proportions. */
.kit-deux { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; }
.couleur-duo { display: flex; gap: 8px; align-items: center; }
.couleur-duo input[type="color"] {
  flex: none; width: 42px; height: 34px; padding: 2px; cursor: pointer;
  border: 1px solid var(--trait); border-radius: 8px; background: var(--surface-2);
}
.couleur-duo input[type="text"], .couleur-duo input:not([type="color"]) { flex: 1; min-width: 0; }

/* LES VARIABLES VIVENT SUR LE FIGURE, pas sur l ecran : posees sur l enfant, la
   declaration du CSS ecrasait celle que le JavaScript pose sur le parent, et l apercu
   ne changeait jamais de couleur pendant qu on tapait. Vu en tapant, pas en relisant. */
.apercu-kit { margin: 0; display: grid; gap: 6px; justify-items: center; --marque: #c4502e; --sur-marque: #ffffff; }
.apercu-kit .ecran {
  position: relative; width: 128px; aspect-ratio: 9 / 16; border-radius: 10px;
  overflow: hidden; border: 1px solid var(--trait); background: var(--surface-2);
  display: flex; flex-direction: column; justify-content: space-between; padding: 9px;
}
/* COULEUR PLEINE, PAS UN DEGRADE : la feuille en interdit un (test/palette.test.mjs,
   « le cliche de tous les outils IA »), et c est la couleur telle quelle que le moteur
   pose sur les videos. Un apercu plus joli que le resultat ne sert a rien. */
.apercu-kit .fond { position: absolute; inset: 0; background: var(--marque); }
.apercu-kit .logo { position: relative; max-width: 46px; max-height: 18px; object-fit: contain; align-self: flex-start; }
.apercu-kit .accroche {
  position: relative; font-size: 10px; line-height: 1.25; font-weight: 700;
  color: var(--sur-marque); margin-top: auto; text-wrap: balance;
}
.apercu-kit .bas { position: relative; display: flex; align-items: center; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.apercu-kit .appel {
  font-size: 8px; font-weight: 700; padding: 3px 6px; border-radius: 20px;
  background: var(--sur-marque); color: var(--marque);
}
.apercu-kit .prix { font-size: 9px; font-weight: 700; color: var(--sur-marque); }
.apercu-kit .mention { position: relative; font-size: 6px; color: var(--sur-marque); opacity: 0.75; margin-top: 4px; }

@media (max-width: 640px) {
  .kit-deux { grid-template-columns: 1fr; }
  .apercu-kit { justify-items: start; }
}

/* ---- LE LOT (05/09/2026) */
.lot summary { color: var(--chaud); }
.lot textarea { margin-top: 8px; }

/* ---- ITÉRER SUR LA GAGNANTE (05/09/2026) */
.iterer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -6px 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--froid) 50%, var(--trait)); border-radius: 10px; font-size: 13.5px; }
.iterer input { flex: 1 1 260px; }

/* ---- REGLAGES : DEPOSER UN LOGO (05/09/2026, cinquieme passe)
   La page disait « un fichier depose dans clients/<marque>/marque/ » : une marque
   cliente n a pas d acces au disque du serveur, cette phrase ne s adressait qu a nous. */
.kit-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.kit-actions .aide { flex: 1 1 220px; }
.depot-logo { display: inline-block; cursor: pointer; }
.depot-logo input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.depot-logo .faux-bouton {
  display: inline-block; padding: 6px 12px; border-radius: 8px; font-size: 13px;
  border: 1px solid var(--trait); background: var(--surface-2); color: var(--texte);
}
.depot-logo:hover .faux-bouton { border-color: var(--texte-2); }
.depot-logo input:focus-visible + .faux-bouton { outline: 2px solid var(--chaud); outline-offset: 2px; }
.depot-logo input:disabled + .faux-bouton { opacity: 0.5; }

/* LES PAGES LÉGALES ET LE PIED (06/09/2026). */
.pied-liens { margin-top: 10px; }
.pied-liens a { color: var(--texte-2); }
.legal { max-width: 760px; margin: 0 auto; line-height: 1.6; }
.legal h3 { margin: 22px 0 6px; font-size: 15px; }
.legal p, .legal li { color: var(--texte-2); font-size: 14px; }
.legal strong { color: var(--texte); }
.legal table.bareme { width: 100%; font-size: 13px; }
.legal table.bareme th { text-align: left; color: var(--texte-2); font-weight: 600; padding: 4px 8px 4px 0; }
.legal table.bareme td { padding: 4px 8px 4px 0; vertical-align: top; }
.formulaire label.case { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.formulaire label.case input { width: auto; margin-top: 3px; }