/*
Theme Name:   Rapidauto67 Child
Theme URI:    https://rapidauto67.fr
Description:  Thème enfant de Storefront pour Rapidauto67
Author:       Rapidauto67
Author URI:   https://rapidauto67.fr
Template:     storefront
Version:      1.2.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  rapidauto67-child
*/

/* ========================================
   GOOGLE FONTS
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=Source+Code+Pro:wght@600&display=swap');

/* ========================================
   VARIABLES CSS
   ======================================== */
:root {
	--color-primary:    #EA580C;
	--color-urgency:    #DC2626;
	--color-bg-dark:    #111111;
	--color-text:       #1A1A1A;

	--color-primary-hover:  #c2450a;
	--color-urgency-hover:  #b91c1c;
	--color-bg-light:       #F5F5F5;
	--color-white:          #FFFFFF;
	--color-border:         #E5E7EB;

	--font-heading: 'Oswald', sans-serif;
	--font-body:    'Inter', sans-serif;

	--transition: 0.2s ease-in-out;
}

/* ========================================
   FIX BANDES BLANCHES MOBILE
   Storefront ajoute du padding/margin sur .site
   qui laisse apparaître du blanc sur les côtés.
   On neutralise ces marges sans toucher au fond.
   ======================================== */
#page.site {
	margin: 0 !important;
	padding: 0 !important;
}

/* Le header doit occuper exactement 100% du viewport */
.site-header,
#masthead {
	width: 100%;
	left: 0;
	right: 0;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

/* ========================================
   FIX STICKY HEADER
   ======================================== */
/*
 * Storefront applique overflow-x:hidden sur body et .site.
 * overflow-x:hidden crée un conteneur de scroll implicite même
 * sur l'axe perpendiculaire, ce qui casse position:sticky sur tout enfant.
 * overflow-x:clip coupe le débordement horizontal de façon identique
 * SANS créer de conteneur de scroll → position:sticky fonctionne.
 */
body,
.site {
	overflow-x: clip;
}

/* ========================================
   TYPOGRAPHIE GLOBALE
   ======================================== */
body {
	font-family: var(--font-body);
	color: var(--color-text);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.widget-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--font-heading);
	letter-spacing: 0.02em;
}

/* ========================================
   EN-TÊTE
   ======================================== */
.site-header {
	background-color: var(--color-bg-dark);
}

.site-header .site-title a,
.site-header .site-description {
	color: var(--color-white);
}

/* ========================================
   BOUTONS PRINCIPAUX
   ======================================== */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--color-primary);
	color: var(--color-bg-dark);
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: background-color var(--transition), color var(--transition);
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-bg-dark);
}

/* Bouton urgence (classe utilitaire) */
.btn-urgency,
.woocommerce a.button.btn-urgency,
.woocommerce button.button.btn-urgency {
	background-color: var(--color-urgency);
	color: var(--color-white);
}

.btn-urgency:hover,
.woocommerce a.button.btn-urgency:hover {
	background-color: var(--color-urgency-hover);
	color: var(--color-white);
}

/* ========================================
   LIENS ET ACCENTUATION
   ======================================== */
a {
	color: var(--color-primary);
	transition: color var(--transition);
}

a:hover {
	color: var(--color-primary-hover);
}

/* ========================================
   BARRE DE NAVIGATION
   ======================================== */
.main-navigation ul li a {
	font-family: var(--font-heading);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
	color: var(--color-primary);
}

/* ========================================
   PRODUITS WOOCOMMERCE
   ======================================== */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-heading);
}

.woocommerce ul.products li.product .price,
.woocommerce .price {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-weight: 600;
}

/* Badge promo urgence */
.woocommerce span.onsale {
	background-color: var(--color-urgency);
}

/* ========================================
   FULL WIDTH – PAS DE SIDEBAR
   ======================================== */

/* Masque le widget #secondary au cas où il serait rendu par un autre hook */
body.no-sidebar #secondary,
body.no-sidebar .widget-area {
	display: none !important;
}

/* Contenu principal occupe toute la largeur */
body.no-sidebar #primary,
body.no-sidebar .content-area {
	width: 100%;
	float: none;
	margin: 0 auto;
}

/* Réinitialise les largeurs fixes que Storefront applique via media queries */
@media ( min-width: 768px ) {
	body.no-sidebar #primary,
	body.no-sidebar .content-area {
		width: 100% !important;
		float: none !important;
	}
}

/* ========================================
   PIED DE PAGE (Storefront)
   ======================================== */
.site-footer {
	background-color: var(--color-bg-dark);
	color: rgba(255, 255, 255, 0.75);
}

.site-footer a {
	color: var(--color-primary);
}

.site-footer .widget-title {
	color: var(--color-white);
}

/* ========================================
   HEADER PERSONNALISÉ (ra-header)
   ======================================== */
/*
 * Le strip jaune est INSIDE ce header → tout le bloc sticky ensemble.
 * border-bottom retiré : c'est le strip qui fait la séparation visuelle.
 * scroll-padding-top sur html compense la hauteur du header fixe
 * pour que les ancres (#services, #depannage…) ne se cachent pas derrière.
 */
html {
	scroll-padding-top: 82px; /* ≈ hauteur nav (~50px) + strip (~28px) + marge */
}

.ra-header {
	background: var(--color-bg-dark);
	padding: 0;
	position: sticky;
	top: 0;
	z-index: 1000;
	margin: 0 !important;
	/* overflow visible : permet au dropdown panier de dépasser le bas du header */
	overflow: visible;
}

/* Séparation visuelle bas du strip → bas du header complet */
.ra-header .ra-strip {
	border-bottom: 3px solid var(--color-primary);
}

.ra-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 28px;
	max-width: 1400px;
	margin: 0 auto;
}

/* Logo */
.ra-logo {
	text-decoration: none;
	flex-shrink: 0;
}

.ra-logo__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1;
}

