/* =============================================
   BLOCS — CSS des blocs éditoriaux JCE
   /media/css/blocs.css

   Chaque section est associée au template blocs/*.html du même nom.
   Le CSS des colonnes (wf-columns) est géré par le plugin JCE.
   ============================================= */


/* ─────────────────────────────────────────────
   BANDEAU PHOTO
   Template : Bandeau-photo.html
   HTML     : <div class="bandeauphoto" style="background-image: url(...)"></div>
   background-image en inline style (dynamique JCE), repeat-x géré ici.
   Breakout de la grid article via 100vw + margin négatif.
   ───────────────────────────────────────────── */

.bandeauphoto {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: var(--space-4xl);
  height: 200px;
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center;
}


/* ─────────────────────────────────────────────
   FULLWIDTH — Breakout pleine largeur universel
   Ajouter la class "fullwidth" sur tout élément
   à faire sortir du conteneur article.
   Le fond de couleur (beige, etc.) s'étend sur 100vw.
   ───────────────────────────────────────────── */

.fullwidth {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: var(--space-4xl);
  /* Symétrique du margin : recale le contenu sur le bord du conteneur parent */
  padding-inline: calc(50vw - 50%);
  padding-block: var(--space-xl);
  border-radius: 0;
}


/* ─────────────────────────────────────────────
   FOND COLORÉ
   Template : Fond-beige.html
   HTML     : <div class="bloc__fond beige [fullwidth]">contenu</div>
   ───────────────────────────────────────────── */

.bloc__fond {
  padding: var(--space-xl) var(--space-xl);
  border-radius: var(--radius-lg);
  margin-block: var(--space-lg);
  text-align: center;
  background: url('../../images/contour-logo-blanc.svg') 150% 350% no-repeat;
  h3 {
    --text-h3-weight : 600 ;
  }

  .wf-columns {
    gap : var(--space-2xl) ;
    text-align: center;
  }
  .wf-columns .wf-column {
    margin: var(--space-lg) auto;
    max-width: var(--pad-paragraph);
  }

}



/* Pleine largeur : annule le border-radius et sort du padding du conteneur.
   --container-pad est défini dans user.css (:root). */
.bloc__fond.fullwidth {
  border-radius: 0;
  padding-inline: var(--container-pad);  
}

.fullwidth + .fullwidth  {
  margin-block-start: 0;
}

.fullwidth:has(+ .fullwidth) {
  margin-block-end: 0;
}

/* ─────────────────────────────────────────────
   INFOGRAPHIE / NOMBRE CLÉ
   Template : Nombre.html
   HTML     : <div class="infographie">
                <div class="infographie__icone"><img src="..."></div>
                <div class="infographie__nombre">40</div>
                <div class="infographie__infos">ateliers par an</div>
              </div>
   ───────────────────────────────────────────── */

.infographie {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0 ;
  padding: var(--space-md) 0;
}

.infographie__icone {
  display: flex;
  align-items: center;
  justify-content: center;
}

.infographie__icone img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 0!important;
}

.infographie__nombre {
  font-family: var(--font-heading);
  font-size: var(--text-infographie-nombre);
  font-weight: 800;
  color: var(--color-contrast);
  line-height: 1;
}

.infographie__infos {
  color: var(--color-contrast);
  font-size: var(--text-infographie-infos);
  line-height: 1;
  font-weight: 600;
}


/* ─────────────────────────────────────────────
   LISTES ICÔNES — fa-circle-check via ::marker
   JCE génère : <ul style="list-style-type: circle|disc;">
   ou classes .circle / .disc sur le <ul>.
   circle → accent-2  |  disc → contrast
   ───────────────────────────────────────────── */

:is(ul[style*="list-style-type: circle"], ul[style*="list-style-type:circle"], ul.circle),
:is(ul[style*="list-style-type: disc"], ul[style*="list-style-type:disc"], ul.disc) {
  padding-inline-start: var(--space-md);
  li::marker {
    content: "\f058 ";
    font-family: "Font Awesome 7 Jelly";
    font-weight: 400;
    font-size: 1em;
  }
  li {
    padding-inline-start: 1ch;
  }
}

