/*
Theme Name: Optimapcar
Theme URI: https://www.optimapcar.fr
Author: Erwan
Description: Thème du site Optimapcar : reprogrammation moteur et électronique automobile dans l'Oise (60). Sobre et lisible : fond clair, texte noir, jaune Optimapcar réservé aux boutons, apparitions en fondu.
Version: 2.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: optimapcar
*/

/* =========================================================
   1. Base
   ========================================================= */
:root {
	--opc-encre: #14181d;
	--opc-gris: #5a626d;
	--opc-gris-clair: #8a929c;
	--opc-ligne: #e3e6ea;
	--opc-fond: #f5f6f8;
	--opc-jaune: #ffcc00;
	--opc-jaune-pale: #fff7d6;
	--opc-vert: #1f9d55;
	--opc-rayon: 12px;
	--opc-ombre: 0 1px 2px rgba(20, 24, 29, 0.04), 0 8px 24px -12px rgba(20, 24, 29, 0.12);
	scroll-padding-top: 96px;
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

::selection {
	background: var(--opc-jaune);
	color: var(--opc-encre);
}

:where(h1, h2, h3) {
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

p {
	color: var(--opc-gris);
}

strong {
	color: var(--opc-encre);
	font-weight: 600;
}

img {
	max-width: 100%;
	height: auto;
}

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

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

.wp-block-post-content > .alignfull + .alignfull {
	margin-top: 0;
}

.opc-principal,
.opc-principal > .wp-block-post-content > :first-child {
	margin-top: 0;
}

/* =========================================================
   2. En-tête
   ========================================================= */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 900;
}

.admin-bar header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.opc-entete {
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
	background: #fff; /* pas de backdrop-filter : il enfermait le menu mobile (plein écran) dans la hauteur de l'en-tête */
	border-bottom: 1px solid var(--opc-ligne);
}

.opc-entete__barre {
	gap: 1.5rem;
}

.opc-logo {
	display: inline-flex;
	flex-shrink: 0;
}

.opc-logo img {
	height: 40px;
	width: auto;
}

.opc-menu {
	flex: 1;
	font-size: 0.95rem;
	font-weight: 500;
}

.opc-menu a {
	text-decoration: none;
}

.opc-menu .wp-block-navigation__container {
	gap: 0.25rem;
}

.opc-menu .wp-block-navigation-item__content {
	padding: 0.45rem 0.7rem;
	border-radius: 6px;
	color: var(--opc-encre);
}

.opc-menu .wp-block-navigation-item__content:hover {
	background: var(--opc-fond);
}

.opc-menu .wp-block-navigation__submenu-container {
	border: 1px solid var(--opc-ligne) !important;
	border-radius: 10px;
	padding: 0.4rem !important;
	min-width: 250px !important;
	box-shadow: var(--opc-ombre);
}

.opc-menu .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}

.opc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	font-size: 1.15rem;
	gap: 0.4rem;
}

.opc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none;
	padding: 0 0 0 1rem !important;
	font-size: 1rem;
}

.opc-entete__actions {
	gap: 0.5rem;
	flex-shrink: 0;
}

.opc-entete__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	border-radius: 8px;
	background: var(--opc-jaune);
	color: var(--opc-encre);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s;
}

.opc-entete__tel:hover {
	background: #f2c200;
	color: var(--opc-encre);
}

.opc-entete__tel svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.opc-panier .wc-block-mini-cart__badge {
	background: var(--opc-encre);
	color: #fff;
	border: 0;
}

@media (max-width: 1100px) {
	.opc-entete__tel span {
		display: none;
	}

	.opc-entete__tel {
		padding: 0.6rem;
	}
}

.opc-bandeau-info {
	margin: 0;
	padding: 0.5rem 1rem;
	background: var(--opc-jaune-pale);
	border-bottom: 1px solid #f0e2a8;
	color: var(--opc-encre);
	font-size: 0.9rem;
	text-align: center;
}

.opc-bandeau-info a {
	color: var(--opc-encre);
	font-weight: 600;
}

.opc-bandeau-info__court {
	display: none;
}

/* Téléphone : bandeau sur une ligne */
@media (max-width: 700px) {
	.opc-bandeau-info {
		padding: 0.35rem 0.75rem;
		font-size: 0.8rem;
		line-height: 1.35;
	}

	.opc-bandeau-info__long {
		display: none;
	}

	.opc-bandeau-info__court {
		display: inline;
	}
}

/* Menu mobile ouvert : plein écran, lisible, sous-menus en retrait */
.opc-menu .wp-block-navigation__responsive-container.is-menu-open {
	background: #fff !important;
	color: var(--opc-encre) !important;
}

.opc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3rem;
	align-items: flex-start;
}

.opc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.opc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.opc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.opc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
}

.opc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.opc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: 1px solid var(--opc-ligne);
	padding-bottom: 0.4rem;
}

.opc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.55rem 0;
	font-weight: 600;
}

.opc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.35rem 0;
	font-weight: 400;
	color: var(--opc-gris);
}

.opc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle,
.opc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* =========================================================
   3. Boutons
   ========================================================= */
