/* ============================================================
   EYWA — Header partage (source unique de verite)
   Charge APRES le CSS de chaque page pour garantir un rendu
   identique sur les 6 pages. Point de rupture unique : 760px.
   Ne pas redefinir .topbar / .nav / .navlinks ailleurs.
   ============================================================ */

/* Largeur de conteneur unique : l'accueil utilisait 1180px et les autres
   pages 1160px, ce qui decalait le logo et le bouton d'une page a l'autre. */
.wrap { width: min(1180px, calc(100% - 42px)); margin: auto; }

/* Reseaux sociaux du pied de page : discrets, juste les logos.
   Volontairement pas de section dediee dans la page : l'objectif est de
   garder le visiteur sur le site, pas de l'envoyer sur Instagram.
   YouTube, Facebook et TikTok ne sont pas cliquables tant que les liens
   ne sont pas fournis, plutot que de pointer dans le vide. */
.footer-social { display: flex; align-items: center; gap: 14px; }
.footer-social a, .footer-social span { display: inline-flex; color: inherit; opacity: .62; transition: opacity .15s; }
.footer-social a:hover { opacity: 1; }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; display: block; }


.topbar {
  padding: 9px 18px;
  color: #fff;
  background: var(--green-dark);
  text-align: center;
  font: 600 12px/1.35 var(--sans);
  letter-spacing: .04em;
}

/* Barre fixee en haut au defilement. Le fond doit deborder sur toute la
   largeur alors que .nav est contraint a 1180px : d'ou le ::before en
   pleine largeur (inset lateral negatif jusqu'aux bords du viewport). */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

/* Mot-symbole EYWA en texte, dans la police des titres du site (Fraunces),
   a gauche et centre verticalement sur la ligne des liens. Remplace le
   decoupage du logo d'origine, dont les traits trop fins juraient avec le
   reste de la page. */
.logo {
  display: flex;
  align-items: center;
  color: var(--green);
  font: 400 34px/1 var(--serif);
  letter-spacing: .26em;
  text-indent: .26em; /* compense le tracking du dernier caractere */
  white-space: nowrap;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 26px;
  color: var(--green);
  font: 600 14px var(--sans);
  letter-spacing: .005em;
}
.nav-group { display: flex; align-items: center; gap: 26px; }

/* ------------------------------------------------------------------
   Anti-debordement du hero
   Un element de grille a min-width:auto : il ne peut pas devenir plus
   etroit que son contenu. Le bouton imposait min-width:356px, donc la
   colonne de texte avait un plancher de 356px + marges. Des que la
   piste devenait plus etroite, la colonne debordait et .hero
   (overflow:hidden) coupait le texte au lieu de le renvoyer a la ligne.
   ------------------------------------------------------------------ */
.hero-copy { min-width: 0; }
.hero-copy > * { min-width: 0; max-width: 100%; }
.hero-quote { width: 100%; }
.hero-quote .button { min-width: 0; width: 100%; max-width: 356px; }
.hero h1, .hero .lead, .hero-points li { overflow-wrap: break-word; }

/* Retour a la ligne impose, uniquement sur grand ecran (>=1024px), la ou
   la colonne est assez large pour l'honorer en 2 lignes propres. En
   dessous, le texte se replie naturellement : sinon un mot se retrouvait
   seul sur une ligne entre 851 et 1000px.
   L'espace avant le <br> est volontaire, il evite que les deux mots se
   collent quand le retour est masque. */
.br-lg { display: none; }
@media (min-width: 1024px) { .br-lg { display: inline; } }

/* Depuis que la barre est collante, un lien d'ancre (#avis, #lieux)
   amenait la cible sous la barre, qui masquait le haut de la section.
   scroll-margin-top reserve la hauteur de la barre + une marge. */
[id] { scroll-margin-top: 96px; }
@media (max-width: 760px) { [id] { scroll-margin-top: 84px; } }

