/*
Theme Name: MobiLille
Theme URI: https://mobilille.fr
Description: Thème du site MobiLille


*/

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100;
    src: url(/wp-content/themes/mobilille/files/mobilille-fonts/Roboto-Thin.woff2) format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    src: url(/wp-content/themes/mobilille/files/mobilille-fonts/Roboto-Light.woff2) format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: normal;
    src: url(/wp-content/themes/mobilille/files/mobilille-fonts/Roboto-Regular.woff2) format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: url(/wp-content/themes/mobilille/files/mobilille-fonts/Roboto-Medium.woff2) format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: bold;
    src: url(/wp-content/themes/mobilille/files/mobilille-fonts/Roboto-Bold.woff2) format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 900;
    src: url(/wp-content/themes/mobilille/files/mobilille-fonts/Roboto-Black.woff2) format("woff2");
}

@font-face {
    font-family: 'Meridiana Pro';
    src: url('/wp-content/themes/mobilille/files/mobilille-fonts/MeridianaPro-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Meridiana Pro';
    src: url('/wp-content/themes/mobilille/files/mobilille-fonts/MeridianaPro-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Meridiana Pro';
    src: url('/wp-content/themes/mobilille/files/mobilille-fonts/MeridianaPro-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Meridiana Pro';
    src: url('/wp-content/themes/mobilille/files/mobilille-fonts/MeridianaPro-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Meridiana Pro';
    src: url('/wp-content/themes/mobilille/files/mobilille-fonts/MeridianaPro-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Meridiana Pro';
    src: url('/wp-content/themes/mobilille/files/mobilille-fonts/MeridianaPro-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Meridiana Pro';
    src: url('/wp-content/themes/mobilille/files/mobilille-fonts/MeridianaPro-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Meridiana Pro';
    src: url('/wp-content/themes/mobilille/files/mobilille-fonts/MeridianaPro-Heavy.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

body {
    --mobilille-bleu: #0984E3;
    --mobilille-or: #ffcc02;
    --mobilille-orange: #FF4122;
    --mobilille-vert: #01BD88;
    --mobilille-red: #FD2237;
    --mobilille-noir: #111;
    --mobilille-rose: #FF5C5C;
	--mobilille-primary: #3100D0;
    quotes: "«\00A0" "\00A0»";
    font-family: "Inter","Open Sans",sans-serif;
    font-weight: normal;
    background-color: #f9f9f9;
}

a {
	color: var(--mobilille-primary);
	text-decoration: underline;
}

.section-title {
    font-family: "Meridiana Pro" !important;
}

.section-title h1, .section-title h2 {
    font-family: "Meridiana Pro" !important;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	font-weight: 800;
	font-family: "Meridiana Pro";
}

.meridiana-title {
	font-weight: 800;
	font-family: "Meridiana Pro";
}

.elementor-heading-title.elementor-size-default {
	font-family: "Meridiana Pro" !important;
	font-weight: 800 !important;
}

#wp-admin-bar-wpseo-menu {
	display: none;
}

/* Configuration générale des icones */

.mobilille-metro::before {
    content: url(/wp-content/themes/mobilille/img/picto/metropolitain.svg);
    display: block;
    width: 25px;
    margin: 0 auto;
}

.mobilille-metro-trafic {
    display: inline-flex;
}

.mobilille-metro-trafic::before {
    content: url(/wp-content/themes/mobilille/img/picto/metropolitain.svg);
    display: block;
    width: 22px;
}

.mobilille-bus::before {
    content: url(/wp-content/themes/mobilille/img/picto/bus.svg);
    display: block;
    width: 25px;
    margin: 0 auto;
}

.mobilille-bus-trafic {
    display: inline-flex;
}

.mobilille-bus-trafic::before {
    content: url(/wp-content/themes/mobilille/img/picto/bus.svg);
    display: block;
    width: 22px;
}

.mobilille-tram::before {
    content: url(/wp-content/themes/mobilille/img/picto/tramway.svg);
    display: block;
    width: 25px;
    margin: 0 auto;
}

.mobilille-tram-trafic {
    display: inline-flex;
}

.mobilille-tram-trafic::before {
    content: url(/wp-content/themes/mobilille/img/picto/tramway.svg);
    display: block;
    width: 22px;
}

.mobilille-vlille-trafic::before {
    content: url(/wp-content/themes/mobilille/img/picto/vlille.svg);
    display: block;
    width: 22px;
}

.mobilille-sncf::before {
    content: url(/wp-content/themes/mobilille/img/picto/sncf.svg);
    display: block;
    width: 40px;
    margin: 0 auto;
}

.mobilille-ilevia::before {
    content: url(/wp-content/themes/mobilille/img/picto/ilevia.svg);
    display: block;
    width: 40px;
    margin: 0 auto;
}

.mobilille-ilevia-nav::before {
	content: url(/wp-content/themes/mobilille/img/picto/ilevia.svg);
	display: inline-block;
	width: 20px;
	line-height: 1;
	vertical-align: bottom;
	margin-left: 5px;
	margin-right: 5px;
}

.mobilille-vlille-nav::before {
	content: url(/wp-content/themes/mobilille/img/picto/vlille.svg);
	display: inline-block;
	width: 20px;
	line-height: 1;
	vertical-align: bottom;
	margin-left: 5px;
	margin-right: 5px;
}

/** Pictos info trafic **/

.picto-ok::before {
    content: "\F26A";
    display: none;
    padding: 5px;
    border-radius: 50%;
    font-family: "bootstrap-icons";
    font-size: 11px;
    color: white;
    background: var(--mobilille-vert);
}

.picto-info::before {
    content: "\F430";
    display: none;
    padding: 5px;
    border-radius: 50%;
    font-family: "bootstrap-icons";
    font-size: 11px;
    color: white;
    background: var(--mobilille-bleu);
}

.picto-degraded::before {
    content: "\F332";
    display: none;
    padding: 5px;
    border-radius: 50%;
    font-family: "bootstrap-icons";
    font-size: 11px;
    color: white;
    background: var(--mobilille-orange);
}

.picto-incident::before {
    content: "\F332";
    display: none;
    padding: 5px;
    border-radius: 50%;
    font-family: "bootstrap-icons";
    font-size: 11px;
    color: white;
    background: var(--mobilille-red);
}

.picto-closed::before {
    content: "\F622";
    display: none;
    padding: 5px;
    border-radius: 50%;
    font-family: "bootstrap-icons";
    font-size: 11px;
    color: white;
    background: var(--mobilille-noir);
}

/* ***--------*** */

/* -- Header + nav -- */

.mobi-nav {
    margin-right: auto;
    margin-left: auto;
}

.mobilille-header .separator {
    display: block;
    height: 30px;
    margin-right: 20px;
    margin-left: 15px;
    border-right: 1px solid #e7e7e7;
}

.mobi-nav li {
    padding-right: 10px;
    padding-left: 10px;
}

.px-2 {
    margin-bottom: 4px;
    padding-right: 15px !important;
    padding-left: 15px !important;
    border-color: var(--mobilille-noir);
    border-radius: 8px;
    font-family: "Inter",sans-serif;
    font-size: 17px;
    color: var(--mobilille-noir);
    background: #f9f9f9;
    transition: 0.1s ease-in-out;
}

.nav-link:hover {
    margin-bottom: 0 !important;
    border-bottom: 4px var(--mobilille-noir) solid;
    border-radius: 0;
    transition: 0.1s ease-in-out;
}

/* */

.btn-close-modal {
	box-sizing: content-box !important;
	width: 1em;
	height: 1em;
	padding: .25em .25em !important;
	color: #000;
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
	border: 0;
	border-radius: .375rem;
	opacity: .5;
}

#ui-id-1 {
	z-index: 999999;
}

/* POST SLIDER */

.center-blocks {
    display: block;
    z-index: 55;
    position: relative;
    width: 990px;
    margin-top: -90px;
    margin-right: auto;
    margin-left: auto;
}

.text-decoration-none.block.disabled {
	opacity: 1;
	pointer-events: none;
}

.text-decoration-none.block.disabled .block-item-icon, .text-decoration-none.block.disabled .block-item-text {
    opacity: 0.5;
}

.block-item {
    padding: 18px;
    border-radius: 5px;
    text-align: center;
    font-family: "Meridiana Pro";
    background: white;
    box-shadow: 0 6px 34px 0 rgba(112, 113, 115, 0.53);
    transition: 0.2s ease-in-out;
}

.block-item:hover {
    transition: 0.2s ease-in-out;
    transform: scale(1.05);
}

.block-item-icon {
    height: 60px;
    font-size: 35px;
}

.block-item.map {
    color: white;
    background: linear-gradient(to top,rgba(0,0,0,0.9) 0,rgba(0,0,0,0.738) 19%,rgba(0,0,0,0.541) 34%,rgba(0,0,0,0.382) 47%,rgba(0,0,0,0.278) 56.5%,rgba(0,0,0,0.194) 65%,rgba(0,0,0,0.126) 73%,rgba(0,0,0,0.075) 80.2%,rgba(0,0,0,0.042) 86.1%,rgba(0,0,0,0.021) 90%,rgba(0,0,0,0.008) 90%,rgba(0,0,0,0.002) 90%,rgba(0,0,0,0) 90%) no-repeat bottom center,url(/wp-content/uploads/2024/07/map.jpg);
    background-position: bottom;
    background-size: cover;
}
.block-item.mozerb {
    /*background-image: url(/wp-content/themes/mobilille/img/photos/6.png);*/
    background-size: cover;
}

.block-titre {
    font-size: 25px;
}

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

a.block:hover {
    text-decoration: none;
    color: inherit;
}

a.block .map:hover {
    text-decoration: none;
    color: white !important;
}

.py-15 {
    padding-top: .5rem !important;
    padding-bottom: 1.5rem !important;
}

.container.py-4.mt-4.alertes {
    max-width: 1000px;
}

.card-title {
	font-family: "Meridiana Pro";
	line-height: 1.1;
	font-weight: 800;
}

/* NEW INFO TRAFIC */

span.hour {
    color: var(--mobilille-rose);
}

.info-trafic-reseau {
    display: flex;
    padding: 35px;
}

.info-trafic-card {
    border-bottom: 1px solid #8585854d;
}

.info-trafic-card:last-child {
    border-bottom: 0 !important;
}

.info.bg-white {
    box-shadow: 0 6px 34px 0 rgba(112, 113, 115, 0.53);
}

.info-trafic-name {
    display: flex;
    flex-basis: 150px;
    font-family: "Meridiana Pro";
    font-size: 19px;
    font-weight: bold;
    vertical-align: middle;
}

.info-icon {
    margin-top: 2px;
    margin-right: 10px;
}

.info-trafic-slide {
	flex-basis: 100%;
	flex-wrap: wrap;
	display: flex;
	gap: 15px;
}

.info-trafic-button a {
    font-size: 20px;
    color: gray !important;
}

.info-trafic-box {
    width: 30px;
    margin-right: 15px;
}

/* Ajouts V'Lille */

.info-trafic-grid {
	display: grid;
	flex-basis: 100%;
	grid-template-columns: 1fr 1fr;
	column-gap: 45px;
	margin-right: 35px;
}

.station-state img {
    font-size: 1px;
    width: 20px;
  }

  .station-item {
	display: flex;
	padding-bottom: 10px;
	border-bottom: 2px solid #d2d2d2;
	margin-bottom: 15px;
	font-family: "Meridiana Pro";
	font-weight: bold;
}

.station-name {
    font-weight: flex;
    flex-basis: 100%;
  }
  
  
/* Différents états */

.info-trafic-box.degraded::before {
	content: url("/wp-content/themes/mobilille/img/picto/state/degraded_l.svg");
	display: initial;
	position: absolute;
	box-sizing: border-box;
	width: 25px;
	height: 25px;
	margin-top: 14px;
	margin-left: 38px;
}

.info-trafic-box.reduit.degraded::before {
    content: url("/wp-content/themes/mobilille/img/picto/state/degraded_l.svg");
    display: initial;
    position: absolute;
    box-sizing: border-box;
    width: 25px;
	height: 25px;
    margin-top: 17px;
    margin-left: 20px;
}

.info-trafic-box.incident::before {
    content: url("/wp-content/themes/mobilille/img/picto/state/incident.svg");
    display: initial;
    position: absolute;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: 16px;
    margin-left: 38px;
}

.info-trafic-box.reduit.incident::before {
    margin-top: 17px;
    margin-left: 20px;
}

.info-trafic-box.closed::before {
    content: url("/wp-content/themes/mobilille/img/picto/state/closed_l.svg");
    display: initial;
    position: absolute;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: 16px;
    margin-left: 38px;
}

.info-trafic-box.reduit.closed::before {
    margin-top: 17px;
    margin-left: 20px;
}

.nav-link.px-2.active {
    border-bottom: 3px solid var(--mobilille-bleu);
}

.mobilille-header {
	position: relative;
	background: white !important;
}

  /* Nouveau menu dropdown */

  .dropdown-menu {
	border-radius: 0;
	padding-top: 0px;
	padding-bottom: 0px;
	border: 0px;
	box-shadow: 0 1.2rem 1.3rem 0 rgba(17,17,18,.2);
	margin-top: 14px !important;
    }

.nav-link:focus {
	margin-bottom: 0 !important;
	border-bottom: 4px var(--mobilille-noir) solid;
	border-radius: 0;
	transition: 0.1s ease-in-out;
    }
  
  .dropdown-item {
    padding: 15px 20px 15px 20px;
    border-bottom: 1px solid #e6f0ff;
  }

  .dropdown-item:last-child {
	border-bottom: 0px;
}

  .dropdown-toggle::after {
	display: inline-block;
	margin-left: 10px;
	vertical-align: middle;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;
}

.dropdown-item .bi.bi-chevron-right {
	font-size: 10px;
	vertical-align: middle;
}
  

.color-white {
    color: white;
}

.line-number {
    font-size: 22px;
}

.slide {
    width: 100%;
    height: 73px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.head-0 .nav-item a {
    color: white !important;
}

.head-1 .nav-item a {
    font-weight: 300;
    color: var(--mobilille-bleu);
}

.head-1 .trafic a {
    font-weight: 400;
    color: var(--mobilille-orange);
}

/* Ticker */

.mobilille-alert {
    padding: 10px;
    background: #eee;
}

.mobilille-alert .icon {
    font-size: 20px;
    font-weight: bold;
    color: var(--mobilille-bleu);
}

.mobilille-alert .mobilille-text {
    vertical-align: middle;
}

/* Banner */

.banner {
    position: relative;
    text-align: left;
}

.banner-img {
    width: 100%;
    height: 400px;
    max-height: 400px;
    object-fit: cover;
}

.banner-text {
    padding: 30px;
}

.credits {
    position: absolute;
    left: 0;
    padding: 5px 10px;
    border-radius: 0.5em 0 0 0;
    color: #fffba;
    opacity: 0.7;
    background: #464646;
}

/* Trafic */

.trafic-box {
    padding: 30px;
}

.col-1.info-line {
    margin-bottom: 40px;
}

.col-11.inline {
    display: flex;
}

.trafic-line {
    width: fit-content;
    height: 50px;
    margin: 6px;
    margin-left: 3px;
    padding: 12px;
    max-width: 50px;
    min-width: 50px;
    border-radius: 5px;
    text-align: center;
    background-color: #eee;
}

.number {
    margin-top: auto;
    margin-left: -1px;
    padding-top: 0;
    text-decoration: none;
    -webkit-text-stroke-width: 1px;
    color: black;
}

.number.M2 {
    color: white;
}

.number.white {
    color: white;
}

.number.TRAM {
    font-size: 13px;
    color: white;
}

.trafic-line.tram {
    padding: 10px 0 0 2px;
}

.bus-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.metro-line-picto {
    width: 30px;
}

/* -- États du traffic -- */

.trafic-line.ok {
    border: 2px solid var(--mobilille-vert);
}

.trafic-line.ok .picto-ok::before {
    display: initial !important;
}

.trafic-line.info {
    border: 2px solid var(--mobilille-bleu);
}

.trafic-line.info .picto-info::before {
    display: initial !important;
}

.trafic-line.degraded {
    border: 2px solid var(--mobilille-orange);
}

.trafic-line.degraded .picto-degraded::before {
    display: initial !important;
}

.trafic-line.incident {
    border: 2px solid var(--mobilille-red);
}

.trafic-line.incident .picto-incident::before {
    display: initial !important;
}

.trafic-line.closed {
    border: 2px solid black;
}

.trafic-line.closed .picto-closed::before {
    display: initial !important;
}

.info.travaux .alerte-travaux,
.degraded.travaux .alerte-travaux,
.incident.travaux .alerte-travaux,
.closed.travaux .alerte-travaux {
    display: block;
    position: relative;
    right: -20px;
    bottom: 17px;
    width: .7em;
    background-color: transparent !important;
}

.info .alerte-travaux,
.ok .alerte-travaux,
.degraded .alerte-travaux,
.incident .alerte-travaux,
.closed .alerte-travaux {
    display: none;
}

.info-service {
    margin: 15px 0 15px 0;
    padding: 25px;
    background: var(--mobilille-or);
}

/** **/

.metro_lines-template-default .mb-4,
.tax-line .mb-4 {
    margin-bottom: 0 !important;
}

.bus_lines-template-default .mb-4,
.tax-line .mb-4 {
    margin-bottom: 0 !important;
}

.tram_lines-template-default .mb-4,
.tax-line .mb-4 {
    margin-bottom: 0 !important;
}

.train_hdf-template-default .mb-4,
.tax-line .mb-4 {
    margin-bottom: 0 !important;
}

.page-template-tpl-horaires-brm-m1 .mb-4,
.tax-line .mb-4 {
    margin-bottom: 0 !important;
}

.page-template-tpl-itineraires .mb-4,
.tax-line .mb-4 {
    margin-bottom: 0 !important;
}

.post-template-default .mb-4 {
    margin-bottom: 0 !important;
}

.arrets-template-default .mb-4 {
    margin-bottom: 0 !important;
}

.home .mobilille-header .mb-3 {
    margin-bottom: 0 !important;
}

.picto-head {
	height: 30px;
}

.weight {
    font-weight: bold;
}

.bg-mobilille {
	padding: 25px;
	text-transform: uppercase;
	color: black;
	background: var(--mobilille-noir);
}

.dot {
    padding: 5px 15px 5px 15px;
    color: black !important;
    background: white;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 9px;
}

.dot.green::before {
    content: "";
    display: inline-grid;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--mobilille-vert);
    animation-name: clignoter;
    animation-duration: .8s;
    animation-iteration-count: infinite;
    transition: none;
}

.dot.white::before {
    content: "";
    display: inline-grid;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--mobilille-bleu);
    animation-name: clignoter;
    animation-duration: .8s;
    animation-iteration-count: infinite;
    transition: none;
}

.dot.warn::before {
    content: "";
    display: inline-grid;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--mobilille-or);
    animation-name: clignoter;
    animation-duration: .8s;
    animation-iteration-count: infinite;
    transition: none;
}

.dot.dang::before {
    content: "";
    display: inline-grid;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--mobilille-red);
    animation-name: clignoter;
    animation-duration: .8s;
    animation-iteration-count: infinite;
    transition: none;
}

@keyframes clignoter {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.news hr {
    border-top: 2px dashed;
    border-top-color: var(--mobilille-bleu);
    opacity: 0.5;
}

.single-title {
	font-family: "Meridiana Pro";
	line-height: 1.1;
	font-weight: 900;
}

.mobilille-alert.incident {
    color: white;
    background: var(--mobilille-orange);
}

.com img {
    width: 80%;
    margin: 0 auto;
}

.mobile,
.separator.mobile {
    display: none;
}

/* Home for mobile */

@media screen and (max-width:990px) {
    .d-flex.align-items-center.mb-2.mb-lg-0.link-body-emphasis.text-decoration-none img {
        margin-right: 0 !important;
    }

    .mobile,
    .separator.mobile {
        display: block;
    }

    .mobilille-header .nav.col-12.col-lg-auto.me-lg-auto.mb-2.justify-content-center.mb-md-0.mobi-nav {
        display: none;
    }

    .d-flex.flex-wrap.align-items-center.justify-content-center.justify-content-lg-start {
        justify-content: left !important;
        margin-left: 10px;
    }

    .center-blocks {
        width: 100%;
    }

    .container.slider {
        display: block !important;
      }

      .slider .button {
        margin-top: auto;
        margin-bottom: 15px !important;
    }

    .splide__arrows.splide__arrows--ltr {
        display: none;
    }

    .center-blocks {
        margin-top: 0px;
    }
    /* bloc info trafic */

    .info .reseau {
        display: none;
    }

    .info-trafic-name {
        flex-basis: 50px;
    }

    #splide02 {
        z-index: 1;
        position: static;
    }

    .info-trafic-grid {
        grid-template-columns: 1fr;
        margin-right: 5px;
        margin-left: 0px;
    }

    .mobilille-header {
        position: unset;
    }

    .d-grid {
        display: block !important;
    }

    .bg-light.border.rounded-3 {
        margin-top: 10px;
    }

    .bus-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

@media screen and (min-width:991px) and (max-width:1400px) {
    .bus-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

@media screen and (min-width:360px) and (max-width:500px) {
    .bus-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .mobilille-sncf::before {
        content: url(/wp-content/themes/mobilille/img/picto/sncf.svg);
        display: block;
        width: 30px;
        margin: 0 auto;
    }
}

@media screen and (max-width:570px) {
    .dot {
        padding: 5px 10px 5px 10px;
        font-size: 11px;
        color: black;
        background: white;
    }
}

.nav-link.covid.px-2 {
    font-weight: inherit;
    color: white;
    background: var(--mobilille-orange);
}

/* Métro style */

.service-aux-voyageurs ul::before {
    background-color: #F2C931;
}

.service-aux-voyageurs ul::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 7px;
    width: 7px;
    background-color: #f2c931;
}

.service-aux-voyageurs ul {
    position: relative;
    padding-left: 0;
    overflow: auto;
}

.service-aux-voyageurs ul li::before {
    border: 3px solid #F2C931;
}

.service-aux-voyageurs ul li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border: 3px solid #f2c931;
    border-radius: 50%;
    background: #fff;
}

.service-year.my-auto.text-center {
    position: initial;
    padding: 13%;
    vertical-align: baseline;
    color: white;
    background: var(--bs-gray);
}

.station-badge {
    padding: 10px;
    text-transform: uppercase;
    font-size: larger;
    font-weight: bold;
    color: white;
    background: var(--mobilille-bleu);
}

.mobilille-alert.urgent {
    background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange);
}

.mobilille-alert.urgent .icon {
    color: #fff;
}

.station-unit.text-decoration-none::before {
    content: "";
    z-index: 12;
    width: 20px;
    height: 20px;
    margin-top: auto;
    margin-right: 10px;
    margin-bottom: auto;
    border: var(--bs-blue) 3px solid;
    border-radius: 52%;
    background: white;
}

.station-unit.text-decoration-none {
    display: flex;
    margin-bottom: 7px;
}

.line-stations::before {
    content: "";
    z-index: 11;
    position: absolute;
    top: 332px;
    bottom: 0;
    left: 350px;
    width: 7px;
    background: var(--bs-blue);
}

.mattdev-logo {
    padding-bottom: 24px;
    text-decoration: none;
    font-size: 17px;
    color: #4d4d4d;
    opacity: 0.4;
}

.mattdev-logo:hover {
    color: #4d4d4d;
}

.tiret-infotrafic::before {
    content: "";
    display: block;
    width: 100%;
    height: 12px;
    margin-top: -7px;
    background-image: url(/wp-content/themes/mobilille/img/tiret.svg);
}

.alerte-info h6 {
    margin-bottom: 3px;
}

.bi {
    -webkit-text-stroke-width: 0;
}

.alerte-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20px 20px 0 20px;
    background: #8080800a;
}

.item.date {
    text-align: right;
}

.alerte-info .content {
    padding: 20px 20px 0 20px;
}

.alerte-info {
	margin-bottom: 30px;
	border: 1px solid #80808033;
	background-color: white;
	border-radius: 9px;
}

.alerte-grid.info {
	background: var(--wp--preset--gradient--midnight);
	color: white;
	border-radius: 9px 9px 0px 0px;
}

.alerte-grid.perturbation {
	background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red);
	color: white;
	border-radius: 9px 9px 0px 0px;
}

.nav-link.px-2.text-body-secondary {
    color: #5e5e5e;
}

.commentaire {
    margin-bottom: 20px;
    padding: 20px 20px 1px 20px;
    background: #80808014;
}

.info-trafic-ok.text-center {
    padding: 50px;
    background: #80808029;
}

.icon {
    font-size: 40px;
    color: var(--mobilille-vert);
}

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

.img-card-top.wp-post-image {
    width: 100%;
    max-height: 213px;
    border-radius: 3px 3px 0 0;
    object-fit: cover;
}

.actu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 40px;
}

