/* Feuille de style de l'application. Deux thèmes : clair par défaut, sombre quand <html> porte
   data-theme="sombre" (rea.js le pose avant le premier rendu, d'après le choix gardé dans le navigateur). Chaque
   texte est à 7:1 au moins sur son fond, dans les deux thèmes (mesures : context/produit.md, § Interface). Couleur
   principale : indigo ; accent : framboise ; une couleur par statut, toujours avec son libellé. Les couleurs des
   réseaux ne servent qu'à leurs icônes. Aucune largeur fixe qui ferait défiler la page de côté, de 390 à 1280 px. */

:root {
  --fond: #f5f5f7;
  --surface: #ffffff;
  --surface-douce: #f8f8fb;
  --encre: #16181d;
  --encre-douce: #41454f;
  --trait: #d9dbe1;
  --trait-champ: #6e7280;
  --principale: #4338ca;
  --principale-fonce: #3730a3;
  --principale-teinte: #e8e7fb;
  --sur-principale: #ffffff;
  --accent: #9d174d;
  --accent-texte: #831843;
  --accent-teinte: #fce7f3;
  --danger: #a11f18;
  --danger-fonce: #82170f;
  --sur-danger: #ffffff;
  --focus: #1d4fd7;
  --attention: #8a5300;
  --succes: #155d2c;
  --attente-texte: #6b4400;
  --attente-fond: #fff1d6;
  --cours-texte: #1e3a8a;
  --cours-fond: #e0e9ff;
  --succes-texte: #14532d;
  --succes-fond: #dcf5e3;
  --partiel-texte: #7c2d12;
  --partiel-fond: #fde8d7;
  --erreur-texte: #8f1d14;
  --erreur-fond: #fde4e1;
  --neutre-texte: #3f4451;
  --neutre-fond: #ebecf1;
  --voile: rgba(22, 24, 29, 0.55);
  --ombre: 0 1px 2px rgba(22, 24, 29, 0.06), 0 1px 3px rgba(22, 24, 29, 0.08);
  --ombre-fenetre: 0 10px 30px rgba(22, 24, 29, 0.25);
  --rayon: 0.625rem;
  --largeur-barre: 15rem;
  color-scheme: light;
}

/* Le thème sombre redéfinit chaque jeton de couleur du thème clair, et rien d'autre (un essai le vérifie). */
:root[data-theme="sombre"] {
  --fond: #0f1117;
  --surface: #171a22;
  --surface-douce: #1d212b;
  --encre: #e8eaf0;
  --encre-douce: #b4b9c6;
  --trait: #2e3340;
  --trait-champ: #7d8494;
  --principale: #a5b4fc;
  --principale-fonce: #c7d2fe;
  --principale-teinte: #262a4d;
  --sur-principale: #111427;
  --accent: #f9a8d4;
  --accent-texte: #fbcfe8;
  --accent-teinte: #3b1427;
  --danger: #fca5a5;
  --danger-fonce: #fecaca;
  --sur-danger: #2a0606;
  --focus: #93c5fd;
  --attention: #fcd34d;
  --succes: #86efac;
  --attente-texte: #fcd34d;
  --attente-fond: #3a2a06;
  --cours-texte: #bfdbfe;
  --cours-fond: #172a4f;
  --succes-texte: #86efac;
  --succes-fond: #0f3320;
  --partiel-texte: #fdba74;
  --partiel-fond: #3d2210;
  --erreur-texte: #fca5a5;
  --erreur-fond: #431614;
  --neutre-texte: #cbd2dc;
  --neutre-fond: #262b35;
  --voile: rgba(0, 0, 0, 0.65);
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
  --ombre-fenetre: 0 10px 30px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  line-height: 1.25;
}

h1 {
  font-size: 1.625rem;
  font-weight: 700;
}

h2 {
  font-size: 1.125rem;
  font-weight: 650;
}

h3 {
  font-size: 1rem;
  font-weight: 650;
}

