/* ==========================================================================
   Bihannic Éco — feuille de style unique
   Décors (trames, coins, tracés) en CSS/SVG : aucune image décorative téléchargée.
   ========================================================================== */

:root {
	--rouge: #c4281b;
	--rouge-fonce: #9e1f14;
	--noir: #000;
	--gris: #f5f5f5;
	--gris-ligne: #d9d9d9;
	--texte: #1d1d1b;
	--blanc: #fff;
	--titres: "ff-utility-web-pro", "Montserrat", "Arial Narrow", sans-serif;
	--corps: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--largeur: 1180px;
	--marge: clamp(20px, 5vw, 60px);
	--section: clamp(56px, 8vw, 110px);
	--coin: 12px;
	--coin-decal: -24px;
	--trame: radial-gradient(circle, rgba(0, 0, 0, .09) 1px, transparent 1.4px) 0 0 / 7px 7px;
}
.titres-montserrat { --titres: "Montserrat", system-ui, sans-serif; }

/* Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
	margin: 0;
	font: 400 15px/1.6 var(--corps);
	color: var(--texte);
	background: var(--blanc);
	overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--rouge); text-underline-offset: .18em; }
a:hover { color: var(--rouge-fonce); }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--titres); font-weight: 700; line-height: 1.05; color: var(--noir); margin: 0 0 .6em; }
h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.2vw, 36px); }
h3 { font-size: clamp(21px, 2.2vw, 26px); }
p, ul, ol { margin: 0 0 1em; }
strong { font-weight: 700; }
.icon { width: 1em; height: 1em; flex: none; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lien-evitement { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--noir); color: #fff; padding: 10px 16px; font-weight: 700; }
.lien-evitement:focus { top: 8px; color: #fff; }

/* Bandeau d'info éco ------------------------------------------------------ */
.bandeau-info {
	margin: 0; padding: 4px var(--marge);
	display: flex; justify-content: flex-end; align-items: center; gap: 6px;
	background: var(--gris-ligne); font-size: 11px; color: var(--noir);
}

/* En-tête ---------------------------------------------------------------- */
.entete {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid transparent;
}
.entete__inner {
	max-width: calc(var(--largeur) + 2 * var(--marge)); margin: 0 auto;
	padding: 14px var(--marge);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.entete__logo { color: var(--rouge); display: block; width: clamp(170px, 20vw, 230px); flex: none; }
.entete__logo:hover { color: var(--rouge); }
.logo-svg { display: block; width: 100%; height: auto; }

.navigation { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 36px); }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 2.4vw, 34px); }
.menu > li { position: relative; display: flex; align-items: center; gap: 4px; }
.menu a { color: var(--noir); text-decoration: none; font-weight: 400; font-size: 14px; padding: 8px 0; display: block; }
.menu a:hover, .menu .current-menu-item > a, .menu .current-menu-ancestor > a { color: var(--rouge); }
.menu .current-menu-item > a, .menu .current-menu-ancestor > a { font-weight: 700; }
.sous-menu-toggle { background: none; border: 0; padding: 6px 2px; color: var(--rouge); cursor: pointer; line-height: 0; }
.sous-menu-toggle .icon { width: 10px; height: 6px; transition: transform .2s; }
.ouvert > .sous-menu-toggle .icon { transform: rotate(180deg); }
.sub-menu {
	list-style: none; margin: 0; padding: 10px 0;
	position: absolute; top: 100%; left: -18px; min-width: 210px;
	background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); border-top: 3px solid var(--rouge);
	visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.sub-menu a { padding: 8px 18px; }
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu,
.menu-item-has-children.ouvert > .sub-menu { visibility: visible; opacity: 1; transform: none; }

