/* L'admin. Une seule feuille, pas de framework.

   Couleurs et composants repris de Kaptos Admin, qui les tenait de Tailwind.
   Ici c'est du CSS nu : meme rendu, sans npm ni etape de build.

   Les deux themes sont ecrits. Le sombre s'applique via .dark sur <html>,
   pose par socle.php d'apres users.preferred_theme. En 'auto', c'est le
   reglage du systeme qui decide. */

:root {
  --orange:       #FF4D00;
  --orange-survol:#E04400;

  /* L'orange plein dit « c'est l'action ». Le pale dit seulement « c'est
     celui-ci » : un onglet choisi, un raccourci actif. */
  --orange-pale:  #FFF0E8;
  --orange-bord:  #FFC7AB;
  --orange-texte: #B33600;

  --fond:   #F6F7FC;
  --carte:  #FFFFFF;
  --survol: #F5F5F5;
  --texte:  #0A0A0A;
  --doux:   #525252;
  --bord:   #E5E5E5;

  --zebre:  #FAFBFE;
  --entete: #EDEFF6;

  --vert:   #1a7f37;
  --rouge:  #cf222e;
  --ambre:  #9a6700;
}

html.dark {
  --orange-pale:  #3A2117;
  --orange-bord:  #6B3A22;
  --orange-texte: #FF9466;

  --fond:   #14161D;
  --carte:  #1B1E27;
  --survol: #252934;
  --texte:  #E8EAF0;
  --doux:   #949CAB;
  --bord:   #2B303C;

  --zebre:  #1F232C;
  --entete: #232834;

  --vert:   #3fb950;
  --rouge:  #f85149;
  --ambre:  #d29922;
}

@media (prefers-color-scheme: dark) {
  html.auto {
    --orange-pale:  #3A2117;
    --orange-bord:  #6B3A22;
    --orange-texte: #FF9466;

    --fond:   #14161D;
    --carte:  #1B1E27;
    --survol: #252934;
    --texte:  #E8EAF0;
    --doux:   #949CAB;
    --bord:   #2B303C;

    --zebre:  #1F232C;
    --entete: #232834;

    --vert:   #3fb950;
    --rouge:  #f85149;
    --ambre:  #d29922;
  }
  html.auto input[type=date], html.auto input[type=month],
  html.auto input[type=time], html.auto input[type=datetime-local],
  html.auto select {
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* L'orange de la marque au lieu du bleu du navigateur : cases, boutons radio,
   et le jour choisi dans le calendrier que Chrome ouvre lui-meme. */
:root { accent-color: var(--orange); }
input[type=checkbox], input[type=radio] { accent-color: var(--orange); }

/* Sur fond sombre, l'icone calendrier de Chrome est dessinee en sombre et
   devient invisible. Cette ligne dit au navigateur de tout redessiner : icone,
   fleches, et le panneau qui s'ouvre au clic. */
html.dark input[type=date], html.dark input[type=month],
html.dark input[type=time], html.dark input[type=datetime-local],
html.dark select {
  color-scheme: dark;
}


/* --- La barre laterale --- */

.cote {
  position: fixed;
  top: 0;
  left: 0;
  width: 232px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--carte);
  border-right: 1px solid var(--bord);
}

.cote .marque {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 18px;
  border-bottom: 1px solid var(--bord);
}
.cote .marque { color: var(--texte); }
.cote .marque:hover { text-decoration: none; }
.cote .marque svg { display: block; }

.cote nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--bord) transparent;
}

.cote nav::-webkit-scrollbar { width: 5px; }
.cote nav::-webkit-scrollbar-track { background: transparent; }
.cote nav::-webkit-scrollbar-thumb { background: var(--bord); border-radius: 20px; }
.cote nav::-webkit-scrollbar-thumb:hover { background: var(--doux); }

.cote .section {
  margin: 54px 0 10px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--doux);
}
.cote .section:first-child { margin-top: 10px; }

.cote nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--texte);
  white-space: nowrap;
}

.cote nav a svg { width: 18px; height: 18px; flex: none; }
.cote nav a span { overflow: hidden; text-overflow: ellipsis; }
.cote nav a:hover { background: var(--survol); text-decoration: none; }

.cote nav a.ici {
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  color: var(--orange);
  font-weight: 500;
}

.cote .compte {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--bord);
}

.pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.cote .qui { min-width: 0; }
.cote .qui strong { display: block; font-size: 13px; font-weight: 600; }
.cote .qui strong, .cote .qui a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cote .qui a { display: block; font-size: 12px; color: var(--doux); }
.cote .qui a:hover { color: var(--orange); }


/* --- Le corps --- */

.page { margin-left: 232px; padding: 28px 30px 60px; }
.page h1 { font-size: 22px; margin: 0 0 22px; letter-spacing: -.01em; }
.page h2 { font-size: 16px; margin: 30px 0 14px; }

@media (max-width: 860px) {
  .cote { position: static; width: auto; height: auto; border-right: 0; border-bottom: 1px solid var(--bord); }
  .cote nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .cote .section { width: 100%; }
  .page { margin-left: 0; padding: 22px 18px 50px; }

  /* Les tableaux poses a meme une carte de fiche (variants, livraison,
     contacts) poussaient toute la page vers la droite : ils defilent. */
  .bloc-form > table { display: block; overflow-x: auto; }
}

/* --- Les pages sans menu --- */

body.nue {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 24px;
}

.bloc { width: 100%; max-width: 385px; }

.bloc .marque {
  display: flex;
  justify-content: center;
  margin-bottom: 34px;
  color: var(--texte);
}

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 30px 28px;
}

.carte h1 { font-size: 18px; margin: 0 0 22px; text-align: center; }
.carte button { width: 100%; margin-top: 24px; }
.carte .liens { text-align: center; margin-top: 16px; }
.carte .aide { text-align: center; }

.pied {
  margin-top: 26px;
  text-align: center;
  font-size: 13px;
  color: var(--doux);
}
.pied a { color: var(--doux); }
.pied a:hover { color: var(--texte); }


/* --- Les formulaires --- */

label {
  display: block;
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 500;
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=month], input[type=url], input[type=search],
input[type=tel], input[type=datetime-local], select, textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  color: var(--texte);
  font: inherit;
}

html.dark input[type=text], html.dark input[type=email], html.dark input[type=password],
html.dark input[type=number], html.dark input[type=date], html.dark input[type=month],
html.dark input[type=url], html.dark input[type=search], html.dark input[type=tel],
html.dark input[type=datetime-local], html.dark select, html.dark textarea { background-color: var(--fond); }

/* La fleche native d'un select se colle au bord : elle ignore le rembourrage.
   On la remplace par la notre, posee a la meme distance que le texte. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px;
}

/* La liste deroulante est dessinee par le navigateur, hors de la page. Seules
   ses couleurs se posent d'ici : ni son rembourrage, ni ses arrondis, ni la
   teinte de la ligne survolee. */
select option { background: var(--carte); color: var(--texte); }
select option:checked { font-weight: 600; }

html.dark select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949CAB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

@media (prefers-color-scheme: dark) {
  html.auto select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949CAB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
}

input::placeholder, textarea::placeholder { color: var(--doux); }

/* Une zone de texte ne se tire que vers le bas : tiree sur le cote, elle
   debordait de sa carte. */
textarea { max-width: 100%; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
}


/* --- Les boutons, trois niveaux comme chez lui --- */

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}

button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

button, .btn-principal { background: var(--orange); color: #fff; }
button:hover, .btn-principal:hover { background: var(--orange-survol); text-decoration: none; }

.btn-second {
  background: var(--carte);
  border-color: var(--bord);
  color: var(--texte);
}
.btn-second:hover { background: var(--survol); text-decoration: none; }

.btn-discret { background: none; color: var(--texte); }
.btn-discret:hover { background: var(--survol); text-decoration: none; }

.aide { font-size: 13px; color: var(--doux); margin-top: 6px; }
.liens { margin-top: 18px; font-size: 14px; }


/* --- Les messages --- */

.message {
  margin: 0 0 16px;
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid;
}

.message.erreur { background: color-mix(in srgb, var(--rouge) 10%, transparent); border-color: color-mix(in srgb, var(--rouge) 40%, transparent); color: var(--rouge); }
.message.succes { background: color-mix(in srgb, var(--vert)  10%, transparent); border-color: color-mix(in srgb, var(--vert)  40%, transparent); color: var(--vert); }
/* Un etat normal dont il faut se souvenir, pas un avertissement : un compte
   de test n a rien fait de mal. Meme bleu que la pastille .etat.bleu. */
.message.neutre { background: rgba(76, 141, 255, .10); border-color: rgba(76, 141, 255, .35); color: var(--texte); }
.message.info   { background: color-mix(in srgb, var(--orange) 10%, transparent); border-color: color-mix(in srgb, var(--orange) 35%, transparent); color: var(--texte); }


/* --- Les tableaux --- */

.tableau {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
  /* Pas `hidden` : en mobile, les colonnes de droite etaient coupees et
     inaccessibles. `auto` arrondit les coins pareil, et defile si besoin. */
  overflow-x: auto;
  overflow-y: hidden;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--bord); }
tbody tr:last-child td { border-bottom: 0; }

