/*
 * MOD-IA 2026-09-02 : blocs déplacés tel quels depuis assets/css/style.css
 * dans le cadre du découpage CSS de la charte graphique. Aucune valeur n'a
 * changé ; des renvois restent aux anciens emplacements dans style.css.
 *
 * Famille « Formulaires » : tout ce dans quoi on saisit ou on choisit une valeur —
 * .tdb-champ, .tdb-checkbox, .tdb-dropdown, .tdb-qty, .tdb-range.
 * Voir le tableau de routage dans la charte graphique (page-charte.php).
 *
 * L'ordre des blocs de cette feuille N'EST PAS arbitraire :
 * .tdb-checkbox--light doit rester APRÈS .tdb-checkbox (même
 * spécificité, c'est l'ordre qui tranche).
 */

/* ---------- Champ de saisie ---------- */
/* MOD-IA 2026-09-02 : composant NOUVEAU (template-parts/ui/champ.php). Le thème
   habillait ses champs par gabarit (.tdb-compte-form input,
   .tdb-connexion__form input…) : la même apparence était redéfinie à chaque
   page et les états erreur / désactivé n'existaient nulle part.

   Aucune frame Figma ne dessine ces deux états : ils sont DÉRIVÉS, dans
   l'esprit de la charte, et signalés comme tels. Les valeurs de repos, elles,
   reprennent celles des champs déjà en place (hauteur 60, filet gris info,
   rayon 10, 16px).

   Cette feuille étant chargée AVANT style.css, les règles de gabarit existantes
   (.tdb-compte-form input, 0-1-1, même spécificité) continuent de l'emporter là
   où elles s'appliquent : poser ce composant ne change donc rien aux pages qui
   ne l'appellent pas encore. */
.tdb-champ {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}

.tdb-champ label {
    font-size: 13px;
    font-weight: var( --weight-medium );
    line-height: 1.4;
    color: var( --color-text );
}

/* Astérisque des champs obligatoires : même orange que celui déjà employé par
   .tdb-compte-form (I-3). */
.tdb-champ__requis {
    color: var( --color-primary );
}

.tdb-champ input,
.tdb-champ textarea {
    height: 60px;
    border: 1px solid var( --color-text-muted );
    border-radius: var( --radius-sm );
    padding-inline: var( --space-md );
    font-family: var( --font-body );
    font-size: var( --text-body-size );
    color: var( --color-text );
    background: var( --color-surface );
    transition: border-color var( --duration-tdb-snap ) var( --ease-tdb );
}

/* Le textarea est le seul à ne pas tenir sur une ligne : il garde le reste du
   traitement mais reprend une hauteur libre. */
.tdb-champ textarea {
    height: auto;
    padding-block: var( --space-sm );
    line-height: var( --text-body-lh );
    resize: vertical;
}

.tdb-champ input::placeholder,
.tdb-champ textarea::placeholder {
    color: var( --color-text-muted );
}

.tdb-champ input:hover,
.tdb-champ textarea:hover {
    border-color: var( --color-text );
}

.tdb-champ input:focus,
.tdb-champ textarea:focus {
    border-color: var( --color-primary );
}

.tdb-champ__aide {
    font-size: var( --text-caption-size );
    line-height: var( --text-caption-lh );
    color: var( --color-text-muted );
}

/* État erreur — dérivé (aucune frame Figma). Le filet garde le rouge de statut,
   mais le MESSAGE prend --color-status-expired-text : #FD6060 ne donne que
   2,6:1 sur blanc, illisible en texte. */
.tdb-champ.is-error input,
.tdb-champ.is-error textarea {
    border-color: var( --color-status-expired );
}

.tdb-champ.is-error input:focus,
.tdb-champ.is-error textarea:focus {
    outline-color: var( --color-status-expired-text );
    border-color: var( --color-status-expired );
}

.tdb-champ__erreur {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var( --text-caption-size );
    line-height: 1.45;
    color: var( --color-status-expired-text );
}

.tdb-champ__erreur svg {
    flex: none;
    margin-top: 2px;
}

/* État désactivé — dérivé lui aussi. `cursor: not-allowed` est le seul signal
   non chromatique : sans lui, un champ grisé reste indiscernable d'un champ en
   lecture seule pour qui ne distingue pas les contrastes faibles. */
.tdb-champ input:disabled,
.tdb-champ textarea:disabled {
    background: var( --color-surface-muted );
    border-color: var( --color-border );
    color: var( --color-text-muted );
    cursor: not-allowed;
}

.tdb-champ input:disabled::placeholder,
.tdb-champ textarea:disabled::placeholder {
    color: var( --color-status-depleted );
}

.tdb-checkbox {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: var( --text-button-size );
    font-weight: var( --weight-light );
    cursor: pointer;
}

/* "casea à cocher" (127:1523 / 127:1511) : carré blanc de 16px à filet
   ORANGE, rayon 5px, coche orange.
   appearance:none est indispensable — une case native ignore `border` et
   reste grise, quel que soit l'accent-color. */
