:root{
  --vert-foret:#2E4E1E;
  --sable-rose:#EED6C4;
  --bordeaux:#4B0E1E;
  --gris-ardoise:#5A5A5A;
  --cuivre:#B87333;

  --bg:var(--sable-rose);
  --text:var(--vert-foret);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Raleway,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
.container{max-width:1200px;margin:0 auto;padding:24px}
a{color:inherit}

.header{position:sticky;top:0;background:rgba(238,214,196,.85);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.08);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:30px}
.brand-name{font-family:'Cormorant Garamond',serif;letter-spacing:.18em;font-weight:600}

.menu{display:flex;gap:16px;flex-wrap:wrap}
.menu a{padding:8px 12px;border-radius:9999px;text-decoration:none}
.menu a:hover{background:rgba(75,14,30,.08)}

.btn{display:inline-block;padding:12px 20px;border-radius:9999px;border:1px solid var(--text);background:transparent;text-decoration:none}
.btn.primary{background:var(--text);color:var(--sable-rose)}
.btn:hover{transform:translateY(-1px)}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:1fr}
@media(min-width:960px){.grid-2{grid-template-columns:1.15fr .85fr}}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:0}
.hero .visual{min-height:60vh}
.hero .visual img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(102%) saturate(95%)}
.hero .copy{display:flex;flex-direction:column;justify-content:center;padding:32px}
.kicker{letter-spacing:.22em;text-transform:uppercase;font-size:.85rem;opacity:.9}
.title{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,6vw,56px);letter-spacing:.06em;margin:.2em 0 .3em}

.card{background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:22px}
.card h3{font-family:'Cormorant Garamond',serif;margin:.2em 0 .4em}

.values{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.values{grid-template-columns:repeat(3,1fr)}}
.value{border:1px solid rgba(0,0,0,.08);border-radius:14px;background:rgba(255,255,255,.6);padding:18px}
.value h4{margin:.2em 0 .4em;font-family:'Cormorant Garamond',serif}

.split{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr}}
.split .panel{border-radius:18px;overflow:hidden;border:1px solid rgba(0,0,0,.06);background:#fff4}
.split .panel img{width:100%;height:100%;object-fit:cover;display:block}
.split .panel .inner{padding:22px}

.footer{border-top:1px solid rgba(0,0,0,.08);padding:28px 24px;color:var(--text)}
.badge{display:inline-block;padding:6px 10px;border-radius:9999px;background:rgba(46,78,30,.15);color:var(--text);font-weight:600;font-size:.82rem;letter-spacing:.04em}

.subscribe{display:flex;gap:8px;align-items:center}
.subscribe input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.2);background:#fff6;color:var(--text)}
.subscribe button{padding:12px 16px;border-radius:12px;border:1px solid var(--text);background:var(--text);color:var(--sable-rose)}
.subscribe .icon{width:28px;height:28px;display:inline-block;vertical-align:middle}
.note{font-size:.88rem;opacity:.9}
/* === Palette Brame (si pas déjà définie) === */
:root{
  --forest:#2E4E1E;   /* Vert Forêt */
  --sand:#EED6C4;     /* Sable Rosé */
}

/* === Header en Vert Forêt + textes en Sable Rosé === */
.header{
  background: var(--forest);
  color: var(--sand);
  border-bottom: 1px solid rgba(0,0,0,.12); /* optionnel */
}

/* Liens du menu et nom de marque en sable rosé */
.header .brand-name,
.header .menu a{
  color: var(--sand);
}

/* États hover/focus lisibles */
.header .menu a:hover,
.header .menu a:focus{
  color: #fff;                 /* ou un sable plus clair si tu préfères */
  text-decoration: underline;
}

/* Si tu as un bouton dans le header (CTA), version outline sable rosé */
.header .menu .btn{
  background: transparent;
  color: var(--sand);
  border: 1px solid var(--sand);
}
.header .menu .btn:hover{
  background: rgba(238,214,196,0.12);
}
/* --- Logo plus grand dans la barre du haut --- */
.header .brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.header .brand img{
  height: 48px;       /* augmente la taille du logo */
  width: auto;
  display:block;      /* évite l'espace de ligne sous l'image */
}

/* un peu plus grand sur desktop */
@media (min-width: 1024px){
  .header .brand img{ height: 60px; }
}

/* donne un peu d'air à la barre pour accueillir le logo plus grand */
.header .nav{
  padding-top: 8px;
  padding-bottom: 8px;
}
/* --- Alignement propre du logo + boutons dans la carte prévente --- */
.preorder-head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  text-align: center;
  margin-bottom: 20px;
}

.preorder-logo-img {
  display: block;
  height: 140px;
  width: auto;
}

.preorder-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* un peu plus grand sur écran large */
@media (min-width: 1200px) {
  .preorder-logo-img {
    height: 160px;
  }
}
/* --- Hero : image un peu plus grande mais plus “fine” --- */
.hero .visual{
  /* plus grande */
  max-height: 560px;
  /* un peu plus mince (verticale) */
  aspect-ratio: 7 / 10;
  overflow: hidden;
}
.hero .visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* recadre sans déformer */
  object-position: 50% 45%;   /* ajuste le cadrage si besoin */
}

/* sur écran large : encore un chouïa plus grande mais fine */
@media (min-width: 1200px){
  .hero .visual{ 
    max-height: 620px;
    aspect-ratio: 3 / 4;      /* un peu plus “amincie” */
  }
}

/* optionnel : pour l’amincir visuellement sans toucher au ratio,
   on limite un peu la largeur max du bloc image sur desktop */
