/* Maison Influ — maquette « ce qu'on dit de vous quand vous n'êtes pas là » */
:root{
  --creme:#F6F1E8; --creme2:#EDE5D6; --encre:#1D1B2E; --pierre:#5E586A; --filet:#DDD3C2;
  --bleu:#2340A8; --bleu-h:#1A3184; --rose:#E8467C; --rose-t:#C2185B; --nuit:#15141F;
  --serif:'Newsreader','Iowan Old Style',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,0,0,1);
  --m:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--creme);color:var(--encre);font-family:var(--sans);font-size:18px;line-height:1.55;padding-bottom:48px;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--bleu);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--encre);color:var(--creme);padding:10px 16px;z-index:200}
.skip:focus{left:8px}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--pierre)}
.label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--pierre)}
.src{font-size:14px;color:var(--pierre)}
.q{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.q .ouv{color:var(--rose)}

/* barre haute */
.top{position:fixed;inset:0 0 auto 0;height:64px;z-index:100;background:var(--creme);border-bottom:1px solid var(--filet);display:flex;align-items:center;justify-content:space-between;padding:0 var(--m)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--serif);font-weight:500;font-size:22px;color:var(--bleu);letter-spacing:-.01em}
.logo img{width:22px;height:30px}
.nav{display:flex;align-items:center;gap:28px;font-size:15px}
.nav a,.nav button.lk{background:none;border:0;font:inherit;color:var(--encre);text-decoration:none;cursor:pointer;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .12s}
.nav a:hover,.nav button.lk:hover{border-bottom:2px solid var(--rose)}
.nav a[aria-current="page"]{border-bottom:1px solid var(--encre)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:24px;background:var(--bleu);color:var(--creme);font:500 16px/1 var(--sans);text-decoration:none;border:0;cursor:pointer;transition:background .12s,transform .12s}
.btn:hover{background:var(--bleu-h)}
.btn:active{transform:scale(.98)}
.btn.small{min-height:40px;padding:0 20px;font-size:15px}
.btn.ghost{background:transparent;color:var(--encre);border:1px solid var(--pierre)}
.btn.ghost:hover{background:var(--creme2)}
.tl{font:500 16px/1.2 var(--sans);color:var(--bleu);text-decoration:none;border-bottom:1px solid var(--bleu);padding-bottom:2px;transition:border-width .12s;cursor:pointer}
.tl:hover{border-bottom:2px solid var(--rose)}
.nav a.btn{background:var(--bleu);color:var(--creme);border-bottom:0;padding:0 20px}
.nav a.btn:hover{background:var(--bleu-h);border-bottom:0}

/* panneau des voix */
.voix-panel{position:fixed;top:64px;left:0;right:0;background:var(--creme);border-bottom:1px solid var(--filet);z-index:90;padding:12px var(--m) 28px;display:none}
.voix-panel.open{display:block}
.voix-panel ul{list-style:none;max-width:900px;margin-left:auto}
.voix-panel a{display:grid;grid-template-columns:1.3fr 1.2fr auto;gap:20px;align-items:baseline;padding:14px 12px;border-bottom:1px solid var(--filet);text-decoration:none}
.voix-panel a:hover{background:var(--creme2);box-shadow:inset 3px 0 0 var(--bleu)}
.voix-panel .v{font-family:var(--serif);font-size:24px}
.voix-panel .s{font-size:15px;color:var(--pierre)}
.voix-panel .n{font-family:var(--mono);font-size:12px;color:var(--pierre)}

/* pied permanent */
.foot-fixed{position:fixed;inset:auto 0 0 0;height:48px;background:var(--creme);border-top:1px solid var(--filet);z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--m);font-size:14px;color:var(--pierre)}
.foot-fixed a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--pierre)}
.foot-fixed .r{display:flex;gap:22px;align-items:center}
.foot-fixed button{background:none;border:0;font:inherit;color:var(--encre);border-bottom:1px solid var(--pierre);cursor:pointer}

/* mobile thumb bar */
.thumb{display:none}

