/*
Theme Name: CJ Studio
Theme URI: https://cj-studio.fr
Author: CJ Studio — Julien Corblin
Description: Thème sur mesure du studio CJ Studio. Création web, e-commerce et communication visuelle. Couleurs, images, textes et animations réglables dans Apparence > Personnaliser.
Version: 1.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: cj-studio
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, blog
*/

/* Les couleurs et les images sont injectées par le thème dans une balise <style>
   générée par functions.php, à partir des réglages du Personnalisateur.
   Ne pas coder de couleur en dur ici : utiliser les variables var(--...). */

/* ==========================================================================
   SOLUWEB — SYSTÈME DE DESIGN v4
   Tout est ici. En WordPress : devient style.css du thème.
   ========================================================================== */


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--texte);font-size:1.0625rem;line-height:1.6;overflow-x:hidden;
}
body.verrou{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;line-height:.9;letter-spacing:-.03em;text-transform:uppercase}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
:focus-visible{outline:var(--trait) solid var(--feu);outline-offset:4px}
.enveloppe{max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere);position:relative;z-index:2}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --------------------------------------------------------------------------
   DOODLES — dessins au trait, tous en stroke:currentColor
   -------------------------------------------------------------------------- */
.doodle{fill:none;stroke:currentColor;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.doodle-plein{fill:currentColor;stroke:none}
@keyframes boil{0%{transform:rotate(-1.2deg) translate(0,0)}100%{transform:rotate(1.2deg) translate(1px,-1.5px)}}
.boil{animation:boil .3s steps(2) infinite}
@keyframes flotte{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-20px) rotate(var(--r,0deg))}}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes balance{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes trace{to{stroke-dashoffset:0}}
.flotte{animation:flotte 6.5s ease-in-out infinite}
.flotte--lent{animation-duration:9.5s}
.tourne{animation:tourne 20s linear infinite}
.balance{animation:balance 4.5s ease-in-out infinite;transform-origin:50% 92%}

/* --------------------------------------------------------------------------
   AMBIANCE : grain + curseur
   -------------------------------------------------------------------------- */
.grain{
  position:fixed;inset:-120px;z-index:9000;pointer-events:none;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grainer 8s steps(6) infinite;
}
@keyframes grainer{
  0%{transform:translate(0,0)}20%{transform:translate(-14px,8px)}40%{transform:translate(10px,-12px)}
  60%{transform:translate(-8px,-6px)}80%{transform:translate(12px,10px)}100%{transform:translate(0,0)}
}
.curseur{
  position:fixed;top:0;left:0;width:57px;height:48px;
  z-index:9500;pointer-events:none;
}
.curseur__crayon{
  width:100%;height:100%;
  background-image:var(--img-curseur-crayon);
  background-size:contain;background-repeat:no-repeat;background-position:center;
  transform-origin:5px 5px;
  transition:transform .2s cubic-bezier(.3,1.5,.4,1);
}
.curseur.gros .curseur__crayon{transform:rotate(-14deg) scale(1.28)}
.curseur.clic .curseur__crayon{transform:rotate(8deg) scale(.88)}
@media (hover:hover) and (pointer:fine){
  html,body,*,*::before,*::after{cursor:none !important}
}
@media (hover:none),(max-width:1024px){.curseur{display:none}}

.rideau{
  position:fixed;inset:0;z-index:9800;background:var(--encre);color:var(--menthe);
  display:grid;place-content:center;gap:1.2rem;text-align:center;
  transition:transform .8s cubic-bezier(.76,0,.24,1);
}
.rideau.parti{transform:translateY(-101%)}
.rideau__mot{font-family:var(--display);font-size:clamp(2.4rem,10vw,7rem);line-height:.9;letter-spacing:-.05em;display:flex;justify-content:center}
.rideau__mot span{display:inline-block;transform:translateY(110%);animation:tombe .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tombe{to{transform:translateY(0)}}
.rideau__compteur{font-family:var(--slab);font-size:1rem;color:var(--papier)}
.rideau svg{width:64px;height:64px;color:var(--feu);margin-inline:auto}

/* --------------------------------------------------------------------------
   BOUTONS
   -------------------------------------------------------------------------- */
.bouton{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-size:.98rem;text-transform:uppercase;text-decoration:none;
  padding:.95rem 1.6rem;background:var(--encre);color:var(--menthe);
  border:var(--trait) solid var(--encre);box-shadow:7px 7px 0 var(--feu);cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease,color .14s ease;
}
.bouton:hover,.bouton:focus-visible{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--feu)}
.bouton--clair{background:var(--menthe);color:var(--encre);box-shadow:7px 7px 0 var(--encre)}
.bouton--clair:hover{box-shadow:1px 1px 0 var(--encre)}
.bouton--nu{background:transparent;color:inherit;box-shadow:none;border-color:currentColor}
.bouton--nu:hover{background:var(--encre);color:var(--menthe);transform:none;border-color:var(--encre)}
.bouton svg{width:18px;height:18px}

/* --------------------------------------------------------------------------
   BANDEAU D'ANNONCE + EN-TÊTE + MÉGA-MENU
   -------------------------------------------------------------------------- */
@keyframes defile{to{transform:translateX(-50%)}}

.entete{--assis-w:98px;position:sticky;top:0;z-index:600;background:var(--encre);color:var(--papier);border-bottom:var(--trait) solid var(--encre)}
.entete__barre{position:relative;display:flex;align-items:center;gap:1.2rem;height:var(--entete-h);max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere)}
.marque{display:flex;align-items:center;gap:.5rem;padding-left:calc(var(--assis-w) + .7rem);font-family:var(--display);font-size:1.4rem;letter-spacing:-.05em;text-decoration:none;text-transform:uppercase;margin-right:auto}
.marque em{font-style:normal;color:var(--menthe)}
.marque__nom{white-space:nowrap;display:block;line-height:.88}
.marque__nom b{font-weight:400;color:var(--menthe)}
.marque svg{width:32px;height:32px;color:var(--menthe);transition:transform .3s ease}
.marque:hover svg{transform:rotate(-16deg) scale(1.12)}

