/* =============================================
   TERRA DI CORSICA — Tournée Québec 2026
   ============================================= */

.page-quebec {
    background-color: #05050b;
}

/* --- Bascule de langue FR / EN --- */
.nav-langue {
    display: flex;
    align-items: center;
    gap: 0;
}

.lang-btn {
    background: transparent;
    border: 1px solid rgba(201,168,76,0.45);
    color: var(--couleur-texte-doux);
    font-family: var(--font-corps);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.32rem 0.62rem;
    cursor: pointer;
    line-height: 1;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.lang-btn:first-child { border-radius: 4px 0 0 4px; }
.lang-btn:last-child  { border-radius: 0 4px 4px 0; }
.lang-btn + .lang-btn { border-left: none; }

.lang-btn:hover:not(.actif) {
    color: var(--couleur-accent);
    border-color: rgba(201,168,76,0.8);
}

.lang-btn.actif {
    background: linear-gradient(135deg, #c9a84c 0%, #e8cf82 50%, #c9a84c 100%);
    color: #08080f;
    border-color: rgba(201,168,76,0.9);
}

/* --- Hero plein écran --- */
.qbc-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 130px 1.5rem 70px;
    overflow: hidden;
    isolation: isolate;
}

.qbc-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('../images/quebec-fond.png') center 28% / cover no-repeat;
}

.qbc-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 90% at 50% 18%, rgba(8,8,15,0.18) 0%, rgba(8,8,15,0.55) 55%, rgba(5,5,11,0.92) 100%),
        linear-gradient(180deg, rgba(5,5,11,0.85) 0%, rgba(8,8,15,0.42) 32%, rgba(5,5,11,0.80) 100%);
}

.qbc-contenu {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

/* --- Badge --- */
.qbc-badge {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--couleur-accent);
    font-weight: 600;
    padding: 0.55rem 1.5rem;
    border: 1px solid rgba(201,168,76,0.55);
    border-radius: 4px;
    background: rgba(8,8,15,0.35);
    box-shadow: 0 0 24px rgba(201,168,76,0.10) inset;
}

/* --- Titre --- */
.qbc-titre {
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: clamp(1.6rem, 3.8vw, 3.2rem);
    line-height: 1.08;
    color: var(--couleur-accent);
    margin: 1.4rem 0 0;
    text-shadow: 0 4px 30px rgba(0,0,0,0.55), 0 0 40px rgba(201,168,76,0.12);
}

.qbc-titre .qbc-tiret {
    font-weight: 400;
    color: var(--couleur-accent-hover);
    margin: 0 0.15em;
}

/* --- Ornement séparateur --- */
.qbc-ornement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.6rem 0 0.4rem;
}

.qbc-orn-ligne {
    display: block;
    width: clamp(60px, 12vw, 130px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.75));
}

.qbc-ornement .qbc-orn-ligne:last-child {
    background: linear-gradient(90deg, rgba(201,168,76,0.75), transparent);
}

.qbc-orn-diamant {
    color: var(--couleur-accent);
    font-size: 0.9rem;
    line-height: 1;
    animation: qbcPulse 3.4s ease-in-out infinite;
}

@keyframes qbcPulse {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.18); }
}

/* --- Sous-titre --- */
.qbc-sous-titre {
    font-family: var(--font-titre);
    font-style: italic;
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    color: #e8d9a8;
    margin: 0.7rem 0 0;
}

.qbc-sous-titre #qbc-jours-txt { font-style: normal; font-weight: 700; color: var(--couleur-accent-hover); }

/* --- Compte à rebours --- */
.qbc-countdown {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.5rem, 1.6vw, 1.4rem);
    margin: 1.2rem auto 0;
    padding: 0.65rem clamp(0.8rem, 2vw, 1.6rem);
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 8px;
    background: rgba(8,8,15,0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.qbc-cd-bloc {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 38px;
}

.qbc-cd-num {
    font-family: var(--font-titre);
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    font-weight: 700;
    color: var(--couleur-accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.qbc-cd-label {
    margin-top: 0.35rem;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--couleur-texte-doux);
}

.qbc-cd-sep {
    width: 1px;
    height: 26px;
    background: linear-gradient(180deg, transparent, rgba(201,168,76,0.5), transparent);
}

/* --- Cartes concerts --- */
.qbc-cartes {
    --qbc-gap: clamp(1rem, 1.8vw, 1.6rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--qbc-gap);
    margin: 2.6rem auto 0;
    max-width: 1100px;
}

.qbc-carte {
    width: calc((100% - 2 * var(--qbc-gap)) / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.8rem 1.3rem 1.6rem;
    border: 1px solid rgba(201,168,76,0.30);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(14,14,26,0.78), rgba(8,8,15,0.72));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
                border-color 0.45s ease,
                box-shadow 0.45s ease;
}

.qbc-carte:hover {
    transform: translateY(-8px);
    border-color: rgba(201,168,76,0.75);
    box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 30px rgba(201,168,76,0.15);
}

.qbc-carte-date {
    font-family: var(--font-titre);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--couleur-accent);
    margin-bottom: 0.5rem;
}

.qbc-carte-ville {
    font-family: var(--font-titre);
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--couleur-texte);
    margin: 0;
    line-height: 1.15;
}

