/* ══════════════════════════════════════════════════════════════════════════
   Ce qui entoure chaque page : en-tête, pied, bulle d'appel, fenêtre de
   rendez-vous. Mesuré sur les captures.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Logo ──────────────────────────────────────────────────────────────── */
.logo {
  font-family: var(--police-logo); font-weight: 800; font-size: 56px;
  line-height: 1; letter-spacing: -.01em; display: inline-block; white-space: nowrap;
  background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Le « i » est incliné comme une barre de fraction. Transformé, il sort du
   découpage du parent : il reprend donc une couleur pleine. */
.logo i { font-style: normal; display: inline-block; transform: skewX(-12deg); margin: 0 .02em; color: #12A7C2; }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) { .logo { color: var(--vert); } }

/* ── En-tête ───────────────────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(4, 8, 14, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.055);
  transition: background .4s var(--douceur), border-color .4s var(--douceur), box-shadow .4s var(--douceur);
}
/* Tant qu'on est en haut, la barre se fond dans la page — c'est voulu, et
   c'est ce que montre la maquette. Dès qu'on défile, elle se DÉTACHE : fond
   plus dense, filet plus net, et une ombre portée. Sans quoi, sur un fond
   noir et sur un petit écran, on ne sait plus où finit la barre et où
   commence la page (Lionel, 22/09). */
.entete[data-defile] {
  background: rgba(7, 12, 19, .94);
  border-bottom-color: rgba(255,255,255,.1);
  box-shadow: 0 14px 34px -22px rgba(0,0,0,.95);
}
/* Trois zones, pas un alignement à droite : la barre de navigation est
   CENTRÉE SUR LA PAGE dans la maquette (elle s'étend de 370 à 790 sur 1180,
   milieu 580 ≈ centre). Poussée à droite, elle partait 80 px trop loin. */
.entete__rang { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 78px; }
.entete__nav { display: flex; align-items: center; gap: 22px; justify-content: center; margin-top: 10px; }
/* Sur ordinateur le bouton sort du flux de la barre pour se caler à droite
   du conteneur ; la barre, elle, reste centrée sur la page. Sur téléphone
   il redevient un élément ordinaire du menu déplié (Lionel, 22/09 : dans la
   barre, il recouvrait le logo). */
.entete__action { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.entete__nav a {
  position: relative; font-size: 14.5px; color: #C3C9CF; padding-block: 6px;
  transition: color .3s var(--douceur);
}
.entete__nav a:hover { color: var(--blanc); }
.entete__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--vert);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--douceur);
}
.entete__nav a:hover::after { transform: scaleX(1); }
.entete__nav a[aria-current="page"] { color: var(--blanc); font-weight: 600; }
.entete__nav a[aria-current="page"]::after { transform: scaleX(1); }
.entete__action .bouton { padding: 11px 26px; font-size: 14px; }   /* mesuré : 177 × 39 */

/* Le bouton au doigt n'existe pas sur ordinateur : laissé visible, il
   poussait le « Prendre rendez-vous » de 45 px vers la gauche et le rang
   ne finissait plus au bord du conteneur. */
.entete__burger { display: none; }

/* Le sous-menu « Nos agents » */
.menu { position: relative; }
.menu__bouton {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; color: #C3C9CF; cursor: pointer; padding-block: 6px;
  transition: color .3s var(--douceur);
}
.menu__bouton:hover { color: var(--blanc); }
.menu__bouton::after {
  content: ""; position: absolute; left: 0; right: 16px; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--vert);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--douceur);
}
.menu__bouton:hover::after { transform: scaleX(1); }
.menu__bouton[aria-current="page"], .menu__bouton[data-branche] { color: var(--blanc); font-weight: 600; }
.menu__bouton[aria-current="page"]::after { transform: scaleX(1); }
.menu__volet a[aria-current="page"] { color: var(--vert); }
.menu__bouton svg { width: 13px; height: 13px; transition: transform .35s var(--douceur); }

.menu[data-ouvert] .menu__bouton svg { transform: rotate(180deg); }
.menu__volet {
  position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0;
  min-width: 232px; padding: 8px; border-radius: 16px;
  background: #0A0E15; border: 1px solid var(--bord-vif);
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.95);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .35s var(--douceur), transform .35s var(--douceur), visibility .35s;
}
.menu[data-ouvert] .menu__volet { opacity: 1; visibility: visible; transform: translateY(0); }
.menu__volet a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  font-size: 14px; color: #C3C9CF; transition: background .25s, color .25s;
}
.menu__volet a:hover { background: rgba(255,255,255,.05); color: var(--blanc); }

