/* --- Variables ------------------------------------------------ */
:root {
    --noir:      #0a0a0a;
    --noir2:     #111118;
    --noir3:     #1a1a24;
    --or:        #c9a84c;
    --or-pale:   #e8d5a3;
    --or-sombre: #7a6030;
    --blanc:     #f5f0e8;
    --gris:      #888880;
    --gris2:     #3a3a44;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    background:  var(--noir);
    color:       var(--blanc);
    font-family: 'DM Sans', sans-serif;
    font-size:   15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }


/* --- Header --------------------------------------------------- */
#site-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 2.5rem;
    height:          52px;
    border-bottom:   0.5px solid var(--gris2);
    background:      var(--noir);
    position:        sticky;
    top:             0;
    z-index:         100;
}
.logo {
    font-family:    'Cormorant Garamond', serif;
    font-size:      1.5rem;
    font-weight:    300;
    letter-spacing: 0.08em;
    color:          var(--or);
}
.logo em { color: var(--blanc); font-style: italic; }
nav { display: flex; align-items: center; gap: 2rem; }
.nav-lien {
    font-size:      0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--gris);
    transition:     color 0.15s;
}
.nav-lien:hover { color: var(--or); }
.nav-pro {
    border:     0.5px solid var(--or-sombre);
    color:      var(--or);
    padding:    0.35rem 0.9rem;
    transition: all 0.15s;
}
.nav-pro:hover { background: var(--or); color: var(--noir); }

/* --- Hero ----------------------------------------------------- */
.home-hero {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    padding:         3rem 2.5rem 1.8rem;
    border-bottom:   0.5px solid var(--gris2);
}
.home-titre {
    font-family:    'Cormorant Garamond', serif;
    font-size:      3rem;
    font-weight:    300;
    line-height:    1.1;
    letter-spacing: -0.01em;
}
.home-titre em { font-style: italic; color: var(--or); }
.home-baseline { font-size: 0.82rem; color: var(--gris); margin-top: 0.4rem; }
.home-semaine {
    text-align:  right;
    font-family: 'Cormorant Garamond', serif;
    font-size:   0.9rem;
    color:       var(--gris);
}
.home-semaine strong {
    display:     block;
    font-family: 'DM Sans', sans-serif;
    font-size:   1.6rem;
    font-weight: 300;
    color:       var(--blanc);
    line-height: 1;
}

/* --- Filtres -------------------------------------------------- */
.home-filtres {
    display:       flex;
    align-items:   center;
    gap:           1.2rem;
    padding:       0.9rem 2.5rem;
    border-bottom: 0.5px solid var(--gris2);
    background:    var(--noir2);
}
.filtre-label {
    font-size:      0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--gris);
    flex-shrink:    0;
}
.chips { display: flex; gap: 0.4rem; }
.chip {
    padding:        0.28rem 0.85rem;
    border:         0.5px solid var(--gris2);
    font-size:      0.75rem;
    color:          var(--gris);
    cursor:         pointer;
    transition:     all 0.15s;
}
.chip:hover { border-color: var(--or-sombre); color: var(--or-pale); }
.chip.actif { border-color: var(--or); color: var(--or); background: rgba(201,168,76,0.07); }
.home-recherche { margin-left: auto; }
.home-recherche input {
    background:  var(--noir3);
    border:      0.5px solid var(--gris2);
    color:       var(--blanc);
    padding:     0.32rem 0.8rem;
    font-size:   0.8rem;
    font-family: 'DM Sans', sans-serif;
    width:       190px;
    outline:     none;
}
.home-recherche input::placeholder { color: var(--gris); }
.home-recherche input:focus { border-color: var(--or-sombre); }

/* --- Section -------------------------------------------------- */
.films-section { padding: 0 2.5rem 2.5rem; }
.section-header {
    display:       flex;
    align-items:   baseline;
    gap:           0.8rem;
    padding:       1.2rem 0 0.8rem;
    border-bottom: 0.5px solid var(--gris2);
}
.section-titre {
    font-family:    'Cormorant Garamond', serif;
    font-size:      0.88rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--or);
}
.section-nb { font-size: 0.72rem; color: var(--gris); }

