/* =========================================================================
   La Brèche  feuille de style
   Direction artistique : fond rouge, bloc blanc central, titres Futura
   capitales italiques (interlettrage serré), textes en Sabon.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Polices
   Déposer les fichiers de police dans /assets/fonts/ puis décommenter.
   Futura Condensed et Sabon sont des polices sous licence : elles doivent
   être fournies par le studio. Des polices de repli sont prévues ci-dessous.
   ------------------------------------------------------------------------- */
/*
@font-face {
    font-family: "Futura Condensed";
    src: url("/assets/fonts/futura-condensed.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Sabon";
    src: url("/assets/fonts/sabon.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
*/

:root {
    --rouge: #d01f25;          /* rouge La Brèche */
    --rouge-fonce: #a8161b;
    --blanc: #ffffff;
    --noir: #161616;
    --gris: #6a6a6a;
    --gris-bord: #e0ddd8;

    /* Piles de polices : la vraie police d'abord, puis un repli proche. */
    --font-titre: "Futura Condensed", "Futura Cond", "Futura PT Condensed", "Oswald", "Roboto Condensed", sans-serif;
    --font-texte: "Sabon", "Sabon LT Std", "Garamond", "Times New Roman", serif;

    --largeur-max: 720px;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background-color: var(--rouge);
    color: var(--noir);
    font-family: var(--font-texte);
    font-size: 17px;
    line-height: 1.6;
}

.page {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 1rem;
}

p { margin: 0 0 1rem; }

a { color: var(--rouge); }

/* -------------------------------------------------------------------------
   Titres  Futura, CAPITALES, italique, interlettrage -25
   (les outils PAO comptent en 1/1000 em : -25 ≈ -0.025em)
   ------------------------------------------------------------------------- */
.hero__title,
.hero__subtitle,
.panel__title,
.form__legend {
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: -0.025em;
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
}

/* -------------------------------------------------------------------------
   En-tête de page (sera remplacé par un logo)
   ------------------------------------------------------------------------- */
/* Barre d'en-tête pleine largeur : son contenu est centré à une largeur
   constante (indépendante de la largeur de lecture, étroite, des pages). */
.site-header {
    padding-top: 2.5rem;
}

.site-header__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.site-header__brand {
    display: inline-block;
    flex-shrink: 0;
}

.site-header__logo {
    display: block;
    width: 5rem;
    height: auto;
}

.site-nav {
    display: flex;
    gap: 1.25rem;
    flex: 1;
    align-items: center;
}

.site-nav__link {
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: -0.01em;
    font-weight: 700;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.1s;
}

.site-nav__link:hover,
.site-nav__link--active {
    color: var(--blanc);
}

/* Bouton « Espace responsable » (accès au formulaire de connexion) */
.site-header__login {
    margin-left: auto;
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: 0.01em;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--blanc);
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    padding: 0.4rem 0.85rem;
    border-radius: 2px;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.site-header__login:hover {
    background: var(--blanc);
    color: var(--rouge);
    border-color: var(--blanc);
}

/* -------------------------------------------------------------------------
   Hero (sur fond rouge, texte blanc)
   ------------------------------------------------------------------------- */
.hero {
    text-align: center;
    color: var(--blanc);
    margin-bottom: 2rem;
}

.hero__kicker {
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    margin: 0 0 0.75rem;
    opacity: 0.9;
}

.hero__title {
    font-size: clamp(2.4rem, 8vw, 4rem);
}

/* Filet rouge sous le titre principal (ici en blanc car sur fond rouge) */
.hero__title::after {
    content: "";
    display: block;
    width: 90px;
    height: 4px;
    background: var(--blanc);
    margin: 0.85rem auto 0;
}

.hero__subtitle {
    font-size: clamp(1rem, 3.5vw, 1.4rem);
    margin-top: 0.9rem;
}

.hero__cta {
    margin-top: 0.1rem;
}

.hero__stat {
    margin-top: 1.1rem;
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-style: italic;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    letter-spacing: 0.02em;
}

.hero__stat strong {
    display: inline-block;
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    margin-right: 0.4rem;
    letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------
   Bande-annonce : vignette cliquable (poster YouTube + bouton lecture).
   On ne charge l'iframe qu'au clic : la page reste légère et le CTA du hero
   n'est jamais repoussé hors écran par une vidéo qui s'auto-lance.
   ------------------------------------------------------------------------- */
.trailer {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 2.5rem;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.trailer__play {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--noir);
    cursor: pointer;
}

.trailer__poster {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    opacity: 0.85;
}

.trailer__play::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 50%);
}

.trailer__play-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(56px, 9vw, 78px);
    height: clamp(56px, 9vw, 78px);
    border-radius: 50%;
    background: var(--rouge);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.trailer__play-icon::before {
    content: "";
    border-style: solid;
    border-width: 11px 0 11px 19px;
    border-color: transparent transparent transparent var(--blanc);
    margin-left: 4px;
}

.trailer__play:hover .trailer__play-icon,
.trailer__play:focus-visible .trailer__play-icon {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--rouge-fonce);
}

