/* Lilou Art : feuille de style commune
   Principe : le trait d'abord (encre), la couleur ensuite (coups de Posca). */

:root{
  --paper:#faf8f4;
  --paper-2:#f3efe8;
  --ink:#1d1b18;
  --graphite:#6f6a62;
  --line:#ddd6ca;
  --hatch:rgba(29,27,24,.11);
  --corail:#ff6f61;
  --lagon:#1fbfb8;
  --mangue:#ffb547;
  --pomme-fonce:#6aa52b;
  --pomme:#9ad14b;
  --encre-bleue:#23404a;
  --f-title:"Newsreader",Georgia,serif;
  --f-body:"Karla",system-ui,sans-serif;
  --f-hand:"Kalam",cursive;
  --header-h:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{position:relative;font-family:var(--f-body);font-size:17px;background:var(--paper);color:var(--ink);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;animation:pageIn .6s ease both}
body.is-leaving{opacity:0;transition:opacity .25s ease}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--pomme-fonce);outline-offset:3px}
html{overflow-x:clip}
.hand{font-family:var(--f-hand);font-weight:300;color:var(--graphite);font-size:26px;line-height:1.1}
/* Kalam est plus grande que l'ancienne police manuscrite : on réduit un peu */
.hand,.head .num,.step .n,.signature,.faq summary::after,.done,.photos figcaption{font-size-adjust:.5}
.todo{background:linear-gradient(transparent 55%,#ffd3cc 55%);color:var(--ink)}
.mock{font-size:12.5px;text-align:center;padding:7px 16px;color:var(--graphite);border-bottom:1px solid var(--line)}

/* ---------- Traits dessinés ---------- */
svg.ink{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;filter:url(#rough);overflow:visible}
svg.ink.thin{stroke-width:.3;filter:none}
.draw path,.draw circle,.draw ellipse,.draw line,.draw rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.6,.1,.3,1)}
.draw.drawn path,.draw.drawn circle,.draw.drawn ellipse,.draw.drawn line,.draw.drawn rect{stroke-dashoffset:0}
.draw.drawn :nth-child(2){transition-delay:.15s}.draw.drawn :nth-child(3){transition-delay:.3s}.draw.drawn :nth-child(4){transition-delay:.45s}.draw.drawn :nth-child(n+5){transition-delay:.6s}
.fade{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.fade.drawn{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(26px) rotate(-1deg);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.stagger.drawn>*{opacity:1;transform:none}
.stagger.drawn>*:nth-child(2){transition-delay:.12s}.stagger.drawn>*:nth-child(3){transition-delay:.24s}.stagger.drawn>*:nth-child(4){transition-delay:.36s}.stagger.drawn>*:nth-child(5){transition-delay:.48s}.stagger.drawn>*:nth-child(n+6){transition-delay:.6s}

/* ---------- En-tête ---------- */
header.site{position:sticky;top:0;z-index:40;background:rgba(250,248,244,.92);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s}
header.site.scrolled{border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:20px}
/* Logo : empreinte sur touche corail + « Lilou » + signature */
.lockup{display:inline-flex;align-items:center;gap:.4em;text-decoration:none;color:inherit;font-size:34px;line-height:1}
.lockup .mark{width:1.35em;height:1.35em;flex:none;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
a.lockup:hover .mark{transform:rotate(-12deg) scale(1.06)}
.lockup .word{display:flex;flex-direction:column}
.lockup b{font-family:var(--f-title);font-weight:400;font-style:italic;font-size:1em;letter-spacing:-.01em}
.lockup small{font-family:var(--f-body);font-size:max(10px,.29em);letter-spacing:.24em;text-transform:uppercase;color:var(--graphite);margin-top:.28em}
.logo{font-size:30px}
.links{display:flex;gap:28px;list-style:none;font-size:15.5px;align-items:center}
.links a{text-decoration:none;position:relative;padding:4px 0}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;background:var(--corail);transition:right .35s cubic-bezier(.6,.1,.3,1)}
.links a:hover::after,.links a[aria-current="page"]::after{right:0}
.links .rdv{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.links .rdv::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--corail);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,111,97,.5)}60%{box-shadow:0 0 0 8px rgba(255,111,97,0)}}
.menu-btn{display:none;background:none;border:0;font:inherit;font-size:15.5px;cursor:pointer;align-items:center;gap:8px}
.menu-btn svg{width:26px;height:18px}

/* ---------- Bouton (un seul par zone) ---------- */
.cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;padding:17px 34px;text-decoration:none;font-size:17px;font-weight:600;color:var(--ink);border:0;background:none;cursor:pointer;font-family:inherit}
.cta .fill{position:absolute;inset:5px;background:var(--lagon);border-radius:40px;z-index:-1;transition:transform .35s cubic-bezier(.3,1.6,.5,1),background .3s}
.cta svg.border{position:absolute;inset:0;width:100%;height:100%}
.cta .arrow{width:30px;height:12px;transition:transform .35s}
.cta:hover .fill{transform:scale(1.05) rotate(-1.5deg);background:var(--corail)}
.cta:hover .arrow{transform:translateX(6px)}
.cta-zone{text-align:center;margin-top:64px;display:flex;flex-direction:column;align-items:center;gap:22px}
.cta-zone .hand{font-size:24px}

