/*
Theme Name:   Dyanako
Description:  Thème dédié de l'association Dyanako — danses traditionnelles d'Afrique de l'Ouest à Saint-Étienne. Formes organiques, tissu wax, rythme de tambours. Fonctionne avec le plugin « Dyanako Contenu » pour la gestion des textes, de l'agenda et des vidéos.
Author:       Association Dyanako
Version:      1.3.2
Text Domain:  dyanako
*/

/* ==========================================================================
   DYANAKO — la terre, le wax, le tambour.
   ========================================================================== */
:root{
  --nuit:      #2B1708;
  --ecorce:    #5A3316;
  --orange:    #E8821E;
  --orange-f:  #C96812;
  --soleil:    #F5C232;
  --vert:      #3B9A44;
  --vert-f:    #1F6B2C;
  --coton:     #FBF1DC;
  --blanc:     #FFFDF6;
  --rose-terre:#D95D39;
  --pas: clamp(1rem, 3vw, 2rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Work Sans',system-ui,sans-serif;
  color:var(--nuit);
  background:var(--coton);
  line-height:1.7;
  font-size:1.0625rem;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--vert-f)}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

h1,h2{font-family:'Amatic SC',cursive;font-weight:700;letter-spacing:.04em;line-height:1.12;letter-spacing:.01em}
h3{font-family:'Work Sans',sans-serif;font-weight:700}
.eyebrow{
  font-family:'Special Elite',monospace;
  font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;
  display:inline-block;margin-bottom:.7rem;
  transform:rotate(-1.5deg);
}
.titre-pinceau{position:relative;display:inline-block}
.titre-pinceau::after{
  content:"";position:absolute;left:-2%;right:-4%;bottom:-.18em;height:.32em;
  background:currentColor;opacity:.28;border-radius:60% 40% 55% 45%/70% 55% 45% 60%;
  transform:rotate(-1deg);z-index:-1;
}

section{padding:clamp(3.5rem,8vw,6rem) var(--pas)}
.wrap{max-width:1080px;margin:0 auto}

/* ------- formes & animations ------- */
.vague{display:block;width:100%;height:70px;margin:-1px 0}
.vague svg{display:block;width:100%;height:100%}
.soleil-badge{position:absolute;width:92px;height:92px;pointer-events:none;animation:tourne 26s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes ondule{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.5deg)}}
@keyframes pulse-tambour{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.rythme{display:flex;gap:.6rem;justify-content:center;padding:1.3rem 0;flex-wrap:wrap;list-style:none}
.rythme span{width:10px;height:10px;border-radius:50%;background:var(--orange);animation:pulse-tambour 1.6s ease-in-out infinite}
.rythme span:nth-child(2n){background:var(--vert);animation-delay:.2s}
.rythme span:nth-child(3n){background:var(--soleil);animation-delay:.4s}
.rythme span:nth-child(5n){background:var(--rose-terre);animation-delay:.6s;width:15px;height:15px}
.rythme span:nth-child(7n){background:var(--nuit);animation-delay:.1s}

/* ------- navigation ------- */
.site-nav{
  position:sticky;top:0;z-index:60;
  background:var(--nuit);color:var(--coton);
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem var(--pas);gap:1rem;flex-wrap:wrap;
  border-bottom:4px solid var(--orange);
}
.site-nav .logo{
  font-family:'Amatic SC',cursive;font-size:1.5rem;color:var(--soleil);
  text-decoration:none;transform:rotate(-2deg);display:inline-block;
}
.site-nav ul{display:flex;gap:1.25rem;list-style:none;flex-wrap:wrap}
.site-nav ul a{color:var(--coton);text-decoration:none;font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;position:relative;padding-bottom:3px}
.site-nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--soleil);border-radius:3px;transition:right .2s ease}
.site-nav ul a:hover::after{right:0}
.admin-bar .site-nav{top:32px}
@media(max-width:782px){.admin-bar .site-nav{top:46px}}

