/* Maison Couture — landing page
   Tokens : design system Maison Couture v1.1, fond sombre bleu nuit (enduit de la carte de visite) */

@font-face { font-family: "Prata"; font-weight: 400; font-display: swap; src: url("fonts/prata-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("fonts/manrope-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("fonts/manrope-600.woff2") format("woff2"); }

:root {
  --craie: #F0EBE3;
  --pierre: #E6DED2;
  --terre-emaillee: #6E4A35;
  --brou: #3B2619;
  --chocolat: #1E140E;

  --bleu-nuit: #232B3B;      /* teinte médiane de l'enduit */
  --bleu-ombre: #171D2B;
  --bleu-accent: #2E3A55;    /* étiquettes et numéros sur craie */
  --texte-sur-sombre: #E6E1D8;
  --laiton-clair: #D9C190;

  --display: "Prata", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;

  --gouttiere: clamp(20px, 5vw, 56px);
  --largeur: 1120px;
  --filet: 1.5px;
  --section: clamp(88px, 14vh, 152px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  background: var(--craie);
  color: var(--chocolat);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-weight: 400; }

.etiquette {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bleu-accent);
}
.titre-section {
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.08;
}

.bouton {
  display: inline-block;
  padding: 15px 30px;
  border: var(--filet) solid currentColor;
  color: var(--craie);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s;
}
.bouton:hover, .bouton:focus-visible {
  background: var(--craie);
  border-color: var(--craie);
  color: var(--bleu-nuit);
}
.bouton:focus-visible { outline: var(--filet) solid var(--laiton-clair); outline-offset: 4px; }

/* ---------- Bandeau sticky ---------- */

.bandeau {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gouttiere);
  background-color: var(--bleu-nuit);
  background-image:
    linear-gradient(rgba(23, 29, 43, 0.35), rgba(23, 29, 43, 0.35)),
    url("assets/enduit-bandeau.jpg");
  background-size: cover;
  background-position: center;
}
.bandeau__logo { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.bandeau__logo img { width: 112px; height: auto; }
.bandeau__baseline { font-size: 0.66rem; font-weight: 600; color: var(--laiton-clair); line-height: 1; }
.bandeau { transition: transform .3s ease; }
.bandeau--cache { transform: translateY(-100%); }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bandeau__cta {
  position: absolute;
  right: var(--gouttiere);
  color: var(--craie);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: var(--filet) solid var(--laiton-clair);
}
.bandeau__cta:hover, .bandeau__cta:focus-visible { color: var(--laiton-clair); }
html { scroll-padding-top: 84px; }

/* ---------- 1. Ouverture ---------- */

.ouverture {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(72px, 12vh, 128px) var(--gouttiere) 0;
  text-align: center;
}
.ouverture h1 {
  margin: 0 auto 28px;
  max-width: 22em;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bleu-accent);
}
.ouverture__sous {
  margin: 20px auto 0;
  max-width: 24em;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  color: var(--brou);
  text-wrap: balance;
}
.ouverture__texte {
  margin: 0 auto;
  max-width: 34em;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.4;
  text-wrap: pretty;
}

/* ---------- 2. Confiance (survol) ---------- */