.nav{display:flex;align-items:center;height:100%}
.nav__item{position:relative;height:100%;display:flex;align-items:center}
.nav__lien{
  display:flex;align-items:center;gap:.35rem;height:100%;padding:0 .8rem;font-size:.94rem;
  text-decoration:none;border-bottom:var(--trait) solid transparent;white-space:nowrap;
}
.nav__item:hover .nav__lien,.nav__item:focus-within .nav__lien,.nav__lien.actif{border-bottom-color:var(--menthe);color:var(--menthe)}
.nav__lien i{display:block;width:8px;height:8px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.nav__item:hover .nav__lien i{transform:rotate(225deg) translate(-3px,-3px)}

.mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-10px);
  background:var(--papier);color:var(--encre);border:var(--trait) solid var(--encre);
  box-shadow:12px 12px 0 var(--feu);padding:1.5rem;z-index:20;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease;
}
.nav__item.ouvert .mega,
.nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega--3{width:min(900px,90vw);display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.mega--2{width:min(620px,90vw);display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.mega--1{width:min(372px,92vw);display:grid;gap:.9rem}
.mega__col > a{display:flex;gap:.6rem;align-items:flex-start;text-decoration:none;padding:.5rem;margin:0 -.5rem;transition:background .12s ease,color .12s ease}
.mega__col > a:hover{background:var(--encre);color:var(--menthe)}
.mega__col > a svg{width:26px;height:26px;flex:none;margin-top:.15rem}
.mega__col strong{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.9rem;line-height:1.1;margin-bottom:.15rem}
.mega__col small{display:block;font-size:.8rem;line-height:1.35;color:var(--gris)}
.mega__col > a:hover small{color:var(--menthe);opacity:.8}
.mega__chapo{border-bottom:2px solid var(--encre);padding-bottom:.6rem;margin-bottom:.6rem}
.mega__chapo b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.95rem;display:block}
.mega__chapo span{font-size:.78rem;color:var(--gris)}
.mega__pied{grid-column:1/-1;margin-top:.3rem;background:var(--menthe);border:var(--trait) solid var(--encre);padding:.9rem 1.1rem;display:flex;align-items:center;gap:1rem;justify-content:space-between;flex-wrap:wrap}
.mega__pied strong{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.95rem}
.mega__pied .bouton{padding:.55rem .9rem;font-size:.78rem;box-shadow:4px 4px 0 var(--feu)}

.entete__actions{display:flex;align-items:center;gap:.7rem}
.entete__actions .bouton{padding:.6rem 1rem;font-size:.82rem;background:var(--menthe);color:var(--encre);border-color:var(--menthe);box-shadow:4px 4px 0 var(--feu)}
.burger{display:none;background:none;border:var(--trait) solid var(--papier);color:var(--papier);font-family:var(--display);text-transform:uppercase;padding:.5rem .85rem;font-size:.82rem;cursor:pointer}

.mobile{
  position:fixed;inset:0;z-index:700;background:var(--encre);color:var(--papier);
  padding:calc(var(--entete-h) + 1.5rem) var(--gouttiere) 3rem;overflow-y:auto;
  transform:translateY(-100%);transition:transform .45s cubic-bezier(.76,0,.24,1);
}
.mobile.ouvert{transform:translateY(0)}
.mobile details{border-bottom:2px solid rgba(255,255,255,.16)}
.mobile summary{list-style:none;cursor:pointer;font-family:var(--display);text-transform:uppercase;font-size:1.5rem;padding:.9rem 0}
.mobile summary::-webkit-details-marker{display:none}
.mobile details[open] summary{color:var(--menthe)}
.mobile ul{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.55rem}
.mobile ul a{text-decoration:none;opacity:.85;font-size:.98rem}
.mobile > a{display:block;font-family:var(--display);text-transform:uppercase;font-size:1.5rem;padding:.9rem 0;border-bottom:2px solid rgba(255,255,255,.16);text-decoration:none}
.mobile .bouton{margin-top:2rem;width:100%;justify-content:center}
@media (max-width:1180px){.nav,.entete__actions .bouton{display:none}.burger{display:block}}
@media (min-width:1181px){.mobile{display:none}}

/* --------------------------------------------------------------------------
   DÉCOR DE FOND
   -------------------------------------------------------------------------- */
.decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.perso{position:absolute;color:var(--encre);will-change:transform}

/* --------------------------------------------------------------------------
   HÉROS
   -------------------------------------------------------------------------- */
.heros{position:relative;background:var(--menthe);border-bottom:var(--trait) solid var(--encre);overflow:hidden;padding-block:clamp(3rem,6.5vw,5.5rem) clamp(2.5rem,5vw,4rem)}
.heros--papier{background:var(--papier)}
.heros--feu{background:var(--feu);color:var(--papier)}
.heros--nuit{background:var(--nuit);color:var(--papier)}
.affiche{font-family:var(--display);font-size:var(--t-xxl);line-height:.82;letter-spacing:-.045em;text-transform:uppercase;position:relative;z-index:3}
.affiche .ligne{display:block;overflow:hidden}
.affiche .ligne i{display:inline-block;font-style:normal;transform:translateY(110%);animation:tombe .7s cubic-bezier(.2,.85,.25,1) forwards;animation-delay:calc(var(--i) * .07s + .15s)}
.affiche .bloc{background:var(--encre);color:var(--menthe);padding:0 .12em .05em;margin-left:-.05em}
.affiche .lettre{display:inline-block;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.affiche .lettre:hover{transform:translateY(-14px) rotate(-8deg) scale(1.12)}
.affiche .lettre.pose{
  animation:poseLettre .5s both;
  animation-delay:calc(var(--l,0) * .055s + .95s);
}
@keyframes poseLettre{
  0%{transform:none;animation-timing-function:cubic-bezier(.3,1.6,.5,1)}
  50%{transform:translateY(-14px) rotate(-8deg) scale(1.12);animation-timing-function:cubic-bezier(.3,1.6,.5,1)}
  100%{transform:none}
}
.affiche--page{font-size:var(--t-xl);line-height:.86}
.heros__pied{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gouttiere);align-items:end;margin-top:clamp(1.8rem,4vw,3rem);position:relative;z-index:3}
.heros__texte{font-size:var(--t-m);max-width:46ch;line-height:1.45}
.heros__actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}
@media (max-width:900px){.heros__pied{grid-template-columns:1fr}.heros__actions{justify-content:flex-start}}

