/**********************************************************
  0) POLICE
**********************************************************/
@font-face{
  font-family: "Inconsolata";
  src: url("./Rakesly Bd.otf?v=1") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/**********************************************************
  1) BASE + VARIABLES
**********************************************************/
*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ scroll-behavior: smooth; }

:root{
  --base-font-size: clamp(18px, 1.8vw, 20px);
  --menu-hover: rgba(0,0,0,.06);
  --hover-grey: rgba(0,0,0,.12);
  --header-h: 72px; /* ORDI: inchangé */
}

/**********************************************************
  2) BODY — FOND CLAIR TEXTURÉ
**********************************************************/
body{
  margin: 0;
  font-family: "Inconsolata", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--base-font-size);
  line-height: 1.7;
  color: #111;

  background-color: #f6f1ef;
  background-image:
    linear-gradient(0deg, rgba(72,34,23,0.045), rgba(72,34,23,0.045)),
    radial-gradient(rgba(0,0,0,0.028) 1px, transparent 1px);
  background-size: auto, 30px 30px;
  background-position: center, 0 0;

  padding-top: var(--header-h);
}

p, li{ max-width: 70ch; }

/**********************************************************
  3) BARRE DE MENU FIXE (ORDI INCHANGÉ)
**********************************************************/
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 10000;

  background: rgba(246,241,239,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.topbar{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px; /* ordi: inchangé */
}

/* Texte / marque à gauche */
.topbar__brand{
  color: #111;
  text-decoration: none;
  font-weight: 550;   /* ordi: inchangé */
  font-size: 1.8em;   /* ordi: inchangé */
  letter-spacing: .03em;
  white-space: nowrap;
}

/* Logo + texte dans la marque */
.topbar__brand{
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* logo adaptatif à la taille du texte */
.topbar__brand .brand-logo{
  height: 1em;
  width: auto;
  display: block;
}

/* Menu */
.topbar__menu{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 60px; /* ordi: inchangé */
  margin: 0;
  padding: 0;
}

.topbar__menu a{
  display: inline-block;
  padding: 8px 6px;         /* ordi: inchangé */
  border-radius: 10px;
  color: rgba(17,17,17,.92);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .015em;
}

.topbar__menu a:hover,
.topbar__menu a:focus{
  background: var(--menu-hover);
}

.topbar__menu a.is-active{
  background: rgba(72,34,23,.10);
}

/**********************************************************
  4) PAGE INDEX — HERO
**********************************************************/
.page{
  position: relative;
  min-height: calc(100vh - var(--header-h));
  overflow: hidden;
}

.home-hero__photo{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.home-hero__photo img{
  width: min(760px, 62vw);
  height: auto;
  display: block;
}

.home-hero__brand{
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
}
.home-hero__logo{
  width: min(720px, 60vw);
  max-width: 800px;
  height: auto;
  max-height: calc(100vh - var(--header-h) - 60px);
  object-fit: contain;
  display: block;
}

/**********************************************************
  5) FORMULAIRES
**********************************************************/
form{
  display: grid;
  gap: 12px;
  margin-top: 16px;
  max-width: 640px;
}

label{
  display: grid;
  gap: 6px;
  font-weight: 600;
}

input, textarea{
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.20);
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  color: #111;
  font: inherit;
  outline: none;
}

textarea{
  resize: vertical;
  min-height: 120px;
}

input:focus,
textarea:focus{
  border-color: rgba(72,34,23,.45);
  box-shadow: 0 0 0 3px rgba(72,34,23,.12);
}

.btn-gold{
  border: none;
  background: #F4C430;
  color: #111;
  font-weight: 800;
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}

/**********************************************************
  6) FOOTER
**********************************************************/
.site-footer{
  position: relative;
  z-index: 3;
  padding: 40px 5%;
}
.site-footer small{ opacity: .9; }

/**********************************************************
  7) CONTENU DES PAGES
**********************************************************/
.page-content{
  padding-inline: clamp(16px, 6vw, 96px);
  padding-top: clamp(24px, 6vh, 72px);
  padding-bottom: clamp(32px, 8vh, 96px);
}

/**********************************************************
  8) MOBILE/TABLETTE — HERO NON ABSOLU
  (inchangé : utile jusqu'à 820px, puis on override en <=520px)
**********************************************************/
@media (max-width: 820px){
  .page{
    overflow: visible;
    min-height: auto;
  }

  .home-hero__brand,
  .home-hero__photo{
    position: static;
  }

  .home-hero__brand{
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }

  .home-hero__photo{
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }

  .home-hero__logo,
  .home-hero__photo img{
    width: min(560px, 90%);
  }
}

/**********************************************************
  MOBILE UNIQUEMENT (<= 520px)
  - "Lucile Bellier" au-dessus
  - menu en dessous sur UNE SEULE LIGNE
  - hero spécial mobile (photo bas-gauche, logo haut-centre)
**********************************************************/
@media (max-width: 520px){

  /* 1) HEADER EN 2 LIGNES : marque puis menu sur UNE SEULE LIGNE */
  :root{ --header-h: 118px; } /* assez de place pour 2 lignes */

  .topbar{
    flex-direction: column;       /* <<< marque au-dessus */
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
  }

  .topbar__brand{
    font-size: 1.14em;
    font-weight: 600;
    letter-spacing: .02em;
  }



.topbar__menu{
  width: 100%;
  display: flex;
  flex-wrap: nowrap;                 /* toujours sur une ligne */
  justify-content: space-between;
  gap: clamp(4px, 2.5vw, 10px);       /* espace adaptatif */
  overflow-x: auto;                  /* scroll seulement si nécessaire */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.topbar__menu::-webkit-scrollbar{ display: none; }

.topbar__menu a{
  white-space: nowrap;
  padding: clamp(4px, 1.6vw, 8px) clamp(6px, 2vw, 12px);
  font-size: clamp(0.9em, 3.6vw, 1.02em); /* s’adapte à la largeur */
  letter-spacing: 0;
}


  

  /* 2) INDEX : hero spécial mobile
        (override le @media (max-width: 820px) qui mettait tout en static) */

  /* photo en bas à gauche de l'écran */
  .home-hero__photo{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
  }
  .home-hero__photo img{
    width: min(56vw, 320px);
    height: auto;
    display: block;
  }

  /* logo en haut, centré, sous la barre avec un peu d'air */
  .home-hero__brand{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--header-h) + 14px);   /* pas collé à la barre */
    right: auto;
    z-index: 2;
    pointer-events: none;
  }
  .home-hero__logo{
    width: min(82vw, 420px);
    height: auto;
    max-height: calc(100vh - var(--header-h) - 180px);
    object-fit: contain;
    display: block;
  }
}