.confiance {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--section) var(--gouttiere) 0;
  text-align: center;
}
.confiance__scene {
  margin-top: clamp(28px, 4vh, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.archis li + li { margin-top: clamp(6px, 1.2vh, 14px); }
.archis button {
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.15;
  color: #B3A799;
  transition: color .3s;
}
.archis button.actif, .archis button:hover, .archis button:focus-visible { color: var(--chocolat); }
.archis button:focus-visible { outline: var(--filet) solid var(--bleu-accent); outline-offset: 6px; }

.vignette { position: relative; margin: 0; }
.vignette img, .vignette .vignette__attente {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.vignette--detail { justify-self: end; width: min(100%, 300px); }
.vignette--ensemble { justify-self: start; width: min(100%, 300px); }
.vignette__attente {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--pierre);
  color: var(--terre-emaillee);
  font-size: 0.8rem;
  font-weight: 600;
}
.vignette__attente[hidden], .vignette img[hidden] { display: none !important; }
.vignette figcaption {
  position: absolute;
  left: 0; right: 0; top: 100%;
  margin-top: 10px;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--terre-emaillee);
}
@media (prefers-reduced-motion: no-preference) {
  .vignette.visible > img:not([hidden]), .vignette.visible > .vignette__attente { animation: fondu .45s ease-out; }
  @keyframes fondu { from { opacity: 0; } }
}

/* ---------- Mosaïque de détails (dans « Ce que nous faisons ») ---------- */

.finitions__grille {
  margin: 0 auto;
  max-width: 560px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.mosaique__col { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; }
.mosaique__col img { width: 100%; height: auto; display: block; }

/* ---------- 3. Services ---------- */

.services {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: var(--section) var(--gouttiere) 0;
}
.services__haut {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.services__intro { margin-top: 20px; max-width: 34em; font-size: 1.08rem; color: var(--brou); }
.services__phases[hidden] { display: none; }
.services__phases {
  margin-top: clamp(36px, 5vh, 56px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.phase ul { margin-top: 14px; border-top: var(--filet) solid var(--chocolat); }
.phase li { padding: 14px 0; border-bottom: var(--filet) solid var(--pierre); }

/* ---------- 5. Méthode ---------- */

.methode {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: var(--section) var(--gouttiere) 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 7vw, 104px);
  align-items: start;
}
.methode__photo { position: sticky; top: 32px; }
.methode__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.methode__photo figcaption { margin-top: 10px; font-size: 0.8rem; font-weight: 600; color: var(--terre-emaillee); }

.points { margin-top: clamp(28px, 4vh, 44px); }
.points li {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 8px;
  padding: 26px 0;
  border-top: var(--filet) solid var(--pierre);
}
.points li:last-child { border-bottom: var(--filet) solid var(--pierre); }
.num {
  grid-row: span 2;
  font-family: var(--display);
  font-size: 2.2rem;
  line-height: 0.95;
  color: var(--bleu-accent);
}
.points h3 { font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 1.6rem); line-height: 1.15; }
.points p { margin-top: 8px; color: var(--brou); }

/* ---------- 6. Portrait ---------- */

.portrait {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: var(--section) var(--gouttiere);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 7vw, 104px);
  align-items: center;
}
.portrait__texte { grid-column: 1; grid-row: 1; }
.portrait__photo { grid-column: 2; grid-row: 1; }
.portrait__photo img, .portrait__attente { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.portrait__attente { background: var(--pierre); }
.portrait__texte p { margin-top: 20px; max-width: 32em; font-size: 1.08rem; color: var(--brou); }
.portrait__texte .portrait__chute {
  margin-top: 28px;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  color: var(--chocolat);
}

/* ---------- 7. Contact ---------- */

.cloture {
  color: var(--texte-sur-sombre);
  background-color: var(--bleu-nuit);
  background-image:
    linear-gradient(rgba(23, 29, 43, 0.35), rgba(23, 29, 43, 0.6)),
    url("assets/enduit-bleu-nuit.jpg");
  background-size: cover, cover;
  background-position: center, center;
  padding: clamp(80px, 13vh, 128px) var(--gouttiere) 28px;
  text-align: center;
}
.contact h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.08;
  color: var(--craie);
}
.contact__intro { margin: 16px auto 0; max-width: 26em; text-wrap: balance; }
.contact .bouton { margin-top: 34px; }
.liens {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 36px;
}
.liens a {
  color: var(--craie);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: var(--filet) solid var(--laiton-clair);
  transition: color .2s;
}
.liens a:hover, .liens a:focus-visible { color: var(--laiton-clair); }

.mentions {
  max-width: var(--largeur);
  margin: clamp(64px, 10vh, 96px) auto 0;
  padding-top: 18px;
  border-top: var(--filet) solid rgba(230, 225, 216, 0.16);
  text-align: left;
  font-size: 0.78rem;
  color: rgba(230, 225, 216, 0.7);
}
.mentions summary { cursor: pointer; list-style: none; font-weight: 600; width: fit-content; }
.mentions summary::-webkit-details-marker { display: none; }
.mentions summary:hover { color: var(--texte-sur-sombre); }
.mentions p { margin-top: 10px; line-height: 1.7; }

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  .bandeau { justify-content: flex-start; height: 72px; }
  .bandeau__logo { align-items: flex-start; }
  .bandeau__logo img { width: 96px; }
  html { scroll-padding-top: 72px; }
  .ouverture__texte { text-align: left; }
  .confiance__scene { grid-template-columns: 1fr 1fr; gap: 12px; }
  .vignette--detail, .vignette--ensemble { width: 100%; justify-self: stretch; }
  .vignette--detail { grid-row: 1; grid-column: 1; }
  .vignette--ensemble { grid-row: 1; grid-column: 2; }
  .vignette figcaption { position: static; }
  .archis { grid-row: 2; grid-column: 1 / -1; margin-top: 20px; }
  .finitions__grille { gap: 6px; }
  .mosaique__col { gap: 6px; }
  .services__phases { grid-template-columns: 1fr; }
  .services__haut { grid-template-columns: 1fr; gap: 36px; }
  .methode, .portrait { grid-template-columns: 1fr; }
  .methode__photo { position: static; }
  .portrait__texte, .portrait__photo { grid-column: auto; grid-row: auto; }
  .liens { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }