/* =========================================================
   Pouzolles · jetons de design « Haie taillée »
   Charte validée le 23/10/2026 (retours client) : sobre, élégante,
   vert haie profond, blanc presque pur, gris pierre. Pas de pastel,
   pas de crème, une seule famille de police.
   ========================================================= */

:root {
  /* Couleurs */
  --haie:     #1E3326;   /* vert haie taillée : fonds sombres, boutons */
  --haie-nuit:#142219;   /* pied de page */
  --gazon:    #4A6741;   /* vert mousse : accent, liens (6:1 sur blanc) */
  --chaux:    #FAFAF7;   /* blanc presque pur, à peine chaud : fond principal */
  --tonte:    #ECEBE6;   /* gris pierre : fonds secondaires */
  --encre:    #161A16;   /* texte */
  --signal:   #D9B43A;   /* réservé : filet d'alerte débroussaillement */
  --tuile:    #B4502F;   /* réservé : tête de la borne (favicon) */

  /* Rôles */
  --fond:        var(--chaux);
  --fond-alt:    var(--tonte);
  --texte:       var(--encre);
  --texte-doux:  #4F554D;
  --accent:      var(--gazon);
  --filet:       rgba(22, 26, 22, .14);
  --sombre:      var(--haie);
  --sur-sombre:  var(--chaux);

  /* Typo : Newsreader (titres, avec italiques), Barlow (texte), Barlow Condensed (repères de terrain) */
  --f-titre: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-texte: "Barlow", system-ui, sans-serif;
  --f-data:  "Barlow Condensed", "Arial Narrow", sans-serif;

  --t-xs:  0.8125rem;                                /* 13 */
  --t-s:   0.9375rem;                                /* 15 */
  --t-m:   clamp(1.0625rem, .98rem + .3vw, 1.125rem); /* 17-18 */
  --t-l:   clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --t-xl:  clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  --t-2xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --t-geant: clamp(4.5rem, 1rem + 13vw, 15rem);   /* titres et chiffres monumentaux */

  /* Espacements (base 8) */
  --e-1: .5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2rem;
  --e-6: 3rem;  --e-8: 4rem; --e-12: 6rem;  --e-16: 8rem;

  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --largeur-max: 76rem;
  --mesure: 62ch;

  /* Formes : coupe nette, angles presque droits */
  --rayon: 2px;
  --rayon-pilule: 999px;
  --filet-l: 1px solid var(--filet);

  /* Mouvement */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* entrées, retours d'état */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* mouvement à l'écran (la coupe) */
  --duree-ui: 180ms;   /* changements de couleur : gardés en mouvement réduit (ce ne sont pas des déplacements) */
}

/* Emplacement photo en attente (numéro du plan de prise de vue) */
.ph {
  position: relative;
  background: #CFD3CA;
  border-radius: var(--rayon);
  display: grid;
  place-items: end start;
  padding: var(--e-2);
  font: 400 var(--t-xs)/1.4 var(--f-texte);
  letter-spacing: .02em;
  color: #3D453B;
}
.ph::after { content: attr(data-photo); max-width: 32ch; }