/* ── Pied de page ──────────────────────────────────────────────────────── */
.pied { background: var(--nuit-pied); border-top: 1px solid rgba(255,255,255,.055); padding-block: 44px 30px; }
.pied__haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.pied .logo { font-size: 38px; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14.5px; color: #8B9299; }
.pied__liens a { transition: color .3s; }
.pied__liens a:hover { color: var(--blanc); }
.pied__jetons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pied__contact {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.05);
  font-size: 14px; color: #8B9299;
}
.pied__contact .sep { color: rgba(255,255,255,.16); }
.pied__contact a { color: var(--vert); }
.pied__contact a:hover { text-decoration: underline; }
.pied__social { margin-left: auto; display: flex; gap: 8px; }
.pied__social a {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: #8B9299; transition: color .3s, background .3s, transform .35s var(--douceur);
}
.pied__social a:hover { color: var(--blanc); background: rgba(255,255,255,.1); transform: translateY(-2px); }
.pied__social svg { width: 14px; height: 14px; }
.pied__bas {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 16px; font-size: 13px; color: var(--gris);
}
.pied__bas a:hover { color: var(--blanc); }
/* Les trois pages juridiques (textes de Mike, 10/10/2026). Le lien « Gérer
   les cookies » viendra seulement s'il faut un bandeau (point [C] ouvert),
   et « Conditions générales de vente » quand elles seront validées. */
.pied__legal { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pied__legal a { transition: color .3s; }

/* ── Bulle d'appel ─────────────────────────────────────────────────────── */
.bulle { position: fixed; right: 26px; bottom: 26px; z-index: 70; }
.bulle__bouton {
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: #00C77F; color: #04231A; display: grid; place-items: center;
  box-shadow: 0 12px 30px -10px rgba(0,199,127,.85);
  transition: transform .5s var(--douceur);
}
.bulle__bouton:hover { transform: scale(1.07); }
.bulle__bouton svg { width: 25px; height: 25px; }
.bulle__carte {
  position: absolute; right: 0; bottom: 68px; width: 272px; padding: 16px 40px 16px 18px;
  border-radius: 14px; background: #0D1219; border: 1px solid var(--bord-vif);
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.95); font-size: 15px; line-height: 1.5; color: #C3C9CF;
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.97);
  transition: opacity .4s var(--douceur), transform .4s var(--douceur), visibility .4s;
}
.bulle[data-ouvert] .bulle__carte { opacity: 1; visibility: visible; transform: none; }
.bulle__carte a { display: inline-block; margin-top: 10px; color: var(--vert); font-weight: 600; }
.bulle__fermer {
  position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; background: none; border: 0; cursor: pointer;
  color: var(--gris); font-size: 20px; line-height: 1; border-radius: 50%;
}

/* ── Fenêtre de rendez-vous ────────────────────────────────────────────── */
.rdv { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 76px 24px 24px; }
.rdv[hidden] { display: none; }
.rdv__voile { position: absolute; inset: 0; background: rgba(2, 5, 10, .82); backdrop-filter: blur(6px); }
.rdv__cadre {
  position: relative; width: min(100%, 1000px); height: min(calc(100vh - 100px), 760px);
  border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.9);
  animation: rdv-entre .5s var(--douceur) both;
}
@keyframes rdv-entre { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.rdv__fermer {
  position: absolute; top: 16px; right: 24px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 20px;
  border: 1px solid var(--bord-vif); border-radius: 999px; cursor: pointer;
  background: var(--carte-haute); color: var(--blanc); font: 600 15px/1 var(--police);
  transition: background .3s, border-color .3s;
}
.rdv__fermer span { font-size: 22px; font-weight: 400; transition: transform .4s var(--douceur); }
.rdv__fermer:hover { background: #18202B; border-color: rgba(255,255,255,.24); }
.rdv__fermer:hover span { transform: rotate(90deg); }
.rdv__fermer:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }
.rdv__calendrier { width: 100%; height: 100%; border: 0; }