/* ==========================================================================
   Geneva Dental Clinic — en-tête, pied de page, navigation.
   Toutes les valeurs sont dérivées du XD 1920 et exprimées en fluide.
   ========================================================================== */

/* --- Lien d'évitement --- */
.gdc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--esp-s) var(--esp-m);
  background: var(--gdc-or-fond);
  color: var(--gdc-blanc);
  font-weight: 700;
}
.gdc-skip:focus { left: 0; }

/* ==========================================================================
   EN-TÊTE
   XD : barre pleine #14120E, hauteur 150, logo 320×80 à x=100
   ========================================================================== */
.gdc-entete {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--gdc-noir);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.gdc-entete__inner {
  display: flex;
  align-items: center;
  gap: var(--esp-m);
  width: 100%;
  max-width: var(--gdc-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5.2083vw, 6.25rem); /* 20 → 100 (x du logo) */
  min-height: clamp(4.375rem, 7.8125vw, 9.375rem);   /* 70 → 150 */
}

.gdc-entete__logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}
.gdc-entete__logo img {
  width: clamp(9.375rem, 16.6667vw, 20rem); /* 150 → 320 */
  height: auto;
}

/* --- Navigation --- */
.gdc-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 2.6vw, 3.125rem);
}

.gdc-menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 3.125rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gdc-menu li { position: relative; }

.gdc-menu a {
  display: block;
  padding-block: var(--esp-xs);
  color: var(--gdc-blanc);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--gdc-transition);
}
/* L'or du XD ne donne que 4,41:1 sur le noir de l'en-tête. Entre 1100 et
   1536 px la police du menu tombe sous 24 px sans être grasse : le seuil est
   alors 4,5 et il n'est pas atteint. L'or clair du jeu de jetons monte à
   6,18:1 et reste le même doré à l'œil. */
.gdc-menu a:hover,
.gdc-menu a:focus-visible,
.gdc-menu .current-menu-item > a,
.gdc-menu .current-menu-ancestor > a { color: var(--gdc-or-clair); }

/* Sous-menus : ouverture au survol, 0,3 s ease-out comme le prototype */
.gdc-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  min-width: max(16rem, 100%);
  margin: 0;
  padding: var(--esp-s) 0;
  list-style: none;
  background: var(--gdc-noir);
  border: 1px solid rgba(255, 255, 255, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.5rem);
  transition: opacity var(--gdc-transition),
              transform var(--gdc-transition),
              visibility var(--gdc-transition);
}
.gdc-menu li:hover > .sub-menu,
.gdc-menu li.sous-menu-ouvert > .sub-menu,
.gdc-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.gdc-menu .sub-menu a {
  padding: var(--esp-xs) var(--esp-m);
  font-size: var(--fs-small);
  white-space: normal;
}

/* --- Bouton d'en-tête : XD 304×80, bordé blanc --- */
.gdc-entete__cta {
  flex: 0 0 auto;
  min-height: clamp(2.75rem, 4.1667vw, 5rem);   /* 44 → 80 */
  padding-inline: clamp(1rem, 2.0833vw, 2.5rem);
  font-size: var(--fs-body);
  font-weight: 500;
}

/* --- Bouton hamburger, mobile seulement --- */
.gdc-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.gdc-burger__trait {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--gdc-blanc);
  transition: transform var(--gdc-transition), opacity var(--gdc-transition);
}
.gdc-burger[aria-expanded="true"] .gdc-burger__trait:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gdc-burger[aria-expanded="true"] .gdc-burger__trait:nth-child(2) { opacity: 0; }
.gdc-burger[aria-expanded="true"] .gdc-burger__trait:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   PIED DE PAGE
   XD : bloc #14120E, logo centré 600×133, accroche centrée, 2 colonnes
   ========================================================================== */
.gdc-pied {
  background: var(--gdc-noir);
  color: var(--gdc-blanc);
  padding-block: var(--esp-xl);
}

.gdc-pied__inner {
  width: 100%;
  max-width: var(--gdc-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 10.4167vw, 12.5rem); /* 20 → 200 (x du XD) */
}

.gdc-pied a {
  color: var(--gdc-blanc);
  text-decoration: none;
}
.gdc-pied a:hover,
.gdc-pied a:focus-visible { color: var(--gdc-or); }

.gdc-pied__marque { text-align: center; }

.gdc-pied__logo {
  width: clamp(13.75rem, 31.25vw, 37.5rem); /* 220 → 600 */
  height: auto;
  margin-inline: auto;
}