.tampon{position:absolute;right:var(--gouttiere);top:clamp(1rem,4vw,2.5rem);width:clamp(120px,13vw,170px);height:clamp(120px,13vw,170px);z-index:4}
.tampon svg{width:100%;height:100%}
.tampon__anneau{animation:tourne 18s linear infinite;transform-origin:50% 50%}
.tampon text{font-family:var(--slab);font-size:13px;letter-spacing:.13em;fill:var(--encre)}
.tampon__coeur{fill:var(--feu);stroke:var(--encre);stroke-width:3}
@media (max-width:1240px){.tampon{display:none}}

/* --------------------------------------------------------------------------
   RUBANS
   -------------------------------------------------------------------------- */
.ruban{background:var(--encre);color:var(--papier);overflow:hidden;padding:.9rem 0;border-block:var(--trait) solid var(--encre)}
.ruban--menthe{background:var(--menthe);color:var(--encre)}
.ruban--feu{background:var(--feu);color:var(--papier)}
.ruban--penche{transform:rotate(-2deg) scale(1.04);position:relative;z-index:5;margin-block:-1px}
.ruban__piste{display:flex;gap:2.2rem;width:max-content;animation:defile 30s linear infinite}
.ruban--inverse .ruban__piste{animation-direction:reverse}
.ruban__piste span{font-family:var(--display);text-transform:uppercase;font-size:clamp(1rem,2vw,1.6rem);display:flex;gap:2.2rem;align-items:center;white-space:nowrap}
.ruban svg{width:24px;height:24px;flex:none}

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */
.section{position:relative;padding-block:var(--bloc);border-bottom:var(--trait) solid var(--encre);overflow:hidden}
.section--papier{background:var(--papier)}
.section--nuit{background:var(--nuit);color:var(--papier)}
.section--nuit .perso{color:var(--jaune);opacity:.14}
.section--menthe{background:var(--menthe)}
.section--feu{background:var(--feu);color:var(--papier)}
.section__titre{font-size:var(--t-xl);max-width:16ch}
.section__intro{font-size:var(--t-m);max-width:50ch;margin-top:1.2rem;line-height:1.5}
.section__tete{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--gouttiere);align-items:end;margin-bottom:clamp(2.2rem,4.5vw,3.5rem)}
@media (max-width:900px){.section__tete{grid-template-columns:1fr}}

