/*
Theme Name: Chœur 2026
Theme URI: https://www.choeurthevoice.ovh/
Author: Chœur The Voice
Description: Thème bloc du Chœur The Voice : terracotta et bleu-nuit, mobile first, animations légères, espace enfants et formation musicale interactive.
Version: 1.0.23
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: choeur-2026
*/

/* ==========================================================================
   Jetons — palette de la charte (bleu-nuit, terracotta, sable)
   Mobile first : styles de base = téléphone ; 640px = tablette ; 1024px = PC
   ========================================================================== */
:root{
  --cv-navy:#1F2A44; --cv-navy-2:#2A3757; --cv-terra:#C8553D; --cv-terra-ink:#B0432C; --cv-sand:#E8DCCB; --cv-cream:#F7F3EC;
  --cv-bg:#FBF7F1; --cv-surface:#FFFFFF; --cv-tint:#F1E8DB; --cv-ink:#1F2A44; --cv-muted:#5B6479; --cv-line:#E2D8C9;
  --cv-on-navy:#F7F3EC; --cv-on-navy-muted:#B9C0D3;
  --cv-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --cv-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cv-hand:"Caveat","Comic Sans MS",cursive;
  --cv-r-lg:24px; --cv-r-md:16px; --cv-ease:cubic-bezier(.2,.8,.2,1.2);
  --cv-gutter:max(16px,env(safe-area-inset-left,0px));
  --cv-sec:64px;
}
@media (min-width:640px){:root{--cv-r-lg:28px;--cv-sec:80px;--cv-gutter:max(24px,env(safe-area-inset-left,0px))}}
@media (min-width:1024px){:root{--cv-sec:104px;--cv-gutter:max(32px,env(safe-area-inset-left,0px))}}

html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--cv-bg);color:var(--cv-ink);font-family:var(--cv-body);overflow-x:clip;-webkit-tap-highlight-color:transparent}
:where(.cv) *{box-sizing:border-box}
.cv h1,.cv h2,.cv h3{font-family:var(--cv-display);line-height:1.04;margin:0;text-wrap:balance;letter-spacing:-.02em}
.cv p{margin:0;text-wrap:pretty}
:focus-visible{outline:3px solid var(--cv-terra);outline-offset:3px;border-radius:6px}
.cv-wrap{max-width:1180px;margin-inline:auto;padding-left:var(--cv-gutter);padding-right:max(var(--cv-gutter),env(safe-area-inset-right,0px))}
.cv-eyebrow{display:inline-block;font:600 .75rem/1.2 var(--cv-body);letter-spacing:.14em;text-transform:uppercase;color:var(--cv-terra-ink)}
.cv-hand{font-family:var(--cv-hand);font-size:1.45rem;line-height:1;color:var(--cv-terra-ink)}
.cv-skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--cv-surface);padding:10px 16px;border-radius:999px}
.cv-skip:focus{left:16px}

/* Boutons (min 48px de haut pour le doigt) */
.cv-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;font:600 1rem var(--cv-body);padding:.8em 1.4em;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .35s var(--cv-ease),box-shadow .35s}
.cv-btn:active{transform:scale(.97)}
.cv-btn-terra{background:var(--cv-terra);color:#fff;box-shadow:0 10px 30px -12px #C8553Daa}
.cv-btn-ghost{background:transparent;color:var(--cv-on-navy);box-shadow:inset 0 0 0 2px #F7F3EC55}
@media (hover:hover){.cv-btn:hover{transform:translateY(-3px) scale(1.03)}.cv-btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--cv-sand)}}

/* Grain (texture papier) */
.cv-grain{position:relative;isolation:isolate}
.cv-grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Barre de progression de lecture */
.cv-progress{position:fixed;inset:0 0 auto;height:3px;z-index:120;background:linear-gradient(90deg,var(--cv-terra),var(--cv-sand));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline:scroll()){.cv-progress{animation:cv-grow linear both;animation-timeline:scroll(root)}}
@keyframes cv-grow{to{transform:scaleX(1)}}

/* ==========================================================================
   En-tête
   ========================================================================== */
