/* Variables CSS personnalisables */
:root {
    --formations-primary: #012A4A;
    --formations-secondary: #57CC99;
    --formations-accent: #3F8E68;
    --formations-background: #F4F4F4;

    /* Dérivées internes */
    --f-primary-rgb: 1, 42, 74;
    --f-secondary-rgb: 87, 204, 153;
    --f-accent-rgb: 63, 142, 104;
    --f-card-radius: 14px;
    --f-shadow-card: 0 2px 12px rgba(1,42,74,.07), 0 1px 3px rgba(1,42,74,.04);
    --f-shadow-hover: 0 10px 32px rgba(1,42,74,.13), 0 2px 8px rgba(1,42,74,.06);
    --f-transition: .22s cubic-bezier(.4,0,.2,1);
}

/* ================================================================
   CARTE MAP
   ================================================================ */

.formations-map-container {
    display: grid;
    grid-template-columns: minmax(280px, 30%) 1fr;
    height: 700px;
    border-radius: var(--f-card-radius);
    overflow: hidden;
    box-shadow: var(--f-shadow-card);
    border: 1px solid rgba(var(--f-primary-rgb), .08);
}

/* Quand la sidebar est masquée, la carte prend toute la largeur */
.formations-map-container.no-sidebar {
    grid-template-columns: 1fr;
}

.formations-map-sidebar {
    background: #fff;
    border-right: 1px solid #eef0f3;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-container {
    padding: 18px 20px;
    border-bottom: 1px solid #eef0f3;
}

.search-input {
    width: 100%;
    padding: 11px 16px;
    border: 1.5px solid #e2e6ea;
    border-radius: 10px;
    font-size: 14px;
    background: #f8f9fb;
    color: #1a2332;
    transition: border-color var(--f-transition), background var(--f-transition);
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: var(--formations-primary);
    background: #fff;
}

.results-count {
    padding: 11px 20px;
    background: #f8f9fb;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #7a8699;
    border-bottom: 1px solid #eef0f3;
}

.formations-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: #e0e0e0 transparent;
}

.formation-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1.5px solid #eef0f3;
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: box-shadow var(--f-transition), border-color var(--f-transition), transform var(--f-transition);
}

.formation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--f-primary-rgb), .1);
    border-color: rgba(var(--f-primary-rgb), .25);
}

.formation-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.formation-icon.icon-presentiel { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.formation-icon.icon-distanciel  { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.formation-icon.icon-hybride     { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }

.formation-content {
    flex: 1;
    min-width: 0;
}

.formation-content h3 {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--formations-primary);
    font-weight: 700;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.formation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: #7a8699;
}

.formation-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    margin-bottom: 8px;
}

.formation-type-badge.presentiel { background: #ede9f9; color: #5e35b1; }
.formation-type-badge.distanciel  { background: #fde8f0; color: #c2185b; }
.formation-type-badge.hybride     { background: #e0f7f4; color: #00796b; }

.voir-details {
    color: var(--formations-accent);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    transition: color var(--f-transition);
}

.voir-details:hover { color: var(--formations-primary); }

.formations-map-view {
    position: relative;
    background: #eaecef;
}

#map-canvas {
    width: 100%;
    height: 100%;
}

/* Marqueurs */
.custom-marker { background: transparent; border: none; }

.marker-container {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
    border: 3px solid #fff;
}

.marker-container.presentiel .marker-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.marker-container.distanciel  .marker-icon { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.marker-container.hybride     .marker-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }

.marker-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e03131;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.25);
}

/* Popup */
.formations-popup { padding: 4px; }

/* ── Popup carte formations — nouveau design ── */
.gf-leaflet-popup .leaflet-popup-content-wrapper {
    border-radius: 14px !important;
    box-shadow: 0 8px 30px rgba(1,42,74,.18), 0 2px 8px rgba(1,42,74,.08) !important;
    border: 1px solid rgba(1,42,74,.08) !important;
    padding: 0 !important;
    overflow: hidden;
}

.gf-leaflet-popup .leaflet-popup-content {
    margin: 0 !important;
    width: auto !important;
}

.gf-leaflet-popup .leaflet-popup-tip-container {
    margin-top: -1px;
}

.gf-popup {
    min-width: 220px;
}

.gf-popup-item {
    padding: 16px 18px;
}

.gf-popup-item--sep {
    border-top: 1px solid #f0f2f5;
}

.gf-popup-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.gf-popup-badge--presentiel { background: var(--formations-primary); color: #fff; }
.gf-popup-badge--distanciel { background: var(--formations-secondary); color: var(--formations-primary); }
.gf-popup-badge--hybride    { background: linear-gradient(128deg, var(--formations-primary) 0%, var(--formations-secondary) 100%); color: #fff; }

.gf-popup-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--formations-primary);
    line-height: 1.3;
    margin-bottom: 10px;
    letter-spacing: -.1px;
}

.gf-popup-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.gf-popup-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #6b7280;
    font-weight: 500;
}

.gf-popup-meta-item svg {
    color: var(--formations-primary);
    opacity: .5;
    flex-shrink: 0;
}

.gf-popup-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--formations-accent);
    text-decoration: none;
    transition: gap .18s, color .18s;
}

.gf-popup-cta:hover {
    color: var(--formations-primary);
    gap: 9px;
    text-decoration: none;
}

.gf-popup-cta svg {
    flex-shrink: 0;
    transition: transform .18s;
}

.gf-popup-cta:hover svg {
    transform: translateX(2px);
}

/* ================================================================
   PAGE LISTE FORMATIONS — SECTIONS
   ================================================================ */

.formations-catalogue,
.formations-sessions {
    margin: 48px 0;
}

/* Titre de section  */
.formations-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 800;
    color: var(--formations-primary);
    margin: 0 0 28px;
    padding-bottom: 16px;
    border-bottom: 2px solid #eef0f3;
    letter-spacing: -.3px;
}

.formations-section-title .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(var(--f-primary-rgb), .07);
    border-radius: 10px;
    color: var(--formations-primary);
    flex-shrink: 0;
}

/* ================================================================
   GRILLE TYPES (catalogue) — 2 colonnes
   ================================================================ */

.formations-liste--types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 0;
}

/* ================================================================
   CARTE — TYPE DE FORMATION
   ================================================================ */

.formation-item--type {
    background: #fff;
    border: 1.5px solid #eef0f3;
    border-radius: var(--f-card-radius);
    padding: 28px;
    box-shadow: var(--f-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: box-shadow var(--f-transition), transform var(--f-transition), border-color var(--f-transition);
    position: relative;
    overflow: hidden;
}

/* Liseré coloré en haut */
.formation-item--type::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--formations-primary), var(--formations-secondary));
    opacity: 0;
    transition: opacity var(--f-transition);
}

.formation-item--type:hover {
    transform: translateY(-4px);
    box-shadow: var(--f-shadow-hover);
    border-color: rgba(var(--f-primary-rgb), .15);
}

.formation-item--type:hover::before {
    opacity: 1;
}

.formation-item__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.formation-item__header h3 {
    margin: 0;
    flex: 1;
    font-size: 18px;
    font-weight: 800;
    color: var(--formations-primary);
    line-height: 1.3;
    letter-spacing: -.2px;
}

.formation-item__badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

/* Badge type (Présentiel / Distanciel / Hybride) */
.formation-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.formation-type-badge.presentiel { background: #ede9f9; color: #5e35b1; }
.formation-type-badge.distanciel  { background: #fde8f0; color: #c2185b; }
.formation-type-badge.hybride     { background: #e0f7f4; color: #00796b; }

/* Badge sessions dispo */
.formation-sessions-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--formations-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Méta-infos (durée, prix, formateur…) */
.formation-item--type .formation-meta,
.formation-item .formation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f2f5;
}

.formation-item--type .formation-meta span,
.formation-item .formation-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #5a6475;
    font-weight: 500;
}

.formation-item--type .formation-meta .icon,
.formation-item .formation-meta .icon {
    color: var(--formations-primary);
    opacity: .55;
    flex-shrink: 0;
}

/* Prix mis en avant */
.formation-item--type .formation-meta .formation-prix,
.formation-item .formation-meta .formation-prix {
    color: var(--formations-accent);
    font-weight: 700;
}

.formation-item--type .formation-meta .formation-prix .icon,
.formation-item .formation-meta .formation-prix .icon {
    color: var(--formations-accent);
    opacity: .8;
}

/* Résumé */
.formation-resume {
    font-size: 14px;
    line-height: 1.7;
    color: #6b7280;
    margin-bottom: 14px;
    flex: 1;
}

/* Public cible */
.formation-public-cible {
    font-size: 13px;
    color: #5a6475;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: #f8f9fb;
    border-radius: 8px;
    line-height: 1.55;
}

.formation-public-cible strong {
    color: var(--formations-primary);
    font-weight: 700;
}

/* Prochaines sessions */
.formation-prochaines-sessions {
    margin: 0 0 16px;
    font-size: 13px;
    color: #374151;
}

.formation-prochaines-sessions strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9ca3af;
    margin-bottom: 8px;
}

