/* ==========================================================================
   La Confrérire — feuille de style unique du site
   --------------------------------------------------------------------------
   Un seul fichier pour les 4 pages. Organisation :
     0. Polices                         5. Pied de page
     1. Variables (couleurs, mesures)   6. Page Accueil
     2. Base (typographie, liens)       7. Page La troupe
     3. Éléments communs (boutons…)     8. Page Demander un spectacle
     4. En-tête et navigation           9. Page Spectacles
   Pour changer une couleur partout dans le site, modifier la section 1.
   ========================================================================== */

/* ===== 0. POLICES ========================================================
   Les polices sont hébergées avec le site (dossier fonts/) plutôt que
   chargées depuis Google. Trois raisons :
     - la page s'affiche plus vite (aucune connexion à un autre serveur) ;
     - aucune donnée de vos visiteurs n'est envoyée à Google (RGPD) ;
     - le site continue de fonctionner si Google est inaccessible.
   Seules les 6 variantes réellement utilisées sont incluses (90 ko au total).
   font-display:swap = le texte s'affiche tout de suite dans une police
   système, puis bascule sur la bonne dès qu'elle est chargée.
   ======================================================================== */
@font-face{
  font-family:'Fraunces';src:url('../fonts/fraunces-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';src:url('../fonts/fraunces-600-italique.woff2') format('woff2');
  font-weight:600;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Fraunces';src:url('../fonts/fraunces-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Jost';src:url('../fonts/jost-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Jost';src:url('../fonts/jost-400-italique.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Jost';src:url('../fonts/jost-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}

/* ===== 1. VARIABLES ====================================================== */
:root{
  /* Couleurs */
  --cream:#f7f2e8;        /* fond principal */
  --cream-rgb:247,242,232;/* le même, décomposé, pour les transparences */
  --cream-2:#efe7d7;      /* fond de bloc légèrement plus soutenu */
  --sand:#e9dfc9;         /* bandeau de section */
  --white:#ffffff;
  --ink:#1c1917;          /* texte principal et fonds sombres */
  --ink-rgb:28,25,23;     /* le même, décomposé, pour les transparences */
  --ink-soft:#2c2724;
  --muted:#57503f;        /* texte secondaire */
  --amber:#c98a2b;        /* accent : FONDS et décor uniquement */
  --amber-texte:#93651f;  /* accent : TEXTE doré sur fond clair (lisible) */
  --amber-clair:#e0ab54;  /* accent : TEXTE doré sur fond SOMBRE (lisible) */
  --amber-clair-rgb:224,171,84;
  --amber-sable:#855b1c;  /* accent : TEXTE doré sur le bandeau sable */
  --amber-pastille:#7a5218;/* accent : TEXTE des étiquettes de l'agenda */
  --line:rgba(var(--ink-rgb),.14);

  /* Mesures */
  --wrap:1100px;          /* largeur max du contenu */
  --wrap-large:1360px;
  --radius:6px;
  --radius-lg:14px;
  --pad-x:24px;
}

/* ===== 2. BASE =========================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
/* Respecte le réglage « réduire les animations » du système. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;line-height:1.15}
a{color:inherit}
img{max-width:100%;height:auto}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x)}
.wrap-large{max-width:var(--wrap-large);margin:0 auto;padding:0 var(--pad-x)}

/* Surtitre doré présent sur toutes les pages */
.kicker{
  display:block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber-texte);font-weight:500;margin-bottom:14px;
}
.lead{font-size:1.12rem;color:var(--muted);max-width:36em}

/* Petits utilitaires d'espacement */
.mt-lg{margin-top:32px}
.mb-lg{margin-bottom:32px}
.center{margin-left:auto;margin-right:auto}
/* .pt-0 est défini plus bas, après .section : sinon le raccourci
   « padding » de .section écrase le padding-top et la règle ne sert à rien. */

/* Texte réservé aux lecteurs d'écran */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Lien « aller au contenu » pour la navigation au clavier */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--cream);padding:12px 20px;
}
.skip-link:focus{left:0}

