/* =====================================================================
   HVTESTERS Article Template — mise en page « article ressource »
   Thème du site : maintheme (Bootstrap) + Elementor / Elementor Pro,
   en-tête et pied de page bâtis avec « Header Footer Elementor ».
   Largeurs et tailles alignées sur les pages du site (référence « About Us ») :
     contenu 1140px centré · texte 16px / interligne 24px · h2 26px/600
     h3 21px/600 · titre du bandeau 32px · méta 13px · description 15px
     corps : 3 colonnes = partage 44px · lecture (souple, ~680px) · droite 320px
     cartes 176px, rayon 12px, fond #f4f7fb
   ===================================================================== */

body.hvt-post {
	--hvt-font-title: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--hvt-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--hvt-ink: #54545c;
	--hvt-ink-strong: #090c14;
	--hvt-heading: #2b2b36;
	/* Couleurs du site (hvtesters) : bandeau haut et pied de page #0f313a,
	   liens bleus #0a3eb7 */
	--hvt-brand: #0f313a;
	--hvt-brand-dark: #0a2129;
	--hvt-accent: #0a3eb7;
	--hvt-accent-dark: #08308f;
	--hvt-link: #0a3eb7;
	/* hauteur réelle de l'en-tête collant, posée par le script du plugin */
	--hvt-sticky-top: 170px;
	/* LA BANDE DE CONTENU : largeur du contenu des pages du site
	   (conteneur Elementor 1140 px, comme la page « About Us »).
	   C'est cette largeur que suit tout le gabarit : bandeau, trois colonnes
	   et cartes. Pour l'élargir ou la resserrer, une seule valeur à changer. */
	--hvt-band: 1140px;
	--hvt-pad: 20px;
	--hvt-share-w: 44px;
	--hvt-side-w: 320px;
	--hvt-gap: 48px;
	--hvt-muted: #7d7d85;
	--hvt-crumb: #9f9fa2;
	--hvt-card-bg: #f4f7fb;
	--hvt-share-bg: #f2f6fa;
}

/* =====================================================================
   ON MASQUE LES DOUBLONS DU THÈME
   Le site affiche chaque article avec un template « single post » Elementor :
   fil d'Ariane, titre, date, puis le contenu. Le modèle reprend le fil
   d'Ariane et le titre dans son bandeau : on retire donc ceux du thème.
   ⚠ Le titre, la date ET le contenu sont dans le MÊME conteneur flex
   (.e-con-inner) : on ne masque jamais le conteneur, seulement les widgets.
   ===================================================================== */
/* titre de l'article : widget « Post Title » du template Elementor */
body.hvt-post .elementor-location-single .elementor-widget-theme-post-title { display: none !important; }
/* date affichée sous le titre : widget « Heading » du template */
body.hvt-post .elementor-location-single .elementor-element-44c04f7 { display: none !important; }
/* fil d'Ariane du thème : widget « Shortcode » + son bloc + le fil lui-même */
body.hvt-post .elementor-location-single .elementor-element-9ffdfb9,
body.hvt-post .elementor-location-single .elementor-element-fee300e,
body.hvt-post .breadcrumb-container { display: none !important; }
/* autres widgets du thème remplacés par le modèle */
body.hvt-post .elementor-widget-post-info { display: none !important; }
body.hvt-post .elementor-widget-share-buttons { display: none !important; }
/* ⚠ le bloc « Share » est une section INTERNE imbriquée : on ne masque que
   cette section interne (sinon tout le contenu disparaît avec). */
body.hvt-post section.elementor-inner-section:has(.elementor-widget-share-buttons) { display: none !important; }
/* fil d'Ariane d'autres extensions, au cas où */
body.hvt-post .rank-math-breadcrumb,
body.hvt-post .ast-breadcrumbs { display: none !important; }

/* =====================================================================
   ON RETIRE TOUT CE QUE LE TEMPLATE ELEMENTOR AFFICHE AUTOUR DU CONTENU
   Le template « single post » du thème empile, avant le contenu : une bande
   avec image de fond (le banner du thème), le fil d'Ariane, le titre, la date,
   parfois l'image à la une. Le gabarit fournit déjà tout cela : on ne garde
   donc du template que le widget de contenu.
   Ces règles ne dépendent d'aucun identifiant : elles continuent de
   fonctionner si le template est modifié.
   ===================================================================== */
/* 1) tout conteneur de premier niveau qui ne contient pas le contenu */
body.hvt-post .elementor-location-single > *:not(:has(.elementor-widget-theme-post-content)) { display: none !important; }
/* 2) tous les widgets du template sauf le contenu (commentaires et navigation
      précédent / suivant sont conservés s'il y en a) */