.wp-block-button__link {
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: #fff;
	color: var(--opc-encre);
	border: 1px solid #c9ced5;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--opc-encre);
	background: #fff;
}

.opc-bouton-plein .wp-block-button,
.opc-bouton-plein .wp-block-button__link {
	width: 100%;
}

/* =========================================================
   4. En-tête de page (hero)
   ========================================================= */
.opc-hero {
	padding-top: clamp(3.5rem, 8vw, 6rem) !important;
	padding-bottom: clamp(3rem, 7vw, 5rem) !important;
	background: var(--opc-fond);
	border-bottom: 1px solid var(--opc-ligne);
}

.opc-hero h1 {
	margin: 0.75rem 0 0;
	max-width: 780px;
}

.opc-hero__intro {
	max-width: 620px;
	margin-left: 0 !important;
	margin-top: 1.25rem !important;
	font-size: var(--wp--preset--font-size--moyen);
	line-height: 1.6;
}

.opc-hero .wp-block-buttons {
	margin-top: 2rem;
	gap: 0.75rem;
}

.opc-hero__colonnes {
	gap: clamp(2rem, 5vw, 4rem) !important;
}

.opc-hero--court {
	padding-top: clamp(2.75rem, 6vw, 4.5rem) !important;
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem) !important;
}

.opc-surtitre {
	margin: 0;
	font-size: 0.85rem !important;
	font-weight: 600;
	color: var(--opc-gris);
	letter-spacing: 0.02em;
}

.opc-surtitre::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 0.6rem;
	border-radius: 2px;
	background: var(--opc-jaune);
	vertical-align: 0.05em;
}

.opc-surtitre a {
	color: inherit;
	text-decoration: none;
}

/* Points de réassurance */
.opc-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 2rem !important;
	padding: 0;
	list-style: none;
}

.opc-badges li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.95rem;
	color: var(--opc-encre);
}

.opc-badges li::before,
.opc-liste-check li::before,
.opc-carte li::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d55' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* Note Google */
.opc-note-google {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--opc-ligne);
	border-radius: 999px;
	background: #fff;
	color: var(--opc-encre);
	font-size: 0.9rem;
	text-decoration: none;
}

.opc-note-google:hover {
	border-color: var(--opc-encre);
	color: var(--opc-encre);
}

.opc-note-google__etoiles {
	color: #f5a700;
	letter-spacing: 0.05em;
}

/* Photo du hero d'accueil */
.opc-hero .opc-photo img {
	aspect-ratio: 4 / 3;
}

/* =========================================================
   5. Sections
   ========================================================= */
.opc-section {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

.opc-section--fond {
	background: var(--opc-fond);
	border-top: 1px solid var(--opc-ligne);
	border-bottom: 1px solid var(--opc-ligne);
}

.opc-section--fond + .opc-section--fond {
	border-top: 0;
}

.opc-entete-section {
	margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}

.opc-entete-section > * {
	max-width: 680px;
}

.opc-entete-section--centre {
	margin-inline: auto !important;
	text-align: center;
}

.opc-entete-section h2 {
	margin: 0.6rem 0 0;
}

.opc-entete-section p:not(.opc-surtitre) {
	margin-top: 0.85rem;
	font-size: 1.1rem;
}

/* =========================================================
   6. Cartes
   ========================================================= */
.opc-carte {
	padding: clamp(1.4rem, 2.5vw, 1.75rem) !important;
	border-radius: var(--opc-rayon);
	background: #fff;
	border: 1px solid var(--opc-ligne);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.opc-section--fond .opc-carte {
	border-color: #dde1e6;
}

a.opc-carte:hover,
.opc-carte:has(.opc-carte__lien a):hover {
	border-color: #c4cad2;
	box-shadow: var(--opc-ombre);
}

.opc-carte > * {
	margin-block: 0;
}

.opc-carte > * + * {
	margin-top: 0.75rem !important;
}

.opc-carte h3 {
	margin-top: 1rem !important;
}

.opc-carte > h3:first-child {
	margin-top: 0 !important;
}

.opc-carte p {
	font-size: 0.98rem;
}

.opc-carte ul,
.opc-liste-check {
	padding: 0;
	list-style: none;
}

.opc-carte ul {
	margin-top: 1rem !important;
}

.opc-carte li,
.opc-liste-check li {
	display: flex;
	gap: 0.6rem;
	margin: 0.45rem 0;
	font-size: 0.96rem;
	color: var(--opc-encre);
}

.opc-carte li::before,
.opc-liste-check li::before {
	margin-top: 0.2em;
}

.opc-carte--colonne {
	display: flex;
	flex-direction: column;
}

.opc-carte .wp-block-buttons {
	margin-top: auto !important;
	padding-top: 1.25rem;
}

.opc-carte__lien {
	margin-top: auto !important;
	padding-top: 0.75rem;
	font-weight: 600;
	font-size: 0.95rem;
}

.opc-carte__lien a {
	color: var(--opc-encre);
	text-decoration: none;
}

.opc-carte__lien a::after {
	content: " →";
}

.opc-carte__lien a:hover {
	text-decoration: underline;
}

.opc-carte__note {
	padding: 0.75rem 0.9rem;
	border-radius: 8px;
	background: var(--opc-fond);
	font-size: 0.92rem !important;
}

.opc-carte__note--alerte {
	background: #fff4f2;
	color: #9b2c1f;
}

.opc-etiquette {
	display: inline-block;
	align-self: flex-start;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--opc-fond);
	color: var(--opc-gris);
	font-size: 0.8rem !important;
	font-weight: 600;
}

/* Icônes */
.opc-ico {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
	vertical-align: -0.2em;
	flex-shrink: 0;
}

.opc-tuile {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--opc-jaune-pale);
	color: var(--opc-encre);
}

