/* =========================================================
   Bateau El Alamein, système de design
   Thème enfant de Hello Elementor · Huzzah, juillet 2026
   Polices auto-hébergées, aucun appel à un service tiers.
   ========================================================= */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:300 800;
  src:url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:300 800;
  src:url("../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Karla";font-style:normal;font-display:swap;font-weight:300 700;
  src:url("../fonts/karla-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Karla";font-style:normal;font-display:swap;font-weight:300 700;
  src:url("../fonts/karla-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Karla";font-style:italic;font-display:swap;font-weight:300 700;
  src:url("../fonts/karla-latin-wght-italic.woff2") format("woff2-variations")}
/* =========================================================
   PALETTES, ancrées sur les matériaux réels du bateau
   violet = la coque · bleu = les murs de la cale · vert = le pont végétalisé
   or de scène = accent unique, réservé au soleil et aux appels à l'action
   ========================================================= */
:root{
  --or:#E9B84C;
  --sur-or:#1A1408;
  --d:"Bricolage Grotesque",sans-serif;
  --b:"Karla",system-ui,sans-serif;
  --max:1240px;

  /* La palette de jour est aussi la palette par défaut. Deux raisons : une
     page servie avant que le mode ne soit appliqué reste lisible plutôt que
     blanche sur blanc, et l'éditeur de blocs de WordPress, qui réécrit
     « :root » en « .editor-styles-wrapper », hérite ainsi des couleurs du
     site sans qu'il faille les recopier ailleurs. Le mode nuit, déclaré
     plus bas, les remplace. */
  --img-f:saturate(1.02) contrast(1.02);
  --img-g:.05;
  --cta-bg:#1A1226; --cta-tx:#FFF;
  --gh-bd:rgba(26,18,38,.26);
  --news-bg:#1A1226; --news-tx:#FBF8F3;
  --halo:.10; --halo2:.07; --sclat:0;
  --bg:#F8F4EE; --bg-rgb:248,244,238; --bg2:#FFFFFF; --bg3:#F0E9E0;
  --tx:#1A1226; --tx2:#5A5068; --tx3:#6C6674;
  --line:rgba(26,18,38,.13);
  --kick:#5A3490; --c2:#1B4A7A; --c3:#245A42;
  --glow:120,78,190; --glow2:214,168,60;
  --sc1:.52; --sc2:.24; --sc3:.93;
}

/* ---------- NUIT ---------- */
[data-theme="nuit"]{
  --sc1:.52; --sc2:.24; --sc3:.93; --sclat:.76;
  --img-f:saturate(.92) contrast(1.06);
  --img-g:.34;
  --cta-bg:var(--or); --cta-tx:var(--sur-or);
  --gh-bd:rgba(255,255,255,.26);
  --news-bg:var(--tx); --news-tx:var(--bg);
  --halo:.24; --halo2:.16;
  --bg:#120C1C; --bg-rgb:18,12,28; --bg2:#1B1329; --bg3:#241A36;
  --tx:#F0EBF6; --tx2:#B4A8C4; --tx3:#9082A5;
  --line:rgba(240,235,246,.13);
  --kick:var(--or); --c2:#3E9EB0; --c3:#5FAE7F;
  --glow:120,78,190; --glow2:62,158,176;
}

/* ---------- JOUR ---------- */
[data-theme="jour"]{
  --img-f:saturate(1.02) contrast(1.02);
  --img-g:.05;
  --cta-bg:var(--tx); --cta-tx:#FFF;
  --gh-bd:rgba(26,18,38,.26);
  --news-bg:var(--tx); --news-tx:#FBF8F3;
  --halo:.10; --halo2:.07; --sclat:0;
  --bg:#F8F4EE; --bg-rgb:248,244,238; --bg2:#FFFFFF; --bg3:#F0E9E0;
  --tx:#1A1226; --tx2:#5A5068; --tx3:#6C6674;
  --line:rgba(26,18,38,.13);
  --kick:#5A3490; --c2:#1B4A7A; --c3:#245A42;
  --glow:120,78,190; --glow2:214,168,60;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--b);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .45s ease,color .45s ease}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 22px}}
@media(max-width:820px){
  [data-theme="nuit"]{--sc1:.66; --sc2:.46; --sclat:.55}
  .hero > .in{padding-top:120px}
  .hero h1{font-size:clamp(44px,13vw,64px)}
}
.d{font-family:var(--d);font-variation-settings:"opsz" 96;letter-spacing:-.035em;font-weight:700;line-height:.98}
.kick{font-family:var(--b);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--kick);font-weight:700}
.sec{font-family:var(--d);font-variation-settings:"opsz" 72;font-weight:700;letter-spacing:-.032em;font-size:clamp(34px,5.4vw,64px);line-height:1;margin-top:16px}
.lede{font-size:17px;color:var(--tx2);max-width:74ch;margin-top:20px;line-height:1.65;text-wrap:pretty}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--b);font-weight:700;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;padding:15px 26px;text-decoration:none;border:1px solid transparent;transition:.22s;cursor:pointer;white-space:nowrap}
.btn-or{background:var(--cta-bg);color:var(--cta-tx)}
.btn-or:hover{background:var(--tx);color:var(--bg)}
[data-theme="jour"] .btn-or:hover{background:var(--kick);color:#fff}
.btn-g{border-color:var(--gh-bd);color:var(--tx);background:transparent}
.btn-g:hover{background:var(--tx);color:var(--bg);border-color:var(--tx)}

.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.on{opacity:1;transform:none}

/* Accessibilité : parcours au clavier et respect du réglage système
   « réduire les animations ». */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:1px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* emblème, les fills sont portés en attributs, car les règles CSS
   ne traversent pas l'arbre fantôme généré par <use> ; seules les
   variables personnalisées y sont héritées. */
.mark{width:34px;height:34px;flex:none;color:var(--tx)}

/* ============ HEADER ============ */
header{position:fixed;inset:0 0 auto 0;z-index:90;transition:background .35s,box-shadow .35s;border-bottom:1px solid transparent}
/* La barre d'administration de WordPress recouvre l'en-tête quand on est
   connecté. La classe admin-bar n'existe que dans ce cas : les visiteurs ne
   voient aucun décalage. Les hauteurs, 32 et 46 pixels, sont celles de
   WordPress ; sous 601 pixels sa barre n'est plus fixée en haut. */
body.admin-bar header{top:32px}
@media screen and (max-width:782px){body.admin-bar header{top:46px}}
@media screen and (max-width:600px){body.admin-bar header{top:0}}
/* Voile dégradé permanent sous le header : la navigation reste lisible
   même posée sur une photo de concert très chargée. */
header::before{content:"";position:absolute;left:0;right:0;top:0;height:230%;z-index:-1;pointer-events:none;
  transition:opacity .35s ease;
  background:linear-gradient(180deg,
    rgba(var(--bg-rgb),.94) 0%,
    rgba(var(--bg-rgb),.80) 34%,
    rgba(var(--bg-rgb),.46) 64%,
    rgba(var(--bg-rgb),0) 100%)}
header.stuck::before{opacity:0}
header.stuck{background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
header .in{max-width:var(--max);margin:0 auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:18px;transition:padding .3s}
header.stuck .in{padding-top:12px;padding-bottom:12px}
.logo{font-family:var(--d);font-variation-settings:"opsz" 24;font-weight:700;letter-spacing:-.02em;font-size:18.5px;text-decoration:none;display:flex;align-items:center;gap:11px;text-transform:uppercase}
header nav{display:flex;gap:30px;align-items:center}
header nav a{font-size:14px;font-weight:600;letter-spacing:.015em;text-decoration:none;color:var(--tx);position:relative;padding:4px 0;transition:color .2s}
header nav a.lnk{opacity:.86}
header nav a.lnk:hover{opacity:1;color:var(--or)}
header nav a.lnk::after{content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:0;background:var(--or);transition:width .25s}
header nav a.lnk:hover::after{width:100%}
.tgl{background:transparent;border:1px solid var(--gh-bd);color:var(--tx);width:40px;height:40px;cursor:pointer;display:grid;place-items:center;transition:.2s;flex:none}
.tgl:hover{color:var(--or);border-color:var(--or)}
.mob{display:flex;gap:9px;align-items:center}
.tgl-m{display:none}
header .in{position:relative}
.tgl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
[data-theme="nuit"] .tgl .i-jour{display:block}[data-theme="nuit"] .tgl .i-nuit{display:none}
[data-theme="jour"] .tgl .i-jour{display:none}[data-theme="jour"] .tgl .i-nuit{display:block}
.brg{display:none;background:transparent;border:1px solid var(--line);color:var(--tx);width:40px;height:40px;cursor:pointer;font-size:15px}
@media(max-width:1080px){
  header nav{display:none;position:fixed;inset:66px 0 auto 0;background:var(--bg2);flex-direction:column;align-items:flex-start;padding:26px 32px 32px;gap:20px;border-bottom:1px solid var(--line)}
  header nav.open{display:flex}header nav a{font-size:16px}.brg{display:block}
  .tgl-d{display:none}.tgl-m{display:grid}
}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--bg)}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;filter:var(--img-f)}
.hero .bg img{object-position:58% 42%}
.hero .bg::after{content:"";position:absolute;inset:0;transition:background .45s ease;background:
  radial-gradient(115% 78% at 74% 16%, rgba(var(--glow),.22), transparent 60%),
  linear-gradient(90deg, rgba(var(--bg-rgb),var(--sclat)) 0%, rgba(var(--bg-rgb),calc(var(--sclat) * .62)) 34%, rgba(var(--bg-rgb),0) 68%),
  linear-gradient(180deg, rgba(var(--bg-rgb),var(--sc1)) 0%, rgba(var(--bg-rgb),var(--sc2)) 34%, rgba(var(--bg-rgb),var(--sc3)) 86%, var(--bg) 100%)}
