/**
 * Contrôles de formulaire — case à cocher, interrupteur et liste de choix
 *
 * SOURCE UNIQUE des deux contrôles, pour les DEUX consommateurs : les blocs du
 * thème et le markup des outils (plugin `admin-tools`). Chargée sans condition
 * de page, comme `buttons.css` — les deux consommateurs vivent sur des pages
 * différentes, une feuille conditionnelle en manquerait toujours un.
 *
 * L'INTERRUPTEUR VIENT DU PLUGIN. Il existait dans
 * `admin-tools/assets/css/film-maker.css:98-185`, correctement structuré mais
 * chargé sur UN SEUL outil, avec six couleurs en dur — dont deux prises à la
 * palette de l'admin WordPress (`#2271b1`, `#1d2327`) — et zéro règle de mode
 * sombre. Rapatrié ici à l'identique de structure : même markup
 * (`__input` / `__track` / `__label`), aucun renommage, donc aucune migration
 * à faire côté plugin. Le plugin n'a qu'à supprimer son bloc.
 *
 * LE MODE SOMBRE EST GRATUIT. Aucune règle sous `[data-theme="dark"]` ici :
 * les jetons sources (`--gray-300`, `--primary-color`, `--text-inverse`) sont
 * déjà redéfinis par `main.css` en sombre. Si ce fichier devait un jour
 * déclarer une couleur sous `[data-theme]`, c'est que le jeton choisi serait
 * le mauvais.
 *
 * BOUTONS : voir `assets/css/buttons.css`. LISTE DE CHOIX (boutons radio en
 * cartes) : FRT-25 — même jeton d'état, même anneau de focus. DROPZONE
 * D'UPLOAD DANS UN PANNEAU « FOND SECONDAIRE » : en fin de fichier, FRT-26 —
 * variante de `.form-upload__dropzone`, dont la base reste dans tool-tabs.css.
 * ZONE D'UPLOAD INTÉGRÉE `.form-drop` (plugin) : en fin de fichier, FRT-27 — elle
 * cohabite avec la dropzone d'origine le temps d'un test sur un outil.
 * FILM MAKER V2 (3.0.0.163) : variantes `.form-choices--cards` (formats) et
 * `.form-choices--pills` (filtres), note d'interrupteur `.form-toggle__note`,
 * `.form-drop` sur fond blanc et `.form-drop--single`, lecteur `.form-audio`.
 *
 * @package Toolbox
 * @since 3.0.0.135 (FRT-22)
 */

/* ==========================================================================
   Interrupteur — .form-toggle
   Markup canonique (émis par le plugin, ne pas renommer) :

   <label class="form-toggle">
     <input type="checkbox" class="form-toggle__input" name="…">
     <span class="form-toggle__track"></span>
     <span class="form-toggle__label">Libellé</span>
   </label>
   ========================================================================== */

.form-toggle {
  /*
   * Jetons du composant. Les dimensions étaient figées en dur dans le plugin
   * (40/22/18/2) ; elles sont reprises telles quelles pour que le rendu ne
   * bouge pas, mais nommées — retoucher la taille se fait ici, une fois.
   */
  --toggle-width: 40px;
  --toggle-height: 22px;
  --toggle-thumb-size: 18px;
  --toggle-inset: 2px;

  /*
   * Coloris d'état. Arbitré le 2026-09-24 (rsuard) : l'actif passe du vert
   * `#4caf50` — hors palette du projet — au bleu de Talia, qui est déjà la
   * couleur de TOUS les états actifs du thème (onglet de catalogue actif,
   * radio coché, option sélectionnée). La case à cocher de FRT-22 partagera
   * ce même jeton : un interrupteur bleu et une case verte n'auraient pas eu
   * de sens sur le même formulaire.
   */
  --toggle-track-off: var(--gray-300);
  --toggle-track-on: var(--primary-color);
  --toggle-thumb: var(--text-inverse);

  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 24px; /* cible tactile, la piste seule ne fait que 22px */
  cursor: pointer;
  user-select: none;
}

/* Ordre explicite (l'aide reste à droite du libellé) */
.form-toggle .form-toggle__track { order: 1; }
.form-toggle .form-toggle__label { order: 2; }
.form-toggle .form-section__hint-icon { order: 3; margin-left: -0.35rem; }

