@charset "UTF-8";

/* Calendrier d'epandage 12 mois (annee agricole juil -> juin).
   Reproduit le look de la maquette site-nitrates-maquette/index.html. */

/* ─── Palette unique (maquette #130) ─────────────────────────────────────
   UN seul couple `fill` (fond pale de zone) + `ink` (bordure, tick, label,
   puce de legende, badge) par famille. Tout le reste du fichier doit
   reutiliser CES variables — interdiction d'introduire un 4e rouge / orange
   / vert ailleurs.

   Valeurs issues de la maquette palette (#130) :
     Autorise          fond #c3fad5  contour #4b9f6c (green-emeraude)
     Interdit          fond #fddede  contour #f95a5c (red-marianne)
     Sous conditions   fond #fddede  contour #fa7a35 (orange-terre-battue)
   Note : le sous-condition partage le MEME fond rouge que l'interdit ; il
   s'en distingue par les hachures orange (toujours presentes, cf. plus bas)
   et par sa bordure orange. Indispensable pour les malvoyants (texture +
   teinte de bord, pas seulement la couleur de fond). */
.calendrier-epandage,
.calc-cal {
  --cal-rouge-fill: #fddede;
  --cal-rouge-ink: #f95a5c;

  /* Sous-condition : fond = rouge (maquette), seul l'ink reste orange. */
  --cal-orange-fill: #fddede;
  --cal-orange-ink: #fa7a35;
  --cal-vert-fill: #c3fad5;
  --cal-vert-ink: #4b9f6c;
}

.calendrier-epandage {
  width: 100%;
  margin: 1.5rem 0;
}

.calendrier-epandage__label {
  margin-bottom: 0.75rem;
  font-weight: 700;
  font-size: 1rem;
}

.calendrier-epandage__months {
  display: flex;
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}

.calendrier-epandage__months span {
  flex: 1;
  text-align: center;
}

.calendrier-epandage__bar {
  position: relative;
  height: 46px;
  border-radius: 8px;

  /* Clip les zones d'overlay aux coins arrondis (sinon les segments qui
     touchent les bords gauche/droit debordent visuellement). */
  overflow: hidden;
}

/* Bordure remplacee par un trait interne via box-shadow inset : ca evite
   le liseret de fond visible quand un overlay touche le bord (le bord
   du bar ne mange pas 1px a l'interieur). */
.calendrier-epandage--vert .calendrier-epandage__bar {
  background: var(--cal-vert-fill);
  box-shadow: inset 0 0 0 1px var(--cal-vert-ink);
}

.calendrier-epandage--gris .calendrier-epandage__bar {
  background: #eaeaea;
  box-shadow: inset 0 0 0 1px #b8b8b8;
}

.calendrier-epandage--orange .calendrier-epandage__bar {
  background: var(--cal-orange-fill);
  box-shadow: inset 0 0 0 1px var(--cal-orange-ink);
}

.calendrier-epandage__zone {
  position: absolute;
  top: 0;
  bottom: 0;
}

.calendrier-epandage__zone--rouge {
  background: var(--cal-rouge-fill);

  /* Cadre complet (maquette #130) : la zone est cernee sur ses 4 cotes.
     Les bordures top/bottom manquaient -> le segment n'etait pas "encadre"
     comme dans la maquette. */
  border: 1px solid var(--cal-rouge-ink);

  /* Interdiction = fond du regime de base, doit rester derriere les zones
     d'autorisation sous condition (cf. #88). */
  z-index: 0;
}

.calendrier-epandage__zone--orange {
  background: var(--cal-orange-fill);
  border: 1px solid var(--cal-orange-ink);

  /* Sous-condition TOUJOURS hachure (maquette #130) : meme fond rouge que
     l'interdit, distingue par des hachures orange. La texture (et non la
     seule couleur) porte l'info -> lisible pour les malvoyants. Le marqueur
     `--flottant` (borne phenologique) n'est plus le seul a hachurer. */
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 5px,
    var(--cal-orange-ink) 5px,
    var(--cal-orange-ink) 10px
  );

  /* Autorisation sous condition = derogation locale qui doit etre visible
     par-dessus l'interdiction de base, peu importe l'ordre DOM (#88). */
  z-index: 1;
}

/* Pas de bordure laterale de zone (dynamique ET statique, #132/#134). Chaque
   frontiere est materialisee par l'unique tic de la borne, qui traverse toute
   la barre (cf. .period-date::before plein-hauteur ci-dessous) -> un seul trait
   par frontiere, ligne continue parfaitement alignee par construction. Avant,
   le statique gardait ses bordures laterales + un tic court s'arretant sous la
   barre : deux objets distincts, jamais pile alignes (decalage 1px visible).
   On garde les bordures top/bottom (maquette #130) pour encadrer la zone. */
.calendrier-epandage__zone--rouge,
.calendrier-epandage__zone--orange {
  border-left: none;
  border-right: none;
}

