/* =====================================================================
   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;
}

/*
 * Masquage visuel des étiquettes de champ.
 *
 * Cette classe était utilisée par quatre écrans de l'espace professionnel mais
 * définie seulement dans la feuille du site public : les étiquettes
 * s'affichaient donc en clair, à l'intérieur des champs. Un lecteur d'écran
 * doit les entendre, un œil ne doit pas les voir.
 */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


*, *::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: 3px; height: 120px;
}
.barres li {
  flex: 1 1 0; height: 100%; min-width: 2px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.barre-tige {
  display: block; width: 100%; background: var(--or); border-radius: 2px 2px 0 0;
}
.barres li:last-child .barre-tige { background: var(--or-action); }

/* Le chiffre sous sa colonne : très petit, tabulaire, et sans retour à la
   ligne — une valeur coupée en deux serait pire que pas de valeur. */
.barres-chiffrees { height: 138px; }
.barre-valeur {
  display: block; text-align: center; white-space: nowrap;
  font-size: .62rem; line-height: 1.4; color: var(--texte-3);
  font-variant-numeric: tabular-nums; padding-top: 3px;
}
@media (max-width: 720px) {
  .barre-valeur { display: none; }
}
.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; }


/* Couverture du contenu --------------------------------------------------
   Une barre par ligne : le regard compare des longueurs bien mieux que des
   nombres, et c'est la comparaison qui intéresse ici. */
.couverture { width: 100%; border-collapse: collapse; }
.couverture th, .couverture td { padding: 11px 0; vertical-align: middle; }
.couverture tr + tr th, .couverture tr + tr td { border-top: 1px solid var(--trait); }
.couverture th {
  text-align: left; font-weight: 500; font-size: .95rem; padding-right: 20px;
}
.couverture th .journal-detail { font-weight: 400; margin-top: 2px; }
.couverture-nombre {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
  white-space: nowrap; padding-right: 18px !important; width: 6em;
}
.couverture-part { width: 46%; }
.couverture-part .barre {
  display: inline-block; vertical-align: middle; width: calc(100% - 4.2em);
  height: 8px; background: var(--trait); border-radius: 100px; overflow: hidden;
}
.couverture-part .barre span {
  display: block; height: 100%; background: var(--or-action); border-radius: 100px;
}
.couverture-pourcent {
  display: inline-block; width: 3.6em; text-align: right; margin-left: .6em;
  font-variant-numeric: tabular-nums; font-size: .88rem; color: var(--texte-2);
}

.photo-retrait { margin-top: 6px; }
.photo-retrait .bouton-discret { padding: 4px 0; font-size: .82rem; }


/* Comptes professionnels -------------------------------------------------- */
.compte-tete {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap;
}
.compte-tete h2 {
  margin: 0 0 4px; padding: 0; border: 0; font-size: 1.1rem;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.compte-mail { margin: 0; font-size: .9rem; color: var(--texte-2); }
.compte-dates { margin: 0; font-size: .82rem; color: var(--texte-3); text-align: right; }
.compte-suspendu { border-color: #E2D3CB; background: #FDFAF9; }
.compte-actions {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--trait);
}
@media (max-width: 620px) { .compte-dates { text-align: left; } }


/* =====================================================================
   Présentation de l'espace, pour qui n'a pas encore de compte

   Un bandeau plein cadre : la photographie en fond sous un voile brun profond,
   le texte au centre, l'action au milieu du regard. Une image reléguée dans
   une colonne fait décoration ; en fond, elle fait décor.
   ===================================================================== */
.pro-scene {
  position: relative; min-height: 100vh; isolation: isolate;
  display: flex; flex-direction: column; color: #F6F1E9;
  background: var(--encre);
}
.pro-scene-pleine { height: 100vh; max-height: 100vh; overflow: auto; }

.pro-fond {
  position: absolute; inset: 0; z-index: -1;
  background: url("../images/pro-fond.jpg") center 58% / cover no-repeat;
}
/*
 * Deux voiles superposés. Le premier, en dégradé, garde l'étal visible à
 * droite tout en donnant au texte le fond sombre qu'il lui faut à gauche.
 * Le second réchauffe l'ensemble et l'accorde à la palette du site.
 */
.pro-fond::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(26, 18, 12, .93) 0%, rgba(26, 18, 12, .86) 34%,
                    rgba(26, 18, 12, .52) 62%, rgba(26, 18, 12, .38) 100%),
    linear-gradient(0deg, rgba(59, 42, 30, .30), rgba(59, 42, 30, .30));
}

