/* ============================================================
   SÉLECTEUR DE PÉRIODE — §09 de « 00-Charte UI complete »
   ------------------------------------------------------------
   La charte consacre une section entière à ce composant, règles d'usage
   comprises : « Le sélecteur s'ouvre sous son bouton, aligné à droite. Les
   préréglages couvrent 7 j, 30 j, 3, 6 et 12 mois ; toute sélection manuelle
   bascule sur "Personnalisé". Les extrémités de plage sont en bleu plein,
   l'intérieur en bleu clair. La comparaison N-1 reste activée par défaut. »

   La Station servait à la place DEUX `<input type="date">` natifs côte à côte :
   le calendrier du navigateur, sa langue, ses couleurs, son icône. C'est le
   seul composant de la charte qui n'avait aucune traduction dans le dépôt.

   POURQUOI CETTE FEUILLE N'EST PAS DANS `v5-components.css` : celle-là n'est
   chargée que pour l'iso 1, et les templates projet — dont le rapport de
   positions, premier hôte du composant — sont servis aux QUATRE audiences.
   Un composant non stylé côté Client Center serait pire que les deux champs
   natifs. Elle ne dépend donc que de `v5-tokens.css`, chargé partout.

   Les valeurs viennent du prototype rendu, pas de sa lecture : panneau 660,
   colonne de préréglages 190, cellules de 25 px, interrupteur 34 × 19.
   ============================================================ */

/* ---------- 1. Le bouton déclencheur ----------
   Mesuré sur la maquette 03, qui est la seule à montrer le composant FERMÉ :
   42 px de haut, rayon 11, filet `--line`, encre `--text-mid` ; ouvert, il
   prend l'accent sur les trois (filet, fond atténué, encre). */
z-periode {
    display: inline-flex;
    position: relative;
    vertical-align: middle;
}

.zpe_btn {
    height: 42px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: transparent;
    color: var(--text-mid);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .16s var(--ease, ease), background .16s var(--ease, ease), color .16s var(--ease, ease);
}

