.fc-wrap { --gap: 18px; }
.fc-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.fc-wrap[data-columns="2"] .fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-wrap[data-columns="3"] .fc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fc-wrap[data-columns="4"] .fc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fc-wrap[data-columns="5"] .fc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fc-wrap[data-columns="6"] .fc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .fc-wrap[data-columns="4"] .fc-grid,
  .fc-wrap[data-columns="5"] .fc-grid,
  .fc-wrap[data-columns="6"] .fc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .fc-wrap .fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .fc-wrap .fc-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

.fc-card {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.fc-card-head {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}

.fc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fc-logo { width: 34px; height: 34px; object-fit: contain; }
.fc-list-title { font-weight: 700; line-height: 1.1; }

.fc-photo-wrap { aspect-ratio: 4 / 5; background: rgba(0,0,0,.03); }
.fc-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-photo--placeholder { display:flex; align-items:center; justify-content:center; }
.fc-photo--placeholder::after { content: "Photo"; opacity:.5; font-size: 14px; }

.fc-name { margin: 10px 12px 6px; font-size: 16px; }

.fc-toggle {
  margin: 0 12px 12px;
  padding: 10px 12px;
  width: calc(100% - 24px);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  cursor: pointer;
}
.fc-toggle:hover { background: rgba(0,0,0,.03); }

.fc-desc {
  padding: 0 12px 14px;
}
.fc-desc > *:first-child { margin-top: 0; }
.fc-desc > *:last-child { margin-bottom: 0; }

.fc-reserve-title { margin: 26px 0 12px; }

/* Bouton gris avec texte blanc */
.fc-toggle{
  background:#666 !important;
  color:#fff !important;
  border:1px solid #666 !important;
}
.fc-toggle:hover{ background:#555 !important; }

/* Numéro candidat */
.fc-number{
  font-weight:800;
  margin-right:8px;
}

/* Profession sous le nom */
.fc-profession{
  margin: 0 12px 8px;
  font-size: 14px;
  opacity: .85;
}

/* Panneau descriptif pleine largeur */
.fc-fullwidth{
  position:relative;
  left:50%;
  margin-left:-50vw;
  width:100vw;
  background: rgba(0,0,0,.03);
  border-top: 1px solid rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(0,0,0,.12);
  padding: 22px 18px;
  box-sizing: border-box;
}
.fc-fullwidth-inner{
  max-width: 1100px;
  margin: 0 auto;
}
.fc-fullwidth-title{
  margin: 0 0 10px 0;
  font-size: 18px;
}

/* Badge numéro candidat */
.fc-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  margin-right: 8px;
  font-weight: 800;
}

/* Modal présentation */
.fc-modal[hidden]{ display:none; }
.fc-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.fc-modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.fc-modal__dialog{
  position: relative;
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  background:#fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;
}
.fc-modal__content{
  padding: 18px 18px 20px;
  overflow: auto;
  max-height: calc(100vh - 32px);
  box-sizing: border-box;
}
.fc-modal__close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.fc-modal__close:hover{ background: rgba(0,0,0,.03); }
.fc-modal__title{
  font-size: 20px;
  font-weight: 800;
  margin: 0 48px 4px 0;
}
.fc-modal__sub{
  font-size: 14px;
  opacity: .85;
  margin: 0 0 14px 0;
}
.fc-modal__body > *:first-child{ margin-top: 0; }

/* === FIX modal centering & close button visibility === */
.fc-modal{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.fc-modal__dialog{
  margin:0;
  max-height:calc(100vh - 40px);
  display:flex;
  flex-direction:column;
}

.fc-modal__content{
  overflow:auto;
}

.fc-modal__close{
  position:absolute;
  top:8px;
  right:8px;
  z-index:5;
  background:#fff;
  border:1px solid rgba(0,0,0,.2);
  width:42px;
  height:42px;
  font-size:26px;
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.fc-modal__close:hover{
  background:#f2f2f2;
}

/* === Carte candidat fond gris === */
.fc-card{
  background:#f2f2f2 !important;
  border:1px solid rgba(0,0,0,.10);
}

/* garder entête légèrement plus clair pour contraste */
.fc-card-head{
  background:#fafafa;
}

/* === Style "campagne électorale moderne" (accent vert) === */
.fc-card{
  background:#f3f4f5 !important;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.fc-card-head{
  background: #ffffff;
}

.fc-list-title{
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* Photo plus "affiche" */
.fc-photo-wrap{
  background: #e9ecef;
}

/* Nom + profession */
.fc-name{
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .2px;
}
.fc-profession{
  font-size: 13.5px;
  opacity: .9;
}

/* Badge numéro coloré (vert) */
.fc-number{
  background: #1b8f3a !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(27,143,58,.28);
}

/* Bouton "Lire la présentation" (vert) */
.fc-toggle{
  background: #1b8f3a !important;
  border-color: #1b8f3a !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 8px 16px rgba(27,143,58,.22);
}
.fc-toggle:hover{
  background: #147130 !important;
  border-color: #147130 !important;
}

/* Modal campagne : bandeau vert + croix blanche */
.fc-modal__dialog{
  border-radius: 18px;
}
.fc-modal__content{
  padding-top: 0;
}
.fc-modal__content::before{
  content:"";
  display:block;
  height: 58px;
  background: #1b8f3a;
}
.fc-modal__title{
  margin-top: -44px;
  background: #fff;
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}
.fc-modal__sub{
  margin-top: 8px;
  padding-left: 2px;
}
.fc-modal__close{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.fc-modal__close:hover{
  background: rgba(255,255,255,.12) !important;
}

/* Légère mise en forme du texte dans la modal */
.fc-modal__body{
  padding-top: 6px;
}
.fc-modal__body a{
  color: #1b8f3a;
}

/* === Ajustement position croix fermeture popup === */
.fc-modal__close{
  right: 18px !important;   /* avant ~8px */
  top: 14px !important;     /* un peu plus bas pour équilibre visuel */
}

/* === Responsive grid: portrait = 1 colonne, paysage = 2 colonnes === */

/* Par défaut mobile (portrait ou petits écrans) : 1 colonne */
@media (max-width: 900px) {
  .fc-wrap .fc-grid { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}

/* Mobile en paysage : 2 colonnes */
@media (max-width: 900px) and (orientation: landscape) {
  .fc-wrap .fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Confort de lecture des titres sur mobile */
@media (max-width: 900px) {
  .fc-brand { gap: 8px; flex-wrap: wrap; }
  .fc-logo { width: 28px; height: 28px; }
  .fc-list-title { font-size: 13px; line-height: 1.15; }
  .fc-name { font-size: 16px; line-height: 1.2; }
  .fc-number { min-width: 26px; height: 26px; padding: 0 7px; }
}

/* === Mode carrousel (shortcode [ferney_candidats-caroussel]) === */
.fc-wrap--carousel .fc-grid{ display:none !important; }

.fc-carousel{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.fc-carousel__track{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 8px 2px 14px;
  width: 100%;
}
.fc-carousel__track::-webkit-scrollbar{ height: 10px; }
.fc-carousel__track::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 999px; }

.fc-wrap--carousel .fc-card{
  scroll-snap-align: center;
  flex: 0 0 86%;
  max-width: 86%;
}

/* Paysage mobile : 2 cartes visibles */
@media (max-width: 900px) and (orientation: landscape){
  .fc-wrap--carousel .fc-card{ flex-basis: 48%; max-width: 48%; }
}
/* Desktop : 2 cartes (confort) */
@media (min-width: 901px){
  .fc-wrap--carousel .fc-card{ flex-basis: 42%; max-width: 42%; }
}

.fc-carousel__btn{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.fc-carousel__btn:hover{ background: rgba(0,0,0,.03); }

/* === Carrousel adapté à une barre latérale (container queries) === */
.fc-wrap--carousel{
  container-type: inline-size;
  container-name: fcwrap;
}

.fc-carousel{
  position: relative;
  align-items: stretch;
}

/* Les flèches n'occupent pas de largeur (overlay), utile en sidebar étroite */
.fc-carousel__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
}
.fc-carousel__btn--prev{ left: 6px; }
.fc-carousel__btn--next{ right: 6px; }

/* Laisser de la place pour les flèches */
.fc-carousel__track{
  padding-left: 52px !important;
  padding-right: 52px !important;
}

/* Par défaut (sidebar étroite) : 1 carte visible */
.fc-wrap--carousel .fc-card{
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Si le conteneur est assez large (ex: contenu principal), on montre 2 cartes */
@container fcwrap (min-width: 620px){
  .fc-wrap--carousel .fc-card{
    flex-basis: 48% !important;
    max-width: 48% !important;
  }
}

/* Ajustements de lisibilité en sidebar */
@container fcwrap (max-width: 420px){
  .fc-brand{ flex-wrap: wrap; gap: 6px; }
  .fc-list-title{ font-size: 12px; }
  .fc-name{ font-size: 15px; }
  .fc-toggle{ font-size: 14px; }
}

/* === FIX: forcer 1 carte en sidebar (2 cartes seulement si conteneur très large) === */

/* Par défaut : 1 carte */
.fc-wrap--carousel .fc-card{
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Container queries : 2 cartes uniquement si le conteneur fait au moins 900px */
@container fcwrap (min-width: 900px){
  .fc-wrap--carousel .fc-card{
    flex-basis: 48% !important;
    max-width: 48% !important;
  }
}

/* Fallback si container queries non supportées : 2 cartes seulement sur grand écran ET si hors sidebar */
@supports not (container-type: inline-size){
  @media (min-width: 1100px){
    .fc-wrap--carousel .fc-card{
      flex-basis: 48% !important;
      max-width: 48% !important;
    }
  }
}

/* === Flèches carrousel style campagne (fond vert opaque + flèche blanche) === */
.fc-carousel__btn{
  background:#1b8f3a !important;
  border: none !important;
  color:#ffffff !important;
  box-shadow: 0 8px 18px rgba(27,143,58,.35) !important;
}

.fc-carousel__btn:hover{
  background:#147130 !important;
}

.fc-carousel__btn:active{
  transform: translateY(-50%) scale(.96);
}

/* === Flèches centrées et plus épaisses === */
.fc-carousel__btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:22px !important;   /* flèche plus épaisse/visible */
  font-weight:900 !important;
  line-height:1 !important;
}

.fc-carousel__btn::before{
  display:inline-block;
  transform: translateY(-1px); /* micro-ajustement optique */
}