:root{--navy:#062f60;--deep:#041d3b;--cyan:#10b6dc;--orange:#f7941d;--green:#2fa84f;--purple:#65239b;--pink:#f13979;--gold:#f6b400;--bg:#f4f9fc;--text:#102536;--muted:#607283;--border:rgba(6,47,96,.14);--shadow:0 24px 70px rgba(6,47,96,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.65}a{text-decoration:none}img{max-width:100%}.container-xxl{max-width:1440px}.topline{background:var(--deep);color:white;font-size:.9rem}.topline a,.topline span{color:white}.topline__inner{display:flex;gap:24px;justify-content:space-between;padding:8px 12px}.main-nav{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);transition:.25s}.main-nav.is-scrolled{box-shadow:0 12px 35px rgba(6,47,96,.12)}.brand{display:flex;align-items:center;gap:12px;color:var(--navy);font-weight:950}.brand img{width:68px;height:68px;object-fit:contain}.nav-link{color:var(--navy)!important;font-weight:850;border-radius:999px;padding:10px 13px!important}.nav-link:hover,.nav-link.active{background:#eaf7fb}.btn-ci2j{background:var(--cyan);border:0;border-radius:999px;color:#002033!important;font-weight:950;box-shadow:0 14px 32px rgba(16,182,220,.22);transition:.25s}.btn-ci2j:hover{background:#35c8e8;transform:translateY(-2px)}.hero,.page-hero{background:radial-gradient(circle at 85% 10%,rgba(16,182,220,.35),transparent 30%),linear-gradient(135deg,var(--deep),var(--navy) 58%,#075987);color:white;position:relative;overflow:hidden}.hero{padding:96px 0}.page-hero{padding:86px 0}.hero:before,.page-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:52px 52px;opacity:.45}.hero .container-xxl,.page-hero .container-xxl{position:relative;z-index:2}.eyebrow{display:inline-block;color:var(--cyan);text-transform:uppercase;font-weight:950;letter-spacing:.12em;font-size:.78rem;margin-bottom:12px}h1{font-size:clamp(2.6rem,6vw,5.8rem);font-weight:950;line-height:.94;letter-spacing:-.07em}h2{font-size:clamp(2rem,4vw,3.8rem);line-height:1.03;letter-spacing:-.055em;color:var(--navy);font-weight:950;margin-bottom:18px}h3{font-weight:900}.hero-text,.page-hero p{font-size:1.14rem;color:rgba(255,255,255,.84);max-width:760px}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}.hero-media,.hero-side-image,.rounded-visual{border-radius:32px;box-shadow:0 32px 90px rgba(0,0,0,.22);background:white}.hero-media{position:relative;padding:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}.hero-media img{width:100%;height:min(580px,60vh);object-fit:cover;object-position:center top;border-radius:24px;background:white}.hero-side-image{width:100%;height:420px;object-fit:cover}.media-badge{position:absolute;top:28px;right:28px;background:var(--orange);color:white;padding:12px 18px;border-radius:999px;font-weight:950}.metrics-band{margin-top:-42px;position:relative;z-index:3}.metrics-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.metrics-grid article,.feature-card,.program-card,.institution-card,.cta-panel,.contact-stack article,.card-form,.registration-platform,.blog-card{background:white;border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow)}.metrics-grid article{padding:22px;text-align:center}.metrics-grid strong{display:block;color:var(--cyan);font-size:2rem}.metrics-grid span{color:var(--navy);font-weight:850}.section{padding:82px 0}.section-soft{background:#eaf6fb}.section-head{max-width:880px;margin-bottom:34px}p{color:var(--muted)}.program-card{height:100%;padding:24px;position:relative;transition:.25s}.program-card:hover,.feature-card:hover,.blog-card:hover{transform:translateY(-5px)}.program-card span{position:absolute;right:18px;top:18px;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:var(--card,#0d6efd);color:white;font-weight:950}.program-card i{font-size:2rem;color:var(--card,#0d6efd);margin-bottom:16px}.program-card h3,.feature-card h3{color:var(--navy);font-size:1.18rem}.program-card ul{padding-left:18px;color:var(--muted);font-weight:750}.card-link{font-weight:900;color:var(--cyan)}.blue{--card:#0d6efd}.green{--card:var(--green)}.purple{--card:var(--purple)}.orange{--card:#ff6b00}.pink{--card:var(--pink)}.cyan{--card:#0094a8}.gold{--card:var(--gold)}.feature-card{padding:28px;height:100%;transition:.25s}.feature-card i{font-size:2.2rem;color:var(--cyan)}.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.feature-list span{background:white;border:1px solid var(--border);border-radius:18px;padding:14px;color:var(--navy);font-weight:850}.feature-list i{color:var(--green)}.cta-panel{padding:36px;display:flex;justify-content:space-between;align-items:center;gap:24px;background:linear-gradient(135deg,var(--navy),#075987);color:white}.cta-panel h2{color:white}.cta-panel p{color:rgba(255,255,255,.78)}.institution-card{text-align:center;padding:40px}.institution-card img{width:220px;margin-bottom:18px}.institution-card h3{color:var(--navy)}.value-grid,.module-pills{display:flex;flex-wrap:wrap;gap:10px}.value-grid span,.module-pills span{padding:11px 15px;border-radius:999px;background:white;border:1px solid var(--border);color:var(--navy);font-weight:850}.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}.filter-btn{border:1px solid var(--border);background:white;color:var(--navy);border-radius:999px;padding:10px 16px;font-weight:900}.filter-btn.active{background:var(--navy);color:white}.rounded-visual{width:100%;object-fit:cover}.program-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.program-info-grid article{background:white;border:1px solid var(--border);border-radius:18px;padding:14px;color:var(--navy);display:flex;gap:10px}.program-info-grid i{color:var(--cyan)}.blog-card{overflow:hidden;height:100%;transition:.25s}.blog-card img{width:100%;height:230px;object-fit:cover}.blog-card div{padding:22px}.blog-card span{color:var(--cyan);font-weight:950;text-transform:uppercase;font-size:.78rem}.blog-card h3{color:var(--navy)}.blog-card a{font-weight:900;color:var(--cyan)}.contact-stack{display:grid;gap:14px}.contact-stack article{padding:22px}.contact-stack i{color:var(--cyan);font-size:1.8rem}.contact-stack strong{display:block;color:var(--navy)}.card-form{padding:28px}.card-form input,.card-form textarea,.registration-platform input,.registration-platform select,.registration-platform textarea{width:100%;border:1px solid var(--border);border-radius:16px;padding:15px 16px;font:inherit}.card-form textarea,.registration-platform textarea{min-height:130px}.registration-platform{padding:30px}.stepper{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:24px}.step{border:1px solid var(--border);background:#f4f9fc;color:var(--navy);border-radius:16px;padding:12px;font-weight:900}.step.active{background:var(--navy);color:white}.form-page{display:none;border:0;padding:0;margin:0}.form-page.active{display:block;animation:fadeUp .25s ease}@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.form-page legend{width:100%;padding:16px 18px;background:var(--navy);color:white;border-radius:18px;font-weight:950;margin-bottom:18px}.form-actions{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--border);padding-top:22px;margin-top:24px}.footer{background:var(--deep);color:white;padding:50px 0 24px}.footer-logo{width:110px}.footer p{color:rgba(255,255,255,.72)}.footer h3{font-size:1.2rem}.footer a{display:block;color:var(--cyan);font-weight:900;margin-bottom:8px}.credit a{display:inline}.footer-bottom{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.68)}
@media(max-width:991px){.hero-media img{height:auto}.hero-side-image{height:auto}.metrics-grid{grid-template-columns:1fr 1fr}.cta-panel{flex-direction:column;align-items:flex-start}.topline__inner{flex-direction:column;gap:4px}.program-info-grid,.feature-list{grid-template-columns:1fr}.stepper{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){h1{letter-spacing:-.055em}.metrics-grid,.stepper{grid-template-columns:1fr}.hero,.page-hero{padding:62px 0}.section{padding:60px 0}.form-actions{flex-direction:column}.media-badge{position:static;margin-top:12px;text-align:center}}


/* V3 performance + accessibility enhancements */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:9999;
}
.skip-link:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:12px 16px;
  border-radius:12px;
  background:#fff;
  color:var(--navy);
  box-shadow:var(--shadow);
  font-weight:900;
}
:focus-visible{
  outline:3px solid rgba(16,182,220,.55);
  outline-offset:3px;
}
.hero-media img,
.hero-side-image,
.rounded-visual,
.blog-card img{
  content-visibility:auto;
}
.program-card,
.feature-card,
.blog-card,
.institution-card,
.registration-platform,
.card-form{
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}