thead th {
  background: var(--entete);
  color: var(--doux);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

thead th:first-child { border-top-left-radius: 12px; }
thead th:last-child  { border-top-right-radius: 12px; }

tbody tr:hover { background: var(--survol); }


/* --- Les vignettes de chiffres --- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.chiffre {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 16px 18px;
}

.chiffre .valeur { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.chiffre .titre { font-size: 12px; color: var(--doux); text-transform: uppercase; letter-spacing: .04em; }

/* Le second terme d'un rapport « parti sur calé » : present, mais il ne
   dispute pas la vedette au premier. */
.chiffre .valeur .sur {
  margin-left: 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--doux);
}


/* --- Les etiquettes de statut --- */

.etat {
  display: inline-block;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}

/* Une pastille qui porte une phrase (Facturation : « Ce mois est deja
   importe… ») revient a la ligne au lieu de sortir de l'ecran. */
p.etat { white-space: normal; border-radius: 12px; }

.etat.vert   { color: var(--vert);  border-color: color-mix(in srgb, var(--vert)  40%, transparent); }
.etat.rouge  { color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 40%, transparent); }
.etat.orange { color: var(--ambre); border-color: color-mix(in srgb, var(--ambre) 40%, transparent); }
.etat.gris   { color: var(--doux);  border-color: var(--bord); }


/* --- Quand il n'y a rien a montrer --- */

.vide {
  padding: 34px 20px;
  text-align: center;
  color: var(--doux);
  background: var(--carte);
  border: 1px dashed var(--bord);
  border-radius: 12px;
}
.vide span { font-size: 13px; }


/* --- Les filtres au-dessus d'un tableau --- */

.filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 20px;
  margin: 64px 0 14px;
}
.filtres label { margin: 0 0 4px; font-size: 12px; color: var(--doux); }
.filtres > div { flex: 0 0 auto; }
.filtres input, .filtres select { width: auto; min-width: 150px; }
.filtres button { margin-top: 0; }

/* Les dates se rangent a droite quand elles ne sont pas le sujet de la page. */
.filtres.a-droite { justify-content: flex-end; }

/* Les raccourcis poses sous les filtres, pas dans la barre du haut. */
.raccourcis.sous-filtres { display: flex; justify-content: flex-end; margin: 0 0 18px; }

/* Le + d'un bouton de creation, avant le mot. */
.gros-plus { font-size: 30px; font-weight: 600; line-height: 1; margin-top: -2px; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num form.cellule input { text-align: right; }
.doux { color: var(--doux); }


/* --- La jauge d'avancement --- */

.jauge {
  display: inline-block;
  width: 110px;
  height: 6px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--survol);
  border-radius: 20px;
  overflow: hidden;
}
.jauge span { display: block; height: 100%; background: var(--orange); }


/* --- Le menu replie : plus que les icones --- */

.cote .marque .reduit { display: none; }

.plier {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 11px 16px;
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px solid var(--bord);
  border-radius: 0;
  color: var(--doux);
  font-size: 13px;
}
.plier:hover { background: var(--survol); color: var(--texte); }
.plier svg { width: 18px; height: 18px; flex: none; transition: transform .15s; }

html.replie .cote { width: 62px; }
html.replie .page { margin-left: 62px; }

html.replie .cote .marque { justify-content: center; padding: 0; }
html.replie .cote .marque .entier { display: none; }
html.replie .cote .marque .reduit { display: block; }

html.replie .cote nav { padding: 10px 8px; }
html.replie .cote nav a { justify-content: center; padding: 9px 0; }
html.replie .cote nav a span { display: none; }

html.replie .cote .section {
  margin: 18px 0 6px;
  padding: 0;
  height: 1px;
  overflow: hidden;
  text-indent: -999px;
  background: var(--bord);
}
html.replie .cote .section:first-child { margin-top: 4px; }

html.replie .cote .compte { justify-content: center; padding: 14px 0; }
html.replie .cote .qui { display: none; }

html.replie .plier { justify-content: center; padding: 11px 0; }
html.replie .plier span { display: none; }
html.replie .plier svg { transform: rotate(180deg); }

@media (max-width: 860px) {
  html.replie .cote { width: auto; }
  html.replie .page { margin-left: 0; }
  .plier { display: none; }
}

/* --- La barre du haut de page --- */

/* Le titre de la page n est pas repete ici : il est deja surligne dans le
   menu. Cette barre ne porte que les outils, cales a droite. */
.haut {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: 20px;
}

.outils { display: flex; align-items: center; gap: 8px; }
.outils form { display: flex; }

.rond {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  background: none;
  border: 1px solid var(--bord);
  border-radius: 9px;
  color: var(--doux);
  cursor: pointer;
}
.rond:hover { background: var(--survol); color: var(--texte); text-decoration: none; }
.rond svg { width: 18px; height: 18px; }

.pastille-nombre {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--orange);
  border-radius: 20px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}


/* --- Le volet du profil, en bas du menu --- */

.cote .compte { position: relative; display: block; padding: 10px; }

.moi {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 7px 8px;
  background: none;
  border: 0;
  border-radius: 9px;
  color: var(--texte);
  text-align: left;
}
.moi:hover { background: var(--survol); }

.moi .qui { min-width: 0; }
.moi .qui strong { display: block; font-size: 13px; font-weight: 600; }
.moi .qui span { display: block; font-size: 12px; color: var(--doux); }
.moi .qui strong, .moi .qui span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.volet {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% - 4px);
  padding: 5px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.volet a {
  display: block;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--texte);
}
.volet a:hover { background: var(--survol); text-decoration: none; }

html.replie .cote .compte { padding: 10px 8px; }
html.replie .moi { justify-content: center; padding: 7px 0; }
html.replie .volet { left: 8px; right: auto; width: 180px; }


/* --- Deux blocs de formulaire cote a cote --- */

.colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-bottom: 10px;
}

.bloc-form {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 20px 22px;
}
.bloc-form h2 { margin: 0 0 6px; font-size: 15px; }
.etat.bleu { color: #4c8dff; border-color: rgba(76, 141, 255, .4); }


/* --- Les pastilles de filtre par statut --- */

.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.pastilles a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 20px;
  font-size: 13px;
  color: var(--texte);
}
.pastilles a:hover { background: var(--survol); text-decoration: none; }
.pastilles a.ici { background: var(--orange-pale); border-color: var(--orange-bord); color: var(--orange-texte); }
.pastilles a span { font-size: 11px; font-weight: 700; opacity: .65; }


/* --- Le panneau des colonnes --- */

.panneau {
  margin-bottom: 18px;
  padding: 18px 20px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
}

.panneau .groupes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
}

.panneau .section {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--doux);
}

.panneau .boutons { display: flex; gap: 8px; justify-content: flex-end; }
.panneau .boutons button { margin-top: 16px; }


/* --- Un tableau large, qui defile tout seul --- */

.tableau.defile {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bord) transparent;
}

.tableau.defile::-webkit-scrollbar { height: 8px; }
.tableau.defile::-webkit-scrollbar-track { background: transparent; }
.tableau.defile::-webkit-scrollbar-thumb { background: var(--bord); border-radius: 20px; }
.tableau.defile::-webkit-scrollbar-thumb:hover { background: var(--doux); }

/* Statut et Campagne restent a l'ecran quand le tableau part a droite. La
   premiere a une largeur fixe : c'est elle qui dit ou commence la seconde. */
.tableau.defile th.col-status,
.tableau.defile td.col-status {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 110px;
  min-width: 110px;
}

.tableau.defile th.col-campagne,
.tableau.defile td.col-campagne {
  position: sticky;
  left: 110px;
  z-index: 2;
  box-shadow: inset -1px 0 var(--bord);
}

/* Une cellule collee doit etre opaque, sinon le tableau defile par-dessous. */
.tableau.defile tbody td.col-status,
.tableau.defile tbody td.col-campagne,
.tableau.defile tfoot td.col-status,
.tableau.defile tfoot td.col-campagne { background: var(--carte); }

.tableau.defile tbody tr:nth-child(even) td.col-status,
.tableau.defile tbody tr:nth-child(even) td.col-campagne { background: var(--zebre); }

.tableau.defile tbody tr:hover td.col-status,
.tableau.defile tbody tr:hover td.col-campagne { background: var(--survol); }

/* Les titres passent devant les cellules collees. */
.tableau.defile thead th.col-status,
.tableau.defile thead th.col-campagne { z-index: 3; background: var(--entete); }

table.serre { font-size: 13px; }
table.serre th, table.serre td { padding: 7px 10px; white-space: nowrap; }

tfoot td {
  border-top: 2px solid var(--doux);
  border-bottom: 0;
  font-weight: 600;
}

.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; }

