/*
Theme Name: Webecom - theme SIAM
Theme URI: https://www.siamformations.fr
Description: Thème enfant de Twenty Twenty-Five pour la refonte de Siam Formations. Identité de marque (couleurs, typographie, espacements) portée via theme.json (Full Site Editing). CSS custom minimal.
Author: Webecom
Author URI: https://www.webecom.fr
Template: twentytwentyfive
Version: 0.1.10
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webecom-theme-siam
*/

/* Le rendu de marque passe par theme.json. Ce fichier reste volontairement vide
   et n'accueille que d'éventuels micro-correctifs ciblés (à éviter au maximum). */

/* Reset moderne du modèle de boîte : padding et bordures inclus dans la largeur
   déclarée, sur tous les éléments et pseudo-éléments. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Fiche formation : la colonne principale du contenu ne doit pas descendre
   sous 80% de son conteneur, même après le passage de content-size à 960px. */
.single-formation .wp-block-post-content .wp-block-columns {
	min-width: 80%;
}

/* Article de blog : la mise en page 2 colonnes (article + sommaire, cf.
   templates/single.html) doit s'empiler au même seuil que le burger du header
   (900px, cf. blocks/header/style.css) — pas au seuil par défaut de WordPress
   (599px) — sinon la bascule sommaire sticky ↔ bandeau/tiroir mobile (voir
   blocks/sommaire-article/style.css) ne serait pas synchronisée avec le
   passage effectif en 1 colonne. */