.hp-field{position:absolute!important;left:-10000px!important;opacity:0!important;height:0!important;width:0!important;pointer-events:none!important}


/* =========================================================
   CI2J V4 CORPORATE REDESIGN PATCH
   Objectif : supprimer le fond bleu quadrillé et renforcer
   une identité institutionnelle, académique et corporate.
   ========================================================= */

:root{
  --navy:#062f60;
  --deep:#041d3b;
  --cyan:#10b6dc;
  --orange:#f7941d;
  --green:#2fa84f;
  --bg:#f6f9fc;
  --surface:#ffffff;
  --text:#102536;
  --muted:#607283;
  --border:rgba(6,47,96,.12);
  --shadow:0 18px 55px rgba(6,47,96,.10);
}

body{
  background:
    radial-gradient(circle at top left, rgba(16,182,220,.08), transparent 34rem),
    linear-gradient(180deg,#ffffff 0%,#f6f9fc 38%,#eef6fa 100%);
}

.topline{
  background:#ffffff!important;
  color:var(--navy)!important;
  border-bottom:1px solid var(--border);
}

.topline a,
.topline span{
  color:var(--navy)!important;
  font-weight:800;
}

.main-nav{
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--border);
  box-shadow:0 10px 30px rgba(6,47,96,.06);
}