.hero > .in{position:relative;z-index:2;padding-top:172px;padding-bottom:0}

/* En mode jour, la photo reste derrière le texte, comme la nuit. Ce n'est
   pas une inversion des couleurs pour autant : le voile est horizontal,
   dense à gauche là où le titre a besoin de contraste, léger à droite où la
   photo peut se voir en vraies couleurs. */
[data-theme="jour"] .hero{
  background:
    radial-gradient(80% 55% at 78% 0%, rgba(var(--glow),var(--halo)), transparent 64%),
    radial-gradient(70% 50% at 0% 30%, rgba(var(--glow2),var(--halo2)), transparent 62%),
    var(--bg)}
[data-theme="jour"] .hero .bg img{object-position:58% 46%;
  filter:saturate(1.05) contrast(.96) brightness(1.12)}
[data-theme="jour"] .hero .bg::after{background:
  linear-gradient(90deg, rgba(var(--bg-rgb),.965) 0%, rgba(var(--bg-rgb),.94) 34%,
    rgba(var(--bg-rgb),.66) 58%, rgba(var(--bg-rgb),.38) 80%, rgba(var(--bg-rgb),.3) 100%),
  linear-gradient(180deg, rgba(var(--bg-rgb),.9) 0%, rgba(var(--bg-rgb),.2) 22%,
    rgba(var(--bg-rgb),.2) 56%, rgba(var(--bg-rgb),.86) 90%, var(--bg) 100%)}
/* Sous 900 pixels le texte occupe toute la largeur : le voile redevient
   uniforme, sinon la fin des lignes passerait sur la photo. */
@media(max-width:900px){
  [data-theme="jour"] .hero .bg::after{background:
    linear-gradient(180deg, rgba(var(--bg-rgb),.93) 0%, rgba(var(--bg-rgb),.9) 52%,
      rgba(var(--bg-rgb),.97) 90%, var(--bg) 100%)}
}
/* Le blanc à gauche du L est une métrique de la police, pas une marge :
   on la compense pour que le titre s'aligne à l'oeil sur le sur-titre
   et sur le chapeau. La valeur est en em, elle suit donc le corps. */
.hero h1{font-family:var(--d);font-variation-settings:"opsz" 96;font-weight:800;letter-spacing:-.058em;line-height:.86;font-size:clamp(50px,11.4vw,148px);margin:18px 0 0 -.075em;text-transform:uppercase}
.hero .sous{font-size:19px;color:var(--tx2);max-width:44ch;margin-top:26px;line-height:1.55}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.hero .scroll{margin-top:50px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--tx3);display:flex;align-items:center;gap:12px}
.hero .scroll::before{content:"";width:46px;height:1px;background:currentColor}

/* Bandeau « prochain concert » : surface pleine et distincte, pour qu'il ne
   se fonde ni dans la photo du hero ni dans la section agenda. */
.escale{position:relative;z-index:2;margin-top:54px;background:var(--bg3);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 -18px 40px -24px rgba(0,0,0,.55)}
.escale::before,.escale::after{content:"";position:absolute;height:2px;width:min(48%,540px)}
.escale::before{top:-1px;left:0;background:linear-gradient(90deg,var(--or),rgba(233,184,76,0))}
.escale::after{bottom:-1px;right:0;background:linear-gradient(270deg,var(--or),rgba(233,184,76,0))}
.escale .in{max-width:var(--max);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;min-height:116px}
.escale .lb{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--kick);font-weight:700}
.escale .lb::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--or);flex:none;animation:pls 2.6s ease-out infinite}
@keyframes pls{0%{box-shadow:0 0 0 0 rgba(233,184,76,.55)}70%{box-shadow:0 0 0 10px rgba(233,184,76,0)}100%{box-shadow:0 0 0 0 rgba(233,184,76,0)}}
@media(prefers-reduced-motion:reduce){.escale .lb::before{animation:none}}
.escale .tt{font-family:var(--d);font-variation-settings:"opsz" 32;font-weight:600;letter-spacing:-.022em;font-size:clamp(18px,2.2vw,25px);line-height:1.2}
.escale .mt{font-size:13px;color:var(--tx3);margin-top:3px}
@media(max-width:860px){.escale .in{grid-template-columns:1fr;gap:14px;padding-top:24px;padding-bottom:26px}}

/* ============ AGENDA ============ */
.agenda{padding:120px 0 110px;background:radial-gradient(62% 46% at 94% 2%, rgba(var(--glow),var(--halo2)), transparent 64%),var(--bg)}
.ag-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-bottom:44px}
.filtres{display:flex;gap:7px;flex-wrap:wrap}
.filtre{background:transparent;border:1px solid var(--line);color:var(--tx2);font-family:var(--b);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;cursor:pointer;transition:.18s}
.filtre:hover{border-color:var(--gh-bd);color:var(--tx)}
.filtre.on{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.ev{background:var(--bg);display:flex;flex-direction:column;text-decoration:none;transition:background .25s}
.ev:hover{background:var(--bg2)}
.ev .ph{aspect-ratio:4/3;overflow:hidden;background:var(--bg3);position:relative}
.ev .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .4s;filter:grayscale(var(--img-g)) contrast(1.04)}
.ev:hover .ph img{transform:scale(1.05);filter:grayscale(0) contrast(1.04)}
.ev .jr{position:absolute;top:0;left:0;background:var(--bg);padding:11px 15px 12px;display:flex;flex-direction:column;line-height:1}
.ev .jr b{font-family:var(--d);font-variation-settings:"opsz" 28;font-weight:700;font-size:25px;letter-spacing:-.03em}
.ev .jr span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx3);margin-top:5px}
.ev .co{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.ev .gn{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--kick);font-weight:700}
.ev .nm{font-family:var(--d);font-variation-settings:"opsz" 36;font-weight:700;letter-spacing:-.025em;font-size:23px;line-height:1.08}
.ev .ds{font-size:13.5px;color:var(--tx3);line-height:1.6;flex:1}
.ev .pd{display:flex;justify-content:space-between;align-items:center;padding-top:14px;margin-top:4px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);font-weight:700}
.ev .pd .go{color:var(--kick);display:inline-flex;align-items:center;gap:6px}
.ev .pd .go::after{content:"→";transition:transform .25s}
.ev:hover .pd .go::after{transform:translateX(4px)}
.ev.off{display:none}
.ag-plus{margin-top:44px;display:flex;justify-content:center}

/* ============ BATEAU ============ */
.bateau{padding:0 0 120px}
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border:1px solid var(--line)}
.split .im{position:relative;min-height:540px;overflow:hidden;background:var(--bg3)}
.split .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-f)}
.split .tx{padding:64px 56px;background:var(--bg)}
@media(max-width:940px){.split{grid-template-columns:1fr}.split .im{min-height:320px}.split .tx{padding:40px 26px}}
.split p{font-size:15.5px;color:var(--tx2);margin-top:20px;line-height:1.78}
.chiffres{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:40px;border:1px solid var(--line)}
.ch{background:var(--bg);padding:22px 20px}
.ch b{display:block;font-family:var(--d);font-variation-settings:"opsz" 40;font-weight:700;font-size:34px;letter-spacing:-.03em}
.ch span{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3);margin-top:7px;line-height:1.55}