.opc-tuile .opc-ico {
	width: 22px;
	height: 22px;
}

/* Carte photo */
.opc-carte--photo {
	padding: 0 !important;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.opc-carte--photo > .wp-block-image {
	margin: 0 !important;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.opc-carte--photo > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.opc-carte--photo > .opc-carte__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 0 !important;
	padding: clamp(1.4rem, 2.5vw, 1.75rem);
}

.opc-carte--photo > .opc-carte__corps > * {
	margin-block: 0;
}

.opc-carte--photo > .opc-carte__corps > * + * {
	margin-top: 0.7rem !important;
}

/* =========================================================
   7. Chiffres clés
   ========================================================= */
.opc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: 1.5rem;
}

.opc-stats > *,
.opc-stat > * {
	margin: 0 !important;
}

.opc-stat {
	padding-left: 1rem;
	border-left: 3px solid var(--opc-jaune);
}

.opc-stat__nombre {
	font-size: clamp(1.75rem, 3.5vw, 2.25rem) !important;
	font-weight: 700;
	line-height: 1.1;
	color: var(--opc-encre);
}

.opc-stat__libelle {
	margin-top: 0.25rem !important;
	font-size: 0.95rem;
}

/* =========================================================
   8. Tarifs
   ========================================================= */
.opc-tarif {
	display: flex;
	flex-direction: column;
}

.opc-prix {
	font-size: clamp(2rem, 4vw, 2.5rem) !important;
	font-weight: 700;
	line-height: 1.1;
	color: var(--opc-encre);
	letter-spacing: -0.02em;
}

.opc-prix small {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--opc-gris);
	letter-spacing: 0;
}

.opc-prix del {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--opc-gris-clair);
	letter-spacing: 0;
}

.opc-carte__sous-titre {
	font-size: 0.95rem !important;
}

.opc-tarif--vedette {
	border: 2px solid var(--opc-encre);
	position: relative;
}

.opc-tarif--vedette::before {
	content: "Le plus demandé";
	position: absolute;
	top: -0.8rem;
	left: 1.5rem;
	padding: 0.15rem 0.65rem;
	border-radius: 999px;
	background: var(--opc-encre);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
}

.opc-sans-ruban::before {
	display: none;
}

/* =========================================================
   9. Tableau
   ========================================================= */
.opc-tableau {
	border: 1px solid var(--opc-ligne);
	border-radius: var(--opc-rayon);
	overflow: hidden;
	background: #fff;
}

.opc-tableau table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.97rem;
}

.opc-tableau th,
.opc-tableau td {
	padding: 0.9rem 1.1rem !important;
	border: 0 !important;
	border-bottom: 1px solid var(--opc-ligne) !important;
	text-align: left;
}

.opc-tableau thead th {
	background: var(--opc-fond);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--opc-gris);
}

.opc-tableau tbody tr:last-child td {
	border-bottom: 0 !important;
}

.opc-tableau td {
	color: var(--opc-gris);
}

.opc-tableau td:first-child {
	color: var(--opc-encre);
	font-weight: 600;
}

.opc-tableau td:last-child {
	color: var(--opc-encre);
	font-weight: 600;
	white-space: nowrap;
}

.opc-tableau figcaption {
	margin: 0;
	padding: 0.85rem 1.1rem;
	border-top: 1px solid var(--opc-ligne);
	font-size: 0.88rem;
	color: var(--opc-gris);
	text-align: left;
}

@media (max-width: 700px) {
	.opc-tableau thead {
		display: none;
	}

	.opc-tableau tr {
		display: grid;
		grid-template-columns: 1fr auto;
		padding: 0.8rem 1rem;
		border-bottom: 1px solid var(--opc-ligne);
	}

	.opc-tableau td {
		padding: 0.1rem 0 !important;
		border: 0 !important;
	}

	.opc-tableau td:nth-child(2) {
		grid-column: 1 / -1;
		font-size: 0.9rem;
	}
}

/* =========================================================
   10. Étapes
   ========================================================= */
.opc-etapes {
	counter-reset: etape;
}

.opc-etape {
	counter-increment: etape; /* sur l'étape elle-même : compté 1, 2, 3 par tous les navigateurs */
	position: relative;
	padding-top: 3.25rem;
}

.opc-etape > * {
	margin: 0;
}

.opc-etape::before {
	content: counter(etape);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--opc-jaune);
	color: var(--opc-encre);
	font-weight: 700;
}