.brand{
  color:var(--navy)!important;
}

.brand img{
  filter:none!important;
}

.nav-link{
  color:var(--navy)!important;
  font-weight:900;
  letter-spacing:-.02em;
}

.nav-link:hover,
.nav-link.active{
  background:#eaf7fb!important;
  color:var(--navy)!important;
}

/* ==========================================================================
   CI2J - Badge "Vacances Utiles"
   --------------------------------------------------------------------------
   Le badge "temporaire" a été désactivé volontairement.
   Conserver cette règle afin de pouvoir réactiver facilement un badge
   (ex. : "Nouveau", "2026", "À venir", "Ouvert", etc.) ultérieurement,
   sans modifier la structure HTML.
   ========================================================================== */

.nav-seasonal::after{
  content:"";
  display:inline-block;
  margin-left:0;
  padding:0;
  width:0;
  height:0;
  background:transparent;
}
.nav-seasonal::after{
  content:"";
  display:inline-block;
  margin-left:0;
  padding:0;
  width:0;
  height:0;
  background:transparent;
}

.btn-ci2j{
  background:linear-gradient(135deg,var(--cyan),#35c8e8)!important;
  color:#002033!important;
  border:0!important;
  box-shadow:0 12px 28px rgba(16,182,220,.20)!important;
}

.hero,
.page-hero{
  color:var(--navy)!important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.96) 0%, rgba(244,250,253,.96) 52%, rgba(231,246,252,.94) 100%)!important;
  border-bottom:1px solid var(--border);
}

.hero:before,
.page-hero:before{
  display:none!important;
}

.hero .eyebrow,
.page-hero .eyebrow{
  color:var(--cyan)!important;
}