/* ===== 3. ÉLÉMENTS COMMUNS =============================================== */
.btn{
  display:inline-block;text-decoration:none;font-weight:500;font-size:.95rem;
  letter-spacing:.05em;padding:14px 30px;border-radius:999px;
  transition:background .2s,color .2s,border-color .2s;cursor:pointer;border:none;
}
.btn-primary{background:var(--amber);color:var(--ink)}
.btn-primary:hover{background:var(--ink);color:var(--cream)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:none}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:#fff;color:var(--ink)}
/* Variantes sur fond sombre */
.home-hero .btn-ghost,
.troupe-hero .btn-ghost,
.cta-band .btn-ghost{border-color:var(--cream);color:var(--cream)}
.home-hero .btn-ghost:hover,
.troupe-hero .btn-ghost:hover,
.cta-band .btn-ghost:hover{background:var(--cream);color:var(--ink)}

/* Contour de focus clavier. Il était doré : invisible sur le bandeau doré
   de la page « Demander ». L'encre passe partout sur fond clair ; sur les
   fonds sombres, on bascule sur le crème. */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.home-hero :focus-visible,
.troupe-hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.modal :focus-visible,
.date-box :focus-visible{outline-color:var(--cream)}

.section{padding:80px 0}
.section.pt-0{padding-top:0}
.section-title{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:16px}

/* ===== 4. EN-TÊTE ET NAVIGATION ========================================== */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(var(--cream-rgb),.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(var(--ink-rgb),.08);
}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:16px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;
  letter-spacing:.02em;text-decoration:none;white-space:nowrap;
  display:flex;align-items:center;gap:12px;
}
.brand img{width:auto;height:46px;display:block}
.brand:hover{color:var(--amber)}
@media(max-width:400px){
  .brand img{height:38px}
  .brand{font-size:1rem;gap:9px}
}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-size:.92rem;letter-spacing:.04em}
.nav-links a:hover{color:var(--amber-texte)}
.nav-links a[aria-current="page"]{color:var(--amber-texte);font-weight:500}
.nav-links a.btn-resa{
  background:var(--ink);color:var(--cream);padding:8px 18px;border-radius:999px;
}
.nav-links a.btn-resa:hover{background:var(--amber);color:var(--ink)}
.nav-links a.btn-resa[aria-current="page"]{background:var(--amber);color:var(--ink)}
.burger{display:none;background:none;border:none;cursor:pointer;font-size:1.5rem;line-height:1;color:inherit}
/* Le menu déroulant ne s'active que si JavaScript a répondu (la classe « js »
   est posée sur <html> par js/site.js). Sans JavaScript, les liens restent
   simplement affichés les uns sous les autres : la navigation reste possible. */
@media(max-width:820px){
  .js .burger{display:block}
  .js .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);
    flex-direction:column;padding:20px;gap:18px;border-bottom:1px solid var(--line);
  }
  .js .nav-links.open{display:flex}
  .nav-links{flex-wrap:wrap;gap:14px 20px;justify-content:flex-end}
  .nav-inner{flex-wrap:wrap}
}

/* ===== 5. PIED DE PAGE =================================================== */
.site-footer{background:var(--ink);color:rgba(var(--cream-rgb),.7);padding:44px 0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot .foot-brand{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.1rem;color:var(--cream);
  text-decoration:none;display:inline-flex;align-items:center;gap:12px;
}
.foot .foot-brand img{width:auto;height:44px;display:block}
.foot .foot-brand:hover{color:var(--amber)}
.foot ul{display:flex;gap:24px;list-style:none;flex-wrap:wrap}
.foot a{text-decoration:none;font-size:.9rem}
.foot a:hover{color:var(--amber)}

/* ===== 6. PAGE ACCUEIL =================================================== */
.home-hero{
  position:relative;min-height:min(74vh,620px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink);
}
.home-hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 38%;
}
.home-hero .scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.25) 0%,rgba(var(--ink-rgb),.55) 55%,rgba(var(--ink-rgb),.9) 100%);
}
.home-hero .hero-content{position:relative;z-index:2;padding:0 0 64px;width:100%}
.home-hero h1{font-size:clamp(2.6rem,7vw,4.6rem);color:var(--cream);margin-bottom:10px}
.home-hero .tagline{
  font-size:clamp(1rem,2vw,1.3rem);color:rgba(var(--cream-rgb),.85);letter-spacing:.04em;
}
.hero-actions{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:820px){
  /* La photo est un panorama très large : sur un écran étroit on l'affiche
     en entier (object-fit:contain) plutôt que d'en couper les deux tiers.
     Ses bords sombres se fondent dans le fond noir du bandeau. */
  .home-hero{min-height:430px;align-items:flex-end}
  .home-hero img{object-fit:contain;object-position:center 6%}
  .home-hero .scrim{
    background:linear-gradient(180deg,rgba(var(--ink-rgb),0) 0%,rgba(var(--ink-rgb),0) 42%,rgba(var(--ink-rgb),.85) 62%,rgba(var(--ink-rgb),.97) 100%);
  }
  .home-hero .hero-content{padding-bottom:30px}
}


