/* Harmonisation typographique globale.
   Reference: /formations/ et /design-system/.
   Charge apres les feuilles de page pour neutraliser les titres trop grands
   herites des maquettes HTML initiales. */

html[data-theme] body[data-screen-label] {
  --ds-section-title: clamp(30px, 3.1vw, 42px);
  --ds-intro-title: var(--ds-section-title);
  --ds-cta-title: clamp(34px, 3.8vw, 48px);
  --ds-hero-title: clamp(42px, 5vw, 64px);
  --ds-body-lg: 18px;
}

/* Heros de pages internes : noir/blanc + vert menthe AcadéNice comme base. */
html[data-theme] body[data-screen-label] :is(
  .sub-hero__title,
  .fhero__title,
  .metier-hero h1,
  .public-sitemap h1
) {
  color: var(--text-primary);
  font-size: var(--ds-hero-title);
  line-height: .98;
  letter-spacing: 0;
}

html[data-theme] body[data-screen-label] :is(
  .sub-hero__title em,
  .sub-hero__title span,
  .fhero__title em,
  .fhero__title span,
  .public-sitemap h1 span
) {
  color: var(--teal);
}

/* Sur les surfaces claires, le vert sombre conserve le contraste sans
   modifier l'identite des sections foncees. */
html[data-theme="light"] body[data-screen-label] :is(
  .formations .section-head__eyebrow,
  .ecole__intro-eyebrow
) {
  color: var(--teal-dark);
}

html[data-theme] body[data-screen-label] .formation-detail[data-pole] :is(
  .fhero__title em,
  .fhero__title span,
  .fsection__title em,
  .fsection__title span
) {
  color: var(--pole-accent, var(--teal));
}

/* Titres d'introduction visuelle : presents sur les pages ecole/alternance. */
html[data-theme] body[data-screen-label] :is(
  .ap-intro__title,
  .alt-intro__title,
  .rec-intro__title,
  .om-intro__manifesto h2,
  .xp-intro__title,
  .loc-intro__title
) {
  font-size: var(--ds-intro-title) !important;
  line-height: 1.02;
  letter-spacing: 0 !important;
}

/* Titres de sections courantes : alignes sur la page formations. */
html[data-theme] body[data-screen-label] :is(
  .section-head__title,
  .fsection__title,
  .metier-section h2,
  .metier-guidance__content h2,
  .public-sitemap__section-head h2,
  .faq-section h2,
  .jobs-section h2,
  .team-section h2,
  .t-section h2
) {
  font-size: var(--ds-section-title);
  line-height: 1.08;
  letter-spacing: 0;
}

html[data-theme="dark"] body[data-screen-label] :is(
  .section-head__title,
  .fsection__title,
  .metier-section h2,
  .metier-guidance__content h2,
  .public-sitemap__section-head h2,
  .faq-section h2,
  .jobs-section h2,
  .team-section h2,
  .t-section h2
) {
  color: var(--text-primary);
}

html[data-theme="dark"] body[data-screen-label] :is(
  .section-head__sub,
  .section-head__intro,
  .fsection__intro
) {
  color: var(--muted-on-dark);
}

/* Grandes bannieres / CTA : gardent l'impact, mais restent sous controle. */
html[data-theme] body[data-screen-label] :is(
  .final-cta__title,
  .summary__title,
  .adv__title,
  .profiles__title,
  .nice-banner__title,
  .review-cta__title,
  .footer-cta__title,
  .faq-cta__title,
  .cta-banner__title,
  .metier-final-cta h2
) {
  font-size: var(--ds-cta-title);
  line-height: 1.02;
  letter-spacing: 0;
}

/* Couleur d'accent principale : le vert menthe reste prioritaire sur les pages ecole. */
html[data-theme] body[data-screen-label] :is(
  .ap-intro__title em,
  .alt-intro__title em,
  .rec-intro__title em,
  .om-intro__manifesto h2 em,
  .xp-intro__title em,
  .loc-intro__title em,
  .section-head__eyebrow,
  .fsection__eyebrow
) {
  color: var(--teal);
}

