:root {
  --violet:#9681fa; 
  --violet-d:#7a65e9; 
  --text:#2a2a2a;
  --muted:#5f6b7a;
  --card:#ffffff;
  --bg:#f8fafc;
  --ring: 0 12px 40px rgba(139,92,246,.18);
  --nav-h: 64px; 
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 6vw, 80px); } /*---putting a norme for container size---*/
.section  { padding: clamp(56px, 8vw, 96px) 0; }
html { scroll-behavior: smooth; }


@font-face {
  font-family: 'MoreSugar';
  src: url('Font/MoreSugar-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/*---NavBar---*/

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 6%;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.3rem;
  color: #8b5cf6; /* ton violet -- logo sur la navbar a gauche */
}

.navbar-logo img {
  width: 42px;
  height: auto;
}

.navbar-links {
  display: flex;
  gap: 2rem;
}

.navbar-links a {
  text-decoration: none;
  font-weight: 500;
  color: #374151; /* gris foncé */
  transition: color .2s ease;
}

.navbar-links a:hover {
  color: #7C4DFF; /* violet en hover */
}
/* --- bouton hamburger --- */
.menu-toggle {
  display: none; /* caché sur desktop */
  border: none;
  background: transparent;
  cursor: pointer;
}

.menu-toggle .bar {
  display: block;
  width: 24px;
  height: 2px;
  background: #374151;
  margin: 5px 0;
}

/* --- mobile --- */
@media (max-width: 768px) {
  .menu-toggle {
    display: block; /* visible sur mobile */
  }

  .navbar-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    display: grid;
    gap: 1rem;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, padding .25s ease;
  }

  .navbar-links a {
    padding: 0.9rem 6%;
  }

  .navbar-links.is-open {
    padding: 1rem 0;
    max-height: 60vh; /* ouvert */
  }
}


/*---hero---*/
/* HERO plein écran, en tenant compte de la navbar sticky */
.hero {
  position: relative;                  /* pour le ::after */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: space-between;

  /* occupe la fenêtre visible – mobile-safe */
  height: calc(100dvh - var(--nav-h)); /* desktop & Android */
  min-height: calc(100svh - var(--nav-h)); /* iOS Safari safe */
  box-sizing: border-box;

  padding: min(6vh, 5rem) clamp(24px, 6vw, 96px);
  background:
    radial-gradient(1200px 600px at 20% 40%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, #8a6bff 0%, #7b5af7 55%, #c6e3a8 120%);
  color: #fff;
  overflow: hidden;
}

/* ton bruit reste bien attaché à la hero */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><filter id="n"><feTurbulence baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.025"/></svg>');
  pointer-events:none;
}

.hero-content {
  max-width: 45%;
}

.hero h1 {
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-family: 'Poppins', sans-serif; /* s’adapte à la taille de l’écran */
  line-height: 1.05;                  /* texte plus compact, impact visuel */
  letter-spacing: -0.02em;            /* resserre légèrement les lettres */
  font-weight: 700; 
  margin-top: 0;                      /* gras */
  margin-bottom: 1rem;                /* espace sous le titre */
}

.hero .lead {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem); /* texte fluide selon écran */
  opacity: 0.9;                            /* un peu plus doux */
  max-width: 56ch;                         /* limite la largeur pour lisibilité */
  margin-bottom: 2rem;                     /* espace avant les boutons */
}


.hero p {
  font-size: 1.2rem;
  font-family: 'Poppins', sans-serif; 
  margin-bottom: 2rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  cursor: pointer;
}

.hero-visual {
  position: relative;
  display: inline-block;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: -8% -6% auto -6%;   /* zone du glow plus large que l'image */
  height: 100%;
  background: radial-gradient(
    40% 60% at 70% 30%,
    rgba(124, 77, 255, 0.35), /* violet doux */
    rgba(79, 195, 247, 0.25), /* bleu clair subtil */
    transparent 80%
  );
  filter: blur(50px);
  z-index: -1; /* derrière l'image */
}