.intro-troupe{padding:80px 0 72px}
/* Le bouton est un inline-block : la ligne de texte qui le contient ajoute
   une trentaine de pixels de vide sous lui. display:flex supprime ce vide
   sans toucher à la hauteur du bouton (contrairement à line-height:0,
   qui l'aplatirait). */
.intro-troupe p.mt-lg{display:flex;align-items:flex-start}
.intro-troupe h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:22px;max-width:18em}
.intro-troupe p+p{margin-top:18px}

/* Mosaïque « Un peu de nous » : les photos sont présentées comme des
   polaroids — cadre blanc, légère inclinaison, redressement au survol. */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}
.mosaic figure{
  margin:0;background:#fff;padding:12px 12px 44px;border-radius:2px;
  box-shadow:0 14px 34px -16px rgba(var(--ink-rgb),.45);transition:transform .25s ease;
}
.mosaic figure:nth-child(1){transform:rotate(-2deg)}
.mosaic figure:nth-child(2){transform:rotate(1.2deg)}
.mosaic figure:nth-child(3){transform:rotate(-.8deg)}
.mosaic figure:hover{transform:rotate(0) translateY(-6px)}
/* Format carré : les 3 photos n'ont pas le même cadrage à l'origine
   (une verticale, une carrée, une panoramique). Le carré est le seul
   format qui les recadre toutes sans couper de visage. */
.mosaic img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.mosaic img[src*="groupe-chill"]{object-position:center 42%}
@media(max-width:820px){.mosaic{grid-template-columns:1fr 1fr}.mosaic figure:last-child{grid-column:span 2}}
@media(max-width:520px){.mosaic{grid-template-columns:1fr}.mosaic figure:last-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){
  .mosaic figure{transition:none}
  .mosaic figure:hover{transform:none}
}

.cta-band{background:var(--ink);color:var(--cream);padding:80px 0;text-align:center}
.cta-band .kicker{color:var(--amber-clair)}
.cta-band h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:18px}
.cta-band .lead{color:rgba(var(--cream-rgb),.8);margin:0 auto 32px}

.insta{padding:80px 0;text-align:center}
.insta h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:20px}
.insta-link{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--amber-texte);font-weight:500;letter-spacing:.04em;margin-bottom:40px;
}
.insta-link:hover{color:var(--ink)}
/* Vignettes Instagram : volontairement sobres — ni cadre blanc ni
   inclinaison, pour ne pas concurrencer la mosaïque plus haut. */
.insta-collage{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.insta-photo{
  display:block;border-radius:var(--radius);overflow:hidden;
  background:var(--cream-2);
}
.insta-photo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
@media(max-width:700px){.insta-collage{grid-template-columns:1fr 1fr}}

/* ===== 7. PAGE LA TROUPE ================================================= */
.troupe-hero{
  position:relative;min-height:600px;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink);
}
/* Le cadrage vise les silhouettes, situées dans le bas de la photo d'origine :
   sans cela, l'image est rognée sur le plafond du tunnel et le groupe disparaît. */
.troupe-hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 85%;
}
.troupe-hero .scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),0) 0%,rgba(var(--ink-rgb),.12) 45%,rgba(var(--ink-rgb),.75) 80%,rgba(var(--ink-rgb),.95) 100%);
}
.troupe-hero .hero-content{position:relative;z-index:2;padding:0 0 44px;width:100%}
/* Sur mobile la photo tient en hauteur : on recentre normalement. */
@media(max-width:820px){
  .troupe-hero{min-height:min(62vh,520px)}
  .troupe-hero img{object-position:center center}
}
.troupe-hero .kicker{color:var(--amber-clair)}
.troupe-hero h1{font-size:clamp(2.4rem,6.5vw,4rem);color:var(--cream)}
.troupe-hero h1 em{font-style:italic;color:var(--amber-clair)}

