/* ==========================================================================
   CFP Santé UI — Core v2.5
   Portée Drupal élargie : le wrapper .cfps-page n'est plus obligatoire.
   Les styles s'appliquent au contenu situé dans <main>, sans toucher au
   header, aux menus ni au footer.
   ========================================================================== */

:root {
  --cfps-primary: #00a19b;
  --cfps-primary-dark: #007a76;
  --cfps-text: #1f2933;
  --cfps-text-light: #5b6770;
  --cfps-background: #fff;
  --cfps-background-alt: #f7fbfb;
  --cfps-border: #dde8e8;

  --cfps-success: #2e8b57;
  --cfps-warning: #e8a200;
  --cfps-danger: #c83d3d;

  --cfps-radius-s: 8px;
  --cfps-radius-m: 12px;
  --cfps-radius-pill: 999px;

  --cfps-shadow-s: 0 2px 8px rgba(0, 0, 0, .05);
  --cfps-shadow-m: 0 8px 24px rgba(0, 0, 0, .08);

  --cfps-space-xs: .25rem;
  --cfps-space-s: .5rem;
  --cfps-space-m: 1rem;
  --cfps-space-l: 1.5rem;
  --cfps-space-xl: 2.5rem;
  --cfps-space-xxl: 4rem;
}



/* ==========================================================================
   Largeur et alignement du contenu principal
   Restaure les marges latérales perdues lors de l’élargissement des sélecteurs.
   ========================================================================== */

main .layout > .layout-content {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}

/*
 * Les éléments internes utilisent toute la largeur disponible du conteneur,
 * sans ajouter une deuxième marge latérale.
 */
main .layout > .layout-content > .sections,
main .layout > .layout-content > .region-content {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

@media (max-width: 768px) {
  /*
   * Les gouttières mobiles sont gérées par cfps-layout-widths.css.
   * On neutralise ici le padding du Core pour éviter leur cumul.
   */
  main .layout > .layout-content {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* ==========================================================================
   Contenu éditorial Drupal
   ========================================================================== */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) {
  color: var(--cfps-text);
  line-height: 1.65;
}

/* Paragraphes */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) p {
  margin-top: 0;
  margin-bottom: 1rem;
}

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) p:last-child {
  margin-bottom: 0;
}

/* Listes */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) ul,
:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) ol {
  margin: .25rem 0 1.5rem;
  padding-left: 1.5rem;
}

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) li {
  margin-bottom: .4rem;
  line-height: 1.55;
}

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) ul li::marker {
  color: var(--cfps-primary);
}

/* Liens éditoriaux — les boutons conservent leurs propres styles */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) :where(p, li, td, address) a:not(.button):not(.btn) {
  color: var(--cfps-primary-dark);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: rgba(0, 122, 118, .35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    color .2s ease,
    text-decoration-color .2s ease;
}

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) :where(p, li, td, address) a:not(.button):not(.btn):hover {
  color: var(--cfps-primary);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

main a:focus-visible,
.cfps-page a:focus-visible {
  outline: 3px solid rgba(0, 161, 155, .3);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Citations */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) blockquote {
  margin: 1.4rem 0;
  padding: 1rem 1.25rem;
  border: 0;
  border-left: 4px solid var(--cfps-primary);
  border-radius: 0 10px 10px 0;
  background: var(--cfps-background-alt);
  color: var(--cfps-text-light);
  line-height: 1.55;
}

/* Séparateurs */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) hr {
  height: 1px;
  margin: 2rem 0;
  border: 0;
  background: rgba(0, 0, 0, .12);
}

/* Tableaux */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) table {
  width: 100%;
  border-collapse: collapse;
}

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) th,
:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) td {
  padding: .9rem;
  border-bottom: 1px solid var(--cfps-border);
  text-align: left;
  vertical-align: top;
}

/* Formulaires dans le contenu */

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) :where(input, textarea, select, button, label) {
  font-family: inherit;
}

@media (max-width: 768px) {
  :where(
    .cfps-page,
    main .region-content,
    main .layout-content,
    main .paragraph,
    main .node,
    main article
  ) ul,
  :where(
    .cfps-page,
    main .region-content,
    main .layout-content,
    main .paragraph,
    main .node,
    main article
  ) ol {
    padding-left: 1.25rem;
  }
}

/* ==========================================================================
   Ajustements v2.2 — liens éditoriaux
   ========================================================================== */