.zpe_btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.zpe_btn[aria-expanded="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

/* L'icône est un SVG au trait de la charte : 1,8 px, bouts et jointures ronds,
   `viewBox="0 0 22 22"` comme toute la librairie du handoff. */
.zpe_btn > svg {
    flex: 0 0 auto;
}

.zpe_caret {
    font-size: 9px;
    opacity: .6;
    transition: transform .18s var(--ease, ease);
}

.zpe_btn[aria-expanded="true"] .zpe_caret {
    transform: rotate(180deg);
}

/* ---------- 1b. Le déclencheur « champs » (maquette 05) ----------
   LA CHARTE DONNE LE PANNEAU, LES ÉCRANS DONNENT LE DÉCLENCHEUR, ET ILS NE LE
   DONNENT PAS PAREIL. Le tableau de bord projet (03) ouvre le sélecteur par un
   bouton de 42 px à icône de calendrier ; le rapport de positions (05) garde
   une pilule de 38 px qui MONTRE les deux bornes — « Du 01/01/2025 au
   21/09/2026 » — et porte « Rechercher ». Les deux ouvrent le même panneau §09.
   Servir le bouton du 03 sur l'écran 05 serait un écart de composition sur
   l'écran le plus regardé du lot. */
.zpe_pill {
    height: 38px;
    padding: 0 6px 0 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    font-size: 12.5px;
    transition: border-color .16s var(--ease, ease);
}

.zpe_pill.is_open {
    border-color: var(--accent);
}

.zpe_seg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.zpe_k { color: var(--text-dim); }

.zpe_v {
    font-variant-numeric: tabular-nums;
    color: var(--text);
    font-weight: 500;
}

/* La borne en cours de saisie prend l'accent : c'est le seul repère qui dise
   lequel des deux bouts le prochain clic du calendrier va déplacer. */
.zpe_seg.is_picking .zpe_v {
    color: var(--accent);
    font-weight: 700;
}

.zpe_go {
    height: 28px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent, #fff);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ---------- 2. Le panneau ----------
   IL EST POSÉ SUR `body`, PAS DANS L'ÉLÉMENT. Les barres d'outils de la Station
   vivent dans des conteneurs à `overflow` caché (`.block_right` et sa chaîne
   d'ancêtres) : un panneau de 660 × 380 en `position:absolute` y est rogné. Le
   composant le déplace donc en fin de `body` et le positionne en `fixed` depuis
   le `getBoundingClientRect()` du bouton — d'où le `right` calculé en JS. */
.zpe_panel {
    position: fixed;
    z-index: 3000;
    width: 660px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 22px 54px rgba(11, 21, 51, .22);
    display: flex;
    overflow: hidden;
    font-family: Poppins, system-ui, sans-serif;
    color: var(--text);
    animation: zpePopIn .18s cubic-bezier(.2, .8, .25, 1) both;
}

/* `zPopIn` de la charte. Redéclarée ici sous un nom propre : `v5-tokens.css` la
   porte déjà, mais cette feuille doit tenir seule pour les espaces qui n'ont
   pas la charte de la Station. */
@keyframes zpePopIn {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* Le panneau SANS bloc de comparaison est plus étroit de 20 px, et ses deux
   mois se resserrent : 640/184/180/36 sur la maquette 05, contre 660/190/186/44
   dans la charte, qui le montre avec son interrupteur. Ce n'est pas une
   variante décorative — c'est la même géométrie moins la colonne que le bloc
   « Comparer » élargit. */
.zpe_panel.zpe_nocmp { width: 640px; }
.zpe_nocmp .zpe_presets { width: 184px; }
.zpe_nocmp .zpe_titles,
.zpe_nocmp .zpe_months { gap: 36px; }
.zpe_nocmp .zpe_title,
.zpe_nocmp .zpe_month { width: 180px; }

/* ---------- 3. Colonne des préréglages ---------- */
.zpe_presets {
    width: 190px;
    flex: 0 0 auto;
    padding: 14px;
    border-right: 1px solid var(--line-soft);
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface2);
}

.zpe_presets_t {
    padding: 6px 10px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.zpe_preset {
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-mid);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background .14s var(--ease, ease);
}

.zpe_preset:hover {
    background: var(--chip);
}

.zpe_preset.is_on {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* ---------- 4. L'interrupteur « Comparer » ----------
   Premier interrupteur de la charte dans le dépôt : la Station n'en avait que
   la bascule Clair/Sombre du bandeau, qui est un segmenté, pas un interrupteur.
   Géométrie de la charte : piste 34 × 19 rayon 10, pastille 15 à 2 px du bord,
   17 px à l'état actif. */
.zpe_cmp {
    margin-top: auto;
    padding: 12px 11px 4px;
    border-top: 1px solid var(--line-soft);
}

.zpe_cmp_l {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-mid);
}

.v5_switch {
    width: 34px;
    height: 19px;
    flex: 0 0 auto;
    position: relative;
    border-radius: 10px;
    background: var(--neutral-soft);
    transition: background .18s var(--ease, ease);
}

.v5_switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(11, 21, 51, .3);
    transition: left .18s var(--ease, ease);
}

.v5_switch.is_on {
    background: var(--accent);
}

.v5_switch.is_on::after {
    left: 17px;
}

/* ---------- 5. Les deux mois ---------- */
.zpe_cal {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zpe_cal_h {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.zpe_nav {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-mid);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background .14s var(--ease, ease);
}

.zpe_nav:hover {
    background: var(--chip);
}

.zpe_nav[disabled] {
    opacity: .3;
    cursor: default;
}

.zpe_nav[disabled]:hover {
    background: transparent;
}

.zpe_titles,
.zpe_months {
    display: flex;
    gap: 44px;
}

.zpe_months {
    justify-content: center;
}

.zpe_title {
    width: 186px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
}

.zpe_month {
    width: 186px;
}

.zpe_dows,
.zpe_days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.zpe_dows {
    margin-bottom: 5px;
}

.zpe_dow {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
}

/* La cellule. Les quatre états de la charte : hors plage (encre courante, rayon
   7 au survol), intérieur (`--accent-soft`, encre d'accent, rayon 0 — les
   cellules se touchent et dessinent un ruban), extrémités (`--accent` plein,
   encre claire, gras, rayon 7 du seul côté extérieur). */
.zpe_day {
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 400;
    cursor: pointer;
    transition: background .12s var(--ease, ease);
}

.zpe_day:hover:not(.is_out) {
    background: var(--chip);
}

.zpe_day.is_void {
    color: transparent;
    cursor: default;
    background: transparent;
}

.zpe_day.is_out {
    color: var(--text-dim);
    opacity: .45;
    cursor: default;
}

.zpe_day.is_in {
    border-radius: 0;
    background: var(--accent-soft);
    color: var(--accent);
}

.zpe_day.is_edge {
    background: var(--accent);
    color: var(--on-accent, #fff);
    font-weight: 700;
}

.zpe_day.is_edge:hover {
    background: var(--accent);
}

.zpe_day.is_start { border-radius: 7px 0 0 7px; }
.zpe_day.is_end   { border-radius: 0 7px 7px 0; }
.zpe_day.is_start.is_end { border-radius: 7px; }

/* ---------- 6. Pied : résumé, Annuler, Appliquer ---------- */
.zpe_foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

.zpe_sum {
    font-size: 11.5px;
    color: var(--text-mid);
}

.zpe_acts {
    display: flex;
    gap: 8px;
}

.zpe_act {
    height: 32px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: transparent;
    color: var(--text-mid);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.zpe_act:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* L'encre du bouton d'action. La charte écrit `#fff` sur `--accent` ; en thème
   sombre l'accent est éclairci (#3D8BFF) et le blanc n'y tient que 2,4:1. La
   Station a tranché lors du socle avec `--on-accent`, qui bascule sur une encre
   sombre quand le fond s'éclaircit. Écart assumé, tracé dans
   `docs/design-v5/CHARTE-00-CONFORMITE.md`. */
.zpe_act_p {
    padding: 0 16px;
    border-color: transparent;
    background: var(--accent);
    color: var(--on-accent, #fff);
    font-weight: 600;
}

.zpe_act_p:hover {
    border-color: transparent;
    background: var(--accent);
    color: var(--on-accent, #fff);
}

/* ---------- 7. Repli étroit ----------
   Exigence transverse du handoff : « fonctionnel dès 1280 px […] jamais de
   contenu rogné ». Sous 700 px de fenêtre, le panneau passe en colonne et ne
   montre qu'un mois : deux mois de 186 px plus la colonne de 190 n'y entrent
   pas. */
@media (max-width: 700px) {
    .zpe_panel {
        width: calc(100vw - 24px);
        flex-direction: column;
    }

    .zpe_presets {
        width: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .zpe_presets_t { width: 100%; padding: 0 0 6px; }
    .zpe_cmp { margin: 0 0 0 auto; padding: 0 0 0 11px; border-top: 0; }
    .zpe_titles, .zpe_months { gap: 0; justify-content: space-between; }
    .zpe_month_2, .zpe_title_2 { display: none; }
    .zpe_month, .zpe_title { width: 100%; }
}