/*
 * CFP Santé UI — Typographie v4.2
 * Portée Drupal élargie : .cfps-page reste compatible mais n'est plus requis.
 */

@font-face {
  font-family: "Outfit CFPS";
  src: url("../fonts/Outfit-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Outfit CFPS";
  src: url("../fonts/Outfit-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Outfit CFPS";
  src: url("../fonts/Outfit-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Outfit CFPS";
  src: url("../fonts/Outfit-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --cfps-font-display: "Outfit CFPS", "Avenir Next", Avenir, Arial, sans-serif;
  --cfps-color-text: #1f2933;
  --cfps-color-muted: #5b6770;
  --cfps-color-primary: #00a19b;
  --cfps-color-primary-dark: #007a76;
}

/* ==========================================================================
   H1 Drupal, généré hors du contenu éditorial
   ========================================================================== */

.layout-title h1,
.page-title,
h1.page-title,
.block-page-title-block h1 {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: .625rem auto 1.15rem;
  padding: 1.8rem 2rem 0;
  color: var(--cfps-color-text);
  font-family: var(--cfps-font-display);
  font-size: clamp(2.75rem, 4.45vw, 4.2rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-align: left;
  text-wrap: balance;
}

.layout-title h1::before,
.page-title::before,
h1.page-title::before,
.block-page-title-block h1::before {
  content: none !important;
  display: none !important;
}

.layout-title h1::after,
.page-title::after,
h1.page-title::after,
.block-page-title-block h1::after {
  content: "";
  display: inline-block;
  width: .18em;
  height: .18em;
  margin-left: .14em;
  margin-bottom: .075em;
  border: 0;
  border-radius: 50%;
  background: var(--cfps-color-primary);
}

/* ==========================================================================
   Titres internes au contenu Drupal
   ========================================================================== */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h2 {
  position: relative;
  margin: 2.15rem 0 .75rem;
  padding: 0;
  border: 0;
  color: var(--cfps-color-text);
  font-family: var(--cfps-font-display);
  font-size: clamp(1.65rem, 2.4vw, 2.2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: left;
  text-decoration: none;
}

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h2::before {
  content: none !important;
  display: none !important;
}

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h2::after {
  content: "";
  display: inline-block;
  width: .19em;
  height: .19em;
  margin-left: .18em;
  margin-bottom: .08em;
  border: 0;
  border-radius: 50%;
  background: var(--cfps-color-primary);
}

/* ==========================================================================
   Correction Drupal : certains titres contiennent un paragraphe
   ========================================================================== */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) :where(h1, h2, h3, h4, h5, h6) > p {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   H3 — Sous-section
   ========================================================================== */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h3 {
  margin: 1.8rem 0 .6rem;
  padding: 0;
  border: 0;
  color: var(--cfps-color-primary-dark);
  font-family: var(--cfps-font-display);
  font-size: clamp(1.28rem, 1.7vw, 1.55rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.012em;
  text-align: left;
  text-decoration: none;
}

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h3::before,
:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h3::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   H4 — Intertitre
   ========================================================================== */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h4 {
  margin: 1.45rem 0 .45rem;
  padding: 0 0 0 .8rem;
  border: 0;
  border-left: 3px solid rgba(0, 161, 155, .55);
  color: var(--cfps-color-text);
  font-family: var(--cfps-font-display);
  font-size: clamp(1.08rem, 1.35vw, 1.24rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.006em;
  text-align: left;
}

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h4::before,
:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h4::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   H5 — Repère discret
   ========================================================================== */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h5 {
  display: inline-block;
  margin: 1.25rem 0 .45rem;
  padding: .28rem .55rem;
  border: 1px solid rgba(0, 161, 155, .18);
  border-radius: 5px;
  background: #eef8f7;
  color: var(--cfps-color-primary-dark);
  font-family: var(--cfps-font-display);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
}

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h5::before,
:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h5::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   H6 — Légende / niveau secondaire
   ========================================================================== */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h6 {
  margin: 1.1rem 0 .4rem;
  padding: 0;
  border: 0;
  color: var(--cfps-color-muted);
  font-family: var(--cfps-font-display);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .09em;
  text-transform: uppercase;
}

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h6::before,
:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h6::after {
  content: none !important;
  display: none !important;
}

/* Les titres spécifiques des modules gardent les règles de cfps-modules.css. */
#bloc15376 .view-header h2,
#bloc37734 .view-header h2 {
  margin-top: 0;
}

@media (max-width: 768px) {
  .layout-title h1,
  .page-title,
  h1.page-title,
  .block-page-title-block h1 {
    margin-bottom: 1rem;
    padding: 1.25rem 1.25rem 0;
    font-size: clamp(1.85rem, 7.8vw, 2.35rem);
    line-height: 1.04;
    letter-spacing: -.028em;
    text-wrap: pretty;
  }

  :where(
    .cfps-page,
    main .region-content,
    main .layout-content,
    main .paragraph,
    main .node,
    main article
  ) h2 {
    margin-top: 1.8rem;
  }
}


@media (max-width: 420px) {
  .layout-title h1,
  .page-title,
  h1.page-title,
  .block-page-title-block h1 {
    font-size: clamp(1.8rem, 7.6vw, 2.05rem) !important;
    line-height: 1.05 !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
}

@media (max-width: 360px) {
  .layout-title h1,
  .page-title,
  h1.page-title,
  .block-page-title-block h1 {
    font-size: 1.78rem !important;
  }
}


/* ==========================================================================
   Ajustements v3.2 — hiérarchie et corps de texte
   ========================================================================== */

/* Conserve la police de base du thème pour les textes courants. */
:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) :where(p, li, td, th, address) {
  font-family: inherit !important;
  font-weight: 400;
}

/* Titre de section Drupal : légèrement plus affirmé que les H2 internes. */
main h2.paragraph_field_titre,
main h2.paragraph-field-titre {
  margin: 2.2rem 0 1rem !important;
  font-size: clamp(1.8rem, 2.5vw, 2.2rem) !important;
  font-weight: 500 !important;
  line-height: 1.14 !important;
}

/* H2 contenus dans un bloc : un cran en dessous du titre de section. */
main .bloc h2:not(.paragraph_field_titre):not(.paragraph-field-titre),
main section h2:not(.paragraph_field_titre):not(.paragraph-field-titre),
main .paragraph h2:not(.paragraph_field_titre):not(.paragraph-field-titre) {
  font-size: clamp(1.5rem, 2vw, 1.82rem) !important;
  line-height: 1.18 !important;
}

/* H5 : repère sobre, sans effet d'étiquette lourde. */
:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h5 {
  display: block !important;
  width: fit-content;
  margin: 1.3rem 0 .45rem !important;
  padding: 0 0 .18rem !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(0, 161, 155, .45) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cfps-color-primary-dark) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase;
}

/* H6 : discret mais lisible, sans bloc coloré. */
:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) h6 {
  display: block !important;
  margin: 1.15rem 0 .4rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cfps-color-muted) !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase;
}



/* ==========================================================================
   Ajustement v3.3 — espacement des titres de bloc
   ========================================================================== */

main .bloc > h2:not(.paragraph_field_titre):not(.paragraph-field-titre):first-child,
main section > h2:not(.paragraph_field_titre):not(.paragraph-field-titre):first-child,
main .paragraph > h2:not(.paragraph_field_titre):not(.paragraph-field-titre):first-child {
  margin-top: .9rem !important;
}

main .bloc h2:not(.paragraph_field_titre):not(.paragraph-field-titre),
main section h2:not(.paragraph_field_titre):not(.paragraph-field-titre),
main .paragraph h2:not(.paragraph_field_titre):not(.paragraph-field-titre) {
  margin-bottom: .65rem !important;
}

/* ==========================================================================
   Ajustement v3.4 — réduit l'espace avant les H2 internes
   ========================================================================== */

/* Le vrai titre de section garde son rythme actuel. */
main h2.paragraph_field_titre,
main h2.paragraph-field-titre {
  margin-top: 2.2rem !important;
}

/* Les H2 de bloc sont rapprochés du contenu précédent. */
main h2:not(.paragraph_field_titre):not(.paragraph-field-titre) {
  margin-top: 1.05rem !important;
}

/* ==========================================================================
   Ajustement v3.5 — espace avant les titres de bloc
   ========================================================================== */

/* Cible le bloc Drupal lui-même, pas seulement son H2. */
html body main .paragraph .box > .bloc,
html body main .paragraph > .box > .bloc,
html body main .bloc {
  padding-top: 0 !important;
}

html body main .bloc > h2:not(.paragraph_field_titre):not(.paragraph-field-titre),
html body main .bloc h2:not(.paragraph_field_titre):not(.paragraph-field-titre) {
  margin-top: .35rem !important;
  margin-bottom: .55rem !important;
}

/* ==========================================================================
   Ajustement v3.6 — Titre de bloc ciblé sur le DOM réel
   HTML : <h2 class="paragraph_field_titre">Titre de bloc</h2>
   ========================================================================== */

/* Réduit uniquement l'espace au-dessus du titre de bloc. */
html body main h2.paragraph_field_titre {
  margin-top: .85rem !important;
  margin-bottom: .7rem !important;
}

/* Si le titre est le premier élément de son conteneur, on le rapproche encore. */
html body main :where(
  .bloc,
  .box,
  .paragraph,
  section,
  article
) > h2.paragraph_field_titre:first-child {
  margin-top: .35rem !important;
}



/* ==========================================================================
   Ajustement v3.7 — H2 internes
   ========================================================================== */

/* Un peu plus d'air au-dessus des H2 placés dans le contenu d'un bloc. */
html body main :where(
  .bloc,
  .paragraph,
  section,
  article
) h2:not(.paragraph_field_titre):not(.paragraph-field-titre) {
  margin-top: 1.25rem !important;
}


/* ==========================================================================
   Ajustement v3.8 — espace entre le titre de bloc et le H2 interne
   ========================================================================== */

/*
 * Cas réel observé :
 * <h2 class="paragraph_field_titre">Titre de bloc</h2>
 * <h2>Titre 2</h2>
 */
html body main h2.paragraph_field_titre + h2:not(.paragraph_field_titre),
html body main h2.paragraph-field-titre + h2:not(.paragraph-field-titre) {
  margin-top: 1.55rem !important;
}


/* ==========================================================================
   Ajustement v3.9 — davantage d'espace avant les H2 de contenu
   ========================================================================== */

/*
 * Le titre de bloc Drupal garde son rythme propre.
 * Les H2 éditoriaux placés dans le contenu descendent légèrement.
 */
html body main :where(
  .bloc,
  .paragraph,
  .text-formatted,
  .field--name-field-body,
  section,
  article
) h2:not(.paragraph_field_titre):not(.paragraph-field-titre) {
  margin-top: 1.75rem !important;
  margin-bottom: .7rem !important;
}

/* Cas où le H2 suit le titre de bloc dans le même conteneur. */
html body main h2.paragraph_field_titre ~ h2:not(.paragraph_field_titre),
html body main h2.paragraph-field-titre ~ h2:not(.paragraph-field-titre) {
  margin-top: 1.75rem !important;
}