/* ============ ESPACES ============ */
.espaces{padding:110px 0;background:radial-gradient(72% 56% at 8% 0%, rgba(var(--glow2),var(--halo2)), transparent 66%),var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.esp-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;margin-top:48px;background:var(--line);border:1px solid var(--line)}
.esp{background:var(--bg2);position:relative;overflow:hidden;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end}
.esp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-f);transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.esp:hover img{transform:scale(1.06)}
.esp::after{content:"";position:absolute;inset:0;transition:background .45s;background:linear-gradient(180deg,rgba(var(--bg-rgb),.05) 0%,rgba(var(--bg-rgb),.62) 46%,rgba(var(--bg-rgb),.97) 100%)}
.esp .c{position:relative;z-index:2;padding:30px 28px}
.esp h3{font-family:var(--d);font-variation-settings:"opsz" 40;font-weight:700;letter-spacing:-.025em;font-size:26px;margin-bottom:9px}
.esp p{font-size:14px;color:var(--tx2);line-height:1.65}
.esp .m2{font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--kick);font-weight:700;margin-bottom:12px}

/* ============ PRIVATISER ============ */
.privat{padding:110px 0;background:radial-gradient(58% 50% at 2% 98%, rgba(var(--glow),var(--halo2)), transparent 64%),var(--bg)}
.pv-top{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:end}
@media(max-width:940px){.pv-top{grid-template-columns:1fr;gap:34px}}
.pv-cap{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.pv-cap div{background:var(--bg);padding:24px 22px}
.pv-cap b{display:block;font-family:var(--d);font-variation-settings:"opsz" 40;font-weight:700;font-size:30px;letter-spacing:-.03em}
.pv-cap span{display:block;font-size:11.5px;color:var(--tx3);margin-top:8px;line-height:1.55}
.refs{margin-top:64px;border-top:1px solid var(--line);padding-top:34px}
.refs .t{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--tx3);margin-bottom:26px}
.refs .l{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center}
.refs .l span{font-family:var(--d);font-variation-settings:"opsz" 20;font-weight:500;font-size:16.5px;letter-spacing:-.012em;color:var(--tx2);transition:.2s}
.refs .l span:hover{color:var(--tx)}

/* ============ ARTISTES ============ */
.artistes{padding:100px 0;background:var(--bg3);position:relative;overflow:hidden}
.artistes::before{content:"";position:absolute;inset:0;background:radial-gradient(74% 122% at 12% 0%, rgba(var(--glow),var(--halo)), transparent 64%),radial-gradient(60% 90% at 100% 100%, rgba(var(--glow2),var(--halo2)), transparent 62%)}
.artistes .in{position:relative;z-index:2;max-width:790px}
.artistes p{font-size:16.5px;color:var(--tx2);margin-top:20px;line-height:1.72}

/* ============ INFOS ============ */
.infos{padding:110px 0;background:radial-gradient(56% 44% at 98% 100%, rgba(var(--glow2),var(--halo2)), transparent 62%),var(--bg)}
.inf-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;margin-top:48px;background:var(--line);border:1px solid var(--line)}
.inf{background:var(--bg);padding:30px 28px}
.inf h4{font-size:10.5px;letter-spacing:.23em;text-transform:uppercase;color:var(--kick);font-weight:700;margin-bottom:18px}
.inf p,.inf li{font-size:14px;color:var(--tx2);line-height:1.85}
.inf ul{list-style:none}
.hor{display:flex;justify-content:space-between;gap:14px;font-size:14px;line-height:2.05;color:var(--tx2)}
.hor .j{color:var(--tx3)}
.avis{border:1px solid var(--line);border-left:2px solid var(--kick);background:var(--bg2);padding:24px 28px;font-size:14px;color:var(--tx2);line-height:1.78;margin-top:1px}
.avis b{color:var(--tx);font-weight:700}
.avis.v{border-left-color:var(--c2)}

/* ============ NEWSLETTER ============ */
.news{padding:82px 0;background:var(--news-bg);color:var(--news-tx)}
.news .in{display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center}
@media(max-width:880px){.news .in{grid-template-columns:1fr;gap:26px}}
.news h3{font-family:var(--d);font-variation-settings:"opsz" 60;font-weight:700;letter-spacing:-.035em;font-size:clamp(29px,4.4vw,50px);line-height:.99}
.news p{font-size:15px;opacity:.72;margin-top:15px;max-width:46ch}
.news form{display:flex;border:1px solid currentColor;max-width:100%}
.news input{border:none;background:transparent;padding:17px 20px;font-family:var(--b);font-size:14.5px;color:inherit;min-width:0;flex:1 1 250px;outline:none}
.news input::placeholder{color:currentColor;opacity:.45}
.news button{background:var(--or);color:var(--sur-or);border:none;padding:17px 24px;flex:none;font-family:var(--b);font-weight:700;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;cursor:pointer}
.news button[disabled]{opacity:.55;cursor:default}
/* Le cadre qui reçoit la réponse de l'outil d'envoi. Il doit rester dans le
   flux pour être chargé par tous les navigateurs, d'où une réduction à zéro
   plutôt qu'un display:none. */
#news-cadre{position:absolute;width:0;height:0;border:0;opacity:0;pointer-events:none}
.news-merci{font-size:15px;line-height:1.5;max-width:46ch;padding:17px 20px;border:1px solid currentColor;outline:none}

/* ============ FOOTER ============ */
footer{background:radial-gradient(60% 70% at 50% 0%, rgba(var(--glow),var(--halo2)), transparent 68%),var(--bg);padding:78px 0 34px;border-top:1px solid var(--line)}
.ft{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:42px}
@media(max-width:880px){.ft{grid-template-columns:1fr 1fr;gap:34px}}
.ft h5{font-size:11px;letter-spacing:.23em;text-transform:uppercase;color:var(--tx3);margin-bottom:18px;font-weight:700}
.ft a,.ft p{display:block;font-size:14px;color:var(--tx2);text-decoration:none;line-height:2.05}

/* Le menu du pied de page est servi sans conteneur de liste : ses éléments
   restent des « li », qui affichent une puce par défaut. Elle n'a pas sa
   place ici, ces entrées se lisent comme des liens et non comme une
   énumération. */
