/* Photofolie : feuille de marque commune à toutes les pages (refonte « Diptyque »,
   23/09/2026). Elle porte les polices, les couleurs et les réglages de base.

   Règle : les pages n'emploient QUE les jetons de rôle ci-dessous (--fond,
   --texte, --action…), jamais une valeur écrite en dur ni une primitive. Changer
   la palette se fait ici, une fois, et non plus page par page.

   Contrastes mesurés (WCAG 2) :
     texte / fond 16,58:1 · texte doux / fond 5,60:1 · texte doux / fond doux 5,09:1
     action (liens) / fond 7,31:1 · blanc sur action 7,31:1 · blanc sur appui 9,00:1
     texte doux / surface accent 4,61:1 · bord de champ / fond 3,48:1
     erreur / fond 5,82:1 · anneau de focus / fond 7,31:1 */

/* ---------- Polices, servies par le site (la production bloque Google Fonts) ---------- */
/* Bodoni Moda est figée à la taille optique 11 (fontTools, varLib.instancer opsz=11) :
   en taille d'affichage, ses déliés disparaissent sur téléphone (« 49 € » se lisait
   « 19 C », constaté le 23/09/2026). Seul l'axe des graisses reste variable. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/BodoniModa.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/BodoniModa-Italique.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/Figtree.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Polices du produit : cadres des photos (Marcellus) et habillage poudré (Pinyon Script). */
@font-face {
  font-family: "Marcellus";
  src: url("/fonts/Marcellus.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("/fonts/PinyonScript.woff2") format("woff2");
  font-display: swap;
}

/* ---------- Jetons ---------- */
:root {
  /* Primitives : ne jamais les employer directement dans une page. */
  --p-blanc: #FFFFFF;
  --p-encre: #16211A;      /* vert-noir, pour le texte */
  --p-feuille: #5E6B60;    /* gris vert, texte secondaire */
  --p-sauge: #455C46;      /* couleur de marque, choisie par Joris le 23/09/2026 */
  --p-sauge-fonce: #3A4E3B;
  --p-sauge-pale: #E4EBE1;
  --p-sauge-voile: #F2F5F0;
  --p-trait: #DDE4DA;
  --p-trait-fort: #7F8D81;
  --p-brique: #A8472F;

  /* Rôles : les seules valeurs que les pages utilisent. */
  --fond: var(--p-blanc);                 /* page */
  --fond-doux: var(--p-sauge-voile);      /* section alternée, pied de page */
  --surface: var(--p-blanc);              /* carte, champ */
  --surface-accent: var(--p-sauge-pale);  /* bouton secondaire, pastille, choix coché */
  --texte: var(--p-encre);
  --texte-doux: var(--p-feuille);
  --action: var(--p-sauge);               /* tout ce qui se touche : bouton plein, lien */
  --action-appui: var(--p-sauge-fonce);   /* survol et appui */
  --texte-sur-action: var(--p-blanc);
  --trait: var(--p-trait);                /* séparateurs */
  --trait-champ: var(--p-trait-fort);     /* bord des champs de saisie (3:1) */
  --focus: var(--p-sauge);
  --erreur: var(--p-brique);

  --police-titre: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --police-texte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Échelle typographique (téléphone d'abord). */
  --t-affiche: clamp(2.1rem, 9vw, 3.4rem);  /* titre du premier écran */
  --t-titre: clamp(1.75rem, 7vw, 2.5rem);   /* titre de section */
  --t-intertitre: 1.125rem;                 /* h3, en Figtree 600 */
  --t-courant: 1rem;
  --t-petit: 0.875rem;

  --rayon-pilule: 999px;
  --rayon-carte: 18px;
  --rayon-champ: 12px;
  --marge: clamp(18px, 5vw, 32px);          /* marge latérale des pages */
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--police-texte);
  font-size: var(--t-courant);
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Icônes (Lucide, dans /icones.svg) ----------
   <svg class="icone" aria-hidden="true"><use href="/icones.svg?v=2#camera"/></svg>
   L'icône prend la couleur et la taille du texte qui l'entoure. Règles d'emploi :
   charte-B.md, section « Icônes ». */
.icone {
  display: inline-block;
  flex: none;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.22em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Bouton qui ne contient qu'une icône (action répétée dans une liste) : cible de
   44 px, nom obligatoire en aria-label et title. */
.bouton-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--texte);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bouton-icone:hover { background: var(--trait); }
.bouton-icone.danger { color: var(--erreur); }