.coupe {
  display: inline-block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.btn.petit { margin: 0; padding: 4px 10px; font-size: 12px; }


/* --- La fiche d'un shoot --- */

.fiche-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.fiche-tete h2 { margin: 0 0 4px; font-size: 20px; }
.fiche-tete .aide { margin: 0; }

.fil { margin: 0 0 6px; font-size: 12px; color: var(--doux); }

/* Le retour d'une page de travail : un bouton secondaire, cale a droite. */
.retour { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 18px; }
.retour .btn { margin-top: 0; }

.actions-tete { display: flex; align-items: center; gap: 8px; }
.actions-tete form { display: flex; }
.actions-tete button { margin-top: 0; }

.pile { display: flex; flex-direction: column; gap: 18px; }

.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deux label { margin-top: 14px; }

.bloc-form hr { margin: 18px 0; border: 0; border-top: 1px solid var(--bord); }
.bloc-form .boutons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bloc-form .boutons form { display: flex; }
.bloc-form .filtres { margin-bottom: 0; }

table.petite { font-size: 13px; }
table.petite td { padding: 6px 8px; }
table.petite td:first-child { color: var(--doux); white-space: nowrap; }

.apercu {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  background: #fff;
}

.coupe-non { word-break: break-all; }


/* --- Le tableau des webservices ---

   `break-all` autorise la coupure a n'importe quelle lettre. Le navigateur en
   deduit que la colonne peut tenir sur un caractere de large, et lui donne
   cette largeur-la : l'adresse partait en colonne d'une lettre. `anywhere` ne
   coupe que si la place manque vraiment, et le min-width garantit la place. */

.webservices .col-nom  { min-width: 210px; }
.webservices .col-etat { min-width: 190px; }

.webservices .col-vers {
  min-width: 330px;
  word-break: normal;
  overflow-wrap: anywhere;
}


.titre-pastilles {
  align-self: center;
  margin-right: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--doux);
}

.pastilles a.effacer { border-style: dashed; color: var(--doux); }



/* --- La validation du BAT, sur la fiche d'un shoot --- */

.bat-urgent {
  margin-bottom: 22px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--orange) 7%, var(--carte));
  border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
  border-radius: 12px;
}

.bat-duo { display: flex; gap: 10px; width: 100%; }
.bat-duo > form { display: flex; }

.bat-saisie { flex: 1; display: flex; gap: 10px; align-items: stretch; }

.bat-saisie input[type=url] {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  font-size: 15px;
  border-radius: 10px;
}

.bat-saisie button, .bat-duo .btn-second {
  margin-top: 0;
  height: 46px;
  border-radius: 10px;
  white-space: nowrap;
}


/* --- Retrouver un shoot a partir d'une URL de tracking --- */

.cherche-url {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 0;
}

.cherche-url > form { display: flex; flex: 1; gap: 10px; min-width: 0; }
.cherche-url > form:last-child, .cherche-url > form + form { flex: 0 0 auto; }

/* Le bouton Valider ne s allume que si un seul shoot reste a l ecran. */
.cherche-url .valide { background: var(--vert); min-width: 160px; justify-content: center; }
.cherche-url .valide:hover { background: var(--vert); filter: brightness(1.12); }
.cherche-url .valide:disabled {
  background: var(--survol);
  border: 1px solid var(--bord);
  color: var(--doux);
  cursor: not-allowed;
  filter: none;
}

.cherche-url input[type=url] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  font-size: 15px;
  border-radius: 10px;
}

.cherche-url button {
  flex: 0 0 auto;
  margin-top: 0;
  height: 46px;
  border-radius: 10px;
  white-space: nowrap;
}

.lus-url {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: -4px 0 16px;
}


/* --- Les cellules qu'on modifie en cliquant dessus --- */

td.modifiable { padding: 0; }

form.cellule { margin: 0; }

form.cellule input {
  width: 100%;
  height: 100%;
  min-height: 34px;
  padding: 6px 10px;
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  color: inherit;
  font: inherit;
  font-size: 13px;
}

form.cellule input:hover {
  background: var(--survol);
  border-color: var(--bord);
  cursor: text;
}

form.cellule input:focus {
  background: var(--carte);
  border-color: var(--orange);
  box-shadow: inset 0 0 0 1px var(--orange);
}

/* Le petit calendrier et les fleches n'apparaissent qu'au survol. */
form.cellule input::-webkit-calendar-picker-indicator,
form.cellule input::-webkit-inner-spin-button { opacity: 0; }
form.cellule input:hover::-webkit-calendar-picker-indicator,
form.cellule input:focus::-webkit-calendar-picker-indicator { opacity: .5; }

/* Une date vide. Le navigateur dessine « jj/mm/aaaa » dans un input date sans
   valeur, et toute une colonne de ces gabarits se lit comme des dates alors
   qu'il n'y en a aucune. On rend ce texte transparent et on pose le meme tiret
   que les cellules non modifiables.

   Au survol et a la saisie, le gabarit revient : sans lui on ne saurait plus
   dans quel ordre taper le jour et le mois. Le tiret s'efface alors, sinon les
   deux se superposeraient.

   `aria-hidden` sur le tiret : c'est un decor. Les lecteurs d'ecran annoncent
   le champ date, qui est vide, ce qui est deja l'information. */
form.cellule-vide { position: relative; }

form.cellule-vide input { color: transparent; }
form.cellule-vide input:hover,
form.cellule-vide input:focus { color: inherit; }

form.cellule-vide .rien {
  position: absolute;
  left: 7px;               /* le rembourrage des colonnes de date, 6px, + 1px de bord */
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;         /* la meme que form.cellule input */
  color: var(--doux);
  pointer-events: none;
}

form.cellule-vide input:hover ~ .rien,
form.cellule-vide input:focus ~ .rien { display: none; }


/* --- Le bouton vert, et les actions en bout de ligne --- */


.rond.petit { width: 26px; height: 26px; border-radius: 7px; }
.rond.petit svg { width: 14px; height: 14px; }


td.actions { padding: 0 8px; vertical-align: middle; width: 1%; }

.actions-ligne {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: flex-end;
}
.actions-ligne form { display: flex; margin: 0; }

/* Items 128 et 129, la liste des affilies : la societe sous le nom, et les
   boutons de ligne, Bloquer en rouge parce qu'il coupe tout. */
.sous-nom { font-size: 12px; }
.actions-ligne .btn.petit { white-space: nowrap; margin-left: 4px; }
.btn.danger { color: var(--rouge); }

/* Un bouton qui se lit comme un lien : le geste est rare, il n'a pas besoin
   d'un cadre qui attire l oeil sur chaque ligne. */
.lien-action {
  margin: 0;
  padding: 3px 6px;
  background: none;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  color: var(--doux);
  cursor: pointer;
  white-space: nowrap;
}

.lien-action:hover { background: var(--survol); color: var(--texte); }

/* Deux croix, sans cadre : grise on previent l affilie, rouge on ne previent pas. */
.croix {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 7px;
  color: var(--doux);
  cursor: pointer;
}
.croix svg { width: 15px; height: 15px; }
.croix:hover { background: var(--survol); color: var(--texte); }
.croix.rouge { color: var(--rouge); }
.croix.grise { opacity: .35; cursor: not-allowed; }
.croix.grise:hover { background: none; color: inherit; }
.croix.rouge:hover { background: color-mix(in srgb, var(--rouge) 14%, transparent); color: var(--rouge); }


/* --- Filtrer en cliquant sur le titre d'une colonne --- */

th.filtrable { padding: 0; position: relative; }

/* Un seul interrupteur a deux positions, pas deux boutons. */
.bascule-vue {
  display: inline-flex;
  padding: 3px;
  background: var(--survol);
  border: 1px solid var(--bord);
  border-radius: 999px;
}

.bascule-vue a {
  padding: 6px 16px;
  border-radius: 999px;
  color: var(--doux);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.bascule-vue a:hover { color: var(--texte); text-decoration: none; }
.bascule-vue a.ici {
  background: var(--orange-pale);
  color: var(--orange-texte);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}

/* La fleche de tri, a droite du titre de colonne. */
.tri {
  display: inline-flex;
  align-items: center;
  margin-left: 3px;
  color: var(--doux);
  vertical-align: middle;
  opacity: .5;
}
.tri svg { display: block; width: 13px; height: 13px; }
.tri:hover { opacity: 1; }
.tri.ici { color: var(--orange); opacity: 1; }

/* Une colonne filtrable range sa fleche apres son menu, sans casser la
   cellule : c'est le bloc dedans qui s'aligne, pas le `th`. */
th.filtrable.avec-tri { padding-right: 8px; }
th.filtrable.avec-tri .tete-colonne { display: flex; align-items: center; gap: 4px; }
th.filtrable.avec-tri .tete-colonne details { flex: 1; min-width: 0; }

/* Une colonne d'identifiant tient en quatre chiffres. */
th.filtrable.num { width: 1%; }
th.filtrable.num summary { justify-content: flex-end; }

th.filtrable details { position: relative; }

th.filtrable summary {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
th.filtrable summary::-webkit-details-marker { display: none; }
th.filtrable summary:hover { background: var(--survol); color: var(--texte); }
th.filtrable summary svg { width: 12px; height: 12px; opacity: .55; }

th.filtrable details[open] summary { background: var(--survol); color: var(--texte); }
th.filtrable details.actif summary { color: var(--orange); }

th.filtrable .compte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--orange);
  border-radius: 20px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.volet-filtre {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  min-width: 230px;
  max-width: 320px;
  padding: 10px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* La tete du menu : le titre, et la bascule qui dit si on garde ou si on ecarte. */
.volet-filtre .volet-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 0 2px 8px;
  font-size: 12px;
}

.volet-filtre .bascule {
  padding: 3px 9px;
  border: 1px solid var(--bord);
  border-radius: 20px;
  color: var(--texte);
  font-size: 12px;
  white-space: nowrap;
}

.volet-filtre .bascule:hover { background: var(--survol); text-decoration: none; }

.volet-filtre .bascule.non {
  background: color-mix(in srgb, var(--ambre) 16%, transparent);
  border-color: color-mix(in srgb, var(--ambre) 45%, transparent);
  color: var(--ambre);
}

.volet-filtre .liste { max-height: 280px; overflow-y: auto; scrollbar-width: thin; }

/* Le champ de recherche prend la place du trait sous « est / n'est pas ». */
.volet-filtre .cherche-filtre {
  width: 100%;
  margin: 0 0 6px;
  padding: 7px 9px;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 7px;
  color: var(--texte);
  font: inherit;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
.volet-filtre .cherche-filtre:focus { border-color: var(--orange); outline: none; }

.volet-filtre .coche {
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--texte);
  white-space: normal;
}
.volet-filtre .coche:hover { background: var(--survol); }
.volet-filtre .coche span:first-of-type { flex: 1; }

.volet-filtre .boutons {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bord);
}
.volet-filtre .boutons button { margin-top: 0; }