/* Précision grise dans le libellé d'un interrupteur : « (passages sans son) » */
.form-toggle__note {
    margin-left: 0.25rem;
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--text-secondary);
}

/*
 * Case masquée mais focusable : c'est elle qui porte l'état, le clavier et
 * l'envoi du formulaire. Pas de réimplémentation au JS.
 */
.form-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Piste */
.form-toggle__track {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: var(--toggle-width);
  height: var(--toggle-height);
  background-color: var(--toggle-track-off);
  border-radius: calc(var(--toggle-height) / 2);
  transition: background-color var(--transition-normal, 0.25s ease);
}

/* Pouce */
.form-toggle__track::after {
  content: "";
  position: absolute;
  top: var(--toggle-inset);
  left: var(--toggle-inset);
  width: var(--toggle-thumb-size);
  height: var(--toggle-thumb-size);
  background-color: var(--toggle-thumb);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  /* `transform` plutôt que `left` : le plugin animait `left`, qui déclenche
     une mise en page à chaque image. */
  transition: transform var(--transition-normal, 0.25s ease);
}

/*
 * PAS DE COCHE DANS LE POUCE — retiré le 2026-09-24, et pour deux raisons.
 *
 * 1. ÇA CASSAIT LE FILM-MAKER. La coche était posée sur `::before`, que le
 *    plugin n'utilise pas : sa feuille, chargée après la nôtre, écrasait bien
 *    notre piste et notre pouce (`::after`) — mais RIEN n'écrasait notre
 *    `::before`. Résultat à l'écran : sa coche verte sur le pouce, ET notre
 *    coche bleue à côté. Deux coches. J'avais écrit que la transition ne
 *    casserait rien ; c'était faux, parce qu'un pseudo-élément que l'autre
 *    feuille ne déclare pas n'est écrasé par personne.
 *
 * 2. ELLE NE SERVAIT À RIEN. La position du pouce et la couleur de la piste
 *    disent déjà l'état, deux fois. Une coche de 12px à l'intérieur d'un cercle
 *    de 18px ne le dit pas une troisième fois de façon lisible.
 *
 * Le composant n'écrit donc plus que ce que le plugin écrit aussi. Sur le
 * film-maker, sa feuille gagne entièrement — même rendu qu'avant nos livraisons.
 * Partout ailleurs, c'est le nôtre.
 */

.form-toggle__input:checked + .form-toggle__track {
  background-color: var(--toggle-track-on);
}

.form-toggle__input:checked + .form-toggle__track::after {
  transform: translateX(calc(var(--toggle-width) - var(--toggle-thumb-size) - var(--toggle-inset) * 2));
}

/* Focus clavier — même anneau que les autres champs du thème */
.form-toggle__input:focus-visible + .form-toggle__track {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Survol */
.form-toggle:hover .form-toggle__track {
  background-color: var(--gray-400);
}

.form-toggle:hover .form-toggle__input:checked + .form-toggle__track {
  background-color: var(--primary-light);
}

/* Désactivé */
.form-toggle__input:disabled + .form-toggle__track {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-toggle:has(.form-toggle__input:disabled) {
  cursor: not-allowed;
}

/* Libellé */
.form-toggle__label {
  font-size: var(--font-size-sm, 0.9375rem);
  color: var(--text-primary);
  line-height: 1.3;
}

/* ==========================================================================
   Case à cocher — .form-checkbox
   Markup canonique (thème et outils) :

   <label class="form-checkbox">
     <input type="checkbox" name="…"> Libellé
   </label>

   CINQ conventions coexistaient (relevé FRT-22, 29 déclarations sur 5 feuilles),
   avec trois tailles concurrentes — 1rem, 1.1rem, scale(1.2) — et UN SEUL
   :focus-visible sur cinq. Elles REJOIGNENT la liste de sélecteurs ci-dessous
   plutôt que d'en recopier les valeurs : c'est la règle 1 de FRT-6, et c'est ce
   qui permet de retirer leurs déclarations de tool-tabs.css, login.css et
   plugin-integration.css sans toucher à un seul markup.

   `.option-selection__checkbox` n'est PAS dans la liste : ce n'est pas une case,
   c'est une carte sélectionnable qui masque volontairement son input
   (opacity: 0) et peint `.option-selection__item`.

   LA COCHE EST UNE IMAGE DE FOND, pas un pseudo-élément : `::after` sur un
   `input` marche en pratique une fois `appearance: none` posé, mais reste un
   comportement que la spec ne garantit pas sur un élément remplacé. Et le trait
   peut être écrit en blanc EN DUR, contrairement à celui de l'interrupteur
   ci-dessus : une case cochée est toujours blanche sur le coloris primaire, en
   clair comme en sombre. C'est `--text-inverse`, qui vaut #ffffff dans les deux
   thèmes — il n'y a rien à tokeniser.
   ========================================================================== */

.form-checkbox,
.talia-register-cguv__label,
.form-consent--rgpd {
  --checkbox-size: 1.125rem;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  color: var(--text-secondary);
  cursor: pointer;
}

.form-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.5rem);
}

