/* ================================================================
   GRR Hcéres — thème personnalisé moderne
   Compatible avec la structure existante de GRR
   ================================================================ */

:root {
  --hceres-rose: #c4007a;
  --hceres-rose-fonce: #8c0057;
  --hceres-rose-clair: #fbe0f1;
  --hceres-cyan: #0182a3;
  --hceres-cyan-fonce: #015d74;
  --hceres-cyan-clair: #d3e8f0;
  --hceres-bleu-nuit: #0b3a52;
  --hceres-texte: #253746;
  --hceres-texte-secondaire: #5d6d79;
  --hceres-fond: #f4f7f9;
  --hceres-carte: #ffffff;
  --hceres-bordure: #dbe5ea;
  --hceres-ombre: 0 8px 24px rgba(11, 58, 82, 0.09);
  --hceres-ombre-forte: 0 18px 48px rgba(11, 58, 82, 0.18);
  --hceres-rayon: 10px;
  --hceres-transition: 160ms ease;
  --hceres-entete-date-fond: linear-gradient(180deg, #f8deee, #f2c7e2);
  --hceres-entete-date-texte: #8c0057;
  --hceres-entete-salle-fond: linear-gradient(180deg, #dfeff4, #cce5ec);
  --hceres-entete-salle-cellule: #edf6f8;
  --hceres-entete-salle-cellule-paire: #e3f0f4;
  --hceres-entete-salle-texte: #0b3a52;
  --hceres-entete-tableau-bordure: #c9dfe7;
  --hceres-entete-tableau-rayon: 7px;
  --hceres-entete-tableau-ombre: 8px 0 12px -12px rgba(11, 58, 82, 0.65);
}

html {
  min-width: 0;
  overflow-x: auto;
  background: var(--hceres-fond);
}

body {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: visible;
  color: var(--hceres-texte);
  background: var(--hceres-fond);
  font-family: Roboto, Arial, Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: inherit;
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

h4 {
  color: var(--hceres-rose);
}

a {
  color: var(--hceres-cyan-fonce);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  color: var(--hceres-rose-fonce);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(1, 130, 163, 0.28);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------
   En-tête
   ---------------------------------------------------------------- */

header {
  position: relative;
  z-index: 50;
  width: 100%;
  margin: 0 0 18px;
  padding: 12px clamp(16px, 2.2vw, 36px);
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid rgba(1, 130, 163, 0.22);
  text-align: center;
  box-shadow:
    inset 0 -2px 0 rgba(255, 255, 255, 0.98),
    0 3px 14px rgba(11, 58, 82, 0.06);

  background-color: #fff;
  background-image:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.97),
      rgba(255, 255, 255, 0.88)
    ),
    url("/personnalisation/images/ressources/bandeau-rose.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-clip: padding-box;
}

header #panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 90px minmax(320px, 1fr) 180px 340px;
  gap: 14px;
  align-items: center;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
}

/* Les zones d'administration et de session conservent leur HTML
   d'origine, mais sont réunies visuellement dans un même module. */
header #panel::after {
  content: "";
  grid-row: 1;
  grid-column: 3 / 5;
  align-self: stretch;
  z-index: 0;
  border: 1px solid rgba(1, 130, 163, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 4px 14px rgba(11, 58, 82, 0.05);
  pointer-events: none;
}

header #panel > .logo,
header #panel > .accueil,
header #panel > .administration,
header #panel > .configuration {
  position: relative;
  z-index: 1;
}

header .logo {
  grid-row: 1;
  grid-column: 1;
  display: flex !important;
  float: none !important;
  align-items: center;
  justify-content: center;
  width: 90px !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

header .logo a,
header .logo img {
  display: block;
}

header .logo img {
  width: auto;
  max-width: 86px;
  height: auto;
  max-height: 86px;
  margin: 0 auto;
  object-fit: contain;
}

header .accueil {
  grid-row: 1;
  grid-column: 2;
  display: block !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
}

header .accueil h2 {
  margin: 0 0 8px;
  color: var(--hceres-rose);
  font-size: clamp(22px, 2vw, 30px);
}

header .accueil h2 a {
  color: inherit;
  text-decoration: none;
}

header .accueil p {
  display: none;
  margin: 0;
  color: var(--hceres-texte-secondaire);
  line-height: 1.38;
}

header .accueil p:nth-of-type(2) {
  display: block;
  max-width: 680px;
}

header .administration,
header .configuration {
  align-self: stretch;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

header .administration {
  grid-row: 1;
  grid-column: 3;
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  justify-content: center;
  width: auto !important;
}

header .administration::after {
  content: "";
  position: absolute;
  top: 12px;
  right: -7px;
  bottom: 12px;
  width: 1px;
  background: rgba(1, 130, 163, 0.16);
}

header .administration a[href*="admin_accueil"] {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--hceres-cyan-fonce);
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-weight: 700;
}

header .administration a[href*="admin_accueil"]::after {
  content: "›";
  color: var(--hceres-cyan);
  font-size: 18px;
  line-height: 1;
  transition: transform var(--hceres-transition);
}

header .administration a[href*="admin_accueil"]:hover::after {
  transform: translateX(2px);
}

header .administration a[href*="admin_view_connexions"] {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--hceres-texte-secondaire);
  font-size: 12px;
  font-weight: 600;
}

header .administration a[href*="admin_view_connexions"]::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2d9c68;
  box-shadow: 0 0 0 3px rgba(45, 156, 104, 0.12);
}

header .configuration {
  grid-row: 1;
  grid-column: 4;
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  align-content: center;
  align-items: center;
  width: auto !important;
}

header .administration br,
header .configuration > br {
  display: none;
}

header .administration a,
header .configuration a {
  line-height: 1.25;
  text-decoration: none;
}

header .administration a {
  white-space: nowrap;
}

header .clock {
  grid-row: 1;
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(1, 130, 163, 0.12);
  color: var(--hceres-bleu-nuit);
  font-size: 12px;
  font-weight: 600;
}

header .configuration > a[href*="default_language"] {
  display: inline-flex;
  grid-row: 2;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 26px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  opacity: 0.68;
  filter: saturate(0.8);
  transition:
    opacity var(--hceres-transition),
    border-color var(--hceres-transition),
    background-color var(--hceres-transition),
    transform var(--hceres-transition);
}

header .configuration > a[href*="default_language"]:hover,
header .configuration > a[href*="default_language"]:focus-visible {
  border-color: #bfd7df;
  background: #f2f8fa;
  opacity: 1;
  filter: none;
  transform: translateY(-1px);
}

header .configuration img.image {
  display: block;
  margin: 0;
}

header .configuration > a[href*="compte.php"]:not([href*="default_language"]),
header
  .configuration
  > a[href*="app.php?p=report"]:not([href*="default_language"]),
header
  .configuration
  > a[href*="app.php?p=deconnexion"]:not([href*="default_language"]) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 6px 8px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  transition:
    color var(--hceres-transition),
    border-color var(--hceres-transition),
    background-color var(--hceres-transition),
    box-shadow var(--hceres-transition),
    transform var(--hceres-transition);
}

header .configuration > a[href*="compte.php"]:not([href*="default_language"]) {
  grid-row: 3;
  grid-column: 1 / -1;
  justify-content: flex-start;
  color: var(--hceres-cyan-fonce);
  border-color: rgba(1, 130, 163, 0.14);
  background: rgba(211, 232, 240, 0.48);
}

header
  .configuration
  > a[href*="app.php?p=report"]:not([href*="default_language"]) {
  grid-row: 4;
  grid-column: 1 / 6;
  color: var(--hceres-cyan-fonce);
  border-color: #c7dce4;
  background: #fff;
}

header
  .configuration
  > a[href*="app.php?p=deconnexion"]:not([href*="default_language"]) {
  grid-row: 4;
  grid-column: 6 / -1;
  color: var(--hceres-rose-fonce);
  border-color: #ecc6dd;
  background: #fff7fb;
}

header
  .configuration
  > a[href*="compte.php"]:not([href*="default_language"]):hover,
header
  .configuration
  > a[href*="app.php?p=report"]:not([href*="default_language"]):hover,
header
  .configuration
  > a[href*="app.php?p=deconnexion"]:not([href*="default_language"]):hover,
header
  .configuration
  > a[href*="compte.php"]:not([href*="default_language"]):focus-visible,
header
  .configuration
  > a[href*="app.php?p=report"]:not([href*="default_language"]):focus-visible,
header
  .configuration
  > a[href*="app.php?p=deconnexion"]:not(
    [href*="default_language"]
  ):focus-visible {
  box-shadow: 0 3px 9px rgba(11, 58, 82, 0.1);
  transform: translateY(-1px);
}

header
  .configuration
  > a[href*="compte.php"]:not([href*="default_language"]):hover,
header
  .configuration
  > a[href*="compte.php"]:not([href*="default_language"]):focus-visible,
header
  .configuration
  > a[href*="app.php?p=report"]:not([href*="default_language"]):hover,
header
  .configuration
  > a[href*="app.php?p=report"]:not([href*="default_language"]):focus-visible {
  color: var(--hceres-cyan-fonce);
  border-color: #9fc8d5;
  background: #eaf5f8;
}

header
  .configuration
  > a[href*="app.php?p=deconnexion"]:not([href*="default_language"]):hover,
header
  .configuration
  > a[href*="app.php?p=deconnexion"]:not(
    [href*="default_language"]
  ):focus-visible {
  color: var(--hceres-rose-fonce);
  border-color: #dfa5c8;
  background: var(--hceres-rose-clair);
}

header #open {
  position: absolute;
  right: 18px;
  bottom: -17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--hceres-bordure);
  border-radius: 50%;
  color: var(--hceres-cyan-fonce);
  background: #fff;
  box-shadow: 0 5px 14px rgba(11, 58, 82, 0.12);
  text-decoration: none;
  transition:
    color var(--hceres-transition),
    transform var(--hceres-transition),
    box-shadow var(--hceres-transition);
}

header #open:hover {
  color: var(--hceres-rose);
  box-shadow: 0 7px 18px rgba(11, 58, 82, 0.18);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   Boutons et panneaux Bootstrap existants
   ---------------------------------------------------------------- */

.btn {
  border-radius: 6px;
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-weight: 500;
  transition:
    color var(--hceres-transition),
    background-color var(--hceres-transition),
    border-color var(--hceres-transition),
    box-shadow var(--hceres-transition);
}

.btn-default {
  color: var(--hceres-bleu-nuit);
  border-color: #cbdbe3;
  background-color: #fff;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  color: var(--hceres-bleu-nuit);
  border-color: #9ec5d3;
  background-color: #eaf5f8;
  box-shadow: 0 3px 10px rgba(1, 130, 163, 0.1);
}

.btn-primary {
  color: #fff;
  border-color: #016882;
  background-color: var(--hceres-cyan);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: #fff;
  border-color: #004f63;
  background-color: var(--hceres-cyan-fonce);
  box-shadow: 0 4px 12px rgba(1, 93, 116, 0.2);
}

.btn-info {
  color: var(--hceres-bleu-nuit);
  border-color: #9ecbd7;
  background-color: var(--hceres-cyan-clair);
}

.btn-danger {
  border-color: #9f1d3d;
  background-color: #b5224a;
}

.panel {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--hceres-bordure);
  border-radius: var(--hceres-rayon);
  background: var(--hceres-carte);
  box-shadow: none;
}

.panel-default > .panel-heading {
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--hceres-bordure);
  color: var(--hceres-bleu-nuit);
  background: linear-gradient(90deg, #edf7fa, #fff);
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-weight: 600;
}

.panel-body {
  padding: 9px;
}

/* Couleurs de secours pour les autres vues GRR (jour et mois),
   avant les réglages plus précis du planning hebdomadaire. */
.jour_sem a {
  color: var(--hceres-rose-fonce);
}

.jour_sem a:hover,
.cell_hours a:hover,
.ferie a:hover,
.vacance a:hover {
  color: var(--hceres-rose-fonce);
}

th.jour_sem {
  width: 10%;
  padding: 7px 5px;
  border-radius: var(--hceres-entete-tableau-rayon);
  color: var(--hceres-entete-date-texte);
  background: var(--hceres-entete-date-fond);
}

td.cell_hours,
td.cell_hours2 {
  height: 20px;
  color: var(--hceres-bleu-nuit);
  background-color: var(--hceres-cyan-clair) !important;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

td.cell_hours a,
td.cell_hours2 a {
  color: var(--hceres-cyan-fonce);
}

.empty_cell a:hover {
  background: var(--hceres-rose-clair);
}

/* ----------------------------------------------------------------
   Structure principale : navigation latérale + planning
   ---------------------------------------------------------------- */

body > section {
  width: 100%;
  padding: 0 clamp(12px, 2vw, 32px) 36px;
  box-sizing: border-box;
}

body > section > section {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
}

#menuGauche2 {
  position: relative;
  top: auto;
  flex: 0 0 270px;
  width: 270px !important;
  height: auto;
  min-height: calc(100vh - 16px);
  max-height: none;
  padding: 10px;
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;
  box-sizing: border-box;
  vertical-align: top;
  border: 1px solid var(--hceres-bordure);
  border-radius: var(--hceres-rayon);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 3px 14px rgba(11, 58, 82, 0.07);
}

#resource_selectorG #room_001::-webkit-scrollbar,
#resource_selectorH form.ressource::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#resource_selectorG #room_001::-webkit-scrollbar-thumb,
#resource_selectorH form.ressource::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #a9cad5;
}

#menuGauche2 > form {
  margin: 0 0 10px;
  padding: 2px 0 10px;
  border-bottom: 1px solid var(--hceres-bordure);
}

