/* Layout 2 colonnes du simulateur (form gauche, resultat droite).
   Couleurs strictement issues de la maquette
   site-nitrates-maquette/index.html (mode light DSFR). */

/* ─── Recherche commune (BAN) ──────────────────────────────────────── */

/* z-index AU-DESSUS des controles Leaflet : les conteneurs .leaflet-top
   (zoom +/- et controle de couches/legende IGN) sont a z-index 1000. Comme
   .map-search-wrapper cree un contexte d'empilement, c'est SA valeur (et non
   le 9999 interne des suggestions, piege dans ce contexte) qui est comparee
   aux controles. A 1000 ex-aequo, la carte (plus loin dans le DOM) passait
   devant -> la dropdown d'autocomplete etait masquee par les boutons/legende.
   On monte donc le wrapper a 1100 : les suggestions recouvrent toute la carte
   et ses controles. */
.map-search-wrapper {
  position: relative;
  margin-bottom: 6px;
  z-index: 1100;
}

.ban-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border: 1px solid #aaa;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ban-suggestions li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.875rem;
  border-bottom: 1px solid #eee;
}

.ban-suggestions li:last-child {
  border-bottom: none;
}

.ban-suggestions li:hover,
.ban-suggestions li.is-active {
  background: #f0f0f0;
}

/* Option surlignee au clavier (fleches haut/bas) : liseré bleu France a gauche
   pour distinguer clairement le focus clavier (Carte #154, accessibilite). */
.ban-suggestions li.is-active {
  box-shadow: inset 3px 0 0 var(--border-action-high-blue-france, #000091);
}

/* Mode sombre (#83) : les suggestions avaient un fond blanc fixe + texte gris
   -> illisible en sombre. On passe a un fond gris fonce + texte clair, avec un
   survol legerement plus clair. */
[data-fr-theme="dark"] .ban-suggestions {
  background: #2a2a2a;
  border-color: #555;
  color: #f0f0f0;
}

[data-fr-theme="dark"] .ban-suggestions li {
  border-bottom-color: #444;
  color: #f0f0f0;
}

[data-fr-theme="dark"] .ban-suggestions li:hover,
[data-fr-theme="dark"] .ban-suggestions li.is-active {
  background: #3a3a3a;
}

[data-fr-theme="dark"] .ban-suggestions li.is-active {
  box-shadow: inset 3px 0 0 #8585f6;
}

/* ─── Localisation read-only (commune / dept / region) ────────────── */

.localisation-readonly {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 12px 16px;
  background: var(--background-alt-grey);
  border-left: 3px solid var(--border-action-high-blue-france);
}

.localisation-readonly__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.localisation-readonly__label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-mention-grey);
  font-weight: 400;
}

.localisation-readonly__value {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-title-grey);
}

/* ─── Sections form (maquette : .form-section + .form-question-group) ─

   Repris strictement de la maquette : titres 32px, textes 16px,
   gap 10px entre titre/contenu et entre libellé/radios. */

.form-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-section-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  color: var(--text-title-grey);
  margin: 0;
}

.form-question-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* `display: flex` ne doit pas court-circuiter l'attribut `hidden`. */
.form-section[hidden],
.form-question-group[hidden] {
  display: none !important;
}

.form-question-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--text-title-grey);
  margin: 0;
}

/* Question reformatee cote front (#192, question_reformat.js) : intro en gras
   + puces d'enumeration en graisse normale, pour aerer une question a rallonge
   sans toucher au texte de l'arbre. */
.form-question-text--reformatted {
  font-weight: 400; /* la graisse 700 est portee par l'intro uniquement */
}

.form-question-text__intro {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}

.form-question-text__list {
  margin: 0;
  padding-left: 20px;
}

.form-question-text__list li {
  margin-bottom: 4px;
}

.form-question-text__list li:last-child {
  margin-bottom: 0;
}

/* fr-radio-group sans la marge DSFR par defaut, mais on garde un peu
   d'air entre options pour le confort de lecture (maquette). */

/* Focus clavier (Carte #154, a11y) : le focus ring DSFR par defaut se dessine
   sur le petit rond du radio -> effet moche et peu lisible au Tab, surtout
   quand le label passe sur 2 lignes (rond DSFR ancre en haut-gauche du label,
   l'anneau debordait). On etend le focus a TOUT le bloc option.

   IMPORTANT : le rond DSFR est un background-image ancre sur le label, avec un
   padding vertical (.75rem) deja integre. On ne touche donc PAS au
   padding/margin horizontal du groupe (sinon on decale le rond). On se
   contente d'un box-shadow qui epouse le groupe (respecte le border-radius,
   coins nets — contrairement a outline) + un leger fond. `inset` sur l'ombre
   evite tout debordement exterieur qui « bavait » sur les options voisines. */
