/*
 * MyE360 · Raccordement au site (/me)
 * Applique les tokens et composants MyE360-web aux éléments produits par le socle du site
 * (retours de e360-forms.js, Select2, Flatpickr, avis, logo). Portée : .mye-app et .mye-layer.
 * Aucun sélecteur global, aucune règle de thème d’administration.
 */

/* ---------- Logo officiel des pages d’accès : emplacement réservé, aucune mise en page déplacée ---------- */
.mye-brand__logo {
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--mye-r-s);
  object-fit: contain;
}

/* ---------- Retour d’envoi de e360-forms.js : état réel de la requête, présenté comme une alerte MyE360 ---------- */
.mye-app .e360-form-status:empty,
.mye-app .e360-form-status[hidden] { display: none; }

.mye-app .e360-form-status {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-radius: var(--mye-r-l);
  background: var(--mye-surface-2);
  color: var(--mye-text);
  font-size: var(--mye-fs-body-s);
  line-height: 1.45;
}

.mye-app .e360-form-status.alert-info,
.mye-app .e360-form-status[data-state="loading"] { background: var(--mye-info-soft); color: var(--mye-info); }
.mye-app .e360-form-status.alert-success,
.mye-app .e360-form-status[data-state="success"] { background: var(--mye-success-soft); color: var(--mye-success); }
.mye-app .e360-form-status.alert-danger,
.mye-app .e360-form-status[data-state="error"] { background: var(--mye-danger-soft); color: var(--mye-danger); }
.mye-app .e360-form-status a { color: inherit; font-weight: 600; }
.mye-app .e360-form-status .spinner-border { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mye-rotation 0.8s linear infinite; }

.mye-app .e360-form-field-error {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  font-size: var(--mye-fs-small);
  color: var(--mye-danger);
}

.mye-app .is-invalid,
.mye-app .is-invalid + .select2 .select2-selection { border-color: var(--mye-danger); }

.mye-app .e360-form-feedback { display: flex; flex-direction: column; gap: 0.5rem; }

@keyframes mye-rotation { to { transform: rotate(360deg); } }

/* ---------- Avis de réussite : région unique, au-dessus de la barre de navigation ---------- */
.mye-avis {
  position: fixed;
  z-index: 60;
  left: 1rem;
  right: 1rem;
  bottom: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.mye-avis__item { align-items: center; box-shadow: var(--mye-shadow-sheet); pointer-events: auto; }

@media (min-width: 48rem) {
  .mye-avis { left: auto; right: 1.5rem; bottom: 1.5rem; width: 24rem; }
}

/* ---------- Bannière d’accès assisté ---------- */
.mye-assistance { margin: 0.75rem 1rem 0; }
.mye-assistance form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }

/* ---------- Horloge officielle d’une tentative : couleur d’urgence dans la dernière minute ---------- */
.mye-app .is-urgent { color: var(--mye-danger); }

/* ---------- Select2 : contrôle et liste reprennent les champs MyE360, y compris rendus hors de .mye-app ---------- */
.mye-app .select2-container { width: 100%; font: inherit; }

.mye-app .select2-container .select2-selection--single,
.mye-app .select2-container .select2-selection--multiple {
  min-height: 3.25rem;
  border: 1.5px solid var(--mye-control);
  border-radius: var(--mye-r-m);
  background: var(--mye-surface);
  color: var(--mye-text);
}

.mye-app .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 3rem; padding: 0 2.75rem 0 1rem; color: var(--mye-text); }
.mye-app .select2-container--default .select2-selection--single .select2-selection__arrow { height: 3rem; right: 0.75rem; }
/* Étiquettes d’une sélection multiple : surface et texte du thème courant (lisibles en clair comme en sombre). */
.mye-app .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--mye-surface-2); border-color: transparent; color: var(--mye-text); border-radius: var(--mye-r-full); }
.mye-app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--mye-text-2); border-right-color: transparent; }
.mye-app .select2-container--focus .select2-selection,
.mye-app .select2-container--open .select2-selection { border-color: var(--mye-primary); outline: 2px solid var(--mye-primary-soft); }