.ft li{list-style:none;margin:0;padding:0}
.ft a:hover{color:var(--kick)}
.ft .em{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.ft .em .mark{width:46px;height:46px}
.ft .big{font-family:var(--d);font-variation-settings:"opsz" 48;font-weight:700;letter-spacing:-.035em;font-size:31px;line-height:1;text-transform:uppercase;color:var(--tx)}
.ft .bl{font-size:14px;color:var(--tx3);max-width:32ch;line-height:1.72}
.fbase{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}

/* =========================================================
   Ajouts propres à l'intégration WordPress
   ========================================================= */

/* Lien d'évitement : premier élément atteint au clavier. */
.evitement{position:absolute;left:-9999px;top:0;z-index:200;background:var(--or);color:var(--sur-or);
  padding:14px 22px;font-family:var(--b);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.evitement:focus{left:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* La navigation vient de WordPress : on cible les liens du menu, pas une classe. */
nav a:not(.btn){font-size:14px;font-weight:600;letter-spacing:.015em;text-decoration:none;color:var(--tx);
  position:relative;padding:4px 0;transition:color .2s;opacity:.86}
nav a:not(.btn):hover{opacity:1;color:var(--or)}
nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:0;background:var(--or);transition:width .25s}
nav a:not(.btn):hover::after{width:100%}
nav a.btn::after{display:none}
nav .current-menu-item > a{opacity:1}
nav .current-menu-item > a::after{width:100%}
nav ul{list-style:none;display:contents}
nav li{display:block}
@media(max-width:1080px){nav ul{display:flex;flex-direction:column;gap:20px;width:100%}}

/* Le titre de section du pied de page reprend le style des anciens h5. */
.ft-t{font-family:var(--b);font-size:11px;letter-spacing:.23em;text-transform:uppercase;color:var(--tx3);
  margin-bottom:18px;font-weight:700}

/* Sous-titre d'un concert dans la grille. */
.ev .nm .st{display:block;font-family:var(--b);font-weight:400;font-size:13.5px;letter-spacing:0;
  color:var(--tx2);line-height:1.5;margin-top:7px}
.ev .pd .complet{color:var(--tx3)}
.ev .pd .complet::after{content:""}
.escale .tt a{text-decoration:none}
.escale .tt a:hover{color:var(--or)}

/* Un espace sans photo garde de la matière plutôt qu'un trou. */
.esp:not(:has(img)){background:linear-gradient(160deg,var(--bg3),var(--bg2))}
.esp:not(:has(img))::after{background:linear-gradient(180deg,rgba(var(--bg-rgb),0) 0%,rgba(var(--bg-rgb),.35) 60%,rgba(var(--bg-rgb),.8) 100%)}

.agenda-vide{margin-top:34px;padding:26px 28px;border:1px solid var(--line);background:var(--bg2);
  color:var(--tx2);font-size:15px;line-height:1.75}
.pagination{margin-top:46px;display:flex;justify-content:center}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination a,.pagination span{display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--line);color:var(--tx2);text-decoration:none;font-size:14px;font-weight:600;transition:.18s}
.pagination a:hover{border-color:var(--or);color:var(--or)}
.pagination .current{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.pagination h2{display:none}

/* ---------- Tête et corps des pages internes ---------- */
.page-tete{padding:186px 0 0;background:
  radial-gradient(70% 60% at 84% 0%, rgba(var(--glow),var(--halo)), transparent 66%),
  radial-gradient(60% 50% at 0% 40%, rgba(var(--glow2),var(--halo2)), transparent 62%),
  var(--bg)}
.page-tete h1.sec{margin-top:16px;line-height:.94}
.page-tete .lede{margin-bottom:0;padding-bottom:8px}
.page-corps{padding:56px 0 110px;background:var(--bg)}

.prose{max-width:74ch;font-size:16.5px;line-height:1.85;color:var(--tx2)}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 22px}
.prose h2{font-family:var(--d);font-variation-settings:"opsz" 56;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(26px,3.4vw,38px);line-height:1.06;color:var(--tx);margin:56px 0 18px}
.prose h3{font-family:var(--d);font-variation-settings:"opsz" 36;font-weight:700;letter-spacing:-.022em;
  font-size:clamp(20px,2.4vw,24px);color:var(--tx);margin:40px 0 14px}
.prose strong{color:var(--tx);font-weight:700}
.prose a{color:var(--kick);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--or)}
.prose ul,.prose ol{margin:0 0 22px;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:22px;margin-bottom:11px}
.prose ul li::before{content:"";position:absolute;left:2px;top:13px;width:5px;height:5px;background:var(--or)}
.prose ol{counter-reset:p}
.prose ol li{position:relative;padding-left:34px;margin-bottom:11px;counter-increment:p}
.prose ol li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--d);font-weight:700;color:var(--or);font-size:14px}
.prose blockquote{margin:38px 0;padding:4px 0 4px 24px;border-left:2px solid var(--or);
  font-size:19px;line-height:1.6;color:var(--tx)}
.prose blockquote cite{display:block;margin-top:12px;font-size:13px;font-style:normal;color:var(--tx3);
  letter-spacing:.14em;text-transform:uppercase}
.prose img,.prose figure{margin:38px 0}
.prose figcaption{margin-top:10px;font-size:13px;color:var(--tx3)}
.prose hr{border:none;height:1px;background:var(--line);margin:52px 0}

/* Encadré de repère dans un texte long. */
.prose .encadre{border:1px solid var(--line);border-left:2px solid var(--kick);background:var(--bg2);
  padding:24px 28px;margin:38px 0;font-size:15px;line-height:1.75}
.prose .encadre p:last-child{margin-bottom:0}

/* ---------- Fiche concert ---------- */
.fiche-hero{position:relative;overflow:hidden;background:var(--bg)}
.fiche-hero .bg{position:absolute;inset:0;z-index:0}
.fiche-hero .bg img{width:100%;height:100%;object-fit:cover;filter:var(--img-f)}
.fiche-hero .bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(var(--bg-rgb),var(--sclat)) 0%, rgba(var(--bg-rgb),calc(var(--sclat)*.6)) 36%, rgba(var(--bg-rgb),0) 74%),
  linear-gradient(180deg, rgba(var(--bg-rgb),.72) 0%, rgba(var(--bg-rgb),.42) 40%, rgba(var(--bg-rgb),.96) 90%, var(--bg) 100%)}
.fiche-hero .in{position:relative;z-index:2;padding-top:186px;padding-bottom:76px}
.fiche-hero h1{font-family:var(--d);font-variation-settings:"opsz" 96;font-weight:800;letter-spacing:-.04em;
  line-height:.94;font-size:clamp(38px,7.4vw,88px);margin:16px 0 0;text-transform:uppercase}
.fiche-hero .sst{font-family:var(--d);font-variation-settings:"opsz" 40;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(20px,2.6vw,28px);color:var(--tx2);margin-top:12px}
.fiche-hero .quand{font-size:15px;color:var(--tx2);margin-top:18px;letter-spacing:.02em}
.fiche-hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
[data-theme="jour"] .fiche-hero .bg img{filter:saturate(1.04) contrast(1) brightness(1.04)}
[data-theme="jour"] .fiche-hero .bg::after{background:
  linear-gradient(90deg, rgba(var(--bg-rgb),.96) 0%, rgba(var(--bg-rgb),.94) 30%,
    rgba(var(--bg-rgb),.62) 56%, rgba(var(--bg-rgb),.34) 78%, rgba(var(--bg-rgb),.26) 100%),
  linear-gradient(180deg, rgba(var(--bg-rgb),.72) 0%, rgba(var(--bg-rgb),0) 22%,
    rgba(var(--bg-rgb),0) 58%, rgba(var(--bg-rgb),.88) 92%, var(--bg) 100%)}
@media(max-width:820px){
  [data-theme="jour"] .fiche-hero .bg::after{background:
    linear-gradient(180deg, rgba(var(--bg-rgb),.9) 0%, rgba(var(--bg-rgb),.88) 55%,
      rgba(var(--bg-rgb),.98) 92%, var(--bg) 100%)}
}

.fiche-corps{padding:70px 0 100px;background:var(--bg)}
.fc-grid{display:grid;grid-template-columns:1fr 340px;gap:64px;align-items:start}
@media(max-width:940px){.fc-grid{grid-template-columns:1fr;gap:40px}}
.fc-texte{max-width:70ch;font-size:16.5px;line-height:1.85;color:var(--tx2)}
.fc-texte p{margin:0 0 22px}
.fc-texte strong{color:var(--tx);font-weight:700}
.fc-texte ul{list-style:none;margin:0 0 22px}
.fc-texte ul li{position:relative;padding-left:22px;margin-bottom:10px}
.fc-texte ul li::before{content:"";position:absolute;left:2px;top:13px;width:5px;height:5px;background:var(--or)}
.fc-texte a{color:var(--kick);text-decoration:underline;text-underline-offset:3px}
.fc-texte iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;margin:12px 0 26px}
.fc-bloc{border:1px solid var(--line);background:var(--bg2);padding:26px 26px 28px;margin-bottom:2px}
.fc-bloc h2{font-family:var(--b);font-size:10.5px;letter-spacing:.23em;text-transform:uppercase;
  color:var(--kick);font-weight:700;margin-bottom:16px}
.fc-bloc p{font-size:14px;color:var(--tx2);line-height:1.8}
.fc-side .avis{margin-top:2px}

/* Les intitulés des cartes d'infos sont des h3 côté WordPress. */
.inf h3{font-family:var(--b);font-size:10.5px;letter-spacing:.23em;text-transform:uppercase;
  color:var(--kick);font-weight:700;margin-bottom:18px}
.inf .hor{margin:0}

@media(max-width:820px){
  .page-tete{padding-top:132px}
  .fiche-hero .in{padding-top:140px;padding-bottom:56px}
}

/* Une carte sans photo doit rester une intention, pas un trou. */
.ev .ph:not(:has(img)){aspect-ratio:16/6;
  background:radial-gradient(90% 130% at 76% 10%, rgba(var(--glow),.5), transparent 66%),
             linear-gradient(155deg,var(--bg3),var(--bg2))}