/* --- Une ligne sur deux, pour suivre du regard --- */

tbody tr:nth-child(even) { background: var(--zebre); }

/* Une ligne qu'il faut traiter maintenant. Le fond reste léger : c'est le
   texte qu'on lit, pas la couleur. */
tbody tr.urgent { background: color-mix(in srgb, var(--rouge) 10%, transparent); }
tbody tr.urgent td:first-child { color: var(--rouge); font-weight: 600; }
tbody tr:hover { background: var(--survol); }

/* Une cellule modifiable n'a pas de fond a elle : elle laisse voir celui de
   sa ligne, sinon l'alternance se casse. */
form.cellule input { background: transparent; }




/* --- Le menu des filtres de colonne --- */

.volet-filtre .liste { padding: 4px; }

.volet-filtre .option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 400;
  color: var(--texte);
  text-transform: none;
  letter-spacing: 0;
}
.volet-filtre .option:hover { background: var(--survol); text-decoration: none; }
.volet-filtre .option[hidden] { display: none; }
.volet-filtre .option.pris {
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  color: var(--orange);
  font-weight: 600;
}
.volet-filtre .option.pris .doux { color: var(--orange); opacity: .7; }

.volet-filtre .option .nom { flex: 1; }
.volet-filtre .option .doux { font-size: 11px; }

.volet-filtre .tout-effacer {
  display: block;
  margin: 4px;
  padding: 7px 9px;
  border-top: 1px solid var(--bord);
  border-radius: 0 0 7px 7px;
  font-size: 12px;
  font-weight: 400;
  color: var(--doux);
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}
.volet-filtre .tout-effacer:hover { color: var(--rouge); text-decoration: none; }


/* --- Le menu du statut --- */

details.statut-menu { display: inline-block; }

details.statut-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
details.statut-menu summary::-webkit-details-marker { display: none; }
details.statut-menu summary:hover { filter: brightness(1.12); }
details.statut-menu summary svg { width: 11px; height: 11px; opacity: .8; }

.volet-statut {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  min-width: 170px;
  padding: 0;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.volet-statut button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}
.volet-statut button:first-child { border-radius: 9px 9px 0 0; }
.volet-statut button:last-child  { border-radius: 0 0 9px 9px; }
.volet-statut button:hover { background: var(--survol); }
.volet-statut button.pris { background: var(--survol); font-weight: 700; }

/* --- Des largeurs qui laissent tout lire --- */

/* La source et les volumes ne doivent jamais etre coupes : ce sont eux qu on
   recopie dans un fichier de leads ou dans un devis. */
td.col-src, th.col-src { min-width: 140px; }
td.col-volume, th.col-volume { min-width: 100px; }
/* Une date tient en jj/mm/aaaa : le champ se serre autour, sans le rembourrage
   des autres cellules. */
td.col-scheduled_at, th.col-scheduled_at,
td.col-fin_lissage, th.col-fin_lissage { min-width: 0; width: 1%; }

td.col-scheduled_at form.cellule input,
td.col-fin_lissage form.cellule input { padding-left: 6px; padding-right: 2px; }
td.col-cap_leads, th.col-cap_leads { min-width: 80px; }
td.col-admin_notes, th.col-admin_notes { min-width: 220px; }

form.cellule input { text-overflow: ellipsis; }

/* Les fleches des champs numeriques mangeaient la place du chiffre. */
form.cellule input[type=number] { -moz-appearance: textfield; }
form.cellule input[type=number]::-webkit-outer-spin-button,
form.cellule input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


/* Le tableau garde ses titres meme quand rien ne sort : sinon on ne peut
   plus defaire le filtre qui a tout cache. */
.tableau-vide td { padding: 34px 20px; text-align: center; color: var(--doux); }
.tableau-vide td a { margin-left: 8px; }


/* --- Le panneau des colonnes : meme forme que les filtres du tableau --- */

.panneau .option {
  display: flex;
  align-items: center;
  margin: 0 0 2px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 400;
  color: var(--texte);
  cursor: pointer;
}

/* La case reste la pour l'envoi du formulaire, mais on ne la voit plus : c'est
   le fond qui dit ce qui est pris, comme dans les filtres. */
.panneau .option input { position: absolute; opacity: 0; pointer-events: none; }

.panneau .option:hover { background: var(--survol); }

.panneau .option:has(input:checked) {
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  color: var(--orange);
  font-weight: 600;
}

.panneau .option.toujours { cursor: default; opacity: .75; }
.panneau .option.toujours:hover { background: color-mix(in srgb, var(--orange) 14%, transparent); }


/* --- Les raccourcis au-dessus des vignettes --- */

.barre-raccourcis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 64px;
}

.barre-raccourcis .outils { display: flex; gap: 10px; align-items: center; }
.barre-raccourcis.a-droite { justify-content: flex-end; }
.barre-raccourcis.a-droite .raccourcis,
.barre-raccourcis.a-droite .outils { justify-content: flex-end; }
.barre-raccourcis .btn { margin-top: 0; }

/* Les vignettes se posent sur le tableau. */
.chiffres.colle { margin-bottom: 8px; }


/* --- Chercher dans une liste --- */

/* Le select natif reste la, c'est lui qu'on envoie. Il ne dessine plus rien :
   en theme sombre on voyait son fond et sa fleche derriere le champ. */
.cherchable { position: relative; }

.cherchable-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: none;
  background-image: none;
}

/* Posee en position fixe, et placee par le script : la grille defile
   horizontalement, donc une liste en absolu y serait rognee. */
.cherchable-liste {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  max-height: 260px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  scrollbar-width: thin;
}

.cherchable-liste li {
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}

.cherchable-liste li.sur { background: var(--survol); }
.cherchable-liste li.muette { color: var(--doux); cursor: default; }
.cherchable-liste li.pris { color: var(--orange); font-weight: 600; }


/* --- La grille de creation des shoots --- */

/* Les champs de la grille sont ceux de n'importe quel formulaire. Seule leur
   largeur change, colonne par colonne. */
.grille {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bord) transparent;
}

.grille::-webkit-scrollbar { height: 8px; }
.grille::-webkit-scrollbar-track { background: transparent; }
.grille::-webkit-scrollbar-thumb { background: var(--bord); border-radius: 20px; }

.grille table { width: auto; }
.grille td { padding: 0 6px 10px 0; border-bottom: 0; }
.grille tbody tr:hover { background: none; }

.grille td select,
.grille td input { width: 100%; min-width: 0; }
.grille td .cherchable { width: 100%; }

.grille td:has([data-f=campagne]),
.grille td:has([data-f=variant]),
.grille td:has([data-f=creative]),
.grille td:has([data-f=base]) { min-width: 150px; }

/* Un nom trop long se coupe proprement : la liste, elle, l'affiche en entier. */
.cherchable-champ { padding-right: 34px; text-overflow: ellipsis; }

/* La fleche est un vrai element, pas une image de fond : posee en fond elle se
   faisait remettre a zero par une regle en amont et se repetait en mosaique.
   En SVG elle suit la couleur du texte, donc le theme, sans dupliquer l'icone. */
.cherchable-fleche {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  color: var(--doux);
  pointer-events: none;
}

.grille [data-jour] { min-width: 150px; }
.grille [inputmode=numeric] { min-width: 88px; text-align: right; }
.grille [data-f=admin_notes] { min-width: 170px; }
.grille [data-c=source] { white-space: nowrap; }

/* Fenetre etroite : la source et l estimation ne se laissent plus ecraser.
   Un mot par ligne se lisait mal, « 4x » a la place de la source aussi. La
   grille defile en largeur, c est son role. */
.grille [data-f=src] { min-width: 120px; }
.grille [data-c=estimation] { white-space: nowrap; min-width: 130px; }

.pied-grille { display: flex; justify-content: flex-end; }

.pied-grille .btn { margin-top: 0; }

#salve .boutons { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Ce qui cloche se lit sous la ligne, et le champ en cause est rempli, pas
   seulement souligne : une bordure de couleur ne se voit pas sur fond sombre. */