@media screen and (max-width:990px) {
    .actu-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
    }

    @media screen and (max-width:500px) {
    .actu-grid {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 40px;
    }
}
}

@media screen and (max-width:768px) {
    div#sac-output {
        width: 100% !important;
    }

    div#sac-panel {
        width: 100% !important;
        margin-top: 10px;
    }

    .head-1 {
        font-size: 14px;
    }
}

.splide__pagination.splide__pagination--ltr {
    display: none;
}

.mobilille-alerte {
	background: linear-gradient(180deg, rgba(207,27,27,1) 0%, rgb(172, 12, 12) 100%);
}

.mobilille-alerte #splide01 {
    max-height: 350px;
}

#submitchat {
    padding: 10px;
    border: none;
    font-size: initial;
    color: white;
    background: var(--e-global-color-accent);
}

#sac_chat,
#sac_name {
    padding: 5px;
    border: 1px solid gray;
    border-radius: 6px;
}

.col-1.info-line {
    margin-top: 2%;
    margin-bottom: 30px;
}

.container.slider {
    padding-top: 10px;
    max-width: 1000px;
    color: white;
}

.container.slider {
    display: flex;
  }
  
  
  .alert-infos {
    flex-basis: 800px;
  }
  
  .slider .button {
	margin-top: auto;
	margin-bottom: auto;
	flex-basis: 200px;
	text-align: center;
}

  .line strong {
    font-family: "Meridiana Pro";
}
  