body.hvt-post .elementor-location-single .elementor-widget:not(.elementor-widget-theme-post-content):not(.elementor-widget-post-comments):not(.elementor-widget-post-navigation) { display: none !important; }
/* 3) aucune image de fond ni fond coloré ne doit subsister derrière le gabarit */
body.hvt-post .elementor-location-single,
body.hvt-post .elementor-location-single .e-con,
body.hvt-post .elementor-location-single .e-con-inner,
body.hvt-post .elementor-location-single .elementor-section,
body.hvt-post .elementor-location-single .elementor-column,
body.hvt-post .elementor-location-single .elementor-widget-wrap,
body.hvt-post .elementor-location-single .elementor-widget-container {
	background-image: none !important;
	background-color: transparent !important;
}

/* ---------- on n'impose AUCUNE casse ----------
   Le thème (maintheme / Elementor, réglage typographique) peut forcer
   « text-transform: uppercase » sur les titres. Le titre du modèle et les
   intertitres doivent garder exactement la casse saisie dans l'article. */
body.hvt-post .hvt-outer h1,
body.hvt-post .hvt-outer h2,
body.hvt-post .hvt-outer h3,
body.hvt-post .hvt-outer h4,
body.hvt-post .hvt-outer h5,
body.hvt-post .hvt-outer h6 { text-transform: none !important; }

/* =====================================================================
   PLEINE LARGEUR : ON ROUVRE LES CONTENEURS DU THÈME
   Le template Elementor du site enferme le contenu dans un conteneur flex
   limité à 1140 px (.e-con-inner). Le bandeau du modèle doit toucher les
   deux bords de l'écran : on rouvre ces conteneurs, uniquement sur les
   articles et uniquement dans le template « single post ».
   ===================================================================== */
body.hvt-post .elementor-location-single { max-width: 100% !important; width: 100% !important; }
body.hvt-post .elementor-location-single .e-con-inner { max-width: 100% !important; width: 100% !important; padding: 0 !important; }
body.hvt-post .elementor-location-single .e-con { margin-top: 0 !important; }
body.hvt-post .elementor-location-single .elementor-widget-theme-post-content { margin: 0 !important; }
body.hvt-post .elementor-widget-theme-post-content > .elementor-widget-container { margin: 0 !important; padding: 0 !important; }
/* repli : thèmes « classiques » (au cas où la page serait rendue hors Elementor) */
body.hvt-post #content.site-content > .container,
body.hvt-post #primary.content-area,
body.hvt-post #main.site-main { width: 100% !important; max-width: 100% !important; }
body.hvt-post section.elementor-section:has(.elementor-widget-theme-post-content) > .elementor-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
/* commentaires et navigation : ramenés sur la même grille que le contenu */
body.hvt-post .elementor-widget-post-comments > .elementor-widget-container,
body.hvt-post .elementor-widget-post-navigation > .elementor-widget-container { max-width: var(--hvt-band, 1140px) !important; margin-left: auto !important; margin-right: auto !important; padding: 0 var(--hvt-pad, 20px) !important; box-sizing: border-box; }
body.hvt-post .entry-content { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }
body.hvt-post .entry-content > .hvt-outer { margin: 0 !important; }
/* on retire aussi les marges internes du thème AU-DESSUS de l'article :
   c'est ce qui creusait le grand vide entre le menu et le bandeau. */
body.hvt-post #primary.content-area,
body.hvt-post #main.site-main,
body.hvt-post .entry { margin-top: 0 !important; padding-top: 0 !important; }
body.hvt-post .hvt-article-zone { margin-top: 0 !important; padding-top: 0 !important; }
body.hvt-post section.elementor-section:has(.elementor-widget-theme-post-content) { padding-top: 0 !important; }
body.hvt-post section.elementor-section:has(.elementor-widget-theme-post-content) > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-top: 0 !important; }

/* le bloc « 3 articles » du thème (widget Posts) est retiré : le modèle a déjà
   ses propres cartes d'articles liés. */
body.hvt-post section.elementor-section:has(.elementor-widget-posts) { display: none !important; }

/* ---------- navigation précédent / suivant + articles liés, alignés sur le contenu ---------- */
/* ⚠ la section du contenu contient AUSSI la navigation : on n'aligne donc pas la
   section de navigation (sinon on rétrécit le contenu), seulement son conteneur
   de widget. */