.trailer__label {
    position: absolute;
    z-index: 2;
    left: 1.1rem;
    bottom: 0.9rem;
    color: var(--blanc);
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-style: italic;
    font-size: clamp(0.95rem, 2.5vw, 1.15rem);
    letter-spacing: -0.01em;
}

.trailer__frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* -------------------------------------------------------------------------
   Panneau blanc central (contient le formulaire)
   ------------------------------------------------------------------------- */
.panel {
    background: var(--blanc);
    padding: 2.25rem clamp(1.25rem, 5vw, 2.75rem);
    border-radius: 2px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.panel--centered { text-align: center; }

.panel__title {
    color: var(--noir);
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    /* filet rouge sous le titre */
    padding-bottom: 0.7rem;
    border-bottom: 3px solid var(--rouge);
    margin-bottom: 1.1rem;
    display: inline-block;
}

.panel--centered .panel__title { display: block; }

.panel__intro {
    color: var(--gris);
    margin-bottom: 1.75rem;
}

/* Ligne « langues disponibles » (sous-titres) affichée avant le formulaire. */
.panel__langs {
    margin: -0.75rem 0 1.75rem;
    padding: 0.6rem 0.9rem;
    background: var(--rouge-clair, #faf3f3);
    border-left: 3px solid var(--rouge);
    font-size: 0.92rem;
}

/* -------------------------------------------------------------------------
   Formulaire
   ------------------------------------------------------------------------- */
.form__group {
    border: none;
    padding: 0;
    margin: 0 0 1.75rem;
}

.form__legend {
    color: var(--rouge);
    font-size: 1rem;
    padding: 0;
    margin-bottom: 1rem;
    /* petit filet rouge à gauche pour signaler la section */
    border-left: 4px solid var(--rouge);
    padding-left: 0.6rem;
    line-height: 1.2;
}

.form__row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.form__row .field { flex: 1 1 220px; }

.field { margin-bottom: 1.1rem; }

.field__label {
    display: block;
    font-family: var(--font-titre);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 0.35rem;
}

.field__input {
    width: 100%;
    font-family: var(--font-texte);
    font-size: 1rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--gris-bord);
    border-radius: 2px;
    background: #fcfbfa;
    color: var(--noir);
}

.field__input:focus {
    outline: none;
    border-color: var(--rouge);
    box-shadow: 0 0 0 3px rgba(208, 31, 37, 0.15);
}

.field__input--narrow { max-width: 160px; }

textarea.field__input { resize: vertical; }

/* Autocomplétion d'adresse (Base Adresse Nationale) */
.field__ac { position: relative; }

.ac-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 3px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--gris-bord);
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    max-height: 264px;
    overflow-y: auto;
}

.ac-item {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    border-bottom: 1px solid #f1ebeb;
}

.ac-item:last-child { border-bottom: none; }

.ac-item--active,
.ac-item:hover { background: var(--rouge-clair, #faf3f3); }

.ac-item__label { font-weight: 600; font-size: 0.92rem; }
.ac-item__sub { font-size: 0.82rem; color: var(--gris); }

.ac-item--info {
    color: var(--gris);
    font-style: italic;
    font-size: 0.88rem;
    cursor: default;
}

.ac-item--info:hover { background: transparent; }

.field__error {
    display: block;
    color: var(--rouge);
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.field__hint {
    color: var(--gris);
    font-size: 0.85rem;
    margin: 0.35rem 0 0;
}

/* Cases à cocher */
.checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--rouge); }

/* Sous-catégorie d'un champ (ex. question oui/non liée à un groupe de cases) */
.subfield {
    margin: 0 0 0.9rem;
    padding: 0.6rem 0 0.6rem 0.9rem;
    border-left: 2px solid var(--gris-bord);
}

.subfield__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 0.5rem;
}

.subfield__hint {
    display: block;
    font-weight: 400;
    font-style: italic;
    color: var(--gris);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.subfield__options { margin: 0; }

.kit-files {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.75rem;
}

.kit-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--gris-bord);
    border-radius: 3px;
    background: #fcfbfa;
    text-decoration: none;
    color: var(--noir);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.kit-card:hover {
    border-color: var(--rouge);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.kit-card__icon {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 52px;
    border-radius: 3px;
    background: var(--gris);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--blanc);
    overflow: hidden;
}

.kit-card__icon::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-width: 9px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.4) transparent transparent;
}