#menuGauche2 > form center {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

#menuGauche2 > form select,
#menuHaut > form select {
  min-width: 0;
  height: 36px;
  padding: 6px 8px;
}

#menuGauche2 > .col-lg-12,
#menuGauche2 > .col-md-12,
#menuGauche2 > .col-xs-12,
#calendriersG > .col-xs-12 {
  float: none;
  width: 100%;
  padding: 0;
}

#resource_selectorG > br,
#resource_selectorH > br {
  display: none;
}

#resource_selectorG .panel-body {
  padding: 7px;
}

#resource_selectorG form.ressource input.btn {
  min-height: 34px;
  padding: 6px 9px;
  overflow: hidden;
  border-radius: 6px;
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: normal;
}

#resource_selectorG form.ressource input.btn-block + input.btn-block {
  margin-top: 4px;
}

#resource_selectorG #room_001 {
  max-height: 46vh;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-color: #a9cad5 transparent;
  scrollbar-width: thin;
}

#resource_selectorG input.item_select,
#resource_selectorH input.item_select {
  color: #fff;
  border-color: var(--hceres-cyan-fonce);
  background: linear-gradient(
    135deg,
    var(--hceres-cyan),
    var(--hceres-cyan-fonce)
  );
  box-shadow: 0 4px 11px rgba(1, 130, 163, 0.18);
}

/* Le menu horizontal reste masqué sur ordinateur. */
#menuHaut {
  box-sizing: border-box;
}

/* ----------------------------------------------------------------
   Mini-calendrier et légende
   ---------------------------------------------------------------- */

table.calendar {
  width: 100%;
  margin: 0 0 14px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 3px;
  color: var(--hceres-texte);
  background: transparent;
}

table.calendar caption {
  padding: 4px 0 8px;
  color: var(--hceres-bleu-nuit);
  text-align: center;
}

table.calendar caption .btn-group {
  display: inline-flex;
  max-width: 100%;
}

table.calendar caption .btn {
  min-height: 30px;
}

table.calendar th,
table.calendar td {
  height: 31px;
  padding: 2px;
  border: 0 !important;
  border-radius: 6px;
  text-align: center;
}

table.calendar thead th,
table.calendar thead td {
  color: var(--hceres-texte-secondaire);
  background: #eef3f5;
  font-size: 11px;
  font-weight: 600;
}

table.calendar tbody td {
  background: #f8fafb;
}

table.calendar tbody td:hover {
  background: var(--hceres-rose-clair);
}

table.calendar a.cellcalendar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--hceres-bleu-nuit);
  text-decoration: none;
}

table.calendar tr.week td {
  background: #e7f4f7;
  box-shadow: inset 0 0 0 1px #bddce5;
}

table.calendar .calendarcol1 {
  color: var(--hceres-texte-secondaire);
  background: #edf2f4;
}

table.calendar .cal_current_day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 27px;
  height: 27px;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  background: var(--hceres-rose);
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(196, 0, 122, 0.24);
}

table.legende {
  width: 100%;
  margin: 12px 0 0;
  border-collapse: separate;
  border-spacing: 5px;
}

table.legende caption {
  padding: 0 0 5px;
  color: var(--hceres-bleu-nuit);
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-weight: 600;
  text-align: left;
}

table.legende td {
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
}

/* ----------------------------------------------------------------
   Planning principal
   ---------------------------------------------------------------- */

#planning2 {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
  padding: 12px;
  overflow: visible;
  box-sizing: border-box;
  border: 1px solid var(--hceres-bordure);
  border-radius: var(--hceres-rayon);
  background: var(--hceres-carte);
  box-shadow: 0 3px 14px rgba(11, 58, 82, 0.07);
}

/* Solution CSS sans script : #planning2 ne doit créer aucun mécanisme
   de défilement, sinon les entêtes sticky se calent sur ce bloc au lieu
   de la fenêtre. Le navigateur prend donc en charge les deux axes. */
#planning2 {
  height: auto !important;
  min-height: 0;
  max-height: none !important;
  overflow: visible;
  isolation: isolate;
}

table.semaine {
  width: 100%;
  min-width: 900px;
  margin: 0;
  table-layout: fixed;
  border: 0;
  border-collapse: separate;
  border-spacing: 3px;
  background: transparent;
}

table.semaine caption {
  padding: 0 0 9px;
  color: var(--hceres-texte);
  caption-side: top;
  text-align: center;
}

table.semaine caption .ligne23 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}

table.semaine caption .ligne23 .btn {
  min-height: 30px;
  padding: 5px 8px;
}

table.semaine caption .ligne23 .left,
table.semaine caption .ligne23 .right {
  float: none;
  width: auto;
}

table.semaine caption .ligne23 .left {
  justify-self: start;
}

table.semaine caption .ligne23 .right {
  justify-self: end;
}

/* Le bouton central de préparation à l'impression n'est pas utile
   dans les vues de consultation jour et semaine. */
table.semaine caption .ligne23 > button,
table.jour caption .ligne23 > button {
  display: none !important;
}

table.semaine caption .ligne23 .left,
table.jour caption .ligne23 .left {
  grid-column: 1;
}

table.semaine caption .ligne23 .right,
table.jour caption .ligne23 .right {
  grid-column: 3;
}

table.semaine caption > div:not(.ligne23) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 48px;
}

table.semaine caption > div:not(.ligne23) > .left {
  position: absolute;
  left: 0;
  float: none;
}

table.semaine h4.titre {
  margin: 0;
  color: var(--hceres-rose);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.35;
}

table.semaine > thead > tr > th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 22;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  padding: 9px 7px;
  border: 0 !important;
  border-radius: var(--hceres-entete-tableau-rayon);
  color: var(--hceres-entete-date-texte);
  background: var(--hceres-entete-date-fond);
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
}

/* Les entêtes des vues semaine et salle restent visibles pendant le
   défilement vertical de la page. Le fond continu masque la grille. */
table.semaine > thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 24;
  background: #fff;
  box-shadow:
    0 -14px 0 #fff,
    0 8px 14px -14px rgba(11, 58, 82, 0.72);
}

table.semaine > thead > tr {
  background: #fff;
}

table.semaine > thead > tr > th a {
  display: block;
  color: inherit;
  text-decoration: none;
}

table.semaine > thead > tr > th:first-child {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 32;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  color: var(--hceres-entete-salle-texte);
  background: var(--hceres-entete-salle-fond);
  box-shadow: var(--hceres-entete-tableau-ombre);
}

/* Dans la vue hebdomadaire d'une salle, GRR génère « Heure » dans
   un td plutôt que dans un th. On lui applique strictement l'aspect
   de l'entête « Ressources », sans modifier les autres cellules. */
table.semaine > thead > tr > td.cell_hours {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 32;
  height: auto;
  padding: 9px 7px;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: var(--hceres-entete-tableau-rayon);
  color: var(--hceres-entete-salle-texte);
  background: var(--hceres-entete-salle-fond) !important;
  box-shadow: var(--hceres-entete-tableau-ombre);
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
}

table.semaine > tbody > tr > td {
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 4px;
  border: 1px solid #e7eef1 !important;
  border-radius: 6px;
  background: #fbfcfd;
  vertical-align: top;
  transition:
    background-color var(--hceres-transition),
    border-color var(--hceres-transition);
}

table.semaine > tbody > tr:hover > td:not(:first-child) {
  border-color: #cbdfe6 !important;
  background: #f7fbfc;
}

table.semaine > tbody > tr > td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 5;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  padding: 8px 7px;
  border-color: var(--hceres-entete-tableau-bordure) !important;
  color: var(--hceres-entete-salle-texte);
  background: var(--hceres-entete-salle-cellule) !important;
  box-shadow: var(--hceres-entete-tableau-ombre);
  text-align: center;
  vertical-align: middle;
}

table.semaine > tbody > tr:nth-child(even) > td:first-child {
  background: var(--hceres-entete-salle-cellule-paire) !important;
}

table.semaine > tbody > tr > td:first-child > a:first-child {
  color: var(--hceres-cyan-fonce);
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

table.semaine > tbody > tr > td:first-child .small {
  color: var(--hceres-cyan-fonce);
}

/* La capacité devient un véritable repère visuel dans les vues jour,
   semaine et salle, tout en restant assez compacte pour les colonnes. */
table.jour > thead > tr > th .small,
table.semaine > tbody > tr > td:first-child .small,
table.semaine caption .small,
table.semaine h4.titre .small {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  margin: 5px auto 2px;
  padding: 2px 6px;
  box-sizing: border-box;
  border: 1px solid #a9ced8;
  border-radius: 4px;
  color: var(--hceres-cyan-fonce) !important;
  background: #fff;
  box-shadow: 0 2px 5px rgba(11, 58, 82, 0.09);
  font-size: 10.5px !important;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}

table.semaine caption .small,
table.semaine h4.titre .small {
  margin: 0 4px;
}

table.semaine h4.titre > .small {
  display: flex !important;
  width: max-content;
  min-height: 24px;
  margin: 6px auto 0 !important;
  padding: 3px 8px;
  line-height: 1.35;
  overflow: visible;
}

table.semaine h4.titre > .small ~ br {
  display: none;
}

table.semaine > tbody > tr > td > div.empty_cell {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 28px;
  border-radius: 6px;
}

table.semaine > tbody > tr > td > div.empty_cell > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 28px;
  border-radius: 6px;
  color: var(--hceres-cyan);
  background: transparent;
  text-decoration: none;
  opacity: 0.3;
  transition:
    opacity var(--hceres-transition),
    background-color var(--hceres-transition),
    color var(--hceres-transition);
}

table.semaine > tbody > tr > td > div.empty_cell > a:hover,
table.semaine > tbody > tr > td > div.empty_cell > a:focus-visible {
  color: var(--hceres-rose);
  background: var(--hceres-rose-clair);
  opacity: 1;
}

/* Une cellule entièrement libre devient cliquable sur toute sa surface. */
table.semaine > tbody > tr > td.empty_cell {
  position: relative;
  padding: 0;
}

table.semaine > tbody > tr > td.empty_cell > div.empty_cell {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  border-radius: inherit;
}

table.semaine > tbody > tr > td.empty_cell > div.empty_cell > a {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: inherit;
}

/* GRR insère bien l'icône dans chaque zone libre : on neutralise ici
   les éventuelles règles historiques susceptibles de la masquer. */
table.semaine div.empty_cell > a > i.fa-plus {
  display: inline-block !important;
  position: relative;
  z-index: 2;
  visibility: visible !important;
  color: currentColor !important;
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

table.semaine table.resadrag {
  width: 100%;
  margin: 0 0 3px;
  overflow: hidden;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(11, 58, 82, 0.1);
}

table.semaine table.resadrag td {
  padding: 6px !important;
  border: 0 !important;
  border-radius: 5px;
  line-height: 1.3;
}

table.semaine table.resadrag a.lienCellule {
  display: block;
  border-bottom: 0 !important;
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
}

/* ----------------------------------------------------------------
   Vue quotidienne : toutes les ressources
   Les règles restent volontairement limitées à table.jour afin de
   préserver la vue hebdomadaire et les autres écrans déjà adaptés.
   ---------------------------------------------------------------- */

table.jour {
  display: table !important;
  width: max-content;
  min-width: 100%;
  height: auto !important;
  margin: 0;
  table-layout: fixed;
  border: 0;
  border-collapse: separate;
  border-spacing: 2px;
  background: transparent;
  visibility: visible !important;
  opacity: 1 !important;
}

table.jour caption {
  padding: 0 0 10px;
  color: var(--hceres-texte);
  caption-side: top;
  text-align: center;
}

/* Le bandeau de navigation reste centré dans la partie visible du
   planning, même lorsque la grille est beaucoup plus large. */
table.jour caption > div:first-child,
table.jour caption > div:last-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 8;
  width: min(1600px, calc(100vw - 390px));
  box-sizing: border-box;
  background: #fff;
}

table.jour caption > div:first-child {
  margin-bottom: 6px;
}

table.jour caption .ligne23 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}

table.jour caption .ligne23 .left,
table.jour caption .ligne23 .right {
  float: none;
  width: auto;
}

table.jour caption .ligne23 .left {
  justify-self: start;
}

table.jour caption .ligne23 .right {
  justify-self: end;
}

table.jour caption .ligne23 .btn {
  min-height: 32px;
  padding: 5px 9px;
}

table.jour caption > div:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 48px;
}

table.jour caption > div:last-child > .left {
  position: absolute;
  left: 0;
  float: none;
}

table.jour h4.titre {
  margin: 0;
  color: var(--hceres-rose);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.3;
}

/* Une largeur stable évite les intitulés collés et rend chaque salle
   identifiable. Le défilement horizontal est pris en charge par la
   fenêtre du navigateur. */
table.jour > thead > tr > th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  width: 136px !important;
  min-width: 136px !important;
  max-width: 136px !important;
  height: 104px;
  padding: 9px 7px;
  box-sizing: border-box;
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--hceres-entete-tableau-rayon);
  color: var(--hceres-entete-salle-texte);
  background: var(--hceres-entete-salle-fond);
  background-clip: padding-box;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
}

/* Un fond continu masque les cellules qui défilent derrière l'en-tête.
   Les deux aplats prolongent la rangée juste au-dessus et juste en
   dessous afin que la séparation reste parfaitement nette. */
table.jour > thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 25;
  background: #fff;
  box-shadow:
    0 -14px 0 #fff,
    0 8px 14px -14px rgba(11, 58, 82, 0.72);
}

