/*
 * GMAT Courtage — mise en page complète des sections (blocs Gutenberg natifs).
 * Padding / gap / bordures / tailles de police volontairement en CSS plutôt qu'en
 * attributs de bloc "style" : ces attributs génèrent un style inline (ou une feuille
 * de style numérotée pour flex/grid) que WordPress compare strictement au HTML
 * enregistré ; l'écart déclenche "Le bloc contient du contenu invalide" dans l'éditeur.
 * En gardant les attributs de bloc minimaux (backgroundColor/textColor/className,
 * qui ne génèrent que des classes) et toute la mise en page ici, l'édition Gutenberg
 * reste fiable tout en gardant un rendu pixel-perfect.
 * Breakpoints : Desktop 1440 (base) / Mobile 390 (@media max-width: 767px).
 */

img { max-width: 100%; }

.wp-block-heading { margin: 0; }
p.wp-block-paragraph { margin: 0; }

/* ---------- Conteneur de section (fond pleine largeur, contenu plafonné à 1200px et centré) ----------
   Technique full-bleed : le fond couvre toute la largeur du viewport, le contenu reste à 1200px
   (largeur de la maquette Figma : 1440 − 2×120 de gouttière) centré, quelle que soit la largeur d'écran.
   À 1440px : padding = 120px, contenu = 1200px (pixel perfect Figma).
   Au-delà : la gouttière grandit pour garder le contenu à 1200px centré (pas d'étirement).
   En dessous de 1240px : gouttière plancher à 20px, le contenu se réduit. */
.hero, .avis, .prestations, .process, .realisations, .faq, .charte, .cta-final, .site-footer {
	padding-left: max(20px, calc((100% - 1200px) / 2));
	padding-right: max(20px, calc((100% - 1200px) / 2));
}
.hero, .avis, .prestations, .process, .realisations, .faq, .charte { padding-top: 72px; padding-bottom: 72px; }
.cta-final { padding-top: 56px; padding-bottom: 56px; }
.site-footer { padding-top: 56px; }
.charte { border-top: 1px solid rgba(0, 0, 0, .2); }

/* ---------- Titres de section ---------- */
.section-title { font-size: 29px; margin-bottom: 10px; }
.section-lead { font-size: 17px; }
.section-intro { margin-bottom: 36px; }
.prestations > .card-grid,
.process > .card-grid,
.realisations > .card-grid { margin-bottom: 36px; }
.process > .section-title,
.realisations > .section-title,
.faq > .section-title,
.charte > .section-title { margin-bottom: 36px; }
.charte > .section-title { margin-bottom: 32px; }
.realisations > .section-title { margin-bottom: 32px; }

/* CTA process centré (comme sur la maquette). */
.process__cta { justify-content: center; }

