/* Solutions (/solutions/), la page de Jean-Marc du 29/09/2026. Feuille de la
   famille solutions (DESIGN.md §12), à part de solutions.css pour ne rien
   changer aux pages du gabarit, qui restent masquées. Importée par
   src/pages/solutions/index.astro après la mise en page : elle passe après
   tokens.css, accueil.css et pages.css. Jetons seulement, seuils de l'accueil
   seulement, classes préfixées.

   Trois squelettes (DESIGN.md §14) :
   - l'ouverture, typographique sur la crème ;
   - les quatre modules sur la brume, photo et texte, la photo de part et
     d'autre d'un module à l'autre et collée pendant la lecture dès 768 px ;
   - la réassurance, un panneau ardoise, texte et photo côte à côte dès
     1024 px. */

/* ============================================================ ouverture */
/* L'entête du site est fixe et hors du flux : l'ouverture réserve sa hauteur,
   comme EnTetePage. */
.solutions-hub__ouverture { padding-top: calc(var(--h-entete) + var(--e7)); }

.solutions-hub__tete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e5);
  margin-top: var(--e8);
}
/* Posé à même la crème, le libellé reprend la brume de l'étiquette par défaut
   (même remède que le contact). */
.solutions-hub__tete .libelle { background: var(--fond-alterne); }
.solutions-hub__titre { max-width: 26ch; }

/* ============================================================== modules */
.solutions-hub__modules {
  display: flex;
  flex-direction: column;
  gap: var(--e9);
}

.solutions-hub__module {
  display: grid;
  gap: var(--e6);
  /* L'entête est fixe : une ancre (#interessement…) s'arrête en dessous. */
  scroll-margin-top: var(--decalage-ancre);
}

.solutions-hub__photo { width: 86%; }

.solutions-hub__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e6);
  min-width: 0;
}

.solutions-hub__entree {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.solutions-hub__num,
.solutions-hub__rubrique {
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  font-weight: var(--graisse-normale);
  line-height: var(--lh-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
}
.solutions-hub__num { color: var(--accent); }
.solutions-hub__rubrique { color: var(--texte); }

/* Le H2 d'un module ne s'équilibre pas quand le socle a soudé ses deux
   derniers mots : l'équilibre posait alors « stratégique » seul sur sa ligne
   (module 01, de 360 à 768 px, avec JS et en mouvement réduit). Sans JS, rien
   n'est soudé et c'est l'équilibre qui évite « Animatrice » seul : la page le
   rétablit dans un <noscript>. Mesuré le 29/09. */
.solutions-hub__entree .h2 { text-wrap: pretty; }

.solutions-hub__sous {
  max-width: 64ch;
  color: var(--texte-attenue);
}
.solutions-hub__accroche { max-width: 36ch; }

/* « Le principe » et « Plafond 2026 » : chacun sous un filet, son libellé
   Chivo au-dessus du texte. */
.solutions-hub__bloc {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  width: 100%;
  padding-top: var(--e5);
  border-top: 1px solid var(--filet);
}

/* Les quatre plafonds de la participation dépendent de la ligne qui les
   annonce : la liste numérotée qui suit une liste à puces rentre sous elle. */
.solutions-hub__plafond ul.points + ol.points { margin-top: calc(var(--e2) * -1); margin-left: var(--e5); }

.solutions-hub__texte .lien-fleche { margin-top: calc(var(--e2) * -1); }

/* Sous 768 : une colonne, la photo d'abord, alternée à gauche et à droite. */
@media (max-width: 767.98px) {
  .solutions-hub__modules { gap: var(--e8); }
  .solutions-hub__module:nth-child(even) .solutions-hub__photo { margin-left: auto; }
}

/* À partir de 768 : cinq douzièmes pour la photo, sept pour le texte, la
   photo à gauche des modules impairs et à droite des pairs. Le texte est
   plus haut que la photo : elle reste sous les yeux pendant la lecture. */
@media (min-width: 768px) {
  .solutions-hub__module {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--e7);
    align-items: start;
  }
  .solutions-hub__module:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .solutions-hub__module:nth-child(even) .solutions-hub__photo { grid-column: 2; grid-row: 1; }
  .solutions-hub__module:nth-child(even) .solutions-hub__texte { grid-column: 1; grid-row: 1; }

  .solutions-hub__photo {
    width: 100%;
    position: sticky;
    top: var(--haut-colle);
  }
}

@media (min-width: 1200px) {
  .solutions-hub__module { column-gap: var(--e9); }
}

/* =========================================================== réassurance */
/* Un panneau ardoise dans une section claire : il reprend les trois lignes
   des contextes foncés (DESIGN.md §2), sinon le focus et l'accent du titre
   seraient illisibles. */
.solutions-hub__appel {
  display: grid;
  gap: var(--e6);
  --carte-marge: clamp(28px, 3vw, 56px);
  padding: var(--carte-marge);
  border-radius: var(--rayon-carte);
  background: var(--fond-fonce);
  color: var(--texte-sur-fonce);
  --accent: var(--accent-sur-fonce);
  --texte-attenue: var(--texte-sur-fonce-attenue);
  --filet: var(--filet-sur-fonce);
}

.solutions-hub__appel-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e5);
  min-width: 0;
}
.solutions-hub__appel-titre { max-width: 18ch; }
.solutions-hub__appel-chapo { color: var(--texte-sur-fonce-attenue); max-width: 54ch; }
.solutions-hub__appel .cta { margin-top: var(--e3); }

/* Le bouton sans roulement de lettres (voir la page) : son libellé passe à la
   ligne entre deux mots quand la place manque, et change de couleur au survol
   comme .cta__mot. */
.solutions-hub__appel-bouton { height: auto; min-height: 60px; }
.solutions-hub__appel-mot {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: var(--e2);
  line-height: var(--lh-compact);
  transition: color var(--duree-nappe) var(--courbe-geste);
}
.cta:hover .solutions-hub__appel-mot,
.cta:focus-visible .solutions-hub__appel-mot { color: var(--mot-survol); }

/* Sous 1024 : la photo entière, au rapport de son fichier. */
.solutions-hub__appel-photo {
  width: 100%;
  aspect-ratio: 2000 / 1116;
}

/* À partir de 1024 : le texte sur sept douzièmes, la photo sur cinq, à la
   hauteur du texte. L'image est posée en absolu : seule la colonne de texte
   donne sa hauteur à la rangée. Le cadre rogne les bouts de la rangée, jamais
   les rois. */
@media (min-width: 1024px) {
  .solutions-hub__appel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e8);
  }
  .solutions-hub__appel-texte { justify-content: center; }
  .solutions-hub__appel-photo { aspect-ratio: auto; }
  .solutions-hub__appel-photo > img {
    position: absolute;
    inset: 0;
  }
}