.mobilille-alerte #splide01 {
    height: auto;
}

.container.slider {
    padding-top: 21px;
}

.line > img:nth-child(1) {
    width: 29px;
}

.line {
    margin-bottom: 7px;
}

.container.slider {
    padding-top: 25px;
    padding-bottom: 15px;
}

.bouton-alerte {
    margin-bottom: 15px;
    padding: 10px 20px 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background: #212529;
    transition: ease-out 0.2s;
}

.bouton-alerte:hover {
    color: white;
    background: #383c40;
    transition: ease-in 0.2s;
}

.infos p {
    padding-bottom: 15px;
    margin-bottom: 0px !important;
}

.mobilille-alerte #splide01 {
    max-height: 300px;
}

.bouton-alerte.display-none {
    display: none;
}

.card {
    height: 100%;
}

.news {
    margin-bottom: 30px;
}

.home #reseaualerte,
.error404 #reseaualerte,
.page-template-default #reseaualerte {
    margin-top: -16px;
    margin-bottom: 30px;
}

.alertes_reseau-template-default #reseaualerte {
    display: none;
}

#reseaualerte {
    background: #f3f3f8 !important;
}

#reseaualerte .accordion-button {
    background: none;
}

#reseaualerte .accordion-button.collapsed,
#reseaualerte .accordion-button {
    padding-right: 0;
    padding-left: 0;
}

