/* =========================================================
   AFSEP — CSS global commun à toutes les maquettes
   Palette et métriques relevées au pixel sur la maquette Figma
   "Page d'accueil V2.png" (1440 px) + exports "header accueil.png"
   et "Footer final.png".
   ========================================================= */

:root {
  --afsep-purple: #4A155D;   /* violet principal (titres, footer, boutons) */
  --afsep-green: #A4CB81;    /* vert clair (fonds, pictos, accents) */
  --afsep-yellow: #F7CC47;   /* jaune (boutons header) */
  --afsep-yellow-pale: #FDF2D1; /* jaune très clair (fond zone espace adhérents) */
  --afsep-pastel: #C0AAC8;   /* violet pastel (vague footer, décor) */
  --afsep-pink: #E9D7E9;     /* rose pastel (décors « à propos ») */
  --afsep-mauve: #C583CC;    /* mauve (arche « ressources ») */
  --afsep-bg: #F8FBF5;       /* fond clair des sections */
  --afsep-text: #333333;     /* texte courant */
}

body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--afsep-text);
  background-color: var(--afsep-bg);
}

/* Container maquette : le contenu utile mesure 1174 px (filet du footer
   x 132 -> 1305 sur la maquette 1440). Avec les gouttières Bootstrap,
   un container de 1200 px donne exactement cette boîte de contenu. */
@media (min-width: 992px) {
  .container {
    max-width: 1200px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  color: var(--afsep-purple);
}

/* Bloc blanc : header + hero (le fond passe en --afsep-bg ensuite) */
.hero-wrap {
  display: flow-root;   /* garde la marge du hero dans le bloc */
}

/* ---------- Boutons ---------- */

.btn-afsep-yellow,
.btn-afsep-outline {
  border-radius: 50rem;
  color: #333;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.35;
  padding: .3rem 1.05rem;
  border: 2px solid var(--afsep-yellow);
}

.btn-afsep-yellow {
  background-color: var(--afsep-yellow);
}

.btn-afsep-yellow:hover,
.btn-afsep-yellow:focus {
  background-color: #e9b932;
  border-color: #e9b932;
  color: #333;
}

.btn-afsep-outline {
  background-color: transparent;
}

.btn-afsep-outline:hover,
.btn-afsep-outline:focus {
  background-color: var(--afsep-yellow);
  color: #333;
}

/* Raccourci mobile de la page en cours (L'association, Groupes et clubs) :
   Bootstrap attend des variables --bs-btn-active-* que ces boutons ne
   définissent pas, on fixe donc l'état actif explicitement — en violet,
   pour ne pas le confondre avec le bouton jaune plein « Adhérer ». */
.btn-afsep-outline.active {
  background-color: transparent;
  border-color: var(--afsep-purple);
  color: var(--afsep-purple);
  font-weight: 700;
}

.btn-afsep-white {
  background-color: #fff;
  color: var(--afsep-purple);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: .87rem 1.2rem;
  box-shadow: 0 6px 20px rgba(74, 21, 93, .10);
}

.btn-afsep-white:hover,
.btn-afsep-white:focus {
  background-color: var(--afsep-green);
  color: var(--afsep-purple);
}

.btn-afsep-purple {
  background-color: var(--afsep-purple);
  color: #fff;
  font-weight: 500;
  font-size: 1.05rem;
  border-radius: 50rem;
  padding: .45rem 1.6rem;
}

.btn-afsep-purple:hover,
.btn-afsep-purple:focus {
  background-color: #350f44;
  color: #fff;
}

.btn-afsep-green {
  background-color: var(--afsep-green);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 8px;
  padding: .9rem 1.4rem;
}

.btn-afsep-green:hover,
.btn-afsep-green:focus {
  background-color: #93ba70;
  color: #fff;
}

/* ---------- Header ----------
   Repères maquette (px absolus / canvas 1440) :
   logo 160->271 x 21->157 · titre 350->721 x 20->80 · zigzag 761->853 x 20->112
   boutons 958->1049 et 1067->1221 x 28->62 · menu 346->1229, texte y 142->156
   Le contenu du header s'arrête à x 1229, soit une boîte de 1097 px
   alignée à gauche dans le container.                                   */

.site-header {
  background-color: #fff;
  padding-top: 21px;
  padding-bottom: 36px;
}

.header-inner {
  max-width: 1097px;
}

.header-top {
  align-items: flex-start;
}

.site-brand {
  gap: 70px;
  align-items: flex-start;
  padding-left: 20px;
}

/* Le logo déborde de 21 px sous la ligne du header (il empiète sur le menu) */
.site-brand img {
  height: 149px;
  width: auto;
  margin-top: -6px;
  margin-bottom: -28px;
}

.site-title {
  font-size: 2rem;
  line-height: 1.05;
  color: var(--afsep-green);
  font-weight: 400;
  margin-top: -5px;
}

.site-title strong {
  color: var(--afsep-purple);
  font-weight: 800;
}

.header-zigzag {
  width: 93px;
  height: 93px;
  margin-left: 40px;
  margin-top: -1px;
}

.header-actions {
  gap: 18px;
  margin-top: 6px;
  margin-right: 8px;
}

.main-nav .nav {
  justify-content: flex-end;
  gap: 62px;
  flex-wrap: nowrap;
}

/* Avec 7 entrées (Club Jeunes inclus), l'écart de 62 px ferait passer
   « Accueil » sous le débord du logo : écart resserré au-delà de 1200 px. */
@media (min-width: 1200px) {
  .main-nav .nav { gap: 38px; }
}

.main-nav .nav-link {
  color: #444;
  font-weight: 500;
  font-size: 1.08rem;
  padding: 0;
  white-space: nowrap;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
  color: var(--afsep-purple);
}

/* Lien « Club Jeunes » : violet vif et gras pour se détacher du gris des
   autres entrées du menu (demande AFSEP) ; le filet actif passe en mauve. */
.main-nav .nav-link-jeunes {
  color: #8E3FA8;
  font-weight: 700;
}

.main-nav .nav-link-jeunes:hover,
.main-nav .nav-link-jeunes.active {
  color: var(--afsep-purple);
}

.main-nav .nav-link-jeunes.active::after {
  background-color: var(--afsep-mauve);
}

/* État actif gras comme sur la maquette Figma (le violet seul
   est quasi indiscernable du gris #444 à cette taille), avec le
   filet vert centré sous le texte (60 × 4 px, relevé sur
   "Page une offre d'emploi.png" : x 1131->1191, y 164->167) */
.main-nav .nav-link.active {
  position: relative;
  font-weight: 700;
}

.main-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--afsep-green);
}

/* Sous-menus (liens gérés depuis /admin/menus) : ouverture au survol plutôt
   qu'au clic, plus naturel pour un menu de navigation — pur CSS, sans
   toucher au comportement JS de Bootstrap (le clic/le clavier continuent
   de fonctionner via data-bs-toggle="dropdown"). Uniquement au-delà du
   point de bascule (992px) : en dessous, le menu est une liste verticale
   dépliée où le survol n'a pas de sens (tactile). */
@media (min-width: 992px) {
  .main-nav .dropdown:hover > .dropdown-menu {
    display: block;
  }
}

/* ---------- Menu mobile : hamburger Bootstrap ----------
   Le bouton .navbar-toggler est utilisé hors d'une .navbar : Bootstrap
   déclare ses variables sur .navbar, on les redéfinit donc ici. Le menu
   (#afsepMainNav) est un .collapse, rouvert de force au-dessus de 992 px. */

.site-header .navbar-toggler {
  --bs-navbar-toggler-padding-y: .45rem;
  --bs-navbar-toggler-padding-x: .7rem;
  --bs-navbar-toggler-font-size: 1.25rem;
  --bs-navbar-color: var(--afsep-purple);
  --bs-navbar-toggler-border-color: var(--afsep-purple);
  --bs-navbar-toggler-border-radius: 50rem;
  --bs-navbar-toggler-focus-width: .2rem;
  --bs-navbar-toggler-transition: box-shadow .15s ease-in-out;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%234A155D' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  flex: 0 0 auto;
  align-self: center;
  line-height: 1;
}

.site-header .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(74, 21, 93, .25);
}

/* Au-delà du point de bascule, le menu reste toujours déplié */
@media (min-width: 992px) {
  .header-collapse.collapse,
  .header-collapse.collapsing {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    transition: none !important;
  }
}

/* ---------- Hero (carousel page d'accueil) ----------
   Repères maquette : bande verte x 95->1354 (1259) x y 222->809 (587)
   image violette   x 167->1283 (1116) x y 200->735 (535)
   => l'image déborde de 22 px AU-DESSUS de la bande verte             */

.hero-outer {
  background-color: var(--afsep-green);
  border-radius: 12px;
  display: flow-root;          /* empêche la fusion de marge avec le carousel */
  max-width: 1259px;
  margin: 24px auto 0;
  padding: 0 71px 74px;
}

.hero-carousel {
  margin-top: -22px;
}

.hero-carousel .carousel-inner {
  border-radius: 10px;
  overflow: hidden;
}

.hero-carousel .carousel-item {
  height: 535px;
}

.hero-carousel .carousel-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hero-carousel .carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(74, 21, 93, .75);
}

.hero-caption {
  position: absolute;
  top: 86px;
  left: 174px;
  right: 174px;
  z-index: 2;
  text-align: left;
}

.hero-title {
  margin: 0;
  color: #fff;
}

.hero-title .l1 {
  display: block;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.15;
}

.hero-title .l2 {
  display: block;
  font-size: 3.7rem;
  font-weight: 800;
  line-height: 1.15;
}

.hero-caption h2 {
  color: #fff;
  font-size: 3.7rem;
  line-height: 1.15;
  margin: 0;
}

.hero-caption p {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 450px;
  margin-top: 30px;
}

.btn-hero {
  background-color: #fff;
  color: var(--afsep-purple);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: .8rem 1.2rem;
  margin-top: 1.5rem;
}

.btn-hero:hover,
.btn-hero:focus {
  background-color: var(--afsep-green);
  color: var(--afsep-purple);
}

/* Carte translucide : x 341->972 (631) x y 554->650 (96), 85 px du bas */
.hero-card {
  position: absolute;
  left: 174px;
  bottom: 85px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  width: 631px;
  height: 96px;
  background-color: rgba(255, 255, 255, .21);
  border-radius: 12px;
  padding: 0 16px 0 17px;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.4;
}

.hero-card-text {
  max-width: 245px;
}

.hero-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-color: var(--afsep-green);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
}

.hero-card .btn-hero {
  margin: 0 0 0 auto;
  padding: .85rem 1.6rem;
  white-space: nowrap;
}

/* Flèches longues vertes, à 46 px à l'intérieur de l'image */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  width: auto;
  opacity: 1;
  color: var(--afsep-green);
  font-size: 62px;
  line-height: 1;
}

.hero-carousel .carousel-control-prev i,
.hero-carousel .carousel-control-next i {
  display: block;
  transform: translateY(15px);
}

.hero-carousel .carousel-control-prev { left: 47px; }
.hero-carousel .carousel-control-next { right: 42px; }

.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover {
  color: #fff;
}

/* Points indicateurs blancs, sous l'image, dans la bande verte
   (maquette : y 766->778, diamètre 12 px, gouttière 8 px) */
.hero-carousel .carousel-indicators {
  bottom: -43px;
  margin: 0;
}

.hero-carousel .carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0;
  background-color: #fff;
  opacity: .85;   /* la maquette ne différencie pas le point actif */
  margin: 0 4px;
}

.hero-carousel .carousel-indicators .active {
  opacity: 1;
}

/* ---------- Section « À propos de nous » ----------
   Repères maquette : fond #F8FBF5 de y 793 à 1725
   photo 139->641 x 998->1467 · colonne texte à partir de x 742
   surtitre y 915->928, filet vert y 937->943 (186 px)
   titre y 981->1067 · intro y 1117->1167 · puces y 1201->1515
   bouton 740->901 x 1560->1607                                        */

.about {
  padding: 100px 0 113px;
}

.about-grid {
  display: flex;
  align-items: flex-start;
  gap: 101px;
}

.about-media {
  position: relative;
  flex: 0 0 503px;
  margin: 89px 0 0 7px;
}

.about-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 470px;
  object-fit: cover;
  border-radius: 16px;
}

.about-deco {
  position: absolute;
  width: 40px;
  z-index: 0;
}

.about-deco-purple {
  left: -14px;
  top: 11.5%;
  height: 20.2%;
  background-color: var(--afsep-purple);
  border-radius: 14px;
}

.about-deco-pink {
  right: -14px;
  top: 54.3%;
  height: 34.3%;
  background-color: var(--afsep-pink);
  border-radius: 14px;
}

.about-text {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* Pastille pastel derrière la première ligne du titre */
.about-circle {
  position: absolute;
  right: -7px;
  top: 45px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-color: var(--afsep-pink);
  z-index: 0;
}

.section-kicker {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: 14px;
  color: #000;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
}

.section-kicker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background-color: var(--afsep-green);
}

.about-title {
  position: relative;
  z-index: 1;
  margin: 33px 0 0;
  font-size: 2.75rem;
  line-height: 1.09;
}

.about-intro {
  margin: 38px 0 0;
  color: var(--afsep-purple);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 552px;
}

.about-list {
  list-style: none;
  margin: 17px 0 0;
  padding: 0;
  color: var(--afsep-purple);
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 552px;
}

/* Bloc générique "Liste" (pb-liste) : même style que .about-list mais sans
   la largeur max propre à la colonne étroite du bloc AFSEP "À propos". */
.pb-liste .about-list {
  max-width: none;
}

.about-list li {
  position: relative;
  margin-top: 21px;
}

.about-list li::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 8px;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23A4CB81%22%3E%3Cpath%20d%3D%22M11.4%200H17.5A4.5%204.5%200%200%201%2022%204.5V11.3A4.5%204.5%200%200%201%2017.5%2015.8H12.4C10.3%2015.8%209.2%2017.9%207.2%2019.9C5.2%2021.9%200%2021.7%200%2017.8C0%2014.4%206.9%2014%206.9%209.2V4.5A4.5%204.5%200%200%201%2011.4%200Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

.about-text .btn-afsep-white {
  margin-top: 37px;
}

/* ---------- Section « Prochaines journées de l'AFSEP » ----------
   Repères maquette : bande verte y 1725->2479
   titre y 1818->1857 · sous-titre y 1903->1921
   cartes 136->711 et 740->1315, y 1954->2302 (rayon 20)
   bouton bas 604->847 x 2373->2420                                    */

.events {
  position: relative;
  overflow: hidden;
  background-color: var(--afsep-green);
  padding: 88px 0 59px;
}

.events .container {
  position: relative;
  z-index: 1;
}

.events-watermark {
  position: absolute;
  top: 24px;
  left: 50%;
  margin-left: 352px;      /* cale le filigrane sur x 1081->1366 de la maquette */
  width: 301px;
  height: 301px;
  z-index: 0;
  line-height: 0;
}

.events-title {
  margin: 0;
  font-size: 2.7rem;
  line-height: 1.1;
}

.events-lead {
  margin: 42px 0 0;
  color: var(--afsep-purple);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
}

.events-row {
  --bs-gutter-x: 29px;
  /* --bs-gutter-y plutôt qu'un margin-bottom sur .event-card, cf. .jobs-row
     (même souci vérifié : colonne flex stretchée, la marge du descendant
     ne crée aucun écart entre deux lignes de cartes). La maquette
     d'origine ne montre que 2 offres (jamais deux lignes), d'où son
     absence jusqu'ici — nécessaire dès que le page builder affiche plus de
     2 journées ("Nombre de journées" > 2). */
  --bs-gutter-y: 37px;
  margin-top: 27px;
}

.event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 20px;
  padding: 20px 40px 36px;
  box-shadow: 0 12px 34px rgba(74, 21, 93, .09);
}

.event-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.event-badge {
  display: inline-block;
  background-color: var(--afsep-green);
  color: #fff;
  border-radius: 4px;
  padding: 4px 9px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.event-group {
  margin: 12px 0 0;
  color: #696984;
  font-size: 1rem;
  line-height: 1;
}

.event-date {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--afsep-purple);
}

.event-day {
  font-size: 3.9rem;
  font-weight: 800;
  line-height: .8;
}

.event-my {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  padding-top: 0;
}

.event-rule {
  border: 0;
  border-top: 1px solid var(--afsep-green);
  opacity: 1;
  margin: 24px 0 0;
}

.event-name {
  margin: 23px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
}

.event-place {
  display: flex;
  align-items: baseline;
  gap: 16px;
  /* marge basse : écart minimal avec le bouton, dont le margin-top: auto
     vaut 0 sur la carte la plus haute de la rangée */
  margin: 20px 0 28px;
  color: #000;
  font-size: 1.1rem;
  line-height: 1.2;
}

.event-place .bi {
  position: relative;
  top: 4px;
  color: var(--afsep-green);
  font-size: 1.3rem;
  line-height: 1;
}

.event-card .btn-afsep-purple {
  display: block;
  width: fit-content;
  align-self: center;
  /* margin-top: auto (plutôt qu'une valeur fixe) pousse le bouton en bas de
     la carte : nécessaire pour que toutes les cartes d'une même rangée,
     étirées à height:100% (cf. .event-card), gardent leur bouton aligné en
     bas malgré des contenus de hauteurs différentes — même principe que
     .job-card .btn-afsep-purple. */
  margin-top: auto;
}

.events-all {
  text-align: center;
  margin-top: 71px;
}

/* ---------- Section « Voir les dernières ressources » ----------
   Repères maquette : bloc blanc y 2565 -> 3218
   boîte violette 320->1057 x 2642->2999 (rayon 8)
   cercle vert 821->1103 x 2748->3030 (diam. 282)
   arche 939 / 2697 · carte 727 / 2847 · flèche 866 / 2776           */

.resources {
  margin-top: 85px;
  padding: 77px 0 219px;
}

.res-inner {
  position: relative;
}

.res-box {
  position: relative;
  width: 737px;
  min-height: 357px;
  margin-left: 188px;
  padding: 46px 56px 44px;
  background-color: var(--afsep-purple);
  border-radius: 8px;
  color: #fff;
}

.res-box h2 {
  margin: 0;
  color: #fff;
  font-size: 3.1rem;
  line-height: 1.21;
}

.res-box p {
  margin: 24px 0 0;
  font-size: 1.05rem;
  line-height: 1.4;
}

.res-box .btn-afsep-white {
  margin-top: 52px;
}

/* --- décors, calés sur le coin haut-gauche de la boîte violette --- */

.res-circle,
.res-arrow,
.res-card,
.res-heart {
  position: absolute;
}

.res-circle {
  left: 689px;
  top: 106px;
  width: 282px;
  height: 282px;
  border-radius: 50%;
  background-color: var(--afsep-green);
}

.res-arrow { left: 734px; top: 134px; }
.res-card  { left: 595px; top: 205px; }
.res-heart { left: 807px; top: 55px; }

/* ---------- Page « Groupes & clubs » (carrefour clubs) ----------
   Repères maquette : titre y 296->347 · sous-titre y 384->406
   cartes 132->510, 545->920, 945->1318, y 484->880 (rayon 20)       */

.clubs {
  padding: 104px 0 110px;
  overflow-x: clip;   /* absorbe la demi-gouttière du row (35 px) : pas de scroll horizontal */
}

.clubs-title {
  margin: 0;
  font-size: 2.7rem;
  line-height: 1.1;
}

.clubs-lead {
  margin: 36px 0 0;
  color: var(--afsep-text);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}

.clubs-row {
  --bs-gutter-x: 35px;
  --bs-gutter-y: 35px;
  /* la gouttière verticale ajoute son padding-top aux colonnes :
     43 + 35 = 78 px sous le sous-titre, comme avant l'ajout des rangées */
  margin-top: 43px;
}

/* Club sans journée programmée */
.club-none {
  margin: 16px 0 0;
  color: var(--afsep-purple);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
}

.club-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 20px;
  padding: 24px 40px 36px;
  box-shadow: 0 12px 34px rgba(74, 21, 93, .09);
}

/* Carte mise en avant (Club Jeunes) : fond violet clair et bord violet foncé ;
   le filet du titre et le bouton passent eux aussi en violet. */
