/*
Theme Name: B COM INFO
Theme URI: https://www.b-com-info.fr/
Author: B COM INFO
Author URI: https://www.b-com-info.fr/
Description: Thème WordPress sur mesure pour B COM INFO — informatique, réseaux, wifi et vidéosurveillance à Quimper et en Bretagne. Design clair repris des couleurs du logo (bleu marine et rouge), orienté secteurs d'activité (professionnels de santé, TPE/PME/PMI, collectivités, campings), réactivité du support et réalisations.
Version: 2.8.0
Requires at least: 6.1
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bcominfo
Tags: business, technology, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Design tokens — palette issue du logo
   #2c3457 bleu marine · #c61f44 rouge · #615f7d gris-violet
   ========================================================================== */

:root {
	/* Surfaces */
	--bci-bg: #ffffff;
	--bci-bg-alt: #f5f7fb;
	--bci-bg-deep: #2c3457;
	--bci-surface: #ffffff;
	--bci-surface-2: #f0f3f9;
	--bci-border: #e2e6f0;
	--bci-border-strong: #c9d0e2;

	/* Texte */
	--bci-heading: #2c3457;
	--bci-text: #3f4560;
	--bci-text-muted: #64698a;
	--bci-text-dim: #8a8fa8;
	--bci-on-dark: #eef1f8;
	--bci-on-dark-muted: #b6bcd2;

	/* Accents */
	--bci-navy: #2c3457;
	--bci-navy-soft: #3d4772;
	--bci-red: #c61f44;
	--bci-red-dark: #a81639;
	--bci-mauve: #615f7d;
	--bci-green: #1f9d6b;
	--bci-amber: #e0a12a;

	/* Teintes translucides */
	--bci-navy-05: rgba(44, 52, 87, 0.05);
	--bci-navy-10: rgba(44, 52, 87, 0.1);
	--bci-red-08: rgba(198, 31, 68, 0.08);
	--bci-red-20: rgba(198, 31, 68, 0.2);

	/* Typo */
	--bci-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--bci-font-head: "Barlow", var(--bci-font-body);
	--bci-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Layout */
	--bci-container: 1200px;
	--bci-container-narrow: 780px;
	--bci-radius: 12px;
	--bci-radius-lg: 20px;
	--bci-header-h: 84px;

	/* Effets */
	--bci-shadow-sm: 0 2px 8px rgba(44, 52, 87, 0.06);
	--bci-shadow: 0 14px 38px -18px rgba(44, 52, 87, 0.3);
	--bci-shadow-lg: 0 26px 60px -26px rgba(44, 52, 87, 0.38);
	--bci-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--bci-header-h) + 20px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--bci-bg);
	color: var(--bci-text);
	font-family: var(--bci-font-body);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.bci-nav-open {
	overflow: hidden;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

svg {
	display: block;
	max-width: 100%;
}

a {
	color: var(--bci-red);
	text-decoration: none;
	transition: color 0.2s var(--bci-ease);
}

a:hover,
a:focus {
	color: var(--bci-red-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--bci-font-head);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.015em;
	margin: 0 0 0.6em;
	color: var(--bci-heading);
	text-wrap: balance;
}

h1 {
	font-size: clamp(2rem, 4.8vw, 3.3rem);
}

h2 {
	font-size: clamp(1.65rem, 3.4vw, 2.4rem);
}

h3 {
	font-size: clamp(1.15rem, 2vw, 1.4rem);
}

p {
	margin: 0 0 1.15em;
}

ul,
ol {
	padding-left: 1.25em;
}

hr {
	border: 0;
	height: 1px;
	background: var(--bci-border);
	margin: 3rem 0;
}

code,
kbd,
pre {
	font-family: var(--bci-font-mono);
	font-size: 0.9em;
}

pre {
	background: var(--bci-bg-alt);
	border: 1px solid var(--bci-border);
	border-radius: var(--bci-radius);
	padding: 1.25rem;
	overflow-x: auto;
}

blockquote {
	margin: 2rem 0;
	padding: 0.4rem 0 0.4rem 1.5rem;
	border-left: 3px solid var(--bci-red);
	color: var(--bci-text-muted);
	font-style: italic;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2rem;
	font-size: 0.95rem;
}

th,
td {
	border: 1px solid var(--bci-border);
	padding: 0.7rem 0.9rem;
	text-align: left;
}

th {
	background: var(--bci-bg-alt);
	font-family: var(--bci-font-head);
	color: var(--bci-heading);
}

:focus-visible {
	outline: 2px solid var(--bci-red);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: rgba(198, 31, 68, 0.16);
	color: var(--bci-heading);
}

/* Accessibilité */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	/* Au-dessus de l'écran de démarrage : sinon, le premier Tab donne le
	   focus à un lien d'évitement caché derrière le voile. */
	z-index: 10000;
	background: var(--bci-navy);
	color: #fff;
	padding: 0.8rem 1.4rem;
	border-radius: 0 0 10px 10px;
	font-weight: 700;
}

.skip-link:focus {
	top: 0;
	color: #fff;
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.bci-container {
	width: 100%;
	max-width: var(--bci-container);
	margin-inline: auto;
	padding-inline: 24px;
}

.bci-container--narrow {
	max-width: var(--bci-container-narrow);
}

.bci-section {
	position: relative;
	padding-block: clamp(60px, 8.5vw, 112px);
}

.bci-section--alt {
	background: var(--bci-bg-alt);
	border-block: 1px solid var(--bci-border);
}

.bci-section--deep {
	background: var(--bci-bg-deep);
	color: var(--bci-on-dark);
}

.bci-section--deep h2,
.bci-section--deep h3,
.bci-section--deep h4 {
	color: #fff;
}

.bci-section--deep .bci-lead,
.bci-section--deep p {
	color: var(--bci-on-dark-muted);
}

.bci-section__head {
	max-width: 720px;
	margin-bottom: clamp(34px, 4.6vw, 56px);
}

.bci-section__head--center {
	margin-inline: auto;
	text-align: center;
}

.bci-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--bci-font-mono);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bci-red);
	margin-bottom: 0.9rem;
}

.bci-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.bci-section__head--center .bci-eyebrow::before {
	display: none;
}

.bci-section--deep .bci-eyebrow {
	color: #ff8ba6;
}

.bci-lead {
	color: var(--bci-text-muted);
	font-size: clamp(1rem, 1.5vw, 1.12rem);
	margin-bottom: 0;
}

/* ==========================================================================
   4. Boutons
   ========================================================================== */

.bci-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	font-family: var(--bci-font-head);
	font-size: 0.97rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.95rem 1.6rem;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.2s var(--bci-ease), box-shadow 0.25s var(--bci-ease),
		background-color 0.2s var(--bci-ease), border-color 0.2s var(--bci-ease), color 0.2s var(--bci-ease);
	white-space: nowrap;
	text-align: center;
}

.bci-btn:hover {
	transform: translateY(-2px);
}

.bci-btn:active {
	transform: translateY(0);
}

.bci-btn--primary {
	background: var(--bci-red);
	color: #fff;
	box-shadow: 0 8px 20px -10px rgba(198, 31, 68, 0.7);
}

.bci-btn--primary:hover,
.bci-btn--primary:focus {
	background: var(--bci-red-dark);
	color: #fff;
	box-shadow: 0 14px 28px -12px rgba(198, 31, 68, 0.75);
}

.bci-btn--navy {
	background: var(--bci-navy);
	color: #fff;
	box-shadow: 0 8px 20px -10px rgba(44, 52, 87, 0.7);
}

.bci-btn--navy:hover,
.bci-btn--navy:focus {
	background: var(--bci-navy-soft);
	color: #fff;
}