table.jour > thead > tr {
  background: #fff;
}

table.jour > thead > tr > th > a.lienPlanning {
  color: var(--hceres-cyan-fonce);
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

table.jour > thead > tr > th > a.lienPlanning:hover,
table.jour > thead > tr > th > a.lienPlanning:focus-visible {
  color: var(--hceres-rose-fonce);
}

table.jour > thead > tr > th .small {
  max-width: 100%;
}

table.jour > thead > tr > th > a[href*="admin_edit_room"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  border-radius: 5px;
  color: var(--hceres-cyan-fonce);
  text-decoration: none;
}

table.jour > thead > tr > th > a[href*="admin_edit_room"]:hover,
table.jour > thead > tr > th > a[href*="admin_edit_room"]:focus-visible {
  color: #fff;
  background: var(--hceres-cyan);
}

table.jour > thead span[id^="boutonSelection"] {
  margin-top: 5px;
}

table.jour > thead span[id^="boutonSelection"] .btn {
  margin: 2px 1px;
}

/* La colonne des horaires reste visible pendant le parcours latéral. */
table.jour > thead > tr > td.cell_hours,
table.jour > tbody > tr > td.cell_hours,
table.jour > tbody > tr > td.cell_hours2 {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  width: 102px !important;
  min-width: 102px !important;
  max-width: 102px !important;
  box-sizing: border-box;
  border: 1px solid #bed9e2 !important;
  border-right: 2px solid #8fbfcb !important;
  border-radius: 4px 0 0 4px;
  color: var(--hceres-bleu-nuit);
  background: #e7f2f6 !important;
  background-clip: padding-box;
  box-shadow: 8px 0 12px -12px rgba(11, 58, 82, 0.85);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

table.jour > thead > tr > td.cell_hours {
  top: 0;
  z-index: 40;
  height: 104px;
  padding: 10px 7px !important;
  border: 0 !important;
  border-radius: var(--hceres-entete-tableau-rayon);
  color: var(--hceres-entete-salle-texte);
  background: var(--hceres-entete-salle-fond) !important;
  box-shadow: var(--hceres-entete-tableau-ombre);
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-size: 13px;
}

table.jour > tbody > tr > td.cell_hours,
table.jour > tbody > tr > td.cell_hours2 {
  z-index: 30;
  height: 44px;
  padding: 0 7px !important;
}

table.jour > tbody > tr:nth-child(even) > td.cell_hours,
table.jour > tbody > tr:nth-child(even) > td.cell_hours2 {
  background: #dcecf1 !important;
}

table.jour > tbody > tr > td:not(.cell_hours):not(.cell_hours2) {
  width: 136px !important;
  min-width: 136px !important;
  max-width: 136px !important;
  box-sizing: border-box;
}

table.jour > tbody > tr > td.empty_cell {
  height: 44px;
  padding: 0 !important;
  border: 1px solid #e2ebef !important;
  border-radius: 4px;
  background: #fbfcfd !important;
  vertical-align: middle;
  transition:
    background-color var(--hceres-transition),
    border-color var(--hceres-transition);
}

table.jour > tbody > tr:nth-child(even) > td.empty_cell {
  background: #f7fafb !important;
}

table.jour > tbody > tr:hover > td.empty_cell {
  border-color: #cbdfe6 !important;
  background: #f1f8fa !important;
}

/* L'intégralité d'un créneau libre devient une cible cliquable. */
table.jour > tbody > tr > td.empty_cell > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 42px !important;
  padding: 0 !important;
  box-sizing: border-box;
  border-radius: inherit;
  color: var(--hceres-cyan);
  background: transparent;
  font-size: 14px;
  text-decoration: none;
  opacity: 0.38;
  transition:
    opacity var(--hceres-transition),
    background-color var(--hceres-transition),
    color var(--hceres-transition);
}

table.jour > tbody > tr > td.empty_cell > a:hover,
table.jour > tbody > tr > td.empty_cell > a:focus-visible {
  color: var(--hceres-rose);
  background: var(--hceres-rose-clair);
  opacity: 1;
}

/* Les réservations longues occupent réellement toute leur cellule,
   sans conserver les grands espacements calculés dans le HTML. */
table.jour > tbody > tr > td.resadrag {
  position: relative;
  z-index: 1;
  padding: 0 !important;
  overflow: hidden;
  border: 2px solid #fff !important;
  border-radius: 5px;
  box-shadow: 0 3px 9px rgba(11, 58, 82, 0.16);
  vertical-align: middle;
  transition:
    box-shadow var(--hceres-transition),
    filter var(--hceres-transition);
}

table.jour > tbody > tr > td.resadrag:hover {
  box-shadow: 0 7px 16px rgba(11, 58, 82, 0.22);
  filter: brightness(0.97);
}

table.jour > tbody > tr > td.resadrag > a.lienCellule {
  position: absolute;
  inset: 0;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  padding: 7px 6px !important;
  box-sizing: border-box;
  overflow: hidden;
  border: 0 !important;
  color: inherit !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.28;
  text-align: center;
  text-decoration: none;
}

/* ----------------------------------------------------------------
   Retour en haut de page
   ---------------------------------------------------------------- */

#toTop {
  position: fixed !important;
  z-index: 90;
  right: 22px !important;
  bottom: 22px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 1px solid #016882 !important;
  border-radius: 8px;
  color: #fff !important;
  background: var(--hceres-cyan) !important;
  box-shadow: 0 6px 16px rgba(1, 93, 116, 0.22);
  cursor: pointer;
  opacity: 0.96;
  white-space: nowrap;
  transition:
    background-color var(--hceres-transition),
    box-shadow var(--hceres-transition),
    opacity var(--hceres-transition),
    transform var(--hceres-transition);
}

#toTop b {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 13px;
  font-size: 0;
  line-height: 1;
}

#toTop b::before {
  content: "\2191";
  font-size: 20px;
  font-weight: 700;
  transition: transform var(--hceres-transition);
}

#toTop b::after {
  content: "Haut de page";
  font-size: 13px;
  font-weight: 600;
}

#toTop:hover {
  color: #fff !important;
  background: var(--hceres-cyan-fonce) !important;
  box-shadow: 0 10px 24px rgba(1, 93, 116, 0.3);
  opacity: 1;
  transform: translateY(-3px);
}

#toTop:hover b::before {
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   Fenêtre de détail d'une réservation
   ---------------------------------------------------------------- */

#fade {
  position: fixed !important;
  z-index: 99999 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(9, 27, 38, 0.1) !important;
  opacity: 1 !important;
}

.popup_block {
  position: fixed !important;
  z-index: 100000 !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  float: none !important;
  width: min(1180px, 88vw) !important;
  max-width: 88vw;
  height: min(860px, 90vh);
  max-height: 90vh;
  margin: 0 !important;
  padding: 24px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid rgba(1, 130, 163, 0.3);
  border-radius: 11px;
  background: #fff;
  box-shadow:
    0 22px 60px rgba(11, 58, 82, 0.26),
    0 0 0 100vmax rgba(9, 27, 38, 0.16);
  transform: translate(-50%, -50%);
  font-size: 1em;
  scrollbar-color: #a9cad5 transparent;
  scrollbar-width: thin;
}

.popup_block fieldset {
  margin: 0 0 16px;
  padding: 15px;
  border: 1px solid var(--hceres-bordure);
  border-radius: 8px;
}

.popup_block legend {
  width: auto;
  padding: 0 7px;
  border: 0;
  color: var(--hceres-rose-fonce);
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-size: 16px;
}

.popup_block table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

.popup_block th,
.popup_block td {
  padding: 7px 8px;
  border-bottom: 1px solid #edf1f3;
  text-align: left;
  vertical-align: top;
}

.popup_block th {
  width: 34%;
}

.popup_block fieldset > table + div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 2px;
}

#page-compte #param_account {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

#page-compte #param_account > .form-group {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  float: none !important;
  clear: both;
  width: min(100%, 780px) !important;
  min-height: 54px;
  margin: 0 auto 7px;
  padding: 8px 11px;
  box-sizing: border-box;
  border: 1px solid #edf2f4;
  border-radius: 5px;
  background: #fbfcfd;
}

#page-compte #param_account > .form-group > label,
#page-compte #param_account > .form-group > div {
  float: none !important;
  width: auto !important;
  margin: 0;
  padding: 0 !important;
}

#page-compte #param_account label {
  margin: 0;
  color: var(--hceres-bleu-nuit);
  font-weight: 600;
  line-height: 1.35;
}

#page-compte #param_account .form-control {
  width: 100% !important;
  min-height: 42px;
  padding: 8px 10px;
  box-sizing: border-box;
  border: 1px solid #bccfd8;
  border-radius: 5px;
  color: var(--hceres-texte);
  background: #fff;
  box-shadow: none;
}

#page-compte #param_account select.form-control {
  cursor: pointer;
}

#page-compte #param_account .form-control:disabled {
  color: var(--hceres-texte-secondaire);
  background: #edf3f5;
  cursor: not-allowed;
  opacity: 1;
}

#page-compte #param_account .form-control:focus {
  border-color: var(--hceres-cyan);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(1, 130, 163, 0.13);
}

#page-compte #param_account > p {
  width: min(100%, 780px);
  margin: 8px auto 0;
  padding: 9px 11px;
  box-sizing: border-box;
  border-left: 3px solid var(--hceres-rose);
  border-radius: 0 5px 5px 0;
  color: var(--hceres-texte-secondaire);
  background: #fff8fc;
  font-size: 12px;
}

#page-compte #param_account > hr:first-of-type + div {
  width: min(100%, 860px);
  margin: 22px auto;
  padding: 18px;
  box-sizing: border-box;
  border: 1px solid #cfe1e7;
  border-left: 3px solid var(--hceres-cyan);
  border-radius: 6px;
  background: #f8fbfc;
}

#page-compte #param_account > hr:first-of-type + div > p:first-child {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 5px;
  color: var(--hceres-bleu-nuit);
  background: #eaf5f8;
}

#page-compte #param_account p.right {
  margin: 0;
  text-align: left;
}

#page-compte #param_account #pwd1_text {
  min-height: 16px;
}

#page-compte #param_account #pwd1_bar {
  max-width: 100%;
  height: 6px !important;
  border: 0 !important;
  border-radius: 3px;
  background: #dbe5ea;
}

#page-compte #param_account > hr {
  clear: both;
  margin: 26px 0;
  border: 0;
  border-top: 1px solid #e3ebef;
}

#page-compte #param_account > h2.avertissement {
  width: min(100%, 860px);
  margin: 0 auto 18px;
  padding: 11px 13px;
  box-sizing: border-box;
  border: 1px solid #f0c6df;
  border-radius: 5px;
  color: var(--hceres-rose-fonce);
  background: #fff4fa;
  font-size: 15px;
}

#page-compte #param_account > h3 {
  margin: 0 0 18px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--hceres-rose-clair);
  color: var(--hceres-rose);
  font-size: 22px;
}

#page-compte #param_account > h4 {
  width: min(100%, 860px);
  margin: 22px auto 8px;
  color: var(--hceres-bleu-nuit);
  font-size: 16px;
  font-weight: 600;
}

#page-compte #param_account > table {
  width: min(100%, 860px);
  margin: 0 auto 18px;
  border-spacing: 0 6px;
  border-collapse: separate;
}

#page-compte #param_account > table td {
  padding: 10px 12px !important;
  border: 1px solid #dde8ec !important;
  color: var(--hceres-texte);
  background: #f8fbfc;
  vertical-align: middle;
}

#page-compte #param_account > table td + td {
  border-left: 0 !important;
}

#page-compte #param_account > table td:first-child {
  border-radius: 5px 0 0 5px;
}

#page-compte #param_account > table td:last-child {
  border-radius: 0 5px 5px 0;
}

#page-compte #param_account > table td:last-child:not(:first-child) {
  width: 52%;
}

#page-compte #param_account > table:first-of-type td:last-child {
  width: 64px;
  text-align: center;
}

#page-compte #param_account input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--hceres-rose);
}

#page-compte #param_account > .col-xs-12 {
  float: none !important;
  clear: both;
  width: min(100%, 860px) !important;
  margin: 0 auto 18px;
  padding: 14px;
  box-sizing: border-box;
  border: 1px solid #d8e6eb;
  border-radius: 6px;
  background: #f8fbfc;
}

#page-compte #param_account > .col-xs-12 > h4 {
  margin: 0 0 12px;
  color: var(--hceres-bleu-nuit);
  font-size: 16px;
  font-weight: 600;
}

#page-compte #param_account #div_liste_domaines,
#page-compte #param_account #div_liste_ressources {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}

#page-compte #param_account #div_liste_domaines .form-group,
#page-compte #param_account #div_liste_ressources .form-group {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(280px, 1fr);
  gap: 14px;
  align-items: center;
  float: none !important;
  clear: both;
  width: 100% !important;
  margin: 0 0 10px;
  padding: 0 !important;
}

#page-compte #param_account #div_liste_ressources .form-group {
  margin-bottom: 0;
}

#page-compte #param_account #div_liste_domaines .form-group > label,
#page-compte #param_account #div_liste_domaines .form-group > div,
#page-compte #param_account #div_liste_ressources .form-group > label,
#page-compte #param_account #div_liste_ressources .form-group > div {
  float: none !important;
  width: auto !important;
  margin: 0;
  padding: 0 !important;
}

#page-compte #param_account #fixe {
  position: sticky;
  bottom: 12px;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  clear: both;
  margin: 28px 0 0;
  padding: 12px 14px;
  box-sizing: border-box;
  border: 1px solid #cbdde4;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(11, 58, 82, 0.13);
}