/* #186 : zones adossees aux bords de la barre.
   Une zone collee a un bord dessine un rectangle a angles DROITS : ses coins
   filent dans la zone ou la barre s'incurve -> encoche carree qui deborde
   visuellement l'arrondi. Signale par la metier : "contour gauche/droite
   absent", quand une periode commence au 1er juillet ou finit au 30 juin.

   ATTENTION - ce qu'il ne faut PAS faire (essai precedent, rejete) : ajouter
   une `border-left`/`border-right` a la zone. Ca introduit un lisere de 1px
   AVANT le debut reel de la periode, ce qui revient a affirmer qu'il se passe
   quelque chose entre le bord du calendrier et le 01/07 - information qu'on
   n'a pas et qui n'est pas modelisee (l'annee ne "boucle" pas). Ca decalait
   en prime le remplissage par rapport au tic du 01/07.

   Correctif retenu : on ne touche NI a la geometrie NI aux bordures de la
   zone. Elle garde left:0 / width:100% exacts, donc le remplissage coincide
   au pixel pres avec la borne. On lui donne seulement le meme rayon que la
   barre du cote concerne, pour qu'elle epouse l'arrondi au lieu de le
   deborder. La fermeture visuelle du calendrier reste portee par la barre
   elle-meme (box-shadow inset), la zone se superpose simplement par-dessus. */
