/* UIDD - Vitrine publique.
   Identite visuelle UIDD cadree et validee le 23-07-2026 (uidd-spec.md
   section 12). --accent reste surchargeable par Programme (style inline
   depuis accent_color) : une seule couleur par Programme, cf section 3.
   --marque est la couleur de marque officielle, independante de l'accent
   choisi par un Programme - elle sert au chrome du site (nav commune), pas
   au contenu propre a un Programme. */

:root {
  --fond: #f5f5f4;
  --carte: #ffffff;
  --texte: #1c1917;
  --texte-doux: #78716c;
  --bordure: #e7e5e4;
  --accent: #1c1917;

  /* Marque UIDD (fixe, independante du theme clair/sombre) */
  --marque: #12b0a6;
  --marque-fonce: #0a746e;
  --marque-pale: #e3f5f3;
  /* CONTRASTE DU TEAL - option B, choisie par Alice le 07-08-2026.
     Le teal de marque #12b0a6 est CONSERVE comme couleur d'identite, mais il
     donne 2,70:1 avec du blanc, sous le seuil de 4,5:1. On ne le remplace pas :
     on distingue trois usages, chacun avec la valeur qui se lit.

       --marque        identite, aplats DECORATIFS sans texte. Inchangee.
       --marque-fond   fond portant du texte blanc      -> 5,62:1
       --marque-texte  texte et bordures a faire ressortir

     --marque-texte BASCULE selon le theme, et c'est le point contre-intuitif :
     en theme SOMBRE, c'est le teal FONCE qui devient illisible (2,70:1 sur la
     carte sombre) tandis que le teal clair passe a 5,62:1. Chaque theme a donc
     son teal lisible, a l'oppose l'un de l'autre.
     --marque-fond, lui, ne bascule pas : un texte blanc sur son propre fond ne
     depend pas du theme de la page. */
  --marque-fond: #0a746e;
  --marque-texte: #0a746e;


  /* Variables de theme surchargeables PAR PROGRAMME (05-08-2026).
     Elles portent ici la valeur du theme UIDD commun ; includes/front_vue.php
     ne pose une valeur en style inline que pour les couleurs reellement
     choisies. « Heriter » ne demande donc aucun traitement : il suffit de ne
     rien ecrire, et ces valeurs-ci s'appliquent. */
  --accent-texte: #ffffff;
  --titre-carte: var(--texte);
  --fond-medias: var(--carte);
  --fond-logo-clair: var(--carte);
  --fond-logo-sombre: var(--marque-fonce);

  /* Aller : a auto-heberger en woff2 quand le fichier sera fourni, cf uidd-spec.md section 8 */
  --police-marque: "Aller", ui-rounded, "SF Pro Rounded", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* cf le bloc clair : en theme sombre le teal lisible est le CLAIR. */
    --marque-texte: #12b0a6;

    /* En theme sombre, le fond des visuels bascule sur le reglage sombre du
       Programme. Sans ca, un logo pose sur un fond clair choisi pour le
       theme clair deviendrait une tache blanche. */
    --fond-logo-clair: var(--fond-logo-sombre);
    --fond: #1c1917;
    --carte: #292524;
    --texte: #fafaf9;
    --texte-doux: #a8a29e;
    --bordure: #44403c;
    --accent: #fafaf9;
  }
}

* { box-sizing: border-box; }

/* Meme raison que dans admin.css : `hidden` est pose par la feuille par
   defaut du navigateur, donc n'importe quelle regle d'auteur avec un
   `display` le bat. Le front masque plusieurs blocs par cet attribut
   (formulaires d'edition, bloc d'ajout) : on ferme le piege ici aussi. */
[hidden] { display: none !important; }

/* Réserve la gouttière de la barre de défilement en permanence.
   Sans ça, la largeur utile change d'une quinzaine de pixels entre une page
   assez longue pour faire apparaître la barre (UiDD, 48 cartes) et une page
   qui tient dans l'écran : tout le contenu se décale latéralement au
   changement d'onglet. Signalé par Alice le 05-08-2026, qui l'a vu sans
   savoir d'où ça venait - c'est exactement le genre de gêne qu'on ressent
   avant de savoir la nommer. */