.kit-card__icon--pdf { background: var(--rouge); }
.kit-card__icon--zip { background: #5a5450; }
.kit-card__icon--doc, .kit-card__icon--docx { background: #2b5fa8; }
.kit-card__icon--jpg, .kit-card__icon--jpeg, .kit-card__icon--png { background: #1b8a5a; }

.kit-card__body { flex: 1 1 auto; min-width: 0; }

.kit-card__name {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.kit-card__meta {
    display: block;
    color: var(--gris);
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.kit-card__download {
    flex: 0 0 auto;
    font-size: 1.1rem;
    color: var(--rouge);
}

/* Encart de relecture avant envoi */
.recap {
    background: #faf3f3;
    border: 1px solid var(--gris-bord);
    border-left: 4px solid var(--rouge);
    border-radius: 2px;
    padding: 0.9rem 1rem;
    margin: 0 0 1.1rem;
}

.recap__title {
    font-family: var(--font-titre);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.recap__list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.92rem;
    color: var(--noir);
}

.recap__list em { color: var(--gris); font-style: italic; }

/* Bouton */
.btn {
    display: inline-block;
    background: var(--rouge);
    color: var(--blanc);
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: -0.01em;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 2px;
    padding: 0.8rem 1.8rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.btn:hover { background: var(--rouge-fonce); }

.form__note {
    color: var(--gris);
    font-size: 0.85rem;
    margin-top: 0.85rem;
}

/* Message d'alerte (erreurs de validation) */
.alert {
    background: rgba(208, 31, 37, 0.08);
    border: 1px solid var(--rouge);
    color: var(--rouge-fonce);
    padding: 0.8rem 1rem;
    border-radius: 2px;
    margin-bottom: 1.5rem;
}

/* Message de succès (confirmation d'envoi du formulaire) */
.alert--success {
    background: rgba(43, 138, 62, 0.08);
    border-color: #2b8a3e;
    color: #2b8a3e;
}

/* -------------------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------------------- */
.site-footer {
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    padding: 2rem 1.25rem 2.5rem;
}

.site-footer p { margin: 0; }

.site-footer__links { margin-top: 0.5rem;    color: rgba(255, 255, 255, 0.85); }

.site-footer a {
    color: var(--blanc);
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Pages légales (mentions, confidentialité)
   ------------------------------------------------------------------------- */
.panel h3 {
    font-family: var(--font-titre);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--noir);
    margin: 1.5rem 0 0.5rem;
}

.panel h3:first-of-type { margin-top: 0; }

.panel ul { padding-left: 1.2rem; }
.panel li { margin-bottom: 0.4rem; }

/* -------------------------------------------------------------------------
   Page projections
   ------------------------------------------------------------------------- */
.screenings {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
}

.screening {
    display: flex;
    gap: 1.25rem;
    align-items: baseline;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--gris-bord);
}

.screening:last-child { border-bottom: none; }

.screenings__month {
    font-family: var(--font-titre);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    font-size: 1rem;
    color: var(--rouge);
    margin: 1.75rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--rouge);
}

.screenings__month:first-child { margin-top: 0; }

.screening__info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.screening__venue {
    font-family: var(--font-titre);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-style: italic;
    font-weight: 700;
    font-size: 1.05rem;
}

.screening__loc {
    font-weight: 700;
    font-size: 0.98rem;
}

.screening__line {
    font-size: 0.92rem;
}

.screening__sep {
    width: 2.5rem;
    height: 2px;
    margin: 0.5rem 0;
    border: none;
    background: var(--gris-bord);
}

.screening__date {
    font-weight: 700;
    font-size: 0.98rem;
}

.screening__meta {
    font-size: 0.9rem;
    color: var(--gris);
}

/* Séances passées : grisées entièrement (liste et vignette « autres séances »). */
.screening--past {
    filter: grayscale(1);
    opacity: 0.6;
}

/* Badge « Privé », visible directement (liste, carte, aside) sans survol. */
.badge {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.3rem;
}

.badge--private {
    background: #3a3a3a;
    color: #fff;
}

/* Légende (visible en vue Liste comme en vue Carte). */
.proj-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.4rem;
    margin: 0 0 1.25rem;
    font-size: 0.85rem;
    color: var(--gris);
}

.proj-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.proj-legend-item .badge { margin-bottom: 0; }

.proj-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.proj-legend-dot--upcoming { background: var(--rouge); }
.proj-legend-dot--past { background: #9e9e9e; }

.screening__cta {
    color: var(--gris);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------
   Projections : onglets Liste / Carte + carte Leaflet
   ------------------------------------------------------------------------- */
.proj-viewtabs {
    display: inline-flex;
    margin: 0 0 1.25rem;
    border: 1px solid var(--rouge);
    border-radius: 999px;
    overflow: hidden;
}

.proj-vt {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--rouge);
    font: inherit;
    font-size: 0.9rem;
    padding: 0.4rem 1.15rem;
    cursor: pointer;
}

.proj-vt--active { background: var(--rouge); color: #fff; }

.proj-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

/* Carte + liste « sans localisation » côte à côte sur les écrans larges. */
@media (min-width: 760px) {
    .proj-layout--split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.proj-mapcol { min-width: 0; position: relative; }

/* Encart de détail au survol : flottant près du curseur, en position:fixed sur
   <body> → hors du conteneur Leaflet (overflow:hidden), jamais rogné. */
.proj-detail {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    max-width: 260px;
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.7rem 0.85rem;
    background: #fff;
    border: 1px solid var(--gris-bord);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    font-size: 0.9rem;
    pointer-events: none;
}

/* display:flex ci-dessus écrase le display:none de l'attribut [hidden] : on le
   rétablit explicitement, sinon l'encart ne se masque jamais. */
.proj-detail[hidden] { display: none; }

.proj-detail strong { line-height: 1.25; }

/* Marqueur étoile rouge (divIcon). Sélecteur double pour neutraliser le fond et
   la bordure blancs de .leaflet-div-icon (leaflet.css est chargé après). */
.leaflet-div-icon.proj-star {
    background: transparent;
    border: 0;
    line-height: 0;
}

.proj-star svg {
    transition: transform 0.1s ease;
    transform-origin: center;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.proj-star:hover svg { transform: scale(1.25); }

/* Badge « Privé » dans la fiche de détail au survol. */
.proj-pop-badge {
    display: inline-block;
    background: #3a3a3a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    margin-bottom: 0.3rem;
}

.proj-map {
    height: 680px;
    width: 100%;
    border: 1px solid var(--gris-bord);
    border-radius: 8px;
    z-index: 0;
}
.proj-region-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
}
.proj-region-bar label {
    font-weight: 600;
    color: #333;
}
.proj-region-bar select {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}

.proj-pop-meta { color: var(--gris); font-size: 0.85rem; }
.proj-pop-hr { border: none; border-top: 1px solid rgba(0, 0, 0, 0.15); margin: 4px 0; }
.proj-pop-pres { margin-top: 0.35rem; font-size: 0.85rem; white-space: pre-line; }

/* « Plus d'infos » dépliable (présentation de la séance) dans les listes. */
.screening__more { margin-top: 0.35rem; font-size: 0.88rem; }
.screening__more summary { cursor: pointer; color: var(--rouge); font-weight: 600; width: fit-content; }
.screening__more p { margin: 0.35rem 0 0; white-space: pre-line; }

.proj-noloc {
    background: var(--rouge-clair, #faf3f3);
    border: 1px solid var(--gris-bord);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    max-height: 680px;
    overflow-y: auto;
}

.proj-noloc__title small {
    display: block;
    margin-top: 0.15rem;
    font-family: system-ui, sans-serif;
    font-weight: 400;
    font-size: 0.76rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gris);
}

.proj-noloc__title {
    font-family: var(--font-titre);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.95rem;
    color: var(--rouge);
    border-bottom: 2px solid var(--rouge);
    padding-bottom: 0.25rem;
    margin: 0 0 0.75rem;
}

.proj-noloc__list { list-style: none; padding: 0; margin: 0; }

.proj-noloc__item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--gris-bord);
}

.proj-noloc__item:last-child { border-bottom: none; }
.proj-noloc__item strong { font-size: 0.98rem; }
.proj-noloc__sub { font-size: 0.9rem; }
.proj-noloc__meta { font-size: 0.85rem; color: var(--gris); }

/* -------------------------------------------------------------------------
   Petits écrans
   ------------------------------------------------------------------------- */
@media (max-width: 520px) {
    .page { padding-top: 1.75rem; }
    .form__row { flex-direction: column; gap: 0; }
}

/* -------------------------------------------------------------------------
   Select - flèche personnalisée (partagée public + bo)
   ------------------------------------------------------------------------- */
select.field__input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23161616' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

/* -------------------------------------------------------------------------
   Page large (carte, back-office)
   ------------------------------------------------------------------------- */
.page--wide { max-width: 1080px; }

/* -------------------------------------------------------------------------
   Back-office coordination - pages /coordination et /connexion
   body.bo : fond papier au lieu du rouge
   ------------------------------------------------------------------------- */
body.bo {
    background: #FBFAF8;
}

/* Barre de navigation back-office */
.bo-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 3px solid var(--rouge);
    border-bottom: 1px solid var(--noir);
    padding: 12px 22px;
    background: #fff;
    flex-wrap: wrap;
}

.bo-topbar__brand-wm {
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 20px;
    font-style: italic;
    letter-spacing: -0.01em;
    color: var(--noir);
}

.bo-topbar__brand-org {
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--rouge);
    font-weight: 700;
    margin-top: 2px;
}

.bo-topbar__nav {
    display: flex;
    gap: 12px;
}

.bo-topbar__nav a {
    font-family: var(--font-titre);
    font-size: 12.5px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--noir);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}

.bo-topbar__nav a:hover,
.bo-topbar__nav a.active {
    color: var(--rouge);
    border-color: var(--rouge);
}

.bo-topbar__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
}