.gdc-pied__titre {
  margin-top: var(--esp-l);
  font-weight: 700;
  font-size: var(--fs-body);
}

.gdc-pied__accroche {
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--fs-body);
}

.gdc-pied__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--esp-l);
  margin-top: var(--esp-xl);
}

.gdc-pied__soustitre {
  margin: 0 0 var(--esp-m);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--gdc-blanc);
}

.gdc-pied__col p,
.gdc-pied__adresses,
.gdc-pied__horaires {
  font-size: var(--fs-body);
  font-style: normal;
  line-height: 1.6;
}

.gdc-pied__urgence strong { color: var(--gdc-blanc); }

.gdc-pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-s);
  margin-top: var(--esp-xl);
  padding-top: var(--esp-m);
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: var(--fs-small);
}
.gdc-pied__mentions { margin: 0; }
.gdc-pied__menu {
  display: flex;
  gap: var(--esp-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   BASCULE MOBILE
   Le menu horizontal ne tient plus sous 1100 px : panneau déroulant.
   ========================================================================== */
@media (max-width: 1100px) {
  .gdc-burger { display: flex; }

  .gdc-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--esp-m) clamp(1.25rem, 5.2083vw, 6.25rem) var(--esp-l);
    background: var(--gdc-noir);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    display: none;
  }
  .gdc-nav.est-ouvert { display: flex; }

  .gdc-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .gdc-menu > li { border-bottom: 1px solid rgba(255, 255, 255, .10); }
  .gdc-menu > li > [role="button"] { cursor: pointer; }
  .gdc-menu > li:not(.sous-menu-ouvert) > .sub-menu { display: none; }
  .gdc-menu a {
    padding-block: var(--esp-s);
    font-size: clamp(1.0625rem, 2.5vw, 1.25rem);
  }

  /* En mobile le sous-menu se déplie dans le flux, pas en survol */
  .gdc-menu .sub-menu {
    position: static;
    translate: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    padding: 0 0 var(--esp-s) var(--esp-m);
    border: 0;
    background: transparent;
  }
  .gdc-menu .sub-menu a { padding-block: var(--esp-xs); }

  .gdc-entete__cta {
    margin-top: var(--esp-m);
    align-self: flex-start;
  }
}

/* Appel d'urgence toujours atteignable au pouce sur petit écran.
   Au-dessus de 640 px la barre n'a pas lieu d'être : sans cette règle, le lien
   restait dans le flux et s'affichait comme une ligne de texte orpheline au bas
   de chaque page, à toutes les largeurs de bureau. */
.gdc-urgence-flottante { display: none; }

@media (max-width: 640px) {
  .gdc-urgence-flottante {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-s);
    padding: .9rem;
    background: var(--gdc-or-fond);
    color: var(--gdc-blanc);
    font-weight: 700;
    text-decoration: none;
  }
  body { padding-bottom: 3.75rem; }
}

/* ==========================================================================
   PAGE INTROUVABLE
   ========================================================================== */
.gdc-404 { padding-block: var(--esp-xl); }
.gdc-404__inner {
  max-width: var(--gdc-contenu, 1520px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 2vw, 2.5rem);
  text-align: center;
}
.gdc-404__titre {
  font-size: var(--fs-h1);
  color: var(--gdc-or);
  margin: 0 0 var(--esp-m);
}
.gdc-404__texte {
  max-width: 60ch;
  margin: 0 auto var(--esp-l);
}
.gdc-404__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-s);
  justify-content: center;
  margin-bottom: var(--esp-l);
}
.gdc-404__lien {
  padding: var(--esp-s) var(--esp-m);
  border: 1px solid var(--gdc-or);
  border-radius: 999px;
  text-decoration: none;
  color: var(--gdc-noir);
  transition: background var(--gdc-transition), color var(--gdc-transition);
}
.gdc-404__lien:hover,
.gdc-404__lien:focus-visible {
  background: var(--gdc-or-fond);
  color: var(--gdc-blanc);
}
.gdc-404__urgence { font-weight: 700; }
.gdc-404__urgence a { color: var(--gdc-or); }

/* ==========================================================================
   CIBLES TACTILES — 44 px minimum
   Relevé au navigateur : entrées de sous-menu 34 px, liens du pied 20 px,
   mentions légales 42,3 px, logo d'en-tête 33,3 px. Sous le pouce, une cible
   trop courte se manque, et la manquer sur un numéro d'urgence coûte cher.
   ========================================================================== */
.gdc-menu .sub-menu a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}
.gdc-pied__col p a,
.gdc-pied__adresses a,
.gdc-pied__menu a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.gdc-entete__logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}