/* ------------------------------------------------------------------
   Bloc devis du hero : libelle centre, fleche calee a droite, puis la
   sous-ligne et la note. Couleurs, polices et tailles EYWA conservees.
   ------------------------------------------------------------------ */
.hero-quote .button { position: relative; justify-content: center; text-align: center; }
/* la fleche sort du flux pour se caler a droite sans decentrer le libelle */
.hero-quote .button > span[aria-hidden="true"] { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
.hero-quote .button { padding-right: 58px; padding-left: 58px; font-size: 20px; }

/* 21px : degage l'ombre portee de 7px du bouton dore */
.quote-note { max-width: 356px; margin: 21px 0 0; color: var(--mute); font-size: 13px; line-height: 1.45; }

/* --- Hero : titre agrandi, accroche et liste de features supprimees,
   remplacees par les types d'evenements cibles (entreprise d'abord). --- */
/* text-wrap:balance repartit les lignes uniformement et evite qu'un mot
   se retrouve seul. Le retour forcé n'est plus necessaire a cette taille. */
.hero h1 { font-size: clamp(34px, 3.3vw, 46px) !important; max-width: 620px; text-wrap: balance; }
/* Deux colonnes alignees plutot qu'une ligne separee par des puces : la
   ligne filait jusqu'au bord de la photo, et les puces en debut de ligne
   creaient un bord gauche irregulier au moment du repli. */
.hero-events {
  display: grid; grid-template-columns: repeat(2, auto);
  justify-content: start; gap: 10px 34px;
  margin: 22px 0 26px; padding: 0; list-style: none;
  color: #34483c; font-size: 14.5px; font-weight: 600;
}
.hero-events li { display: flex; align-items: center; gap: 10px; }
.hero-events li::before {
  content: ''; flex: none; width: 5px; height: 5px;
  border-radius: 50%; background: var(--gold);
}
@media (max-width: 600px) {
  .hero-events { grid-template-columns: 1fr; gap: 9px; font-size: 13.5px; margin: 18px 0 22px; }
}

/* Vignettes du hero : plus grandes et plus espacees de la photo
   principale, pour qu'on les distingue vraiment.
   IMPORTANT : la hauteur de la grande photo ne doit etre forcee QUE sur
   desktop. En dessous de 851px, .photo-carousel n'a pas de hauteur
   definie, donc calc(100% - 112px) tombait a 0 et la grande photo
   disparaissait completement, seules les vignettes restaient visibles. */
@media (min-width: 851px) {
  .carousel-stage { height: calc(100% - 112px) !important; }
  .carousel-thumbs { height: 94px !important; margin-top: 18px !important; }
}
@media (max-width: 850px) {
  .carousel-thumbs { height: 84px !important; margin-top: 14px !important; }
}
@media (max-width: 600px) {
  .carousel-thumbs { height: 74px !important; margin-top: 13px !important; }
}

/* Mobile : hamburger tout a gauche, EYWA centre.
   Le logo est positionne en absolu pour etre centre sur la barre, sans
   que la largeur du hamburger le decale. */
@media (max-width: 760px) {
  .mobile-menu { order: -1; }
  .logo { position: absolute; left: 50%; transform: translateX(-50%); }
}

/* Bloc note de la section Avis de l'accueil */
.reviews-score { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px 0 14px; }
.reviews-score .note { color: var(--ink); font: 700 30px var(--sans); }
.reviews-score .ticks { font-size: 22px; }
.reviews-score .src { color: var(--mute); font-size: 14px; }
.reviews-line { max-width: 620px; margin: 0 auto 26px; color: #425147; font-size: 16px; line-height: 1.6; text-align: center; }
.reviews .button { display: inline-flex; }

.trust-row { gap: 8px; }
.rating-num { color: var(--ink); font-size: 15px; font-weight: 700; }
.rating-src { color: var(--mute); }

@media (max-width: 760px) {
  .hero-quote .button > span[aria-hidden="true"] { right: 18px; }
  .hero-quote .button { padding-right: 48px; padding-left: 48px; }
  .quote-note { max-width: none; }
}

/* Desktop : logo a gauche, puis les liens, le bouton devis a droite.
   display:contents fait des deux groupes des enfants directs du flex,
   sans toucher a l'ordre du DOM (le hamburger doit rester le frere
   precedent de .navlinks pour site.js). */
@media (min-width: 761px) {
  /* gap identique a celui des liens pour que les deux groupes se lisent
     comme un seul menu continu */
  .nav { justify-content: flex-start; gap: 26px; }
  .navlinks { display: contents; }
  /* pousse le premier groupe (et donc tout le menu) vers la droite,
     le bouton devis se retrouve au bout */
  .nav-group-left { margin-left: auto; }
}
/* Cible .nav-group > a : depuis que le menu est scinde en deux groupes,
   les liens ne sont plus enfants directs de .navlinks, donc l'ancien
   selecteur .navlinks > a ne les atteignait plus (aucun survol). */
.nav-group > a:not(.nav-button) { margin: -6px -9px; padding: 6px 9px; border-radius: 7px; transition: background .15s; }
.nav-group > a:not(.nav-button):hover { background: var(--green-soft, #eaf2ec); text-decoration: none; }
.nav-group > a[aria-current="page"] { background: var(--green-soft, #eaf2ec); }

/* Menu deroulant Lieux */
.nav-places { position: relative; }
.nav-places-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  margin: -6px -9px; padding: 6px 9px;
  border: 0; border-radius: 7px;
  color: inherit; background: transparent; cursor: pointer;
  font: inherit; letter-spacing: inherit;
  transition: background .15s;
}
.nav-places-trigger::after { content: '⌄'; font-size: 13px; transform: translateY(-1px); }
.nav-places:hover .nav-places-trigger,
.nav-places:focus-within .nav-places-trigger,
.nav-places.open .nav-places-trigger { background: var(--green-soft, #eaf2ec); }
.nav-places-menu {
  position: absolute; z-index: 30; top: 100%; left: 50%;
  display: grid; min-width: 190px; padding: 8px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; box-shadow: 0 14px 32px rgba(23, 61, 45, .13);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -5px);
  transition: opacity .15s, transform .15s;
}
.nav-places:hover .nav-places-menu,
.nav-places:focus-within .nav-places-menu,
.nav-places.open .nav-places-menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.nav-places-menu a { padding: 9px 11px; border-radius: 7px; color: var(--green); font-size: 13px; font-weight: 600; }
.nav-places-menu a:hover { background: var(--green-soft, #eaf2ec); text-decoration: none; }

/* Bouton devis */
.nav-button {
  min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 22px; border: 0; border-radius: 10px;
  color: #fff; background: var(--green); cursor: pointer;
  font: 700 15.5px var(--sans); letter-spacing: .01em;
  transition: background .16s, transform .16s;
}
.nav-button:hover { background: var(--green-dark); transform: translateY(-1px); }

/* Bouton hamburger */
.mobile-menu { display: none; border: 0; background: transparent; color: var(--green); cursor: pointer; }
.mobile-menu span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s, opacity .18s; }

@media (max-width: 760px) {
  .topbar { padding: 8px 14px; font-size: 11px; letter-spacing: .03em; }

  .nav { min-height: 58px; }
  .logo { font-size: 27px; letter-spacing: .22em; text-indent: .22em; }

  .mobile-menu {
    display: flex !important;
    width: 42px; height: 42px;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 0 !important;
  }
  .mobile-menu.is-open span:first-child { transform: translateY(7px) rotate(45deg); }
  .mobile-menu.is-open span:nth-child(2) { opacity: 0; }
  .mobile-menu.is-open span:last-child { transform: translateY(-7px) rotate(-45deg); }

  .navlinks { display: none; }
  /* display:contents : les liens des deux groupes redeviennent des enfants
     directs du panneau et s'empilent verticalement. */
  .navlinks.open .nav-group { display: contents; }
  .navlinks.open {
    position: absolute !important;
    z-index: 60 !important;
    top: 100% !important; left: 0; right: 0;
    display: flex !important;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 21px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 24px rgba(23, 61, 45, .1);
  }
  .navlinks.open a:not(.nav-button):not(.nav-places-menu a) { margin: 0; padding: 13px 0; border-radius: 0; }
  .navlinks.open .nav-button { margin-top: 10px; min-height: 52px; font-size: 15px; }

  /* Lieux devient un simple sous-groupe deplie, sans survol */
  .nav-places { display: block; }
  .nav-places-trigger { width: 100%; margin: 0; padding: 13px 0; border-radius: 0; justify-content: space-between; }
  .navlinks.open .nav-places-menu {
    position: static !important;
    display: grid !important;
    min-width: 0;
    margin: 0 0 6px !important;
    padding: 2px 0 6px 15px !important;
    border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important; pointer-events: auto !important;
    transform: none !important; visibility: visible !important;
    max-height: none !important; overflow: visible !important;
  }
  .navlinks.open .nav-places-menu a { display: block !important; padding: 9px 0 !important; }
}

/* ------------------------------------------------------------------
   Hero de l'accueil : resserrage vertical (14/08/2026)
   .hero-copy etait en justify-content:space-between sur une colonne de
   570px de haut. Les trois blocs (titre, liste, devis) etaient donc
   pousses aux extremites, ce qui creusait deux grands vides. Le retrait
   du bloc d'avis a encore aggrave le trou du bas.
   center regroupe les trois blocs : le titre descend, le bouton remonte,
   et l'espace se reporte en haut et en bas plutot qu'au milieu.
   ------------------------------------------------------------------ */
/* padding-bottom superieur au padding-top : le bloc reste groupe mais
   remonte dans la colonne, au lieu d'etre parfaitement centre. */
.hero-copy { justify-content: center !important; padding-bottom: 34px; }

/* Textes agrandis, sauf le bouton doré qui reste a 20px.
   Les marges redonnent de l'air entre titre, liste et bouton apres le
   resserrage, sans revenir aux grands vides du space-between. */
.hero h1 { font-size: clamp(40px, 4vw, 56px) !important; max-width: 660px; margin-bottom: 32px !important; }
.hero-events { font-size: 17px; margin: 0 0 38px; gap: 14px 36px; }
.quote-note { font-size: 15px; margin-top: 20px; }

@media (max-width: 600px) {
  .hero-events { font-size: 15.5px; margin: 0 0 30px; }
  .hero-copy { padding-bottom: 24px; }
}

/* ------------------------------------------------------------------
   Bouton WhatsApp de la page contact (14/08/2026)
   ------------------------------------------------------------------ */
.button-whatsapp { gap: 10px; color: #fff; background: #25D366; }
.button-whatsapp:hover { color: #fff; background: #1da851; }
.button-whatsapp .wa-icon { width: 19px; height: 19px; flex: none; fill: currentColor; }
.contact-card .button + .button { margin-top: 10px; }

/* ------------------------------------------------------------------
   Entete resserree (14/08/2026)
   La barre passe de 80 a 64px. Le bouton devis est donc ramene a 44px
   pour garder une respiration egale au-dessus et en dessous.
   Le libelle passe a "Obtenir mon devis instantane", plus long : entre
   761 et 1120px les espacements sont reduits, sinon le menu deborde du
   conteneur et le bouton passe sous les liens.
   ------------------------------------------------------------------ */
.nav-button { min-height: 44px; }

@media (min-width: 761px) and (max-width: 1120px) {
  .nav, .navlinks, .nav-group { gap: 15px; }
  .nav-button { padding: 0 15px; font-size: 14px; }
  .logo { font-size: 29px; }
}