/* ===== AED TEMPORAIRE - CUSTOM OVERRIDES ===== */
:root {
	--accent: #e8a020;
	--accent-dark: #c47c00;
}

/* ── Trust bar ──────────────────────────────── */
#trust-bar {
	background: #1a1a2e;
	color: #ccc;
	text-align: center;
	padding: 0.6em 1em;
	font-size: 0.82em;
	letter-spacing: 0.04em;
}
#trust-bar span { margin: 0 1.2em; }
#trust-bar strong { color: var(--accent); }

/* ── Stars ──────────────────────────────────── */
.stars { color: var(--accent); font-size: 1.1em; }

/* ── Prix highlight boxes ───────────────────── */
.prix-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.2em;
	margin: 1.5em 0;
}
.prix-box {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 6px;
	padding: 1.2em 1em;
	text-align: center;
}
.prix-box .duree  { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; }
.prix-box .montant{ font-size: 2em; font-weight: 700; color: var(--accent); line-height: 1.1; }
.prix-box .note   { font-size: 0.72em; opacity: 0.6; margin-top: 0.3em; }

/* ── Checklist ──────────────────────────────── */
.checklist { list-style: none; padding: 0; }
.checklist li { padding: 0.35em 0 0.35em 1.8em; position: relative; }
.checklist li::before { content: "✓"; color: var(--accent); position: absolute; left: 0; font-weight: 700; }

/* ── Exclusions list ────────────────────────── */
.exclusions-list { list-style: none; padding: 0; }
.exclusions-list li { padding: 0.3em 0 0.3em 1.8em; position: relative; font-size: 0.9em; }
.exclusions-list li::before { content: "✗"; color: #e05555; position: absolute; left: 0; font-weight: 700; }

/* ── Situations grid ────────────────────────── */
.situations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1em;
	margin: 1.5em 0;
}
.situation-item {
	background: rgba(255,255,255,0.04);
	border-left: 3px solid var(--accent);
	padding: 0.9em 1.1em;
	border-radius: 0 4px 4px 0;
}
.situation-item h4 { margin: 0 0 0.3em; font-size: 0.92em; color: #fff; }
.situation-item p  { margin: 0; font-size: 0.8em; opacity: 0.75; }

/* ── FAQ accordion ──────────────────────────── */
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 1em 0; }
.faq-item summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 0.95em;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.faq-item summary::after      { content: "+"; color: var(--accent); font-size: 1.3em; }
.faq-item[open] summary::after{ content: "−"; }
.faq-item p { margin: 0.7em 0 0; font-size: 0.87em; opacity: 0.85; line-height: 1.6; }

/* ── CTA urgence / cta-box ──────────────────── */
.cta-urgence,
.cta-box {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	border: 1px solid var(--accent);
	border-radius: 8px;
	padding: 2em;
	text-align: center;
	margin: 2em 0;
}
.cta-urgence h3,
.cta-box h3 { color: var(--accent); margin-bottom: 0.5em; }

/* ── Accent button ──────────────────────────── */
.button.accent {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #111 !important;
	font-weight: 700;
}
.button.accent:hover {
	background: var(--accent-dark) !important;
	border-color: var(--accent-dark) !important;
}

/* ── Step grid (page auto) ──────────────────── */
.step-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.2em;
	margin: 1.5em 0;
	counter-reset: steps;
}
.step-item {
	background: rgba(255,255,255,0.04);
	border-radius: 6px;
	padding: 1.2em;
	counter-increment: steps;
	position: relative;
}
.step-item::before {
	content: counter(steps);
	position: absolute;
	top: -0.7em; left: 1em;
	background: var(--accent);
	color: #111;
	width: 1.6em; height: 1.6em;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.9em;
}
.step-item h4 { margin: 0.5em 0 0.4em; font-size: 0.9em; }
.step-item p  { margin: 0; font-size: 0.8em; opacity: 0.75; }

/* ── Badge RC ───────────────────────────────── */
.badge-rc {
	display: inline-block;
	background: rgba(232,160,32,0.15);
	color: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 3px;
	padding: 0.1em 0.5em;
	font-size: 0.75em;
	font-weight: 700;
}

/* ── Prix table ─────────────────────────────── */
.prix-table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.9em; }
.prix-table th { background: rgba(232,160,32,0.2); color: var(--accent); padding: 0.8em 1em; text-align: left; border-bottom: 2px solid var(--accent); }
.prix-table td { padding: 0.7em 1em; border-bottom: 1px solid rgba(255,255,255,0.08); }
.prix-table tr:hover td { background: rgba(255,255,255,0.04); }