.bo-topbar__who b { color: var(--rouge); }

.bo-topbar__logout {
    font-size: 12.5px;
    color: var(--gris);
    text-decoration: underline;
}

/* Conteneur principal back-office */
.bo-wrap { max-width: 1080px; margin: 0 auto; padding: 28px 22px 70px; }

.bo-wrap h1 {
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 28px;
    font-style: italic;
    letter-spacing: -0.01em;
    color: var(--noir);
    margin: 0 0 4px;
}

.bo-wrap h2 {
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 18px;
    font-style: italic;
    letter-spacing: -0.01em;
    color: var(--noir);
    border-bottom: 1px solid var(--noir);
    padding-bottom: 6px;
    margin: 28px 0 14px;
}

.bo-wrap .sub { color: var(--gris); font-size: 14px; margin: 0 0 22px; }

/* Tables */
.bo-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 14px 0; border: 1px solid var(--noir); }
.bo-table th { background: var(--noir); color: #fff; text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 9px 11px; }
.bo-table td { padding: 9px 11px; border-top: 1px solid var(--gris-bord); vertical-align: top; }
.bo-table tr:nth-child(even) td { background: #FBF7F4; }

/* Badge */
.badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 99px;
    background: #F4EFEA;
    border: 1px solid var(--gris-bord);
    color: var(--gris);
}
.badge--ok  { color: #2b8a3e; border-color: #2b8a3e; }
.badge--err { color: var(--rouge); border-color: var(--rouge); }

/* Formulaire carte (back-office) */
.bo-card {
    display: grid;
    gap: 12px;
    max-width: 520px;
    border: 1px solid var(--noir);
    background: #F4EFEA;
    padding: 18px;
    margin: 8px 0 26px;
}

.bo-card label {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.bo-card input,
.bo-card select {
    width: 100%;
    font-family: var(--font-texte);
    font-size: 15px;
    padding: 9px 11px;
    border: 1.5px solid var(--noir);
    background: #fff;
    color: var(--noir);
    border-radius: 0;
}

.bo-card input:focus,
.bo-card select:focus {
    outline: 3px solid var(--rouge);
    outline-offset: 1px;
    border-color: var(--rouge);
}

.bo-card select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23161616' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

.bo-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .bo-row2 { grid-template-columns: 1fr; } }

/* Bandeaux notification */
.notice {
    padding: 11px 14px;
    margin: 0 0 18px;
    border-left: 4px solid var(--rouge);
    background: #F4EFEA;
    font-size: 14px;
    color: var(--noir);
}
.notice--ok { border-color: #2F6E54; }

/* Divers back-office */
.bo-err   { color: var(--rouge); font-size: 12.5px; margin: 2px 0 0; }
.bo-empty { color: var(--gris); font-style: italic; }

.bo-ghost {
    background: none;
    border: 1.5px solid var(--noir);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--noir);
}
.bo-ghost:hover { background: var(--noir); color: #fff; }

/* Formulaire inline dans tableau (pas de marge) */
.bo-inline-form { margin: 0; }

/* Sélecteur de statut du circuit candidature → adhésion (liste des candidatures) */
.bo-status {
    font-size: 12.5px;
    padding: 5px 26px 5px 9px;
    border: 1.5px solid var(--gris-bord);
    border-radius: 99px;
    background-color: #fff;
    color: var(--noir);
    cursor: pointer;
    font-weight: 600;
}
.bo-status--candidat  { background-color: #F4EFEA; color: var(--gris);    border-color: var(--gris-bord); }
.bo-status--contacte  { background-color: #e3f2fd; color: #0d47a1;        border-color: #64b5f6; }
.bo-status--entretien { background-color: #fff8e1; color: #7a5c00;        border-color: #f0c93a; }
.bo-status--adherent  { background-color: #e8f5e9; color: #1b5e20;        border-color: #66bb6a; }
.bo-status--refuse    { background-color: #fce4ec; color: #880e4f;        border-color: #f06292; }

/* -------------------------------------------------------------------------
   Tickets - tableau Kanban (une colonne par statut, cartes glissables)
   ------------------------------------------------------------------------- */
.kb-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 8px 0 28px;
    align-items: start;
}
@media (max-width: 900px) { .kb-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kb-board { grid-template-columns: 1fr; } }

.kb-col { background: #F4EFEA; border: 1px solid var(--gris-bord); }

.kb-col__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-top: 3px solid var(--rouge);   /* recolorée par statut en inline */
    border-bottom: 1px solid var(--gris-bord);
    background: #fff;
}
.kb-col__title {
    font-family: var(--font-titre);
    font-style: italic;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.kb-col__count {
    font-size: 12px;
    font-weight: 700;
    background: #F4EFEA;
    border: 1px solid var(--gris-bord);
    border-radius: 99px;
    padding: 2px 9px;
    color: var(--gris);
}

.kb-list { min-height: 60px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.kb-card {
    background: #fff;
    border: 1px solid var(--gris-bord);
    border-radius: 2px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.kb-board--draggable .kb-card { cursor: grab; }
.kb-card--ghost { opacity: 0.35; }
.kb-card--drag { transform: rotate(1.5deg); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); }

.kb-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kb-card__type {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--rouge);
}
.kb-card__del {
    background: none;
    border: none;
    color: var(--gris);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.kb-card__del:hover { color: var(--rouge); }
.kb-card__view {
    font-size: 14px;
    color: var(--gris);
    text-decoration: none;
    line-height: 1;
    padding: 0 2px;
}
.kb-card__view:hover { color: var(--rouge); }
.kb-card__title { font-weight: 700; font-size: 14px; margin-top: 3px; }
.kb-card__title[data-open-ticket] { cursor: pointer; }
.kb-card__title[data-open-ticket]:hover { color: var(--rouge); text-decoration: underline; }
.kb-card__desc { font-size: 12px; color: var(--gris); margin-top: 4px; }
.kb-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}
.kb-pill {
    font-size: 10.5px;
    border: 1px solid var(--gris-bord);
    border-radius: 99px;
    padding: 2px 8px;
    color: var(--gris);
}
.kb-pill--haute { color: var(--rouge); border-color: var(--rouge); font-weight: 700; }
.kb-card__date { font-size: 10.5px; color: var(--gris); margin-left: auto; }

/* Pastille de type d'action (agenda) */
.agenda-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 99px;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

/* Calendrier (FullCalendar) - le gros du style est injecté par la lib */
#cdf-calendar { margin: 8px 0 24px; }
.fc .fc-toolbar-title { font-family: var(--font-titre); font-style: italic; letter-spacing: -0.01em; }
.fc .fc-button-primary { background: var(--rouge); border-color: var(--rouge); }
.fc .fc-button-primary:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }
.fc-event { cursor: pointer; }

/* Flèches de navigation : on n'utilise pas la police d'icônes embarquée de
   FullCalendar (parfois bloquée → boutons vides) ; flèches Unicode dans une
   police normale, rendu garanti. */
.fc .fc-icon { font-family: var(--font-titre), Arial, sans-serif !important; line-height: 1; }
.fc .fc-icon-chevron-left::before  { content: '\2039' !important; }  /* ‹ */
.fc .fc-icon-chevron-right::before { content: '\203A' !important; }  /* › */

/* Modale (agenda) */
.cdf-modal {
    position: fixed;
    inset: 0;
    background: rgba(26, 20, 19, 0.55);
    display: none;
    place-items: center;
    padding: 20px;
    z-index: 1000;
}
.cdf-modal--open { display: grid; }
.cdf-modal__card {
    background: #fff;
    border: 1px solid var(--noir);
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow: auto;
    padding: 22px;
    position: relative;
}
.cdf-modal__card--wide {
    max-width: 860px;
}
.cdf-modal__card--wide .tk-layout {
    padding-bottom: 4px;
}
.cdf-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--gris);
}
.cdf-modal__title {
    font-family: var(--font-titre);
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 12px;
    color: var(--noir);
}
/* Le formulaire reprend les styles .bo-card mais sans son cadre (déjà dans la modale) */
.cdf-modal__form { border: none; background: none; padding: 0; margin: 0; max-width: none; }

/* -------------------------------------------------------------------------
   Back-office - en-tête de page, tableau de bord, cartes (style prototype)
   ------------------------------------------------------------------------- */

/* En-tête de page : filet rouge, sur-titre, grand titre, actions à droite */
.bo-hero {
    border-top: 3px solid var(--rouge);
    padding-top: 16px;
    margin: 4px 0 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bo-hero__kicker {
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rouge);
    font-weight: 700;
}

.bo-hero__title {
    font-family: var(--font-titre);
    font-style: italic;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(26px, 4vw, 34px);
    line-height: 1.02;
    margin: 4px 0 2px;
    color: var(--noir);
}

.bo-hero__sub { font-size: 14px; color: var(--gris); margin: 0; }

.bo-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Grille de statistiques (tableau de bord) */
.bo-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border: 1px solid var(--noir);
    margin: 0 0 26px;
}

.bo-stat { padding: 16px 18px; border-left: 1px solid var(--gris-bord); }
.bo-stat:first-child { border-left: none; }

.bo-stat__label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gris);
    font-weight: 700;
}

.bo-stat__num {
    font-family: var(--font-titre);
    font-style: italic;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    margin-top: 6px;
    color: var(--rouge);
}

.bo-stat--muted .bo-stat__num { color: var(--noir); }

/* Chips (répartition par créneau, accès accordés) */
.bo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }

.bo-chip {
    font-size: 12.5px;
    background: #F4EFEA;
    border: 1px solid var(--gris-bord);
    padding: 5px 11px;
    border-radius: 99px;
    color: var(--noir);
}
.bo-chip b { color: var(--rouge); }

/* Cartes de navigation (hub d'accueil) */
.bo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin: 6px 0 28px;
}