.mye-layer .select2-dropdown {
  border: 1px solid var(--mye-sep);
  border-radius: var(--mye-r-m);
  background: var(--mye-surface);
  color: var(--mye-text);
  box-shadow: var(--mye-shadow-sheet);
  overflow: hidden;
  font-family: var(--mye-font);
}
.mye-layer .select2-results__option { padding: 0.75rem 1rem; font-size: var(--mye-fs-body-s); color: var(--mye-text); }
.mye-layer .select2-results__option--highlighted[aria-selected],
.mye-layer .select2-results__option--highlighted { background: var(--mye-primary-soft); color: var(--mye-text); }
.mye-layer .select2-results__option[aria-selected="true"] { font-weight: 600; }
.mye-layer .select2-search__field { min-height: 2.75rem; border: 1.5px solid var(--mye-control); border-radius: var(--mye-r-s); padding: 0 0.75rem; background: var(--mye-surface); color: var(--mye-text); font: inherit; }
.mye-layer .e360-select-result__label,
.mye-app .e360-select-result__label { display: block; font-weight: 600; }
.mye-layer .e360-select-result__description,
.mye-app .e360-select-result__description { display: block; font-size: var(--mye-fs-small); color: var(--mye-text-2); }

/* ---------- Flatpickr : calendrier au style MyE360 ---------- */
.flatpickr-calendar.mye-layer,
.mye-layer .flatpickr-calendar {
  border-radius: var(--mye-r-l, 1rem);
  box-shadow: var(--mye-shadow-sheet, 0 6px 24px rgba(21, 23, 27, .12));
  font-family: var(--mye-font, Inter, sans-serif);
}

.mye-layer .flatpickr-day.selected,
.flatpickr-calendar.mye-layer .flatpickr-day.selected { background: var(--mye-primary, #1A58E2); border-color: var(--mye-primary, #1A58E2); }

/* ---------- Installation de l’application : action discrète, masquée tant que le navigateur ne la propose pas ---------- */
.mye-installer[hidden] { display: none; }

/* Marque réelle du fournisseur dans la pastille livrée (le cercle neutre attendait le logo autorisé) */
.mye-app .mye-provider--marque { border: 0; display: inline-flex; align-items: center; justify-content: center; }
.mye-app .mye-provider--marque svg { width: 1.125rem; height: 1.125rem; }

/* Références et identifiants longs (reçus) : retour à la ligne plutôt qu’un débordement horizontal */
.mye-app .mye-dl dd.mye-num { min-width: 0; overflow-wrap: anywhere; }

/* Questions du corrigé : même légende que l’écran de passage */
[data-page="qcm-resultat"] .mye-qcm-legend { display: flex; flex-direction: column; gap: 0.625rem; }
[data-page="qcm-resultat"] .mye-qcm-type { font-size: var(--mye-fs-caption); font-weight: 600; color: var(--mye-text-2); text-transform: uppercase; letter-spacing: 0.04em; }
[data-page="qcm-resultat"] .mye-qcm-enonce { font-size: var(--mye-fs-body-l); line-height: 1.4; font-weight: 600; }

/* ---------- Envois inachevés (lignes générées par e360-forms.js) : présentation des listes MyE360 ---------- */
.mye-sheet [data-upload-list] .list-group-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 0.5px solid var(--mye-sep); }
.mye-sheet [data-upload-list] .list-group-item label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mye-sheet [data-upload-list] .list-group-item strong,
.mye-sheet [data-upload-list] .list-group-item .d-block { display: block; }
.mye-sheet [data-upload-list] .text-muted { color: var(--mye-text-2); font-size: var(--mye-fs-small); }
.mye-sheet [data-upload-list] .btn { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--mye-sep); border-radius: var(--mye-r-btn); background: var(--mye-surface); color: var(--mye-primary); font: inherit; font-weight: 600; }