/*
 * La case elle-même. `.form-field input[type="checkbox"]` est dans la liste
 * parce que `.form-field input` (0,1,1) pose bordure, padding et width: 100%
 * sur TOUTE entrée, case comprise — il faut le battre, pas le subir.
 */
.form-checkbox input[type="checkbox"],
.form-field input[type="checkbox"],
.talia-register-cguv__label input[type="checkbox"],
.form-consent__checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: var(--checkbox-size, 1.125rem);
  height: var(--checkbox-size, 1.125rem);
  /* remet à zéro ce que les règles de champ génériques auraient posé */
  min-width: 0;
  padding: 0;
  margin: 0;
  background-color: var(--bg-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 72% 72%;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm, 4px);
  cursor: pointer;
  transition: background-color var(--transition-normal, 0.2s ease),
              border-color var(--transition-normal, 0.2s ease);
}

.form-checkbox input[type="checkbox"]:hover,
.form-field input[type="checkbox"]:hover,
.talia-register-cguv__label input[type="checkbox"]:hover,
.form-consent__checkbox:hover {
  border-color: var(--primary-color);
}

/*
 * Cochée : même jeton d'état que l'interrupteur. Une case verte et un
 * interrupteur bleu sur le même formulaire n'auraient pas eu de sens — c'est
 * l'arbitrage du 2026-09-24.
 */
.form-checkbox input[type="checkbox"]:checked,
.form-field input[type="checkbox"]:checked,
.talia-register-cguv__label input[type="checkbox"]:checked,
.form-consent__checkbox:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* État indéterminé — un groupe partiellement coché */
.form-checkbox input[type="checkbox"]:indeterminate,
.form-field input[type="checkbox"]:indeterminate,
.form-consent__checkbox:indeterminate {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/*
 * Focus clavier. Il n'existait QUE sur la case CGUV de l'inscription — les
 * quatre autres conventions laissaient le défaut du navigateur, que les règles
 * de champ neutralisent par ailleurs (`outline: none` sur .form-field input).
 */
.form-checkbox input[type="checkbox"]:focus-visible,
.form-field input[type="checkbox"]:focus-visible,
.talia-register-cguv__label input[type="checkbox"]:focus-visible,
.form-consent__checkbox:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.form-checkbox input[type="checkbox"]:disabled,
.form-field input[type="checkbox"]:disabled,
.form-consent__checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/*
 * Case posée en tête d'un texte de plusieurs lignes (consentement RGPD, CGUV) :
 * elle s'aligne sur la première ligne, pas sur le centre du paragraphe.
 */
.talia-register-cguv__label input[type="checkbox"],
.form-consent__checkbox {
  margin-top: 0.15rem;
}

/* ==========================================================================
   Liste de choix — .form-choices / .form-choice  (FRT-25)
   Un choix UNIQUE parmi plusieurs options, chacune posée en carte. Markup
   canonique (thème et outils) — une boucle, un <label> par option :

   <fieldset class="form-choices">
     <legend class="form-choices__legend">Choisissez une option</legend>
     <label class="form-choice">
       <input type="radio" name="…" value="…" checked>
       <span class="form-choice__label">Libellé</span>
     </label>
     …
   </fieldset>

   Reprise de la maquette `docs/design_outil/onglets-liste-radio.html`
   (`.opt-choices` / `.opt-choice`), renommée dans la famille `.form-*` de ce
   fichier. Ses sept couleurs en dur sont des jetons, donc le mode sombre est
   gratuit ici aussi : zéro règle `[data-theme]`.

   RESPONSIVE SANS REQUÊTE MÉDIA. La grille remplit autant de colonnes de
   `--choice-min-width` que la place en offre, et tombe à une seule colonne
   quand le conteneur est plus étroit — `min(100%, …)` empêche la carte de
   déborder sur un écran de 320px. Pas de palier à maintenir (FRT-12).

   Ce n'est PAS une quatrième retouche du bouton radio. Trois conventions
   existent (relevé FRT-25), trois formes différentes, et aucune n'est un
   composant : la pilule de l'inscription (`.talia-register-icp__option`,
   login.css), le bouton plein des formulaires d'outil
   (`.tool-form-left input[type="radio"] + label`, main.css) et la carte à
   case masquée (`.option-selection__item`, tool-tabs.css). Leur adoption est
   un lot séparé : elle change le rendu d'écrans en production.

   NE PAS L'ENVELOPPER DANS `.form-field`. `.form-field label` (main.css,
   tool-tabs.css) pose flex-basis 25 %, padding et text-align: right sur tout
   libellé : il déferait chaque carte. La liste de choix EST le champ.
   ========================================================================== */

.form-choices {
  /*
   * Largeur sous laquelle une carte ne descend pas avant que la grille ne
   * passe à une colonne de moins. Valeur de la maquette.
   */
  --choice-min-width: 230px;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--choice-min-width)), 1fr));
  gap: var(--spacing-sm, 0.5rem);
  margin: 0;
  padding: 0;
  border: 0;
  /* un fieldset vaut `min-width: min-content` par défaut : sans ceci, il
     refuse de rétrécir sous sa plus longue carte et la grille déborde */
  min-width: 0;
}

