/* ==========================================================================
   Youmean — pages intérieures
   Complète site.css : hero de page, blocs texte/image, cartes, articles,
   listes, contact, pages légales.
   ========================================================================== */

/* ---------- Hero de page ---------- */
.phero{padding-block:clamp(44px,6vw,86px) clamp(28px,3.5vw,48px)}
.phero h1{
  max-width:20ch;
  font-size:clamp(34px,5.4vw,66px);font-weight:600;
  letter-spacing:-.038em;line-height:1.07;
}
.eyebrow{
  margin-bottom:14px;font-size:13px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
}
.eyebrow-under{margin:14px 0 0}
.back{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:18px;
  font-size:14.5px;font-weight:500;color:var(--ink-2);
}
.back:hover{color:var(--accent)}
.phero-lead{
  margin-top:20px;max-width:34ch;
  font-size:clamp(19px,2.3vw,27px);font-weight:500;
  letter-spacing:-.022em;line-height:1.28;
}
.phero-intro{
  margin-top:16px;max-width:66ch;
  font-size:clamp(16.5px,1.8vw,19px);color:var(--ink-2);
}
.phero-visual{
  margin-top:clamp(28px,4vw,46px);width:100%;
  aspect-ratio:16/8;object-fit:cover;border-radius:var(--radius-lg);
}

/* ---------- Bloc texte + image ---------- */
.split-in{
  display:grid;gap:clamp(26px,4vw,56px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.split-rev .split-img{order:-1}
.split-txt h2{
  font-size:clamp(24px,3.1vw,38px);font-weight:600;
  letter-spacing:-.03em;line-height:1.12;
}
.split-txt p{margin-top:14px;color:var(--ink-2);font-size:16.5px}
.split-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg)}
.split:nth-of-type(even){background:var(--bg-2)}