.bo-card-link {
    display: block;
    border: 1px solid var(--noir);
    background: #fff;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--noir);
    transition: background .12s ease, transform .12s ease;
}
.bo-card-link:hover { background: #F4EFEA; transform: translateY(-1px); }

.bo-card-link__title {
    font-family: var(--font-titre);
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    color: var(--rouge);
}
.bo-card-link__desc { font-size: 13px; color: var(--gris); margin-top: 4px; line-height: 1.45; }

/* -------------------------------------------------------------------------
   Page connexion (centrée, fond papier)
   ------------------------------------------------------------------------- */
.login-center {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--noir);
    background: #fff;
}

.login-card__head {
    background: var(--rouge);
    color: #fff;
    padding: 18px 22px;
}

.login-card__kicker {
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .9;
}

.login-card__head h1 {
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 25px;
    font-style: italic;
    margin: 5px 0 0;
    line-height: 1.05;
}

.login-card__form {
    display: grid;
    gap: 13px;
    padding: 22px;
}

.login-card__form label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gris);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.login-card__form input {
    width: 100%;
    font-family: var(--font-texte);
    font-size: 15px;
    padding: 10px 11px;
    border: 1.5px solid var(--noir);
    background: #fff;
    color: var(--noir);
}

.login-card__form input:focus {
    outline: 3px solid var(--rouge);
    outline-offset: 1px;
    border-color: var(--rouge);
}

