/* Backoffice — mêmes couleurs et mêmes polices que le site, pour qu'on ne se
   demande jamais sur quel outil on est. */
:root {
  --nuit:#000A1C; --encre:#001751; --ardoise:#5C7897; --brume:#8DA9C4;
  --givre:#D3E2ED; --neige:#F1F6FA; --or:#FFBA13; --ocre:#946200;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box }
body { margin:0; background:#fff; color:var(--nuit);
  font:15px/1.5 Archivo, system-ui, -apple-system, sans-serif; -webkit-font-smoothing:antialiased }
h1,h2,h3 { margin:0; font-weight:600; letter-spacing:-.02em }
button, input, select, textarea { font:inherit; color:inherit }

.bo-k { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ocre) }
.bo-lb { font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--ardoise); display:block; margin-bottom:5px }
.bo-in, .bo-ta, .bo-se {
  width:100%; padding:9px 11px; border:1px solid var(--givre); background:#fff;
  outline:none; transition:border-color .2s }
.bo-in:focus, .bo-ta:focus, .bo-se:focus { border-color:var(--or) }
.bo-ta { min-height:76px; resize:vertical; line-height:1.55 }
.bo-b { background:var(--nuit); color:#fff; border:none; padding:11px 18px; font-weight:600;
  cursor:pointer; transition:background .2s }
.bo-b:hover { background:var(--ocre) }
.bo-b[disabled] { opacity:.45; cursor:default }
.bo-b2 { background:transparent; color:var(--encre); border:1px solid var(--givre); padding:8px 13px;
  cursor:pointer; transition:border-color .2s, color .2s }
.bo-b2:hover { border-color:var(--ocre); color:var(--ocre) }
.bo-b3 { background:var(--or); color:var(--nuit) }
.bo-b3:hover { background:var(--nuit); color:#fff }
.bo-err { color:#B3261E; font-size:13.5px; margin:10px 0 0 }
.bo-ok { color:var(--ocre); font-size:13px; font-family:var(--mono); letter-spacing:.06em }

/* Connexion */
.bo-centre { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--neige) }
.bo-connexion { width:340px; background:#fff; border:1px solid var(--givre); padding:34px 32px 30px }
.bo-connexion h1 { font-size:22px; margin:8px 0 26px }
.bo-connexion .bo-b { width:100%; margin-top:16px }

/* Charpente */
.bo-tete { position:sticky; top:0; z-index:5; background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--givre); display:flex; align-items:center; gap:18px; padding:0 22px; height:58px }
.bo-tete h1 { font-size:15px }
.bo-tete .bo-droite { margin-left:auto; display:flex; align-items:center; gap:10px }
.bo-corps { display:grid; grid-template-columns:320px minmax(0,1fr); align-items:start;
  min-height:calc(100vh - 58px) }
/* La colonne de gauche reste en place pendant qu'on fait défiler un article :
   sur un formulaire de deux écrans, elle disparaissait sans raison. */
.bo-flanc { position:sticky; top:58px; height:calc(100vh - 58px); overflow-y:auto;
  border-right:1px solid var(--givre); background:var(--neige) }
.bo-panneau { padding:26px 30px 0; overflow-y:auto }

/* Liste */
.bo-onglets { display:flex; border-bottom:1px solid var(--givre) }
.bo-onglet { flex:1; padding:12px; background:transparent; border:none; border-bottom:2px solid transparent;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ardoise); cursor:pointer }
.bo-onglet.is-on { color:var(--nuit); border-bottom-color:var(--or); font-weight:600 }
.bo-fiche { display:block; width:100%; text-align:left; padding:13px 18px; background:transparent;
  border:none; border-bottom:1px solid var(--givre); cursor:pointer; transition:background .15s }