.form-choices__legend {
  padding: 0;
  margin: 0 0 0.875rem;
  font-size: 0.8125rem; /* 13px, maquette — aucun jeton à cette taille */
  font-weight: 600;
  color: var(--text-secondary);
}

.form-choice {
  /*
   * Jetons du composant, valeurs de la maquette. Nommés comme ceux de
   * l'interrupteur : retoucher la taille se fait ici, une fois.
   */
  --choice-min-height: 52px; /* cible tactile confortable, au-delà des 44px */
  --choice-radius: 10px;
  --choice-dot-size: 18px;
  --choice-dot-ring: 5px;
  /* même jeton d'état que la case et l'interrupteur (arbitrage du 2026-09-24) */
  --choice-on: var(--primary-color);

  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--choice-min-height);
  margin: 0;
  padding: 0.75rem var(--spacing-md, 1rem);
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--choice-radius);
  box-sizing: border-box;
  color: var(--text-primary);
  font-size: 0.9375rem; /* 15px, maquette */
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color var(--transition-fast, 0.15s ease),
              background-color var(--transition-fast, 0.15s ease),
              box-shadow var(--transition-fast, 0.15s ease);
}

/*
 * Option qui commence une nouvelle ligne de la grille (FRT-25, suite).
 * Le retour à la ligne est voulu par l'admin (champ `break_after` du plugin) :
 * une grille `auto-fill` ne le connaît pas, la classe le lui dit. Sans effet
 * quand la grille tombe à une seule colonne — c'est le cas dans la colonne
 * d'un outil (~310px), le saut ne se voit que dans un conteneur d'au moins
 * 470px. Sans cette règle rien ne casse : la classe est ignorée et les cartes
 * se rangent comme avant.
 */
.form-choice--new-row {
  grid-column-start: 1;
}

/*
 * Survol : un bleu à mi-chemin de la bordure. La maquette posait #93c5fd en
 * dur, qui aurait crié sur fond sombre ; le mélange suit les deux thèmes.
 */
.form-choice:hover {
  border-color: color-mix(in oklab, var(--choice-on) 45%, var(--border-color));
}

/*
 * Le bouton radio lui-même, redessiné en `appearance: none` : un anneau qui
 * s'épaissit à la sélection. Pas de pseudo-élément, pour la même raison que
 * la case — la spec ne le garantit pas sur un élément remplacé.
 *
 * Sélecteur à (0,2,1) et non `.form-choice__input` (0,1,0) : il doit battre
 * `.tool-form-left input[type="radio"]` (main.css), qui MASQUE tous les radios
 * de la colonne d'un outil — position absolue, opacité et taille à zéro. Même
 * spécificité, cette feuille chargée après : c'est elle qui gagne. D'où les
 * quatre remises à plat explicites ci-dessous.
 */
