/* Créateur d'options by Car Music Expression (site 12) — skin du thème Canvas 7.3.1 (démo medical).
 * Charte du kit de communication (graphisme/kit/charte/variables.css) :
 *   rouge Créateur #CD0000 (principale ; jamais en texte sur fond sombre), anthracite #3D3D3D,
 *   rouge profond #9E0000 (survol), gris acier #8C9198 (jamais en texte sur fond clair),
 *   gris perle #F4F4F4, noir carbone #1C1C1E ; titres Bebas Neue, texte Open Sans.
 * Les gris clairs non nommés par la charte sont des teintes de l'anthracite sur blanc. */

/* ----------------------------------------------------------------
	Variables du thème
-----------------------------------------------------------------*/
:root,
.not-dark {
	--cnvs-themecolor: #CD0000;
	--cnvs-themecolor-rgb: 205, 0, 0;

	--cnvs-body-font: 'Open Sans', Arial, Helvetica, sans-serif;
	--cnvs-primary-font: 'Bebas Neue', Impact, sans-serif;
	--cnvs-secondary-font: 'Open Sans', Arial, Helvetica, sans-serif;
	--cnvs-headings-font-weight: 400;

	/* Gris de Bootstrap (teinte bleutée) remplacés par la charte */
	--cnvs-contrast-0: #FFF;
	--cnvs-contrast-100: #F4F4F4;
	--cnvs-contrast-200: #ECECEC;
	--cnvs-contrast-300: #E2E2E2;
	--cnvs-contrast-400: #C5C5C5;
	--cnvs-contrast-500: #9E9E9E;
	--cnvs-contrast-600: #3D3D3D;
	--cnvs-contrast-700: #3D3D3D;
	--cnvs-contrast-800: #1C1C1E;
	--cnvs-contrast-900: #1C1C1E;
	--cnvs-contrast-1000: #1C1C1E;
	--cnvs-contrast-rgb: 28, 28, 30;
	--cnvs-contrast-bg: #FFF;
	--cnvs-contrast-bg-offset: #F4F4F4;
	--cnvs-heading-color: #1C1C1E;
	--cnvs-link-hover-color: #9E0000;

	/* Couleurs « primary » de Bootstrap (bleu #0d6efd par défaut) : liens, focus, pagination, cases à cocher */
	--bs-primary: #CD0000;
	--bs-primary-rgb: 205, 0, 0;
	--bs-link-color: #CD0000;
	--bs-link-color-rgb: 205, 0, 0;
	--bs-link-hover-color: #9E0000;
	--bs-link-hover-color-rgb: 158, 0, 0;
	--bs-focus-ring-color: rgba(205, 0, 0, 0.25);
	--bs-body-color: #1C1C1E;
	--bs-body-color-rgb: 28, 28, 30;
	--bs-emphasis-color: #1C1C1E;
	--bs-secondary-color: rgba(28, 28, 30, 0.75);
	--bs-tertiary-color: rgba(28, 28, 30, 0.5);
	--bs-secondary-bg: #ECECEC;
	--bs-tertiary-bg: #F4F4F4;
	--bs-border-color: #E2E2E2;
	--bs-border-color-translucent: rgba(28, 28, 30, 0.175);
	--bs-dark: #1C1C1E;
	--bs-dark-rgb: 28, 28, 30;
	--bs-light: #F4F4F4;
	--bs-light-rgb: 244, 244, 244;
	--bs-secondary: #3D3D3D;
	--bs-secondary-rgb: 61, 61, 61;
	--bs-gray: #3D3D3D;
	--bs-gray-100: #F4F4F4;
	--bs-gray-200: #ECECEC;
	--bs-gray-300: #E2E2E2;
	--bs-gray-400: #C5C5C5;
	--bs-gray-500: #9E9E9E;
	--bs-gray-600: #3D3D3D;
	--bs-gray-700: #3D3D3D;
	--bs-gray-800: #3D3D3D;
	--bs-gray-900: #1C1C1E;
	--cnvs-btn-color-light: #F4F4F4;
}