/* --- Barre du haut ------------------------------------------------------ */
.pro-barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 22px clamp(24px, 5vw, 64px);
}
.pro-marque { margin: 0; }
.espace-pro .pro-marque a {
  font-family: Fraunces, Georgia, serif; font-size: 1.05rem; font-weight: 600;
  color: #FBF7F1; text-decoration: none; letter-spacing: -.01em;
}
.pro-marque span { color: var(--or); }
.pro-marque small { font-size: .72em; color: rgba(246, 241, 233, .6); font-weight: 400; }

.pro-acces { display: flex; align-items: center; gap: 14px; margin: 0; }
.espace-pro .pro-lien-clair {
  font-size: .88rem; color: rgba(246, 241, 233, .82); text-decoration: none;
}
.espace-pro .pro-lien-clair:hover { color: #fff; text-decoration: underline; }

.espace-pro .pro-bouton {
  display: inline-block; font: 600 .92rem/1 Inter, sans-serif; text-decoration: none;
  padding: 11px 22px; border-radius: 100px; background: var(--or-action); color: #fff;
  transition: background-color .16s, transform .1s;
}
.espace-pro .pro-bouton:hover { background: var(--or-fonce); text-decoration: none; }
.espace-pro .pro-bouton:active { transform: translateY(1px); }
/* Sur fond sombre, un bouton plein or manque de relief : le contour clair le
   détache sans lui voler la vedette. */
.espace-pro .pro-bouton-clair {
  background: #FBF7F1; color: var(--encre);
}
.espace-pro .pro-bouton-clair:hover { background: #fff; }

/* --- Le centre ---------------------------------------------------------- */
.pro-centre {
  flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center;
  padding: 18px clamp(24px, 5vw, 64px) 34px; max-width: 720px;
}
.pro-oeil {
  margin: 0 0 16px; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--or); font-weight: 600;
}
.pro-centre h1 {
  font-size: clamp(2.3rem, 5.6vw, 3.9rem); line-height: 1.02; letter-spacing: -.028em;
  margin: 0 0 18px; color: #FFFBF6;
}
.pro-chapo {
  max-width: 44ch; margin: 0; font-size: 1.05rem; line-height: 1.6;
  color: rgba(246, 241, 233, .82);
}
.pro-chapo strong { color: #fff; font-weight: 600; }

/* --- La recherche, pièce maîtresse -------------------------------------- */
.pro-recherche {
  display: flex; align-items: center; gap: 4px; max-width: 540px;
  margin: 30px 0 18px; padding: 6px 6px 6px 18px;
  background: #fff; border: 0; border-radius: 100px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  transition: box-shadow .18s;
}
.pro-recherche::before {
  content: ""; flex: 0 0 auto; width: 15px; height: 15px; margin-right: 6px;
  border: 2px solid #9a8f82; border-radius: 50%;
  box-shadow: 7px 7px 0 -5.5px #9a8f82;
  transform: rotate(-45deg) translate(-1px, -1px);
}
.pro-recherche:focus-within { box-shadow: 0 12px 36px rgba(0, 0, 0, .34); }
.pro-recherche input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  font: inherit; font-size: 1.02rem; line-height: 1.2;
  padding: 13px 14px; border: 0; background: none; color: var(--texte);
  white-space: nowrap; text-overflow: ellipsis;
}
.pro-recherche input:focus { outline: none; }
.pro-recherche input::placeholder { color: #9a8f82; opacity: 1; }
.pro-recherche button {
  flex: 0 0 auto; font: 600 .95rem/1 Inter, sans-serif; cursor: pointer;
  padding: 15px 26px; border: 0; border-radius: 100px; white-space: nowrap;
  background: var(--or-action); color: #fff;
  transition: background-color .16s, transform .1s;
}
.pro-recherche button:hover { background: var(--or-fonce); }
.pro-recherche button:active { transform: translateY(1px); }

.pro-garanties {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  font-size: .85rem; color: rgba(246, 241, 233, .72);
}
.pro-garanties li { display: flex; align-items: center; gap: 7px; }
.pro-garanties li::before { content: "✓"; color: var(--or); font-weight: 700; }

/* --- Résultats ---------------------------------------------------------- */
.pro-resultats {
  background: var(--surface); color: var(--texte);
  padding: 30px clamp(24px, 5vw, 64px);
}
.pro-resultats h2 { margin: 0 0 14px; font-size: 1.12rem; }
.pro-liste { list-style: none; padding: 0; margin: 0; }
.pro-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--trait); flex-wrap: wrap;
}
.pro-liste-nom { display: block; font-weight: 500; }
.pro-liste-lieu { display: block; font-size: .86rem; color: var(--texte-3); }
.pro-note { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--texte-2); }