.bo-fiche:hover { background:#fff }
.bo-fiche.is-on { background:#fff; box-shadow:inset 3px 0 0 var(--or) }
.bo-fiche-t { font-size:14px; font-weight:600; line-height:1.3; margin-bottom:5px }
.bo-fiche-m { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--ardoise);
  display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.bo-pastille { padding:2px 6px; border:1px solid var(--givre) }
.bo-pastille.is-redige { background:var(--nuit); color:#fff; border-color:var(--nuit) }
.bo-pastille.is-brouillon { color:var(--ocre); border-color:var(--ocre) }

/* Formulaire */
.bo-grille { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; margin-bottom:26px }
.bo-large { grid-column:1 / -1 }
.bo-titre-sec { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ocre);
  padding-bottom:10px; border-bottom:1px solid var(--givre); margin:30px 0 18px }

/* Blocs */
.bo-bloc { border:1px solid var(--givre); margin-bottom:12px; background:#fff }
.bo-bloc-tete { display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--neige);
  border-bottom:1px solid var(--givre) }
.bo-bloc-nom { font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--ocre); font-weight:600 }
.bo-bloc-outils { margin-left:auto; display:flex; gap:4px }
.bo-ico { width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--givre); cursor:pointer; font-size:12px; line-height:1 }
.bo-ico:hover { border-color:var(--ocre); color:var(--ocre) }
.bo-bloc-corps { padding:14px 12px; display:grid; gap:10px }
.bo-ajout { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; padding-top:16px; border-top:1px dashed var(--givre) }
.bo-ajout button { font-family:var(--mono); font-size:10px; letter-spacing:.1em; padding:7px 11px }

/* Tableau, listes d'items */
.bo-mini { width:100%; border-collapse:collapse; font-size:13px }
.bo-mini th, .bo-mini td { border:1px solid var(--givre); padding:0 }
.bo-mini input { width:100%; border:none; padding:7px 8px; outline:none; background:transparent }
.bo-mini input:focus { background:#FFFBEF }
.bo-mini th { background:var(--neige) }
.bo-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start }

/* La marge basse négative retirait la hauteur de la barre du flux : les
   boutons d'ajout de blocs finissaient DESSOUS, recouverts de 54 px et donc
   inatteignables au clic. La barre occupe maintenant sa place. */
.bo-pied { position:sticky; bottom:0; background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--givre); padding:12px 30px; display:flex; align-items:center; gap:12px;
  margin:26px -30px 0 }
.bo-vide { padding:60px 30px; color:var(--ardoise); text-align:center }

@media (max-width:900px) {
  .bo-corps { grid-template-columns:minmax(0,1fr) }
  /* Sur petit écran, la colonne reprend sa place dans le flux : la figer
     mangerait la moitié de la hauteur utile. */
  .bo-flanc { position:static; height:auto; max-height:40vh;
    border-right:none; border-bottom:1px solid var(--givre) }
  .bo-grille { grid-template-columns:minmax(0,1fr) }
}

/* -- Modales ----------------------------------------------------------------
   Remplacent prompt(), confirm() et alert() : le navigateur ne les met pas en
   forme, bloque le fil d'exécution, et n'accepte qu'un seul champ.
   -------------------------------------------------------------------------- */

.bo-voile { position:fixed; inset:0; z-index:50; background:rgba(0,10,28,.45);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; transition:opacity .16s }
.bo-voile.is-on { opacity:1 }

.bo-modale { width:100%; max-width:520px; max-height:calc(100vh - 48px); overflow-y:auto;
  background:#fff; border:1px solid var(--givre); box-shadow:0 24px 60px rgba(0,10,28,.28);
  transform:translateY(8px); transition:transform .16s cubic-bezier(.2,.7,.2,1) }
.bo-voile.is-on .bo-modale { transform:none }

