/*
Theme Name:   Rodolphe Raffard
Theme URI:    https://rodolphe-raffard.fr/
Description:  Theme enfant Kadence pour le site de Rodolphe Raffard (RR Consulting). Identite "Braise" : encre chaude, accent braise, Bricolage Grotesque / Inter / JetBrains Mono. Polices auto-hebergees, aucun appel CDN.
Author:       Rodolphe Raffard
Author URI:   https://rodolphe-raffard.fr/
Template:     kadence
Version:      0.1.0
Text Domain:  rr
*/

/* ==========================================================================
   Les COULEURS, les POLICES et les @font-face ne sont PAS ici : ils vivent
   dans assets/css/tokens.css, qui est une copie conforme de
   `site/design/tokens.css`. Source unique de la marque, copiee au deploiement
   par push-theme.ps1. Ne jamais editer la copie : elle est ecrasee.

   Ce fichier-ci ne contient que la mise en page du site.
   ========================================================================== */

/* ------------------------------------------------- 0. Remappage de Kadence */
/* Kadence peint l'en-tete, le pied de page et ses composants avec SA palette
   (--global-palette1..9), pilotee par le personnalisateur. Plutot que de
   surcharger chaque composant un par un, on remappe la palette sur nos jetons :
   tout ce que Kadence dessine suit alors la charte, y compris ce qu'on n'a pas
   prevu. C'est le seul endroit du projet ou l'on touche a des variables qui ne
   sont pas les notres. */

:root {
  --global-palette1: #FF5A24;  /* accent      */
  --global-palette2: #FF8A5B;  /* accent 2    */
  --global-palette3: #16110F;  /* titres      */
  --global-palette4: #241B17;
  --global-palette5: #6B5B52;  /* texte       */
  --global-palette6: #8A7B73;
  --global-palette7: #E4D9CF;  /* filets      */
  --global-palette8: #F1E9E1;
  --global-palette9: #FAF6F1;  /* fond        */
  --global-palette-btn-bg: #FF5A24;
  --global-palette-btn: #16110F;
  --global-palette-btn-bg-hover: #FF8A5B;
  --global-palette-btn-hover: #16110F;
}

/* --------------------------------------------------------------- 1. Socle */

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;
}

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

/* Kadence pose ses propres marges de bloc ; on ne les combat pas, on cale
   seulement le rythme vertical des sections de la charte. */
/* LE CONTENEUR DE LARGEUR.
   Les sections sont en pleine largeur et en flux normal ; c'est ce conteneur,
   et lui seul, qui decide de la mesure. On n'utilise PAS le layout
   `constrained` de Gutenberg : il pose `margin-inline:auto` et une max-width
   sur CHAQUE bloc enfant, donc un titre plus etroit que la colonne se centre
   au lieu de rester a gauche, et une grille de cartes se retrouve bridee a la
   largeur du texte. Piege paye le 2026-08-14. */
.rr-wrap {
  width: 100%;
  margin-inline: auto;
  padding-inline: 24px;
}
.rr-wrap--1140 { max-width: 1188px; }  /* 1140 + les 24 px de gouttiere */
.rr-wrap--760  { max-width: 808px; }

.rr-section { padding: clamp(56px, 8vw, 96px) 0; }
.rr-section--nuit { background: var(--rr-ink); color: var(--rr-sable); }
.rr-section--nuit h1,
.rr-section--nuit h2,
.rr-section--nuit h3 { color: #F6F0EB; }
.rr-section--nuit p { color: #B4A69D; }
.rr-section--sable { background: var(--rr-sable-2); }

/* ------------------------------------------------------------ 2. Surtitre */
/* La mono ne sert jamais a du texte courant : c'est le seul signal "il y a de
   la technique derriere", et il perd tout s'il sert partout. */

.rr-surtitre {
  display: flex;
  align-items: center;
  gap: .75em;
  font-family: var(--rr-font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: var(--rr-track-mono);
  text-transform: uppercase;
  color: var(--rr-braise);
  margin-bottom: 1.1em;
}
.rr-surtitre::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--rr-braise);
  flex: none;
}

/* -------------------------------------------------------------- 3. En-tete */

/* Le fond de l'en-tete vient du personnalisateur Kadence, dont la specificite
   est plus forte que la notre. Le `!important` est assume ici : l'alternative
   serait de piloter le personnalisateur, qui n'est pas versionnable et se perd
   a la premiere reinstallation. Trois selecteurs parce que Kadence empile
   autant de conteneurs. */
#masthead,
#masthead .site-header-row-container-inner,
#masthead .site-main-header-wrap {
  background: var(--rr-ink) !important;
  border-bottom: 0;
}
#masthead .site-title,
#masthead .site-title a {
  color: #F6F0EB !important;
  font-family: var(--rr-font-titre);
  font-weight: 700;
  letter-spacing: -.03em;
}
#masthead .header-navigation a,
#masthead .menu-item > a {
  color: #B3A49B !important;
}
#masthead .header-navigation a:hover,
#masthead .menu-item.current-menu-item > a {
  color: #F6F0EB !important;
}
/* Le bouton du menu mobile est dessine en trois traits de la couleur du texte. */
#masthead .menu-toggle-icon .menu-toggle-icon-bar { background: #F6F0EB !important; }

