/*
Theme Name:   Pascal Courtin — Terracotta
Theme URI:    https://pascalcourtin.fr
Description:  Thème enfant éditorial pour pascalcourtin.fr. Système de design « terracotta » : sobriété, serif éditoriale (Source Serif Pro) pour les textes, sans-serif (Inter) pour l'interface, accent terracotta employé avec parcimonie. Polices auto-hébergées (RGPD). Conforme à la charte graphique v1.0 (mai 2026).
Author:       Pascal Courtin
Author URI:   https://pascalcourtin.fr
Template:     twentytwentyfive
Version:      1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain:  pascalcourtin-terracotta
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html

----------------------------------------------------------------------------
  IMPORTANT — THÈME PARENT
  La ligne « Template: » ci-dessus doit correspondre EXACTEMENT au dossier
  du thème parent installé. Par défaut : twentytwentyfive.
  Si OVH a installé un autre thème par défaut (ex. twentytwentyfour),
  remplace simplement cette valeur par le slug du dossier parent.
  C'est la SEULE ligne dépendante du thème parent.
----------------------------------------------------------------------------
*/

/* ============================================================================
   POLICES AUTO-HÉBERGÉES (RGPD — aucune requête vers Google)
   ============================================================================ */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/source-serif-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/source-serif-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/source-serif-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/source-serif-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/inter-300.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter-600.woff2") format("woff2");
}

/* ============================================================================
   VARIABLES — palette et système, d'après la charte v1.0
   ============================================================================ */

:root {
  /* Palette principale */
  --pc-terracotta:        #B34A2C;
  --pc-terracotta-sombre: #5A1F10;
  --pc-encre:             #1A1A1A;
  --pc-creme:             #FBFAF6;
  --pc-creme-nuancee:     #F7F5EE;
  /* Palette secondaire */
  --pc-gris-doux:         #73726C;
  --pc-gris-filet:        #D3D1C7;
  --pc-encre-tendre:      #3D3D3A;

  /* Typographie */
  --pc-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --pc-sans:  "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Mesures éditoriales */
  --pc-mesure: 42rem;          /* ~672px : largeur de lecture optimale (charte : 680-720px) */
  --pc-mesure-large: 64rem;
  --pc-corps: 1.1875rem;       /* 19px */
  --pc-interligne: 1.65;

  /* Rythme vertical */
  --pc-espace-xs: 0.5rem;
  --pc-espace-s:  1rem;
  --pc-espace-m:  2rem;
  --pc-espace-l:  3.5rem;
  --pc-espace-xl: 5.5rem;

  /* Ombre : au plus subtile (charte : 0.2 opacité, 4px blur) */
  --pc-ombre: 0 1px 4px rgba(26, 26, 26, 0.2);
}

/* ============================================================================
   BASE
   ============================================================================ */

body {
  background-color: var(--pc-creme);
  color: var(--pc-encre);
  font-family: var(--pc-serif);
  font-size: var(--pc-corps);
  line-height: var(--pc-interligne);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Largeur de lecture confortable pour le contenu courant */
.entry-content > *,
.wp-block-post-content > * {
  max-width: var(--pc-mesure);
  margin-left: auto;
  margin-right: auto;
}
/* Les éléments larges (groupes pleine largeur, images alignées) ne sont pas bridés */
.entry-content > .alignwide,
.entry-content > .alignfull,
.wp-block-post-content > .alignwide,
.wp-block-post-content > .alignfull {
  max-width: none;
}

p { margin: 0 0 1.25em; }

/* ============================================================================
   TITRES — serif, hiérarchie de la charte (§2.3)
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pc-serif);
  color: var(--pc-encre);
  line-height: 1.2;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1, .pc-display {
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 2.625rem);  /* 36–42px */
  letter-spacing: -0.01em;
}
.pc-display {
  font-size: clamp(3rem, 6vw, 3.75rem);       /* 48–60px */
}
h2 {
  font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 1.875rem);  /* 24–30px */
  margin-top: 1.6em;
}
h3 {
  font-weight: 700;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem); /* 18–22px */
  margin-top: 1.4em;
}
h4 {
  font-family: var(--pc-sans);
  font-weight: 600;
  font-size: 1rem;
}