/* --- Grille --------------------------------------------------- */
.films-grille {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
}
.card-film {
    display:  block;
    overflow: hidden;
    border:   0.5px solid var(--noir);
}
.card-affiche {
    position:     relative;
    aspect-ratio: 2/3;
    background:   var(--noir3);
    overflow:     hidden;
}
.card-placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     'Cormorant Garamond', serif;
    font-size:       2.5rem;
    color:           var(--gris2);
}
.card-overlay {
    position:        absolute;
    inset:           0;
    background:      linear-gradient(to top, rgba(0,0,0,0.92) 0%, transparent 60%);
    opacity:         0;
    transition:      opacity 0.25s;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    padding:         0.8rem 0.7rem;
}
.card-film:hover .card-overlay { opacity: 1; }
.card-badge-new {
    position:       absolute;
    top:            0.5rem;
    right:          0.5rem;
    background:     var(--or);
    color:          var(--noir);
    font-size:      0.6rem;
    font-weight:    500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        0.18rem 0.4rem;
}
.card-overlay-salles {
    font-family: 'Cormorant Garamond', serif;
    font-size:   1.2rem;
    color:       var(--or);
    line-height: 1;
}
.card-overlay-cta {
    font-size:      0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--or);
    border:         0.5px solid var(--or-sombre);
    padding:        0.28rem 0.5rem;
    margin-top:     0.5rem;
    display:        inline-block;
}
.card-meta { padding: 0.55rem 0.5rem 0.75rem; }
.card-titre {
    font-family:   'Cormorant Garamond', serif;
    font-size:     0.95rem;
    color:         var(--blanc);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.card-real { font-size: 0.7rem; color: var(--gris); margin-top: 0.15rem; }
.card-badges { display: flex; gap: 0.25rem; margin-top: 0.35rem; flex-wrap: wrap; }
.badge { font-size: 0.6rem; letter-spacing: 0.05em; padding: 0.12rem 0.4rem; border: 0.5px solid; }
.badge-ae       { border-color: #4a6a4a; color: #8ab88a; }
.badge-vo       { border-color: var(--gris2); color: var(--gris); }
.badge-festival { border-color: var(--or-sombre); color: var(--or); background: rgba(201,168,76,0.08); }

/* --- Footer --------------------------------------------------- */
#site-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.4rem 2.5rem;
    border-top:      0.5px solid var(--gris2);
    margin-top:      2rem;
    font-size:       0.78rem;
    color:           var(--gris);
}
.footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 300; }
.footer-liens { display: flex; gap: 1.5rem; }
.footer-liens a:hover { color: var(--or); }
.footer-pro a { color: var(--or); }
/* ------- login --------------------------------------------------*/

/* Page centrée */
#login-page {
    min-height:      100vh;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         2rem;
}
.login-logo {
    font-family:    'Cormorant Garamond', serif;
    font-size:      1.8rem;
    font-weight:    300;
    letter-spacing: 0.08em;
    color:          var(--or);
    margin-bottom:  2rem;
}
.login-logo em { color: var(--blanc); font-style: italic; }

#login-box {
    width:      100%;
    max-width:  440px;
    background: var(--noir2);
    border:     0.5px solid var(--gris2);
}

/* Onglets */
.login-onglets {
    display:       flex;
    border-bottom: 0.5px solid var(--gris2);
}
.login-onglet {
    flex:            1;
    padding:         0.75rem;
    text-align:      center;
    font-size:       0.75rem;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    color:           var(--gris);
    border-bottom:   1.5px solid transparent;
    margin-bottom:   -0.5px;
    cursor:          pointer;
    transition:      all 0.15s;
}
.login-onglet:hover { color: var(--or-pale); }
.login-onglet.actif { color: var(--or); border-bottom-color: var(--or); }

/* Formulaire */
.login-form { padding: 1.4rem; }

.field { margin-bottom: 1rem; }
.field label {
    display:        block;
    font-size:      0.63rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color:          var(--or-sombre);
    margin-bottom:  0.35rem;
}
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=tel] {
    width:       100%;
    background:  var(--noir3);
    border:      0.5px solid var(--gris2);
    color:       var(--blanc);
    padding:     0.52rem 0.72rem;
    font-size:   0.85rem;
    font-family: 'DM Sans', sans-serif;
    outline:     none;
    transition:  border-color 0.15s;
}
.field input:focus { border-color: var(--or-sombre); }