.opc-etape h3 {
	margin-bottom: 0.4rem;
}

.opc-etape p {
	font-size: 0.97rem;
}

/* =========================================================
   11. Zones, FAQ, coordonnées
   ========================================================= */
.opc-villes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.opc-villes li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--opc-ligne);
	color: var(--opc-encre);
}

.opc-villes li span {
	color: var(--opc-gris);
	font-size: 0.92rem;
	white-space: nowrap;
}

.opc-faq {
	border-top: 1px solid var(--opc-ligne);
}

.opc-faq > * {
	margin: 0 !important;
}

.opc-faq .wp-block-details {
	border-bottom: 1px solid var(--opc-ligne);
	padding: 0;
}

.opc-faq summary {
	position: relative;
	padding: 1.15rem 2.5rem 1.15rem 0;
	font-weight: 600;
	color: var(--opc-encre);
	cursor: pointer;
	list-style: none;
}

.opc-faq summary::-webkit-details-marker {
	display: none;
}

.opc-faq summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--opc-gris);
}

.opc-faq [open] summary::after {
	content: "−";
}

.opc-faq .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 0 1.25rem;
}

.opc-coordonnees {
	display: grid;
	gap: 1rem;
	margin: 1.25rem 0 0 !important;
	padding: 0;
	list-style: none;
}

.opc-coordonnees > * {
	margin: 0 !important;
}

.opc-coordonnees li {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 0.9rem;
	align-items: center;
	color: var(--opc-encre);
}

.opc-coordonnees small {
	display: block;
	color: var(--opc-gris);
	font-size: 0.85rem;
}

.opc-coordonnees a {
	color: var(--opc-encre);
	font-weight: 600;
	text-decoration: none;
}

.opc-coordonnees a:hover {
	text-decoration: underline;
}

.opc-carte-google {
	border: 1px solid var(--opc-ligne);
	border-radius: var(--opc-rayon);
	overflow: hidden;
	line-height: 0;
}

.opc-carte-google iframe {
	width: 100%;
	height: 380px;
	border: 0;
}

/* Image */
.opc-photo {
	margin: 0;
	border-radius: var(--opc-rayon);
	overflow: hidden;
}

.opc-photo img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: var(--opc-rayon);
}

/* =========================================================
   12. Bloc d'appel à l'action
   ========================================================= */
.opc-cta {
	padding: clamp(2rem, 5vw, 3rem) !important;
	border-radius: 16px;
	background: var(--opc-encre);
	text-align: left;
}

.opc-cta h2 {
	margin: 0.5rem 0 0;
	color: #fff;
}

.opc-cta p {
	max-width: 560px;
	color: #c3c9d1;
}

.opc-cta .opc-surtitre {
	color: #c3c9d1;
}

.opc-cta .wp-block-buttons {
	margin-top: 1.5rem;
}

.opc-cta .is-style-outline .wp-block-button__link {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}

.opc-cta .is-style-outline .wp-block-button__link:hover {
	border-color: #fff;
}

/* =========================================================
   13. Formulaire de devis
   ========================================================= */
.opc-formulaire__champs p {
	margin: 0 0 1rem;
}

.opc-formulaire__champs label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--opc-encre);
}

.opc-formulaire__champs input:not([type="checkbox"]),
.opc-formulaire__champs textarea,
.opc-formulaire__champs select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.9rem;
	border: 1px solid #c9ced5;
	border-radius: 8px;
	background: #fff;
	color: var(--opc-encre);
	font: inherit;
	font-size: 1rem;
}

.opc-formulaire__champs input:focus,
.opc-formulaire__champs textarea:focus,
.opc-formulaire__champs select:focus {
	outline: none;
	border-color: var(--opc-encre);
	box-shadow: 0 0 0 3px rgba(20, 24, 29, 0.1);
}

.opc-formulaire__ligne {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 0 1rem;
}

.opc-formulaire__accord label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400 !important;
	color: var(--opc-gris) !important;
	font-size: 0.9rem !important;
}

.opc-formulaire__accord input {
	margin-top: 0.3rem;
	accent-color: var(--opc-encre);
}

.opc-formulaire__champs button {
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 8px;
	background: var(--opc-jaune);
	color: var(--opc-encre);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.opc-formulaire__champs button:hover {
	background: #f2c200;
}

.opc-piege {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.opc-formulaire__message {
	margin-bottom: 1.25rem;
	padding: 0.9rem 1.1rem;
	border-radius: 8px;
}

.opc-formulaire__message--ok {
	background: #eaf7ef;
	color: #14532d;
}

.opc-formulaire__message--erreur {
	background: #fff4f2;
	color: #9b2c1f;
}

/* =========================================================
   14. Recherche de calculateur (Immo Off)
   ========================================================= */
.opc-recherche-ecu__champ {
	position: relative;
	max-width: 560px;
	margin-bottom: 1rem;
}

.opc-recherche-ecu__champ input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem 1rem 0.85rem 2.75rem;
	border: 1px solid #c9ced5;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 1rem;
	color: var(--opc-encre);
}

.opc-recherche-ecu__champ input:focus {
	outline: none;
	border-color: var(--opc-encre);
	box-shadow: 0 0 0 3px rgba(20, 24, 29, 0.1);
}

.opc-recherche-ecu__champ .opc-ico {
	position: absolute;
	left: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--opc-gris);
}

