/* Roxana Rodriguez — carnet d'artiste
   Concept : chaque page est une feuille de carnet ; les œuvres sont « posées » sur le papier,
   annotées à la main comme dans un carnet de croquis. Une seule ambiance claire, assumée (papier). */
:root{
  --paper:#f5f1e8;
  --paper-deep:#ebe3d3;
  --sheet:#fbf9f4;
  --ink:#26231f;
  --ink-soft:#5a544b;
  --line:#d8cebb;
  --prussian:#23466e;
  --garance:#a23f4c;
  --ochre:#c48a35;
  --display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --body:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --hand:"Caveat", "Segoe Print", "Bradley Hand", cursive;
  --script:"Dancing Script", "Segoe Script", cursive;
  --sign:"Homemade Apple", "Segoe Script", cursive;
  --step--1:clamp(.84rem,.8rem + .15vw,.92rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.2rem,1.1rem + .45vw,1.45rem);
  --step-2:clamp(1.55rem,1.3rem + 1vw,2.2rem);
  --step-3:clamp(2.1rem,1.6rem + 2.2vw,3.6rem);
  --step-4:clamp(2.8rem,1.9rem + 4.2vw,6.2rem);
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --wrap:1240px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:var(--step-0);line-height:1.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
a{color:var(--prussian);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--garance)}
:focus-visible{outline:2px solid var(--garance);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:100}
.skip:focus{left:12px;top:12px}
.eyebrow{font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.hand{font-family:var(--hand);font-weight:400;letter-spacing:0;line-height:1.25;color:var(--prussian)}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--ink-soft);max-width:36em}
.prose{display:flex;flex-direction:column;gap:1em;max-width:38em}
.prose p{color:var(--ink-soft)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- En-tête ---------- */
.site-head{position:relative;z-index:20}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1}
.brand b{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.6rem;letter-spacing:-.01em}
.brand span{font-family:var(--hand);color:var(--garance);font-size:1.02rem;margin-top:4px;padding-left:2px}
.nav{display:flex;gap:28px;align-items:center}
.nav a{position:relative;color:var(--ink);text-decoration:none;font-weight:500;font-size:.98rem;padding-block:6px}
.nav a::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-2px;height:8px;opacity:0;transform:scaleX(.3);transform-origin:left;transition:transform .35s ease,opacity .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.5C22 2.5 46 6.5 70 4s34-1.5 48 .5' fill='none' stroke='%23a23f4c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.nav a:hover::after,.nav a[aria-current="page"]::after{opacity:1;transform:none}
.nav .nav-cta{border:1.5px solid var(--ink);border-radius:999px;padding:9px 18px}
.nav .nav-cta::after{display:none}
.nav .nav-cta:hover{background:var(--ink);color:var(--paper)}
.menu-btn{display:none;align-items:center;gap:10px;background:none;border:0;font:600 .95rem var(--body);color:var(--ink);padding:10px 4px;min-height:44px;cursor:pointer}
.menu-btn svg{width:26px;height:26px}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .nav{position:fixed;inset:0;z-index:50;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
    background:var(--sheet);padding:max(80px,env(safe-area-inset-top,0px)) var(--gutter-r) 40px var(--gutter);
    transform:translateY(-102%);transition:transform .45s cubic-bezier(.6,.05,.2,1);visibility:hidden}
  .nav.open{transform:none;visibility:visible}
  .nav a{font-family:var(--display);font-size:2.2rem;font-weight:500;padding-block:8px}
  .nav .nav-cta{font-family:var(--body);font-size:1.05rem;margin-top:18px;padding:14px 26px}
  .nav-close{position:absolute;top:max(18px,env(safe-area-inset-top,0px));right:var(--gutter-r)}
}
@media (min-width:901px){.nav-close{display:none}}
@media (prefers-reduced-motion:reduce){.nav{transition:none}}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;border-radius:999px;font:600 1rem var(--body);text-decoration:none;cursor:pointer;border:1.5px solid var(--ink);transition:background .2s,color .2s,transform .2s}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--prussian);border-color:var(--prussian);color:var(--paper)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Œuvre posée (scotch) ---------- */
.pinned{position:relative;background:var(--sheet);padding:10px;box-shadow:0 1px 1px rgba(60,45,25,.08),0 12px 28px -14px rgba(60,45,25,.35)}
.pinned::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(196,138,53,.38);mix-blend-mode:multiply;clip-path:polygon(3% 0,97% 4%,100% 100%,0 96%)}
.pinned.tape-b::before{background:rgba(35,70,110,.24);transform:translateX(-30%) rotate(4deg)}
.pinned.tape-c::before{background:rgba(162,63,76,.24);left:22%;transform:rotate(-6deg)}
.pinned img{width:100%}
.note{font-family:var(--hand);color:var(--prussian);font-size:1.05rem;line-height:1.2}

/* ---------- Placeholder d'image ---------- */
.ph{display:flex;align-items:flex-end;padding:12px;min-height:180px;font-size:.85rem;color:var(--ink-soft);
  background:repeating-linear-gradient(135deg,var(--paper-deep) 0 10px,#e6dccb 10px 20px)}

/* ---------- Accueil : ouverture ---------- */
.hero{position:relative;overflow:hidden;overflow:clip}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:40px 90px}
.hero-text{display:flex;flex-direction:column;gap:26px;position:relative;z-index:2}
.hero h1{font-size:var(--step-4);font-weight:400;line-height:.95}
.hero h1 em{color:var(--prussian)}
.hero .hand{font-size:1.35rem;color:var(--garance);transform:rotate(-2deg);transform-origin:left}
.wash{position:absolute;z-index:0;pointer-events:none;opacity:.55}
.wash-a{width:62vw;max-width:820px;right:-12vw;top:-6vw}
.wash-b{width:34vw;max-width:420px;left:-10vw;bottom:-10vw;opacity:.4}
.wash path{transform-origin:center;animation:bloom 2.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes bloom{from{transform:scale(.82);opacity:.3}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.wash path{animation:none}}
.hero-art{position:relative;z-index:2;height:min(620px,68vw);min-height:420px}
.hero-art .pinned{position:absolute;margin:0}
.hero-art .p1{width:58%;left:2%;top:4%;transform:rotate(-3deg)}
.hero-art .p2{width:44%;right:0;top:20%;transform:rotate(4deg)}
.hero-art .p3{width:42%;left:24%;bottom:0;transform:rotate(-1deg)}
.hero-art .note{position:absolute}
.hero-art .n1{right:6%;top:2%;transform:rotate(3deg)}
.hero-art .n2{left:3%;top:47%;transform:rotate(-4deg)}
.hero-art img{aspect-ratio:4/3;object-fit:cover}
.hero-art .p2 img{aspect-ratio:3/4}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);padding-block:12px 64px;gap:28px}
  .hero-art{height:auto;min-height:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding-top:14px}
  .hero-art .pinned{position:relative;inset:auto}
  .hero-art .p1{grid-column:1/5;grid-row:1;width:auto;transform:rotate(-2deg)}
  .hero-art .p2{grid-column:4/7;grid-row:1;width:auto;align-self:end;transform:translateY(38%) rotate(3deg);z-index:1}
  .hero-art .n2{margin-top:72px}
  .hero-art .p3{display:none}
  .hero-art .note{position:static;grid-column:1/-1}
  .hero-art .n1{display:none}
  .wash-a{width:90vw;right:-48vw;top:-18vw;opacity:.35}
  .wash-b{display:none}
}

/* ---------- Sections ---------- */
.section{padding-block:clamp(64px,9vw,128px)}
.section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(32px,4vw,56px);max-width:44em}
.section-head h2{font-size:var(--step-3)}
.section-head h2 em{color:var(--prussian)}
.sheet{background:var(--sheet)}
.deep{background:var(--paper-deep)}

/* Approche : citation de l'artiste */
.approach .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.approach blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:var(--step-2);line-height:1.25;color:var(--ink)}
.approach blockquote .q{color:var(--garance)}
.approach cite{display:block;margin-top:14px;font-style:normal;font-family:var(--hand);color:var(--prussian);font-size:1.15rem}
@media (max-width:800px){.approach .wrap{grid-template-columns:minmax(0,1fr)}}

/* Sélection : composition asymétrique */
.selection{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start}
.selection figure{margin:0;display:flex;flex-direction:column;gap:10px}
.selection figure:nth-child(1){grid-column:1/8}
.selection figure:nth-child(2){grid-column:8/13;margin-top:18%}
.selection figure:nth-child(3){grid-column:2/6}
.selection figure:nth-child(4){grid-column:6/10;margin-top:12%}
.selection figure:nth-child(5){grid-column:10/13;margin-top:4%}
.selection figure:nth-child(6){grid-column:2/12}
.selection button{all:unset;cursor:zoom-in;display:block}
.selection button:focus-visible{outline:2px solid var(--garance);outline-offset:4px}
.selection img{width:100%;transition:transform .5s ease}
.selection button:hover img{transform:scale(1.015)}
figcaption{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:var(--step--1);color:var(--ink-soft)}
figcaption strong{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.08rem;color:var(--ink)}
@media (max-width:700px){
  .selection{grid-template-columns:repeat(6,minmax(0,1fr))}
  .selection figure:nth-child(n){grid-column:1/-1;margin-top:0}
  .selection figure:nth-child(2),.selection figure:nth-child(4){grid-column:2/-1}
  .selection figure:nth-child(3),.selection figure:nth-child(5){grid-column:1/6}
  .selection figure:nth-child(6){display:none}
}

/* Parcours : activités en lignes éditoriales */
.paths{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.path{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:clamp(16px,3vw,48px);align-items:center;padding-block:clamp(22px,3vw,40px);border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);position:relative}
.path h3{font-size:var(--step-2);font-weight:400;transition:color .25s}