#page-compte #param_account #fixe > div,
#page-compte #param_account #fixe > form,
#page-compte #param_account #fixe #reset > div {
  display: flex;
  margin: 0;
}

#page-compte #param_account #fixe .btn {
  min-height: 42px;
  padding: 8px 18px;
  border-radius: 5px;
}

#page-compte #param_account #fixe #reset .btn {
  border-color: #cbdbe3;
  color: var(--hceres-bleu-nuit);
  background: #fff;
}

#page-compte #param_account #fixe #reset .btn:hover,
#page-compte #param_account #fixe #reset .btn:focus-visible {
  border-color: #9ec6d2;
  color: var(--hceres-cyan-fonce);
  background: #eaf5f8;
}

@media screen and (max-width: 600px) {

  #page-compte #param_account > .form-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 10px;
  }

  #page-compte #param_account > hr:first-of-type + div {
    padding: 12px;
  }

  #page-compte #param_account #div_liste_domaines .form-group,
#page-compte #param_account #div_liste_ressources .form-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  #page-compte #param_account > table td {
    padding: 8px 9px !important;
  }

  #page-compte #param_account #fixe {
    bottom: 8px;
    padding: 8px;
  }

  #page-compte #param_account #fixe > div,
#page-compte #param_account #fixe > form {
    flex: 1 1 140px;
  }

  #page-compte #param_account #fixe .btn {
    width: 100% !important;
  }
}

#page-resa #frmReport {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px 12px;
  width: 100%;
  margin: 0;
  padding: clamp(18px, 2.5vw, 30px);
  box-sizing: border-box;
  border: 1px solid var(--hceres-bordure);
  border-top: 3px solid var(--hceres-rose);
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--hceres-ombre);
  counter-reset: report-filter;
}

#page-resa #frmReport > input[type="hidden"] {
  display: none;
}

#page-resa #frmReport > div {
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}

#page-resa #frmReport .form-control,
#page-resa #frmReport select.btn {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  box-sizing: border-box;
  border: 1px solid #bccfd8;
  border-radius: 5px;
  color: var(--hceres-texte);
  background: #fff;
  box-shadow: none;
  font-family: Roboto, Arial, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

#page-resa #frmReport select {
  cursor: pointer;
}

#page-resa #frmReport .form-control:focus,
#page-resa #frmReport select.btn:focus {
  border-color: var(--hceres-cyan);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(1, 130, 163, 0.13);
}

#page-resa #frmReport input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--hceres-rose);
}

#page-resa #frmReport #From_day,
#page-resa #frmReport #To_day {
  width: 78px;
}

#page-resa #frmReport #From_month,
#page-resa #frmReport #To_month {
  width: 112px;
}

#page-resa #frmReport #From_year,
#page-resa #frmReport #To_year {
  width: 100px;
}

#page-resa #frmReport > div > .form-inline {
  display: grid;
  grid-template-columns:
    minmax(230px, 1.35fr) minmax(170px, 0.75fr)
    minmax(220px, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
}

#page-resa #frmReport > div > .form-inline > .form-group {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}

/* Présentation du rapport. */
#page-resa #frmReport > p {
  grid-column: 1 / -1;
  margin: 16px 0 0;
  padding: 0 0 9px;
  border-bottom: 2px solid var(--hceres-rose-clair);
  color: var(--hceres-rose);
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
}

@media screen and (max-width: 800px) {

  #page-resa #frmReport {
    padding: 16px;
  }

  #page-resa #frmReport > div > .form-inline {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 500px) {

  #page-resa #frmReport {
    gap: 9px;
    padding: 12px;
  }

  #page-resa #frmReport #From_day,
#page-resa #frmReport #To_day,
#page-resa #frmReport #From_month,
#page-resa #frmReport #To_month,
#page-resa #frmReport #From_year,
#page-resa #frmReport #To_year {
    width: 100%;
    min-width: 0;
  }
}

#main[action*="editentreetrt"] {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

#main[action*="editentreetrt"] > #error:not(:empty) {
  position: sticky;
  top: 10px;
  z-index: 25;
  margin: 0 0 14px;
}

#main[action*="editentreetrt"] > #error .alert {
  margin: 0 0 7px;
  padding: 11px 42px 11px 13px;
  border-radius: 5px;
  box-shadow: 0 5px 16px rgba(128, 24, 55, 0.12);
}

#main[action*="editentreetrt"] > .row2 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: clamp(15px, 1.8vw, 23px);
  box-sizing: border-box;
  border: 1px solid var(--hceres-bordure);
  border-top: 3px solid var(--hceres-rose);
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--hceres-ombre);
}

#main[action*="editentreetrt"] > .row2 > .col,
#main[action*="editentreetrt"] > .row2 > .col-sm-6 {
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
}

/* Grille compacte du contenu principal : les deux descriptions restent larges. */
#main[action*="editentreetrt"] > .row2 > .col:first-child {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 8px;
  align-items: start;
}

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > #menu4,
#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > label[for="name"],
#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > #name,
#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > label[for="description"],
#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > #description,
#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .bg-info {
  grid-column: 1 / -1;
}

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .alert-info {
  grid-column: span 3;
  align-self: stretch;
}

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > #choix_beneficiaire {
  grid-column: span 9;
}

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .E:not(.form-inline),
#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > #div_champs_add {
  grid-column: span 3;
  align-self: stretch;
}

#main[action*="editentreetrt"] > .row2 > .col:first-child > br {
  display: none;
}

#main[action*="editentreetrt"] > .row2 > .col-sm-6:last-of-type {
  display: none;
}

#main[action*="editentreetrt"] label,
#main[action*="editentreetrt"] .control-label,
#main[action*="editentreetrt"] .form-label {
  color: var(--hceres-bleu-nuit);
  font-weight: 600;
  line-height: 1.35;
}

#main[action*="editentreetrt"] input.form-control,
#main[action*="editentreetrt"] textarea.form-control,
#main[action*="editentreetrt"] select.form-control {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  box-sizing: border-box;
  border: 1px solid #b9ccd5;
  border-radius: 5px;
  color: var(--hceres-texte);
  background: #fff;
  box-shadow: none;
  font-size: 14px;
}

#main[action*="editentreetrt"] textarea.form-control {
  min-height: 88px;
  resize: vertical;
}

#main[action*="editentreetrt"] input.form-control:hover,
#main[action*="editentreetrt"] textarea.form-control:hover,
#main[action*="editentreetrt"] select.form-control:hover {
  border-color: #8db0bd;
}

#main[action*="editentreetrt"] input.form-control:focus,
#main[action*="editentreetrt"] textarea.form-control:focus,
#main[action*="editentreetrt"] select.form-control:focus {
  border-color: var(--hceres-cyan);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(1, 130, 163, 0.14);
}

#main[action*="editentreetrt"] input[type="checkbox"],
#main[action*="editentreetrt"] input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--hceres-rose);
  cursor: pointer;
}

/* Notification et choix du bénéficiaire */

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .alert-info {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 40px;
  margin: 0 0 2px;
  padding: 8px 11px;
  border: 1px solid #c3dfe7;
  border-radius: 5px;
  color: var(--hceres-cyan-fonce);
  background: #edf8fa;
}

#main[action*="editentreetrt"] #choix_beneficiaire {
  display: grid;
  grid-template-columns: max-content minmax(260px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 58px;
  margin: 0 0 3px;
  padding: 8px 10px;
  box-sizing: border-box;
  border: 1px solid #d8e6eb;
  border-radius: 6px;
  background: #f8fbfc;
}

#main[action*="editentreetrt"] #choix_beneficiaire > .col {
  display: contents;
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
}

#main[action*="editentreetrt"] #choix_beneficiaire .input-group {
  display: contents;
}

#main[action*="editentreetrt"] #choix_beneficiaire label {
  grid-column: 1;
  margin: 0;
  white-space: nowrap;
}

#main[action*="editentreetrt"] #choix_beneficiaire .select2-container {
  grid-column: 2;
  min-width: 260px;
  width: 100% !important;
}

#main[action*="editentreetrt"]
  #choix_beneficiaire
  .select2-selection--single {
  height: 40px;
  border: 1px solid #b9ccd5;
  border-radius: 5px;
  background: #fff;
}

#main[action*="editentreetrt"]
  #choix_beneficiaire
  .select2-selection__rendered {
  padding-right: 38px;
  padding-left: 10px;
  color: var(--hceres-texte);
  line-height: 38px;
}

#main[action*="editentreetrt"]
  #choix_beneficiaire
  .select2-selection__arrow,
#main[action*="editentreetrt"]
  #choix_beneficiaire
  .select2-selection__clear {
  height: 38px;
}

#main[action*="editentreetrt"] #bnfdef {
  grid-column: 3;
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 7px 12px;
  border-radius: 5px;
  white-space: nowrap;
}

#main[action*="editentreetrt"] #menu4:not([style*="none" i]) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 3px;
}

#main[action*="editentreetrt"] #menu4 > .form-group {
  float: none !important;
  width: auto !important;
  margin: 0;
  padding: 0 !important;
}

#main[action*="editentreetrt"] #menu4 .input-group {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  width: 100%;
}

#main[action*="editentreetrt"] #menu4 .input-group-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  border: 1px solid #b9ccd5;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  color: var(--hceres-cyan-fonce);
  background: #eaf5f8;
}

#main[action*="editentreetrt"] #menu4 .form-control {
  border-radius: 0 5px 5px 0;
}

/* Description de la réservation */

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > label[for="name"],
#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > label[for="description"] {
  display: block;
  margin: 1px 0 -4px;
}

#main[action*="editentreetrt"] #name {
  margin: 0 0 3px;
}

#main[action*="editentreetrt"] #description {
  margin: 0 0 5px;
}

/* Blocs date, domaine, ressources et type */

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .E {
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #d8e6eb;
  border-radius: 6px;
  background: #f8fbfc;
}

#main[action*="editentreetrt"] #start_day,
#main[action*="editentreetrt"] #start_month,
#main[action*="editentreetrt"] #start_year,
#main[action*="editentreetrt"] #end_day,
#main[action*="editentreetrt"] #end_month,
#main[action*="editentreetrt"] #end_year {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid #b9ccd5;
  border-radius: 5px;
  color: var(--hceres-texte);
  background: #fff;
  box-shadow: none;
}

#main[action*="editentreetrt"] .ui-datepicker-trigger {
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 6px;
  box-sizing: border-box;
  border: 1px solid #b9ccd5;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}

#main[action*="editentreetrt"] .clockpicker.input-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  width: 100% !important;
}

#main[action*="editentreetrt"] .clockpicker .form-control {
  min-width: 0;
  border-radius: 5px 0 0 5px;
}

#main[action*="editentreetrt"] .clockpicker .input-group-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  border: 1px solid #b9ccd5;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  color: var(--hceres-cyan-fonce);
  background: #eaf5f8;
}

#main[action*="editentreetrt"] select[name="rooms[]"] {
  display: block;
  width: 100%;
  height: 178px;
  min-height: 178px;
  max-height: 178px;
  margin: 0;
  padding: 5px 6px;
  border: 1px solid #9fbfc9;
  background: #fff;
  font-size: 13px;
  scrollbar-color: #9ec6d2 #edf5f7;
  scrollbar-width: thin;
}

#main[action*="editentreetrt"] select[name="rooms[]"] option {
  margin: 2px 0;
  padding: 7px 9px;
  border-radius: 3px;
  color: var(--hceres-bleu-nuit);
  background: #fff;
}

#main[action*="editentreetrt"] select[name="rooms[]"] option:checked {
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--hceres-cyan),
    var(--hceres-cyan-fonce)
  );
  font-weight: 700;
}

#main[action*="editentreetrt"] #div_types {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  gap: 6px;
  align-items: center;
}

#main[action*="editentreetrt"] #div_types > b {
  color: var(--hceres-bleu-nuit);
}

#main[action*="editentreetrt"] #div_types .btn {
  width: auto;
  min-height: 38px;
  padding: 7px 9px;
  border-radius: 5px;
  font-size: 12.5px;
  white-space: nowrap;
}

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .E:not(.form-inline) {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 100%;
  color: var(--hceres-texte);
}

#main[action*="editentreetrt"] #div_champs_add {
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #d8e6eb;
  border-radius: 6px;
  background: #f8fbfc;
}

#main[action*="editentreetrt"] #div_champs_add table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

#main[action*="editentreetrt"] #div_champs_add td {
  padding: 0 0 6px !important;
  border: 0 !important;
}

#main[action*="editentreetrt"] #div_champs_add tr:last-child td {
  padding-bottom: 0 !important;
}

#main[action*="editentreetrt"] #div_champs_add .col-xs-12 {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}

#main[action*="editentreetrt"] .bg-info {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid #c7dfe7;
  border-left: 3px solid var(--hceres-cyan);
  border-radius: 0 5px 5px 0;
  color: var(--hceres-bleu-nuit);
  background: #edf8fa;
}

#main[action*="editentreetrt"] .bg-info p {
  margin: 0;
}

/* Options de périodicité lorsqu'elles sont ouvertes */

#main[action*="editentreetrt"] #fermer:not([style*="none" i]) {
  display: block !important;
  margin: 0 0 10px;
}

#main[action*="editentreetrt"] #fermer .btn {
  width: 100%;
  min-height: 42px;
  border-radius: 5px;
  white-space: normal;
}

#main[action*="editentreetrt"] #menu1:not([style*="none" i]) {
  display: block !important;
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid #d8e6eb;
  border-top: 3px solid var(--hceres-cyan);
  border-radius: 6px;
  background: #f8fbfc;
}