.form-choice input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: static;
  opacity: 1;
  flex: 0 0 auto;
  width: var(--choice-dot-size);
  height: var(--choice-dot-size);
  min-width: 0;
  margin: 0;
  padding: 0;
  background-color: var(--bg-primary);
  border: 1.5px solid var(--gray-300);
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-width var(--transition-fast, 0.15s ease),
              border-color var(--transition-fast, 0.15s ease);
}

.form-choice input[type="radio"]:checked {
  border: var(--choice-dot-ring) solid var(--choice-on);
}

/* Focus clavier — même anneau que la case et l'interrupteur */
.form-choice input[type="radio"]:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/*
 * Carte sélectionnée. La bordure passe à 2px par une ombre intérieure, pas par
 * `border-width` : le contenu ne bouge pas d'un pixel au clic. Le fond se
 * TEINTE à partir de la surface, comme la notice de FRT-24 — la maquette
 * posait #eff6ff, qui serait resté un rectangle clair en thème sombre.
 *
 * Sans `:has()` (navigateurs antérieurs à 2023), la carte ne change pas de
 * fond, mais l'anneau du radio dit toujours l'état : dégradation acceptable.
 */
.form-choice:has(input[type="radio"]:checked) {
  border-color: var(--choice-on);
  box-shadow: inset 0 0 0 1px var(--choice-on);
  background-color: color-mix(in oklab, var(--choice-on) 8%, var(--bg-primary));
}

/* Désactivé */
.form-choice:has(input[type="radio"]:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-choice input[type="radio"]:disabled {
  cursor: not-allowed;
}

/* Un libellé long passe à la ligne, il n'élargit jamais la carte */
.form-choice__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Liste de choix en cartes — .form-choices--cards (Film Maker v2, formats)
   Pas de pastille radio : la carte entière porte l'état (bordure, fond).
   Le radio reste dans le DOM pour le clavier et les lecteurs d'écran.
   Sélecteur à (0,3,1) : il doit battre `.form-choice input[type="radio"]`.
   ========================================================================== */

/* auto-fit et non auto-fill : les colonnes vides sont repliées, les cartes se partagent la largeur */
.form-choices--cards {
    --choice-min-width: 200px;

    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--choice-min-width)), 1fr));
}

.form-choices--cards .form-choice,
.form-choices--pills .form-choice {
    position: relative;
}

.form-choices--cards .form-choice input[type="radio"],
.form-choices--pills .form-choice input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-choices--cards .form-choice:has(input[type="radio"]:focus-visible),
.form-choices--pills .form-choice:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.form-choices--cards .form-choice {
    min-height: 64px;
}

/* Pictogramme aux proportions du format : style="--choice-shape: 16 / 9" */
.form-choice__shape {
    flex: 0 0 auto;
    height: 1.625rem;
    aspect-ratio: var(--choice-shape, 1 / 1);
    background: var(--gray-400);
    border-radius: 3px;
}

/* Deuxième ligne du libellé (usage du format) */
.form-choice__desc {
    display: block;
    margin-top: 2px;
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--text-secondary);
}

/* ==========================================================================
   Liste de choix en pilules — .form-choices--pills (filtres)
   ========================================================================== */

