/* =========================================================
   GRACYL — THEME CLAIR APPLE-LIKE + iOS 26 (GLASS BOMBÉ)
   ========================================================= */

/* -------------------- VARIABLES -------------------- */
:root{
  /* Identité */
  --brand:#FF168B;          /* fuchsia du logo */
  --ink:#0F172A;            /* texte principal */
  --muted:#5B6A7E;          /* texte secondaire */
  --bg:#F7F9FC;             /* fond clair premium */

  /* Verre / lumière */
  --stroke:rgba(0,0,0,.08);
  --radius:34px;
  --blur:24px;
  --shadow:0 20px 44px rgba(16,24,40,.10), 0 4px 12px rgba(16,24,40,.06);

  /* Layout */
  --wrap:1180px;
  --headerH:86px;
}

/* -------------------- BASE -------------------- */
*{box-sizing:border-box}
html,.slab{height:100%}
body{
  margin:0; color:var(--ink); line-height:1.6;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:
    radial-gradient(36% 28% at 72% 18%, rgba(255,22,139,.08), transparent 60%),
    radial-gradient(30% 24% at 28% 62%, rgba(122,168,255,.10), transparent 60%),
    var(--bg);
  padding-top: var(--headerH);
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}

h1,h2,h3,.title{
  font-family:Manrope, Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight:600; letter-spacing:.1px; line-height:1.2;
}
.hero h1{font-weight:700}

.nowrap{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.section{padding:28px 0}
.grid{display:grid; gap:20px}
:focus-visible{outline:2px solid color-mix(in oklab, var(--brand), black 10%); outline-offset:3px}

/* -------------------- REVEAL -------------------- */
.reveal{
  opacity: 0;
  transform: translateY(14px) scale(.985);
  filter: blur(6px);
  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.22,.61,.36,1),
    filter .72s ease;
  will-change: opacity, transform, filter;
}
.reveal-visible{opacity:1; transform:none; filter:blur(0)}
.reveal[data-stagger]{transition-delay: var(--stagger, 0ms)}
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none; opacity:1; transform:none; filter:none}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative; padding:calc(var(--headerH) + 24px) 0 40px}
.hero .hero-inner{
  max-width:900px; margin:0 auto; padding:40px; text-align:center;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.70));
  border:1px solid var(--stroke);
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.hero h1{margin:0 0 8px}
.hero .sub{color:#475569; font-size:1.1rem}
.hero .tagline{color:var(--muted)}
.hero .accent{color:var(--brand); position:relative}
.hero .accent::after{
  content:""; position:absolute; inset:-8px -6px; z-index:-1;
  background:radial-gradient(60% 60% at 50% 40%, rgba(255,22,139,.18), transparent 70%);
  border-radius:28px; filter:blur(8px);
}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1.2rem;
  border-radius:14px; font-weight:600; border:1px solid var(--stroke); transition:.25s;
}
.btn.brand{
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--brand) 92%, white 8%),
    color-mix(in oklab, var(--brand) 82%, white 18%));
  color:#fff; box-shadow:0 10px 22px rgba(255,22,139,.22), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.brand:hover{filter:saturate(105%) brightness(1.03)}
.btn.ghost{background:rgba(255,255,255,.85); color:var(--ink)}
.btn.ghost:hover{background:rgba(255,255,255,.96)}
.halos{
  position:absolute; inset:-20% -10% auto -10%; height:70vh; z-index:-1;
  background:
    radial-gradient(28% 24% at 70% 18%, rgba(255,22,139,.12), transparent 60%),
    radial-gradient(26% 22% at 34% 68%, rgba(121,167,255,.14), transparent 60%);
  filter:blur(24px); opacity:.9;
}

/* =========================================================
   BURGER + NAV (desktop/mobile)
   ========================================================= */
.burger{
  margin-left:auto; width:44px;height:44px; display:grid;place-items:center;
  border-radius:12px; border:1px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 6px 16px rgba(16,24,40,.10);
  cursor:pointer; transition:background .2s, box-shadow .2s, transform .2s;
}
.burger:hover{ background:rgba(255,255,255,.75); transform:translateY(-1px) }
.burger span{ width:22px;height:2px;background:#1F2A44;border-radius:2px;display:block;transition:transform .25s, opacity .2s, width .2s }
.burger span + span{ margin-top:6px }
.site-header.open .burger span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.site-header.open .burger span:nth-child(2){ opacity:0 }
.site-header.open .burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

@media (max-width:860px){ .main-nav{display:none} }
.site-header.open .main-nav{
  display:block; position:fixed; left:16px; right:16px;
  top:calc(var(--headerH) + 12px); z-index:2000;
  border-radius:18px; padding:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 22px 46px rgba(16,24,40,.18), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  opacity:0; transform:translateY(-8px); animation:menuIn .18s ease forwards;
}
@keyframes menuIn{ to{ opacity:1; transform:none } }
.site-header.open .nav{ display:flex; flex-direction:column; gap:6px; margin:0; padding:0 }
.site-header.open .nav > li > a{
  display:block; padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.66); border:1px solid rgba(0,0,0,.04);
}
@media (min-width:861px){
  .burger{display:none}
  .main-nav{display:block; position:static; padding:0; background:transparent; border:none; box-shadow:none}
  .nav{display:flex; flex-direction:row; gap:26px}
}

