/* ============================================================================
   EasyEvent — les écrans du module (.evn-*) : tableau de bord, assistant de
   création, fiche d'un événement, émargement mobile.

   Aucune couleur écrite : tout passe par les jetons --et-*. Le préfixe .evn-
   et non .evt- : easytime-shell.css porte déjà .tbl-evt-*.
   ============================================================================ */

/* ---- Tableau de bord : les tuiles (gabarit .tb-kpi d'easycompta-vignette.css) */
.appgrid .evn-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }

/* ---- Tableaux denses : une ligne par objet. Un numéro de billet, une date, un téléphone ne se
   coupent pas (« B-\n00002 » se lisait comme deux valeurs). */
.appgrid .evn-nowrap { white-space: nowrap; }

/* ---- Le visuel de l'événement (onglet Page publique) : l'aperçu au format du bandeau, puis les modèles. */
.appgrid .evn-visuel { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
/* La scène : le visuel au format du bandeau de la page publique (1600 × 700). */
.appgrid .evn-visuel-scene { position: relative; aspect-ratio: 16 / 7; max-width: 100%; background: var(--et-surface-2); border: 1px solid var(--et-hairline); overflow: hidden; }
.appgrid .evn-visuel-scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le voile et le titre imitent le bandeau de la vitrine (vitrine.css, .evt-bandeau-*) : on juge ici si le
   titre se lira sur l'image. Le voile se fonce vers le bas, comme là-bas, depuis le jeton de voile. */
.appgrid .evn-visuel-voile { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, var(--et-voile)), linear-gradient(180deg, transparent 55%, var(--et-voile)); }
.appgrid .evn-visuel-titre { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; color: var(--et-sur-aplat); }
.appgrid .evn-visuel-titre span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--et-sur-aplat-doux); }
.appgrid .evn-visuel-titre strong { font-size: 20px; line-height: 1.2; text-wrap: balance; }
.appgrid .evn-visuel-source { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; font-size: 12px; background: var(--et-surface); color: var(--et-ink); border: 1px solid var(--et-hairline); border-radius: var(--et-r-pill); }
.appgrid .evn-visuel-attente { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--et-voile); color: var(--et-sur-aplat); font-weight: 600; }
/* Le sélecteur de source : un contrôle segmenté, chaque segment une cible de 44 px. */
.appgrid .evn-visuel-sources { display: flex; border: 1px solid var(--et-hairline); align-self: flex-start; max-width: 100%; overflow-x: auto; }
.appgrid .evn-visuel-sources button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--et-muted); background: var(--et-surface); border: 0; border-right: 1px solid var(--et-hairline); cursor: pointer; }
.appgrid .evn-visuel-sources button:last-child { border-right: 0; }
.appgrid .evn-visuel-sources button:hover { background: var(--et-survol); color: var(--et-ink); }
.appgrid .evn-visuel-sources button.est-actif { background: var(--et-tint); color: var(--et-form-blue-encre); box-shadow: inset 0 -2px 0 var(--et-form-blue); }
.appgrid .evn-visuel-sources button:focus-visible { outline: 2px solid var(--et-focus); outline-offset: -2px; }
.appgrid .evn-visuel-panneau { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* Les modèles : une rangée de vignettes, la choisie cochée. */
.appgrid .evn-visuel-modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; width: 100%; }
.appgrid .evn-visuel-modele { display: flex; flex-direction: column; gap: 6px; padding: 0; background: none; border: 0; color: var(--et-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; min-height: 44px; }
.appgrid .evn-visuel-vignette { position: relative; display: block; border: 2px solid transparent; outline: 1px solid var(--et-hairline); }
.appgrid .evn-visuel-vignette img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; }
.appgrid .evn-visuel-modele:hover .evn-visuel-vignette { outline-color: var(--et-form-blue); }
.appgrid .evn-visuel-modele.est-choisi .evn-visuel-vignette { border-color: var(--et-form-blue); outline-color: var(--et-form-blue); }
.appgrid .evn-visuel-coche { position: absolute; top: 4px; right: 4px; font-size: 18px; color: var(--et-lien); background: var(--et-surface); border-radius: 50%; line-height: 1; }
.appgrid .evn-visuel-modele.est-choisi .evn-visuel-nom { font-weight: 700; }
.appgrid .evn-visuel-nom em { font-style: normal; color: var(--et-muted); font-weight: 400; }
.appgrid .evn-visuel-modele:focus-visible { outline: 2px solid var(--et-focus); outline-offset: 2px; }
/* Le dépôt : la zone entière reçoit le fichier (le champ, transparent, la couvre). */
.appgrid .evn-visuel-depot { position: relative; width: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 132px; padding: 20px 16px; text-align: center; border: 2px dashed var(--et-bord-champ); background: var(--et-surface-2); color: var(--et-ink); cursor: pointer; }
.appgrid .evn-visuel-depot input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.appgrid .evn-visuel-depot i { font-size: 28px; color: var(--et-lien); }
.appgrid .evn-visuel-depot span { font-size: 12px; color: var(--et-muted); }
.appgrid .evn-visuel-depot:hover, .appgrid .evn-visuel-depot.est-survol, .appgrid .evn-visuel-depot:focus-within { border-color: var(--et-form-blue); background: var(--et-tint); }
.appgrid .evn-visuel-depot.est-occupe { opacity: .6; cursor: progress; }
.appgrid .evn-visuel-url { display: flex; gap: 8px; width: 100%; }
.appgrid .evn-visuel-url .mx-input { flex: 1; min-width: 0; }
/* Sur un téléphone, le sélecteur prend toute la largeur en trois segments égaux, sans icône : « Adresse
   web » sortait du cadre à 390 px. */
