/* =========================================================
   LouisJo — essai du skill design-taste-frontend, style « framed sheet ».
   Un cadre bourgogne TÀP tient le menu ; le travail est posé sur une feuille blanche.
   Chargé en dernier : remplace la coquille fixe 1440 × 900 et les ornements de l'habillage.
   Charte : crème #E4D4BA, bourgogne #490F14, orange #EA5428, noir, blanc ; Norgen (titres), Raleway (texte).
   Écart assumé au skill : un cadre de la couleur de la marque (le skill garde le cadre presque neutre).
   Sur le bourgogne : texte blanc (15,6:1), jamais d'orange (orange sur bourgogne : interdit par la charte) ;
   l'orange reste sur la feuille blanche, pour la donnée.
   ========================================================= */

@font-face { font-family: "Norgen"; src: url("../fonts/Norgen.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Raleway"; src: url("../fonts/Raleway-VariableFont_wght.ttf") format("truetype");
             font-weight: 100 900; font-display: swap; }

:root {
  --cadre: #490F14;              /* bourgogne TÀP : le cadre en L (demande de Chris, 26 oct. ; orange auparavant) */
  --encre-cadre: #FFFFFF;        /* texte du menu, sur le bourgogne : 15,6:1 */
  --sur-cadre: rgba(255, 255, 255, .72);/* texte secondaire sur le bourgogne : 8,4:1 */
  --feuille: #FFFFFF;
  --encre: #000000;
  --gris: #5C554D;               /* texte secondaire sur blanc : 7,0:1 */
  --gris-pale: #6B645C;          /* méta sur blanc seulement : 5,9:1 */
  --bord: #EAE3D7;               /* bord des cartes : un souffle sur le blanc */
  --filet: #F2EDE4;              /* filets de tableau */
  --controle: #D6CCBC;           /* bord des boutons et champs */
  --actif: rgba(255, 255, 255, .14);/* rangée active du menu, sur le bourgogne */
  --bourgogne: #490F14;
  --orange: #EA5428;             /* la donnée principale, et le soulignement d'onglet */
  --negatif: #B3261E;
  --bon: #1F7D47;                /* une variation favorable, en texte sur blanc (5,1:1) */
  --series: #490F14;             /* la série unique de chaque graphique (spec §9.1) */
  --series-pale: rgba(73, 15, 20, .08);
  --haute: #BF841D;              /* gravité haute : les repères hors cible des graphiques (3,2:1 sur blanc, spec §9.1) ; jamais un texte */

  --font-body: "Raleway", ui-sans-serif, "Segoe UI", sans-serif;
  --font-display: "Raleway", ui-sans-serif, "Segoe UI", sans-serif;
  --font-titre: "Norgen", Georgia, serif;
}

html, body { background: var(--cadre); color: var(--encre); font-family: var(--font-body); font-size: 14px; line-height: 1.45; }
/* Raleway dessine des chiffres elzéviriens par défaut : on force les chiffres alignés et tabulaires partout. */
/* La propriété abrégée « font: » remet font-variant-numeric à zéro : d'où le !important, seul moyen de tenir la règle
   sur tous les éléments, champs et puces compris. */
*, *::before, *::after, input, select, textarea, button { font-variant-numeric: lining-nums tabular-nums !important;
                                                          font-feature-settings: "lnum" 1, "tnum" 1 !important; }

/* ---------------- Coquille ---------------- */
.lj-app { display: grid; grid-template-columns: 228px minmax(0, 1fr); width: 100%; height: auto; min-height: 100dvh;
          background: var(--cadre); overflow: visible; }
.lj-side { position: sticky; top: 0; height: 100dvh; background: transparent; color: var(--encre-cadre);
           padding: 20px 12px 16px 16px; overflow: visible; }
.lj-brand { padding: 4px 8px 20px; gap: 0; }
.tap-logo { height: 26px; }
.tap-produit { font: 400 15px/1 var(--font-titre); letter-spacing: 0; text-transform: none; color: var(--encre-cadre); margin-top: 8px; }
.tap-portee { font-size: 12px; color: var(--sur-cadre); margin-top: 4px; }

.lj-nav { display: flex; flex-direction: column; gap: 2px; }
.lj-nav__item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px;
                color: var(--encre-cadre); font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: none; background: transparent; }
.lj-nav__item svg { width: 16px; height: 16px; color: var(--encre-cadre); }
.lj-nav__item:hover { background: rgba(255, 255, 255, .08); color: var(--encre-cadre); }
.lj-nav__item--active, .lj-nav__item--active:hover { background: var(--actif); color: var(--encre-cadre); box-shadow: none; }
.lj-nav__item--active svg { color: var(--encre-cadre); }
/* La pastille du menu (RE-10) : le nombre d'alertes à régler, sur « Pilotage ». Blanche à texte bourgogne (plus de 15:1), jamais
   d'orange sur le cadre bourgogne ; cachée à zéro (le gabarit ne l'écrit pas). */
.lj-nav__pastille { margin-left: auto; flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
                    background: var(--feuille); color: var(--bourgogne); font: 700 12px/20px var(--font-body); text-align: center; }

.lj-side__foot { margin-top: auto; }
.lj-userchip { background: transparent; border: 0; padding: 8px; gap: 10px; }
.lj-userchip__av { width: 28px; height: 28px; font-size: 11px; background: var(--encre-cadre); color: var(--bourgogne); }
.lj-userchip__name { color: var(--encre-cadre); font-size: 13px; }
.lj-userchip__role { color: var(--sur-cadre); font-size: 12px; }
.lj-userchip a, .lj-userchip button { color: var(--encre-cadre) !important; opacity: 1 !important; }
/* Le nom et le rôle mènent au profil (tâche 11). */
.lj-userchip__profil { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none;
                       border-radius: 6px; margin: -4px; padding: 4px; }
.lj-userchip__profil:hover, .lj-userchip__profil--actif { background: var(--actif); }

.lj-main { background: transparent; overflow: visible; padding: 8px 8px 8px 0; }
.lj-topbar { display: none; }
/* La feuille : blanche, bord d'un pixel, coins de 16 px, aucune ombre. */
.lj-page { background: var(--feuille); border: 0; border-radius: 16px; padding: 24px;
           min-height: calc(100dvh - 16px); overflow: visible; }

/* Messages : neutres par défaut, rouges seulement pour une erreur. */
.lj-flash { background: #F4EFE7; border: 0; color: var(--encre); border-radius: 8px; box-shadow: none; margin-bottom: 16px;
            padding: 12px 16px; font-size: 14px; }