.bo-modale-tete { padding:22px 26px 0 }
.bo-modale-tete h2 { font-size:20px; margin-bottom:6px }
.bo-modale-tete p { margin:0; font-size:14px; line-height:1.55; color:var(--ardoise) }
.bo-modale-corps { padding:20px 26px 4px; display:grid; gap:14px }
.bo-modale-pied { padding:18px 26px 22px; display:flex; gap:10px; align-items:center }
.bo-modale-pied .bo-b, .bo-modale-pied .bo-b2 { flex:none }
.bo-modale-pied .bo-annuler { margin-left:auto; order:-1 }
.bo-modale-danger .bo-b { background:#B3261E }
.bo-modale-danger .bo-b:hover { background:#8C1D18 }

.bo-apercu { font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ardoise);
  padding:7px 10px; background:var(--neige); border:1px solid var(--givre); word-break:break-all }
.bo-apercu b { color:var(--nuit); font-weight:600 }

.bo-liste-err { margin:0; padding:0; list-style:none; display:grid; gap:8px;
  max-height:300px; overflow-y:auto }
.bo-liste-err li { font-size:13.5px; line-height:1.45; padding:9px 11px;
  background:var(--neige); border-left:2px solid #B3261E }
.bo-liste-err code { font-family:var(--mono); font-size:11.5px; color:var(--ocre) }

/* -- Onglets du panneau ------------------------------------------------------
   « Général » et « Contenu ». Le formulaire faisait défiler sur deux écrans, et
   les boutons d'ajout de blocs se perdaient tout en bas.
   -------------------------------------------------------------------------- */

.bo-tabs { display:flex; gap:2px; border-bottom:1px solid var(--givre); margin:0 -30px 24px; padding:0 30px }
.bo-tab { padding:11px 18px; background:transparent; border:none; border-bottom:2px solid transparent;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ardoise);
  cursor:pointer; transition:color .2s, border-color .2s }
.bo-tab:hover { color:var(--nuit) }
.bo-tab.is-on { color:var(--nuit); font-weight:600; border-bottom-color:var(--or) }
.bo-tab-n { margin-left:7px; font-size:10px; color:var(--ocre) }
.bo-volet[hidden] { display:none }

/* -- Couverture -------------------------------------------------------------- */

.bo-photo { display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; align-items:start }
.bo-photo-vue { position:relative; aspect-ratio:21/9; background:var(--neige);
  border:1px solid var(--givre); overflow:hidden; display:flex; align-items:center;
  justify-content:center }
.bo-photo-vue img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.bo-photo-vide { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--brume);
  text-align:center; padding:10px }
.bo-photo-actions { display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.bo-photo-info { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ardoise);
  line-height:1.7 }
.bo-photo-aide { font-size:13px; line-height:1.55; color:var(--ardoise); margin:0 }
.bo-photo.is-charge .bo-photo-vue { opacity:.5 }

@media (max-width:900px) { .bo-photo { grid-template-columns:minmax(0,1fr) } }

/* -- Navigation latérale -----------------------------------------------------
   Le backoffice ne gère plus seulement des articles : les textes de la page
   liste et les images ont besoin de leur propre entrée.
   -------------------------------------------------------------------------- */

.bo-nav { border-bottom:1px solid var(--givre); padding:10px 0 }
.bo-nav-e { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 18px; background:transparent; border:none; cursor:pointer;
  font-size:14px; color:var(--encre); border-left:3px solid transparent;
  transition:background .15s, color .15s, border-color .15s }
.bo-nav-e:hover { background:#fff; color:var(--nuit) }
.bo-nav-e.is-on { background:#fff; color:var(--nuit); font-weight:600; border-left-color:var(--or) }
.bo-nav-e svg { width:16px; height:16px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.7 }
.bo-nav-e.is-on svg { opacity:1 }
.bo-nav-n { margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--ardoise) }

/* -- Bibliothèque d'images ---------------------------------------------------- */

.bo-medias { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px }
.bo-media { border:1px solid var(--givre); background:#fff; display:flex; flex-direction:column }
.bo-media-vue { position:relative; aspect-ratio:16/9; background:var(--neige); overflow:hidden }
.bo-media-vue img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.bo-media-bas { padding:10px 12px; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--ardoise) }
.bo-media-bas button { margin-left:auto }
.bo-media-usage { padding:0 12px 10px; font-size:12px; line-height:1.4; color:var(--ocre) }

/* -- Statut de l'article -----------------------------------------------------
   Visible en tête du panneau : en cours d'édition, on doit savoir d'un coup
   d'œil si ce qu'on écrit est en ligne ou non.
   -------------------------------------------------------------------------- */

.bo-statut { display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; font-weight:600 }
.bo-statut::before { content:''; width:7px; height:7px; border-radius:50%; flex:none }
.bo-statut.est-publie { background:var(--nuit); color:#fff }
.bo-statut.est-publie::before { background:#3FBF6A }
.bo-statut.est-brouillon { background:#FFF6DE; color:var(--ocre); border:1px solid #F4DFA8 }
.bo-statut.est-brouillon::before { background:var(--or) }

.bo-entete { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:4px }
.bo-entete h2 { flex:1 1 320px; min-width:0 }
.bo-statut-aide { font-size:13px; line-height:1.5; color:var(--ardoise); margin:10px 0 18px;
  max-width:70ch }
.bo-pied .bo-publier { background:#1C7A3E }
.bo-pied .bo-publier:hover { background:#14612F }