:root{--paper:#faf6ec;--ink:#292820;--green:#234337;--tan:#9c482d;--line:#d9cebb;--soft:#eee5d7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 system-ui,sans-serif}a{color:inherit}button,input,textarea{font:inherit}button{cursor:pointer}img{display:block;max-width:100%}[hidden]{display:none!important}h1,h2,h3,.wordmark{font-family:Georgia,serif;font-weight:500;line-height:1.04;margin:0}h1{font-size:clamp(2.6rem,5.7vw,5.7rem);letter-spacing:-.055em}h2{font-size:clamp(2.1rem,4.5vw,4.3rem);letter-spacing:-.045em}h3{font-size:1.55rem}em{display:block;color:var(--green);margin-top:.12em}header,footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem max(5vw,1rem);border-bottom:1px solid var(--line)}footer{border-top:1px solid var(--line);border-bottom:0;flex-wrap:wrap}.wordmark{font-size:clamp(1.15rem,2.6vw,1.65rem);text-decoration:none}nav{display:flex;gap:1.6rem;font-size:.88rem}nav a{text-decoration:none}.button,.secondary{display:inline-flex;align-items:center;min-height:46px;border:1px solid var(--green);background:var(--green);color:#fff9ec;padding:.65rem 1rem;border-radius:3px;text-decoration:none;font-weight:650;font-size:.9rem}.secondary{background:transparent;color:var(--green)}.textlink{font-size:.9rem;text-underline-offset:4px}.wrap{width:min(1120px,90%);margin:auto}.hero{display:grid;grid-template-columns:1.22fr 1fr;gap:5%;align-items:center;padding:3.2rem 0 4rem}.kicker{font-size:.72rem;letter-spacing:.16em;font-weight:750;color:var(--tan);margin:0 0 .85rem}.lede{max-width:39ch;margin:1.25rem 0 1.55rem}.hero-copy .textlink{display:inline-block;margin:.7rem 0 .7rem .65rem}.hero-art{margin:0;background:#d7b49b;padding:1.65rem 2rem .85rem;display:grid;justify-items:center;background:linear-gradient(132deg,#e6c9ad,#bd8e73)}.hero-art img{width:min(100%,325px);box-shadow:7px 11px 25px #452b2b55;transform:rotate(2deg)}figcaption{font-size:.69rem;letter-spacing:.12em;font-weight:700;margin-top:1rem}figcaption span{margin-right:.65rem}.gallery{background:var(--soft);padding:3.7rem 0}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.8rem}.cards article{background:var(--paper);border:1px solid var(--line);min-width:0;display:flex;flex-direction:column}.cards figure{margin:0;background:#e0d1be;padding:1rem;display:grid;place-items:center}.cards img{height:clamp(200px,32vw,395px);width:100%;object-fit:contain}.cardbody{padding:1rem;flex:1;display:flex;flex-direction:column;align-items:start}.cardbody p:not(.kicker){flex:1}.swap{min-height:44px;color:var(--green);border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;padding:0;text-align:left}.workshop,.faq{padding:3.7rem 0}.workshop ol{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;list-style:none;padding:0;margin:1.5rem 0}.workshop li{border-top:1px solid var(--line);padding-top:1rem}.workshop li span{display:block;color:var(--tan);font:italic 1.5rem Georgia;margin-bottom:.5rem}.faq{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:.65rem 0}summary{cursor:pointer;min-height:36px}.formpage{width:min(680px,90%);margin:3.5rem auto}.formpage h1{font-size:clamp(2.1rem,6vw,3.9rem);margin-bottom:1.2rem}.formpage label:not(.choices label){display:block;margin:1rem 0;font-weight:650}.formpage label small{font-weight:400}.formpage input:not([type=radio],[type=checkbox]),textarea{display:block;width:100%;margin-top:.35rem;padding:.6rem;background:#fffdf7;border:1px solid #928978;border-radius:3px;color:var(--ink)}textarea{resize:vertical}.choices{display:grid;gap:.65rem;border:0;padding:0;margin:0;min-width:0}.choices label{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.7rem;padding:1rem;border:1px solid var(--line);background:#fffaf1;cursor:pointer}.choices label:has(:checked){border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}.choices strong{display:block}.form-actions{display:flex;gap:.65rem;margin-top:1.25rem}.demo{font-size:.9rem;background:var(--soft);padding:1rem}.sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}#photo-preview{height:150px;object-fit:contain}#priorities>div{border-top:1px solid var(--line);padding:.35rem 0}#priorities p{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:700px){nav{display:none}.hero{grid-template-columns:1fr;gap:1.5rem;padding:2rem 0}.hero-art img{max-width:280px}.cards{grid-template-columns:1fr}.cards img{height:330px}.workshop ol{grid-template-columns:1fr}.gallery,.workshop,.faq{padding:2.5rem 0}header .button{padding:.5rem;font-size:.75rem}}

.seal{display:inline-grid;place-items:center;width:2.1em;height:2.1em;vertical-align:middle;border:3px double currentColor;border-radius:50%;font-size:.62em;letter-spacing:-.06em;color:var(--tan);margin-right:.25em}
.button{background:#a33928;border-color:#a33928;padding:.8rem 1.2rem}.button:hover{background:#82291d}.secondary:hover{background:var(--soft)}
.reveal{gap:.55rem}.reveal-stage{position:relative;width:min(100%,325px);aspect-ratio:1060/1484;background:#fbf8ef;box-shadow:7px 11px 25px #452b2b55;overflow:hidden}.reveal-stage img{width:100%;height:100%;object-fit:cover;transform:none;box-shadow:none;max-width:none}.reveal-stage .finished-art{position:absolute;inset:0;opacity:var(--reveal,0);object-fit:contain}.reveal figcaption{margin:0}.reveal .secondary{background:var(--paper)}.scroll-cue{font-size:.72rem}
.formpage:has(.plan-layout:not([hidden])){width:min(930px,90%)}.plan-layout{display:grid;grid-template-columns:1fr minmax(110px,.75fr) 1fr;gap:.85rem;align-items:start}.plan-layout figure{margin:0;text-align:center}.plan-layout figure img{aspect-ratio:3/4;object-fit:cover}.slot{padding:.65rem;border:1px solid var(--line);margin-bottom:.6rem;background:#fffaf1}.slot strong{color:var(--tan)}.slot label{font-size:.82rem}.slot textarea{font-size:.9rem}
@media(max-width:600px){.plan-layout{grid-template-columns:1fr 1fr}.plan-layout figure{grid-column:1/-1;grid-row:1}.plan-layout figure img{height:180px;margin:auto}.scroll-cue{display:none}}
@media(prefers-reduced-motion:reduce){.scroll-cue{display:none}}
.brand-icon{display:inline-block;width:2.1em;height:2.1em;object-fit:contain;vertical-align:middle;margin-right:.25em}.wordmark{white-space:nowrap}@media(max-width:370px){header .wordmark{white-space:normal}}

/* Identité bleu pétrole */
:root{--paper:#fff;--ink:#172d32;--green:#164850;--tan:#28616b;--line:#dce8e7;--soft:#eef6f4}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif}
header,footer{background:#fff}
header{padding-block:.85rem}
nav a{font-weight:650}
nav a:hover,.textlink:hover{color:#23626d}
.wordmark{font:800 clamp(1.12rem,2.3vw,1.6rem)/1.15 system-ui,sans-serif;letter-spacing:-.055em}
.brand-icon{width:2.45em;height:2.45em}
h1,h2,h3{font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:780;line-height:1.02;letter-spacing:-.06em;text-wrap:balance}
h1{font-size:clamp(2.55rem,5.15vw,5.1rem)}
h3{letter-spacing:-.045em}
em{font-style:normal;color:#195962;margin-top:.14em}
.button,.secondary{border-radius:999px;justify-content:center;transition:background-color .18s,color .18s;line-height:1.2}
.button{background:#155661;border-color:#155661;color:white;padding:.85rem 1.25rem}
.button:hover{background:#103f47;border-color:#103f47}
.secondary{background:#fff;border-color:#bfd7d7;color:#174d56}
.secondary:hover{background:#edf6f5}
:focus-visible{outline:3px solid #1b6b76;outline-offset:3px}
.hero{width:min(1240px,94%);padding:clamp(1.4rem,4.6vw,4.5rem);margin:1rem auto 0;background:#e8f4f1;border-radius:30px;grid-template-columns:1.06fr 1fr}
.kicker{font-size:.69rem;letter-spacing:.15em}
.lede{color:#40565a;font-size:clamp(1rem,1.6vw,1.16rem)}
.hero-art{background:#ffded6;border-radius:22px;padding:1.4rem 1rem 1rem}
.reveal-stage{border-radius:7px;box-shadow:0 14px 28px #244c5730}
.reveal .secondary{background:#fff}
.promise-strip{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(.55rem,4vw,3rem);width:min(1120px,90%);margin:0 auto;padding:1.15rem 0;color:#335e65;font-size:.83rem;font-weight:750}
.gallery{background:#f7faf9}
.cards{gap:1.25rem}
.cards article{border-radius:20px;overflow:hidden}
.cards figure{background:#dcefeb}
.cards article:nth-child(2) figure{background:#ffe2da}
.cards article:nth-child(3) figure{background:#f5ebc9}
.cards img{filter:drop-shadow(0 7px 11px #253f4023)}
.cardbody{padding:1.2rem}
.swap{color:#155661;font-weight:700}
.workshop li span{font:750 1rem system-ui,sans-serif;background:#e0f1ee;border-radius:50%;width:2.45rem;height:2.45rem;display:grid;place-items:center}
.formpage{background:#f3f9f7;border-radius:24px;padding:clamp(1rem,4vw,2.25rem);margin-block:2rem}
.choices label,.slot{background:#fff;border-color:#d5e6e3;border-radius:12px}
.choices label:has(:checked){background:#e2f2ee;border-color:#155661;box-shadow:inset 0 0 0 1px #155661}
.formpage input:not([type=radio],[type=checkbox]),textarea{background:#fff;border-color:#829b9c;border-radius:9px}
.demo{border-radius:12px}
@media(max-width:700px){.hero{grid-template-columns:1fr;border-radius:20px;gap:1rem}.hero-art{border-radius:14px}.promise-strip{justify-content:space-around;font-size:.72rem}.cards img{height:min(330px,78vw)}header .button{padding:.65rem .75rem}.formpage{margin-block:1rem}}
@media(prefers-reduced-motion:reduce){.button,.secondary{transition:none}}

.gallery-tools{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.4rem}
.gallery-tools p{font-size:.9rem;margin:0;color:#40565a}
.gallery-buttons{display:flex;gap:.45rem}
.gallery-buttons button{min-width:46px;padding:.5rem;font-size:1.2rem}
.gallery-buttons button:disabled{opacity:.42;cursor:default}
#gallery-track{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 2.5rem)/3);overflow-x:auto;scroll-snap-type:x mandatory;margin-top:.9rem;padding-bottom:.8rem}
#gallery-track article{scroll-snap-align:start}
@media(max-width:850px){#gallery-track{grid-auto-columns:calc((100% - 1.25rem)/2)}}
@media(max-width:600px){#gallery-track{grid-auto-columns:86%;gap:.8rem}}

.prompt{border:1px solid var(--line);border-radius:12px;background:#fff;padding:.65rem .9rem;margin:.55rem 0}
.prompt summary{font-weight:700;min-height:32px}
.prompt .starter{font-size:.8rem;margin-bottom:.45rem}
#extra{margin-top:.5rem}

.gallery-cta{margin-top:1rem}

.formpage h1[tabindex="-1"]:focus{outline:none}
.photo-box{margin:1rem 0;padding:.85rem;border:1px dashed #829b9c;border-radius:12px;background:#fff}
.photo-box label{margin:0 0 .45rem!important}
.photo-box input[type=file]{margin:0;font-size:.9rem;font-weight:400}
.photo-box input::file-selector-button{font:inherit;border:0;border-radius:999px;padding:.45rem .65rem;margin-right:.5rem;color:#155661;background:#e2f2ee;cursor:pointer}
.photo-box p{margin:.5rem 0 0;font-size:.85rem;color:#40565a}
.photo-box img{margin-top:.65rem}
#plan-photo-empty{display:grid;place-items:center;min-height:110px;margin:0;background:#e2f2ee;border-radius:12px;padding:.7rem}

.question-example{display:block;margin:.24rem 0 .4rem;color:#40565a;line-height:1.4}
.formpage .question textarea,.formpage textarea[name=anecdote],.formpage textarea[name=bandeDetail]{font-weight:400}
.formpage textarea::placeholder{color:#52676b;opacity:1}

.question-example{white-space:pre-line}

/* En-tête lisible dans un panneau étroit et sur mobile. */
header .wordmark{display:inline-flex;align-items:center;gap:.35rem;min-width:0;white-space:normal}
header .brand-icon{flex:none;margin:0}
header>.button,header>.textlink{flex:none}
@media(max-width:420px){
  header{gap:.55rem;flex-wrap:wrap}
  header .wordmark{flex:1 1 9rem}
  header .brand-icon{width:1.9em;height:1.9em}
}

.reveal-stage .finished-art{opacity:1;clip-path:inset(0 calc(100% - var(--reveal-edge,0%)) 0 0)}
.reveal-star{position:absolute;z-index:1;top:50%;left:var(--reveal-edge,0%);width:60px;height:60px;transform:translate(-74%,-50%);opacity:var(--star-opacity,0);background:url("images/logo-etoile-filante.svg") center/contain no-repeat;filter:drop-shadow(0 0 6px #fff7e7);pointer-events:none}
@media(prefers-reduced-motion:reduce){.reveal-star{display:none}}
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1rem}.offer-grid article{padding:1.25rem;border:1px solid var(--line);border-radius:18px;background:var(--soft)}.formpage select{display:block;width:100%;margin-top:.35rem;padding:.65rem;border:1px solid #829b9c;border-radius:9px;background:#fff;color:var(--ink);font:inherit}

#gallery-track figure{position:relative;overflow:hidden}
#gallery-track figure img{grid-area:1/1}
#gallery-track figure img:first-child{z-index:1}
#gallery-track figure .reveal-star{z-index:2;width:52px;height:52px}
.offer-grid img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border-radius:12px;margin-bottom:1rem}

.atelier-confirmation {
  box-sizing: border-box;
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: 0;
  border-radius: 1.5rem;
  background: #fff9ef;
  color: #162d32;
  text-align: center;
  box-shadow: 0 1.5rem 4rem #102b3340;
}
.atelier-confirmation::backdrop { background: #102b3370; }
.atelier-confirmation h2 { margin: .5rem 0 1rem; font-size: clamp(1.6rem, 5vw, 2.25rem); }
.atelier-confirmation .button { margin-top: .75rem; }
.atelier-confirmation[open] img { animation: atelier-star .65s ease-out both; }
@keyframes atelier-star {
  from { opacity: 0; transform: translate(-2.5rem, 1rem) rotate(-12deg); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .atelier-confirmation { margin: auto auto 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .atelier-confirmation[open] img { animation: none; }
}