:is(ul[style*="list-style-type: circle"], ul[style*="list-style-type:circle"], ul.circle) li::marker {
  color: var(--color-accent-2);
}

:is(ul[style*="list-style-type: disc"], ul[style*="list-style-type:disc"], ul.disc) li::marker {
  color: var(--color-contrast);
}


/* ─────────────────────────────────────────────
   CTA — BOUTON D'ACTION
   Template : CTA.html
   HTML     : <p class="cta-center"><a href="..." class="cta [secondary|accent1|contrast]">Texte</a></p>
   Styles de base dans user.css : .cta, .secondary, .accent1, .contrast
   ───────────────────────────────────────────── */

.cta-center {
  text-align: center;
}


/* ─────────────────────────────────────────────
   LIEN BLOC BLEU — grand CTA fond primary avec décoration SVG
   HTML : <a href="..." class="cta lien-bloc-bleu">Ligne 1<br>Ligne 2</a>
   Le <br> doit être inséré manuellement dans JCE avec Shift+Entrée.
   Le ::first-line est géré globalement via .cta:has(br) dans user.css.
   ───────────────────────────────────────────── */

.cta.lien-bloc-bleu {
  display: inline-block;
  background-color: var(--color-primary);
  max-width: 60%;
  padding: var(--space-sm);                   /* 16px — léger */
  padding-inline-end: var(--space-xl);        /* 48px — réserve côté SVG */
  white-space: normal;
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    inset-inline-end: 12px;
    inset-block-end: 12px;
    width: 30px;
    height: 30px;
    background-image: url('../../images/forme-triple.svg');
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
  }

  &:hover {
    background-color: var(--color-contrast);
    color: var(--color-white);
  }

  @media (max-width: 680px) {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
}

/* 3 colonnes ou plus : garder 2 colonnes en mobile au lieu de 1.
   JCE force flex:auto!important + width:100% au breakpoint stack —
   on surcharge avec flex:none + 50% pour maintenir 2 colonnes par ligne.
   flex-wrap:wrap est déjà posé par JCE sur les classes stack-*. */
@media (max-width: 640px) {
  .wf-columns-stack-small:has(> .wf-column:nth-child(3)) > .wf-column {
    width: calc(50% - 0.5rem) !important;
    flex: none !important;
  }
}
@media (max-width: 960px) {
  .wf-columns-stack-medium:has(> .wf-column:nth-child(3)) > .wf-column {
    width: calc(50% - 0.5rem) !important;
    flex: none !important;
  }
}
@media (max-width: 1200px) {
  .wf-columns-stack-large:has(> .wf-column:nth-child(3)) > .wf-column {
    width: calc(50% - 0.5rem) !important;
    flex: none !important;
  }
}


/* Dans un layout 3 colonnes : pleine largeur de la colonne.
   :has(> .wf-column:nth-child(3):last-child) = exactement 3 colonnes */