.ev .ph:not(:has(img))::after{content:"";position:absolute;right:16px;bottom:14px;width:34px;height:1.5px;background:var(--or);opacity:.6}

/* Enchaînement tête de page → contenu, sans double respiration. */
.page-tete + .agenda{padding-top:64px}
.page-tete + .page-corps{padding-top:48px}
.page-tete .lede{max-width:88ch}

/* Chapô d'ouverture d'une page éditoriale. */
.prose .lede-page{font-size:20px;line-height:1.62;color:var(--tx);margin-bottom:34px}

/* Le titre d'une page interne doit rester au-dessus des titres de section. */
.page-tete h1.sec{font-size:clamp(40px,6.2vw,78px)}
.page-corps .prose h2{margin-top:52px}

/* =========================================================
   Page « Le bateau » : récit à gauche, chronologie à droite
   ========================================================= */
.bt-grid{display:grid;grid-template-columns:1fr 360px;gap:72px;align-items:start}
@media(max-width:1020px){.bt-grid{grid-template-columns:1fr;gap:52px}}
.chrono{position:sticky;top:104px}
@media(max-width:1020px){.chrono{position:static}}
.chrono-t{font-family:var(--b);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--kick);font-weight:700;margin-bottom:22px}
.chrono-l{list-style:none;margin:0;padding:0;position:relative}
.chrono-l::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,var(--or),rgba(233,184,76,.15))}
.chrono-l li{position:relative;padding:0 0 26px 30px}
.chrono-l li:last-child{padding-bottom:0}
.chrono-l li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
  border-radius:50%;background:var(--bg);border:2px solid var(--or)}
.chrono-l li:last-child::before{background:var(--or)}
.chrono-l .an{display:block;font-family:var(--d);font-variation-settings:"opsz" 40;font-weight:700;
  font-size:27px;letter-spacing:-.03em;line-height:1;color:var(--tx)}
.chrono-l .ti{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kick);margin-top:7px}
.chrono-l .de{display:block;font-size:14px;line-height:1.65;color:var(--tx2);margin-top:7px}
.chrono-ph{margin:34px 0 0}
.chrono-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:var(--img-f)}
.chrono-ph figcaption{margin-top:10px;font-size:12.5px;color:var(--tx3);line-height:1.55}

/* =========================================================
   Lecteur vidéo, chargé seulement au clic
   Aucune requête vers YouTube tant que le visiteur n'a rien demandé :
   l'image affichée est celle du concert, servie par le bateau.
   ========================================================= */
.video{margin:38px 0 30px}
.video iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;background:#000}
.video figcaption{margin-top:11px;font-size:12.5px;color:var(--tx3);line-height:1.6}

/* =========================================================
   FORMULAIRES
   Privatisation et candidature artistique. Champs sobres,
   étiquettes toujours visibles, aucune saisie masquée par
   un texte d'exemple.
   ========================================================= */
.form-bloc{border:1px solid var(--line);background:var(--bg2);padding:44px 44px 48px;position:relative}
.form-bloc::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--or),transparent);opacity:.65}
.form-bloc > .lede{margin-top:14px;margin-bottom:0;max-width:none}
@media(max-width:640px){.form-bloc{padding:30px 22px 34px}}

.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form{margin-top:34px}
.form-grille{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;align-items:start}
.form-grille .champ{display:flex;flex-direction:column}
.form-grille .champ.large{grid-column:1/-1}
@media(max-width:720px){.form-grille{grid-template-columns:1fr}}

.form .champ label,.form .champ legend{display:block;font-size:13px;font-weight:700;color:var(--tx);
  letter-spacing:.01em;margin-bottom:8px}
.form .champ abbr{color:var(--or);text-decoration:none;margin-left:3px;font-weight:700}
[data-theme="jour"] .form .champ abbr{color:var(--kick)}

.form input[type=text],.form input[type=email],.form input[type=tel],
.form input[type=date],.form input[type=number],.form select,.form textarea{
  width:100%;font-family:var(--b);font-size:15px;line-height:1.55;color:var(--tx);
  background:var(--bg);border:1px solid var(--line);border-radius:0;padding:13px 15px;
  transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none}
.form textarea{resize:vertical;min-height:96px}
.form select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:42px}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--gh-bd)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--or);
  background:var(--bg3);box-shadow:0 0 0 3px rgba(233,184,76,.16)}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.form ::placeholder{color:var(--tx3);opacity:1}

.form fieldset{border:0;margin:0;padding:0}
.form .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:9px}

/* Cases à cocher dessinées, la case native n'accepte ni couleur ni bordure. */
.form .champ .bascule{display:flex;align-items:center;gap:13px;margin:0;padding:13px 16px;
  border:1px solid var(--line);background:var(--bg);cursor:pointer;transition:.18s;
  font-weight:400;min-height:52px}
.form .champ .bascule:hover{border-color:var(--gh-bd)}
.form .champ .bascule:has(input:checked){border-color:var(--or);background:var(--bg3)}
.form .champ .bascule input[type=checkbox]{appearance:none;-webkit-appearance:none;
  width:19px;height:19px;flex:none;margin:0;border:1px solid var(--gh-bd);background:var(--bg2);
  border-radius:2px;cursor:pointer;position:relative;transition:.15s}
.form .champ .bascule:hover input[type=checkbox]{border-color:var(--or)}
.form .champ .bascule input[type=checkbox]:checked{background:var(--or);border-color:var(--or)}
.form .champ .bascule input[type=checkbox]:checked::after{content:"";position:absolute;
  left:6px;top:2px;width:5px;height:10px;border-right:2px solid var(--sur-or);
  border-bottom:2px solid var(--sur-or);transform:rotate(43deg)}
.form .champ .bascule input[type=checkbox]:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.form .champ .bascule span{font-size:14.5px;font-weight:400;color:var(--tx2);line-height:1.45}
.form .champ .bascule:has(input:checked) span{color:var(--tx)}
.form .champ.case{justify-content:flex-end}
/* Une case seule s'aligne sur les champs voisins, pas sur leur étiquette. */
.form-grille .champ.case:not(.large)::before{content:"";display:block;height:30px}
@media(max-width:720px){.form-grille .champ.case:not(.large)::before{display:none}}
@media(prefers-reduced-motion:reduce){.form .champ .bascule,.form .champ .bascule input{transition:none}}

.form .aide{margin-top:9px;font-size:12.5px;line-height:1.6;color:var(--tx3)}

.form-pied{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:34px;
  padding-top:28px;border-top:1px solid var(--line)}
.form-rgpd{font-size:12.5px;line-height:1.6;color:var(--tx3);max-width:46ch}

.form-msg{margin-top:26px;padding:18px 22px;font-size:14.5px;line-height:1.7;
  border:1px solid var(--line);border-left:2px solid var(--or);background:var(--bg)}
.form-msg.ok{border-left-color:var(--c3);color:var(--tx)}
.form-msg.ko{border-left-color:#D2685E;color:var(--tx)}

/* =========================================================
   PAGES PRIVATISATION, PROGRAMMER, INFOS PRATIQUES
   ========================================================= */
.bloc-sec{padding:0 0 62px;background:var(--bg)}
.bloc-sec + .bloc-sec{padding-top:0}
.sec-tete{margin-bottom:38px}
.sec-tete .sec{font-size:clamp(28px,3.4vw,42px);margin-top:14px;max-width:22ch;text-wrap:balance}
.sec-tete .lede{margin-top:16px;max-width:92ch}

/* Cartes d'espaces, avec surface et jauge */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.carte-e{background:var(--bg2);padding:30px 28px 32px;display:flex;flex-direction:column}
.carte-e .m2{font-family:var(--d);font-variation-settings:"opsz" 40;font-weight:800;
  letter-spacing:-.03em;font-size:38px;color:var(--tx);line-height:1}
.carte-e h3{font-family:var(--b);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--kick);font-weight:700;margin:14px 0 12px}
.carte-e p{font-size:14.5px;color:var(--tx2);line-height:1.75}
.carte-e .note{margin-top:auto;padding-top:18px;font-size:12.5px;color:var(--tx3);line-height:1.6}

/* Bandeau de repères chiffrés */
.reperes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:1px}
.reperes div{background:var(--bg2);padding:26px 26px 28px}
.reperes b{display:block;font-family:var(--d);font-variation-settings:"opsz" 40;font-weight:800;
  letter-spacing:-.03em;font-size:30px;color:var(--or);line-height:1.05}