/* Le paragraphe utilise la classe .lead, comme les textes d'introduction
   des autres pages : même police, même taille, même couleur. */
.manifesto{padding:72px 0 40px}

.roster{padding:24px 0 100px}
.roster-head{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;
  gap:12px;margin-bottom:36px;
}
.roster-head h2{font-size:clamp(1.6rem,3vw,2.1rem)}

.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.grid{grid-template-columns:1fr}}

.card{
  position:relative;cursor:pointer;border:none;padding:0;width:100%;text-align:left;
  border-radius:var(--radius-lg);overflow:hidden;background:var(--ink-soft);
  aspect-ratio:3/4.1;font:inherit;color:inherit;
  transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(var(--ink-rgb),.6)}
.card-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.05);transition:filter .3s ease;
}
.card:hover .card-photo{filter:grayscale(.15) contrast(1.02)}
.card-nameplate{
  position:absolute;left:0;right:0;bottom:0;padding:16px 14px;z-index:2;
  background:linear-gradient(0deg,rgba(var(--ink-rgb),.92) 10%,transparent 100%);
}
.card-name{
  font-family:'Fraunces',serif;font-size:1.1rem;color:var(--cream);
  font-weight:600;line-height:1.2;
}
.card-hint{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);
  background:rgba(var(--ink-rgb),.6);border:1px solid rgba(var(--amber-clair-rgb),.55);
  padding:4px 9px;border-radius:20px;opacity:0;transition:opacity .2s ease;
}
.card:hover .card-hint,.card:focus-visible .card-hint{opacity:1}
@media(prefers-reduced-motion:reduce){
  .card,.card-photo,.card-hint{transition:none}
  .card:hover{transform:none}
}

/* Fiche membre (fenêtre) */
.modal-overlay{
  position:fixed;inset:0;background:rgba(var(--ink-rgb),.82);display:flex;
  align-items:center;justify-content:center;padding:24px;z-index:100;
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.modal-overlay.is-open{opacity:1;visibility:visible}
.modal{
  position:relative;display:flex;width:100%;max-width:920px;max-height:86vh;
  background:var(--cream);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.modal-text{flex:1 1 50%;padding:44px 38px;overflow-y:auto}
.modal-text:focus-visible{outline-offset:-3px}
.modal-text h3{font-size:1.65rem;margin-bottom:14px}
.modal-text p{font-size:1rem;line-height:1.7;color:var(--muted)}
.modal-photo{flex:1 1 50%;min-height:320px;background:var(--sand)}
.modal-photo img{width:100%;height:100%;object-fit:cover;display:block}
.modal-close{
  position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(var(--cream-rgb),.5);background:var(--ink);color:#fff;
  font-size:20px;line-height:1;cursor:pointer;z-index:3;
}
.modal-close:hover{background:var(--amber);border-color:var(--amber)}
@media(max-width:720px){
  .modal{flex-direction:column;max-height:90vh}
  .modal-photo{order:-1;min-height:220px;flex:0 0 auto}
  .modal-text{padding:28px 24px}
}

/* ===== 8. PAGE DEMANDER UN SPECTACLE ===================================== */
.demande-hero{padding:72px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.demande-hero h1{font-size:clamp(2.2rem,4.5vw,3.4rem);margin-bottom:22px}
.demande-hero h1 em{font-style:italic;color:var(--amber)}
.hero-cta{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-photo{margin:0}
.hero-photo img{
  width:100%;display:block;border-radius:var(--radius);
  box-shadow:0 24px 60px -20px rgba(var(--ink-rgb),.4);transform:rotate(1.5deg);
}
.hero-photo figcaption{margin-top:20px;font-size:.95rem;color:var(--muted);font-style:italic;text-align:right}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:40px}}

/* Le fond sable est plus soutenu que le crème :
   le doré du surtitre doit y être un cran plus dense pour rester lisible. */
.trust{background:var(--sand);padding:80px 0}
.trust .kicker{color:var(--amber-sable)}
.trust-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.trust img{
  width:100%;display:block;border-radius:var(--radius);transform:rotate(-1.5deg);
  box-shadow:0 24px 60px -24px rgba(var(--ink-rgb),.45);
}
@media(max-width:860px){.trust-grid{grid-template-columns:1fr}}

.formats{padding:80px 0}
.formats .lead{margin-bottom:48px}
.format{
  display:grid;grid-template-columns:280px 1fr;gap:40px;padding:36px 0;
  border-top:1px solid var(--line);align-items:center;
}
.format:last-child{border-bottom:1px solid var(--line)}
.format .visual{
  border-radius:var(--radius);overflow:hidden;aspect-ratio:40/21;
  box-shadow:0 10px 30px -14px rgba(var(--ink-rgb),.35);
}
.format .visual img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:auto}
.format .visual.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;font-family:'Fraunces',serif;
}
.tile-combien{background:var(--amber);color:var(--ink)}
.tile-mesure{background:var(--ink);color:var(--amber-clair)}
.format .visual.tile b{font-size:2.4rem;font-weight:700;letter-spacing:.04em}
.format .visual.tile span{
  font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.85;
}
.format h3{font-size:1.5rem;margin-bottom:8px}
.tag{
  display:inline-block;vertical-align:middle;margin-left:10px;
  font-family:'Jost',sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;background:var(--amber);color:var(--ink);padding:4px 10px;border-radius:999px;
}
.format p{color:var(--muted);max-width:40em;font-size:1.05rem}
@media(max-width:700px){.format{grid-template-columns:1fr;gap:14px}}

