body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }

/* Hero uniformisé */
.hero {
  position: relative;
  width: 100%;
  height: clamp(360px, 62vh, 560px);  /* toujours la même proportion */
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5rem;
}

/* Option A : voile plus doux */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.20) 0%,
    rgba(0,0,0,.10) 45%,
    rgba(0,0,0,.20) 100%
  );
}

/* Option B : barre translucide derrière le texte */
.hero-inner {
  position: relative;
  text-align: center;
  padding: 1.5rem 1.25rem;
  max-width: 900px;
  color: #fff;
  background: rgba(0,0,0,.25);          /* petit fond sombre */
  backdrop-filter: blur(2px) saturate(115%);
  border-radius: 14px;
}

/* Titre principal */
.hero-title {
  margin: 0 0 .5rem 0;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  text-shadow: 0 2px 16px rgba(0,0,0,.4);  /* ombre pour lisibilité */
  color: #fff;
}

/* Sous-titre */
.hero-lead {
  margin: 0;
  color: #f6f7fb;
  opacity: .98;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}


/* Évite que la navbar recouvre le haut quand on clique un ancre */
main .edu-section{ scroll-margin-top: 88px; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom: 1.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

.hero-title {font-family: 'Georgia', serif; font-size: 4rem; color: white; opacity: 0.9;}

.hero-lead {font-family: 'Arial', sans-serif; font-size: 1.5rem; color :#e9ecef;}

.descend {margin-bottom: -40px }

/* --- HERO utils (communs aux deux layouts) --- */
.hero-overlay{
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15));
  }
  .hero-content{
    position:absolute; left:1.25rem; bottom:1.25rem;
    right:1.25rem; /* wrap propre en mobile */
    max-width: 1000px;
  }
  .hero-title{
    font-family:'Georgia', serif;
    font-weight:700;
    color:#fff; opacity:.95;
    font-size:clamp(2rem, 4vw + 1rem, 4rem);
    line-height:1.1; margin:0 0 .5rem 0;
  }
  .hero-lead{
    font-family:'Arial', sans-serif;
    font-size:clamp(1rem, 1.2vw + .6rem, 1.5rem);
    color:#e9ecef; margin:0;
  }
  .hero-ribbon{
    display:inline-block; background:rgba(0,0,0,.85); color:#fff;
    font-style:italic; padding:.35rem .65rem; border-radius:.25rem;
  }

  /* variantes pour le layout secondaire si besoin de texte sombre */
.text-noire{ color:#111 !important; }
.text-noire-50{ color:rgba(0,0,0,.6) !important; }

/* léger décalage optionnel du titre, si tu veux encore “descendre” un peu */
.hero-offset{ margin-top: 40px; }

/* fix mineur (évite margin négatif) */
.descend { transform: translateY(10px); }

/* --- TEAM CARDS --- */
.team-card {
    border: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
  }
  .team-photo-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%;        /* carré */
    overflow: hidden;
    border-radius: 1rem;      /* arrondi XL */
  }
  .team-photo-wrap img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }

  .team-role {
    display: inline-block;
    font-size: .8rem;
    padding: .25rem .5rem;
    border-radius: .5rem;
    background: #111;
    color: #fff;
    margin-bottom: .5rem;
  }
  .team-name {
    margin: .75rem 0 .25rem 0;
  }
  
  
  .hero-overlay-text {
    margin-bottom: 2rem;   /* descendre un peu */
    margin-left: 1rem;     /* coller à gauche */
  }

  /* --- Quick links grid (compact tiles) --- */
