/* =========================================================================
   rodolphe-raffard.fr - jetons de marque
   Direction "Braise" - validee le 2026-08-14
   -------------------------------------------------------------------------
   A copier dans le theme enfant Kadence au moment de l'install, avec le
   dossier fonts/. Ce fichier ne contient que des variables et les @font-face :
   aucune mise en page, pour qu'il survive a une refonte du site.
   ========================================================================= */

/* ---------------------------------------------------------------- fontes
   Auto-hebergees : aucun appel a fonts.googleapis.com (RGPD, et une
   dependance reseau de moins). Variables, donc un seul fichier par famille.
   Ajuster le chemin si le theme les range ailleurs.                        */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque.woff2') format('woff2-variations');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------- couleur */
  /* L'encre est un noir BRUN. Un noir bleute (#0F1115) suffit a faire
     basculer toute la marque du cote froid : ne pas y toucher.            */
  --rr-ink:        #16110F;
  --rr-ink-2:      #241B17;   /* cartes et blocs sur fond sombre */
  --rr-ink-3:      #6B5B52;   /* texte secondaire sur fond clair */

  --rr-braise:     #FF5A24;   /* accent unique */
  --rr-braise-2:   #FF8A5B;   /* survol, degrades */
  --rr-ambre:      #E8A33D;   /* secondaire, usage rare */

  --rr-sable:      #FAF6F1;   /* fond des sections claires */
  --rr-sable-2:    #F1E9E1;
  --rr-blanc:      #FFFFFF;

  --rr-ligne:      #E4D9CF;   /* filets sur fond clair */
  --rr-ligne-2:    #EFE7DE;
  --rr-ligne-nuit: rgba(255, 255, 255, .13);

  /* CONTRASTE - la seule regle a ne pas casser.
     braise sur blanc = 3,1:1  -> sous le seuil AA, interdit en texte courant
     braise sur encre = 6,0:1  -> bon partout
     Sur fond clair, l'accent ne sert que d'aplat, de filet ou de gros titre. */

  /* ---------------------------------------------------------- typographie */
  --rr-font-titre: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --rr-font-texte: 'Inter', system-ui, -apple-system, sans-serif;
  --rr-font-mono:  'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Les titres sont serres, le texte ne l'est pas. */
  --rr-track-titre: -.035em;
  --rr-track-h1:    -.04em;
  --rr-track-mono:  .14em;    /* surtitres en capitales */

  --rr-poids-titre: 800;
  --rr-poids-sst:   600;

  --rr-lh-titre: 1.04;
  --rr-lh-texte: 1.62;

  /* ------------------------------------------------------------- formes */
  --rr-radius-tuile: 22%;     /* le monogramme : proportionnel, jamais en px */
  --rr-radius-carte: 18px;
  --rr-radius-bouton: 9px;

  --rr-ombre: 0 18px 42px rgba(22, 17, 15, .18);
}

/* ------------------------------------------------------------------ base */

body {
  font-family: var(--rr-font-texte);
  color: var(--rr-ink);
  background: var(--rr-sable);
  line-height: var(--rr-lh-texte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.rr-titre {
  font-family: var(--rr-font-titre);
  font-weight: var(--rr-poids-titre);
  letter-spacing: var(--rr-track-titre);
  line-height: var(--rr-lh-titre);
}
h1 { letter-spacing: var(--rr-track-h1); }
h3, h4 { font-weight: var(--rr-poids-sst); }

/* Surtitre : c'est la mono, et elle seule, qui signale la technique.
   Ne jamais l'utiliser pour du texte courant. */
.rr-surtitre {
  font-family: var(--rr-font-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: var(--rr-track-mono);
  text-transform: uppercase;
  color: var(--rr-braise);
}

/* Sections sombres : c'est le regime par defaut de la marque. */
.rr-nuit {
  background: var(--rr-ink);
  color: var(--rr-sable);
}
.rr-nuit h1, .rr-nuit h2, .rr-nuit h3 { color: #F6F0EB; }
.rr-nuit p { color: #B4A69D; }

/* Accent en gros titre uniquement, jamais en paragraphe sur fond clair. */
.rr-accent { color: var(--rr-braise); font-style: normal; }

.rr-bouton {
  display: inline-block;
  background: var(--rr-braise);
  color: var(--rr-ink);
  font-weight: 700;
  padding: .7em 1.1em;
  border-radius: var(--rr-radius-bouton);
  text-decoration: none;
}
.rr-bouton:hover { background: var(--rr-braise-2); }

/* Le point de la marque, repris en puce de liste. */
.rr-liste { list-style: none; padding: 0; }
.rr-liste li { position: relative; padding-left: 1.4em; }
.rr-liste li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: .44em; height: .44em; border-radius: 50%;
  background: var(--rr-braise);
}