:root{
  --ink:#2a2521;     /* titres */
  --text:#3a342f;    /* paragraphes */
  --paper:#e7dcc8;
  --paper2:#f2eadc;
  --walnut:#2b1f18;
  --copper:#8c6239;
  --muted:#5e5a56;
  --radius:18px;
  --max:1100px;
  --heading:#2f2924;
  }

*{box-sizing:border-box}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper2);
  font-family: "Libre Baskerville", Baskerville, serif;
  font-size:16px;
  line-height:1.7;
  font-weight:400;
}
img{
  max-width:100%;
  height:auto;
  display:block;
}
/* ============================= */
/* Header                         */
/* ============================= */

/* Base : pages internes (pas de gêne au scroll) */
.site-header{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  z-index: 10;
  background: transparent;
  color: var(--walnut);
}

/* Brand (unique, sans doublon) */
.site-header .brand{
  display: inline-block;
  line-height: 1;
  padding: 2px 0;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .85rem;     /* taille par défaut (interne) */
  color: inherit;
}

/* Index uniquement : header immersif fixé + brand plus discret */
.home .site-header{
  position: fixed;
  inset: 0 0 auto 0;
  background: linear-gradient(to bottom, rgba(10,9,8,.65), rgba(10,9,8,0));
  color: #f3eadc;
}

.home .site-header .brand{
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  opacity: .70;          /* discret mais lisible */
}

