/* =========================================================
   ISND Secondaire — Design system
   Couleurs, polices et composants extraits du design Canva
   original (secondaire.isnd.be). Voir README.md.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root{
  /* Couleurs de marque (extraites du PDF Canva) */
  --navy: #1B253B;        /* header, footer, nav, titres */
  --orange: #F26F20;      /* accent principal, CTA */
  --orange-dark: #D9601A;
  --magenta: #B02E5E;     /* état d'erreur (actualités) */
  --blue-pale: #B0D4DF;   /* bandeaux de titres de section */
  --blue-pale-2: #D4E7ED;
  --bg: #F0F5F9;          /* fond de page */
  --white: #FFFFFF;
  --text: #232B3A;
  --text-soft: #525A6B;
  --border: #DDE7EE;
  --shadow: 0 4px 18px rgba(27, 37, 59, 0.08);

  --font-head: 'Poppins', 'Inter', sans-serif;
  --font-body: 'Open Sans', 'Nunito', sans-serif;
  --font-quote: 'Nunito', 'Open Sans', sans-serif;

  --radius: 14px;
  --radius-lg: 22px;
  --container: 1400px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; height: 100%; }
body{
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}
/* Le footer reste collé en bas même quand une page est courte : le <main>
   (seul élément flexible entre le header et le footer) absorbe l'espace
   restant plutôt que de laisser le footer "flotter" au milieu de l'écran. */
body > main{ flex: 1 0 auto; }
body > .site-footer{ flex-shrink: 0; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; }
h1,h2,h3,h4{ font-family: var(--font-head); color: var(--navy); margin: 0 0 .5em; line-height: 1.25; }