/* ---------- Texte courant ---------- */
.prose .wrap{max-width:820px}
.prose h2{
  margin-top:0;font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.028em;
}
/* espacement entre deux groupes de texte fusionnés dans la même section */
.prose .wrap > div + div{margin-top:clamp(30px,3.4vw,46px)}
.prose p{margin-top:14px;color:var(--ink-2);font-size:17px;line-height:1.68}
.prose ul{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.prose li{position:relative;padding-left:20px;color:var(--ink-2);font-size:17px;line-height:1.6}
.prose li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.inline-link{color:var(--accent);font-weight:500}
.inline-link:hover{text-decoration:underline}
.legal p,.legal li{font-size:16px}

/* ---------- Grille de cartes ---------- */
.cards-grid{
  display:grid;gap:20px;margin-top:clamp(30px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
}
.card{
  display:flex;flex-direction:column;gap:11px;
  padding:clamp(22px,2.6vw,30px);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.08);border-color:var(--accent)}
.card-img{overflow:hidden;border-radius:var(--radius);margin:-6px -6px 4px}
.card-img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card h3{font-size:19.5px;font-weight:600;letter-spacing:-.024em;line-height:1.25}
.card p{color:var(--ink-2);font-size:15px}
.card-more{margin-top:auto;padding-top:8px;color:var(--accent);font-size:14.5px;font-weight:500}

/* ---------- Points clés ---------- */
.features{background:var(--bg-2)}
.feat-grid{
  display:grid;gap:20px;margin-top:clamp(30px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.feat{padding:clamp(24px,2.8vw,32px);background:#fff;border-radius:var(--radius-lg)}
.feat-dot{display:block;width:26px;height:26px;border-radius:9px;background:var(--accent);opacity:.16}
.feat h3{margin-top:16px;font-size:19.5px;font-weight:600;letter-spacing:-.024em;line-height:1.25}
.feat p{margin-top:9px;color:var(--ink-2);font-size:15.5px}

/* ---------- Bandeau final ---------- */
.endcta{background:var(--ink);color:#fff}
.endcta-in{display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center}
.endcta h2{font-size:clamp(28px,4vw,48px);font-weight:600;letter-spacing:-.034em;line-height:1.1}
.endcta p{color:rgba(255,255,255,.7);max-width:46ch}
.endcta .btn{margin-top:8px}

/* ---------- Article & étude de cas ---------- */
.art-head{padding-top:clamp(40px,5.5vw,76px)}
.art-head h1{
  max-width:22ch;font-size:clamp(30px,4.6vw,56px);font-weight:600;
  letter-spacing:-.036em;line-height:1.08;
}
.art-meta{margin-top:14px;font-size:14.5px;color:var(--ink-3)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tags li{
  padding:5px 12px;border-radius:999px;background:var(--bg-2);
  font-size:12.5px;font-weight:500;color:var(--ink-2);
}
.art-cover{
  margin-top:clamp(26px,3.5vw,42px);width:100%;
  aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-lg);
}
.art-body{max-width:760px;padding-block:clamp(34px,4.5vw,58px)}
.art-body h2{
  margin-top:40px;font-size:clamp(21px,2.5vw,28px);font-weight:600;
  letter-spacing:-.028em;line-height:1.2;
}
.art-body h2:first-child{margin-top:0}
.art-body p{margin-top:16px;font-size:17.5px;line-height:1.72;color:#262626}
.art-body ul{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.art-body li{position:relative;padding-left:22px;font-size:17.5px;line-height:1.65;color:#262626}
.art-body li::before{
  content:"";position:absolute;left:3px;top:.66em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.art-body img{margin-top:26px;width:100%;border-radius:var(--radius);height:auto}
.art-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.more{background:var(--bg-2)}

/* ---------- Listes (blog, études de cas) ---------- */
.listing{padding-top:clamp(20px,2.5vw,32px)}
.list-grid{
  display:grid;gap:clamp(24px,3vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.list-card{display:flex;flex-direction:column;gap:12px}
.list-card .cas-img img{aspect-ratio:16/10}
.list-date{font-size:13.5px;color:var(--ink-3)}
.list-card h2{font-size:21px;font-weight:600;letter-spacing:-.026em;line-height:1.28}
.list-card:hover h2{color:var(--accent)}
.list-desc{font-size:15.5px;color:var(--ink-2);line-height:1.55}
.list-card .tags{margin-top:0}

/* ---------- Contact ---------- */
.contact-in{
  display:grid;gap:clamp(30px,4vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:start;
}
.contact-info{display:flex;flex-direction:column;gap:30px}
.info h2{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.info p{margin-top:7px;font-size:16.5px;color:var(--ink-2)}
.contact-form{
  display:flex;flex-direction:column;gap:17px;
  padding:clamp(26px,3vw,38px);background:var(--bg-2);border-radius:var(--radius-lg);
}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:14px;font-weight:500}
.opt{color:var(--ink-3);font-weight:400}
.field input,.field textarea{
  padding:12px 14px;border:1px solid #ddd;border-radius:12px;background:#fff;
  font:inherit;font-size:15.5px;color:var(--ink);
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:120px}
.field-check{display:flex;gap:11px;align-items:flex-start}
.field-check label{font-size:14px;color:var(--ink-2);line-height:1.5}
.field-check input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--accent)}
.contact-form .btn{align-self:flex-start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{font-size:14.5px}
.form-msg.ok{color:#1a7f37}
.form-msg.ko{color:#c0392b}

@media (max-width:640px){
  .split-rev .split-img{order:0}
  .contact-form .btn{align-self:stretch;justify-content:center}
}

/* ---------- Bandeau chiffres (panneau sombre) ----------
   Reprise du parti du site d'origine : les chiffres vivent dans un grand
   panneau noir, pas dans une boîte grise. */
.statband{padding-block:clamp(40px,5vw,72px)}
.statband-in{
  padding:clamp(34px,5vw,72px) clamp(26px,4vw,64px);
  background:var(--ink);color:#fff;border-radius:var(--radius-lg);
  text-align:center;
}
.statband-in h2{
  max-width:20ch;margin:0 auto;
  font-size:clamp(25px,3.4vw,42px);font-weight:600;
  letter-spacing:-.032em;line-height:1.1;
}
.statband-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(24px,4vw,56px);margin-top:clamp(32px,4.5vw,60px);
}
.statband-row .stat{display:flex;flex-direction:column;gap:6px}
.statband-row .stat-v{
  font-size:clamp(46px,7vw,92px);font-weight:600;
  letter-spacing:-.045em;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
}
.statband-row .stat-l{font-size:15px;color:rgba(255,255,255,.62)}
.statband-txt{
  max-width:60ch;margin:clamp(30px,4vw,48px) auto 0;
  color:rgba(255,255,255,.72);font-size:16.5px;
}

/* ---------- Liste à coches ---------- */
.ticks{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.ticks li{
  position:relative;padding-left:32px;
  color:var(--ink-2);font-size:16.5px;line-height:1.5;
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.15em;
  width:20px;height:20px;border-radius:7px;
  background:var(--accent);opacity:.14;
}
.ticks li::after{
  content:"";position:absolute;left:6px;top:.5em;
  width:8px;height:4px;border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);transform:rotate(-45deg);
}

/* ---------- Étapes (page Youmean) ---------- */
.engage-sec{background:var(--bg-2)}
.engage-sec .steps h3{
  margin-top:8px;font-size:19px;font-weight:600;letter-spacing:-.02em;
}
.engage-sec .steps p{margin-top:7px;font-size:14.5px;color:var(--ink-2)}

/* ---------- Encadré (mise en avant d'un point clé) ---------- */
.callout-sec{padding-block:clamp(10px,2vw,26px) clamp(52px,7vw,96px)}
.callout{
  max-width:820px;margin-inline:auto;
  padding:clamp(26px,3.4vw,42px);
  background:var(--bg-2);border-radius:var(--radius-lg);
  border-left:4px solid var(--accent);
}
.callout h2{
  font-size:clamp(19px,2.2vw,25px);font-weight:600;letter-spacing:-.025em;
}
.callout p{margin-top:12px;color:var(--ink-2);font-size:16.5px;line-height:1.65}
.callout-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  color:var(--accent);font-size:15px;font-weight:500;
}
.callout-link:hover{text-decoration:underline}