/* ── Anchor scroll offset ───────────────────── */
.anchor-target { scroll-margin-top: 80px; }

/* ── Avis / Review cards ────────────────────── */
.avis-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
	gap: 1.4em;
	margin: 2em 0;
}
.avis-card {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	padding: 1.4em 1.6em;
}
.avis-card .avis-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.8em; }
.avis-card .avis-auteur { font-weight: 700; font-size: 0.95em; }
.avis-card .avis-date   { font-size: 0.75em; opacity: 0.55; }
.avis-card .avis-note   { color: var(--accent); font-size: 1em; letter-spacing: 0.05em; margin-bottom: 0.6em; }
.avis-card .avis-texte  { font-size: 0.85em; line-height: 1.6; opacity: 0.85; margin: 0; }

/* ── Rating summary ─────────────────────────── */
.rating-summary {
	background: rgba(232,160,32,0.08);
	border: 1px solid rgba(232,160,32,0.3);
	border-radius: 8px;
	padding: 1.5em 2em;
	display: flex;
	align-items: center;
	gap: 2em;
	margin: 2em 0;
	flex-wrap: wrap;
}
.rating-score { font-size: 3.5em; font-weight: 900; color: var(--accent); line-height: 1; }
.rating-label { font-size: 0.85em; opacity: 0.75; }
.rating-bar-wrap { flex: 1; min-width: 180px; }
.rating-bar-row { display: flex; align-items: center; gap: 0.7em; font-size: 0.8em; margin-bottom: 0.4em; }
.rating-bar-track { flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.rating-bar-fill  { height: 100%; background: var(--accent); border-radius: 3px; }

/* ── Contact methods ────────────────────────── */
.contact-methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
	gap: 1.4em;
	margin: 2em 0;
}
.contact-method {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	padding: 1.5em;
	text-align: center;
}
.contact-method .cm-icon  { font-size: 2.2em; margin-bottom: 0.4em; }
.contact-method h3        { margin: 0.3em 0 0.2em; font-size: 1em; }
.contact-method p         { font-size: 0.82em; opacity: 0.75; margin: 0.2em 0; }
.contact-method .cm-value { font-size: 1em; font-weight: 700; color: var(--accent); }
.contact-method .cm-hours { font-size: 0.75em; opacity: 0.6; }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 640px) {
	#trust-bar span { display: block; margin: 0.3em 0; }
	.rating-summary { flex-direction: column; gap: 1em; text-align: center; }
}

/* ================================================================
   RESPONSIVE FIXES GLOBAUX - Mobile & Desktop
   ================================================================ */

/* ── Empêcher tout débordement horizontal ───────────────────── */
html, body {
	overflow-x: hidden;
}
#wrapper {
	overflow-x: hidden;
}

/* ── Boutons : wrapping & sizing sur mobile ─────────────────── */
/* Le main.css a white-space:nowrap sur .button - on override en mobile */
@media screen and (max-width: 640px) {
	.button, .button.large {
		white-space: normal;
		word-break: break-word;
		font-size: 0.72em;
		padding: 0 1.2em;
		height: auto;
		line-height: 1.2;
		padding-top: 0.9em;
		padding-bottom: 0.9em;
	}
	.button.next {
		padding-right: 3em;
	}
}

/* ── ul.actions : wrap sur mobile ───────────────────────────── */
ul.actions {
	flex-wrap: wrap;
}
@media screen and (max-width: 640px) {
	ul.actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6em;
		margin-left: 0;
	}
	ul.actions li {
		padding-left: 0;
		width: 100%;
	}
	ul.actions li .button,
	ul.actions li a.button,
	ul.actions li input[type="submit"],
	ul.actions li input[type="reset"] {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
	/* Actions centrées : rester centré sur mobile */
	ul.actions[style*="justify-content:center"],
	ul.actions[style*="justify-content: center"] {
		align-items: center;
	}
}

/* ── Grilles custom : pas de débordement ────────────────────── */
.prix-grid,
.situations-grid,
.step-grid,
.avis-grid,
.horaires-grid,
.contact-methods {
	max-width: 100%;
	box-sizing: border-box;
}

/* ── Tables : scroll horizontal sur petit écran ─────────────── */
.prix-table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}
@media screen and (max-width: 600px) {
	.prix-table th,
	.prix-table td {
		padding: 0.5em 0.6em;
		font-size: 0.82em;
	}
}

/* ── Grilles 2 colonnes → 1 sur mobile ──────────────────────── */
@media screen and (max-width: 600px) {
	/* Les div inline style grid-template-columns:1fr 1fr sur les pages auto/pl */
	div[style*="grid-template-columns:1fr 1fr"],
	div[style*="grid-template-columns: 1fr 1fr"] {
		grid-template-columns: 1fr !important;
	}
}