.calendrier-epandage__zone--bord-gauche {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.calendrier-epandage__zone--bord-droit {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Point "aujourd'hui" centre VERTICALEMENT dans la barre (maquette #130).
   Barre = 46px, point = 9px -> top via 50% + translateY(-50%), independant
   de la hauteur exacte de la barre. Le label se pose juste sous le point. */
.calendrier-epandage__today {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  background: #161616;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;

  /* #186 : le point est centre via translateX(-50%) dans une barre en
     overflow:hidden. Aux extremites de l'annee agricole (1er juillet = 0%,
     30 juin = 100%) la moitie du disque sort de la barre et se fait couper
     -> "point Aujourd'hui incomplet" signale par la metier. On borne sa
     position comme on l'a fait pour son label en #134 : point de 9px ->
     demi-largeur 4.5px, arrondie a 5px de garde a chaque bord pour rester
     franchement a l'interieur du trait de contour. Valeurs en px, donc
     independantes de la largeur responsive de la barre. */
  left: clamp(5px, var(--today-pct, 0%), calc(100% - 5px));
}

/* Label "Aujourd'hui" : element distinct ancre sur la BARRE (.__bar), pas sur
   le point. Il suit la position du point (left: today_pct%) mais translateX
   le recentre, et on le borne par les bords de la barre avec une marge laterale
   pour qu'il ne soit JAMAIS croppe par overflow:hidden de .__bar, meme quand le
   point tombe debut juillet / fin juin (#134). Pose dans la moitie basse de la
   barre (sous le point centre) ; sur le fond pastel clair (inchange en sombre)
   -> reste noir dans les deux themes. */
.calendrier-epandage__today-label {
  position: absolute;
  top: 29px;
  transform: translateX(-50%);

  /* Anti-crop par clamp() CSS pur : la position centree du label (--today-pct,
     fournie en inline par le template) est bornee entre une demi-largeur+marge
     a gauche et son symetrique a droite, pour que le mot (centre via
     translateX(-50%)) reste TOUJOURS entierement dans la barre, jamais coupe
     par overflow:hidden. "Aujourd'hui" ~62px -> demi ~31px, +6px de marge =
     37px de garde a chaque bord (valeurs en px : independantes de la largeur
     responsive de la barre, qui fait toujours plusieurs centaines de px). */
  left: clamp(37px, var(--today-pct), calc(100% - 37px));
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  color: #161616;
  pointer-events: none;
  z-index: 2;
}

.calendrier-epandage__period {
  position: relative;

  /* Hauteur par defaut = 1 row (row0). Le JS (layoutBornesRows) la reajuste
     a la row max reellement utilisee apres mesure du DOM. Le templatetag
     statique (sans JS) garde cette hauteur de base. */
  height: 38px;
  margin-top: 8px;
}

/* #107 : quand une borne porte un encadre (descendu a top:56px + ~46px de
   hauteur), on reserve la place dans le flux via min-height, pour que l'encadre
   POUSSE la legende/le contenu dessous au lieu de les chevaucher (l'encadre est
   en position absolue, il ne pousse rien de lui-meme). La classe --a-encadre est
   posee cote serveur (template) uniquement sur les calendriers concernes -> pas
   de dependance au support :has() du navigateur, aucun effet hors de ce cas. */
.calendrier-epandage__period--a-encadre {
  height: auto;
  min-height: 120px;
}

/* Calendrier DYNAMIQUE (calculatrice) : deux couches z-index DANS .period --
   les tics (::before) en bas, les LIBELLES en haut -- pour qu'aucune barre
   verticale ne coupe un texte quand deux dates sont proches. Tous les tics
   (z-index 1) passent ainsi DERRIERE tous les libelles (z-index 2), quel que
   soit l'ordre DOM ou la row.

   `.period` recoit z-index:3 (> zones rouge/orange a z-index 0/1) : tout le
   bloc tics+libelles remonte ainsi AU-DESSUS du fond des zones. C'est ce qui
   remplace le z-index:5 pose autrefois sur chaque --big-tick (necessaire car
   le transform de .period-date cree un contexte qui piegeait le ::before
   sous les zones). En montant .period entier, on n'a plus besoin de lever
   chaque tic individuellement -> les ticks ne piegent plus les libelles.
   Le calendrier statique n'a qu'une row et pas de tic plein-hauteur : non
   concerne (les regles --big-tick ne s'y appliquent pas). */
.calc-cal .calendrier-epandage__period {
  position: relative;
  z-index: 3;
  isolation: isolate;
}

/* Dans .calc-cal, le tic ne porte plus de z-index sur l'ELEMENT (sinon il
   piege le libelle interne au-dessus de lui). Il vit sur la couche basse via
   son ::before ; c'est .period (z-index:3) qui le tient au-dessus des zones. */
.calc-cal .calendrier-epandage__period-date--big-tick {
  z-index: auto;
}

.calc-cal .calendrier-epandage__period-date::before {
  z-index: 1;
}

.calc-cal .calendrier-epandage__period-date-label {
  position: relative;
  z-index: 2;
}

.calendrier-epandage__period-date {
  position: absolute;
  top: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--cal-rouge-ink);

  /* La boite-label est centree sur la date (pct%). Le tick ::before est
     ancre a 50% de cette boite -> il tombe EXACTEMENT sur la date, quelle
     que soit la largeur du texte. */
  transform: translateX(-50%);
}

/* #186 : bornes aux extremites de l'annee agricole (01/07 a gauche, 30/06 a
   droite). La boite-label est centree sur la date via translateX(-50%) : a
   0% (resp. 100%) la moitie du texte sort du conteneur et se fait couper
   -> la metier voyait "/07" au lieu de "01/07". On rabat la boite a
   l'interieur (translateX(0) / translateX(-100%)) et on RECALE le tic en
   consequence, pour qu'il continue de tomber pile sur la date : c'est le tic
   qui porte l'information de position, pas la boite. */
.calendrier-epandage__period-date--bord-gauche {
  transform: translateX(0);
}

.calendrier-epandage__period-date--bord-droit {
  transform: translateX(-100%);
}

/* Tick connecteur present sur TOUTES les dates (fixes, calculees, inputs) :
   un trait vertical fin qui relie le label a la barre du calendrier. Avant,
   seules les bornes --phenologique en avaient un, d'ou l'impression de
   labels "flottants" non rattaches. Couleur = couleur du texte (currentColor)
   pour rester dans la meme famille (1 seule teinte par borne). */
.calendrier-epandage__period-date::before {
  content: "";
  position: absolute;

  /* Ancre horizontale = centre exact de la boite-label = la date.
     translateX(-50%) recale le trait (largeur impaire) pile sur ce centre,
     quelle que soit la largeur du libelle -> plus de decalage gauche/droite.
     `bottom: 100%` => le trait part du haut du texte et monte rejoindre le
     BAS de la barre (et s'arrete la : il ne traverse pas la barre, ne la
     depasse pas par le haut). Hauteur row0 = jeu(0) + margin-top(8) = 8px ;
     chaque row supplementaire ajoute 18px (cf. --rowN ci-dessous). */
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 8px;
  transform: translateX(-50%);
  background: currentcolor;
  pointer-events: none;
}

/* #186 - recalage du tic des bornes extremes. DOIT rester APRES la regle
   generique ci-dessus : meme specificite, c'est l'ordre source qui tranche.
   (Declarees avant, elles etaient silencieusement ecrasees par `left:50%` et
   le tic du 01/07 se retrouvait a ~15px du bord, soit visuellement mi-juillet
   alors que la periode demarre au 1er.)
   La boite du label est rabattue dans le conteneur (translateX(0) /
   translateX(-100%) plus haut) ; on ramene donc le tic sur le bord de cette
   boite, c'est-a-dire pile sur la date. Le tic porte la position, pas la
   boite. */
.calendrier-epandage__period-date--bord-gauche::before {
  left: 0;
}

.calendrier-epandage__period-date--bord-droit::before {
  left: 100%;
}

/* Borne phenologique : libelle conventionnel (semis / destruction), pose en
   italique noir pour signaler que c'est un evenement saisi par l'utilisateur
   et non une date reglementaire. */
.calendrier-epandage__period-date--phenologique {
  color: #161616;
  font-style: italic;
}

/* Empilage : chaque row supplementaire decale de 18px vers le bas.
   row0 = top:0 (default) | row2 = 18px | row3 = 36px | row4 = 54px.
   Le calculatrice dynamique en utilise jusqu'a 4 simultanees ; le
   templatetag standard se limite a row0 / row2. */
.calendrier-epandage__period-date--row2 {
  top: 18px;
}

.calendrier-epandage__period-date--row3 {
  top: 36px;
}

.calendrier-epandage__period-date--row4 {
  top: 54px;
}

/* Trait connecteur : par defaut court (12px = jusqu'a la barre depuis row0).
   Sur les rows decalees, on le rallonge pour qu'il atteigne toujours la
   barre (chaque row ajoute 18px de descente). */
.calendrier-epandage__period-date--row2::before {
  height: 26px; /* 8 + 18 */
}

.calendrier-epandage__period-date--row3::before {
  height: 44px; /* 8 + 36 */
}

.calendrier-epandage__period-date--row4::before {
  height: 62px; /* 8 + 54 */
}

/* Calendrier STATIQUE (templatetag, hors .calc-cal) : le tic de chaque borne
   TRAVERSE toute la barre (au lieu de s'arreter sous elle), exactement comme le
   dynamique. C'est ce qui remplace l'ancienne bordure laterale de zone (retiree
   ci-dessus) : un seul trait continu par frontiere, aligne par construction, et
   le tic monte bien jusqu'en haut (corrige la borne phenologique luzerne en
   row2 qui ne montait pas jusqu'au sommet). On ajoute la hauteur de barre (46px)
   a la hauteur de base de chaque row. La couleur reste currentColor (teinte du
   regime / noir phenologique), contrairement au --big-tick dynamique qui force
   le noir. row0 = 8+46 ; row2 = 26+46. Selecteur :not(.calc-cal *) = uniquement
   les calendriers qui ne sont PAS dans le composant calculatrice. */
.calendrier-epandage:not(.calc-cal *)
  .calendrier-epandage__period-date::before {
  height: 54px; /* 8 + 46 */
}

.calendrier-epandage:not(.calc-cal *)
  .calendrier-epandage__period-date--row2::before {
  height: 72px; /* 26 + 46 */
}

.calendrier-epandage:not(.calc-cal *)
  .calendrier-epandage__period-date--row3::before {
  height: 90px; /* 44 + 46 */
}

.calendrier-epandage:not(.calc-cal *)
  .calendrier-epandage__period-date--row4::before {
  height: 108px; /* 62 + 46 */
}

/* Le tic statique passe derriere les zones par defaut (les zones ont z-index
   0/1, le ::before vit dans .period peint apres mais un overlay peut creer un
   contexte). On remonte le bloc .period au-dessus des fonds de zone pour que le
   trait reste visible la ou il traverse une zone, sans masquer le hachure (le
   tic fait 1px). Meme principe que .calc-cal .period (z-index:3). */
.calendrier-epandage:not(.calc-cal *) .calendrier-epandage__period {
  position: relative;
  z-index: 3;
}

/* Tick des dates SAISIES (semis / destruction) : trait noir qui TRAVERSE
   toute la barre et passe DEVANT les zones (z-index), pour materialiser
   nettement la date utilisateur. Meme largeur (1px) que les autres bornes
   -- seule la couleur noire le distingue. Hauteur = atteindre le HAUT de la
   barre depuis la row du label (hauteur barre = 46px) :
     row0 = 8 + 46 = 54 | +18px par row supplementaire.
   z-index : la barre et ses zones overlay vivent dans .__bar (sibling
   precedent) ; le ::before est dans .__period (sibling suivant) donc deja
   peint apres, mais on force z-index pour rester devant meme si un overlay
   cree un nouveau contexte d'empilement. */

/* z-index sur l'ELEMENT lui-meme (pas seulement ::before) : `transform`
   sur .period-date cree un contexte d'empilement qui PIEGE le z-index du
   ::before. Sans ca, les zones overlay (z-index:1, resolues dans le
   contexte racine) passaient DEVANT le tick aux endroits ou une zone
   couvre la date saisie (bug destruction derriere le calendrier). En
   posant z-index sur l'element, c'est lui qui remonte au-dessus des zones. */
.calendrier-epandage__period-date--big-tick {
  z-index: 5;
}

.calendrier-epandage__period-date--big-tick::before {
  background: #161616;
  height: 54px;
}

.calendrier-epandage__period-date--big-tick.calendrier-epandage__period-date--row2::before {
  height: 72px;
}

.calendrier-epandage__period-date--big-tick.calendrier-epandage__period-date--row3::before {
  height: 90px;
}

.calendrier-epandage__period-date--big-tick.calendrier-epandage__period-date--row4::before {
  height: 108px;
}

/* Bornes calculees (row2) en couleur du regime. Les triples classes
   ci-dessous override la couleur noire/rouge par defaut de
   .calendrier-epandage__period-date / --phenologique. */
.calendrier-epandage__period-date--rouge {
  color: var(--cal-rouge-ink);
  font-style: normal;
  font-weight: 700;
}

.calendrier-epandage__period-date--rouge::before {
  background: var(--cal-rouge-ink);
}

.calendrier-epandage__period-date--orange {
  color: var(--cal-orange-ink);
  font-style: normal;
  font-weight: 700;
}

.calendrier-epandage__period-date--orange::before {
  background: var(--cal-orange-ink);
}

/* #107 — Encadre d'une borne metier saisie (ex derniere coupe luzerne,
   brunissement des soies) : sous la date, un encadre porte le libelle (gras
   noir) + un sous-texte « Ici exemple au <date> » (italique gris). Un trait
   vertical (connecteur) relie la borne sur la barre a l'encadre, comme la
   maquette.

   Positionnement (cf. iteration visuelle Playwright) :
   - BORD GAUCHE de l'encadre aligne sous la borne : on annule le
     translateX(-50%) global (`left: pct%` place alors le coin haut-gauche de
     l'encadre pile sur la date = bord gauche de la zone reglementaire).
   - l'encadre DESCEND sous la barre (top:56px, neutralise le --row2 de 18px)
     pour laisser au-dessus l'espace des bornes de dates fixes (15 déc / 15 jan).
   - le .period recoit une min-height qui inclut l'encadre : ainsi il COMPTE
     dans le flux et POUSSE la legende dessous (pas de chevauchement). */
.calendrier-epandage__period-date--boite {
  top: 56px;
  font-weight: 400;
  transform: translateX(0);
}

/* Pas de tic ::before pour l'encadre : le connecteur est un vrai element (voir
   .period-date-connecteur) pour un controle total de sa hauteur/position,
   independamment de la cascade des tics de bornes. */
.calendrier-epandage__period-date--boite::before {
  display: none;
}

/* Connecteur : trait vertical qui part du HAUT de la barre (comme les autres
   bornes) et descend jusqu'au HAUT de l'encadre. Ancre au bord gauche du bloc
   (= la date). Hauteur = descente de l'encadre (56px) + hauteur de la barre
   (46px) + margin-top du .period (8px) = 110px. z-index eleve pour passer
   devant le fond hachure de la zone. */
.calendrier-epandage__period-date-connecteur {
  position: absolute;
  top: -110px;
  left: 0;
  width: 2px;
  height: 110px;
  background: var(--cal-orange-ink);
  transform: translateX(-50%);
  z-index: 5;
}

/* Le connecteur d'une borne d'interdiction (rouge) suit la couleur de sa zone. */
.calendrier-epandage__period-date--rouge
  .calendrier-epandage__period-date-connecteur {
  background: var(--cal-rouge-ink);
}

.calendrier-epandage__period-date-boite {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid var(--border-default-grey, #ddd);
  border-radius: 4px;
  background: #fff;
  text-align: left;
  white-space: nowrap;
}

.calendrier-epandage__period-date--boite
  .calendrier-epandage__period-date-label {
  font-weight: 700;
  font-style: normal; /* bat l'italique de --phenologique */
  color: #161616;
}

.calendrier-epandage__period-date-exemple {
  font-style: italic;
  font-weight: 400;
  color: #666;
}

/* Borne phenologique (date flottante) : on N'utilise PLUS les hachures comme
   signal (maquette #130 — les hachures sont desormais le marqueur PERMANENT
   du sous-condition, cf. --orange ci-dessus). La classe reste posee par le JS
   (renderCalendrier) mais ne doit plus repeindre le fond : sinon, sur une zone
   orange flottante, ces hachures noires ecraseraient les hachures orange. On
   la laisse donc inerte. Le caractere "non fige" de la duree est porte par les
   libelles de bornes en italique, pas par la zone. */

.calendrier-epandage__phenologique {
  margin-top: 0.5rem;
  color: #666;
}

/* ─── Légende couleurs (issue #28) ──────────────────────────────────── */
.calendrier-epandage__legende {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--text-default-grey);
}

.calendrier-epandage__legende li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendrier-epandage__legende-puce {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgb(0 0 0 / 15%);
}

/* Puce de legende = fond pale de la famille + liseret 'ink' (au lieu d'un
   gris generique) pour que la puce porte la meme couleur que la zone ET son
   bord — coherence stricte avec la barre. */
.calendrier-epandage__legende-puce--rouge {
  background: var(--cal-rouge-fill);
  border-color: var(--cal-rouge-ink);
}

/* Puce sous-condition : hachuree orange en permanence, comme la zone (maquette
   #130). Hachures resserrees (4px de periode) pour rester lisibles a 12px. */
.calendrier-epandage__legende-puce--orange {
  background-color: var(--cal-orange-fill);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 2px,
    var(--cal-orange-ink) 2px,
    var(--cal-orange-ink) 4px
  );
  border-color: var(--cal-orange-ink);
}

.calendrier-epandage__legende-puce--vert {
  background: var(--cal-vert-fill);
  border-color: var(--cal-vert-ink);
}

/* Borne phenologique (date flottante) cote LEGENDE : AUCUNE regle dediee, par
   symetrie avec `.__zone--flottant` qui est volontairement inerte (cf.
   commentaire pres de --zone--orange). Auparavant `.__legende-puce--flottant`
   repeignait `background-image` avec des bandes noires : sur une puce orange
   flottante (`--orange --flottant`, cas type III luzerne #158) ces bandes
   ECRASAIENT les hachures orange et la puce paraissait rouge, alors que la zone
   correspondante restait orange. La puce doit refleter la zone -> on ne touche
   plus au fond en flottant. Le caractere "non fige" est porte par les libelles
   de bornes en italique, pas par la couleur de la puce. */

/* ─── Calendrier dynamique (calculatrice) ───────────────────────────────
   Composant calendrier_dynamique_couvert : reuse intégralement les classes
   .calendrier-epandage__* ci-dessus pour la barre/zones/today/period.
   Les classes .calc-cal__* ci-dessous ne servent qu'au mini-form en haut
   et au récap textuel en bas, pas a la barre elle-meme. */

.calc-cal {
  margin: 1.5rem 0;
}

.calc-cal__title {
  margin: 0 0 0.5rem;
}

.calc-cal__intro {
  margin: 0 0 1.25rem;
  color: var(--text-mention-grey);
  line-height: 1.45;
}

.calc-cal__form {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  align-items: flex-end; /* labels de hauteurs differentes -> input aligne en bas */
}

/* #272 : bandeau violet derriere les 2 champs dates du calendrier dynamique,
   facon question complementaire, pour que ces champs ressortent face au
   calendrier colore juste en dessous (les utilisateurs ne les voyaient pas et
   ne comprenaient pas qu'il faut jouer avec les dates). Un titre d'intro
   explique l'interaction. On resserre aussi le label du champ (gap reduit). */
.calc-cal__form--highlight {
  display: block; /* on empile titre + rangee de champs */
  background: var(--background-open-blue-france, #e3e3fd);
  border-left: 3px solid var(--border-action-high-blue-france, #6a6af4);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

/* Titre d'intro du bandeau : « Jouer avec les dates … fait evoluer le
   calendrier ». Guide l'utilisateur qui ne comprenait pas l'interaction. */
.calc-cal__form-titre {
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-title-blue-france, #000091);
}

[data-fr-theme="dark"] .calc-cal__form-titre {
  color: #c1c1fb;
}

/* Rangee des 2 champs dates (reprend l'ancien layout flex de .calc-cal__form). */
.calc-cal__form-champs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
}

.calc-cal__form--highlight .calc-cal__field {
  gap: 0.15rem; /* resserre label <-> input (defaut 0.35rem) */
}

.calc-cal__form--highlight .calc-cal__field-label {
  /* Libelles courts (« Date de semis/destruction du couvert ») : tiennent sur
     une ligne -> on n'a plus besoin de reserver 2 lignes, input colle au label. */
  min-height: 0;
  margin-bottom: 0;
  white-space: nowrap;
}

[data-fr-theme="dark"] .calc-cal__form--highlight {
  background: rgb(106 106 244 / 16%);
  border-left-color: #8585f6;
}

/* Input "date" type JJ/MM : large pour matcher le figma, avec un picto
   calendrier en suffix pour signaler que c'est un champ date. La valeur
   initiale (placeholder du YAML) est grisee tant que l'utilisateur n'a
   pas saisi -- on tag via [data-default] cote JS. */
.calc-cal__field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 0;
  min-width: 0;
}

.calc-cal__field-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-title-grey);

  /* Hauteur fixe = 2 lignes -> labels longs ne decalent pas l'input. */
  min-height: calc(2 * 1.35rem);
  line-height: 1.35;
}

