/*
Theme Name: Estive Cardamine
Template: generatepress
Version: 1.0.0
Description: Habillage enfant pour Flèche après flèche — paire swiss-elegant, palette midnight-bold, signature sig-E.
*/

/* --------------------------------------------------------------------------
   Jetons de design (§10) — palette midnight-bold, largeurs compact,
   rayon subtle, ombre subtle, rythme compact.
   -------------------------------------------------------------------------- */

:root {
	--ec-primaire:       #1E293B;
	--ec-secondaire:     #475569;
	--ec-accent:         #3B82F6;
	--ec-accent-lien:    #1D4ED8; /* accent assombri : #3B82F6 tombe à 3,1:1 sur blanc, sous le seuil AA */
	--ec-accent-doux:    #E8ECF1;
	--ec-surface:        #F1F5F9;
	--ec-fond:           #FFFFFF;
	--ec-texte:          #0F172A;
	--ec-texte-doux:     #64748B;
	--ec-bordure:        #CBD5E1;

	--ec-rayon:          4px;
	--ec-ombre:          0 1px 3px rgba(0, 0, 0, 0.08);
	--ec-gap-section:    2rem;
	--ec-gap-bloc:       1rem;
	--ec-padding-boite:  1rem;
}

/* --------------------------------------------------------------------------
   Signature de carnet, affichage réduit
   (dictionnaire de variance APPENDIX-A, entrée 63)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.inside-navigation { position: relative; }
	.inside-navigation::before {
		content: "Un passionné de tir à l'arc qui note ce qu'il apprend, cible après cible.";
		position: absolute;
		left: 118px;
		right: 112px;
		top: 50%;
		transform: translateY(-50%);
		font-family: 'Crimson Text', Palatino, serif;
		font-style: italic;
		font-size: 9.5px;
		line-height: 1.25;
		max-width: 44%;
		color: var(--ec-texte-doux);
		pointer-events: none;
	}
}

/* --------------------------------------------------------------------------
   Logo — largeur épinglée, hauteur laissée au ratio intrinsèque.
   Épingler les deux dimensions écrase les hampes d'un logotype large alors
   que getBoundingClientRect continue d'annoncer la bonne boîte.
   -------------------------------------------------------------------------- */

.site-logo img,
.site-header .site-logo img {
	width: 292px;
	max-width: 100%;
	height: auto;
}

/* GP Menu Plus fusionne logo et navigation dans #mobile-header, qui hérite de
   navigation_background_color. Le logotype est en encre sombre : sur la barre
   bleu nuit il tomberait à ~1,2:1. On repasse la barre en blanc, au point de
   rupture mobile seulement, pour que la navigation garde sa couleur ailleurs. */
@media (max-width: 1024px) {
	#mobile-header,
	#mobile-header .inside-navigation {
		background-color: var(--ec-fond);
		border-bottom: 1px solid var(--ec-bordure);
	}
	#mobile-header .inside-navigation,
	#mobile-header .menu-toggle {
		min-height: 60px;
		display: flex;
		align-items: center;
	}
	#mobile-header .menu-toggle,
	#mobile-header .menu-toggle:hover,
	#mobile-header .menu-toggle:focus {
		background-color: transparent;
		color: var(--ec-texte);
	}
	#mobile-header .site-logo { flex: 0 0 auto; display: block; align-self: center; }
	#mobile-header .site-logo a { display: block; width: 104px; }
	#mobile-header .site-logo img {
		width: 104px !important;
		height: auto !important;
		max-width: none !important;
		max-height: none !important;
	}
}

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */

body,
.entry-content,
button, input, select, textarea {
	font-family: 'Crimson Text', Palatino, serif;
}

h1, h2, h3, h4, h5, h6,
.main-navigation a,
.site-title {
	font-family: 'Outfit', 'Trebuchet MS', sans-serif;
	letter-spacing: -0.01em;
}