.apparait{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.apparait.vu{opacity:1;transform:none}
.apparait[data-retard="1"]{transition-delay:.08s}
.apparait[data-retard="2"]{transition-delay:.16s}
.apparait[data-retard="3"]{transition-delay:.24s}
.apparait[data-retard="4"]{transition-delay:.32s}

/* --------------------------------------------------------------------------
   PÔLES (3 grandes cartes)
   -------------------------------------------------------------------------- */
.poles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--trait);background:var(--encre);border:var(--trait) solid var(--encre)}
.pole{background:var(--papier);padding:clamp(1.6rem,2.6vw,2.4rem);display:flex;flex-direction:column;gap:1rem;text-decoration:none;min-height:var(--pole-h,400px);position:relative;overflow:hidden}
.pole__dessin{width:clamp(72px,9vw,108px);height:auto;transition:transform .4s cubic-bezier(.3,1.4,.4,1)}
.pole:hover .pole__dessin{transform:rotate(-8deg) scale(1.12)}
.pole h3{font-size:var(--t-l)}
.pole p{font-size:.98rem;line-height:1.5}
.pole ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.9rem}
.pole li{display:flex;gap:.5rem;align-items:baseline}
.pole li svg{width:11px;height:11px;flex:none;color:var(--cuir)}
.pole__lien{margin-top:auto;font-family:var(--display);text-transform:uppercase;font-size:.85rem;border-bottom:var(--trait) solid currentColor;align-self:flex-start;padding-bottom:2px}
.pole:hover .pole__lien{background:var(--encre);color:var(--menthe);border-bottom-color:transparent}
.pole--jaune{background:var(--jaune)}
.pole--menthe{background:var(--menthe)}
.pole--feu{background:var(--feu);color:var(--papier)}
.pole--feu li svg{color:var(--papier)}
.pole--feu:hover .pole__lien{background:var(--papier);color:var(--feu)}
@media (max-width:900px){.poles{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   OFFRES (pages services)
   -------------------------------------------------------------------------- */
.offres--une{grid-template-columns:1fr !important}
.offres{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--trait);background:currentColor;border:var(--trait) solid currentColor}
.offre{background:var(--papier);color:var(--encre);padding:clamp(1.5rem,2.6vw,2.2rem);display:flex;flex-direction:column;gap:.85rem;position:relative;overflow:hidden}
.offre svg.offre__dessin{width:56px;height:56px}
.offre h3{font-size:1.5rem}
.offre p{font-size:.97rem;line-height:1.5}
.offre__prix{font-family:var(--slab);font-size:1.05rem;color:var(--cuir);margin-top:auto}
.offre--menthe{background:var(--menthe)}
@media (max-width:760px){.offres{grid-template-columns:1fr}}

/* Liste de points inclus */
.inclus{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gouttiere)}
.inclus > div{border-top:var(--trait) solid currentColor;padding-top:.9rem}
.inclus h3{font-size:1.05rem;margin-bottom:.4rem}
.inclus p{font-size:.93rem;line-height:1.45}
@media (max-width:860px){.inclus{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.inclus{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   PLANCHE DE DOODLES
   -------------------------------------------------------------------------- */
.planche-bloc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:900px){.planche-bloc{grid-template-columns:1fr}}
.planche{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--trait);background:var(--encre);border:var(--trait) solid var(--encre)}
.planche__case{background:var(--papier);aspect-ratio:1;display:grid;place-content:center;padding:.9rem;cursor:pointer}
.planche__case svg{width:clamp(54px,7.5vw,94px);height:auto;color:var(--encre);transition:transform .3s cubic-bezier(.3,1.5,.4,1)}
.planche__case:hover svg{transform:rotate(-10deg) scale(1.18)}
.planche__case:nth-child(2),.planche__case:nth-child(6){background:var(--menthe)}
.planche__case:nth-child(4){background:var(--rose)}
.planche__case:nth-child(5){background:var(--feu)}
.planche__case:nth-child(8){background:var(--encre)}
.planche__case:nth-child(8) svg{color:var(--menthe)}

/* --------------------------------------------------------------------------
   RÉALISATIONS
   -------------------------------------------------------------------------- */
.travaux{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--trait);background:var(--encre);border:var(--trait) solid var(--encre)}
.travail{position:relative;background:var(--encre);color:var(--papier);text-decoration:none;padding:clamp(1.6rem,3vw,2.5rem);min-height:clamp(310px,32vw,420px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.travail__nom{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:.88;letter-spacing:-.035em;position:relative;z-index:2}
.travail p{font-size:.96rem;max-width:38ch;line-height:1.5;position:relative;z-index:2}
.travail__url{font-size:.8rem;opacity:.75;position:relative;z-index:2}
.travail__meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem;position:relative;z-index:2}
.travail__meta span{border:2px solid currentColor;padding:.2rem .55rem;font-size:.72rem;font-family:var(--display);text-transform:uppercase}
.travail--menthe{background:var(--menthe);color:var(--encre)}
.travail--feu{background:var(--feu);color:var(--papier)}
.travail--papier{background:var(--papier);color:var(--encre)}
.travail--rose{background:var(--rose);color:var(--encre)}
.travail__tampon{position:absolute;right:-30px;top:-30px;width:190px;opacity:.16;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.travail:hover .travail__tampon{transform:rotate(18deg) scale(1.1)}
.travail__glisse{position:absolute;left:0;right:0;bottom:0;background:var(--encre);color:var(--menthe);overflow:hidden;padding:.45rem 0;transform:translateY(101%);transition:transform .3s ease;z-index:3}
.travail:hover .travail__glisse{transform:translateY(0)}
.travail__glisse div{display:flex;gap:1.4rem;width:max-content;animation:defile 12s linear infinite;font-family:var(--display);text-transform:uppercase;font-size:.85rem;align-items:center}
.travail__glisse svg{width:14px;height:14px}
@media (max-width:800px){.travaux{grid-template-columns:1fr}}

.filtres{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filtre{font-family:var(--display);text-transform:uppercase;font-size:.82rem;padding:.5rem .9rem;border:var(--trait) solid var(--encre);background:transparent;cursor:pointer}
.filtre[aria-pressed="true"]{background:var(--encre);color:var(--menthe)}

/* --------------------------------------------------------------------------
   MANIFESTE / CHIFFRES / MÉTHODE
   -------------------------------------------------------------------------- */
.manifeste{text-align:center;position:relative;z-index:3}
.manifeste h2{font-size:clamp(2.2rem,7.5vw,6.4rem);line-height:.88;max-width:none}
.manifeste h2 em{font-family:var(--slab);font-style:normal;color:var(--feu);letter-spacing:-.01em}
.manifeste p{font-size:var(--t-m);max-width:46ch;margin:2rem auto 0}

.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gouttiere)}
.chiffre{border-top:var(--trait) solid currentColor;padding-top:1rem}
.chiffre b{display:block;font-family:var(--display);font-size:clamp(2.4rem,5vw,3.6rem);line-height:1}
.chiffre span{font-size:.92rem;line-height:1.4;display:block;margin-top:.4rem}
@media (max-width:860px){.chiffres{grid-template-columns:repeat(2,1fr)}}

.methode{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gouttiere)}
.etape{border-top:var(--trait) solid currentColor;padding-top:1rem}
.etape__num{font-family:var(--slab);font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;display:block;margin-bottom:.35rem}
.etape h3{font-size:1.1rem;margin-bottom:.45rem}
.etape p{font-size:.94rem;line-height:1.5}
@media (max-width:900px){.methode{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.methode{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   PRODUIT / ÉCRAN
   -------------------------------------------------------------------------- */
.produit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:950px){.produit{grid-template-columns:1fr}}
.produit__visuel{background:var(--menthe);border:var(--trait) solid var(--menthe);padding:clamp(1.3rem,3vw,2.2rem);position:relative}
.ecran{background:var(--papier);border:var(--trait) solid var(--encre);overflow:hidden}
.ecran__barre{background:var(--encre);color:var(--menthe);font-size:.75rem;padding:.5rem .8rem}
.ecran__corps{padding:1.3rem;display:grid;gap:.75rem}
.ecran__titre{font-family:var(--display);text-transform:uppercase;font-size:1.4rem;color:var(--encre)}
.ecran__ligne{height:10px;background:rgba(10,10,10,.18)}
.ecran__ligne--courte{width:55%}
.ecran__bouton{background:var(--feu);color:var(--papier);font-family:var(--display);text-transform:uppercase;font-size:.78rem;padding:.55rem .95rem;justify-self:start;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

.liste{list-style:none;margin:1.6rem 0 0;padding:0;border-top:2px solid currentColor}
.liste li{padding:.8rem 0;border-bottom:2px solid currentColor;display:flex;gap:.8rem;align-items:baseline;font-size:1rem}
.liste li b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:.92rem}
.liste svg{width:14px;height:14px;flex:none;color:var(--jaune);transform:translateY(2px)}
.etiquettes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.etiquette{border:2px solid currentColor;padding:.28rem .65rem;font-size:.78rem;font-family:var(--display);text-transform:uppercase}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{max-width:920px;margin-inline:auto;border-top:var(--trait) solid currentColor}
.question{border-bottom:var(--trait) solid currentColor}
.question summary{list-style:none;cursor:pointer;padding:1.4rem 3.2rem 1.4rem 0;position:relative;font-family:var(--display);text-transform:uppercase;font-size:clamp(1rem,2.1vw,1.45rem);line-height:1.15;transition:color .15s ease,padding-left .2s ease}
.question summary::-webkit-details-marker{display:none}
.question summary:hover{color:var(--feu);padding-left:.8rem}
.question summary::after{content:"";position:absolute;right:.4rem;top:50%;width:20px;height:20px;background:currentColor;clip-path:polygon(42% 0,58% 0,58% 42%,100% 42%,100% 58%,58% 58%,58% 100%,42% 100%,42% 58%,0 58%,0 42%,42% 42%);transform:translateY(-50%);transition:transform .25s ease}
.question[open] summary::after{transform:translateY(-50%) rotate(135deg)}
.question__reponse{padding:0 3.2rem 1.5rem 0;max-width:none}

/* --------------------------------------------------------------------------
   FORMULAIRE
   -------------------------------------------------------------------------- */
.formulaire{display:grid;gap:1.1rem}
.champ{display:grid;gap:.4rem}
.champ label{font-family:var(--display);text-transform:uppercase;font-size:.82rem}
.champ input,.champ textarea,.champ select{
  font-family:var(--texte);font-size:1rem;padding:.85rem .9rem;background:var(--papier);
  border:var(--trait) solid var(--encre);color:var(--encre);width:100%;
}
.champ textarea{min-height:150px;resize:vertical}
.champ--double{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:640px){.champ--double{grid-template-columns:1fr}}
.cases{display:flex;flex-wrap:wrap;gap:.5rem}
.case{position:relative}
.case input{position:absolute;opacity:0;width:0;height:0}
.case span{display:block;border:var(--trait) solid var(--encre);padding:.5rem .85rem;font-family:var(--display);text-transform:uppercase;font-size:.8rem;cursor:pointer}
.case input:checked + span{background:var(--encre);color:var(--menthe)}
.case input:focus-visible + span{outline:var(--trait) solid var(--feu);outline-offset:3px}
.mention{font-size:.8rem;color:var(--gris)}

.contact-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:950px){.contact-grille{grid-template-columns:1fr}}
.encart{border:var(--trait) solid var(--encre);padding:clamp(1.3rem,2.5vw,2rem);background:var(--menthe)}
.encart h3{font-size:1.3rem;margin-bottom:.8rem}
.encart ol{margin:0;padding-left:1.1rem;display:grid;gap:.6rem;font-size:.95rem}

/* --------------------------------------------------------------------------
   APPEL FINAL + PIED
   -------------------------------------------------------------------------- */
.appel{position:relative;background:var(--feu);color:var(--papier);border-bottom:var(--trait) solid var(--encre);padding-block:var(--bloc);text-align:center;overflow:hidden}
.appel h2{font-size:var(--t-xxl);line-height:.84;position:relative;z-index:3}
.appel p{font-size:var(--t-m);max-width:42ch;margin:1.4rem auto 0;position:relative;z-index:3}
.appel .bouton{margin-top:2rem;position:relative;z-index:3;background:var(--encre);color:var(--papier);border-color:var(--encre);box-shadow:7px 7px 0 var(--menthe)}
.appel .bouton:hover{box-shadow:1px 1px 0 var(--menthe)}

.pied{background:var(--encre);color:var(--papier);padding-top:clamp(3rem,6vw,4.5rem);position:relative;overflow:hidden}
.pied__haut{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--gouttiere)}
@media (max-width:950px){.pied__haut{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pied__haut{grid-template-columns:1fr}}
.pied h3{font-size:.92rem;margin-bottom:1rem;color:var(--menthe)}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pied a{text-decoration:none;font-size:.94rem;opacity:.85}
.pied a:hover{opacity:1;color:var(--menthe)}
.pied__signature{display:block;width:100%;height:auto;margin-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:.7rem;border-bottom:var(--trait) solid rgba(255,255,255,.16);overflow:visible}
.pied__signature text{font-family:var(--display);font-size:100px;fill:var(--menthe)}
.pied__bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-block:1.4rem;font-size:.8rem;opacity:.7}