/* ------- hero ------- */
.hero{
  position:relative;overflow:hidden;color:var(--blanc);
  background:
    radial-gradient(circle at 82% 12%, var(--soleil) 0 110px, transparent 111px),
    linear-gradient(128deg, var(--vert) 0 44%, var(--orange) 44% 100%);
  padding:clamp(4.5rem,10vw,7.5rem) var(--pas) clamp(6rem,12vw,9rem);
}
.hero .wax{position:absolute;inset:-5%;width:110%;height:110%;pointer-events:none;opacity:.5;mix-blend-mode:soft-light}
.hero .inner{position:relative;max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:center}
@media(max-width:840px){.hero .inner{grid-template-columns:1fr}}
.hero .eyebrow{color:var(--soleil);background:rgba(0,0,0,.3);padding:.35rem .9rem;border-radius:999px}
.hero h1{
  font-size:clamp(2.5rem,6.8vw,4.7rem);
  max-width:15ch;
  text-shadow:3px 3px 0 rgba(43,23,8,.35);
  transform:rotate(-1.2deg);
}
.hero h1 em{font-style:normal;color:var(--soleil)}
.hero p.sous{max-width:50ch;margin:1.5rem 0 2.2rem;font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:500}
.hero-photo{
  position:relative;width:min(380px,80vw);margin:0 auto;
  animation:flotte 7s ease-in-out infinite;
}
.hero-photo img{
  width:100%;aspect-ratio:1;object-fit:cover;object-position:60% 30%;
  border-radius:56% 44% 52% 48%/50% 56% 44% 50%;
  border:6px solid var(--coton);
  box-shadow:12px 14px 0 rgba(43,23,8,.35);
  transform:rotate(-1.5deg);
}
.hero-photo .soleil-badge{top:-24px;left:-14px}
.btn{
  display:inline-block;background:var(--nuit);color:var(--soleil);
  font-family:'Amatic SC',cursive;font-size:1.05rem;
  padding:.85rem 1.7rem;text-decoration:none;
  border-radius:55% 45% 50% 50%/60% 55% 45% 50%;
  transform:rotate(-1.5deg);
  transition:transform .18s ease;
  box-shadow:4px 5px 0 rgba(43,23,8,.35);
  border:0;cursor:pointer;
}
.btn:hover{transform:rotate(1deg) scale(1.05)}
.btn.clair{background:var(--coton);color:var(--nuit);margin-left:.9rem;transform:rotate(1.2deg)}
.btn.clair:hover{transform:rotate(-1deg) scale(1.05)}
.hero-badges{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.3rem;list-style:none}
.hero-badges span{
  background:rgba(43,23,8,.4);border:2px solid rgba(255,253,246,.6);
  padding:.4rem 1rem;font-size:.85rem;font-weight:600;letter-spacing:.04em;border-radius:999px;
  transform:rotate(-1deg);
}
.hero-badges span:nth-child(2n){transform:rotate(1.4deg)}

