/*
 * CFP Santé UI — Largeurs de contenu
 * Version 1.3
 *
 * Uniformise la largeur des pages Drupal, tout en conservant
 * les compositions 66 % / 33 %.
 */

:root {
  --cfps-content-max: 1280px;
  --cfps-content-gutter: 32px;
  --cfps-columns-gap: 32px;
}

/* Conteneur principal commun à toutes les rubriques */
main .region-content > .region >
#block-secondaire2-content >
.rubrique.full > .layout-title,

main .region-content > .region >
#block-secondaire2-content >
.rubrique.full > .sections {
  width: min(
    calc(100% - (2 * var(--cfps-content-gutter))),
    var(--cfps-content-max)
  ) !important;
  max-width: var(--cfps-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Les paragraphes et leurs boîtes remplissent le conteneur, pas la fenêtre */
main .rubrique.full > .sections > .paragraph,
main .rubrique.full > .sections > .paragraph > .box {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Mise en page à deux colonnes */
main .rubrique.full .box[data-nb-items="2"] {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--cfps-columns-gap) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/*
 * Les deux colonnes totalisent exactement 100 %, espace compris.
 * Cela évite que le 66 % + 33 % + gap dépasse du conteneur.
 */
main .rubrique.full .box[data-nb-items="2"] > section.format-66pct {
  flex: 0 1 calc(66.666% - (var(--cfps-columns-gap) / 2)) !important;
  width: calc(66.666% - (var(--cfps-columns-gap) / 2)) !important;
  max-width: calc(66.666% - (var(--cfps-columns-gap) / 2)) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

main .rubrique.full .box[data-nb-items="2"] > section.format-33pct {
  flex: 0 1 calc(33.333% - (var(--cfps-columns-gap) / 2)) !important;
  width: calc(33.333% - (var(--cfps-columns-gap) / 2)) !important;
  max-width: calc(33.333% - (var(--cfps-columns-gap) / 2)) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Empêche les textes, images et liens longs d'élargir une colonne */
main .rubrique.full .box[data-nb-items="2"] > section,
main .rubrique.full .box[data-nb-items="2"] .paragraph,
main .rubrique.full .box[data-nb-items="2"] .field,
main .rubrique.full .box[data-nb-items="2"] img {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

main .rubrique.full .box[data-nb-items="2"] a {
  overflow-wrap: anywhere;
}

/* Tablette et mobile : une seule colonne */
@media (max-width: 900px) {
  :root {
    --cfps-content-gutter: 20px;
    --cfps-columns-gap: 20px;
  }

  main .rubrique.full .box[data-nb-items="2"] {
    display: block !important;
  }

  main .rubrique.full .box[data-nb-items="2"] > section.format-66pct,
  main .rubrique.full .box[data-nb-items="2"] > section.format-33pct,
  main .rubrique.full .sections section.format-66pct,
  main .rubrique.full .sections section.format-33pct {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 var(--cfps-columns-gap) !important;
  }

  /*
   * Certaines pages utilisent une section 66 % seule, sans conteneur
   * data-nb-items="2". Sur mobile, elle doit elle aussi occuper toute
   * la largeur disponible.
   */
  main .rubrique.full .sections > .paragraph,
  main .rubrique.full .sections > .paragraph > .box,
  main .rubrique.full .sections > .paragraph > .box > section {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }


  /*
   * Drupal peut conserver une largeur interne de 75 % sur le paragraphe
   * placé dans une section 66 %. Sur mobile, tous les niveaux internes
   * doivent réellement remplir la section.
   */
  html body main .rubrique.full .sections section.format-66pct > .paragraph,
  html body main .rubrique.full .sections section.format-33pct > .paragraph,
  html body main .rubrique.full .sections section.format-66pct > .contextual-region,
  html body main .rubrique.full .sections section.format-33pct > .contextual-region,
  html body main .rubrique.full .sections section.format-66pct .paragraph--type--texte,
  html body main .rubrique.full .sections section.format-33pct .paragraph--type--texte,
  html body main .rubrique.full .sections section.format-66pct .text-formatted,
  html body main .rubrique.full .sections section.format-33pct .text-formatted,
  html body main .rubrique.full .sections section.format-66pct .field--name-field-body,
  html body main .rubrique.full .sections section.format-33pct .field--name-field-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

}

@media (max-width: 600px) {
  :root {
    --cfps-content-gutter: 16px;
  }
}

/* ==========================================================================
   Correctif v1.3 — largeur réelle des textes sur mobile
   Ciblage du DOM Drupal observé dans l’inspecteur.
   ========================================================================== */

@media (max-width: 900px) {
  html body main
  #block-secondaire2-content
  .rubrique.full
  .sections
  .box[data-nb-items="2"]
  > section.bloc.format-66pct,

  html body main
  #block-secondaire2-content
  .rubrique.full
  .sections
  .box[data-nb-items="2"]
  > section.bloc.format-33pct {
    display: block !important;
    flex: 0 0 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  html body main
  #block-secondaire2-content
  .rubrique.full
  .sections
  .box[data-nb-items="2"]
  > section.bloc.format-66pct
  > .paragraph,

  html body main
  #block-secondaire2-content
  .rubrique.full
  .sections
  .box[data-nb-items="2"]
  > section.bloc.format-33pct
  > .paragraph,

  html body main
  #block-secondaire2-content
  .rubrique.full
  .sections
  .box[data-nb-items="2"]
  > section.bloc.format-66pct
  .field--name-field-body,

  html body main
  #block-secondaire2-content
  .rubrique.full
  .sections
  .box[data-nb-items="2"]
  > section.bloc.format-33pct
  .field--name-field-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
  }
}