/* =========================================================
   GRACYL — MENU "LIQUID GLASS" (widget style, sans brillances animées)
   ========================================================= */

/* ---------- Variables */
:root{
  --wrap: 1280px;
  --headerH: 72px;
  --glass-bg: 255 255 255;       /* base white */
  --glass-a: .16;                /* glass opacity */
  --glass-a-strong: .28;         /* hover/active */
  --stroke: 255 255 255;         /* border light */
  --ink: 45 52 69;               /* text color */
  --ink-soft: 92 100 118;
  --cta: 255 59 108;
  --radius: 999px;               /* pill */
  --blur: 18px;
  --shadow: 0 6px 22px rgba(18, 24, 40, .14), 0 1px 0 rgba(255,255,255,.4) inset;
}



/* stronger on hover if you want */
.site-header .nav a:hover::after{
  opacity: .95;
  filter: blur(7px);
}

/* for the SELECTED tab: keep your pill, but no extra glow plate */
.site-header .nav a.is-active,
.site-header .nav a[aria-current="page"]{
  background:#fff;
  color:#1F2A44 !important;
}
.site-header .nav a.is-active::after,
.site-header .nav a[aria-current="page"]::after{
  display:none; /* glow only for non-selected items */
}

/* ---------- Header container (fixed, transparent) */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  padding: 12px 16px;
  background: transparent !important;
  pointer-events: none; /* laisse uniquement la slab capter les clics */
}
.site-header .wrap{
  max-width: var(--wrap);
  margin: 0 auto;
}

/* ---------- Glass Slab (the pill) */
.site-header .slab{
  position: relative;
  height: var(--headerH);
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 16px;
  padding: 10px 30px;
  pointer-events: auto;
  /* Glass */
  background:
    radial-gradient(120% 140% at 0% -20%,
      rgba(255,155,230,.20) 0%,
      rgba(255,255,255,0) 35%),
    linear-gradient(180deg,
      rgba(var(--glass-bg), .65) 0%,
      rgba(var(--glass-bg), .45) 100%);
  backdrop-filter: saturate(160%) blur(var(--blur));
  -webkit-backdrop-filter: saturate(160%) blur(var(--blur));
  /* Stroke + shadow */
  border: 1px solid rgba(var(--stroke), .65);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ---------- Suppression des effets lumineux animés */
.site-header .slab::after,
.site-header .shine{
  display: none !important;
}

/* ---------- Brand */
.brand{ 
  display:flex; 
  align-items:center; 
  gap:10px; 
  text-decoration:none; 
}
.brand img{ 
  height:34px; 
  width:auto; 
  display:block; 
}
.brand-text{
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 700; 
  font-size: 22px; 
  letter-spacing:.2px;
  color: rgb(var(--ink));
  text-shadow: none !important;      /* no glow */
  filter: none !important;
}

/* ---------- Nav (desktop) */
.nav{
  display:flex; 
  align-items:center; 
  gap: 26px;
  list-style:none; 
  margin:0; 
  padding:0;
}
.nav > li{ position:relative; }
.nav a{
  text-decoration:none;
  font: 600 16px/1.2 "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: rgb(var(--ink));
  padding: 10px 12px;
  border-radius: 12px;
  transition: background .25s ease, color .25s ease;
  white-space: nowrap;
  text-shadow: none !important;      /* no glow */
  filter: none !important;
}

.nav a:hover,
.nav a:focus-visible{
  background: rgba(var(--glass-bg), var(--glass-a-strong));
  outline: none;
}

/* Active state */
.nav a.is-active,
.nav a[data-active="true"]{
  background: rgba(var(--glass-bg), var(--glass-a-strong));
  box-shadow: 0 0 0 1px rgba(255,255,255,.75) inset;
}

/* ---------- CTA */
.btn-cta{
  margin-left: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55)) padding-box,
              radial-gradient(120% 100% at 0% 0%, #ffd4e4, #ffd6f6 60%, #ffffff) border-box;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  padding: 10px 16px !important;
  color: rgb(43 35 47);
  box-shadow: 0 8px 22px rgba(255,59,108,.18);
}
.btn-cta:hover{ filter: brightness(1.03); }