.club-card--featured {
  background-color: #F0E7F4;
  border: 2px solid var(--afsep-purple);
}

.club-card--featured .club-rule {
  border-top-color: var(--afsep-purple);
}

.club-card--featured .btn-afsep-green {
  background-color: var(--afsep-purple);
}

.club-card--featured .btn-afsep-green:hover,
.club-card--featured .btn-afsep-green:focus {
  background-color: #350f44;   /* même violet foncé que .btn-afsep-purple au survol */
}

.club-name {
  margin: 0;
  color: var(--afsep-text);
  font-size: 1.5rem;
  line-height: 1.2;
}

.club-rule {
  border: 0;
  border-top: 1px solid var(--afsep-green);
  opacity: 1;
  margin: 20px 0 0;
}

.club-next {
  margin: 22px 0 0;
  color: #8E8E9E;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}

.club-event {
  margin: 16px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
}

.club-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 18px 0 0;
  color: var(--afsep-text);
  font-size: 1.05rem;
  line-height: 1.3;
}

.club-meta .bi {
  position: relative;
  top: 3px;
  flex-shrink: 0;
  color: var(--afsep-green);
  font-size: 1.15rem;
  line-height: 1;
}

.club-card .club-meta:last-of-type {
  margin-bottom: 34px;
}

.club-card .btn-afsep-green {
  align-self: center;
  margin-top: auto;
  height: 48px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* ---------- Page « Emplois & stages » (liste des offres) ----------
   Repères maquette : titre y 285 · sous-titre y 380 · cartes y 470->800
   filigrane personne.svg x 1120->1395 x y 290->557 (taille naturelle)
   grand vide sous les cartes jusqu'à la vague (y ~1255)             */

.jobs {
  position: relative;
  overflow: hidden;   /* le filigrane déborde du container sans créer de scrollbar */
  padding: 104px 0 450px;
}

.jobs .container {
  position: relative;
  z-index: 1;
}

/* Filigrane ancré au container (et non au viewport) : il suit la colonne
   de contenu sur les écrans plus larges que la maquette 1440 px.       */
.jobs-watermark {
  position: absolute;
  top: -10px;
  right: -75px;
  width: 276px;
  height: 267px;
  z-index: -1;
}

.jobs-title {
  margin: 0;
  font-size: 2.7rem;
  line-height: 1.1;
}

.jobs-lead {
  margin: 36px 0 0;
  color: var(--afsep-text);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}

.jobs-row {
  --bs-gutter-x: 37px;
  /* Gouttière verticale entre lignes de cartes : --bs-gutter-y (pas un
     margin-bottom sur .job-card) — Bootstrap l'implémente via margin-top
     sur la colonne elle-même (l'item flex), la seule marge fiable ici.
     Un margin-bottom posé sur .job-card (élément étiré à height:100% dans
     une colonne flex stretchée) n'a aucun espace où s'exprimer entre deux
     lignes : mesuré à 0px d'écart malgré la règle, cf. historique. */
  --bs-gutter-y: 37px;
  margin-top: 72px;
}

.job-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 20px;
  padding: 26px 40px 32px;
  box-shadow: 0 12px 34px rgba(74, 21, 93, .09);
}

.job-watermark {
  position: absolute;
  right: 14px;
  bottom: 6px;
  width: 118px;
  height: auto;
  opacity: .55;
}

.job-added {
  margin: 0;
  color: #9A9AA8;
  font-size: .85rem;
  line-height: 1.2;
}

.job-title {
  margin: 14px 0 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

.job-contract {
  margin: 8px 0 0;
  color: var(--afsep-green);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}

.job-rule {
  border: 0;
  border-top: 1px solid var(--afsep-green);
  opacity: 1;
  margin: 18px 0 0;
}

.job-loc {
  margin: 20px 0 45px;
  color: var(--afsep-text);
  font-size: 1.05rem;
  line-height: 1.3;
}

.job-card .btn-afsep-purple {
  align-self: center;
  margin-top: auto;
  font-size: .95rem;
  padding: .5rem 1.5rem;
}

/* ---------- Page « Une offre d'emploi » ----------
   Repères maquette : retour y 267 · carte 236->1214 x y 355->1685
   (padding 45 haut / 55 côtés) · bandes grises #F2F2F2
   filigrane personne.svg identique à la page liste (x 1120->1395)  */

.offer {
  position: relative;
  overflow: hidden;   /* le filigrane déborde du container sans créer de scrollbar */
  padding: 70px 0 168px;
}

.offer .container {
  position: relative;
}

/* Même ancrage au container que la page liste, calé sur le titre ici */
.offer-watermark {
  top: 24px;
}

.offer-back {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--afsep-text);
  font-size: 1rem;
  line-height: 1.2;
}

.offer-back span {
  text-decoration: underline;
}

.offer-back:hover {
  color: var(--afsep-purple);
}

.offer-card {
  max-width: 978px;
  margin: 68px auto 0;
  background-color: #fff;
  border-radius: 20px;
  padding: 45px 55px 55px;
  box-shadow: 0 12px 34px rgba(74, 21, 93, .09);
}

.offer-title {
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
  font-size: 2rem;
  line-height: 1.25;
}

.offer-contract {
  margin: 28px 0 0;
  color: var(--afsep-green);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  text-align: center;
}

.offer-meta {
  margin: 34px 0 0;
  background-color: #F2F2F2;
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
  color: #1E1E1E;
  font-size: 1rem;
  line-height: 1.4;
}

.offer-heading {
  margin-top: 52px;
  letter-spacing: .22em;
}

.offer-text {
  margin: 25px 0 0;
  color: #1E1E1E;
  font-size: 1.05rem;
  line-height: 1.55;
}

.offer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 60px;
  background-color: #F2F2F2;
  border-radius: 10px;
  padding: 26px 28px;
}

.offer-attachment {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--afsep-purple);
  font-size: 1rem;
  line-height: 1.2;
}

.offer-attachment span {
  text-decoration: underline;
}

.offer-attachment:hover {
  color: #350f44;
}

.offer-actions .btn-afsep-purple {
  font-size: .95rem;
  padding: .5rem 1.9rem;
}

/* ---------- Offres d'emploi : compléments du sous-plan 09 ----------
   État vide de la liste, lien « Modifier l'offre » de qui la gère, bandeaux
   brouillon / expirée (.adh-alerte) dans la carte, rubriques en texte riche,
   bouton « Contacter » seul, page « Cette offre n'est plus en ligne ». */

.jobs-vide {
  margin: 72px 0 0;
  color: var(--afsep-text);
  font-size: 1.05rem;
  line-height: 1.3;
}

.offer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
}

.offer-card .adh-alerte {
  margin-bottom: 32px;
}

/* Une localisation ou une adresse web saisie d'un seul tenant ne doit pas
   élargir la page. */
.offer-meta,
.offer-body {
  overflow-wrap: anywhere;
}

/* Texte riche d'une rubrique : mêmes mesures que .offer-text, portées par le
   bloc pour qu'un texte repris sans paragraphe les reçoive aussi. */
.offer-body {
  color: #1E1E1E;
  font-size: 1.05rem;
  line-height: 1.55;
}

.offer-body p,
.offer-body ul,
.offer-body ol {
  margin: 25px 0 0;
}

.offer-body li + li {
  margin-top: 6px;
}

.offer-body a {
  color: var(--afsep-purple);
  text-decoration: underline;
}

.offer-body a:hover {
  color: #350f44;
}

/* Sans pièce jointe, « Contacter » est seul dans la boîte grise : centré */
.offer-actions > :only-child {
  margin-inline: auto;
}

.offer-card--gone {
  text-align: center;
}

.offer-card--gone .btn-afsep-purple {
  margin-top: 36px;
  font-size: .95rem;
  padding: .5rem 1.9rem;
}

/* ---------- Page « Un événement » ----------
   Repères maquette : titre y 298->424 · colonne gauche 132->906
   carte latérale 999->1315 x 303->774 · boîte grise 140->906 x 676->774
   bandeau jaune 356->1092 x 1540->1896                                */

.event-page {
  /* plus de bandeau « Renouveler votre adhésion » sous la page : la marge
     basse porte seule l'espace jusqu'à la vague du footer */
  padding: 100px 0 150px;
}

.event-grid {
  display: flex;
  align-items: flex-start;
  gap: 84px;
}

.event-main {
  flex: 1 1 auto;
  min-width: 0;
}

.event-page-title {
  margin: 0;
  font-size: 2.6rem;
  line-height: 1.18;
}

.event-kicker {
  margin-top: 42px;
  letter-spacing: .22em;
}

.event-page-text {
  margin: 26px 0 0;
  color: var(--afsep-purple);
  font-size: 1.15rem;
  line-height: 1.85;
  /* texte saisi librement : une longue adresse web ne doit pas élargir la page */
  overflow-wrap: anywhere;
}

/* --- programme de la journée : date/lieu puis déroulé horaire --- */

.event-meta {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.event-meta li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--afsep-purple);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
}

.event-meta li + li { margin-top: 8px; }

.event-meta .bi {
  color: var(--afsep-green);
  font-size: 1.2rem;
}

.event-program {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

/* journée de plusieurs jours : un intertitre par jour au-dessus de ses séquences */
.program-day {
  margin: 38px 0 0;
  color: var(--afsep-purple);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.3;
}

.program-day + .event-program { margin-top: 14px; }

.program-item {
  display: flex;
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid rgba(74, 21, 93, .15);
}

.program-item:last-child {
  border-bottom: 1px solid rgba(74, 21, 93, .15);
}

.program-time {
  flex: 0 0 132px;
  margin: 0;
  color: var(--afsep-purple);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
}

.program-body {
  flex: 1 1 auto;
  min-width: 0;
}

.program-title {
  margin: 0;
  color: var(--afsep-purple);
  font-size: 1.2rem;
  line-height: 1.35;
}

.program-room {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 0;
  color: #555;
  font-size: 1rem;
}

.program-room .bi { color: var(--afsep-green); }

.program-speaker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 0;
  background-color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 6px 18px rgba(74, 21, 93, .07);
  color: #1E1E1E;
  font-size: .98rem;
  line-height: 1.35;
}

.program-speaker strong { color: var(--afsep-purple); }

.program-speaker-avatar {
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--afsep-green);
  color: var(--afsep-purple);
  font-size: 1.4rem;
}

/* accueil, déjeuner, clôture : séquences sans intervenant, en retrait */
.program-item--pause .program-title {
  color: #555;
  font-size: 1.05rem;
  font-weight: 600;
}

.program-item--pause .program-time {
  color: #777;
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .program-item { flex-direction: column; gap: 6px; }
  .program-time { flex-basis: auto; }
}

/* --- carte latérale --- */

.event-aside {
  flex: 0 0 316px;
  margin-top: 5px;
}

.event-side {
  background-color: #fff;
  border-radius: 20px;
  padding: 26px 30px 30px;
  box-shadow: 0 12px 34px rgba(74, 21, 93, .09);
}

/* --- bouton d'inscription, sous les cartes de la colonne de droite --- */

.event-register {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: .75rem 1.5rem;
  font-size: 1.05rem;
}

/* --- seconde carte : téléchargement du programme --- */

.event-side-dl {
  margin-top: 24px;
  padding: 18px 20px;
}

.event-download {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--afsep-purple);
  text-decoration: none;
}

.event-download-icon {
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background-color: var(--afsep-green);
  color: var(--afsep-purple);
  font-size: 1.1rem;
  transition: background-color .15s, color .15s;
}

.event-download-label {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;   /* libellé sur une seule ligne */
  line-height: 1.25;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* « Informations complémentaires » ne tient pas sur une ligne à 320 px */
@media (max-width: 374.98px) {
  .event-download-label { white-space: normal; }
}

.event-download-meta {
  display: block;
  margin-top: 4px;
  color: #696984;
  font-size: .88rem;
}

.event-download:hover .event-download-icon,
.event-download:focus .event-download-icon {
  background-color: var(--afsep-purple);
  color: #fff;
}

.event-side-date {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.event-side-day {
  color: var(--afsep-purple);
  font-size: 4.6rem;
  font-weight: 800;
  line-height: .9;
}

.event-side-my {
  color: var(--afsep-purple);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  padding-top: 6px;
}

.event-side-rule {
  border: 0;
  border-top: 1px solid var(--afsep-green);
  opacity: 1;
  margin: 20px 0;
}

.event-side-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: var(--afsep-purple);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.event-side-label .bi {
  position: relative;
  top: 2px;
  color: var(--afsep-green);
  font-size: 1.1rem;
}

.event-side-value {
  margin: 8px 0 0;
  color: #1E1E1E;
  font-size: 1.05rem;
  line-height: 1.3;
}

/* --- inscription : retour d'action, état inscrit, mentions sous le bouton --- */

.event-aside .event-flash { margin: 0 0 24px; }

.event-registered { margin-top: 24px; }

.event-registered .event-register { margin-top: 12px; }

.event-registered-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: #3F6B22;
  font-weight: 700;
  font-size: 1.05rem;
}

.event-register:disabled { opacity: .55; }

.event-register .bi { margin-left: 6px; font-size: .9em; }

.event-register-note {
  margin: 10px 0 0;
  color: var(--afsep-text);
  font-size: .9rem;
  text-align: center;
}

/* --- encart « Réservé aux adhérents » (visiteur, adhérent expiré) --- */

.event-reserve {
  display: flex;
  gap: 18px;
  margin-top: 30px;
  padding: 26px 28px;
  border-left: 4px solid var(--afsep-yellow);
  border-radius: 10px;
  background-color: var(--afsep-yellow-pale);
}

.event-reserve-icon {
  flex: 0 0 auto;
  color: var(--afsep-purple);
  font-size: 1.5rem;
  line-height: 1;
}

.event-reserve-title {
  margin: 0;
  font-size: 1.3rem;
}

.event-reserve p {
  margin: 10px 0 0;
  color: var(--afsep-purple);
  font-size: 1.05rem;
  line-height: 1.6;
}

.event-reserve-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.event-reserve[hidden],
.event-registered[hidden] { display: none; }

/* ---------- Bandeau « Renouveler votre adhésion » ----------
   Repères maquette : boîte jaune 356->1092 x 1540->1896 (rayon 10)
   cercle violet Ø 290 (centre 975/1755) · étoile 784/1678 (174 x 210)
   tuile 974->1193 x ~1560->1818 (#F6E7A2, rayon 40)                 */

.renew {
  overflow: hidden;   /* les décors débordent du container sous 1200 px */
  margin-top: 98px;
  padding-bottom: 150px;
}

.renew-inner {
  position: relative;
}

.renew-box {
  position: relative;
  width: 736px;
  min-height: 356px;
  margin-left: 224px;
  padding: 62px 55px;
  background-color: var(--afsep-yellow);
  border-radius: 10px;
}

.renew-box h2 {
  margin: 0;
  font-size: 2.6rem;
  line-height: 1.15;
}

.renew-box p {
  margin: 26px 0 0;
  max-width: 330px;
  color: var(--afsep-purple);
  font-size: .95rem;
  line-height: 1.5;
}

.renew-box .btn-afsep-white {
  margin-top: 34px;
}

/* --- décors, calés sur le coin haut-gauche de la boîte jaune --- */

.renew-circle,
.renew-arrow,
.renew-star,
.renew-tile {
  position: absolute;
}

.renew-circle {
  /* relevé sur « Page un club.png » ET « Page un événement.png » :
     cercle Ø 290 centré en x 1001, bord haut à +98 de la boîte jaune */
  left: 724px;
  top: 98px;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  background-color: var(--afsep-purple);
}

.renew-arrow { left: 761px; top: 135px; }
.renew-star  { left: 652px; top: 138px; }

/* Arche beige : demi-cercle de r 110 posé sur une base droite
   (974->1193 x 3592->3816 sur « Page un club.png ») */
.renew-tile {
  left: 842px;
  top: 54px;
  width: 220px;
  height: 224px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F6E7A2;
  border-radius: 110px 110px 8px 8px;
}

/* ---------- Page « Un club » ----------
   Repères maquette : titre y 297->329 · texte 382->526 (interligne 32)
   métas y 572->616 (pastilles Ø 44) · filet violet y 633
   carte « prochain événement » 999->1315 x 351->515
   encadré contact 134->1304 x 690->881 (3 colonnes de 390, bord vert 1 px)
   kicker « à propos » y 959->989 · colonne texte 134->707 x 1023->1903
   photo 813->1315 x 1024->1493 · boîte bourse 813->1315 x 1576->1906
   arche jaune 1127->1283 x 1770->1930 (déborde de 24 px sous la boîte)
   kicker événements y 2037->2067 · cartes 2115->2463
   kicker bureau y 2573->2603 · cartes membres 2648->2919
   kicker documents y 3004->3034 · cartes 3063->3381
   bandeau jaune 3537->3893 · vague du footer y 3979                    */

.club-hero {
  padding-top: 92px;
}

.club-hero-grid {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.club-hero-main {
  flex: 1 1 auto;
  min-width: 0;
}

.club-page-title {
  margin: 0;
  font-size: 2.7rem;
  line-height: 1.1;
}

/* Logo du club, au-dessus du titre (absent de la maquette, affiché s'il est
   téléversé : sous-plan 01b). */
.club-page-logo {
  display: block;
  width: auto;
  max-width: 220px;
  max-height: 90px;
  margin-bottom: 24px;
}

.club-page-text {
  margin: 35px 0 0;
  max-width: 733px;
  color: #1E1E1E;
  font-size: 1.3rem;   /* maquette : hauteur de capitale 15 px */
  line-height: 1.54;   /* = 32 px d'interligne, comme la maquette */
}

.club-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 58px;
  margin: 36px 0 0;
}

.club-fact {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  color: var(--afsep-green);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
}

.club-fact i {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--afsep-purple);
  color: #fff;
  font-size: 1.1rem;
}

.club-hero-rule {
  border: 0;
  border-top: 1px solid var(--afsep-purple);
  opacity: 1;
  margin: 17px 0 0;
}

/* --- carte « prochain événement » --- */

/* `.club-next` est déjà pris par la carte de la page carrefour clubs */
.club-nextcard {
  flex: 0 0 316px;
  margin-top: 61px;
  background-color: #fff;
  border-radius: 8px;
  padding: 31px 32px 39px;
}

.club-next-kicker {
  margin: 0;
  color: var(--afsep-green);
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}

.club-next-date {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 22px 0 0;
  color: var(--afsep-purple);
}

.club-next-day {
  font-size: 4.6rem;
  font-weight: 800;
  line-height: .78;
}

.club-next-my {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  padding-top: 4px;
}

/* --- encadré des coordonnées --- */

.club-contact {
  display: flex;
  margin-top: 57px;
  background-color: #fff;
  border: 1px solid var(--afsep-green);
  border-radius: 8px;
}

.club-contact-item {
  flex: 1 1 0;
  min-width: 0;
  /* maquette : colonne de 390, texte de x 961 à 1281 -> 48 à gauche, 23 à
     droite. Padding droit ramené à 10 px : l'adresse mesure 330 px en Nunito
     contre 320 dans la police de la maquette, et doit tenir sur une seule
     ligne avant le <br> (à remettre à 23 px si la police est confirmée). */
  padding: 31px 10px 23px 48px;
}

.club-contact-item + .club-contact-item {
  border-left: 1px solid var(--afsep-green);
}

.club-contact-head {
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 0;
  color: var(--afsep-purple);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
}

.club-contact-head i {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--afsep-green);
  color: #fff;
  font-size: 1.55rem;
}

.club-contact-value {
  margin: 17px 0 0;
  color: var(--afsep-purple);
  font-size: 1.3rem;
  line-height: 1.54;
}

/* ---------- Section « À propos de nous » du club ---------- */

.club-about {
  /* clip et non hidden : la barre rose déborde de 14 px à droite de la photo,
     mais l'arche jaune doit pouvoir dépasser en bas sous 1200 px */
  overflow-x: clip;
  padding-top: 74px;
}

.club-about-grid {
  display: flex;
  align-items: flex-start;
  gap: 106px;
}

.club-about-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 573px;
}

.club-about-text p {
  margin: 0 0 20px;
  color: var(--afsep-purple);
  font-size: 1.3rem;
  line-height: 1.54;
}

