/* ─────────────────────────────────────────────────────────────
   PROJET SOUTENU — vue article (default.php)
   ──────────────────────────────────────────────────────────── */

/* Pill période dans le hero, avant le titre */
.article__periode {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--color-contrast);
  background-color: var(--color-white);
  border-radius: var(--radius-pill);
  padding-block: 0.25em;
  padding-inline: 0.875em;
  margin-block-end: var(--space-xs);
}

/* Layout deux-colonnes : corps + sidebar
   Colonnes explicites pour éviter tout conflit avec les grid-area
   déclarées globalement dans activite.css (.com-content-article__body,
   .article__sidebar). */
.article__projet-layout {
  display: grid;
  grid-template-columns: 1fr clamp(180px, 22vw, 400px);
  gap: var(--space-2xl);
  align-items: start;
}

/* Reset du grid-area: body déclaré globalement dans activite.css */
.article__projet-layout .com-content-article__body {
  grid-area: auto;
  min-width: 0;
}

/* Sections dans la sidebar : espacement vertical */
.article__sidebar--projet .article__team {
  margin-block-end: var(--space-lg);
}

/* Pas d'uppercase pour les noms dans ce contexte */
.article__sidebar--projet .article__team__nom {
  font-size: var(--text-h3-size);
  font-weight: 800;
  text-transform: none;
  line-height: 1.3;
}

/* Galerie logos en bas du corps */
.article__logos {
  margin-block-start: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

.article__logos img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* Mobile : colonne unique */
@media (max-width: 768px) {
  .article__projet-layout {
    grid-template-columns: 1fr;
  }

  .article__sidebar--projet {
    width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────── */

.com-content-article__body>.wf-columns:not(.fullwidth){
  margin-block-end: var(--space-xl);
  gap: var(--space-3xl);
}

:is(p, ul, ol, blockquote, div)+.wf-columns:not(.fullwidth){
  margin-block-start: var(--space-3xl);
}

/* 3 colonnes : centré avec gap, sans étirer pour remplir la largeur */
/* .wf-columns:has(> .wf-column:nth-child(3):last-child) {
  justify-content: center;
  gap: var(--space-2xl);
}

.wf-columns:has(> .wf-column:nth-child(3):last-child) > .wf-column {
  flex-grow: 0;
} */

.wf-column {
  position: relative;
}

.wf-column img {
  border-radius: var(--radius-lg);
}

/* Décoration SVG sur les images sans "logo" ni "infographie" dans le src, et hors blocs infographie */
/* :not(.wf-columns) exclut le conteneur externe qui a aussi la classe wf-column */
.com-content-article__body .wf-column:not(.wf-columns):has(img:not([src*="logo"]):not([src*="forme"]):not([src*="infographie"])):not(:has(.infographie))::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background-image: url('../../images/forme-triple.svg');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Première colonne : décoration en haut à gauche — suit le débordement de 6rem */
.com-content-article__body .wf-column:not(.wf-columns):first-child:has(img:not([src*="logo"]):not([src*="infographie"])):not([src*="forme"]):not(:has(.infographie))::after {
  top: -1.5rem;
  left: calc(-1.5rem - var(--img-bleed));
  transform: scale(0.75);
}

/* Deuxième colonne ou plus : décoration en bas à droite — suit le débordement de 6rem */
.com-content-article__body .wf-column:not(.wf-columns):not(:first-child):has(img:not([src*="logo"]):not([src*="infographie"])):not([src*="forme"]):not(:has(.infographie))::after {
  bottom: 0;
  right: calc(-2.5rem - var(--img-bleed));
  transform: rotate(180deg) scale(0.75);
  background-image: url('../../images/forme-triple.svg');
}

.wf-column :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}


/* ─────────────────────────────────────────────
   DÉBORDEMENT IMAGE — colonne 1 à gauche, colonne 2+ à droite
   --img-bleed : amplitude du débordement, max 6rem à partir de 768px.
   Le clamp() ramène la valeur à 0 sur mobile → pas de scroll horizontal.
   Exclut les infographies et les logos.
   ───────────────────────────────────────────── */

:root {
  --img-bleed: clamp(0rem, 12.5vw, 6rem); /* 12.5vw = 6rem @ 768px */
}

@media (max-width: 768px) {
  :root { --img-bleed: 0rem; }  
}

.com-content-article__body
  .wf-column:not(.wf-columns):first-child:has(> p > img:not([src*="logo"]):not([src*="infographie"])):not([src*="forme"]):not(:has(.infographie)) {
  > p:has(> img) {
    margin-inline-start: calc(-1 * var(--img-bleed));
    width: calc(100% + var(--img-bleed));
  }
  > p > img { width: 100%; }
}

.com-content-article__body
  .wf-column:not(.wf-columns):not(:first-child):has(> p > img:not([src*="logo"]):not([src*="infographie"])):not([src*="forme"]):not(:has(.infographie)) {
  > p:has(> img) {
    margin-inline-end: calc(-1 * var(--img-bleed));
    width: calc(100% + var(--img-bleed));
  }
  > p > img { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   ACCUEIL — espacement homogène entre blocs
   :where() → spécificité 0,0,0 : les règles h2 et .fullwidth adjacents
   continuent de gagner normalement.
   ──────────────────────────────────────────────────────────── */
:where(.accueil-body) > * {
  margin-block-end: var(--space-xl);
}

/* 0,2,0 — écrase .fullwidth { margin-block: space-4xl } (0,1,0) */
.accueil-body > .fullwidth {
  margin-block-start: 0;
  margin-block-end: var(--space-xl);
}


/* ─────────────────────────────────────────────────────────────
   ACCORDÉON RLTA — FAQ / questions-réponses
   ──────────────────────────────────────────────────────────── */

[data-rlta-element="container"] {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-block-end: var(--space-lg);
}

[data-rlta-element="button"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
  padding-inline: var(--space-xl);
  background-color: var(--color-primary);
  color: var(--color-white);
  cursor: pointer;
  user-select: none;
  border-block-start: 2px solid oklch(55% 0.07 228deg);
  transition: background-color 0.15s ease;
}

[data-rlta-element="button"]:first-child {
  border-block-start: 0;
}

[data-rlta-element="button"]:hover,
[data-rlta-element="button"]:focus-visible {
  background-color: var(--color-contrast);
  outline: none;
}

[data-rlta-element="button"]::after {
  content: '+';
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
}

[data-rlta-element="button"][aria-expanded="true"]::after {
  content: '−';
}

[data-rlta-element="heading"] {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-lh);
  color: inherit;  
}

[data-rlta-element="panel"] {
  overflow: hidden;
}

[data-rlta-element="panel-content"] {
  padding-block: var(--space-lg);
  padding-inline: var(--space-xl);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-contrast);
}

[data-rlta-element="panel-content"] > :last-child {
  margin-block-end: 0;
}