.wf-columns:has(> .wf-column:nth-child(3):last-child) .cta.lien-bloc-bleu {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/* ─────────────────────────────────────────────
   TABLEAUX ÉDITORIAUX
   Styles génériques pour tout tableau créé via JCE.
   Portée : corps d'article uniquement, sans affecter
   les tableaux de navigation ou de layout Joomla.

   Responsive — deux mécanismes :
   1. Wrapper .table-scroll injecté par user.js :
      scroll horizontal + ombres CSS (background-attachment: local)
   2. Première colonne sticky (position: sticky; left: 0)
      pour garder le contexte pendant le défilement.
   ───────────────────────────────────────────── */

/* Wrapper injecté par user.js */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  margin-block: var(--space-lg);
  /* Ombres de défilement :
     - local  → suit le contenu, masque l'ombre quand on atteint le bord
     - scroll → reste fixe, forme l'ombre visible */
  background:
    linear-gradient(to right, var(--color-white) 20%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(to left,  var(--color-white) 20%, transparent) right / 40px 100% no-repeat local,
    linear-gradient(to right, oklch(from var(--color-primary) l c h / 0.15), transparent) left / 20px 100% no-repeat scroll,
    linear-gradient(to left,  oklch(from var(--color-primary) l c h / 0.15), transparent) right / 20px 100% no-repeat scroll;
}

.com-content-article__body table {
  border-collapse: collapse;
  width: 100%;
  /* Fallback sans JS : scroll direct sur la table */
  display: block;
  overflow-x: auto;
}

/* Réinitialise le display quand le wrapper JS est présent */
.table-scroll > table {
  display: table;
  overflow-x: visible;
  margin-block: 0;
}

.com-content-article__body table th,
.com-content-article__body table td {
  border: 1px solid var(--color-primary);
  padding: var(--space-xs) var(--space-xs);
  vertical-align: middle;
  text-align: center;
  color : var(--color-contrast) ;
  & p { margin : 0 }
}

/* En-têtes : fond primary, texte blanc */
.com-content-article__body table th {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
}

/* <strong> dans un th hérite de la couleur */
.com-content-article__body table th strong {
  color: inherit;
}

/* Première colonne sticky (scroll horizontal) */
.table-scroll > table td:first-child,
.table-scroll > table th:first-child {
  position: sticky;
  left: 0;
  /* Fond explicite obligatoire pour masquer le contenu qui défile derrière */
  background-color: var(--color-white);
  z-index: 1;
}

.table-scroll > table th:first-child {
  background-color: var(--color-primary);
  z-index: 2; /* Au-dessus des td:first-child */
}


/* ─────────────────────────────────────────────
   BLOC IMAGE COVER — 2 colonnes : photo plein-cadre + texte
   Template : Bloc-image-cover.html
   HTML     : <section class="bloc__image-cover [couleur] fullwidth">
                <div class="bloc__image-cover__image"><img ...></div>
                <div class="bloc__image-cover__contenu">h2 + p</div>
              </section>
   Couleurs : classe palette obligatoire (.primary, .secondary…)
   Frise    : ::after absolute au bas — formes-bandeau-02.svg par-dessus tout
   ───────────────────────────────────────────── */

.bloc__image-cover {
  display: grid;
  grid-template-columns: 40% 1fr;
  position: relative; /* ancre le ::after frise */
  /* couleurs entièrement gérées par la classe palette (.primary, .secondary…) */
}

/* Override du padding fullwidth : la grille gère les espaces internes */
.bloc__image-cover.fullwidth {
  padding: 0;
}

/* Colonne image : position relative pour ancrer l'img absolute.
   Pas de hauteur forcée : c'est la colonne texte qui pilote la hauteur de la section. */
.bloc__image-cover__image {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  overflow: hidden;
}

.bloc__image-cover__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Colonne texte : seule responsable de la hauteur de la section */
.bloc__image-cover__contenu {
  grid-column: 2;
  grid-row: 1;
  padding-block: var(--space-3xl);   /* ≈ 96px à 1440px — inclut la hauteur de la frise en bas */
  padding-inline: var(--space-2xl);  /* ≈ 64px à 1440px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  max-width: var(--pad-paragraph);   /* 80ch — évite des lignes trop longues sur grands écrans */
}

/* Frise : absolue au bas de la section, par-dessus image et texte.
   formes-bandeau-02.svg viewBox 1440×68 — formes à mi-hauteur → effet "émergent".
   repeat-x : le motif se tuile à sa largeur naturelle (≈ 1015px à 48px de hauteur). */
.bloc__image-cover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--space-xl);            /* 48px fixe — token le plus proche de 60px */
  background-image: url('../../images/formes-bandeau-02.svg');
  background-size: auto 100%;         /* largeur proportionnelle, hauteur = 100% de l'élément */
  background-repeat: repeat-x;
  background-position: left bottom;
  pointer-events: none;
  z-index: 1;
}

/* Mobile < 640px : empilement vertical.
   grid-column reset obligatoire : sans ça, grid-column:2 du desktop force
   une colonne implicite même avec grid-template-columns:1fr → image invisible. */