.club-about-text p:first-of-type {
  margin-top: 24px;
}

.club-about-text p:last-child {
  margin-bottom: 0;
}

.club-about-side {
  flex: 0 0 502px;
  margin-top: 69px;
}

.club-photo {
  position: relative;
}

.club-photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 470px;
  object-fit: cover;
  border-radius: 16px;
}

/* --- encart « Demande de bourse » --- */

.grant-box {
  position: relative;
  margin-top: 82px;
  min-height: 330px;
  padding: 30px 36px 42px;
  background-color: var(--afsep-purple);
  border-radius: 8px;
  color: #fff;
}

/* sans photo au-dessus (club-jeunes.html), l'encart s'aligne sur le texte */
.club-about-side > .grant-box:first-child {
  margin-top: 0;
}

.grant-box h2 {
  margin: 0;
  color: #fff;
  font-size: 2.6rem;
  line-height: 1.2;
  white-space: nowrap;
}

.grant-box p {
  margin: 21px 0 0;
  max-width: 315px;
  font-size: 1.05rem;
  line-height: 1.45;
}

.grant-box .btn-afsep-white {
  margin-top: 40px;
}

/* Arche jaune : demi-cercle de r 78,5 posé sur une base droite */
.grant-arch {
  position: absolute;
  right: 32px;
  top: 194px;
  width: 157px;
  height: 161px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--afsep-yellow);
  border-radius: 78.5px 78.5px 8px 8px;
}

.grant-arch img {
  margin-top: 15px;
}

/* ---------- Sections « Événements », « Bureau », « Documents » ---------- */

/* `overflow: hidden` absorbe la demi-gouttière des rows (31/33/28 px)
   qui dépasse les 12 px de padding du container */
.club-events {
  overflow: hidden;
  padding-top: 127px;
}

.club-events .events-row {
  --bs-gutter-x: 31px;
  --bs-gutter-y: 31px;
  /* la gouttière verticale ajoute 31 px de padding-top aux colonnes :
     17 + 31 = 48 px sous le surtitre, comme la maquette */
  margin-top: 17px;
}

.club-board {
  overflow: hidden;
  padding-top: 106px;
}

/* « Écrire au club » : formulaire non maquetté, composants de connexion.html
   (.login-card, .login-lead, .login-sent, champs de .login-page) ; même
   espacement que les sections de la page club (sous-plan 01b). */
.club-write { padding-top: 106px; }

.club-write .login-card { margin-top: 45px; }

.board-row {
  --bs-gutter-x: 33px;
  --bs-gutter-y: 33px;
  margin-top: 12px;   /* 12 + 33 = 45 px (cf. .events-row) */
}

.board-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* hauteur de la maquette (2648->2919) ; padding bas à 0 : le bloc des
     rôles est centré par marges auto entre le filet et le bord bas */
  min-height: 271px;
  padding: 30px 13px 0;
  background-color: #fff;
  border: 1px solid var(--afsep-green);
  border-radius: 8px;
  text-align: center;
}

.board-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
}

.board-org {
  margin: 14px 0 0;
  /* réserve 2 lignes : le filet vert tombe au même y sur les 4 cartes,
     comme sur la maquette (y 2783), que l'organisme tienne sur 1 ou 2 lignes */
  min-height: 2.6em;
  color: #1E1E1E;
  font-size: 1.05rem;
  line-height: 1.3;
}

.board-rule {
  border: 0;
  border-top: 1px solid var(--afsep-green);
  opacity: 1;
  /* margin-bottom auto + .board-role:last-child { margin-bottom: auto } :
     le bloc des rôles est centré verticalement sous le filet (maquette) */
  margin: 26px 0 auto;
}

.board-role {
  margin: 0;
  color: var(--afsep-purple);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}

.board-role + .board-role {
  margin-top: 10px;
}

.board-role:last-child {
  margin-bottom: auto;
}

.club-docs {
  overflow: hidden;
  padding-top: 81px;
  padding-bottom: 58px;
}

.docs-row {
  --bs-gutter-x: 28px;
  --bs-gutter-y: 28px;
  margin-top: 1px;    /* 1 + 28 = 29 px (cf. .events-row) */
}

.doc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 40px 28px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(74, 21, 93, .09);
}

.doc-card .event-badge {
  align-self: flex-start;
}

.doc-card .event-group {
  margin-top: 16px;
}

.doc-title {
  margin: 11px 0 0;
  color: #1E1E1E;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.doc-rule {
  border: 0;
  border-top: 1px solid var(--afsep-green);
  opacity: 1;
  margin: 23px 0 0;
}

.doc-file {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 11px 0 0;
  color: #1E1E1E;
  font-size: 1.05rem;
  line-height: 1.2;
}

.doc-file .bi {
  flex-shrink: 0;
  color: var(--afsep-green);
  font-size: 1.05rem;
}

.doc-meta {
  margin: 2px 0 38px;
  padding-left: 25px;
  color: #1E1E1E;
  font-weight: 700;
  font-size: .85rem;
  line-height: 1.3;
}

.doc-card .btn-afsep-purple {
  align-self: center;
  margin-top: auto;
  font-size: .95rem;
  padding: .5rem 1.5rem;
}

/* Le bandeau jaune est plus près de la vague que sur la page événement */
.renew-tight {
  padding-bottom: 86px;
}

/* Titre de page (Page::$titre) affiché en <h1>, page builder — pas de
   maquette dédiée, typo cohérente avec les titres de section existants
   (ex. .jobs-title/.events-title). */
.pb-titre-page {
  margin: 0;
  color: var(--afsep-purple);
  font-weight: 800;
  font-size: 2.7rem;
  line-height: 1.1;
}

/* Bloc page builder "Titre", niveau H2 — même style que les titres de
   section de la maquette (.about-title/.jobs-title/.events-title, tous
   identiques) ; couleur/graisse déjà posées par la règle globale h1..h6
   ci-dessus, pas besoin de les répéter ici. */
.pb-titre-h2 {
  margin: 0;
  font-size: 2.7rem;
  line-height: 1.1;
}

/* Espacement harmonisé entre deux blocs génériques empilés dans une même
   colonne (cf. INSTRUCTIONS/GESTION_DES_PAGES.md, "Cohérence des espacements") :
   uniquement entre blocs, jamais avant le premier — la Section qui les
   contient porte déjà son propre padding (py-5). `.pb-bloc` est posée sur
   la racine de chaque bloc générique (zone_texte.html.twig et les
   templates de blocs suivants). */
.pb-bloc + .pb-bloc {
  margin-top: 1.5rem;
}

/* Le chapô peut aussi suivre directement un grand titre de page (H1, hors
   colonne) : le margin-top propre à .content-lead (hérité de contenu.html,
   où il suit toujours un grand titre) ferait alors double emploi avec la
   règle ci-dessus une fois plusieurs blocs empilés dans une colonne. La
   règle .content-lead elle-même reste intacte pour contenu.html. */
.pb-chapo .content-lead {
  margin-top: 0;
}

@media (max-width: 1199.98px) {
  .header-inner { max-width: none; }

  .about { padding: 4rem 0; }
  .about-grid { gap: 3rem; }
  .about-media { flex: 0 0 42%; margin: 2rem 0 0; }
  .about-media img { height: auto; aspect-ratio: 503 / 470; }
  .about-title { font-size: 2.2rem; }
  .about-intro, .about-list { font-size: 1.1rem; max-width: none; }
  .about-list { padding-left: 37px; }

  .events { padding: 4rem 0; }
  .events-title { font-size: 2.1rem; }

  .clubs { padding: 4rem 0; }
  .clubs-title { font-size: 2.1rem; }
  .clubs-row { margin-top: 3rem; }
  .club-card { padding: 20px 24px 28px; }

  .jobs { padding: 4rem 0 6rem; }
  .jobs-title { font-size: 2.1rem; }
  .jobs-row { margin-top: 3rem; }
  .job-card { padding: 20px 24px 28px; }
  .jobs-watermark { width: 200px; height: 194px; }

  .offer { padding: 3rem 0 6rem; }
  .offer-card { padding: 2.5rem 2.5rem 3rem; }
  .offer-title { font-size: 1.75rem; }

  .event-grid { gap: 3rem; }
  .event-aside { flex: 0 0 280px; }

  .renew { margin-top: 4rem; padding-bottom: 6rem; }
  .renew-box { width: auto; margin-left: 0; margin-right: 200px; min-height: 0; padding: 2.5rem 2.5rem 3rem; }
  .renew-box h2 { font-size: 2rem; }
  .renew-circle { left: auto; right: -20px; top: 60px; width: 240px; height: 240px; }
  .renew-star   { left: auto; right: 170px; top: 120px; width: 145px; height: 175px; }
  .renew-arrow  { left: auto; right: 185px; top: 80px; width: 54px; height: 56px; }
  .renew-tile   { left: auto; right: -60px; top: 15px; width: 180px; height: 212px; }
  .renew-tile img { width: 123px; height: 131px; }

  .resources { margin-top: 3rem; padding: 4rem 0 7rem; }
  .res-box { width: auto; margin-left: 0; margin-right: 210px; min-height: 0; padding: 2.5rem 2.5rem 3rem; }
  .res-box h2 { font-size: 2.2rem; }
  .res-box p { margin-top: 1.25rem; }
  .res-box .btn-afsep-white { margin-top: 2rem; }
  .res-circle { left: auto; right: 0; top: 90px; width: 230px; height: 230px; }
  .res-heart  { left: auto; right: -12px; top: 44px; width: 179px; height: 183px; }
  .res-card   { left: auto; right: 130px; top: 176px; width: 157px; height: 107px; }
  .res-arrow  { left: auto; right: 214px; top: 116px; width: 54px; height: 56px; }
  .event-card { padding: 20px 24px 28px; }
  .event-day { font-size: 3rem; }
  .event-my { font-size: 1.1rem; }
  .event-name { font-size: 1.1rem; }
  .event-place { font-size: 1rem; gap: 12px; }
  .site-brand { gap: 2rem; padding-left: 0; }
  /* menu aligné à droite : centré, il passerait sous le débord du logo */
  .main-nav .nav { gap: 2rem; justify-content: flex-end; flex-wrap: wrap; }

  .hero-outer { margin: 24px 1.5rem; padding: 0 2rem 3.5rem; }
  .hero-caption { left: 5rem; right: 5rem; top: 3rem; }
  .hero-card { left: 5rem; right: 5rem; width: auto; }
  /* les flèches se rangent contre les bords pour libérer la légende */
  .hero-carousel .carousel-control-prev { left: 6px; }
  .hero-carousel .carousel-control-next { right: 6px; }
  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next { font-size: 46px; }

  .club-hero { padding-top: 3.5rem; }
  .club-hero-grid { gap: 2.5rem; }
  .club-page-title { font-size: 2.1rem; }
  .club-page-text { margin-top: 1.75rem; max-width: none; }
  .club-facts { margin-top: 2rem; gap: 14px 2.5rem; }
  .club-contact { margin-top: 2.5rem; }
  .club-contact-item { padding: 1.5rem; }
  .club-contact-head { gap: 1rem; font-size: .85rem; }
  .club-contact-head i { flex: 0 0 48px; width: 48px; height: 48px; font-size: 1.25rem; }

  .club-about { padding-top: 4rem; }
  .club-about-grid { gap: 3rem; }
  .club-about-text { max-width: none; }
  .club-about-side { flex: 0 0 42%; margin-top: 2rem; }
  .club-about-side .about-deco-pink { right: -10px; }
  .club-photo img { height: auto; aspect-ratio: 502 / 470; }
  .grant-box { margin-top: 3rem; min-height: 0; padding: 2rem 2rem 2.5rem; }
  .grant-box h2 { font-size: 2rem; }
  .grant-box p { max-width: none; }
  .grant-arch { top: auto; bottom: -22px; right: 20px; width: 120px; height: 124px; border-radius: 60px 60px 8px 8px; }
  .grant-arch img { width: 92px; height: 92px; margin-top: 12px; }

  .club-events, .club-board, .club-docs, .club-write { padding-top: 4rem; }
  .club-events .events-row { margin-top: 2.5rem; }
  .board-row { margin-top: 2.5rem; }
  .board-card { padding: 24px 12px 26px; }
  .doc-card { padding: 20px 24px 28px; }
}

@media (max-width: 991.98px) {
  .header-top { flex-wrap: wrap; row-gap: 1rem; }

  .resources { padding: 4rem 0 8rem; }
  .res-box { margin-right: 0; }
  .res-card, .res-arrow { display: none; }
  .res-circle { top: auto; bottom: -80px; right: -12px; width: 190px; height: 190px; }
  .res-heart  { top: auto; bottom: -30px; right: -12px; width: 140px; height: 143px; }

  .about-grid { flex-direction: column; gap: 2.5rem; }
  .event-grid { flex-direction: column; gap: 2.5rem; }
  .event-aside { flex: none; width: 100%; max-width: 420px; margin-top: 0; }
  .renew-box { margin-right: 0; }
  .renew-star, .renew-arrow { display: none; }
  .renew-circle { top: auto; bottom: -60px; right: -12px; width: 180px; height: 180px; }
  .renew-tile   { top: auto; bottom: -20px; right: -12px; width: 140px; height: 165px; border-radius: 28px; }
  .renew-tile img { width: 96px; height: 102px; }
  .about-media { flex: none; width: 100%; max-width: 503px; margin: 0; }
  .about-deco-purple { left: -10px; }
  .about-deco-pink { right: -10px; }
  .about-circle { display: none; }
  .events-row > [class^="col-"]:last-child { margin-top: 29px; }
  .clubs-row > [class^="col-"]:not(:first-child) { margin-top: 35px; }
  /* .jobs-row > [class^="col-"]:not(:first-child) retiré : redondant avec
     --bs-gutter-y désormais posé sur .jobs-row (Bootstrap l'applique déjà en
     margin-top sur chaque colonne, à toutes les largeurs d'écran). */
  .jobs-watermark { display: none; }
  .header-zigzag { display: none; }

  /* Le hamburger se cale à droite du logo, les boutons passent en dessous */
  .header-top { align-items: center; }
  /* titre centré verticalement sur le logo (et donc sur le hamburger) */
  .site-brand { flex: 1 1 auto; align-items: center; }
  .site-title { margin-top: 0; }
  /* le débord du logo n'a de sens qu'en desktop, où le menu est à sa droite */
  .site-brand img { height: 116px; margin-top: 0; margin-bottom: 0; }
  /* Sous le logo : raccourcis Agenda / Groupes et clubs (contour)
     puis Adhérer (jaune, renforcé), centrés ; Espace adhérents passe dans le menu. */
  .header-actions { order: 1; width: 100%; margin-top: 0; margin-right: 0; flex-wrap: wrap; row-gap: 10px; justify-content: center; }
  .header-actions .btn-adherer { font-weight: 800; box-shadow: 0 4px 12px rgba(247, 204, 71, .45); }

  .header-collapse { width: 100%; }
  .main-nav { margin-top: .75rem; border-top: 1px solid rgba(74, 21, 93, .15); }
  .main-nav .nav { flex-direction: column; flex-wrap: nowrap; gap: 0; align-items: stretch; }
  .main-nav .nav-item { border-bottom: 1px solid rgba(74, 21, 93, .15); }
  .main-nav .nav-link { display: block; padding: .8rem .25rem; }
  .main-nav .nav-link.active::after { left: .25rem; bottom: .55rem; transform: none; width: 44px; }

  .hero-caption p { max-width: none; }
  .hero-card-text { max-width: none; }

  .club-hero-grid { flex-direction: column; }
  .club-nextcard { flex: none; width: 100%; max-width: 380px; margin-top: 0; }
  .club-contact { flex-direction: column; }
  .club-contact-item + .club-contact-item { border-left: 0; border-top: 1px solid var(--afsep-green); }
  .club-about-grid { flex-direction: column; }
  .club-about-side { flex: none; width: 100%; max-width: 502px; margin-top: 0; }
}

@media (max-width: 767.98px) {
  .site-header { padding-bottom: 1.5rem; }

  .about { padding: 3rem 0; }
  .about-title { font-size: 1.75rem; }

  .resources { margin-top: 2rem; padding: 3rem 0; }
  .res-box { padding: 2rem 1.5rem 2.5rem; }
  .res-box h2 { font-size: 1.75rem; }
  .res-circle, .res-heart { display: none; }
  .events { padding: 3rem 0; }
  .events-title { font-size: 1.75rem; }
  .events-lead { font-size: 1.1rem; margin-top: 1.5rem; }
  .clubs { padding: 3rem 0; }
  .clubs-title { font-size: 1.75rem; }
  .clubs-lead { font-size: 1.1rem; margin-top: 1.5rem; }
  .jobs { padding: 3rem 0 4rem; }
  .jobs-title { font-size: 1.75rem; }
  .jobs-lead { font-size: 1.1rem; margin-top: 1.5rem; }
  .offer { padding: 2rem 0 4rem; }
  .offer-card { margin-top: 2.5rem; padding: 2rem 1.5rem 2.5rem; }
  .offer-title { font-size: 1.4rem; }
  .offer-heading { margin-top: 2.5rem; }
  .offer-actions { flex-direction: column; gap: 1.25rem; }

  .event-page { padding-top: 3rem; padding-bottom: 5rem; }
  .event-page-title { font-size: 1.75rem; }
  .event-aside { max-width: none; }
  .renew { margin-top: 3rem; padding-bottom: 4rem; }
  .renew-box { padding: 2rem 1.5rem 2.5rem; }
  .renew-box h2 { font-size: 1.75rem; }
  .renew-circle, .renew-tile { display: none; }
  .events-watermark { display: none; }
  .event-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .event-card .btn-afsep-purple { margin-top: 2rem; }
  .events-all { margin-top: 2.5rem; }
  .site-brand { flex-wrap: wrap; gap: 1rem; }
  .site-brand img { height: 90px; margin-top: 0; margin-bottom: 0; }
  .site-title { font-size: 1.35rem; margin-top: 0; }
  .main-nav .nav-link { font-size: 1.05rem; }

  .hero-outer { margin: 1rem; padding: 0 1rem 3rem; }
  .hero-carousel { margin-top: 0; }
  .hero-carousel .carousel-item { height: 460px; }

  .hero-caption { left: 1.5rem; right: 1.5rem; top: 2rem; }
  .hero-title .l1 { font-size: 1.7rem; }
  .hero-title .l2, .hero-caption h2 { font-size: 2rem; }
  .hero-caption p { font-size: .95rem; margin-top: 1rem; }

  .hero-card {
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    width: auto;
    height: auto;
    flex-wrap: wrap;
    row-gap: .75rem;
    font-size: .95rem;
    padding: .85rem 1rem;
  }

  .hero-card .btn-hero { margin-left: 0; padding: .7rem 1.2rem; }

  .hero-carousel .carousel-control-prev { left: 4px; }
  .hero-carousel .carousel-control-next { right: 4px; }
  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next { font-size: 40px; }

  .club-hero { padding-top: 2.5rem; }
  .club-page-title { font-size: 1.75rem; }
  .club-page-text { font-size: 1rem; line-height: 1.7; }
  .club-facts { gap: 14px 1.5rem; }
  .club-fact { font-size: .8rem; gap: 12px; }
  .club-contact-value { font-size: 1rem; }

  .club-about { padding-top: 3rem; }
  .club-about-text p { font-size: 1rem; line-height: 1.7; }
  .grant-box h2 { white-space: normal; font-size: 1.6rem; }
  .grant-arch { right: 16px; bottom: -18px; width: 96px; height: 100px; border-radius: 48px 48px 6px 6px; }
  .grant-arch img { width: 74px; height: 74px; margin-top: 10px; }

  .club-events, .club-board, .club-docs, .club-write { padding-top: 3rem; }
  .club-docs { padding-bottom: 2rem; }
}