html { scrollbar-gutter: stable; }

body.front {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a { color: var(--accent); }

img { max-width: 100%; display: block; }

/* --- En-tete --- */

/* En-tete = marque centree puis selecteur de Programme (demande Alice
   23-07-2026 : le menu vit dans le header, centre, en barre segmentee). */
/* --- En-tête à deux pôles (05-08-2026) ---
   Logo de marque à gauche, titre de la section à droite. Le nom du Programme
   était auparavant un troisième bloc empilé sous la nav, ce qui se lisait
   comme une répétition du bouton actif du bandeau. Il est maintenant l'ancre
   de l'en-tête, et le bandeau redevient de la navigation. */
.front-entete {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.5rem 1.25rem;
  background: var(--carte);
  border-bottom: 1px solid var(--bordure);
}

.front-entete__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 64rem;   /* aligné sur .front-contenu, sinon le titre et le */
  margin: 0 auto;     /* contenu ne partagent pas la même marge gauche */
}

.front-entete__titre {
  margin: 0;
  min-width: 0;                 /* sans ça, un nom long refuse de se réduire */
  font-family: var(--police-marque);
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--texte);
  text-align: right;            /* le titre se cale sur le bord opposé au logo */
}

/* Le logo ne se comprime jamais : c'est lui qui doit rester intact quand la
   place manque, le titre sait passer à la ligne. */
.front-entete__marque { flex: none; display: block; }

.front-entete__logo {
  display: block;
  height: 2.75rem;
  width: auto;
}

@media (max-width: 34rem) {
  /* Sur mobile, côte à côte serait illisible pour « Le Monde Dans Ton
     Assiette ». Le logo reste au-dessus, en petit, et le titre récupère
     toute la largeur en repassant à gauche. */
  .front-entete__haut {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
  }
  .front-entete__titre { font-size: 1.5rem; text-align: left; }
  .front-entete__logo { height: 2.25rem; }
}

/* --- Contenu general --- */

.front-contenu {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.front-vide {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--texte-doux);
}

.front-pied {
  padding: 1.5rem;
  text-align: center;
  color: var(--texte-doux);
  font-size: 0.8125rem;
}

/* --- Bandeau Programmes + onglets (dashboard public) ---
   Meme mecanisme visuel que le back-office (cf admin.css, uidd-spec.md
   section 12) : le front EST l'UI du BO rendue publique. Les regles sont
   dupliquees ici volontairement - le front ne charge jamais admin.css, qui
   contient des styles de formulaires inutiles a un visiteur. */

.bandeau-programmes {
  display: flex;
  margin: 0 0 1.5rem;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 0.75rem;
  overflow-x: auto;
}

/* Variante en-tete : barre segmentee centree facon ABTOOLZ (nav clients).
   Un seul cadre, des cases jointives de largeur egale separees par des
   traits, pas de pastilles. Centree via la largeur limitee + margin auto,
   alignee sur la colonne de contenu (max-width identique). */
.bandeau-programmes--entete {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
}

/* Contenu de chaque case centre (l'aspect "tableau" d'ABTOOLZ). */
.bandeau-programmes--entete .bandeau-programmes__item {
  justify-content: center;
}

.bandeau-programmes__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 0;
  min-width: 8rem;
  padding: 0.625rem 0.875rem;
  border-right: 1px solid var(--bordure);
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
}

.bandeau-programmes__item:last-child { border-right: 0; }

.bandeau-programmes__item:hover { background: var(--fond); }

.bandeau-programmes__item--actif,
.bandeau-programmes__item--actif:hover {
  background: var(--marque-fond);
  color: #fff;
}