.entete__tel {
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
	border: 1.5px solid var(--noir); border-radius: 30px; padding: 7px 16px;
	color: var(--rouge); font-weight: 700; font-size: 13px; text-decoration: none;
}
.entete__tel .icon { color: var(--noir); width: 11px; }
.entete__tel:hover { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.entete__tel:hover .icon { color: #fff; }

.menu-toggle { display: none; background: none; border: 0; padding: 12px 6px; cursor: pointer; color: var(--rouge); }
.menu-toggle .icon { width: 24px; height: 24px; }
.menu-toggle__fermer { display: none; }

@media (max-width: 960px) {
	.menu-toggle { display: block; position: relative; z-index: 60; }
	.navigation {
		position: fixed; inset: 0; z-index: 55;
		flex-direction: column; align-items: flex-start; justify-content: center; gap: 32px;
		padding: 90px var(--marge) 40px; background: var(--rouge); overflow-y: auto;
		visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s;
	}
	.menu-ouvert { overflow: hidden; }
	.menu-ouvert .navigation { visibility: visible; opacity: 1; }
	.menu-ouvert .menu-toggle { color: #fff; }
	.menu-ouvert .menu-toggle__ouvrir { display: none; }
	.menu-ouvert .menu-toggle__fermer { display: block; }
	.menu-ouvert .entete__logo { color: #fff; position: relative; z-index: 60; }
	.menu { flex-direction: column; gap: 6px; }
	.menu > li { flex-wrap: wrap; }
	.menu a, .menu a:hover, .menu .current-menu-item > a, .menu .current-menu-ancestor > a { color: #fff; font: 700 28px/1.2 var(--titres); }
	.sous-menu-toggle { color: #fff; }
	.sous-menu-toggle .icon { width: 16px; height: 9px; }
	.sub-menu { position: static; width: 100%; visibility: visible; opacity: 1; transform: none; box-shadow: none; background: none; border: 0; padding: 0 0 8px 16px; display: none; }
	.ouvert > .sub-menu { display: block; }
	.sub-menu a { font-size: 20px !important; padding: 4px 0; }
	.entete__tel { border-color: #fff; color: #fff; font-size: 16px; }
	.entete__tel .icon { color: #fff; }
}

/* Bandeau de page (hero) --------------------------------------------------- */
.hero { background: var(--trame); background-color: #fff; overflow: hidden; }
.hero__inner {
	max-width: calc(var(--largeur) + 2 * var(--marge)); margin: 0 auto;
	padding: clamp(40px, 6vw, 80px) var(--marge) 0;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 60px); align-items: center;
}
.hero__texte { padding-bottom: clamp(32px, 5vw, 70px); }
.hero__titre { margin-bottom: .35em; }
.hero__intro { font-size: clamp(15px, 1.4vw, 17px); max-width: 34em; margin: 0; }
.hero__visuel { position: relative; align-self: end; }
.hero__photo { width: 100%; height: auto; }
.hero-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero--accueil .hero__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.hero--accueil .hero__titre { font-size: clamp(38px, 5.4vw, 64px); }
.hero--sans-image .hero__inner { grid-template-columns: 1fr; padding-bottom: clamp(24px, 4vw, 48px); }
.hero--sans-image .hero__texte { padding-bottom: 0; }
@media (max-width: 782px) {
	.hero__inner { grid-template-columns: 1fr !important; }
	.hero__texte { padding-bottom: 0; }
}

/* Contenu : sections pleine largeur, contenu centré -------------------------- */
.entry-content > * { margin-top: 0; margin-bottom: 0; }
.entry-content > :not(.section):not(.defilant) {
	max-width: calc(var(--largeur) + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge);
}
.section {
	padding: var(--section) max(var(--marge), calc((100% - var(--largeur)) / 2));
	position: relative;
}
.section > * + * { margin-top: clamp(32px, 5vw, 64px); }
.section > h2 + * { margin-top: 0; }
.section > .wp-block-heading { max-width: 26em; }
.fond-gris { background-color: var(--gris); }
.trame { background: var(--trame); background-color: #fff; }
.texte { max-width: 900px; margin-inline: auto; }
.texte > * + * { margin-top: 0; }
.texte h2 { margin-top: 1.4em; font-size: 26px; }
.chapo { font-size: 17px; max-width: 48em; }

/* Colonnes */
.wp-block-columns { display: flex; gap: clamp(32px, 7vw, 100px); align-items: flex-start; }
.wp-block-columns.are-vertically-aligned-center { align-items: center; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-column > :last-child { margin-bottom: 0; }
.activite + .activite { margin-top: clamp(64px, 9vw, 120px); }
@media (max-width: 782px) {
	.wp-block-columns { flex-direction: column; align-items: stretch !important; }
	/* Sur mobile l'image passe toujours au-dessus du texte */
	.wp-block-columns > .wp-block-column:has(> .wp-block-image:only-child) { order: -1; }
	:root { --coin: 8px; --coin-decal: -12px; }
	.section, .hero { overflow-x: clip; }
}

/* Numéro d'activité / d'étape en lettres contour */
.numero {
	font: 700 clamp(64px, 8vw, 110px)/.85 var(--titres);
	color: transparent; -webkit-text-stroke: 2px var(--rouge);
	margin: 0 0 .1em;
}
@supports not (-webkit-text-stroke: 1px red) { .numero { color: var(--rouge); } }

/* Images ------------------------------------------------------------------- */
.wp-block-image { margin: 0; }
.wp-block-image img { width: 100%; height: auto; }
.wp-block-image figcaption { font-size: 12px; margin-top: 8px; color: #555; }

/* Coins rouges (remplacent 4 images PNG) */
[class*="is-style-coin-"] { position: relative; }
[class*="is-style-coin-"]::before,
[class*="is-style-coin-"]::after { content: ""; position: absolute; background: var(--rouge); pointer-events: none; }
.is-style-coin-haut-gauche::before { top: var(--coin-decal); left: var(--coin-decal); width: 55%; height: var(--coin); }
.is-style-coin-haut-gauche::after  { top: calc(-1 * var(--coin-decal)); left: var(--coin-decal); width: var(--coin); height: 50%; }
.is-style-coin-haut-droite::before { top: var(--coin-decal); right: var(--coin-decal); width: 55%; height: var(--coin); }
.is-style-coin-haut-droite::after  { top: calc(-1 * var(--coin-decal)); right: var(--coin-decal); width: var(--coin); height: 50%; }
.is-style-coin-bas-gauche::before  { bottom: var(--coin-decal); left: var(--coin-decal); width: 55%; height: var(--coin); }
.is-style-coin-bas-gauche::after   { bottom: calc(-1 * var(--coin-decal)); left: var(--coin-decal); width: var(--coin); height: 50%; }
.is-style-coin-bas-droite::before  { bottom: var(--coin-decal); right: var(--coin-decal); width: 55%; height: var(--coin); }
.is-style-coin-bas-droite::after   { bottom: calc(-1 * var(--coin-decal)); right: var(--coin-decal); width: var(--coin); height: 50%; }

/* Logos clients */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; }
.logos .wp-block-image img { width: auto; height: 48px; max-width: 170px; object-fit: contain; }

/* Mosaïque photo */
.mosaique { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-block: 0; }
.section.mosaique > * + * { margin-top: 0; }
.mosaique .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; }
.mosaique .wp-block-image:nth-child(even) { transform: translateY(40px); }
.mosaique { padding-bottom: 60px; }
@media (max-width: 782px) { .mosaique { grid-template-columns: repeat(2, 1fr); } }

/* Duo d'images */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.duo .wp-block-image img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Listes à coches */
.is-style-coches { list-style: none; padding: 0; }
.is-style-coches li {
	position: relative; padding-left: 30px; margin-bottom: .55em;
}
.is-style-coches li::before {
	content: ""; position: absolute; left: 0; top: .2em; width: 17px; height: 17px;
	background: var(--rouge);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 17A8.5 8.5 0 1 1 12 .7a1 1 0 0 1-.8 1.9 6.5 6.5 0 1 0 3.8 5.9V8a1 1 0 0 1 2 0v.5A8.5 8.5 0 0 1 8.5 17m0-6c-.3 0-.5-.1-.7-.3L5.5 8.5a1 1 0 0 1 1.4-1.4l1.6 1.5 6.8-6.8a1 1 0 0 1 1.4 1.4l-7.5 7.5c-.2.2-.4.3-.7.3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 17A8.5 8.5 0 1 1 12 .7a1 1 0 0 1-.8 1.9 6.5 6.5 0 1 0 3.8 5.9V8a1 1 0 0 1 2 0v.5A8.5 8.5 0 0 1 8.5 17m0-6c-.3 0-.5-.1-.7-.3L5.5 8.5a1 1 0 0 1 1.4-1.4l1.6 1.5 6.8-6.8a1 1 0 0 1 1.4 1.4l-7.5 7.5c-.2.2-.4.3-.7.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wp-block-list:not(.is-style-coches) { padding-left: 1.2em; }

/* Citation */
.citation { position: relative; padding-left: 64px; font-weight: 700; font-size: 16px; }
.citation::before {
	content: "\201C"; position: absolute; left: 0; top: -.15em;
	font: 700 96px/1 Georgia, serif; color: var(--rouge);
}

/* Boutons ------------------------------------------------------------------ */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }
.wp-block-button__link, .bouton {
	display: inline-flex; align-items: center; gap: 10px;
	border: 2px solid var(--noir); border-radius: 30px; padding: 13px 28px;
	background: transparent; color: var(--rouge); font: 700 15px/1.2 var(--corps);
	text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.wp-block-button__link::before, .bouton::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wp-block-button__link:hover, .bouton:hover { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.is-style-plein .wp-block-button__link { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.is-style-plein .wp-block-button__link:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }

/* Bandeau défilant (texte contour) ---------------------------------------- */
.defilant { overflow: hidden; padding: clamp(20px, 3vw, 36px) 0; }
.defilant__texte {
	display: inline-block; white-space: nowrap; margin: 0; width: max-content;
	font: 700 clamp(32px, 4.5vw, 54px)/1 var(--titres);
	color: transparent; -webkit-text-stroke: 1.5px var(--rouge);
	animation: defilement 45s linear infinite; animation-play-state: paused;
}
.defilant.visible .defilant__texte { animation-play-state: running; }
.defilant:hover .defilant__texte { animation-play-state: paused; }
@keyframes defilement { to { transform: translateX(-50%); } }
@supports not (-webkit-text-stroke: 1px red) { .defilant__texte { color: var(--rouge); } }

/* Cartes (atouts) ---------------------------------------------------------- */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.is-style-carte { background: #fff; padding: 30px 28px; border-top: 5px solid var(--rouge); }
.is-style-carte h3 { font-size: 22px; color: var(--rouge); }
.is-style-carte p { font-size: 14px; margin: 0; }

/* Étapes -------------------------------------------------------------------- */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px; counter-reset: etape; }
.etape { border-left: 2px solid var(--rouge); padding-left: 20px; }
.etape .numero { font-size: 64px; }
.etape h3 { font-size: 22px; }
.etape p, .etape li { font-size: 14px; }

/* Certifications */
.certifications { text-align: center; }
.certifications .wp-block-image img { width: auto; max-height: 130px; margin: 0 auto 16px; }

/* FAQ : accordéon HTML natif (<details>), sans JavaScript ------------------ */
.wp-block-details { border-bottom: 1px solid var(--gris-ligne); }
.faq > h2 + .wp-block-details { border-top: 1px solid var(--gris-ligne); }
.section.faq > .wp-block-details { margin-top: 0; }
.wp-block-details summary {
	list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
	font: 700 17px/1.35 var(--corps); color: var(--noir);
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	font: 400 30px/1 var(--corps); color: var(--rouge); transition: transform .2s;
}
.wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.wp-block-details summary:hover { color: var(--rouge); }
.wp-block-details > :not(summary) { max-width: 60em; }
.wp-block-details[open] > :last-child { padding-bottom: 20px; }

/* Références --------------------------------------------------------------- */
.references { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
.references--defilement {
	grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 320px);
	overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-color: var(--rouge) transparent;
}
.references--defilement > li { scroll-snap-align: start; }
.reference { background: var(--rouge); color: #fff; display: flex; flex-direction: column; }
.reference__photo { aspect-ratio: 6 / 5; background: #ccc; }
.reference__photo img { width: 100%; height: 100%; object-fit: cover; }
.reference__infos { padding: 16px 18px 18px; position: relative; }
.reference__infos::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 34px; height: 34px; border: solid #fff; border-width: 0 5px 5px 0; }
.reference__titre { color: #fff; font-size: 22px; margin: 0 0 6px; }
.reference__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.reference__meta li + li::before { content: "•"; margin-right: 10px; }

/* Coordonnées ---------------------------------------------------------------- */
.coordonnees { list-style: none; padding: 0; margin: 0 0 1.2em; }
.coordonnees li { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-weight: 700; }
.coordonnees .icon { color: var(--rouge); width: 14px; height: 14px; }
.coordonnees a { color: inherit; text-decoration: none; }
.coordonnees a:hover { color: var(--rouge); text-decoration: underline; }

/* Formulaire --------------------------------------------------------------- */
.contact .wp-block-column:has(.formulaire) { flex-grow: 1.4; }
.formulaire { margin-top: 1.5em; }
.formulaire__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.champ { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-weight: 700; font-size: 13px; }
.champ input, .champ textarea {
	font: inherit; color: inherit; width: 100%;
	border: 1px solid #8a8a8a; border-radius: 0; padding: 11px 12px; background: #fff;
}
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--rouge); outline-offset: 0; border-color: var(--rouge); }
.champ--case { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13px; }
.champ--case input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--rouge); }
.champ--case label { font-weight: 400; }
.champ--piege { position: absolute !important; left: -9999px; }
.formulaire__note { font-size: 12px; color: #555; }
.form-message { padding: 14px 18px; font-weight: 700; border-left: 5px solid; }
.form-message--ok { border-color: #2e7d32; background: #edf7ee; }
.form-message--erreur { border-color: var(--rouge); background: #fbeceb; }
@media (max-width: 600px) { .formulaire__grille { grid-template-columns: 1fr; } }

/* Pied de page -------------------------------------------------------------- */
.pied { background: var(--noir); color: #fff; font-size: 14px; }
.pied__inner {
	max-width: calc(var(--largeur) + 2 * var(--marge)); margin: 0 auto;
	padding: 56px var(--marge) 28px;
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px;
}
.pied__logo { color: #fff; width: 220px; display: block; }
.pied__logo:hover { color: #fff; }
.pied .coordonnees { margin: 0; }
.pied .coordonnees li { font-weight: 400; }
.pied__bas {
	width: 100%; border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 20px;
	display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font-size: 12px; color: rgba(255, 255, 255, .75);
}
.pied__bas p { margin: 0; }
.pied__liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied a { color: #fff; }
.pied a:hover { color: #fff; text-decoration-thickness: 2px; }
.pied__credit { margin-left: auto !important; }

/* Liste d'articles (gabarit de secours) */
.liste-articles { padding-block: var(--section); }

/* Projets : carte cliquable + galerie plein écran ---------------------------- */
.reference__lien { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.reference__lien:hover, .reference__lien:focus-visible { color: inherit; }
.reference__photo { position: relative; overflow: hidden; }
.reference__photo img { transition: transform .4s ease; }
.reference__lien:hover .reference__photo img, .reference__lien:focus-visible .reference__photo img { transform: scale(1.04); }
.reference__nb {
	position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px;
	background: rgba(0, 0, 0, .75); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 20px;
}
.reference__nb .icon { width: 14px; height: 12px; }
.reference__infos { flex: 1; }

.galerie-ouverte { overflow: hidden; }
.galerie {
	width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
	background: #0d0d0d; color: #fff; overflow: hidden;
}
.galerie::backdrop { background: #000; }
.galerie[open] { display: grid; grid-template-rows: 1fr auto; }
.galerie__piste {
	display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
	scrollbar-width: none; overscroll-behavior: contain; outline: none;
}
.galerie__piste::-webkit-scrollbar { display: none; }
.galerie__diapo { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: grid; place-items: center; padding: 56px 64px 8px; min-width: 0; }
.galerie__diapo img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; background: #1a1a1a; }
.galerie__barre {
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
	padding: 14px max(20px, 4vw) 18px; border-top: 3px solid var(--rouge); font-size: 14px;
}
.galerie__texte { margin: 0; }
.galerie__texte strong { font: 700 20px/1.2 var(--titres); margin-right: 10px; }
.galerie__legende { color: rgba(255, 255, 255, .75); text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.galerie__compteur { margin: 0; font-weight: 700; white-space: nowrap; }
.galerie__btn {
	position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
	border: 0; border-radius: 50%; background: var(--rouge); color: #fff; cursor: pointer;
}
.galerie__btn svg { width: 16px; height: 16px; }
.galerie__btn:hover { background: var(--rouge-fonce); }
.galerie__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.galerie__fermer { top: 12px; right: 12px; background: transparent; border: 2px solid #fff; }
.galerie__fermer:hover { background: #fff; color: #000; }
.galerie__prec, .galerie__suiv { top: calc(50% - 50px); }
.galerie__prec { left: 12px; }
.galerie__suiv { right: 12px; }
.galerie.au-debut .galerie__prec, .galerie.a-la-fin .galerie__suiv, .galerie.unique .galerie__compteur { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) { .galerie__piste { scroll-behavior: smooth; } }
@media (max-width: 700px) {
	.galerie__diapo { padding: 60px 0 8px; }
	.galerie__prec, .galerie__suiv { width: 40px; height: 40px; top: calc(50% - 60px); }
	.galerie__prec { left: 6px; } .galerie__suiv { right: 6px; }
	.galerie__barre { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Apparition des images au scroll ---------------------------------------------
   100 % CSS (scroll-driven animations) : aucun script, aucune requête, calcul sur le
   compositeur (opacité + transformation). Navigateurs non compatibles ou « animations
   réduites » : images affichées normalement. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.entry-content .wp-block-image:not(.logos .wp-block-image),
		.entry-content .is-style-carte,
		.entry-content .reference,
		.entry-content .etape {
			animation: apparition linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}
		/* Les coins rouges se déploient juste après l'image */
		.entry-content [class*="is-style-coin-"]::before { animation: coin-h linear both; animation-timeline: view(); animation-range: entry 30% entry 90%; }
		.entry-content [class*="is-style-coin-"]::after  { animation: coin-v linear both; animation-timeline: view(); animation-range: entry 30% entry 90%; }
		.is-style-coin-haut-gauche::before, .is-style-coin-bas-gauche::before { transform-origin: left; }
		.is-style-coin-haut-droite::before, .is-style-coin-bas-droite::before { transform-origin: right; }
		.is-style-coin-haut-gauche::after, .is-style-coin-haut-droite::after { transform-origin: top; }
		.is-style-coin-bas-gauche::after, .is-style-coin-bas-droite::after { transform-origin: bottom; }
		.mosaique .wp-block-image:nth-child(even) { animation-name: apparition-decale; }
	}
}
@keyframes apparition { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes apparition-decale { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(40px); } }
@keyframes coin-h { from { transform: scaleX(0); } to { transform: none; } }
@keyframes coin-v { from { transform: scaleY(0); } to { transform: none; } }

/* Préférences de l'utilisateur ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.defilant { overflow: hidden; }
}

/* Impression : uniquement le contenu utile ---------------------------------------- */
@media print {
	.bandeau-info, .entete, .pied, .defilant, .menu-toggle, .hero-trace, .wp-block-buttons, .formulaire, .mosaique { display: none !important; }
	body { font-size: 11pt; color: #000; }
	.section, .hero__inner { padding: 12pt 0 !important; background: none !important; }
	img { max-width: 50% !important; }
	[class*="is-style-coin-"]::before, [class*="is-style-coin-"]::after { display: none; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}