/* ------- association / burkina ------- */
.deuxcol{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
@media(max-width:840px){.deuxcol{grid-template-columns:1fr}}
.section-association h2,.section-burkina h2{font-size:clamp(1.9rem,4.5vw,2.9rem);margin-bottom:1.2rem;color:var(--ecorce)}
.section-association p,.section-burkina p{margin-bottom:1rem;max-width:60ch}

.calebasse{
  background:var(--soleil);
  border-radius:58% 42% 55% 45%/52% 58% 42% 48%;
  padding:clamp(2rem,4vw,3rem) clamp(1.8rem,4vw,2.8rem);
  transform:rotate(1.6deg);
  box-shadow:10px 12px 0 rgba(232,130,30,.45);
  animation:flotte 7s ease-in-out infinite;
}
.calebasse h3{font-family:'Amatic SC',cursive;font-weight:700;letter-spacing:.04em;font-size:1.25rem;margin-bottom:.9rem;color:var(--ecorce);transform:rotate(-1deg)}
.calebasse ul{list-style:none}
.calebasse li{padding:.4rem 0;font-size:.98rem;display:flex;gap:.6rem;align-items:baseline}
.calebasse li::before{content:"●";color:var(--rose-terre);font-size:.7rem;flex:none;transform:translateY(-2px)}
.calebasse li strong{font-family:'Special Elite',monospace;font-weight:400;color:var(--vert-f)}
.calebasse.verte{background:#CBE6C4;box-shadow:10px 12px 0 rgba(59,154,68,.4);transform:rotate(-1.4deg)}
.calebasse.verte h3{color:var(--vert-f)}

/* ------- seydou ------- */
.section-seydou{background:var(--nuit);color:var(--coton);position:relative;overflow:hidden}
.section-seydou::before{
  content:"";position:absolute;width:560px;height:560px;border-radius:50%;
  border:2px dashed rgba(245,194,50,.25);top:-180px;right:-160px;
  animation:tourne 60s linear infinite;
}
.section-seydou .eyebrow{color:var(--soleil)}
.section-seydou h2{font-size:clamp(2rem,5vw,3.1rem);color:var(--soleil);margin-bottom:1.2rem;transform:rotate(-.8deg)}
.section-seydou p{margin-bottom:1rem;max-width:60ch;color:#EFE2C8}
.portrait-cercle{position:relative;width:min(340px,80vw);margin:0 auto}
.portrait-cercle img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:50%;border:6px solid var(--orange);
  box-shadow:0 0 0 14px var(--vert), 14px 18px 0 14px rgba(0,0,0,.35);
}
.portrait-cercle .soleil-badge{top:-28px;right:-16px}
.parcours{margin-top:1.6rem;display:grid;gap:.7rem}
.parcours div{
  display:flex;gap:.9rem;align-items:baseline;
  border-left:4px solid var(--orange);padding:.15rem 0 .15rem 1rem;border-radius:3px;
}
.parcours div:nth-child(2n){border-color:var(--vert)}
.parcours div:nth-child(3n){border-color:var(--soleil)}
.parcours strong{font-family:'Special Elite',monospace;color:var(--soleil);white-space:nowrap;font-weight:400}

/* ------- cours ------- */
.section-cours{background:var(--orange);color:var(--nuit);position:relative;overflow:hidden}
.section-cours .eyebrow{color:var(--nuit);background:rgba(255,253,246,.5);padding:.3rem .8rem;border-radius:999px}
.section-cours h2{font-size:clamp(2rem,5vw,3.1rem);margin-bottom:2.4rem;color:var(--blanc);text-shadow:2px 3px 0 rgba(43,23,8,.3);transform:rotate(-1deg)}
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(1.4rem,3vw,2.2rem)}
.carte{
  background:var(--blanc);
  padding:1.9rem 1.7rem;
  border-radius:54% 46% 50% 50%/12% 14% 13% 12%;
  box-shadow:7px 9px 0 rgba(43,23,8,.3);
  transform:rotate(-1.2deg);
  transition:transform .18s ease;
}
.carte:nth-child(2){transform:rotate(1.1deg);background:var(--coton)}
.carte:nth-child(3){transform:rotate(-0.6deg)}
.carte:hover{transform:rotate(0) scale(1.03)}
.carte h3{
  font-family:'Amatic SC',cursive;font-weight:700;letter-spacing:.04em;font-size:1.2rem;margin-bottom:.9rem;
  color:var(--vert-f);display:flex;align-items:center;gap:.55rem;
}
.carte h3 .puce{width:16px;height:16px;border-radius:50%;background:var(--vert);flex:none;animation:pulse-tambour 1.6s ease-in-out infinite}
.carte:nth-child(2) h3{color:var(--orange-f)}
.carte:nth-child(2) h3 .puce{background:var(--soleil);animation-delay:.3s}
.carte:nth-child(3) h3{color:var(--rose-terre)}
.carte:nth-child(3) h3 .puce{background:var(--rose-terre);animation-delay:.6s}
.carte ul{list-style:none}
.carte li{padding:.35rem 0;font-size:.98rem}
.mention{
  margin-top:2.2rem;font-family:'Special Elite',monospace;font-size:1rem;
  color:var(--blanc);transform:rotate(-1deg);display:inline-block;
  background:rgba(43,23,8,.35);padding:.6rem 1.2rem;border-radius:999px;
}

/* ------- agenda ------- */
.section-agenda h2{font-size:clamp(2rem,5vw,3.1rem);margin-bottom:2.4rem;color:var(--ecorce)}
.evenements{display:grid;gap:1.6rem}
.evenement{
  display:grid;grid-template-columns:120px 1fr auto;gap:1.4rem;align-items:center;
  background:var(--blanc);
  border-radius:24px 26px 22px 28px/26px 22px 28px 24px;
  padding:1.3rem 1.5rem;
  box-shadow:6px 7px 0 rgba(90,51,22,.22);
  transform:rotate(-.7deg);
  transition:transform .18s ease;
}
.evenement:nth-child(2n){transform:rotate(.8deg)}
.evenement:hover{transform:rotate(0) scale(1.015)}
@media(max-width:680px){.evenement{grid-template-columns:1fr;gap:.6rem}}
.date-bloc{
  font-family:'Amatic SC',cursive;text-align:center;color:var(--blanc);
  background:var(--vert);padding:.7rem .4rem;line-height:1.1;
  border-radius:50% 50% 46% 54%/55% 52% 48% 45%;
  transform:rotate(-2.5deg);
}
.evenement:nth-child(2n) .date-bloc{background:var(--orange);transform:rotate(2deg)}
.evenement:nth-child(3n) .date-bloc{background:var(--rose-terre)}
.date-bloc .jour{font-size:1.75rem;display:block}
.date-bloc .mois{font-size:.8rem;letter-spacing:.06em;font-family:'Work Sans',sans-serif;font-weight:700;text-transform:uppercase}
.evenement h3{font-size:1.15rem}
.evenement p{font-size:.95rem;color:var(--ecorce)}
.evenement p a{font-weight:600}
.tag{
  font-family:'Special Elite',monospace;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--soleil);padding:.35rem .85rem;border-radius:999px;white-space:nowrap;
  transform:rotate(2deg);box-shadow:2px 3px 0 rgba(43,23,8,.25);
}
.evenement.passe{opacity:.55;filter:saturate(.5)}