/* Classe doublée : doit battre `.form-choices { display: grid }` quel que soit l'emplacement */
.form-choices.form-choices--pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.form-choices--pills .form-choice {
    min-height: 0;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.form-choices--pills .form-choice:has(input[type="radio"]:checked) {
    background-color: var(--text-primary);
    border-color: var(--text-primary);
    box-shadow: none;
    color: var(--bg-primary);
}

/* ==========================================================================
   Dropzone posée dans un panneau — FRT-26
   Dans une section « Fond secondaire » (.is-style-bg-secondary, main.css),
   la dropzone ne peut pas garder --bg-secondary : elle se fondrait dans son
   panneau. Elle passe sur --bg-primary (#fff en clair), sans rembourrage, et
   l'icône perd sa marge basse. En sombre elle garde ses couleurs d'origine
   (bg-tertiary, survol bg-secondary) : les règles sombres sont réécrites ici
   parce que le fond clair a une spécificité égale à celles de tool-tabs.css.
   Le composant vit ici, pas dans tool-tabs.css où est la dropzone de base :
   cette feuille se charge APRÈS tool-tabs (dépendance dans functions.php), donc
   la variante gagne à spécificité égale, sans dépendre d'un emplacement dans
   le fichier. La variante à .tool-form-left .form-section bat le rembourrage
   mobile (0,4,0) sans !important.
   ========================================================================== */

.is-style-bg-secondary .form-upload__dropzone,
.is-style-bg-secondary .form-upload__dropzone:hover,
.is-style-bg-secondary .form-upload__dropzone.is-dragover {
  background: var(--bg-primary);
}

.is-style-bg-secondary .form-upload__dropzone,
.single-tool-page .is-style-bg-secondary .form-upload__dropzone,
.single-tool-page .is-style-bg-secondary .tool-form-left .form-section .form-upload__dropzone {
  padding: 0;
}

.is-style-bg-secondary .form-upload__dropzone:hover,
.is-style-bg-secondary .form-upload__dropzone.is-dragover {
  border-color: var(--primary-color);
}

/* En sombre, la dropzone garde exactement ses couleurs d'origine (règles
   [data-theme="dark"] plus haut) : seul le blanc du clair est propre à ce contexte. */
[data-theme="dark"] .is-style-bg-secondary .form-upload__dropzone {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .is-style-bg-secondary .form-upload__dropzone:hover,
[data-theme="dark"] .is-style-bg-secondary .form-upload__dropzone.is-dragover {
  background: var(--bg-secondary);
}

.is-style-bg-secondary .form-upload__icon,
.single-tool-page .is-style-bg-secondary .form-upload__icon {
  margin: 0;
}

/* ==========================================================================
   Zone d'upload intégrée — .form-drop — FRT-27
   Composant : DO_Tool_Embedded_Upload_Renderer (plugin admin-tools). Zone
   d'upload à loger DANS un autre élément (onglet, panneau, modale). Le plugin
   émettait ce CSS en ligne dans un <style id="form-drop-css"> ; il vit ici,
   le plugin n'émet plus que le markup.

   COHABITE avec .form-upload__dropzone (tool-tabs.css) le temps du test sur
   un outil : on ne remplace pas l'un par l'autre d'un coup. Les deux ne se
   partagent AUCUNE règle, pour que retirer l'un ne touche pas l'autre.

   Écart avec le CSS d'origine du plugin :
   - jetons du thème seuls, zéro valeur de repli en dur ; `--radius-md` (qui
     n'existe pas) devient `--border-radius-md` ;
   - le focus clavier reçoit l'anneau commun des contrôles (outline 2px
     primary), l'original le supprimait (`outline: none`) au profit du seul
     changement de couleur de bordure.
   À ÉVITER dans les classes d'un composant posé sous .tool-form-left
   (sélecteurs par sous-chaîne, main.css section 10) : remove, delete,
   preview, thumb, file, selected, success.
   Fond --bg-primary : lisible tel quel sur un panneau .is-style-bg-secondary,
   en clair comme en sombre — aucune règle [data-theme].
   ========================================================================== */

.form-drop {
  width: 100%;
  max-width: 100%;
  /* le contenu qui suit ne doit pas coller à la zone ni à sa liste */
  margin-bottom: var(--spacing-md);
}

.form-drop__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg) var(--spacing-md);
  text-align: center;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius-md);
  transition: border-color 0.15s ease;
}

.form-drop__zone:hover,
.form-drop__zone.is-over {
  border-color: var(--primary-color);
}