[data-theme="jour"] .reperes b{color:var(--kick)}
.reperes span{display:block;margin-top:9px;font-size:13.5px;color:var(--tx2);line-height:1.6}

/* Listes de formats, en colonnes */
.formats{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.formats span{border:1px solid var(--line);padding:9px 17px;font-size:13.5px;color:var(--tx2);
  background:var(--bg2)}

/* Foire aux questions, en deux colonnes : le titre tient à gauche pendant
   la lecture, l'accordéon occupe toute la largeur utile à droite. */
.faq-duo{display:grid;grid-template-columns:330px 1fr;gap:58px;align-items:start}
@media(max-width:940px){.faq-duo{grid-template-columns:1fr;gap:26px}}
.faq-tete{position:sticky;top:104px}
.faq-tete .sec{font-size:clamp(26px,2.8vw,36px);margin-top:14px;text-wrap:balance}
.faq-tete .lede{margin-top:16px;font-size:15px;max-width:none}
@media(max-width:940px){.faq-tete{position:static}}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);position:relative;transition:background .25s}
.faq details[open]{background:var(--bg2)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:22px 58px 22px 22px;
  font-family:var(--d);font-variation-settings:"opsz" 28;font-weight:600;letter-spacing:-.018em;
  font-size:18.5px;line-height:1.35;color:var(--tx);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--or)}
[data-theme="jour"] .faq summary:hover{color:var(--kick)}
.faq summary:focus-visible{outline:2px solid var(--or);outline-offset:-2px}
.faq summary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:transparent;transition:background .25s}
.faq details[open] summary::before{background:var(--or)}
.faq summary::after{content:"";position:absolute;right:24px;top:28px;width:10px;height:10px;
  border-right:1.5px solid var(--tx3);border-bottom:1.5px solid var(--tx3);
  transform:rotate(45deg);transition:transform .25s,border-color .25s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px);border-color:var(--or)}
.faq .rep{padding:0 58px 24px 22px;font-size:15.5px;line-height:1.75;color:var(--tx2);max-width:none}
.faq .rep p + p{margin-top:14px}
@media(prefers-reduced-motion:reduce){.faq summary::after,.faq details{transition:none}}
@media(max-width:640px){
  .faq summary{padding:20px 46px 20px 16px;font-size:17px}
  .faq .rep{padding:0 20px 22px 16px;font-size:15px}
  .faq summary::after{right:16px;top:26px}
}

/* Deux colonnes : contenu à gauche, encarts à droite */
.duo{display:grid;grid-template-columns:1fr 360px;gap:64px;align-items:start}
@media(max-width:940px){.duo{grid-template-columns:1fr;gap:40px}}
.duo-cote{position:sticky;top:104px}
@media(max-width:940px){.duo-cote{position:static}}

/* Tableau d'horaires */
.horaires{border:1px solid var(--line);background:var(--bg2)}
.horaires .l{display:flex;justify-content:space-between;gap:18px;padding:13px 22px;font-size:14.5px}
.horaires .l + .l{border-top:1px solid var(--line)}
.horaires .j{color:var(--tx2)}
.horaires .h{color:var(--tx);font-weight:700;text-align:right}
.horaires .l.ferme .h{color:var(--tx3);font-weight:400}

/* Contacts */
.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.contacts div{background:var(--bg2);padding:26px 26px 28px}
.contacts .q{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--kick);
  font-weight:700;margin-bottom:12px}
.contacts a{font-size:14.5px;color:var(--tx);overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;word-break:break-word}
.contacts a:hover{color:var(--or)}
[data-theme="jour"] .contacts a:hover{color:var(--kick)}
.contacts p{margin-top:10px;font-size:13px;color:var(--tx3);line-height:1.6}

/* =========================================================
   CARTES D'INFORMATION
   Grille de douze colonnes : chaque bloc occupe la largeur
   qui lui convient, sans jamais laisser de vide à droite.
   ========================================================= */
.k-grille{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.k{background:var(--bg2);padding:28px 30px 32px;display:flex;flex-direction:column}
.k4{grid-column:span 4}
.k6{grid-column:span 6}
.k8{grid-column:span 8}
.k12{grid-column:span 12}
@media(max-width:1000px){.k4,.k8{grid-column:span 6}}
@media(max-width:680px){.k4,.k6,.k8{grid-column:span 12}}
.k-t{font-family:var(--b);font-size:10.5px;letter-spacing:.23em;text-transform:uppercase;
  color:var(--kick);font-weight:700;margin:0 0 20px}

.k-adr{display:block;font-family:var(--d);font-variation-settings:"opsz" 32;font-weight:700;
  letter-spacing:-.025em;font-size:25px;line-height:1.24;color:var(--tx)}
.k-adr-p{display:block;margin-top:12px;font-size:14.5px;color:var(--tx2);line-height:1.7}
.k-pied{margin-top:auto;padding-top:22px;font-size:13px;color:var(--tx3)}
.k-pied a{color:var(--tx);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.k-pied a:hover{color:var(--or)}
[data-theme="jour"] .k-pied a:hover{color:var(--kick)}

.k-liste{list-style:none;margin:0;padding:0}
.k-liste li{font-size:14.5px;color:var(--tx2);line-height:1.6;padding:11px 0;
  display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.k-liste li:first-child{padding-top:0}
.k-liste li:last-child{padding-bottom:0}
.k-liste li + li{border-top:1px solid var(--line)}
.k-liste .lg{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx);border:1px solid var(--line);background:var(--bg);padding:4px 9px;line-height:1.3}
.k-liste .ou{flex:1 1 auto}
.k-liste .hh{flex:none;color:var(--tx);font-weight:700;text-align:right}
.k-liste li.ferme .hh{color:var(--tx3);font-weight:400}
.k-note{margin-top:18px;font-size:12.5px;color:var(--tx3);line-height:1.6}

.k-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px 36px}
.k-cols p{position:relative;padding-left:20px;font-size:14.5px;color:var(--tx2);line-height:1.7;margin:0}
.k-cols p::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;background:var(--or)}

.k-avis{border-left:2px solid var(--kick)}
.k-avis.bleu{border-left-color:var(--c2)}
.k-avis.bleu .k-t{color:var(--c2)}
.k-avis p{font-size:14.5px;color:var(--tx2);line-height:1.78;margin:0}
.k-avis b{color:var(--tx);font-weight:700}

.k-mail{font-size:14.5px;color:var(--tx);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;overflow-wrap:anywhere;font-weight:700}
.k-mail:hover{color:var(--or)}
[data-theme="jour"] .k-mail:hover{color:var(--kick)}
.k-quoi{margin-top:12px;font-size:13px;color:var(--tx3);line-height:1.65}

/* =========================================================
   FLUENT FORMS
   Le formulaire est bâti dans l'extension, mais il porte les
   couleurs, la typographie et les espacements du site.
   La feuille de Fluent Forms se charge après celle du thème :
   à spécificité égale c'est elle qui gagnerait, d'où le
   sélecteur en trois classes et quelques priorités forcées.
   ========================================================= */
.elal-ff-bloc .frm-fluent-form{margin:0}
.elal-ff-bloc .frm-fluent-form .ff-el-group{margin:0 0 20px}
/* Étiquette et bulle d'aide sur la même ligne : la bulle ne doit pas
   pousser un retour à la ligne pour elle toute seule. */
.elal-ff-bloc .frm-fluent-form .ff-el-input--label{display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;margin:0 0 8px}
.elal-ff-bloc .frm-fluent-form .ff-el-input--label label{display:inline;font-family:var(--b);
  font-size:13px;font-weight:700;color:var(--tx);letter-spacing:.01em;margin:0;line-height:1.4}

/* La bulle d'aide reprend l'or de la scène, le bleu par défaut de Fluent
   Forms n'appartient pas à la palette du bateau. */
.elal-ff-bloc .frm-fluent-form .ff-el-tooltip{margin:0;display:inline-flex;align-items:center;
  width:17px;height:17px;color:var(--tx3);transition:color .18s}