.ra-logo__rapid { color: #fff; }
.ra-logo__auto  { color: var(--color-urgency); }
.ra-logo__67    { color: var(--color-primary); }

.ra-logo__sub {
	font-size: 0.5rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #555;
	margin-top: 3px;
}

/* Navigation */
.ra-nav .ra-nav__list {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ra-nav .ra-nav__list li a {
	font-family: var(--font-heading);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #888;
	text-decoration: none;
	transition: color var(--transition);
}

.ra-nav .ra-nav__list li a:hover,
.ra-nav .ra-nav__list li.current-menu-item > a {
	color: var(--color-primary);
}

/* Actions : téléphone + panier */
.ra-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* Téléphone */
.ra-phone {
	display: flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
}

.ra-phone__icon {
	width: 26px;
	height: 26px;
	background: var(--color-urgency);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ra-phone__number {
	font-family: var(--font-heading);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-primary);
	letter-spacing: 0.02em;
}

/* WhatsApp header — desktop uniquement */
.ra-header-wa {
	display: none;
}

.ra-menu-toggle {
	display: none;
}

@media (min-width: 769px) {
	.ra-header-wa {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background: #25D366;
		color: #fff;
		font-family: var(--font-heading);
		font-size: 0.85rem;
		font-weight: 600;
		text-decoration: none;
		padding: 7px 14px;
		border-radius: 4px;
		transition: background 0.15s;
		white-space: nowrap;
	}
	.ra-header-wa:hover { background: #1ebe5a; color: #fff; text-decoration: none; }
	.ra-header-wa i { font-size: 16px; }
}

/* Panier WooCommerce */
.ra-cart {
	position: relative;
	background: #1A1A1A;
	border: 1px solid #2A2A2A;
	border-radius: 6px;
	padding: 7px 12px;
	display: flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	transition: border-color var(--transition);
}

.ra-cart:hover { border-color: var(--color-primary); }

.ra-cart__label {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Badge compteur panier */
.rapidauto-cart-count {
	position: absolute;
	top: -7px;
	right: -7px;
	background: var(--color-urgency);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 9px;
	font-weight: 700;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ========================================
   STRIP JAUNE
   ======================================== */
.ra-strip {
	background: var(--color-primary);
	padding: 5px 28px;
}

.ra-strip__inner {
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
	max-width: 1400px;
	margin: 0 auto;
}

.ra-strip__item {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--font-heading);
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #000;
	padding: 4px 16px;
}

.ra-strip__sep {
	width: 1px;
	height: 12px;
	background: rgba(0, 0, 0, 0.2);
	flex-shrink: 0;
}

/* ========================================
   HERO — layout 2 colonnes
   ======================================== */
.ra-hero {
	position: relative;
	background: var(--color-bg-dark);
	border-bottom: 3px solid var(--color-primary);
	margin: 0;
	min-height: 520px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Image desktop — colonne droite (≥769px) */
.ra-hero__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 38%;
	z-index: 0;
	overflow: hidden;
}

.ra-hero__bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #111111 0%, transparent 5%);
	z-index: 1;
	pointer-events: none;
}

.ra-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 65% center;
	display: block;
}

/* Image mobile — sous le texte, masquée sur desktop */
.ra-hero__bg-mobile {
	display: none;
}

/* Contenu texte au-dessus du fond */
.ra-hero__left {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-top: 60px;
	padding-bottom: 40px;
	max-width: 620px;
}

/* Overlay bas-droite : badge + villes */
.ra-hero__overlay-br {
	position: absolute;
	bottom: 28px;
	right: max(28px, calc(50% - 672px));
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	pointer-events: none;
}

.ra-hero__zones-overlay {
	font-family: var(--font-body);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.6);
	text-align: right;
	line-height: 1.6;
	margin: 0;
}

.ra-avail-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	padding: 9px 18px;
}

.ra-avail-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #22C55E;
	flex-shrink: 0;
	animation: ra-pulse 2s ease-in-out infinite;
}

