/* Feuille de style unique de l'interface MIA (conception UX § 7, A8.6 ; direction visuelle B « Rivage » avec menu
   latéral, T82 ; un seul vert et des angles droits, T83 ; chaleur et réactivité, T93 ; le vert en accent, T94). Pas de
   chaîne de construction (B1.4). Charte de Mediamix : blanc, vert Mediamix en accent (action, repères, rythme du
   budget), neutres chauds pour le texte et les surfaces. Raleway pour le texte, Literata pour les titres de page et pour
   les chiffres (Raleway n'a pas de chiffres de largeur fixe) ; autohébergées. Un seul thème, clair. Angles droits. Mouvement court et utile (100 à 250 ms,
   supprimé si le système demande moins d'animations) ; ombre réservée à ce qui flotte (menus, bulles, panneau).

   Plan : polices ; jetons ; base ; barre latérale ; en-tête de page ; mise en page ; composants ; pages sans
   connexion ; écrans ; petits écrans. Une classe propre à un écran va dans « Écrans », sous le nom de l'écran. La
   feuille de l'espace de travail d'un rapport est à part (static/css/report.css, bloc head de base.html). */

/* ---------------------------------------------------------------------------------------------------------------
   Polices (§ 7.2) : trois fichiers, aucun autre ; licence SIL Open Font License (static/fonts/OFL-*.txt)
   --------------------------------------------------------------------------------------------------------------- */
@font-face {
  font-family: "Raleway";
  src: url("/static/fonts/raleway-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("/static/fonts/raleway-italic-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/static/fonts/literata-variable-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------------------------------------------
   Jetons
   --------------------------------------------------------------------------------------------------------------- */
:root {
  /* Marque : UN seul vert, celui du site de Mediamix (consigne du responsable du 28.10.2026), en accent (T94). Les fonds
     pâles sont des transparences de ce même vert, jamais une autre nuance. Jamais de texte vert (2,86:1 sur blanc). Le
     texte posé sur le vert est blanc, comme sur le site de Mediamix (choix du responsable du 29.10.2026, T94). */
  --green: #00B055;                       /* bouton principal, repères, barres, compteurs, soulignement des liens */
  --green-tint: rgba(0, 176, 85, 0.08);   /* panneaux d'aide et de dialogue, entrée active du menu, puce cochée */
  --green-tint-2: rgba(0, 176, 85, 0.30); /* bordure sur le vert pâle */
  --on-green: #FFFFFF;                    /* texte et pictogrammes posés sur le vert */

  /* Neutres chauds (gamme « stone » de Tailwind CSS) à la place des gris teintés de vert, perçus plus froids (T93) */
  --ink: #1C1917;          /* texte fort : titres, noms d'objets, valeurs (17,5:1) */
  --text: #292524;         /* texte courant (15,2:1) */
  --grey: #6B6560;         /* texte secondaire et légendes (5,7:1) */
  --grey-light: #A8A29E;   /* désactivé, séparateurs du fil d'Ariane */
  --field: #8A847E;        /* bord d'un champ de saisie (3,7:1, WCAG 1.4.11) */
  --line: #E7E5E4;         /* filet entre les lignes */
  --line-2: #D6D3D1;       /* bord d'un bouton secondaire */
  --bg: #FFFFFF;
  --surface: #F5F5F4;      /* barre latérale, zones de regroupement de l'accueil, détail technique */
  --mist: #FAFAF9;         /* survol d'une ligne */

  /* États : un point et un mot, jamais un bouton ni un lien */
  --state-ok: var(--ink);    /* le mot en noir, le point en vert (.state-ok::before) */
  --state-warn: #9A5B00;
  --state-error: #B3261E;
  --state-neutral: #6B6560;
  --error-tint: #FBEDEC;
  --warn-tint: #FBF3E6;

  --font-text: "Raleway", sans-serif;
  --font-title: "Literata", serif;
  --font-num: "Literata", serif;   /* chiffres alignés (tnum) : colonnes de nombres et chiffres clés */

  /* Échelle de 4 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-pill: 0;
  --radius-field: 0;
  --radius-panel: 0;

  /* Mouvement (NN/g, IBM Carbon, Material 3 ; T93) : retour d'action 100 ms, ouverture 200 ms, panneau 250 ms ;
     seulement couleurs, opacité et déplacement ; rien au chargement d'une page */
  --motion-fast: 100ms;
  --motion-base: 200ms;
  --motion-panel: 250ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* Ombres : seulement ce qui passe au-dessus du contenu (valeurs de Shopify Polaris, teinte du noir chaud) */
  --shadow-menu: 0 4px 6px -2px rgba(28, 25, 23, 0.20), 0 0 0 1px rgba(28, 25, 23, 0.06);
  --shadow-panel: 0 20px 20px -8px rgba(28, 25, 23, 0.28);

  --sidebar: 240px;
  --content-max: 1180px;
  --gutter: 40px;
  --panel-width: 400px;
  --form-max: 560px;

  color-scheme: light;
}
/* Le système demande moins d'animations : aucun déplacement, changements instantanés */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-panel: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 450;        /* Raleway est fine : 450 en texte courant (Apple HIG : éviter les graisses fines) */
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0 0 var(--space-2); line-height: 1.2; font-style: normal; }
h1 { font-family: var(--font-title); font-size: 32px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
h3 { font-size: 16px; font-weight: 700; color: var(--ink); }
p { margin: 0 0 var(--space-3); }
/* Liens : noirs ; soulignés de vert dans une phrase, au survol ailleurs (tableaux, titres de section). */
a { color: var(--ink); text-decoration: none; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color var(--motion-fast) var(--ease-out), text-decoration-color var(--motion-fast) var(--ease-out); }
a:hover { text-decoration-line: underline; }
p a, li a, dd a, .note a, .banner a { text-decoration-line: underline; }
.side-link:hover, .btn:hover, .tab:hover, .brand:hover, .menu-item:hover { text-decoration-line: none; }
a:hover { text-decoration: underline; }
strong, b { font-weight: 600; }
em, i, cite { font-style: normal; }
code, kbd, samp, pre { font-family: var(--font-text); font-size: 13px; }
code { padding: 0 var(--space-1); background: var(--mist); border-radius: 0; }
kbd { padding: 0 var(--space-1); border: 1px solid var(--line-2); border-radius: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }   /* le vert seul n'atteint pas 3:1 (WCAG 1.4.11) */
::selection { background: var(--green-tint); color: var(--ink); }

.muted { color: var(--grey); }
.subtle { color: var(--grey); font-size: 14px; }
.small { font-size: 14px; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; }
.strong { font-weight: 600; color: var(--ink); }
.center { text-align: center; }
/* Texte cité ou venu de l'extérieur : nom de campagne tel que la plateforme l'envoie, nom de fichier déposé (§ 7.2) */
.quoted { font-style: italic; font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: var(--space-3); top: -64px; z-index: 60; padding: var(--space-2) var(--space-3); background: var(--bg); color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius-field); }
.skip-link:focus { top: var(--space-3); }

/* Pictogrammes autorisés (§ 7.5, point 8) : triangle, croix, loupe, téléchargement, coche ; static/icons.svg */
.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.icon-xs { width: 12px; height: 12px; vertical-align: -1px; }
.icon-lg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------------------------------------------------------
   Barre latérale (T82) : logo et MIA, menu principal, « Réglages », utilisateur en bas ; fixe à gauche dès 861 px
   --------------------------------------------------------------------------------------------------------------- */
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-5) var(--space-3); background: var(--surface);
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.brand { display: flex; align-items: center; flex: none; gap: var(--space-3); padding: 0 var(--space-3); color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-logo { display: block; height: 28px; width: auto; }
.brand-name { padding-left: var(--space-3); border-left: 1px solid var(--line-2); font-size: 18px; font-weight: 700; line-height: 1; color: var(--ink); }
.sidebar-toggle { display: none; }
.sidebar-menu { display: flex; flex: 1; flex-direction: column; gap: var(--space-5); }
.env-strip { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0 var(--space-3); color: var(--state-warn); font-size: 13px; font-weight: 600; }
.env-strip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.side-nav, .menu-group { display: flex; flex-direction: column; gap: 2px; }
/* Titre de groupe (T114) : petites capitales grises, jamais un lien, filet entre deux groupes. */
.menu-title, .rg-title { margin: 0 0 var(--space-1); padding: 0 var(--space-3); color: var(--grey); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: default; user-select: none; }
.menu-group + .menu-group { padding-top: var(--space-3); border-top: 1px solid var(--line-2); }

/* Lien de menu : encre, plus marqué ; actif : fond vert pâle et barre verte pleine hauteur (texte jamais vert). */
.side-link {
  position: relative; display: block; width: 100%; padding: 9px 12px 9px 20px; border: 0; border-radius: var(--radius-field); background: none;
  color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.side-link:hover { background: rgba(28, 25, 23, 0.06); color: var(--ink); text-decoration: none; }
.side-link.is-active { background: rgba(0, 176, 85, 0.16); color: var(--ink); font-weight: 700; }
.side-link.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--green); }
.side-go { display: flex; align-items: center; justify-content: space-between; }
.side-go::after { content: ""; width: 6px; height: 6px; margin-right: 2px; border: solid var(--grey); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.side-go.is-active::after { border-color: var(--ink); }
.side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); }