.path p{color:var(--ink-soft);max-width:30em}
.path .go{width:52px;height:52px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;transition:background .25s,color .25s,transform .25s}
.path:hover h3{color:var(--prussian)}
.path:hover .go{background:var(--ink);color:var(--paper);transform:rotate(-45deg)}
.path .thumb{position:absolute;right:120px;top:50%;width:150px;transform:translateY(-50%) rotate(4deg);opacity:0;transition:opacity .3s,transform .4s;pointer-events:none}
.path:hover .thumb{opacity:1;transform:translateY(-55%) rotate(2deg)}
@media (max-width:760px){.path{grid-template-columns:minmax(0,1fr) auto}.path p{grid-column:1/2}.path .go{grid-row:1/3;grid-column:2}.path .thumb{display:none}}

/* Appel final */
.cta-band{text-align:left}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end;justify-content:space-between}
.cta-band h2{font-size:var(--step-4);font-weight:400;max-width:12em}
.cta-band h2 em{color:var(--garance)}

/* ---------- Pied de page ---------- */
.site-foot{border-top:1px solid var(--line);padding-block:48px 32px;font-size:.95rem}
.site-foot .wrap{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:32px}
.site-foot h2{font-size:1.6rem;font-style:italic}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-foot a{color:var(--ink);text-decoration:none}
.site-foot a:hover{color:var(--garance);text-decoration:underline}
.site-foot .legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;color:var(--ink-soft);font-size:.85rem;padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:700px){.site-foot .wrap{grid-template-columns:minmax(0,1fr)}}

/* ---------- En-tête de page intérieure ---------- */
.page-head{padding-block:clamp(28px,5vw,72px) clamp(28px,4vw,56px);position:relative;overflow:hidden;overflow:clip}
.page-head .wrap{display:flex;flex-direction:column;gap:18px;position:relative;z-index:2}
.page-head h1{font-size:var(--step-4);font-weight:400}
.page-head h1 em{color:var(--prussian)}
.page-head .wash-a{width:48vw;right:-14vw;top:-14vw;opacity:.38}

/* ---------- Portfolio ---------- */
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:32px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.filters button{flex:0 0 auto;border:1.5px solid var(--line);background:transparent;color:var(--ink);font:500 .95rem var(--body);padding:10px 18px;border-radius:999px;cursor:pointer;min-height:44px;white-space:nowrap}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filters .count{opacity:.6;font-variant-numeric:tabular-nums;margin-left:6px}
.cat-intro{margin:-12px 0 28px;color:var(--ink-soft);max-width:44em;min-height:1.6em}
.masonry{columns:3 280px;column-gap:clamp(14px,2vw,26px)}
.masonry figure{break-inside:avoid;margin:0 0 clamp(18px,2.4vw,32px);display:flex;flex-direction:column;gap:10px}
.masonry button{all:unset;display:block;cursor:zoom-in;background:var(--sheet);padding:8px;box-shadow:0 10px 24px -16px rgba(60,45,25,.45);transition:transform .35s ease,box-shadow .35s}
.masonry button:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 18px 32px -16px rgba(60,45,25,.5)}
.masonry button:focus-visible{outline:2px solid var(--garance);outline-offset:3px}
.masonry img{width:100%}
.empty{padding:40px 0;color:var(--ink-soft)}

/* Visionneuse */
.lightbox{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;background:rgba(30,27,23,.94);color:var(--paper)}
.lightbox::backdrop{background:rgba(30,27,23,.94)}
.lb-inner{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:max(14px,env(safe-area-inset-top,0px)) var(--gutter-r) max(18px,env(safe-area-inset-bottom,0px)) var(--gutter)}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lb-bar .counter{font-variant-numeric:tabular-nums;opacity:.7;font-size:.9rem}
.lb-stage{display:grid;place-items:center;min-height:0}
.lb-stage img{max-height:100%;max-width:100%;width:auto;object-fit:contain;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.lb-cap{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;justify-content:space-between}
.lb-cap strong{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.4rem}
.lb-cap span{opacity:.8}
.lb-nav{display:flex;gap:10px}
.icon-btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:transparent;border:1.5px solid currentColor;color:inherit;cursor:pointer}
.icon-btn:hover{background:var(--paper);color:var(--ink)}
.icon-btn svg{width:20px;height:20px}

/* ---------- Offres (commandes, cours, événements) ---------- */
.offer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.offer{display:flex;flex-direction:column;gap:14px}
.offer h3{font-size:var(--step-2);font-weight:400}

.offer p{color:var(--ink-soft)}
.offer .tag{align-self:flex-start;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--garance);border:1px solid currentColor;border-radius:999px;padding:3px 10px}
.offer-a{grid-column:1/7}.offer-b{grid-column:8/13;margin-top:10%}
.offer-c{grid-column:2/7}.offer-d{grid-column:8/12;margin-top:6%}
.offer-e{grid-column:1/6}.offer-f{grid-column:7/12;margin-top:4%}
@media (max-width:760px){.offer-grid>.offer{grid-column:1/-1!important;margin-top:0!important}}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;counter-reset:s}
.steps li{display:flex;flex-direction:column;gap:8px;counter-increment:s;padding-top:18px;border-top:1.5px solid var(--ink)}
.steps li::before{content:counter(s);font-family:var(--display);font-style:italic;font-size:2.4rem;line-height:1;color:var(--garance)}
.steps h3{font-family:var(--body);font-weight:700;font-size:1.05rem;letter-spacing:0}
.steps p{color:var(--ink-soft);font-size:.98rem}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.split.rev>:first-child{order:2}
@media (max-width:800px){.split{grid-template-columns:minmax(0,1fr)}.split.rev>:first-child{order:0}}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.facts li{display:grid;grid-template-columns:minmax(110px,.6fr) minmax(0,1.4fr);gap:16px;padding-block:14px;border-bottom:1px solid var(--line)}
.facts li span:first-child{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;padding-top:3px}
.callout{background:var(--sheet);padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:16px;position:relative}
.callout h3{font-size:var(--step-2);font-weight:400}

/* ---------- À propos : frise ---------- */
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;padding-block:18px;border-bottom:1px solid var(--line)}
.timeline .yr{font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--prussian);font-variant-numeric:tabular-nums}
.timeline b{display:block;font-weight:600}
.timeline span{color:var(--ink-soft)}
.langs{display:flex;flex-wrap:wrap;gap:8px}
.langs span{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.95rem}