.bci-btn--ghost {
	background: #fff;
	border-color: var(--bci-border-strong);
	color: var(--bci-navy);
}

.bci-btn--ghost:hover,
.bci-btn--ghost:focus {
	border-color: var(--bci-navy);
	background: var(--bci-navy-05);
	color: var(--bci-navy);
}

.bci-section--deep .bci-btn--ghost,
.bci-cta .bci-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.32);
	color: #fff;
}

.bci-section--deep .bci-btn--ghost:hover,
.bci-cta .bci-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
	color: #fff;
}

.bci-btn--sm {
	padding: 0.65rem 1.15rem;
	font-size: 0.87rem;
}

.bci-btn--block {
	width: 100%;
}

.bci-btn__icon {
	width: 17px;
	height: 17px;
	flex: none;
}

.bci-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

.bci-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--bci-font-head);
	font-weight: 600;
	font-size: 0.93rem;
	color: var(--bci-red);
}

.bci-link-arrow svg {
	width: 15px;
	height: 15px;
	flex: none;
	transition: transform 0.25s var(--bci-ease);
}

.bci-link-arrow:hover svg {
	transform: translateX(4px);
}

/* ==========================================================================
   5. En-tête
   ========================================================================== */

.bci-topbar {
	background: var(--bci-navy);
	color: var(--bci-on-dark-muted);
	font-size: 0.82rem;
}

.bci-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 40px;
	flex-wrap: wrap;
}

.bci-topbar__status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--bci-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.bci-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
	animation: bci-pulse 2.4s infinite;
	flex: none;
}

@keyframes bci-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5);
	}
	70% {
		box-shadow: 0 0 0 9px rgba(74, 222, 128, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
	}
}

.bci-topbar__links {
	display: flex;
	align-items: center;
	gap: 1.4rem;
}

.bci-topbar__links a {
	color: var(--bci-on-dark-muted);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.bci-topbar__links a:hover {
	color: #fff;
}

.bci-topbar__links svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.bci-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--bci-border);
	transition: box-shadow 0.3s var(--bci-ease);
}

.bci-header.is-stuck {
	box-shadow: var(--bci-shadow-sm);
}

.bci-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--bci-header-h);
}

.bci-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	flex: none;
}

.bci-brand img {
	max-height: 46px;
	width: auto;
}

.bci-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.bci-brand__name {
	font-family: var(--bci-font-head);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--bci-navy);
}

.bci-brand__name span {
	color: var(--bci-red);
}

.bci-brand__tag {
	font-family: var(--bci-font-body);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: lowercase;
	color: var(--bci-mauve);
}

.bci-nav {
	margin-left: auto;
}

.bci-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
}

.bci-nav li {
	position: relative;
}

.bci-nav a {
	display: block;
	padding: 0.55rem 0.8rem;
	font-family: var(--bci-font-head);
	font-size: 0.94rem;
	font-weight: 500;
	color: var(--bci-navy);
	border-radius: 7px;
	transition: color 0.2s var(--bci-ease), background-color 0.2s var(--bci-ease);
}

.bci-nav a:hover,
.bci-nav .current-menu-item > a,
.bci-nav .current_page_item > a,
.bci-nav .current-menu-ancestor > a {
	color: var(--bci-red);
	background: var(--bci-red-08);
}

/* Sous-menus */
.bci-nav .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 290px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0.45rem;
	background: #fff;
	border: 1px solid var(--bci-border);
	border-radius: var(--bci-radius);
	box-shadow: var(--bci-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s var(--bci-ease), transform 0.2s var(--bci-ease), visibility 0.2s;
}

.bci-nav li:hover > .sub-menu,
.bci-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bci-nav .sub-menu a {
	padding: 0.62rem 0.8rem;
	font-size: 0.88rem;
	white-space: normal;
}

.bci-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 0.45rem;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.7;
}

.bci-header__cta {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex: none;
}

.bci-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	line-height: 1.2;
	font-family: var(--bci-font-head);
	color: var(--bci-navy);
}

.bci-header__phone-icon {
	width: 38px;
	height: 38px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--bci-red-08);
	color: var(--bci-red);
}

.bci-header__phone-icon svg {
	width: 17px;
	height: 17px;
}

.bci-header__phone-text {
	display: flex;
	flex-direction: column;
}

.bci-header__phone small {
	font-size: 0.66rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bci-text-dim);
}

.bci-header__phone strong {
	font-size: 1.04rem;
	font-weight: 700;
}

.bci-burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--bci-border-strong);
	border-radius: 9px;
	cursor: pointer;
	position: relative;
	flex: none;
}

.bci-burger span {
	position: absolute;
	left: 12px;
	width: 20px;
	height: 2px;
	background: var(--bci-navy);
	border-radius: 2px;
	transition: transform 0.28s var(--bci-ease), opacity 0.2s var(--bci-ease);
}

.bci-burger span:nth-child(1) {
	top: 15px;
}

.bci-burger span:nth-child(2) {
	top: 21px;
}

.bci-burger span:nth-child(3) {
	top: 27px;
}

.bci-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.bci-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.bci-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.bci-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(58px, 8vw, 104px);
	background: linear-gradient(180deg, #fbfcfe 0%, #f2f5fb 100%);
	border-bottom: 1px solid var(--bci-border);
}

.bci-hero__grid-bg {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(44, 52, 87, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(44, 52, 87, 0.045) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 75%);
	pointer-events: none;
}

.bci-hero::after {
	content: "";
	position: absolute;
	top: -140px;
	right: -120px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(198, 31, 68, 0.07) 0%, transparent 66%);
	pointer-events: none;
}

.bci-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	gap: clamp(36px, 5vw, 64px);
	align-items: center;
}

.bci-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.42rem 0.95rem;
	background: #fff;
	border: 1px solid var(--bci-border-strong);
	border-radius: 999px;
	font-size: 0.79rem;
	font-weight: 500;
	color: var(--bci-navy);
	margin-bottom: 1.4rem;
	box-shadow: var(--bci-shadow-sm);
}

.bci-hero h1 {
	margin-bottom: 1.1rem;
}

.bci-hero h1 em {
	font-style: normal;
	color: var(--bci-red);
}

.bci-hero__text {
	font-size: clamp(1.02rem, 1.6vw, 1.14rem);
	color: var(--bci-text-muted);
	max-width: 52ch;
	margin-bottom: 2rem;
}

.bci-hero__actions {
	margin-bottom: 2.3rem;
}

.bci-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.4rem, 4vw, 3rem);
	padding-top: 1.8rem;
	border-top: 1px solid var(--bci-border-strong);
}

.bci-stat__value {
	display: block;
	font-family: var(--bci-font-head);
	font-size: clamp(1.5rem, 2.6vw, 1.95rem);
	font-weight: 700;
	color: var(--bci-navy);
	line-height: 1.1;
}

.bci-stat__label {
	font-size: 0.83rem;
	color: var(--bci-text-muted);
	line-height: 1.45;
	display: block;
	margin-top: 0.25rem;
}

/* Panneau « supervision » du hero */
.bci-hero__panel {
	background: #fff;
	border: 1px solid var(--bci-border);
	border-radius: var(--bci-radius-lg);
	box-shadow: var(--bci-shadow-lg);
	overflow: hidden;
}

.bci-panel__bar {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.8rem 1.1rem;
	background: var(--bci-navy);
	color: #fff;
}

.bci-panel__bar i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: block;
	background: rgba(255, 255, 255, 0.35);
}

.bci-panel__bar span {
	margin-left: auto;
	font-family: var(--bci-font-mono);
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.72);
}