/* Le vert menthe est un accent de surface sombre. Sur les fonds clairs,
   sa variante foncee conserve le contraste des petits surtitres. */
html[data-theme="light"] body[data-screen-label] :is(
  .section-head__eyebrow,
  .fsection__eyebrow
) {
  color: #176B60;
}

html[data-theme="light"] body[data-screen-label] :is(
  .faq,
  .video-testi,
  .testimonials,
  .alternance
) .section-head__eyebrow,
html[data-theme] body[data-screen-label] .testimonials .section-head__eyebrow {
  color: #176B60 !important;
}

/* Les mots orange restent reserves aux CTA ou a un mot-cle tres ponctuel. */
html[data-theme] body[data-screen-label] :is(
  .final-cta__title em,
  .summary__title em,
  .adv__title em,
  .profiles__title em,
  .nice-banner__title em,
  .review-cta__title em,
  .footer-cta__title em,
  .faq-cta__title em,
  .cta-banner__title em
) {
  color: var(--amber);
}

@media (max-width: 700px) {
  html[data-theme] body[data-screen-label] {
    --ds-section-title: clamp(28px, 8vw, 36px);
    --ds-intro-title: clamp(32px, 9vw, 42px);
    --ds-cta-title: clamp(32px, 9vw, 44px);
    --ds-hero-title: clamp(38px, 11vw, 52px);
  }
  html[data-theme] body[data-screen-label] .sub-hero__title.sub-hero__title--mobile-short {
    font-size: clamp(24px, 8vw, 32px);
  }
  html[data-theme] body[data-screen-label] .sub-hero__title.sub-hero__title--mobile-medium {
    font-size: clamp(16px, 4.8vw, 21px);
  }
  html[data-theme] body[data-screen-label] .sub-hero__title.sub-hero__title--mobile-long {
    font-size: clamp(13px, 4.1vw, 16px);
  }
  html[data-theme] body[data-screen-label] .sub-hero__title.sub-hero__title--mobile-very-long {
    font-size: clamp(10px, 3.25vw, 12.5px);
  }
  html[data-theme] body[data-screen-label] .sub-hero__title.sub-hero__title--mobile-extra-long {
    font-size: clamp(9px, 2.75vw, 11px);
  }
}

/* Cartes de contenu : titre a gauche et icone sur la meme ligne, a droite. */
html[data-theme] body[data-screen-label] :is(
  .overview-card,
  .mod-card,
  .pillar-card,
  .value-card,
  .motivation,
  .benefit,
  .result-card,
  .network-card,
  .loc-fact,
  .tool-card,
  .domain,
  .levels-principle-card,
  .levels-info-card,
  .salary-info-card,
  .metier-card,
  .metier-skill
) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  align-items: start;
  column-gap: 18px;
  row-gap: 14px;
}

html[data-theme] body[data-screen-label] :is(
  .overview-card__icon,
  .mod-card__icon,
  .pillar-card__icon,
  .value-card__icon,
  .motivation__icon,
  .benefit__icon,
  .result-card__icon,
  .network-card__icon,
  .loc-fact__icon,
  .tool-card__logo,
  .domain__icon,
  .levels-principle-card__icon,
  .levels-info-card__icon,
  .salary-info-card__icon,
  .metier-card__icon,
  .metier-skill > svg
) {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0 !important;
}

html[data-theme] body[data-screen-label] :is(
  .overview-card__title,
  .mod-card__title,
  .pillar-card__title,
  .value-card__title,
  .motivation__title,
  .benefit__title,
  .result-card__title,
  .network-card__title,
  .loc-fact__title,
  .tool-card__name,
  .domain__title,
  .levels-principle-card > h3,
  .levels-info-card > h3,
  .salary-info-card > h3,
  .metier-card > h3,
  .metier-skill > h3
) {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  min-width: 0;
  margin: 0 !important;
}

html[data-theme] body[data-screen-label] :is(
  .overview-card__body,
  .mod-card__body,
  .mod-card__metrics,
  .pillar-card__body,
  .value-card__body,
  .motivation__body,
  .benefit__body,
  .result-card__body,
  .network-card__body,
  .loc-fact__body,
  .tool-card__desc,
  .domain__roles,
  .levels-principle-card > p,
  .levels-info-card > p,
  .salary-info-card > p,
  .metier-card > p,
  .metier-skill > p
) {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 0 !important;
}