.bandeau-programmes__nom {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Marqueur "Brouillon" du bandeau. Rendu uniquement pour un membre connecte
   (un anonyme ne recoit jamais de Programme non publie dans la liste), donc
   ce style ne peut pas fuiter cote public. */
.bandeau-programmes__brouillon {
  flex: none;
  padding: 0.0625rem 0.375rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.75;
}

.edit-mode-note--brouillon {
  background: #fff6e5;
  border-color: #d98324;
  color: #8a4b06;
  font-weight: 600;
}

.badge-programme {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Un Programme qui a un logo l'affiche a la place de ses initiales. */
.badge-programme--logo {
  object-fit: cover;
  background: var(--fond);
}

.onglets-internes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--bordure);
}

.onglet-interne {
  padding: 0.625rem 0.25rem;
  margin-right: 1.25rem;
  border-bottom: 2px solid transparent;
  color: var(--texte-doux);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.onglet-interne:hover { color: var(--texte); }

/* L'onglet actif porte la couleur du PROGRAMME, pas celle de la marque : le
   bandeau au-dessus est le chrome commun, les onglets appartiennent au
   Programme. C'est le seul endroit du front ou du texte se pose sur la
   couleur d'accent, donc le seul consommateur de --accent-texte - et donc
   ce que l'indicateur de contraste du BO mesure reellement. */
.onglet-interne--actif,
.onglet-interne--actif:hover {
  background: var(--accent);
  color: var(--accent-texte);
  border-bottom-color: var(--accent);
  border-radius: 0.5rem 0.5rem 0 0;
}

/* --- Page d'un Programme --- */

/* Fonds des visuels : un logo fourni en une seule version a besoin d'un fond
   adapte, et ce fond depend du theme du navigateur. D'ou deux reglages. */
.front-banniere {
  max-height: 20rem;
  overflow: hidden;
  background: var(--fond-logo-clair);
}

.front-banniere img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.front-contenu--programme { padding-top: 2.5rem; }

/* Le trait de 3 px sous l'en-tete du Programme a ete RETIRE le 06-08-2026
   (Alice : « pas sur de l'utilite du grand trait noir ? »). Il separait le
   bloc titre/description du contenu, et il paraissait noir parce qu'il
   suivait --accent, dont la valeur par defaut du theme UIDD est un
   presque-noir (#1c1917) et non le teal de marque.
   L'espacement, lui, est conserve : c'est lui qui fait la separation. Pour
   le retablir un jour, une bordure de 1 px sur var(--bordure) serait plus
   sage qu'un trait plein de 3 px sur une couleur reglable par Programme. */
.front-programme-tete {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
}

.front-programme-tete__logo {
  max-height: 4rem;
  margin-bottom: 1rem;
  background: var(--fond-logo-clair);
}

/* .front-programme-tete__nom a ete supprimee le 05-08-2026 : le nom du
   Programme est desormais le H1 de l'en-tete (.front-entete__titre). */

.front-programme-tete__desc {
  margin: 0;
  max-width: 40rem;
  color: var(--texte-doux);
}

.front-section { margin-bottom: 2.5rem; }

.front-section__titre {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  color: var(--accent);
}

/* --- Cartes de contenu ---
   Meme anatomie que les cartes d'ABTOOLZ / THE SORORITOOL : un titre, et une
   rangee d'actions copier / ouvrir / partager en pied de carte. Vaut pour les
   trois modules (Ressources, Medias, Articles), seul le visuel change. */

.front-grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.carte {
  display: flex;
  flex-direction: column;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Fonds alternes des cartes, pilotes par la palette du Programme.
   Le CSS en declare 4 : au-dela, --fond-carte-N n'est pas defini et la
   valeur de repli --carte s'applique, donc une palette plus courte ou plus
   longue ne casse rien. */
.front-grille .carte:nth-child(4n+1) { background: var(--fond-carte-1, var(--carte)); }
.front-grille .carte:nth-child(4n+2) { background: var(--fond-carte-2, var(--fond-carte-1, var(--carte))); }
.front-grille .carte:nth-child(4n+3) { background: var(--fond-carte-3, var(--fond-carte-1, var(--carte))); }
.front-grille .carte:nth-child(4n+4) { background: var(--fond-carte-4, var(--fond-carte-2, var(--carte))); }

.carte:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Fond propre aux cartes du module Medias : elles portent une vignette, donc
   un fond distinct aide a les distinguer des Ressources. */
.front-grille--medias .carte { background: var(--fond-medias); }

.carte__visuel { display: block; }

.carte__visuel img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--fond);
}

