/* ==========================================================================
   modules.css — Styles partagés des pages modules d'accompagnement
   À charger après tokens.css, base.css, layout.css, components.css.

   Toutes les valeurs viennent de tokens.css à deux exceptions près :
     · espacement vertical de section (4 / 5 / 7 rem) — valeurs prescrites
       par le brief Module 2 et appliquées directement dans les @media,
       sans création de tokens globaux.
     · bordure cuivre des cartes étapes (rgba 0.2) — alpha local, sans
       intérêt à hisser dans tokens.

   Convention de nommage : préfixe `.mod-` pour isoler les sélecteurs
   propres aux pages modules et éviter toute collision avec l'accueil.
   ========================================================================== */


/* --- 1. Wrapper page module ---------------------------------------------- */

.mod-page {
  display: block;
  overflow-x: hidden;        /* ceinture & bretelles contre les images full-bleed */
}


/* --- 2. Container -------------------------------------------------------- */

.mod-container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 80px);
}


/* --- 3. Sections (alternance crème/blanc, espacement responsive) -------- */

.mod-section {
  padding-block: 4rem;        /* mobile */
}
@media (min-width: 768px) {
  .mod-section { padding-block: 5rem; }
}
@media (min-width: 1024px) {
  .mod-section { padding-block: 7rem; }
}

.mod-section--creme { background-color: var(--couleur-creme); }
.mod-section--blanc { background-color: var(--couleur-blanc); }


/* --- 4. Largeurs de bloc (par type de contenu) -------------------------- */

.mod-texte-prose         { max-width: 1100px; }
.mod-texte-lead          { max-width: 1200px; }
.mod-titre-large         { max-width: 1300px; }
.mod-bloc-large          { max-width: 1440px; }
.mod-bloc-pleine-largeur { max-width: 100%; }


/* --- 5. Typographie ----------------------------------------------------- */

.mod-eyebrow {
  display: inline-block;
  font-family:    var(--police-corps);
  font-size:      clamp(0.95rem, 1.3vw, 1.25rem);
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--couleur-cuivre-texte);
  margin: 0 0 1.5rem;
}

.mod-h1 {
  font-family:    var(--police-titre);
  font-size:      clamp(2rem, 3.5vw, 3rem);    /* 32 → 48 px : calibré pour 50 % de largeur en split desktop */
  font-weight:    400;
  line-height:    1.1;
  letter-spacing: -0.01em;
  color:          var(--couleur-marine-profonde);
  max-width:      18ch;
  margin: 0 0 2rem;
  text-wrap: balance;
  hyphens: auto;
}

.mod-h2 {
  font-family:    var(--police-titre);
  font-size:      clamp(2rem, 4vw, 3.25rem);
  font-weight:    400;
  line-height:    1.15;
  letter-spacing: -0.01em;
  color:          var(--couleur-marine-profonde);
  max-width:      22ch;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.mod-h3 {
  font-family:    var(--police-titre);
  font-size:      clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight:    700;
  line-height:    1.3;
  color:          var(--couleur-marine-profonde);
  margin: 0;
}

.mod-punchline {
  font-family:   var(--police-titre);
  font-style:    italic;
  font-weight:   400;
  font-size:     clamp(1.25rem, 1.8vw, 1.6rem);  /* 20 → 26 px : favorise la tenue en 1 ligne en split desktop */
  line-height:   1.3;
  color:         var(--couleur-marine-profonde);
  max-width:     35ch;
  border-left:   3px solid var(--couleur-cuivre);
  padding-left:  1.5rem;
  margin: 2rem 0;
}

.mod-lead {
  font-family: var(--police-corps);
  font-size:   clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  color:       var(--couleur-texte);
  margin: 0 0 2rem;
}


/* --- 6. Hero — split horizontal desktop / empilé mobile ----------------- */

.mod-hero {
  padding-block: clamp(2rem, 4vw, 4rem) clamp(3rem, 5vw, 5rem);
  overflow: hidden;
}

.mod-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

.mod-hero__content {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.5vw, 1.5rem);
}

.mod-hero__visuel {
  margin: 0;
  width: 100%;
}
.mod-hero__visuel img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-md);
  aspect-ratio: 1659 / 948;
  object-fit: cover;
  background-color: var(--couleur-bordure);  /* fallback discret si image absente */
}
.mod-hero__visuel .mod-figcaption {
  margin: 1rem auto 0;
  padding-inline: 0;
  font-family: var(--police-corps);
  font-style: italic;
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.5;
  color: var(--couleur-texte-subtil);
  text-align: center;
  max-width: 50ch;
}

/* Bascule en split horizontal à partir de 1024 px */
@media (min-width: 1024px) {
  .mod-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 5vw, 5rem);
  }
  .mod-hero__visuel .mod-figcaption {
    text-align: left;
    margin-inline: 0;
  }
}

/* Très grand écran : image légèrement plus large que le texte pour équilibre premium */
@media (min-width: 1440px) {
  .mod-hero__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}

/* Image résultat (section 4) — full-bleed pleine largeur viewport */
.mod-resultat-image {
  margin-top: clamp(3rem, 5vw, 5rem);
}
.mod-resultat-image figure { margin: 0; }
.mod-resultat-image img {
  display: block;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  height: auto;
  object-fit: cover;
  background-color: var(--couleur-bordure);
}