.grille tr.avis td { padding: 0 6px 12px; }
.grille tr.avis p { margin: 0; font-size: 13px; }
.grille tr.avis:hover td { background: none; }

.grille .avis-nps  { color: var(--orange); font-weight: 600; }
.grille .avis-passe { color: var(--orange); font-weight: 600; }
.grille .avis-jour  { color: var(--ambre); }
.grille .avis-neuf  { color: var(--ambre); }

.grille .interdite input,
.grille .interdite select,
.grille input.interdite {
  background-color: color-mix(in srgb, var(--orange) 62%, #000);
  border-color: color-mix(in srgb, var(--orange) 80%, #000);
  color: #fff;
  font-weight: 600;
}

.grille .interdite .cherchable-fleche { color: #fff; }
.grille .interdite input::placeholder { color: color-mix(in srgb, #fff 75%, transparent); }

/* Item 72 : une case obligatoire encore vide sur une ligne commencee. Un
   simple liseré : la case n est pas fautive, elle attend. */
.grille .requis input,
.grille .requis select,
.grille input.requis {
  border-color: var(--rouge);
  box-shadow: 0 0 0 1px var(--rouge);
}
.grille .pret { color: var(--vert); font-weight: 600; }

.grille .douteuse input,
.grille input.douteuse {
  background-color: color-mix(in srgb, var(--ambre) 22%, var(--carte));
  border-color: var(--ambre);
  color: var(--ambre);
  font-weight: 600;
}


/* Forcer est un geste rare et regrettable. La case se pose sous le message qui
   l'explique, pas en bas de page a cote des boutons : personne n'irait la
   chercher a l'autre bout de l'ecran. */
.forcage {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  padding: 10px 13px;
  background: color-mix(in srgb, var(--rouge) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--rouge) 40%, transparent);
  border-radius: 8px;
  font-size: 14px;
  color: var(--rouge);
  cursor: pointer;
}

.forcage input { flex: none; margin: 0; }

/* `display: flex` bat la regle du navigateur pour l'attribut hidden : sans
   cette ligne, la case reste a l'ecran alors qu'on la cache. */
.forcage[hidden] { display: none; }
#salve .boutons .btn { margin-top: 0; }


/* --- Une barre de liste : ce qui filtre a gauche, le bouton a droite --- */

.barre-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 18px;
}

.barre-outils .btn { margin-top: 0; }
/* Dans une barre d outils les boutons sont en taille normale : les 2px de
   `.actions-ligne`, tailles pour des boutons de ligne, les collent. */
.barre-outils .actions-ligne { gap: 10px; }
.barre-outils .filtres { margin: 0; }


/* --- Les periodes toutes pretes --- */

.raccourcis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.raccourcis a {
  padding: 10px 16px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--texte);
  white-space: nowrap;
}
.raccourcis a:hover { background: var(--survol); text-decoration: none; }

.raccourcis a.ici {
  background: var(--orange-pale);
  border-color: var(--orange-bord);
  color: var(--orange-texte);
}


/* --- Les couleurs des statuts, thème par thème --- */

:root {
  --st-scheduled: #6b7280;   /* gris, rien n'est engage */
  --st-kit_sent:  #ea580c;   /* orange, le kit est parti et j'attends */
  --st-completed: #15803d;   /* vert, c'est fait */
  --st-to_verify: #111827;   /* noir, quelque chose cloche */
  --st-texte:     #fff;      /* la couleur du texte sur ces fonds */
}

/* En sombre, le noir de "A verifier" disparaitrait sur le fond. On l'inverse :
   pastille claire, texte sombre. Les trois autres sont juste eclaircis. */
html.dark {
  --st-scheduled: #9099a8;
  --st-kit_sent:  #f9741f;
  --st-completed: #3fb950;
  --st-to_verify: #e8eaf0;
}

@media (prefers-color-scheme: dark) {
  html.auto {
    --st-scheduled: #9099a8;
    --st-kit_sent:  #f9741f;
    --st-completed: #3fb950;
    --st-to_verify: #e8eaf0;
  }
  html.auto .st-to_verify.plein, html.auto summary.st-to_verify { color: #14161d; }
}

.st-scheduled.plein, summary.st-scheduled { background: var(--st-scheduled); }
.st-kit_sent.plein,  summary.st-kit_sent  { background: var(--st-kit_sent); }
.st-completed.plein, summary.st-completed { background: var(--st-completed); }
.st-to_verify.plein, summary.st-to_verify { background: var(--st-to_verify); }

html.dark .st-to_verify.plein, html.dark summary.st-to_verify { color: #14161d; }

/* Dans le menu deroulant, c'est le texte qui porte la couleur. */
.volet-statut .st-scheduled { color: var(--st-scheduled); }
.volet-statut .st-kit_sent  { color: var(--st-kit_sent); }
.volet-statut .st-completed { color: var(--st-completed); }
.volet-statut .st-to_verify { color: var(--st-to_verify); }


/* --- Une fiche seule, qui ne s'etire pas sur toute la largeur --- */

/* Un lien dans un tableau : la couleur du texte, souligne au survol. */
a.sobre { color: var(--texte); }

.fiche { max-width: 560px; }

/* La fiche a gauche, ce qu'elle contient a droite : les variants d'une
   campagne se lisent en meme temps qu'on la modifie. */
.fiche-et-cote {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
@media (max-width: 1100px) {
  .fiche-et-cote { grid-template-columns: minmax(0, 1fr); }
}

/* Un bloc trop large pour une colonne, comme la livraison des leads d une
   campagne (item 89) : il prend les deux, et defile s il le faut. */
.fiche-et-cote > .pleine-largeur { grid-column: 1 / -1; overflow-x: auto; }

/* L'URL de la landing page, hors des cartes et sur toute la largeur de la
   page : c'est le champ le plus long d'une fiche de variant, et dans la colonne
   de 480 px on n'en lisait qu'un bout. Posee avant .fiche-et-cote, donc hors de
   sa grille. Cadre visible en permanence, contrairement aux .vif des cartes :
   seule sur la page, elle n'a pas de voisines qui disent qu'on peut la
   modifier. */
.bloc-url {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 12px 22px;
  margin-bottom: 18px;
}
.bloc-url form.vif { margin: 0; }
.bloc-url form.vif input[type=text] {
  border-color: var(--bord);
  background: var(--fond);
}

.tete-bloc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.tete-bloc h2 { margin: 0; }
.tete-bloc .filtres { margin: 0; }
.tete-bloc .filtres { align-items: center; }
.tete-bloc .filtres select { min-width: 140px; }

/* `.actions-tete button` annulait la marge haute des boutons, mais un lien
   `.btn` n'est pas un `button` : il gardait ses 20 px et tombait plus bas que
   le select d'a cote. */
.actions-tete .btn { margin-top: 0; }

/* Un champ qui s'edite au clic, hors tableau : meme geste que les cellules de
   la Diffusion, mais a la forme d'un champ de fiche. Il ne montre son cadre
   qu'au survol, pour qu'on voie qu'il se touche sans que la fiche ressemble a
   un formulaire vide. */
/* Le libelle a gauche, la valeur a droite : une fiche se lit en diagonale,
   pas en empilant deux lignes par champ. */
form.vif {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 1px;
}
form.vif input[type=text], form.vif select { padding: 6px 12px; }
form.vif textarea { padding: 7px 12px; }
form.vif > label { margin: 0; color: var(--doux); }
form.vif > label.case { grid-column: 1 / -1; color: var(--texte); }

/* Un champ qui ne se modifie pas : l'ID d'un variant, qui vit dans le snippet
   pose sur la landing page. Meme alignement que les autres, sans cadre. */
.vif.fige {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 1px;
}
.vif.fige label { margin: 0; color: var(--doux); }
/* Meme rembourrage que les champs d'a cote, sinon la valeur ne demarre pas
   sur la meme verticale. */
.vif.fige span { padding: 6px 12px; }

/* Une note fait plusieurs lignes : son libelle se cale en haut. */
form.vif:has(textarea) { align-items: start; }
form.vif:has(textarea) > label { padding-top: 8px; }

/* Un titre de groupe : il remplace le trait, et dit ce que le groupe contient. */
.bloc-form h3 + form.vif, .bloc-form h3 + .vif { margin-top: 0; }
form.vif + h3, .vif.fige + h3, .coches + h3 { margin-top: 18px; }
form.vif input[type=text], form.vif select, form.vif textarea {
  border-color: transparent;
  background: none;
}
form.vif input[type=text]:hover, form.vif select:hover, form.vif textarea:hover {
  background: var(--survol);
  border-color: var(--bord);
  cursor: text;
}
form.vif select:hover { cursor: pointer; }
form.vif input[type=text]:focus, form.vif select:focus, form.vif textarea:focus {
  background: var(--carte);
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
}
html.dark form.vif input[type=text]:focus,
html.dark form.vif select:focus,
html.dark form.vif textarea:focus { background-color: var(--fond); }

/* --- Le NPS d'une campagne --- */

.tete-bloc .doux { font-size: 13px; }
.bloc-form h3 { margin: 0 0 8px; font-size: 13px; color: var(--doux); font-weight: 600; }

ul.nps { list-style: none; margin: 0 0 10px; padding: 0; }
/* Un NPS est une interdiction : il se voit en rouge, sur toutes les fiches
   qui le montrent. Demande de Chris le 22/09/2026. */
ul.nps li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding: 6px 6px 6px 10px;
  font-size: 13px;
  color: var(--rouge);
  font-weight: 600;
  background: color-mix(in srgb, var(--rouge) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--rouge) 35%, transparent);
  border-left-width: 4px;
  border-radius: 6px;
}
ul.nps li > span::before { content: "Interdit · "; font-weight: 400; opacity: .8; }
ul.nps form { margin: 0; display: flex; }

/* Les deux listes d'abord, les deux ajouts ensuite : on vient lire qui est
   interdit, on ajoute rarement. */
.ajouts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ajouts form { margin: 0; }
.ajouts select { width: auto; min-width: 220px; }

/* Une fois greffe, c'est la boite qui porte la largeur : le select d'origine
   est masque et le champ de saisie prend 100 % d'elle. */
.ajouts .cherchable { width: 220px; }

/* --- Les jours de diffusion d'une campagne --- */

.jours { display: flex; gap: 6px; margin: 0; padding: 10px 12px 10px 0; }

.jours .jour {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  color: var(--texte);
  font-size: 13px;
  font-weight: 600;
}
html.dark .jours .jour { background: var(--fond); }
.jours .jour:hover { background: var(--survol); }

/* Les memes pastilles, mais qu'on lit au lieu de cliquer : un <span> ne
   centre pas son texte comme un <button>. */
.jours.figes { padding: 0; margin: 14px 0 0; }
.jours.figes .jour {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 12px;
  cursor: default;
}
.jours.figes .jour:hover { background: var(--carte); }
html.dark .jours.figes .jour:hover { background: var(--fond); }

/* Un jour ferme se barre en diagonale, sans disparaitre : on doit pouvoir le
   rouvrir, et lire la semaine entiere d'un coup d'oeil. */
.jours .jour.ferme { color: var(--doux); }
.jours .jour.ferme::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  border-top: 2px solid var(--rouge);
  transform: rotate(-45deg);
}

/* Une liste fermee de cases, dans une fiche. */
.coches { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 6px 12px 6px 0; }
.coches label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}
.coches input[type=checkbox] { width: auto; margin: 0; }

label.case { display: flex; align-items: center; gap: 8px; font-weight: 400; }
label.case input[type=checkbox] { width: auto; margin: 0; }
.fiche .boutons { justify-content: space-between; }
.fiche label:has(input[type=checkbox]) { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.fiche label input[type=checkbox] { width: auto; margin: 0; }


/* --- Les variants deplies sous une campagne --- */

.deplie {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--doux);
  font-size: 24px;
  line-height: 1;
}
.deplie:hover { background: none; color: var(--texte); }

/* La colonne du chevron ne porte que lui : elle se serre autour. */
th.col-plier, td.col-plier { width: 1%; padding-right: 0; }

tr.accordeon > td { background: var(--survol); padding: 10px 16px 14px; }
tr.accordeon table td, tr.accordeon table th { padding: 6px 10px; }
tr.accordeon .aide { margin-top: 8px; }

/* Toute la largeur, demande de Chris le 21/09/2026 : au contenu, le tableau
   flottait a gauche et se lisait mal. Etiree, la table donnait tout l espace
   a la premiere colonne : le statut est donc serre au plus juste, et c est le
   nom du variant qui prend la place. */
tr.accordeon table { width: 100%; font-size: 13px; }
tr.accordeon table th:first-child,
tr.accordeon table td:first-child { width: 1%; white-space: nowrap; }
tr.accordeon table th:not(:first-child),
tr.accordeon table td:not(:first-child) { padding-left: 40px; }

.alerte-ligne { margin-top: 2px; font-size: 11px; color: var(--ambre); }


/* --- Le hub des parametres : une carte par ecran --- */

/* Les ecrans de reglages se lisent en une colonne centree. La barre d'outils
   du haut garde toute la largeur, comme partout ailleurs. */
main.reglages > *:not(.haut) {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* La Home : la meme idee, en plus large. Etirees sur un grand ecran, ses
   vignettes et ses graphes ne se lisent plus d'un coup d'oeil. */
main.aere > *:not(.haut) {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.cartes {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.carte-lien {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
  color: var(--texte);
}
.carte-lien:hover { background: var(--survol); text-decoration: none; }

.carte-lien .rond {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  color: var(--orange);
}
.carte-lien .rond svg { width: 20px; height: 20px; }

.carte-lien .dit { min-width: 0; }
.carte-lien .dit strong { display: block; font-size: 14px; font-weight: 600; }
.carte-lien .dit span { display: block; margin-top: 2px; font-size: 13px; color: var(--doux); }

.carte-lien .vers { width: 18px; height: 18px; margin-left: auto; color: var(--doux); }
.carte-lien .etat { margin-left: auto; }


/* --- Une valeur coloree par son bareme --- */

.bareme { font-weight: 600; }

/* --- Un tableau de paires : un libelle, une valeur --- */

table.paires { width: 100%; }
table.paires th {
  width: 160px;
  padding: 7px 14px 7px 0;
  border-bottom: 1px solid var(--bord);
  color: var(--doux);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}
table.paires td { padding: 7px 0; border-bottom: 1px solid var(--bord); }
table.paires tr:last-child th, table.paires tr:last-child td { border-bottom: 0; }

/* Du texte tel qu'il est arrive : reponse d'un webservice, journal d'envoi. */
pre.brut {
  max-height: 260px;
  margin: 0 0 8px;
  padding: 12px 14px;
  overflow: auto;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 8px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
}


/* --- Les pages d'une longue liste --- */

.pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 0;
}

.pages .btn { margin-top: 0; }


/* --- Des cases a cocher en ligne, pour choisir sans deplier --- */

.filtres .cases { display: flex; flex-wrap: wrap; gap: 5px; max-width: 520px; }

.filtres .case {
  margin: 0;
  padding: 5px 10px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 400;
  color: var(--texte);
  cursor: pointer;
  white-space: nowrap;
}

.filtres .case:hover { background: var(--survol); }

.filtres .case.prise {
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  border-color: var(--orange);
  color: var(--orange);
  font-weight: 600;
}

/* La case reste la pour l'envoi, c'est le fond qui dit ce qui est pris. */
.filtres .case input { position: absolute; opacity: 0; pointer-events: none; }


/* --- La courbe de la Home ---

   Dessinee avec des div : deux series de points ne valent pas une
   bibliotheque de graphes. */

.bloc-graphe { margin: 0 0 28px; }
.bloc-graphe h2 { margin: 0 0 12px; }

.graphe {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 160px;
  /* La marge de gauche fait la place aux libelles de l echelle (item 263). */
  padding: 10px 12px 0 62px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px 12px 0 0;
}

.graphe .barre {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  height: 100%;
}

/* Les graduations. Item 263 : sans elles on voyait une forme sans savoir si
   la plus haute barre valait 200 euros ou 2 000.

   Le trait traverse toute la largeur, libelles compris, et le libelle le
   masque avec sa propre couleur de fond : sinon il se lit par-dessus. */
.graphe .echelle {
  position: absolute;
  left: 0;
  right: 12px;
  top: 10px;
  bottom: 0;
  pointer-events: none;
}

.graphe .echelle span {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--bord);
  opacity: .7;
}

.graphe .echelle span i {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  padding: 0 6px 0 2px;
  background: var(--carte);
  font-style: normal;
  font-size: 11px;
  color: var(--doux);
  white-space: nowrap;
}

.legende-ref {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--doux);
}

/* Le petit trait qui precedait la legende a ete retire le 23/09/2026, demande
   par Chris. Il servait de cle au trait de reference du graphe CA -- mais il
   etait aussi pose sur la legende du graphe Volume, qui n'a aucun trait, et il
   n'y voulait rien dire. */

.graphe .barre span {
  width: 100%;
  min-height: 2px;
  background: var(--orange);
  border-radius: 3px 3px 0 0;
}

.graphe .barre:hover span { background: var(--orange-survol); }

/* Un jour a venir : la barre est la, mais elle ne s'est pas encore produite.
   Le gris le dit sans avoir a lire la legende. */
.graphe .barre.futur span { background: var(--bord); }
.graphe .barre.futur:hover span { background: var(--doux); }

.graphe-pieds {
  display: flex;
  gap: 3px;
  padding: 6px 12px 10px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  font-size: 11px;
  color: var(--doux);
}

.graphe-pieds span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
}