@media ( max-width: 900px ) {
	.single-post .wp-block-columns {
		flex-wrap: wrap;
	}

	.single-post .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Article de blog : titres de section (H2-H4) du corps de l'article en
   « casse phrase » (seule la première lettre en majuscule, ex. "Comment une
   agence…"), quelle que soit la casse saisie dans l'éditeur. Passage en
   minuscules puis capitalisation de la seule ::first-letter — text-transform:
   capitalize mettrait une majuscule à CHAQUE mot, ce qui n'est pas voulu ici.
   Scopé à .single-post pour ne pas toucher les autres gabarits utilisant
   post-content (fiches formation, pages financement…). */
.single-post .wp-block-post-content h2,
.single-post .wp-block-post-content h3,
.single-post .wp-block-post-content h4 {
	text-transform: lowercase;
}

.single-post .wp-block-post-content h2::first-letter,
.single-post .wp-block-post-content h3::first-letter,
.single-post .wp-block-post-content h4::first-letter {
	text-transform: uppercase;
}

/* Régions de premier niveau jointives au header/entre elles.
   Deux sources d'espace annulées :
   1. Block-gap par défaut (1.2rem) que WordPress insère entre les enfants
      directs de .wp-site-blocks via `:where(.wp-site-blocks) > *` (archives).
   2. margin-top inline (spacing 60 = 36px) posé sur le <main> par le gabarit
      de page hérité de Twenty Twenty-Five (pages classiques : accueil,
      financement…). Un style inline impose le `!important` pour être surpassé.
   Le padding interne des sections (respir propre au design) n'est pas touché. */
.wp-site-blocks > main {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Pages classiques (gabarit de page hérité) : le groupe qui enveloppe le
   contenu porte un padding-top inline (spacing 60 = 36px) qui créait une bande
   blanche entre le header et le premier hero pleine largeur (alignfull). On
   l'annule ; le padding-bottom (espace avant le footer) est conservé, et le
   respir du hero provient de son propre padding interne. Scopé à `.page` pour
   ne pas affecter les gabarits d'archives (déjà jointifs). */
.page .wp-site-blocks > main > .wp-block-group.has-global-padding {
	padding-top: 0 !important;
}

/* Accueil uniquement : on annule aussi le padding-bottom inline de ce même
   groupe wrapper pour que le dernier bloc (CTA final) colle au footer. Les
   autres pages classiques gardent leur respir avant le footer (cf. règle
   `.page` ci-dessus qui, elle, ne touche que le padding-top). */
.home .wp-site-blocks > main > .wp-block-group.has-global-padding {
	padding-bottom: 0 !important;
}

/* Header collant au scroll.
   Le bloc « En-tête » (.wb-header) porte déjà `position: sticky`, mais
   WordPress l'enveloppe dans un <header class="wp-block-template-part"> qui
   épouse sa hauteur (~104px). Le bloc conteneur de l'élément sticky étant ce
   wrapper, .wb-header ne pouvait « coller » que sur ces 104px puis défilait.
   On rend donc le wrapper lui-même sticky : son bloc conteneur est
   .wp-site-blocks (pleine hauteur de page), ce qui le fige bien en haut. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* Hauteur du header collant, exposée globalement pour caler les autres éléments
   collants (sommaire de fiche .wb-fiche-subnav, barre d'ancres agenda) et les
   ancres. Header = barre utilitaire (~35px) + barre principale (~69px) = 104px,
   valeur de repli avant le premier passage de header/view.js (mesure réelle en
   direct, cf. measureHeaderHeight()). Posée sur :root et non sur `body` : une
   custom property déclarée sur `body` ne s'hérite pas de `html` (elle prend sa
   propre valeur, ici figée) — la mise à jour dynamique de view.js sur
   `document.documentElement` (= html) ne parvenait donc jamais aux éléments
   sous `body` (quasi toute la page), qui restaient calés sur 104px même une
   fois la barre utilitaire masquée/absente (ex. bandeau mobile du sommaire
   d'article, collé au menu avec un écart de ~35px). */
:root {
	--wb-header-h: 104px;
}

/* Fiche formation : les sections cibles du sommaire (.wb-fiche-subnav) doivent
   s'arrêter SOUS la pile collante header + sommaire (~104 + 58px) quand on suit
   une ancre, sinon leur titre passe derrière les barres. Surclasse les
   scroll-margin-top propres à chaque bloc (5rem, insuffisant). */
.single-formation :is( #objectifs, #programme, #pour-qui, #prerequis, #modalites, #financement, #avis ) {
	scroll-margin-top: calc( var( --wb-header-h, 104px ) + 58px + 0.75rem );
}

/* =========================================================================
   Page « Nous connaître » (page-id 355) — retouches ciblées.
   Ces blocs (hero, proche-de-vous, cta-final) sont partagés avec l'accueil
   et contact : les ajustements sont donc scopés à la page pour ne pas les
   impacter. Le bandeau-stats n'existe que sur cette page mais reste scopé
   ici par cohérence.
   ========================================================================= */

/* Hero : lead un cran plus lisible (le titre est déjà à 2,5rem via la
   variante --has-media, on n'y touche pas pour préserver le responsive). */
.page-id-355 .wb-hero__lead {
	font-size: 1rem;
	line-height: 1.5;
}

/* Bandeau indicateurs : passe d'une bande navy pleine largeur (qui fusionnait
   visuellement avec le hero navy) à une carte contenue crème posée juste sous
   le hero. On supprime le gap blanc de 1,2rem au-dessus, on porte le fond crème
   sur la carte interne (coins arrondis) et on assombrit les textes pour le
   contraste sur fond clair. */
.page-id-355 .wb-bandeau-stats {
	margin-block-start: 0;
	background: transparent;
	padding-block: 0 clamp( 1.5rem, 3vw, 2rem );
}

.page-id-355 .wb-bandeau-stats__inner {
	background: var( --wp--preset--color--surface-warm );
	border-radius: var( --wp--custom--radius--md );
	box-shadow: var( --wp--custom--shadow--soft );
	padding: clamp( 1.5rem, 3vw, 2rem ) clamp( 1.5rem, 4vw, 3rem );
}

.page-id-355 .wb-bandeau-stats__value {
	color: var( --wp--preset--color--primary );
}

.page-id-355 .wb-bandeau-stats__label {
	color: var( --wp--preset--color--neutral );
}

/* « Proche de vous » : mise en carte contenue — le fond crème passe du plein
   écran (alignfull) à une boîte arrondie centrée, l'espace vertical de section
   est conservé autour comme marge de la carte. */
.page-id-355 .wb-proche-de-vous {
	background: transparent;
}

.page-id-355 .wb-proche-de-vous__inner {
	background: var( --wp--preset--color--surface-warm );
	border-radius: var( --wp--custom--radius--md );
	box-shadow: var( --wp--custom--shadow--soft );
	padding: clamp( 2rem, 4vw, 3.5rem );
}

/* CTA final : suppression du gap blanc de 1,2rem (block-gap du thème) au-dessus
   du bloc. */
.page-id-355 .wb-cta-final {
	margin-block-start: 0;
}