@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .affiche .ligne i{transform:none}
  .apparait{opacity:1;transform:none}
  .rideau,.grain{display:none}
}



.logo-cj{background-image:var(--img-mascotte-debout);background-size:contain;background-repeat:no-repeat;background-position:center;aspect-ratio:560/747}
.illu-desk{background-image:var(--img-personnage-bureau);background-size:contain;background-repeat:no-repeat;background-position:bottom right;aspect-ratio:600/611}
.illu-bureau{background-image:var(--img-personnage-ordi);background-size:contain;background-repeat:no-repeat;background-position:center;aspect-ratio:2884/3391}
.marque__logo{width:46px;flex:none;display:block;transition:transform .3s cubic-bezier(.3,1.5,.4,1)}

/* --- Le skateur qui traverse la section des trois métiers --- */
#poles{--skate-h:clamp(180px,21vw,255px);--pole-h:320px;padding-bottom:calc(var(--skate-h) + 1rem - .45 * var(--pole-h))}
.skate{
  position:absolute;left:0;bottom:1rem;
  height:var(--skate-h);width:calc(var(--skate-h) * 1.12);
  z-index:3;pointer-events:none;
  animation:roule 20s linear .3s infinite;
  animation-play-state:paused;
}
.skate i{animation-play-state:paused}
.skate.roule-ok, .skate.roule-ok i{animation-play-state:running}
.skate i{
  position:absolute;inset:0;
  background-repeat:no-repeat;background-position:bottom center;background-size:auto 100%;
}
.skate__roule{background-image:var(--img-skate-roule);animation:skate-roule 20s linear .3s infinite}
.skate__pose{background-image:var(--img-skate-pose);opacity:0;animation:skate-pose 20s linear .3s infinite}

