/* ==========================================================================
   L'Atelier Mouradi — feuille de style commune a toutes les pages.

   Le parti pris : deux matieres, rien de plus. Le noir d'encre du logo pour
   les moments forts — l'entete du site, les bandeaux — et un creme tres pale
   partout ailleurs, parce que les montres sont photographiees sur fond clair
   et qu'elles doivent rester le seul point de couleur de la page. Le taupe
   du lettrage sert d'accent, jamais d'aplat.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --encre:      #14120f;
  --encre-doux: #55504a;
  --encre-pale: #8d867d;
  --fond:       #faf8f4;
  --fond-carte: #ffffff;
  --fond-creux: #f2eee7;
  --nuit:       #100f0d;
  --trait:      #e2dcd2;
  --trait-fin:  #ece7de;
  --or:         #8b7862;

  --serif: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --rayon:   14px;
  --rayon-s: 9px;
  --ombre:   0 18px 44px rgba(20, 18, 15, .10);
  --transition: .22s cubic-bezier(.4, 0, .2, 1);
  --haut-entete: 124px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
h1 { font-size: clamp(38px, 6vw, 66px); line-height: 1.05; margin: 0 0 18px; }
h2 { font-size: clamp(27px, 3.6vw, 40px); line-height: 1.15; margin: 0 0 16px; }
h3 { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }

p { margin: 0 0 16px; }

.contenu { width: min(100% - 48px, 1320px); margin-inline: auto; }
.section { padding: clamp(60px, 8vw, 110px) 0; }
.section-creux { background: var(--fond-creux); }
.section-nuit { background: var(--nuit); color: #ece8e1; }
.section-nuit h1, .section-nuit h2, .section-nuit h3 { color: #fff; }

.sur-titre {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--or); font-weight: 600; margin: 0 0 14px;
}
.section-nuit .sur-titre { color: #b9a58b; }

.chapeau {
  font-size: clamp(16px, 1.5vw, 18.5px); color: var(--encre-doux);
  max-width: 62ch; line-height: 1.7;
}
.section-nuit .chapeau { color: #b6b0a7; }

/* --------------------------------------------------------------- entete */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--trait-fin);
}
.entete-haut { display: grid; place-items: center; padding: 20px 0 14px; }
.entete-haut img { height: 34px; width: auto; }

/* La barre va d'un bord a l'autre : le premier lien colle a gauche, le
   dernier a droite, les autres se repartissent entre les deux. */
.nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding-bottom: 14px;
}
.nav a {
  text-decoration: none; color: var(--encre-doux);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; padding: 8px 2px; position: relative;
  transition: color var(--transition);
  white-space: nowrap;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 2px;
  height: 1px; background: var(--or); transition: right var(--transition);
}
.nav a:hover { color: var(--encre); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--encre); }

