/* Cube Media — la charte de Feeds, l'autre outil de l'agence : la salle de rédaction d'un quotidien régional au
   moment du bouclage. Papier journal, encre, un seul rouge pour l'action forte (Valider), cyan = parti, jaune = en
   attente (y compris « le téléphone attend ta décision »), rouge = échec. Filets d'un pixel, aucun arrondi, aucune ombre,
   pas de mode sombre.
   La police Archivo (variable : largeur 62 à 125, graisse 100 à 900) est servie d'ici : rien ne se charge de l'extérieur. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("polices/Archivo%5Bwdth,wght%5D.ttf") format("truetype");
}
:root {
  --papier: #F1EDE2;
  --papier-clair: #F8F5EE;
  --papier-fonce: #E4DED0;
  --encre: #121212;
  --encre-2: #34322D;
  --doux: #5E5A50;
  --filet: #121212;
  --filet-doux: #C9C2B2;
  --rouge: #D61F14;
  --rouge-vif: #E3261C;
  --cyan: #0089C7;
  --cyan-texte: #006690;
  --magenta: #E5007E;
  --jaune: #F5C800;
  --ok: #006690;
  --alerte: #8A6400;
  --erreur: #D61F14;
  --accent: #121212;
  --t-petit: 12.5px;
  --t-texte: 15px;
  --t-titre: 26px;
  --t-une: clamp(52px, 6.4vw, 96px);
  --serre: "wdth" 62;
  --etroit: "wdth" 75;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --rail: 236px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--papier);
  color: var(--encre);
  font: 400 var(--t-texte)/1.5 Archivo, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--rouge); color: var(--papier-clair); }
* { scrollbar-width: thin; scrollbar-color: var(--encre-2) transparent; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
input, textarea { caret-color: var(--rouge); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1; font-weight: 900; font-variation-settings: var(--serre); letter-spacing: -.005em; }
h1 { font-size: 44px; }
h2 { font-size: var(--t-titre); }
h3 { font-size: 20px; font-variation-settings: var(--etroit); font-weight: 800; }
p { margin: 0 0 .75rem; }
small, .doux { color: var(--doux); font-size: var(--t-petit); }
code { background: var(--papier-fonce); padding: 1px 5px; font-size: .92em; }
pre { font-family: inherit; }
.rouge { color: var(--rouge); }

/* ---------- la une : grand titre de page, filet gras */
.une { padding-top: .1em; font-size: var(--t-une); line-height: .84; font-weight: 900; font-variation-settings: var(--serre); letter-spacing: -.015em; margin: 0; }
.entete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; border-bottom: 3px solid var(--filet); padding-bottom: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.entete-page h1 { margin: 0; }
.entete-page p { margin: 6px 0 0; }
.date-edition { font-weight: 700; text-align: right; font-size: var(--t-texte); }
.date-edition b { color: var(--rouge); }

