/* =============================================================================
 * MAPIRANDO — mapirando-sortie-formulaire
 * =============================================================================
 *
 * Ces règles étaient imprimées en <style> au milieu du HTML par le PHP. Les
 * sortir ici ne change rien à l'écran : mêmes règles, même ordre. Ce qu'on y
 * gagne, c'est le cache navigateur (elles repartaient dans chaque page) et un
 * fichier PHP qui ne contient plus que de la logique.
 *
 * ATTENTION À L'ORDRE DE CHARGEMENT : un <style> posé dans le corps de page
 * gagne la cascade sur tout ce qui vient de l'en-tête. Cette feuille doit donc
 * être mise en file APRÈS le thème Blocksy — voir la file en priorité 999 dans
 * mapirando-community.php. La charger normalement laisserait le thème reprendre
 * la main sur les marges et les positions.
 * -------------------------------------------------------------------------- */

/* --- Formulaire de création / édition de sortie
       (venait de templates/events/form-create-event.php, lignes 142-294) ------------------------------------- */
/* CSS INTÉGRÉ POUR SÉCURITÉ ANTI-CACHE */
.site-content, .entry-content, #content, .site-main, .wrapper { padding-top: 0 !important; margin-top: 0 !important; }
.page-header, .entry-header { display: none !important; }
header.site-header, #masthead, .ct-header { background: transparent !important; box-shadow: none !important; position: absolute !important; width: 100%; top: 0; z-index: 100; }
            /* La rangée intérieure (attribut data-row de Blocksy) doit RESTER
               transparente ici aussi — sans cette ligne, mapirando-dark-mode.css
               (chargée après, pour donner un fond sombre à l'en-tête sur les pages
               SANS bandeau photo) lui redonne un fond plein, et la photo ne touche
               plus le haut de la page (trouvé le 2026-09-03, capture d'écran de Remy). */
            header.site-header [data-row], #masthead [data-row], .ct-header [data-row] { background: transparent !important; }
            /* Blocksy réserve d'ordinaire 50px en haut de .ct-container-full
               pour SON propre en-tête en flux normal. Le nôtre étant absolu ici
               (voir juste au-dessus), cet espace devient un vide entre la barre
               d'admin et la photo — trouvé le 2026-09-03 en vérifiant à l'écran,
               Remy se souvenait d'un conflit connu entre le bandeau et le thème
               sur ce point précis. */
            .ct-container-full { padding-top: 0 !important; }

.mapi-hero-full { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; height: 500px; margin-top: -150px; padding-top: 200px; background-size: cover; background-position: center; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 60px; z-index: 1; overflow: hidden;}
.mapi-hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7)); z-index:1; }

/* CORRECTION : Titres adoucis avec letter-spacing pour coller au Topo */
.mapi-comm-title { font-size: 2.2em; font-weight: 800; color: white; margin: 5px 0 15px 0; text-transform: uppercase; font-family: sans-serif; text-shadow: 0 4px 15px rgba(0,0,0,0.5); text-align: center; position: relative; z-index: 2; line-height:1.2; letter-spacing: 2px;}
.mapi-comm-subtitle { font-size: 1.1em; margin-bottom: 30px; font-weight: 300; font-family: sans-serif; color: white !important; text-shadow: 0 2px 5px rgba(0,0,0,0.5); text-align: center; position: relative; z-index: 2; }
.mapi-hero-txt { position:relative; z-index:2; text-align:center; color:white; width:90%; max-width:800px; }