/* ============================================================================
   FONCTIONS — Inter (navigation, méta, légendes, UI)  charte §2.2
   ============================================================================ */

.wp-block-navigation,
.wp-block-post-date,
.wp-block-post-terms,
.wp-block-post-author,
.wp-element-caption,
figcaption,
.wp-block-post-navigation-link,
.pc-meta,
.pc-eyebrow,
input, button, select, textarea {
  font-family: var(--pc-sans);
}

/* Eyebrow / surtitre — micro, capitales, terracotta (charte §6, eyebrow) */
.pc-eyebrow {
  font-family: var(--pc-sans);
  font-weight: 500;
  font-size: 0.6875rem;          /* ~11px */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pc-terracotta);
  margin: 0 0 0.75rem;
  display: block;
}

/* Méta / légendes — gris doux */
.pc-meta, figcaption, .wp-element-caption {
  font-size: 0.8125rem;          /* 13px */
  color: var(--pc-gris-doux);
  line-height: 1.5;
}

/* ============================================================================
   LIENS — terracotta, soulignement discret
   ============================================================================ */

a {
  color: var(--pc-terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(179, 74, 44, 0.35);
  transition: border-color 0.15s ease, color 0.15s ease;
}
a:hover, a:focus-visible {
  color: var(--pc-terracotta-sombre);
  border-bottom-color: var(--pc-terracotta);
}
:focus-visible {
  outline: 2px solid var(--pc-terracotta);
  outline-offset: 2px;
}

/* ============================================================================
   TRAIT COURT sous les titres (illustration « separateur-trait-court »)
   ============================================================================ */

.pc-trait::after,
.pc-trait-bloc {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--pc-terracotta);
  margin-top: 0.9rem;
  border-radius: 1px;
}
.pc-trait-bloc { margin: 1.5rem auto; }
.has-text-align-center .pc-trait::after,
.pc-section-titre.has-text-align-center .pc-trait::after { margin-left: auto; margin-right: auto; }

/* ============================================================================
   CITATIONS — serif italique, grand guillemet terracotta (charte §6.1)
   ============================================================================ */

blockquote, .wp-block-quote {
  font-family: var(--pc-serif);
  font-style: italic;
  font-size: 1.3125rem;
  line-height: 1.5;
  color: var(--pc-encre-tendre);
  border-left: 3px solid var(--pc-terracotta);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 2rem auto;
  position: relative;
}
.wp-block-quote.is-style-pc-guillemet {
  border-left: 0;
  padding-left: 0;
  text-align: center;
}
.wp-block-quote.is-style-pc-guillemet::before {
  content: "\201C";
  font-family: var(--pc-serif);
  font-size: 4rem;
  line-height: 0.2;
  color: var(--pc-terracotta);
  display: block;
  margin-bottom: 0.5rem;
}

/* ============================================================================
   CODE — monospace sur crème nuancée (charte §5.3)
   ============================================================================ */

code, pre, kbd {
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.9em;
}
:not(pre) > code {
  background-color: var(--pc-creme-nuancee);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  border: 1px solid var(--pc-gris-filet);
}
pre, .wp-block-code {
  background-color: var(--pc-creme-nuancee);
  border: 1px solid var(--pc-gris-filet);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
}

/* ============================================================================
   BOUTONS — terracotta, sobre, sans dégradé
   ============================================================================ */