.tdb-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    border-radius: var( --radius-badge );
    border: 1px solid var( --color-primary );
    background: #fff;
    cursor: pointer;
    display: grid;
    place-content: center;
}

.tdb-checkbox input[type="checkbox"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var( --color-primary );
    transform: scale( 0 );
    transition: transform var( --duration-tdb-snap ) var( --ease-tdb );
}

.tdb-checkbox input[type="checkbox"]:checked::before {
    transform: scale( 1 );
}

.tdb-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var( --color-primary );
    outline-offset: 2px;
}

/* ---------- Variante sur fond sombre (boîte de connexion) ---------- */
.tdb-checkbox--light {
    color: #fff;
    font-size: var( --text-caption-size );
    line-height: var( --text-caption-lh );
    font-weight: var( --weight-regular );
    white-space: nowrap;
}
/* ---------- Menu déroulant à cases à cocher (322:3341 / 2023:5893) ----------
   Le design n'utilise pas de <select> natif : le bouton ouvre un panneau
   blanc à filet contenant des cases à cocher (choix multiple). */
.tdb-dropdown {
    position: relative;
}

.tdb-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 46px;
    padding: 0 20px;
    border: none;
    border-radius: var( --radius-sm );
    background: var( --color-surface-muted );
    font-family: var( --font-body );
    font-size: var( --text-button-size );
    line-height: var( --text-button-lh );
    font-weight: var( --weight-medium );
    letter-spacing: var( --tracking-tight );
    color: var( --color-ink );
    text-align: left;
    cursor: pointer;
    transition: background-color var( --duration-tdb ) var( --ease-tdb );
}

/* Survol ET état ouvert : fond orange plein. */
.tdb-dropdown__trigger:hover,
.tdb-dropdown__trigger:focus-visible,
.tdb-dropdown__trigger[aria-expanded="true"] {
    background: var( --color-primary );
}

/* Variante à filet (widget "bon valeur région", 322:3421) : fond blanc et
   filet gris au repos, orange plein au survol/à l'ouverture. */
.tdb-dropdown--filet .tdb-dropdown__trigger {
    background: #fff;
    border: 1px solid var( --color-text-muted );
}

.tdb-dropdown--filet .tdb-dropdown__trigger:hover,
.tdb-dropdown--filet .tdb-dropdown__trigger:focus-visible,
.tdb-dropdown--filet .tdb-dropdown__trigger[aria-expanded="true"] {
    background: var( --color-primary );
    border-color: transparent;
}

.tdb-dropdown__arrow {
    display: flex;
    flex-shrink: 0;
    margin-left: var( --space-sm );
    transition: transform var( --duration-tdb ) var( --ease-tdb );
}

.tdb-dropdown__trigger[aria-expanded="true"] .tdb-dropdown__arrow {
    transform: rotate( 180deg );
}

/* Panneau (2023:5893) : blanc, filet #7C7C7C, rayon 10px, padding 20px,
   10px entre chaque case. */
.tdb-dropdown__panel {
    position: absolute;
    z-index: 30;
    top: calc( 100% + 6px );
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding: 20px;
    background: #fff;
    border: 1px solid var( --color-text-muted );
    border-radius: var( --radius-sm );
    box-shadow: var( --shadow-popover );
}

.tdb-dropdown__panel[hidden] {
    display: none;
}

/* Les cases du panneau reprennent le style "casea à cocher" (127:1511) :
   16px, filet orange, rayon 5px, libellé 14px Light. */
.tdb-dropdown__panel .tdb-checkbox {
    gap: 11px;
    font-weight: var( --weight-light );
    line-height: var( --text-card-desc-lh );
}

/* ---------- Curseur de prix ---------- */
.tdb-range {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}

.tdb-range input[type="range"] {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.tdb-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var( --color-primary );
    cursor: pointer;
    margin-top: -8px;
}

.tdb-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: var( --color-primary );
    cursor: pointer;
}

/* MOD-IA 2026-09-30 : la ligne grise était peinte par la piste de chaque
   <input>. Les deux curseurs étant superposés, la piste du second (max)
   recouvrait la pastille du premier (min). La ligne est désormais dessinée
   une seule fois par le conteneur, sous les deux inputs, dont les pistes
   deviennent transparentes. */
.tdb-range::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: #d9d9d9;
}

.tdb-range input[type="range"]::-webkit-slider-runnable-track {
    height: 2px;
    /* background: #d9d9d9; */
    background: transparent;
}

.tdb-range input[type="range"]::-moz-range-track {
    background: transparent;
}

/* ---------- Compteur / montant ---------- */
.tdb-qty {
    display: flex;
    align-items: center;
    height: 46px;
    width: 84px;
    border: 1px solid var( --color-text-muted );
    border-radius: var( --radius-sm );
    background: #fff;
    padding-inline: var( --space-sm );
}

.tdb-qty input {
    width: 100%;
    border: none;
    text-align: right;
    font-family: var( --font-body );
    font-size: 16px;
}

.tdb-qty--montant {
    width: 110px;
}

.tdb-qty__suffix {
    color: var( --color-text-muted );
}