.form-drop__zone:focus-visible {
  border-color: var(--primary-color);
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.form-drop__glyph {
  color: var(--primary-color);
}

.form-drop__title {
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.form-drop__hint {
  font-size: var(--font-size-sm);
}

/*
 * Les vignettes forment UN seul bloc (maquette « Zone upload 1b ») : le cadre,
 * le rayon et le fond sont portés par la liste, pas par chaque ligne. Les
 * lignes ne sont séparées que par un filet. `overflow: hidden` fait épouser
 * le rayon du cadre aux lignes d'extrémité.
 */
.form-drop__list {
  display: flex;
  flex-direction: column;
  margin: var(--spacing-sm) 0 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
}

.form-drop__list[hidden] {
  display: none;
}

.form-drop__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
}

.form-drop__item + .form-drop__item {
  border-top: 1px solid var(--border-color);
}

.form-drop__pic {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  background: var(--bg-tertiary) center / cover no-repeat;
  border-radius: var(--border-radius-md);
}

/* Nom + méta empilés ; c'est .__info qui prend la place, la croix reste à droite */
.form-drop__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.form-drop__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.form-drop__meta {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/*
 * Zone pleine : plus d'ajout possible tant qu'on n'en retire pas. L'input n'est
 * jamais désactivé (il ne serait plus envoyé avec le formulaire) : seul l'aspect
 * change, le composant ignore clic, clavier et dépôt. Placé APRÈS :hover et
 * :focus-visible de la zone, qu'il bat à l'ordre pour la bordure.
 */
.form-drop__zone.is-full,
.form-drop__zone.is-full:hover {
  cursor: default;
  border-color: var(--border-color);
  background: var(--bg-secondary);
}

/*
 * Zone d'upload posée sur une surface blanche (carte d'étape .form-step,
 * modale .modal-generic) : fond gris, comme une zone pleine ailleurs.
 * La zone pleine passe un cran plus foncé pour rester distincte d'une zone vide.
 */
.form-step .form-drop__zone,
.modal-generic .form-drop__zone {
  background: var(--bg-secondary);
}

.form-step .form-drop__zone.is-full,
.form-step .form-drop__zone.is-full:hover,
.modal-generic .form-drop__zone.is-full,
.modal-generic .form-drop__zone.is-full:hover {
  background: var(--bg-tertiary);
}

/* Upload à un seul fichier : la zone disparaît une fois le fichier choisi,
   seule reste la ligne du fichier (et sa croix pour le retirer). */
.form-drop--single .form-drop__zone.is-full {
  display: none;
}

.form-drop__clear {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
}

.form-drop__clear:hover {
  background: var(--bg-tertiary);
}

.form-drop__clear:focus-visible {
  background: var(--bg-tertiary);
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Écoute du fichier choisi dans une zone .form-drop */
.form-audio {
    display: block;
    width: 100%;
}

/* ==========================================================================
   Bloc « prompt » — .form-prompt — FRT-27 (suite)
   Remise à plat d'un conteneur de formulaire émis par le plugin, pour que le
   bloc se pose comme les autres contrôles. Reprise telle quelle de la demande
   de fmartins (2026-10-01) : `min-width: 0` est la remise à plat d'un
   `fieldset` (min-width: min-content par défaut, qui l'empêche de rétrécir
   dans une colonne étroite), `border`, `padding` et `margin-inline` celle de
   son cadre natif. Aucun autre style : la mise en forme reste celle du
   contexte qui le reçoit.
   ========================================================================== */

.form-prompt {
  margin-inline: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* ==========================================================================
   Sélecteur de voix — .voice-picker (plugin admin-tools)
   Liste de choix `.form-choices` + bouton d'écoute `.btn-icon` à droite.
   ========================================================================== */

/* Cartes plus étroites que le défaut (230px) : plusieurs voix par ligne dès que la place le permet */
.voice-picker .form-choices {
  --choice-min-width: 150px;
}

/* Deux sections (voix enregistrées / standards) : espace entre elles */
.voice-picker .form-choices + .form-choices {
  margin-top: 1rem;
}

/* Titre de section en capitales, comme la maquette */
.voice-picker .form-choices__legend {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Bouton d'écoute : rond, poussé à droite de la carte */
.voice-picker__play {
  flex: 0 0 auto;
  margin-left: auto;
  border-radius: 50%;
}

/* Lecture en cours : anneau orange */
.voice-picker__play.is-playing {
  border-color: var(--warning-color, #f59e0b);
  box-shadow: 0 0 0 2px var(--warning-color, #f59e0b);
  color: var(--text-primary);
}

/* Les icônes ne captent pas le clic : l'évènement part du bouton */
.voice-picker__icon {
  pointer-events: none;
}

/*
 * Une seule icône à la fois : play au repos, pause pendant la lecture, puis
 * play de nouveau à la fin du son (le JS retire .is-playing sur `ended`, en
 * cas de pause, d'erreur ou quand une autre voix démarre).
 * Pas d'attribut `hidden` sur les <svg> : il ne les masque pas (il ne vaut
 * `display: none` que pour les éléments HTML).
 */
.voice-picker__icon--pause,
.voice-picker__play.is-playing .voice-picker__icon--play {
  display: none;
}

.voice-picker__play.is-playing .voice-picker__icon--pause {
  display: block;
}