/* ==========================================================================
   Lieux-dits · Design System
   Dérivé de l'illustration héros public/img/territoire/lieux-dits-ponts-2.png
   Palette échantillonnée sur l'image (voir docs/guides/GUIDE_identite-visuelle.md)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Work+Sans:wght@400;500;600&family=Caveat:wght@500;600;700&display=swap');

:root{
  /* · Papier / lumière (ciel & rivière de l'image) · */
  --paper:      #f4ebd6;   /* crème ciel, fond principal */
  --paper-2:    #efe7d0;   /* section alternée */
  --paper-3:    #e7e0c8;   /* cartes creusées */
  --river:      #e9e6d2;   /* argent-crème de la rivière */
  --light:      #f2deb6;   /* lumière dorée rasante */

  /* · Encre & verts (masses de champs, ombres) · */
  --ink:        #2f3a31;   /* texte principal, quasi vert-noir */
  --ink-soft:   #55604a;   /* texte secondaire */
  --forest:     #385244;   /* vert profond, sections sombres */
  --olive:      #5f664d;
  --sage:       #7c8d63;
  --sage-2:     #939062;
  --sage-light: #b1b270;

  /* · Blé (champs mûrs) · */
  --wheat:      #cabf82;
  --wheat-soft: #ddd3a0;

  /* · Terre cuite (toits) : accent chaud UNIQUE · */
  --terracotta:   #c1663a;
  --terracotta-d: #a4522c;

  /* · Traits / ombres · */
  --line:      rgba(47,58,49,.16);
  --line-2:    rgba(47,58,49,.28);
  --shadow-sm: 0 2px 10px -5px rgba(47,58,49,.45);
  --shadow:    0 22px 46px -28px rgba(47,58,49,.55);

  /* · Rayons · */
  --r-sm: 4px;
  --r:    10px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* · Typographie · */
  --serif:  "Fraunces", Georgia, "Times New Roman", serif;  /* display, caractère old-style */
  --sans:   "Work Sans", system-ui, -apple-system, sans-serif; /* corps, humaniste net */
  --script: "Caveat", "Segoe Script", cursive;              /* murmures, accent manuscrit */

  --wrap: 1120px;
}

/* ····· Base ····· */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ····· Échelle typographique ····· */
.display{font-family:var(--serif);font-size:clamp(2.6rem,6vw,4.8rem);font-weight:600;line-height:1.04}
.h2{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.6rem)}
.h3{font-family:var(--serif);font-size:1.3rem}
.lead{font-size:clamp(1.05rem,1.7vw,1.28rem);color:var(--ink-soft)}
.small{font-size:.88rem;color:var(--ink-soft)}
/* Murmure : accent manuscrit (le motif qui monte des villages) */
.murmur{font-family:var(--script);font-size:1.35em;font-weight:600;color:var(--olive);line-height:1}

/* ····· Boutons ····· */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans);font-weight:600;
     font-size:.98rem;padding:.8rem 1.4rem;border-radius:var(--r-pill);border:1.5px solid transparent;
     cursor:pointer;transition:transform .16s ease,background .18s,color .18s,border-color .18s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--terracotta);color:#fff}
.btn-primary:hover{background:var(--terracotta-d)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-soft{background:var(--paper-3);color:var(--ink)}
.btn-soft:hover{background:var(--wheat-soft)}
.btn-light{border-color:rgba(255,255,255,.75);color:#fff}
.btn-light:hover{background:#fff;color:var(--ink)}

/* ····· Pastilles / badges ····· */
.pill{display:inline-flex;align-items:center;gap:.4em;font-family:var(--sans);font-weight:600;
      font-size:.8rem;padding:.32em .85em;border-radius:var(--r-pill);
      background:var(--paper-3);color:var(--ink);border:1px solid var(--line)}
.pill .icon{width:1em;height:1em}
.pill-terracotta{background:rgba(193,102,58,.14);color:var(--terracotta-d);border-color:rgba(193,102,58,.3)}
.pill-sage{background:rgba(124,141,99,.18);color:var(--olive);border-color:rgba(124,141,99,.35)}
.pill-wheat{background:rgba(202,191,130,.28);color:#6b5f2c;border-color:rgba(202,191,130,.5)}
.pill-forest{background:var(--forest);color:var(--paper);border-color:transparent}

/* Marqueur numéroté (étapes, points d'intérêt) */
.dot{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;
     border-radius:var(--r-pill);font-family:var(--serif);font-weight:600;
     background:var(--terracotta);color:#fff;font-size:.95rem}
.dot-ghost{background:transparent;color:var(--terracotta);border:1.5px solid currentColor}

/* ····· Cartes ····· */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;box-shadow:var(--shadow-sm)}
.card-raised{box-shadow:var(--shadow)}
.card-featured{border-color:var(--terracotta)}

/* ····· Icônes (trait plume, comme l'illustration) ····· */
.icon{width:1.5rem;height:1.5rem;display:inline-block;vertical-align:middle;
      fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-lg{width:2.4rem;height:2.4rem;stroke-width:1.4}

/* ····· Sections ····· */
.section{padding:88px 0}
.section-alt{background:var(--paper-2)}
.section-forest{background:var(--forest);color:var(--paper)}
.section-forest .lead,.section-forest .small{color:rgba(244,235,214,.8)}

/* ····· Filet décoratif (rivière stylisée) ····· */
.rule-river{height:2px;border:0;background:
  repeating-linear-gradient(90deg,var(--sage) 0 14px,transparent 14px 22px);opacity:.5;margin:1.4rem 0}

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