#reseaualerte .accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-icon);
}

#reseaualerte .accordion-button:focus {
    border-color: inherit;
}

#reseaualerte .accordion-button:not(.collapsed) {
    color: inherit;
    background-color: inherit;
}

#reseaualerte .accordion-item {
    background-color: inherit;
}

.accordion-button:focus {
    z-index: 3;
    border-color: var(--bs-accordion-btn-focus-border-color);
    outline: 0;
    box-shadow: none !important;
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: none;
}

#reseaualerte .accordion-button:focus {
    border-bottom: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

.accordion-body {
    padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
    padding-right: 0;
    padding-left: 0;
}

.external {
    margin-top: 10px;
    font-weight: bold;
}

.reseau-alert-box {
    text-decoration: none;
}

.reseau-alert-content {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid;
    border-radius: 11px;
    font-weight: bold;
    background: #e8e8e8;
}

.reseau-alert-content .bi {
    margin-right: 4px;
    padding: 5px;
    font-size: 19px;
}

.css-1qxjd8q {
    width: 25px;
    margin-top: -2px;
    margin-left: -6px;
    fill: #e73137;
}

.reseau-alert-content p {
    display: inherit;
}

.line-number.white {
    color: white;
}

.line-box {
    height: 55px;
    margin-bottom: 28px;
    border: 1px solid gray;
}

.line-number {
    margin-right: auto;
    margin-left: auto;
    padding: 10px;
}

/* NEW FOOTER */

.bg-al-footer {
    background: #090c12;
}

.footer-logos img.al-logo {
    width: 240px;
}

.p40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.p90 {
    padding-top: 90px;
    padding-bottom: 90px;
}

.border-top-al {
    border-top: 3px solid #e4f40b;
}

.cta-x {
    display: -webkit-inline-box;
    padding: 10px 30px 10px 30px;
    border-radius: 26px;
    text-decoration: none;
    color: black;
    background: white;
    transition: ease-out 0.1s;
}

.cta-x:hover {
    color: #e04b11;
    transition: ease-out 0.1s;
}

.column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.footer-box {
    padding: 25px;
    border: 1px solid #E4F40B;
    border-radius: 15px;
}

.link {
    display: block;
    margin-top: 10px;
    padding-bottom: 6px;
    border-bottom: .1rem solid #E4F40B;
    text-decoration: none;
    font-size: 15px;
    color: white;
    transition: ease-out 0.2s;
}

.link:last-child {
    border-bottom: none;
}

.link:hover {
    text-decoration: none;
    color: #E4F40B;
    transition: ease-out 0.2s;
}

.cta-box {
    margin-top: 15px;
    padding: 15px;
    border-radius: 15px;
    background: #80808017;
}

.column-grid {
    column-gap: 50px;
}

.mattdev {
    margin-top: 30px;
    text-align: center;
}

.mattdev-logo {
    color: #fff;
    opacity: 0.3;
}

.mattdev-logo:hover {
    color: white;
}

.mattdev.mobile {
    display: none;
}

@media screen and (max-width:1140px) {
    .column-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .column {
        margin-bottom: 20px;
    }

    .mattdev {
        display: none;
    }

    .mattdev.mobile {
        display: block;
    }

    .p90 {
        padding: 90px 30px 20px 30px;
    }

    .p40 h2 {
        font-size: 20px;
    }
}

.block-admin {
    display: none;
    z-index: 10000;
    position: fixed;
    right: 0;
    bottom: 120px;
    padding: 20px;
    font-size: 20px;
    background: var(--mobilille-red);
}

.predict-box {
    margin-bottom: 10px;
    padding: 18px;
    background: blanchedalmond;
}

.cancel {
    color: red;
}

/* Certification */

.certified {
    display: inline-flex;
    width: 19px;
    height: 18px;
    margin-left: -2px;
    vertical-align: sub;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' aria-hidden='true' class='r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1q142lx r-1inkyih' data-testid='verificationBadge'%3E%3Cg%3E%3Cpath clip-rule='evenodd' d='M12.05 2.056c-.568-.608-1.532-.608-2.1 0l-1.393 1.49c-.284.303-.685.47-1.1.455L5.42 3.932c-.832-.028-1.514.654-1.486 1.486l.069 2.039c.014.415-.152.816-.456 1.1l-1.49 1.392c-.608.568-.608 1.533 0 2.101l1.49 1.393c.304.284.47.684.456 1.1l-.07 2.038c-.027.832.655 1.514 1.487 1.486l2.038-.069c.415-.014.816.152 1.1.455l1.392 1.49c.569.609 1.533.609 2.102 0l1.393-1.49c.283-.303.684-.47 1.099-.455l2.038.069c.832.028 1.515-.654 1.486-1.486L18 14.542c-.015-.415.152-.815.455-1.099l1.49-1.393c.608-.568.608-1.533 0-2.101l-1.49-1.393c-.303-.283-.47-.684-.455-1.1l.068-2.038c.029-.832-.654-1.514-1.486-1.486l-2.038.07c-.415.013-.816-.153-1.1-.456zm-5.817 9.367l3.429 3.428 5.683-6.206-1.347-1.247-4.4 4.795-2.072-2.072z' fill-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.noobie {
    filter: invert(68%) sepia(7%) saturate(1049%) hue-rotate(162deg) brightness(87%) contrast(83%);
}

.expert {
    filter: invert(40%) sepia(95%) saturate(1483%) hue-rotate(23deg) brightness(107%) contrast(101%);
}

.normal {
    filter: invert(46%) sepia(96%) saturate(1696%) hue-rotate(179deg) brightness(98%) contrast(92%);
}

#splide02 img {
    display: block;
    width: 100%;
    margin-right: auto;
    margin-bottom: 40px;
    margin-left: auto;
}

#splide02 {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (max-width:1200px) {
    #splide02 img {
        width: 100%;
    }

    #splide02 {
        width: 100%;
    }

    #splide02 .splide__arrows.splide__arrows--ltr {
        display: none;
    }
}

.ligne-transports {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
    background: #eaeaea;
}

.line_picto_type img {
    width: 33px;
    margin-right: 5px;
}

.line_picto img {
    width: 50px;
    height: 33px;
    margin-right: 2px;
    margin-left: 2px;
}

/* Horaire Box */

/* Feuille de style intégrée #31 | https://actus-lillois.fr/arret/pont-de-bois/ */

.horaire-box {
	margin-bottom: 40px;
	border: 1px solid #ededed;
	background: white;
}

.horaire-box .horaire-header {
    padding: 30px;
    border-bottom: 2px solid #ededed;
}

.attente {
    padding: 15px !important;
    text-align: center;
    vertical-align: middle;
}

.attente {
    padding: 15px !important;
    text-align: center;
}

.terminus {
    width: 400px;
    padding: 15px !important;
}

.time-box.realtime::after {
	content: url("https://mobilille.fr/wp-content/themes/mobilille/img/realtime_orange.svg");
	margin-left: 70px;
	position: absolute;
	animation: clignoter 2s infinite;
	line-height: 1;
}

.table.table-striped.horaires {
    margin-bottom: 0 !important;
}

@keyframes clignoter {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 0.1;
    }

    100% {
        opacity: 1;
    }
}

.animated {
	width: auto;
	animation: clignoter 2s infinite;
	transform: translateY(-8px);
}

.horaires-box-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 70px;
}

.time-box {
    font-weight: bold;
    display: flex;
    justify-content: center;
}

.animated.realtime {
	margin-left: 3px;
}

@media screen and (max-width:990px) {
    .horaires-box-grid {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 70px;
    }

    .terminus {
        width: 300px;
        padding: 15px !important;
    }
}

/* Metro map */

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);

/** * Line colors */

.container-map {
    position: relative;
    margin: 0 auto;
    max-width: 915px;
    border-radius: 0.25em;
    font-family: "Open Sans Condensed",sans-serif;
    font-size: 1.25em;
    line-height: 1.4;
}

.container-map strong {
    -webkit-text-stroke: 0;
}

.line-trace a {
    text-decoration: underline #8080802e;
    text-decoration-thickness: 1px;
    color: black;
}

.container-map h1 small,
.container-map h2 small {
    font-weight: 100;
}

.container-map li {
    height: 1.75em;
    margin-bottom: 0.2em;
}

/**
   * Set the line station list
   */

.line-trace {
    margin-left: 10em;
    padding: 0;
    list-style-type: none;
}

/**
   / Line color
   */

.line--ME1 {
    border-left: 4px solid #fdc41f;
}

.line--ME2 {
    border-left: 4px solid #e30613;
}

/**
   * station--default: place the station name at the left of the line and add normal station circle
   * station--start: same as default but place an terminus circle for the first station
   * station--end: same as station-start but for the bottom station
   */