@media (max-width: 575.98px) {
  .site-header { padding-top: 14px; }
  .site-brand { gap: .75rem; }
  .site-brand img { height: 74px; }
  .site-title { font-size: 1.1rem; }
  .header-actions { gap: 10px; }
  .btn-afsep-yellow, .btn-afsep-outline { font-size: .82rem; padding: .3rem .85rem; }

  .hero-outer { margin: .5rem; padding: 0 .5rem 2.5rem; }
  .hero-carousel .carousel-item { height: 400px; }
  .hero-caption { left: 1rem; right: 1rem; top: 1.25rem; }
  .hero-title .l1 { font-size: 1.35rem; }
  .hero-title .l2, .hero-caption h2 { font-size: 1.6rem; }
  .hero-card { left: 1rem; right: 1rem; bottom: 1rem; }

  .about-title, .events-title, .clubs-title, .jobs-title,
  .event-page-title, .club-page-title { font-size: 1.5rem; }
  .res-box h2, .renew-box h2, .grant-box h2 { font-size: 1.4rem; }
  .offer-card, .res-box, .renew-box { padding-left: 1.25rem; padding-right: 1.25rem; }
  .club-card, .job-card, .event-card, .doc-card { padding-left: 18px; padding-right: 18px; }
}

/* Très petits écrans (360 px) : les 3 boutons sous le logo tiennent sur une ligne */
@media (max-width: 399.98px) {
  .header-actions { gap: 8px; }
  .header-actions .btn { font-size: .8rem; padding: .3rem .65rem; }
}

/* ---------- Footer ----------
   Vague relevée sur "Footer final.png" : crête violette à x = 880,
   amplitude 108 px ; vague pastel en arrière-plan à gauche.
   Repères (depuis la crête) : « AFSEP » y 172, filet y 414,
   copyright y 461->477, bas du footer y 542.                          */

.footer-wave {
  line-height: 0;
}

.footer-wave svg {
  width: 100%;
  height: 110px;
  display: block;
}

/* Le SVG laisse une zone transparente au-dessus des courbes (c'est
   voulu : violet et mauve pastel ne remplissent pas tout le rectangle).
   Cette zone montre par défaut le fond de page (--afsep-bg). Quand la
   section juste au-dessus du footer a une couleur différente, ce
   liseré casse la continuité visuelle : on pose alors sur .footer-wave
   un modificateur qui reprend exactement la couleur de cette section. */
.footer-wave--white {
  background-color: #fff;
}

.footer-wave--yellow-pale {
  background-color: var(--afsep-yellow-pale);
}

.footer-main {
  background-color: var(--afsep-purple);
  color: #fff;
  padding: 58px 0 56px;
  font-size: 1rem;
}

.footer-main p {
  line-height: 1.5;
}

/* La colonne FAQ passe à la ligne à 218 px sur la maquette */
.footer-faq p {
  max-width: 230px;
}

/* Seuls les liens FAQ et Liens utiles sont soulignés sur la maquette */
.footer-address a {
  text-decoration: none;
}

.footer-main h3 {
  color: #fff;
  font-size: 1.35rem;
  margin-bottom: 1.85rem;
}

.footer-main .footer-col-title {
  color: var(--afsep-green);
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: .18em;
  margin-bottom: 1.85rem;
}

.footer-main a {
  color: #fff;
}

.footer-faq a {
  text-decoration: underline;
}

.footer-social {
  font-size: 0;            /* supprime l'espace entre les pastilles inline-flex */
  padding-right: 20px;
  margin-top: -10px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: 14px;
  border-radius: 50%;
  background-color: var(--afsep-green);
  color: var(--afsep-purple);
  font-size: 1rem;
  text-decoration: none;
}

.footer-social a:hover {
  background-color: #93ba70;
}

.footer-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .4);
  opacity: 1;
  margin: 33px 0 0;
}

.footer-bottom {
  font-size: .95rem;
  margin-top: 46px;
}

.footer-bottom a {
  color: #fff;
  text-decoration: none;
  margin-left: 2rem;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

/* ---------- Footer responsive ---------- */

@media (max-width: 767.98px) {
  .footer-main { padding: 40px 0; }
  .footer-main h3 { margin-bottom: 1.25rem; }
  .footer-main .footer-col-title { margin-bottom: 1.25rem; }
  .footer-faq p { max-width: none; }
  .footer-social { padding-right: 0; margin-top: .5rem; }
  .footer-social a { margin-left: 0; margin-right: 14px; }
  .footer-divider { margin-top: 24px; }
  .footer-bottom { margin-top: 24px; }
  .footer-bottom a { display: block; margin-left: 0; margin-top: .5rem; }
}

@media (max-width: 575.98px) {
  .footer-wave svg { height: 60px; }
}

/* =========================================================
   Page de contenu standard (contenu.html)
   Titre, bande 2 colonnes, liste à puces, tableau, 3 colonnes
   ========================================================= */

.content-page {
  padding: 100px 0 60px;
}

.content-title {
  color: var(--afsep-purple);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.09;
  margin: 0;
}

.content-lead {
  margin: 38px 0 0;
  color: var(--afsep-purple);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 720px;
}

.content-kicker {
  margin: 60px 0 34px;
}

/* ---------- Bande de texte sur 2 colonnes ---------- */

.content-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.content-cols-2 p {
  margin: 0;
}

/* ---------- Liste à puces (puces vertes comme « à propos ») ---------- */

.content-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 37px;
  color: var(--afsep-purple);
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 720px;
}

.content-list li {
  position: relative;
  margin-top: 18px;
}

.content-list li::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 6px;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23A4CB81%22%3E%3Cpath%20d%3D%22M11.4%200H17.5A4.5%204.5%200%200%201%2022%204.5V11.3A4.5%204.5%200%200%201%2017.5%2015.8H12.4C10.3%2015.8%209.2%2017.9%207.2%2019.9C5.2%2021.9%200%2021.7%200%2017.8C0%2014.4%206.9%2014%206.9%209.2V4.5A4.5%204.5%200%200%201%2011.4%200Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

/* ---------- Tableau ---------- */

.content-table-wrap {
  overflow-x: auto;
}

.content-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--afsep-purple);
  border-radius: 20px;
  overflow: hidden;
  font-size: 1rem;
}

.content-table th,
.content-table td {
  padding: 14px 20px;
  text-align: left;
}

.content-table thead th {
  background-color: var(--afsep-purple);
  color: #fff;
  font-weight: 700;
}

.content-table tbody tr:nth-child(odd) {
  background-color: #fff;
}

.content-table tbody tr:nth-child(even) {
  background-color: var(--afsep-pink);
}

.content-table tbody td + td,
.content-table thead th + th {
  border-left: 1px solid rgba(74, 21, 93, .15);
}

/* ---------- Bloc sur 3 colonnes ---------- */

.content-cols-3 {
  row-gap: 24px;
}

.content-card {
  height: 100%;
  background-color: #fff;
  border-radius: 20px;
  padding: 30px 28px;
  box-shadow: 0 6px 24px rgba(74, 21, 93, .08);
}

.content-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--afsep-green);
  color: var(--afsep-purple);
  font-size: 1.4rem;
}

.content-card h3 {
  color: var(--afsep-purple);
  font-size: 1.25rem;
  font-weight: 800;
  margin: 18px 0 10px;
}

.content-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* ---------- Page de contenu responsive ---------- */

@media (max-width: 1199.98px) {
  .content-page { padding: 4rem 0 3rem; }
  .content-title { font-size: 2.2rem; }
}

@media (max-width: 767.98px) {
  .content-title { font-size: 1.9rem; }
  .content-lead { font-size: 1.1rem; }
  .content-cols-2 { grid-template-columns: 1fr; gap: 1.25rem; }
  .content-list { font-size: 1rem; }
}

/* =========================================================
   Galerie photos + visionneuse (contenu.html)
   Grille asymétrique 4 colonnes, lightbox plein écran
   avec zoom à l'ouverture et glissé à la navigation
   ========================================================= */

.gallery {
  padding-bottom: 110px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 20px;
}

.gallery-item {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  cursor: zoom-in;
  background-color: var(--afsep-pink);
}

.gi-1 { grid-column: span 2; grid-row: span 2; }
.gi-4, .gi-5, .gi-6 { grid-column: span 2; }

/* Classes de taille par tuile (bloc page builder "Galerie") — mêmes
   dimensions que .gi-1/.gi-4-6 ci-dessus, mais pilotées par un réglage par
   image plutôt que par une position figée dans la liste (qui ne
   fonctionnait que pour exactement 6 photos, cf. .gi-1..6). */
.gallery-item--grand-carre { grid-column: span 2; grid-row: span 2; }
.gallery-item--grand-rectangle { grid-column: span 2; }

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(74, 21, 93, 0);
  transition: background-color .35s ease;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.06);
}

.gallery-item:hover::after,
.gallery-item:focus-visible::after {
  background-color: rgba(74, 21, 93, .28);
}

/* ---------- Visionneuse ---------- */

body.lightbox-opened {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(74, 21, 93, .92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-stage {
  margin: 0;
  max-width: min(1000px, 86vw);
  text-align: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 74vh;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  opacity: 0;
}

.lightbox-img.zoom-in { animation: lightbox-zoom .45s ease forwards; }
.lightbox-img.slide-right { animation: lightbox-slide-right .35s ease forwards; }
.lightbox-img.slide-left { animation: lightbox-slide-left .35s ease forwards; }

@keyframes lightbox-zoom {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes lightbox-slide-right {
  from { opacity: 0; transform: translateX(60px) scale(.97); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes lightbox-slide-left {
  from { opacity: 0; transform: translateX(-60px) scale(.97); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.lightbox-caption {
  margin-top: 16px;
  color: #fff;
  font-size: 1rem;
}

.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-weight: 700;
}

.lightbox-nav,
.lightbox-close {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--afsep-green);
  color: var(--afsep-purple);
  font-size: 1.3rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: background-color .2s ease, scale .2s ease;
}

.lightbox-nav:hover,
.lightbox-close:hover {
  background-color: #fff;
  scale: 1.08;
}

.lightbox-prev { left: 30px; top: 50%; margin-top: -26px; }
.lightbox-next { right: 30px; top: 50%; margin-top: -26px; }
.lightbox-close { top: 24px; right: 24px; }

/* ---------- Galerie responsive ---------- */

@media (max-width: 991.98px) {
  .gallery-grid { grid-auto-rows: 180px; gap: 14px; }
}

@media (max-width: 767.98px) {
  .gallery { padding-bottom: 4rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gi-4, .gi-5, .gi-6 { grid-column: span 1; }
  .gi-4 { grid-column: span 2; }
  .lightbox-stage { max-width: 100vw; padding: 0 64px; }
  .lightbox-img { border-radius: 12px; }
  .lightbox-nav,
  .lightbox-close { width: 44px; height: 44px; font-size: 1.1rem; }
  .lightbox-prev { left: 10px; margin-top: -22px; }
  .lightbox-next { right: 10px; margin-top: -22px; }
  .lightbox-close { top: 14px; right: 14px; }
}

/* =========================================================
   Page « Prix AFSEP » (prix.html)
   Pas de maquette Figma : composition libre, construite avec
   les composants et la palette des autres pages.
   ========================================================= */

/* ---------- En-tête de page ---------- */

.prize-hero {
  position: relative;
  overflow-x: clip;   /* pas `hidden` : il rognerait l'ombre basse des cartes */
  padding: 100px 0 10px;
}

.prize-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 60px;
  align-items: center;
}

.prize-title {
  color: var(--afsep-purple);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.09;
  margin: 26px 0 0;
}

.prize-lead {
  margin: 30px 0 0;
  color: var(--afsep-purple);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 620px;
}

/* Décor : deux disques et une arche, composition fixe */

.prize-deco {
  position: relative;
  height: 330px;
}

.prize-deco > * {
  position: absolute;
}

.prize-orb-purple {
  left: 96px;
  top: 30px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background-color: var(--afsep-purple);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prize-orb-purple img {
  width: 118px;
  height: auto;
}

.prize-orb-green {
  left: 24px;
  top: 8px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background-color: var(--afsep-green);
}

.prize-arch {
  left: 12px;
  top: 158px;
  width: 152px;
  height: auto;
}

/* ---------- Deux cartes d'accès rapide ---------- */

.prize-jump {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 56px;
}

.prize-jump-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(74, 21, 93, .08);
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}

.prize-jump-card:hover,
.prize-jump-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(74, 21, 93, .16);
}

.prize-jump-card .content-card-icon {
  flex: none;
  transition: transform .3s ease;
}

.prize-jump-card:hover .content-card-icon {
  transform: rotate(-8deg) scale(1.06);
}

.prize-jump-card h2 {
  margin: 0;
  color: var(--afsep-purple);
  font-size: 1.2rem;
  font-weight: 800;
}

.prize-jump-card p {
  margin: 4px 0 0;
  color: var(--afsep-text);
  font-size: .95rem;
  line-height: 1.5;
}

.prize-jump-card .bi-arrow-right {
  margin-left: auto;
  color: var(--afsep-green);
  font-size: 1.5rem;
  transition: transform .3s ease;
}

.prize-jump-card:hover .bi-arrow-right {
  transform: translateX(8px);
}

/* ---------- Bandes de prix ---------- */

.prize-section {
  padding: 92px 0;
  scroll-margin-top: 24px;
}

.prize-section--white {
  background-color: #fff;
}

.prize-heading {
  margin: 34px 0 0;
  color: var(--afsep-purple);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.2;
}

.prize-text {
  margin: 24px 0 0;
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 860px;
}

.prize-subkicker {
  margin: 62px 0 0;
}

/* ---------- Encadré dotation ---------- */

.prize-award {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  margin-top: 34px;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(74, 21, 93, .08);
}

.prize-amount {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 36px;
  background-color: var(--afsep-purple);
  color: #fff;
}

.prize-amount::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background-color: var(--afsep-mauve);
  opacity: .35;
}

.prize-amount-num {
  position: relative;
  z-index: 1;
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.prize-amount-label {
  position: relative;
  z-index: 1;
  margin: 16px 0 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.prize-perks {
  list-style: none;
  margin: 0;
  padding: 40px 42px;
  display: grid;
  gap: 22px;
  align-content: center;
}

.prize-perks li {
  position: relative;
  padding-left: 52px;
  font-size: 1.05rem;
  line-height: 1.55;
}

.prize-perks .bi {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--afsep-green);
  color: #fff;
  font-size: .95rem;
}

/* ---------- Dossier de candidature : 4 étapes ---------- */

.prize-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 34px;
}

.prize-step {
  background-color: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 6px 24px rgba(74, 21, 93, .08);
}

.prize-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--afsep-green);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
}

.prize-step h3 {
  margin: 18px 0 10px;
  color: var(--afsep-purple);
  font-size: 1.05rem;
  font-weight: 800;
}

.prize-step p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
}

/* ---------- Barre d'échéance ---------- */

.prize-deadline {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding: 26px 34px;
  background-color: var(--afsep-yellow);
  border-radius: 10px;
}

.prize-deadline > .bi {
  font-size: 1.9rem;
  color: var(--afsep-purple);
  animation: afsep-pulse 2.6s ease-in-out infinite;
}

.prize-deadline-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(74, 21, 93, .75);
}

.prize-deadline-date {
  display: block;
  margin-top: 4px;
  color: var(--afsep-purple);
  font-size: 1.35rem;
  font-weight: 800;
}

/* Adresse d'envoi du dossier, à la place de l'ancien bouton */
.prize-deadline-contact {
  margin: 0 0 0 auto;
  max-width: 430px;
  color: var(--afsep-purple);
  font-size: .95rem;
  line-height: 1.5;
}

.prize-deadline-contact a {
  color: var(--afsep-purple);
  font-weight: 700;
  word-break: break-word;
}

@keyframes afsep-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

/* ---------- Frise des lauréats ---------- */

.laureates {
  position: relative;
  margin-top: 44px;
}

.lau-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

/* --n = nombre de lauréats, posé dans le HTML : le rail s'arrête
   ainsi au centre de la première et de la dernière pastille. */
.lau-line {
  position: absolute;
  left: calc(50% / var(--n, 6));
  right: calc(50% / var(--n, 6));
  top: 13px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--afsep-green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}

.laureates.is-visible .lau-line {
  transform: scaleX(1);
}

.lau-item {
  position: relative;
  padding: 50px 10px 0;
  text-align: center;
}

.lau-dot {
  position: absolute;
  left: 50%;
  top: 2px;
  margin-left: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #fff;
  border: 4px solid var(--afsep-green);
  transform: scale(0);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: var(--d, 0s);
}

.laureates.is-visible .lau-dot {
  transform: scale(1);
}

.lau-item--last .lau-dot {
  background-color: var(--afsep-green);
  box-shadow: 0 0 0 6px rgba(164, 203, 129, .32);
}

.lau-year {
  display: block;
  color: var(--afsep-green);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .1em;
}

.lau-name {
  display: block;
  margin-top: 6px;
  color: var(--afsep-purple);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.lau-item--last .lau-name {
  font-weight: 800;
}

.lau-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 12px;
  border-radius: 50rem;
  background-color: var(--afsep-green);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- Avantages du prix chercheur ---------- */

.prize-cards {
  margin-top: 34px;
  row-gap: 26px;
}

/* ---------- Page « Prix AFSEP » responsive ---------- */

@media (max-width: 1199.98px) {
  .prize-hero { padding-top: 4rem; }
  .prize-hero-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; }
  .prize-deco { height: 280px; transform: scale(.85); transform-origin: left center; }
  .prize-title { font-size: 2.2rem; }
  .prize-section { padding: 4.5rem 0; }
  .prize-award { grid-template-columns: 280px minmax(0, 1fr); }
  .prize-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991.98px) {
  .prize-hero-grid { grid-template-columns: 1fr; }
  .prize-deco { display: none; }
  .prize-heading br { display: none; }   /* les césures sont calées pour le desktop */
  .prize-jump { grid-template-columns: 1fr; gap: 20px; }
  .prize-award { grid-template-columns: 1fr; }
  .prize-amount { padding: 34px; }
  .prize-perks { padding: 30px 32px; }
  .lau-track { grid-auto-flow: row; gap: 26px; }
  /* En colonne, le rail unique est remplacé par un connecteur par item :
     il relie chaque pastille à la suivante et suit le même décalage. */
  .lau-line { display: none; }
  .lau-item { padding: 0 0 0 52px; text-align: left; }
  .lau-dot { left: 0; top: 0; margin-left: 0; }
  .lau-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 26px;
    bottom: -26px;
    width: 4px;
    border-radius: 2px;
    background-color: var(--afsep-green);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform .5s ease;
    transition-delay: var(--d, 0s);
  }
  .laureates.is-visible .lau-item:not(:last-child)::after { transform: scaleY(1); }
}

@media (max-width: 767.98px) {
  .prize-title { font-size: 1.9rem; }
  .prize-lead { font-size: 1.1rem; }
  .prize-heading { font-size: 1.5rem; }
  .prize-steps { grid-template-columns: 1fr; gap: 18px; }
  .prize-amount-num { font-size: 2.6rem; }
  .prize-deadline { padding: 22px 24px; gap: 18px; }
  .prize-deadline-contact { margin-left: 0; max-width: none; }
}

@media (max-width: 575.98px) {
  .prize-jump-card { padding: 20px 18px; gap: 14px; }
  .prize-jump-card .bi-arrow-right { display: none; }
  .prize-perks li { padding-left: 46px; font-size: 1rem; }
}

/* ---------- Animations désactivées si l'utilisateur le demande ---------- */

@media (prefers-reduced-motion: reduce) {
  .lau-dot,
  .lau-line,
  .lau-item:not(:last-child)::after {
    opacity: 1;
    transform: none !important;
    transition: none;
  }
  .prize-deadline > .bi {
    animation: none;
  }
  .prize-jump-card {
    transition: none;
  }
}

/* =========================================================
   Page « Club Jeunes » (club-jeunes.html)
   Reprend la structure de `club.html` (en-tête, coordonnées,
   à propos + bourse, bureau, bandeau jaune) ; seuls les blocs
   absents de cette maquette sont définis ici.
   ========================================================= */

/* ---------- Carte « prochain événement » en état vide ---------- */

.club-next-empty {
  margin: 22px 0 0;
  color: var(--afsep-purple);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
}

.club-next-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--afsep-purple);
  font-weight: 700;
  font-size: .95rem;
}

/* ---------- Nos activités : 3 cartes de renvoi ---------- */

.cj-activities {
  padding-top: 112px;
}

.cj-activities-row {
  margin-top: 34px;
  row-gap: 26px;
}

