/* Reloge - espaces membres : bandeau, menu lateral, menu du panneau mobile de Blocksy.

   Deux espaces, deux couleurs, un seul dessin :
   - proprietaire : l'orange du site (couleur 5 de la palette, #fd6905), assombri la ou un texte
     blanc s'y pose, pour rester lisible ;
   - voyageur : le bleu de Reloge (#1c3f5e), eclairci vers #2f6f91.
   La couleur franche tient au bandeau et aux reperes (icones, entree active) ; le fond de page en
   prend une teinte claire, et les ecrans restent sur des cartes blanches : c'est ce qui garde
   l'ensemble net et professionnel.

   Contrastes verifies (texte blanc) : bandeau orange >= 3,3:1 pour le grand titre, pastille du nom
   de l'espace 4,9:1 ; entree active orange 6,4:1 ; bleu partout au-dela de 5,5:1.

   Feuille chargee a part de reloge-front : le panneau vit dans l'en-tete de toutes les pages, y
   compris celles ou l'allegement du front retire les ressources de Reloge. Aucune variable de
   reloge-front n'y est donc indispensable : chacune a sa valeur de repli. */

/* ── Jetons de couleur ─────────────────────────────────────────────────── */
body.reloge-espace-page--hebergeur,
.reloge-espace--hebergeur,
.reloge-espace-nav--hebergeur,
.reloge-espace-menu--hebergeur {
  --esp-accent: #fd6905;
  --esp-actif-fond: #ffedd5;
  --esp-actif-texte: #9a3412;
  --esp-fond: #fff4eb;
  --esp-bande: linear-gradient(115deg, #f25c05 0%, #e4500a 55%, #c2410c 100%);
  --esp-ombre: rgba(194, 65, 12, .12);
}
body.reloge-espace-page--voyageur,
.reloge-espace--voyageur,
.reloge-espace-nav--voyageur,
.reloge-espace-menu--voyageur {
  --esp-accent: #2f6f91;
  --esp-actif-fond: #e2edf6;
  --esp-actif-texte: #16324b;
  --esp-fond: #eef5fa;
  --esp-bande: linear-gradient(115deg, #16324b 0%, #1c3f5e 45%, #2f6f91 100%);
  --esp-ombre: rgba(28, 63, 94, .12);
}

/* ── Page d'espace : fond, bandeau, grille ─────────────────────────────── */
body.reloge-espace-page { background-color: var(--esp-fond); }

.reloge-espace__bandeau { background: var(--esp-bande); color: #fff; }
.reloge-espace__bandeau-int { max-width: var(--theme-block-max-width, 1590px); margin-inline: auto;
  padding: clamp(1.4rem, .9rem + 2vw, 2.6rem) var(--reloge-gouttiere, 24px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.reloge-espace__titres { min-width: 0; }
.reloge-espace .reloge-espace__sur-titre { display: inline-block; margin: 0 0 .6rem; padding: .3rem .75rem;
  border-radius: 999px; background: rgba(0, 0, 0, .2); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; }
.reloge-espace .reloge-espace__titre { margin: 0; color: #fff; font-size: clamp(1.45rem, 1.05rem + 1.6vw, 2.35rem);
  line-height: 1.08; overflow-wrap: anywhere; text-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

.reloge-app.reloge-espace > .reloge-espace__grille { display: grid; grid-template-columns: minmax(14.5rem, 16.5rem) minmax(0, 1fr);
  gap: 2rem; align-items: start; padding: 2rem var(--reloge-gouttiere, 24px) 3.5rem; }
.reloge-espace__corps { min-width: 0; }
/* La gouttiere est portee par la grille : les zones de contenu n'en rajoutent pas. */
.reloge-espace__corps > .reloge-zone > .stk-row { padding-inline: 0; }
.reloge-espace__corps > .reloge-zone:first-child > .stk-row { padding-top: 0; }
/* Une zone dont le code court n'a rien rendu (le bloc d'information sans message, par exemple)
   ne creuse pas de vide en tete du contenu. */
.reloge-espace__corps > .reloge-zone:not(:has(.stk-block-column__content > .stk-inner-blocks > *)) { display: none; }
.reloge-espace__corps > .reloge-zone:not(:has(.stk-block-column__content > .stk-inner-blocks > *)) + .reloge-zone > .stk-row { padding-top: 0; }
/* Le premier ecran d'une zone s'aligne sur le haut du menu lateral. */
.reloge-espace__corps .reloge-zone .stk-inner-blocks > .reloge:first-child { margin-top: 0; }

/* ── Menu lateral ──────────────────────────────────────────────────────── */
.reloge-espace-nav { position: sticky; top: calc(var(--header-sticky-height, 0px) + var(--admin-bar, 0px) + 1.25rem);
  max-height: calc(100vh - var(--header-sticky-height, 0px) - 2.5rem); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .18) transparent;
  padding: .5rem; background: #fff; border: 1px solid rgba(15, 23, 42, .06); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px var(--esp-ombre); }

.reloge-espace-groupe + .reloge-espace-groupe { margin-top: .3rem; }
.reloge-espace-nav .reloge-espace-groupe__titre,
.reloge-espace-menu .reloge-espace-groupe__titre { margin: .9rem .7rem .35rem; color: #6b7280; font-size: .68rem;
  font-weight: 700; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; }
.reloge-espace-nav .reloge-espace-groupe:first-child .reloge-espace-groupe__titre { margin-top: .45rem; }
.reloge-espace-groupe__liens { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.reloge-espace-groupe__liens > li { margin: 0; padding: 0; }

.reloge-espace-nav .reloge-espace-lien,
.reloge-espace-menu .reloge-espace-lien { display: flex; align-items: center; gap: .7rem; min-height: 42px;
  padding: .5rem .7rem; border-radius: 10px; color: #1f2733; font-size: .93rem; font-weight: 600; line-height: 1.25;
  letter-spacing: normal; text-decoration: none; text-transform: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.reloge-espace-lien .reloge-espace-icone { flex: 0 0 auto; color: var(--esp-accent); }
.reloge-espace-nav .reloge-espace-lien:hover,
.reloge-espace-menu .reloge-espace-lien:hover { background: #f4f5f7; color: #111827; }
.reloge-espace-nav .reloge-espace-lien:focus-visible,
.reloge-espace-menu .reloge-espace-lien:focus-visible,
.reloge-espace-menu .reloge-espace-menu__tete:focus-visible,
.reloge-espace__menu:focus-visible { outline: 2px solid var(--esp-accent); outline-offset: 2px; }
.reloge-espace-nav .reloge-espace-lien.est-actif,
.reloge-espace-menu .reloge-espace-lien.est-actif { background: var(--esp-actif-fond); color: var(--esp-actif-texte);
  box-shadow: inset 3px 0 0 var(--esp-accent); }
.reloge-espace-lien.est-actif .reloge-espace-icone { color: var(--esp-actif-texte); }

.reloge-espace-groupe--sortie { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid #eef0f3; }
.reloge-espace-nav .reloge-espace-lien--sortie,
.reloge-espace-menu .reloge-espace-lien--sortie { color: #5b6675; font-weight: 500; }
.reloge-espace-lien--sortie .reloge-espace-icone { color: #8a94a3; }

/* Sur ordinateur, a la souris : des entrees plus serrees, pour que les quinze tiennent sans
   defilement sur un ecran de 900 pixels de haut (mesure du 2026-09-19 : 40 pixels de trop). */
@media (min-width: 1024px) {
  .reloge-espace-nav .reloge-espace-lien { min-height: 36px; padding: .38rem .7rem; font-size: .9rem; }
  .reloge-espace-nav .reloge-espace-groupe__titre { margin: .75rem .7rem .25rem; }
  .reloge-espace-nav .reloge-espace-groupe--sortie { margin-top: .4rem; padding-top: .4rem; }
}

/* Bouton « Menu » du bandeau : telephone seulement, et seulement quand le script est pret. */
.reloge-espace__menu { display: none; }

/* ── Telephone et tablette : le menu passe sous le bandeau, replie ─────── */
@media (max-width: 1023.98px) {
  .reloge-espace__bandeau-int { align-items: center; }
  .reloge-espace .reloge-espace__menu:not([hidden]) { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45rem;
    min-height: 44px; margin: 0; padding: .55rem 1.05rem; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 999px;
    background: rgba(255, 255, 255, .14); box-shadow: none; color: #fff; font: inherit; font-size: .92rem; font-weight: 700;
    letter-spacing: normal; line-height: 1.2; text-transform: none; cursor: pointer; }
  .reloge-espace .reloge-espace__menu:hover { background: rgba(255, 255, 255, .26); }
  .reloge-espace .reloge-espace__menu[aria-expanded="true"] { background: #fff; color: var(--esp-actif-texte); }
  .reloge-espace__menu .reloge-espace-icone { color: currentColor; }

  .reloge-app.reloge-espace > .reloge-espace__grille { display: block; padding-top: 1.25rem; }
  .reloge-espace-nav { position: static; max-height: none; overflow: visible; margin: 0 0 1.25rem; padding: .6rem; }
  .reloge-espace-nav.est-replie:not(.est-ouvert) { display: none; }
  /* Deplie dans la page, le menu prend les tuiles du panneau mobile (regles communes plus bas). */
  .reloge-espace-nav .reloge-espace-groupe__liens { grid-template-columns: 1fr 1fr; gap: 6px; }
  .reloge-espace-nav .reloge-espace-groupe__liens > li { display: flex; }
  .reloge-espace-nav .reloge-espace-lien { flex: 1 1 auto; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: .35rem; min-height: 64px; padding: .6rem .7rem; border: 1px solid #eef0f3; border-radius: 12px; font-size: .84rem; }
  .reloge-espace-nav .reloge-espace-lien .reloge-espace-icone { width: 22px; height: 22px; }
  .reloge-espace-nav .reloge-espace-lien.est-actif { border-color: var(--esp-accent); box-shadow: none; }
  .reloge-espace-nav .reloge-espace-groupe--sortie { padding-top: 0; border-top: 0; }
  .reloge-espace-nav .reloge-espace-lien--sortie { flex-direction: row; align-items: center; min-height: 48px; }
}

/* ── Panneau du menu mobile de Blocksy ─────────────────────────────────── */
/* Sans espace (visiteur anonyme), l'element du panneau disparait entierement. */
.reloge-espace-panneau { width: 100%; }
.reloge-espace-panneau:not(.est-rempli) { display: none; }
.ct-header-text:has(.reloge-espace-panneau:not(.est-rempli)) { display: none; }
/* L'element occupe toute la largeur du panneau, et les paragraphes vides que l'editeur ajoute
   autour d'un code court ne creusent pas d'espace. */
.ct-header-text:has(.reloge-espace-panneau) { align-self: stretch; width: 100%; }
.ct-header-text:has(.reloge-espace-panneau) p:empty { display: none; margin: 0; }

.reloge-espace-menu { overflow: hidden; margin: 0 0 1.4rem; background: #fff; border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px; box-shadow: 0 8px 24px var(--esp-ombre); text-align: left; }
.reloge-espace-menu .reloge-espace-menu__tete { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 52px; padding: .8rem 1rem; background: var(--esp-bande); color: #fff; font-size: .95rem; font-weight: 700;
  letter-spacing: .01em; line-height: 1.2; text-decoration: none; text-transform: none; }
.reloge-espace-menu .reloge-espace-menu__tete:hover { color: #fff; filter: brightness(1.06); }
.reloge-espace-menu__aller { font-size: 1.5rem; line-height: 1; }
.reloge-espace-menu .reloge-espace-groupe { padding: 0 .6rem; }
.reloge-espace-menu .reloge-espace-groupe:last-child { padding-bottom: .7rem; }
.reloge-espace-menu .reloge-espace-groupe:first-of-type .reloge-espace-groupe__liens:first-child { margin-top: .6rem; }
/* Des tuiles larges, deux par ligne : chaque entree se touche du pouce sans viser. Les deux
   tuiles d'une meme ligne ont la meme hauteur, meme quand un libelle passe sur deux lignes. */
.reloge-espace-menu .reloge-espace-groupe__liens { grid-template-columns: 1fr 1fr; gap: 6px; }
.reloge-espace-menu .reloge-espace-groupe__liens > li { display: flex; }
.reloge-espace-menu .reloge-espace-lien { flex: 1 1 auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: .35rem;
  min-height: 64px; padding: .6rem .7rem; border: 1px solid #eef0f3; font-size: .84rem; }
.reloge-espace-menu .reloge-espace-lien .reloge-espace-icone { width: 22px; height: 22px; }
.reloge-espace-menu .reloge-espace-lien.est-actif { border-color: var(--esp-accent); box-shadow: none; }
.reloge-espace-menu .reloge-espace-groupe--sortie { margin-top: .5rem; padding-top: 0; border-top: 0; }
.reloge-espace-menu .reloge-espace-lien--sortie { flex-direction: row; align-items: center; min-height: 48px; }

@media (prefers-reduced-motion: reduce) {
  .reloge-espace-lien, .reloge-espace__menu { transition: none; }
}
@media print {
  .reloge-espace-nav, .reloge-espace__menu { display: none !important; }
  .reloge-app.reloge-espace > .reloge-espace__grille { display: block; }
}