/**
 * Contrôle Plus v2 — repasse mobile (390 px) calée sur controleplus.fr.
 * Chargée en dernier (après prod.css, prod-pages.css, prod-fiche.css et les feuilles des blocs de la prod)
 * pour que ces corrections l'emportent à spécificité égale.
 */

/* En-tête : burger 3 traits arrondis, logo 200 px, pictos lieu / calendrier de la prod (.site-header). */
.cp-burger__lines, .cp-burger__lines::before, .cp-burger__lines::after { display: block; width: 30px; height: 3px; border-radius: 50px; background: #fff; }
.cp-burger__lines { position: relative; }
.cp-burger__lines::before, .cp-burger__lines::after { content: ""; position: absolute; left: 0; }
.cp-burger__lines::before { top: -9px; }
.cp-burger__lines::after { top: 9px; }
@media (max-width: 1099px) {
	.cp-brandbar__inner { justify-content: flex-start; min-height: 75px; padding-inline: 19px; gap: 0; }
	.cp-brandbar .cp-burger { width: 30px; height: 48px; margin-right: 32px; padding: 0; }
	.cp-brandbar .cp-logo img { width: 200px; height: auto; }
	.cp-brandbar__mobile { align-items: center; gap: 24px; margin-left: auto; }
	.cp-brandbar__mobile .cp-brandbar__icon { width: auto; height: 48px; padding: 0; }
	.cp-brandbar__mobile img { display: block; }
}
@media (max-width: 374px) {
	.cp-brandbar__inner { padding-inline: 12px; }
	.cp-brandbar .cp-burger { margin-right: 14px; }
	.cp-brandbar .cp-logo img { width: 170px; }
	.cp-brandbar__mobile { gap: 16px; }
}
/* Fiche centre : barre d'accès du bas (Infos, Horaires, Promo, Prendre RDV, Itinéraire) en 5 colonnes égales. */
@media (max-width: 1024px) {
	.single-control-center .single-nav-block ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; margin: 0; padding: 10px 6px calc(8px + env(safe-area-inset-bottom)); }
	.single-control-center .single-nav-block ul li { min-width: 0; text-align: center; }
	.single-control-center .single-nav-block ul li a { display: block; white-space: nowrap; }
}
/* Pages Rendez-vous (étape 1) en mobile, comme la prod : bandeau rouge non collant, barre blanche
   « < PRENDRE RENDEZ-VOUS ⋮ » dès le chargement puis collée en haut, étapes seulement dans le menu « ⋮ »,
   pas d'onglets Automobile / Moto / Poids lourd collants. */
@media (max-width: 767px) {
	body.cp-booking-step1 .cp-brandbar { position: relative; transform: none !important; }
	body.cp-booking-step1 .cp-booking-mbar { position: sticky; top: 0; z-index: 60; }
	.admin-bar.cp-booking-step1 .cp-booking-mbar { top: 46px; }
	body.cp-booking-step1 .cp-page-header .cp-steps, body.cp-booking-step1 .cp-finder__sticky { display: none !important; }
}
/* « ⋮ » de la barre mobile : 3 carrés de 6 px comme l'icône « expand » de la prod. */
@media (max-width: 767px) {
	.cp-booking-mbar__toggle:not([aria-expanded="true"]) span, .cp-booking-mbar__toggle:not([aria-expanded="true"]) span::before, .cp-booking-mbar__toggle:not([aria-expanded="true"]) span::after { width: 6px; height: 6px; border-radius: 0; }
	.cp-booking-mbar__toggle:not([aria-expanded="true"]) span::before { top: -8.6px; }
	.cp-booking-mbar__toggle:not([aria-expanded="true"]) span::after { top: 8.6px; }
}
/* Pied de page mobile comme la prod : chevron rouge à droite du titre (et non dessous), 25 px entre les blocs,
   pastille Avis Vérifiés de 225 px. */
@media (max-width: 1023px) {
	.cp-footer .cp-footer__col .cp-footer__title { margin-bottom: 25px; }
	.cp-footer .cp-footer__col .cp-footer__title button { position: static; display: block; width: 100%; }
	.cp-footer .cp-footer__col .cp-footer__title button .cp-icon { display: none; }
	.cp-footer .cp-footer__col .cp-footer__title button::after { content: ""; position: absolute; top: 0; right: 0; width: 17.5px; height: 21px; background: url(../img/prod/arrow.svg) no-repeat center / contain; transform: rotate(90deg); transition: transform .2s; }
	.cp-footer .cp-footer__col.is-open .cp-footer__title button::after { transform: rotate(-90deg); }
	.cp-footer .cp-footer__col.is-open .cp-footer__panel { margin-top: -10px; margin-bottom: 25px; }
	.cp-skeepers-badge--footer, .cp-skeepers-badge--footer img { width: 225px !important; height: auto !important; max-width: none; }
}
/* Barres de pagination des carrousels : toujours sur une seule ligne (elles rétrécissent au lieu de passer à la ligne). */
.cp-slider__bars { flex-wrap: nowrap !important; min-width: 0; }
.cp-slider__bars i { flex: 0 1 32px; min-width: 6px; }
/* Boutons des cartes centres (« Je veux voir la fiche », « Je choisis ce centre ») : 38,5 px de haut comme la prod,
   chevron sorti du flux pour ne plus agrandir la ligne. */
