/* ==========================================================================
   Calendrier éditorial de Montévrain
   Couleurs et typographie issues de Links/CHARTE-2025-utilisateur.pdf.
   ========================================================================== */

:root {
  /* Palette sobre de la charte, base de l'interface */
  --beige:        #D5C69F;
  --gris:         #575756;
  --vert-grise:   #7A8774;

  /* Palette saturée de la charte, accents et actions clés */
  --bleu:         #0B6DB6;
  --cyan:         #1AB7CF;
  --bleu-nuit:    #00104C;
  --vert-clair:   #B8D745;
  --vert:         #69B42E;
  --vert-fonce:   #17693D;

  --noir:         #1D1D1B;

  /* Déclinaisons d'interface */
  --fond:         #F7F4EC;
  --fond-creux:   #EFEADD;
  --surface:      #FFFFFF;
  --bordure:      #E2DCCB;
  --bordure-forte:#C9C0A8;
  --texte:        var(--noir);
  --texte-doux:   var(--gris);

  /* Alerte : un brun orangé sobre, lisible sur le beige de la charte, réservé
     aux publications en retard. */
  --alerte:         #9A5B12;
  --alerte-fond:    #FBEFE2;
  --alerte-bordure: #E4C9A9;

  --rayon:        6px;
  --ombre:        0 1px 2px rgba(29, 29, 27, .06), 0 1px 8px rgba(29, 29, 27, .04);
  --ombre-forte:  0 8px 32px rgba(29, 29, 27, .18);
}

* { box-sizing: border-box; }

/* L'attribut hidden doit l'emporter sur les display: grid / flex des composants. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
}

h1, h2, h3 { font-weight: 500; margin: 0; }
a { color: var(--bleu); }

/* ------------------------------------------------------------- en-tête ---- */

.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  position: sticky;
  top: 0;
  z-index: 20;
}

.entete__haut {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .9rem 1.5rem;
  max-width: 1600px;
  margin: 0 auto;
}

.entete__logo img { display: block; height: 34px; width: auto; }