.pratique{padding:0 0 80px}
.pratique-box{
  background:var(--cream-2);border-radius:var(--radius);padding:44px 48px;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
}
.pratique-box h3{font-size:1.2rem;margin-bottom:10px}
.pratique-box h3::before{content:"— ";color:var(--amber)}
.pratique-box p{font-size:1.05rem;color:var(--muted)}
@media(max-width:700px){.pratique-box{grid-template-columns:1fr;padding:32px 28px}}

.contact{background:var(--amber);color:var(--ink);padding:80px 0;text-align:center}
.contact h2{font-size:clamp(1.9rem,3.5vw,2.6rem);margin-bottom:18px}
.contact p{max-width:36em;margin:0 auto 36px;font-size:1.08rem;color:var(--ink)}
.contact .btn-dark{font-size:1.05rem;padding:16px 38px}
.mail-plain{display:block;margin-top:18px;font-size:.9rem;color:var(--ink)}
.mail-plain a{color:var(--ink)}
.copy-btn{
  margin-left:10px;background:rgba(255,255,255,.5);border:1px solid var(--ink);
  color:var(--ink);font-family:'Jost',sans-serif;font-size:.78rem;letter-spacing:.04em;
  padding:5px 14px;border-radius:999px;cursor:pointer;
  display:none;   /* affiché par js/site.js si le navigateur sait copier */
}
.copy-btn:hover{background:var(--ink);color:var(--cream)}

.logos{padding:80px 0 64px;text-align:center}
.logos h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:44px}
.logo-grid{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap}
/* Chaque logo est un lien vers le site du partenaire. */
.logo-ph{
  width:160px;height:80px;display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:var(--radius);padding:12px 18px;
  box-shadow:0 4px 16px -8px rgba(var(--ink-rgb),.18);
  filter:grayscale(1);opacity:.85;
  transition:filter .2s,opacity .2s,transform .2s,box-shadow .2s;
}
.logo-ph:hover,.logo-ph:focus-visible{
  filter:grayscale(0);opacity:1;transform:translateY(-3px);
  box-shadow:0 10px 22px -10px rgba(var(--ink-rgb),.3);
}
.logo-ph img{max-width:100%;max-height:100%;object-fit:contain}
.logos .next{margin-top:44px;font-size:1.05rem;color:var(--muted)}
.logos .next a{color:var(--amber-texte);font-weight:500;text-decoration:none;border-bottom:1.5px solid var(--amber-texte)}

/* ===== 9. PAGE SPECTACLES ================================================ */
.page-head{padding:72px 0 40px}
.page-head h1{font-size:clamp(2.2rem,4.5vw,3.4rem);margin-bottom:20px}
.page-head h1 em{font-style:italic;color:var(--amber)}