.bci-panel__body {
	padding: 0.5rem;
}

.bci-panel__row {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 0.9rem;
	border-radius: 10px;
	transition: background-color 0.2s var(--bci-ease);
}

.bci-panel__row + .bci-panel__row {
	border-top: 1px solid var(--bci-border);
}

.bci-panel__row:hover {
	background: var(--bci-bg-alt);
}

.bci-panel__icon {
	width: 38px;
	height: 38px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: var(--bci-navy-05);
	color: var(--bci-navy);
}

.bci-panel__icon svg {
	width: 18px;
	height: 18px;
}

.bci-panel__label {
	font-family: var(--bci-font-head);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--bci-heading);
	display: block;
}

.bci-panel__meta {
	font-family: var(--bci-font-mono);
	font-size: 0.71rem;
	color: var(--bci-text-dim);
}

.bci-panel__state {
	margin-left: auto;
	font-family: var(--bci-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bci-green);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: none;
}

.bci-panel__state i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	display: block;
	flex: none;
}

/* Bandeau de mots-clés */
.bci-marquee {
	border-bottom: 1px solid var(--bci-border);
	background: #fff;
	overflow: hidden;
	padding-block: 0.95rem;
}

.bci-marquee__track {
	display: flex;
	gap: 2.8rem;
	width: max-content;
	animation: bci-scroll 40s linear infinite;
}

.bci-marquee:hover .bci-marquee__track {
	animation-play-state: paused;
}

.bci-marquee__item {
	font-family: var(--bci-font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bci-text-dim);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
}

.bci-marquee__item::before {
	content: "";
	width: 5px;
	height: 5px;
	background: var(--bci-red);
	border-radius: 50%;
	opacity: 0.55;
	flex: none;
}

@keyframes bci-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Bandeau défilant des marques installées */
.bci-brands {
	background: #fff;
	border-bottom: 1px solid var(--bci-border);
	padding-block: 1.6rem 1.9rem;
	overflow: hidden;
}

.bci-brands__intro {
	margin: 0 0 1.1rem;
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bci-text-dim);
}

/* Dégradés latéraux : les logos entrent et sortent en fondu. */
.bci-brands__viewport {
	position: relative;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bci-brands__track {
	display: flex;
	align-items: center;
	gap: clamp(2.2rem, 5vw, 4rem);
	width: max-content;
	animation: bci-scroll 46s linear infinite;
}

.bci-brands:hover .bci-brands__track {
	animation-play-state: paused;
}

/* Second bandeau, au milieu de la page : mêmes codes, sens de défilement
   inverse et fond légèrement teinté, pour qu'il se lise comme un écho du
   premier et non comme une répétition. */
.bci-brands--alt {
	background: var(--bci-bg-alt);
	border-top: 1px solid var(--bci-border);
	border-bottom: 1px solid var(--bci-border);
	padding-block: 1.35rem;
}

.bci-brands--alt .bci-brands__track {
	animation-duration: 58s;
	animation-direction: reverse;
}

.bci-brands__item {
	display: grid;
	place-items: center;
	height: 52px;
	flex: none;
}

.bci-brands__item img {
	max-height: 52px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.3s var(--bci-ease), opacity 0.3s var(--bci-ease);
}

.bci-brands__item:hover img {
	filter: none;
	opacity: 1;
}

/* Marques citées en toutes lettres, sans logo. */
.bci-brands__item--text {
	height: auto;
	font-family: var(--bci-font-head);
	font-size: clamp(1.05rem, 1.9vw, 1.35rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--bci-navy);
	opacity: 0.55;
	white-space: nowrap;
	transition: opacity 0.25s var(--bci-ease), color 0.25s var(--bci-ease);
}

.bci-brands__item--text:hover {
	opacity: 1;
	color: var(--bci-red);
}

/* Mots-clés de repli : plus discrets, en petites capitales. */
.bci-brands__item--keyword {
	height: auto;
	font-family: var(--bci-font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bci-text-dim);
	white-space: nowrap;
}

.bci-brands__item--keyword::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 0.7rem;
	vertical-align: middle;
	background: var(--bci-red);
	border-radius: 50%;
	opacity: 0.55;
}

@media (max-width: 680px) {
	.bci-brands__item,
	.bci-brands__item img {
		height: 40px;
		max-height: 40px;
	}

	.bci-brands__item img {
		max-width: 130px;
	}
}

/* ==========================================================================
   7. Cartes & grilles
   ========================================================================== */

.bci-grid {
	display: grid;
	gap: 22px;
}

.bci-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bci-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bci-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Rangée centrée : utile quand le nombre de cartes ne tombe pas juste
   (cinq prestations s'affichent en 3 + 2 centrées plutôt qu'en 4 + 1). */
.bci-grid--flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.bci-grid--flex > * {
	flex: 1 1 320px;
	max-width: 372px;
}

.bci-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 26px;
	background: #fff;
	border: 1px solid var(--bci-border);
	border-radius: var(--bci-radius);
	overflow: hidden;
	transition: transform 0.3s var(--bci-ease), border-color 0.3s var(--bci-ease), box-shadow 0.3s var(--bci-ease);
}

.bci-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--bci-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--bci-ease);
}

.bci-card:hover {
	transform: translateY(-4px);
	border-color: var(--bci-border-strong);
	box-shadow: var(--bci-shadow);
}

.bci-card:hover::before {
	transform: scaleX(1);
}

.bci-card__icon {
	width: 50px;
	height: 50px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: var(--bci-navy);
	color: #fff;
	margin-bottom: 1.3rem;
	flex: none;
}

.bci-card__icon svg {
	width: 23px;
	height: 23px;
}

.bci-card h3 {
	margin-bottom: 0.6rem;
	font-size: 1.14rem;
}

.bci-card p {
	color: var(--bci-text-muted);
	font-size: 0.94rem;
	margin-bottom: 1.15rem;
}

/* Intertitre qui annonce la liste : « Prestations », « Matériel et
   configuration »… Il évite que l'énumération arrive sans prévenir. */
.bci-card__label {
	margin: 0 0 0.6rem;
	font-family: var(--bci-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bci-text-dim);
}

.bci-card__label::after {
	content: " :";
}

.bci-card__list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.3rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

/* Mention détachée en pied de carte, séparée de la liste. */
.bci-card__note {
	margin: 0 0 1.3rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--bci-border);
	font-size: 0.88rem;
	color: var(--bci-text-muted);
}

.bci-card__list li {
	position: relative;
	padding-left: 1.4rem;
	font-size: 0.9rem;
	color: var(--bci-text-muted);
	line-height: 1.5;
}

.bci-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.48em;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--bci-red);
	border-bottom: 2px solid var(--bci-red);
	transform: rotate(45deg) translateY(-1px);
}

.bci-card__foot {
	margin-top: auto;
	padding-top: 0.2rem;
}

/* ==========================================================================
   8. Secteurs d'activité
   ========================================================================== */

.bci-sector {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--bci-radius-lg);
	border: 1px solid var(--bci-border);
	background: #fff;
	padding: 32px 28px;
	overflow: hidden;
	transition: transform 0.3s var(--bci-ease), border-color 0.3s var(--bci-ease), box-shadow 0.3s var(--bci-ease);
}

.bci-sector::after {
	content: "";
	position: absolute;
	top: -70px;
	right: -70px;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(198, 31, 68, 0.07) 0%, transparent 68%);
	transition: transform 0.5s var(--bci-ease);
}

.bci-sector:hover {
	transform: translateY(-4px);
	border-color: var(--bci-border-strong);
	box-shadow: var(--bci-shadow);
}

.bci-sector:hover::after {
	transform: scale(1.35);
}