.quickgrid .shortcut {
    display:block;
    width:100%;
    padding:.9rem 1rem;
    border:1px solid rgba(0,0,0,.08);
    border-radius:.9rem;
    background:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
    text-decoration:none;
    font-weight:500;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .quickgrid .shortcut:hover {
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(0,0,0,.10);
    border-color:rgba(0,0,0,.12);
  }
  .quickgrid .shortcut span {
    display:block;
    font-size:.85rem;
    color:#6c757d;
    margin-top:.15rem;
  }

  /* --- Sponsors row styling --- */
.sponsors-section h5 {
    font-weight: 500;
    color: #444;
  }
  
  .sponsors-container {
    align-items: center;
  }
  
  .sponsor-link {
    display: inline-block;
    padding: .5rem;
    transition: transform .3s ease, opacity .3s ease;
  }
  
  .sponsor-logo {
    max-width: 100px;
    filter: grayscale(100%);
    opacity: .7;
    transition: filter .3s ease, opacity .3s ease;
  }
  
  .sponsor-link:hover .sponsor-logo {
    filter: none;
    opacity: 1;
    transform: scale(1.1);
  }
  
  /* Navbar custom background */
.custom-navbar {
  background-color: #FEEECC !important;
}

/* Logo */
.navbar-logo {
  height: 50px;   /* tu peux ajuster */
  width: auto;
}

/* Logos sponsors */
.sponsor-logo{
  max-height:60px; width:auto;
  transition:transform .25s ease;
}
.sponsor-logo:hover{ transform:scale(1.05); }

/* Pastilles sociales type "pills" comme l'exemple */
.social-pills .pill{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:48px; height:48px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.social-pills .pill img{
  width:26px; height:26px; object-fit:contain; filter:grayscale(20%);
}
.social-pills .pill:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* Liens CC & GitLab en violet */
.footer-link{
  color:#805BA3; font-weight:500;
}
.footer-link:hover{ text-decoration:underline; }

/* Réglages responsives du bloc contact */
@media (max-width: 991.98px){
  .contact-block{ text-align:center !important; }
}

/* Ruban sponsors */
.sponsors-marquee{
  position:relative;
  overflow:hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.sponsors-marquee .track{
  display:flex;
  gap:1.5rem; /* réduit l’espacement */
  align-items:center;
  width:max-content;
  animation:sponsors-scroll 22s linear infinite;
  padding:.25rem 0;
}
.sponsors-marquee img{
  max-height:40px;   /* réduit la hauteur */
  max-width:120px;   /* limite la largeur */
  width:auto;
  display:block;
  transition:transform .25s ease, filter .25s ease;
  filter: saturate(.95) contrast(1.02);
}
.sponsors-marquee a:hover img{ transform:scale(1.08); filter:saturate(1.1); }

@keyframes sponsors-scroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
.sponsors-marquee:hover .track,
.sponsors-marquee:focus-within .track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .sponsors-marquee .track{ animation:none; }
}

/* Pastilles sociales */
.social-pills .pill{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.social-pills .pill img{ width:26px; height:26px; object-fit:contain; filter:grayscale(20%); }
.social-pills .pill:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.12); }

/* Liens CC & GitLab en violet */
.footer-link{ color:#805BA3; font-weight:500; }
.footer-link:hover{ text-decoration:underline; }

.footer-logo {
  max-height: 65px; /* réduit un peu la taille */
  width: auto;      /* garde proportions */
}


/* === Palette SyntCoLAB === */
:root{
  --scb-rose:#A73F65;
  --scb-gold:#F2C878;
  --scb-violet:#805BA3;
  --scb-beige:#FEEECC;
  --scb-navy:#1C2444;
}

/* Card d’intro élégante */
.doc-card{
  background: linear-gradient(180deg, rgba(254,238,204,.85), rgba(254,238,204,.95));
  border: 1px solid rgba(28,36,68,.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(28,36,68,.10);
}
.badge-pill{
  background: var(--scb-violet);
  color: #fff;
  font-weight: 600;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .85rem;
  letter-spacing: .2px;
}
.doc-title{
  font-weight: 700;
  color: var(--scb-navy);
}

/* Cadre PDF premium */
.pdf-frame{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(28,36,68,.18);
  background: #fff;
  border: 1px solid rgba(28,36,68,.06);
}
.pdf-frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* Boutons brandés */
.btn-accent{
  background: var(--scb-rose);
  color:#fff;
  border: 1px solid var(--scb-rose);
  border-radius: 10px;
  padding: .6rem 1rem;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn-accent:hover{
  background: #922e54; /* plus sombre pour le hover */
  color:#fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(167,63,101,.25);
}

.btn-outline-contrast{
  background: transparent;
  color: var(--scb-navy);
  border: 1px solid rgba(28,36,68,.25);
  border-radius: 10px;
  padding: .6rem 1rem;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.btn-outline-contrast:hover{
  background: rgba(242,200,120,.2);
  border-color: var(--scb-gold);
  color: var(--scb-navy);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(242,200,120,.25);
}

/* ====== SyntCoLAB palette ====== */
:root{
  --rose:#A73F65;
  --violet:#805BA3;
  --gold:#F2C878;
  --cream:#FEEECC;
  --ink:#1C2444;
}

/* Petites améliorations typographiques */
h2, .h2{ letter-spacing: .2px; }

/* Hero / counters */
.edu-hero{
  background: none; /* plus de fond foncé */
  color: var(--ink); /* texte en couleur foncée */
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.edu-counter-card{
  background: var(--ink);   /* fond bleu foncé #1C2444 */
  border: none;
  border-radius: 18px;
  padding: 1.25rem .75rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  color: #fff;             /* texte blanc */
}
.edu-counter{
  color: #fff;             /* chiffres blancs */
  font-weight: 800;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1;
}

.edu-counter-label{
  margin-top:.25rem;
  font-weight:600;
  opacity: 0.95;
  color: #fff;             /* labels blancs */
}

/* Sticky TOC */
.edu-toc{
  position: sticky;
  top: 88px; /* keep under navbar */
  background: var(--cream);
  border: 1px solid #e8d9bc;
  border-radius: 16px;
  padding: 1rem;
}
.edu-toc-title{
  font-weight: 800;
  color: var(--ink);
  margin-bottom: .5rem;
}
.edu-toc-link{
  display:block;
  padding:.4rem .5rem;
  border-radius: 10px;
  text-decoration:none;
  color: var(--ink);
  border: 1px dashed transparent;
}
.edu-toc-link:hover{ background:#fff3; border-color:#e8d9bc; }
.edu-toc-link.active{
  background: var(--gold);
  color: #1c1c1c;
  font-weight:700;
}

/* Sections */
.edu-section{
  padding: 2.25rem 0 1.25rem;
  border-bottom: 1px solid #e9ecef;
}
.edu-h2{
  font-weight: 800;
  color: var(--rose);
  margin-bottom: .75rem;
}
.edu-figure{ margin:0; }
.edu-figure figcaption{
  font-size: .9rem;
  color:#566;
  margin-top:.35rem;
}

.edu-note{
  background: #fff7ea;
  border-left: 6px solid var(--gold);
  border-radius: 10px;
  padding: .75rem .9rem;
  margin-top: 1rem;
}

/* Make YouTube iframes rounded like images */
.ratio iframe{ border-radius: 12px; }

/* Height of your fixed navbar */
:root { --nav-h: 72px; }   /* try 72–96px depending on your navbar */

/* When jumping to #inform, #play, etc., leave room above */
main .edu-section{
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

/* (optional) smooth scrolling */
html { scroll-behavior: smooth; }


/* ===== Testimonials flip-cards ===== */
.edu-reviews{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 1rem;
}

.flip{
  perspective: 1000px;
  outline: none; /* for focus ring we add below */
}
.flip:focus-visible{
  box-shadow: 0 0 0 3px var(--gold);
  border-radius: 18px;
}

.flip-inner{
  position: relative;
  width: 100%;
  min-height: 170px;
  transform-style: preserve-3d;
  transition: transform .6s ease;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.flip:hover .flip-inner,
.flip:focus-within .flip-inner{
  transform: rotateY(180deg);
}

.flip-front,
.flip-back{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
}

/* Front: cream with ink text */
.flip-front{
  background: var(--cream);       /* #FEEECC */
  color: var(--ink);              /* #1C2444 */
}

/* Back: rose with white text */
.flip-back{
  background: var(--rose);        /* #A73F65 */
  color: #fff;
  transform: rotateY(180deg);
}

.edu-quote{
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.35;
  font-weight: 600;
}

.edu-name{
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .2px;
}
.edu-age{
  opacity: .95;
  margin-top: 4px;
}

/* Horizontal scroll container */
.edu-reviews-scroll{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 1rem 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Each card aligns nicely in scroll */
.edu-reviews-scroll .flip{
  flex: 0 0 260px; /* largeur fixe d'une carte */
  scroll-snap-align: start;
  perspective: 1000px;
}

.edu-reviews-scroll::-webkit-scrollbar{
  height: 8px;
}
.edu-reviews-scroll::-webkit-scrollbar-thumb{
  background: var(--rose);
  border-radius: 4px;
}
.edu-reviews-scroll::-webkit-scrollbar-track{
  background: #f4f4f4;
}

/* ===== Palette déjà définie :
   --rose:#A73F65; --violet:#805BA3; --gold:#F2C878; --cream:#FEEECC; --ink:#1C2444;
*/

/* Mini hero badges */
.collab-hero{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem;
}
.badge-pill{
  background: var(--cream);
  color: var(--ink);
  border: 1px solid #ead8ba;
  padding:.35rem .7rem;
  border-radius: 999px;
  font-weight:700;
  font-size:.9rem;
}

/* Clickable center timeline */
.collab-timeline{
  position: relative;
  display:flex; justify-content:center; gap:3rem;
  align-items:center; margin: 1rem 0 2rem;
}
.collab-timeline::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:2px; background: #e5e8ef; transform: translateY(-50%);
}
.tl-step{ position:relative; text-decoration:none; color:var(--ink); text-align:center; }
.tl-dot{
  display:block; width:16px; height:16px; border-radius:50%;
  background: var(--violet); margin: 0 auto .35rem;
  box-shadow: 0 0 0 6px rgba(128,91,163,.15);
}
.tl-step:hover .tl-dot{ background: var(--rose); }
.tl-label{ font-weight:800; font-size:.95rem; }

/* Zig-zag cards */
.collab-card{
  display:grid; grid-template-columns: 1.05fr 1fr; gap: 24px;
  align-items:center; margin: 2.25rem 0; position:relative;
}
.collab-card.collab-right{ grid-template-columns: 1fr 1.05fr; }
.collab-card.collab-right .collab-media{ order:2; }
.collab-card.collab-right .collab-body{ order:1; }

.collab-media{ position:relative; }
.collab-img{
  width:100%; height:auto; display:block;
  border-radius: 22px;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  object-fit: cover;
}
.collab-ribbon{
  position:absolute; left:16px; top:16px;
  background: var(--rose); color:#fff;
  padding:.35rem .6rem; border-radius: 10px;
  font-weight:800; font-size:.85rem;
}

.collab-body p{ margin-bottom:.8rem; }
.collab-highlights{
  background: #fff7ea; border-left:6px solid var(--gold);
  border-radius: 12px; padding:.7rem .9rem;
}
.collab-highlights ul{ margin:0; padding-left:1.1rem; }

/* Horizontal gallery */
.collab-h3{ font-weight:800; color:var(--violet); margin-bottom:.6rem; }
.collab-scroll{
  display:flex; gap:12px; overflow-x:auto; padding:.5rem 0 0.25rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.collab-scroll .gimg{
  flex:0 0 280px; height:180px; object-fit:cover;
  border-radius:16px; scroll-snap-align:start;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* Keep anchors visible below fixed navbar */
:root{ --nav-h: 72px; }
#kul,#bfh,#prague{ scroll-margin-top: calc(var(--nav-h) + 12px); }

/* Responsive */
@media (max-width: 992px){
  .collab-card, .collab-card.collab-right{ grid-template-columns: 1fr; }
  .collab-right .collab-media, .collab-right .collab-body{ order: initial; }
}

/* Special highlight for Parts link */
.parts-link {
  font-weight: 700;
  color: var(--rose); /* #A73F65 */
  text-decoration: none;
  border-bottom: 2px solid var(--gold); /* #F2C878 underline accent */
  transition: color 0.2s, border-color 0.2s;
}
.parts-link:hover {
  color: var(--violet);      /* #805BA3 */
  border-color: var(--rose);
}

/* Handbook download button */
.btn-handbook {
  display: inline-block;
  background: var(--rose);       /* #A73F65 */
  color: #fff;
  font-weight: 700;
  padding: .6rem 1.2rem;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.25s, transform 0.15s;
}
.btn-handbook:hover {
  background: var(--violet);     /* #805BA3 */
  transform: translateY(-2px);
}

.collab-divider {
  border: 0;
  border-top: 2px solid #c0c0c0; /* gris moyen plus sombre */
  margin: 2.5rem 0;
}

/* ==== Students' projects grid ==== */
.proj-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap: 14px;
  margin-top: .5rem;
}

.proj-tile{
  position: relative;
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease;
}
.proj-tile:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.10); }
.proj-tile img{ display:block; width:100%; height:260px; object-fit:cover; }
.proj-title{
  display:block; padding:.6rem .7rem;
  font-weight:700; color: var(--ink);
  background: #fff;
}

/* ==== CSS-only lightbox using :target (no JS) ==== */
.proj-lightbox{
  position: fixed; inset:0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items:center; justify-content:center;
  padding: 24px;
  z-index: 1050;
}
.proj-lightbox:target{ display:flex; }

.proj-frame{
  background:#fff; border-radius: 16px;
  max-width: min(1000px, 92vw);
  max-height: 92vh;
  padding: 12px 12px 16px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.proj-frame img{
  width:100%; height:auto; object-fit:contain;
  border-radius: 10px;
}

.proj-actions{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
}
.proj-close, .proj-close-link{
  color:#fff; text-decoration:none; font-weight:800;
}
.proj-close{
  position:absolute; right:16px; top:8px; font-size:28px;
}

/* Reuse the pink button style from handbook */
.btn-handbook{
  display:inline-block; background: var(--rose); color:#fff;
  font-weight:700; padding:.5rem 1rem; border-radius:10px; text-decoration:none;
  transition: background .2s, transform .15s;
}
.btn-handbook:hover{ background: var(--violet); transform: translateY(-1px); }

/* Keep anchored title visible under navbar when following #pX close links */
#play, #create { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* Limiter la taille de l’image dans la lightbox */
.proj-lightbox img {
  max-width: 90vw;   /* jamais plus large que 90% de la fenêtre */
  max-height: 85vh;  /* jamais plus haut que 85% de la fenêtre */
  object-fit: contain; /* garde les proportions sans rogner */
  display: block;
  margin: 0 auto; /* centre horizontalement */
}

/* Si ton cadre de lightbox (.proj-frame) n’est pas scrollable */
.proj-frame {
  max-height: 90vh;
  overflow: auto;   /* si jamais l’image est encore plus grande, on peut scroller */
}

.portfolio-cta {
  font-size: 1.5rem;               /* plus grand */
  font-weight: 700;                /* gras */
  color: #805BA3;                  /* couleur SyntCoLAB mauve */
  text-align: center;              /* centré */
  margin-top: 2rem;
  margin-bottom: 1rem;
}
 
.highlight {
  text-decoration: underline;
  text-decoration-color: #805BA3; /* underline mauve aussi */
}

/* Mosaic layout for mixed portrait/landscape images */
.pds-mosaic{
  display: grid;
  grid-template-columns: 2fr 1fr 1.1fr;     /* wide | small | tall column */
  grid-auto-rows: 170px;
  gap: 12px;
}

/* Areas: A wide (2 rows), C tall (2 rows), two small squares (B, D) */
.pds-A{ grid-column: 1 / 3; grid-row: 1 / 3; } /* big wide block across col 1-2, two rows high */
.pds-B{ grid-column: 2 / 3; grid-row: 3 / 4; } /* small square under A's right edge */
.pds-C{ grid-column: 3 / 4; grid-row: 1 / 4; } /* tall portrait spanning all rows on the right */
.pds-D{ grid-column: 1 / 2; grid-row: 3 / 4; } /* small square bottom-left */

/* Card look */
.pds-item{
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  background: #f7f7f7;
}
.pds-item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;     /* crop nicely regardless of orientation */
}

/* Responsive: stack gracefully on tablets/phones */
@media (max-width: 992px){
  .pds-mosaic{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 140px;
  }
  .pds-A{ grid-column: 1 / -1; grid-row: 1 / 3; }   /* big wide on top */
  .pds-C{ grid-column: 1 / 2;  grid-row: 3 / 5; }   /* tall left */
  .pds-B{ grid-column: 2 / 3;  grid-row: 3 / 4; }   /* small right */
  .pds-D{ grid-column: 2 / 3;  grid-row: 4 / 5; }   /* small right below */
}
@media (max-width: 576px){
  .pds-mosaic{
    grid-template-columns: 1fr;
    grid-auto-rows: 180px;
  }
  .pds-A, .pds-B, .pds-C, .pds-D{ grid-column: 1 / -1; grid-row: auto; }
}

.pds-mosaic{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.6fr;  /* avant: 2fr 1fr 1.1fr */
  grid-auto-rows: 170px;
  gap: 12px;
}

/* Areas: A wide (2 rows), C tall (2 rows), two small squares (B, D) */
.pds-A{ grid-column: 1 / 3; grid-row: 1 / 3; } /* big wide block across col 1-2, two rows high */
.pds-B{ grid-column: 2 / 3; grid-row: 3 / 4; } /* small square under A's right edge */
.pds-C{ grid-column: 3 / 4; grid-row: 1 / 4; } /* tall portrait spanning all rows on the right */
.pds-D{ grid-column: 1 / 2; grid-row: 3 / 4; } /* small square bottom-left */

/* Card look */
.pds-item{
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  background: #f7f7f7;
}
.pds-item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;     /* crop nicely regardless of orientation */
}

/* Responsive: stack gracefully on tablets/phones */
@media (max-width: 992px){
  .pds-mosaic{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 140px;
  }
  .pds-A{ grid-column: 1 / -1; grid-row: 1 / 3; }   /* big wide on top */
  .pds-C{ grid-column: 1 / 2;  grid-row: 3 / 5; }   /* tall left */
  .pds-B{ grid-column: 2 / 3;  grid-row: 3 / 4; }   /* small right */
  .pds-D{ grid-column: 2 / 3;  grid-row: 4 / 5; }   /* small right below */
}
@media (max-width: 576px){
  .pds-mosaic{
    grid-template-columns: 1fr;
    grid-auto-rows: 180px;
  }
  .pds-A, .pds-B, .pds-C, .pds-D{ grid-column: 1 / -1; grid-row: auto; }
}

.pds-mosaic{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.6fr;  /* avant: 2fr 1fr 1.1fr */
  grid-auto-rows: 170px;
  gap: 12px;
}

/* === Horizontal scroller for student projects === */
.proj-scroll{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 6px 12px 10px;
  margin-inline: -12px;        /* respirer jusqu’au bord du container */
}

/* Option: rendre la scrollbar discrète */
.proj-scroll::-webkit-scrollbar{ height: 8px; }
.proj-scroll::-webkit-scrollbar-track{ background: transparent; }
.proj-scroll::-webkit-scrollbar-thumb{
  background: #A73F65; border-radius: 8px;
}

/* Pour Firefox */
.proj-scroll {
  scrollbar-color: #A73F65 transparent; /* pouce rose, fond transparent */
  scrollbar-width: thin;
}

/* Cartes fixes (une largeur, pas de wrap) */
.proj-card{
  flex: 0 0 240px;             /* largeur d’une carte */
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;

  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .2s ease;
}
.proj-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
}

.proj-card img{
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;           /* vignettes propres */
}

.proj-card .proj-title{
  display: block;
  padding: .6rem .7rem;
  font-weight: 700;
  color: var(--ink);           /* ton bleu foncé */
  line-height: 1.2;
}

/* petit ajustement mobile si tu veux des cartes un peu plus étroites */
@media (max-width: 480px){
  .proj-card{ flex-basis: 200px; }
  .proj-card img{ height: 130px; }
}

/* === Barre défilante rose, comme les commentaires === */
.proj-scroll{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 1rem 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* Pour Firefox */
  scrollbar-color: var(--rose) #f4f4f4;
  scrollbar-width: thin;
}

/* Cartes fixes et alignement au snap */
.proj-card{
  flex: 0 0 260px;       /* largeur d’une carte (augmente-la si tu veux forcer le scroll) */
  scroll-snap-align: start;
}

/* Scrollbar WebKit (Chrome/Safari/Edge) */
.proj-scroll::-webkit-scrollbar{
  height: 8px;
}
.proj-scroll::-webkit-scrollbar-thumb{
  background: var(--rose);
  border-radius: 4px;
}
.proj-scroll::-webkit-scrollbar-track{
  background: #f4f4f4;
}

/* --- TEAM CARDS --- */
.team-card {
  border: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.team-photo-wrap {
  position: relative;
  width: 100%;
  padding-top: 100%;        /* carré */
  overflow: hidden;
  border-radius: 1rem;      /* arrondi XL */
}
.team-photo-wrap img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

.team-role {
  display: inline-block;
  font-size: .8rem;
  padding: .25rem .5rem;
  border-radius: .5rem;
  background: #111;
  color: #fff;
  margin-bottom: .5rem;
}
.team-name {
  margin: .75rem 0 .25rem 0;
}


.hero-overlay-text {
  margin-bottom: 2rem;   /* descendre un peu */
  margin-left: 1rem;     /* coller à gauche */
}

/* Spacing rules for education sections */
.edu-section + .edu-section { margin-top: 3rem; }

.edu-section .lead { margin-bottom: 1.25rem; }

/* Nice callout block used in Inform + other places */
.edu-note{
background: #FEEECC;            /* ta couleur claire */
border: 1px solid #F2C878;       /* bord doux */
border-radius: 12px;
padding: 1rem 1.25rem;
}
.edu-note p { margin: 0 0 .5rem 0; }
.edu-note ul { margin: 0 0 0 1.25rem; }
.edu-note li { margin-bottom: .4rem; }

/* Figures: petit espace sous l'image si besoin */
.edu-figure { margin: 0; }
.edu-figure figcaption { margin-top: .5rem; color: #555; }

/* Grilles un peu plus aérées si g-3 est utilisé ailleurs */
.row.g-3 { row-gap: 1rem; }

/* ——— Education page: smaller paragraph text ——— */

/* Réduction de la taille pour tout sauf la phrase de portfolio */
.edu-section p:not(.portfolio-cta),
.edu-section li,
.edu-note,
.edu-figure figcaption {
font-size: 1.05rem;   /* ~15.2px */
line-height: 1.55;
}

/* “Lead” paragraphs (intro lines) — légèrement réduits mais pas trop */
.edu-section .lead {
font-size: 1.05rem;
line-height: 1.5;
margin-bottom: 1rem;
}

/* Conserve la taille d'origine pour la phrase de portfolio */
.portfolio-cta {
font-size: 1.3rem;          /* bien visible */
font-weight: 700;
line-height: 1.4;
color: #805BA3;             /* mauve SyntCoLAB */
margin-bottom: 1rem;
}


/* Tighten lists */
.edu-section ul { margin-bottom: 0.75rem; }
.edu-section li  { margin-bottom: 0.35rem; }

/* Mobile: keep readability */
@media (max-width: 576px) {
.edu-section p:not(.portfolio-cta),
.edu-section li,
.edu-note,
.edu-figure figcaption {
  font-size: 0.98rem;
  line-height: 1.6;
}
.edu-section .lead { font-size: 1.08rem; }
}

/* ==== Human Practices — calendar ==== */
.hp-cal{
  border: 1px solid #e9edf3;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
}

.hp-cal-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 8px;
}
.hp-cal-title{ font-weight: 800; color:#1C2444; }

.hp-cal-nav{
  border: none; background: #FEEECC; color:#1C2444;
  font-weight: 700; width: 36px; height: 36px; border-radius: 10px;
  cursor: pointer;
}
.hp-cal-nav:hover{ background:#F2C878; }

.hp-cal-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.hp-cal-dow span{
  text-align:center; font-size:.8rem; color:#6b7280; padding:6px 0;
}

.hp-day{
  display:flex; align-items:center; justify-content:center;
  height: 40px; border-radius: 10px; background:#fafbfc; color:#1C2444;
  font-weight: 600;
}
.hp-empty{ background: transparent; }

.hp-has{
  background: #805BA3; color:#fff; cursor:pointer; position:relative;
}
.hp-has::after{
  content:""; position:absolute; bottom:6px; width:6px; height:6px; border-radius:50%;
  background:#F2C878;
}
.hp-has:hover{ background:#A73F65; }

.hp-links-title{ margin-top:10px; font-weight:700; color:#1C2444; }
.hp-link{
  display:block; font-size:.92rem; margin-top:6px; color:#805BA3; text-decoration:none;
}
.hp-link:hover{ text-decoration:underline; }

/* Entries */
.hp-entry{ padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom:1px dashed #eaeef5; }
.hp-entry:last-of-type{ border-bottom: none; }
.hp-date{ font-size:1.15rem; color:#1C2444; margin-bottom:.5rem; }

/* Highlight when jumped to */
.hp-highlight{ animation: hpFlash .9s ease; }
@keyframes hpFlash{
  0%{ background: #FEEECC; }
  100%{ background: transparent; }
}

/* Mobile tweak */
@media (max-width: 576px){
  .hp-day{ height: 36px; }
}

/* Human Practices – event titles in SyntCoLAB violet */
:root{ --violet-syntcolab: #805BA3; }

.hp-date{
  color: var(--violet-syntcolab);
  font-weight: 800;
}

.icap-card {
  background: #fffafc; /* léger rose très clair */
  border: 3px solid var(--rose); /* ta couleur rose SyntCoLAB */
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
}


.icap-title {
  font-weight: 700;
  font-size: 1.4rem;
}

.icap-level {
  background: white;
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.icap-badge {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.icap-passive .icap-badge { background: #E3E3E3; color: #333; }
.icap-active .icap-badge { background: #FFD966; color: #5A4500; }
.icap-constructive .icap-badge { background: #C9E9C5; color: #1F5720; }
.icap-interactive .icap-badge { background: #D8C9F0; color: #4E2A84; }

.edu-references {
  margin-top: 1rem;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.edu-references li {
  margin-bottom: 0.5rem;
}



  :root{ --ig-accent: var(--rose, #cc5aa3); }

  /* conteneur horizontal */
  .ig-scroll{
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .ig-scroll::-webkit-scrollbar{ height:6px; }
  .ig-scroll::-webkit-scrollbar-thumb{
    background: var(--ig-accent);
    border-radius: 4px;
  }
  .ig-scroll::-webkit-scrollbar-track{ background:#f3f3f3; }

  /* style des posts */
  .ig-post{
    flex: 0 0 320px;
    scroll-snap-align: start;
    border-radius:18px;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
    background:#fff; /* <- fond blanc */
    border:1px solid #e8e8e8;
  }

  .ig-head{
    display:flex; align-items:center; gap:.6rem;
    padding:.8rem 1rem;
    color:#333; font-weight:600;
    border-bottom:1px solid #f0f0f0;
  }
  .ig-head img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }

  .ig-frame{ position:relative; overflow:hidden; border-radius:14px; background:#fafafa; }
  .ig-track{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    scrollbar-width:none;
  }
  .ig-track::-webkit-scrollbar{ display:none; }

  .ig-slide{ flex:0 0 100%; scroll-snap-align:center; aspect-ratio:1/1; background:#fafafa; }
  .ig-slide > img{ width:100%; height:100%; object-fit:cover; display:block; border-radius: 14px;}

  /* flèches claires */
  .ig-nav{
    position:absolute; top:50%; translate:0 -50%;
    width:36px; height:36px;
    border-radius:999px; border:none;
    background:rgba(255,255,255,.85); color:#333;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    display:grid; place-items:center; cursor:pointer;
  }
  .ig-prev{ left:.5rem; } .ig-next{ right:.5rem; }
  .ig-nav:hover{ background:rgba(255,255,255,.95); }

  /* points de navigation */
  .ig-dots{ position:absolute; bottom:.6rem; left:0; right:0; display:flex; gap:.35rem; justify-content:center; }
  .ig-dot{ width:8px; height:8px; border-radius:50%; background:#ddd; }
  .ig-dot.is-active{ background:var(--ig-accent); }

  /* légende claire */
  .ig-caption{
    padding:0.8rem 1rem 1rem;
    color:#555; font-size:.95rem;
    border-top:1px solid #f0f0f0;
    background:#fff;
  }
  
  .ig-caption a{ color:var(--ig-accent); text-decoration:none; }

  /* Marge pour éviter que le header masque les sections */
    .edu-section, .edu-subsection { scroll-margin-top: 96px; }
  
    /* Style des sous-liens : pas de soulignement, couleur noire, pas de gras */
    .edu-toc .edu-toc-sublink {
      display: block;
      padding-left: 1.25rem;
      text-decoration: none;
      color: #000; /* noir classique */
      font-weight: normal;
      margin-top: 0.25rem;
      margin-bottom: 0.25rem;
    }
  
    /* Facultatif : survol léger pour feedback utilisateur */
    .edu-toc .edu-toc-sublink:hover {
      color: #555; /* gris pour hover */
    }
  
    /* Lien actif pour sous-sections (même jaune que les autres si défini ailleurs) */
    .edu-toc .edu-toc-sublink.active {
      color: #f0b400; /* jaune du thème si défini dans vos variables */
      font-weight: 500;
    }
  
      :root {
      --syntcolab-purple: #6a0dad;       /* violet classique */
      --syntcolab-purple-light: #f4ecfa; /* violet très clair pour fond */
    }
  
    .testi-scroll {
      display: flex;
      gap: 1rem;
      overflow-x: auto;
      padding-bottom: .5rem;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
  
    .testi-card {
      scroll-snap-align: start;
      flex: 0 0 320px;
      max-width: 85vw;
      border: 1px solid rgba(0,0,0,.05);
      border-radius: .75rem;
      padding: 1rem;
      box-shadow: 0 2px 10px rgba(0,0,0,.05);
      background: var(--syntcolab-purple-light);
    }
  
    .testi-excerpt {
      margin-bottom: .5rem;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  
    .testi-full.d-none { display: none !important; }
  
    .testi-toggle {
      background: transparent;
      border: 0;
      padding: 0;
      font: inherit;
      color: var(--syntcolab-purple);
      cursor: pointer;
      text-decoration: underline;
      font-weight: 500;
    }
  
    .testi-toggle[aria-expanded="true"] { text-decoration: none; }
  
    #eu-data img {
      max-height: 420px; /* images bien grandes */
      object-fit: contain;
      background: white;
    }
    #eu-data figcaption {
      max-width: 95%;
      margin: 0 auto;
      font-size: 0.85rem; /* plus petit qu'un paragraphe normal */
      line-height: 1.3;
    }
  
  
    .soapbox-qa {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      margin-top: 1rem;
    }
  
    .qa-card {
      background: #f9f9fb;
      border-left: 4px solid var(--syntcolab-purple);
      padding: 1rem 1.25rem;
      border-radius: .5rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }
  
    .qa-question {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: .5rem;
      color: var(--syntcolab-purple);
    }
  
  
    .podcast-list {
      list-style: "🎙️  ";
      padding-left: 1.2rem;
    }
    .podcast-list li {
      margin-bottom: .3rem;
    }
    .video-card iframe {
      border: none;
    }
    .video-caption {
      font-size: 0.9rem;
      color: #555;
    }
  
    .school-card {
      background: #f9f9fb;
      border-left: 4px solid var(--syntcolab-purple);
    }
    .school-card h5 {
      color: var(--syntcolab-purple);
      font-weight: 600;
    }
  
  
    .journey-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    @media(min-width: 768px) {
      .journey-cards {
        grid-template-columns: 1fr 1fr;
      }
    }
    .highlight-quote {
      background: var(--syntcolab-purple-light);
    }
  
    .journey-card {
      background: #f9f9fb;
      border-left: 4px solid var(--syntcolab-purple);
      border-radius: .5rem;
      padding: 1rem 1.25rem;
      margin-bottom: 1.5rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .journey-title {
      color: var(--syntcolab-purple);
      font-weight: 600;
      margin-bottom: .5rem;
    }
  
  /* Harmoniser Human Practices avec Education */
  #intro-journey p.lead,
  .journey-card p.lead {
    font-size: 1.1rem; /* même que Education */
    line-height: 1.6;
  }
  
  /* Couleur des liens de la section références */
    .edu-references a {
      color: #805BA3; /* Violet SyntCoLAB */
      text-decoration: none;
      font-weight: 500;
    }
  
    /* Changement de couleur au survol */
    .edu-references a:hover {
      text-decoration: underline;
      color: #5A189A; /* Version un peu plus sombre au hover */
    }

    :root{
      --synt-mauve:#7F5AA6;
      --ink:#1b1f23;
      --card:#ffffff;
      --muted:#6b7280;
      --ring:rgba(127,90,166,.25);
    }
    .eng-toc{position:sticky; top:90px; border:1px solid #eee; border-radius:12px; padding:1rem;}
    .eng-toc .title{font-weight:700; margin-bottom:.5rem;}
    .eng-toc a{display:block; color:var(--ink); text-decoration:none; padding:.35rem .25rem; border-radius:8px;}
    .eng-toc a:hover, .eng-toc a.active{background:rgba(127,90,166,.08); color:var(--synt-mauve);}
  
    .eng-section{margin-bottom:3rem;}
    .eng-h2{font-size:1.9rem; font-weight:800; color:var(--ink);}
    .eng-h3{font-size:1.25rem; font-weight:800; color:var(--synt-mauve); margin-bottom:.25rem;}
  
    .module-card{background:var(--card); border:1px solid #eee; border-radius:16px; padding:1.25rem; box-shadow:0 6px 24px rgba(0,0,0,.06);}
    .module-meta{color:var(--muted); font-size:.95rem; margin-bottom:.5rem;}
    .tag{display:inline-block; padding:.15rem .5rem; border-radius:999px; background:rgba(127,90,166,.12); color:var(--synt-mauve); font-weight:700; font-size:.75rem; letter-spacing:.3px;}
  
    .iter{border:1px solid #eee; border-radius:14px; overflow:hidden; margin:.75rem 0; background:#fff;}
    .iter summary{list-style:none; cursor:pointer; padding:.9rem 1rem; display:flex; align-items:center; gap:.6rem; font-weight:700;}
    .iter summary::-webkit-details-marker{display:none;}
    .iter .chev{margin-left:auto; transition:transform .25s ease;}
    details[open] .chev{transform:rotate(90deg);}
    .iter .body{padding:1rem;}
  
    /* Étapes verticales */
    .steps-vertical{display:flex; flex-direction:column; gap:1rem;}
    .step{border:1px solid #f0f0f0; border-radius:12px; padding:1rem; background:#fafafa;}
    .step h4{margin-top:0; font-size:1rem; font-weight:800; color:var(--ink);}
    .step p{margin:0; font-size:.95rem; color:#111;}
  
    .anchor{scroll-margin-top:90px;}

      /* Appliquer la couleur violette aux titres text-primary uniquement dans la section #problem */
#problem .text-primary {
  color: #7F5AA6 !important; /* Violet syntcoLAB */
}

.highlight-card {
    border: 2px solid var(--rose);
    border-radius: 14px;
    padding: 1rem;
    background: #fff8fb;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    transition: transform .2s ease;
  }
  .highlight-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  }
  .highlight-title {
    text-align: center;
    color: var(--rose);
    font-weight: 700;
    margin-bottom: .75rem;
  }
  .highlight-list {
    padding-left: 1.2rem;
    margin: 0;
  }

  .highlight-card {
  background: #fff8fc; /* léger rose pour rappeler syntcoLAB */
  border: 2px solid var(--rose);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* Local to Results page */
.res-fig img{ width:100%; height:auto; display:block; border-radius:10px; }
.res-fig figcaption{ font-size:.95rem; color:#444; margin-top:.4rem; }
.scale-badge{
  display:inline-block; font-size:.8rem; font-weight:700; 
  padding:.2rem .45rem; border-radius:6px;
  background: #fee7f4; color: var(--rose, #cc5aa3); border:1px solid var(--rose, #cc5aa3);
}
.pair{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width: 768px){ .pair{ grid-template-columns:1fr 1fr; } }
.pair .label{ text-align:center; font-weight:700; margin:.35rem 0 0; color:#555; }
.note{ background:#fff8fc; border:1px solid var(--rose, #cc5aa3); border-radius:12px; padding:.8rem 1rem; }

.media-figure {
  text-align: center;
  margin: 1.5rem auto;
  max-width: 700px;
}
.media-caption {
  margin-top: .6rem;
  font-size: 0.9rem;
  color: #555;
  font-style: italic;
}

.hp-gallery .hp-thumb {
width: 100%;
height: 110px;
object-fit: cover;
cursor: pointer;
transition: transform 0.2s ease;
}
.hp-gallery .hp-thumb:hover {
transform: scale(1.05);
}
.hp-prev, .hp-next {
font-size: 2rem;
opacity: 0.7;
}
.hp-prev:hover, .hp-next:hover {
opacity: 1;
}

.syntcolab-purple {
  color: #805BA3;
}

.syntcolab-highlight {
  color: #805BA3;
  text-decoration: underline;
  font-weight: 600; /* facultatif, pour bien faire ressortir */
}

.small-figure {
  max-width: 40%; /* réduit encore plus la largeur */
  height: auto;
  margin: 0 auto;
  display: block;
}

.adv-table thead th { text-align:center; }
.adv-table thead th:nth-child(2){ background:#dff2e3; }   /* Advantages */
.adv-table thead th:nth-child(3){ background:#fde1e1; }   /* Disadvantages */
.adv-table td:first-child{ width: 170px; font-weight:600; }
.adv-table td{ vertical-align: top; }
.adv-table td p, .adv-table td ul{ margin-bottom:0; }

.journey-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 images par ligne */
  gap: 16px; /* espace entre les images */
}

.journey-photos img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

details.more {
  margin: 0.5rem 0 1.25rem;
}

details.more > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

details.more > summary::-webkit-details-marker { display: none; }

details.more > summary::after {
  content: " ▸";
  transition: transform 0.2s ease;
}

details.more[open] > summary::after {
  content: " ▾";
}

.text-with-image {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.text-with-image .text-part {
  flex: 1; /* prend toute la largeur dispo pour le texte */
}

.text-with-image figure {
  max-width: 25%;
  margin: 0;
  text-align: center;
}

.text-with-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Smooth scroll pour le confort */
html { scroll-behavior: smooth; }

/* Grille des tuiles */
.journey-nav {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) );
  gap: 12px;
  margin: 1rem 0 1.5rem;
}

.journey-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f3e8ff;           /* violet clair */
  border: 1px solid #d8b4fe;     /* contour violet un peu plus foncé */
  font-weight: 600;
  text-decoration: none;
  color: #6b21a8;                /* texte violet foncé */
  transition: transform .08s ease, box-shadow .15s ease, background .2s ease;
}

.journey-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  background: #ede9fe;           /* violet très pâle au survol */
  color: #5b21b6;                /* texte violet encore plus foncé */
}

.journey-tile:focus {
  outline: 3px solid #c084fc;    /* focus violet */
  outline-offset: 2px;
  background: #faf5ff;
}

.parts-wrap{overflow:auto;border:1px solid #e8e8f3;border-radius:16px;background:#fff}
.parts-title{font-weight:700;font-size:1.15rem;margin:.25rem 0 .75rem}
.parts-table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
.parts-table thead th{position:sticky;top:0;background:#f7f7fb;font-weight:700;
  text-align:left;padding:.65rem .9rem;border-bottom:1px solid #ececf6}
.parts-table tbody td{padding:.6rem .9rem;border-bottom:1px solid #f2f2f8;vertical-align:top}
.parts-table tbody tr:hover{background:#fafafe}
.parts-table a{color:#3b5bd6;text-decoration:none}
.parts-table a:hover{text-decoration:underline}
.badge-org{display:inline-block;padding:.18rem .55rem;border-radius:999px;border:1px solid #deddf3;font-size:.78rem}
@media (max-width:640px){
  .parts-table thead{display:none}
  .parts-table,.parts-table tbody,.parts-table tr,.parts-table td{display:block;width:100%}
  .parts-table tr{border-bottom:1px solid #eee;padding:.4rem .2rem}
  .parts-table td{padding:.4rem .2rem}
  .parts-table td[data-label]::before{content:attr(data-label) " — ";font-weight:600;color:#666;display:inline}
}

/* Violet #7F5AA6 underline link style */
.highlight-link {
  color: #7F5AA6;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}
.highlight-link:hover {
  color: #6b4791;
  text-decoration-color: #6b4791;
}

.learn-gallery {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px; /* <-- espace ajouté entre le texte et les images */
}

.learn-figure {
  text-align: center;
}

.learn-figure img {
  height: 300px; /* même hauteur */
  width: auto; /* garde les proportions */
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.learn-figure figcaption {
  font-style: italic;
  color: #7F5AA6;
  margin-top: 8px;
}



@media (max-width: 768px) {
  .learn-figure {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.code-card{
  border:1px solid #e6e6e6; border-radius:12px; overflow:hidden; background:#fafafa;
  box-shadow:0 2px 8px rgba(0,0,0,.06); margin:1rem 0;
}
.code-card__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; background:#f4effa; /* léger violet pastel */
  border-bottom:1px solid #eadffd;
}
.code-card__actions{ display:flex; gap:.5rem; }
.btn-code{
  border:1px solid #7F5AA6; background:#fff; color:#7F5AA6; border-radius:8px;
  padding:.35rem .7rem; font-size:.9rem; cursor:pointer;
}
.btn-code:hover{ background:#7F5AA6; color:#fff; }
.code-card__pre{
  margin:0; padding:1rem; overflow:auto; max-height:60vh; font-size:.9rem;
  background:#1e1e1e; color:#e6e6e6; line-height:1.45; /* style type éditeur */

}

/* ===== BFH feature (image left, text right) ===== */
.collab-feature .feature-wrap {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin-block: 2rem 1rem;
}
.collab-feature .feature-media,
.collab-feature .feature-text {
  flex: 1 1 0;
}
.feature-img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  display: block;
}
.feature-text .lead + .lead { margin-top: .75rem; }

/* Responsive: stack on small screens (photo en premier) */
@media (max-width: 992px) {
  .collab-feature .feature-wrap {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===== Lightbox (no JS, via :target) ===== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  place-items: center;
  padding: 2rem;
  z-index: 1000;
}
.lightbox:target { display: grid; }
.lightbox img {
  max-width: min(1200px, 95vw);
  max-height: 90vh;
  border-radius: .75rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.lb-close {
  position: absolute;
  inset: 0;          /* toute la surface ferme au clic */
  display: block;
  cursor: zoom-out;
}
.lb-x {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 0;
  background: #7F5AA6;
  color: #fff;
  width: 2.25rem;
  height: 2.25rem;
  line-height: 2.25rem;
  border-radius: 999px;
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 1001;     /* au-dessus du calque .lb-close */
}
.lb-x:focus { outline: 3px solid rgba(127,90,166,.35); outline-offset: 2px; }