/* .hero-visual img {
  width: 700px;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-visual:hover img {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.25); 
}
*/ /* un peu plus fort au hover */
.hero-icon {
  width: 350px;            /* taille que tu aimes */
  margin-bottom: 1.5rem;   /* rapproche du h1, mais garde un peu de respiration */
  display: block;
}


/* variante bouton outline */
.g-btn-outline {
  border-radius: 9999px;
  padding: .75rem 1rem;

  font-family: poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 600;
  background: transparent;
  color: white;
  border: 2px solid white;
  transition: all .2s ease;
  cursor: pointer;
}
.g-btn-outline:hover {
  background: rgba(255,255,255,.15);
}
.btn-primary{ background:#6a3ef5; color:#fff; border-radius:9999px; padding:.9rem 1.2rem; font-weight:700;
              box-shadow:0 10px 24px rgba(106,62,245,.28); transition:transform .15s, box-shadow .15s, filter .15s; }
.btn-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 16px 36px rgba(106,62,245,.33); }
.btn-ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.85); border-radius:9999px; padding:.85rem 1.15rem; }
.cta-note{ margin-top:.6rem; font-size:.9rem; opacity:.85; }


/* Optional: tidy title */
.hero h1{
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

/* Text column can breathe without being too wide */
.hero-content{ max-width: 640px; }

/* ========= CHAT COLUMN ========= */
.hero-visual{
  position: relative;
  display: flex;                 /* stretch to fill the column */
  justify-content: flex-end;     /* push card to the right edge */
  width: 100%;
}

/* Soft glow behind the chat */
.hero-visual::before{
  content:"";
  position:absolute;
  inset:-8% -6% auto -6%;
  height:100%;
  background: radial-gradient(40% 60% at 70% 30%,
              rgba(124,77,255,.35), rgba(79,195,247,.20), transparent 80%);
  filter: blur(50px);
  z-index:-1;
}

/* Hover lift on the whole card */
.hero-visual .chat-card{
  max-height: clamp(420px, 64vh, 680px); /* garde la largeur d’avant, contrôle la hauteur */
  overflow-y: auto;
}
.hero-visual:hover .chat-card{
  transform: translateY(-2px);
  box-shadow: 0 40px 80px rgba(18,21,31,.30);
}

/* ========= CHAT CARD & CONTENT ========= */
.chat-card {
  width: 100%;
  max-width: clamp(520px, 48vw, 640px); /* largeur d'origine */
  /* max-height: 700px;*/      /* limite la hauteur de la démo */
  overflow-y: auto;        /* scroll vertical si contenu trop grand */
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(18,21,31,.18);
  border: 1px solid rgba(124,77,255,.10);
}

/* Version mobile */
@media (max-width: 960px){
  .hero{
    grid-template-columns: 1fr;
    text-align: center;
    padding: 3rem 5%;
  }
  .hero-visual{ justify-content:center; margin-top: 1rem; }
  .chat-card{ max-width: min(92vw, 560px); }
}


/* Header */
.chat-header{
  display:flex; align-items:center; gap:.6rem;
  padding: .8rem 1rem;
  background: linear-gradient(135deg,#7C4DFF 0%,#5A33E6 70%);
  color:#fff; font-weight:700;
}
.chat-logo{ width:22px; height:22px; filter: drop-shadow(0 0 2px rgba(0,0,0,.15)); }

/* Body */
.chat-body{ padding: 14px 14px 16px; background:#f8faff; }
.msg{ display:flex; align-items:flex-start; gap:.6rem; margin: .6rem 0; }
.msg .avatar{
  width:34px; height:34px; border-radius:50%; flex:0 0 34px;
  display:flex; align-items:center; justify-content:center;
  background:#ede9fe; color:#5a33e6; font-weight:700;
  overflow:hidden;
}
.msg .avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }

.bubble{
  max-width: 420px; padding: .7rem .9rem; border-radius: 14px;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 6px 16px rgba(16,24,40,.08);
  background:#fff; color:#0f172a; line-height:1.5;
}

/* Variants */
.msg.user{ justify-content:flex-end; }
.msg.user .bubble{ background:#eef2ff; }
.msg.user .avatar{ order:2; background:#dbeafe; color:#1e40af; }
.msg.user .bubble{ order:1; }

/* Chips (CTA inside chat) */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:.5rem; }
.chip{
  padding:.45rem .7rem; border-radius:9999px;
  background:rgba(124,77,255,.10); color:#5a33e6; border:1px solid rgba(124,77,255,.2);
  font-weight:600; cursor:pointer; text-decoration:none;
  transition:transform .15s ease, filter .15s ease;
}
.chip:hover{ transform:translateY(-1px); filter:brightness(1.05); }

/* Typing dots (optional) */
.typing .bubble{ width:74px; display:flex; gap:6px; justify-content:center; }
.typing-dots span{
  width:8px; height:8px; border-radius:50%; background:#c7b7ff; opacity:.8;
  animation: typing 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay:.15s; }
.typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes typing{
  0%, 80%, 100%{ transform: translateY(0); opacity:.6; }
  40%{ transform: translateY(-4px); opacity:1; }
}

/* ========= STAGGERED REVEAL (no JS) ========= */
.msg{ opacity: 0; transform: translateY(6px); }
@keyframes reveal{ to{ opacity:1; transform:none; } }
.m1{ animation: reveal .45s ease .10s forwards; }
.m2{ animation: reveal .45s ease .60s forwards; }
.m3{ animation: reveal .45s ease 1.30s forwards; }
.m4{ animation: reveal .45s ease 2.00s forwards; }

/* ========= RESPONSIVE ========= */
@media (max-width: 960px){
  .hero{ grid-template-columns: 1fr; text-align: center; }
  .hero-visual{ justify-content: center; margin-top: 1.2rem; }
  .chat-card{ max-width: min(86vw, 520px); }
}
/* ========= Chat Header ========= */
/* App bar inside the chat card */
.chat-header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: linear-gradient(135deg,#7C4DFF 0%,#5A33E6 70%);
  color:#fff;
  font-weight:700;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.25);
}

/* Title (logo + text) */
.chat-title{ display:flex; align-items:center; gap:.55rem; }
.chat-logo{ width:22px; height:22px; filter: drop-shadow(0 0 2px rgba(0,0,0,.15)); }

/* Left/back button (pure CSS, replace with icon if you want) */
.hdr-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px;
  background: rgba(255,255,255,.15); color:#fff; border:0;
  font-size:18px; line-height:1; cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
}
.hdr-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }

/* Right side: status + user avatar */
.chat-right{ display:flex; align-items:center; gap:.5rem; }
.status-dot{
  width:8px; height:8px; border-radius:50%;
  background:#a0e7a5; box-shadow:0 0 0 3px rgba(255,255,255,.25);
}
.user-pill{
  width:28px; height:28px; border-radius:9999px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.15); color:#fff; font-weight:800;
  letter-spacing:.2px;
}

/* === HERO MOBILE FIX === */
@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;   /* une seule colonne */
    height: auto;                 /* laisse la hauteur s'adapter */
    min-height: auto;
    padding: 2.5rem 1.2rem;       /* marges plus petites */
  }

  .hero-content {
    max-width: 100%;              /* le texte prend toute la largeur */
  }

  .hero-icon {
    width: clamp(160px, 40vw, 240px); /* logo plus petit et fluide */
    margin: 0 auto 1.5rem;           /* centré au-dessus du texte */
  }

  .chat-card {
    max-width: 100%;               /* prend toute la largeur dispo */
    max-height: none;              /* ⚡ enlève la coupure */
    margin: 1.5rem auto 0;         /* respire sous le texte */
  }
}



/* --- Showcase Modes, ici c' est pour les différenets mode de Elio --- */
.modes-showcase{
  max-width:1200px; margin:60px auto; padding:0 16px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
}