.field-check {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   0.78rem;
    color:       var(--gris);
    cursor:      pointer;
    margin-bottom: 1rem;
}
.field-check input { accent-color: var(--or); }

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

.btn-submit {
    width:           100%;
    background:      var(--or);
    color:           var(--noir);
    border:          none;
    font-size:       0.82rem;
    font-weight:     500;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    padding:         0.85rem;
    margin-top:      0.4rem;
    cursor:          pointer;
    font-family:     'DM Sans', sans-serif;
    transition:      background 0.15s;
}
.btn-submit:hover { background: var(--or-pale); }

.status { margin-top: 0.8rem; font-size: 0.78rem; }

.lien-bas {
    text-align:  center;
    font-size:   0.72rem;
    color:       var(--gris);
    margin-top:  0.9rem;
}
.lien-bas a { color: var(--or); }
.lien-bas a:hover { text-decoration: underline; }

.login-retour {
    margin-top:     1.5rem;
    font-size:      0.72rem;
    color:          var(--gris);
    letter-spacing: 0.04em;
}
.login-retour a { color: var(--or); }
/* ------- seances  ------------------- */

#pro-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 2rem;
    height:          52px;
    border-bottom:   0.5px solid var(--gris2);
    background:      var(--noir2);
    position:        sticky;
    top:             0;
    z-index:         50;
}
.logo {
    font-family:    'Cormorant Garamond', serif;
    font-size:      1.4rem;
    font-weight:    300;
    letter-spacing: 0.08em;
    color:          var(--or);
}
.logo em { color: var(--blanc); font-style: italic; }
.pro-header-centre { text-align: center; font-size: 0.8rem; color: var(--gris); }
.pro-header-centre strong { color: var(--blanc); display: block; font-weight: 400; }
.nav-links { display: flex; gap: 1.5rem; }
.nav-links a {
    font-size:      0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--gris);
    transition:     color 0.15s;
}
.nav-links a:hover { color: var(--or); }

main { padding: 2rem 2.5rem 3rem; max-width: 1000px; }

.pro-titre {
    font-family:   'Cormorant Garamond', serif;
    font-size:     1.8rem;
    font-weight:   300;
    color:         var(--blanc);
}
.pro-sous-titre {
    font-size:      0.63rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--or-sombre);
    margin:         1.5rem 0 0.7rem;
}
.section-header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    padding-bottom:  1rem;
    border-bottom:   0.5px solid var(--gris2);
    margin-bottom:   1.5rem;
}
.pro-alerte {
    padding:       0.8rem 1rem;
    background:    rgba(201,168,76,0.07);
    border:        0.5px solid var(--or-sombre);
    font-size:     0.82rem;
    color:         var(--or-pale);
    margin-bottom: 1.5rem;
    line-height:   1.7;
}
.pro-alerte a { color: var(--or); text-decoration: underline; }

.films-grille {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   1rem;
}
.film-card {
    background:     var(--noir2);
    border:         0.5px solid var(--gris2);
    padding:        1rem;
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
}
.film-card.has-seances { border-color: var(--or-sombre); }
.film-card-titre {
    font-family: 'Cormorant Garamond', serif;
    font-size:   1rem;
    font-weight: 300;
    color:       var(--blanc);
    line-height: 1.2;
}
.film-card-meta  { font-size: 0.7rem; color: var(--gris); }
.film-card-seances { font-size: 0.72rem; color: var(--or); margin-top: 0.2rem; }
.btn-saisir {
    display:         block;
    text-align:      center;
    background:      none;
    border:          0.5px solid var(--or-sombre);
    color:           var(--or);
    font-size:       0.7rem;
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    padding:         0.4rem 0.7rem;
    cursor:          pointer;
    margin-top:      0.5rem;
    font-family:     'DM Sans', sans-serif;
    transition:      all 0.15s;
}
.btn-saisir:hover { background: var(--or); color: var(--noir); }

.btn-retour {
    display:        inline-block;
    font-size:      0.72rem;
    color:          var(--gris);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom:  1.5rem;
    transition:     color 0.15s;
}
.btn-retour:hover { color: var(--or); }