@media (max-width: 560px) {
    .appgrid .evn-visuel-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: stretch; overflow: visible; }
    .appgrid .evn-visuel-sources button { justify-content: center; padding: 0 6px; }
    .appgrid .evn-visuel-sources button i { display: none; }
    .appgrid .evn-visuel-titre strong { font-size: 16px; }
}

/* ---- La mise en page de la page publique : trois tuiles, chacune avec son schéma (quatre blocs dessinés
   en CSS : visuel, titre, texte, colonne — placés selon le modèle). */
.appgrid .evn-mep { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; max-width: 720px; }
.appgrid .evn-mep-tuile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px; min-height: 44px; text-align: left; font: inherit; font-size: 13px; color: var(--et-ink); background: var(--et-surface); border: 1px solid var(--et-hairline); cursor: pointer; }
.appgrid .evn-mep-tuile:hover { background: var(--et-survol); }
.appgrid .evn-mep-tuile.est-choisie { border: 2px solid var(--et-form-blue); background: var(--et-tint); }
.appgrid .evn-mep-tuile b { font-size: 14px; }
.appgrid .evn-mep-tuile > span:last-child { color: var(--et-muted); }
.appgrid .evn-mep-schema { display: grid; width: 100%; height: 72px; gap: 3px; padding: 4px; background: var(--et-surface-2); border: 1px solid var(--et-hairline); }
.appgrid .evn-mep-schema i { display: block; background: var(--et-filet-fort); }
.appgrid .evn-mep-schema i:first-child { background: var(--et-form-blue); }
.appgrid .evn-mep-schema.est-bandeau { grid-template: 26px 1fr / 2fr 1fr; }
.appgrid .evn-mep-schema.est-bandeau i:nth-child(1) { grid-column: 1 / -1; }
.appgrid .evn-mep-schema.est-bandeau i:nth-child(2) { grid-row: 2; grid-column: 1; }
.appgrid .evn-mep-schema.est-bandeau i:nth-child(3) { display: none; }
.appgrid .evn-mep-schema.est-bandeau i:nth-child(4) { grid-row: 2; grid-column: 2; }
.appgrid .evn-mep-schema.est-classique { grid-template: 22px 8px 1fr / 1fr; padding-inline: 22%; }
.appgrid .evn-mep-schema.est-classique i:nth-child(4) { display: none; }
.appgrid .evn-mep-schema.est-affiche { grid-template: 10px 1fr 1fr / 1fr 1fr; }
.appgrid .evn-mep-schema.est-affiche i:nth-child(1) { grid-row: 1 / -1; grid-column: 1; }

