/* ==================================================================
   Affiches des programmes mensuels, reproduites en HTML/CSS
   (septembre.html… août.html : voir chaque page)

   Toutes les mesures sont en "unités d'affiche" (--u) : l'affiche fait
   980 unités de large, comme les images d'origine, et tout s'agrandit
   ou rétrécit avec elle.

   Ce fichier donne l'apparence commune. Les positions propres à chaque
   mois sont dans le bloc <style> en haut de la page du mois.
   ================================================================== */

@font-face {
    font-family: "Abril Fatface";
    src: url("fonts/abril-fatface-latin-400-normal.woff2") format("woff2");
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: "Open Sans";
    src: url("fonts/open-sans-latin-400-normal.woff2") format("woff2");
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: "Open Sans";
    src: url("fonts/open-sans-latin-600-normal.woff2") format("woff2");
    font-weight: 600; font-display: swap;
}

.affiche {
    /* Couleurs relevées sur les affiches */
    --orange: #fe910e;
    --blob: #fec113;
    --jaune: #fee917;
    --noir: #000;
    --bleu-lien: #1d1df5;

    /* Pastilles de catégorie */
    --c-drag: #ffff00;
    --c-karaoke: #ffffff;
    --c-atelier: #0000ff;
    --c-concert: #00ff00;
    --c-cabaret: #ff0000;
    --c-expo: #000000;
    --c-brunch: #ff00ff;
    --c-spectacle: #800080;
    --c-lecture: #00ffff;

    /* Hauteur de l'affiche, en unités (la largeur fait toujours 980) */
    --h: 1230;

    /* Liste des dates (valeurs de décembre, modifiées mois par mois) */
    --liste-y: 209.4;      /* haut de la liste */
    --pas: 31.19;          /* écart entre deux lignes */
    --fs: 23.5;            /* taille du texte */
    --col-date: 237;       /* largeur de la colonne des jours (texte calé à droite) */
    --col-pastille: 40;    /* largeur de la colonne des pastilles */
    --pastille: 18;        /* diamètre des pastilles */

    /* Grand écran / borne : l'affiche tient entière dans la hauteur de l'écran,
       en laissant la place au logo (à gauche) et au menu (à droite). */
    --w: min(calc(100vw - 360px), calc((100vh - 16px) * 980 / var(--h)), 980px);
    --u: calc(var(--w) / 980);

    position: relative;
    width: var(--w);
    height: calc(var(--h) * var(--u));
    background: var(--orange);
    color: var(--noir);
    font-family: "Open Sans", "Noto Sans", Arial, sans-serif;
    overflow: hidden;
    box-shadow: 0 0 calc(30 * var(--u)) rgba(0, 0, 0, .35);
    font-size: calc(24 * var(--u));
    line-height: 1;
}
.affiche * { box-sizing: border-box; }

