/*
Theme Name: Festival de Brix
Theme URI: https://festivaldebrix.fr
Description: Thème bloc (FSE) sur-mesure du Festival international de folklore « Danse avec le Monde » de Brix. Style moderne, palette violet / orange. Conçu pour fonctionner avec le plugin Festival Core.
Author: Festival de Brix
Version: 1.6.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: festival-de-brix
*/

/* ---------------- Polices de la charte (auto-hébergées) ---------------- */
@font-face{
  font-family:"Cooper Black";
  src:url("assets/fonts/cooper-black.woff2") format("woff2");
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Cambria";
  src:url("assets/fonts/cambria.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --indigo:#3d2e9c;
  --violet:#5b49c9;
  --violet-soft:#eae7fa;
  --orange:#ffae00;
  --orange-deep:#e69a00;
  --ink:#1c1726;
  --muted:#6b6477;
  --cream:#fbf8f3;
  --paper:#ffffff;
  --line:#ece6f3;
  --radius:22px;
  --shadow:0 24px 60px -28px rgba(61,46,156,.45);
}

/* ---------------- Base ---------------- */
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink)}
a{color:inherit}
.fdb-eyebrow{font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--violet)}
/* Lien de retour (ex. page d'une édition → liste des éditions) */
.fdb-back{margin:0 0 1.4rem}
.fdb-back a{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--violet);text-decoration:none;transition:gap .18s ease,color .18s ease}
.fdb-back a:hover{color:var(--indigo);gap:.65rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* Le contenu principal colle à l'en-tête (pas de marge haute) */
.wp-site-blocks main,
main.wp-block-group{margin-block-start:0}

/* Blocs pleine largeur collés (pas d'espace au-dessus) */
.fdb-hero{margin-block:0}
.marquee{margin-block:0}
.stats-block{margin-block:0}

/* ---------------- Top announcement bar ---------------- */
/* padding-block en !important : le bloc topbar force un padding haut/bas à 0
   en style inline (réglage d'espacement du bloc), qu'on doit surcharger. */
.fdb-topbar{background:var(--indigo);color:#fff;font-size:1.02rem;text-align:center;padding-inline:1rem;padding-block:1rem!important;font-weight:500;letter-spacing:.01em}
.fdb-topbar b{color:var(--orange)}

/* ---------------- Header ---------------- */
.fdb-header{position:sticky;top:0;z-index:50;background:rgba(251,248,243,.97)}
.fdb-bar{max-width:1240px;width:100%;margin-inline:auto;padding:1.1rem 32px;align-items:center}
/* Tout centrer verticalement dans la barre */
.fdb-bar,
.fdb-bar .wp-block-group,
.fdb-bar .wp-block-navigation,
.fdb-bar .wp-block-navigation__container,
.fdb-bar .wp-block-buttons{align-items:center;margin-top:0;margin-bottom:0}
.fdb-brand img,.fdb-brand .custom-logo{height:70px;width:auto}
.fdb-menu a{font-weight:500;font-size:1.08rem;color:var(--ink);position:relative}
.fdb-menu a:hover{color:var(--violet)}
/* Menu mobile (overlay plein écran) : marge intérieure pour que les liens
   ne touchent pas les bords de l'écran. */
.fdb-menu .wp-block-navigation__responsive-container.is-menu-open{padding:2rem 1.6rem 2.5rem}
.fdb-menu .wp-block-navigation__responsive-container.is-menu-open a{font-size:1.35rem}

/* ---------------- Buttons ---------------- */
.fdb-btn-primary a,.wp-block-button.fdb-btn-primary .wp-block-button__link{background:var(--orange)!important;color:var(--ink)!important;border-radius:999px;font-weight:600;box-shadow:0 10px 24px -10px rgba(255,174,0,.8)}
.fdb-btn-primary a:hover{background:var(--orange-deep)!important}
.fdb-btn-dark a,.wp-block-button.fdb-btn-dark .wp-block-button__link{background:var(--indigo)!important;color:#fff!important;border-radius:999px;font-weight:600}
.fdb-btn-ghost a,.wp-block-button.fdb-btn-ghost .wp-block-button__link{background:transparent!important;color:#fff!important;border:2px solid rgba(255,255,255,.5)!important;border-radius:999px;font-weight:600}

/* ---------------- Réseaux sociaux (bloc festival/socials) ---------------- */
.fdb-socials{margin-top:1.8rem}
.fdb-social-label{font-size:.9rem;font-weight:600;margin:0 0 .6rem;color:inherit;opacity:.9}
.fdb-social-links{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.fdb-social{display:inline-flex;line-height:0;transition:transform .18s ease}
.fdb-social:hover{transform:translateY(-3px)}
/* Badges horizontaux (icône + texte) : hauteur fixe, largeur auto pour garder le ratio. */
.fdb-social img{height:52px;width:auto;display:block}

/* ---------------- Hero ---------------- */
.fdb-hero{position:relative;overflow:hidden;color:#fff;
  background-color:#4c3bc0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 0),
    radial-gradient(1200px 600px at 78% -10%, rgba(255,174,0,.35), transparent 60%),
    radial-gradient(900px 500px at 12% 110%, rgba(91,73,201,.55), transparent 55%),
    linear-gradient(135deg,#3d2e9c 0%,#4c3bc0 48%,#5b49c9 100%);
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  background-size:26px 26px,auto,auto,auto;}
/* Personnages décoratifs (couple de danseurs / portrait massaï).
   Peints en IMAGES DE FOND du hero (et non en éléments positionnés) : c'est le
   seul rendu totalement stable dans le canevas Gutenberg — une image de fond ne
   bouge jamais (pas de wrapper, pas de survol qui la déplace) et reste derrière
   le contenu. Rendu identique éditeur / front. Affichés ≥1101px, là où le hero
   réserve une « scène » en bas. Pour changer une silhouette : remplacer le
   fichier dans assets/brand/ (hero-couple.png / hero-maasai.png). */
@media (min-width:1101px){
  /* Hauteur minimale réservée à la page d'accueil (scène des personnages) */
  .home .fdb-hero{min-height:480px}
  .home .fdb-hero .wp-block-columns.are-vertically-aligned-center{align-items:flex-start}
  /* Silhouettes : uniquement sur la home (les autres pages utilisant .fdb-hero
     — ex. page d'une édition — gardent le fond dégradé sans personnages). */
  .home .fdb-hero{
    background-image:
      url("assets/brand/hero-couple.png"),
      url("assets/brand/hero-maasai.png"),
      radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 0),
      radial-gradient(1200px 600px at 78% -10%, rgba(255,174,0,.35), transparent 60%),
      radial-gradient(900px 500px at 12% 110%, rgba(91,73,201,.55), transparent 55%),
      linear-gradient(135deg,#3d2e9c 0%,#4c3bc0 48%,#5b49c9 100%);
    background-repeat:no-repeat,no-repeat,repeat,no-repeat,no-repeat,no-repeat;
    background-position:52% bottom, right bottom, 0 0, 0 0, 0 0, 0 0;
    background-size:300px auto, 152px auto, 26px 26px, auto, auto, auto;
  }
}
.fdb-hero h1{font-size:clamp(2.6rem,6vw,4.7rem);color:#fff;line-height:1.05}
.fdb-hero .fdb-eyebrow{color:var(--orange)}
.fdb-hero p{color:rgba(255,255,255,.88)}
.fdb-hero-meta{display:flex;gap:1rem 1.6rem;flex-wrap:wrap;font-weight:500;color:#fff;margin-top:1.4rem;margin-bottom:1.8rem}
/* Pastille translucide derrière chaque info : garde le texte blanc lisible
   même quand il passe par-dessus la silhouette de fond du hero. */
.fdb-hero-meta p{margin:0;display:inline-flex;align-items:center;gap:.5rem;background:rgba(28,23,38,.5);padding:.4em .85em;border-radius:999px;backdrop-filter:blur(3px)}
.fdb-hero-meta .meta-date::before{content:"📅";font-size:1.05rem}
.fdb-hero-meta .meta-lieu::before{content:"📍";font-size:1.05rem}
.fdb-hero-meta .meta-lieux::before{content:"⛺";font-size:1.05rem}

/* Countdown */
.countdown{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:30px;backdrop-filter:blur(6px);color:#fff}
.countdown h3{font-family:var(--wp--preset--font-family--body);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.7);margin:0 0 1.1rem}
.cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
.cd-grid .num{font-family:var(--wp--preset--font-family--display);font-size:2.4rem;font-weight:700;color:#fff;line-height:1}
.cd-grid .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.65);margin-top:.4rem}
.cd-cell{background:rgba(0,0,0,.16);border-radius:14px;padding:14px 6px}

/* ---------------- Marquee ---------------- */
.marquee{background:var(--orange);color:var(--ink);overflow:hidden;white-space:nowrap;font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:1.05rem;padding:.7rem 0}
.marquee span{display:inline-block;animation:fdb-scroll 20s linear infinite;will-change:transform}
/* Espace (½ écran) entre la fin du contenu et sa répétition. Inclus dans chaque
   moitié dupliquée pour préserver la boucle sans couture (-50%). */
.marquee .mq-gap{display:inline-block;width:50vw}
.marquee b{margin:0 1.2rem;opacity:.55}
.marquee em{font-style:italic;font-weight:500;font-size:.82em;background:var(--indigo);color:#fff;padding:.2em .9em;border-radius:999px}
/* Boucle sans couture : le contenu est dupliqué (×2) dans le rendu du bloc,
   donc -50% ramène la 2e copie exactement à la place de la 1re. Insensible
   aux pauses (changement d'onglet) car la reprise retombe sur du contenu identique. */
@keyframes fdb-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------- Sections ---------------- */
.fdb-section-head h2{font-size:clamp(2rem,4vw,2.9rem)}
.fdb-section-head p{color:var(--muted);font-size:1.08rem}
.fdb-card{background:linear-gradient(160deg,var(--violet-soft),#fff);border:1px solid var(--line);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow)}
.fdb-card h3{color:var(--indigo)}
.fdb-tag{display:inline-block;background:var(--orange);color:var(--ink);font-weight:600;font-size:.8rem;padding:.3em .9em;border-radius:999px}
/* Images de mise en avant */
.fdb-shot{margin:0;height:100%}
.fdb-shot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.fdb-gallery{gap:18px!important}
.fdb-gallery img{border-radius:var(--radius)}
/* Image intégrée dans le contenu d'une page */
.fdb-content-img img,.entry-content .wp-block-image img{border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---------------- Stats ---------------- */
.stats-block{background:var(--indigo);color:#fff;padding:70px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .n{font-family:var(--wp--preset--font-family--display);font-size:3rem;font-weight:700;color:var(--orange);line-height:1}
.stat .t{font-weight:500;margin-top:.4rem;color:rgba(255,255,255,.82);font-size:.98rem}

/* Pastille de tarif (texte libre : « Gratuit » → vert, sinon orange) */
.pill{font-size:.78rem;font-weight:600;padding:.35em 1em;border-radius:999px;white-space:nowrap}
.pill.free{background:#e6f6ec;color:#1f8f4e}
.pill.paid{background:var(--violet-soft);color:var(--violet)}

/* ---------------- Programme : aperçu home (regroupé par date) ---------------- */
.prog-resume{display:grid;gap:18px}
.prog-rday{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 26px;transition:transform .18s ease,box-shadow .18s ease;text-decoration:none;color:inherit}
.prog-rday:hover{transform:translateX(6px);box-shadow:var(--shadow)}
.prog-rday-date{font-family:var(--wp--preset--font-family--display);font-weight:600;color:var(--violet);font-size:1.15rem}
.prog-rday-acts{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.prog-rday-acts li{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.prog-rday-acts .t{font-weight:600;color:var(--muted);font-size:.85rem;min-width:4.5rem}
.prog-rday-acts .n{font-weight:500}

/* ---------------- Programme : page détaillée (regroupé par date) ---------------- */
.prog-detail{display:grid;gap:22px}
/* scroll-margin-top : décale l'ancre sous l'en-tête sticky (~90px) */
.prog-day{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px;box-shadow:var(--shadow);scroll-margin-top:100px}
.prog-day-head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:8px}
.prog-day-head h3{margin:0;color:var(--violet);font-size:1.5rem}
.prog-acts{list-style:none;margin:0;padding:0;display:grid}
.prog-act{display:grid;grid-template-columns:120px 1fr auto;gap:20px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.prog-act:last-child{border-bottom:0;padding-bottom:0}
/* Heure + titre mis en avant par la taille et la couleur (le corps est en
   Cambria, sans vrai gras — on évite le faux-gras et la police d'affichage
   trop lourde). */
.prog-act-time{color:var(--violet);font-size:1.2rem;letter-spacing:.04em;padding-top:.2rem}
.prog-act-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.prog-act-head strong{font-weight:400;font-size:1.55rem;color:var(--indigo);line-height:1.25}
/* Badge de tarif plus grand sur la page Programme */
.prog-act .pill{font-size:.95rem;padding:.45em 1.2em}
.prog-act-lieu{color:var(--muted);font-size:.9rem}
.prog-act-detail{margin-top:.5rem;color:#46404f}
.prog-act-detail p{margin:.4rem 0}
.prog-act-detail ul{margin:.4rem 0 .4rem 1.2rem;padding:0}
.prog-act-detail li{margin:.3rem 0}
.prog-act-detail strong{color:var(--indigo)}

/* ---------------- Groupes ---------------- */
.groupes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.groupe-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;position:relative}
.groupe-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
/* Carte entièrement cliquable (archive d'une édition) : le lien du titre couvre toute la carte */
.groupe-card:has(.wp-block-post-title a){cursor:pointer}
/* Le groupe intérieur est en position:relative (layout constrained) : on le neutralise
   pour que l'overlay du lien se dimensionne sur toute la carte, image comprise. */
.groupe-card>.wp-block-group{position:static}
.groupe-card .wp-block-post-title a{text-decoration:none;color:inherit}
.groupe-card .wp-block-post-title a:hover{color:var(--violet)}
.groupe-card .wp-block-post-title a::after{content:"";position:absolute;inset:0;z-index:1}
.groupe-media img{width:100%;height:200px;object-fit:cover;display:block}
.groupe-body{padding:24px}
.groupe-pays{font-weight:600;color:var(--violet);display:flex;align-items:center;gap:.5rem}
.groupe-pays .fdb-flag{height:18px;width:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.groupe-pays .fdb-flag-emoji{font-size:1.2rem}
.groupe-card h3{margin:.3rem 0;color:var(--ink);font-size:1.3rem}
/* Titre-lien du bloc festival/groupes : toute la carte devient cliquable. */
.groupe-card .groupe-link{text-decoration:none;color:inherit}
.groupe-card .groupe-link:hover{color:var(--violet)}
.groupe-card .groupe-link::after{content:"";position:absolute;inset:0;z-index:1}
.groupe-card:has(.groupe-link){cursor:pointer}
.groupe-ville{color:var(--muted);font-size:.9rem;margin-bottom:.6rem}
.groupe-desc{color:#46404f;font-size:.97rem}
.empty-note{background:var(--violet-soft);border:1px dashed var(--violet);border-radius:var(--radius);padding:30px;text-align:center;color:var(--violet);font-weight:500}
/* Vignettes des groupes (édition courante) : image + bandeau bas drapeau + nom */
.groupes-vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.groupe-vignette{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:#fff}
.groupe-vignette .gv-media,.groupe-vignette .gv-img{position:absolute;inset:0;width:100%;height:100%}
.groupe-vignette .gv-img{object-fit:cover;transition:transform .4s ease}
.groupe-vignette .gv-media--empty{background:linear-gradient(150deg,var(--indigo),var(--violet))}
.groupe-vignette:hover .gv-img{transform:scale(1.06)}
.groupe-vignette .gv-banner{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;gap:.55rem;padding:1rem .9rem .85rem;background:linear-gradient(to top,rgba(28,23,38,.92) 12%,rgba(28,23,38,.55) 60%,transparent)}
.groupe-vignette .gv-flag{display:inline-flex;flex:0 0 auto}
.groupe-vignette .gv-flag .fdb-flag{height:20px;width:auto;display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.groupe-vignette .gv-name{font-family:var(--wp--preset--font-family--display);font-size:1.05rem;line-height:1.15;color:#fff}

/* ---------------- Éditions (countries) ---------------- */
.countries{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.country{display:block;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 20px;transition:transform .18s ease,border-color .18s ease;text-decoration:none}
.country:hover{transform:translateY(-4px);border-color:var(--orange)}
.country .flag{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:1.7rem;min-height:24px}
.country .flag .fdb-flag{height:18px;width:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.country .flag .fdb-flag-emoji{font-size:1.5rem;line-height:1}
.country .y{font-family:var(--wp--preset--font-family--display);font-weight:600;color:var(--violet);font-size:1.1rem;margin-top:.4rem}
.country .c{font-size:.86rem;color:var(--muted)}

/* ---------------- CTA billetterie ---------------- */
.fdb-cta{color:#fff;border-radius:var(--radius);overflow:hidden;background:linear-gradient(120deg,var(--orange) 0%,var(--orange-deep) 100%);padding:56px}
.fdb-cta h2{color:var(--ink)}
.fdb-cta p{color:#3a2c10;font-weight:500}
.fdb-price{text-align:center;background:var(--violet);border-radius:18px;padding:30px 24px;color:#fff}
/* Chaque tarif sur deux lignes et présenté de façon identique :
   le prix en vedette (orange), puis le public en dessous (texte plus clair). */
.fdb-amount{font-family:var(--wp--preset--font-family--display);font-size:1.9rem;font-weight:700;color:var(--orange);line-height:1.05;margin:1.2rem 0 0}
.fdb-price>.fdb-amount:first-child{margin-top:0}
.fdb-price p {color:#fff}
.fdb-who{color:rgba(255,255,255,.72);font-size:.92rem;font-weight:500;margin:.15rem 0 0}

/* ---------------- Partenaires ---------------- */
/* Grille : toutes les cartes de même largeur ; un partenaire seul sur une ligne
   garde la largeur d'une colonne (ne s'étire pas sur toute la largeur). */
.partners{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;align-items:stretch}
.partner{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center;font-weight:600;color:var(--indigo);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:.3rem;justify-content:flex-start}
/* Logo : largeur pleine + hauteur FIXE (proportion verticale constante entre
   cartes) ; object-fit:contain garde le ratio et le centre dans cette zone. */
.partner img{width:100%;height:90px;object-fit:contain;margin-bottom:.6rem}
.partner-sub{font-weight:400;color:var(--muted);font-size:.85rem}

/* ---------------- Footer ---------------- */
.fdb-footer{background:var(--ink);color:rgba(255,255,255,.78);padding:72px clamp(20px,5vw,40px) 32px}
.fdb-footer h4{color:#fff;font-size:.95rem;text-transform:uppercase;letter-spacing:.12em}
.fdb-footer a{color:rgba(255,255,255,.78);text-decoration:none}
.fdb-footer a:hover{color:var(--orange)}
.fdb-wordmark{font-family:var(--wp--preset--font-family--display);font-size:1.5rem;color:#fff;font-weight:600}
.fdb-wordmark .o{color:var(--orange);font-style:italic}
.fdb-social a{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);font-weight:600;margin-right:.5rem}
.fdb-social a:hover{background:var(--orange);color:var(--ink)}

/* ---------------- Email protégé ---------------- */
.fdb-email{font-weight:500}

/* ---------------- Carte ---------------- */
.fdb-map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);line-height:0;margin-block:1.5rem}
.fdb-map iframe{width:100%;height:420px;border:0;display:block}
@media(max-width:781px){.fdb-map iframe{height:320px}}

/* ---------------- Responsive ---------------- */
@media(max-width:781px){
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:34px 24px}
  .prog-rday{grid-template-columns:1fr;gap:10px}
  .prog-act{grid-template-columns:1fr;gap:4px}
  .fdb-cta{padding:34px 24px}
  .fdb-bar{padding-inline:18px}
}