/*
 * 2IIA — systeme typographique commun.
 * Les rem suivent les preferences de lecture et le zoom ; les vw apportent
 * une variation moderee avec la fenetre. Ne jamais redimensionner html en JS.
 * Cette couche prioritaire remplace les anciennes tailles !important sans
 * ajouter de selecteurs artificiels. Polices, graisses et couleurs conservees.
 */
@layer iia-typography {
  :root {
    --iia-text-small: clamp(.875rem, .85rem + .1vw, .9375rem);
    --iia-text-body: clamp(1rem, .95rem + .2vw, 1.125rem);
    --iia-text-lead: clamp(1.125rem, 1rem + .5vw, 1.5rem);
    --iia-title-card: clamp(1.25rem, 1.1rem + .5vw, 1.625rem);
    --iia-title-section: clamp(1.75rem, 1.4rem + 1.2vw, 3rem);
    --iia-title-page: clamp(2.25rem, 1.85rem + 2.8vw, 5.6rem);
    --iia-title-display: clamp(2.5rem, 2rem + 3.5vw, 7.15rem);
    --iia-leading-body: 1.65;
    --iia-leading-title: 1.12;
    --iia-measure: 68ch;
    --iia-space-text: clamp(.75rem, .6rem + .4vw, 1.25rem);
    --iia-space-block: clamp(1.25rem, 1rem + 1vw, 2.5rem);
  }

  body {
    font-size: var(--iia-text-body);
    line-height: var(--iia-leading-body);
  }

  /* Roles semantiques : aucune dependance au nom du gabarit FR ou EN. */
  :where(h1, h2, h3, h4, h5, h6):not(:where(#arbree-header *, nav *, footer *, .mega-dropdown *, .nc-screen *, #chatbot-2iia *, [data-iia-type="preserve"] *)) {
    font-size: var(--iia-heading-size, var(--iia-title-card)) !important;
    line-height: var(--iia-leading-title) !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: manual !important;
    text-wrap: balance;
    block-size: auto !important;
  }
  h1 { --iia-heading-size: var(--iia-title-page); }
  h2 { --iia-heading-size: var(--iia-title-section); }
  :where(h3, h4, h5, h6) { --iia-heading-size: var(--iia-title-card); }
  /* Les titres de cartes restent proportionnes a leur contenu. */
  :where(.card, .cat-card, .future-card, .lx-card, .ai-item, .sw-mod, .sw-day-card) h2 {
    --iia-heading-size: var(--iia-title-card);
  }
  :where(h1, h2, h3, h4, h5, h6) :where(em, strong, b, span):not(:where([class*="icon"], [class*="ico"], .badge, .count)) {
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: inherit !important;
  }

  :where(p, li, dd, dt, blockquote):not(:where(#arbree-header *, nav *, footer *, .mega-dropdown *, .nc-screen *, #chatbot-2iia *, [data-iia-type="preserve"] *)) {
    font-size: var(--iia-copy-size, var(--iia-text-body)) !important;
    line-height: var(--iia-leading-body) !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: manual !important;
    white-space: normal !important;
  }
  /* Paragraphes de lecture : une longueur de ligne stable, sans changer
     l'alignement ni le centrage choisis par chaque page. */
  :where(p):not(:where(#arbree-header *, nav *, footer *, .mega-dropdown *, .nc-screen *, #chatbot-2iia *, [class*="stat"], [class*="num"], [class*="price"], [class*="quote"], [class*="eyebrow"], [class*="meta"], [data-iia-type="preserve"] *)) {
    max-inline-size: var(--iia-measure);
  }
  :where(.hx-lead, .ai-hero__lead, .sw-hero__lead, .sw-hero__lede, .sw-lead, .cat-intro, .lead, .intro > p) {
    --iia-copy-size: var(--iia-text-lead);
  }
  :where(.ai-eyebrow, .sw-eyebrow, .school-community__eyebrow, .kicker, .cat-card-meta, .future-card__meta, .ai-step__meta, figcaption, small) {
    font-size: var(--iia-text-small) !important;
    --iia-copy-size: var(--iia-text-small);
    line-height: 1.45 !important;
  }
  :where(.sw-cta__quote, .ai-cta__quote) {
    --iia-copy-size: var(--iia-title-section);
  }
  :where(p[class*="stat"], p[class*="num"], p[class*="price"]) {
    --iia-copy-size: var(--iia-title-section);
  }
  :where(.sw-spec__label, .ai-spec__label, .cat-card-tag, .cat-card-num, .cat-card-arrow, .sw-secthead__meta, .ai-secthead__meta) {
    font-size: var(--iia-text-small) !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }
  :where(.feature, .course-text, .faq-answer, .sw-block__content, .ai-item__desc) {
    font-size: var(--iia-text-body) !important;
    line-height: var(--iia-leading-body) !important;
    overflow-wrap: anywhere !important;
  }

  /* Navigation et pied de page : role compact, lisible et compatible zoom. */
  :where(#arbree-header .arbree-nav-link, .mega-dropdown p, .mega-dropdown h3,
    .mega-dropdown .mx-card__title, .mega-dropdown .mx-link__title,
    footer p, footer li, footer a) {
    font-size: var(--iia-text-small) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #arbree-header .arbree-nav-link {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    flex-shrink: 0 !important;
    min-inline-size: max-content !important;
  }
  #arbree-header .arbree-nav-group > .arbree-dropdown {
    flex-shrink: 0 !important;
    min-inline-size: max-content !important;
  }
  footer h3 {
    font-size: var(--iia-title-card) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  footer .sw-footer-container {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important;
  }
  footer .sw-footer-col { min-inline-size: 0 !important; }

  /* Les cartes s'adaptent a leur propre largeur, pas a celle du moniteur. */
  :where(.cat-card, .future-card, .lx-card, .ai-item, .sw-mod, .sw-day-card) {
    container-type: inline-size;
    min-inline-size: 0 !important;
  }
  @supports (font-size: 1cqi) {
    :where(.cat-card, .future-card, .lx-card, .ai-item, .sw-mod, .sw-day-card) :where(h2, h3, h4) {
      --iia-heading-size: clamp(1.25rem, 1.1rem + 1cqi, 1.625rem);
    }
  }

  /* Le texte des controles peut aller a la ligne, sans toucher aux icones. */
  :where(button, input, select, textarea) {
    font-size: max(1rem, var(--iia-text-small));
    line-height: 1.4;
  }
  :where(button, .btn, .button, .futurist-button, .hb-item, .sw-btn, .ai-btn, .cat-filter-btn, .cat-bottom-cta, .bc-bottom-cta, .school-community__cta):not(:where(#arbree-header *, nav *, .mega-dropdown *, .nc-screen *, #chatbot-2iia *)) {
    font-size: var(--iia-text-body) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    block-size: auto !important;
    min-block-size: 2.75rem;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    box-sizing: border-box !important;
  }
  :where(.hb-item__t, .sw-btn__text, .ai-btn__text) {
    font-size: inherit !important;
    white-space: normal !important;
  }

  /* Cartes catalogue : supprimer le carre impose qui coupe les titres. */
  .cat-scope .cat-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)) !important;
  }
  .cat-scope .cat-card {
    aspect-ratio: auto !important;
    min-block-size: 20rem;
    /* Le fond anime du survol doit rester dans sa carte. La hauteur reste
       automatique : ce masquage ne sert jamais a faire rentrer le texte. */
    overflow: hidden !important;
  }
  .cat-scope .cat-card > a {
    min-block-size: 20rem;
    block-size: 100% !important;
  }
  :where(.bc-card, .bc-card > a, .bc-card > a > div, .bc-card-foot, .bc-bottom > *) {
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }
  .bc-card-foot { flex-wrap: wrap !important; }
  .bc-card > a {
    padding: clamp(1rem, .75rem + 1vw, 1.5rem) !important;
  }

  /* Les colonnes acceptent la largeur reelle du texte. */
  :where(.hx-copy, .ai-hero__lede, .ai-hero__side, .sw-hero__lede, .sw-hero__side, .school-community__content, .cat-card-content, .cat-hero > *, .sw-grid > *, .ai-grid > *) {
    min-inline-size: 0 !important;
  }
  .sw-grid > .sw-blocks { grid-column: 1 / -1 !important; }
  :where(.hx-actions, .hx-shortcuts, .sw-cta__buttons, .ai-cta__buttons, .cat-filters) {
    flex-wrap: wrap !important;
    gap: var(--iia-space-text);
  }

  /* Une largeur exprimee en rem tient aussi compte du zoom de texte. */
  @media (max-width: 64rem) {
    :where(.ai-hero__main, .sw-hero__main, .cat-hero, .bc-bottom, .school-community__layout) {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: var(--iia-space-block) !important;
    }
    :where(.ai-hero__lede, .ai-hero__side, .sw-hero__lede, .sw-hero__side) {
      grid-column: 1 / -1 !important;
    }
    :where(.ai-cta__num, .ai-cta__quote, .ai-cta__buttons, .sw-cta__num, .sw-cta__quote, .sw-cta__buttons) {
      grid-column: 1 / -1 !important;
      min-inline-size: 0 !important;
    }
  }

  /* Le titre de marque garde une echelle d'affiche sur telephone. */

  @media print {
    :root {
      --iia-text-body: 11pt;
      --iia-text-small: 9pt;
      --iia-title-page: 26pt;
      --iia-title-display: 30pt;
      --iia-title-section: 19pt;
      --iia-title-card: 13pt;
      --iia-text-lead: 12pt;
    }
  }
}