/*
Theme Name: Sœurs — Kadence Child
Description: Thème enfant de Kadence pour le site Sœurs. Porte la charte de marque (palette, typographies, largeur de lecture) et accueillera tout le code sur-mesure. Ne jamais modifier le thème parent.
Author: Sœurs
Version: 1.11.7
Template: kadence
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soeurs-kadence-child
*/

/* ==========================================================================
   1. Carlito — auto-hébergé (licence SIL OFL 1.1), sous-ensembles latin et latin-ext.
   Aucun appel à Google Fonts : rien ne sort vers un CDN tiers (RGPD + vitesse).
   Carlito est métriquement compatible avec Calibri : sur un poste qui possède
   Calibri, c'est Calibri qui sert et le .woff2 n'est même pas téléchargé.
   Latin : fichiers et `unicode-range` de Fontsource 5.x, inchangés.
   « latin-ext-sanskrit » (1.11.5) : latin-ext de Fontsource 5.3.0 réduit avec
   pyftsubset à Latin étendu A, diacritiques combinants et Latin étendu
   additionnel (U+0100-017F, U+0300-036F, U+1E00-1EFF), 24 Ko au lieu de 83 :
   ā ī ū ś, ṣ ṭ ṇ ḍ ṃ des noms sanskrits du pilier chakras. Grâce au
   `unicode-range`, seule une page qui contient l'un de ces caractères le télécharge.
   ========================================================================== */
