/* ─── Pilotage des trois états ──────────────────────────────────────
   Un seul attribut sur le conteneur racine commande les quatre zones :
   data-livredor-etat="depot" | "mur" | "clos". Un rédacteur le change
   depuis l'éditeur, sans JS et sans trois patterns concurrents.

   La maquette pilotait par l'attribut hidden : il ne suffit pas. hidden
   ne vaut display:none que dans la feuille du NAVIGATEUR, la moins
   prioritaire, et le display:grid de .pf-livredor__grid le battait. La
   zone restait donc posée, visible et cliquable. Même famille de piège
   que la façade uMap.

   Le rétablissement redéclare le display parce que la mise en veille
   ci-dessous pèse (0,2,0), plus lourd que la règle du composant. */
.pf-livredor [data-role] { display: none; }

.pf-livredor[data-livredor-etat="depot"] [data-role="depot"],
.pf-livredor[data-livredor-etat="mur"]   [data-role="depot"] { display: grid; }

.pf-livredor[data-livredor-etat="depot"] [data-role="attente"],
.pf-livredor[data-livredor-etat="mur"]   [data-role="mur"],
.pf-livredor[data-livredor-etat="clos"]  [data-role="mur"],
.pf-livredor[data-livredor-etat="clos"]  [data-role="clos"] { display: block; }

.pf-livredor .pf-section--cream { background: var(--cream); }


/* ─── Dépôt : la colonne de gauche ──────────────────────────────── */
.pf-livredor__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: start;
}

.pf-livredor__intro p {
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 52ch;
  text-wrap: pretty;
}

.pf-livredor__rules {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.pf-livredor__rules li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Le tiret de puce est décoratif : un pseudo-élément, rien dans le DOM. */
.pf-livredor__rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 12px;
  height: 2px;
  background: var(--yellow);
}


/* ─── Dépôt : la carte du formulaire ───────────────────────────────
   Le formulaire est Fluent Forms (voir la section FLUENT FORMS plus
   bas) ; le markup de la maquette, et ses règles, sont retirés.

   La carte vise le <div> seul, pas le <form>. La classe passée par
   css_classes au shortcode se retrouve sur le conteneur .fluentform ET
   sur le <form> qu'il contient : visée sans type, elle dessinait une
   carte dans la carte, bordure, ombre et 34 px de marge doublés. */
.pf-livredor div.pf-livredor__form {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 34px;
}

.pf-livredor .pf-section--cream div.pf-livredor__form {
  box-shadow: 0 24px 54px -34px rgba(20, 17, 50, .4);
}

.pf-livredor__mention {
  font-size: 13px;
  color: var(--ink-mute-AAA);
  max-width: 34ch;
}


/* ─── Mur : la barre de filtres ─────────────────────────────────── */
.pf-livredor__barre {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 30px;
}

.pf-livredor__filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* aria-pressed porte l'état, la classe ne fait que suivre : un filtre
   actif se lit au clavier autant qu'à l'écran. Cible tactile 44 px. */
.pf-livredor__filtres button {
  font: 500 14px/1 'Jost', system-ui, sans-serif;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pf-livredor__filtres button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

.pf-livredor__filtres .n {
  font-variant-numeric: tabular-nums;
  opacity: .7;
  font-size: 13px;
}

.pf-livredor__total {
  font-size: 15px;
  color: var(--ink-soft);
}

.pf-livredor__total strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}


/* ─── Mur : les messages ────────────────────────────────────────────
   L'accent d'étape passe par --sw et quatre classes modificatrices, et
   non par un style en ligne comme dans la maquette : pf-livredor.js a
   une classe à poser, pas une déclaration à composer, et KSES ne filtre
   pas une classe. Les variantes -AA parce que la couleur sert aussi de
   TEXTE sur l'étiquette .pf-msg__etape (contraste AA). */
.pf-msg--national { --sw: var(--navy); }
.pf-msg--paris    { --sw: var(--green); }
.pf-msg--lourdes  { --sw: var(--cyan-AA); }
.pf-msg--metz     { --sw: var(--red-AA); }

.pf-livredor__mur {
  columns: 3 300px;
  column-gap: 24px;
}

.pf-msg {
  break-inside: avoid;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--sw, var(--navy));
  border-radius: 8px;
  padding: 24px 26px;
  margin: 0 0 24px;
  transition: .25s ease;
}