.ms-left h2{
  font-size:40px;
  margin:0 0 10px;
  letter-spacing:.2px;
  color: var(--violet);
  font-weight: 800;
}

.ms-left p{
  margin:0 0 16px; color:#4a5568; line-height:1.75; font-size:18px;
}

.ms-count{
  color:#7b7b7b;
  font-weight:700;
  margin-top:6px;
}

.ms-right{ position:relative; }

.ms-frame{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(42, 63, 201, 0.12);

  /* Cadre stable + centrage */
  aspect-ratio: 16 / 10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.ms-frame img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit: contain;
  object-position: center;
  display:block;
}

.ms-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  border:3px solid var(--violet-d); background:#fff; color:var(--violet-d);
  display:grid; place-items:center; font-size:20px; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.ms-arrow.prev{ left:-18px; } 
.ms-arrow.next{ right:-18px; }
.ms-arrow:hover{ background:#f6ecff; }

@media (max-width: 900px){
  .modes-showcase{ grid-template-columns:1fr; }
  .ms-arrow.prev{ left:8px; } 
  .ms-arrow.next{ right:8px; }
}
@media (max-width: 960px){
  .hero { text-align:center; }
  .hero-content { max-width: 720px; margin:0 auto 2rem; }
  .mockup { transform:none; width:min(86vw, 520px); }
}


/* --- Box d’explication (déjà présent) --- 
.explanation {
  background: #f3ecff;
  border-left: 6px solid #a78bfa;
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  font-size: 1.15em;
  line-height: 1.6;
  color: #333;
  max-width: 900px;
  margin: 40px auto 60px;
  text-align: center;
}
.explanation span.highlight {
  font-weight: bold;
  color: #7a65e9;
}
*/

/* --- Section À propos --- */
.about{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:var(--bg);
  padding:56px 20px 72px;
}
.about .container{ max-width:1100px; margin: auto; }

.about-hero{ text-align:center; margin-bottom:40px; }
.about-title{
  font-size:44px; line-height:1.1; margin:0 0 14px;
  font-weight:800;
  background:linear-gradient(90deg,var(--violet) 0%, var(--violet-d) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-sub{
  margin:0 auto; max-width:900px;
  font-size:20px; line-height:1.6; color:#495568;
}

.about-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:start;
  margin-top:28px;
}

.about-section h3{
  font-size:28px; margin:0 0 14px; color:var(--violet); font-weight:800;
}
.about-section p{
  margin:0 0 16px; color:#4a5568; line-height:1.75; font-size:18px;
}

.about-card{
  background:var(--card);
  border-radius:18px;
  padding:28px 26px;
  box-shadow: var(--ring);
  position:relative;
}
.about-card h4{
  margin:0 0 14px; font-size:26px; font-weight:800; color:var(--violet);
}
.about-icon {
    width: 150px;
    border-radius: 1rem;
    box-shadow: var(--ring);
    display:flex;
    cursor: pointer;
}
.features{ list-style:none; padding:0; margin:0; }
.features li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:17px; color:#425166; line-height:1.6; margin:12px 0;
}
.features li::before{
  content:"";
  width:10px; height:10px; margin-top:.5em;
  border-radius:999px;
  background:var(--violet);
  box-shadow:0 0 0 4px rgba(139,92,246,.15);
}
.about-card::after{
  content:""; position:absolute; inset:-12px; border-radius:22px; z-index:-1;
  background:radial-gradient(30% 60% at 90% 0%, rgba(139,92,246,.08), transparent 60%);
}

@media (max-width: 900px){
  .about-title{ font-size:36px; }
  .about-sub{ font-size:18px; }
  .about-grid{ grid-template-columns:1fr; }
}

/* --- Elio Gallery , c'est ici qu' on a le style pour les différents éléments de la galerie --- */
.gallery{
  max-width:1200px;
  margin:56px auto 72px;
  padding:0 16px;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.gallery-head{ text-align:center; margin-bottom:22px; }
.gallery-title{
  margin:0 0 8px;
  font-size:34px; font-weight:800;
  background:linear-gradient(90deg,var(--violet) 0%, var(--violet-d) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gallery-sub{
  margin:0 auto; max-width:820px;
  color:#4a5568; font-size:18px; line-height:1.6;
}

.gallery-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
.g-card{
  background:#fff; border-radius:16px;
  padding:18px; display:flex; flex-direction:column; gap:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  transition:transform .16s ease, box-shadow .16s ease;
}
.g-card:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.08); }

.g-logo{
  width:52px; height:52px; object-fit:contain; border-radius:8px;
  background:#f5f6ff;
}
.g-name{ margin:2px 0 0; font-size:20px; font-weight:700; color:#1f2937; }
.g-desc{ margin:0; color:#465568; line-height:1.55; font-size:15px; min-height:48px; }
.g-meta{ margin-top:auto; color:#9097a6; font-size:13px; }

.g-btn{
  margin-top:8px; align-self:flex-start;
  text-decoration:none; font-weight:700; font-size:14px;
  padding:10px 14px; border-radius:999px;
  background:linear-gradient(90deg,var(--violet),var(--violet-d));
  color:#fff; box-shadow:0 8px 18px rgba(150,129,250,.28);
  cursor: pointer;
  font-family: poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.g-btn:hover{ filter:brightness(1.05); }

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

.banner {
  width: 100%;
  display: flex;
  justify-content: center;   /* centers inner content */
  background-color: #f5f5f5; /* optional bg strip */
  overflow: hidden;
}

.banner-img {
  display: block;
  width: 100%;
  max-width: 1200px;   /* 🔑 same max-width as your main sections */
  height: auto;
  margin: 0 auto;      /* ensures centering inside flex */
  object-fit: cover;   /* in case you later set a fixed height */
}
/* --- meet the team Interface --- */
/* Section wrapper */
/* section spacing cohérent avec le reste */
/* pas de padding horizontal sur la section (les bords sont gérés par .container) */
.section.team{ padding:72px 0; background:linear-gradient(180deg,#fafbff 0%,#fff 40%); }

/* grille 2 colonnes : texte | photo */



/* mobile: la photo passe au-dessus (ou enlève order si tu veux la garder après) */
@media (max-width:960px){
  .team-grid{ grid-template-columns:1fr; }
  .team-right{ order:-1; justify-self:center; text-align:center; }
  .team-avatar{ width:160px; height:160px; }
}


/* titres et textes alignés à ta charte */


/* liens discrets, cohérents */
.member-links { display:flex; gap:10px; }
.member-links a {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  background:#f3f2ff; color:#5a33e6; font-weight:700;
  text-decoration:none; transition:transform .15s ease, filter .15s ease;
}
.member-links a:hover { transform:translateY(-2px); filter:brightness(1.05); }

/* avatar sans carte : léger anneau + soft shadow (cohérent avec tes mockups) */


/* --- test Styles --- */
/* Glow behind the chat (keeps your previous idea) */
/* ========= HERO LAYOUT (50/50) ========= */
/*.hero{
  display: grid;
  grid-template-columns: 1fr 1fr; */  /* text | chat (~half/half) */
/*  align-items: center;
  min-height: 70vh;
  padding: min(8vh, 5rem) clamp(24px, 6vw, 96px);
}*/

/* Modal */
.modal {
  display: none;
  position: fixed;
  font-family: 'Poppins', sans-serif; 
  z-index: 999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
}

.modal-content {
  background: white;
  margin: 10% auto;
  padding: 20px;
  border-radius: 12px;
  width: 400px;
  text-align: center;
}

.modal-content h2 { color: #7d5fff; }

.close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}
.notify-btn {
  background:linear-gradient(90deg,var(--violet),var(--violet-d));
  color: white;
  font-weight: bold;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.notify-btn:hover {
  background:linear-gradient(90deg,var(--violet),var(--violet-d));
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.modal-links {
  display: flex;
  gap: 10px;
  justify-content: center; /* centre au milieu */
}

.modal-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f3f2ff;
  color: #5a33e6;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}

.modal-links a:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
/* Email input */
.email-input {
  width: 100%;              /* full width inside modal */
  max-width: 280px;         /* keep it balanced */
  padding: 12px 16px;       /* bigger padding */
  font-size: 16px;          /* larger text */
  border: 2px solid #e0e0e0;
  border-radius: 10px;      /* rounded corners */
  outline: none;
  font-family: 'Poppins', sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin-right: 10px;       /* space before button */
}

.email-input:focus {
  border-color: #7d5fff;
  box-shadow: 0 0 6px rgba(125, 95, 255, 0.4);
}
/*booking */
/* ===== BOOKING SECTION ===== */
.section.booking{
  padding:72px 0;
  background: linear-gradient(180deg,#fafbff 0%, #ffffff 45%);
  font-family: poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* grid: illustration/text | calendar card */
.booking-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items:center;
}

/* left */
.booking-left{ display:flex; flex-direction:column; gap:18px; }
.booking-illust{
  width:min(520px, 100%);
  height:auto;
  /* subtle ink-style look like Livio */
  filter: drop-shadow(0 18px 40px rgba(20,16,56,.08));
}
.booking-title{
  margin:8px 0 0;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  letter-spacing:-0.01em;
  color:#8a6bff; /* Elio violet accent */
}
.booking-sub{
  margin:0;
  color:var(--text);
  font-size:18px
}

/* right: calendar card */
.booking-right{ justify-self:end; width:100%; }
.calendar-card{
  background:#2f466b;               /* deep desaturated blue like Livio card */
  color:#fff;
  border-radius:20px;
  padding:22px;
  width:min(560px, 100%);
  box-shadow: 0 24px 60px rgba(47,70,107,.28);
}
.calendar-header{
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px;
}
.calendar-avatar{
  width:44px; height:44px; border-radius:999px; object-fit:cover;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.calendar-cta{ font-weight:700; }
.calendar-sub{ opacity:.85; font-size:.95rem; }

/* embed box */
.calendar-embed{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  margin-top:10px;
}
.calendar-fallback{
  text-align:center; margin-top:12px; opacity:.9;
}
.calendar-fallback .btn{
  display:inline-block; padding:10px 14px; border-radius:10px;
  background:#8a6bff; color:#fff; text-decoration:none; font-weight:600;
}

/* RESPONSIVE */
@media (max-width: 1024px){
  .booking-grid{ grid-template-columns:1fr; }
  .booking-right{ justify-self:stretch; }
  .calendar-card{ width:100%; }
  .booking-illust{ width:min(440px, 100%); align-self:center; }
  .booking-title, .booking-sub{ text-align:center; align-self:center; }
}
@media (max-width: 560px){
  .calendar-embed [style]{ height:560px !important; } /* ensure height on tiny screens */
}
.site-footer {
  background: #f9f9ff;        /* light background */
  color: #555;
  text-align: center;
  padding: 20px 10px;
  font-size: 14px;
  margin-top: 40px;
  border-top: 1px solid #eee;
  font-family: 'Inter', sans-serif;
}

.site-footer a {
  color: #7d5fff;            /* your purple brand color */
  text-decoration: none;
  margin: 0 5px;
  font-weight: 500;
}

.site-footer a:hover {
  text-decoration: underline;
}