/* ---------- Submenu */
.has-sub > a{ padding-right: 26px; }
.has-sub > a::after{
  content:""; position:absolute; right:8px; top:50%; width:8px; height:8px;
  border-right:2px solid rgba(45,52,69,.7);
  border-bottom:2px solid rgba(45,52,69,.7);
  transform: translateY(-60%) rotate(45deg);
  transition: transform .25s ease, opacity .25s ease;
  opacity:.75;
}
.has-sub .sub{
  position:absolute; top: calc(100% + 12px); left: 6px;
  min-width: 260px; padding: 10px;
  list-style:none; margin:0;
  border-radius: 18px;
  background:
    linear-gradient(180deg,
      rgba(var(--glass-bg), .75) 0%,
      rgba(var(--glass-bg), .55) 100%);
  backdrop-filter: saturate(160%) blur(var(--blur));
  -webkit-backdrop-filter: saturate(160%) blur(var(--blur));
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-sub:hover .sub,
.has-sub:focus-within .sub{
  opacity: 1; visibility: visible; transform: translateY(0);
}
.sub li a{ display:block; padding:10px 12px; border-radius:10px; color: rgb(var(--ink)); }
.sub li a:hover{ background: rgba(var(--glass-bg), .55); }
.has-sub:hover > a::after,
.has-sub:focus-within > a::after{ transform: translateY(-60%) rotate(-135deg); }

/* ---------- Burger */
.burger{
  margin-left:auto;
  width: 40px; height: 40px;
  display:none; place-items:center;
  border-radius: 10px; border:1px solid rgba(255,255,255,.75);
  background: rgba(var(--glass-bg), .45);
  backdrop-filter: blur(10px);
}
.burger span{
  display:block; width: 18px; height:2px; background: rgb(var(--ink));
  border-radius:2px; position:relative; transition: transform .25s ease;
}
.burger span + span{ margin-top:4px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ---------- Layout tweaks */
@media (max-width: 1100px){
  .nav{ gap: 18px; }
}
@media (max-width: 980px){
  .brand-text{ font-size:20px; }
}

/* ---------- Fine details (sans réintroduction de glow) */
.nav a, .brand-text{ color: rgb(var(--ink)); }
.nav a:hover{ color: rgb(var(--ink)); }
/* pas de text-shadow ici */
@supports not (backdrop-filter: blur(1px)){
  .site-header .slab,
  .main-nav,
  .has-sub .sub{ background: rgba(var(--glass-bg), .92); }
}

/* ---------- Active state fix */
.nav a[data-nav="accueil"][href="/accueil"].is-active,
.nav a[data-nav="offres"].is-active,
.nav a[data-nav="realisations"].is-active,
.nav a[data-nav="methode"].is-active,
.nav a[data-nav="a-propos"].is-active,
.nav a[data-nav="contact"].is-active{
  background: rgba(var(--glass-bg), var(--glass-a-strong));
}

/* ===== Accent global (une seule variable à changer) ===== */
:root{
  --accent: #FF4FA0;

  /* intensité du verre pour le chip */
  --chip-glass-a: .22;     /* au repos */
  --chip-glass-a-hover: .32; /* hover/actif */
}

/* Chip “verre” neutre (pas de couleur) */
.nav a {
  position: relative;
  border: none;
  border-radius: 16px;
  padding: 10px 14px;
  color: #1f2a44;
  text-shadow: none;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
  /*??*/
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .60), 0 6px 14px rgba(16, 24, 40, .08);	
  box-shadow: none; /* par défaut : pas d’ombre */
}

/* Quand la page est scrollée */
body.nav-glow .nav a:not(.is-active):not(:hover) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .60),
              0 6px 14px rgba(16, 24, 40, .08) !important;
}