/* LA BOÎTE DU FORMULAIRE DE 800PX */
.mapi-form-container { max-width: 800px; margin: -80px auto 60px auto; position: relative; z-index: 10; background: var(--mapi-surface, #141619); border-radius: 15px; padding: 40px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); font-family: sans-serif; }

/* CORRECTION ABSOLUE : Le VRAI style du Topo pour les titres 1, 2, 3 (Barre bleue incluse) */
.mapi-section-title { font-size: 1.4em; color: var(--mapi-text-primary, #f4f3f0); font-weight: 800; border-left: 5px solid #3b82f6; padding-left: 15px; margin: 40px 0 25px 0; }
.mapi-section-title:first-child { margin-top: 0; }

.mapi-label { font-weight: 600; display: block; margin-bottom: 5px; color: var(--mapi-text-secondary, #9aa3ad); }
.mapi-input { width: 100%; padding: 10px; border: 1px solid var(--mapi-border, rgba(255,255,255,0.1)); border-radius: 5px; background: var(--mapi-surface, #141619); font-family: sans-serif; box-sizing: border-box; transition: all 0.2s; color: var(--mapi-text-secondary, #9aa3ad);}
.mapi-input:focus { border-color: #1D1D1F; background: var(--mapi-surface, #141619); outline: none; box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.08); }
select.mapi-input { min-height: 46px; height: auto !important; padding-top: 12px !important; padding-bottom: 12px !important; line-height: normal !important; }
.mapi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.mapi-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; }

.mapi-btn-group-apple { display: flex; gap: 12px; margin-top: 40px; justify-content: center; }

/* ========================================================
   BOUTONS DESIGN SYSTEM (BLANC -> NOIR AU SURVOL)
   ======================================================== */
.btn-signet-dark, .btn-signet-light {
    appearance: none; background: var(--mapi-surface, #141619) !important; color: var(--mapi-text-primary, #f4f3f0) !important;
    border: 1px solid transparent !important; border-radius: 50px !important; font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    font-family: 'Nunito', sans-serif !important; display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; font-size: 13px;
    padding: 15px 30px; text-decoration: none;
}
.btn-signet-light { border-color: var(--mapi-border, rgba(255,255,255,0.1)) !important; }

.btn-signet-dark:hover, .btn-signet-light:hover {
    background: var(--mapi-accent, #fff200) !important; color: var(--mapi-on-accent, #0a0b0d) !important; box-shadow: 0 8px 20px rgba(15,23,42,0.2) !important;
    border-color: var(--mapi-accent, #fff200) !important; transform: none !important;
}

.btn-signet-dark::before, .btn-signet-dark::after, .btn-signet-light::before, .btn-signet-light::after {
    display: none !important; content: none !important;
}

.mapi-radio-box { display: block; text-align: center; padding: 10px; border: 1px solid var(--mapi-border, rgba(255,255,255,0.1)); border-radius: 8px; cursor: pointer; background: var(--mapi-surface, #141619); transition: all 0.2s; }
input[type="radio"][value="tranquille"]:checked + .mapi-radio-box { background: rgba(16,185,129,0.08); border-color: #10b981; color: #047857; font-weight:bold; }
input[type="radio"][value="modere"]:checked + .mapi-radio-box { background: rgba(245,158,11,0.08); border-color: #f59e0b; color: #b45309; font-weight:bold; }
input[type="radio"][value="sportif"]:checked + .mapi-radio-box { background: rgba(244,63,94,0.08); border-color: #f43f5e; color: #be123c; font-weight:bold; }
input[type="radio"][value="oui"]:checked + .mapi-radio-box { background: rgba(16,185,129,0.08); border-color: #10b981; color: #047857; font-weight:bold; }
input[type="radio"][value="non"]:checked + .mapi-radio-box { background: var(--mapi-surface, #141619); border-color: #9aa3ad; color: var(--mapi-text-primary, #f4f3f0); font-weight:bold; }

.mapi-equip-label { cursor: pointer; display: inline-block; }
.mapi-equip-pill { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--mapi-border, rgba(255,255,255,0.1)); border-radius: 50px; background: var(--mapi-surface, #141619); color: #6b7683; font-size: 0.9em; font-weight: 600; transition: all 0.2s; user-select: none; }
.mapi-equip-pill svg { width: 18px; height: 18px; opacity: 0.6; transition: 0.2s; }
.mapi-equip-label:hover .mapi-equip-pill { background: var(--mapi-surface-raised, #1c1f24); }
.mapi-equip-label input:checked + .mapi-equip-pill { border-color: var(--eq-color); color: var(--eq-color); background: var(--mapi-surface, #141619); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.mapi-equip-label input:checked + .mapi-equip-pill svg { opacity: 1; color: var(--eq-color); }

@media(max-width: 768px) {
    .mapi-row, .mapi-row3 { grid-template-columns: 1fr; }
    .mapi-form-container { margin-top: -40px; padding: 25px; }
    .mapi-btn-group-apple { flex-direction: column-reverse; gap: 10px; }
    .btn-signet-dark, .btn-signet-light { width: 100% !important; justify-content: center; padding:12px 22px; font-size:11px; }
    .mapi-hero-full { height: 350px !important; }
    .mapi-hero-txt h1 { font-size: 1.8em !important; }
}

/* ============================================================
   DATE PICKER CUSTOM CLAIR — Formulaire sortie
   ============================================================ */
.mapi-light-date-wrap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.mapi-light-date-trigger {
    width: 100%;
    padding: 10px 40px 10px 10px;
    border: 1px solid var(--mapi-border, rgba(255,255,255,0.1));
    border-radius: 5px;
    background: var(--mapi-surface, #141619);
    font-family: inherit;
    box-sizing: border-box;
    transition: all 0.2s;
    color: var(--mapi-text-secondary, #9aa3ad);
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    user-select: none;
}
.mapi-light-date-trigger:hover { border-color: var(--mapi-text-muted, #6b7683); }
.mapi-light-date-wrap.open .mapi-light-date-trigger {
    border-color: #3b82f6;
    background: var(--mapi-surface, #141619);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
    border-radius: 5px 5px 0 0;
}
.mapi-light-date-trigger-label { flex: 1; color: var(--mapi-text-secondary, #9aa3ad); }
.mapi-light-date-trigger-label.placeholder { color: var(--mapi-text-muted, #6b7683); }
.mapi-light-date-trigger-icon { flex-shrink: 0; margin-left: 8px; opacity: 0.4; }
.mapi-light-date-calendar {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99999;
    background: var(--mapi-surface, #141619);
    border: 1px solid var(--mapi-border, rgba(255,255,255,0.1));
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 12px;
    box-sizing: border-box;
}
.mapi-light-date-wrap.open .mapi-light-date-calendar { display: block; }
.mapi-light-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mapi-light-cal-nav {
    background: none; border: none; color: #55606a; font-size: 1.2em; cursor: pointer;
    padding: 4px 10px; border-radius: 6px; transition: background 0.15s; font-family: inherit; line-height: 1;
}
.mapi-light-cal-nav:hover { background: var(--mapi-surface-raised, #1c1f24); color: var(--mapi-text-primary, #f4f3f0); }
.mapi-light-cal-month-label { color: var(--mapi-text-primary, #f4f3f0); font-weight: 700; font-size: 0.95em; text-align: center; flex: 1; }
.mapi-light-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mapi-light-cal-dow { text-align: center; font-size: 0.75em; font-weight: 700; color: #9aa3ad; text-transform: uppercase; padding: 4px 0; }
.mapi-light-cal-day {
    text-align: center; padding: 6px 2px; border-radius: 6px; font-size: 0.88em;
    color: var(--mapi-text-primary, #f4f3f0); cursor: pointer; transition: background 0.15s; font-family: inherit;
}
.mapi-light-cal-day:hover { background: var(--mapi-surface-raised, #1c1f24); color: var(--mapi-text-primary, #f4f3f0); }
.mapi-light-cal-day.today { border: 1px solid #3b82f6; color: #3b82f6; font-weight: 700; }
.mapi-light-cal-day.selected { background: #3b82f6; color: #fff; font-weight: 700; }
.mapi-light-cal-day.empty { cursor: default; }
.mapi-light-cal-day.empty:hover { background: none; }
.mapi-light-cal-clear {
    display: block; width: 100%; margin-top: 8px; padding: 6px 0;
    background: none; border: 1px solid var(--mapi-border, rgba(255,255,255,0.1)); border-radius: 6px;
    color: #9aa3ad; font-size: 0.82em; font-family: inherit; cursor: pointer; text-align: center; transition: all 0.15s;
}
.mapi-light-cal-clear:hover { background: var(--mapi-surface-raised, #1c1f24); color: #55606a; border-color: #c7cdd4; }