.bci-sector__num {
	position: relative;
	z-index: 1;
	font-family: var(--bci-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	color: var(--bci-text-dim);
	margin-bottom: 1rem;
}

.bci-sector__icon {
	position: relative;
	z-index: 1;
	width: 46px;
	height: 46px;
	color: var(--bci-red);
	margin-bottom: 1.1rem;
	flex: none;
}

.bci-sector h3,
.bci-sector p,
.bci-sector .bci-tags {
	position: relative;
	z-index: 1;
}

.bci-sector p {
	color: var(--bci-text-muted);
	font-size: 0.94rem;
}

.bci-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: auto;
	padding-top: 0.7rem;
}

.bci-tag {
	font-family: var(--bci-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	padding: 0.32rem 0.7rem;
	border-radius: 999px;
	background: var(--bci-bg-alt);
	border: 1px solid var(--bci-border);
	color: var(--bci-text-muted);
}

a.bci-tag:hover {
	border-color: var(--bci-red);
	color: var(--bci-red);
}

/* ==========================================================================
   8 bis. Labels, certifications et partenaires
   ========================================================================== */

.bci-labels {
	background: var(--bci-bg-alt);
	border-block: 1px solid var(--bci-border);
	padding-block: clamp(48px, 6vw, 80px);
}

/* Flex plutôt que grid : la rangée reste centrée et équilibrée
   quel que soit le nombre de badges, y compris avec un seul. */
.bci-labels__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}

.bci-label {
	/* 268 px est la largeur maximale qui laisse les quatre badges sur une
	   seule rangée dans un conteneur de 1200 px moins ses 24 px de marge.
	   Au-delà, le dernier passe seul à la ligne. */
	flex: 0 1 268px;
	min-width: 200px;
}

.bci-label__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	height: 100%;
	min-height: 130px;
	padding: 22px 18px;
	background: #fff;
	border: 1px solid var(--bci-border);
	border-radius: var(--bci-radius);
	text-align: center;
	transition: transform 0.25s var(--bci-ease), border-color 0.25s var(--bci-ease), box-shadow 0.25s var(--bci-ease);
}

a.bci-label__inner:hover {
	transform: translateY(-3px);
	border-color: var(--bci-border-strong);
	box-shadow: var(--bci-shadow);
}

.bci-label__logo {
	display: grid;
	place-items: center;
	width: 100%;
	/* Les canevas sont désormais ajustés au dessin de chaque badge : plus
	   de vide inutile qui rognait l'affichage. Cette hauteur est ce qui
	   rend lisible la ligne « Integrator » du lockup Fortinet, la plus
	   petite mention de tous les badges. */
	height: 76px;
}

.bci-label__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Noir et blanc complet au repos, couleur au survol : c'est ce contraste
	   qui rend l'effet perceptible. La désaturation n'affecte pas la
	   lisibilité des mentions en petit corps, qui sont en noir — c'est la
	   taille d'affichage, corrigée plus haut, qui posait problème.
	   L'opacité reste à 1 : c'est elle, et non le gris, qui délavait le texte. */
	filter: grayscale(1);
	opacity: 1;
	transition: filter 0.3s var(--bci-ease), opacity 0.3s var(--bci-ease);
}

.bci-labels__grid:hover .bci-label__logo img,
.bci-label__inner:hover .bci-label__logo img,
.bci-label__inner:focus-within .bci-label__logo img {
	filter: none;
	opacity: 1;
}

.bci-label__fallback {
	font-family: var(--bci-font-head);
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--bci-navy);
	line-height: 1.25;
}

.bci-label__baseline {
	font-size: 0.76rem;
	line-height: 1.35;
	/* Deux lignes réservées : une légende plus longue que les autres ne
	   décale plus la carte voisine. */
	min-height: 2.7em;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bci-text-muted);
}

/* ==========================================================================
   9. Support / réactivité
   ========================================================================== */

.bci-support {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: clamp(34px, 5vw, 62px);
	align-items: center;
}

.bci-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.bci-steps::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 24px;
	bottom: 24px;
	width: 2px;
	background: linear-gradient(180deg, var(--bci-red), rgba(198, 31, 68, 0.12));
	border-radius: 2px;
}

.bci-step {
	position: relative;
	display: flex;
	gap: 1.15rem;
	padding-bottom: 1.8rem;
}

.bci-step:last-child {
	padding-bottom: 0;
}

.bci-step__num {
	position: relative;
	z-index: 1;
	width: 44px;
	height: 44px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--bci-red);
	font-family: var(--bci-font-head);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--bci-red);
}

.bci-step h4 {
	margin: 0.4rem 0 0.35rem;
	font-family: var(--bci-font-head);
	font-size: 1.05rem;
	color: var(--bci-heading);
}

.bci-step p {
	margin: 0;
	font-size: 0.93rem;
	color: var(--bci-text-muted);
}

.bci-sla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.bci-sla__item {
	padding: 24px 20px;
	background: #fff;
	border: 1px solid var(--bci-border);
	border-radius: var(--bci-radius);
	text-align: center;
	box-shadow: var(--bci-shadow-sm);
}

.bci-sla__value {
	display: block;
	font-family: var(--bci-font-head);
	font-size: clamp(1.7rem, 3.2vw, 2.15rem);
	font-weight: 700;
	color: var(--bci-red);
	line-height: 1.1;
}

.bci-sla__label {
	font-size: 0.84rem;
	color: var(--bci-text-muted);
	margin-top: 0.4rem;
	display: block;
	line-height: 1.45;
}

/* ==========================================================================
   10. Réalisations & témoignages
   ========================================================================== */

.bci-work {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--bci-radius);
	border: 1px solid var(--bci-border);
	background: #fff;
	overflow: hidden;
	transition: transform 0.3s var(--bci-ease), border-color 0.3s var(--bci-ease), box-shadow 0.3s var(--bci-ease);
}

.bci-work:hover {
	transform: translateY(-4px);
	border-color: var(--bci-border-strong);
	box-shadow: var(--bci-shadow);
}

.bci-work__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bci-surface-2);
}

.bci-work__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s var(--bci-ease);
}

.bci-work:hover .bci-work__media img {
	transform: scale(1.05);
}

.bci-work__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgba(44, 52, 87, 0.2);
}

.bci-work__placeholder svg {
	width: 56px;
	height: 56px;
}

.bci-work__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font-family: var(--bci-font-mono);
	font-size: 0.67rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.35rem 0.72rem;
	border-radius: 999px;
	background: var(--bci-navy);
	color: #fff;
}

.bci-work__body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.bci-work__body h3 {
	font-size: 1.06rem;
	margin-bottom: 0.5rem;
}

.bci-work__body h3 a {
	color: inherit;
}

.bci-work__body h3 a:hover {
	color: var(--bci-red);
}

.bci-work__body p {
	font-size: 0.92rem;
	color: var(--bci-text-muted);
	margin-bottom: 1rem;
}

.bci-work__meta {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--bci-font-mono);
	font-size: 0.72rem;
	color: var(--bci-text-dim);
}

.bci-work__meta svg {
	width: 13px;
	height: 13px;
	flex: none;
}

/* Témoignages */
.bci-quote {
	padding: 30px 28px;
	background: #fff;
	border: 1px solid var(--bci-border);
	border-radius: var(--bci-radius);
	display: flex;
	flex-direction: column;
	box-shadow: var(--bci-shadow-sm);
}

.bci-quote__stars {
	display: flex;
	gap: 3px;
	color: var(--bci-amber);
	margin-bottom: 1rem;
}

.bci-quote__stars svg {
	width: 15px;
	height: 15px;
	flex: none;
}

