/* ══════════════════════════════════════════════════════════
   agenda-ajout.css - formulaire public de l'agenda (05/10/2026)
   ──────────────────────────────────────────────────────────
   Chargé par $donneesSupplementairesHeader de agenda-ajout.php,
   donc AVANT custom.css (B1) : les règles qui doivent battre
   custom.css (listes, liens, h1) montent leur spécificité par
   .main. Jetons seuls, aucun repli dans un var(). Mobile-first :
   les grilles de champs suivent la largeur du FORMULAIRE
   (requêtes de conteneur, comme le back-office), la mise en page
   formulaire + aperçu suit celle du cadre.
   La carte d'aperçu (.vm-agcard*) vient de custom.css.
   ══════════════════════════════════════════════════════════ */

/* ── Atouts sous le titre ── */
.main ul.vm-agf-atouts {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   var(--vm-space-2);
    max-width:             880px;
    margin:                0 auto var(--vm-space-5);
    padding-left:          0;
    list-style:            none;
    color:                 var(--vm-text);
}
.vm-agf-atouts > li {
    display:       flex;
    align-items:   center;
    gap:           var(--vm-space-3);
    padding:       var(--vm-space-3) var(--vm-space-4);
    border-radius: var(--vm-radius-md);
    background:    var(--vm-bleu-pale);
    font-size:     var(--vm-fs-sm);
}
.vm-agf-atouts > li > i { flex: 0 0 auto; font-size: 1.25rem; color: var(--vm-bleu); }
.vm-agf-atouts strong { display: block; color: var(--vm-bleu-fonce); }
@media (min-width: 577px) {
    .main ul.vm-agf-atouts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Récapitulatif des erreurs ── */
.vm-agf-erreurs {
    max-width:     1200px;
    margin:        0 auto var(--vm-space-4);
    padding:       var(--vm-space-3) var(--vm-space-4);
    border:        1px solid var(--vm-rose);
    border-left:   5px solid var(--vm-rose);
    border-radius: var(--vm-radius-md);
    background:    var(--vm-rose-pale);
    color:         var(--vm-text);
}
.vm-agf-erreurs:focus-visible { outline: 3px solid var(--vm-turquoise); outline-offset: 2px; }
.vm-agf-erreurs p { margin: 0 0 var(--vm-space-1); }
.main .vm-agf-erreurs ul { margin: 0; padding-left: var(--vm-space-5); color: var(--vm-text); }

/* ── Mise en page : formulaire, puis aperçu à droite si la place le permet ── */
.vm-agf-cadre { container-type: inline-size; max-width: 1200px; margin: 0 auto; }
.vm-agf-edition {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   var(--vm-space-4);
    align-items:           start;
}
.vm-agf-apercu { order: -1; }
@container (min-width: 900px) {
    .vm-agf-edition { grid-template-columns: minmax(0, 1fr) 320px; }
    .vm-agf-apercu  { order: 0; position: sticky; top: calc(var(--vm-header-offset) - 70px); }
}
.vm-agf-apercu {
    padding:       var(--vm-space-3);
    border:        1px solid var(--vm-border);
    border-radius: var(--vm-radius-md);
    background:    var(--vm-surface);
}
.vm-agf-apercu__titre { margin: 0 0 var(--vm-space-2); font-size: var(--vm-fs-sm); font-weight: 700; color: var(--vm-bleu); }
.vm-agf-apercu .vm-agcard__link { height: auto; }
.vm-agf-apercu .vm-agf-aide { margin: var(--vm-space-2) 0 0; }

/* ── Blocs du formulaire ── */
.vm-agf-form { container-type: inline-size; min-width: 0; }
.vm-agf-bloc {
    min-width:     0;
    margin:        0 0 var(--vm-space-4);
    padding:       var(--vm-space-4);
    border:        1px solid var(--vm-border);
    border-radius: var(--vm-radius-md);
    background:    var(--vm-surface);
}
.vm-agf-bloc__titre {
    float:       left;            /* sinon la légende chevauche le bord du bloc */
    width:       100%;
    margin:      0 0 var(--vm-space-3);
    padding:     0;
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--vm-bleu);
}
.vm-agf-bloc__titre + * { clear: both; }
.vm-agf-bloc__num {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    margin-right:    var(--vm-space-2);
    border-radius:   50%;
    background:      var(--vm-bleu);
    color:           var(--vm-surface);
    font-size:       var(--vm-fs-sm);
}
.vm-agf-bloc__public,
.vm-agf-bloc__prive {
    margin-left:   var(--vm-space-2);
    padding:       2px 10px;
    border-radius: var(--vm-radius-pill);
    font-size:     0.72rem;
    font-weight:   600;
    vertical-align: middle;
}
.vm-agf-bloc__public { background: var(--vm-bleu-pale); color: var(--vm-bleu-fonce); }
.vm-agf-bloc__prive  { background: var(--vm-gris-fond); color: var(--vm-text); }