/* =========================================================
   CARTES / GRILLES / PAGES (générique)
   ========================================================= */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:28px 20px; max-width:var(--wrap); margin:0 auto}
.page .title{margin:24px 0 6px}
.page .lead{color:var(--muted); margin:0 0 16px}
.page .grid{grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.60)); border-top:1px solid var(--stroke) }
.site-footer .wrap{display:grid; gap:10px; padding:26px 20px; text-align:center}
.site-footer .slogan em{color:var(--brand); font-style:normal; font-weight:600}
.copy{color:#7C8AA0; font-size:.9rem}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .nav{display:none}
  .burger{display:block}
  .pillars{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}

/* =========================================================
   OFFRES — Section + cartes “verre”
   ========================================================= */
.offres-hero{ position:relative; z-index:1; overflow:visible; padding-top:clamp(32px,4vw,64px); padding-bottom:clamp(32px,5vw,80px) }

.offres-hero .title{
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1; letter-spacing:-0.02em; margin:0 0 8px;
}
.offres-hero .lead{ opacity:.85; font-size:clamp(16px,1.6vw,18px); margin:0 0 28px }

/* TACHE de peinture (pleine largeur, anim plus lente) */
.offres-hero::before{
  content:""; position:absolute; top:-200px; left:calc(50% - 50vw);
  width:100vw; height:1400px; pointer-events:none; z-index:0;
  background: radial-gradient(
    90% 70% at 50% 0,
    rgba(80,200,255,.40),
    rgba(120,180,255,.35) 35%,
    rgba(160,120,255,.28) 70%,
    transparent 100%
  );
  filter: blur(80px) saturate(140%);
  transform-origin: top center;
  animation: paintSpread 24s ease-in-out infinite;
}
@keyframes paintSpread{
  0%   { transform: translateY(0) scaleY(0.18); opacity:.85 }
  25%  { transform: translateY(0) scaleY(1);    opacity:1   }
  50%  { transform: translateY(220px) scaleY(1.35); opacity:.95 }
  75%  { transform: translateY(0) scaleY(1);    opacity:1   }
  100% { transform: translateY(0) scaleY(0.18); opacity:.85 }
}

/* Grille 3x2 responsive */
.offres-hero .grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,28px);
  max-width:1200px; margin:0 auto;
}
@media (max-width:991px){ .offres-hero .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .offres-hero .grid{ grid-template-columns:1fr } }

/* Carte verre (opaque/transparence + blur) */
.offres-hero .card{
  position:relative; text-align:center; padding:2rem; border-radius:22px;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 18px 40px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.6) inset;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  overflow:hidden; background-clip:padding-box;
  opacity:0; transform:translateY(20px) scale(.985); filter:blur(6px);
  will-change:transform, opacity, filter;
}
.offres-hero .card.reveal{ animation: reveal .9s cubic-bezier(.25,.8,.25,1) forwards; animation-delay: var(--delay,0ms) }
@keyframes reveal{ 0%{opacity:0;transform:translateY(20px) scale(.985);filter:blur(6px)} 100%{opacity:1;transform:none;filter:none} }
@media (prefers-reduced-motion:reduce){ .offres-hero .card{opacity:1;transform:none;filter:none;animation:none!important} }

.offres-hero .card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%),
    radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.35), transparent 60%);
  mix-blend-mode:screen; opacity:.25;
}
.offres-hero .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.65) inset;
  background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.75);
}

/* Badge rond + icône */
.icon-badge{
  width:80px; height:80px; margin:0 auto 1.5rem; border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), rgba(255,255,255,.1));
  backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transition: transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s;
}

/* Couleur rose par défaut dans les cartes */
.card .icon-badge svg {
  width: 44px;
  height: 44px;
  color: #FF4FA0; /* force le currentColor en rose */
}
.icon-badge svg{
  width:40px; height:40px; stroke:var(--accent,#ff1f7a); fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  transition: transform .35s cubic-bezier(.25,.8,.25,1);
}
.card:hover .icon-badge{ transform: translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,.15) }
.card:hover .icon-badge svg{ transform: scale(1.1) }