.station {
    width: 31em;
    margin-left: -32em;
    text-align: right;
    line-height: 1.75em;
}

.station--default::before {
    content: "";
    position: absolute;
    left: 9.75em;
    width: 14px;
    height: 14px;
    margin-top: 0.625em;
    border: 2px solid black;
    border-radius: 50%;
    background-color: #fff;
}

.station--default a {
	font-weight: normal;
}

.station--pole a, .station--start a, .station--end a {
    font-weight: bold;
}

.overflow-station-open {
    overflow: inherit !important;
}

.station--pole::before {
    content: "";
    position: absolute;
    left: 9.7em;
    width: 17px;
    height: 17px;
    margin-top: 10px;
    border: 3px solid black;
    border-radius: 50%;
    background-color: #fff;
}

.station--start::before {
    content: "";
    position: absolute;
    left: 9.75em;
    width: 14px;
    height: 29px;
    border: 2px solid black;
    border-bottom-left-radius: 999px;
    border-bottom-right-radius: 999px;
    background-color: #fff;
}

.station--end::before {
    content: "";
    position: absolute;
    left: 9.75em;
    width: 14px;
    height: 29px;
    margin-top: 0.625em;
    border: 2px solid black;
    border-top-left-radius: 999px;
    border-top-right-radius: 999px;
    background-color: #fff;
}

/**
   * Place connection list at the right of the line
   */

.connections {
    display: inline-flex;
    position: absolute;
}

/**
   * Display lines inline and set the padding between each of them
   */

.connections__line {
    display: inline-block;
    padding-left: 0.25em;
    line-height: 1.75em;
}

.connections__line img {
    max-height: 25px;
}

.connections__line svg {
    width: 1em;
    height: 1em;
}

.label {
    padding: 0.15em 0.4em;
    border: 0.05em solid #000;
    border-radius: 0.25em;
    font-size: 0.7em;
    background-color: #ccc;
}

@media screen and (max-width:1300px) {
    .connections {
        display: none;
    }

    .container-map {
        margin: 1 auto;
        max-width: 891px;
        font-size: 1em;
    }

    .line-trace {
        margin-left: 21em;
    }

    .station--start::before {
        left: 20.715em;
    }

    .station--default::before {
        left: 20.715em;
    }

    .station--pole::before {
        left: 20.6em;
        margin-top: 7px;
    }

    .station--end::before {
        left: 20.715em;
    }
}

@media screen and (min-width:767px) and (max-width:990px) {
    .connections {
        display: none;
    }

    .line-trace {
        margin-left: 24em;
    }

    .station--start::before {
        left: 23.715em;
    }

    .station--default::before {
        left: 23.715em;
    }

    .station--pole::before {
        left: 23.6em;
        margin-top: 7px;
    }

    .station--end::before {
        left: 23.715em;
    }
}

@media screen and (min-width:990px) and (max-width:1300px) {
    .line-trace {
        margin-left: 29em;
    }

    .station--start::before {
        left: 28.715em;
    }

    .station--default::before {
        left: 28.715em;
    }

    .station--pole::before {
        left: 28.6em;
        margin-top: 7px;
    }

    .station--end::before {
        left: 28.715em;
    }
}

.plan {
    margin-bottom: 30px;
    padding-top: 40px;
    padding-bottom: 40px;
    background: #f4f4f478;
}

/* OTHER LINES */

.icon-other-metro::before {
    content: url("/wp-content/themes/mobilille/img/picto/metro_complet.svg");
    display: initial;
    position: absolute;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: -20px;
    margin-left: -20px;
    border: 1px solid white;
}

.icon-other-bus::before {
    content: url("/wp-content/themes/mobilille/img/picto/bus_complet.svg");
    display: initial;
    position: absolute;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: -20px;
    margin-left: -26px;
    border: 1px solid white;
}

.icon-other-tram::before {
    content: url("/wp-content/themes/mobilille/img/picto/tram_complet.svg");
    display: initial;
    position: absolute;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: -20px;
    margin-left: -15px;
    border: 1px solid white;
}

.trafic-line.tram.icon-other-tram {
    padding: 12px 0 0 2px;
}

.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-start;
}

.edit-link {
    display: block;
    margin-top: 10px;
}

.wp-caption {
    width: 100% !important;
    max-width: 900px;
}

.wp-caption-text {
	margin-top: 15px;
	max-width: 900px;
	font-size: small;
	color: gray;
	font-family: "Meridiana Pro";
	font-size: 15px;
}

.post-legend {
	font-family: "Meridiana Pro";
}


.mobilille-alerte a {
    color: white;
}

/* Titres box */


/* Feuille de style intégrée #35 | https://actus-lillois.fr/titres-et-abonnements/ */

.transport-titre-box {
    background: white;
    margin-bottom: 30px;
    box-shadow: 0 6px 34px 0 rgba(112,113,115,0.25);
  }
  
  .transport_titre_normal {
    display: flex;
  }
  
  .transport_titre_image {
	flex-basis: 250px;
	padding: 30px;
	border-right: 1px solid #80808024;
}

.transport_titre_content_wrapper {
	flex-basis: 100%;
	padding: 30px;
}
  
  .transport_titre_price_wrapper {
    flex-basis: 250px;
    padding: 30px;
    border-left: 1px solid #80808024;
    text-align: center;
    -webkit-align-content: center;
    align-content: center;
  }

  .transport_titre_price {
	font-size: 30px;
	font-weight: bold;
}

.transport_titre_access {
    display: flex;
  }

.transport_titre_access_item {
	flex-basis: 100%;
	background: #f4f4f4;
	padding: 7px;
	text-align: center;
	border-right: 1px solid #80808024;
}

.transport_titre_access_item:last-child {
	border-right: 0px ;
}

.access {
	font-weight: bold;
	color: #404040;
	font-size: 13px;
}
  

  /* Lignes */

/* Feuille de style intégrée #35 | https://actus-lillois.fr/se-deplacer/lignes/ */

.lines-bloc {
    display: flex;
    gap: 15px;
    margin-bottom: 27px;
    flex-wrap: wrap;
}

a.lignes {
    text-decoration: none;
    color: inherit;

}
  
.line-detail {
	font-family: "Meridiana Pro";
	font-weight: bold;
	width: 70px;
	height: 70px;
	text-align: center;
	padding-top: 20px;
	border: 1px solid #8080808a;
	font-size: 20px;
}

.white {
    color: white;
}


/* Feuille de style intégrée #35 | https://actus-lillois.fr/titres-et-abonnements/ */

.accordion.formules {
    border-radius: 0px !important;
  }
  
  .formules .accordion-button {
    border-radius: 0px !important;
    border: 0px !important;
  }
  
  .formules .accordion-item {
    border: 0px solid;
  }
  
  .formules .accordion-button {
    align-content: center !important;
  }
  
  .formules .accordion-button::after {
	margin-left: 10px;
	display: inline-block;
	vertical-align: bottom;
}
  
   .formules .accordion-button {
    display: initial;
    text-align: center;
  }

  .formules .accordion-button:not(.collapsed) {
	color: inherit;
	background-color: inherit;
}
  
.formules .accordion-button:not(.collapsed)::after {
	background-image: var(--bs-accordion-btn-icon); */
	transform: var(--bs-accordion-btn-icon-transform);
}

.formules .accordion-body {
	padding-top: 0px;
	padding-bottom: 0px;
}



/* ACCORDION FORMULE */


.formule-bloc {
    display: flex;
    background: #f7f7f7;
    border-bottom: 1px solid #80808021;
  }
  
.formule-image {
    flex-basis: 200px;
    padding: 10px;
    border-right: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
  }
  
.formule-price-wrapper {
	flex-basis: 200px;
	padding: 10px;
	text-align: center;
	-webkit-align-content: center;
	align-content: center;
}

.formule-price {
    font-weight: bold;
    font-size: 20px;
}
  
.formule-goto {
	flex-basis: 86px;
	padding: 10px;
	align-items: center;
	display: flex;
}

.formule-desc {
    font-size: 15px;
  }
  
.formule-content {
	flex-basis: 100%;
	padding: 10px;
	align-items: center;
	margin-left: 15px;
	font-family: "Meridiana Pro";
	font-size: 20px;
}

.formule-content {
	font-family: "Meridiana Pro";
	font-size: 20px;
	margin-top: auto;
	margin-bottom: auto;
}

a.color-inherit {
    color: black !important;
}

a.color-inherit:hover {
    color: black !important;
}
  
  
  
.active {
    font-weight: bold;
  }
  
  .ferme {
    color: var(--mobilille-red);
    font-weight: bold;
  }
  
  .ouvert {
    color: var(--mobilille-vert);
    font-weight: bold;
  }

  .agence-box .btn {
	border-radius: 19px;
	padding-left: 20px;
	padding-right: 20px;
	background: var(--mobilille-noir);
    color:white;
    font-family: "Meridiana Pro";
}

.agence-box .img-fluid.mb-3 {
	border-radius: 10px;
}

ul.horaires {
    list-style: disclosure-closed;
}
  

.page-header img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center;
}