.opc-recherche-ecu__resultat {
	min-height: 1.5em;
	margin: 0 0 1rem;
	font-size: 0.95rem;
}

.opc-recherche-ecu__resultat.est-trouve {
	color: var(--opc-vert);
}

.opc-recherche-ecu__resultat.est-vide {
	color: #9b2c1f;
}

.opc-marques {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.opc-marques li {
	margin: 0;
}

.opc-marques button {
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--opc-ligne);
	border-radius: 999px;
	background: #fff;
	color: var(--opc-encre);
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
}

.opc-marques button:hover {
	border-color: var(--opc-encre);
}

.opc-marques button[aria-pressed="true"] {
	background: var(--opc-encre);
	border-color: var(--opc-encre);
	color: #fff;
}

.opc-ecu-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 1rem;
}

.opc-ecu-groupe {
	padding: 1.25rem;
	border: 1px solid var(--opc-ligne);
	border-radius: var(--opc-rayon);
	background: #fff;
}

.opc-ecu-groupe[hidden],
.opc-ecu-groupe li[hidden] {
	display: none;
}

.opc-ecu-groupe h3 {
	margin: 0 0 0.6rem;
	font-size: 1rem;
}

.opc-ecu-groupe ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.opc-ecu-groupe li {
	margin: 0.35rem 0;
	font-size: 0.9rem;
	color: var(--opc-gris);
}

.opc-ecu-groupe li b {
	color: var(--opc-encre);
	font-weight: 600;
}

.opc-recherche-ecu__note {
	margin-top: 1.25rem;
	font-size: 0.92rem;
}

/* Simulateur */
.opc-simulateur__avertissement {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border-radius: 8px;
	background: var(--opc-jaune-pale);
	color: var(--opc-encre);
	font-size: 0.95rem;
}

.opc-simulateur__cadre {
	border: 1px solid var(--opc-ligne);
	border-radius: var(--opc-rayon);
	overflow: hidden;
	background: #fff;
}

.opc-simulateur__cadre iframe {
	display: block;
	width: 100%;
	height: 900px;
	border: 0;
}

.opc-note {
	margin-top: 1.5rem !important;
	font-size: 0.95rem;
}

/* =========================================================
   15. Blog et pages de texte
   ========================================================= */
.opc-entete-article {
	padding-top: clamp(2.75rem, 6vw, 4.5rem) !important;
	padding-bottom: 1.5rem !important;
}

.opc-entete-article .wp-block-post-title {
	margin-top: 0.75rem;
	font-size: clamp(1.9rem, 4vw, 2.75rem);
}

.opc-article__meta {
	gap: 1rem;
	align-items: center;
	font-size: 0.9rem;
	color: var(--opc-gris);
}

.opc-article__image img {
	border-radius: var(--opc-rayon);
	max-height: 520px;
	object-fit: cover;
}

.opc-article__corps,
.opc-texte-legal {
	font-size: 1.075rem;
	line-height: 1.75;
}

.opc-article__corps {
	padding-top: 2rem;
	padding-bottom: var(--wp--preset--spacing--50);
}

.opc-article__corps p,
.opc-texte-legal p,
.opc-article__corps li,
.opc-texte-legal li {
	color: #2f353d;
}

.opc-article__corps h2,
.opc-texte-legal h2 {
	margin-top: 2.5rem;
	font-size: clamp(1.4rem, 2.6vw, 1.75rem);
}

.opc-article__corps h3,
.opc-texte-legal h3 {
	margin-top: 1.75rem;
	font-size: 1.2rem;
}

.opc-article__corps .wp-block-image img {
	border-radius: var(--opc-rayon);
}

.opc-article__corps table,
.opc-texte-legal table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.opc-article__corps th,
.opc-article__corps td {
	border: 1px solid var(--opc-ligne);
	padding: 0.65rem 0.85rem;
}

.opc-article__corps th {
	background: var(--opc-fond);
}

.opc-encadre {
	margin: 1.75rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--opc-jaune);
	border-radius: 0 8px 8px 0;
	background: var(--opc-fond);
}

.opc-liste-articles .wp-block-post-template {
	gap: 1.5rem;
}

.opc-carte--article {
	padding: 0 !important;
	height: 100%;
	overflow: hidden;
}

.opc-carte--article:hover {
	border-color: #c4cad2;
	box-shadow: var(--opc-ombre);
}

.opc-carte--article .wp-block-post-featured-image {
	margin: 0;
}

.opc-carte--article > :not(.wp-block-post-featured-image) {
	padding-inline: 1.4rem;
}

.opc-carte--article > :last-child {
	padding-bottom: 1.4rem;
}

.opc-carte--article .wp-block-post-title {
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.35;
}

.opc-carte--article .wp-block-post-title a {
	color: var(--opc-encre);
	text-decoration: none;
}

.opc-carte--article .wp-block-post-title a:hover {
	text-decoration: underline;
}