@keyframes roule{
  0%{transform:translateX(calc(100vw + 140px));opacity:1;animation-timing-function:cubic-bezier(.16,.58,.26,1)}
  50%{transform:translateX(2.5rem);opacity:1}
  88%{transform:translateX(2.5rem);opacity:1}
  96%,100%{transform:translateX(2.5rem);opacity:0}
}
@keyframes skate-roule{0%,48.5%{opacity:1}52%,100%{opacity:0}}
@keyframes skate-pose{0%,48.5%{opacity:0}52%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.skate{display:none}}

/* --- La fusée qui traverse le visuel d'accueil --- */
.fusee{
  position:absolute;left:0;top:0;width:clamp(180px,20vw,320px);aspect-ratio:640/305;
  background-image:var(--img-fusee);
  background-size:contain;background-repeat:no-repeat;background-position:center;
  z-index:0;pointer-events:none;opacity:0;
  animation:vole 12s cubic-bezier(.45,0,.55,1) 3s infinite;
}
@keyframes vole{
  0%{transform:translate(calc(-100% - 60px),0) rotate(-3deg);opacity:0}
  4%{opacity:1}
  40%{transform:translate(calc(100vw + 80px),-70px) rotate(-3deg);opacity:1}
  45%,100%{transform:translate(calc(100vw + 80px),-70px) rotate(-3deg);opacity:0}
}
.affiche .lettre.saut{animation:poseLettre .5s both}
@media (prefers-reduced-motion:reduce){.fusee{display:none}}

/* --- Le personnage assis sur le rebord du header --- */
.assis{
  position:absolute;bottom:-3px;left:var(--gouttiere);
  width:var(--assis-w);aspect-ratio:470/638;
  background-image:var(--img-mascotte-assise);
  background-size:contain;background-repeat:no-repeat;background-position:bottom center;
  transform:translateY(33.86%);
  pointer-events:none;z-index:5;
}
@media (max-width:520px){.entete{--assis-w:76px}}

.marque__texte{display:flex;flex-direction:column;line-height:.92}
.marque__nom{white-space:nowrap}
.marque__accroche{
  font-family:var(--texte);font-weight:600;text-transform:uppercase;
  font-size:.66rem;letter-spacing:.255em;color:var(--papier);opacity:.78;
  margin-top:.42rem;white-space:nowrap;
}
.marque:hover .marque__accroche{opacity:1;color:var(--menthe)}
@media (max-width:700px){.marque__accroche{display:none}}
.marque:hover .marque__logo{transform:rotate(-9deg) scale(1.12)}
@media (max-width:520px){.marque__logo{width:38px}}
.logo-cj--pied{width:104px;margin-bottom:1.1rem}
.logo-cj--studio{width:clamp(120px,14vw,170px);margin-bottom:1.3rem}

/* --- Logo de l'écran de chargement --- */
.rideau__accroche{
  font-family:var(--texte);font-weight:600;text-transform:uppercase;
  font-size:clamp(.6rem,1.5vw,.8rem);letter-spacing:.42em;padding-left:.42em;
  color:var(--papier);margin:-.4rem 0 0;
  opacity:0;transform:translateY(10px);
  animation:accrocheEntre .55s cubic-bezier(.2,.9,.3,1) .62s forwards;
}
@keyframes accrocheEntre{to{opacity:1;transform:none}}
@media (max-width:520px){.rideau__accroche{letter-spacing:.28em;padding-left:.28em}}

.rideau__logo{
  width:min(262px,54vw);margin:0 auto .5rem;
  opacity:0;transform:translateY(24px) rotate(-4deg);
  animation:logoEntre .7s cubic-bezier(.2,.9,.3,1.1) .15s forwards;
}
@keyframes logoEntre{to{opacity:1;transform:translateY(0) rotate(0deg)}}
.rideau.parti .rideau__logo{animation:none}
@media (max-height:700px){.rideau__logo{width:min(185px,40vw)}}

/* --- Pages en fichier unique --- */
.page[hidden]{display:none !important}