/* ── Grilles de champs ── */
.vm-agf-grille {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   var(--vm-space-3) var(--vm-space-4);
    align-items:           start;
    margin-bottom:         var(--vm-space-3);
}
.vm-agf-grille[hidden] { display: none; }
.vm-agf-grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 560px) {
    .vm-agf-grille--2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vm-agf-grille--orga   { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); }
    .vm-agf-grille--adresse{ grid-template-columns: minmax(0, 2fr) 120px minmax(0, 1fr); }
}
@container (min-width: 600px) {
    .vm-agf-grille--4             { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vm-agf-grille--participation { grid-template-columns: max-content max-content minmax(0, 1fr) minmax(0, 1fr); }
    .vm-agf-grille--titre         { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* ── Champ : libellé, saisie, aide ── */
.vm-agf-champ { min-width: 0; margin: 0; padding: 0; border: 0; }
.vm-agf-champ[hidden] { display: none; }
.vm-agf-champ > label,
.vm-agf-champ > legend,
.vm-agf-label,
.vm-agf-contacts > legend {
    display:     block;
    float:       none;
    width:       100%;
    margin:      0 0 6px;
    padding:     0;
    font-size:   var(--vm-fs-sm);
    font-weight: 700;
    line-height: 1.3;
    color:       var(--vm-bleu);
}
fieldset.vm-agf-champ > legend { float: left; }
fieldset.vm-agf-champ > legend + * { clear: both; }
.vm-agf-form input[type="text"],
.vm-agf-form input[type="email"],
.vm-agf-form input[type="tel"],
.vm-agf-form input[type="url"],
.vm-agf-form input[type="number"],
.vm-agf-form input[type="date"],
.vm-agf-form input[type="time"],
.vm-agf-form select,
.vm-agf-form textarea {
    display:       block;
    width:         100%;
    min-height:    42px;
    padding:       8px 12px;
    border:        1px solid var(--vm-border);
    border-radius: var(--vm-radius-sm);
    background:    var(--vm-surface);
    color:         var(--vm-text);
    font:          inherit;
    font-size:     var(--vm-fs-sm);
    transition:    border-color 0.15s ease, box-shadow 0.15s ease;
}
.vm-agf-form textarea { min-height: 140px; resize: vertical; }
.vm-agf-form input:focus-visible,
.vm-agf-form select:focus-visible,
.vm-agf-form textarea:focus-visible {
    outline:      none;
    border-color: var(--vm-bleu);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--vm-bleu) 25%, transparent);
}
.vm-agf-form [aria-invalid="true"] { border-color: var(--vm-rose); }
.vm-agf-aide { display: block; margin: 4px 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--vm-text-muted); }
.vm-agf-compteur { white-space: nowrap; }
.vm-agf-facultatif { font-size: 0.8rem; font-weight: 400; color: var(--vm-text-muted); }
.vm-agf-form .vm-form-erreur { display: block; margin-top: 4px; }
.vm-agf-form .vm-form-erreur[hidden] { display: none; }

