/* ============================================================
   Taski — feuille de style complète
   ============================================================ */

:root{
  /* palette */
  --bg:#ffffff;
  --surface:#f8fafd;
  --ink:#061b31;
  --muted:#50617a;
  --accent:#533afd;
  --accent2:#b9b9f9;
  --hair:#e5edf5;
  --coral:#ff6a5e;
  --amber:#ffb545;
  --white:#ffffff;
  --ink-08:rgba(6,27,49,.08);
  --ink-04:rgba(6,27,49,.04);
  --scrim:rgba(255,255,255,.92);

  /* le ruban — objet unique */
  --ruban:linear-gradient(18deg,var(--accent) 0%,#7b3af0 34%,var(--coral) 72%,var(--amber) 100%);
  --ruban-retourne:linear-gradient(198deg,var(--accent) 0%,#7b3af0 34%,var(--coral) 72%,var(--amber) 100%);

  /* typographie */
  --font-display:"Sora",system-ui,sans-serif;
  --font-body:"Sora",system-ui,sans-serif;
  --font-utility:"Fragment Mono",ui-monospace,monospace;

  --step--1:0.75rem;
  --step-0:0.875rem;
  --step-1:1.125rem;
  --step-2:1.5rem;
  --step-3:2rem;
  --step-4:2.625rem;
  --step-5:3.5rem;
  --step-6:7.6875rem; /* 56 × 2.2 = 123px */

  /* espace, base 4px */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;

  --section-pad:var(--space-8);
  --measure:62ch;
  --radius:6px;

  --shadow-1:rgba(50,50,93,.12) 0 16px 32px;
  --shadow-2:rgba(0,0,0,.2) 0 0 32px 8px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-1:0.5s;
  --dur-2:0.9s;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.4;
  font-weight:400;
  overflow-x:hidden;
}

img{max-inline-size:100%;block-size:auto;display:block}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:300;
  letter-spacing:-0.03em;
  line-height:1.07;
  margin:0;
}

h3{font-size:var(--step-1);line-height:1.25;letter-spacing:-0.01em}

p{margin:0}

a{color:var(--ink);text-decoration:none;transition:color var(--dur-1) var(--ease)}
a:hover{color:var(--accent)}

.wrap{
  inline-size:min(100% - var(--space-6),1240px);
  margin-inline:auto;
}

section{padding-block:var(--section-pad)}

.eyebrow{
  font-family:var(--font-utility);
  font-size:var(--step--1);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}

.section-title{
  font-size:clamp(1.75rem,4.4vw,var(--step-4));
}

.section-sub{
  color:var(--muted);
  max-inline-size:var(--measure);
  margin-block-start:var(--space-3);
}

.hair{block-size:1px;background:var(--hair);border:0;margin:0}

/* ---------- boutons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:24px;
  padding:15px 24px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.btn-fill{background:var(--accent);color:var(--white)}
.btn-fill:hover{color:var(--white);box-shadow:var(--shadow-1);transform:translateY(-3px)}
.btn-outline{border-color:var(--accent2);color:var(--accent);background:transparent}
.btn-outline:hover{background:var(--accent2);color:var(--ink)}
.btn-ghost{background:none;color:var(--ink);padding-inline:0}

/* ---------- placeholders photo ---------- */
.ph{
  inline-size:100%;
  border-radius:var(--radius);
  background:
    linear-gradient(122deg,rgba(83,58,253,.20),rgba(255,106,94,.16) 58%,rgba(255,181,69,.20)),
    repeating-linear-gradient(18deg,var(--ink-04) 0 14px,transparent 14px 28px),
    var(--surface);
  border:1px solid var(--hair);
  position:relative;
  overflow:hidden;
}
.ph::after{
  content:"";
  position:absolute;
  inset-block-start:14%;
  inset-inline-start:-10%;
  inline-size:56%;
  block-size:72%;
  background:var(--ruban);
  opacity:.22;
  filter:blur(26px);
}

/* ============================================================
   HEADER
   ============================================================ */
.bar{
  position:sticky;
  inset-block-start:0;
  z-index:40;
  background:var(--scrim);
  backdrop-filter:saturate(150%) blur(8px);
  border-block-end:1px solid var(--hair);
}
.bar-in{
  display:flex;
  align-items:center;
  gap:var(--space-5);
  padding-block:var(--space-3);
}
.logo{display:inline-flex;align-items:center;gap:var(--space-2)}
.logo-word{
  font-family:var(--font-display);
  font-weight:300;
  font-size:var(--step-2);
  letter-spacing:-0.04em;
}
.logo::before{
  content:"";
  inline-size:18px;block-size:18px;
  border-radius:var(--radius);
  background:var(--ruban);
}
.bar-nav{
  margin-inline-start:auto;
  display:flex;
  gap:var(--space-5);
  align-items:center;
}
.bar-nav a{color:var(--muted);font-size:var(--step-0)}
.bar-actions{display:flex;align-items:center;gap:var(--space-3)}
.nav-lang{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-family:var(--font-utility);
  font-size:var(--step--1);
}
.nav-lang a{color:var(--muted)}
.bar-cta{
  background:var(--accent);
  color:var(--white);
  border-radius:var(--radius);
  padding:11px 18px;
  font-size:var(--step-0);
}
.bar-cta:hover{color:var(--white)}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:var(--space-1);
  background:none;
  border:0;
  padding:var(--space-2);
  cursor:pointer;
}
.nav-toggle span{
  display:block;inline-size:22px;block-size:2px;background:var(--ink);border-radius:2px;
}

