/**
 * blocks.css — Structure et composants Plénit'Finances
 * Styles stables : variables, base, sections, typographie, cartes, boutons.
 * Ne contient pas : icônes SVG → blocks-icons.css | animations → blocks-dynamic.css
 *
 * Enqueue dans functions.php via plenit_finances_blocks_styles()
 */


/* ============================================
   VARIABLES
   ============================================ */
.gutenberg-page {
	--color-primaire:       #26b1b3;
	--color-primaire-dark:  #197374;
	--color-cta:            #f39000;
	--color-cta-dark:       #c07200;
	--color-texte:          #333333;
	--color-texte-2:        #5c5c5c;
	--color-discret:        #757575;
	--color-blanc:          #ffffff;
	--color-fond-gris:      #f5f5f5;
	--color-bordure:        #e3e3e3;
	--font-titres:          Montserrat, sans-serif;
	--font-corps:           Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--section-padding-v:    30px;
	--section-padding-h:    20px;
	--border-radius:        4px;
}

@media (min-width: 768px) {
	.gutenberg-page {
		--section-padding-v: 70px;
		--section-padding-h: 48px;
	}
}

@media (min-width: 1200px) {
	.gutenberg-page {
		--section-padding-h: 80px;
	}
}


/* ============================================
   BASE — reset Bootstrap 3
   ============================================ */
.gutenberg-page {
	font-family: var(--font-corps);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-texte);
}
.gutenberg-page p,
.gutenberg-page li { font-size: 18px; font-weight: 300; line-height: 1.6; }
.gutenberg-page a { color: var(--color-primaire); text-decoration: none; }
.gutenberg-page a:hover { color: var(--color-primaire-dark); }
.gutenberg-page .wp-block-group,
.gutenberg-page .wp-block-columns,
.gutenberg-page .wp-block-column { box-sizing: border-box; }
.gutenberg-page .wp-block-group::after,
.gutenberg-page .wp-block-columns::after { content: none; }


/* ============================================
   TYPOGRAPHIE
   ============================================ */
.gutenberg-page h1,
.gutenberg-page h2,
.gutenberg-page h3,
.gutenberg-page h4 {
	font-family: var(--font-titres);
	color: var(--color-texte);
	line-height: 1.25;
}
.gutenberg-page h1 { font-size: 41px; font-weight: 700; line-height: 1.2; }
.gutenberg-page h2 { font-size: 34px; font-weight: 600; }
.gutenberg-page h3 { font-size: 24px; font-weight: 600; }
.gutenberg-page h4 { font-size: 20px; font-weight: 600; }

@media (max-width: 767px) {
	.gutenberg-page h1 { font-size: 28px; }
	.gutenberg-page h2 { font-size: 24px; }
	.gutenberg-page h3 { font-size: 20px; }
}

.gutenberg-page .kicker {
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--color-primaire);
	text-transform: uppercase;
	margin-bottom: 12px;
}
.gutenberg-page .lead {
	font-size: 20px !important;
	font-weight: 300;
	color: var(--color-texte-2);
	line-height: 1.6;
}
.gutenberg-page .preuve-sociale {
	font-size: 14px !important;
	font-weight: 400;
	color: var(--color-discret);
}


/* ============================================
   SECTIONS
   ============================================ */
.gutenberg-page .wp-block-group {
	padding-top: var(--section-padding-v);
	padding-bottom: var(--section-padding-v);
	padding-left: var(--section-padding-h);
	padding-right: var(--section-padding-h);
}
.gutenberg-page .section-grey  { background-color: var(--color-fond-gris); }
.gutenberg-page .section-white { background-color: var(--color-blanc); }

.gutenberg-page .section-hero {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: var(--color-blanc);
}
@media (min-width: 768px) {
	.gutenberg-page .section-hero { padding-top: 60px; padding-bottom: 60px; }
}


/* ============================================
   BOUTONS
   ============================================ */
.gutenberg-page .wp-block-button__link {
	border-radius: var(--border-radius);
	font-size: 16px;
	font-weight: 700;
	padding: 12px 28px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.gutenberg-page .is-style-cta-primary .wp-block-button__link {
	background-color: var(--color-cta);
	color: var(--color-blanc);
	font-size: 18px;
	padding: 14px 34px;
}
.gutenberg-page .is-style-cta-primary .wp-block-button__link:hover {
	background-color: var(--color-cta-dark);
	color: var(--color-blanc);
}
.gutenberg-page .is-style-cta-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--color-primaire);
	border: 1px solid var(--color-primaire);
}
.gutenberg-page .is-style-cta-outline .wp-block-button__link:hover {
	background-color: var(--color-primaire);
	color: var(--color-blanc);
}
.gutenberg-page .is-style-cta-inverse .wp-block-button__link {
	background-color: var(--color-blanc);
	color: var(--color-primaire);
	font-size: 18px;
	padding: 14px 34px;
}
.gutenberg-page .is-style-cta-inverse .wp-block-button__link:hover {
	background-color: var(--color-fond-gris);
}
.gutenberg-page .cta-secondaire { font-size: 15px !important; margin-top: 8px; }
.gutenberg-page .cta-secondaire a {
	color: var(--color-primaire);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 400;
}
.gutenberg-page .cta-secondaire a:hover { color: var(--color-primaire-dark); }