.bci-quote p {
	font-size: 0.97rem;
	color: var(--bci-text);
	margin-bottom: 1.4rem;
}

.bci-quote__author {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding-top: 1rem;
	border-top: 1px solid var(--bci-border);
}

.bci-quote__avatar {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--bci-navy);
	color: #fff;
	font-family: var(--bci-font-head);
	font-weight: 700;
	font-size: 0.92rem;
	text-transform: uppercase;
}

.bci-quote__name {
	display: block;
	font-family: var(--bci-font-head);
	font-weight: 600;
	font-size: 0.93rem;
	color: var(--bci-heading);
}

.bci-quote__role {
	font-size: 0.8rem;
	color: var(--bci-text-dim);
}

/* ==========================================================================
   11. CTA & contact
   ========================================================================== */

.bci-cta {
	position: relative;
	overflow: hidden;
	border-radius: var(--bci-radius-lg);
	background: var(--bci-navy);
	color: var(--bci-on-dark);
	padding: clamp(34px, 4.6vw, 56px);
	display: grid;
	grid-template-columns: 1.3fr 0.7fr;
	gap: clamp(26px, 4vw, 46px);
	align-items: center;
}

.bci-cta::after {
	content: "";
	position: absolute;
	top: -110px;
	right: -80px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(198, 31, 68, 0.34) 0%, transparent 68%);
	pointer-events: none;
}

.bci-cta > * {
	position: relative;
	z-index: 1;
}

.bci-cta h2 {
	color: #fff;
	margin-bottom: 0.7rem;
}

.bci-cta p {
	color: var(--bci-on-dark-muted);
	margin-bottom: 0;
	max-width: 54ch;
}

.bci-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.bci-contact-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(30px, 4vw, 52px);
	align-items: start;
}

.bci-contact-list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.05rem;
}

.bci-contact-list li {
	display: flex;
	gap: 0.95rem;
	align-items: flex-start;
}

.bci-contact-list__icon {
	width: 40px;
	height: 40px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--bci-red-08);
	color: var(--bci-red);
}

.bci-contact-list__icon svg {
	width: 18px;
	height: 18px;
}

.bci-contact-list__label {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bci-text-dim);
	margin-bottom: 0.15rem;
}

.bci-contact-list__value {
	font-family: var(--bci-font-head);
	font-size: 1rem;
	font-weight: 600;
	color: var(--bci-heading);
	line-height: 1.4;
}

.bci-contact-list__value a {
	color: var(--bci-heading);
}

.bci-contact-list__value a:hover {
	color: var(--bci-red);
}

.bci-form-wrap {
	padding: clamp(26px, 3.4vw, 36px);
	background: #fff;
	border: 1px solid var(--bci-border);
	border-radius: var(--bci-radius-lg);
	box-shadow: var(--bci-shadow);
}

.bci-field {
	margin-bottom: 1.05rem;
}

.bci-field label {
	display: block;
	font-family: var(--bci-font-head);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--bci-heading);
	margin-bottom: 0.4rem;
}

.bci-field label .req {
	color: var(--bci-red);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--bci-text);
	background: #fff;
	border: 1px solid var(--bci-border-strong);
	border-radius: 8px;
	transition: border-color 0.2s var(--bci-ease), box-shadow 0.2s var(--bci-ease);
	appearance: none;
}

select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364698a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.95rem center;
	background-size: 17px;
	padding-right: 2.6rem;
}

textarea {
	min-height: 140px;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--bci-red);
	box-shadow: 0 0 0 3px rgba(198, 31, 68, 0.12);
}

::placeholder {
	color: var(--bci-text-dim);
	opacity: 1;
}

.bci-field--check {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.85rem;
	color: var(--bci-text-muted);
	line-height: 1.5;
}

.bci-field--check input {
	width: 17px;
	height: 17px;
	margin-top: 3px;
	flex: none;
	accent-color: var(--bci-red);
}

.bci-form-note {
	font-size: 0.8rem;
	color: var(--bci-text-dim);
	margin: 1rem 0 0;
	text-align: center;
}

.bci-alert {
	padding: 0.9rem 1.1rem;
	border-radius: 8px;
	font-size: 0.9rem;
	margin-bottom: 1.3rem;
	border: 1px solid;
}

.bci-alert--ok {
	background: rgba(31, 157, 107, 0.08);
	border-color: rgba(31, 157, 107, 0.35);
	color: #157a52;
}

.bci-alert--err {
	background: var(--bci-red-08);
	border-color: var(--bci-red-20);
	color: var(--bci-red-dark);
}

/* Bloc horaires */
.bci-hours {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--bci-border);
	border-radius: var(--bci-radius);
	overflow: hidden;
}

.bci-hours li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.72rem 1.1rem;
	font-size: 0.9rem;
	background: #fff;
}

.bci-hours li + li {
	border-top: 1px solid var(--bci-border);
}

.bci-hours strong {
	color: var(--bci-heading);
	font-weight: 600;
}

.bci-hours span {
	font-family: var(--bci-font-mono);
	font-size: 0.83rem;
	color: var(--bci-text-muted);
	/* Aligné à droite : si la valeur passe malgré tout sur deux lignes,
	   la seconde reste dans la même colonne au lieu de repartir à gauche. */
	text-align: right;
}

.bci-hours strong {
	flex: none;
}

.bci-map {
	border-radius: var(--bci-radius);
	overflow: hidden;
	border: 1px solid var(--bci-border);
	line-height: 0;
	margin-top: 1.6rem;
}

.bci-map iframe {
	width: 100%;
	height: 300px;
	border: 0;
}

/* ==========================================================================
   12. Pages internes
   ========================================================================== */

.bci-pagehead {
	position: relative;
	overflow: hidden;
	padding-block: clamp(46px, 6vw, 78px);
	background: linear-gradient(180deg, #fbfcfe 0%, #f2f5fb 100%);
	border-bottom: 1px solid var(--bci-border);
}

.bci-pagehead h1 {
	margin-bottom: 0.5rem;
}

/* --- Écran de démarrage ------------------------------------------------ */

/* Le voile se pose PAR-DESSUS une page déjà complète : le contenu n'est
   jamais masqué, et son effacement est piloté par l'animation CSS. Même
   si le JavaScript échoue, le site réapparaît. */
.bci-splash {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #fff;
	/* Le voile se lève comme un rideau : le site est déjà dessous, on ne
	   fait que le découvrir. Plus franc, et plus court, qu'un fondu. */
	animation: bci-splash-out 0.62s cubic-bezier(0.76, 0, 0.24, 1) 1s forwards;
}

/* Trame de plan, en rappel des bandeaux des pages internes. */
.bci-splash::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(44, 52, 87, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(44, 52, 87, 0.05) 1px, transparent 1px);
	background-size: 46px 46px;
	opacity: 0;
	animation: bci-splash-grid 0.9s var(--bci-ease) forwards;
}

.bci-splash__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Le sigle se dévoile de gauche à droite, comme s'il se traçait. */
.bci-splash__mark {
	display: block;
	clip-path: inset(0 100% 0 0);
	animation: bci-splash-wipe 0.62s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}

.bci-splash__logo {
	display: block;
	width: min(300px, 58vw);
	height: auto;
}

.bci-splash__baseline {
	margin-top: 0.85rem;
	font-family: var(--bci-font-mono);
	font-size: clamp(0.62rem, 1.5vw, 0.74rem);
	letter-spacing: 0.34em;
	text-transform: lowercase;
	color: var(--bci-text-dim);
	opacity: 0;
	transform: translateY(6px);
	animation: bci-splash-fade 0.5s var(--bci-ease) 0.52s forwards;
}