@keyframes ra-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
	50%       { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

.ra-avail-text {
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ra-avail-sep {
	width: 40px;
	height: 1.5px;
	background: var(--color-primary);
	border-radius: 1px;
}

.ra-avail-zones {
	font-family: var(--font-body);
	font-size: 12px;
	color: #888;
	line-height: 1.7;
	margin: 0;
}

.ra-avail-cta,
.ra-avail-cta:visited {
	display: inline-block;
	padding: 11px 18px;
	border: 1px solid var(--color-primary);
	border-radius: 5px;
	font-family: var(--font-heading);
	font-size: 0.78rem;
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: background var(--transition), color var(--transition);
	white-space: nowrap;
}

.ra-avail-cta:hover {
	background: var(--color-primary);
	color: #000;
	text-decoration: none;
}

/* Responsive hero */
@media (max-width: 800px) {
	.ra-hero {
		min-height: 0;
		padding: 40px 20px 40px;
	}
	.ra-hero__left {
		padding-top: 0;
		padding-bottom: 0;
		max-width: 100%;
	}
}

@media (max-width: 800px) {
	.ra-hero__zones-overlay { display: none; }
}

/* Desktop : caché — Mobile ≤800px : flex (voir @media ci-dessous) */
.ra-hero__avail-mobile { display: none; }

@media (max-width: 800px) {
	.ra-hero__avail-mobile { display: flex; }
}

.ra-hero__badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 5px;
	width: auto;
	background: var(--color-primary);
	color: #000;
	font-family: var(--font-heading);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 3px;
	margin-bottom: 10px;
}

.ra-hero__title {
	font-family: var(--font-heading);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.ra-hero__title--red  { color: var(--color-urgency); }
.ra-hero__title--gold { color: var(--color-primary); }

.ra-hero__desc {
	color: #888;
	font-family: var(--font-body);
	font-size: 0.95rem;
	line-height: 1.7;
	max-width: 540px;
	margin: 0 0 16px;
}

.ra-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* ========================================
   BOUTONS (ra-btn)
   ======================================== */
.ra-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 11px 22px;
	border-radius: 4px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
	font-size: 0.85rem;
}

.ra-btn--gold {
	background: var(--color-primary);
	color: #000;
	border-color: var(--color-primary);
}
.ra-btn--gold:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #000; }

.ra-btn--red {
	background: var(--color-urgency);
	color: #fff;
	border-color: var(--color-urgency);
}
.ra-btn--red:hover { background: var(--color-urgency-hover); border-color: var(--color-urgency-hover); color: #fff; }

.ra-btn--outline {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.ra-btn--outline:hover { background: var(--color-primary); color: #000; }

.ra-btn--outline-dark {
	background: #fff;
	color: #555;
	border-color: #E0E0E0;
}
.ra-btn--outline-dark:hover { border-color: #999; color: #333; }

.ra-btn--dark {
	background: #1A1A1A;
	color: var(--color-primary);
	border-color: #1A1A1A;
}
.ra-btn--dark:hover { background: #2A2A2A; color: var(--color-primary); }

.ra-btn--back {
	background: #DDD;
	color: #333;
	border-color: #888;
}
.ra-btn--back:hover { background: #CCC; }

.ra-btn--disabled {
	background: #E8E8E8;
	color: #AAA;
	border-color: #DDD;
	cursor: not-allowed;
}

.ra-btn--full  { width: 100%; }
.ra-btn--sm    { padding: 7px 14px; font-size: 0.75rem; }
.ra-btn-reset  {
	font-family: var(--font-body);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #AAA;
	background: #F5F5F5;
	border: 1px solid #E0E0E0;
	padding: 5px 11px;
	border-radius: 4px;
	cursor: pointer;
}

/* ========================================
   SECTIONS GÉNÉRIQUES
   ======================================== */
.ra-section {
	padding: 20px 28px;
	border-bottom: 1px solid #E5E5E5;
}

.ra-section--white { background: #fff; }
.ra-section--grey  { background: var(--color-bg-light); }

.ra-section__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.ra-section__bar {
	width: 16px;
	height: 3px;
	background: var(--color-primary);
	border-radius: 2px;
	flex-shrink: 0;
}

.ra-section__bar--red { background: var(--color-urgency); }

.ra-section__label {
	font-family: var(--font-heading);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.ra-section__label--red { color: var(--color-urgency); }

.ra-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

/* Fix 1 : !important nécessaire car Storefront peut écraser color sur h2 */
.ra-section__title {
	font-family: var(--font-heading) !important;
	font-size: 1.3rem !important;
	font-weight: 600 !important;
	color: var(--color-text) !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	background: none !important;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ra-section__title-icon {
	flex-shrink: 0;
	color: var(--color-primary);
}

/* ========================================
   CONFIGURATEUR
   ======================================== */
/* Conteneur interne centré — limite le configurateur à 1100px */
.ra-section__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.ra-cfg__layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 24px;
	align-items: start;
}

/* Empêche .ra-cfg__main de forcer la largeur de la grille au-delà de sa
   colonne (comportement par défaut d'un enfant de CSS Grid : il refuse de
   rétrécir sous la largeur intrinsèque de son contenu sans min-width:0) */
.ra-cfg__main {
	min-width: 0;
}

.ra-cfg__tabs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
	margin-bottom: 16px;
}

/* Fix 3 : min-height réduit — la hauteur suit le contenu réel */
.ra-cfg__panel {
	background: #F9F9F9;
	border: 1px solid #E8E8E8;
	border-radius: 5px;
	padding: 14px;
	min-height: 60px;
	margin-bottom: 12px;
}

.ra-cfg__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ra-cfg__nav-btns {
	display: flex;
	gap: 6px;
}

@media (max-width: 768px) {
	.ra-cfg__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		position: sticky;
		bottom: 0;
		background: #FFFFFF;
		padding: 10px 0 12px;
		margin-top: 8px;
		box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.08);
		z-index: 10;
	}
	.ra-cfg__nav-btns {
		justify-content: flex-end;
	}
}

.ra-cfg__progress {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ra-cfg__progress-track {
	width: 100px;
	height: 3px;
	background: #E5E5E5;
	border-radius: 2px;
	overflow: hidden;
}

.ra-cfg__progress-fill {
	height: 100%;
	background: var(--color-primary);
	transition: width 0.3s ease;
}

.ra-cfg__progress-label {
	font-size: 0.7rem;
	color: #AAA;
}

/* ── Classes JS-générées : !important pour surcharger les styles inline ── */

.ra-cfg__tab {
	height: 64px !important;
	min-height: 64px !important;
}

.ra-cfg__tab-label {
	font-size: 13px !important;
	line-height: 1.3 !important;
}

.ra-cfg__tab-num {
	font-size: 11px !important;
}

.ra-cfg__opt {
	min-width: 110px !important;
	min-height: 90px !important;
}

.ra-cfg__opt-name {
	font-size: 14px !important;
}

.ra-cfg__opt-sub {
	font-size: 12px !important;
}

.ra-cfg__opt i {
	font-size: 28px !important;
}

/* Mobile : cartes plus compactes pour tenir davantage par ligne et
   réduire le défilement dans le configurateur */
@media (max-width: 640px) {
	.ra-cfg__opt {
		min-width: 68px !important;
		min-height: 46px !important;
		padding: 4px 6px !important;
	}
	.ra-cfg__opt-name {
		font-size: 12px !important;
		line-height: 1.15 !important;
	}
	.ra-cfg__opt-sub {
		font-size: 8px !important;
		margin-top: 1px !important;
	}
	.ra-cfg__opt i {
		font-size: 18px !important;
		margin-bottom: 2px !important;
	}
}


/* Aide marquage pneu */
.ra-cfg__aide {
	background: #111;
	border-radius: 6px;
	padding: 14px;
}

.ra-cfg__aide-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #1A1A1A;
	border: 0.5px solid #2A2A2A;
	border-radius: 20px;
	padding: 3px 10px;
	margin-bottom: 10px;
	font-size: 0.5rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #555;
}

.ra-cfg__marking-box {
	background: #1A1A1A;
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 10px;
}

.ra-cfg__marking-head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	font-size: 0.5rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #444;
}

.ra-cfg__marking {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: 32px;
}

.ra-cfg__hint {
	font-size: 0.6rem;
	color: #666;
	line-height: 1.5;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 0.5px solid #2A2A2A;
}

.ra-cfg__legend {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-bottom: 10px;
}

.ra-cfg__aide-tip {
	background: #1A1A1A;
	border-radius: 4px;
	padding: 9px 10px;
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 0.6rem;
	color: #444;
	line-height: 1.5;
}

.ra-cfg__aide-tip strong {
	color: #666;
	display: block;
	margin-bottom: 2px;
}

/* ========================================
   CARTES SERVICES (grilles)
   ======================================== */
.ra-cards {
	display: grid;
	gap: 14px;
}

.ra-cards--3 { grid-template-columns: repeat(3, 1fr); }
.ra-cards--4 { grid-template-columns: repeat(4, 1fr); }

/* Carte avec header sombre */
.ra-card {
	background: #fff;
	border: 1px solid #E5E5E5;
	border-radius: 6px;
	overflow: hidden;
}

.ra-card__head {
	background: #1A1A1A;
	padding: 14px 16px;
}

.ra-card__icon {
	width: 30px;
	height: 30px;
	background: var(--color-primary);
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}

.ra-card__title {
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 3px;
}

.ra-card__sub {
	font-size: 0.6rem;
	color: #777;
	margin: 0;
}

.ra-card__body {
	padding: 14px 16px;
}

/* Liste de prix */
.ra-price-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ra-price-list li {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 0.5px solid #F0F0F0;
	font-size: 0.7rem;
}

.ra-price-list li:last-child { border-bottom: none; }

.ra-price-list li span { color: #555; }

.ra-price-list li strong {
	font-family: var(--font-heading);
	font-size: 0.9rem;
	color: var(--color-primary);
	font-weight: 600;
}

/* Note RDV */
.ra-rdv-note {
	background: #FFF8E6;
	border: 1px solid #E8D080;
	border-radius: 4px;
	padding: 7px 10px;
	margin-bottom: 10px;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 0.6rem;
	color: #8A6520;
	line-height: 1.5;
}

/* Carte plate (dépannage) */
.ra-card--flat {
	border: 1px solid #E5E5E5;
	border-radius: 6px;
	padding: 14px;
	background: #fff;
	overflow: visible;
}

.ra-card__icon-sm {
	width: 30px;
	height: 30px;
	background: #1A1A1A;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 9px;
}

.ra-card__title-sm {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 4px;
}

.ra-card__desc {
	font-size: 0.65rem;
	color: #888;
	line-height: 1.5;
	margin: 0 0 10px;
}

.ra-card__price {
	font-family: var(--font-heading);
	font-size: 1.2rem;
	color: var(--color-primary);
	margin: 0 0 10px;
}

/* Carte urgence */
.ra-card--urgency {
	background: #111;
	border: 2px solid var(--color-urgency);
	border-radius: 6px;
	padding: 14px;
}

.ra-card--urgency .ra-card__price { color: var(--color-primary); }

/* Badges */
.ra-badge-devis {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #FEF3C7;
	border: 1px solid #F59E0B;
	border-radius: 20px;
	padding: 2px 8px;
	font-size: 0.55rem;
	color: #92400E;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ra-badge-urgency {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--color-urgency);
	border-radius: 20px;
	padding: 2px 9px;
	margin-bottom: 9px;
	font-size: 0.55rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}

/* ========================================
   GRILLE SERVICES QUINCONCE (6 cartes + 3 accroches)
   ======================================== */

/*
 * Grille 4 colonnes, auto-placement :
 *   Ligne 1 : [Urgence ×2]  [Accroche ×2]
 *   Ligne 2 : [Accroche ×2] [Pose ×1] [Montage ×1]
 *   Ligne 3 : [Permutation ×1] [Crevaison ×1] [Gonflage ×1] [Accroche ×1]
 */
/* Wrapper centré : le fond gris de la section reste pleine largeur,
   mais le contenu (eyebrow + titre + grille) est limité à 1200px. */
.ra-services__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 48px;
}

/* Retire le padding horizontal de la section pour éviter le double cumul */
#services.ra-section {
	padding-left: 0;
	padding-right: 0;
}

.ra-services-quinconce {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* Carte large (urgence) : occupe 2 colonnes */
.ra-svc-card--featured { grid-column: span 2; }

/* Accroche large (lignes 1 et 2) : occupe 2 colonnes */
.ra-svc-callout--wide { grid-column: span 2; }

/* ── Accroche texte ── */
.ra-svc-callout {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8px 12px;
	/* Fond transparent, pas de bordure */
}

.ra-svc-callout__heading {
	font-family: var(--font-heading);
	font-size: clamp(1.4rem, 2.2vw, 2rem);
	font-weight: 700;
	color: #1A1A1A;
	text-transform: uppercase;
	line-height: 1.15;
	letter-spacing: 0.01em;
	margin: 0 0 10px;
}

.ra-svc-callout__body {
	font-family: var(--font-body);
	font-size: 0.88rem;
	color: #888;
	line-height: 1.65;
	margin: 0;
}

/* ── Image de fond dans les cartes urgence/nuit ── */
.ra-svc-card__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	z-index: 0;
	display: block;
}

@media (max-width: 768px) {
	.ra-svc-card__bg-img {
		object-position: 70% center;
	}
}

/* ── Carte service épurée ── */
.ra-svc-card {
	grid-column: span 1;
	background: #FFFFFF;
	border: 1px solid #E5E5E5;
	border-radius: 8px;
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: box-shadow 0.2s ease;
}

.ra-svc-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

/* Ligne 2 – positionnement explicite dans la grille 8 cols */
.ra-svc-card--c2 { grid-column: 2 / 4; }
.ra-svc-card--c3 { grid-column: 4 / 6; }
.ra-svc-card--c4 { grid-column: 6 / 8; }

/* Variante urgence : fond blanc, bordure rouge 2px */
.ra-svc-card--urgency {
	border: 2px solid var(--color-urgency);
}

/* Icône Tabler 24px dorée */
.ra-svc-card__icon {
	font-size: 24px;
	color: var(--color-primary);
	line-height: 1;
	margin-bottom: 4px;
}

.ra-svc-card__icon--red {
	color: var(--color-urgency);
}

/* Titre Oswald uppercase */
.ra-svc-card__title {
	font-family: var(--font-heading) !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	color: #1A1A1A !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em;
	margin: 0 !important;
	background: none !important;
	display: block !important;
}

/* Description Inter gris */
.ra-svc-card__desc {
	font-family: var(--font-body);
	font-size: 0.7rem;
	color: #888;
	line-height: 1.5;
	margin: 0;
}

/* Prix Oswald doré */
.ra-svc-card__price {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 4px 0 0;
	line-height: 1;
}

/* Liste de tarifs légère */
.ra-svc-price-list {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
}

.ra-svc-price-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	border-bottom: 1px solid #F5F5F5;
	font-size: 0.68rem;
}

.ra-svc-price-list li:last-child { border-bottom: none; }

.ra-svc-price-list li span { color: #888; }

/* Étiquette de groupe dimensionnel (ex. "13" – 18"") */
.ra-svc-price-list__group-label {
	display: block;
	font-family: var(--font-heading);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #AAAAAA;
	border-bottom: none;
	padding: 6px 0 2px;
	justify-content: flex-start;
}

.ra-svc-price-list__group-label--sep {
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid #E8E8E8;
}

/* Badge économie (ex. "−10€") */
.ra-svc-badge-save {
	display: inline-block;
	font-size: 9px;
	font-weight: 700;
	color: #16a34a;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 3px;
	padding: 1px 5px;
	margin-left: 4px;
	vertical-align: middle;
	font-family: var(--font-body);
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

/* Groupe prix + bouton inline */
.ra-price-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Bouton "Choisir" inline */
.ra-btn-choisir,
.ra-btn-choisir:visited {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border: 1px solid var(--color-primary);
	border-radius: 3px;
	background: transparent;
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
	white-space: nowrap;
	flex-shrink: 0;
}

.ra-btn-choisir:hover {
	background: var(--color-primary);
	color: #000;
	text-decoration: none;
}

.ra-svc-price-list li strong {
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-primary);
}

/* Note RDV discrète */
.ra-svc-card__rdv {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.62rem;
	color: #c2450a;
	margin: 2px 0 0;
}

.ra-svc-card__rdv .ti { font-size: 11px; }

/* Le bouton colle au bas de la carte (flex-grow) */
.ra-svc-card .ra-btn {
	margin-top: auto;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* ── Responsive ── */
@media (max-width: 960px) {
	.ra-services-quinconce {
		grid-template-columns: repeat(2, 1fr);
	}
	.ra-svc-card--featured,
	.ra-svc-callout--wide { grid-column: span 2; }
	.ra-svc-callout       { grid-column: span 2; }
	.ra-svc-callout__heading { font-size: 1.4rem; }
}

@media (max-width: 560px) {
	.ra-services-quinconce {
		grid-template-columns: 1fr;
	}
	.ra-svc-card--featured,
	.ra-svc-callout--wide,
	.ra-svc-callout { grid-column: span 1; }
}

/* ── Groupes de services (A / B / C) ── */
.ra-svc-group {
	margin-bottom: 32px;
}

.ra-svc-group__heading {
	font-family: var(--font-heading);
	font-size: clamp(1.2rem, 2.5vw, 1.7rem);
	font-weight: 700;
	color: #1A1A1A;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 16px;
}

/* Grille 2 colonnes pour la section B */
.ra-services-quinconce--2col {
	grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 560px) {
	.ra-services-quinconce--2col {
		grid-template-columns: 1fr;
	}
}

/* Carte nuit (bordure violette) */
.ra-svc-card--night {
	border: 2px solid #7C3AED;
}

/* ── Section C : Pneu neuf ── */
.ra-svc-neuf-box {
	background: var(--color-bg-dark);
	border: 2px solid var(--color-primary);
	border-radius: 8px;
	padding: 24px 28px;
}

/* Desktop : reprend sa place en fin de grille (juste après "Pneus occasion"
   uniquement sur mobile, où l'ordre naturel du HTML est conservé) */
@media (min-width: 769px) {
	.ra-svc-neuf-box { order: 99; }
}

.ra-svc-neuf-box__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.ra-svc-neuf-box__text {
	font-family: var(--font-body);
	font-size: 1rem;
	color: #ccc;
	line-height: 1.6;
	margin: 0;
}

.ra-svc-neuf-box__text strong {
	color: #fff;
}

@media (max-width: 560px) {
	.ra-svc-neuf-box__content {
		flex-direction: column;
		align-items: flex-start;
	}
	.ra-svc-neuf-box__content .ra-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ========================================
   CONTACT + AVIS FUSIONNÉ
   ======================================== */
.ra-contact-avis__inner {
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.ra-contact-avis__title {
	font-family: var(--font-heading) !important;
	font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
	font-weight: 700 !important;
	color: #1A1A1A !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em;
	margin: 0 !important;
	background: none !important;
}

/* Annule le margin négatif de .ra-reviews__rating--link dans ce contexte centré */
.ra-contact-avis__rating {
	margin: 0;
}

/* ========================================
   AVIS & CONTACT
   ======================================== */
.ra-reviews {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.ra-reviews__rating {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ra-reviews__rating--link {
	text-decoration: none;
	cursor: pointer;
	border-radius: 8px;
	padding: 10px 14px;
	margin: -10px -14px;
	border: 1.5px solid transparent;
	transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.ra-reviews__rating--link:hover {
	background: rgba(234, 88, 12, 0.12);
	border-color: var(--color-primary);
	box-shadow: 0 2px 12px rgba(234, 88, 12, 0.18);
}

.ra-reviews__rating--link:hover .ra-reviews__count {
	color: var(--color-primary);
	text-decoration: underline;
}

.ra-reviews__rating--link:hover .ra-reviews__source {
	text-decoration: underline;
}

.ra-reviews__score {
	font-family: var(--font-heading);
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1;
}

.ra-reviews__stars {
	display: flex;
	gap: 3px;
	margin-bottom: 4px;
}

.ra-star {
	width: 13px;
	height: 13px;
	background: var(--color-primary);
	border-radius: 2px;
	display: inline-block;
}

.ra-star--partial {
	background: linear-gradient(90deg, var(--color-primary) 70%, #E0E0E0 70%);
}

.ra-reviews__count {
	font-size: 0.7rem;
	color: #AAA;
}

.ra-reviews__source {
	font-family: var(--font-heading);
	font-size: 0.8rem;
	color: var(--color-text);
}

.ra-reviews__google { color: #4285F4; }

.ra-reviews__quote {
	font-size: 0.7rem;
	color: #666;
	font-style: italic;
	max-width: 280px;
	line-height: 1.7;
	border-left: 2px solid var(--color-primary);
	padding-left: 14px;
	margin: 0;
}

.ra-reviews__contact {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ra-reviews__email {
	font-size: 0.65rem;
	color: #AAA;
	text-decoration: none;
}

.ra-reviews__email:hover { color: var(--color-primary); }

/* ========================================
   PANIER JS (dropdown absolu sous le header)
   ======================================== */

/*
 * Le panneau est INSIDE le <header position:sticky>.
 * position:absolute + top:100% le colle sous la barre nav
 * sans pousser le contenu page vers le bas.
 * right:0 l'aligne sous le bouton panier (côté droit).
 * La transition opacity+transform donne le dropdown.
 */
.ra-jscart {
	position: absolute;
	top: 100%;
	right: 0;
	width: 520px;
	max-width: min(520px, 100vw);
	z-index: 10001;

	background: #1A1A1A;
	border: 1px solid #2A2A2A;
	border-top: 2px solid var(--color-primary);
	border-radius: 0 0 8px 8px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);

	/* État fermé */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	pointer-events: none;
	/* visibility se cache après la fin du fade (délai = durée de la transition) */
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.ra-jscart--open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	/* visibility devient visible immédiatement à l'ouverture */
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}

.ra-jscart__inner {
	padding: 16px 20px 20px;
	max-height: 80vh;
	overflow-y: auto;
}

.ra-jscart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.ra-jscart__title {
	font-family: var(--font-heading);
	font-size: 0.9rem;
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ra-jscart__close {
	background: transparent;
	border: none;
	color: #555;
	cursor: pointer;
	padding: 0;
	display: flex;
}

.ra-jscart__close:hover { color: #aaa; }

.ra-jscart__rdv {
	background: #1E1200;
	border: 1px solid #3A2400;
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 12px;
	display: block;
	font-size: 0.65rem;
	color: #888;
	line-height: 1.5;
}

.ra-jscart__rdv[hidden] { display: none; }
.ra-jscart__rdv strong { color: #FFF; display: block; margin-bottom: 2px; }

.ra-jscart__total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.ra-jscart__total-row > span:first-child {
	font-family: var(--font-heading);
	font-size: 0.85rem;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ra-jscart__total {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	color: var(--color-primary);
	font-weight: 700;
}

.ra-jscart__cards {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
}

.ra-jscart__cards span {
	background: #fff;
	border-radius: 3px;
	padding: 2px 7px;
	font-size: 0.55rem;
	font-weight: 700;
	color: #111;
}

.ra-jscart__sumup { background: #0C1A34 !important; color: #fff !important; }

/* ========================================
   FOOTER PERSONNALISÉ (ra-footer)
   ======================================== */
.ra-footer {
	background: var(--color-bg-dark);
	border-top: 3px solid var(--color-primary);
	padding: 0;
}

.ra-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 28px;
	max-width: 1400px;
	margin: 0 auto;
}

.ra-footer .ra-logo__name {
	font-size: 0.9rem;
}

.ra-footer__tagline {
	font-family: var(--font-heading);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin: 0;
}

.ra-footer__legal {
	font-size: 0.55rem;
	color: #999;
	margin: 0;
}

.ra-footer__legal a,
.ra-footer__legal a:visited,
footer.ra-footer .ra-footer__legal a,
footer.ra-footer .ra-footer__legal a:visited {
	color: #999 !important;
	text-decoration: none !important;
}

footer.ra-footer .ra-footer__legal a:hover {
	color: var(--color-primary) !important;
}

.ra-footer__credit {
	text-align: center;
	font-family: var(--font-body);
	font-size: 11px;
	color: #444;
	margin: 0;
	padding: 8px 28px 12px;
	border-top: 1px solid #1E1E1E;
}

.ra-footer__credit a,
.ra-footer__credit a:visited { color: #444 !important; text-decoration: none !important; }
.ra-footer__credit a:hover   { color: var(--color-primary) !important; }

/* ========================================
   POURQUOI NOUS CHOISIR
   ======================================== */
.ra-why__inner {
	max-width: none;
}

.ra-why__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-top: 20px;
}

.ra-why__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
	background: #F9F9F9;
	border-radius: 6px;
	border: 1px solid #F0F0F0;
	text-decoration: none;
	transition: box-shadow var(--transition), border-color var(--transition);
}

.ra-why__item--link:hover {
	border-color: var(--color-primary);
	box-shadow: 0 2px 12px rgba(234, 88, 12, 0.14);
}

.ra-why__icon {
	font-size: 32px;
	color: var(--color-primary);
	flex-shrink: 0;
	line-height: 1;
	margin-top: 2px;
}

.ra-why__title {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 600;
	color: #1A1A1A;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 4px;
}

.ra-why__text {
	font-family: var(--font-body);
	font-size: 12px;
	color: #888;
	line-height: 1.6;
	margin: 0;
}

.ra-why__item--link .ra-why__title,
.ra-why__item--link .ra-why__text { color: inherit; }
.ra-why__item--link .ra-why__title { color: #1A1A1A; }
.ra-why__item--link .ra-why__text  { color: #888; }

@media (max-width: 768px) {
	.ra-why__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================
   BANNIÈRE COOKIES
   ======================================== */
.ra-cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #1A1A1A;
	border-top: 2px solid var(--color-primary);
	z-index: 9998;
	padding: 14px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.ra-cookie-banner__text {
	font-family: var(--font-body);
	font-size: 12px;
	color: #AAA;
	line-height: 1.5;
	margin: 0;
	flex: 1;
	min-width: 200px;
}

.ra-cookie-banner__text a {
	color: var(--color-primary);
}

.ra-cookie-banner__text a:hover {
	color: var(--color-primary-hover);
}

.ra-cookie-banner__btns {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.ra-cookie-banner {
		bottom: 44px;
		padding: 10px 16px;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.ra-cookie-banner__text {
		font-size: 11px;
	}
	.ra-cookie-banner__btns {
		width: 100%;
	}
	.ra-cookie-banner__btns .ra-btn {
		flex: 1;
	}
}

/* ========================================
   BOUTONS FLOTTANTS MOBILE (FAB)
   ======================================== */
.ra-fab {
	display: none;
}

/* Masqués sur les pages panier / commande / mon compte : évite de détourner
   le client du paiement avec un appel ou un message WhatsApp */
body.woocommerce-cart .ra-fab,
body.woocommerce-checkout .ra-fab,
body.woocommerce-account .ra-fab {
	display: none !important;
}

@media (max-width: 768px) {
	.ra-fab {
		display: flex;
		flex-direction: column;
		gap: 10px;
		position: fixed;
		bottom: 100px;
		right: 12px;
		z-index: 9999;
		transition: opacity 0.3s ease;
	}

	.ra-fab__btn,
	.ra-fab__btn:visited {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		text-decoration: none;
		transition: transform 0.15s ease, opacity 0.15s ease;
	}

	.ra-fab__btn:active { transform: scale(0.92); }

	.ra-fab__btn--call,
	.ra-fab__btn--call:visited,
	.ra-fab__btn--call:hover {
		background: #DC2626;
		color: #fff;
		box-shadow: 0 2px 8px rgba(220, 38, 38, 0.5);
	}

	.ra-fab__btn--whatsapp,
	.ra-fab__btn--whatsapp:visited,
	.ra-fab__btn--whatsapp:hover {
		background: #25D366;
		color: #fff;
		box-shadow: 0 2px 8px rgba(37, 211, 102, 0.5);
	}

	.ra-fab__btn i { font-size: 20px; line-height: 1; }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media ( max-width: 960px ) {
	.ra-cards--4 { grid-template-columns: repeat(2, 1fr); }
	.ra-cfg__layout { grid-template-columns: 1fr; }
	.ra-cfg__aide { display: none; }
}

@media ( max-width: 640px ) {
	.ra-header__inner { padding: 10px 16px; }
	.ra-nav { display: none; }

	.ra-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		background: transparent;
		border: none;
		color: #fff;
		cursor: pointer;
		padding: 0;
		flex-shrink: 0;
	}

	.ra-nav.ra-nav--open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #111111;
		border-top: 2px solid var(--color-primary);
		padding: 8px 20px 16px;
		z-index: 998;
	}
	.ra-nav.ra-nav--open .ra-nav__list {
		flex-direction: column;
		gap: 2px;
	}
	.ra-nav.ra-nav--open .ra-nav__list li a {
		display: block;
		padding: 13px 4px;
		font-size: 0.8rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	.ra-cards--3,
	.ra-cards--4 { grid-template-columns: 1fr; }
	.ra-hero { padding: 20px 16px; }
	.ra-section { padding: 16px 16px; }
	.ra-strip { padding: 6px 16px; }
	.ra-strip__item { padding: 4px 8px; }
	.ra-reviews { flex-direction: column; align-items: flex-start; }
	.ra-cfg__tabs { grid-template-columns: repeat(3, 1fr); }
	/* Dégager les onglets des boutons flottants */
	#configurateur { padding-right: 70px !important; }
}

/* Stat hero cliquable (note Google) */
.ra-hero__stat--link {
	text-decoration: none;
	cursor: pointer;
	border-radius: 4px;
	transition: background var(--transition), box-shadow var(--transition);
}

.ra-hero__stat--link:hover {
	background: rgba(234, 88, 12, 0.15);
	box-shadow: 0 0 0 1.5px var(--color-primary);
}

.ra-hero__stat--link:hover .ra-hero__stat-label {
	text-decoration: underline;
	color: var(--color-primary);
}

/* Strip cliquable (note Google) */
.ra-strip__item--link,
.ra-strip__item--link:visited,
.ra-strip__item--link:hover,
.ra-strip__item--link:focus {
	color: #000;
	text-decoration: none;
}

.ra-strip__item--link {
	cursor: pointer;
	border-radius: 3px;
	transition: background var(--transition);
}

.ra-strip__item--link:hover {
	background: rgba(0, 0, 0, 0.14);
	text-decoration: underline;
}

/* ========================================
   CAROUSEL AVIS
   ======================================== */
.ra-revcarousel__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.ra-carousel {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
}

.ra-carousel__wrap {
	flex: 1;
	overflow: hidden;
	min-width: 0;
}

.ra-carousel__track {
	display: flex;
	gap: 16px;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ra-carousel__btn {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #000;
	border: none;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--transition);
}

.ra-carousel__btn:hover { background: var(--color-primary-hover); color: #000; }

.ra-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 16px;
}

.ra-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #DDD;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background var(--transition);
}

.ra-carousel__dot--on { background: var(--color-primary); }

/* Carte avis */
.ra-rev-card {
	flex-shrink: 0;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #E5E5E5;
	border-radius: 8px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ra-rev-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ra-rev-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #000;
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	text-transform: uppercase;
}

.ra-rev-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ra-rev-name {
	font-family: var(--font-heading);
	font-size: 0.82rem;
	font-weight: 600;
	color: #1A1A1A;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ra-rev-date {
	font-family: var(--font-body);
	font-size: 0.65rem;
	color: #888;
}

.ra-rev-stars {
	color: var(--color-primary);
	font-size: 15px;
	letter-spacing: 2px;
	line-height: 1;
}

.ra-rev-text {
	font-family: var(--font-body);
	font-size: 13px;
	color: #555;
	line-height: 1.65;
	margin: 0;
}

/* ========================================
   CONTACT CTA
   ======================================== */
.ra-contact-cta__inner {
	max-width: 700px;
	margin: 0 auto;
}

.ra-contact-cta__btns {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 24px 0;
}

.ra-contact-btn,
.ra-contact-btn:visited {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 200px;
	padding: 20px 28px;
	border-radius: 6px;
	text-decoration: none;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
	border: none;
}

.ra-contact-btn--call,
.ra-contact-btn--call:visited,
.ra-contact-btn--call:hover { color: #fff; }

.ra-contact-btn--whatsapp,
.ra-contact-btn--whatsapp:visited,
.ra-contact-btn--whatsapp:hover { color: #fff; }

.ra-contact-btn--call    { background: #DC2626; }
.ra-contact-btn--whatsapp { background: #25D366; }

.ra-contact-btn:hover {
	opacity: 0.88;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
	text-decoration: none;
}

.ra-contact-btn i {
	font-size: 28px;
	line-height: 1;
}

.ra-contact-btn__text {
	font-family: var(--font-heading);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
}

.ra-contact-btn__sub {
	font-family: var(--font-body);
	font-size: 0.72rem;
	opacity: 0.88;
	line-height: 1.3;
}

.ra-contact-cta__zone {
	text-align: center;
	font-family: var(--font-body);
	font-size: 13px;
	color: #888;
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 480px) {
	.ra-contact-cta__btns {
		flex-direction: column;
		align-items: stretch;
	}
	.ra-contact-btn { min-width: unset; }
}

/* ========================================
   FAQ – ACCORDÉON
   ======================================== */
.ra-faq__inner {
	max-width: 800px;
	margin: 0 auto;
}

.ra-faq__list {
	margin-top: 20px;
	border: 1px solid #E5E5E5;
	border-radius: 6px;
	overflow: hidden;
}

.ra-faq__item {
	border-bottom: 1px solid #E5E5E5;
	background: #fff;
}

.ra-faq__item:last-child {
	border-bottom: none;
}

.ra-faq__question {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	cursor: pointer;
	font-family: var(--font-heading);
	font-size: 0.95rem;
	font-weight: 600;
	color: #EA580C;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: #fff;
	user-select: none;
	transition: background var(--transition);
}

.ra-faq__question::-webkit-details-marker { display: none; }
.ra-faq__question::marker { display: none; }

.ra-faq__question::after {
	content: '';
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-right: 2px solid #EA580C;
	border-bottom: 2px solid #EA580C;
	transform: rotate(45deg);
	transition: transform 0.22s ease;
}

.ra-faq__item[open] > .ra-faq__question::after {
	transform: rotate(-135deg);
}

.ra-faq__item[open] > .ra-faq__question {
	background: #FAFAFA;
}

.ra-faq__answer {
	padding: 14px 20px 18px;
	font-family: var(--font-body);
	font-size: 0.88rem;
	color: #555;
	line-height: 1.7;
	background: #fff;
}

/* ========================================
   THÈME ORANGE — ROUGE → ORANGE
   (hors bouton tél, badge URGENCE, logo AUTO)
   ======================================== */
.ra-hero__title--red           { color: #EA580C; }
.ra-section__bar--red          { background: #EA580C; }
.ra-section__label--red        { color: #EA580C; }
.rapidauto-cart-count          { background: #EA580C; color: #fff; }
.ra-svc-card--urgency          { border-color: #EA580C; }
.ra-svc-card__icon--red        { color: #EA580C; }
.woocommerce span.onsale       { background-color: #EA580C; color: #fff; }
.btn-urgency,
.woocommerce a.button.btn-urgency,
.woocommerce button.button.btn-urgency { background-color: #EA580C; color: #fff; }

/* Boutons orange : texte blanc (meilleur contraste que noir) */
.ra-btn--gold,
.ra-btn--gold:hover            { color: #fff; }
.ra-hero__badge                { color: #fff; }

/* ========================================
   RESPONSIVE MOBILE — 390px (complet)
   ======================================== */

/* ── 1. HEADER ─────────────────────────────────────── */

/* Logo compact : réduit la police, masque la tagline */
@media (max-width: 480px) {
	.ra-logo__name { font-size: 1rem; }
	.ra-logo__sub  { display: none; }
}

/* Masque le numéro de téléphone texte, garde l'icône rouge */
@media (max-width: 480px) {
	.ra-phone__number { display: none; }
}

/* ── 2. STRIP ──────────────────────────────────────── */

/* Garde 3 items : "24h/24", "4,7/5 Google", "Bas-Rhin"
   Masque items 4-5 (Moto/Voiture + Devis) et leurs séparateurs */
@media (max-width: 640px) {
	.ra-strip__inner > :nth-child(n+7) { display: none; }
	.ra-strip__inner { flex-wrap: nowrap; }
	.ra-strip__item  { flex-shrink: 0; }
	.ra-strip__sep   { flex-shrink: 0; }
}

/* ── 3. HERO ───────────────────────────────────────── */

@media (max-width: 768px) {
	/* Neutralise tout padding/margin résiduel de Storefront sur les parents du hero
	   — limité à la page d'accueil : les autres pages (checkout, panier...) ont
	   besoin de leur padding normal pour rester lisibles. */
	.home #page,
	.home #content,
	.home .col-full,
	.ra-hero-wrapper,
	.ra-hero {
		padding-left:  0 !important;
		padding-right: 0 !important;
		margin-left:   0 !important;
		margin-right:  0 !important;
		max-width:     100% !important;
		width:         100% !important;
	}

	/* Remet le padding interne du hero uniquement */
	.ra-hero {
		padding-left:   20px !important;
		padding-right:  20px !important;
		padding-top:    40px !important;
		padding-bottom: 40px !important;
		box-sizing:     border-box !important;
		overflow-x:     hidden !important;
	}

	body,
	#page.site,
	#content.site-content,
	.col-full {
		overflow-x: clip !important;
	}

	.ra-hero__bg { display: none; }
	.ra-hero__overlay-br { display: none; }
}

/* Boutons CTA : empilés pleine largeur */
@media (max-width: 480px) {
	.ra-hero__ctas {
		flex-direction: column;
		align-items: stretch;
	}
	.ra-hero__ctas .ra-btn { width: 100%; justify-content: center; }
}

/* ── 4. ORDRE DES SECTIONS ─────────────────────────── */
/*
   HTML  : Hero · Why · Cfg · Svc · FAQ · Carousel · Contact
   Mobile: Hero · Cfg · Why · Svc · Carousel · Contact · FAQ
*/
@media (max-width: 640px) {
	.home .col-full,
	.front-page .col-full {
		display: flex;
		flex-direction: column;
	}
	.ra-hero                                 { order: 1; }
	#configurateur                           { order: 2; }
	section[aria-labelledby="why-title"]     { order: 3; }
	#services                                { order: 4; }
	section[aria-labelledby="reviews-title"] { order: 5; }
	#contact                                 { order: 6; }
	#faq                                     { order: 7; }
}

/* ── 5. SÉPARATION VISUELLE SECTIONS ───────────────── */
@media (max-width: 640px) {
	.ra-section {
		border-top: 3px solid var(--color-primary);
		border-bottom: none;
	}
}

/* ── 6. POURQUOI NOUS CHOISIR ──────────────────────── */
@media (max-width: 480px) {
	.ra-why__grid {
		grid-template-columns: 1fr;
		margin-top: 12px;
		gap: 8px;
	}
	.ra-why__item { padding: 12px 14px; }
}

/* ── 7. CONFIGURATEUR — titre + onglets 3x2 ────────── */
@media (max-width: 640px) {
	#cfg-title {
		font-size: 16px !important;
		white-space: nowrap;
	}
}
/* repeat(3,1fr) déjà défini dans le bloc principal à ≤640px */
@media (max-width: 400px) {
	.ra-cfg__tab       { height: 54px !important; min-height: 54px !important; }
	.ra-cfg__tab-label { font-size: 10px !important; }
	.ra-cfg__tab-num   { font-size: 10px !important; }
}

/* ── 8. SERVICES ───────────────────────────────────── */
@media (max-width: 640px) {
	.ra-services__inner { padding: 0 16px; }
}

/* ── 9. CAROUSEL — boutons prev/next min 44px ──────── */
@media (max-width: 640px) {
	.ra-carousel__btn { width: 44px; height: 44px; }
}

/* ── 10. PANIER — plein écran mobile ───────────────── */
@media (max-width: 640px) {
	.ra-jscart {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		border-radius: 0;
		border: none;
		border-top: 3px solid var(--color-primary);
		transform: translateY(-100%);
		transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s linear 0.3s;
	}
	.ra-jscart--open {
		transform: translateY(0);
		transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s linear 0s;
	}
	.ra-jscart__inner {
		height: 100%;
		max-height: 100dvh;
		padding-top: 24px;
		box-sizing: border-box;
	}
}

/* ── 11. BOUTONS FLOTTANTS — moins imposants ───────── */
@media (max-width: 768px) {
	.ra-cookie-banner     { bottom: 16px; }
}

/* ── 12. FOOTER ────────────────────────────────────── */
@media (max-width: 640px) {
	.ra-footer__inner  { padding: 14px 16px; }
	.ra-footer__credit { padding: 8px 16px 12px; }
}
/* ========================================
   MINI BARRE PANIER MOBILE
   Affichée sous le header sur mobile
   quand le panier contient des articles.
   Cachée sur desktop.
   ======================================== */
.ra-mini-cart {
    /* display géré par JS — flex quand visible */
    align-items:      center;
    justify-content:  space-between;
    height:           44px;
    padding:          0 16px;
    background:       #1A1A1A;
    border-bottom:    2px solid #EA580C;
    font-size:        12px;
    color:            #ffffff;
    width:            100%;
    box-sizing:       border-box;
    position:         relative;
    z-index:          9998;
}

/* Toujours caché sur desktop */
@media (min-width: 769px) {
    .ra-mini-cart { display: none !important; }
}

.ra-mini-cart__label  { color: #ffffff; white-space: nowrap; }

.ra-mini-cart__right  {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
}

.ra-mini-cart__total {
    color:       #EA580C;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    font-size:   15px;
    line-height: 1;
}

.ra-mini-cart__voir {
    background:     #EA580C;
    color:          #ffffff;
    border:         none;
    border-radius:  4px;
    padding:        5px 14px;
    font-size:      11px;
    font-weight:    700;
    font-family:    'Oswald', sans-serif;
    cursor:         pointer;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height:    1;
    transition:     background 0.15s ease;
}
.ra-mini-cart__voir:active { background: #c2450a; }

/* Panier complet : limité à 60vh sur mobile pour laisser le client
   continuer à parcourir/ajouter d'autres services en dessous */
@media (max-width: 768px) {
    .ra-jscart.ra-jscart--open {
        max-height:  60vh !important;
        overflow-y:  auto !important;
    }
    .ra-jscart__inner {
        max-height:  60vh !important;
    }

    /* Fond estompé sous le panier — couvre aussi les FAB et le bandeau
       cookies pour éviter qu'ils se superposent visuellement au panier */
    #ra-jscart-backdrop {
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(0, 0, 0, 0);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, background 0.25s ease, visibility 0s linear 0.25s;
    }
    #ra-jscart-backdrop.ra-jscart-backdrop--open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        background: rgba(0, 0, 0, 0.55);
        transition: opacity 0.25s ease, background 0.25s ease;
    }
}

/* ── Hero mobile (≤768px) ───────────────────────────────────────────────────── */

/* Conteneur image mobile : masqué sur desktop */
.ra-hero__van-mobile-bg { display: none; }

@media (max-width: 768px) {
	.ra-hero {
		background: #111111;
		background-image: none;
		min-height: auto;
		position: relative;
		display: block;
		overflow: visible;
		padding: 40px 20px 30px;
	}
	.ra-hero::after  { display: none; }
	.ra-hero__bg     { display: none; }
	.ra-hero__desc   { display: none; }
	/* Texte pleine largeur, devant l'image */
	.ra-hero__left {
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: 100%;
	}
	/* Image camionnette — fond droit semi-transparent */
	.ra-hero__van-mobile-bg {
		display: block;
		position: absolute;
		top: 40px;
		right: 0;
		height: 250px;
		width: 60%;
		z-index: 0;
		overflow: hidden;
	}
	.ra-hero__van-mobile-bg::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, transparent 70%, #111111 100%);
		z-index: 1;
		pointer-events: none;
	}
	.ra-hero__van-mobile {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: right center;
	}
	/* Boutons pleine largeur écran */
	.ra-hero__ctas {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		margin-top: 30px;
	}
	.ra-hero__ctas .ra-btn--outline { display: none; }
	.ra-hero__ctas .ra-btn {
		width: 100%;
		justify-content: center;
	}
	/* Badge 24h/24 + villes : supprimés sur mobile */
	.ra-hero__overlay-br { display: none !important; }
}

/* ── FAQ : fond blanc pur — image de fond supprimée ─────────────────────── */
section[aria-labelledby="faq-title"] > div[aria-hidden="true"] {
	display: none !important;
}

/* ── Images de fond des sections : désactivées sur mobile ───────────────── */
@media (max-width: 768px) {
	section[aria-labelledby="why-title"]     > div[aria-hidden="true"],
	section#services                         > div[aria-hidden="true"],
	section[aria-labelledby="reviews-title"] > div[aria-hidden="true"] {
		display: none !important;
	}
}

@media (max-width: 768px) {
  .ra-hero__bg {
    display: none !important;
  }
}

/* ── Message promo configurateur ───────────────────────────────────────────── */
.ra-cfg__promo {
	text-align: center;
	font-family: var(--font-body);
	font-size: 13px;
	color: #888;
	margin: 0 0 20px;
	line-height: 1.5;
}
.ra-cfg__promo strong {
	color: var(--color-primary);
	font-size: 15px;
}