/*
Theme Name: CampusConnects v2
Theme URI: https://campusconnects.pro
Author: CampusConnects
Author URI: https://campusconnects.pro
Description: Thème WordPress moderne (FR) pour CampusConnects – landing page + blog, animations AOS, Alpine.js, CTA "Nous contacter".
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: campusconnects
*/

:root {
  --cc-bg: #0f172a;
  --cc-surface:#ffffff;
  --cc-primary:#6d28d9;
  --cc-primary-2:#3b82f6;
  --cc-accent:#f59e0b;
  --cc-text:#0b1221;
  --cc-muted:#6b7280;
  --radius: 20px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
/* body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans; color:var(--cc-text); line-height:1.6; background:#f8fafc; } */
body {
  font-family: var(--font-sans);
}
a { color: var(--cc-primary); text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
img { max-width: 100%; height:auto; display:block; }

html { scroll-behavior: smooth; }

.container { width: min(1150px, 92%); margin-inline: auto; }
.section { padding: clamp(2.5rem, 6vw, 5rem) 0; }

.card { background:var(--cc-surface); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(2,6,23,0.06); padding:1.25rem; }
.grid { display:grid; gap:1.25rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items:center; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.badge { display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border-radius: 999px; background: rgba(109,40,217,.12); color:#5b21b6; font-weight:700; font-size:.9rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.2rem; border-radius: 14px; background: linear-gradient(90deg, var(--cc-primary), var(--cc-primary-2)); color:#fff; font-weight:700; border:none; }
.btn--ghost { background: transparent; border: 2px solid rgba(109,40,217,.25); color: var(--cc-primary); }
.btn--cta { background: linear-gradient(90deg, var(--cc-accent), #f97316); color:#111827; }

/* Header */
.site-header { position: sticky; top:0; z-index: 50; background: rgba(255,255,255,.85); border-bottom:1px solid rgba(2,6,23,.06); backdrop-filter: blur(10px) saturate(1.2); }
.navbar { display:flex; align-items:center; justify-content:space-between; padding:.85rem 0; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.1rem; }
.menu { display:flex; align-items:center; gap:1.2rem; }
.menu a { font-weight:600; color:#111827; }
.menu .cta { margin-left:.5rem; }

/* Hero */
.hero {
  position:relative; min-height: 78vh; display:grid; place-items:center;
  background: linear-gradient(40deg, rgba(109,40,217,0.08) 0%, rgba(59,130,246,0.08) 50%, rgba(245,158,11,0.06) 100%);
  overflow:hidden;
}
.hero::before {
  content:""; position:absolute; inset:0;
  background: none;
  filter: saturate(1.05) contrast(1.05) brightness(.95);
  z-index: -2;
}
.hero::after {
  content:""; position:absolute; inset:0;
  background: none;
  z-index: -1;
}
.hero-inner { color:#111827; text-align:left; width:min(1100px, 92%); padding: clamp(2rem, 5vw, 4rem) 0; }
.hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height:1.05; letter-spacing:-.02em; margin:.6rem 0 1rem 0;}
.hero p { font-size: clamp(1.05rem, 2.2vw, 1.25rem); opacity:.95; max-width: 70ch; }

/* Sections */
.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .6rem 0; }
.section-sub { color: var(--cc-muted); margin: 0 0 1.2rem 0; }
.icon { width: 24px; height: 24px; }

/* Footer */
.site-footer { background:#0b1022; color:#dbe2ff; padding:3rem 0; }
.site-footer a { color:#c7baff; }
.socials { display:flex; gap:.8rem; margin-top:.6rem; }
.socials a { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(203,213,225,.12); }

/* Utilities */
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.85em; border-radius:.5rem; border:1px solid #e5e7eb; padding:.15rem .4rem; background:#f8fafc;}
.shimmer { position:relative; overflow:hidden; }
.shimmer::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%); transform:skewX(-20deg) translateX(-120%); }
.shimmer:hover::after { animation: shine 1s forwards; }
@keyframes shine { to { transform:skewX(-20deg) translateX(120%); } }

/* Feature cards */
.feature-card { 
  display:block; 
  padding: 1.25rem; 
  border-radius: var(--radius); 
  border:1px solid rgba(2,6,23,0.06);
  background: var(--cc-surface);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 24px 50px rgba(2,6,23,0.08);
  border-color: rgba(2,6,23,0.12);
}
.feature-icon { 
  width:44px; height:44px; 
  border-radius:12px; 
  display:grid; place-items:center; 
  background: rgba(109,40,217,.08); 
  color: var(--cc-primary);
  border:1px solid rgba(109,40,217,.14);
}
.feature-card h3 { margin:.75rem 0 .4rem 0; }
.feature-card p { margin:0; color: var(--cc-muted); }

/* Feature icon variants */
.feature-icon--violet { background: rgba(109,40,217,.08); color:#6d28d9; border-color: rgba(109,40,217,.14); }
.feature-icon--blue { background: rgba(59,130,246,.08); color:#3b82f6; border-color: rgba(59,130,246,.14); }
.feature-icon--amber { background: rgba(245,158,11,.10); color:#f59e0b; border-color: rgba(245,158,11,.18); }
.feature-icon--emerald { background: rgba(16,185,129,.10); color:#10b981; border-color: rgba(16,185,129,.18); }
.feature-icon--indigo { background: rgba(99,102,241,.10); color:#6366f1; border-color: rgba(99,102,241,.18); }
.feature-icon--rose { background: rgba(244,63,94,.10); color:#f43f5e; border-color: rgba(244,63,94,.18); }

/* Header responsive */
.burger { display:none; width:42px; height:42px; border-radius:12px; background:rgba(2,6,23,.04); border:1px solid rgba(2,6,23,.08); align-items:center; justify-content:center; gap:4px; }
.burger span { display:block; width:18px; height:2px; background:#111827; border-radius:2px; }
.nav-overlay { position:fixed; inset:0; background:rgba(2,6,23,.45); z-index:40; display:none; height: 100vh; }
#site-drawer {align-items:center; gap:1.2rem; }
@media (max-width: 980px) {
  .burger { display:inline-flex; }
  #site-drawer { position: fixed; inset: 0 0 0 auto; width: 78%; max-width:340px; height:100vh; background:#ffffff; border-left:1px solid rgba(2,6,23,.08); box-shadow:-20px 0 60px rgba(2,6,23,.12); padding:1rem; transform: translateX(110%); transition: transform .25s ease; z-index:50; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:1rem; }
  #site-drawer.open { transform: translateX(0); }
  .nav-overlay { display:block; }
}

/* Showcase under hero */
.showcase-under-hero { position: relative; margin-top: -5rem; }
.showcase-under-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: min(920px, 92%);
  height: 160px;
  background:
    radial-gradient(35% 60% at 30% 50%, rgba(109,40,217,.18), transparent 70%),
    radial-gradient(35% 60% at 70% 50%, rgba(59,130,246,.18), transparent 70%);
  filter: blur(28px) saturate(1.1);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}
.showcase-wrap { 
  width:min(1100px, 92%); margin: 0 auto; 
  display:flex; align-items:flex-end; justify-content:center; gap:1rem;
  transform: translateY(25%);
  position: relative; z-index: 1;
}
.showcase-card { 
  background: var(--cc-surface); border-radius: 16px; overflow:hidden; 
  box-shadow: none; border:1px solid rgba(2,6,23,.06);
}
.showcase-card img { display:block; width:auto; height: clamp(180px, 26vh, 280px); }
.showcase-card:nth-child(2) { transform: translateY(-10%); }
.showcase-card:nth-child(3) { transform: translateY(-20%); }
@media (max-width: 980px) {
  .showcase-under-hero { margin-top: -2rem; }
  .showcase-under-hero::before { width: 90%; height: 120px; filter: blur(22px); opacity:.5; }
  .showcase-wrap { transform: translateY(10%); gap:.75rem; }
  .showcase-card img { height: clamp(140px, 24vh, 220px); }
}

/* Mobile-only CTA and nav visibility */
.cta-mobile { display:none !important; }
/* @media (max-width: 980px) {
  .menu { display:none !important; }
  .burger { display:none !important; }
  .cta { display:none !important; }
  .cta-mobile { display:inline-flex !important; padding:.6rem .9rem; border-radius:12px; }
} */

/* Contact section */
.contact-card { 
  background: var(--cc-surface); border-radius: var(--radius); 
  border:1px solid rgba(2,6,23,.06); box-shadow: 0 18px 40px rgba(2,6,23,.06);
  padding: clamp(1rem, 3vw, 1.5rem);
}
.contact-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap:1.25rem; align-items:start; }
.contact-copy .section-title { margin-bottom:.5rem; }
.contact-points { margin:.5rem 0 0 0; padding-left:1.1rem; color: var(--cc-muted); }
.contact-points li { margin:.25rem 0; }
.contact-form { 
/* background:#ffffff;  */
border-radius:16px; 
border:1px solid rgba(2,6,23,.06); padding:1rem;
 }
.contact-note { font-size:.9rem; color:#6b7280; margin-top:.75rem; }
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* Team section */
.team-grid { display:grid; gap:1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-card { text-align:center; background: var(--cc-surface); border-radius: var(--radius); border:1px solid rgba(2,6,23,.06); padding:1rem; }
.team-avatar { display:grid; place-items:center; margin-bottom:.6rem; }
.team-avatar img, .avatar-fallback { width:96px; height:96px; border-radius:999px; object-fit:cover; background:#f1f5f9; border:1px solid rgba(2,6,23,.06); }
.team-name { margin:.4rem 0 .2rem 0; font-weight:700; }
.team-role { margin:0; color: var(--cc-muted); font-size:.95rem; }
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }

/* Team page */
.team-hero { padding: clamp(2.5rem, 6vw, 5rem) 0 0 0; }
.story { max-width: 70ch; }
.story p { margin: 0 0 1rem 0; }
.story h2, .story h3 { margin: 1.2rem 0 .5rem 0; }


.btn-purple {
  background-color: #6d28d9;
  color: #fff;
  transition: 0.3s;
}
.btn-purple:hover {
  background-color: #5b21b6;
  color: #fff;
}
.text-purple {
  color: #6d28d9 !important;
}
body{
  color: #43474c;
  /* background: linear-gradient(40deg, rgba(109, 40, 217, 0.08) 0%, rgba(59, 130, 246, 0.08) 50%, rgba(245, 158, 11, 0.06) 100%); */
}

#contact{
  /* background-image: linear-gradient(180deg, #f4f8fd 0%, #f7fafc 100%) !important; */
      background-image: linear-gradient(40deg, rgba(109, 40, 217, 0.08) 0%, rgba(59, 130, 246, 0.08) 50%, rgba(245, 158, 11, 0.06) 100%);
}
.top_inside_divider{
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI3MnB4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI0ZGRkZGRiI+PHBhdGggZD0iTTAgNTEuNzZjMzYuMjEtMi4yNSA3Ny41Ny0zLjU4IDEyNi40Mi0zLjU4IDMyMCAwIDMyMCA1NyA2NDAgNTcgMjcxLjE1IDAgMzEyLjU4LTQwLjkxIDUxMy41OC01My40VjBIMHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAyNC4zMWM0My40Ni01LjY5IDk0LjU2LTkuMjUgMTU4LjQyLTkuMjUgMzIwIDAgMzIwIDg5LjI0IDY0MCA4OS4yNCAyNTYuMTMgMCAzMDcuMjgtNTcuMTYgNDgxLjU4LTgwVjBIMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMCAwdjMuNEMyOC4yIDEuNiA1OS40LjU5IDk0LjQyLjU5YzMyMCAwIDMyMCA4NC4zIDY0MCA4NC4zIDI4NSAwIDMxNi4xNy02Ni44NSA1NDUuNTgtODEuNDlWMHoiLz48L2c+PC9zdmc+);
    background-size: 100% 72px;
    top: 0;
    height: 72px;
    z-index: 1;
    transform: scale(1, 1);
}
.bottom_inside_divider {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0xMjgwIDMuNEMxMDUwLjU5IDE4IDEwMTkuNCA4NC44OSA3MzQuNDIgODQuODljLTMyMCAwLTMyMC04NC4zLTY0MC04NC4zQzU5LjQuNTkgMjguMiAxLjYgMCAzLjRWMTQwaDEyODB6IiBmaWxsLW9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTAgMjQuMzFjNDMuNDYtNS42OSA5NC41Ni05LjI1IDE1OC40Mi05LjI1IDMyMCAwIDMyMCA4OS4yNCA2NDAgODkuMjQgMjU2LjEzIDAgMzA3LjI4LTU3LjE2IDQ4MS41OC04MFYxNDBIMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMTI4MCA1MS43NmMtMjAxIDEyLjQ5LTI0Mi40MyA1My40LTUxMy41OCA1My40LTMyMCAwLTMyMC01Ny02NDAtNTctNDguODUuMDEtOTAuMjEgMS4zNS0xMjYuNDIgMy42VjE0MGgxMjgweiIvPjwvZz48L3N2Zz4=);
    background-size: 100% 100px;
    bottom: 0;
    height: 100px;
    z-index: 1;
    transform: scale(-1, 1);
    position: absolute;
    width: 100%;
}
#blog{
  background-color: white;
}
#accueil{
      background-image: linear-gradient(93deg, #ffffff 0em, #dce4fb 92em) !important;
}

.section_0{
    background-image: linear-gradient(93deg, #ffffff 0em, #dce4fb 92em) !important;
}

.st11{
  fill: #b387d0 !important;
}

.st4{
  fill: #440370 !important;
}
.st0 {
    fill: #807ead !important;
}

.st5,.st8{
  fill: #f3f7f9 !important;;
}

.st1{
  fill:#edd3ff !important;;
}
.st10 {
    fill: #edd3ff !important;;
}
.st0 { fill: #2f2e41; } 
.st1 { fill: #fff; } 
.st2 { fill: #ffb6b6; } 
.st13 { fill: #5e3f10; } 

.st16 { fill: #3f3d56; } 
.st7 { fill: #f2f2f2; } 
.st8 { fill: #efeeee; }
 .st9 { isolation: isolate; opacity: .2; } 
 .st10 { fill: #ebebeb; } 
 .st11 { fill: #e6e6e6; }

 .st26,.st25,.st23{
  fill: #edd3ff;
 }

 .st20{
  fill: #f6fbff;
 }

.st21{
  fill: #440370;
}

 .st38{
  fill: #b387d0;
}
.st33{
  fill:#440370;
}
.st32{
  fill: #f3f7f9;
}


.pourquoi-container,.bg-primary{
  background-image: linear-gradient(93deg, #ffffff 0em, #dce4fb 92em) !important;
}

.menu li a {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  /* color: #333; */
  text-decoration: none;
  padding: 0.5rem 0;
  transition: all 0.2s ease;
  position: relative;
}

/* Effet moderne au hover : soulignement animé */
.menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: #586a94; /* bleu moderne */
  transition: width 0.3s ease;
}

.menu li a:hover {
  color: #586a94;
}

.menu li a:hover::after {
  width: 100%;
}
.pointer{
  cursor: pointer;
}

.contact-form .success {
  color: green;
  font-weight: bold;
  margin-bottom: 1rem;
}
.contact-form .error {
  color: rgb(197, 56, 56);
  font-weight: bold;
  margin-bottom: 1rem;
}