/* ---------- Étapes du dossier : même apparence pour les étapes en bouton (enregistrement puis changement) ou en texte ---------- */
@media (min-width: 64rem) {
  .mye-stepnav > button,
  .mye-stepnav > span {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--mye-r-m);
    background: transparent;
    color: var(--mye-text-2);
    font: inherit;
    font-size: var(--mye-fs-body-s);
    text-align: left;
  }
  .mye-stepnav > button { cursor: pointer; }
  .mye-stepnav > [aria-current="step"] { background: var(--mye-primary-soft); color: var(--mye-primary); font-weight: 600; }
  .mye-stepnav > .is-done { color: var(--mye-text); }
  .mye-stepnav > .is-error { color: var(--mye-danger); }
}

/* ---------- Champs de date et listes : actions du socle (Effacer, croix Select2) au style des boutons MyE360 ---------- */
.mye-app [data-e360-date-clear] { align-self: flex-start; min-height: 2.75rem; margin-top: 0.5rem; padding: 0 1rem; border: 0; border-radius: var(--mye-r-btn); background: transparent; color: var(--mye-primary); font: inherit; font-size: var(--mye-fs-body-s); font-weight: 600; }
.mye-app .select2-container--default .select2-selection--single .select2-selection__clear { position: absolute; top: 50%; right: 2.5rem; margin: 0; padding: 0; border: 0; background: transparent; color: var(--mye-text-2); font-size: 1.25rem; line-height: 1; transform: translateY(-50%); }

/* ---------- Avatar de compte (partiel contest/_avatar) : pastille MyE360, photo recadrée ou initiales ---------- */
.mye-app .e360-avatar { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--mye-r-full, 50%); overflow: hidden; background: var(--mye-primary-soft); color: var(--mye-primary); font-weight: 700; }
.mye-app .e360-avatar--sm { width: 2.25rem; height: 2.25rem; font-size: var(--mye-fs-small); }
.mye-app .e360-avatar--lg { width: 4.5rem; height: 4.5rem; font-size: var(--mye-fs-h3); }
.mye-app .e360-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Pastille de l’accueil (mye-avatar) : la photo occupe le cercle du composant ; les initiales restent le repli. */
.mye-app .mye-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Bio du compte : texte libre court, sans débordement des mots longs. */
.mye-app .mye-identity__bio { margin: 0.25rem 0 0; color: var(--mye-text-2); overflow-wrap: anywhere; }

/* Liens rendus en bouton (actions secondaires dans un champ) : apparence du lien MyE360 */
.mye-app button.mye-link { min-height: 2.75rem; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600; text-align: left; }
.flatpickr-calendar.mye-layer { background: var(--mye-surface); color: var(--mye-text); border: 1px solid var(--mye-sep); }
.flatpickr-calendar.mye-layer .flatpickr-months .flatpickr-month,
.flatpickr-calendar.mye-layer .flatpickr-current-month,
.flatpickr-calendar.mye-layer span.flatpickr-weekday,
.flatpickr-calendar.mye-layer .flatpickr-day { color: var(--mye-text); fill: var(--mye-text); background: transparent; }
.flatpickr-calendar.mye-layer .flatpickr-day:hover,
.flatpickr-calendar.mye-layer .flatpickr-day:focus { background: var(--mye-primary-soft); border-color: transparent; }
.flatpickr-calendar.mye-layer .flatpickr-day.today { border-color: var(--mye-primary); }
.flatpickr-calendar.mye-layer .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.mye-layer .flatpickr-day.prevMonthDay,
.flatpickr-calendar.mye-layer .flatpickr-day.nextMonthDay { color: var(--mye-text-2); }
.flatpickr-calendar.mye-layer .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar.mye-layer .flatpickr-months .flatpickr-next-month svg { fill: var(--mye-text); }

/* Liste-détail sur mobile : le modèle ouvre une page de détail ; sans route dédiée, l’ancre du panneau
   (#identifiant) remplace la liste par ce panneau, et le lien de retour revient à la liste. */
@media (max-width: 63.99rem) {
  .mye-split.is-detail-ouvert > .mye-split__list { display: none; }
  .mye-split.is-detail-ouvert > .mye-split__detail { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 1.25rem 2rem; }
}