/* ---------- Formulaire ---------- */
.form{display:flex;flex-direction:column;gap:20px;background:var(--sheet);padding:clamp(22px,4vw,44px)}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field legend{font-weight:600;font-size:.95rem}
.field .help{font-size:.85rem;color:var(--ink-soft)}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:6px;padding:12px 14px;min-height:48px;width:100%}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--prussian);box-shadow:0 0 0 3px rgba(35,70,110,.15)}
.field [aria-invalid="true"]{border-color:var(--garance)}
.field .err{color:var(--garance);font-size:.88rem;font-weight:600}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:600px){.row2{grid-template-columns:minmax(0,1fr)}}
fieldset{border:0;padding:0;margin:0}
.choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:6px}
.choice label{display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:8px;padding:12px 14px;cursor:pointer;font-weight:500;min-height:48px;background:var(--paper)}
.choice input{accent-color:var(--prussian);width:18px;height:18px;margin:0}
.choice label:has(input:checked){border-color:var(--prussian);background:#e9edf2}
.form-status{padding:16px 18px;border-radius:8px;font-weight:500}
.form-status.ok{background:#e5ece3;color:#2c4a2b}
.form-status.ko{background:#f3e0e2;color:#7b2633}
.hp{position:absolute;left:-9999px}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,80px);align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.coords{display:flex;flex-direction:column;gap:22px}
.coords dl{margin:0;display:flex;flex-direction:column;gap:14px}
.coords dt{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.coords dd{margin:2px 0 0;font-size:1.1rem}
.coords dd a{color:var(--ink)}

/* ---------- Apparition au défilement (part d'un état visible) ---------- */
.js .reveal{transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .9s}
.js .reveal.pending{transform:translateY(26px) rotate(.8deg);opacity:0}
@media (prefers-reduced-motion:reduce){.js .reveal,.js .reveal.pending{transition:none;transform:none;opacity:1}}

/* Petites galeries (duo) */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);align-items:start}
.duo figure{margin:0;display:flex;flex-direction:column;gap:8px}
.duo figure:nth-child(even){margin-top:14%}
.duo button{all:unset;display:block;cursor:zoom-in;background:var(--sheet);padding:8px;box-shadow:0 10px 24px -16px rgba(60,45,25,.45)}
.duo button:focus-visible{outline:2px solid var(--garance);outline-offset:3px}
.duo img{width:100%}
.trio{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){.trio{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ================= ÉDITION « STUDIO » ================= */
@view-transition{navigation:none}
/* Changer de page = tourner une page du carnet */
::view-transition-old(root){animation:page-out .55s cubic-bezier(.65,.05,.25,1) both;transform-origin:left center}
::view-transition-new(root){animation:page-in .55s cubic-bezier(.2,.7,.2,1) .08s both}
@keyframes page-out{to{transform:perspective(1800px) rotateY(-24deg) translateX(-6%);opacity:0;filter:brightness(.92)}}
@keyframes page-in{from{transform:translateX(5%);opacity:0}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
.btn-sm{min-height:44px;padding:10px 20px;font-size:.95rem}

/* ---------- Le carnet : il s'ouvre et reste ouvert sous les œuvres ---------- */
.hero-art{perspective:2400px}
.book{position:absolute;inset:-2% -1% 1% -1%;z-index:0;transform-style:preserve-3d;animation:book-center 1.35s var(--ease-inout) .3s both}
@keyframes book-center{from{transform:translateX(-25%) rotate(-1.5deg)}to{transform:rotate(-1deg)}}
.book-page{position:absolute;top:0;bottom:0;width:50%;
  background-color:#fbf8f1;background-image:radial-gradient(rgba(38,35,31,.12) 1px,transparent 1.3px);background-size:18px 18px}
.book-r{left:50%;border-radius:0 9px 9px 0;
  background-image:linear-gradient(90deg,rgba(60,45,25,.16),rgba(60,45,25,0) 9%),radial-gradient(rgba(38,35,31,.12) 1px,transparent 1.3px);background-size:auto,18px 18px;
  box-shadow:2px 2px 0 -1px #efe8da,4px 4px 0 -1px #e6dece,6px 6px 0 -2px #ddd3c0,0 34px 50px -26px rgba(40,30,20,.5)}
.cover{position:absolute;top:0;bottom:0;left:50%;width:50%;transform-origin:left center;transform-style:preserve-3d;
  animation:cover-open 1.35s var(--ease-inout) .3s both}
@keyframes cover-open{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
.cover-front,.cover-back{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.cover-front{background:linear-gradient(105deg,#2b3f5c 0%,#23466e 55%,#1d3a5c 100%);border-radius:3px 9px 9px 3px;
  box-shadow:inset 10px 0 18px -10px rgba(0,0,0,.5),0 30px 50px -24px rgba(30,25,20,.6);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;color:#f5f1e8;text-align:center;padding:20px}
.cover-front::after{content:"";position:absolute;right:22px;top:-1px;bottom:-1px;width:12px;background:#a23f4c;border-radius:2px}
.cover-front b{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.4vw,2.2rem);line-height:1.3}
.cover-front span{font-family:var(--hand);font-size:1.1rem;opacity:.85}
.cover-back{transform:rotateY(180deg);width:100%;border-radius:9px 0 0 9px;
  background-image:linear-gradient(270deg,rgba(60,45,25,.16),rgba(60,45,25,0) 9%),radial-gradient(rgba(38,35,31,.12) 1px,transparent 1.3px);background-size:auto,18px 18px;
  box-shadow:-2px 2px 0 -1px #efe8da,-4px 4px 0 -1px #e6dece,-6px 6px 0 -2px #ddd3c0,0 34px 50px -26px rgba(40,30,20,.5)}
.exlibris{position:absolute;left:9%;bottom:7%;max-width:46%;margin:0;font-family:var(--hand);font-size:.95rem;color:var(--ink-soft);line-height:1.5;transform:rotate(-2deg)}
.exlibris b{display:block;color:var(--prussian);font-size:1.05rem;margin:2px 0}
.book-elastic{position:absolute;top:-1%;bottom:-1%;right:22px;width:12px;background:#a23f4c;border-radius:2px;box-shadow:1px 0 2px rgba(0,0,0,.25);
  animation:fade-in .4s ease 1.55s both}
.book-ribbon{position:absolute;left:calc(50% + 18px);top:-3%;width:11px;height:calc(100% + 64px);background:#c48a35;
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 9px),0 100%);transform-origin:top;animation:ribbon 1s var(--ease-out) 1.5s both}
@keyframes ribbon{from{transform:scaleY(.15);opacity:0}to{transform:none;opacity:1}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.doodle{position:absolute;right:6%;bottom:6%;width:24%;color:var(--prussian);opacity:.75;z-index:4}
.doodle path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s var(--ease-out) 2.1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* œuvres posées sur la double page */
.hero-art .pinned{animation:drop .9s cubic-bezier(.2,.8,.2,1) backwards}
.hero-art .p1{animation-delay:1.3s}.hero-art .p2{animation-delay:1.45s}.hero-art .p3{animation-delay:1.6s}
@keyframes drop{from{translate:0 -18px;opacity:0}to{translate:0 0;opacity:1}}
.hero-art .pinned{transition:translate .6s cubic-bezier(.2,.7,.2,1)}
@media (min-width:901px){
  .hero-art .p1{width:42%;left:5%;top:7%;transform:rotate(-3deg)}
  .hero-art .p2{width:33%;right:7%;left:auto;top:9%;transform:rotate(3deg)}
  .hero-art .p3{width:34%;left:33%;bottom:9%;transform:rotate(-1.5deg)}
  .hero-art .n1{right:9%;top:-3%}
}
@media (max-width:900px){
  .hero-art{padding:22px 14px 54px;position:relative}
  .book{inset:0}
  .exlibris{display:none}
  .doodle{width:30%;bottom:2%}
}
@media (prefers-reduced-motion:reduce){
  .book,.cover,.book-elastic,.book-ribbon,.hero-art .pinned{animation:none}
  .cover{transform:rotateY(-180deg)}
  .doodle path{animation:none;stroke-dashoffset:0}
}

/* Bande d'œuvres au défilement */
.strip{position:relative;background:var(--ink);color:var(--paper)}
.strip-sticky{overflow:hidden}
.strip.is-pinned .strip-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
.strip-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;padding-block:56px 32px}
.strip-head h2{font-size:var(--step-3);font-weight:400}
.strip-head h2 em{color:#e9b97a}
.strip-head p{color:#cfc6b6;max-width:30em}
.strip-track{display:flex;gap:clamp(20px,3vw,48px);padding:20px var(--gutter-r) 40px var(--gutter);will-change:transform;align-items:center}
.strip:not(.is-pinned) .strip-track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:28px}
.strip-card{flex:0 0 auto;width:clamp(240px,28vw,400px);display:flex;flex-direction:column;gap:14px;color:var(--paper);text-decoration:none;scroll-snap-align:center;transform:rotate(var(--r));transition:transform .4s}
.strip-card:nth-child(even){margin-top:8vh}
.strip-card:hover{transform:rotate(0) translateY(-6px);color:var(--paper)}
.strip-card .pinned{display:block}
.strip-card img{width:100%;max-height:52vh;object-fit:cover}
.strip-cap{display:flex;flex-direction:column;gap:2px}
.strip-cap strong{font-family:var(--display);font-style:italic;font-weight:400;font-size:1.25rem}
.strip-cap span{font-size:.88rem;color:#cfc6b6}
.strip-progress{height:2px;background:rgba(245,241,232,.15);margin:0 var(--gutter-r) 40px var(--gutter)}
.strip-progress span{display:block;height:100%;background:#e9b97a;transform-origin:left;transform:scaleX(0)}
.strip:not(.is-pinned) .strip-progress{display:none}
@media (max-width:900px){.strip-card{width:72vw}.strip-card:nth-child(even){margin-top:0}}

/* Fiche d'une œuvre */
.artwork{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;padding-block:12px clamp(48px,7vw,96px)}
.artwork-stage{position:relative}
.zoombox{background:var(--sheet);padding:clamp(10px,1.4vw,18px);box-shadow:0 30px 60px -30px rgba(60,45,25,.55);overflow:hidden;cursor:zoom-in;position:relative}
.zoombox img{width:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1);view-transition-name:oeuvre}
.zoombox.zoomed{cursor:zoom-out}
.zoombox.zoomed img{transform:scale(2.4)}
.artwork-info{display:flex;flex-direction:column;gap:18px;position:sticky;top:24px}
.artwork-info h1{font-size:var(--step-3);font-weight:400}
.artwork-info .facts li{grid-template-columns:minmax(90px,.5fr) minmax(0,1.5fr)}
.artwork-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.artwork-nav a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);max-width:48%}
.artwork-nav a:last-child{text-align:right;margin-left:auto}
.artwork-nav small{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.artwork-nav span{font-family:var(--display);font-style:italic;font-size:1.1rem}
.crumb{font-size:.9rem;color:var(--ink-soft)}
.crumb a{color:var(--ink-soft)}
.related{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.related a{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.related .pinned{display:block;padding:8px}
.related img{aspect-ratio:4/3;object-fit:cover;width:100%}
.related strong{font-family:var(--display);font-style:italic;font-weight:400}
@media (max-width:860px){.artwork{grid-template-columns:minmax(0,1fr)}.artwork-info{position:static}.related{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lb-more{color:#e9b97a;font-size:.95rem;white-space:nowrap}
.lb-more:hover{color:#fff}

/* Boutique */
.shop-group+.shop-group{margin-top:clamp(56px,8vw,110px)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(22px,3vw,40px)}
.product{display:flex;flex-direction:column;gap:16px}
.product-img{display:block;padding:10px}
.product-img img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform .5s}
.product-img:hover img{transform:scale(1.02)}
.product-body{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.product h3{font-size:1.45rem;font-weight:400;font-style:italic}
.product-desc{color:var(--ink-soft);font-size:.96rem}
.product-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.product-row select{font:inherit;border:1.5px solid var(--line);background:var(--sheet);border-radius:999px;padding:9px 14px;min-height:44px}
.product-fmt{font-size:.95rem;color:var(--ink-soft)}
.price{font-weight:600;font-variant-numeric:tabular-nums}
.shop-note{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:clamp(56px,8vw,100px);padding-top:32px;border-top:1px solid var(--line)}
.shop-note b{display:block;font-family:var(--display);font-style:italic;font-weight:400;font-size:1.3rem;margin-bottom:6px}
.shop-note p{color:var(--ink-soft);font-size:.96rem}

/* Réservation des cours */
.courses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.course{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:20px;align-items:center;padding-block:20px;border-bottom:1px solid var(--line)}
.course-date{font-family:var(--display);font-style:italic;color:var(--prussian);font-size:1.15rem}
.course h3{font-family:var(--body);font-weight:700;font-size:1.05rem}
.course p{color:var(--ink-soft);font-size:.95rem}
.course-side{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.seats{font-size:.85rem;font-weight:600;color:#3d5a3b}
.seats.few{color:var(--ochre)}
.seats.full{color:var(--garance)}
@media (max-width:700px){.course{grid-template-columns:minmax(0,1fr)}.course-side{justify-content:flex-start}}

/* ================= Éléments gérés depuis l'administration ================= */
@media (max-width:900px){.only-desk{display:none!important}}
@media (min-width:901px){.only-mob{display:none!important}}
.annonce{background:var(--ink);color:var(--paper);font-size:.92rem;text-align:center}
.annonce .wrap{padding-block:9px}
.annonce a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.ti-fig{margin:0;display:flex;flex-direction:column;gap:12px;justify-self:center;width:100%;max-width:520px}
.legal-text strong{display:block;font-family:var(--display);font-weight:500;font-size:1.3rem;margin-top:12px;color:var(--ink)}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(22px,3vw,40px)}
.news-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.news-card .pinned{display:block;padding:8px}
.news-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.news-card time{font-size:.85rem;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase}
.news-card strong{font-family:var(--display);font-weight:400;font-size:1.45rem;line-height:1.2}
.news-card span{color:var(--ink-soft)}
.news-card:hover strong{color:var(--prussian)}

/* ================= ÉDITION STUDIO II ================= */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--ease-inout:cubic-bezier(.65,.05,.25,1);--dur-s:.25s;--dur-m:.6s;--dur-l:1.2s}

/* Le titre s'écrit à l'encre, de gauche à droite */
.hero h1{-webkit-mask-image:linear-gradient(90deg,#000 0 45%,transparent 60% 100%);mask-image:linear-gradient(90deg,#000 0 45%,transparent 60% 100%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;animation:ink var(--dur-l) var(--ease-inout) .15s forwards}
@keyframes ink{to{-webkit-mask-position:0 0;mask-position:0 0}}
@media (prefers-reduced-motion:reduce){.hero h1{animation:none;-webkit-mask-image:none;mask-image:none}}

/* Bord de papier déchiré entre deux feuilles */
.sheet,.deep,.strip,.fullbleed{position:relative}
.sheet::before,.deep::before,.strip::before,.noir::before{content:"";position:absolute;left:0;right:0;top:-11px;height:12px;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V7l6-2 5 3 7-4 6 3 8-3 5 2 9-4 6 4 7-1 6-3 8 3 5-2 7 3 6-4 9 3 4-2 8 2 6-3 7 4 5-2 9 1 6-4 7 3 8-2 5 3 7-3 6 2 8-3 5 4 7-2 6 1 7-3V12z'/%3E%3C/svg%3E") 0 0/240px 12px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V7l6-2 5 3 7-4 6 3 8-3 5 2 9-4 6 4 7-1 6-3 8 3 5-2 7 3 6-4 9 3 4-2 8 2 6-3 7 4 5-2 9 1 6-4 7 3 8-2 5 3 7-3 6 2 8-3 5 4 7-2 6 1 7-3V12z'/%3E%3C/svg%3E") 0 0/240px 12px repeat-x}
.sheet::before{background:var(--sheet)}.deep::before{background:var(--paper-deep)}.strip::before{background:var(--ink)}

/* Image pleine largeur (changement d'échelle) */
.fullbleed{overflow:hidden;background:var(--ink);color:var(--paper);min-height:clamp(420px,78vh,820px);display:flex;align-items:flex-end}
.fullbleed-media{position:absolute;inset:-8% 0;display:block}
.fullbleed-media img{width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--py,0),0) scale(1.04);transition:transform .1s linear}
.fullbleed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,35,31,0) 40%,rgba(38,35,31,.62) 100%);pointer-events:none}
.fullbleed-over{position:relative;z-index:2;width:100%;padding-block:48px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;pointer-events:none}
.fullbleed-over a{pointer-events:auto}
.fullbleed-text{max-width:34em;display:flex;flex-direction:column;gap:12px}
.fullbleed-text h2{font-size:var(--step-3);font-weight:400;color:var(--paper)}
.fullbleed-text h2 em{color:#f0c98d}
.fullbleed-text p{color:#eae3d6}
.fullbleed-note{color:#f5f1e8;font-size:1.25rem;transform:rotate(-2deg)}
@media (prefers-reduced-motion:reduce){.fullbleed-media img{transform:none}}

/* Repères : preuves réelles du parcours */
.rep-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border-top:1.5px solid var(--ink)}
.rep-list li{display:flex;flex-direction:column;gap:8px;padding:24px 22px 26px 0;border-bottom:1px solid var(--line)}
.rep-list li+li{padding-left:22px;border-left:1px solid var(--line)}
.rep-k{font-family:var(--hand);color:var(--garance);font-size:1.15rem}
.rep-list b{font-family:var(--display);font-weight:400;font-size:var(--step-2);line-height:1.1}
.rep-list span:last-child{color:var(--ink-soft);font-size:.98rem}
@media (max-width:700px){.rep-list li+li{padding-left:0;border-left:0}}

/* Micro-interactions communes */
.btn{transition:background var(--dur-s),color var(--dur-s),transform var(--dur-s) var(--ease-out),box-shadow var(--dur-s)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-ink:hover{box-shadow:0 10px 24px -14px rgba(35,70,110,.8)}
a:not(.btn):not(.path):not(.strip-card):not(.brand):focus-visible{outline-offset:4px}
/* Le titre d'ouverture laisse les boutons visibles sur un écran d'ordinateur portable */
.hero h1{font-size:clamp(2.7rem,1.5rem + 3.5vw,5.4rem)}

/* ================= Activités visibles dès l'ouverture ================= */
.hero .wrap{grid-template-areas:"text art" "svc svc";padding-block:20px 36px;row-gap:28px}
.hero-text{grid-area:text}.hero-art{grid-area:art}
.hero-services{grid-area:svc;position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hs-item{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--sheet);border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);
  box-shadow:0 10px 24px -20px rgba(60,45,25,.6);transition:transform var(--dur-s) var(--ease-out),border-color var(--dur-s),box-shadow var(--dur-s);min-height:76px}
.hs-item:hover{transform:translateY(-2px);border-color:var(--prussian);box-shadow:0 16px 30px -20px rgba(35,70,110,.7);color:var(--ink)}
.hs-img{flex:0 0 52px;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--paper-deep)}
.hs-img img{width:100%;height:100%;object-fit:cover}
.hs-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hs-txt b{font-family:var(--display);font-weight:400;font-size:1.22rem;line-height:1.15}
.hs-txt b em{color:var(--prussian)}
.hs-txt span{font-size:.86rem;color:var(--ink-soft);line-height:1.35}
.hs-go{flex:0 0 auto;font-size:1.1rem;transition:transform var(--dur-s) var(--ease-out)}
.hs-item:hover .hs-go{transform:translateX(3px)}
@media (min-width:901px){
  .hero-art{height:min(500px,52vh);min-height:380px}
  .hero h1{font-size:clamp(2.6rem,1.2rem + 3vw,4.6rem)}
  .hero-text{gap:20px}
}
@media (max-width:1100px) and (min-width:901px){.hero-services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .hero .wrap{grid-template-areas:"text" "svc" "art";row-gap:22px}
  .hero-services{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hs-item{flex-direction:column;align-items:flex-start;gap:8px;padding:12px;min-height:0}
  .hs-img{width:44px;height:44px;flex-basis:44px}
  .hs-txt b{font-size:1.1rem}
  .hs-go{display:none}
  .hero-text{gap:18px}
}
/* Mobile : tout le premier écran tient les 4 activités */
@media (max-width:900px){
  .hero .wrap{padding-block:4px 32px;row-gap:18px}
  .hero-text{gap:12px}
  .hero .hand{font-size:1.05rem}
  .hero h1{font-size:clamp(2rem,1.3rem + 3.6vw,2.7rem)}
  .hero .lead{font-size:1rem;line-height:1.5}
  .hero .actions{gap:8px}
  .hero .actions .btn{min-height:44px;padding:10px 16px;font-size:.95rem}
  .hs-item{flex-direction:row;align-items:center;gap:10px;padding:10px}
  .hs-img{width:36px;height:36px;flex-basis:36px}
  .hs-txt b{font-size:1.02rem}
  .hs-txt span{font-size:.78rem}
}
@media (min-width:901px){.hero-art .n2{display:none}}
/* 5 activités */
@media (min-width:1101px){.hero-services{grid-template-columns:repeat(5,minmax(0,1fr))}.hs-item{padding:12px}.hs-img{flex-basis:46px;width:46px;height:46px}}
@media (max-width:900px){.hero-services .hs-item:nth-child(5):last-child{grid-column:1/-1}.hs-item{padding:8px 10px}}

/* ---------- Fond noir : galerie contrastée (choix ponctuel, jamais par défaut) ---------- */
.noir{--ink:#f3ede2;--ink-soft:#c8bfb1;--line:#3d3833;--sheet:#26231f;--garance:#ec9aa5;--prussian:#9cc0e6;--paper:#1c1a17;
  background:#1c1a17;color:var(--ink);color-scheme:dark;position:relative}
.noir::before{background:#1c1a17}
.noir .pinned,.noir figure>button,.noir figure>a{background:#f4f0e7}
.noir .btn-ink{background:#f3ede2;color:#1c1a17;border-color:#f3ede2}
.noir .btn-ink:hover{background:#fff;color:#1c1a17;border-color:#fff}
.noir .btn-line{color:#f3ede2;border-color:#f3ede2}
.noir .btn-line:hover{background:#f3ede2;color:#1c1a17}
.noir a:not(.btn){color:#f3ede2}
.noir .note{color:#9cc0e6}
.site-foot .wrap{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr))}
@media (max-width:900px){.site-foot .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}.site-foot .wrap>div:first-child{grid-column:1/-1}}
@media (max-width:560px){.site-foot .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Tablette paysage / petit portable : les 5 prestations sur une seule ligne */
@media (max-width:1100px) and (min-width:901px){
  .hero-services{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .hs-item{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .hs-go{display:none}
  .hs-txt b{font-size:1.08rem}
}
/* Petits écrans peu hauts (iPhone SE) : resserrer l'en-tête du hero */
@media (max-width:400px) and (max-height:600px){
  .hero h1{font-size:1.75rem}
  .hero .lead{font-size:.95rem;line-height:1.45}
  .hero .hand{display:none}
}
@media (max-width:360px){.hero .actions{gap:8px;flex-wrap:nowrap}.hero .actions .btn{padding:10px 13px;font-size:.88rem}.hero .actions .arr{display:none}.brand b{font-size:1.4rem}}

/* ---------- Le fil du carnet sur tout le site ---------- */
.hero-art.wait *,.hero-art.wait{animation-play-state:paused!important}
/* Marque-page : le ruban du carnet descend au fil de la lecture */
.marque-page{position:fixed;top:0;right:max(10px,1.6vw);z-index:40;width:10px;height:clamp(90px,26vh,240px);background:#c48a35;pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 8px),0 100%);box-shadow:1px 0 2px rgba(0,0,0,.2);transform-origin:top;transform:scaleY(.12);display:none}
@supports (animation-timeline: scroll()){
  .marque-page{display:block;animation:marque linear both;animation-timeline:scroll(root)}
  @keyframes marque{to{transform:scaleY(1)}}
}
@media (prefers-reduced-motion:reduce){.marque-page{display:none}}
/* Numéros de page dans la marge, écrits à la main */
main{counter-reset:page}
main>.section{position:relative;counter-increment:page}

/* Onglet de chapitre en haut des pages */
.chapitre{display:inline-block;align-self:flex-start;margin:0 0 6px;padding:5px 14px 4px;font-family:var(--hand);font-size:1rem;color:#fbf8f1;background:var(--prussian);
  border-radius:8px 8px 2px 2px;transform:rotate(-1.5deg);box-shadow:0 6px 14px -8px rgba(35,70,110,.8)}

/* =========================================================
   Rôles typographiques (un rôle = une police)
   Titres : --display · Mots choisis dans les titres : --script
   Annotations du carnet : --hand · Signature : --sign · Texte : --body
   ========================================================= */
h1,h2,h3{font-family:var(--display);font-weight:var(--display-weight,500);font-size-adjust:var(--display-adjust,none);font-style:normal;letter-spacing:-.005em}
h1{line-height:1.04}h2,h3{line-height:1.1}
h1 em,h2 em,h3 em,.hs-txt b em,.cta-band h2 em{font-family:var(--script);font-style:normal;font-weight:500;font-size-adjust:none;color:var(--prussian);letter-spacing:0;
  padding:0 .06em .06em;margin:0 -.06em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c30-5 62-6 96-4s70 3 100-2' stroke='%23c48a35' stroke-width='3' fill='none' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") 0 94%/100% .3em no-repeat}
.cta-band h2 em{color:var(--garance)}
.noir h1 em,.noir h2 em{color:#a9c8ea}
/* le trait de pinceau se dessine quand le titre arrive à l'écran */
.js h1 em,.js h2 em{background-size:0% .3em;transition:background-size 1.1s cubic-bezier(.65,.05,.25,1) .25s}
.js .drawn em{background-size:100% .3em}
.hand,.note,.chapitre,.exlibris,main>.section::after,.brand span,.cover-front span{font-family:var(--hand);font-weight:500;font-style:normal}
.hand{font-size:1.4rem;line-height:1.2}
.hand-accent{color:var(--garance);font-size:1.5rem}
.note{font-size:1.3rem;line-height:1.15}
.note-md{font-size:1.35rem}.note-lg{font-size:1.55rem}
.brand span{font-size:1.15rem}
.brand b,.site-foot h2,.exlibris b,.cover-front b,.approach cite{font-family:var(--sign);font-weight:400;font-style:normal;letter-spacing:0;font-size-adjust:none}
.brand b{font-size:1.12rem;line-height:1.7}
.site-foot h2{font-size:1.15rem;line-height:1.8}
.cover-front b{font-size:clamp(1rem,1.7vw,1.5rem);line-height:1.8}
.exlibris{font-size:1.2rem}.exlibris b{font-size:.95rem;line-height:1.9}
.chapitre{font-size:1.2rem}
blockquote{font-family:var(--display);font-style:italic}
/* utilitaires (remplacent les anciens styles en ligne) */
.soft{color:var(--ink-soft)}.lead-ink{color:var(--ink)}
.mt-xs{margin-top:12px}.mt-s{margin-top:18px}.mt-m{margin-top:24px}.mt-l{margin-top:38px}.mb-0{margin-bottom:0}
.h-md{font-size:var(--step-3)}
.section.tight{padding-top:20px}.section.tight-s{padding-top:12px}.section.flush{padding-top:0}
.stack-l{display:flex;flex-direction:column;gap:32px}
.foot-brand{display:flex;flex-direction:column;gap:14px}.foot-txt{max-width:28em}
.brand-logo{max-height:56px;width:auto}
.crumb{padding-top:8px}
.zoombox.static{cursor:default;max-width:900px}
.contact-pin{max-width:320px;transform:rotate(-2deg);margin-top:20px}

/* Œuvres présentées comme des tirages posés sur la table, légèrement de travers */
.duo figure>button{all:unset;display:block;cursor:zoom-in;background:var(--sheet);padding:8px;box-shadow:0 10px 24px -16px rgba(60,45,25,.45);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.duo figure>button img{width:100%}
.duo figure:nth-child(3n+1)>button,.masonry figure:nth-child(3n+1)>button{transform:rotate(-.7deg)}
.duo figure:nth-child(3n+2)>button,.masonry figure:nth-child(3n+2)>button{transform:rotate(.5deg)}
.duo figure>button:hover,.masonry figure>button:hover{transform:translateY(-4px) rotate(0);box-shadow:0 22px 36px -18px rgba(60,45,25,.55)}
.duo figure>button:focus-visible{outline:2px solid var(--garance);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.duo figure>button,.masonry button{transition:none}}
.lb-stage img{animation:lb-in .45s cubic-bezier(.2,.7,.2,1)}
@keyframes lb-in{from{opacity:0;transform:scale(.985)}}
@media (prefers-reduced-motion:reduce){.lb-stage img{animation:none}}
.version{opacity:.6;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Feuilleter le carnet de l'accueil ---------- */
.spreads{position:absolute;inset:0}
.spread{position:absolute;inset:0;display:none}
.spread.on{display:block}
.spread.fresh .pinned{animation:settle .55s cubic-bezier(.2,.8,.2,1) backwards}
.spread.fresh .p1{animation-delay:.05s}.spread.fresh .p2{animation-delay:.14s}.spread.fresh .p3{animation-delay:.22s}
@keyframes settle{from{translate:0 -10px;opacity:0}to{translate:0 0;opacity:1}}
.spread-link{position:absolute;left:8%;bottom:8%;z-index:4;font-size:1.35rem;color:var(--garance);text-decoration:none;transform:rotate(-2deg)}
.spread-link:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.exlibris{display:none}
.hero-art:not([data-page="0"]) .exlibris,.hero-art:not([data-page="0"]) .doodle{opacity:0}
.leaf{position:absolute;top:-2%;bottom:1%;left:50%;right:-1%;z-index:6;visibility:hidden;pointer-events:none;transform-origin:left center;
  background-color:#fbf8f1;background-image:linear-gradient(90deg,rgba(60,45,25,.14),rgba(60,45,25,0) 12%),radial-gradient(rgba(38,35,31,.12) 1px,transparent 1.3px);background-size:auto,18px 18px;
  border-radius:0 9px 9px 0;box-shadow:0 20px 40px -20px rgba(40,30,20,.45)}
.leaf.fwd{visibility:visible;animation:leaf-fwd .8s cubic-bezier(.45,.05,.3,1) both}
.leaf.back{visibility:visible;left:-1%;right:50%;transform-origin:right center;border-radius:9px 0 0 9px;animation:leaf-back .8s cubic-bezier(.45,.05,.3,1) both}
@keyframes leaf-fwd{from{transform:perspective(2400px) rotate(-1deg) rotateY(0);filter:brightness(1)}50%{filter:brightness(.93)}to{transform:perspective(2400px) rotate(-1deg) rotateY(-180deg);filter:brightness(1)}}
@keyframes leaf-back{from{transform:perspective(2400px) rotate(-1deg) rotateY(0)}50%{filter:brightness(.93)}to{transform:perspective(2400px) rotate(-1deg) rotateY(180deg)}}
.book-nav{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:10px;
  font-family:var(--hand);font-size:1.3rem;color:var(--ink-soft);white-space:nowrap}
.book-nav button{all:unset;cursor:pointer;font-family:var(--hand);font-size:1.35rem;color:var(--prussian);padding:6px 12px;min-height:32px;border-radius:999px;transition:background .2s}
.book-nav button:hover{background:rgba(35,70,110,.08)}
.book-nav button:focus-visible{outline:2px solid var(--garance);outline-offset:2px}
.book-nav .book-prev{font-size:1.6rem;padding:2px 12px}
.book-count{font-variant-numeric:tabular-nums;opacity:.8}
.book-nav{animation:fade-in .5s ease 2s both}
@media (max-width:900px){
  .spreads{position:relative;inset:auto;display:grid}
  .spread{position:relative;inset:auto;grid-area:1/1;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .spread.on{display:grid}
  .spread .p1{grid-column:1/5;grid-row:1}
  .spread .p2{grid-column:4/7;grid-row:1}
  .spread-link{position:static;grid-column:1/-1;grid-row:2;margin-top:44px;justify-self:start}
  .leaf{top:0;bottom:0;right:0}
  .leaf.back{left:0}
  .book-nav{bottom:6px}
  .hero-art{padding-bottom:64px}
}
@media (prefers-reduced-motion:reduce){.leaf.fwd,.leaf.back{animation:none;visibility:hidden}.spread.fresh .pinned,.book-nav{animation:none}}
@media (max-width:900px){.spreads{grid-column:1/-1}}
@media (max-width:900px){.doodle{display:none}}

/* Reportage d'un événement : photos et pages de carnet des participants */
.rg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,40px);grid-auto-flow:dense;align-items:start}
.rg-item{margin:0;display:flex;flex-direction:column;gap:10px}
.rg-tall{grid-row:span 2}.rg-wide{grid-column:1/-1}
@media (max-width:700px){.rg-grid{grid-template-columns:minmax(0,1fr)}.rg-tall{grid-row:auto}}
.rg-item .pinned{display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.rg-item:nth-child(odd) .pinned{transform:rotate(-.8deg)}
.rg-item:nth-child(even) .pinned{transform:rotate(.7deg)}
.rg-item .pinned:hover{transform:rotate(0) translateY(-3px)}
.rg-item img{width:100%;height:auto}
.rg-item figcaption{padding-left:6px}
@media (prefers-reduced-motion:reduce){.rg-item .pinned{transition:none}}
.rg-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,36px);margin-top:clamp(28px,4vw,48px)}
.rg-quote{margin:0;background:var(--sheet);padding:clamp(20px,3vw,32px);box-shadow:0 10px 24px -18px rgba(60,45,25,.45);transform:rotate(-.5deg);display:flex;flex-direction:column;gap:12px}
.rg-quote:nth-child(even){transform:rotate(.5deg)}
.rg-quote blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:var(--step-1);line-height:1.35;color:var(--ink)}
@media (max-width:700px){.rg-quotes{grid-template-columns:minmax(0,1fr)}}

/* =========================================================
   Retours de Roxana (23.10.2026)
   ========================================================= */
/* Une écriture par catégorie */
.police-aquarelle{--cat:"Caveat Brush","Caveat",cursive;--cat-w:400;--cat-col:#2e5f8f}
.police-sketching{--cat:"Cabin Sketch","Caveat",cursive;--cat-w:700;--cat-col:#3a3631}
.police-evenement{--cat:"Kaushan Script","Dancing Script",cursive;--cat-w:400;--cat-col:#a23f4c}
.police-cours{--cat:"Dancing Script",cursive;--cat-w:700;--cat-col:#2f5a46}
main[class*="police-"] h1,main[class*="police-"] h2,main[class*="police-"] h1 em,main[class*="police-"] h2 em{font-family:var(--cat);font-weight:var(--cat-w);font-size-adjust:none;letter-spacing:0}
main[class*="police-"] h1 em,main[class*="police-"] h2 em{color:var(--cat-col)}
main.police-sketching h1,main.police-sketching h2{font-size-adjust:.5;line-height:1.12}
.noir h2,.noir h2 em{color:#f1ece2}
/* Signatures en majuscules */
.brand b,.site-foot h2,.exlibris b,.approach cite,.cover-name{text-transform:uppercase;letter-spacing:.06em}
.brand b{font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.3}
.site-foot h2{font-family:var(--display);font-weight:600;line-height:1.3}
.approach cite{font-family:var(--body);font-weight:600;font-size:.95rem}
.exlibris b{font-family:var(--body);font-weight:600;font-size:.85rem}

/* Couverture du carnet : kraft, « Mon carnet », s'ouvre quand on la touche */
.cover-front{background:#e0c69f;background-image:radial-gradient(rgba(120,85,40,.10) 1px,transparent 1.4px),linear-gradient(105deg,rgba(255,255,255,.18),rgba(0,0,0,0) 40%,rgba(90,60,25,.12));background-size:5px 5px,auto;
  color:#3d2f20;box-shadow:inset 10px 0 18px -10px rgba(60,40,15,.45),0 30px 50px -24px rgba(60,40,15,.55);gap:6px}
.cover-front .cover-name{font-family:var(--body);font-weight:600;font-size:clamp(.7rem,1vw,.85rem);opacity:.8}
.cover-front b{font-family:"Dancing Script",cursive;font-weight:700;font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:1.05;letter-spacing:0;text-transform:none;color:#2b2016}
.cover-front .cover-hint{font-family:var(--hand);font-size:1.05rem;opacity:.7;margin-top:14px}
.cover-btn{display:none}
.js .hero-art.closed .cover-btn{display:block;position:absolute;top:0;bottom:0;left:24%;width:51%;z-index:8;cursor:pointer;background:none;border:0;color:transparent;font-size:0;border-radius:6px 12px 12px 6px}
.js .hero-art.closed .cover-btn:focus-visible{outline:3px solid var(--garance);outline-offset:4px}
.js .hero-art.closed,.js .hero-art.closed *{animation-play-state:paused!important}
.js .hero-art.closed .spreads,.js .hero-art.closed .book-nav,.js .hero-art.closed .leaf{visibility:hidden}
.js .hero-art.closed .cover{transition:transform .35s var(--ease-out)}
.js .hero-art.closed:hover .cover{transform:rotateY(-9deg)}
.cover-hint{animation:hint 2.4s ease-in-out infinite}
@keyframes hint{50%{opacity:.35}}
.js .hero-art.closed .cover-hint{animation-play-state:running!important}
@media (prefers-reduced-motion:reduce){
  .js .hero-art.closed .book{transform:translateX(-25%)}
  .js .hero-art.closed .cover{transform:none}
  .cover-hint{animation:none}
}

/* Doubles pages : une catégorie par page, rien à cheval sur la reliure */
.spread-title{position:absolute;margin:0;z-index:4;font-family:var(--cat,var(--hand));font-weight:var(--cat-w,500);color:var(--cat-col,var(--prussian));font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1;transform:rotate(-2deg)}
@media (min-width:901px){
  .hero-art .spread .p1{width:37%;left:6%;top:6%;right:auto;bottom:auto;transform:rotate(-2.5deg)}
  .hero-art .spread .p3{width:28%;left:15%;top:auto;bottom:9%;right:auto;transform:rotate(2deg)}
  .hero-art .spread .p2{width:34%;left:58%;right:auto;top:17%;transform:rotate(2.5deg)}
  .hero-art .spread .p2 img{aspect-ratio:auto;max-height:52vh;object-fit:cover}
  .spread-title{left:58%;top:3%}
  .hero-art .spread .n1{left:60%;right:auto;top:auto;bottom:17%;transform:rotate(-1deg)}
  .spread-link{left:60%;bottom:8%}
}
@media (max-width:900px){
  .spread-title{position:static;grid-column:1/-1;grid-row:1;justify-self:start;margin:0 0 4px}
  .spread .p1{grid-row:2}.spread .p2{grid-row:2}
  .spread-link{grid-row:3}
}

/* Fenêtre d'actualité (accueil) : ouverte une fois par actualité, fermée par ×, Échap ou clic à côté */
.news-modal{padding:0;border:0;background:none;color:var(--ink);width:calc(100% - 32px);max-width:780px;max-height:none;overflow:visible}
.news-modal::backdrop{background:rgba(38,35,31,.62)}
html:has(.news-modal[open]){overflow:hidden}
.news-modal:focus{outline:none}
.news-modal[open]{animation:nm-in .45s var(--ease-out) both}
@keyframes nm-in{from{opacity:0;translate:0 18px}}
.nm-card{position:relative;background:var(--sheet);border-radius:6px;box-shadow:0 30px 80px -24px rgba(20,15,10,.6),0 0 0 1px rgba(60,45,25,.08);transform:rotate(-.4deg)}
.nm-card::before{content:"";position:absolute;z-index:1;top:-12px;left:50%;width:110px;height:24px;margin-left:-55px;background:rgba(196,138,53,.55);transform:rotate(-3deg);pointer-events:none}
.nm-scroll{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:30px;align-items:center;padding:30px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain}
.news-modal.sans-image{max-width:560px}
.sans-image .nm-scroll{grid-template-columns:1fr}
.nm-img img{display:block;width:100%;height:auto;max-height:min(72vh,600px);object-fit:contain;border-radius:3px;box-shadow:0 10px 24px -14px rgba(40,30,20,.55)}
.nm-tag{font-family:var(--hand);font-size:1.3rem;color:var(--garance);margin:0}
.nm-txt h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:2px 0 12px;padding-right:28px}
.nm-resume{margin:0 0 22px;color:var(--ink-soft);font-size:1.05rem;line-height:1.55}
.nm-txt .actions{margin:0}
.nm-close{position:absolute;z-index:2;top:8px;right:8px;width:44px;height:44px;border:0;background:rgba(251,249,244,.92);border-radius:50%;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--ink)}
.nm-close:hover{background:var(--paper-deep)}
.nm-close:focus-visible{outline:2px solid var(--garance);outline-offset:2px}
@media (max-width:640px){
  .news-modal{width:calc(100% - 24px)}
  .nm-scroll{grid-template-columns:1fr;gap:14px;padding:22px 18px 20px;max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px)}
  .nm-img img{width:auto;max-width:100%;max-height:46vh;max-height:46dvh;margin-inline:auto}
  .nm-txt h2{font-size:1.7rem;margin-bottom:8px}
  .nm-resume{font-size:.98rem;margin-bottom:16px}
  .nm-txt .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.news-modal[open]{animation:none}}
.fullbleed-media video{width:100%;height:100%;object-fit:cover;display:block}
.cover-front .cover-name{max-width:88%;line-height:1.4}
@media (max-width:900px){.cover-front{padding:14px 30px 14px 12px}.cover-front .cover-name{font-size:.62rem;letter-spacing:.04em}.cover-front b{font-size:2rem}.cover-front .cover-hint{font-size:.95rem}}
.cover-front b{max-width:78%}

/* ---------- 25.10.2026 : carnet fermé qui invite à l'ouvrir, pages qu'on tourne à la main ---------- */
.open-me{display:none}
.js .hero-art.closed .open-me{display:flex;position:absolute;z-index:9;left:0;top:34%;flex-direction:column;align-items:flex-start;gap:0;margin:0;pointer-events:none;
  font-family:"Kaushan Script","Dancing Script",cursive;font-size:clamp(1.7rem,2.6vw,2.4rem);color:var(--garance);transform:rotate(-7deg);animation:open-me 2.6s ease-in-out infinite!important;animation-play-state:running!important}
.open-me span{background:linear-gradient(transparent 62%,rgba(196,138,53,.35) 62% 90%,transparent 90%);padding:0 .15em;white-space:nowrap}
.open-me svg{width:clamp(70px,7vw,110px);height:auto;margin:-4px 0 0 46%;color:var(--garance)}
@keyframes open-me{0%,100%{translate:0 0}50%{translate:6px -3px}}
@media (prefers-reduced-motion:reduce){.js .hero-art.closed .open-me{animation:none!important}}
@media (max-width:900px){.js .hero-art.closed .open-me{top:2px;left:2%;font-size:1.5rem}.open-me svg{width:62px;margin-left:56%}}
.cover-front .cover-hint{display:none}

/* coins de page cliquables, comme un vrai carnet */
.corner{display:none}
.js .hero-art:not(.closed) .corner{display:block;position:absolute;z-index:7;width:46px;height:46px;border:0;padding:0;cursor:pointer;background:none}
.corner-next{right:calc(-1% + 0px);bottom:1%}
.corner-prev{left:-1%;bottom:1%}
.corner::before{content:"";position:absolute;inset:0;transition:transform .25s var(--ease-out),opacity .25s}
.corner-next::before{background:linear-gradient(315deg,transparent 50%,#efe7d6 50%,#fbf8f1 70%);border-radius:0 0 9px 0;box-shadow:-3px -3px 6px -3px rgba(60,45,25,.35);transform:scale(.55);transform-origin:100% 100%}
.corner-prev::before{background:linear-gradient(45deg,transparent 50%,#efe7d6 50%,#fbf8f1 70%);border-radius:0 0 0 9px;box-shadow:3px -3px 6px -3px rgba(60,45,25,.35);transform:scale(.55);transform-origin:0 100%}
.corner:hover::before,.corner:focus-visible::before{transform:scale(1)}
.hero-art:not(.closed) .spreads{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.hero-art.is-turning,.hero-art.is-turning .spreads{cursor:grabbing}
.hero-art img{-webkit-user-drag:none}
.leaf.dragging{visibility:visible;animation:none}
.leaf.dragging.from-left{left:-1%;right:50%;transform-origin:right center;border-radius:9px 0 0 9px}
.leaf.settle{transition:transform .36s cubic-bezier(.3,.7,.3,1),filter .36s}
@media (max-width:900px){.leaf.dragging.from-left{left:0}.corner{display:none!important}}

/* les notes ne passent jamais sur les œuvres : la hauteur des images est limitée à la page */
@media (min-width:901px){
  .hero-art{container-type:size}
  .hero-art .spread .pinned img{object-fit:cover;width:100%}
  .hero-art .spread .p1 img{max-height:40cqh}
  .hero-art .spread .p3 img{max-height:32cqh}
  .hero-art .spread .p2 img{max-height:50cqh}
  .hero-art .spread .n1{bottom:15%}
  .spread-link{bottom:6%}
}

/* Écritures : aquarelle = encre diluée, cours = craie */
main.police-aquarelle h1,main.police-aquarelle h2,.spread.police-aquarelle .spread-title{background:linear-gradient(100deg,#1f4f86 0%,#3f7fbf 45%,#6aa5d8 70%,#2e5f8f 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
main.police-cours h1,main.police-cours h2,.spread.police-cours .spread-title{-webkit-mask-image:url("craie.png");mask-image:url("craie.png");-webkit-mask-size:96px;mask-size:96px}
.hero-art .doodle{display:none}
.rg-grid.rg-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.rg-4 .rg-tall{grid-row:auto}
.rg-4 .rg-item img{aspect-ratio:3/4;object-fit:cover}
@media (max-width:900px){.rg-grid.rg-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fullbleed-media:has(video){inset:0}
/* Choix de la langue */
.lang-switch{font-family:var(--body);font-weight:600;font-size:.85rem;letter-spacing:.08em;color:var(--ink-soft);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 11px;min-height:32px;display:inline-flex;align-items:center}
.lang-switch:hover,.lang-switch:focus-visible{color:var(--prussian);border-color:var(--prussian)}
/* Logo d'un partenaire */
.partner-logo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.partner-logo span{font-family:var(--hand);font-size:1.2rem;color:var(--ink-soft)}
.partner-logo img{height:84px;width:auto;display:block}
.cover-front b.long{font-size:clamp(1.5rem,2.7vw,2.4rem);max-width:84%;overflow-wrap:anywhere}
@media (max-width:900px){.cover-front b.long{font-size:1.45rem}}
.nav a.lang-switch{font-family:var(--body);font-weight:600;font-size:.85rem;letter-spacing:.08em;padding:6px 11px;min-height:32px;line-height:1;text-transform:uppercase}
@media (max-width:900px){.nav a.lang-switch{font-size:1rem;padding:10px 16px;margin-top:6px}}
.nav a.lang-switch::after{display:none}

/* textes du carnet : seulement quand le carnet est ouvert et les œuvres posées */
.js .hero-art:not(.opened) .spread-title,.js .hero-art:not(.opened) .spread .note,.js .hero-art:not(.opened) .book-nav,.js .hero-art:not(.opened) .corner{opacity:0;pointer-events:none}
.js .hero-art .spread-title,.js .hero-art .spread .note,.js .hero-art .book-nav{transition:opacity .6s ease}
.js .hero-art.opened .book-nav{animation:none}

/* Téléphone et tablette : chaque œuvre reste sur sa page, rien à cheval sur la reliure */
@media (max-width:900px){
  .hero-art .spread{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:14px;align-items:start}
  .hero-art .spread .spread-title{grid-column:1/-1;grid-row:1}
  .hero-art .spread .p1{grid-column:1;grid-row:2;width:auto;margin:0;transform:rotate(-2deg)}
  .hero-art .spread .p3{display:block;grid-column:1;grid-row:3;width:82%;justify-self:center;margin:0;transform:rotate(1.5deg)}
  .hero-art .spread .p2{grid-column:2;grid-row:2/4;width:auto;margin:0;align-self:start;transform:rotate(2deg)}
  .hero-art .spread .pinned img{width:100%;max-height:46vw;object-fit:cover}
  .hero-art .spread .p2 img{max-height:70vw}
  .hero-art .spread .spread-link{grid-column:1/-1;grid-row:4;margin-top:18px}
  .hero-art .spread .n1{display:none}
}

/* Carnet sans ruban ni élastique (demande de Roxana) */
.book-ribbon,.book-elastic,.cover-front::after{display:none!important}

/* Menu à 7 rubriques (Boutique ajoutée) : menu « 3 traits » jusqu'à 1100 px, menu compact au-dessus */
@media (max-width:1100px){
  .menu-btn{display:inline-flex}
  .nav-close{display:inline-flex}
  .nav{position:fixed;inset:0;z-index:50;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
    background:var(--sheet);padding:max(80px,env(safe-area-inset-top,0px)) var(--gutter-r) 40px var(--gutter);
    transform:translateY(-102%);transition:transform .45s cubic-bezier(.6,.05,.2,1);visibility:hidden}
  .nav.open{transform:none;visibility:visible}
  .nav a{font-family:var(--display);font-size:2.2rem;font-weight:500;padding-block:8px}
  .nav .nav-cta{font-family:var(--body);font-size:1.05rem;margin-top:18px;padding:14px 26px}
  .nav-close{position:absolute;top:max(18px,env(safe-area-inset-top,0px));right:var(--gutter-r)}
  .nav a.lang-switch{font-size:1rem;padding:10px 16px;margin-top:6px}
}
@media (max-width:1100px) and (max-height:620px){.nav{justify-content:flex-start;overflow-y:auto}.nav a{font-size:1.7rem;padding-block:4px}}
@media (min-width:1101px) and (max-width:1300px){
  .nav{gap:18px}
  .nav a{font-size:.92rem;white-space:nowrap}
  .nav .nav-cta{padding:8px 14px}
}
.brand span{white-space:nowrap}

/* 6 petits carrés sous le carnet (Boutique ajoutée) */
.hero-services .hs-item:nth-child(5):last-child{grid-column:auto}
@media (min-width:1101px){
  .hero-services{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
  .hs-item{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .hs-go{display:none}
}
@media (max-width:1100px) and (min-width:901px){.hero-services{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.hero-services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px) and (min-width:901px){
  .hero-services{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .hs-item{flex-direction:column;align-items:flex-start;gap:6px;padding:10px}
  .hs-go{display:none}
  .hs-txt b{font-size:1rem}
  .hs-txt span{font-size:.8rem}
}
.product.is-sold .product-img img{filter:grayscale(.35) opacity(.8)}
.product.is-sold [data-price]{color:var(--garance);font-weight:600}

/* =========================================================
   Brief du 26.10.2026 (après-midi)
   ========================================================= */

/* Carnet fermé : une œuvre dépasse déjà, glissée entre les pages */
.peek{display:none}
.js .hero-art.closed .peek{display:block;position:absolute;z-index:1;top:12%;left:70%;width:52%;transform:rotate(6deg);padding:7px;background:var(--sheet);
  box-shadow:0 18px 36px -18px rgba(40,30,20,.55);transition:transform .35s var(--ease-out)}
.js .hero-art.closed .peek img{width:100%;height:auto;display:block}
.js .hero-art.closed:hover .peek{transform:rotate(9deg) translateX(10px)}
.js .hero-art.closed .cover{z-index:2}
.js .hero-art.closed .cover-btn{left:20%;width:76%}
@media (max-width:900px){.js .hero-art.closed .peek{top:14%;left:68%;width:50%}}
html:not(.js) .peek{display:none}

/* Ouverture plus rapide : le contenu arrive vite */
.book{animation-duration:.95s;animation-delay:.05s}
.cover{animation-duration:.95s;animation-delay:.05s}
.hero-art .p1{animation-delay:.75s}.hero-art .p2{animation-delay:.85s}.hero-art .p3{animation-delay:.95s}
.hero-art .pinned{animation-duration:.6s}

/* Indication d'usage, une seule fois */
.book-hint{display:none}
.js .hero-art.opened.show-hint .book-hint{display:block;position:absolute;left:50%;top:-34px;transform:translateX(-50%);z-index:8;margin:0;white-space:nowrap;
  font-family:var(--hand);font-size:1.05rem;color:var(--ink-soft);animation:hint-out 6s ease 1s forwards}
@keyframes hint-out{0%,80%{opacity:1}100%{opacity:0;visibility:hidden}}
@media (max-width:900px){.js .hero-art.opened.show-hint .book-hint{position:static;transform:none;text-align:center;margin-top:8px;white-space:normal}}
@media (prefers-reduced-motion:reduce){.js .hero-art.opened.show-hint .book-hint{animation:none}}

/* Informations pratiques (cours, ateliers) */
.ip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:8px 0 0;border-top:1px solid var(--line)}
.ip-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.ip-row dt{font-family:var(--hand);font-size:1.3rem;color:var(--prussian);line-height:1.2}
.ip-row dd{margin:0;color:var(--ink);line-height:1.5}
@media (max-width:760px){.ip-grid{grid-template-columns:minmax(0,1fr)}.ip-row{grid-template-columns:110px minmax(0,1fr)}}

/* Boutique : informations confirmées sous le titre */
.product-spec{margin:2px 0 8px;font-size:.88rem;color:var(--ink-soft);line-height:1.45}
.product-spec[hidden]{display:none}

/* Formulaire : récapitulatif de la sélection */
.order-pick{display:flex;gap:16px;align-items:flex-start;background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:18px}
.order-pick[hidden]{display:none}
.op-img{flex:0 0 96px}
.op-img img{width:96px;height:96px;object-fit:cover;border-radius:4px;display:block}
.op-body{flex:1;min-width:0}
.op-k{margin:0;font-family:var(--hand);font-size:1.2rem;color:var(--garance)}
.op-body strong{display:block;font-size:1.1rem;margin:2px 0 6px}
.op-body dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;margin:0 0 8px;font-size:.9rem}
.op-body dl div{display:flex;gap:6px;flex-wrap:wrap}
.op-body dt{color:var(--ink-soft)}
.op-body dd{margin:0;font-weight:500}
.op-act{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0;font-size:.92rem}
.op-act a{color:var(--prussian)}
.op-x{border:0;background:none;padding:6px 0;min-height:36px;color:var(--garance);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:520px){.order-pick{flex-direction:column}.op-body dl{grid-template-columns:minmax(0,1fr)}}

/* Portfolio : filtres sur plusieurs lignes (ordinateur), défilement discret (téléphone) */
@media (min-width:761px){.filters{flex-wrap:wrap;overflow:visible;padding-bottom:0}}
@media (max-width:760px){
  .filters{scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent)}
  .filters::-webkit-scrollbar{display:none}
}
.filters button:focus-visible{outline:2px solid var(--garance);outline-offset:2px}
.hero-art .peek{animation:none!important;opacity:1;translate:none}

.book-tip{font-family:var(--hand);font-size:1.15rem;color:var(--ink-soft);transition:opacity .8s}
.book-tip::before{content:"· ";}
.book-tip.gone{opacity:0}
@media (max-width:420px){.book-tip{display:none}}
/* Visionneuse : titre, technique et lien sur des lignes distinctes ; flèches mieux visibles */
.lb-cap>div:first-child strong{display:block;margin-bottom:2px}
.lb-cap>div:first-child span{display:block;margin-bottom:4px}
.lb-cap .lb-more{font-size:1rem;padding:6px 0;display:inline-block}
.lightbox .icon-btn{border-color:rgba(245,241,232,.55)}
.lightbox .icon-btn:hover{background:rgba(245,241,232,.12)}
.lightbox .icon-btn:focus-visible{outline:2px solid #e9b97a;outline-offset:3px}
@media (min-width:901px){.lb-stage{position:relative}}

/* Finitions : œuvres entières, lecture mobile et formulaires confortables. */
[hidden]{display:none!important}
html{scroll-padding-top:24px}
body{overflow-wrap:break-word}
main{min-width:0}
button,input,select,textarea{font:inherit}
input,select,textarea{max-width:100%}
.form input:not([type=radio]):not([type=hidden]),.form select,.form textarea{font-size:max(16px,1em)}
.form textarea{min-height:180px;resize:vertical}
.form fieldset{min-width:0}
.form-required{margin-bottom:20px}
.form [aria-invalid=true]{border-color:var(--garance)}
.form .choice{row-gap:10px}
.form .choice label{min-height:44px;display:inline-flex;align-items:center}
.form .field:focus-within>label{color:var(--prussian)}
.draft-status{font-size:.88rem;color:var(--ink-soft);padding:10px 0}
.text-btn{border:0;background:none;color:var(--prussian);padding:8px 0;min-height:44px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.shop-assurance{max-width:48em;color:var(--ink-soft);font-size:1rem;border-left:2px solid var(--line);padding:10px 0 10px 20px;margin-bottom:42px}
.product{height:100%;display:flex;flex-direction:column}
.product-body{flex:1;display:flex;flex-direction:column}
.product-body>[data-buy]{margin-top:auto;align-self:flex-start}
.product-row{flex-wrap:wrap;gap:10px;margin-bottom:18px}
.product-img{background:var(--sheet);overflow:hidden}
.product-img img{object-fit:contain;background:var(--sheet)}
.product-spec{font-size:.85rem;line-height:1.6}
.op-img img{object-fit:contain;background:var(--sheet)}
.op-x{min-height:44px}
.js .hero-art .pinned{animation-delay:.25s}
.hero-art .spread .pinned img{object-fit:contain;background:var(--sheet)}
@media (max-width:760px){
  .filters{flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none;margin-inline:0;padding-inline:0;gap:8px}
  .filters button{min-height:44px;font-size:.9rem;white-space:normal;text-align:left}
  .product-img img{max-height:420px}
}
@media (max-width:420px){
  .site-head .wrap{gap:8px}
  .brand b{font-size:1.35rem}
  .brand span{font-size:.88rem}
  .menu-btn{font-size:.86rem}
  .actions{gap:12px}
  .actions .btn{max-width:100%;white-space:normal;text-align:center}
  .choice label{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (forced-colors:active){.btn,.filters button,input,select,textarea{border:1px solid ButtonText}}
@media print{
  .site-head,.news-modal,.book-nav,.corner,.cover-btn,.draft-actions,.form .actions,.strip-progress{display:none!important}
  .reveal.pending{opacity:1!important;transform:none!important}
  body{background:white!important;color:black!important}
  .section{break-inside:auto}
  figure,.product{break-inside:avoid}
}

/* Le titre reste lisible dès le premier affichage. */
.hero h1{-webkit-mask-image:none;mask-image:none;animation:none}

/* Ouverture courte et commandes immédiatement disponibles. */
.book,.cover{animation-duration:.55s;animation-delay:.05s}
.book-nav{animation:none}
.hero-art .pinned{animation-duration:.35s;animation-delay:.1s}
.leaf.fwd,.leaf.back{animation-duration:.48s}

/* Retouches après fusion (26.10, soir) */
/* Téléphone : catégories du portfolio sur une ligne qu'on fait glisser (sinon 6 lignes de boutons avant la première œuvre) */
@media (max-width:760px){
  .filters{flex-wrap:nowrap!important;overflow-x:auto!important;margin-inline:calc(var(--gutter) * -1)!important;padding-inline:var(--gutter)!important;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent)!important;mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent)!important}
  .filters button{white-space:nowrap!important;flex:0 0 auto}
}
/* Boutique : l'œuvre entière, dans un cadre qui suit sa forme (plus de grand vide blanc) */
.product-img img{aspect-ratio:auto!important;height:auto;max-height:340px;object-fit:contain}
.product-img{display:flex;align-items:center;justify-content:center;min-height:0}
/* Carnet : le cadre épouse chaque image (portrait ou paysage), sans bande blanche */
@media (min-width:901px){
  .hero-art .spread .pinned{width:auto!important}
  .hero-art .spread .pinned img{width:auto!important;height:auto;object-fit:contain}
  .hero-art .spread .p1 img{max-width:37cqw;max-height:40cqh}
  .hero-art .spread .p3 img{max-width:30cqw;max-height:32cqh}
  .hero-art .spread .p2 img{max-width:34cqw;max-height:52cqh}
}
@media (max-width:900px){
  .hero-art .spread .pinned{width:auto!important;justify-self:center}
  .hero-art .spread .pinned img{width:auto!important;height:auto;max-width:40vw;object-fit:contain}
  .hero-art .spread .p1 img{max-height:44vw}
  .hero-art .spread .p3 img{max-width:34vw;max-height:36vw}
  .hero-art .spread .p2 img{max-height:72vw}
}
.hero-art .spread .pinned img{aspect-ratio:auto!important}
@media (min-width:901px){.hero-art .spread .p1 img{max-height:36cqh}.hero-art .spread .p3 img{max-width:27cqw;max-height:30cqh}}
@media (max-width:900px){.hero-art .spread .pinned img{max-width:35vw}.hero-art .spread .p3 img{max-width:30vw}}

/* ---------- Bouton WhatsApp flottant (réglable dans l'admin : Réglages › Numéro WhatsApp) ---------- */
.wa-float{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:55;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border-radius:999px;background:#1f7a4d;color:#fff;font:600 .95rem/1 var(--body);text-decoration:none;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.wa-float:hover{background:#17633e;color:#fff}
.wa-float:focus-visible{outline:3px solid #26231f;outline-offset:3px}
.wa-float svg{flex:none}
@media (max-width:600px){.wa-float{padding:13px}.wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.site-foot{padding-bottom:88px}}
@media print{.wa-float{display:none}}

/* Safari (WebKit) : carnet fermé, la couverture kraft passe devant le revers pointillé */
.js .hero-art.closed .cover-back{visibility:hidden}
.js .hero-art.closed .cover-front{transform:translateZ(1px)}

/* Le bouton WhatsApp ne cache plus le bas du pied de page sur ordinateur */
.site-foot{padding-bottom:88px}

/* Bouton « Modifier » : visible seulement par Roxana connectée à l'admin (assets/site.js) */
.admin-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px max(16px,4vw);background:var(--ink);color:#f5f1e8;font:600 .85rem/1.2 var(--body);position:relative;z-index:45}
.admin-bar-who{opacity:.75;margin-right:4px}
.admin-bar a{display:inline-block;padding:7px 12px;border-radius:999px;text-decoration:none;color:#fff}
.admin-bar-main{background:#a23f4c}
.admin-bar-more{border:1px solid rgba(255,255,255,.35)}
.admin-bar a:hover{background:#23466e}
.admin-bar a:focus-visible{outline:2px solid #f5f1e8;outline-offset:2px}
@media print{.admin-bar{display:none}}