:root{
      --bg:#f7f4ef;
      --paper:#fffdf9;
      --ink:#14255c;
      --purple:#4b2587;
      --magenta:#b51f6f;
      --cyan:#1ba8b8;
      --red:#e34335;
      --muted:#667085;
      --line:#e8e1eb;
      --shadow:0 18px 45px rgba(45,29,78,.08);
      --radius:24px;
      --radius-sm:16px;
      --max:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:
        radial-gradient(circle at 10% 10%, rgba(181,31,111,.08), transparent 26%),
        radial-gradient(circle at 95% 15%, rgba(27,168,184,.08), transparent 28%),
        var(--bg);
      color:var(--ink);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height:1.5;
    }
    a{color:inherit;text-decoration:none}
    button,input,select{font:inherit}
    .wrap{max-width:var(--max);margin:auto;padding:0 24px}
    .topbar{
      position:sticky;top:0;z-index:20;
      background:rgba(247,244,239,.92);
      backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(75,37,135,.08);
    }
    .topbar-inner{
      min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px
    }
    .brand{display:flex;align-items:center;gap:14px;font-weight:900;letter-spacing:.02em}
    .brand-mark{display:flex;gap:5px;align-items:flex-end}
    .brand-mark i{display:block;width:7px;border-radius:99px;transform:rotate(-48deg)}
    .brand-mark i:nth-child(1){height:29px;background:var(--purple)}
    .brand-mark i:nth-child(2){height:23px;background:var(--cyan)}
    .brand-mark i:nth-child(3){height:17px;background:var(--red)}
    nav{display:flex;gap:8px;flex-wrap:wrap}
    nav a{padding:9px 12px;border-radius:999px;font-size:.9rem;font-weight:700;color:#415070}
    nav a:hover{background:#fff}
    .hero{padding:72px 0 44px}
    .hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:32px;align-items:stretch}
    .eyebrow{font-size:.78rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--magenta)}
    h1{font-size:clamp(2.8rem,6vw,5.7rem);line-height:.92;margin:.25em 0 .3em;letter-spacing:-.055em;text-transform:uppercase}
    h1 span{color:var(--magenta)}
    .hero p{font-size:1.12rem;max-width:720px;color:#46516e}
    .hero-card{
      background:linear-gradient(145deg,var(--purple),var(--magenta));
      color:#fff;border-radius:32px;padding:30px;position:relative;overflow:hidden;box-shadow:var(--shadow)
    }
    .hero-card:after{
      content:"";position:absolute;right:-50px;bottom:-70px;width:230px;height:230px;border:1px solid rgba(255,255,255,.28);border-radius:50%
    }
    .hero-card h2{margin:0 0 10px;font-size:1.6rem}
    .hero-card p{color:rgba(255,255,255,.82);font-size:.98rem}
    .hero-actions{display:grid;gap:10px;margin-top:22px;position:relative;z-index:1}
    .hero-actions a{background:#fff;color:var(--purple);padding:13px 15px;border-radius:14px;font-weight:900;display:flex;justify-content:space-between}
    .quick{padding:16px 0 34px}
    .quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .quick-card{
      background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;
      transition:.2s ease;box-shadow:0 8px 20px rgba(25,28,50,.03)
    }
    .quick-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    .quick-card b{display:block;margin-bottom:5px}
    .quick-card small{color:var(--muted)}
    .dot{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:8px}
    section{padding:42px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}
    .section-head h2{font-size:2rem;margin:0;letter-spacing:-.03em}
    .section-head p{margin:0;color:var(--muted);max-width:630px}
    .panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
    .directory-tools{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:18px;border-bottom:1px solid var(--line)}
    .search,.select{
      border:1px solid #ded7e6;background:#fff;border-radius:14px;padding:13px 15px;color:var(--ink);outline:none
    }
    .search:focus,.select:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(75,37,135,.08)}
    .directory{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:18px}
    .person{
      border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;background:#fff
    }
    .avatar{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-weight:900;color:#fff}
    .person h3{margin:0;font-size:1rem}
    .person p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
    .tag{font-size:.72rem;font-weight:800;border-radius:999px;padding:7px 9px;background:#f4eff8;color:var(--purple);white-space:nowrap}
    .partners{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .partner{
      min-height:150px;padding:20px;border-radius:20px;background:#fff;border:1px solid var(--line);
      display:flex;flex-direction:column;justify-content:space-between
    }
    .partner b{font-size:1.08rem}.partner span{font-size:.9rem;color:var(--muted)}
    .projects-tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
    .chip{
      border:1px solid var(--line);background:#fff;color:#4b5570;border-radius:999px;padding:9px 13px;font-weight:800;cursor:pointer
    }
    .chip.active{background:var(--purple);color:#fff;border-color:var(--purple)}
    .projects{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .project{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}
    .project-top{height:8px;border-radius:99px;margin:-20px -20px 16px}
    .project h3{margin:0 0 6px}.project p{color:var(--muted);font-size:.92rem}
    .project footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:.78rem;font-weight:800}
    .docs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .doc{
      background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px;min-height:190px
    }
    .doc strong{font-size:1.15rem}
    .doc p{color:var(--muted);font-size:.9rem;margin:0}
    .doc a{margin-top:auto;display:inline-flex;justify-content:center;padding:12px;border-radius:12px;background:#f5f1f8;color:var(--purple);font-weight:900}
    .contact-band{
      display:grid;grid-template-columns:1.2fr .8fr;gap:18px;background:linear-gradient(120deg,#24165f,#6c2a9a 58%,#b51f6f);
      color:#fff;padding:28px;border-radius:28px
    }
    .contact-band p{color:rgba(255,255,255,.8)}
    .contact-list{display:grid;gap:9px}
    .contact-pill{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);padding:12px 14px;border-radius:14px}
    footer.site{padding:28px 0 44px;color:#667085;font-size:.88rem}
    .empty{padding:28px;color:var(--muted);text-align:center;display:none}
    @media(max-width:900px){
      .hero-grid,.contact-band{grid-template-columns:1fr}
      .quick-grid,.partners,.projects,.docs{grid-template-columns:repeat(2,1fr)}
      .directory{grid-template-columns:1fr}
      nav{display:none}
    }
    @media(max-width:620px){
      .quick-grid,.partners,.projects,.docs{grid-template-columns:1fr}
      .directory-tools{grid-template-columns:1fr}
      .person{grid-template-columns:48px 1fr}.person .tag{grid-column:2}
      h1{font-size:3rem}
    }
  
    .directory-tools-live{grid-template-columns:minmax(0,1fr) minmax(220px,auto) auto}
    .directory-meta{padding:14px 18px 0;display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--muted);font-size:.86rem}
    .directory-meta strong{color:var(--ink);font-size:.95rem}
    .reset-button{border:1px solid #ded7e6;background:#fff;color:var(--purple);border-radius:14px;padding:13px 15px;font-weight:900;cursor:pointer}
    .reset-button:hover{background:#f5f1f8}
    .person{align-items:start}
    .person-main{min-width:0}
    .person-function{font-weight:700;color:#4b5570!important}
    .person-contact{overflow-wrap:anywhere}
    .contact-link{color:var(--purple);font-weight:750}
    .contact-link:hover{text-decoration:underline}
    .contact-missing{color:#98a0b3;font-style:italic}
    @media(max-width:620px){
      .directory-tools-live{grid-template-columns:1fr}
      .directory-meta{align-items:flex-start;flex-direction:column;gap:2px}
    }

  
    /* Annuaire : zone autonome pour éviter d'allonger démesurément la page */
    #directory{
      max-height:620px;
      overflow-y:auto;
      overscroll-behavior:contain;
      scrollbar-gutter:stable;
      padding-right:8px;
      margin-top:8px;
    }
    #directory::-webkit-scrollbar{width:10px}
    #directory::-webkit-scrollbar-track{background:#f1edf4;border-radius:999px}
    #directory::-webkit-scrollbar-thumb{background:#c7b8d5;border-radius:999px;border:2px solid #f1edf4}
    #directory::-webkit-scrollbar-thumb:hover{background:#a994bb}
    .directory-tools-live{
      position:sticky;
      top:0;
      z-index:5;
      background:#fff;
      border-bottom:1px solid #eee8f2;
    }
    @media(max-width:700px){
      #directory{max-height:68vh;padding-right:4px}
    }

  
    /* Mobile : titres et textes d'introduction se suivent naturellement */
    @media (max-width: 760px) {
      .section-head,
      .section-header,
      .section-intro,
      .projects-header,
      .partners-header {
        display: block !important;
        grid-template-columns: 1fr !important;
      }
      .section-head > *,
      .section-header > *,
      .section-intro > *,
      .projects-header > *,
      .partners-header > * {
        width: 100% !important;
        max-width: none !important;
      }
      .section-head h2,
      .section-header h2,
      .section-intro h2,
      .projects-header h2,
      .partners-header h2 {
        margin-bottom: 12px !important;
      }
      .section-head p,
      .section-header p,
      .section-intro p,
      .projects-header p,
      .partners-header p {
        margin-top: 0 !important;
      }
    }

  
    /* Projets */
    #projectFilters{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:18px;
    }
    #projectFilters .chip{
      white-space:normal;
      text-align:left;
      line-height:1.2;
    }
    #projectsGrid{
      align-items:stretch;
    }
    #projectsGrid .project{
      display:flex;
      flex-direction:column;
      min-width:0;
    }
    #projectsGrid .project p{
      flex:1;
    }
    #projectsGrid .project footer{
      gap:12px;
      align-items:flex-end;
    }
    #projectsGrid .project footer span{
      max-width:68%;
      line-height:1.25;
    }
    #projectsGrid .project footer a{
      white-space:nowrap;
    }

    @media(max-width:760px){
      #projectFilters{
        gap:8px;
      }
      #projectFilters .chip{
        width:auto;
        max-width:100%;
        padding:9px 12px;
      }
      #projectsGrid{
        grid-template-columns:1fr !important;
      }
      #projectsGrid .project footer{
        align-items:flex-start;
      }
      #projectsGrid .project footer span{
        max-width:65%;
      }
    }

  
    /* Annuaire : coordonnées sur deux lignes distinctes */
    .person-contact,
    .contact-details,
    .contact-line {
      line-height: 1.45;
    }
    .contact-email,
    .contact-phone {
      display: block !important;
    }
    .contact-phone {
      white-space: nowrap !important;
      word-break: keep-all !important;
      overflow-wrap: normal !important;
    }

  
    .person-contact a[href^="tel:"]{
      white-space:nowrap;
      display:inline-block;
    }

