/* =========================================================================
   POTERIE DU BOUSQUET — Design System / Foundations
   "Une maison, dedans comme dehors."
   Tokens + base component classes. Shared by Design System.html & Maison.html
   ========================================================================= */

/* ---- 1. TOKENS ---------------------------------------------------------- */
:root{
  /* Couleurs — 80% neutres chaux/pierre, accents terre cuite & vert vallée */
  --color-bg-0:#F5F1EA;      /* Chaux — fond */
  --color-bg-1:#E9E1D6;      /* Pierre — sections alternées */
  --color-bg-2:#DED4C6;      /* Pierre foncée — fonds d'inset */
  --color-text-0:#2A221E;    /* Brun atelier — texte principal */
  --color-text-1:#4A3F38;    /* Brun doux — texte secondaire */
  --color-text-2:#7A6E63;    /* Brun pâle — légendes / méta */
  --color-accent-0:#B65A3C;  /* Terre cuite — CTA, repères */
  --color-accent-0-ink:#9C4A30; /* Terre cuite foncée — liens/texte (AA sur chaux) */
  --color-accent-1:#2F5B4A;  /* Vert vallée — accent secondaire */
  --color-accent-1-ink:#274C3E;
  --color-line:#D8CFC2;      /* Lignes / borders */
  --color-line-strong:#C4B8A6;
  --color-on-accent:#FBF7F0; /* texte sur accent */

  /* Accent actif (piloté par Tweaks : terre cuite | vert vallée) */
  --accent:var(--color-accent-0);
  --accent-ink:var(--color-accent-0-ink);

  /* États UI */
  --color-focus:#B65A3C;

  /* Typographie */
  --font-heading:"EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:"Mulish", system-ui, -apple-system, sans-serif;

  /* Échelle type — desktop (mobile via clamp dans les classes) */
  --fs-display:clamp(2.5rem, 1.4rem + 4.8vw, 4rem);   /* H1 40→64 */
  --fs-h1:clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --fs-h2:clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);     /* 28→40 */
  --fs-h3:clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);   /* 20→28 */
  --fs-body:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);  /* 16→18 */
  --fs-small:0.9375rem;
  --fs-caption:0.8125rem;                              /* 13→14 */
  --fs-label:0.75rem;

  --lh-tight:1.1;
  --lh-heading:1.15;
  --lh-body:1.6;
  --lh-caption:1.4;

  /* Tracking */
  --track-label:0.16em;
  --track-chapter:0.32em;

  /* Grille & layout */
  --maxw:1240px;
  --maxw-text:62ch;
  --gutter:24px;

  /* Spacing scale (base 8) */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;

  /* Radius */
  --radius-1:8px;   /* cards */
  --radius-2:12px;  /* hero media */
  --radius-3:20px;
  --radius-pill:999px;

  /* Border & shadow (très léger — pas de look e-commerce) */
  --border:1px solid var(--color-line);
  --shadow-1:0 4px 16px rgba(42,34,30,.06);
  --shadow-2:0 6px 24px rgba(42,34,30,.08);
  --shadow-3:0 18px 48px rgba(42,34,30,.12);

  /* Motion */
  --dur-fast:150ms;
  --dur-base:260ms;
  --dur-slow:420ms;
  --ease:cubic-bezier(.2,.6,.2,1);
}

/* ---- 2. RESET / BASE ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--color-text-0);
  background:var(--color-bg-0);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
h1,h2,h3,h4{margin:0;font-family:var(--font-heading);font-weight:500;line-height:var(--lh-heading);color:var(--color-text-0);}
p{margin:0;text-wrap:pretty;}
a{color:var(--accent-ink);}
::selection{background:color-mix(in oklab, var(--accent) 28%, transparent);}

/* Focus visible — anneau 2px + offset (WCAG) */
:where(a,button,input,select,textarea,[tabindex],.is-focusable):focus-visible{
  outline:2px solid var(--color-focus);
  outline-offset:3px;
  border-radius:3px;
}

/* ---- 3. TYPOGRAPHIE (classes utilitaires) ------------------------------- */
.t-display{font-family:var(--font-heading);font-size:var(--fs-display);line-height:var(--lh-tight);font-weight:500;letter-spacing:-.01em;}
.t-h1{font-size:var(--fs-h1);}
.t-h2{font-size:var(--fs-h2);}
.t-h3{font-size:var(--fs-h3);}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body);}
.t-lead{font-size:clamp(1.125rem,1rem + .6vw,1.375rem);line-height:1.5;color:var(--color-text-1);}
.t-caption{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-2);}
.t-small{font-size:var(--fs-small);color:var(--color-text-1);}