a {
  color: var(--principale);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--principale-fonce);
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

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

.evitement {
  position: absolute;
  inset-inline-start: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--surface);
  font-weight: 600;
}

.evitement:focus {
  top: 0.5rem;
}

.icone {
  flex: none;
}

/* ---- Cadre : barre latérale et contenu ---------------------------------------------------------------- */

.cadre {
  display: grid;
  grid-template-columns: var(--largeur-barre) minmax(0, 1fr);
  min-height: 100vh;
}

.barre {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100vh;
  padding: 1rem 0.75rem;
  overflow-y: auto;
  background: var(--surface);
  border-inline-end: 1px solid var(--trait);
}

.marque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding-inline-start: 0.5rem;
}

.nom-produit {
  color: var(--encre);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.nom-produit:hover {
  color: var(--encre);
}

.bouton-icone {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--encre-douce);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 0.5rem;
  cursor: pointer;
}

.bouton-icone:hover {
  color: var(--encre);
  background: var(--surface-douce);
}

/* Le bouton de menu ne sert que sur un écran étroit ; sans script, le menu y reste ouvert et le bouton caché. */
.bouton-menu {
  display: none;
}

html:not(.js) .replier,
html:not(.js) .pied-barre {
  display: none;
}

.libelle-replier {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* « Créer » : le geste principal, en tête de la barre, avec son raccourci écrit dessus. */
.creer-principal {
  justify-content: flex-start;
  gap: 0.625rem;
  width: 100%;
  padding-inline: 0.75rem;
}

.creer-principal .libelle {
  flex: 1;
  text-align: start;
}

.creer-principal[aria-current="page"] {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--principale);
}

.raccourci {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0 0.375rem;
  color: var(--principale-fonce);
  background: var(--surface);
  border-radius: 0.3rem;
  font: 700 0.8125rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.menu {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lien-menu {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  color: var(--encre);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.5rem;
}

.lien-menu:hover {
  color: var(--encre);
  background: var(--neutre-fond);
}

.lien-menu[aria-current="page"] {
  color: var(--principale-fonce);
  background: var(--principale-teinte);
  box-shadow: inset 3px 0 0 var(--principale);
}

.pied-barre {
  margin-top: auto;
}

/* Le membre connecté (mode public) : son nom, puis « Se déconnecter », sous le thème. Sans script, le thème est
   caché : le membre prend sa place au pied de la barre. */
.pied-membre {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

html:not(.js) .pied-membre {
  margin-top: auto;
}

.membre-nom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: var(--encre);
  font-weight: 600;
}

.membre-nom .libelle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La page de connexion (mode public) : une carte seule, au centre. */
.connexion {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1rem;
}

.connexion-carte {
  width: min(100%, 26rem);
}

.connexion-produit {
  margin: 0;
  color: var(--principale-fonce);
  font-weight: 700;
}

/* Thème : le bouton dit où il mène — « Thème sombre » et la lune en clair, « Thème clair » et le soleil en sombre.
   Le libellé masqué l'est par display:none : il sort aussi du nom accessible. */
.bouton-theme,
.bouton-sortie {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 0.5rem;
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.bouton-theme:hover,
.bouton-sortie:hover {
  background: var(--neutre-fond);
}

.bouton-theme .icone-soleil,
.bouton-theme .libelle-clair,
:root[data-theme="sombre"] .bouton-theme .icone-lune,
:root[data-theme="sombre"] .bouton-theme .libelle-sombre {
  display: none;
}

:root[data-theme="sombre"] .bouton-theme .icone-soleil,
:root[data-theme="sombre"] .bouton-theme .libelle-clair {
  display: inline;
}

.contenu {
  min-width: 0;
  padding: 1.5rem 1.5rem 3rem;
}

.page {
  display: grid;
  gap: 1.25rem;
  max-width: 76rem;
  margin: 0 auto;
}

.entete {
  display: grid;
  gap: 0.5rem;
}

.ligne-ariane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.retour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--principale-fonce);
  background: var(--surface);
  border: 1px solid var(--trait-champ);
  border-radius: 0.5rem;
}

.ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  color: var(--encre-douce);
  font-size: 0.875rem;
  list-style: none;
}