.cj-activity-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--afsep-purple);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cj-activity-link .bi {
  color: var(--afsep-green);
  font-size: 1.1rem;
  transition: transform .3s ease;
}

.cj-activity-link:hover .bi {
  transform: translateY(3px);
}

/* ---------- École thématique : texte + photo ---------- */

.cj-school {
  overflow-x: clip;   /* la barre rose du décor déborde à droite de la photo */
  padding-top: 118px;
  scroll-margin-top: 24px;
}

.cj-school-grid {
  display: flex;
  align-items: flex-start;
  gap: 96px;
}

.cj-school-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 600px;
}

.cj-school-text p {
  margin: 26px 0 0;
  color: var(--afsep-purple);
  font-size: 1.15rem;
  line-height: 1.7;
}

.cj-school-text .content-list {
  margin-top: 26px;
}

.cj-school-media {
  flex: 0 0 470px;
  margin-top: 64px;
}

/* ---------- Le Club Jeunes au congrès SEP ---------- */

.cj-congres {
  overflow: hidden;   /* la gouttière de 30 px dépasse le padding du container */
  padding-top: 118px;
  scroll-margin-top: 24px;
}

.cj-congres-lead {
  margin: 26px 0 0;
  max-width: 900px;
  color: var(--afsep-purple);
  font-size: 1.15rem;
  line-height: 1.7;
}

.cj-speakers {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
  margin-top: 12px;
}

.cj-speaker {
  height: 100%;
  background-color: #fff;
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 6px 24px rgba(74, 21, 93, .08);
}

.cj-speaker h3 {
  margin: 0;
  color: var(--afsep-purple);
  font-size: 1.1rem;
  font-weight: 800;
}

.cj-speaker-org {
  margin: 8px 0 0;
  color: var(--afsep-green);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cj-speaker-rule {
  width: 60px;
  height: 3px;
  margin: 18px 0;
  border: 0;
  opacity: 1;
  background-color: var(--afsep-green);
}

.cj-speaker p:last-child {
  margin: 0;
  font-size: .98rem;
  line-height: 1.6;
}

/* ---------- Les midis du Club Jeunes : bande verte ---------- */

.cj-midis {
  /* la demi-gouttière de 14,5 px des tuiles dépasse les 12 px
     de padding du container : ~3 px de débordement sans ce clip */
  overflow-x: clip;
  margin-top: 118px;
  padding: 88px 0;
  background-color: var(--afsep-green);
  scroll-margin-top: 24px;
}

.cj-midis .events-lead {
  max-width: 780px;
  font-size: 1.15rem;
  line-height: 1.6;
}

.cj-midis-row {
  --bs-gutter-x: 29px;
  --bs-gutter-y: 29px;
  margin-top: 30px;
}

/* ---------- Candidater au prix de thèse ---------- */

.cj-prize {
  padding-top: 110px;
  scroll-margin-top: 24px;
}

.cj-prize-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 60px;
  align-items: start;
  margin-top: 26px;
}

.cj-prize-text {
  margin: 0 0 26px;
  color: var(--afsep-purple);
  font-size: 1.15rem;
  line-height: 1.7;
}

.cj-prize .prize-deadline {
  margin-top: 34px;
}

/* La colonne est deux fois plus étroite que sur `prix.html` :
   l'adresse d'envoi passe sous la date au lieu de se tasser à droite. */
.cj-prize .prize-deadline-contact {
  flex-basis: 100%;
  margin-left: 0;
  max-width: none;
}

.cj-quote {
  position: relative;
  margin: 0;
  padding: 34px 32px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(74, 21, 93, .08);
}

.cj-quote .bi {
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: 2.2rem;
  color: var(--afsep-pink);
}

.cj-quote blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--afsep-purple);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.65;
}

.cj-quote figcaption {
  margin-top: 20px;
  color: var(--afsep-green);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cj-quote figcaption span {
  display: block;
  margin-top: 4px;
  color: var(--afsep-text);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Nom de l'auteur enveloppé dans un <span> pour être un champ du page builder
   (bloc « prix », sous-plan 01b) : il garde le style du nom, pas celui de la
   légende. */
.cj-quote figcaption .cj-quote-auteur {
  display: inline;
  margin-top: 0;
  color: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* ---------- Page « Club Jeunes » responsive ---------- */

@media (max-width: 1199.98px) {
  .cj-activities,
  .cj-school,
  .cj-congres,
  .cj-prize { padding-top: 4.5rem; }
  .cj-midis { margin-top: 4.5rem; padding: 3.5rem 0; }
  .cj-school-grid { gap: 40px; }
  .cj-school-media { flex-basis: 380px; margin-top: 40px; }
  .cj-prize-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; }
}

@media (max-width: 991.98px) {
  .cj-school-grid { flex-direction: column; gap: 36px; }
  .cj-school-text { max-width: none; }
  .cj-school-media { flex-basis: auto; width: 100%; margin-top: 0; }
  .cj-prize-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 767.98px) {
  .cj-school-text p,
  .cj-congres-lead,
  .cj-prize-text { font-size: 1.05rem; }
  .cj-quote { padding: 26px 24px; }
  .cj-quote .bi { display: none; }
}

/* ---------- Raccourci d'édition rapide (page/show.html.twig) ----------
   Visible uniquement pour un admin connecté (is_granted('ROLE_ADMIN')),
   jamais pour le public. Bouton flottant plutôt qu'inséré dans le flux,
   pour ne jamais perturber la mise en page publique ; z-index sous la
   visionneuse (1080) mais au-dessus du reste. */
.pb-raccourci-edition {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #212529;
  color: #fff;
  border-radius: 50rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.pb-raccourci-edition:hover {
  background: #000;
  color: #fff;
}

/* =========================================================
   Espace adhérents (espace-adherents.html)
   Différenciation avec le site public : fond jaune très clair sur
   la zone centrale, header et footer identiques au reste du site.
   ========================================================= */

.adherents-page {
  background-color: var(--afsep-yellow-pale);
  padding: 100px 0 60px;
}

.adherents-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--afsep-yellow);
  color: #333;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
  padding: .4rem 1.1rem;
  border-radius: 50rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1199.98px) {
  .adherents-page { padding: 4rem 0 3rem; }
}

/* =========================================================
   Agenda (agenda.html)
   Section 1 : réutilise .events (fond vert, cartes .event-card).
   Section 2 : archives de l'année sur fond clair, cartes passées en
   retrait, puis liste horizontale des années précédentes.
   ========================================================= */

.agenda-upcoming {
  padding-bottom: 88px;
}

.agenda-archives {
  overflow: hidden;   /* gouttière de .events-row (29 px) > padding du container en mobile, cf. .events */
  padding: 88px 0 140px;
}

.agenda-archives-title {
  margin: 0;
  font-size: 2.2rem;
  line-height: 1.1;
}

.agenda-archives-lead {
  margin: 24px 0 0;
  color: var(--afsep-text);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}

/* Événement passé : carte bordée plutôt qu'ombrée, date et badge éteints */
.event-card--past {
  box-shadow: none;
  border: 1px solid rgba(74, 21, 93, .15);
}

.event-card--past .event-badge {
  background-color: var(--afsep-pastel);
}

.event-card--past .event-day,
.event-card--past .event-my {
  color: #7a6a82;
}

.agenda-years {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid rgba(74, 21, 93, .15);
}

.agenda-years-title {
  margin: 0 0 20px;
  font-size: 1.3rem;
}

.agenda-years-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agenda-years-list a {
  display: inline-block;
  padding: .45rem 1.3rem;
  border: 2px solid var(--afsep-purple);
  border-radius: 50rem;
  color: var(--afsep-purple);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}

.agenda-years-list a:hover,
.agenda-years-list a:focus,
.agenda-years-list a[aria-current="page"] {
  background-color: var(--afsep-purple);
  color: #fff;
}

@media (max-width: 767.98px) {
  .agenda-upcoming { padding-bottom: 3.5rem; }
  .agenda-archives { padding: 3.5rem 0 5rem; }
  .agenda-archives-title { font-size: 1.8rem; }
  .agenda-years { margin-top: 3rem; padding-top: 2rem; }
}

/* =========================================================
   Connexion adhérent (connexion.html)
   Fond jaune pâle de l'Espace adhérents (.adherents-page) ; carte
   blanche du formulaire à gauche, encart violet « Adhérer » à droite.
   ========================================================= */

.login-page { padding-top: 80px; }

.login-card {
  height: 100%;
  background-color: #fff;
  border-radius: 20px;
  padding: 48px 56px;
  box-shadow: 0 10px 30px rgba(74, 21, 93, .08);
}

.login-card .adherents-badge { margin-bottom: 1.25rem; }

.login-card .content-title { font-size: 2.5rem; }

.login-lead {
  margin: 14px 0 32px;
  color: var(--afsep-purple);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.5;
}

.login-page .form-label,
.club-write .form-label {
  margin-bottom: 6px;
  color: var(--afsep-purple);
  font-weight: 700;
  font-size: .95rem;
}

.login-page .form-control,
.club-write .form-control {
  border: 2px solid #E5DCE8;
  border-radius: 10px;
  padding: .6rem 1rem;
  color: #333;
}

.login-page .form-control:focus,
.club-write .form-control:focus {
  border-color: var(--afsep-purple);
  box-shadow: 0 0 0 .2rem rgba(74, 21, 93, .12);
}

.login-password { position: relative; }

.login-password .form-control { padding-right: 3.2rem; }

.login-password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #7A6A80;
}

.login-password-toggle:hover { color: var(--afsep-purple); background-color: #F4EEF6; }

.login-card .btn-afsep-purple { padding: .6rem 1.6rem; font-weight: 700; }

/* Séparateur « ou » : filets verts de la charte */
.login-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 34px 0 24px;
  color: #8A7D90;
  font-weight: 600;
  font-size: .9rem;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background-color: var(--afsep-green);
  opacity: .55;
}

.login-subtitle {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.login-help {
  margin-bottom: 16px;
  color: #555;
  font-size: .95rem;
}

.login-link-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.login-link-form .form-control { flex: 1 1 220px; width: auto; }

.btn-afsep-outline-purple {
  border: 2px solid var(--afsep-purple);
  border-radius: 50rem;
  background-color: transparent;
  color: var(--afsep-purple);
  font-weight: 700;
  padding: .5rem 1.4rem;
}

.btn-afsep-outline-purple:hover,
.btn-afsep-outline-purple:focus {
  background-color: var(--afsep-purple);
  border-color: var(--afsep-purple);
  color: #fff;
}

.login-sent {
  display: flex;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  background-color: #EFF6E8;
  color: #3F6B22;
  font-weight: 600;
  font-size: .92rem;
}

.login-sent[hidden] { display: none; }

/* Encart « Pas encore adhérent ? » */
.login-aside {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 48px 44px;
  border-radius: 20px;
  background-color: var(--afsep-purple);
  color: #fff;
}

.login-aside > *:not(.login-aside-disc) { position: relative; }

.login-aside-disc {
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background-color: var(--afsep-mauve);
}

.login-aside h2 {
  margin-bottom: 14px;
  color: #fff;
  font-size: 1.9rem;
}

.login-benefits {
  list-style: none;
  margin: 24px 0 32px;
  padding: 0;
}

.login-benefits li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 34px;
  font-weight: 600;
}

.login-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--afsep-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234A155D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.login-aside .btn-afsep-yellow {
  padding: .55rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
}

.login-aside-note {
  margin: 18px 0 0;
  font-size: .88rem;
  opacity: .85;
}

@media (max-width: 991.98px) {
  .login-page { padding-top: 3rem; }
  .login-aside-disc { width: 150px; height: 150px; right: -70px; bottom: -70px; }
  .login-aside-note { max-width: calc(100% - 70px); }
  .login-card,
  .login-aside { padding: 36px 32px; }
}

@media (max-width: 575.98px) {
  .login-card,
  .login-aside { padding: 28px 20px; border-radius: 16px; }
  .login-card .content-title { font-size: 2.1rem; }
  .login-link-form .btn { width: 100%; }
}

/* =========================================================
   Adhésion (adhesion.html, adhesion-confirmation.html)
   Reprend la page de connexion : fond jaune pâle, carte blanche du
   formulaire à gauche, encart violet à droite devenu le récapitulatif.
   Sections numérotées par une pastille verte, choix en tuiles et en
   pilules ; un choix pas encore disponible est grisé.
   ========================================================= */

.adhesion-page .login-card { height: auto; }

.adhesion-page .form-select {
  border: 2px solid #E5DCE8;
  border-radius: 10px;
  padding: .6rem 2.25rem .6rem 1rem;
  color: #333;
}

.adhesion-page .form-select:focus {
  border-color: var(--afsep-purple);
  box-shadow: 0 0 0 .2rem rgba(74, 21, 93, .12);
}

.adhesion-page .form-control[readonly] { background-color: #F6F2F7; color: #6B6070; }

.adhesion-page legend.form-label { float: none; width: auto; display: block; }

.adhesion-page .form-check-input {
  border: 2px solid #CDBFD3;
}

.adhesion-page .form-check-input:checked {
  background-color: var(--afsep-purple);
  border-color: var(--afsep-purple);
}

.adhesion-page .form-check-input:focus {
  border-color: var(--afsep-purple);
  box-shadow: 0 0 0 .2rem rgba(74, 21, 93, .12);
}

.adhesion-page a:not(.btn) { color: var(--afsep-purple); font-weight: 700; }

.adh-section {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 2px solid #F1EAF3;
}

.adh-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.adh-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  margin-bottom: 20px;
  font-size: 1.3rem;
}

/* Fieldset utilisé comme section (inscription groupée) : légende rendue comme le titre h2. */
fieldset.adh-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.org-page .login-card { margin-top: 24px; }
legend.adh-section-title { float: none; width: 100%; padding: 32px 0 0; margin-top: 36px; border-top: 2px solid #F1EAF3; font-weight: 800; color: var(--afsep-purple); }
fieldset.org-journees-bloc > legend.adh-section-title { padding-top: 0; margin-top: 0; border-top: 0; }

.adh-step {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--afsep-green);
  color: var(--afsep-purple);
  font-size: 1rem;
  font-weight: 800;
}

.adh-help {
  margin: 6px 0 0;
  color: #6B6070;
  font-size: .88rem;
}

.adh-help-before { margin: 0 0 10px; }

/* Tuiles du profil */
.adh-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.adh-tile {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border: 2px solid #E5DCE8;
  border-radius: 14px;
  background-color: #fff;
  cursor: pointer;
}

.adh-tile:has(input:checked) {
  border-color: var(--afsep-purple);
  background-color: #F8F3FA;
}

.adh-tile:has(input:focus-visible) { box-shadow: 0 0 0 .2rem rgba(74, 21, 93, .2); }

.adh-tile-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--afsep-pink);
  color: var(--afsep-purple);
  font-size: 1.25rem;
}

.adh-tile-body { display: flex; flex-direction: column; gap: 2px; }

.adh-tile-body strong { color: var(--afsep-purple); font-size: 1.05rem; }

.adh-tile-body > span { color: #6B6070; font-size: .9rem; }

.adh-tile.is-disabled,
.adh-pill.is-disabled {
  border-style: dashed;
  background-color: #FAF8FB;
  cursor: not-allowed;
  opacity: .7;
}

.adh-soon {
  display: inline-block;
  margin-left: 6px;
  padding: .1rem .55rem;
  border-radius: 50rem;
  background-color: var(--afsep-yellow-pale);
  color: #6B5A1E;
  font-size: .72rem;
  font-weight: 700;
  vertical-align: middle;
}

/* Tarifs : une ligne par tarif, montant à droite */
.adh-tarifs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adh-tarif {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid #E5DCE8;
  border-radius: 12px;
  cursor: pointer;
}

.adh-tarif .form-check-input { flex-shrink: 0; margin: 0; }

.adh-tarif:has(input:checked) {
  border-color: var(--afsep-purple);
  background-color: #F8F3FA;
}

.adh-tarif-libelle { flex: 1; font-weight: 600; }

/* Conditions d'un tarif réduit, sous son libellé (relecture du lot 03) */
.adh-tarif-criteres {
  display: block;
  color: #6B6070;
  font-size: .85rem;
  font-weight: 400;
}

.adh-tarif-montant {
  color: var(--afsep-purple);
  font-weight: 800;
  font-size: 1.1rem;
  white-space: nowrap;
}

/* Pilules : oui / non, modes de paiement */
.adh-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.adh-pill {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1.2rem;
  border: 2px solid #E5DCE8;
  border-radius: 50rem;
  background-color: #fff;
  color: var(--afsep-purple);
  font-weight: 700;
  cursor: pointer;
}

.adh-pill:has(input:checked) {
  border-color: var(--afsep-purple);
  background-color: var(--afsep-purple);
  color: #fff;
}

.adh-pill:has(input:focus-visible) { box-shadow: 0 0 0 .2rem rgba(74, 21, 93, .2); }

/* Oui / non : boutons radio en ligne */
.adh-radios .form-check-inline { margin-right: 1.5rem; }

.adh-radios .form-check-label { font-weight: 600; }

.adh-checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 16px;
}

/* E-mail déjà connu */
.adh-known {
  margin-top: 14px;
  padding: 16px 18px;
  border-left: 4px solid var(--afsep-yellow);
  border-radius: 10px;
  background-color: var(--afsep-yellow-pale);
  font-size: .95rem;
}

.adh-known p { margin-bottom: 10px; }

.adh-known i { color: var(--afsep-purple); }

.adh-mention {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: 10px;
  background-color: #F8F3FA;
  color: #555;
  font-size: .92rem;
}

.adh-submit { padding: .7rem 2rem !important; font-size: 1.05rem; }

/* Encart récapitulatif, collé en haut de l'écran sur ordinateur */
.adh-aside { height: auto; }

/* Encart plus étroit que sur la connexion : disque réduit, note dégagée */
.adh-aside .login-aside-disc { width: 150px; height: 150px; right: -70px; bottom: -70px; }

.adh-aside .login-aside-note { max-width: calc(100% - 70px); }

@media (min-width: 992px) {
  .adh-aside { position: sticky; top: 24px; }
}

.adh-summary { margin: 18px 0 0; }

.adh-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.adh-summary dt { font-weight: 600; opacity: .8; }

.adh-summary dd { margin: 0; font-weight: 700; text-align: right; }

.adh-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 16px 0 0;
  font-weight: 600;
}

.adh-total strong {
  color: var(--afsep-yellow);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
}

/* Confirmation : récapitulatif sur deux colonnes, libellé au-dessus de la valeur */
.adh-recap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  margin: 0 0 28px;
}

.adh-recap dl { margin: 0; }

.adh-recap dl > div {
  padding: 10px 0;
  border-bottom: 1px solid #F1EAF3;
}

.adh-recap dt { color: #6B6070; font-size: .88rem; font-weight: 600; }

.adh-recap dd { margin: 2px 0 0; color: var(--afsep-purple); font-weight: 700; }

.adh-consignes {
  margin-bottom: 28px;
  padding: 20px 22px;
  border-radius: 12px;
  background-color: #F8F3FA;
}

.adh-consignes p:last-child { margin-bottom: 0; }

/* Paiement en ligne (sous-plan 04) : texte HelloAsso sous les modes */
.adh-helloasso {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background-color: #F8F3FA;
  color: #555;
  font-size: .92rem;
}

.adh-helloasso i { color: var(--afsep-purple); font-size: 1.15rem; line-height: 1.3; }

.adh-helloasso p { margin: 0; }

.adh-helloasso[hidden] { display: none; }

/* Bloc « Payer en ligne » : adhésion en attente, retour de paiement */
.adh-payer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
  padding: 20px 22px;
  border: 2px solid var(--afsep-purple);
  border-radius: 12px;
  background-color: #fff;
}

.adh-payer > div { flex: 1 1 260px; }

.adh-payer > div p { margin: 0; }

.adh-payer .adh-help { flex-basis: 100%; margin: 0; }

.login-card .adh-payer .btn-afsep-purple { white-space: nowrap; }

/* Changement de mode de règlement par le titulaire */
.adh-mode { margin-bottom: 28px; }

.adh-mode .adh-pills { margin-bottom: 16px; }