.agenda{padding:32px 0 40px}
.agenda-list{list-style:none;display:grid;gap:0}
.date{
  display:grid;grid-template-columns:120px 1fr auto;gap:32px;align-items:center;
  padding:28px 0;border-top:1px solid var(--line);
}
.date:last-child{border-bottom:1px solid var(--line)}
.date-box{
  background:var(--ink);color:var(--cream);border-radius:var(--radius);
  padding:14px 10px;text-align:center;font-family:'Fraunces',serif;line-height:1.15;
}
.date-box .jour{display:block;font-size:1.9rem;font-weight:700;color:var(--amber-clair)}
.date-box .mois{
  display:block;font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;margin-top:4px;color:rgba(var(--cream-rgb),.8);
}
.date h3{font-size:1.3rem;margin-bottom:4px}
.date .lieu{color:var(--muted);font-size:.98rem}
.date .statut{
  display:inline-block;margin-top:8px;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 12px;border-radius:999px;
  background:rgba(147,101,31,.10);color:var(--amber-pastille);font-weight:500;
}
.billetterie{grid-column:1 / -1;margin-top:4px}
.billetweb-frame{
  display:block;width:100%;min-height:680px;border:0;border-radius:var(--radius);
  background:var(--cream-2);
}
.billetterie-multi{margin:28px 0 8px}
@media(max-width:720px){
  .date{grid-template-columns:88px 1fr;gap:20px}
  .date .btn{grid-column:1 / -1;justify-self:start}
}

.empty-agenda{
  background:var(--cream-2);border-radius:var(--radius);padding:44px 48px;text-align:center;
}
.empty-agenda h2{font-size:1.4rem;margin-bottom:12px}

.lieux{padding:24px 0 80px}
.lieux-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px}
/* Chaque salle : son logo à gauche, cliquable vers son site. */
.lieu-card{
  background:var(--white);border-radius:var(--radius);padding:28px;
  box-shadow:0 6px 24px -12px rgba(var(--ink-rgb),.15);
  display:flex;gap:24px;align-items:center;
}
/* Les deux logos n'ont pas les mêmes proportions : on les cale sur une même
   hauteur et on les centre, plutôt que sur une même largeur. */
.lieu-logo{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:92px;height:92px;border-radius:var(--radius);overflow:hidden;
  transition:transform .2s;
}
.lieu-logo:hover{transform:translateY(-3px)}
.lieu-logo img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.lieu-card h3{font-size:1.2rem;margin-bottom:8px;line-height:1.25}
.lieu-card h3 a{text-decoration:none}
.lieu-card h3 a:hover{color:var(--amber-texte)}
.lieu-card p{font-size:.98rem;color:var(--muted)}
@media(max-width:520px){.lieu-card{flex-direction:column;text-align:center;gap:16px}}
@media(max-width:700px){.lieux-grid{grid-template-columns:1fr}}


/* ===== 10. IMPRESSION ====================================================
   Par défaut, le navigateur n'imprime pas les fonds : les textes clairs
   posés sur des fonds sombres deviendraient invisibles. On repasse donc
   tout en noir sur blanc, on masque ce qui n'a pas de sens sur papier,
   et on fait suivre l'adresse des liens.
   ======================================================================== */
@media print{
  *{background:transparent !important;color:#000 !important;
    box-shadow:none !important;text-shadow:none !important;filter:none !important}
  body{font-size:11pt;line-height:1.4}
  .site-nav,.burger,.skip-link,.hero-actions,.hero-cta,.copy-btn,
  .modal-overlay,.insta-collage,.insta-link,.logo-grid{display:none !important}
  /* en flex, l'image et le titre se retrouvent côte à côte : on repasse
     en bloc pour que le titre se pose sous la photo. */
  .home-hero,.troupe-hero{display:block;min-height:auto;background:none}
  .home-hero img,.troupe-hero img{position:static;height:auto;max-height:8cm;object-fit:contain}
  .home-hero .scrim,.troupe-hero .scrim{display:none}
  .home-hero .hero-content,.troupe-hero .hero-content{padding:12pt 0 0}
  .home-hero .wrap,.troupe-hero .wrap-large{padding:0}
  .card,.mosaic figure,.hero-photo img,.trust img{transform:none !important}
  .grid{grid-template-columns:repeat(3,1fr)}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
  a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:9pt}
  .date,.format,.lieu-card,.pratique-box,figure{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
}