.login-card__err {
    background: #F4EFEA;
    border-left: 4px solid var(--rouge);
    color: var(--rouge);
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 13px;
}

.login-card__back {
    display: block;
    text-align: center;
    font-size: 12.5px;
    color: var(--gris);
    padding: 0 22px 20px;
}
.login-card__back a { color: var(--rouge); }

/* -------------------------------------------------------------------------
   M1 - Carte publique & adhésion
   ------------------------------------------------------------------------- */

/* Grille 2 colonnes : carte à gauche, formulaire à droite */
.cdf-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 860px) { .cdf-grid { grid-template-columns: 1fr; } }

/* SVG map */
.cdf-map { width: 100%; height: auto; display: block; overflow: visible; }
.cdf-region { cursor: pointer; outline: none; }
.cdf-region .fill {
    fill: #F1D7DB;
    stroke: var(--noir);
    stroke-width: 2.4;
    stroke-linejoin: round;
    transition: fill .18s ease;
}
.cdf-region:hover .fill,
.cdf-region:focus-visible .fill { fill: #E08A93; }
.cdf-region.active .fill { fill: var(--rouge); }
.cdf-region:focus-visible .fill { stroke-width: 4; }

.cdf-reg-name {
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 19px;
    font-style: italic;
    fill: var(--noir);
    pointer-events: none;
    transition: fill .18s;
}
.cdf-reg-count {
    font-family: var(--font-texte);
    font-weight: 700;
    font-size: 15px;
    fill: var(--gris);
    pointer-events: none;
    transition: fill .18s;
}
.cdf-region.active .cdf-reg-name,
.cdf-region.active .cdf-reg-count { fill: #fff; }

/* Pings actions (M5) */
.cdf-ping .ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: cdf-pulse 1.9s ease-out infinite;
}
@keyframes cdf-pulse {
    0%   { transform: scale(.5);  opacity: .6; }
    80%  { transform: scale(2.7); opacity: 0; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cdf-ping .ring { animation: none; opacity: 0; } }

/* Légende types d'action */
.cdf-legend { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 12px; font-size: 12px; color: var(--gris); }
.cdf-legend-item { display: flex; align-items: center; gap: 6px; }
.cdf-legend-swatch { width: 11px; height: 11px; border-radius: 99px; border: 1px solid rgba(0,0,0,.25); flex-shrink: 0; }

/* Bandeau compteurs par région */
.cdf-counters {
    margin-top: 24px;
    border-top: 3px solid var(--rouge);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 640px) { .cdf-counters { grid-template-columns: repeat(2, 1fr); } }

.cdf-counter {
    padding: 14px 12px 16px;
    border-left: 1px solid var(--noir);
    cursor: pointer;
    transition: background .12s;
}
.cdf-counter:first-child { border-left: none; }
.cdf-counter:hover { background: #F4EFEA; }
.cdf-counter.active { background: #F4EFEA; }
@media (max-width: 640px) {
    .cdf-counter:nth-child(odd)  { border-left: none; }
    .cdf-counter:nth-child(n+3)  { border-top: 1px solid var(--noir); }
}

.cdf-counter__name {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--rouge);
}
.cdf-counter__num {
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    margin-top: 6px;
    color: var(--noir);
    font-style: italic;
}
.cdf-counter__sub { font-size: 11px; color: var(--gris); margin-top: 2px; }

/* Panneau latéral (formulaire adhésion) */
.cdf-sidebar { position: sticky; top: 18px; }

.cdf-sidebar-head {
    padding: 16px 18px;
    background: var(--rouge);
    color: #fff;
}
.cdf-sidebar-kicker {
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .9;
}
.cdf-sidebar-title {
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 24px;
    font-style: italic;
    line-height: 1.05;
    margin: 5px 0 0;
}

.cdf-sidebar-body {
    padding: 18px;
    border: 1px solid var(--noir);
    border-top: none;
    background: #F4EFEA;
}

.cdf-regions-desc {
    font-size: 13.5px;
    color: var(--gris);
    margin: 0 0 14px;
    min-height: 38px;
}

/* Stat total/région */
.cdf-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-top: 1px solid var(--noir);
    border-bottom: 1px solid var(--noir);
    padding: 10px 0;
    margin-bottom: 16px;
}
.cdf-stat__num {
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    color: var(--rouge);
    font-style: italic;
}
.cdf-stat__label {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gris);
    line-height: 1.5;
}

/* Formulaire adhésion dans le panneau */
.cdf-form { display: grid; gap: 11px; }
.cdf-form[hidden] { display: none; }

/* -------------------------------------------------------------------------
   Onglets de vue (Carte / Annuaire) + annuaire des sections
   ------------------------------------------------------------------------- */
.cdf-viewtabs {
    display: flex;
    gap: 0;
    margin: 0 0 22px;
    border-bottom: 2px solid var(--rouge);
}
.cdf-vt {
    font-family: var(--font-titre);
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 0.95rem;
    background: none;
    border: 1px solid var(--gris-bord);
    border-bottom: none;
    padding: 9px 20px;
    cursor: pointer;
    color: var(--gris);
    border-radius: 2px 2px 0 0;
}
.cdf-vt--active { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }

.cdf-dir-hd { font-size: 13px; color: var(--gris); margin: 0 0 10px; }
.cdf-dir { display: flex; flex-direction: column; border: 1px solid var(--noir); }
.cdf-dir-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: none;
    border-top: 1px solid var(--gris-bord);
    background: var(--blanc);
    cursor: pointer;
    font-family: var(--font-texte);
    color: var(--noir);
}
.cdf-dir-row:first-child { border-top: none; }
.cdf-dir-row:hover { background: #F4EFEA; }
.cdf-dir-niv { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rouge); font-weight: 700; }
.cdf-dir-name { font-family: var(--font-titre); font-style: italic; font-weight: 700; font-size: 1.1rem; margin-top: 1px; }
.cdf-dir-sub { font-size: 12.5px; color: var(--gris); margin-top: 2px; }
.cdf-dir-terr { font-size: 12.5px; color: var(--gris); }
.cdf-dir-eff {
    text-align: right;
    font-family: var(--font-titre);
    font-style: italic;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--rouge);
    white-space: nowrap;
}
.cdf-dir-eff small {
    display: block;
    font-family: var(--font-texte);
    font-size: 10px;
    font-weight: 400;
    color: var(--gris);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
@media (max-width: 620px) {
    .cdf-dir-row { grid-template-columns: 1fr auto; }
    .cdf-dir-terr { display: none; }
}

/* Colonne carte */
.cdf-mapcol { min-width: 0; }

/* Carte Leaflet (sections de la My Maps, sans fond de tuiles tiers) */
.cdf-leaflet {
    width: 100%;
    height: 660px;
    background: #fff;
    border: 1px solid var(--noir);
}
@media (max-width: 860px) { .cdf-leaflet { height: 460px; } }

/* -------------------------------------------------------------------------
   M6 - Page de détail d'un ticket (ticket.php)
   ------------------------------------------------------------------------- */
.tk-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: start;
    padding-bottom: 3rem;
}
@media (max-width: 860px) { .tk-layout { grid-template-columns: 1fr; } }