/* --- Socle -------------------------------------------------------------- */
.pro-socle {
  padding: 16px clamp(24px, 5vw, 64px) 20px;
  border-top: 1px solid rgba(246, 241, 233, .14);
  background: rgba(20, 14, 10, .34);
}
.pro-publie {
  list-style: none; margin: 0 0 8px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  font-size: .86rem; color: rgba(246, 241, 233, .74);
}
.pro-publie li { display: flex; align-items: baseline; gap: 8px; }
.pro-publie li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--or); flex: 0 0 auto; transform: translateY(-2px);
}
.pro-publie strong { color: #FBF7F1; font-weight: 600; }
.pro-socle-note { margin: 0; font-size: .8rem; color: rgba(246, 241, 233, .55); }
.espace-pro .pro-socle-note a { color: rgba(246, 241, 233, .78); }
.pro-socle-note strong { color: var(--or); }

@media (max-width: 860px) {
  .pro-scene-pleine { height: auto; max-height: none; }
  .pro-fond { background-image: url("../images/pro-fond-petit.jpg"); }
  .pro-fond::after {
    background:
      linear-gradient(180deg, rgba(26, 18, 12, .88) 0%, rgba(26, 18, 12, .80) 55%,
                      rgba(26, 18, 12, .90) 100%),
      linear-gradient(0deg, rgba(59, 42, 30, .30), rgba(59, 42, 30, .30));
  }
  .pro-centre { padding: 26px 24px 30px; }
  .pro-recherche { flex-wrap: wrap; border-radius: 22px; padding: 12px; }
  .pro-recherche input { flex: 1 0 100%; }
  .pro-recherche button { flex: 1 0 100%; }
}

/* Rappel de la fiche visée, sur les écrans d'entrée */
.entree-rappel {
  margin: 0 0 18px; padding: 12px 15px;
  background: var(--or-pale); border-left: 3px solid var(--or);
  border-radius: 8px; font-size: .9rem; line-height: 1.55; color: #6B5230;
}
.entree-rappel strong { color: var(--croute, #3B2A1E); }


/* =====================================================================
   Accueil d'un commerçant connecté
   ===================================================================== */

/* Salutation et avancement d'ensemble : ce qu'on veut savoir en une seconde
   en revenant, avant même d'avoir lu ses fiches. */
.bienvenue {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  background: linear-gradient(135deg, #FDF8EF, var(--or-pale));
  border: 1px solid #EADFC8; border-radius: 16px;
  padding: 22px 26px; margin-bottom: 26px;
}
.bienvenue-titre {
  margin: 0 0 4px; padding: 0; border: 0;
  font-family: Fraunces, Georgia, serif; font-size: 1.3rem; color: var(--croute, #3B2A1E);
}
.bienvenue-mot { margin: 0; font-size: .95rem; line-height: 1.6; color: #6B5230; max-width: 52ch; }
.bienvenue-mot strong { color: var(--croute, #3B2A1E); }

/* Cadran d'avancement, dessiné par un dégradé conique : aucune image, aucun
   script, et il se met à jour d'une seule variable. */
.bienvenue-cadran {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--or-action) calc(var(--part) * 1%), #EFE3CC 0);
}
.bienvenue-cadran::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #FDFAF4;
}
.bienvenue-cadran span {
  position: relative; font-weight: 700; font-size: 1.28rem; color: var(--croute, #3B2A1E);
  font-variant-numeric: tabular-nums;
}
.bienvenue-cadran small { font-size: .62em; font-weight: 600; margin-left: 1px; }

/* Vignette de la première photographie : une fiche illustrée se distingue
   immédiatement d'une fiche vide, sans qu'on ait à lire. */
.fiche-carte-tete { display: flex; align-items: flex-start; gap: 16px; }
.fiche-vignette {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 12px;
  object-fit: cover; background: var(--or-pale); border: 1px solid var(--trait);
}
.fiche-vignette-vide {
  display: block;
  background: repeating-linear-gradient(-45deg, #F3EADA, #F3EADA 6px, #EFE4D0 6px, #EFE4D0 12px);
}
.fiche-carte-tete > div { flex: 1 1 auto; min-width: 0; }

.avancement { margin: 16px 0 12px; }
.avancement-barre {
  display: block; height: 6px; border-radius: 100px; background: #EDE6DB; overflow: hidden;
  position: relative;
}
.avancement-barre::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--part) * 1%);
  background: var(--or-action); border-radius: 100px;
  transition: width .4s ease;
}
.avancement-texte { display: block; margin-top: 6px; font-size: .8rem; color: var(--texte-3); }

/* Une fiche complète mérite d'être signalée autrement que par l'absence de
   reproche. */
.fiche-carte-complete { border-left: 3px solid #6F9E5B; }

@media (max-width: 620px) {
  .bienvenue { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .avancement-barre::before { transition: none; } }


/* =====================================================================
   Écran d'édition d'une fiche
   ===================================================================== */

/* Sommaire : un formulaire long décourage parce qu'on n'en voit pas la fin.
   Quatre pastilles disent ce qui est fait, ce qui manque, et y mènent. */
.sommaire {
  display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 12px;
}
.sommaire-titre { margin: 0; font-size: .88rem; color: var(--texte-2); }
.sommaire-titre strong { color: var(--texte); }
.sommaire ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto;
}
.espace-pro .sommaire a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .84rem; text-decoration: none; color: var(--texte-2);
  padding: 6px 13px; border-radius: 100px; border: 1px solid var(--trait);
  transition: border-color .15s, color .15s, background-color .15s;
}
.espace-pro .sommaire a:hover { border-color: var(--or-action); color: var(--or-action); }
.sommaire li::before {
  content: ""; /* la pastille est portée par le lien, pas par la puce */
}
.sommaire-fait a::before {
  content: "✓"; color: #4A7C3B; font-weight: 700;
}
.sommaire-manque a::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--or); flex: 0 0 auto;
}
.sommaire-manque a { background: var(--or-pale); border-color: #EADFC8; color: #6B5230; }
.espace-pro .sommaire a.sommaire-ici {
  border-color: var(--or-action); color: var(--or-action); background: var(--surface);
}

/* Barre d'enregistrement : elle se détache et suit la page dès qu'une
   modification est en cours. On ne cherche pas son bouton, il est là. */
.barre-enregistrer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-top: 22px;
}
.barre-enregistrer p { margin: 0; font-size: .86rem; color: var(--texte-3); }
.barre-collante {
  position: sticky; bottom: 0; z-index: 20;
  margin: 22px -14px -14px; padding: 14px 20px;
  background: rgba(255, 253, 250, .96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--trait); border-radius: 12px 12px 0 0;
  box-shadow: 0 -6px 24px rgba(34, 28, 22, .07);
}
.barre-collante p { color: var(--or-action); font-weight: 500; }

@media (max-width: 620px) {
  .sommaire ul { margin-left: 0; }
  .barre-collante { margin-inline: -20px; border-radius: 0; }
}

/* Barre d'avancement d'un chantier, plus présente que celle d'une fiche */
.avancement-large { margin: 4px 0 22px; }
.avancement-large .avancement-barre { height: 10px; }
.avancement-large .avancement-texte { font-size: .95rem; color: var(--texte-2); margin-top: 9px; }
.avancement-large strong { color: var(--or-action); font-size: 1.05rem; }