@media (max-width:768px){
  .bar-nav{
    display:none;
    position:absolute;
    inset-inline:0;
    inset-block-start:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-4);
    background:var(--bg);
    border-block-end:1px solid var(--hair);
    padding:var(--space-5) var(--space-4);
  }
  .nav-open .bar-nav{display:flex}
  .nav-toggle{display:flex}
  .bar-actions{margin-inline-start:auto}
  .nav-lang{order:2}
}

/* ============================================================
   HERO — le ruban
   ============================================================ */
.hero{
  position:relative;
  padding-block:0 0;
  overflow:visible;
}
.hero-ribbon{
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  block-size:88vh;
  min-block-size:560px;
  background:var(--ruban);
  z-index:0;
}
.hero-ribbon::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(18deg,rgba(255,255,255,.06) 0 2px,transparent 2px 46px);
}
.hero-in{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--space-5);
  padding-block:clamp(var(--space-8),11vh,140px) 0;
}
.hero-copy{
  grid-column:span 7;
  align-self:start;
  background:var(--scrim);
  border-radius:var(--radius);
  padding:var(--space-6);
  box-shadow:var(--shadow-1);
}
.hero-eyebrow{
  font-family:var(--font-utility);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.hero h1{
  font-size:clamp(2.4rem,8.6vw,var(--step-6));
  line-height:1.07;
  letter-spacing:-0.03em;
  margin-block:var(--space-4) var(--space-4);
}
.hero-sub{
  color:var(--muted);
  font-size:var(--step-1);
  line-height:1.45;
  max-inline-size:46ch;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-block-start:var(--space-6);
}
.hero-shot{
  grid-column:6 / -1;
  grid-row:1;
  align-self:end;
  margin-block-end:-120px;
  margin-inline-end:calc(var(--space-9) * -1);
  z-index:2;
}
.frame{
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:var(--white);
  padding:0 0 var(--space-1);
  box-shadow:var(--shadow-2);
  overflow:hidden;
}
.frame-bar{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-3);
  border-block-end:1px solid var(--hair);
}
.frame-dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--accent2)}
.frame-url{
  font-family:var(--font-utility);
  font-size:var(--step--1);
  color:var(--muted);
  margin-inline-start:var(--space-3);
}
.hero-spacer{block-size:150px}