.sessions-mini-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sessions-mini-list li a {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(var(--f-primary-rgb), .04);
    border: 1.5px solid rgba(var(--f-primary-rgb), .15);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--formations-primary);
    text-decoration: none;
    transition: background var(--f-transition), color var(--f-transition), border-color var(--f-transition);
}

.sessions-mini-list li a:hover {
    background: var(--formations-primary);
    color: #fff;
    border-color: var(--formations-primary);
}

.sessions-mini-list li em {
    color: #9ca3af;
    font-size: 12px;
    padding: 4px 6px;
    font-style: normal;
}

/* CTA — Voir la formation */
.formation-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--formations-primary);
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: background var(--f-transition), transform var(--f-transition), box-shadow var(--f-transition);
    margin-top: auto;
    align-self: flex-start;
    box-shadow: 0 2px 8px rgba(var(--f-primary-rgb), .2);
}

.formation-lien:hover {
    background: var(--formations-accent);
    color: #fff;
    transform: translateX(3px);
    box-shadow: 0 4px 14px rgba(var(--f-accent-rgb), .3);
}

.formation-lien .icon {
    transition: transform var(--f-transition);
    flex-shrink: 0;
}

.formation-lien:hover .icon {
    transform: translateX(4px);
}

/* ================================================================
   LISTE SESSIONS (grille 1 col)
   ================================================================ */

.formations-sessions .formations-liste {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0;
}

.formation-item {
    background: #fff;
    border: 1.5px solid #eef0f3;
    border-radius: var(--f-card-radius);
    padding: 26px 28px;
    box-shadow: var(--f-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: box-shadow var(--f-transition), transform var(--f-transition), border-color var(--f-transition);
}

.formation-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--f-shadow-hover);
    border-color: rgba(var(--f-primary-rgb), .15);
}

.formation-item h3 {
    margin: 0 0 8px;
    color: var(--formations-primary);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.25px;
    line-height: 1.3;
}

/* Lien vers type */
.formation-type-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--formations-accent);
    margin-bottom: 14px;
    font-weight: 600;
    opacity: .85;
}

.formation-type-link a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(var(--f-accent-rgb), .4);
    transition: opacity var(--f-transition);
}

.formation-type-link a:hover { opacity: 1; text-decoration-color: currentColor; }
.formation-type-link .icon { opacity: .55; }

/* Session CTA */
.formation-item > .formation-lien {
    background: var(--formations-accent);
    box-shadow: 0 2px 8px rgba(var(--f-accent-rgb), .25);
}

.formation-item > .formation-lien:hover {
    background: var(--formations-primary);
    box-shadow: 0 4px 14px rgba(var(--f-primary-rgb), .25);
    transform: translateX(3px);
}

/* ================================================================
   ÉTAT VIDE
   ================================================================ */

.formations-liste p {
    color: #9ca3af;
    font-size: 15px;
    text-align: center;
    padding: 48px 20px;
    border: 1.5px dashed #e5e7eb;
    border-radius: var(--f-card-radius);
    background: #fafbfc;
}

/* ================================================================
   PAGE SINGLE FORMATION
   ================================================================ */

.formation-single-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px;
}

.formation-header h1 {
    font-size: 2.4em;
    font-weight: 900;
    color: var(--formations-primary);
    margin-bottom: 32px;
    letter-spacing: -.5px;
    line-height: 1.2;
}

.formation-infos-principales {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}

.info-box {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    background: #f8f9fb;
    border: 1.5px solid #eef0f3;
    border-radius: 12px;
    transition: border-color var(--f-transition);
}

.info-box:hover { border-color: rgba(var(--f-primary-rgb), .2); }

.info-box .icon { flex-shrink: 0; color: var(--formations-primary); margin-top: 2px; }

.info-box strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9ca3af;
    margin-bottom: 5px;
}

.info-box p {
    margin: 0;
    color: var(--formations-primary);
    font-size: 1.05em;
    font-weight: 600;
}

.info-box small { color: #9ca3af; font-size: .82em; }

.prix-box .icon { color: var(--formations-accent); }
.prix-box p { color: var(--formations-accent); }

.formation-section {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid #eef0f3;
}

.formation-section:last-of-type { border-bottom: none; }

.formation-section h2 {
    color: var(--formations-primary);
    font-size: 1.6em;
    font-weight: 800;
    margin-bottom: 18px;
    letter-spacing: -.2px;
}

.section-content {
    line-height: 1.85;
    color: #4b5563;
    font-size: 15px;
}

.section-content ul {
    list-style: none;
    padding-left: 0;
}

.section-content ul li {
    padding-left: 24px;
    position: relative;
    margin-bottom: 10px;
}

.section-content ul li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--formations-accent);
    font-weight: 700;
}

.infos-pratiques-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.info-pratique {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    background: #f8f9fb;
    border: 1.5px solid #eef0f3;
    border-radius: 12px;
}

.info-pratique .icon { flex-shrink: 0; color: var(--formations-primary); }

.info-pratique strong {
    display: block;
    color: var(--formations-primary);
    margin-bottom: 6px;
    font-weight: 700;
}

.info-pratique p { margin: 0; color: #4b5563; font-size: 14px; }

.formation-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #eef0f3;
}

.btn-inscription {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--formations-accent);
    color: #fff;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: background var(--f-transition), transform var(--f-transition), box-shadow var(--f-transition);
    box-shadow: 0 2px 10px rgba(var(--f-accent-rgb), .25);
}

.btn-inscription:hover {
    background: var(--formations-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--f-primary-rgb), .22);
}

.btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #dc2626;
    color: #fff;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: background var(--f-transition), transform var(--f-transition);
    box-shadow: 0 2px 10px rgba(220,38,38,.2);
}

.btn-pdf:hover {
    background: #b91c1c;
    color: #fff;
    transform: translateY(-2px);
}

.btn-pdf svg { flex-shrink: 0; }

.btn-retour {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #6b7280;
    border: 1.5px solid #d1d5db;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: border-color var(--f-transition), color var(--f-transition);
}

.btn-retour:hover {
    border-color: var(--formations-primary);
    color: var(--formations-primary);
}

/* ================================================================
   MODAL INSCRIPTION
   ================================================================ */

.modal-inscription {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background-color: rgba(1, 20, 38, .6);
    backdrop-filter: blur(4px);
    animation: fadeIn .25s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 40px;
    border-radius: 18px;
    width: 92%;
    max-width: 580px;
    box-shadow: 0 24px 64px rgba(1,20,38,.3);
    position: relative;
    animation: slideDown .3s cubic-bezier(.34,1.56,.64,1);
}

@keyframes slideDown {
    from { transform: translateY(-40px) scale(.97); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-close {
    color: #9ca3af;
    position: absolute;
    right: 20px;
    top: 16px;
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: color var(--f-transition);
}

.modal-close:hover { color: var(--formations-primary); }

.modal-subtitle {
    color: #6b7280;
    margin-bottom: 28px;
    font-size: 15px;
    line-height: 1.6;
}

.formulaire-inscription .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.formulaire-inscription .form-field { margin-bottom: 16px; }

.formulaire-inscription label {
    display: block;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7280;
    margin-bottom: 7px;
}

.formulaire-inscription input[type="text"],
.formulaire-inscription input[type="email"],
.formulaire-inscription input[type="tel"],
.formulaire-inscription textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    background: #fafafa;
    color: #111;
    transition: border-color var(--f-transition), background var(--f-transition);
    box-sizing: border-box;
}

.formulaire-inscription input:focus,
.formulaire-inscription textarea:focus {
    outline: none;
    border-color: var(--formations-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--f-primary-rgb), .07);
}

.formulaire-inscription .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

