/* ==========================================================================
   TopReims — système de design (thème enfant GeneratePress)
   Bleu profond = confiance · Or champagne = accent · Blancs chauds = respiration
   ========================================================================== */

:root {
	--tr-navy: #0e2a47;
	--tr-navy-2: #173b63;
	--tr-navy-3: #24507f;
	--tr-gold: #c8a15a;
	--tr-gold-dark: #8a6a2c;   /* texte doré lisible sur fond clair (AA) */
	--tr-gold-soft: #efe3c8;
	--tr-cream: #faf7f1;
	--tr-cream-2: #f3eee4;
	--tr-ink: #1b2430;
	--tr-muted: #566172;
	--tr-line: #e4ddcf;
	--tr-white: #ffffff;
	--tr-radius: 14px;
	--tr-radius-sm: 10px;
	--tr-shadow: 0 1px 2px rgba(14, 42, 71, .06), 0 8px 24px rgba(14, 42, 71, .08);
	--tr-shadow-hover: 0 2px 4px rgba(14, 42, 71, .08), 0 14px 36px rgba(14, 42, 71, .14);
	--tr-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tr-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--tr-max: 1180px;
}

/* ---------- Base ---------- */
html, body { overflow-x: clip; } /* sections pleine largeur (100vw) sans scroll horizontal */
body {
	background: var(--tr-cream);
	color: var(--tr-ink);
	font-family: var(--tr-font);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .main-title, .entry-title {
	font-family: var(--tr-serif);
	color: var(--tr-navy);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
}
h1, .entry-title { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 1.6em; }
h3 { font-size: 1.25rem; }
a { color: var(--tr-navy-3); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--tr-navy); }
:focus-visible { outline: 3px solid var(--tr-gold); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--tr-gold-soft); }

.site.grid-container, .grid-container { max-width: var(--tr-max); }
.separate-containers .inside-article,
.one-container .site-content,
.separate-containers .comments-area,
.separate-containers .page-header { background: transparent; }
.separate-containers .inside-article { padding: 48px 0; }
.one-container .site-content { padding: 40px 20px; }

