/* Greg Le Fourn — en-tête partagé (toutes les pages), calqué sur aman.com.
   Toutes les valeurs ci-dessous sont converties depuis le CSS compilé réel d'aman.com
   (racine 14px chez eux) : icône hamburger 28x24px, 28px jusqu'au mot "Menu" (14px, taille
   du corps de texte, jamais un petit libellé), 50px jusqu'à l'icône recherche (20x20px),
   marge de bord 24.5px, hauteur d'en-tête 88px, 90px de vide avant le contenu.
   Noms de classes et variables préfixés "gh-" pour ne jamais entrer en conflit avec les
   feuilles de style propres à chaque page. */

:root{
  --gh-ivory:#f3eee7;
  --gh-ink:#313131;
  --gh-line:rgba(49,49,49,.14);
  --gh-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --gh-serif:'Source Serif 4',Georgia,serif;
  --gh-header-h:88px;
  --gh-header-h-mobile:64px;
  --gh-header-gap:12px;
  --gh-header-gap-mobile:8px;
  --gh-edge:24.5px;
}

.gh-header{
  position:fixed;top:0;left:0;right:0;z-index:500;
  height:var(--gh-header-h);
  background-color:var(--gh-ivory);
}
@media (max-width:768px){.gh-header{height:var(--gh-header-h-mobile);}}

.gh-row{
  max-width:1440px;margin:0 auto;height:100%;padding:0 var(--gh-edge);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}

.gh-left,.gh-right{display:flex;align-items:center;}
.gh-right{justify-content:flex-end;}

/* Bouton hamburger — icône 28x24, 28px jusqu'au libellé "Menu" en 14px (taille du texte courant) */
.gh-menu-btn{
  display:flex;align-items:center;gap:28px;background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--gh-sans);color:var(--gh-ink);
}
.gh-menu-btn .gh-burger{width:28px;height:24px;display:flex;flex-direction:column;justify-content:space-between;flex:none;}
.gh-menu-btn .gh-burger span{display:block;width:100%;height:1px;background:currentColor;}
.gh-menu-btn .gh-menu-label{font-size:14px;font-weight:400;letter-spacing:.02em;}

/* Icône recherche — 28x28 (même gabarit que le hamburger 28x24), 50px après le groupe hamburger */
.gh-search-btn{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;margin-left:50px;background:none;border:0;cursor:pointer;color:var(--gh-ink);flex:none;
}
.gh-search-btn svg{width:28px;height:28px;display:block;}

/* Zone tactile élargie à ~40x40px sur mobile pour le hamburger et la recherche, sans
   agrandir l'icône ni décaler le layout : un pseudo-élément invisible déborde du bouton
   réel (position:relative + ::before absolu, inset négatif) et capte le tap autour. */
@media (max-width:640px){
  .gh-menu-btn,.gh-search-btn{position:relative;}
  .gh-menu-btn::before{content:'';position:absolute;inset:-8px -6px;}
  .gh-search-btn::before{content:'';position:absolute;inset:-6px;}
}

/* Logo — centré, vrai point focal. "AMAN" est un mot unique sur une ligne ; notre logo
   empile un monogramme ET un texte, donc à hauteur égale son poids visuel paraît moindre.
   On compense nettement en agrandissant le conteneur. */
.gh-logo{display:flex;align-items:center;justify-content:center;}
.gh-logo img{
  height:76px;width:auto;display:block;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.18));
}
@media (max-width:640px){.gh-logo img{height:54px;}}

.gh-lang{
  font-family:var(--gh-sans);font-size:.82rem;font-weight:400;letter-spacing:.02em;color:var(--gh-ink);
  padding-bottom:2px;border-bottom:1px solid transparent;margin-right:32px;
}
.gh-lang:hover{border-color:var(--gh-ink);}

.gh-cta{
  display:inline-block;padding:.6em 2.2em;font-family:var(--gh-sans);font-size:.82rem;font-weight:500;
  letter-spacing:.03em;color:var(--gh-ivory);background:var(--gh-ink);border:1px solid var(--gh-ink);
  transition:opacity .3s ease;
}
.gh-cta:hover{opacity:.85;}

@media (max-width:640px){
  .gh-menu-btn .gh-menu-label{display:none;}
  .gh-menu-btn{gap:0;}
  .gh-search-btn{margin-left:20px;}
  .gh-lang{display:none;}
  .gh-cta{padding:.55em 1.4em;font-size:.74rem;}
}

/* Tiroir de navigation — structure à deux colonnes reprise du méga-menu réel d'aman.com :
   fond blanc (#fff, pas ivoire — vérifié dans leur CSS), zone de contenu décalée de ~84px/68px,
   liens racine en 24px vs liens enfants en 19px (leur propre hiérarchie de taille), bouton
   fermer à ~32px du bord. La colonne de droite (contact + citation) est notre adaptation :
   Aman y met une colonne de navigation supplémentaire (322px, séparateur 1px, fond identique) ;
   nous y mettons du contenu complémentaire sur un fond légèrement différent. */
.gh-drawer{
  position:fixed;inset:0;z-index:600;background:#fff;
  display:flex;flex-direction:column;
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.6,0,.2,1);
}
.gh-drawer.open{transform:translateY(0);}

.gh-drawer-logo{position:absolute;top:28px;left:var(--gh-edge);z-index:2;display:block;}
.gh-drawer-logo img{height:36px;width:auto;display:block;}

.gh-drawer .gh-close{
  position:absolute;top:30px;right:var(--gh-edge);z-index:2;background:none;border:0;cursor:pointer;
  padding:6px;color:var(--gh-ink);display:flex;align-items:center;justify-content:center;
}
.gh-drawer .gh-close svg{width:22px;height:22px;display:block;}