.form-question-group .fr-radio-group {
  margin: 0;
  min-height: unset;
  border-radius: 6px;
  transition:
    box-shadow 0.12s ease,
    background-color 0.12s ease;
}

/* #247 : espacement de 10px entre les options radio d'une meme question, pour
   qu'elles ne soient pas collees. On ajoute une marge entre deux options
   consecutives (le combinateur `+` ne cible que des options qui SE SUIVENT
   dans le flux). IMPORTANT : ne PAS mettre `display:flex/gap` sur le conteneur
   [data-cascade] -> ca reafficherait les vrais radios sous_culture_form masques
   (source de verite pilotee par le flow #272) et casserait le formulaire. On
   garde donc le flux normal et un simple margin-top. */
.form-question-group [data-cascade] .fr-radio-group + .fr-radio-group,
.form-question-group .qc-question .fr-radio-group + .fr-radio-group {
  margin-top: 10px;
}

.form-question-group .fr-radio-group:focus-within {
  box-shadow: inset 0 0 0 2px var(--outline-color, #0a76f6);
  background-color: rgb(10 118 246 / 6%);
}

.form-question-group .fr-radio-group input[type="radio"]:focus,
.form-question-group .fr-radio-group input[type="radio"]:focus-visible {
  outline: none;
}

[data-fr-theme="dark"] .form-question-group .fr-radio-group:focus-within {
  box-shadow: inset 0 0 0 2px #8585f6;
  background-color: rgb(133 133 246 / 14%);
}

/* Espacement entre 2 form-question-group consecutifs dans une section */
.form-section .form-question-group + .form-question-group {
  margin-top: 22px;
}

/* ─── Flow culture/couvert en questions successives (#272) ───────────────
   Les vrais champs cascade (categorie_culture / sous_culture_form) sont
   pilotes en coulisse par question_couvert_flow.js : on les masque en gardant
   leur DOM (source de verite soumise au backend). Les radios visibles sont
   ceux montes par le flow dans .couvert-flow__group. */
.couvert-flow__origin-hidden {
  display: none;
}

/* Espacement 10px entre options radio des questions du flow, aligne sur le
   traitement #247 des autres groupes cascade. */
.couvert-flow__group .fr-radio-group + .fr-radio-group {
  margin-top: 10px;
}

/* Bloc dates Q4 : reutilise le look du date-picker JJ/MM (calc-cal__*) du
   calendrier dynamique, sans dependre de son composant (cf. #272). */
.couvert-flow__dates .calc-cal__form {
  margin-bottom: 0;
}

/* #272 : encadré ROUGE tant qu'une date obligatoire n'est pas saisie. Sans ça
   (placeholder gris), l'utilisateur croyait le champ rempli et ne comprenait
   pas pourquoi « Suivant » restait désactivé. On force la bordure rouge +
   ombre, robuste quel que soit le theme DSFR. */
.couvert-flow__dates input.fr-input[aria-invalid="true"] {
  box-shadow: inset 0 -2px 0 0 var(--border-plain-error, #ce0500);
  border: 1px solid var(--border-plain-error, #ce0500);
}

/* Popup du date-picker Q4 ancre sur <body> en position: fixed (#272) : sans ca
   il etait clippe par `.results-row { overflow: clip }` et la grille du
   calendrier restait invisible -> impossible de choisir un jour. `top`/`left`
   sont poses en JS depuis le rect de l'input. z-index tres haut pour passer
   au-dessus du form et de la carte Leaflet. */
.calc-cal__picker--fixed {
  position: fixed;
  z-index: 2000;
}

/* ─── Carte ────────────────────────────────────────────────────────── */

/* Leaflet pose des elements de proxy (.leaflet-proxy) hors viewport
   pour ses animations zoom : sans `overflow: hidden`, ces elements
   etendent la largeur du document et provoquent un scrollbar
   horizontal qui squeeze le rendu html/body. */
.nitrates-map {
  width: 100%;
  height: 380px;
  border-radius: 4px;
  overflow: hidden;
}

/* ─── Carte panoramique en mode saisie (Carte #193) ──────────────────────────
   Demande maquette : en mode saisie (pas de resultat), la carte s'elargit en
   panorama (plus large que le formulaire, qui reste etroit dessous), tout en
   gardant de bons buffers gauche/droite. En mode resultat (layout--split), la
   carte RESTE petite dans la colonne etroite (largeur + hauteur reduites).

   Technique : la .form-col fait ~58% et est centree ; on fait DEBORDER la
   .map-container au-dela de cette colonne, symetriquement, via des marges
   negatives calculees. On plafonne l'elargissement pour conserver des buffers
   lateraux (le panorama ne colle jamais aux bords de l'ecran). */

/* #271 : la carte (#section-localisation) est désormais TOUJOURS pleine largeur,
   sortie de la .results-row et placée au-dessus du split. Plus besoin du hack de
   marges négatives « panorama » (l'ancienne carte vivait dans une colonne
   étroite). On lui donne juste une hauteur confortable, identique en saisie et
   en résultat. */
@media (width >= 992px) {
  .nitrates-map {
    height: 460px;
  }
}

/* Filet de securite global : on garantit qu'aucun overflow horizontal
   inattendu ne squeeze le viewport. */
html,
body {
  overflow-x: clip;
}

/* ─── Boite Questions complementaires (mauve) ─────────────────────── */

.qc-box {
  background: #cecefc;
  padding: 30px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.qc-box__title {
  margin: 0 0 8px;
}

.qc-box__lead {
  font-size: 0.875rem;
  margin: 0 0 8px;
  color: var(--text-default-grey);
}

.qc-box .form-question-group {
  margin: 0;
}

/* ─── #271 : encart récap des choix (colonne gauche, page résultat) ──────
   Rappel compact et mauve des réponses de l'utilisateur, façon .qc-box, avec
   un bouton « Modifier » pour revenir au formulaire. */
.recap-choix {
  background: #cecefc;
  padding: 20px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* display:flex ne doit pas court-circuiter l'attribut hidden (bouton Modifier). */
.recap-choix[hidden] {
  display: none !important;
}

.recap-choix__liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recap-choix__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recap-choix__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-mention-grey, #666);
  font-weight: 600;
}

.recap-choix__valeur {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-title-grey, #161616);
  line-height: 1.3;
}

/* Mention « + N questions complémentaires » : discrète, séparée du bloc
   principal par un filet. On ne détaille pas les QC (cliquer Modifier pour). */
.recap-choix__qc-note {
  padding-top: 16px;
  border-top: 1px solid rgb(106 106 244 / 35%);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-title-grey, #161616);
}

.recap-choix__modifier {
  align-self: flex-start;
}

[data-fr-theme="dark"] .recap-choix {
  background: rgb(133 133 246 / 20%);
}

/* ─── Recap QC repondues (sous le form principal, colonne gauche) ─── */

.qc-recap__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qc-recap__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: #f5f5fc;
  border-left: 3px solid #6a6af4;
  border-radius: 2px;
}

.qc-recap__label {
  font-size: 0.85rem;
  color: var(--text-mention-grey);
}

.qc-recap__value {
  font-size: 0.95rem;
}

/* ─── Mini-form questions subsidiaires dans le panneau resultat ─────── */

/* On combine les 2 classes pour surclasser les regles `.resultat-panel`
   definies plus bas dans le fichier (memes specificite, donc l'ordre
   l'emporte sinon). */

.resultat-panel.resultat-panel--questions {
  /* Fond violet pastel valide par la designeuse (cf. #58.2). Distingue
     visuellement les questions complementaires (etape 2) du reste de la page.

     Mode dark (#112) : ce fond violet reste CLAIR dans les deux themes. Or en
     dark, les variables DSFR de texte (--text-*-grey) basculent vers du clair
     -> texte clair sur violet clair = illisible. On REDEFINIT donc localement
     ces variables vers des teintes sombres : tout texte/label/radio de ce
     bloc qui s'appuie sur elles redevient lisible, sans toucher au reste de la
     page ni au choix du violet. Valeurs = tokens "grey" du theme light DSFR. */
  --text-title-grey: #161616;
  --text-default-grey: #3a3a3a;
  --text-mention-grey: #666;
  --text-action-high-grey: #161616;
  --border-action-high-blue-france: #000091;
  --background-default-grey: #fff;

  background: #cecefc;
  padding: 30px;
  border-radius: 4px;

  /* Couleur de texte de base du bloc (titres fr-h*, paragraphes, labels qui
     n'utiliseraient pas une variable ci-dessus). */
  color: #161616;
}

/* Titres et labels DSFR a l'interieur : forcer la teinte sombre meme si une
   regle DSFR dark les a passes en clair via une autre variable. */
.resultat-panel.resultat-panel--questions h2,
.resultat-panel.resultat-panel--questions .fr-h3,
.resultat-panel.resultat-panel--questions .fr-text--lead,
.resultat-panel.resultat-panel--questions .form-question-text,
.resultat-panel.resultat-panel--questions .fr-label {
  color: #161616;
}

.resultat-panel.resultat-panel--questions .form-question-group {
  margin-top: 18px;
}

/* ─── Scroll lié des 2 colonnes (#156) ─────────────────────────────────
   Avant, la colonne résultat était `position: sticky` : en scrollant, le
   formulaire défilait puis le résultat « collait » en haut -> effet en deux
   temps (on scrollait d'abord une colonne, puis l'autre). On retire le sticky :
   les 2 colonnes défilent ENSEMBLE avec la page, ancrées par le haut (la
   `.results-row` est déjà en `align-items: flex-start`). La plus longue
   continue naturellement quand l'autre est épuisée. */

/* ─── Section hero ─────────────────────────────────────────────────── */

.nitrates-hero-illustration {
  width: 480px;
  height: 480px;
  max-width: 100%;
  flex-shrink: 0;
  background: none;
}

.nitrates-hero-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Bascule illustration claire / sombre selon le thème (#190).
   Par défaut (clair) : on montre la version PNG claire, on cache la SVG dark.
   En dark : l'inverse. */
.nitrates-hero-illustration__dark {
  display: none;
}

[data-fr-theme="dark"] .nitrates-hero-illustration__light {
  display: none;
}

[data-fr-theme="dark"] .nitrates-hero-illustration__dark {
  display: block;
}

.nitrates-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}

/* ─── Layout 2 colonnes (form / result) avec animation split ──────── */

/* Centre toujours la row : le formulaire (et le couple form+result en
   split) doit etre centre dans le container, et non aligne sur le
   bord gauche du hero. Le hero garde sa structure 7/12 + 5/12 standard
   DSFR ; le bloc simulateur en-dessous est plus etroit et centre. */
.results-row {
  flex-wrap: nowrap;
  overflow: clip;
  justify-content: center;
}

/* #271 : sur la page résultat, aérer entre la zone carte/localisation (au-dessus)
   et le split (encart récap + résultat). Sans ça, le split est collé au panneau
   Commune/Département/Région, ce qui fait serré. */
.results-row.layout--split {
  margin-top: 2rem;
}

.results-row .form-col {
  transition:
    flex-basis 0.55s ease,
    max-width 0.55s ease;
}

/* #271 : mode saisie (non-split). La carte étant désormais pleine largeur
   au-dessus, la colonne des questions n'a plus besoin d'être limitée à ~58 % et
   centrée (ça créait un décalage à gauche). On la garde pleine largeur mais on
   borne la longueur de ligne pour le confort de lecture, alignée à gauche sous
   la carte. */
@media (width >= 992px) {
  .results-row:not(.layout--split) .form-col {
    flex-basis: 100%;
    max-width: 100%;
  }

  .results-row:not(.layout--split) .form-col .form-section,
  .results-row:not(.layout--split) .form-col #form-after-localisation {
    max-width: 760px;
  }
}

.results-row .result-col {
  flex-shrink: 0;
  max-width: 0;
  opacity: 0;
  transform: translateX(40px);
  overflow: hidden;
  pointer-events: none;
  transition:
    max-width 0.55s ease,
    opacity 0.4s ease 0.15s,
    transform 0.4s ease 0.15s;
}

.results-row.layout--split .result-col {
  max-width: 700px;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* ─── Panneau resultat ─────────────────────────────────────────────── */

.resultat-panel {
  background: var(--background-alt-grey);
  border-radius: 8px;
  padding: 1.5rem 2rem;
  color: var(--text-default-grey);
}

.resultat-panel h2,
.resultat-panel h3,
.resultat-panel h4 {
  color: var(--text-title-grey);
}

.resultat-panel p {
  color: var(--text-default-grey);
}

.resultat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid #ddd;
}

.resultat-row:last-of-type {
  border-bottom: none;
}

.resultat-row__label {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-title-grey);
}

/* ─── Badges resultat (couleurs maquette) ─────────────────────────── */

.resultat-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.resultat-badge--concerne {
  background: #dee9fd;
  color: #0063cb;
}

.resultat-badge--autorise {
  background: #b8fec9;
  color: #18753c;
}

.resultat-badge--interdit {
  background: #ffeaeb;
  color: #e1000f;
}

.resultat-badge--conditionnel {
  background: #ffe0b2;
  color: #b35900;
}

.resultat-badge--neutre {
  background: #eaeaea;
  color: #666;
}

/* ─── Accordeons : on respecte le style DSFR par defaut ─────────────
   - Bouton ferme (aria-expanded=false) : couleur DSFR France #000091
   - Bouton ouvert (aria-expanded=true) : on force le noir maquette
   - Contenu (.fr-collapse) : noir maquette aussi
*/

.resultat-panel .fr-accordion__btn[aria-expanded="true"] {
  color: var(--text-title-grey);
}

.resultat-panel .fr-collapse {
  color: var(--text-default-grey);
}

/* Sur petit ecran, les colonnes passent en stack vertical */
@media (width <= 991px) {
  .results-row {
    flex-wrap: wrap;
    overflow: visible;
  }

  .results-row .result-col {
    max-width: 100%;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    overflow: visible;
    margin-top: 2rem;
  }
}

/* ─── Panel debug parcours (mode developpeur) ──────────────────────── */

.nitrates-debug-panel {
  background: var(--background-default-grey);
  border: 1px solid var(--border-default-grey);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 0.8125rem;
}

.nitrates-debug-panel > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text-title-grey);
}