/* Fond verre très léger au hover */
.nav a:hover {
  color: var(--accent);                     /* texte coloré */
  background: linear-gradient(180deg,
                rgba(255,255,255,var(--chip-glass-a-hover)) 0%,
                rgba(255,255,255,calc(var(--chip-glass-a-hover) - .12)) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 8px 18px rgba(16,24,40,.10);
  transform: translateY(-1px);
}

/* État actif (page courante) : même style que hover, un poil plus “posé” */
.nav a.is-active,
.nav a[data-active="true"],
.nav a[aria-current="page"]{
  color: var(--accent);
  background: linear-gradient(180deg,
                rgba(255,255,255,var(--chip-glass-a)) 0%,
                rgba(255,255,255,calc(var(--chip-glass-a) - .10)) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    0 6px 14px rgba(16,24,40,.08);
  transform: none;
}

/* Reset ombre */
.site-header .nav a {
  position: relative;
  z-index: 0;
  border-radius: 14px;
  padding: .55rem .95rem;
  font-weight: 600;
  color: #1F2A44; /* texte normal sur clair */
  background: transparent;
  transition: color .2s ease, background .2s ease;
}

.site-header .nav a {
  position: relative;
  z-index: 0;
  border-radius: 14px;
  padding: .55rem .95rem;
  font-weight: 600;
  color: #1F2A44; /* texte normal sur clair */
  background: transparent;
  transition: color .2s ease, background .2s ease;
}

/*.site-header .nav a {
  position: relative;
  z-index: 0;
  border-radius: 14px;
  padding: .55rem .95rem;
  font-weight: 600;
  color: #1F2A44;
  background: transparent;
  transition: color .2s ease, background .2s ease;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
}*/


/* Quand fond sombre → texte blanc */
body.dark .site-header .nav a {
  color: #ffffff;
}

/* Hover & active → accent rose, pill blanc */
.site-header .nav a:hover,
.site-header .nav a.is-active,
.site-header .nav a[aria-current="page"] {
    color: #FF4FA0 !important;
    background: none;
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
}

/* CTA spécial (Contact) reste un peu plus fort en fond blanc */
.site-header .nav .btn-cta {
  color:#1F2A44 !important;
  background: rgba(255,255,255,0.95);
}


/* base link */
.site-header .nav a{
  position: relative;
  z-index: 1;                 /* text stays above the glow */
  color: #1F2A44;
}

/* soft white diffuse glow BEHIND the text */
/*.site-header .nav a::after{
	content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 5px);
    height: 1.7em;
    border-radius: 999px;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .80) 100%, rgba(255, 255, 255, .45) 100%, rgba(255, 255, 255, 0) 100%);
    filter: blur(11px);
    opacity: 1;
}*/

/* default: hidden */
.site-header .nav a::after{
  content:"";
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 20px);
  height: 1.7em;                   /* your value */
  border-radius: 999px;
  pointer-events:none;
  z-index:-1;
  background: radial-gradient(closest-side,
              rgba(255,255,255,.80) 0%,
              rgba(255,255,255,.45) 100%,
              rgba(255,255,255,0) 100%);
  filter: blur(11px);
  opacity: 0;                      /* ← hidden by default */
  transition: opacity .25s ease, filter .25s ease;
}

/* show the glow while scrolled, but keep the active chip clean */
body.nav-glow .site-header .nav a:not(.is-active)::after{
  opacity: 1;
}

/* --- Burger plus lisible --- */
.burger{
  margin-left:auto;
  width:44px;height:44px;display:none;place-items:center;
  border:1px solid rgba(31,42,68,.12);
  border-radius:12px;
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  cursor:pointer;
}
.burger span{
  width:22px;height:2px;background:#1F2A44;border-radius:2px;display:block;transition:.25s;
}
.burger span+span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* --- Overlay & body lock --- */
.nav-overlay{
  position:fixed; inset:0; background:rgba(15,17,25,.35);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
  z-index: 1000;
}
.site-header.open .nav-overlay{ opacity:1; visibility:visible; }
body.nav-open{ overflow:hidden; }

/* --- Z-index du header pour passer devant l’overlay --- */
.site-header{ z-index: 1002; }

/* l’overlay passe SOUS le nav */
.nav-overlay{
  position: fixed; inset: 0;
  background: rgba(15,17,25,.35);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
  z-index: 1000;              /* sous le nav */
}
.site-header.open .nav-overlay{ opacity:1; visibility:visible; }

/* === MOBILE: Drawer plein écran Apple-like (100% W/H) === */
@media (max-width: 860px){
	
	
	.site-header.open .nav > li > a {
		padding: 20px 14px !important;
		box-shadow: none;
	}

  .site-header { padding: 10px; }
  .site-header .slab{ height:auto; padding:10px 12px; overflow:visible; }
  .burger{ display:grid; }

  /* Overlay sous le panneau */
  .nav-overlay{
    position: fixed; inset: 0;
    background: rgba(15,17,25,.35);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
    z-index: 1000;              /* sous le nav */
  }
  .site-header.open .nav-overlay{ opacity:1; visibility:visible; }

  body.nav-open{ overflow:hidden; overscroll-behavior: contain; }

	.site-header.open .main-nav {
		position: fixed;
		inset: 0;                   /* plein écran */
		height: 100dvh;             /* iOS friendly */
		background: #fff;
		border-radius: 0;           /* bords droits */
		box-shadow: none;
		padding: calc(12px + env(safe-area-inset-top))
				 max(16px, env(safe-area-inset-right))
				 max(28px, env(safe-area-inset-bottom))
				 max(16px, env(safe-area-inset-left));
		overflow: auto;
		-webkit-overflow-scrolling: touch;

		transform: translateY(-8px);
		opacity: 0; visibility: hidden;
		transition: opacity .22s ease, transform .22s ease, visibility .22s;
		z-index: 1002;              /* au-dessus de l’overlay */
		display: block;
		position: fixed;
		left: -30px;
		right: -30px;
		top: -10px;
		z-index: 2000;
		border-radius: 0;
		padding: 10px;
		background: #FFF;
	}
	
	.site-header.open .nav {
		margin-top: 60px !important;
	}
	
	.site-header.open .nav > li > a {
		display: block;
		padding: 12px 14px;
		border-radius: 0;
		background: #fff;
		border: none;
	}
	
	
	.site-header.open .main-nav{
		opacity: 1; visibility: visible; transform: translateY(0);
	}

	/* Bouton X (fixe en haut à droite) */
	.drawer-close{
		position: fixed;
		top: calc(8px + env(safe-area-inset-top));
		right: calc(8px + env(safe-area-inset-right));
		width: 44px; height: 44px;
		border: 0; background: transparent; cursor: pointer;
		z-index: 1003;
	}
	.drawer-close::before, .drawer-close::after{
		content:""; position:absolute; left:50%; top:50%;
		width:20px; height:2px; background:#1F2A44; border-radius:2px;
	}
	.drawer-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
	.drawer-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
	.drawer-close[hidden]{ display:none; }

	/* Liste large façon Apple */
	.nav{ list-style:none; margin:56px 0 0; padding:0; display:block; }
	.nav > li + li{ border-top:1px solid rgba(17,24,39,.08); }
	.nav > li > a{
		display:block; padding:18px 6px;
		font:700 clamp(22px,5vw,30px)/1.25 ui-sans-serif,system-ui,-apple-system,"SF Pro Text",Inter,Roboto,Segoe UI,sans-serif;
		color:#111827; text-decoration:none; border-radius:12px;
		background: transparent;
	}
	.nav > li > a:hover{ background:rgba(17,24,39,.04); }
	.nav > li > a.is-active{ color:#FF4FA0; }

	/* Pas de sous-menus en mobile */
	.has-sub .sub{ display:none !important; }
}

/* ===== Burger style Apple : 2 barres -> X ===== */

/* bulle de verre propre */
.burger{
  position: relative;
  margin-left: auto;
  width: 46px; height: 46px;
  border: 0; border-radius: 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    0 10px 24px rgba(16,24,40,.12),
    inset 0 1px 0 rgba(255,255,255,.85);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.burger:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 32px rgba(16,24,40,.16),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.burger:active{ transform: translateY(0); }

/* on n'utilise pas tes <span> */
.burger span{ display:none; }

/* variables pour l'espacement et l'épaisseur */
.burger{
  --bar-w: 22px;
  --bar-h: 2px;
  --bar-gap: 6px;      /* distance depuis le centre */
  --bar-color: #1F2A44;
}

/* les 2 barres (haut & bas) */
.burger::before,
.burger::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width: var(--bar-w); height: var(--bar-h);
  background: var(--bar-color);
  border-radius: 2px;
  transform-origin: 50% 50%;
  transition: transform .25s ease, opacity .2s ease, width .2s ease;
}

/* position en mode repos (deux traits parallèles) */
.burger::before{ transform: translate(-50%, calc(-50% - var(--bar-gap))); }
.burger::after { transform: translate(-50%, calc(-50% + var(--bar-gap))); }

/* état ouvert -> les 2 barres se croisent en X au centre */
.burger[aria-expanded="true"]::before{
  transform: translate(-50%, -50%) rotate(45deg);
  width: 24px;
}
.burger[aria-expanded="true"]::after{
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 24px;
}

/* accessibilité : moins d’animations si demandé */
@media (prefers-reduced-motion: reduce){
  .burger,
  .burger::before, .burger::after{ transition: none; }
}

/* === Apple-like Drawer: slide + fade + densification du verre === */
@media (max-width: 860px){

  /* sécu: la slab ne clippe pas quand le menu est ouvert */
  .site-header.open .slab{ overflow: visible !important; }

  /* pile de superposition claire */
  .nav-overlay{ z-index: 1000 !important; }
  .site-header{ z-index: 1002 !important; }
  /* le nav porté dans <body> passe au-dessus du header */
  #main-nav{ z-index: 1003 !important; }

  /* état FERMÉ (invisible, légèrement au-dessus, compressé) */


  body.nav-open #main-nav{
    opacity: 1; visibility: visible;
    transform: translateY(0) scaleY(1);
    background: #fff;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    transition:
      opacity .28s cubic-bezier(.22,.61,.36,1),
      visibility 0s step-start,
      transform .44s cubic-bezier(.2,.8,.16,1),
      backdrop-filter .28s ease, -webkit-backdrop-filter .28s ease,
      background .28s ease;
  }

  /* overlay fade synchro */
  .nav-overlay{
    position: fixed !important; inset: 0 !important;
    /*background: rgba(15,17,25,.35) !important;*/
	background: #fff !important;
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease !important;
  }
  .site-header.open .nav-overlay,
  body.nav-open .nav-overlay{ opacity: 1; visibility: visible; }

  /* liste large façon Apple (tes styles, consolidés) */
  #main-nav .nav{ list-style:none; margin:56px 0 0; padding:0; display:block; }
  #main-nav .nav>li+li{ border-top:1px solid rgba(17,24,39,.08); }
  #main-nav .nav>li>a{
    display:block; padding:18px 6px;
    font:700 clamp(22px,5vw,30px)/1.25 system-ui,-apple-system,"SF Pro Text",Inter,Roboto,Segoe UI,sans-serif;
    color:#111827; text-decoration:none; border-radius:12px;
    transition: background .18s ease, transform .18s ease;
  }
  #main-nav .nav>li>a:hover{ background:rgba(17,24,39,.04); transform: translateX(2px); }
  #main-nav .nav>li>a.is-active{ color: var(--accent); }

  /* accessibilité */
  @media (prefers-reduced-motion: reduce){
    #main-nav, body.nav-open #main-nav, .nav-overlay{ transition: none !important; transform: none !important; }
  }
	
	
}