.ariane li {
  overflow-wrap: anywhere;
}

.ariane li + li::before {
  content: "/";
  margin-inline-end: 0.25rem;
  color: var(--encre-douce);
}

@media (min-width: 56.3125rem) {
  html.barre-repliee {
    --largeur-barre: 4.5rem;
  }

  html.barre-repliee .marque {
    justify-content: center;
    padding-inline-start: 0;
  }

  html.barre-repliee .nom-produit,
  html.barre-repliee .libelle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  html.barre-repliee .raccourci {
    display: none;
  }

  html.barre-repliee .lien-menu,
  html.barre-repliee .creer-principal,
  html.barre-repliee .bouton-theme,
  html.barre-repliee .bouton-sortie,
  html.barre-repliee .membre-nom {
    justify-content: center;
    padding-inline: 0;
  }
}

/* Sous ~900 px : une barre en haut — le bouton de menu, le nom, « Créer », le thème ; le menu s'ouvre dessous. */
@media (max-width: 56.25rem) {
  /* La barre du haut garde sa hauteur, le contenu prend le reste de l'écran : sans rangées déclarées, une page plus
     courte que l'écran partageait la hauteur restante entre les deux, et un pan blanc s'ouvrait sous le menu. */
  .cadre {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .barre {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "marque creer theme"
      "menu menu menu";
    align-items: center;
    gap: 0.5rem;
    height: auto;
    padding: 0.5rem 1rem;
    border-inline-end: 0;
    border-bottom: 1px solid var(--trait);
  }

  .marque {
    grid-area: marque;
    justify-content: flex-start;
    padding-inline-start: 0;
  }

  .replier {
    display: none;
  }

  html.js .bouton-menu {
    display: inline-flex;
  }

  .creer-principal {
    grid-area: creer;
    width: auto;
  }

  .creer-principal .raccourci {
    display: none;
  }

  .pied-barre {
    grid-area: theme;
    margin: 0;
  }

  /* Le membre passe sous le menu, sur toute la largeur, et se replie avec lui. */
  .pied-membre {
    grid-column: 1 / -1;
    margin: 0;
  }

  html.js:not(.menu-ouvert) .pied-membre {
    display: none;
  }

  .bouton-theme {
    justify-content: center;
    width: 2.75rem;
    padding: 0;
  }

  .bouton-theme .libelle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .menu {
    grid-area: menu;
  }

  html.js:not(.menu-ouvert) .menu {
    display: none;
  }

  .contenu {
    padding: 1rem 1rem 2.5rem;
  }

  h1 {
    font-size: 1.375rem;
  }
}

/* ---- Cartes et dispositions ---------------------------------------------------------------------------- */

.carte {
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.carte.vide {
  justify-items: start;
  color: var(--encre-douce);
}

.carte-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.pile,
.disposition-deux {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.vide {
  color: var(--encre-douce);
}

/* Une vue vide : une phrase, puis l'action qui la remplit. */
.etat-vide {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
}

.aide,
.detail {
  color: var(--encre-douce);
  font-size: 0.875rem;
}

/* ---- Formulaires ---------------------------------------------------------------------------------------- */

.formulaire {
  display: grid;
  gap: 1rem;
}

/* Créer : les comptes, le texte, les fichiers, puis « Quand » et les deux boutons, dans cet ordre. */
.formulaire-post {
  display: grid;
  gap: 1.25rem;
}

.champ {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

label,
legend {
  font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--trait-champ);
  border-radius: 0.5rem;
  font: inherit;
}

textarea {
  min-height: 11rem;
  line-height: 1.5;
  resize: vertical;
}

input[type="file"] {
  width: 100%;
  padding: 0.625rem;
  color: var(--encre);
  background: var(--surface-douce);
  border: 1px dashed var(--trait-champ);
  border-radius: 0.5rem;
  font: inherit;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ligne-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 1rem;
}

.groupe-cases {
  display: grid;
  gap: 0.5rem;
}

.case {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  font-weight: 400;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 0.5rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.case input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--principale);
}

.case:has(input:checked) {
  background: var(--principale-teinte);
  border-color: var(--principale);
}

.actions-formulaire,
.actions-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.actions-ligne {
  gap: 0.5rem;
  justify-content: flex-end;
}

.actions-ligne form,
.fenetre-actions form {
  margin: 0;
}

.indicateur-envoi {
  display: none;
  color: var(--encre-douce);
  font-size: 0.875rem;
}

.formulaire-post.htmx-request .indicateur-envoi {
  display: block;
}

/* ---- Boutons, badges, liens ----------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  color: var(--sur-principale);
  background: var(--principale);
  border: 1px solid var(--principale);
  border-radius: 0.5rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.bouton:hover {
  color: var(--sur-principale);
  background: var(--principale-fonce);
  border-color: var(--principale-fonce);
}

.bouton.secondaire {
  color: var(--principale-fonce);
  background: var(--surface);
  border-color: var(--principale);
}

.bouton.secondaire:hover {
  color: var(--principale-fonce);
  background: var(--principale-teinte);
}

.bouton.danger {
  color: var(--sur-danger);
  background: var(--danger);
  border-color: var(--danger);
}

.bouton.danger:hover {
  color: var(--sur-danger);
  background: var(--danger-fonce);
  border-color: var(--danger-fonce);
}

.bouton.petit {
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
}

.badge.attente {
  color: var(--attente-texte);
  background: var(--attente-fond);
}

.badge.cours {
  color: var(--cours-texte);
  background: var(--cours-fond);
}

.badge.succes {
  color: var(--succes-texte);
  background: var(--succes-fond);
}

.badge.partiel {
  color: var(--partiel-texte);
  background: var(--partiel-fond);
}

.badge.erreur {
  color: var(--erreur-texte);
  background: var(--erreur-fond);
}

.badge.neutre {
  color: var(--neutre-texte);
  background: var(--neutre-fond);
}

.badge.accent {
  color: var(--accent-texte);
  background: var(--accent-teinte);
}

.lien-externe {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
}

/* Texte lu par un lecteur d'écran, invisible à l'oeil. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.non-fourni {
  color: var(--encre-douce);
  font-size: 0.8125rem;
  font-style: italic;
  font-weight: 400;
}

/* ---- Icônes des réseaux --------------------------------------------------------------------------------------
   Un disque à la couleur de la marque, glyphe blanc (sprite templates/icones/reseaux.html, provenance à côté). Les
   couleurs des réseaux ne servent qu'ici : ce sont les seules écrites hors des jetons, et elles ne changent pas avec
   le thème, sauf le liseré clair des disques noirs (X, TikTok) en thème sombre. */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.glyphe {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--taille-glyphe, 1.5rem);
  height: var(--taille-glyphe, 1.5rem);
  color: #ffffff;
  background: #475569;
  border-radius: 50%;
}

.glyphe svg {
  width: 62%;
  height: 62%;
  fill: currentColor;
}

.glyphe-discord {
  background: #5865f2;
}

.glyphe-x,
.glyphe-tiktok {
  background: #000000;
}

.glyphe-facebook {
  background: #0866ff;
}

.glyphe-youtube {
  background: #ff0000;
}

.glyphe-instagram {
  background: radial-gradient(circle at 30% 107%, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
}

.glyphe-snapchat {
  background: #fffc00;
}

.glyphe-snapchat svg {
  stroke: #000000;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

:root[data-theme="sombre"] .glyphe-x,
:root[data-theme="sombre"] .glyphe-tiktok {
  box-shadow: 0 0 0 1.5px #e8eaf0;
}

/* Un réseau nommé : son icône, puis son nom (et ce qui suit). Un nom de compte sans espace se coupe où il faut :
   sinon il élargit sa carte et fait défiler la page. */
.reseau-nomme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail.reseau-nomme {
  --taille-glyphe: 1.25rem;
  gap: 0.375rem;
}

.icone-reseau {
  display: inline-flex;
  --taille-glyphe: 1.375rem;
}

/* « Ajouter un compte » : huit tuiles, icône et nom ; la tuile choisie est marquée par sa bordure et un point. */
.tuiles-reseaux legend {
  margin-bottom: 0.5rem;
}

.grille-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5rem), 1fr));
  gap: 0.625rem;
}