/* Zones sombres (barre du haut, en-tête, pied de page, bandeaux) : noir carbone, anthracite et gris acier */
.dark {
	--cnvs-contrast-bg: #1C1C1E;
	--cnvs-contrast-bg-offset: #1C1C1E;
	--cnvs-contrast-0: #1C1C1E;
	--cnvs-contrast-100: #1C1C1E;
	--cnvs-contrast-200: #3D3D3D;
	--cnvs-contrast-300: #3D3D3D;
	--cnvs-contrast-400: #8C9198;
	--cnvs-contrast-500: #8C9198;
	--cnvs-contrast-600: #8C9198;
	--cnvs-contrast-700: #F4F4F4;
	--cnvs-contrast-800: #F4F4F4;
	--cnvs-contrast-900: #FFF;
	--cnvs-contrast-1000: #FFF;
	--cnvs-contrast-rgb: 255, 255, 255;
	--cnvs-heading-color: #FFF;
	--cnvs-topbar-bg: #1C1C1E;
	--cnvs-header-bg: #1C1C1E;
	--cnvs-header-sticky-bg: #1C1C1E;
	--cnvs-primary-menu-submenu-bg: #1C1C1E;
	--cnvs-section-bg: #1C1C1E;
	--cnvs-footer-bg: #1C1C1E;
	--cnvs-link-color: #FFF;
	--cnvs-link-hover-color: #F4F4F4;
	--bs-link-color: #FFF;
	--bs-link-color-rgb: 255, 255, 255;
	--bs-link-hover-color: #F4F4F4;
	--bs-link-hover-color-rgb: 244, 244, 244;
	--bs-body-color: #F4F4F4;
	--bs-secondary-color: #8C9198;
}

/* ----------------------------------------------------------------
	Typographie : Bebas Neue (une seule graisse) pour les titres
-----------------------------------------------------------------*/
:root {
	/* Bebas Neue, police condensée en capitales : titres un cran plus grands que ceux de la démo (Montserrat) */
	--cnvs-font-size-h1: 2.75rem;
	--cnvs-font-size-h2: 2.25rem;
	--cnvs-font-size-h3: 1.95rem;
	--cnvs-font-size-h4: 1.65rem;
	--cnvs-font-size-h5: 1.35rem;
	--cnvs-font-size-h6: 1.05rem;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: 400;
	letter-spacing: 0.02em;
}
.fw-bold:is(h1, h2, h3, h4, h5, h6),
.fw-bolder:is(h1, h2, h3, h4, h5, h6),
.fw-semibold:is(h1, h2, h3, h4, h5, h6) {
	font-weight: 400 !important;
}
/* Titres de la démo en capitales Bebas : un peu plus grands que les titres Montserrat d'origine */
.fbox-content h3,
.heading-block h3,
.heading-block h4,
.opening-table h4,
.widget h4 {
	letter-spacing: 0.04em;
}

@media (max-width: 767.98px) {
	/* Canvas réduit fortement les titres sur mobile (h4 à 1rem) : trop petit en Bebas Neue */
	h1, .h1 { font-size: 2.25rem; }
	h2, .h2 { font-size: 1.9rem; }
	h3, .h3 { font-size: 1.6rem; }
	h4, .h4 { font-size: 1.35rem; }
	h5, .h5 { font-size: 1.15rem; }
	.slider-caption h2,
	.slider-caption .h2 { font-size: 10vw; }
	blockquote.quote p { font-size: 1.125rem; }
	/* Pied de page : la gouttière de 50 px de la démo déborde de l'écran des téléphones */
	.footer-widgets-wrap .gutter-50 {
		--cnvs-custom-gutter: 24px;
	}
}

/* Titres des widgets (barre latérale) et des articles : la taille de la démo est trop petite en Bebas Neue */
.widget > h4 {
	font-size: 1.35rem;
	letter-spacing: 0.06em;
}
.entry-title h2, .entry-title .h2,
.entry-title h3, .entry-title .h3,
.entry-title h4, .entry-title .h4,
.post-grid .entry-title h2 {
	font-size: 1.4rem;
	line-height: 1.15;
	letter-spacing: 0.02em;
}
.single-post .entry-title h2 {
	font-size: 2.25rem;
}
/* Méta des articles (date, catégories) : anthracite au lieu du gris trop pâle */
.entry-meta,
.entry-meta li,
.entry-meta a:not(:hover) {
	color: #3D3D3D;
}

/* Le point rouge des titres (« Titre<span>. </span> ») ne s'affiche pas en rouge sur fond sombre */
.dark h1 > span:not(.nocolor):not(.badge),
.dark h2 > span:not(.nocolor):not(.badge),
.dark h3 > span:not(.nocolor):not(.badge),
.dark h4 > span:not(.nocolor):not(.badge) {
	color: inherit;
}