/* ===== MENU 02/09/2025 ===== */
@media (max-width: 860px){
  /* la bulle ne clippe pas quand on ouvre */
  .site-header .slab{ overflow: visible; }

  /* pile */
  .burger{ position: relative; z-index: 1300; }
  .nav-overlay{ position: fixed; inset: 0; z-index: 1100; }

  /* nav hors header, plein écran, caché par défaut */
  #main-nav{
    position: fixed; inset: 0;
    z-index: 1200; /* au-dessus de l’overlay */
    display: block;
    height: 100dvh;
    padding: calc(12px + env(safe-area-inset-top))
             max(16px, env(safe-area-inset-right))
             max(28px, env(safe-area-inset-bottom))
             max(16px, env(safe-area-inset-left));
    overflow: auto; -webkit-overflow-scrolling: touch;

    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);

    opacity: 0; visibility: hidden;
    transform: translateY(-12px) scaleY(.96);
    transform-origin: 50% 0%;
    transition:
      opacity .28s cubic-bezier(.22,.61,.36,1),
      visibility .28s step-end,
      transform .38s cubic-bezier(.2,.8,.16,1),
      backdrop-filter .28s ease,
      -webkit-backdrop-filter .28s ease,
      background .28s ease;
  }

  /* état ouvert */
  body.nav-open #main-nav{
    opacity: 1; visibility: visible;
    transform: translateY(0) scaleY(1);
    /*background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));*/
	background: #fff !important;	  
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  /* overlay */
  .nav-overlay{
    background: rgba(15,17,25,.35);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
  }
  body.nav-open .nav-overlay{ opacity: 1; visibility: visible; }

  /* Liste façon Apple (reprend ta typo) */
  #main-nav .nav{ list-style:none; margin:56px 0 0; padding:0; display:block; }
  #main-nav .nav > li + li{ border-top:1px solid rgba(17,24,39,.08); }
  #main-nav .nav > li > a{
    display:block; padding:18px 6px;
    font:700 clamp(22px,5vw,30px)/1.25 system-ui,-apple-system,"SF Pro Text",Inter,Roboto,Segoe UI,sans-serif;
    color:#111827; border-radius:12px; text-decoration:none;
    transition: background .18s ease, transform .18s ease;
  }
  #main-nav .nav > li > a:hover{ background:rgba(17,24,39,.04); transform: translateX(2px); }
  #main-nav .nav > li > a.is-active{ color: var(--accent); }

  /* X flottant dans le nav */
  #main-nav .drawer-close{
    position: fixed;
    top: calc(8px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
    width: 44px; height: 44px;
    border: 0; background: transparent; cursor: pointer;
    z-index: 1301;
  }
  #main-nav .drawer-close::before, #main-nav .drawer-close::after{
    content:""; position:absolute; left:50%; top:50%;
    width:20px; height:2px; background:#1F2A44; border-radius:2px;
  }
  #main-nav .drawer-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
  #main-nav .drawer-close::after{  transform:translate(-50%,-50%) rotate(-45deg); }

  @media (prefers-reduced-motion: reduce){
    #main-nav, body.nav-open #main-nav, .nav-overlay{ transition: none !important; transform: none !important; }
  }
}

