/*
Theme Name: FRISPIRIT
Theme URI: https://www.kiloot.com/FRISPIRIT/
Author: Kiloot
Author URI: https://www.kiloot.com
Description: Thème sur mesure pour FRISPIRIT, école de chant & collectif musical à Fribourg. Collage de papier déchiré, noir charbon, ivoire, corail, touches orange et sauge, typographie d’affiche musicale, notes dessinées à la main. Types de contenu : Artistes, Projets, Événements, Médias (archives), Cours, Témoignages.
Version: 1.1.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: frispirit
*/

/* ==================================================================
   1. Polices (fichiers dans le thème : rien n’est chargé chez Google)
   ================================================================== */
@font-face { font-family: "Bangers"; src: url(assets/fonts/bangers-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Changa One"; src: url(assets/fonts/changa-one-latin-400-italic.woff2) format("woff2"); font-display: swap; } /* police des titres-affiches de la maquette v2 (italique) */
@font-face { font-family: "Knewave"; src: url(assets/fonts/knewave-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Caveat Brush"; src: url(assets/fonts/caveat-brush-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Anton"; src: url(assets/fonts/anton-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Anton"; src: url(assets/fonts/anton-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; src: url(assets/fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; src: url(assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; src: url(assets/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Jost"; font-weight: 400; src: url(assets/fonts/jost-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Jost"; font-weight: 400; font-style: italic; src: url(assets/fonts/jost-latin-400-italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Jost"; font-weight: 500; src: url(assets/fonts/jost-latin-500-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Jost"; font-weight: 600; src: url(assets/fonts/jost-latin-600-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Jost"; font-weight: 700; src: url(assets/fonts/jost-latin-700-normal.woff2) format("woff2"); font-display: swap; }

/* ==================================================================
   2. Couleurs et réglages
   ================================================================== */
:root {
	--charbon: #171416;
	--charbon-2: #221d1f;
	--ivoire: #F1E7DA;
	--ivoire-clair: #F6EFE4;
	--creme: #FBF6EE;
	--encre: #1A1716;
	--corail: #E8604E;
	--corail-fonce: #C9473A;
	--orange: #E7A03C;
	--sauge: #93A88A;
	--sauge-fonce: #4E7F72;
	--rose: #DC5472;
	--violet: #7B4E86;
	--grain: url(assets/img/grain.svg);
	--charbon-tex: url(assets/img/charbon.svg);
	--affiche: "Changa One", "Anton", Impact, sans-serif;
	--brush: "Knewave", "Bangers", sans-serif;
	--titre: "Anton", "Barlow Condensed", Impact, sans-serif;
	--etroite: "Barlow Condensed", "Arial Narrow", sans-serif;
	--texte: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
	--u: 1px; /* unité de la composition d’accueil, 1 px de la maquette (1536 px) */
	--cadre: min(1240px, 100% - 48px);
}
@media (min-width: 1080px) {
	:root { --u: calc(min(100vw, 1920px) / 1536); }
}

/* ==================================================================
   3. Base
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
	margin: 0;
	font-family: var(--texte);
	font-size: 17px;
	line-height: 1.55;
	color: var(--encre);
	background: var(--ivoire) var(--grain);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
html.menu-ouvert { overflow: hidden; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--corail-fonce); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.05; font-weight: 400; }
strong, b { font-weight: 600; }
.ic { width: 1em; height: 1em; flex: none; }
.lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--corail); color: var(--encre); padding: 10px 16px; font-weight: 600; }
.lien-evitement:focus { left: 12px; top: 12px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Texte à confirmer avec Ayvee : bien visible */
mark.a-confirmer { background: linear-gradient(transparent 8%, #FFE36E 8%, #FFE36E 92%, transparent 92%); color: var(--encre); padding: 0 .2em; }
mark.a-confirmer::after { content: "à confirmer"; display: inline-block; margin-left: .4em; padding: .05em .45em; border: 1.5px dashed currentColor; border-radius: 3px; font: 600 11px/1.4 var(--etroite); letter-spacing: .08em; text-transform: uppercase; vertical-align: .2em; }
.frise-date + p mark.a-confirmer::after { display: none; }
.aide-admin { background: #FFF6C9; border: 2px dashed #C9A100; color: #4a3b00; padding: 12px 16px; border-radius: 4px; font-size: 15px; max-width: 720px; }
.aide-admin::before { content: "Visible seulement par toi · "; font-weight: 700; }

/* ==================================================================
   4. Éléments graphiques réutilisables
   ================================================================== */
.papier, .is-style-papier { background-color: var(--ivoire); background-image: var(--grain); color: var(--encre); }
.papier-clair { background-color: var(--ivoire-clair); background-image: var(--grain); color: var(--encre); }
.charbon, .is-style-charbon { background-color: var(--charbon); background-image: var(--charbon-tex); color: var(--ivoire); }
.is-style-sauge { background-color: #A9BBA0; background-image: var(--grain); color: var(--encre); }
.is-style-orange { background-color: #EDB664; background-image: var(--grain); color: var(--encre); }

/* Mot sur un coup de pinceau corail */
.pinceau {
	display: inline-block;
	position: relative;
	z-index: 0;
	padding: .02em .28em .06em .22em;
	margin: 0 -.06em;
	font-family: var(--brush);
	color: var(--encre);
	transform: rotate(-2deg);
	white-space: nowrap;
}
.pinceau::before {
	content: "";
	position: absolute;
	inset: -.2em -.34em -.16em -.4em;
	z-index: -1;
	background: url(assets/img/v2-stabilo.png) center / 100% 100% no-repeat; /* stabilo de la maquette v2 */
}

/* Titres */
.kicker {
	display: flex; align-items: center; gap: 10px;
	font: 700 15px/1.2 var(--etroite);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--corail);
	margin: 0 0 12px;
}
.kicker::before { content: ""; width: 28px; height: 3px; background: currentColor; border-radius: 2px; transform: rotate(-4deg); }
.charbon .kicker, .is-style-charbon .kicker { color: #F08A7A; }
.titre-affiche, .is-style-affiche:is(h1, h2, h3), h2.wp-block-heading.is-style-affiche {
	font-family: var(--titre);
	font-size: clamp(38px, 5.2vw, 70px);
	line-height: 1.02;
	text-transform: uppercase;
	letter-spacing: .005em;
	margin: 0 0 .45em;
}
.titre-affiche.petit { font-size: clamp(30px, 3.4vw, 44px); margin-top: 1.2em; }
.titre-affiche a { text-decoration: none; }
.titre-affiche .pinceau, .is-style-affiche .pinceau { text-transform: uppercase; font-size: .92em; }
.titre-geant {
	font-family: var(--affiche);
	font-size: clamp(56px, 9vw, 128px);
	line-height: .9;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--creme);
	margin: 0 0 .25em;
	transform: rotate(-2.5deg);
	transform-origin: left bottom;
}
.titre-geant .pinceau { font-family: var(--affiche); color: var(--creme); padding: .04em .22em 0 .18em; }
.titre-brush { font-family: var(--brush); font-size: clamp(34px, 4vw, 52px); line-height: 1; transform: rotate(-2deg); margin-bottom: .6em; }
.titre-brush small { display: block; font: 600 .42em/1.3 var(--etroite); letter-spacing: .14em; text-transform: uppercase; color: var(--corail); transform: none; margin-top: .3em; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; }

/* Boutons */
.btn, .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 12px;
	position: relative; z-index: 0;
	padding: 15px 28px 14px;
	border: 0; border-radius: 0;
	background: transparent;
	color: var(--encre);
	font: 600 19px/1 var(--etroite);
	letter-spacing: .08em; text-transform: uppercase;
	text-decoration: none; cursor: pointer;
	transition: transform .2s;
}
.btn::before, .wp-block-button__link::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: url(assets/img/v2-contact.png) center / 100% 100% no-repeat; /* bouton Contact de la maquette v2 */
}
.btn:hover, .wp-block-button__link:hover { color: var(--encre); transform: rotate(-1deg) scale(1.03); }
.btn .ic, .btn-pilule .ic { width: 26px; height: 16px; }
.btn-pilule, .is-style-contour .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 14px;
	padding: 12px 26px;
	border: 2px solid transparent; border-radius: 40px;
	background: linear-gradient(var(--charbon), var(--charbon)) padding-box, linear-gradient(90deg, var(--corail), var(--orange)) border-box;
	color: var(--creme);
	font: 500 17px/1 var(--texte);
	letter-spacing: .08em; text-transform: uppercase;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.btn-pilule::before, .is-style-contour .wp-block-button__link::before { display: none; }
.btn-pilule:hover { color: var(--encre); background: linear-gradient(90deg, var(--corail), var(--orange)) padding-box, linear-gradient(90deg, var(--corail), var(--orange)) border-box; }
.btn-pilule.sombre, .papier .is-style-contour .wp-block-button__link, .is-style-papier .is-style-contour .wp-block-button__link, .is-style-carte .is-style-contour .wp-block-button__link, .is-style-sauge .is-style-contour .wp-block-button__link, .is-style-orange .is-style-contour .wp-block-button__link {
	background: linear-gradient(var(--ivoire), var(--ivoire)) padding-box, linear-gradient(90deg, var(--corail), var(--orange)) border-box;
	color: var(--encre);
}
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; margin: 1.4em 0; }
.lien-fleche { display: inline-flex; align-items: center; gap: 10px; font: 700 17px/1 var(--etroite); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.lien-fleche .ic { width: 26px; height: 16px; transition: transform .2s; }
.lien-fleche:hover .ic { transform: translateX(5px); }
.boutons { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; margin-top: 26px; }

/* Rond avec flèche */
.rond { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--corail); color: #fff; border: 3px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.12); transition: transform .2s; flex: none; }
.rond .ic { width: 26px; height: 16px; }
.rond-orange { background: #E39737; }
.rond-sauge { background: #86A07D; }

/* Dessins à la main */
.dessin { position: absolute; pointer-events: none; color: #fff; display: block; }
.dessin .ic { width: 100%; height: 100%; }

/* Photo collée au scotch */
.photo-scotch, .is-style-scotch { position: relative; background: #fff; padding: 10px 10px 12px; box-shadow: 0 10px 24px rgba(0,0,0,.25); transform: rotate(-2deg); margin: 0; }
.photo-scotch img, .is-style-scotch img { width: 100%; }
.photo-scotch::before, .is-style-scotch::before {
	content: ""; position: absolute; z-index: 2; top: -16px; left: 50%; width: 120px; height: 34px; margin-left: -60px;
	background: rgba(236, 226, 205, .82); transform: rotate(-4deg);
	clip-path: polygon(2% 8%, 10% 0, 22% 9%, 35% 1%, 50% 8%, 63% 0, 78% 7%, 90% 1%, 100% 9%, 98% 92%, 86% 100%, 72% 93%, 58% 100%, 44% 92%, 30% 100%, 16% 93%, 0 100%);
	box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.is-style-scotch figcaption { font: 22px/1.2 "Caveat Brush", cursive; text-align: center; margin-top: 8px; color: var(--encre); }

/* Image aux bords déchirés */
.is-style-dechire, .cadre-dechire { filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.is-style-dechire img, .cadre-dechire img, .cadre-dechire { clip-path: polygon(0.00% 1.50%,2.50% 1.17%,5.00% 0.92%,7.50% 1.39%,10.00% 1.15%,12.50% 0.28%,15.00% 0.32%,17.50% 1.15%,20.00% 0.43%,22.50% 2.13%,25.00% 2.68%,27.50% 1.29%,30.00% 1.07%,32.50% 2.18%,35.00% 1.74%,37.50% 1.05%,40.00% 0.71%,42.50% 0.42%,45.00% -0.50%,47.50% 0.60%,50.00% 1.19%,52.50% 2.70%,55.00% 2.91%,57.50% 2.82%,60.00% 1.61%,62.50% 1.94%,65.00% 3.24%,67.50% 2.32%,70.00% 2.03%,72.50% 2.86%,75.00% 1.37%,77.50% 2.51%,80.00% 1.89%,82.50% 2.09%,85.00% 1.28%,87.50% 1.38%,90.00% 0.29%,92.50% 0.72%,95.00% 0.21%,97.50% -0.50%,100.00% 1.00%,100.00% 1.00%,99.96% 4.99%,99.92% 7.64%,99.88% 11.91%,99.85% 16.26%,99.81% 20.77%,99.77% 24.99%,99.73% 28.89%,99.69% 32.18%,99.65% 36.75%,99.62% 39.66%,99.58% 44.09%,99.54% 48.47%,99.50% 52.52%,99.46% 56.27%,99.42% 59.54%,99.38% 62.63%,99.35% 66.86%,99.31% 69.93%,99.27% 73.38%,99.23% 76.53%,99.19% 79.82%,99.15% 83.40%,99.12% 87.21%,99.08% 91.48%,99.04% 95.22%,99.00% 99.00%,99.00% 99.00%,96.53% 100.12%,94.05% 100.37%,91.58% 99.94%,89.10% 99.39%,86.62% 98.76%,84.15% 97.48%,81.67% 98.35%,79.20% 98.72%,76.72% 97.88%,74.25% 99.00%,71.78% 99.33%,69.30% 99.97%,66.82% 100.30%,64.35% 100.45%,61.88% 99.33%,59.40% 99.70%,56.93% 99.52%,54.45% 99.44%,51.98% 98.77%,49.50% 99.25%,47.02% 98.26%,44.55% 97.50%,42.08% 98.28%,39.60% 97.63%,37.12% 97.28%,34.65% 98.23%,32.17% 97.41%,29.70% 98.64%,27.23% 98.89%,24.75% 99.51%,22.27% 99.63%,19.80% 98.88%,17.33% 97.50%,14.85% 97.04%,12.38% 97.82%,9.90% 98.57%,7.42% 98.73%,4.95% 98.68%,2.48% 99.60%,0.00% 98.50%,0.00% 98.50%,0.00% 94.91%,0.00% 90.49%,0.00% 86.27%,0.00% 82.12%,0.00% 79.04%,0.00% 75.43%,0.00% 72.08%,0.00% 68.99%,0.00% 65.27%,0.00% 61.54%,0.00% 57.00%,0.00% 53.48%,0.00% 49.58%,0.00% 46.00%,0.00% 43.33%,0.00% 39.21%,0.00% 34.20%,0.00% 31.33%,0.00% 28.28%,0.00% 24.56%,0.00% 21.56%,0.00% 16.71%,0.00% 12.13%,0.00% 8.79%,0.00% 5.47%,0.00% 1.50%); }
.cadre-dechire { display: block; }
.cadre-dechire img { clip-path: none; width: 100%; height: 100%; object-fit: cover; }

/* Polaroïd */
.is-style-polaroid, .polaroid { background: #fff; padding: 12px 12px 14px; margin: 0; box-shadow: 0 10px 22px rgba(0,0,0,.28); }
.is-style-polaroid { transform: rotate(2deg); }

/* ==================================================================
   5. En-tête
   ================================================================== */
.barre {
	position: fixed; z-index: 100; inset: 0 0 auto 0;
	color: var(--creme);
	transition: background-color .3s, box-shadow .3s;
}
.barre::before { content: ""; position: absolute; inset: 0 0 -40px; background: linear-gradient(rgba(10,8,9,.7), rgba(10,8,9,0)); pointer-events: none; transition: opacity .3s; }
.barre.pleine { background: var(--charbon) var(--charbon-tex); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.barre.pleine::before { opacity: 0; }
.barre.pleine::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 12px; background: url(assets/img/dechire-charbon.svg) 0 0 / 1200px 100% repeat-x; transform: scaleY(-1); pointer-events: none; }
.barre-in { position: relative; display: flex; align-items: center; height: calc(100*var(--u)); padding: 0 calc(20*var(--u)) 0 calc(23*var(--u)); transition: height .3s; }
.barre.pleine .barre-in { height: max(64px, calc(78*var(--u))); }
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--creme); position: relative; }
.logo:hover { color: var(--creme); }
.logo-img { display: block; width: max(190px, calc(345*var(--u))); height: auto; margin-top: calc(4*var(--u)); }
.barre.pleine .logo-img { width: max(170px, calc(270*var(--u))); margin-top: 2px; }
.logo-mot { font: 400 max(34px, calc(66*var(--u)))/1 "Caveat Brush", var(--affiche); letter-spacing: .02em; position: relative; transform: rotate(-3deg); }
.logo-mot::after { content: ""; position: absolute; left: 6%; right: -2%; bottom: -.2em; height: .2em; background: url(assets/img/v2-souligne-corail.png) center / 100% 100% no-repeat; transform: rotate(-1deg); }
.logo-traits { width: max(18px, calc(34*var(--u))); height: max(14px, calc(26*var(--u))); color: var(--corail); margin-right: calc(6*var(--u)); transform: rotate(-12deg); }
.logo-traits .ic, .logo-notes .ic { width: 100%; height: 100%; }
.logo-notes { width: max(36px, calc(66*var(--u))); height: max(18px, calc(34*var(--u))); margin-left: calc(14*var(--u)); color: var(--creme); }
.logo-sous { margin-left: calc(26*var(--u)); padding-left: calc(26*var(--u)); border-left: 2px solid rgba(246,239,228,.85); font: 500 max(10px, calc(12.6*var(--u)))/1.42 var(--texte); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.nav { margin-left: auto; display: flex; align-items: center; }
.nav-liste { list-style: none; display: flex; gap: 0 calc(34*var(--u)); margin: 0; padding: 0; }
.nav-liste a { display: block; position: relative; padding: 8px 0; font: 500 max(14px, calc(19.5*var(--u)))/1 var(--etroite); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--creme); }
.nav-liste a::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -3px; height: 5px; background: url(assets/img/v2-souligne-corail.png) center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav-liste a:hover::after, .nav-liste .current-menu-item > a::after, .nav-liste .current_page_item > a::after, .nav-liste .current-menu-ancestor > a::after, .nav-liste .current-page-ancestor > a::after { transform: scaleX(1); }
.nav-liste .sub-menu { display: none; }
.nav-contact-mobile { display: none; }
.btn-contact { position: relative; z-index: 0; margin-left: calc(32*var(--u)); padding: calc(13*var(--u)) calc(22*var(--u)) calc(11*var(--u)); font: 600 max(14px, calc(19*var(--u)))/1 var(--etroite); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--encre); }
.btn-contact::before { content: ""; position: absolute; inset: calc(-4*var(--u)) calc(-8*var(--u)) calc(-4*var(--u)) calc(-10*var(--u)); z-index: -1; background: url(assets/img/v2-contact.png) center / 100% 100% no-repeat; }
.btn-contact:hover { color: var(--encre); transform: rotate(-2deg); }
.burger { display: none; }

/* ==================================================================
   6. Accueil : la composition de la maquette (écrans ≥ 1080 px)
   ================================================================== */
.une {
	position: relative;
	height: calc(1024*var(--u));
	max-width: 1920px;
	margin: 0 auto;
	overflow: hidden;
	background: var(--charbon) var(--charbon-tex);
	color: var(--creme);
	isolation: isolate;
}
@media (min-width: 1921px) { body.accueil { background: var(--charbon); } }
.une::before { /* taches rouille sur le bord gauche, comme sur la maquette */
	content: ""; position: absolute; left: 0; top: 0; width: calc(70*var(--u)); height: calc(520*var(--u)); z-index: 0;
	background: radial-gradient(circle at 20% 30%, rgba(200,90,60,.22), transparent 60%), radial-gradient(circle at 10% 70%, rgba(200,90,60,.16), transparent 55%);
	mix-blend-mode: screen;
}
.une-photo { position: absolute; z-index: 1; left: calc(440*var(--u)); top: 0; width: calc(1096*var(--u)); height: calc(560*var(--u)); }
.une-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 9%); }
/* notes et traits décalqués de la maquette v2, à leur place exacte */
.une-hero .dessin-notes { z-index: 3; left: calc(428*var(--u)); top: calc(85*var(--u)); width: calc(94*var(--u)); height: calc(105*var(--u)); color: #F6EEE2; }
.une-hero .dessin-eclats { z-index: 3; left: calc(838*var(--u)); top: calc(158*var(--u)); width: calc(109*var(--u)); height: calc(79*var(--u)); color: #F6EEE2; }

.une-texte { position: absolute; z-index: 4; left: calc(100*var(--u)); top: calc(122*var(--u)); width: calc(500*var(--u)); }
.slogan {
	margin: 0;
	font: 400 calc(80*var(--u))/.9 var(--affiche);
	letter-spacing: .012em;
	text-transform: uppercase;
	color: #F6EEE2;
	transform: translateX(calc(8*var(--u))) rotate(-4.3deg);
	transform-origin: left bottom;
	text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.slogan > span { display: block; white-space: nowrap; }
.slogan-pinceau { position: relative; z-index: 0; margin: 0 0 0 calc(-46*var(--u)); padding: calc(8*var(--u)) calc(40*var(--u)) calc(12*var(--u)) calc(46*var(--u)); display: inline-block !important; }
/* trait brique découpé dans la maquette v2, à sa place exacte (x 40, y 250) */
.une-texte::before { content: ""; position: absolute; z-index: -1; left: calc(-60*var(--u)); top: calc(128*var(--u)); width: calc(472*var(--u)); height: calc(132*var(--u)); background: url(assets/img/v2-pinceau-scene.webp) 0 0 / 100% 100% no-repeat; }
.une-sous { margin: calc(4*var(--u)) 0 0 calc(14*var(--u)); font: 400 max(15px, calc(19.5*var(--u)))/1.2 var(--texte); letter-spacing: .01em; color: #F6EEE2; }
.une-texte .btn-pilule { margin: calc(12*var(--u)) 0 0 calc(14*var(--u)); padding: calc(10*var(--u)) calc(22*var(--u)) calc(9*var(--u)) calc(26*var(--u)); font-size: max(13px, calc(16.5*var(--u))); gap: calc(14*var(--u)); border-radius: calc(40*var(--u)); }
.une-texte .btn-pilule .ic { width: calc(28*var(--u)); height: calc(18*var(--u)); }

.une-papier-fond { position: absolute; z-index: 5; left: 0; right: 0; top: calc(700*var(--u)); bottom: 0; background: #F3E4D5 var(--grain); }

/* Parcours Jeunes / Parents
   Le fond (zones de couleur, cadres en papier déchiré, photos, flèches, dessins)
   est découpé directement dans la maquette v2 : assets/img/v2-bande.webp.
   calc(1*var(--k)) = 1 px de la maquette, à l'intérieur de chaque bloc. */
.parcours {
	position: absolute; z-index: 6; display: block; top: calc(440*var(--u)); height: calc(310*var(--u));
	container-type: inline-size;
	background: url(assets/img/v2-bande.webp) 0 0 / auto 100% no-repeat;
	text-decoration: none; color: var(--encre);
}
.parcours > * { --k: calc(100cqw / var(--n)); }
.parcours:hover { color: var(--encre); }
.parcours-jeunes { --n: 790; left: 0; width: calc(790*var(--u)); background-position: 0 0; }
.parcours-parents { --n: 776; left: calc(760*var(--u)); width: calc(776*var(--u)); background-position: 100% 0; }
.parcours-carte { position: absolute; display: flex; flex-direction: column; transition: transform .25s; }
.parcours:hover .parcours-carte { transform: translateY(-2px); }
.parcours-titre { display: inline-block; font: 400 calc(76*var(--k))/1 var(--brush); letter-spacing: .005em; text-transform: uppercase; color: #13202A; white-space: nowrap; }
.parcours-age { font: 700 calc(27*var(--k))/1 var(--etroite); letter-spacing: .01em; text-transform: uppercase; color: #13202A; }
.parcours-texte { font: 400 calc(18.5*var(--k))/1.17 var(--texte); color: #13202A; }
.parcours-legende { display: none; }
.parcours-jeunes .parcours-carte { left: calc(436*var(--k)); top: calc(86*var(--k)); width: calc(255*var(--k)); align-items: center; text-align: center; transform: rotate(-4deg); }
.parcours-jeunes .parcours-titre { margin: 0 calc(-30*var(--k)) 0 calc(-30*var(--k)); font-size: calc(68*var(--k)); transform: scaleX(.88); }
.parcours-jeunes .parcours-age { margin-top: calc(-4*var(--k)); transform: rotate(1deg); }
.parcours-jeunes .parcours-texte { margin-top: calc(8*var(--k)); transform: rotate(1deg); }
.parcours-parents .parcours-carte { left: calc(432*var(--k)); top: calc(86*var(--k)); width: calc(280*var(--k)); align-items: flex-start; transform: rotate(-4.5deg); }
.parcours-parents .parcours-titre { font-size: calc(70*var(--k)); transform: scaleX(.8); transform-origin: 0 50%; margin-right: calc(-80*var(--k)); }
.parcours-parents .parcours-texte { margin: calc(2*var(--k)) 0 0 calc(34*var(--k)); font-size: calc(18*var(--k)); line-height: 1.12; transform: rotate(2.5deg); transform-origin: left top; }
/* Photo choisie dans Personnaliser : posée à l'endroit de la photo de la maquette */
.parcours-photo { position: absolute; overflow: hidden; }
.parcours-photo img { width: 100%; height: 100%; object-fit: cover; }
.parcours-jeunes .parcours-photo { left: calc(96*var(--k)); top: calc(74*var(--k)); width: calc(302*var(--k)); height: calc(226*var(--k)); clip-path: polygon(0.00% 3.00%,2.00% 2.34%,4.00% 2.38%,6.00% 2.23%,8.00% 3.00%,10.00% 3.68%,12.00% 4.08%,14.00% 2.65%,16.00% 3.08%,18.00% 3.74%,20.00% 2.63%,22.00% 1.55%,24.00% 1.78%,26.00% 2.85%,28.00% 1.77%,30.00% 1.15%,32.00% 1.83%,34.00% 0.09%,36.00% 0.89%,38.00% 0.54%,40.00% 0.94%,42.00% 0.52%,44.00% 0.44%,46.00% 0.29%,48.00% -1.02%,50.00% -0.21%,52.00% -0.14%,54.00% 0.32%,56.00% 0.25%,58.00% -0.82%,60.00% -0.88%,62.00% 0.21%,64.00% -0.71%,66.00% -1.12%,68.00% -0.57%,70.00% -0.46%,72.00% 1.09%,74.00% -0.12%,76.00% 0.77%,78.00% 0.27%,80.00% 1.19%,82.00% 0.76%,84.00% 0.39%,86.00% 0.02%,88.00% -0.24%,90.00% 0.29%,92.00% -1.03%,94.00% -2.06%,96.00% -1.56%,98.00% -1.53%,100.00% 0.00%,100.00% 96.00%,100.00% 96.00%,98.00% 95.41%,96.00% 96.75%,94.00% 97.11%,92.00% 96.66%,90.00% 96.38%,88.00% 94.71%,86.00% 95.82%,84.00% 95.25%,82.00% 95.65%,80.00% 97.47%,78.00% 96.31%,76.00% 97.87%,74.00% 96.28%,72.00% 97.95%,70.00% 98.88%,68.00% 99.10%,66.00% 98.05%,64.00% 98.98%,62.00% 99.73%,60.00% 99.32%,58.00% 98.52%,56.00% 97.11%,54.00% 96.09%,52.00% 96.79%,50.00% 96.36%,48.00% 96.80%,46.00% 97.06%,44.00% 96.45%,42.00% 95.36%,40.00% 97.45%,38.00% 97.81%,36.00% 98.98%,34.00% 97.24%,32.00% 97.10%,30.00% 97.30%,28.00% 97.83%,26.00% 98.44%,24.00% 99.69%,22.00% 98.60%,20.00% 98.77%,18.00% 99.76%,16.00% 98.57%,14.00% 100.33%,12.00% 98.40%,10.00% 98.05%,8.00% 98.79%,6.00% 97.56%,4.00% 99.36%,2.00% 101.09%,0.00% 99.00%); }
.parcours-parents .parcours-photo { left: calc(72*var(--k)); top: calc(38*var(--k)); width: calc(370*var(--k)); height: calc(250*var(--k)); clip-path: polygon(0.00% 2.00%,2.00% 1.05%,4.00% 0.36%,6.00% 1.52%,8.00% 3.12%,10.00% 3.06%,12.00% 2.90%,14.00% 4.06%,16.00% 5.46%,18.00% 3.32%,20.00% 3.72%,22.00% 2.63%,24.00% 2.52%,26.00% 3.60%,28.00% 2.78%,30.00% 2.77%,32.00% 2.84%,34.00% 3.99%,36.00% 4.67%,38.00% 3.99%,40.00% 5.27%,42.00% 3.74%,44.00% 3.18%,46.00% 4.14%,48.00% 5.37%,50.00% 4.08%,52.00% 3.56%,54.00% 4.67%,56.00% 5.84%,58.00% 6.39%,60.00% 6.68%,62.00% 6.19%,64.00% 6.98%,66.00% 7.23%,68.00% 5.15%,70.00% 4.10%,72.00% 4.21%,74.00% 4.64%,76.00% 5.40%,78.00% 4.91%,80.00% 3.20%,82.00% 3.52%,84.00% 4.70%,86.00% 5.25%,88.00% 4.82%,90.00% 5.28%,92.00% 5.43%,94.00% 6.00%,96.00% 4.30%,98.00% 4.81%,100.00% 4.00%,100.00% 97.00%,100.00% 97.00%,98.00% 98.71%,96.00% 99.54%,94.00% 99.95%,92.00% 101.09%,90.00% 99.43%,88.00% 98.94%,86.00% 98.14%,84.00% 96.79%,82.00% 96.05%,80.00% 97.01%,78.00% 98.50%,76.00% 99.41%,74.00% 98.89%,72.00% 99.43%,70.00% 97.92%,68.00% 97.31%,66.00% 95.93%,64.00% 97.23%,62.00% 97.06%,60.00% 95.03%,58.00% 96.17%,56.00% 95.56%,54.00% 94.50%,52.00% 94.12%,50.00% 93.79%,48.00% 93.89%,46.00% 95.15%,44.00% 94.52%,42.00% 95.58%,40.00% 95.68%,38.00% 95.72%,36.00% 96.93%,34.00% 97.54%,32.00% 97.09%,30.00% 95.67%,28.00% 94.74%,26.00% 95.54%,24.00% 93.86%,22.00% 94.16%,20.00% 95.49%,18.00% 95.54%,16.00% 94.26%,14.00% 93.21%,12.00% 93.82%,10.00% 95.51%,8.00% 94.03%,6.00% 94.20%,4.00% 93.12%,2.00% 92.73%,0.00% 95.00%); }

/* Ancien·ne·s élèves devenus artistes */
.une-concert { position: absolute; z-index: 6; left: 0; top: calc(776*var(--u)); width: calc(448*var(--u)); height: calc(248*var(--u)); filter: drop-shadow(0 calc(-3*var(--u)) 0 #FFFBF3); }
.une-concert > span { position: absolute; inset: 0; clip-path: polygon(0.00% 100.00%,0.00% 2.40%,0.96% 2.81%,1.93% 3.19%,2.89% 6.10%,3.86% 8.30%,4.82% 9.81%,5.79% 11.05%,6.75% 11.24%,7.71% 12.01%,8.68% 14.36%,9.64% 15.20%,10.61% 17.42%,11.57% 18.00%,12.54% 19.77%,13.50% 24.00%,14.11% 24.43%,14.71% 24.04%,15.32% 25.70%,15.93% 27.38%,16.54% 27.13%,17.14% 28.79%,17.75% 30.03%,18.36% 30.36%,18.96% 32.21%,19.57% 33.27%,20.18% 33.96%,20.79% 33.64%,21.39% 35.57%,22.00% 37.00%,23.64% 37.23%,25.29% 38.70%,26.93% 38.45%,28.57% 38.70%,30.21% 38.84%,31.86% 39.20%,33.50% 40.55%,35.14% 39.90%,36.79% 40.46%,38.43% 41.05%,40.07% 40.30%,41.71% 41.67%,43.36% 40.97%,45.00% 40.00%,46.57% 41.17%,48.14% 41.54%,49.71% 41.01%,51.29% 41.95%,52.86% 40.89%,54.43% 40.95%,56.00% 41.20%,57.57% 43.66%,59.14% 43.96%,60.71% 42.87%,62.29% 43.37%,63.86% 43.24%,65.43% 42.90%,67.00% 45.00%,69.14% 46.46%,71.29% 47.07%,73.43% 48.63%,75.57% 50.52%,77.71% 52.29%,79.86% 52.85%,82.00% 54.23%,84.14% 54.92%,86.29% 55.72%,88.43% 57.02%,90.57% 59.33%,92.71% 61.00%,94.86% 62.07%,97.00% 66.00%,100.00% 70.00%,100.00% 100.00%); }
.une-concert img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.une-concert-v2 { top: calc(740*var(--u)); width: calc(440*var(--u)); height: calc(284*var(--u)); filter: none; } /* découpée dans la maquette v2, bord déchiré compris */
.une-concert-v2 img { display: block; object-fit: fill; }
.une-artistes { position: absolute; z-index: 7; left: 0; right: 0; top: 0; height: 0; color: var(--encre); }
.artistes-titre { position: absolute; left: calc(96*var(--u)); top: calc(768*var(--u)); width: calc(380*var(--u)); margin: 0; font: 400 calc(37*var(--u))/1.08 var(--titre); text-transform: uppercase; color: var(--encre); letter-spacing: .005em; }
.artistes-titre a { text-decoration: none; color: inherit; }
.artistes-titre .pinceau { font-size: calc(38*var(--u)); padding: calc(4*var(--u)) calc(14*var(--u)) calc(2*var(--u)) calc(10*var(--u)); margin-left: calc(2*var(--u)); transform: rotate(-3deg); }
.artistes-titre .pinceau::after { content: ""; position: absolute; left: 30%; right: -2%; bottom: calc(-14*var(--u)); height: calc(9*var(--u)); background: currentColor; -webkit-mask: url(assets/img/dessins/dessin-souligne.svg) center / 100% 100% no-repeat; mask: url(assets/img/dessins/dessin-souligne.svg) center / 100% 100% no-repeat; }
.artistes-grille { position: absolute; left: calc(429*var(--u)); top: calc(743*var(--u)); display: grid; grid-template-columns: calc(250*var(--u)) calc(246*var(--u)) calc(233*var(--u)) calc(248*var(--u)); gap: calc(15.5*var(--u)); }
.artiste-vignette { position: relative; }
.artiste-photo { display: block; height: calc(116*var(--u)); background: var(--charbon); overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.artiste-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.artiste-vignette:hover .artiste-photo img { transform: scale(1.05); }
.artiste-vignette h3 { margin: calc(9*var(--u)) 0 0 calc(12*var(--u)); font: 700 max(15px, calc(26*var(--u)))/1 var(--etroite); letter-spacing: .02em; text-transform: uppercase; }
.artiste-vignette h3 a { text-decoration: none; }
.artiste-ecouter { position: absolute; right: calc(10*var(--u)); bottom: 0; width: calc(24*var(--u)); height: calc(24*var(--u)); color: var(--encre); }
.artiste-ecouter .ic { width: 100%; height: 100%; }

.une-piliers { position: absolute; z-index: 6; left: calc(440*var(--u)); right: 0; top: calc(882*var(--u)); bottom: 0; display: grid; grid-template-columns: calc(240*var(--u)) calc(267*var(--u)) calc(253*var(--u)) calc(270*var(--u)); align-items: center; padding: 0; color: var(--encre); }
.une-piliers::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ivoire-clair) var(--grain); clip-path: polygon(0.00% 12.00%,0.91% 11.89%,1.82% 10.93%,2.73% 10.91%,3.64% 11.22%,4.55% 11.43%,5.45% 10.41%,6.36% 10.22%,7.27% 9.34%,8.18% 8.56%,9.09% 8.30%,10.00% 9.03%,10.91% 9.13%,11.82% 8.62%,12.73% 10.77%,13.64% 9.43%,14.55% 8.65%,15.45% 9.00%,16.36% 9.46%,17.27% 9.54%,18.18% 9.07%,19.09% 9.47%,20.00% 8.85%,20.91% 10.36%,21.82% 11.10%,22.73% 10.31%,23.64% 10.93%,24.55% 9.47%,25.45% 9.42%,26.36% 10.10%,27.27% 9.28%,28.18% 8.88%,29.09% 8.24%,30.00% 8.46%,30.91% 7.51%,31.82% 7.18%,32.73% 6.05%,33.64% 6.45%,34.55% 5.67%,35.45% 5.31%,36.36% 6.40%,37.27% 6.75%,38.18% 6.33%,39.09% 5.68%,40.00% 7.30%,40.91% 5.79%,41.82% 6.80%,42.73% 6.08%,43.64% 5.90%,44.55% 7.68%,45.45% 6.84%,46.36% 7.29%,47.27% 7.99%,48.18% 7.27%,49.09% 7.38%,50.00% 7.22%,50.91% 7.42%,51.82% 7.62%,52.73% 7.22%,53.64% 7.09%,54.55% 7.11%,55.45% 6.64%,56.36% 7.51%,57.27% 6.84%,58.18% 6.10%,59.09% 6.76%,60.00% 6.62%,60.91% 7.91%,61.82% 7.82%,62.73% 8.30%,63.64% 8.40%,64.55% 7.57%,65.45% 8.08%,66.36% 6.90%,67.27% 7.81%,68.18% 8.59%,69.09% 8.22%,70.00% 6.98%,70.91% 6.65%,71.82% 7.83%,72.73% 7.57%,73.64% 6.40%,74.55% 6.59%,75.45% 5.87%,76.36% 5.69%,77.27% 4.30%,78.18% 4.58%,79.09% 5.24%,80.00% 5.92%,80.91% 4.87%,81.82% 4.46%,82.73% 5.02%,83.64% 4.39%,84.55% 5.09%,85.45% 4.93%,86.36% 4.35%,87.27% 4.25%,88.18% 4.13%,89.09% 3.24%,90.00% 4.02%,90.91% 3.18%,91.82% 4.48%,92.73% 3.60%,93.64% 4.11%,94.55% 4.73%,95.45% 5.57%,96.36% 5.52%,97.27% 5.72%,98.18% 5.44%,99.09% 4.50%,100.00% 4.00%,100.00% 100.00%,0.00% 100.00%); filter: drop-shadow(0 0 0 #fff); }
.pilier { display: flex; align-items: center; gap: calc(18*var(--u)); padding: calc(4*var(--u)) 0 calc(4*var(--u)) calc(24*var(--u)); text-decoration: none; color: var(--encre); border-left: 1.5px solid rgba(26,23,22,.55); }
.pilier:first-child { border-left: 0; }
.pilier .ic { width: calc(58*var(--u)); height: calc(58*var(--u)); flex: none; transition: transform .25s; }
/* tailles exactes des icônes de la maquette v2 */
.pilier .ic-chant { width: calc(57*var(--u)); height: calc(74*var(--u)); }
.pilier .ic-collectif { width: calc(71*var(--u)); height: calc(46*var(--u)); }
.pilier .ic-creation { width: calc(67*var(--u)); height: calc(55*var(--u)); }
.pilier .ic-scene { width: calc(65*var(--u)); height: calc(65*var(--u)); }
.pilier:nth-child(2) { padding-left: calc(37*var(--u)); }
.pilier:nth-child(3) { padding-left: calc(17*var(--u)); }
.pilier:nth-child(4) { padding-left: calc(27*var(--u)); }
.pilier:hover .ic { transform: rotate(-8deg) scale(1.08); }
.pilier span { font: 400 max(11px, calc(13.2*var(--u)))/1.2 var(--texte); }
.pilier b { display: block; font: 700 max(15px, calc(23*var(--u)))/1.1 var(--etroite); text-transform: uppercase; letter-spacing: .01em; margin-bottom: calc(2*var(--u)); }

/* ==================================================================
   7. Sections (accueil et pages intérieures)
   ================================================================== */
.section { position: relative; padding: clamp(64px, 8vw, 120px) 0; }
.section::before, .contenu-blocs > .wp-block-group::before, .appel::before, .pied::before {
	content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 26px; z-index: 2;
	background: url(assets/img/dechire-papier.svg) 0 0 / 1200px 100% repeat-x;
	pointer-events: none;
}
.section.charbon::before, .contenu-blocs > .is-style-charbon::before, .pied::before { background-image: url(assets/img/dechire-charbon.svg); }
.section.papier-clair::before { background-image: url(assets/img/dechire-papier-clair.svg); }
.contenu-blocs > .is-style-sauge::before, .contenu-blocs > .is-style-orange::before { display: none; }
.cadre { width: var(--cadre); margin: 0 auto; position: relative; }
.cadre-texte { width: min(860px, 100% - 48px); margin: 0 auto; position: relative; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.tete-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(32px, 4vw, 56px); }
.tete-section .titre-affiche { margin: 0; }
.etiquette { display: inline-block; font: 700 13px/1 var(--etroite); letter-spacing: .14em; text-transform: uppercase; color: var(--corail-fonce); }

/* Présentation de l’école */
.accueil-ecole { padding-top: clamp(70px, 8vw, 120px); }
.collage-ayvee { position: relative; min-height: 520px; }
.collage-ayvee .photo-a { position: absolute; left: 0; top: 10px; width: 60%; transform: rotate(-4deg); }
.collage-ayvee .photo-b { position: absolute; right: 0; top: 160px; width: 50%; transform: rotate(3.5deg); }
.collage-ayvee .dessin-notes-noir { left: 58%; top: -10px; width: 70px; height: 90px; color: var(--encre); transform: rotate(10deg); }
.cartes-qui { list-style: none; counter-reset: q; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0; margin: 26px 0 30px; }
.cartes-qui li { counter-increment: q; position: relative; padding: 18px 18px 16px 58px; background: var(--creme); font-weight: 500; line-height: 1.3; box-shadow: 0 3px 0 rgba(0,0,0,.06); clip-path: polygon(0 3%, 30% 0, 70% 4%, 100% 1%, 99% 52%, 100% 97%, 64% 100%, 30% 96%, 0 100%, 1% 50%); }
.cartes-qui li::before { content: "0" counter(q); position: absolute; left: 16px; top: 14px; font: 400 28px/1 var(--affiche); color: var(--corail); }
.cartes-qui li:nth-child(2)::before { color: var(--orange); }
.cartes-qui li:nth-child(3)::before { color: var(--sauge-fonce); }
.cartes-qui li:nth-child(4)::before { color: var(--rose); }

/* Cartes des cours */
.grille-cours { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px 22px; }
.carte-cours {
	position: relative; display: flex; flex-direction: column; min-height: 300px;
	padding: 30px 26px 24px; color: var(--encre); text-decoration: none;
	background: var(--corail) var(--grain);
	clip-path: polygon(0.00% 1.50%,2.50% 0.43%,5.00% -0.88%,7.50% -0.54%,10.00% -1.08%,12.50% -0.94%,15.00% -0.23%,17.50% 0.38%,20.00% -1.43%,22.50% 0.37%,25.00% -0.30%,27.50% 0.26%,30.00% -1.01%,32.50% -0.15%,35.00% 1.47%,37.50% 0.46%,40.00% 2.18%,42.50% 0.71%,45.00% 1.62%,47.50% 1.06%,50.00% 1.03%,52.50% 1.36%,55.00% 0.31%,57.50% 0.08%,60.00% 1.05%,62.50% 2.37%,65.00% 3.24%,67.50% 1.84%,70.00% 2.37%,72.50% 2.11%,75.00% 2.04%,77.50% 1.96%,80.00% 0.56%,82.50% 1.87%,85.00% 2.45%,87.50% 2.73%,90.00% 2.37%,92.50% 1.63%,95.00% 1.44%,97.50% -0.32%,100.00% 1.00%,100.00% 1.00%,99.96% 4.05%,99.92% 7.81%,99.88% 10.77%,99.85% 15.44%,99.81% 20.47%,99.77% 23.19%,99.73% 27.56%,99.69% 30.83%,99.65% 35.43%,99.62% 39.49%,99.58% 42.23%,99.54% 46.89%,99.50% 49.78%,99.46% 52.67%,99.42% 56.37%,99.38% 60.57%,99.35% 63.76%,99.31% 68.02%,99.27% 72.24%,99.23% 75.80%,99.19% 79.31%,99.15% 83.62%,99.12% 86.57%,99.08% 91.05%,99.04% 94.72%,99.00% 99.00%,99.00% 99.00%,96.53% 99.65%,94.05% 100.53%,91.58% 100.57%,89.10% 101.09%,86.62% 101.16%,84.15% 100.40%,81.67% 101.43%,79.20% 100.23%,76.72% 99.70%,74.25% 100.49%,71.78% 100.21%,69.30% 100.77%,66.82% 100.44%,64.35% 99.99%,61.88% 98.54%,59.40% 100.05%,56.93% 98.52%,54.45% 97.85%,51.98% 97.03%,49.50% 96.67%,47.02% 95.89%,44.55% 95.94%,42.08% 96.66%,39.60% 95.62%,37.12% 95.28%,34.65% 94.65%,32.17% 94.40%,29.70% 95.63%,27.23% 95.89%,24.75% 96.82%,22.27% 95.90%,19.80% 96.51%,17.33% 97.17%,14.85% 98.10%,12.38% 98.65%,9.90% 98.65%,7.42% 98.39%,4.95% 98.81%,2.48% 97.09%,0.00% 98.50%,0.00% 98.50%,0.00% 95.82%,0.00% 92.26%,0.00% 89.24%,0.00% 84.55%,0.00% 80.70%,0.00% 76.75%,0.00% 73.59%,0.00% 68.32%,0.00% 64.54%,0.00% 61.74%,0.00% 58.61%,0.00% 54.73%,0.00% 50.39%,0.00% 46.98%,0.00% 43.11%,0.00% 39.01%,0.00% 36.11%,0.00% 32.91%,0.00% 27.96%,0.00% 24.40%,0.00% 20.77%,0.00% 17.41%,0.00% 13.99%,0.00% 11.25%,0.00% 6.63%,0.00% 1.50%);
	transition: transform .25s;
}
.carte-cours:nth-child(3n+1) { transform: rotate(-1.2deg); }
.carte-cours:nth-child(3n+2) { transform: rotate(.9deg); }
.carte-cours:hover { transform: rotate(0) translateY(-6px); color: var(--encre); }
.carte-cours.carte-orange { background-color: var(--orange); }
.carte-cours.carte-sauge { background-color: var(--sauge); }
.carte-cours.carte-rose { background-color: var(--rose); color: #fff; }
.carte-cours.carte-charbon { background-color: var(--ivoire); }
.carte-accroche { font: 700 13px/1.2 var(--etroite); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.carte-titre { font: 400 clamp(32px, 2.6vw, 40px)/.95 var(--affiche); letter-spacing: .01em; text-transform: uppercase; margin: 10px 0 12px; }
.carte-texte { font-size: 16px; line-height: 1.4; }
.carte-bas { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.carte-prix { font: 600 15px/1 var(--etroite); letter-spacing: .08em; text-transform: uppercase; }
.carte-prix b { font: 400 30px/1 var(--affiche); letter-spacing: .02em; margin-left: 4px; }
.carte-cours .rond { width: 50px; height: 50px; background: var(--charbon); border-color: rgba(255,255,255,.9); }
.carte-cours:hover .rond { transform: translateX(4px); }

/* Projets & actualités */
.projets-actus { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.grille-projets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grille-projets.grande { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 30px; }
.carte-projet { display: flex; flex-direction: column; text-decoration: none; color: var(--encre); background: var(--creme); box-shadow: 0 8px 20px rgba(0,0,0,.12); transition: transform .25s; }
.carte-projet:nth-child(odd) { transform: rotate(-.8deg); }
.carte-projet:nth-child(even) { transform: rotate(.7deg); }
.carte-projet:hover { transform: rotate(0) translateY(-5px); color: var(--encre); }
.carte-projet-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--charbon) var(--charbon-tex); clip-path: polygon(0.00% 3.00%,2.00% 2.34%,4.00% 2.38%,6.00% 2.23%,8.00% 3.00%,10.00% 3.68%,12.00% 4.08%,14.00% 2.65%,16.00% 3.08%,18.00% 3.74%,20.00% 2.63%,22.00% 1.55%,24.00% 1.78%,26.00% 2.85%,28.00% 1.77%,30.00% 1.15%,32.00% 1.83%,34.00% 0.09%,36.00% 0.89%,38.00% 0.54%,40.00% 0.94%,42.00% 0.52%,44.00% 0.44%,46.00% 0.29%,48.00% -1.02%,50.00% -0.21%,52.00% -0.14%,54.00% 0.32%,56.00% 0.25%,58.00% -0.82%,60.00% -0.88%,62.00% 0.21%,64.00% -0.71%,66.00% -1.12%,68.00% -0.57%,70.00% -0.46%,72.00% 1.09%,74.00% -0.12%,76.00% 0.77%,78.00% 0.27%,80.00% 1.19%,82.00% 0.76%,84.00% 0.39%,86.00% 0.02%,88.00% -0.24%,90.00% 0.29%,92.00% -1.03%,94.00% -2.06%,96.00% -1.56%,98.00% -1.53%,100.00% 0.00%,100.00% 96.00%,100.00% 96.00%,98.00% 95.41%,96.00% 96.75%,94.00% 97.11%,92.00% 96.66%,90.00% 96.38%,88.00% 94.71%,86.00% 95.82%,84.00% 95.25%,82.00% 95.65%,80.00% 97.47%,78.00% 96.31%,76.00% 97.87%,74.00% 96.28%,72.00% 97.95%,70.00% 98.88%,68.00% 99.10%,66.00% 98.05%,64.00% 98.98%,62.00% 99.73%,60.00% 99.32%,58.00% 98.52%,56.00% 97.11%,54.00% 96.09%,52.00% 96.79%,50.00% 96.36%,48.00% 96.80%,46.00% 97.06%,44.00% 96.45%,42.00% 95.36%,40.00% 97.45%,38.00% 97.81%,36.00% 98.98%,34.00% 97.24%,32.00% 97.10%,30.00% 97.30%,28.00% 97.83%,26.00% 98.44%,24.00% 99.69%,22.00% 98.60%,20.00% 98.77%,18.00% 99.76%,16.00% 98.57%,14.00% 100.33%,12.00% 98.40%,10.00% 98.05%,8.00% 98.79%,6.00% 97.56%,4.00% 99.36%,2.00% 101.09%,0.00% 99.00%); }
.carte-projet-img img { width: 100%; height: 100%; object-fit: cover; }
.carte-projet.sans-photo .carte-projet-img { display: grid; place-items: center; color: var(--corail); }
.carte-projet.sans-photo .carte-projet-img .ic { width: 70px; height: 90px; }
.carte-projet:nth-child(3n+2).sans-photo .carte-projet-img { color: var(--orange); }
.carte-projet:nth-child(3n).sans-photo .carte-projet-img { color: var(--sauge); }
.carte-projet-txt { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.carte-projet-txt b { font: 400 26px/1.05 var(--titre); text-transform: uppercase; }
.carte-projet-txt > span:last-child { font-size: 15.5px; line-height: 1.4; }
.fil-actus { background: var(--charbon) var(--charbon-tex); color: var(--ivoire); padding: 30px 28px; transform: rotate(1deg); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.fil-titre { font: 400 30px/1 var(--affiche); text-transform: uppercase; letter-spacing: .02em; color: var(--orange); margin: 0 0 14px; }
.fil-titre ~ .fil-titre { margin-top: 26px; }
.liste-actus, .liste-evenements { list-style: none; margin: 0 0 18px; padding: 0; }
.liste-actus li { border-top: 1px solid rgba(241,231,218,.2); }
.liste-actus a { display: block; padding: 12px 0; text-decoration: none; }
.liste-actus .date { display: block; font: 600 13px/1 var(--etroite); letter-spacing: .12em; text-transform: uppercase; color: #F08A7A; margin-bottom: 5px; }
.liste-actus b { font-weight: 500; font-size: 17px; line-height: 1.3; }
.fil-actus .lien-fleche { color: var(--creme); }
.ligne-evenement a { display: flex; gap: 14px; align-items: center; padding: 10px 0; text-decoration: none; }
.ligne-evenement b { display: block; font-weight: 600; }
.calendrier { flex: none; width: 62px; text-align: center; background: var(--corail); color: var(--encre); padding: 6px 4px; font: 600 12px/1.1 var(--etroite); text-transform: uppercase; letter-spacing: .06em; transform: rotate(-3deg); }
.calendrier b { display: block; font: 400 30px/1 var(--affiche); }
.liste-evenements.grande .ligne-evenement { border-bottom: 2px dashed rgba(26,23,22,.2); }
.liste-evenements.grande .ligne-evenement a { padding: 18px 0; font-size: 19px; }
.liste-evenements.passe { opacity: .7; }

/* Mur de photos et vidéos */
.mur-medias { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 40px 30px; padding-top: 10px; }
.polaroid { position: relative; transition: transform .25s; }
.polaroid:nth-child(4n+1) { transform: rotate(-2.5deg); }
.polaroid:nth-child(4n+2) { transform: rotate(1.8deg) translateY(14px); }
.polaroid:nth-child(4n+3) { transform: rotate(-1deg); }
.polaroid:nth-child(4n) { transform: rotate(2.6deg) translateY(8px); }
.polaroid:hover { transform: rotate(0) scale(1.03); z-index: 2; }
.polaroid::before { content: ""; position: absolute; z-index: 2; top: -14px; left: 50%; width: 96px; height: 28px; margin-left: -48px; background: rgba(236,226,205,.8); transform: rotate(-5deg); clip-path: polygon(2% 8%, 12% 0, 26% 8%, 40% 0, 56% 8%, 70% 0, 86% 7%, 100% 0, 98% 94%, 84% 100%, 68% 93%, 52% 100%, 36% 93%, 20% 100%, 0 94%); }
.polaroid a { text-decoration: none; color: var(--encre); display: block; }
.polaroid-img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--charbon); }
.polaroid-img img { width: 100%; height: 100%; object-fit: cover; }
.polaroid-vide { display: grid; place-items: center; height: 100%; color: var(--corail); }
.polaroid-vide .ic { width: 40%; height: 40%; }
.lecture { position: absolute; right: 12px; bottom: 12px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--corail); color: var(--encre); border: 3px solid #fff; }
.lecture .ic { width: 26px; height: 26px; margin-left: 3px; }
.polaroid figcaption { font: 24px/1.15 "Caveat Brush", cursive; text-align: center; padding: 12px 4px 2px; }
.suivre { margin-top: 50px; text-align: center; font-size: 18px; }
.suivre a { display: inline-flex; align-items: center; gap: 6px; color: var(--orange); }
.suivre .ic { width: 16px; height: 16px; }
.loupe { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(12,10,11,.92); padding: 4vw; }
.loupe[hidden] { display: none; }
.loupe img { max-height: 88vh; width: auto; background: #fff; padding: 12px; }
.loupe button { position: absolute; top: 16px; right: 20px; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--corail); font-size: 32px; line-height: 1; cursor: pointer; }

/* Appel final */
.appel { position: relative; padding: clamp(80px, 10vw, 140px) 0; text-align: center; background: var(--charbon) var(--charbon-tex); color: var(--creme); overflow: hidden; }
.appel::before { background-image: url(assets/img/dechire-charbon.svg); }
.section.charbon + .appel::before { display: none; }
.section.charbon + .appel { padding-top: 40px; }
.appel .dessin-notes { right: 8%; top: 40px; width: 90px; height: 116px; transform: rotate(12deg); }
.appel-phrase { font: 400 clamp(44px, 7vw, 96px)/.95 var(--affiche); text-transform: uppercase; letter-spacing: .01em; max-width: 1000px; margin: 0 auto 24px; transform: rotate(-2deg); }
.appel-phrase .pinceau { font-family: var(--affiche); color: var(--creme); }
.appel-texte { font-size: 20px; max-width: 620px; margin: 0 auto; }
.appel .boutons { justify-content: center; margin-top: 34px; }
.appel .btn-pilule .ic { width: 22px; height: 22px; }

/* ==================================================================
   8. Pages intérieures
   ================================================================== */
.entete-page {
	position: relative; overflow: hidden;
	padding: calc(max(64px, calc(100*var(--u))) + clamp(40px, 6vw, 90px)) 0 clamp(70px, 8vw, 120px);
	background: var(--charbon) var(--charbon-tex); color: var(--creme);
}
.entete-page .cadre { display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items: center; }
.entete-page:not(.avec-photo) .cadre { grid-template-columns: 1fr; }
.entete-intro { font-size: clamp(18px, 1.7vw, 22px); max-width: 640px; margin-top: 18px; }
.entete-photo { position: relative; transform: rotate(2.5deg); background: #fff; padding: 10px 10px 12px; box-shadow: 0 16px 36px rgba(0,0,0,.45); max-width: 460px; justify-self: end; }
.entete-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.entete-photo::before { content: ""; position: absolute; z-index: 2; top: -16px; left: 50%; width: 130px; height: 34px; margin-left: -65px; background: rgba(236,226,205,.85); transform: rotate(-4deg); clip-path: polygon(2% 8%, 12% 0, 26% 8%, 40% 0, 56% 8%, 70% 0, 86% 7%, 100% 0, 98% 94%, 84% 100%, 68% 93%, 52% 100%, 36% 93%, 20% 100%, 0 94%); }
.entete-page .dessin-notes { right: 3%; top: calc(max(64px, calc(100*var(--u))) + 10px); width: 80px; height: 104px; transform: rotate(10deg); opacity: .9; }
.entete-page.avec-photo .dessin-notes { right: auto; left: 52%; }
.entete-artistes .entete-photo img, .entete-parents .entete-photo img { aspect-ratio: 4 / 3; }
.espace-barre { height: max(64px, calc(78*var(--u))); }

.sommaire { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; width: var(--cadre); margin: -30px auto 0; }
.sommaire a { padding: 10px 18px; background: var(--creme); font: 600 16px/1 var(--etroite); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; box-shadow: 0 4px 10px rgba(0,0,0,.12); transform: rotate(-1.5deg); }
.sommaire a:nth-child(even) { transform: rotate(1.2deg); }
.sommaire a:hover { background: var(--corail); color: var(--encre); }
.sommaire-sauge a:hover { background: var(--sauge); }

.onglets { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.onglets a { padding: 10px 18px; border: 2px solid currentColor; border-radius: 40px; font: 600 16px/1 var(--etroite); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.onglets a[aria-current] { background: var(--corail); border-color: var(--corail); color: var(--encre); }
.onglets .vide { padding: 10px 18px; border: 2px dashed currentColor; border-radius: 40px; font: 600 16px/1 var(--etroite); letter-spacing: .08em; text-transform: uppercase; opacity: .5; }
.onglets small { font-weight: 500; opacity: .6; letter-spacing: 0; text-transform: none; }

/* Contenu des pages (blocs) */
.contenu-page { padding: clamp(50px, 7vw, 100px) 0; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font: 400 clamp(32px, 3.6vw, 48px)/1.05 var(--titre); text-transform: uppercase; margin-top: 1.6em; }
.entry-content h3 { font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--titre); text-transform: uppercase; margin-top: 1.4em; }
.entry-content ul, .entry-content ol { padding-left: 1.2em; }
.entry-content blockquote { margin-left: 0; }
.entry-content .embed, .entry-content .wp-block-embed { margin: 30px 0; }
.embed iframe, .wp-block-embed iframe { width: 100%; border: 0; }
.embed iframe[src*="youtube"], .embed iframe[src*="vimeo"] { aspect-ratio: 16 / 9; height: auto; }
.credit { font-size: 14px; opacity: .7; }

.contenu-blocs > .wp-block-group { position: relative; padding: clamp(64px, 8vw, 110px) max(24px, (100% - 1240px) / 2); margin: 0; }
.contenu-blocs > .wp-block-group + .wp-block-group { margin-top: 0; }
.contenu-blocs > .wp-block-group > * { max-width: 1240px; }
.contenu-blocs > .wp-block-group > p.lead { max-width: 780px; }
.contenu-blocs > .is-style-sauge, .contenu-blocs > .is-style-orange { clip-path: polygon(0 1.2%, 6% 0, 14% 1.4%, 24% .3%, 36% 1.6%, 48% .4%, 60% 1.5%, 72% .2%, 84% 1.3%, 94% .3%, 100% 1%, 100% 99%, 90% 100%, 78% 98.8%, 64% 99.8%, 50% 98.6%, 36% 99.7%, 22% 98.8%, 10% 99.8%, 0 99%); margin: -10px 0 !important; z-index: 1; }
.wp-block-columns { display: flex; flex-wrap: wrap; gap: 30px clamp(24px, 3vw, 44px); margin: 30px 0; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-columns.colonnes-portrait { align-items: center; }
.colonnes-portrait > .wp-block-column:first-child { flex: 0 0 38%; }
.colonnes-portrait .is-style-scotch img { aspect-ratio: 4 / 5; object-fit: cover; }

/* Carte en papier déchiré (bloc Groupe > style « Carte ») */
.is-style-carte { position: relative; height: 100%; padding: 28px 26px 24px; background: var(--creme) var(--grain); color: var(--encre); clip-path: polygon(0.00% 1.50%,2.50% 1.17%,5.00% 0.92%,7.50% 1.39%,10.00% 1.15%,12.50% 0.28%,15.00% 0.32%,17.50% 1.15%,20.00% 0.43%,22.50% 2.13%,25.00% 2.68%,27.50% 1.29%,30.00% 1.07%,32.50% 2.18%,35.00% 1.74%,37.50% 1.05%,40.00% 0.71%,42.50% 0.42%,45.00% -0.50%,47.50% 0.60%,50.00% 1.19%,52.50% 2.70%,55.00% 2.91%,57.50% 2.82%,60.00% 1.61%,62.50% 1.94%,65.00% 3.24%,67.50% 2.32%,70.00% 2.03%,72.50% 2.86%,75.00% 1.37%,77.50% 2.51%,80.00% 1.89%,82.50% 2.09%,85.00% 1.28%,87.50% 1.38%,90.00% 0.29%,92.50% 0.72%,95.00% 0.21%,97.50% -0.50%,100.00% 1.00%,100.00% 1.00%,99.96% 4.99%,99.92% 7.64%,99.88% 11.91%,99.85% 16.26%,99.81% 20.77%,99.77% 24.99%,99.73% 28.89%,99.69% 32.18%,99.65% 36.75%,99.62% 39.66%,99.58% 44.09%,99.54% 48.47%,99.50% 52.52%,99.46% 56.27%,99.42% 59.54%,99.38% 62.63%,99.35% 66.86%,99.31% 69.93%,99.27% 73.38%,99.23% 76.53%,99.19% 79.82%,99.15% 83.40%,99.12% 87.21%,99.08% 91.48%,99.04% 95.22%,99.00% 99.00%,99.00% 99.00%,96.53% 100.12%,94.05% 100.37%,91.58% 99.94%,89.10% 99.39%,86.62% 98.76%,84.15% 97.48%,81.67% 98.35%,79.20% 98.72%,76.72% 97.88%,74.25% 99.00%,71.78% 99.33%,69.30% 99.97%,66.82% 100.30%,64.35% 100.45%,61.88% 99.33%,59.40% 99.70%,56.93% 99.52%,54.45% 99.44%,51.98% 98.77%,49.50% 99.25%,47.02% 98.26%,44.55% 97.50%,42.08% 98.28%,39.60% 97.63%,37.12% 97.28%,34.65% 98.23%,32.17% 97.41%,29.70% 98.64%,27.23% 98.89%,24.75% 99.51%,22.27% 99.63%,19.80% 98.88%,17.33% 97.50%,14.85% 97.04%,12.38% 97.82%,9.90% 98.57%,7.42% 98.73%,4.95% 98.68%,2.48% 99.60%,0.00% 98.50%,0.00% 98.50%,0.00% 94.91%,0.00% 90.49%,0.00% 86.27%,0.00% 82.12%,0.00% 79.04%,0.00% 75.43%,0.00% 72.08%,0.00% 68.99%,0.00% 65.27%,0.00% 61.54%,0.00% 57.00%,0.00% 53.48%,0.00% 49.58%,0.00% 46.00%,0.00% 43.33%,0.00% 39.21%,0.00% 34.20%,0.00% 31.33%,0.00% 28.28%,0.00% 24.56%,0.00% 21.56%,0.00% 16.71%,0.00% 12.13%,0.00% 8.79%,0.00% 5.47%,0.00% 1.50%); }
.is-style-carte h3 { margin-top: 0; }
.wp-block-column:nth-child(odd) > .is-style-carte { transform: rotate(-1deg); }
.wp-block-column:nth-child(even) > .is-style-carte { transform: rotate(.8deg); }
.is-style-carte.carte-corail { background-color: #F3A091; }
.is-style-carte.carte-orange { background-color: #F1C27E; }
.is-style-carte.carte-sauge { background-color: #BCCBB4; }
.is-style-charbon .is-style-carte { color: var(--encre); }

/* Citation façon affiche */
.wp-block-quote.is-style-affiche { border: 0; padding: 0; margin: 10px 0 40px; }
.wp-block-quote.is-style-affiche p { font: 400 clamp(44px, 6.4vw, 92px)/.95 var(--affiche); text-transform: uppercase; letter-spacing: .01em; transform: rotate(-2deg); max-width: 1000px; }
.wp-block-quote.is-style-affiche .pinceau { font-family: var(--affiche); color: var(--creme); }
.is-style-papier .wp-block-quote.is-style-affiche .pinceau { color: var(--encre); }
.wp-block-quote.is-style-affiche s { text-decoration-color: var(--corail); text-decoration-thickness: .08em; opacity: .75; }

/* Listes */
ul.is-style-coches { list-style: none; padding: 0; }
ul.is-style-coches li { position: relative; padding-left: 36px; margin: 10px 0; }
ul.is-style-coches li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; background: no-repeat center / 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23E8604E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E"); }
ul.is-style-etiquettes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
ul.is-style-etiquettes li { padding: 9px 16px; background: var(--charbon); color: var(--creme); font: 600 16px/1 var(--etroite); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-2deg); }
ul.is-style-etiquettes li:nth-child(3n+2) { background: var(--corail); color: var(--encre); transform: rotate(1.5deg); }
ul.is-style-etiquettes li:nth-child(3n) { background: var(--orange); color: var(--encre); transform: rotate(-.5deg); }
ol.is-style-etapes { list-style: none; counter-reset: e; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
ol.is-style-etapes li { counter-increment: e; position: relative; padding: 70px 22px 22px; background: var(--creme) var(--grain); clip-path: polygon(0.00% 1.50%,2.50% 0.43%,5.00% -0.88%,7.50% -0.54%,10.00% -1.08%,12.50% -0.94%,15.00% -0.23%,17.50% 0.38%,20.00% -1.43%,22.50% 0.37%,25.00% -0.30%,27.50% 0.26%,30.00% -1.01%,32.50% -0.15%,35.00% 1.47%,37.50% 0.46%,40.00% 2.18%,42.50% 0.71%,45.00% 1.62%,47.50% 1.06%,50.00% 1.03%,52.50% 1.36%,55.00% 0.31%,57.50% 0.08%,60.00% 1.05%,62.50% 2.37%,65.00% 3.24%,67.50% 1.84%,70.00% 2.37%,72.50% 2.11%,75.00% 2.04%,77.50% 1.96%,80.00% 0.56%,82.50% 1.87%,85.00% 2.45%,87.50% 2.73%,90.00% 2.37%,92.50% 1.63%,95.00% 1.44%,97.50% -0.32%,100.00% 1.00%,100.00% 1.00%,99.96% 4.05%,99.92% 7.81%,99.88% 10.77%,99.85% 15.44%,99.81% 20.47%,99.77% 23.19%,99.73% 27.56%,99.69% 30.83%,99.65% 35.43%,99.62% 39.49%,99.58% 42.23%,99.54% 46.89%,99.50% 49.78%,99.46% 52.67%,99.42% 56.37%,99.38% 60.57%,99.35% 63.76%,99.31% 68.02%,99.27% 72.24%,99.23% 75.80%,99.19% 79.31%,99.15% 83.62%,99.12% 86.57%,99.08% 91.05%,99.04% 94.72%,99.00% 99.00%,99.00% 99.00%,96.53% 99.65%,94.05% 100.53%,91.58% 100.57%,89.10% 101.09%,86.62% 101.16%,84.15% 100.40%,81.67% 101.43%,79.20% 100.23%,76.72% 99.70%,74.25% 100.49%,71.78% 100.21%,69.30% 100.77%,66.82% 100.44%,64.35% 99.99%,61.88% 98.54%,59.40% 100.05%,56.93% 98.52%,54.45% 97.85%,51.98% 97.03%,49.50% 96.67%,47.02% 95.89%,44.55% 95.94%,42.08% 96.66%,39.60% 95.62%,37.12% 95.28%,34.65% 94.65%,32.17% 94.40%,29.70% 95.63%,27.23% 95.89%,24.75% 96.82%,22.27% 95.90%,19.80% 96.51%,17.33% 97.17%,14.85% 98.10%,12.38% 98.65%,9.90% 98.65%,7.42% 98.39%,4.95% 98.81%,2.48% 97.09%,0.00% 98.50%,0.00% 98.50%,0.00% 95.82%,0.00% 92.26%,0.00% 89.24%,0.00% 84.55%,0.00% 80.70%,0.00% 76.75%,0.00% 73.59%,0.00% 68.32%,0.00% 64.54%,0.00% 61.74%,0.00% 58.61%,0.00% 54.73%,0.00% 50.39%,0.00% 46.98%,0.00% 43.11%,0.00% 39.01%,0.00% 36.11%,0.00% 32.91%,0.00% 27.96%,0.00% 24.40%,0.00% 20.77%,0.00% 17.41%,0.00% 13.99%,0.00% 11.25%,0.00% 6.63%,0.00% 1.50%); }
ol.is-style-etapes li::before { content: counter(e); position: absolute; left: 20px; top: 14px; font: 400 54px/1 var(--affiche); color: var(--corail); }
ul.is-style-tarifs { list-style: none; padding: 0; max-width: 820px; }
ul.is-style-tarifs li { padding: 14px 0; border-bottom: 2px dashed rgba(26,23,22,.25); font-size: 18px; }

/* Frise de l’histoire */
.frise { margin-top: 46px !important; position: relative; }
.frise > .wp-block-group__inner-container, .frise:not(:has(> .wp-block-group__inner-container)) { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
.frise::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 10px; background: url(assets/img/v2-souligne-corail.png) center / 100% 100% no-repeat; }
.frise-etape { position: relative; padding-top: 58px; }
.frise-etape::before { content: ""; position: absolute; left: 4px; top: 22px; width: 24px; height: 24px; border-radius: 50%; background: var(--charbon); border: 4px solid var(--corail); }
.frise-date { font: 400 34px/1 var(--affiche); letter-spacing: .02em; margin-bottom: 8px !important; }
.frise-etape p { margin: 0; }

/* Page Cours */
.cours-intro { padding-top: clamp(60px, 7vw, 90px); padding-bottom: 50px; }
.cours-intro .onglets-ages { width: min(860px, 100% - 48px); margin: 30px auto 0; }
.bloc-cours-in { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.bloc-cours-in.inverse { grid-template-columns: 7fr 5fr; }
.bloc-cours-in.inverse .bloc-cours-tete { order: 2; }
.bloc-cours-tete .titre-affiche { font-size: clamp(42px, 5.4vw, 76px); }
.bloc-cours-tete .titre-affiche a { text-decoration: none; }
.bloc-cours-tete .photo-scotch { max-width: 380px; margin-top: 30px; }
.bloc-cours-tete .photo-scotch img { aspect-ratio: 4 / 5; object-fit: cover; }
.accent-orange .pinceau::before { filter: hue-rotate(28deg) saturate(1.15); }
.accent-sauge .pinceau::before { filter: hue-rotate(120deg) saturate(.45); }
.accent-rose .pinceau::before { filter: hue-rotate(-18deg); }
.accent-rose .pinceau { color: #fff; }
.ages { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ages span { padding: 6px 12px; border: 1.5px solid currentColor; border-radius: 30px; font: 600 14px/1 var(--etroite); letter-spacing: .08em; text-transform: uppercase; }
.pour-qui { margin-top: 14px; font-weight: 500; }
.tarifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; margin: 34px 0 10px; }
.tarif { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 20px; background: var(--creme) var(--grain); color: var(--encre); box-shadow: 0 6px 14px rgba(0,0,0,.1); border-top: 6px solid var(--corail); }
.accent-orange .tarif { border-top-color: var(--orange); }
.accent-sauge .tarif { border-top-color: var(--sauge); }
.accent-rose .tarif { border-top-color: var(--rose); }
.tarif:nth-child(odd) { transform: rotate(-.8deg); }
.tarif:nth-child(even) { transform: rotate(.7deg); }
.tarif-rythme { font: 700 14px/1.1 var(--etroite); letter-spacing: .12em; text-transform: uppercase; color: var(--corail-fonce); }
.tarif-duree { font: 400 30px/1 var(--titre); text-transform: uppercase; }
.tarif-prix { font: 400 42px/1 var(--affiche); letter-spacing: .02em; }
.tarif-prix small { display: block; font: 500 14px/1.2 var(--texte); letter-spacing: 0; margin-top: 4px; opacity: .75; }
.tarif-phrase { font-size: 15px; line-height: 1.35; margin-top: 4px; }
.conditions { list-style: none; padding: 0; margin: 24px 0 0; font-size: 15.5px; }
.conditions li { position: relative; padding-left: 26px; margin: 8px 0; }
.conditions li::before { content: "!"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: var(--encre); font: 700 13px/18px var(--texte); text-align: center; }

/* Artistes */
.portraits { display: grid; gap: clamp(60px, 8vw, 120px); margin-top: 50px; }
.portrait-artiste { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.portrait-artiste.inverse .portrait-photo { order: 2; }
.portrait-photo { position: relative; display: block; aspect-ratio: 4 / 5; }
.portrait-photo .zone { position: absolute; inset: 6% -6% -4% 8%; background: url(assets/img/v2-stabilo.png) center / 100% 100% no-repeat; filter: hue-rotate(28deg) saturate(1.15); transform: rotate(-3deg); }
.ton-corail .zone { filter: none; }
.ton-sauge .zone { filter: hue-rotate(120deg) saturate(.45); }
.ton-rose .zone { filter: hue-rotate(-18deg); }
.portrait-photo .cadre-dechire { position: absolute; inset: 0; transform: rotate(1.5deg); }
.inverse .portrait-photo .cadre-dechire { transform: rotate(-1.5deg); }
.nom-artiste { font: 400 clamp(56px, 8vw, 118px)/.88 var(--affiche); text-transform: uppercase; letter-spacing: .01em; margin: 0; transform: rotate(-2deg); }
.nom-artiste a { text-decoration: none; }
.ancien-nom { font: 400 22px/1.2 "Caveat Brush", cursive; margin: 8px 0 0; opacity: .85; }
.bio { font-size: 19px; margin-top: 18px; }
.liens-musique { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lien-musique { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--charbon); color: var(--creme); border-radius: 40px; font: 600 15px/1 var(--etroite); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.lien-musique:hover { background: var(--corail); color: var(--encre); }
.charbon .lien-musique { background: var(--creme); color: var(--encre); }
.lien-musique .ic { width: 18px; height: 18px; }
.grille-collab { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.collab { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.collab-img { display: block; aspect-ratio: 1; overflow: hidden; background: var(--charbon-2); margin-bottom: 8px; }
.collab-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .3s; }
.collab:hover img { filter: none; }
.collab b { font: 400 24px/1 var(--titre); text-transform: uppercase; }
.grille-temoignages { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.temoignage { margin: 0; padding: 30px 28px; background: var(--creme); box-shadow: 0 8px 18px rgba(0,0,0,.1); font-size: 18px; position: relative; }
.temoignage::before { content: "“"; position: absolute; top: -10px; left: 18px; font: 400 90px/1 var(--affiche); color: var(--corail); }
.temoignage footer { margin-top: 14px; font: 600 15px/1.2 var(--etroite); letter-spacing: .08em; text-transform: uppercase; }
.fiche-artiste-tete { padding: calc(max(64px, calc(100*var(--u))) + 50px) 0 90px; }
.fiche-photo { position: relative; aspect-ratio: 4 / 5; max-width: 520px; }
.fiche-photo .zone { position: absolute; inset: 6% -6% -4% 8%; background: url(assets/img/v2-stabilo.png) center / 100% 100% no-repeat; transform: rotate(-3deg); }
.fiche-photo .cadre-dechire { position: absolute; inset: 0; transform: rotate(1.5deg); }

/* Formulaire */
.grille-form { align-items: start; }
.carte-form { background: var(--creme) var(--grain); padding: clamp(26px, 3vw, 40px); box-shadow: 0 12px 30px rgba(0,0,0,.14); transform: rotate(.6deg); }
.formulaire label { display: block; font: 700 14px/1.2 var(--etroite); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.formulaire label small { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .7; }
.formulaire input, .formulaire select, .formulaire textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--encre); border-radius: 0; background: #fff; font: 400 17px/1.4 var(--texte); color: var(--encre); }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--corail); box-shadow: 4px 4px 0 var(--corail); }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pot { position: absolute; left: -9999px; }
.message-ok, .message-erreur { padding: 14px 18px; font-weight: 500; }
.message-ok { background: #CFE0C6; }
.message-erreur { background: #F6C2B9; }
.coordonnees { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 14px; }
.coordonnees a { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.coordonnees i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--corail); color: var(--encre); flex: none; }
.coordonnees i .ic { width: 24px; height: 24px; }
.coordonnees small { display: block; font: 700 13px/1.2 var(--etroite); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.coordonnees b { font-size: 18px; font-weight: 500; }
.reseaux { display: flex; gap: 12px; }
.reseaux a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid currentColor; text-decoration: none; }
.reseaux a:hover { background: var(--corail); border-color: var(--corail); color: var(--encre); }
.reseaux .ic { width: 20px; height: 20px; }
.reseaux.grands a { width: 56px; height: 56px; background: var(--charbon); color: var(--creme); border: 0; }
.reseaux.grands .ic { width: 26px; height: 26px; }

/* Actualités */
.grille-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.carte-article a { display: block; height: 100%; padding: 0 0 24px; background: var(--creme); text-decoration: none; box-shadow: 0 8px 18px rgba(0,0,0,.1); }
.carte-article .etiquette { margin: 22px 22px 8px; }
.carte-article h2 { font: 400 28px/1.05 var(--titre); text-transform: uppercase; margin: 0 22px 10px; }
.carte-article p, .carte-article .lien-fleche { margin: 0 22px; }
.carte-article .lien-fleche { margin-top: 14px; }
.carte-article-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.carte-article-img img { width: 100%; height: 100%; object-fit: cover; }
.nav-links { display: flex; gap: 10px; justify-content: center; margin-top: 40px; }
.nav-links .page-numbers { padding: 10px 16px; border: 2px solid currentColor; text-decoration: none; font: 600 16px/1 var(--etroite); }
.nav-links .current { background: var(--corail); border-color: var(--corail); }

/* ==================================================================
   9. Pied de page
   ================================================================== */
.pied { position: relative; background: var(--charbon) var(--charbon-tex); color: var(--ivoire); padding: 70px 0 0; border-top: 1px solid rgba(255,255,255,.06); }
.appel + .pied::before { display: none; }
.pied-in { width: var(--cadre); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.pied .logo-img { width: 280px; }
.pied-logo p { margin: 20px 0; font: 500 13px/1.5 var(--texte); letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.pied h2 { font: 700 15px/1 var(--etroite); letter-spacing: .16em; text-transform: uppercase; color: #F08A7A; margin-bottom: 18px; }
.pied-menu, .pied-coord { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied-menu a, .pied-coord a { text-decoration: none; }
.pied-menu a:hover, .pied-coord a:hover { color: var(--orange); }
.pied-coord li { display: flex; gap: 12px; align-items: center; }
.pied-coord .ic { width: 20px; height: 20px; color: var(--corail); }
.pied-bas { width: var(--cadre); margin: 0 auto; padding: 22px 0 30px; border-top: 1px solid rgba(241,231,218,.18); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 14px; opacity: .75; }

/* Apparition douce */
.apparait { opacity: 0; translate: 0 24px; transition: opacity .6s, translate .6s; }
.apparait.vu { opacity: 1; translate: 0 0; }

/* ==================================================================
   10. Tablettes et téléphones (< 1080 px)
   ================================================================== */
@media (max-width: 1079px) {
	.barre-in { height: 68px; padding: 0 16px 0 18px; }
	.barre.pleine .barre-in { height: 64px; }
	.barre { background: var(--charbon) var(--charbon-tex); }
	.barre::before { display: none; }
	.logo-img, .barre.pleine .logo-img { width: 190px; margin-top: 2px; }
	.logo-sous { display: none; }
	.btn-contact { margin-left: auto; padding: 10px 14px 8px; font-size: 16px; }
	.burger { display: grid; gap: 5px; place-content: center; width: 46px; height: 46px; margin-left: 10px; padding: 0; border: 0; background: none; cursor: pointer; }
	.burger span { display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--creme); transition: transform .25s, opacity .25s; }
	.barre.ouvert .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.barre.ouvert .burger span:nth-child(2) { opacity: 0; }
	.barre.ouvert .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
	.nav { position: fixed; inset: 64px 0 0 0; display: none; flex-direction: column; align-items: stretch; padding: 30px 26px 40px; background: var(--charbon) var(--charbon-tex); overflow-y: auto; }
	.barre.ouvert .nav { display: flex; }
	.nav-liste { flex-direction: column; gap: 0; }
	.nav-liste a { padding: 14px 0; font-size: 34px; font-family: var(--affiche); letter-spacing: .03em; border-bottom: 1px solid rgba(241,231,218,.12); }
	.nav-liste a::after { left: 0; right: auto; width: 120px; bottom: 6px; }
	.nav-contact-mobile { display: inline-block; align-self: flex-start; margin-top: 28px; padding: 14px 26px; background: url(assets/img/v2-contact.png) center / 100% 100% no-repeat; color: var(--encre); font: 600 22px/1 var(--etroite); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }

	/* Accueil : composition empilée */
	.une { height: auto; background: var(--ivoire) var(--grain); color: var(--encre); padding-bottom: 40px; }
	.une::before { display: none; }
	.une-hero { position: relative; background: var(--charbon) var(--charbon-tex); color: var(--creme); padding: 64px 0 70px; }
	.une-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 30px; background: url(assets/img/dechire-papier.svg) 0 0 / 900px 100% repeat-x; filter: drop-shadow(0 -3px 0 #FFFBF3); }
	.une-photo { position: relative; left: auto; right: auto; top: auto; width: auto; height: auto; aspect-ratio: 1000 / 470; }
	.une-photo img { object-position: 100% 0; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
	.une-hero .dessin-notes { left: auto; right: 5%; top: auto; bottom: 150px; width: 60px; height: 78px; }
	.une-hero .dessin-eclats { left: 30.2%; top: calc(64px + 15.8vw); width: 10.9%; height: auto; aspect-ratio: 109 / 79; }
	.une-texte { position: relative; left: auto; top: auto; width: auto; padding: 0 22px; margin-top: -40px; }
	.slogan { font-size: min(16vw, 96px); }
	.slogan-pinceau { margin: 6px 0 0 -18px; padding: 10px 26px 12px 20px; }
	.une-texte::before { display: none; }
	.slogan-pinceau::before { content: ""; position: absolute; z-index: -1; inset: -14px -10px -6px -16px; background: url(assets/img/v2-pinceau-scene.webp) 0 0 / 100% 100% no-repeat; transform: rotate(3.5deg); }
	.une-papier-fond { display: none; }
	.une-sous { margin: 26px 0 0; font-size: 18px; }
	.une-texte .btn-pilule { margin: 22px 0 0; padding: 14px 24px; font-size: 16px; gap: 12px; border-radius: 40px; }
	.une-texte .btn-pilule .ic { width: 24px; height: 16px; }

	.parcours { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 0; }
	.parcours::before { content: ""; display: block; }
	.parcours-jeunes { margin-top: -44px; background-size: 194.43% auto; }
	.parcours-jeunes::before { aspect-ratio: 790 / 310; }
	.parcours-parents { margin-top: -10px; background-size: 197.94% auto; }
	.parcours-parents::before { aspect-ratio: 776 / 310; }
	.parcours-legende { display: block; padding: 0 22px 14px; font: 400 17px/1.35 var(--texte); }
	.parcours-jeunes .parcours-legende { padding-top: 4px; }
	.parcours-texte { display: none; }

	.une-concert { position: relative; left: auto; top: auto; width: auto; height: 170px; margin-top: 50px; }
	.une-concert-v2 { height: auto; aspect-ratio: 440 / 284; width: 100%; margin-top: 30px; }
	.une-concert > span { clip-path: polygon(0 8%, 12% 2%, 26% 9%, 40% 1%, 54% 8%, 70% 0, 84% 7%, 100% 2%, 100% 100%, 0 100%); }
	.une-artistes { position: relative; height: auto; padding: 0 18px; margin-top: -40px; }
	.artistes-titre { position: relative; left: auto; top: auto; width: auto; font-size: clamp(30px, 8vw, 44px); background: var(--ivoire); display: inline-block; padding: 14px 16px 14px 0; }
	.artistes-titre .pinceau { font-size: 1.1em; padding: 4px 14px 2px 10px; }
	.artistes-titre .pinceau::after { bottom: -12px; height: 8px; }
	.artistes-grille { position: relative; left: auto; top: auto; grid-template-columns: 1fr 1fr; gap: 18px 14px; margin-top: 26px; }
	.artiste-photo { height: auto; aspect-ratio: 4 / 3; }
	.artiste-vignette h3 { margin: 8px 30px 0 0; font-size: 20px; }
	.artiste-ecouter { width: 22px; height: 22px; right: 2px; }

	.une-piliers { position: relative; left: auto; right: auto; top: auto; bottom: auto; grid-template-columns: 1fr 1fr; gap: 26px 10px; padding: 40px 18px 10px; margin-top: 30px; }
	.une-piliers::before { clip-path: polygon(0 3%, 20% 0, 40% 3%, 60% 0, 80% 3%, 100% 0, 100% 100%, 0 100%); }
	.pilier, .pilier:nth-child(n) { flex-direction: column; align-items: flex-start; gap: 10px; border-left: 0; padding: 0 6px; }
	.pilier .ic { width: 46px; height: 46px; }
	.pilier span { font-size: 15px; }
	.pilier b { font-size: 22px; }

	/* Pages */
	.grille-2, .projets-actus, .entete-page .cadre, .bloc-cours-in, .bloc-cours-in.inverse, .portrait-artiste, .pied-in { grid-template-columns: 1fr; }
	.bloc-cours-in.inverse .bloc-cours-tete, .portrait-artiste.inverse .portrait-photo { order: 0; }
	.entete-page { padding-top: 120px; }
	.entete-photo { justify-self: center; max-width: 380px; }
	.entete-page.avec-photo .dessin-notes { left: auto; right: 4%; top: 90px; }
	.collage-ayvee { min-height: 0; aspect-ratio: 1 / 1; max-width: 520px; }
	.portrait-photo { max-width: 460px; }
	.fiche-artiste-tete { padding-top: 120px; }
	.fil-actus { transform: none; }
}
@media (max-width: 640px) {
	body { font-size: 16.5px; }
	.grille-projets { grid-template-columns: 1fr; }
	.cartes-qui { grid-template-columns: 1fr; }
	.champs-2 { grid-template-columns: 1fr; }
	.mur-medias { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
	.polaroid { padding: 8px 8px 10px; }
	.polaroid figcaption { font-size: 18px; }
	.tete-section { align-items: flex-start; }
	.sommaire { margin-top: -24px; }
	.sommaire a { font-size: 14px; padding: 9px 13px; }
}