.wp-block-button__link,
.pc-bouton {
  font-family: var(--pc-sans);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  background-color: var(--pc-terracotta);
  color: var(--pc-creme);
  border: 1px solid var(--pc-terracotta);
  border-radius: 3px;
  padding: 0.7em 1.4em;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.wp-block-button__link:hover,
.pc-bouton:hover {
  background-color: var(--pc-terracotta-sombre);
  border-color: var(--pc-terracotta-sombre);
  color: var(--pc-creme);
}
/* Bouton secondaire : contour */
.wp-block-button.is-style-outline .wp-block-button__link,
.pc-bouton--contour {
  background-color: transparent;
  color: var(--pc-terracotta);
  border: 1px solid var(--pc-terracotta);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.pc-bouton--contour:hover {
  background-color: var(--pc-terracotta);
  color: var(--pc-creme);
}

/* ============================================================================
   CARTES — portes vers les piliers (fond crème nuancée, filet gris)
   ============================================================================ */

.pc-carte {
  background-color: var(--pc-creme-nuancee);
  border: 1px solid var(--pc-gris-filet);
  border-radius: 5px;
  padding: 1.75rem;
  height: 100%;
}
.pc-carte h3 { margin-top: 0; }
.pc-carte .pc-carte-lien {
  font-family: var(--pc-sans);
  font-weight: 500;
  font-size: 0.875rem;
  border-bottom: none;
}
.pc-carte .pc-carte-lien::after { content: " \2192"; }

/* ============================================================================
   ENCADRÉS — newsletter, notes
   ============================================================================ */

.pc-encadre {
  background-color: var(--pc-creme-nuancee);
  border: 1px solid var(--pc-gris-filet);
  border-left: 3px solid var(--pc-terracotta);
  border-radius: 4px;
  padding: 1.75rem 2rem;
}
.pc-encadre h2, .pc-encadre h3 { margin-top: 0; }

/* Bloc de capture newsletter (placeholder visuel — formulaire réel = Phase 4.6 MailPoet) */
.pc-newsletter {
  background-color: var(--pc-creme-nuancee);
  border: 1px solid var(--pc-gris-filet);
  border-radius: 5px;
  padding: 2.25rem 2rem;
  text-align: center;
}
.pc-newsletter .pc-eyebrow { text-align: center; }

/* ============================================================================
   SÉPARATEUR horizontal
   ============================================================================ */

hr, .wp-block-separator {
  border: 0;
  height: 1px;
  background-color: var(--pc-gris-filet);
  max-width: var(--pc-mesure);
  margin: var(--pc-espace-l) auto;
}
.wp-block-separator.is-style-pc-point {
  background: none;
  height: auto;
  text-align: center;
}
.wp-block-separator.is-style-pc-point::before {
  content: "\00B7";
  color: var(--pc-terracotta);
  font-size: 2rem;
  line-height: 1;
}

/* ============================================================================
   IMAGES & MÉDIAS
   ============================================================================ */

img { max-width: 100%; height: auto; }
.wp-block-image img { border-radius: 4px; }
figcaption { margin-top: 0.5rem; text-align: center; }

/* Embeds responsives (Vimeo / YouTube — Studio) */
.wp-block-embed__wrapper { position: relative; }

/* ============================================================================
   PIED DE PAGE ÉDITORIAL — disclaimer auteur
   ============================================================================ */

.pc-disclaimer {
  font-family: var(--pc-sans);
  font-size: 0.8125rem;
  color: var(--pc-gris-doux);
  line-height: 1.5;
  max-width: var(--pc-mesure);
  margin: 0 auto;
  border-top: 1px solid var(--pc-gris-filet);
  padding-top: 1rem;
}

/* ============================================================================
   GRILLE des piliers (3 colonnes responsive) — appui si le parent ne gère pas
   ============================================================================ */

.pc-grille-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 781px) {
  .pc-grille-3 { grid-template-columns: 1fr; }
}

/* ============================================================================
   SECTION pleine largeur en crème nuancée (respiration)
   ============================================================================ */

.pc-section--nuancee {
  background-color: var(--pc-creme-nuancee);
  padding-top: var(--pc-espace-xl);
  padding-bottom: var(--pc-espace-xl);
}

/* ============================================================================
   DIVERS — sélection, scrollbar discrète
   ============================================================================ */

::selection { background-color: rgba(179, 74, 44, 0.18); }