/* Mise en page des pages intérieures, sur les variables de la démo (ac.css). */
main.wrap{padding-top:36px;padding-bottom:40px}
.phero{padding:56px 0 36px}
.phero h1{max-width:18ch}
.phero .lead{max-width:640px;margin-top:6px}
.phero p:not(.lead){margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.btn.ghost{background:transparent;color:var(--txt);border:1.5px solid rgba(255,255,255,.28)}
.btn.ghost:hover{border-color:var(--y);color:var(--y)}
.prose{max-width:780px;margin:0 auto 64px}
.prose h2{margin:64px 0 18px;font-size:clamp(30px,4vw,48px)}
.prose h3{font-family:"Bricolage Grotesque","Bricolage F";font-size:24px;margin:34px 0 8px;letter-spacing:-.02em}
.prose h4{margin:22px 0 6px;color:var(--y)}
.prose p{color:#d8d3c8;margin:0 0 16px}
.prose ul{margin:0 0 20px;padding-left:0;list-style:none}
.prose li{position:relative;padding:8px 0 8px 28px;color:#d8d3c8;border-bottom:1px solid var(--line)}
.prose li:before{content:"";position:absolute;left:4px;top:18px;width:9px;height:9px;border-radius:50%;background:var(--y)}
.prose blockquote{border-left:4px solid var(--y);padding:6px 0 6px 22px;margin:32px 0;font-family:"Bricolage Grotesque","Bricolage F";font-size:clamp(22px,3vw,30px);line-height:1.2;letter-spacing:-.02em}
.prose figure{margin:28px 0;border-radius:20px;overflow:hidden;background:var(--card)}
.prose figure img{width:100%;height:auto}
.prose figcaption{color:var(--mute);font-size:14px;margin:-12px 0 20px}
.prose a{color:var(--y)}
.pill{display:inline-block;margin:0 8px 8px 0;padding:8px 16px;border-radius:999px;background:var(--card);color:var(--txt)!important;text-decoration:none;font-weight:600;font-size:14px;border:1px solid var(--line)}
.pill:hover{border-color:var(--y)}
.vid{position:relative;aspect-ratio:9/16;max-width:340px;margin:24px auto;border-radius:20px;overflow:hidden;background:#000}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:28px 0 64px}
.card{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;color:var(--txt);text-decoration:none;transition:transform .35s var(--ease),background .25s,border-color .25s}
.card:hover{transform:translateY(-4px);background:var(--card-hover);border-color:#444}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px}
.card h3{font-family:"Bricolage Grotesque","Bricolage F";font-size:22px;line-height:1.1;letter-spacing:-.02em}
.card p{color:var(--mute);font-size:15px}
.tag{align-self:flex-start;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#111;background:var(--y);border-radius:999px;padding:4px 12px}
.more{margin-top:auto;color:var(--y);font-weight:700;font-size:15px}
.card.big{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:28px;margin:12px 0 56px}
.gal{columns:3 260px;column-gap:18px;margin:12px 0 56px}
.gal figure{break-inside:avoid;margin:0 0 18px;border-radius:18px;overflow:hidden;background:var(--card)}
.gal img{width:100%;height:auto;transition:transform .6s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
.ctaf{margin:72px 0 40px;padding:56px 32px;border-radius:28px;background:var(--card);border:1px solid var(--line);text-align:center}
.ctaf h2{margin-bottom:16px}
.ctaf p{color:#cfcac0;margin:0 auto 22px;max-width:560px}
.cf{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:820px;margin:26px 0 12px}
.cf label{display:grid;gap:6px;font-weight:600;font-size:14px;color:var(--mute)}
.cf label:nth-last-child(2){grid-column:1/-1}
.cf input,.cf select,.cf textarea{background:#111;color:var(--txt);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;font-size:16px;min-height:48px}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:3px solid var(--y);outline-offset:2px}
.cf button{grid-column:1/-1;justify-self:start;opacity:.55;cursor:not-allowed}
.note{color:var(--mute);font-size:14px}.note a{color:var(--y)}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}.card.big{grid-template-columns:1fr}.cf{grid-template-columns:1fr}}
@media(max-width:600px){.cards{grid-template-columns:1fr}.phero{padding:36px 0 24px}.ctaf{padding:36px 20px}}