.elal-ff-bloc .frm-fluent-form .ff-el-tooltip:hover,
.elal-ff-bloc .frm-fluent-form .ff-el-tooltip:focus{color:var(--or)}
[data-theme="jour"] .elal-ff-bloc .frm-fluent-form .ff-el-tooltip:hover,
[data-theme="jour"] .elal-ff-bloc .frm-fluent-form .ff-el-tooltip:focus{color:var(--kick)}
.elal-ff-bloc .frm-fluent-form .ff-el-tooltip svg{width:17px;height:17px;fill:currentColor!important;display:block}
/* La bulle de contenu est posée à la racine du document par Fluent Forms :
   elle ne peut pas être ciblée depuis le bloc, d'où cette règle globale. */
.ff-el-pop-content{font-family:var(--b)!important;font-size:12.5px!important;line-height:1.55!important;
  background:var(--tx)!important;color:var(--bg)!important;border-radius:0!important;
  padding:11px 14px!important;max-width:290px;text-align:left!important;
  box-shadow:0 12px 30px rgba(0,0,0,.28)!important}
.elal-ff-bloc .frm-fluent-form .ff-el-is-required.asterisk-right label:after{color:var(--or);margin-left:3px}
[data-theme="jour"] .elal-ff-bloc .frm-fluent-form .ff-el-is-required.asterisk-right label:after{color:var(--kick)}

/* Une seule colonne : la grille de Fluent Forms bascule en pile selon une
   mesure faite en JavaScript, ce qui décale les champs de façon imprévisible. */
.elal-ff-bloc .frm-fluent-form .ff-t-container{display:block!important;gap:0}
.elal-ff-bloc .frm-fluent-form .ff-t-cell{width:100%!important;padding:0!important;max-width:none!important}

.elal-ff-bloc .frm-fluent-form .ff-el-form-control{width:100%;font-family:var(--b);font-size:15px;
  line-height:1.55;color:var(--tx)!important;background:var(--bg)!important;
  border:1px solid var(--line)!important;border-radius:0!important;padding:13px 15px!important;
  box-shadow:none!important;height:auto;min-height:0;transition:border-color .2s,background .2s}
.elal-ff-bloc .frm-fluent-form textarea.ff-el-form-control{min-height:96px;resize:vertical}
.elal-ff-bloc .frm-fluent-form .ff-el-form-control:hover{border-color:var(--gh-bd)!important}
.elal-ff-bloc .frm-fluent-form .ff-el-form-control:focus{outline:none;border-color:var(--or)!important;
  background:var(--bg3)!important;box-shadow:0 0 0 3px rgba(233,184,76,.16)!important}