/* Alerte d'un paiement qui n'a pas démarré ou pas abouti */
.adh-alerte {
  display: flex;
  gap: 10px;
  margin: 0 0 24px;
  padding: 14px 16px;
  border-left: 4px solid var(--afsep-yellow);
  border-radius: 10px;
  background-color: var(--afsep-yellow-pale);
  font-size: .95rem;
}

.adh-alerte i { color: var(--afsep-purple); }

.adh-alerte p { margin: 0; }

.adh-payer[hidden],
.adh-alerte[hidden] { display: none; }

.adh-next-title { margin-bottom: 12px; }

.adh-next {
  margin: 0;
  padding-left: 1.3rem;
}

.adh-next li { margin-bottom: 6px; }

.adh-next li::marker { color: var(--afsep-purple); font-weight: 800; }

.adh-aside .btn-afsep-yellow { margin-top: 8px; }

@media (max-width: 767.98px) {
  .adh-checks { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575.98px) {
  .adh-tiles,
  .adh-checks { grid-template-columns: 1fr; }
  .adh-section-title { font-size: 1.15rem; }
  .adh-tarif { align-items: flex-start; }
  .adh-submit { width: 100%; }
  .adh-recap { grid-template-columns: 1fr; }
}

/* =========================================================
   Espace adhérents : tableau de bord, mes inscriptions, profil
   (espace-adherents.html, espace-inscriptions.html, espace-profil.html)
   Composants repris tels quels : .login-card, .adh-recap, .adh-payer,
   .adh-alerte, .login-sent (adhésion), .content-card (contenu),
   .event-card (agenda), .content-table (contenu), .offer-back (offre).
   Seuls les ajustements propres à ces pages sont ici.
   ========================================================= */

/* Gouttière de .events-row (29 px) > padding du container en mobile, cf. .events */
.espace-page { overflow-x: clip; }

/* Lien de retour au-dessus du badge */
.espace-back { margin: 0 0 28px; }

.espace-page .offer-back {
  color: var(--afsep-purple);
  font-weight: 700;
}

/* Retour d'action sous le chapô */
.espace-page .espace-flash { margin: 28px 0 0; max-width: 720px; }

.espace-page .login-card .espace-flash { margin: 0 0 28px; max-width: none; }

/* --- Tableau de bord : bloc « Mon adhésion » --- */

.espace-adhesion { height: auto; }

.espace-adhesion > * { margin-bottom: 0; }

.espace-adhesion > * + * { margin-top: 24px; }

.espace-adhesion .adh-payer .btn-afsep-purple { white-space: nowrap; }

/* --- Tableau de bord : cartes devenues des liens --- */

/* Rangée alignée sur le bloc « Mon adhésion » : .content-kicker posé sur
   une .row en annulait les marges négatives. */
.espace-cartes { margin-top: 44px; }

.espace-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}

.espace-card:hover,
.espace-card:focus-visible {
  color: inherit;
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(74, 21, 93, .16);
}

.content-card .espace-card-count {
  margin-top: 14px;
  color: var(--afsep-purple);
  font-weight: 700;
}

/* --- Page « Adhésion en attente de règlement » : boutons empilés --- */

.espace-liens {
  display: grid;
  gap: 12px;
}

/* --- Mes inscriptions : cartes des journées à venir --- */

/* Sous un intertitre : la rangée garde la compensation de sa gouttière
   verticale, que le margin-top de .events-row annule. */
.espace-page .events-row { margin-top: calc(-1 * var(--bs-gutter-y)); }

.event-card--mine .event-place { margin-bottom: 14px; }

.event-mine {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 26px;
  color: #3F6B22;
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.35;
}

.event-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: auto;
}

.event-card .event-actions .btn-afsep-purple { margin-top: 0; }

.event-actions .btn-afsep-outline-purple { padding: .45rem 1.4rem; font-size: 1.05rem; }

.event-card--mine .event-register-note { margin-top: 14px; }

/* --- Mes inscriptions : aucune inscription à venir --- */

.espace-vide {
  height: auto;
  max-width: 640px;
}

.espace-vide .btn-afsep-purple { margin-top: 20px; }

/* --- Mes inscriptions : tableau des journées passées --- */

.espace-page .content-table { min-width: 680px; }

.espace-page .content-table td:first-child { white-space: nowrap; }

.espace-page .content-table a {
  color: var(--afsep-purple);
  font-weight: 700;
}

/* --- Profil : encart « Mon adhésion » d'un compte sans adhésion à jour --- */

.espace-aside-texte { margin: 18px 0 20px; font-weight: 600; }

@media (max-width: 575.98px) {
  .event-actions .btn { width: 100%; }
  .event-actions form { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .espace-card { transition: none; }
  .espace-card:hover,
  .espace-card:focus-visible { transform: none; }
}

/* =========================================================
   Raccourcis de maquette (connexion.html, admin-connexion.html)
   Accès direct aux pages connectées sans passer par le formulaire.
   Volontairement neutre et en pointillés : ce n'est pas de l'interface.
   ========================================================= */

.mockup-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 32px auto 0;
  padding: 10px 14px;
  width: fit-content;
  max-width: 100%;
  border: 1.5px dashed #B9AEBE;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, .6);
  font-size: .85rem;
}

.mockup-shortcuts-label {
  color: #7A6A80;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mockup-shortcuts a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid #E0D8E4;
  color: var(--afsep-purple);
  font-weight: 600;
  text-decoration: none;
}

.mockup-shortcuts a:hover {
  border-color: var(--afsep-purple);
}

/* État affiché (adhesion.html, adhesion-confirmation.html) */
.mockup-shortcuts a.active {
  border-color: var(--afsep-purple);
  background-color: #F4EEF6;
}

/* ===== Contenus éditoriaux (lot 14) : FAQ, organigramme, pages légales ===== */
.faq-list { margin-top: 12px; }

.faq-item {
  margin-bottom: 12px;
  border: 1px solid var(--afsep-green);
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  font-weight: 700;
  color: var(--afsep-purple);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "\F282"; /* bi-chevron-down */
  font-family: "bootstrap-icons";
  font-weight: 400;
  transition: transform .2s;
}

.faq-item[open] summary { background-color: #f4eff6; }
.faq-item[open] summary::after { transform: rotate(180deg); }

.faq-reponse { padding: 14px 20px 6px; }
.faq-item--edition { padding: 14px 20px; }
.faq-question { margin: 0 0 8px; font-size: 1rem; font-weight: 700; color: var(--afsep-purple); }

.board-link {
  margin: 8px 0 14px;
  color: var(--afsep-purple);
  font-size: 1.25rem;
  text-decoration: none;
}

.legal-text { max-width: 60rem; margin-top: 32px; }

.legal-text h2 {
  margin: 28px 0 10px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--afsep-purple);
}

.legal-text h2:first-child { margin-top: 0; }


/* ===== Finitions des blocs existants =====
   Blocs génériques (titre, zone de texte, image, bouton, carte, tableau,
   galerie, hero, CTA, sections en colonnes) et sections de projet. Tout est
   cadré par les classes .pb-* ou par les classes de maquette propres au
   bloc. `body.pb-edition` : le canvas de l'éditeur (posé par
   block_type.js) garde champs vides et cadres « choisir une image »,
   masqués sur le site. */

/* --- Champs facultatifs vides : masqués sur le site --- */
body:not(.pb-edition) :is(
  .pb-zone-texte, .pb-titre, .pb-chapo, .pb-bouton, .pb-liste, .pb-texte-2-colonnes,
  .pb-texte-image, .pb-cta, .pb-hero, .content-card, .about-text,
  .pb-journees, .pb-offres, .pb-clubs, .cj-activities, .cj-school, .cj-congres,
  .cj-midis, .cj-prize, .cj-speaker, .renew
) [data-champ]:empty,
body:not(.pb-edition) .pb-image-legende:empty,
body:not(.pb-edition) .pb-image-vide,
body:not(.pb-edition) :is(.about-media, .cj-school-media):has(.pb-image-vide),
body:not(.pb-edition) .cj-activity-link:has([data-champ]:empty),
body:not(.pb-edition) .prize-deadline:has([data-champ]):not(:has([data-champ]:not(:empty))),
body:not(.pb-edition) .cj-quote:has([data-champ]):not(:has([data-champ]:not(:empty))) {
  display: none;
}

/* Bloc ou carte sans aucun texte : rien à afficher sur le site */
body:not(.pb-edition) :is(.cj-activities, .cj-congres, .cj-midis, .cj-prize, .renew):has([data-champ]):not(:has([data-champ]:not(:empty))),
body:not(.pb-edition) .cj-school:has([data-champ]):not(:has([data-champ]:not(:empty), .club-photo img)),
body:not(.pb-edition) :is(.cj-activities, .cj-midis, .pb-bloc) > .content-card:has([data-champ]):not(:has([data-champ]:not(:empty))),
body:not(.pb-edition) :is(.cj-activities, .cj-midis) .content-card:has([data-champ]):not(:has([data-champ]:not(:empty))),
body:not(.pb-edition) .pb-bloc.content-card:has([data-champ]):not(:has([data-champ]:not(:empty))),
body:not(.pb-edition) .cj-speaker:has([data-champ]):not(:has([data-champ]:not(:empty))) {
  display: none;
}

/* Cadre d'image à choisir (éditeur) */
.pb-image-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 9rem;
  padding: 1rem;
  border: 2px dashed #C0AAC8;
  border-radius: 12px;
  background: #FBF8FC;
  color: #6B5575;
  font-size: .95rem;
  text-align: center;
  cursor: pointer;
}

/* Lien et état vide */
.pb-vide {
  margin: 2rem 0 0;
  color: var(--afsep-purple);
  font-size: 1.05rem;
  font-weight: 700;
}

/* Cibles tactiles et focus clavier des boutons de bloc */
:is(.pb-bouton, .pb-cta, .pb-hero, .pb-offres-tout) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
}

:is(.pb-bouton, .pb-cta, .pb-hero, .about-text, .renew-box, .events-all, .pb-offres-tout, .pb-clubs, .event-card, .job-card) .btn:focus-visible,
.cj-activity-link:focus-visible,
.gallery-item:focus-visible,
.content-table-wrap:focus-visible {
  outline: 3px solid var(--afsep-purple);
  outline-offset: 3px;
}

.pb-cta--violet .btn:focus-visible,
.pb-hero .btn:focus-visible,
.club-card--featured .btn:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px var(--afsep-purple);
}

/* --- Titre, zone de texte, chapô, listes --- */
.pb-titre-h2 {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem);
  overflow-wrap: anywhere;
}

.pb-titre h4 { font-size: 1.25rem; }
.pb-titre h5 { font-size: 1.1rem; }
.pb-titre h6 { font-size: 1rem; }
.pb-titre :is(h4, h5, h6) { margin: 0; font-weight: 800; }