.calc-cal__field input.fr-input {
  width: 100%;
  max-width: none;

  /* Place pour le picto a droite. */
  padding-right: 2.25rem;
  font-size: 1rem;
}

.calc-cal__field input.fr-input[data-default="true"] {
  color: var(--text-mention-grey, #6b7280);
}

.calc-cal__field-icon {
  position: absolute;
  right: 0.6rem;
  bottom: 0.65rem;
  width: 1.1rem;
  height: 1.1rem;
  pointer-events: none;
  opacity: 0.55;
  color: var(--text-mention-grey, #6b7280);
}

/* Popup picker JJ/MM : grille calendrier d'un mois (navigation par mois,
   pas d'annee). */
.calc-cal__picker {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  background: var(--background-default-grey, #fff);
  color: var(--text-default-grey, #1f2937);
  border: 1px solid var(--border-default-grey, #d1d5db);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 268px;
}

.calc-cal__picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.calc-cal__picker-mois-label {
  flex: 1;
  text-align: center;
  font-weight: 600;
  text-transform: capitalize;
  font-size: 1rem;
}

.calc-cal__picker-nav {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: var(--text-title-blue-france, #000091);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
}

.calc-cal__picker-nav:hover {
  background: var(--background-alt-grey, #f3f4f6);
}

.calc-cal__picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 0.75rem;
  color: var(--text-mention-grey, #6b7280);
  text-align: center;
}

.calc-cal__picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calc-cal__picker-day {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-default-grey, #1f2937);
  font-size: 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.calc-cal__picker-day:hover {
  background: var(--background-action-low-blue-france, #e3e3fd);
  border-color: var(--border-action-low-blue-france, #cacafb);
}

.calc-cal__picker-day--selected {
  background: var(--background-action-high-blue-france, #000091);
  color: #fff;
  font-weight: 700;
}

.calc-cal__picker-day--empty {
  cursor: default;
  background: transparent;
}

.calc-cal__picker-day--empty:hover {
  background: transparent;
  border-color: transparent;
}

/* Jour hors bornes min/max de l'input (#126) : grise, non cliquable. */
.calc-cal__picker-day--disabled {
  color: var(--text-disabled-grey, #b8b8b8);
  cursor: not-allowed;
  opacity: 0.45;
}

.calc-cal__picker-day--disabled:hover {
  background: transparent;
  border-color: transparent;
}

/* Message d'erreur de bornage sous le champ date (#126). */
.calc-cal__field-error {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--cal-rouge-ink, #ce0500);
  line-height: 1.35;
}

/* Note explicative permanente dans le date-picker quand l'input est borne
   (#126) : explique pourquoi des jours sont grises, reliee a la variante
   de couvert choisie en amont. */
.calc-cal__picker-note {
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-default-grey, #ddd);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-mention-grey, #6b7280);
}

/* Tooltip JS instantane (cf. bindTooltips dans calculatrice-calendrier.js).
   Pinned en `position: fixed` (place via JS via window.scrollX/Y), apparait
   au mouseenter avec opacite 1 instantanee. */
.calc-cal__tooltip {
  position: absolute;
  pointer-events: none;
  background: rgb(33 33 33 / 95%);
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  z-index: 1000;

  /* Le texte de justification (#159) peut etre long -> il DOIT s'enrouler
     dans la largeur max, sinon nowrap le coupe a droite. */
  white-space: normal;
  overflow-wrap: break-word;
  opacity: 0;
  transition: opacity 80ms;

  /* Largeur max bornee au viewport (moins une marge) : sur mobile, 340px fixe
     debordait de l'ecran quand le tooltip s'affichait pres d'un bord (#177).
     min() garantit qu'il ne depasse jamais la largeur de l'ecran. */
  max-width: min(340px, calc(100vw - 24px));
  box-sizing: border-box;
}

.calc-cal__recap {
  margin-top: 1.5rem;
}

/* Regroupement par regime (#159, maquette) : un titre de section + une liste
   a puces des periodes concernees. */
.calc-cal__recap-section {
  margin-bottom: 1rem;
}

.calc-cal__recap-section:last-child {
  margin-bottom: 0;
}

.calc-cal__recap-titre {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

/* Liste a puces des periodes d'une section (#159). ul.<classe> : specificite
   (0,1,1) pour battre le reset DSFR sur `ul`. Le bloc liste est nettement
   decale sous le titre : `margin-inline-start` pousse la puce a droite du titre,
   `padding-inline-start` reserve l'espace puce->texte. */
ul.calc-cal__recap-list {
  margin: 0;
  margin-inline-start: 0.75rem;
  padding-inline-start: 1.25rem;
  padding-left: 1.25rem;
  list-style-type: disc;
  list-style-position: outside;
  line-height: 1.6;
}

.calc-cal__recap-annot {
  color: var(--text-mention-grey);
  font-size: 0.92em;
}

/* Picto info ⓘ : porte la justification en tooltip (#159, data-tooltip +
   bindTooltips). Discret, cliquable/focusable pour l'accessibilite. */

/* #248 : declencheur d'infobulle DSFR du recap du calendrier dynamique.
   Meme traitement que .periodes-info (statique) : icone DSFR agrandie et
   bouton centre verticalement sur le texte de la puce. */
.calc-cal__recap-info.fr-btn--tooltip {
  margin-left: 0.25rem;
  min-height: 1.25rem;
  max-height: 1.25rem;
  min-width: 1.25rem;
  max-width: 1.25rem; /* garde overflow:hidden du label "Justification" */
  padding: 0;
  vertical-align: -0.3em;
}

.calc-cal__recap-info.fr-btn--tooltip::before {
  --icon-size: 1.25rem;

  margin: 0;
}

/* Dark mode : la mask de l'icone DSFR « ? » ne se charge pas correctement (asset
   servi sur un mauvais base URL) -> le ::before apparait comme un carre violet
   plein au lieu du « ? » detoure. Plutot que de dependre de cette mask, on
   dessine NOTRE propre pastille : cercle borde violet clair, « ? » au centre,
   fond transparent. Robuste et net sur fond sombre. #272 */
[data-fr-theme="dark"] .calc-cal__recap-info.fr-btn--tooltip {
  background-color: transparent !important;
  box-shadow: none !important;
  border: 1px solid #8585f6 !important;
  border-radius: 50% !important;
  color: #8585f6 !important;
}

[data-fr-theme="dark"] .calc-cal__recap-info.fr-btn--tooltip::before {
  content: "?" !important;
  mask: none !important;
  background: none !important;
  color: #8585f6 !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* ─── Tooltip survol calendrier (issue #28) ─────────────────────────── */
.calendrier-epandage__tooltip {
  position: absolute;
  pointer-events: none;
  background: rgb(33 33 33 / 92%);
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  z-index: 100;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 8px));
  opacity: 0;
  transition: opacity 0.12s;
}

.calendrier-epandage__tooltip[data-visible="true"] {
  opacity: 1;
}

/* ─── Mode sombre (#83) ──────────────────────────────────────────────────
   Le calendrier porte des couleurs custom hardcodees (noir #161616 pour les
   tics/point/labels "aujourd'hui"/semis/destruction, gris #666 pour les mois)
   qui ne suivent pas le theme DSFR. En sombre, le noir devient invisible sur
   le fond #1e1e1e. On surcharge donc ici, sous [data-fr-theme="dark"], par des
   teintes claires. Les fills/inks de zones (rouge/orange/vert pastel) restent
   identiques : ce sont des fonds clairs qui contrastent deja bien sur sombre.

   On garde la meme palette de zones (lisible sur sombre) et on ne touche QUE
   l'encre neutre (noir -> blanc casse) + les gris de second plan. */
[data-fr-theme="dark"] {
  /* Encre neutre du calendrier : blanc casse en sombre (au lieu de #161616). */
  --cal-ink-neutre-dark: #f5f5f5;
  --cal-gris-second-dark: #9a9a9a;
}

/* Mois (Juil, Aout, ...) : gris trop sombre -> gris clair lisible. */
[data-fr-theme="dark"] .calendrier-epandage__months {
  color: var(--cal-gris-second-dark);
}

/* Point "aujourd'hui" + son label : on les GARDE noirs en sombre (#134).
   Depuis qu'ils tiennent ENTIEREMENT DANS la barre (cf. .__today plus haut),
   leur fond est le pastel clair du calendrier, qui ne change PAS en sombre.
   Un blanc casse y serait illisible -> on n'ajoute AUCUNE surcharge sombre,
   ils heritent du #161616 de base, lisible sur le fond clair dans les 2 themes. */

/* Bornes phenologiques NOIRES uniquement (semis / destruction) : label ET tic
   passent en blanc casse en sombre (#132/#134). IMPORTANT : on NE touche PAS
   aux dates fixes colorees (31 juil., 12 oct., 31 jan.) qui portent
   --phenologique MAIS aussi une classe couleur --rouge/--orange (cf. JS
   renderBornes). Le :not() les exclut : elles gardent leur teinte de regime,
   deja lisible sur sombre.

   Le tic (::before) part du label et monte traverser la barre ; sur le fond de
   page sombre (sous la barre) un tic noir disparait -> blanc. On cible le tic,
   le label interne (dynamique .calc-cal) et le color du parent (statique sans
   label interne). */
[data-fr-theme="dark"]
  .calendrier-epandage__period-date--phenologique:not(
    .calendrier-epandage__period-date--rouge,
    .calendrier-epandage__period-date--orange
  ) {
  color: var(--cal-ink-neutre-dark);
}

[data-fr-theme="dark"]
  .calendrier-epandage__period-date--phenologique:not(
    .calendrier-epandage__period-date--rouge,
    .calendrier-epandage__period-date--orange
  )::before {
  background: var(--cal-ink-neutre-dark);
}

[data-fr-theme="dark"]
  .calc-cal
  .calendrier-epandage__period-date--phenologique:not(
    .calendrier-epandage__period-date--rouge,
    .calendrier-epandage__period-date--orange
  )
  .calendrier-epandage__period-date-label {
  color: var(--cal-ink-neutre-dark);
}

/* Texte d'aide / mentions grises du recap : le DSFR les passe deja en clair
   via --text-mention-grey, rien a forcer. La barre "libre" (fond vert pastel)
   et les zones gardent leurs fills clairs : OK sur sombre. */

/* ─── Contenu riche éditable (cartes #131/#136) ──────────────────────────────
   Rendu public des blocs compilés par compile_dsfr (PC, règles permanentes…).
   On reproduit ici la hiérarchie visuelle de l'éditeur admin : listes en
   retrait sous leur section, et un peu d'air entre les sous-titres et le texte.
   Chargé via calendrier.css (présent sur result/simulateur/preview). */
.contenu-rich ul,
.contenu-rich ol {
  padding-left: 2rem;
  margin: 0.25rem 0 0.75rem;
}

.contenu-rich ul {
  list-style: disc outside;
}

.contenu-rich ol {
  list-style: decimal outside;
}

.contenu-rich li {
  margin: 0.15rem 0;
}

/* Sous-titres (h6) : un peu d'espace au-dessus pour aérer les sections. */
.contenu-rich h6 {
  margin: 1rem 0 0.25rem;
}

.contenu-rich p {
  margin: 0 0 0.5rem;
}

/* ====================================================================
   RESPONSIVE MOBILE (#177)
   Breakpoint aligne sur le md DSFR (48em = 768px). En dessous = mobile.
   ==================================================================== */
@media (width <= 47.99em) {
  /* Mois du calendrier : les abreviations 3 lettres (Juil/Sept/...) se
     chevauchent sur petit ecran -> on affiche l'initiale (data-court).
     On masque le texte du <span> et on injecte l'initiale en ::before. */
  .calendrier-epandage__months span {
    font-size: 11px;

    /* cache le label long sans le retirer du DOM (accessibilite : le
       ::before porte l'initiale visible, le texte reste lisible aux ATs
       via le contenu d'origine du span). */
    text-indent: -9999px;
    position: relative;
    overflow: hidden;
  }

  .calendrier-epandage__months span::before {
    content: attr(data-court);
    position: absolute;
    inset: 0;
    text-indent: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Champs dates semis / destruction : de 2 colonnes cote a cote a 1 seule
     colonne, chaque champ en pleine largeur, l'un sous l'autre. */
  .calc-cal__form {
    flex-direction: column;
    gap: 1rem;
  }

  .calc-cal__field {
    flex: 1 1 100%;
    width: 100%;
  }
}