:root{
  --brand:#2c5f70;           /* Bordeaux (rgb(128,0,0)) */
  --brand-ink:#6a0000;       /* Hover/darker */
  --bg:#ffffff;              /* Blanc */
  --ink:#333333;             /* Texte principal */
  --muted:#666666;           /* Texte secondaire */
  --soft:#f5f5f5;            /* Gris clair */
  --line:#eeeeee;            /* Lignes très légères */
  --radius:18px;
  --shadow:0 8px 24px rgba(0,0,0,.06);
  --container:1100px;
}

html{scroll-behavior:smooth}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Lato", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.6; font-size:17px;
}

.wrap{max-width:var(--container); margin:0 auto; padding:0 22px}

/* Header */
header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(6px);
  background:rgba(255,255,255,.85); border-bottom:1px solid var(--line);
}

.nav{
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);
  font-weight:700;
}
.brand img{height:36px; width:auto; display:block}
.brand span{font-family:"Dancing Script", serif; font-size:20px; letter-spacing:.4px}
nav a{
  color:var(--ink); text-decoration:none; margin-left:18px; font-weight:500;
}
nav a:hover{color:var(--brand)}

.btn{
  display:inline-block; border:1px solid var(--brand); color:var(--brand);
  padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:600;
  transition:transform .08s ease, background .2s ease, color .2s ease;
}
.btn:hover{background:var(--brand); color:#fff; transform:translateY(-1px)}

/* Hero */
.hero{ padding:96px 0 72px; background:linear-gradient(180deg, #fff 0%, #fff 60%, var(--soft) 100%); }
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center}
.hero-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:28px; text-align:center;
}
.hero-card .logo{
  height:250px; width:auto; margin:0 auto 16px; display:block; object-fit:contain;
}
h1{font-family:"Lato", serif; font-size:44px; line-height:1.15; margin:0 0 10px}
.subtitle{color:var(--muted); font-size:18px; margin:0 0 18px}
.tagline{color:var(--brand); font-weight:700; letter-spacing:.5px; text-transform:uppercase; font-size:13px}

/* Sections */
section{padding:84px 0; background:#fff}
section.alt{background:var(--soft)}
.title{font-family:"Lato", serif; font-size:32px; margin:0 0 10px}
.lead{color:var(--muted); }

/* Cards showcase (placeholders, sans images complexes) */
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(3, 1fr)}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:160px;
  justify-content:flex-start; /* Aligne les contenus en haut */
  align-items:center;
  text-align:center;
}
.chip{
  display:inline-block; border:1px solid var(--brand); color:var(--brand); padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px
}

/* Contact block */
.contact{
  display:flex; flex-wrap:wrap; gap:22px; align-items:center; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; padding:22px; box-shadow:var(--shadow)
}
.contact a{color:var(--brand); text-decoration:none}
.contact a:hover{color:var(--brand-ink); text-decoration:underline}

footer{padding:40px 0; color:#777; border-top:1px solid var(--line); background:#fff}

/* Small devices */
@media (max-width: 860px){
  .hero{padding:72px 0 56px}
  .hero-grid{grid-template-columns:1fr}
  h1{font-size:34px}
  .grid.cols-3{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .grid.cols-3{grid-template-columns:1fr}
}


/* === Menu mobile responsive === */
.menu-toggle{
  display:none;
  background:transparent; border:0; padding:8px; margin-left:auto; cursor:pointer;
  color:var(--ink);
}
.menu-toggle:focus{ outline: 2px solid var(--brand); outline-offset: 2px; }

.nav-menu{
  border-bottom:1px solid var(--line);
  background:#fff;
}

/* Desktop */
@media (min-width: 861px){
  .nav .menu-toggle{ display:none; }
  .nav-menu{
    border:0;
  }
  .nav + .nav-menu .wrap{
    justify-content:flex-end;
  }
  .nav + .nav-menu .wrap a{
    margin-left:18px;
  }
}

/* Mobile */
@media (max-width: 860px){
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  /* Menu fermé par défaut */
  #primary-menu{
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  /* Menu ouvert */
  #primary-menu.is-open{
    max-height:280px; /* suffisant pour 4 liens */
    border-bottom:1px solid var(--line);
  }
  #primary-menu .wrap{
    flex-direction:column; align-items:flex-start;
    gap:10px; padding-top:0; padding-bottom:12px;
  }
  #primary-menu a{
    padding:6px 0; margin:0; text-decoration:none; color:var(--ink); font-weight:600;
  }
  #primary-menu a:hover{ color:var(--brand); }
}