/* ── Pastilles de choix (type, format, tarif) ── */
.vm-agf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.vm-agf-pills--ligne { flex-wrap: nowrap; }
.vm-agf-pill { position: relative; margin: 0; cursor: pointer; }
.vm-agf-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vm-agf-pill span {
    display:       inline-block;
    padding:       5px 12px;
    border:        1px solid var(--vm-turquoise);
    border-radius: var(--vm-radius-pill);
    background:    var(--vm-surface);
    color:         var(--vm-bleu);
    font-size:     var(--vm-fs-sm);
    white-space:   nowrap;
    transition:    background-color 0.15s ease, color 0.15s ease;
}
.vm-agf-pill:hover span { background: var(--vm-bleu-pale); }
.vm-agf-pill input:checked + span { border-color: var(--vm-bleu); background: var(--vm-bleu); color: var(--vm-surface); }
.vm-agf-pill input:focus-visible + span { outline: 3px solid var(--vm-turquoise); outline-offset: 2px; }

/* ── Autres dates ── */
.vm-agf-plus { margin: 0 0 var(--vm-space-3); }
.vm-agf-plus > summary { cursor: pointer; font-size: var(--vm-fs-sm); font-weight: 700; color: var(--vm-bleu); }
.vm-agf-plus > summary span { font-weight: 400; color: var(--vm-text-muted); }
.vm-agf-plus > summary > i { color: var(--vm-turquoise); }
.main ul.vm-agf-seances { margin: var(--vm-space-2) 0; padding-left: 0; list-style: none; }
.seance-ligne {
    display:               grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 36px;
    gap:                   6px;
    align-items:           center;
    margin-bottom:         6px;
}
.vm-agf-retirer {
    width:         36px;
    height:        36px;
    border:        1px solid var(--vm-rose);
    border-radius: 50%;
    background:    var(--vm-surface);
    color:         var(--vm-rose);
    cursor:        pointer;
}
.vm-agf-ajout {
    width:         100%;
    padding:       8px;
    border:        1px dashed var(--vm-bleu);
    border-radius: var(--vm-radius-sm);
    background:    var(--vm-bleu-pale);
    color:         var(--vm-bleu);
    font-weight:   700;
    cursor:        pointer;
}
.vm-agf-ajout:disabled { opacity: .5; cursor: not-allowed; }
.vm-agf-retirer:focus-visible,
.vm-agf-ajout:focus-visible,
.vm-agf-lien:focus-visible { outline: 3px solid var(--vm-turquoise); outline-offset: 2px; }

/* ── Illustration ── */
.vm-agf-illu {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   var(--vm-space-3);
    margin-top:            var(--vm-space-3);
    padding-top:           var(--vm-space-3);
    border-top:            1px solid var(--vm-border);
}
@container (min-width: 560px) {
    .vm-agf-illu { grid-template-columns: 200px minmax(0, 1fr); }
}
.vm-agf-illu__apercu { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; border-radius: var(--vm-radius-sm); background: var(--vm-gris-fond); }
.vm-agf-illu__apercu img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vm-agf-illu__defaut {
    position:      absolute;
    left:          6px;
    bottom:        6px;
    padding:       1px 8px;
    border-radius: var(--vm-radius-pill);
    background:    color-mix(in srgb, var(--vm-text) 80%, transparent);
    color:         var(--vm-surface);
    font-size:     0.72rem;
}
.vm-agf-illu__defaut[hidden] { display: none; }
.vm-agf-illu__boutons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vm-space-3); }
.vm-agf-lien { padding: 0; border: 0; background: none; color: var(--vm-rose); font-size: var(--vm-fs-sm); text-decoration: underline; cursor: pointer; }
.vm-agf-lien[hidden] { display: none; }
.vm-agf-msg { margin: 6px 0 0; font-size: var(--vm-fs-sm); }
.vm-agf-msg:empty { display: none; }
.vm-agf-msg--ok     { color: var(--vm-bleu-fonce); }
.vm-agf-msg--erreur { color: var(--vm-text); font-weight: 600; }
.vm-agf-regles {
    margin:        var(--vm-space-2) 0 0;
    padding:       var(--vm-space-2) var(--vm-space-3);
    border-radius: var(--vm-radius-sm);
    background:    var(--vm-jaune-clair-pale);
    font-size:     0.8rem;
    line-height:   1.4;
    color:         var(--vm-text);
}