.film-header {
    display:        flex;
    align-items:    flex-start;
    gap:            1.2rem;
    margin-bottom:  2rem;
    padding-bottom: 1.5rem;
    border-bottom:  0.5px solid var(--gris2);
}
.film-header-affiche {
    width:        80px;
    aspect-ratio: 2/3;
    background:   var(--noir3);
    border:       0.5px solid var(--gris2);
    flex-shrink:  0;
    overflow:     hidden;
}
.film-header-affiche img { width: 100%; height: 100%; object-fit: cover; }
.film-header-titre {
    font-family: 'Cormorant Garamond', serif;
    font-size:   1.5rem;
    font-weight: 300;
    color:       var(--blanc);
    line-height: 1.15;
}
.film-header-meta { font-size: 0.75rem; color: var(--gris); margin-top: 0.3rem; }

.seances-form  { max-width: 520px; }
.seance-ligne  {
    display:       grid;
    grid-template-columns: 1fr 90px 30px;
    gap:           0.5rem;
    align-items:   center;
    margin-bottom: 0.5rem;
}
.seance-ligne input,
.seance-ligne select {
    background:  var(--noir3);
    border:      0.5px solid var(--gris2);
    color:       var(--blanc);
    padding:     0.48rem 0.6rem;
    font-size:   0.82rem;
    font-family: 'DM Sans', sans-serif;
    outline:     none;
    width:       100%;
}
.seance-ligne input:focus,
.seance-ligne select:focus { border-color: var(--or-sombre); }
.btn-del {
    background: none;
    border:     none;
    color:      var(--gris2);
    cursor:     pointer;
    font-size:  1rem;
    transition: color 0.15s;
}
.btn-del:hover { color: #e08080; }
.btn-ajouter {
    background:     none;
    border:         0.5px solid var(--gris2);
    color:          var(--gris);
    font-size:      0.75rem;
    letter-spacing: 0.05em;
    padding:        0.5rem 1rem;
    cursor:         pointer;
    font-family:    'DM Sans', sans-serif;
    width:          100%;
    margin-top:     0.3rem;
    transition:     all 0.15s;
}
.btn-ajouter:hover { border-color: var(--or-sombre); color: var(--or); }
.btn-submit {
    background:     var(--or);
    color:          var(--noir);
    border:         none;
    font-size:      0.82rem;
    font-weight:    500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        0.8rem 2rem;
    margin-top:     1rem;
    cursor:         pointer;
    font-family:    'DM Sans', sans-serif;
    transition:     background 0.15s;
}
.btn-submit:hover { background: var(--or-pale); }
.status { margin-top: 0.8rem; font-size: 0.82rem; }

footer {
    border-top: 0.5px solid var(--gris2);
    padding:    1.2rem 2.5rem;
    font-size:  0.75rem;
    color:      var(--gris);
    text-align: center;
}
/* =============================================================
   CARTE PLAN DE SORTIE — carte.php
   À intégrer dans styles/style.css
   ============================================================= */

/* Page carte — plein écran, pas de scroll */
body.page-carte {
    overflow: hidden;
    height:   100vh;
    display:  flex;
    flex-direction: column;
}

/* Header carte */
#carte-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 1.5rem;
    height:          52px;
    border-bottom:   0.5px solid var(--gris2);
    background:      var(--noir);
    flex-shrink:     0;
}
.carte-header-film { text-align: center; }
.carte-film-titre {
    font-family:    'Cormorant Garamond', serif;
    font-size:      0.95rem;
    font-style:     italic;
    font-weight:    300;
    color:          var(--blanc);
    display:        block;
    transition:     color 0.15s;
}
.carte-film-titre:hover { color: var(--or); }
.carte-film-meta {
    font-size:      0.63rem;
    color:          var(--gris);
    letter-spacing: 0.04em;
}
.carte-retour {
    font-size:       0.72rem;
    color:           var(--gris);
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    transition:      color 0.15s;
    text-decoration: none;
}
.carte-retour:hover { color: var(--or); }

/* Layout principal */
#carte-main {
    display:  flex;
    flex:     1;
    overflow: hidden;
}

/* Panneau gauche */
#panneau {
    width:          270px;
    flex-shrink:    0;
    border-right:   0.5px solid var(--gris2);
    background:     var(--noir2);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
}