/* Navigation dropdown (index uniquement) */
.nav summary{
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.site-header .nav summary{
  font-family: "IBM Plex Sans", sans-serif;
  font-size: .80rem;      /* ← ajuste ici */
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav summary::-webkit-details-marker{
  display: none;
}
/* Dropdown container : force la colonne */
.site-header details.nav > nav{
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(20,17,15,.92);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Typo + taille : cible exact, bat les règles globales */
.site-header details.nav > nav > a{
  display: block;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 2;
}

.nav a{
  text-decoration: none;
  opacity: .90;
  color: #f3eadc;
}

.nav a:hover{
  opacity: 1;
}

/* HEADER Minimal : pages internes sans menu */
.site-header.minimal{
  border-bottom: 1px solid rgba(43,31,24,.10);
}

.site-header.minimal .nav{
  display: none;
}
/* ============================= */
/* Hero (index uniquement)      */
/* ============================= */

.hero{
  min-height: 92vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 110px 18px 70px;
  color: #f3eadc;
  background: var(--walnut);
}

.hero__bg{
  position: absolute;
  inset: 0;
  background-image: url("../images/banner.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(.9) contrast(1.05);
}

/*TITRE*/
.title{
  font-family: "Libre Baskerville", Baskerville, serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 400;
}
.initial{
  font-size: 1.2em;
  letter-spacing: 0.1em;
}

/*Réglage calque*/
.hero__veil{
  position:absolute; inset:0;
  background:radial-gradient(1200px 600px at 50% 40%,
    rgba(0,0,0,.25),
    rgba(0,0,0,.15));
}
.hero__content{
  position:relative;
  max-width:780px;
  text-align:center;
  padding:22px 18px;
}
.hero .kicker{
  margin-top: 2px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.95rem;
  opacity: 0.9;
}
.hero h1{
  margin: 0 0 2px;
}
.hero h1::after{
  content: "";
  display: block;
  width: 75%;
  height: 1px;
  background: rgba(243,234,220,.55);
  margin: 1px auto 0;
}
/*ENTER*/
.hero .btn{
  margin-top: 36px;
}

.lead{
  margin: 0 auto 32px;
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.8;
  font-style: italic;
}

.btn{
  display:inline-block;
  padding:7px 16px;
  text-decoration:none;
  border:1px solid rgba(193,169,143,.35);
  background:transparent;
  color:#c1a98f;
  border-radius:0;
  letter-spacing:0.05em;
  font-size:0.8rem;
  transition:all .25s ease;
}
.btn:hover{
  background: rgba(243,234,220,.10);
  border-color: rgba(243,234,220,.75);
}
.btn--dark{
  background:var(--walnut);
  color:var(--paper2);
  border-color:rgba(0,0,0,.15);
}
/* Boutons sur fond clair : adoucir uniquement les boutons "outline" */
.paper .btn:not(.btn--dark){
  color: var(--walnut);
  border-color: rgba(43,31,24,.10);
  background: rgba(43,31,24,.15);
}

.paper .btn:not(.btn--dark):hover{
  background: rgba(43,31,24,.25);
  border-color: rgba(43,31,24,.28);
}

/* Sécurité : le bouton "chocolat" ne bouge pas */
.paper .btn--dark{
  background: var(--walnut);
  color: var(--paper2);
  border-color: rgba(0,0,0,.15);
}
.transition{
  background:linear-gradient(to bottom, rgba(231,220,200,0), rgba(231,220,200,1));
  padding: 14px 18px 8px;
  text-align:center;
  color: var(--ink);
}
.transition p{
  font-family: "Libre Baskerville", Baskerville, serif;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.10em;
  margin: 0;
}
.ornament{
  text-align:center;
  margin: 22px auto 0;
}
.ornament img{
  width:320px;
  max-width:80%;
  height:auto;
  display:block;
  margin:0 auto;
  opacity:0.45;
}

.paper{
  background:var(--paper);
  padding:0px 18px 40px;
}
.paper{
  color:#4a3c30;
}
.paper h1,
.paper h2,
.paper h3{
  color:#2f2620;
}
.section{
  max-width:var(--max);
  margin:0 auto;
  padding:34px 0;
  border-top:1px solid rgba(21,19,18,.10);
}
.section:first-child{border-top:0}
h2{margin:0 0 12px; letter-spacing:.02em}
.paper .section:first-child{
  padding-top: 10px;
}

.grid-4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.card{
  border:1px solid rgba(21,19,18,.10);
  border-radius:var(--radius);
  padding:16px 16px 14px;
  background:rgba(242,234,220,.55);
}
.card h3{margin:0 0 6px; font-size:1.02rem}
.card p{margin:0; color:var(--muted)}

.cta{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:center;
}
.cta__media img{
  width:100%;
  border-radius:var(--radius);
  border:1px solid rgba(21,19,18,.12);
  display:block;
}

.footer{
  background:var(--paper2);
  color:var(--muted);
  padding:22px 18px;
  text-align:center;
  border-top:1px solid rgba(21,19,18,.10);
}

/* Responsive */
@media (max-width: 980px){
  .domain-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .domain-grid{ grid-template-columns: 1fr; }
}

.domain-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* IMAGES */
.domain {
  position: relative;
  padding: 30px;
  border-radius: 18px;
  color: #f2eadc; /* Force la couleur du texte */
  text-decoration: none; /* RECOMMANDÉ : Enlève le soulignement du lien */
  background-size: cover;
  background-position: center;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.3s ease; /* OPTIONNEL : Pour l'animation au survol */
}

/* Effet au survol pour confirmer que c'est cliquable */

.domain:hover {
  transform: scale(1.02); 
}

.domain::before {
  content: "";
  position: absolute;
  inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,.4));
}

.domain h3,
.domain p {
  position: relative;
  z-index: 1;
  margin: 5px 0; /* Petit ajustement d'espacement si besoin */
  color: #f2eadc; /* Sécurité pour que le titre ne devienne pas bleu */
}
.domain-1{ background-image:url("../images/domain1.jpg"); }
.domain-2{ background-image:url("../images/domain2.jpg"); }
.domain-3{ background-image:url("../images/domain3.jpg"); }
.domain-4{ background-image:url("../images/domain4.jpg"); }

/*CTA*/
.cta-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:60px;
  align-items:center;
}
.cta-image img{
  width:100%;
  border-radius:18px;
  display:block;
}
.cta-content h2{
  margin-top:0;
}
.btn-solid{
  display:inline-block;
  margin-top:20px;
  padding:8px 16px;
  background:var(--walnut);
  color:#f2eadc;
  text-decoration:none;
  border-radius:4px;
}

@media (max-width: 980px){
  .cta-grid{
    grid-template-columns: 1fr;
    gap:30px;
  }
}

/* CONTACT (socle forms) */
.contact-section{
  max-width:600px;
  margin:0 auto;
}
.contact-form{
  margin-top:40px;
}
.form-group{
  margin-bottom:24px;
}
label{
  display:block;
  margin-bottom:6px;
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
input,
textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(21,19,18,.15);
  background:transparent;
  font-family:"Libre Baskerville", serif;
  font-size:0.95rem;
  color:var(--ink);
}
input:focus,
textarea:focus{
  outline:none;
  border-color:var(--copper);
}
textarea{
  resize:vertical;
}
.contact-form select{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid rgba(21,19,18,.15);
  background:transparent;
  font-family:"Libre Baskerville", Baskerville, serif;
  font-size:0.95rem;
  color:var(--ink);
  appearance:none;
}
.contact-form select:focus{
  outline:none;
  border-color:var(--copper);
}

/* RADIO (socle) */
.label-inline{
  display:block;
  margin-bottom:8px;
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.radio-group{
  display:flex;
  gap:24px;
}
.radio-option{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:0.95rem;
}
.radio-option input{
  accent-color: var(--copper);
  cursor:pointer;
}
/* ============================= */
/*        MOBILE CLEANUP         */
/* ============================= */

@media (max-width: 900px){

  /* Hero plus compact */
  .hero{
    min-height: auto;
    padding: 90px 18px 50px;
  }

  .hero__content{
    padding: 10px 6px;
  }

  /* baseline alignée sur mobile */
  .hero__content .baseline{
    margin-left: 0;
  }

  /* titres un peu plus souples */
  .title{
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }

  /* grille domaines */
  .domain-grid{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* cartes génériques */
  .grid-4{
    grid-template-columns: 1fr 1fr;
  }

  /* CTA */
  .cta-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* boutons pleine largeur */
  .btn,
  .btn-solid{
    width: 100%;
    text-align: center;
  }

  /* formulaires */
  input,
  textarea,
  select{
    font-size: 16px; /* évite zoom iOS */
  }

}

/* très petits écrans */
@media (max-width: 560px){

  .domain-grid{
    grid-template-columns: 1fr;
  }

  .grid-4{
    grid-template-columns: 1fr;
  }

  .hero{
    padding: 80px 16px 40px;
  }

  .section{
    padding: 28px 0;
  }

}