.opc-carte__date {
	margin-top: 1.1rem !important;
	font-size: 0.85rem;
	color: var(--opc-gris);
}

.opc-carte--article .wp-block-post-excerpt__excerpt {
	font-size: 0.95rem;
	color: var(--opc-gris);
}

.opc-carte--article .wp-block-post-excerpt__more-link {
	font-weight: 600;
	color: var(--opc-encre);
	text-decoration: none;
}

.wp-block-query-pagination {
	margin-top: 2.5rem;
	gap: 0.4rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--opc-ligne);
	border-radius: 6px;
	color: var(--opc-encre);
	text-decoration: none;
}

.wp-block-query-pagination .current {
	background: var(--opc-encre);
	border-color: var(--opc-encre);
	color: #fff;
}

/* =========================================================
   16. Pied de page
   ========================================================= */
.opc-pied {
	margin-top: 0;
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: 1.5rem;
	background: var(--opc-fond);
	border-top: 1px solid var(--opc-ligne);
	font-size: 0.95rem;
}

.opc-pied__grille {
	gap: 2rem !important;
	padding-bottom: 2.5rem;
	align-items: start;
}

.opc-pied__marque > * + * {
	margin-top: 1rem;
}

.opc-pied h3 {
	margin: 0 0 0.9rem;
	font-size: 0.95rem;
	font-weight: 600;
}

.opc-pied ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.opc-pied li {
	margin: 0.4rem 0;
	color: var(--opc-gris);
}

.opc-pied a {
	color: var(--opc-gris);
	text-decoration: none;
}

.opc-pied a:hover {
	color: var(--opc-encre);
	text-decoration: underline;
}

.opc-pied .opc-note-google {
	color: var(--opc-encre);
}

.opc-pied__bas {
	padding-top: 1.25rem;
	border-top: 1px solid var(--opc-ligne);
	font-size: 0.88rem;
	gap: 1rem;
}

.opc-pied__bas p {
	margin: 0;
}

.opc-pied__legal a {
	margin-left: 1.25rem;
}

.opc-pied__legal a:first-child {
	margin-left: 0;
}

/* =========================================================
   17. Boutique WooCommerce
   ========================================================= */
.wc-block-product,
ul.products li.product {
	padding: 0 0 1.25rem !important;
	border: 1px solid var(--opc-ligne);
	border-radius: var(--opc-rayon);
	background: #fff;
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.wc-block-product:hover,
ul.products li.product:hover {
	border-color: #c4cad2;
	box-shadow: var(--opc-ombre);
}

.wc-block-product .wc-block-components-product-image,
.wc-block-product .wp-block-woocommerce-product-image {
	margin: 0 0 1rem !important;
	border-bottom: 1px solid var(--opc-ligne);
}

.wc-block-product .wc-block-components-product-image img {
	aspect-ratio: 1;
	object-fit: contain;
	background: #fff;
}

.wc-block-product > :not(.wc-block-components-product-image):not(.wp-block-woocommerce-product-image) {
	padding-inline: 1.1rem;
}

.wc-block-product .wp-block-post-title,
.wc-block-product .wp-block-post-title a {
	color: var(--opc-encre) !important;
	font-size: 0.98rem !important;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.wc-block-components-product-price,
.wp-block-woocommerce-product-price {
	color: var(--opc-encre) !important;
	font-weight: 700;
}

.single-product .wp-block-post-title,
.woocommerce div.product .product_title {
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	line-height: 1.25;
	word-break: break-word;
}

.woocommerce-product-gallery {
	border: 1px solid var(--opc-ligne);
	border-radius: var(--opc-rayon);
	overflow: hidden;
}

.opc-envoi-champs {
	margin: 1.25rem 0;
}

.opc-envoi-champs p {
	margin: 0 0 0.9rem;
}

.opc-envoi-champs label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--opc-encre);
}

.opc-envoi-champs input,
.opc-envoi-champs textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	border: 1px solid #c9ced5;
	border-radius: 8px;
	font: inherit;
	font-size: 1rem;
}

.opc-envoi-champs input:focus,
.opc-envoi-champs textarea:focus {
	outline: none;
	border-color: var(--opc-encre);
	box-shadow: 0 0 0 3px rgba(20, 24, 29, 0.1);
}

.opc-envoi-champs__aide {
	font-size: 0.9rem;
}

.opc-envoi-suite {
	margin: 2rem 0;
	padding: 1.5rem;
	border: 1px solid var(--opc-ligne);
	border-radius: var(--opc-rayon);
	background: var(--opc-fond);
}

.opc-envoi-suite h2 {
	margin-top: 0;
	font-size: 1.4rem;
}

.opc-envoi-suite li {
	margin-bottom: 0.6rem;
}

.opc-rappel-envoi {
	margin: 1.5rem 0;
	padding: 1rem 1.1rem;
	border-radius: 8px;
	background: var(--opc-fond);
	font-size: 0.95rem;
}

.opc-rappel-envoi p {
	margin: 0.25rem 0;
}

.opc-fil-sep {
	margin: 0 0.5rem;
	opacity: 0.5;
}

