/* Sections de la landing. Familles de mise en page : split asymétrique (hero), énoncé plein cadre,
   bento, colonne collante, portrait, accordéon, bandeau de clôture. */

/* hero : split asymétrique */
.hero{min-height:100dvh;display:flex;align-items:center;padding-top:96px;padding-bottom:48px;overflow:clip}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.2rem,4.3vw,3.6rem);line-height:1.04;letter-spacing:-.04em;max-width:15em}
.hero .sub{margin-top:24px;font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted);max-width:44ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-visual{position:relative;aspect-ratio:4/5;max-height:70dvh;width:100%;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(160deg,var(--surface),var(--petrol-soft));overflow:hidden}
.hero-visual canvas{position:absolute;inset:0;width:100%;height:100%}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wi{display:inline-block;will-change:transform}
@media (max-width:860px){
  .hero{min-height:auto;padding-top:104px}
  .hero .wrap{grid-template-columns:1fr}
  .hero-visual{aspect-ratio:16/10;max-height:none;order:2}
}

/* énoncé plein cadre */
.statement{border-top:1px solid var(--line)}
.statement p{font-size:clamp(1.6rem,3.6vw,3rem);line-height:1.18;letter-spacing:-.03em;font-weight:500;max-width:26em}
.statement .sw{display:inline}
.mono{font:500 13px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kicker{font:500 13px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--petrol);margin-bottom:22px}
.audience{margin-top:clamp(48px,7vw,88px);display:grid;grid-template-columns:minmax(0,.35fr) minmax(0,1fr);gap:20px;align-items:baseline;border-top:1px solid var(--line);padding-top:24px}
.statement .audience .mono{font-size:13px;line-height:1.2;letter-spacing:.08em;font-weight:500;max-width:none}
.audience ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 24px;font-size:17px;font-weight:500}
@media (max-width:860px){.audience{grid-template-columns:1fr}.audience ul{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* bento : 6 contenus, 6 cellules */
.bento-head{max-width:20em}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(210px,auto);gap:14px;margin-top:48px}
.cell{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;justify-content:flex-end;gap:10px;background:var(--surface);overflow:hidden}
.cell h3{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.15}
.cell p{color:var(--muted);font-size:16px;max-width:38ch}
.cell-a{grid-column:span 6;grid-row:span 2;background:radial-gradient(120% 90% at 100% 0%,var(--petrol-soft),transparent 62%),var(--surface)}
.cell-a::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 0 calc(100% - 1px),var(--line) 0) 0 0/100% 44px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 55%);mask-image:linear-gradient(to bottom,#000,transparent 55%)}
.cell>*{position:relative}
.cell-a h3{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.cell-b{grid-column:span 6}
.cell-c{grid-column:span 3;background:var(--accent-soft)}
.cell-c p{color:var(--ink);opacity:.8}
.cell-d{grid-column:span 3}
.cell-e,.cell-f{grid-column:span 6}
.cell .mono{color:var(--petrol)}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.cell-a{grid-column:span 2;grid-row:auto}.cell-a::before{display:none}.cell-b{grid-column:span 2}.cell-c,.cell-d,.cell-e,.cell-f{grid-column:span 1}}
@media (max-width:620px){.bento{grid-template-columns:1fr}.cell-a,.cell-b,.cell-c,.cell-d,.cell-e,.cell-f{grid-column:auto}}

/* méthode : colonne collante + rail */
.method .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,7vw,110px)}
.method .stick{position:sticky;top:120px;align-self:start}
.steps{position:relative;list-style:none;margin:0;padding:0 0 0 40px}
.rail{position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px}
.rail-fill{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(1);border-radius:2px}
.step{position:relative;padding-block:0 clamp(48px,8vw,96px);opacity:1}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:-40px;top:9px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--line);transition:border-color .4s,background-color .4s}
.step.is-on::before{border-color:var(--accent);background:var(--accent)}
.deliverables{margin-top:40px;border-top:1px solid var(--line);padding-top:20px}
.deliverables ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;font-weight:500}
.deliverables li{display:flex;gap:12px;align-items:baseline}
.deliverables li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--accent);transform:translateY(-1px)}
.step h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.step p{color:var(--muted);margin-top:10px;max-width:46ch}
@media (max-width:860px){.method .wrap{grid-template-columns:1fr}.method .stick{position:static}}

/* portrait */
.person .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,96px);align-items:center}
.portrait{aspect-ratio:4/5;border-radius:var(--r);border:1px solid var(--line);background:url("../img/portrait.jpg") center/cover,linear-gradient(160deg,var(--petrol-soft),var(--surface))}
.person h2{margin-bottom:6px}
.person .role{color:var(--petrol);font-weight:500;font-size:18px}
.person .bio{margin-top:22px;max-width:56ch;color:var(--muted)}
.person dl{margin:28px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;font-size:15.5px}
.person dt{color:var(--muted)}
.person dd{margin:0}
@media (min-width:861px){.person .wrap:not(:has(.portrait)){grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.person .wrap{grid-template-columns:1fr}.portrait{max-width:380px}}

/* accordéon */
.faq .wrap>*{max-width:780px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line);margin-top:40px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:24px;font-size:clamp(1.1rem,1.8vw,1.3rem);font-weight:500;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 28px/1 var(--font-sans);color:var(--petrol);transition:transform .35s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding-bottom:26px;color:var(--muted);max-width:62ch}

/* clôture */
.closing{border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,var(--petrol-soft))}
.closing .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px);align-items:start}
.closing h2{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.02;letter-spacing:-.04em;max-width:10em}
.closing .contact{margin-top:36px}
@media (max-width:900px){.closing .wrap{grid-template-columns:1fr}}
.form{display:grid;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3.4vw,40px)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.form .row{grid-template-columns:1fr}}
.form label{display:grid;gap:8px;font-size:15px;font-weight:500}
.form .opt{color:var(--muted);font-weight:400}
.form input,.form textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-height:48px;width:100%;transition:border-color .2s var(--ease)}
.form textarea{resize:vertical;min-height:132px}
.form input:hover,.form textarea:hover{border-color:color-mix(in srgb,var(--line) 50%,var(--petrol))}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.form [aria-invalid="true"]{border-color:var(--danger)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .note{font-size:14px;color:var(--muted)}
.form .send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.form button[disabled]{opacity:.6;cursor:progress}
.status{font-size:15px;margin:0}
.status.ok{color:var(--petrol)}
.status.err{color:var(--danger)}
.contact{display:flex;flex-wrap:wrap;gap:12px 40px;font-size:18px}
.contact span{color:var(--muted);display:block;font-size:14px}
.contact a{text-decoration:none;font-weight:500;user-select:all}
.contact a:hover{text-decoration:underline}

/* page légale */
.legal{padding-top:130px}
.legal h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:40px}
.legal h2{font-size:1.4rem;margin:44px 0 12px;letter-spacing:-.02em}
.legal p,.legal li{color:var(--muted);max-width:68ch}
.legal ul{padding-left:20px}