/* Formes de fond (grande forme jaune, bandeau du festival…) */
.affiche .fond { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Logo carré noir du Barlone */
.affiche .logo-affiche {
    position: absolute;
    left: calc(23 * var(--u)); top: calc(23 * var(--u));
    width: calc(182 * var(--u));
    display: block;
}
.affiche .logo-affiche img { width: 100%; height: auto; display: block; }

/* Pastille jaune "Bar inclusif / Ouvert tous les jours" */
.affiche .slogan {
    position: absolute;
    left: calc(235 * var(--u)); top: calc(22 * var(--u));
    width: calc(565 * var(--u)); height: calc(125 * var(--u));
    border-radius: calc(46 * var(--u)) calc(70 * var(--u)) calc(58 * var(--u)) calc(40 * var(--u));
    background: var(--jaune);
    margin: 0;
    font-family: "Abril Fatface", "Didot", Georgia, serif;
    font-size: calc(47 * var(--u));
    line-height: 1.12;
    text-align: center;
    display: flex; flex-direction: column; justify-content: center;
    padding-left: calc(30 * var(--u));
}
.affiche .slogan::before {
    content: "";
    position: absolute;
    left: calc(-6 * var(--u)); top: calc(18 * var(--u));
    width: calc(42 * var(--u)); height: calc(42 * var(--u));
    border-radius: 50%;
    background: var(--noir);
}

/* "Informations sur le site du Barlone / lebarlone.fr" */
.affiche .info-site {
    position: absolute;
    right: calc(47 * var(--u)); top: calc(209 * var(--u));
    margin: 0;
    text-align: right;
    font-family: "Abril Fatface", "Didot", Georgia, serif;
    font-size: calc(36 * var(--u));
    line-height: 1.05;
}
.affiche .info-site a {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-size: calc(30 * var(--u));
    color: var(--bleu-lien);
    text-decoration: none;
}

/* Titre du mois */
.affiche h1 {
    position: absolute;
    right: calc(95 * var(--u)); top: calc(128 * var(--u));
    margin: 0;
    font-family: "Abril Fatface", "Didot", Georgia, serif;
    font-weight: 400;
    font-size: calc(96 * var(--u));
    line-height: 1;
    letter-spacing: calc(-1 * var(--u));
    white-space: nowrap;
}

/* Liste des dates */
.affiche .dates {
    position: absolute;
    left: 0; top: calc(var(--liste-y) * var(--u));
    margin: 0; padding: 0;
    list-style: none;
    font-size: calc(var(--fs) * var(--u));
}
.affiche .dates li {
    display: grid;
    grid-template-columns: calc(var(--col-date) * var(--u)) calc(var(--col-pastille) * var(--u)) auto;
    align-items: center;
    height: calc(var(--pas) * var(--u));
    white-space: nowrap;
}
.affiche .dates .jour { grid-column: 1; grid-row: 1; text-align: right; }
.affiche .dates a, .affiche .dates .titre { grid-column: 3; grid-row: 1; }
.affiche .dates li::before {
    content: "";
    grid-column: 2; grid-row: 1;
    justify-self: center;
    width: calc(var(--pastille) * var(--u)); height: calc(var(--pastille) * var(--u));
    border-radius: 50%;
    border: calc(1.5 * var(--u)) solid var(--noir);
    background: var(--pastille-cat, #fff);
}
.affiche .dates.sans-pastille li::before { visibility: hidden; }

.affiche .dates a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, .22);
    text-decoration-thickness: calc(1.5 * var(--u));
    text-underline-offset: calc(4 * var(--u));
}
.affiche .dates a:hover, .affiche .dates a:focus-visible { text-decoration-color: currentColor; }

/* Catégories : la classe de la ligne choisit la couleur de la pastille */
.affiche .drag      { --pastille-cat: var(--c-drag); }
.affiche .karaoke   { --pastille-cat: var(--c-karaoke); }
.affiche .atelier   { --pastille-cat: var(--c-atelier); }
.affiche .concert   { --pastille-cat: var(--c-concert); }
.affiche .cabaret   { --pastille-cat: var(--c-cabaret); }
.affiche .expo      { --pastille-cat: var(--c-expo); }
.affiche .brunch    { --pastille-cat: var(--c-brunch); }
.affiche .spectacle { --pastille-cat: var(--c-spectacle); }
.affiche .lecture   { --pastille-cat: var(--c-lecture); }
.affiche .pates     { --pastille-cat: linear-gradient(90deg, #fff 50%, #ffb3e6 50%); }
/* Pastille de deux couleurs : class="bicolore" style="--c1: var(--c-concert); --c2: var(--c-spectacle)" */
.affiche .bicolore  { --pastille-cat: linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%); }

/* Légende des couleurs */
.affiche .legende {
    position: absolute;
    left: calc(797 * var(--u)); top: calc(297 * var(--u));
    width: calc(158 * var(--u));
    margin: 0;
    padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u));
    list-style: none;
    background: #fff;
    border-radius: calc(20 * var(--u));
    font-size: calc(21 * var(--u));
}
.affiche .legende li {
    display: flex; align-items: center; gap: calc(2 * var(--u));
    height: 1.02em;
    white-space: nowrap;
}
.affiche .legende li::before {
    content: "";
    flex: none;
    width: .78em; height: .78em;
    border-radius: 50%;
    border: calc(1.2 * var(--u)) solid var(--noir);
    background: var(--pastille-cat);
}

/* Variante de décembre : badge "Entrée libre" posé au-dessus de la légende */
.affiche .infos {
    position: absolute;
    left: calc(808 * var(--u)); top: calc(262 * var(--u));
    width: calc(137 * var(--u));
}
.affiche .infos img { display: block; width: calc(113 * var(--u)); margin-left: calc(12 * var(--u)); }
.affiche .infos .legende {
    position: static; width: auto;
    margin-top: calc(2 * var(--u));
    padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u));
    border-radius: calc(16 * var(--u));
    font-size: calc(18 * var(--u));
}

/* Images posées sur l'affiche (tampon "Entrée tout event libre", capsule, couronne…) */
.affiche .deco { position: absolute; display: block; height: auto; }