.pb-zone-texte-titre {
  margin: 1.25rem 0 0;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.pb-zone-texte > .section-kicker:first-child + .pb-zone-texte-corps,
.pb-zone-texte > .pb-zone-texte-titre:first-child { margin-top: 0; }

.pb-zone-texte-corps {
  margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.pb-zone-texte-corps > :first-child { margin-top: 0; }
.pb-zone-texte-corps > :last-child { margin-bottom: 0; }
.pb-zone-texte-corps ul,
.pb-zone-texte-corps ol { padding-left: 1.5rem; }
.pb-zone-texte-corps li + li { margin-top: .4rem; }
.pb-zone-texte-corps ul li::marker { color: var(--pb-vert-texte); }
.pb-zone-texte-corps a { color: var(--afsep-purple); font-weight: 700; text-underline-offset: 3px; }
.pb-zone-texte-corps a:hover { color: #000; }

.pb-chapo .content-lead { max-width: 46rem; overflow-wrap: anywhere; }

/* La liste générique garde ses puces vertes dans la gouttière du bloc. */
.pb-liste .about-list {
  margin-top: 0;
  padding-left: 37px;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

.pb-liste .about-list li:first-child { margin-top: 0; }

/* Bloc posé dans une colonne : une seule gouttière */
.pb-bloc .about-title,
.pb-bloc .about-intro { overflow-wrap: anywhere; }

/* --- Image --- */
.pb-image img { height: auto; border-radius: 16px; }

.pb-image-legende {
  margin-top: .6rem;
  color: #5B4A64;
  font-size: .9rem;
  line-height: 1.5;
}

.pb-image .pb-image-vide { aspect-ratio: 16 / 9; min-height: 0; }

@media (max-width: 575.98px) {
  /* Sur mobile, 25 % de l'écran est trop petit pour voir une image. */
  .pb-image .w-25 { width: 50% !important; }
  .pb-image .w-50,
  .pb-image .w-75 { width: 100% !important; }
}

/* --- Bouton --- */
.pb-bouton .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.pb-bouton .btn-afsep-purple,
.pb-bouton .btn-afsep-yellow,
.pb-bouton .btn-afsep-outline,
.pb-bouton .btn-afsep-green { padding-left: 1.6rem; padding-right: 1.6rem; font-size: 1rem; }

/* --- Texte sur 2 colonnes --- */
.pb-texte-2-colonnes { overflow-wrap: anywhere; }
.pb-texte-2-colonnes > div > * + * { margin-top: 1rem; }
.pb-texte-2-colonnes p { margin: 0; }
.pb-texte-2-colonnes ul,
.pb-texte-2-colonnes ol { padding-left: 1.4rem; margin-bottom: 0; }

/* --- Carte (contenu de colonne) --- */
.content-card h3,
.content-card p { overflow-wrap: anywhere; }

/* --- Tableau --- */
.pb-tableau .content-table-wrap {
  border-radius: 20px;
  -webkit-overflow-scrolling: touch;
}

.pb-tableau .content-table { min-width: 34rem; }
.pb-tableau .content-table th,
.pb-tableau .content-table td { vertical-align: top; overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
  .pb-tableau .content-table th,
  .pb-tableau .content-table td { padding: 10px 14px; font-size: .95rem; }
}

/* --- Texte + image, À propos : gabarit adaptatif à la largeur disponible
   (le bloc peut être posé dans une demi-colonne) --- */
.pb-texte-image { container-type: inline-size; }

.pb-texte-image .about-grid { gap: 2.5rem 3rem; }
.pb-texte-image .about-media { flex: 0 1 42%; margin: 0; }
.pb-texte-image .about-media img { height: auto; aspect-ratio: 503 / 470; }
.pb-texte-image .about-intro { max-width: none; }

@container (max-width: 640px) {
  .pb-texte-image .about-grid { flex-direction: column; align-items: stretch; }
  .pb-texte-image .about-media { flex: none; width: 100%; max-width: 503px; }
  .pb-texte-image .about-title { font-size: 2rem; }
}

.pb-bloc .about-title { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem); }

.about-media > .pb-image-vide { position: relative; z-index: 1; min-height: 14rem; }

/* --- Hero --- */
.pb-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--afsep-purple);
  color: #fff;
  text-align: center;
}

.pb-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.pb-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pb-hero-media .pb-image-vide {
  position: absolute;
  inset: auto 1rem 1rem auto;
  min-height: 0;
  border-color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* Voile violet : lisibilité du texte blanc sur n'importe quelle photo */
.pb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(74, 21, 93, .78);
  pointer-events: none;
}

.pb-hero-contenu {
  position: relative;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.pb-hero-titre {
  margin: 0 auto;
  max-width: 44rem;
  color: #fff;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.2rem);
  font-weight: 800;
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.pb-hero-texte {
  margin: 1.25rem auto 0;
  max-width: 40rem;
  font-size: 1.15rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.pb-hero-bouton { margin-top: 1.75rem; }

/* --- Appel à l'action --- */
.pb-cta-boite {
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  border-radius: 20px;
}

.pb-cta--violet .pb-cta-boite { background-color: var(--afsep-purple); color: #fff; }
.pb-cta--jaune .pb-cta-boite { background-color: var(--afsep-yellow); color: var(--afsep-purple); }
.pb-cta--vert .pb-cta-boite { background-color: var(--afsep-green); color: var(--afsep-purple); }

.pb-cta-titre {
  margin: 0;
  color: inherit;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.pb-cta-texte {
  margin: .9rem 0 0;
  max-width: 46rem;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.pb-cta-bouton { margin-top: 1.5rem; }

/* --- Galerie --- */
.gallery-item {
  min-width: 0;
  padding: 0;
}

.gallery-item img { transition: transform .5s ease; }

/* Bloc posé dans une colonne : pas de double gouttière ni de double marge */
.pb-section .pb-galerie,
.pb-section .pb-cta,
.pb-section .pb-hero { padding-top: 0 !important; padding-bottom: 0 !important; }

.container .pb-galerie > .container,
.container .pb-cta > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.lightbox:focus { outline: 0; }
.lightbox-caption:empty { display: none; }
.lightbox-caption { max-width: 60ch; margin-inline: auto; }

.lightbox-nav:focus-visible,
.lightbox-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.lightbox-counter { color: #fff; }

/* --- Sections en colonnes : empilement mobile et gouttières --- */
.pb-section .row { row-gap: 1.5rem; }
.pb-section .row > [class*="col"] { min-width: 0; }

@media (max-width: 767.98px) {
  .pb-section { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .pb-section + .pb-section { padding-top: 0 !important; }
  /* Espacement réglé sur la section : il garde sa valeur sur mobile. */
  .pb-section.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
  .pb-section.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* Section de projet posée dans une colonne : une seule gouttière, moins d'air */
.pb-section .row .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.pb-section .row section {
  margin-top: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pb-clubs .clubs-title:empty { margin: 0; }
/* Titre vidé : le texte se rapproche (équivalent de l'ancien `mt-2`). */
.pb-clubs--sans-titre .clubs-lead { margin-top: .5rem; }


.cj-midis .events-lead { overflow-wrap: anywhere; }
.pb-journees .events-row { margin-top: 3rem; }   /* ancien `mt-5` du gabarit */


.pb-offres .jobs-title { overflow-wrap: anywhere; }
.pb-offres .jobs-lead { overflow-wrap: anywhere; }
.pb-offres .jobs-row { margin-top: 3rem; }   /* ancien `mt-5` du gabarit */
.pb-offres-tout { margin-top: 3rem; text-align: center; }   /* ancien `mt-5` */
.pb-offres .jobs-watermark { pointer-events: none; }

/* Fonds colorés des offres (classes jobs--<nom>) */
.jobs--vert { background-color: var(--afsep-green); }
.jobs--jaune { background-color: var(--afsep-yellow); }
.jobs--pastel { background-color: var(--afsep-bg); }


.cj-speaker { overflow-wrap: anywhere; }

.club-card .club-name,
.club-card .club-event,
.job-title { overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
  .events-row,
  .clubs-row,
  .jobs-row,
  .cj-midis-row,

  .events,
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item img,
  .lightbox,
  .lightbox-nav,
  .lightbox-close,
  .cj-activity-link .bi { transition: none; }
  .lightbox-img.zoom-in,
  .lightbox-img.slide-right,
  .lightbox-img.slide-left { animation: none; opacity: 1; }
}

/* ===== Blocs éditoriaux : finitions du rendu public (lot 14) =====
   Tout est cadré par .pb-* : les gabarits du canvas de l'éditeur gardent
   les styles de base ci-dessus. */

:root { --pb-vert-texte: var(--afsep-green); }   /* couleur de la maquette ; contraste à réinterroger plus tard */

/* Rythme vertical commun : 2.5rem de part et d'autre de chaque bloc,
   le premier titre de groupe colle au haut du bloc. */
.pb-faq,
.pb-organigramme,
.pb-laureats {
  padding: 1.25rem 0;
}

.pb-faq .content-kicker,
.pb-organigramme .content-kicker,
.pb-laureats .content-kicker {
  margin: 1.25rem 0 1.5rem;
}

.pb-faq .faq-list + .content-kicker,
.pb-organigramme .board-grid + .content-kicker {
  margin-top: 2.75rem;
}

/* --- Carrousel d'actualités --- */

.pb-bandeau-actualites .carousel-item {
  background-color: var(--afsep-purple);   /* diapo sans image */
}

.pb-bandeau-actualites .carousel-item img {
  position: absolute;
  inset: 0;
}

/* La légende couvre toute la diapo : les flèches doivent rester au-dessus
   d'elle pour recevoir le clic. */
.pb-bandeau-actualites .carousel-control-prev,
.pb-bandeau-actualites .carousel-control-next { z-index: 4; }

.pb-bandeau-actualites .hero-caption {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 174px;
}

.pb-bandeau-actualites .hero-caption h2 {
  font-size: clamp(1.7rem, 1rem + 3.4vw, 3.7rem);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.pb-bandeau-actualites .hero-caption--long h2 { font-size: clamp(1.4rem, .9rem + 2.2vw, 2.5rem); }
.pb-bandeau-actualites .hero-caption--xlong h2 { font-size: clamp(1.25rem, .8rem + 1.7vw, 2rem); }

.pb-bandeau-actualites .hero-caption p {
  margin: 1.25rem 0 0;
  max-width: 36rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.pb-bandeau-actualites .hero-caption p:empty { display: none; }

.pb-bandeau-actualites .hero-caption h2:empty { display: none; }

.pb-bandeau-actualites .btn-hero {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1.5rem;
}

.pb-bandeau-actualites .btn-hero:focus-visible,
.pb-bandeau-actualites .carousel-control-prev:focus-visible,
.pb-bandeau-actualites .carousel-control-next:focus-visible,
.pb-bandeau-actualites .hero-pause:focus-visible,
.pb-bandeau-actualites .carousel-indicators [data-bs-target]:focus-visible {
  outline: 3px solid var(--afsep-purple);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #fff;
}

/* Sur l'image violette, le focus des flèches et du bouton est blanc. */
.pb-bandeau-actualites .btn-hero:focus-visible,
.pb-bandeau-actualites .carousel-control-prev:focus-visible,
.pb-bandeau-actualites .carousel-control-next:focus-visible {
  outline-color: #fff;
  box-shadow: none;
}

.pb-bandeau-actualites .carousel-control-prev,
.pb-bandeau-actualites .carousel-control-next {
  min-width: 44px;
  justify-content: center;
}

/* Points : blancs de la maquette, posés sur la bande verte. */
.pb-bandeau-actualites .carousel-indicators {
  bottom: -59px;
}

.hero-pause {
  position: absolute;
  left: 0;
  bottom: -59px;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  border-radius: 50%;
}

.hero-pause:hover { background-color: rgba(255, 255, 255, .25); }

@media (max-width: 1199.98px) {
  .pb-bandeau-actualites .hero-caption { padding-left: 5rem; padding-right: 5rem; }
}

@media (max-width: 991.98px) {
  .pb-bandeau-actualites .hero-carousel .carousel-item { height: 480px; }
  .pb-bandeau-actualites .hero-outer { padding-bottom: 4.25rem; }
  .pb-bandeau-actualites .hero-caption { padding-left: 4.25rem; padding-right: 4.25rem; }
}

@media (max-width: 767.98px) {
  .pb-bandeau-actualites .hero-caption { padding: 2rem 3.25rem; }
  .pb-bandeau-actualites .hero-caption p { font-size: .95rem; margin-top: 1rem; }
}

@media (max-width: 575.98px) {
  .pb-bandeau-actualites .hero-carousel .carousel-item { height: 480px; }
  .pb-bandeau-actualites .hero-caption h2 { -webkit-line-clamp: 7; }
  .pb-bandeau-actualites .hero-caption p { -webkit-line-clamp: 6; }
  .pb-bandeau-actualites .hero-caption { padding-left: 3.25rem; padding-right: 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-bandeau-actualites .carousel-item { transition: none; }
}

/* --- FAQ --- */

.pb-faq .faq-item {
  margin-bottom: 12px;
  scroll-margin-top: 6rem;   /* ancre #q-… : l'en-tête ne masque pas la question */
  transition: box-shadow .2s;
}

.pb-faq .faq-item:target {
  box-shadow: 0 0 0 3px var(--afsep-green);
}

.pb-faq .faq-item summary {
  min-height: 56px;
  padding: 14px 20px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.pb-faq .faq-item summary::after {
  flex-shrink: 0;
  font-size: 1.1rem;
}

.pb-faq .faq-item summary:hover { background-color: #f9f6fa; }
.pb-faq .faq-item[open] summary:hover { background-color: #f4eff6; }

.pb-faq .faq-item summary:focus-visible {
  outline: 3px solid var(--afsep-purple);
  outline-offset: -3px;   /* .faq-item coupe (overflow hidden) : focus vers l'intérieur */
}

.pb-faq .faq-item[open] summary {
  border-bottom: 1px solid var(--afsep-green);
}

.pb-faq .faq-reponse {
  padding: 18px 20px 20px;
  max-width: 62rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.pb-faq .faq-reponse > :last-child { margin-bottom: 0; }
.pb-faq .faq-reponse ul,
.pb-faq .faq-reponse ol { padding-left: 1.4rem; }
.pb-faq .faq-reponse li + li { margin-top: .35rem; }

.pb-faq .faq-reponse a {
  color: var(--afsep-purple);
  font-weight: 700;
  text-underline-offset: 3px;
}

.pb-faq .faq-reponse a:hover { color: #000; }

/* --- Organigramme : grille avec sous-grille, nom / établissement /
   filet / fonction tombent aux mêmes hauteurs sur toute une rangée --- */

.pb-organigramme .board-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 28px;
}

.pb-organigramme .board-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-height: 0;
  padding: 26px 16px 14px;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.pb-organigramme .board-name { align-self: start; }

.pb-organigramme .board-org {
  min-height: 0;
  margin-top: 10px;
}

.pb-organigramme .board-rule {
  width: 100%;
  margin: 18px 0 16px;
}

.pb-organigramme .board-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.pb-organigramme .board-role { margin: 0; }

.pb-organigramme .board-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
}

.pb-organigramme .board-link:hover { background-color: #f4eff6; }

.pb-organigramme .board-link:focus-visible {
  outline: 3px solid var(--afsep-purple);
  outline-offset: 1px;
}

@media (max-width: 991.98px) {
  .pb-organigramme .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .pb-organigramme .board-grid { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .pb-organigramme .board-card { padding: 20px 16px 10px; }
}

/* --- Frise des lauréats --- */

.pb-laureats.prize-section { padding: 1.25rem 0; }
.pb-laureats .prize-subkicker { margin: 1.25rem 0 1.5rem; }
.pb-laureats .laureates { margin-top: 0; padding: 4px 8px 8px; }

.pb-laureats .lau-track {
  max-width: calc(var(--n, 6) * 240px);   /* 1 à 3 lauréats : pas de pastilles perdues */
}

/* Rail et pastilles : décalés du padding du conteneur */
.pb-laureats .lau-item { overflow-wrap: anywhere; }

.pb-laureats .lau-year { color: var(--pb-vert-texte); font-size: .95rem; }
.pb-laureats .lau-badge {
  padding: 3px 10px;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* Plus de 8 lauréats : la frise défile horizontalement sur grand écran */
@media (min-width: 992px) {
  .pb-laureats .laureates--defile {
    overflow-x: auto;
    scrollbar-color: var(--afsep-green) transparent;
    padding-bottom: 16px;
  }

  .pb-laureats .laureates--defile .lau-track {
    grid-auto-columns: minmax(150px, 1fr);
    max-width: none;
    min-width: calc(var(--n) * 150px);
  }

  .pb-laureats .laureates--defile:focus-visible {
    outline: 3px solid var(--afsep-purple);
    outline-offset: 2px;
    border-radius: 8px;
  }
}

/* En colonne : le texte ne déborde pas, cibles lisibles */
@media (max-width: 991.98px) {
  .pb-laureats .lau-track { max-width: none; }
  .pb-laureats .lau-item { min-height: 26px; }
}

/* Bloc posé dans un conteneur parent (page de sections) : pas de double gouttière */
.container .pb-faq > .container,
.container .pb-organigramme > .container,
.container .pb-laureats > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ===== Blocs du design : composants des maquettes (intégration) ===== */
/* =========================================================
   Blocs issus des composants des maquettes (passe « intégration du design »).
   Fichier à fusionner à la fin de style.css : tout est scopé sous des classes
   `.pb-d-…`, aucune règle globale. Les composants existants (`.resources`,
   `.prize-*`, `.cj-quote`, `.club-facts`, `.club-contact`, `.doc-card`)
   gardent leurs règles de style.css ; on n'ajoute ici que les états limites
   (champ vide, 1 ou 6 éléments, texte long), l'adaptation à un bloc de page
   libre (sans le décor d'une maquette entière) et les contrastes AA.
   ========================================================= */

/* ---------- Commun ---------- */

.pb-d-bloc {
  padding: 2.5rem 0;
}

.pb-d-bloc .container > :last-child {
  margin-bottom: 0;
}

/* ---------- Bandeau « ressources » ---------- */

.pb-d-ressources .res-box h2,
.pb-d-ressources .res-box p {
  overflow-wrap: anywhere;
}

.pb-d-ressources .res-box .btn-afsep-white {
  min-height: 44px;
}

/* ---------- En-tête de page avec cartes d'accès rapide ---------- */

/* Le titre de la page est déjà affiché au-dessus : moins d'air en haut. */
.pb-d-entete {
  padding-top: 2rem;
}

.pb-d-entete .pb-d-entete-texte > :first-child {
  margin-top: 0;
}

.pb-d-entete .prize-title,
.pb-d-entete .prize-lead,
.pb-d-entete .prize-jump-card h3 {
  overflow-wrap: anywhere;
}

.pb-d-entete .prize-lead > :last-child,
.pb-d-entete .prize-jump-texte > :last-child {
  margin-bottom: 0;
}

.pb-d-entete--sans-decor .prize-hero-grid {
  grid-template-columns: minmax(0, 1fr);
}

.pb-d-entete .container > .prize-jump:first-child {
  margin-top: 0;
}

/* Une à trois cartes sur une rangée ; au-delà, elles passent à la ligne. */
.pb-d-acces {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.pb-d-acces--1 {
  max-width: 560px;
}

/* Titre de carte : un <h3> sous le grand titre (la maquette met un <h2>). */
.pb-d-acces .prize-jump-card h3 {
  margin: 0;
  color: var(--afsep-purple);
  font-size: 1.2rem;
  font-weight: 800;
}

.pb-d-acces .prize-jump-card > div {
  flex: 1 1 auto;
  min-width: 0;
}

.pb-d-acces .prize-jump-texte {
  margin: 4px 0 0;
  color: var(--afsep-text);
  font-size: .95rem;
  line-height: 1.5;
}

.pb-d-acces a.prize-jump-card:focus-visible {
  outline: 3px solid var(--afsep-purple);
  outline-offset: 3px;
}

/* Carte sans lien : pas de relief au survol. */
.pb-d-acces .prize-jump-card--statique,
.pb-d-acces .prize-jump-card--statique:hover {
  transform: none;
  box-shadow: 0 6px 24px rgba(74, 21, 93, .08);
}

/* ---------- Dotation ---------- */

.pb-d-dotation .prize-award {
  margin-top: 0;
}

.prize-award--seul {
  grid-template-columns: minmax(0, 1fr);
}

.pb-d-dotation .prize-amount-num,
.pb-d-dotation .prize-perks li > div {
  overflow-wrap: anywhere;
}

.pb-d-dotation .prize-perks li > div > p {
  margin: 0 0 .4rem;
}

.pb-d-dotation .prize-perks li > div > :last-child {
  margin-bottom: 0;
}

/* Un avantage tient au moins sur la hauteur de sa pastille (coche seule). */
.pb-d-dotation .prize-perks li {
  min-height: 34px;
}

/* ---------- Étapes ---------- */

.pb-d-etapes .prize-subkicker {
  margin-top: 0;
}

.pb-d-etapes ol.prize-steps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pb-d-etapes .container > .prize-steps:first-child {
  margin-top: 0;
}

.pb-d-etapes--c1 ol.prize-steps { grid-template-columns: minmax(0, 520px); }
.pb-d-etapes--c2 ol.prize-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-d-etapes--c3 ol.prize-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pb-d-etapes .prize-step h3,
.pb-d-etapes .prize-step-texte {
  overflow-wrap: anywhere;
}

.pb-d-etapes .prize-step-texte {
  font-size: .95rem;
  line-height: 1.6;
}

.pb-d-etapes .prize-step-texte p {
  margin: 0 0 .5rem;
}

.pb-d-etapes .prize-step-texte > :last-child {
  margin-bottom: 0;
}

@media (max-width: 1199.98px) {
  .pb-d-etapes--c4 ol.prize-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .pb-d-etapes--c2 ol.prize-steps,
  .pb-d-etapes--c3 ol.prize-steps,
  .pb-d-etapes--c4 ol.prize-steps,
  .pb-d-etapes--c5 ol.prize-steps,
  .pb-d-etapes--c6 ol.prize-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ---------- Échéance ---------- */

.pb-d-echeance .prize-deadline {
  margin-top: 0;
}

.pb-d-echeance .prize-deadline-label,
.pb-d-echeance .prize-deadline-date,
.pb-d-echeance .prize-deadline-contact {
  overflow-wrap: anywhere;
}

.pb-d-echeance .prize-deadline-contact > :last-child {
  margin-bottom: 0;
}

.pb-d-echeance .prize-deadline-contact p {
  margin: 0 0 .4rem;
}

/* ---------- Citation ---------- */

.pb-d-citation .cj-quote {
  max-width: 760px;
}

.pb-d-citation .cj-quote blockquote {
  padding-right: 2.5rem;
  overflow-wrap: anywhere;
}

.pb-d-citation .cj-quote blockquote > p {
  margin: 0 0 .75rem;
}

.pb-d-citation .cj-quote blockquote > :last-child {
  margin-bottom: 0;
}

/* Le vert clair de la maquette n'a pas le contraste AA sur le blanc. */
.pb-d-citation .cj-quote figcaption {
  color: var(--afsep-green);
}

@media (max-width: 767.98px) {
  .pb-d-citation .cj-quote blockquote {
    padding-right: 0;
  }
}

/* ---------- Documents ---------- */

.pb-d-documents {
  overflow-x: clip;   /* la gouttière du .row déborde de 2 px ; l'ombre des cartes reste visible */
  overflow-y: visible;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.pb-d-documents .doc-title,
.pb-d-documents .doc-file span,
.pb-d-documents .event-group {
  overflow-wrap: anywhere;
}

.pb-d-documents .doc-rule + .doc-meta {
  padding-left: 0;
}

.pb-d-documents .doc-file + .doc-meta {
  padding-left: 25px;
}

.pb-d-documents .doc-card--sans-bouton .doc-meta {
  margin-bottom: 0;
}

.pb-d-documents .doc-meta > p {
  margin: 0;
}

.pb-d-documents .doc-card .btn-afsep-purple {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ---------- Coordonnées ---------- */

.pb-d-coordonnees .club-facts {
  margin: 0;
}

.pb-d-coordonnees .club-fact {
  line-height: 1.3;
  color: var(--afsep-green);
}

.pb-d-coordonnees .club-hero-rule {
  margin: 28px 0 0;
}

.pb-d-coordonnees .club-contact {
  margin-top: 28px;
}

.pb-d-coordonnees .container > .club-contact:first-child {
  margin-top: 0;
}

.pb-d-coordonnees .club-contact-value {
  overflow-wrap: anywhere;
}

.pb-d-coordonnees .club-contact-value > p {
  margin: 0;
}

.pb-d-coordonnees .club-contact-value a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration-color: var(--afsep-green);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.pb-d-coordonnees .club-contact-value a:hover,
.pb-d-coordonnees .club-contact-value a:focus-visible {
  text-decoration-color: var(--afsep-purple);
}

.pb-d-coordonnees .club-contact-value a:focus-visible {
  outline: 3px solid var(--afsep-purple);
  outline-offset: 2px;
}

/* Montant saisi en toutes lettres (« Une bourse de… ») : moins grand qu'un chiffre. */
.pb-d-dotation .pb-d-montant-texte {
  font-size: 1.9rem;
  line-height: 1.2;
}

/* ===== Médiathèque : compléments du sous-plan 10 =====
   Médiathèque, fiche d'un document, favoris, documents en contexte.
   Composants repris tels quels : .doc-card, .event-badge, .event-download,
   .offer-card, .offer-actions, .content-card, .espace-vide, .section-kicker.
   Seuls les ajustements propres à ces pages sont ici. */

/* Carte de document : l'étoile se pose dans l'angle, sans changer la mesure
   de la carte (un visiteur et un adhérent voient la même carte). */
.mt-card { position: relative; }

.mt-card:has(> .mt-fav) .event-badge,
.mt-card:has(> .mt-fav-form) .event-badge { max-width: calc(100% - 52px); }

.mt-card .event-group { line-height: 1.3; }

.mt-card .doc-title { overflow-wrap: anywhere; }

.mt-card .doc-file span { min-width: 0; overflow-wrap: anywhere; }

.mt-card .doc-title a {
  color: inherit;
  text-decoration: none;
}

.mt-card .doc-title a:hover,
.mt-card .doc-title a:focus-visible {
  color: var(--afsep-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mt-card .doc-title a:focus-visible,
.mt-card .btn:focus-visible {
  outline: 3px solid var(--afsep-purple);
  outline-offset: 2px;
}

/* Étoile de favori : cible de 44 px, pleine quand le document est favori */
.mt-fav {
  position: absolute;
  top: 8px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--afsep-purple);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s;
}

.mt-fav:hover,
.mt-fav[aria-pressed="true"] { background-color: var(--afsep-pink); }

.mt-fav:focus-visible {
  outline: 3px solid var(--afsep-purple);
  outline-offset: 2px;
}

.mt-fav-form { display: contents; }

/* Grille sous un intertitre ou un chapô */
.mt-grid { margin-top: 16px; }

.content-kicker + .mt-grid { margin-top: -20px; }

.mt-page { overflow-x: clip; }

.mt-fav-link { margin: 28px 0 0; }

.mt-fav-link .offer-back { color: var(--afsep-purple); font-weight: 700; }

/* --- Recherche et filtres --- */

.mt-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px 20px;
  padding: 24px 28px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(74, 21, 93, .08);
}

.mt-field-wide,
.mt-filters-actions { grid-column: 1 / -1; }

.mt-filters label {
  display: block;
  margin: 0 0 6px;
  color: var(--afsep-purple);
  font-size: .92rem;
  font-weight: 700;
}

.mt-filters .form-control,
.mt-filters .form-select {
  min-height: 46px;
  border: 2px solid #E5DCE8;
  border-radius: 10px;
  color: #333;
}

.mt-filters .form-control:focus,
.mt-filters .form-select:focus {
  border-color: var(--afsep-purple);
  box-shadow: 0 0 0 .2rem rgba(74, 21, 93, .2);
}

.mt-search { position: relative; }

.mt-search .bi {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #696984;
  pointer-events: none;
}

.mt-search .form-control { padding-left: 42px; }

.mt-filters-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mt-filters-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
}

.mt-count {
  margin: 28px 0 0;
  color: var(--afsep-purple);
  font-weight: 700;
}

/* --- Pagination --- */

.mt-pages { margin-top: 48px; }

.mt-pages ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt-pages a,
.mt-pages .is-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 2px solid #E5DCE8;
  border-radius: 10px;
  background-color: #fff;
  color: var(--afsep-purple);
  font-weight: 700;
  text-decoration: none;
}

.mt-pages a:hover { border-color: var(--afsep-purple); }

.mt-pages a:focus-visible {
  outline: 3px solid var(--afsep-purple);
  outline-offset: 2px;
}

.mt-pages a[aria-current="page"] {
  border-color: var(--afsep-purple);
  background-color: var(--afsep-purple);
  color: #fff;
}

.mt-pages .is-disabled {
  border-color: transparent;
  background-color: transparent;
  color: #8C8296;
}

/* --- Encart « vide » : titre en h2 (le composant porte un h3) --- */

.mt-vide-titre {
  margin: 18px 0 10px;
  color: var(--afsep-purple);
  font-size: 1.25rem;
  font-weight: 800;
}

.mt-page .mt-vide { margin-top: 44px; }

/* --- Fiche d'un document --- */

.mt-fiche-badge {
  margin: 8px 0 18px;
  text-align: center;
}

.mt-fiche .offer-title { overflow-wrap: anywhere; }

.mt-fiche .offer-actions { flex-wrap: wrap; justify-content: center; }

.mt-fiche .offer-actions .btn { min-height: 44px; }

.mt-fav-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .45rem 1.4rem;
  font-size: .95rem;
}

.mt-fav-text[aria-pressed="true"] {
  background-color: var(--afsep-pink);
}

.mt-rattach a { color: var(--afsep-purple); font-weight: 700; text-decoration: underline; }

.mt-rattach { max-width: none; font-size: 1.05rem; }

/* Zone d'aperçu : cadre 16/10 à fond neutre */
.mt-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 25px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid #E0D8E4;
  border-radius: 10px;
  background-color: #F2F2F2;
}

.mt-preview iframe,
.mt-preview img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.mt-preview img { object-fit: contain; }

.mt-preview--none {
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  overflow: visible;
  color: #1E1E1E;
  text-align: center;
}

.mt-preview--none .bi { color: var(--afsep-green); font-size: 4rem; line-height: 1; }

.mt-preview--none p { margin: 0; overflow-wrap: anywhere; }

.mt-preview-name { font-weight: 700; }

/* --- Documents en contexte (journée, offre) --- */

.mt-docs-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt-side-docs .mt-docs-list { margin-top: 18px; }

.offer-card .mt-docs-list { margin-top: 25px; }

.mt-docs-list .event-download-label {
  white-space: normal;
  overflow-wrap: anywhere;
}

.mt-docs-list .event-download > span:last-child { min-width: 0; }

.mt-docs-list .event-download { min-height: 44px; }

@media (max-width: 575.98px) {
  .mt-fav { right: 6px; }
  .mt-filters { padding: 20px 16px; }
  .mt-pages-label { display: none; }
  .mt-fiche .offer-actions .btn { width: 100%; }
}

/* Fiche d'un document : libellés de la ligne d'informations. */
.mt-meta-label {
  color: var(--afsep-purple);
  font-weight: 700;
}

/* Focus clavier visible sur les boutons de l'en-tête (Mon profil, Se déconnecter, Adhérer). */
.header-actions .btn:focus-visible {
  outline: 3px solid var(--afsep-purple);
  outline-offset: 2px;
}

/* ==========================================================================
   Personnes morales : compléments du sous-plan 06 (site public et espace adhérent)
   ========================================================================== */

/* ---- Dépôt d'une adhésion de personne morale ---- */
/* =========================================================
   Lot 06 (personnes morales), étape E1 : formulaire d'adhésion
   (adhesion.html, adhesion-confirmation.html).
   Composants repris tels quels : .adh-section, .adh-tarifs, .adh-tarif,
   .adh-pills, .adh-alerte, .adh-recap, .adh-next, .login-*.
   Seuls les ajouts propres à la personne morale sont ici, préfixés
   .adh-morale-. Aucune couleur nouvelle hors erreurs de saisie.
   ========================================================= */

/* Case « Organisation hors France » : cible de 44 px */
.adh-morale-hors {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 6px 0 0;
  padding-left: 0;
}

.adh-morale-hors .form-check-input { margin: 0; flex-shrink: 0; }

.adh-morale-hors .form-check-label { font-weight: 600; }

/* Nombre de sièges : champ étroit */
.adh-morale-sieges .form-control { max-width: 160px; }

/* Total calculé, annoncé par aria-live */
.adh-morale-total {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-left: 4px solid var(--afsep-purple);
  border-radius: 10px;
  background-color: #F8F3FA;
  color: var(--afsep-purple);
  font-size: 1.1rem;
  font-weight: 800;
}

/* Message d'erreur d'un champ ou d'un groupe de champs */
.adh-morale-msg {
  display: flex;
  gap: 8px;
  margin: 6px 0 0;
  color: #B02A37;
  font-size: .9rem;
  font-weight: 700;
}

.adh-morale-msg[hidden] { display: none; }

.adh-morale-msg a { color: #B02A37; text-decoration: underline; }

/* Résumé des erreurs, en tête du formulaire */
.adh-morale-erreurs {
  margin: 0 0 24px;
  padding: 16px 18px;
  border-left: 4px solid #B02A37;
  border-radius: 10px;
  background-color: #FCEEEF;
  font-size: .95rem;
}

.adh-morale-erreurs[hidden] { display: none; }

.adh-morale-erreurs h2 {
  margin: 0 0 8px;
  color: #B02A37;
  font-size: 1.05rem;
  font-weight: 800;
}

.adh-morale-erreurs ul { margin: 0; padding-left: 1.2rem; }

.adh-morale-erreurs li { margin-bottom: 4px; }

.adh-morale-erreurs a {
  display: inline-block;
  padding: 4px 0;
  color: #B02A37;
  font-weight: 700;
}

/* Champ en erreur : le bandeau rouge de Bootstrap garde sa teinte */
.adh-morale-champ.is-invalid { border-color: #B02A37; }

/* Formule masquée par le filtre du type d'organisation */
.adh-tarif[hidden] { display: none; }

/* Confirmation : une valeur longue peut passer à la ligne */
.adh-recap dd { overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
  .adh-morale-sieges .form-control { max-width: 100%; }
}

/* ---- Mon organisation et inscription groupée ---- */
/* Lot 06, E1 : espace du référent d'une personne morale
   (espace-organisation.html, espace-organisation-inscription.html,
   carte « Mon organisation » de espace-adherents.html).
   Couleurs et espacements de style.css inchangés ; classes préfixées .org-. */

/* Statut de règlement dans le récapitulatif */
.org-statut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px;
  border-radius: 50rem;
  font-size: .92rem;
  font-weight: 700;
}
.org-statut--attente { background-color: var(--afsep-yellow-pale); color: var(--afsep-purple); border: 1px solid var(--afsep-yellow); }
.org-statut--validee { background-color: #EFF6E8; color: #3F6B22; }

/* Jauge de sièges */
.org-jauge-texte { margin: 0 0 10px; color: var(--afsep-purple); font-weight: 700; font-size: 1.1rem; }
.org-jauge {
  height: 14px;
  border-radius: 50rem;
  background-color: #F1EAF3;
  overflow: hidden;
}
.org-jauge > span {
  display: block;
  height: 100%;
  border-radius: 50rem;
  background-color: var(--afsep-purple);
}
.org-jauge--complet > span { background-color: #3F6B22; }
.org-jauge-note { margin: 10px 0 0; color: #6B6070; font-size: .92rem; }

/* Renouvellement : respiration entre le texte, le champ et l'encadré suivant. */
.org-renouvellement { margin-bottom: 20px; }
.org-renouvellement > div > p { margin-bottom: 14px; }
.org-renouvellement .adh-help { margin-top: 4px; }

/* Liste des bénéficiaires */
.org-table { min-width: 720px; }
.org-table td { vertical-align: middle; }
.org-table td:first-child { white-space: normal; }
/* Mobile : une ligne par personne, empilée, pour que « Retirer » reste visible. */
@media (max-width: 767.98px) {
  .org-table,
  .espace-page .org-table { min-width: 0; }
  .org-table thead { position: absolute; left: -9999px; }
  .org-table tr { display: block; padding: 10px 0; border-bottom: 1px solid #E4DDE8; }
  .org-table tbody tr:last-child { border-bottom: 0; }
  .org-table th, .org-table td { display: block; border: 0; padding: 3px 14px; }
  .org-table td[data-label]::before { content: attr(data-label) " : "; font-weight: 600; color: #6B6070; }
}
.org-nom { font-weight: 700; color: var(--afsep-purple); }
.org-mail { overflow-wrap: anywhere; }
.org-etat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: .95rem;
}
.org-etat--actif { color: #3F6B22; }
.org-etat--invite { color: #7A5A00; }
.org-etat--non { color: #6B6070; }
.org-etat--refus { color: #B3261E; }
.org-btn {
  min-height: 44px;
  min-width: 44px;
  padding: .45rem 1.1rem;
  white-space: nowrap;
}
.org-vide-texte { margin: 16px 0 0; color: #6B6070; }

/* Formulaire d'ajout */
.org-ajout .row > div { display: flex; flex-direction: column; }
.org-ajout .form-control { min-height: 44px; }
.org-ajout-bouton { margin-top: 20px; }
.org-erreur {
  display: flex;
  gap: 8px;
  margin: 8px 0 0;
  color: #B3261E;
  font-weight: 700;
  font-size: .92rem;
}
.org-ajout .form-control.org-invalide { border-color: #B3261E; }
.org-alerte-erreur {
  display: flex;
  gap: 10px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-left: 4px solid #B3261E;
  border-radius: 10px;
  background-color: #FCEDEC;
  color: #7A1D17;
  font-weight: 600;
}
.org-alerte-erreur p { margin: 0; }
.org-complet {
  margin: 0;
  padding: 16px 18px;
  border-radius: 10px;
  background-color: #F4EEF6;
  color: var(--afsep-purple);
  font-weight: 700;
}

/* Groupes de boutons d'une section */
.org-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.org-page .adh-payer .org-actions { flex: 0 0 auto; }
.org-page .adh-payer .btn { min-height: 44px; }

/* Modale de retrait */
.org-modale .modal-title { color: var(--afsep-purple); font-weight: 800; }
.org-modale .modal-footer { gap: 8px; }
.org-modale .btn { min-height: 44px; }

/* Inscription groupée : choix d'une journée */
.org-journees { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.org-journee {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 2px solid #E5DCE8;
  border-radius: 12px;
  background-color: #fff;
  cursor: pointer;
}
.org-journee:has(input:checked) { border-color: var(--afsep-purple); background-color: #F4EEF6; }
.org-journee:has(input:focus-visible) { box-shadow: 0 0 0 .2rem rgba(74, 21, 93, .2); }
.org-journee.is-disabled { cursor: default; opacity: .65; background-color: #FAF7FB; }
.org-journee input { flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin-top: 2px; accent-color: var(--afsep-purple); }
.org-pick { accent-color: var(--afsep-purple); }
.org-journee-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.org-journee-titre { color: var(--afsep-purple); font-weight: 800; }
.org-journee-date { font-weight: 700; }
.org-journee-meta { color: #6B6070; font-size: .92rem; }

/* Inscription groupée : choix des membres */
.org-membres { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.org-membre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 16px;
  border: 2px solid #E5DCE8;
  border-radius: 12px;
  background-color: #fff;
}
.org-membre-case {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 0;
  min-width: 0;
}
.org-membre-case input { flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin: 0; }
.org-membre-case:has(input:focus-visible) { outline: 3px solid rgba(74, 21, 93, .35); outline-offset: 4px; border-radius: 6px; }
.org-membre-id { display: flex; flex-direction: column; min-width: 0; }
.org-membre-etat { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-left: auto; }

/* Résultat */
.org-resultat { margin: 0 0 24px; font-size: 1.05rem; }
.org-bilan { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.org-bilan li { display: flex; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid #F1EAF3; }

@media (max-width: 575.98px) {
  .org-membre-etat { margin-left: 0; }
  .org-actions .btn { width: 100%; }
}

/* Lot 11 : bourses, espace adhérent (.bourse-*) */
/* =========================================================
   Lot 11 : Club Jeunes et bourses, espace adhérent
   (espace-bourse-formulaire.html, espace-bourses.html, carte « Club Jeunes »
   de espace-adherents.html). Feuille provisoire, à fusionner dans style.css.
   Variables, couleurs, rayons et espacements de style.css ; classes .bourse-. */

.bourse-page .login-card { margin-top: 24px; }
.bourse-page .login-card + .login-card { margin-top: 24px; }
.bourse-page .form-control,
.bourse-page .form-select { min-height: 44px; }
.bourse-page textarea.form-control { min-height: 160px; }
.bourse-page .btn { min-height: 44px; }

/* Choix de l'événement : bloc propre à chaque mode */
.bourse-groupe { margin-top: 20px; }
.bourse-groupe[hidden] { display: none; }

/* Champ en erreur : même teinte que le résumé */
.bourse-champ.is-invalid,
.bourse-champ.is-invalid:focus { border-color: #B02A37; }
.bourse-champ.is-invalid { background-image: none; padding-right: .75rem; }
.bourse-radios--erreur { border-left: 4px solid #B02A37; padding-left: 12px; }
.bourse-erreur-champ[hidden] { display: none; }

/* Alerte non bloquante sous le montant */
.bourse-alerte-montant { color: #7A5A00; font-weight: 700; }
.bourse-alerte-montant[hidden] { display: none; }

/* Pièces jointes */
.bourse-attendues { margin: 0 0 16px; padding-left: 1.2rem; color: #555; font-size: .95rem; }
.bourse-pieces { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.bourse-piece {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 14px;
  border: 2px solid #F1EAF3;
  border-radius: 12px;
  background-color: #fff;
}
.bourse-piece > i { color: var(--afsep-purple); font-size: 1.3rem; }
.bourse-piece-corps { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.bourse-piece-nom { color: var(--afsep-purple); font-weight: 700; overflow-wrap: anywhere; }
.bourse-piece-taille { color: #6B6070; font-size: .9rem; }
.bourse-piece-erreur { display: flex; gap: 6px; margin: 2px 0 0; color: #B02A37; font-weight: 700; font-size: .9rem; }
.bourse-piece--erreur { border-color: #B02A37; background-color: #FCEEEF; }
.bourse-piece .btn { white-space: nowrap; }
.bourse-pieces-vide { margin: 16px 0 0; color: #6B6070; }
.bourse-pieces-vide[hidden] { display: none; }

/* Règlement : encadré repliable */
.bourse-reglement {
  margin: 0 0 20px;
  padding: 0 18px;
  border-left: 4px solid var(--afsep-purple);
  border-radius: 10px;
  background-color: #F8F3FA;
}
.bourse-reglement > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
  color: var(--afsep-purple);
  font-weight: 800;
  cursor: pointer;
}
.bourse-reglement > summary:focus-visible { outline: 3px solid rgba(74, 21, 93, .35); outline-offset: 2px; }
.bourse-reglement ul { margin: 0; padding: 0 0 14px 1.2rem; font-size: .95rem; }
.bourse-reglement li { margin-bottom: 6px; }

.bourse-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }

/* Accès refusé : le jeune seul peut demander */
.bourse-refus { max-width: 640px; height: auto; }
.bourse-refus .login-subtitle { margin-bottom: 12px; font-size: 1.4rem; }
.bourse-refus .org-actions { margin-top: 20px; }

/* Liste des demandes */
.bourse-liste { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 24px; }
.bourse-demande {
  padding: 28px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 6px 24px rgba(74, 21, 93, .08);
}
.bourse-demande-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.bourse-demande-titre { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.bourse-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin: 18px 0 0; }
.bourse-meta dt { color: #6B6070; font-size: .88rem; font-weight: 600; }
.bourse-meta dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.bourse-demande .bourse-frise { margin-top: 24px; }
.bourse-demande-lien { margin-top: 20px; }
.bourse-demande-lien .btn { min-height: 44px; }

/* Statut : icône et texte, jamais la couleur seule */
.bourse-statut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px;
  border-radius: 50rem;
  font-size: .92rem;
  font-weight: 700;
  white-space: nowrap;
}
.bourse-statut--soumise { background-color: #F4EEF6; color: var(--afsep-purple); }
.bourse-statut--examinee { background-color: var(--afsep-yellow-pale); color: var(--afsep-purple); border: 1px solid var(--afsep-yellow); }
.bourse-statut--accordee { background-color: #EFF6E8; color: #3F6B22; }
.bourse-statut--refusee { background-color: #FCEDEC; color: #B3261E; }

/* Frise : Soumise, Examinée, Décision */
.bourse-frise { display: flex; list-style: none; margin: 0; padding: 0; }
.bourse-etape { position: relative; flex: 1 1 0; min-width: 0; text-align: center; }
.bourse-etape + .bourse-etape::before {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(-50% + 20px);
  right: calc(50% + 20px);
  height: 3px;
  background-color: #E5DCE8;
}
.bourse-etape + .bourse-etape--faite::before,
.bourse-etape + .bourse-etape--courante::before,
.bourse-etape + .bourse-etape--accordee::before,
.bourse-etape + .bourse-etape--refusee::before { background-color: var(--afsep-purple); }
.bourse-etape-pastille {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid #E5DCE8;
  border-radius: 50%;
  background-color: #fff;
  color: #6B6070;
  font-weight: 800;
}
.bourse-etape--faite .bourse-etape-pastille { border-color: var(--afsep-green); background-color: var(--afsep-green); color: var(--afsep-purple); }
.bourse-etape--courante .bourse-etape-pastille { border-color: var(--afsep-purple); background-color: var(--afsep-purple); color: #fff; }
.bourse-etape--accordee .bourse-etape-pastille { border-color: #3F6B22; background-color: #3F6B22; color: #fff; }
.bourse-etape--refusee .bourse-etape-pastille { border-color: #B3261E; background-color: #B3261E; color: #fff; }
.bourse-etape-libelle { display: block; margin-top: 6px; color: var(--afsep-purple); font-size: .92rem; font-weight: 700; line-height: 1.3; }
.bourse-etape-date { display: block; color: #6B6070; font-size: .82rem; }

/* Décision : message ou motif visible */
.bourse-decision {
  margin: 24px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--afsep-purple);
  border-radius: 10px;
  background-color: #F4EEF6;
}
.bourse-decision p { margin: 0; }
.bourse-decision-titre { display: flex; align-items: center; gap: 8px; margin-bottom: 4px !important; font-weight: 800; }
.bourse-decision--accordee { border-left-color: #3F6B22; background-color: #EFF6E8; }
.bourse-decision--accordee .bourse-decision-titre { color: #3F6B22; }
.bourse-decision--refusee { border-left-color: #B3261E; background-color: #FCEDEC; }
.bourse-decision--refusee .bourse-decision-titre { color: #B3261E; }

/* Vue d'une demande */
.bourse-detail .adh-recap dd { white-space: pre-line; }
.bourse-pieces--liens .bourse-piece a { color: var(--afsep-purple); font-weight: 700; }
.bourse-pieces--liens .bourse-piece-corps a { overflow-wrap: anywhere; }

/* Carte du tableau de bord : deux liens, pas de carte cliquable entière */
.bourse-carte-liens { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.bourse-carte-liens a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--afsep-purple);
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .bourse-meta { grid-template-columns: minmax(0, 1fr); }
  .bourse-demande { padding: 22px 18px; }
}
@media (max-width: 575.98px) {
  .bourse-actions .btn,
  .bourse-actions a { width: 100%; justify-content: center; }
  .bourse-piece .btn { width: 100%; }
  .bourse-etape-libelle { font-size: .85rem; }
}

/* Pièces jointes : une ligne par document (lot 11) */
.bourse-lignes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.bourse-ligne {
  padding: 14px 16px 16px;
  border: 2px solid #F1EAF3;
  border-radius: 12px;
  background-color: #fff;
}
.bourse-ligne--erreur { border-color: #B02A37; background-color: #FCEEEF; }
.bourse-ligne-titre { margin: 0 0 10px; color: var(--afsep-purple); font-weight: 800; }
.bourse-ligne-autre[hidden] { display: none; }
.bourse-ligne .bourse-erreur-champ { margin-top: 10px; }
.bourse-ligne-retirer { margin-top: 14px; min-height: 44px; }
.bourse-ligne-retirer[hidden],
.bourse-ligne-ajouter[hidden],
.bourse-lignes-compteur[hidden] { display: none; }
.bourse-ligne-ajouter { margin-top: 16px; min-height: 44px; }
.bourse-lignes-compteur { margin: 12px 0 0; color: #6B6070; font-size: .9rem; }
.bourse-piece-nature { color: var(--afsep-purple); font-weight: 700; overflow-wrap: anywhere; }
.bourse-piece-fichier { color: #555; font-size: .95rem; overflow-wrap: anywhere; }
.bourse-piece-ajout { margin-top: 20px; padding-top: 16px; border-top: 1px solid #F1EAF3; }
.bourse-piece-ajout .bourse-ligne { margin-top: 12px; }
.bourse-piece-retrait { margin: 0; }
@media (max-width: 575.98px) {
  .bourse-ligne-retirer,
  .bourse-ligne-ajouter { width: 100%; }
  .bourse-piece-retrait .btn { width: 100%; }
}