/* Titres & punchline */
.offres-hero .card h2{
  text-transform:uppercase; font-size:1rem; letter-spacing:.04em; margin-bottom:.75rem;
}
.offres-hero .punchline{
  font-size:1rem; line-height:1.4; color:#333; margin-bottom:1rem;
}

/* Lien "En savoir plus" */
.offres-hero .card .link{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:gap .2s ease, opacity .2s ease;
}
.offres-hero .card .link:hover{ gap:10px; opacity:.9 }

/* Mobile perf : blur un peu réduit */
@media (max-width:640px){
  .offres-hero .card{
    -webkit-backdrop-filter:saturate(130%) blur(10px);
            backdrop-filter:saturate(130%) blur(10px);
  }
}
@media (prefers-reduced-transparency:reduce){
  .offres-hero .card{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none }
}

/* =========================================================
   SLICES GÉNÉRIQUES / CTA OFFRES
   ========================================================= */
.slice{ padding:clamp(40px,6vw,80px) 0 }
.slice .wrap{ max-width:1100px; margin:0 auto }
.slice-title{ font-size:clamp(22px,3vw,28px); font-weight:700; letter-spacing:.01em; margin:0 0 .5rem }
.slice-sub{ margin:0 0 1.25rem; color:#4a5568 }

.slice-cta-offres{
  position:relative; text-align:center; padding:clamp(60px,10vw,100px) 20px;
  overflow:hidden; background:#fafbfd;
}
.slice-cta-offres::before{
  content:""; position:absolute; top:-80px; left:50%;
  transform:translate(-50%,0) scale(1);
  width:1400px; height:600px; z-index:0;
  background: radial-gradient(
    700px 300px at 50% 0,
    rgba(255,31,122,.35),
    rgba(255,120,180,.25) 40%,
    rgba(200,100,255,.18) 70%,
    transparent 100%
  );
  filter: blur(60px); animation: haloSpread 14s ease-in-out infinite;
}
@keyframes haloSpread{
  0%{transform:translate(-50%,0) scale(1,1);filter:blur(60px)}
  40%{transform:translate(-52%,120px) scale(1.2,1.35);filter:blur(70px)}
  70%{transform:translate(-48%,160px) scale(1.35,1.5);filter:blur(80px)}
  100%{transform:translate(-50%,0) scale(1,1);filter:blur(60px)}
}
.slice-cta-offres .wrap{ position:relative; z-index:1 }
.slice-cta-offres .btn.brand{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:auto; padding:.9rem 1.4rem; border-radius:16px;
  background:linear-gradient(180deg,#ff4aa0,#ff1f7a);
  color:#fff; font-weight:700;
  box-shadow:0 12px 28px rgba(255,31,122,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.slice-cta-offres .btn.brand:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(255,31,122,.28);
  filter:saturate(1.05);
}
.slice-cta-offres .btn.brand:focus-visible{
  outline:3px solid #ffd1e6; outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,31,122,.25);
}

/* =========================================================
   FAQ — accordéon + pastille centrée
   ========================================================= */
.slice-faq{
  background:
    linear-gradient(180deg, rgba(240,244,255,.55), rgba(255,255,255,0) 40%),
    linear-gradient(0deg, rgba(255,255,255,.85), rgba(255,255,255,.85));
  border-top:1px solid rgba(0,0,0,.05);
}
.faq{ margin-top:1rem }
.faq-item{ padding:.35rem 0 }
.faq-item + .faq-item{ border-top:1px solid rgba(0,0,0,.07) }

.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.6rem; text-align:left;
  background:transparent; border:0; font:inherit; font-weight:600; cursor:pointer; position:relative;
}
.faq-q::after{
  content:""; flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background: rgba(255,255,255,.4);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.15), 0 1px 4px rgba(0,0,0,.08);
  transition: box-shadow .3s, background .3s, transform .3s;
  display:flex; align-items:center; justify-content:center;
}

.faq-a{
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height .35s ease, opacity .25s ease; will-change:max-height, opacity;
}
.faq-item.open .faq-a{ opacity:1; }             /* hauteur gérée en JS pour précision */
.faq-a .inner{ padding:6px 0 14px 0; max-width:70ch; color:#2d3748 }

.faq-cta{ text-align:center; margin-top:2.4rem }
.btn.ghost{
  border:1px solid rgba(0,0,0,.15); background:#fff; color:#0f172a;
  padding:.75rem 1rem; border-radius:12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn.ghost:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.06) }