/* Stats */
#panneau-stats {
    padding:       1.1rem 1.2rem;
    border-bottom: 0.5px solid var(--gris2);
    flex-shrink:   0;
}
.panneau-film-label {
    font-size:       0.6rem;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    color:           var(--or-sombre);
    margin-bottom:   0.25rem;
}
.panneau-film-nom {
    font-family:   'Cormorant Garamond', serif;
    font-size:     1.05rem;
    font-weight:   300;
    font-style:    italic;
    color:         var(--blanc);
    line-height:   1.2;
    margin-bottom: 0.75rem;
}
.stats-grille {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0.45rem;
}
.stat {
    background: var(--noir3);
    padding:    0.55rem 0.65rem;
}
.stat-val {
    font-family: 'Cormorant Garamond', serif;
    font-size:   1.5rem;
    font-weight: 300;
    color:       var(--or);
    line-height: 1;
}
.stat-label {
    font-size:       0.57rem;
    letter-spacing:  0.07em;
    text-transform:  uppercase;
    color:           var(--gris);
    margin-top:      0.12rem;
}

/* Invite */
#panneau-invite {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         2rem 1.5rem;
    gap:             0.6rem;
    font-size:       0.78rem;
    color:           var(--gris);
    line-height:     1.7;
}
.invite-icone { font-size: 1.5rem; color: var(--gris2); }

/* Fiche salle */
#panneau-salle {
    flex:           1;
    overflow-y:     auto;
    display:        flex;
    flex-direction: column;
}
#panneau-salle.hidden,
#panneau-invite.hidden { display: none; }

#salle-entete {
    padding:       1rem 1.2rem;
    border-bottom: 0.5px solid var(--gris2);
    flex-shrink:   0;
}
#btn-fermer {
    float:           right;
    background:      none;
    border:          none;
    font-size:       0.65rem;
    color:           var(--gris);
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    cursor:          pointer;
    margin-top:      0.15rem;
    padding:         0;
    transition:      color 0.15s;
}
#btn-fermer:hover { color: var(--or); }
#s-nom {
    font-family:    'Cormorant Garamond', serif;
    font-size:      1.25rem;
    font-weight:    300;
    line-height:    1.15;
    color:          var(--blanc);
    padding-right:  2rem;
    margin:         0;
}
#s-adresse { font-size: 0.7rem; color: var(--gris); margin-top: 0.25rem; }

.salle-bloc {
    padding:       0.85rem 1.2rem;
    border-bottom: 0.5px solid var(--gris2);
    flex-shrink:   0;
}
.salle-bloc-label {
    font-size:       0.6rem;
    letter-spacing:  0.09em;
    text-transform:  uppercase;
    color:           var(--or-sombre);
    margin-bottom:   0.55rem;
}

/* Séances dans le panneau */
.jour-ligne {
    display:       flex;
    align-items:   flex-start;
    gap:           0.6rem;
    margin-bottom: 0.4rem;
}
.jour-ligne:last-child { margin-bottom: 0; }
.jour-nom {
    font-size:   0.68rem;
    color:       var(--gris);
    width:       52px;
    flex-shrink: 0;
    padding-top: 0.22rem;
}
.jour-hrs  { display: flex; gap: 0.28rem; flex-wrap: wrap; }
.horaire {
    font-size:   0.68rem;
    padding:     0.16rem 0.38rem;
    border:      0.5px solid var(--gris2);
    color:       var(--or-pale);
    white-space: nowrap;
    transition:  border-color 0.12s;
}
.horaire:hover { border-color: var(--or-sombre); }
.ver {
    font-size:  0.55rem;
    color:      var(--gris);
    display:    block;
    text-align: center;
}

/* Infos salle */
.salle-infos {}
.info-ligne {
    display:         flex;
    justify-content: space-between;
    padding:         0.26rem 0;
    border-bottom:   0.5px solid rgba(58,58,68,0.35);
    font-size:       0.73rem;
}
.info-ligne:last-child { border: none; }
.ik { color: var(--gris); }
.iv { color: var(--blanc); }

/* Actions */
.salle-actions {
    padding:        0.85rem 1.2rem;
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
    margin-top:     auto;
}
.btn-site {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--or);
    color:           var(--noir);
    font-size:       0.73rem;
    font-weight:     500;
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    padding:         0.62rem;
    transition:      background 0.15s;
    text-decoration: none;
}
.btn-site:hover { background: var(--or-pale); }
.btn-map {
    display:         flex;
    align-items:     center;
    justify-content: center;
    border:          0.5px solid var(--gris2);
    color:           var(--gris);
    font-size:       0.7rem;
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    padding:         0.58rem;
    transition:      all 0.15s;
    text-decoration: none;
}
.btn-map:hover { border-color: var(--gris); color: var(--blanc); }