/* ---------- rail (barre latérale) : manchette, modules, pastilles des médias sur noir, pied */
body.avec-menu { padding-left: var(--rail); }
.menu {
  position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 30;
  display: flex; flex-direction: column; gap: 20px;
  padding: 24px 16px 0; background: var(--encre); color: var(--papier); overflow-y: auto;
}
.menu .marque { text-decoration: none; display: block; padding: 0 4px; }
.menu .marque strong { display: block; font-weight: 900; font-variation-settings: var(--serre); font-size: 46px; line-height: .86; letter-spacing: -.01em; }
.menu .marque span { display: block; font-size: var(--t-petit); opacity: .62; margin-top: 8px; }
.modules { display: flex; flex-direction: column; }
.modules a, .pied-menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; text-decoration: none;
  font-weight: 700; font-size: var(--t-texte); color: rgb(241 237 226 / .62); transition: color .15s, background .15s;
}
.modules a .icone, .pied-menu a .icone { opacity: .62; transition: opacity .15s; }
.modules a:hover, .pied-menu a:hover, .modules a.actif, .pied-menu a.actif { color: var(--papier); }
.modules a:hover .icone, .pied-menu a:hover .icone, .modules a.actif .icone, .pied-menu a.actif .icone { opacity: 1; }
.modules a.actif, .pied-menu a.actif { background: #1F1E1C; }
.modules a.actif .icone, .pied-menu a.actif .icone { stroke: var(--rouge-vif); stroke-width: 2.4; }
.modules .nb { margin-left: auto; background: var(--rouge-vif); color: #fff; font-size: 11px; font-weight: 800; padding: 1px 6px; }
.modules .nb.calme { background: var(--jaune); color: var(--encre); }
.icone { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: square; }
.medias-menu { display: flex; flex-direction: column; gap: 10px; flex: 1 0 auto; }
.titre-groupe { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .55; padding: 0 2px 2px; }
.pastilles-medias { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pastille-media {
  position: relative; height: 54px; background: #000; border: 1px solid #2C2B28; display: grid; place-items: center;
  text-decoration: none; color: var(--papier); overflow: hidden; transition: border-color .15s, transform .2s var(--sortie);
}
.pastille-media img { max-width: 78%; max-height: 34px; object-fit: contain; }
.pastille-media .sans-logo { font-weight: 900; font-variation-settings: var(--serre); font-size: 15px; text-transform: uppercase; letter-spacing: .02em; padding: 0 4px; text-align: center; line-height: 1; }
.pastille-media:hover { border-color: var(--papier); }
.pastille-media.actif { border-color: var(--rouge-vif); box-shadow: inset 0 0 0 1px var(--rouge-vif); }
.pastille-media .marqueur { position: absolute; right: 4px; top: 4px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--rouge-vif);
  color: #fff; font-style: normal; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }
.pastille-media[hidden] { display: none; }
.media-menu.nouveau { display: flex; align-items: center; gap: 10px; color: rgb(241 237 226 / .7); font-weight: 700; font-size: 13px;
  text-decoration: none; padding: 6px 2px; }
.media-menu.nouveau .icone { width: 16px; height: 16px; }
.media-menu.nouveau:hover { color: var(--papier); }
/* Le pied du rail (Fox, Réglages, Déconnexion) reste collé en bas quand le rail défile (écran bas, beaucoup de médias) :
   l'entrée de Fox ne sort jamais de l'écran (R1) */
.pied-menu { display: flex; flex-direction: column; border-top: 1px solid #34322D; padding: 8px 0 18px;
  position: sticky; bottom: 0; z-index: 1; background: var(--encre); }
.reperes { display: flex; gap: 6px; padding: 4px 4px 0; }
.reperes i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.barre-mobile, .voile, .onglets-bas { display: none; }
.barre { display: flex; align-items: center; height: 64px; padding: 0 28px; border-bottom: 3px solid var(--filet); }
.barre .marque { font-weight: 900; font-variation-settings: var(--serre); font-size: 34px; text-decoration: none; }

main { padding: 28px 36px 190px; max-width: 1560px; }   /* 190 px en bas : la dernière ligne remonte au-dessus de Fox */
body:not(.avec-menu) main { margin-inline: auto; }
main.large { max-width: none; }
main.etroit { max-width: 900px; }

/* ---------- messages */
.flash { list-style: none; padding: 0; margin: 0 0 18px; }
.flash li { background: var(--encre); color: var(--papier); padding: 10px 14px; margin-bottom: 6px; font-weight: 600; }
.flash li.echec { background: var(--rouge); color: #fff; }
.flash li a { color: inherit; }

/* ---------- boutons et champs */
.bouton, button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 40px; padding: 0 18px; border: 1.5px solid var(--encre); border-radius: 0;
  background: var(--encre); color: var(--papier-clair);
  font: inherit; font-weight: 800; font-size: var(--t-texte); font-variation-settings: var(--etroit); letter-spacing: .01em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s, transform .12s var(--sortie);
}
.bouton:hover, button:hover { background: #2A2926; }
.bouton:active, button:active { transform: translateY(1px); }
.bouton.secondaire, button.secondaire { background: transparent; color: var(--encre); }
.bouton.secondaire:hover, button.secondaire:hover { background: var(--encre); color: var(--papier-clair); }
.bouton.discret, button.discret { background: transparent; color: var(--encre-2); border-color: transparent; padding: 0 8px; text-decoration: underline; text-decoration-color: var(--filet-doux); }
.bouton.discret:hover, button.discret:hover { color: var(--encre); background: transparent; text-decoration-color: var(--encre); }
.bouton.danger, button.danger { background: transparent; color: var(--rouge); border-color: var(--rouge); }
.bouton.danger:hover, button.danger:hover { background: var(--rouge); color: #fff; }
/* Une action qui retire (Rejeter, Abandonner, Supprimer, Révoquer) sans être celle du jour : à l'encre, rouge au survol
   seulement (une seule action rouge par ligne : Valider). Avec .discret, c'est un lien souligné. */
.bouton.danger-doux, button.danger-doux { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton.danger-doux:hover, button.danger-doux:hover { background: var(--rouge); border-color: var(--rouge); color: #fff; }
button.danger-doux.discret { border-color: transparent; color: var(--encre-2); }
button.danger-doux.discret:hover { background: transparent; color: var(--rouge); text-decoration-color: var(--rouge); }
.actions .pousse { margin-left: auto; }
.bouton.ia, button.ia, .bouton.bat, button.bat { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.bouton.ia:hover, button.ia:hover, .bouton.bat:hover, button.bat:hover { background: #B8160D; border-color: #B8160D; }
button.bat, .bouton.bat { font-weight: 900; font-variation-settings: var(--serre); font-size: 24px; min-height: 50px; padding: 0 22px; letter-spacing: .03em; }
button:disabled, .bouton[aria-disabled="true"] { opacity: .45; cursor: progress; }
button.bat:disabled { opacity: 1; background: transparent; color: var(--doux); border: 1.5px dashed var(--doux); cursor: not-allowed; }
.petit { min-height: 34px; padding: 0 12px; font-size: 13px; }
button.bat.petit, .bouton.bat.petit { font-size: 16px; min-height: 34px; padding: 0 14px; }

label { display: block; font-weight: 700; font-size: 13px; margin: 0 0 6px; }
label .doux { font-weight: 400; }
/* Les pages posent leurs champs à la suite (label, champ, label, champ…) : un peu d'air entre deux */
main label { margin: 14px 0 5px; }
main label:first-child, main .ligne label, main .case, main label.case, main .choix { margin-top: 0; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], input[type=url], input[type=file],
input:not([type]), select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--encre); border-radius: 0;
  background: var(--papier-clair); color: var(--encre); font: inherit;
}
select, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=hidden]) { height: 42px; }
table select, table input:not([type=checkbox]):not([type=radio]) { height: 38px; }
input[type=checkbox], input[type=radio] { accent-color: var(--encre); }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 800; font-variation-settings: var(--etroit); border: 1.5px solid var(--encre); border-radius: 0;
  background: transparent; color: var(--encre); padding: 6px 14px; margin-right: 12px; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--encre); color: var(--papier-clair); }
textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: #8C877C; }
.champ { margin-bottom: 14px; }
.ligne { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
/* Une rangée de champs qui suit autre chose qu'un titre (champ, case, aide, autre rangée) garde son air ; idem après elle */
main :not(legend, h2, h3) + .ligne, .ligne + label, .ligne + .interrupteur { margin-top: 14px; }
.interrupteur + .detail-technique { border-top: 0; margin-top: 8px; }
.ligne > .champ, .ligne > div { flex: 1 1 180px; min-width: 0; }
.ligne.haut { align-items: flex-start; }   /* une rangée dont un champ porte une aide dessous : les libellés restent alignés */
.case { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 14px; margin: 6px 0; }
.case input { width: 18px; height: 18px; accent-color: var(--encre); margin: 0; }
.actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.aide { font-size: var(--t-petit); color: var(--doux); margin: 4px 0 0; }
fieldset { border: 1px solid var(--filet); background: var(--papier-clair); padding: 14px 20px 20px; margin: 0 0 16px; min-width: 0; }
legend { font-weight: 900; font-variation-settings: var(--serre); font-size: 24px; padding: 0 8px; }

/* ---------- blocs, pastilles d'état, tableaux */
.carte { background: var(--papier-clair); border: 1px solid var(--filet); padding: 20px 22px; }
.carte + .carte { margin-top: 16px; }
.carte > h2:first-child, .carte > .ligne:first-child h2 { padding-bottom: 10px; border-bottom: 1px solid var(--filet); margin-bottom: 14px; }
details.carte > summary { cursor: pointer; font-weight: 700; }
.grille-cartes, .grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.grille-cartes > .carte, .grille > .carte { margin-top: 0; }
.vide-etat, .vide { text-align: center; padding: 48px 20px; color: var(--doux); font-weight: 600; }
.pastilles { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pastille {
  display: inline-block; padding: 2px 7px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid var(--encre); color: var(--encre); background: transparent; line-height: 1.5; white-space: nowrap;
}
/* Les états de Cube Media sur les trois couleurs de Feeds : cyan = parti, jaune = en attente (dont « le téléphone attend
   ta décision »), rouge = échec ; gris = abandonné ; encre = étiquette forte. Sur le cyan, le texte est à l'encre comme
   sur le jaune : 4,9:1 (le blanc n'y faisait que 3,9:1) ; chaque pastille atteint au moins 4,5:1 (F10) */
.pastille.ok, .pastille.programme, .pastille.reussie, .pastille.en_ligne, .pastille.publie { background: var(--cyan); border-color: var(--cyan); color: var(--encre); }
.pastille.alerte, .pastille.attente, .pastille.valide, .pastille.a_valider, .pastille.en_attente, .pastille.envoi, .pastille.louee, .pastille.a_generer, .pastille.en_cours { background: var(--jaune); border-color: var(--jaune); color: var(--encre); }
.pastille.erreur, .pastille.echouee, .pastille.expiree { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.pastille.a_verifier, .pastille.operateur, .pastille.incertaine { background: var(--jaune); border-color: var(--jaune); color: var(--encre); }
.pastille.rejete, .pastille.annulee, .pastille.annule { background: var(--papier-fonce); border-color: var(--papier-fonce); color: var(--doux); }
.pastille.noir, .pastille.original { background: var(--encre); color: var(--papier-clair); }
.pastille.classique { background: transparent; }
.tableau { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--filet-doux); vertical-align: top; }
th { color: var(--encre); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid var(--filet); white-space: nowrap; }
table input, table select { padding: 7px 9px; }
.etiquettes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.quand { font-size: 13px; color: var(--doux); }
.couleurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.couleurs input[type=color] { width: 100%; height: 44px; border: 1px solid var(--encre); padding: 2px; background: var(--papier-clair); }
.groupe-titre { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 3px solid var(--filet); gap: 12px; flex-wrap: wrap; }
.groupe-titre h2 { margin: 0; font-size: 30px; }
.sous-titre { color: var(--doux); margin: 0 0 16px; }
.raccourcis { font-size: var(--t-petit); color: var(--doux); }
.raccourcis kbd, kbd.raccourcis { font: 700 12px Archivo, sans-serif; border: 1px solid var(--filet-doux); border-bottom-width: 2px; padding: 0 5px; background: var(--papier-clair); color: var(--encre); }
.filtres { display: flex; gap: 0; flex-wrap: wrap; margin: 0 0 18px; }
.filtres button, .filtres a { min-height: 34px; display: inline-flex; align-items: center; padding: 0 14px; font-size: 13px; font-weight: 800; font-variation-settings: var(--etroit);
  background: transparent; color: var(--encre); border: 1.5px solid var(--encre); margin-right: -1.5px; text-decoration: none; }
.filtres button[aria-pressed="true"], .filtres a.actif { background: var(--encre); color: var(--papier-clair); }

/* ---------- séparateurs « · » : jamais au début ni à la fin d'une ligne (F5)
   Dans un texte, le point médian est collé à ses voisins par des espaces insécables : «  ·  » dans les
   gabarits, le filtre « separateurs » pour les textes des données, separateurs() dans les scripts. Entre les éléments
   d'une rangée qui passe à la ligne (.separes, une rangée en flex), il est porté par le CSS, devant chaque élément .sep,
   dans l'écart entre deux éléments (column-gap: var(--sep)) : celui d'un élément qui ouvre une ligne tombe hors de la
   rangée, qui le rogne (overflow-x: clip), et n'est jamais dessiné. */
.separes { --sep: 15px; overflow-x: clip; }
.separes > * { min-width: 0; }
.separes > .sep { position: relative; }
.separes > .sep::before { content: "·"; position: absolute; right: 100%; top: 50%; translate: 0 -50%; width: var(--sep);
  text-align: center; font: 800 14px/1 Archivo, "Helvetica Neue", Arial, sans-serif; font-variation-settings: "wdth" 100;
  letter-spacing: 0; text-transform: none; color: var(--doux); pointer-events: none; }

/* ---------- Aujourd'hui : les chiffres du jour, les dépêches à relire, les cartes des médias */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border: 1px solid var(--filet); margin-bottom: 22px; }
.chiffre { padding: 14px 16px; border-right: 1px solid var(--filet); background: var(--papier-clair); text-decoration: none; }
.chiffre:last-child { border-right: 0; }
.chiffre b { display: block; font-weight: 900; font-variation-settings: var(--serre); font-size: 40px; line-height: 1; }
.chiffre span { display: block; font-size: var(--t-petit); line-height: 1.3; color: var(--doux); font-weight: 600; margin-top: 4px; }
.chiffre b small { font-size: .55em; color: var(--doux); font-weight: 800; }
.chiffre .pastille { display: inline-block; margin-top: 6px; color: var(--encre); font-size: 10px; line-height: 1.5; font-weight: 800; }
.chiffre.rouge b { color: var(--rouge); } .chiffre.cyan b { color: var(--cyan-texte); }
.depeche { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--filet); position: relative; }
.depeche img, .depeche .sans-visuel { width: 72px; height: 90px; object-fit: cover; background: var(--papier-fonce); border: 1px solid var(--filet); display: block; }
.depeche .titre { font-weight: 900; font-variation-settings: var(--etroit); font-size: 22px; line-height: 1.02; text-decoration: none; display: block; }
.depeche .infos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: var(--t-petit); color: var(--doux); }
.depeche .actions { margin: 0; flex-wrap: nowrap; }
.puce-media { display: inline-grid; place-items: center; width: 54px; height: 30px; background: #000; vertical-align: middle; }
.puce-media img { max-width: 84%; max-height: 20px; object-fit: contain; }
.puce-media span { color: var(--papier); font-weight: 900; font-variation-settings: var(--serre); font-size: 11px; text-transform: uppercase; }
.carte-media { padding: 0; display: flex; flex-direction: column; text-decoration: none; overflow: hidden; transition: transform .25s var(--sortie); }
.carte-media:hover { transform: translateY(-2px); }
.carte-media .logo { height: 96px; background: #000; display: grid; place-items: center; }
.carte-media .logo img { max-width: 64%; max-height: 58px; object-fit: contain; }
.carte-media .initiale { font-weight: 900; font-variation-settings: var(--serre); font-size: 30px; color: var(--papier); text-transform: uppercase; }
.carte-media .corps { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.carte-media h2 { font-size: 24px; margin: 0; }
.carte-media .compteurs { display: flex; gap: 14px; flex-wrap: wrap; }
.carte-media .compteurs b { font-weight: 900; font-variation-settings: var(--serre); font-size: 22px; line-height: 1; }
.carte-media .compteurs span { display: block; font-size: 11px; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; }
.carte-media .compteurs .rouge b { color: var(--rouge); } .carte-media .compteurs .cyan b { color: var(--cyan-texte); }
/* L'édition en deux colonnes (À boucler / Sous presse), prête pour le tableau de bord */
.edition-du-jour { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 0; align-items: start; margin: -28px -36px 0; }
.colonne-boucler { padding: 28px 36px 40px; border-right: 1px solid var(--filet); min-width: 0; }
/* « Sous presse » (collante) s'arrête à 210 px du bas de l'écran, sur un filet : dessous, le coin où Fox s'assoit sans rien
   cacher, bulle comprise, sur le premier écran d'Aujourd'hui comme après défilement (R1) */
.colonne-presse { padding: 28px 28px 40px; position: sticky; top: 0; max-height: calc(100vh - 210px); overflow-y: auto;
  border-bottom: 1px solid var(--filet); }
.colonne-presse .une { font-size: 56px; }
.edition { display: grid; grid-template-columns: 76px minmax(120px, 190px) minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--filet); position: relative; }
.edition .puce-client, .edition .puce-edition { width: 76px; height: 56px; background: #000; display: grid; place-items: center; text-decoration: none; }
.edition .puce-client img, .edition .puce-edition img { max-width: 80%; max-height: 38px; object-fit: contain; }
.edition .puce-client span, .edition .puce-edition span { color: var(--papier); font-weight: 900; font-variation-settings: var(--serre); font-size: 14px; text-transform: uppercase; text-align: center; line-height: 1; }
.edition .nom { font-weight: 900; font-variation-settings: var(--etroit); font-size: 22px; line-height: 1.02; text-decoration: none; }
.edition .nom small { display: block; font-weight: 500; font-variation-settings: "wdth" 100; font-size: 13px; color: var(--doux); margin-top: 5px; }
.edition .actions-edition { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.edition .actions-edition .note-bat { flex-basis: 100%; text-align: right; font-size: 11.5px; }
.edition.partie .cdf > span { opacity: .45; }
.cdf { display: flex; border: 1px solid var(--filet); height: 90px; position: relative; text-decoration: none; overflow: hidden; background: var(--papier-fonce);
  width: fit-content; max-width: 100%; justify-self: start; }
.cdf > span { flex: 0 0 72px; background: var(--papier-fonce) center / cover no-repeat; border-right: 1px solid var(--filet); transition: transform .3s var(--sortie); }
.cdf > span:last-of-type { border-right: 1px solid var(--filet); }
.cdf:hover > span { transform: scale(1.04); }
.cdf .compte { position: absolute; right: 0; bottom: 0; font-style: normal; background: var(--encre); color: var(--papier-clair); font-size: 11px; font-weight: 800; padding: 1px 6px; }
.barre-rouge { position: absolute; left: 3%; right: 3%; top: calc(50% - 2px); height: 4px; background: var(--rouge-vif); transform: rotate(-2deg) scaleX(0); transform-origin: left; pointer-events: none; z-index: 1; }
.edition.partie .barre-rouge { transform: rotate(-2deg) scaleX(1); }
.anim .edition.partie .barre-rouge { animation: trait-barre .45s .25s var(--sortie) both; }
@keyframes trait-barre { from { transform: rotate(-2deg) scaleX(0); } to { transform: rotate(-2deg) scaleX(1); } }
.tampon {
  position: absolute; right: 14px; top: 50%; translate: 0 -50%; z-index: 2; pointer-events: none;
  border: 4px solid var(--rouge-vif); color: var(--rouge-vif); background: color-mix(in srgb, var(--papier) 82%, transparent);
  font-weight: 900; font-variation-settings: var(--serre); font-size: 30px; line-height: 1; padding: 4px 12px 3px;
  rotate: -8deg; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
/* L'heure sous le tampon est un petit texte : au rouge du texte, plus sombre que le rouge vif du cadre (4,5:1 sur la
   carte blanche de Fox) (F10) */
.tampon small { display: block; color: var(--rouge); font-size: 12px; font-weight: 800; letter-spacing: .06em; font-variation-settings: "wdth" 100; }
.tampon.claque { animation: tampon .34s var(--sortie) both; }
@keyframes tampon { 0% { opacity: 0; scale: 2.4; rotate: -16deg; } 70% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; rotate: -8deg; } }
.tampon-auto, .tampon-auto small { border-color: var(--cyan); color: var(--cyan-texte); }
.secousse { animation: secousse .22s .2s ease-out; }
@keyframes secousse { 0%, 100% { translate: 0 0; } 30% { translate: 0 2px; } 60% { translate: 0 -1px; } }
.negatif-voile { position: fixed; inset: 0; z-index: 100; pointer-events: none; backdrop-filter: invert(1); -webkit-backdrop-filter: invert(1); }
.presse-ligne { display: grid; grid-template-columns: 50px 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.presse-ligne .heure { font-weight: 800; font-size: 17px; }
.presse-ligne .vignette-mini { width: 36px; height: 45px; background: var(--papier-fonce) center / cover; }
.presse-ligne b { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presse-ligne > span:last-of-type > span { display: block; font-size: 12.5px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presse-ligne b:has(.pastille) { display: flex; align-items: center; gap: 0; }
.presse-ligne b .nom-media { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presse-ligne b .pastille { flex: none; }
.presse-ligne .pastille.reseau { font-size: 9.5px; padding: 0 5px; margin-right: 4px; vertical-align: 1px; color: var(--encre); border-color: var(--encre-2); }
.presse-ligne .vignette-mini.sans { display: grid; place-items: center; color: var(--papier); }
.presse-ligne .vignette-mini .icone { width: 16px; height: 16px; }
.lien-suite { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--encre); }
.point-prog { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); display: inline-block; margin-right: 6px; vertical-align: 1px; }
.priorites { list-style: none; margin: 0; padding: 0; }
.priorite a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--filet); text-decoration: none; }
.priorite .rang { font-weight: 900; font-variation-settings: var(--serre); font-size: 22px; color: var(--doux); }
.priorite .qui b { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.priorite .qui small { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.priorite .reserve { font-weight: 900; font-variation-settings: var(--serre); font-size: 24px; white-space: nowrap; }
.priorite.vide .reserve, .priorite.urgent .reserve, .priorite.vide .rang, .priorite.urgent .rang { color: var(--rouge); }
.priorite.bientot .reserve { box-shadow: inset 0 -6px 0 var(--jaune); }
.priorite a:hover b { text-decoration: underline; }
.jour-presse { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin: 16px 0 0; color: var(--doux); }
.alerte-noire { background: var(--encre); color: var(--papier); padding: 13px 15px; margin-top: 14px; text-decoration: none; display: block; }
.alerte-noire b { display: block; color: #FF6B60; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.alerte-noire p { font-weight: 700; font-size: 15px; margin: 4px 0 0; }
.alerte-noire + .alerte-noire { margin-top: 6px; }
/* Le coup de stylo rouge : une ellipse tracée à la main autour d'un mot (le nom à revoir, « vide »…). */
.entoure-zone { position: relative; display: inline-block; }
.entoure { position: absolute; left: -12px; top: -9px; width: calc(100% + 24px); height: calc(100% + 18px); pointer-events: none; overflow: visible; }
.entoure path { fill: none; stroke: var(--rouge-vif); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 0; }
.anim .entoure path { animation: stylo .8s .35s var(--sortie) both; }
@keyframes stylo { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }

/* ---------- Téléphones : une décision à prendre (le téléphone s'est arrêté), un filet entre deux */
article.decision { padding: 14px 0 16px; border-top: 1px solid var(--filet-doux); scroll-margin-top: 16px; }
article.decision:first-of-type { border-top: 0; padding-top: 4px; }
article.decision h2 { font-variation-settings: var(--etroit); }
article.decision .actions { margin-top: 10px; }

/* ---------- vidéo récap */
.video-carte { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.video-carte video { width: 280px; aspect-ratio: 9/16; background: #000; display: block; border: 1px solid var(--filet); }
.attente-video { width: 280px; aspect-ratio: 9/16; background: var(--encre); color: var(--papier); display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 24px; font-weight: 900; font-variation-settings: var(--serre); font-size: 24px; }
ol.sujets { margin: 6px 0 0; padding-left: 22px; }
.legende-apercu { white-space: pre-wrap; background: var(--papier); border: 1px solid var(--filet-doux); padding: 10px 12px; font-size: 13.5px; max-height: 220px; overflow: auto; }
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { display: grid; grid-template-columns: 28px 56px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--filet-doux); }
.posts img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--filet); }
.posts .rang { font-weight: 900; font-variation-settings: var(--serre); font-size: 22px; color: var(--encre); }
.posts .titre-post { font-weight: 700; line-height: 1.3; }
.posts .detail { font-size: var(--t-petit); color: var(--doux); }
.posts li.reserve { opacity: .55; }
.rebours { display: inline-block; background: var(--encre); color: var(--papier); padding: 3px 12px; font-size: 13px; font-weight: 700; }

/* ---------- sources, réglages, nouveau média, lancement */
.proposition { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--filet-doux); }
.proposition label { margin: 0; font-weight: 500; }
.proposition label .adresse { display: block; overflow-wrap: anywhere; font-size: 12.5px; }
.proposition label small { display: block; line-height: 1.35; margin-top: 2px; }
.proposition input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
/* Sur téléphone, l'état de la source passe sous son nom et son adresse : le texte garde toute la largeur */
@media (max-width: 600px) {
  .proposition { grid-template-columns: 18px minmax(0, 1fr); row-gap: 6px; align-items: start; }
  .proposition > input[type=checkbox] { margin-top: 2px; }
  .proposition > .pastille { grid-column: 2; justify-self: start; }
}
.gabarits { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.gabarits label { margin: 0; cursor: pointer; border: 1.5px solid var(--filet-doux); padding: 8px; background: var(--papier); font-weight: 500; }
.gabarits label:has(input:checked) { border-color: var(--rouge-vif); box-shadow: inset 0 0 0 1px var(--rouge-vif); }
.gabarits img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; border: 1px solid var(--filet); background: var(--papier-fonce); }
.gabarits input { margin: 8px 6px 0 0; accent-color: var(--rouge); }
.gabarits b { font-weight: 900; font-variation-settings: var(--etroit); font-size: 19px; }
.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--filet-doux); }
.interrupteur:last-child { border-bottom: 0; }
.interrupteur .texte { flex: 1; }
.interrupteur strong { font-size: 17px; font-weight: 800; font-variation-settings: var(--etroit); }
.interrupteur small { display: block; margin-top: 2px; }
.interrupteur select { width: auto; flex: none; }
.interrupteur.verrou { opacity: .75; }
.bascule { position: relative; width: 52px; height: 28px; flex: none; margin: 0; }
.bascule input { opacity: 0; width: 0; height: 0; position: absolute; }
.bascule span { position: absolute; inset: 0; background: var(--papier-fonce); border: 1.5px solid var(--encre); transition: background .2s; cursor: pointer; }
.bascule span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 19px; height: 19px; background: var(--encre); transition: transform .25s var(--sortie), background .2s; }
.bascule input:checked + span { background: var(--cyan); border-color: var(--cyan); }
.bascule input:checked + span::after { transform: translateX(23px); background: #fff; }
.bascule input:disabled + span { cursor: not-allowed; opacity: .45; }
.bascule input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.etapes { counter-reset: etape; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.etapes li::before { content: counter(etape); font-weight: 900; font-variation-settings: var(--serre); font-size: 18px; color: var(--encre); line-height: 1.1; }
.etapes small { display: block; line-height: 1.35; margin-top: 2px; }
.etude { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.proposition-carte { position: relative; cursor: pointer; margin: 0; font-weight: 400; }
.proposition-carte input { position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; accent-color: var(--rouge); }
.proposition-carte .carte { padding-left: 48px; height: 100%; }
.proposition-carte:has(input:checked) .carte { border-color: var(--rouge-vif); box-shadow: inset 0 0 0 1px var(--rouge-vif); }
.proposition-carte h2 { font-size: 28px; }
.nuancier { display: flex; gap: 4px; margin: 8px 0; }
.nuancier i { width: 28px; height: 16px; display: block; border: 1px solid rgba(0, 0, 0, .2); }
.attente-ia { display: none; align-items: center; gap: 12px; padding: 14px 16px; background: var(--encre); color: var(--papier); font-weight: 600; margin-top: 14px; }
.attente-ia i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(241, 237, 226, .3); border-top-color: var(--jaune); animation: tourne .8s linear infinite; }
form.en-cours .attente-ia { display: flex; }
form.en-cours button { opacity: .4; pointer-events: none; }
.connexion { max-width: 420px; margin: 9vh auto; padding: 0; }
.carte > h1:first-child { font-size: 34px; padding-bottom: 10px; border-bottom: 3px solid var(--filet); margin-bottom: 14px; }
.bientot p { max-width: 62ch; }

/* ---------- téléphones */
.code-inscription { font-family: ui-monospace, Menlo, monospace; font-size: 30px; letter-spacing: .12em; background: var(--papier); border: 1px dashed var(--encre);
  padding: 14px 18px; display: inline-block; margin: 8px 0; }
.captures a { margin-right: 8px; }

/* ---------- un souci : la page d'erreur en clair (message, pourquoi, à faire, détail replié) */
.souci-message { font-weight: 800; font-variation-settings: var(--etroit); font-size: 27px; line-height: 1.1; margin: 0 0 6px; }
.souci h3 { margin: 18px 0 4px; font-size: 11.5px; font-weight: 800; font-variation-settings: "wdth" 100; line-height: 1.4; text-transform: uppercase; letter-spacing: .08em; color: var(--rouge); }
.souci p { max-width: 62ch; }
.detail-technique { margin-top: 20px; border-top: 1px solid var(--filet-doux); padding-top: 10px; }
.detail-technique summary { cursor: pointer; font-size: var(--t-petit); color: var(--doux); font-weight: 700; }
.detail-technique pre { white-space: pre-wrap; word-break: break-word; font: 12.5px/1.45 ui-monospace, Menlo, monospace; background: var(--papier);
  border: 1px solid var(--filet-doux); padding: 10px 12px; margin: 8px 0 0; }
.erreur-claire { border: 2px solid var(--rouge-vif); background: var(--papier-clair); padding: 18px 20px; max-width: 760px; }
.erreur-claire .erreur-message { font-size: 20px; font-weight: 800; margin-top: 0; }
.erreur-claire pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; }

/* ---------- dialogues */
dialog { border: 2px solid var(--encre); border-radius: 0; padding: 0; width: min(760px, calc(100vw - 32px)); background: var(--papier-clair); color: var(--encre); }
dialog::backdrop { background: rgba(18, 18, 18, .55); }
dialog[open] { animation: monte .28s var(--sortie); }
@keyframes monte { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
dialog .contenu { padding: 22px 24px; max-height: calc(100vh - 160px); overflow: auto; }
dialog .contenu h2 { border-bottom: 3px solid var(--filet); padding-bottom: 10px; }
dialog .pied { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--filet); background: var(--papier); }

/* ---------- dépêches (bulles de suivi) */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; z-index: 50; max-width: 400px; }
.toast { background: var(--encre); color: var(--papier); padding: 12px 16px; font-size: 14px; font-weight: 600; animation: depeche .32s var(--sortie); display: flex; gap: 10px; align-items: baseline; }
.toast::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--cyan); translate: 0 1px; }
.toast.erreur::before { background: var(--rouge-vif); }
.toast.attente::before { display: none; }
@keyframes depeche { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
.roue { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(241, 237, 226, .3); border-top-color: var(--jaune); display: inline-block; animation: tourne .8s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes tourne { to { transform: rotate(360deg); } }
/* Erreurs en clair : le message, « Pourquoi », « À faire », un lien utile ; la bulle reste jusqu'à ce qu'on la ferme */
.toast.toast-claire { align-items: flex-start; font-weight: 500; line-height: 1.4; }
.toast-claire .toast-corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.toast-claire .toast-corps strong { font-weight: 800; }
.toast-claire .toast-corps b { font-weight: 800; color: var(--papier-clair); }
.toast-claire .toast-lien { margin: 4px 0 0; padding: 0; align-self: flex-start; }
.toast-claire details { font-size: 12px; opacity: .8; }
.toast-claire details code { display: block; white-space: pre-wrap; word-break: break-word; margin-top: 4px; }
.toast-fermer { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; min-height: 0; padding: 0 0 0 6px; cursor: pointer; margin-left: auto; }
.toast-lien { margin-left: auto; color: inherit; font-weight: 800; text-decoration: underline; background: none; border: 0; min-height: 0; padding: 0 0 0 8px; cursor: pointer; }

/* ---------- dictée vocale (champs data-dictee) */
.dictee { position: relative; display: block; }
.dictee > input, .dictee > textarea { padding-right: 46px; }
.micro .icone { width: 16px; height: 16px; }
.micro { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%;
  background: var(--papier); border: 1px solid var(--encre); color: var(--encre); font-size: 14px; line-height: 1; }
.micro:hover { background: var(--papier-fonce); }
.micro[data-etat="ecoute"] { background: var(--rouge); border-color: var(--rouge); color: #fff; animation: pulsation 1.2s infinite; }
.micro[data-etat="transcription"] { background: var(--encre); color: var(--papier); }
@keyframes pulsation { 0% { box-shadow: 0 0 0 0 rgba(214, 31, 20, .45); } 70% { box-shadow: 0 0 0 10px rgba(214, 31, 20, 0); } 100% { box-shadow: 0 0 0 0 rgba(214, 31, 20, 0); } }

/* ---------- choix en pastilles */
label.choix { margin: 0; cursor: pointer; position: relative; font-weight: 700; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix span { display: inline-block; padding: 6px 13px; border: 1px solid var(--encre); background: var(--papier-clair); font-size: 13px; transition: background .15s, color .15s; }
.choix input:checked + span { background: var(--encre); color: var(--papier-clair); }
.choix input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.choix.suggestion span { border-style: dashed; }
.progression { display: flex; gap: 3px; margin-top: 6px; }
.progression i { width: 22px; height: 8px; border: 1px solid var(--encre); }
.progression i.fait { background: var(--rouge-vif); border-color: var(--rouge-vif); }
.liste-simple { list-style: none; padding: 0; margin: 0; }
.liste-simple li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--filet-doux); font-size: 14px; }
.liste-simple li:last-child { border-bottom: 0; }
.vignette-carree { width: 48px; height: 60px; background: var(--papier-fonce) center / cover; flex: none; }

/* ---------- planification (prête pour le module Planning) */
.planif-client, .planif-media { padding: 0; overflow: hidden; }
.planif-client > summary, .planif-media > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; flex-wrap: wrap; }
.planif-client > summary::-webkit-details-marker, .planif-media > summary::-webkit-details-marker { display: none; }
.planif-client > summary strong, .planif-media > summary strong { font-size: 20px; font-weight: 900; font-variation-settings: var(--etroit); }
.planif-client[open] > summary, .planif-media[open] > summary { border-bottom: 1px solid var(--filet); background: var(--papier); }
.planif-corps { padding: 16px 18px; display: grid; gap: 18px; }
.puce { width: 12px; height: 12px; flex: none; border: 1px solid rgba(0, 0, 0, .2); }
.file { border: 1px solid var(--filet); padding: 14px; background: var(--papier); }
.file-entete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.file-entete h3 { margin: 0; }
.horaires { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.horaire { display: inline-flex; gap: 6px; align-items: center; background: var(--papier-clair); border: 1px solid var(--encre); padding: 3px 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s; }
.horaire:hover { background: var(--jaune); }
.file-contenu { display: flex; gap: 0; overflow-x: auto; padding-bottom: 6px; border-left: 1px solid var(--filet); }
.element-file { flex: none; width: 128px; background: var(--papier-clair); border: 1px solid var(--filet); border-left: 0; font-size: 12px; }
.element-file .image { aspect-ratio: 4 / 5; background: var(--papier-fonce) center / cover; position: relative; }
.element-file.story .image { aspect-ratio: 9 / 16; }
.element-file .image .nb { position: absolute; right: 0; top: 0; background: var(--encre); color: var(--papier); padding: 0 6px; font-weight: 800; }
.element-file .texte { padding: 4px 8px 6px; max-height: 3.6em; overflow: hidden; color: var(--doux); }
.element-file .actions { display: flex; justify-content: space-between; padding: 2px; border-top: 1px solid var(--filet-doux); margin: 0; }
.element-file .actions button { min-height: 26px; padding: 0 8px; font-size: 13px; text-decoration: none; }
.element-file .quand { padding: 5px 8px 0; font-weight: 800; color: var(--encre); }
.agenda { display: grid; gap: 0; max-width: 100%; overflow-x: auto; }
.agenda-jour h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin: 22px 0 4px; color: var(--doux); font-variation-settings: "wdth" 100; }
.agenda-ligne { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--filet); padding: 8px 2px; font-size: 14px; min-width: 0; }
.agenda-ligne .heure { font-weight: 800; width: 48px; font-size: 16px; }
.agenda-ligne .vignette-carree { width: 34px; height: 42px; }

/* ---------- l'encre se pose : entrée des listes (seulement si le script tourne : sans lui, tout reste visible) */
.anim .encre > * { animation: encre .5s var(--sortie) both; animation-delay: calc(min(var(--i, 0), 14) * 32ms); }
@keyframes encre { from { opacity: 0; filter: blur(5px); translate: 0 6px; } to { opacity: 1; filter: blur(0); translate: 0 0; } }
.anim .une-anim { animation: une .55s var(--sortie) both; }
@keyframes une { from { clip-path: inset(100% -0.1em -0.25em -0.1em); translate: 0 14px; } to { clip-path: inset(-0.4em -0.1em -0.25em -0.1em); translate: 0 0; } }

/* ---------- vie de la page : coups de stylo, filet rouge sous la une, encoche au survol, boutons */
.stylo { position: relative; display: inline-block; }
.stylo-trace { position: absolute; pointer-events: none; overflow: visible; }
.stylo-trace path { fill: none; stroke: var(--rouge-vif); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 0; }
.trace-souligne { left: -3%; width: 106%; bottom: -.38em; height: .5em; }
.trace-souligne path { stroke-width: 3; }
.trace-entoure { left: -12px; top: -9px; width: calc(100% + 24px); height: calc(100% + 18px); }
.anim .stylo-trace path { animation: stylo .9s .45s var(--sortie) both; }
.entete-page .une-anim::after, .une-anim.titre-filet::after { content: ""; display: block; width: 56px; height: 6px; margin-top: .14em; background: var(--rouge-vif); transform-origin: left; }
.anim .entete-page .une-anim::after { animation: filet-rouge .5s .5s var(--sortie) both; }
@keyframes filet-rouge { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.edition, .depeche, .priorite a, .presse-ligne { position: relative; }
.edition::before, .depeche::before, .priorite a::before {
  content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; background: var(--rouge-vif);
  clip-path: polygon(0 0, 100% 0, 0 100%); transform: scale(0); transform-origin: 0 0; transition: transform .22s var(--sortie); pointer-events: none; z-index: 2; }
.edition:hover::before, .depeche:hover::before, .priorite a:hover::before { transform: scale(1); }
.priorite a, .presse-ligne { transition: background .2s, padding-left .25s var(--sortie); }
.priorite a:hover { background: rgb(214 31 20 / .04); padding-left: 6px; }
button:not(:disabled):active, .bouton:active { transform: translateY(1px) scale(.985); }
button, .bouton { transition: transform .12s, background .15s, color .15s, border-color .15s; }
button.bat, .bouton.bat { position: relative; overflow: hidden; }
button.bat::after, .bouton.bat::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .35), transparent);
  transform: skewX(-18deg); transition: left .55s var(--sortie); pointer-events: none; }
