/* ==================================================================
   Thème « Backstage »
   L'intro animée d'origine (« Entrez ») devenue entrée des artistes :
   mur grunge en clair-obscur, projecteur, silhouette au chapeau,
   signature manuscrite, passes backstage. Ton club de jazz : encre et laiton.
   Identité sombre assumée (un seul jeu de couleurs).
   ================================================================== */

@font-face{font-family:"Bodoni Moda";src:url(../../assets/fonts/bodoni-moda-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../../assets/fonts/bodoni-moda-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../../assets/fonts/bodoni-moda-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../../assets/fonts/bodoni-moda-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../../assets/fonts/bodoni-moda-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../../assets/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../../assets/fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../../assets/fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(../../assets/fonts/courier-prime-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(../../assets/fonts/courier-prime-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  --fond:#120f0d;            /* encre */
  --fond-translucide:rgba(18,15,13,.88);
  --surface:#1f1814;         /* cuir */
  --surface-2:#2a211b;
  --texte:#ede2cb;           /* crème */
  --texte-2:#a79a87;         /* fumée */
  --accent:#c9a466;          /* laiton */
  --accent-2:#c0474b;        /* rouge Gretsch assourdi */
  --accent-halo:rgba(201,164,102,.55);
  --sur-accent:#1c140c;
  --papier:#e6d6b3;
  --ligne:rgba(237,226,203,.14);
  --ligne-forte:rgba(237,226,203,.32);
  --spectre-1:#8e5a2a; --spectre-2:#c9a466;
  --f-titre:"Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --f-texte:"Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-mono:"Courier Prime", "Courier New", monospace;
  --titre-poids:400; --titre-casse:none; --titre-interligne:1.02; --titre-espacement:-.01em;
  --citation-font:italic 400 1.6rem/1.35 var(--f-titre);
  --galerie-filtre:sepia(.85) brightness(.72) contrast(1.1);
  --bandeau-image:url(../../assets/img/grunge.webp);
  --bandeau-filtre:sepia(.6) saturate(.8) brightness(.3) contrast(1.15) blur(2px);
  --bandeau-voile:radial-gradient(80% 90% at 30% 40%,transparent,rgba(18,15,13,.85)),linear-gradient(0deg,var(--fond),transparent 45%);
  --hauteur-entete:74px;
  --max:1200px;
}
body{font-size:1.07rem}
h2 em,h1 em{font-style:italic;color:var(--accent)}
.btn{font:600 .72rem/1 var(--f-texte);letter-spacing:.22em}
.surtitre,.petit,.bandeau-surtitre{font:600 .7rem/1 var(--f-texte);letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.bandeau-surtitre img{filter:sepia(1) saturate(.6)}
.bandeau h1{font-size:clamp(2.8rem,7.5vw,6rem)}
.bandeau h1::after{content:"";display:block;width:120px;height:1px;margin-top:1.4rem;background:linear-gradient(90deg,var(--accent),transparent)}

/* ---------- En-tête : passes backstage suspendus ---------- */
.entete{position:absolute;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px)}
.entete-ligne{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.monogramme{display:flex;align-items:center;gap:.7rem;margin-top:1.3rem;text-decoration:none;font:italic 400 1.35rem/1 var(--f-titre);position:relative;z-index:61}
.monogramme img{width:40px;height:auto}
.passes{display:flex;gap:clamp(.35rem,.9vw,.85rem)}
.passe{position:relative;display:block;width:50px;padding-top:34px;text-decoration:none;transform-origin:50% 0;animation:suspend 1.1s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.5s + var(--i)*.08s)}
.passe::before{content:"";position:absolute;left:50%;top:0;width:1px;height:38px;background:linear-gradient(var(--accent),rgba(201,164,102,.4))}
/* L'étiquette (.etiq) porte le papier et se balance au survol ; le texte (span interne) est tourné à la verticale.
   L'animation d'arrivée reste sur le lien : les deux ne s'écrasent plus. */
.passe .etiq{display:block;padding:.9rem .55rem;transform-origin:50% 0;
    background:radial-gradient(circle at 30% 20%,rgba(120,80,30,.16) 0 2px,transparent 3px) 0 0/12px 12px,linear-gradient(95deg,#f3e6c8,var(--papier) 50%,#c9b184);
  clip-path:polygon(0 3%,20% 0,45% 3%,70% 0,100% 2%,97% 25%,100% 50%,96% 75%,100% 98%,75% 100%,50% 97%,25% 100%,0 98%,3% 70%,0 45%,3% 20%);
  box-shadow:0 8px 16px rgba(0,0,0,.6)}
.passe .etiq>span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font:700 .9rem/1 var(--f-titre);letter-spacing:.14em;text-transform:uppercase;color:#3b2c1c}
.passe::after{content:"";position:absolute;left:50%;top:36px;width:8px;height:8px;border-radius:50%;translate:-50% 0;background:var(--fond);box-shadow:inset 0 0 0 1px var(--accent);z-index:1}
.passe:hover .etiq,.passe:focus-visible .etiq{animation:balancier .9s ease-in-out}
.passe:hover .etiq>span,.passe:focus-visible .etiq>span{color:#8e1f1f}
/* Page en cours : même papier que les autres, un peu plus lumineux, texte rouge et liseré laiton */
.passe[aria-current] .etiq{background:radial-gradient(circle at 30% 20%,rgba(120,80,30,.16) 0 2px,transparent 3px) 0 0/12px 12px,linear-gradient(95deg,#f8ecd0,#ecdcb6 50%,#d6bf92);
  box-shadow:0 8px 16px rgba(0,0,0,.6),0 0 14px rgba(201,164,102,.45)}
.passe[aria-current] .etiq>span{color:#8e1f1f}
@keyframes suspend{from{transform:translateY(-140%) rotate(8deg)}to{transform:none}}
@keyframes balancier{0%{transform:rotate(0)}25%{transform:rotate(7deg)}55%{transform:rotate(-5deg)}80%{transform:rotate(2deg)}100%{transform:rotate(0)}}
.menu-bouton{display:none;margin-top:1rem;align-items:center;gap:.6rem;background:none;border:1px solid var(--ligne-forte);color:var(--texte);padding:.55rem .8rem;cursor:pointer;position:relative;z-index:61;font:600 .7rem var(--f-texte);letter-spacing:.2em;text-transform:uppercase}
.menu-icone{display:grid;gap:5px;width:18px}.menu-icone i{height:1px;background:currentColor;transition:transform .3s}
.menu-bouton[aria-expanded="true"] .menu-icone i:first-child{transform:translateY(3px) rotate(45deg)}
.menu-bouton[aria-expanded="true"] .menu-icone i:last-child{transform:translateY(-3px) rotate(-45deg)}
@media (max-width:760px){
  .menu-bouton{display:inline-flex}
  .passes{position:fixed;inset:0;z-index:60;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:.9rem;padding:6rem 1rem 2rem;background:rgba(12,10,8,.97);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .passes.ouvert{opacity:1;visibility:visible}
  .passes .passe{animation:none;width:56px}
  .passes.ouvert .passe{animation:suspend .9s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i)*.06s)}
  .passes .passe .etiq{padding:1.1rem .65rem}
  .passes .passe .etiq>span{font-size:1rem}
  body.menu-ouvert{overflow:hidden}
}

/* ---------- Scène d'ouverture ---------- */
.scene{position:relative;height:clamp(660px,96vh,940px);overflow:hidden;isolation:isolate;background:#070605}
.mur{position:absolute;inset:-3%;background:url(../../assets/img/grunge.webp) center/cover;filter:sepia(.55) saturate(.8) brightness(.32) contrast(1.15) blur(1.5px);transform:scale(1.06)}
@property --px{syntax:"<percentage>";inherits:false;initial-value:50%}
.poursuite{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 180deg at var(--px) -10%,transparent 0 172deg,rgba(255,226,170,.22) 177deg,rgba(255,236,200,.34) 180deg,rgba(255,226,170,.22) 183deg,transparent 188deg);
  animation:balaye 9s ease-in-out infinite alternate}
@keyframes balaye{0%{--px:38%}100%{--px:62%}}
.sol{position:absolute;left:50%;bottom:6%;width:min(70vw,720px);aspect-ratio:3/1;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,170,.28),transparent);filter:blur(6px);animation:respire 5s ease-in-out infinite}
.vignette{position:absolute;inset:0;background:radial-gradient(90% 75% at 50% 45%,transparent 30%,rgba(7,6,5,.9) 80%),linear-gradient(0deg,var(--fond),transparent 25%)}
.poussiere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.silhouette{position:absolute;left:50%;bottom:0;height:min(78%,660px);aspect-ratio:298/448;translate:-50% 0;z-index:2;animation:emerge 2.2s .3s cubic-bezier(.2,.8,.2,1) both}
.silhouette img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 30px rgba(255,220,160,.25))}
.silhouette::before{content:"";position:absolute;left:30%;top:18%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,248,230,.95),rgba(255,226,170,.35) 35%,transparent 68%);mix-blend-mode:screen;animation:contre-jour 4s ease-in-out infinite;z-index:-1}
@keyframes emerge{from{opacity:0;filter:blur(12px);translate:-50% 30px}to{opacity:1;filter:none;translate:-50% 0}}
@keyframes contre-jour{0%,100%{opacity:.75;transform:scale(.95)}50%{opacity:1;transform:scale(1.08)}}
@keyframes respire{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.chapeau{position:absolute;left:clamp(-40px,4vw,80px);top:18%;width:clamp(150px,20vw,290px);z-index:2;animation:flotte 7s ease-in-out infinite,fondu 1.6s .6s both;filter:drop-shadow(0 20px 30px rgba(0,0,0,.7))}
@keyframes flotte{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(2deg)}}
.ornement{position:absolute;right:clamp(-30px,3vw,60px);top:16%;width:clamp(110px,14vw,210px);z-index:2;opacity:.85;clip-path:inset(0 0 100% 0);animation:dessine 2.4s 1.4s cubic-bezier(.6,0,.2,1) forwards}
@keyframes dessine{to{clip-path:inset(0 0 0 0)}}
.guitare-b{position:absolute;right:clamp(4%,14vw,18%);bottom:4%;height:min(52%,420px);width:auto;z-index:2;transform-origin:50% 5%;animation:fondu 1.5s 1s both,penche 8s ease-in-out infinite;filter:drop-shadow(0 20px 30px rgba(0,0,0,.7)) sepia(.15)}
@keyframes penche{0%,100%{rotate:-6deg}50%{rotate:-2deg}}
.titre-scene{position:absolute;inset:auto 0 12% 0;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;padding-inline:16px}
.signature{position:relative;width:min(760px,92vw);aspect-ratio:588/170;margin:0}
.signature img{width:100%;height:100%;clip-path:inset(0 100% 0 0);animation:ecrit 2.6s .9s cubic-bezier(.5,0,.2,1) forwards;filter:drop-shadow(0 0 20px rgba(0,0,0,.9))}
@keyframes ecrit{to{clip-path:inset(0 0 0 0)}}
.plume{position:absolute;top:0;bottom:0;width:3px;left:0;background:linear-gradient(transparent,var(--accent),transparent);opacity:0;animation:plume 2.6s .9s cubic-bezier(.5,0,.2,1) both}
@keyframes plume{0%{left:0;opacity:1}95%{opacity:1}100%{left:100%;opacity:0}}
.devise{font:italic 400 clamp(1.1rem,2vw,1.5rem)/1.3 var(--f-titre);margin:0;text-shadow:0 2px 12px #000;animation:fondu 1.4s 3s both}
.entrez{display:inline-flex;align-items:center;gap:1rem;margin-top:.6rem;padding:.6rem 0;text-decoration:none;font:italic 400 1.9rem/1 var(--f-titre);animation:fondu 1.2s 3.4s both}
.entrez svg{width:120px;height:24px;overflow:visible}
.entrez path{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:160;stroke-dashoffset:160;animation:trait 1.6s 3.6s forwards}
.entrez svg:last-child{transform:scaleX(-1)}
.entrez:hover{color:var(--accent)}
@keyframes trait{to{stroke-dashoffset:0}}
@media (max-width:760px){
  .scene{height:auto;min-height:680px}
  .silhouette{height:60%}
  .guitare-b{right:2%;height:34%}
  .chapeau{top:22%;width:100px;left:-14px}
  .ornement{top:22%;width:84px}
  .titre-scene{bottom:6%}
}
@media (prefers-reduced-motion:reduce){.signature img,.ornement{clip-path:none!important}.entrez path{stroke-dashoffset:0}}

/* ---------- Sections de l'accueil ---------- */
.section-serree{padding-top:0}
.entete-sec{display:grid;grid-template-columns:1fr;gap:1rem 2rem;align-items:end;margin-bottom:3rem}
@media (min-width:760px){.entete-sec{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.entete-sec>p{justify-self:end}}
.entete-sec>p{color:var(--texte-2);margin:0;max-width:30rem}
.entete-sec>p a,.suite a{color:var(--accent);text-decoration:none;font-family:var(--f-titre);font-style:italic;font-size:1.15rem}
.entete-sec .petit{margin:0 0 .9rem}
.entete-sec h2{font-size:clamp(2.6rem,6vw,5rem)}
.suite{margin-top:1.6rem}

/* Programme (feuille de salle) */
.programme{border-top:1px solid var(--ligne)}
.ligne{display:grid;grid-template-columns:1fr;gap:.3rem;padding:1.5rem .4rem;border-bottom:1px solid var(--ligne);position:relative;transition:padding .35s}
@media (min-width:760px){.ligne{grid-template-columns:9rem minmax(0,1fr) minmax(0,1.2fr) auto;gap:1.5rem;align-items:baseline}}
.ligne::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(201,164,102,.1),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none}
.ligne:hover{padding-left:1.2rem}.ligne:hover::before{opacity:1}
.ligne .d{font:italic 400 1.9rem/1 var(--f-titre);color:var(--accent)}
.ligne .d small{display:block;font:400 .8rem/1.6 var(--f-mono);color:var(--texte-2);font-style:normal}
.ligne .qui{font:600 1.4rem/1.15 var(--f-titre)}
.ligne .ou{color:var(--texte-2)}
.ligne .ou a,.ligne .info{color:var(--accent)}
.ligne .info{text-decoration:none;font:400 .85rem var(--f-mono)}

/* Formations : grands noms + image qui suit le curseur */
.formations{position:relative}
.formation{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1.3rem 0;border-bottom:1px solid var(--ligne);text-decoration:none;position:relative;z-index:2}
.formation .nom{font:400 clamp(2.4rem,8vw,6.4rem)/1 var(--f-titre);letter-spacing:-.02em;transition:color .4s,letter-spacing .6s;overflow-wrap:anywhere}
.formation:hover .nom,.formation:focus-visible .nom{color:var(--accent);font-style:italic;letter-spacing:0}
.formation .meta{text-align:right;color:var(--texte-2);font-size:.95rem}
.formation .meta b{display:block;font:600 .68rem/1 var(--f-texte);letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.flottante{position:fixed;left:0;top:0;width:250px;aspect-ratio:3/4;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.7);border:6px solid var(--papier)}
.flottante img{width:100%;height:100%;object-fit:cover;filter:sepia(.3)}
.flottante.visible{opacity:1}
@media (hover:none),(max-width:760px){.flottante{display:none}.formation .meta{display:none}}

/* Citation + coupure de journal */
.presse-accueil{display:grid;grid-template-columns:1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
@media (min-width:860px){.presse-accueil{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.citation-grande{font:italic 400 clamp(1.6rem,3vw,2.5rem)/1.25 var(--f-titre);margin:1rem 0 0}
.citation-grande::before{content:"“";display:block;font-size:4rem;line-height:.6;color:var(--accent)}
.coupure,.presse blockquote{display:block;text-decoration:none;position:relative;background:linear-gradient(180deg,#efe6d2,#e3d6b8);color:#2a2219;padding:clamp(1.4rem,3vw,2.2rem);transform:rotate(-1.5deg);box-shadow:0 30px 50px rgba(0,0,0,.6);transition:transform .5s;
  clip-path:polygon(0 1%,6% 0,14% 1.2%,23% 0,35% 1%,48% 0,60% 1.3%,72% 0,86% 1%,100% 0,99% 20%,100% 40%,98.8% 62%,100% 83%,99% 100%,85% 98.8%,70% 100%,52% 98.6%,37% 100%,20% 98.8%,6% 100%,0 99%,1% 78%,0 55%,1.2% 30%)}
.coupure:hover{transform:rotate(0) scale(1.01)}
.coupure .jour{display:flex;justify-content:space-between;border-bottom:2px solid #2a2219;padding-bottom:.5rem;margin-bottom:1rem;font:700 .8rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.coupure-titre{display:block;font:700 clamp(1.4rem,2.4vw,2rem)/1.1 var(--f-titre);margin-bottom:1rem}
.coupure img{margin:.4rem 0 1rem;filter:grayscale(1) contrast(1.1);width:100%;height:auto}
.coupure-texte{display:block;font:400 .98rem/1.6 var(--f-mono);columns:2 14rem;column-gap:1.6rem}
.presse blockquote{font:400 1rem/1.6 var(--f-mono);border:0;margin:2rem 0}
.presse blockquote p:first-child{font-weight:700}

/* Magnétophone */
.studio{background:linear-gradient(180deg,var(--fond),var(--surface) 30%,var(--surface) 70%,var(--fond))}
.magneto .lecteur-platine{background:linear-gradient(180deg,#2e251e,#1b1511);border:1px solid rgba(201,164,102,.25);border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px rgba(0,0,0,.5)}
.magneto .lecteur-spectre{display:none}
.bobines{display:flex;justify-content:space-around;align-items:center;position:relative;padding-block:.5rem}
.bobine{width:clamp(100px,14vw,160px);aspect-ratio:1}
.bobine svg{width:100%;height:100%;animation:tourne 3.2s linear infinite;animation-play-state:paused}
.lecteur.joue .bobine svg{animation-play-state:running}
.bobine:nth-child(2) svg{animation-duration:2.4s}
@keyframes tourne{to{transform:rotate(360deg)}}
.bande{position:absolute;left:22%;right:22%;bottom:18%;height:2px;background:#4a3a2a}
.vu{display:flex;gap:3px;align-items:flex-end;justify-content:center;height:36px}
.vu i{width:6px;height:4px;background:var(--accent);border-radius:1px;transition:height .08s}
.vu i.crete{background:var(--accent-2)}
.magneto .lecteur-titre{text-align:center;background:#0d0a08;border:1px solid rgba(201,164,102,.25);padding:.6rem;border-radius:3px}
.magneto .lecteur-titre strong{font:400 1.05rem/1.3 var(--f-mono);text-transform:uppercase;color:var(--accent);letter-spacing:.06em}
.magneto .lecteur-titre span{font:400 .8rem var(--f-mono)}
.magneto .lecteur-play{background:linear-gradient(180deg,#e9dfc9,#bfae8c);color:#2a2219;border-radius:4px;box-shadow:0 4px 0 #6d5b40}
.magneto .lecteur-play:active{transform:translateY(3px);box-shadow:0 1px 0 #6d5b40}
.lecteur-pistes .t{font-style:italic;font-size:1.35rem}

/* Mosaïque */
.mosaique{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(110px,22vw,150px);gap:.8rem}
@media (min-width:700px){.mosaique{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(90px,12vw,150px)}
  .m1{grid-column:span 3;grid-row:span 3}.m2{grid-column:span 3;grid-row:span 2}.m3,.m5,.m6,.m7{grid-column:span 2;grid-row:span 2}.m4{grid-column:span 1;grid-row:span 2}}
.mosaique figure{margin:0;overflow:hidden;position:relative}
.mosaique img{width:100%;height:100%;object-fit:cover;filter:var(--galerie-filtre);transition:filter .7s,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.mosaique figure:hover img{filter:none;transform:scale(1.07)}
.mosaique figcaption{position:absolute;left:.8rem;bottom:.6rem;font:400 .78rem var(--f-mono);opacity:0;transform:translateY(6px);transition:.4s;text-shadow:0 1px 6px #000}
.mosaique figure:hover figcaption{opacity:1;transform:none}

/* Offres */
.offres{display:grid;grid-template-columns:1fr;border-top:1px solid var(--ligne)}
@media (min-width:860px){.offres{grid-template-columns:repeat(3,minmax(0,1fr))}.offre+.offre{border-left:1px solid var(--ligne);padding-left:1.6rem}}
.offre{padding:2rem 1.6rem 2rem 0;border-bottom:1px solid var(--ligne);display:flex;flex-direction:column;gap:.7rem;text-decoration:none;min-width:0;transition:background .4s}
.offre:hover{background:linear-gradient(180deg,rgba(201,164,102,.07),transparent)}
.offre .num{font:italic 400 3rem/1 var(--f-titre);color:var(--accent)}
.offre strong{font:600 1.5rem/1.1 var(--f-titre)}
.offre-txt{color:var(--texte-2)}

/* Contact */
.contact-b{position:relative;overflow:hidden}
.contact-b::before{content:"";position:absolute;right:-8%;top:10%;width:min(520px,60vw);aspect-ratio:368/393;background:url(../../assets/img/chapeau.webp) center/contain no-repeat;opacity:.07;transform:rotate(-8deg);pointer-events:none}
.carton{max-width:820px;text-align:center;position:relative}
.carton h2{font-size:clamp(2.6rem,6vw,4.6rem);margin-bottom:1rem}
.carton-intro{color:var(--texte-2);max-width:36rem;margin-inline:auto}
.form-carton{margin-top:2.2rem;text-align:left;background:transparent;border:0;padding:0}
.form-carton .envoi{justify-content:center;flex-direction:column}
.champ label{font:600 .66rem var(--f-texte);letter-spacing:.2em;color:var(--accent)}
.champ input,.champ select,.champ textarea{font:italic 400 1.2rem var(--f-titre)}

/* ---------- Pages intérieures ---------- */
.bandeau{padding-top:clamp(10rem,20vw,13rem)}
.page-bio .cadre{border:8px solid var(--papier);transform:rotate(-2deg);box-shadow:0 30px 60px rgba(0,0,0,.6)}
.page-bio .cadre img{filter:sepia(.2)}
.titre-section{font-style:italic}
.fiche-visuel img{filter:sepia(.25)}
.fiche-groupe h2{font-size:clamp(2.4rem,5vw,4.2rem)}
.date-bloc .j{font-style:italic}
.carte h3{font-weight:600;font-size:1.4rem}
.occasions li{font-style:italic;-webkit-text-stroke:0;color:var(--texte-2)}
.occasions li:hover{color:var(--accent)}
.pied h2{font-style:italic;font-weight:400}