.elal-ff-bloc .frm-fluent-form .ff-el-form-control::placeholder{color:var(--tx3);opacity:1}
.elal-ff-bloc .frm-fluent-form select.ff-el-form-control{-webkit-appearance:none;appearance:none;
  padding-right:42px!important;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

.elal-ff-bloc .frm-fluent-form .ff-el-help-message{margin:9px 0 0;font-size:12.5px;
  line-height:1.6;color:var(--tx3)!important;font-style:normal}
.elal-ff-bloc .frm-fluent-form .error-text,
.elal-ff-bloc .frm-fluent-form .text-danger,
.elal-ff-bloc .frm-fluent-form .ff-el-is-error .error{color:#D2685E!important;font-size:12.5px;margin-top:7px}

/* Cases et boutons radio dessinés, comme sur le reste du site. */
.elal-ff-bloc .frm-fluent-form .ff-el-form-check{margin:0 0 9px;padding:0}
.elal-ff-bloc .frm-fluent-form .ff-el-form-check-label{display:flex;align-items:center;gap:13px;
  margin:0;padding:13px 16px;border:1px solid var(--line);background:var(--bg);cursor:pointer;
  transition:.18s;min-height:52px;font-size:14.5px;color:var(--tx2);line-height:1.45;font-weight:400}
.elal-ff-bloc .frm-fluent-form .ff-el-form-check-label:hover{border-color:var(--gh-bd)}
.elal-ff-bloc .frm-fluent-form .ff-el-form-check-label:has(input:checked){border-color:var(--or);
  background:var(--bg3);color:var(--tx)}
.elal-ff-bloc .frm-fluent-form .ff-el-form-check input[type=checkbox],
.elal-ff-bloc .frm-fluent-form .ff-el-form-check input[type=radio]{appearance:none;-webkit-appearance:none;
  width:19px!important;height:19px!important;flex:none;margin:0!important;float:none;
  border:1px solid var(--gh-bd)!important;background:var(--bg2)!important;border-radius:2px;
  cursor:pointer;position:relative;transition:.15s;box-shadow:none!important}
.elal-ff-bloc .frm-fluent-form .ff-el-form-check input[type=radio]{border-radius:50%}
.elal-ff-bloc .frm-fluent-form .ff-el-form-check input:checked{background:var(--or)!important;border-color:var(--or)!important}
.elal-ff-bloc .frm-fluent-form .ff-el-form-check input[type=checkbox]:checked::after{content:"";
  position:absolute;left:6px;top:2px;width:5px;height:10px;border-right:2px solid var(--sur-or);
  border-bottom:2px solid var(--sur-or);transform:rotate(43deg)}
.elal-ff-bloc .frm-fluent-form .ff-el-form-check input[type=radio]:checked::after{content:"";
  position:absolute;inset:4px;border-radius:50%;background:var(--sur-or)}
.elal-ff-bloc .frm-fluent-form .ff-el-form-check input:focus-visible{outline:2px solid var(--or);outline-offset:2px}

.elal-ff-bloc .frm-fluent-form .ff-btn-submit{font-family:var(--b)!important;font-weight:700!important;
  font-size:11.5px!important;letter-spacing:.15em;text-transform:uppercase;padding:16px 28px!important;
  border:1px solid transparent!important;border-radius:0!important;background:var(--cta-bg)!important;
  color:var(--cta-tx)!important;cursor:pointer;transition:.22s;box-shadow:none!important;height:auto}
.elal-ff-bloc .frm-fluent-form .ff-btn-submit:hover{background:var(--tx)!important;color:var(--bg)!important}
.elal-ff-bloc .frm-fluent-form .ff-btn-submit:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.elal-ff-bloc .frm-fluent-form .ff-el-group.ff-text-left{margin-top:30px;padding-top:26px;
  border-top:1px solid var(--line)}

.elal-ff-bloc .ff-message-success,.elal-ff-bloc .ff_submit_success{padding:18px 22px;font-size:14.5px;
  line-height:1.7;color:var(--tx);border:1px solid var(--line);border-left:2px solid var(--c3);
  background:var(--bg);border-radius:0}
.elal-ff-bloc .ff-errors-in-stack{padding:18px 22px;font-size:14.5px;color:var(--tx);
  border:1px solid var(--line);border-left:2px solid #D2685E;background:var(--bg);border-radius:0}

/* Le module anti-robot garde son apparence d'origine : elle est reconnue des
   visiteurs, la déguiser nuirait à la confiance. */
.elal-ff-bloc .ff-el-recaptcha,.elal-ff-bloc .ff-el-hcaptcha,.elal-ff-bloc .ff-el-turnstile{margin-top:6px}

/* =========================================================
   Archives des concerts
   Une liste dense, lisible en diagonale, où l'année sert de
   repère. Le format tableau plutôt que la grille de cartes :
   une archive se parcourt, elle ne se contemple pas.
   ========================================================= */
.arch-compte{font-family:var(--b);font-size:11px;letter-spacing:.23em;text-transform:uppercase;
  color:var(--tx3);font-weight:700;margin:0 0 10px}
.arch-compte b{color:var(--kick);font-weight:700}

.arch{border-top:1px solid var(--line)}

.arch-an{font-family:var(--d);font-variation-settings:"opsz" 56;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(30px,4.4vw,44px);line-height:1;color:var(--tx);
  margin:0;padding:38px 0 14px;background:var(--bg)}
.arch-an:first-child{padding-top:26px}

.arch-l{display:grid;grid-template-columns:132px 1fr 190px;gap:24px;align-items:baseline;
  padding:17px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:background .18s,padding-left .18s}
.arch-l:hover,.arch-l:focus-visible{background:var(--bg2);padding-left:14px}
.arch-l:focus-visible{outline:2px solid var(--or);outline-offset:-2px}

.arch-l .d{font-family:var(--b);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx3);font-weight:600;white-space:nowrap}
.arch-l .t{font-family:var(--d);font-variation-settings:"opsz" 24;font-weight:600;letter-spacing:-.015em;
  font-size:19px;line-height:1.25;color:var(--tx)}
.arch-l:hover .t{color:var(--kick)}
.arch-l .t em{display:block;font-family:var(--b);font-style:normal;font-weight:400;font-size:13.5px;
  letter-spacing:0;line-height:1.5;color:var(--tx2);margin-top:5px}
.arch-l .g{font-family:var(--b);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx3);text-align:right;line-height:1.5}

@media(max-width:900px){
  .arch-l{grid-template-columns:112px 1fr;gap:16px}
  .arch-l .g{grid-column:2;text-align:left;letter-spacing:.1em;margin-top:2px}
}
@media(max-width:520px){
  .arch-l{grid-template-columns:1fr;gap:5px;padding:15px 4px}
  .arch-l .g{grid-column:1}
}

/* Pagination des archives : même vocabulaire que celle de l'agenda. */
.pagi{margin-top:46px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pagi a,.pagi span{display:grid;place-items:center;min-width:44px;height:44px;padding:0 14px;
  border:1px solid var(--line);color:var(--tx2);text-decoration:none;
  font-family:var(--b);font-size:13.5px;font-weight:600;transition:.18s}
.pagi a:hover{border-color:var(--or);color:var(--kick)}
.pagi a:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.pagi .current{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.pagi .dots{border-color:transparent}

.arch-retour{margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}

/* Lien de l'agenda vers les archives. */
.ag-vers-arch{margin:0}
.ag-vers-arch a{font-family:var(--b);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--tx3);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:4px;transition:.18s}
.ag-vers-arch a:hover{color:var(--kick);border-color:var(--or)}

/* Bandeau d'une fiche dont la date est passée : dire les choses sans
   dévaloriser la page, qui reste une trace utile de la programmation. */
.bandeau-passe{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Volontairement padding-top/bottom et non le raccourci : cet élément porte
   aussi la classe « wrap », dont les marges latérales seraient effacées. */
.bandeau-passe .in{padding-top:20px;padding-bottom:20px;display:flex;gap:14px 34px;align-items:baseline;
  justify-content:space-between;flex-wrap:wrap}
.bandeau-passe p{margin:0;font-size:14.5px;line-height:1.7;color:var(--tx2)}
.bandeau-passe p b{color:var(--tx);font-weight:700}
.bandeau-passe .lns{display:flex;gap:22px;flex-wrap:wrap}
.bandeau-passe .lns a{font-family:var(--b);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--kick);text-decoration:none;white-space:nowrap;transition:.18s}
.bandeau-passe .lns a:hover{color:var(--tx)}
.bandeau-passe .lns a:focus-visible{outline:2px solid var(--or);outline-offset:3px}

/* Deux blocs de corps qui se suivent ne doivent pas cumuler leurs réserves
   verticales : la page respire une fois, pas deux. */
.page-corps + .page-corps{padding-top:0}
.page-tete + .page-corps{padding-top:48px}

/* Une rangée de boutons, posée par le bloc « Boutons ». */
.btns{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .cta .btns{margin-top:0}

/* Le bloc « Image et texte » peut inverser ses deux colonnes. */
.split.inverse .im{order:2}
.split.inverse .tx{order:1}

/*
 * Pied de page sur telephone.
 *
 * Sous 880 pixels le pied passe a deux colonnes, et le bloc de marque se
 * retrouve dans une demi-colonne : l'embleme et le mot-symbole sont cote a
 * cote, si bien que le dernier mot debordait sur la colonne voisine et allait
 * toucher le bord droit.
 *
 * Le bloc reprend donc toute la largeur sous 560 pixels, ce qui lui rend la
 * place dont il a besoin sans rien retirer : l'embleme reste, et il reste a la
 * meme taille que sur l'ordinateur. Le mot-symbole est seulement un peu
 * reduit, pour tenir sur deux lignes plutot que trois.
 */
@media (max-width:560px){
	.ft{grid-template-columns:1fr 1fr;gap:30px}
	.ft>*:first-child{grid-column:1 / -1}
	.ft .big{font-size:26px}
}

/*
 * Carrousel photo.
 *
 * Bande a hauteur fixe et largeur libre : chaque photo garde ses proportions,
 * ce qui evite de rogner les portraits. Le bord droit laisse deviner la photo
 * suivante, qui est ce qui donne envie de cliquer.
 *
 * La regle max-width:none n'est pas decorative : la feuille pose
 * img{max-width:100%} partout ailleurs, ce qui ecraserait des images dont la
 * largeur est justement libre.
 */
.carrousel{margin:46px 0}

.carrousel-bande{
	display:flex;
	gap:14px;
	overflow-x:auto;
	overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	padding:2px 2px 12px;
	margin:0 -2px;
	scrollbar-width:thin;
}
.carrousel-bande::-webkit-scrollbar{height:6px}
.carrousel-bande::-webkit-scrollbar-thumb{background:var(--tx3);border-radius:3px}
.carrousel-bande::-webkit-scrollbar-track{background:transparent}

.carrousel-bande>*{flex:0 0 auto;margin:0;scroll-snap-align:start}

.carrousel-bande img{
	display:block;
	height:clamp(220px,40vw,430px);
	width:auto;
	max-width:none;
	object-fit:cover;
}

.carrousel-bande figcaption{
	margin-top:9px;
	max-width:38ch;
	font-size:13px;
	line-height:1.55;
	color:var(--tx3);
}

.carrousel-bande:focus-visible{outline:2px solid var(--kick);outline-offset:4px}

.carrousel-barre{display:flex;align-items:center;gap:15px;margin-top:4px}

.carrousel-fleche{
	width:42px;
	height:42px;
	display:grid;
	place-items:center;
	padding:0;
	border:1px solid currentColor;
	background:none;
	color:var(--tx);
	cursor:pointer;
}
.carrousel-fleche svg{width:19px;height:19px}
.carrousel-fleche:hover:not(:disabled){color:var(--kick)}
.carrousel-fleche:disabled{opacity:.28;cursor:default}

.carrousel-compte{
	margin:0;
	font-size:12px;
	letter-spacing:.14em;
	color:var(--tx3);
	font-variant-numeric:tabular-nums;
}

/* Le defilement doux devient brutal quand on demande moins de mouvement. */
@media (prefers-reduced-motion:reduce){
	.carrousel-bande{scroll-behavior:auto}
}

/*
 * Dans l'editeur, WordPress intercale deux conteneurs entre le bloc et ses
 * enfants : sans display:contents la bande ne voit pas ses images et la grille
 * ne s'applique pas. Le calage par pas de photo est aussi retire, il gene la
 * prise en main a la souris.
 */
.carrousel--edition .block-editor-inner-blocks,
.carrousel--edition .block-editor-block-list__layout{display:contents}
.carrousel--edition .carrousel-bande{scroll-snap-type:none;scroll-behavior:auto}

/* Sans JavaScript la barre reste masquee : display:flex l'emporterait sinon sur [hidden]. */
.carrousel-barre[hidden]{display:none}

/*
 * Dans l'editeur, les blocs Image ne sont pas des enfants directs de la bande :
 * WordPress intercale ses conteneurs, que display:contents efface a l'affichage
 * mais pas dans les selecteurs. Les regles de la bande sont donc reecrites ici
 * en descendance, avec assez de poids pour passer devant celles de Gutenberg.
 */
.carrousel--edition .carrousel-bande .wp-block-image{flex:0 0 auto;margin:0;scroll-snap-align:start}
/* Gutenberg impose sa propre taille d'image dans l'editeur, d'ou le poids force ici. */
.carrousel--edition .carrousel-bande .wp-block-image img{
	display:block;
	height:clamp(220px,40vw,430px) !important;
	width:auto !important;
	max-width:none !important;
	object-fit:cover;
}

/*
 * Le bouton d'ajout de photo est pose en absolu par Gutenberg et se superpose
 * alors a la derniere image. On lui rend une place a lui, en fin de bande.
 */
.carrousel--edition .carrousel-bande .block-list-appender{
	position:static;
	flex:0 0 auto;
	align-self:center;
	width:50px;
	margin:0;
}

/*
 * La bande impose la hauteur des photos : les poignees de redimensionnement du
 * bloc Image n'auraient aucun effet visible. On ne les propose donc pas.
 */
.carrousel--edition .carrousel-bande .components-resizable-box__handle{display:none}