.pf-msg:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 54px -28px rgba(20, 17, 50, .4);
}

.pf-msg__texte {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}

/* Les guillemets sont décoratifs : pseudo-éléments, pas de caractère
   dans le DOM, donc rien à échapper quand le JS injecte le texte. */
.pf-msg__texte::before { content: "«\00a0"; }
.pf-msg__texte::after  { content: "\00a0»"; }

.pf-msg__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.pf-msg__qui {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.pf-msg__ou {
  font-size: 14px;
  color: var(--ink-mute-AAA);
}

.pf-msg__etape {
  margin-left: auto;
  font: 700 11px/1 'Jost', system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--sw, var(--navy));
  border-radius: 999px;
  padding: 6px 10px;
}

.pf-livredor__plus {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* pf-livredor.js masque le bouton par hidden quand tout est affiché ;
   hidden ne vaut rien face au display:flex ci-dessus. */
.pf-livredor__plus[hidden] { display: none; }


/* ─── Attente : rien n'est encore publié ────────────────────────── */
.pf-livredor__attente {
  border: 1px dashed var(--rule);
  border-radius: 8px;
  background: var(--paper);
  padding: 52px 40px;
  text-align: center;
}

.pf-livredor__attente h3 {
  font: 500 clamp(24px, 3vw, 32px)/1.2 'Jost', system-ui, sans-serif;
  color: var(--navy);
  margin: 0 0 12px;
}

.pf-livredor__attente p {
  margin: 0 auto;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.pf-livredor__attente .pf-livredor__jauge {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 15px;
  color: var(--ink-mute-AAA);
}

.pf-livredor__clos { margin-bottom: 34px; }


/* ═══════════════════════════════════════════════════════════════════
   FLUENT FORMS : le formulaire réel
   ═══════════════════════════════════════════════════════════════════
   Fluent Forms 6.2.12, formulaire en style « Inherit Theme Style »,
   inséré par [fluentform id="…" css_classes="pf-livredor__form"].

   Les classes sont celles que Fluent Forms écrit réellement, relevées
   dans ses feuilles, pas supposées :

     .ff-el-group          un champ et son libellé
     .ff-el-input--label   le libellé
     .ff-el-input--content le conteneur du contrôle
     .ff-el-form-control   input, textarea, select
     .ff-el-form-check     une option de radio ou de case
     .ff-el-help-message   le texte d'aide sous le champ
     .ff-btn-submit        le bouton d'envoi
     .ff-t-container /
     .ff-t-cell            la grille en colonnes de Fluent Forms

   Tout est enfermé dans .pf-livredor .pf-livredor__form : ce fichier
   ne doit rien changer aux autres formulaires du site, à commencer par
   ceux des inscriptions.

   DEUX PIÈGES DE PLATEFORME, notés au brief §6 :

   1. Fluent Forms n'insère RIEN entre les options d'un champ radio. Les
      quatre pastilles d'étape sont donc un seul champ radio, et les
      .ff-el-form-check sont aplaties dans une grille commune par
      display:contents sur leur parent : sans cela le conteneur
      intermédiaire de Fluent Forms casse le flex.
   2. Le prénom est un champ TEXTE simple, pas le champ « Name » de
      Fluent Forms. Celui-ci emboîte sa propre .ff-t-container dans la
      cellule, que la grille ci-dessous découpe à son tour : constaté
      le 21 septembre 2026, libellé « PRÉ / NO / M » sur trois lignes
      dans un champ de 30 px.
   3. Aucune classe .pf-field ni .pf-field__row en « Container Class » :
      components.css les style pour un autre markup (flex en colonne,
      grille à deux colonnes) et elles se mêlent à celles-ci.

   L'ACCENT D'ÉTAPE --sw SE LIT SUR LA VALEUR DE L'OPTION. La maquette
   le posait en style sur chaque <label>, ce que Fluent Forms ne permet
   pas. Mais la valeur de chaque option (national, paris, lourdes,
   metz) est fixe, et c'est elle que le convertisseur JSON attend dans
   le champ « e » : :has([value="paris"]) la vise sans dépendre de
   l'ordre de saisie, là où un :nth-of-type se serait décalé au premier
   réordonnancement. Changer une valeur dans Fluent Forms casse donc
   la pastille ET le convertisseur.

   MARKUP RÉEL, relevé dans Checkable.php (6.2.12) : l'<input> est DANS
   le <label>, suivi d'un <span> de libellé. Aucun sélecteur de frère
   « input + label » ne peut donc matcher ; le point de couleur est un
   ::before du <span>, et le focus se lit par :has(:focus-visible). */
.pf-livredor .pf-livredor__form .ff-el-group { margin: 0 0 20px; }

.pf-livredor .pf-livredor__form .ff-el-input--label label {
  display: block;
  font: 600 12px/1.3 'Jost', system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute-AAA);
  margin-bottom: 8px;
}

/* L'astérisque de champ requis reste visible, et n'est pas le seul
   signal : Fluent Forms pose aussi aria-required sur le contrôle. */
.pf-livredor .pf-livredor__form .ff-el-is-required label::after { color: var(--red-AA); }

.pf-livredor .pf-livredor__form .ff-el-form-control {
  width: 100%;
  box-sizing: border-box;
  font: 400 16px/1.5 'Jost', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 14px 16px;
}

.pf-livredor .pf-livredor__form textarea.ff-el-form-control {
  min-height: 150px;
  resize: vertical;
}

.pf-livredor .pf-livredor__form .ff-el-form-control:focus {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-050);
}