.carte__corps {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1rem 1rem 0.75rem;
  text-align: center;
}

/* .carte__badge n'est plus rendu depuis le 06-08-2026 : la plateforme est
   devenue une icone (item 6). La regle reste, le badge servant encore
   d'etiquette ailleurs si besoin. */
.carte__badge {
  padding: 0.125rem 0.5rem;
  background: var(--fond);
  border-radius: 999px;
  color: var(--texte-doux);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Contenu reserve aux lecteurs d'ecran : retire de l'affichage sans etre
   retire de l'accessibilite (display:none le masquerait aussi pour eux). */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Icone de plateforme, posee devant le titre de la carte. Alignee sur la
   premiere ligne du titre plutot que centree : sur un titre qui passe sur
   deux lignes, un alignement centre la ferait flotter au milieu. */
.carte__plateforme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-right: 0.375rem;
  vertical-align: -0.15em;
  color: var(--texte-doux);
  flex: 0 0 auto;
}

.carte__plateforme svg {
  width: 100%;
  height: 100%;
  display: block;
}

.carte__titre {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.carte__titre a {
  color: var(--titre-carte);
  text-decoration: none;
}

.carte__titre a:hover { color: var(--accent); }

.carte__texte {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.875rem;
}

.carte__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1rem;
}

.carte-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  color: var(--marque-texte);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.carte-action svg {
  width: 1.125rem;
  height: 1.125rem;
}

.carte-action:hover {
  border-color: var(--marque-texte);
  box-shadow: 0 2px 10px rgba(18, 176, 166, 0.28);
  transform: translateY(-1px);
}

.carte-action:focus-visible {
  outline: 2px solid var(--marque-texte);
  outline-offset: 2px;
}

/* Retour visuel apres une copie reussie. */
.carte-action--ok,
.carte-action--ok:hover {
  background: var(--marque-fond);
  border-color: var(--marque-texte);
  color: #fff;
}

/* --- Toast (confirmation de copie) --- */

.front-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 50;
  margin: 0;
  padding: 0.625rem 1.125rem;
  background: var(--texte);
  border-radius: 999px;
  color: var(--fond);
  font-size: 0.875rem;
  opacity: 0;
  transform: translate(-50%, 0.5rem);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.front-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- Acces equipe en pied de page --- */

/* Conteneur en <div> et NON en <p> (corrige le 06-08-2026) : il contient un
   <form> de deconnexion, or un <form> ferme automatiquement un <p> ouvert.
   Le bouton sortait donc du conteneur flex et tombait seul a la ligne. */
.front-pied__acces {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 0;
}

.front-pied__acces .bouton-pied,
.front-pied__acces .front-pied__qui { white-space: nowrap; }

/* HAUTEURS ET ARRONDIS HARMONISES (06-08-2026, Alice : « c'est un peu le
   bazar la »).

   Cause mesuree, et elle n'etait pas dans les paddings : « Deconnexion » est
   un <button>, « Back-office » un <a>. Un <button> ne SUIT PAS le
   line-height du document - il garde celui de la feuille du navigateur
   (`normal`) - alors qu'un <a> l'herite. Meme padding, meme police, et
   pourtant 31 px contre 35,5.

   On ne corrige donc pas le line-height au cas par cas : on impose une
   hauteur commune et un centrage, ce qui tient quel que soit l'element
   (<a>, <button>, ou ce qu'on ajoutera plus tard). */
.front-pied__acces .bouton-pied,
.front-pied__acces .mode-bascule__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

.front-pied__acces .bouton-pied { padding: 0 1rem; }

/* Le selecteur est un conteneur de deux pastilles : son rembourrage est celui
   du cadre, pas celui d'un bouton. */
.front-pied__acces .mode-bascule__bouton { padding: 0.1875rem; }

.front-pied__acces .mode-bascule__etat {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  line-height: 1;
}