/* Zone carte */
#map { width: 100%; height: 100%; }

#carte-zone {
    flex:       1;
    position:   relative;
    overflow:   hidden;
    background: var(--noir3);
}

/* Fallback dev — points CSS */
#carte-fallback {
    position: absolute;
    inset:    0;
}
.carte-point {
    position:      absolute;
    width:         9px;
    height:        9px;
    background:    var(--or);
    border-radius: 50%;
    transform:     translate(-50%, -50%);
    cursor:        pointer;
    transition:    all 0.15s;
}
.carte-point:hover,
.carte-point.actif {
    width:      13px;
    height:     13px;
    background: var(--blanc);
}
.carte-point::after {
    content:       '';
    position:      absolute;
    inset:         -3px;
    border-radius: 50%;
    border:        0.5px solid rgba(201,168,76,0.25);
}

/* Légende */
#carte-legende {
    position:   absolute;
    bottom:     1rem;
    right:      1rem;
    background: rgba(10,10,10,0.88);
    border:     0.5px solid var(--gris2);
    padding:    0.55rem 0.85rem;
    font-size:  0.65rem;
    color:      var(--gris);
}
.leg { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; }
.leg:last-child { margin: 0; }
.lp     { width: 7px; height: 7px; border-radius: 50%; background: var(--or); flex-shrink: 0; }
.lp-sel { background: var(--blanc); }
/* =============================================================
   FICHE FILM — film.php
   À intégrer dans styles/style.css
   ============================================================= */

/* --- Backdrop ----------------------------------------------- */
.film-backdrop {
    position:            relative;
    height:              260px;
    overflow:            hidden;
    background:          var(--noir3);
    background-size:     cover;
    background-position: center 30%;
}
.film-backdrop-gradient {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to bottom,
                    rgba(10,10,10,0.15) 0%,
                    rgba(10,10,10,0.72) 65%,
                    var(--noir) 100%);
}

/* --- Corps -------------------------------------------------- */
.film-corps {
    display:     grid;
    grid-template-columns: 220px 1fr;
    gap:         3rem;
    padding:     0 2.5rem 3rem;
    margin-top:  -120px;
    position:    relative;
    z-index:     2;
    max-width:   1100px;
}

/* --- Aside gauche ------------------------------------------- */
.film-aside { flex-shrink: 0; }

.film-affiche {
    width:        220px;
    aspect-ratio: 2/3;
    background:   var(--noir3);
    border:       0.5px solid var(--gris2);
    overflow:     hidden;
}
.film-affiche img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}
.film-affiche-placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     'Cormorant Garamond', serif;
    font-size:       3rem;
    color:           var(--gris2);
}

/* Métadonnées */
.film-meta {
    margin-top: 1.2rem;
    font-size:  0.8rem;
}
.film-meta dt {
    font-size:       0.62rem;
    letter-spacing:  0.09em;
    text-transform:  uppercase;
    color:           var(--or-sombre);
    margin-top:      0.8rem;
}
.film-meta dd {
    color:      var(--blanc);
    margin-top: 0.1rem;
}

/* Boutons aside */
.btn-bande,
.btn-dpk {
    display:         block;
    text-align:      center;
    font-size:       0.72rem;
    letter-spacing:  0.07em;
    text-transform:  uppercase;
    padding:         0.58rem 0;
    margin-top:      0.8rem;
    transition:      all 0.15s;
    text-decoration: none;
}
.btn-bande {
    border: 0.5px solid var(--or-sombre);
    color:  var(--or);
}
.btn-bande:hover { background: var(--or); color: var(--noir); }
.btn-dpk {
    border: 0.5px solid var(--gris2);
    color:  var(--gris);
}
.btn-dpk:hover { border-color: var(--gris); color: var(--blanc); }

/* --- Colonne droite ----------------------------------------- */
.film-contenu { padding-top: 1.8rem; }