#main[action*="editentreetrt"] #menu1 > p.F {
  margin: 0 0 12px;
  padding: 0 0 9px;
  border-bottom: 2px solid #d9edf2;
  color: var(--hceres-bleu-nuit);
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-size: 16px;
}

#main[action*="editentreetrt"] #menu1 > div {
  margin: 0 0 8px;
  padding: 10px;
  border: 1px solid #e0eaee;
  border-radius: 5px;
  background: #fff;
}

#main[action*="editentreetrt"] #menu1 .row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
}

#main[action*="editentreetrt"] #menu1 .row > [class*="col-"] {
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
}

#main[action*="editentreetrt"] #menu1 .row > .col-lg-11 {
  flex: 1 1 220px;
}

#main[action*="editentreetrt"] #menu1 .row > .col-lg-2,
#main[action*="editentreetrt"] #menu1 .row > .col-lg-3 {
  flex: 1 1 110px;
}

#main[action*="editentreetrt"] #menu2:not([style*="none" i]) {
  display: block !important;
  margin-top: 9px;
  padding: 10px;
  border: 1px solid #cfe1e7;
  border-radius: 5px;
  background: #edf8fa;
}

#main[action*="editentreetrt"] #menu2 .CL {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 12px;
  align-items: center;
  margin-top: 7px;
}

/* Barre d'actions */

#main[action*="editentreetrt"] #fixe {
  position: sticky;
  bottom: 12px;
  z-index: 15;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin: 4px 0 0;
  padding: 8px 10px;
  box-sizing: border-box;
  border: 1px solid #cbdde4;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(11, 58, 82, 0.13);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#main[action*="editentreetrt"] #fixe .btn {
  min-width: 130px;
  min-height: 39px;
  margin: 0;
  padding: 8px 18px;
  border-radius: 5px;
  font-weight: 600;
}

#main[action*="editentreetrt"] #fixe .btn:first-child {
  border-color: #c7d8df;
  color: var(--hceres-bleu-nuit);
  background: #fff;
  box-shadow: none;
}

#main[action*="editentreetrt"] #fixe .btn:first-child:hover,
#main[action*="editentreetrt"] #fixe .btn:first-child:focus-visible {
  border-color: #e5a9cc;
  color: var(--hceres-rose-fonce);
  background: #fff4fa;
}

#main[action*="editentreetrt"] #fixe .btn:last-child {
  border-color: #016882;
  color: #fff;
  background: var(--hceres-cyan);
  box-shadow: 0 4px 10px rgba(1, 130, 163, 0.18);
}

#main[action*="editentreetrt"] #fixe .btn:last-child:hover,
#main[action*="editentreetrt"] #fixe .btn:last-child:focus-visible {
  border-color: var(--hceres-cyan-fonce);
  color: #fff;
  background: var(--hceres-cyan-fonce);
}

@media screen and (max-width: 1150px) {

  #main[action*="editentreetrt"] > .row2 {
    grid-template-columns: minmax(0, 1fr);
  }

  #main[action*="editentreetrt"] > .row2 {
    padding: 18px;
  }
}

@media screen and (max-width: 900px) {
  #main[action*="editentreetrt"]
    > .row2
    > .col:first-child
    > .alert-info,
#main[action*="editentreetrt"]
    > .row2
    > .col:first-child
    > #choix_beneficiaire {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 700px) {

  #main[action*="editentreetrt"] > .row2 {
    gap: 12px;
    padding: 12px;
  }

  #main[action*="editentreetrt"]
    > .row2
    > .col:first-child
    > .alert-info,
#main[action*="editentreetrt"]
    > .row2
    > .col:first-child
    > #choix_beneficiaire,
#main[action*="editentreetrt"]
    > .row2
    > .col:first-child
    > .E:not(.form-inline),
#main[action*="editentreetrt"]
    > .row2
    > .col:first-child
    > #div_champs_add {
    grid-column: 1 / -1;
  }

  #main[action*="editentreetrt"] #choix_beneficiaire,
#main[action*="editentreetrt"] #menu4:not([style*="none" i]) {
    grid-template-columns: minmax(0, 1fr);
  }

  #main[action*="editentreetrt"] #choix_beneficiaire label,
#main[action*="editentreetrt"]
    #choix_beneficiaire
    .select2-container,
#main[action*="editentreetrt"] #choix_beneficiaire #bnfdef {
    grid-column: 1;
    min-width: 0;
  }

  #main[action*="editentreetrt"] #choix_beneficiaire label {
    white-space: normal;
  }

  #main[action*="editentreetrt"] #bnfdef {
    width: 100%;
  }

  #main[action*="editentreetrt"] select[name="rooms[]"] {
    height: 180px;
    min-height: 180px;
    max-height: 180px;
  }

  #main[action*="editentreetrt"] #div_types {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  #main[action*="editentreetrt"] #div_types .btn {
    width: 100%;
  }

  #main[action*="editentreetrt"] #fixe {
    bottom: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
  }

  #main[action*="editentreetrt"] #fixe .btn {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
  }
}

/* ----------------------------------------------------------------
   Page de connexion
   Les cellules sont ciblées par leur position : aucune classe HTML
   supplémentaire n'est nécessaire.
   ---------------------------------------------------------------- */

.page-login {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: 28px 16px;
  margin: 0 auto;
  overflow-x: hidden;
  box-sizing: border-box;
  color: var(--hceres-texte);
  text-align: center;
  background-color: #a8c8de;
  background-image: linear-gradient(180deg, #bad3e5 0%, #93bad6 100%);
}

/* L'arbre reste un filigrane indépendant du fond bleu. */
.page-login::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/personnalisation/images/ressources/arbre-blanc.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.4;
  pointer-events: none;
}

.page-login > * {
  position: relative;
  z-index: 1;
}

.page-login > img {
  display: block;
  width: auto;
  max-width: min(180px, 40vw);
  height: auto;
  max-height: 160px !important;
  margin: 0 auto 10px;
  object-fit: contain;
}

.page-login > h1 {
  width: min(100%, 900px);
  margin: 0 auto;
  color: var(--hceres-bleu-nuit);
  font-size: clamp(29px, 2.2vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

/* Le nom Hcéres est déjà présent dans le logo et dans le titre principal. */
.page-login > h2 {
  display: none;
}

.page-login > p:first-of-type {
  width: min(100%, 940px);
  margin: 12px auto 0;
  color: var(--hceres-texte);
  font-size: 14px;
  line-height: 1.5;
}

.page-login form {
  width: 100% !important;
  margin: 17px auto 18px !important;
}

.page-login form fieldset {
  width: min(480px, 100%) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding: 23px 24px 24px !important;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 34px rgba(11, 58, 82, 0.14);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.page-login form legend {
  display: block;
  float: left;
  width: 100%;
  max-width: none;
  margin: 0 0 13px;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  color: var(--hceres-bleu-nuit);
  background: transparent;
  font-family: "Roboto Slab", Roboto, Arial, sans-serif !important;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.page-login form legend + * {
  clear: both;
}

.page-login form fieldset > p {
  width: min(100%, 410px);
  margin: 0 auto 18px;
  color: var(--hceres-texte-secondaire);
  font-size: 13px;
  line-height: 1.45;
}

.page-login form table {
  width: 100% !important;
  margin-right: auto;
  margin-left: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.page-login form table tr {
  display: grid;
  grid-template-columns: 120px minmax(220px, 260px);
  gap: 6px 12px;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
}

.page-login form table td {
  width: auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.page-login form table tr td:first-child {
  width: auto !important;
  color: var(--hceres-bleu-nuit);
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-variant: normal !important;
  font-size: 14px;
  font-weight: 600;
  text-align: right !important;
}

.page-login form table tr td:nth-child(2) {
  width: 260px !important;
  text-align: left !important;
}

.page-login form table input[type="text"],
.page-login form table input[type="password"] {
  display: block;
  width: 100% !important;
  min-height: 44px;
  padding: 9px 40px 9px 11px;
  box-sizing: border-box;
  border: 1px solid #a8bec9;
  border-radius: 5px;
  color: var(--hceres-texte);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(11, 58, 82, 0.04);
  font-size: 14px;
  transition:
    border-color var(--hceres-transition),
    box-shadow var(--hceres-transition);
}

.page-login form table input[type="text"]:hover,
.page-login form table input[type="password"]:hover {
  border-color: #7fa9b7;
}

.page-login form table input[type="text"]:focus,
.page-login form table input[type="password"]:focus {
  border-color: var(--hceres-cyan);
  outline: 0;
  box-shadow:
    inset 0 1px 2px rgba(11, 58, 82, 0.03),
    0 0 0 3px rgba(1, 130, 163, 0.16);
}

.page-login form table tr td:only-child,
.page-login form table tr td[colspan] {
  grid-column: 1 / -1;
  width: auto !important;
  justify-self: center;
  text-align: center !important;
}

.page-login .btn-login {
  width: 260px !important;
  min-height: 44px;
  margin: 2px 0 0;
  padding: 9px 18px;
  border: 1px solid #016882;
  border-radius: 5px;
  color: #fff;
  background: var(--hceres-cyan);
  box-shadow: 0 5px 13px rgba(1, 93, 116, 0.18);
  font-weight: 600;
  transition:
    background-color var(--hceres-transition),
    border-color var(--hceres-transition),
    box-shadow var(--hceres-transition),
    transform var(--hceres-transition);
}

.page-login .btn-login:hover,
.page-login .btn-login:focus-visible {
  border-color: var(--hceres-cyan-fonce);
  color: #fff;
  background: var(--hceres-cyan-fonce);
  box-shadow: 0 7px 17px rgba(1, 93, 116, 0.24);
  transform: translateY(-1px);
}

.page-login .btn-login:active {
  box-shadow: 0 3px 8px rgba(1, 93, 116, 0.18);
  transform: translateY(0);
}

/* Les crochets historiques sont masqués en conservant le lien. */
.page-login > p:last-of-type {
  margin: 0 auto;
  font-size: 0;
}

.page-login > p:last-of-type a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 7px 13px;
  box-sizing: border-box;
  border: 1px solid rgba(1, 93, 116, 0.24);
  border-radius: 5px;
  color: var(--hceres-cyan-fonce);
  background: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition:
    color var(--hceres-transition),
    background-color var(--hceres-transition),
    border-color var(--hceres-transition);
}

.page-login > p:last-of-type a:hover,
.page-login > p:last-of-type a:focus-visible {
  border-color: var(--hceres-cyan);
  color: var(--hceres-cyan-fonce);
  background: rgba(255, 255, 255, 0.9);
}

/* ----------------------------------------------------------------
   Tablettes et écrans intermédiaires
   ---------------------------------------------------------------- */

@media screen and (max-width: 1200px) {
  header #panel {
    grid-template-columns: 80px minmax(280px, 1fr) minmax(390px, 440px);
    gap: 10px 12px;
  }

  header #panel::after {
    grid-row: 1 / 3;
    grid-column: 3;
  }

  header .logo {
    grid-row: 1 / 3;
    grid-column: 1;
    width: 80px !important;
  }

  header .logo img {
    max-width: 76px;
    max-height: 76px;
  }

  header .accueil {
    grid-row: 1 / 3;
    grid-column: 2;
  }

  header .administration {
    grid-row: 1;
    grid-column: 3;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: auto !important;
  }

  header .administration::after {
    top: auto;
    right: 12px;
    bottom: -5px;
    left: 12px;
    width: auto;
    height: 1px;
  }

  header .configuration {
    grid-column: 3;
    grid-row: 2;
    width: auto !important;
  }
}

/* ----------------------------------------------------------------
   Navigation mobile : utilisation du menu horizontal déjà présent
   dans GRR, sans classe supplémentaire.
   ---------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  header {
    margin-bottom: 16px;
    padding: 12px 14px 14px;
  }

  header #panel {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
  }

  header #panel::after {
    grid-row: 2 / 4;
    grid-column: 1 / -1;
  }

  header .logo {
    grid-row: 1;
    grid-column: 1;
    width: 74px !important;
  }

  header .logo img {
    max-width: 70px;
    max-height: 70px;
  }

  header .accueil h2 {
    margin: 0;
    font-size: 22px;
  }

  header .accueil {
    grid-row: 1;
    grid-column: 2;
  }

  header .accueil p {
    display: none;
  }

  header .administration,
header .configuration {
    grid-column: 1 / -1;
    width: 100% !important;
    padding: 9px 10px;
  }

  header .administration {
    grid-row: 2;
    flex-direction: row;
    justify-content: space-between;
    overflow: visible;
    white-space: nowrap;
  }

  header .administration::after {
    top: auto;
    right: 10px;
    bottom: -5px;
    left: 10px;
    width: auto;
    height: 1px;
  }

  header .configuration {
    grid-row: 3;
  }

  header .configuration .clock {
    grid-row: 1;
    grid-column: 1 / 6;
    padding: 0 10px 0 0;
    border-right: 1px solid rgba(1, 130, 163, 0.12);
    border-bottom: 0;
  }

  header .configuration > a[href*="default_language=fr-fr"] {
    grid-column: 6;
  }

  header .configuration > a[href*="default_language=de-de"] {
    grid-column: 7;
  }

  header .configuration > a[href*="default_language=en-gb"] {
    grid-column: 8;
  }

  header .configuration > a[href*="default_language=it-it"] {
    grid-column: 9;
  }

  header .configuration > a[href*="default_language=es-es"] {
    grid-column: 10;
  }

  header .configuration > a[href*="default_language"] {
    grid-row: 1;
    justify-self: center;
  }

  header
    .configuration
    > a[href*="compte.php"]:not([href*="default_language"]) {
    grid-row: 2;
    grid-column: 1 / 6;
  }

  header
    .configuration
    > a[href*="app.php?p=report"]:not([href*="default_language"]) {
    grid-row: 2;
    grid-column: 6 / 8;
  }

  header
    .configuration
    > a[href*="app.php?p=deconnexion"]:not([href*="default_language"]) {
    grid-row: 2;
    grid-column: 8 / -1;
  }

  body > section {
    padding: 0 10px 28px;
  }

  body > section > section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto !important;
    min-height: 0;
    max-height: none !important;
    overflow: visible;
  }

  /* Le long menu latéral est remplacé par sa variante mobile.
     L'attribut style du menu gauche sert aussi d'état au bouton GRR :
     le menu horizontal peut donc toujours être masqué et réaffiché. */
  #menuGauche2 {
    display: none !important;
  }

  #menuHaut {
    display: none !important;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid var(--hceres-bordure);
    border-radius: var(--hceres-rayon);
    background: #fff;
    box-shadow: 0 3px 14px rgba(11, 58, 82, 0.07);
  }

  #menuHaut[style*="inline-block"],
#menuGauche2[style*="inline-block"] + #menuHaut {
    display: flex !important;
  }

  #menuHaut > form {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--hceres-bordure);
    text-align: center !important;
  }

  #resource_selectorH {
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    float: none;
    width: 100%;
    padding: 0;
  }

  #resource_selectorH .panel {
    min-width: 0;
    margin: 0;
  }

  #resource_selectorH .panel-body {
    padding: 8px;
    overflow: visible;
  }

  #resource_selectorH form.ressource {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    max-height: 210px;
    padding: 0 4px 0 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
    scrollbar-color: #a9cad5 transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  #resource_selectorH #area_001 {
    max-height: none;
  }

  #resource_selectorH form.ressource input.btn {
    flex: 0 0 auto;
    width: 100% !important;
    min-width: 0;
    min-height: 40px;
    margin: 0 !important;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    text-align: left;
  }

  #resource_selectorH #area_001 input.btn {
    min-width: 0;
  }

  #calendriersH {
    display: none;
  }

  #calendriersH > .col-xs-12 {
    float: none;
    width: 100%;
    padding: 0;
  }

  #calendriersH table.calendar {
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
  }

  #legendeH {
    order: 4;
    float: none;
    width: 100%;
    padding: 0;
  }

  #legendeH table.legende {
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
  }

  #planning2 {
    display: block !important;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100% !important;
    height: auto !important;
    min-height: 520px;
    max-height: none !important;
    padding: 10px;
  }

  table.semaine {
    display: table !important;
    min-width: 820px;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  table.semaine > thead > tr > th,
table.semaine > tbody > tr > td {
    min-width: 0;
  }

  table.semaine > thead > tr > th:first-child,
table.semaine > tbody > tr > td:first-child {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }

  table.jour {
    display: table !important;
    width: max-content;
    min-width: 100%;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  table.jour caption > div:first-child,
table.jour caption > div:last-child {
    width: calc(100vw - 42px);
  }

  table.jour > thead > tr > th,
table.jour > tbody > tr > td:not(.cell_hours):not(.cell_hours2) {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
  }

  table.jour > thead > tr > td.cell_hours,
table.jour > tbody > tr > td.cell_hours,
table.jour > tbody > tr > td.cell_hours2 {
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
  }
}

/* ----------------------------------------------------------------
   Téléphones
   ---------------------------------------------------------------- */

@media screen and (max-width: 600px) {
  header {
    padding: 10px 10px 12px;
  }

  header #panel {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 8px;
  }

  header .logo {
    width: 62px !important;
  }

  header .logo img {
    max-width: 58px;
    max-height: 58px;
  }

  header .accueil h2 {
    font-size: 20px;
  }

  header .administration,
header .configuration {
    font-size: 12px;
  }

  header .administration {
    justify-content: center;
    padding: 7px 8px;
  }

  header .administration::after {
    right: 8px;
    bottom: -4px;
    left: 8px;
  }

  header .administration a[href*="admin_accueil"] {
    justify-content: center;
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    box-sizing: border-box;
    border: 1px solid #016882;
    border-radius: 5px;
    color: #fff;
    background: var(--hceres-cyan);
  }

  header .administration a[href*="admin_accueil"]::after {
    color: #fff;
  }

  header .administration a[href*="admin_accueil"]:hover,
header .administration a[href*="admin_accueil"]:focus-visible {
    color: #fff;
    background: var(--hceres-cyan-fonce);
  }

  header .administration a[href*="admin_view_connexions"],
header .configuration .clock,
header .configuration > a[href*="default_language"] {
    display: none;
  }

  header .configuration {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    overflow: visible;
    white-space: normal;
  }

  header .configuration > a[href*="compte.php"]:not([href*="default_language"]),
header
    .configuration
    > a[href*="app.php?p=report"]:not([href*="default_language"]),
header
    .configuration
    > a[href*="app.php?p=deconnexion"]:not([href*="default_language"]) {
    min-height: 40px;
    padding: 7px 8px;
    border-radius: 5px;
    white-space: normal;
  }

  header
    .configuration
    > a[href*="compte.php"]:not([href*="default_language"]) {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-content: center;
  }

  header
    .configuration
    > a[href*="app.php?p=report"]:not([href*="default_language"]) {
    grid-row: 2;
    grid-column: 1;
  }

  header
    .configuration
    > a[href*="app.php?p=deconnexion"]:not([href*="default_language"]) {
    grid-row: 2;
    grid-column: 2;
  }

  header #open {
    right: 9px;
    bottom: -14px;
    width: 29px;
    height: 29px;
  }

  #menuHaut {
    padding: 10px;
    border-radius: 8px;
  }

  #menuHaut > form {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 10px;
  }

  #menuHaut > form select,