/* ── Contacts publics ── */
.vm-agf-contacts { min-width: 0; margin: var(--vm-space-5) 0 0; padding: 0; border: 0; }
.vm-agf-contacts > legend { float: left; }
.vm-agf-contacts > legend + * { clear: both; }

/* ── Cases à cocher ── */
.vm-agf-case { margin: 0 0 var(--vm-space-2); font-size: var(--vm-fs-sm); line-height: 1.45; }
.vm-agf-case label { display: flex; align-items: flex-start; gap: var(--vm-space-2); margin: 0; font-weight: 400; color: var(--vm-text); cursor: pointer; }
.vm-agf-case input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--vm-bleu); }
.vm-agf-case--idem {
    padding:       var(--vm-space-2) var(--vm-space-3);
    border-radius: var(--vm-radius-sm);
    background:    var(--vm-bleu-pale);
    margin-bottom: var(--vm-space-3);
}
.vm-agf-case + .vm-form-erreur { margin: -4px 0 var(--vm-space-2) 26px; }

/* ── Envoi ── */
.vm-agf-envoi { text-align: center; }
.vm-agf-envoi .vm-agf-aide { margin-top: var(--vm-space-2); }

/* ── Confirmation ── */
.vm-agf-confirm { max-width: 420px; margin: 0 auto var(--vm-space-5); }
.vm-agf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vm-space-3); }
.vm-agf-actions .btn { margin: 0; }
.vm-agf-muted { color: var(--vm-text-muted); }

/* ── Fenêtre de recadrage ── */
.vm-agf-crop {
    position:        fixed;
    inset:           0;
    z-index:         2000;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         var(--vm-space-3);
    background:      color-mix(in srgb, var(--vm-text) 70%, transparent);
}
.vm-agf-crop[hidden] { display: none; }
.vm-agf-crop__boite {
    display:        flex;
    flex-direction: column;
    gap:            var(--vm-space-2);
    width:          min(720px, 100%);
    max-height:     calc(100vh - 24px);
    overflow-y:     auto;
    padding:        var(--vm-space-4);
    border-radius:  var(--vm-radius-md);
    background:     var(--vm-surface);
}
.vm-agf-crop__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--vm-space-3); }
.vm-agf-crop__titre { margin: 0; font-weight: 700; color: var(--vm-bleu); }
.vm-agf-crop__fermer { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--vm-gris-fond); color: var(--vm-text); cursor: pointer; }
.vm-agf-crop__fermer:focus-visible { outline: 3px solid var(--vm-turquoise); outline-offset: 2px; }
.vm-agf-crop__image { max-height: 55vh; overflow: hidden; background: var(--vm-gris-fond); }
.vm-agf-crop__image img { display: block; max-width: 100%; }
.vm-agf-crop__accord { display: flex; align-items: flex-start; gap: var(--vm-space-2); margin: 0; font-size: 0.85rem; font-weight: 400; line-height: 1.45; color: var(--vm-text); cursor: pointer; }
.vm-agf-crop__accord input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--vm-bleu); }
.vm-agf-crop__pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--vm-space-2); }
.vm-agf-crop__pied .btn { margin: 0; }
.vm-agf-crop__pied .btn:disabled { opacity: .5; cursor: not-allowed; }