.bouton-pied {
  display: inline-block;
  padding: 0.4375rem 1rem;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  color: var(--texte-doux);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.bouton-pied:hover {
  border-color: var(--marque-texte);
  color: var(--marque-texte);
}

.bouton-pied--principal,
.bouton-pied--principal:hover {
  background: var(--marque-fond);
  border-color: var(--marque-texte);
  color: #fff;
}

.front-pied__qui { font-size: 0.8125rem; }

/* --- Edition inline (membre connecte) ---
   Modele hybride valide le 23-07-2026 : le contenu s'edite en place sur le
   site public. Ces styles ne servent qu'aux connectes ; le public ne voit
   jamais ces classes (front_vue.php ne rend la zone que pour un connecte). */

.edit-mode-note {
  margin: 0 0 1.25rem;
  padding: 0.625rem 0.875rem;
  background: var(--marque-pale);
  border: 1px solid var(--marque-texte);
  border-radius: 0.5rem;
  color: var(--marque-fonce);
  font-size: 0.8125rem;
  text-align: center;
}

/* Statut de récupération oEmbed, sous le champ URL du module Médias.
   Venu de admin.css le 28-07-2026 avec le formulaire lui-même, quand le
   contenu a cessé de s'éditer au back-office. --marque-fonce plutôt qu'une
   variable de succès : front.css n'en définit pas, et en inventer une pour
   deux lignes ajouterait un vocabulaire de thème pour rien. */
.oembed-statut {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

.oembed-statut--ok { color: var(--marque-fonce); }

/* Pendant un enregistrement : la zone se grise et n'accepte plus de clic. */
.edit-zone--occupee {
  opacity: 0.55;
  pointer-events: none;
}

.carte--editable {
  border-style: dashed;
}

.carte--edit-form { padding: 1rem; }

/* Boutons d'action d'edition : memes pastilles que les actions de carte,
   variantes valider (teal plein) et danger (rouge au survol). */
.bouton-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.375rem;
  padding: 0 0.75rem;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  color: var(--texte-doux);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

/* Boutons ronds (icone seule) dans la barre d'actions de carte. */
.carte--edit-actions .bouton-edit {
  width: 2.375rem;
  padding: 0;
  color: var(--marque-texte);
}

.bouton-edit svg { width: 1.125rem; height: 1.125rem; }

.bouton-edit:hover:not(:disabled) {
  border-color: var(--marque-texte);
  color: var(--marque-texte);
}

.bouton-edit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bouton-edit:focus-visible {
  outline: 2px solid var(--marque-texte);
  outline-offset: 2px;
}

.bouton-edit--valider,
.bouton-edit--valider:hover {
  background: var(--marque-fond);
  border-color: var(--marque-texte);
  color: #fff;
}

.bouton-edit--danger:hover:not(:disabled) {
  border-color: #d64545;
  color: #d64545;
}

/* Formulaire compact (ajout + edition en place). */
.edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  text-align: left;
}

.edit-form__label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texte-doux);
}

.edit-form__champ {
  padding: 0.5rem 0.625rem;
  background: var(--carte);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: 0.5rem;
  font: inherit;
  font-size: 1rem; /* 16px mini : evite le zoom iOS au focus */
}

.edit-form__champ:focus-visible {
  outline: 2px solid var(--marque-texte);
  outline-offset: 1px;
}

.edit-form__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* --- Bandeau de publication du Programme (membre connecté, 05-08-2026) ---
   Publier se décide en regardant la page, plus dans le back-office. Ce bandeau
   porte l'état ET le geste, au même endroit pour tout le monde.

   Les couleurs de statut sont redéfinies ici plutôt qu'importées d'admin.css :
   le front ne charge pas cette feuille, et les deux surfaces n'ont pas les
   mêmes variables. Valeurs alignées sur --public-fond / --public-texte du BO
   pour que « publié » se reconnaisse d'un écran à l'autre. */
.edit-publication {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 0.75rem;
}

/* Un brouillon se signale de loin : c'est l'état où l'on risque d'oublier
   que personne ne voit la page. */
