/* Reloge - calendrier a la nuitee (includes/calendrier-nuitee.php, assets/js/reloge-calendrier.js).
   Le meme composant sur la fiche d'un logement, dans l'onglet Calendrier du proprietaire et dans le
   widget pose sur son site : ses couleurs sont des variables, et la couleur d'accent du widget vient
   du reglage choisi par le proprietaire (--rlc-couleur). Chaque case peint deux moities en diagonale :
   le matin (nuit de la veille, --rlc-am) et l'apres-midi (sa nuit, --rlc-pm). */

.reloge-calnuit,
.rlc-widget,
.rlc-config {
  --rlc-accent: var(--rlc-couleur, #1c3f5e);
  --rlc-accent-texte: #fff;
  --rlc-accent-doux: color-mix(in srgb, var(--rlc-accent) 16%, #fff);
  --rlc-encre: #1f2733;
  --rlc-gris: #5b6675;
  --rlc-bord: #e3e7ec;
  /* Le libre est transparent, le pris est colore : une reservation se lit comme un bloc de
     couleur, biseaute le jour d'arrivee (apres-midi) et le jour de depart (matin). Fred, 2026-09-30. */
  --rlc-libre: transparent;
  --rlc-libre-texte: var(--rlc-encre);
  --rlc-pris: #f4d2cd;
  --rlc-pris-texte: #8f3a31;
  --rlc-attente: #fde8ad;
  --rlc-attente-texte: #7a4b00;
  --rlc-inconnu: #f1f3f5;
  --rlc-reserve: #cddff4;
  --rlc-reserve-texte: #1c3f5e;
  --rlc-importe: #ffd6b8;
  --rlc-importe-texte: #8a3d00;
  --rlc-ferme: #d9dde3;
  --rlc-ferme-texte: #3f4753;
  --rlc-prix: #2e7d4f;
  --rlc-alerte: #8a3d00;
  --rlc-rayon: 6px;
  --rlc-case: 2.9rem;
}

/* Dans l'espace du proprietaire, le choix prend la couleur des cases cochees. */
.reloge-calnuit--proprietaire { --rlc-accent: var(--esp-coche, #1c3f5e); }

.reloge-calnuit { margin: 1.6rem 0; color: var(--rlc-encre); scroll-margin-top: 6rem; font-variant-numeric: tabular-nums; }
.reloge-calnuit--proprietaire { margin: .5rem 0 1.5rem; }
.reloge-calnuit .rlc-titre { margin: 0 0 .5rem; }
.reloge-calnuit .rlc-note { margin: 0 0 .8rem; color: var(--rlc-gris); font-size: .92rem; }

/* ── Pages de mois ─────────────────────────────────────────────────────────── */
.reloge-calnuit .rlc-nav { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 0 0 .5rem; }
.reloge-calnuit .rlc-nav[hidden] { display: none; }
.reloge-calnuit .rlc-nav button {
  appearance: none; -webkit-appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; min-width: 0; margin: 0; padding: 0; border: 1px solid var(--rlc-bord); border-radius: 999px;
  background: #fff; color: var(--rlc-encre); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: none;
}
.reloge-calnuit .rlc-nav button:hover:not(:disabled) { border-color: var(--rlc-accent); color: var(--rlc-accent); background: #fff; }
.reloge-calnuit .rlc-nav button:focus-visible { outline: 2px solid var(--rlc-accent); outline-offset: 2px; }
.reloge-calnuit .rlc-nav button:disabled { opacity: .35; cursor: default; }
.reloge-calnuit .rlc-periode { flex: 1; text-align: center; font-weight: 600; font-size: .95rem; }

.reloge-calnuit .rlc-mois { display: grid; gap: 1.1rem 1.6rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.reloge-calnuit.est-pagine .rlc-mois { grid-template-columns: repeat(var(--rlc-colonnes, 1), minmax(0, 1fr)); }
.reloge-calnuit .rlc-m[hidden] { display: none; }

/* ── La grille d'un mois ────────────────────────────────────────────────────── */
.reloge-calnuit .rlc-grille { width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 3px; table-layout: fixed; background: none; }
.reloge-calnuit .rlc-grille caption { caption-side: top; text-align: left; font-weight: 700; font-size: 1rem; color: var(--rlc-encre); padding: 0 0 .35rem 3px; }
.reloge-calnuit .rlc-grille thead th { border: 0; background: none; padding: 0 0 .15rem; text-align: center; font-size: .72rem; font-weight: 600; color: var(--rlc-gris); text-transform: none; }
.reloge-calnuit .rlc-grille abbr { text-decoration: none; border: 0; cursor: default; }
.reloge-calnuit .rlc-grille tbody tr,
.reloge-calnuit .rlc-grille tbody tr:nth-child(odd),
.reloge-calnuit .rlc-grille tbody tr:nth-child(even) { background: none; }
.reloge-calnuit .rlc-grille td {
  position: relative; height: var(--rlc-case); padding: 0; border: 0; border-radius: var(--rlc-rayon);
  text-align: center; vertical-align: middle; font-size: .85rem; line-height: 1.1;
}
.reloge-calnuit .rlc-grille td.rlc-vide { background: none; }

/* Chaque case : le matin en haut a gauche, l'apres-midi en bas a droite. Sans demi-journee, les
   deux moities ont la meme couleur. Les couleurs viennent des classes d'etat (--rlc-pm, --rlc-am) :
   aucune valeur n'est posee ici, sans quoi cette regle, plus precise, les ecraserait. */
.reloge-calnuit .rlc-grille td.rlc-j,
.reloge-calnuit .rlc-pastille {
  background: linear-gradient(135deg, var(--rlc-am, var(--rlc-pm, var(--rlc-inconnu))) 0 50%, var(--rlc-pm, var(--rlc-inconnu)) 50% 100%);
}
.reloge-calnuit .rlc-l { --rlc-pm: var(--rlc-libre); color: var(--rlc-libre-texte); font-weight: 600; }
.reloge-calnuit .rlc-r { --rlc-pm: var(--rlc-pris); color: var(--rlc-pris-texte); font-weight: 500; }
.reloge-calnuit .rlc-r .rlc-n { text-decoration: line-through; }
.reloge-calnuit .rlc-a { --rlc-pm: var(--rlc-attente); color: var(--rlc-attente-texte); }
.reloge-calnuit .rlc-i { --rlc-pm: var(--rlc-inconnu); color: var(--rlc-gris); box-shadow: inset 0 0 0 1px var(--rlc-bord); }
.reloge-calnuit .rlc-b { --rlc-pm: var(--rlc-reserve); color: var(--rlc-reserve-texte); font-weight: 600; }
.reloge-calnuit .rlc-x { --rlc-pm: var(--rlc-importe); color: var(--rlc-importe-texte); }
.reloge-calnuit .rlc-f { --rlc-pm: var(--rlc-ferme); color: var(--rlc-ferme-texte); }
.reloge-calnuit .rlc-am-l { --rlc-am: var(--rlc-libre); }
.reloge-calnuit .rlc-am-r { --rlc-am: var(--rlc-pris); }
.reloge-calnuit .rlc-am-a { --rlc-am: var(--rlc-attente); }
.reloge-calnuit .rlc-am-i { --rlc-am: var(--rlc-inconnu); }
.reloge-calnuit .rlc-am-b { --rlc-am: var(--rlc-reserve); }
.reloge-calnuit .rlc-am-x { --rlc-am: var(--rlc-importe); }
.reloge-calnuit .rlc-am-f { --rlc-am: var(--rlc-ferme); }
/* Jour de bascule entre deux plages consecutives : les deux moities, separees par la diagonale,
   meme quand elles ont la meme couleur. */
.reloge-calnuit .rlc-grille td.rlc-bascule,
.reloge-calnuit .rlc-pastille.rlc-bascule {
  background: linear-gradient(135deg, var(--rlc-am, var(--rlc-pm, var(--rlc-inconnu))) 0 calc(50% - 1.5px),
    var(--rlc-separation, #fff) calc(50% - 1.5px) calc(50% + 1.5px), var(--rlc-pm, var(--rlc-inconnu)) calc(50% + 1.5px) 100%);
}
.reloge-calnuit .rlc-grille td.rlc-passe { background: none; color: #c4cad2; font-weight: 400; }
/* Chez le proprietaire : la plage montree apres un clic (reservation, fermeture...). */
.reloge-calnuit .rlc-grille td.rlc-plage { box-shadow: inset 0 0 0 2px var(--rlc-accent); }
.reloge-calnuit .rlc-grille td.rlc-auj { box-shadow: inset 0 0 0 2px var(--rlc-accent); }

.reloge-calnuit .rlc-n { display: block; font-size: .9rem; }
.reloge-calnuit .rlc-p { display: block; margin-top: 2px; font-size: .66rem; font-weight: 500; letter-spacing: -.01em; color: var(--rlc-prix); white-space: nowrap; }
.reloge-calnuit .rlc-q { display: block; margin-top: 1px; font-size: .62rem; font-weight: 600; color: var(--rlc-encre); opacity: .75; white-space: nowrap; }
.reloge-calnuit .rlc-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Les jours deviennent des boutons quand on choisit ses dates ───────────── */
.reloge-calnuit .rlc-grille td > .rlc-bouton-jour {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-height: var(--rlc-case); border-radius: var(--rlc-rayon); cursor: pointer; color: inherit; font: inherit;
}
.reloge-calnuit .rlc-grille td > .rlc-bouton-jour:focus-visible { outline: 2px solid var(--rlc-accent); outline-offset: 1px; }
.reloge-calnuit .rlc-grille td.rlc-l > .rlc-bouton-jour:hover,
.reloge-calnuit .rlc-grille td.rlc-choix > .rlc-bouton-jour:hover { box-shadow: inset 0 0 0 2px var(--rlc-accent); }
.reloge-calnuit .rlc-grille td.rlc-r > .rlc-bouton-jour,
.reloge-calnuit .rlc-grille td.rlc-i > .rlc-bouton-jour { cursor: default; }

/* Le sejour choisi : l'apres-midi du jour d'arrivee, les nuits, le matin du jour de depart. */
.reloge-calnuit .rlc-grille td.rlc-sel { --rlc-am: var(--rlc-accent); --rlc-pm: var(--rlc-accent); color: var(--rlc-accent-texte); }
.reloge-calnuit .rlc-grille td.rlc-sel .rlc-p { color: inherit; opacity: .85; }
.reloge-calnuit .rlc-grille td.rlc-sel-debut { --rlc-pm: var(--rlc-accent); }
.reloge-calnuit .rlc-grille td.rlc-sel-debut:not(.rlc-demi) { --rlc-am: var(--rlc-libre); }
.reloge-calnuit--proprietaire .rlc-grille td.rlc-sel-debut:not(.rlc-demi) { --rlc-am: var(--rlc-libre); }
.reloge-calnuit .rlc-grille td.rlc-sel-fin { --rlc-am: var(--rlc-accent); }
.reloge-calnuit .rlc-grille td.rlc-sel-debut .rlc-n,
.reloge-calnuit .rlc-grille td.rlc-sel-fin .rlc-n { background: rgba(255, 255, 255, .92); color: var(--rlc-encre); border-radius: 999px; padding: 0 .38em; text-decoration: none; }
.reloge-calnuit .rlc-grille td.rlc-sel-debut .rlc-p,
.reloge-calnuit .rlc-grille td.rlc-sel-fin .rlc-p { visibility: hidden; }
/* Avant le depart : les departs possibles, l'apercu du sejour sous la souris, le reste en retrait. */
.reloge-calnuit .rlc-grille td.rlc-choix { box-shadow: inset 0 0 0 1px var(--rlc-accent); }
.reloge-calnuit .rlc-grille td.rlc-apercu { --rlc-am: var(--rlc-accent-doux); --rlc-pm: var(--rlc-accent-doux); color: var(--rlc-encre); }
.reloge-calnuit .rlc-grille td.rlc-hors { opacity: .45; }

/* ── Resume du choix ────────────────────────────────────────────────────────── */
.reloge-calnuit .rlc-resume {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
  margin: .9rem 0 0; padding: .75rem 1rem; border: 1px solid var(--rlc-bord); border-radius: 10px; background: #fff;
}
.reloge-calnuit .rlc-resume:empty { display: none; }
.reloge-calnuit .rlc-resume__texte { flex: 1 1 16rem; margin: 0; color: var(--rlc-encre); font-size: .95rem; }
.reloge-calnuit .rlc-resume__alerte { display: block; margin-top: .3rem; color: var(--rlc-alerte); font-size: .88rem; }
.reloge-calnuit .rlc-resume__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }

.rlc-bouton,
.reloge-calnuit .rlc-bouton {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; margin: 0;
  padding: .62rem 1.1rem; border: 0; border-radius: 8px; background: var(--rlc-accent); color: var(--rlc-accent-texte);
  font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.rlc-bouton:hover,
.rlc-bouton:focus { color: var(--rlc-accent-texte); text-decoration: none; filter: brightness(1.1); }
.rlc-bouton:focus-visible { outline: 2px solid var(--rlc-accent); outline-offset: 2px; }
.reloge-calnuit .rlc-bouton--second { background: #fff; color: var(--rlc-accent); box-shadow: inset 0 0 0 1px var(--rlc-accent); }
.reloge-calnuit .rlc-bouton--second:hover { color: var(--rlc-accent); filter: none; background: var(--rlc-accent-doux); }
.reloge-calnuit .rlc-lien {
  appearance: none; margin: 0; padding: .3rem .1rem; border: 0; background: none; box-shadow: none;
  color: var(--rlc-gris); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer;
}
.reloge-calnuit .rlc-lien:hover { color: var(--rlc-encre); background: none; }

/* ── Legende et regles ──────────────────────────────────────────────────────── */
.reloge-calnuit .rlc-legende { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .8rem 0 0; padding: 0; font-size: .82rem; color: var(--rlc-gris); }
.reloge-calnuit .rlc-legende li { display: flex; align-items: center; gap: .45rem; margin: 0; padding: 0; }
.reloge-calnuit .rlc-pastille { display: inline-block; flex: none; width: 1.05rem; height: 1.05rem; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(16, 30, 48, .22); }
.reloge-calnuit .rlc-pastille--prix { width: auto; height: auto; background: none; box-shadow: none; color: var(--rlc-prix); font-size: .75rem; font-weight: 600; }
.reloge-calnuit .rlc-regles { margin: .6rem 0 0; font-size: .82rem; color: var(--rlc-gris); }

@media (max-width: 480px) {
  .reloge-calnuit, .rlc-widget { --rlc-case: 2.7rem; }
  .reloge-calnuit .rlc-grille { border-spacing: 2px; }
  .reloge-calnuit .rlc-p { font-size: .6rem; }
}

/* ── Le widget, seul dans sa page ───────────────────────────────────────────── */
body.rlc-widget {
  margin: 0; background: #fff; color: var(--rlc-encre);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
body.rlc-widget--transparent { background: transparent; }
.rlc-widget__corps { box-sizing: border-box; max-width: 100%; padding: 12px 12px 8px; }
.rlc-widget .reloge-calnuit { margin: 0; }
.rlc-widget__nom { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 700; }
.rlc-widget__nom a { color: inherit; text-decoration: none; }
.rlc-widget__nom a:hover { text-decoration: underline; }
.rlc-widget__nom span { margin-left: .35rem; color: var(--rlc-gris); font-size: .9rem; font-weight: 400; }
.rlc-widget__message { margin: .4rem 0; color: var(--rlc-gris); }
.rlc-widget__action { margin: .8rem 0 0; }
.rlc-widget__mention { margin: .8rem 0 0; font-size: .75rem; text-align: right; }
.rlc-widget__mention a { color: var(--rlc-gris); }

/* ── L'onglet Calendrier du proprietaire : liens a donner, configurateur du widget ── */
.reloge-liens-calendrier code.reloge-lien-ical { word-break: break-all; font-size: .78rem; }
.reloge-lecture { font-size: .85rem; }
.reloge-lecture--ok { color: #1d5e36; }
.reloge-lecture--ancien { color: #8a3d00; }
.reloge-lecture--jamais { color: #5b6675; }

.rlc-config { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 1.2rem 1.6rem; align-items: start; margin: .8rem 0 1.8rem; }
.rlc-config .rlc-config__reglages { max-width: none; margin: 0; }
.rlc-config__reglages .reloge-form-ligne { display: flex; flex-wrap: wrap; gap: .8rem; }
.rlc-config__reglages .reloge-form-ligne label { flex: 1 1 7rem; }
.rlc-config__reglages input[type="color"] { width: 3.2rem; height: 2.4rem; padding: 2px; }
.rlc-config__apercu { min-width: 0; }
.rlc-config__apercu iframe { display: block; box-sizing: border-box; width: 100%; min-height: 420px; border: 1px solid var(--rlc-bord); border-radius: 10px; background: #fff; }
.rlc-config__code { grid-column: 1 / -1; }
.rlc-config__code label { display: block; margin: 0 0 .35rem; font-weight: 600; }
.rlc-config .rlc-config__texte { box-sizing: border-box; width: 100%; min-height: 7.5rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.45; }
.rlc-config .rlc-config__cadre .rlc-config__texte { min-height: 5.5rem; }
.rlc-config__copier { margin-top: .6rem; }
.rlc-config__cadre { margin-top: .8rem; }
.rlc-config__cadre summary { cursor: pointer; color: var(--rlc-gris); }
.rlc-config__manques { margin: .6rem 0 1rem; padding: .7rem 1rem; border-left: 3px solid var(--esp-alerte, #fd6905); background: #fff; }
.rlc-config__manques p { margin: 0 0 .3rem; }
.rlc-config__manques ul { margin: 0; padding-left: 1.2rem; }
@media (max-width: 900px) {
  .rlc-config { grid-template-columns: minmax(0, 1fr); }
}

/* Changement du seul depart (barre de recherche) : l'ancienne periode reste visible a 60 %, et ce
   que survole la souris s'affiche en pleine intensite, comme la selection qu'il deviendra. */
.reloge-calnuit.rlc-modif .rlc-grille td.rlc-ancien:not(.rlc-apercu) { --rlc-am: var(--rlc-accent); --rlc-pm: var(--rlc-accent); color: var(--rlc-accent-texte); opacity: .6; }
.reloge-calnuit.rlc-modif .rlc-grille td.rlc-ancien-fin:not(.rlc-apercu) { --rlc-am: var(--rlc-accent); opacity: .6; }
.reloge-calnuit.rlc-modif .rlc-grille td.rlc-apercu { --rlc-am: var(--rlc-accent); --rlc-pm: var(--rlc-accent); color: var(--rlc-accent-texte); opacity: 1; }

/* Apercu sous la souris : le jour de depart n'est pris que le matin, en diagonale, comme le sejour
   choisi ; son numero dans la pastille blanche, comme le jour d'arrivee (Fred, 2026-10-02). */
.reloge-calnuit .rlc-grille td.rlc-apercu-fin { --rlc-am: var(--rlc-accent-doux); color: var(--rlc-encre); }
.reloge-calnuit.rlc-modif .rlc-grille td.rlc-apercu-fin.rlc-apercu-fin { --rlc-am: var(--rlc-accent); opacity: 1; }
.reloge-calnuit .rlc-grille td.rlc-apercu-fin .rlc-p { visibility: hidden; }
/* La pastille du numero (arrivee, depart, depart survole) : marges egales en haut et en bas. */
.reloge-calnuit .rlc-grille td.rlc-sel-debut .rlc-n,
.reloge-calnuit .rlc-grille td.rlc-sel-fin .rlc-n,
.reloge-calnuit .rlc-grille td.rlc-apercu-fin .rlc-n { display: inline-block; padding: .14em .45em; line-height: 1.15;
  background: rgba(255, 255, 255, .92); color: var(--rlc-encre); border-radius: 999px; text-decoration: none; }
/* Modification des dates : pendant l'apercu, l'ancien sejour ne se peint plus par-dessus. Le jour de
   depart survole n'a que son matin pris : la diagonale ferme la derniere nuit. */
.reloge-calnuit.rlc-modif.rlc-en-apercu .rlc-grille td.rlc-ancien:not(.rlc-apercu),
.reloge-calnuit.rlc-modif.rlc-en-apercu .rlc-grille td.rlc-ancien-fin:not(.rlc-apercu) {
  --rlc-am: var(--rlc-libre); --rlc-pm: var(--rlc-libre); color: var(--rlc-encre); opacity: 1; }
.reloge-calnuit.rlc-modif.rlc-en-apercu .rlc-grille td.rlc-apercu-fin.rlc-apercu-fin { --rlc-am: var(--rlc-accent); color: var(--rlc-encre); }