#menuHaut > form button {
    flex: 0 0 auto;
    min-height: 42px;
  }

  #resource_selectorH {
    grid-template-columns: minmax(0, 1fr);
  }

  #resource_selectorH form.ressource input.btn {
    min-height: 44px;
  }

  /* La sélection directe de date reste disponible ; le mini-
       calendrier est retiré pour atteindre rapidement le planning. */
  #calendriersH {
    display: none;
  }

  #legendeH table.legende caption {
    text-align: center;
  }

  #planning2 {
    padding: 8px;
    border-radius: 8px;
  }

  table.semaine {
    min-width: 760px;
    border-spacing: 3px;
  }

  table.semaine caption .ligne23 {
    grid-template-columns: 1fr auto 1fr;
  }

  table.semaine caption .ligne23 .btn {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 0;
  }

  table.semaine caption .ligne23 .btn i {
    font-size: 13px;
  }

  table.semaine caption > div:not(.ligne23) {
    min-height: 44px;
    padding: 0 42px;
  }

  table.semaine h4.titre {
    font-size: 16px;
  }

  table.semaine > thead > tr > th,
table.semaine > tbody > tr > td {
    min-width: 0;
  }

  table.semaine > thead > tr > th:first-child,
table.semaine > tbody > tr > td:first-child {
    width: 126px;
    min-width: 126px;
    max-width: 126px;
  }

  table.semaine > tbody > tr > td > div.empty_cell {
    min-height: 42px;
  }

  table.semaine > tbody > tr > td > div.empty_cell > a {
    min-height: 42px;
    opacity: 0.6;
  }

  table.jour {
    border-spacing: 2px;
  }

  table.jour caption > div:first-child,
table.jour caption > div:last-child {
    width: calc(100vw - 36px);
  }

  table.jour caption .ligne23 .btn {
    min-width: 40px;
    min-height: 40px;
    padding: 7px 9px;
    font-size: 0;
  }

  table.jour caption .ligne23 .btn i {
    font-size: 13px;
  }

  table.jour caption > div:last-child {
    min-height: 46px;
    padding: 0 42px;
  }

  table.jour h4.titre {
    font-size: 16px;
  }

  table.jour > thead > tr > th,
table.jour > tbody > tr > td:not(.cell_hours):not(.cell_hours2) {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
  }

  table.jour > thead > tr > th {
    height: 96px;
    padding: 7px 6px;
    font-size: 11px;
  }

  table.jour > thead > tr > th > a.lienPlanning {
    font-size: 12px;
  }

  table.jour > thead > tr > td.cell_hours {
    height: 96px;
  }

  table.jour > thead > tr > td.cell_hours,
table.jour > tbody > tr > td.cell_hours,
table.jour > tbody > tr > td.cell_hours2 {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    font-size: 11px;
  }

  table.jour > tbody > tr > td.empty_cell {
    height: 46px;
  }

  table.jour > tbody > tr > td.empty_cell > a {
    min-height: 44px !important;
    opacity: 0.58;
  }

  table.jour > tbody > tr > td.resadrag > a.lienCellule {
    padding: 6px 5px !important;
    font-size: 10px;
  }

  #toTop {
    right: 12px !important;
    bottom: 12px !important;
    border-radius: 7px;
  }

  #toTop b {
    width: 44px;
    min-height: 44px;
    padding: 0;
  }

  #toTop b::after {
    display: none;
  }

  .popup_block {
    top: 50% !important;
    left: 50% !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px);
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
    margin: 0 !important;
    padding: 14px;
    border-radius: 9px;
    transform: translate(-50%, -50%);
  }

  .popup_block th,
.popup_block td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Connexion : version compacte, adaptée aux écrans mobiles. */
  .page-login {
    justify-content: flex-start;
    padding: 14px 10px 16px;
  }

  .page-login::before {
    background-position: center bottom;
    background-size: auto 82%;
    opacity: 0.34;
  }

  .page-login > img {
    max-width: min(132px, 36vw);
    max-height: 118px !important;
    margin-bottom: 6px;
  }

  .page-login > h1 {
    width: min(100%, 450px);
    font-size: clamp(27px, 7.2vw, 31px);
    line-height: 1.12;
  }

  .page-login > p:first-of-type {
    width: min(100%, 450px);
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.45;
  }

  .page-login form {
    margin: 12px auto !important;
  }

  .page-login form fieldset {
    width: min(440px, calc(100% - 8px)) !important;
    padding: 17px 14px 16px !important;
  }

  .page-login form legend {
    margin-bottom: 10px;
    padding: 0;
    font-size: 23px;
  }

  .page-login form fieldset > p {
    width: min(100%, 360px);
    margin-bottom: 14px;
    font-size: 12.5px;
  }

  .page-login form table tr {
    grid-template-columns: minmax(0, 320px);
    gap: 5px;
    justify-content: center;
    margin-bottom: 13px;
  }

  .page-login form table tr td:first-child {
    width: 100% !important;
    font-size: 13px;
    text-align: center !important;
  }

  .page-login form table tr td:nth-child(2) {
    width: 100% !important;
    max-width: 320px;
    justify-self: center;
    text-align: center !important;
  }

  .page-login form table tr td:only-child,
.page-login form table tr td[colspan] {
    grid-column: 1;
  }

  .page-login .btn-login {
    width: 100% !important;
    max-width: 320px;
  }

  .page-login > p:last-of-type a {
    min-height: 38px;
    padding: 6px 11px;
    font-size: 12.5px;
  }
}

/* Les petits écrans en hauteur conservent l'action principale à l'écran. */
@media screen and (max-width: 600px) and (max-height: 760px) {
  .page-login {
    padding-top: 8px;
  }

  .page-login > img {
    max-height: 94px !important;
    margin-bottom: 4px;
  }

  .page-login > h1 {
    font-size: 25px;
  }

  .page-login > p:first-of-type {
    margin-top: 6px;
    font-size: 12px;
  }

  .page-login form {
    margin: 8px auto !important;
  }

  .page-login form fieldset {
    padding-top: 13px !important;
    padding-bottom: 12px !important;
  }

  .page-login form fieldset > p {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .page-login form table tr {
    margin-bottom: 10px;
  }
}

/* ================================================================
   Couche de compatibilite performante
   Cette partie remplace les anciens ciblages relationnels couteux.
   Les selecteurs s'appuient uniquement sur les identifiants et sur
   l'ordre stable des blocs produits par GRR 4.6.3.
   ================================================================ */

/* Langue active : le nom autonome de la langue sert de repere. */
header .configuration > a[href*="default_language"] {
  opacity: 1;
  filter: none;
}

header .configuration > a[href*="default_language"] img[alt="Français"],
header .configuration > a[href*="default_language"] img[alt="Deutsch"],
header .configuration > a[href*="default_language"] img[alt="English"],
header .configuration > a[href*="default_language"] img[alt="Italiano"],
header .configuration > a[href*="default_language"] img[alt="Español"] {
  border-radius: 2px;
  outline: 2px solid var(--hceres-cyan);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(1, 130, 163, 0.1);
}

/* Panneau de planning autonome sur ordinateur. Il remplace la
   detection relationnelle de la vue et garantit simultanement :
   - les entetes fixes ;
   - la barre horizontale toujours accessible ;
   - l'absence de deplacement lateral du bandeau general. */
@media screen and (min-width: 992px) {
  html,
  body {
    overflow-x: hidden;
  }

  #planning2 {
    container-type: inline-size;
    height: clamp(560px, calc(100vh - 24px), 900px) !important;
    min-height: 560px;
    max-height: 900px !important;
    overflow: auto;
    scrollbar-color: #6faebe #edf3f5;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  #planning2::-webkit-scrollbar {
    width: 10px;
    height: 14px;
  }

  #planning2::-webkit-scrollbar-track {
    border-radius: 5px;
    background: #edf3f5;
  }

  #planning2::-webkit-scrollbar-thumb {
    border: 3px solid #edf3f5;
    border-radius: 7px;
    background: #6faebe;
  }

  #planning2::-webkit-scrollbar-thumb:hover {
    background: var(--hceres-cyan);
  }
}