/* --- Deux colonnes cote a cote --- */

.deux-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
  margin: 0 0 28px;
}

.deux-colonnes h2 { margin: 0 0 12px; }
/* Un second tableau dans la meme colonne : il lui faut de l'air au-dessus. */
.deux-colonnes .tableau + h2 { margin-top: 24px; }
.deux-colonnes .tableau + .tableau { margin-top: 16px; }

/* Une ligne d'anomalie a zero ne doit pas attirer l'oeil. */
tr.calme td { color: var(--doux); }


/* --- Ce qui reste a trancher sur une page migree --- */

/* --- Les objectifs du mois --- */

.onglets-mois { margin: 0 0 24px; }

/* Un champ qui s'edite au clic dans une cellule : pas de cadre au repos, il
   ne se distingue qu'au survol. */
form.vif-cellule { margin: 0; }

form.vif-cellule input {
  width: 100%;
  min-width: 90px;
  padding: 6px 9px;
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: inherit;
}

form.vif-cellule input:hover {
  background: var(--survol);
  border-color: var(--bord);
  cursor: text;
}

form.vif-cellule input:focus {
  background: var(--carte);
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
}

td.col-commentaire { min-width: 220px; }

/* Ce que dit un champ qu'on vient de quitter : enregistre, ou refuse. */
form.vif-cellule .note-vif { display: block; font-size: 12px; color: var(--vert); }
form.vif-cellule .note-vif.erreur { color: var(--rouge); }
form.vif-cellule input.champ-erreur { border-color: var(--rouge); }

