/* Golf du Pays de Sarrebourg — gestion du site (/gestion), pour les employés. Direction « Lisière », accent tuile.
   Chargée après site.css : elle lit les jetons du site (avec une valeur de repli) et n'ajoute que ses variables --g-*.
   Toute classe propre à la gestion commence par « ges- ». Polices du système, aucune ressource externe. */

html.gestion {
  --g-foret: var(--foret-950, #0E261A);
  --g-foret-800: var(--foret-800, #16402B);
  --g-foret-700: var(--foret-700, #1D5A3A);
  --g-gazon-300: var(--gazon-300, #8CCB8F);
  --g-gazon-100: var(--gazon-100, #E7F0E2);
  --g-lin: var(--lin-50, #FAF7F0);
  --g-lin-100: var(--lin-100, #F2ECDF);
  --g-sable: var(--sable-200, #E6D9BC);
  --g-blanc: var(--blanc, #FFFFFF);
  --g-encre: var(--encre-900, #17221B);
  --g-encre-600: var(--encre-600, #4D5A52);
  --g-trait: var(--trait-200, #E2DFD5);
  --g-trait-400: var(--trait-400, #8E978F);
  --g-brume: var(--brume, #B9CBBE);
  --g-miel: var(--miel-400, #F2C14E);
  --g-vosges: var(--vosges-700, #2D4A6E);
  --g-vosges-100: var(--vosges-100, #E8EEF6);
  --g-tuile: var(--tuile-600, #B04A24);
  --g-tuile-700: var(--tuile-700, #923B1B);
  --g-tuile-100: var(--tuile-100, #F8E7DD);
  --g-cerf: var(--cerf-700, #A11F24);
  --g-cerf-100: var(--cerf-100, #FBE7E6);
  --g-ok: var(--ok-700, #1A6236);
  --g-ok-100: var(--ok-100, #E3F1E4);
  --g-att: var(--att-700, #7A4E00);
  --g-att-100: var(--att-100, #FFF1D2);
  --g-titre: var(--f-titre, Georgia, serif);
  --g-ui: var(--f-ui, "Segoe UI", system-ui, sans-serif);
  --g-chiffres: var(--f-chiffres, "Bahnschrift", system-ui, sans-serif);
  --g-ombre-1: var(--ombre-1, 0 1px 2px rgba(14,38,26,.06), 0 2px 8px -2px rgba(14,38,26,.08));
  --g-ombre-2: var(--ombre-2, 0 2px 4px rgba(14,38,26,.06), 0 16px 32px -16px rgba(14,38,26,.28));
  --g-ombre-3: var(--ombre-3, 0 4px 8px rgba(14,38,26,.08), 0 32px 64px -24px rgba(14,38,26,.40));
  --g-entete: var(--entete-gestion, 64px);
  --g-sortie: var(--ease-sortie, cubic-bezier(.2,.8,.2,1));
  --g-gout: var(--gouttiere, clamp(1rem, .6rem + 2vw, 2rem));
  /* La gestion porte l'accent tuile (la ferme) : on reconnaît d'un coup d'œil qu'on n'est pas sur le site public. */
  --accent: var(--tuile-600, #B04A24); --accent-fonce: var(--tuile-700, #923B1B); --accent-pale: var(--tuile-100, #F8E7DD);
  --g-accent: var(--tuile-600, #B04A24); --g-accent-fonce: var(--tuile-700, #923B1B); --g-accent-pale: var(--tuile-100, #F8E7DD);
  scroll-padding-top: calc(var(--g-entete) + 24px);
  background: var(--g-lin);
}
html.gestion [hidden] { display: none !important; }
html.gestion body { min-height: 100vh; overflow-x: hidden; }
html.js .ges-sans-js, html:not(.js) .ges-js-seul { display: none !important; }

/* ================================================================ Coquille : en-tête, barre latérale, contenu */

.ges-coquille { min-height: 100vh; }
.ges-entete {
  position: sticky; top: 0; z-index: var(--z-entete, 50);
  display: flex; align-items: center; gap: .6rem;
  min-height: var(--g-entete); padding: env(safe-area-inset-top) var(--g-gout) 0;
  background: var(--g-foret); color: var(--g-lin-100); box-shadow: inset 0 -4px 0 var(--g-tuile);
}
.ges-entete .marque { --marque-taille: 40px; flex: none; text-decoration: none; min-width: 48px; justify-content: center; }
.ges-entete .marque-nom { display: none; }
.ges-entete-titre {
  margin: 0; flex: 1 1 auto; min-width: 0; font-family: var(--g-titre); font-size: 1.15rem; line-height: 1.2;
  color: var(--g-lin-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ges-pastille {
  flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: .15rem .75rem; border-radius: 999px;
  background: var(--g-tuile); color: #fff; font: 600 16px/1.2 var(--g-ui); letter-spacing: .02em;
}
.ges-entete-bouton, .ges-texte {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-width: 48px; min-height: 48px; padding: 0 .85rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--g-lin-100); border: 2px solid rgba(242,236,223,.5);
  font: 700 1rem/1 var(--g-ui); text-decoration: none;
}
.ges-entete-bouton:hover, .ges-texte:hover { background: rgba(242,236,223,.12); color: var(--g-lin-100); }
.ges-texte[aria-pressed="true"] { background: var(--g-miel); border-color: var(--g-miel); color: var(--g-encre); }
.ges-entete-bouton .ic, .ges-texte .ic { width: 22px; height: 22px; }
.ges-texte .ic, .ges-texte-long, .ges-voir-site { display: none; }
/* Sous 600 px, la pastille disparaît : le logo, le titre de l'écran et « ← Tableau de bord » suffisent. */
@media (max-width: 599px) { .ges-pastille { display: none; } }

.ges-nav { display: none; }
.ges-main {
  display: block; width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 1.25rem var(--g-gout) 3rem;
}
.ges-main:focus { outline: none; }

@media (min-width: 960px) {
  .ges-coquille:not(.ges-coquille-seule) {
    display: grid; grid-template-columns: 272px minmax(0, 1fr); grid-template-rows: auto 1fr; background: var(--g-foret);
  }
  .ges-entete { grid-column: 2; grid-row: 1; padding-left: 2.5rem; }
  .ges-entete-marque, .ges-ouvrir-menu { display: none !important; }
  .ges-entete-titre { font-size: 1.25rem; }
  .ges-voir-site { display: inline-flex; }
  .ges-texte .ic, .ges-texte-long { display: inline; }
  .ges-texte .ic { display: block; }
  .ges-texte-court, .ges-texte-sr { display: none; }
  .ges-texte { padding: 0 1.1rem; }
  .ges-nav {
    position: sticky; top: 0; grid-column: 1; grid-row: 1 / span 2; align-self: start;
    display: flex; flex-direction: column; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 1rem .8rem 0; background: var(--g-foret); color: var(--g-lin-100);
    scrollbar-width: thin; scrollbar-color: rgba(140,203,143,.45) transparent;
  }
  .ges-nav-marque { display: flex; margin: 0 .25rem; text-decoration: none; }
  .ges-nav-marque .marque-l1 { font-size: 16px; }
  .ges-carte-compte {
    margin-top: .9rem; padding: .6rem .85rem; border-radius: 16px; background: rgba(242,236,223,.06);
    box-shadow: inset 0 0 0 1px rgba(185,203,190,.18);
  }
  .ges-carte-compte-texte { display: grid; line-height: 1.3; min-width: 0; }
  .ges-carte-compte-texte strong { font-family: var(--g-titre); font-size: 1.05rem; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ges-carte-compte-texte span { font-size: 16px; color: #F3C9B6; }
  .ges-nav-liste { list-style: none; margin: .8rem 0 0; padding: .4rem; display: grid; gap: 2px; border-radius: 16px;
    background: rgba(176,74,36,.14); box-shadow: inset 0 0 0 1px rgba(176,74,36,.35); }
  .ges-nav-lien > a {
    display: flex; align-items: center; gap: .7rem; min-height: 46px; padding: .25rem .75rem; border-radius: 12px;
    font: 500 1rem/1.25 var(--g-ui); color: var(--g-lin-100); text-decoration: none; position: relative;
    white-space: nowrap;
  }
  .ges-nav-lien span { overflow: hidden; text-overflow: ellipsis; }
  .ges-nav-lien .ic { width: 22px; height: 22px; flex: none; }
  .ges-nav-lien > a:hover { background: rgba(242,236,223,.08); color: #fff; }
  .ges-nav-lien > a[aria-current="page"] { background: rgba(242,193,78,.14); color: var(--g-miel); font-weight: 600; }
  .ges-nav-lien > a[aria-current="page"]::before {
    content: ""; position: absolute; left: -.4rem; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0;
    background: var(--g-miel);
  }
  .ges-nav-bas { display: grid; gap: 2px; margin-top: auto; padding-top: .75rem; }
  .ges-nav-bas form { margin: 0; }
  .ges-nav-action {
    display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 48px; padding: .4rem .75rem;
    border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left; text-decoration: none;
    color: var(--g-brume); font: 500 1rem/1.25 var(--g-ui);
  }
  .ges-nav-action:hover { background: rgba(242,236,223,.08); color: var(--g-lin-100); }
  .ges-nav-action .ic { width: 22px; height: 22px; }
  .ges-nav-crete { display: block; flex: none; margin: .25rem -.8rem 0; width: calc(100% + 1.6rem); height: 40px; opacity: .55; }
  .ges-main {
    grid-column: 2; grid-row: 2; max-width: none; min-height: calc(100vh - var(--g-entete));
    padding: 2rem clamp(1.5rem, 1rem + 2vw, 3rem) 4rem; background: var(--g-lin); border-top-left-radius: 28px;
  }
  .ges-coquille:not(.ges-coquille-seule) .ges-main > * { max-width: 1100px; margin-inline: auto; }
}
html.gestion .marque .marque-logo img { border-radius: 50%; clip-path: circle(50%); }
html.gestion .marque:not(.sur-sombre) .marque-logo {
  background: var(--g-blanc); border-radius: 50%; padding: calc(var(--marque-taille, 56px) * .08);
  box-shadow: 0 0 0 1px var(--g-trait), var(--g-ombre-1);
}

/* ================================================================ Feuille du bas « Menu » et dialogues */

.ges-feuille {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 640px; max-height: 88vh; margin: 0 auto;
  padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom)); border: 0; border-radius: 24px 24px 0 0;
  background: var(--g-lin); color: var(--g-encre); box-shadow: var(--g-ombre-3); overflow-y: auto;
  z-index: var(--z-menu, 80);
}
.ges-feuille[open], .ges-feuille:target { display: block; }
.ges-feuille[open] { animation: ges-monte var(--duree-moyen, 280ms) var(--g-sortie); }
.ges-feuille::backdrop, .ges-dialogue::backdrop { background: rgba(14,38,26,.55); }
@keyframes ges-monte { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.ges-feuille-poignee { width: 40px; height: 4px; margin: .25rem auto .5rem; border-radius: 4px; background: var(--g-trait-400); }
.ges-feuille-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ges-feuille-tete h2 { margin: 0; font-size: 1.5rem; }
.ges-fermer {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: 0 1rem; border-radius: 999px;
  color: var(--g-foret-800); font-weight: 600; text-decoration: none; border: 2px solid var(--g-trait);
}
.ges-fermer:hover { background: var(--g-gazon-100); }
.ges-feuille-liens { list-style: none; margin: .5rem 0 0; padding: 0; }
.ges-feuille-liens li { border-bottom: 1px solid var(--g-trait); }
.ges-feuille-liens a, .ges-feuille-liens button {
  display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 56px; padding: .5rem .5rem;
  background: none; border: 0; text-align: left; cursor: pointer; text-decoration: none;
  color: var(--g-encre); font: 500 1.05rem/1.3 var(--g-ui);
}
.ges-feuille-liens a:hover, .ges-feuille-liens button:hover { background: var(--g-gazon-100); }
.ges-feuille-liens a[aria-current="page"] { color: var(--g-foret-700); font-weight: 700; }
.ges-feuille-liens .ic { width: 24px; height: 24px; color: var(--g-foret-700); }
.ges-feuille-liens span:first-of-type { flex: 1; }
.ges-feuille-liens form { margin: 0; }
.ges-feuille-outils { margin-top: 1rem; }
.ges-feuille-outils .ges-texte { justify-content: flex-start; border: 0; border-radius: 0; color: var(--g-encre); }
.ges-feuille-outils .ges-texte[aria-pressed="true"] { background: var(--g-att-100); }
.ges-feuille-outils .ges-texte[aria-pressed="true"]::after { content: "activé"; margin-left: auto; font-size: 16px; font-weight: 600; color: var(--g-att); }
.ges-menu-valeur { margin-left: auto; color: var(--g-encre-600); font-weight: 600; }
@media (min-width: 960px) { .ges-feuille:not([open]) { display: none; } }

.ges-dialogue {
  width: min(480px, calc(100% - 2rem)); padding: 1.5rem; border: 0; border-radius: 24px;
  background: var(--g-blanc); color: var(--g-encre); box-shadow: var(--g-ombre-3);
}
.ges-dialogue[open] { animation: ges-apparait var(--duree-petit, 200ms) var(--g-sortie); }
@keyframes ges-apparait { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.ges-dialogue h2 { font-size: 1.5rem; margin-bottom: .4em; }
.ges-dialogue p { margin-bottom: 1.25rem; }
.ges-dialogue-boutons { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }
.ges-dialogue-boutons .bouton { flex: 1 1 auto; }
.ges-dialogue .ges-bouton-confirmer { background: var(--g-cerf); border-color: var(--g-cerf); color: #fff; }
.ges-dialogue .ges-bouton-confirmer:hover { background: #7f181c; }


/* ================================================================ Messages */

.ges-flash {
  display: flex; align-items: center; gap: .9rem; margin: 0 0 1.25rem; padding: .85rem 1rem .85rem 1.1rem;
  border-radius: 16px; border-left: 4px solid; font-weight: 600; box-shadow: var(--g-ombre-1);
}
.ges-flash p { margin: 0; flex: 1; }
.ges-flash-ic { width: 28px; height: 28px; flex: none; }
.ges-flash-ok { background: var(--g-ok-100); color: var(--g-ok); }
.ges-flash-erreur { background: var(--g-cerf-100); color: var(--g-cerf); }
.ges-flash-info { background: var(--g-vosges-100); color: var(--g-vosges); }
.ges-flash-trou { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 54%; flex: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--g-ok); }
.ges-flash-fermer {
  flex: none; display: inline-flex; align-items: center; gap: .3rem; min-height: 48px; min-width: 48px; padding: 0 .75rem;
  border: 2px solid currentColor; border-radius: 999px; background: transparent; color: inherit; cursor: pointer;
  font: 600 16px/1 var(--g-ui);
}
.ges-flash-fermer .ic { width: 20px; height: 20px; }
html:not(.js) .ges-flash-fermer { display: none; }
@media (max-width: 599px) { .ges-flash-fermer span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

.ges-alerte {
  display: flex; gap: .85rem; align-items: flex-start; margin: 0 0 1.25rem; padding: 1rem 1.1rem;
  border-radius: 16px; border-left: 4px solid;
}
.ges-alerte p { margin: 0 0 .5rem; } .ges-alerte p:last-child { margin-bottom: 0; }
.ges-alerte > .ic { width: 28px; height: 28px; flex: none; }
.ges-alerte-miel { background: #FFF6DC; border-color: var(--g-miel); color: var(--g-encre); }
.ges-alerte-miel > .ic { color: var(--g-att); }
.ges-alerte-ko { background: var(--g-cerf-100); border-color: var(--g-cerf); color: var(--g-cerf); }
.ges-alerte-ko p { color: var(--g-encre); } .ges-alerte-ko strong { color: var(--g-cerf); }


/* ================================================================ Titres de page, blocs communs */

.ges-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.5rem; }
.ges-tete-texte { min-width: min(100%, 16rem); }
.ges-tete h1 { margin: 0; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.1; }
.ges-sous-titre { margin: .35rem 0 0; color: var(--g-encre-600); font-size: 1.05rem; }
.ges-tete-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.ges-section { margin: 2rem 0; }
.ges-section > h2, .ges-section-tete h2 { font-size: var(--t-h3, 1.35rem); margin: 0 0 .85rem; }
.ges-section-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .85rem; }
.ges-section-tete h2 { margin: 0; }
.ges-h-detail { font-family: var(--g-ui); font-size: 1rem; font-weight: 500; color: var(--g-encre-600); }
.ges-carte {
  background: var(--g-blanc); border-radius: 16px; box-shadow: var(--g-ombre-1); padding: clamp(1.1rem, .9rem + .8vw, 1.5rem);
  margin-bottom: 1.25rem; border: 1px solid var(--g-trait);
}
.ges-carte > h2 { font-size: var(--t-h3, 1.35rem); display: flex; align-items: center; gap: .5rem; }
.ges-carte > h2 .ic { color: var(--g-accent); }
.ges-etroit { max-width: 760px; }
.ges-note { color: var(--g-encre-600); display: flex; align-items: center; gap: .5rem; margin: .75rem 0; }
.ges-note .ic { flex: none; }
.ges-note .ic { color: var(--g-foret-700); }
.ges-chapo { font-size: var(--t-chapo, 1.15rem); color: var(--g-encre-600); }
.ges-vide {
  margin: 1rem 0; padding: 1.5rem; border-radius: 16px; background: var(--g-lin-100); border: 2px dashed var(--g-sable);
  color: var(--g-encre); text-align: center;
}
.ges-vide p { margin: 0 0 .85rem; } .ges-vide p:last-child { margin-bottom: 0; }
.ges-vide .bouton { margin: .25rem; }
.ges-vide-grand { padding: 2.5rem 1.5rem; }
.ges-vide-ic { width: 48px; height: 48px; color: var(--g-foret-700); display: block; margin: 0 auto .5rem; }
.ges-raison { margin: 0; color: var(--g-encre-600); }
.ges-pleine-largeur { width: 100%; }
.ges-boutons-ligne { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.ges-liste-simple { margin: 0 0 1rem; padding-left: 1.2rem; }
.ges-liste-simple li { margin: .3rem 0; }
.ges-liste-numerotee { padding-left: 1.6rem; }
.ges-liste-numerotee li { padding: .35rem 0; border-bottom: 1px solid var(--g-trait); }
.ges-liens-liste { list-style: none; margin: 0; padding: 0; }
.ges-liens-liste a { display: flex; align-items: center; gap: .6rem; min-height: 48px; font-weight: 600; }

/* ================================================================ Formulaires de la gestion */

.ges-form { display: grid; gap: 1rem; }
.ges-form > .bouton { justify-self: start; }
.ges-champ { display: grid; gap: .35rem; min-width: 0; }
.ges-champ > label, .ges-champ > .ges-etiquette-champ { font-weight: 600; }
.ges-champ input:not([type=radio]):not([type=checkbox]), .ges-champ select, .ges-champ textarea { width: 100%; }
.ges-champs-2 { display: grid; gap: 1rem; }
@media (min-width: 600px) { .ges-champs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ges-facultatif { font-weight: 400; color: var(--g-encre-600); }
.ges-aide-champ { margin: 0; color: var(--g-encre-600); font-size: 1rem; }
.ges-mdp { display: flex; gap: .5rem; }
.ges-mdp input { flex: 1; min-width: 0; }
.ges-afficher {
  flex: none; min-width: 48px; min-height: 56px; padding: 0 1rem; border-radius: 12px; border: 2px solid var(--g-trait-400);
  background: var(--g-blanc); color: var(--g-foret-800); font: 600 1rem/1 var(--g-ui); cursor: pointer;
}
.ges-afficher:hover { background: var(--g-gazon-100); }
html:not(.js) .ges-afficher { display: none; }
.ges-suffixe { display: flex; align-items: center; gap: .5rem; }
.ges-suffixe input { flex: 1; min-width: 0; }
.ges-suffixe span { font-weight: 600; color: var(--g-encre-600); }
.ges-recherche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: 1rem 0; }
.ges-recherche .ges-champ { flex: 1 1 14rem; }
.ges-filtre-champ input { background-image: none; }
.ges-sous-titre-bloc { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }

/* Cartes radio (paiement, montants, visibilité) */
.ges-radios { display: grid; gap: .75rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.ges-radios > legend { padding: 0; margin-bottom: .5rem; font-weight: 600; }
@media (min-width: 600px) { .ges-radios:not(.ges-radios-colonne) { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.ges-radio {
  position: relative; display: flex; align-items: flex-start; gap: .85rem; min-height: 72px; padding: 1rem;
  border-radius: 16px; border: 2px solid var(--g-trait); background: var(--g-blanc); cursor: pointer;
  transition: border-color var(--duree-micro, 120ms), background var(--duree-micro, 120ms);
}
.ges-radio:hover { border-color: var(--g-trait-400); }
.ges-radio input {
  -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; margin: .1rem 0 0; border-radius: 50%;
  border: 2px solid var(--g-trait-400); background: #fff; display: grid; place-items: center; cursor: pointer;
}
.ges-radio input::after { content: ""; width: 12px; height: 12px; border-radius: 50%; transform: scale(0); background: var(--g-accent); transition: transform var(--duree-micro, 120ms); }
.ges-radio input:checked { border-color: var(--g-accent); }
.ges-radio input:checked::after { transform: scale(1); }
.ges-radio:has(input:checked) { border-color: var(--g-accent); background: var(--g-accent-pale); }
.ges-radio:has(input:focus-visible) { outline: 3px solid var(--g-foret); outline-offset: 2px; }
.ges-radio input:focus-visible { outline: none; box-shadow: none; }
.ges-radio:has(input:disabled) { background: var(--g-lin-100); border-style: dashed; cursor: not-allowed; color: var(--g-encre-600); }
.ges-radio input:disabled { background: var(--g-lin-100); cursor: not-allowed; }
.ges-radio-texte { display: grid; gap: .1rem; min-width: 0; }
.ges-radio-titre { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--g-foret-800); }
.ges-radio:has(input:disabled) .ges-radio-titre { color: var(--g-encre-600); }
.ges-radio-titre .ic { width: 22px; height: 22px; }
.ges-radio-detail { color: var(--g-encre-600); }

/* ================================================================ Connexion et inscription */

.ges-main-seule { padding: 0; max-width: none; }
.ges-connexion { display: grid; min-height: 100vh; background: var(--g-lin); }
.ges-connexion-photo { position: relative; height: 34vh; min-height: 220px; overflow: hidden; background: var(--g-foret); }
.ges-connexion-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; animation: ges-balle 900ms var(--ease-balle, cubic-bezier(.3,0,.2,1)) both; }
@keyframes ges-balle { from { transform: scale(1.06) translateY(-18px); } to { transform: none; } }
.ges-connexion-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(14,38,26,0) 35%, rgba(14,38,26,.55) 100%), linear-gradient(180deg, rgba(14,38,26,0) 50%, rgba(14,38,26,.75) 100%); }
.ges-connexion-legende { position: absolute; z-index: 2; left: var(--g-gout); right: var(--g-gout); bottom: 2.6rem; display: flex; align-items: flex-end; gap: 1rem; }
.ges-connexion-marque { --marque-taille: 64px !important; text-decoration: none; }
.ges-connexion-accroche { display: none; }
.ges-connexion-crete { position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: 40px; }
.ges-connexion-panneau {
  position: relative; z-index: 3; margin-top: -1.25rem; padding: 1.25rem var(--g-gout) 2.5rem; background: var(--g-lin);
  border-radius: 24px 24px 0 0; width: 100%; max-width: 560px; justify-self: center;
}
.ges-connexion-haut { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.ges-connexion-titre { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); margin: 0 0 .75rem; }
.ges-connexion .ges-form { margin-bottom: 1.25rem; }
.ges-note-test { font-size: 16px; }
.ges-aide { display: flex; gap: .6rem; align-items: flex-start; padding: 1rem; border-radius: 16px; background: var(--g-vosges-100); color: var(--g-vosges); }
.ges-aide span { color: var(--g-encre); }
.ges-aide .ic { flex: none; width: 24px; height: 24px; margin-top: .15rem; }
.ges-aide a { font-weight: 700; white-space: nowrap; }
@media (min-width: 960px) {
  .ges-connexion { grid-template-columns: 55fr 45fr; }
  .ges-connexion-photo { height: 100vh; position: sticky; top: 0; }
  .ges-connexion-photo img { object-position: 50% 50%; }
  .ges-connexion-legende { bottom: 4.5rem; left: 3rem; right: 3rem; display: grid; gap: 1rem; }
  .ges-connexion-marque { --marque-taille: 104px !important; }
  .ges-connexion-marque .marque-l2 { font-size: 2.2rem; }
  .ges-connexion-marque .marque-l1 { font-size: 1.1rem; }
  .ges-connexion-accroche { display: block; max-width: 30rem; margin: 0; font-size: 1.15rem; color: var(--g-lin-100); }
  .ges-connexion-crete { height: 72px; }
  .ges-connexion-panneau { margin: 0; align-self: center; padding: 2.5rem clamp(2rem, 4vw, 4rem); border-radius: 0; max-width: 560px; }
}


/* ================================================================ Écrans de la gestion du site */
.ges-site-chapo { max-width: 62ch; }
.ges-site-menu { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 900px) { .ges-site-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ges-site-entree {
  display: flex; align-items: center; gap: 1rem; height: 100%; min-height: 104px; padding: 1.1rem 1.25rem;
  background: var(--g-blanc); border: 1px solid var(--g-trait); border-radius: 16px; box-shadow: var(--g-ombre-1);
  color: var(--g-encre); text-decoration: none;
  transition: border-color var(--duree-micro, 120ms), transform var(--duree-micro, 120ms), box-shadow var(--duree-micro, 120ms);
}
.ges-site-entree:hover { border-color: var(--g-accent); box-shadow: var(--g-ombre-2); transform: translateY(-2px); color: var(--g-encre); }
.ges-site-entree-ic { width: 48px; height: 48px; padding: 10px; flex: none; border-radius: 50%; background: var(--g-accent-pale); color: var(--g-accent-fonce); }
.ges-site-entree-texte { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.ges-site-entree-texte strong { font-size: 1.15rem; color: var(--g-foret-800); }
.ges-site-entree-texte > span:not(.ges-site-etat) { color: var(--g-encre-600); }
.ges-site-etat { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-top: .3rem; font-weight: 600; color: var(--g-foret-800); overflow-wrap: anywhere; }
.ges-site-extrait { font-weight: 400; font-style: italic; color: var(--g-encre-600); }
.ges-site-entree-fleche { width: 24px; height: 24px; flex: none; color: var(--g-accent); }

.ges-site-form { max-width: 880px; }
.ges-site-carte { display: grid; gap: 1rem; margin: 0; }
.ges-site-carte > h2 { margin: 0; }
.ges-site-erreurs { align-items: flex-start; }
.ges-site-erreurs p { margin: 0 0 .35rem; }
.ges-site-erreurs ul { margin: 0; padding-left: 1.2rem; font-weight: 500; }
.ges-site-erreurs li { margin: .2rem 0; }

/* Listes modifiables : une ligne par élément */
.ges-site-liste { display: grid; gap: .85rem; min-width: 0; }
.ges-site-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; min-width: 0; }
.ges-site-ligne { display: grid; gap: .65rem; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--g-trait); background: var(--g-lin); min-width: 0; }
.ges-site-champs { display: grid; gap: .75rem; min-width: 0; }
@media (min-width: 700px) {
  .ges-site-cols-plat { grid-template-columns: minmax(0, 1fr) 11rem; align-items: start; }
  .ges-site-cols-tarif { grid-template-columns: minmax(0, 1.5fr) 9.5rem minmax(0, 1.1fr); align-items: start; }
}
.ges-site-prix input { font-family: var(--g-chiffres); }
.ges-site-suppr {
  justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; min-height: 48px;
  padding: .25rem 1rem .25rem .8rem; border: 2px solid #E8B4B3; border-radius: 999px; background: var(--g-blanc);
  color: var(--g-cerf); font-weight: 600; cursor: pointer;
}
.ges-site-suppr span { display: inline-flex; align-items: center; gap: .4rem; }
.ges-site-suppr input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--g-cerf); cursor: pointer; }
.ges-site-suppr:hover { background: var(--g-cerf-100); }
.ges-site-suppr:has(input:focus-visible) { outline: 3px solid var(--g-foret); outline-offset: 2px; }
.ges-site-suppr:has(input:checked) { background: var(--g-cerf-100); border-color: var(--g-cerf); border-radius: 16px; }
.ges-site-ligne:has(> .ges-site-suppr input:checked),
.ges-site-rubrique:has(.ges-site-rubrique-tete .ges-site-suppr input:checked) { border-style: dashed; border-color: var(--g-cerf); background: #FFF8F7; }
.ges-site-ligne:has(> .ges-site-suppr input:checked) > :not(.ges-site-suppr),
.ges-site-rubrique:has(.ges-site-rubrique-tete .ges-site-suppr input:checked) > .ges-site-liste,
.ges-site-rubrique:has(.ges-site-rubrique-tete .ges-site-suppr input:checked) .ges-site-rubrique-tete .ges-champ { opacity: .5; }
.ges-site-suppr:has(input:checked)::after { content: "sera supprimé à l’enregistrement"; font-weight: 400; }
.ges-site-ajouter { justify-self: start; }

/* Carte du restaurant : une carte par rubrique */
.ges-site-liste-rubriques > .ges-site-lignes { gap: 1.25rem; }
.ges-site-rubrique { display: grid; gap: 1rem; margin: 0; }
.ges-site-rubrique-tete { display: grid; gap: .75rem; align-items: end; }
@media (min-width: 700px) { .ges-site-rubrique-tete { grid-template-columns: minmax(0, 1fr) auto; } }
.ges-site-rubrique-tete input { font-weight: 700; color: var(--g-foret-800); }

/* Questions fréquentes : position, monter, descendre */
.ges-site-ordre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .6rem; }
.ges-site-ordre .ges-champ { width: 7.5rem; }
.ges-site-bouger { min-height: 48px; padding: .5rem 1rem; }
.ges-site-question textarea { min-height: 6.5rem; }

/* Actualités */
.ges-site-actus { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .85rem; }
.ges-site-actu {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: .9rem 1rem; align-items: start; padding: 1rem;
  background: var(--g-blanc); border: 1px solid var(--g-trait); border-radius: 16px; box-shadow: var(--g-ombre-1);
}
.ges-site-actu-brouillon { background: var(--g-lin); border-style: dashed; border-color: var(--g-trait-400); box-shadow: none; }
.ges-site-actu-texte { min-width: 0; }
.ges-site-actu-date { margin: 0; color: var(--g-encre-600); font-size: 1rem; }
.ges-site-actu-titre { margin: .1rem 0 .45rem; font-size: 1.2rem; line-height: 1.25; overflow-wrap: anywhere; }
.ges-site-actu-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; }
.ges-site-actu-actions form { margin: 0; }
@media (min-width: 960px) {
  .ges-site-actu { grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; }
  .ges-site-actu-actions { grid-column: auto; justify-content: flex-end; }
}
.ges-site-vignette { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--g-lin-100); border: 1px solid var(--g-trait); }
.ges-site-vignette-vide { display: grid; place-items: center; color: var(--g-trait-400); }
.ges-site-vignette-vide .ic { width: 32px; height: 32px; }
.ges-site-photo { margin: 0; display: grid; gap: .35rem; justify-items: start; }
.ges-site-photo img, .ges-site-photo-choisie { max-width: min(100%, 320px); max-height: 260px; width: auto; height: auto; object-fit: contain; border-radius: 12px; border: 1px solid var(--g-trait); }
.ges-site-photo figcaption { color: var(--g-encre-600); font-size: 1rem; }
.ges-site-photo-info { margin: .25rem 0 0; font-weight: 600; color: var(--g-ok); overflow-wrap: anywhere; }
.ges-site-photo-info.ges-site-photo-trop { color: var(--g-cerf); }
.ges-champ input[type=file] { min-height: 56px; padding: .6rem; border: 2px dashed var(--g-trait-400); border-radius: 12px; background: var(--g-blanc); cursor: pointer; max-width: 100%; }

/* Bandeau : aperçu identique au site */
.ges-site-apercu { display: grid; gap: .5rem; padding-top: .25rem; }
.ges-site-apercu > .ges-etiquette-champ { margin: 0; font-weight: 600; }
.ges-site-apercu .bandeau-site { border-radius: 12px; overflow: hidden; }
.ges-site-apercu .bandeau-site-ligne { padding-inline: 1rem; }
.bandeau-site-info .ges-site-ic-alerte, .bandeau-site-alerte .ges-site-ic-info { display: none; }
.ges-site-apercu-vide { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .8rem 1rem; border-radius: 12px; background: var(--g-lin-100); color: var(--g-encre-600); }

/* ================================================================ Compléments des écrans de la gestion */
.ges-ic-retour { transform: rotate(180deg); }
.ges-etiquette-champ { font-weight: 600; margin: 0 0 .35rem; display: block; }
.ges-boutons-ligne { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.ges-ligne-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ges-ligne-actions form { margin: 0; }
.bouton.ges-petit { min-height: 48px; padding: .4rem 1rem; font-size: 1rem; }
.ges-zone-sensible { margin: 1.25rem 0; padding: 1.25rem; border-radius: 16px; border: 2px solid #E8B4B3; background: #FFF8F7; max-width: 880px; }
.ges-zone-sensible h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; color: var(--g-cerf); }
.ges-zone-sensible form { margin: 0; }
.ges-barre-enregistrer { position: sticky; bottom: calc(env(safe-area-inset-bottom) + .5rem); z-index: 4; margin-top: .25rem;
  padding: .6rem; border-radius: 999px; background: rgba(250,247,240,.92); backdrop-filter: blur(4px);
  display: flex; justify-content: flex-end; }
@media (max-width: 599px) { .ges-barre-enregistrer .bouton { width: 100%; } }
.ges-section-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.ges-section-tete h2 { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: var(--t-h3, 1.35rem); }
.ges-section-tete h2 .ic { color: var(--g-accent); }
.ges-note-test { margin-top: 1rem; padding: .75rem 1rem; border-radius: 12px; background: var(--g-att-100); color: var(--g-encre); }
.ges-note-test .ic { color: var(--g-att); }
.ges-code { font-family: var(--g-chiffres); font-weight: 600; color: var(--g-foret-800); overflow-wrap: anywhere; }
.ges-confirmation { max-width: 640px; }
.ges-confirmation p { font-size: 1.1rem; }
.ges-radios > legend { display: flex; align-items: center; gap: .45rem; }
.ges-radios > legend .ic { width: 24px; height: 24px; color: var(--g-accent); }
.ges-terrain-grille { display: grid; gap: 1.25rem; }
@media (min-width: 1100px) { .ges-terrain-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ges-terrain-grille .ges-radios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ges-terrain-grille .ges-radio { min-height: 64px; padding: .8rem; }
@media (max-width: 379px) { .ges-terrain-grille .ges-radios { grid-template-columns: minmax(0, 1fr); } }
.ges-site-vignette { display: block; }
.ges-champ-photo { padding: 1rem; border-radius: 14px; background: var(--g-lin); border: 1px solid var(--g-trait); }
.ges-site-photo-info.ges-site-photo-attente { color: var(--g-encre-600); }

/* Photos du site : un emplacement par ligne */
.ges-emps { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ges-emp { border: 1px solid var(--g-trait); border-radius: 14px; background: var(--g-lin); overflow: hidden; }
.ges-emp-ligne { padding: .85rem; }
.ges-emp-ligne > .ges-site-vignette { width: 96px; }
@media (min-width: 760px) { .ges-emp-ligne > .ges-site-vignette { width: 120px; } }
.ges-emp-alt { display: block; margin: .4rem 0 0; color: var(--g-encre-600); font-size: 1rem; overflow-wrap: break-word; }

/* Galerie, rayons, marques, équipe : listes ordonnées */
.ges-galerie, .ges-elements, .ges-comptes { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.ges-galerie-item, .ges-element { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .75rem 1rem; align-items: start;
  padding: .9rem; border: 1px solid var(--g-trait); border-radius: 14px; background: var(--g-lin); }
.ges-element-court { grid-template-columns: minmax(0, 1fr); }
.ges-galerie-corps { display: grid; gap: .75rem; min-width: 0; }
.ges-galerie-legende { gap: .5rem; }
.ges-galerie-legende .bouton { justify-self: start; }
.ges-element-texte { min-width: 0; }
.ges-element-texte h3 { margin: .1rem 0 .25rem; font-size: 1.15rem; overflow-wrap: anywhere; }
.ges-element-texte p { margin: 0; color: var(--g-encre-600); overflow-wrap: anywhere; }
.ges-element > .ges-ligne-actions { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .ges-galerie-item { grid-template-columns: 160px minmax(0, 1fr); }
  .ges-element { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; }
  .ges-element-court { grid-template-columns: minmax(0, 1fr) auto; }
  .ges-element > .ges-ligne-actions { grid-column: auto; justify-content: flex-end; }
}
.ges-ajout-ligne { grid-template-columns: minmax(0, 1fr); align-items: end; margin-top: 1rem; }
@media (min-width: 700px) { .ges-ajout-ligne { grid-template-columns: minmax(0, 1fr) auto; } .ges-ajout-ligne .ges-aide-champ { grid-column: 1; } }
.ges-compte { display: grid; gap: .6rem; padding: .9rem 1rem; border: 1px solid var(--g-trait); border-radius: 14px; background: var(--g-lin); }
.ges-compte-texte { display: grid; gap: .1rem; min-width: 0; }
.ges-compte-texte strong { font-size: 1.1rem; color: var(--g-foret-800); overflow-wrap: anywhere; }
@media (min-width: 900px) { .ges-compte { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.ges-mdp { display: flex; gap: .5rem; }
.ges-mdp input { flex: 1; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .ges-connexion-photo img, .ges-feuille[open], .ges-dialogue[open] { animation: none !important; }
}
@media print {
  .ges-entete, .ges-nav, .ges-feuille, .ges-flash, .ges-tete-actions, .ges-barre-enregistrer, .evitement { display: none !important; }
  .ges-main { padding: 0 !important; }
}
@media (max-width: 599px) {
  .ges-tete { margin-bottom: 1rem; gap: .75rem; }
  .ges-tete-actions { gap: .5rem; }
}

/* ================================================================ Replis, groupes, ordre (communs à toutes les tailles)
   Le même HTML sert partout. Sur ordinateur, les <details data-repli-mobile> restent ouverts et leur résumé est
   masqué (rien ne change à l'écran). Sur téléphone (sous 600 px), gestion.js les ferme au chargement : chaque élément
   devient une ligne qu'on touche pour l'ouvrir. Sans JavaScript, tout reste ouvert. */
.ges-repli-titre { list-style: none; cursor: pointer; }
.ges-repli-titre::-webkit-details-marker { display: none; }
.ges-repli-texte { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.ges-repli-nom { font: 600 1.0625rem/1.3 var(--g-ui); color: var(--g-encre); overflow-wrap: break-word; }
.ges-repli-detail { font: 400 max(15px, .9375rem)/1.35 var(--g-ui); color: var(--g-encre-600); overflow-wrap: break-word; }
.ges-repli-detail:empty { display: none; }
.ges-repli-modifier { flex: none; font: 600 max(15px, .9375rem)/1 var(--g-ui); color: var(--g-foret-700); }
/* Chevron : › quand c'est fermé (on touche pour ouvrir), ⌄ quand c'est ouvert. */
.ges-repli-chevron { flex: none; width: 20px; height: 20px; color: var(--g-encre-600); transform: rotate(-90deg); transition: transform var(--duree-petit, 200ms); }
details[open] > summary .ges-repli-chevron { transform: none; }
details[open] > summary .ges-repli-modifier { visibility: hidden; }
.ges-groupe { margin: 0 0 1.5rem; }
.ges-groupe-titre { margin: 0 0 .6rem; font: 700 1rem/1.3 var(--g-ui); color: var(--g-foret-800); }
.ges-ordre { display: inline-flex; flex-wrap: wrap; gap: .5rem; }
.ges-ordre form, .ges-suppr-liste form { margin: 0; }
.ges-ordre-bascule { justify-self: start; min-height: 48px; }
.ges-ordre-bascule[aria-pressed="true"] { background: var(--g-accent-pale); }
.ges-ordre-zone { display: grid; gap: .85rem; }

@media (min-width: 600px) {
  .ges-aide-ecran > summary, .ges-repli-ligne > summary, .ges-repli-photo > summary, .ges-ordre-bascule { display: none !important; }
  .ges-repli-section > summary { display: flex; align-items: center; gap: .75rem; cursor: auto; pointer-events: none; padding-right: 11rem; }
  .ges-repli-section > summary h2 { margin: 0; font-size: var(--t-h3, 1.35rem); }
  .ges-repli-section > summary .ges-repli-texte { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
  .ges-repli-section .ges-repli-chevron { display: none; }
  .ges-repli-section > .ges-repli-corps { margin-top: .9rem; }
  .ges-emp-groupe { position: relative; }
  .ges-emp-voir { position: absolute; top: clamp(.6rem, .4rem + .8vw, 1rem); right: clamp(.6rem, .4rem + .8vw, 1rem); }
  .ges-galerie-corps > .ges-repli > .ges-repli-corps { display: grid; gap: .75rem; }
  .ges-groupe + .ges-groupe { margin-top: 1.75rem; }
}

/* ================================================================ Téléphone (sous 600 px) : une appli simple
   Un sujet par écran, des listes à lignes de 56 à 72 px, un gros bouton « Enregistrer » collé en bas, un retour
   évident en haut. Mêmes formulaires, mêmes champs : seule la présentation change. */
@media (max-width: 599px) {
  /* Champs à 16 px au moins : l'iPhone ne zoome plus à la saisie. */
  html.gestion input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  html.gestion select, html.gestion textarea { font-size: max(16px, 1rem); }
  html.gestion .badge { font-size: max(15px, .9375rem); }
  .ges-bureau-seul { display: none !important; }

  /* En-tête : logo, Agrandir le texte, Menu. Le titre de l'écran est juste en dessous, en entier. */
  .ges-entete { gap: .5rem; }
  .ges-entete-titre { display: none; }
  .ges-entete .ges-texte { margin-left: auto; }

  .ges-main { padding: 1rem var(--g-gout) 2rem; }

  /* Tête d'écran : « ‹ Retour » d'abord (l'ordre du clavier ne change pas : le titre n'est pas un lien). */
  .ges-tete { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .35rem; margin-bottom: 1rem; }
  .ges-tete-texte { min-width: 0; }
  .ges-tete h1 { overflow-wrap: anywhere; }
  .ges-sous-titre { font-size: 1rem; }
  .ges-tete-actions:has(.ges-ic-retour) { order: -1; justify-content: space-between; margin: -.5rem 0 .15rem; gap: .25rem .5rem; }
  .ges-tete-actions .bouton-fantome { padding-inline: .1rem .5rem; margin-left: -.1rem; font-size: 1.0625rem; }
  .ges-tete-actions .bouton-contour { min-height: 48px; padding: .4rem .9rem; font-size: 1rem; }
  /* « Voir le site » : un lien texte, plus discret que le retour, sur la même ligne que lui. */
  .ges-tete-actions .ges-voir-tete {
    min-height: 48px; padding: 0 .25rem; border: 0; border-radius: 8px; background: none; box-shadow: none;
    color: var(--g-foret-700); font: 600 1rem/1.2 var(--g-ui); text-decoration: underline; text-underline-offset: .2em;
  }
  .ges-tete-actions .ges-voir-tete:hover { background: var(--g-gazon-100); color: var(--g-foret-800); }
  .ges-tete-actions .ges-voir-tete .ic { width: 18px; height: 18px; }
  .ges-tete-actions:not(:has(.ges-ic-retour)) { display: none; }
  .ges-voir-bas { display: block !important; margin: .5rem 0 0; }
  .ges-voir-bas .bouton { width: 100%; }

  /* Aide repliée sous le titre */
  .ges-aide-ecran { margin: 0 0 1rem; }
  .ges-aide-ecran > summary {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 .9rem 0 .7rem; border-radius: 999px;
    background: var(--g-vosges-100); color: var(--g-vosges); font: 600 1rem/1.2 var(--g-ui);
  }
  .ges-aide-ecran > summary .ic { width: 22px; height: 22px; }
  .ges-aide-ecran[open] > summary { margin-bottom: .5rem; }
  .ges-aide-ecran .ges-chapo { margin: 0; font-size: 1rem; }

  /* Tableau de bord : une liste de réglages, comme sur un téléphone */
  .ges-site-chapo { font-size: 1rem; }
  .ges-groupe { margin-bottom: 1.25rem; }
  .ges-groupe-titre { font-size: max(15px, .9375rem); margin-bottom: .5rem; }
  .ges-site-menu { gap: 0; margin: 0; background: var(--g-blanc); border: 1px solid var(--g-trait); border-radius: 16px;
    box-shadow: var(--g-ombre-1); overflow: hidden; }
  .ges-site-menu > li { position: relative; }
  .ges-site-menu > li + li::before { content: ""; position: absolute; top: 0; left: 68px; right: 0; border-top: 1px solid var(--g-trait); }
  .ges-site-entree { min-height: 72px; gap: .75rem; padding: .55rem .9rem .55rem 1rem; border: 0; border-radius: 0; box-shadow: none; }
  .ges-site-entree:hover { transform: none; box-shadow: none; }
  .ges-site-entree:active { background: var(--g-gazon-100); }
  .ges-site-entree-ic { width: 40px; height: 40px; padding: 9px; }
  .ges-site-entree-texte { gap: .1rem; }
  .ges-site-entree-texte strong { font: 600 1.0625rem/1.3 var(--g-ui); }
  .ges-site-entree-desc, .ges-site-extrait { display: none; }
  .ges-site-etat { margin-top: 0; font: 400 max(15px, .9375rem)/1.35 var(--g-ui); color: var(--g-encre-600); }
  .ges-site-etat .badge { min-height: 0; padding: .1rem .55rem; white-space: normal; border-radius: 12px; }
  .ges-site-entree-fleche { width: 20px; height: 20px; color: var(--g-encre-600); }

  /* Cartes et formulaires plus compacts */
  .ges-carte { padding: 1rem; margin-bottom: 1rem; }
  .ges-carte > h2, .ges-section-tete h2 { font: 600 1.125rem/1.3 var(--g-ui); }
  .ges-form { gap: .85rem; }
  .ges-site-carte { gap: .85rem; }
  .ges-champ-photo { padding: .75rem; }
  .ges-site-photo img, .ges-site-photo-choisie { max-height: 200px; }
  .ges-section-tete .bouton { width: 100%; }

  /* Le bouton « Enregistrer » : collé en bas de l'écran, pleine largeur */
  .ges-barre-enregistrer {
    bottom: 0; margin: .25rem calc(-1 * var(--g-gout)) 0; padding: .5rem var(--g-gout) calc(.5rem + env(safe-area-inset-bottom));
    border-radius: 0; background: rgba(250,247,240,.97); border-top: 1px solid var(--g-trait);
    box-shadow: 0 -6px 16px -10px rgba(14,38,26,.35);
  }
  .ges-barre-enregistrer .bouton { width: 100%; min-height: 56px; padding: .75rem 1rem; }
  html.gestion .ges-barre-enregistrer .bouton { min-height: 56px; }
  .ges-zone-sensible { margin-top: 2rem; padding: 1rem; }
  .ges-zone-sensible .bouton { width: 100%; }

  /* État du terrain : Ouvert | Fermé, deux gros boutons côte à côte */
  .ges-terrain-grille { gap: .9rem; }
  .ges-terrain-grille .ges-radios.ges-choix-duo, .ges-radios.ges-choix-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
  .ges-choix-duo > legend { margin-bottom: .4rem; font: 600 1.0625rem/1.3 var(--g-ui); color: var(--g-foret-800); }
  .ges-choix-duo .ges-radio {
    min-height: 56px; padding: .4rem .5rem; align-items: center; justify-content: center; text-align: center;
    border: 2px solid var(--g-trait-400); background: var(--g-blanc);
  }
  .ges-choix-duo .ges-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
  .ges-choix-duo .ges-radio-detail { display: none; }
  .ges-choix-duo .ges-radio-titre { justify-content: center; font: 600 1.0625rem/1.2 var(--g-ui); color: var(--g-encre); }
  .ges-choix-duo .ges-radio-titre .ic { width: 22px; height: 22px; }
  .ges-choix-duo .ges-radio:nth-of-type(1):has(input:checked) { background: var(--g-ok); border-color: var(--g-ok); }
  .ges-choix-duo .ges-radio:nth-of-type(2):has(input:checked) { background: var(--g-cerf); border-color: var(--g-cerf); }
  .ges-choix-duo .ges-radio:has(input:checked) .ges-radio-titre { color: #fff; }
  .ges-choix-duo .ges-radio:not(:has(input:checked)) .ges-duo-ic { color: var(--g-encre-600); }
  .ges-radios > legend { font-size: 1.0625rem; }
  .ges-radio { min-height: 56px; padding: .75rem .85rem; }

  /* Listes longues (plats, tarifs, questions) : une ligne repliée par élément */
  .ges-site-lignes { gap: .5rem; }
  .ges-site-ligne { padding: 0 .9rem; background: var(--g-blanc); gap: 0; }
  .ges-repli-ligne > summary, .ges-repli-photo > summary {
    display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: .45rem 0;
  }
  .ges-repli-ligne[open] > summary { border-bottom: 1px solid var(--g-trait); margin-bottom: .75rem; }
  .ges-repli-ligne > .ges-repli-corps { display: grid; gap: .65rem; padding-bottom: .9rem; }
  .ges-site-ligne:has(.ges-site-suppr input:checked) .ges-repli-nom::after { content: " (sera supprimé)"; color: var(--g-cerf); font-weight: 600; }
  .ges-site-rubrique { padding: .9rem; }
  .ges-site-rubrique-tete .ges-aide-champ { display: none; }
  .ges-site-ajouter { width: 100%; }
  .ges-site-ordre .ges-champ { width: 6rem; }
  .ges-site-ordre { gap: .5rem; }
  .ges-site-bouger { flex: 1 1 auto; }

  /* Photos du site : une section repliée par page, une ligne par photo */
  .ges-emp-groupe { padding: 0 1rem; }
  .ges-repli-section > summary { display: flex; align-items: center; gap: .75rem; min-height: 64px; padding: .5rem 0; }
  .ges-repli-section > summary h2 { margin: 0; font: 600 1.125rem/1.3 var(--g-ui); color: var(--g-foret-800); }
  .ges-repli-section[open] > summary { border-bottom: 1px solid var(--g-trait); }
  .ges-repli-section > .ges-repli-corps { display: grid; gap: .6rem; padding: .5rem 0 1rem; }
  .ges-emp-voir { justify-self: start; padding-inline: .25rem; }
  .ges-emps { gap: .5rem; }
  .ges-emp { background: var(--g-blanc); }
  .ges-emp-ligne { padding: .5rem .75rem; }
  .ges-emp-ligne > .ges-site-vignette { width: 56px; }
  .ges-emp-texte .badge { min-height: 0; padding: .1rem .55rem; border-radius: 12px; white-space: normal; }
  .ges-emp-alt { display: none; }

  /* Galerie, rayons, marques, équipe : vignette, nom, « Modifier » ; l'ordre derrière « Changer l'ordre » */
  .ges-galerie-item, .ges-element { grid-template-columns: 64px minmax(0, 1fr); gap: .5rem .75rem; padding: .6rem; align-items: center; background: var(--g-blanc); }
  .ges-galerie-item { align-items: start; }
  .ges-galerie-item > .ges-site-vignette, .ges-element > .ges-site-vignette { width: 64px; }
  .ges-galerie-corps { gap: .5rem; }
  .ges-repli-photo > .ges-repli-corps { display: grid; gap: .75rem; padding: .5rem 0 .25rem; }
  .ges-repli-photo[open] > summary { border-bottom: 1px solid var(--g-trait); }
  .ges-repli-photo > summary { min-height: 64px; padding: .2rem 0; }
  .ges-element > .ges-ligne-actions { grid-column: 2; }
  .ges-element-court { grid-template-columns: minmax(0, 1fr) auto; }
  .ges-element-court > .ges-ligne-actions { grid-column: auto; }
  .ges-element-texte h3 { font: 600 1.0625rem/1.3 var(--g-ui); color: var(--g-encre); margin: 0; }
  .ges-element-texte p { font-size: max(15px, .9375rem); }
  .ges-element:not(.ges-element-court) .ges-suppr-liste { display: none; }
  html.js [data-ordre-zone]:not(.ges-ordre-actif) .ges-ordre { display: none; }
  .ges-ordre-bascule { width: 100%; }
  .ges-ordre .bouton { flex: 1 1 auto; }

  /* Actualités et comptes */
  .ges-site-actu { grid-template-columns: 64px minmax(0, 1fr); padding: .75rem; gap: .6rem .75rem; }
  .ges-site-actu-titre { font: 600 1.0625rem/1.3 var(--g-ui); color: var(--g-encre); }
  .ges-site-actu-actions .bouton { flex: 1 1 auto; min-height: 48px; }
  .ges-compte .ges-ligne-actions { display: grid; gap: .5rem; }
  .ges-compte .ges-ligne-actions .bouton { width: 100%; }
  .ges-boutons-ligne .bouton { flex: 1 1 100%; }

  /* Connexion : la photo laisse la place au formulaire */
  .ges-connexion-photo { height: 26vh; min-height: 170px; }
}
@media (prefers-reduced-motion: reduce) { .ges-repli-chevron, .ges-ligne { transition: none; } }
.ges-flash-voir { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: inherit; font-weight: 700; text-decoration: underline; }
.ges-flash-voir .ic { width: 20px; height: 20px; }
.ges-voir-bas { display: none; }

/* ================================================================ Ligne de liste : un seul modèle pour « ouvrir un élément »
   Vignette (ou pastille), nom, précision, puis « Modifier › » à droite ; toute la ligne est la zone à toucher.
   Sert aux photos du site, aux rayons et à l'équipe ; les lignes repliables (plats, tarifs, questions, galerie)
   reprennent le même « Modifier » et le même chevron. */
.ges-chevron-droite { transform: rotate(-90deg); }
.ges-mobile-seul, .ges-choisir-photo { display: none; }
.ges-ligne {
  display: flex; align-items: center; gap: .75rem; min-height: 72px; width: 100%; box-sizing: border-box;
  color: var(--g-encre); text-decoration: none; border-radius: inherit;
  transition: background var(--duree-micro, 120ms);
}
.ges-ligne:hover, .ges-ligne:active { background: var(--g-gazon-100); color: var(--g-encre); }
.ges-ligne:focus-visible { outline: 3px solid var(--g-foret); outline-offset: -3px; }
.ges-ligne > .ges-site-vignette { flex: none; width: 56px; }
.ges-ligne-texte { display: grid; gap: .15rem; flex: 1; min-width: 0; }
.ges-ligne-nom { font: 600 1.0625rem/1.3 var(--g-ui); color: var(--g-encre); overflow-wrap: break-word; }
.ges-ligne-precision { font: 400 max(15px, .9375rem)/1.35 var(--g-ui); color: var(--g-encre-600); overflow-wrap: break-word; }
.ges-ligne-precision:empty { display: none; }
.ges-ligne-action { flex: none; display: inline-flex; align-items: center; gap: .1rem; font: 600 max(15px, .9375rem)/1.2 var(--g-ui); color: var(--g-foret-700); }
.ges-ligne-action .ic { width: 20px; height: 20px; flex: none; color: var(--g-encre-600); }

/* Rayons et équipe : la ligne, puis Monter / Descendre / Supprimer (sur ordinateur, à droite) */
.ges-elements > .ges-element-ligne { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; align-items: center; overflow: hidden; }
.ges-elements > .ges-element-ligne > .ges-ligne { padding: .5rem .9rem; }
.ges-elements > .ges-element-ligne > .ges-ligne-actions { grid-column: 1; padding: 0 .9rem .75rem; }
@media (min-width: 600px) { .ges-element-ligne .ges-ligne > .ges-site-vignette { width: 72px; } }
@media (min-width: 900px) {
  .ges-elements > .ges-element-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .ges-elements > .ges-element-ligne > .ges-ligne-actions { grid-column: auto; padding: 0 .9rem 0 0; justify-content: flex-end; }
}
.ges-ajouter-bas { margin: .25rem 0 0; }

/* Carte du restaurant : la rubrique est un titre ; « Renommer ou supprimer » en bas (en tête sur ordinateur) */
.ges-rubrique-titre { margin: 0; font: 700 1.25rem/1.25 var(--g-titre); color: var(--g-foret-800); overflow-wrap: break-word; }
.ges-site-rubrique:has(.ges-site-rubrique-tete .ges-site-suppr input:checked) .ges-rubrique-titre::after {
  content: " (sera supprimée)"; font: 600 1rem/1.3 var(--g-ui); color: var(--g-cerf);
}
@media (min-width: 600px) {
  .ges-rubrique-titre { display: none; }
  .ges-repli-rubrique { order: -1; }
}

@media (max-width: 599px) {
  .ges-mobile-seul { display: inline; }
  .ges-titre-bureau { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* Rayons, équipe : ligne de 72 px ; Monter / Descendre seulement après « Changer l'ordre » */
  .ges-elements > .ges-element-ligne { padding: 0; background: var(--g-blanc); }
  .ges-elements > .ges-element-ligne > .ges-ligne { padding: .5rem .75rem; }
  .ges-elements > .ges-element-ligne > .ges-ligne-actions { grid-column: 1; padding: 0 .75rem .75rem; }
  html.js [data-ordre-zone]:not(.ges-ordre-actif) .ges-element-ligne > .ges-ligne-actions { display: none; }
  .ges-ajouter-bas .bouton { width: 100%; }

  /* Galerie : la légende garde toute la place ; le chevron suffit pour dire « on peut ouvrir » */
  .ges-galerie-item .ges-repli-modifier { display: none; }

  /* Carte du restaurant */
  .ges-site-rubrique { gap: .75rem; }
  .ges-repli-rubrique > summary { border-top: 1px solid var(--g-trait); }
  .ges-repli-rubrique > summary .ges-repli-nom { color: var(--g-foret-700); font-size: 1rem; }

  /* État du terrain : un seul écran */
  .ges-terrain-carte { gap: .75rem; }
  .ges-terrain-grille { gap: .75rem; }
  .ges-terrain-carte .ges-note { display: none; }   /* redit le sous-titre « Ce que voient les joueurs sur l’accueil » */

  /* Choisir une photo : un bouton de l'appli (le champ natif, même nom, reste là pour le clavier et l'envoi) */
  html.js .ges-champ-photo { position: relative; }
  html.js .ges-champ-photo .ges-fichier {
    position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; overflow: hidden;
  }
  html.js .ges-choisir-photo { display: inline-flex; width: 100%; min-height: 52px; cursor: pointer; }
  html.js .ges-champ-photo:has(.ges-fichier:focus-visible) .ges-choisir-photo { outline: 3px solid var(--g-foret); outline-offset: 2px; }

  /* Texte agrandi : la vignette rétrécit, le mot « Modifier » laisse la place (le chevron reste) */
  html.texte-grand .ges-repli-modifier, html.texte-grand .ges-ligne-action-mot { display: none; }
  html.texte-grand .ges-galerie-item { grid-template-columns: 48px minmax(0, 1fr); }
  html.texte-grand .ges-galerie-item > .ges-site-vignette, html.texte-grand .ges-ligne > .ges-site-vignette { width: 48px; }
}
@media (max-width: 599px) {
  /* En texte agrandi, « Voir ↗ » tient sur la ligne du retour */
  html.texte-grand .ges-voir-complement { display: none; }
  .ges-tete-actions:has(.ges-ic-retour) { flex-wrap: nowrap; }
}
@media (max-width: 599px) {
  /* Une ligne de 72 px : la précision tient sur une ligne (le texte entier est dans l'écran de l'élément) */
  .ges-ligne-precision { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
  html.texte-grand .ges-ligne-precision { -webkit-line-clamp: 2; line-clamp: 2; }
}
@media (max-width: 599px) {
  /* Dans une carte, la liste va d'un bord à l'autre, lignes séparées par un trait (comme le tableau de bord) :
     la place gagnée revient au nom. */
  .ges-carte > .ges-elements:has(> .ges-element-ligne), .ges-emp-groupe .ges-emps { gap: 0; margin-inline: -1rem; }
  .ges-carte > .ges-elements > .ges-element-ligne, .ges-emp-groupe .ges-emp { border: 0; border-radius: 0; border-top: 1px solid var(--g-trait); }
  .ges-carte > .ges-elements > .ges-element-ligne > .ges-ligne, .ges-emp-groupe .ges-emp-ligne { padding: .5rem 1rem; }
  .ges-carte > .ges-elements > .ges-element-ligne > .ges-ligne-actions { padding: 0 1rem .75rem; }
  .ges-ligne { gap: .65rem; }
}
.ges-ligne > .ges-site-vignette-vide { display: grid; place-items: center; }
@media (max-width: 599px) {
  /* Photos du site : l'état (« Photo d'origine », « Photo remplacée ») en simple précision, sans pastille */
  .ges-emp-texte .badge { display: inline; min-height: 0; padding: 0; background: none; border-radius: 0;
    font: 400 max(15px, .9375rem)/1.35 var(--g-ui); color: var(--g-encre-600); }
  .ges-emp-texte .badge-ok { color: var(--g-ok); font-weight: 600; }
  .ges-emp-texte .badge .ic { display: none; }
}
@media (max-width: 419px) {
  /* Photos du site : les noms d'emplacement sont longs ; sous 420 px, le chevron seul dit « on peut ouvrir »
     (comme dans la galerie). Toute la ligne reste le lien « Remplacer » (nom accessible inchangé). */
  .ges-emp-ligne .ges-ligne-action-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
html.gestion .ges-flash-voir .ges-voir-complement { display: inline; }   /* dans le message : « Voir le site » en entier */