/* Elevora CRM — css/calendrier.css
   Le sélecteur de date du CRM (js/00i-calendrier.js), 29/09/2026, brief « Nouvelles
   fonctionnalités », partie 4.

   La référence visuelle (vidéo d'un planificateur de rendez-vous) donnait un niveau de finition :
   carte aérée, ombre douce et large, grands arrondis, pastilles à bordure fine, gris pour le
   secondaire, fondus courts. Les couleurs, la police et les rayons sont ceux du CRM : jetons de
   css/elevora.css, dans les deux thèmes, aucune couleur écrite en dur hors des icônes du champ
   (une image de fond ne lit pas une variable CSS — une icône par thème, mêmes valeurs que --text3).
   Le bleu porte (jour choisi en --accent-fill, « Aujourd'hui »), le framboise accompagne (le point
   sous le jour du jour) ; aucun trait de couleur sur un côté d'un bloc.

   Le champ reste le champ de l'écran (.fi et ses variantes) : on n'y ajoute qu'une icône à droite.
   !important là où une règle plus précise d'un écran pose `background:` en raccourci (les champs
   pointillés des fenêtres d'agenda et d'agent) ou un padding en ligne : sans lui, l'icône
   disparaissait ou passait sous le texte. */

:root{
  --elv-cal-ic-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%239896B4' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='2.2' y='3.2' width='11.6' height='10.6' rx='2.2'/%3E%3Cpath d='M2.2 6.7h11.6M5.3 1.8v2.8M10.7 1.8v2.8'/%3E%3C/svg%3E");
  --elv-cal-ic-heure:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%239896B4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.9'/%3E%3Cpath d='M8 4.8V8l2.2 1.5'/%3E%3C/svg%3E");
}
body.light{
  --elv-cal-ic-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23626279' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='2.2' y='3.2' width='11.6' height='10.6' rx='2.2'/%3E%3Cpath d='M2.2 6.7h11.6M5.3 1.8v2.8M10.7 1.8v2.8'/%3E%3C/svg%3E");
  --elv-cal-ic-heure:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23626279' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.9'/%3E%3Cpath d='M8 4.8V8l2.2 1.5'/%3E%3C/svg%3E");
}

/* ── Le champ ─────────────────────────────────────────────────────────────────────────────── */
input.elv-cal{
  background-image:var(--elv-cal-ic-date)!important;background-repeat:no-repeat!important;
  background-position:right 10px center!important;background-size:16px 16px!important;
  padding-right:34px!important;font-variant-numeric:tabular-nums;text-overflow:ellipsis}
input.elv-cal--heure{background-image:var(--elv-cal-ic-heure)!important}
input.elv-cal:disabled,input.elv-cal[readonly]{cursor:default}
input.elv-cal[aria-expanded="true"]{border-color:var(--accent)}
input.elv-cal--erreur{border-color:var(--red)!important;box-shadow:0 0 0 3px var(--red-bg)}

/* ── La fenêtre ───────────────────────────────────────────────────────────────────────────── */
/* Ouverte en popover (couche supérieure du navigateur) : on neutralise le cadre que le
   navigateur donne à [popover] (inset:0 ; margin:auto ; bordure ; fond Canvas). */
.elv-cal-fen{position:fixed;inset:auto;margin:0;z-index:10050;box-sizing:border-box;width:300px;max-width:calc(100vw - 16px);
  padding:12px 12px 10px;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:var(--rl);
  box-shadow:0 24px 56px -18px rgba(0,0,0,.6),0 6px 16px -8px rgba(0,0,0,.4);
  font:400 13px/1.4 var(--font);text-align:left;overflow:visible;
  transform-origin:top left;animation:elv-cal-entree .16s cubic-bezier(.2,.8,.3,1) both}