.rr-header {
  background: var(--rr-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.rr-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
}
.rr-header__logo img { height: 34px; width: auto; display: block; }
.rr-header__nav {
  display: flex;
  gap: 26px;
  font-size: .93rem;
}
.rr-header__nav a {
  color: #B3A49B;
  text-decoration: none;
}
.rr-header__nav a:hover,
.rr-header__nav a[aria-current="page"] { color: #F6F0EB; }

/* --------------------------------------------------------------- 4. Boutons */
/* L'accent ne fait que 3,1:1 sur blanc : il sert d'APLAT, avec du texte encre
   dessus. Jamais de texte braise sur fond clair. */

/* Gutenberg pose la classe du bloc sur le CONTENEUR (.wp-block-button) et non
   sur le lien. Styler `.rr-bouton` seul ne peint donc rien de visible : il faut
   descendre sur le `<a>`. */
.wp-block-button__link,
.rr-bouton > .wp-block-button__link {
  display: inline-block;
  background: var(--rr-braise);
  color: var(--rr-ink);
  font-weight: 700;
  font-size: .95rem;
  padding: .72em 1.15em;
  border-radius: var(--rr-radius-bouton);
  text-decoration: none;
  border: 0;
  transition: background .15s ease;
}
.wp-block-button__link:hover { background: var(--rr-braise-2); color: var(--rr-ink); }

.rr-bouton--fantome > .wp-block-button__link,
.rr-bouton--fantome > .wp-block-button__link:hover {
  background: transparent;
  color: var(--rr-braise);
  box-shadow: inset 0 0 0 1.5px var(--rr-braise);
}
.rr-bouton--fantome > .wp-block-button__link:hover { color: var(--rr-braise-2); }

/* Sur fond sombre, un lien de contenu reste lisible. */
.rr-section--nuit a,
.rr-hero a:not(.wp-block-button__link) { color: var(--rr-braise); }

/* ----------------------------------------------------------------- 5. Hero */

.rr-hero {
  background: var(--rr-ink);
  color: #F7F2ED;
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 9vw, 104px) 0;
}
/* La lueur braise : c'est elle qui "chauffe" le fond sombre. Purement
   decorative, donc en pseudo-element et hors du flux. */
.rr-hero::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -160px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 36, .30), transparent 66%);
  pointer-events: none;
}
.rr-hero > * { position: relative; z-index: 1; }

/* PIEGE DE LA MISE EN PAGE GUTENBERG : dans un conteneur `constrained`,
   WordPress pose `margin-inline: auto` sur chaque bloc enfant. Un bloc a qui on
   donne une `max-width` se retrouve donc CENTRE, alors qu'on voulait seulement
   limiter sa largeur. D'ou `margin-inline-start: 0`, sinon tout le hero part au
   milieu de la page sans qu'aucun `text-align` ne soit en cause. */
.rr-hero h1,
.rr-hero p { margin-inline-start: 0; }

.rr-hero h1 {
  font-size: clamp(2.1rem, 6vw, 4.1rem);
  max-width: 17ch;
  margin-bottom: .45em;
  margin-top: 0;
}
.rr-hero h1 em { font-style: normal; color: var(--rr-braise); }
.rr-hero p { font-size: 1.06rem; color: #B9ABA2; max-width: 60ch; }
.rr-hero h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: .4em; }

/* ---------------------------------------------------------------- 6. Cartes */

.rr-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.rr-carte {
  border: 1px solid var(--rr-ligne);
  border-radius: var(--rr-radius-carte);
  padding: 26px;
  background: #fff;
}
.rr-section--nuit .rr-carte {
  background: var(--rr-ink-2);
  border-color: rgba(255, 255, 255, .09);
}
.rr-carte__no {
  font-family: var(--rr-font-mono);
  font-size: .78rem;
  color: var(--rr-braise);
  margin-bottom: .9em;
}
.rr-carte h3 { font-size: 1.15rem; margin: 0 0 .5em; }

/* Encadre : sert aux mises en garde et aux "ce que je ne fais pas". */
.rr-encadre {
  border-left: 3px solid var(--rr-braise);
  background: var(--rr-sable-2);
  padding: 20px 24px;
  border-radius: 0 var(--rr-radius-carte) var(--rr-radius-carte) 0;
  margin: 32px 0;
}
.rr-section--nuit .rr-encadre {
  background: var(--rr-ink-2);
  color: #C4B6AD;
}

/* Puce de liste = le point de la marque. */
.rr-liste { list-style: none; padding: 0; margin: 1.2em 0; }
.rr-liste li { position: relative; padding-left: 1.5em; margin-bottom: .7em; }
.rr-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background: var(--rr-braise);
}

/* ------------------------------------------------------------- 7. Pied de page */
/* C'est lui qui porte l'identite legale : c'est ce qu'un instructeur France Num
   ou Bpifrance vient verifier, bien plus que le nom de domaine. */

.site-footer,
.rr-footer {
  background: var(--rr-ink);
  color: #9C8D85;
  padding: 52px 0 34px;
  font-size: .89rem;
}
.rr-footer__grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
@media (max-width: 780px) { .rr-footer__grille { grid-template-columns: 1fr; } }
.rr-footer__logo img { height: 28px; width: auto; margin-bottom: 16px; }
.rr-footer__titre {
  font-family: var(--rr-font-mono);
  font-size: .66rem;
  letter-spacing: var(--rr-track-mono);
  text-transform: uppercase;
  color: var(--rr-braise);
  margin-bottom: .9em;
}
.rr-footer a { color: #C4B6AD; text-decoration: none; }
.rr-footer a:hover { color: #F6F0EB; text-decoration: underline; }
.rr-footer__legal {
  padding-top: 22px;
  font-family: var(--rr-font-mono);
  font-size: .72rem;
  color: #7C6E66;
  line-height: 1.9;
}

/* --------------------------------------------------------- 8. Accessibilite */

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--rr-braise);
  outline-offset: 2px;
}
.rr-saut-contenu {
  position: absolute;
  left: -9999px;
}
.rr-saut-contenu:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 999;
  background: var(--rr-braise);
  color: var(--rr-ink);
  padding: .7em 1em;
  border-radius: var(--rr-radius-bouton);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}