/* Message succès */
.inscription-success-message {
    position: fixed;
    inset: 0;
    background: rgba(1,20,38,.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.success-content {
    background: #fff;
    padding: 48px;
    border-radius: 18px;
    text-align: center;
    max-width: 480px;
    box-shadow: 0 24px 64px rgba(1,20,38,.25);
}

.success-content svg { margin-bottom: 18px; }

.success-content h2 {
    color: var(--formations-accent);
    margin-bottom: 14px;
    font-weight: 800;
}

.success-content p {
    color: #6b7280;
    line-height: 1.65;
    margin-bottom: 24px;
}

/* ================================================================
   CARTE LÉGENDE
   ================================================================ */

.carte-formations-container { margin: 30px 0; }

#carte-formations {
    border-radius: var(--f-card-radius);
    box-shadow: var(--f-shadow-card);
}

.carte-legende {
    margin-top: 14px;
    padding: 14px 18px;
    background: #f8f9fb;
    border-radius: 10px;
    border: 1.5px solid #eef0f3;
    display: flex;
    align-items: center;
    gap: 20px;
}

.carte-legende h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9ca3af;
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4b5563;
    font-weight: 500;
}

.leaflet-popup-content h4 {
    margin: 0 0 8px;
    color: var(--formations-primary);
    font-weight: 700;
}

.leaflet-popup-content p {
    margin: 4px 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #6b7280;
}

.leaflet-popup-content a {
    display: inline-block;
    margin-top: 10px;
    color: var(--formations-accent);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.leaflet-popup-content a:hover { text-decoration: underline; }

/* ================================================================
   VARIANTES D'AFFICHAGE
   ================================================================ */

/* MODERNE */
body.formations-style-moderne .formation-item,
body.formations-style-moderne .formation-item--type {
    border-top: 4px solid var(--formations-primary);
    border-radius: 6px;
}

body.formations-style-moderne .formation-item--type::before { display: none; }

body.formations-style-moderne .formation-item:hover,
body.formations-style-moderne .formation-item--type:hover {
    transform: translateY(-5px);
    box-shadow: var(--f-shadow-hover);
}

body.formations-style-moderne .formation-item h3,
body.formations-style-moderne .formation-item--type .formation-item__header h3 {
    font-weight: 900;
    letter-spacing: -.4px;
}

body.formations-style-moderne .formation-lien {
    background: linear-gradient(135deg, var(--formations-primary) 0%, var(--formations-secondary) 100%);
    border-radius: 6px;
    text-transform: uppercase;
    font-size: .84em;
    letter-spacing: .6px;
}

/* SOBRE */
body.formations-style-sobre .formation-item,
body.formations-style-sobre .formation-item--type {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: none;
}

body.formations-style-sobre .formation-item--type::before { display: none; }

body.formations-style-sobre .formation-item:hover,
body.formations-style-sobre .formation-item--type:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--formations-primary);
}

body.formations-style-sobre .formation-lien {
    background: transparent;
    color: var(--formations-primary);
    border: 1.5px solid var(--formations-primary);
    box-shadow: none;
}

body.formations-style-sobre .formation-lien:hover {
    background: var(--formations-primary);
    color: #fff;
    transform: none;
}

/* SANS RAYON */
body.formations-style-sans-rayon .formation-item,
body.formations-style-sans-rayon .formation-item--type,
body.formations-style-sans-rayon .formation-lien,
body.formations-style-sans-rayon .info-box,
body.formations-style-sans-rayon .info-pratique,
body.formations-style-sans-rayon .btn-inscription,
body.formations-style-sans-rayon .btn-pdf,
body.formations-style-sans-rayon .btn-retour,
body.formations-style-sans-rayon .modal-content,
body.formations-style-sans-rayon .success-content,
body.formations-style-sans-rayon .formation-card,
body.formations-style-sans-rayon .carte-legende,
body.formations-style-sans-rayon .search-input,
body.formations-style-sans-rayon .formation-type-badge,
body.formations-style-sans-rayon .sessions-mini-list li a,
body.formations-style-sans-rayon .formation-sessions-badge,
body.formations-style-sans-rayon .formation-public-cible {
    border-radius: 0 !important;
}

body.formations-style-sans-rayon .formation-item--type::before { border-radius: 0; }

body.formations-style-sans-rayon .formation-item:hover,
body.formations-style-sans-rayon .formation-item--type:hover {
    transform: none;
    box-shadow: 3px 3px 0 var(--formations-primary);
    border-color: var(--formations-primary);
}

/* MAGAZINE */
body.formations-style-magazine .formation-item--type,
body.formations-style-magazine .formation-item {
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
}

body.formations-style-magazine .formation-item--type::before {
    opacity: 1;
    height: 5px;
}

body.formations-style-magazine .formation-item--type .formation-item__header,
body.formations-style-magazine .formation-item--type .formation-meta,
body.formations-style-magazine .formation-item--type .formation-resume,
body.formations-style-magazine .formation-item--type .formation-public-cible,
body.formations-style-magazine .formation-item--type .formation-prochaines-sessions,
body.formations-style-magazine .formation-item--type .formation-lien,
body.formations-style-magazine .formation-item h3,
body.formations-style-magazine .formation-item .formation-type-link,
body.formations-style-magazine .formation-item .formation-meta,
body.formations-style-magazine .formation-item .formation-resume,
body.formations-style-magazine .formation-item .formation-lien {
    padding-left: 26px;
    padding-right: 26px;
}

body.formations-style-magazine .formation-item--type .formation-item__header { padding-top: 22px; }
body.formations-style-magazine .formation-item h3 { padding-top: 22px; }
body.formations-style-magazine .formation-item .formation-lien,
body.formations-style-magazine .formation-item--type .formation-lien {
    margin: 0 26px 24px;
    padding-left: 0;
    padding-right: 0;
    display: inline-flex;
    border-radius: 24px;
}

/* MINIMALISTE */
body.formations-style-minimaliste .formation-item--type,
body.formations-style-minimaliste .formation-item {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: #fafbfc;
    border-bottom: 1px solid #e5e7eb;
}

body.formations-style-minimaliste .formation-item--type::before { display: none; }

body.formations-style-minimaliste .formation-item--type:hover,
body.formations-style-minimaliste .formation-item:hover {
    transform: none;
    box-shadow: none;
    background: #fff;
}

body.formations-style-minimaliste .formation-lien {
    background: transparent;
    color: var(--formations-primary);
    padding: 0;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
}

body.formations-style-minimaliste .formation-lien:hover {
    background: transparent;
    color: var(--formations-accent);
    transform: none;
    box-shadow: none;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1024px) {
    .formations-map-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 400px;
        height: auto;
        overflow: visible;
    }

    .formations-map-sidebar {
        border-right: none;
        border-bottom: 1px solid #eef0f3;
        height: auto;
        max-height: none;
        overflow: visible;
        width: 100%;
    }

    .formations-map-sidebar .formations-list {
        height: auto;
        max-height: none;
        overflow-y: visible;
    }

    .formations-map-view {
        height: 400px;
    }

    .formations-liste--types {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .formations-section-title { font-size: 17px; }

    .formation-item,
    .formation-item--type { padding: 20px; }

    .formation-item h3 { font-size: 17px; }
    .formation-item__header h3 { font-size: 16px; }

    .formation-meta { gap: 6px 10px; }

    .formation-lien { padding: 11px 18px; font-size: 13px; }

    #carte-formations { height: 400px !important; }

    .formulaire-inscription .form-row {
        grid-template-columns: 1fr;
    }

    .modal-content { padding: 28px 22px; }

    .formation-single-container { padding: 28px 16px; }

    .formation-header h1 { font-size: 1.8em; }
}

/* ================================================================
   === ARCHIVE FORMATIONS (.faw) ===
   Styles de la page /formations — entièrement autonomes
   ================================================================ */

/* ── Variables (surchargées par wp_head si couleurs perso) ── */
:root {
    --fp:  #012A4A;
    --fs:  #57CC99;
    --fa:  #61CE70;
    --faw-r:  14px;
    --faw-sh: 0 2px 12px rgba(1,42,74,.07);
    --faw-shl:0 8px 32px rgba(1,42,74,.13);
    --faw-t:  .2s cubic-bezier(.4,0,.2,1);
    --faw-bg: #f0f2f6;
}