@supports (width: 1cqi) {
  table.jour caption > div:first-child,
  table.jour caption > div:last-child {
    width: 100cqi;
    max-width: 100cqi;
  }
}

/* Capacite et titre d'une salle dans la vue hebdomadaire. */
table.semaine caption > div:not(.ligne23) > .small {
  display: inline-flex !important;
  margin: 6px 4px 0 !important;
}

table.semaine caption > div:not(.ligne23) > a[href*="admin_edit_room"] {
  display: inline-flex;
  margin: 6px 0 0 4px;
  vertical-align: middle;
}

table.semaine caption > div:not(.ligne23) > br {
  display: none;
}

/* Dans les cellules deja occupees, l'action d'ajout conserve une
   zone stable sans masquer les reservations existantes. */
table.semaine
  > tbody
  > tr
  > td:not(:first-child):not(.empty_cell) {
  position: relative;
  padding-bottom: 42px;
}

table.semaine
  > tbody
  > tr
  > td:not(:first-child):not(.empty_cell)
  > div.empty_cell {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: 4px;
  z-index: 3;
  width: auto;
  height: 34px;
  min-height: 34px;
}

table.semaine
  > tbody
  > tr
  > td:not(:first-child):not(.empty_cell)
  > div.empty_cell
  > a {
  width: 100%;
  height: 100%;
  min-height: 34px;
}

/* ---------------------------------------------------------------
   Mon compte, Mes connexions et Mes reservations
   --------------------------------------------------------------- */

#menu-compte {
  position: sticky;
  top: 12px;
  float: left !important;
  width: 220px !important;
  margin: 0 18px 20px 0;
  padding: 12px !important;
  box-sizing: border-box;
  border: 1px solid var(--hceres-bordure);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(11, 58, 82, 0.07);
}

#menu-compte > br {
  display: none;
}

#menu-compte > a.btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  float: none !important;
  width: 100% !important;
  min-height: 42px;
  margin: 0 0 7px;
  padding: 8px 11px;
  border: 1px solid #c9dce4;
  border-radius: 5px;
  color: var(--hceres-cyan-fonce);
  background: #f8fbfc;
  box-shadow: none;
  font-size: 13px;
  text-align: left;
  white-space: normal;
}

#menu-compte > a.btn:last-of-type {
  margin-bottom: 0;
}

#menu-compte > a.btn::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--hceres-cyan);
  box-shadow: 0 0 0 3px rgba(1, 130, 163, 0.1);
}

#menu-compte > a.btn:hover,
#menu-compte > a.btn:focus-visible {
  color: #fff;
  border-color: var(--hceres-cyan-fonce);
  background: var(--hceres-cyan);
  transform: translateX(2px);
}

#menu-compte > a.btn:hover::before,
#menu-compte > a.btn:focus-visible::before {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

#page-compte {
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0 0 0 238px;
  padding: 0 !important;
}

#page-compte > div {
  width: 100%;
  min-width: 0;
  padding: clamp(16px, 2vw, 26px);
  overflow-x: auto;
  box-sizing: border-box;
  border: 1px solid var(--hceres-bordure);
  border-top: 3px solid var(--hceres-rose);
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--hceres-ombre);
  scrollbar-color: #a9cad5 transparent;
  scrollbar-width: thin;
}

#page-compte > div > p:first-child {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--hceres-cyan);
  border-radius: 0 5px 5px 0;
  color: var(--hceres-bleu-nuit);
  background: #eef7fa;
}

#page-compte > div > footer:empty {
  display: none;
}

/* Groupes du changement de mot de passe. */
#page-compte
  #param_account
  > hr:first-of-type
  + div
  > .form-group {
  display: grid;
  grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  margin: 0 0 8px;
  padding: 9px 10px;
  box-sizing: border-box;
  border: 1px solid #e0eaee;
  border-radius: 5px;
  background: #fff;
}

#page-compte
  #param_account
  > hr:first-of-type
  + div
  > .form-group
  > label,
#page-compte
  #param_account
  > hr:first-of-type
  + div
  > .form-group
  > div {
  float: none !important;
  width: auto !important;
  margin: 0;
  padding: 0 !important;
}

#page-compte
  #param_account
  > hr:first-of-type
  + div
  > .form-group:nth-of-type(3) {
  grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  gap: 5px 12px;
}

#page-compte
  #param_account
  > hr:first-of-type
  + div
  > .form-group:nth-of-type(3)
  > div:nth-child(1),
#page-compte
  #param_account
  > hr:first-of-type
  + div
  > .form-group:nth-of-type(3)
  > div:nth-child(3) {
  display: none;
}

#page-compte
  #param_account
  > hr:first-of-type
  + div
  > .form-group:nth-of-type(3)
  > div:nth-child(2) {
  grid-column: 1 / -1;
  color: var(--hceres-texte-secondaire);
  font-size: 12px;
}

#page-compte
  #param_account
  > hr:first-of-type
  + div
  > .form-group:nth-of-type(3)
  > div:nth-child(4) {
  grid-column: 1;
}

#page-compte
  #param_account
  > hr:first-of-type
  + div
  > .form-group:nth-of-type(3)
  > div:nth-child(5) {
  grid-column: 2;
}

/* Tableaux des connexions et reservations personnelles. */
#page-compte table.table-bordered {
  width: 100%;
  min-width: 780px;
  margin: 0;
  border: 1px solid #d8e5ea !important;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 6px;
  background: #fff;
}

#page-compte table.table-bordered th,
#page-compte table.table-bordered td {
  padding: 9px 10px !important;
  border: 0 !important;
  border-right: 1px solid #e4ecef !important;
  border-bottom: 1px solid #e4ecef !important;
  text-align: left;
  vertical-align: middle;
}

#page-compte table.table-bordered th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--hceres-bleu-nuit);
  background: #dceef3;
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-size: 12.5px;
  white-space: nowrap;
}

#page-compte table.table-bordered th:last-child,
#page-compte table.table-bordered td:last-child {
  border-right: 0 !important;
}

#page-compte table.table-bordered tbody:last-child tr:last-child td {
  border-bottom: 0 !important;
}

#page-compte table.table-bordered tbody tr:nth-child(even) td {
  background: #f8fbfc;
}

#page-compte table.table-bordered tbody tr:hover td {
  background: #eef7fa;
}

#page-compte table.table-bordered a {
  font-weight: 600;
}

#page-compte table.table-bordered:not(.table-condensed) {
  min-width: 940px;
  font-size: 12.5px;
}

#page-compte table.table-bordered:not(.table-condensed) td > span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #edf3f5;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

#page-compte table.table-bordered:not(.table-condensed) span[style*="green" i] {
  color: #176b46 !important;
  background: #e5f6ee;
}

#page-compte table.table-bordered:not(.table-condensed) span[style*="red" i] {
  color: #9a2f45 !important;
  background: #fff0f3;
}

#page-compte table.table-bordered:not(.table-condensed) span[style*="black" i] {
  color: var(--hceres-texte) !important;
  background: #edf3f5;
}

#page-compte form[action*="pc=mesreservations"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 16px;
  padding: 11px 12px;
  border: 1px solid #d8e6eb;
  border-radius: 6px;
  background: #f8fbfc;
}

#page-compte form[action*="pc=mesreservations"] label.radio-inline {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 38px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid #d2e1e7;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}

#page-compte form[action*="pc=mesreservations"] input[type="radio"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--hceres-rose);
}

#page-compte form[action*="pc=mesreservations"] input[type="submit"] {
  min-height: 38px;
  margin-left: auto;
  padding: 7px 15px;
  border: 1px solid var(--hceres-cyan-fonce);
  border-radius: 5px;
  color: #fff;
  background: var(--hceres-cyan);
  font-weight: 600;
}

#page-compte form[action*="pc=mesreservations"] input[type="submit"]:hover,
#page-compte form[action*="pc=mesreservations"] input[type="submit"]:focus-visible {
  background: var(--hceres-cyan-fonce);
}

#page-compte table.table-condensed {
  min-width: 1040px;
}

#page-compte table.table-condensed tr[style*="background-color" i] td {
  background: #fff7fb !important;
}

#page-compte table.table-condensed td[colspan] {
  padding: 18px !important;
  text-align: center;
}

/* ---------------------------------------------------------------
   Recherche, rapports et statistiques
   --------------------------------------------------------------- */

#page-resa {
  float: none;
  width: 100% !important;
  min-width: 0;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 !important;
}

#page-resa > h1.center {
  width: 100%;
  margin: 0 0 14px;
  padding: 0 0 13px;
  border-bottom: 2px solid var(--hceres-rose-clair);
  color: var(--hceres-rose);
  font-size: clamp(23px, 2.4vw, 31px);
  line-height: 1.2;
  text-align: left;
}

/* Debut et fin de periode : div 1 a 4. */
#page-resa #frmReport > div:nth-of-type(1),
#page-resa #frmReport > div:nth-of-type(3) {
  grid-column: span 4;
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 11px 13px;
  border: 1px solid #cfe1e7;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  color: var(--hceres-bleu-nuit);
  background: #eef7fa;
  font-weight: 600;
}

#page-resa #frmReport > div:nth-of-type(2),
#page-resa #frmReport > div:nth-of-type(4) {
  grid-column: span 8;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid #cfe1e7;
  border-radius: 0 5px 5px 0;
  background: #fbfcfd;
}

/* Logique ET/OU : div 5 et 6. */
#page-resa #frmReport > div:nth-of-type(5),
#page-resa #frmReport > div:nth-of-type(6) {
  grid-column: span 6;
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #dce8ec;
  border-radius: 5px;
  color: var(--hceres-bleu-nuit);
  background: #f8fbfc;
  font-weight: 500;
}

/* Cinq criteres de recherche : div 7 a 11. */
#page-resa #frmReport > div:nth-of-type(n + 7):nth-of-type(-n + 11) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e0e9ed;
  border-radius: 5px;
  background: #fbfcfd;
  counter-increment: report-filter;
}

#page-resa #frmReport > div:nth-of-type(n + 7):nth-of-type(-n + 11)::before {
  content: counter(report-filter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: var(--hceres-cyan);
  font-size: 12px;
  font-weight: 700;
}

/* Presentation des resultats : div 12 a 14. */
#page-resa #frmReport > div:nth-of-type(n + 12):nth-of-type(-n + 14) {
  grid-column: span 4;
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid #e2d8df;
  border-radius: 5px;
  color: var(--hceres-bleu-nuit);
  background: #fff9fc;
  font-weight: 500;
}

#page-resa #frmReport > div:nth-of-type(15) {
  grid-column: span 4;
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 11px 13px;
  border: 1px solid #cfe1e7;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  color: var(--hceres-bleu-nuit);
  background: #eef7fa;
  font-weight: 600;
}

#page-resa #frmReport > div:nth-of-type(16) {
  grid-column: span 8;
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid #cfe1e7;
  border-radius: 0 5px 5px 0;
  background: #fbfcfd;
}

#page-resa #frmReport > div:nth-of-type(17) {
  position: sticky;
  bottom: 12px;
  z-index: 12;
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid #cbdde4;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(11, 58, 82, 0.13);
}

#page-resa #frmReport > div:nth-of-type(17) .btn {
  min-width: 170px;
  min-height: 44px;
  padding: 9px 20px;
  border-radius: 5px;
  font-size: 14px;
}

/* ---------------------------------------------------------------
   Ajouter ou modifier une reservation
   --------------------------------------------------------------- */

/* Le conteneur de periodicite reste disponible ; son contenu conserve
   le display:none de GRR tant que l'utilisateur ne l'ouvre pas. */
#main[action*="editentreetrt"] > .row2 > .col-sm-6:last-of-type {
  display: block;
}

/* Placement compact des cinq blocs form-inline de la premiere colonne. */
#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .E.form-inline:nth-of-type(4),
#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .E.form-inline:nth-of-type(5) {
  grid-column: span 6;
  display: grid !important;
  grid-template-columns:
    50px minmax(72px, 1fr) minmax(76px, 1fr) 32px
    minmax(96px, 112px);
  gap: 6px;
  align-items: center;
}

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .E.form-inline:nth-of-type(4)
  > label,
#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .E.form-inline:nth-of-type(5)
  > label {
  grid-column: 1 / -1;
  margin: 0;
}

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .E.form-inline:nth-of-type(6) {
  grid-column: span 3;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .E.form-inline:nth-of-type(7) {
  grid-column: span 6;
  display: block !important;
  color: var(--hceres-texte-secondaire);
  font-size: 0;
}

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .E.form-inline:nth-of-type(7)
  > label {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 7px;
  font-size: 14px;
}

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .E.form-inline:nth-of-type(7)
  > label::after {
  content: "Selection multiple";
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid #b9d8e1;
  border-radius: 4px;
  color: var(--hceres-cyan-fonce);
  background: #edf8fa;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .E.form-inline:nth-of-type(7)::after {
  content: "Plusieurs salles : maintenez Ctrl (Windows) ou Commande (Mac), puis cliquez sur chaque salle.";
  display: block;
  margin-top: 7px;
  padding: 6px 8px;
  border-left: 3px solid var(--hceres-cyan);
  color: var(--hceres-texte-secondaire);
  background: #eef7fa;
  font-size: 11.5px;
  line-height: 1.35;
}

#main[action*="editentreetrt"]
  > .row2
  > .col:first-child
  > .E.form-inline:nth-of-type(8) {
  grid-column: span 3;
  display: block !important;
}

#main[action*="editentreetrt"] #menu1 > div > input[type="radio"] {
  vertical-align: middle;
}