.tuile {
  --taille-glyphe: 2.75rem;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.5rem;
  min-height: 6rem;
  padding: 0.75rem 0.5rem;
  color: var(--encre);
  font-weight: 600;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  cursor: pointer;
}

.tuile:hover {
  border-color: var(--principale);
}

.tuile input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.tuile:has(input:checked) {
  background: var(--principale-teinte);
  border-color: var(--principale);
  box-shadow: inset 0 0 0 1px var(--principale);
}

.tuile:has(input:checked)::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  inset-inline-end: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--principale);
  border-radius: 50%;
}

.tuile:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.tuile-nom {
  overflow-wrap: anywhere;
}

/* ---- Tableaux (en cartes sur un écran étroit) ----------------------------------------------------------- */

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tableau th,
.tableau td {
  padding: 0.625rem 0.75rem;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}

/* La colonne de texte libre (une publication, le nom d'un compte) prend la place qui reste, et elle seule se coupe :
   un en-tête, un chiffre ou une date ne passe jamais sur deux lignes. */
.tableau .texte-libre {
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.tableau thead th {
  color: var(--encre-douce);
  background: var(--surface-douce);
  font-size: 0.8125rem;
  font-weight: 650;
}

.tableau tbody th {
  font-weight: 400;
}

.tableau .nombre {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Les boutons d'une ligne restent côte à côte : la colonne de texte libre ne les pousse pas l'un sous l'autre. */
.tableau .actions-ligne {
  flex-wrap: nowrap;
}

/* Le contenu de la cellule, jamais la cellule elle-même : une cellule en grille n'est plus une cellule de tableau, et
   le trait sous sa ligne s'arrêtait à elle. */
.cellule-publication {
  display: grid;
  gap: 0.25rem;
}

@media (max-width: 64rem) {
  .tableau,
  .tableau tbody {
    display: block;
  }

  .tableau thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .tableau tr {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: 0.5rem;
  }

  /* En cartes, chaque case a sa largeur : un texte peut s'y couper, un chiffre jamais. */
  .tableau td,
  .tableau th {
    display: block;
    padding: 0;
    text-align: start;
    white-space: normal;
    border: 0;
  }

  .tableau .nombre {
    text-align: start;
    white-space: nowrap;
  }

  .tableau td[data-libelle]::before,
  .tableau th[data-libelle]::before {
    content: attr(data-libelle);
    display: block;
    color: var(--encre-douce);
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .tableau .colonne-publication,
  .tableau tbody th[scope="row"],
  .tableau .cellule-actions {
    grid-column: 1 / -1;
  }

  .actions-ligne,
  .tableau .actions-ligne {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* ---- Créer : comptes en pastilles, dépôt des fichiers ---------------------------------------------------- */

.pastilles-comptes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pastilles-comptes .vide {
  flex-basis: 100%;
}

.pastille-compte {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  font-weight: 400;
  background: var(--surface);
  border: 1px solid var(--trait-champ);
  border-radius: 999px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.pastille-compte input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--principale);
}

.pastille-compte:has(input:checked) {
  background: var(--principale-teinte);
  border-color: var(--principale);
  box-shadow: inset 0 0 0 1px var(--principale);
}

.pastille-compte:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* La zone se clique (c'est l'étiquette du champ de fichiers) et reçoit un dépôt (rea.js) ; sans script, le champ
   reste visible dedans. */
.zone-depot {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  padding: 1.5rem 1rem;
  font-weight: 400;
  text-align: center;
  background: var(--surface-douce);
  border: 2px dashed var(--trait-champ);
  border-radius: var(--rayon);
  cursor: pointer;
}

.zone-depot:hover,
.zone-depot.survol {
  background: var(--principale-teinte);
  border-color: var(--principale);
}

.zone-depot:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.zone-depot .icone-depot {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--principale);
}

.zone-depot-titre {
  font-weight: 650;
}

.zone-depot input[type="file"] {
  max-width: 100%;
  background: transparent;
  border: 0;
}

html.js .zone-depot input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  opacity: 0;
}

.apercus {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apercus:empty {
  display: none;
}

.apercu {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.375rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 0.5rem;
}

.apercu .vignette {
  width: 100%;
  height: 5.5rem;
}

.apercu-nom {
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

/* ---- Créer : compteurs ---------------------------------------------------------------------------------- */

.compteurs {
  font-size: 0.875rem;
}

.liste-compteurs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compteur {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  color: var(--neutre-texte);
  background: var(--neutre-fond);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.compteur-reseau {
  font-weight: 650;
}

.compteur.depasse {
  color: var(--erreur-texte);
  background: var(--erreur-fond);
}

.compteur .icone {
  width: 1rem;
  height: 1rem;
}

.compteur .glyphe {
  --taille-glyphe: 1.125rem;
}

/* ---- Posts : barre, flux, semaine ----------------------------------------------------------------------- */

.barre-posts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.barre-posts > .bouton {
  margin-inline-start: auto;
}

.onglets {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 0.625rem;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

.onglet {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  color: var(--encre);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.4rem;
}

.onglet:hover {
  color: var(--encre);
  background: var(--neutre-fond);
}

.onglet[aria-current="page"] {
  color: var(--sur-principale);
  background: var(--principale);
}

/* Le filtre par réseau : une barre de pastilles au-dessus des listes ; la pastille choisie en teinte principale. */
.filtres-reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filtre-reseau {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  color: var(--encre);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--trait-champ);
  border-radius: 999px;
}

.filtre-reseau .glyphe {
  --taille-glyphe: 1.25rem;
}

.filtre-reseau:hover {
  color: var(--encre);
  background: var(--neutre-fond);
}

.filtre-reseau[aria-current="page"] {
  background: var(--principale-teinte);
  border-color: var(--principale);
  box-shadow: inset 0 0 0 1px var(--principale);
}

.jour {
  display: grid;
  gap: 0.75rem;
}

.titre-jour {
  color: var(--encre-douce);
  font-size: 1rem;
}

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carte-post {
  display: grid;
  align-content: start;
  gap: 0.625rem;
  height: 100%;
  padding: 0.875rem;
  color: var(--encre);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.carte-post:hover {
  color: var(--encre);
  border-color: var(--principale);
}

.carte-post-entete,
.carte-post-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem 0.5rem;
}

.heure {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.carte-post-corps {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.vignette {
  flex: none;
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  background: var(--neutre-fond);
  border-radius: 0.375rem;
}

.vignette-video {
  display: grid;
  place-items: center;
  color: var(--encre-douce);
}

.extrait {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}

.reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.navigation-semaine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.boutons-semaine {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.grille-semaine {
  display: grid;
  gap: 0.75rem;
}

.colonne-jour {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

/* Aujourd'hui : un trait et un badge en accent (la teinte principale marque ce qu'on a choisi). */
.colonne-jour.aujourdhui {
  border-color: var(--accent);
  box-shadow: inset 0 3px 0 var(--accent);
}

/* L'en-tête d'un jour : le jour et son « + » sur une ligne, le badge « Aujourd'hui » dessous, sur toute la largeur. */
.entete-jour {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.25rem 0.375rem;
}

.entete-jour .badge {
  grid-column: 1 / -1;
  justify-self: start;
}

.titre-colonne {
  min-width: 0;
  font-size: 0.9375rem;
}

/* Le « + » d'un jour : Créer à cette date, à 09:00. */
.plus-jour {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--principale);
  background: var(--surface);
  border: 1px solid var(--trait-champ);
  border-radius: 0.5rem;
}

.plus-jour:hover {
  color: var(--principale-fonce);
  background: var(--principale-teinte);
  border-color: var(--principale);
}

.jour-court {
  display: none;
}

.vide-jour {
  color: var(--encre-douce);
  font-size: 0.875rem;
}

.cartes-jour {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

@media (min-width: 64rem) {
  /* Sept colonnes dès 1024 px, barre latérale ouverte : une colonne fait alors une centaine de pixels ; marges et
     badges se resserrent pour qu'un mot entier (« Programmé ») tienne dans sa carte. */
  .grille-semaine {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.375rem;
  }

  .colonne-jour {
    min-height: 16rem;
    padding: 0.375rem;
  }

  .grille-semaine .badge {
    padding-inline: 0.25rem;
    font-size: 0.6875rem;
  }

  .plus-jour {
    width: 1.75rem;
    height: 1.75rem;
  }

  .jour-court {
    display: inline;
  }

  .jour-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .cartes-jour .carte-post {
    gap: 0.375rem;
    padding: 0.375rem;
    font-size: 0.875rem;
  }

  .cartes-jour .carte-post-corps {
    flex-direction: column;
    gap: 0.375rem;
  }

  .cartes-jour .vignette {
    width: 100%;
    height: 4.5rem;
  }

  .cartes-jour .extrait {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* ---- Fiche d'un post ------------------------------------------------------------------------------------ */

.quand {
  font-weight: 600;
}

.texte-post {
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pieces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.piece {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.piece img,
.piece video {
  width: 100%;
  max-height: 16rem;
  object-fit: contain;
  background: var(--neutre-fond);
  border: 1px solid var(--trait);
  border-radius: 0.5rem;
}

.piece-nom {
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.resultats {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resultat {
  display: grid;
  gap: 0.375rem;
  padding: 0.75rem;
  border: 1px solid var(--trait);
  border-radius: 0.5rem;
}

.resultat-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.raison {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  color: var(--erreur-texte);
  background: var(--erreur-fond);
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

/* ---- Métriques ------------------------------------------------------------------------------------------ */

.filtre-periode {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}

.filtre-periode .champ {
  flex: 1 1 10rem;
}

.totaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0.75rem;
  margin: 0;
}

.total {
  padding: 0.75rem;
  background: var(--surface-douce);
  border: 1px solid var(--trait);
  border-radius: 0.5rem;
}

.total dt {
  color: var(--encre-douce);
  font-size: 0.875rem;
  font-weight: 600;
}

.total dd {
  margin: 0.25rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- Fenêtre centrée ------------------------------------------------------------------------------------ */

#fenetre:empty {
  display: none;
}

.voile {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow-y: auto;
  background: var(--voile);
}

.fenetre {
  --genre: var(--principale);
  display: grid;
  gap: 1rem;
  width: min(32rem, 100%);
  padding: 1.25rem;
  background: var(--surface);
  border-top: 0.375rem solid var(--genre);
  border-radius: 0.75rem;
  box-shadow: var(--ombre-fenetre);
}

.fenetre.attention {
  --genre: var(--attention);
}

.fenetre.annonce {
  --genre: var(--succes);
}

.fenetre-entete {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fenetre-entete h2 {
  flex: 1;
  min-width: 0;
  font-size: 1.25rem;
}

.fenetre-icone {
  display: inline-flex;
  color: var(--genre);
}

.fenetre-icone .icone {
  width: 1.75rem;
  height: 1.75rem;
}

.fenetre-corps {
  display: grid;
  gap: 0.5rem;
  overflow-wrap: anywhere;
}

.fenetre-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}