/* GP Premium imprime ses règles de couleur APRÈS generate-child-css, avec des
   sélecteurs nus. Un `.classe { color }` fait match nul en spécificité et perd
   sur l'ordre des sources : d'où le `a.classe` partout où une ancre est teintée. */
a.ec-intro__cta,
a.ec-intro__cta:visited,
a.ec-404-lien,
a.ec-404-lien:visited { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   Héros author-intro (§10 homepage_hero)
   -------------------------------------------------------------------------- */

.ec-intro {
	display: flex;
	gap: var(--ec-gap-section);
	align-items: flex-start;
	background: var(--ec-surface);
	border: 1px solid var(--ec-bordure);
	border-radius: var(--ec-rayon);
	box-shadow: var(--ec-ombre);
	padding: calc(var(--ec-padding-boite) * 1.75);
	margin-bottom: var(--ec-gap-section);
}

.ec-intro__portrait {
	flex: 0 0 auto;
	width: 132px;
	height: auto;
	border-radius: var(--ec-rayon);
	display: block;
}

.ec-intro__texte { flex: 1 1 auto; min-width: 0; }

h1.site-tagline-heading,
.site-tagline-heading {
	display: block;
	text-align: left;
	margin: 0 0 0.4rem;
	padding: 0;
	font-size: 1.45rem;
	line-height: 1.22;
	font-weight: 600;
	color: var(--ec-primaire);
}

.ec-intro__lede {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
	font-style: italic;
	color: var(--ec-secondaire);
}

.ec-intro__mot { margin: 0 0 var(--ec-gap-bloc); }

a.ec-intro__cta {
	display: inline-block;
	background: var(--ec-primaire);
	border-radius: var(--ec-rayon);
	padding: 0.5rem 1.1rem;
	font-family: 'Outfit', 'Trebuchet MS', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
}
a.ec-intro__cta:hover,
a.ec-intro__cta:focus { background: var(--ec-secondaire); color: #FFFFFF; }

@media (max-width: 600px) {
	.ec-intro { flex-direction: column; align-items: center; text-align: left; }
	.ec-intro__portrait { width: 112px; }
	h1.site-tagline-heading { font-size: 1.25rem; }
}

/* Intertitre de section (§10 section_heading) */
.ec-rubrique {
	margin: 0 0 var(--ec-gap-bloc);
	padding-bottom: 0.35rem;
	border-bottom: 2px solid var(--ec-primaire);
	font-size: 1.12rem;
	font-weight: 600;
	text-transform: none;
	color: var(--ec-primaire);
}

/* --------------------------------------------------------------------------
   Cartes d'article — ombre, rayon, survol, fond distinct (APPENDIX-A)
   -------------------------------------------------------------------------- */

.generate-columns .inside-article,
.blog .inside-article,
.archive .inside-article,
.search-results .inside-article {
	background: var(--ec-fond);
	border: 1px solid var(--ec-bordure);
	border-radius: var(--ec-rayon);
	box-shadow: var(--ec-ombre);
	padding: calc(var(--ec-padding-boite) * 1.15);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.generate-columns .inside-article:hover,
.blog .inside-article:hover,
.archive .inside-article:hover {
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
	transform: translateY(-2px);
}

.post-image img,
.generate-columns .post-image img {
	border-radius: var(--ec-rayon);
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.entry-title { font-size: 1.18rem; line-height: 1.28; }
.entry-meta { font-size: 0.86rem; color: var(--ec-texte-doux); }

.read-more,
a.read-more {
	font-family: 'Outfit', 'Trebuchet MS', sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Champs de recherche (APPENDIX-E §8)
   -------------------------------------------------------------------------- */

.search-field,
.wp-block-search__input {
	border: 1px solid var(--ec-bordure);
	border-radius: var(--ec-rayon);
	padding: 8px 12px;
	font-family: inherit;
	font-size: 0.95em;
	width: 100%;
	background: var(--ec-fond);
	color: var(--ec-texte);
}

.search-field:focus,
.wp-block-search__input:focus {
	outline: 2px solid var(--ec-accent-lien);
	outline-offset: 1px;
	border-color: var(--ec-accent-lien);
}

.search-submit,
.wp-block-search__button {
	background: var(--ec-primaire);
	color: #FFFFFF;
	border: none;
	border-radius: var(--ec-rayon);
	padding: 8px 16px;
	font-family: 'Outfit', 'Trebuchet MS', sans-serif;
	font-size: 0.95em;
	cursor: pointer;
}
.search-submit:hover,
.wp-block-search__button:hover { background: var(--ec-secondaire); }

/* --------------------------------------------------------------------------
   Formulaire de contact — bouton d'envoi à la couleur primaire de la palette.
   Règle obligatoire dans tout calque enfant portant un formulaire : la porte
   contact-form-render.cjs vérifie form_button_palette_match.
   -------------------------------------------------------------------------- */

body button.wpforms-submit,
body .wpcf7-submit,
body .ff-btn-submit {
	background-color: #1E293B !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: var(--ec-rayon) !important;
	font-family: 'Outfit', 'Trebuchet MS', sans-serif !important;
	font-weight: 600 !important;
	padding: 10px 22px !important;
}

body button.wpforms-submit:hover,
body .wpcf7-submit:hover,
body .ff-btn-submit:hover { filter: brightness(0.88) !important; }

.wpforms-field input[type=text],
.wpforms-field input[type=email],
.wpforms-field input[type=url],
.wpforms-field select,
.wpforms-field textarea {
	border: 1px solid var(--ec-bordure) !important;
	border-radius: var(--ec-rayon) !important;
	padding: 9px 12px !important;
	font-family: 'Crimson Text', Palatino, serif !important;
	background: var(--ec-fond);
	color: var(--ec-texte);
}

.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
	outline: 2px solid var(--ec-accent-lien) !important;
	border-color: var(--ec-accent-lien) !important;
}

.wpforms-field-label {
	font-family: 'Outfit', 'Trebuchet MS', sans-serif !important;
	font-weight: 600 !important;
	color: var(--ec-texte) !important;
}

/* --------------------------------------------------------------------------
   Page À propos — portrait flotté à gauche (§10 about-left-float)
   -------------------------------------------------------------------------- */

.ec-portrait-apropos,
.entry-content .wp-block-image.alignleft.ec-portrait-apropos {
	margin: 0 1.6rem 1rem 0;
	max-width: 232px;
}
.ec-portrait-apropos img {
	border-radius: var(--ec-rayon);
	box-shadow: var(--ec-ombre);
	display: block;
	height: auto;
}

/* --------------------------------------------------------------------------
   Carte auteur et signature d'article
   -------------------------------------------------------------------------- */

.ec-carte-auteur {
	display: flex;
	gap: var(--ec-gap-bloc);
	align-items: flex-start;
	margin-top: var(--ec-gap-section);
	padding: var(--ec-padding-boite);
	background: var(--ec-surface);
	border-left: 3px solid var(--ec-primaire);
	border-radius: var(--ec-rayon);
}
.ec-carte-auteur img { border-radius: 50%; flex: 0 0 auto; height: auto; }
.ec-carte-auteur p { margin: 0 0 0.3rem; font-size: 0.95rem; }
.ec-carte-auteur__nom {
	font-family: 'Outfit', 'Trebuchet MS', sans-serif;
	font-weight: 600;
	font-size: 1rem;
}
.ec-signature__vignette {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 0.4rem;
	height: auto;
}

/* --------------------------------------------------------------------------
   Pied de page 3-col-light (§10 footer_type)
   -------------------------------------------------------------------------- */

.site-footer .footer-widgets {
	background: var(--ec-surface);
	border-top: 1px solid var(--ec-bordure);
	padding-top: calc(var(--ec-gap-section) * 0.9);
	padding-bottom: calc(var(--ec-gap-section) * 0.6);
}

.site-footer .footer-widgets .widget-title {
	font-family: 'Outfit', 'Trebuchet MS', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ec-primaire);
	margin-bottom: 0.5rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--ec-bordure);
}

.site-footer .footer-widgets ul { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-widgets li { margin-bottom: 0.3rem; font-size: 0.93rem; }

.site-footer .footer-widgets a,
.site-footer .footer-widgets a:visited { color: var(--ec-accent-lien); text-decoration: none; }
.site-footer .footer-widgets a:hover { color: var(--ec-texte); text-decoration: underline; }

.ec-pied-mot {
	margin: 0 auto 0.5rem;
	max-width: 62ch;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--ec-texte-doux);
}

.site-info { font-size: 0.86rem; }

/* --------------------------------------------------------------------------
   Page 404
   -------------------------------------------------------------------------- */

.ec-404-liens {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: var(--ec-gap-bloc);
}
a.ec-404-lien {
	display: inline-block;
	background: var(--ec-primaire);
	border-radius: var(--ec-rayon);
	padding: 0.45rem 0.95rem;
	font-family: 'Outfit', 'Trebuchet MS', sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}
a.ec-404-lien:hover,
a.ec-404-lien:focus { background: var(--ec-secondaire); color: #FFFFFF; }

/* --------------------------------------------------------------------------
   Contenu d'article
   -------------------------------------------------------------------------- */

.entry-content { font-size: 1.06rem; line-height: 1.65; }
.entry-content h2 {
	margin-top: var(--ec-gap-section);
	margin-bottom: 0.5rem;
	font-size: 1.32rem;
	color: var(--ec-primaire);
}
.entry-content h3 { margin-top: var(--ec-gap-bloc); font-size: 1.1rem; color: var(--ec-secondaire); }

.entry-content a,
.entry-content a:visited { color: var(--ec-accent-lien); }
.entry-content a:hover { color: var(--ec-texte); }

.entry-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.95rem;
	margin: var(--ec-gap-bloc) 0;
}
.entry-content th,
.entry-content td {
	border: 1px solid var(--ec-bordure);
	padding: 0.5rem 0.65rem;
	text-align: left;
}
.entry-content th { background: var(--ec-accent-doux); font-family: 'Outfit', 'Trebuchet MS', sans-serif; }

.entry-content blockquote {
	border-left: 3px solid var(--ec-accent);
	background: var(--ec-surface);
	margin: var(--ec-gap-bloc) 0;
	padding: 0.7rem 1rem;
	font-style: italic;
}

.entry-content figure.wp-block-image { margin: var(--ec-gap-bloc) 0; }
.entry-content figure.wp-block-image img { border-radius: var(--ec-rayon); height: auto; }
.entry-content figcaption {
	font-size: 0.84rem;
	color: var(--ec-texte-doux);
	text-align: left;
	margin-top: 0.3rem;
}

/* Description d'archive (GP show_archive_description) */
.page-header .taxonomy-description {
	font-size: 1rem;
	color: var(--ec-secondaire);
	max-width: 68ch;
}

/* Bouton retour en haut (§10 scroll_to_top = yes) */
.generate-back-to-top {
	border-radius: var(--ec-rayon);
	background-color: var(--ec-primaire);
	color: #FFFFFF;
}
.generate-back-to-top:hover,
.generate-back-to-top:focus {
	background-color: var(--ec-secondaire);
	color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Barre de pied : .inside-site-info est une ligne flex chez GP, si bien que la
   présentation et la mention de copyright se retrouvent côte à côte. Le §10
   demande la présentation au-dessus de la mention : on repasse en empilement.
   -------------------------------------------------------------------------- */

.site-info .inside-site-info {
	display: block;
	text-align: center;
}

.site-info .copyright-bar {
	float: none;
	display: block;
	margin-top: 0.35rem;
}

/* Lien « lire la suite » des cartes d'article */
.ec-lire { margin: 0.6rem 0 0; }
a.read-more,
a.read-more:visited {
	display: inline-block;
	color: var(--ec-accent-lien);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
a.read-more:hover,
a.read-more:focus { color: var(--ec-texte); }