/* ===== ACCUEIL : scène sticky ===== */
.stage{position:relative;height:230vh}
.stage-in{position:sticky;top:0;height:100svh;padding:64px var(--m) 48px;display:grid;grid-template-columns:7fr 5fr;gap:40px}
.stage .txt{display:flex;flex-direction:column;justify-content:center;gap:22px;padding-right:20px}
.didas{min-height:1.5em;position:relative}
.didas span{position:absolute;left:0;top:0;transition:opacity .4s var(--ease)}
.didas .b{opacity:0}
.quote{font-size:88px;line-height:1.05;position:relative;min-height:2.2em}
.quote .g{display:inline-block;transition:transform .5s var(--ease)}
.quote .w{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:14em;margin-right:.22em;opacity:1;transition:opacity .18s var(--ease),max-width .4s var(--ease),margin .4s var(--ease);padding-bottom:.08em}
.quote .w.off{max-width:0;margin-right:0;opacity:0}
.quote .w-last{margin-right:0}
.stage .src{transition:opacity .4s}
.line1,.line2{font-size:20px;max-width:30em}
.line2{opacity:0;transition:opacity .5s var(--ease)}
.lines{display:grid}.line1,.line2{grid-area:1/1}
.line2 strong{font-weight:500}
.line2 span{display:block;margin-top:10px;color:var(--pierre);font-size:18px}
.timectl{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--pierre);border-radius:24px;overflow:hidden}
.seg button{font:500 15px/1 var(--sans);padding:13px 22px;background:transparent;border:0;cursor:pointer;color:var(--encre)}
.seg button[aria-pressed="true"]{background:var(--encre);color:var(--creme)}
.hint{font-size:14px;color:var(--pierre)}
.place{position:relative;border-radius:2px;overflow:hidden;background:var(--creme2);transition:filter .5s var(--ease);align-self:stretch;margin:16px 0}
.place svg{width:100%;height:100%}
.place .tag{position:absolute;left:12px;bottom:12px;background:#F6F1E8dd;padding:5px 9px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--pierre)}

/* sections plein écran */
.screen{min-height:100svh;padding:140px var(--m) 120px;display:flex;flex-direction:column;justify-content:center}
.inner{max-width:1240px;width:100%;margin:0 auto}
.s3 .cits{list-style:none;margin-top:36px}
.s3 .cits li{padding:30px 0;border-top:1px solid var(--filet)}
.s3 .cits li:last-child{border-bottom:1px solid var(--filet)}
.s3 .cits .q{font-size:46px;line-height:1.1}
.s3 .cits .src{margin-top:10px}
.fil{margin-top:44px}
.fil svg{width:100%;height:auto;overflow:visible}
.fil figcaption{margin-top:12px}
.fil .tt{font-family:var(--mono);font-size:12px;fill:var(--pierre)}
.s4{background:var(--creme)}
.s4 h2{font-size:56px;line-height:1.08;max-width:14em}
.voices{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;border-top:1px solid var(--filet)}
.vcard{display:grid;grid-template-columns:1fr;gap:4px;padding:24px 14px 24px 0;border-bottom:1px solid var(--filet);text-decoration:none;transition:background .15s,padding .25s var(--ease)}
.vcard:hover{background:var(--creme2);padding-left:14px;box-shadow:inset 3px 0 0 var(--bleu)}
.vcard .v{font-family:var(--serif);font-size:32px;line-height:1.1}
.vcard .s{font-size:15px;color:var(--pierre)}
.vcard .e{font-family:var(--serif);font-size:19px;color:var(--encre);margin-top:6px;font-style:italic}
.s4 .sous{margin-top:34px;font-size:19px}
.s5{background:var(--creme2)}
.s5 .qq{font-size:76px;line-height:1.08;position:relative;display:inline-block;margin-top:26px}
.s5 .qq{text-decoration:line-through;text-decoration-color:var(--rose);text-decoration-thickness:3px}
.travers-tag{display:inline-block;margin-left:14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--rose-t);border:1px solid var(--rose-t);padding:2px 8px;vertical-align:middle}
.s5 p.t{margin-top:30px;max-width:36em;font-size:20px}
.s5 .links{margin-top:30px;display:flex;gap:32px;flex-wrap:wrap}
.s6 .big{font-size:76px;line-height:1.06;max-width:12em}
.s6 p.t{margin-top:28px;max-width:34em;font-size:20px}
.quota{margin-top:26px;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.quota i{width:9px;height:9px;border-radius:50%;background:var(--rose);display:block}
.s6 .cta{margin-top:34px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.s6 .sec{margin-top:26px;display:flex;gap:28px;flex-wrap:wrap}

/* bandes */
.band{padding:110px var(--m);border-top:1px solid var(--filet)}
.band .q{font-size:44px;line-height:1.12;max-width:20em}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.person .ph{aspect-ratio:4/5;background:var(--creme2);position:relative;overflow:hidden}
.person .ph span{position:absolute;left:14px;bottom:10px;font-family:var(--serif);font-size:64px;color:#1D1B2E22;line-height:1}
.person .ph svg{width:100%;height:100%}
.person h3{font-family:var(--sans);font-weight:500;font-size:18px;margin-top:14px}
.person .role{font-size:14px;color:var(--pierre)}
.person .q{font-size:20px;line-height:1.25;margin-top:10px}
.footer{background:var(--nuit);color:var(--creme);padding:80px var(--m) 100px}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;max-width:1240px;margin:0 auto}
.footer h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:#A9A3B5;margin-bottom:14px}
.footer a{display:block;color:var(--creme);text-decoration:none;padding:4px 0;font-size:16px}
.footer a:hover{text-decoration:underline}
.footer .brand{font-family:var(--serif);font-size:28px;color:var(--creme)}
.footer .brand i{color:var(--rose);font-style:normal}
.footer p{color:#c9c4d6;font-size:15px;margin-top:10px;max-width:26em}
.footer .mini{max-width:1240px;margin:50px auto 0;font-size:13px;color:#A9A3B5;border-top:1px solid #ffffff22;padding-top:20px}

/* pages intérieures */
.page{padding:140px var(--m) 100px}
.page h1{font-family:var(--serif);font-weight:400;font-size:64px;line-height:1.06;max-width:15em;letter-spacing:-.01em}
.page .lead{margin-top:24px;font-size:21px;max-width:36em;color:var(--encre)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:48px 0;border-top:1px solid var(--filet);padding-top:28px;font-variant-numeric:tabular-nums}
.facts b{display:block;font-weight:400;font-size:40px;line-height:1.1}
.facts span{font-size:15px;color:var(--pierre)}
.col62{max-width:62ch}
.col62 h2{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.1;margin:70px 0 18px}
.col62 ol{margin-left:1.2em;margin-top:14px}
.col62 li{margin:8px 0;padding-left:6px}
.travers-box{background:var(--creme2);padding:46px var(--m);margin:70px calc(var(--m) * -1)}
.travers-box .in{max-width:900px;margin:0 auto;padding-left:max(0px,calc(var(--m) - 0px))}
.travers-box .q{font-size:52px;line-height:1.1;position:relative;display:inline-block}
.travers-box .q{text-decoration:line-through;text-decoration-color:var(--rose);text-decoration-thickness:2px}
table.t{border-collapse:collapse;margin-top:26px;width:100%;max-width:640px;font-variant-numeric:tabular-nums}
table.t th{font-weight:500;text-align:left;padding:12px 24px 12px 0;border-bottom:1px solid var(--filet);color:var(--pierre);font-size:14px;width:40%}
table.t td{padding:12px 0;border-bottom:1px solid var(--filet)}
.plist{list-style:none;margin-top:20px;border-top:1px solid var(--filet)}
.plist li{padding:22px 0;border-bottom:1px solid var(--filet)}
.plist .q{font-size:30px;line-height:1.15}
.plist .acts{margin-top:10px;display:flex;gap:22px;font-size:14px}
.plist .acts button{background:none;border:0;font:inherit;color:var(--bleu);border-bottom:1px solid var(--bleu);cursor:pointer}
.endcta{margin-top:90px;padding-top:50px;border-top:1px solid var(--filet)}
.endcta .q{font-size:56px;line-height:1.08;max-width:12em}
.endcta .btn{margin-top:30px}
.prices{list-style:none;margin-top:44px;border-top:1px solid var(--filet);max-width:960px}
.prices li{display:grid;grid-template-columns:1.5fr 1fr;gap:10px 40px;padding:26px 0;border-bottom:1px solid var(--filet);font-variant-numeric:tabular-nums}
.prices h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.15}
.prices .p{font-size:22px;font-weight:500;text-align:right}
.prices .why{grid-column:1/-1;font-size:15px;color:var(--pierre)}
.teamL{display:grid;grid-template-columns:1fr 1fr;gap:70px 60px;margin-top:56px;max-width:1100px}
.teamL .person .q{font-size:26px}
.teamL .ln{font-size:15px;margin-top:12px}
.teamL .ln b{font-weight:500}
.teamL .acts{margin-top:14px;display:flex;gap:22px}

/* écoute */
.ecoute-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;margin-top:40px;align-items:start}
.form{display:grid;gap:30px;max-width:560px}
.form label{display:grid;gap:8px;font-size:15px;font-weight:500}
.form input[type=text],.form input[type=email],.form input[type=tel]{height:52px;border:1px solid var(--pierre);background:#fff;padding:0 16px;font:400 18px var(--sans);color:var(--encre);border-radius:2px}
.form input:focus{outline:2px solid var(--bleu);outline-offset:0;border-color:var(--bleu)}
.form .err{color:var(--rose-t);font-size:14px;min-height:1.2em;font-weight:400}
.form .consent{display:flex;gap:12px;font-weight:400;font-size:15px;align-items:flex-start}
.form .consent input{margin-top:4px;width:20px;height:20px}
.toggle{display:inline-flex;margin-bottom:4px}
.aside{border-left:1px solid var(--filet);padding-left:40px}
.aside h2{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15}
.aside a{display:block;margin-top:18px}
.merci{display:none;background:var(--creme2);padding:40px;max-width:560px}
.merci.on{display:block}
.merci .q{font-size:34px;line-height:1.15}
.avatar{width:56px;height:56px;border-radius:50%;background:var(--bleu);color:var(--creme);display:inline-grid;place-items:center;font-family:var(--serif);font-size:24px;margin-bottom:18px}

/* relevé */
.releve{background:#fff;border:1px solid var(--filet);max-width:860px;margin:30px 0 0;padding:60px 64px}
.releve h1{font-size:40px}
.releve .hd{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--filet);padding-bottom:20px;margin-bottom:10px}
.rph{padding:30px 0;border-bottom:1px solid var(--filet)}
.rph .q{font-size:34px;line-height:1.15}
.rph .meta{margin-top:12px;display:flex;gap:14px;align-items:center;font-size:14px;color:var(--pierre);flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border:1px solid currentColor}
.chip.j{color:#1E6B3A}.chip.a{color:var(--bleu)}.chip.d{color:var(--rose-t)}
.rvide{padding:40px 0;text-align:center}
.rvide .q{font-size:96px;line-height:.9;color:var(--rose)}
.rvide p{margin-top:12px;font-size:17px;max-width:28em;margin-inline:auto}
.sign{margin-top:30px;font-family:'Caveat','Segoe Script',cursive;font-size:34px;color:var(--bleu)}

.toast{position:fixed;left:50%;bottom:70px;transform:translate(-50%,20px);background:var(--encre);color:var(--creme);padding:12px 20px;border-radius:2px;font-size:15px;opacity:0;pointer-events:none;transition:all .24s var(--ease);z-index:300}
.toast.on{opacity:1;transform:translate(-50%,0)}
dialog.clair{border:0;background:var(--creme);color:var(--encre);width:min(720px,92vw);max-height:86vh;padding:40px;overflow:auto}
dialog.clair::backdrop{background:#15141Fcc}
dialog.clair h2{font-family:var(--serif);font-weight:400;font-size:40px}
dialog.clair ul{list-style:none;margin-top:20px}
dialog.clair li a{display:block;padding:12px 0;border-bottom:1px solid var(--filet);text-decoration:none}
dialog.clair li a:hover{color:var(--bleu)}
dialog.clair .x{float:right;background:none;border:1px solid var(--pierre);padding:8px 14px;font:inherit;cursor:pointer}

/* ===== tablette / mobile ===== */
@media (max-width:1023px){
  :root{--m:40px}
  .nav a:not(.btn),.nav button.lk{display:none}
  .stage{height:auto}
  .stage-in{position:relative;height:auto;min-height:100svh;grid-template-columns:1fr;padding-top:96px}
  .quote{font-size:64px}
  .place{height:260px;margin:0}
  .voices{grid-template-columns:1fr}
  .team{grid-template-columns:1fr 1fr}
  .ecoute-grid{grid-template-columns:1fr;gap:50px}
  .aside{border-left:0;padding-left:0;border-top:1px solid var(--filet);padding-top:30px}
  .teamL{grid-template-columns:1fr}
}
@media (max-width:767px){
  :root{--m:20px}
  body{font-size:17px;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .top{height:56px}
  .nav .btn{display:none}
  .foot-fixed{display:none}
  .thumb{position:fixed;inset:auto 0 0 0;display:grid;grid-template-columns:repeat(4,1fr);background:var(--creme);border-top:1px solid var(--filet);z-index:120;padding-bottom:env(safe-area-inset-bottom)}
  .thumb a,.thumb button{display:grid;place-items:center;min-height:64px;font:500 14px var(--sans);text-decoration:none;color:var(--encre);background:none;border:0;cursor:pointer}
  .thumb .acc{color:var(--bleu);box-shadow:inset 0 3px 0 var(--rose)}
  .voix-panel{top:56px;bottom:64px;overflow:auto;padding-top:0}
  .voix-panel a{grid-template-columns:1fr;gap:2px}
  .quote{font-size:42px;min-height:0}
  .stage-in{padding-top:80px;gap:22px}
  .line1,.line2{font-size:18px}
  .screen{padding:90px var(--m) 70px;min-height:auto}
  .s3 .cits .q{font-size:30px}
  .s4 h2{font-size:38px}
  .vcard .v{font-size:28px}
  .s5 .qq{font-size:40px}
  .s6 .big{font-size:42px}
  .s6 .cta .btn{width:100%}
  .band .q{font-size:30px}
  .team{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr}
  .page{padding-top:100px}
  .page h1{font-size:40px}
  .facts{grid-template-columns:1fr;gap:20px}
  .travers-box .q{font-size:32px}
  .endcta .q{font-size:36px}
  .prices li{grid-template-columns:1fr}.prices .p{text-align:left}
  .releve{padding:30px 22px}
  .rph .q{font-size:26px}
  .rvide .q{font-size:64px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.12s!important;animation:none!important}
}