/* Fil d'Ariane des en-têtes sur photo : survol blanc souligné, pas rouge */
.dark .breadcrumb a:hover {
	color: #FFF;
	text-decoration: underline;
}

/* ----------------------------------------------------------------
	Barre du haut sombre, en-tête blanc avec le logo « fond clair » du kit
-----------------------------------------------------------------*/
#top-bar.dark {
	--cnvs-topbar-color: #F4F4F4;
	--cnvs-topbar-border-color: rgba(255, 255, 255, 0.1);
	border-bottom-color: rgba(255, 255, 255, 0.1);
}
#top-bar.dark .top-links-item:hover {
	background-color: #3D3D3D;
}
#top-bar .top-links-item > a.bg-color:hover {
	background-color: #9E0000 !important;
}

/* En-tête blanc (logo « fond clair » du kit) : menu en noir carbone, page active sur le rouge (texte blanc) */
#header {
	--cnvs-header-bg: #FFF;
	--cnvs-header-sticky-bg: #FFF;
	--cnvs-header-border-color: rgba(28, 28, 30, 0.08);
	--cnvs-primary-menu-color: #1C1C1E;
	--cnvs-primary-menu-hover-color: #1C1C1E;
	--cnvs-primary-menu-active-color: #FFF;
	--cnvs-primary-menu-submenu-bg: #FFF;
	--cnvs-primary-menu-submenu-color: #3D3D3D;
	--cnvs-primary-menu-submenu-hover-color: #1C1C1E;
	--cnvs-primary-menu-submenu-hover-bg: #F4F4F4;
	--cnvs-primary-menu-submenu-border: 1px solid rgba(28, 28, 30, 0.08);
	/* Sous-menus assez larges pour « Réparation d'autoradio d'origine » sur une ligne (240px dans Canvas) */
	--cnvs-primary-menu-submenu-width: 290px;
	--cnvs-primary-menu-font-size: 1.125rem;
	--cnvs-primary-menu-font-weight: 400;
	--cnvs-primary-menu-ls: 1.5px;
	--cnvs-header-misc-icons-color: #1C1C1E;
}
.is-expanded-menu #header .style-3 .menu-container > .menu-item:hover > .menu-link {
	background-color: #F4F4F4;
	color: #1C1C1E;
}
.is-expanded-menu #header .style-3 .menu-container > .menu-item.current > .menu-link {
	background-color: var(--cnvs-themecolor);
	color: #FFF;
}
#header .sub-menu-container .menu-item.current > .menu-link {
	background-color: var(--cnvs-themecolor);
	color: #FFF;
}
/* Menu mobile (fond blanc) : page active en rouge */
body:not(.is-expanded-menu) #header .menu-container > .menu-item.current > .menu-link {
	color: var(--cnvs-themecolor);
}

/* En-tête compact : barre du haut de 36 px, en-tête de 76 px (60 px une fois fixé) */
#top-bar {
	--cnvs-topbar-height: 36px;
	--cnvs-topbar-font-size: 0.8125rem;
}
#header {
	--cnvs-header-height: 76px;
	--cnvs-header-height-shrink: 60px;
}
/* Menu style-3 : la marge de la démo (28 px) est calée sur 100 px ; (76 - 44) / 2 = 16 px */
.is-expanded-menu #header:not(.sticky-header-shrink) .style-3 .menu-container > .menu-item > .menu-link {
	margin: 16px 0;
}
/* Logo : le SVG du kit (2066 × 518) prend la hauteur de l'en-tête, la marge le ramène à ~180 px de large */
#header-wrap #logo img {
	padding: 16px 0;
}
.is-expanded-menu #header.sticky-header-shrink #header-wrap #logo img {
	padding: 10px 0;
}
@media (max-width: 991.98px) {
	#header {
		--cnvs-header-height: 64px;
	}
	#header-wrap #logo img {
		padding: 12px 0;
	}
}