/* ---------- En-tête collant ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--tr-line);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.inside-header { padding: 14px 20px; }
.site-description { display: none; }

.main-title { margin: 0; font-size: 1.6rem; line-height: 1; }
.main-title a, .tr-footer__logo { text-decoration: none; }
.tr-logo__top { color: var(--tr-gold-dark); font-family: var(--tr-serif); font-weight: 700; }
.tr-logo__reims { color: var(--tr-navy); font-family: var(--tr-serif); font-weight: 700; }
.tr-footer .tr-logo__top { color: var(--tr-gold); }
.tr-footer .tr-logo__reims { color: var(--tr-white); }

.main-navigation, .main-navigation ul ul { background: transparent; }
.main-navigation .main-nav ul li a {
	color: var(--tr-ink);
	font-weight: 500;
	font-size: .95rem;
	padding-left: 14px;
	padding-right: 14px;
	line-height: 56px;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--tr-navy-3); }
.main-navigation ul ul {
	background: var(--tr-white);
	border: 1px solid var(--tr-line);
	border-radius: var(--tr-radius-sm);
	box-shadow: var(--tr-shadow);
	padding: 6px 0;
	width: 250px;
}
.main-navigation .main-nav ul ul li a { line-height: 1.4; padding: 9px 18px; }
.main-navigation .main-nav ul li.tr-menu-cta > a {
	background: var(--tr-navy);
	color: var(--tr-white);
	border-radius: 999px;
	line-height: 42px;
	margin: 7px 0 7px 10px;
	padding: 0 22px;
	font-weight: 600;
}
.main-navigation .main-nav ul li.tr-menu-cta > a:hover { background: var(--tr-navy-3); color: var(--tr-white); }
.main-navigation .main-nav ul li.lang-item a { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tr-muted); }
.menu-toggle { color: var(--tr-navy); font-weight: 600; }
@media (max-width: 768px) {
	.main-navigation .main-nav ul li.tr-menu-cta > a { margin: 8px 16px; text-align: center; }
	.main-navigation ul ul { width: auto; box-shadow: none; border: 0; }
}

/* ---------- Boutons (blocs + composants) ---------- */
.wp-block-button__link, .tr-btn, button.tr-btn,
.fluentform .ff-btn-submit, .ff-default .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	background: var(--tr-navy);
	color: var(--tr-white);
	border: 2px solid var(--tr-navy);
	border-radius: 999px;
	padding: .8em 1.6em;
	font-family: var(--tr-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.wp-block-button__link:hover, .tr-btn:hover,
.fluentform .ff-btn-submit:hover { background: var(--tr-navy-3); border-color: var(--tr-navy-3); color: var(--tr-white); transform: translateY(-1px); }
.is-style-outline .wp-block-button__link, .tr-btn--ghost {
	background: transparent;
	color: var(--tr-navy);
	border-color: var(--tr-navy);
}
.is-style-outline .wp-block-button__link:hover, .tr-btn--ghost:hover { background: var(--tr-navy); color: var(--tr-white); }
.wp-block-buttons { margin-top: 1.4em; }

/* ---------- Sections de page (blocs groupe) ---------- */
.entry-content > .wp-block-group.tr-section,
.entry-content > .wp-block-group.tr-hero,
.entry-content > .wp-block-group.tr-cta-band { margin-top: 0; margin-bottom: 0; }
.tr-section { padding: 64px 0; }
.tr-section--alt { position: relative; }
.tr-section--alt::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--tr-white);
	border-top: 1px solid var(--tr-line);
	border-bottom: 1px solid var(--tr-line);
	z-index: -1;
}
.tr-section > h2:first-child { margin-top: 0; }
.tr-section__intro, .tr-lead { font-size: 1.15rem; color: var(--tr-muted); max-width: 720px; }
.tr-small { font-size: .9rem; color: var(--tr-muted); }

/* Hero plein écran */
.tr-hero {
	position: relative;
	margin: -48px calc(50% - 50vw) 0;
	padding: clamp(72px, 12vw, 140px) max(20px, calc(50vw - var(--tr-max) / 2 + 20px));
	color: var(--tr-white);
	background:
		linear-gradient(100deg, rgba(14, 42, 71, .94) 0%, rgba(14, 42, 71, .82) 45%, rgba(14, 42, 71, .45) 100%),
		var(--tr-hero-img, none) center 30% / cover no-repeat,
		var(--tr-navy);
}
.tr-hero h1 { color: var(--tr-white); max-width: 760px; font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: .4em; }
.tr-hero .tr-lead { color: rgba(255, 255, 255, .88); max-width: 640px; }
.tr-hero .wp-block-button__link { background: var(--tr-gold); border-color: var(--tr-gold); color: var(--tr-navy); }
.tr-hero .wp-block-button__link:hover { background: var(--tr-white); border-color: var(--tr-white); color: var(--tr-navy); }
.tr-hero .is-style-outline .wp-block-button__link { background: transparent; color: var(--tr-white); border-color: rgba(255, 255, 255, .7); }
.tr-hero .is-style-outline .wp-block-button__link:hover { background: var(--tr-white); color: var(--tr-navy); }
.tr-hero__trust { color: rgba(255, 255, 255, .8); font-size: .92rem; margin-top: 1.4em; letter-spacing: .01em; }

/* Bandeau CTA pro */
.tr-cta-band {
	margin: 32px 0 64px;
	padding: clamp(36px, 6vw, 60px);
	border-radius: var(--tr-radius);
	background: linear-gradient(120deg, var(--tr-navy) 0%, var(--tr-navy-2) 100%);
	color: rgba(255, 255, 255, .88);
	position: relative;
	overflow: hidden;
}
.tr-cta-band::after {
	content: "";
	position: absolute;
	right: -80px; top: -80px;
	width: 260px; height: 260px;
	border-radius: 50%;
	border: 40px solid rgba(200, 161, 90, .18);
}
.tr-cta-band h2 { color: var(--tr-white); margin-top: 0; }
.tr-cta-band .wp-block-button__link { background: var(--tr-gold); border-color: var(--tr-gold); color: var(--tr-navy); }

/* Étapes numérotées */
ol.tr-steps { list-style: none; counter-reset: trstep; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
ol.tr-steps li {
	counter-increment: trstep;
	background: var(--tr-white);
	border: 1px solid var(--tr-line);
	border-radius: var(--tr-radius);
	padding: 28px 24px 24px;
	box-shadow: var(--tr-shadow);
	margin: 0;
}
ol.tr-steps li::before {
	content: counter(trstep);
	display: grid; place-items: center;
	width: 40px; height: 40px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--tr-gold-soft);
	color: var(--tr-navy);
	font-family: var(--tr-serif);
	font-weight: 700;
	font-size: 1.2rem;
}
ol.tr-steps li strong { display: block; color: var(--tr-navy); margin-bottom: 4px; }
ol.tr-steps--compact { grid-template-columns: 1fr; gap: 10px; }
ol.tr-steps--compact li { padding: 16px 18px 16px 70px; position: relative; box-shadow: none; }
ol.tr-steps--compact li::before { position: absolute; left: 16px; top: 12px; margin: 0; width: 36px; height: 36px; }

/* Listes de critères / conseils à coches */
ul.tr-criteria, ul.tr-checklist, ul.tr-contact-list { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 12px; }
ul.tr-criteria { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
ul.tr-criteria li, ul.tr-checklist li { position: relative; padding: 14px 16px 14px 48px; background: var(--tr-white); border: 1px solid var(--tr-line); border-radius: var(--tr-radius-sm); margin: 0; }
ul.tr-criteria li::before, ul.tr-checklist li::before {
	content: "";
	position: absolute; left: 16px; top: 17px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--tr-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2a47' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
ul.tr-contact-list li { margin: 0; }

/* ---------- Articles ---------- */
.single .entry-header, .single .entry-content { max-width: 760px; }
.single .entry-header, .single .entry-content { margin-left: auto; margin-right: auto; }
body.page:not(.home) .entry-content, body.page:not(.home) .entry-header { max-width: 860px; margin-left: auto; margin-right: auto; }
.home .entry-content > * { max-width: none; }
.single .featured-image, .single .post-image { max-width: 1000px; margin: 0 auto 32px; }
.featured-image img, .post-image img { border-radius: var(--tr-radius); max-height: 560px; width: 100%; object-fit: cover; }
.entry-meta, .tr-readtime { color: var(--tr-muted); font-size: .9rem; }
.tr-readtime { margin: .2em 0 0; }
.entry-content p, .entry-content li { font-size: 1.06rem; }
.single .entry-content > p:first-child { font-size: 1.2rem; color: var(--tr-ink); }
.cat-links a, .tags-links a { color: var(--tr-gold-dark); }

.tr-infobox {
	margin: 36px 0;
	padding: 22px 24px;
	background: var(--tr-white);
	border: 1px solid var(--tr-line);
	border-left: 4px solid var(--tr-gold);
	border-radius: var(--tr-radius-sm);
}
.tr-infobox__title { font-family: var(--tr-serif); color: var(--tr-navy); font-weight: 700; font-size: 1.15rem; margin: 0 0 8px; }
.tr-infobox ul { margin: 0 0 0 1.1em; }
.tr-credit { font-size: .82rem !important; color: var(--tr-muted); margin-top: 32px; }
.tr-credit a { color: var(--tr-muted); }

/* Archives du blog (page des articles) */
.blog .site-main, .archive .site-main { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.blog .site-main > :not(article), .archive .site-main > :not(article) { grid-column: 1 / -1; }
.blog article .inside-article, .archive article .inside-article {
	background: var(--tr-white);
	border: 1px solid var(--tr-line);
	border-radius: var(--tr-radius);
	padding: 0 0 20px;
	height: 100%;
	overflow: hidden;
	box-shadow: var(--tr-shadow);
}
.blog article .post-image, .archive article .post-image { margin: 0 0 16px; }
.blog article .post-image img, .archive article .post-image img { border-radius: 0; aspect-ratio: 16 / 10; object-fit: cover; }
.blog article .entry-header, .blog article .entry-summary, .blog article footer,
.archive article .entry-header, .archive article .entry-summary, .archive article footer { padding: 0 22px; }
.blog .entry-title, .archive .entry-title { font-size: 1.3rem; }
.blog .entry-title a, .archive .entry-title a { color: var(--tr-navy); text-decoration: none; }

/* ---------- Pied de page ---------- */
.tr-footer { background: var(--tr-navy); color: rgba(255, 255, 255, .78); padding: 64px 20px 32px; }
.tr-footer__inner { max-width: var(--tr-max); margin: 0 auto; display: grid; gap: 40px; grid-template-columns: 1.3fr 1fr 1fr; }
@media (max-width: 860px) { .tr-footer__inner { grid-template-columns: 1fr; } }
.tr-footer__logo { font-size: 1.7rem; margin: 0 0 12px; }
.tr-footer__title { color: var(--tr-white); font-weight: 600; margin: 0 0 12px; letter-spacing: .02em; }
.tr-footer ul { list-style: none; margin: 0; padding: 0; }
.tr-footer li { margin: 0 0 6px; }
.tr-footer a:not(.tr-btn) { color: rgba(255, 255, 255, .78); text-decoration: none; }
.tr-footer a:not(.tr-btn):hover { color: var(--tr-gold); }
.tr-footer .tr-btn { background: var(--tr-gold); border-color: var(--tr-gold); color: var(--tr-navy); }
.tr-footer__col:nth-child(2) ul { columns: 2; column-gap: 20px; }
.site-info { background: var(--tr-navy); color: rgba(255, 255, 255, .55); border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem; }
.site-footer .footer-widgets { display: none; }

/* ---------- Accessibilité / mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Ajustes après recette visuelle ---------- */
/* Accueil : le hero colle à l'en-tête */
.home.separate-containers .site-main { margin-top: 0; }
.home .inside-article { padding-top: 0; }
.tr-hero { margin-top: 0; }

/* Les groupes Gutenberg « contraints » limitent la largeur : les sections utilisent tout le conteneur */
.entry-content .tr-section > *, .entry-content .tr-cta-band > *, .entry-content .tr-hero > * { max-width: none; margin-left: 0; margin-right: 0; }
.entry-content .tr-section > .tr-section__intro { max-width: 720px; }
.entry-content .tr-hero > h1 { max-width: 780px; }
.entry-content .tr-hero > .tr-lead { max-width: 640px; }
.entry-content .tr-hero > .tr-search { max-width: 720px; }

/* Boutons : priorité sur les couleurs par défaut de GeneratePress */
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--tr-navy); border-color: var(--tr-navy); color: var(--tr-white); }
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--tr-navy-3); border-color: var(--tr-navy-3); color: var(--tr-white); }
.entry-content .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--tr-navy); border: 2px solid var(--tr-navy); }
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--tr-navy); color: var(--tr-white); }
.entry-content .tr-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.entry-content .tr-cta-band .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--tr-gold); border-color: var(--tr-gold); color: var(--tr-navy); }
.entry-content .tr-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.entry-content .tr-cta-band .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--tr-white); border-color: var(--tr-white); color: var(--tr-navy); }
.entry-content .tr-hero .wp-block-button.is-style-outline .wp-block-button__link { color: var(--tr-white); border-color: rgba(255, 255, 255, .7); }
.entry-content .tr-hero .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--tr-white); color: var(--tr-navy); }

/* Articles : pied (catégorie, précédent/suivant) aligné sur le texte */
.single .inside-article > footer.entry-meta { max-width: 760px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--tr-line); }

/* Marges latérales (mobile et tablette) */
@media (max-width: 1220px) {
	.separate-containers .inside-article { padding-left: 20px; padding-right: 20px; }
}