.nitrates-debug-panel__section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-default-grey);
}

.nitrates-debug-panel__section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.nitrates-debug-panel__title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-mention-grey);
  margin: 0 0 6px;
}

.nitrates-debug-panel__admin-link {
  margin-left: 10px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #b06a00;
  text-decoration: none;
}

.nitrates-debug-panel__admin-link:hover {
  text-decoration: underline;
}

/* Liste cle/valeur en 2 colonnes : libelle a gauche, valeur a droite,
   les valeurs longues passent a la ligne sans deborder. */
.nitrates-debug-panel__dl {
  display: grid;
  grid-template-columns: minmax(180px, max-content) 1fr;
  gap: 4px 16px;
  margin: 0;
}

.nitrates-debug-panel__dl dt {
  font-weight: 600;
  color: var(--text-default-grey);
}

.nitrates-debug-panel__dl dd {
  margin: 0;
  word-break: break-word;
}

.nitrates-debug-panel__dl dd code,
.nitrates-debug-panel__path code {
  background: var(--background-alt-grey);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Chemin parcouru : une etape par ligne, numerotee, plus lisible que
   l'ancien rendu inline. */
.nitrates-debug-panel__path {
  margin: 0;
  padding-left: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nitrates-debug-panel__path li {
  list-style: decimal;
}

/* ─── Form bloque tant que pas de clic carte (issues #89, #96) ────────── */
.form-locked-message {
  margin-top: 24px;
  padding: 16px 20px;
  background: #f0f4fa;
  border-left: 4px solid #1f4789;
  border-radius: 4px;
  color: #1d1d1d;
}

.form-locked-message p {
  margin: 0;
}

/* ─── Bascule de theme clair/sombre, pied de page (#83) ──────────────────── */

.nitrates-theme-toggle {
  display: inline-flex;
  gap: 4px;
  margin-top: 12px;
}

.nitrates-theme-toggle__btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid var(--border-default-grey, #ddd);
  border-radius: 4px;
  background: var(--background-default-grey, #fff);
  color: var(--text-default-grey, #3a3a3a);
}

.nitrates-theme-toggle__btn:hover {
  background: var(--background-alt-grey, #f3f4f6);
}

/* Bouton du theme actuellement force (light ou dark) : mis en avant. */
.nitrates-theme-toggle__btn--active {
  border-color: var(--border-action-high-blue-france, #000091);
  background: var(--background-action-low-blue-france, #e3e3fd);
  color: var(--text-action-high-blue-france, #000091);
}

/* ─── Mode sombre : bloc Questions complementaires (#83) ─────────────────
   En light le bloc est violet pastel clair (#cecefc) + texte noir (#112). En
   sombre on bascule vers un violet FONCE (#24244b) + texte blanc, qui s'integre
   au theme sombre au lieu de detoner comme un ilot clair. On reaffecte les
   variables DSFR localement (inverse du fix #112) pour que titres / labels /
   radios suivent, et on adapte le bouton. */
[data-fr-theme="dark"] .resultat-panel.resultat-panel--questions {
  --text-title-grey: #fff;
  --text-default-grey: #e9e9f5;
  --text-mention-grey: #c4c4dd;
  --text-action-high-grey: #fff;

  /* Bordure du radio coche : un violet clair visible sur le fond fonce. */
  --border-action-high-blue-france: #b8b8f8;
  --background-default-grey: #24244b;

  background: #24244b;
  color: #fff;
}

[data-fr-theme="dark"] .resultat-panel.resultat-panel--questions h2,
[data-fr-theme="dark"] .resultat-panel.resultat-panel--questions .fr-h3,
[data-fr-theme="dark"] .resultat-panel.resultat-panel--questions .fr-text--lead,
[data-fr-theme="dark"]
  .resultat-panel.resultat-panel--questions
  .form-question-text,
[data-fr-theme="dark"] .resultat-panel.resultat-panel--questions .fr-label {
  color: #fff;
}

/* Boutons primaires du simulateur en sombre (hero "Voir les regles", submit
   "Lancer la simulation") : par defaut le DSFR dark rend un texte bleu fonce
   sur un fond violet-bleu clair -> contraste insuffisant (retour Max #83). On
   force un bouton bleu france franc + texte blanc, plus lisible et net.
   Regle GENERALE (tous les .fr-btn de la page simulateur). Le bouton du bloc
   QC est re-traite juste apres (cascade : meme specificite, ordre l'emporte). */
[data-fr-theme="dark"] .fr-container .fr-btn {
  background-color: #6a6af5;
  color: #fff;
}

[data-fr-theme="dark"] .fr-container .fr-btn:hover {
  background-color: #8585f6;
}

/* Bouton "Recommencer" en sombre = style SECONDARY (maquette #189) : la règle
   générale ci-dessus le rendait plein violet comme un primaire. On le repasse
   en secondaire (fond transparent + bordure + texte bleu clair) pour le
   distinguer de l'action primaire. Ciblé par l'icône refresh, placé APRÈS la
   règle générale pour la surcharger. */
[data-fr-theme="dark"] .fr-container .fr-btn.fr-icon-refresh-line {
  background-color: transparent;
  color: #cacafb;
  box-shadow: inset 0 0 0 1px #8585f6;
}

[data-fr-theme="dark"] .fr-container .fr-btn.fr-icon-refresh-line:hover {
  background-color: rgb(133 133 246 / 12%);
  color: #fff;
}

/* Bouton desactive en sombre (Carte #154) : la regle ci-dessus force un bleu
   franc + texte blanc pour TOUS les .fr-btn, ce qui masquait l'etat disabled
   (le bouton "Lancer la simulation" paraissait actif tant que le form etait
   incomplet). On redonne un rendu grise + curseur interdit quand disabled. */
[data-fr-theme="dark"] .fr-container .fr-btn:disabled,
[data-fr-theme="dark"] .fr-container .fr-btn[aria-disabled="true"] {
  background-color: #3a3a4d;
  color: #8a8a9e;
  cursor: not-allowed;
}

[data-fr-theme="dark"] .fr-container .fr-btn:disabled:hover,
[data-fr-theme="dark"] .fr-container .fr-btn[aria-disabled="true"]:hover {
  background-color: #3a3a4d;
}

/* Bouton du bloc QC en sombre : sur le violet fonce #24244b, on veut un bouton
   qui ressort en clair (violet tres clair + texte fonce). Place APRES la regle
   generale pour la surcharger sur ce bloc precis. */
[data-fr-theme="dark"] .resultat-panel.resultat-panel--questions .fr-btn {
  background-color: #c3c3fb;
  color: #1b1b35;
}

[data-fr-theme="dark"] .resultat-panel.resultat-panel--questions .fr-btn:hover {
  background-color: #d6d6fd;
}

/* ─── Section "région pas encore ouverte" (carte #57) ────────────────── */
.form-region-fermee {
  margin-top: 24px;
  padding: 28px 32px;
  background: #f5f7fb;
  border: 1px solid #dde3ee;
  border-radius: 12px;
  color: #2a2f3a;
  box-shadow: 0 2px 6px rgb(0 0 0 / 6%);
}

/* Titre + sous-texte alignés sur la même colonne de gauche : le cadenas est
   posé en marqueur de liste (hors flux du texte) pour que les deux lignes
   commencent au même point. */
.form-region-fermee__titre {
  margin: 0 0 10px;
  padding-left: 2rem;
  position: relative;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.4;
  color: #1d1d1d;
}

.form-region-fermee__cadenas {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.3rem;
}

.form-region-fermee__texte {
  margin: 0;
  padding-left: 2rem;
  font-size: 1rem;
  line-height: 1.55;
  color: #45474d;
}

/* #287 — Recueil d'email « prévenez-moi à l'ouverture de ma région ». */
.form-region-fermee__alerte {
  padding-left: 2rem;
  margin-top: 1.5rem;
}

.form-region-fermee__alerte .fr-label {
  margin-bottom: 0.5rem;
}

.form-region-fermee__ligne {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.form-region-fermee__ligne .fr-input {
  flex: 1 1 220px;
  min-width: 0;
}

.form-region-fermee__ligne .fr-btn {
  flex: 0 0 auto;
}

/* Case de consentement : taille normale (sans le CSS DSFR complet, la case
   pouvait s'étirer). On borne la case et on aère le label. */
.form-region-fermee__alerte .fr-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.form-region-fermee__alerte .fr-checkbox-group input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
}

.form-region-fermee__alerte .fr-checkbox-group .fr-label {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-mention-grey, #666);
}

/* Le message d'erreur porte la classe DSFR fr-error-text qui force un display :
   ça écrasait l'attribut [hidden] -> l'erreur s'affichait tout le temps. On
   rétablit la priorité de [hidden]. */
.form-region-fermee__alerte [hidden] {
  display: none !important;
}

.form-region-fermee__merci {
  padding-left: 2rem;
  margin-top: 1.25rem;
  font-weight: 700;
  color: var(--text-default-success, #18753c);
}

/* Plafond d'azote : encart DSFR avec la valeur chiffree mise en avant
   (cf. retour Max 2026-06-18 : le plafond etait plaque en texte brut). */
.nitrates-plafond__valeur {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.nitrates-plafond__unite {
  font-size: 1rem;
  font-weight: 500;
  margin-left: 0.25rem;
}

/* Recap des periodes sous le calendrier statique (#159) : regroupement par
   section (titre + liste a puces) + picto info portant la justification. */
.periodes-section-titre {
  margin: 0.75rem 0 0.25rem;
  font-weight: 700;
}

/* ul.periodes-liste : specificite (0,1,1) pour battre le reset DSFR sur `ul`
   (qui pose padding:0 + list-style via variables). On force la puce disc et
   une indentation franche du bloc sous le titre (margin-inline-start pousse la
   puce a droite du titre, padding-inline-start reserve l'espace puce->texte). */
ul.periodes-liste {
  margin: 0;
  margin-inline-start: 0.75rem;
  padding-inline-start: 1.25rem;
  padding-left: 1.25rem;
  list-style-type: disc;
  list-style-position: outside;
}

/* #248 : declencheur d'infobulle DSFR (bouton) inline dans la liste des
   periodes. On garde l'icone/le comportement DSFR, on aligne juste le bouton
   sur le texte de la puce. */

/* #248 : declencheur d'infobulle DSFR inline dans une liste de periodes.
   L'icone DSFR par defaut (--icon-size: 1rem) est trop petite et le bouton
   (min-height: 2rem) s'aligne mal sur la ligne de texte. On agrandit l'icone
   et on centre le bouton verticalement sur le texte de la puce. */
.periodes-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; /* centre l'icone sur la hauteur de la ligne (24px) */
}

.periodes-info.fr-btn--tooltip::before {
  --icon-size: 1.25rem; /* 20px au lieu de 16px */

  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"] .periodes-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"] .periodes-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;
}

/* ─── Focus clavier visible sur tous les boutons/liens d'action (Carte #154,
   a11y) ────────────────────────────────────────────────────────────────────
   Anneau bleu net et coherent au clavier (Tab) sur les .fr-btn de la page
   simulateur : CTA hero "Voir les conditions d'epandage", "Lancer la
   simulation", "Recommencer" de la page resultat. box-shadow (respecte le
   border-radius) + offset via un 2e halo blanc pour detacher du fond. On ne
   cible que :focus-visible -> pas d'anneau au clic souris, seulement clavier. */
.fr-container .fr-btn:focus-visible,
.fr-container a.fr-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #0a76f6;
}

[data-fr-theme="dark"] .fr-container .fr-btn:focus-visible,
[data-fr-theme="dark"] .fr-container a.fr-btn:focus-visible {
  box-shadow:
    0 0 0 2px #1b1b1b,
    0 0 0 4px #8585f6;
}

/* ─── Barre de progression du parcours (Carte #154) ──────────────────────────
   Fine barre fixee en haut, pleine largeur, facon YouTube. Violet DSFR
   (blue-france). Avance a mesure des reponses (progress.js). z-index au-dessus
   du bandeau construction (2001) pour rester le fil le plus haut. Cachee tant
   qu'aucune progression (page d'accueil), revelee via .is-visible. */
.nitrates-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 3000;
  background: transparent;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    top 0.35s ease;
  pointer-events: none;
}

/* Quand le bandeau "En construction" est affiche (root public scrolle), on
   cale la barre de progression JUSTE SOUS lui (Carte #154). Hauteur du bandeau
   ~ min-height 1.25rem + padding 0.4rem*2 ~ 2.05rem. La transition sur `top`
   accompagne l'apparition/disparition du bandeau. */
html.nitrates-construction-visible .nitrates-progress {
  /* Se cale sous la hauteur RÉELLE du bandeau (varie selon le nombre de lignes,
     surtout mobile). Fallback 2.05rem si la var n'est pas encore posée. #271 */
  top: var(--nitrates-construction-h, 2.05rem);
}

.nitrates-progress.is-visible {
  opacity: 1;
}

.nitrates-progress__fill {
  height: 100%;
  width: 0;
  background: #6a6af5;

  /* Montee douce facon YouTube : la largeur s'anime a chaque reponse. */
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 6px rgb(106 106 245 / 60%);
}

[data-fr-theme="dark"] .nitrates-progress__fill {
  background: #8585f6;
  box-shadow: 0 0 6px rgb(133 133 246 / 70%);
}

/* ─── Panneau de chargement de la localisation (Carte #154) ──────────────────
   Affiche pendant le reverse-geocode. Barre "fake" a montee exponentielle
   (largeur pilotee par simulator.js). Violet DSFR, coherent avec le reste. */
.nitrates-loc-loading {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--background-alt-grey, #f6f6f6);
  border-left: 3px solid #6a6af5;
  border-radius: 2px;
}

.nitrates-loc-loading__label {
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-title-grey);
}

.nitrates-loc-loading__bar {
  height: 6px;
  border-radius: 3px;
  background: rgb(106 106 245 / 18%);
  overflow: hidden;
}

.nitrates-loc-loading__fill {
  height: 100%;
  width: 0;
  background: #6a6af5;
  border-radius: 3px;
  transition: width 0.12s linear;
}

[data-fr-theme="dark"] .nitrates-loc-loading {
  background: #2a2a33;
}

[data-fr-theme="dark"] .nitrates-loc-loading__bar {
  background: rgb(133 133 246 / 22%);
}

[data-fr-theme="dark"] .nitrates-loc-loading__fill {
  background: #8585f6;
}

/* ─── #271 chantier 3 : drawer « Conditions d'épandage » ─────────────────────
   Panneau latéral qui slide depuis la droite. 2/3 de large sur desktop, plein
   écran sur mobile. Ouvert/fermé par drawer_conditions.js (classe --ouvert). */

/* Lien déclencheur (#271) : intégré dans la liste des périodes « autorisation
   sous condition », aligné SOUS la puce (même indentation que le texte). Pas un
   gros bouton bleu (tache, illisible) mais un lien clair qui rattache l'action à
   CETTE / CES période(s). L'item n'a pas de marqueur de liste. */
li.periodes-lien-conditions {
  list-style: none;
  margin-top: 0.15rem;
}

/* Le lien est un <p> (cas calculatrice hors liste) : léger retrait pour
   s'aligner visuellement sous les puces. */
p.periodes-lien-conditions {
  margin: 0.15rem 0 0;
  padding-left: 1.25rem;
}

.periodes-lien-conditions__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-weight: 600;

  /* DSFR ajoute un padding vertical aux .fr-link -> gros blanc au-dessus du
     lien. On le neutralise pour coller le lien à la période. */
  padding-top: 0;
  padding-bottom: 0;
}

.periodes-lien-conditions__icon {
  font-size: 1.05rem;
  line-height: 1;
}

/* Verrou du scroll body quand un drawer est ouvert. */
body.drawer-open {
  overflow: hidden;
}

/* Conteneur plein écran (overlay + panneau). hidden -> display:none. */
.drawer-conditions {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.drawer-conditions[hidden] {
  display: none;
}

.drawer-conditions__overlay {
  position: absolute;
  inset: 0;
  background: rgb(22 22 22 / 45%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.drawer-conditions--ouvert .drawer-conditions__overlay {
  opacity: 1;
}

/* Panneau : ancré à droite, 2/3 de large, translaté hors écran par défaut. */
.drawer-conditions__panel {
  position: absolute;

  /* top/bottom (pas height:100%) : quand on décale le `top` en JS pour passer
     sous le bandeau construction, la hauteur s'ajuste automatiquement grâce à
     bottom:0 -> le contenu ne déborde plus sous le viewport et reste scrollable
     jusqu'en bas (bug mobile #271). */
  top: 0;
  bottom: 0;
  right: 0;
  width: 66.6667%;
  max-width: 900px;
  background: var(--background-default-grey, #fff);
  color: var(--text-default-grey, #161616);
  box-shadow: -4px 0 24px rgb(0 0 0 / 20%);
  transform: translateX(100%);
  transition: transform 0.32s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drawer-conditions--ouvert .drawer-conditions__panel {
  transform: translateX(0);
}

/* En-tête du drawer : « Période(s) d'application : » à gauche, Fermer à droite,
   sur UNE seule ligne (gain de hauteur). */
.drawer-conditions__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem 0.5rem;
  flex: 0 0 auto;
}

.drawer-conditions__contenu {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* En-tête « Période(s) d'application : » + badges de dates. */
.drawer-conditions__application {
  margin-bottom: 1.25rem;
}

/* Libellé « Période(s) d'application : » (désormais dans l'en-tête, à gauche du
   bouton Fermer). */
.drawer-conditions__application-label {
  font-weight: 700;
  color: var(--text-title-grey, #161616);
}

/* Badges des dates de périodes ASC réinjectées : ORANGE (cohérent avec la zone
   « autorisé sous condition » du calendrier), icône 📅. NB : la var
   --cal-orange-fill vaut en réalité le fond ROUGE partagé (choix maquette #130),
   donc on pose ici un vrai orangé pâle + le contour orange --cal-orange-ink. */
.drawer-conditions__date-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;

  /* EXACTEMENT l'orange des hachures « autorisé sous condition » du calendrier
     (--cal-orange-ink #fa7a35), en fond PLEIN et SANS bordure (comme la
     maquette designer). Texte foncé pour le contraste sur l'orange. */
  background: var(--cal-orange-ink, #fa7a35);
  border: none;
  color: var(--text-default-grey, #161616);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.drawer-conditions__date-icon {
  font-size: 0.95rem;
}

/* Mobile : plein écran, slide identique. */
@media (width < 768px) {
  .drawer-conditions__panel {
    width: 100%;
    max-width: none;
  }
}

[data-fr-theme="dark"] .drawer-conditions__panel {
  background: var(--background-default-grey, #1e1e1e);
}

[data-fr-theme="dark"] .drawer-conditions__date-badge {
  background: var(--cal-orange-ink, #fa7a35);
  color: #161616;
}