/* CSS global - couleurs pastels, responsive, header sticky */
/* Fonts: use system fonts for reliability */
:root{
  --green:#a8d5ba;
  --blue:#c7e6f0;
  --yellow:#fceaa4;
  --muted:#6b6b6b;
  --max-width:1200px;
  --content-width:800px;
  --serif: "Georgia", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --radius:8px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:#222;
  line-height:1.45;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.visually-hidden{
  position:absolute!important;
  height:1px;width:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* Disciplines: afficher les retours à la ligne (\n) dans les paragraphes générés */
#disc-text p {
  white-space: pre-line;
}


/* Header */
.site-header{
  position:sticky;
  top:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.98));
  backdrop-filter:blur(4px);
  border-bottom:1px solid rgba(0,0,0,0.06);
  z-index:50;
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 16px;
}
.brand{
  font-family:var(--serif);
  font-size:1.1rem;
  text-decoration:none;
  color:#123;
  padding:6px 8px;
}
.main-nav{
  display:flex;
  gap:12px;
  align-items:center;
  margin-left:8px;
  flex:1;
}
.main-nav a{
  color:var(--muted);
  text-decoration:none;
  padding:8px 6px;
}
.main-nav a:focus, .main-nav a:hover{
  color:#000;
  outline:2px solid var(--blue);
  border-radius:4px;
}
.lang-select{margin-left:auto}
.lang-select select{padding:6px;border-radius:6px;border:1px solid rgba(0,0,0,0.1)}

/* Hero */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:320px;
  overflow:hidden;
}
.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.35;
}
.hero-text{
  position:relative;
  text-align:center;
  max-width:var(--content-width);
  padding:20px;
}
.hero-text h1{
  font-family:var(--serif);
  font-size:1.8rem;
  margin:0 0 8px;
}
.hero-text p{margin:0;color:var(--muted)}

/* Page content */
.page-content{
  max-width:var(--max-width);
  margin:28px auto;
  padding:0 16px 60px;
}

/* Intro block for tarifs */
.intro-block{
  max-width:var(--content-width);
  margin:10px auto 22px;
  background:linear-gradient(180deg,rgba(199,230,240,0.18),rgba(168,213,186,0.06));
  padding:16px;
  border-radius:10px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}

/* Programs grid & carousel (kept) */
.programs-wrap{display:flex;align-items:center;gap:8px}
.programs-list{display:grid;gap:20px;flex:1;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;align-items:start;scroll-behavior:smooth;padding:8px;overflow-x:hidden}

/* Card styles shared (kept) */
.program{background:#fff;border-radius:10px;padding:0;display:flex;flex-direction:column;overflow:hidden;min-height:380px;box-shadow: 0 2px 8px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.03)}
.program-figure{margin:0}
.program-img{width:100%;height:180px;object-fit:cover;display:block}
.program-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.program h3{margin:0;font-family:var(--serif);font-size:1.05rem}
.program p{margin:0;color:var(--muted);font-size:0.95rem}



/* SURPLACE: 2x2 grid card styles (add/merge into your assets/style.css)
   - Cards display a full-width image on top, then title + two paragraphs.
   - Desktop: 2 columns x 2 rows. Mobile: stacked single column.
*/

.grid-2x2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:22px;
  align-items:start;
  max-width:1200px;
  margin:18px auto;
  padding:0 16px;
}

