/* ============================================================
   Charte Strada Balanina pour le site · version 1 · 16/10/2026
   À charger après les styles existants, puis remplacer peu à peu
   les anciennes variables (voir LISEZ-MOI.txt).
   ============================================================ */

/* Polices hébergées sur ton serveur (dossier /fonts), sans appel à Google */
@font-face { font-family: "Lora"; src: url("fonts/Lora-VF.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/Lora-Italic-VF.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-VF.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  /* Couleurs */
  --olive: #3F4B2E;        /* encre : logo, titres, textes, boutons */
  --creme: #FFFAE3;        /* papier : fond de page */
  --sauge-pale: #E5E4C8;   /* encadrés, fonds de sections alternées */
  --sauge: #A9B18A;        /* filets, décor ; jamais de petit texte dessus */
  --terre-cuite: #A9532F;  /* accent rare : prix, chemin en pointillés */
  --ecorce: #5C4A36;       /* légendes, mentions */

  /* Polices */
  --font-titre: "Lora", Georgia, "Times New Roman", serif;
  --font-texte: "Nunito", "Segoe UI", Arial, sans-serif;

  /* Tailles (ordinateur) */
  --h1: 44px; --h2: 32px; --h3: 22px; --texte: 18px; --petit: 15px; --mention: 14px;

  /* Éléments */
  --rayon-photo: 18px;   /* coins arrondis des photos */
  --filet-photo: 2px;    /* filet olive autour des photos */
  --rayon-encadre: 14px;
  --largeur: 1180px;     /* largeur maximale du contenu */
}
@media (max-width: 768px) {
  :root { --h1: 32px; --h2: 26px; --h3: 20px; --texte: 17px; --petit: 15px; --mention: 14px; --rayon-photo: 14px; }
}

/* Base */
body { background: var(--creme); color: var(--olive); font-family: var(--font-texte); font-size: var(--texte); line-height: 1.6; }
h1, h2, h3 { font-family: var(--font-titre); font-weight: 700; line-height: 1.15; color: var(--olive); }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
.signature { font-family: var(--font-titre); font-weight: 400; }       /* I chjassi chì parlanu · Les chemins qui parlent */
.citation { font-family: var(--font-titre); font-style: italic; color: var(--terre-cuite); }
.prix { color: var(--terre-cuite); font-weight: 700; }
.mention { font-size: var(--mention); color: var(--ecorce); }
a { color: var(--olive); }

/* Boutons : pilule olive, un seul bouton principal par écran */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 999px;
       background: var(--olive); color: var(--creme); font-family: var(--font-texte); font-weight: 700; font-size: 17px; text-decoration: none; border: 2px solid var(--olive); }
.btn:hover { background: #2F3922; border-color: #2F3922; }
.btn-secondaire { background: transparent; color: var(--olive); }
.btn-secondaire:hover { background: var(--sauge-pale); }
.btn-clair { background: var(--creme); color: var(--olive); border-color: var(--creme); }

/* Photo collée dans un carnet */
.photo-carnet { border: var(--filet-photo) solid var(--olive); border-radius: var(--rayon-photo); overflow: hidden; display: block; }
.photo-carnet img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Encadré infos pratiques */
.encadre { background: var(--sauge-pale); border-radius: var(--rayon-encadre); padding: 22px 26px; }

/* Étiquette (durée, niveau) */
.etiquette { display: inline-block; background: var(--sauge-pale); color: var(--olive); font-weight: 700; font-size: 14px; border-radius: 999px; padding: 3px 12px; }

/* Chemin en pointillés terre cuite (séparateur) */
.chemin { height: 8px; border: 0; background-image: radial-gradient(circle, var(--terre-cuite) 2.2px, transparent 2.6px); background-size: 14px 8px; background-repeat: repeat-x; }

/* Pictogrammes (SVG du kit) */
.picto { width: 24px; height: 24px; flex: none; }