/**
 * Composant « période + commune ».
 *
 * ⚠️ Tout en px : le thème agrikole impose html{font-size:62.5%}, les rem sont
 * un piège. ⚠️ Jamais de --apaba-* redéclaré : on consomme les --mt-*.
 *
 * Le champ de date est un `input[type="date"]` NATIF, jamais un calendrier
 * maison : sa `value` est toujours ISO quelle que soit la locale d'affichage,
 * il ouvre la roue native au doigt, et son accessibilité est acquise. Ce qui
 * est habillé ici, c'est son ÉCRIN — la pastille cliquable qui le porte dans
 * la phrase — pas le contrôle lui-même.
 */

.mt-periode { margin-bottom: var(--mt-space-5, 24px); }

/* Le bloc « où » est rendu hors des étapes numérotées, juste sous le chapô :
   il porte donc son propre filet de séparation. */
.mt-periode--lieu {
    margin-top: var(--mt-space-5, 24px);
    margin-bottom: 0;
}

/* ----- La phrase --------------------------------------------------------- */

.mt-periode__phrase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mt-space-2, 8px);
    margin: 0 0 var(--mt-space-4, 16px);
    color: var(--mt-ink, #2b3128);
    font-size: var(--mt-fs-title, 18px);
    line-height: 1.5;
}

.mt-periode__mot { font-weight: 700; }

/* Pastille : c'est elle qui dit « ceci se clique ». */
.mt-periode__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    background: var(--mt-surface, #fff);
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius-pill, 999px);
    cursor: pointer;
}

.mt-periode__date:hover { border-color: var(--mt-brand, #1a8781); }

.mt-periode__date:focus-within {
    border-color: var(--mt-brand, #1a8781);
    box-shadow: 0 0 0 3px var(--mt-brand-tint, #e6f2f0);
}

.mt-periode__ico {
    display: inline-flex;
    flex: none;
    color: var(--mt-brand, #1a8781);
}

.mt-periode__ico svg { width: 19px; height: 19px; }

.mt-periode__lbl {
    color: var(--mt-muted, #6c7266);
    font-size: var(--mt-fs-annex, 13.5px);
}

/* Spécificité : `.mt-app input` du DS impose width:100% et un cadre. Il faut
   monter au-dessus de (0,2,1) pour rendre le contrôle transparent dans sa
   pastille — d'où `[type="date"]` répété. */
.mt-periode .mt-periode__date input[type="date"] {
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    color: var(--mt-ink, #2b3128);
    font-family: inherit;
    font-size: var(--mt-fs-field, 16px);
    font-weight: 700;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.mt-periode .mt-periode__date input[type="date"]:focus,
.mt-periode .mt-periode__date input[type="date"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* WebKit place une icône de calendrier en plus de la nôtre : on la masque, et
   c'est `mt-periode.js` qui ouvre le calendrier par `showPicker()` au clic sur
   la pastille. ⚠️ Masquer cet indicateur SANS le remplacer rend le champ
   inouvrable à la souris dans Chrome — le clic sur le texte n'ouvre rien. */
.mt-periode input[type="date"]::-webkit-calendar-picker-indicator {
    width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
}

/* Le champ ne doit plus capter le clic : la pastille entière l'ouvre. */
.mt-periode .mt-periode__date input[type="date"] { pointer-events: none; }

/* « soit 46 jours. » ferme la phrase : même corps et même graisse que son
   début, sinon la ligne se lit en deux morceaux. */
.mt-periode__jours {
    color: var(--mt-ink, #2b3128);
    font-weight: 700;
}

.mt-periode__jours.is-warn { color: var(--mt-danger, #b8402d); font-weight: 700; }

/* ----- Département / commune --------------------------------------------- */

/* POST_MORTEM #27 : une piste `auto` suit le min-content des <select> et force
   un scroll X sur téléphone. */
.mt-periode__ou {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 0;
}

.mt-periode__ou > * { min-width: 0; max-width: 100%; }

@media (min-width: 720px) {
    .mt-periode__ou { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ----- L'ardoise d'ETP ---------------------------------------------------- */

.mt-periode__etp {
    background: var(--mt-brand-tint, #e6f2f0);
    border-radius: var(--mt-radius-lg, 16px);
}

/* Replié, on ne lit que le titre et la valeur. Les trois années et la note de
   méthode se consultent une fois, pas à chaque visite. */
.mt-periode__sum {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mt-space-2, 8px);
    padding: var(--mt-space-4, 16px);
    list-style: none;
    cursor: pointer;
}

.mt-periode__sum::-webkit-details-marker { display: none; }

.mt-periode__sum:focus-visible {
    outline: 2px solid var(--mt-brand, #1a8781);
    outline-offset: -2px;
    border-radius: var(--mt-radius-lg, 16px);
}

/* Sans valeur à détailler, le dépliant n'a rien à ouvrir. */
.mt-periode__etp.is-plat .mt-periode__sum { cursor: default; }
.mt-periode__etp.is-plat .mt-periode__chev { display: none; }

.mt-periode__chev {
    flex: none;
    margin-left: auto;
    color: var(--mt-brand, #1a8781);
    transition: transform .18s ease;
}

.mt-periode__etp[open] .mt-periode__chev { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .mt-periode__chev { transition: none; }
}

.mt-periode__detail {
    padding: 0 var(--mt-space-4, 16px) var(--mt-space-4, 16px);
}

.mt-periode__hero-l {
    color: var(--mt-brand-strong, #14655f);
    font-size: var(--mt-fs-display, 28px);
    font-weight: 700;
    line-height: 1.1;
}

.mt-periode__hero-v {
    margin-left: auto;
    color: var(--mt-brand, #1a8781);
    font-size: var(--mt-fs-display, 28px);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.mt-periode__ans {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mt-periode__ans li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 10px;
    background: var(--mt-surface, #fff);
    border-radius: var(--mt-radius-pill, 999px);
    font-size: var(--mt-fs-annex, 13.5px);
}

.mt-periode__ans li span { color: var(--mt-muted, #6c7266); }
.mt-periode__ans li b { color: var(--mt-brand-strong, #14655f); font-weight: 700; }

/* La pluie de l'année, quand le module la consomme : même pastille, teinte de
   la pluie et graisse normale — c'est l'ETP qui reste le chiffre principal. */
.mt-periode__ans-p {
    color: var(--mt-rain, #4f8fc0);
    font-style: normal;
    font-weight: 400;
}

.mt-periode__src,
.mt-periode__wait,
.mt-periode__err {
    margin: var(--mt-space-3, 12px) 0 0;
    font-size: var(--mt-fs-annex, 13.5px);
    line-height: 1.5;
}

.mt-periode__src { color: var(--mt-brand-strong, #14655f); }
.mt-periode__wait { margin: 0; color: var(--mt-muted, #6c7266); }
.mt-periode__err { margin: 0; color: var(--mt-danger, #b8402d); font-weight: 700; }

.mt-periode__manuel { margin-top: var(--mt-space-3, 12px); }

.mt-periode .mt-periode__num input[type="text"] { width: 12ch; max-width: 100%; }

@media (max-width: 640px) {
    .mt-periode__phrase { font-size: var(--mt-fs-body, 16px); }

    /* Intitulé et valeur restent de la MÊME taille, mais descendent d'un cran :
       deux fois 28 px sur 390 px de large font tenir trois mots par ligne. */
    .mt-periode__hero-l,
    .mt-periode__hero-v { font-size: var(--mt-fs-title-lg, 22px); }
}