html[data-theme] body[data-screen-label] :is(
  .mod-card__link,
  .domain__cta
) {
  grid-column: 1 / -1;
}

/* Cartes avec un repere au-dessus du titre. */
html[data-theme] body[data-screen-label] :is(
  .profile-card,
  .adv-card,
  .results-method-card,
  .summary-card,
  .step,
  .alt-card
) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  align-items: start;
  column-gap: 18px;
  row-gap: 12px;
}

html[data-theme] body[data-screen-label] :is(
  .profile-card__label,
  .adv-card__num,
  .results-method-card__badge,
  .summary-card__label,
  .step__num,
  .alt-card__num
) {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: start;
  width: fit-content;
  margin: 0 !important;
}

html[data-theme] body[data-screen-label] :is(
  .profile-card__title,
  .adv-card__title,
  .results-method-card > h3,
  .summary-card__title,
  .step__title,
  .alt-card__title
) {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  margin: 0 !important;
}

html[data-theme] body[data-screen-label] :is(
  .profile-card__icon,
  .adv-card__icon,
  .results-method-card__icon,
  .summary-card__icon,
  .step__icon,
  .alt-card__icon
) {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0 !important;
}

html[data-theme] body[data-screen-label] :is(
  .profile-card__body,
  .adv-card__body,
  .results-method-card > p,
  .summary-card__body,
  .step__body,
  .alt-card__body
) {
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
  margin-top: 0 !important;
}

html[data-theme] body[data-screen-label] :is(
  .summary-card__head,
  .step__top
) {
  display: contents;
}

html[data-theme] body[data-screen-label] .alt-card__num {
  position: static;
  color: rgba(76, 204, 184, .58);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .14em;
}

html[data-theme="light"] body[data-screen-label] .alt-card__num {
  color: #176B60;
}

/* Blocs chiffres : la valeur joue le role du titre. */
html[data-theme] body[data-screen-label] :is(
  .rhythm-stat,
  .nice-stat
) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  align-items: start;
  column-gap: 16px;
  row-gap: 8px;
  text-align: left;
}

html[data-theme] body[data-screen-label] :is(
  .rhythm-stat__num,
  .nice-stat__num
) {
  grid-column: 1;
  grid-row: 1;
  margin: 0 !important;
}

html[data-theme] body[data-screen-label] :is(
  .rhythm-stat__icon,
  .nice-stat__icon
) {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0 !important;
}

html[data-theme] body[data-screen-label] :is(
  .rhythm-stat__label,
  .nice-stat__label,
  .rhythm-stat__desc
) {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Les actions secondaires restent lisibles sur les CTA colores. */
html[data-theme] body[data-screen-label] :is(
  .final-cta,
  .faq-cta,
  .faq-cta-banner,
  .cta-banner,
  .formations-cta,
  .entreprise-cta,
  .review-cta,
  .metier-final-cta
) :is(.btn--ghost, .btn--ghost-teal, .btn--ghost-white, .btn--outline-dark) {
  background: #fff;
  border-color: #fff;
  color: #071615;
}
html[data-theme] body[data-screen-label] :is(
  .final-cta,
  .faq-cta,
  .faq-cta-banner,
  .cta-banner,
  .formations-cta,
  .entreprise-cta,
  .review-cta,
  .metier-final-cta
) :is(.btn--ghost, .btn--ghost-teal, .btn--ghost-white, .btn--outline-dark):hover {
  background: #eefaf8;
  border-color: #eefaf8;
  color: #071615;
}
html[data-theme] body[data-screen-label] :is(
  .final-cta,
  .faq-cta,
  .faq-cta-banner,
  .cta-banner,
  .formations-cta,
  .entreprise-cta,
  .review-cta,
  .metier-final-cta
) :is(.btn--ghost, .btn--ghost-teal, .btn--ghost-white, .btn--outline-dark):focus-visible {
  outline: 3px solid rgba(255, 255, 255, .72);
  outline-offset: 3px;
}