/*
Theme Name: Épaviste Marseille
Theme URI: https://enlevement-gratuit-epave-marseille.fr
Author: Les Compagnons du Véhicule
Description: Thème bloc léger et optimisé PageSpeed pour Les Compagnons du Véhicule (enlèvement d'épave, dépannage, remorquage, rachat). Piloté par theme.json, polices auto-hébergées, sans Bootstrap ni jQuery.
Version: 1.1.3
Requires at least: 6.5
Tested up to: 6.8
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: epaviste-marseille
*/

/* L'essentiel du style vit dans theme.json. Ci-dessous uniquement
   ce que les blocs ne gèrent pas nativement. CSS volontairement minimal. */

/* --- Topbar --- */
.topbar{background:var(--wp--preset--color--petrol-dark);color:#bcd3dc;font-family:var(--wp--preset--font-family--heading);font-size:.83rem}
.topbar .wp-block-group{padding-top:.5rem;padding-bottom:.5rem}
.topbar a{color:#fff}
.topbar .acc{color:var(--wp--preset--color--accent)}
@media(max-width:781px){.topbar{display:none}}

/* --- Header sticky --- */
.site-header{position:sticky;top:0;z-index:1000;background:#f5f4f1;border-bottom:1px solid var(--wp--preset--color--border)}
.brand-mark{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:9px;background:var(--wp--preset--color--petrol);color:#fff;font-family:var(--wp--preset--font-family--heading);font-weight:700;font-size:1.1rem}
.site-header .wp-block-navigation a:hover{color:var(--wp--preset--color--petrol)}

/* --- Hero --- */
.hero{position:relative;color:#fff;background-size:cover;background-position:center;min-height:clamp(440px,62vh,620px);display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,47,60,.92) 0%,rgba(13,47,60,.7) 48%,rgba(13,47,60,.32) 100%)}
.hero > .wp-block-group{position:relative;z-index:2;width:100%}
.hero :is(h1,h2,h3,p){color:#fff}
.hero .pill{display:inline-block;background:rgba(224,118,46,.18);border:1px solid rgba(224,118,46,.5);color:#f4c79e;font-family:var(--wp--preset--font-family--heading);font-weight:500;font-size:.86rem;padding:6px 14px;border-radius:30px}
.hero .accent{color:var(--wp--preset--color--accent)}
@media(max-width:781px){.hero::before{background:linear-gradient(180deg,rgba(13,47,60,.8),rgba(13,47,60,.93))}}

/* --- Cartes / pictos --- */
.card{background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--border);border-radius:14px}
.pico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(21,90,114,.1);color:var(--wp--preset--color--petrol);font-size:1.3rem}

/* --- FAQ native (details/summary) --- */
.faq details{background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--border);border-radius:12px;margin-bottom:.75rem;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.4rem;font-family:var(--wp--preset--font-family--heading);font-weight:500;font-size:1.08rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 28px;height:28px;border-radius:8px;background:rgba(21,90,114,.1);color:var(--wp--preset--color--petrol);display:grid;place-items:center;font-family:var(--wp--preset--font-family--heading);font-size:1.3rem;transition:transform .2s}
.faq details[open] summary::after{content:"+";transform:rotate(45deg);background:var(--wp--preset--color--accent);color:#fff}
.faq .answer{padding:0 1.4rem 1.2rem;color:var(--wp--preset--color--muted)}

/* --- Bouton d'appel fixe mobile --- */
.mobile-call{display:none}
@media(max-width:781px){
  .mobile-call{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;align-items:center;justify-content:center;gap:.6rem;background:var(--wp--preset--color--accent);color:#fff;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1.2rem;padding:.85rem;text-decoration:none;box-shadow:0 -6px 18px rgba(0,0,0,.18)}
  body{padding-bottom:56px}
}

/* Accessibilité focus visible */
:where(a,button,summary):focus-visible{outline:3px solid var(--wp--preset--color--accent);outline-offset:2px}

/* --- Article des pages de ville : rythme de lecture --- */
.ville-article{font-size:1.08rem;line-height:1.8}
.ville-article h2{position:relative;margin-top:2.4rem;margin-bottom:.8rem;font-size:1.7rem}
.ville-article h2::before{content:"";display:block;width:46px;height:4px;border-radius:2px;background:var(--wp--preset--color--accent);margin-bottom:.8rem}
.ville-article h3{margin-top:1.8rem;margin-bottom:.5rem;font-size:1.3rem}
.ville-article p{margin-bottom:1.15rem;color:var(--wp--preset--color--ink-soft)}
.ville-article > p:first-of-type{font-size:1.22rem;line-height:1.7;color:var(--wp--preset--color--ink)}
.ville-article :is(ul,ol){padding-left:0;list-style:none;margin:1rem 0 1.4rem}
.ville-article ul li{position:relative;padding-left:1.9rem;margin-bottom:.55rem}
.ville-article ul li::before{content:"✓";position:absolute;left:0;top:0;color:var(--wp--preset--color--accent);font-weight:700}
.ville-article figure img{border-radius:14px}
.ville-article a{color:var(--wp--preset--color--petrol);text-underline-offset:3px}

/* Grille « villes où l'épaviste intervient » en colonnes aérées */
.ville-article .wpil-related,
.ville-article [class*="villes"]{columns:3;column-gap:1.6rem;font-size:.96rem}
@media(max-width:781px){.ville-article .wpil-related,.ville-article [class*="villes"]{columns:2}}
@media(max-width:480px){.ville-article .wpil-related,.ville-article [class*="villes"]{columns:1}}

/* --- Pages ville : neutraliser les couleurs de titres héritées de WPBakery --- */
.ville-article :is(h1,h2,h3,h4){color:var(--wp--preset--color--ink)}
.ville-article img{height:auto}

/* --- Encart contact collant (colonne de droite) --- */
.ville-aside{position:sticky;top:92px;background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--border);border-radius:16px;padding:1.7rem 1.5rem;box-shadow:0 16px 36px rgba(27,38,48,.08)}
.ville-aside .aside-phone{display:block;text-align:center;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1.55rem;color:var(--wp--preset--color--petrol);margin:.3rem 0 1.1rem}
.ville-aside ul{list-style:none;padding-left:0;margin:1.2rem 0 .8rem}
.ville-aside li{position:relative;padding-left:1.7rem;margin-bottom:.5rem;font-size:.96rem;color:var(--wp--preset--color--ink-soft)}
.ville-aside li::before{content:"✓";position:absolute;left:0;top:0;color:var(--wp--preset--color--accent);font-weight:700}
@media(max-width:781px){.ville-aside{position:static;margin-top:2rem}}

/* === Finitions UX pages ville === */
/* Cartes : survol et accent */
.card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(27,38,48,.12);border-color:var(--wp--preset--color--accent)}
.pico{transition:transform .2s ease}
.card:hover .pico{transform:scale(1.08)}

/* Bandeau ville : liseré accent + meilleure profondeur */
.hero{border-bottom:4px solid var(--wp--preset--color--accent)}
.hero::before{background:linear-gradient(90deg,rgba(13,47,60,.94) 0%,rgba(13,47,60,.74) 46%,rgba(13,47,60,.34) 100%)}
.hero .pill{backdrop-filter:blur(2px)}

/* Chapô de l'article : intro mise en avant */
.ville-article > p:first-of-type{font-size:1.25rem;line-height:1.7;color:var(--wp--preset--color--ink);font-weight:500;border-left:3px solid var(--wp--preset--color--accent);padding-left:1.1rem}

/* FAQ : transition douce d'ouverture */
.faq details{transition:box-shadow .2s ease}
.faq details[open]{box-shadow:0 12px 26px rgba(27,38,48,.08)}
.faq summary:hover{color:var(--wp--preset--color--petrol)}

/* Étapes : numéro un peu plus présent */
.wp-block-columns .has-x-large-font-size{opacity:.95}

/* === Grille de liens villes (ex-Bootstrap multiCollapse) === */
/* Les boutons de bascule, restylés en onglets sur la palette du thème */
.ville-article .btn-primary,
.ville-article a.btn-primary{
	display:inline-block;
	margin:0 .4rem .5rem 0;
	padding:.6rem 1rem;
	border:1px solid var(--wp--preset--color--border);
	border-radius:999px;
	background:var(--wp--preset--color--surface-2);
	color:var(--wp--preset--color--petrol-deep);
	font-weight:600;
	font-size:.95rem;
	line-height:1.2;
	text-decoration:none;
	cursor:pointer;
	transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.ville-article .btn-primary:hover{
	background:var(--wp--preset--color--petrol);
	border-color:var(--wp--preset--color--petrol);
	color:#fff;
}
.ville-article .btn-primary.is-active{
	background:var(--wp--preset--color--accent);
	border-color:var(--wp--preset--color--accent);
	color:#fff;
}

/* Le contenu repliable : caché par défaut, ouvert via .is-open (script natif) */
.ville-article .collapse{display:none;}
.ville-article .collapse.is-open{display:block;animation:epv-fade .25s ease;}
@keyframes epv-fade{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

/* La carte de liens : grille de puces propres au lieu d'un pavé de virgules */
.ville-article .card-body{
	margin:.25rem 0 1rem;
	padding:1rem;
	background:var(--wp--preset--color--surface);
	border:1px solid var(--wp--preset--color--border);
	border-radius:12px;
	display:flex;
	flex-wrap:wrap;
	gap:.5rem;
	/* neutralise les virgules entre les liens */
	font-size:0;
}
.ville-article .card-body a{
	font-size:.9rem;
	display:inline-block;
	padding:.35rem .7rem;
	background:var(--wp--preset--color--surface-2);
	border:1px solid var(--wp--preset--color--border);
	border-radius:8px;
	color:var(--wp--preset--color--ink-soft);
	text-decoration:none;
	white-space:nowrap;
	transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.ville-article .card-body a:hover{
	background:var(--wp--preset--color--petrol);
	border-color:var(--wp--preset--color--petrol);
	color:#fff;
}
/* masque les virgules /   résiduels entre les liens (font-size:0 sur le parent) */
.ville-article .card-body{line-height:1;}
.ville-article .row{display:block;}
.ville-article .col{display:block;}

/* === Carte d'intervention par ville === */
.ville-map{
	margin:0 0 var(--wp--preset--spacing--40);
	border-radius:14px;
	overflow:hidden;
	border:1px solid var(--wp--preset--color--border);
	box-shadow:0 10px 28px rgba(27,38,48,.08);
	background:var(--wp--preset--color--surface-2);
}
.ville-map iframe{
	display:block;
	width:100%;
	height:280px;
	border:0;
}
.ville-map figcaption{
	padding:.6rem .9rem;
	font-size:.85rem;
	color:var(--wp--preset--color--muted);
	background:var(--wp--preset--color--surface);
	border-top:1px solid var(--wp--preset--color--border);
}

/* === Page Generator Pro : liens de villes (related links) en grille de puces === */
/* Le sélecteur [class*="related-links"] capte le conteneur quel que soit le préfixe
   généré par Page Generator Pro (page-generator-pro-related-links, ou préfixe propre au site). */
[class*="related-links"]{margin:.75rem 0 1.75rem;}
[class*="related-links"] ul,
ul[class*="related-links"]{
	list-style:none !important;
	margin:0 !important;
	padding:0 !important;
	display:grid !important;
	grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important;
	gap:.6rem !important;
	column-count:initial !important;
}
[class*="related-links"] li{
	margin:0 !important;
	padding:0 !important;
	list-style:none !important;
}
[class*="related-links"] li::before{content:none !important;}
[class*="related-links"] li a{
	display:block;
	height:100%;
	padding:.7rem .9rem;
	background:var(--wp--preset--color--surface);
	border:1px solid var(--wp--preset--color--border);
	border-left:3px solid var(--wp--preset--color--accent);
	border-radius:10px;
	color:var(--wp--preset--color--ink-soft);
	text-decoration:none;
	font-size:.9rem;
	line-height:1.35;
	transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
[class*="related-links"] li a:hover{
	background:var(--wp--preset--color--petrol);
	border-color:var(--wp--preset--color--petrol);
	color:#fff;
	transform:translateY(-2px);
}

/* === Page Generator Pro : carte Google (et tout embed Maps dans le contenu) === */
.ville-article [class*="google-map"],
[class*="google-map"]{
	margin:0 0 1.5rem;
	border-radius:14px;
	overflow:hidden;
	box-shadow:0 10px 28px rgba(27,38,48,.08);
}
.ville-article iframe[src*="google.com/maps"],
.ville-article iframe[src*="maps.google"],
[class*="google-map"] iframe{
	display:block;
	width:100%;
	height:320px;
	border:0;
	border-radius:14px;
	box-shadow:0 10px 28px rgba(27,38,48,.08);
	margin:0 0 1.5rem;
}

/* === Titres d'article : traitement de marque (plus soigné) === */
.ville-article :is(h1,h2,h3),
.wp-block-post-content :is(h1,h2,h3),
.entry-content :is(h1,h2,h3){
	color:var(--wp--preset--color--petrol-deep) !important;
	font-family:var(--wp--preset--font-family--heading);
	font-weight:600;
	line-height:1.2;
	letter-spacing:-.01em;
}
.ville-article h1,.wp-block-post-content h1,.entry-content h1{font-size:2rem;margin:.4rem 0 1.1rem;}
.ville-article h2,.wp-block-post-content h2,.entry-content h2{font-size:1.7rem;margin:2.6rem 0 .9rem;}
.ville-article h3,.wp-block-post-content h3,.entry-content h3{font-size:1.3rem;margin:1.9rem 0 .5rem;}
/* Liseré orange au-dessus des grands titres */
.ville-article :is(h1,h2)::before,
.wp-block-post-content :is(h1,h2)::before,
.entry-content :is(h1,h2)::before{
	content:"";
	display:block;
	width:48px;
	height:4px;
	border-radius:2px;
	background:var(--wp--preset--color--accent);
	margin-bottom:.95rem;
}

/* === Masquer le logo inséré dans le texte === */
.ville-article img[src*="favicon"],
.wp-block-post-content img[src*="favicon"],
.entry-content img[src*="favicon"]{display:none !important;}

/* === Image du contenu en pleine largeur === */
.ville-article img,
.wp-block-post-content img,
.entry-content img{
	display:block;
	float:none !important;
	width:100%;
	height:auto;
	margin:1.6rem 0;
	border-radius:14px;
}

/* === "Comment ça se passe" : étapes en cartes numérotées === */
.process-steps{gap:1.5rem;margin-top:2rem;}
.process-steps .step-card{
	position:relative;
	background:var(--wp--preset--color--surface);
	border:1px solid var(--wp--preset--color--border);
	border-top:3px solid var(--wp--preset--color--accent);
	border-radius:16px;
	padding:2.6rem 1.5rem 1.6rem;
	box-shadow:0 8px 22px rgba(27,38,48,.06);
	transition:transform .2s ease,box-shadow .2s ease;
}
.process-steps .step-card:hover{
	transform:translateY(-4px);
	box-shadow:0 18px 34px rgba(27,38,48,.12);
}
/* Pastille numérotée, chevauchant le haut de la carte */
.process-steps .step-card .step-num{
	position:absolute;
	top:-24px;
	left:1.5rem;
	margin:0 !important;
	width:50px;
	height:50px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:var(--wp--preset--color--petrol);
	color:#fff !important;
	font-size:1.15rem !important;
	font-weight:700 !important;
	box-shadow:0 6px 14px rgba(15,67,86,.35);
}
.process-steps .step-card h4{margin:0 0 .5rem;color:var(--wp--preset--color--ink);}
.process-steps .step-card p{margin:0;}
/* Trait de liaison pointillé entre les cartes (bureau uniquement) */
@media(min-width:782px){
	.process-steps .step-card:not(:last-child)::after{
		content:"";
		position:absolute;
		top:1px;
		right:-.95rem;
		width:.95rem;
		border-top:2px dashed var(--wp--preset--color--accent);
		opacity:.5;
	}
}

/* === Footer soigné === */
.site-footer{border-top:3px solid var(--wp--preset--color--accent);}
.site-footer h3{font-size:1.35rem;margin-bottom:.6rem;}
.site-footer p{color:var(--wp--preset--color--surface-2);}
/* Titres de colonnes */
.site-footer .foot-title{
	text-transform:uppercase;
	letter-spacing:.12em;
	font-weight:700;
	color:var(--wp--preset--color--accent);
	margin:0 0 .9rem;
	opacity:.95;
}
/* Listes de liens */
.site-footer .foot-list{list-style:none;margin:0;padding:0;}
.site-footer .foot-list li{margin:0 0 .55rem;padding:0;}
.site-footer .foot-list li::before{content:none;}
.site-footer .foot-list a{
	color:var(--wp--preset--color--surface-2);
	text-decoration:none;
	opacity:.85;
	transition:color .15s ease,opacity .15s ease,padding-left .15s ease;
}
.site-footer .foot-list a:hover{
	color:#fff;
	opacity:1;
	padding-left:.25rem;
}
/* Colonne garanties : puces cochées */
.site-footer .foot-check li{
	position:relative;
	padding-left:1.5rem;
	color:var(--wp--preset--color--surface-2);
	opacity:.9;
	font-size:.92rem;
}
.site-footer .foot-check li::before{
	content:"✓";
	position:absolute;
	left:0;
	top:0;
	color:var(--wp--preset--color--accent);
	font-weight:700;
}
/* Bouton d'appel du footer (garde le style accent mais compact) */
.site-footer .wp-block-button__link{font-size:1rem;}
/* Barre de bas séparée par un filet */
.site-footer .foot-bottom{
	border-top:1px solid rgba(255,255,255,.12);
}
.site-footer .foot-bottom p{opacity:.7;margin:0;}

/* === Responsive : en-tête et menu mobile === */
@media(max-width:781px){
	/* Le bouton téléphone de l'en-tête est masqué : la barre d'appel fixe en bas prend le relais */
	.site-header .wp-block-buttons{display:none;}
	/* Empêche la barre d'appel fixe de recouvrir le bas de page */
	body{padding-bottom:62px;}
	/* En-tête plus compact */
	.site-header .alignwide{padding-top:.6rem !important;padding-bottom:.6rem !important;}
	.brand-mark{width:38px;height:38px;font-size:1rem;}
}

/* Bouton hamburger et croix de fermeture bien visibles */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{
	color:var(--wp--preset--color--petrol-deep) !important;
}
/* Overlay du menu mobile aux couleurs du site */
.wp-block-navigation__responsive-container.is-menu-open{
	background:var(--wp--preset--color--petrol-dark) !important;
	padding:3rem 1.5rem 2rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
	color:#fff !important;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
	color:#fff !important;
	font-size:1.15rem;
	padding:.35rem 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a{
	font-size:1rem;
	color:#cfe0e7 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
	background:transparent !important;
	border:0 !important;
	padding-left:.8rem;
}

/* Le panneau du menu mobile doit couvrir tout l'écran, au-dessus du contenu */
.wp-block-navigation__responsive-container.is-menu-open{
	z-index:99999 !important;
	position:fixed !important;
	top:0;left:0;right:0;bottom:0;
}

/* === Logo de l'en-tête === */
.brand-logo-link{display:inline-flex;align-items:center}
.brand-logo{height:48px;width:auto;display:block}
@media(max-width:781px){.brand-logo{height:38px}}