.film-label {
    font-size:       0.68rem;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    color:           var(--or);
    margin-bottom:   0.3rem;
}
.film-titre {
    font-family:    'Cormorant Garamond', serif;
    font-size:      2.8rem;
    font-weight:    300;
    line-height:    1.05;
    letter-spacing: -0.01em;
    color:          var(--blanc);
}
.film-realisateur {
    font-size:   0.9rem;
    color:       var(--or-pale);
    margin-top:  0.45rem;
    font-weight: 300;
}

/* Badges */
.film-badges {
    display:    flex;
    gap:        0.45rem;
    margin-top: 0.9rem;
    flex-wrap:  wrap;
}
.badge {
    font-size:       0.6rem;
    letter-spacing:  0.05em;
    padding:         0.12rem 0.4rem;
    border:          0.5px solid;
}
.badge-ae       { border-color: #4a6a4a; color: #8ab88a; }
.badge-vo       { border-color: var(--gris2); color: var(--gris); }
.badge-festival { border-color: var(--or-sombre); color: var(--or); background: rgba(201,168,76,0.08); }

/* Synopsis */
.film-section-label {
    font-size:       0.63rem;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    color:           var(--gris);
    margin-top:      1.8rem;
    margin-bottom:   0.5rem;
}
.film-synopsis {
    font-family: 'Cormorant Garamond', serif;
    font-size:   1.06rem;
    font-style:  italic;
    font-weight: 300;
    color:       var(--blanc);
    line-height: 1.85;
    max-width:   600px;
}

/* Citations presse */
.film-citations {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   0.8rem;
    max-width:             600px;
    margin-top:            0.5rem;
}
.citation {
    background: var(--noir3);
    border:     0.5px solid var(--gris2);
    padding:    0.9rem 1rem;
}
.citation-texte {
    font-family: 'Cormorant Garamond', serif;
    font-style:  italic;
    font-size:   0.93rem;
    font-weight: 300;
    color:       var(--blanc);
    line-height: 1.6;
}
.citation-source {
    font-size:       0.63rem;
    letter-spacing:  0.07em;
    text-transform:  uppercase;
    color:           var(--or-sombre);
    margin-top:      0.5rem;
}
.citation-etoiles {
    color:      var(--or);
    font-size:  0.7rem;
    margin-top: 0.15rem;
}

/* CTA Où voir ce film */
.film-cta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1.5rem;
    margin-top:      2.5rem;
    padding:         1.2rem 1.4rem;
    background:      var(--noir2);
    border:          0.5px solid var(--gris2);
    max-width:       600px;
}
.film-cta-titre {
    font-family: 'Cormorant Garamond', serif;
    font-size:   1.05rem;
    font-weight: 300;
    color:       var(--blanc);
}
.film-cta-sous {
    font-size:  0.72rem;
    color:      var(--gris);
    margin-top: 0.15rem;
}
.btn-ou-voir {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    background:      var(--or);
    color:           var(--noir);
    font-size:       0.8rem;
    font-weight:     500;
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    padding:         0.8rem 1.6rem;
    white-space:     nowrap;
    transition:      background 0.15s;
    text-decoration: none;
}
.btn-ou-voir:hover { background: var(--or-pale); }


.carte-point {
    cursor: pointer;
}

/* ---- Liste salles ---- */
#panneau-liste          { overflow-y: auto; flex: 1; padding: 0.5rem 0; }
.liste-vide             { padding: 1rem; color: var(--gris); font-size: 0.8rem; }
.liste-dept             { margin-bottom: 0.5rem; }
.liste-dept-titre       { padding: 0.5rem 1rem;
                          font-size: 0.68rem; letter-spacing: .09em;
                          text-transform: uppercase; color: var(--or);
                          border-bottom: 0.5px solid var(--gris2);
                          background: var(--noir2); }
.liste-ville            { padding: 0.5rem 1rem 0.1rem;
                          font-size: 0.82rem; color: var(--blanc);
                          font-family: 'Cormorant Garamond', serif;
                          font-style: italic; }
.liste-cinema           { padding: 0.2rem 1.4rem;
                          font-size: 0.75rem; color: var(--gris);
                          cursor: pointer;
                          border-left: 2px solid transparent;
                          transition: color .15s, border-color .15s; }
.liste-cinema:hover     { color: var(--or-pale); border-left-color: var(--or); }