.title-box-header {
    background: #f9f9f9;
    padding: 15px 35px 15px 35px;
    margin-top: -60px;
    display: block;
    position: relative;
    width: fit-content;
    margin-bottom: 30px;
}

.service-box img {
	max-width: 450px;
	width: 100% !important;
	border-radius: 10px;
	height: 236px;
	object-fit: cover;
}

.service-box {
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    max-width: 450px;
    transition: 0.2s ease-in-out;
    margin-bottom: 30px;
}

.service-box:hover {
    background: #80808014;
    border-radius: 10px;
    transition: 0.2s ease-in-out;
}

.service-box h2 {
    margin-top: 10px;
    margin-bottom: 2px;
}

.service-box p {
    color: #424242;
}

.service-box .btn {
border-radius: 19px;
padding-left: 20px;
padding-right: 20px;
background: var(--mobilille-noir);
color:white;
}

/* Contact box */

.contact-box-profile img {
  width: 140px;
  border-radius: 50%;
}

.contact-box {
  display: flex;
  width: 100%;
}

.contact-box-profile {
  margin-right: 30px;
}

.contact-box-info {
  vertical-align: middle;
  align-content: center;
  display: grid;
}

@media screen and (max-width: 440px) {

    .contact-box-profile img {
        width: 73px;
        border-radius: 50%;
    }

}

.contact-presse {
  background: #c8c8c81c;
  padding: 32px;
  margin-top: 30px;
}

.equipe {
    background: #c8c8c81c;
    padding: 32px;
    margin-top: 30px;
  }

.social_media {
	gap: 10px;
	display: flex;
	font-size: 20px;
	margin-top: -10px;
}

.excerpt {
	margin-top: 25px;
	font-size: 21px;
	font-weight: bold;
}

.twitter-tweet.twitter-tweet-rendered {
	margin-left: auto;
	margin-right: auto;
}


.nav-link.px-2.link-body-emphasis.jo-menu {
    background: none;
    border-radius: 0;
  }
  
  .nav-link.px-2.link-body-emphasis.jo-menu img {
    width: 65px;
  }
  
  .nav-link.px-2.link-body-emphasis.jo-menu {
	padding-left: 5px !important;
	padding-right: 5px !important;
}
  
  .jo-img-front {
	position: absolute;
	width: 80px;
	margin-top: 15px;
	margin-left: 15px;
	filter: contrast(0%) brightness(250%);
}

.ancr-inner {
	font-family: "Meridiana Pro";
	font-size: 18px;
}

