/* ════════════════════════════════════════════════════════════════════
   THÈME PERSONNALISÉ — l'identité visuelle du client
   ────────────────────────────────────────────────────────────────────
   Le SEUL fichier à refaire pour chaque client. Il apparaît en premier dans
   l'espace de gestion (Apparence), avec le badge « Votre marque ».

   1. --theme-name   : le nom affiché dans l'espace de gestion
   2. --layout       : la mise en page reprise d'un thème existant :
                       atelier | minimal | pop | nuit
   3. Les couleurs, polices et arrondis de la marque (ci-dessous)
   4. Facultatif : vos propres règles, toujours préfixées par html[data-theme='perso']

   Polices de la marque : déposez les fichiers .woff2 dans assets/fonts/
   et déclarez-les avec @font-face (modèle en bas de fichier).
   Pour ne proposer aucun thème personnalisé : videz ce fichier.

   Exemple livré : « La Fripe Solidaire » (boutique de démonstration).
   ════════════════════════════════════════════════════════════════════ */

[data-theme='perso'] {
  --theme-name: 'La Fripe Solidaire';
  --theme-desc: 'Violet et corail, l’identité de l’association';
  --layout: atelier;

  /* Couleurs */
  --bg: #f8f4fb;             /* fond de page */
  --surface: #ffffff;        /* cartes, panier, menus */
  --soft: #ece3f5;           /* fonds doux : grand visuel, vignettes */
  --text: #241a33;           /* texte principal */
  --muted: #6e6280;          /* texte secondaire */
  --line: #e2d8ec;           /* traits et bordures */
  --brand: #5b3d8f;          /* couleur principale : boutons, liens */
  --brand-ink: #ffffff;      /* texte posé sur la couleur principale */
  --accent: #ff7a59;         /* couleur secondaire : badges, petits titres */
  --accent-ink: #ffffff;
  --announce-bg: var(--brand);  /* bandeau d'annonce */
  --announce-ink: #ffffff;

  /* Polices (voir assets/fonts/ : Fraunces, DM Sans, Inter, Bricolage Grotesque, Cormorant Garamond, Jost) */
  --font: 'DM Sans', system-ui, sans-serif;
  --font-title: 'Bricolage Grotesque', system-ui, sans-serif;
  --title-weight: 750;
  --title-tracking: -0.03em;
  --title-case: none;          /* none ou uppercase */
  --label-case: none;          /* petits libellés : none ou uppercase */
  --label-tracking: 0;
  --label-size: 0.92rem;

  /* Formes */
  --radius: 20px;              /* photos et cartes */
  --radius-sm: 12px;           /* champs, boutons de taille */
  --btn-radius: 999px;         /* boutons : 999px = pilule, 0 = carré */
  --border: 1px solid var(--line);
  --shadow: 0 10px 30px -18px rgb(60 30 90 / 0.35);
  --card-ratio: 4 / 5;         /* format des photos produit : 1 / 1, 4 / 5, 3 / 4 */
}

/* Règles en plus (facultatif) */
html[data-theme='perso'] .hero h1 em { font-style: normal; color: var(--accent); }
html[data-theme='perso'] .eyebrow { color: var(--brand); }

/* Modèle pour la police du client :
@font-face { font-family: 'Police Client'; src: url('fonts/police-client.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
puis --font-title: 'Police Client', sans-serif;
*/