/* Segment de choix porté par des boutons radio (avis pédagogique) : même état sélectionné que le modèle. */
.mye-app .mye-segment[role="radiogroup"] { width: 100%; }
.mye-app label.mye-segment__item { display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; }
.mye-app .mye-segment input:checked + .mye-segment__item { background: var(--mye-surface); color: var(--mye-text); font-weight: 600; box-shadow: var(--mye-shadow-segment); }
.mye-app .mye-segment input:disabled + .mye-segment__item { opacity: 0.6; cursor: default; }

/* Notation du jury : pastilles de note peintes par e360-forms.js (badge e360-score e360-score--ton) et erreurs sous le critère. */
.mye-app .e360-score { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 0.625rem; border-radius: var(--mye-r-s); font-size: var(--mye-fs-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.mye-app .e360-score--neutral { background: var(--mye-surface-2); color: var(--mye-text-2); }
.mye-app .e360-score--danger, .mye-app .e360-score--invalid { background: var(--mye-danger-soft); color: var(--mye-danger); }
.mye-app .e360-score--warning { background: var(--mye-warning-soft); color: var(--mye-warning); }
.mye-app .e360-score--success { background: var(--mye-success-soft); color: var(--mye-success); }
.mye-app .mye-criterion { flex-wrap: wrap; padding: 0.75rem 0; }
.mye-app .mye-criterion [data-e360-score-badge] { margin-top: 0.375rem; }
.mye-app .mye-criterion > .e360-form-field-error { flex-basis: 100%; }
.mye-app .mye-criterion__input.is-invalid { border: 2px solid var(--mye-danger); }

/* Composant fichier (extension tracée) : vignette d’aperçu et nom long qui revient à la ligne, sans élargir la page. */
.mye-app .mye-fichier { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.mye-app .mye-fichier__vignette { flex: none; width: 3rem; height: 3rem; border-radius: var(--mye-r-s); object-fit: cover; }
.mye-app .mye-fichier__text strong { overflow-wrap: anywhere; }
/* Un message posé sous un champ reste lisible et ne s’étire jamais dans un bouton. */
.mye-app .e360-form-field-error { overflow-wrap: anywhere; }
.mye-app .e360-form-error-summary { margin: 0.25rem 0 0; padding-left: 1.125rem; }
.mye-app .e360-form-error-summary a { color: inherit; font-weight: 600; }

/* Timeline (correctif tracé) : le statut ne comprime plus le titre ; faute de place, il passe sous le titre et la
   description occupe toute la largeur à côté du repère. */
.mye-app .mye-timeline__tete { flex-wrap: wrap; column-gap: 0.75rem; row-gap: 0.25rem; }
.mye-app .mye-timeline__stack { flex: 1 1 14rem; min-width: 0; }
.mye-app .mye-timeline__statut { flex: 0 1 auto; max-width: 100%; overflow-wrap: anywhere; }
.mye-app .mye-timeline__title, .mye-app .mye-timeline__body .mye-small { overflow-wrap: anywhere; }

/* Navigation par format (évolution tracée) : téléphone = quatre principales + « Plus » ; tablette et ordinateur = rail de
   huit entrées au plus, « Plus » compris. Un groupe de liens par format ; display: contents garde la mise en page du modèle. */
.mye-app .mye-nav__format { display: contents; }
.mye-app .mye-nav__plus { border: 0; background: transparent; font: inherit; cursor: pointer; }
.mye-app .mye-nav__plus[data-actif="true"] { color: var(--mye-primary); }
.mye-app .mye-nav__plus[data-actif="true"] .mye-nav__label { font-weight: 700; }
@media (max-width: 47.99rem) {
  .mye-app .mye-nav__format--large, .mye-app .mye-plus__format--large { display: none; }
}
@media (min-width: 48rem) {
  .mye-app .mye-nav__format--telephone, .mye-app .mye-plus__format--telephone { display: none; }
  .mye-app .mye-nav { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .mye-app .mye-nav__item { flex: none; width: 5.5rem; height: auto; min-height: 4rem; padding: 0.5rem 0; }
  .mye-app .mye-nav__label { text-align: center; line-height: 1.15; padding: 0 0.125rem; overflow-wrap: normal; }
}
/* Panneaux inférieurs : jamais plus hauts que l’écran, dernier élément atteignable, zone sûre respectée. */
.mye-app dialog.mye-sheet { max-height: calc(100dvh - 1rem - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
.mye-app .mye-plus .mye-group { margin: 0; }
/* Puces de filtre rendues par des liens (vues par état, étapes) : même aspect que les boutons du modèle. */
.mye-app a.mye-chip { color: inherit; text-decoration: none; }
/* Bandeau de concentration : le titre (étape, position) revient à la ligne au lieu d’être tronqué. */
.mye-app .mye-focus-head__title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }

/* Retour des recherches filtrées (transport partagé) : chargement neutre, erreur et session expirée en alerte du modèle. */
.mye-app .e360-list-feedback { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1rem; border-radius: var(--mye-r-m); background: var(--mye-surface-2); color: var(--mye-text-2); font-size: var(--mye-fs-small); }
.mye-app .e360-list-feedback.alert-danger { background: var(--mye-danger-soft); color: var(--mye-danger); }
.mye-app .e360-list-feedback .spinner-border { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mye-rotation 0.8s linear infinite; }

/* Puces de formulaire D21 (langues, disponibilités, champs) : case à cocher réelle, même rendu que les puces pressées. */
.mye-app label.mye-chip { cursor: pointer; }
.mye-app label.mye-chip > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mye-app label.mye-chip:has(> input:checked) > span { background: var(--mye-text); color: var(--mye-bg); font-weight: 600; }
/* Leçons d’incubation : document PDF consulté dans la page (visualiseur du navigateur), éditeur enrichi membre. */
.mye-app .mye-media--document { aspect-ratio: auto; background: var(--mye-surface-2); border-radius: var(--mye-r-m); overflow: hidden; }
.mye-app .mye-pdf { display: block; width: 100%; height: min(75dvh, 56rem); border: 0; background: var(--mye-surface); }
.mye-app .tox-tinymce { border-radius: var(--mye-r-m); }

/* ---------- Visionneuse intégrée : image zoomable ou PDF, centrée sur fond atténué (data-mye-apercu) ---------- */
.mye-sheet.mye-visionneuse { width: 100%; max-width: min(60rem, 100%); max-height: 92vh; margin: auto; border-radius: var(--mye-r-xl); }
.mye-visionneuse__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mye-visionneuse__head .mye-h4 { margin: 0; overflow-wrap: anywhere; }
.mye-visionneuse__corps { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; border-radius: var(--mye-r-m); background: var(--mye-surface-2); }
.mye-visionneuse__image { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; cursor: zoom-in; }
.mye-visionneuse__image.is-zoom { max-width: none; max-height: none; cursor: zoom-out; }
.mye-visionneuse__pdf { display: block; width: 100%; height: 70vh; border: 0; background: var(--mye-surface); }

/* ---------- Édition d’une question QCM : seuls les blocs du type choisi s’affichent (aucun script de page) ---------- */
.mye-qcm-edition [data-qe-for] { display: none; }
.mye-qcm-edition:has(#qe-type option[value="single"]:checked) [data-qe-for~="single"],
.mye-qcm-edition:has(#qe-type option[value="multiple"]:checked) [data-qe-for~="multiple"],
.mye-qcm-edition:has(#qe-type option[value="truefalse"]:checked) [data-qe-for~="truefalse"],
.mye-qcm-edition:has(#qe-type option[value="matching"]:checked) [data-qe-for~="matching"],
.mye-qcm-edition:has(#qe-type option[value="ordering"]:checked) [data-qe-for~="ordering"] { display: flex; }
.mye-qcm-edition .mye-inline > .mye-input[inputmode="numeric"] { max-width: 5rem; }