/* Panneau "Soirée sur réservation !" et sa flèche (décembre) */
.affiche .panneau { position: absolute; inset: 0; pointer-events: none; }
.affiche .panneau svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.affiche .panneau p {
    position: absolute;
    left: calc(688 * var(--u)); top: calc(940 * var(--u));
    width: calc(264 * var(--u)); height: calc(82 * var(--u));
    margin: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    font-weight: 600;
    font-size: calc(24 * var(--u));
    line-height: 1.25;
    letter-spacing: calc(5.5 * var(--u));
    text-transform: uppercase;
}

/* Septembre : en-tête "Programmation 2026-2027" et pied d'affiche */
.affiche .saison {
    position: absolute;
    left: calc(300 * var(--u)); top: calc(36 * var(--u));
    margin: 0;
    font-family: "Abril Fatface", "Didot", Georgia, serif;
    font-size: calc(80 * var(--u));
    line-height: .92;
    color: var(--jaune);
}
.affiche .saison sup { font-size: .6em; vertical-align: .45em; margin-left: calc(4 * var(--u)); }
.affiche .pied-texte {
    position: absolute;
    left: calc(52 * var(--u)); top: calc(1128 * var(--u));
    margin: 0;
    font-family: "Abril Fatface", "Didot", Georgia, serif;
    font-size: calc(28 * var(--u));
    line-height: 1.02;
    color: #2b1600;
}
.affiche .pied-texte a {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-size: calc(26 * var(--u));
    color: var(--noir);
    text-decoration: none;
}
.affiche .pied-texte .reserve { display: block; color: var(--jaune); }

/* ------------------------------------------------------------------
   Tablette / mobile : le site défile, l'affiche prend la largeur
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .affiche {
        --w: min(calc(100vw - 16px), 760px);
        margin: 8px auto 24px;
    }
}

/* Petit téléphone : texte trop petit si on garde la mise en page de l'affiche,
   on passe en une colonne lisible, mêmes couleurs, mêmes pastilles. */
@media (max-width: 640px) {
    .affiche {
        --u: 1px;
        width: auto; height: auto;
        margin: 8px;
        padding: 16px 12px 24px;
        overflow: visible;
        font-size: 16px;
        display: flex; flex-direction: column; align-items: center; gap: 14px;
        border-radius: 12px;
    }
    .affiche .fond, .affiche .panneau, .affiche .deco.decoratif, .affiche .decoratif-txt { display: none; }
    .affiche > * { position: static !important; }
    .affiche .logo-affiche { width: 96px; }
    .affiche .slogan { position: relative !important; left: auto; top: auto; width: 100%; height: auto; padding: 12px 16px 12px 40px; font-size: 22px; border-radius: 24px; }
    .affiche .slogan::before { left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
    .affiche .saison { font-size: 34px; text-align: center; }
    .affiche .info-site { text-align: center; font-size: 18px; }
    .affiche .info-site a { font-size: 16px; }
    .affiche h1 { font-size: 52px; }
    .affiche .infos { order: 1; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
    .affiche .infos img { width: 96px; margin: 0; }
    .affiche .legende {
        order: 1;
        width: auto;
        display: grid; grid-template-columns: repeat(3, auto); gap: 4px 12px;
        padding: 8px 12px; font-size: 14px; border-radius: 12px;
    }
    .affiche .legende li { height: auto; gap: 4px; }
    .affiche .dates {
        order: 2;
        width: 100%;
        background: var(--fond-liste, var(--blob));
        border-radius: 18px;
        padding: 10px 8px;
        font-size: 16px;
    }
    .affiche .dates li {
        grid-template-columns: 66px 26px 1fr;
        height: auto; min-height: 32px;
        white-space: normal;
        line-height: 1.25;
        padding: 3px 0;
    }
    .affiche .dates.sans-pastille li { grid-template-columns: 66px 14px 1fr; }
    .affiche .dates li::before { width: 14px; height: 14px; border-width: 1.5px; }
    .affiche .deco { order: 3; width: 110px !important; }
    .affiche .pied { order: 3; width: 100% !important; max-width: 360px; }
    .affiche .pied-texte { order: 4; text-align: center; font-size: 18px; }
    .affiche .pied-texte a { font-size: 16px; }

    /* Le panneau "sur réservation" devient une mention sur la ligne concernée */
    .affiche .dates li.resa a::after {
        content: "⚠ sur réservation";
        display: inline-block;
        margin-left: 8px;
        padding: 1px 6px;
        border: 2px solid #e30613;
        border-radius: 6px;
        background: #fff;
        font-size: 12px; font-weight: 600; letter-spacing: 1px;
        text-transform: uppercase;
        vertical-align: 1px;
    }
}