/* Page besoin — écrans Figma « 02.2 - Page Catalogue Besoins » (1440) et « … - Mobile » (375) */

/* ——— Zone immersive ——— */

/* ——— Comprendre le mécanisme ——— */
.mecanisme {
  display: grid;
  grid-template-columns: 628px minmax(0, 1fr);
  grid-template-areas: "visuel intro" "visuel etapes";
  grid-template-rows: auto 1fr;
  column-gap: 80px;
  margin-top: 62px;
}
/* Sans visuel, la grille se replie sur une seule colonne. */
.mecanisme--sans-visuel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "etapes"; column-gap: 0; }
.mecanisme--sans-visuel .mecanisme__etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-right: 0; }
.mecanisme__intro { grid-area: intro; }
.mecanisme__intro .titre-bloc { margin-top: 19px; }
.mecanisme__intro .texte-intro { margin-top: 16px; color: var(--noir); }
.mecanisme__visuel { grid-area: visuel; position: relative; height: 543px; margin-top: 13px; border-radius: var(--r-carte); overflow: hidden; }
.mecanisme__etapes { grid-area: etapes; display: grid; align-content: start; gap: 38px; margin-top: 29px; padding-right: 30px; }
.mecanisme__etape { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 30px; align-items: start; font: 400 16px/24px var(--police-texte); color: var(--noir); }
.mecanisme__etape .pastille-chiffre { margin-top: -9px; }
.mecanisme__nom { font: 600 16px/24px var(--police-texte); }

/* ——— La gamme ——— */
.gamme { margin-top: 48px; }
.gamme__intro .titre-bloc { margin-top: 17px; }
.gamme__intro .texte-intro { margin-top: 17px; }
.gamme__liste { display: grid; gap: 50px; margin-top: 52px; }
.bloc-produit { display: grid; grid-template-columns: 390px minmax(0, 1fr); min-height: 470px; border-radius: var(--r-carte); background: rgba(217, 217, 217, .5); overflow: hidden; }
.bloc-produit__visuel { position: relative; overflow: hidden; }
.bloc-produit__visuel::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); }
.bloc-produit__contenu { display: flex; flex-direction: column; padding: 34px 50px 35px; }
.bloc-produit__zone, .bloc-produit__type, .bloc-produit__desc { font: 400 18px/26px var(--police-texte); color: #000; }
.bloc-produit__nom { margin-top: 9px; font: 600 32px/38.4px var(--police-titre); color: var(--titre); }
.bloc-produit__nom a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bloc-produit__type { margin-top: 8px; }
.bloc-produit__atouts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 19px; }
.bloc-produit__desc { margin-top: 25px; }
.bloc-produit__pied { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: auto; padding-top: 13px; border-top: 1px solid rgba(35, 35, 35, .2); }
.bloc-produit__desc { margin-bottom: 33px; }
.bloc-produit__prix { display: grid; font: 600 30px/37.8px var(--police-texte); color: var(--noir); }
.bloc-produit__alma { margin-top: 5px; font: 400 14px/20px var(--police-texte); color: #000; }
.bloc-produit__cta { margin-top: 1px; }

/* ——— Chiffres clés ——— */
.chiffres { margin-top: 90px; padding-block: 50px 90px; background: var(--violet); color: var(--blanc); }
.chiffres__titre { margin-top: 24px; color: var(--blanc); }
.chiffres__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 411px)); justify-content: space-between; gap: 24px; margin-top: 24px; }
.chiffre__valeur { height: 74px; font: 400 60px/60px var(--police-texte); color: var(--lavande); }
.chiffre__legende { margin-top: 7px; font: 600 20px/26px var(--police-texte); }
.chiffre__texte { margin-top: 7px; font: 400 18px/26px var(--police-texte); }

/* ——— Guide pratique ——— */
.guide-pratique { margin-top: 58px; }
.guide-pratique .titre-bloc { margin-top: 22px; }
.guide-pratique__etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 411px)); justify-content: space-between; align-items: stretch; gap: 24px; margin-top: 31px; }
.etape-guide { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 16px; height: 100%; padding: 19px; border: 1px solid var(--gris-bordure); border-radius: var(--r-carte); }
.etape-guide__corps { display: block; }
.etape-guide__texte { display: block; font: 400 16px/24px var(--police-texte); color: #000; }
.etape-guide__nom { display: block; margin-block: 14px 8px; font: 600 18px/24px var(--police-texte); }
/* Fréquence : étiquette à coche, comme sur la maquette. */
.etape-guide__rythme { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--gris-champ); font: 400 14px/20px var(--police-texte); color: var(--violet); }
.etape-guide__rythme .icone, .etape-guide__rythme svg { width: 16px; height: 16px; flex: none; }

