/* =====================================================================
   LE LABO — home.css  (page d'accueil, calée AU PIXEL sur la frame Figma)
   Frame de référence : 1440px de large. Marges réelles :
     - navbar / footer : 66px      -> contenu 1308px
     - sections (texte): 138px     -> contenu 1164px
     - bandes arrondies: ~98px     -> 1243px, padding interne gauche ~119px
   Toutes les valeurs ci-dessous viennent du JSON des specs Figma.
   ===================================================================== */

/* (Variables --w-* et --shadow-soft définies dans style.css, dispo partout) */

/* conteneurs largeur de contenu */
.wrap-sec { max-width: var(--w-sec); margin-inline: auto; padding-inline: var(--space-5); }

/* ---------- HERO ---------- */
.hero { background: var(--white); padding-block: 68px 56px; }
.hero__inner {
  max-width: 1440px; margin-inline: auto; padding-inline: var(--space-5);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
}
.hero__cat { width: 232px; height: auto; justify-self: start; }
.hero__cat--right { width: 246px; justify-self: end; }
.hero__center { text-align: center; width: 565px; max-width: 100%; }
.hero__center .subtitle { display: block; }
.hero__center h1 { font-size: 100px; line-height: 1; margin-block: 4px 18px; }
.hero__center p { margin-inline: auto; }
.hero__btns { display: flex; gap: 22px; justify-content: center; margin-top: 30px; }

/* ---------- TITRES DE SECTION (alignés à gauche, Figma) ---------- */
.sec-head { max-width: var(--w-sec); margin: 0 auto; padding-inline: var(--space-5); }
.sec-head h2 { font-size: var(--h2); }            /* "Comment ça marche ?" = Anton 56 */
.sec-head--h3 h2 { font-size: var(--h3); }        /* "Les univers..."      = Anton 40 */
.sec-head p { margin-top: 10px; max-width: 720px; }

/* ---------- COMMENT ÇA MARCHE (3 cartes crème 355x272) ---------- */
.hiw { background: var(--white); padding-block: 56px; }
.hiw .sec-head { margin-bottom: 40px; }
.hiw__grid { display: grid; grid-template-columns: repeat(3, 355px); justify-content: center; gap: 49px; }
.hiw__card {
  width: 355px; min-height: 272px; background: var(--cream);
  border: 2px solid var(--ink); border-radius: 40px; box-shadow: var(--shadow-soft);
  padding: 23px 33px; text-align: center;
}
.hiw__card .step-num { margin: 0 auto 30px; }
.hiw__card h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--t-important); margin-bottom: 22px; }
.hiw__card p { text-align: left; }

.step-num {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--h4); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: var(--shadow-btn);
}
.step-num--pink { background: var(--pink); }
.step-num--green { background: var(--green); }
.step-num--blue { background: var(--blue); }