.btn-alt {
  display:inline-block;
  border:1px solid #A8CCC9; /* turquoise doux */
  color:#155E5A;
  background:#E8F3F2;
  padding:10px 16px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  transition:transform .08s ease, background .2s ease, color .2s ease;
}

.btn-alt:hover {
  background:#A8CCC9;
  color:#fff;
  transform:translateY(-1px);
}

.signature {
  font-family: "Dancing Script", cursive;
  font-size: 26px;
  color: #2F6864; /* céladon minéral */
  text-align: center;
  margin-top: 16px;
  letter-spacing: 0.5px;
}


/* === Lightbox simple === */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-overlay img {
  max-width: 90%;
  max-height: 90vh;
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  transition: transform 0.2s ease;
}
.lightbox-overlay img:hover {
  transform: scale(1.02);
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 30px;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  transition: color 0.2s ease;
}
.lightbox-close:hover {
  color: var(--brand);
}

/* ---- FIX: menu à droite dans le header en desktop ---- */
@media (min-width: 861px){
  /* On positionne le header comme conteneur de positionnement */
  header{ position: sticky; top:0; z-index:20; }

  /* Cacher le burger en desktop */
  .nav .menu-toggle{ display:none; }

  /* Placer le nav par-dessus, aligné à droite, sur la même ligne */
  .nav-menu{
    position:absolute;
    top:0;
    right:22px;          /* même padding latéral que .wrap */
    height:64px;         /* = hauteur de .nav */
    display:flex;
    align-items:center;
    background:transparent;
    border:0;
    max-height:none !important;
    overflow:visible;
    z-index:15;
  }

  /* Assure l’affichage sur une ligne avec l’espace voulu */
  .nav-menu .wrap{
    display:flex !important;
    gap:18px;
    padding:0;           /* pas de padding vertical ici */
  }

  /* Style des liens */
  .nav-menu a{
    margin:0;
    text-decoration:none;
    color:var(--ink);
    font-weight:500;
  }
  .nav-menu a:hover{ color:var(--brand); }
}

/* ===== Header sticky & fond ===== */
header{
  position: sticky; top:0; z-index: 20;
  backdrop-filter: saturate(180%) blur(6px);
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--line);
}

/* ===== Barre principale ===== */
.nav{
  display:flex;
  align-items:center;
  justify-content:flex-start; /* on aligne à gauche, puis on pousse le menu à droite */
  gap:16px;
  height:64px;
}

/* ===== Marque ===== */
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--ink); font-weight:700;
}
.brand img{ height:36px; width:auto; display:block; }
.brand span{ font-family:"Dancing Script", cursive; font-size:20px; letter-spacing:.4px; }

/* ===== Bouton burger ===== */
.menu-toggle{
  display:none; /* caché en desktop */
  background:transparent; border:0; padding:8px; margin-left:auto; cursor:pointer;
  color:var(--ink);
}
.menu-toggle:focus{ outline:2px solid var(--brand); outline-offset:2px; }

/* ===== Menu ===== */
.nav-menu{
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:auto; /* pousse le menu à droite dans la .wrap */
}
.nav-menu a{
  color:var(--ink); text-decoration:none; font-weight:500;
}
.nav-menu a:hover{ color:var(--brand); }

/* ------ Desktop (>= 861px) ------ */
@media (min-width: 861px){
  .menu-toggle{ display:none; }
  .nav-menu{
    position: static;          /* dans le flux, respecte .wrap */
    background: transparent;   /* pas de fond en desktop */
    border: 0;
  }
}

/* ------ Mobile (<= 860px) ------ */
@media (max-width: 860px){
  /* on s'assure que le header sert de contexte de position */
  header { position: sticky; top:0; z-index:20; }
  .nav { position: relative; z-index:21; } /* évite que le menu dépasse visuellement */

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }

  /* menu déroulant sous la barre */
  .nav-menu {
    position: absolute;
    top: 64px;                /* juste sous la barre */
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 0 22px 12px;
    box-shadow: var(--shadow);

    /* clé : on cache le menu fermé sans qu'il dépasse */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .25s ease, opacity .25s ease, visibility .25s ease;
  }

  .nav-menu.is-open {
    max-height: 280px;
    opacity: 1;
    visibility: visible;
  }

  .nav-menu a {
    display: block;
    width: 100%;
    padding: 6px 0;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
  }

  .nav-menu a:hover {
    color: var(--brand);
  }
}