/* ---------- Héros (accueil) : pleine page, aéré ---------- */
.hero{min-height:calc(100svh - var(--header-h));display:flex;align-items:center;padding:clamp(24px,4vh,56px) 0}
.hero-grid{width:min(1120px,100% - 32px);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,7vw,120px);align-items:center}
.hero h1{font-size:clamp(42px,4.8vw,74px)}
.hero h1 .h1-sub{display:block;font-size:max(17px,.3em);line-height:1.35;letter-spacing:0;color:var(--graphite);margin-top:22px}
.eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite)}
h1{font-family:var(--f-title);font-weight:400;font-size:clamp(46px,6.4vw,92px);line-height:1.02;letter-spacing:-.015em;margin:20px 0 24px}
h1 em,h2 em{font-style:italic}
h1 .w{display:inline-block;opacity:0;transform:translateY(40px) rotate(3deg);animation:wordIn .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes wordIn{to{opacity:1;transform:none}}
h1 .u{position:relative;white-space:nowrap}
h1 .u svg{position:absolute;left:-2%;bottom:-8px;width:104%;height:22px}
h1 .u svg path{stroke:var(--corail);stroke-width:2.6}
.lead{font-size:clamp(17px,1.4vw,19px);color:var(--graphite);max-width:500px}
.hero .cta{margin-top:30px}
/* accueil : l'essentiel en 3 points + les chiffres TikTok (retour du live) */
.hero-points{list-style:none;margin-top:22px;display:grid;gap:6px;max-width:500px}
.hero-points li{position:relative;padding-left:22px;font-size:16.5px}
.hero-points li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--corail)}
.hero-points li:nth-child(2)::before{background:var(--lagon)}.hero-points li:nth-child(3)::before{background:var(--mangue)}
.hero-stats{display:flex;gap:38px;margin-top:24px;flex-wrap:wrap}
.hero-stats b{position:relative;z-index:0;display:block;font-family:var(--f-title);font-weight:400;font-size:40px;line-height:1;padding:0 .1em}
.hero-stats b::after{content:"";position:absolute;left:-.1em;right:-.1em;bottom:.02em;height:.42em;z-index:-1;background:var(--sc);opacity:.6;-webkit-mask:var(--m-posca) no-repeat center/100% 100%;mask:var(--m-posca) no-repeat center/100% 100%;transform:rotate(-1.5deg)}
.hero-stats div:first-child{--sc:var(--corail)}.hero-stats div:last-child{--sc:var(--mangue)}
.hero-stats span{font-size:14px;color:var(--graphite)}
.hero .after{display:block;margin-top:22px;margin-left:30px;font-size:22px}

.frame{position:relative;height:min(62svh,580px);aspect-ratio:4/5;max-width:100%;justify-self:center}
.frame::before{content:"";position:absolute;inset:22px -28px -28px 22px;background:var(--lagon);transform:rotate(2.5deg);animation:breathe 7s ease-in-out infinite;
  -webkit-mask:var(--m-aplat) no-repeat center/100% 100%;mask:var(--m-aplat) no-repeat center/100% 100%}
@keyframes breathe{50%{transform:rotate(-1deg) translate(-4px,4px)}}
.frame>svg.thin{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);z-index:2}
.frame .ph{position:relative;z-index:1;background-color:var(--paper)}
svg.ink.doodle{position:absolute;width:52px;height:52px;z-index:3;stroke-width:2.4;animation:float 6s ease-in-out infinite}
svg.ink.d1{left:-42px;top:-36px;stroke:var(--corail)}
svg.ink.d2{right:-56px;top:26%;stroke:var(--pomme-fonce);animation-delay:-2s;animation-duration:7s}
svg.ink.d3{left:-48px;bottom:14%;stroke:var(--mangue);animation-delay:-4s}
@keyframes float{50%{transform:translateY(-10px) rotate(12deg)}}
.note{position:absolute;right:-10px;bottom:-60px;display:flex;align-items:flex-end;gap:6px;z-index:3}
.note .hand{color:var(--ink);font-size:24px}
.note svg{width:80px;height:52px;margin-bottom:6px;stroke-width:1.6}

/* Emplacement photo (hachures) */
.ph{width:100%;height:100%;background:repeating-linear-gradient(-45deg,transparent 0 9px,var(--hatch) 9px 10px);display:grid;place-items:center;text-align:center;padding:20px}
.ph .hand{font-size:23px}