.bci-splash__bar {
	display: block;
	width: min(300px, 58vw);
	height: 3px;
	margin-top: 1.7rem;
	border-radius: 3px;
	background: var(--bci-bg-alt);
	overflow: hidden;
}

.bci-splash__bar i {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--bci-red);
	transform: scaleX(0);
	transform-origin: left center;
	animation: bci-splash-bar 0.95s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

@keyframes bci-splash-wipe {
	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes bci-splash-fade {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bci-splash-grid {
	to {
		opacity: 1;
	}
}

@keyframes bci-splash-bar {
	to {
		transform: scaleX(1);
	}
}

/* Le palier 99 → 100 % ne dure que quelques millisecondes : c'est ce qui
   permet à visibility et pointer-events, propriétés non interpolables,
   de basculer une fois le rideau levé et non au milieu du mouvement. */
@keyframes bci-splash-out {
	0% {
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
	}

	99% {
		transform: translateY(-101%);
		visibility: visible;
		pointer-events: auto;
	}

	100% {
		transform: translateY(-101%);
		visibility: hidden;
		pointer-events: none;
	}
}

/* Page suivante de la même visite : pas de voile du tout. */
.bci-no-splash .bci-splash {
	display: none;
}

/* --- Références clients ------------------------------------------------ */

.bci-clients {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(0.9rem, 1.8vw, 1.4rem);
	margin-top: clamp(2rem, 3.5vw, 3rem);
}

.bci-client {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	flex: 1 1 240px;
	max-width: 320px;
	margin: 0;
	padding: clamp(1.3rem, 2.4vw, 1.9rem) 1.4rem;
	text-align: center;
	background: #fff;
	border: 1px solid var(--bci-border);
	border-radius: var(--bci-radius);
	transition: transform 0.3s var(--bci-ease), border-color 0.3s var(--bci-ease), box-shadow 0.3s var(--bci-ease);
}

.bci-client:hover {
	transform: translateY(-3px);
	border-color: var(--bci-red);
	box-shadow: var(--bci-shadow-sm);
}

.bci-client__name {
	font-family: var(--bci-font-head);
	font-size: clamp(1rem, 1.7vw, 1.15rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--bci-navy);
}

.bci-client__note {
	font-family: var(--bci-font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bci-text-dim);
	border: 0;
	padding: 0;
	margin: 0;
	text-align: center;
}

/* Variante avec logos, le jour où les accords sont obtenus. */
.bci-clients--logos .bci-client {
	min-height: 132px;
}

.bci-client__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 62px;
}

.bci-client__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.72;
	transition: filter 0.3s var(--bci-ease), opacity 0.3s var(--bci-ease);
}

.bci-client:hover .bci-client__logo img {
	filter: grayscale(0);
	opacity: 1;
}

/* --- Images dans le corps des pages ----------------------------------- */

.bci-entry figure,
.bci-entry .wp-block-image,
.editor-styles-wrapper .wp-block-image {
	margin-block: clamp(1.8rem, 3vw, 2.6rem);
}

/* L'arrondi est déjà posé plus bas sur .bci-entry img : ici, l'ombre seule. */
.bci-entry .wp-block-image img,
.bci-entry .wp-block-columns img {
	box-shadow: var(--bci-shadow-sm);
}

.bci-entry .wp-block-columns {
	margin-block: clamp(2rem, 3.5vw, 3rem);
}

/* Les images « pleine largeur » remplissent la colonne de texte sans en
   sortir. Sans cette réinitialisation, le calcul de débordement de
   .alignfull est fait sur la largeur de la fenêtre alors que le contenu
   vit dans une colonne : l'image passerait sous la colonne latérale des
   fiches réalisation et déborderait à gauche. */
.bci-entry .alignwide,
.bci-entry .alignfull {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

/* --- Variante avec photo de fond -------------------------------------- */

.bci-pagehead--photo {
	padding-block: clamp(72px, 9vw, 130px);
	background: var(--bci-navy);
	border-bottom: 0;
}

.bci-pagehead__media,
.bci-pagehead__veil {
	position: absolute;
	inset: 0;
}

.bci-pagehead__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	/* Désature légèrement : la photo devient un décor, pas le sujet. */
	filter: saturate(0.72) contrast(1.05);
}

/* Voile aux couleurs du logo : garantit le contraste du texte
   quelle que soit la photo posée dessus. */
.bci-pagehead__veil {
	background:
		linear-gradient(105deg, rgba(44, 52, 87, 0.94) 0%, rgba(44, 52, 87, 0.82) 46%, rgba(44, 52, 87, 0.68) 100%),
		linear-gradient(180deg, rgba(44, 52, 87, 0.35) 0%, transparent 40%);
}

.bci-pagehead__inner {
	position: relative;
	z-index: 1;
}

.bci-pagehead--photo h1 {
	color: #fff;
	/* Borne la longueur du titre : au-delà, il atteindrait la zone où le
	   voile est le plus clair et le contraste deviendrait insuffisant. */
	max-width: 22ch;
}

.bci-pagehead--photo .bci-lead {
	color: rgba(255, 255, 255, 0.88);
}

.bci-pagehead--photo .bci-breadcrumb,
.bci-pagehead--photo .bci-breadcrumb a {
	color: rgba(255, 255, 255, 0.72);
}

.bci-pagehead--photo .bci-breadcrumb a:hover,
.bci-pagehead--photo .bci-breadcrumb a:focus-visible {
	color: #fff;
}

/* --- Variante illustration -------------------------------------------- */

/* Un peu plus haut que la variante photo : les bandeaux dessinés sont au
   format 2400 × 744, autant en montrer la plus grande partie possible. */
.bci-pagehead--illustration {
	padding-block: clamp(84px, 11vw, 172px);
}

/* Les bandeaux dessinés fournis avec le site portent déjà leurs couleurs
   et leur propre dégradé de lisibilité : ni voile, ni désaturation. */
.bci-pagehead--illustration .bci-pagehead__veil {
	background: none;
}

.bci-pagehead--illustration .bci-pagehead__img {
	filter: none;
}

/* Le liseré rouge est dessiné dans l'image : inutile de le doubler.
   Deux classes pour l'emporter sur la règle ::after de la variante photo,
   quel que soit l'ordre des déclarations. */
.bci-pagehead--photo.bci-pagehead--illustration::after {
	display: none;
}

/* Liseré rouge en bas, rappel de la charte. */
.bci-pagehead--photo::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--bci-red);
	z-index: 2;
}

.bci-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.83rem;
	color: var(--bci-text-dim);
	margin-bottom: 1rem;
}

.bci-breadcrumb a {
	color: var(--bci-text-muted);
}

.bci-breadcrumb a:hover {
	color: var(--bci-red);
}

.bci-breadcrumb__sep {
	opacity: 0.5;
}

.bci-entry {
	font-size: 1.02rem;
}

.bci-entry > * + * {
	margin-top: 1.15em;
}

.bci-entry h2 {
	margin-top: 2.2em;
	margin-bottom: 0.6em;
}

.bci-entry h3 {
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}

.bci-entry ul,
.bci-entry ol {
	color: var(--bci-text-muted);
}

.bci-entry li + li {
	margin-top: 0.4em;
}

.bci-entry img,
.wp-block-image img {
	border-radius: var(--bci-radius);
}

.bci-entry a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.bci-realisation-layout {
	grid-template-columns: 1.4fr 0.6fr;
	gap: clamp(30px, 4vw, 52px);
	align-items: start;
}

.bci-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	font-family: var(--bci-font-mono);
	font-size: 0.78rem;
	color: var(--bci-text-dim);
	margin-bottom: 1.5rem;
}