.tk-section {
    background: #fff;
    border: 1px solid var(--gris-bord);
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
}
.tk-section__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gris);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.tk-section__title::-webkit-details-marker { display: none; }
details.tk-section[open] .tk-section__title { border-bottom: 1px solid var(--gris-bord); }
.tk-edit-form { padding: 16px; }

.tk-comment-count {
    background: var(--gris-bord);
    border-radius: 999px;
    font-size: 11px;
    padding: 1px 7px;
    font-weight: 400;
    color: var(--gris);
}

.tk-empty { color: var(--gris); font-style: italic; font-size: 13px; padding: 12px 16px; margin: 0; }

.tk-comments { display: flex; flex-direction: column; gap: 1px; }
.tk-comment {
    padding: 12px 16px;
    background: #faf9f7;
    border-top: 1px solid var(--gris-bord);
}
.tk-comment--complement { background: #EEF4FB; border-left: 3px solid #1A6EA8; }
.tk-comment__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.tk-comment__author { font-size: 12px; font-weight: 700; }
.tk-comment__badge {
    font-size: 10.5px;
    background: #1A6EA820;
    color: #1A6EA8;
    border: 1px solid #1A6EA840;
    border-radius: 3px;
    padding: 1px 6px;
}
.tk-comment__date { font-size: 11px; color: var(--gris); margin-left: auto; }
.tk-comment__body { font-size: 13px; line-height: 1.5; }

.tk-comment-form { padding: 12px 16px; border-top: 1px solid var(--gris-bord); }
.tk-comment-form textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: .4rem .5rem;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.tk-comment-form textarea:focus { outline: 2px solid var(--rouge); border-color: transparent; }
.tk-comment-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 12px;
    flex-wrap: wrap;
}
.tk-complement-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--gris);
}

.tk-meta-card {
    background: #fff;
    border: 1px solid var(--gris-bord);
    border-radius: 6px;
    padding: 14px 16px;
}
.tk-meta-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 5px 0;
    border-bottom: 1px solid var(--gris-bord);
}
.tk-meta-card__row:last-child { border-bottom: none; }
.tk-meta-card__label { color: var(--gris); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tk-meta-card__sep { border: none; border-top: 1px solid var(--gris-bord); margin: 8px 0; }
.tk-meta-card__desc { font-size: 13px; color: var(--noir); line-height: 1.5; }
.tk-badge {
    font-size: 11px;
    border: 1px solid;
    border-radius: 3px;
    padding: 2px 8px;
    font-weight: 700;
}