.entete__titre {
  font-size: 1.05rem;
  font-weight: 500;
  padding-left: 1.25rem;
  border-left: 1px solid var(--bordure);
  line-height: 1.25;
}
.entete__titre span {
  display: block;
  font-size: .78rem;
  font-weight: 400;
  color: var(--texte-doux);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.entete__droite {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Deux formulations du même libellé : la longue au large, la courte à l'étroit. */
.texte-court { display: none; }

.badge-role {
  font-size: .75rem;
  padding: .28rem .6rem;
  border-radius: 100px;
  background: var(--fond-creux);
  color: var(--texte-doux);
  border: 1px solid var(--bordure);
  white-space: nowrap;
}
.badge-role--edition { background: rgba(11, 109, 182, .1); color: var(--bleu); border-color: rgba(11, 109, 182, .25); }

/* ---------------------------------------------------------- navigation ---- */

.nav {
  display: flex;
  gap: .25rem;
  background: var(--surface);
  padding: 0 1.5rem;
  max-width: 1600px;
  margin: 0 auto;
  overflow-x: auto;
}

.nav a {
  padding: .6rem .9rem;
  font-size: .92rem;
  color: var(--texte-doux);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--texte); }
.nav a[aria-current="page"] {
  color: var(--bleu);
  border-bottom-color: var(--bleu);
  font-weight: 500;
}

/* ------------------------------------------------------------- filtres ---- */

.barre-filtres {
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  padding: .7rem 1.5rem;
}
.barre-filtres__contenu {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

/* Un libellé ne doit jamais se retrouver seul sur une ligne, séparé de son menu. */
.filtre {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: none;
}
.filtre label { font-size: .78rem; color: var(--texte-doux); white-space: nowrap; }
.filtre--recherche { flex: 1 1 14rem; min-width: 10rem; }
.filtre--recherche input { width: 100%; }

.barre-filtres .fin { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

/* Au large, le repli n'est qu'un conteneur : les filtres restent toujours visibles. */
.barre-filtres__repli > summary { display: none; }
.barre-filtres__repli { max-width: 1600px; margin: 0 auto; }

select, input[type="text"], input[type="search"], input[type="date"], input[type="time"],
input[type="password"], textarea {
  font: inherit;
  font-size: .9rem;
  padding: .45rem .55rem;
  min-height: 2.5rem;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
}
select:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 1px;
}
textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }

/* Fiche consultée par les élus : les champs sont verrouillés mais doivent rester
   parfaitement lisibles. Safari (iPad) grise le texte désactivé, d'où le
   -webkit-text-fill-color. */
input:disabled, select:disabled, textarea:disabled {
  opacity: 1;
  color: var(--texte);
  -webkit-text-fill-color: var(--texte);
  background: var(--fond);
  border-color: var(--bordure);
  cursor: default;
}

/* ------------------------------------------------------------- boutons ---- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font: inherit;
  font-size: .9rem;
  padding: .45rem .9rem;
  min-height: 2.5rem;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure-forte);
  background: var(--surface);
  color: var(--texte);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.bouton:hover { background: var(--fond-creux); }
.bouton--principal { background: var(--bleu); border-color: var(--bleu); color: #fff; font-weight: 500; }
.bouton--principal:hover { background: #095a97; }
.bouton--danger { color: #A4241C; border-color: #E3C4C1; background: #fff; }
.bouton--danger:hover { background: #FBEDEC; }
.bouton--discret { border-color: transparent; background: transparent; color: var(--texte-doux); }
.bouton--discret:hover { background: var(--fond-creux); color: var(--texte); }

/* ---------------------------------------------------------- conteneur ----- */

.page { max-width: 1600px; margin: 0 auto; padding: 1.25rem 1.5rem 3rem; }

.titre-vue {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.titre-vue h2 { font-size: 1.25rem; }
.titre-vue .fin { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

.message {
  padding: .7rem 1rem;
  border-radius: var(--rayon);
  margin-bottom: 1rem;
  border-left: 4px solid var(--vert);
  background: #F1F8EA;
  font-size: .92rem;
}
.message--erreur { border-left-color: #A4241C; background: #FBEDEC; }
/* Panne de configuration du serveur : ni refermable, ni effacée automatiquement. */
.message--alerte {
  border-left-color: #A4241C;
  background: #FBEDEC;
  display: block;
  line-height: 1.5;
}
.message { display: flex; align-items: center; gap: .75rem; }
.message__fermer {
  margin-left: auto;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--texte-doux);
  font-size: .9rem;
  line-height: 1;
  padding: .35rem;
  flex: none;
}
.message__fermer:hover { color: var(--texte); }

.vide {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--texte-doux);
  background: var(--surface);
  border: 1px dashed var(--bordure-forte);
  border-radius: var(--rayon);
}

/* ------------------------------------------------------------ vignette ---- */

.vignette {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: left;
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--gris);
  border-radius: var(--rayon);
  padding: .45rem .55rem;
  cursor: pointer;
  color: inherit;
}
.vignette:hover { border-color: var(--bordure-forte); box-shadow: var(--ombre); }
.vignette__haut {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  font-size: .7rem;
  color: var(--texte-doux);
  margin-bottom: .15rem;
}
.vignette__canal {
  font-weight: 500;
  color: var(--texte);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* « +2 » : les canaux que la vignette n'a pas la place de nommer. */
.puce-reste {
  flex: none;
  font-size: .62rem;
  padding: 0 .3rem;
  border-radius: 3px;
  background: var(--fond-creux);
  color: var(--texte-doux);
  line-height: 1.5;
}

/* Étiquette de canal dans la vue liste, qui a la place de tous les afficher. */
.puce-canal {
  font-size: .72rem;
  padding: 0 .35rem;
  border-radius: 3px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.vignette__date { font-weight: 500; color: var(--texte-doux); }
.vignette__titre {
  font-size: .82rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vignette__bas {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .3rem;
  font-size: .7rem;
  color: var(--texte-doux);
}

.puce-format {
  flex: none;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 0 .3rem;
  border-radius: 3px;
  border: 1px solid currentColor;
  line-height: 1.5;
}

.puce-statut {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  white-space: nowrap;
}
.puce-statut::before {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ---------------------------------------------------------- calendrier ---- */

.calendrier {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}
.calendrier__jours {
  display: grid;
  /* minmax(0, 1fr) et non 1fr : « 1fr » vaut « minmax(auto, 1fr) » et refuse de
     descendre sous la largeur du contenu, ce qui faisait déborder puis couper
     les colonnes du week-end sous 1080 px. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--fond-creux);
  border-bottom: 1px solid var(--bordure);
}
.calendrier__jours div {
  padding: .5rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--texte-doux);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.calendrier__grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.case {
  min-width: 0;
  min-height: 8.5rem;
  border-right: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: .35rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.case:nth-child(7n) { border-right: 0; }
.case--hors-mois { background: var(--fond-creux); }
.case--hors-mois .case__numero { color: var(--bordure-forte); }
.case--weekend { background: #FCFAF5; }
.case--aujourdhui { background: rgba(26, 183, 207, .07); }

.case__numero {
  font-size: .8rem;
  color: var(--texte-doux);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.case--aujourdhui .case__numero strong {
  background: var(--bleu);
  color: #fff;
  border-radius: 50%;
  width: 1.4rem; height: 1.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem;
}
.case__ajout {
  border: 0; background: none; cursor: pointer;
  color: var(--bordure-forte); font-size: 1.1rem; line-height: 1;
  padding: .1rem .3rem; opacity: .55;
}
.case:hover .case__ajout, .case__ajout:focus-visible { opacity: 1; }
.case__ajout:hover { color: var(--bleu); }

/* Vue semaine : les journées deviennent des colonnes hautes */
.calendrier--semaine .case { min-height: 22rem; }

/* Rendu agenda du calendrier : réservé aux écrans étroits (voir plus bas). */
.calendrier-agenda { display: none; }
.agenda__ajout { margin-top: .3rem; font-size: .8rem; }
.vide--calendrier { margin-bottom: 1rem; }

/* --------------------------------------------------------------- liste ---- */

.liste-jour { margin-bottom: 1.5rem; }
.liste-jour__titre {
  font-size: .82rem;
  font-weight: 500;
  color: var(--texte-doux);
  padding-bottom: .35rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--bordure);
  display: flex; align-items: baseline; gap: .6rem;
}
.liste-jour__titre em { font-style: normal; font-weight: 400; font-size: .78rem; }
.liste-jour--aujourdhui .liste-jour__titre { color: var(--bleu); border-bottom-color: var(--bleu); }

.ligne {
  display: grid;
  grid-template-columns: 4.5rem 11rem 1fr 8rem 7.5rem auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--gris);
  border-radius: var(--rayon);
  padding: .6rem .8rem;
  margin-bottom: .4rem;
  cursor: pointer;
}
.ligne:hover { border-color: var(--bordure-forte); box-shadow: var(--ombre); }
.ligne__heure { font-size: .85rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.ligne__canal { font-size: .85rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.ligne__texte { min-width: 0; }
.ligne__texte strong { font-weight: 500; font-size: .93rem; display: block; }
.ligne__texte span {
  font-size: .8rem; color: var(--texte-doux);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ligne__responsable { font-size: .85rem; color: var(--texte-doux); }

/* ------------------------------------------------------------- colonnes --- */

.colonnes {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 1rem;
}
.colonnes--statuts .colonne { flex: 1 1 0; min-width: 15rem; }
.colonnes--canaux .colonne { flex: 0 0 15rem; }

.colonne {
  background: var(--fond-creux);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 15rem);
}
.colonne__titre {
  padding: .6rem .7rem;
  font-size: .85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .45rem;
  border-bottom: 1px solid var(--bordure);
  border-top: 3px solid var(--gris);
  border-radius: var(--rayon) var(--rayon) 0 0;
  background: var(--surface);
  position: sticky; top: 0;
}
.colonne__compte {
  margin-left: auto;
  font-size: .75rem;
  font-weight: 400;
  color: var(--texte-doux);
  background: var(--fond-creux);
  border-radius: 100px;
  padding: 0 .45rem;
}
.colonne__corps {
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  overflow-y: auto;
  min-height: 4.5rem;
}
.colonne__corps.survol { background: rgba(11, 109, 182, .08); box-shadow: inset 0 0 0 2px var(--bleu); }
.colonne__vide { font-size: .8rem; color: var(--texte-doux); text-align: center; padding: .8rem .4rem; }

.vignette[draggable="true"] { cursor: grab; }
.vignette.en-deplacement { opacity: .45; }

/* Report d'une publication au doigt, sous les cartes de l'agenda. */
.deplacer {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .25rem 0 0;
  font-size: .78rem;
  color: var(--texte-doux);
}
.deplacer label { flex: none; }
.vignette__date-rapide {
  font-size: .78rem;
  padding: .25rem .4rem;
  min-height: 2.5rem;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--bordure);
  background: var(--surface);
  color: var(--texte);
  border-radius: var(--rayon);
}
.vignette__date-rapide:hover { border-color: var(--bordure-forte); }

.vignette__statut-select {
  font-size: .7rem;
  padding: .1rem .2rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--texte-doux);
  border-radius: 3px;
  max-width: 100%;
}
.vignette__statut-select:hover { border-color: var(--bordure-forte); background: var(--surface); }

/* Carte du kanban : la vignette et son menu de statut vont ensemble. */
.carte-groupe { display: flex; flex-direction: column; gap: .15rem; }

/* Étiquette réservée aux lecteurs d'écran. */
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Publication dont la date est passée sans avoir été marquée « Publiée ». */
.vignette--retard { border-left-color: var(--alerte) !important; }
.puce-retard {
  flex: none;
  font-size: .7rem;
  color: var(--alerte);
  line-height: 1;
  cursor: help;
}
.ligne--retard { border-left-color: var(--alerte) !important; }
.etiquette-retard {
  display: inline-block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .05rem .35rem;
  border-radius: 3px;
  background: var(--alerte-fond);
  color: var(--alerte);
  font-weight: 500;
  margin-top: .15rem;
}
.bouton--retard {
  border-color: var(--alerte-bordure);
  background: var(--alerte-fond);
  color: var(--alerte);
  font-weight: 500;
}
.bouton--retard:hover { background: #F6E4D8; }

.message__annuler {
  margin-left: auto;
  border: 1px solid var(--bordure-forte);
  background: var(--surface);
  flex: none;
  min-height: 2rem;
  padding: .3rem .7rem;
}
.message__annuler + .message__fermer { margin-left: .25rem; }

/* --------------------------------------------------------------- fiche ---- */

dialog.fiche {
  border: 0;
  border-radius: 10px;
  padding: 0;
  width: min(46rem, calc(100vw - 2rem));
  box-shadow: var(--ombre-forte);
  color: var(--texte);
  background: var(--surface);
  /* Seul le corps défile : sinon la fiche défile d'un bloc et l'en-tête, avec sa
     croix de fermeture, s'échappe hors de l'écran dès qu'on descend. */
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}

/* display est posé sur [open] seulement : sur la règle de base il l'emporterait
   sur le « display: none » du navigateur et la fiche resterait visible fermée. */
dialog.fiche[open] { display: flex; flex-direction: column; }

/* Le formulaire est le seul enfant direct de la modale : c'est donc lui qui doit
   porter la colonne, sinon en-tête, corps et pied restent en flux normal et
   débordent par le bas. */
dialog.fiche > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.fiche__entete, .fiche__pied { flex: none; }
dialog.fiche::backdrop { background: rgba(29, 29, 27, .45); }

.fiche__entete {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bordure);
}
.fiche__entete h2 { font-size: 1.05rem; }
.fiche__corps {
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.fiche__pied {
  padding: .9rem 1.25rem;
  border-top: 1px solid var(--bordure);
  background: var(--fond);
  display: flex; gap: .6rem; align-items: center;
  border-radius: 0 0 10px 10px;
}
.fiche__pied .fin { margin-left: auto; display: flex; gap: .6rem; }

.champs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.champ { display: grid; gap: .3rem; }
.champ--large { grid-column: 1 / -1; }
.champ > label { font-size: .82rem; font-weight: 500; }
.champ .aide { font-size: .76rem; color: var(--texte-doux); }
/* Les cases à cocher sont exclues : une case étirée à 100 % remplit sa pastille
   et pousse son libellé hors de la bordure. */
.champ input:not([type="checkbox"]):not([type="radio"]),
.champ select,
.champ textarea { width: 100%; }
.obligatoire { color: #A4241C; }

/* Choix des canaux : une ligne par réseau, cases à cocher tactiles. */
.canaux {
  border: 0;
  padding: 0;
  margin: 0;
  /* Un fieldset refuse par défaut de descendre sous la largeur de son contenu,
     et déborderait de la fiche sur un écran étroit. */
  min-width: 0;
}
.canaux legend { font-size: .82rem; font-weight: 500; padding: 0; margin-bottom: .5rem; }
.canaux__reseau {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--bordure);
}
.canaux__reseau:last-of-type { border-bottom: 0; }
.canaux__titre {
  flex: 0 0 7rem;
  font-size: .82rem;
  color: var(--texte-doux);
}
.canal-case {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  min-height: 2.5rem;
  border: 1px solid var(--bordure-forte);
  border-radius: 100px;
  font-size: .85rem;
  cursor: pointer;
  background: var(--surface);
  user-select: none;
  /* Le libellé reste d'un seul tenant : c'est entre les pastilles que ça passe
     à la ligne, pas à l'intérieur. */
  white-space: nowrap;
  /* flex: none est indispensable. Sans lui, la pastille vaut « flex: 0 1 auto »,
     se laisse comprimer par la ligne, et comme le texte ne peut pas se replier
     il déborde de la bordure : « Post » s'affichait « Po », « LinkedIn » « Li ». */
  flex: none;
}
.canal-case:hover { background: var(--fond-creux); }
.canal-case input {
  margin: 0;
  accent-color: var(--canal, var(--bleu));
  /* Taille figée et flex: none. Chrome ramène une case étirée à sa largeur
     intrinsèque, Safari non : le libellé sortait alors de la pastille
     (« Post » devenait « Po »). On ne compte donc sur aucun navigateur. */
  flex: none;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
}
.canal-case:has(input:checked) {
  border-color: var(--canal);
  background: color-mix(in srgb, var(--canal) 10%, white);
  font-weight: 500;
}
.canal-case:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 1px; }
.canal-case input:disabled { cursor: default; }
.canaux .aide { margin-top: .5rem; display: block; }

/* Compteur de caractères sous le texte de la publication. */
.compteur { font-variant-numeric: tabular-nums; }
.compteur--proche { color: #8A6100; }
.compteur--depasse { color: #A4241C; font-weight: 500; }

/* ------------------------------------------------------------ connexion --- */

.connexion {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.connexion__carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  box-shadow: var(--ombre);
  padding: 2.25rem;
  width: min(24rem, 100%);
  text-align: center;
}
.connexion__carte img { height: 42px; width: auto; margin-bottom: 1.5rem; }
.connexion__carte h1 { font-size: 1.1rem; margin-bottom: .3rem; }
.connexion__carte p.sous-titre { font-size: .85rem; color: var(--texte-doux); margin: 0 0 1.5rem; }
.connexion__carte form { display: grid; gap: .7rem; text-align: left; }
.connexion__carte .bouton { justify-content: center; }
.connexion__erreur {
  background: #FBEDEC; border-left: 4px solid #A4241C;
  padding: .6rem .8rem; font-size: .85rem; text-align: left; margin-bottom: 1rem;
  border-radius: var(--rayon);
}
.connexion__pied { margin-top: 1.5rem; font-size: .78rem; color: var(--texte-doux); }

/* ----------------------------------------------------------- pied page ---- */

.pied {
  border-top: 1px solid var(--bordure);
  padding: 1.25rem 1.5rem;
  font-size: .78rem;
  color: var(--texte-doux);
  text-align: center;
}

/* ------------------------------------------------------------ réactif ----- */

/* Sous 900 px, une grille de 7 colonnes devient illisible : le calendrier
   bascule en agenda. Les deux rendus sont produits par le serveur, le CSS
   n'en montre qu'un. C'est le seul moyen de basculer sans JavaScript. */
@media (max-width: 900px) {
  .calendrier-grille { display: none; }
  .calendrier-agenda { display: block; }

  /* Deux zones de défilement emboîtées sont pénibles au doigt : la page défile. */
  .colonne { max-height: none; }

  /* La ligne se replie en trois niveaux : quand/où, quoi, puis qui/où ça en est. */
  .ligne {
    grid-template-columns: auto 1fr;
    column-gap: .8rem;
    row-gap: .25rem;
  }
  .ligne__heure       { grid-area: 1 / 1; }
  .ligne__canal       { grid-area: 1 / 2; }
  .ligne__texte       { grid-area: 2 / 1 / 3 / -1; }
  .ligne__statut      { grid-area: 3 / 1; }
  .ligne__responsable { grid-area: 3 / 2; }
  .ligne > [aria-hidden="true"] { display: none; }

  .champs { grid-template-columns: 1fr; }
  .case { min-height: 6rem; }
  .entete__titre { padding-left: .9rem; font-size: .95rem; }
}

/* Sous 768 px, les filtres se replient derrière un bouton pour rendre l'écran
   au contenu, et s'ouvrent d'office si un filtre est déjà actif. */
@media (max-width: 768px) {
  .barre-filtres__repli > summary {
    display: block;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 500;
    padding: .35rem 0;
    list-style-position: inside;
  }
  .barre-filtres__contenu { padding-top: .6rem; }
  .filtre { flex: 1 1 100%; }
  .filtre select, .filtre--recherche { width: 100%; }
  .filtre label { flex: 0 0 5.5rem; }
  .barre-filtres .fin { margin-left: 0; width: 100%; }
  .barre-filtres .fin .bouton { width: 100%; }
}

@media (max-width: 640px) {
  .page, .entete__haut, .barre-filtres, .nav { padding-left: .85rem; padding-right: .85rem; }
  .entete__haut { gap: .6rem; padding-top: .6rem; padding-bottom: .6rem; }
  .entete__logo img { height: 26px; }
  .entete__titre { font-size: .85rem; padding-left: .6rem; }
  .entete__titre span { font-size: .62rem; }

  /* « Se déconnecter » sortait de l'écran : libellés courts, bouton icône. */
  .texte-long { display: none; }
  .texte-court { display: inline; }
  .deconnexion { font-size: 1.1rem; padding: .3rem .55rem; min-width: 2.5rem; }
  .badge-role { font-size: .68rem; padding: .2rem .45rem; }

  .nav a { padding: .6rem .7rem; font-size: .88rem; }
  .titre-vue h2 { font-size: 1.1rem; }
  .colonnes--statuts .colonne { flex: 0 0 15rem; }
  .canaux__titre { flex: 0 0 100%; font-weight: 500; }
  .fiche__pied { flex-wrap: wrap; }
  .fiche__pied .fin { width: 100%; }
  .fiche__pied .fin .bouton { flex: 1; }
}

@media print {
  .nav, .barre-filtres, .entete__droite, .titre-vue .fin, .case__ajout, .pied { display: none; }
  body { background: #fff; }
}