/* ============================================
   SECTION CTA FINAL
   ============================================ */
.gutenberg-page .section-cta { background-color: var(--color-primaire); text-align: center; }
.gutenberg-page .section-cta h2    { color: var(--color-blanc); }
.gutenberg-page .section-cta .lead { color: rgba(255,255,255,0.9); }
.gutenberg-page .section-cta .reassurance {
	font-size: 14px !important;
	color: rgba(255,255,255,0.7);
	margin-top: 12px;
}


/* ============================================
   BANDEAU PRESSE
   ============================================ */
.gutenberg-page .bandeau-presse {
	border-top: 1px solid var(--color-bordure);
	border-bottom: 1px solid var(--color-bordure);
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}
.gutenberg-page .bandeau-label {
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--color-discret);
	text-transform: uppercase;
}


/* ============================================
   CARTES SCÈNES
   ============================================ */
.gutenberg-page .carte-scene {
	border: 1px solid var(--color-bordure);
	border-radius: var(--border-radius);
	padding: 25px 20px !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.07);
	background-color: var(--color-blanc);
}
.gutenberg-page .scene-heure {
	font-family: var(--font-titres);
	font-weight: 700;
	font-size: 15px !important;
	color: var(--color-primaire);
	margin-bottom: 8px;
}


/* ============================================
   SECTION OFFRE — 01/02/03
   ============================================ */
.gutenberg-page .methode-colonnes { gap: 32px; margin-top: 40px; }
.gutenberg-page .methode-numero {
	font-family: var(--font-titres);
	font-weight: 700;
	font-size: 36px !important;
	line-height: 1;
	color: var(--color-bordure);
	margin-bottom: 8px;
}


/* ============================================
   SECTION COCKTAIL
   ============================================ */
.gutenberg-page .cocktail-colonnes { gap: 40px; margin-top: 48px; }
.gutenberg-page .cocktail-col { border-top: 2px solid var(--color-primaire); padding-top: 28px; }
.gutenberg-page .cocktail-surtitre {
	font-family: var(--font-titres);
	font-weight: 700;
	font-size: 13px !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-primaire);
	margin-bottom: 2px;
}
.gutenberg-page .cocktail-label {
	font-size: 13px !important;
	font-weight: 300;
	color: var(--color-discret);
	margin-bottom: 16px;
}
.gutenberg-page .cocktail-numero {
	font-family: var(--font-titres);
	font-weight: 700;
	font-size: 48px !important;
	line-height: 1;
	color: var(--color-bordure);
	margin-bottom: 12px;
}
.gutenberg-page .cocktail-col h3 { font-size: 20px; margin-bottom: 12px; }

@media (max-width: 767px) {
	.gutenberg-page .cocktail-col {
		border-top: none;
		border-left: 2px solid var(--color-primaire);
		padding-top: 0;
		padding-left: 20px;
		margin-bottom: 32px;
	}
}


/* ============================================
   SECTION PROCESSUS
   ============================================ */
.gutenberg-page .processus-colonnes { gap: 40px; margin-top: 40px; }
.gutenberg-page .processus-numero {
	font-family: var(--font-titres);
	font-weight: 700;
	font-size: 48px !important;
	line-height: 1;
	color: var(--color-bordure);
	margin-bottom: 12px;
}
.gutenberg-page .processus-colonnes h3 {
	font-size: 20px;
	color: var(--color-primaire);
	margin-bottom: 8px;
}
@media (max-width: 767px) {
	.gutenberg-page .processus-colonnes .wp-block-column {
		border-bottom: 1px solid var(--color-bordure);
		padding-bottom: 24px;
		margin-bottom: 8px;
	}
	.gutenberg-page .processus-colonnes .wp-block-column:last-child { border-bottom: none; }
}


/* ============================================
   CITATIONS VOC
   ============================================ */
.gutenberg-page .wp-block-quote.voc { border-left: 3px solid var(--color-primaire); padding-left: 16px; margin: 0; }
.gutenberg-page .wp-block-quote.voc p { font-size: 16px !important; font-style: italic; font-weight: 300; color: var(--color-texte-2); }
.gutenberg-page .wp-block-quote.voc cite { font-size: 14px; color: var(--color-discret); }


/* ============================================
   CARTES TÉMOIGNAGES
   ============================================ */
.gutenberg-page .carte-temoignage {
	border: 1px solid var(--color-bordure);
	border-radius: var(--border-radius);
	padding: 25px 20px !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.07);
	background-color: var(--color-blanc);
	height: 100%;
}
.gutenberg-page .temoignage-nom { font-family: var(--font-titres); font-weight: 700; font-size: 16px !important; color: var(--color-texte); margin-bottom: 4px; }
.gutenberg-page .temoignage-resultat { font-size: 13px !important; color: var(--color-discret); margin-bottom: 12px; }