/* Label / numéro de chapitre — sans, capitales, tracking large */
.t-label{
  font-family:var(--font-body);
  font-size:var(--fs-label);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--track-label);
  color:var(--accent-ink);
}
.t-chapter{
  font-family:var(--font-body);
  font-size:var(--fs-label);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--track-chapter);
  color:var(--color-text-2);
}

/* ---- 4. LAYOUT ---------------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
@media (max-width:600px){ .container{padding-inline:20px;} }

.section{padding-block:var(--space-9);}
.section--bg0{background:var(--color-bg-0);}
.section--bg1{background:var(--color-bg-1);}
@media (max-width:600px){ .section{padding-block:var(--space-8);} }

/* ---- 5. BOUTONS --------------------------------------------------------- */
.btn{
  --_bg:var(--accent);
  display:inline-flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-body);font-size:var(--fs-small);font-weight:700;
  letter-spacing:.01em;
  padding:14px 24px;border-radius:var(--radius-pill);
  border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;line-height:1;
  transition:background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--_bg);color:var(--color-on-accent);}
.btn--primary:hover{background:color-mix(in oklab, var(--accent) 86%, #000);}
.btn--secondary{background:transparent;color:var(--color-text-0);border-color:var(--color-line-strong);}
.btn--secondary:hover{border-color:var(--color-text-0);background:color-mix(in oklab,var(--color-text-0) 5%, transparent);}
.btn--tertiary{background:transparent;color:var(--accent-ink);padding-inline:4px;border-radius:4px;}
.btn--tertiary:hover{text-decoration:underline;text-underline-offset:4px;}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;transform:none;}
.btn .btn__arrow{transition:transform var(--dur-base) var(--ease);}
.btn:hover .btn__arrow{transform:translateX(3px);}

/* ---- 6. LIENS texte ----------------------------------------------------- */
.link{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.link:hover{color:var(--color-text-0);text-decoration-thickness:2px;}

/* ---- 7. CHIPS / TAGS ---------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-caption);font-weight:600;
  padding:6px 14px;border-radius:var(--radius-pill);
  background:transparent;border:1px solid var(--color-line-strong);
  color:var(--color-text-1);white-space:nowrap;
}
.chip--solid{background:color-mix(in oklab,var(--accent) 12%, var(--color-bg-0));border-color:transparent;color:var(--accent-ink);}

/* ---- 8. BADGE ----------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-caption);font-weight:600;letter-spacing:.04em;
  color:var(--color-text-1);
  padding:7px 14px;border-radius:var(--radius-pill);
  background:color-mix(in oklab,var(--color-bg-0) 70%, transparent);
  border:1px solid var(--color-line);
  backdrop-filter:blur(6px);
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}

/* ---- 9. CAPTION SYSTEM (preuve visuelle) -------------------------------- */
.caption{display:flex;flex-direction:column;gap:2px;}
.caption__title{font-family:var(--font-heading);font-size:1.0625rem;font-weight:500;color:var(--color-text-0);line-height:1.25;}
.caption__proof{font-size:var(--fs-caption);color:var(--color-text-1);}
.caption__detail{font-size:var(--fs-caption);color:var(--color-text-2);}

/* ---- 10. CARD ----------------------------------------------------------- */
.card{
  background:var(--color-bg-0);
  border:var(--border);
  border-radius:var(--radius-1);
  overflow:hidden;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

/* ---- 11. QUOTE ---------------------------------------------------------- */
.quote{max-width:24ch;}
.quote__mark{font-family:var(--font-heading);font-size:4rem;line-height:.5;color:var(--accent);opacity:.5;}
.quote__text{font-family:var(--font-heading);font-size:var(--fs-h2);line-height:1.25;font-weight:500;}
.quote__source{font-size:var(--fs-caption);letter-spacing:.04em;color:var(--color-text-2);text-transform:uppercase;}

/* ---- 12. RULE / divider ------------------------------------------------- */
.rule{height:1px;background:var(--color-line);border:0;}

/* ---- 13. HELPERS -------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--space-4);}
.eyebrow::before{content:"";width:28px;height:1.5px;background:var(--accent);display:block;}
.stack-2{display:flex;flex-direction:column;gap:var(--space-2);}
.stack-3{display:flex;flex-direction:column;gap:var(--space-3);}
.stack-4{display:flex;flex-direction:column;gap:var(--space-4);}
.stack-5{display:flex;flex-direction:column;gap:var(--space-5);}
.measure{max-width:var(--maxw-text);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}