/* Pages projets */
.project-page-hero{padding:72px 0 32px}
.project-page-hero h1{font-size:clamp(2.5rem,6vw,5rem);margin:.2em 0 .25em}
.project-page-summary{font-size:1.15rem;color:#46516e;max-width:780px}
.project-page-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.project-copy,.project-aside,.gallery-placeholder{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.project-copy h2,.project-aside h2{margin-top:0}
.project-aside{position:sticky;top:96px}
.gallery-placeholder{min-height:220px;display:grid;place-items:center;text-align:center;color:var(--muted);border-style:dashed}
.back-link{display:inline-block;font-weight:800;color:var(--purple);margin-bottom:20px}
@media(max-width:800px){.project-page-body{grid-template-columns:1fr}.project-aside{position:static}}

/* ==========================================================
   HUB PRINCIPAL — cite-educative.com
   ========================================================== */
.hub-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.hub-main{
  flex:1;
  display:grid;
  align-items:center;
  padding:72px 0;
}
.hub-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(46px,8vw,96px);
  border-radius:32px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.hub-hero::after{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-150px;
  bottom:-190px;
  border-radius:50%;
  border:1px solid rgba(75,37,135,.18);
  box-shadow:0 0 0 46px rgba(181,31,111,.035),0 0 0 92px rgba(27,168,184,.025);
  pointer-events:none;
}
.hub-hero h1{
  max-width:900px;
  margin:.25em 0 .3em;
}
.hub-hero p{
  max-width:680px;
  margin:0;
  color:#46516e;
  font-size:1.08rem;
}
.hub-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:28px;
  padding:10px 13px;
  border-radius:999px;
  background:#f5f1f8;
  color:var(--purple);
  font-size:.82rem;
  font-weight:800;
}
.hub-status::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
}
@media(max-width:620px){
  .hub-main{padding:32px 0}
  .hub-hero{padding:32px 24px;border-radius:24px}
}