@media (width < 640px) {
  .bloc__image-cover {
    grid-template-columns: 1fr;
  }

  .bloc__image-cover__image {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 16 / 9; /* donne une hauteur : l'img absolute n'en fournit pas */
  }

  .bloc__image-cover__contenu {
    grid-column: 1; /* reset grid-column:2 du desktop */
    grid-row: 2;
    padding: var(--space-xl) var(--space-md);
  }
}


/* ─────────────────────────────────────────────
   PARCOURS OXALIS — statuts + cycle de vie
   HTML : <div class="parcours">
            <div class="parcours__statuts">...</div>
            <div class="parcours__cycle">...</div>
          </div>
   ───────────────────────────────────────────── */

.parcours {
  background: var(--color-cards) url('../../images/quart-logo.svg') top right no-repeat;
  padding-block: var(--space-4xl);
  padding-inline: var(--space-2xl);
}

/* Section 1 : Statuts (CAPE / CESA / Associé) */

.parcours__statuts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xl);
  margin-block-end: var(--space-4xl);
}

.parcours-statut {
  text-align: center;
  max-width: 600px;
}

.parcours-statut__icone {
  display: flex;
  justify-content: center;
  margin-block-end: var(--space-sm);
}

.parcours-statut__icone img {
  width: 36px;
  height: auto;
}

.parcours-statut__titre {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-lh);
  color: var(--color-contrast);
  margin-block: 0 var(--space-xs);
}

.parcours-statut__texte {
  margin: 0;
}

/* Section 2 : Cycle de vie */

.parcours__cycle {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 840px;
  margin-inline: auto;
}

.cycle__arc {
  width: 100%;
  color: var(--color-contrast);
}

.cycle__arc svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Léger chevauchement pour connecter les extrémités aux icônes */
.cycle__arc--top    { margin-block-end: -1.25rem; }
/* Arc bas = arc haut pivoté : même path, même flèche, le rotate() inverse tout */
.cycle__arc--bottom { margin-block-start: -1.25rem; transform: rotate(180deg); }

.cycle__phases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  width: 100%;
  position: relative;
  z-index: 1;
}

.cycle__phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cycle__phase__icone {
  margin-block-end: var(--space-sm);
}

.cycle__phase__icone img {
  width: 36px;
  height: auto;
}

.cycle__phase__titre {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-lh);
  color: var(--color-contrast);
  margin-block: 0 var(--space-xs);
}

.cycle__phase__texte {
  margin: 0;
}

.cycle__sortie {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 520px;
  margin-block-start: var(--space-xl);
}

.cycle__sortie__icone {
  margin-block-end: var(--space-sm);
}

.cycle__sortie__icone img {
  width: 36px;
  height: auto;
}

.cycle__sortie__titre {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-lh);
  color: var(--color-contrast);
  margin-block: 0 var(--space-xs);
}

.cycle__sortie__texte {
  margin: 0;
}

/* Arcs latéraux : cachés sur desktop */
.cycle__arc--left,
.cycle__arc--right { display: none; }

@media (max-width: 680px) {
  /* Arcs haut/bas remplacés par les arcs latéraux */
  .cycle__arc--top,
  .cycle__arc--bottom { display: none; }

  /* Grid 3 colonnes : arc-gauche | phases | arc-droite */
  .cycle__phases {
    grid-template-columns: 2.5rem 1fr 2.5rem;
    row-gap: var(--space-xl);
    column-gap: 0;
  }

  /* Les phases occupent la colonne centrale */
  .cycle__phase { grid-column: 2; }

  /* Arcs latéraux : s'étirent sur toute la hauteur des deux phases */
  .cycle__arc--left,
  .cycle__arc--right {
    display: block;
    grid-row: 1 / span 2;
    align-self: stretch;
    color: var(--color-contrast);
  }

  .cycle__arc--left  { grid-column: 1; }
  .cycle__arc--right { grid-column: 3; }

  .cycle__arc--left svg,
  .cycle__arc--right svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
}