/* ==========================================================
   THÈME — L'ATELIER (Art) : carnet de croquis, trait crayonné
   ========================================================== */
.theme-art {
  --fond: #f4efe4; --texte: #2b2a27; --graphite: #3b3a36; --surligneur: #ffe66d;
  font-family: 'Archivo', sans-serif; font-weight: 300;
  background:
    linear-gradient(90deg, transparent 54px, rgba(233, 49, 26, .35) 54px 56px, transparent 56px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(2, 108, 128, .14) 31px 32px),
    var(--fond);
  background-attachment: local;
}
.theme-art ::selection { background: var(--surligneur); color: var(--texte); }

.ar-papier { position: absolute; inset: 0; opacity: .5; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .18  0 0 0 0 .15  0 0 0 .08 0'/></filter><rect width='240' height='240' filter='url(%23p)'/></svg>"); }
.ar-gribouille { position: absolute; fill: none; stroke: var(--graphite); stroke-width: 1.4; stroke-linecap: round; opacity: .4; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: boil .36s steps(1) infinite; }
.theme-art.is-open .ar-gribouille path { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: dessine 3.5s ease-out forwards .4s; }
.ar-g1 { right: 4%; top: 90px; width: 240px; stroke: #e9311a; }
.ar-g2 { left: 2%; bottom: 6%; width: 200px; stroke: var(--canard); }
.ar-gribouille { stroke-dasharray: none; stroke-dashoffset: 0; }
@keyframes dessine { to { stroke-dashoffset: 0; } }
@keyframes boil { 0% { filter: url(#boil1); } 33% { filter: url(#boil2); } 66% { filter: url(#boil3); } }
.ar-crayon { position: fixed; z-index: 30; width: 220px; top: 40%; left: 110%; transform: rotate(-20deg); }
.theme-art.is-open .ar-crayon { animation: crayon 1.6s cubic-bezier(.5, 0, .5, 1) forwards; }
@keyframes crayon { 0% { left: 110%; top: 30%; } 50% { top: 45%; } 100% { left: -30%; top: 20%; transform: rotate(-35deg); } }

.theme-art .bp-contenu { padding-left: clamp(70px, 8vw, 110px); }
.theme-art .bp-retour { font-family: 'Space Mono', monospace; border-style: dashed; }
.theme-art .bp-retour:hover { background: var(--surligneur); }
.theme-art .bp-kicker { font-family: 'Space Mono', monospace; }
.theme-art .bp-titre { font-family: 'Flor de Ruina', 'Souvenir', serif; font-weight: 400; animation: boil .36s steps(1) infinite; }
.theme-art .bp-titres { position: relative; display: inline-block; }
.theme-art .bp-titres::after {
  content: ''; display: block; height: 18px; width: 0; margin-top: -10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'><path d='M2 10 Q 40 2 80 9 T 160 8 T 240 10 T 298 6' fill='none' stroke='%23e9311a' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat 0 0 / 100% 100%;
  transition: width 1.2s var(--ease-out) .8s;
}
.theme-art.is-open .bp-titres::after { width: 100%; }
.theme-art .bp-intro { font-weight: 400; }

/* cadres dessinés à la main */
.ar-cadre { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; pointer-events: none; animation: boil .36s steps(1) infinite; }
.ar-cadre path { fill: none; stroke: var(--graphite); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ar-cadre path + path { stroke-width: 1; opacity: .6; }
.theme-art .is-in .ar-cadre path { transition: stroke-dashoffset 1.6s ease-in-out .2s; stroke-dashoffset: 0; }
.theme-art .bp-vedette-media > img, .theme-art .bp-vedette-media > video { filter: contrast(1.02); }
.theme-art .media-vide { background: repeating-linear-gradient(-30deg, rgba(59, 58, 54, .12) 0 2px, transparent 2px 9px); font-family: 'Space Mono', monospace; }

.theme-art .bp-badge { background: linear-gradient(100deg, transparent 2%, var(--surligneur) 4% 94%, transparent 98%); padding: 4px 14px; transform: rotate(-2deg); font-weight: 700; }
.theme-art .bp-vedette-titre { font-family: 'Flor de Ruina', serif; font-weight: 400; font-size: clamp(34px, 4vw, 62px); }
.theme-art .bp-meta span { border-style: dashed; }
.theme-art .bp-resume { font-weight: 700; }

.theme-art .bp-liste-titre { font-family: 'Flor de Ruina', serif; font-weight: 400; }
.theme-art .bp-liste-head { border-bottom: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'><path d='M1 4 Q 50 1 100 5 T 200 4 T 300 5 T 399 3' fill='none' stroke='%233b3a36' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat 0 100% / 100% 8px; }
/* pages du carnet : croquis en noir et blanc, qui reprennent couleur au survol */
.theme-art .bp-grille { --gap: 40px 30px; padding-top: 30px; }
.theme-art .bp-carte { --carte-fond: transparent; aspect-ratio: auto; overflow: visible; display: grid; gap: 12px; align-content: start; color: var(--texte); }
.theme-art .bp-carte:not(.is-texte) .bp-carte-media { position: relative; inset: auto; aspect-ratio: 4 / 3; background: #fff; }
.theme-art .bp-carte-media > img, .theme-art .bp-carte-media > video { filter: grayscale(1) contrast(1.08); }
.theme-art .bp-carte:hover .bp-carte-media > img, .theme-art .bp-carte:hover .bp-carte-media > video { filter: none; transform: scale(1.02); }
.theme-art .bp-carte:not(.is-texte) .bp-carte-info { position: relative; background: none; color: inherit; padding: 0 4px; }
.theme-art .bp-carte-titre { font-family: 'Flor de Ruina', serif; font-weight: 400; font-size: clamp(22px, 2vw, 28px); justify-self: start; padding: 0 4px; transition: background-size .5s var(--ease-out); background: linear-gradient(100deg, transparent 2%, var(--surligneur) 4% 94%, transparent 98%) no-repeat 0 60% / 0% 60%; }
.theme-art .bp-carte:hover .bp-carte-titre { background-size: 100% 60%; }
/* sans image : une page de notes encadrée au crayon */
.theme-art .bp-carte.is-texte { aspect-ratio: 4 / 3; border: 2px dashed var(--graphite); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }
.theme-art .bp-carte.is-texte:hover { background: rgba(255, 230, 109, .35); }

.theme-art .bp-modal-boite { border: 2px solid var(--graphite); }
.theme-art .bp-modal-titre { font-family: 'Flor de Ruina', serif; font-weight: 400; }

.theme-art .bp-nav-lien { font-family: 'Flor de Ruina', serif; border: 2px dashed var(--graphite); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }
.theme-art .bp-nav-lien:hover { background: var(--surligneur); }

/* ==========================================================
   MINI-BIO + GALERIE IMBRIQUÉE
   ========================================================== */
.ga-bio { position: relative; max-width: 720px; margin: -10px 0 46px; padding: 22px 26px 18px 30px; background: #fffdf6; box-shadow: 4px 5px 0 rgba(59, 58, 54, .18); rotate: -.6deg; }
/* bout de scotch */
.ga-bio::before { content: ''; position: absolute; left: 42%; top: -13px; width: 110px; height: 26px; background: rgba(255, 230, 109, .75); rotate: 3deg; clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 4% 96%, 0 50%); }
.ga-bio p { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; font-weight: 400; }
.ga-bio p + p { margin-top: 10px; }
.ga-bio p:first-child::first-letter { float: left; font: 400 3.4em/.8 'Flor de Ruina', serif; margin: 6px 8px 0 0; color: #e9311a; }
.ga-outils { margin-top: 14px !important; padding-top: 10px; border-top: 1.5px dashed rgba(59, 58, 54, .35); font: 400 12px 'Space Mono', monospace !important; letter-spacing: .06em; text-transform: uppercase; }

.ga-section { margin-bottom: 30px; }
.ga-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ga-filtres button {
  padding: 6px 14px; border: 2px dashed var(--graphite); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  font: 400 14px 'Space Mono', monospace; transition: background .25s, transform .3s var(--ease-back);
}
.ga-filtres button small { opacity: .6; }
.ga-filtres button:hover { transform: rotate(-2deg); }
.ga-filtres button.is-actif { background: var(--surligneur); border-style: solid; }

/* les dimensions de chaque image sont calculées en JS (js/galerie.js) */
.ga-grille { display: flex; flex-wrap: wrap; }
.ga-grille.is-change .ga-item { animation: gaIn .5s var(--ease-out) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes gaIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.ga-item { position: relative; overflow: hidden; display: block; padding: 0; background: #e9e3d6; flex: none; }
.ga-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out), filter .4s; }
.ga-item:hover img { transform: scale(1.05); }
.ga-legende {
  position: absolute; left: 10px; bottom: 10px; display: grid; padding: 5px 10px; text-align: left;
  background: #fffdf6; box-shadow: 2px 3px 0 rgba(29, 26, 23, .3); rotate: -2deg;
  transform: translateY(12px); opacity: 0; transition: transform .35s var(--ease-back), opacity .25s;
}
.ga-legende b { font: 400 17px/1.1 'Flor de Ruina', serif; }
.ga-legende small { font: 400 10px 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ga-item:hover .ga-legende, .ga-item:focus-visible .ga-legende { transform: none; opacity: 1; }

/* visionneuse */
.ga-visio { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 60px 70px 30px; visibility: hidden; pointer-events: none; }
.ga-visio.is-open { visibility: visible; pointer-events: auto; }
.ga-visio-fond { position: absolute; inset: 0; background: rgba(244, 239, 228, .94); opacity: 0; transition: opacity .3s; }
.ga-visio.is-open .ga-visio-fond { opacity: 1; }
.ga-visio-cadre { position: relative; display: grid; justify-items: center; gap: 12px; max-height: 100%; opacity: 0; transform: scale(.94) rotate(-1deg); transition: transform .45s var(--ease-back), opacity .25s; }
.ga-visio.is-open .ga-visio-cadre { opacity: 1; transform: rotate(-.6deg); }
.ga-visio.is-change .ga-visio-cadre img { animation: gaIn .4s var(--ease-out); }
.ga-visio-cadre img { max-width: min(90vw, 1100px); max-height: calc(100vh - 160px); object-fit: contain; background: #fff; padding: 10px; box-shadow: 6px 8px 0 rgba(59, 58, 54, .25); }
.ga-visio-cadre figcaption { display: grid; justify-items: center; }
.ga-visio-cadre figcaption b { font: 400 30px/1 'Flor de Ruina', serif; }
.ga-visio-cadre figcaption span { font: 400 12px 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ga-visio-x, .ga-visio-nav { position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 2px dashed var(--graphite); background: #fffdf6; font-size: 22px; transition: transform .3s var(--ease-back), background .2s; }
.ga-visio-x { top: 14px; right: 16px; font-size: 28px; }
.ga-visio-x:hover { transform: rotate(90deg); background: var(--surligneur); }
.ga-visio-nav { top: 50%; margin-top: -24px; }
.ga-visio-nav[data-pas="-1"] { left: 14px; } .ga-visio-nav[data-pas="1"] { right: 14px; }
.ga-visio-nav:hover { background: var(--surligneur); transform: scale(1.08); }
@media (max-width: 700px) {
  .theme-art .bp-contenu { padding-left: 34px; padding-right: 14px; }
  .theme-art { background-position: -22px 0, 0 0, 0 0; }
  .ga-visio { padding: 60px 12px 80px; }
  .ga-visio-nav { top: auto; bottom: 16px; margin-top: 0; }
  .ga-legende { display: none; }
}

/* carte "sans jouer" */
.ov-card.t-art { background: #f4efe4; }
.ov-card.t-art .ov-bat { background: repeating-linear-gradient(180deg, #f4efe4 0 19px, rgba(2, 108, 128, .25) 19px 20px), #f4efe4; }
.ov-card.t-art .ov-nom { font-family: 'Flor de Ruina', serif; font-weight: 400; animation: boil .36s steps(1) infinite; }