button.bat:not(:disabled):hover::after, .bouton.bat:hover::after { left: 120%; }

/* ---------- panneau « Travaux » (toutes les pages) */
.travaux { position: fixed; bottom: 18px; left: calc(var(--rail) + 18px); z-index: 40; }
.travaux[hidden] { display: none; }
.travaux-bouton { min-height: 34px; padding: 0 14px; gap: 8px; font-size: 13px; background: var(--papier-clair); color: var(--encre); border: 1.5px solid var(--encre); }
.travaux-bouton:hover { background: var(--encre); color: var(--papier-clair); }
.travaux .travaux-bouton .roue { display: none; }
.travaux.actif .travaux-bouton { background: var(--encre); color: var(--papier-clair); }
.travaux.actif .travaux-bouton .roue { display: inline-block; }
.travaux-liste { position: absolute; left: 0; bottom: calc(100% + 6px); width: min(380px, calc(100vw - 36px)); max-height: 62vh; overflow-y: auto;
  background: var(--papier-clair); border: 1.5px solid var(--encre); animation: depeche .22s var(--sortie); }
.travaux-liste header { display: grid; gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--encre); }
.travaux-liste ol { list-style: none; margin: 0; padding: 0; }
.travail { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--filet-doux); }
.travail:last-child { border-bottom: 0; }
.travail strong { display: block; font-size: 13px; line-height: 1.25; }
.travail small { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.travail.termine strong::before { content: "✓ "; color: var(--cyan); }
.travail.erreur strong::before { content: "✕ "; color: var(--rouge); }
.travail.erreur small { color: var(--rouge); }
.travail .lien-action { flex: none; font-size: 13px; font-weight: 700; }
.travail .roue { border-color: rgba(18, 18, 18, .18); border-top-color: var(--rouge); margin-right: 0; width: 12px; height: 12px; }

/* ---------- Fox, la renarde assistante : son panneau à droite, partout */
.redac {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(440px, 100vw);
  display: flex; flex-direction: column; background: var(--papier-clair); border-left: 2px solid var(--encre);
  animation: redac-entre .32s var(--sortie);
}
.redac[hidden] { display: none; }
@keyframes redac-entre { from { translate: 40px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.redac-tete { display: flex; align-items: center; gap: 6px; background: var(--encre); color: var(--papier); padding: 14px 12px 12px 18px; }
.redac-tete > div { flex: 1; }
.redac-tete strong { display: block; font-weight: 900; font-variation-settings: var(--serre); font-size: 34px; line-height: .9; }
.redac-tete small { color: #8C877C; font-size: 12px; }
.redac-tete .discret { color: var(--papier); text-decoration: none; }
.redac-tete .discret:hover { color: #fff; }
.redac-voix { display: flex; gap: 6px; align-items: center; margin: 0 6px 0 0; font-size: 12px; font-weight: 700; color: var(--papier); cursor: pointer; }
.redac-voix input { accent-color: var(--rouge-vif); }
.redac-fil { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.redac-message { max-width: 92%; font-size: 15px; line-height: 1.45; }
.redac-message p { margin: 0 0 6px; }
.redac-message p:last-child { margin-bottom: 0; }
.redac-message ul { margin: 4px 0 6px; padding-left: 18px; }
.redac-message.utilisateur { align-self: flex-end; background: var(--encre); color: var(--papier-clair); padding: 9px 13px; }
.redac-message.assistant { align-self: flex-start; padding: 10px 13px; border: 1px solid var(--filet); background: #fff; }
.redac-message.assistant small { display: block; margin-top: 6px; }
.redac-message.arrive, .redac-carte.arrive { animation: encre .45s var(--sortie) both; }
.redac-carte { position: relative; border: 2px solid var(--rouge-vif); background: #fff; padding: 12px 14px; }
.redac-carte b { display: block; color: var(--rouge); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.redac-carte p { margin: 6px 0 10px; font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; }
.redac-carte .ligne { align-items: center; }
.redac-carte.faite { border-color: var(--cyan); }
.redac-carte.faite b { color: var(--cyan-texte); }
.redac-carte.annulee { border-color: var(--filet-doux); opacity: .7; }
.redac-carte .tampon { right: 12px; font-size: 22px; }
.redac-attente { display: flex; gap: 4px; align-items: center; color: var(--doux); font-size: 13px; }
.redac-attente i { width: 6px; height: 16px; background: var(--encre); animation: imprime 1s infinite ease-in-out; }
.redac-attente i:nth-child(2) { animation-delay: .15s; }
.redac-attente i:nth-child(3) { animation-delay: .3s; }
.redac-attente span { margin-left: 8px; }
@keyframes imprime { 0%, 100% { transform: scaleY(.3); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
.redac-suggestions { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 18px 10px; }
.choix-rapide { min-height: 30px; padding: 4px 10px; font-size: 12.5px; line-height: 1.3; background: transparent; color: var(--encre); border: 1px solid var(--encre);
  font-variation-settings: "wdth" 100; font-weight: 700; white-space: normal; text-align: left; justify-content: flex-start; max-width: 100%; }
.choix-rapide:hover { background: var(--encre); color: var(--papier-clair); }
.choix-rapide.a-completer { border-style: dashed; }
.redac-saisie { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 2px solid var(--encre); background: var(--papier); }
.redac-saisie textarea { min-height: 52px; resize: none; }
.redac-saisie textarea::placeholder { color: var(--doux); }
.redac-micro, .redac-envoyer { min-height: 52px; width: 52px; padding: 0; }
.redac-micro { background: var(--rouge); border-color: var(--rouge); }
.redac-micro .icone, .redac-envoyer .icone { width: 22px; height: 22px; stroke-width: 2.2; }
.redac-micro[data-etat="ecoute"] { animation: pulsation 1.2s infinite; background: var(--encre); border-color: var(--encre); }
.redac-micro[data-etat="ecoute"] .icone { stroke: var(--rouge-vif); }
.redac-activer { margin: 0 18px 8px; padding: 12px 14px; border: 1px solid var(--encre); background: var(--papier-clair); font-size: 14px; display: grid; gap: 8px; }
.redac-activer ol { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.redac-activer .ligne { align-items: center; }
/* Fox en direct : réponse au fil de l'eau, précisions en attente, raccourcis par thème */
.redac-message.assistant.en-direct::after { content: "▍"; color: var(--rouge-vif); animation: clignote 1s steps(2) infinite; }
@keyframes clignote { to { opacity: 0; } }
.redac-message.utilisateur.en-attente { opacity: .55; outline: 1px dashed var(--papier-clair); outline-offset: -4px; }
.redac-raccourcis { border-top: 1px solid var(--filet-doux); padding-top: 6px; }
.redac-themes { display: flex; gap: 2px; overflow-x: auto; padding: 0 28px 4px 14px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.redac-themes::-webkit-scrollbar { display: none; }
.redac-themes button { flex: none; min-height: 26px; padding: 0 9px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  background: transparent; color: var(--doux); border: 0; border-bottom: 2px solid transparent; font-variation-settings: "wdth" 100; }
.redac-themes button:hover { color: var(--encre); }
.redac-themes button[aria-pressed="true"] { color: var(--encre); border-bottom-color: var(--rouge-vif); }
/* Son avatar, son portrait d'accueil, ses états (parle, réfléchit, écoute) */
.fox-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; flex: none; background: #0a1040; box-shadow: 0 0 0 2px #2338f0, 0 0 14px rgba(124, 58, 237, .35); }
.fox-avatar.grand { width: 52px; height: 52px; }
.fox-avatar.reflechit { animation: fox-reflechit 1.1s ease-in-out infinite; }
@keyframes fox-reflechit { 0%, 100% { rotate: 0deg; translate: 0 0; } 30% { rotate: -6deg; translate: 0 -2px; } 60% { rotate: 4deg; } }
.fox-avatar.parle { animation: fox-parle .42s ease-in-out infinite alternate; }
@keyframes fox-parle { from { scale: 1; rotate: -2deg; } to { scale: 1.06; rotate: 2deg; } }
.fox-portrait { width: 200px; height: 200px; object-fit: contain; display: block; margin: -6px 0 6px -14px; animation: fox-flotte 5s ease-in-out infinite; filter: drop-shadow(0 10px 16px rgba(10, 16, 64, .25)); }
@keyframes fox-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.redac-accueil { animation: encre .5s var(--sortie) both; }
body.fox-ecoute .fox-avatar.grand { box-shadow: 0 0 0 3px var(--rouge-vif); animation: pulsation 1.2s infinite; }
/* Conversation à la voix */
.redac-direct { display: grid; gap: 6px; padding: 10px 18px 6px; }
.redac-conversation { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; border: 0; background: var(--encre); color: var(--papier-clair); font: inherit; font-weight: 900; font-size: 17px; letter-spacing: .01em; cursor: pointer; }
.redac-conversation:hover { background: #2A2A2A; }
.redac-conversation:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.redac-conversation[aria-pressed="true"] { background: var(--rouge); }
.redac-conversation .onde { display: inline-flex; gap: 3px; align-items: center; height: 20px; }
.redac-conversation .onde i { width: 3px; height: 8px; background: currentColor; }
.redac[data-conversation="ecoute"] .onde i { animation: onde .9s ease-in-out infinite; }
.redac[data-conversation="ecoute"] .onde i:nth-child(2) { animation-delay: .15s; }
.redac[data-conversation="ecoute"] .onde i:nth-child(3) { animation-delay: .3s; }
.redac[data-conversation="ecoute"] .onde i:nth-child(4) { animation-delay: .45s; }
.redac[data-conversation="parle"] .onde i { animation: onde .5s ease-in-out infinite alternate; }
@keyframes onde { 0%, 100% { height: 6px; } 50% { height: 20px; } }
.redac-etat { color: rgb(18 18 18 / .7); font-size: 12px; text-align: center; min-height: 16px; }
.redac-etat:empty { display: none; }
/* « On relit quoi ? » : la une du panneau garde son air sous le jambage (C30) */
.redac-accueil .une { line-height: .92; margin-bottom: 12px; }
.redac[data-conversation="ecoute"] .fox-avatar.grand { box-shadow: 0 0 0 3px var(--rouge-vif); animation: pulsation 1.2s infinite; }

/* ---------- Fox, le compagnon hologramme : elle vit en bas de l'écran, file d'un endroit à l'autre, flotte, regarde la souris,
   fait coucou, fait la sieste. Sa position et sa pose sont pilotées par renarde.js (data-pose sur .renarde-scene), son corps 3D
   par fox3d.js (la toile prend la place de l'emblème dès que le modèle est chargé). */
.renarde-scene { --x: calc(100vw - 150px); position: fixed; left: 0; bottom: 8px; z-index: 40; width: 124px; height: 124px;
  transform: translateX(var(--x)); transition: transform var(--duree, 0s) cubic-bezier(.45, 0, .2, 1), translate .35s var(--sortie), opacity .35s;
  pointer-events: none; }
/* Effacée (ou baissée pendant un défilement), elle sort tout entière par le bas de l'écran : pas une oreille sur un
   bouton ; l'entrée « Fox · Cmd K » du rail reste là pour l'appeler (F2) */
.renarde-scene.effacee, .renarde-scene.baissee { translate: 0 calc(100% + 24px); opacity: 0; }
.renarde-scene.effacee .renarde-zone, .renarde-scene.baissee .renarde-zone { pointer-events: none; }
.renarde-scene.effacee .renarde-bulle, .renarde-scene.baissee .renarde-bulle { opacity: 0; }
body.redac-ouvert .renarde-scene, body.menu-ouvert .renarde-scene, body.menu-ouvert .travaux { visibility: hidden; }
/* Une boîte de confirmation ouverte (dialog en showModal) : Fox disparaît dans la même image, sans glisser sous le voile,
   et ne revient qu'à la fermeture, sur une place libre (renarde.js) (F1) */
body:has(dialog:modal) .renarde-scene { visibility: hidden; transition: none; }
.renarde-bouton { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: none; min-height: 0; }
.renarde-bouton:hover { background: none; }
/* Seul son corps attrape la souris : autour d'elle, les boutons de la page restent cliquables. */
.renarde-zone { position: absolute; left: 24%; right: 24%; top: 22%; bottom: 4%; border-radius: 45% 45% 30% 30%; pointer-events: auto; }
.renarde-bouton:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* L'emblème : sa place tant que la 3D n'est pas prête (ou sans WebGL, ou mouvements réduits). */
.renarde-embleme { position: absolute; left: 6%; bottom: 0; width: 88%; height: auto; display: block; animation: fox-flotte 5s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(35, 56, 240, .25)); }
.renarde-scene[data-pose="dort"] .renarde-embleme { opacity: .7; animation-duration: 9s; }
.renarde-bulle { position: absolute; bottom: 100%; right: 30px; margin-bottom: 2px; padding: 6px 10px; background: var(--encre); color: var(--papier-clair);
  font-weight: 800; font-size: 13px; line-height: 1.2; white-space: nowrap; opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 80% 100%;
  transition: opacity .2s, transform .25s var(--sortie); pointer-events: none; }
.renarde-bulle::after { content: ""; position: absolute; right: 18px; top: 100%; border: 6px solid transparent; border-top-color: var(--encre); }
.renarde-scene.dit .renarde-bulle, .renarde-bouton:hover .renarde-bulle, .renarde-bouton:focus-visible .renarde-bulle { opacity: 1; transform: none; }
.redac .fox-avatar { background: #0a1040; }
.renarde-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.renarde-scene.en-3d { width: 230px; height: 200px; }
.renarde-scene.en-3d .renarde-embleme { display: none; }
.renarde-scene.en-3d .renarde-zone { left: 16%; right: 38%; top: 14%; bottom: 26%; border-radius: 46%; }  /* le galet, pas l'anneau ni la queue */
.renarde-scene.en-3d .renarde-3d { opacity: 1; }
.renarde-scene.en-3d .renarde-bulle { right: 46px; bottom: 82%; }

/* ---------- Fox dans le rail : sur ordinateur, son entrée toujours cliquable, au-dessus de Réglages. En bas de l'écran,
   elle s'efface dès qu'elle cacherait quelque chose ; sa bulle de bienvenue s'accroche alors à cet avatar (ou, sur
   téléphone, à celui de la barre du haut) et ne passe pas sur la page (R1) */
.pied-menu .fox-rail { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%;
  min-height: 0; padding: 7px 10px; border: 0; background: transparent; color: rgb(241 237 226 / .62); text-align: left;
  font-weight: 700; font-size: var(--t-texte); font-variation-settings: "wdth" 100; letter-spacing: 0; transition: color .15s, background .15s; }
.pied-menu .fox-rail:hover { background: transparent; color: var(--papier); }
.pied-menu .fox-rail[aria-expanded="true"] { background: #1F1E1C; color: var(--papier); }
.fox-rail img { width: 26px; height: 26px; margin: 0 -4px; border-radius: 50%; display: block; flex: none; background: #0a1040; box-shadow: 0 0 0 2px #2338f0; }
.fox-rail[aria-expanded="true"] img { box-shadow: 0 0 0 2px var(--rouge-vif); }
.fox-rail .raccourci-clavier { margin-left: auto; font-size: 11px; letter-spacing: .04em; opacity: .8; }
.fox-bulle { position: absolute; z-index: 2; width: max-content; padding: 7px 10px; font-weight: 800; font-size: 13px; line-height: 1.25;
  font-variation-settings: "wdth" 100; letter-spacing: 0; white-space: normal; text-align: left; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .25s var(--sortie); }
.fox-bulle::after { content: ""; position: absolute; border: 6px solid transparent; }
.pied-menu > .fox-bulle { left: 2px; bottom: calc(100% - 2px); max-width: 196px; background: var(--papier-clair); color: var(--encre);
  transform: translateY(6px) scale(.96); transform-origin: 17px 100%; }
.pied-menu > .fox-bulle::after { left: 11px; top: 100%; border-top-color: var(--papier-clair); }
span.fox-bulle.dit { opacity: 1; transform: none; }
body.redac-ouvert span.fox-bulle { opacity: 0; }   /* le panneau ouvert, elle parle dedans */

/* ---------- mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .anim .encre > *, .anim .une-anim { animation-name: fondu; animation-duration: .2s; }
  @keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
  .tampon.claque { animation: fondu .2s both; }
  .secousse, .anim .entoure path, .anim .edition.partie .barre-rouge, .anim .stylo-trace path, .anim .entete-page .une-anim::after { animation: none; }
  .cdf:hover > span, .carte-media:hover { transform: none; }
  .edition::before, .depeche::before, .priorite a::before, button.bat::after { transition: none; }
  .redac, .redac-message.arrive, .redac-carte.arrive, .redac-accueil, .fox-portrait, .fox-avatar.reflechit, body.fox-ecoute .fox-avatar.grand { animation: none; }
  .redac-attente i { animation: none; opacity: .6; }
  .redac .onde i { animation: none !important; height: 12px; }
  .redac-message.assistant.en-direct::after { animation: none; }
  .fox-avatar.parle { animation: none; box-shadow: 0 0 0 3px var(--rouge-vif); }
  .renarde-scene { transition: none; }
  .renarde-scene * { animation: none !important; }
  .fox-bulle { transition: opacity .2s; }
}

/* ---------- téléphone et petits écrans */
@media (max-width: 1250px) {
  .edition-du-jour { grid-template-columns: 1fr; }
  .colonne-boucler { border-right: 0; }
  .colonne-presse { position: static; max-height: none; border-top: 3px solid var(--filet); border-bottom: 0; }
}
@media (max-width: 980px) {
  .video-carte { grid-template-columns: 1fr; gap: 16px; }
  .video-carte video, .attente-video { max-width: 100%; }
}
@media (max-width: 900px) {
  body.avec-menu { padding-left: 0; padding-bottom: 64px; }
  .menu { transform: translateX(-100%); transition: transform .25s var(--sortie); }
  body.menu-ouvert .menu { transform: none; }
  body.menu-ouvert .voile { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 25; }
  .barre-mobile { display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 20; height: 54px; padding: 0 10px; background: var(--encre); color: var(--papier); }
  .barre-mobile .marque { font-weight: 900; font-variation-settings: var(--serre); font-size: 28px; text-decoration: none; }
  .barre-mobile .media-mobile { margin-left: auto; font-size: var(--t-petit); color: #C9C2B2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
  .barre-mobile button { background: transparent; border: 0; color: var(--papier); padding: 0 8px; }
  .barre-mobile .media-mobile + .fox-barre { margin-left: 4px; }
  .barre-mobile .fox-barre { margin-left: auto; width: 44px; padding: 0; flex: none; }
  .barre-mobile .fox-barre img { width: 34px; height: 34px; border-radius: 50%; display: block; background: #0a1040; box-shadow: 0 0 0 2px #2338f0; }
  .barre-mobile .fox-barre[aria-expanded="true"] img { box-shadow: 0 0 0 2px var(--rouge-vif); }
  /* Fox : pas d'entrée en double dans le tiroir (son avatar est dans la barre du haut) ; effacée en bas de l'écran, sa bulle
     de bienvenue pend sous cet avatar (R1) */
  .pied-menu .fox-rail, .pied-menu > .fox-bulle { display: none; }
  .pied-menu { position: static; }   /* dans le tiroir, le pied défile avec le reste, comme avant */
  .barre-mobile > .fox-bulle { right: 10px; top: calc(100% + 7px); max-width: min(260px, calc(100vw - 32px)); background: var(--encre); color: var(--papier-clair);
    transform: translateY(-6px) scale(.96); transform-origin: calc(100% - 22px) 0; }
  .barre-mobile > .fox-bulle::after { right: 16px; bottom: 100%; border-bottom-color: var(--encre); }
  .onglets-bas { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--encre); padding-bottom: env(safe-area-inset-bottom); }
  .onglets-bas a, .onglets-bas button { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 9px 0 8px; min-height: 0;
    color: var(--papier); background: transparent; border: 0; text-decoration: none; font: 700 11px/1.5 Archivo, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; opacity: .65; }
  .onglets-bas button:hover { background: transparent; }
  .onglets-bas a.actif, .onglets-bas button.actif { opacity: 1; box-shadow: inset 0 3px 0 var(--rouge-vif); }
  main { padding: 20px 16px calc(180px + env(safe-area-inset-bottom)); }   /* la dernière ligne remonte au-dessus de Fox */
  .barre { padding: 0 16px; height: 54px; }
  .barre .marque { font-size: 28px; }
  .media-menu.nouveau { padding: 12px 2px; }
  /* Pas de zoom de Safari quand on touche un champ : 16 px au moins sur téléphone (C58) */
  input, select, textarea { font-size: 16px; }
  .edition-du-jour { margin: -20px -16px 0; }
  .colonne-boucler, .colonne-presse { padding: 20px 16px; }
  .edition { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 14px; }
  .edition .puce-client, .edition .puce-edition { width: 64px; height: 48px; }
  .edition .cdf { grid-column: 1 / -1; height: 80px; }
  .cdf > span { flex-basis: 64px; }
  .edition .actions-edition { grid-column: 1 / -1; }
  .edition .actions-edition button, .edition .actions-edition .bouton { flex: 1; }
  .tampon { right: 12px; font-size: 24px; }
  .date-edition { text-align: left; }
  .depeche, .depeche.sous-edition { grid-template-columns: 56px minmax(0, 1fr); gap: 10px 14px; }
  .depeche .actions, .depeche.sous-edition .actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .depeche.sous-edition .depeche-vignette { justify-self: start; }
  .depeche img, .depeche .sans-visuel { width: 56px; height: 70px; }
  .actions button, .actions .bouton { flex: 1 1 auto; }
  .une { font-size: 40px; }
  .groupe-titre { flex-direction: column; align-items: flex-start; gap: 4px; }
  .groupe-titre h2 { font-size: 26px; }
  .chiffres, .colonne-boucler .chiffres { grid-template-columns: 1fr 1fr; }
  .chiffre { border-bottom: 1px solid var(--filet); }
  .chiffre:nth-child(even) { border-right: 0; }
  .chiffre:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Cibles tactiles de 44 px partout (C24, C59) */
  button, .bouton, .petit, button.bat.petit, .bouton.bat.petit, .filtres a, .filtres button, .choix-rapide, .redac-themes button { min-height: 44px; }
  /* … y compris celles qu'une règle de bureau plus précise gardait petites : Travaux, le micro de dictée (le rond reste de
     32 px dans le champ, la zone à toucher fait 44 px), les volets dépliables, les listes des tableaux (C24) */
  .travaux-bouton { min-height: 44px; }
  .micro::after { content: ""; position: absolute; top: -12px; right: 0; bottom: -2px; left: -13px; }   /* 44 × 44, vers la gauche et le haut */
  details.carte > summary { padding-block: 11px; }
  .detail-technique summary, td details > summary { padding-block: 13px; }
  /* Champs, listes déroulantes et cases font 44 px eux aussi ; chaque lien seul (pas pris dans une phrase) a sa zone de
     44 px : manchette, tiroir, médias d'Aujourd'hui, liens de suite, comptes suivis, rendez-vous du Planning, case
     « Voix » de Fox (les titres et les cases des fiches : plus bas) ; dans un dépôt de fichier, toute la zone en
     pointillé choisit le fichier (F7) */
  select, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=hidden]),
  table select, table input:not([type=checkbox]):not([type=radio]) { height: 44px; }
  label.case, main label.case { min-height: 44px; margin: 0; }
  .tableau-sources .cible-case { width: 44px; height: 44px; }
  .barre-mobile .marque { align-self: stretch; display: flex; align-items: center; }
  .modules a, .pied-menu a, .media-menu.nouveau, .redac-voix { min-height: 44px; }
  .edition .nom, .depeche .titre { min-height: 44px; }
  .lien-suite, .bilan-erreurs a.corriger, .compte-suivi { display: inline-flex; align-items: center; min-height: 44px; }
  /* Les comptes repérés par l'étude : toute la ligne (nom et description) se touche, la description reste collée au nom
     (un lien de 44 px de haut la détachait) */
  .comptes-a-suivre li { position: relative; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .comptes-a-suivre li > a::after { content: ""; position: absolute; inset: 0; }
  .agenda-14-fixe { min-height: 44px; }
  .depot-fichier .lien-action::after { content: ""; position: absolute; inset: 0; }
  .travaux { left: 10px; bottom: 76px; }
  .redac { width: 100vw; border-left: 0; }
  /* Sur téléphone, Fox vit au-dessus des onglets, là où il y a de la place ; effacée (ou pendant un défilement), elle
     passe tout entière derrière eux : rien d'elle ne recouvre la page, son avatar reste dans la barre du haut (C1, C36) */
  .renarde-scene { bottom: calc(62px + env(safe-area-inset-bottom)); width: 92px; height: 92px; z-index: 19; }
  .renarde-scene.effacee, .renarde-scene.baissee { translate: 0 calc(100% + 70px); opacity: 0; }
  /* Le panneau de Fox laisse la place à la conversation : portrait réduit, raccourcis sur une rangée qui défile,
     masqués dès que le fil a commencé ; « Cmd K » n'a pas de sens sans clavier (C22, C30, C79) */
  .fox-portrait { width: 96px; height: 96px; margin: 0 0 4px -6px; }
  .redac-accueil .une { font-size: 34px !important; }
  .redac-suggestions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; padding-right: 36px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .redac-suggestions::-webkit-scrollbar { display: none; }
  .redac-suggestions .choix-rapide { flex: none; max-width: 78vw; }
  .redac.a-parle .redac-raccourcis { display: none; }
  .raccourci-clavier { display: none; }
  .redac-direct { padding-top: 8px; }
}
@media (max-width: 600px) { .renarde-scene.en-3d { width: 170px; height: 150px; } }

/* ---------- Cube Media : étapes bordées (Studio, Nouveau média, Lancer un média), comme le Studio de Feeds :
   un cadre d'un filet, les étapes séparées d'un filet, le numéro en rouge devant le titre, les actions en pied */
.etapes-bordees, .studio { border: 1px solid var(--filet); background: var(--papier-clair); }
.studio { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.25fr) minmax(260px, .85fr); gap: 0; }
.etape-bordee, .studio-etape { padding: 18px 20px 22px; min-width: 0; }
.studio-etape + .studio-etape { border-left: 1px solid var(--filet); }
.etape-bordee + .etape-bordee { border-top: 1px solid var(--filet); }
.etape-bordee h2, .studio-etape h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 3px solid var(--filet); padding-bottom: 8px; margin-bottom: 16px; }
.etape-bordee h2 .doux, .studio-etape h2 .doux { font-weight: 400; font-size: 14px; font-variation-settings: "wdth" 100; letter-spacing: 0; }
.etape-bordee .numero, .studio-etape .numero { color: var(--rouge-vif); font-size: 34px; font-variation-settings: var(--serre); line-height: 1; }
.etape-bordee > h2 + label, .studio-etape > h2 + label, .etape-bordee > h2 + .ligne label, .studio-etape > h2 + .ligne label { margin-top: 0; }
.etape-bordee .proposition-carte .carte { background: var(--papier); }
.etapes-pied { padding: 16px 20px; border-top: 1px solid var(--filet); background: var(--papier); margin: 0; }
.etapes-pied .bouton.secondaire { background: transparent; }
.lien-action { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 700; font-size: inherit; display: inline; margin: 0; }
/* Le média qui publiera : une pastille sur noir par média, le choix souligné de rouge */
.studio-medias { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 4px; max-height: 236px; overflow-y: auto; padding: 2px; }
.studio-media { margin: 0; cursor: pointer; position: relative; font-weight: 400; }
.studio-media input { position: absolute; opacity: 0; width: 0; height: 0; }
.studio-media span { height: 52px; background: #000; display: grid; place-items: center; border: 2px solid transparent; transition: border-color .15s; }
.studio-media img { max-width: 78%; max-height: 32px; object-fit: contain; }
.studio-media em { color: var(--papier); font-style: normal; font-weight: 900; font-variation-settings: var(--serre); font-size: 13px; text-transform: uppercase; text-align: center; line-height: 1; padding: 0 3px; }
.studio-media input:checked + span { border-color: var(--rouge-vif); }
.studio-media .nom { display: block; font: 700 11px/1.2 Archivo, "Helvetica Neue", Arial, sans-serif; margin-top: 4px; text-align: center; color: var(--encre);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-media input:checked ~ .nom { text-decoration: underline; text-decoration-color: var(--rouge-vif); text-decoration-thickness: 2px; }
.studio-media input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Le dépôt d'une photo (ou d'un fichier) : un cadre en pointillé, jaune quand on survole en glissant */
.depot { border: 1.5px dashed var(--encre); padding: 22px 18px; text-align: center; background: var(--papier); transition: background .15s; }
.depot.survol { background: var(--jaune); }
.depot p { margin: 0 0 4px; }
.depot small { display: block; margin-top: 4px; }
.depot input[type=file] { width: auto; max-width: 100%; margin: 10px auto 0; display: block; font-size: 13px; padding: 6px 8px; background: var(--papier-clair); }
.depot-fichier { position: relative; padding: 16px 18px; }
.depot-fichier input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; overflow: hidden; }
.depot-fichier:focus-within { outline: 2px solid var(--cyan); outline-offset: 2px; }
.depot-fichier.rempli { border-style: solid; }
.depot-fichier [data-nom-fichier], .depot-fichier .nom-fichier { color: var(--encre-2); font-weight: 600; overflow-wrap: anywhere; }
.studio-depot img { max-height: 200px; max-width: 100%; display: block; margin: 0 auto 12px; border: 1px solid var(--filet); background: var(--papier-fonce); }
.studio-depot img[hidden] { display: none; }
/* Les dernières créations du Studio : le visuel à gauche, l'état, le média, le titre */
.studio-creations { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.studio-creation { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--papier-clair); border: 1px solid var(--filet); padding: 12px; }
.studio-creation .vignette { display: block; aspect-ratio: 4 / 5; background: var(--papier-fonce); border: 1px solid var(--filet); overflow: hidden; }
.studio-creation .vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.studio-creation .sans-visuel { display: grid; place-items: center; height: 100%; padding: 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); text-align: center; }
.studio-creation h3 { margin: 8px 0 0; font-size: 19px; line-height: 1.05; }
@media (max-width: 1180px) {
  .studio { grid-template-columns: 1fr 1fr; }
  .studio-etape:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--filet); }
}
@media (max-width: 760px) {
  .studio { grid-template-columns: 1fr; }
  .studio-etape + .studio-etape { border-left: 0; border-top: 1px solid var(--filet); }
}

/* ---------- Cube Media : planning, 14 jours en colonnes (une semaine par ligne) ; la vue « Par média » reprend
   .planif-media et .agenda-ligne. Le genre se dit par une icône devant l'heure (post, téléphone, vidéo, veille) : la
   quadrichromie ne dit que l'état. Les rendez-vous fixes (vidéo prévue, veille) tiennent en une ligne en tête du jour. */
.planning-tete { margin-bottom: 18px; }
/* Les filets d'un pixel sont portés par les cases (droite et bas) et par le cadre (haut et gauche), pas par le fond de la
   grille : une dernière rangée incomplète (14 jours sur 4 colonnes) laisse le papier, jamais un aplat noir (R2) */
.agenda-14 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: solid var(--filet); border-width: 1px 0 0 1px; }
.agenda-14-jour { background: var(--papier-clair); padding: 10px 10px 12px; min-width: 0; min-height: 132px;
  border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.agenda-14-jour.creux { background: var(--papier); }
.agenda-14-jour h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .02em;
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--filet); font-variation-settings: "wdth" 100; font-weight: 800; }
.agenda-14-jour h3 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-14-jour h3 small { font-weight: 600; flex: none; }
.agenda-14-jour.aujourdhui h3 { border-bottom-color: var(--rouge-vif); color: var(--rouge); }
.agenda-14-jour .rien { margin: 0; text-align: center; }
#vue-agenda { container-type: inline-size; }
.agenda-14-fixes { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 0 2px 7px; margin-bottom: 2px; border-bottom: 1px solid var(--filet-doux); }
.agenda-14-fixe { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--doux); text-decoration: none; }
.agenda-14-fixe .icone { width: 13px; height: 13px; }
.agenda-14-fixe:hover { color: var(--encre); text-decoration: underline; }
.agenda-14-ligne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 8px; align-items: start; padding: 6px 2px 7px;
  border-bottom: 1px solid var(--filet-doux); text-decoration: none; font-size: 13px; min-width: 0; transition: background .12s; }
.agenda-14-ligne .heure { display: inline-flex; align-items: center; gap: 5px; }
.agenda-14-ligne .heure .icone { width: 14px; height: 14px; stroke-width: 2; }
.agenda-14-ligne:last-child { border-bottom: 0; }
.agenda-14-ligne:hover { background: var(--papier); }
.agenda-14-ligne .heure { font-weight: 800; font-size: 13px; }
.agenda-14-ligne .corps { min-width: 0; }
.agenda-14-ligne .corps strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 800; font-variation-settings: var(--etroit); font-size: 15px; line-height: 1.1; }
.agenda-14-ligne .corps small { display: block; color: var(--doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-14-ligne .pastille { grid-column: 1 / -1; justify-self: start; font-size: 10px; white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.agenda-14-jour { overflow: hidden; }
.pastille.prevue { border-style: dashed; border-color: var(--doux); color: var(--doux); }
@container (max-width: 1250px) { .agenda-14 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 700px) { .agenda-14 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agenda-14-jour { min-height: 0; } }
/* Par média : une ligne n'est pas soulignée (seul son titre l'est au survol) ; le volet replié montre son chevron (C49, C71) */
.agenda-ligne { text-decoration: none; color: inherit; }
.agenda-ligne:hover strong { text-decoration: underline; }
.agenda-ligne small { flex: 1; }
/* Sur téléphone : l'heure et l'état sur une ligne, le titre puis le genre dessous, sur toute la largeur (C49) */
@media (max-width: 760px) {
  .agenda-ligne { display: grid; grid-template-columns: 48px auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 10px 2px; }
  .agenda-ligne .pastille { justify-self: start; }
  .agenda-ligne strong, .agenda-ligne small { grid-column: 1 / -1; }
  .agenda-ligne strong { line-height: 1.25; }
}
.rendez-vous-fixes { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--doux); font-weight: 600; }
.rendez-vous-fixes .icone { width: 15px; height: 15px; }
.planif-media > summary::after { content: ""; width: 9px; height: 9px; flex: none; border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre);
  rotate: 45deg; margin: 0 4px 4px 10px; transition: rotate .2s var(--sortie); }
.planif-media[open] > summary::after { rotate: 225deg; margin-bottom: -4px; }

/* ---------- Cube Media : bilan (liaisons, chaque média face aux règles, erreurs récentes, coûts du mois) */
.bilan-liaisons { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.bilan-liaison { background: var(--papier); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; border: 1px solid var(--filet); border-left: 4px solid var(--rouge); min-width: 0; transition: background .12s; }
.bilan-liaison.ok { border-left-color: var(--cyan); }
.bilan-liaison:hover { background: var(--papier-fonce); }
.bilan-liaison strong { font-weight: 900; font-variation-settings: var(--etroit); font-size: 18px; line-height: 1.1; }
.bilan-liaison .pastille { align-self: flex-start; }
.bilan-liaison small { line-height: 1.35; color: var(--encre); }
.bilan-liaison small.doux { color: var(--doux); }
.bilan-tableau-cadre { background: var(--papier-clair); border: 1px solid var(--filet); }
.bilan-tableau { font-size: 13px; }
.bilan-tableau th { font-size: 10.5px; white-space: normal; vertical-align: bottom; }
.bilan-tableau th, .bilan-tableau td { padding: 8px 6px; }
.bilan-tableau th:first-child, .bilan-tableau td:first-child { padding-left: 10px; }
.bilan-tableau td { vertical-align: top; }
.bilan-point a { display: flex; align-items: flex-start; gap: 6px; color: inherit; text-decoration: none; }
.bilan-point i { flex: none; width: 10px; height: 10px; margin-top: 4px; background: var(--rouge); }
.bilan-point.ok i { background: var(--cyan); }
.bilan-point.attention i { background: var(--jaune); }
.bilan-point small { font-size: 12px; line-height: 1.3; color: var(--encre); }
.bilan-point a:hover small { text-decoration: underline; }
.bilan-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 22px; align-items: start; }
.bilan-colonnes .carte { min-width: 0; }
.bilan-erreurs li { overflow-wrap: anywhere; }
.bilan-erreurs a.corriger { color: var(--encre-2); font-weight: 700; }
td.total, th.total { white-space: nowrap; text-align: right; }
.entete-page > div:first-child { flex: 1 1 520px; min-width: 0; }
.entete-page > div:first-child p { max-width: 75ch; }
.bilan-colonnes .carte + .carte { margin-top: 0; }
.bilan-erreurs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 13px; }
.bilan-erreurs li { padding: 8px 0; border-bottom: 1px solid var(--filet-doux); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Le « · » entre le média et le détail est porté par le CSS (.separes, F5) : jamais en tête de la ligne suivante */
.bilan-erreurs li.separes { --sep: 13px; column-gap: var(--sep); }
.bilan-erreurs li:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .bilan-colonnes { grid-template-columns: minmax(0, 1fr); }
  .bilan-erreurs a.corriger { display: inline-block; padding: 12px 4px; }
}

/* ---------- Cube Media : captures des téléphones en vignettes (l'écran du téléphone, en petit, le moment dessous) */
.captures { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin: 8px 0 0; }
.captures a { margin: 0; display: inline-flex; flex-direction: column; gap: 3px; width: 64px; text-decoration: none; font-size: 10.5px; line-height: 1.2; color: var(--doux); text-align: center; }
.captures img { width: 64px; height: 114px; object-fit: cover; object-position: top; border: 1px solid var(--filet); background: var(--papier-fonce); display: block; }
.captures a:hover img { border-color: var(--rouge-vif); }
.captures a:hover span { color: var(--encre); }

/* ---------- Cube Media : le tableau de bord en deux colonnes (À boucler / Sous presse) */
/* Les chiffres du jour : une grille fixe (5 cases sur une rangée, 2 colonnes sur téléphone) (C9, C25) */
.colonne-boucler .chiffres { margin: 16px 0 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.colonne-boucler .chiffre { padding: 12px 12px 13px; }
.colonne-boucler .chiffre b { font-size: 36px; }
/* Un média sans rien à relire passe en retrait (C27), sans pâlir ses textes ni ses pastilles (un téléphone hors ligne
   reste lisible, 4,5:1 au moins) : seul son logo s'estompe (sur un enfant : l'entrée animée de la liste ne l'annule
   pas), son nom rétrécit et passe à l'encre douce (F10) */
.edition.calme { padding: 10px 0; }
.edition.calme .puce-edition { height: 46px; opacity: .68; transition: opacity .2s; }
.edition.calme:hover .puce-edition { opacity: 1; }
.edition.calme .nom { font-size: 18px; color: var(--encre-2); }
.edition .etat-media { min-width: 0; }
.edition .etat-media .pastille { font-size: 10px; }
.edition .nom small { white-space: normal; }
/* Les dépêches sous leur média : la vignette dans la colonne des logos, le titre sur toute la largeur restante (C10) */
.depeche.sous-edition { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--filet-doux); }
.depeche.sous-edition .depeche-vignette { justify-self: end; }
.depeche.sous-edition img, .depeche.sous-edition .sans-visuel { width: 56px; height: 70px; }
.depeche.sous-edition .titre { font-size: 19px; }
/* Les « · » de la rangée sont portés par le CSS (.separes, F5) ; un élément trop long passe à la ligne plutôt que de
   déborder (il ouvre alors sa ligne, sans point devant) */
.depeche .infos { gap: 4px var(--sep, 8px); }
.depeche.sous-edition .infos .pastille { font-size: 10px; }
.depeche.sous-edition .note-mini b { font-weight: 900; font-variation-settings: var(--serre); font-size: 17px; color: var(--encre); }
.depeche.courant { box-shadow: inset 0 0 0 2px var(--rouge-vif); padding-left: 8px; padding-right: 8px; }
.depeche.sous-edition .actions .bat.petit { min-width: 92px; }
.depeche.partie { opacity: .55; }
.depeche.partie .titre { text-decoration: line-through; text-decoration-color: var(--rouge-vif); text-decoration-thickness: 2px; }
.depeche .tampon { right: 50%; translate: 50% -50%; font-size: 24px; }
/* Colonne étroite (fenêtre moyenne) : les actions passent sous le titre */
.colonne-boucler { container-type: inline-size; }
@container (max-width: 640px) {
  .depeche.sous-edition { grid-template-columns: 64px minmax(0, 1fr); }
  .depeche.sous-edition .actions { grid-column: 2; flex-wrap: wrap; }
  .depeche.sous-edition .depeche-vignette { justify-self: start; }
}
.colonne-presse .jour-presse:first-child { margin-top: 0; }
.colonne-presse .encre + .jour-presse { margin-top: 22px; }
.presse-ligne .vignette-mini.sans { background: var(--encre); }
/* La vidéo du soir : une vignette noire avec l'icône vidéo ; la diagonale rouge seulement quand elle est désactivée (C28) */
.presse-ligne .vignette-mini.video { background: var(--encre); display: grid; place-items: center; color: var(--papier); }
.presse-ligne .vignette-mini.video.desactivee { color: rgb(241 237 226 / .45);
  background: var(--encre) linear-gradient(135deg, transparent 46%, var(--rouge-vif) 46%, var(--rouge-vif) 54%, transparent 54%); }
.presse-ligne span.pastille { display: inline-block; white-space: nowrap; overflow: visible; font-size: 10px; }
.presse-ligne b .pastille { color: var(--encre); vertical-align: 1px; margin-left: 4px; }
/* Ce qui est parti : le nom barré et la vignette estompée ; ni la ligne ni le tampon « PARTI » ne pâlissent (le tampon
   garde ses 4,7:1, l'opacité de la ligne le ramenait à 4,0:1) */
.presse-ligne.partie { padding-right: 92px; }
.presse-ligne.partie .vignette-mini { opacity: .6; }
.presse-ligne.partie b { text-decoration: line-through; text-decoration-color: var(--rouge-vif); text-decoration-thickness: 2px; }
/* Le petit tampon « PARTI » de Sous presse : au rouge du texte sur papier clair opaque, 4,7:1 (le rouge vif sur le
   papier ne faisait que 3,9:1) (F10) */
.tampon.tampon-mini { right: 4px; font-size: 15px; border-width: 3px; padding: 2px 7px 1px; letter-spacing: .04em;
  color: var(--rouge); background: var(--papier-clair); }
.tampon.tampon-mini small { font-size: 9px; letter-spacing: .04em; }
/* Les alertes : en tête de « Sous presse » sur grand écran ; sous les chiffres quand les colonnes s'empilent (C7) */
.alertes:empty { display: none; }
.alertes-presse { margin: 4px 0 14px; }
.alertes-presse .alerte-noire:first-child, .alertes-tete .alerte-noire:first-child { margin-top: 0; }
.alertes-tete { display: none; margin: 0 0 14px; }
@media (max-width: 1250px) {
  .alertes-tete:not(:empty) { display: block; }
  .alertes-presse { display: none; }
}

/* ---------- Cube Media : la relecture en liste rapide (une ligne par post ; Corriger déplie le formulaire) (C2, C13) */
.liste-relire + .liste-relire { border-top: 3px solid var(--filet); }
.liste-relire.soucis { margin-bottom: 22px; }
.relire-ligne { position: relative; border-bottom: 1px solid var(--filet); scroll-margin-top: 16px; }
.relire-resume { display: grid; grid-template-columns: 26px 56px 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; }
.relire-resume .rang { font-weight: 900; font-variation-settings: var(--serre); font-size: 22px; color: var(--doux); text-align: right; }
.relire-resume .vignette { display: block; width: 56px; height: 70px; min-height: 0; padding: 0; border: 1px solid var(--filet); background: var(--papier-fonce); overflow: hidden; }
.relire-resume .vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.vignette:hover { background: var(--papier-fonce); }
button.vignette:hover img { opacity: .85; }
.relire-ligne .note { display: inline-flex; align-items: baseline; gap: 1px; font-weight: 900; font-variation-settings: var(--serre); line-height: 1; }
.relire-ligne .note b { font-size: 34px; color: var(--encre); }
.relire-ligne .note span { font-size: 14px; color: var(--doux); }
.relire-texte { min-width: 0; }
.relire-texte .titre { margin: 0; font-size: 21px; line-height: 1.04; font-weight: 900; font-variation-settings: var(--etroit); }
.relire-texte .etiquettes { margin-bottom: 4px; }
.relire-texte .infos { display: flex; flex-wrap: wrap; gap: 4px var(--sep, 8px); align-items: center; margin-top: 6px; font-size: var(--t-petit); color: var(--doux); }
.relire-texte .infos .pastille { font-size: 10px; }
.relire-resume .actions { margin: 0; flex-wrap: nowrap; justify-content: flex-end; }
.relire-resume button.bat { font-size: 19px; min-height: 40px; padding: 0 16px; }
.relire-ligne.courant { box-shadow: inset 0 0 0 2px var(--rouge-vif); }
.relire-ligne.courant .relire-resume { padding-left: 10px; padding-right: 10px; }
.relire-corps { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; padding: 6px 0 22px 110px; }
.relire-corps .visuel { width: 100%; height: auto; display: block; border: 1px solid var(--filet); }
.relire-corps .meta { font-size: 13px; color: var(--doux); margin: 0 0 4px; }
.relire-corps .actions { border-top: 1px solid var(--filet-doux); padding-top: 14px; }
.relire-corps textarea[data-une-ligne] { min-height: 0; resize: none; field-sizing: content; }
.relire-corps textarea[name=legende_instagram] { field-sizing: content; min-height: 120px; max-height: calc(30lh + 20px); }
/* Avec le script, le formulaire d'un post reste plié jusqu'à « Corriger » (sans script, tout reste ouvert) */
.js .relire-ligne:not(.ouvert) .relire-corps { display: none; }
.relire-ligne.ouvert { background: var(--papier-clair); }
.relire-ligne.ouvert .relire-resume { padding-left: 10px; padding-right: 10px; }
.relire-ligne.ouvert .relire-corps { padding-right: 10px; }
/* Les posts en souci (échec d'envoi, téléphone qui attend) : la même ligne, avec le verdict de chaque réseau */
.relire-ligne.souci-post .relire-resume { grid-template-columns: 26px 56px minmax(0, 1fr) auto; align-items: start; }
.liste-relire.soucis .relire-ligne:last-child { border-bottom: 0; }
.relire-ligne.souci-post .rang { color: var(--rouge); }
.relire-ligne.souci-post.a_verifier .rang { color: var(--encre); }
.relire-ligne.souci-post .titre { font-size: 19px; }
/* Le retour d'un envoi par téléphone : une pastille par réseau ; les réseaux en échec ont leur ligne, avec la raison (C31) */
.verdicts { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 7px; align-items: baseline; }
.verdict { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.verdict:has(small) { flex-basis: 100%; }
.verdict .pastille { flex: none; }
.verdict small { font-size: 12.5px; line-height: 1.35; color: var(--encre-2); }
.verdict-general { flex-basis: 100%; font-size: 12px; color: var(--doux); }

/* ---------- Cube Media : l'historique en tableau */
.histo-tableau td { vertical-align: top; padding: 12px 10px; }
.histo-tableau td.visuel { width: 66px; padding-left: 0; }
.histo-tableau td.visuel img, .histo-tableau .sans-visuel { width: 56px; height: 70px; object-fit: cover; display: block; border: 1px solid var(--filet); background: var(--papier-fonce); }
.histo-tableau td.post { min-width: 260px; }
.histo-tableau td.post > strong { display: block; font-weight: 900; font-variation-settings: var(--etroit); font-size: 19px; line-height: 1.05; }
.histo-tableau td.post .accroche { margin: 4px 0; }
.histo-tableau td.post > small { display: block; }
.histo-tableau td.post .retour { color: var(--doux); margin-top: 4px; }
.histo-tableau td.post .retour.en-echec { color: var(--rouge); }
.histo-tableau td.etat { white-space: nowrap; }
.histo-tableau td.etat .quand, .histo-tableau td.etat .pastille.noir { display: block; margin-top: 6px; width: max-content; }
.histo-tableau td.note { white-space: nowrap; }
.histo-tableau td.note b { font-weight: 900; font-variation-settings: var(--serre); font-size: 28px; line-height: 1; }
.histo-tableau td.note small { font-weight: 700; }
.histo-tableau .actions-histo form { display: flex; flex-direction: column; gap: 6px; margin: 0; align-items: stretch; min-width: 150px; }
.histo-tableau tr.en-erreur td { background: rgb(214 31 20 / .05); }
.histo-tableau tr.en-erreur td.visuel img { border-color: var(--rouge); }

/* ---------- Cube Media : la santé des sources */
.sante td { vertical-align: top; }
.sante td.chiffre-serre { font-weight: 900; font-variation-settings: var(--serre); font-size: 24px; line-height: 1; }
.sante tr.en-panne td { background: rgb(214 31 20 / .05); }
.sante td:first-child { width: 30%; }
.sante .adresse { overflow-wrap: anywhere; }
/* Le tableau des sources : la poubelle discrète, « Supprimer » écrit seulement sur téléphone */
.tableau-sources td { vertical-align: middle; }
.tableau-sources td.actif { width: 54px; }
.tableau-sources td.actif input { width: 18px; height: 18px; }
.tableau-sources td.gestes { white-space: nowrap; }
.tableau-sources td.gestes button { vertical-align: middle; }
.tableau-sources td.gestes button.danger-doux { padding: 0 8px; }
.tableau-sources td.gestes .icone { width: 17px; height: 17px; }
.tableau-sources .libelle-mobile { display: none; }
/* « Voir les … autres » n'existe que sur téléphone, où les dernières exécutions sont en fiches ; dépliée, la liste n'a
   plus de bouton (F6) */
.voir-plus, .js .voir-plus[hidden] { display: none; }
.cible-case { display: inline-grid; place-items: center; margin: 0; cursor: pointer; }   /* la case « Active » et sa zone à toucher */

/* ---------- Cube Media : les cartes de services et les coûts du mois (Réglages) */
.services .carte { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.services .carte h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 22px; }
.services .carte > p.doux { flex: 1; margin: 0; }
.services .carte button { align-self: flex-start; }
.services .resultat { margin: 0; font-size: 13px; line-height: 1.4; }
.services .resultat:empty { display: none; }
.services .resultat.attente { color: var(--doux); }
.services .resultat.ok { color: var(--cyan-texte); font-weight: 700; }
.services .resultat.echec { color: var(--rouge); font-weight: 700; }
.services .resultat.echec small { display: block; color: var(--encre-2); font-weight: 400; margin-top: 2px; }
.services .resultat.echec a { color: var(--encre); font-weight: 700; }
.barre-enregistrer { background: var(--papier); padding: 12px 0; border-top: 1px solid var(--filet); z-index: 15; }
.barre-enregistrer .modifie-seulement { display: none; }
form.modifie .barre-enregistrer { position: sticky; bottom: 0; padding: 12px 16px; margin-inline: -16px; box-shadow: 0 -1px 0 var(--filet); border-top: 3px solid var(--filet); }
form.modifie .barre-enregistrer .modifie-seulement { display: inline; }
.detail-technique p { margin: 6px 0 0; }
.couts-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--encre); border-left: 1px solid var(--encre); margin: 14px 0; }
.couts-chiffres div { padding: 12px 14px; border-right: 1px solid var(--encre); border-bottom: 1px solid var(--encre); display: grid; gap: 2px; }
.couts-chiffres small { font-weight: 700; color: rgb(18 18 18 / .7); }
.couts-chiffres strong { font-size: clamp(24px, 3vw, 34px); font-weight: 900; font-variation-settings: var(--serre); line-height: 1; font-variant-numeric: tabular-nums; }
/* ---------- Cube Media : Téléphones, la veille en quatre lignes (C52) */
.etat-veille { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 14px 0; padding: 12px 0; border-top: 1px solid var(--filet-doux);
  border-bottom: 1px solid var(--filet-doux); font-size: 14px; align-items: baseline; }
.etat-veille dt { font-weight: 800; }
.etat-veille dd { margin: 0; }
.etat-veille small { color: var(--doux); }

/* ---------- Cube Media : la page « Un souci » (l'édition et l'heure à la place d'un code) */
.souci + .souci { margin-top: 16px; }

/* ---------- Tableaux en fiches sur téléphone : chaque ligne devient un bloc, chaque cellule dit ce qu'elle est
   (data-label) ; la cellule .fiche-titre ouvre la fiche, .fiche-gestes porte les boutons (C16, C42) */
@media (max-width: 760px) {
  .tableau.en-fiches { overflow: visible; }
  .tableau.en-fiches table, .tableau.en-fiches tbody, .tableau.en-fiches tr, .tableau.en-fiches td { display: block; width: auto; }
  .tableau.en-fiches thead, .tableau.en-fiches tr:has(> th) { display: none; }
  .tableau.en-fiches tr { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: flex-start; border-bottom: 1px solid var(--filet); padding: 10px 0; }
  .tableau.en-fiches td { flex: 0 1 auto; min-width: 0; border: 0; padding: 3px 0; white-space: normal; text-align: left !important; }
  .tableau.en-fiches td.fiche-titre, .tableau.en-fiches td.fiche-gestes { flex-basis: 100%; }
  .tableau.en-fiches td[data-label]::before { content: attr(data-label); display: block; font: 800 11px/1.4 Archivo, "Helvetica Neue", Arial, sans-serif;
    text-transform: uppercase; letter-spacing: .05em; color: var(--doux); }
  .tableau.en-fiches td.fiche-titre { font-size: 16px; font-weight: 800; padding-bottom: 4px; }
  .tableau.en-fiches td.fiche-gestes:empty { display: none; }
  .tableau.en-fiches td.fiche-gestes form, .tableau.en-fiches td.fiche-gestes .bouton { margin-top: 6px; }
  .tableau.en-fiches td.fiche-gestes { padding-top: 0; }
  .tableau.en-fiches td.fiche-gestes .bouton.discret { padding-left: 0; padding-right: 0; margin-top: 0; }
  .tableau.en-fiches .pastille { white-space: normal; }
  .tableau.en-fiches.executions td.numero-tache { display: none; }
  /* Téléphones : les dix exécutions les plus récentes, les autres derrière « Voir les … autres » (app.js) ; sans script,
     tout reste visible (F6) */
  .js .executions:not(.tout-voir) tr.plus-ancienne { display: none; }
  .js .voir-plus { display: flex; width: 100%; margin-top: 12px; }
  .bilan-tableau-cadre.en-fiches { background: transparent; border: 0; }
  .bilan-tableau-cadre.en-fiches tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; background: var(--papier-clair);
    border: 1px solid var(--filet); padding: 12px 14px; margin-bottom: 10px; }
  .bilan-tableau-cadre.en-fiches td.fiche-titre { grid-column: 1 / -1; }
  .bilan-tableau-cadre.en-fiches td.bilan-point { padding: 6px 0 0; border-top: 1px solid var(--filet-doux); }
  /* Le lien qui titre une fiche fait 44 px de haut ; une règle du Bilan se touche sur toute sa case (F7) */
  .tableau.en-fiches td.fiche-titre > a { display: inline-flex; align-items: center; min-height: 44px; }
  .bilan-tableau-cadre.en-fiches td.bilan-point { position: relative; min-height: 44px; }
  .bilan-tableau-cadre.en-fiches td.bilan-point a::after { content: ""; position: absolute; inset: 0; }
  .couts-medias tr.ligne-total { border-bottom: 0; }
}

/* ---------- Cube Media : téléphone, règles des sections ci-dessus (après leurs règles de bureau) */
@media (max-width: 900px) {
  .presse-ligne.partie { padding-right: 80px; }
  /* Historique : chaque publication devient un bloc (vignette, titre, état · date · note, puis les boutons) (C3) */
  .histo-tableau { overflow: visible; }
  .histo-tableau table, .histo-tableau tbody { display: block; }
  .histo-tableau thead { display: none; }
  .histo-tableau tr { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--filet); }
  .histo-tableau td { display: block; border: 0; padding: 0; min-width: 0; }
  .histo-tableau td.visuel { grid-row: 1 / span 2; grid-column: 1; width: auto; }
  .histo-tableau td.post { grid-column: 2 / -1; min-width: 0; }
  .histo-tableau td.etat { grid-column: 2; grid-row: 2; white-space: normal; }
  .histo-tableau td.note { grid-column: 3; grid-row: 2; align-self: center; white-space: nowrap; }
  .histo-tableau td.etat { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
  .histo-tableau td.etat .quand, .histo-tableau td.etat .pastille.noir { display: inline-block; margin: 0; }
  .histo-tableau td.note b { font-size: 22px; }
  .histo-tableau td.actions-histo { grid-column: 1 / -1; margin-top: 8px; }
  .histo-tableau .actions-histo form { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .histo-tableau .actions-histo form > * { flex: 1 1 auto; }
  /* Une publication en échec : la teinte couvre la fiche entière d'un seul tenant, boutons compris, pas chaque morceau (F3) */
  .histo-tableau tr.en-erreur { background: rgb(214 31 20 / .05); padding-inline: 10px; }
  .histo-tableau tr.en-erreur td { background: transparent; }
  /* Sources : une source = un bloc (case et nom, adresse, type, puis Tester et Supprimer côte à côte) (C4) */
  .tableau-sources { overflow: visible; }
  .tableau-sources table, .tableau-sources tbody { display: block; }
  .tableau-sources thead { display: none; }
  .tableau-sources tr { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--filet); }
  .tableau-sources td { display: block; border: 0; padding: 0; min-width: 0; }
  .tableau-sources td.actif { width: auto; display: grid; place-items: center; }
  .tableau-sources td.actif input { width: 22px; height: 22px; }
  .tableau-sources td.adresse, .tableau-sources td.type, .tableau-sources td.gestes { grid-column: 1 / -1; }
  .tableau-sources td.gestes { display: flex; gap: 8px; }
  .tableau-sources td.gestes button { flex: 1; min-height: 44px; }
  .tableau-sources td.gestes button.danger-doux { border-color: var(--encre); text-decoration: none; }
  .tableau-sources .libelle-mobile { display: inline; }
  .tableau-sources td[colspan] { grid-column: 1 / -1; }
  /* Santé des sources : le nom et l'adresse, l'état et son message, puis les chiffres en texte d'appoint (C17) */
  .tableau.sante { overflow: visible; }
  .sante table, .sante tbody { display: block; }
  .sante thead { display: none; }
  .sante tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--filet); }
  .sante td { display: block; border: 0; padding: 2px 0; }
  .sante td:first-child { width: auto; padding-bottom: 6px; }   /* les 30 % de la colonne « Source » ne valent que pour le tableau */
  .sante td .pastille { white-space: normal; }
  .sante td:nth-child(n+3) { display: inline; font-size: 13px; color: var(--doux); }
  .sante td.chiffre-serre { font: 700 13px/1.4 Archivo, "Helvetica Neue", Arial, sans-serif; }
  .sante td:nth-child(3)::before { content: "échecs d'affilée : "; }
  /* Les « · » ne commencent ni ne finissent une ligne : l'espace entre deux cellules ne se coupe pas (nowrap sur la
     ligne, pas dans les cellules) et le point est collé au libellé qui le suit (F5) */
  .sante tr { white-space: nowrap; }
  .sante td { white-space: normal; }
  .sante td:nth-child(4)::before { content: "·\a0 dernier succès : "; }   /* « \a0 » + espace : l'espace clôt l'échappement */
  .sante td:nth-child(5)::before { content: "·\a0 articles sur 7 jours : "; }
  .sante td:nth-child(3)::before, .sante td:nth-child(5)::before { font-weight: 400; }   /* le chiffre en gras, pas son libellé */
  .sante td:nth-child(4) br { display: none; }
  .sante td:nth-child(4) small::before { content: "\a0·\a0"; }
  .sante tr.en-panne td { background: transparent; }
  .sante tr.en-panne { background: rgb(214 31 20 / .05); }
  /* Vidéo : la date de validation passe sous le titre (C16) */
  .posts li { grid-template-columns: 24px 48px minmax(0, 1fr); }
  .posts img { width: 48px; height: 48px; }
  .posts li > .detail:last-child { grid-column: 3; margin-top: -8px; }
  /* Téléphones : la décision sans cadre dans le cadre ; « Abandonner ce réseau » en lien discret à part (C69) */
  article.decision .actions { flex-direction: column; align-items: stretch; }
  article.decision .actions button.danger-doux { border-color: transparent; text-decoration: underline; color: var(--encre-2); margin-left: 0; }
  .etat-veille { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .etat-veille dd + dt { margin-top: 8px; }
  /* Réglages : la barre « Enregistrer » au-dessus des onglets du bas */
  form.modifie .barre-enregistrer { bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* Relecture en liste rapide : vignette, titre et note sur la ligne, les trois actions dessous en pleine largeur */
  .relire-resume { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "vignette texte note" "actions actions actions"; gap: 10px 12px; }
  .relire-resume .rang { display: none; }
  .relire-resume .vignette { grid-area: vignette; }
  .relire-resume .note { grid-area: note; align-self: start; }
  .relire-resume .relire-texte { grid-area: texte; }
  .relire-resume .actions { grid-area: actions; flex-wrap: wrap; }
  .relire-resume .actions > * { flex: 1 1 auto; }
  /* Valider à la hauteur de Corriger et Rejeter : sa règle de bureau (40 px, plus précise) l'emportait sur les 44 px (C24) */
  .relire-resume button.bat { min-height: 44px; }
  .relire-ligne.souci-post .relire-resume { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "vignette texte" "actions actions"; }
  .relire-ligne .note b { font-size: 28px; }
  .relire-texte .titre { font-size: 18px; }
  .relire-corps { grid-template-columns: minmax(0, 1fr); padding: 0 0 18px; }
  .relire-corps .visuel { max-width: 240px; }
  .relire-ligne.ouvert .relire-resume, .relire-ligne.courant .relire-resume { padding-left: 10px; padding-right: 10px; }
  .relire-ligne.ouvert .relire-corps { padding-left: 10px; }
  /* Un lien vers une ancre (#p3, #t12, #veille…) : la cible s'arrête sous la barre noire collée en haut, pas dessous */
  [id], .relire-ligne, article.decision { scroll-margin-top: 66px; }
  /* Gros boutons rouges : le libellé passe à la ligne plutôt que d'être rogné (C38) */
  button.bat, .bouton.bat { white-space: normal; text-wrap: balance; line-height: 1.05; padding-block: 8px; }
}
@container (max-width: 600px) {
  .colonne-boucler .chiffres { grid-template-columns: 1fr 1fr; }
  .colonne-boucler .chiffre:nth-child(even) { border-right: 0; }
  .colonne-boucler .chiffre:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container (max-width: 480px) {
  .depeche.sous-edition { grid-template-columns: 56px minmax(0, 1fr); }
  .depeche.sous-edition .actions { grid-column: 1 / -1; }
}
/* Écrans sans souris : pas de raccourcis clavier affichés (C29) */
@media (hover: none) {
  .raccourcis-clavier, .raccourci-clavier { display: none; }
}

/* ---------- Cube Media : finitions du contrôle (lien « corriger » du Bilan, comptes de l'étude de lancement) */
/* L'anneau de focus du lien « corriger » est tracé dedans : la rangée qui le porte (.separes) rogne ce qui dépasse à gauche */
.bilan-erreurs a.corriger:focus-visible { outline-offset: -2px; }
.comptes-a-suivre { list-style: none; margin: 6px 0 0; padding: 0; }
.comptes-a-suivre li { padding: 6px 0; border-bottom: 1px solid var(--filet-doux); }
.comptes-a-suivre li:last-child { border-bottom: 0; }
.comptes-a-suivre a { font-weight: 700; }
.comptes-a-suivre small { display: block; line-height: 1.35; }

/* ---------- Cube Media : la vidéo du soir (fabrication en direct, pourquoi la valider, ce que la voix a dit) */
/* La fabrication : un écran noir de régie, le pourcentage en une, l'étape, la barre jaune, l'heure de fin */
.attente-video.fabrication-ecran { flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; text-align: left;
  padding: 26px 22px; font-weight: 700; font-variation-settings: "wdth" 100; font-size: 15px; }
.fabrication-etiquette { color: var(--jaune); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fabrication-pourcent { font-weight: 900; font-variation-settings: var(--serre); font-size: 92px; line-height: .84; color: var(--papier); }
.fabrication-etape { font-size: 21px; font-weight: 800; font-variation-settings: var(--etroit); line-height: 1.1; }
.fabrication-barre { display: block; height: 6px; background: rgb(241 237 226 / .18); }
.fabrication-barre i { display: block; height: 100%; background: var(--jaune); transition: width .6s var(--sortie); }
.fabrication-fin { font-size: 13px; color: #C9C2B2; font-weight: 600; }
.fabrication-ecran.en-echec .fabrication-etiquette { color: #FF6B60; }
.fabrication-ecran.en-echec .fabrication-barre i { background: var(--rouge-vif); }
.etapes-video { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 14px 0 8px; padding: 0; border: 1px solid var(--filet); }
.etapes-video li { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 9px 9px 10px; border-right: 1px solid var(--filet);
  font-size: 12.5px; font-weight: 800; line-height: 1.2; color: var(--doux); background: var(--papier-clair); }
.etapes-video li:last-child { border-right: 0; }
.etapes-video li i { width: 10px; height: 10px; flex: none; border: 1.5px solid currentColor; }
.etapes-video li.fait { color: var(--encre); }
.etapes-video li.fait i { background: var(--cyan); border-color: var(--cyan); }
.etapes-video li.courante { background: var(--jaune); color: var(--encre); }
.etapes-video li.courante i { background: var(--encre); border-color: var(--encre); animation: clignote 1.1s steps(2) infinite; }
.fabrication-message { margin: 0 0 4px; font-size: 14px; }
.fabrication-message:empty { display: none; }
.fabrication-message.echec { color: var(--rouge); font-weight: 700; }
.alerte-noire.alerte-validation { margin: 14px 0 4px; }
.alerte-validation small { display: block; margin-top: 6px; color: #C9C2B2; font-size: 12.5px; }
.rapport-voix { margin-top: 16px; border-top: 1px solid var(--filet); }
.rapport-voix > summary { cursor: pointer; padding: 11px 0; font-weight: 800; font-variation-settings: var(--etroit); font-size: 17px; }
.rapport-voix .voix-utilisee { margin: 0 0 10px; }
.voix-secours { margin: 0 0 10px; padding: 6px 10px; border-left: 4px solid var(--rouge); background: var(--papier); font-size: 14px; font-weight: 600; }
.bloc-douteux { margin: 8px 0 0; padding: 10px 14px 12px; border-left: 4px solid var(--jaune); background: var(--papier); }
.bloc-douteux h4 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.bloc-douteux dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13.5px; line-height: 1.4; }
.bloc-douteux dt { font-weight: 800; }
.bloc-douteux dd { margin: 0; overflow-wrap: anywhere; }
.bloc-douteux dd.entendu { font-style: italic; }
.infos-fabrication { display: flex; flex-wrap: wrap; column-gap: var(--sep); row-gap: 2px; margin: 14px 0 0; font-size: 13.5px; color: var(--encre-2); }
.remarques-montage { margin-top: 8px; padding: 8px 12px; border: 1px solid var(--filet-doux); background: var(--papier); font-size: 13px; }
.remarques-montage b { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.remarques-montage ul { margin: 4px 0 0; padding-left: 18px; }
.validations-main { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 13.5px; color: var(--encre-2); }
.validations-main .progression { margin: 0; flex: none; }
.validations-main .progression i.fait { background: var(--cyan); border-color: var(--cyan); }
.validations-main.en-reglages { padding: 12px 0; border-bottom: 1px solid var(--filet-doux); }
.validations-main.en-reglages p { margin: 0; }

/* ---------- Cube Media : Réglages, la voix du média (choix, curseurs, écoute) */
.sous-legende { margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--filet-doux); font-size: 19px; }
input[type=range].curseur { width: 100%; padding: 0; border: 0; background: transparent; accent-color: var(--encre); }
label output { font-weight: 800; color: var(--encre); }
.voix-collee[hidden] { display: none; }
.ecoute-voix { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 16px; }
.ecoute-voix audio { height: 40px; max-width: 100%; }
.ecoute-voix .resultat { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.4; }
.ecoute-voix .resultat:empty { display: none; }
.ecoute-voix .resultat.attente { color: var(--doux); }
.ecoute-voix .resultat.ok { color: var(--cyan-texte); font-weight: 700; }
.ecoute-voix .resultat.echec { color: var(--rouge); font-weight: 700; }
.ecoute-voix .resultat.echec small { display: block; margin-top: 2px; color: var(--encre-2); font-weight: 400; }
/* Un bouton qui annonce son prix sous son libellé (Écouter la voix, Créer le jingle) */
.bouton-prix, button.bouton-prix { flex-direction: column; align-items: flex-start; gap: 1px; min-height: 50px; padding-block: 6px; line-height: 1.15;
  white-space: normal; text-align: left; }
.bouton-prix small { color: inherit; font-size: 11.5px; font-weight: 600; font-variation-settings: "wdth" 100; letter-spacing: 0; opacity: .88; }

/* ---------- Cube Media : Réglages, l'habillage de la vidéo (intro, jingle, générique, validation) */
.habillage .sous-titre { max-width: 86ch; }
.travail-habillage { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; background: var(--encre); color: var(--papier); }
.travail-habillage > div { display: grid; gap: 2px; min-width: 0; }
.travail-habillage b { font-weight: 800; }
.travail-habillage small { color: #C9C2B2; font-size: 12.5px; }
.travail-habillage .roue { margin: 3px 0 0; flex: none; }
.travail-habillage.erreur { background: var(--papier-clair); color: var(--encre); border: 2px solid var(--rouge-vif); }
.travail-habillage.erreur > div > b:first-child { color: var(--rouge); }
.travail-habillage.erreur small { color: var(--encre-2); }
.travail-habillage.fini { background: var(--papier); color: var(--encre); border-left: 4px solid var(--cyan); }
.habillage-parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--filet); background: var(--papier-clair); }
.habillage-partie { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px 16px; }
.habillage-partie + .habillage-partie { border-left: 1px solid var(--filet); }
.habillage-partie h3 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0; }
.habillage-partie p { margin: 0; font-size: 14px; }
.habillage-partie form { margin: 0; }
.habillage-partie .actions { margin-top: auto; padding-top: 6px; }
.apercu-intro, .apercu-generique { display: block; width: 100%; max-width: 190px; aspect-ratio: 9 / 16; background: #000; border: 1px solid var(--filet); }
.apercu-vide { display: grid; place-items: center; width: 100%; max-width: 190px; aspect-ratio: 9 / 16; padding: 14px; background: var(--encre);
  color: #C9C2B2; font-size: 13px; font-weight: 700; text-align: center; }
.sons { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.sons li { display: grid; gap: 3px; }
.sons span { font-size: 13px; font-weight: 700; }
.sons audio { width: 100%; height: 40px; }
.a-faire { padding-left: 9px; border-left: 3px solid var(--jaune); font-size: 13.5px; }
p.echec-partie { padding-left: 9px; border-left: 3px solid var(--rouge); font-size: 13.5px; }
.echec-partie b { color: var(--rouge); }
.habillage-validation { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 3px solid var(--filet); }
.habillage-validation p, .habillage-validation .actions { margin: 0; }
.manques { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; font-size: 14px; }
.manques li { position: relative; padding-left: 18px; }
.manques li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; background: var(--jaune); }
.manques li.bloquant::before { background: var(--rouge); }
.habillage-jamais-vu { padding-left: 9px; border-left: 3px solid var(--jaune); font-size: 13.5px; }
.musique-secours, p.musique-ecartee { font-size: 13px; }
p.musique-ecartee { margin-top: 8px; }
.insecable { white-space: nowrap; }

/* ---------- Cube Media : le budget du mois (Réglages, Bilan, une ligne sur Aujourd'hui) */
.budget-chiffres span.doux { font-size: 12px; }
.barre-budget { position: relative; height: 14px; margin: 2px 0 6px; background: var(--papier-fonce); border: 1px solid var(--filet); }
.barre-budget i { display: block; height: 100%; background: var(--cyan); }
.barre-budget.attention i { background: var(--jaune); }
.barre-budget.depasse i { background: var(--rouge-vif); }
.barre-budget .repere { position: absolute; left: 80%; top: -5px; bottom: -5px; width: 2px; background: var(--encre); }
.budget-legende { margin: 0 0 14px; font-size: 13px; color: var(--doux); }
.budget-legende b { color: var(--encre); }
.budget-colonnes { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; }
.budget-colonnes h3 { margin: 0 0 4px; font-size: 16px; }
.budget-colonnes .aide { margin-top: 8px; }
.lignes-couts { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.lignes-couts li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--filet-doux); }
.lignes-couts li:last-child { border-bottom: 0; }
.lignes-couts li b { flex: none; white-space: nowrap; }
.couts-30 { margin-top: 18px; }
.couts-30 .couts-chiffres { margin: 10px 0; }
/* Le réglage du budget (Réglages) : le montant et son bouton sur une ligne, l'aide dessous */
.budget-reglage { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--filet-doux); }
.budget-reglage .actions { margin: 0; flex-wrap: nowrap; }
.budget-reglage input { width: 7.5em; flex: none; }
.budget-reglage .aide { margin: 6px 0 0; }
/* Bilan : un bloc par média, une ligne par usage */
.budget-medias { display: grid; gap: 12px; }
.budget-media { padding: 12px 14px 10px; background: var(--papier); border: 1px solid var(--filet); }
.budget-media header { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.budget-media header strong { font-size: 18px; font-weight: 900; font-variation-settings: var(--etroit); }
.budget-media header .montant { margin-left: auto; font-weight: 800; white-space: nowrap; }
.budget-media .barre-budget { margin: 8px 0 4px; height: 10px; }
.budget-media .lignes-couts { font-size: 13px; }
.budget-media .lignes-couts li { padding: 4px 0; }
.budget-media h4 { margin: 8px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.budget-total { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 10px;
  border-top: 3px solid var(--filet); }
.budget-total b { white-space: nowrap; }
.budget-total small { flex-basis: 100%; }
/* Aujourd'hui : une ligne discrète, seulement quand un budget atteint 80 % ou dépasse */
.ligne-budget { display: flex; flex-wrap: wrap; column-gap: var(--sep); row-gap: 2px; margin: 0 0 8px; font-size: 13px; color: var(--doux); }
.ligne-budget a { display: inline-flex; align-items: flex-start; gap: 7px; color: var(--encre-2); text-decoration: none; }
.ligne-budget a:hover { text-decoration: underline; }
/* le carré suit la première ligne quand le texte passe sur deux lignes (téléphone) */
.ligne-budget i { width: 9px; height: 9px; flex: none; margin-top: .45em; background: var(--jaune); }
.ligne-budget i.depasse { background: var(--rouge); }

@media (max-width: 1100px) {
  .habillage-parties { grid-template-columns: minmax(0, 1fr); }
  .habillage-partie + .habillage-partie { border-left: 0; border-top: 1px solid var(--filet); }
}
@media (max-width: 760px) {
  .budget-colonnes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bloc-douteux dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bloc-douteux dd { margin-bottom: 6px; }
}
@media (max-width: 900px) {
  /* Sur téléphone, l'écran de fabrication ne prend plus la hauteur d'un Reel, et les étapes passent l'une sous l'autre */
  .attente-video.fabrication-ecran { width: 100%; aspect-ratio: auto; padding: 20px 18px; }
  .fabrication-pourcent { font-size: 72px; }
  .etapes-video { display: flex; flex-wrap: wrap; gap: 4px; border: 0; }
  .etapes-video li { border: 1px solid var(--filet); padding: 6px 9px; }
  .etapes-video li:last-child { border-right: 1px solid var(--filet); }
  .validations-main { align-items: flex-start; }
  .ecoute-voix audio { width: 100%; }
  .ligne-budget a { min-height: 44px; padding: 11px 0; }
  .apercu-intro, .apercu-generique, .apercu-vide { max-width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .etapes-video li.courante i { animation: none; }
  .fabrication-barre i { transition: none; }
}

/* ─── Réglages : rubriques automatiques et leçons de Fox (chantier éditorial) ─── */
.tableau-rubriques .jours{white-space:nowrap}
.tableau-rubriques .jours label{display:inline-flex;align-items:center;gap:3px;margin-right:6px;font-size:13px}
.tableau-rubriques input[type="time"]{width:7.5em}
.lecon{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.lecon input[type="text"],.lecon input:not([type]){flex:1;min-width:0}
@media (max-width:720px){.lecon{flex-wrap:wrap}.tableau-rubriques .jours{white-space:normal}}