/* ==========================================================================
   DÉCOR : adaptation aux écrans plus étroits
   Au-delà de 1560px le contenu est centré dans 1360px, les illustrations
   tiennent dans la marge extérieure. En dessous, cette marge disparaît :
   on les rétrécit, on les colle au bord, puis on les efface.
   ========================================================================== */
@media (max-width:1560px){
  .section .decor .logo-cj{width:clamp(115px,14vw,200px) !important;right:0 !important}
  .illu-desk{width:clamp(130px,15vw,215px) !important;left:0 !important}
  .illu-bureau{width:clamp(140px,16vw,240px) !important;right:-1% !important;top:0 !important}
  .appel .decor .logo-cj{width:clamp(100px,12vw,170px) !important;left:-1% !important}
  #poles{--skate-h:clamp(150px,17vw,225px)}
}
@media (max-width:1240px){
  .section .decor .logo-cj{width:clamp(100px,12vw,160px) !important}
  .illu-desk{width:clamp(110px,13vw,170px) !important}
  .illu-bureau{width:clamp(120px,14vw,185px) !important}
  .appel .decor .logo-cj{width:clamp(90px,10vw,140px) !important}
  #poles{--skate-h:clamp(130px,15vw,180px)}
}
@media (max-width:980px){
  .section .decor .logo-cj,
  .illu-desk,
  .illu-bureau,
  .appel .decor .logo-cj{display:none !important}
}
@media (max-width:860px){
  .skate{display:none}
  #poles{padding-bottom:var(--bloc)}
}


/* --- Titre affiche centré, deuxième ligne en bloc noir --- */
.tete-centree{text-align:center;margin-bottom:clamp(2.2rem,4.5vw,3.5rem)}
.tete-centree .section__intro{margin-inline:auto;max-width:48ch}
.titre-poster{
  width:fit-content;max-width:100%;margin:0 auto;
  font-family:var(--display);text-transform:uppercase;
  line-height:.9;letter-spacing:-.035em;
}
.titre-poster span{display:block;white-space:nowrap}
.titre-poster__l1{font-size:clamp(2.2rem,7vw,5.4rem)}
.titre-poster__l2{
  background:var(--encre);color:var(--menthe);
  font-size:clamp(2.2rem,7vw,5.4rem);
  padding:.08em .1em .12em;margin-top:.06em;
}

/* --- Photo du studio : cadre damier, façon sticker --- */
.photo-studio{
  position:relative;margin:clamp(1.2rem,2.5vw,2rem) clamp(.6rem,1.6vw,1.6rem);
  transform:rotate(-2deg);
  transition:transform .45s cubic-bezier(.3,1.4,.4,1);
}
.photo-studio:hover{transform:rotate(0deg)}
.photo-studio__cadre{
  padding:clamp(12px,1.5vw,20px);
  background:repeating-conic-gradient(var(--encre) 0% 25%, #fff 0% 50%) 0 0 / clamp(24px,2.8vw,38px) clamp(24px,2.8vw,38px);
  border:4px solid var(--encre);
  box-shadow:0 0 0 10px var(--papier), 0 0 0 14px var(--encre), 18px 18px 0 var(--feu);
}
.photo-studio__cadre img{display:block;width:100%;height:auto;border:4px solid var(--encre)}
/* deux morceaux de scotch */
.photo-studio::before,.photo-studio::after{
  content:"";position:absolute;width:clamp(70px,9vw,120px);height:clamp(22px,2.4vw,32px);
  background:var(--menthe);border:3px solid var(--encre);z-index:2;
}
.photo-studio::before{top:-16px;left:-22px;transform:rotate(-26deg)}
.photo-studio::after{bottom:-16px;right:-22px;transform:rotate(-26deg)}

.badge-studio{
  position:absolute;top:-10%;right:-9%;z-index:3;display:block;
  width:clamp(118px,14vw,180px);aspect-ratio:1;
  transition:transform .3s cubic-bezier(.3,1.4,.4,1);
}
.badge-studio svg{width:100%;height:100%;overflow:visible}
.badge-studio:hover,.badge-studio:focus-visible{transform:scale(1.1) rotate(-4deg)}
.badge-studio__fond{fill:var(--jaune);stroke:var(--encre);stroke-width:6}
.badge-studio__coeur{fill:var(--encre)}
.badge-studio text{font-family:var(--slab);font-size:16px;fill:var(--encre)}
.badge-studio__anneau{animation:tourne 14s linear infinite;transform-origin:50% 50%}
@media (max-width:620px){.badge-studio{top:-7%;right:-5%}}
@media (prefers-reduced-motion:reduce){.badge-studio__anneau{animation:none}}

/* --- Journal : liste des billets --- */
.billets{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--trait);background:var(--encre);border:var(--trait) solid var(--encre)}
.billet{background:var(--papier);color:var(--encre);padding:clamp(1.5rem,2.6vw,2.2rem);display:flex;flex-direction:column;gap:.85rem;min-height:290px;text-decoration:none;position:relative;overflow:hidden}
.billet__meta{display:flex;flex-wrap:wrap;gap:.45rem}
.billet__meta span{border:2px solid currentColor;padding:.2rem .55rem;font-size:.72rem;font-family:var(--display);text-transform:uppercase}
.billet h3{font-size:clamp(1.25rem,2.4vw,1.85rem);line-height:.98}
.billet p{font-size:.97rem;line-height:1.5}
.billet__lire{margin-top:auto;font-family:var(--display);text-transform:uppercase;font-size:.85rem;border-bottom:var(--trait) solid currentColor;align-self:flex-start;padding-bottom:2px}
.billet:hover .billet__lire{background:var(--encre);color:var(--menthe);border-bottom-color:transparent}
.billet--menthe{background:var(--menthe)}
.billet--jaune{background:var(--jaune)}
.billet--feu{background:var(--feu);color:var(--papier)}
.billet--feu:hover .billet__lire{background:var(--papier);color:var(--feu)}
@media (max-width:820px){.billets{grid-template-columns:1fr}}