@media (max-width:860px){
  .nav-overlay{ position:fixed; inset:0; z-index:1500; }
  #main-nav{
    position:fixed !important; inset:0;
    z-index:2000 !important;       /* au-dessus de l’overlay */
    height:100dvh; overflow:auto; -webkit-overflow-scrolling:touch;

    /* caché par défaut */
    opacity:0; visibility:hidden;
    transform:translateY(-12px) scaleY(.96);
    transition:opacity .28s, visibility .28s step-end, transform .38s;
  }
  body.nav-open #main-nav{
    opacity:1; visibility:visible;
    transform:translateY(0) scaleY(1);
  }
	.offres-track {
		padding: 0px 10px !important;
	}	
	
	.offres-grid{
		padding: 5px 0px !important;
	}
}

/* autorise les interactions quand le menu est ouvert */
body.nav-open .site-header{ pointer-events:auto; }
/* ===== MENU 02/09/2025 ===== */

:root{
  --wrap: 1280px;
  --gutter: clamp(32px, 6vw, 48px); /* avant c’était 16–24px */
}

/* Container global utilisé partout (header, sections, etc.) */
.wrap{
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Le header ne rajoute que du padding vertical */
.site-header{ padding: 12px 0; }          /* au lieu de 12px 16px */
@media (max-width:860px){
  .site-header{ padding: 10px 0; }        /* mobile */
}

/* ============== FAQ — structure commune ============== */
.faq{
  display: grid;
  gap: 14px;
}


/* ===== FAQ 02/09/2025 ===== */
.faq-item{
  /*background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.70));
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 8px 24px rgba(16,24,40,.06);
  overflow: hidden;*/
}
/* ===== FAQ 02/09/2025 ===== */


/* on met l’item en grille : question (col gauche), halo (col droite), réponse en dessous */
.faq-item{
  display: grid;
  grid-template-columns: 1fr 54px;   /* 54px = colonne halo à droite */
  grid-template-rows: auto auto;
  grid-template-areas:
    "q dot"
    "a dot";
  align-items: start;
}

/* ---------- Question */
.faq-q{
  grid-area: q;
  text-align: left;
  width: 100%;
  padding: 18px 22px 14px 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: 700 clamp(18px, 2.4vw, 22px)/1.35 system-ui,-apple-system,"SF Pro Text",Inter,Roboto,Segoe UI,sans-serif;
  color: #0F172A;
  position: relative;
  outline: none;
}

/* le “halo” rose à droite : pseudo-élément du bouton */
.faq-q::after{
  content:"";
  grid-area: dot;            /* utile en desktop; pour mobile on bascule en abs */
  position: absolute;
  right: 14px;
  top: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  pointer-events: none;
  /* pastille + halo diffus */
  background:
    radial-gradient(closest-side, rgba(255,79,160,.25) 0%, rgba(255,79,160,0) 72%),
    radial-gradient(closest-side, #fff 0 99%, transparent 100%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.9) inset,
    0 8px 18px rgba(255,79,160,.24);
  filter: blur(0.2px); /* un chouïa pour adoucir */
  opacity: .55;
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* hover : halo un peu plus présent */
.faq-q:hover::after,
.faq-q:focus-visible::after{
  opacity: .9;
  box-shadow:
    0 0 0 2px rgba(255,255,255,1) inset,
    0 10px 26px rgba(255,79,160,.34);
  transform: translateY(-1px);
  filter: blur(.3px);
}

/* état ouvert : halo renforcé + teinte du titre */
.faq-item.open .faq-q{ color:#111827; }
.faq-item.open .faq-q::after{
  opacity: 1;
  box-shadow:
    0 0 0 2px rgba(255,255,255,1) inset,
    0 14px 36px rgba(255,79,160,.44);
  filter: blur(.4px);
}

/* fine séparation visuelle entre Q et A */
.faq-item.open .faq-q{
  border-bottom: 1px solid rgba(15,23,42,.06);
}

/* ---------- Réponse (plus “tassée”) */
.faq-a{
  grid-area: a;
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
  /* on resserre la colonne de texte pour un bloc plus dense et lisible */
  padding: 0 22px 18px 22px;
}
.faq-a p{
  max-width: min(70ch, 92%);     /* “tassée” : largeur de texte contrôlée */
  margin: 12px 0 0;
  color: #334155;
  font: 500 16px/1.6 system-ui,-apple-system,Inter,Roboto,Segoe UI,sans-serif;
}

/* quand ouvert, on laisse le JS gérer la hauteur; mais on garde un min */
.faq-item.open .faq-a{ padding-bottom: 22px; }

/* ============== Responsive ============== */
@media (max-width: 860px){
  /* on passe la “colonne halo” en position absolue pour que la question puisse prendre toute la ligne */
  .faq-item{
    grid-template-columns: 1fr;         /* une seule colonne visuelle */
    grid-template-areas:
      "q"
      "a";
  }
  .faq-q{ padding-right: 72px; }        /* on réserve de l’espace pour la pastille */
  .faq-q::after{
    position: absolute;
    right: 16px; top: 14px;
  }
  .faq-a p{ max-width: 100%; }          /* sur mobile, on laisse le texte occuper la largeur utile */
}