body.light .elv-cal-fen{box-shadow:0 24px 56px -22px rgba(26,26,46,.30),0 6px 16px -8px rgba(26,26,46,.12)}
.elv-cal-fen *{box-sizing:border-box}
.elv-cal-fen--dateheure{width:424px}
.elv-cal-fen--heure{width:168px}
.elv-cal-fen--dessus{transform-origin:bottom left;animation-name:elv-cal-entree-haut}
@keyframes elv-cal-entree{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes elv-cal-entree-haut{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes elv-cal-fondu{from{opacity:0}to{opacity:1}}
@keyframes elv-cal-vue{from{opacity:.2}to{opacity:1}}

/* En-tête : mois et année au milieu (le mois en texte, l'année en secondaire), flèches en
   pastilles rondes à bordure fine. */
.elv-cal-tete{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 8px}
.elv-cal-nav{flex-shrink:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;
  border:1px solid var(--border2);border-radius:50%;background:transparent;color:var(--text2);cursor:pointer;
  transition:background-color .12s,color .12s,border-color .12s}
.elv-cal-nav:hover{background:var(--bg3);color:var(--text)}
.elv-cal-nav:disabled{opacity:.35;cursor:default;background:transparent}
.elv-cal-titre{flex:1 1 auto;min-width:0;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 10px;
  border:0;border-radius:var(--rs);background:transparent;color:var(--text);font:600 14px var(--font);cursor:pointer;white-space:nowrap;
  transition:background-color .12s}
.elv-cal-titre>span:first-child{text-transform:capitalize}
.elv-cal-titre-a{color:var(--text3);font-weight:500}
.elv-cal-titre svg{color:var(--text3);flex-shrink:0}
.elv-cal-titre:hover{background:var(--bg3)}
.elv-cal-titre--fixe{cursor:default}
.elv-cal-titre--fixe:hover{background:transparent}

/* La grille des jours : lundi en premier, 6 semaines (même hauteur d'un mois à l'autre). Pas
   d'espace entre les colonnes : la plage « du … au … » forme une bande continue. */
.elv-cal-grille{display:flex;flex-direction:column;row-gap:2px}
.elv-cal-ligne{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.elv-cal-js{height:24px;display:flex;align-items:center;justify-content:center;font:600 11px var(--font);letter-spacing:.04em;color:var(--text3)}
.elv-cal-jour{position:relative;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--rs);
  font:500 13px var(--font);font-variant-numeric:tabular-nums;color:var(--text);cursor:pointer;outline:none;user-select:none;
  transition:background-color .12s,color .12s}
.elv-cal-jour:hover{background:var(--bg3)}
.elv-cal-jour.is-dehors{color:var(--text3)}
/* Aujourd'hui : chiffre en bleu et gras, point framboise dessous — distinct du jour choisi
   (aplat bleu) et du survol (fond gris). Le sens est aussi dans le nom lu (« …, aujourd'hui »). */
.elv-cal-jour.is-auj{color:var(--accent);font-weight:700}
.elv-cal-jour.is-auj::after{content:'';position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--rose)}
.elv-cal-jour.is-plage{background:var(--glow);border-radius:0}
.elv-cal-jour.is-plage-debut{border-top-left-radius:var(--rs);border-bottom-left-radius:var(--rs)}
.elv-cal-jour.is-plage-fin{border-top-right-radius:var(--rs);border-bottom-right-radius:var(--rs)}
.elv-cal-jour.is-borne:not(.is-sel){box-shadow:inset 0 0 0 1.5px var(--accent)}
.elv-cal-jour.is-sel,.elv-cal-jour.is-sel:hover{background:var(--accent-fill);color:var(--on-fill,#fff);font-weight:700}
.elv-cal-jour.is-sel.is-auj::after{background:var(--on-fill,#fff)}
/* Jour hors des dates permises (min / max) : barré, estompé, sans survol ni choix. */
.elv-cal-jour.is-off{color:var(--text3);opacity:.5;text-decoration:line-through;text-decoration-thickness:1px;cursor:not-allowed}
.elv-cal-jour.is-off:hover{background:transparent}
.elv-cal-jour:focus-visible{box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--accent);z-index:1}

/* Mois et années : 3 colonnes, la hauteur de la grille des jours (rien ne saute en changeant de vue). */
.elv-cal-choix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:6px;min-height:242px;padding:2px 0}
.elv-cal-case{min-height:44px;padding:0 4px;border:1px solid var(--border);border-radius:var(--r);background:transparent;color:var(--text);
  font:500 13px var(--font);cursor:pointer;transition:background-color .12s,border-color .12s}
.elv-cal-case:hover{background:var(--bg3);border-color:var(--border2)}
.elv-cal-case.is-auj{color:var(--accent);font-weight:700}
.elv-cal-case.is-sel,.elv-cal-case.is-sel:hover{background:var(--accent-fill);border-color:transparent;color:var(--on-fill,#fff);font-weight:700}
.elv-cal-case:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}

/* Heures : une colonne de pastilles au pas de 15 minutes, la saisie libre reste dans le champ. */
.elv-cal-corps{display:flex;gap:12px}
.elv-cal-jours-zone{flex:1 1 auto;min-width:0}
.elv-cal-heures{flex:0 0 104px;min-width:0;display:flex;flex-direction:column}
.elv-cal-fen--heure .elv-cal-heures{flex:1 1 auto}
.elv-cal-heures-t{height:32px;margin:0 0 8px;display:flex;align-items:center;justify-content:center;font:600 13px var(--font);color:var(--text2);white-space:nowrap}
.elv-cal-heures-liste{position:relative;list-style:none;margin:0;padding:2px;max-height:266px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px}
.elv-cal-fen--heure .elv-cal-heures-liste{max-height:236px}
.elv-cal-heure{flex-shrink:0;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--rs);
  font:500 13px var(--font);font-variant-numeric:tabular-nums;color:var(--text);cursor:pointer;outline:none;transition:background-color .12s}
.elv-cal-heure:hover{background:var(--bg3)}
.elv-cal-heure.is-sel,.elv-cal-heure.is-sel:hover{background:var(--accent-fill);color:var(--on-fill,#fff);font-weight:700}
.elv-cal-heure.is-off{color:var(--text3);opacity:.5;text-decoration:line-through;cursor:not-allowed}
.elv-cal-heure.is-off:hover{background:transparent}
.elv-cal-heure:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}

/* Pied : Effacer à gauche (champ facultatif seulement), Aujourd'hui à droite. */
.elv-cal-pied{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.elv-cal-pied-d{display:flex;align-items:center;gap:4px}
.elv-cal-lien{height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;border:0;border-radius:var(--rs);
  background:transparent;color:var(--text2);font:500 13px var(--font);cursor:pointer;white-space:nowrap;transition:background-color .12s,color .12s}
.elv-cal-lien:hover{background:var(--bg3);color:var(--text)}
.elv-cal-lien--fort{color:var(--accent);font-weight:600}
.elv-cal-lien:disabled{opacity:.4;cursor:default;background:transparent}
.elv-cal-fermer{display:none}
.elv-cal-nav:focus-visible,.elv-cal-titre:focus-visible,.elv-cal-case:focus-visible,.elv-cal-lien:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Changement de mois : un fondu court de la grille. */
.elv-cal-vue--fondu{animation:elv-cal-vue .14s ease-out both}

/* Secours sans popover : même place, au-dessus de tout. */
.elv-cal-fen--fixe{position:fixed}

/* ── Écrans tactiles : cibles de 44 px ───────────────────────────────────────────────────── */
@media (pointer:coarse){
  .elv-cal-fen{width:340px}
  .elv-cal-fen--dateheure{width:464px}
  .elv-cal-fen--heure{width:200px}
  .elv-cal-jour,.elv-cal-heure{height:44px}
  .elv-cal-nav{width:44px;height:44px}
  .elv-cal-titre,.elv-cal-heures-t,.elv-cal-lien{height:44px}
  .elv-cal-lien{padding:0 14px}
  .elv-cal-choix{min-height:290px}
}

/* ── Téléphone : une feuille en bas de l'écran ───────────────────────────────────────────── */
/* 4 px de marge de côté : à 320 px, sept colonnes de 44 px tiennent encore. */
.elv-cal-fen--feuille{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;max-width:none;
  max-height:88vh;overflow-y:auto;overscroll-behavior:contain;padding:12px 4px calc(10px + env(safe-area-inset-bottom,0px));
  border-radius:var(--rl) var(--rl) 0 0;border-bottom:0;transform-origin:bottom center;animation-name:elv-cal-feuille}
@keyframes elv-cal-feuille{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.elv-cal-libelle{display:none}
.elv-cal-fen--feuille .elv-cal-libelle{display:block;margin:0 0 6px;padding:0 8px;font:600 11px/1.4 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.elv-cal-fen--feuille .elv-cal-tete,.elv-cal-fen--feuille .elv-cal-pied{padding-left:8px;padding-right:8px}
.elv-cal-fen--feuille .elv-cal-jour,.elv-cal-fen--feuille .elv-cal-heure{height:44px}
.elv-cal-fen--feuille .elv-cal-nav{width:44px;height:44px}
.elv-cal-fen--feuille .elv-cal-titre,.elv-cal-fen--feuille .elv-cal-lien,.elv-cal-fen--feuille .elv-cal-heures-t{height:44px}
.elv-cal-fen--feuille .elv-cal-fermer{display:inline-flex}
.elv-cal-fen--feuille .elv-cal-corps{flex-direction:column;gap:6px}
.elv-cal-fen--feuille .elv-cal-choix{min-height:290px;padding:2px 8px}
.elv-cal-fen--feuille.elv-cal-fen--dateheure .elv-cal-heures{flex:1 1 auto;padding:0 8px}
.elv-cal-fen--feuille.elv-cal-fen--dateheure .elv-cal-heures-t{justify-content:flex-start;height:32px;margin:0 0 4px}
.elv-cal-fen--feuille.elv-cal-fen--dateheure .elv-cal-heures-liste{flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none}
.elv-cal-fen--feuille.elv-cal-fen--dateheure .elv-cal-heure{flex:0 0 72px}
.elv-cal-fen--feuille.elv-cal-fen--heure .elv-cal-heures{padding:0 8px}
.elv-cal-fen--feuille.elv-cal-fen--heure .elv-cal-heures-liste{max-height:48vh}

/* ── Mouvement réduit ─────────────────────────────────────────────────────────────────────── */
/* Paramètres → Affichage → « Sobres » : fondus seuls ; « Désactivées » ou réglage du système :
   rien ne bouge. */
.elv-cal--sobre,.elv-cal--sobre.elv-cal-fen--dessus,.elv-cal--sobre.elv-cal-fen--feuille{animation-name:elv-cal-fondu}
.elv-cal--immobile,.elv-cal--immobile *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .elv-cal-fen,.elv-cal-fen *{animation:none!important;transition:none!important}
}