/* ------- vidéos ------- */
.section-videos{background:var(--vert);color:var(--blanc);position:relative;overflow:hidden}
.section-videos .wax{position:absolute;inset:0;opacity:.28;mix-blend-mode:soft-light;pointer-events:none}
.section-videos .wrap{position:relative}
.section-videos .eyebrow{color:var(--soleil)}
.section-videos h2{font-size:clamp(2rem,5vw,3.1rem);margin-bottom:2.2rem;color:var(--blanc);text-shadow:2px 3px 0 rgba(31,107,44,.6);transform:rotate(-1deg)}
.grille-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(295px,1fr));gap:1.7rem}
.video{
  background:var(--nuit);padding:.7rem;border-radius:22px;
  box-shadow:6px 8px 0 rgba(31,107,44,.55);
  transform:rotate(-1deg);transition:transform .18s ease;
}
.video:nth-child(2n){transform:rotate(1.1deg)}
.video:hover{transform:rotate(0) scale(1.02)}
.video .cadre{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{font-size:.92rem;padding:.75rem .5rem .35rem;color:var(--coton)}

/* ------- galerie : photos punaisées façon polaroïd ------- */
.section-galerie{background:var(--coton)}
.section-galerie h2{font-size:clamp(2rem,5vw,3.1rem);margin-bottom:2.2rem;color:var(--ecorce)}
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1.4rem,3vw,2.2rem);align-items:start}
.galerie figure{
  background:var(--blanc);padding:.7rem .7rem 1rem;
  border-radius:14px 18px 12px 16px;
  box-shadow:6px 8px 0 rgba(90,51,22,.22);
  transform:rotate(-1.6deg);transition:transform .18s ease;
}
.galerie figure:nth-child(2n){transform:rotate(1.3deg)}
.galerie figure:nth-child(3n){transform:rotate(-.5deg)}
.galerie figure:hover{transform:rotate(0) scale(1.03);z-index:2;position:relative}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.galerie figure.haute img{aspect-ratio:3/4}
.galerie figcaption{
  font-family:'Special Elite',monospace;font-size:.88rem;color:var(--ecorce);
  padding-top:.6rem;text-align:center;
}