/* Un objectif depasse se voit tout de suite : en gras rouge. Le pourcentage
   au-dessus de cent et le reste passe sous zero disent la meme chose. */
td.depasse, span.depasse, div.depasse { color: var(--rouge); font-weight: 700; }

/* Les milliers de la colonne Atteint ne doivent pas passer a la ligne. */
td.col-atteint { white-space: nowrap; min-width: 92px; }


/* --- L oeil qui montre sa liste au survol --- */

td.lissage { width: 1%; text-align: center; }

.oeil {
  position: relative;
  display: inline-flex;
  color: var(--doux);
  cursor: default;
}

.oeil svg { width: 16px; height: 16px; }
.oeil:hover, .oeil:focus-visible { color: var(--texte); outline: none; }

.oeil .bulle {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: none;
  width: max-content;
  max-width: 260px;
  padding: 7px 10px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  font-size: 12px;
  line-height: 1.45;
  color: var(--texte);
  text-align: left;
  white-space: normal;
}

.oeil:hover .bulle, .oeil:focus-visible .bulle { display: block; }


/* La meme couleur en pastille, pour les cellules d'un tableau. */
.bareme-fond {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.palier {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.palier input[type=color] { width: 44px; height: 34px; padding: 2px; margin: 0; }
.palier input[type=text] { width: 120px; margin: 0; }
.palier .doux { flex: 1; }


/* --- Les alias d'un champ standard --- */

.alias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.alias .mot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--survol);
  border: 1px solid var(--bord);
  border-radius: 20px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* --- Un bouton qui a l'air d'un lien --- */

button.lien {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--orange);
  font-size: inherit;
  text-decoration: underline;
}
button.lien:hover { background: none; color: var(--orange-survol); }

.tableau .boutons { display: flex; gap: 12px; align-items: center; }
.tableau .boutons form { display: inline-flex; margin: 0; }
.tableau .filtres { margin: 0; }


/* --- Un titre avec son action a droite --- */

.titre-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.titre-ligne h2 { margin: 0; }
.titre-ligne form { margin: 0; }
.titre-ligne .btn { margin-top: 0; }


/* Les onglets d'un ecran de reglages : du texte, pas des pilules. Seul
   l'onglet ouvert porte un fond. */
main.reglages .pastilles a {
  background: none;
  border-color: transparent;
  border-radius: 8px;
  color: var(--doux);
}
main.reglages .pastilles a:hover { background: var(--survol); color: var(--texte); }
main.reglages .pastilles a.ici {
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  border-color: color-mix(in srgb, var(--orange) 45%, transparent);
  color: var(--orange);
  font-weight: 600;
}

/* Une etiquette dans un onglet garde sa couleur. */
.pastilles .etat { opacity: 1; font-weight: 600; }

/* Une remarque en pied d'ecran. */
.note {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
  font-size: 13px;
  color: var(--doux);
}

/* Une variable cliquable, dans un gabarit d'email. La marge haute des boutons
   du projet ecarterait les lignes de vingt pixels. */
.alias button.mot {
  margin: 0;
  padding: 3px 10px;
  background: var(--survol);
  color: var(--doux);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.alias button.mot:hover { background: var(--survol); color: var(--orange); }

/* L'aide qui annonce les variables se colle a elles. */
p.aide:has(+ .alias) { margin-bottom: 4px; }

/* Le corps d'un email, dans le journal. */
.corps-email {
  max-width: 720px;
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--survol);
  border-radius: 8px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

td details summary { cursor: pointer; }
td details summary::marker { color: var(--doux); }


/* --- L'apercu d'un email --- */

.apercu {
  width: 100%;
  min-height: 320px;
  margin: 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: 8px;
  color: #111;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}
iframe.apercu { padding: 0; }

/* Une variable que rien ne remplirait. */
.alerte-token { color: var(--ambre); }

/* Un gabarit d'email que rien n'envoie encore. */
.note.attente {
  border-color: color-mix(in srgb, var(--ambre) 45%, transparent);
  background: color-mix(in srgb, var(--ambre) 10%, transparent);
  color: var(--texte);
}


/* --- Le catalogue --- */

.catalogue {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  margin: 0 0 32px;
}

@media (max-width: 900px) {
  .catalogue { grid-template-columns: 1fr; }
}

.secteurs { display: flex; flex-direction: column; gap: 2px; }
.secteurs p { margin: 0 0 8px; font-size: 12px; font-weight: 600; }

.secteurs a {
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--doux);
  text-decoration: none;
}

.secteurs a:hover { background: var(--survol); color: var(--texte); }
.secteurs a.ici   { background: var(--survol); color: var(--orange); font-weight: 600; }

@media (max-width: 900px) {
  .secteurs { flex-direction: row; flex-wrap: wrap; }
}

.cartes-catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.carte-campagne {
  padding: 18px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
}

/* Cachee pour l affilie choisi : on la voit, elle recule. */
.carte-campagne.effacee { opacity: .62; }

.carte-campagne .badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge.rouge { background: var(--rouge); color: #fff; }
.badge.ambre { background: var(--ambre); color: #fff; }
.badge.gris  { background: var(--doux);  color: var(--carte); }
.badge.dore  { background: rgba(154, 103, 0, .16); color: var(--ambre); }
.badge.pale  { background: var(--survol); color: var(--doux); }

.tete-carte { display: flex; align-items: flex-start; gap: 12px; }
.tete-carte h3 { margin: 0; font-size: 15px; }
.tete-carte p  { margin: 4px 0 0; font-size: 12px; }

.monogramme {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
}

table.paires.serrees { margin-top: 14px; font-size: 13px; }
table.paires.serrees th { width: 96px; padding: 3px 10px 3px 0; font-weight: 400; color: var(--doux); }
table.paires.serrees td { padding: 3px 0; }

ul.menue { margin: 6px 0 0; padding-left: 16px; font-size: 12px; }
ul.menue li { margin: 2px 0; }

.variants-carte { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }

.variant-carte {
  padding: 10px 12px;
  border: 1px solid var(--bord);
  border-radius: 9px;
  font-size: 13px;
}

.variant-carte p { margin: 0 0 3px; }
.variant-carte p:last-child { margin-bottom: 0; }
.variant-carte .nom { font-weight: 600; }

/* La coupure franche avant les campagnes qui ne sortent pas. */
.coupure {
  margin: 44px 0 0;
  padding-top: 18px;
  border-top: 3px solid var(--ambre);
}

.coupure h2 { margin: 0; color: var(--ambre); }

.bandeau-ambre {
  margin: 0 0 18px;
  padding: 10px 14px;
  background: rgba(154, 103, 0, .1);
  border: 1px solid var(--ambre);
  border-radius: 9px;
  font-size: 13px;
}

.aide.encadre {
  margin: 0 0 18px;
  padding: 10px 14px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 9px;
}

/* Un champ juste assez large pour deux ou trois chiffres. */
input.court { width: 76px; }

/* Le bloc que l affilie ne verra pas, sur une carte du catalogue. */
.cote-admin {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--bord);
}

.cote-admin > p { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.cote-admin table.paires.serrees { margin-top: 0; }

.carte-campagne .description { margin: 12px 0 0; font-size: 13px; }


/* --- Les reglages des Stats : une ligne par question --- */

.reglages-stats {
  margin: 0 0 22px;
  padding: 18px 20px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
}

.ligne-reglage {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--bord);
}

.ligne-reglage:first-child { padding-top: 0; border-top: 0; }
.ligne-reglage:last-child  { padding-bottom: 0; }

.ligne-reglage > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--doux);
}