/* Sélecteur de client en tête du menu (T109, T114) : encadré à initiales ; la liste native le recouvre, transparente. */
.client-picker { display: block; margin: 0; }
.client-picker-label { display: block; margin: 0 0 6px; padding: 0 2px; color: var(--grey); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.client-picker-box { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 12px; align-items: center; gap: var(--space-3); padding: 10px; border: 1px solid var(--field); background: var(--bg); color: var(--ink); }
.client-picker-box:hover { border-color: var(--ink); }
.client-picker-box:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.client-picker-box::after { content: ""; width: 6px; height: 6px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -3px; }
.cp-initials { display: grid; place-items: center; width: 32px; height: 32px; background: var(--green-tint-2); color: var(--ink); font-size: 13px; font-weight: 700; }
.cp-initials.is-all { background: var(--surface); border: 1px dashed var(--line-2); }
.cp-name { min-width: 0; color: var(--ink); font-size: 14.5px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cp-hint { display: block; color: var(--grey); font-size: 12.5px; font-weight: 500; }
.client-picker-select { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; border: 0; opacity: 0; cursor: pointer; font: inherit; }
.client-picker-submit { margin-top: var(--space-2); }
.js .client-picker-submit { display: none; }

.side-nav .side-link:has(.side-count), .menu-group .side-link:has(.side-count) { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.side-count { min-width: 22px; padding: 1px 7px; background: var(--green); color: var(--on-green); font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
.side-user { padding-top: var(--space-4); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.side-user .side-link { padding-left: 12px; color: var(--grey); font-size: 14px; font-weight: 550; }
.side-user .side-link:hover { color: var(--ink); }
/* La personne connectée : ses initiales dans un carré vert pâle, son nom, son rôle */
.side-user-id { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); padding: 0 var(--space-3); }
.side-user-initials { display: grid; place-items: center; width: 36px; height: 36px; background: var(--green-tint); color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.side-user-name { margin: 0; color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.side-user-role { display: block; color: var(--grey); font-size: 13px; font-weight: 450; }
.side-form { margin: 0; }

.app-main { display: flex; flex-direction: column; min-width: 0; }

/* Écran « Réglages » (T114) : navigation interne en quatre groupes à gauche du contenu. */
.rg { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.rg-nav { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.rg-group { display: flex; flex-direction: column; gap: 2px; }
.rg-link { position: relative; display: block; padding: 9px 12px; border-left: 1px solid var(--line-2); color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; text-decoration: none; }
.rg-link:hover { background: var(--mist); text-decoration: none; }
.rg-link.is-active { padding-left: 9px; border-left: 4px solid var(--green); background: rgba(0, 176, 85, 0.16); font-weight: 700; }
.rg-body { min-width: 0; }
.rg-body > .section:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------------------------------------------------
   En-tête de page (T94, direction « le vert en accent ») : fond blanc, fil d'Ariane, grand titre en Literata, phrase et
   ligne d'informations à gauche ; état de l'objet et actions à droite ; un trait vert de 96 px sous l'en-tête. Sur
   l'accueil seulement, la courbe de la charte en vert pâle à droite (`{% set band = "home" %}`). Classes `band-*`
   gardées de T82 : bas (listes, réglages, formulaires) ou haut (pages d'objet : `{% set band = "high" %}`).
   --------------------------------------------------------------------------------------------------------------- */
.band { position: relative; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.band::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 96px; height: 4px; background: var(--green); }
.band-inner { position: relative; max-width: calc(var(--content-max) + 2 * var(--gutter)); padding: 36px var(--gutter) 28px; }
.band-high .band-inner { padding-top: 40px; padding-bottom: 32px; }
.band-curve { display: none; }
.band-home::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 30%; max-width: 520px; pointer-events: none;
  background: rgba(0, 176, 85, 0.14); -webkit-mask: url("/static/brand/curve.svg") no-repeat 0 0 / 100% 100%; mask: url("/static/brand/curve.svg") no-repeat 0 0 / 100% 100%;
}
.band .breadcrumb, .band .page-header { position: relative; }
.band h1 { margin-bottom: var(--space-1); color: var(--ink); font-size: 36px; line-height: 1.12; letter-spacing: -0.015em; }
.band-high h1, .band-home h1 { font-size: 44px; }

/* Fil d'Ariane : petit, gris */
.breadcrumb { margin: 0 0 var(--space-3); font-size: 14px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--grey-light); }
.breadcrumb a { color: var(--grey); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb [aria-current] { color: var(--ink); }

/* En-tête : titre et phrase à gauche, état et actions à droite, alignés sur le bas du titre */
.page-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4) var(--space-7); }
.page-header > :first-child { grid-column: 1; min-width: 0; }
.page-header h1 { overflow-wrap: anywhere; }
.page-lead { margin: var(--space-2) 0 0; color: var(--text); font-size: 18px; max-width: 68ch; }
.page-meta { margin: var(--space-3) 0 0; color: var(--grey); font-size: 14px; }
.page-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); color: var(--text); }
.band .page-header > :first-child a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.band .page-header > :first-child > .row { margin-top: var(--space-3); }
/* État de l'objet à droite : petit libellé gris au-dessus, état en point et mot */
.band-fact { display: flex; flex-direction: column; gap: 2px; margin: 0 var(--space-3) 0 0; }
.band-fact-label { color: var(--grey); font-size: 13px; }
.band-fact .state { font-size: 15px; }

/* ---------------------------------------------------------------------------------------------------------------
   Mise en page : contenu de 1 180 px au plus, aligné sur le bandeau ; sections séparées de 40 px
   --------------------------------------------------------------------------------------------------------------- */
.main { min-width: 0; }
.container { max-width: calc(var(--content-max) + 2 * var(--gutter)); padding: var(--space-6) var(--gutter) var(--space-8); }

.section { margin-top: var(--space-7); }
.section:first-child { margin-top: 0; }
.section > h2, .section-head { padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.section > h2 { display: flex; align-items: center; gap: var(--space-2); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.section-head h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.section-head a { font-size: 14px; color: var(--grey); }
.section-head a:hover { color: var(--ink); }
.section-lead { margin: 0 0 var(--space-4); color: var(--grey); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-tight { display: flex; flex-direction: column; gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ---------------------------------------------------------------------------------------------------------------
   Composants
   --------------------------------------------------------------------------------------------------------------- */
/* Boutons à angles droits. Principal : vert Mediamix, texte noir chaud en gras (T93) ; un seul par écran. Secondaire :
   blanc, bordure grise. Destructeur : texte et bordure rouges, toujours derrière une confirmation avec motif. Un bouton
   répond tout de suite : léger enfoncement à l'appui, puis « en cours » pendant l'envoi (static/js/busy.js). */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 650; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.btn:hover { background: var(--surface); border-color: var(--grey-light); text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { border-color: var(--line); background: var(--bg); color: var(--grey-light); cursor: not-allowed; }
.btn-primary { background: var(--green); border-color: var(--green); color: var(--on-green); font-weight: 700; }
/* Survol des boutons verts : le même vert, légèrement assombri */
.btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible { background: var(--green); border-color: var(--green); color: var(--on-green); filter: brightness(0.93); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { background: var(--surface); border-color: var(--line-2); color: var(--grey); filter: none; }
/* Envoi en cours : le libellé reste, un petit cercle tourne à sa droite ; le bouton ne se clique plus */
.btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-secondary { background: var(--bg); color: var(--ink); }
.btn-danger { background: var(--bg); border-color: var(--state-error); color: var(--state-error); }
.btn-danger:hover { background: var(--error-tint); border-color: var(--state-error); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 14px; }
.btn-block { width: 100%; }
/* Bouton qui a l'air d'un lien d'action (dans un formulaire de ligne, « Annuler ») : rend de même seul ou avec .btn */
.btn-link {
  display: inline; height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink);
  font: inherit; font-weight: 600; line-height: inherit; white-space: nowrap; cursor: pointer;
}
.btn-link:hover { background: none; text-decoration: underline; }
.btn-link.is-danger { color: var(--state-error); }

/* Lien d'action : vert foncé, souligné au survol ; dans un tableau, les actions de ligne sont des liens */
.link-action { color: var(--ink); font-weight: 600; white-space: nowrap; }
.link-danger { color: var(--state-error); font-weight: 600; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: var(--surface); }

/* Tableau : dense et lisible, filets entre les lignes, ni cadre ni fond alterné ; le nom de l'objet en gras.
   Un tableau plus large que la page défile seul. Les bulles de ses en-têtes s'ouvrent vers le bas et sont placées
   par help.js en position fixe (.is-fixed), pour ne pas être coupées par le cadre qui défile. */
.table-wrap { position: relative; overflow-x: auto; }  /* relative : les textes masqués (.sr-only) restent dans le cadre */
.table { width: 100%; border-collapse: collapse; }
/* En-têtes en minuscules, gris, 13 px : une étiquette discrète plutôt qu'un code en capitales (T93) */
.table th {
  padding: 10px 12px; border-bottom: 1px solid var(--line-2);
  color: var(--grey); font-size: 13px; font-weight: 600;
  text-align: left; white-space: nowrap; vertical-align: bottom;
}
.table td { padding: 14px 12px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; transition: background-color var(--motion-fast) var(--ease-out); }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table th.num, .table td.num { text-align: right; }
.table tbody tr:hover td { background: var(--mist); }
.table td.num { font-size: 15px; }
.table th.num { font-family: var(--font-text); }   /* en-tête en Raleway, comme les autres ; les chiffres en Literata */
.table tr.is-selected td { background: var(--green-tint); }
.table a { color: var(--ink); font-weight: 600; }
.table a.link-action { color: var(--ink); }
.table td.muted, .table td.subtle { color: var(--grey); }
.table .cell-sub, .cell-sub { display: block; margin-top: 3px; color: var(--grey); font-size: 14px; font-weight: 450; }
.table .row-total td { border-top: 1px solid var(--grey-light); border-bottom: 0; background: var(--surface); color: var(--ink); font-weight: 700; }
.table .row-actions { text-align: right; white-space: nowrap; }
.table-note { margin: var(--space-3) 0 0; color: var(--grey); font-size: 14px; }

/* État : point de 8 px et un mot, dans la couleur d'état ; jamais de fond, jamais cliquable */
.state { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 650; white-space: nowrap; color: var(--state-neutral); }
.state::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.state-ok { color: var(--state-ok); }
.state-ok::before { background: var(--green); }
.state-warn { color: var(--state-warn); }
.state-error { color: var(--state-error); }
.state-neutral { color: var(--state-neutral); }
/* Mention grise à côté d'un nom (« en configuration », « désactivé ») */
.mention { margin-left: var(--space-2); color: var(--grey); font-size: 14px; font-weight: 450; }

/* Bandeau de message : arrondi, fond très pâle et bordure fine dans la couleur d'état, début du texte en gras */
.banner {
  display: block; margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-2); border-radius: 0; background: var(--bg); color: var(--ink);
}
.banner-success { border-color: var(--green-tint-2); background: var(--green-tint); }
.banner-error { border-color: #EBC2BF; background: var(--error-tint); }
.banner-warn { border-color: #EBD3AE; background: var(--warn-tint); }
.banner-info { border-color: var(--line-2); background: var(--surface); }
.banner-lead { font-weight: 700; }
.banner .icon { display: none; }
/* Avertissements avant génération d'un rapport (V0.10 6.5) : jamais bloquants, une ligne et un lien chacun. */
.warnings { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: var(--space-2); }
.warnings li { padding: var(--space-2) var(--space-3); border: 1px solid #EBD3AE; border-radius: 0; background: var(--warn-tint); }
.banner p:last-child { margin-bottom: 0; }

/* Bulle d'aide « ? » (§ 6.1) : petit rond discret, texte blanc sur vert foncé ; visible au survol et au focus par CSS,
   épinglée par help.js, qui choisit aussi le côté (.is-below : au-dessous ; .is-end : alignée à droite) et la décale
   pour qu'elle reste dans la fenêtre. Masquée, elle n'occupe aucune place (display: none). */
.help { position: relative; display: inline-block; margin-left: var(--space-1); vertical-align: 1px; line-height: 1; text-transform: none; letter-spacing: normal; font-weight: 400; }
.help-btn {
  position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0;
  border: 1px solid var(--grey-light); border-radius: 50%; background: var(--bg); color: var(--grey);
  font-family: var(--font-text); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
}
.help-btn::after { content: ""; position: absolute; inset: -4px; }
.help-btn:hover, .help-btn:focus-visible, .help.is-pinned .help-btn { border-color: var(--ink); color: var(--ink); }
.help-tip {
  position: absolute; bottom: calc(100% + var(--space-2)); left: -8px; z-index: 50;
  display: none; width: max-content; max-width: 320px; padding: 10px 12px; border-radius: var(--radius-field);
  background: var(--ink); color: var(--bg); box-shadow: var(--shadow-menu);
  font-family: var(--font-text); font-size: 14px; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
}
.help:hover .help-tip, .help-btn:focus-visible + .help-tip, .help.is-pinned .help-tip { display: block; animation: pop-in var(--motion-fast) var(--ease-out); }
.help.is-dismissed:not(.is-pinned) .help-tip { display: none; }
.help.is-measuring .help-tip { display: block; visibility: hidden; }
/* Dans un en-tête de tableau, la bulle s'ouvre vers le bas, dans le tableau */
.help.is-below .help-tip, th .help-tip { top: calc(100% + var(--space-2)); bottom: auto; }
.help.is-end .help-tip { left: auto; right: -8px; }
.help.is-fixed .help-tip { position: fixed; right: auto; bottom: auto; }
.help-example { font-style: italic; }

/* Formulaire : une colonne de 560 px, libellé au-dessus, champ arrondi de 40 px, aide et erreur sous le champ */
.form { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--form-max); }
.form-wide { max-width: 720px; }
/* Formulaire qui contient un tableau de saisie (plateformes et objectifs d'un plan média) : le tableau prend toute la
   largeur disponible et ne défile horizontalement que si l'écran est trop étroit ; les autres champs gardent leur largeur. */
.form:has(.table-form) { max-width: none; }
.form:has(.table-form) > :not(:has(.table-form)), .form:has(.table-form) p { max-width: var(--form-max); }
.table-wrap > .table-form { width: 100%; }
.form-group { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-3) 0 0; padding: 0; border: 0; }
.form-group + .form-group { margin-top: var(--space-6); }
.form-group > legend, .form-group > h3 { padding: 0; margin: 0 0 var(--space-1); font-size: 16px; font-weight: 700; color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label:not(.choice):not(.chip):not(.checkbox), .label { color: var(--ink); font-size: 14px; font-weight: 650; }
.hint, .field .hint { margin: 0; color: var(--grey); font-size: 14px; }
.error, .field .error { margin: 0; color: var(--state-error); font-size: 14px; font-weight: 550; }
.input, .select, .textarea {
  width: 100%; min-height: 42px; padding: 8px var(--space-3);
  border: 1px solid var(--field); border-radius: var(--radius-field); background: var(--bg); color: var(--ink);
  font: inherit; font-size: 15px;
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--grey); }
/* Focus : bord noir et halo vert pâle (le bord porte le contraste, le halo la marque) */
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--green-tint-2); }
.input:disabled, .select:disabled, .textarea:disabled { border-color: var(--line); background: var(--surface); color: var(--grey); }
.select {
  appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B6560' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.select[multiple] { padding-right: var(--space-3); background-image: none; }
.textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--state-error); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
/* Choix rédigé (bouton radio ou case avec sa phrase) */
.choices { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; border: 0; }
.choice { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: 400; cursor: pointer; }
.choice input { margin-top: 4px; flex: none; }
.choice .hint { display: block; }
/* Cases à cocher en puces (plateformes) : la puce cochée passe en vert pâle */
.chips { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.chips > legend { margin-bottom: var(--space-2); }
.chips > .hint, .chips > .error { flex-basis: 100%; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--bg);
  color: var(--text); font-size: 14px; cursor: pointer; user-select: none;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.chip:hover { border-color: var(--grey-light); }
.chip:has(input:checked) { border-color: var(--green-tint-2); background: var(--green-tint); color: var(--ink); font-weight: 600; }
.chip:focus-within { outline: 2px solid var(--ink); outline-offset: 1px; }
.checkbox { display: flex; align-items: center; gap: var(--space-2); }
.form-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.inline-form { display: inline; margin: 0; }
/* Proposition de rattachement : étiquette et raison au-dessus de la cible présélectionnée (décision O8). */
.proposal { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: 14px; }
/* Recherche : champ à loupe */
.search { position: relative; }
.search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--grey); }
.input-search { padding-left: 40px; border-radius: var(--radius-pill); }
/* Plateformes d'une campagne (T102) : un tableau de saisie, champs compacts, une ligne par plateforme. */
.table-form td, .table-form th { vertical-align: middle; }
.table-form .input-sm { min-width: 9ch; height: 36px; padding: 0 var(--space-2); font-size: 14px; }
.table-form input[type="date"].input-sm { min-width: 15ch; }
.table-form td.has-error .input-sm { border-color: var(--state-error); }
.field-static { margin: 0 0 var(--space-4); }
/* Objectifs d'une campagne (T102) : une ligne de titre par groupe (toute la campagne, puis chaque plateforme). */
.table .row-group th { padding-top: var(--space-4); background: var(--surface); color: var(--ink); font-weight: 700; text-align: left; }
.table .row-group .cell-sub { display: inline; margin-left: var(--space-2); font-weight: 400; }
/* Filtres des listes : sur une ligne, libellés au-dessus, bouton à droite */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.filters .field { flex: 0 1 220px; min-width: 160px; }
.filters .field-grow { flex: 1 1 280px; }
.filters .search { width: 100%; }
.filters .checkbox { min-height: 40px; }
.filters-actions { display: flex; align-items: center; gap: var(--space-3); }

/* Onglets : texte seul, actif en gras souligné de vert ; fiche client et choix de la période */
.tabs { display: flex; gap: var(--space-5); margin-bottom: var(--space-6); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: none; padding: var(--space-2) 0 10px; color: var(--grey); font-weight: 550; white-space: nowrap; transition: color var(--motion-fast) var(--ease-out); }
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.is-active, .tab[aria-current] { color: var(--ink); font-weight: 700; }
.tab.is-active::after, .tab[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--green); }
.tabs-sm { gap: var(--space-4); margin-bottom: var(--space-4); }

/* Section repliée : <details class="fold"> et son <summary> en gras précédé d'un chevron */
.fold { margin: var(--space-4) 0; }
.fold > summary { display: inline-flex; align-items: center; gap: var(--space-2); list-style: none; font-weight: 600; color: var(--ink); cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; flex: none; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform var(--motion-base) var(--ease-out); }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold > summary:hover { text-decoration: underline; }
.fold-body { padding-top: var(--space-4); }
.table .fold { margin: 0; }
.fold-technical > summary { font-weight: 550; color: var(--grey); font-size: 14px; }

/* Détail technique : texte brut en Raleway 13 px, préformaté avec retour à la ligne, fond gris très pâle */
.tech-detail {
  margin: var(--space-2) 0; padding: var(--space-3); border-radius: var(--radius-field); background: var(--surface);
  font-family: var(--font-text); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Panneau latéral non modal (« D'où viennent ces chiffres ») : fixe à droite, ouvert par une ancre */
.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(var(--panel-width), 100vw);
  display: none; flex-direction: column; background: var(--bg); box-shadow: var(--shadow-panel);
}
.side-panel:target, .side-panel.is-open { display: flex; animation: panel-in var(--motion-panel) var(--ease-out); }
@keyframes panel-in { from { transform: translateX(24px); opacity: 0; } }
.side-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--green-tint); }
.side-panel-head h2 { margin: 0; }
.side-panel-body { padding: var(--space-5); overflow-y: auto; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
.dl dt { color: var(--grey); }
.dl dd { margin: 0; color: var(--ink); }
.dl dd.muted { color: var(--grey); }

/* Zone de dépôt : pointillés, fond vert très pâle au survol d'un fichier */
.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-6) var(--space-5); border: 1px dashed var(--field); border-radius: var(--radius-panel);
  background: var(--surface); color: var(--grey); cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.dropzone:hover, .dropzone:focus-within, .dropzone.is-over { border-color: var(--green); background: var(--green-tint); color: var(--text); }
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone-title { color: var(--ink); font-weight: 600; }
.dropzone-hint { color: var(--grey); font-size: 14px; }
.dropzone-names { color: var(--ink); font-size: 14px; font-style: italic; word-break: break-word; }

/* Liste positive : coche verte ; jamais pour une mise en garde */
.checklist { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.checklist > li { position: relative; padding-left: 24px; margin-bottom: var(--space-2); color: var(--ink); }
.checklist > li::before {
  content: ""; position: absolute; left: 4px; top: 5px; width: 5px; height: 10px;
  border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* Mises en garde (réserves, remarques, points d'attention) : le point orange de l'état « attention », jamais la coche */
.warnlist { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.warnlist > li { position: relative; padding-left: 20px; margin-bottom: var(--space-2); color: var(--ink); }
.warnlist > li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--state-warn); }
.plain-list { margin: 0 0 var(--space-2); padding: 0; list-style: none; }

/* État vide (Stripe, NN/g) : ce qui manque, quand cela apparaîtra, l'action qui y répond ; encadré en pointillés,
   sans pictogramme ; aligné à gauche */
.empty { padding: var(--space-6); border: 1px dashed var(--line-2); text-align: left; color: var(--ink); }
.empty > p:first-child { font-weight: 650; }
.empty > :last-child { margin-bottom: 0; }
.empty p { max-width: 72ch; }
.empty .muted, .empty-detail { color: var(--grey); }
.empty .btn { margin-top: var(--space-3); }

/* Chiffres de la campagne : un chiffre de tête et au plus quatre chiffres secondaires, séparés par des filets */
.figures { display: flex; flex-wrap: wrap; align-items: flex-end; row-gap: var(--space-4); margin: 0 0 var(--space-5); }
.figure { display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-5); border-left: 1px solid var(--line); }
.figure:first-child { padding-left: 0; border-left: 0; }
.figure-label { color: var(--grey); font-size: 14px; }
.figure-value { color: var(--ink); font-family: var(--font-num); font-size: 22px; font-weight: 500; line-height: 32px; font-variant-numeric: lining-nums tabular-nums; }
.figure-lead .figure-value { color: var(--ink); font-size: 42px; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }

/* Panneau vert pâle arrondi : aide, informations, « Avant de lancer » */
.soft { padding: 20px 24px; border-radius: var(--radius-panel); background: var(--green-tint); }
.soft > :last-child { margin-bottom: 0; }
.soft h2, .soft h3 { margin-bottom: var(--space-2); color: var(--ink); font-size: 16px; }
.note { color: var(--grey); font-size: 14px; }

/* Courbe de la charte en masque (static/brand/curve.svg) : aplat de l'écran de connexion */
.curve { display: block; -webkit-mask: url("/static/brand/curve.svg") no-repeat 0 0 / 100% 100%; mask: url("/static/brand/curve.svg") no-repeat 0 0 / 100% 100%; }

/* ---------------------------------------------------------------------------------------------------------------
   Pages sans connexion (§ 4.1, § 4.19) : formulaire à gauche, aplat vert foncé découpé par la courbe à droite
   --------------------------------------------------------------------------------------------------------------- */
.main-bare { min-height: 100vh; }
.auth { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); min-height: 100vh; }
.auth-main { display: flex; flex-direction: column; justify-content: center; padding: var(--space-7) var(--space-8); }
.auth-body { width: 100%; max-width: 400px; }
.auth-logo { display: block; height: 40px; width: auto; margin-bottom: var(--space-7); }
.auth-body h1 { margin-bottom: var(--space-2); }
.auth-lead { margin-bottom: var(--space-6); color: var(--grey); }
.auth-body .form { max-width: none; }
.auth-links { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); font-size: 14px; }
.auth-foot { margin: var(--space-8) 0 0; color: var(--grey); font-size: 14px; }
.auth-art { background: var(--green); }
/* Champ du code à 6 chiffres : large, chiffres espacés */
.otp-input { height: 64px; min-height: 64px; padding: var(--space-3) 0 var(--space-3) 0.5em; font-size: 32px; font-weight: 600; letter-spacing: 0.5em; text-align: center; }
.otp-input::placeholder { color: var(--line); letter-spacing: 0.5em; }

/* Pages d'erreur */
.error-page { max-width: 560px; padding: var(--space-6) 0; }
.main-bare .error-page { margin: 0 auto; padding: var(--space-8) var(--space-4); }
.error-page .auth-logo { margin-bottom: var(--space-6); }

/* ---------------------------------------------------------------------------------------------------------------
   Écrans
   --------------------------------------------------------------------------------------------------------------- */
/* Accueil (maquette retenue par le responsable le 28.10.2026) : « Ce qui vous attend » (trois actions au plus, un grand
   chiffre chacune) et « Mes campagnes en cours » (une ligne par campagne : nom, barre du budget dépensé avec le repère
   du temps écoulé, mot d'état). Les actions sont trois blocs sur fond chaud, le premier sur vert pâle (contenus de
   nature différente : NN/g, Atlassian ; T93) ; les campagnes, des cartes à filet fin deux par rangée (T94).
   La barre est un SVG (largeurs en attributs : aucun style en ligne sous la politique de sécurité du serveur). */
.home-section + .home-section { margin-top: var(--space-8); }
.home-title { margin: 0 0 var(--space-5); color: var(--ink); font-size: 22px; font-weight: 750; letter-spacing: -0.01em; }
.home-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.home-head .home-title { margin: 0; }
.home-head a, .home-more a { color: var(--grey); font-size: 14px; }
.home-action .btn, .home-campaign, .home-campaign:hover, .home-client, .home-client:hover { text-decoration-line: none; }
.home-empty { margin: 0; padding: var(--space-5) var(--space-6); background: var(--green-tint); color: var(--ink); }
.home-more { margin: var(--space-3) 0 0; }
.band .home-signal { text-decoration: none; }
.band .home-signal:hover .state { text-decoration: underline; }

.home-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.home-action { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-5) var(--space-5) var(--space-5); background: var(--surface); }
.home-action .btn { margin-top: auto; }
.home-action.is-first { background: var(--green-tint); }
.home-figure { color: var(--ink); font-family: var(--font-num); font-size: 52px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.home-phrase { margin: var(--space-2) 0 var(--space-5); color: var(--text); font-size: 16px; }

/* Campagnes en cours : une carte par campagne, deux par rangée (T94) ; état en haut à droite, barre, montants et fin */
.home-campaigns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.home-campaign {
  display: flex; flex-direction: column; gap: var(--space-3); height: 100%; padding: 20px 22px; border: 1px solid var(--line); color: inherit;
  transition: border-color var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out);
}
.home-campaign:hover { border-color: var(--grey-light); background: var(--mist); }
.home-campaign:hover .home-campaign-name { text-decoration: underline; text-decoration-color: var(--green); }
.home-campaign-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.home-campaign-id { display: flex; flex-direction: column; min-width: 0; }
.home-campaign-name { color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.home-campaign-client { color: var(--grey); font-size: 14px; }
.home-campaign-foot { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--grey); font-size: 14px; }
.home-campaign-foot > :first-child { color: var(--ink); font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; }
.home-state { display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--state-neutral); font-size: 14px; font-weight: 700; white-space: nowrap; }
.home-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.home-state-ok::before { background: var(--green); }
/* Mes clients : initiales dans un carré chaud, nom, campagnes en cours et état des données ; trois par rangée */
.home-clients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-6); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.home-clients > li { border-bottom: 1px solid var(--line); }
.home-client { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-2); color: inherit; transition: background-color var(--motion-fast) var(--ease-out); }
.home-client:hover { background: var(--mist); text-decoration: none; }
.home-client:hover .home-client-name { text-decoration: underline; text-decoration-color: var(--green); }
.home-client-initials { display: grid; place-items: center; width: 44px; height: 44px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 700; }
.home-client-id { display: flex; flex-direction: column; min-width: 0; }
.home-client-name { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.home-client-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); color: var(--grey); font-size: 14px; }
.home-client-sub .state { font-size: 13px; }
.home-bar { display: block; }
.home-bar svg { display: block; width: 100%; height: 18px; overflow: visible; }
.home-bar-track { fill: var(--line); }
.home-bar-fill { fill: var(--green); }
.home-bar-warn .home-bar-fill { fill: var(--state-warn); }
.home-bar-error .home-bar-fill { fill: var(--state-error); }
.home-bar-today { stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.home-bar-note { color: var(--grey); font-size: 14px; }
.home-state-ok { color: var(--state-ok); }
.home-state-warn { color: var(--state-warn); }
.home-state-error { color: var(--state-error); }

/* À traiter (T96) : une section par famille, la plus urgente sur vert pâle ; répartition par client en liste */
.todo-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.todo-family { padding: 22px 24px; background: var(--surface); }
.todo-family.is-first { background: var(--green-tint); }
.todo-family-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.todo-family-head h2 { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; font-size: 18px; }
.todo-family-count { font-family: var(--font-num); font-size: 36px; font-weight: 500; line-height: 1; }
.todo-clients { margin: 0; padding: 0; list-style: none; }
.todo-alerts { margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.todo-alerts > li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: 12px 0; border-top: 1px solid var(--line-2); }
.todo-alerts p { margin: 2px 0 0; }
.todo-alerts form { flex: none; margin: 0; }
.todo-clients a, .todo-clients a:hover { text-decoration-line: none; }
.todo-clients a { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-top: 1px solid rgba(28, 25, 23, 0.08); color: var(--text); }
.todo-clients a:hover { color: var(--ink); text-decoration: none; }
.todo-clients a:hover > :first-child { text-decoration: underline; text-decoration-color: var(--green); }

/* Page d'une campagne (T94) : où en est la campagne (rythme du budget, ce qui reste à faire), chiffres clés et leur
   évolution, dépense par jour, part de chaque plateforme. Barres en SVG : largeurs en attributs, aucun style en ligne. */
.camp-status { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-6) var(--space-7); margin-bottom: var(--space-7); padding: 28px 32px; background: var(--surface); }
.camp-status-main > p { margin: var(--space-2) 0 0; color: var(--text); }
.camp-status-title { margin: 0; font-family: var(--font-title); font-size: 26px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.camp-pace { margin-top: var(--space-5); }
.camp-pace svg { display: block; width: 100%; height: 22px; overflow: visible; }
.camp-pace-track { fill: var(--bg); }
.camp-pace-fill { fill: var(--green); }
.camp-pace-warn .camp-pace-fill { fill: var(--state-warn); }
.camp-pace-error .camp-pace-fill { fill: var(--state-error); }
.camp-pace-today { stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.camp-pace-scale { display: flex; justify-content: space-between; gap: var(--space-3); margin: var(--space-2) 0 0; color: var(--grey); font-size: 14px; }
.camp-status-side { padding-left: var(--space-6); border-left: 1px solid var(--line-2); }
.camp-status-side h3 { margin-bottom: var(--space-3); font-size: 15px; }
.camp-status:not(:has(.camp-status-side)) { grid-template-columns: 1fr; padding: 22px 28px; }
.camp-todo-main { margin-top: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, max-content)); gap: var(--space-3) var(--space-6); }
.camp-todo { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.camp-todo li { position: relative; padding-left: 18px; color: var(--text); }
.camp-todo li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--state-warn); }
.camp-todo li.is-ok::before { background: var(--green); }
.camp-todo a { font-weight: 650; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.kpis { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); margin: 0 0 var(--space-5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kpi { display: flex; flex-direction: column; gap: var(--space-1); padding: 20px 24px; }
.kpi:first-child { padding-left: 0; }
.kpi + .kpi { border-left: 1px solid var(--line); }
.kpi .figure-value { font-size: 28px; line-height: 1.15; }
.kpi-lead .figure-value { font-size: 40px; }
@media (min-width: 561px) and (max-width: 1100px) {
  .kpi { padding: 16px 12px; }
  .kpi .figure-value { font-size: 22px; }
  .kpi-lead .figure-value { font-size: 32px; }
}
@media (min-width: 561px) and (max-width: 860px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi + .kpi { border-left: 0; }
  .kpi-lead { grid-column: 1 / -1; }
}
.kpi-trend { font-size: 13px; font-weight: 650; color: var(--text); }
.kpi-trend-up > [aria-hidden] { color: var(--green); }
.kpi-trend-down > [aria-hidden] { color: var(--state-warn); }
.kpi-trend-flat { color: var(--grey); }

.spend-chart { margin: 0 0 var(--space-6); }
.spend-chart svg { display: block; width: 100%; height: 200px; }
.spend-grid { stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.spend-bar { fill: var(--green); transition: opacity var(--motion-fast) var(--ease-out); }
.spend-bar:hover { opacity: 0.7; }
.spend-caption { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); color: var(--grey); font-size: 14px; }

.share-title { margin: 0 0 var(--space-3); font-size: 16px; }
.share { display: grid; gap: var(--space-3); max-width: 760px; margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.share-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 190px; gap: var(--space-4); align-items: center; }
.share-name { color: var(--ink); font-weight: 650; }
.share-bar { display: block; width: 100%; height: 10px; }
.share-track { fill: var(--surface); }
.share-fill { fill: var(--green); }
.share-value { text-align: right; white-space: nowrap; color: var(--ink); }
.share-value .muted { margin-left: var(--space-2); font-size: 13px; }

/* Confirmation avec motif (static/js/confirm.js) : le motif reste visible sans JavaScript */
.confirm-reason { display: flex; flex-direction: column; gap: 6px; }
.js .confirm-reason[data-collapsed] { display: none; }
.confirm-form { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
/* Fragments rafraîchis : sans effet visible */
[data-fragment][aria-busy="true"] { cursor: progress; }

/* Journal d'activité */
.results-count { margin: 0 0 var(--space-2); color: var(--grey); font-size: 14px; }
.table-audit td { vertical-align: top; }

/* Fichiers : dépôt, dialogue, correspondance des colonnes, aperçu modifiable */
.import-drop-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 720px; }
.form-grid { gap: var(--space-5) var(--space-6); }
.section-actions { margin-top: var(--space-4); }
.dialogue { display: flex; flex-direction: column; gap: var(--space-3); max-height: 320px; overflow-y: auto; padding: var(--space-4); border-radius: var(--radius-panel); background: var(--green-tint); }
.dialogue-item { display: grid; grid-template-columns: 110px 1fr auto; gap: var(--space-3); align-items: baseline; }
.dialogue-author { font-size: 14px; font-weight: 700; color: var(--ink); }
.dialogue-agent .dialogue-author { color: var(--ink); }
.dialogue-time { color: var(--grey); font-size: 14px; white-space: nowrap; }
.mapping td, .mapping th { vertical-align: middle; }
.mapping .select { min-width: 260px; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); }
.preview th, .preview td { white-space: nowrap; }
.preview td { padding-top: 6px; padding-bottom: 6px; }
.cell-input { width: auto; max-width: 28ch; padding: 4px 8px; border: 1px solid transparent; border-radius: 0; background: transparent; color: inherit; font: inherit; }
.cell-input:hover { border-color: var(--line-2); }
.cell-input:focus { outline: 2px solid var(--ink); outline-offset: -1px; background: var(--bg); }
.cell-input.is-corrected { color: var(--state-warn); font-weight: 600; }
.cell-input.is-uncertain { background: var(--warn-tint); border-color: #EBD3AE; }
.question + .question { margin-top: var(--space-3); }
.question-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.answer-box .label { display: block; margin-bottom: var(--space-2); }
.answer-row { display: flex; gap: var(--space-3); align-items: flex-end; }
.answer-row .textarea { flex: 1; min-width: 0; }
.answer-last { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-panel); background: var(--green-tint); }
.answer-last .dialogue-author { margin-right: var(--space-2); }
.row-error td { color: var(--state-error); }
.row-overlap td, .row-excluded td { color: var(--grey); }
.row-excluded .cell-input { text-decoration: line-through; }
.row-issues td { padding-top: 0; color: var(--state-error); font-size: 13px; white-space: normal; }
.row-issues .issue { margin-right: var(--space-3); }

/* ---------------------------------------------------------------------------------------------------------------
   Écrans moyens : sous 1 100 px, les actions passent sous le titre
   --------------------------------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .rg { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-5); }
  .page-header { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .page-actions { justify-content: flex-start; }
  .band-fact { flex-direction: row; align-items: center; gap: var(--space-2); }
}

/* ---------------------------------------------------------------------------------------------------------------
   Petits écrans (sous 860 px) : la barre latérale devient un en-tête compact dont le bouton « Menu » ouvre le menu ;
   sans JavaScript, le menu reste affiché (static/css/sans-js.css). Marges de 16 px.
   --------------------------------------------------------------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --gutter: 16px; }
  .app { display: block; }
  .sidebar { position: static; height: auto; overflow: visible; gap: 0; padding: var(--space-3) var(--gutter); border-bottom: 1px solid var(--line); }
  .brand { padding: 0; }
  .brand-logo { height: 24px; }
  .brand-name { padding-left: var(--space-2); font-size: 16px; }
  .sidebar-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 14px;
    border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--bg); color: var(--ink);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .sidebar-toggle::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .sidebar.is-open .sidebar-toggle::after { margin-top: 3px; transform: rotate(-135deg); }
  .sidebar-menu { display: none; padding-top: var(--space-4); }
  .sidebar.is-open .sidebar-menu { display: flex; }
  .side-user { margin-top: 0; }
  .rg { grid-template-columns: minmax(0, 1fr); }
  .rg-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--space-4) var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
  .container { padding: var(--space-5) var(--gutter) var(--space-7); }
  .band-inner, .band-high .band-inner { padding-top: var(--space-5); padding-bottom: var(--space-5); }
  .band h1, .band-high h1, .band-home h1 { font-size: 30px; }
  .band-home::before { display: none; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .filters .field { flex: 1 1 140px; }
  .help-tip { max-width: calc(100vw - 2 * var(--gutter)); }
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-main { padding: var(--space-7) var(--gutter); }
}
@media (max-width: 560px) {
  .filters .field-grow { flex-basis: 100%; }
  /* Tableau large : la première colonne garde sa largeur, le tableau seul défile */
  .table-wrap .table td:not(.num) { min-width: 8rem; }
  .table-wrap .table th:first-child, .table-wrap .table td:first-child { min-width: 12rem; }
  /* Listes d'actions (propositions à rattacher) : une carte par ligne plutôt qu'un tableau qui défile. */
  .table-wrap .table-stack thead { display: none; }
  .table-wrap .table-stack tr, .table-wrap .table-stack td { display: block; width: 100%; }
  .table-wrap .table-stack tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .table-wrap .table-stack td, .table-wrap .table-stack td:first-child { min-width: 0; padding: 4px 0; border: 0; text-align: left; }
  .table-wrap .table-stack .stack-tight { flex-direction: row; align-items: center; }
  .figure { padding: 0 var(--space-4); }
  .figure-lead { flex-basis: 100%; padding-left: 0; }
  .figure-lead + .figure { padding-left: 0; border-left: 0; }
  .dl { grid-template-columns: 1fr; gap: 0; }
  .dl dt { margin-top: var(--space-2); }
  .dialogue-item { grid-template-columns: 1fr; gap: var(--space-1); }
  .answer-row { flex-direction: column; align-items: stretch; }
  /* Accueil : les actions en une colonne (chiffre, phrase, bouton sur une ligne), la barre sous le nom */
  .home-actions { grid-template-columns: 1fr; }
  .home-actions { gap: var(--space-2); }
  .home-action { display: grid; grid-template-columns: minmax(52px, max-content) minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-4); }
  .home-action .btn { margin-top: 0; }
  .home-figure { font-size: 40px; }
  .home-phrase { margin: 0; }
  .home-title { font-size: 22px; }
  .home-head { flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
  .home-head a { white-space: nowrap; }
  .home-campaigns, .home-clients, .todo-board { grid-template-columns: 1fr; }
  .camp-status { grid-template-columns: 1fr; padding: var(--space-5); }
  .camp-status-side { padding: var(--space-4) 0 0; border-left: 0; border-top: 1px solid var(--line-2); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi, .kpi:first-child { padding: var(--space-4); }
  .kpi + .kpi { border-left: 0; }
  .kpi-lead { grid-column: 1 / -1; }
  .share-row { grid-template-columns: 100px minmax(0, 1fr) auto; gap: var(--space-3); }
  .camp-pace-scale > :nth-child(2) { display: none; }
}

/* Menu « Autres actions » des pages d'objet : bouton secondaire qui hérite de la couleur de son fond (lisible sur le
   bandeau comme sur blanc), liste en surimpression qui n'allonge pas le bandeau. */
.menu-more { position: relative; display: inline-block; }
.menu-more > summary { display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 14px; border: 1px solid currentColor; border-radius: var(--radius-pill); list-style: none; font-size: 14px; font-weight: 600; color: inherit; cursor: pointer; }
.menu-more > summary::-webkit-details-marker { display: none; }
.menu-more > summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.menu-more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.menu-more-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); min-width: 240px; padding: var(--space-3); border-radius: var(--radius-panel); background: var(--bg); color: var(--ink); box-shadow: var(--shadow-menu); }
.menu-more[open] > .menu-more-panel { animation: pop-in var(--motion-base) var(--ease-out); }
@keyframes pop-in { from { transform: translateY(-4px); opacity: 0; } }
.menu-more-panel .btn, .menu-more-panel form, .menu-more-panel .inline-form { width: 100%; }
.menu-more-panel .btn { justify-content: flex-start; }

/* Listes des clients et des campagnes : la première colonne (nom et plateformes) prend la place, sur grand écran. */
@media (min-width: 861px) { .table-lead th:first-child, .table-lead td:first-child { width: 38%; } }

/* Structure de rapport d'un client et médiathèque (lot 6, T113) */
.structure-types { display: flex; flex-direction: column; gap: var(--space-3); }
.structure-type { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.structure-type h3 { margin: 0; font-size: 1.05rem; }
.structure-slide-head { display: grid; grid-template-columns: 160px 1fr auto; gap: var(--space-4); align-items: start; }
.structure-slide-head h3 { margin: 0 0 var(--space-1); font-size: 1.05rem; }
.structure-thumb { width: 160px; height: auto; border: 1px solid var(--line); background: #FFFFFF; }
.structure-slide-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.media-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); background: #FFFFFF; }
.media-card img { max-width: 100%; height: auto; align-self: flex-start; border: 1px solid var(--line); }
@media (max-width: 720px) { .structure-slide-head { grid-template-columns: 1fr; } .structure-slide-actions { justify-content: flex-start; } }