/* ===== ACE Header (namespacé) — Desktop / Tablette / Mobile ===== */
.ace-header{ position:sticky; top:0; z-index:2000; background:#fff; border-bottom:1px solid #f1f3f5; }
.ace-topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:64px; flex-wrap:nowrap;
}
.ace-brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.02em; flex:0 0 auto; }
.ace-logo{ height:34px; width:auto; display:block; border-radius:6px; }
.ace-brand-name{ white-space:nowrap; }

/* Liens communs */
#ace-nav-desktop a, .ace-quicknav a{ text-decoration:none; color:inherit; }

/* ===== ÉTAT PAR DÉFAUT : tout est caché tant qu’un media query ne l’active pas ===== */
#ace-nav-desktop, .ace-quicknav, .ace-cta-bar{ display:none; }

/* ===== Desktop ≥1200px : menu aligné à droite, 1 ligne ===== */
@media (min-width:1200px){
  #ace-nav-desktop{ display:block; }
  #ace-nav-desktop{
    position:static !important; transform:none !important;
    background:transparent !important; padding:0 !important;
    flex:1 1 auto !important; margin-left:auto !important;
  }
  .ace-nav-list{
    display:flex !important; align-items:center; justify-content:flex-end; gap:16px;
    list-style:none; margin:0 !important; padding:0 !important; flex-wrap:nowrap !important;
  }
  .ace-nav-list a{ display:block; padding:10px 12px; border-radius:10px; }
  .ace-nav-list a.active{ background:#f2f4f7; }
  .ace-nav-list a.cta{ background:#0d6efd; color:#fff; }
}

/* ===== Mobile & tablette <1200px : QuickNav pliable + wrap ===== */
@media (max-width:1199px){
  .ace-quicknav{ display:block; background:#fff; border-top:1px solid #f1f3f5; }

  /* Barre (toujours visible) */
  .ace-q-bar{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:10px 12px; cursor:pointer;
    background:#fff;
  }
  .ace-q-title{ font-weight:800; letter-spacing:.02em; }
  .ace-q-chevron{
    width:18px; height:18px; border-right:2px solid #111; border-bottom:2px solid #111;
    transform: rotate(45deg); transition: transform .2s ease;
  }

  /* Panneau pliable (visible par défaut) */
  .ace-q-check{ position:absolute; left:-9999px; top:-9999px; }
  .ace-q-panel{ overflow:hidden; transition:max-height .25s ease, opacity .2s ease; }
  .ace-q-panel .ace-q-scroll{
    display:flex; flex-wrap:wrap; gap:8px 8px;
    overflow:visible; padding:8px 12px 12px;
  }

  /* Boutons : wrap en colonnes — TABLETTE (3 colonnes), MOBILE (2 puis 1) */
  .ace-qbtn{
    flex:1 1 calc(33.333% - 8px);
    padding:10px 12px; border-radius:999px;
    background:#f2f4f7; color:#111; border:1px solid #e8eef5;
    font-weight:600; line-height:1.1; white-space:nowrap;
  }
  .ace-qbtn.cta{ background:#0d6efd; color:#fff; border-color:transparent; }
  .ace-qbtn.is-active{ outline:2px solid #0d6efd; outline-offset:2px; }

  /* MOBILE strict (<768px) : 2 colonnes, puis 1 sous 360px */
  @media (max-width:767px){
    .ace-qbtn{ flex-basis: calc(50% - 8px); }
    .ace-qbtn.cta{ flex-basis: 100%; }
  }
  @media (max-width:360px){
    .ace-qbtn{ flex-basis: 100%; }
  }

  /* Pliage : quand coché => on ferme le panneau et on pivote la flèche */
  .ace-q-check:checked ~ .ace-q-bar .ace-q-chevron{ transform: rotate(-135deg); }
  .ace-q-check:checked ~ .ace-q-panel{
    max-height: 0; opacity: 0; padding-top: 0;
  }
  /* Ouvert par défaut — max-height large pour laisser passer le contenu */
  .ace-q-panel{ max-height: 480px; opacity: 1; }
}

/* ===== CTA bas d’écran (mobile & tablette) : Appeler / Écrire ===== */
:root{ --ace-cta-h: 64px; }
@media (max-width:1199px){
  .ace-cta-bar{
    display:flex;
    position: fixed; left:0; right:0; bottom:0;
    z-index: 1800;
    gap:8px; align-items:stretch;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    height: var(--ace-cta-h);
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 -6px 20px rgba(0,0,0,.12);
    transform: translateZ(0);
  }
  .ace-cta-btn{
    flex:1 1 0; min-width:0;
    display:flex; align-items:center; justify-content:center;
    padding:12px; border-radius:12px;
    font-weight:700; text-decoration:none; line-height:1;
    border:1.5px solid transparent; user-select:none;
  }
  .ace-cta-btn.phone{ background:#fff; color:#0d6efd; border-color:#dbe4ff; }
  .ace-cta-btn.ghost{ background:transparent; color:#0d6efd; border-color:#0d6efd; }

  /* Laisse de la place au contenu */
  .ace-body{ padding-bottom: calc(var(--ace-cta-h) + env(safe-area-inset-bottom)); }
}
/* ===== Auto-minimize du header sur mobile & tablette ===== */
@media (max-width:1199px){
  /* animation douce du topbar (logo/titre) */
  .ace-topbar{ transition: transform .22s ease; }

  /* Quand le body a .ace-q-min → topbar caché, bandeau compact */
  .ace-body.ace-q-min .ace-topbar{
    transform: translateY(-120%);
  }
  /* bandeau Navigation compact */
  .ace-body.ace-q-min .ace-q-bar{
    padding: 6px 10px;
    border-top: 1px solid #f1f3f5;
    border-bottom: 1px solid #f1f3f5;
  }
  /* on laisse seulement l’icône (chevron), on masque le libellé pour gagner de la place */
  .ace-body.ace-q-min .ace-q-title{
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    margin: -1px !important; padding: 0 !important;
    clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
  }
  /* le panneau de liens est fermé en mode auto-minimisé */
  .ace-body.ace-q-min .ace-q-panel{
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }
  /* chevron orienté en "déplier" */
  .ace-body.ace-q-min .ace-q-chevron{
    transform: rotate(-135deg);
  }
}
/* ===== Header minimisé : garder le logo visible (mobile & tablette) ===== */
@media (max-width:1199px){
  /* avant : on translatait le topbar hors écran
     maintenant : on le compacte pour garder le logo visible */
  .ace-topbar{ transition: padding .2s ease, min-height .2s ease, box-shadow .2s ease; }

  .ace-body.ace-q-min .ace-topbar{
    min-height: 48px;
    padding-top: 6px;
    padding-bottom: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    background:#fff;
  }
  /* on masque juste le libellé texte pour gagner de la place */
  .ace-body.ace-q-min .ace-brand-name{
    position:absolute !important; width:1px !important; height:1px !important;
    margin:-1px !important; padding:0 !important; border:0 !important; clip:rect(0 0 0 0) !important;
  }
  /* logo légèrement réduit pour un bandeau compact */
  .ace-body.ace-q-min .ace-logo{ height:28px; }
  /* bandeau "Navigation" compact + panneau fermé (déjà géré) */
  .ace-body.ace-q-min .ace-q-bar{ padding: 6px 10px; }
  .ace-body.ace-q-min .ace-q-title{ /* déjà masqué dans la version précédente */ }
}
/* ===== Contact (desktop) : toujours en blanc sur fond bleu ===== */
@media (min-width:1200px){
  .ace-nav-list a.cta{
    background:#0d6efd !important;
    color:#fff !important;
  }
  .ace-nav-list a.cta:hover{
    filter: brightness(0.95);
  }
}
/* ===== Améliorations Safari / iOS ===== */
html{ -webkit-text-size-adjust: 100%; }               /* évite les zooms textes auto */
a, button{ -webkit-tap-highlight-color: transparent; }/* tap highlight neutre */

/* Backdrop fallback si non supporté */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .ace-cta-bar{ background:#ffffff; }                 /* lisible sans blur */
}

/* Viewport dynamique (barre d'adresse iOS) — si supporté */
@supports (height: 100dvh){
  /* exemple si un bloc plein écran est utilisé ailleurs */
  .vh-screen{ min-height: 100dvh; }
}
/* === QuickNav repliée : titre à gauche + chevron à droite (mobile & tablette) === */
@media (max-width:1199px){
  /* bandeau compact, alignement gauche/droite */
  .ace-body.ace-q-min .ace-q-bar{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 12px;           /* un chouïa plus grand pour caser “Navigation” */
    border-top:1px solid #f1f3f5;
    border-bottom:1px solid #f1f3f5;
    background:#fff;
  }
  /* RÉ-AFFICHE le libellé (écrase le “visually-hidden” précédent) */
  .ace-body.ace-q-min .ace-q-title{
    position: static !important;
    width: auto !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
    clip: auto !important;
    white-space: nowrap !important;
    border: 0 !important;
    font-weight: 800;
    letter-spacing: .02em;
  }
  /* chevron à droite, en position “déplier” */
  .ace-body.ace-q-min .ace-q-chevron{
    margin-left:12px;
    transform: rotate(-135deg); /* pointe vers le haut-gauche = “ouvrir” */
  }
  /* on garde le panneau fermé quand minimisé */
  .ace-body.ace-q-min .ace-q-panel{
    max-height:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
  }
}
/* ===== Header replié : cacher totalement la barre logo (mobile & tablette) ===== */
@media (max-width:1199px){
  /* état normal (barre logo visible) */
  .ace-topbar{
    /* hauteur “ouverte” — ajuste si ta barre est plus haute */
    max-height: 64px;
    padding-top: 8px;
    padding-bottom: 8px;
    transition:
      max-height .22s ease,
      padding .22s ease,
      box-shadow .22s ease;
  }

  /* état replié (appliqué quand <body> a .ace-q-min via le script) */
  .ace-body.ace-q-min .ace-topbar{
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    box-shadow: none;
    border-bottom: 0; /* optionnel : retire la ligne pour un vrai gain visuel */
  }

  /* on conserve le bandeau “Navigation” + chevron (déjà en place) */
  .ace-body.ace-q-min .ace-q-bar{
    display:flex; align-items:center; justify-content:space-between;
    padding: 8px 12px;
    border-top: 1px solid #f1f3f5;
    border-bottom: 1px solid #f1f3f5;
    background:#fff;
  }
  .ace-body.ace-q-min .ace-q-title{
    position: static !important;
    width: auto !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
    clip: auto !important; white-space: nowrap !important; border: 0 !important;
    font-weight: 800; letter-spacing: .02em;
  }
  .ace-body.ace-q-min .ace-q-chevron{
    margin-left: 12px;
    transform: rotate(-135deg);
  }

  /* panneau resté fermé en mode replié */
  .ace-body.ace-q-min .ace-q-panel{
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }
}
/* ==== MODE REPLIÉ : cacher 100% la barre logo (mobile & tablette) ==== */
@media (max-width:1199px){
  /* On annule toute hauteur/espacement/bordure du topbar */
  .ace-body.ace-q-min .ace-topbar{
    min-height: 0 !important;
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;          /* évite tout “voile” blanc résiduel */
  }
  /* On masque aussi son contenu, au cas où un style interne forcerait une hauteur */
  .ace-body.ace-q-min .ace-topbar > *{
    display: none !important;
  }

  /* Le header n’ajoute plus de bordure : la séparation visuelle se fait via la QuickNav */
  .ace-body.ace-q-min .ace-header{
    border-bottom: 0 !important;
  }
  /* Bandeau “Navigation” visible et propre */
  .ace-body.ace-q-min .ace-q-bar{
    display:flex; align-items:center; justify-content:space-between;
    padding: 8px 12px;
    background:#fff;
    border-top: 0 !important;
    border-bottom: 1px solid #f1f3f5 !important;
  }
  .ace-body.ace-q-min .ace-q-title{
    position: static !important;
    width:auto !important; height:auto !important;
    margin:0 !important; padding:0 !important;
    clip:auto !important; white-space:nowrap !important; border:0 !important;
    font-weight:800; letter-spacing:.02em;
  }
  .ace-body.ace-q-min .ace-q-chevron{
    margin-left:12px;
    transform: rotate(-135deg); /* icône = “déplier” */
  }

  /* Le panneau reste fermé en mode replié */
  .ace-body.ace-q-min .ace-q-panel{
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }
}
/* ===== Focus menu : flouter la page quand la QuickNav est ouverte (mobile & tablette) ===== */
@media (max-width:1199px){
  /* Le menu reste au-dessus */
  .ace-quicknav{ position: relative; z-index: 2100; }

  /* Flou + voile sur le contenu de la page */
  .ace-body.ace-q-dim main,
  .ace-body.ace-q-dim footer{
    filter: blur(4px);
    opacity: .94;
    transition: filter .18s ease, opacity .18s ease;
    pointer-events: none;  /* évite les clics sur l’arrière-plan */
  }

  /* Voile sombre indépendant (couvre tout l'écran) */
  .ace-body.ace-q-dim main::before{
    content:"";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.24);
    z-index: 1700;           /* sous la QuickNav (2100), au-dessus du contenu */
    pointer-events: auto;    /* “capture” les clics */
  }

  /* On masque la barre CTA bas d’écran pendant l’ouverture */
  .ace-body.ace-q-dim .ace-cta-bar{
    transform: translateY(120%);
    transition: transform .18s ease;
  }

  /* Bloque le scroll de fond pour éviter les “secousses” iOS/Safari */
  .ace-body.ace-q-dim{
    overflow: hidden;
    touch-action: none;
  }
}
/* ===== Voile + flou quand la QuickNav est ouverte (mobile & tablette) ===== */
@media (max-width:1199px){
  /* Voile dédié (au-dessus du contenu, sous la QuickNav) */
  .ace-dim{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.24);
    opacity: 0; visibility: hidden;
    z-index: 1900;                /* QuickNav ~2100 */
    transition: opacity .18s ease, visibility .18s ease;
    pointer-events: none;
  }
  /* Blur natif si supporté (Safari/Chromium) */
  @supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){
    .ace-dim{ backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  }

  /* État ouvert : affiche le voile et floute le contenu en fallback universel */
  .ace-body.ace-q-dim .ace-dim{
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .ace-body.ace-q-dim main,
  .ace-body.ace-q-dim footer{
    filter: blur(3px);
    opacity: .96;
    transition: filter .18s ease, opacity .18s ease;
    pointer-events: none;
  }

  /* Masque la barre CTA pendant l’ouverture */
  .ace-body.ace-q-dim .ace-cta-bar{ transform: translateY(120%); transition: transform .18s ease; }

  /* Bloque le scroll d’arrière-plan (iOS/Safari) */
  .ace-body.ace-q-dim{ overflow: hidden; touch-action: none; }
}
/* Voile cliquable et “draggable” */
@media (max-width:1199px){
  .ace-dim{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.24);
    opacity: 0; visibility: hidden;
    z-index: 1900;
    transition: opacity .18s ease, visibility .18s ease;
    pointer-events: none;              /* inactif par défaut */
    touch-action: none;                /* on gère le scroll en JS */
    cursor: pointer;
  }
  @supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){
    .ace-dim{ backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  }
  .ace-body.ace-q-dim .ace-dim{
    opacity: 1; visibility: visible; pointer-events: auto;   /* actif quand menu ouvert */
  }

  /* Flou/fallback sur le contenu, CTA masqué et scroll bloqué pendant l’ouverture */
  .ace-body.ace-q-dim main, .ace-body.ace-q-dim footer{
    filter: blur(3px);
    opacity: .96;
    transition: filter .18s ease, opacity .18s ease;
    pointer-events: none;
  }
  .ace-body.ace-q-dim .ace-cta-bar{ transform: translateY(120%); transition: transform .18s ease; }
  .ace-body.ace-q-dim{ overflow: hidden; touch-action: none; }
}
/* ===== Coachmark “Balayez pour continuer” (mobile & tablette) ===== */
@media (max-width:1199px){
  .ace-dim-hint{
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(8px);
    opacity: 0; visibility: hidden;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,.9);
    color: #111;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 2005; /* au-dessus du voile (1900), sous la QuickNav (~2100) */
    pointer-events: none;  /* le voile capte les interactions */
    font-weight: 700;
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    backdrop-filter: saturate(140%) blur(6px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  }
  .ace-dim-hint .hint-text{ white-space: nowrap; font-size: 14px; letter-spacing: .01em; }

  /* Chevrons CSS */
  .ace-dim-hint .chev{
    width: 14px; height: 14px;
    border-right: 2px solid #111; border-bottom: 2px solid #111;
    opacity: .9;
  }
  .ace-dim-hint .chev.up{ transform: rotate(135deg); }
  .ace-dim-hint .chev.down{ transform: rotate(-45deg); }

  /* Animations subtiles (désactivées si reduced motion) */
  @media (prefers-reduced-motion: no-preference){
    @keyframes float-up   { 0%{ transform: translateY(2px) rotate(135deg); } 50%{ transform: translateY(-2px) rotate(135deg);} 100%{ transform: translateY(2px) rotate(135deg);} }
    @keyframes float-down { 0%{ transform: translateY(-2px) rotate(-45deg);} 50%{ transform: translateY(2px) rotate(-45deg);} 100%{ transform: translateY(-2px) rotate(-45deg);} }
    .ace-dim-hint .chev.up{ animation: float-up 1.4s ease-in-out infinite; }
    .ace-dim-hint .chev.down{ animation: float-down 1.4s ease-in-out infinite; }
  }

  /* État affiché (piloté par JS) */
  .ace-dim-hint.show{
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
  @media (min-width:1200px){ #ace-dim, #ace-dim-hint { display:none !important; } }
}