body.hvt-post .elementor-widget-post-comments > .elementor-widget-container,
body.hvt-post .elementor-widget-post-navigation > .elementor-widget-container { max-width: var(--hvt-band, 1140px) !important; margin-left: auto !important; margin-right: auto !important; padding: 0 var(--hvt-pad, 20px) !important; box-sizing: border-box; }
body.hvt-post .elementor-widget-post-navigation { margin-top: 40px; }
body.hvt-post .elementor-post-navigation { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid #e6e8ec; padding-top: 24px; }
body.hvt-post .elementor-post-navigation a { color: #222222 !important; text-decoration: none !important; font-family: var(--hvt-font-body); font-size: 15px; line-height: 22px; }
body.hvt-post .elementor-post-navigation a:hover { color: var(--hvt-brand) !important; }
body.hvt-post .elementor-post-navigation .post-navigation__prev--label,
body.hvt-post .elementor-post-navigation .post-navigation__next--label { display: block; margin-bottom: 2px; font-size: 12px; color: #8a8f98; }
@media (max-width: 1024px) {
	body.hvt-post .elementor-widget-post-comments > .elementor-widget-container,
	body.hvt-post .elementor-widget-post-navigation > .elementor-widget-container { padding: 0 32px !important; }
}
@media (max-width: 640px) {
	body.hvt-post .elementor-widget-post-comments > .elementor-widget-container,
	body.hvt-post .elementor-widget-post-navigation > .elementor-widget-container { padding: 0 20px !important; }
}


/* ---------- conteneur : la bande de contenu du site (1140 px) ---------- */
.hvt-outer { width: 100%; }
.hvt-wrap { max-width: var(--hvt-band, 1140px); margin: 0 auto; padding: 0 var(--hvt-pad, 20px); box-sizing: border-box; }

/* =====================================================================
   BANDEAU
   ===================================================================== */
/* bandeau : pleine largeur (bord à bord), fond très légèrement teinté,
   dans les tons du site (gris bleu clair) */
.hvt-hero {
	margin: 0;
	padding: 14px 0 44px;
	border-radius: 0;
	border-bottom: 1px solid #dde6ec;
	background: linear-gradient(135deg, #eef4f7 0%, #eaf0f6 55%, #f3f7fa 100%);
	width: 100%;
}
.hvt-hero .hvt-wrap { max-width: var(--hvt-band, 1140px); margin: 0 auto; padding: 0 var(--hvt-pad, 20px); box-sizing: border-box; }
.hvt-crumbs { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 16px; font-family: var(--hvt-font-body); font-size: 13px; font-weight: 600; line-height: 20px; }
body.hvt-post .hvt-crumbs,
body.hvt-post .hvt-crumbs a { color: #9f9fa2 !important; text-decoration: none; }
body.hvt-post .hvt-crumbs a:hover { color: var(--hvt-accent-dark) !important; }
.hvt-crumbs .hvt-sep { margin: 0 6px; opacity: .75; }
.hvt-crumbs span[aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 480px; }

.hvt-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; }
body.hvt-post h1.hvt-title { margin: 0 0 14px; font-family: var(--hvt-font-title) !important; font-size: 32px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0; color: #090c14 !important; }
body.hvt-post .hvt-desc { margin: 0 0 20px; font-family: var(--hvt-font-title) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #54545c !important; }
.hvt-cover { margin: 0; }
/* La vignette garde SON ratio : le cadre du bandeau s'adapte à l'image
   (plus de recadrage). Hauter plafonnée pour que le bandeau ne prenne jamais
   toute la hauteur de l'écran : 460 px et 52 % de la fenêtre au maximum. */
.hvt-cover img { display: block; width: 100%; height: auto; min-height: 200px; max-height: min(460px, 52vh); object-fit: cover; border-radius: 0; }
/* Image verticale (portrait) : la colonne de droite est nettement rétrécie —
   l'image garde tout son cadrage et le bandeau reste bas. La classe est posée
   par le script du plugin. */
body.hvt-post .hvt-hero-grid.hvt-cover-portrait { grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.6fr); }

/* bouton d'appel à l'action (même style que la page de référence) */
.hvt-cta a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; box-sizing: border-box; padding: 0 22px; border-radius: 8px; background: var(--hvt-ink-strong); color: #ffffff !important; font-family: var(--hvt-font-title) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 22px !important; text-decoration: none !important; border: 0; transition: background .2s ease, transform .2s ease; }
.hvt-cta a:hover { background: #1f2430; color: #ffffff !important; transform: translateY(-1px); }
.hvt-cta a svg { width: 14px; height: 14px; }
.hvt-tip { margin: 12px 0 0; font-family: var(--hvt-font-title); font-size: 14px; line-height: 20px; color: #7d7d85; }

body.hvt-post .hvt-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 14px 0 0; font-family: var(--hvt-font-title) !important; font-size: 13px !important; line-height: 20px !important; color: #7d7d85 !important; }
body.hvt-post .hvt-meta a { color: #7d7d85 !important; text-decoration: none; }
body.hvt-post .hvt-meta a:hover { color: var(--hvt-accent-dark) !important; }
.hvt-meta span + span::before { content: '·'; margin: 0 8px; }

/* =====================================================================
   CORPS : rail de partage + colonne de lecture
   ===================================================================== */
/* Les trois colonnes occupent toute la bande : rail de partage, colonne de
   lecture (elle s'élargit avec l'écran), colonne de droite. L'ensemble est
   donc centré, sans décalage vers la droite ni marge perdue sur la gauche. */
.hvt-body {
	margin-top: 30px;
	display: grid;
	grid-template-columns: var(--hvt-share-w, 48px) minmax(0, 1fr) var(--hvt-side-w, 340px);
	column-gap: var(--hvt-gap, 60px);
	align-items: start;
	justify-content: center;
	width: 100%;
}
.hvt-share { position: sticky; top: var(--hvt-sticky-top, 170px); width: var(--hvt-share-w, 44px); }
.hvt-share-list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.hvt-share-list a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #f2f6fa; color: #6b7480; text-decoration: none; transition: background .25s ease, color .25s ease; }
.hvt-share-list a:hover { background: var(--hvt-brand); color: #1c1c1c; }
.hvt-share-list svg { width: 16px; height: 16px; fill: currentColor; }
/* la largeur de la colonne de lecture est donnée par la grille (elle suit la
   largeur de la bande), plus par une valeur figée */
.hvt-article { max-width: 100%; overflow: hidden; }

body.hvt-post .hvt-article { font-family: var(--hvt-font-body) !important; }
body.hvt-post .hvt-article > *:first-child { margin-top: 0; }
/* Typographie de lecture : mêmes valeurs que les pages du site
   (texte 16 px / interligne 24 px, titres 600). */
body.hvt-post .hvt-article p { margin: 0; padding-top: 8px; font-family: var(--hvt-font-title) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #54545c !important; }
body.hvt-post .hvt-article h2 { margin: 0; padding-top: 40px; font-family: var(--hvt-font-title) !important; font-size: 26px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #2b2b36 !important; }
body.hvt-post .hvt-article h3 { margin: 0; padding-top: 26px; font-family: var(--hvt-font-title) !important; font-size: 21px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #2b2b36 !important; }
body.hvt-post .hvt-article h4 { margin: 0; padding-top: 20px; font-family: var(--hvt-font-title) !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #2b2b36 !important; }
body.hvt-post .hvt-article a { color: var(--hvt-link) !important; text-decoration: underline; text-underline-offset: 2px; }
body.hvt-post .hvt-article a:hover { color: var(--hvt-accent) !important; }
body.hvt-post .hvt-article strong { color: #2b2b36; font-weight: 700; }
body.hvt-post .hvt-article ul,
body.hvt-post .hvt-article ol { margin: 6px 0 0; padding-left: 26px; }
body.hvt-post .hvt-article li { padding-top: 4px; font-family: var(--hvt-font-title) !important; font-size: 16px !important; line-height: 1.5 !important; color: #54545c !important; }
body.hvt-post .hvt-article ul li::marker { color: var(--hvt-accent); }
body.hvt-post .hvt-article ol li::marker { color: var(--hvt-accent); font-weight: 700; }
/* ⚠ maintheme supprime toutes les puces (« ul { margin:0; padding:0 } » et
   « li { list-style: none } ») : on les rétablit dans la colonne de lecture. */
body.hvt-post .hvt-article ul { list-style: disc outside !important; padding-left: 26px !important; }
body.hvt-post .hvt-article ul ul { list-style: circle outside !important; }
body.hvt-post .hvt-article ul ul ul { list-style: square outside !important; }
body.hvt-post .hvt-article ol { list-style: decimal outside !important; padding-left: 26px !important; }
body.hvt-post .hvt-article li { list-style: inherit !important; }
body.hvt-post .hvt-article li > p:first-child { padding-top: 0; }
/* sommaire et listes d'extensions : on ne remet pas de puces dedans */
body.hvt-post .hvt-article .lwptoc ul,
body.hvt-post .hvt-article .lwptoc li,
body.hvt-post .hvt-article #ez-toc-container ul,
body.hvt-post .hvt-article #ez-toc-container li { list-style: none !important; padding-left: 0 !important; }
body.hvt-post .hvt-article img { width: 100%; height: auto; border-radius: 16px; margin: 24px 0; }
body.hvt-post .hvt-article figure { margin: 24px 0; }
body.hvt-post .hvt-article figcaption { margin-top: 8px; font-family: var(--hvt-font-body); font-size: 13px; color: #7d7d85; text-align: center; }
body.hvt-post .hvt-article blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--hvt-brand); font-family: var(--hvt-font-title); font-size: 16px; color: #54545c; }
body.hvt-post .hvt-article table { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: var(--hvt-font-body); font-size: 15px; }
body.hvt-post .hvt-article th,
body.hvt-post .hvt-article td { border: 1px solid #e4e5e7 !important; padding: 10px 12px !important; text-align: left; color: #54545c; }
body.hvt-post .hvt-article th { background: #f4f5f5 !important; color: #2b2b36 !important; font-weight: 600; }
body.hvt-post .hvt-article table tr:nth-child(even) td { background: #fafbfc; }
/* le thème met le texte du site en graisse 500 : on repasse en 400 dans le tableau */
body.hvt-post .hvt-article td { font-weight: 400; }

/* sommaire (plugin LuckyWP) accordé au style */
body.hvt-post .hvt-article .lwptoc { background: #eef3f8; border: 1px solid #d7e2ec; border-radius: 12px; padding: 18px 22px; margin: 26px 0; font-family: var(--hvt-font-body); }
body.hvt-post .hvt-article .lwptoc .lwptoc_title { font-family: var(--hvt-font-title); font-size: 17px; font-weight: 600; color: #2b2b36; }
body.hvt-post .hvt-article .lwptoc a { color: #54545c !important; text-decoration: none; }
body.hvt-post .hvt-article .lwptoc a:hover { color: var(--hvt-accent-dark) !important; }

/* =====================================================================
   CARTES « articles liés » + bouton de bas de page
   ===================================================================== */
.hvt-cards { margin: 88px 0 0; }
body.hvt-post .hvt-cards h2 { margin: 0 0 18px; font-family: var(--hvt-font-title) !important; font-size: 22px !important; font-weight: 600 !important; line-height: 140% !important; color: #2b2b36 !important; }
.hvt-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, 176px); gap: 20px; }
.hvt-card { display: block; width: 176px; background: #f4f7fb; border-radius: 12px; overflow: hidden; padding-bottom: 12px; text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease; }
.hvt-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(20, 40, 60, .08); }
.hvt-card-img { display: block; width: 176px; height: 117px; object-fit: cover; background: #e8eef5; }
.hvt-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 12px 12px 4px; font-family: var(--hvt-font-body) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 18.2px !important; color: #000 !important; }
.hvt-card-sub { display: block; margin: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--hvt-font-body) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 15.6px !important; color: rgba(28, 40, 61, .5) !important; }
.hvt-footer-cta { margin: 36px 0 0; }

/* =====================================================================
   COLONNE DE DROITE : articles recommandés
   (même principe que la page de référence : 320 px, collante)
   ===================================================================== */
.hvt-recommend { position: sticky; top: var(--hvt-sticky-top, 170px); }
body.hvt-post .hvt-recommend-title { margin: 0 0 16px; font-family: var(--hvt-font-title) !important; font-size: 22px !important; font-weight: 600 !important; line-height: 130% !important; color: #2b2b36 !important; }
.hvt-recommend-list { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.hvt-recommend-list li { margin: 0; }
.hvt-recommend-list a { display: flex; gap: 12px; align-items: flex-start; text-decoration: none !important; }
.hvt-recommend-list img { flex: 0 0 76px; width: 76px; height: 57px; object-fit: cover; border-radius: 8px; background: #e8eef5; }
.hvt-recommend-text { display: block; }
.hvt-recommend-post { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--hvt-font-body) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; color: #16161d !important; }
.hvt-recommend-list a:hover .hvt-recommend-post { color: var(--hvt-accent-dark) !important; }
.hvt-recommend-meta { display: block; margin-top: 4px; font-family: var(--hvt-font-body) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 16px !important; color: #7d7d85 !important; }

/* =====================================================================
   Quand la barre latérale du thème est affichée, la colonne de lecture est
   plus étroite : on adapte les marges et le bandeau.
   ===================================================================== */
body.hvt-post.hvt-with-sidebar .hvt-wrap { max-width: 100%; padding: 0; }
body.hvt-post.hvt-with-sidebar .hvt-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
body.hvt-post.hvt-with-sidebar .hvt-cover { order: -1; }
body.hvt-post.hvt-with-sidebar .hvt-body { grid-template-columns: 44px minmax(0, 1fr); column-gap: 32px; }
body.hvt-post.hvt-with-sidebar .hvt-article { max-width: 100%; }

/* =====================================================================
   Paliers d'écran (identiques à la page de référence)
   ===================================================================== */
@media (max-width: 1520px) {
	body.hvt-post .hvt-article h2 { font-size: 24px !important; font-weight: 600 !important; padding-top: 34px; }
	body.hvt-post .hvt-article h3 { font-size: 19px !important; font-weight: 600 !important; padding-top: 22px; }
}

@media (max-width: 1320px) {
	body.hvt-post {
		--hvt-share-w: 40px;
		--hvt-side-w: 300px;
		--hvt-gap: 40px;
	}
	.hvt-wrap { padding: 0 24px; }
	.hvt-hero .hvt-wrap { padding: 0 24px; }
	.hvt-body { grid-template-columns: 40px minmax(0, 1fr) 300px; column-gap: 40px; }
	.hvt-share { width: 40px; }
	.hvt-share-list { gap: 12px; }
	.hvt-share-list a { width: 40px; height: 40px; border-radius: 6px; }
	.hvt-share-list svg { width: 16px; height: 16px; }
}

@media (max-width: 1024px) {
	.hvt-wrap { padding: 0 40px; }
	.hvt-hero { padding: 14px 0 44px; }
	.hvt-hero .hvt-wrap { padding: 0 40px; }
	body.hvt-post h1.hvt-title { font-size: 27px !important; line-height: 1.35 !important; }
	.hvt-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.hvt-cover { order: -1; }
	.hvt-cover img { max-height: min(360px, 45vh); }
	.hvt-body { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 32px; }
	.hvt-share { position: static; width: auto; margin: 0; }
	.hvt-share-list { flex-direction: row; flex-wrap: wrap; gap: 10px; }
	.hvt-article { max-width: 100%; }
	.hvt-recommend { position: static; }
	.hvt-recommend-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	body.hvt-post .hvt-article h2 { font-size: 21px !important; padding-top: 32px; }
	body.hvt-post .hvt-article h3 { font-size: 18px !important; padding-top: 20px; }
	body.hvt-post .hvt-article p,
	body.hvt-post .hvt-article li { font-size: 16px !important; }
	.hvt-cards-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.hvt-card,
	.hvt-card-img { width: 100%; }
}

@media (max-width: 640px) {
	.hvt-wrap { padding: 0 20px; }
	.hvt-hero { padding: 12px 0 34px; }
	.hvt-hero .hvt-wrap { padding: 0 20px; }
	.hvt-body { margin-top: 22px; }
	body.hvt-post h1.hvt-title { font-size: 23px !important; line-height: 1.35 !important; }
	body.hvt-post .hvt-article h2 { font-size: 19px !important; padding-top: 28px; }
	body.hvt-post .hvt-article h3 { font-size: 17px !important; padding-top: 18px; }
	body.hvt-post .hvt-article p,
	body.hvt-post .hvt-article li { font-size: 15px !important; }
	.hvt-cards { margin-top: 56px; }
	.hvt-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.hvt-cta a { width: 100%; justify-content: center; }
}

/* =====================================================================
   PRIORITÉ — beaucoup de sites ajoutent dans une <style> placée dans le
   corps de la page quelque chose comme :
     article a, .entry-content a, .post-content a {
       color: #0056b3 !important; text-decoration: underline !important; }
   Cette règle arrive APRÈS la feuille du plugin et, à spécificité égale
   (.entry-content a = .hvt-cta a), c'est elle qui gagne : le bouton
   devenait bleu et souligné. On repasse devant avec deux classes.
   ===================================================================== */
body.hvt-post .hvt-cta a { color: #ffffff !important; text-decoration: none !important; }
body.hvt-post .hvt-cta a:hover { color: #ffffff !important; }
body.hvt-post .hvt-cta a svg { stroke: currentColor !important; }
body.hvt-post .hvt-share-list a { color: #6b7480 !important; text-decoration: none !important; }
body.hvt-post .hvt-share-list a:hover { color: #1c1c1c !important; }
body.hvt-post .hvt-share-list svg { fill: currentColor !important; }
body.hvt-post .hvt-card,
body.hvt-post .hvt-card .hvt-card-title,
body.hvt-post .hvt-card .hvt-card-sub { color: #000000 !important; text-decoration: none !important; }
body.hvt-post .hvt-card .hvt-card-sub { color: rgba(28, 40, 61, .5) !important; }
body.hvt-post .hvt-recommend-list a { color: #16161d !important; text-decoration: none !important; }
body.hvt-post .hvt-recommend-list a .hvt-recommend-post { color: #16161d !important; text-decoration: none !important; }
body.hvt-post .hvt-recommend-list a .hvt-recommend-meta { color: #7d7d85 !important; text-decoration: none !important; }
body.hvt-post .hvt-crumbs a { color: #9f9fa2 !important; text-decoration: none !important; }
body.hvt-post .hvt-meta a { color: #7d7d85 !important; text-decoration: none !important; }
body.hvt-post .hvt-article .lwptoc a { text-decoration: none !important; }
body.hvt-post .hvt-article a { text-decoration: underline !important; }

/* =====================================================================
   FENÊTRE DU FORMULAIRE (popup « Request a Quote »)
   ===================================================================== */
.hvt-modal { position: fixed; inset: 0; z-index: 99999; display: none; }
.hvt-modal.is-open { display: block; }
.hvt-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 16, 26, .62); }
.hvt-modal-box {
	position: relative;
	z-index: 1;
	width: calc(100% - 32px);
	max-width: 640px;
	margin: 6vh auto;
	max-height: 88vh;
	overflow: auto;
	padding: 26px 26px 20px;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 24px 60px rgba(10, 20, 40, .28);
	box-sizing: border-box;
}
.hvt-modal-title { margin: 0 0 14px; padding-right: 36px; font-family: var(--hvt-font-title) !important; font-size: 24px !important; font-weight: 700 !important; line-height: 130% !important; color: #222222 !important; }
.hvt-modal-close {
	position: absolute !important; top: 12px !important; right: 12px !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	width: 36px !important; height: 36px !important; padding: 0 !important; margin: 0 !important;
	border: 0 !important; border-radius: 50% !important;
	background: #f2f4f7 !important; color: #4a4f57 !important;
	font-size: 22px !important; line-height: 1 !important; text-align: center !important;
	box-shadow: none !important;
	cursor: pointer; transition: background .2s ease, color .2s ease;
}
/* La croix est dessinée en CSS (deux barres) : ni caractère, ni SVG. Le thème force
   « bouton = fond foncé / texte blanc » et peut toucher les règles SVG, ce qui
   rendait l'icône invisible. Ici tout est explicite. */
.hvt-modal-close .hvt-close-x { position: relative !important; display: block !important; width: 16px !important; height: 16px !important; font-size: 0 !important; line-height: 0 !important; }
.hvt-modal-close .hvt-close-x::before,
.hvt-modal-close .hvt-close-x::after {
	content: '' !important;
	position: absolute !important;
	left: 0 !important; top: 7px !important;
	width: 16px !important; height: 2px !important;
	background: #4a4f57 !important;
	border-radius: 2px !important;
	box-shadow: none !important;
}
.hvt-modal-close .hvt-close-x::before { transform: rotate(45deg) !important; }
.hvt-modal-close .hvt-close-x::after { transform: rotate(-45deg) !important; }
.hvt-modal-close:hover { background: #e4e8ee !important; }
.hvt-modal-close:hover .hvt-close-x::before,
.hvt-modal-close:hover .hvt-close-x::after { background: #1f2329 !important; }
.hvt-modal-close:hover { background: #e4e8ee; color: #1f2329; }
.hvt-modal-body { font-family: var(--hvt-font-body); }
.hvt-modal-body .wpforms-container { margin: 0 !important; }
.hvt-modal-body .wpforms-field { padding: 0 0 12px !important; }
.hvt-modal-body .wpforms-submit-container { padding-top: 4px !important; }
.hvt-modal-fallback { margin: 0; font-size: 15px; color: #54545c; }
html.hvt-modal-open { overflow: hidden; }
@media (max-width: 640px) {
	.hvt-modal-box { width: 100%; margin: 0; min-height: 100%; max-height: 100%; border-radius: 0; padding: 22px 18px; }
}

/* =====================================================================
   FORMULAIRE DE LA FENÊTRE (si le mode « formulaire du plugin » est choisi)
   ===================================================================== */
.hvt-form { margin: 0; font-family: var(--hvt-font-body); }
.hvt-field { margin: 0 0 12px; }
.hvt-field label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; line-height: 18px; color: #3a3f47; }
.hvt-field label span { color: var(--hvt-brand); }
.hvt-field input[type="text"],
.hvt-field input[type="email"],
.hvt-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	border: 1px solid #d8dee7;
	border-radius: 8px;
	background: #ffffff;
	color: #222222;
	font-family: var(--hvt-font-body) !important;
	font-size: 15px !important;
	line-height: 22px !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.hvt-field textarea { resize: vertical; min-height: 96px; }
.hvt-field input:focus,
.hvt-field textarea:focus { outline: none; border-color: var(--hvt-brand); box-shadow: 0 0 0 3px rgba(0, 168, 255, .15); }
.hvt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.hvt-form-actions { margin: 16px 0 0; }
.hvt-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 47px; padding: 0 26px;
	border: 0; border-radius: 8px;
	background: var(--hvt-ink-strong); color: #ffffff;
	font-family: var(--hvt-font-title) !important; font-size: 15px !important; font-weight: 600 !important;
	cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.hvt-submit:hover { background: #1f2430; transform: translateY(-1px); }
.hvt-submit[disabled] { opacity: .6; cursor: default; transform: none; }
.hvt-form-msg { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: #54545c; }
.hvt-form-msg.is-error { color: #c0392b; }
.hvt-form-msg.is-ok { color: #1a8f4a; }

/* =====================================================================
   EN-TÊTE COLLANT
   Sur le site, l'en-tête (Header Footer Elementor) est en position relative.
   Sur les articles seulement, il devient collant : le menu reste à l'écran
   quand on descend dans l'article, comme sur les autres sites du réseau.
   ===================================================================== */
body.hvt-post #masthead,
body.hvt-post header.site-header { position: sticky !important; top: 0 !important; z-index: 999; background: #ffffff; }
body.hvt-post.admin-bar #masthead,
body.hvt-post.admin-bar header.site-header { top: 32px !important; }
@media (max-width: 782px) {
	body.hvt-post.admin-bar #masthead,
	body.hvt-post.admin-bar header.site-header { top: 46px !important; }
}
/* le bandeau reste sous le menu */
body.hvt-post .hvt-hero { position: relative; z-index: 1; }

/* =====================================================================
   LE GABARIT S'AFFRANCHIT DES CONTENEURS DU THÈME
   Le script du plugin ajoute la classe « hvt-article-zone » à tous les
   parents du gabarit (jusqu'à la page). On neutralise ici leur largeur,
   leurs marges, leurs fonds et leur « overflow » : c'est ce qui garantit
   un bandeau bord à bord et des colonnes collantes qui ne sont pas rognées.
   ===================================================================== */
body.hvt-post .hvt-article-zone {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: visible !important;
	border: 0 !important;
	box-shadow: none !important;
}
/* pas de fond parasite (gris/bleu) autour du gabarit : le site est blanc */
body.hvt-post .elementor-location-single,
body.hvt-post .elementor-location-single .e-con,
body.hvt-post .elementor-location-single .e-con-inner,
body.hvt-post .elementor-location-single .elementor-widget-container { background: transparent !important; }
/* la bande de contenu est celle de la page d'accueil (voir --hvt-band) */
body.hvt-post .hvt-wrap { max-width: var(--hvt-band, 1140px); }
/* les trois colonnes occupent toute la bande, donc centrées d'office */
body.hvt-post .hvt-body { justify-content: center; }
/* le modèle ne doit jamais créer de barre de défilement horizontale */
body.hvt-post .hvt-outer,
body.hvt-post .hvt-hero,
body.hvt-post .hvt-hero-grid,
body.hvt-post .hvt-body { max-width: 100%; }
body.hvt-post .hvt-cover img { max-width: 100%; }

/* les paliers d'écran (1320 / 1024 / 640 px) sont définis plus haut. */

/* =====================================================================
   LE WRAPPER DE CONTENU DU THÈME
   maintheme enveloppe le contenu de l'article dans un bloc « .blogcontent ».
   Il n'a ni marge ni fond, mais il impose sa police (Roboto) et sa largeur :
   on le remet à plat pour que la colonne de lecture garde la typographie et
   la largeur du modèle.
   ===================================================================== */
body.hvt-post .hvt-article .blogcontent,
body.hvt-post .elementor-location-single .elementor-widget-theme-post-content .blogcontent {
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--hvt-font-body) !important;
	background: transparent !important;
}
body.hvt-post .elementor-location-single .elementor-widget-theme-post-content { font-family: var(--hvt-font-body); }

/* les champs de la fenêtre de devis (le thème impose sa propre couleur aux
   textes indicatifs) */
body.hvt-post .hvt-field input::placeholder,
body.hvt-post .hvt-field textarea::placeholder { color: #9aa3ad !important; font-size: 15px !important; opacity: 1; }