.mod-figcaption {
  font-family: var(--police-corps);
  font-style:  italic;
  font-size:   clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.5;
  color:       var(--couleur-texte-subtil);
  text-align:  center;
  max-width:   50ch;
  margin: 1.25rem auto 0;
  padding-inline: clamp(20px, 4vw, 80px);
}


/* --- 7. Listes ---------------------------------------------------------- */

.mod-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mod-liste li {
  position: relative;
  padding-left: 1.75rem;
  padding-block: 0.6rem;
  font-family: var(--police-corps);
  font-size:   clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  color:       var(--couleur-texte);
}
.mod-liste li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0.55rem;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.4em;
  line-height: 1;
  color: var(--couleur-cuivre);
}

/* Variante checks — section gains */
.mod-liste--checks li::before {
  content: "✓";
  font-family: var(--police-corps);
  font-size: 1.05em;
  font-weight: 700;
  top: 0.7rem;
}

.mod-liste li strong {
  color: var(--couleur-marine-profonde);
  font-weight: 600;
}


/* --- 8. Étapes (3 cartes) ----------------------------------------------- */

.mod-etapes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
@media (min-width: 768px) {
  .mod-etapes { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (min-width: 1024px) {
  .mod-etapes { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

.mod-etape {
  background-color: var(--couleur-blanc);
  border: 1px solid rgba(184, 147, 90, 0.2);    /* cuivre alpha 0.2 */
  border-radius: var(--rayon-md);
  padding: 2rem;
  box-shadow: var(--ombre-sm);
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .mod-etape { padding: 2.5rem; }
}
.mod-section--creme .mod-etape { background-color: var(--couleur-blanc); }
.mod-section--blanc .mod-etape { background-color: var(--couleur-creme); }

.mod-etape__numero {
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  color: var(--couleur-cuivre);
  margin-bottom: 1rem;
}

.mod-etape__titre {
  font-family: var(--police-titre);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--couleur-marine-profonde);
  margin: 0 0 0.75rem;
}

.mod-etape__texte {
  font-family: var(--police-corps);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  color: var(--couleur-texte);
  margin: 0;
}


/* --- 9. CTA bloc (encart compact centré) -------------------------------- */

.mod-cta-bloc {
  max-width: 720px;
  margin-inline: auto;
  padding: 3rem 2rem;
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-sm);
  text-align: center;
}
@media (min-width: 768px) {
  .mod-cta-bloc { padding: 4rem 3rem; }
}
.mod-section--blanc .mod-cta-bloc { background-color: var(--couleur-creme); }

.mod-cta-bloc__intro {
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1.35;
  color: var(--couleur-marine-profonde);
  margin: 0 0 1rem;
}

.mod-cta-bloc__texte {
  font-family: var(--police-corps);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--couleur-texte);
  max-width: 50ch;
  margin: 0 auto 2rem;
}

.mod-cta-bloc .btn { margin: 0; }

.mod-cta-bloc__secondaire {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.5;
  color: var(--couleur-texte-subtil);
  margin: 1.5rem 0 0;
}
.mod-cta-bloc__secondaire a {
  color: var(--couleur-cuivre-texte);
  text-underline-offset: 0.2em;
}


/* --- 10. Pour qui (rassurance compacte avant la FAQ) -------------------- */

.mod-pour-qui {
  padding-block: 4rem;
  border-top: 1px solid var(--couleur-cuivre);
  border-bottom: 1px solid var(--couleur-cuivre);
}
@media (min-width: 1024px) {
  .mod-pour-qui { padding-block: 5rem; }
}
.mod-pour-qui__intro {
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  line-height: 1.5;
  color: var(--couleur-marine-profonde);
  text-align: center;
  max-width: 40ch;
  margin: 0 auto;
}


/* --- 11. FAQ accordéon -------------------------------------------------- */

.mod-faq {
  margin-top: 3rem;
  border-top: 1px solid var(--couleur-bordure);
}

.mod-faq__item {
  border-bottom: 1px solid var(--couleur-bordure);
}

.mod-faq__question {
  margin: 0;
  font-family: inherit;
  font-weight: inherit;
}

.mod-faq__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  padding-inline: 0;
  min-height: 44px;          /* zone tactile minimum WCAG */
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--police-corps);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--couleur-marine-profonde);
  cursor: pointer;
  transition: color var(--duree-rapide) var(--courbe-premium);
}
.mod-faq__toggle:hover { color: var(--couleur-cuivre-texte); }

.mod-faq__icone {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform var(--duree-moyenne) var(--courbe-premium);
}
.mod-faq__icone::before,
.mod-faq__icone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: var(--couleur-cuivre);
  transition: transform var(--duree-moyenne) var(--courbe-premium);
}
.mod-faq__icone::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.mod-faq__icone::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.mod-faq__toggle[aria-expanded="true"] .mod-faq__icone::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.mod-faq__reponse {
  padding-left: 1.5rem;
  padding-bottom: 1.5rem;
}
.mod-faq__reponse p {
  font-family: var(--police-corps);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  color: var(--couleur-texte);
  margin: 0;
}
.mod-faq__reponse p + p { margin-top: 1.25rem; }


/* --- 12. Réduction des animations (accessibilité) ----------------------- */

@media (prefers-reduced-motion: reduce) {
  .mod-faq__icone,
  .mod-faq__icone::before,
  .mod-faq__icone::after,
  .mod-faq__toggle {
    transition-duration: 0ms;
  }
}