/* =====================================================================
   Espace professionnel — feuille de style autonome.

   Le site public est une vitrine : papier chaud, sérif, lumière.
   Cet espace est un outil : on y travaille. D'où l'inversion — une
   colonne d'encre sombre contre une surface de travail blanche, pour
   qu'on sente au premier coup d'œil qu'on est passé derrière le comptoir.

   L'or de la marque ne sert qu'à une chose : l'action principale.
   ===================================================================== */

:root {
  --encre: #221C16;          /* brun très sombre, la colonne */
  --encre-2: #3A322A;
  --texte: #2A241E;
  --texte-2: #5C5248;
  --texte-3: #6F6459;        /* vérifié : 5,0 sur le fond, lisible */
  --surface: #FFFFFF;
  --fond: #F2EFE9;
  --trait: #E3DCD1;
  --or: #B27A36;             /* accent décoratif : filets, repères */
  --or-action: #8A5620;      /* fond des boutons : blanc dessus à 6,1 */
  --or-fonce: #6F4416;       /* survol */
  --or-pale: #F6EEDE;
  --valide: #2F6B45;
  --attente: #855C10;
  --refus: #A0352A;
  --focus: #2F6FED;
  --rayon: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
body.espace-pro {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 15px/1.6 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.espace-pro a { color: var(--or-action); }
.espace-pro a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Un bouton reste un bouton, même quand c'est un lien : sans cette règle plus
   spécifique, la couleur de lien ci-dessus l'emporte et l'on obtient du texte
   doré sur un fond doré. */
.espace-pro a.bouton, .espace-pro a.bouton:hover { text-decoration: none; }
.espace-pro h1, .espace-pro h2, .espace-pro h3 {
  font-family: Fraunces, Georgia, serif; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.01em; margin: 0;
}
.espace-pro h1 { font-size: 1.55rem; }
.espace-pro h2 { font-size: 1.1rem; }
.espace-pro h3 { font-size: 1rem; }
.espace-pro p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.espace-pro input:focus-visible, .espace-pro textarea:focus-visible { outline-offset: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------------------------------------------------------------------
   Ossature : une colonne de navigation, une surface de travail
   ------------------------------------------------------------------- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

.rail {
  background: var(--encre); color: #CFC5B8;
  display: flex; flex-direction: column; padding: 22px 0;
  position: sticky; top: 0; height: 100vh;
}
.rail-marque {
  font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 1.02rem;
  color: #fff; text-decoration: none; padding: 0 22px 22px; line-height: 1.3;
}
.rail-marque span { color: var(--or); font-style: italic; font-weight: 400; }
.rail-marque small { display: block; font-size: .68rem; font-weight: 400; color: #A79B8C; letter-spacing: .02em; }
.rail nav { display: flex; flex-direction: column; gap: 1px; }
.rail nav a {
  color: #CFC5B8; text-decoration: none; padding: 10px 22px; font-size: .93rem;
  border-left: 3px solid transparent;
}
.rail nav a:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.rail nav a[aria-current="page"] {
  background: rgba(178,122,54,.14); border-left-color: var(--or); color: #fff; font-weight: 500;
}
.rail-bas { margin-top: auto; padding: 18px 22px 0; border-top: 1px solid rgba(255,255,255,.09); }
.rail-compte { font-size: .85rem; color: #fff; margin-bottom: 2px; }
.rail-mail { font-size: .74rem; color: #A79B8C; word-break: break-all; margin-bottom: 10px; }
.rail-quitter { font-size: .82rem; color: #CFC5B8; text-decoration: none; }
.espace-pro .rail a { color: inherit; }
.espace-pro .rail a:hover { color: #fff; }

.travail { padding: 0 0 60px; min-width: 0; }
.barre {
  background: var(--surface); border-bottom: 1px solid var(--trait);
  padding: 20px 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.barre p { margin: 4px 0 0; color: var(--texte-3); font-size: .88rem; }
.contenu { padding: 28px 34px; }

/* Les panneaux occupent toute la largeur disponible. Les textes explicatifs
   gardent en revanche une longueur de ligne lisible : au-delà d'une soixantaine
   de caractères, l'œil perd la ligne suivante. */

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; align-items: center;
          flex-wrap: wrap; gap: 4px 14px; padding: 14px 18px; }
  .rail-marque { padding: 0; }
  .rail nav { flex-direction: row; flex-wrap: wrap; }
  .rail nav a { padding: 7px 12px; border-left: 0; border-bottom: 3px solid transparent; border-radius: 6px; }
  .rail nav a[aria-current="page"] { border-left: 0; border-bottom-color: var(--or); }
  .rail-bas { margin: 0 0 0 auto; padding: 0; border: 0; }
  .rail-mail { display: none; }
  .barre, .contenu { padding-inline: 18px; }
}

/* ---------------------------------------------------------------------
   Blocs de contenu
   ------------------------------------------------------------------- */
.panneau {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 24px 28px; margin-bottom: 20px;
}
/* Un filet sous le titre sépare la consigne du contenu : c'est de
   l'information de structure, pas de la décoration. */
.panneau > h2 {
  margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--trait);
}
.panneau > h2 + .panneau-note { margin-top: 12px; }
.panneau > h2:not(:first-child) { margin-top: 34px; }
.panneau-note { color: var(--texte-2); font-size: .92rem; max-width: 62ch; }
.vide p { max-width: 62ch; margin-inline: auto; }
.vide {
  border: 1px dashed #D6CCBD; border-radius: var(--rayon);
  padding: 40px 28px; text-align: center; color: var(--texte-2); background: var(--surface);
  margin-bottom: 20px;
}
.vide p:first-child { font-size: 1.05rem; color: var(--texte); font-weight: 500; }
.vide p:last-child { margin-bottom: 0; }

/* Établissements gérés */
.etablissements { list-style: none; margin: 14px 0 0; padding: 0; }
.etablissements li {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--trait);
}
.etablissements li:first-child { border-top: 0; }
.etab-nom { font-weight: 600; }
.etab-adresse { color: var(--texte-3); font-size: .88rem; }
.etablissements li > div:first-child { flex: 1; min-width: 220px; }

/* Pastilles d'état : elles encodent l'avancement, pas la décoration */
.etat { font-size: .78rem; font-weight: 600; padding: 6px 13px; border-radius: 100px; white-space: nowrap; }
.etat-attente { background: #FBF1DC; color: var(--attente); }
.etat-valide { background: #E7F1E9; color: var(--valide); }
.etat-refus { background: #F8E7E4; color: var(--refus); }

/* ---------------------------------------------------------------------
   Boutons et formulaires
   ------------------------------------------------------------------- */
.bouton {
  display: inline-block; font: 600 .92rem/1.2 Inter, sans-serif; cursor: pointer;
  border: 1px solid transparent; border-radius: 8px; padding: 11px 18px;
  text-decoration: none; transition: background-color .12s, border-color .12s;
}
.bouton:active { transform: translateY(1px); }
.espace-pro .bouton-principal { background: var(--or-action); color: #fff; }
.espace-pro .bouton-principal:hover { background: var(--or-fonce); color: #fff; }
.espace-pro .bouton-second { background: var(--surface); border-color: var(--trait); color: var(--texte); }
.espace-pro .bouton-second:hover { border-color: var(--or-action); color: var(--or-action); background: #FCFAF6; }
.espace-pro .bouton-discret { background: none; border: 0; color: var(--texte-2); padding: 11px 6px; }
.espace-pro .bouton-discret:hover { color: var(--refus); text-decoration: underline; }

.champ { margin-bottom: 18px; max-width: 460px; }
.champ label { display: block; font-weight: 500; margin-bottom: 5px; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"],
.champ input[type="url"], .champ input[type="password"], .champ input[type="search"],
.champ input[type="file"], .champ textarea {
  width: 100%; font: inherit; padding: 10px 13px;
  border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); color: var(--texte);
}
.champ input:hover, .champ textarea:hover { border-color: #CFC4B4; }
.champ input:focus, .champ textarea:focus { border-color: var(--or-action); }
.champ textarea { resize: vertical; }
.champ .aide { display: block; color: var(--texte-3); font-size: .84rem; margin-top: 5px; }
.champs-paire { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 22px; max-width: 720px; }
.champs-paire .champ { max-width: none; }

.recherche { display: flex; max-width: 560px; margin-bottom: 4px; }
.recherche input { flex: 1; min-width: 0; font: inherit; padding: 11px 14px;
  border: 1px solid var(--trait); border-right: 0; border-radius: 8px 0 0 8px; background: var(--surface); }
.recherche button { font: 600 .92rem/1 Inter, sans-serif; color: #fff; background: var(--encre);
  border: 0; border-radius: 0 8px 8px 0; padding: 0 20px; cursor: pointer; }
.recherche button:hover { background: var(--encre-2); }

.message { border-radius: 8px; padding: 13px 17px; margin-bottom: 20px; font-size: .93rem; }
.message-ok { background: #E7F1E9; color: #21563A; }
.message-erreur { background: #F8E7E4; color: #82291F; }
.message-attente { background: #FBF1DC; color: #7C5514; }

/* ---------------------------------------------------------------------
   La semaine du boulanger
   Le seul endroit où l'on se permet d'être expressif : la grille se lit
   comme un planning, et les jours de fermeture s'éteignent.
   ------------------------------------------------------------------- */
.semaine { border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; margin: 16px 0 26px; }
.semaine-jour {
  display: grid; grid-template-columns: 108px 1fr 1fr auto; align-items: center; gap: 14px;
  padding: 12px 18px; border-top: 1px solid var(--trait); background: var(--surface);
}
.semaine-jour:first-child { border-top: 0; }
.semaine-jour:nth-child(even) { background: #FCFAF7; }
.jour-nom { font-weight: 600; }
.jour-repere { display: block; font-size: .74rem; color: var(--texte-3); font-weight: 400; }
.creneau { display: flex; align-items: center; gap: 7px; }
.creneau input[type="time"] {
  font: inherit; padding: 7px 9px; border: 1px solid var(--trait);
  border-radius: 7px; background: var(--surface); color: var(--texte);
}
.creneau span { color: var(--texte-3); font-size: .85rem; }
.jour-ferme { display: flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--texte-2); white-space: nowrap; }
.semaine-jour.est-ferme { background: #F4F1EC; }
.semaine-jour.est-ferme .creneau { opacity: .35; }
.semaine-jour.est-ferme .jour-nom { color: var(--texte-3); }
.semaine-entete {
  display: grid; grid-template-columns: 108px 1fr 1fr auto; gap: 14px;
  padding: 10px 18px; background: var(--encre); color: #BFB5A6; font-size: .78rem;
}
.creneau input[type="time"]:hover { border-color: #CFC4B4; }
.creneau input[type="time"]:focus { border-color: var(--or-action); }
.jour-ferme input { width: 17px; height: 17px; accent-color: var(--or-action); }

@media (max-width: 700px) {
  .semaine-entete { display: none; }
  .semaine-jour { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
  .jour-ferme { justify-content: flex-start; }
}

/* Horaires en lecture, dans l'écran de modération */
.horaires-lecture { border-collapse: collapse; font-size: .92rem; }
.horaires-lecture th { text-align: left; font-weight: 400; color: var(--texte-3); padding: 3px 22px 3px 0; }
.horaires-lecture td { padding: 3px 0; }

/* ---------------------------------------------------------------------
   Photos
   ------------------------------------------------------------------- */
.photos { list-style: none; padding: 0; margin: 0 0 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.photos li { position: relative; }
.photos img { width: 100%; height: 128px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--trait); display: block; }
.photos .etat { position: absolute; left: 8px; bottom: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }

/* ---------------------------------------------------------------------
   Modération
   ------------------------------------------------------------------- */
.compteur {
  font-family: Inter, sans-serif; font-size: .72rem; font-weight: 600;
  background: var(--encre); color: #fff; border-radius: 100px; padding: 3px 10px;
  vertical-align: 3px; margin-left: 8px;
}
.dossier { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 20px 24px; margin-bottom: 16px; }
.dossier-titre { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dossier-lieu { color: var(--texte-3); font-size: .86rem; }
.dossier-qui { font-size: .9rem; color: var(--texte-2); margin-bottom: 12px; }
.dossier-mot { border-left: 3px solid var(--trait); margin: 0 0 14px; padding: 2px 0 2px 14px;
  color: var(--texte-2); font-style: normal; }

.indices { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 5px; }
.indices li { font-size: .89rem; padding-left: 24px; position: relative; }
.indices li::before { position: absolute; left: 0; top: -1px; font-weight: 700; }
.indice-ok { color: var(--valide); }
.indice-ok::before { content: "✓"; }
.indice-non { color: var(--refus); }
.indice-non::before { content: "✕"; }
.indice-info { color: var(--texte-3); }
.indice-info::before { content: "·"; left: 6px; }

.decision { display: flex; gap: 10px; align-items: center; margin: 0; }
.apercu { max-width: 300px; border-radius: 8px; border: 1px solid var(--trait); display: block; margin-bottom: 14px; }
.valeur { font-weight: 500; word-break: break-word; margin-bottom: 14px; }

/* ---------------------------------------------------------------------
   Pages d'entrée : connexion et inscription
   ------------------------------------------------------------------- */
.accueil-pro { display: grid; place-items: center; min-height: 100vh; padding: 40px 20px; }
.carte-entree {
  background: var(--surface); border: 1px solid var(--trait); border-radius: 14px;
  padding: 36px 38px; width: 100%; max-width: 430px;
}
.carte-entree .marque {
  font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 1.1rem;
  color: var(--texte); text-decoration: none; display: block; margin-bottom: 24px;
}
.carte-entree .marque span { color: var(--or); font-style: italic; font-weight: 400; }
.carte-entree h1 { margin-bottom: 6px; }
.carte-entree .sous { color: var(--texte-2); font-size: .93rem; margin-bottom: 24px; }
.carte-entree .champ { max-width: none; }
.carte-entree .bouton { width: 100%; text-align: center; }
.entree-pied { margin: 22px 0 0; font-size: .9rem; color: var(--texte-2); text-align: center; }


/* =====================================================================
   Tableau de bord : l'état d'avancement plutôt qu'une simple liste
   ===================================================================== */

/* Premier passage : la recherche est la seule action possible, elle prend
   donc la place centrale au lieu d'être un panneau parmi d'autres. */
.depart {
  background: var(--surface); border: 1px solid var(--trait); border-radius: 14px;
  padding: 44px 40px; text-align: center; margin-bottom: 22px;
}
.depart h2 { font-size: 1.35rem; margin-bottom: 10px; }
.depart p { color: var(--texte-2); max-width: 58ch; margin-inline: auto; }
.depart .recherche { margin: 26px auto 10px; }
.depart-aide { font-size: .88rem; color: var(--texte-3); }
.recherche-large input { padding: 14px 16px; font-size: 1rem; }
.recherche-large button { padding: 0 24px; }

.fiches { display: grid; gap: 16px; margin-bottom: 22px; }
.fiche-carte {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 22px 26px;
}
.fiche-carte-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.fiche-carte h2 { font-size: 1.12rem; margin: 0; border: 0; padding: 0; }
.fiche-carte-adresse { color: var(--texte-3); font-size: .88rem; margin: 3px 0 0; }
.fiche-carte-note { color: var(--texte-2); font-size: .92rem; margin: 14px 0 0; max-width: 62ch; }

/* Ce qui est fait, ce qui reste : la coche et le point encodent l'état,
   ils ne décorent pas. */
.jauge { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 16px 0 18px; }
.jauge li { font-size: .89rem; padding-left: 22px; position: relative; }
.jauge li::before { position: absolute; left: 0; font-weight: 700; }
.jauge-fait { color: var(--valide); }
.jauge-fait::before { content: "✓"; }
.jauge-manque { color: var(--attente); }
.jauge-manque::before { content: "○"; font-weight: 400; top: -1px; }

.fiche-carte-pied { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lien-discret { font-size: .9rem; }

/* Ajouter un établissement : replié tant qu'on n'en a pas besoin */
.ajout {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  margin-bottom: 20px;
}
.ajout > summary {
  cursor: pointer; padding: 16px 26px; font-weight: 500; list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.ajout > summary::-webkit-details-marker { display: none; }
.ajout > summary::before {
  content: "+"; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--or-pale);
  color: var(--or-action); font-weight: 700; line-height: 1;
}
.ajout[open] > summary::before { content: "–"; }
.ajout > summary:hover { color: var(--or-action); }
.ajout-corps { padding: 0 26px 22px; }

/* =====================================================================
   Éditeur : outils de saisie et enregistrement toujours accessible
   ===================================================================== */
.semaine-outil { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -8px 0 26px; }
.semaine-outil-note { font-size: .85rem; color: var(--texte-3); }

/* La barre d'enregistrement suit le défilement : le formulaire est long, et
   personne ne devrait avoir à chercher où valider. */
.barre-enregistrer {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 14px 22px; margin-bottom: 20px;
  box-shadow: 0 -2px 14px rgba(34, 28, 22, .07);
}
.barre-enregistrer p { margin: 0; font-size: .88rem; color: var(--texte-3); }

@media (max-width: 640px) {
  .depart { padding: 30px 22px; }
  .barre-enregistrer { flex-direction: column; align-items: stretch; text-align: center; }
  .barre-enregistrer .bouton { width: 100%; }
}


/* Groupes de cases à cocher de l'éditeur */
.groupe-cases { border: 0; padding: 0; margin: 0 0 22px; }
.groupe-cases legend {
  font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: 10px; color: var(--texte);
}
.case {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--trait); border-radius: 100px; padding: 8px 15px 8px 12px;
  margin: 0 8px 8px 0; font-size: .9rem; background: var(--surface);
}
.case:hover { border-color: #CFC4B4; }
.case input { width: 16px; height: 16px; accent-color: var(--or-action); margin: 0; }
.case:has(input:checked) { border-color: var(--or-action); background: var(--or-pale); color: var(--texte); }
.champ input[type="date"] {
  width: 100%; font: inherit; padding: 10px 13px;
  border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); color: var(--texte);
}
.liste-equipements { margin: 0 0 14px; padding-left: 20px; color: var(--texte-2); font-size: .92rem; }


/* Signalements qui changent l'état de la fiche ---------------------------
   Repliés par défaut et visuellement mis à part : ce ne sont pas des
   modifications ordinaires, et on ne doit pas les déclencher par mégarde. */
.panneau-grave { border-color: #E2D3CB; }
.grave { border-top: 1px solid var(--trait); }
.grave:first-of-type { margin-top: 6px; }
.grave > summary {
  cursor: pointer; padding: 14px 0; font-weight: 500; list-style: none;
  display: flex; align-items: center; gap: 10px; color: var(--texte-2);
}
.grave > summary::-webkit-details-marker { display: none; }
.grave > summary::before {
  content: "›"; display: inline-block; width: 14px; font-weight: 700; color: var(--texte-3);
  transition: transform .12s;
}
.grave[open] > summary::before { transform: rotate(90deg); }
.grave > summary:hover { color: var(--refus); }
.grave-corps { padding: 4px 0 22px 24px; border-left: 2px solid var(--trait); margin-left: 6px; }


/* Repérage d'une fiche à compléter --------------------------------------- */
.reperage { display: flex; flex-wrap: wrap; gap: 22px 34px; align-items: flex-end; }
#form-position { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.champ-rayon { margin: 0; max-width: none; }
.champ-rayon span { display: block; font-weight: 500; margin-bottom: 5px; }
.champ-rayon select {
  font: inherit; padding: 10px 13px; border: 1px solid var(--trait);
  border-radius: 8px; background: var(--surface); color: var(--texte);
}
.reperage-etat { font-size: .88rem; color: var(--texte-3); padding-bottom: 12px; }
.etab-dist {
  font-size: .8rem; color: var(--or-action); background: var(--or-pale);
  border-radius: 100px; padding: 3px 10px; margin-left: 8px;
}
.jauge-compacte { margin: 8px 0 0; gap: 6px 16px; }
.jauge-compacte li { font-size: .82rem; }


/* Historique de modération ---------------------------------------------- */
.filtres { display: flex; gap: 8px; margin-bottom: 18px; }
.filtre {
  font-size: .9rem; padding: 7px 15px; border-radius: 100px; text-decoration: none;
  border: 1px solid var(--trait); background: var(--surface); color: var(--texte-2);
}
.espace-pro .filtre:hover { text-decoration: none; border-color: var(--or-action); color: var(--or-action); }
.espace-pro .filtre-actif { background: var(--encre); border-color: var(--encre); color: #fff; }

.journal { width: 100%; border-collapse: collapse; font-size: .92rem; }
.journal th, .journal td { text-align: left; padding: 11px 14px 11px 0; vertical-align: top; }
.journal thead th {
  font-size: .78rem; font-weight: 600; color: var(--texte-3);
  border-bottom: 1px solid var(--trait); padding-bottom: 8px;
}
.journal tbody tr { border-bottom: 1px solid var(--trait); }
.journal tbody tr:last-child { border-bottom: 0; }
.journal-date { white-space: nowrap; }
.journal-date span, .journal-qui span, .journal-detail {
  display: block; font-size: .8rem; color: var(--texte-3);
}
.journal-detail { display: block; }
.journal .etat { display: inline-block; margin-bottom: 4px; }
.pagination-journal { display: flex; gap: 10px; }

@media (max-width: 760px) {
  .journal thead { display: none; }
  .journal tbody tr { display: block; padding: 12px 0; }
  .journal td { display: block; padding: 2px 0; }
}

.photos li { position: relative; }
.photo-credit {
  display: block; font-size: .76rem; color: var(--texte-3); margin-top: 5px;
}

.etat-direct { background: var(--or-pale); color: var(--or-action); }


/* Séparation des deux natures d'accès : ce que fait un commerçant d'un côté,
   ce qui relève de l'administration de l'autre. Le filet et le libellé sont de
   l'information, pas de la décoration : ils disent où l'on se trouve. */
.rail-groupe {
  font-size: .72rem; color: #8C8072; margin: 18px 22px 6px;
  letter-spacing: .04em; font-weight: 500;
}
.rail nav > .rail-groupe:first-child { margin-top: 4px; }
.rail-groupe-admin {
  border-top: 1px solid rgba(255,255,255,.09); padding-top: 16px; color: var(--or);
}
@media (max-width: 820px) {
  .rail-groupe { display: none; }
  .rail-groupe-admin { display: block; border: 0; padding: 0; margin: 0 4px 0 12px;
    align-self: center; }
}


/* Tableau de bord d'audience --------------------------------------------- */
.barres {
  list-style: none; padding: 0; margin: 16px 0 8px;
  display: flex; align-items: flex-end; gap: 2px; height: 120px;
}
.barres li { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 2px; }
.barres span {
  display: block; width: 100%; background: var(--or); border-radius: 2px 2px 0 0;
}
.barres li:last-child span { background: var(--or-action); }
.barres-legende {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .8rem; color: var(--texte-3); margin: 0 0 20px;
}

.chiffres { display: flex; flex-wrap: wrap; gap: 28px 44px; padding-top: 6px; }
.chiffre {
  display: block; font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: 1.6rem; line-height: 1.1; color: var(--texte);
}
.chiffre-note { font-size: .84rem; color: var(--texte-3); }

.journal-nombre {
  font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
  padding-right: 18px !important;
}
.journal-serre th, .journal-serre td { padding: 6px 12px 6px 0; }
.groupe-titre-pro {
  font-size: .8rem; color: var(--texte-3); margin: 18px 0 4px; font-weight: 500;
}
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.deux-colonnes .panneau { margin-bottom: 0; }