/* ------- contact / footer ------- */
.section-contact{background:var(--nuit);color:var(--coton);text-align:center;position:relative;overflow:hidden}
.section-contact::before{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  border:2px dashed rgba(232,130,30,.3);bottom:-200px;left:-140px;
  animation:tourne 50s linear infinite reverse;
}
.section-contact h2{font-size:clamp(2rem,5vw,3.1rem);color:var(--soleil);margin-bottom:1.6rem;transform:rotate(-1deg)}
.section-contact .gros{
  font-family:'Special Elite',monospace;font-size:clamp(1.15rem,3vw,1.6rem);
  color:var(--soleil);display:inline-block;margin:.45rem 0;text-decoration:none;
  transform:rotate(-.6deg);
}
.section-contact .gros:nth-of-type(2n){transform:rotate(.7deg)}
.section-contact .gros:hover{text-decoration:underline wavy var(--orange)}
.section-contact address{font-style:normal;margin-top:1.8rem;color:#D9C49E;line-height:1.9;position:relative}
.site-footer{
  background:#1A0E04;color:#B79E7C;
  text-align:center;font-size:.85rem;padding:1.5rem var(--pas);
}
.site-footer a{color:var(--soleil)}

/* ------- pages intérieures (page.php / single.php) ------- */
.page-interieure{background:var(--coton)}
.page-interieure .entete-page{
  background:linear-gradient(128deg,var(--vert) 0 44%,var(--orange) 44% 100%);
  color:var(--blanc);padding:clamp(3rem,7vw,5rem) var(--pas);
  text-align:center;
}
.page-interieure .entete-page h1{font-size:clamp(2rem,5.5vw,3.4rem);text-shadow:3px 3px 0 rgba(43,23,8,.35);transform:rotate(-1deg)}
.contenu-page{max-width:780px;margin:0 auto;padding:clamp(2.5rem,6vw,4rem) var(--pas)}
.contenu-page p,.contenu-page ul,.contenu-page ol{margin-bottom:1.1rem}
.contenu-page h2{color:var(--ecorce);font-size:1.7rem;margin:2rem 0 .9rem}
.contenu-page h3{margin:1.6rem 0 .7rem}
.contenu-page ul,.contenu-page ol{padding-left:1.4rem}
.contenu-page img{border-radius:20px}
.contenu-page .wp-block-image img{box-shadow:7px 9px 0 rgba(90,51,22,.25)}

/* alignements WordPress de base */
.alignleft{float:left;margin:0 1.2rem .8rem 0}
.alignright{float:right;margin:0 0 .8rem 1.2rem}
.aligncenter{margin-left:auto;margin-right:auto}
.screen-reader-text{position:absolute!important;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}

/* =====================================================================
   RÉGLAGES AMATIC SC — capitales bâton, esprit pochoir/tribal.
   Amatic est étroite : on grossit et on passe tout en capitales.
   ===================================================================== */
h1,h2{line-height:1.05;letter-spacing:.05em;text-transform:uppercase}
.site-nav .logo,.btn,.calebasse h3,.carte h3,.date-bloc,.tag{text-transform:uppercase}
.site-nav .logo{font-size:2.05rem;letter-spacing:.09em}
.btn{font-size:1.45rem;letter-spacing:.07em;padding:.7rem 1.7rem}
.calebasse h3{font-size:1.75rem;letter-spacing:.05em}
.carte h3{font-size:1.7rem;letter-spacing:.05em}
.date-bloc .jour{font-size:2.2rem}
.date-bloc{letter-spacing:.04em}
header.hero h1,.hero h1{font-size:clamp(3.4rem,9vw,6.3rem)}
#association h2,.section-association h2,#burkina h2,.section-burkina h2{font-size:clamp(2.7rem,6.2vw,4rem)}
#seydou h2,.section-seydou h2,#cours h2,.section-cours h2,#agenda h2,.section-agenda h2,
#videos h2,.section-videos h2,#contact h2,.section-contact h2,.section-galerie h2{font-size:clamp(2.8rem,6.6vw,4.3rem)}

/* =====================================================================
   MOBILE — menu burger + confort tactile
   ===================================================================== */
.nav-burger{
  display:none;background:none;border:2px solid var(--soleil);border-radius:12px;
  width:48px;height:44px;padding:9px 10px;cursor:pointer;
  flex-direction:column;justify-content:space-between;
}
.nav-burger span{display:block;height:3px;border-radius:3px;background:var(--soleil);transition:transform .2s ease,opacity .2s ease}
.site-nav.ouvert .nav-burger span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
.site-nav.ouvert .nav-burger span:nth-child(2){opacity:0}
.site-nav.ouvert .nav-burger span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}

