/* ==========================================================================
   Exemples de sites (fictifs) imaginés par M&S Design
   Quatre petites pages autonomes : une boutique de plantes, un bureau
   d'architecture, une boulangerie et un studio de graphisme.
   ========================================================================== */
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-normal-300-700-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-italic-300-700-latin.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../assets/fonts/instrument-sans-400-700-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-var-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.6 "Instrument Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.ex-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

/* le bandeau honnête : c’est un exemple, pas un vrai commerce */
.ex-note { display: flex; justify-content: center; align-items: center; gap: 8px 18px; flex-wrap: wrap; min-height: 36px; padding: 6px 16px; background: #171717; color: #f5f1e9; font: 500 12.5px/1.3 "Instrument Sans", sans-serif; letter-spacing: 0.02em; text-align: center; }
.ex-note a { color: #9db8ff; text-decoration: none; }
.ex-note a:hover { text-decoration: underline; }

/* ==========================================================================
   1. Verdane — boutique de plantes (crème, vert sapin, terracotta)
   ========================================================================== */
.ex-verdane { background: #f4efe6; color: #21402c; }
.vd-hdr { display: flex; align-items: center; justify-content: space-between; padding: 26px 0; }
.vd-logo { font: 400 26px/1 "Fraunces", serif; letter-spacing: -0.01em; text-decoration: none; }
.vd-nav { display: flex; gap: 30px; font-size: 14px; font-weight: 500; }
.vd-nav a { text-decoration: none; }
.vd-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding: clamp(28px, 6vh, 64px) 0 clamp(64px, 10vh, 120px); }
.vd-eyebrow { font: 600 11.5px/1.4 "Instrument Sans", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #b4603e; }
.vd-title { margin-top: 18px; font: 400 clamp(52px, 6.4vw, 92px)/0.96 "Fraunces", serif; letter-spacing: -0.035em; }
.vd-lead { margin-top: 28px; max-width: 30em; color: #5d6b5f; font-size: 16.5px; }
.vd-actions { display: flex; align-items: center; gap: 26px; margin-top: 34px; }
.vd-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 26px; border-radius: 999px; background: #b4603e; color: #fff8f1; font-weight: 600; font-size: 15px; text-decoration: none; }
.vd-link { font-weight: 600; font-size: 15px; text-decoration: none; }
.vd-photo img { width: 100%; aspect-ratio: 1 / 1.02; object-fit: cover; border-radius: 16px; box-shadow: 0 40px 70px -40px rgba(33, 64, 44, 0.55); }
.vd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); padding: clamp(48px, 8vh, 88px) 0; border-top: 1px solid rgba(33, 64, 44, 0.14); }
.vd-cols h2 { font: 400 28px/1.15 "Fraunces", serif; letter-spacing: -0.02em; margin-bottom: 10px; }
.vd-cols p { color: #5d6b5f; }
.vd-visit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-bottom: clamp(56px, 9vh, 96px); padding: clamp(32px, 4vw, 56px); border-radius: 16px; background: #21402c; color: #f4efe6; }
.vd-visit h2 { font: 400 clamp(32px, 3.4vw, 48px)/1.05 "Fraunces", serif; letter-spacing: -0.02em; }
.vd-visit p { margin-top: 12px; color: rgba(244, 239, 230, 0.78); }
.vd-hours { display: grid; gap: 6px; font-size: 15px; }
.vd-hours li { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 6px; border-bottom: 1px solid rgba(244, 239, 230, 0.16); }

/* ==========================================================================
   2. Atelier Véritas — architecture (blanc cassé, noir, serif fin)
   ========================================================================== */
.ex-veritas { background: #f3f1ed; color: #151515; }
.vt-hdr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 28px 0; }
.vt-logo { font: 400 25px/1 "Fraunces", serif; letter-spacing: -0.01em; text-decoration: none; }
.vt-nav { display: flex; gap: 46px; font: 500 11px/1 "Instrument Sans", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.vt-nav a, .vt-ask { text-decoration: none; }
.vt-ask { justify-self: end; font: 500 11px/1 "Instrument Sans", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.vt-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(24px, 3vw, 48px); padding: clamp(28px, 5vh, 56px) 0 clamp(56px, 9vh, 96px); }
.vt-title { font: 300 clamp(60px, 8.2vw, 124px)/0.98 "Fraunces", serif; letter-spacing: -0.03em; }
.vt-title em { font-style: italic; }
.vt-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.8fr); gap: 24px; align-items: end; margin-top: clamp(36px, 6vh, 64px); }
.vt-num { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.16em; color: #6b6964; }
.vt-num::before { content: ""; width: 28px; height: 1px; background: #9a978f; }
.vt-text { margin-top: 18px; max-width: 22em; font-size: 14.5px; line-height: 1.7; color: #3b3a37; }
.vt-more { display: inline-flex; gap: 12px; margin-top: 24px; padding-bottom: 6px; border-bottom: 1px solid #151515; font: 600 11px/1 "Instrument Sans", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.vt-small img { width: 100%; aspect-ratio: 0.82; object-fit: cover; }
.vt-big { position: relative; }
.vt-big img { width: 100%; aspect-ratio: 0.92; object-fit: cover; }
.vt-tag { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; font: 500 11px/1 "Instrument Sans", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.vt-tag span:first-child { display: flex; align-items: center; gap: 12px; }
.vt-tag span:first-child::before { content: ""; width: 28px; height: 1px; background: #9a978f; }
.vt-seal { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #151515; border-radius: 50%; font: 400 22px/1 "Fraunces", serif; }
.vt-side { position: absolute; right: -40px; top: 90px; writing-mode: vertical-rl; font: 500 10.5px/1 "Instrument Sans", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #3b3a37; }
.vt-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); padding: clamp(48px, 8vh, 88px) 0; border-top: 1px solid rgba(21, 21, 21, 0.12); }
.vt-projects h2 { grid-column: 1 / -1; font: 300 clamp(36px, 4vw, 56px)/1 "Fraunces", serif; letter-spacing: -0.02em; }
.vt-projects figure img { width: 100%; aspect-ratio: 1.2; object-fit: cover; }
.vt-projects figcaption { margin-top: 14px; font-size: 14px; color: #3b3a37; }
.vt-projects figcaption strong { display: block; font: 400 21px/1.3 "Fraunces", serif; color: #151515; }
.vt-quote { display: grid; place-content: center; aspect-ratio: 1.2; padding: 32px; background: #e6e2da; font: 300 italic 26px/1.3 "Fraunces", serif; }

/* ==========================================================================
   3. Le Fournil — boulangerie (crème chaud, serif gras, terracotta)
   ========================================================================== */
.ex-fournil { background: #f6efe4; color: #1b1510; }
.fn-hdr { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.fn-logo { display: flex; align-items: center; gap: 10px; font: 700 24px/1 "Fraunces", serif; letter-spacing: -0.01em; text-decoration: none; }
.fn-logo svg { width: 26px; height: 30px; }
.fn-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.fn-nav a { text-decoration: none; }
.fn-cart { display: inline-flex; align-items: center; gap: 8px; padding-left: 22px; border-left: 1px solid rgba(27, 21, 16, 0.2); }
.fn-cart svg { width: 18px; height: 18px; }
.fn-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 4vw, 64px); padding: clamp(24px, 4vh, 48px) 0 clamp(64px, 10vh, 112px); overflow: hidden; }
.fn-swirl { position: absolute; left: 10%; top: -10%; width: 70%; height: 120%; pointer-events: none; }
.fn-copy { position: relative; }
.fn-title { font: 700 clamp(40px, 4.6vw, 68px)/1.04 "Fraunces", serif; letter-spacing: -0.025em; }
.fn-lead { margin-top: 26px; max-width: 30em; font-size: 17px; color: #3e352d; }
.fn-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 32px; padding: 12px 28px; border-radius: 999px; background: #b85a3a; color: #fff6ee; font-weight: 600; font-size: 16px; text-decoration: none; }
.fn-photo { position: relative; z-index: 1; }
.fn-photo img { width: 100%; aspect-ratio: 1.05; object-fit: cover; border-radius: 22px; }
.fn-today { padding: clamp(48px, 8vh, 88px) 0; border-top: 1px solid rgba(27, 21, 16, 0.12); }
.fn-today h2 { font: 700 clamp(32px, 3.4vw, 48px)/1.05 "Fraunces", serif; letter-spacing: -0.02em; }
.fn-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); margin-top: 32px; }
.fn-menu li { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px dashed rgba(27, 21, 16, 0.25); font-size: 17px; }
.fn-menu small { display: block; color: #7a6d60; font-size: 14px; }
.fn-menu b { font: 600 18px/1.3 "Fraunces", serif; }
.fn-hours { margin-bottom: clamp(56px, 9vh, 96px); padding: clamp(28px, 3vw, 44px); border-radius: 22px; background: #efe2cf; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; font-size: 16px; }
.fn-hours strong { font: 700 22px/1.2 "Fraunces", serif; }

/* ==========================================================================
   4. Studio Bascule — graphisme (sable, bleu électrique, typographie)
   ========================================================================== */
.ex-bascule { background: #e3d9cf; color: #2741f2; }
.bs-hdr { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; font: 600 13px/1 "Instrument Sans", sans-serif; letter-spacing: 0.04em; }
.bs-hdr nav { display: flex; gap: 26px; }
.bs-hdr a { text-decoration: none; }
.bs-hero { padding: clamp(32px, 7vh, 80px) 0 clamp(56px, 9vh, 104px); }
.bs-name { font: 900 clamp(48px, 8.4vw, 132px)/0.86 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -0.01em; text-transform: uppercase; }
.bs-role { margin-top: clamp(14px, 2vw, 28px); font: 300 clamp(48px, 7.6vw, 118px)/0.98 "Fraunces", serif; letter-spacing: -0.03em; }
.bs-role em { font-style: italic; }
.bs-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: clamp(40px, 7vh, 72px); font-size: 17px; line-height: 1.55; }
.bs-intro p:last-child { justify-self: end; max-width: 22em; }
.bs-works { border-top: 2px solid #2741f2; margin-bottom: clamp(56px, 9vh, 96px); }
.bs-works li { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) 80px; align-items: baseline; gap: 20px; padding: 22px 0; border-bottom: 1px solid rgba(39, 65, 242, 0.35); }
.bs-works b { font: 800 clamp(22px, 2.4vw, 34px)/1.1 "Archivo", sans-serif; font-stretch: 112%; text-transform: uppercase; }
.bs-works span { font: 300 italic 20px/1.3 "Fraunces", serif; }
.bs-works small { justify-self: end; font-size: 14px; }

/* pied de page commun aux exemples */
.ex-foot { padding: 28px 0 36px; font-size: 13.5px; opacity: 0.75; }

/* ==========================================================================
   Petits écrans
   ========================================================================== */
@media (max-width: 860px) {
  .vd-hero, .vt-hero, .fn-hero, .vd-visit { grid-template-columns: minmax(0, 1fr); }
  .vd-cols, .vt-projects { grid-template-columns: minmax(0, 1fr); }
  .vd-nav, .vt-nav, .fn-nav a:not(.fn-cart) { display: none; }
  .vt-hdr { grid-template-columns: 1fr auto; }
  .vt-side { display: none; }
  .fn-menu, .bs-intro { grid-template-columns: minmax(0, 1fr); }
  .vt-row { grid-template-columns: minmax(0, 1fr); }
  .vt-small { max-width: 60%; }
  .bs-intro p:last-child { justify-self: start; }
  .bs-works li { grid-template-columns: 44px minmax(0, 1fr); }
  .bs-works span, .bs-works small { grid-column: 2; justify-self: start; }
}