.qbc-carte-orn {
    color: rgba(201,168,76,0.7);
    font-size: 0.7rem;
    margin: 0.7rem 0;
}

.qbc-carte-lieu {
    font-size: 0.92rem;
    color: var(--couleur-texte-doux);
    line-height: 1.45;
    margin: 0 0 1.2rem;
    flex-grow: 1;
}

.qbc-carte-maps {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: center;
    font-size: 0.82rem;
    color: var(--couleur-accent);
    text-decoration: none;
    margin: 0 0 1rem;
    padding-bottom: 1px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, opacity 0.25s ease;
}

.qbc-carte-maps:hover {
    border-bottom-color: var(--couleur-accent);
    opacity: 0.85;
}

.qbc-carte-prix {
    font-family: var(--font-titre);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--couleur-accent);
    margin-bottom: 1.1rem;
}

.qbc-carte-prix .qbc-devise {
    font-family: var(--font-corps);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--couleur-texte-doux);
    margin-left: 0.15rem;
}

.qbc-billet {
    display: inline-block;
    padding: 0.7rem 1.9rem;
    background: linear-gradient(135deg, #c9a84c 0%, #e8cf82 50%, #c9a84c 100%);
    background-size: 200% auto;
    color: #08080f;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 3px;
    transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.qbc-billet:hover {
    background-position: right center;
    color: #08080f;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(201,168,76,0.4);
}

.qbc-carte-complet {
    display: inline-block;
    padding: 0.7rem 1.9rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 3px;
    color: var(--couleur-texte-doux);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.qbc-vide {
    margin: 2.5rem auto 0;
    color: var(--couleur-texte-doux);
    font-style: italic;
    font-family: var(--font-titre);
    font-size: 1.15rem;
}

/* --- Ligne de soutien --- */
.qbc-soutien {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin: 2.8rem auto 0;
    font-family: var(--font-titre);
    font-style: italic;
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
    color: #cdbd8e;
    max-width: 760px;
}

.qbc-laurier {
    color: var(--couleur-accent);
    font-size: 1.4rem;
    font-style: normal;
    line-height: 1;
    opacity: 0.85;
}

/* --- Logos partenaires --- */
.qbc-partenaires {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin: 1.6rem auto 0;
}

.qbc-partenaire {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 12px;
    padding: 0.8rem 1.4rem;
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.qbc-partenaire:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}

.qbc-partenaire img {
    height: 46px;
    width: auto;
    display: block;
}

@media (max-width: 600px) {
    .qbc-partenaire img { height: 38px; }
}

/* --- Chevron scroll --- */
.qbc-scroll {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: qbcBounce 2.2s ease-in-out infinite;
}

.qbc-chevron {
    width: 16px;
    height: 16px;
    border-right: 2px solid var(--couleur-accent);
    border-bottom: 2px solid var(--couleur-accent);
    transform: rotate(45deg);
    opacity: 0.85;
}

@keyframes qbcBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(9px); }
}

/* --- Section infos --- */
.qbc-infos {
    background-color: var(--couleur-fond);
    padding: 5rem 0;
}

/* --- Galerie 3 photos (rubrique « La Corse traverse l'Atlantique ») --- */
.qbc-galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.6rem);
    margin: 3rem auto 0;
    max-width: 1000px;
}

.qbc-galerie-bloc {
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(201,168,76,0.30);
    background: rgba(8,8,15,0.4);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
                border-color 0.45s ease,
                box-shadow 0.45s ease;
}

.qbc-galerie-bloc:hover {
    transform: translateY(-6px);
    border-color: rgba(201,168,76,0.7);
    box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 26px rgba(201,168,76,0.15);
}

.qbc-galerie-bloc img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    /* Recadrage centré horizontalement, ancré en bas (04/08/2026).
       Auparavant ancré à droite pour préserver le filigrane : mais le
       recadrage rognait alors toute la largeur perdue du côté gauche, et
       coupait le chanteur de gauche sur les photos de groupe. Centré, la
       perte se répartit des deux côtés et personne n'est amputé ; le bas
       reste ancré, donc le filigrane demeure visible. */
    object-position: center bottom;
    transform-origin: right bottom;
    transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}

.qbc-galerie-bloc:hover img {
    transform: scale(1.05);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .qbc-cartes { max-width: 640px; }
    .qbc-carte { width: calc((100% - var(--qbc-gap)) / 2); }
}

@media (max-width: 600px) {
    .qbc-hero { padding: 115px 1.1rem 60px; }
    .qbc-cartes { max-width: 360px; }
    .qbc-carte { width: 100%; }
    .qbc-countdown { gap: 0.7rem; padding: 0.85rem 1rem; }
    .qbc-cd-bloc { min-width: 44px; }
    .qbc-cd-sep { height: 30px; }
    .qbc-soutien { flex-direction: row; flex-wrap: wrap; }
    .qbc-orn-ligne { width: 50px; }
    .qbc-galerie { grid-template-columns: 1fr; max-width: 380px; }
    .qbc-galerie-bloc img { height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
    .qbc-orn-diamant, .qbc-scroll { animation: none; }
    .qbc-galerie-bloc, .qbc-galerie-bloc img { transition: none; }
}

/* =============================================
   Page « Merci le Québec » (04/10/2026)
   ============================================= */
.qbm-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: 62% 45% / cover no-repeat;
}
.qbm-intro {
    max-width: 680px;
    margin: 0 auto 2rem;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.7;
    color: var(--couleur-texte);
}
.qbm-chiffres {
    display: flex;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    margin: 0 auto 2.2rem;
}
.qbm-chiffres div { display: flex; flex-direction: column; align-items: center; }
.qbm-chiffres strong {
    font-family: var(--font-titre);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    color: var(--couleur-accent);
    line-height: 1.1;
}
.qbm-chiffres span {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--couleur-texte-doux);
}
.qbm-cta { display: inline-block; }
.qbm-merci {
    display: inline-block;
    margin-top: 0.6rem;
    font-family: var(--font-titre);
    font-style: italic;
    color: var(--couleur-accent);
}

/* Galerie */
.qbm-galerie {
    /* Grille lue ligne par ligne : l'ordre des photos raconte la soirée */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 2rem;
}
.qbm-photo {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(201,168,76,0.18);
}
.qbm-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
}
.qbm-photo:hover img { transform: scale(1.03); filter: brightness(1.08); }
.qbm-credit {
    margin-top: 1.2rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--couleur-texte-doux);
}
.qbm-credit a { color: var(--couleur-accent); }

/* Tournée 2027 */
.qbm-encadre {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(1.6rem, 4vw, 3rem);
    text-align: center;
    border: 1px solid rgba(201,168,76,0.45);
    border-radius: 14px;
    background: rgba(201,168,76,0.06);
}
.qbm-encadre h2 {
    font-family: var(--font-titre);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    color: var(--couleur-texte);
    margin: 1rem 0 0.8rem;
}
.qbm-encadre > p { color: var(--couleur-texte-doux); line-height: 1.7; }
.qbm-form {
    display: grid;
    gap: 0.9rem;
    max-width: 440px;
    margin: 1.6rem auto 0;
    text-align: left;
}
.qbm-champ { display: grid; gap: 0.3rem; font-size: 0.85rem; color: var(--couleur-texte-doux); }
.qbm-champ input {
    padding: 0.75rem 0.9rem;
    border-radius: 6px;
    border: 1px solid var(--couleur-bordure);
    background: #0c0c18;
    color: var(--couleur-texte);
    font: inherit;
    font-size: 1rem;
}
.qbm-champ input:focus { outline: none; border-color: var(--couleur-accent); }
.qbm-form button { justify-self: center; margin-top: 0.4rem; cursor: pointer; border: none; }
.qbm-rgpd { font-size: 0.75rem; line-height: 1.5; color: var(--couleur-texte-doux); text-align: center; }
.qbm-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qbm-message { margin: 1.2rem auto 0; padding: 0.8rem 1rem; border-radius: 8px; max-width: 440px; }
.qbm-ok { background: rgba(80,160,90,0.15); color: #b9e2bf; border: 1px solid rgba(80,160,90,0.5); }
.qbm-erreur { background: rgba(190,70,70,0.15); color: #f1c0c0; border: 1px solid rgba(190,70,70,0.5); }

/* Visionneuse */
.qbm-visionneuse {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(5,5,11,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
}
.qbm-visionneuse[hidden] { display: none; }
.qbm-visionneuse img { max-width: 92vw; max-height: 88vh; border-radius: 4px; }
.qbm-visionneuse button {
    position: absolute;
    background: none;
    border: none;
    color: var(--couleur-accent);
    font-size: 3rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    line-height: 1;
}
.qbm-fermer { top: 1rem; right: 1rem; }
.qbm-prec { left: 0.5rem; top: 50%; transform: translateY(-50%); }
.qbm-suiv { right: 0.5rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
    .qbm-chiffres { gap: 1.2rem; }
    .qbm-galerie { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (max-width: 600px) {
    /* Les 5 villes : deux par ligne sur téléphone, pour ne pas faire défiler 5 grandes cartes */
    .qbm-cartes { max-width: 100%; gap: 0.7rem; }
    .qbm-cartes .qbc-carte { width: calc(50% - 0.35rem); padding: 1.1rem 0.6rem; }
    .qbm-cartes .qbc-carte-lieu { font-size: 0.78rem; }
}