/* ===================================================================
   site.css — les sections de la page d'accueil.

   styles.css porte la charte et la coque (navigation, boutons, pied) :
   toutes les pages en dependent, on n'y touche pas. Cette feuille-ci
   n'ajoute que la mise en page des sections de l'accueil, et n'invente
   aucune couleur : tout vient des variables de la charte.
   =================================================================== */

/* ---------- ouverture ---------- */
.hero {
  max-width: 860px;
  margin: 0 auto;
  padding: 92px 24px 76px;
  text-align: center;
}
.hero-sur {
  margin: 0 0 20px;
  font-family: Montserrat, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--or-fonce);
}
.hero h1 {
  margin: 0 0 22px;
  font-family: Montserrat, sans-serif;
  font-size: clamp(2.1rem, 5.4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--encre);
}
.hero-texte {
  max-width: 620px;
  margin: 0 auto 34px;
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--texte-2);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.btn-grand { padding: 13px 26px; font-size: .95rem; }

/* ---------- ossature des sections ---------- */
.section { padding: 78px 24px; }
.section > h2,
.section > .section-sur,
.section > .section-texte,
.section > .section-note { max-width: 860px; margin-left: auto; margin-right: auto; }

.section-sur {
  margin: 0 0 12px;
  font-family: Montserrat, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--indigo);
}
.section > h2 {
  margin: 0 0 16px;
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.025em;
  color: var(--encre);
}
.section-texte {
  margin: 0 0 40px;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--texte-2);
}
.section-note {
  margin: 34px auto 0;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--texte-2);
}
.section-note a { color: var(--navy); }

/* ---------- les paliers du groupe ---------- */
.paliers {
  display: grid;
  gap: 18px;
  max-width: 1060px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
}
.palier {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
/* La branche ou l'on se trouve se distingue par un filet dore, pas par
   une couleur de fond : le sigle porte deja le signal. */
.palier-actif {
  border-color: var(--or);
  box-shadow: var(--ombre);
}
.palier-tete {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.palier-sigle { width: 42px; height: 42px; flex: 0 0 42px; }
.palier-tete h3 {
  margin: 0 0 3px;
  font-family: Montserrat, sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--encre);
}
.palier-role { margin: 0; font-size: .86rem; color: var(--texte-2); }

.branches { margin: 0; padding: 0; list-style: none; }
.branches li {
  padding: 13px 0;
  border-top: 1px solid var(--border);
}
.branches li:first-child { border-top: 0; padding-top: 0; }
.branches strong {
  display: block;
  margin-bottom: 3px;
  font-family: Montserrat, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--encre);
}
.branches span {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--texte-2);
}
.branche-ici strong { color: var(--navy); }
.branche-ici em {
  font-style: normal;
  font-weight: 700;
  color: var(--or-fonce);
}

/* ---------- cartes explicatives ---------- */
.cartes {
  display: grid;
  gap: 16px;
  max-width: 1060px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
}
.cartes .carte {
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.cartes .carte h3 {
  margin: 0 0 10px;
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--encre);
}
.cartes .carte p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.68;
  color: var(--texte-2);
}
.cartes .carte strong { color: var(--encre); }

/* ---------- les modeles ---------- */
.modeles {
  display: grid;
  gap: 16px;
  max-width: 1060px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.modele {
  position: relative;
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.modele-enligne { border-color: var(--indigo); }
.modele-etat {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--navy);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.modele-etat-attente { background: var(--border); color: var(--texte-2); }
.modele h3 {
  margin: 0 0 4px;
  font-family: Montserrat, sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--encre);
}
.modele-role {
  margin: 0 0 12px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--or-fonce);
}
.modele p:last-child {
  margin: 0;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--texte-2);
}

/* Le modele en beta se distingue par un filet dore : il n'est ni en ligne
   ni lointain, et le lecteur doit voir cette nuance sans lire l'etiquette. */
.modele-beta { border-color: var(--or); }
.modele-etat-beta { background: var(--or-fonce); color: #fff; }

/* ---------- les fondations et leurs trois modes ---------- */
.fondations {
  display: grid;
  gap: 16px;
  max-width: 1060px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}
.fondation {
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.fondation h4 {
  margin: 0 0 3px;
  font-family: Montserrat, sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--encre);
}
.fondation-role {
  margin: 0 0 18px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--or-fonce);
}

/* Les trois modes montent comme les trois paliers du sigle : le filet a
   gauche s'epaissit et passe a l'or au dernier. La lecture verticale doit
   dire « ca monte » avant meme qu'on lise les mots. */
.modes { margin: 0; padding: 0; list-style: none; counter-reset: mode; }
.mode {
  position: relative;
  padding: 0 0 14px 20px;
  border-left: 2px solid var(--border);
}
.mode:last-child { padding-bottom: 0; }
.mode::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--indigo);
}
.mode-max { border-left-color: var(--or); }
.mode-max::before { background: var(--or); width: 10px; height: 10px; left: -6px; top: 5px; }
.mode strong {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: .88rem;
  font-weight: 700;
  color: var(--encre);
}
.mode-max strong { color: var(--or-fonce); }
.mode span {
  display: block;
  margin-top: 2px;
  font-size: .85rem;
  line-height: 1.58;
  color: var(--texte-2);
}

/* Les specialisees reutilisent .carte, avec le sous-titre de metier. */
.cartes .carte .modele-role { margin: 0 0 10px; }

/* ---------- les blocs reserves ---------- */
/* Volontairement plus petits et sans bordure marquee que les modeles :
   la hierarchie visuelle doit dire, avant le texte, que ce sont des noms
   poses et pas des intelligences qui tournent. */
.sous-titre {
  max-width: 1060px;
  margin: 58px auto 12px;
  font-family: Montserrat, sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--encre);
}
.section > .sous-titre + .section-texte { max-width: 1060px; margin-bottom: 26px; }

.blocs {
  display: grid;
  gap: 10px;
  max-width: 1060px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
}
.bloc {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
}
.bloc strong {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: .89rem;
  font-weight: 700;
  color: var(--encre);
}
.bloc span {
  display: block;
  margin-top: 3px;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--texte-2);
}

/* ---------- les chiffres ---------- */
.chiffres {
  display: grid;
  gap: 14px;
  max-width: 1060px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.chiffre {
  padding: 22px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: center;
}
.chiffre-fort { border-color: var(--or); }
.chiffre strong {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--navy);
}
.chiffre-fort strong { color: var(--or-fonce); }
.chiffre span {
  display: block;
  margin-top: 4px;
  font-size: .82rem;
  color: var(--texte);
}
.chiffre em {
  display: block;
  margin-top: 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem;
  font-style: normal;
  color: var(--texte-2);
}

/* ---------- ce qu'il sait / ce qu'il ne sait pas ---------- */
.franchise {
  display: grid;
  gap: 18px;
  max-width: 860px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.franchise-col {
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.franchise-col h3 {
  margin: 0 0 14px;
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--encre);
}
.franchise-col ul { margin: 0; padding-left: 19px; }
.franchise-col li {
  margin-bottom: 9px;
  font-size: .92rem;
  line-height: 1.62;
  color: var(--texte-2);
}
.franchise-col li:last-child { margin-bottom: 0; }

/* ---------- appel final ---------- */
.section-appel { text-align: center; padding-bottom: 92px; }
.section-appel .section-texte { margin-bottom: 30px; }

@media (max-width: 640px) {
  .hero { padding: 62px 20px 52px; }
  .section { padding: 56px 20px; }
}