.opc-liste-numerotee {
	margin: 0;
	padding-left: 1.4rem;
}

.opc-liste-numerotee li {
	margin: 0 0 0.8rem;
	padding-left: 0.3rem;
	color: var(--opc-encre);
}

.opc-liste-numerotee li::marker {
	font-weight: 700;
}

.opc-faq-colonnes h2 {
	margin-top: 0.6rem;
}

.opc-hero .opc-note-google {
	margin-top: 1rem;
}

/* Carrousel (fil Instagram et blocs « opc-carrousel ») */
.opc-instagram,
.opc-carrousel {
	position: relative;
}

.opc-instagram #sb_instagram {
	padding: 0 !important;
}

.opc-instagram #sb_instagram #sbi_images,
.opc-carrousel__piste {
	display: flex !important;
	gap: 12px !important;
	padding: 0 0 8px !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.opc-instagram #sb_instagram #sbi_images::-webkit-scrollbar,
.opc-carrousel__piste::-webkit-scrollbar {
	display: none;
}

.opc-instagram #sb_instagram #sbi_images .sbi_item,
.opc-carrousel__piste > * {
	flex: 0 0 calc((100% - 36px) / 4);
	margin: 0 !important;
	scroll-snap-align: start;
	border-radius: 10px;
	overflow: hidden;
}

.opc-instagram #sbi_load,
.opc-instagram .sb_instagram_header {
	display: none !important;
}

.opc-carrousel__fleches {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1rem;
}

.opc-carrousel__fleches[hidden] {
	display: none;
}

.opc-carrousel__fleches button {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid #c9ced5;
	border-radius: 50%;
	background: #fff;
	color: var(--opc-encre);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.opc-carrousel__fleches button:hover:not(:disabled) {
	border-color: var(--opc-encre);
}

.opc-carrousel__fleches button:disabled {
	opacity: 0.35;
	cursor: default;
}

.opc-instagram__lien {
	margin-top: 1rem !important;
}

@media (max-width: 900px) {
	.opc-instagram #sb_instagram #sbi_images .sbi_item,
	.opc-carrousel__piste > * {
		flex-basis: calc((100% - 12px) / 2);
	}
}

@media (max-width: 600px) {
	.opc-instagram #sb_instagram #sbi_images .sbi_item,
	.opc-carrousel__piste > * {
		flex-basis: 80%;
	}

	.opc-carrousel__fleches {
		display: none;
	}
}

/* =========================================================
   18. Téléphone
   ========================================================= */
@media (max-width: 600px) {
	.opc-hero h1 {
		font-size: clamp(1.85rem, 8.5vw, 2.25rem);
	}

	.opc-logo img {
		height: 34px;
	}

	.opc-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================
   19. Apparition en fondu (assets/js/animations.js)
   ========================================================= */
.opc-js [data-opc-apparition] {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease var(--opc-delai, 0s), transform 0.6s ease var(--opc-delai, 0s);
}

.opc-js [data-opc-apparition].est-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.opc-js [data-opc-apparition] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =========================================================
   20. Icônes
   ========================================================= */
.opc-ico--moteur{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 10h2V8h3V6h6v2h2l2 2h2v6h-2l-2 2H9l-3-3H4z%22/%3E%3Cpath d=%22M1 11v4M11 6V4h4%22/%3E%3C/svg%3E")}
.opc-ico--eclair{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 2 4 14h7l-1 8 9-12h-7z%22/%3E%3C/svg%3E")}
.opc-ico--fumee{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 18h10a4 4 0 0 0 .6-7.96A6 6 0 0 0 6.2 9.6 4.2 4.2 0 0 0 7 18z%22/%3E%3Cpath d=%22M8 21h2M14 21h2%22/%3E%3C/svg%3E")}
.opc-ico--recyclage{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 12a8 8 0 1 1-2.4-5.7%22/%3E%3Cpath d=%22M20 4v4h-4%22/%3E%3Cpath d=%22M12 8v4l3 2%22/%3E%3C/svg%3E")}
.opc-ico--goutte{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3s6 6.8 6 11a6 6 0 0 1-12 0c0-4.2 6-11 6-11z%22/%3E%3Cpath d=%22M9 15a3 3 0 0 0 3 3%22/%3E%3C/svg%3E")}
.opc-ico--diagnostic{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 12h4l2-6 4 12 2-6h6%22/%3E%3C/svg%3E")}
.opc-ico--cle{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%228%22 cy=%2215%22 r=%224%22/%3E%3Cpath d=%22m11 12 9-9M16 7l3 3M14 9l2 2%22/%3E%3C/svg%3E")}
.opc-ico--cible{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%225%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221%22/%3E%3C/svg%3E")}
.opc-ico--puce{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%226%22 y=%226%22 width=%2212%22 height=%2212%22 rx=%222%22/%3E%3Crect x=%229.5%22 y=%229.5%22 width=%225%22 height=%225%22/%3E%3Cpath d=%22M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4%22/%3E%3C/svg%3E")}
.opc-ico--bouclier{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z%22/%3E%3Cpath d=%22m8.5 12 2.5 2.5 4.5-5%22/%3E%3C/svg%3E")}
.opc-ico--euro{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17 6.5A7 7 0 1 0 17 17.5%22/%3E%3Cpath d=%22M4 10h9M4 14h9%22/%3E%3C/svg%3E")}
.opc-ico--etoile{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 3 2.8 5.8 6.2.9-4.5 4.4 1 6.3L12 17.5l-5.5 2.9 1-6.3L3 9.7l6.2-.9z%22/%3E%3C/svg%3E")}
.opc-ico--disquette{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 3h11l3 3v15H5z%22/%3E%3Cpath d=%22M8 3v5h7V3M8 21v-7h8v7%22/%3E%3C/svg%3E")}
.opc-ico--pin{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z%22/%3E%3Ccircle cx=%2212%22 cy=%229%22 r=%222.5%22/%3E%3C/svg%3E")}
.opc-ico--tel{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z%22/%3E%3C/svg%3E")}
.opc-ico--mail{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22m3 7 9 6 9-6%22/%3E%3C/svg%3E")}
.opc-ico--horloge{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E")}
.opc-ico--check{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m5 12 5 5 9-10%22/%3E%3C/svg%3E")}
.opc-ico--colis{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z%22/%3E%3Cpath d=%22m3 7.5 9 4.5 9-4.5M12 12v9M7.5 5.2l9 4.6%22/%3E%3C/svg%3E")}
.opc-ico--outil{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z%22/%3E%3C/svg%3E")}
.opc-ico--jauge{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 18a8 8 0 1 1 16 0%22/%3E%3Cpath d=%22m12 15 4-5%22/%3E%3Ccircle cx=%2212%22 cy=%2215%22 r=%221%22/%3E%3C/svg%3E")}
.opc-ico--feuille{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 19C5 11 11 5 20 5c0 9-6 15-14 15z%22/%3E%3Cpath d=%22m5 19 8-8%22/%3E%3C/svg%3E")}
.opc-ico--boite{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%226%22 cy=%225%22 r=%222%22/%3E%3Ccircle cx=%2212%22 cy=%225%22 r=%222%22/%3E%3Ccircle cx=%2218%22 cy=%225%22 r=%222%22/%3E%3Ccircle cx=%226%22 cy=%2219%22 r=%222%22/%3E%3Ccircle cx=%2212%22 cy=%2219%22 r=%222%22/%3E%3Cpath d=%22M6 7v10M12 7v10M18 7v5H6%22/%3E%3C/svg%3E")}
.opc-ico--rapport{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 3h9l4 4v14H6z%22/%3E%3Cpath d=%22M14 3v5h5M9 13h7M9 17h5%22/%3E%3C/svg%3E")}
.opc-ico--loupe{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22m20 20-4-4%22/%3E%3C/svg%3E")}
.opc-ico--copie{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%228%22 y=%228%22 width=%2212%22 height=%2212%22 rx=%222%22/%3E%3Cpath d=%22M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3%22/%3E%3C/svg%3E")}
.opc-ico--alerte{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3 22 20H2z%22/%3E%3Cpath d=%22M12 10v4M12 17v.5%22/%3E%3C/svg%3E")}
.opc-ico--cadenas{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%2211%22 width=%2214%22 height=%2210%22 rx=%222%22/%3E%3Cpath d=%22M8 11V8a4 4 0 0 1 8 0v3%22/%3E%3C/svg%3E")}
.opc-ico--domicile{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 11 12 4l9 7%22/%3E%3Cpath d=%22M5 10v10h14V10M10 20v-6h4v6%22/%3E%3C/svg%3E")}
.opc-ico--reglages{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0%22/%3E%3Ccircle cx=%2216%22 cy=%226%22 r=%222%22/%3E%3Ccircle cx=%2210%22 cy=%2212%22 r=%222%22/%3E%3Ccircle cx=%2218%22 cy=%2218%22 r=%222%22/%3E%3C/svg%3E")}
.opc-ico--drapeau{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 21V4M5 4h11l-2 4 2 4H5%22/%3E%3C/svg%3E")}
.opc-ico--camion{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 6h11v10H2zM13 9h5l3 3v4h-8%22/%3E%3Ccircle cx=%226%22 cy=%2218%22 r=%222%22/%3E%3Ccircle cx=%2217%22 cy=%2218%22 r=%222%22/%3E%3C/svg%3E")}
.opc-ico--son{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 9v6h4l5 4V5L8 9z%22/%3E%3Cpath d=%22M16 9a4 4 0 0 1 0 6M19 6a8 8 0 0 1 0 12%22/%3E%3C/svg%3E")}
.opc-ico--chrono{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%228%22/%3E%3Cpath d=%22M12 9v4l2 2M9 2h6M12 2v3%22/%3E%3C/svg%3E")}
.opc-ico--ecran{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2212%22 rx=%222%22/%3E%3Cpath d=%22M8 20h8M12 16v4%22/%3E%3C/svg%3E")}
.opc-ico--whatsapp{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 20l1.3-3.9A8 8 0 1 1 8 19z%22/%3E%3C/svg%3E")}