.hero h1,
.page-hero h1{
  color:var(--navy)!important;
  text-shadow:none!important;
}

.hero-text,
.page-hero p{
  color:var(--muted)!important;
}

.hero .btn-light{
  background:#ffffff!important;
  color:var(--navy)!important;
  border:1px solid var(--border)!important;
}

.hero-media,
.hero-side-image,
.rounded-visual{
  background:#ffffff!important;
  border:1px solid var(--border)!important;
  box-shadow:0 28px 80px rgba(6,47,96,.13)!important;
}

.hero-media{
  padding:12px!important;
}

.media-badge{
  background:linear-gradient(135deg,var(--orange),#ffb24d)!important;
  box-shadow:0 14px 32px rgba(247,148,29,.20)!important;
}

.metrics-band{
  margin-top:0!important;
  padding-top:28px;
}

.metrics-grid article,
.feature-card,
.program-card,
.institution-card,
.cta-panel,
.contact-stack article,
.card-form,
.registration-platform,
.blog-card{
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow)!important;
}

.metrics-grid article{
  background:#ffffff!important;
}

.section-soft{
  background:linear-gradient(180deg,#f1f8fc 0%,#ffffff 100%)!important;
}

.program-card,
.feature-card,
.blog-card,
.institution-card,
.card-form,
.registration-platform{
  background:rgba(255,255,255,.98)!important;
}

.program-card:hover,
.feature-card:hover,
.blog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 70px rgba(6,47,96,.14)!important;
}

.cta-panel{
  background:
    linear-gradient(135deg,#ffffff 0%,#edf8fd 100%)!important;
  color:var(--navy)!important;
}

.cta-panel h2{
  color:var(--navy)!important;
}

.cta-panel p{
  color:var(--muted)!important;
}

.value-grid span,
.module-pills span,
.feature-list span{
  background:#ffffff!important;
}

.page-hero .hero-side-image{
  object-fit:cover;
  max-height:420px;
}

.footer{
  background:#041d3b!important;
}

/* Cleaner corporate mobile navigation */
@media(max-width:1199px){
  .main-nav .navbar-collapse{
    margin-top:12px;
    padding:16px;
    border-radius:22px;
    background:#ffffff;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
  }
}

@media(max-width:767px){
  .nav-seasonal::after{
    display:none;
  }
}

/* =========================================================
   V5 - Accueil & À propos institutional update
   ========================================================= */

.banner-section{
  padding-top:54px;
  padding-bottom:54px;
}

.corporate-banner{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  background:#ffffff;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.corporate-banner > img{
  width:100%;
  min-height:260px;
  max-height:380px;
  object-fit:cover;
  display:block;
}

.corporate-banner__content{
  position:absolute;
  inset:auto 38px 38px 38px;
  max-width:760px;
  padding:24px;
  border-radius:24px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(6,47,96,.10);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 48px rgba(6,47,96,.12);
}

.corporate-banner__content h2{
  font-size:clamp(1.7rem,3vw,3rem);
  margin-bottom:8px;
}

.about-checklist{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:24px;
}

.about-checklist span{
  padding:13px 14px;
  border-radius:16px;
  background:#ffffff;
  border:1px solid var(--border);
  color:var(--navy);
  font-weight:850;
}

.about-checklist i{
  color:var(--green);
  margin-right:7px;
}

.director-card{
  background:linear-gradient(135deg,#ffffff,#eef9fd);
  border:1px solid var(--border);
  border-radius:32px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:grid;
  grid-template-columns:.82fr 1fr;
  min-height:440px;
}

.director-card__photo{
  background:#eaf7fb;
  display:flex;
  align-items:stretch;
}

.director-card__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.director-card__content{
  padding:28px;
}

.director-card__content h3{
  color:var(--navy);
  font-size:1.45rem;
  line-height:1.2;
  margin-bottom:14px;
}

.director-card__content strong{
  color:var(--navy);
  font-weight:950;
}

.pressbook-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.pressbook-grid article{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:26px;
  transition:.25s ease;
}

.pressbook-grid article:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 70px rgba(6,47,96,.14);
}

.pressbook-grid i{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:#eaf7fb;
  color:var(--cyan);
  font-size:1.7rem;
  margin-bottom:16px;
}

.pressbook-grid h3{
  color:var(--navy);
  font-weight:950;
  font-size:1.22rem;
}

.institution-values{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:30px;
  align-items:center;
  padding:34px;
  border-radius:34px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:linear-gradient(135deg,#ffffff,#f2fbfe);
}

@media(max-width:991px){
  .corporate-banner__content{
    position:static;
    margin:14px;
  }

  .director-card,
  .pressbook-grid,
  .institution-values{
    grid-template-columns:1fr;
  }

  .director-card__photo img{
    max-height:420px;
  }

  .about-checklist{
    grid-template-columns:1fr;
  }
}

@media(max-width:767px){
  .corporate-banner > img{
    min-height:220px;
  }

  .corporate-banner__content{
    padding:18px;
  }

  .pressbook-grid article{
    padding:22px;
  }
}


/* =========================================================
   CI2J V6 - Formations interactive catalog + official logo
   ========================================================= */

.brand img,
.footer-logo,
.institution-card img{
  object-fit:contain;
  image-rendering:auto;
}

.brand img{
  width:76px !important;
  height:76px !important;
}

.footer-logo{
  max-width:125px !important;
  height:auto !important;
}

.formations-academy{
  background:
    radial-gradient(circle at top left, rgba(16,182,220,.08), transparent 28rem),
    linear-gradient(180deg,#ffffff 0%,#f4f9fc 100%);
}

.formation-head{
  max-width:980px;
}

.formation-dashboard{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:26px;
  align-items:start;
}

.formation-sidebar{
  position:sticky;
  top:105px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:30px;
  padding:18px;
  box-shadow:var(--shadow);
}

.sidebar-title{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px 16px;
  color:var(--navy);
  font-weight:950;
  border-bottom:1px solid var(--border);
  margin-bottom:12px;
}

.sidebar-title i{
  color:var(--cyan);
  font-size:1.5rem;
}

.formation-filter{
  width:100%;
  border:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 15px;
  margin-bottom:8px;
  border-radius:18px;
  background:#f4f9fc;
  color:var(--navy);
  font-weight:900;
  text-align:left;
  transition:.25s ease;
}

.formation-filter i{
  color:var(--cyan);
}

.formation-filter:hover{
  transform:translateX(4px);
  background:#eaf7fb;
}

.formation-filter.active{
  background:linear-gradient(135deg,var(--navy),#075987);
  color:#ffffff;
  box-shadow:0 16px 36px rgba(6,47,96,.18);
}

.formation-filter.active i{
  color:#ffffff;
}

.formation-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:26px;
  padding:20px 24px;
  box-shadow:var(--shadow);
}

.formation-summary strong{
  display:block;
  color:var(--cyan);
  font-size:2.35rem;
  line-height:1;
  font-weight:950;
}

.formation-summary span{
  color:var(--navy);
  font-weight:900;
}

.formation-summary p{
  margin:0;
  max-width:680px;
}

.formation-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.formation-card{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:30px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:.28s ease;
}

.formation-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 85px rgba(6,47,96,.16);
}

.formation-card.is-hidden{
  display:none;
}

.formation-cover{
  min-height:160px;
  padding:22px;
  position:relative;
  color:#ffffff;
  background:
    linear-gradient(135deg,rgba(6,47,96,.94),rgba(16,182,220,.82));
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}

.formation-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 20%,rgba(255,255,255,.22),transparent 28%),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:auto, 42px 42px;
  opacity:.7;
}

.formation-cover span,
.formation-cover i{
  position:relative;
  z-index:1;
}

.formation-cover span{
  width:56px;
  height:56px;
  border-radius:18px;
  background:rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  font-size:1.4rem;
  font-weight:950;
  backdrop-filter:blur(10px);
}

.formation-cover i{
  font-size:3.3rem;
  opacity:.95;
}

.dev-cover{background:linear-gradient(135deg,#145a24,#2fa84f)}
.ai-cover{background:linear-gradient(135deg,#351260,#65239b)}
.tech-cover{background:linear-gradient(135deg,#a94400,#ff6b00)}
.marketing-cover{background:linear-gradient(135deg,#9d1646,#f13979)}
.gestion-cover{background:linear-gradient(135deg,#00606e,#0094a8)}
.emploi-cover{background:linear-gradient(135deg,#063f87,#0d6efd)}
.food-cover{background:linear-gradient(135deg,#a87400,#f6b400)}

.formation-body{
  padding:24px;
}

.formation-body h3{
  color:var(--navy);
  font-size:1.28rem;
  font-weight:950;
  margin-bottom:10px;
}

.formation-body h4{
  color:var(--navy);
  font-size:.92rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:18px;
}

.formation-body ul{
  padding-left:18px;
  color:var(--muted);
  font-weight:780;
}

.formation-body li+li{
  margin-top:5px;
}

.formation-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.formation-meta span{
  padding:8px 11px;
  border-radius:999px;
  background:#f4f9fc;
  border:1px solid var(--border);
  color:var(--navy);
  font-weight:850;
  font-size:.78rem;
}

@media(max-width:1199px){
  .formation-dashboard{
    grid-template-columns:1fr;
  }
  .formation-sidebar{
    position:static;
  }
  .formation-sidebar{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .sidebar-title{
    grid-column:1/-1;
  }
}

@media(max-width:767px){
  .formation-grid{
    grid-template-columns:1fr;
  }
  .formation-sidebar{
    grid-template-columns:1fr;
  }
  .formation-summary{
    display:block;
  }
}


/* =========================================================
   CI2J V7 - Semaine Découverte Numérique
   ========================================================= */

.event-top-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-left:1rem;
  padding:.72rem 1.05rem;
  border-radius:999px;
  background:linear-gradient(135deg,#f7941d,#ffd15a);
  color:#08223e!important;
  font-weight:950;
  box-shadow:0 12px 28px rgba(247,148,29,.22);
  white-space:nowrap;
}

.event-top-btn:hover{
  transform:translateY(-2px);
  color:#08223e!important;
}

.event-hero{
  padding:92px 0;
  background:
    radial-gradient(circle at 90% 8%,rgba(16,182,220,.13),transparent 28rem),
    linear-gradient(135deg,#ffffff 0%,#f2f9fd 55%,#e8f7fc 100%);
  border-bottom:1px solid var(--border);
}

.event-hero h1{
  color:var(--navy);
}

.event-hero .hero-text{
  color:var(--muted)!important;
}

.event-highlight{
  display:grid;
  gap:10px;
  margin:24px 0;
}

.event-highlight span{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid var(--border);
  color:var(--navy);
  font-weight:900;
  box-shadow:0 10px 28px rgba(6,47,96,.07);
}

.event-highlight i{
  color:var(--cyan);
}

.event-visual-main{
  padding:12px;
  border-radius:34px;
  background:#ffffff;
  border:1px solid var(--border);
  box-shadow:0 28px 80px rgba(6,47,96,.14);
}

.event-visual-main img{
  width:100%;
  max-height:680px;
  object-fit:cover;
  object-position:center top;
  border-radius:24px;
  display:block;
}

.event-card{
  border-top:5px solid var(--cyan);
}

.event-registration{
  display:grid;
  gap:22px;
}

.event-form-section{
  border:0;
  padding:0;
  margin:0;
}

.event-form-section legend{
  width:100%;
  padding:16px 18px;
  background:var(--navy);
  color:#ffffff;
  border-radius:18px;
  font-weight:950;
  margin-bottom:18px;
}

.event-form-section label{
  width:100%;
  color:var(--navy);
  font-weight:900;
}

.final-message{
  padding:18px;
  border-radius:20px;
  background:#eefaff;
  border:1px solid var(--border);
}

.final-message strong{
  display:block;
  color:var(--navy);
  font-weight:950;
  margin-bottom:5px;
}

.final-message p{
  margin:0;
}

@media(max-width:1199px){
  .event-top-btn{
    order:3;
    margin:10px 0 0;
  }
}

@media(max-width:767px){
  .event-hero{
    padding:60px 0;
  }
  .event-top-btn{
    width:100%;
    justify-content:center;
  }
}


/* =========================================================
   CI2J V8 - Inscription professionnelle optimisée
   ========================================================= */

.inscription-hero-pro{
  background:
    radial-gradient(circle at 90% 10%, rgba(16,182,220,.12), transparent 26rem),
    linear-gradient(135deg,#ffffff 0%,#f4fbfe 60%,#e8f7fc 100%) !important;
}

.inscription-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.inscription-info-panel{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:32px;
  padding:32px;
  box-shadow:var(--shadow);
}

.inscription-info-panel h2{
  font-size:2rem;
  margin-bottom:18px;
}

.inscription-info-panel ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}

.inscription-info-panel li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--navy);
  font-weight:850;
}

.inscription-info-panel i{
  color:var(--green);
  margin-top:3px;
}

.inscription-section{
  background:linear-gradient(180deg,#eef7fb 0%,#ffffff 100%);
}

.registration-shell{
  display:grid;
  grid-template-columns:330px 1fr;
  gap:28px;
  align-items:start;
}

.registration-side{
  position:sticky;
  top:115px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:32px;
  padding:26px;
  box-shadow:var(--shadow);
}

.registration-side h2{
  font-size:2.1rem;
}

.registration-progress{
  margin:24px 0;
}

.progress-line{
  width:100%;
  height:10px;
  background:#e7f1f7;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:12px;
}

.progress-line span{
  display:block;
  width:14.28%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),#35c8e8);
  transition:.25s ease;
}

#progressText{
  color:var(--navy);
  font-weight:950;
}

.help-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:22px;
  background:#f0fbf6;
  border:1px solid rgba(47,168,79,.18);
}

.help-card i{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#25d366;
  color:white;
  font-size:1.4rem;
}

.help-card strong{
  display:block;
  color:var(--navy);
}

.help-card a{
  color:#168947;
  font-weight:900;
}

.registration-pro{
  padding:28px;
}

.pro-stepper{
  grid-template-columns:repeat(7,1fr);
  margin-bottom:28px;
}

.pro-stepper .step{
  min-height:58px;
}

.registration-pro .form-page legend{
  margin-bottom:24px;
}

.registration-pro label{
  width:100%;
  color:var(--navy);
  font-weight:900;
}

.registration-pro input,
.registration-pro select,
.registration-pro textarea{
  background:#ffffff;
  border:1px solid rgba(6,47,96,.14);
  transition:.2s ease;
}

.registration-pro input:focus,
.registration-pro select:focus,
.registration-pro textarea:focus{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(16,182,220,.12);
}

.field-help{
  margin-bottom:14px;
}

.module-selector{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.module-selector label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 14px;
  border-radius:18px;
  background:#f8fcff;
  border:1px solid var(--border);
  cursor:pointer;
  transition:.2s ease;
}

.module-selector label:hover{
  background:#eefaff;
  border-color:rgba(16,182,220,.35);
}

.module-selector input{
  width:auto;
}

.consent-check{
  display:flex!important;
  align-items:flex-start;
  gap:10px;
  padding:12px 0;
}

.consent-check input{
  width:auto;
  margin-top:6px;
}

.honeypot{
  position:absolute!important;
  left:-9999px!important;
  opacity:0!important;
  pointer-events:none!important;
}

.registration-pro .form-actions{
  position:sticky;
  bottom:0;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-radius:22px;
  padding:18px 0 0;
}

.registration-pro .form-page.has-error legend{
  background:#b42318;
}

@media(max-width:1199px){
  .registration-shell{
    grid-template-columns:1fr;
  }
  .registration-side{
    position:static;
  }
  .pro-stepper{
    grid-template-columns:repeat(3,1fr);
  }
  .module-selector{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:767px){
  .registration-pro,
  .registration-side,
  .inscription-info-panel{
    padding:20px;
    border-radius:24px;
  }
  .pro-stepper,
  .module-selector{
    grid-template-columns:1fr;
  }
  .registration-pro .form-actions{
    position:static;
  }
}


/* =========================================================
   CI2J V9 - Professional WhatsApp floating contact button
   ========================================================= */

.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:24px;
  z-index:2000;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-radius:999px;
  background:#25d366;
  color:#ffffff!important;
  font-weight:950;
  box-shadow:0 18px 42px rgba(37,211,102,.32);
  transition:.25s ease;
}

.whatsapp-float i{
  font-size:1.35rem;
}

.whatsapp-float:hover{
  transform:translateY(-4px);
  color:#ffffff!important;
  background:#1ebe5d;
}

.whatsapp-float::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border:2px solid rgba(37,211,102,.25);
  animation:ci2jWhatsappPulse 1.8s infinite;
}

@keyframes ci2jWhatsappPulse{
  0%{transform:scale(.92);opacity:.9}
  100%{transform:scale(1.18);opacity:0}
}

@media(max-width:767px){
  .whatsapp-float{
    right:14px;
    bottom:16px;
    padding:13px 15px;
  }
  .whatsapp-float span{
    display:none;
  }
}


/* =========================================================
   CI2J V10 - Professional email usage section
   ========================================================= */

.topline__inner{
  align-items:center;
}

.topline__inner a,
.topline__inner span{
  white-space:nowrap;
}

.email-usage-section{
  background:
    radial-gradient(circle at top right, rgba(16,182,220,.10), transparent 28rem),
    linear-gradient(180deg,#ffffff 0%,#f4f9fc 100%);
}

.email-service-card{
  height:100%;
  padding:30px;
  border-radius:32px;
  background:#ffffff;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.email-service-card::before{
  content:"";
  position:absolute;
  right:-80px;
  top:-80px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(16,182,220,.10);
}

.email-service-card--dark{
  background:linear-gradient(135deg,var(--navy),#075987);
  color:#ffffff;
}

.email-card-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:#eaf9fd;
  color:var(--cyan);
  font-size:1.8rem;
  margin-bottom:18px;
  position:relative;
  z-index:1;
}

.email-service-card--dark .email-card-icon{
  background:rgba(255,255,255,.14);
  color:#ffffff;
}

.email-label{
  display:inline-block;
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  font-weight:950;
  margin-bottom:10px;
  position:relative;
  z-index:1;
}

.email-service-card--dark .email-label{
  color:#8eeaff;
}

.email-service-card h3{
  position:relative;
  z-index:1;
  font-size:1.65rem;
  margin-bottom:12px;
}

.email-service-card h3 a{
  color:var(--navy);
  font-weight:950;
}

.email-service-card--dark h3 a{
  color:#ffffff;
}

.email-service-card p{
  position:relative;
  z-index:1;
}

.email-service-card--dark p{
  color:rgba(255,255,255,.78);
}

.email-use-grid{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.email-use-grid span{
  padding:9px 12px;
  border-radius:999px;
  background:#f4f9fc;
  border:1px solid var(--border);
  color:var(--navy);
  font-size:.84rem;
  font-weight:850;
}

.email-service-card--dark .email-use-grid span{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
  color:#ffffff;
}

@media(max-width:991px){
  .topline__inner{
    align-items:flex-start;
  }
}