@media (max-width:900px){
  .hero-copy{grid-column:1 / -1}
  .hero-shot{grid-column:1 / -1;grid-row:2;margin-inline-end:0;margin-block:var(--space-6) -60px}
  .hero-ribbon{block-size:72vh}
  .hero-spacer{block-size:90px}
}

/* ============================================================
   QUOTIDIEN — bande de frictions
   ============================================================ */
.quotidien-head{max-inline-size:var(--measure)}
.frictions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-block-start:var(--space-7);
  border-block-start:1px solid var(--hair);
}
.friction{
  padding:var(--space-5) var(--space-5) var(--space-5) 0;
  border-inline-start:1px solid var(--hair);
  padding-inline-start:var(--space-5);
}
.friction:first-child{border-inline-start:0;padding-inline-start:0}
.friction-icon{
  inline-size:24px;block-size:24px;
  border:1.5px solid var(--accent);
  border-radius:2px;
  position:relative;
  margin-block-end:var(--space-4);
}
.friction-icon::before{
  content:"";position:absolute;inset-block-start:6px;inset-inline-start:5px;
  inline-size:11px;block-size:1.5px;background:var(--accent);
  box-shadow:0 5px 0 var(--accent),0 10px 0 var(--accent2);
}
.friction-title{font-size:var(--step-1);line-height:1.25;font-family:var(--font-display);font-weight:300}
.friction-text{color:var(--muted);margin-block-start:var(--space-2)}

/* ============================================================
   PRODUIT — alternance
   ============================================================ */
.produit{background:var(--surface)}
.produit-head{max-inline-size:var(--measure);margin-block-end:var(--space-7)}
.pblock{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--space-6);
  align-items:center;
  padding-block:var(--space-8);
  border-block-start:1px solid var(--hair);
}
.pblock-text{grid-column:span 4}
.pblock-media{grid-column:span 7;grid-column-end:-1;position:relative}
.pblock-alt .pblock-text{grid-column:9 / -1;order:2}
.pblock-alt .pblock-media{grid-column:1 / span 7;order:1}
.wisp{
  position:absolute;
  inset:8% -6% -12% -6%;
  background:var(--ruban);
  filter:blur(48px);
  opacity:.35;
  border-radius:50%;
  z-index:0;
}
.pblock-media .frame{position:relative;z-index:1}
.pblock-title{font-size:var(--step-2);font-family:var(--font-display);font-weight:300;letter-spacing:-0.02em}
.pblock-text p{color:var(--muted);margin-block-start:var(--space-3)}
.pblock-tag{
  font-family:var(--font-utility);
  font-size:var(--step--1);
  color:var(--accent);
  display:block;
  margin-block-end:var(--space-3);
}
@media (max-width:860px){
  .pblock-text,.pblock-media,.pblock-alt .pblock-text,.pblock-alt .pblock-media{grid-column:1 / -1;order:initial}
}

/* ============================================================
   MOBILE — téléphone débordant
   ============================================================ */