.container{
  width: 100%; /* évite qu'un auto-margin centreur ne "rétrécisse" la boîte
                  quand .container se retrouve item d'un flex container
                  (header/footer/accueil en layout plein écran) */
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
/* Espacement vertical d'une section — jamais de raccourci "padding: Npx 0"
   sur .container : ça écrase aussi le padding horizontal hérité ci-dessus. */
.container--pad{ padding-top: 32px; padding-bottom: 32px; }

/* ---------- Header / Nav (compact, single row) ---------- */
.site-header{
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.site-header .brand{
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.site-header .brand img{ height: 30px; width: auto; flex-shrink: 0; }
.site-header .brand span{
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-nav{ display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
.main-nav a{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .82rem;
  color: rgba(255,255,255,.78);
  background: transparent;
  padding: 8px 12px;
  border-radius: 7px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.main-nav a:hover{ background: rgba(255,255,255,.1); color: var(--white); }
.main-nav a.is-active{
  background: var(--orange);
  color: var(--white);
}
.nav-toggle{
  display: none;
  background: transparent;
  border: none;
  color: var(--white);
  padding: 6px;
  cursor: pointer;
}
.nav-toggle svg{ width: 24px; height: 24px; }

/* ---------- Section title bar (ex: "ACTUALITÉS") ---------- */
.section-bar{
  background: var(--blue-pale);
  border-radius: var(--radius);
  padding: 18px 28px;
  margin-bottom: 22px;
}
.section-bar h2{
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: .02em;
}
.page-title-band{
  background: linear-gradient(135deg, var(--navy) 0%, #26314c 100%);
  border-bottom: 3px solid var(--orange);
  position: sticky;
  top: var(--header-h, 57px); /* hauteur réelle du header, mesurée en JS */
  z-index: 99;
}
.page-title-band .container{
  padding-top: 20px;
  padding-bottom: 20px;
}
.page-title-band h1{
  color: var(--white);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0;
}
.page-title-band p{
  color: rgba(255,255,255,.65);
  font-size: .85rem;
  margin: 4px 0 0;
}

/* ---------- Sub-nav tabs (sections split across several pages) ---------- */
.subnav{
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--sticky-offset, 110px);
  z-index: 90;
}
.subnav::after{
  content: '';
  position: absolute; top: 0; right: 0; bottom: 1px; width: 32px;
  background: linear-gradient(to right, transparent, var(--white));
  pointer-events: none;
}
.subnav .container{
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav .container::-webkit-scrollbar{ display: none; }
.subnav a{
  display: inline-block;
  padding: 13px 16px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .83rem;
  color: var(--text-soft);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .15s ease;
}
.subnav a:hover{ color: var(--navy); }
.subnav a.is-active{ color: var(--orange); border-bottom-color: var(--orange); }

/* ---------- Link cards (landing pages of a split section) ---------- */
.link-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
/* Variante : jamais plus de 3 cases par ligne (ex. contact/index.html) */
.link-cards--max3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px){
  .link-cards--max3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .link-cards--max3{ grid-template-columns: 1fr; }
}
.link-cards a{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 20px;
  transition: border-color .15s ease, transform .15s ease;
}
.link-cards a:hover{ border-color: var(--orange); transform: translateY(-2px); }
.link-cards .ico{
  flex-shrink: 0;
  width: 44px; height: 44px;
  color: var(--orange);
}
.link-cards h3{ margin: 0; font-size: 1rem; }
.link-cards p{ margin: 4px 0 0; font-size: .85rem; color: var(--text-soft); }

/* Lien mis en avant au-dessus d'une grille de link-cards (entrée principale) */
.featured-link{
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(120deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  margin-bottom: 20px;
  box-shadow: 0 8px 22px rgba(242,111,32,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.featured-link:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(242,111,32,.32); }
.featured-link .ico{
  flex-shrink: 0;
  width: 46px; height: 46px;
  color: var(--white);
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  padding: 10px;
}
.featured-link__text{ flex: 1 1 auto; }
.featured-link h3{ margin: 0 0 3px; font-size: 1.1rem; color: var(--white); }
.featured-link p{ margin: 0; font-size: .88rem; color: rgba(255,255,255,.85); }
.featured-link .arrow{ flex-shrink: 0; width: 22px; height: 22px; transition: transform .15s ease; }
.featured-link:hover .arrow{ transform: translateX(4px); }
@media (max-width: 560px){
  .featured-link{ flex-wrap: wrap; }
  .featured-link .arrow{ display: none; }
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  color: var(--white);
  background: var(--orange);
  border: none;
  border-radius: 999px;
  padding: 14px 26px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover{ background: var(--orange-dark); transform: translateY(-1px); }
.btn--block{ width: 100%; }
.btn--outline{
  background: transparent;
  border: 2px solid var(--orange);
  color: var(--orange);
}
.btn--navy{ background: var(--navy); }
.btn--navy:hover{ background: #101827; }

.pill-link{
  display: block;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  text-align: center;
  border-radius: 999px;
  padding: 16px 20px;
  transition: background .15s ease;
}
.pill-link:hover{ background: var(--orange-dark); }

/* ---------- Cards ---------- */
.card{
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
}
.soft-box{
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.quote-box{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 26px;
  font-family: var(--font-quote);
  font-style: italic;
  text-align: center;
  color: var(--text-soft);
}

/* ---------- Actualités (accueil) ---------- */
.actus-panel{
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.actu-item{
  padding: 26px 30px;
  border-bottom: 1px solid var(--border);
}
.actu-item h3, .actu-item__excerpt{ max-width: 760px; }
.actu-item:last-child{ border-bottom: none; }
.actu-item__tag{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--orange);
}
.actu-item h3{
  font-size: 1.3rem;
  margin: .3em 0 .2em;
}
.actu-item__meta{
  font-size: .82rem;
  color: var(--text-soft);
  margin-bottom: .8em;
}
.actu-item__excerpt p{ margin: 0 0 .8em; }
.actu-item__excerpt :last-child{ margin-bottom: 0; }
.actu-item__more{
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--orange);
  font-size: .9rem;
}
.actus-state{
  padding: 60px 30px;
  text-align: center;
  color: var(--text-soft);
}
.actus-state.is-error{ color: var(--magenta); }

/* ---------- Homepage layout ---------- */

/* Bandeau de bienvenue — donne son identité à la page d'accueil */
.home-welcome{
  background: linear-gradient(120deg, var(--navy) 0%, #26314c 100%);
  border-bottom: 3px solid var(--orange);
  flex-shrink: 0;
}
.home-welcome .container{ padding: 18px 24px; }
.home-welcome h1{
  color: var(--white);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  margin: 0 0 3px;
}
.home-welcome p{
  color: rgba(255,255,255,.65);
  font-family: var(--font-body);
  font-size: .85rem;
  margin: 0;
}

/* L'accueil garde la même marge gauche/droite que le reste du site : le
   header, le bandeau de bienvenue, la grille et le footer utilisent tous
   le même conteneur à 1180px — c'est la colonne Actualités elle-même qui
   profite de l'espace en grandissant par rapport à la colonne photo/liens. */

.home-grid{
  display: grid;
  width: 100%;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  padding-top: 26px;
  padding-bottom: 26px;
  align-items: start;
}

/* Un seul bloc cohérent : photo + actions, plutôt que 3 cartes détachées */
.home-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  width: 100%;
}
.home-card .school-photo{
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-bottom: 3px solid var(--orange);
}
.home-card__actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

/* Côte à côte, les deux colonnes se terminent à la même hauteur : la photo
   absorbe la différence (elle perd son ratio fixe et s'étire), et le bloc
   Actualités s'étire de la même façon si c'est lui qui est le plus court. */
@media (min-width: 861px){
  .home-grid{ align-items: stretch; }
  .home-card{ display: flex; flex-direction: column; height: 100%; }
  .home-card .school-photo{ flex: 1 1 auto; min-height: 180px; aspect-ratio: auto; }
  .home-card__actions{ flex-shrink: 0; }
  .home-grid > section{ display: flex; flex-direction: column; }
  .home-grid > section .section-bar{ flex-shrink: 0; }
  .home-grid > section .actus-panel{ flex: 1 1 auto; min-height: 180px; }
}

.campus-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 10px 14px;
  transition: background .15s ease;
}
.campus-link:hover{ background: var(--blue-pale-2); }
.campus-link .logo-circle{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  background: var(--white);
  padding: 3px;
  overflow: hidden;
  transition: width .15s ease, height .15s ease;
}
.campus-link .logo-circle img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.35);
}
.campus-link .cta{
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .76rem;
  color: var(--orange);
  white-space: nowrap;
}
.campus-link .cta svg{ width: 13px; height: 13px; transition: transform .15s ease; }
.campus-link:hover .cta svg{ transform: translateX(3px); }

/* Sur écran large (colonne photo/liens à côté des actualités), le cadre
   Campus s'agrandit pour que le logo respire et que la colonne de gauche
   occupe mieux la hauteur disponible. */
@media (min-width: 861px){
  .campus-link{ padding: 14px 20px; gap: 16px; }
  .campus-link .logo-circle{ width: 68px; height: 68px; border-width: 2px; padding: 3px; }
  .campus-link .cta{ font-size: .88rem; gap: 6px; }
  .campus-link .cta svg{ width: 15px; height: 15px; }
}

.contact-card{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 10px 14px;
  transition: background .15s ease;
}
.contact-card:hover{ background: #101827; }
.contact-card .ico-circle{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-card .ico-circle svg{ width: 16px; height: 16px; color: var(--white); }
.contact-card__text{ display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.contact-card__text strong{ font-family: var(--font-head); font-weight: 700; font-size: .85rem; }
.contact-card__text span{ font-size: .74rem; color: rgba(255,255,255,.65); }

/* État "pas d'actualité" — centré et chaleureux plutôt que vide */
.actus-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 220px;
  text-align: center;
  color: var(--text-soft);
  padding: 40px 30px;
}
.actus-state svg{ width: 40px; height: 40px; color: var(--blue-pale); }
.actus-state p{ margin: 0; max-width: 420px; }

@media (max-width: 860px){
  .home-card{ max-width: 380px; margin: 0 auto; }
}

/* Sur un écran d'ordinateur, la page d'accueil tient tout entière dans la
   fenêtre (header + contenu + footer) : c'est le bloc Actualités qui absorbe
   l'espace restant et défile en interne s'il a plus de contenu que de place. */
@media (min-width: 1024px) and (min-height: 650px){
  body.page-home{ height: 100vh; overflow: hidden; }
  body.page-home main{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.page-home .home-grid{
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }
  body.page-home .home-grid > section{ min-height: 0; }
  body.page-home .home-card{ margin: 0 auto; max-height: 100%; overflow-y: auto; }
  body.page-home .actus-panel{ min-height: 0; overflow-y: auto; }
  body.page-home .actus-state{ min-height: 100%; }
}

/* ---------- Generic content sections ---------- */
.section{ padding: 40px 0; }
.section--white{ background: var(--white); }
.section-icon-row{
  display: grid;
  gap: 16px;
}
.icon-row-item{
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.icon-row-item p{ margin: 0; }
.icon-row-item .ico{
  flex-shrink: 0;
  width: 34px; height: 34px;
  color: var(--navy);
}
/* Liste à puces plus aérée — à ajouter au cas par cas via class="spaced-list" */
.spaced-list li + li{ margin-top: 10px; }

.back-to-top{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: var(--orange);
  color: var(--white);
  border-radius: 50%;
  float: right;
  margin-top: 18px;
}

/* ---------- Card link grid (Nos projets / Le numérique) ---------- */
.card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px;
}
/* Variante : grille resserrée et centrée, pour une poignée de cases
   seulement (ex. le-numerique/index.html) plutôt qu'étirée sur toute
   la largeur du container. */
.card-grid--center{
  max-width: 760px;
  margin: 0 auto;
}
/* Pages d'aperçu à peu de contenu (le-numerique, nos-options, inscriptions) :
   centrer le contenu verticalement dans l'espace restant entre le bandeau de
   titre et le footer. <main> (flex: 1 0 auto, règle de base) grandit déjà
   pour combler tout l'espace disponible quelle que soit la taille d'écran —
   on centre juste son contenu dans cet espace. */
body.page-center-main main{
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-center-main main > .container{
  width: 100%;
}
.card-grid .tile{
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: block;
  position: relative;
  transition: transform .15s ease;
}
.card-grid a.tile:hover{ transform: translateY(-4px); }
.card-grid .tile img{ width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.card-grid .tile span{
  display: block;
  text-align: center;
  padding: 14px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text);
}
/* Cases pas encore cliquables (page pas encore prête) : image estompée,
   pas d'effet au survol, badge "Bientôt" bien visible. */
.card-grid .tile.is-disabled{ cursor: default; }
.card-grid .tile.is-disabled img{ filter: grayscale(70%); opacity: .6; }
.card-grid .tile.is-disabled span{ color: var(--text-soft); }
.card-grid .tile.is-disabled .soon-badge{
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- Table ---------- */
table.isnd-table{ width: 100%; border-collapse: collapse; }
table.isnd-table th, table.isnd-table td{
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
  font-size: .92rem;
}
table.isnd-table th{ background: var(--blue-pale-2); color: var(--navy); }

/* ---------- Footer (compact single bar) ---------- */
.site-footer{
  background: var(--navy);
  color: rgba(255,255,255,.75);
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
/* Pas de marge séparée avant le footer : chaque page gère déjà elle-même un
   padding-bottom identique à son padding-top (juste sous le header), pour
   que l'espace soit le même en haut et en bas du contenu. */
.site-footer .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 28px;
}
.footer-brand{ display: flex; align-items: center; gap: 28px; }
.site-footer .logo-mark{ height: 22px; }
.footer-links{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; font-weight: 600; font-size: .78rem; }
/* Réseaux sociaux — uniquement sur la page "Nous rejoindre" */
.social-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 999px;
  padding: 12px 22px;
}
.social-row span{ font-family: var(--font-head); font-weight: 700; font-size: .85rem; color: var(--navy); }
.social-row a{ display: flex; transition: transform .15s ease; }
.social-row a:hover{ transform: translateY(-2px) scale(1.06); }
.social-row img{ width: 28px; height: 28px; border-radius: 50%; }
.social-row svg{ width: 28px; height: 28px; }
.footer-credit{ display: flex; align-items: center; gap: 8px; font-size: .68rem; color: rgba(255,255,255,.5); text-align: right; }
.footer-credit span{ line-height: 1.4; }
.footer-credit img{ height: 20px; }

.intro-video{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--navy);
  aspect-ratio: 16/9;
  max-width: 640px;
  margin: 0 auto 8px;
}
.intro-video iframe{ width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Generic content sections ---------- */
.content-section{ padding: 34px 0; scroll-margin-top: 20px; }
.content-section--alt{ background: var(--white); }
.content-section h2{
  text-align: center;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  margin-bottom: 22px;
}
.content-section > .container > .lede:first-child{ margin-top: -6px; }
.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.grid-2{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; }
.grid-3{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 20px; }

.lede{
  font-family: var(--font-quote);
  font-style: italic;
  color: var(--text-soft);
  text-align: center;
  max-width: 900px;
  margin: 0 auto 28px;
  font-size: 1.02rem;
}

/* Bloc de texte unifié (intro + liste dans une seule carte, texte
   réglementaire, conditions, etc.) — pas de rupture entre le texte "libre"
   et une liste qui aurait son propre encadré séparé. */
.doc-box{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  font-size: .90rem;
}
.doc-box--compact{ font-size: .75rem; }
.doc-box--compact h3{ font-size: .90rem; }
.doc-box > p:first-child{ margin-top: 0; }
.doc-box > p:last-child{ margin-bottom: 0; }
.clean-list{
  list-style: none;
  margin: 18px 0 0;
}
.clean-list li{
  position: relative;
  padding: 12px 0 12px 20px;
  line-height: 1.5;
}
.clean-list li:last-child{ padding-bottom: 0; }
.clean-list li + li{ border-top: 1px solid var(--border); }
.clean-list li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 21px;
  width: 7px;
  height: 7px;
  background: var(--orange);
  border-radius: 2px;
}

.history-card{
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 28px;
  align-items: center;
}
.history-card img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 2px solid var(--orange);
}

.download-card{
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: background .15s ease, border-color .15s ease;
}
.download-card:hover{ background: var(--blue-pale-2); border-color: var(--blue-pale); }
.download-card .ico-doc{ width: 40px; height: 40px; color: var(--orange); }

.warning-box{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #FDECE3;
  border: 1px solid #F3C7A9;
  color: #9A4A1E;
  border-radius: var(--radius);
  padding: 14px 20px;
  font-size: .9rem;
  text-align: center;
}
.warning-box svg{ flex-shrink: 0; width: 22px; height: 22px; color: #E8663A; }
.warning-box p{ margin: 0; }
.info-box{
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.info-box li + li{ margin-top: 8px; }
/* Sans ça, la marge par défaut du <p> (non réinitialisée globalement,
   contrairement à <ul>) s'ajoute au padding du premier/dernier enfant et
   rend l'espace haut/bas visuellement inégal, surtout en .info-box--center. */
.info-box > *:first-child{ margin-top: 0; }
.info-box > *:last-child{ margin-bottom: 0; }
/* Variante pour les cases sans titre en tête : centrer le contenu dans
   l'espace disponible plutôt que de le coller en haut (ex. quand la case
   voisine, avec un titre, est plus haute). Ne pas l'utiliser sur une case
   avec un titre : il doit rester en haut de la case. */
.info-box--center{ display: flex; flex-direction: column; justify-content: center; }

/* Bandeaux de section (pages Inscriptions) — même traitement que
   .section-bar ailleurs sur le site (fond bleu pâle, texte navy), plutôt
   que les trois couleurs saturées différentes utilisées par année */
.band{
  border-radius: var(--radius);
  padding: 16px 26px;
  background: var(--blue-pale);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 700;
  text-align: center;
  margin: 34px 0 20px;
}
/* Les pages Inscriptions commencent directement par un bandeau : pas besoin
   d'ajouter la marge habituelle du bandeau à celle du container. */
.container--pad > .band:first-child{ margin-top: 0; }

/* Petite icône de section (ligne, même style que les autres icônes du site) */
.ico-inline{ width: 22px; height: 22px; flex-shrink: 0; color: var(--navy); }
.icon-row{ display: flex; align-items: center; gap: 16px; }
.icon-row + .icon-row{ margin-top: 20px; }
.icon-row p{ margin: 0; }
.icon-row .ico-inline{ width: 42px; height: 42px; }
/* Case "Documents obligatoires" : centrer le contenu pour mieux occuper
   l'espace de la case (souvent plus courte que sa voisine "Cas particuliers"). */
.icon-row-box{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
.year-block{ border-top: 4px solid var(--border); padding-top: 6px; margin-top: 46px; }
.year-block:first-of-type{ border-top: none; margin-top: 0; }
.year-block h2{
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  text-align: left;
  margin: 0 0 6px;
}

/* Options diagram (Nos options) — ligne du temps VERTICALE.
   À gauche : les 3 degrés empilés, chacun clairement délimité. À droite :
   la Qualification, même style que les degrés, positionnée par JS (voir
   main.js) pour démarrer exactement à mi-hauteur du 2e degré et finir avec
   le 3e. Une ligne bien visible sépare les deux colonnes. */
.options-tree{
  display: flex;
  align-items: stretch;
}
.options-track{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.deg-box, .qualif-box{
  background: #EEF2FC;
  border: 1.5px solid #C7D6EE;
  border-radius: 20px;
  padding: 22px 26px;
}
/* Cases un peu moins larges que leur colonne, mais collées côté ligne du
   temps : les degrés (à gauche du séparateur) restent alignés à droite,
   la qualification (à droite) reste alignée à gauche. */
.deg-box{ width: 74%; margin-left: auto; margin-right: 0; }
.deg-box h4{ margin: 0 0 12px; font-size: 1.05rem; }
.deg-box .sub{ font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-soft); margin: 14px 0 6px; }
.deg-box ul{ list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.deg-box li{ padding: 4px 0; }

/* Ligne bien visible entre les degrés (Transition) et la Qualification */
.options-divider{
  flex: 0 0 44px;
  position: relative;
}
.options-divider::before{
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 4px;
  background: var(--navy);
  transform: translateX(-50%);
  border-radius: 2px;
}

.options-qualif-col{
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.qualif-box{
  position: absolute;
  left: 0;
  width: 74%;
  top: 0;
  min-height: 90px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
}
@media (max-width: 760px){
  .options-tree{ flex-direction: column; gap: 28px; }
  .options-divider{ display: none; }
  /* En colonne, .options-tree n'a pas de hauteur fixe à répartir : sans
     "flex: none" ici, "flex: 1 1 0" (hérité) associé à "min-height: 0"
     fait s'effondrer cette colonne à 0px de haut tout en laissant son
     contenu (qualif-box) déborder par-dessus le texte suivant. */
  .options-track, .options-qualif-col{ flex: none; }
  .options-qualif-col{ position: static; min-height: 0; }
  .qualif-box{ position: static; }
  /* En une seule colonne il n'y a plus de ligne du temps à longer :
     les cases reprennent toute la largeur disponible. */
  .deg-box, .qualif-box{ width: 100%; margin-left: 0; margin-right: 0; }
}

/* Icônes 🎥 cliquables (capsules vidéo de présentation) et la fenêtre
   modale qui les ouvre. */
.video-trigger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0 0 0 .15em;
  margin: 0;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  vertical-align: -0.1em;
  border-radius: 6px;
  transition: transform .15s ease, opacity .15s ease;
}
.video-trigger:hover, .video-trigger:focus-visible{
  transform: scale(1.18);
  opacity: .8;
}
.video-trigger:focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.video-modal{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.video-modal[hidden]{ display: none; }
.video-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 33, 0.78);
}
.video-modal__box{
  position: relative;
  width: 100%;
  max-width: 900px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.video-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 20, 33, 0.7);
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-modal__close:hover{ background: var(--navy); }
.video-modal__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--navy);
}
.video-modal__frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-modal__soon{
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
  padding: 0 20px;
}
.video-modal__soon[hidden]{ display: none; }

/* Staff cards (Contact) — largeur fixe, 2 par ligne maximum, fiche seule
   centrée automatiquement grâce à flex-wrap + justify-content. */
.staff-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  max-width: 840px;
  margin: 0 auto;
}
.staff-card{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  width: 400px;
  max-width: 100%;
  box-sizing: border-box;
}
.staff-card .avatar{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg); }
.avatar-initials{
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
}
.staff-card h4{ margin: 0; font-size: 1rem; }
.staff-card .role{ font-size: .85rem; color: var(--orange); font-weight: 700; margin-bottom: 4px; }
.staff-card p{ margin: 0; font-size: .85rem; color: var(--text-soft); }
.staff-card a{ color: var(--navy); font-weight: 600; }
.staff-section-title{
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 12px 22px;
  font-family: var(--font-head);
  font-weight: 700;
  text-align: center;
  margin: 40px 0 22px;
}
.staff-section-title:first-of-type{ margin-top: 0; }

/* Map embed */
.map-embed{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/3;
}
.map-embed iframe{ width: 100%; height: 100%; border: 0; }

/* Vidéo de présentation intégrée directement dans la page (pas de popup) */
.video-embed{
  max-width: 720px;
  margin: 0 auto 28px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 16/9;
}
.video-embed iframe{ width: 100%; height: 100%; border: 0; display: block; }

/* Séparateur discret entre deux blocs d'un même doc-box */
.doc-sep{ border: none; border-top: 1px solid var(--border); margin: 18px 0; }

/* Responsive */
@media (max-width: 860px){
  .intro-grid, .history-card, .two-col, .options-tree{ grid-template-columns: 1fr; }
}

/* ---------- Project / numérique detail pages ---------- */
.project-hero{
  width: 100%;
  max-height: 320px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-hero img{ width: 100%; height: 320px; object-fit: cover; }
.project-hero.is-logo{ padding: 30px 0; }
.project-hero.is-logo img{ height: 220px; width: auto; object-fit: contain; }
.project-body{ padding-top: 40px; padding-bottom: 40px; }

/* Titre mis en valeur à la place d'une bannière photo (ex. pages "Le
   numérique" sans image de couverture) */
.project-title{ text-align: center; padding-top: 4px; }
.project-title h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 14px; }
.project-title .accent{
  width: 64px;
  height: 4px;
  background: var(--orange);
  margin: 0 auto 26px;
  border-radius: 2px;
}

/* Logo cliquable rond (ex. bouton "Campus ISND" vers la plateforme) */
.campus-round-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
  max-width: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 24px;
  box-sizing: border-box;
  transition: transform .15s ease, box-shadow .15s ease;
}
.campus-round-btn img{ width: 100%; height: 100%; object-fit: contain; }
.campus-round-btn:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(27,37,59,.16); border-color: var(--orange); }
.project-body .lede{ margin-bottom: 30px; }
.preview-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  align-self: start;
}
.preview-card img{ width: 100%; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .home-grid{ grid-template-columns: 1fr; }
  .site-footer .container{ flex-direction: column; text-align: center; justify-content: center; }
  .footer-credit{ flex-direction: column; text-align: center; }
}
@media (max-width: 920px){
  .nav-toggle{ display: inline-flex; align-items: center; justify-content: center; }
  .main-nav{
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--navy);
    flex-direction: column;
    gap: 0;
    padding: 6px 16px 14px;
    box-shadow: var(--shadow);
  }
  .main-nav.is-open{ display: flex; }
  .main-nav a{ padding: 11px 8px; border-radius: 6px; }
  .site-header{ position: sticky; }
  .site-header .container{ position: relative; }
}