@media (min-width: 1000px){
  .hero .visual{ max-width: 520px; margin-left: auto; margin-right: auto; }
}
/* === 1) HERO : image un peu plus grande === */
.hero{
  display: grid;                 /* force un layout fiable */
  grid-template-columns: 1.35fr 1fr; /* + d’espace pour l’image */
  gap: 24px;
  align-items: center;
}
.hero .visual{
  max-height: 680px;             /* plus grande en hauteur */
  overflow: hidden;
}
.hero .visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .hero .visual{ max-height: 60vh; }
}

/* === 2) NOTRE REGARD : réduire l’image du cerf === */
/* on cible la 2e section de <main> (celle avec le cerf) */
main > section:nth-of-type(2) .split{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;  /* image un peu + étroite que le texte */
  gap: 24px;
  align-items: center;
}
main > section:nth-of-type(2) .split > .panel:first-child img{
  max-width: 520px;   /* taille plus compacte */
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 16px;
}
@media (min-width: 1200px){
  main > section:nth-of-type(2) .split > .panel:first-child img{ max-width: 560px; }
}
@media (max-width: 900px){
  main > section:nth-of-type(2) .split{
    grid-template-columns: 1fr;
  }
  main > section:nth-of-type(2) .split > .panel:first-child img{
    max-width: 70vw;   /* compact aussi sur mobile */
  }
}
/* === HERO : encore plus grand === */
.hero{
  display: grid;
  grid-template-columns: 1.75fr 1fr; /* + d’espace pour l’image */
  gap: 24px;
  align-items: center;
}

/* === NOTRE REGARD : cerf plus petit === */
/* 2e section du <main> (celle avec le cerf) */
main > section:nth-of-type(2) .split{
  display: grid;
  grid-template-columns: 0.75fr 1.25fr; /* image rétrécie, texte + large */
  gap: 24px;
  align-items: center;
}
main > section:nth-of-type(2) .split > .panel:first-child img{
  max-width: 420px !important;    /* ↓ (était 520/560) */
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 16px;
}
@media (min-width: 1200px){
  main > section:nth-of-type(2) .split > .panel:first-child img{
    max-width: 440px !important;
  }
}
@media (max-width: 900px){
  main > section:nth-of-type(2) .split{
    grid-template-columns: 1fr;
  }
  main > section:nth-of-type(2) .split > .panel:first-child img{
    max-width: 68vw !important;
  }
}
/* === Notre regard : texte à gauche, cerf à droite (desktop) === */
@media (min-width: 900px){
  /* cible la 2e section de <main> (celle avec le cerf) */
  main > section:nth-of-type(2) .split{
    display: flex !important;        /* prend la main même si .split est en grid */
    gap: 24px;
    align-items: center;
  }
  /* l'image (1er .panel dans le HTML) passe visuellement à droite */
  main > section:nth-of-type(2) .split > .panel:first-child{ order: 2; }
  /* le texte (2e .panel) passe à gauche */
  main > section:nth-of-type(2) .split > .panel:last-child{  order: 1; }
}

/* Mobile : on revient à l'empilement standard */
@media (max-width: 899px){
  main > section:nth-of-type(2) .split{
    display: block !important;
  }
  main > section:nth-of-type(2) .split > .panel{ order: 0; }
}
/* Cerf (section "Notre regard") : un peu plus grand */
@media (min-width: 900px){
  /* l'image est toujours le premier .panel dans le HTML */
  main > section:nth-of-type(2) .split > .panel:first-child img{
    max-width: 480px !important;  /* +60px environ */
  }
}
@media (min-width: 1200px){
  main > section:nth-of-type(2) .split > .panel:first-child img{
    max-width: 1200px !important;  /* +80px environ sur grands écrans */
  }
}
/* === HOTFIX MOBILE BRAME PARIS === */

/* 1) Header plus compact sur petits écrans */
@media (max-width: 640px){
  .header .nav{ padding: 6px 12px; }
  .header .brand img{ height: 32px; } /* ↓ logo */
  .brand-name{ font-size: 14px; letter-spacing: .14em; }
  .menu{ gap: 8px; }
  .menu a{ padding: 6px 10px; font-size: 14px; }
}

/* 2) Empiler le menu proprement quand ça manque de place */
@media (max-width: 480px){
  .nav{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .menu{ width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .menu a{ padding: 6px 10px; }
}

/* 3) Hero : visuel moins haut + texte respirant */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; gap: 14px; }
  .hero .visual{ max-height: 56vh; }
}
@media (max-width: 480px){
  .title{ font-size: clamp(24px, 8vw, 32px); }
  .hero .copy{ padding: 16px; }
  .kicker{ font-size: .78rem; letter-spacing: .18em; }
}

/* 4) Bloc précommande (logo + boutons) plus léger */
@media (max-width: 640px){
  .preorder-logo-img{ height: 88px; }
  .preorder-actions{ gap: 8px; }
  .btn{ padding: 10px 14px; font-size: 14px; }
}

/* 5) Grilles “values” et cartes : marges plus douces */
@media (max-width: 640px){
  .container{ padding: 18px 16px; }
  .grid{ gap: 16px; }
  .values{ gap: 12px; }
  .value{ padding: 14px; }
  .card{ padding: 16px; }
}

/* 6) Images de sections : éviter le rognage trop agressif */
@media (max-width: 640px){
  main > section:nth-of-type(2) .split > .panel:first-child img{
    max-width: 86vw !important;
  }
}

/* 7) Boutons du footer : pas de débordement, retour à la ligne */
.footer .container{ gap: 10px; }
.footer .container > div:last-child{ display:flex; gap:8px; flex-wrap:wrap; }
.footer .btn{ padding:10px 12px; font-size:14px; }