.lj-flash--erreur { background: #FFEDEA; color: #831C1E; }

/* Fil d'Ariane et actions des écrans qui n'ont pas encore leur propre rangée de titre. */
.tap-fil { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 16px; font-size: 13px; color: var(--gris); }
.tap-fil strong { color: var(--encre); font-weight: 600; }
.tap-fil__actions { margin-left: auto; display: flex; gap: 8px; }

/* ---------------- Rangée de titre ---------------- */
.tap-titre { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.tap-titre__texte { min-width: 0; flex: 1 1 420px; }
.tap-ariane { font-size: 13px; color: var(--gris); margin-bottom: 6px; }
.tap-ariane a { color: var(--gris); text-decoration: none; }
.tap-ariane a:hover { color: var(--encre); }
.tap-titre h1 { font: 400 24px/1.15 var(--font-titre); letter-spacing: 0; color: var(--encre); margin: 0;
                display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tap-titre__ligne { font-size: 15px; color: var(--gris); margin-top: 6px; }
.tap-titre__ligne strong { color: var(--encre); font-weight: 600; }
.tap-titre__actions { display: flex; gap: 8px; align-items: center; }
.tap-puce { font: 500 12px/1 var(--font-body); color: var(--gris); background: #F4EFE7; border-radius: 4px; padding: 5px 8px;
            white-space: nowrap; flex: none; }

/* ---------------- Boutons ---------------- */
.lj-btn { height: 32px; padding: 0 12px; border-radius: 6px; font: 600 13px/1 var(--font-body); box-shadow: none !important;
          display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; }
.lj-btn--primary, .lj-btn--accent { background: var(--bourgogne); color: #fff; border: 1px solid var(--bourgogne); }
.lj-btn--primary:hover, .lj-btn--accent:hover { background: #5E1820; }
.lj-btn--ghost, .lj-btn--soft { background: #fff; color: var(--encre); border: 1px solid var(--controle); }
.lj-btn--ghost:hover, .lj-btn--soft:hover { background: #FAF7F2; }
.lj-btn--texte { background: none; border: 0; padding: 0; height: auto; color: var(--encre); font-weight: 600;
                 text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--controle); }
.lj-btn--texte:hover { text-decoration-color: var(--encre); }
.lj-btn--danger { background: none; border: 0; padding: 0; height: auto; color: var(--negatif); font-weight: 600; text-decoration: underline;
                  text-underline-offset: 3px; text-decoration-color: rgba(179, 38, 30, .35); }
.lj-btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--bourgogne); outline-offset: 2px; }
.lj-side .lj-nav__item:focus-visible, .lj-side a:focus-visible, .tap-barre button:focus-visible { outline: 2px solid var(--encre-cadre); outline-offset: 2px; }

/* ---------------- Portée : période et plateforme ---------------- */
.tap-portee-ligne { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.lj-filters { background: none; border: 0; padding: 0; box-shadow: none; margin: 0; }
.lj-segctl { background: #F4EFE7; border: 0; border-radius: 8px; padding: 3px; box-shadow: none; gap: 2px; display: inline-flex; flex-wrap: wrap; }
.lj-segctl button { height: 28px; padding: 0 10px; border-radius: 6px; font: 500 13px/1 var(--font-body); color: var(--gris);
                    background: transparent; border: 0; box-shadow: none; }
.lj-segctl button:hover { color: var(--encre); }
.lj-segctl button { border: 1px solid transparent; }
.lj-segctl button.is-active { background: #fff; color: var(--encre); font-weight: 600; border-color: var(--bord); }
/* Les filtres du Pilotage sont des liens (aucun JavaScript) : le même habillage que les boutons. */
.lj-segctl a { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid transparent;
               font: 500 13px/1 var(--font-body); color: var(--gris); text-decoration: none; white-space: nowrap; }
.lj-segctl a:hover { color: var(--encre); }
.lj-segctl a.is-active { background: #fff; color: var(--encre); font-weight: 600; border-color: var(--bord); }
.tap-titre__nom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tap-mobile-seul { display: none; }

/* Onglets soulignés : 2 px d'orange sur un filet pleine largeur. */
/* `overflow-x: auto` rend aussi `overflow-y` auto : le souligné de l'onglet (`margin-bottom: -1px`) dépasse d'un pixel et faisait naître
   une barre verticale. Les onglets ne défilent jamais en hauteur. */
.lj-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--bord); margin-bottom: 20px; overflow-x: auto; overflow-y: hidden; }
.lj-tabs a { font: 500 14px/1 var(--font-body); color: var(--gris); padding: 10px 0 12px; border-bottom: 2px solid transparent;
             margin-bottom: -1px; white-space: nowrap; }
.lj-tabs a.is-active { color: var(--encre); border-bottom-color: var(--orange); font-weight: 600; }

/* ---------------- Grille : colonne principale et rail ---------------- */
.tap-grille { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.tap-pile { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tap-rail { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.tap-rail h2 { font: 600 16px/1.2 var(--font-body); margin: 0 0 8px; color: var(--encre); }

/* ---------------- Le mot de l'équipe (rail de la fiche d'une marque) ---------------- */
.tap-mot { display: flex; flex-direction: column; gap: 12px; }
.tap-rail .tap-mot h2 { margin: 0; }
.tap-mot__intro { font-size: 13px; line-height: 1.5; color: var(--gris); margin: 0; }
.tap-mot__carte .lj-field { margin-bottom: 12px; }
.lj-input.tap-mot__champ { height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.5; resize: vertical; width: 100%; }
.lj-input.tap-mot__champ[aria-invalid="true"] { border-color: var(--negatif); }
.tap-mot__erreur { margin: 0; font-size: 13px; font-weight: 600; color: var(--negatif); }
.tap-mot__pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tap-mot__pied .tap-sous { margin: 0; min-width: 0; }

/* ---------------- Cartes ---------------- */
.lj-card { background: #fff; border: 1px solid var(--bord); border-radius: 8px; box-shadow: none; padding: 20px; }
.lj-card--flush { padding: 0; overflow: hidden; }
.tap-carte__tete { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px 12px; }
.tap-carte__tete h2, .tap-carte__tete h3 { font: 600 16px/1.2 var(--font-body); margin: 0; color: var(--encre); }
.tap-carte__tete .tap-meta { margin-left: auto; font-size: 12px; color: var(--gris-pale); }
.lj-card .lj-chart__sub { font-size: 12px; color: var(--gris-pale); margin-top: 4px; }
.tap-graphique { position: relative; height: 220px; margin-top: 12px; }

/* ---------------- Bande des chiffres clés : un seul conteneur, des cloisons d'un pixel ---------------- */
.tap-chiffres { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); background: #fff;
                border: 1px solid var(--bord); border-radius: 8px; }
.tap-chiffre { padding: 16px 20px; min-width: 0; }
.tap-chiffre + .tap-chiffre { border-left: 1px solid var(--bord); }
.tap-chiffre__lbl { font: 500 13px/1.3 var(--font-body); color: var(--gris); }
.tap-chiffre__val { font: 600 clamp(20px, 1.7vw, 24px)/1.15 var(--font-body); color: var(--encre); margin-top: 6px; white-space: nowrap; }
.tap-chiffre--tete .tap-chiffre__val { font-size: clamp(24px, 2.3vw, 32px); }
.tap-chiffre__note { font-size: 12px; color: var(--gris-pale); margin-top: 4px; }

/* ---------------- Tableaux : filets et alignement ---------------- */
.tap-defile { overflow-x: auto; position: relative; }       /* `relative` : l'étiquette `.sr-only` d'un champ ne déborde pas de la page */
.lj-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lj-table thead th { font: 500 12px/1.2 var(--font-body); color: var(--gris-pale); text-transform: none; letter-spacing: 0;
                     background: none; padding: 10px 20px 8px; border-bottom: 1px solid var(--bord); text-align: left; white-space: nowrap; }
.lj-table tbody td { padding: 12px 20px; border-bottom: 1px solid var(--filet); vertical-align: middle; color: var(--encre); }
.lj-table tbody tr:last-child td { border-bottom: 0; }
.lj-table tbody tr:hover { background: #FBF9F5; }
.lj-table .num { text-align: right; white-space: nowrap; }
.lj-table .vide { color: var(--gris-pale); }
.tap-nom { font-weight: 600; color: var(--encre); text-decoration: none; }
.tap-nom:hover { text-decoration: underline; text-underline-offset: 3px; }
.tap-sous { font-size: 12px; color: var(--gris-pale); margin-top: 3px; }
.tap-unite { color: var(--gris-pale); font-weight: 400; }

/* ---------------- Listes du rail ---------------- */
.tap-liste { background: #fff; border: 1px solid var(--bord); border-radius: 8px; padding: 4px 16px; }
.tap-liste__rang { display: flex; align-items: center; gap: 12px; min-height: 45px; border-bottom: 1px solid var(--filet); }
.tap-liste__rang:last-child { border-bottom: 0; }
.tap-liste__rang .tap-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tap-vide { font-size: 14px; color: var(--gris); padding: 12px 0; }

/* Gravité d'une règle : paires pâles, la gravité toujours écrite en toutes lettres. */
.tap-gravite { display: inline-block; font: 600 12px/1 var(--font-body); padding: 5px 8px; border-radius: 4px; white-space: nowrap; }
.tap-gravite--critique { background: #FFEDEA; color: #831C1E; }
.tap-gravite--haute { background: #FFFBEB; color: #92400E; }
.tap-gravite--moyenne { background: #F4EFE7; color: var(--encre); }

/* Statut : un point et un mot, jamais une couleur seule. */
.tap-point { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2F7D4F; margin-right: 6px; vertical-align: 1px; }
.tap-point--off { background: #A89880; }

/* ---------------- Formulaires ---------------- */
.lj-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.lj-field__lbl { font: 500 14px/1.2 var(--font-body); color: var(--encre); text-transform: none; letter-spacing: 0; }
.lj-field__hint { font-size: 12px; color: var(--gris-pale); }
.lj-input, .lj-select { height: 40px; padding: 0 12px; border: 1px solid var(--controle); border-radius: 8px; background: #fff;
                        font: 400 14px/1 var(--font-body); color: var(--encre); box-shadow: none; }
.lj-select { padding-right: 32px; }
.lj-input:focus, .lj-select:focus { outline: 2px solid var(--bourgogne); outline-offset: 1px; border-color: var(--controle); }
.tap-select-court { height: 32px; font-size: 13px; }
.tap-formulaire { padding: 16px 20px; border-top: 1px solid var(--bord); background: #FBF9F5; }
.tap-formulaire__ligne { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.tap-formulaire__ligne .lj-field { margin-bottom: 0; }
.tap-formulaire__note { font-size: 13px; color: var(--gris); margin-top: 12px; }
.tap-cases { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; border: 1px solid var(--controle);
             border-radius: 8px; padding: 10px 12px; background: #fff; min-width: 240px; }
.tap-cases label { font-size: 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tap-actions-rang { display: flex; gap: 16px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* ---------------- Journal et listes clé-valeur ---------------- */
.tap-journal__rang { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 20px;
                     border-bottom: 1px solid var(--filet); }
.tap-journal__rang:last-child { border-bottom: 0; }
.tap-journal__titre { font-weight: 600; color: var(--encre); }
.tap-journal__quand { font-size: 13px; color: var(--gris-pale); white-space: nowrap; text-align: right; }
.tap-journal__detail { grid-column: 1 / -1; font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.tap-cles { background: #fff; border: 1px solid var(--bord); border-radius: 8px; padding: 4px 16px; }
.tap-cles__rang { display: flex; align-items: center; gap: 12px; min-height: 40px; border-bottom: 1px solid var(--filet); font-size: 14px; }
.tap-cles__rang:last-child { border-bottom: 0; }
.tap-cles__rang span:last-child { margin-left: auto; font-weight: 600; color: var(--encre); text-align: right; }
.tap-cles__rang span:first-child { color: var(--gris); }
/* Réglages : une rangée par section, le titre et l'explication à gauche, le contenu à droite. */
.tap-reglage { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 8px 32px; padding: 24px 0;
               border-top: 1px solid var(--bord); }
.tap-reglage:first-of-type { border-top: 0; padding-top: 4px; }
.tap-reglage h2 { font: 600 16px/1.3 var(--font-body); margin: 6px 0 0; color: var(--encre); }
.tap-reglage__aide { font-size: 14px; color: var(--gris); margin-top: 6px; }
.tap-reglage__panneau { background: #FBF9F5; border-radius: 12px; padding: 8px 20px; min-width: 0; }
.tap-reglage__panneau .tap-cles { background: none; border: 0; padding: 0; }
/* Le premier champ du formulaire : le champ caché du jeton CSRF (champ_csrf) vient avant lui et lui prend le :first-child. */
.tap-reglage__panneau .lj-field:first-child,
.tap-reglage__panneau input[type="hidden"] + .lj-field { margin-top: 12px; }
@media (max-width: 760px) { .tap-reglage { grid-template-columns: minmax(0, 1fr); } }
.tap-section { margin-top: 24px; }
.tap-section > h2 { font: 600 16px/1.2 var(--font-body); margin: 0 0 8px; color: var(--encre); }
.tap-avis { background: #F4EFE7; border-radius: 8px; padding: 12px 16px; font-size: 14px; color: var(--encre); margin-bottom: 20px; }
/* « Installer LouisJo » : l'offre d'installation du navigateur et son bouton (static/js/appli.js lève le `hidden` de la zone). */
.tap-installer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }

/* ---------------- Pages de connexion : une carte blanche sur le bourgogne ---------------- */
.lj-authshell { min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 16px; background: var(--cadre); padding: 40px 16px; }
.lj-authcard { width: 100%; max-width: 380px; background: #fff; border: 0; border-radius: 16px; padding: 32px 28px; box-shadow: none; }
.lj-authshell .lj-flash { max-width: 380px; width: 100%; margin: 0; }
/* Le message d'échec de la connexion est dans la carte, pas au-dessus : il laisse de l'air avant le premier champ. */
.lj-authcard .lj-flash { max-width: none; margin: 0 0 20px; }
.tap-auth__tete { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 24px; }
.tap-auth__tete h1 { font: 400 20px/1.2 var(--font-titre); color: var(--encre); margin: 14px 0 0; }
.tap-auth__tete p { font-size: 14px; color: var(--gris); margin-top: 8px; }
.tap-logo--auth { height: 40px; margin: 0 auto; }
.tap-produit--auth { color: var(--encre); font-size: 18px; margin-top: 12px; }
.lj-authcard .lj-btn { width: 100%; justify-content: center; height: 40px; margin-top: 4px; }
/* 16 px : en dessous, Safari sur iPhone agrandit la page au toucher d'un champ. */
.lj-authcard .lj-input { font-size: 16px; }
/* Le code à 6 chiffres : gros et espacé, facile à vérifier contre le courriel. */
.lj-authcard .lj-input.tap-code { font-size: 22px; letter-spacing: 4px; text-align: center; font-variant-numeric: lining-nums tabular-nums; }
/* Les autres choix sous un formulaire (code par courriel, mot de passe oublié, retour) : des liens, pas des boutons pleins. */
.tap-auth__liens { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 20px; }
.lj-authcard .tap-auth__liens .lj-btn { width: auto; height: auto; margin-top: 0; font-size: 14px; }
.tap-auth__note { font-size: 14px; color: var(--gris); margin: 0 0 16px; }
/* « Ce n'était pas moi », une fois les sessions coupées : les étapes qui restent, numérotées. */
.tap-auth__etapes { font-size: 14px; line-height: 1.5; margin: 0 0 20px; padding-left: 20px; }
.tap-auth__etapes li + li { margin-top: 8px; }
/* La page de bienvenue (invitation) : la note sous un choix, le titre du formulaire, les notes de fin. */
.tap-auth__note--apres { font-size: 13px; margin: 8px 0 0; text-align: center; overflow-wrap: anywhere; }
.tap-auth__note--fin { font-size: 13px; margin: 20px 0 0; }
.tap-auth__titre { font-size: 15px; font-weight: 600; color: var(--encre); margin: 0 0 12px; }
/* « Continuer avec Google » : bouton blanc bordé, le « G » à gauche du texte ; puis « ou » entre deux filets. */
.lj-authcard .tap-google { gap: 10px; }
.tap-google__logo { flex: none; }
.tap-auth__ou { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 13px; color: var(--gris); }
.tap-auth__ou::before, .tap-auth__ou::after { content: ""; flex: 1; border-top: 1px solid var(--controle); }

/* Le lien « Confidentialité » au pied des pages de connexion et de bienvenue (Loi 25). */
.tap-auth__pied { margin: 24px 0 0; text-align: center; font-size: 13px; }
.tap-auth__pied a { color: var(--gris); text-decoration: underline; text-underline-offset: 2px; }
.tap-auth__pied a:hover, .tap-auth__pied a:focus-visible { color: var(--encre); }

/* ---------------- Confidentialité : un texte à lire, dans la même carte que la connexion ---------------- */
.lj-authcard.tap-texte { max-width: 640px; padding: 40px 36px; }
.tap-texte .tap-auth__tete { margin-bottom: 8px; }
.tap-texte section { margin-top: 28px; }
.tap-texte h2 { font: 600 16px/1.3 var(--font-body); color: var(--encre); margin: 0 0 8px; }
.tap-texte p, .tap-texte li { font-size: 15px; line-height: 1.6; color: var(--encre); }
.tap-texte section p { margin: 0 0 12px; }
.tap-texte ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.tap-texte li { margin-bottom: 6px; }
.tap-texte code { font-family: var(--font-mono); font-size: 14px; overflow-wrap: anywhere; }
.tap-texte section a { color: var(--encre); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.tap-texte .tap-texte__date { margin: 32px 0 0; font-size: 13px; color: var(--gris); }
@media (max-width: 480px) { .lj-authcard.tap-texte { padding: 28px 20px; } }

/* ---------------- Clé d'accès : vérification, code de secours, codes à imprimer ---------------- */
/* Le code de secours se tape en minuscules : pas de majuscule automatique, chasse fixe pour le relire. */
.lj-authcard .lj-input.tap-code-secours { font-family: var(--font-mono); letter-spacing: 1px; }
.tap-secours { margin-top: 20px; border-top: 1px solid var(--controle); padding-top: 16px; }
.tap-secours summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--encre); }
.tap-secours[open] summary { margin-bottom: 12px; }
/* Les 8 codes : deux colonnes, chasse fixe, numérotés ; lisibles à 375 px. */
.tap-codes__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0 0 20px;
                    padding: 16px 16px 16px 36px; background: #F4EFE7; border-radius: 8px; }
.tap-codes__liste li { font-size: 13px; color: var(--gris); }
/* Un code ne se coupe jamais à son tiret : 11 caractères en chasse fixe tiennent dans une colonne à 375 px. */
.tap-codes__liste code { font-family: var(--font-mono); font-size: 15px; color: var(--encre); white-space: nowrap; }
.tap-codes__action { margin-top: 8px; }
@media print {
  .lj-authshell { background: #fff; padding: 0; min-height: 0; }
  .lj-authcard.tap-codes { max-width: none; padding: 0; }
  .tap-codes .lj-btn, .tap-codes form, .tap-codes .tap-auth__liens, .lj-flash { display: none !important; }
  .tap-codes__liste { background: none; border: 1px solid #000; }
}

/* ---------------- Équipe et accès, onglet Accès d'une marque, profil (tâche 11) ---------------- */
/* `hidden` l'emporte toujours : `.lj-field` (display: flex) le défaisait, et les choix de modules ou de marques d'un
   formulaire caché restaient visibles. */
[hidden] { display: none !important; }
.tap-section { margin-top: 16px; }
.tap-onglets a { text-decoration: none; }
.tap-point--retire { background: var(--negatif); }
/* Une personne : qui, droits, méthodes, état, puis « Gérer » ; le panneau de gestion se déplie dessous. */
.tap-personnes { list-style: none; margin: 0; padding: 0; }
.tap-personne { border-top: 1px solid var(--filet); }
.tap-personne__ligne { display: grid; align-items: center; gap: 6px 20px; padding: 14px 20px;
                       grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; }
.tap-personne__ligne--client { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; }
.tap-personne__droits, .tap-personne__methodes, .tap-personne__etat { font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.tap-personne__droits .tap-puce { margin-right: 4px; }
.tap-personne__panneau { padding: 4px 20px 20px; background: #FBF9F5; border-top: 1px solid var(--filet); }
.tap-personne__note { font-size: 13px; color: var(--gris); margin: 12px 0 0; }
.tap-personne__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; }
.tap-personne__actions form { margin: 0; }
.tap-personne__actions--ligne { margin-top: 0; justify-content: flex-end; gap: 8px 20px; }
.tap-personne__vide { padding: 20px; }
.tap-personne__titre { font: 600 14px/1.3 var(--font-body); color: var(--encre); margin: 20px 0 0; }
.tap-sessions { border-bottom: 1px solid var(--filet); }
.tap-droits { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding-top: 16px; }
.tap-droits .lj-field { margin: 0; }
.tap-champs { border: 0; padding: 0; margin: 0; min-width: 0; }
.tap-champs legend { padding: 0; margin-bottom: 8px; }
.tap-envoyer { height: 40px; align-self: flex-end; }
.tap-type-marque { display: flex; align-items: center; gap: 12px; margin: 0; }
.tap-filtre .lj-field { margin: 0; }
.tap-filtre .lj-select { min-width: 220px; }
/* Les quatre filtres de la page Alertes et leur bouton tiennent sur une rangée à 1440 px (la règle la plus longue prend 300 px). */
.tap-filtre--alertes .lj-select { min-width: 190px; }
/* Le journal des accès : une liste, sans numéros. */
.tap-journal { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.tap-journal__vide { padding: 16px 20px; }
/* Le profil : des rangées (texte à gauche, geste à droite) dans les panneaux des réglages. */
.tap-profil-liste { list-style: none; margin: 0; padding: 0; }
.tap-profil-rang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0;
                   border-bottom: 1px solid var(--filet); }
.tap-profil-rang:last-child { border-bottom: 0; }
.tap-profil-rang__texte { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.tap-profil-rang__texte strong { font-weight: 600; color: var(--encre); }
.tap-profil-rang form { margin: 0; }
.tap-profil-pied { padding: 12px 0; border-top: 1px solid var(--filet); }
.tap-profil-form { padding: 4px 0 16px; border-top: 1px solid var(--filet); }
.tap-profil-form h3 { font: 600 15px/1.3 var(--font-body); color: var(--encre); margin: 16px 0 12px; }
.tap-profil-form .lj-input { width: 100%; max-width: 380px; }
.tap-profil-form .tap-sous { margin-top: 8px; }
.tap-profil-reconnexion p { font-size: 14px; color: var(--encre); margin: 16px 0 12px; }
.tap-renommer summary { cursor: pointer; font: 600 13px/1 var(--font-body); color: var(--encre); text-decoration: underline;
                        text-underline-offset: 3px; text-decoration-color: var(--controle); list-style: none; }
.tap-renommer summary::-webkit-details-marker { display: none; }
.tap-renommer[open] { flex-basis: 100%; order: 3; }
.tap-renommer form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tap-renommer .lj-input { flex: 1 1 200px; max-width: 320px; height: 36px; }
.tap-reglage__panneau--liste { padding: 0; overflow: hidden; }
.tap-reglage__panneau--liste .tap-journal { border-top: 0; }
/* La veille d'une alerte (RE-8) : « Veille » ouvre la note facultative et les deux durées sous la rangée, comme « Renommer » ;
   « Réveiller » est un bouton seul. Les deux se glissent dans une rangée en flex (`.tap-profil-rang`, les lignes d'alertes). */
.tap-veille summary { list-style: none; }
.tap-veille summary::-webkit-details-marker { display: none; }
.tap-veille[open] { flex-basis: 100%; order: 3; }
.tap-veille .tap-veille__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.tap-veille__note { flex: 1 1 240px; max-width: 420px; height: 36px; }
.tap-veille-reveil { margin: 0; }
@media (max-width: 640px) {
  /* Des cibles de 40 px au doigt ; 16 px dans le champ : en dessous, Safari sur iPhone agrandit la page au toucher. */
  .tap-veille summary, .tap-veille__form .lj-btn, .tap-veille-reveil .lj-btn { min-height: 40px; }
  .tap-veille__note { max-width: none; height: 40px; font-size: 16px; }
}
/* La page Alertes (tâche 2 ; RE-9) : une alerte par rangée, sur la feuille blanche. À gauche la gravité (icône et mot), la
   marque et la règle, le titre, ce qui est en jeu, depuis quand et dans quel état ; à droite le geste de veille, dont le
   tiroir s'ouvre sous la rangée (`.tap-veille[open]`, plus haut). */
.tap-alertes { list-style: none; margin: 0; padding: 0; }
.tap-alerte { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; padding: 14px 20px;
              border-top: 1px solid var(--filet); background: var(--feuille); }
.tap-alerte__texte { flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; }
.tap-alerte__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--gris); }
.tap-alerte__tete strong { color: var(--encre); font-weight: 600; }
.tap-alerte__titre { display: inline-block; margin-top: 8px; font-size: 15px; }
.tap-alerte__enjeu { margin-top: 4px; font-size: 14px; color: var(--encre); }
.tap-alertes__vide { padding: 16px 20px; margin: 0; }
.tap-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 20px;
                  border-top: 1px solid var(--filet); }
.tap-pagination__page { font-size: 13px; color: var(--gris); }
@media (max-width: 640px) {
  .tap-alerte, .tap-pagination { padding-left: 16px; padding-right: 16px; }
  .tap-pagination .lj-btn { min-height: 40px; }
}
@media (max-width: 900px) {
  .tap-personne__ligne, .tap-personne__ligne--client { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 16px; }
  .tap-personne__qui { grid-column: 1; grid-row: 1; }
  .tap-personne__gerer { grid-column: 2; grid-row: 1; }
  .tap-personne__droits, .tap-personne__methodes, .tap-personne__etat, .tap-personne__actions--ligne { grid-column: 1 / -1; }
  .tap-personne__actions--ligne { justify-content: flex-start; margin-top: 4px; }
  .tap-personne__panneau { padding: 4px 16px 16px; }
}
@media (max-width: 640px) {
  /* 16 px : en dessous, Safari sur iPhone agrandit la page au toucher d'un champ. */
  .tap-profil-form .lj-input, .tap-renommer .lj-input, .tap-droits .lj-select, .tap-filtre .lj-select,
  .tap-formulaire .lj-input, .tap-formulaire .lj-select, .lj-input.tap-mot__champ { font-size: 16px; }
  .tap-droits, .tap-droits .lj-field, .tap-droits .tap-champs, .tap-filtre .lj-field,
  .tap-formulaire__ligne .lj-field, .tap-formulaire__ligne .lj-input { width: 100%; }
  .tap-droits .lj-select, .tap-filtre .lj-select, .tap-cases { width: 100%; min-width: 0; }
  .tap-personne__actions { gap: 4px 20px; }
  /* Des cibles de 40 px au doigt : « Gérer », les gestes en texte, « Renommer ». */
  .tap-personne__gerer .lj-btn { height: 40px; }
  .tap-personne__actions .lj-btn, .tap-profil-rang .lj-btn--texte, .tap-profil-rang .lj-btn--danger,
  .tap-renommer summary { min-height: 40px; display: inline-flex; align-items: center; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------- Barre du cellulaire (cachée sur grand écran) ---------------- */
.tap-barre { display: none; }

/* ---------------- Tablette et cellulaire : le menu se replie ---------------- */
@media (max-width: 1180px) {
  .tap-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .lj-app { grid-template-columns: minmax(0, 1fr); }
  .tap-barre { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px; position: sticky; top: 0; z-index: 20;
               background: var(--cadre); color: var(--encre-cadre); }
  .tap-barre__menu { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--encre-cadre); cursor: pointer; }
  .tap-barre__nom { font: 400 15px/1 var(--font-titre); }
  .lj-side { position: fixed; inset: 0; height: auto; z-index: 30; background: var(--cadre); padding: 16px 20px;
             display: none; overflow-y: auto; }
  body.menu-ouvert .lj-side { display: flex; }
  .tap-fermer { display: grid; }
  .lj-main { padding: 0; }
  .lj-page { border: 0; border-radius: 0; min-height: calc(100dvh - 48px); padding: 20px 16px; }
}
@media (min-width: 1025px) { .tap-fermer { display: none; } }
.tap-fermer { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; place-items: center;
              background: none; border: 0; color: var(--encre-cadre); cursor: pointer; }
@media (max-width: 640px) {
  .tap-titre { align-items: stretch; }
  .tap-titre__actions { width: 100%; }
  .tap-titre__actions .lj-btn { flex: 1; justify-content: center; height: 44px; }
  .tap-carte__tete { flex-wrap: wrap; }
  .tap-carte__tete .tap-meta { margin-left: 0; flex-basis: 100%; }
  .lj-btn { white-space: nowrap; }
  .tap-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tap-chiffre:nth-child(odd) { border-left: 0; }
  .tap-chiffre:nth-child(n+3) { border-top: 1px solid var(--bord); }
  .tap-chiffre:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tap-chiffre--tete .tap-chiffre__val { font-size: 28px; }
  .lj-segctl { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .lj-segctl button { flex: none; height: 36px; }
  .tap-portee-ligne { flex-direction: column; align-items: stretch; }
  /* Les tableaux deviennent des rangées à deux lignes : nom et chiffre clé, puis le reste en gris. */
  .tap-table-mobile thead { display: none; }
  .tap-table-mobile tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px;
                               border-bottom: 1px solid var(--filet); }
  .tap-table-mobile tbody td { display: block; padding: 0; border: 0; }
  .tap-table-mobile tbody td.tap-mobile-cache { display: none; }
  .tap-table-mobile tbody td.tap-mobile-ligne2 { grid-column: 1 / -1; font-size: 13px; color: var(--gris); text-align: left; }
  .tap-table-mobile tbody td.tap-mobile-ligne2:has(.vide) { display: none; }
  .tap-mobile-seul { display: inline; }
}

/* La fiche d'une marque : ses cinq chiffres clés et ses deux graphiques occupent toute la largeur de la feuille (l'arbre et le rail
   viennent dessous). Selon la place du conteneur (requête de conteneur sur `.tap-pile--fiche`) : cinq tuiles en rangée ; sinon deux
   par rangée, la cinquième seule sur la sienne. Le seuil laisse 143 px aux tuiles (« 125 400 $ » en demande 103 + 40 de marges). Les
   filets sont le haut et la gauche de chaque tuile, le cadre coupe ceux du tour. Placé après les règles du cellulaire, qu'il remplace
   pour cette rangée. */
.tap-pile--fiche { container-type: inline-size; }
.tap-chiffres--fiche { grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; }
.tap-chiffres--fiche .tap-chiffre { border: 0; box-shadow: -1px -1px 0 0 var(--bord); }
.tap-chiffres--fiche .tap-chiffre:last-child:nth-child(odd) { grid-column: auto; }
.tap-pile--fiche .tap-avis { margin: 0; }
@container (max-width: 714px) {
  .tap-chiffres--fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tap-chiffres--fiche .tap-chiffre:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.tap-portee-ligne .tap-meta { font-size: 13px; color: var(--gris); }

/* ---------------- Le Pilotage (tâche 5 ; spec §9.2) ---------------- */
/* « À régler » est le point focal : l'orange n'y sert qu'au filet du haut et à l'éclair, jamais en texte. Les rangées sont celles de la
   page Alertes (`.tap-alerte`) ; la veille y passe sous la rangée (`.tap-veille[open]`). */
.tap-focal { padding: 0; border-top: 4px solid var(--orange); }
.tap-focal__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 20px 14px; }
.tap-eclair { flex: none; height: 28px; width: auto; }
.tap-focal__tete h2 { font: 600 22px/1 var(--font-body); letter-spacing: 0; color: var(--encre); margin: 0; }      /* Norgen est pour les h1 */
.tap-focal__nombre { font: 600 22px/1 var(--font-body); color: var(--encre); }
.tap-focal__gravites { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--gris); }
.tap-focal__gravites span { display: inline-flex; align-items: center; gap: 5px; }
.tap-focal__veille { margin-left: auto; }
.tap-focal .tap-alerte__detail { margin-top: 2px; font-size: 13px; color: var(--gris); }
.tap-focal__pied { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 12px 20px;
                   border-top: 1px solid var(--filet); font-size: 13px; color: var(--gris); }

/* « Hier » : une colonne de tuiles dans le rail (1181 px et plus), une rangée de tuiles quand le rail passe sous « À régler », deux par rangée
   sous 640 px. Les filets sont le haut et la gauche de chaque tuile ; le cadre coupe ceux du tour (comme `.tap-chiffres--fiche`). */
.tap-rail__tete { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.tap-rail__tete h2 { margin: 0; }
.tap-rail__tete .tap-meta { margin-left: auto; font-size: 12px; color: var(--gris-pale); }
.tap-chiffres--colonne { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); overflow: hidden; }
.tap-chiffres--colonne .tap-chiffre { border: 0; box-shadow: -1px -1px 0 0 var(--bord); }
@media (min-width: 1181px) { .tap-chiffres--colonne { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 641px) and (max-width: 1180px) { .tap-chiffres--colonne .tap-chiffre:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .tap-chiffres--colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tap-chiffre__val--mots { font-size: 15px; line-height: 1.3; white-space: normal; }
.tap-chiffre__val .tap-unite { font-size: 13px; }
.tap-chiffre__note .lj-btn--texte { font-size: 12px; }
/* La flèche dit le sens, le mot le jugement : jamais la couleur seule. */
.tap-delta { font-weight: 600; }
.tap-delta--bon { color: var(--bon); }
.tap-delta--mauvais { color: var(--negatif); }
.tap-delta--neutre { color: var(--gris); }

/* Le tableau des marques. Rangée : nom, diffusion, dépense, mini-courbe, résultats, efficacité, tendance, alertes. Les cellules
   peuvent se replier (à 1440 px les huit colonnes tiennent sans défilement) ; seuls les chiffres restent sur une ligne. */
.tap-marques-carte { margin-top: 24px; }
.tap-marques tbody td { font-size: 13px; }
.tap-marques thead th, .tap-marques tbody td { padding-left: 8px; padding-right: 8px; }
.tap-marques thead th:first-child, .tap-marques tbody td:first-child { padding-left: 20px; }
.tap-marques thead th:last-child, .tap-marques tbody td:last-child { padding-right: 20px; }
.tap-marques td.m-marque { min-width: 220px; }
.tap-marques .tap-sous { line-height: 1.35; }
.tap-plateforme { font-weight: 500; }
.tap-marque__synchro { display: flex; flex-wrap: wrap; gap: 0 8px; }
.tap-marque__synchro .lj-btn--texte { font-size: 12px; font-weight: 500; text-align: left; white-space: normal; }
.tap-marques__vide { padding: 24px 20px; }
.tap-marques .m-resultats .tap-unite { display: block; font-size: 12px; line-height: 1.3; }
.tap-etat { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.tap-marques .m-diffusion .tap-sous, .tap-marques .m-tendance { white-space: nowrap; }
.tap-etat svg { flex: none; }
.tap-etat--rien { color: var(--negatif); font-weight: 600; }
.tap-etat--partielle { color: #92400E; font-weight: 600; }
/* « Aucune campagne en cours » est plus long que les autres états : deux lignes au plus (« Aucune campagne » / « en cours »), le tiret
   aligné sur la première, jamais trois lignes d'un mot. */
.tap-etat--aucune { color: var(--gris-pale); white-space: normal; width: 150px; align-items: flex-start; }
.tap-etat--aucune svg { margin-top: 4px; }
.tap-courbe { display: block; }
.tap-courbe__aire { fill: var(--series-pale); }
.tap-courbe__ligne { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tap-courbe__fin { fill: var(--series); }
/* L'efficacité : une barre (plafonnée, repère à l'objectif), puis le chiffre et la position écrits. */
.tap-eff { display: flex; align-items: center; gap: 10px; }
.tap-eff__barre { flex: none; }
.tap-eff__piste { fill: #EFE7DA; }
.tap-eff__plein { fill: var(--series); }
.tap-eff__plein--hors { fill: var(--negatif); }
.tap-eff__repere { stroke: var(--encre); stroke-width: 2; }
.tap-eff__texte { display: flex; flex-direction: column; flex: none; width: 124px; line-height: 1.3; }
.tap-eff__texte small { font-size: 12px; color: var(--gris-pale); }
.tap-eff__texte strong { white-space: nowrap; }
.tap-eff__texte b { color: var(--negatif); font-weight: 700; }
.tap-delta .tap-mobile-seul { font-weight: 500; color: var(--gris); }
/* Les alertes d'une marque : les pastilles de gravité (icône, nombre, mot), l'une sous l'autre, mènent à sa liste d'alertes. */
.tap-alertes-marque { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; white-space: nowrap; }
/* Un compte que personne n'a relié : hachuré, en bas du tableau. */
.tap-non-relie, .lj-table tbody tr.tap-non-relie:hover { background: repeating-linear-gradient(-45deg, transparent 0 8px, #F4EFE7 8px 16px); }
.tap-relier { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
.tap-relier .lj-select { max-width: 220px; }
.tap-mention { margin: 0; padding: 12px 20px; border-top: 1px solid var(--filet); }
.tap-avis--filtre { margin: 0 20px 12px; }

@media (max-width: 640px) {
  .lj-segctl a { flex: none; height: 36px; }
  .tap-etat--aucune { width: auto; white-space: nowrap; align-items: center; }      /* une carte a la place : une seule ligne */
  .tap-etat--aucune svg { margin-top: 0; }
  .tap-focal__tete { padding: 14px 16px 12px; }
  .tap-focal__pied { padding: 12px 16px; }
  .tap-focal .tap-alerte { column-gap: 8px; }                   /* « Ouvrir dans le Gestionnaire » et « Veille » sur une même ligne à 375 px */
  .tap-eff__texte { width: auto; }
  /* Le tableau devient une carte par marque, dans l'ordre qui compte : nom et dépense, alertes, diffusion et tendance, résultats,
     efficacité. La mini-courbe est décorative : elle reste sur grand écran. */
  .tap-marques tbody tr { row-gap: 8px; }
  .tap-marques tbody td, .tap-marques tbody td:first-child, .tap-marques tbody td:last-child { white-space: normal; padding: 0; }
  .tap-marques tbody td.m-marque { order: 1; min-width: 0; }
  .tap-marques tbody td.m-depense { order: 2; text-align: right; }
  .tap-marques tbody td.m-alertes { order: 3; grid-column: 1 / -1; }
  .tap-marques tbody td.m-diffusion { order: 4; }
  .tap-marques tbody td.m-tendance { order: 5; text-align: right; font-size: 13px; }
  .tap-marques tbody td.m-resultats { order: 6; grid-column: 1 / -1; text-align: left; font-size: 13px; }
  .tap-marques tbody td.m-efficacite { order: 7; grid-column: 1 / -1; }
  .tap-marques tbody td.m-relier { order: 6; text-align: left; }
  .tap-marques .m-resultats .tap-unite { display: inline; font-size: inherit; }
  .tap-marques tbody td.m-alertes:has(.vide), .tap-marques tbody td.m-tendance:has(.vide),
  .tap-marques tbody td.m-resultats:has(.vide), .tap-marques tbody td.m-efficacite:has(.vide) { display: none; }
  .tap-marque__synchro .lj-btn--texte { display: none; }
  .tap-relier { justify-content: flex-start; }
  .tap-relier .lj-select { flex: 1 1 160px; max-width: none; font-size: 16px; height: 40px; }
  .tap-relier .lj-btn { height: 40px; }
  .tap-mention { padding: 12px 16px; }
  .tap-avis--filtre { margin: 0 16px 12px; }
}

/* ---------------- La fiche d'une marque : graphiques, arbre, données (tâche 8 ; spec §9.4) ---------------- */
/* Deux graphiques côte à côte (jamais un graphique à deux axes) : une seule série, `--series`. Le dessin est celui de graphiques.js ;
   le tableau voisin reste visible tant que le script n'a pas dessiné (il le cache). L'infobulle est un bloc sombre, texte blanc. */
.tap-grille--fiche { margin-top: 16px; }
/* Le rail de la fiche est un peu plus étroit que celui du Pilotage : les huit colonnes de l'arbre tiennent à 1440 px. */
@media (min-width: 1181px) { .tap-grille--fiche { grid-template-columns: minmax(0, 1fr) 320px; } }
.tap-graphes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tap-graphe { padding: 0 0 4px; display: flex; flex-direction: column; min-width: 0; }
.tap-graphe .tap-carte__tete { padding-bottom: 6px; }
.tap-graphe__legende { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0 20px 6px; font-size: 12px; color: var(--gris); }
.tap-graphe__cle { display: inline-flex; align-items: center; gap: 6px; }
.tap-graphe__cle i { flex: none; display: inline-block; }
.tap-graphe__cle--serie i { width: 16px; border-top: 2px solid var(--series); }
.tap-graphe__cle--objectif i { width: 16px; border-top: 2px dashed var(--gris); }
.tap-graphe__cle--hors i { width: 10px; height: 10px; border-radius: 50%; background: var(--haute); }
.tap-graphe__zone { position: relative; margin: 0 12px; touch-action: pan-y; }      /* sans script, aucune place n'est réservée au dessin */
.tap-graphe__zone svg { display: block; max-width: 100%; touch-action: pan-y; }
.tap-graphe__vide { margin: 0; padding: 12px 20px 20px; }
.tap-graphe__pied { padding: 2px 20px 8px; }
.tap-graphe__tableau { max-height: 280px; overflow: auto; border-top: 1px solid var(--filet); }
.tap-graphe__table thead th { position: sticky; top: 0; background: var(--feuille); padding-left: 20px; padding-right: 20px; }
.tap-graphe__table tbody th { font-weight: 500; text-align: left; padding: 8px 20px; border-bottom: 1px solid var(--filet); white-space: nowrap; }
.tap-graphe__table tbody td { padding: 8px 20px; }
.tap-graphe__infobulle { position: absolute; z-index: 5; pointer-events: none; min-width: 120px; max-width: 220px; padding: 8px 10px;
                         border-radius: 6px; background: var(--encre); color: #fff; font-size: 12px; line-height: 1.35; }
.tap-graphe__jour, .tap-graphe__note { color: rgba(255, 255, 255, .78); }
.tap-graphe__valeur { margin-top: 2px; font-size: 15px; font-weight: 600; }
.tap-graphe__note { margin-top: 2px; }
.tap-graphe__hors { margin-top: 4px; font-weight: 600; }
.tap-graphe__hors::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--haute); }

/* L'arbre campagne › ensemble › pub : une table dont chaque ligne porte son niveau (retrait), son statut en mots et ses chiffres.
   Une ligne atténuée (en pause, terminée, sans dépense) reste lisible : seules ses couleurs de texte changent (`--gris`, 7,0:1), jamais
   `opacity` sur du texte. Sous 640 px, une ligne devient deux : le nom et la dépense, puis le statut, les résultats et le coût. */
.tap-arbre-carte { min-width: 0; }
.tap-arbre__tout { margin-left: 8px; }
.tap-arbre { scroll-margin-top: 16px; }
.tap-arbre thead th { white-space: normal; vertical-align: bottom; padding-left: 8px; padding-right: 8px; }
.tap-arbre thead th:first-child, .tap-arbre tbody td:first-child { padding-left: 20px; }
.tap-arbre tbody td { padding: 8px; font-size: 13px; }
.tap-arbre tbody td.a-nom { min-width: 230px; }
.tap-arbre__nom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tap-arbre__ligne--ensemble .tap-arbre__nom { padding-left: 20px; }
.tap-arbre__ligne--pub .tap-arbre__nom { padding-left: 56px; }        /* la vignette sous le texte de l'ensemble */
.tap-arbre__bascule, .tap-arbre__vide, .tap-arbre__lien { flex: none; width: 28px; height: 28px; }
.tap-arbre__bascule, .tap-arbre__lien { display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--gris); cursor: pointer; }
.tap-arbre__bascule { color: var(--encre); }
.tap-arbre__bascule:hover, .tap-arbre__lien:hover { background: #F4EFE7; color: var(--encre); }
.tap-arbre__bascule:focus-visible { outline: 2px solid var(--bourgogne); outline-offset: 2px; }
.tap-arbre__bascule svg { transition: transform .12s ease; }
.tap-arbre__bascule[aria-expanded="true"] svg { transform: rotate(90deg); }
.tap-arbre__lien { margin-left: auto; }
.tap-arbre__vignette { flex: none; width: 40px; height: 40px; border-radius: 4px; object-fit: cover; background: var(--filet); }
.tap-arbre__texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.tap-arbre__alerte { color: var(--negatif); }
.tap-arbre--attenue td { color: var(--gris); }
.tap-arbre--attenue .tap-nom, .tap-arbre--attenue strong { color: var(--gris); font-weight: 500; }
.tap-arbre--attenue .tap-arbre__vignette { opacity: .6; }
.tap-arbre__vide-texte { margin: 0; padding: 12px 20px 20px; }

/* « Données » : une grille de définitions, le mot à gauche, la valeur à droite. */
.tap-donnees { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 10px 12px; margin: 0; padding: 4px 20px 16px; font-size: 13px; }
.tap-donnees dt { color: var(--gris); }
.tap-donnees dd { margin: 0; color: var(--encre); overflow-wrap: anywhere; }
.tap-donnees .tap-sous { margin-top: 2px; }
.tap-donnees__id { white-space: nowrap; font-weight: 600; }

@media (max-width: 640px) {
  .tap-titre__actions { flex-wrap: wrap; }                     /* trois boutons (vue client, Meta, synchro) ne tiennent pas sur une ligne à 375 px */
  .tap-graphes { grid-template-columns: minmax(0, 1fr); }
  .tap-graphe__legende, .tap-graphe__pied { padding-left: 16px; padding-right: 16px; }
  .tap-graphe__pied .lj-btn { min-height: 40px; }
  .tap-graphe__table thead th, .tap-graphe__table tbody th, .tap-graphe__table tbody td { padding-left: 16px; padding-right: 16px; }
  .tap-arbre thead { display: none; }
  .tap-arbre tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 10px 16px; border-bottom: 1px solid var(--filet); }
  .tap-arbre tbody td, .tap-arbre tbody td:first-child { display: block; padding: 0; border: 0; }
  .tap-arbre tbody td.tap-mobile-cache { display: none; }
  .tap-arbre tbody td.a-nom { order: 1; flex: 1 1 0; min-width: 0; }
  .tap-arbre tbody td.a-depense { order: 2; flex: none; }
  .tap-arbre tbody tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .tap-arbre tbody td.a-statut, .tap-arbre tbody td.a-resultats, .tap-arbre tbody td.a-cout { font-size: 13px; text-align: left; }
  .tap-arbre tbody td.a-statut { order: 4; }
  .tap-arbre tbody td.a-resultats { order: 5; }
  .tap-arbre tbody td.a-cout { order: 6; }
  .tap-arbre__bascule, .tap-arbre__vide, .tap-arbre__lien { width: 40px; height: 40px; min-height: 40px; }
  .tap-arbre__ligne--ensemble .tap-arbre__nom { padding-left: 14px; }
  .tap-arbre__ligne--pub .tap-arbre__nom { padding-left: 28px; }
  .tap-arbre__tout { min-height: 40px; }
  .tap-donnees { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); padding-left: 16px; padding-right: 16px; }
}