/* HUB DES CITÉS ÉDUCATIVES */

.hub-main {
  min-height: calc(100vh - 72px);
}

.hub-hero {
  padding: 110px 0 80px;
}

.hub-hero h1 {
  max-width: 1050px;
  margin-top: 24px;
  margin-bottom: 32px;
}

.hub-hero p {
  max-width: 680px;
  margin: 0;
  font-size: 1.1rem;
  color: var(--muted);
}

.hero-magenta {
  color: var(--magenta);
}

.hero-cyan {
  color: var(--cyan);
}

.hub-search {
  padding: 50px 0 100px;
}

.hub-search-panel {
  max-width: 760px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.hub-search-panel label {
  display: block;
  margin-bottom: 10px;
  font-weight: 900;
  color: var(--ink);
}

#departementSearch {
  width: 100%;
  border: 1px solid #ded7e6;
  background: #fff;
  border-radius: 14px;
  padding: 15px 16px;
  color: var(--ink);
  outline: none;
}

#departementSearch:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(75, 37, 135, .08);
}

.city-results {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.city-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  padding: 18px 20px;

  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;

  transition: .2s ease;
}

.city-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(75, 37, 135, .25);
}

.city-card h2 {
  margin: 4px 0;
  font-size: 1.2rem;
}

.city-card p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.city-department {
  font-size: .75rem;
  font-weight: 900;
  color: var(--magenta);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.city-arrow {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--purple);
}

.city-empty {
  display: none;
  margin-top: 18px;
  padding: 18px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 14px;
}

@media (max-width: 620px) {
  .hub-hero {
    padding-top: 50px;
  }

  .hub-search-panel {
    padding: 20px;
  }

  .city-card {
    align-items: flex-start;
  }
}