/* Photos réelles */
.pic{width:100%;height:100%;object-fit:cover;display:block;background:var(--paper-2)}
.frame .pic{position:relative;z-index:1}
.oval .pic{position:relative;z-index:1;border-radius:50%}
.piece .pic{height:auto;aspect-ratio:var(--r,4/5);border:1px solid var(--line);transition:transform .5s cubic-bezier(.3,1.5,.5,1),box-shadow .5s}
.piece:hover .pic{transform:rotate(-1.5deg) translateY(-6px);box-shadow:10px 10px 0 color-mix(in srgb,var(--h) 70%,transparent)}
.photos .pic{aspect-ratio:4/5;border:1px solid var(--line);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.photos figure:nth-child(odd) .pic{transform:rotate(-1deg)}.photos figure:nth-child(even) .pic{transform:rotate(1.2deg)}
.photos figure:hover .pic{transform:rotate(0) scale(1.03)}
.photos figcaption{position:relative;z-index:1;font-family:var(--f-hand);font-size:22px;color:var(--graphite);margin-top:12px}
.photos{row-gap:34px}

/* Vidéos TikTok (chargées au clic) */
.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:920px;margin:44px auto}
.video{position:relative;aspect-ratio:9/16;border:0;padding:0;cursor:pointer;overflow:hidden;border-radius:16px;background:#000;font:inherit;color:#fff;text-align:left}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease,opacity .4s;opacity:.88}
.video:hover img{transform:scale(1.06);opacity:1}
.video .play{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;background:var(--corail);display:grid;place-items:center;border:1.5px solid var(--ink);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.video:hover .play{transform:scale(1.12) rotate(-8deg)}
.video .play svg{width:26px;height:26px;margin-left:4px}
.video small{position:absolute;left:12px;right:12px;bottom:12px;font-size:13px;background:rgba(29,27,24,.75);padding:6px 10px;border-radius:8px}
.videos video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:16px;background:#000}

/* ---------- Bandeau défilant ---------- */
/* le bandeau défile sur un grand trait de Posca corail (et non plus une bande pleine) */
.ticker{position:relative;isolation:isolate;overflow:hidden;white-space:nowrap;padding:22px 0;transform:rotate(-1.2deg);margin:4px -24px}
.ticker::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--corail);-webkit-mask:var(--m-bande) no-repeat center/100% 100%;mask:var(--m-bande) no-repeat center/100% 100%}
.ticker-track{display:inline-flex;gap:34px;animation:scroll 36s linear infinite;font-family:var(--f-title);font-style:italic;font-size:30px;line-height:1.2}
.ticker-track i{font-style:normal;color:#fff}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section{padding:110px 0}
.head{display:grid;grid-template-columns:1fr;gap:40px;margin-bottom:60px;align-items:start}
.head .num{font-family:var(--f-hand);font-size:30px;line-height:1.2}
h2{font-family:var(--f-title);font-weight:400;font-size:clamp(36px,4.6vw,58px);line-height:1.06;letter-spacing:-.01em}
/* Mot clé souligné d'un trait de Posca (bords irréguliers, fin de trait qui s'effiloche) */
h2 em{position:relative;z-index:0;padding:0 .08em;white-space:nowrap}
h2 em::after{content:"";position:absolute;left:-.14em;right:-.18em;bottom:.04em;height:.46em;z-index:-1;background:var(--c,var(--corail));opacity:.9;
  -webkit-mask:var(--m-posca) no-repeat center/100% 100%;mask:var(--m-posca) no-repeat center/100% 100%;
  transform:scaleX(0) rotate(-1deg);transform-origin:left center;transition:transform .9s cubic-bezier(.6,.1,.3,1) .45s}
.drawn h2 em::after,h2.drawn em::after{transform:scaleX(1) rotate(-1deg)}
.head p,.intro{color:var(--graphite);margin-top:16px;max-width:600px;font-size:18px}
h3{font-family:var(--f-title);font-weight:400;font-size:27px;line-height:1.15}
.c-corail{--c:var(--corail)}.c-lagon{--c:var(--lagon)}.c-mangue{--c:var(--mangue)}.c-pomme{--c:var(--pomme)}

/* ---------- Fonds : toile + voile d'aquarelle léger + petites éclaboussures, une couleur par partie ---------- */
.c-corail,section{--splat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160'%3E%3Cg fill='%23ff6f61' opacity='.34'%3E%3Ccircle cx='60' cy='70' r='16'/%3E%3Ccircle cx='74' cy='62' r='11'/%3E%3Ccircle cx='50' cy='82' r='9'/%3E%3Ccircle cx='70' cy='84' r='7'/%3E%3Ccircle cx='102' cy='48' r='4'/%3E%3Ccircle cx='118' cy='40' r='2.5'/%3E%3Ccircle cx='30' cy='104' r='3.5'/%3E%3Ccircle cx='96' cy='96' r='3'/%3E%3Ccircle cx='140' cy='30' r='1.8'/%3E%3Ccircle cx='22' cy='40' r='2'/%3E%3Ccircle cx='85' cy='112' r='1.6'/%3E%3Cpath d='M64 86q3 18 0 32q-2 3-4 0q-1-14 0-32z'/%3E%3C/g%3E%3C/svg%3E")}
.c-lagon{--splat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160'%3E%3Cg fill='%231fbfb8' opacity='.36'%3E%3Ccircle cx='150' cy='80' r='14'/%3E%3Ccircle cx='136' cy='70' r='9'/%3E%3Ccircle cx='162' cy='92' r='8'/%3E%3Ccircle cx='120' cy='96' r='3.5'/%3E%3Ccircle cx='190' cy='56' r='4'/%3E%3Ccircle cx='206' cy='44' r='2'/%3E%3Ccircle cx='104' cy='60' r='2.4'/%3E%3Ccircle cx='176' cy='118' r='2.8'/%3E%3Ccircle cx='214' cy='100' r='1.6'/%3E%3Cpath d='M148 92q4 16 1 26q-2 3-4 0q-1-12 0-26z'/%3E%3C/g%3E%3C/svg%3E")}
.c-mangue{--splat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160'%3E%3Cg fill='%23ffb547' opacity='.34'%3E%3Ccircle cx='90' cy='60' r='15'/%3E%3Ccircle cx='106' cy='70' r='10'/%3E%3Ccircle cx='80' cy='74' r='8'/%3E%3Ccircle cx='130' cy='92' r='3.5'/%3E%3Ccircle cx='60' cy='36' r='3'/%3E%3Ccircle cx='146' cy='106' r='2'/%3E%3Ccircle cx='48' cy='90' r='2.6'/%3E%3Ccircle cx='118' cy='30' r='1.8'/%3E%3Cpath d='M92 72q3 20 0 34q-2 3-4 0q-1-16 0-34z'/%3E%3C/g%3E%3C/svg%3E")}
.c-pomme{--splat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160'%3E%3Cg fill='%236aa52b' opacity='.28'%3E%3Ccircle cx='120' cy='76' r='15'/%3E%3Ccircle cx='134' cy='66' r='9'/%3E%3Ccircle cx='108' cy='88' r='8'/%3E%3Ccircle cx='160' cy='50' r='3.6'/%3E%3Ccircle cx='86' cy='104' r='3'/%3E%3Ccircle cx='176' cy='40' r='2'/%3E%3Ccircle cx='70' cy='60' r='2.2'/%3E%3Ccircle cx='150' cy='112' r='1.8'/%3E%3Cpath d='M118 88q3 16 0 28q-2 3-4 0q-1-12 0-28z'/%3E%3C/g%3E%3C/svg%3E")}
section{position:relative;isolation:isolate;--c:var(--corail)}
section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    var(--splat) no-repeat 96% 40px/260px auto,
    radial-gradient(ellipse 36% 30% at 90% 12%,color-mix(in srgb,var(--c) 18%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in srgb,var(--c) 16%,transparent) 0%,color-mix(in srgb,var(--c) 3%,transparent) 75%)}
/* une partie sur deux : éclaboussure et voile de l'autre côté */
.tint::before{background:
    var(--splat) no-repeat 3% calc(100% - 30px)/260px auto,
    radial-gradient(ellipse 36% 30% at 8% 88%,color-mix(in srgb,var(--c) 18%,transparent),transparent 72%),
    linear-gradient(0deg,color-mix(in srgb,var(--c) 17%,transparent) 0%,color-mix(in srgb,var(--c) 3%,transparent) 75%)}
/* trait de crayon ondulé entre deux parties */
section+section::after,.ticker+section::after{content:"";position:absolute;left:0;right:0;top:-7px;height:14px;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='14'%3E%3Cpath d='M0 7c18-5 37-6 55-1s37 5 55 0 37-6 55-1 37 5 55 0' fill='none' stroke='%236f6a62' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/220px 14px}

/* Texture de toile en fond du site (fils horizontaux et verticaux) : derrière le contenu, jamais sur les photos */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.3;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='3' stitchTiles='stitch' result='h'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .012' numOctaves='2' seed='9' stitchTiles='stitch' result='v'/%3E%3CfeBlend in='h' in2='v' mode='multiply'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .28 -1 0 0 .9 .05'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23t)'/%3E%3C/svg%3E")}

/* Texture au survol : couleur + hachures de crayon */
.hatch-hover{transition:background .4s}
.hatch-hover:hover{background:repeating-linear-gradient(-45deg,transparent 0 7px,color-mix(in srgb,var(--c) 26%,transparent) 7px 8px),color-mix(in srgb,var(--c) 13%,var(--paper))}

/* ---------- Cartes créations ---------- */
.offers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.offer{position:relative;padding:36px 28px;border:1px solid color-mix(in srgb,var(--c) 35%,var(--line));border-radius:4px;display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:background .4s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.offer:nth-child(1){--c:var(--corail)}.offer:nth-child(2){--c:var(--lagon)}.offer:nth-child(3){--c:var(--mangue)}.offer:nth-child(4){--c:var(--pomme)}
.offer{background:repeating-linear-gradient(-45deg,transparent 0 7px,color-mix(in srgb,var(--c) 32%,transparent) 7px 8px),color-mix(in srgb,var(--c) 19%,var(--paper))}
.offer:hover{transform:translateY(-6px)}
.offer:hover>svg{transform:rotate(-8deg) scale(1.08)}
.offer>svg{width:66px;height:66px;margin-bottom:8px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.offer .who{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.offer p{font-size:15.5px;color:var(--graphite)}
.offer>svg,.blob{background:no-repeat 78% 78%/0 0 radial-gradient(closest-side,var(--c) 94%,transparent 100%);transition:background-size .7s cubic-bezier(.3,1.5,.5,1) 1s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.offer>svg.drawn,.blob.drawn{background-size:74% 74%}
.extras{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:50px;padding-top:34px;border-top:1px solid var(--line)}
.extra{display:flex;align-items:center;gap:12px;font-size:15.5px}
.extra svg{width:34px;height:34px}
.extra:nth-child(1){--c:var(--corail)}.extra:nth-child(2){--c:var(--lagon)}.extra:nth-child(3){--c:var(--mangue)}.extra:nth-child(4){--c:var(--pomme)}.extra:nth-child(5){--c:var(--corail)}.extra:nth-child(6){--c:var(--lagon)}

/* ---------- Mariage / arbre ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.tree svg{width:100%;height:auto}
/* Arbre de vie : tronc peint, branches, puis la couronne se remplit d'empreintes une à une */
.tree svg{overflow:visible;filter:none}
.tree .branch,.tree .trunk{filter:url(#rough)}
.tree .trunk{fill:#6b4a33;stroke:none;stroke-dasharray:none!important;opacity:0;transition:opacity 1s ease .2s}
.tree svg.drawn .trunk{opacity:1}
.tree .branch{stroke:#6b4a33;stroke-width:5}
#prints .print{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .35s ease}
.tree svg.drawn #prints .print{opacity:1}
#prints .tip{fill:currentColor;stroke:none;stroke-dasharray:none!important}
#prints .ridge{stroke:rgba(255,255,255,.62);stroke-width:.55;fill:none;stroke-dasharray:none!important;stroke-dashoffset:0!important}
.list-hand{list-style:none;margin:30px 0 0;display:grid;gap:18px}
.list-hand li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:baseline}
.list-hand .hand{font-size:32px;color:var(--ink)}

/* ---------- Mots-clés / puces ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{border:1px solid var(--ink);border-radius:40px;padding:8px 18px;font-size:15px;background:color-mix(in srgb,var(--cc) 22%,var(--paper));transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.chip:nth-child(4n+1){--cc:var(--corail)}.chip:nth-child(4n+2){--cc:var(--lagon)}.chip:nth-child(4n+3){--cc:var(--mangue)}.chip:nth-child(4n+4){--cc:var(--pomme)}
.chip:hover{transform:rotate(-3deg) scale(1.05)}

/* ---------- Étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;position:relative}
.steps>svg{position:absolute;top:22px;left:0;width:100%;height:30px}
.steps>svg path{stroke:var(--graphite)}
.step{position:relative}
.step .n{display:inline-grid;place-items:center;width:54px;height:54px;font-family:var(--f-hand);font-size:38px;line-height:1;margin-bottom:14px;background:radial-gradient(closest-side,var(--sc) 92%,transparent 96%)}
.step:nth-child(2){--sc:var(--corail)}.step:nth-child(3){--sc:var(--lagon)}.step:nth-child(4){--sc:var(--mangue)}.step:nth-child(5){--sc:var(--pomme)}
.steps.drawn .n{animation:pop .6s cubic-bezier(.3,1.8,.5,1) both}
.steps.drawn .step:nth-child(3) .n{animation-delay:.2s}.steps.drawn .step:nth-child(4) .n{animation-delay:.4s}.steps.drawn .step:nth-child(5) .n{animation-delay:.6s}
@keyframes pop{from{transform:scale(0) rotate(-30deg)}}
.step h3{font-size:24px;margin-bottom:8px}
.step p{font-size:15.5px;color:var(--graphite)}

/* ---------- Galerie ---------- */
.filters{display:flex;flex-wrap:wrap;gap:6px 8px;margin-bottom:40px}
.filters button{position:relative;background:none;border:0;font:inherit;font-size:15.5px;padding:8px 18px;cursor:pointer;color:var(--graphite)}
.filters button[aria-pressed="true"]{color:var(--ink)}
.filters button svg{position:absolute;inset:-2px -4px;width:calc(100% + 8px);height:calc(100% + 4px);opacity:0;stroke:var(--corail);stroke-width:1.8}
.filters button[aria-pressed="true"] svg{opacity:1}
.gallery{columns:3;column-gap:28px}
.piece{break-inside:avoid;margin-bottom:28px;--h:var(--lagon)}
.piece[data-c="mur"]{--h:var(--mangue)}.piece[data-c="mariage"]{--h:var(--corail)}.piece[data-c="num"]{--h:var(--pomme)}.piece[data-c="perso"]{--h:var(--corail)}.piece[data-c="toile"]{--h:var(--lagon)}
.piece .ph{height:auto;aspect-ratio:var(--r,4/5);border:1px solid var(--line);background:repeating-linear-gradient(-45deg,transparent 0 9px,color-mix(in srgb,var(--h) 50%,transparent) 9px 11px),var(--paper);transition:transform .5s cubic-bezier(.3,1.5,.5,1),box-shadow .5s}
.piece:hover .ph{transform:rotate(-1.5deg) translateY(-6px);box-shadow:10px 10px 0 color-mix(in srgb,var(--h) 70%,transparent)}
.piece figcaption{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.piece figcaption span:first-child{font-family:var(--f-title);font-size:23px;line-height:1.15}
.piece figcaption span:last-child{font-family:var(--f-hand);font-size:21px;color:var(--graphite);font-size-adjust:.5}

/* ---------- Carrousel des œuvres ---------- */
/* bande d'œuvres qui défile en continu, comme le bandeau du haut ; elle déborde sur toute la largeur */
.carousel{position:relative;margin-inline:calc(50% - 50vw)}
.track{overflow:hidden;padding:14px 0 26px}
.reel{display:flex;gap:30px;width:max-content;animation:reel var(--dur,72s) linear infinite}
@keyframes reel{to{transform:translateX(calc(-50% - 15px))}}
/* elle défile toute seule en continu ; seul le bouton pause l'arrête */
.carousel.paused .reel{animation-play-state:paused}
.slide{flex:0 0 clamp(240px,30vw,400px);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.slide:nth-child(odd){transform:rotate(-1deg)}.slide:nth-child(even){transform:rotate(1deg)}
.slide:hover{transform:rotate(0) translateY(-6px)}
.slide-img{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);box-shadow:12px 12px 0 color-mix(in srgb,var(--c) 45%,transparent)}
.slide-img .pic{transition:transform .8s ease}
.slide:hover .slide-img .pic{transform:scale(1.04)}
.slide figcaption{margin-top:18px;display:flex;flex-direction:column}
.slide figcaption .t{font-family:var(--f-title);font-size:30px;line-height:1.1}
.slide figcaption .hand{font-size:24px}
/* petit bouton pause discret (obligatoire pour tout ce qui bouge tout seul) */
.car-pause{display:grid;place-items:center;margin:4px auto 0;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--paper);cursor:pointer;color:var(--graphite)}
.car-pause:hover{border-color:var(--ink);color:var(--ink)}
.car-pause svg{width:14px;height:14px;fill:currentColor}
.car-pause .i-play,.car-pause[aria-pressed="true"] .i-pause{display:none}
.car-pause[aria-pressed="true"] .i-play{display:block}
.piece.hide{display:none}

/* ---------- L'artiste ---------- */
.oval{position:relative;aspect-ratio:3/4;max-width:420px;width:100%;justify-self:center}
.oval::before{content:"";position:absolute;inset:7% -9% -6% 11%;background:var(--pomme);border-radius:50%;animation:breathe 8s ease-in-out infinite}
.oval .ph{position:relative;z-index:1;border-radius:50%;background-color:var(--paper)}
.oval>svg{position:absolute;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px);z-index:2}
.signature{font-family:var(--f-hand);font-size:58px;line-height:1;margin-top:24px;display:inline-block;transform:rotate(-4deg);color:var(--corail)}
.prose p{color:var(--graphite);font-size:18px;margin-top:18px;max-width:620px}
.prose p strong{color:var(--ink);font-weight:600}

/* ---------- TikTok ---------- */
.social{text-align:center}
.stats{display:flex;justify-content:center;gap:70px;margin:40px 0 44px;flex-wrap:wrap}
.stats b{position:relative;z-index:0;display:block;font-family:var(--f-title);font-weight:400;font-size:58px;line-height:1;padding:0 .1em}
.stats b::after{content:"";position:absolute;left:-.1em;right:-.1em;bottom:.02em;height:.42em;z-index:-1;background:var(--sc);opacity:.6;-webkit-mask:var(--m-posca) no-repeat center/100% 100%;mask:var(--m-posca) no-repeat center/100% 100%;transform:rotate(-1.5deg)}
.stats div:first-child{--sc:var(--corail)}.stats div:last-child{--sc:var(--mangue)}
.stats span{font-size:14.5px;color:var(--graphite)}
.social .small{color:var(--graphite)}
.text-link{text-decoration:none;border-bottom:1.5px solid var(--corail);padding-bottom:2px}

/* ---------- Pages intérieures ---------- */
.page-hero{padding:60px 0 40px}
.crumbs{font-size:14px;color:var(--graphite);display:flex;gap:8px;flex-wrap:wrap;list-style:none}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs li+li::before{content:"›";margin-right:8px}
.page-hero h1{font-size:clamp(40px,5.4vw,72px);max-width:900px}
.tldr{position:relative;margin-top:44px;padding:30px 34px 26px;max-width:640px;background:#fffdf7;box-shadow:0 1px 2px rgba(29,27,24,.08),0 10px 24px -12px rgba(29,27,24,.25);transform:rotate(-.6deg)}
.tldr::before{content:"";position:absolute;top:-12px;left:50%;width:110px;height:24px;transform:translateX(-50%) rotate(2deg);background:color-mix(in srgb,var(--c,var(--lagon)) 45%,transparent);opacity:.85}

.tldr .hand{color:var(--corail);font-size:28px}
.tldr ul{list-style:none;margin-top:8px;display:grid;gap:6px}
.tldr li{padding-left:22px;position:relative}
.tldr li::before{content:"";position:absolute;left:2px;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--c,var(--lagon))}
.ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* cartes : toujours colorées, avec des hachures de crayon */
.idea{border:1px solid color-mix(in srgb,var(--c,var(--lagon)) 35%,var(--line));padding:26px;border-radius:4px;transition:transform .4s cubic-bezier(.3,1.5,.5,1),border-color .3s;
  background:repeating-linear-gradient(-45deg,transparent 0 7px,color-mix(in srgb,var(--c,var(--lagon)) 32%,transparent) 7px 8px),color-mix(in srgb,var(--c,var(--lagon)) 19%,var(--paper))}
/* chaque carte d'une grille prend sa propre couleur */
.ideas .idea:nth-child(4n+1){--c:var(--corail)}.ideas .idea:nth-child(4n+2){--c:var(--lagon)}.ideas .idea:nth-child(4n+3){--c:var(--mangue)}.ideas .idea:nth-child(4n+4){--c:var(--pomme)}
/* carte cliquable : elle se soulève et montre une flèche */
a.idea{display:block;text-decoration:none;color:inherit}
a.idea:hover{transform:translateY(-6px) rotate(-.6deg);border-color:var(--ink)}
a.idea .more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:20px;color:var(--ink)}
a.idea .more svg{width:30px;height:12px;transition:transform .35s}
a.idea:hover .more svg{transform:translateX(6px)}
.idea h3{font-size:23px;margin-bottom:6px}
.idea p{font-size:15.5px;color:var(--graphite)}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.photos .ph{aspect-ratio:4/5;border:1px solid var(--line)}

/* Tarifs */
.price{position:relative;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:38px 40px;max-width:900px}
.price>svg{position:absolute;inset:0;width:100%;height:100%}
.price .range{font-family:var(--f-title);font-size:clamp(30px,3.4vw,44px);line-height:1;white-space:nowrap}
.price p{color:var(--graphite);font-size:15.5px;margin-top:8px}
.rates{border-top:1px solid var(--line)}
.rate{display:grid;grid-template-columns:1.3fr 2fr auto;gap:30px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
.rate h3{font-size:24px}
.rate p{color:var(--graphite);font-size:15.5px}
.rate .range{font-family:var(--f-title);font-size:22px;white-space:nowrap}
.rate a{text-decoration:none}
.small{font-size:14px;color:var(--graphite)}

/* FAQ */
.faq{max-width:860px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 50px 24px 0;position:relative;font-family:var(--f-title);font-size:22px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-family:var(--f-hand);font-size:40px;line-height:1;color:var(--corail);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:var(--graphite);max-width:720px}

/* ---------- Rendez-vous (calendrier) ---------- */
.booking{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.cal{position:relative;padding:34px}
.cal>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cal-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.cal-head b{font-family:var(--f-title);font-weight:400;font-size:26px}
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px}
.day,.slot{font:inherit;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 6px;cursor:pointer;text-align:center;transition:all .25s}
.day small{display:block;font-size:12px;color:var(--graphite);text-transform:uppercase;letter-spacing:.08em}
.day strong{font-family:var(--f-title);font-weight:400;font-size:24px;display:block;line-height:1.1}
.day:hover,.slot:hover{border-color:var(--ink);transform:translateY(-2px)}
.day[aria-pressed="true"],.slot[aria-pressed="true"]{background:var(--corail);border-color:var(--ink)}
.slots{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.slot{padding:10px 18px}
.cal-step{margin-top:28px}
.cal-step[hidden]{display:none}
.cal-step>.label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);display:block;margin-bottom:12px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:grid;gap:4px}
.field span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.field input,.field select{font:inherit;font-size:16px;background:transparent;border:0;border-bottom:1px solid var(--ink);padding:9px 0;color:var(--ink);border-radius:0}
.field.full{grid-column:1/-1}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--graphite);margin-top:18px}
.consent input{margin-top:5px;accent-color:var(--corail)}
.cal .cta{margin-top:24px}
.done{margin-top:24px;font-family:var(--f-hand);font-size:28px;color:var(--ink)}

/* ---------- Pages légales ---------- */
.legal{max-width:780px}
.legal h2{font-size:30px;margin:46px 0 12px}
.legal p,.legal li{color:var(--graphite);margin-top:10px}
.legal ul{padding-left:20px}
.legal strong{color:var(--ink)}

/* ---------- Pied de page ---------- */
/* Pied de page : une bande de papier kraft au bord déchiré, posée sous la page */
footer.site{--kraft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)'/%3E%3C/svg%3E") 0 0/240px 240px,#dccab0;
  position:relative;z-index:2;margin-top:0;padding:30px 0 18px;font-size:14px;color:#3a2f22;background:var(--kraft)}
/* pied de page compact */
footer.site .foot{gap:20px 30px}
footer.site .foot ul{gap:4px}
footer.site .foot h4{margin-bottom:8px}
footer.site .foot p{margin-top:8px;font-size:13.5px;line-height:1.5}
footer.site .foot-bottom{margin-top:20px;padding-top:12px;font-size:12.5px}
footer.site .brand-lockup{font-size:26px}
@media (max-width:960px){footer.site .foot{grid-template-columns:1fr 1fr 1fr}footer.site .foot>div:first-child{grid-column:1/-1}}
@media (max-width:560px){footer.site .foot{grid-template-columns:1fr 1fr}footer.site .foot>div:last-child{grid-column:1/-1}}
/* le bord déchiré est posé PAR-DESSUS la dernière section, sans aucun espace :
   ::before = la frange blanche du papier déchiré (avec son ombre),
   ::after  = le papier kraft lui-même, avec exactement la même texture que le reste du pied de page */
footer.site::before,footer.site::after{content:"";position:absolute;left:0;right:0;top:-62px;height:64px;pointer-events:none}
footer.site::before{filter:drop-shadow(0 -3px 3px rgba(60,40,20,.18));background:var(--m-frange) repeat-x bottom/1200px 64px}
footer.site::after{background:var(--kraft);background-position:0 178px,0 0; /* 178 = 240 - 62 : la texture se raccorde pile avec celle du pied de page */
  -webkit-mask:var(--m-kraft) repeat-x bottom/1200px 64px;mask:var(--m-kraft) repeat-x bottom/1200px 64px}
main>section:last-child{padding-bottom:150px}
footer.site .foot p,footer.site .foot h4,footer.site .foot-bottom{color:#6b5a44}
footer.site .foot-bottom{border-top-color:rgba(90,65,35,.25)}
footer.site .foot a:hover{color:#d9443a}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px}
.foot .brand-lockup{font-size:32px}
.foot .brand-lockup small{color:#6b5a44}

/* ---------- Page de présentation du logo ---------- */
.logo-hero{padding:50px 0 10px}
.logo-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.logo-choice{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.logo-choice .logo-box{min-height:170px;transition:transform .4s cubic-bezier(.3,1.5,.5,1),border-color .3s}
.logo-choice:hover .logo-box{transform:translateY(-5px) rotate(-.6deg);border-color:var(--ink)}
@media (max-width:820px){.logo-choices{grid-template-columns:1fr}}
.lockup.xl{font-size:clamp(54px,9vw,120px)}
.logo-big{display:grid;place-items:center}
.logo-big .mark{width:min(360px,80%);height:auto}
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.logo-card{display:flex;flex-direction:column;gap:10px}
.logo-box{display:grid;place-items:center;min-height:200px;border-radius:4px;border:1px solid var(--line);padding:24px}
.logo-box.paper{background:var(--paper)}
.logo-box.ink{background:#1d1b18;color:#faf8f4}.logo-box.ink small{color:#cfc8bd}
.logo-box.kraft{background:#dccab0;color:#3a2f22}.logo-box.kraft small{color:#6b5a44}
.logo-box.corailbg{background:var(--corail)}.logo-box.corailbg small{color:#1d1b18}
.lockup.stack{flex-direction:column;text-align:center;gap:.2em}.lockup.stack .word{align-items:center}
.avatar{width:130px;height:130px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center}
.avatar .mark{width:96px;height:96px}
.sizes{display:flex;align-items:flex-end;gap:46px;flex-wrap:wrap}
.sizes span{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px;color:var(--graphite)}
.sizes span:nth-child(1) .mark{width:16px;height:16px}.sizes span:nth-child(2) .mark{width:32px;height:32px}
.sizes span:nth-child(3) .mark{width:64px;height:64px}.sizes span:nth-child(4) .mark{width:128px;height:128px}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.swatches span{background:var(--s);border:1px solid var(--line);border-radius:4px;padding:70px 14px 14px;font-weight:600;font-size:15px}
.swatches small{display:block;font-weight:400;font-size:12px;opacity:.8}
@media (max-width:960px){.logo-grid{grid-template-columns:1fr 1fr}.swatches{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.logo-grid{grid-template-columns:1fr}.swatches{grid-template-columns:1fr 1fr}.logo{font-size:24px}}
.foot p{color:var(--graphite);margin-top:12px;max-width:300px}
.foot h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);font-weight:500;margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:8px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--corail)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:13.5px;color:var(--graphite)}

/* ---------- Crayon qui suit la lecture ---------- */
#trail{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:30;overflow:hidden}
#trail .nib{transform:rotate(24deg);animation:scribble 1.4s ease-in-out infinite}
@keyframes scribble{0%,100%{transform:rotate(20deg)}50%{transform:rotate(30deg) translate(1px,-2px)}}
#trail .seg{fill:none;stroke:var(--graphite);stroke-width:1.4;stroke-linecap:round}
#trail .s1{opacity:.6}#trail .s2{opacity:.32}#trail .s3{opacity:.12}

/* ---------- 404 ---------- */
.lost{min-height:70vh;display:grid;place-items:center;text-align:center}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .links{display:none}
  .menu-btn{display:inline-flex}
  .links.open{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:100%;left:0;right:0;height:calc(100svh - var(--header-h));overflow-y:auto;background:var(--paper);padding:40px 24px;gap:22px;font-family:var(--f-title);font-size:34px;animation:pageIn .3s ease}
  .links.open .rdv{font-family:var(--f-body);font-size:20px;margin-top:10px}
}
@media (max-width:960px){
  .offers{grid-template-columns:1fr 1fr}
  .gallery{columns:2}
  .steps{grid-template-columns:1fr 1fr;row-gap:50px}
  .steps>svg{display:none}
  .head{grid-template-columns:1fr;gap:6px}
  .ideas,.photos{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
  .rate{grid-template-columns:1fr;gap:6px}
}
@media (max-width:820px){
  .hero{min-height:auto;padding:36px 16px 90px}
  .hero-grid,.split,.booking{grid-template-columns:1fr;gap:64px}
  .frame{height:auto;width:calc(100% - 40px);max-width:400px}
  svg.ink.d2{right:-26px}svg.ink.d1{left:-22px}svg.ink.d3{left:-28px}
  .note{right:0}
  section{padding:80px 0}
  .price{grid-template-columns:1fr;padding:30px 26px}
}
@media (max-width:560px){
  .offers,.ideas,.photos{grid-template-columns:1fr}
  .gallery{columns:1}
  .videos{grid-template-columns:1fr;max-width:340px}
  .steps{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .stats{gap:40px}
  .cal{padding:24px 20px}
  .tldr{padding:24px 22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .draw *{stroke-dashoffset:0!important}
  .fade,.stagger>*,h1 .w{opacity:1!important;transform:none!important}
  h2 em::after{transform:rotate(-1deg)!important}
  #prints .print,.tree .trunk{opacity:1!important}
  .track{overflow-x:auto}
  .reel .slide[aria-hidden="true"],.car-pause{display:none}
}

/* ---------- Mode capture (images de la maquette) : tout affiché, rien en mouvement ---------- */
.capture *,.capture *::before,.capture *::after{animation:none!important;transition:none!important}
.capture body{animation:none}
.capture .hero{min-height:860px}
.capture h1 .w,.capture .fade,.capture .stagger>*{opacity:1!important;transform:none!important}
.capture .draw *{stroke-dashoffset:0!important}
.capture #prints .print,.capture .tree .trunk{opacity:1!important}
.capture #trail{display:none}
.capture{scroll-behavior:auto!important}
.capture.sans-entete header.site{display:none}

/* ---------------------------------------------------------------- réalisations (page par catégorie + bande de l'accueil) */
.slide{display:block;color:inherit;text-decoration:none}
.slide-img img,.slide-img video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.slide:hover .slide-img img,.slide:hover .slide-img video{transform:scale(1.04)}
.slide-img{position:relative}
.slide figcaption .t::after{content:" →";font-family:var(--f-hand);opacity:0;transition:opacity .3s}
.slide:hover figcaption .t::after,.slide:focus-visible figcaption .t::after{opacity:1}
.real-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;padding-top:4px;padding-bottom:6px}
.real-nav a{text-decoration:none;color:var(--graphite);font-size:16px;padding:2px 14px;background:linear-gradient(var(--c,var(--corail)),var(--c,var(--corail))) no-repeat center bottom/0 3px;transition:background-size .25s,color .25s}
.real-nav a+a{border-left:1px solid var(--line)}
.real-nav a:nth-child(4n+1){--c:var(--corail)}.real-nav a:nth-child(4n+2){--c:var(--lagon)}.real-nav a:nth-child(4n+3){--c:var(--mangue)}.real-nav a:nth-child(4n+4){--c:var(--pomme)}
.real-nav a:hover{color:var(--ink);background-size:calc(100% - 28px) 3px}

.real-cat{scroll-margin-top:90px}
.real-grid{columns:3;column-gap:28px}
.real-item{break-inside:avoid;margin:0 0 30px}
.real-open{display:block;position:relative;width:100%;padding:0;border:1px solid var(--line);background:var(--paper);cursor:zoom-in;overflow:hidden;box-shadow:10px 10px 0 color-mix(in srgb,var(--c) 45%,transparent);transition:transform .5s cubic-bezier(.3,1.5,.5,1),box-shadow .5s}
.real-item:nth-child(odd) .real-open{transform:rotate(-.6deg)}.real-item:nth-child(even) .real-open{transform:rotate(.6deg)}
.real-open:hover,.real-open:focus-visible{transform:rotate(0) translateY(-6px);box-shadow:14px 14px 0 color-mix(in srgb,var(--c) 65%,transparent)}
.real-open img,.real-open video{display:block;width:100%;height:auto}
.lecture{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;font-size:15px;border:1.5px solid var(--ink);pointer-events:none}
.real-item figcaption{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.real-item figcaption b{font-family:var(--f-title);font-weight:500;font-size:23px;line-height:1.15}
.real-item figcaption span{font-family:var(--f-hand);font-size:21px;color:var(--graphite)}
.real-lien{text-align:center;margin-top:18px}
#visionneuse{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:var(--paper)}
#visionneuse::backdrop{background:rgba(29,27,24,.9)}
#visionneuse[open]{display:grid;grid-template-columns:64px 1fr 64px;grid-template-rows:1fr auto;align-items:center;justify-items:center}
.v-media{grid-column:2;margin:0;max-width:100%;display:grid;place-items:center}
.v-media img,.v-media video{max-width:min(92vw,1100px);max-height:80vh;width:auto;height:auto;display:block;border:6px solid var(--paper);box-shadow:12px 12px 0 var(--corail)}
.v-legende{grid-column:1/-1;margin:0 0 28px;font-family:var(--f-hand);font-size:22px;text-align:center;padding:0 16px}
.v-legende b{font-family:var(--f-title);font-weight:500;font-size:24px;margin-right:6px}
#visionneuse button{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:50%;width:48px;height:48px;font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center}
#visionneuse button[hidden]{display:none}
.v-prec{grid-column:1;grid-row:1}.v-suiv{grid-column:3;grid-row:1}
#visionneuse .v-fermer{position:fixed;top:18px;right:18px;z-index:2}
@media (max-width:960px){.real-grid{columns:2}}
@media (max-width:560px){
  .real-grid{columns:1}
  .real-nav{justify-content:flex-start}
  #visionneuse[open]{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto}
  .v-media{grid-column:1/-1;grid-row:1}
  .v-media img,.v-media video{max-height:70vh}
  .v-prec{grid-column:1;grid-row:3;margin-bottom:24px}.v-suiv{grid-column:2;grid-row:3;margin-bottom:24px}
  .v-legende{grid-row:2;margin:16px 0}
}
@media (prefers-reduced-motion:reduce){.real-open,.real-nav a{transition:none}}
/* protection des oeuvres */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
img,video{-webkit-user-drag:none;pointer-events:auto}