/* Survol plus discret : pas d'épaississement brutal du soulignement. */
:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) :where(p, li, td, address) a:not(.button):not(.btn):not([class*="button"]):not([class*="bouton"]):hover {
  color: var(--cfps-primary-dark) !important;
  text-decoration-color: rgba(0, 122, 118, .7) !important;
  text-decoration-thickness: 1px !important;
  background: transparent !important;
}



/* ==========================================================================
   Ajustements v2.3
   ========================================================================== */

/* 1. Liens éditoriaux simples : plus contrastés, sans soulignement */
:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) :where(p, li, td, address) a:not(.button):not(.btn):not([class*="button"]):not([class*="bouton"]) {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) :where(p, li, td, address) a:not(.button):not(.btn):not([class*="button"]):not([class*="bouton"]):hover,
:where(
  .cfps-page,
  main .region-content,
  main .layout-content,
  main .paragraph,
  main .node,
  main article
) :where(p, li, td, address) a:not(.button):not(.btn):not([class*="button"]):not([class*="bouton"]):focus-visible {
  color: #006d69 !important;
  background: rgba(0, 161, 155, .09) !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
}

/* 2. Largeur principale : couvre aussi les pages dont la structure Drupal
   ne place pas .layout-content directement sous .layout (ex. Nos cliniques). */
main .layout-content:not(.layout-content .layout-content) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}

@media (max-width: 768px) {
  main .layout-content:not(.layout-content .layout-content) {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}


/* ==========================================================================
   Ajustements v2.4
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Images éditoriales
   Coins arrondis, sans bordure ni ombre.
   Les galeries, logos, icônes, cartes et images d’actualités gardent
   leurs propres règles.
   -------------------------------------------------------------------------- */

html body main :where(
  .layout-content,
  .region-content,
  .paragraph,
  .field--name-field-body,
  .text-formatted,
  article
) img:not(
  .photoswipe-gallery img,
  .teaser.actualite img,
  .teaser.evenement img,
  .logo img,
  .site-logo img,
  .brand img,
  [class*="icon"] img,
  [class*="logo"] img
) {
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Pas d’ombre ajoutée au survol pour les images éditoriales simples. */
html body main :where(
  .layout-content,
  .region-content,
  .paragraph,
  .field--name-field-body,
  .text-formatted,
  article
) img:not(
  .photoswipe-gallery img,
  .teaser.actualite img,
  .teaser.evenement img,
  .logo img,
  .site-logo img,
  .brand img,
  [class*="icon"] img,
  [class*="logo"] img
):hover {
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   2. Largeur cohérente des pages
   Certaines pages Drupal placent les blocs dans .sections ou dans une .box
   directement sous .layout-content. On contraint donc l’enveloppe éditoriale
   la plus haute, sans toucher aux sous-grilles internes.
   -------------------------------------------------------------------------- */

html body main > .layout,
html body main .layout-content > .sections,
html body main .layout-content > .paragraph,
html body main .layout-content > .box,
html body main .layout-content > article,
html body main .region-content > .layout,
html body main .region-content > .sections {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Marges latérales visibles sur desktop. */
html body main .layout-content > .sections,
html body main .layout-content > .paragraph,
html body main .layout-content > .box,
html body main .layout-content > article,
html body main .region-content > .sections {
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}

/* Évite les doubles marges lorsqu’un conteneur est déjà imbriqué
   dans une enveloppe elle-même contrainte. */
html body main .layout-content > .sections :where(
  .sections,
  .paragraph,
  .box,
  article
) {
  max-width: none !important;
}

@media (max-width: 768px) {
  html body main .layout-content > .sections,
  html body main .layout-content > .paragraph,
  html body main .layout-content > .box,
  html body main .layout-content > article,
  html body main .region-content > .sections {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}


/* ==========================================================================
   Ajustement v2.5 — marges mobiles
   cfps-layout-widths.css reste l’unique source des gouttières.
   ========================================================================== */

@media (max-width: 768px) {
  html body main .layout-content,
  html body main .layout-content > .sections,
  html body main .region-content > .sections {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}


/* ==========================================================================
   Correctif — conserver une gouttière dans les cartes Actualités sur mobile
   Restaure le correctif validé : 14 px, uniquement sous 600 px.
   ========================================================================== */

@media (max-width: 600px) {
  html body main article.teaser.actualite
  > .layout
  > .layout-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}