.bci-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 3rem;
	justify-content: center;
}

.bci-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.bci-pagination .page-numbers,
.bci-pagination > a {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.7rem;
	border-radius: 8px;
	border: 1px solid var(--bci-border-strong);
	background: #fff;
	color: var(--bci-navy);
	font-family: var(--bci-font-head);
	font-size: 0.9rem;
}

.bci-pagination .page-numbers:hover,
.bci-pagination .page-numbers.current,
.bci-pagination > a:hover {
	border-color: var(--bci-red);
	color: var(--bci-red);
	background: var(--bci-red-08);
}

.bci-404 {
	text-align: center;
	padding-block: clamp(64px, 10vw, 128px);
}

.bci-404__code {
	font-family: var(--bci-font-head);
	font-size: clamp(4.5rem, 15vw, 9rem);
	font-weight: 700;
	line-height: 1;
	color: var(--bci-red);
	margin-bottom: 1rem;
}

/* Commentaires */
.bci-comments {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--bci-border);
}

.bci-comments .comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2.5rem;
}

.bci-comments .comment-list li {
	padding: 1.3rem 0;
	border-bottom: 1px solid var(--bci-border);
}

.bci-comments .comment-list .children {
	list-style: none;
	padding-left: 1.6rem;
	margin-top: 1rem;
}

/* ==========================================================================
   13. Pied de page
   ========================================================================== */

.bci-footer {
	background: var(--bci-navy);
	color: var(--bci-on-dark-muted);
	padding-top: clamp(46px, 5.6vw, 72px);
	font-size: 0.92rem;
}

.bci-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: clamp(26px, 3.5vw, 46px);
	padding-bottom: 2.8rem;
}

.bci-footer h4 {
	font-family: var(--bci-font-head);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1.1rem;
}

.bci-footer p {
	color: var(--bci-on-dark-muted);
	font-size: 0.9rem;
}

.bci-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

/* Les lignes non cliquables (adresse, horaires) prennent la même couleur
   que les liens : sur le fond marine, une teinte plus sourde passerait
   sous le seuil de lisibilité. Seul le survol les distingue. */
.bci-footer ul li,
.bci-footer ul a {
	color: var(--bci-on-dark-muted);
	font-size: 0.9rem;
}

.bci-footer ul a:hover {
	color: #fff;
}

/* Le code postal et la ville ne doivent jamais se retrouver
   sur deux lignes différentes. */
.bci-footer__ville {
	display: inline-block;
	white-space: nowrap;
}

.bci-footer__brand {
	margin-bottom: 1rem;
	background: #fff;
	display: inline-block;
	padding: 12px 16px;
	border-radius: 10px;
}

.bci-footer__brand img {
	max-height: 46px;
	width: auto;
}

.bci-social {
	display: flex;
	gap: 0.6rem;
	margin-top: 1.2rem;
}

.bci-social a {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
	transition: all 0.2s var(--bci-ease);
}

.bci-social a:hover {
	background: var(--bci-red);
	border-color: var(--bci-red);
	color: #fff;
	transform: translateY(-2px);
}

.bci-social svg {
	width: 17px;
	height: 17px;
}

.bci-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-block: 1.4rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.6);
}

.bci-footer__bottom nav ul {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.3rem;
}

.bci-footer__bottom a {
	color: rgba(255, 255, 255, 0.6);
}

.bci-footer__bottom a:hover {
	color: #fff;
}

/* Barre d'action mobile */
.bci-mobile-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 95;
	background: #fff;
	border-top: 1px solid var(--bci-border-strong);
	box-shadow: 0 -6px 20px -10px rgba(44, 52, 87, 0.3);
	padding: 0.6rem 0.7rem calc(0.6rem + env(safe-area-inset-bottom));
	gap: 0.55rem;
}

.bci-mobile-bar .bci-btn {
	flex: 1;
	padding-inline: 0.7rem;
	font-size: 0.85rem;
}

/* ==========================================================================
   14. Animations au défilement
   ========================================================================== */

.bci-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s var(--bci-ease), transform 0.7s var(--bci-ease);
}

.bci-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --- Halo qui suit le curseur sur les cartes --- */
.bci-card,
.bci-sector,
.bci-work {
	--mx: 50%;
	--my: 50%;
}

.bci-card::after,
.bci-work::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s var(--bci-ease);
	background: radial-gradient(360px circle at var(--mx) var(--my), rgba(198, 31, 68, 0.06), transparent 65%);
}

.bci-card:hover::after,
.bci-work:hover::after {
	opacity: 1;
}

.bci-sector::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s var(--bci-ease);
	background: radial-gradient(420px circle at var(--mx) var(--my), rgba(44, 52, 87, 0.05), transparent 65%);
}

.bci-sector:hover::before {
	opacity: 1;
}

.bci-card__icon,
.bci-sector__icon {
	transition: transform 0.35s var(--bci-ease);
}

.bci-card:hover .bci-card__icon,
.bci-sector:hover .bci-sector__icon {
	transform: translateY(-3px) scale(1.06);
}

/* --- Étapes du support : le trait se remplit --- */
.bci-steps::before {
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 1.6s var(--bci-ease);
}

.bci-steps.is-running::before {
	transform: scaleY(1);
}

.bci-steps.is-running .bci-step {
	opacity: 0.35;
	transform: translateY(6px);
	transition: opacity 0.5s var(--bci-ease), transform 0.5s var(--bci-ease);
}

.bci-steps.is-running .bci-step.is-active {
	opacity: 1;
	transform: none;
}

.bci-step__num {
	transition: background-color 0.4s var(--bci-ease), color 0.4s var(--bci-ease),
		box-shadow 0.4s var(--bci-ease);
}

.bci-steps.is-running .bci-step.is-active .bci-step__num {
	background: var(--bci-red);
	color: #fff;
	box-shadow: 0 0 0 6px rgba(198, 31, 68, 0.12);
}

/* --- Panneau de supervision animé --- */
.bci-hero__panel.is-live .bci-panel__row {
	opacity: 0;
	animation: bci-row-in 0.55s var(--bci-ease) forwards;
	animation-delay: var(--row-delay, 0s);
}

@keyframes bci-row-in {
	from {
		opacity: 0;
		transform: translateX(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.bci-hero__panel.is-live .bci-panel__state i {
	animation: bci-state-blink 3.2s ease-in-out infinite;
	animation-delay: var(--row-delay, 0s);
}

@keyframes bci-state-blink {
	0%,
	88%,
	100% {
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(31, 157, 107, 0);
	}
	92% {
		opacity: 0.45;
		box-shadow: 0 0 0 4px rgba(31, 157, 107, 0.18);
	}
}

/* Balayage lent, façon écran de supervision. */
.bci-hero__panel.is-live {
	position: relative;
	overflow: hidden;
}

.bci-hero__panel.is-live::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 130px;
	pointer-events: none;
	background: linear-gradient(180deg, transparent, rgba(34, 130, 210, 0.06), transparent);
	animation: bci-scan 7s linear infinite;
}

@keyframes bci-scan {
	0% {
		transform: translateY(-140px);
	}
	100% {
		transform: translateY(560px);
	}
}

/* --- Bouton de retour en haut --- */
.bci-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 90;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid var(--bci-border-strong);
	border-radius: 50%;
	background: #fff;
	color: var(--bci-navy);
	cursor: pointer;
	box-shadow: var(--bci-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.3s var(--bci-ease), transform 0.3s var(--bci-ease), visibility 0.3s,
		background-color 0.2s var(--bci-ease), color 0.2s var(--bci-ease);
}

.bci-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.bci-to-top:hover {
	background: var(--bci-navy);
	color: #fff;
	border-color: var(--bci-navy);
}

.bci-to-top svg {
	width: 19px;
	height: 19px;
}

/* --- Barre de progression de lecture --- */
.bci-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 120;
	background: var(--bci-red);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

/* --- Boutons : léger relief au survol --- */
.bci-btn--primary::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.16);
	opacity: 0;
	transition: opacity 0.25s var(--bci-ease);
}