/* ——— Conseils de l'expert ——— */
.conseils { margin-top: 58px; }
.conseils__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 405px)); justify-content: space-between; gap: 32px; margin-top: 39px; }
.conseil { font: 400 18px/26px var(--police-texte); color: #000; }
.conseil__nom { margin-bottom: 22px; font: 600 20px/24px var(--police-texte); }

/* ——— Questions, relance, réassurance, guides ——— */
.page-besoins .faq { margin-top: 58px; }
.relance { display: flex; flex-direction: column; align-items: center; gap: 43px; margin-top: 50px; text-align: center; }
.relance__cta { padding: 13.5px 40px; }
.page-besoins .reassurance { margin-top: 50px; }
.page-besoins .guides-court { margin-top: 49px; }

/* ——— Tablette ——— */
@media (max-width: 1279px) and (min-width: 768px) {
  /* Texte posé sur la photo : voile clair à gauche pour rester lisible quand l'écran rétrécit */
  .mecanisme__intro br { display: none; }
  .mecanisme { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
  .mecanisme__visuel { height: auto; aspect-ratio: 628 / 543; }
  .mecanisme__etapes { padding-right: 0; }
  .mecanisme__etape { column-gap: 20px; }
  .bloc-produit { grid-template-columns: 34% minmax(0, 1fr); }
  .bloc-produit__contenu { padding: 32px; }
  .bloc-produit__desc { margin-bottom: 24px; }
  .chiffres__liste, .guide-pratique__etapes, .conseils__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chiffre__valeur { height: auto; margin-bottom: 8px; font-size: 48px; line-height: 56px; }
  .etape-guide__texte { font-size: 16px; line-height: 24px; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .mecanisme { grid-template-columns: 1fr; grid-template-areas: "intro" "visuel" "etapes"; row-gap: 32px; }
  .mecanisme__visuel { margin-top: 0; aspect-ratio: 16 / 9; }
  .mecanisme__etapes { margin-top: 0; gap: 28px; }
  .bloc-produit { grid-template-columns: 1fr; }
  .bloc-produit__visuel { height: 300px; }
  .chiffres__liste { grid-template-columns: 1fr; gap: 32px; max-width: 600px; }
  .guide-pratique__etapes, .conseils__liste { grid-template-columns: 1fr; gap: 16px; }
  .etape-guide { min-height: 0; }
  .conseils__liste { gap: 32px; }
}

/* ——— Mobile ——— */
@media (max-width: 767px) {

  .mecanisme { display: flex; flex-direction: column; gap: 32px; margin-top: 24px; padding-block: 12px; }
  .mecanisme__intro .titre-bloc, .mecanisme__intro .texte-intro { margin-top: 12px; }
  .mecanisme__visuel { height: 240px; margin: 0; border-radius: var(--r-bloc); }
  .mecanisme__etapes { gap: 24px; margin: 0; padding: 0; }
  .mecanisme__etape { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; font-size: 18px; line-height: 26px; }
  .mecanisme__etape .pastille-chiffre { width: 36px; height: 36px; margin: 0; font: 600 16px/20.2px var(--police-texte); }
  .mecanisme__etape p { margin-top: 4px; color: rgba(35, 35, 35, .8); }
  .mecanisme__nom { font-size: 18px; line-height: 22.7px; }

  .gamme { margin-top: 24px; padding-block: 12px; }
  .gamme__intro .titre-bloc { margin-top: 12px; }
  .gamme__intro .texte-intro { margin-top: 12px; color: rgba(35, 35, 35, .9); }
  .gamme__liste { gap: 24px; margin-top: 32px; }
  .bloc-produit { display: flex; flex-direction: column; min-height: 0; background: #ECECEC; }
  .bloc-produit__visuel { flex: none; height: 180px; }
  .bloc-produit__visuel::after { content: none; }
  .bloc-produit__contenu { gap: 16px; padding: 16px 16px 24px; }
  .bloc-produit__zone { font-size: 14px; color: var(--noir); }
  .bloc-produit__nom { margin-top: 12px; font-size: 24px; line-height: 28.8px; }
  .bloc-produit__type { margin-top: 12px; color: var(--noir); }
  .bloc-produit__atouts { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; }
  .bloc-produit__atouts .etiquette--coche { gap: 8px; padding: 0; background: none; }
  .bloc-produit__desc { margin: 0; padding-top: 16px; border-top: 1px solid rgba(35, 35, 35, .2); font-size: 16px; line-height: 24px; color: var(--noir); }
  .bloc-produit__pied { flex-direction: column; align-items: stretch; margin: 0; padding: 0; border: 0; }
  .bloc-produit__prix { font-size: 26px; line-height: 32.8px; }
  .bloc-produit__alma { margin-top: 4px; color: var(--noir); }
  .bloc-produit__cta { margin: 0; }

  .chiffres { margin-top: 24px; padding-block: 36px; }
  .chiffres__titre { margin-top: 12px; font-size: 28px; line-height: 34px; }
  .chiffres__liste { display: flex; flex-direction: column; gap: 0; margin-top: 40px; }
  .chiffre + .chiffre { margin-top: 32px; padding-top: 31px; border-top: 1px solid rgba(255, 255, 255, .13); }
  .chiffre__valeur { height: auto; font-size: 56px; font-weight: 600; line-height: 56px; }
  .chiffre__legende { margin-top: 10px; font-size: 18px; line-height: 22px; }
  .chiffre__texte { margin-top: 10px; color: rgba(255, 255, 255, .6); }

  .page-besoins .temoignages { padding-block: 36px; }

  .guide-pratique { margin-top: 24px; }
  .guide-pratique .titre-bloc { margin-top: 12px; line-height: 31.2px; }
  .guide-pratique__etapes { display: flex; flex-direction: column; gap: 32px; margin-top: 36px; }
  .etape-guide { justify-content: flex-start; min-height: 0; }
  .etape-guide__texte { color: var(--noir); }
  .etape-guide .etiquette { white-space: normal; }

  .conseils { margin-top: 32px; padding: 12px 32px 24px; }
  .conseils__liste { display: flex; flex-direction: column; gap: 33px; margin-top: 32px; }
  .conseil { color: #000; }

  .page-besoins .faq, .relance, .page-besoins .reassurance, .page-besoins .guides-court { margin-top: 24px; }
  .relance { gap: 24px; padding-block: 24px; }
  .relance__titre { font-size: 32px; line-height: 38.4px; }
  .relance__cta { padding: 16px 40px; }
}

/* Encart d'aide au choix (quiz court) */
.besoin__quiz { margin-block: 56px; }
@media (max-width: 767px) { .besoin__quiz { margin-block: 32px; } }