.burger {
  display: none; border: 0; background: none; cursor: pointer;
  padding: 10px; color: var(--encre);
}
.burger svg { width: 22px; height: 22px; }

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative; background: var(--nuit); color: #fff;
  min-height: min(84vh, 760px);
  display: grid; align-items: center;
  overflow: hidden;
}
.hero-fond {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .42; filter: grayscale(.25);
}
.hero-fond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(16,15,13,.94) 0%,
              rgba(16,15,13,.72) 48%, rgba(16,15,13,.34) 100%);
}
.hero .contenu { position: relative; padding: 90px 0; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero p { color: #c6c0b7; max-width: 52ch; font-size: 17.5px; }
.hero-logo { height: 58px; width: auto; margin-bottom: 30px; }

.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.bouton {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 100px; text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  border: 1px solid transparent; cursor: pointer;
  transition: all var(--transition);
}
.bouton-plein { background: #fff; color: var(--encre); }
.bouton-plein:hover { background: var(--or); color: #fff; }
.bouton-vide { border-color: rgba(255,255,255,.4); color: #fff; }
.bouton-vide:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.bouton-encre { background: var(--encre); color: var(--fond); }
.bouton-encre:hover { background: var(--or); }
.bouton-trait { border-color: var(--trait); color: var(--encre); }
.bouton-trait:hover { border-color: var(--encre); }

/* --------------------------------------------------------------- grilles */
.grille { display: grid; gap: 26px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.carte {
  background: var(--fond-carte); border: 1px solid var(--trait-fin);
  border-radius: var(--rayon); overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-lien { text-decoration: none; color: inherit; display: block; }
.carte-lien:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.carte figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--fond-creux); }
.carte figure img { width: 100%; height: 100%; object-fit: cover;
                    transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.carte-lien:hover figure img { transform: scale(1.045); }
.carte-corps { padding: 20px 22px 24px; }
.carte-corps p { color: var(--encre-doux); font-size: 14.5px; margin: 0; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.duo img { border-radius: var(--rayon); }
.duo-texte { max-width: 52ch; }

.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.chiffre strong { display: block; font-family: var(--serif); font-size: clamp(30px, 4vw, 46px); font-weight: 500; }
.chiffre span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-pale); }
.section-nuit .chiffre span { color: #8f887e; }

/* --------------------------------------------------------------- galerie */
.galerie { columns: 3; column-gap: 18px; }
.galerie figure { margin: 0 0 18px; break-inside: avoid; border-radius: var(--rayon); overflow: hidden; position: relative; }
.galerie img { width: 100%; }
.galerie figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 18px 14px; color: #fff; font-size: 13.5px;
  background: linear-gradient(transparent, rgba(16,15,13,.78));
  opacity: 0; transition: opacity var(--transition);
}
.galerie figure:hover figcaption { opacity: 1; }

/* ------------------------------------------------------------ etapes/faq */
.etapes { counter-reset: e; display: grid; gap: 0; }
.etape {
  counter-increment: e; display: grid; grid-template-columns: 74px 1fr;
  gap: 22px; padding: 26px 0; border-top: 1px solid var(--trait-fin);
}
.etape::before {
  content: counter(e, decimal-leading-zero);
  font-family: var(--serif); font-size: 30px; color: var(--or); line-height: 1;
}
.etape h3 { margin-bottom: 4px; }
.etape p { color: var(--encre-doux); margin: 0; }

details.qa {
  border-top: 1px solid var(--trait-fin); padding: 4px 0;
}
details.qa:last-of-type { border-bottom: 1px solid var(--trait-fin); }
details.qa summary {
  cursor: pointer; list-style: none; padding: 22px 44px 22px 0;
  font-family: var(--serif); font-size: 19px; position: relative;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: ''; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 1.5px solid var(--or); border-bottom: 1.5px solid var(--or);
  transform: rotate(45deg); transition: transform var(--transition);
}
details.qa[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
details.qa .reponse { padding: 0 44px 24px 0; color: var(--encre-doux); }
details.qa .reponse p:last-child { margin: 0; }

/* -------------------------------------------------------------- contact */
.champ { display: grid; gap: 7px; margin-bottom: 16px; }
.champ label { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-pale); font-weight: 600; }
.champ input, .champ textarea, .champ select {
  font: inherit; font-size: 15px; color: var(--encre);
  padding: 13px 15px; border: 1px solid var(--trait); border-radius: var(--rayon-s);
  background: var(--fond-carte); transition: border-color var(--transition);
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none; border-color: var(--or);
}
.champ textarea { min-height: 150px; resize: vertical; }

.lien-direct {
  display: flex; align-items: center; gap: 15px;
  padding: 18px 20px; border: 1px solid var(--trait-fin);
  border-radius: var(--rayon); background: var(--fond-carte);
  text-decoration: none; transition: all var(--transition); margin-bottom: 12px;
}
.lien-direct:hover { border-color: var(--or); transform: translateX(3px); }
.lien-direct svg { width: 22px; height: 22px; flex: none; color: var(--or); }
.lien-direct strong { display: block; font-size: 15px; font-weight: 500; }
.lien-direct span { font-size: 13.5px; color: var(--encre-pale); }

/* ----------------------------------------------------------------- pied */
.pied { background: var(--nuit); color: #a49d93; padding: 66px 0 30px; font-size: 14px; }
.pied a { color: #d6d0c7; text-decoration: none; }
.pied a:hover { color: #fff; }
.pied-haut { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 40px; }
.pied img { height: 30px; width: auto; margin-bottom: 16px; }
.pied h4 { color: #fff; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px; font-weight: 600; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pied-bas {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: #7d766d;
}

/* -------------------------------------------------------------- mobile */
@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .galerie { columns: 2; }
  .duo { grid-template-columns: 1fr; }
  .duo.inverse > *:first-child { order: 2; }
  .pied-haut { grid-template-columns: 1fr 1fr; }
  .chiffres { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
}
@media (max-width: 720px) {
  :root { --haut-entete: 68px; }
  .entete-haut { padding: 14px 0; }
  .entete-haut img { height: 26px; }
  .burger { display: block; position: absolute; right: 16px; top: 8px; }
  .entete { position: relative; }
  .nav {
    display: none; flex-direction: column; align-items: stretch;
    gap: 0; padding-bottom: 8px;
  }
  .nav.ouvert { display: flex; }
  .nav a { padding: 14px 2px; border-top: 1px solid var(--trait-fin); font-size: 14px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .galerie { columns: 1; }
  .hero { min-height: 0; }
  .hero .contenu { padding: 64px 0; }
  .hero-logo { height: 42px; }
}

/* Photos des sections à deux colonnes : même cadrage partout. */
img.photo-duo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.grille img.photo-duo { aspect-ratio: auto; height: 100%; }

/* Prix unique */
.carte-prix { margin-top: 8px !important; font-weight: 600; color: var(--encre) !important; }
.prix-modele { font-weight: 600; margin-top: 4px; }