.bci-btn {
	position: relative;
	overflow: hidden;
}

.bci-btn--primary:hover::after {
	opacity: 1;
}

/* Les icônes de flèche avancent au survol du bouton entier. */
.bci-btn:hover .bci-btn__icon {
	transition: transform 0.25s var(--bci-ease);
}

/* ==========================================================================
   15. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.bci-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bci-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bci-header__phone-text {
		display: none;
	}
}

@media (max-width: 960px) {
	.bci-hero__inner {
		grid-template-columns: 1fr;
	}

	.bci-hero__panel {
		display: none;
	}

	.bci-support,
	.bci-contact-grid,
	.bci-cta,
	.bci-realisation-layout {
		grid-template-columns: 1fr;
	}

	.bci-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bci-header__phone {
		display: none;
	}

	.bci-burger {
		display: block;
	}

	/* Le menu latéral est en position fixed : le header ne doit créer
	   aucun conteneur de positionnement (filtre, transform, perspective). */
	.bci-header {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		filter: none;
		transform: none;
	}

	.bci-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(340px, 86vw);
		background: #fff;
		border-left: 1px solid var(--bci-border);
		box-shadow: -14px 0 40px -20px rgba(44, 52, 87, 0.45);
		padding: 26px 22px 32px;
		transform: translateX(102%);
		transition: transform 0.35s var(--bci-ease);
		overflow-y: auto;
		z-index: 99;
	}

	.bci-nav.is-open {
		transform: translateX(0);
	}

	.bci-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0.15rem;
	}

	.bci-nav a {
		padding: 0.85rem 0.9rem;
		font-size: 1rem;
	}

	.bci-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: var(--bci-bg-alt);
		margin: 0.25rem 0 0.5rem 0.6rem;
	}

	.bci-nav-overlay {
		position: fixed;
		inset: 0;
		background: rgba(20, 25, 45, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s var(--bci-ease), visibility 0.3s;
		z-index: 98;
	}

	.bci-nav-overlay.is-open {
		opacity: 1;
		visibility: visible;
	}

	.bci-mobile-bar {
		display: flex;
	}

	body {
		padding-bottom: 72px;
	}

	.bci-topbar__links a span {
		display: none;
	}
}

@media (max-width: 680px) {
	body {
		font-size: 16px;
	}

	.bci-grid--2,
	.bci-grid--3,
	.bci-grid--4,
	.bci-sla,
	.bci-footer__grid {
		grid-template-columns: 1fr;
	}

	.bci-container {
		padding-inline: 18px;
	}

	.bci-card,
	.bci-sector,
	.bci-quote {
		padding: 26px 22px;
	}

	.bci-hero__stats {
		gap: 1.5rem 2rem;
	}

	.bci-footer__bottom {
		flex-direction: column;
		text-align: center;
	}

	.bci-topbar__inner {
		justify-content: center;
	}

	.bci-brand img {
		max-height: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Pas d'écran de démarrage pour qui a demandé moins d'animations :
	   la règle générale ci-dessous écourterait l'animation d'effacement,
	   mais autant ne pas afficher le voile du tout. */
	.bci-splash {
		display: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.bci-reveal {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.bci-header,
	.bci-topbar,
	.bci-footer,
	.bci-mobile-bar,
	.bci-hero__panel,
	.bci-marquee,
	.bci-splash {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* ==========================================================================
   16. Compatibilité éditeur de blocs
   ========================================================================== */

.alignwide {
	max-width: 1100px;
	margin-inline: auto;
}

.alignfull {
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.aligncenter {
	margin-inline: auto;
	text-align: center;
}

.alignleft {
	float: left;
	margin: 0.4rem 1.6rem 1.2rem 0;
}

.alignright {
	float: right;
	margin: 0.4rem 0 1.2rem 1.6rem;
}

.wp-caption-text,
.wp-element-caption {
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--bci-text-dim);
	text-align: left;
	margin-top: 0.65rem;
	padding-left: 0.75rem;
	border-left: 2px solid var(--bci-border);
}

.wp-block-button__link {
	border-radius: 8px;
	background: var(--bci-red);
	color: #fff;
	font-family: var(--bci-font-head);
	font-weight: 600;
	padding: 0.9rem 1.6rem;
	text-decoration: none;
}

/* =====================================================================
   Documents téléchargeables — CGV et autres pièces contractuelles
   ---------------------------------------------------------------------
   La version en vigueur est mise en avant ; les versions antérieures
   restent accessibles, puisque les CGV applicables à une commande sont
   celles en vigueur au jour de cette commande.
   ================================================================== */

.bci-doc {
	display: flex;
	align-items: flex-start;
	gap: 1.15rem;
	padding: 1.5rem 1.6rem;
	border: 1px solid var(--bci-border);
	border-radius: 12px;
	background: #fff;
	margin: 1.4rem 0;
}

.bci-doc--actuel {
	border-color: var(--bci-navy);
	border-left: 4px solid var(--bci-red);
	box-shadow: 0 6px 22px rgba(44, 52, 87, 0.07);
}

.bci-doc__icone {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 9px;
	background: var(--bci-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bci-font-head);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.bci-doc__corps { flex: 1 1 auto; min-width: 0; }

.bci-doc__titre {
	font-family: var(--bci-font-head);
	font-weight: 700;
	color: var(--bci-navy);
	font-size: 1.02rem;
	line-height: 1.35;
	margin: 0 0 0.2rem;
}

.bci-doc__meta {
	font-size: 0.85rem;
	color: var(--bci-text-muted);
	margin: 0 0 0.9rem;
}

.bci-doc__etat {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0.16em 0.55em;
	border-radius: 4px;
	margin-left: 0.5em;
	vertical-align: 0.1em;
}

.bci-doc__etat--vigueur { background: var(--bci-red); color: #fff; }
.bci-doc__etat--archive { background: #eef1f7; color: var(--bci-text-muted); }

.bci-doc__lien {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--bci-font-head);
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	color: #fff;
	background: var(--bci-red);
	padding: 0.62rem 1.15rem;
	border-radius: 8px;
	transition: background 0.18s ease;
}

.bci-doc__lien:hover,
.bci-doc__lien:focus { background: var(--bci-navy); color: #fff; }

/* Versions antérieures : plus discrètes, en liste */
.bci-docs-archive {
	list-style: none;
	margin: 1.2rem 0 0;
	padding: 0;
	border-top: 1px solid var(--bci-border);
}

.bci-docs-archive li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.9rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--bci-border);
	margin: 0;
}

.bci-docs-archive a {
	font-weight: 600;
	color: var(--bci-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--bci-border);
}

.bci-docs-archive a:hover,
.bci-docs-archive a:focus { color: var(--bci-red); border-color: currentColor; }

.bci-docs-archive .bci-docs-archive__periode {
	font-size: 0.85rem;
	color: var(--bci-text-muted);
	margin-left: auto;
}

.bci-docs-vide {
	font-size: 0.92rem;
	color: var(--bci-text-muted);
	font-style: italic;
	padding: 0.9rem 0;
	margin: 0;
}

@media (max-width: 600px) {
	.bci-doc { flex-direction: column; gap: 0.9rem; }
	.bci-docs-archive .bci-docs-archive__periode { margin-left: 0; width: 100%; }
}