.gh-drawer-cols{flex:1;display:flex;overflow-y:auto;}

.gh-drawer-primary{
  flex:1 1 58%;background:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:110px 40px 60px 84px;
}
.gh-drawer-secondary{
  flex:1 1 42%;background:var(--gh-ivory);border-left:1px solid rgba(49,49,49,.1);
  display:flex;flex-direction:column;justify-content:center;
  padding:110px 84px 60px 56px;
}

/* Une seule liste fluide, même taille pour tous les liens, police sans-serif — comme aman.com */
.gh-nav-main,.gh-nav-sub{
  font-family:var(--gh-sans);font-size:1.05rem;font-weight:400;letter-spacing:.01em;color:var(--gh-ink);
  padding:7px 0;
}
.gh-nav-main:hover,.gh-nav-sub:hover{opacity:.55;}

.gh-drawer-quote{
  font-family:var(--gh-serif);font-style:italic;font-weight:400;font-size:1.1rem;line-height:1.6;
  color:var(--gh-ink);margin:0 0 40px;max-width:320px;
}
.gh-drawer-label{
  display:block;font-family:var(--gh-sans);font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gh-ink);opacity:.5;margin-bottom:14px;
}
.gh-drawer-contact a{display:block;font-family:var(--gh-sans);font-size:.92rem;color:var(--gh-ink);padding:4px 0;}
.gh-drawer-contact a:hover{opacity:.6;}
.gh-drawer-cta{
  margin-top:22px;font-weight:600;border-bottom:1px solid var(--gh-ink);
  display:inline-block!important;padding-bottom:2px!important;
}

@media (max-width:860px){
  .gh-drawer-cols{flex-direction:column;overflow-y:auto;}
  .gh-drawer-primary,.gh-drawer-secondary{flex:none;padding:36px var(--gh-edge);}
  .gh-drawer-primary{padding-top:100px;}
  .gh-drawer-secondary{border-left:0;border-top:1px solid rgba(49,49,49,.1);}
  .gh-nav-main{font-size:1.4rem;}
}

/* Réserve l'espace du header + le grand vide avant le contenu, sur toutes les pages */
#main{margin-top:calc(var(--gh-header-h) + var(--gh-header-gap));}
@media (max-width:768px){#main{margin-top:calc(var(--gh-header-h-mobile) + var(--gh-header-gap-mobile));}}

/* Encart "Prenons contact" — sur toutes les pages, flottant en bas à droite de l'écran
   (indépendant du hero, puisque toutes les pages n'en ont pas la même forme). Apparaît
   à chaque chargement de page après un court délai ; seule la croix le masque, et
   uniquement pour la page en cours (aucune mémorisation : il réapparaît à la prochaine
   page visitée, puisque c'est un nouveau chargement). */
.contact-banner{
  position:fixed;right:24px;bottom:24px;z-index:480;
  width:320px;max-width:calc(100vw - 48px);
  background:#e6e2db;color:#313131;
  padding:30px 28px 26px;
  box-shadow:0 20px 44px rgba(0,0,0,.24);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.contact-banner.is-visible{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .6s ease, transform .6s ease;
}
.contact-banner h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:1.1rem;margin:0 0 10px;padding-right:22px;color:#313131;}
.contact-banner p{font-size:.86rem;line-height:1.65;color:#585858;margin:0 0 20px;}
.contact-banner-close{
  position:absolute;top:16px;right:16px;background:none;border:0;cursor:pointer;padding:4px;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  color:#313131;opacity:.55;transition:opacity .2s ease;
}
.contact-banner-close:hover{opacity:1;}
/* Zone tactile élargie à ~40x40px sur mobile, même principe que le header (voir plus haut) :
   ne change ni l'icône ni la position visuelle du bouton, juste sa surface cliquable. */
@media (max-width:640px){
  .contact-banner-close::before{content:'';position:absolute;inset:-9px;}
}
.contact-banner-btn{
  display:inline-block;border:1px solid #313131;padding:.65em 1.7em;
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#313131;background:transparent;transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.contact-banner-btn:hover{background:#6e2a2f;border-color:#6e2a2f;color:#fff;}

@media (max-width:640px){
  .contact-banner{
    left:16px;right:16px;bottom:16px;width:auto;max-width:none;
    padding:24px 22px 22px;
  }
}

/* Bouton flottant "retour en haut" — sur toutes les pages, cercle fin cohérent avec
   la charte (pas de bouton plein coloré). Invisible en haut de page, apparaît au scroll.
   Le JS (header.js) pose un "bottom" inline en pixels quand l'encart "Prenons contact"
   est visible, pour que les deux éléments ne se chevauchent jamais (valeur inline =
   priorité sur ces règles de base ; elle est retirée quand l'encart disparaît). */
.back-to-top{
  position:fixed;right:28px;bottom:28px;z-index:470;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream,#f7f4ee);border:1px solid var(--ink-faint,#948d81);color:var(--ink,#17140f);
  box-shadow:0 6px 18px rgba(23,20,15,.14);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s, bottom .3s ease, border-color .25s ease, color .25s ease;
  cursor:pointer;padding:0;
}
.back-to-top.is-visible{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .35s ease, transform .35s ease, bottom .3s ease, border-color .25s ease, color .25s ease;
}
.back-to-top:hover,.back-to-top:focus-visible{border-color:var(--accent,#6b2b29);color:var(--accent,#6b2b29);}
@media (max-width:640px){
  .back-to-top{right:16px;bottom:16px;width:42px;height:42px;}
}