/* ---------- Boutons ---------- */
.wp-block-button .wp-block-button__link { border-radius: 8px; }
.btn-outline .wp-block-button__link,
.btn-outline-light .wp-block-button__link {
	background-color: transparent !important;
	border: 1.5px solid;
}
.btn-outline .wp-block-button__link { border-color: #1b3a5b; color: #1b3a5b !important; }
.btn-outline-light .wp-block-button__link { border-color: #fff; color: #fff !important; }
.btn-outline .wp-block-button__link:hover { background-color: #1b3a5b !important; color: #fff !important; }
.btn-outline-light .wp-block-button__link:hover { background-color: #fff !important; color: #1b3a5b !important; }

/* ---------- Badge Petit Futé (hero) ---------- */
.badge {
	display: inline-flex;
	width: fit-content;
	padding: 7px 14px;
	border-radius: 20px;
	background: #f28c28;
	font-size: 12.5px;
	font-weight: 500;
}

/* ---------- En-tête ---------- */
/* Maquette : padding 60px, contenu (logo · menu · téléphone · CTA) espacé de 85px.
   Full-bleed : bandeau blanc pleine largeur, contenu plafonné à 1320px centré (60px de gouttière à 1440). */
.site-header {
	padding-block: 18px;
	padding-inline: max(60px, calc((100% - 1320px) / 2));
	border-bottom: 1px solid #e1e7ec;
	column-gap: 85px;
	row-gap: 12px;
	align-items: center;
}
.site-header__logo img { width: 104px; height: 69px; object-fit: cover; }
.site-header__nav { font-size: 14px; font-weight: 500; }
.site-header__nav .wp-block-navigation__container { column-gap: 26px; }
.site-header__call { flex-direction: column; row-gap: 2px; }
.site-header__call-label { font-size: 10px; font-weight: 500; }
.site-header__call-number { font-size: 17px; font-weight: 600; }
.site-header .site-header__cta-mobile.wp-block-buttons { display: none !important; }

/* ---------- Hero ---------- */
/* Espacements internes en flex+gap : fiable et non écrasé par le reset de marges de WordPress. */
.hero { column-gap: 56px; row-gap: 56px; align-items: center; }
.hero__content { flex: 1 1 420px; min-width: 280px; display: flex; flex-direction: column; gap: 22px; }
.hero .badge { align-self: flex-start; }
.hero__title { font-size: 40px; line-height: 1.18; margin: 0; }
.hero__text { font-size: 17px; }
/* Boutons alignés à gauche (le margin-inline:auto que WordPress injecte sur les enfants
   du groupe les centrerait sinon). */
.hero__actions { column-gap: 14px; align-self: flex-start; margin-inline: 0 !important; }
.hero__media {
	flex-shrink: 0;
	width: 520px;
	border-radius: 14px;
	overflow: hidden;
}
.hero__media img { width: 520px; height: 380px; object-fit: cover; display: block; }

/* ---------- Avis clients ---------- */
.avis__intro { font-size: 15px; color: #4d5a6e; margin: 0 auto 28px; max-width: 600px; }
.avis__carousel { column-gap: 10px; align-items: stretch; }
.avis__track { column-gap: 24px; flex: 1; }
.avis-card { flex: 1 1 0; min-width: 0; box-shadow: 0 2px 8px rgba(27, 58, 91, .08); border: 1px solid #e1e7ec; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.avis-card__stars { font-size: 20px; font-weight: 600; }
.avis-card__text { font-size: 13.5px; }
.avis-card__author { column-gap: 10px; align-items: center; font-size: 12.5px; font-weight: 500; }
.avis-card__avatar {
	width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
	background: linear-gradient(135deg, #2e6da4, #1b3a5b);
}
.avis__arrow { display: none; }
.avis__dots { display: none; }

/* ---------- Grilles de cartes (prestations / process / réalisations) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card-grid > * { min-width: 0; }

.prestation-card,
.etape-card { border: 1px solid #e1e7ec; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(27, 58, 91, .08); min-height: 146px; display: flex; flex-direction: column; gap: 12px; }
.prestation-card h3, .etape-card h3 { font-size: 20px; font-weight: 600; }
.prestation-card p, .etape-card p { font-size: 13.5px; }
.prestation-card { position: relative; overflow: hidden; }
.prestation-card__bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: .45; z-index: 0;
}
.prestation-card > :not(.prestation-card__bg) { position: relative; z-index: 1; }

.etape-card__num {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	flex-shrink: 0; align-self: flex-start; font-size: 20px; font-weight: 600;
	/* Annule le padding que WordPress ajoute aux éléments "has-background" (sinon la pastille devient un ovale). */
	padding: 0 !important;
}

.realisation-card { display: flex; flex-direction: column; gap: 12px; }
.realisation-card__img img { width: 100%; height: 240px; object-fit: cover; border-radius: 12px; display: block; }
.realisation-card__title { font-size: 14px; font-weight: 600; }
.realisation-card__link { color: #f28c28; }
.link-arrow { font-size: 14px; font-weight: 600; }
.link-arrow a, .realisation-card__link { color: inherit; }

/* ---------- FAQ (bloc natif Détails) ---------- */
.faq__list { display: flex; flex-direction: column; row-gap: 12px; margin-bottom: 36px; }
/* Les accordéons occupent toute la largeur : on neutralise le margin-inline:auto que
   WordPress injecte sur les enfants d'un groupe "constrained" (sinon ils se réduisent
   à la largeur de leur contenu au lieu de s'étirer à 1200px). */
.faq__list > * { width: 100%; max-width: none; margin-inline: 0; }
.faq-item { background: #fff; border: 1px solid #e1e7ec; border-radius: 10px; padding: 18px 22px; }
.faq-item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-height: 100px; /* question centrée verticalement, comme la maquette (item fermé ~136px) */
	cursor: pointer; list-style: none;
	font-size: 16px; font-weight: 600; color: #1b3a5b;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex-shrink: 0; font-size: 22px; font-weight: 700; color: #f28c28; line-height: 1; }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { margin-top: 10px; font-size: 13.5px; }
.faq__cta { display: flex; gap: 8px; justify-content: center; align-items: center; text-align: center; font-size: 17px; }
.faq__cta-number { color: #f28c28; font-weight: 600; font-size: 20px; }

/* ---------- Charte qualité ---------- */
.charte__grid.wp-block-columns { column-gap: 32px; }
.charte__list { display: flex; flex-direction: column; gap: 14px; }
.charte__list p { font-size: 15px; }
.charte__item { font-size: 13.5px !important; }
.charte__check { color: #f28c28; font-weight: 700; }
.charte__badge-box {
	box-sizing: border-box; /* sinon width:100% + padding 26px deborde le viewport en mobile (32px). */
	flex-basis: 400px;
	border-radius: 14px;
	padding: 26px;
	text-align: center;
}
.charte__badge-box img { width: 163px; height: 163px; object-fit: contain; margin-inline: auto; }
.charte__badge-box p { margin-top: 18px; font-size: 13.5px; }

/* ---------- Bandeau CTA final ---------- */
.cta-final { text-align: center; }
.cta-final > .wp-block-group, .cta-final { max-width: none; }
.cta-final .section-title,
.cta-final > p { max-width: 720px; margin-inline: auto; }
.cta-final .section-title { margin-bottom: 20px; }
.cta-final > p { margin-bottom: 20px; }
.cta-final__actions { gap: 14px; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer__seo { font-size: 13.5px; margin-bottom: 36px; }
/* Maquette : bloc marque à gauche, colonne "Liens utiles" alignée à droite au bord droit. */
.site-footer__cols.wp-block-columns { display: flex; justify-content: space-between; column-gap: 40px; margin-bottom: 36px; }
.site-footer__cols.wp-block-columns .wp-block-column { flex: 0 0 auto; }
.site-footer__col-brand { display: flex; flex-direction: column; gap: 8px; width: 320px; }
.site-footer__brand { font-size: 20px; font-weight: 700; }
.site-footer__tagline { font-size: 12.5px; font-weight: 500; }
.site-footer__line { font-size: 13.5px; }
.site-footer__line--strong { font-weight: 600; }
.site-footer__social { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.site-footer__social svg { width: 18px; height: 18px; flex-shrink: 0; }
.site-footer__col--links { display: flex; flex-direction: column; gap: 10px; text-align: right; }
.site-footer__col-title { font-size: 13px; font-weight: 600; }
.site-footer__col--links p { font-size: 13.5px; }
/* Tous les liens du pied de page en clair (téléphone, e-mail, liens utiles, mentions)
   pour rester lisibles sur le fond marine foncé. Survol orange. */
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #f28c28; }
.site-footer__line a { text-decoration: underline; text-underline-offset: 2px; }
.site-footer__bottom {
	border-top: 1px solid #22384e;
	padding: 18px 0 22px;
	font-size: 12.5px; font-weight: 500;
	column-gap: 12px; row-gap: 8px;
}

/* =====================================================================
   Page « Pourquoi GMAT »
   ===================================================================== */
.pq-content {
	padding-block: 80px;
	padding-inline: max(20px, calc((100% - 1200px) / 2));
	display: flex;
	flex-direction: column;
	gap: 56px;
}
.pq-title { max-width: 980px; margin: 0; }
.pq-row.wp-block-columns { column-gap: 56px; margin: 0; }
.pq-lead { font-size: 20px; font-weight: 600; color: #1b3a5b; line-height: 1.5; margin: 0 0 16px; }
.pq-col-text p { font-size: 15px; line-height: 1.5; }
.pq-col-img .pq-img img { width: 100%; height: 360px; object-fit: cover; border: 1px solid #e1e7ec; border-radius: 14px; display: block; }
/* Mot du dirigeant */
.pq-col-avatar { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pq-avatar img { width: 224px; height: 224px; border-radius: 50%; object-fit: cover; display: block; }
.pq-linkedin { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pq-linkedin a { display: inline-flex; align-items: center; gap: 8px; color: #2e6da4; }
.pq-linkedin__badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; background: #2e6da4; color: #fff; font-size: 12px; font-weight: 700; }
.pq-col-mot { display: flex; flex-direction: column; gap: 10px; }
.pq-mot { font-size: 18px; line-height: 1.5; }
.pq-mot strong { font-weight: 600; }
.pq-signature { margin-top: 8px; }
.pq-signature__name { font-size: 18px; font-weight: 600; color: #1b3a5b; }
.pq-signature__role { font-size: 13.5px; }
.pq-mot-cta { margin-top: 10px; }
/* Encadré informations */
.pq-highlight { border-left: 4px solid #f28c28; border-radius: 14px; padding: 28px 32px !important; }
.pq-highlight__text { font-size: 15px; font-weight: 600; line-height: 1.5; color: #1b3a5b; }

/* =====================================================================
   Page « Services »
   ===================================================================== */
.svc-reassurance {
	padding-block: 0 32px;
	padding-inline: max(20px, calc((100% - 1200px) / 2));
}
.svc-reassurance__list {
	display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: center;
	list-style: none; margin: 0; padding: 0;
}
.svc-reassurance__list li { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; }
/* Coche décorative en CSS (avant : span .svc-check dans un bloc HTML) pour rester en blocs natifs. */
.svc-reassurance__list li::before { content: "\2713"; color: #f28c28; font-weight: 700; }
.svc-check { color: #f28c28; font-weight: 700; }

.svc-avantages, .svc-competences {
	padding-block: 80px;
	padding-inline: max(20px, calc((100% - 1200px) / 2));
	display: flex; flex-direction: column; gap: 36px;
}
.svc-avantages__title { max-width: 1100px; margin: 0; }
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.svc-grid > * { min-width: 0; }
.svc-card {
	border-radius: 14px; padding: 28px !important;
	display: flex; flex-direction: column; gap: 12px;
}
.svc-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 12px; margin: 0;
	background: #fff; box-shadow: 0 2px 6px rgba(27, 58, 91, .08);
}
.svc-card__icon img { width: 24px; height: 24px; display: block; }
.svc-card__title { font-size: 18px; font-weight: 600; color: #1b3a5b; line-height: 1.35; margin: 0; }
.svc-card__text { font-size: 14px; line-height: 1.6; }

/* Photo centrale « chantier » : plafonnée à 1200px (plus d'étirement pleine largeur),
   coins arrondis et cadrage revu (retour client : recadrer la photo centrale). */
.svc-chantier { margin: 8px 0; padding-inline: max(20px, calc((100% - 1200px) / 2)); }
.svc-chantier img { width: 100%; height: 380px; object-fit: cover; object-position: center 38%; border-radius: 16px; display: block; }

.svc-process {
	padding-block: 72px;
	padding-inline: max(20px, calc((100% - 1200px) / 2));
	display: flex; flex-direction: column; gap: 36px;
}
.svc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.svc-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; position: relative; }
.svc-step__num {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: #f28c28; color: #fff; font-size: 18px; font-weight: 700;
}
/* Flèche de liaison entre étapes */
.svc-step:not(:last-child)::after {
	content: '→'; position: absolute; top: 12px; right: -12px;
	color: #f28c28; font-size: 20px; font-weight: 700;
}
.svc-step__title { font-size: 16px; font-weight: 600; color: #1b3a5b; margin: 0; }
.svc-step__text { font-size: 13.5px; line-height: 1.5; }
.svc-process__cta { justify-content: center; }

.svc-competences__intro { font-size: 15px; line-height: 1.5; max-width: 900px; }
.svc-competences__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 32px;
}
.svc-competences__list li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
/* Pastille décorative en CSS (avant : span .svc-dot dans un bloc HTML). */
.svc-competences__list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f28c28; flex-shrink: 0; }
.svc-dot { width: 6px; height: 6px; border-radius: 50%; background: #f28c28; flex-shrink: 0; }
.svc-competences__link a { color: #2e6da4; font-weight: 600; }

/* =====================================================================
   Page « Contact »
   ===================================================================== */
.hero--compact {
	padding-block: 56px;
	padding-inline: max(20px, calc((100% - 1200px) / 2));
	display: flex; flex-direction: column; gap: 12px;
}
.hero--compact .hero__title { margin: 0; }

.ct-section {
	padding-block: 80px;
	padding-inline: max(20px, calc((100% - 1200px) / 2));
}
.ct-grid { display: grid; grid-template-columns: 1fr 480px; gap: 40px; align-items: start; }
.ct-form-card { background: #fff; border: 1px solid #e1e7ec; border-radius: 16px; padding: 32px; box-shadow: 0 2px 8px rgba(27, 58, 91, .06); }
.ct-form-card__title { font-size: 20px; font-weight: 700; color: #1b3a5b; margin: 0 0 24px; }
.ct-form { display: flex; flex-direction: column; gap: 18px; }
.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ct-field { display: flex; flex-direction: column; gap: 6px; }
.ct-field label { font-size: 13px; font-weight: 500; color: #232629; }
.ct-field input, .ct-field select, .ct-field textarea {
	font: inherit; font-size: 14px; color: #232629;
	padding: 12px 14px; border: 1px solid #e1e7ec; border-radius: 8px; background: #fff; width: 100%;
}
.ct-field textarea { resize: vertical; }
.ct-file { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.ct-file label { flex-basis: 100%; }
.ct-file__name { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid #e1e7ec; border-radius: 8px; color: #6b7280; font-size: 14px; }
.ct-file__btn { padding: 12px 20px; border-radius: 8px; background: #fde8d3; color: #d9741a; font-weight: 600; font-size: 14px; cursor: pointer; }
.ct-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ct-submit { align-self: flex-start; padding: 14px 24px; border-radius: 8px; background: #f28c28; color: #fff; font-weight: 600; font-size: 15px; border: 0; cursor: pointer; }
.ct-submit:hover { background: #d9741a; }

/* ---------------------------------------------------------------------
   Formulaires Gravity Forms — habillage aux couleurs GMAT.
   Le contact est dans .ct-form-card (carte blanche) ; l'artisan est
   enveloppé dans .gf-card--artisan (carte blanche sur le bloc marine).
   --------------------------------------------------------------------- */
.gf-card--artisan { background: #fff; border-radius: 16px; padding: 28px; margin-top: 8px; box-shadow: 0 2px 8px rgba(27, 58, 91, .06); }
.gform_wrapper, .gform_wrapper form { margin: 0; }
.gform_wrapper .gform_fields { gap: 18px; }
.gform_wrapper .gfield_label { font-size: 13px; font-weight: 500; color: #232629; margin: 0 0 6px; }
.gform_wrapper .gfield_required { color: #f28c28; }
.gform_wrapper .ginput_container { margin-top: 0; }
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper select,
.gform_wrapper textarea {
	font: inherit; font-size: 14px; color: #232629;
	padding: 12px 14px; border: 1px solid #e1e7ec; border-radius: 8px; background: #fff; width: 100%; box-shadow: none;
}
.gform_wrapper textarea { resize: vertical; min-height: 120px; }
.gform_wrapper input:focus, .gform_wrapper select:focus, .gform_wrapper textarea:focus {
	outline: none; border-color: #f28c28; box-shadow: 0 0 0 3px rgba(242, 140, 40, .15);
}
.gform_wrapper .gfield_description { font-size: 12.5px; color: #6b7280; padding-top: 6px; }
/* Case à cocher consentement */
.gform_wrapper .gfield_checkbox .gchoice { display: flex; align-items: center; gap: 10px; }
.gform_wrapper .gfield_checkbox label { font-size: 13.5px; font-weight: 400; color: #232629; margin: 0; }
/* Champ fichier */
.gform_wrapper .ginput_container_fileupload input[type="file"] { font-size: 13px; color: #6b7280; }
.gform_wrapper .gform_fileupload_multifile .gform_drop_area { border: 1px dashed #cbd6e2; border-radius: 8px; background: #f9fbfc; color: #6b7280; }
.gform_wrapper .gform_button_select_files {
	background: #fde8d3 !important; color: #d9741a !important; border: 0 !important; border-radius: 8px !important;
	font-weight: 600 !important; padding: 10px 18px !important;
}
/* Bouton d'envoi (couleurs forcées : le thème « orbital » de GF a une cascade prioritaire). */
.gform_wrapper .gform_footer { margin: 8px 0 0; padding: 0; }
.gform_wrapper .gform_footer input[type="submit"], .gform_wrapper .gform_footer .gform_button, .gform_wrapper button.gform_button {
	display: inline-block !important; width: auto !important; padding: 14px 24px !important; border-radius: 8px !important;
	background: #f28c28 !important; color: #fff !important; font-weight: 600 !important; font-size: 15px !important; border: 0 !important; cursor: pointer;
}
.gform_wrapper .gform_footer input[type="submit"]:hover, .gform_wrapper .gform_footer .gform_button:hover, .gform_wrapper button.gform_button:hover {
	background: #d9741a !important; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(242, 140, 40, .28);
}
/* Validation & confirmation */
.gform_wrapper .gfield_error input, .gform_wrapper .gfield_error select, .gform_wrapper .gfield_error textarea { border-color: #e05a4f; }
.gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message { color: #e05a4f; font-size: 12.5px; margin-top: 6px; background: none; border: 0; padding: 0; }
.gform_confirmation_message { padding: 18px 20px; background: #eaf3ea; border: 1px solid #bcdcbc; border-radius: 10px; color: #256b2a; font-size: 14.5px; }
.ct-coords__title { font-size: 20px; font-weight: 700; color: #1b3a5b; margin: 0 0 8px; }
.ct-coords__line { font-size: 14px; margin: 0 0 6px; }
.ct-coords__phone { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.ct-coords__phone a { color: #2e6da4; }
.ct-map { border-radius: 14px; overflow: hidden; border: 1px solid #e1e7ec; }
.ct-map iframe { width: 100%; height: 300px; border: 0; display: block; }

.ct-artisans {
	padding-block: 72px;
	padding-inline: max(20px, calc((100% - 1200px) / 2));
}
.ct-artisans__grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.ct-artisans__col { display: flex; flex-direction: column; gap: 16px; color: #fff; }
.ct-artisans__title { font-size: 29px; font-weight: 700; color: #fff; margin: 0; }
.ct-artisans__col p { font-size: 15px; line-height: 1.6; }
.ct-artisans__hint { color: #f4f6f8; font-style: italic; }
.ct-artisans__btn { align-self: flex-start; margin-top: 4px; padding: 14px 24px; border-radius: 8px; background: #f28c28; color: #fff; font-weight: 600; font-size: 15px; }
.ct-artisans__btn:hover { background: #d9741a; color: #fff; }
.ct-dossier { background: #fff; border-radius: 16px; padding: 28px; }
.ct-dossier__title { font-size: 18px; font-weight: 700; color: #1b3a5b; margin: 0 0 14px; }
.ct-dossier__sub { font-size: 14px; font-weight: 600; color: #232629; margin: 0 0 12px; }
.ct-dossier__list { list-style: none; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid #e1e7ec; display: flex; flex-direction: column; gap: 10px; }
.ct-dossier__list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
/* Coche décorative en CSS (avant : span .svc-check dans un bloc HTML). */
.ct-dossier__list li::before { content: "\2713"; color: #f28c28; font-weight: 700; flex-shrink: 0; }
.ct-artisans__col .wp-block-buttons.ct-artisans__btns { align-self: flex-start; margin-top: 4px; }
.ct-dossier__fees { font-size: 15px; font-weight: 700; color: #1b3a5b; margin: 0 0 6px; }
.ct-dossier__delay { font-size: 13.5px; color: #4d5a6e; margin: 0; }

/* =====================================================================
   Pages « Réalisations » et « Actualités » (listings + fiches)
   ===================================================================== */
/* Conteneurs pleine largeur, contenu plafonné à 1200px centré (idem sections accueil). */
.reals-section, .news-section, .guides-section, .press-section,
.single-article {
	padding-inline: max(20px, calc((100% - 1200px) / 2));
}
.reals-section, .news-section, .press-section { padding-block: 64px; }
.guides-section { padding-block: 64px; }
.single-article { padding-block: 48px 72px; }

/* ---------- Barre de filtres (réalisations) ---------- */
.reals-filters { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.reals-filters__selects { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.reals-select { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: #232629; }
.reals-select select {
	font: inherit; font-size: 14px; color: #232629; min-width: 220px;
	padding: 12px 14px; border: 1px solid #e1e7ec; border-radius: 8px; background: #fff; cursor: pointer;
}
.reals-search { position: relative; flex: 1; min-width: 260px; display: flex; }
.reals-search input {
	font: inherit; font-size: 14px; width: 100%;
	padding: 12px 44px 12px 14px; border: 1px solid #e1e7ec; border-radius: 8px; background: #fff;
}
.reals-search button {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	width: 34px; height: 34px; border: 0; border-radius: 7px; background: #f28c28; color: #fff;
	font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.reals-count { font-size: 14px; color: #4d5a6e; margin: 0; }

/* ---------- Grilles de cartes (réalisations + articles) ---------- */
.reals-grid, .news-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.real-card, .news-card {
	display: flex; flex-direction: column; background: #fff;
	border: 1px solid #e1e7ec; border-radius: 14px; overflow: hidden;
	text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s;
}
.real-card:hover, .news-card:hover { box-shadow: 0 10px 26px rgba(27, 58, 91, .12); transform: translateY(-3px); }
.real-card__img, .news-card__img {
	display: block; width: 100%; aspect-ratio: 16 / 10;
	background-size: cover; background-position: center; background-color: #e1e7ec;
}
.real-card__body, .news-card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.real-card__tag, .news-card__tag {
	align-self: flex-start; padding: 5px 12px; border-radius: 20px;
	background: #fde8d3; color: #d9741a; font-size: 12px; font-weight: 600;
}
.real-card__title, .news-card__title { font-size: 17px; font-weight: 600; line-height: 1.35; color: #1b3a5b; }
.real-card__excerpt, .news-card__excerpt { font-size: 14px; line-height: 1.55; color: #4d5a6e; }
.real-card__link, .news-card__link { margin-top: auto; font-size: 14px; font-weight: 600; color: #f28c28; }
.reals-empty { grid-column: 1 / -1; font-size: 15px; color: #4d5a6e; }

/* ---------- Pagination ---------- */
.reals-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.reals-page {
	display: flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px; border-radius: 8px;
	border: 1px solid #e1e7ec; background: #fff; color: #1b3a5b;
	font-size: 14px; font-weight: 600; text-decoration: none;
}
.reals-page:hover { border-color: #f28c28; color: #f28c28; }
.reals-page.is-active { background: #f28c28; border-color: #f28c28; color: #fff; }

/* ---------- Actualités : guides & conseils ---------- */
.guides-cols-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 8px; }
.guides-col__title { font-size: 18px; font-weight: 700; color: #1b3a5b; margin: 0 0 14px; }
.guides-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.guides-list li { padding-left: 16px; position: relative; line-height: 1.45; }
.guides-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #f28c28; }
.guides-list a { font-size: 14.5px; color: #232629; text-decoration: none; }
.guides-list a:hover { color: #2e6da4; }

/* ---------- Actualités : revue de presse ---------- */
.press-intro { font-size: 15px; color: #4d5a6e; margin: 0 auto 32px; max-width: 640px; }
.press-cols.wp-block-columns { gap: 28px; }
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.press-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e1e7ec; border-radius: 14px; padding: 24px; height: 100%; }
.press-card__tag { display: inline-block; align-self: flex-start; background: #fcead5; color: #d9741a; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px; margin: 0 0 12px; }
.press-card__name { font-size: 17px; font-weight: 700; color: #1b3a5b; margin: 0 0 8px; line-height: 1.35; }
.press-card__text { font-size: 14px; line-height: 1.55; color: #4d5a6e; margin: 0; }
.press-card__link { margin: 14px 0 0; font-size: 14px; font-weight: 600; }
.press-card__link a { color: #f28c28; text-decoration: none; }

/* ---------- Fiche (article / réalisation) ---------- */
.single-head { max-width: 1120px; margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* Le layout « constrained » de WordPress ajoute margin-inline:auto aux enfants, ce qui les
   centre dans le conteneur flex. On force l'alignement à gauche (fil d'Ariane, badge, méta). */
.single-head > * { margin-inline: 0 !important; max-width: none; }
.single-breadcrumb { font-size: 13px; color: #6b7280; }
.single-breadcrumb a { color: #2e6da4; text-decoration: none; }
.single-breadcrumb span { color: #b6c0cc; }
.single-breadcrumb__current { color: #6b7280; }
.single-tag { align-self: flex-start; padding: 6px 14px; border-radius: 20px; background: #fde8d3; color: #d9741a; font-size: 12.5px; font-weight: 600; }
.single-title { font-size: 34px; line-height: 1.2; font-weight: 700; color: #1b3a5b; margin: 0; }
.single-meta { font-size: 13.5px; color: #6b7280; margin: 0; }
.single-meta span { color: #b6c0cc; margin: 0 4px; }

.single-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; max-width: 1120px; margin: 40px auto 0; }
.single-main { display: flex; flex-direction: column; gap: 20px; font-size: 15.5px; line-height: 1.7; color: #2b3138; }
.single-main .wp-block-image { margin: 0; }
.single-main .single-hero-img img { width: 100%; border-radius: 14px; display: block; }
.single-main h2 { font-size: 24px; color: #1b3a5b; margin: 18px 0 4px; }
.single-main h3 { font-size: 19px; color: #1b3a5b; margin: 14px 0 2px; }
.single-main p:first-of-type { font-size: 17px; font-weight: 600; color: #1b3a5b; }
.single-main ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

.single-sidebar { position: sticky; top: 24px; }
.single-cta { background: #f4f6f8; border: 1px solid #e1e7ec; border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.single-cta__title { font-size: 18px; font-weight: 700; color: #1b3a5b; margin: 0; }
.single-cta__text { font-size: 14px; line-height: 1.55; color: #4d5a6e; margin: 0; }
.single-cta .btn--primary { align-self: flex-start; margin-top: 4px; padding: 13px 22px; border-radius: 8px; background: #f28c28; color: #fff; font-weight: 600; font-size: 14.5px; text-decoration: none; }
.single-cta .btn--primary:hover { background: #d9741a; }

.single-related { max-width: 1120px; margin: 64px auto 0; padding-top: 48px; border-top: 1px solid #e1e7ec; }
.related-section .section-title { margin-bottom: 28px; }

/* Bloc « Partager » (haut de la sidebar des fiches) — conforme maquette article. */
.single-share { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.single-share__label { font-size: 14px; font-weight: 600; color: #1b3a5b; }
.single-share__links { display: flex; gap: 8px; }
.single-share__btn {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: #f4f6f8; color: #1b3a5b; font-size: 16px; font-weight: 700;
	text-decoration: none; line-height: 1;
}
.single-share__btn:hover { background: #f28c28; color: #fff; }

/* Partage e-mail : menu de choix de messagerie (Gmail, Outlook, Yahoo, app par défaut).
   Menu natif <details> ; n'apparaît que dans l'encart de partage des articles. */
.single-share__mail { position: relative; }
.single-share__mail > summary { list-style: none; cursor: pointer; }
.single-share__mail > summary::-webkit-details-marker { display: none; }
.single-share__mail[open] > summary { background: #f28c28; color: #fff; }
.single-share__mailmenu {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
	display: flex; flex-direction: column; min-width: 190px;
	background: #fff; border: 1px solid #e1e7ec; border-radius: 10px;
	box-shadow: 0 14px 30px rgba(27, 58, 91, .18); overflow: hidden;
}
.single-share__mailmenu a {
	padding: 11px 16px; font-size: 14px; font-weight: 500; color: #1b3a5b;
	text-decoration: none; white-space: nowrap; border-bottom: 1px solid #f0f3f6;
}
.single-share__mailmenu a:last-child { border-bottom: 0; }
.single-share__mailmenu a:hover { background: #fde8d3; color: #d9741a; }

/* Bandeau CTA marine en fin d'article / de fiche réalisation. */
.single-cta-banner {
	max-width: 1120px; margin: 44px auto 0;
	background: #1b3a5b; border-radius: 16px; padding: 34px 36px;
	display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.single-cta-banner__title { font-size: 24px; font-weight: 700; color: #fff; margin: 0; }
.single-cta-banner__text { font-size: 15px; line-height: 1.55; color: #f4f6f8; margin: 0; max-width: 640px; }
.single-cta-banner__btn {
	margin-top: 6px; padding: 13px 24px; border-radius: 8px;
	background: #f28c28; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
}
.single-cta-banner__btn:hover { background: #d9741a; }

/* =====================================================================
   Fiche réalisation (détail projet) — conforme maquette Figma 154:638
   ===================================================================== */
/* La fiche gère ses sections en pleine largeur (hero bleu, bande grise). */
.single-article.single-realisation { padding: 0; }

/* Hero bleu : fil d'Ariane + badge + titre + méta en blanc. */
.real-hero {
	padding-block: 44px 40px;
	padding-inline: max(20px, calc((100% - 1200px) / 2));
	display: flex; flex-direction: column; align-items: flex-start; gap: 13px;
}
.real-hero .single-breadcrumb, .real-hero .single-breadcrumb__current { color: #aebfd0; }
.real-hero .single-breadcrumb a { color: #aebfd0; }
.real-hero .single-breadcrumb a:hover { color: #fff; }
.real-hero .single-breadcrumb span { color: #6b82a0; }
.real-hero .single-tag { text-transform: uppercase; letter-spacing: 1.2px; font-size: 12px; }
.real-hero .single-title { color: #fff; max-width: 1040px; margin: 0; }
.real-hero .single-meta { color: #cbd6e2; }
.real-hero .single-meta span { color: #6b82a0; }

/* Image à la une sous le hero. */
.single-realisation .single-featured { margin-top: 32px; }
.single-realisation .single-featured img { height: 480px; }

/* Encart latéral bleu « Un projet similaire ? » — fond marine #1b3a5b (identique au hero). */
.single-cta--blue { background: #1b3a5b; }
.single-cta--blue .single-cta__title { color: #fff; }
.single-cta--blue .single-cta__text { color: #cbd6e2; }
.single-cta__btn {
	align-self: flex-start; margin-top: 4px; padding: 14px 24px; border-radius: 8px;
	background: #f28c28; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
}
.single-cta__btn:hover { background: #d9741a; }

/* « Découvrez d'autres réalisations » : bande gris clair pleine largeur + cartes portfolio. */
.single-realisation .single-related {
	max-width: none; margin: 56px 0 0; border-top: none;
	padding: 56px max(20px, calc((100% - 1200px) / 2));
	background: #f4f6f8;
}
.single-realisation .related-section { max-width: 1200px; margin: 0 auto; }
.reals-portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.portfolio-card {
	display: flex; flex-direction: column; background: #fff;
	border: 1px solid #e1e7ec; border-radius: 12px; overflow: hidden;
	box-shadow: 0 2px 8px rgba(27, 58, 91, .08); text-decoration: none; color: inherit;
	transition: transform .22s ease, box-shadow .22s ease;
}
.portfolio-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(27, 58, 91, .12); }
.portfolio-card__img { display: block; width: 100%; height: 216px; background-size: cover; background-position: center; background-color: #e1e7ec; }
.portfolio-card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.portfolio-card__badge { align-self: flex-start; padding: 5px 10px; border-radius: 6px; background: #fcead5; color: #f28c28; font-size: 12.5px; font-weight: 600; }
.portfolio-card__title { font-size: 17px; font-weight: 600; line-height: 1.3; color: #1b3a5b; }
.portfolio-card__excerpt { font-size: 13.5px; line-height: 1.5; color: #232629; }
.portfolio-card__link { margin-top: auto; font-size: 14px; font-weight: 600; color: #2e6da4; }
.portfolio-card:hover .portfolio-card__link { color: #f28c28; }

/* Image à la une (fiches article / réalisation, contenu importé). */
.single-featured { max-width: 1120px; margin: 24px auto 0; }
.single-featured img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 14px; display: block; }

/* Galerie avant/après des réalisations (bloc natif dans le contenu) : grille 3 colonnes. */
.single-main .real-galerie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.single-main .real-galerie .wp-block-image { flex: 0 0 calc((100% - 24px) / 3); margin: 0; }
.single-main .real-galerie .wp-block-image img { width: 100%; height: 210px; object-fit: cover; border-radius: 10px; display: block; }

/* =====================================================================
   Formulaire artisans (carte blanche sur le bloc marine de la page Contact)
   ===================================================================== */
.ct-form--artisan {
	background: #fff; border-radius: 16px; padding: 28px; margin-top: 8px;
	box-shadow: 0 2px 8px rgba(27, 58, 91, .06);
	color: #232629; /* le formulaire est dans une colonne à texte blanc : on rétablit un texte foncé lisible sur la carte blanche. */
}

/* =====================================================================
   Micro-animations & effets de survol (modernisation légère, sans surcharge)
   ===================================================================== */
a, .wp-block-button__link, .ct-submit, .ct-file__btn, .reals-page,
.real-card, .news-card, .prestation-card, .svc-card, .press-card, .etape-card, .avis-card {
	transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .2s ease, border-color .2s ease;
}
/* Boutons : léger soulèvement + ombre au survol */
.wp-block-button__link:hover, .ct-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(242, 140, 40, .28); }
.btn-outline .wp-block-button__link:hover, .btn-outline-light .wp-block-button__link:hover { box-shadow: 0 8px 18px rgba(27, 58, 91, .18); }
/* Cartes réalisations / articles : zoom doux du visuel au survol */
.real-card__img, .news-card__img { transition: transform .45s ease; }
.real-card:hover .real-card__img, .news-card:hover .news-card__img { transform: scale(1.06); }
/* Cartes prestations : zoom du visuel de fond */
.prestation-card { overflow: hidden; }
.prestation-card__bg { transition: transform .5s ease; }
.prestation-card:hover .prestation-card__bg { transform: scale(1.07); }
/* Cartes services / presse : soulèvement discret */
.svc-card:hover, .press-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(27, 58, 91, .10); }
/* Champs de formulaire : état de focus soigné */
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus,
.reals-search input:focus, .reals-select select:focus {
	outline: none; border-color: #f28c28; box-shadow: 0 0 0 3px rgba(242, 140, 40, .15);
}
/* Respect des préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
	.real-card:hover .real-card__img, .news-card:hover .news-card__img,
	.prestation-card:hover .prestation-card__bg { transform: none; }
}

/* =====================================================================
   Tablette portrait (768 a 980px) : le site n'a qu'un breakpoint mobile a 767px,
   donc entre 768 et 980 la mise en page desktop s'applique. La grille Contact
   (1fr + colonne fixe 480px) ne tient pas dans cette largeur : on l'empile.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 980px) {
	.ct-grid, .ct-artisans__grid { grid-template-columns: 1fr; }
	.ct-coords, .ct-dossier { max-width: 640px; }
}

/* Tres petits ecrans (<= 360px) : la liste des competences passe sur une colonne.
   Selecteur plus specifique que la regle mobile (.svc-competences__list) pour gagner
   quel que soit l'ordre des media queries. */
@media (max-width: 360px) {
	.svc-competences .svc-competences__list { grid-template-columns: 1fr; }
}

/* =====================================================================
   Mobile — Figma "Accueil — Mobile 390"
   ===================================================================== */
@media (max-width: 767px) {
	.hero, .avis, .prestations, .process, .realisations, .faq, .charte, .cta-final, .site-footer, .pq-content,
	.svc-reassurance, .svc-avantages, .svc-competences, .svc-process,
	.hero--compact, .ct-section, .ct-artisans,
	.reals-section, .news-section, .guides-section, .press-section, .single-article {
		padding-left: 20px; padding-right: 20px;
	}
	.reals-grid, .news-grid, .reals-portfolio { grid-template-columns: 1fr; }
	.reals-filters__selects { flex-direction: column; align-items: stretch; }
	.reals-select select, .reals-search { min-width: 0; width: 100%; }
	.single-body { grid-template-columns: 1fr; gap: 32px; }
	.single-main .real-galerie .wp-block-image { flex-basis: calc((100% - 12px) / 2); }
	.single-main .real-galerie .wp-block-image img { height: 150px; }
	.single-realisation .single-featured img { height: 220px; }
	.real-hero { padding-block: 32px 28px; }
	.single-sidebar { position: static; }
	.single-title { font-size: 25px; }
	.guides-cols-wrap { grid-template-columns: 1fr; }
	.press-cols.wp-block-columns { flex-direction: column; }
	.press-cols .wp-block-column { width: 100%; flex-basis: 100%; }
	.press-grid { grid-template-columns: 1fr; }
	.ct-grid, .ct-artisans__grid { grid-template-columns: 1fr; }
	.ct-form__row { grid-template-columns: 1fr; }
	.ct-artisans__title { font-size: 21px; }
	.svc-avantages, .svc-competences, .svc-process { padding-block: 56px; }
	.svc-chantier img { height: 200px; }
	.svc-grid { grid-template-columns: 1fr; }
	.svc-steps { grid-template-columns: 1fr; gap: 32px; }
	.svc-step:not(:last-child)::after { display: none; }
	.svc-competences__list { grid-template-columns: 1fr 1fr; }
	.pq-content { padding-block: 56px; gap: 40px; }
	.pq-row.wp-block-columns { flex-direction: column; gap: 32px; }
	.pq-col-img, .pq-col-avatar { flex-basis: 100% !important; }
	.pq-mot { font-size: 16px; }
	.section-title,
	.cta-final .section-title { font-size: 21px !important; }
	.hero__title { font-size: 29px !important; }

	/* En-tête mobile (maquette « Accueil — Mobile 390 ») : logo à gauche,
	   bouton « Devis » + burger à droite, sur une seule ligne compacte.
	   !important nécessaire : les classes de layout WP (is-layout-flex) ont une
	   spécificité supérieure et l'emportent sinon sur display/gap/padding. */
	.site-header {
		padding-inline: 20px !important;
		padding-block: 14px !important;
		column-gap: 12px !important;
		row-gap: 0 !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
	}
	.site-header__logo { margin-right: auto; }
	.site-header__logo img { width: 86px; height: auto; }
	/* Masqués en mobile : le bloc « Appelez-nous » et le CTA desktop. */
	.site-header__call { display: none !important; }
	.site-header .wp-block-buttons.site-header__cta { display: none !important; }
	/* Visibles à droite, dans l'ordre : bouton « Devis » puis burger. */
	.site-header .site-header__cta-mobile.wp-block-buttons { display: inline-flex !important; order: 1; margin: 0 0 0 auto !important; }
	.site-header__cta-mobile .wp-block-button__link { padding: 9px 18px; font-size: 14px; }
	.site-header__nav { display: block !important; order: 2; }

	/* Menu burger OUVERT : liste pleine largeur, aérée, aux couleurs du site
	   (le rendu par défaut du bloc Navigation est brut : liens petits en haut à gauche). */
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open { padding: 20px 24px 36px; }
	.site-header__nav .is-menu-open .wp-block-navigation__responsive-container-content { width: 100%; margin-top: 52px; }
	.site-header__nav .is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.site-header__nav .is-menu-open .wp-block-navigation-item { width: 100%; }
	.site-header__nav .is-menu-open .wp-block-navigation-item__content {
		display: block; width: 100%; color: #1b3a5b !important;
		font-size: 19px; font-weight: 600; padding: 16px 2px; border-bottom: 1px solid #e1e7ec;
	}
	.site-header__nav .is-menu-open .wp-block-navigation__responsive-container-close { width: 30px; height: 30px; color: #1b3a5b; top: 22px; right: 22px; }

	/* Hero */
	.hero { flex-direction: column; align-items: stretch; }
	.hero__content { flex-basis: auto; }
	.hero__media { width: 100%; }
	.hero__media img { width: 100%; height: 200px; }
	.hero__actions { flex-direction: column; align-items: stretch; row-gap: 18px; }
	.hero__actions .wp-block-button { width: 100%; }
	.hero__actions .wp-block-button__link { width: 100%; text-align: center; }

	/* Grilles : 1 colonne */
	.card-grid { grid-template-columns: 1fr; }

	/* Avis : carrousel actif */
	.avis__track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
	.avis__track::-webkit-scrollbar { display: none; }
	.avis__track .avis-card { flex: 0 0 100%; scroll-snap-align: start; }
	.avis__arrow {
		display: flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; border-radius: 50%;
		background: #fff; border: 1px solid #e1e7ec; color: #f28c28;
		font-size: 22px; font-weight: 700; flex-shrink: 0;
	}
	.avis__dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
	.avis__dots span { width: 8px; height: 8px; border-radius: 50%; background: #e1e7ec; display: block; }
	.avis__dots span.is-active { width: 9px; height: 9px; background: #f28c28; }

	.charte__grid.wp-block-columns { flex-direction: column; }
	.charte__badge-box { flex-basis: 100%; width: 100%; }

	.cta-final__actions { flex-direction: column; align-items: stretch; width: 100%; }
	.cta-final__actions .wp-block-button,
	.cta-final__actions .wp-block-button__link { width: 100%; text-align: center; }

	.site-footer__cols.wp-block-columns { flex-direction: column; }
	.site-footer__cols .wp-block-column { width: 100%; flex-basis: 100%; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }

	/* Footer mobile : colonnes empilées à GAUCHE, espacements aérés (maquette mobile). */
	.site-footer__seo { margin-bottom: 30px; line-height: 1.6; }
	.site-footer__cols.wp-block-columns { margin-bottom: 30px; row-gap: 38px; }
	.site-footer__cols .wp-block-column,
	.site-footer__col-brand,
	.site-footer__col--links { align-items: flex-start; text-align: left; width: 100%; }
	.site-footer__col-brand { gap: 11px; }
	.site-footer__tagline { margin-bottom: 8px; }
	.site-footer__social { margin-top: 6px; }
	.site-footer__col--links { margin-top: 0; gap: 15px; }
	.site-footer__col-title { margin-bottom: 4px; }
	.site-footer__bottom { align-items: flex-start; text-align: left; margin-top: 10px; padding-top: 24px; row-gap: 10px; line-height: 1.6; }

	/* Réalisation (détail) : marges latérales en mobile (retour client : aucun espace sur les côtés). */
	.single-realisation .single-body,
	.single-realisation .single-related { box-sizing: border-box; padding-left: 20px; padding-right: 20px; }

	/* Article : masquer la colonne latérale (partage + CTA) en mobile ; le bandeau CTA suffit. */
	.single-article:not(.single-realisation) .single-sidebar { display: none; }

	/* Pourquoi GMAT : inverser photo dirigeant et paragraphe en mobile (paragraphe au-dessus, photo en dessous). */
	.pq-row--dirigeant.wp-block-columns { flex-direction: column-reverse; }

	/* Contenu article : rien ne déborde horizontalement de l'écran en mobile. */
	.single-main img, .single-main table, .single-main iframe, .single-main pre { max-width: 100%; height: auto; }
	.single-main { overflow-wrap: break-word; }
}

/* =====================================================================
   Pages légales (mentions légales, CGV, confidentialité, cookies)
   ===================================================================== */
.legal-section {
	padding-block: 64px;
	padding-inline: max(20px, calc((100% - 820px) / 2));
}
.legal-section > *:first-child { margin-top: 0; }
.legal-section .legal-h2, .legal-section h2 { font-size: 20px; font-weight: 700; color: #1b3a5b; margin: 30px 0 8px; }
.legal-section p { font-size: 15.5px; line-height: 1.7; color: #2b3138; margin: 0 0 12px; }
.legal-section ul { padding-left: 20px; display: flex; flex-direction: column; gap: 7px; margin: 0 0 14px; }
.legal-section li { font-size: 15.5px; line-height: 1.6; color: #2b3138; }
.legal-section a { color: #2e6da4; text-decoration: underline; }

/* =====================================================================
   Pages de contenu (gabarit « Page de contenu » : hero + corps lisible).
   Habillage des pages de contenu importées (SEO, presse, services annexes).
   ===================================================================== */
.content-page {
	padding-block: 56px 64px;
	padding-inline: max(20px, calc((100% - 860px) / 2));
}
.content-page > *:first-child { margin-top: 0; }
.content-page h2 { font-size: 24px; font-weight: 700; color: #1b3a5b; line-height: 1.3; margin: 36px 0 12px; }
.content-page h3 { font-size: 20px; font-weight: 700; color: #1b3a5b; line-height: 1.35; margin: 30px 0 10px; }
.content-page h4 { font-size: 17px; font-weight: 600; color: #1b3a5b; margin: 24px 0 8px; }
.content-page p { font-size: 15.5px; line-height: 1.75; color: #2b3138; margin: 0 0 14px; }
.content-page ul, .content-page ol { padding-left: 22px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.content-page li { font-size: 15.5px; line-height: 1.6; color: #2b3138; }
.content-page a { color: #2e6da4; text-decoration: underline; text-underline-offset: 2px; }
.content-page img { max-width: 100%; height: auto; border-radius: 12px; }
.content-page .wp-block-image { margin: 22px 0; }
.content-page strong { color: #1b3a5b; }

/* =====================================================================
   Bouton « retour en haut » (maison, orange) - apparait apres defilement.
   ===================================================================== */
.back-to-top {
	position: fixed; right: 22px; bottom: 22px; z-index: 999;
	width: 52px; height: 52px; border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	background: #f28c28; color: #fff; text-decoration: none;
	box-shadow: 0 8px 20px rgba(242, 140, 40, .35);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #d9741a; transform: translateY(-2px); }
.back-to-top svg { width: 26px; height: 26px; display: block; }
@media (max-width: 767px) {
	.back-to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}

/* ==========================================================================
   Avant / Après des réalisations (deux colonnes, façon site d'origine).
   Généré par inc/before-after.php (filtre render_block sur core/gallery).
   ========================================================================== */
.reals-ba-section { margin: 24px 0 8px; }
.reals-ba {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	align-items: start;
}
.reals-ba__col { display: flex; flex-direction: column; gap: 18px; }
.reals-ba__label {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 14px;
	text-align: center;
	color: #1b3a5b;
	padding-bottom: 8px;
	border-bottom: 2px solid currentColor;
}
.reals-ba__col--apres .reals-ba__label { color: #f28c28; }
.reals-ba__item { margin: 0; }
.reals-ba__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
/* Photos de contexte (ni avant ni après), en pleine largeur sous les colonnes. */
.reals-ba__extra {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 22px;
}
@media (max-width: 600px) {
	.reals-ba { grid-template-columns: 1fr; gap: 30px; }
	.reals-ba__extra { grid-template-columns: 1fr; margin-top: 30px; }
}