/* =========================================================
   ODTR — Base (toutes les pages, hors expérience cinématique).
   Tokens partagés + éléments réutilisables (boutons, en-tête,
   pied) pour les gabarits de blocs. Les tokens dupliquent
   theme.json pour être disponibles dans cine.css / saison.css.
   ========================================================= */
:root{
  --bleu:#020071; --bleu-nuit:#01003a; --bleu-encre:#050427; --fond:#01002a;
  --vert:#899E0D; --vert-moyen:#A5B447; --vert-clair:#C3CD83;
  --gris-clair:#DBDBD8; --creme:#FAF9F5; --or:#D8B46A;
  --rouge:#C42E4E; --rouge-fonce:#A8203F;
  --ui:'Montserrat',system-ui,sans-serif; --serif:'Fraunces',Georgia,serif;
}
*{box-sizing:border-box}
body{background:var(--fond);color:#fff;font-family:var(--ui);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--vert);color:var(--bleu)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em}

/* Accessibilité */
.skip-link{position:absolute;left:-999px;top:0;z-index:600;background:#fff;color:var(--bleu);padding:.7rem 1.1rem}
.skip-link:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--vert-clair);outline-offset:3px}

/* Boutons réutilisables (patterns & contenus) */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:15px 28px;border-radius:3px;border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .3s,background .3s,color .3s,border-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn-vert{background:var(--vert);color:var(--bleu);border-color:var(--vert)}
.btn-vert:hover{background:var(--vert-clair);border-color:var(--vert-clair)}
.btn-ligne{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ligne:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* En-tête standard (pages internes) */
.site-entete{position:sticky;top:0;z-index:50;padding:18px clamp(20px,4vw,56px);gap:2rem;
  background:linear-gradient(180deg,rgba(1,0,42,.92),rgba(1,0,42,.55));backdrop-filter:blur(10px)}
.site-entete .wp-block-site-title a{font-family:var(--serif);font-size:1.4rem;color:#fff;text-decoration:none}
.site-entete .wp-block-navigation a{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}

/* Contenu standard */
main{padding:clamp(30px,6vw,70px) 0}
/* Pages immersives (bloc Saison / scènes) : pas de marge autour des scènes */
main:has(.odtr-saison),main:has(.scene){padding:0}

/* Pied standard */
.site-pied{padding:clamp(40px,7vw,80px) clamp(20px,4vw,56px);background:var(--bleu-nuit);
  border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.site-pied a:hover{color:#fff}

/* Cartes de liste (archives spectacles/nouvelles) */
.odtr-liste .wp-block-post-title{font-size:1.5rem}
.odtr-liste .wp-block-post-featured-image img{border-radius:10px}

/* Navigation mobile (panneau natif) — fond bleu de la charte */
.wp-block-navigation__responsive-container.is-menu-open{background:var(--bleu)}
.wp-block-navigation__responsive-container.is-menu-open a{color:#fff;font-size:1.15rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{color:#fff}

/* Fiche spectacle : bloc info rapide (date · heure · lieu · prix) */
.odtr-info-rapide{display:flex;flex-wrap:wrap;gap:10px 28px;border-top:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(255,255,255,.15);padding:16px 0;margin:20px 0}
.odtr-info-rapide p{margin:0;font-weight:600;color:var(--vert-clair)}

/* Boutons « contour » : même gabarit que les boutons pleins
   (le style core réduit leur padding — on le réaligne sur theme.json) */
.wp-block-button.is-style-outline>.wp-block-button__link{padding:15px 28px;border-width:1.5px}

/* ---------- Fiches (spectacle / nouvelle) — habillage maquette ---------- */
main:has(.fiche-hero){padding:0 0 clamp(40px,6vw,80px)}
.fiche-hero.wp-block-cover{min-height:64vh;display:flex;align-items:flex-end;
  padding:120px clamp(24px,6vw,90px) clamp(36px,6vh,60px)}
.fiche-hero .wp-block-cover__inner-container{max-width:900px;width:100%;margin:0 auto}
.fiche-hero h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.02;letter-spacing:-.01em;margin:12px 0 0}
/* classes partagées avec les maquettes (mêmes valeurs que cine.css) */
.eyebrow{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--vert-clair)}
.compo{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2vw,1.4rem);color:var(--vert-clair);margin:12px 0 0}
.fiche-hero .wp-block-post-terms{display:inline-block;border:1px solid rgba(195,205,131,.5);color:var(--vert-clair);
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:40px;
  background:rgba(1,0,42,.35);margin-bottom:6px}
.fiche-hero .wp-block-post-terms a{color:inherit;text-decoration:none}
.fiche-hero .wp-block-post-date{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.75);margin-top:14px}
/* méta Quand / Heure / Lieu / Billets */
.fiche-meta{display:flex;gap:clamp(20px,3vw,34px);flex-wrap:wrap;margin-top:22px}
.fiche-meta .fm{display:flex;flex-direction:column;gap:4px}
.fiche-meta .fm-label{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--vert-clair);font-weight:700;margin:0}
.fiche-meta .fm-val{font-size:.96rem;font-weight:500;color:#fff;margin:0}
.fiche-hero .wp-block-buttons{margin-top:26px}
/* corps de la fiche — même colonne (900px, centrée par le layout contraint)
   que le texte de la bannière et le footer. Ne PAS surcharger les marges des
   enfants : WordPress centre chaque bloc individuellement (margin auto). */
.fiche-contenu{margin-top:clamp(30px,5vw,50px)}
.fiche-contenu p{color:rgba(255,255,255,.9);font-weight:300;font-size:1.05rem;line-height:1.7}
@media(max-width:960px){.fiche-contenu,.fiche-retour{padding-inline:clamp(20px,5vw,40px)}}
.fiche-contenu h2,.fiche-contenu h3{margin-top:1.6em}
.fiche-contenu blockquote{border-left:3px solid var(--vert);padding-left:20px;font-family:var(--serif);font-style:italic}
.fiche-retour{margin-top:clamp(28px,4vw,44px)}
.fiche-retour a{color:var(--vert-clair);text-decoration:none;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.fiche-retour a:hover{color:#fff}

/* Réseaux sociaux fixes (partie de modèle « Réseaux sociaux »)
   Sélecteurs renforcés : le style « logos seulement » du bloc core ajoute
   un padding à l'ancre et le SVG s'aligne sur la ligne de base → icône
   décentrée dans le cercle. On verrouille le centrage. */
ul.wp-block-social-links.social-fixe{position:fixed;right:26px;bottom:26px;z-index:40;display:flex;gap:12px;margin:0;padding:0}
.wp-block-social-links.social-fixe .wp-block-social-link{width:38px;height:38px;border:1px solid rgba(255,255,255,.3);
  border-radius:50%;margin:0;transition:.3s;background:none;overflow:hidden}
.wp-block-social-links.social-fixe .wp-block-social-link:hover{border-color:var(--vert)}
.wp-block-social-links.social-fixe .wp-block-social-link a,
.wp-block-social-links.social-fixe .wp-block-social-link .wp-block-social-link-anchor{
  width:100%;height:100%;padding:0;margin:0;display:grid;place-items:center;line-height:0;color:#fff}
.wp-block-social-links.social-fixe .wp-block-social-link svg{display:block;width:16px;height:16px}
@media(max-width:820px){ul.wp-block-social-links.social-fixe{right:18px;bottom:18px}}