.line-info {
    width: fit-content;
    background: white;
    margin-left: auto;
    margin-right: auto;
    padding: 6px;
    border-radius: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.picto-head.type {
    margin-right: 5px;
}

.weight.trafic-page-head {
	font-family: "Meridiana Pro";
	font-size: 17px;
	font-weight: 800;
}

.alerte-info .bi {
	margin-right: 5px;
}

/* Player video carroussel */
.btn-close {
    position: absolute;
    right: 37px;
    top: 37px;
    z-index: 1;
}

.video-player .modal-body {
margin: 0px;
padding: 0px;
margin-bottom: -7px;
}

video {
border-radius: 5px;
}

.video-play .splide__slide {
    margin-right: 30px;
}

.serie-logo {
width: 70px;
margin-bottom: 10px;
}

.serie-logo.lapatatedouce {
	width: 190px;
}

.video-info {
    position: absolute;
    margin-top: -154px;
    color: white;
    padding: 20px;
}


.play-icon {
	color: white;
	position: absolute;
	display: flex;
	top: 176px;
	left: 95px;
	font-size: 70px;
	opacity: 0.5;
	transition: 0.1s ease-in-out;
}

.video-play .splide__arrows.splide__arrows--ltr {
    display: block;
}

.video-info h5 {
    height: 47px;
    text-wrap: wrap;
}

.video-miniature img {
	width: 260px;
	border-radius: 10px;
	height: 100%;
}

.splide.video-play {
    visibility: initial;
    margin-bottom: 30px;
}

.btn-close {
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	padding: .25em .25em;
	color: #000;
	background: white url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
	border: 0;
	border-radius: .375rem;
	opacity: .5;
}

/* Container du CTA */
.cta-container {
	background-color: white;
	padding: 30px;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1000px;
	width: 100%;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

/* Texte du CTA */
.cta-text {
    flex: 1;
    margin-right: 370px;
    z-index: 1;
}

.cta-text h1 {
    font-size: 2em;
    margin-bottom: 15px;
    color: #333;
}

.cta-text p {
    font-size: 1.1em;
    margin-bottom: 25px;
    color: #555;
}

.cta-btn {
    background-color: #007bff; /* Bleu Mobilille */
    color: white;
    padding: 12px 25px;
    font-size: 1.1em;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.cta-btn:hover {
    background-color: #0056b3;
    color: white !important;
}

/* Mockup d'iPhone qui déborde */
.phone-mockup {
    position: absolute;
    right: 20px;
    bottom: -285px;
    max-width: 300px;
    z-index: 0;
}

/* Responsive design */
@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .cta-text {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .phone-mockup {
        position: static;
        max-width: 200px;
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .cta-text h1 {
        font-size: 1.6em;
    }

    .cta-btn {
        padding: 10px 20px;
        font-size: 1em;
    }

    .phone-mockup {
        max-width: 150px;
    }
}

.actu-grid .badge {
	position: absolute;
	top: 13px;
	left: 14px;
}

.bg-dossierspe-dsp {
	background: linear-gradient(270deg, rgb(17, 17, 17) 0%, rgb(17, 17, 17) 73%, rgba(17,17,17,0.9514006286108193) 82%, rgba(17,17,17,0.6460784997592788) 100%), url(https://mobilille.fr/wp-content/uploads/2024/06/IMG_5434-scaled.jpg), black;
	background-size: contain;
	background-origin: border-box;
	background-repeat: no-repeat;
}

.bg-dossierspe-dsp h2 {
    color: white;
}

.helloasso-btn {
	width: 165px;
}

.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.wpcf7-text, .wpcf7-textarea, .wpcf7-select {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #d9dbdd;
  background: #e8eaed;
  font-size: 17px;
  color: #33415c;
}

.wpcf7-submit {
    background: #002855;
    color: #e8eaed;
    padding: 15px 0;
    font-size: 20px;
    font-weight: bold;
    border-radius: 3px;
    border: 0;
    transition: .3s ease-in-out;
}

.wpcf7-submit:hover {
    background: #0353a4;
    cursor: pointer;
}

div.wpcf7 {
	max-width: fit-content;
	margin: 0 auto;
}

div.wpcf7 hr {
    margin-bottom: 10px;
}
  div.wpcf7 input:not([type="checkbox"]),
  div.wpcf7 textarea, div.wpcf7 select {
    width: 100%;
  }
  div.wpcf7 label {
    display: block;
  }

  .wpcf7-not-valid {
	border: 1px solid #c80000;
}

.wpcf7-not-valid-tip {
	margin-top: 5px;
}

.wpcf7 label {
	font-family: "Meridiana Pro"
}

.mandatory {
    color: var(--mobilille-red);
}

.single iframe {
	margin-left: auto;
	margin-right: auto;
	display: block;
	max-width: 100%;
	aspect-ratio: 16/9;
	margin-top: 20px;
	/* width: 198px; */
	height: auto;
}

.bg-al-footer iframe {
    padding-top: 0px;
}


.mobi-info-add {
	background: lavenderblush;
	padding: 20px 25px 20px 25px;
	font-size: 18px;
    margin-bottom: 15px;
}
  
.mobi-info-add::before {
	content: "LE COMPLÉMENT";
	display: block;
	margin-bottom: 5px;
	font-family: "Meridiana Pro";
	font-size: 25px;
	font-weight: bold;
	color: var(--mobilille-primary);
	font-weight: 800;
}

.bg-al-footer .container.text-white {
    padding-top: 40px;
}

.container.text-white.flex {
    padding-top: 40px;
    display: flex;
}
  
.container.text-white.flex .image {
    flex-basis: 240px;
    text-align: right;
    margin-left: auto;
    height: 249px;
    overflow: hidden;
    margin-top: -84px;
}

.container.text-white.flex.app {
	max-width: 800px;
}

.phone-mockup.app {
	max-width: 250px;
	right: 35px;
	bottom: -253px;
}
  


.card-body .text-muted {
    margin-top: auto;
    display: contents;
    justify-content: inherit;
    align-items: flex-end;
    align-content: end;
    margin-bottom: 0px;
  }
  
  .card-body {
    display: flex;
    flex-direction: column;
  }
  
  .news a {
    margin-top: auto;
    margin-bottom: auto;
  }
  
  .bg-dossierspe-dsp .bi.bi-newspaper {
	margin-right: 5px;
}

/* Footer app */
.app-promo {
	background: #090c12;
	color: white;
	padding: 20px 20px;
	text-align: center;
	max-height: 300px;
	overflow: hidden;
}

.app-promo .text-content p {
	margin-bottom: -5px;
}

.app-promo .container-promo {
    max-width: 1100px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.app-promo .text-content {
	max-width: 600px;
	margin-bottom: 120px;
}
.app-promo .text-content h2 {
    font-size: 2em;
    font-weight: bold;
}
.app-promo .buttons {
    display: flex;
    gap: 10px;
    justify-content: left;
    margin-top: 10px;
}
.app-promo .btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    background: #333;
}
.app-promo .image-content img {
    width: 100%;
    max-width: 400px;
}
@media (max-width:768px){

    .app-promo .buttons {
        justify-content: center !important;
    }

    .app-promo {
	max-height: 600px;
	padding: 30px;
    }

    .app-promo .text-content {
    margin-bottom: 21px;
    }

    .app-promo .text-content h2 {
    font-size: 30px;
    text-wrap: wrap;
    margin-bottom: 10px;
    }


}
@media (min-width: 768px) {
    .app-promo .container-promo {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    
    .app-promo .text-content {
        max-width: 50%;
    }
    .app-promo .image-content {
        max-width: 45%;
    }
}

.news-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 30px;
    margin-bottom: 60px;
  }
  
  .news-card {
    height: 100%;
  }
  
  .news-card .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    border: none;
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  .news-card .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
  }
  
  .news-card .card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .news-card .card-img-container {
    overflow: hidden;
    position: relative;
  }
  
  .news-card .card-img-top {
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
    width: 100%;
  }
  
  .news-card .card:hover .card-img-top {
    transform: scale(1.05);
  }
  
  .news-card .badge {
	z-index: 2;
	font-size: 12px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	position: absolute;
	top: 15px;
	left: 15px;
	padding: 6px 12px;
	border-radius: 50px;
	text-transform: uppercase;
}
  
  .news-card .badge.badge-depeche {
    background-color: #db7334;
  }
  
  .news-card .badge.badge-actualite {
	background-color: rgba(var(--bs-secondary-rgb), 1) !important;
  }

  .news-card .badge.badge-alerte {
    background-color: rgba(var(--bs-danger-rgb), 1) !important;
  }
  
  .news-card .card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  
  .news-card .card-title {
	color: #2a2e32;
	font-size: 1.25rem;
	line-height: 1.1;
	font-weight: 800;
	transition: color 0.3s ease;
	margin-bottom: 15px;
	flex-grow: 1;
	align-content: center;
}
  .news-card .card:hover .card-title {
    color: #007bff;
  }
  
  .news-card .meta-info {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
  }
  
  .news-card .meta-info svg {
    margin-right: 6px;
    flex-shrink: 0;
  }
  
  /* Responsive adjustments */
  @media (max-width: 992px) {
    .news-container {
      grid-template-columns: repeat(2, 1fr); /* 2 par ligne sur tablette */
    }
  }
  
  @media (max-width: 576px) {
    .news-container {
      grid-template-columns: 1fr; /* 1 par ligne sur mobile */
    }
    
    .news-card .card-img-top {
      height: 180px;
    }
    
    .news-card .card-body {
      padding: 15px;
    }
    
    .news-card .card-title {
      font-size: 1rem;
      margin-bottom: 10px;
    }
  }

  .title-box-header h5 {
	font-weight: 500;
}

.container-map {
    position: relative;
    max-height: 300px;
    transition: max-height 0.5s ease-in-out;
    overflow-y: clip;
}

/* Dégradé en bas pour indiquer qu'il y a plus de contenu */
.container-map::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 342px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f7f7f7);
    display: block;
    overflow: clip;
    width: 1280px;
    margin-right: 100px;
    transform: translateX(-200px);
}

/* Bouton voir plus */
.btn-voir-plus {
display: none;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background: var(--mobilille-primary);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: 0.3s;
z-index: 11;
width: 150px;
font-family: "Meridiana Pro";
font-weight: bold;
text-transform: uppercase;
}

.btn-voir-plus:hover {
    background: #6A3CFF;
}

/* Lorsque la div est ouverte */
.container-map.ouvert {
    max-height: none;
}

.container-map.ouvert::after {
    display: none;
}

.autocomplete-item.btn.btn-primary {
	width: 100%;
	margin-bottom: 5px;
}

.press-img {
	width: 700px;
}

.excerpt {
    font-size: 21px;
    font-weight: normal !important;
}

.head-single {
    background: #090c12;
    color: white;
}

.container-title.old {
    margin-top: 0px;
    margin-bottom: 0px;
    display: none;
}

.container.container-single.single-img-top {
    margin-top: -420px;
}

.head-single {
    background: #090c12;
    color: white;
    padding-top: 30px;
    padding-bottom: 430px;
}

.meta-single-cat::before {
    content: "";
    height: 14px;
    width: 100px;
    background: var(--mobilille-vert);
    display: block;
    margin-bottom: 7px;
}

    .meta-single-cat {
    text-transform: uppercase;
    font-family: "Meridiana Pro";
    font-size: 25px;
    font-weight: bold;
    color: var(--mobilille-vert);
    margin-bottom: 20px;
}

.meta-date {
    color: #96a2bb;
}

.content-container p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 19px;
    line-height: 30px;
    margin-bottom: 20px;
}

.content-container h3 {
    font-size: 24px;
    margin-top: 40px;
}

.meta-bef-title {
    display: flex;
    gap: 20px;
}

.meta-single-cat.type::before {
    content: "";
    height: 14px;
    width: 100px;
    background: none;
    display: block;
    margin-bottom: 7px;
}

.meta-single-cat.type.alerte {
    color: var(--mobilille-red);
}

.single-dossier {
    background: #3100d008;
    border-top: 5px solid var(--mobilille-primary);
    padding: 24px;
    margin-bottom: 25px;
    margin-top: 50px;
}

.single-dossier-item a {
color: black;
font-size: 18px;
}

.single-dossier-title {
font-size: 25px;
}

.single-dossier-item {
margin-bottom: 16px;
}

.single-dossier-item::marker {
font-size: 25px;
}

.author-description {
	color: #686868;
	margin-bottom: 15px;
	line-height: 1.5 !important;
}

.deviation-bloc {
	background: white;
	border-radius: 8px;
	margin-bottom: 20px;
}

  .deviation-header-ligne img {
    width: 50.9px;
  }
  
  .timing {
    font-size: 17px !important;
  }

.deviation-ligne {
    display: flex;
    align-items: flex-start;
    gap: 5px;
  }
  
  .deviation-header-ligne {
    border-bottom: 1px solid #dcd7d7;
    padding: 30px;
    padding-bottom: 3px;
  }
  
  .deviation-content {
    padding: 30px;
  }

  @media screen and (max-width: 650px) {
    .container.content-container.mb-5 {
        margin-top: 140px;
    }
  }
    
  
  
  .mobi-fnaut {
    font-family: "Meridiana Pro";
    font-weight: 500;
    font-size: 18px;
    color: white;
    border: 1px solid #e4f40b;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
  }
  
  .mobi-fnaut a img {
    width: 120px;
  }
  
  .mobi-fnaut p {
	margin-bottom: 10px;
}

.partner-single {
	background: var(--mobilille-primary);
	color: white;
	padding: 36px;
	display: flex;
	gap: 30px;
	justify-content: center;
	align-content: center;
	align-items: center;
	border-radius: 10px;
	margin-bottom: 30px;
}

.logo-partner {
	width: 110px;
}

.partner-single h3 {
  margin: 0px;
  font-weight: normal;
}

.img-sup {
	position: absolute;
	top: 15px;
	right: 18px;
	width: 71px;
}

.a-lire-aussi-titre {
	margin-bottom: -3px !important;
	text-transform: uppercase;
	color: var(--mobilille-primary);
	font-weight: bold;
}

.a-lire-aussi-lien {
	font-size: 20px !important;
	font-family: "Meridiana Pro";
	margin-bottom: 0px !important;
}

.a-lire-aussi-lien a {
	color: var(--mobilille-primary);
}

.a-lire-aussi-content {
   flex: 1;
}

.a-lire-aussi {
	margin: 20px 0;
	padding: 15px;
	background-color: #f3f3f3;
	border-left: 4px solid var(--mobilille-primary);
	display: flex;
	align-items: center;
	position: relative;
}

.a-lire-aussi-image {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    margin-left: 15px;
    border-radius: 50%;
    overflow: hidden;
    order: 2;
}

.a-lire-aussi-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

blockquote {
	border-left: 6px solid var(--mobilille-rose);
	padding-left: 15px;
}


.socials {
  display: flex;
  gap: 15px;
  color: white;
}

.socials a {
  color: #b6b6b6;
  font-size: 23px;
  transition: 0.2s ease-in-out;
  text-decoration: none;
}

.socials a:hover {
	color: white;
	transition: 0.2s ease-in-out;
	text-decoration: none;
	transform: scale(1.2);
}

.socials {
  margin-bottom: 20px;
}

/* Styles des pills de catégories */
.category-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.category-pill {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 25px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
    white-space: nowrap;
}

.category-pill:hover {
    background-color: #e0e0e0;
    color: #000;
    text-decoration: none;
}

.category-pill.active {
    background-color: #0056b3;
    color: white;
}

/* Pagination */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 8px;
    padding: 0;
}

.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f8f9fa;
    color: #495057;
    text-decoration: none;
    transition: all 0.2s;
}

.page-numbers:hover {
    background-color: #e9ecef;
    text-decoration: none;
}

