/* =========================================================
   AMILI — DA APPLE/iOS LIQUID GLASS (v9.0)
   Refonte complete. Charte respectee (Ink, Nuit, Metier, pastilles).
   ========================================================= */

/* ===== HEADER : verre clair permanent ===== */
.site-header {
  background: rgba(248,246,242,0.65);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(15,27,45,0.06);
}
.site-header.is-scrolled {
  background: rgba(248,246,242,0.85);
  box-shadow: 0 10px 30px -16px rgba(15,27,45,0.18);
}
.site-header__brand { display: inline-flex; align-items: center; }
.brand-logo { height: 46px; width: auto; display: block; }
@media (max-width: 900px) { .brand-logo { height: 38px; } }
.brand-logo--light { display: none; }
.brand-logo--dark  { display: block; }

/* ===== HERO ACCUEIL : PAPIER asymetrique avec halos ===== */
.hero--v2 {
  background: #F7F6F3 !important;
  position: relative;
  overflow: hidden;
}
.hero--v2::before {
  content:""; position:absolute; top:10%; left:-5%;
  width:400px; height:400px; border-radius:50%;
  background: radial-gradient(circle,#F26B2C 0%, transparent 70%);
  opacity:0.22; pointer-events:none; z-index:0;
}
.hero--v2::after {
  content:""; position:absolute; bottom:-10%; right:-5%;
  width:450px; height:450px; border-radius:50%;
  background: radial-gradient(circle,#3FA9F5 0%, transparent 70%);
  opacity:0.22; pointer-events:none; z-index:0;
}
.hero-v2__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px;
  align-items: center;
}
.hero-v2__scroll { grid-column: 1 / -1; color: #5F5E5A !important; }
@media (max-width: 900px) { .hero-v2__inner { grid-template-columns: 1fr; gap: 40px; } }

.hero--v2 .hero-v2__top, .hero--v2 .section-marker { color: #5F5E5A !important; }
.hero--v2 .hero-v2__title { color: var(--ink) !important; }
.hero--v2 .hero-v2__title em { color: var(--metier) !important; font-style: italic; }
.hero--v2 .hero-punct { color: var(--metier) !important; }
.hero--v2 .hero-v2__signature { color: var(--metier) !important; font-style: italic; }
.hero--v2 .hero-v2__lede { color: #444 !important; }
.hero--v2 .hero-v2__lede em { color: var(--ink) !important; font-weight: 700; }
.hero--v2 .hero-v2__cta-label { color: #5F5E5A !important; }
.hero--v2 .hero-v2__foot { border-top-color: rgba(15,27,45,0.10) !important; }
.hero--v2 .scroll-line { background: linear-gradient(to bottom,#111 0%,#111 50%,transparent 50%); background-size:100% 200%; }

/* ===== HERO WIDGETS (stack iOS droite) ===== */
.hero-v2__widgets {
  display: flex; flex-direction: column; gap: 14px;
  position: relative; z-index: 1;
}
.hero-widget {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 18px; padding: 18px 22px;
  background: transparent; border: none;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.75);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.hero-widget::before {
  content:""; position:absolute; inset:0; z-index:-2; border-radius: inherit;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  filter: url(#glass-distortion) saturate(120%) brightness(1.10);
}
.hero-widget::after {
  content:""; position:absolute; inset:0; z-index:-1; border-radius: inherit;
  background: rgba(255,255,255,0.45);
}
.hero-widget__body { display: flex; flex-direction: column; min-width: 0; }
.hero-widget__label { color: #5F5E5A; font-size: 11px; font-weight: 800; letter-spacing: 1px; margin-bottom: 4px; }
.hero-widget__value { color: var(--ink); font-size: 17px; font-weight: 900; letter-spacing: -0.02em; }
.hero-widget__note { color: #666; font-size: 12px; font-weight: 700; margin-top: 2px; }
.hero-widget__note--accent { color: var(--metier); font-weight: 800; }
.hero-widget__icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(242,107,44,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.hero-widget__icon--blue { background: rgba(63,169,245,0.18); }
.hero-widget__icon--red  { background: rgba(232,65,53,0.18); }

/* ===== HEROS PAGES DOMAINES : NUIT immersif + halos ===== */
.hero-domain.section--paper {
  background: var(--nuit) !important;
  position: relative; overflow: hidden;
}
.hero-domain.section--paper::before {
  content:""; position:absolute; top:-15%; right:-10%;
  width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle,#F26B2C 0%, transparent 65%);
  opacity:0.32; pointer-events:none; z-index:0;
}
.hero-domain.section--paper::after {
  content:""; position:absolute; bottom:-15%; left:-10%;
  width:480px; height:480px; border-radius:50%;
  background: radial-gradient(circle,#3FA9F5 0%, transparent 65%);
  opacity:0.22; pointer-events:none; z-index:0;
}
.hero-domain > .frame, .hero-domain .frame { position: relative; z-index: 1; }
.hero-domain .hero-domain__title { color: #fff !important; }
.hero-domain .hero-domain__title .hero-punct { color: var(--metier) !important; }
.hero-domain .hero-domain__lede { color: #CDD4DF !important; }
.hero-domain .hero-domain__lede em { color: var(--metier) !important; }
.hero-domain .hero-domain__cta-label,
.hero-domain .hero-domain__bonus,
.hero-domain .section-marker { color: #8A94A6 !important; }

/* ===== SECTION DOMAINES (accueil) : NUIT + App Store layout ===== */
.metiers.section--paper {
  background: var(--nuit) !important;
  position: relative; overflow: hidden;
}
.metiers::before {
  content:""; position:absolute; top:-15%; right:-10%;
  width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle,#F26B2C 0%, transparent 65%);
  opacity:0.32; pointer-events:none; z-index:0;
}
.metiers::after {
  content:""; position:absolute; bottom:-15%; left:-10%;
  width:480px; height:480px; border-radius:50%;
  background: radial-gradient(circle,#3FA9F5 0%, transparent 65%);
  opacity:0.22; pointer-events:none; z-index:0;
}
.metiers > .frame { position: relative; z-index: 1; }
.metiers .section-head .headline { color: #fff !important; }
.metiers .section-head .headline em { color: var(--metier) !important; font-style: italic; }
.metiers .section-head .lede { color: #CDD4DF !important; }
.metiers .section-marker { color: #8A94A6 !important; }

.metier-grid {
  display: grid; grid-template-columns: 1.6fr 1fr;
  grid-template-rows: auto auto; gap: 16px;
}
.metier-grid .metier-mini:nth-child(1) { grid-column: 2; grid-row: 1; }
.metier-grid .metier-mini:nth-child(2) { grid-column: 1; grid-row: 1 / span 2; padding: 36px !important; min-height: 380px; }
.metier-grid .metier-mini:nth-child(3) { grid-column: 2; grid-row: 2; }
@media (max-width: 900px) {
  .metier-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .metier-grid .metier-mini { grid-column: 1 !important; grid-row: auto !important; min-height: auto !important; padding: 28px !important; }
}

/* CARTES METIER glass sur Nuit */
.metier-mini {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 22px !important; padding: 28px !important;
  background: transparent !important; border: none !important;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.75) !important;
  text-decoration: none !important; color: inherit;
  transition: transform .25s ease !important;
}
.metier-mini::before {
  content:""; position:absolute; inset:0; z-index:-2; border-radius: inherit;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  filter: url(#glass-distortion) saturate(120%) brightness(1.10);
}
.metier-mini::after {
  content:""; position:absolute; inset:0; z-index:-1; border-radius: inherit;
  background: rgba(255,255,255,0.10);
}
.metier-mini:hover { transform: translateY(-3px); }
.metier-mini__num { color: var(--metier) !important; font-size: 13px !important; font-weight: 800 !important; }
.metier-mini__title { color: #fff !important; }
.metier-mini__body { color: #CDD4DF !important; }
.metier-mini__body em { color: #fff !important; font-style: italic; font-weight: 700; }
.metier-mini__more { color: #fff !important; font-weight: 800 !important; }
.metier-grid .metier-mini:nth-child(2) .metier-mini__title { font-size: 42px !important; line-height: 1 !important; }

/* ===== SECTION APPROCHE : Papier alt + halos doux ===== */
.approche.section--alt { position: relative; overflow: hidden; }
.approche::before {
  content:""; position:absolute; top:20%; left:-10%;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle,#F26B2C 0%, transparent 70%);
  opacity:0.15; pointer-events:none; z-index:0;
}
.approche::after {
  content:""; position:absolute; bottom:10%; right:-10%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle,#3FA9F5 0%, transparent 70%);
  opacity:0.18; pointer-events:none; z-index:0;
}
.approche > .frame { position: relative; z-index: 1; }

/* ===== MANIFESTO : Nuit + halos massifs + KPI widgets ===== */
.manifesto.section--night { position: relative; overflow: hidden; }
.manifesto::before {
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:850px; height:850px; border-radius:50%;
  background: radial-gradient(circle,#F26B2C 0%, transparent 60%);
  opacity:0.32; pointer-events:none; z-index:0;
}
.manifesto::after {
  content:""; position:absolute; top:20%; right:5%;
  width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle,#3FA9F5 0%, transparent 65%);
  opacity:0.30; pointer-events:none; z-index:0;
}
.manifesto > .frame { position: relative; z-index: 1; }
.manifesto__kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 48px;
}
@media (max-width: 700px) { .manifesto__kpis { grid-template-columns: 1fr; } }
.kpi-widget {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 18px; padding: 20px 18px;
  background: transparent; border: none;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.75);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.kpi-widget::before {
  content:""; position:absolute; inset:0; z-index:-2; border-radius: inherit;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  filter: url(#glass-distortion) saturate(120%) brightness(1.10);
}
.kpi-widget::after {
  content:""; position:absolute; inset:0; z-index:-1; border-radius: inherit;
  background: rgba(255,255,255,0.10);
}
.kpi-widget__num { font-size: 32px; font-weight: 900; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.kpi-widget__label { color: #CDD4DF; font-size: 13px; font-weight: 700; margin-top: 6px; }

/* ===== SECTION TARIFS RÉSUMÉ : Papier + 4 fiches ===== */
.tarifs-resume { position: relative; overflow: hidden; }
.tarifs-resume::before {
  content:""; position:absolute; top:20%; left:-10%;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle,#F26B2C 0%, transparent 70%);
  opacity:0.15; pointer-events:none; z-index:0;
}
.tarifs-resume::after {
  content:""; position:absolute; bottom:10%; right:-10%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle,#3FA9F5 0%, transparent 70%);
  opacity:0.18; pointer-events:none; z-index:0;
}
.tarifs-resume > .frame { position: relative; z-index: 1; }
.tarif-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 40px;
}
@media (max-width: 900px) { .tarif-grid { grid-template-columns: repeat(2, 1fr); } }
.tarif-card {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 18px; padding: 24px 22px;
  background: transparent; border: none;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.75);
  text-decoration: none; display: block;
  transition: transform .25s ease;
}
.tarif-card::before {
  content:""; position:absolute; inset:0; z-index:-2; border-radius: inherit;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  filter: url(#glass-distortion) saturate(120%) brightness(1.10);
}
.tarif-card::after {
  content:""; position:absolute; inset:0; z-index:-1; border-radius: inherit;
  background: rgba(255,255,255,0.45);
}
.tarif-card:hover { transform: translateY(-3px); }
.tarif-card__cat { color: #5F5E5A; font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.tarif-card__type { font-size: 22px; font-weight: 900; color: var(--ink); margin: 6px 0 18px; letter-spacing: -0.02em; }
.tarif-card__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.tarif-card__amount { font-size: 32px; font-weight: 900; color: var(--ink); letter-spacing: -0.03em; }
.tarif-card__unit { font-size: 12px; color: #666; font-weight: 600; }
.tarif-card__deal { color: var(--metier); font-size: 13px; font-weight: 800; }
.tarif-card__deal--muted { color: #5F5E5A; font-weight: 700; }
.tarifs-resume__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 32px; flex-wrap: wrap; gap: 16px;
}
.tarifs-resume__note { color: #5F5E5A; font-size: 13px; font-weight: 700; }

/* ===== SECTION ZONE & FAQ : Papier + halos doux ===== */
.zone.section--deep, .faq.section--paper { position: relative; overflow: hidden; }
.zone::before, .faq::before {
  content:""; position:absolute; top:20%; right:-10%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle,#3FA9F5 0%, transparent 70%);
  opacity:0.18; pointer-events:none; z-index:0;
}
.faq::after {
  content:""; position:absolute; bottom:10%; left:-10%;
  width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle,#F26B2C 0%, transparent 70%);
  opacity:0.15; pointer-events:none; z-index:0;
}
.zone > .frame, .faq > .frame { position: relative; z-index: 1; }

/* ===== SECTION CTA FINAL (contact) : Nuit + halo central ===== */
.cta.section--ink { position: relative; overflow: hidden; }
.cta.section--ink::before {
  content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:800px; height:800px; border-radius:50%;
  background: radial-gradient(circle,#F26B2C 0%, transparent 65%);
  opacity:0.30; pointer-events:none; z-index:0;
}
.cta.section--ink > .frame { position: relative; z-index: 1; }

/* ===== CTA UNIFIES : Liquid Glass avec teintes contextuelles ===== */
.btn, .btn--ink, .btn--ghost, .btn--metier, .btn--paper,
.btn-tel, .mobile-drawer__cta, .mobile-call-cta,
.blog-cta__btn, .footer-rdv-btn, .rdv-confirm-btn,
.cta-call, .actions a {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-pill) !important;
  color: #ffffff !important;
  border: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.75) !important;
  background: transparent !important;
  cursor: pointer;
  transition: transform .2s ease !important;
}
.btn::before, .btn--ink::before, .btn--ghost::before, .btn--metier::before,
.btn--paper::before, .btn-tel::before, .mobile-drawer__cta::before,
.mobile-call-cta::before, .blog-cta__btn::before, .footer-rdv-btn::before,
.rdv-confirm-btn::before, .cta-call::before, .actions a::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  border-radius: inherit; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  filter: url(#glass-distortion) saturate(120%) brightness(1.15);
}
.btn::after, .btn--ink::after, .btn--ghost::after, .btn--metier::after,
.btn--paper::after, .btn-tel::after, .mobile-drawer__cta::after,
.mobile-call-cta::after, .blog-cta__btn::after, .footer-rdv-btn::after,
.rdv-confirm-btn::after, .cta-call::after, .actions a::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: rgba(255,255,255,0.25);
}
/* CTA primaire (action) = ORANGE glass */
.btn--ink::after, .blog-cta__btn::after, .footer-rdv-btn::after,
.mobile-call-cta::after, .rdv-confirm-btn::after, .cta-call::after {
  background: rgba(242,107,44,0.55);
}
/* CTA secondaire (tel, ghost, drawer) = NUIT glass */
.btn-tel::after, .btn--ghost::after, .mobile-drawer__cta::after {
  background: rgba(15,27,45,0.75);
}
.btn:hover, .btn--ink:hover, .btn--ghost:hover, .btn-tel:hover,
.blog-cta__btn:hover, .footer-rdv-btn:hover, .rdv-confirm-btn:hover,
.cta-call:hover, .actions a:hover, .mobile-drawer__cta:hover,
.mobile-call-cta:hover {
  transform: scale(1.04);
}

/* ===== BLOG CTA bandeau ===== */
.blog-cta { background: var(--nuit) !important; }
.blog-cta__title { color: #fff !important; }

/* ===== Surfaces flottantes : drawer + modal ===== */
.mobile-drawer {
  -webkit-backdrop-filter: saturate(170%) blur(26px);
  backdrop-filter: saturate(170%) blur(26px);
}
.rdv-modal::backdrop, .rdv-modal__overlay {
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  background: rgba(15,27,45,0.45);
}