/* ── Reset wrapper ── */
.faw { background: var(--faw-bg); font-family: inherit; color: #1a2332; }
.faw *, .faw *::before, .faw *::after { box-sizing: border-box; }
.faw h1, .faw h2, .faw h3 { margin: 0; }
.faw p { margin: 0; }
.faw a { text-decoration: none; color: inherit; }

/* ================================================================
   HERO
   ================================================================ */
.faw-hero {
    background: linear-gradient(135deg, var(--fp) 0%, color-mix(in srgb, var(--fp) 52%, var(--fs)) 100%);
    padding: 54px 24px 50px;
    overflow: hidden;
    position: relative;
}
.faw-hero::after {
    content: '';
    position: absolute;
    right: -100px; bottom: -100px;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    pointer-events: none;
}
.faw-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.faw-hero-title { font-size: 38px; font-weight: 800; color: #fff; letter-spacing: -.6px; line-height: 1.15; }
.faw-hero-sub   { font-size: 16px; color: rgba(255,255,255,.8); max-width: 500px; line-height: 1.7; margin-top: 10px; }
.faw-stats      { display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; }
.faw-stat {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 18px 26px;
    text-align: center;
    backdrop-filter: blur(8px);
    min-width: 90px;
}
.faw-stat-n { display: block; font-size: 36px; font-weight: 800; color: #fff; letter-spacing: -.5px; line-height: 1; margin-bottom: 5px; }
.faw-stat-l { font-size: 12px; color: rgba(255,255,255,.7); letter-spacing: .3px; }

/* ================================================================
   NAVIGATION ONGLETS
   ================================================================ */
.faw-nav {
    background: #fff;
    border-bottom: 1px solid #e8ecf0;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(1,42,74,.05);
}
.faw-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; }
.faw-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 18px 22px;
    background: none; border: none; border-bottom: 2.5px solid transparent;
    font-size: 14px; font-weight: 600; color: #7a8699;
    cursor: pointer; transition: color var(--faw-t), border-color var(--faw-t);
    font-family: inherit; margin-bottom: -1px; white-space: nowrap;
}
.faw-tab:hover  { color: var(--fp); }
.faw-tab.active { color: var(--fp); border-bottom-color: var(--fp); }
.faw-tab-badge {
    font-size: 11px; font-weight: 700;
    background: rgba(1,42,74,.08); color: var(--fp);
    padding: 2px 8px; border-radius: 20px;
    transition: all var(--faw-t);
}
.faw-tab.active .faw-tab-badge { background: var(--fp); color: #fff; }

/* ── Panels ── */
.faw-panel        { display: none; }
.faw-panel.active { display: block; }

/* ================================================================
   TOOLBAR FILTRES
   ================================================================ */
.faw-toolbar { background: #fff; border-bottom: 1px solid #e8ecf0; }
.faw-toolbar-inner {
    max-width: 1200px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.faw-search {
    flex: 1; min-width: 220px;
    display: flex; align-items: center; gap: 10px;
    background: #f8f9fb; border: 1.5px solid #e5e7eb; border-radius: 10px;
    padding: 11px 16px; cursor: text;
    transition: border-color var(--faw-t), background var(--faw-t), box-shadow var(--faw-t);
}
.faw-search:focus-within { border-color: var(--fp); background: #fff; box-shadow: 0 0 0 3px rgba(1,42,74,.06); }
.faw-search svg { color: #b0b8c4; flex-shrink: 0; }
.faw-search input { border: none; outline: none; background: transparent; font-size: 14px; color: #1a2332; width: 100%; font-family: inherit; }
.faw-search input::placeholder { color: #c4cad4; }

.faw-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.faw-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 20px;
    font-size: 13px; font-weight: 600;
    background: #f0f2f5; color: #7a8699;
    border: 1.5px solid transparent;
    cursor: pointer; transition: all var(--faw-t); font-family: inherit;
}
.faw-chip:hover  { border-color: var(--fp); color: var(--fp); background: rgba(1,42,74,.04); }
.faw-chip.active { background: var(--fp); color: #fff; border-color: var(--fp); }
.faw-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.faw-dot--p { background:#012a4a; border: 1px solid #ffffff; }
.faw-dot--d { background:#57cc99; border: 1px solid #ffffff; }
.faw-dot--h { background:linear-gradient(128deg, #012a4a 0%, #57cc99 100%); border: 1px solid rgba(255,255,255,.3); border:1px solid #ffffff; }
.faw-chip.active .faw-dot { background: rgba(255,255,255,.5); }

.faw-sort { display: flex; align-items: center; gap: 8px; color: #9ca3af; }
.faw-sort select {
    border: 1.5px solid #e5e7eb; border-radius: 10px;
    padding: 10px 14px; font-size: 13px; font-weight: 500;
    color: #4b5563; background: #fff; cursor: pointer;
    transition: border-color var(--faw-t); font-family: inherit;
}
.faw-sort select:focus { outline: none; border-color: var(--fp); }
.faw-result-count {
    font-size: 12px; font-weight: 700; color: #9ca3af;
    background: #f0f2f5; padding: 6px 13px; border-radius: 20px;
    white-space: nowrap; margin-left: auto;
}

/* ================================================================
   SECTIONS
   ================================================================ */
.faw-section { padding: 40px 0; }
.faw-section--alt  { background: #fff; }
.faw-section--form { padding-bottom: 60px; }
.faw-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.faw-inner--narrow { max-width: 820px; }
.faw-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 28px; flex-wrap: wrap;
}
.faw-sh-title {
    font-size: 18px; font-weight: 800; color: var(--fp);
    display: flex; align-items: center; gap: 9px; letter-spacing: -.2px;
}
.faw-sh-title svg { background: rgba(1,42,74,.07); padding: 5px; border-radius: 8px; box-sizing: content-box; flex-shrink: 0; }
.faw-sh-count { font-size: 12.5px; font-weight: 700; color: #9ca3af; background: #f0f2f5; padding: 4px 12px; border-radius: 20px; }

/* ================================================================
   GRILLE SESSIONS (rendu JS dans #faw-grid)
   ================================================================ */
.faw-sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}

/* ── Card session ── */
.faw-card {
    background: #fff;
    border-radius: var(--faw-r);
    overflow: hidden;
    box-shadow: var(--faw-sh);
    border: 1.5px solid transparent;
    display: flex; flex-direction: column;
    transition: box-shadow var(--faw-t), border-color var(--faw-t), transform var(--faw-t);
    cursor: pointer;
}
.faw-card:hover { transform: translateY(-5px); box-shadow: var(--faw-shl); border-color: rgba(1,42,74,.15); }
.faw-card.faw-card--selected { border-color: var(--fp); box-shadow: 0 0 0 2px var(--fp), var(--faw-shl); }

.faw-card-head {
    padding: 22px 22px 18px;
    background: linear-gradient(145deg, var(--fp) 0%, color-mix(in srgb, var(--fp) 55%, var(--fs)) 100%);
    color: #fff; position: relative;
}
.faw-card-pill {
    position: absolute; top: 14px; right: 14px;
    background: rgba(255,255,255,.18); backdrop-filter: blur(6px);
    padding: 4px 11px; border-radius: 20px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.faw-card-title { font-size: 18px; font-weight: 800; line-height: 1.3; padding-right: 90px; letter-spacing: -.15px; margin-bottom: 8px; }
.faw-card-teaser { font-size: 13px; opacity: .82; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.faw-card-body { padding: 18px 22px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.faw-card-meta  { display: grid; gap: 7px; }
.faw-card-row   { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #4b5563; }
.faw-card-row svg { color: var(--fp); flex-shrink: 0; }

.faw-card-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding-top: 14px; border-top: 1px solid #f0f2f5; margin-top: auto;
}
.faw-card-price-lbl { font-size: 10.5px; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.faw-card-price-val { font-size: 22px; font-weight: 800; color: var(--fp); letter-spacing: -.3px; line-height: 1; }
.faw-card-price-val small { font-size: 12px; font-weight: 500; color: #b0b8c4; }
.faw-card-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 20px; background: var(--fa); color: #fff !important;
    border-radius: 10px; font-weight: 700; font-size: 13px;
    transition: background var(--faw-t), transform var(--faw-t), box-shadow var(--faw-t);
    white-space: nowrap; box-shadow: 0 2px 8px rgba(97,206,112,.3);
}
.faw-card-cta:hover { background: var(--fp); color: #fff; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(1,42,74,.2); }


/* ── Pills de sessions sur les cards ───────────────────────────── */
.faw-card-sessions {
    padding: 0 22px 4px;
}

/* Zone "aucune session" */
.faw-no-session {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    background: #f3f4f6;
    border: 1.5px dashed #d1d5db;
    padding: 6px 12px;
    border-radius: 20px;
}
.faw-no-session svg { color: #d1d5db; flex-shrink: 0; }

/* Grille de pills dates */
.faw-session-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.faw-s-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fp);
    background: color-mix(in srgb, var(--fp) 9%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--fp) 22%, transparent);
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.3;
    transition: background .15s, border-color .15s;
}
.faw-s-pill:hover {
    background: color-mix(in srgb, var(--fp) 16%, transparent);
    border-color: color-mix(in srgb, var(--fp) 40%, transparent);
}

/* Pill "…+N autres" */
.faw-s-pill--more {
    color: #6b7280;
    background: #f3f4f6;
    border-color: #e5e7eb;
    font-style: italic;
}
.faw-s-pill--more:hover {
    background: #e9ebee;
    border-color: #d1d5db;
}

/* Card sans session future : visuellement atténuée */
.faw-card--nosession {
    opacity: .75;
    border-style: dashed;
}
.faw-card--nosession:hover {
    opacity: 1;
    transform: translateY(-3px);
}
.faw-card--nosession .faw-card-cta {
    background: transparent;
    color: #9ca3af;
    border: 1.5px solid #d1d5db;
}
.faw-card--nosession .faw-card-cta:hover {
    background: #6b7280;
    color: #fff;
    border-color: #6b7280;
}

/* État vide */
.faw-empty {
    text-align: center; padding: 70px 24px; background: #fff;
    border-radius: var(--faw-r); border: 1.5px dashed #e2e6ea;
    grid-column: 1 / -1;
}
.faw-empty svg { color: #d1d5db; display: block; margin: 0 auto 16px; }
.faw-empty h3 { font-size: 20px; color: #374151; margin-bottom: 8px; }
.faw-empty p  { color: #9ca3af; font-size: 14px; }

/* Loading */
.faw-loading {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 70px; color: #9ca3af; font-size: 14px;
}
.faw-spinner {
    display: inline-block; width: 26px; height: 26px;
    border: 3px solid #e5e7eb; border-top-color: var(--fp);
    border-radius: 50%; animation: faw-spin .8s linear infinite; flex-shrink: 0;
}
@keyframes faw-spin { to { transform: rotate(360deg); } }

/* ================================================================
   CARTE — pleine largeur
   ================================================================ */
.faw-map-section { background: var(--fp); }
.faw-map-header  { padding: 28px 24px 0; }
.faw-map-title {
    font-size: 20px; font-weight: 800; color: #fff;
    display: flex; align-items: center; gap: 10px;
}
.faw-map-title svg { background: rgba(255,255,255,.15); padding: 6px; border-radius: 8px; box-sizing: content-box; flex-shrink: 0; }
.faw-map-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; padding: 0 2px 20px; }
.faw-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.75); font-weight: 500; }
.faw-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Body carte : panneau latéral + canvas */
.faw-map-body {
    display: flex;
    height: 560px;
    position: relative;
    overflow: hidden;
}

/* Panneau résumé latéral */
.faw-map-panel {
    width: 0; overflow: hidden; flex-shrink: 0;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: width .32s cubic-bezier(.4,0,.2,1);
    position: relative;
}
.faw-map-panel.open { width: 340px; }
.faw-map-panel-inner {
    width: 340px; height: 100%;
    overflow-y: auto; padding: 28px 22px 22px;
    display: flex; flex-direction: column; gap: 14px;
    color: #fff; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
.faw-map-panel-close {
    position: absolute; top: 14px; right: 14px;
    background: rgba(255,255,255,.15); border: none; border-radius: 8px;
    width: 30px; height: 30px; cursor: pointer; color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--faw-t); z-index: 10;
}
.faw-map-panel-close:hover { background: rgba(255,255,255,.28); }

/* Contenu panneau */

/* ── Sessions dans le panneau carte ────────────────────────────── */
.faw-panel-sessions-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: rgba(255,255,255,.55);
    margin-bottom: 7px;
}
.faw-panel-sessions-label svg { opacity: .6; }
.faw-panel-pills {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-bottom: 2px;
}
.faw-panel-pill {
    display: inline-flex; align-items: center;
    font-size: 11.5px; font-weight: 600;
    color: var(--fp);
    background: rgba(255,255,255,.92);
    padding: 4px 10px; border-radius: 20px;
    white-space: nowrap; line-height: 1.3;
}
.faw-panel-pill--more {
    background: rgba(255,255,255,.22);
    color: rgba(255,255,255,.75);
    font-style: italic;
}
.faw-panel-nosession {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.08);
    border: 1.5px dashed rgba(255,255,255,.2);
    padding: 6px 12px; border-radius: 20px;
    margin-bottom: 2px;
}
.faw-panel-nosession svg { opacity: .5; }

.faw-panel-title  { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.4; padding-right: 26px; }
.faw-panel-meta   { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.faw-panel-meta-i { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(255,255,255,.72); }
.faw-panel-resume { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.88); }
.faw-panel-price  { font-size: 20px; font-weight: 800; color: var(--fs); }
.faw-panel-cta {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 12px 18px; background: var(--fa); color: #fff;
    border-radius: 10px; font-size: 13.5px; font-weight: 700;
    transition: background var(--faw-t), transform var(--faw-t); align-self: flex-start; margin-top: auto;
}
.faw-panel-cta:hover { background: var(--fs); color: var(--fp); transform: translateX(3px); }
.faw-panel-count { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.45); }
.faw-panel-list  { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.faw-panel-list li + li { border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; margin-top: 14px; }

/* Canvas Leaflet */
.faw-map-canvas { flex: 1; min-width: 0; background: #e8ecef; }
.faw-map-canvas .leaflet-container { height: 100%; }

/* Styles marqueurs Leaflet */
.faw-marker {
    width: 40px; height: 40px; display: flex; align-items: center;
    justify-content: center; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    border: 2.5px solid rgba(255,255,255,.9);
}
.faw-marker svg { transform: rotate(45deg); }
.faw-marker--presentiel { background:#012a4a; }
.faw-marker--distanciel { background:#57cc99; }
.faw-marker--hybride    { background:linear-gradient(128deg, #012a4a 0%, #57cc99 100%); border: 1px solid rgba(255,255,255,.3); }


.faw-marker-badge {
    position: absolute; top: -6px; right: -6px;
    background: #fff; color: var(--fp);
    width: 18px; height: 18px; border-radius: 50%;
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.faw-popup { max-width: 280px; }
.faw-popup h4 { font-size: 14px; font-weight: 700; color: var(--fp); margin: 0 0 8px; }
.faw-popup p  { font-size: 12.5px; color: #6b7280; margin: 0 0 5px; }
.faw-popup a  { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--fp); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.faw-popup a:hover { color: var(--fa); }
.faw-popup-sep { border-top: 1px solid #f0f2f5; margin: 12px 0; }

/* ================================================================
   CATALOGUE (onglet Demande)
   ================================================================ */
.faw-catalogue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 24px;
}
.faw-type-card {
    background: #fff;
    border-radius: var(--faw-r);
    border: 1.5px solid #eceef2;
    box-shadow: var(--faw-sh);
    display: flex; flex-direction: column;
    transition: box-shadow var(--faw-t), transform var(--faw-t), border-color var(--faw-t);
    position: relative; overflow: hidden;
}
.faw-type-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--fp), var(--fs));
    opacity: 0; transition: opacity var(--faw-t);
}
.faw-type-card:hover { transform: translateY(-4px); box-shadow: var(--faw-shl); border-color: rgba(1,42,74,.12); }
.faw-type-card:hover::before { opacity: 1; }

.faw-type-card-inner { padding: 22px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.faw-type-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.faw-tag {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 20px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
}
.faw-tag--presentiel { background: #ede9fe; color: #5b21b6; }
.faw-tag--distanciel  { background: #fce7f3; color: #be185d; }
.faw-tag--hybride     { background: #d1fae5; color: #065f46; }
.faw-tag--count       { background: var(--fp); color: #fff; }

.faw-type-title  { font-size: 17px; font-weight: 800; color: var(--fp); line-height: 1.3; letter-spacing: -.15px; }
.faw-type-resume { font-size: 13.5px; color: #6b7280; line-height: 1.65; }
.faw-type-infos  { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.faw-type-infos li { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #6b7280; }
.faw-type-infos li svg { color: var(--fp); opacity: .6; }
.faw-type-prix  { color: var(--fp) !important; font-weight: 700 !important; }

.faw-type-sessions { border-top: 1px solid #f0f2f5; padding-top: 14px; margin-top: 4px; }
.faw-type-sessions strong { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #9ca3af; margin-bottom: 9px; }
.faw-type-sessions-list { display: flex; flex-wrap: wrap; gap: 5px; }
.faw-session-pill {
    display: inline-block; padding: 4px 11px;
    background: rgba(1,42,74,.04); border: 1.5px solid rgba(1,42,74,.12);
    border-radius: 20px; font-size: 11.5px; font-weight: 600; color: var(--fp);
    transition: background var(--faw-t), color var(--faw-t), border-color var(--faw-t);
}
.faw-session-pill:hover { background: var(--fp); color: #fff; border-color: var(--fp); }
.faw-session-pill--more { background: #f0f2f5; color: #9ca3af; border-color: transparent; cursor: default; }

.faw-type-cta {
    display: flex; align-items: center; gap: 7px;
    margin: 0 22px 20px; color: var(--fp);
    font-size: 13px; font-weight: 700;
    transition: color var(--faw-t), gap var(--faw-t);
}
.faw-type-cta:hover { color: var(--fa); gap: 11px; }

/* ================================================================
   FORMULAIRE DEMANDE
   ================================================================ */
.faw-form-intro { text-align: center; padding: 48px 0 36px; }
.faw-form-intro h2 { font-size: 28px; font-weight: 800; color: var(--fp); margin-bottom: 10px; letter-spacing: -.3px; }
.faw-form-intro p  { font-size: 15px; color: #6b7280; max-width: 520px; margin: 0 auto; line-height: 1.65; }

.faw-form-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
.faw-ftab {
    padding: 9px 20px; background: #fff;
    border: 1.5px solid #e2e6ea; border-radius: 24px;
    font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: all var(--faw-t); color: #6b7280; font-family: inherit;
}
.faw-ftab:hover  { border-color: var(--fp); color: var(--fp); }
.faw-ftab.active { background: var(--fp); color: #fff; border-color: var(--fp); }

.faw-form-block        { display: none; }
.faw-form-block.active { display: block; }

/* Champs du formulaire */
.faw-form {
    background: #fff;
    border-radius: var(--faw-r);
    border: 1px solid #e8ecf0;
    box-shadow: var(--faw-sh);
    padding: 36px;
    display: flex; flex-direction: column; gap: 18px;
}
.faw-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.faw-field { display: flex; flex-direction: column; gap: 7px; }
.faw-field--full { grid-column: 1 / -1; }
.faw-field label {
    font-size: 11.5px; font-weight: 700;
    color: #6b7280; text-transform: uppercase; letter-spacing: .6px;
}
.faw-required { color: var(--fp); margin-left: 2px; }
.faw-field input,
.faw-field select,
.faw-field textarea {
    width: 100%; padding: 12px 15px;
    border: 1.5px solid #e5e7eb; border-radius: 9px;
    background: #fafafa; color: #1a2332;
    font-size: 14px; font-family: inherit;
    transition: border-color var(--faw-t), background var(--faw-t), box-shadow var(--faw-t);
}
.faw-field input:focus,
.faw-field select:focus,
.faw-field textarea:focus {
    outline: none; border-color: var(--fp);
    background: #fff; box-shadow: 0 0 0 3px rgba(1,42,74,.06);
}
.faw-field input::placeholder,
.faw-field textarea::placeholder { color: #c4cad4; }
.faw-field textarea { resize: vertical; min-height: 100px; }

/* Alerte succès/erreur (ajoutée dynamiquement par JS) */
.faw-form-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 20px; border-radius: 10px;
    font-size: 14px; line-height: 1.5;
}
.faw-form-alert--success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.faw-form-alert--error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.faw-form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.faw-btn-submit {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 30px; background: var(--fp); color: #fff;
    border: none; border-radius: 10px;
    font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
    transition: background var(--faw-t), transform var(--faw-t), box-shadow var(--faw-t);
    box-shadow: 0 2px 12px rgba(1,42,74,.2);
}
.faw-btn-submit:hover { background: var(--fa); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(97,206,112,.3); color: #fff; }
.faw-btn-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.faw-form-mention { font-size: 11.5px; color: #9ca3af; flex: 1; }

/* Alerte succès via ?demande=success */
.faw-success-banner {
    max-width: 820px; margin: 30px auto; padding: 0 24px;
}
.faw-success-banner .faw-form-alert { margin-bottom: 0; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 960px) {
    .faw-map-body    { flex-direction: column; }
    .faw-map-panel   { width: 100% !important; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
    .faw-map-panel.open { max-height: 360px; }
    .faw-map-panel-inner { width: 100%; height: auto; max-height: 360px; }
    .faw-map-canvas  { height: 400px; }
    .faw-sessions-grid,
    .faw-catalogue-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .faw-hero-inner  { flex-direction: column; gap: 24px; }
    .faw-hero-title  { font-size: 26px; }
    .faw-stats       { gap: 10px; }
    .faw-stat        { padding: 14px 18px; }
    .faw-stat-n      { font-size: 28px; }
    .faw-tab         { padding: 14px 14px; font-size: 13px; gap: 6px; }
    .faw-toolbar-inner { flex-direction: column; align-items: stretch; }
    .faw-search      { min-width: 0; }
    .faw-result-count { margin-left: 0; }
    .faw-sessions-grid,
    .faw-catalogue-grid { grid-template-columns: 1fr; }
    .faw-row         { grid-template-columns: 1fr; }
    .faw-form        { padding: 22px; }
    .faw-form-foot   { flex-direction: column; align-items: stretch; }
    .faw-btn-submit  { justify-content: center; }
    .faw-map-canvas  { height: 320px; }
}
@media (max-width: 480px) {
    .faw-tab span:not(.faw-tab-badge) { display: none; }
    .faw-hero { padding: 36px 16px 32px; }
    .faw-inner { padding: 0 16px; }
    .faw-toolbar-inner { padding: 12px 16px; }
    .faw-map-header { padding: 20px 16px 0; }
}

/* ================================================================
   VARIANTES STYLE ADMIN
   ================================================================ */
.faw--moderne .faw-hero { clip-path: polygon(0 0,100% 0,100% 88%,0 100%); padding-bottom: 80px; }
.faw--sobre   .faw-hero { background: #fff; border-bottom: 3px solid var(--fp); }
.faw--sobre   .faw-hero-title,
.faw--sobre   .faw-hero-sub { color: var(--fp); }
.faw--sobre   .faw-stat { background: rgba(1,42,74,.05); border-color: rgba(1,42,74,.1); }
.faw--sobre   .faw-stat-n { color: var(--fp); }
.faw--minimaliste .faw-hero { background: #f8f9fb; padding: 36px 24px; }
.faw--minimaliste .faw-hero-title { color: var(--fp); }
.faw--minimaliste .faw-hero-sub   { color: #6b7280; }
.faw--minimaliste .faw-stat { background: transparent; border: 1px solid #e5e7eb; }
.faw--minimaliste .faw-stat-n { color: var(--fp); }
/* ================================================================
   SINGLE FORMATION — REFONTE DESIGN
   Alignement avec l'esthétique de la page archive (.faw-)
   ================================================================ */

/* ── Layout principal ── */
.formation-page-wrapper {
    background: #f0f2f6;
    min-height: 100vh;
}

/* ── Hero ── */
.formation-hero {
    background: linear-gradient(135deg, var(--formations-primary) 0%, color-mix(in srgb, var(--formations-primary) 52%, var(--formations-secondary)) 100%) !important;
    padding: 54px 0 50px !important;
    position: relative;
    overflow: hidden;
}

.formation-hero::before {
    content: '';
    position: absolute;
    right: -120px; bottom: -120px;
    width: 520px; height: 520px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    pointer-events: none;
}

.formation-hero::after {
    content: '';
    position: absolute;
    left: -80px; top: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,.03);
    pointer-events: none;
}

.formation-hero .hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

/* Fil d'Ariane dans le hero */
.formation-hero .breadcrumb,
.formation-hero .hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,.6);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.formation-hero .breadcrumb a,
.formation-hero .hero-breadcrumb a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: color .2s;
    font-weight: 500;
}

.formation-hero .breadcrumb a:hover,
.formation-hero .hero-breadcrumb a:hover { color: #fff; }

/* Badge type dans le hero */
.hero-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    margin-bottom: 16px;
}

/* Titre hero */
.formation-hero h1,
.formation-hero .hero-title {
    font-size: clamp(28px, 4vw, 42px) !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -.6px !important;
    line-height: 1.15 !important;
    margin: 0 0 14px !important;
    max-width: 780px;
}

/* Sous-titre hero */
.formation-hero .hero-subtitle,
.formation-hero .hero-description {
    font-size: 16px;
    color: rgba(255,255,255,.82);
    line-height: 1.7;
    max-width: 600px;
    margin-bottom: 28px;
}

/* Key infos (durée, lieu, type) */
.key-info-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.key-info-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.95);
}

.key-info-item svg {
    color: rgba(255,255,255,.7) !important;
    flex-shrink: 0;
}

/* CTA hero */
.hero-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 28px !important;
    background: #fff !important;
    color: var(--formations-primary) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.15) !important;
    border: none !important;
    cursor: pointer !important;
}

.hero-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.22) !important;
    color: var(--formations-primary) !important;
}

.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,.25);
    color: #fff !important;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s, border-color .2s;
    cursor: pointer;
}

.hero-cta-secondary:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.4);
    color: #fff !important;
}

/* ── Onglets de navigation ── */
.formation-tabs-nav,
.tabs-nav {
    background: #fff !important;
    border-bottom: 1px solid #e8ecf0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    box-shadow: 0 2px 8px rgba(1,42,74,.05) !important;
    margin: 0 !important;
}

.formation-tabs-nav-inner,
.tabs-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.formation-tabs-nav-inner::-webkit-scrollbar,
.tabs-nav-inner::-webkit-scrollbar { display: none; }

.tab-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 18px 20px !important;
    background: none !important;
    border: none !important;
    border-bottom: 2.5px solid transparent !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #7a8699 !important;
    cursor: pointer !important;
    transition: color .2s, border-color .2s !important;
    font-family: inherit !important;
    margin-bottom: -1px !important;
    white-space: nowrap !important;
}

.tab-button:hover {
    color: var(--formations-primary) !important;
    background: none !important;
}

.tab-button.active {
    color: var(--formations-primary) !important;
    border-bottom-color: var(--formations-primary) !important;
}

.tab-button.active::after {
    display: none !important;
}

/* ── Contenu principal (layout 2 colonnes) ── */
.formation-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 32px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

/* ── Onglets contenu ── */
.tab-content {
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #eceef2;
    box-shadow: 0 2px 12px rgba(1,42,74,.07);
    overflow: hidden;
}

.tab-panel {
    padding: 36px !important;
}

.tab-content h2,
.tab-content h3 {
    color: var(--formations-secondary) !important;
    font-weight: 800 !important;
    letter-spacing: -.2px !important;
}

.tab-content h2 { font-size: 1.35em !important; margin: 0 0 14px !important; }
.tab-content h3 { font-size: 1.1em !important; margin: 20px 0 10px !important; }

.tab-content p {
    color: #4b5563;
    line-height: 1.8;
    font-size: 15px;
    margin-bottom: 16px;
}

/* Listes avec check vert */
.tab-content ul,
.liste-check {
    list-style: none !important;
    padding-left: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tab-content ul li,
.liste-check li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: #374151;
    line-height: 1.6;
    padding-left: 0 !important;
}

.tab-content ul li::before,
.liste-check li::before { display: none !important; }

.tab-content ul li svg,
.liste-check svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--formations-accent) !important;
}

/* ── Sidebar droite ── */
.formation-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 80px;
}

.sidebar-card {
    background: #fff !important;
    border-radius: 14px !important;
    border: 1.5px solid #eceef2 !important;
    box-shadow: 0 2px 12px rgba(1,42,74,.07) !important;
    overflow: hidden !important;
}

/* Header de la sidebar card prix */
.sidebar-card-header {
    background: linear-gradient(145deg, var(--formations-primary) 0%, color-mix(in srgb, var(--formations-primary) 55%, var(--formations-secondary)) 100%);
    padding: 24px 24px 20px;
    color: #fff;
}

.prix-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(255,255,255,.6);
    margin-bottom: 6px;
    display: block;
}

.prix-montant {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -.5px !important;
    line-height: 1 !important;
}

.prix-montant small {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,.65);
    letter-spacing: 0;
}

.sessions-dispo-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.9);
}

/* Infos de la sidebar */
.sidebar-card-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f2f5;
}

.sidebar-info:last-of-type { border-bottom: none; }

.sidebar-info svg {
    color: var(--formations-primary) !important;
    flex-shrink: 0;
    margin-top: 2px;
}

.sidebar-info-content strong {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9ca3af;
    margin-bottom: 3px;
}

.sidebar-info-content span,
.sidebar-info-content p {
    font-size: 14px;
    font-weight: 600;
    color: var(--formations-primary);
    margin: 0;
}

/* Ce que la formation inclut */
.sidebar-inclus {
    padding: 16px 24px;
    border-top: 1px solid #f0f2f5;
}

.sidebar-inclus-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9ca3af;
    margin-bottom: 12px;
    display: block;
}

.sidebar-inclus ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-inclus li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13.5px;
    color: #374151;
    padding-left: 0 !important;
}

.sidebar-inclus li::before { display: none !important; }

.sidebar-inclus svg {
    color: var(--formations-accent) !important;
    flex-shrink: 0;
}

/* Boutons CTA sidebar */
.sidebar-cta-group {
    padding: 16px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-inscription {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    padding: 14px 22px !important;
    background: var(--formations-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background .2s, transform .15s, box-shadow .2s !important;
    box-shadow: 0 3px 12px rgba(97,206,112,.3) !important;
}

.btn-inscription:hover {
    background: var(--formations-primary) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(1,42,74,.22) !important;
}

.btn-pdf {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    padding: 12px 22px !important;
    background: transparent !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.3s;
    box-shadow: none !important;
}

.btn-pdf:hover {
    border-color: var(--formations-primary) !important;
    background: rgba(1,42,74,.04) !important;
    color: var(--formations-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(97, 206, 112, 0.3);
    transition: all 0.3s;
}

/* ── Section sessions ── */
.sessions-section {
    background: #fff;
    border-top: 1px solid #eceef2;
    padding: 48px 0;
}

.sessions-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.sessions-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--formations-primary);
    margin-bottom: 28px;
    letter-spacing: -.2px;
}

.sessions-section-title svg {
    background: rgba(1,42,74,.07);
    padding: 6px;
    border-radius: 9px;
    box-sizing: content-box;
    flex-shrink: 0;
}

.sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Card session */
.session-card {
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #eceef2;
    box-shadow: 0 2px 10px rgba(1,42,74,.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .22s, transform .22s, border-color .22s;
}

.session-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(1,42,74,.12);
    border-color: rgba(1,42,74,.15);
}

.session-card.session-passee {
    opacity: .65;
}

.session-card-head {
    padding: 16px 20px 14px;
    background: linear-gradient(145deg, var(--formations-primary), color-mix(in srgb, var(--formations-primary) 55%, var(--formations-secondary)));
    color: #fff;
    position: relative;
}

.session-card-head .session-status {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
}

.session-card-head .session-status.passee {
    background: rgba(0,0,0,.2);
    color: rgba(255,255,255,.7);
}

.session-card-head .session-dates {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.15px;
    line-height: 1.3;
    padding-right: 80px;
}

.session-card-body {
    padding: 16px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.session-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #4b5563;
}

.session-meta-row svg {
    color: var(--formations-primary);
    opacity: .6;
    flex-shrink: 0;
}

.session-card-foot {
    padding: 12px 20px 16px;
    border-top: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.session-prix {
    font-size: 22px;
    font-weight: 800;
    color: var(--formations-primary);
    letter-spacing: -.3px;
    line-height: 1;
}

.session-prix small {
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: 0;
}

.btn-session-inscription {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--formations-accent);
    color: #fff;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(97,206,112,.3);
    white-space: nowrap;
}

.btn-session-inscription:hover {
    background: var(--formations-primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(1,42,74,.2);
}

/* ── Section inscription gradient ── */
.inscription-section {
    background: linear-gradient(135deg, var(--formations-primary) 0%, color-mix(in srgb, var(--formations-primary) 52%, var(--formations-secondary)) 100%) !important;
    padding: 60px 0 !important;
    position: relative;
    overflow: hidden;
}

.inscription-section::before {
    content: '';
    position: absolute;
    right: -80px; bottom: -80px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    pointer-events: none;
}

.inscription-section-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

.inscription-section h2 {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px;
    margin-bottom: 8px;
}

.inscription-section p {
    color: rgba(255,255,255,.75);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 32px;
}

/* Tabs dans la section inscription */
.inscription-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding-bottom: 0;
}

.inscription-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    cursor: pointer;
    transition: color .2s, border-color .2s;
    font-family: inherit;
    margin-bottom: -1px;
}

.inscription-tab:hover { color: rgba(255,255,255,.9); }
.inscription-tab.active { color: #fff; border-bottom-color: rgba(255,255,255,.8); }

/* Formulaire d'inscription */
.faw-form {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8ecf0;
    box-shadow: 0 8px 32px rgba(1,42,74,.15);
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Section carte localisation ── */
#formation-map-section {
    background: #fff;
    border-top: 1px solid #eceef2;
    padding: 48px 0;
}

.formation-map-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.formation-map-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--formations-primary);
    margin-bottom: 20px;
    letter-spacing: -.2px;
}

.formation-map-title svg {
    background: rgba(1,42,74,.07);
    padding: 6px;
    border-radius: 9px;
    box-sizing: content-box;
    color: var(--formations-primary);
}

#formation-map {
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid #eceef2;
    box-shadow: 0 4px 20px rgba(1,42,74,.1);
}

/* ── Popup Leaflet single ── */
.leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(1,42,74,.18) !important;
    border: 1.5px solid #eceef2 !important;
}

.leaflet-popup-content h4 {
    font-size: 14px;
    font-weight: 800;
    color: var(--formations-primary);
    margin: 0 0 8px;
}

.leaflet-popup-content p {
    font-size: 12.5px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0;
}

.leaflet-popup-content a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    color: var(--formations-accent);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}

.leaflet-popup-content a:hover {
    color: var(--formations-primary);
}

/* ── Responsive single ── */
@media (max-width: 1024px) {
    .formation-content-wrapper {
        grid-template-columns: 1fr;
        padding: 28px 24px;
    }

    .formation-sidebar {
        position: static;
    }

    .sessions-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .formation-hero .hero-inner { padding: 0 20px; }

    .formation-hero h1,
    .formation-hero .hero-title { font-size: 26px !important; }

    .formation-content-wrapper { padding: 20px 16px; gap: 20px; }

    .tab-panel { padding: 24px !important; }

    .sessions-grid { grid-template-columns: 1fr; }

    .sessions-section-inner,
    .inscription-section-inner,
    .formation-map-section-inner { padding: 0 16px; }

    .faw-form { padding: 24px; }
}

/* ================================================================
   SIDEBAR — STYLE MINIMALISTE (.fm-mini)
   ================================================================ */

.fm-style-mini .formations-map-sidebar {
    background: #fff;
}

.fm-style-mini .formations-list {
    padding: 0;
}

.formation-card.fm-mini {
    display: block;
    padding: 18px 20px;
    border: none;
    border-bottom: 1px solid #f0f2f5;
    border-radius: 0;
    margin: 0;
    cursor: pointer;
    transition: background var(--f-transition);
    background: #fff;
    gap: 0;
}

.formation-card.fm-mini:last-child {
    border-bottom: none;
}

.formation-card.fm-mini:hover {
    background: #f8f9fb;
    transform: none;
    box-shadow: none;
    border-color: #f0f2f5;
}

.formation-card.fm-mini.active {
    background: rgba(var(--f-primary-rgb), .04);
    padding-left: 17px;
}

/* Badge type */
.fm-mini-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.fm-mini-badge--presentiel { background: var(--formations-primary); color: #fff; }
.fm-mini-badge--distanciel { background: var(--formations-secondary); color: var(--formations-primary); }
.fm-mini-badge--hybride    { background: linear-gradient(128deg, var(--formations-primary) 0%, var(--formations-secondary) 100%); color: #fff; }

/* Titre */
.fm-mini-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--formations-primary);
    line-height: 1.35;
    letter-spacing: -.1px;
    margin-bottom: 6px;
}

/* Résumé */
.fm-mini-resume {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Méta */
.fm-mini-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 10px;
}

.fm-mini-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

.fm-mini-meta-item svg {
    color: var(--formations-primary);
    opacity: .4;
    flex-shrink: 0;
}

/* CTA */
.fm-mini-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: var(--formations-accent);
    color: #fff;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--f-transition), transform var(--f-transition);
    margin-top: 2px;
}

.fm-mini-cta:hover {
    background: var(--formations-primary);
    color: #fff;
    transform: translateX(2px);
}

.fm-mini-cta svg {
    flex-shrink: 0;
    transition: transform var(--f-transition);
}

.fm-mini-cta:hover svg {
    transform: translateX(2px);
}
/* ════════════════════════════════════════════════════════════
   STYLE DARK — expand / collapse
   ════════════════════════════════════════════════════════════ */

.formations-map-container.fm-style-dark .formations-map-sidebar {
    background: #012A4A;
    border-right: none;
}

.formations-map-container.fm-style-dark .search-container {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.formations-map-container.fm-style-dark .search-input {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    border-radius: 8px;
    padding: 9px 13px;
}

.formations-map-container.fm-style-dark .search-input::placeholder {
    color: rgba(255,255,255,.3);
}

.formations-map-container.fm-style-dark .results-count {
    background: rgba(0,0,0,.15);
    color: rgba(255,255,255,.35);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

/* ── Carte individuelle ── */
.formation-card.fm-dark {
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
    border-radius: 0;
    padding: 0;
    background: transparent;
    cursor: default;
    transition: background .15s;
}
.formation-card.fm-dark:hover {
    background: rgba(255,255,255,.03);
}
.formation-card.fm-dark.fm-dark-open {
    background: rgba(255,255,255,.05);
}

/* ── Header cliquable ── */
.fm-dark-header {
    padding: 15px 16px 12px;
    cursor: pointer;
    user-select: none;
}
.fm-dark-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}
.fm-dark-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    flex: 1;
}
.fm-dark-chevron {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.4);
    transition: transform .25s, background .2s, color .2s;
    margin-top: 1px;
}
.fm-dark-chevron .fm-dark-chevron-icon {
    display: block;
    transition: transform .25s;
}
.fm-dark-open .fm-dark-chevron {
    background: rgba(255,255,255,.15);
    color: #fff;
}
.fm-dark-open .fm-dark-chevron-icon {
    transform: rotate(180deg);
}

/* ── Chips ville + durée ── */
.fm-dark-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.fm-dark-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255,255,255,.42);
    font-weight: 500;
}

/* ── Badge sessions (pulsant) ── */
.fm-dark-sessions-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #57CC99;
}
.fm-dark-sessions-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #57CC99;
    animation: fmd-pulse 2s infinite;
}
@keyframes fmd-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* ── Corps accordéon ── */
.fm-dark-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .22s;
}
.fm-dark-open .fm-dark-body {
    max-height: 500px;
    opacity: 1;
}
.fm-dark-body-inner {
    padding: 2px 16px 16px;
}

/* Badge type */
.fm-dark-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 10px;
    background: rgba(102,126,234,.22);
    color: #a5b4fc;
}
.fm-dark-type-badge--presentiel  { background: rgba(52,211,153,.18); color: #6ee7b7; }
.fm-dark-type-badge--distanciel  { background: rgba(99,179,237,.18); color: #90cdf4; }
.fm-dark-type-badge--hybride     { background: rgba(167,139,250,.18); color: #c4b5fd; }

/* Ligne date → prix pill */
.fm-dark-date-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    margin-bottom: 9px;
    flex-wrap: wrap;
}
.fm-dark-prix-pill {
    background: rgba(255,255,255,.15);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

/* Résumé */
.fm-dark-resume {
    font-size: 12px;
    color: rgba(255,255,255,.48);
    line-height: 1.65;
    margin-bottom: 11px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Prix highlight */
.fm-dark-prix-hl {
    font-size: 17px;
    font-weight: 800;
    color: #57CC99;
    margin-bottom: 12px;
    letter-spacing: -.2px;
}

/* CTA button */
.fm-dark-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    background: #61CE70;
    color: #fff;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.fm-dark-cta:hover {
    background: #57CC99;
    color: #012A4A;
}

/* ── Sections texte dans l'expand dark ── */
.fm-dark-section {
    margin-bottom: 12px;
}
.fm-dark-section-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    margin-bottom: 6px;
}
.fm-dark-section-text {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fm-dark-section-text ul,
.fm-dark-section-text ol {
    padding-left: 16px;
    margin: 4px 0 0;
}
.fm-dark-section-text li {
    margin-bottom: 3px;
}
.fm-dark-section-text p {
    margin: 0 0 4px;
}

/* ── Pills sessions cliquables ── */
.fm-dark-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}
.fm-dark-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(87,204,153,.12);
    border: 1px solid rgba(87,204,153,.25);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #57CC99;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.fm-dark-pill:hover {
    background: rgba(87,204,153,.25);
    border-color: rgba(87,204,153,.5);
    color: #fff;
}
.fm-dark-pill svg {
    flex-shrink: 0;
    opacity: .7;
}

/* Ajuster max-height pour accueillir plus de contenu */
.fm-dark-open .fm-dark-body {
    max-height: 900px;
}