.mobile{position:relative;overflow:hidden}
.mobile-in{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--space-6);
  align-items:center;
}
.mobile-media{
  grid-column:1 / span 5;
  position:relative;
  margin-inline-start:calc(var(--space-9) * -1);
}
.mobile-wisp{
  position:absolute;
  inset:-8% 12% -8% -20%;
  background:var(--ruban);
  filter:blur(56px);
  opacity:.32;
  border-radius:50%;
}
.phone{
  position:relative;
  inline-size:min(280px,80%);
  margin-inline-start:auto;
  border:1px solid var(--hair);
  border-radius:28px;
  background:var(--white);
  padding:var(--space-3);
  box-shadow:var(--shadow-2);
}
.phone-screen{
  border-radius:20px;
  background:var(--surface);
  padding:var(--space-4);
  min-block-size:400px;
  display:grid;
  gap:var(--space-2);
  align-content:start;
}
.phone-top{
  font-family:var(--font-utility);
  font-size:var(--step--1);
  color:var(--muted);
  display:flex;justify-content:space-between;
  margin-block-end:var(--space-2);
}
.phone-h{font-family:var(--font-display);font-weight:300;font-size:var(--step-1);letter-spacing:-0.02em}
.phone-row{
  display:flex;align-items:center;gap:var(--space-2);
  background:var(--white);
  border-radius:var(--radius);
  padding:var(--space-3);
  font-size:var(--step--1);
  color:var(--ink);
}
.phone-check{
  inline-size:14px;block-size:14px;border-radius:3px;
  border:1.5px solid var(--accent2);flex:none;
}
.phone-check-on{background:var(--accent);border-color:var(--accent)}
.phone-bars{display:flex;align-items:flex-end;gap:var(--space-1);block-size:56px;margin-block-start:var(--space-3)}
.phone-bars i{flex:1;background:var(--accent2);border-radius:2px}
.phone-bars i:nth-child(2){background:var(--accent)}
.phone-bars i:nth-child(4){background:var(--accent)}
.mobile-copy{grid-column:7 / -1}
.mobile-list{list-style:none;margin:var(--space-6) 0 0;padding:0}
.mobile-list li{
  padding-block:var(--space-4);
  border-block-start:1px solid var(--hair);
  color:var(--muted);
}
.mobile-list b{display:block;color:var(--ink);font-weight:500;margin-block-end:var(--space-1)}
@media (max-width:860px){
  .mobile-media{grid-column:1 / -1;margin-inline-start:0}
  .phone{margin-inline:auto}
  .mobile-copy{grid-column:1 / -1}
}

/* ============================================================
   DEMARRAGE — escalier
   ============================================================ */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-5);
  margin-block-start:var(--space-7);
}
.step{position:relative;padding-block-start:var(--space-5);border-block-start:1px solid var(--accent2)}
.step:nth-child(2){margin-block-start:var(--space-6)}
.step:nth-child(3){margin-block-start:calc(var(--space-6) * 2)}
.step:nth-child(4){margin-block-start:calc(var(--space-6) * 3)}
.step-n{font-family:var(--font-utility);font-size:13px;color:var(--accent)}
.step-title{font-family:var(--font-display);font-weight:300;font-size:var(--step-1);line-height:1.25;margin-block:var(--space-3) var(--space-2)}
.step-text{color:var(--muted)}
@media (max-width:640px){
  .step:nth-child(n){margin-block-start:0}
}

/* ============================================================
   METIERS — quinconce
   ============================================================ */
.metiers{background:var(--surface)}
.metiers-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-5);
  margin-block-start:var(--space-7);
  align-items:start;
}
.metier{
  background:var(--white);
  border-radius:var(--radius);
  padding:var(--space-3);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.metier:nth-child(even){margin-block-start:var(--space-5)}
.metier:hover{transform:translateY(-3px);box-shadow:var(--shadow-1)}
.metier-tag{font-family:var(--font-utility);font-size:var(--step--1);color:var(--accent)}
.metier-title{font-family:var(--font-display);font-weight:300;font-size:var(--step-1);margin-block:var(--space-2)}
.metier-text{color:var(--muted)}

/* ============================================================
   TARIFS
   ============================================================ */
.tarifs-head{max-inline-size:var(--measure)}
.plans{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-5);
  margin-block-start:var(--space-7);
  align-items:start;
}
.plan{
  border-radius:var(--radius);
  padding:var(--space-5);
  background:var(--surface);
}
.plan-mid{
  margin-block-start:-32px;
  background:var(--white);
  box-shadow:var(--shadow-2);
}
.plan-name{font-family:var(--font-utility);font-size:var(--step--1);color:var(--accent);text-transform:uppercase;letter-spacing:.12em}
.plan-price{
  font-family:var(--font-display);
  font-weight:300;
  font-size:var(--step-5);
  letter-spacing:-0.03em;
  line-height:1.07;
  margin-block:var(--space-4) var(--space-1);
}
.plan-unit{color:var(--muted);font-size:var(--step--1);font-family:var(--font-utility)}
.plan-list{list-style:none;margin:var(--space-5) 0 var(--space-5);padding:0}
.plan-list li{
  padding-block:var(--space-3);
  border-block-start:1px solid var(--hair);
  color:var(--muted);
}
.plan-note{
  font-family:var(--font-utility);
  font-size:var(--step--1);
  color:var(--muted);
  margin-block-start:var(--space-5);
  text-align:start;
}
@media (max-width:760px){.plan-mid{margin-block-start:0}}