.cv-top{position:sticky;top:0;z-index:100;background:color-mix(in oklab,var(--cv-navy) 88%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);color:var(--cv-on-navy);border-bottom:1px solid #ffffff14}
.admin-bar .cv-top{top:46px} @media (min-width:783px){.admin-bar .cv-top{top:32px}}
.cv-top .cv-wrap{display:flex;align-items:center;gap:12px;min-height:64px;position:relative}
.cv-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cv-on-navy);font:700 1.05rem var(--cv-display);letter-spacing:-.01em;min-width:0}
.cv-brand img{width:40px;height:40px;background:var(--cv-cream);border-radius:12px;padding:4px;flex-shrink:0;transition:transform .5s var(--cv-ease)}
@media (hover:hover){.cv-brand:hover img{transform:rotate(-8deg) scale(1.08)}}
.cv-burger{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;background:#ffffff14;border:0;color:var(--cv-on-navy);border-radius:12px;padding:0 14px;font:600 .9rem var(--cv-body);cursor:pointer}
.cv-burger i{position:relative;width:18px;height:2px;background:currentColor;border-radius:2px;transition:background .2s}
.cv-burger i::before,.cv-burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--cv-ease)}
.cv-burger i::before{top:-6px}.cv-burger i::after{top:6px}
.cv-burger[aria-expanded="true"] i{background:transparent}
.cv-burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.cv-burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
.cv-top-cta{display:none}
/* Recherche d'un article : bouton loupe + barre sous l'en-tête */
.cv-search-toggle{margin-left:auto;display:inline-grid;place-items:center;width:44px;height:44px;background:#ffffff14;border:0;border-radius:12px;color:var(--cv-on-navy);cursor:pointer;transition:background .25s}
.cv-search-toggle+.cv-burger{margin-left:0}
@media (hover:hover){.cv-search-toggle:hover{background:#ffffff26}}
.cv-search{flex-wrap:wrap;display:none;position:absolute;top:100%;left:0;right:0;gap:10px;align-items:center;background:var(--cv-navy);padding:14px var(--cv-gutter);border-bottom:1px solid #ffffff14;z-index:2}
.cv-search.is-open{display:flex;animation:cv-drop .3s var(--cv-ease)}
.cv-search input[type=search]{flex:1;min-width:0;min-height:48px;padding:0 1.2em;border-radius:999px;border:1.5px solid #ffffff33;background:#ffffff12;color:var(--cv-on-navy);font:inherit;font-size:1rem}
.cv-search input[type=search]::placeholder{color:var(--cv-on-navy-muted)}
.cv-search input[type=search]:focus{outline:none;border-color:var(--cv-sand);box-shadow:0 0 0 4px #E8DCCB33}
.cv-search .cv-btn{flex-shrink:0;min-height:48px}
.cv-search-hint{flex-basis:100%;margin:0;font-size:.85rem;color:var(--cv-on-navy-muted)}.cv-search-hint b{color:var(--cv-sand)}
@media (max-width:479px){.cv-search .cv-btn{padding-inline:1.1em}}
/* Menu mobile : panneau déroulant */
.cv-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cv-navy);padding:8px var(--cv-gutter) 24px;border-bottom:1px solid #ffffff14;max-height:calc(100dvh - 64px);overflow:auto}
.cv-nav.is-open{display:block;animation:cv-drop .35s var(--cv-ease)}
@keyframes cv-drop{from{opacity:0;transform:translateY(-8px)}}
.cv-menu,.cv-menu ul{list-style:none;margin:0;padding:0}
.cv-menu a{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:12px;color:var(--cv-on-navy);text-decoration:none;font:600 1.05rem var(--cv-body)}
.cv-menu .sub-menu{padding-left:16px;border-left:2px solid #ffffff1c;margin-left:12px}
.cv-menu .sub-menu a{font-weight:500;color:var(--cv-on-navy-muted);font-size:.98rem}
.cv-menu .current-menu-item>a{color:var(--cv-sand)}
.cv-nav .cv-btn{width:100%;margin-top:12px}
/* Compte : icône à droite (avatar connecté / pictogramme invité) + menu déroulant */
.cv-compte{position:relative;flex-shrink:0}
.cv-compte-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#ffffff14;color:var(--cv-on-navy)}
.cv-compte-ico svg{width:22px;height:22px}
.cv-compte-lien{display:inline-grid;place-items:center;transition:background .25s}
@media (hover:hover){.cv-compte-lien:hover{background:#ffffff26}}
.cv-compte-btn{display:grid;place-items:center;width:44px;height:44px;padding:3px;border:0;border-radius:12px;background:#ffffff14;cursor:pointer;transition:background .25s}
.cv-compte-btn[aria-expanded="true"]{background:#ffffff26}
@media (hover:hover){.cv-compte-btn:hover{background:#ffffff26}}
.cv-compte-img{width:100%;height:100%;border-radius:9px;display:block}
.cv-compte-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:210px;background:var(--cv-navy);border:1px solid #ffffff1c;border-radius:16px;box-shadow:0 24px 48px -20px #000a;padding:8px;z-index:120;animation:cv-drop .25s var(--cv-ease)}
.cv-compte-menu[hidden]{display:none}
.cv-compte-nom{margin:0 0 6px;padding:8px 14px 10px;font:700 .95rem var(--cv-display);color:var(--cv-sand);border-bottom:1px solid #ffffff1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.cv-compte-menu a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--cv-on-navy);text-decoration:none;font:600 .95rem var(--cv-body)}
@media (hover:hover){.cv-compte-menu a:hover{background:#ffffff14;color:var(--cv-sand)}}

/* ==========================================================================
   Héros
   ========================================================================== */
.cv-hero{background:var(--cv-navy);color:var(--cv-on-navy);overflow:hidden;position:relative}
.cv-hero .cv-wrap{display:grid;gap:36px;padding-block:40px 112px;position:relative;z-index:2}
.cv-hero h1{font-size:clamp(3rem,14.5vw,8.4rem);font-weight:800;font-variation-settings:"opsz" 96;letter-spacing:-.045em;margin-top:14px}
.cv-hero h1 span{display:block}
.cv-hero .cv-accent{color:var(--cv-terra);position:relative;display:inline-block}
.cv-hero .cv-accent svg{position:absolute;left:0;bottom:-.06em;width:100%;height:.2em;overflow:visible}
.cv-hero .cv-accent path{stroke:var(--cv-sand);stroke-width:6;fill:none;stroke-linecap:round;stroke-dasharray:420;animation:cv-draw 1.6s .5s var(--cv-ease) backwards}
@keyframes cv-draw{from{stroke-dashoffset:420}}
.cv-hero .cv-lead{font-size:1.06rem;line-height:1.6;color:var(--cv-on-navy-muted);max-width:46ch;margin-top:22px}
.cv-ctas{display:grid;gap:10px;margin-top:28px}
.cv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.cv-chip{display:flex;gap:8px;align-items:baseline;padding:.5em .95em;border-radius:999px;background:#ffffff10;border:1px solid #ffffff1c;font-size:.86rem;color:var(--cv-on-navy-muted)}
.cv-chip b{font:800 1.1rem var(--cv-display);color:var(--cv-sand);font-variant-numeric:tabular-nums}
.cv-stage{position:relative;aspect-ratio:1;width:min(100%,250px);margin-inline:auto;display:grid;place-items:center}
.cv-halo{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at var(--mx,50%) var(--my,45%),#C8553D88,#C8553D22 40%,transparent 68%);filter:blur(8px)}
.cv-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed #E8DCCB40;animation:cv-spin 40s linear infinite}
.cv-ring.r2{inset:12%;border-style:solid;border-color:#E8DCCB22;animation-duration:60s;animation-direction:reverse}
@keyframes cv-spin{to{transform:rotate(1turn)}}
.cv-emblem{position:relative;width:72%;border:0;background:var(--cv-cream);border-radius:38% 62% 55% 45%/48% 42% 58% 52%;padding:11%;box-shadow:0 40px 80px -30px #000a;animation:cv-blob 12s ease-in-out infinite;cursor:pointer}
.cv-emblem img{display:block;width:100%;height:auto;transition:transform .5s var(--cv-ease)}
.cv-emblem:active img{transform:scale(.94)}
@media (hover:hover){.cv-emblem:hover img{transform:scale(1.06) rotate(-3deg)}}
@keyframes cv-blob{50%{border-radius:55% 45% 40% 60%/40% 58% 42% 60%}}
.cv-tap{position:absolute;bottom:2%;right:0;transform:rotate(-6deg);color:var(--cv-sand)}
.cv-notes{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.cv-note{position:absolute;bottom:-60px;width:var(--s,28px);color:var(--c,#E8DCCB);opacity:0;animation:cv-float var(--d,14s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes cv-float{0%{transform:translate(0,0) rotate(-10deg);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translate(var(--x,40px),-115vh) rotate(18deg);opacity:0}}
.cv-burst{position:fixed;pointer-events:none;z-index:130;width:24px;color:var(--cv-terra);animation:cv-burst 1.1s var(--cv-ease) forwards}
@keyframes cv-burst{to{transform:translate(var(--bx),var(--by)) rotate(var(--br)) scale(.6);opacity:0}}
.cv-eq{position:absolute;left:0;right:0;bottom:50px;height:56px;display:flex;align-items:flex-end;gap:4px;padding-inline:var(--cv-gutter);opacity:.3;z-index:1}
.cv-eq i{flex:1;background:linear-gradient(var(--cv-terra),var(--cv-sand));border-radius:5px 5px 2px 2px;height:30%;animation:cv-eq 1.6s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.13s)}
.cv-eq i:nth-child(n+25){display:none}
@keyframes cv-eq{0%{height:12%}50%{height:85%}100%{height:35%}}
.cv-wave{display:block;width:100%;height:44px;position:absolute;bottom:-1px;left:0;z-index:3}
.cv-wave path{fill:var(--cv-bg)}

/* Bandeau défilant */
.cv-marquee{background:var(--cv-terra);color:#fff;overflow:hidden;transform:rotate(-1.5deg);margin:20px -12px 0;padding-block:12px;box-shadow:0 16px 40px -20px #C8553D}
.cv-marquee .cv-track{display:flex;width:max-content;animation:cv-slide 30s linear infinite}
.cv-marquee span{font:700 1.2rem var(--cv-display);padding-inline:18px;white-space:nowrap;display:flex;align-items:center;gap:36px}
.cv-marquee span::after{content:"♪";color:var(--cv-navy)}
@keyframes cv-slide{to{transform:translateX(-50%)}}

/* Sections */
.cv-sec{padding-block:var(--cv-sec)}
.cv-head{display:grid;gap:12px;margin-bottom:32px;max-width:760px}
.cv-head h2{font-size:clamp(2rem,8.4vw,4rem);font-weight:800}
.cv-head p{color:var(--cv-muted);font-size:1.05rem;max-width:58ch}
@supports (animation-timeline:view()){
  .cv-reveal{animation:cv-rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
}
@keyframes cv-rise{from{opacity:.15;transform:translateY(40px) scale(.97)}}

/* ==========================================================================
   Bento
   ========================================================================== */
.cv-bento{display:grid;grid-template-columns:1fr;gap:12px}
.cv-tile{border-radius:var(--cv-r-lg);padding:24px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;text-decoration:none;color:inherit;min-width:0;
  transition:transform .5s var(--cv-ease),box-shadow .5s;container-type:inline-size;background:var(--cv-surface);border:1px solid var(--cv-line)}
@media (hover:hover){a.cv-tile:hover,.cv-bento div.cv-tile:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 30px 60px -30px #1F2A4466}a.cv-tile:hover .cv-more::after,.cv-bento div.cv-tile:hover a.cv-more::after{transform:translateX(6px)}a.cv-tile:hover .cv-deco{transform:rotate(-12deg) scale(1.08)}}
.cv-tile h3{font-size:clamp(1.35rem,6cqi,2rem);font-weight:750}
.cv-tile p{color:var(--cv-muted)}
.cv-more{margin-top:auto;padding-top:6px;font-weight:600;display:flex;align-items:center;gap:6px;color:var(--cv-terra-ink)}
.cv-more::after{content:"→";transition:transform .3s var(--cv-ease)}
a.cv-more{text-decoration:none;align-self:flex-start}a.cv-more:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:6px}
.cv-t-navy{background:var(--cv-navy);color:var(--cv-on-navy);border-color:transparent}
.cv-t-navy p{color:var(--cv-on-navy-muted)}.cv-t-navy .cv-more,.cv-t-navy .cv-eyebrow{color:var(--cv-sand)}
.cv-t-terra{background:var(--cv-terra);color:#fff;border-color:transparent}
.cv-t-terra p{color:#FFE9E1}.cv-t-terra .cv-more,.cv-t-terra .cv-eyebrow{color:#fff}
.cv-t-sand{background:var(--cv-tint)}
.cv-big-num{font:800 clamp(4rem,30cqi,7.5rem)/.9 var(--cv-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.cv-deco{position:absolute;right:-20px;bottom:-24px;width:42%;max-width:200px;opacity:.14;transition:transform .8s var(--cv-ease);pointer-events:none}
.cv-pupitres{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.cv-pupitres button{min-height:56px;border:1px solid var(--cv-line);background:var(--cv-bg);color:var(--cv-ink);border-radius:14px;padding:10px 12px;font:600 .95rem var(--cv-body);cursor:pointer;text-align:left;transition:all .3s var(--cv-ease)}
.cv-pupitres button span{display:block;font:400 .76rem var(--cv-body);color:var(--cv-muted)}
.cv-pupitres button[aria-pressed="true"]{background:var(--cv-navy);color:var(--cv-on-navy);border-color:var(--cv-navy)}
.cv-pupitres button[aria-pressed="true"] span{color:var(--cv-on-navy-muted)}
@media (hover:hover){.cv-pupitres button:hover{border-color:var(--cv-navy);transform:scale(1.03)}}
.cv-mini-eq{display:flex;gap:4px;align-items:flex-end;height:40px}
.cv-mini-eq i{width:8px;border-radius:4px;background:var(--cv-terra);animation:cv-eq 1.2s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.17s)}

/* ==========================================================================
   Adultes / Enfants
   ========================================================================== */
.cv-duo{background:var(--cv-tint)}
.cv-switch{display:flex;background:var(--cv-surface);border:1px solid var(--cv-line);border-radius:999px;padding:5px;gap:4px;margin-bottom:28px;width:100%}
.cv-switch button{flex:1;min-height:48px;border:0;background:transparent;color:var(--cv-muted);font:700 1rem var(--cv-display);padding:0 1.2em;border-radius:999px;cursor:pointer;transition:color .3s,background .3s}
.cv-switch button[aria-selected="true"]{background:var(--cv-navy);color:var(--cv-on-navy)}
.cv-duo[data-mode="kids"] .cv-switch button[aria-selected="true"]{background:var(--cv-terra);color:#fff}
.cv-duo-panel{display:grid;gap:32px;align-items:center;view-transition-name:cv-duo}
.cv-duo-panel h3{font-size:clamp(1.9rem,8vw,3.4rem);font-weight:800}
.cv-duo-panel ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:14px}
.cv-duo-panel li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.cv-duo-panel li b{display:block;font-weight:600}
.cv-duo-panel li span{color:var(--cv-muted);font-size:.95rem}
.cv-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--cv-navy);color:var(--cv-sand)}
.cv-duo[data-mode="kids"] .cv-ico{background:var(--cv-terra);color:#fff;border-radius:50%}
.cv-ico svg{width:20px;height:20px}
.cv-duo-art{order:-1;aspect-ratio:16/10;border-radius:44% 56% 40% 60%/55% 45% 55% 45%;background:var(--cv-navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10% 14%;position:relative;overflow:hidden;max-width:100%;min-width:0}
.cv-duo[data-mode="kids"] .cv-duo-art{background:var(--cv-terra);border-radius:50% 50% 46% 54%/60% 60% 40% 40%}
.cv-duo-art .cv-big{font:800 clamp(2.2rem,10vw,4.6rem)/1 var(--cv-display);color:var(--cv-sand);letter-spacing:-.03em;text-align:center;max-width:100%;overflow-wrap:anywhere}
.cv-duo-art .cv-big small{display:block;font:600 .8rem var(--cv-body);letter-spacing:.14em;text-transform:uppercase;color:#ffffffc0;margin-top:8px}
.cv-duo-art .cv-hand{position:static;color:#fff;transform:rotate(-4deg);text-align:center}
::view-transition-old(cv-duo){animation:.25s ease-in both cv-vtout}
::view-transition-new(cv-duo){animation:.4s var(--cv-ease) both cv-vtin}
@keyframes cv-vtout{to{opacity:0;transform:translateX(-24px)}}
@keyframes cv-vtin{from{opacity:0;transform:translateX(24px)}}

/* ==========================================================================
   Portée des 12 leçons — défilement horizontal au doigt sur mobile
   ========================================================================== */
.cv-staff-box{background:var(--cv-surface);border:1px solid var(--cv-line);border-radius:var(--cv-r-lg);padding:20px 0;overflow:hidden}
.cv-swipe{display:flex;align-items:center;gap:8px;padding:0 20px 8px;color:var(--cv-muted);font-size:.85rem}
.cv-swipe::after{content:"→";animation:cv-nudge 1.4s ease-in-out infinite}
@keyframes cv-nudge{50%{transform:translateX(6px)}}
.cv-staff-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-inline:20px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
/* Portée : 5 lignes à 60, 84, 108, 132, 156 px (interligne 24 px, demi-pas 12 px). Mi4 = ligne du bas. */
.cv-staff{position:relative;height:212px;width:900px;
  background:repeating-linear-gradient(to bottom,var(--cv-line) 0 2px,transparent 2px 24px) 0 59px/100% 100px no-repeat}
.cv-clef{position:absolute;left:0;top:14px;font:400 132px/1 serif;color:var(--cv-muted);opacity:.5;user-select:none}
.cv-lesson{position:absolute;left:calc(96px + (100% - 130px) * var(--i) / 11);top:var(--y);width:48px;height:72px;transform:translate(-50%,-22.5px);scroll-snap-align:center;border:0;background:none;cursor:pointer;padding:0;color:var(--cv-ink)}
.cv-lesson .cv-head{position:absolute;left:9px;top:12px;width:28px;height:21px;border-radius:50%;background:currentColor;transform:rotate(-22deg);transition:transform .35s var(--cv-ease)}
.cv-lesson .cv-head::after{content:"";position:absolute;right:0;bottom:11px;width:3px;height:60px;background:currentColor;border-radius:2px}
.cv-lesson .cv-n{position:absolute;top:44px;left:50%;transform:translateX(-50%);font:700 .74rem var(--cv-body);color:var(--cv-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cv-lesson[aria-pressed="true"]{color:var(--cv-terra)}
.cv-lesson[aria-pressed="true"] .cv-head{transform:rotate(-22deg) scale(1.3)}
.cv-lesson.is-open:not([aria-pressed="true"]){color:var(--cv-navy)}
.cv-lesson:not(.is-open):not([aria-pressed="true"]){color:#9AA2B5}
@media (hover:hover){.cv-lesson:hover .cv-head{transform:rotate(-22deg) scale(1.3)}}
.cv-lesson-card{margin:16px 20px 0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:center;padding:18px;border-radius:var(--cv-r-md);background:var(--cv-tint)}
.cv-lesson-card .cv-num{font:800 2.6rem/1 var(--cv-display);color:var(--cv-terra-ink);font-variant-numeric:tabular-nums;grid-row:span 2}
.cv-lesson-card h3{font-size:1.25rem}
.cv-lesson-card p{color:var(--cv-muted);font-size:.95rem}
.cv-lesson-card .cv-when{grid-column:1/-1;font-weight:600;font-size:.9rem;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:8px}
.cv-lesson-card .cv-when a{color:var(--cv-terra-ink)}
.cv-legend{display:flex;flex-wrap:wrap;gap:16px;padding:12px 20px 0;font-size:.82rem;color:var(--cv-muted)}
.cv-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}

/* ==========================================================================
   Coin des petits (piano)
   ========================================================================== */
.cv-kids{background:var(--cv-navy);color:var(--cv-on-navy);border-radius:32px;margin-inline:8px;position:relative;overflow:hidden}
.cv-kids .cv-head p{color:var(--cv-on-navy-muted)}
.cv-kids .cv-eyebrow{color:var(--cv-sand)}
.cv-kids-grid{display:grid;gap:32px}
.cv-piano{position:relative;display:flex;height:170px;user-select:none;-webkit-user-select:none;touch-action:manipulation;max-width:100%}
.cv-key{flex:1;min-width:0;border:0;background:#F7F3EC;color:var(--cv-navy);border-radius:0 0 14px 14px;margin:0 2px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:12px;font:700 .82rem var(--cv-display);cursor:pointer;
  box-shadow:inset 0 -8px 0 #E8DCCB;transition:transform .12s,box-shadow .12s,background .2s}
.cv-key small{display:none;font:500 .68rem var(--cv-body);color:#5B6479;margin-top:2px}
.cv-key.on{transform:translateY(4px);box-shadow:inset 0 -3px 0 var(--cv-terra);background:#FFE3D8}
.cv-bk{position:absolute;top:0;width:calc(100% / 8 * .56);height:56%;background:#0E1428;border-radius:0 0 10px 10px;border:0;cursor:pointer;z-index:2;box-shadow:inset 0 -7px 0 #2A3757;transform:translateX(-50%);transition:background .12s}
.cv-bk{display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px}
.cv-bk small{font:700 .72rem var(--cv-body);color:var(--cv-sand)}
.cv-bk.on{background:var(--cv-terra);box-shadow:inset 0 -3px 0 #8E3524}
.cv-piano-hint{display:none;margin-top:14px;color:var(--cv-on-navy-muted);font-size:.9rem}
.cv-piano-hint kbd{font:600 .8rem var(--cv-body);background:#ffffff18;border-radius:6px;padding:1px 6px}
.cv-kid-cards{display:grid;gap:10px}
.cv-kid-card{background:#ffffff0f;border:1px solid #ffffff1a;border-radius:var(--cv-r-md);padding:16px 18px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.cv-kid-card .cv-badge{width:48px;height:48px;border-radius:50%;background:var(--cv-terra);display:grid;place-items:center;font:800 1.2rem var(--cv-display);animation:cv-bob 3s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes cv-bob{50%{transform:translateY(-5px) rotate(6deg)}}
.cv-kid-card b{font-family:var(--cv-display);font-size:1.1rem}
.cv-kid-card p{color:var(--cv-on-navy-muted);font-size:.92rem}

/* ==========================================================================
   Actualités (boucle de requête WordPress)
   ========================================================================== */
.cv-posts .wp-block-post-template{display:grid;grid-template-columns:1fr;gap:16px;list-style:none;padding:0;margin:0}
.cv-card{height:100%;background:var(--cv-surface);border:1px solid var(--cv-line);border-radius:var(--cv-r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .45s var(--cv-ease),box-shadow .45s}
@media (hover:hover){.cv-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px #1F2A4455}}
.cv-card .wp-block-post-featured-image{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--cv-tint)}
.cv-card .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}
.cv-card-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.cv-card .wp-block-post-date{font:600 .78rem var(--cv-body);letter-spacing:.1em;text-transform:uppercase;color:var(--cv-terra-ink)}
.cv-card .wp-block-post-title{font:750 1.3rem/1.15 var(--cv-display);margin:0}
.cv-card .wp-block-post-title a{text-decoration:none;color:var(--cv-ink)}
.cv-card .wp-block-post-title a::after{content:"";position:absolute;inset:0}
.cv-card{position:relative}
.cv-card .wp-block-post-excerpt{color:var(--cv-muted);font-size:.95rem;margin:0}
.cv-card .wp-block-post-excerpt__more-link{display:none}
.cv-card .wp-block-post-terms{font-size:.8rem}
.cv-card .wp-block-post-terms a{position:relative;z-index:2;text-decoration:none;background:var(--cv-tint);padding:.25em .7em;border-radius:999px;color:var(--cv-muted)}
.wp-block-query-pagination{margin-top:32px;gap:8px;font-weight:600}
.wp-block-query-pagination a,.wp-block-query-pagination .page-numbers{display:inline-grid;place-items:center;min-width:44px;min-height:44px;border-radius:999px;text-decoration:none;color:var(--cv-ink)}
.wp-block-query-pagination .current{background:var(--cv-navy);color:var(--cv-on-navy)}

/* ==========================================================================
   Rejoindre (formulaire WPForms)
   ========================================================================== */
.cv-join{background:var(--cv-terra);color:#fff;border-radius:32px;margin-inline:8px;overflow:hidden}
.cv-join-grid{display:grid;gap:32px;align-items:center}
.cv-join h2{font-size:clamp(2.4rem,11vw,5.4rem);font-weight:800}
.cv-join p.cv-lead{color:#FFE9E1;font-size:1.05rem;margin-top:14px;max-width:44ch}
.cv-member{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-weight:600;color:#fff}
.cv-btn-light{background:#fff;color:var(--cv-terra-ink);box-shadow:0 10px 24px -14px #5a1d10}
.cv-form-card{background:var(--cv-surface);color:var(--cv-ink);border-radius:var(--cv-r-lg);padding:22px;box-shadow:0 30px 70px -30px #5a1d10;min-width:0}
.cv-form-card .wpforms-container{margin:0!important}
.cv-form-card .wpforms-field-label{font:600 .9rem var(--cv-body)!important;color:var(--cv-ink)!important}
.cv-form-card input:not([type=checkbox]):not([type=radio]),.cv-form-card select,.cv-form-card textarea{font:inherit!important;min-height:48px;padding:.7em 1em!important;border-radius:14px!important;border:1.5px solid var(--cv-line)!important;background:var(--cv-bg)!important;color:var(--cv-ink)!important;max-width:100%!important;width:100%!important}
.cv-form-card input:focus,.cv-form-card select:focus,.cv-form-card textarea:focus{border-color:var(--cv-terra)!important;box-shadow:0 0 0 4px #C8553D33!important;outline:none!important}
.cv-form-card button[type=submit],.cv-form-card .wpforms-submit{width:100%;min-height:52px;background:var(--cv-terra)!important;color:#fff!important;border:0!important;border-radius:999px!important;font:600 1rem var(--cv-body)!important;cursor:pointer;padding:0 1.4em!important}

/* ==========================================================================
   Pages intérieures (articles, pages, archives)
   ========================================================================== */
.cv-page-hero{background:var(--cv-navy);color:var(--cv-on-navy);position:relative;overflow:hidden}
.cv-page-hero .cv-wrap{padding-block:40px 76px;display:grid;gap:14px}
.cv-page-hero h1,.cv-page-hero .wp-block-post-title,.cv-page-hero .wp-block-query-title{font:800 clamp(2.1rem,9vw,4.6rem)/1.03 var(--cv-display);letter-spacing:-.035em;margin:0;color:var(--cv-on-navy);text-wrap:balance}
.cv-page-hero .wp-block-post-date,.cv-page-hero .cv-meta{color:var(--cv-on-navy-muted);font-size:.92rem}
.cv-page-hero .wp-block-post-terms a,.cv-page-hero .cv-eyebrow{color:var(--cv-sand);text-decoration:none;font:600 .75rem var(--cv-body);letter-spacing:.14em;text-transform:uppercase}
.cv-page-hero .wp-block-term-description{color:var(--cv-on-navy-muted);max-width:60ch}
.cv-page-hero .wp-block-term-description p{margin:0}
.cv-content{padding-block:40px var(--cv-sec)}
.cv-content.is-layout-constrained>*{max-width:min(760px,calc(100% - 2 * var(--cv-gutter)))}
.cv-content.is-layout-constrained>.alignwide{max-width:min(1180px,calc(100% - 2 * var(--cv-gutter)))}
.cv-content.is-layout-constrained>.alignfull{max-width:none}
.cv-content{font-size:1.06rem;line-height:1.75}
.cv-content h2{font:750 clamp(1.6rem,6vw,2.4rem)/1.1 var(--cv-display);letter-spacing:-.02em;margin-top:2em}
.cv-content h3{font:700 clamp(1.25rem,4.6vw,1.6rem)/1.2 var(--cv-display);margin-top:1.6em}
.cv-content a{color:var(--cv-terra-ink);text-underline-offset:3px}
.cv-content img{max-width:100%;height:auto;border-radius:12px}
.cv-content blockquote{border-left:4px solid var(--cv-terra);margin-inline:0;padding:.4em 0 .4em 1.2em;font-size:1.15rem}
.cv-content figure{max-width:100%}
.cv-content .wp-block-table,.cv-content table{display:block;overflow-x:auto}
.cv-content table{border-collapse:collapse;width:100%;margin-block:1.6em;font-size:.96rem;line-height:1.5;background:var(--cv-surface)}
.cv-content th,.cv-content td{border:1px solid var(--cv-line);padding:10px 12px;text-align:left;vertical-align:top}
.cv-content th{background:var(--cv-tint);font-weight:700;color:var(--cv-navy)}
.cv-content tbody tr:nth-child(even) td{background:var(--cv-cream)}
.cv-content iframe,.cv-content video{max-width:100%}
.cv-post-nav{display:grid;gap:12px;margin-top:48px}
.cv-post-nav a{display:block;padding:18px 20px;border-radius:var(--cv-r-md);background:var(--cv-tint);text-decoration:none;color:var(--cv-ink);font-weight:600}

/* ==========================================================================
   Pied de page
   ========================================================================== */
.cv-foot{background:var(--cv-navy);color:var(--cv-on-navy-muted);margin-top:var(--cv-sec);font-size:.92rem}
.cv-foot .cv-wrap{padding-block:56px calc(32px + env(safe-area-inset-bottom,0px))}
.cv-foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cv-foot-grid>:first-child{grid-column:1/-1}
.cv-foot h2{color:var(--cv-on-navy);font:700 1rem var(--cv-display);margin:0 0 10px}
.cv-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.cv-foot a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.cv-foot .cv-brand{color:var(--cv-on-navy)}
/* Rubrique « Espaces » : calque de « Le concours » (même police), sauf la couleur — orange du thème. */
.cv-foot-espaces-titre{display:block;font:700 1rem var(--cv-display);line-height:1.2;margin:0 0 2px;color:var(--cv-terra)}
.cv-foot-espaces-liens{display:inline-flex;align-items:center;gap:10px}
.cv-foot-espaces-liens a{color:inherit}
.cv-foot-espaces-liens a:hover{color:var(--cv-on-navy);text-decoration:underline;text-underline-offset:3px}
.cv-foot-espaces-liens span{color:#ffffff4d}
.cv-legal{border-top:1px solid #ffffff1a;margin-top:32px;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between}

/* ==========================================================================
   TABLETTE ≥ 640px
   ========================================================================== */
@media (min-width:640px){
  .cv-top .cv-wrap{min-height:72px}
  .cv-brand{font-size:1.15rem}.cv-brand img{width:44px;height:44px;border-radius:14px}
  .cv-ctas{display:flex;flex-wrap:wrap;gap:12px}
  .cv-hero .cv-lead{font-size:1.18rem}
  .cv-stage{width:min(100%,380px)}
  .cv-eq{height:70px;gap:5px}.cv-eq i:nth-child(n+25){display:block}.cv-eq i:nth-child(n+41){display:none}
  .cv-wave{height:60px}
  .cv-marquee span{font-size:1.6rem}
  .cv-head{margin-bottom:40px}
  .cv-bento{grid-template-columns:1fr 1fr;gap:14px}
  .cv-span2{grid-column:span 2}
  .cv-tile{padding:28px}
  .cv-switch{display:inline-flex;width:auto}
  .cv-duo-art{aspect-ratio:2/1}
  .cv-staff-box{padding:28px 0 24px}
  .cv-staff-scroll{padding-inline:28px}
  .cv-lesson-card{margin:20px 28px 0;grid-template-columns:auto 1fr auto;padding:20px 24px}
  .cv-lesson-card .cv-when{grid-column:auto;grid-row:span 2;flex-direction:column;align-items:flex-end;text-align:right;margin-top:0}
  .cv-legend{padding:12px 28px 0}
  .cv-kids,.cv-join{border-radius:44px;margin-inline:12px}
  .cv-piano{height:210px}.cv-key{font-size:.95rem;border-radius:0 0 18px 18px;margin:0 3px}
  .cv-posts .wp-block-post-template{grid-template-columns:1fr 1fr}
  .cv-form-card{padding:28px}
  .cv-page-hero .cv-wrap{padding-block:56px 92px}
  .cv-post-nav{grid-template-columns:1fr 1fr}
  .cv-foot-grid{grid-template-columns:repeat(4,1fr)}
}

/* ==========================================================================
   PC ≥ 1024px
   ========================================================================== */
@media (min-width:1024px){
  .cv-burger{display:none}
  .cv-top-cta{display:inline-flex;min-height:44px;padding:.55em 1.1em;font-size:.92rem}
  .cv-nav{order:1}.cv-search-toggle{order:2;margin-left:0}.cv-top-cta{order:3}.cv-compte{order:4}
  .cv-nav{display:block;position:static;background:none;padding:0;border:0;margin-left:auto;max-height:none;overflow:visible}
  .cv-menu{display:flex;gap:2px}
  .cv-menu>li{position:relative}
  .cv-menu a{min-height:44px;padding:0 14px;border-radius:999px;font-size:.93rem;font-weight:500;color:var(--cv-on-navy-muted);transition:background .25s,color .25s}
  .cv-menu a:hover,.cv-menu .current-menu-item>a{background:#ffffff14;color:var(--cv-on-navy)}
  .cv-menu .menu-item-has-children>a::after{content:"";width:6px;height:6px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .cv-menu .sub-menu{position:absolute;top:100%;left:0;min-width:250px;margin:0;padding:8px;border:1px solid #ffffff1a;border-radius:18px;background:var(--cv-navy);box-shadow:0 30px 60px -20px #000a;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .25s var(--cv-ease)}
  .cv-menu li:hover>.sub-menu,.cv-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
  .cv-menu .sub-menu a{border-radius:12px;width:100%}
  .cv-nav .cv-btn{display:none}
  .cv-hero .cv-wrap{grid-template-columns:1.25fr .9fr;gap:48px;align-items:center;padding-block:80px 128px}
  .cv-stage{width:100%;max-width:460px}
  .cv-eq i:nth-child(n+41){display:block}
  .cv-bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(200px,auto);gap:16px}
  .cv-row2{grid-row:span 2}
  .cv-duo-panel{grid-template-columns:1fr 1fr;gap:56px}
  .cv-duo-art{order:0;aspect-ratio:5/4}
  .cv-swipe{display:none}
  .cv-staff{width:100%;min-width:900px}
  .cv-kids-grid{grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
  .cv-key small{display:block}
  .cv-piano-hint{display:block}
  .cv-piano{height:230px}
  .cv-posts .wp-block-post-template{grid-template-columns:repeat(3,1fr)}
  .cv-join-grid{grid-template-columns:1.1fr 1fr;gap:56px}
  .cv-foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}
  .cv-foot-grid>:first-child{grid-column:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cv *,.cv *::before,.cv *::after,.cv-progress{animation:none!important;transition:none!important}
  .cv-note{display:none}
}

.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}