.pf-livredor .pf-livredor__form .ff-el-help-message {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  font-style: normal;
  color: var(--ink-mute-AAA);
  margin-top: 7px;
}

/* Les colonnes d'un conteneur Fluent Forms, en parts égales quel que
   soit leur nombre : le flex-basis en ligne que pose Fluent Forms
   (50 %, 33 %) est sans effet dans une grille. Une colonne à 900. */
.pf-livredor .pf-livredor__form .ff-t-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 18px;
}

.pf-livredor .pf-livredor__form .ff-t-cell { min-width: 0; }

/* Rattachement : les quatre options en pastilles. display:contents sur
   le conteneur de Fluent Forms, voir le piège 1 ci-dessus. */
.pf-livredor .pf-livredor__form .ff-el-group.pf-livredor__dest .ff-el-input--content { display: contents; }

.pf-livredor .pf-livredor__form .ff-el-group.pf-livredor__dest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 26px;
}

.pf-livredor .pf-livredor__form .pf-livredor__dest .ff-el-form-check { margin: 0; }

.pf-livredor .pf-livredor__form .pf-livredor__dest .ff-el-form-check-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--cream);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: .2s;
}

/* Le bouton radio natif garde sa place dans l'arbre d'accessibilité :
   il est réduit, jamais display:none ni visibility:hidden, qui le
   sortiraient de la navigation au clavier.

   Il reste DANS sa pastille : label en relative, top et left remis à
   zéro. Fluent Forms lui pose top:-2px ; sans ancêtre positionné, le
   bouton radio montait à -2 px du haut du DOCUMENT, et le focus reçu au
   clic faisait défiler la page jusqu'à lui (constaté le 21 septembre
   2026 : saut de 266 px à chaque choix d'étape). */
.pf-livredor .pf-livredor__form .pf-livredor__dest .ff-el-form-check-label { position: relative; }

.pf-livredor .pf-livredor__form .pf-livredor__dest .ff-el-form-check-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 0;
  height: 0;
}

.pf-livredor .pf-livredor__form .pf-livredor__dest .ff-el-form-check-label:hover { border-color: var(--navy); }

.pf-livredor .pf-livredor__form .pf-livredor__dest .ff-el-form-check:has(:checked) .ff-el-form-check-label {
  background: var(--paper);
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
  font-weight: 500;
}

.pf-livredor .pf-livredor__form .pf-livredor__dest .ff-el-form-check-label:has(:focus-visible) {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

/* Le libellé du groupe et le message d'erreur sont devenus des items
   du flex par le display:contents : sans cette base, ils se logent sur
   la ligne des pastilles. */
.pf-livredor .pf-livredor__form .pf-livredor__dest > .ff-el-input--label,
.pf-livredor .pf-livredor__form .pf-livredor__dest .error { flex-basis: 100%; }

.pf-livredor .pf-livredor__form .pf-livredor__dest .ff-el-form-check-label > span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--sw, var(--navy));
}