/* Responsive des blocs recrees sans selecteurs relationnels. */
@media screen and (max-width: 900px) {
  #menu-compte {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    float: none !important;
    width: 100% !important;
    margin: 0 0 12px;
    padding: 9px !important;
  }

  #menu-compte > a.btn {
    flex: 1 1 170px;
    width: auto !important;
    margin: 0;
  }

  #page-compte {
    width: 100% !important;
    margin-left: 0;
  }

  #page-resa #frmReport > div:nth-of-type(n + 1):nth-of-type(-n + 6),
  #page-resa #frmReport > div:nth-of-type(n + 12):nth-of-type(-n + 16) {
    grid-column: 1 / -1;
  }

  #page-resa #frmReport > div:nth-of-type(1),
  #page-resa #frmReport > div:nth-of-type(3),
  #page-resa #frmReport > div:nth-of-type(15) {
    min-height: 0;
    padding-bottom: 7px;
    border-right: 1px solid #cfe1e7;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
  }

  #page-resa #frmReport > div:nth-of-type(2),
  #page-resa #frmReport > div:nth-of-type(4),
  #page-resa #frmReport > div:nth-of-type(16) {
    margin-top: -10px;
    border-radius: 0 0 5px 5px;
  }

  #main[action*="editentreetrt"]
    > .row2
    > .col:first-child
    > .E.form-inline:nth-of-type(n + 4):nth-of-type(-n + 8) {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 600px) {
  #page-compte > div {
    padding: 12px;
  }

  #page-compte
    #param_account
    > hr:first-of-type
    + div
    > .form-group,
  #page-compte
    #param_account
    > hr:first-of-type
    + div
    > .form-group:nth-of-type(3) {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-compte
    #param_account
    > hr:first-of-type
    + div
    > .form-group:nth-of-type(3)
    > div:nth-child(4),
  #page-compte
    #param_account
    > hr:first-of-type
    + div
    > .form-group:nth-of-type(3)
    > div:nth-child(5) {
    grid-column: 1;
  }

  #page-compte form[action*="pc=mesreservations"] input[type="submit"] {
    width: 100%;
    margin-left: 0;
  }

  #page-resa > h1.center {
    font-size: 21px;
    text-align: center;
  }

  #page-resa #frmReport > div:nth-of-type(2),
  #page-resa #frmReport > div:nth-of-type(4) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  #page-resa #frmReport > div:nth-of-type(n + 7):nth-of-type(-n + 11) {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  #page-resa #frmReport > div:nth-of-type(17) {
    bottom: 8px;
    padding: 8px;
  }

  #page-resa #frmReport > div:nth-of-type(17) .btn {
    width: 100%;
    min-width: 0;
  }

  #main[action*="editentreetrt"]
    > .row2
    > .col:first-child
    > .E.form-inline:nth-of-type(4),
  #main[action*="editentreetrt"]
    > .row2
    > .col:first-child
    > .E.form-inline:nth-of-type(5) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ================================================================
   Page de connexion — arbre pointillé cyan, version 1
   Cette surcouche est volontairement limitée à .page-login.
   Aucune autre vue de GRR n'est modifiée.
   ================================================================ */

.page-login {
  --login-arbre-pointille:
    url("/personnalisation/images/ressources/abre-hceres-pointille-cyan.png");
  --login-rose: #c4007a;
  --login-rose-fonce: #880056;
  --login-rose-clair: #fff5fb;
  --login-cyan: #0090a2;
  --login-texte: #252128;
  --login-texte-secondaire: #5f6268;

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(26px, 5vh, 54px) 16px;
  overflow-x: hidden;
  box-sizing: border-box;
  color: var(--login-texte);
  background: #fff;
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  text-align: center;
}

/* Le fichier PNG doit conserver un fond transparent.
   L'opacité est appliquée ici pour garder le formulaire lisible. */
.page-login::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  border: 0;
  background-color: transparent;
  background-image: var(--login-arbre-pointille);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 92vw auto;
  background-size: min(1180px, 92vw) auto;
  opacity: 0.26;
  pointer-events: none;
}

.page-login > * {
  position: relative;
  z-index: 1;
}

/* Zone blanche de protection autour du logo en couleurs. */
.page-login > img {
  display: block;
  width: auto;
  max-width: min(175px, 38vw);
  height: auto;
  max-height: 158px !important;
  margin: 0 auto 8px;
  padding: 13px 16px;
  box-sizing: content-box;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}

.page-login > h1 {
  width: min(100%, 900px);
  margin: 0 auto;
  color: var(--login-texte);
  font-size: clamp(31px, 2.4vw, 42px);
  font-weight: 500;
  line-height: 1.14;
  text-align: center;
  text-wrap: balance;
}

.page-login > h1::after {
  content: "";
  display: block;
  width: 88px;
  height: 5px;
  margin: 15px auto 0;
  background-image: radial-gradient(
    circle,
    var(--login-rose) 1.7px,
    transparent 1.9px
  );
  background-repeat: repeat-x;
  background-position: center;
  background-size: 12px 5px;
}

.page-login > h2 {
  display: none;
}

.page-login > p:first-of-type {
  width: min(100%, 850px);
  margin: 12px auto 0;
  color: var(--login-texte-secondaire);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}

.page-login form {
  width: 100% !important;
  margin: 19px auto 18px !important;
}

/* L'encart reste clair mais son identité fuchsia devient très visible. */
.page-login form fieldset {
  width: min(510px, 100%) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding: 26px 29px 29px !important;
  box-sizing: border-box;
  border: 3px solid var(--login-rose);
  border-radius: 5px;
  background: rgba(255, 250, 253, 0.97);
  box-shadow:
    0 16px 40px rgba(56, 32, 46, 0.14),
    0 0 0 5px rgba(196, 0, 122, 0.045);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.page-login form legend {
  display: block;
  float: left;
  width: 100%;
  max-width: none;
  margin: 0 0 13px;
  padding: 0;
  border: 0;
  color: var(--login-rose-fonce);
  background: transparent;
  font-family: "Roboto Slab", Roboto, Arial, sans-serif !important;
  font-size: 29px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.page-login form legend + * {
  clear: both;
}

.page-login form fieldset > p {
  width: min(100%, 420px);
  margin: 0 auto 20px;
  color: var(--login-texte-secondaire);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.page-login form table {
  width: 100% !important;
  margin-right: auto;
  margin-left: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.page-login form table tr {
  display: grid;
  grid-template-columns: 124px minmax(220px, 270px);
  gap: 7px 13px;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.page-login form table td {
  width: auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.page-login form table tr td:first-child {
  width: auto !important;
  color: var(--login-texte);
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-variant: normal !important;
  font-size: 13px;
  font-weight: 600;
  text-align: right !important;
  text-transform: none;
}

.page-login form table tr td:nth-child(2) {
  width: 270px !important;
  text-align: left !important;
}

.page-login form table input[type="text"],
.page-login form table input[type="password"] {
  display: block;
  width: 100% !important;
  min-height: 45px;
  padding: 9px 42px 9px 12px;
  box-sizing: border-box;
  border: 1px solid #b7abb3;
  border-radius: 4px;
  color: var(--login-texte);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(56, 32, 46, 0.04);
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  transition:
    border-color var(--hceres-transition),
    box-shadow var(--hceres-transition);
}

.page-login form table input[type="text"]:hover,
.page-login form table input[type="password"]:hover {
  border-color: #8f7f89;
}

.page-login form table input[type="text"]:focus,
.page-login form table input[type="password"]:focus {
  border-color: var(--login-cyan);
  outline: 0;
  box-shadow:
    inset 0 1px 2px rgba(56, 32, 46, 0.03),
    0 0 0 3px rgba(0, 144, 162, 0.17);
}

.page-login form table tr td:only-child,
.page-login form table tr td[colspan] {
  grid-column: 1 / -1;
  width: 100% !important;
  justify-self: center;
  text-align: center !important;
}

.page-login .btn-login {
  width: 270px !important;
  min-height: 45px;
  margin: 3px 0 0;
  padding: 9px 18px;
  border: 1px solid var(--login-rose);
  border-radius: 4px;
  color: #fff;
  background: var(--login-rose);
  box-shadow: 0 6px 15px rgba(136, 0, 86, 0.2);
  font-family: "Roboto Slab", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition:
    background-color var(--hceres-transition),
    border-color var(--hceres-transition),
    box-shadow var(--hceres-transition),
    transform var(--hceres-transition);
}

.page-login .btn-login:hover,
.page-login .btn-login:focus-visible {
  border-color: var(--login-rose-fonce);
  color: #fff;
  background: var(--login-rose-fonce);
  box-shadow: 0 9px 20px rgba(136, 0, 86, 0.27);
  transform: translateY(-1px);
}

.page-login .btn-login:active {
  box-shadow: 0 4px 10px rgba(136, 0, 86, 0.18);
  transform: translateY(0);
}

.page-login > p:last-of-type {
  margin: 0 auto;
  font-size: 0;
}

.page-login > p:last-of-type a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 7px 13px;
  box-sizing: border-box;
  border: 1px solid rgba(196, 0, 122, 0.48);
  border-radius: 4px;
  color: var(--login-rose-fonce);
  background: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.page-login > p:last-of-type a:hover,
.page-login > p:last-of-type a:focus-visible {
  border-color: var(--login-rose-fonce);
  color: #fff;
  background: var(--login-rose-fonce);
}

@media screen and (max-width: 700px) {
  .page-login {
    justify-content: flex-start;
    padding: 16px 10px 22px;
  }

  .page-login::before {
    background-position: center 120px;
    background-size: auto 82%;
    opacity: 0.2;
  }

  .page-login > img {
    max-width: min(132px, 36vw);
    max-height: 116px !important;
    margin-bottom: 5px;
    padding: 9px 12px;
  }

  .page-login > h1 {
    width: min(100%, 470px);
    font-size: clamp(27px, 7.2vw, 32px);
    line-height: 1.12;
  }

  .page-login > h1::after {
    margin-top: 11px;
  }

  .page-login > p:first-of-type {
    width: min(100%, 460px);
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.45;
  }

  .page-login form {
    margin: 14px auto !important;
  }

  .page-login form fieldset {
    width: min(450px, calc(100% - 8px)) !important;
    padding: 20px 16px 18px !important;
  }

  .page-login form legend {
    margin-bottom: 10px;
    font-size: 25px;
  }

  .page-login form fieldset > p {
    width: min(100%, 370px);
    margin-bottom: 15px;
    font-size: 12.5px;
  }

  .page-login form table tr {
    grid-template-columns: minmax(0, 330px);
    gap: 5px;
    justify-content: center;
    margin-bottom: 13px;
  }

  .page-login form table tr td:first-child {
    width: 100% !important;
    font-size: 13px;
    text-align: center !important;
  }

  .page-login form table tr td:nth-child(2) {
    width: 100% !important;
    max-width: 330px;
    justify-self: center;
    text-align: center !important;
  }

  .page-login form table tr td:only-child,
  .page-login form table tr td[colspan] {
    grid-column: 1;
  }

  .page-login .btn-login {
    width: 100% !important;
    max-width: 330px;
  }

  .page-login > p:last-of-type a {
    min-height: 38px;
    padding: 6px 11px;
    font-size: 12.5px;
  }
}

@media screen and (max-width: 600px) and (max-height: 760px) {
  .page-login {
    padding-top: 8px;
  }

  .page-login::before {
    background-position: center 90px;
    opacity: 0.17;
  }

  .page-login > img {
    max-height: 88px !important;
    margin-bottom: 2px;
    padding: 7px 10px;
  }

  .page-login > h1 {
    font-size: 25px;
  }

  .page-login > h1::after {
    margin-top: 8px;
  }

  .page-login > p:first-of-type {
    margin-top: 6px;
    font-size: 12px;
  }

  .page-login form {
    margin: 9px auto !important;
  }

  .page-login form fieldset {
    padding-top: 15px !important;
    padding-bottom: 14px !important;
  }

  .page-login form fieldset > p {
    margin-bottom: 10px;
  }

  .page-login form table tr {
    margin-bottom: 10px;
  }
}

/* Les animations sont neutralisées si l'utilisateur le demande. */
@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  body {
    background: #fff;
  }

  header,
#menuGauche2,
#menuHaut,
#voir,
#cacher {
    display: none !important;
  }

  body > section {
    padding: 0;
  }

  #planning2 {
    width: 100% !important;
    padding: 0;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  table.semaine {
    min-width: 0;
  }

  table.semaine > thead,
table.semaine > thead > tr > th,
table.semaine > thead > tr > th:first-child {
    position: static;
    box-shadow: none;
  }

  table.jour {
    width: 100% !important;
    min-width: 0;
    table-layout: fixed;
    border-spacing: 1px;
  }

  table.jour caption > div:first-child,
table.jour caption > div:last-child {
    position: static;
    width: 100%;
  }

  table.jour > thead {
    position: static;
    box-shadow: none;
  }

  table.jour > thead > tr > th {
    position: static;
  }

  table.jour > thead > tr > th,
table.jour > tbody > tr > td:not(.cell_hours):not(.cell_hours2) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  table.jour > thead > tr > td.cell_hours,
table.jour > tbody > tr > td.cell_hours,
table.jour > tbody > tr > td.cell_hours2 {
    position: static;
    width: 6% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-shadow: none;
  }
}