.cp-centre-card .cp-centre-card__actions .cp-btn--block { position: relative; min-height: 0; }
.cp-centre-card .cp-btn--block > span { display: block; line-height: inherit; }
.cp-centre-card .cp-btn--block > .cp-icon { position: absolute; top: 50%; right: 22px; margin: 0; transform: translateY(-50%); }
/* Listes de centres en mobile : 10 px de marge latérale comme la prod (.control-center-loop), cartes de 370 px. */
@media (max-width: 767px) { .cp-section--finder .cp-finder__block > .cp-container { padding-inline: 10px; } }
/* « Géolocaliser ma position » : viseur plein noir de la prod (symbole #geoloc). */
.cp-search__locate .cp-icon--geoloc, .cp-search__locate .cp-icon--geoloc path { fill: #000; stroke: none; }
.cp-search__locate .cp-icon--geoloc { width: 22px; height: 22px; }
/* Accueil mobile : survol des accès rapides (« Prendre rendez-vous sur notre site »…) comme la prod en dessous de
   768 px : texte rouge souligné sur fond blanc, picto inchangé (l'inversion navy / blanc est réservée au desktop). */
@media (max-width: 767px) {
	.cp-hero .cp-quick .cp-quick__item:hover img, .cp-hero .cp-quick .cp-quick__item:focus-visible img { filter: none; }
}
/* Fiche centre mobile : picto d'adresse à la taille des pictos téléphone / message (25 px), pas de bouton
   « haut de page » (absent de la fiche en prod, il masquait les prix), tarifs décollés des bords. */
@media (max-width: 1024px) {
	.single-control-center section.article_content .centre .infosCentre .entry__address-icon:before { width: 25px !important; height: 25px !important; }
	.single-control-center .cp-to-top { display: none; }
	body.single-control-center section.prestations.prestations { padding-left: 20px; padding-right: 20px; }
}
/* Cartes du bas de page (Trouver un centre, Prendre rendez-vous, Mes services plus) : 20 px des bords en mobile, comme la prod. */
@media (max-width: 767px) { .cp-prefooter > .cp-container { padding-left: 15px; padding-right: 15px; } }
/* Pictos « Trouver un centre » / « Prendre rendez-vous » du menu : images de la prod, 1px avant le texte. */
/* Pictos du menu comme la prod (#menu-principale li ._before) : 1,2 em / 1,5 em de large, filet blanc de 5 px à droite
   et de 10 px dessous (compensé par une marge négative), 1 px de marge : l'écart picto / texte est celui de la prod. */
.cp-menu .cp-menu__action > a { gap: 0 !important; font-weight: 900; }
.cp-menu__action > a .cp-menu__ico { flex: none; box-sizing: content-box; width: 1.2em; height: auto; margin: 0 1px -10px 0; border-right: 5px solid #fff; border-bottom: 10px solid #fff; }
.cp-menu__action > a .cp-menu__ico[src*="calendar"] { width: 1.5em; }
/* Suggestions Google (recherche de ville) comme la prod : picto lieu gris, partie saisie en gras, « powered by Google ». */
.cp-search__suggest.is-google { padding: 0; border-radius: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); font-family: Arial, sans-serif; }
.cp-search__suggest.is-google li { display: flex; align-items: baseline; gap: 6px; padding: 9px 12px 9px 34px; border-top: 1px solid #e6e6e6; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat 10px center / 16px; color: #000; font-size: 15px; }
.cp-search__suggest.is-google li:first-child { border-top: 0; }
.cp-search__suggest.is-google li span { font-weight: 400; }
.cp-search__suggest.is-google li b { font-weight: 700; }
.cp-search__suggest.is-google li small { color: #555; font-size: 13px; }
.cp-search__suggest.is-google li[aria-selected="true"], .cp-search__suggest.is-google li:hover { background-color: #ebf2fe; }
.cp-search__suggest.is-google .cp-search__powered, .cp-search__suggest.is-google .cp-search__powered:hover { justify-content: flex-end; padding: 6px 10px; background: #fff; color: #777; font-size: 12px; cursor: default; }
/* Titres « Rendez-vous contrôle technique » : soulignement d'épaisseur automatique comme la prod (plus épais que from-font). */
h1.cp-page-header__title--rdv u, .cp-booking-header__title u { text-decoration-thickness: .05em; } /* épaisseur de l Open Sans Bold statique de la prod (102/2048 em), la police variable locale donne un trait 2 fois plus fin */
/* En-têtes de page : pas de voile sur la photo (les photos sont déjà teintées, comme la prod). */
.cp-page-header__media::after, .cp-booking-header .cp-page-header__media::after { content: none; }
/* Boutons Stackable des contenus (« Trouver un centre », « Notre démarche RSE »…) : pilule rouge de la prod même
   quand le bloc a perdu ses styles en ligne (contenu ré-enregistré), au lieu du bleu par défaut de Stackable. */
.wp-block-ugb-button .ugb-button:not(.ugb-button--design-plain):not(.ugb-button--design-ghost):not(.ugb-button--design-link) { display: inline-block; padding: 15px 20px 15px 60px; border: 0; border-radius: 50px; background-color: #ff0014; color: #fff; line-height: 24px; text-decoration: none; }
.wp-block-ugb-button .ugb-button:not(.ugb-button--design-plain):not(.ugb-button--design-ghost):not(.ugb-button--design-link) span { color: #fff; font-weight: 700; }
.wp-block-ugb-button .ugb-button:not(.ugb-button--design-plain):not(.ugb-button--design-ghost):not(.ugb-button--design-link) span::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 30px; background: url(../img/prod/arrow-white.svg) no-repeat center / 10px; }
.wp-block-ugb-button .ugb-button:not(.ugb-button--design-plain):not(.ugb-button--design-ghost):not(.ugb-button--design-link):hover { background-color: #cc0010; color: #e6e5e5; }
/* Barre « < PRENDRE RENDEZ-VOUS ⋮ » calée sur .search-steps__header de la prod : 56 px + filet gris #ebebeb,
   sans ombre, flèche pleine 14 × 17 à 15 px du bord, titre 12 px / 800 / 2 px centré, « ⋮ » à 19 px du bord. */
@media (max-width: 767px) {
	body .cp-booking-mbar { grid-template-columns: 40px 1fr 44px; height: 57px; padding: 0; border-bottom: 1px solid #ebebeb; box-shadow: none; }
	body .cp-booking-mbar__back { width: 40px; height: 56px; padding-left: 15px; place-items: center start; }
	body .cp-booking-mbar__back .cp-icon { display: none; }
	body .cp-booking-mbar__back::before { content: ""; width: 14px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 329 518'%3E%3Cpath fill='%23ff0014' d='M139.906 258.902l189.1 189.1-70.004 70.004L.201 259.205l.101-.102-.302-.302L258.801 0l70.004 70.004-188.9 188.898z'/%3E%3C/svg%3E") no-repeat center / contain; }
	body .cp-booking-mbar__title { font-size: 12px; font-weight: 800; letter-spacing: 2px; line-height: 19.4px; }
	body .cp-booking-mbar__toggle { width: 44px; height: 56px; }
}
/* Pages Rendez-vous en mobile, au défilement comme la prod : les onglets Automobile / Moto / Poids lourd restent
   collés sous la barre (top 56 px) tant que le bloc de recherche est à l'écran, puis partent avec lui. */
@media (max-width: 767px) {
	body.cp-booking-step1 .cp-finder__card { overflow: visible; }
	body.cp-booking-step1 .cp-finder__card > .cp-vtabs { position: sticky; top: 56px; z-index: 5; background: #fff; }
	.admin-bar.cp-booking-step1 .cp-finder__card > .cp-vtabs { top: 102px; }
}
@media (max-width: 767px) { body.cp-booking-step1 .cp-finder__slider { padding-top: 10px; } } /* 1re carte à 140 px des onglets « Nos centres », comme la prod */
/* Cartes centres des listes en mobile, au pixel près de la prod (.control-center) : photo pleine largeur de la carte
   (370 px, sans retrait), collée en haut, texte 10 px plus bas, pictos L / VL à 25 px du bord → même pas de 543 px par carte. */
@media (max-width: 767px) {
	.cp-finder__list .cp-centre-card__box { padding-top: 0; padding-bottom: 10px; }
	.cp-finder__list .cp-centre-card__media { margin-left: -15px; margin-right: -15px; height: 200px; }
	.cp-finder__list .cp-centre-card__media img { width: 100%; height: 200px; object-fit: cover; }
	.cp-finder__list .cp-centre-card__body { padding-top: 10px; }
	.cp-finder__list .cp-centre-card__actions { padding-top: 19px; }
	.cp-finder__list .cp-centre-card__types { transform: translateX(5px); }
}