/* --- Journal : corps d'article --- */
.article{max-width:74ch;margin-inline:auto}
.article__chapo{font-size:var(--t-m);line-height:1.5;font-weight:600;border-left:var(--trait) solid var(--feu);padding-left:1.1rem;margin-bottom:2rem}
.article h2{font-size:clamp(1.45rem,3vw,2.15rem);margin:2.6rem 0 .9rem;line-height:.95}
.article h3{font-size:1.12rem;margin:1.7rem 0 .5rem}
.article p{font-size:1.05rem;line-height:1.72}
.article ul{padding-left:1.15rem;display:grid;gap:.55rem;margin:1rem 0 1.5rem}
.article li{line-height:1.6;font-size:1.02rem}
.article strong{font-weight:700}
.article__fin{margin-top:2.8rem;padding:clamp(1.3rem,2.5vw,1.9rem);background:var(--menthe);border:var(--trait) solid var(--encre)}
.article__fin h3{margin:0 0 .6rem;font-size:1.35rem}
.article__meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem}


/* ==========================================================================
   MUR DE PHOTOS — gabarit « mur de photos (stickers) »
   Chaque image devient un tirage scotché au mur, légèrement de travers.
   ========================================================================== */
.mur .wp-block-gallery.has-nested-images{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(220px,22vw,300px),1fr));
  gap:clamp(2rem,3.4vw,3.4rem);
  padding-top:1rem;
}
.mur .wp-block-gallery.has-nested-images figure.wp-block-image{
  width:auto !important;flex:none !important;margin:0 !important;
}
.mur figure.wp-block-image,
.mur .wp-block-image figure{
  position:relative;
  background:#fff;
  padding:12px 12px 54px;
  border:var(--trait) solid var(--encre);
  box-shadow:10px 10px 0 rgba(5,5,5,.88);
  transform:rotate(-2.2deg);
  transition:transform .35s cubic-bezier(.3,1.4,.4,1), box-shadow .35s ease;
}
.mur figure.wp-block-image:nth-child(2n){transform:rotate(1.8deg)}
.mur figure.wp-block-image:nth-child(3n){transform:rotate(-1deg) translateY(10px)}
.mur figure.wp-block-image:nth-child(5n){transform:rotate(2.6deg) translateY(-8px)}
.mur figure.wp-block-image:hover{
  transform:rotate(0deg) scale(1.035);
  box-shadow:14px 14px 0 rgba(5,5,5,.88);
  z-index:3;
}
.mur figure.wp-block-image img{
  display:block;width:100%;height:auto;
  border:2px solid var(--encre);
  aspect-ratio:4/3;object-fit:cover;
}
.mur figure.wp-block-image figcaption{
  position:absolute;left:12px;right:12px;bottom:14px;margin:0;
  font-family:var(--display);text-transform:uppercase;
  font-size:.86rem;line-height:1.05;letter-spacing:-.01em;
  text-align:center;color:var(--encre);
}

/* le bout de scotch, coin supérieur gauche */
.mur figure.wp-block-image::before{
  content:"";position:absolute;z-index:2;
  top:-15px;left:-24px;
  width:clamp(72px,8vw,112px);height:clamp(22px,2.3vw,30px);
  background:var(--menthe);
  border:3px solid var(--encre);
  transform:rotate(-33deg);
  box-shadow:2px 2px 0 rgba(5,5,5,.35);
}
.mur figure.wp-block-image:nth-child(2n)::before{background:var(--jaune);transform:rotate(-27deg)}
.mur figure.wp-block-image:nth-child(3n)::before{background:var(--rose);transform:rotate(-38deg)}
.mur figure.wp-block-image:nth-child(4n)::before{background:var(--feu);transform:rotate(-30deg)}

/* pliure légère du scotch */
.mur figure.wp-block-image::after{
  content:"";position:absolute;z-index:2;
  top:-6px;left:-4px;width:18px;height:clamp(22px,2.3vw,30px);
  background:rgba(5,5,5,.08);
  transform:rotate(-33deg);
  pointer-events:none;
}

@media (max-width:640px){
  .mur .wp-block-gallery.has-nested-images{grid-template-columns:1fr;gap:2.4rem}
  .mur figure.wp-block-image::before{left:-16px;width:80px}
}
@media (prefers-reduced-motion:reduce){
  .mur figure.wp-block-image{transform:none}
  .mur figure.wp-block-image:hover{transform:scale(1.02)}
}


/* ==========================================================================
   ILLUSTRATIONS LIBRES — placées depuis le Personnalisateur
   ========================================================================== */
.zone-libre{position:relative}
.illu-libre{position:absolute;z-index:1;pointer-events:none;will-change:transform}
.illu-libre--devant{z-index:5}
.illu-libre img{display:block;width:100%;height:auto}
.illu-libre img.flotte{animation:flotte 7s ease-in-out infinite}
.illu-libre img.balance{animation:balance 5s ease-in-out infinite;transform-origin:50% 90%}
.illu-libre img.tourne{animation:tourne 22s linear infinite}
@media (max-width:860px){.illu-libre--bureau{display:none}}

/* Personnage au téléphone, bloc de fin de page */
.illu-telephone{
  background-image:var(--img-personnage-telephone);
  background-size:contain;background-repeat:no-repeat;background-position:bottom center;
  aspect-ratio:560/736;
}