.edit-publication--brouillon {
  background: #fff6e5;
  border-color: #d98324;
}

.edit-publication__etat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  margin-right: auto;
}

.edit-publication__note {
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

/* En brouillon, le fond clair est imposé : le texte doux du thème sombre
   deviendrait illisible dessus. */
.edit-publication--brouillon .edit-publication__note { color: #8a4b06; }

.edit-publication .statut {
  flex: none;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.edit-publication .statut--public { background: #dcfce7; color: #166534; }
.edit-publication .statut--prive  { background: #f5d9b8; color: #8a4b06; }

/* --- Sélecteur lecture / édition (05-08-2026) ---
   Le mode est porté par la classe `mode-edition` sur <html>, posée par
   assets/js/mode.js avant le premier rendu. Tout ce qui suit part du même
   principe : LECTURE = ce que voit un visiteur. Pas seulement « sans les
   boutons » — les onglets et les modules masqués au public disparaissent
   aussi, sinon le mode lecture mentirait. */

.mode-bascule {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 64rem;
  margin: 0.5rem auto 0;
}

.mode-bascule__bouton {
  display: inline-flex;
  padding: 0.1875rem;
  gap: 0.125rem;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
}

.mode-bascule__etat {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  color: var(--texte-doux);
}

/* L'état ACTIF est celui qui est mis en avant. Les deux libellés restent
   visibles : un interrupteur qui n'affiche que son état courant oblige à
   deviner ce que fait le clic. */
html:not(.mode-edition) .mode-bascule__etat--lecture,
html.mode-edition .mode-bascule__etat--edition {
  background: var(--marque-fond);
  color: #fff;
}

/* Ce qui n'existe qu'en édition. */
html:not(.mode-edition) .carte--edit-actions,
html:not(.mode-edition) .edit-ajout,
html:not(.mode-edition) .edit-visibilite,
html:not(.mode-edition) .edit-mode-note,
html:not(.mode-edition) .edit-seul,
html:not(.mode-edition) .onglet-interne--hors-public {
  display: none;
}

/* Ce qui n'existe qu'en lecture. */
html.mode-edition .lecture-seule { display: none; }

/* Marqueur « masqué » sur un onglet que le public ne voit pas. */
.onglet-interne__masque {
  margin-left: 0.375rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  background: var(--bordure);
  color: var(--texte-doux);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Bascule "visible par le public" en tête de module. */
.edit-visibilite {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.edit-visibilite input { width: 1.1rem; height: 1.1rem; accent-color: var(--marque-fond); }

.edit-visibilite__note {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

/* En-tête de Programme éditable : bouton "modifier l'apparence" + formulaire. */
.bouton-edit--habillage {
  margin-top: 1rem;
  color: var(--marque-texte);
  border-style: dashed;
  border-color: var(--marque-texte);
}

.edit-habillage__form {
  max-width: 30rem;
  margin: 1.25rem auto 0;
  padding: 1.25rem;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.edit-form__case {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

/* Palette d'accent (mêmes 5 couleurs que le BO). */
.palette-accent {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pastille-accent {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.16s ease;
}

.pastille-accent:hover { transform: scale(1.08); }

.pastille-accent--active {
  border-color: var(--texte);
  box-shadow: 0 0 0 2px var(--carte) inset;
}

.pastille-accent:focus-visible { outline: 2px solid var(--marque-texte); outline-offset: 2px; }

/* Bloc "ajouter" sous la grille. */
.edit-ajout {
  margin-top: 1.5rem;
  text-align: center;
}

.bouton-edit--ajout {
  color: var(--marque-texte);
  border-style: dashed;
  border-color: var(--marque-texte);
}

.edit-ajout__form {
  max-width: 28rem;
  margin: 1rem auto 0;
  padding: 1.25rem;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 0.75rem;
}

/* --- Mobile --- */

@media (max-width: 34rem) {
  .front-contenu { padding: 1.5rem 1.25rem 3rem; }
  .front-grille { grid-template-columns: 1fr; }
}