/* ----------------------------------------------------------------
	Pied de page sombre : liens blancs lisibles, libellés en gris acier
-----------------------------------------------------------------*/
#footer.dark,
#footer.dark #copyrights {
	color: #F4F4F4;
}
#footer.dark .widget h4 {
	color: #FFF;
}
#footer.dark .footer-widgets-wrap a,
#footer.dark .widget_links li a {
	color: #F4F4F4;
}
#footer.dark .footer-widgets-wrap a:hover,
#footer.dark .widget_links li a:hover {
	color: #FFF;
	text-decoration: underline;
}
#footer.dark .widget_links li::before {
	color: #8C9198;
}
#footer.dark .footer-big-contacts {
	color: #FFF;
}
#footer.dark .footer-big-contacts a {
	color: #FFF;
}
.footer-big-contacts-address {
	font-size: 18px;
	overflow-wrap: anywhere;
}
#footer.dark #copyrights {
	--cnvs-copyrights-link-color: #F4F4F4;
	color: #8C9198;
}
#footer.dark #copyrights a {
	color: #F4F4F4;
}
#footer.dark #copyrights a:hover {
	color: #FFF;
}
#footer.dark .hours-list {
	color: #F4F4F4;
}
#footer.dark .social-icon {
	color: #FFF;
}

/* Encadrés « feature-box » sombres et bandeaux « promo » : anthracite et noir carbone au lieu du gris bleuté #343a40 */
.feature-box {
	--cnvs-featured-box-bg-dark: #3D3D3D;
}
.promo {
	--cnvs-promo-dark: #1C1C1E;
	--cnvs-promo-uppercase-span-font-size: 1.6rem;
}
.promo-dark h3 + span,
.promo-dark .h3 + span {
	color: #FFF;
}

/* Barre « Appeler / Devis » fixée en bas des mobiles */
.mobile-call-bar {
	background-color: #1C1C1E;
	box-shadow: 0 -2px 10px rgba(28, 28, 30, 0.35);
}
.mobile-call-bar .button-white {
	color: #1C1C1E;
}

/* Bouton « retour en haut » : anthracite, rouge profond au survol, au-dessus de la barre mobile */
#gotoTop {
	background-color: rgba(61, 61, 61, 0.85);
}
#gotoTop:hover {
	background-color: #9E0000;
}
@media (max-width: 991.98px) {
	#gotoTop {
		bottom: 80px;
	}
}

/* ----------------------------------------------------------------
	Boutons : survol en rouge profond
-----------------------------------------------------------------*/
.button {
	--cnvs-btn-color-light: #F4F4F4;
	--cnvs-btn-color-dark: #1C1C1E;
	--cnvs-btn-color-hover: #9E0000;
}
.bg-color .button-white,
.promo .button-white {
	color: #1C1C1E;
}
.bg-color .button-white.button-border,
.promo .button-white.button-border {
	color: #FFF;
}
.bg-color .button-white.button-border:hover,
.promo .button-white.button-border:hover {
	color: #1C1C1E;
}

/* ----------------------------------------------------------------
	Diaporama de l'accueil : voile noir carbone pour lire les titres sur les photos
-----------------------------------------------------------------*/
.slider-overlay {
	z-index: 1;
	background: rgba(28, 28, 30, 0.55);
}
.swiper-slide .container {
	z-index: 2;
}

/* ----------------------------------------------------------------
	Couleurs codées en dur de demos/medical/medical.css, ramenées à la charte
-----------------------------------------------------------------*/
/* Libellés des grandes coordonnées du pied de page (#888) */
.footer-big-contacts span {
	color: #8C9198;
}
/* Champ en erreur (red) */
.form-control.error {
	border-color: #CD0000;
}
/* Encart des horaires (#FFF, #EEE, #E5E5E5) */
.opening-table {
	background-color: #FFF;
	border-color: #E2E2E2;
}
.time-table-wrap .time-table {
	border-top-color: #E2E2E2;
}
/* Listes de prestations (#E0E0E0, #666) */
ul.price-table li {
	border-bottom-color: #E2E2E2;
}
ul.price-table li .value {
	color: #3D3D3D;
}

/* Gris acier et teintes de Bootstrap encore codés dans le thème */
.text-muted {
	color: rgba(28, 28, 30, 0.75) !important;
}
.dark .text-muted {
	color: #8C9198 !important;
}
.form-control:focus,
.form-select:focus {
	border-color: rgba(205, 0, 0, 0.5);
	box-shadow: 0 0 0 0.25rem rgba(205, 0, 0, 0.15);
}
.form-check-input:checked {
	background-color: #CD0000;
	border-color: #CD0000;
}
.pagination {
	--bs-pagination-color: #CD0000;
	--bs-pagination-hover-color: #9E0000;
	--bs-pagination-focus-color: #9E0000;
	--bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(205, 0, 0, 0.15);
	--bs-pagination-active-bg: #CD0000;
	--bs-pagination-active-border-color: #CD0000;
}