@media(max-width:880px){
  .nav-burger{display:flex}
  .site-nav ul{display:none;width:100%;flex-direction:column;gap:0;padding:.4rem 0 .6rem}
  .site-nav.ouvert ul{display:flex}
  .site-nav ul li{border-top:1px solid rgba(251,241,220,.15)}
  .site-nav ul a{display:block;padding:.95rem .3rem;font-size:1.05rem}
  .site-nav ul a::after{display:none}
  .site-nav ul a:active{color:var(--soleil)}

  /* héros : photo plus contenue, boutons pleine largeur */
  .hero{padding-top:3rem}
  .hero-photo{width:min(280px,72vw);margin-top:1.6rem}
  .btn{display:block;text-align:center;margin:0 0 .9rem}
  .btn.clair{margin-left:0}
  .hero-badges{margin-top:1.6rem}

  /* formes : moins de rotation et d'ombre sur petit écran */
  .calebasse{transform:rotate(.8deg);box-shadow:6px 8px 0 rgba(232,130,30,.4);border-radius:36px 40px 34px 42px}
  .calebasse.verte{transform:rotate(-.8deg);box-shadow:6px 8px 0 rgba(59,154,68,.35)}
  .carte,.evenement,.video,.galerie figure{transform:none!important}
  .portrait-cercle img{box-shadow:0 0 0 9px var(--vert),9px 12px 0 9px rgba(0,0,0,.35)}

  .date-bloc{max-width:130px}
  .tag{justify-self:start}

  section{padding-left:1.1rem;padding-right:1.1rem}
  .rythme span{animation-duration:2s}
}
@media(max-width:420px){
  .hero h1{font-size:2.9rem}
  .hero-photo{width:min(240px,80vw)}
}

/* =====================================================================
   v1.2 — RENTRÉE 2026
   Héros : photo agrandie et remontée, fond façon bandes kente
   + trame bogolan (cercles, zigzags, losanges, peignes) bien moins
   répétitive que les seuls cercles. Icônes SVG maison sur les cartes
   et le contact. Grille prête pour 4 cartes de cours.
   ===================================================================== */
.hero{
  background:
    radial-gradient(circle at 85% 8%, var(--soleil) 0 100px, rgba(0,0,0,0) 101px),
    linear-gradient(115deg,
      var(--vert-f)     0     2.4%,
      var(--vert)       2.4%  35%,
      var(--soleil)     35%   36.2%,
      var(--orange)     36.2% 69%,
      var(--rose-terre) 69%   70.2%,
      var(--orange-f)   70.2% 100%);
}
.hero .wax{opacity:.34}
.hero .inner{grid-template-columns:1.02fr .98fr;align-items:start}
.hero-photo{
  width:min(485px,92vw);
  margin-top:-1.6rem;
  align-self:start;
}
.hero-photo img{aspect-ratio:.94;object-position:60% 24%}
.hero-photo .soleil-badge{top:-26px;left:-18px;width:104px;height:104px}