/* ============================================================
   QUESTIONS
   ============================================================ */
.faq{
  max-inline-size:min(100%,760px);
  margin-block-start:var(--space-6);
  margin-inline-end:auto;
}
.qa{border-block-end:1px solid var(--hair)}
.qa summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:var(--space-4);
  padding-block:var(--space-5);
  font-size:var(--step-1);
  line-height:1.25;
}
.qa summary::-webkit-details-marker{display:none}
.qa-chevron{
  margin-inline-start:auto;
  inline-size:10px;block-size:10px;
  border-inline-end:1.5px solid var(--accent);
  border-block-end:1.5px solid var(--accent);
  transform:rotate(45deg);
  transition:transform var(--dur-1) var(--ease);
  flex:none;
}
.qa[open] .qa-chevron{transform:rotate(225deg)}
.qa-body{color:var(--muted);padding-block-end:var(--space-5);max-inline-size:var(--measure)}

/* ============================================================
   CONTACT — le ruban retourné en filigrane
   ============================================================ */
.contact{position:relative;overflow:hidden}
.contact::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ruban-retourne);
  opacity:.12;
}
.contact-in{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--space-6);
  align-items:start;
}
.contact-copy{grid-column:span 5}
.contact-copy h2{font-size:clamp(1.9rem,4.6vw,var(--step-4))}
.contact-copy p{color:var(--muted);margin-block-start:var(--space-4);max-inline-size:44ch}
.contact-panel{
  grid-column:7 / -1;
  background:var(--white);
  border-radius:var(--radius);
  padding:var(--space-6);
  box-shadow:var(--shadow-1);
}
@media (max-width:860px){
  .contact-copy,.contact-panel{grid-column:1 / -1}
}
.lead-form{display:grid;gap:var(--space-2)}
.lead-form input,.lead-form textarea{
  font-family:var(--font-body);
  font-size:var(--step-0);
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:13px var(--space-4);
  inline-size:100%;
}
.lead-form textarea{resize:vertical}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:var(--muted)}
.lead-form input:focus,.lead-form textarea:focus{outline:2px solid var(--accent2);border-color:var(--accent)}
.lead-form button{
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:24px;
  padding:15px 24px;
  border:0;
  border-radius:var(--radius);
  background:var(--accent);
  color:var(--white);
  cursor:pointer;
  inline-size:100%;
  margin-block-start:var(--space-2);
  transition:box-shadow .18s var(--ease),transform .18s var(--ease);
}
.lead-form button:hover{transform:translateY(-3px);box-shadow:var(--shadow-1)}
.lead-done{
  font-family:var(--font-utility);
  font-size:var(--step--1);
  color:var(--accent);
  margin-block-start:var(--space-2);
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-block-start:1px solid var(--hair);padding-block:var(--space-7)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;align-items:baseline}
.foot-line{color:var(--muted);max-inline-size:52ch}
.foot-note{font-family:var(--font-utility);font-size:var(--step--1);color:var(--muted)}


@media (prefers-reduced-motion: reduce){[data-motion]{opacity:1;transform:none}}