/* ---- Assistant de création (EVT-02) : les étapes et les choix en tuiles */
.appgrid .evn-etapes { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 16px; padding: 0; counter-reset: etape; }
.appgrid .evn-etapes li {
  counter-increment: etape; padding: 6px 12px; font-size: 13px; color: var(--et-muted);
  background: var(--et-surface-2); border: 1px solid var(--et-hairline);
}
.appgrid .evn-etapes li::before { content: counter(etape) ". "; font-family: var(--et-font-mono); }
.appgrid .evn-etapes li.est-courante { color: var(--et-ink); font-weight: 700; border-color: var(--et-form-blue); }
.appgrid .evn-etapes li.est-faite { color: var(--et-succes-ink); }
.appgrid .evn-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 16px; }
.appgrid .evn-choix-tuile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; min-height: 44px; text-align: left;
  background: var(--et-surface); border: 1px solid var(--et-hairline); color: var(--et-ink); cursor: pointer; font: inherit;
}
.appgrid .evn-choix-tuile:hover { background: var(--et-survol); }
.appgrid .evn-choix-tuile.est-choisie { border: 2px solid var(--et-form-blue); background: var(--et-tint); }
.appgrid .evn-choix-tuile i { font-size: 20px; color: var(--et-lien); }
.appgrid .evn-choix-tuile b { font-size: 14px; }
.appgrid .evn-choix-tuile span { font-size: 13px; color: var(--et-muted); }
.appgrid .evn-assistant { max-width: 880px; }
.appgrid .evn-assistant-pied { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.appgrid .evn-recap { margin: 0; display: grid; grid-template-columns: 180px 1fr; gap: 6px 12px; }
.appgrid .evn-recap dt { color: var(--et-muted); }
.appgrid .evn-recap dd { margin: 0; font-weight: 600; }

/* ---- Fiche : la ligne des gestes de statut, les cases du formulaire, les messages */
.appgrid .evn-cases { display: flex; flex-direction: column; gap: 4px; }
.appgrid .evn-cases label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.appgrid .evn-lien-public { font-family: var(--et-font-mono); font-size: 13px; overflow-wrap: anywhere; }
.appgrid .evn-champs-dispo { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.appgrid .evn-cycle { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 12px; padding: 0; }
.appgrid .evn-cycle li { padding: 4px 10px; font-size: 13px; background: var(--et-surface-2); color: var(--et-muted); border: 1px solid var(--et-hairline); }
.appgrid .evn-cycle li.est-courant { background: var(--et-tint); color: var(--et-ink); font-weight: 700; border-color: var(--et-form-blue); }

/* ---- L'éditeur d'un message programmé, en pleine largeur : la saisie à gauche, l'aperçu à droite.
   La zone de texte est GRANDE et lisible (16 px, interligne 1,6) : c'est elle qu'on vient écrire. */
.appgrid .evn-editeur { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
.appgrid .evn-editeur-saisie, .appgrid .evn-editeur-apercu { background: var(--et-surface); border: 1px solid var(--et-hairline); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.appgrid .evn-editeur-reglages { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-bottom: 12px; border-bottom: 1px solid var(--et-hairline); margin-bottom: 4px; }
.appgrid .evn-interrupteur { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.appgrid .evn-canaux { display: flex; gap: 6px; }
.appgrid .evn-canaux .mx-puce i { margin-right: 6px; }
.appgrid .evn-destinataires { display: inline-flex; align-items: center; gap: 8px; }
.appgrid .evn-destinataires .mx-select { width: auto; }
.appgrid .evn-editeur-lbl { font-weight: 700; font-size: 13px; color: var(--et-ink); }
.appgrid .evn-editeur-lbl-ligne { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.appgrid .evn-compte { color: var(--et-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.appgrid .evn-editeur-objet { font-size: 16px; font-weight: 600; min-height: 44px; }
.appgrid .evn-champs { display: flex; flex-wrap: wrap; gap: 6px; }
.appgrid .evn-editeur-corps { min-height: 420px; font-size: 16px; line-height: 1.6; resize: vertical; padding: 12px 14px; }
.appgrid .evn-editeur-apercu { position: sticky; top: 12px; }
.appgrid .evn-editeur-apercu h2 { font-size: 14px; margin: 0 0 4px; }
.appgrid .evn-editeur-apercu h2 span { font-weight: 400; color: var(--et-muted); }
.appgrid .evn-apercu-mail { border: 1px solid var(--et-hairline); background: var(--et-surface); }
.appgrid .evn-apercu-mail-tete { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--et-surface-2); border-bottom: 1px solid var(--et-hairline); font-size: 13px; overflow-wrap: anywhere; }
.appgrid .evn-apercu-mail-tete b { color: var(--et-muted); font-weight: 600; margin-right: 6px; }
.appgrid .evn-apercu-mail-corps { padding: 12px; white-space: pre-line; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.appgrid .evn-apercu-wa { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; background: var(--et-surface-2); border: 1px solid var(--et-hairline); }
.appgrid .evn-apercu-wa-bulle { max-width: 92%; padding: 8px 12px; background: var(--et-succes-bg); color: var(--et-ink); border-radius: 0 10px 10px 10px; white-space: pre-line; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.appgrid .evn-apercu-wa-meta { font-size: 12px; color: var(--et-muted); }

/* ---- Émargement (JOUR-01) : un écran de téléphone. Le compteur en grand, la saisie au pouce. */
.appgrid .evn-emargement { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.appgrid .evn-compteur { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 14px;
                         background: var(--et-surface); border: 1px solid var(--et-hairline); }
.appgrid .evn-compteur b { font-size: 40px; font-family: var(--et-font-mono); line-height: 1; color: var(--et-ink); }
.appgrid .evn-compteur span { color: var(--et-muted); font-size: 16px; }
.appgrid .evn-scan { display: flex; gap: 8px; }
.appgrid .evn-scan input { flex: 1; min-width: 0; min-height: 48px; font-size: 18px; font-family: var(--et-font-mono); }
.appgrid .evn-scan .mx-btn { min-height: 48px; }
.appgrid .evn-verdict { padding: 14px; border: 1px solid var(--et-hairline); border-left: 6px solid var(--et-form-blue); background: var(--et-surface); }
.appgrid .evn-verdict.est-ok { border-left-color: var(--et-succes); }
.appgrid .evn-verdict.est-deja { border-left-color: var(--et-avertissement-mark); }
.appgrid .evn-verdict.est-ko { border-left-color: var(--et-danger); }
.appgrid .evn-verdict b { display: block; font-size: 18px; color: var(--et-ink); }
.appgrid .evn-verdict span { color: var(--et-muted); }
.appgrid .evn-pointage { list-style: none; margin: 0; padding: 0; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.appgrid .evn-pointage li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--et-hairline); min-height: 52px; }
.appgrid .evn-pointage li:first-child { border-top: 0; }
.appgrid .evn-pointage .evn-qui { flex: 1; min-width: 0; }
.appgrid .evn-pointage .evn-qui b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appgrid .evn-pointage .evn-qui span { color: var(--et-muted); font-size: 13px; }
.appgrid .evn-pointage .mx-btn { min-height: 44px; min-width: 44px; }

@media (max-width: 1024px) {
  .appgrid .evn-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appgrid .evn-editeur { grid-template-columns: minmax(0, 1fr); }
  .appgrid .evn-editeur-apercu { position: static; }
  .appgrid .evn-editeur-corps { min-height: 300px; }
}
@media (max-width: 640px) {
  .appgrid .evn-recap { grid-template-columns: 1fr; }
  .appgrid .evn-recap dd { margin-bottom: 6px; }
}

/* L'aperçu de la page publique : le span ne porte que le geste JS (ouvrir l'onglet pendant le clic) ;
   il ne doit rien changer à la rangée de boutons de l'en-tête. */
.appgrid .evn-apercu-geste { display: contents; }

/* ---- LES LISTES EN CARTES SOUS 1024 PX (banc du module, 2026-10-24). Le gabarit range la rangée en
   carte (.mx-liste-cartes, modele-erp.css § 11.x) ; ici, ce que nos cellules y deviennent : la cellule
   tenue sur une ligne (.evn-nowrap) reprend la ligne — la carte a la place que la colonne n'avait pas —
   et un chiffre ou une date (.evn-chiffre, EvnColonne) est précédé du libellé de sa colonne, l'en-tête
   ayant disparu avec le tableau. Même recette que les listes d'EasyCampaign. */
@media (max-width: 1024px) {
    .appgrid .mx-liste-cartes .evn-nowrap { white-space: normal; overflow-wrap: anywhere; }
    .appgrid .mx-liste-cartes .evn-chiffre::before { content: attr(data-lib) " "; color: var(--et-muted); font-family: var(--et-font); font-weight: 400; }
}

/* ---- Partage des contacts : les contacts EasyCampaign proposés dans « Ajouter un inscrit ». Une liste sous
   le champ, un bouton par contact (nom, puis adresse et société en second rang) ; 44 px de cible. ---- */
.appgrid .evn-propositions { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--et-hairline);
    background: var(--et-surface); max-height: 264px; overflow-y: auto; }
.appgrid .evn-propositions li + li { border-top: 1px solid var(--et-hairline); }
.appgrid .evn-proposition { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%;
    min-height: 44px; padding: 4px 10px; border: 0; background: none; color: var(--et-ink); text-align: left; cursor: pointer; }
.appgrid .evn-proposition:hover, .appgrid .evn-proposition:focus-visible { background: var(--et-rang); }
.appgrid .evn-proposition-nom { font-weight: 600; }
.appgrid .evn-proposition-detail { color: var(--et-muted); font-size: var(--et-fs-cell, 13px); overflow-wrap: anywhere; }
.appgrid .evn-proposition-vide { display: block; margin-top: 4px; color: var(--et-faint); }