/* ── Tiles : images pas trop hautes sur mobile ──────────────── */
@media screen and (max-width: 640px) {
	.tiles > article > .image img {
		max-height: 240px;
		object-fit: cover;
		width: 100%;
	}
}

/* ── Prix-grid boxes ────────────────────────────────────────── */
@media screen and (max-width: 400px) {
	.prix-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.prix-box .montant { font-size: 1.6em; }
}

/* ── CTA boxes ──────────────────────────────────────────────── */
@media screen and (max-width: 600px) {
	.cta-urgence,
	.cta-box {
		padding: 1.4em 1.2em;
	}
}

/* ── Step grid ──────────────────────────────────────────────── */
@media screen and (max-width: 600px) {
	.step-grid {
		grid-template-columns: 1fr;
	}
	.step-item::before {
		top: -0.6em;
	}
}

/* ── Situations grid ────────────────────────────────────────── */
@media screen and (max-width: 500px) {
	.situations-grid {
		grid-template-columns: 1fr;
	}
}

/* ── FAQ items ──────────────────────────────────────────────── */
@media screen and (max-width: 600px) {
	.faq-item summary {
		font-size: 0.88em;
		padding-right: 0.5em;
	}
}

/* ── Banner : inner padding sur mobile ──────────────────────── */
@media screen and (max-width: 736px) {
	#banner > .inner {
		padding-left: 1.5em !important;
		padding-right: 1.5em !important;
	}
}

/* ── Section inner : pas de padding overflow ────────────────── */
@media screen and (max-width: 736px) {
	.inner {
		max-width: 100%;
		box-sizing: border-box;
	}
}

/* ── Score global avis : overflow ───────────────────────────── */
.score-bars {
	max-width: 100%;
}
@media screen and (max-width: 500px) {
	.score-global { padding: 1.5em; }
	.score-global .note { font-size: 3em; }
	.score-global .etoiles { font-size: 1.5em; }
}

/* ── Avis grid : 1 colonne sur petit écran ──────────────────── */
@media screen and (max-width: 480px) {
	.avis-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Mentions légales : sections ────────────────────────────── */
@media screen and (max-width: 600px) {
	.legal-section { padding-bottom: 1em; }
	.orias-badge { padding: 0.8em 1em; font-size: 0.85em; }
}

/* ================================================================
   FIX TITRES MOBILE - header.major overflow
   ================================================================ */

/* header.major a width:max-content dans main.css → déborde sur mobile */
@media screen and (max-width: 736px) {
	header.major {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	header.major > :first-child {
		width: 100% !important;
		word-break: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
		white-space: normal;
	}
	/* Réduire la taille des h1/h2 dans les sections si trop grands */
	#main h1 {
		font-size: 1.6em;
		line-height: 1.2;
	}
	#main h2 {
		font-size: 1.25em;
		line-height: 1.3;
	}
	/* Banner h1 spécifique */
	#banner h1 {
		font-size: 1.8em !important;
		line-height: 1.2;
		word-break: break-word;
	}
}

/* ================================================================
   FIX CONTACT DESKTOP - layout et espacements
   ================================================================ */

/*
 * Problème : #contact > .inner dans main.css a :
 *   - display: flex (avec padding:0 !important)
 *   - les enfants nth-child(odd) = 60%, nth-child(even) = 40%
 * Notre .inner override (display:block + padding) se fait écraser.
 * Solution : wrapper le contenu dans un div.contact-inner-wrap
 * qui reprend le padding correctement depuis l'intérieur.
 */

/* Reset complet du contact inner pour repartir proprement */
#contact > .inner {
	display: block !important;
	padding: 0 !important;
	width: calc(100% - 6em) !important;
	max-width: 65em !important;
	margin: 0 auto !important;
	box-sizing: border-box;
}

/* Le wrap intérieur porte le vrai padding */
#contact > .inner > .contact-inner-wrap {
	padding: 4em 0 2em 0;
}

@media screen and (max-width: 736px) {
	#contact > .inner {
		width: calc(100% - 3em) !important;
	}
	#contact > .inner > .contact-inner-wrap {
		padding: 3em 0 1.5em 0;
	}
}

/* contact-grid : pleine largeur dans ce contexte */
.contact-grid {
	width: 100%;
	box-sizing: border-box;
}

/* Horaires grid : pleine largeur */
.horaires-grid {
	width: 100%;
	box-sizing: border-box;
}