/* ---------- LES UNIVERS (bande teal pleine largeur, cartes blanches) ---------- */
.univers { background: var(--blue); padding-block: 56px 64px; }
.univers .sec-head { margin-bottom: 40px; }
.univers__grid { display: grid; grid-template-columns: repeat(3, 355px); justify-content: center; gap: 49px; position: relative; max-width: var(--w-sec); margin-inline: auto; }
.univers__card {
  width: 355px; min-height: 487px; background: var(--white);
  border: 2px solid var(--ink); border-radius: 40px; box-shadow: var(--shadow-soft);
  padding: 22px; display: flex; flex-direction: column;
}
.univers__media { width: 310px; height: 219px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 64px; color: #fff; overflow: hidden; }
.univers__media--wp { background: #21759b; }
.univers__media--canva { background: linear-gradient(135deg,#6a3ff0,#00c4cc); }
.univers__media--ai { background: #1a0a0a; color: #ff9a00; }
.univers__card h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--t-important); margin-top: 24px; }
.univers__card p { margin-top: 17px; flex: 1; }
.univers__card .btn { width: 100%; margin-top: 12px; }
.univers__arrow { position: absolute; right: -44px; top: 230px; width: 40px; color: var(--ink); }

/* ---------- COLLECTIONNE TES CARTES (bande dark + fan de cartes) ---------- */
.cards-band { padding-block: 56px; }
/* overflow visible : le fan de cartes déborde volontairement de la bande
   (en haut, en bas et à droite) comme dans la maquette. */
.cards-band .band--dark { position: relative; height: 496px; padding: 0; overflow: visible; }
.cards-band__text { position: absolute; left: 119px; top: 74px; width: 520px; }
.cards-band__text .subtitle { color: #fff; display: block; }
.cards-band__text h2 { font-size: var(--h2); margin-top: 14px; white-space: nowrap; }
.cards-band__text p { margin-top: 22px; max-width: 520px; }
.cards-band__text .btn { margin-top: 38px; }
/* Fan de cartes (Group 55) : calé à droite du texte (x672 dans la bande),
   plus large que la bande -> sort à droite. Hauteur > bande -> sort en haut/bas. */
.cards-band__fan { position: absolute; left: 672px; top: 50%; transform: translateY(-50%); width: 717px; height: auto; }

/* ---------- ARTICLE VEDETTE (bande verte 1243x239) ---------- */
.feature { padding-block: 28px; }
.feature .band--green { position: relative; height: 239px; padding: 0; }
.feature__img { position: absolute; left: 67px; top: 34px; width: 172px; height: 172px; object-fit: cover; border-radius: 20px; }
.feature__text { position: absolute; left: 264px; top: 52px; right: 220px; }
.feature h3 { font-size: var(--h4); color: #000; margin-bottom: 12px; }
.feature__cta { position: absolute; left: 1046px; top: 167px; }
.feature__badge {
  position: absolute; left: 1090px; top: -20px; width: 104px; height: 39px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid #ff383c; border-radius: 20px; box-shadow: var(--shadow-btn);
  color: #ff383c; font-weight: 600; font-size: var(--t-base);
}

/* ---------- 2 ARTICLES (cartes 593x317) ---------- */
.articles { padding-block: 28px 0; }
.articles__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 55px; max-width: var(--w-band); margin-inline: auto; }
.article-card { position: relative; height: 317px; background: var(--white); border: 2px solid var(--ink); border-radius: 40px; box-shadow: var(--shadow-soft); padding: 33px 54px; }
.article-card__img { position: absolute; left: 54px; top: 33px; width: 172px; height: 172px; object-fit: cover; border-radius: 20px; }
.article-card h3 { position: absolute; left: 248px; top: 55px; right: 40px; font-size: var(--h4); color: #000; }
.article-card p { position: absolute; left: 54px; top: 220px; right: 180px; color: #000; }
.article-card .btn { position: absolute; right: 54px; bottom: 33px; }
.article-card__badge {
  position: absolute; left: 454px; top: -20px; width: 104px; height: 39px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid #ff383c; border-radius: 20px; box-shadow: var(--shadow-btn);
  color: #ff383c; font-weight: 600; font-size: var(--t-base);
}
.articles__more { text-align: center; margin-top: 40px; }
.articles__more .btn { min-width: 288px; }

/* ---------- CTA ROSE (bande rose 1243x496) ---------- */
.cta { padding-block: 56px; }
.cta .band--pink { position: relative; height: 496px; padding: 0; }
.cta__text { position: absolute; left: 119px; top: 74px; width: 600px; }
.cta__text .subtitle { display: block; }
.cta__text h2 { font-size: var(--h2); margin-top: 14px; }
.cta__text p { margin-top: 22px; max-width: 561px; }
.cta__text .btn { margin-top: 38px; }
.cta__cat { position: absolute; left: 821px; top: 140px; width: 250px; }

/* (Footer : styles consolidés dans style.css, chargé sur toutes les pages) */

/* ---------- RESPONSIVE (dérivé : la maquette est desktop) ---------- */
@media (max-width: 1300px) {
  .hero__center h1 { font-size: 72px; }
  .cards-band .band--dark, .cta .band--pink, .feature .band--green { height: auto; }
  .cards-band__text, .cards-band__fan, .cta__text, .cta__cat,
  .feature__img, .feature__text, .feature__cta, .feature__badge { position: static; width: auto; }
  .cards-band .band--dark, .cta .band--pink { padding: 40px; }
  .feature .band--green { padding: 40px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
  .cards-band__fan { display: none; }
  .article-card { height: auto; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
  .article-card__img, .article-card h3, .article-card p, .article-card .btn { position: static; right: auto; }
  .article-card__badge { left: auto; right: 24px; }
}
@media (max-width: 920px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__cat { display: none; }
  .hero__center h1 { font-size: 56px; }
  .hiw__grid, .univers__grid { grid-template-columns: 1fr; }
  .articles__grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .univers__arrow { display: none; }
}