/* ============================================
   RÉSEAU COACHS
   ============================================ */
.gutenberg-page .reseau-colonnes { margin-top: 40px; gap: 24px; }
.gutenberg-page .carte-coach {
	border: 1px solid var(--color-bordure);
	border-radius: var(--border-radius);
	padding: 28px 20px !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	background-color: var(--color-blanc);
}
.gutenberg-page .coach-nom { font-family: var(--font-titres); font-weight: 700; font-size: 18px !important; color: var(--color-texte); margin-bottom: 4px; }
.gutenberg-page .coach-meta { font-size: 13px !important; font-weight: 300; color: var(--color-primaire); margin-bottom: 12px; }
.gutenberg-page .coach-histoire { font-size: 15px !important; font-weight: 300; line-height: 1.6; color: var(--color-texte-2); }


/* ============================================
   SECTION FONDATEUR
   ============================================ */
.gutenberg-page .citation-fondateur { font-style: italic; font-size: 26px !important; line-height: 1.4; }
.gutenberg-page .chiffres-cles { margin-top: 32px; border-top: 1px solid var(--color-bordure); padding-top: 24px; }
.gutenberg-page .chiffre { font-family: var(--font-titres); font-weight: 700; font-size: 28px !important; color: var(--color-primaire); line-height: 1; margin-bottom: 4px; }
.gutenberg-page .chiffre-label { font-size: 13px !important; font-weight: 300; color: var(--color-discret); }

@media (max-width: 767px) {
	.gutenberg-page .wp-block-media-text { grid-template-columns: 1fr !important; }
	.gutenberg-page .wp-block-media-text .wp-block-media-text__media { margin-bottom: 24px; }
}


/* ============================================
   SECTION FOND SOMBRE — Section offre (Notion 7.3)
   La section "détective pas comptable" en #2a2a2a
   Rupture visuelle forte — signal que ce qui suit est différent
   Contraste WCAG AA vérifié : texte #ffffff sur #2a2a2a = 14.7:1 ✓
   Textes secondaires : #b0b0b0 minimum (eviter #5c5c5c inutilisable sur fond sombre)
   ============================================ */
.gutenberg-page .section-sombre {
	background-color: #2a2a2a;
}
.gutenberg-page .section-sombre h1,
.gutenberg-page .section-sombre h2,
.gutenberg-page .section-sombre h3,
.gutenberg-page .section-sombre h4 {
	color: #ffffff;
}
.gutenberg-page .section-sombre p,
.gutenberg-page .section-sombre li {
	color: #e0e0e0;
}
.gutenberg-page .section-sombre .kicker {
	color: #26b1b3;
}
.gutenberg-page .section-sombre .methode-numero {
	color: #444444;
}
.gutenberg-page .section-sombre .methode-icone {
	color: #26b1b3;
}
.gutenberg-page .section-sombre a {
	color: #26b1b3;
}


/* ============================================
   CTA FINAL ÉPURÉ (Notion 7.5)
   Fond blanc, air maximum, rien après le bouton
   ============================================ */
.gutenberg-page .section-cta-epure {
	background-color: var(--color-blanc);
	text-align: center;
	padding-top: 120px !important;
	padding-bottom: 120px !important;
}
.gutenberg-page .section-cta-epure h2 {
	color: var(--color-texte);
	font-size: 38px;
}
.gutenberg-page .section-cta-epure .lead {
	color: var(--color-texte-2);
	max-width: 500px;
	margin: 16px auto 0;
}


/* ============================================
   SCROLL HORIZONTAL TÉMOIGNAGES MOBILE (Notion 7.4)
   Classe .temoignages-scroll sur le groupe parent
   dans patterns-preuves.php
   ============================================ */
@media (max-width: 767px) {
	.gutenberg-page .temoignages-scroll {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 16px;
		padding-bottom: 16px;
		-webkit-overflow-scrolling: touch;
		/* Masquer la scrollbar visuellement */
		scrollbar-width: none;
	}
	.gutenberg-page .temoignages-scroll::-webkit-scrollbar {
		display: none;
	}
	.gutenberg-page .temoignages-scroll .carte-temoignage {
		flex: 0 0 85vw;
		scroll-snap-align: start;
	}
	/* Indicateur visuel de scroll */
	.gutenberg-page .temoignages-scroll-hint {
		font-size: 12px !important;
		color: var(--color-discret);
		text-align: center;
		margin-top: 8px;
	}
}


/* ============================================
   OBJECTION + SÉPARATEUR
   ============================================ */
.gutenberg-page .objection { font-style: italic; color: var(--color-texte-2); }
.gutenberg-page .wp-block-separator { border-color: var(--color-primaire); border-width: 2px; max-width: 60px; margin: 0 auto 30px; }