.page-numbers.current {
    background-color: #0056b3;
    color: white;
}

/* Style pour assurer 3 articles par ligne maximum */
.news-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 991.98px) {
    .news-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .news-container {
        grid-template-columns: 1fr;
    }
}

li {
	list-style: none;
}

.section-title-with-link {
	display: flex;
	align-items: center;
}

.section-title-with-link h2 {
    margin-bottom: 0px;
    padding-bottom: 0px;
    flex-basis: 100%;
}

.section-title-with-link a {
  flex-basis: 100%;
  text-decoration: none;
  color: var(--mobilille-primary);
  font-family: "Meridiana Pro";
  font-size: 17px;
  text-align: right;
}

.section-title-with-link a .bi.bi-chevron-right {
  font-size: 15px;
}

/* News new */
   /* Styles pour la section d'actualités de la page d'accueil */
.home-news-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0;
}

/* Style pour l'actualité principale à gauche */
.featured-news {
    flex: 1;
    min-width: 300px;
}

.main-article {
    overflow: hidden;
    height: 100%;
}

.main-article a {
    text-decoration: none;
    color: inherit;
    display: block;
}



.featured-image {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 10px;
}

.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.main-article:hover .featured-image img {
    transform: scale(1.05);
}

.main-article h2 {
	padding: 20px 0px 5px;
	font-size: 25px;
	margin: 0;
	color: #333;
}

.excerpt-article {
    margin-top: 15px;
    padding: 0 0px 20px;
    color: #666;
    font-size: 16px;
}

/* Appliquer le soulignement uniquement aux titres au survol */
.grid-article a:hover h3, .main-article a:hover h2 {
    text-decoration: underline;
}

.credits-photo {
	font-size: 11px;
	color: #999;
	text-align: right;
	text-transform: uppercase;
	margin-top: 3px;
	margin-bottom: -8px;
}

.main-article a:hover .excerpt-article p,
.main-article a:hover p.credits-photo {
    text-decoration: none !important; /* L'important garantit que cette règle est prioritaire */
}



/* Style pour la grille de 4 articles à droite */
.recent-news-grid {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20px;
	min-width: 300px;
}

.grid-article {
    overflow: hidden;
    height: 100%;
}

.grid-article a {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}



.grid-image {
	width: 100%;
	height: 200px;
	overflow: hidden;
    border-radius: 10px;
}

.grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.grid-article:hover .grid-image img {
    transform: scale(1.05);
}

.grid-article h3 {
	padding: 2px 0px;
	font-size: 17px;
	margin: 0;
	color: #333;
}

/* Responsive */
@media (max-width: 768px) {
    .home-news-container {
        flex-direction: column;
    }

    .section-title-with-link {
	flex-direction: column;
	align-items: baseline;
}
    
    .recent-news-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .recent-news-grid {
        grid-template-columns: 1fr !important;
    }
}

.mobi-icon {
	width: 24px;
	height: auto;
	margin-right: 6px;
	display: inline-block;
	margin-bottom: 0px;
	transform: translateY(-2px);
}


.mobi-icon.grid {
	width: 18px;
}

.credits-photo.grid {
	font-size: 8px;
}

.article-cat {
  padding: 15px 0px 0px 0px;
  margin-bottom: 0px;
  font-size: 14px;
  text-transform: uppercase;
  font-family: "Meridiana Pro";
  color: var(--mobilille-primary);
}

.article-cat.feature {
	font-size: 18px;
	padding-bottom: 0px;
	margin-bottom: -15px;
}

.archive-news-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20px;
	min-width: 300px;
}


.tag-page-header-bg {
	background: var(--e-a-border-color);
}

.container.tag-page-header.mb-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 12px;
  gap: 30px;
}

.tag-page-infos {
  flex-basis: 100%;
}

.tag-page-image {
  width: 500px;
  border-radius: 10px;
}

.tag-page-image .img-fluid.w-100 {
  border-radius: 10px;
}

.tag-page-infos .text-muted.mb-3 {
  width: 80%;
}

.badge-cat {
	font-family: "Meridiana Pro", sans-serif;
	background: var(--mobilille-rose);
	color: white;
	width: 86px;
	text-align: center;
	padding: 5px 0px 4px;
	border-radius: 6px;
	margin-bottom: 8px;
}

/* Corrections mobile */

@media screen and (max-width: 768px){

.container.tag-page-header.mb-5 {
  flex-direction: column;
}

.archive-news-grid {
  grid-template-columns: repeat(1, 1fr) !important;
}

.tag-page-image {
  width: 100%;
}

.text-muted.mb-3 {
  width: 100% !important;
}

}

@media screen and (min-width: 768px) and (max-width: 990px) {
  .archive-news-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .text-muted.mb-3 {
    width: 100% !important;
  }
}

.articles-alltime {
	background: #ebebeb;
}

.ranking-number {
	position: absolute;
	top: 0px;
	right: 16px;
	color: white;
	width: 100%;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: baseline;
	justify-content: right;
	justify-items: bold;
	font-size: 37px;
	z-index: 1;
	font-family: "Meridiana Pro";
	font-weight: 900;
	opacity: 0.6;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

.with-ranking {
    position: relative;
}

.bold {
	font-weight: bold;
}

.meta-single-live {
	margin-bottom: 20px;
	background: white;
	color: black;
	padding: 6px 15px 6px 15px;
	font-family: "Meridiana Pro", sans-serif;
	font-size: 20px;
	border-radius: 15px;
	font-weight: 800;
}

.meta-single-live::before {
  content: "\F287";
  font-family: "bootstrap-icons";
  font-size: 12px;
  display: flex;
  color: var(--mobilille-red);
  margin-right: 8px;
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

.meta-single-live {
  display: flex;
  align-items: center;
}

.article-cat.feature.liveblog {
	display: flex;
	align-items: center;
}

.article-cat.feature.liveblog::before {
	content: "\F287";
	font-family: "bootstrap-icons";
	animation: blink 2s infinite;
	color: var(--mobilille-red);
	font-size: 11px;
	margin-right: 7px;
	padding-bottom: 3px;
}

.liveblog-summary-box {
            margin-bottom: 30px;
        }

        .liveblog-summary-title {
            font-size: 24px;
            margin-top: 40px;
            background: var(--mobilille-red);
            padding: 10px 15px 10px 15px;
            width: fit-content;
            color: white !important;
        }
        
        .liveblog-summary-content {
            font-size: 16px;
            line-height: 1.6;
            color: black;
        }
        
        .liveblog-summary-content p {
            margin: 0 0 12px 0;
            color: black;
        }
        
        .liveblog-summary-content p:last-child {
            margin-bottom: 0;
        }
        
        .liveblog-summary-content ul,
        .liveblog-summary-content ol {
            margin: 10px 0;
            padding-left: 25px;
        }
        
        .liveblog-summary-content li {
            margin-bottom: 8px;
            color: black;
        }
        
        .liveblog-summary-content strong {
            font-weight: 700;
        }
        
        /* Style responsive */
        @media (max-width: 768px) {
            .liveblog-summary-box {
                padding: 20px;
                margin: 20px 0;
            }
            
            .liveblog-summary-title {
                font-size: 20px !important;
            }
            
            .liveblog-summary-content {
                font-size: 15px !important;
            }
        }

.attachment-block {
  display: flex;
  background: white;
  border-radius: 10px;
  overflow: hidden;
}

.attachment-presentation {
  display: flex;
}

.attachment-download {
  display: flex;
  flex-direction: column;
  flex-basis: 160px;
  justify-content: center;
  align-items: center;
  border-left: 0.5px solid gainsboro;
  background: #fbfafa;
}

.attachment-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.attachment-image img {
  height: 110px;
  width: 200px;
  object-fit: cover;
  object-position: bottom;
}

.attachment-title {
  font-family: "Meridiana Pro";
  padding: 20px 20px 20px 20px;
  justify-content: center;
  align-content: center;
  font-weight: bold;
  font-size: 21px;
  padding-right: 20px;
  text-wrap: balance;
  line-height: 1.2;
}

.attachment-icon {
  color: var(--mobilille-bleu);
  font-size: 25px;
}

.attachment-text a {
  color: black;
  text-decoration: none;
}

.size {
  color: gray;
  font-size: 11px;
}

.attachment-text {
  line-height: 1.2;
}

.data-title {
  font-weight: lighter;
  font-size: 15px;
  margin-bottom: 2px;
}

.attachment-link {
  color: inherit;
  text-decoration: none;
  transition: 0.2s ease-out;
}

.attachment-link:hover {
  color: var(--mobilille-red);
  text-decoration: underline;
  transition: 0.2s ease-in;
}

@media screen and (max-width: 690px){


.attachment-block {
  flex-direction: column;
}

.attachment-download {
  flex-basis: 70px;
  border-left: none;
}


.attachment-image {
  display: none;
}

.attachment-icon {
  margin-right: 6px;
}

.attachment-download {
  flex-direction: row;
}

.partner {
    padding-bottom: 40px;
}

}


.partner img {
  width: 50px;
  margin-left: 5px;
}

.partner span {
  opacity: 0.5;
}

.partner {
  text-align: right;
  padding-top: 20px;
  font-family: "Meridiana PRo";
}