/* Card */
.card{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 6px 18px rgba(16,24,40,0.04);
  min-height:420px; /* gives room for image + substantive text */
}
.card-figure{margin:0}
.card-img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}
.card-body{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.card h3{margin:0;font-family:var(--serif);font-size:1.05rem}
.card p{margin:0;color:var(--muted);font-size:0.98rem;line-height:1.6}

/* Make images slightly smaller on small screens but keep good text space */
@media (max-width:1000px){
  .card-img{height:200px}
  .grid-2x2{grid-template-columns:repeat(1,1fr);gap:16px}
  .card{min-height:480px}
}

/* optional: enhance focus state for accessibility */
.card:focus-within, .card:hover{
  transform: translateY(-2px);
  transition: transform .18s ease;
  box-shadow:0 10px 24px rgba(16,24,40,0.06);
}

.subtitle.surplace {
  font-size: 1.1rem; /* Taille légèrement supérieure au standard */
  font-style: italic;
  color: var(--muted); /* Couleur déjà utilisée pour la lisibilité */
  line-height: 1.6; /* Ligne confortable pour le texte */
}

/* DISCIPLINE */
.disciplines-page{
  display:flex;
  gap:24px;
  align-items:flex-start;
  max-width:1200px;
  margin:24px auto;
  padding:0 16px 40px;
}

/* Side menu */
.side-menu{
  width:280px;
  flex:0 0 280px;
  position:sticky;
  top:90px;
}
.side-menu ul{
  list-style:none;
  margin:0;padding:0;display:flex;flex-direction:column;gap:10px;
}
.disc-item{
  text-align:left;
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  padding:10px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}
.disc-item:hover, .disc-item:focus{
  outline:none;
  box-shadow:0 3px 10px rgba(16,24,40,0.06);
  transform:translateY(-1px);
}
.disc-item.active{
  background: linear-gradient(90deg, rgba(167,212,190,0.14), rgba(199,230,240,0.08));
  border:1px solid rgba(0,0,0,0.08);
  color:#123;
}

/* Content area */
.disc-content{
  flex:1;
  background:#fff;
  border-radius:10px;
  padding:18px;
  border:1px solid rgba(0,0,0,0.04);
  box-shadow:0 6px 18px rgba(16,24,40,0.03);
}
.disc-content img{
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:8px;
  display:block;
  margin-bottom:14px;
}
#disc-title{font-family:var(--serif);margin:0 0 12px;font-size:1.4rem}
#disc-text p{margin:0 0 12px;color:var(--muted);line-height:1.7}

/* Responsive: stack menu above content on small screens */
@media (max-width:900px){
  .disciplines-page{flex-direction:column}
  .side-menu{position:relative;width:auto;top:0}
  .disc-content img{height:220px}
}




/* timeline (kept) */
/* --- Timeline strict : line and dots vertically aligned --- */

:root{
  --timeline-line-col: 48px;   /* total width reserved for the vertical line column */
  --timeline-dot-size: 18px;
  --timeline-date-col: 160px;  /* adjust distance between line and card (date column width) */
}

/* Container: no left padding so first column starts at container left */
.timeline{
  position:relative;
  max-width:880px;
  margin:24px auto;
  padding:30px 20px; /* top/right/bottom/left = 30/20/30/20 */
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Vertical line: centered inside the first column */
.timeline-line{
  position:absolute;
  left: calc((20px) + (var(--timeline-line-col) / 2)); /* 20px = timeline padding-left */
  top:30px;
  bottom:30px;
  width:4px;
  background:linear-gradient(180deg,var(--blue),var(--green));
  border-radius:4px;
  box-shadow:0 0 0 4px rgba(167,212,190,0.06);
  z-index:0;
}

/* Each item uses a strict 3-column grid:
   [ first column = line col ] [ date column ] [ card column ] */
.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns: var(--timeline-line-col) var(--timeline-date-col) 1fr;
  gap:18px;
  align-items:center; /* center date & card vertically with the dot */
  background:transparent;
  border:0;
  padding:8px 12px;
  z-index:1;
  text-align:left;
  cursor:pointer;
}
.timeline-item:focus,
.timeline-item:hover{
  outline: none;
  background: rgba(199,230,240,0.06);
  border-radius:8px;
}

/* Dot: centered inside the first column, vertically centered relative to the item */
.timeline-item::before{
  content: "";
  position:absolute;
  /* left = padding-left (20px) + half of line-col - half dot */
  left: calc(20px + (var(--timeline-line-col) / 2) - (var(--timeline-dot-size) / 2));
  top: 50%;
  transform: translateY(-50%);
  width:var(--timeline-dot-size);
  height:var(--timeline-dot-size);
  border-radius:50%;
  background:var(--yellow);
  border:3px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  z-index:3;
}

/* Dates (second column) aligned vertically with dot; slightly indented to the right */
.timeline-year{
  grid-column: 2;
  align-self:center;
  font-weight:700;
  color:#123;
  font-family:var(--serif);
  font-size:1rem;
  text-align:left;
  padding-left:8px; /* spacing between line and the date text */
  z-index:2;
}

/* Card (third column) */
.timeline-card{
  grid-column: 3;
  background:#fff;
  border-radius:8px;
  padding:12px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border:1px solid rgba(0,0,0,0.03);
  flex:1;
  min-height:80px;
  z-index:2;
}

/* Responsive: reduce widths and stack date+card under small screens */
@media (max-width:720px){
  :root{
    --timeline-line-col: 36px;
    --timeline-date-col: 1fr;
  }
  .timeline-line{
    left: calc((16px) + (var(--timeline-line-col) / 2));
  }
  .timeline-item{
    grid-template-columns: var(--timeline-line-col) 1fr;
    gap:12px;
    padding-left: 12px;
  }
  .timeline-year{grid-column:2;text-align:left;padding-left:6px}
  .timeline-item::before{
    left: calc(16px + (var(--timeline-line-col) / 2) - (var(--timeline-dot-size) / 2));
    top: 12px;
    transform: none;
  }
  .timeline-card{grid-column:2}
}

/* Forms */
.form{display:grid;gap:10px;max-width:600px;margin-bottom:28px}
.form label{font-weight:600}
.form input,.form textarea,.form select{padding:8px;border-radius:6px;border:1px solid rgba(0,0,0,0.08)}
.btn{background:var(--green);border:0;padding:10px;border-radius:8px;cursor:pointer}
.form-msg{margin-top:12px;padding:10px;border-radius:8px;background:var(--blue);color:#123}

/* Footer */
.site-footer{border-top:1px solid rgba(0,0,0,0.06);padding:18px 0;margin-top:30px}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 16px;display:flex;justify-content:space-between;align-items:center}
.cta{background:var(--yellow);padding:8px 12px;border-radius:8px;text-decoration:none;color:#111}

/* small screens adjustments */
@media (max-width:600px){
  .hero{height:220px}
  .hero-text h1{font-size:1.2rem}
  .intro-block{padding:12px;margin:8px}
}