/* ==========================================================================
   index-new.css — HOME (version stable et structurée)
   - main_block = conteneur visuel
   - content_block = contenu texte / galeries
   - week-ends totalement isolés
   ========================================================================== */

/* ------------------------------ */
/* 0) Variables + reset           */
/* ------------------------------ */
:root{
  --bg: #05032b;
  --text: #e7e7ee;

  --shadow-sm: 0 16px 34px rgba(0,0,0,.20);

  /* Week-end sizing */
  --we-h-cover: 110px;
  --we-h-row: 44px;
  --we-h-org: 58px;
  --we-card-minh: 400px;

  /* Week-end header */
  --we-header-bg: #eef6ff;
  --we-header-border: #c7def0;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color: inherit;
  text-decoration:none;
}

/* ------------------------------ */
/* 1) main_block (structure)      */
/* ------------------------------ */
.main_block{
  max-width: 85%;
  margin: 40px auto;
  padding: 30px 40px;

  background: linear-gradient(145deg, #020024, #020024);
  border-radius: 10px;
  box-shadow: 5px 4px 7px 1px rgb(82, 82, 82);

  color: var(--text);
}

.main_block > h2{
  text-align: center;
  font-size: 2.1rem;
  font-weight: 800;
  color: rgb(11, 163, 223);
  margin-bottom: 30px;
}

/* ------------------------------ */
/* Logo home                      */
/* ------------------------------ */
.first_block{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 18px 0 8px;
}

.first_block img{
  max-width: 60%;
  height: auto;
}

/* ------------------------------ */
/* 2) content_block (TEXTE)       */
/* ------------------------------ */
.content_block{
  text-align: justify;
  text-justify: inter-word;
}

.content_block > h1{
  text-align:center;
  font-size: 1.625rem; /* 26px */
  margin: 0 0 10px;
  color: #fff;
}

.content_block p,
.content_block li{
  color: var(--text);
}

.content_block a{
  color: rgb(11, 163, 223);
  text-decoration: underline;
}

.content_block a:hover{
  text-decoration: none;
}

/* ------------------------------ */
/* 3) Galeries images (contenu)   */
/* ------------------------------ */
.content_block > .div_img{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin: 20px 0;
  gap: 14px;
}

.content_block > .div_img > img{
  width: 30%;
  border-radius: 10px;

  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: rgba(255,255,255,.06);
}

/* ------------------------------ */
/* 4) Bureau (contacts)           */
/* ------------------------------ */
.content_block .bureau{
  width: 30%;
  text-align: center;
}

.content_block .bureau img{
  width: 100%;
  border-radius: 10px;

  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: rgba(255,255,255,.06);
}

/* ------------------------------ */
/* 5) Week-end list (grille)      */
/* ------------------------------ */
.weekend-list{
  display: grid;
  gap: 24px;
  width: 100%;
  margin: 0 auto;
  grid-template-columns: 1fr;
}

@media (min-width: 900px){
  .weekend-list{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (min-width: 1200px){
  .weekend-list{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}

/* ------------------------------ */
/* 6) Carte week-end              */
/* ------------------------------ */
.weekend-card.we-card{
  display: grid;
  grid-template-rows: var(--we-h-cover) 1fr;
  min-height: var(--we-card-minh);

  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
}

/* Cover */
.weekend-link{
  display:block;
  width:100%;
  height: var(--we-h-cover);
}

.we-cover{
  width:100%;
  height:100%;
  overflow:hidden;
}

.weekend-image{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* ------------------------------ */
/* 7) Contenu carte               */
/* ------------------------------ */
.weekend-content{
  display: grid;
  grid-template-rows:
    auto
    1fr
    auto
    auto;

  padding: 12px 16px;
  row-gap: 10px;
  min-width: 0;
}

/* Header */
.we-header{
  background: var(--we-header-bg);
  border: 1px solid var(--we-header-border);
  border-radius: 6px;
  padding: 10px 12px;
}

.weekend-title{
  margin: 0;
  font-weight: 900;
  color:#003a66;
  text-align: center;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
}

.weekend-title-link:hover{
  text-decoration: underline;
}

.we-meta{
  margin-top: 6px;
  font-size: .9rem;
  color:#0b5f90;
  font-weight: 650;
}

.weekend-info{
  margin: 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

/* Description */
.weekend-description{
  margin: 0;
  color: #333;
  font-size: 1rem;
  line-height: 1.45;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------ */
/* 8) Pastille + action           */
/* ------------------------------ */
.we-row{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin-top: 5px;
  min-height: 70px;
}

.pill{
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  font-size: .95em;
  font-weight: 900;
  text-align: center;
  line-height: 1;
}

.pill.ouvert{ background:#98f5c0; color:#1c3f2a; border:1px solid #265b3b; }
.pill.complet{ background:#ffb3be; color:#5a1320; border:1px solid #8a1c2d; }
.pill.attente{ background:#ffe3a3; color:#4a3b0b; border:1px solid #9b7a12; }
.pill.preinscription{ background:#bfe6ff; color:#073a57; border:1px solid #2a77a5; }

.we-action-inline{
  display:flex;
  align-items:center;
  width: 100%;
  justify-content: center;
}

/* Bouton */
.btn-inscription{
  height: 25px;
  padding: 0 12px;
  border-radius: 999px;
  background:#e6f3ff;
  border:1px solid #b7d9ea;
  color:#064a7a;
  font-weight:700;
  font-size:.78em;
  cursor:pointer;
}

.btn-inscription:hover{
  background:#d9edff;
}

/* ------------------------------ */
/* 9) Organisateur                */
/* ------------------------------ */
.we-organizer{
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid rgba(0,0,0,.12);
  padding-top:8px;
}

.we-organizer img{
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
}

.organizer-name{
  font-weight:800;
  color:#0b57a5;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===========================
   BLOC ACTUALITES — CSS COMPLET (UNIQUE)
   =========================== */

.news-block{ position: relative; }

#actualites.main_block.content_block{
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

#actualites > h2{
  margin: 0 0 6px;
  color: #0b8cd2;
}

.news-frame{
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;
  background: transparent;
  border: 0;
  border-radius: 0;
  min-width: 0;
  box-sizing: content-box;
}

.news-adminbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin: 6px 0 10px;
  flex-wrap:wrap;
}

.news-btn{
  appearance:none;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}
.news-btn.primary{ background: rgba(11,140,210,.95); color: #fff; }
.news-btn.ghost{ background: rgba(255,255,255,.12); color: rgba(231,231,238,.95); }
.news-btn.danger{ background: rgba(220,60,60,.95); color: #fff; }

.news-item{
  border: 1px solid var(--we-header-border);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 12px;
  background: #fff;
  margin-bottom: 10px;
}

.news-header{
  background: var(--we-header-bg);
  border-bottom: 1px solid var(--we-header-border);
  padding: 10px 12px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  flex-wrap: wrap;
  text-align:center;
}

.news-header h3{
  margin: 0;
  font-weight: 900;
  color: #003a66;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);

  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-header .news-meta{
  margin: 0;
  font-size: .85rem;
  color: #0b5f90;
  font-weight: 650;
  white-space: nowrap;

  position: relative;
  top: 2px;
}

.news-body{
  background: #fff;
  color: #020024;
  padding: 10px 12px 12px;

  font-size: .95rem;
  line-height: 1.45;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Actus "ouvrables" pour lecture confortable */
.news-item{ cursor: default; }
.news-header{ cursor: pointer; }

.news-item.is-open .news-body{
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* En mode compact : on cache les images pour gagner de la place */
.news-item:not(.is-open) .news-body img{
  display: none;
}

/* Petit hint visuel "cliquable" */
.news-header::after{
  content: "Cliquer pour lire";
  font-size: .75rem;
  font-weight: 700;
  opacity: .55;
  margin-left: 10px;
  white-space: nowrap;
}
.news-item.is-open .news-header::after{
  content: "Cliquer pour réduire";
}


.news-body,
.news-body p,
.news-body span,
.news-body li{
  color: #020024;
}

.news-body ul,
.news-body ol{
  margin: 6px 0 0 18px;
}

.news-body a{
  color: #0b5f90;
  text-decoration: underline;
}

.news-body img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin: 8px auto 0;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.news-actions{
  display:flex;
  gap:8px;
  margin-top: 10px;
  flex-wrap: wrap;
  padding: 0 12px 12px;
  background: #fff;
}

.news-actions .news-btn.ghost{
  background: rgba(11,140,210,.12);
  color: #003a66;
  border: 1px solid rgba(11,140,210,.35);
}
.news-actions .news-btn.ghost:hover{
  background: rgba(11,140,210,.20);
}

/* Modal éditeur */
.news-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.62);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}
.news-modal.is-open{ display:flex; }

.news-modal-card{
  width: min(860px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: #0b0836;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 22px 55px rgba(0,0,0,.45);
  color: rgba(231,231,238,.95);
}

.news-field{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(231,231,238,.95);
  padding: 10px 12px;
  font-weight: 700;
  margin: 8px 0 10px;
}

.news-toolbar{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}

.news-tool{
  background: rgba(255,255,255,.10);
  color: rgba(231,231,238,.95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 900;
}

.news-editor{
  min-height: 220px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  padding: 12px;
  outline: none;
}
.news-editor:focus{
  border-color: rgba(11,140,210,.75);
  box-shadow: 0 0 0 3px rgba(11,140,210,.18);
}

.news-modal-footer{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 12px;
  flex-wrap: wrap;
}


/* Indicateur visuel qu’il y a une suite */
.news-frame::after{
  content: "⬇ autres actualités";
  display: block;
  text-align: center;
  font-size: .75rem;
  font-weight: 700;
  opacity: .6;
  padding: 6px 0;
}


/* ===========================
   ACTUS — MODE GESTION
   =========================== */

.news-title-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 6px;
}

.news-title-row h2{
  grid-column: 2;
  margin: 0;
  text-align: center;
}

.news-manage-toggle{
  grid-column: 3;
  justify-self: end;
  color:white;
  font-size: .8rem;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(56, 189, 248, .30);

  cursor: pointer;
  opacity: .7;
}
.news-manage-toggle:hover{ opacity: 1; }

/* Masquage par défaut */
#actualites .news-adminbar,
#actualites .news-actions{
  display: none;
}

/* Mode gestion actif */
#actualites.is-manage .news-adminbar,
#actualites.is-manage .news-actions{
  display: flex;
}




/* ===========================
   MAIN NAV — BASE (desktop + fallback)
   (ce bloc s'applique partout)
   =========================== */

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

  width: 85%;
  margin: 10px auto 8px;
  padding: 10px 16px;

  background: rgba(11, 140, 210, 0.025);
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);

  box-sizing: border-box;
}

/* liste centrée */
.main_nav ul{
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;

  width: 100%;        /* 🔴 pas 85% */
  margin: 0;          /* 🔴 aucune marge */
  padding: 0;         /* 🔴 aucun fond, aucun padding */
  background: none;   /* 🔴 surtout PAS de fond */
  border: 0;
}


.main_nav li{ margin: 0; padding: 0; }

/* liens */
.main_nav a{
  display: inline-flex;
  align-items: center;

  color: rgb(11, 163, 223);
  text-decoration: none;
  font-weight: 900;

  font-size: clamp(1.125rem, 1.8vw, 1.75rem); /* 18px..28px */
  letter-spacing: .3px;

  padding: 8px 10px;
  border-radius: 12px;

  text-shadow: 0 2px 0 rgba(0,0,0,.10);
  transition: transform .12s ease, background .12s ease, text-shadow .12s ease, opacity .12s ease;
}

.main_nav a:hover{
  transform: translateY(-1px);
  background: rgba(11, 163, 223, .12);
  text-shadow: 0 4px 10px rgba(0,0,0,.12);
}

.main_nav a:focus-visible{
  outline: 3px solid rgba(11, 163, 223, .35);
  outline-offset: 2px;
}

/* ------------------------------ */
/* 9) Lien secret                 */
/* ------------------------------ */
a.secret{
  color: inherit;
  text-decoration: none;
  position: relative;
  cursor: pointer;
}

a.secret::after{
  content: "❤";
  position: absolute;
  left: 50%;
  top: -1.4em;
  transform: translateX(-50%) scale(0.6) rotate(-10deg);
  opacity: 0;
  font-size: 1.1em;
  pointer-events: none;

  animation: heart-float 1.2s ease-in-out infinite;
  transition: opacity .15s ease;
}

a.secret:hover::after{ opacity: 1; }

@keyframes heart-float{
  0%   { transform: translateX(-50%) translateY(0)    scale(0.9) rotate(-8deg); }
  50%  { transform: translateX(-50%) translateY(-6px) scale(1.1) rotate(8deg); }
  100% { transform: translateX(-50%) translateY(0)    scale(0.9) rotate(-8deg); }
}

/* ------------------------------ */
/* 10) Mobile                     */
/* ------------------------------ */
@media (max-width:800px){

  .content_block > .div_img > img{
    width:100%;
    margin-bottom:10px;
  }

  .content_block .bureau{
    width:100%;
    margin-bottom:10px;
  }

  .we-row{ flex-wrap:wrap; }

  .we-action-inline{
    width:100%;
    justify-content:flex-start;
  }

  /* ✅ Responsive texte global */
  html{ font-size: 80%; }

  .main_block > h2{
    font-size: clamp(1.35rem, 5vw, 1.7rem);
    margin-bottom: 16px;
  }

  .content_block > h1{
    font-size: 1.2rem;
  }

  .main_block{
    padding: 18px 16px;
    margin: 18px auto;
  }

  html, body{ overflow-x: hidden; }

  /* ✅ Nav mobile : évite le débordement */
  .main_nav{
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 8px 10px;
  }

  .main_nav ul{
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    padding: 8px 10px;
    margin: 0;
  }

  .main_nav a{
    white-space: normal;
    text-align: center;
    font-size: clamp(0.95rem, 3.6vw, 1.15rem);
    padding: 6px 8px;
    border-radius: 10px;
  }
}