.ligne-reglage .cases { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Decouper par, Mesurer : des pastilles, pas des cases a cocher. Meme forme
   que les filtres a liste de la ligne du dessous. */
.ligne-reglage .case {
  margin: 0;
  padding: 6px 12px;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 400;
  color: var(--texte);
  cursor: pointer;
  white-space: nowrap;
}

/* La case reste la pour l'envoi du formulaire, mais on ne la voit plus : c'est
   la pastille qui dit ce qui est pris. */
.ligne-reglage .case input { position: absolute; opacity: 0; pointer-events: none; }

.ligne-reglage .case:hover { background: var(--survol); }

.ligne-reglage .case:has(input:checked) {
  background: var(--orange-pale);
  border-color: var(--orange-bord);
  color: var(--orange-texte);
  font-weight: 600;
}
.ligne-reglage .btn { margin-top: 0; }
.ligne-reglage button[type="submit"] { margin: 0 10px 0 0; }

@media (max-width: 760px) {
  .ligne-reglage { grid-template-columns: 1fr; }
}

.avec-raccourcis { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.deux-dates { display: flex; gap: 8px; align-items: center; }
.deux-dates input { margin: 0; }

/* Un filtre a liste : le meme volet que dans les titres de colonne. */
.filtre-stats { position: relative; }

.filtre-stats > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 20px;
  font-size: 13px;
  color: var(--texte);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.filtre-stats > summary::-webkit-details-marker { display: none; }
.filtre-stats > summary:hover { background: var(--survol); }
.filtre-stats > summary svg { width: 13px; height: 13px; opacity: .6; }

.filtre-stats.actif > summary {
  border-color: var(--orange);
  color: var(--orange);
  font-weight: 600;
}

.filtre-stats .compte {
  padding: 0 6px;
  background: var(--orange);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.champ-filtre input { margin: 0; width: 190px; }


/* --- Les etiquettes d une offre du catalogue --- */

.tete-carte .etiquettes { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 0; }

/* Le modele de paiement : un cadre net, pas une nuance de gris. */
.badge.modele {
  background: none;
  border: 1px solid var(--doux);
  color: var(--texte);
}

.badge.pale {
  background: var(--survol);
  border: 1px solid var(--bord);
  color: var(--doux);
}

.badge.dore {
  background: color-mix(in srgb, var(--ambre) 22%, transparent);
  border: 1px solid var(--ambre);
  color: var(--ambre);
}

/* --- La semaine, les jours fermes barres --- */

.semaine { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.semaine .jour { font-size: 12px; }

.semaine .ferme {
  color: var(--doux);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  opacity: .8;
}

/* --- L apercu d une crea --- */

.apercu-crea {
  position: relative;
  display: block;
  margin: 14px 0 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: 9px;

  /* La crea se voit en entier, jusqu'a 1000 px de haut pour 600 de large.
     Le rapport suit la largeur de la carte, quelle qu'elle soit. */
  aspect-ratio: 600 / 1000;
}

/* Rendue a 600 px, la largeur pour laquelle un email est calibre, puis mise a
   l'echelle de la carte. Le facteur est pose par le script du catalogue, qui
   seul connait la largeur reelle ; la valeur de repli sert le temps qu'il
   passe. */
.apercu-crea iframe {
  width: 600px;
  height: 1000px;
  border: 0;
  transform: scale(var(--echelle, .52));
  transform-origin: 0 0;
  pointer-events: none;
}

/* Le voile ne sert plus qu'a prendre le clic : l'iframe, elle, ne le recoit
   pas. Aucun fond, la crea se voit telle quelle. */
.apercu-crea .voile {
  position: absolute;
  inset: 0;
}

.apercu-crea:hover { border-color: var(--orange); }

/* L apercu en grand, item 126 : l email a sa vraie largeur, 640 px. */
.grand-apercu {
  width: min(700px, calc(100vw - 32px));
  height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--bord);
  border-radius: 12px;
  background: var(--carte, #fff);
}
.grand-apercu[open] { display: flex; flex-direction: column; }
.grand-apercu::backdrop { background: rgba(0, 0, 0, .55); }
.grand-apercu .tete-grand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bord);
}
.grand-apercu iframe { flex: 1; width: 100%; border: 0; background: #fff; }

/* Item 104 : les extraits de tracking d'un variant, a copier-coller. Le code
   se coupe ou il peut : une URL de pixel ne tient jamais sur une ligne. */
.extrait { margin: 0 0 14px; }
.extrait .tete-extrait { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.extrait .aide { margin: 2px 0 6px; }
.extrait pre {
  margin: 0;
  padding: 10px 12px;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 8px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Un bouton desactive doit se voir : sans ca, « Supprimer ce variant » refuse
   ressemblait a un bouton actif (capture de Chris du 21/09/2026). Le title
   dit pourquoi au survol. */
button:disabled,
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Les options d'un gabarit d'email, sur une ligne. Items 215 et 216. */
.options-gabarit { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0 16px; }

/* Baremes, item 224 : le code de la couleur a cote du nuancier, et la ligne
   fixe « de 0 au premier palier ». */
.palier input.code-couleur { width: 90px; font-family: var(--mono, monospace); }
.palier.fixe { opacity: .8; }
.pastille-noire { display: inline-block; width: 44px; height: 34px; border-radius: 6px;
                  background: var(--texte, #111); border: 1px solid var(--bord); }

/* Les bases d'un contact : une liste neutre. Elle portait la classe .nps,
   devenue rouge le 22/09/2026 pour les vraies interdictions. */
ul.rattachements { list-style: none; margin: 0 0 10px; padding: 0; }
ul.rattachements li { display: flex; align-items: center; justify-content: space-between;
                      gap: 8px; padding: 3px 0 3px 10px; font-size: 13px; }

/* L'Espace affilie, sur ses pages sans menu : le repere d'espace sous le
   logo domine, le slogan passe dessous, discret. Repris de Kaptos Admin. */
.bloc .espace-nom    { margin: -18px 0 4px; text-align: center; font-size: 16px; font-weight: 600; color: var(--texte); }
.bloc .espace-slogan { margin: 0 0 28px; text-align: center; font-size: 12px; color: var(--doux); }
.carte h2 { margin: 20px 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase;
            letter-spacing: .04em; color: var(--doux); }
.carte p  { font-size: 14px; line-height: 1.55; }
.carte .centre, .carte .centre h2 { text-align: center; }

/* Espace affilie, Diffusion : le volume modifiable dans sa case, et le
   choix des colonnes replie au-dessus du tableau. */
form.volume-affilie { margin: 0; }
form.volume-affilie input { width: 110px; padding: 4px 8px; text-align: right; margin-left: auto; }
details.choix-colonnes { margin: 0 0 14px; }
details.choix-colonnes summary { cursor: pointer; color: var(--orange); font-size: 14px; }
details.choix-colonnes .cases { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0; }

/* Les alertes Telegram par famille. Item 275.
   Vingt-huit cases en une colonne ne se lisent pas. `auto-fit` plutot qu'un
   nombre fixe de colonnes : trois sur un ecran large, deux sur un portable,
   une sur un telephone, sans media query a maintenir. */
.familles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px 30px;
  margin: 4px 0 18px;
}

.famille h3 {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bord);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--doux);
}

.famille .case {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-weight: 400;
  cursor: pointer;
}

/* Espace affilie, item 232 : la fenetre de commande d'un kit. */
dialog.fenetre-commande { width: min(440px, 92vw); border: 1px solid var(--bord); border-radius: 12px;
                          padding: 22px 24px; background: var(--carte); color: var(--texte); }
dialog.fenetre-commande::backdrop { background: rgba(0, 0, 0, .45); }
dialog.fenetre-commande h2 { margin: 0 0 6px; font-size: 17px; }
.carte-campagne button.commander { margin-top: 12px; width: 100%; }

/* Espace affilie, item 233 : le renvoi du kit, en bout de ligne de la Diffusion. */
button.petit { margin: 0; padding: 4px 10px; font-size: 12px; white-space: nowrap; }

/* Espace affilie, item 230 : la grille de commande. */
.grille-commande table select,
.grille-commande table input { width: 100%; margin: 0; }
.grille-commande table input.court { width: 70px; }
.grille-commande tr.refusee td { background: color-mix(in srgb, var(--rouge) 12%, transparent); }
.grille-commande .raison { color: var(--rouge); font-size: 12px; }
.grille-commande .boutons { display: flex; gap: 10px; margin-top: 14px; }

/* Espace affilie : le nombre de lignes sous le tableau, a droite (Chris,
   22/09/2026 : la phrase d aide au-dessus alourdissait la page). */
.compte-lignes { margin: 8px 2px 0; text-align: right; font-size: 12px; color: var(--doux); }
.grille-commande td.gestes { white-space: nowrap; text-align: right; }
.grille-commande td.gestes button[disabled] { opacity: .4; cursor: default; }

/* Accueil, « Les cinq premiers » : les deux tableaux partagent leurs largeurs.
   Sans ca chacun les calcule sur son propre contenu, et « CA annonceur », plus
   long que « CA affilie », decale la ligne d en-tete du voisin -- on lit deux
   tableaux qui ne s alignent pas. Item 264, releve par Chris le 23/09/2026. */
.tops table { table-layout: fixed; }
.tops th.num, .tops td.num { width: 24%; }

/* Un graphe sans aucune donnee : on le dit avec des mots. Une grille de
   graduations toutes a zero ressemble a un ecran casse -- la lecon de
   l ancien Kaptos, reproduite puis corrigee le 23/09/2026. */
.graphe.vide {
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
}
.graphe.vide p { margin: 0; color: var(--doux); font-size: 13px; }

/* Un tableau qui defile en HAUTEUR, l en-tete restant visible. Pose sur
   « BAT en attente » le 23/09/2026 : il etait coupe a cinq lignes en dur,
   et les suivantes n existaient nulle part. */
.tableau.defile-haut { max-height: 300px; overflow-y: auto; }
.tableau.defile-haut thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--entete);
}