.pf-livredor .pf-livredor__form .pf-livredor__dest .ff-el-form-check:has(:checked) .ff-el-form-check-label > span::before {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw, var(--navy)) 22%, transparent);
}

.pf-livredor .pf-livredor__dest .ff-el-form-check:has([value="national"]) { --sw: var(--navy); }
.pf-livredor .pf-livredor__dest .ff-el-form-check:has([value="paris"])    { --sw: var(--green); }
.pf-livredor .pf-livredor__dest .ff-el-form-check:has([value="lourdes"])  { --sw: var(--cyan-AA); }
.pf-livredor .pf-livredor__dest .ff-el-form-check:has([value="metz"])     { --sw: var(--red-AA); }

/* Consentement : le champ « Terms & Conditions », repéré par la classe
   .ff-el-tc que Fluent Forms lui pose toujours, sans Container Class à
   saisir. Son texte est enveloppé dans un .ff_t_c, où un <p> garderait
   sa marge de paragraphe. */
.pf-livredor .pf-livredor__form .ff-el-tc .ff_t_c p { margin: 0; }

.pf-livredor .pf-livredor__form .ff-el-tc .ff-el-form-check-label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.pf-livredor .pf-livredor__form .ff-el-tc .ff-el-form-check-input {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  accent-color: var(--navy);
  flex: none;
}

/* Le bouton d'envoi reprend .pf-btn-primary du thème : marine, jamais
   jaune. Le jaune reste aux appels au don (brief §5). */
.pf-livredor .pf-livredor__form .ff-btn-submit {
  margin: 0;
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

/* Message de succès : ce que voit le visiteur après l'envoi, et la
   seule confirmation qu'il reçoit avant le courriel de publication. */
.pf-livredor .pf-livredor__form .ff-message-success {
  border-left: 4px solid var(--green);
  background: var(--cream);
  color: var(--ink);
  padding: 16px 18px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .pf-livredor .pf-livredor__form .ff-t-container { grid-auto-flow: row; }
}


/* ─── Thème sombre : trois reprises, toutes mesurées ────────────────
   charte-v4-dark.css redéfinit les tokens, si bien que presque tout
   suit tout seul. Trois couples ne suivaient pas, et aucun ne le
   signalait autrement qu'à l'oeil :

   1. --navy-900 est le FOND GÉNÉRAL de nuit (#0B1233). Employé en
      couleur de texte sur une surface --paper, il donne 1,2:1. C'est
      le défaut déjà relevé sur .pf-umap__foot a (cartes-apercu.css).
      Corrigé plus haut : le texte sur surface est en --ink (13,9:1 de
      nuit, 12,1:1 de jour), jamais en --navy-900.
   2. Le filtre actif posait --paper sur --navy : 12,1:1 de jour, mais
      3,0:1 de nuit, --navy devenant l'accent clair #3E63D8. Sous les
      4,5:1 que demande un texte de 14 px. D'où l'inversion de nuit,
      --navy-900 sur --primary-deep : 5,8:1.
   3. Les deux accents de titre en --navy tombaient à 3,0 et 3,2:1.
      Au seuil du texte large, mais sans marge. --primary-deep, le
      token que le thème réserve aux accents de nuit, donne 5,0 et
      5,4:1.

   Ces règles pèsent (0,2,0) et l'emportent sur les nôtres en (0,1,0).
   L'accent d'étape, lui, n'a pas besoin d'être repris : il ne porte
   aucune information à lui seul, le libellé de l'étiquette dit
   l'étape en toutes lettres. */
html.pf-dark .pf-livredor__filtres button[aria-pressed="true"] {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  color: var(--navy-900);
}

html.pf-dark .pf-livredor__total strong,
html.pf-dark .pf-livredor__attente h3 { color: var(--primary-deep); }


/* ─── Paliers ───────────────────────────────────────────────────────
   900 px : le palier des composants du projet. Le formulaire passe
   sous la colonne de texte et le mur tombe en une colonne.
   .pf-field__row est déjà ramené à une colonne à 900 par
   components.css : rien à répéter ici. */
@media (max-width: 900px) {
  .pf-livredor__grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .pf-livredor__mur { columns: 1; }
}

@media (max-width: 480px) {
  .pf-livredor div.pf-livredor__form { padding: 24px 20px; }
}