@font-face {
	font-family: "Carlito";
	src: url("fonts/carlito-latin-ext-sanskrit-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-017F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
	font-family: "Carlito";
	src: url("fonts/carlito-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Carlito";
	src: url("fonts/carlito-latin-ext-sanskrit-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-017F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
	font-family: "Carlito";
	src: url("fonts/carlito-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Carlito";
	src: url("fonts/carlito-latin-ext-sanskrit-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-017F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
	font-family: "Carlito";
	src: url("fonts/carlito-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Carlito";
	src: url("fonts/carlito-latin-ext-sanskrit-700-italic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-017F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
	font-family: "Carlito";
	src: url("fonts/carlito-latin-700-italic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Jetons de marque Sœurs — source de vérité des couleurs.
   ========================================================================== */
:root,
body {
	--soeurs-foret:            #2C3B2D; /* primaire, ~60 % */
	--soeurs-ivoire:           #F5F0E8; /* fond, ~25 % */
	--soeurs-or-bronze:        #9A7B3C; /* accent précieux */
	--soeurs-terre:            #8B7355; /* texte secondaire */
	--soeurs-sable:            #D4C5A9; /* bordures */

	/* Nuances dérivées, reprises telles quelles de la maquette d'accueil v6 :
	   c'est elle qui fait foi, pas mes approximations. */
	--soeurs-foret-fonce:      #243024;
	--soeurs-foret-clair:      #3A4D3B;
	--soeurs-or-clair:         #B89A5E;

	/* Nuances dérivées propres au thème : survols et fonds alternés. */
	--soeurs-or-bronze-fonce:  #7D6230;
	--soeurs-ivoire-clair:     #EFE9DE;
	--soeurs-ivoire-soutenu:   #E8DFCE;

	/* Teintes réservées au TEXTE (contraste ≥ 4,5:1, 1.7.4). Les teintes de charte
	   ci-dessus restent pour filets, puces, bordures et grands pictos. */
	--soeurs-or-texte:         #7D6230; /* = or-bronze-fonce : 5,06 sur ivoire */
	--soeurs-terre-texte:      #7E694D; /* 4,61 sur ivoire */
	--soeurs-or-clair-texte:   #BA9E64; /* 4,61 sur forêt */
	--soeurs-or-clair-degrade: #CEB684; /* sur dégradé forêt → forêt-clair */

	/* Largeur de lecture des articles. */
	--soeurs-largeur-lecture:  800px;
}

/* ==========================================================================
   3. Branchement sur la palette Kadence.
   Déclaré sur `body` et non sur `:root` : Kadence imprime sa propre palette
   dans un `:root` en ligne dans le <head>, donc APRÈS cette feuille. Une valeur
   posée sur `body` l'emporte quoi qu'il arrive pour tout ce qui est dans body,
   sans `!important` et sans dépendre de l'ordre de chargement.
   ========================================================================== */
body {
	--global-palette1: var(--soeurs-or-bronze);
	--global-palette2: var(--soeurs-or-bronze-fonce);
	--global-palette3: var(--soeurs-foret);          /* titres */
	--global-palette4: var(--soeurs-foret);          /* texte courant */
	--global-palette5: var(--soeurs-terre);          /* texte secondaire */
	--global-palette6: var(--soeurs-sable);          /* bordures */
	--global-palette7: var(--soeurs-ivoire-soutenu);
	--global-palette8: var(--soeurs-ivoire-clair);
	--global-palette9: var(--soeurs-ivoire);         /* fond général */
	--global-palette9rgb: 245, 240, 232;

	--global-palette-highlight:      var(--soeurs-or-texte);
	--global-palette-highlight-alt:  var(--soeurs-foret);
	--global-palette-highlight-alt2: var(--soeurs-foret);

	/* Boutons : plein Forêt, survol Or Bronze. */
	--global-palette-btn:            var(--soeurs-ivoire);
	--global-palette-btn-bg:         var(--soeurs-foret);
	--global-palette-btn-hover:      var(--soeurs-ivoire);
	--global-palette-btn-bg-hover:   var(--soeurs-or-bronze);
	--global-palette-btn-sec:        var(--soeurs-foret);
	--global-palette-btn-sec-bg:     transparent;
	--global-palette-btn-sec-hover:  var(--soeurs-or-bronze);
	--global-palette-btn-sec-bg-hover: transparent;

	/* Typographies. Calibri d'abord (postes Windows), Carlito en relais web. */
	--global-body-font-family:        Calibri, "Carlito", "Segoe UI", system-ui, -apple-system, sans-serif;
	--global-heading-font-family:     Georgia, "Iowan Old Style", "Times New Roman", serif;
	--global-primary-nav-font-family: var(--global-body-font-family);
}

/* ==========================================================================
   4. Fond général et texte.
   ========================================================================== */
body {
	background-color: var(--soeurs-ivoire);
	color: var(--soeurs-foret);
}

/* ==========================================================================
   5. Titres — Georgia. Attention : Georgia n'a pas de graisse Light réelle,
   la police ne livre que Regular/Bold. On garde donc 400, sans graisse
   synthétique, avec un interlettrage légèrement ouvert pour l'allure « light ».
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
blockquote,
.kadence-blocks-quote {
	font-family: var(--global-heading-font-family);
	font-weight: 400;
	letter-spacing: 0.005em;
}

/* La couleur ne s'applique qu'aux titres, jamais aux citations.
   Poser `color` sur `blockquote` ici le rendait plus fort que toute couleur
   HÉRITÉE : une citation dans une bande sombre devenait alors Forêt sur
   Forêt, donc invisible. Les citations d'article prennent leur couleur plus
   bas, dans le contexte où elle a du sens. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	color: var(--soeurs-foret);
}

h1, .entry-title { line-height: 1.2; }
h2 { line-height: 1.25; }
h3, h4 { line-height: 1.3; }

/* ==========================================================================
   6. Largeur de lecture des articles.
   Kadence ne passe en colonne étroite que si la classe `content-width-narrow`
   est posée par le Personnalisateur. On force la largeur ici pour ne pas
   dépendre d'un réglage d'admin.
   ========================================================================== */
body.single-post .content-container.site-container {
	max-width: var(--soeurs-largeur-lecture);
}

body.single-post .entry-content {
	font-size: 1.0625rem;
	line-height: 1.75;
}

body.single-post .entry-content p,
body.single-post .entry-content li {
	color: var(--soeurs-foret);
}

/* ==========================================================================
   7. Liens et accents.
   ========================================================================== */
.entry-content a:not(.button):not(.wp-block-button__link):hover {
	color: var(--soeurs-or-bronze-fonce);
}

/* Métadonnées d'article : discrètes, en Terre. */
.entry-meta,
.entry-meta a,
.entry-taxonomies,
.post-date {
	color: var(--soeurs-terre);
	font-family: var(--global-body-font-family);
}

/* Citations : filet Or Bronze, pas d'effet décoratif. */
.entry-content blockquote {
	border-left: 3px solid var(--soeurs-or-bronze);
	background: transparent;
	color: var(--soeurs-foret);
	font-style: normal;
}

/* Filets et séparateurs en Sable. */
hr, .entry-content hr,
.wp-block-separator {
	border-color: var(--soeurs-sable);
	color: var(--soeurs-sable);
}

/* ==========================================================================
   8. Emplacement réservé au bloc TL;DR / BLUF en tête d'article (Phase 4).
   Le gabarit est posé, il n'est pas encore utilisé.
   ========================================================================== */
.soeurs-tldr {
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--soeurs-ivoire-clair);
	border-left: 3px solid var(--soeurs-or-bronze);
}

.soeurs-tldr > :last-child { margin-bottom: 0; }

.soeurs-tldr__titre {
	font-family: var(--global-body-font-family);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--soeurs-terre);
	margin: 0 0 0.5rem;
}

/* ==========================================================================
   9. Cartes d'articles : effet au survol (1.11.5), coins et liseret (1.11.6).
   Liste du blog et archives (Kadence, .entry.loop-entry : Kadence imprime son
   ombre en ligne après cette feuille, d'où la double classe), cartes de l'accueil
   (guides et derniers articles, .art-card) et « À lire aussi » (.rel-card).
   Légère élévation, ombre plus marquée, vignette agrandie à 1.03. Uniquement
   des `transform` et une ombre : rien ne bouge dans la mise en page (CLS 0).
   Réservé aux appareils qui survolent vraiment (pas de survol « collé » au
   toucher) ; aussi au clavier, quand le lien de la carte a le focus.
   Sans mouvement si l'utilisatrice l'a demandé (prefers-reduced-motion).
   ========================================================================== */
.entry.loop-entry .post-thumbnail,
.soeurs-home .art-card .art-thumb,
.soeurs-article .rel-card .rel-thumb {
	overflow: hidden;
}

/* 1.11.6 : coins arrondis à 14 px (image comprise) et liseret Sable, qui passe à l'Or
   au survol et au focus clavier, partout. Seule la couleur de la bordure change :
   ni taille ni position (CLS 0). Valable aussi sans survol (focus au clavier). */
.entry.loop-entry,
.soeurs-home .art-card,
.soeurs-article .rel-card {
	border: 1px solid var(--soeurs-sable);
	border-radius: 14px;
	overflow: hidden;
}
.entry.loop-entry:hover,
.entry.loop-entry:focus-within,
.soeurs-home .art-card:hover,
.soeurs-home .art-card:focus-within,
.soeurs-article .rel-card:hover,
.soeurs-article .rel-card:focus-visible,
.soeurs-article .rel-card:focus-within {
	border-color: var(--soeurs-or-bronze);
}
@media (prefers-reduced-motion: no-preference) {
	.entry.loop-entry,
	.soeurs-home .art-card,
	.soeurs-article .rel-card {
		transition: border-color 0.2s ease;
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.entry.loop-entry,
	.soeurs-home .art-card,
	.soeurs-article .rel-card {
		transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
	}
	.entry.loop-entry .post-thumbnail img,
	.soeurs-home .art-card .art-thumb img,
	.soeurs-article .rel-card .rel-thumb img {
		transition: transform 0.4s ease;
	}
	.entry.loop-entry:hover,
	.entry.loop-entry:focus-within,
	.soeurs-home .art-card:hover,
	.soeurs-home .art-card:focus-within,
	.soeurs-article .rel-card:hover,
	.soeurs-article .rel-card:focus-visible {
		transform: translateY(-4px);
		box-shadow: 0 20px 32px -16px rgba(44, 59, 45, 0.28);
	}
	.entry.loop-entry:hover .post-thumbnail img,
	.entry.loop-entry:focus-within .post-thumbnail img,
	.soeurs-home .art-card:hover .art-thumb img,
	.soeurs-home .art-card:focus-within .art-thumb img,
	.soeurs-article .rel-card:hover .rel-thumb img,
	.soeurs-article .rel-card:focus-visible .rel-thumb img {
		transform: scale(1.03);
	}
}

/* ==========================================================================
   10. En-tête de /blog/ et des catégories (1.11.6) : le style du hero de l'accueil.
   Kadence imprime section.post-archive-hero-section > … > header (h1.archive-title,
   .archive-description de la catégorie) ; inc/blog.php y ajoute les anneaux
   (svg.soeurs-anneaux) et, sur /blog/, le sous-titre. Classe de body posée par
   inc/blog.php : les autres archives (auteur, date, recherche) ne changent pas.
   Le voile de Kadence (.hero-section-overlay) est neutralisé : le fond est Forêt.
   ========================================================================== */
.soeurs-archive-accueil .post-archive-hero-section {
	background: var(--soeurs-foret);
	color: var(--soeurs-ivoire);
	text-align: center;
}
.soeurs-archive-accueil .post-archive-hero-section .hero-section-overlay {
	display: none;
}
.soeurs-archive-accueil .post-archive-hero-section .entry-hero-container-inner {
	position: relative;
	overflow: hidden;
	background: transparent;
	padding: 72px 0 80px;
}
.soeurs-archive-accueil .soeurs-anneaux {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 620px;
	height: 620px;
	transform: translate(-50%, -50%);
	opacity: 0.45;
	pointer-events: none;
}
.soeurs-archive-accueil .post-archive-hero-section .entry-header {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	max-width: 860px;
}
.soeurs-archive-accueil .post-archive-hero-section .archive-title {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-style: italic;
	font-size: 46px;
	line-height: 1.18;
	color: #fff;
	margin: 0;
}
.soeurs-archive-accueil .soeurs-archive-sous-titre,
.soeurs-archive-accueil .post-archive-hero-section .archive-description {
	max-width: 580px;
	margin: 16px auto 0;
	font-size: 18.5px;
	line-height: 1.8;
	color: var(--soeurs-sable);
}
.soeurs-archive-accueil .post-archive-hero-section .archive-description p {
	margin: 0;
	color: inherit;
}
@media (max-width: 640px) {
	.soeurs-archive-accueil .post-archive-hero-section .entry-hero-container-inner {
		padding: 56px 0 64px;
	}
	.soeurs-archive-accueil .soeurs-anneaux {
		width: 460px;
		height: 460px;
	}
	.soeurs-archive-accueil .post-archive-hero-section .archive-title {
		font-size: 32px;
	}
	.soeurs-archive-accueil .soeurs-archive-sous-titre,
	.soeurs-archive-accueil .post-archive-hero-section .archive-description {
		font-size: 16.5px;
	}
}

/* ==========================================================================
   11. Logo de l'en-tête (1.11.7) : de la respiration dans la barre.
   La barre garde sa hauteur (80 px, réglage Kadence) ; le logo passe de 76 à
   50 px de haut, centré verticalement par Kadence (environ 15 px au-dessus et
   en dessous). Largeur au ratio : la balise déclare 600 × 227, le navigateur
   réserve la place (CLS 0). Même règle sur l'en-tête mobile.
   ========================================================================== */
.site-header .site-branding a.brand img.custom-logo {
	height: 50px;
	width: auto;
	max-width: none;
}