/* cartes de cours : jusqu'à 4, avec icônes */
.cartes{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.carte h3{align-items:center;gap:.6rem}
.carte h3 .ico{width:28px;height:28px;flex:none}
.carte:nth-child(4){transform:rotate(.9deg)}
.carte:nth-child(4) h3{color:var(--ecorce)}

/* icônes du contact */
.section-contact .gros .ico{width:23px;height:23px;vertical-align:-4px;margin-right:.55rem}

@media(max-width:840px){
  .hero-photo{margin-top:.4rem;width:min(340px,86vw)}
}
@media(max-width:420px){
  .hero-photo{width:min(280px,88vw)}
}

/* =====================================================================
   v1.3 — CORRECTIONS JUILLET 2026
   Section « Stages et spectacles » : quatre rubriques illustrées
   (stages d'été, spectacles, écoles, échanges culturels) en colonnes
   alternées, photos punaisées façon galerie, vidéo intégrée.
   ===================================================================== */
.section-stages{background:var(--coton)}
.section-stages h2{font-size:clamp(2.8rem,6.6vw,4.3rem);color:var(--ecorce);margin-bottom:1rem}
.section-stages .intro{max-width:68ch;margin-bottom:.5rem;font-size:1.05rem}
.section-stages{position:relative}
.section-stages #burkina{position:absolute;top:0}
.sst-bloc{
  display:grid;grid-template-columns:1.05fr .95fr;grid-template-areas:"texte photos";
  gap:clamp(1.8rem,4vw,3.2rem);align-items:start;
  margin-top:clamp(2.6rem,5.5vw,4rem);
}
.sst-bloc:nth-of-type(even){grid-template-columns:.95fr 1.05fr;grid-template-areas:"photos texte"}
.sst-texte{grid-area:texte}
.sst-photos{
  grid-area:photos;display:grid;gap:1rem;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.sst-photos figure{
  background:var(--blanc);padding:.5rem .5rem .65rem;
  border-radius:12px 15px 11px 14px;
  box-shadow:5px 6px 0 rgba(90,51,22,.2);
  transform:rotate(-1.3deg);transition:transform .18s ease;
}
.sst-photos figure:nth-child(2n){transform:rotate(1.1deg)}
.sst-photos figure:nth-child(3n){transform:rotate(-.4deg)}
.sst-photos figure:hover{transform:rotate(0) scale(1.04);z-index:2;position:relative}
.sst-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.sst-photos figcaption{
  font-family:'Special Elite',monospace;font-size:.78rem;color:var(--ecorce);
  padding-top:.45rem;text-align:center;
}
.sst-bloc h3{
  font-family:'Amatic SC',cursive;font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,4.2vw,2.6rem);letter-spacing:.05em;line-height:1.1;
  color:var(--vert-f);display:flex;align-items:center;gap:.65rem;margin-bottom:.9rem;
}
.sst-bloc:nth-of-type(2) h3{color:var(--orange-f)}
.sst-bloc:nth-of-type(3) h3{color:var(--rose-terre)}
.sst-bloc:nth-of-type(4) h3{color:var(--ecorce)}
.sst-bloc h3 .ico{width:32px;height:32px;flex:none}
.sst-bloc p{margin-bottom:.95rem;max-width:60ch}
.sst-video{
  grid-column:1/-1;background:var(--nuit);padding:.6rem;
  border-radius:18px;box-shadow:6px 7px 0 rgba(90,51,22,.25);
  transform:rotate(-.7deg);
}
.sst-video:hover{transform:rotate(0)}
.sst-video .cadre{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.sst-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sst-video figcaption{color:var(--coton);font-size:.85rem;padding:.55rem .45rem .2rem;font-family:'Special Elite',monospace;text-align:left}
@media(max-width:840px){
  .sst-bloc,.sst-bloc:nth-of-type(even){grid-template-columns:1fr;grid-template-areas:"texte" "photos"}
  .sst-photos{grid-template-columns:repeat(2,1fr)}
  .sst-photos figure{transform:none!important}
}
@media(max-width:480px){
  .sst-photos{grid-template-columns:1fr 1fr}
  .sst-photos figcaption{font-size:.72rem}
}

/* =====================================================================
   v1.3.1 — PLACE AU VISUEL
   Photos « Stages & spectacles » nettement plus grandes : colonne photos
   élargie, première photo de chaque rubrique en pleine largeur.
   Visionneuse (lightbox) au clic — photos des stages ET de la galerie.
   ===================================================================== */
.sst-bloc{grid-template-columns:.85fr 1.15fr}
.sst-bloc:nth-of-type(even){grid-template-columns:1.15fr .85fr}
.sst-photos{grid-template-columns:repeat(2,1fr);gap:1.15rem}
.sst-photos figure{padding:.55rem .55rem .7rem}
.sst-photos figure:first-child:not(.sst-video){grid-column:1/-1}
.sst-photos figure:first-child:not(.sst-video) img{aspect-ratio:16/10}
.sst-photos figcaption{font-size:.84rem}
.sst-video{transform:rotate(0)}

/* --- visionneuse --- */
.dyk-lightbox{
  position:fixed;inset:0;z-index:130;
  background:rgba(26,14,4,.94);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,2.5rem);
}
.dyk-lightbox[hidden]{display:none}
.dyk-lightbox figure{max-width:min(1150px,94vw);text-align:center;margin:0}
.dyk-lightbox img{
  max-width:100%;max-height:80vh;width:auto;height:auto;margin:0 auto;
  border-radius:14px;border:6px solid var(--coton);
  box-shadow:0 22px 70px rgba(0,0,0,.55);
  cursor:default;
}
.dyk-lightbox figcaption{
  color:var(--coton);font-family:'Special Elite',monospace;
  margin-top:1rem;font-size:1rem;
}
.dyk-lb-fermer,.dyk-lb-prec,.dyk-lb-suiv{
  position:fixed;z-index:131;
  background:rgba(251,241,220,.1);border:2px solid rgba(251,241,220,.55);
  color:var(--coton);border-radius:50%;
  width:54px;height:54px;font-size:1.45rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  transition:background .15s ease,transform .15s ease;
}
.dyk-lb-fermer:hover,.dyk-lb-prec:hover,.dyk-lb-suiv:hover{background:var(--orange);border-color:var(--orange);transform:scale(1.07)}
.dyk-lb-fermer{top:1.1rem;right:1.1rem;font-size:2.1rem}
.dyk-lb-prec{left:1.1rem;top:50%;transform:translateY(-50%)}
.dyk-lb-suiv{right:1.1rem;top:50%;transform:translateY(-50%)}
.dyk-lb-prec:hover{transform:translateY(-50%) scale(1.07)}
.dyk-lb-suiv:hover{transform:translateY(-50%) scale(1.07)}
@media(max-width:640px){
  .dyk-lb-fermer,.dyk-lb-prec,.dyk-lb-suiv{width:44px;height:44px;font-size:1.2rem}
  .dyk-lb-fermer{font-size:1.7rem}
  .dyk-lightbox img{max-height:72vh}
}
@media(max-width:840px){
  .sst-bloc,.sst-bloc:nth-of-type(even){grid-template-columns:1fr}
}

/* =====================================================================
   v1.3.2 — MENTIONS LÉGALES (modal), favicon & image de partage
   ===================================================================== */
.dyk-ml-lien{
  background:none;border:0;cursor:pointer;padding:0;
  color:var(--soleil);font:inherit;text-decoration:underline;
}
.dyk-ml-lien:hover{text-decoration:underline wavy var(--orange)}
.dyk-mentions{
  border:0;padding:0;background:transparent;
  max-width:min(680px,94vw);width:100%;
}
.dyk-mentions::backdrop{background:rgba(26,14,4,.86)}
.dyk-mentions[open]{
  background:var(--coton);color:var(--nuit);
  border-radius:26px 30px 24px 28px/28px 24px 30px 26px;
  border-top:8px solid var(--orange);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  padding:clamp(1.6rem,4vw,2.6rem);
  max-height:86vh;overflow:auto;
}
.dyk-mentions h2{
  font-family:'Amatic SC',cursive;font-weight:700;text-transform:uppercase;
  font-size:clamp(2.1rem,5vw,2.9rem);letter-spacing:.05em;
  color:var(--ecorce);margin-bottom:1rem;transform:rotate(-.6deg);
}
.dyk-ml-texte h3{
  font-family:'Special Elite',monospace;font-weight:400;
  color:var(--vert-f);font-size:1.02rem;letter-spacing:.05em;text-transform:uppercase;
  margin:1.3rem 0 .4rem;
}
.dyk-ml-texte p{margin-bottom:.7rem;font-size:.97rem}
.dyk-ml-fermer{
  position:sticky;top:0;float:right;margin:-.4rem -.4rem 0 1rem;
  background:var(--nuit);color:var(--soleil);border:0;border-radius:50%;
  width:44px;height:44px;font-size:1.6rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:transform .15s ease,background .15s ease;
}
.dyk-ml-fermer:hover{background:var(--orange);color:var(--nuit);transform:scale(1.08)}