:root {
  --info-bar-height: 35px;

  /* Base commune des popups du menu */
  --menu-popup-width: 430px;
  --menu-popup-radius: 24px;
  --menu-popup-image-height: 120px;
  --menu-popup-padding: 14px;
  --menu-popup-header-gap: 12px;
  --menu-popup-icon-size: 60px;
  --menu-popup-action-size: 52px;

  --menu-popup-mobile-image-height: 90px;
  --menu-popup-mobile-padding: 12px;
  --menu-popup-mobile-icon-size: 48px;
  --menu-popup-mobile-action-size: var(--menu-popup-action-size);
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  scroll-behavior: smooth;
}

body,
html {
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.led-main {
  transition:
    color 0.4s ease,
    opacity 0.4s ease;
}

.container {
  position: relative;
  width: 100%;
  color: black;
  text-align: center;
}

/* ============================= */
/* INFO LED */
/* ============================= */

.led-info-bar {
  position: fixed;
  top: 0;

  width: 100%;
  height: 35px;

  background: #092E38;

  display: flex;
  align-items: center;
  justify-content: left;

  z-index: 10005;
}

.led-info-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 6px 6px;
  opacity: 0.35;
  pointer-events: none;
}

.led-status-pill{
  display:flex;
  align-items:center;
  gap:16px;

  padding:8px 20px;

  border-radius:999px;

  background:rgba(255,255,255,.05);

  backdrop-filter:blur(8px);
}

.led-dot{
  width:12px;
  height:12px;

  border-radius:50%;

  background:#ff6f6f;

  box-shadow:
    0 0 12px rgba(255,111,111,.7);

  animation:pulseDot 2s infinite;
}

@keyframes pulseDot{

  0%{
    transform:scale(1);
    opacity:1;
  }

  50%{
    transform:scale(1.3);
    opacity:.7;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }

}

.led-main{
  color:#fff;

  font-family:"Roboto",sans-serif;
  font-size:.95rem;
  font-weight:700;
}

.status-green {
  color: #6ff7c8;
}

.status-red {
  color: #ff7b7b;
}

.status-orange {
  color: #ffcf66;
}

.status-green,
.status-red,
.status-orange {
  margin-left: 6px;
}

.led-info-bar,
.bar_1 {
  transition: transform 0.35s ease;
}

@media (max-width: 700px) {
  .led-info-bar {
    height: 44px;
    padding: 0 12px;
  }

  .led-status-pill {
    max-width: 100%;
    gap: 10px;
    padding: 8px 14px;
  }

  .led-main,
  .led-next {
    font-size: .78rem;
  }

  .bar_1 {
    top: 44px;
  }
}

/* ============================= */
/* HEADER */
/* ============================= */

/* ============================= */
/* WEATHER MINI */
/* ============================= */

.weather-widget-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 44px;

  padding: 0 18px;

  margin-left: 14px;

  border-radius: 20px;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,0.82),
    rgba(255,255,255,0.62)
  );

  backdrop-filter: blur(14px);

  border:
  1px solid rgba(255,255,255,0.5);

  box-shadow:
    0 10px 30px rgba(4,31,45,0.06);

  transition: 0.35s ease;
}

.weather-widget-mini:hover {
  transform: translateY(-2px);

  box-shadow:
    0 16px 35px rgba(4,31,45,0.09);
}

.weather-widget-mini span {
  font-family: "Roboto", sans-serif;
  font-size: .86rem;
  font-weight: 700;

  color: #041f2d;
}

.weather-icon {
  font-size: .86rem;

  color: #f5b301;

  animation: weatherFloat 4s ease-in-out infinite;
}

/* ANIMATION */

@keyframes weatherFloat {

  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0px);
  }

}

/* MOBILE */

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

  .weather-widget-mini {
    display: none;
  }

}

#header {
  position: fixed;
  top: var(--info-bar-height);
  left: 0;

  width: 100%;

  background: #fff;

  z-index: 10004;

  transition: transform 0.35s ease;

  box-shadow: 0 2px 18px rgba(0,0,0,0.06);
}

body {
  padding-top: 78px;
}

body.menu-open {
  overflow: hidden;
}

#header .header {
  width: 100%;
  max-width: 1450px;

  margin: 0 auto;
  padding: 6px 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================= */
/* LOGO */
/* ============================= */

#header .column_1 {
  display: flex;
  align-items: center;
}

#header .column_1 img {
  width: 90px;
  height: auto;

  object-fit: contain;

  padding-left: 0;
}

/* ============================= */
/* NAVIGATION */
/* ============================= */

#header .column_2 {
  display: flex;
  align-items: center;
}

/* ============================= */
/* MENU */
/* ============================= */

.menu {
  display: flex;
  align-items: center;

  list-style: none;

  margin: 0;
  padding: 0;
}

.menu li {
  display: flex;
  align-items: center;

  position: relative;
}

.menu li:not(:last-child)::after {
  content: "";

  width: 0px;
  height: 18px;

  background: #072028;

  margin: 0 20px;
}

.menu a {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  color: #072028;

  font-family: "Roboto", sans-serif;
  font-size: .86rem;
  font-weight: 500;

  transition: color 0.3s ease;
}

.menu a:hover {
  color: #62beaf;
}

.menu a::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -5px;

  width: 0;
  height: 2px;

  background: #62beaf;

  transition: width 0.3s ease;
}

.menu a:hover::after {
  width: 100%;
}

/* ============================= */
/* ICONES */
/* ============================= */

.menu a i {
  font-size: 30px;

  color: #159a83;

  transition: color 0.3s ease;
}

.menu a:hover i {
  color: #62beaf;
}

/* ============================= */
/* PHONE DESKTOP */
/* ============================= */

.phone-trigger {
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  background: transparent;
  border: none;
  cursor: pointer;

  padding: 0;
}

.phone-trigger i {
  font-size: 30px;
  color: #159a83;
  transition: 0.3s ease;
}

.phone-trigger:hover i {
  color: #62beaf;
}

.phone-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;

  width: 0;
  height: 2px;

  background: #62beaf;
  transition: width 0.3s ease;
}

.phone-trigger:hover::after {
  width: 100%;
}

/* ============================= */
/* HORAIRES DESKTOP */
/* ============================= */

.desktop-hours {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 35px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #178e73, #62beaf);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: 0.3s ease;
}

.desktop-hours:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(21,154,131,0.28);
}

.desktop-hours i {
  font-size: 1.4rem;
  color: #fff;
}

.desktop-hours p {
  margin: 0 0 3px;

  font-family: "Roboto", sans-serif;
  font-size: 0.78rem;

  color: rgba(255,255,255,0.92);
}

.desktop-hours strong {
  display: block;

  font-family: "Roboto", sans-serif;
  font-size: 1.05rem;

  color: #fff;
}

/* ============================= */
/* BURGER */
/* ============================= */

.burger-btn {
  display: none;

  position: relative;

  width: 38px;
  height: 38px;

  background: transparent;
  border: none;

  cursor: pointer;

  z-index: 10007;
}

.burger-btn span {
  position: absolute;
  left: 50%;

  width: 25px;
  height: 2.5px;

  background: #072028;

  border-radius: 10px;

  transform: translateX(-50%);

  transition: 0.3s ease;
}

.burger-btn span:nth-child(1) {
  top: 11px;
}

.burger-btn span:nth-child(2) {
  top: 19px;
}

.burger-btn span:nth-child(3) {
  top: 27px;
}

.burger-btn.active span:nth-child(1) {
  top: 20px;
  transform: translateX(-50%) rotate(45deg);
}

.burger-btn.active span:nth-child(2) {
  opacity: 0;
}

.burger-btn.active span:nth-child(3) {
  top: 20px;
  transform: translateX(-50%) rotate(-45deg);
}

/* ============================= */
/* OVERLAY FLOU */
/* ============================= */

.menu-overlay {
  position: fixed;
  inset: 0;

  background: rgba(255,255,255,0.35);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;

  z-index: 10003;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ============================= */
/* MOBILE HOURS */
/* ============================= */

.mobile-hours {
  display: none;
}

/* ============================= */
/* POPUP ITINÉRAIRE */
/* ============================= */

.map-menu-item {
  position: relative;
}

/* BTN MAP */

.map-trigger {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;

  cursor: pointer;

  padding: 0;
}

.map-trigger i {
  font-size: 30px;

  color: #159a83;

  transition: 0.3s ease;
}

.map-trigger:hover i {
  color: #62beaf;
}

.map-trigger::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -5px;

  width: 0;
  height: 2px;

  background: #62beaf;

  transition: width 0.3s ease;
}

.map-trigger:hover::after {
  width: 100%;
}

/* POPUP */

.map-popup {
  position: fixed;

  width: var(--menu-popup-width);
  max-width: calc(100vw - 40px);

  padding: 22px;

  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: scale(0.96);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;

  z-index: 10020;
}

.map-popup.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: scale(1);
}

/* Popup itinéraire avec la carte commune */

.map-popup.map-card-popup{
  padding:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  border-radius:0;
}

.map-card-popup .itineraire-card{
  width:430px;
  max-width:calc(100vw - 40px);
  height:auto;
  margin:0;
}

.map-card-popup .itineraire-image{
  height:var(--menu-popup-image-height);
}

/* Popup téléphone avec la carte */

.phone-popup.phone-popup-card{
    padding:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    border-radius:0;
    overflow:visible;
}

.phone-popup-card .phone-card{
    width:430px;
    max-width:calc(100vw - 40px);
    height:auto;
    margin:0;
}

.phone-popup-card .phone-image{
    height:var(--menu-popup-image-height);
}

/* HEADER POPUP */

.map-popup-header {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-bottom: 20px;
}

.map-popup-header i {
  font-size: 1.2rem;
  color: #159a83;
}

.map-popup-header h3 {
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: left;

  color: #0f2f33;

  margin: 0 0 4px;
}

.map-popup-header p {
  font-family: "Roboto", sans-serif;
  font-size: .86rem;

  color: #667b80;

  margin: 0;
}

/* MAP */

.map-frame {
  width: 100%;
  height: 240px;

  overflow: hidden;

  border-radius: 18px;

  margin-bottom: 18px;
}

.map-frame iframe {
  width: 100%;
  height: 100%;

  border: none;
}

/* BTN ITINÉRAIRE */

.map-route-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 52px;

  border-radius: 14px;

  background: linear-gradient(135deg, #178e73, #62beaf);

  text-decoration: none;

  font-family: "Roboto", sans-serif;
  font-size: .86rem;
  font-weight: 700;

  color: #fff;

  transition: 0.3s ease;
}

.map-route-btn:hover {
  transform: translateY(-2px);

  box-shadow:
    0 7px 14px rgba(21,154,131,0.28);
}

/* ============================= */
/* POPUP HORAIRES */
/* ============================= */

.hours-trigger {
  border: 0;
  cursor: pointer;
}

.hours-popup {
  position: fixed;

  width: var(--menu-popup-width);
  max-width: calc(100vw - 40px);

  padding: 0;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  overflow: visible;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(10px);

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;

  z-index: 10020;
}

.hours-popup.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0);
}

.hours-popup-card .horaires-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Bouton de fermeture */

.hours-popup .hours-close-modern {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;
  padding: 0;

  border: 3px solid #d9f1eb;
  border-radius: 50%;

  background: #fff;
  color: #20b191;

  cursor: pointer;
  box-shadow: 0 8px 22px rgba(4, 31, 45, 0.16);

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.hours-popup .hours-close-modern i {
  font-size: 1.2rem;
  line-height: 1;
  color: currentColor;

  transition: transform 0.3s ease;
}

.hours-popup .hours-close-modern:hover {
  background: #20b191;
  border-color: #20b191;
  color: #fff;
  transform: scale(1.08);
}

.hours-popup .hours-close-modern:hover i {
  transform: rotate(90deg);
}

@media screen and (max-width: 900px) {
  .hours-popup {
    top: 50%;
    left: 50%;

    width: calc(100% - 40px);
    max-width: 430px;

    transform: translate(-50%, -50%) scale(0.95);
  }

  .hours-popup.active {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ============================= */
/* POPUP TELEPHONE */
/* ============================= */

.phone-popup,
.phone-popup * {
  font-family: "Roboto", sans-serif;
}

.phone-popup {
  position: fixed;

  width: 430px;
  max-width: calc(100vw - 40px);

  padding: 32px;

  background: rgba(255,255,255,0.96);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-radius: 26px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.18);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: scale(0.96);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;

  z-index: 10020;
}

.phone-popup.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: scale(1);
}

/* CLOSE */

.phone-close {
  position: absolute;

  top: 14px;
  right: 14px;

  width: 40px;
  height: 40px;

  border: none;
  border-radius: 50%;

  background: #0f2f33;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition: 0.3s ease;
}

.phone-close i {
  font-size: 1.4rem;
  color: #fff;
}

.phone-close:hover {
  transform: rotate(90deg);
}

/* HEADER */

.phone-popup-header {
  display: flex;
  align-items: center;

  gap: 18px;

  margin-bottom: 30px;
}

.phone-icon {
  width: 82px;
  height: 82px;

  border-radius: 50%;

  background: rgba(98,190,175,0.14);

  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-icon i {
  font-size: 2.7rem;
  color: #159a83;
}

.phone-popup-header h3 {
  margin: 0 0 6px;

  font-size: 1.4rem;
  font-weight: 700;

  line-height: 1.1;

  color: #0f2f33;

  text-align: left;
}

.phone-popup-header p {
  margin: 0;

  font-size: .86rem;

  color: #60757b;
}

/* NUMERO */

.phone-number {
  font-size: 1.2rem;
  font-weight: 800;

  text-align: center;

  color: #159a83;

  margin-bottom: 26px;

  line-height: 1.1;
}

/* BTN APPEL */

/* ==========================
   BOUTON FERMETURE POPUP
========================== */

.map-card-popup .map-close-modern{
    position:absolute;

    top:18px;
    right:18px;

    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff;
    border:3px solid #d9f1eb;
    border-radius:50%;

    cursor:pointer;

    box-shadow:0 8px 22px rgba(4,31,45,.16);

    transition:.3s ease;

    z-index:100;
}

.map-card-popup .map-close-modern i{
    font-size:2rem;
    color:#20b191;
    transition:.3s ease;
}

.map-card-popup .map-close-modern:hover{
    background:#20b191;
    border-color:#20b191;
    transform:scale(1.08);
}

.map-card-popup .map-close-modern:hover i{
    color:#fff;
    transform:rotate(90deg);
}

.phone-popup .phone-close-modern{
  position:absolute;
  top:18px;
  right:18px;

  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;
  border:3px solid #d9f1eb;
  border-radius:50%;

  cursor:pointer;
  box-shadow:0 8px 22px rgba(4,31,45,.16);
  transition:.3s ease;
  z-index:100;
}

.phone-popup .phone-close-modern i{
  font-size:2rem;
  color:#20b191;
  transition:.3s ease;
}

.phone-popup .phone-close-modern:hover{
  background:#20b191;
  border-color:#20b191;
  transform:scale(1.08);
}

.phone-popup .phone-close-modern:hover i{
  color:#fff;
  transform:rotate(90deg);
}

/* ==========================
   POPUP NOUS APPELER
========================== */

.phone-popup{
  width:430px;
  max-width:calc(100vw - 40px);
  padding:0;
  border-radius:24px;
  overflow:hidden;
}

.phone-popup-visual{
  height:150px;
  background:linear-gradient(135deg,#f3fffc,#edf8f5);
  display:flex;
  align-items:center;
  justify-content:center;
}

.phone-popup-visual i{
  font-size:3.6rem;
  color:#20b191;
}

.phone-popup-content{
  padding:18px;
}

.phone-popup-heading{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:26px;
}

.phone-popup-icon{
  width:74px;
  height:74px;
  border-radius:50%;
  background:#edf7f4;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.phone-popup-icon i{
  font-size:2rem;
  color:#20b191;
}

.phone-popup-divider{
  width:2px;
  height:48px;
  background:#c9ebe2;
  border-radius:99px;
  flex-shrink:0;
}

.phone-popup-heading h3{
    margin:0;
    font-size:1.25rem;      /* même taille */
    font-weight:800;
    line-height:1.35;
    color:#20b191;          /* même vert */
}

.phone-popup-heading p{
    margin-top:8px;
    font-size:1rem;
    line-height:1.6;
    color:#74828c;
}

.phone-popup .phone-number{
  margin:0 0 24px;
  text-align:center;
  font-size:2.2rem;
  font-weight:800;
  color:#20b191;
}

.phone-popup .phone-call-btn{
  height:58px;
  margin-bottom:22px;
  border-radius:14px;
}

.phone-popup .phone-warning{
  margin:0 0 24px;
}

.phone-popup .emergency-info{
  padding:18px;
  border-radius:16px;
}

/* Tablette + Desktop */

@media (min-width: 768px){

  .contact-main > .contact-card:first-child{
    display:none;
  }

}

.phone-call-btn {
  width: 100%;
  height: 52px;

  border-radius: 14px;

  background: linear-gradient(135deg, #178e73, #62beaf);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  text-decoration: none;

  color: #fff;
  font-size: .86rem;
  font-weight: 700;

  transition: 0.3s ease;

  margin-bottom: 20px;
}

.phone-call-btn i {
  font-size: 1rem;
}

.phone-call-btn:hover {
  transform: translateY(-2px);

  box-shadow: 0 7px 14px rgba(21,154,131,0.28);
}

/* FOOTER INFO */

/* ============================= */
/* ICONE TELEPHONE */
/* ============================= */

.phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: auto;
  height: auto;

  background: transparent;
  border-radius: 0;
}

.phone-icon i {
  font-size: 30px;
  color: #159a83;

  line-height: 1;
}

/* ============================= */
/* BLOC URGENCE */
/* ============================= */

.phone-info {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  min-height: 44px;

  padding: 0 20px;

  border-radius: 16px;

  background: rgba(98,190,175,0.10);

  margin-top: 10px;
}

.phone-warning {
  margin-top: 12px;
  padding-bottom: 20px;

  text-align: center;

  font-size: 0.82rem;
  color: #60757b;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

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

  .phone-popup {
    top: 50%;
    left: 50%;

    width: calc(100% - 40px);
    max-width: 390px;

    transform: translate(-50%, -50%) scale(0.92);
  }

  .phone-popup.active {
    transform: translate(-50%, -50%) scale(1);
  }

  .phone-trigger::after {
  display: none;
}

.phone-trigger {
  width: 100%;
  height: 92px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 18px 0;

  border-bottom: 1px solid rgba(0,0,0,0.08);
}

  .phone-number {
    font-size: 2.3rem;
  }

  .phone-call-btn {
    height: 64px;

    font-size: 1.15rem;
  }

}

.phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-icon i {
  font-size: 2.4rem;
  color: #159a83;

  line-height: 1;
}

/* ============================= */
/* BOUTON GARDE DESKTOP */
/* ============================= */

.desktop-garde {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-left: 14px;
  padding: 7px 14px;

  min-height: 44px;

  border: 0;
  border-radius: 12px;

  background: linear-gradient(135deg, #394B9A, #4B5EB0);
  color: #fff;

  cursor: pointer;

  box-shadow: 0 8px 20px rgba(80, 54, 160, 0.18);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.desktop-garde:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(80, 54, 160, 0.32);
}

.desktop-garde > i {
  font-size: 1.4rem;
  color: #fff;
}

.desktop-garde p {
  margin: 0 0 3px;

  font-family: "Roboto", sans-serif;
  font-size: 0.78rem;

  color: rgba(255, 255, 255, 0.92);
}

.desktop-garde strong {
  display: block;

  font-family: "Roboto", sans-serif;
  font-size: 1.05rem;

  color: #fff;
}

/* La version mobile reste cachée sur ordinateur */

.mobile-garde {
  display: none;
}

/* ============================= */
/* CONTENEUR POPUP GARDE */
/* ============================= */

.garde-popup-wrapper {
  position: fixed;

  width: 430px;
  max-width: calc(100vw - 40px);

  padding: 0;
  background: transparent;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(10px) scale(0.96);

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;

  z-index: 10020;
}

.garde-popup-wrapper.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0) scale(1);
}

/* ============================= */
/* FERMETURE POPUP GARDE */
/* ============================= */
.garde-popup-wrapper .garde-close-modern{
position:absolute;top:18px;right:18px;z-index:100;display:flex;align-items:center;justify-content:center;width:58px;height:58px;padding:0;border:3px solid #DDE1F3;border-radius:50%;background:#fff;appearance:none;-webkit-appearance:none;cursor:pointer;box-shadow:0 8px 22px rgba(35,25,85,.18);transition:background .3s,border-color .3s,transform .3s}
.garde-popup-wrapper .garde-close-modern i{display:block;font-size:2rem;line-height:1;color:#394B9A;transition:color .3s,transform .3s}
.garde-popup-wrapper .garde-close-modern:hover{background:#394B9A;border-color:#394B9A;transform:scale(1.08)}
.garde-popup-wrapper .garde-close-modern:hover i{color:#fff;transform:rotate(90deg)}


/* ==========================================================
   ANCIEN MENU MOBILE SUPPRIMÉ
   Le nouveau composant mobile est défini en fin de fichier.
   ========================================================== */

/* ============================= */
/* FIN HEADER */
/* ============================= */

/* ============================= */
/* HERO */
/* ============================= */

.hero-slide-default {
  background-image: url("../img/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-slide-product {
  background-image: url("../img/hero-promo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* SLIDE SUMMER */

.hero-slide-summer {
  background-image: url("../img/hero-autumn.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero {
  scroll-margin-top: 400px;

  position: relative;
  width: 100%;
  min-height: 60vh;

  overflow: hidden;
}

/* SLIDES — DRAG / SWIPE */

.hero {
  cursor: grab;

  /*
   * Le navigateur garde le scroll vertical naturel
   * sur mobile, tandis que le swipe horizontal reste
   * géré par le slider.
   */
  touch-action: pan-y;
}

.hero.is-dragging {
  cursor: grabbing;
}

.hero-slide {
  position: absolute;
  inset: 0;

  background-position: center;
  background-repeat: no-repeat;

  opacity: 1;
  visibility: visible;

  /*
   * Le JS positionne les slides à -100%, 0 et +100%.
   * Sans transition pendant le drag pour que l'image
   * reste exactement sous la main.
   */
  transition: none;

  will-change: transform;

  user-select: none;
  -webkit-user-select: none;

  pointer-events: none;
}

.hero-slide.active {
  pointer-events: auto;
}

/*
 * Au relâchement, uniquement :
 * finition fluide vers la slide choisie.
 */
.hero.is-animating .hero-slide {
  transition:
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Évite de sélectionner / faire glisser les éléments
 * natifs pendant le swipe.
 */
.hero img,
.hero a {
  -webkit-user-drag: none;
}

.hero.is-dragging .hero-content {
  pointer-events: none;
}

/* OVERLAY */

.hero-overlay {
  position: absolute;
  inset: 0;

  /* Voile blanc plus léger pour les slides 2 et 3 */
  background: rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

/* Slide 1 : léger voile noir pour renforcer l'image
   et conserver une bonne lisibilité du texte blanc */
.hero-slide-default .hero-overlay {
  background: rgba(4, 31, 45, 0.18);
}

/* SUMMER OVERLAY */

.hero-slide-summer .hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.48) 0%,
      rgba(255,255,255,0.22) 45%,
      rgba(255,255,255,0.03) 100%
    );
}

/* CONTENT */

.hero-content {
  position: relative;
  z-index: 10;

  height: 60vh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  max-width: 700px;
  padding: 80px;

  text-align: left;
}

.hero-content .hero-main-title {
  font-family: "Roboto", sans-serif;
  font-size: 5rem;
  line-height: 1.05;
  font-weight: 800;

  color: #041f2d;

  margin-bottom: 18px;

  letter-spacing: -2px;
}

.hero-content h2 {
  font-family: "Roboto", sans-serif;
  font-size: calc(5rem + 1.5px);
  line-height: 1.05;
  font-weight: 800;

  color: #041f2d;

  margin-bottom: 18px;

  letter-spacing: -2px;
}

.hero-content h1 {
  font-family: "Roboto", sans-serif;
  font-size: calc(1.1rem + 1.5px);
  font-weight: 500;
  line-height: 1.7;

  color: #4f6572;

  margin-bottom: 35px;
}

.hero-content p {
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.7;

  color: #4f6572;

  margin-bottom: 35px;
}

.hero-content a {
  font-family: "Roboto", sans-serif;
  font-size: .95rem;
  font-weight: 700;

  color: #fff;

  margin-bottom: 30px;
}

/* BUTTON */

.btn-hero {
  display: inline-block;

  width: fit-content;

  padding: 16px 28px;

  background: linear-gradient(135deg, #178e73, #62beaf);

  color: #fff;
  text-decoration: none;

  font-size: .95rem;
  font-weight: 700;

  border-radius: 12px;

  transition: 0.3s ease;

  box-shadow:
    0 6px 18px rgba(21,154,131,0.11);
}

.btn-hero:hover {
  transform: translateY(-2px);

  box-shadow:
    0 10px 24px rgba(21,154,131,0.18);
}

/* DOTS */

.hero-dots {
  position: absolute;

  left: 80px;
  bottom: 72px;

  z-index: 20;

  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-dot {
  width: 11px;
  height: 11px;

  border: none;
  border-radius: 50px;

  background: rgba(15,47,51,0.25);

  cursor: pointer;

  transition: 0.3s ease;
}

.hero-dot.active {
  width: 34px;

  background: #159a83;
}

/* DECORATION */

.hero-decoration {
  position: absolute;

  left: 0;
  bottom: -1px;

  width: 100%;

  z-index: 15;

  pointer-events: none;
}

.hero-decoration img {
  display: block;

  width: 100%;
  height: auto;
}

/* MOBILE */

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

  .hero {
    min-height: 62vh;
  }

  .hero-content {
    height: 62vh;

    max-width: 100%;

    padding: 40px 24px;
  }

  .hero-content h1,
.hero-content h2 {
    font-size: 3rem;
  }

  .hero-content p {
    font-size: 1.05rem;
  }

  .hero-content a {
    font-size: 1.05rem;
  }

  .btn-hero {
    padding: 11px 18px;
  }

  .hero-dots {
    left: 18px;
    bottom: 52px;
  }

  .hero-slide-summer {
    background-position: 68% center;
  }
}


/* ============================= */
/* DISPONIBILITÉ - HERO SUMMER */
/* ============================= */

.hero-availability {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  min-height: 44px;
  padding: 12px 20px;
  border: 1px solid rgba(21, 154, 131, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(4, 31, 45, 0.08);
  font-family: "Roboto", sans-serif;
  color: #159a83;
}

.hero-availability i {
  font-size: 1.2rem;
  color: #159a83;
}

.hero-availability span {
  font-size: 1.05rem;
  font-weight: 700;
}

.hero-availability-divider {
  width: 1px;
  height: 26px;
  background: rgba(21, 154, 131, 0.25);
}

.hero-availability strong {
  font-size: 1rem;
  font-weight: 800;
  color: #041f2d;
}

@media screen and (max-width: 900px) {
  .hero-availability {
    gap: 9px;
    min-height: 48px;
    padding: 10px 14px;
  }

  .hero-availability span {
    font-size: 0.92rem;
  }

  .hero-availability strong {
    font-size: 1.05rem;
  }

  .hero-availability i {
    font-size: 1rem;
  }
}


/* =============================
   HERO — TEXTE BLANC SLIDE 1 UNIQUEMENT
============================= */
.hero-slide-default .hero-content .hero-main-title,
.hero-slide-default .hero-content h1,
.hero-slide-default .hero-content p {
  color: #fff;
}

/* Fin héro */

/* ============================= */
/* SERVICES */
/* ============================= */

/* SERVICES CACHÉS */

.services-hidden {
  grid-column: 1 / -1;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;

  max-height: 0;
  opacity: 0;
  overflow: hidden;

  transform: translateY(30px);

  transition:
    max-height 1.2s ease,
    opacity 0.7s ease,
    transform 0.9s ease;
}

.services-grid.is-open .services-hidden {
  max-height: 5000px;
  opacity: 1;
  transform: translateY(0);
}

#services {
  scroll-margin-top: 160px;
}

.services {
  position: relative;
  width: 100%;
  padding: 80px 20px 68px;

  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #62beaf14 100%
  );

  overflow: hidden;
}

/* HEADER */

.services-heading {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 58px;
}

.services-heading-icon {
  display: block;
  margin-bottom: 18px;
  font-size: 2.4rem;
  color: #7fcfbe;
}

.services-heading p {
  margin: 0 0 18px;

  font-family: "Roboto", sans-serif;
  font-size: .86rem;
  font-weight: 700;

  letter-spacing: 5px;
  text-transform: uppercase;

  color: #159a83;
}

.services-heading h2 {
  margin: 0;

  font-family: "Roboto", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;

  color: #041f2d;
}

/* GRID */

.services-grid {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1450px;

  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 28px;
}

/* CARTES SERVICES */

.service-item {
  position: relative;
  min-height: 0;
  background: transparent;
  border-radius: 21px;
}

.service-card-inner {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  min-height: 0;
}

.service-card-face {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-height: 0;
  background: #fff;
  border-radius: 21px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(4,31,45,0.025);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.service-item:hover .service-card-front {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(4,31,45,0.045);
}

.service-card-front {
  padding-bottom: 30px;
}

/* IMAGE */

.service-image {
  width: 100%;
  height: 115px;
  flex: 0 0 115px;
  overflow: hidden;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s ease;
}

.service-item:hover .service-image img {
  transform: scale(1.025);
}

/* CONTENT */

.service-item h3 {
  margin: 26px 0 14px;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #041f2d;
}

.service-line {
  display: block;
  width: 56px;
  height: 4px;
  margin: 0 auto 20px;
  border-radius: 50px;
  background: #20b191;
}

/* TEXTE COMPLET */

.service-item p,
.service-card-front p {
  display: block;
  max-width: 84%;
  margin: 0 auto;
  overflow: visible;
  text-overflow: clip;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.72;
  color: #425761;
}

/* BUTTON */

.services-button {
  position: relative;
  z-index: 2;

  text-align: center;

  margin-top: 52px;
}

#toggleServices {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  border: none;

  padding: 20px 38px;

  border-radius: 50px;

  background: linear-gradient(
    135deg,
    #159a83,
    #62beaf
  );

  color: #fff;

  font-family: "Roboto", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;

  cursor: pointer;

  transition: 0.35s ease;
}

#toggleServices:hover {
  transform: translateY(-3px);

  box-shadow: 0 12px 30px rgba(21,154,131,0.24);
}

#toggleServices i {
  font-size: 1.4rem;
}

/* TABLET */

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

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

/* MOBILE */

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

  .services {
    padding: 90px 20px;
  }

  .services-heading {
    margin-bottom: 50px;
  }

  .services-heading h2 {
    font-size: 2.6rem;
  }

  .services-grid,
  .services-hidden {
    grid-template-columns: 1fr;
  }
  .service-item,
  .service-card-inner {
    min-height: 0;
  }

  .service-image {
    height: 115px;
    flex-basis: 170px;
  }

  .service-item h3 {
    font-size: 1.4rem;
  }

  .service-item p {
    max-width: 86%;
    font-size: .86rem;
  }

  #toggleServices {
    width: 100%;
    justify-content: center;
  }
}

/* Fin services */

/* ============================= */
/* PROMOS */
/* ============================= */

.promos {
  position: relative;
  width: 100%;
  padding: 80px 20px;
  overflow: hidden;
  background: #62beaf14;
}

.promos-container {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
}

.promos-heading {
  margin-bottom: 56px;
  text-align: center;
}

.promos-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 25px;
  font-family: "Roboto", sans-serif;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #159a83;
}

.promos-label i {
  font-size: 1.4rem;
}

.promos-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 30px;
}

.promos-title-row h2 {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  color: #041f2d;
}

.promos-title-row i {
  font-size: 3rem;
  color: #62beaf;
}

.promos-validity {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-align: left;
}

.promos-validity i {
  font-size: 2.3rem;
  color: #159a83;
}

.promos-validity strong {
  display: block;
  margin-bottom: 5px;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #041f2d;
}

.promos-validity span {
  font-family: "Roboto", sans-serif;
  font-size: 1.05rem;
  color: #5f7177;
}

/* ============================= */
/* SLIDER */
/* ============================= */

.promos-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.promos-track {
  display: flex;
  gap: 28px;
  padding: 0 45px 8px 0;
  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: auto;
}

.promos-track::-webkit-scrollbar {
  display: none;
}

.promos-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.promos-track > .promo-card {
  flex: 0 0 calc((100% - 110px) / 3);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.promos-track img {
  -webkit-user-drag: none;
  user-drag: none;
}

.promos-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.promos-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(4, 31, 45, 0.18);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}

.promos-dots button.active {
  width: 34px;
  background: #159a83;
}

/* ============================= */
/* CARTE PROMO — VERSION FIDÈLE AU VISUEL */
/* ============================= */

.promo-card-ciphar {
  position: relative;
  min-height: 530px;
  overflow: hidden;

  border: 8px solid rgba(255,255,255,.95);
  border-radius: 38px;
  background: #fff;

  box-shadow: 0 18px 45px rgba(4,31,45,.10);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.promo-card-ciphar:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 55px rgba(4,31,45,.14);
}

.promo-card-background {
  display: none;
}

.promo-card-ciphar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  /*
   * Fond 100 % CSS :
   * blanc en haut à gauche,
   * diagonale nette,
   * vert très clair en bas à droite.
   */
  background:
    linear-gradient(
      128deg,
      #ffffff 0%,
      #ffffff 58%,
      #f8fcfb 58.2%,
      #edf8f5 82%,
      #e3f4ee 100%
    );

  pointer-events: none;
}

.promo-ciphar-content {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 52% 48%;
  grid-template-rows: 96px 1fr 102px 58px;
  column-gap: 0;
  row-gap: 12px;

  min-height: 544px;
  padding: 18px 18px 14px;
}

/* Badge */

.promo-ciphar-badge {
  position: absolute;
  top: 14px;
  left: 18px;
  z-index: 4;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 108px;
  min-height: 46px;
  padding: 7px 14px;

  border-radius: 21px;
  background: linear-gradient(135deg,#178e73,#62beaf);
  box-shadow: 0 14px 30px rgba(21,154,131,.22);

  font-family: "Roboto",sans-serif;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

/* Produit vertical à droite */

.promo-product-zone {
  grid-column: 2;
  grid-row: 1 / 4;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  min-width: 0;
  min-height: 0;
  padding: 54px 0 12px;

  pointer-events: none;
}

.promo-product-image {
  display: block;

  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 385px;

  object-fit: contain;
  object-position: center bottom;

  filter: drop-shadow(0 18px 18px rgba(4,31,45,.14));
}

/* Texte à gauche */

.promo-ciphar-copy {
  grid-column: 1;
  grid-row: 2;

  align-self: center;
  min-width: 0;
  padding: 12px 6px 0 3px;

  text-align: left;
}

.promo-ciphar-copy h3,
.promo-ciphar-copy h4,
.promo-ciphar-format {
  font-family: "Roboto",sans-serif;
}

.promo-ciphar-copy h3 {
  margin: 0 0 10px;

  font-size: clamp(1.3rem,1.6vw,1.65rem);
  font-weight: 850;
  line-height: 1.05;

  color: #082633;
}

.promo-ciphar-copy h4 {
  margin: 0;

  font-size: clamp(1.25rem,1.8vw,1.75rem);
  font-weight: 900;
  line-height: 1.02;

  color: #168c70;
}

.promo-copy-line {
  display: block;

  width: 38px;
  height: 4px;
  margin: 12px 0 10px;

  border-radius: 999px;
  background: #159a83;
}

.promo-ciphar-format {
  margin: 0;

  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;

  color: #59676d;
}

/* Encart remise compact */

.promo-ciphar-offer {
  grid-column: 1;
  grid-row: 3;

  display: flex;
  align-items: center;
  gap: 14px;

  width: 96%;
  min-height: 74px;
  margin: 0;
  padding: 9px 10px;

  border: 1px solid rgba(255,255,255,.98);
  border-radius: 21px;

  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 34px rgba(4,31,45,.10);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  text-align: left;
}

.promo-offer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;

  width: 48px;
  height: 48px;

  border-radius: 50%;
  background: linear-gradient(135deg,#178e73,#20b191);
  box-shadow: 0 10px 22px rgba(21,154,131,.22);
}

.promo-offer-icon i {
  font-size: 1.2rem;
  color: #fff;
}

.promo-offer-copy {
  min-width: 0;
}

.promo-offer-copy > span {
  display: block;
  margin: 0 0 6px;

  font-family: "Roboto",sans-serif;
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.12;

  color: #596267;
}

.promo-offer-copy strong {
  display: block;

  font-family: "Roboto",sans-serif;
  font-size: clamp(2rem,2.6vw,2.65rem);
  font-weight: 900;
  line-height: .95;

  color: #168c70;
  white-space: nowrap;
}

/* Bouton pleine largeur */

.promo-ciphar-btn {
  grid-column: 1 / -1;
  grid-row: 4;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 11px 18px;

  border-radius: 999px;
  background: linear-gradient(135deg,#087361,#20b191);
  box-shadow: 0 6px 18px rgba(9,112,91,.14);

  font-family: "Roboto",sans-serif;
  font-size: 1rem;
  font-weight: 850;
  color: #fff;
  text-decoration: none;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    filter .3s ease;
}

.promo-ciphar-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(9,112,91,.20);
  filter: brightness(1.025);
}

.promo-ciphar-btn i {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: #fff;
}


/* Correction des PNG verticaux comportant de grandes marges transparentes */

.promo-layout-vertical .promo-product-zone {
  overflow: hidden;
}

.promo-layout-vertical .promo-product-image-vertical {
  max-width: none;
  max-height: none;

  width: 145%;
  height: 100%;

  object-fit: contain;
  object-position: center bottom;

  transform: scale(1.12);
  transform-origin: center bottom;
}

/* Pour la brume Giphar : son fichier source possède beaucoup d'espace vide */
.promo-layout-vertical:first-child .promo-product-image-vertical {
  transform: scale(1.30);
}

/* ============================= */
/* PRODUIT HORIZONTAL */
/* ============================= */

.promo-layout-horizontal .promo-ciphar-content {
  grid-template-columns: 1fr;
  grid-template-rows: 82px 215px auto 90px 56px;
  row-gap: 10px;
}

.promo-layout-horizontal .promo-product-zone {
  grid-column: 1;
  grid-row: 2;

  align-items: center;
  justify-content: center;

  padding: 10px 0 0;
}

.promo-layout-horizontal .promo-product-image {
  width: 96%;
  max-width: 560px;
  max-height: 228px;
  object-position: center;
}

.promo-layout-horizontal .promo-ciphar-copy {
  grid-column: 1;
  grid-row: 3;

  align-self: start;
  padding: 8px 4px 0;
}

.promo-layout-horizontal .promo-ciphar-offer {
  grid-column: 1;
  grid-row: 4;

  width: 55%;
  min-width: 220px;
}

.promo-layout-horizontal .promo-ciphar-btn {
  grid-row: 5;
}

/* ============================= */
/* TABLETTE */
/* ============================= */

@media screen and (max-width:1200px) and (min-width:751px) {

  .promo-card-ciphar {
    min-height: 555px;
  }

  .promo-ciphar-content {
    min-height: 539px;
    grid-template-rows: 92px 1fr 96px 56px;
    padding: 18px 17px 14px;
  }

  .promo-product-image {
    max-height: 370px;
  }

  .promo-ciphar-copy h3 {
    font-size: 1.4rem;
  }

  .promo-ciphar-copy h4 {
    font-size: 1.4rem;
  }

  .promo-ciphar-offer {
    min-height: 74px;
    padding: 13px;
  }

  .promo-offer-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }
}

/* ============================= */
/* MOBILE — COPIE DU VISUEL */
/* ============================= */


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

  .promo-card-ciphar::after {
    background:
      linear-gradient(
        126deg,
        #ffffff 0%,
        #ffffff 56%,
        #f8fcfb 56.2%,
        #edf8f5 82%,
        #e3f4ee 100%
      );
  }


  .promo-card-ciphar {
    min-height: 0;
    border-width: 6px;
    border-radius: 30px;
  }

  .promo-ciphar-content {
    grid-template-columns: 53% 47%;
    grid-template-rows: 76px 1fr 88px 56px;
    row-gap: 10px;

    min-height: 520px;
    padding: 14px 13px 12px;
  }

  .promo-ciphar-badge {
    top: 14px;
    left: 13px;

    min-width: 94px;
    min-height: 50px;
    padding: 7px 14px;

    border-radius: 18px;
    font-size: 1.5rem;
  }

  .promo-product-zone {
    align-items: flex-end;
    padding: 48px 0 14px;
  }

  .promo-product-image {
    max-width: 118%;
    max-height: 320px;
  }

  .promo-layout-vertical .promo-product-image-vertical {
    width: 155%;
    height: 100%;
    transform: scale(1.16);
  }

  .promo-layout-vertical:first-child .promo-product-image-vertical {
    transform: scale(1.38);
  }

  .promo-ciphar-copy {
    align-self: center;
    padding: 34px 6px 0 2px;
  }

  .promo-ciphar-copy h3 {
    margin-bottom: 8px;
    font-size: 1.2rem;
  }

  .promo-ciphar-copy h4 {
    font-size: 1.28rem;
  }

  .promo-copy-line {
    width: 40px;
    height: 4px;
    margin: 13px 0 12px;
  }

  .promo-ciphar-format {
    font-size: .86rem;
  }

  .promo-ciphar-offer {
    width: 98%;
    min-height: 78px;
    padding: 9px 10px;
    border-radius: 18px;
  }

  .promo-offer-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .promo-offer-icon i {
    font-size: 1.4rem;
  }

  .promo-offer-copy > span {
    font-size: .72rem;
  }

  .promo-offer-copy strong {
    font-size: 2rem;
  }

  .promo-ciphar-btn {
    min-height: 46px;
    padding: 10px 14px;
    font-size: .95rem;
  }

  /* horizontal mobile */

  .promo-layout-horizontal .promo-ciphar-content {
    grid-template-columns: 1fr;
    grid-template-rows: 68px 180px auto 78px 52px;
    min-height: 520px;
  }

  .promo-layout-horizontal .promo-product-zone {
    padding: 0;
  }

  .promo-layout-horizontal .promo-product-image {
    width: 98%;
    max-height: 175px;
  }

  .promo-layout-horizontal .promo-ciphar-copy {
    padding: 8px 2px 0;
  }

  .promo-layout-horizontal .promo-ciphar-offer {
    width: 58%;
    min-width: 0;
    min-height: 74px;
  }
}

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

  .promo-ciphar-content {
    grid-template-columns: 54% 46%;
    grid-template-rows: 70px 1fr 80px 52px;
    min-height: 465px;
    padding-inline: 13px;
  }

  .promo-ciphar-badge {
    left: 13px;
    min-width: 88px;
    min-height: 46px;
    font-size: 1.4rem;
  }

  .promo-product-image {
    max-height: 290px;
  }

  .promo-layout-vertical .promo-product-image-vertical {
    width: 160%;
    transform: scale(1.18);
  }

  .promo-layout-vertical:first-child .promo-product-image-vertical {
    transform: scale(1.40);
  }

  .promo-ciphar-copy {
    padding-top: 30px;
  }

  .promo-ciphar-copy h3 {
    font-size: 1.1rem;
  }

  .promo-ciphar-copy h4 {
    font-size: 1.15rem;
  }

  .promo-ciphar-format {
    font-size: .8rem;
  }

  .promo-ciphar-offer {
    gap: 10px;
    padding: 9px 10px;
  }

  .promo-offer-icon {
    flex-basis: 48px;
    width: 38px;
    height: 48px;
  }

  .promo-offer-copy strong {
    font-size: 1.8rem;
  }

  .promo-layout-horizontal .promo-ciphar-content {
    grid-template-rows: 64px 165px auto 74px 50px;
    min-height: 465px;
  }

  .promo-layout-horizontal .promo-product-image {
    max-height: 160px;
  }
}


/* ============================= */
/* A PROPOS DE NOUS */
/* ============================= */

.about {
  position: relative;
  width: 100%;
  background: #092E38;
  padding: 170px 90px 40px 90px;
  overflow: hidden;
}

.aproposdenous-decoration {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
}

.about-container {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.about-text {
  width: 100%;
  color: #fff;
}

.about-text h2 {
  font-family: "Roboto", sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  margin: 0 0 20px;
  font-weight: 800;
  color: #ffffff;
  text-align: left;
}

.about-text h2 span {
  color: inherit;
  border: none;
  padding: 0;
}

.subtitle {
  font-family: "Roboto", sans-serif;
  color: #62beaf;
  font-size: 1.15rem;
  margin-bottom: 45px;
}

.description {
  font-family: "Roboto", sans-serif;
  font-size: 1.15rem;
  line-height: 1.8;
  color: #fff;
  text-align: justify;
  hyphens: auto;
}

.description p {
  margin-bottom: 22px;
}

.description h3 {
  margin: 40px 0 20px;
  color: #62beaf;
  font-size: 1.2rem;
}

.about-list {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin-top: 35px;
}

.about-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Roboto", sans-serif;
  font-size: .95rem;
  color: #fff;
}

.about-list li i {
  font-size: 28px;
  color: #62beaf;
}

/* ============================= */
/* CARTES ÉQUIPE */
/* ============================= */

.team-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.team-card {
  perspective: 1200px;
  width: 100%;
  min-height: 410px;
}

.team-card-inner {
  position: relative;
  width: 100%;
  height: 430px;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}

.team-card:hover .team-card-inner {
  transform: rotateY(180deg);
}

.team-card-front,
.team-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(98, 190, 175, 0.28);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  padding: 34px 24px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}

.team-card-front {
  justify-content: center;
}

.team-card-back {
  transform: rotateY(180deg);
  justify-content: flex-start;
  background: linear-gradient(
    145deg,
    rgba(98, 190, 175, 0.18),
    rgba(255, 255, 255, 0.04)
  );
}

.team-card-front img {
  width: 155px;
  height: 155px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #62beaf;
  margin-bottom: 26px;
}

.team-card-front h3,
.team-card-back h3 {
  font-family: "Roboto", sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: #62beaf;
  margin: 0 0 12px;
}

.team-card-front .role {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  margin-bottom: 18px;
}

.team-card-front span {
  display: block;
  width: 44px;
  height: 3px;
  background: #62beaf;
  border-radius: 10px;
  margin-bottom: 0;
}

.card-description {
  width: 100%;
  max-height: 330px;
  overflow-y: auto;
  padding-right: 10px;
  text-align: justify;
}

.card-description p {
  font-family: "Roboto", sans-serif;
  font-size: .86rem;
  line-height: 1.6;
  margin-bottom: 14px;
  color: #fff;
}

.card-description::-webkit-scrollbar {
  width: 6px;
}

.card-description::-webkit-scrollbar-track {
  background: transparent;
}

.card-description::-webkit-scrollbar-thumb {
  background: #62beaf;
  border-radius: 20px;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 900px) {

  .about {
    padding: 140px 25px 50px;
  }

  .about-container {
    width: 100%;
    gap: 50px;
  }

  .about-text {
    text-align: center;
  }

  .description {
    text-align: left;
    font-size: 1.05rem;
  }

  .description h3 {
    text-align: center;
  }

  .about-list {
    justify-content: center;
    gap: 20px;
  }

  .team-cards {
    grid-template-columns: 1fr;
    max-width: 390px;
    margin: 0 auto;
    gap: 35px;
  }

  .team-card {
    width: 100%;
    height: 520px;
    min-height: 520px;
  }

  .team-card-inner {
    height: 520px;
    min-height: 520px;
  }

  .team-card-front,
  .team-card-back {
    padding: 40px 28px;
    border-radius: 21px;
  }

  .team-card-front img {
    width: 180px;
    height: 180px;
    margin-bottom: 32px;
  }

  .team-card-front h3,
  .team-card-back h3 {
    font-size: 1.4rem;
  }

  .team-card-front .role {
    font-size: .95rem;
  }

  .card-description {
    max-height: 300px;
  }

  .card-description p {
    font-size: 1.05rem;
    line-height: 1.65;
  }
}

/* ==========================================================
   ASSURANCE / ENGAGEMENTS
   Styles centralisés dans css/assurance.css (chargé après style.css)
   ========================================================== */

/* ============================= */
/* CONTACT */
/* ============================= */

#contact{
  scroll-margin-top:140px;
}

.contact{
  position:relative;
  padding:40px 20px 120px;
  overflow:hidden;
  background:linear-gradient(to bottom,#62beaf14 0%,#ffffff 100%);
}

.contact,
.contact *{
  font-family:"Roboto",sans-serif;
}

.contact-heading,
.contact-main,
.contact-signature{
  position:relative;
  z-index:2;
}

/* HEADING */

.contact-heading{
  text-align:center;
  margin-bottom:60px;
}

.contact-heading-icon{
  font-size:2.3rem;
  color:#20b191;
  margin-bottom:14px;
}

.contact-heading h2{
  margin:0;
  font-size:clamp(3rem,5vw,3rem);
  font-weight:800;
  line-height:1.05;
  color:#041f2d;
}

.contact-heading span{
  display:block;
  width:90px;
  height:4px;
  margin:24px auto 28px;
  border-radius:50px;
  background:#20b191;
}

.contact-heading p{
  margin:0;
  font-size:1.15rem;
  line-height:1.7;
  color:#5f7077;
}

/* CARDS */

.contact-main{
  display:grid;
  align-items:start;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:1450px;
  margin:0 auto;
  padding:15px 0;
}

.contact-main > .contact-card{
  height:410px;
}

/* La carte itinéraire ne doit pas s'étirer lorsque la carte ordonnance grandit. */
.contact-main > .itineraire-card{
  height:410px;
  min-height:410px;
  align-self:start;
}

.contact-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(4,31,45,.035);
  transition:.35s ease;
}

.contact-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(4,31,45,.07);
}

.contact-card-image{
  height:150px;
  overflow:hidden;
  flex-shrink:0;
  transition:.45s ease;
}

.contact-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}

.contact-card:hover .contact-card-image img{
  transform:scale(1.025);
}

.contact-card-content{
  flex:1;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.contact-card-text{
  min-width:0;
  text-align:left;
}

.contact-card-top{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}

.contact-icon{
  width:74px;
  height:74px;
  border-radius:50%;
  background:#edf7f4;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.contact-icon i{
  font-size:2rem;
  color:#20b191;
}

.contact-divider{
  width:2px;
  height:48px;
  background:#c9ebe2;
  border-radius:99px;
  flex-shrink:0;
}

.contact-card h3{
  margin:0;
  font-size:1.25rem;
  font-weight:800;
  line-height:1.35;
  color:#20b191;
}

.contact-card strong{
  display:block;
  margin-top:20px;
  text-align:left;
  font-size:1rem;
  font-weight:500;
  color:#041f2d;
}

.contact-card p,
.contact-message-text{
  margin:0;
  font-size:.98rem;
  line-height:1.65;
  color:#74828c;
}

.contact-phone-hint{
  display:block;
  margin-top:8px;
  font-size:.85rem;
  color:#7a8a96;
}

/* ============================= */
/* FLECHES */
/* ============================= */

.contact-card-arrow-wrapper{
  display:flex;
  justify-content:flex-end;
  margin-top:auto;
}

.contact-card-arrow,
.contact-back-btn,
.ordonnance-back-btn{
  width:74px;
  height:74px;
  min-width:74px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:
    background-color .3s ease,
    border-color .3s ease,
    transform .3s cubic-bezier(.22,1,.36,1);
}

.contact-card-arrow i,
.contact-back-btn i,
.ordonnance-back-btn i{
  font-size:2rem;
  transition:
    color .3s ease,
    transform .3s cubic-bezier(.22,1,.36,1);
}

.contact-card-arrow{
  background:transparent;
  border:3px solid #20b191;
}

.contact-card-arrow i{
  color:#20b191;
}

.contact-card:hover .contact-card-arrow{
  background:#20b191;
}

.contact-card:hover .contact-card-arrow i{
  color:#fff;
}

.contact-back-btn,
.ordonnance-back-btn{
  background:#fff;
  border:3px solid #20b191;
}

.contact-back-btn i,
.ordonnance-back-btn i{
  color:#20b191;
}

.contact-back-btn:hover,
.ordonnance-back-btn:hover{
  background:#20b191;
}

.contact-back-btn:hover i,
.ordonnance-back-btn:hover i{
  color:#fff;
}

.contact-card:hover .contact-card-arrow i,
.contact-back-btn:hover i,
.ordonnance-back-btn:hover i{
  transform:translateX(3px);
}

/* ============================= */
/* MESSAGE SLIDER */
/* ============================= */

.contact-message-card {
  height: 410px;
  min-height: 410px;
  transition:
    height 0.45s ease,
    min-height 0.45s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.contact-message-card .contact-card-content {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.message-slider {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.45s ease;
}

.contact-message-card.is-open {
  height: 460px;
  min-height: 460px;
}

.contact-message-card.is-open .message-slider {
  transform: translateX(-50%);
}

.message-default,
.message-options {
  position: relative;
  flex: 0 0 50%;
  width: 50%;
  min-width: 0;
  height: 100%;
  padding: 18px;
  box-sizing: border-box;
}

.message-default {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.message-options {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
}

.message-options-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  position: static;
  width: 100%;
  padding: 20px;

  text-align: center;
  transform: none;
}

.message-options-title h3 {
  margin: 0 0 8px;
  color: #20b191;
}

.message-options-title p {
  margin: 0;
  color: #74828c;
}

.contact-action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  max-width: 100%;
  margin-top: 20px;
  padding: 12px 20px;

  border-radius: 999px;
  background: linear-gradient(135deg, #20b191, #67cfc0);
}

.contact-action-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  flex: 0 0 54px;

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

.contact-action-buttons i {
  font-size: 1.4rem;
  color: #fff;
}

.message-options-bottom {
  display: grid;
  grid-template-columns: 74px 1fr 74px;
  align-items: center;

  position: relative;
  left: auto;
  bottom: auto;

  width: 100%;
  padding: 0;
  pointer-events: none;
}

.message-options-bottom .contact-back-btn {
  grid-column: 1;
  pointer-events: auto;
}

.message-options-bottom .message-slide-footer {
  position: static;
  grid-column: 2;
  width: auto;
}

/* DOTS */

.message-slide-footer,
.ordonnance-slide-footer {
  position: absolute;
  left: 0;
  bottom: 18px;

  display: flex;
  justify-content: center;

  width: 100%;
  pointer-events: none;
}

.message-slide-dots,
.ordonnance-slide-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.message-slide-dots span,
.ordonnance-slide-dots span {
  width: 28px;
  height: 4px;

  border-radius: 999px;
  background: rgba(32, 177, 145, 0.25);
}

.message-slide-dots span.active,
.ordonnance-slide-dots span.active {
  background: #20b191;
}

/* TABLETTE : slide 1 compacte, slide 2 développée */

@media screen and (min-width: 781px) and (max-width: 1200px) {
  .contact-main > .contact-message-card {
    height: 390px;
    min-height: 390px;
  }

  .contact-main > .contact-message-card.is-open {
    height: 520px;
    min-height: 520px;
  }

  .contact-message-card .contact-card-image {
    height: 145px;
    transition: height 0.45s ease;
  }

  .contact-message-card.is-open .contact-card-image {
    height: 115px;
  }
}

/* MOBILE : slide 1 compacte, slide 2 développée */

@media screen and (max-width: 780px) {
  .contact-main > .contact-message-card {
    height: 350px;
    min-height: 350px;
  }

  .contact-main > .contact-message-card.is-open {
    height: 500px;
    min-height: 500px;
  }

  .contact-message-card .contact-card-image {
    height: 125px;
    transition: height 0.45s ease;
  }

  .contact-message-card.is-open .contact-card-image {
    height: 150px;
  }

  .message-default,
  .message-options {
    padding: 16px;
  }

  .message-options-center {
    padding: 12px 4px 20px;
  }

  .contact-action-buttons {
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
  }

  .contact-action-buttons a {
    width: 38px;
    height: 48px;
    flex-basis: 48px;
  }

  .contact-action-buttons i {
    font-size: 1.5rem;
  }

  .message-options-bottom {
    grid-template-columns: 60px 1fr 60px;
  }

  .message-options-bottom .contact-back-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }
}

/* ============================= */
/* ORDONNANCE 4 SLIDES */
/* ============================= */

.contact-ordonnance-card .contact-card-content{
  padding:0;
  overflow:hidden;
  position:relative;
}

/*
  La première slide reste compacte.
  La carte grandit uniquement selon l'étape affichée.
*/

.contact-ordonnance-card {
  height: 410px;
  min-height: 410px;

  transition:
    height 0.45s ease,
    min-height 0.45s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* Slide d'ajout de l'ordonnance */
.contact-ordonnance-card.is-open {
  height: 600px;
  min-height: 570px;
}

/* Fichier ajouté : captcha et confidentialité visibles */
.contact-ordonnance-card.is-open.has-file {
  height: 700px;
  min-height: 700px;
}

/* Erreur serveur : la carte grandit uniquement dans ce cas */
.contact-ordonnance-card.is-open.has-server-error {
  height: 690px;
  min-height: 690px;
}

/* Erreur serveur après ajout d'un fichier :
   captcha + confidentialité + message d'erreur */
.contact-ordonnance-card.is-open.has-file.has-server-error {
  height: 790px;
  min-height: 790px;
}

/* Envoi et confirmation */
.contact-ordonnance-card.is-loading,
.contact-ordonnance-card.is-success {
  height: 600px;
  min-height: 570px;
}

.ordonnance-upload.has-file .ordonnance-dropzone {
  display: none;
}

.ordonnance-captcha{
  display:none;
  min-height:95px;
  align-items:center;
  justify-content:center;
  margin-top:0;
}

.ordonnance-captcha.is-visible{
  display:flex;
}

.ordonnance-slider{
  display:flex;
  width:400%;
  height:100%;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

.ordonnance-default,
.ordonnance-upload,
.ordonnance-loading,
.ordonnance-success{
  position:relative;
  width:25%;
  height:100%;
  flex-shrink:0;
  box-sizing:border-box;
}

.contact-ordonnance-card.is-open .ordonnance-slider{
  transform:translateX(-25%);
}

.contact-ordonnance-card.is-loading .ordonnance-slider{
  transform:translateX(-50%);
}

.contact-ordonnance-card.is-success .ordonnance-slider{
  transform:translateX(-75%);
}

.ordonnance-default{
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* UPLOAD */

.ordonnance-upload{
  padding:18px 22px 24px;
  display:flex;
  flex-direction:column;
}

.ordonnance-upload-center{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ordonnance-upload-header{
  text-align:center;
  margin-top:10px;
  margin-bottom:18px;
}

.ordonnance-upload-header h3{
  margin:0 0 10px;
  font-size:1.7rem;
  font-weight:800;
  color:#20b191;
}

.ordonnance-upload-header p{
  margin:0;
  font-size:1rem;
  line-height:1.5;
  color:#74828c;
}

.ordonnance-dropzone{
  width:100%;
  min-height:115px;
  border:2px dashed rgba(32,177,145,.45);
  border-radius:18px;
  background:rgba(98,190,175,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  cursor:pointer;
  margin-bottom:14px;
  transition:.3s ease;
}

.ordonnance-dropzone:hover{
  background:rgba(98,190,175,.14);
}

.ordonnance-dropzone input{
  display:none;
}

.ordonnance-dropzone i{
  font-size:2.2rem;
  color:#20b191;
}

.ordonnance-dropzone strong{
  font-size:.95rem;
  font-weight:800;
  color:#041f2d;
}

.ordonnance-dropzone span{
  font-size:.82rem;
  color:#74828c;
}

.ordonnance-error {
  display: none;
  width: 100%;
  padding: 16px 18px;
  margin:7px 0 14px 0;
  border-radius: 18px;
  background: rgba(98, 190, 175, 0.08);
  color: #e94b4b;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  justify-content: center;
}

.ordonnance-captcha .g-recaptcha {
  margin:0 auto;
}

/* CONFIDENTIALITE */

.ordonnance-confidentialite{
  display:none;
  align-items:flex-start;
  gap:14px;
  width:100%;
  margin-top:10px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(98,190,175,.08);
  border:1px solid rgba(32,177,145,.18);
  color:#5f7077;
}

.contact-ordonnance-card.has-file .ordonnance-confidentialite{
  display:flex;
}

.ordonnance-confidentialite i{
  width:46px;
  height:46px;
  min-width:46px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.45rem;
  color:#20b191;
}

.ordonnance-confidentialite strong{
  display:block;
  margin:0 0 6px;
  font-size:.95rem;
  font-weight:800;
  color:#041f2d;
}

.ordonnance-confidentialite p{
  margin:0;
  font-size:.82rem;
  line-height:1.45;
  color:#6f7d85;
}

.ordonnance-confidentialite a{
  display:inline-block;
  margin-top:8px;
  font-size:.82rem;
  font-weight:800;
  color:#20b191;
  text-decoration:none;
}

.ordonnance-confidentialite a:hover{
  text-decoration:underline;
}

.ordonnance-file-info{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(98,190,175,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.ordonnance-file-name{
  flex:1;
  font-size:.85rem;
  font-weight:600;
  color:#5f7077;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.ordonnance-delete-file{
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
}

.ordonnance-delete-file i{
  font-size:1.15rem;
  color:#e45d5d;
}

.ordonnance-file-info.has-file .ordonnance-delete-file{
  opacity:1;
  visibility:visible;
}

.ordonnance-delete-file:hover{
  background:#ffeaea;
  transform:scale(1.05);
}

.ordonnance-upload-bottom{
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
}

.ordonnance-back-btn{
  width:70px;
  height:70px;
  min-width:70px;
}

.ordonnance-send-btn{
  flex:0 0 230px;
  max-width:230px;
  height:56px;

  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,#20b191,#67cfc0);
  color:#fff;
  font-size:.95rem;
  font-weight:800;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  cursor:pointer;
  transition:.3s ease;
}

.ordonnance-send-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(32,177,145,.22);
}

.ordonnance-send-btn i{
  font-size:1.2rem;
}

/* LOADING + SUCCESS */

.ordonnance-loading,
.ordonnance-success{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px;
}

.ordonnance-loader{
  width:70px;
  height:70px;
  border:5px solid rgba(32,177,145,.15);
  border-top:5px solid #20b191;
  border-radius:50%;
  animation:ordonnanceSpin .8s linear infinite;
  margin-bottom:20px;
}

@keyframes ordonnanceSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.ordonnance-loading h3,
.ordonnance-success h3{
  margin:0 0 12px;
  font-weight:800;
  color:#20b191;
}

.ordonnance-loading h3{
  font-size:1.5rem;
}

.ordonnance-success h3{
  font-size:2rem;
}

.ordonnance-loading p,
.ordonnance-success p{
  margin:0;
  font-size:1rem;
  line-height:1.6;
  color:#74828c;
}

.ordonnance-success i{
  font-size:5rem;
  color:#20b191;
  margin-bottom:20px;
}

/* ============================= */
/* SIGNATURE */
/* ============================= */

.contact-signature{
  width:100%;
  max-width:1450px;
  margin:45px auto 0;
  text-align:center;
}

.contact-signature-logo{
  width:70px;
  height:auto;
  margin-bottom:14px;
}

.contact-signature p{
  margin:0;
  font-size:1.4rem;
  color:#4d5f66;
}

.contact-signature strong{
  color:#20b191;
}

.contact-signature strong.signature-sante{
  color:#008d73;
}

.contact-signature-line{
  display:block;
  width:80px;
  height:3px;
  margin:18px auto 0;
  border-radius:50px;
  background:#20b191;
}

.contact-mini-infos{
  margin-top:24px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  font-size:.95rem;
  font-weight:500;
  color:#6b7a81;
}

.contact-mini-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.contact-mini-item i{
  color:#20b191;
}

/* ============================= */
/* ITINERAIRE */
/* ============================= */

.contact-map-card{
  text-decoration:none;
  color:inherit;
}

.contact-map-card .contact-card-arrow{
  transition:.3s ease;
}

.contact-map-card:hover .contact-card-arrow{
  transform:translateX(4px);
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

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

  .contact-main{
    grid-template-columns:1fr;
    max-width:720px;
  }

  .contact-main > .contact-card:not(.contact-message-card):not(.contact-ordonnance-card){
    height:auto;
    min-height:420px;
  }


  /* ORDONNANCE — TABLETTE */
  .contact-main > .contact-ordonnance-card {
    height: 390px;
    min-height: 390px;
  }

  .contact-main > .contact-ordonnance-card.is-open {
    height: 650px;
    min-height: 555px;
  }

  .contact-main > .contact-ordonnance-card.is-open.has-file {
    height: 735px;
    min-height: 735px;
  }

  .contact-main > .contact-ordonnance-card.is-open.has-file.has-error {
    height: 790px;
    min-height: 790px;
  }

  .contact-main > .contact-ordonnance-card.is-loading,
  .contact-main > .contact-ordonnance-card.is-success {
    height: 640px;
    min-height: 520px;
  }

  .contact-ordonnance-card .contact-card-image {
    height: 145px;
    transition: height 0.45s ease;
  }

  .contact-ordonnance-card.is-open .contact-card-image,
  .contact-ordonnance-card.is-loading .contact-card-image,
  .contact-ordonnance-card.is-success .contact-card-image {
    height: 115px;
  }
}

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

  .contact{
    padding:130px 20px 90px;
  }

  .contact-heading h2{
    font-size:2.5rem;
  }

  .contact-heading p{
    font-size:1rem;
  }

  .contact-main > .contact-card:not(.contact-message-card):not(.contact-ordonnance-card){
    height:auto;
    min-height:unset;
  }

  .contact-card-image{
    height:190px;
  }


  .ordonnance-upload{
    padding:18px 20px 24px;
  }

  .ordonnance-upload-header h3{
    font-size:1.45rem;
  }

  .ordonnance-upload-bottom{
    flex-direction:row;
    align-items:center;
  }

  .ordonnance-back-btn{
    width:64px;
    height:64px;
    min-width:64px;
  }

  .ordonnance-send-btn{
    height:58px;
    font-size:.85rem;
    padding:0 16px;
  }

  .ordonnance-confidentialite{
    padding:14px;
    gap:12px;
  }

  .ordonnance-confidentialite i{
    width:42px;
    height:42px;
    min-width:42px;
    font-size:1.25rem;
  }

  .ordonnance-confidentialite strong{
    font-size:.9rem;
  }

  .ordonnance-confidentialite p,
  .ordonnance-confidentialite a{
    font-size:.78rem;
  }

  .contact-mini-infos{
    flex-direction:column;
    gap:12px;
  }

  /* ORDONNANCE — MOBILE */
  .contact-main > .contact-ordonnance-card {
    height: 350px;
    min-height: 350px;
  }

  .contact-main > .contact-ordonnance-card.is-open {
    height: 620px;
    min-height: 590px;
  }

  .contact-main > .contact-ordonnance-card.is-open.has-file {
    height: 720px;
    min-height: 720px;
  }

  .contact-main > .contact-ordonnance-card.is-open.has-file.has-error {
    height: 890px;
    min-height: 890px;
  }

  .contact-main > .contact-ordonnance-card.is-loading,
  .contact-main > .contact-ordonnance-card.is-success {
    height: 640px;
    min-height: 520px;
  }

  .contact-ordonnance-card .contact-card-image {
    height: 125px;
  }

  .contact-ordonnance-card.is-open .contact-card-image,
  .contact-ordonnance-card.is-loading .contact-card-image,
  .contact-ordonnance-card.is-success .contact-card-image {
    height: 150px;
  }
}

/* Fin contact */

/* ============================= */
/* FOOTER */
/* ============================= */

.footer {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 28px 20px 30px;
  background: linear-gradient(135deg, #178e73, #62beaf);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.footer-shape {
  position: absolute;
  bottom: -70px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  z-index: 1;
}

.footer-shape-left {
  top: 70px;
  left: 30px;
  width: 900px;
  height: 900px;
}

.footer-shape-right {
  top: 60px;
  right: -40px;
  width: 1000px;
  height: 1000px;
}

.footer-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
}

.footer-social span {
  font-family: "Roboto", sans-serif;
  font-size: .86rem;
  font-weight: 700;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  color: #178e73;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease;
}

.footer-social a i {
  font-size: 24px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-social a:hover {
  transform: translateY(-2px);
  background: #f2f2f2;
}

.footer-social a:hover i {
  transform: scale(1.05);
}

.footer p {
  font-family: "Roboto", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.footer p a {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  transition: 0.25s ease;
}

.footer p a:hover {
  text-decoration: underline;
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 14px;

  font-family: "Roboto", sans-serif;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;

  transition: 0.25s ease;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-links span {
  opacity: 0.6;
}

.footer-copyright {
  font-family: "Roboto", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  opacity: 0.9;
  margin: 0;
}

@media (max-width: 768px) {
  .footer {
    padding: 24px 15px 26px;
  }

  .footer-social {
    flex-wrap: wrap;
    gap: 12px;
  }

  .footer p {
    font-size: 0.85rem;
  }
}

/* Fin footer */

/* ============================= */
/* CONFIDENTIALITÉ ORDONNANCE */
/* ============================= */

.ordonnance-confidentialite{
  display:none;
  align-items:flex-start;
  gap:14px;

  width:100%;
  margin-top:8px;
  padding:14px 16px;

  background:rgba(98,190,175,.08);
  border:1px solid rgba(32,177,145,.16);
  border-radius:18px;

  text-align:left;
}

.ordonnance-captcha.is-visible + .ordonnance-confidentialite{
  display:flex;
}

.ordonnance-confidentialite i{
  width:38px;
  height:38px;
  min-width:38px;

  border-radius:50%;

  background:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#20b191;
  font-size:1.35rem;
}

.ordonnance-confidentialite-content{
  min-width:0;
}

.ordonnance-confidentialite strong{
  display:block;
  margin:0 0 5px;

  font-size:.88rem;
  font-weight:800;
  line-height:1.25;

  color:#041f2d;
}

.ordonnance-confidentialite p{
  margin:0;

  font-size:.78rem;
  line-height:1.45;

  color:#5f7077;
}

.ordonnance-confidentialite a{
  display:inline-flex;
  margin-top:7px;

  font-size:.78rem;
  font-weight:800;

  color:#20b191;
  text-decoration:none;
}

.ordonnance-confidentialite a:hover{
  text-decoration:underline;
}

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

  .ordonnance-confidentialite{
    padding:13px 14px;
    gap:12px;
  }

  .ordonnance-confidentialite i{
    width:34px;
    height:34px;
    min-width:34px;
    font-size:1.2rem;
  }

  .ordonnance-confidentialite strong{
    font-size:.82rem;
  }

  .ordonnance-confidentialite p,
  .ordonnance-confidentialite a{
    font-size:.74rem;
  }
}




/* =========================================================
   CORRECTION : bouton « Voir les gardes » pleine largeur
   dans le panneau de navigation mobile
   ========================================================= */
@media screen and (max-width: 900px) {
  #header .column_2 > .desktop-garde {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    width: calc(100% + 80px);
    min-height: 78px;

    margin: 0 -40px;
    padding: 18px 24px;

    border-radius: 0;
    box-shadow: none;
    flex: 0 0 calc((100% - 72px) / 4);
  min-width: calc((100% - 72px) / 4);
  }

  #header .column_2 > .desktop-garde:hover {
    transform: none;
  }

  #header .column_2 > .desktop-garde > div {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #header .column_2 > .desktop-garde .garde-button-text,
  #header .column_2 > .desktop-garde .menu-garde-status {
    margin: 0;
  }
}

/* =========================================================
   À PROPOS — CARTES ÉQUIPE RESPONSIVES
   Tablette : 2 colonnes / Mobile : 1 colonne fluide
   ========================================================= */

/* Tablettes */
@media screen and (min-width: 701px) and (max-width: 1100px) {
  .about {
    padding-left: 32px;
    padding-right: 32px;
  }

  .about-container {
    width: 100%;
    max-width: 900px;
  }

  .team-cards {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .team-card,
  .team-card-inner {
    width: 100%;
    height: 460px;
    min-height: 460px;
  }

  .team-card-front,
  .team-card-back {
    padding: 30px 22px;
  }

  .team-card-front img {
    width: clamp(130px, 18vw, 165px);
    height: clamp(130px, 18vw, 165px);
    max-width: 100%;
  }

  .team-card-front h3,
  .team-card-back h3 {
    font-size: 1.2rem;
  }

  .card-description {
    max-height: 330px;
  }
}

/* Mobiles */
@media screen and (max-width: 700px) {
  .about {
    padding: 115px 16px 45px;
  }

  .about-container {
    width: 100%;
    gap: 38px;
  }

  .team-cards {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .team-card,
  .team-card-inner {
    width: 100%;
    height: clamp(430px, 125vw, 510px);
    min-height: 430px;
  }

  .team-card-front,
  .team-card-back {
    width: 100%;
    padding: 28px 18px;
    border-radius: 18px;
  }

  .team-card-front img {
    width: clamp(135px, 43vw, 180px);
    height: clamp(135px, 43vw, 180px);
    max-width: 100%;
    margin-bottom: 24px;
  }

  .team-card-front h3,
  .team-card-back h3 {
    font-size: clamp(1.35rem, 6vw, 1.7rem);
  }

  .team-card-front .role {
    font-size: 1.05rem;
  }

  .card-description {
    max-height: calc(100% - 60px);
    padding-right: 6px;
  }

  .card-description p {
    font-size: .96rem;
    line-height: 1.55;
  }
}

/* Très petits écrans */
@media screen and (max-width: 360px) {
  .team-card,
  .team-card-inner {
    height: 440px;
    min-height: 440px;
  }

  .team-card-front,
  .team-card-back {
    padding: 24px 14px;
  }

  .team-card-front img {
    width: 130px;
    height: 130px;
  }
}

/* Popup garde centré sur mobile et tablette */
@media screen and (max-width: 1024px) {
  .garde-popup-wrapper {
    top: 50%;
    left: 50%;
    width: calc(100vw - 40px);
    max-width: 430px;
    transform: translate(-50%, -50%) scale(.95);
  }

  .garde-popup-wrapper.active {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ==========================================================
   ASSURANCE RESPONSIVE
   Géré uniquement dans css/assurance.css pour éviter les conflits.
   ========================================================== */

/* ============================= */
/* ORDONNANCE : SLIDE 2 PLUS HAUT */
/* ORDINATEUR UNIQUEMENT */
/* ============================= */

@media screen and (min-width: 1024px) {
  .contact-ordonnance-card.is-open:not(.has-file):not(.is-loading):not(.is-success) {
    height: 620px;
  }
}

/* ============================= */
/* ORDONNANCE AJOUTÉE — DESKTOP */
/* Espace réservé aux indicateurs */
/* ============================= */

@media screen and (min-width: 1201px) {
  .contact-ordonnance-card.is-open.has-file {
    height: 740px;
    min-height: 740px;
  }

  .contact-ordonnance-card.is-open.has-file .ordonnance-upload {
    padding-bottom: 62px;
  }

  .contact-ordonnance-card.is-open.has-file .ordonnance-upload-bottom {
    margin-bottom: 12px;
  }

  .contact-ordonnance-card.is-open.has-file .ordonnance-slide-footer {
    bottom: 18px;
  }
}


/* ============================= */
/* LIEN AIDE — CARTE ORDONNANCE */
/* N'affecte pas la hauteur de la carte */
/* ============================= */

.contact-ordonnance-card .ordonnance-default {
  position: relative;
}

.contact-ordonnance-card .ordonnance-help-link {
  position: absolute;
  left: 28px;
  bottom: 58px;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  width: fit-content;
  max-width: calc(100% - 150px);

  color: #159a83;
  font-family: "Roboto", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.contact-ordonnance-card .ordonnance-help-link i {
  flex-shrink: 0;
  font-size: .95rem;
  color: #20b191;
}

.contact-ordonnance-card .ordonnance-help-link span {
  border-bottom: 1px solid rgba(21, 154, 131, 0.35);
}

.contact-ordonnance-card .ordonnance-help-link:hover {
  color: #0f7f6c;
  transform: translateY(-1px);
}

.contact-ordonnance-card .ordonnance-help-link:hover span {
  border-bottom-color: currentColor;
}

@media (max-width: 600px) {
  .contact-ordonnance-card .ordonnance-help-link {
    left: 22px;
    bottom: 56px;
    max-width: calc(100% - 125px);
    font-size: 0.76rem;
  }

  .contact-ordonnance-card .ordonnance-help-link i {
    font-size: 1.1rem;
  }
}

/* ==========================================================
   CARTE ORDONNANCE — HAUTEUR 100 % DYNAMIQUE
   La hauteur est calculée par le JavaScript selon la slide
   réellement affichée, les erreurs et la taille du reCAPTCHA.
   ========================================================== */

.contact-ordonnance-card,
.contact-main > .contact-ordonnance-card,
.contact-ordonnance-card.is-open,
.contact-ordonnance-card.is-open.has-file,
.contact-ordonnance-card.is-open.has-error,
.contact-ordonnance-card.is-open.has-server-error,
.contact-ordonnance-card.is-open.has-file.has-error,
.contact-ordonnance-card.is-open.has-file.has-server-error,
.contact-ordonnance-card.is-loading,
.contact-ordonnance-card.is-success {
  min-height: 0;
}

.contact-ordonnance-card .contact-card-content {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.ordonnance-slider {
  height: auto;
  min-height: 0;
  align-items: flex-start;
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    height .35s ease;
}

.ordonnance-default,
.ordonnance-upload,
.ordonnance-loading,
.ordonnance-success {
  height: auto;
  min-height: 0;
  align-self: flex-start;
}

.ordonnance-captcha,
.ordonnance-captcha.is-visible {
  height: auto;
  overflow: visible;
}

.ordonnance-captcha .g-recaptcha,
.ordonnance-captcha .g-recaptcha > div,
.ordonnance-captcha iframe {
  max-width: 100%;
}

/* ==========================================================
   CARTE ORDONNANCE — ESPACEMENT BAS CONSTANT
   Le premier écran garde la hauteur des autres cartes.
   Les écrans suivants utilisent leur hauteur réelle.
   ========================================================== */

.contact-ordonnance-card.is-open,
.contact-ordonnance-card.is-open.has-file,
.contact-ordonnance-card.is-open.has-error,
.contact-ordonnance-card.is-open.has-server-error,
.contact-ordonnance-card.is-open.has-file.has-error,
.contact-ordonnance-card.is-open.has-file.has-server-error,
.contact-ordonnance-card.is-loading,
.contact-ordonnance-card.is-success {
  height: auto;
  min-height: 0;
}

.contact-ordonnance-card .ordonnance-default,
.contact-ordonnance-card .ordonnance-upload,
.contact-ordonnance-card .ordonnance-loading,
.contact-ordonnance-card .ordonnance-success {
  padding-bottom: 24px;
}

.contact-ordonnance-card.is-open.has-file .ordonnance-upload {
  padding-bottom: 24px;
}

.contact-ordonnance-card .ordonnance-upload-bottom,
.contact-ordonnance-card.is-open.has-file .ordonnance-upload-bottom {
  margin-bottom: 0;
}

/* Les points ne sont plus positionnés en absolu :
   ils participent à la hauteur réelle de la slide. */
.contact-ordonnance-card .ordonnance-slide-footer,
.contact-ordonnance-card.is-open.has-file .ordonnance-slide-footer {
  position: static;
  inset: auto;
  width: 100%;
  margin-top: 16px;
  flex-shrink: 0;
}
/* ==========================================================
   CONTACT — ALIGNEMENT SLIDE 1 ORDONNANCE
   Restaure la même zone utile que les cartes Message/Itinéraire.
   Les règles dynamiques des slides 2, erreurs et captcha restent intactes.
   ========================================================== */

.contact-ordonnance-card:not(.is-details):not(.is-upload):not(.is-loading):not(.is-success) .contact-card-content {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.contact-ordonnance-card:not(.is-details):not(.is-upload):not(.is-loading):not(.is-success) .ordonnance-slider {
  height: 100%;
  align-items: stretch;
}

.contact-ordonnance-card:not(.is-details):not(.is-upload):not(.is-loading):not(.is-success) .ordonnance-default {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 25%;
  height: 100%;
  min-height: 100%;
  padding: 18px;
  padding-bottom: 18px;
  align-self: stretch;
}

.contact-ordonnance-card:not(.is-details):not(.is-upload):not(.is-loading):not(.is-success) .contact-card-arrow-wrapper {
  margin-top: auto;
}

.contact-ordonnance-card:not(.is-details):not(.is-upload):not(.is-loading):not(.is-success) .ordonnance-slide-footer {
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 100%;
  margin-top: 0;
}

/* ==========================================================
   CONTACT — ORDONNANCE SLIDE 1 MOBILE
   La hauteur compacte historique de 350 px coupe désormais
   la flèche et les indicateurs depuis l'ajout du lien d'aide.
   Cette correction concerne uniquement la slide 1 sur mobile.
   ========================================================== */
@media screen and (max-width: 780px) {
  .contact-main > .contact-ordonnance-card:not(.is-details):not(.is-upload):not(.is-loading):not(.is-success) {
    height: 430px;
    min-height: 430px;
  }

  .contact-ordonnance-card:not(.is-details):not(.is-upload):not(.is-loading):not(.is-success) .contact-card-content {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* ============================= */
/* HEADER + BANDEAU SYNCHRONISÉS */
/* ============================= */

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

  :root {
    --info-bar-height: 44px;
  }

  /*
   * Le hero démarre directement sous le haut du document.
   * Pas d'espace blanc réservé à un header fixed.
   */
  body {
    padding-top: 0;
  }

  .led-info-bar {
    height: var(--info-bar-height);
  }

  /*
   * MODE NATUREL
   * = vrai mouvement avec le document.
   * Aucun transform / aucune animation.
   */
  body.mobile-header-natural .led-info-bar {
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    transition: none;
  }

  body.mobile-header-natural #header {
    position: absolute;
    top: var(--info-bar-height);
    left: 0;
    transform: none;
    transition: none;
  }

  /*
   * MODE FLOTTANT
   * Il n'est activé qu'une fois le header naturel complètement
   * hors du viewport, donc la bascule est invisible.
   */
  body.mobile-header-floating .led-info-bar {
    position: fixed;
    top: 0;
    left: 0;
    will-change: transform;
  }

  body.mobile-header-floating #header {
    position: fixed;
    top: var(--info-bar-height);
    left: 0;
    will-change: transform;
  }

  /*
   * CACHÉ — rapide
   */
  body.mobile-header-floating.mobile-header-hidden .led-info-bar {
    transform: translate3d(0, -120%, 0);
    transition: transform 0.20s cubic-bezier(0.4, 0, 1, 1);
  }

  body.mobile-header-floating.mobile-header-hidden #header {
    transform: translate3d(
      0,
      calc(-120% - var(--info-bar-height)),
      0
    );
    transition: transform 0.20s cubic-bezier(0.4, 0, 1, 1);
  }

  /*
   * VISIBLE — retour doux
   */
  body.mobile-header-floating.mobile-header-visible .led-info-bar,
  body.mobile-header-floating.mobile-header-visible #header {
    transform: translate3d(0, 0, 0);
    transition: transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /*
   * Burger / popup :
   * toujours visible et synchronisé.
   */
  body.menu-open .led-info-bar,
  body.menu-open #header,
  body.popup-open .led-info-bar,
  body.popup-open #header {
    transform: translate3d(0, 0, 0);
  }

  #header .column_2 {
    height: calc(100vh - var(--info-bar-height));
  }
}


/* ==========================================================
   BASCULE NATURAL -> FLOATING SANS FLASH
   ========================================================== */
@media screen and (max-width: 900px) {

  /*
   * Pendant les 2 frames de bascule absolute -> fixed,
   * le header est immédiatement placé hors écran et AUCUNE
   * transition n'est autorisée.
   */
  body.mobile-header-floating.mobile-header-hidden.mobile-header-switching .led-info-bar,
  body.mobile-header-floating.mobile-header-hidden.mobile-header-switching #header {
    transition: none;
  }

  body.mobile-header-floating.mobile-header-hidden.mobile-header-switching .led-info-bar {
    transform: translate3d(0, -120%, 0);
  }

  body.mobile-header-floating.mobile-header-hidden.mobile-header-switching #header {
    transform: translate3d(
      0,
      calc(-120% - var(--info-bar-height)),
      0
    );
  }
}


/* ==========================================================
   HEADER DESKTOP — BANDEAU INFO + MENU SYNCHRONISÉS
   ========================================================== */
@media screen and (min-width: 901px) {

  .led-info-bar,
  #header {
    will-change: transform;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.desktop-header-hidden .led-info-bar {
    transform: translate3d(0, -110%, 0);
  }

  body.desktop-header-hidden #header {
    transform: translate3d(
      0,
      calc(-110% - var(--info-bar-height)),
      0
    );
  }

  body.popup-open .led-info-bar,
  body.popup-open #header,
  body.menu-open .led-info-bar,
  body.menu-open #header {
    transform: translate3d(0, 0, 0);
  }
}


/* ==========================================================
   SERVICES MOBILE — 2 CARTES AVANT "VOIR TOUS NOS SERVICES"
   Bureau : comportement actuel conservé (4 cartes)
   ========================================================== */
@media screen and (max-width: 780px) {

  /*
   * Les 4 premières cartes sont directement dans .services-grid.
   * Sur mobile, on masque seulement les cartes 3 et 4 au départ.
   */
  .services-grid:not(.is-open) > .service-item:nth-of-type(3),
  .services-grid:not(.is-open) > .service-item:nth-of-type(4) {
    display: none;
  }

  /*
   * Au clic sur "Voir tous nos services",
   * les cartes 3 et 4 reviennent avec les autres services cachés.
   */
  .services-grid.is-open > .service-item:nth-of-type(3),
  .services-grid.is-open > .service-item:nth-of-type(4) {
    display: block;
  }

  /*
   * Le bouton est maintenant visuellement juste après les 2 cartes.
   */
  .services-button {
    margin-top: 14px;
  }
}

/* ==========================================================
   SERVICES MOBILE — "VOIR MOINS" FIXE EN BAS
   ========================================================== */
@media screen and (max-width: 780px) {
  .services-button.services-button-fixed {
    position: fixed;
    left: 50%;
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 1200;
    width: auto;
    margin: 0;
    transform: translateX(-50%);
  }

  .services-button.services-button-fixed #toggleServices {
    white-space: nowrap;
  }
}

/* ==========================================================
   SERVICES MOBILE — REPÈRE DE POSITION DU BOUTON
   ========================================================== */
@media screen and (max-width: 780px) {
  .services-button-anchor {
    grid-column: 1 / -1;
    width: 100%;
    height: 0;
    pointer-events: none;
  }
}

/* ==========================================================
   SERVICES BUREAU — "VOIR MOINS" FIXE + FERMETURE AUTO
   ========================================================== */
@media screen and (min-width: 781px) {
  .services-button.services-button-fixed {
    position: fixed;
    left: 50%;
    bottom: 42px;
    z-index: 1200;
    width: auto;
    margin: 0;
    transform: translateX(-50%);
  }

  .services-button.services-button-fixed #toggleServices {
    white-space: nowrap;
  }

  .services-button-anchor {
    grid-column: 1 / -1;
    width: 100%;
    height: 0;
    pointer-events: none;
  }
}


/* ==========================================================
   SERVICES MOBILE — SLIDER HORIZONTAL TYPE DÉCATHLON
   ========================================================== */
@media screen and (max-width: 780px) {

  /*
   * Sur mobile toutes les cartes sont disponibles directement.
   * On supprime donc le bouton Voir tous / Voir moins.
   */
  .services-button.services-button-mobile-hidden {
    display: none;
  }

  /*
   * Le conteneur devient un rail horizontal natif.
   * Le swipe est géré directement par le navigateur : très fluide.
   */
  .services-grid.services-mobile-slider {
    display: flex;
    align-items: stretch;
    gap: 16px;

    width: 100%;
    max-width: none;

    overflow-x: auto;
    overflow-y: hidden;

    padding:
      4px
      max(22px, calc((100vw - 100%) / 2))
      22px;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 22px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  .services-grid.services-mobile-slider::-webkit-scrollbar {
    display: none;
  }

  /*
   * Une grande carte + un aperçu de la suivante,
   * comme sur la capture Décathlon.
   */
  .services-grid.services-mobile-slider > .service-item,
  .services-grid.services-mobile-slider > .services-hidden > .service-item {
    flex: 0 0 calc(88vw - 44px);
    width: calc(88vw - 44px);
    min-width: calc(88vw - 44px);
    max-width: calc(88vw - 44px);

    scroll-snap-align: start;
    scroll-snap-stop: always;

    opacity: 1;
    transform: none;
  }

  /*
   * Le wrapper des anciens services cachés ne doit plus créer
   * une seconde ligne : display: contents injecte ses cartes
   * directement dans le rail.
   */
  .services-grid.services-mobile-slider > .services-hidden {
    display: contents;
    max-height: none;
    overflow: visible;
    opacity: 1;
  }

  /*
   * On neutralise les règles historiques qui masquaient les cartes
   * 3 et 4 sur mobile.
   */
  .services-grid.services-mobile-slider > .service-item:nth-of-type(3),
  .services-grid.services-mobile-slider > .service-item:nth-of-type(4) {
    display: block;
  }
}


/* ==========================================================
   SERVICES — SLIDER HORIZONTAL MOBILE + BUREAU
   ========================================================== */

.services-button.services-button-slider-hidden {
  display: none;
}

/*
 * BUREAU :
 * 4 cartes visibles environ + aperçu de la suivante.
 */
@media screen and (min-width: 781px) {

  .services-grid.services-responsive-slider {
    display: flex;
    align-items: stretch;
    gap: 24px;

    width: 100%;
    max-width: none;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 6px 48px 28px 0px;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    overscroll-behavior-x: contain;

    scrollbar-width: none;
    cursor: grab;
  }

  .services-grid.services-responsive-slider::-webkit-scrollbar {
    display: none;
  }

  .services-grid.services-responsive-slider:active {
    cursor: grabbing;
  }

  .services-grid.services-responsive-slider > .services-hidden {
    display: contents;
    max-height: none;
    overflow: visible;
    opacity: 1;
  }

  .services-grid.services-responsive-slider > .service-item,
  .services-grid.services-responsive-slider > .services-hidden > .service-item {
    flex: 0 0 calc((100vw - 210px) / 4.35);
    width: calc((100vw - 210px) / 4.35);
    min-width: calc((100vw - 210px) / 4.35);
    max-width: calc((100vw - 210px) / 4.35);

    scroll-snap-align: start;
    scroll-snap-stop: always;

    opacity: 1;
    transform: none;
  }
}

/*
 * MOBILE :
 * on réutilise le comportement testé, mais sous la nouvelle classe commune.
 */
@media screen and (max-width: 780px) {

  .services-grid.services-responsive-slider {
    display: flex;
    align-items: stretch;
    gap: 16px;

    width: 100%;
    max-width: none;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 4px 22px 22px 0;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  .services-grid.services-responsive-slider::-webkit-scrollbar {
    display: none;
  }

  .services-grid.services-responsive-slider > .services-hidden {
    display: contents;
    max-height: none;
    overflow: visible;
    opacity: 1;
  }

  .services-grid.services-responsive-slider > .service-item,
  .services-grid.services-responsive-slider > .services-hidden > .service-item {
    flex: 0 0 calc(88vw - 44px);
    width: calc(88vw - 44px);
    min-width: calc(88vw - 44px);
    max-width: calc(88vw - 44px);

    scroll-snap-align: start;
    scroll-snap-stop: always;

    opacity: 1;
    transform: none;
  }

  .services-grid.services-responsive-slider > .service-item:nth-of-type(3),
  .services-grid.services-responsive-slider > .service-item:nth-of-type(4) {
    display: block;
  }
}


/* ==========================================================
   SERVICES DESKTOP — DRAG SOURIS
   ========================================================== */
@media screen and (min-width: 781px) {
  .services-grid.services-responsive-slider {
    cursor: grab;
    user-select: none;
  }

  .services-grid.services-responsive-slider.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }
}


/* ==========================================================
   SERVICES SLIDER — FLUIDITÉ + INDICATEURS
   ========================================================== */

.services-grid.services-responsive-slider {
  scroll-behavior: auto;
  touch-action: auto;
}

.services-grid.services-responsive-slider.is-dragging {
  scroll-snap-type: none;
}

/*
 * Barre continue identique au slider Promotions :
 * le curseur suit réellement le défilement.
 */
.services-slider-dots {
  --service-progress: 0;
  --service-thumb-width: 25%;
  --service-pages: 1;

  position: relative;

  display: block;
  width: calc(100% - 96px);
  height: 5px;

  margin: 18px auto 0;
  padding: 0;

  border-radius: 999px;
  background: #d5dddf;

  overflow: hidden;
  cursor: pointer;

  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.services-slider-dots::after {
  content: "";

  position: absolute;
  top: 0;

  left:
    calc(
      var(--service-progress) *
      (100% - var(--service-thumb-width))
    );

  width: var(--service-thumb-width);
  height: 100%;

  border-radius: inherit;
  background: #0f2f33;

  transition:
    left .18s cubic-bezier(.22, 1, .36, 1);

  pointer-events: none;
}

.services-slider-dots.is-dragging::after {
  transition: none;
}

/*
 * Les boutons restent présents comme zones cliquables,
 * mais ils sont invisibles.
 */
.services-slider-dot {
  position: absolute;
  top: 0;
  bottom: 0;

  appearance: none;

  width: calc(100% / var(--service-pages));
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  opacity: 0;

  cursor: pointer;
  transform: none;
}

.services-slider-dot.active,
.services-slider-dot:hover {
  width: calc(100% / var(--service-pages));
  background: transparent;
  transform: none;
}

.services-slider-dot:nth-child(1)  { left: calc(0 * 100% / var(--service-pages)); }
.services-slider-dot:nth-child(2)  { left: calc(1 * 100% / var(--service-pages)); }
.services-slider-dot:nth-child(3)  { left: calc(2 * 100% / var(--service-pages)); }
.services-slider-dot:nth-child(4)  { left: calc(3 * 100% / var(--service-pages)); }
.services-slider-dot:nth-child(5)  { left: calc(4 * 100% / var(--service-pages)); }
.services-slider-dot:nth-child(6)  { left: calc(5 * 100% / var(--service-pages)); }
.services-slider-dot:nth-child(7)  { left: calc(6 * 100% / var(--service-pages)); }
.services-slider-dot:nth-child(8)  { left: calc(7 * 100% / var(--service-pages)); }
.services-slider-dot:nth-child(9)  { left: calc(8 * 100% / var(--service-pages)); }
.services-slider-dot:nth-child(10) { left: calc(9 * 100% / var(--service-pages)); }
.services-slider-dot:nth-child(11) { left: calc(10 * 100% / var(--service-pages)); }
.services-slider-dot:nth-child(12) { left: calc(11 * 100% / var(--service-pages)); }

@media screen and (max-width: 780px) {
  .services-slider-dots {
    width: calc(100% - 44px);
    height: 4px;
    margin-top: 14px;
  }
}


/* ==========================================================
   SERVICES SLIDER — CORRECTION FLUIDITÉ
   ========================================================== */

@media screen and (min-width: 781px) {
  .services-grid.services-responsive-slider {
    scroll-behavior: smooth;
  }

  .services-grid.services-responsive-slider.is-dragging {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}

@media screen and (max-width: 780px) {
  .services-grid.services-responsive-slider {
    /*
     * IMPORTANT :
     * aucun touch-action restrictif.
     * Le swipe horizontal est 100 % natif.
     */
    touch-action: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }
}


/* ============================= */
/* ALIGNEMENTS COMMUNS DES CARTES */
/* ============================= */

/* Toutes les cartes utilisent exactement la même grille verticale */
.promo-card-ciphar .promo-ciphar-content {
  align-items: stretch;
}

/* Zone texte identique, même si les noms ont des longueurs différentes */
.promo-card-ciphar .promo-ciphar-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  min-height: 150px;
}

.promo-card-ciphar .promo-ciphar-copy h3 {
  min-height: 1.1em;
}

.promo-card-ciphar .promo-ciphar-copy h4 {
  display: flex;
  align-items: flex-start;

  min-height: 2.1em;
}

/* Trait et format toujours au même niveau */
.promo-card-ciphar .promo-copy-line {
  flex-shrink: 0;
}

.promo-card-ciphar .promo-ciphar-format {
  min-height: 1.35em;
}

/* Encarts remise : même hauteur et contenu parfaitement centré */
.promo-card-ciphar .promo-ciphar-offer {
  align-self: stretch;
  justify-self: stretch;

  height: 100%;
  min-height: 88px;
}

.promo-card-ciphar .promo-offer-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  min-width: 0;
  height: 100%;

  text-align: left;
}

.promo-card-ciphar .promo-offer-copy > span {
  width: 100%;
  margin: 0 0 5px;

  line-height: 1.1;
}

.promo-card-ciphar .promo-offer-copy strong {
  width: 100%;

  line-height: .95;
}

/* Boutons : même hauteur et contenu centré sur toutes les cartes */
.promo-card-ciphar .promo-ciphar-btn {
  position: relative;

  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;

  height: 52px;
  min-height: 52px;
  padding: 0 22px;
}

.promo-card-ciphar .promo-ciphar-btn > span {
  grid-column: 1 / -1;
  grid-row: 1;

  justify-self: center;

  line-height: 1;
}

.promo-card-ciphar .promo-ciphar-btn .bx-right-arrow-alt {
  grid-column: 2;
  grid-row: 1;

  justify-self: end;
  margin-right: 8px;
}

.promo-card-ciphar .promo-ciphar-btn .bx-map {
  grid-column: 3;
  grid-row: 1;

  justify-self: end;
}

/* Produit horizontal : mêmes repères visuels que les produits verticaux */
.promo-layout-horizontal .promo-ciphar-copy {
  min-height: 132px;
}

.promo-layout-horizontal .promo-ciphar-offer {
  align-self: stretch;
}

/* Tablette */
@media screen and (max-width: 1200px) and (min-width: 751px) {

  .promo-card-ciphar .promo-ciphar-copy {
    min-height: 135px;
  }

  .promo-card-ciphar .promo-ciphar-offer {
    min-height: 82px;
  }

  .promo-card-ciphar .promo-ciphar-btn {
    height: 50px;
    min-height: 50px;
  }
}

/* Mobile */
@media screen and (max-width: 750px) {

  .promo-card-ciphar .promo-ciphar-copy {
    min-height: 118px;
  }

  .promo-card-ciphar .promo-ciphar-copy h4 {
    min-height: 2em;
  }

  .promo-card-ciphar .promo-ciphar-offer {
    min-height: 76px;
  }

  .promo-card-ciphar .promo-ciphar-btn {
    height: 50px;
    min-height: 50px;
    padding-inline: 17px;
  }

  .promo-layout-horizontal .promo-ciphar-copy {
    min-height: 108px;
  }
}

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

  .promo-card-ciphar .promo-ciphar-copy {
    min-height: 108px;
  }

  .promo-card-ciphar .promo-ciphar-offer {
    min-height: 72px;
  }

  .promo-card-ciphar .promo-ciphar-btn {
    height: 48px;
    min-height: 48px;
    padding-inline: 14px;
  }
}


/* ===================================================== */
/* CARTES PROMO — FORMAT PAYSAGE, PLUS LARGE QUE HAUT     */
/* ===================================================== */

.promo-card-ciphar {
  min-height: 430px;
}

.promo-ciphar-content {
  grid-template-columns: 45% 55%;
  grid-template-rows: 82px 1fr 92px 56px;

  min-height: 394px;
  padding: 18px 18px 14px;
}

/* Badge plus compact */
.promo-ciphar-badge {
  top: 16px;
  left: 16px;

  min-width: 92px;
  min-height: 50px;
  padding: 7px 15px;

  border-radius: 18px;

  font-size: 1.55rem;
}

/* Produit : grande zone à droite, compatible avec tous les formats */
.promo-product-zone {
  grid-column: 2;
  grid-row: 1 / 4;

  align-items: center;
  justify-content: center;

  padding: 28px 8px 12px;
  overflow: visible;
}

.promo-product-image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 310px;

  object-fit: contain;
  object-position: center;

  transform: none;
}

/* Les PNG verticaux gardent un léger zoom,
   sans dépasser ni être coupés */
.promo-layout-vertical .promo-product-image-vertical,
.promo-layout-vertical:first-child .promo-product-image-vertical {
  width: auto;
  max-width: 115%;
  height: auto;
  max-height: 335px;

  transform: scale(1.08);
  transform-origin: center;
}

/* Texte */
.promo-ciphar-copy {
  grid-column: 1;
  grid-row: 2;

  align-self: center;
  justify-content: center;

  min-height: 0;
  padding: 10px 12px 4px 2px;
}

.promo-ciphar-copy h3 {
  min-height: 0;
  margin-bottom: 6px;

  font-size: 1.28rem;
}

.promo-ciphar-copy h4 {
  min-height: 0;

  font-size: 1.35rem;
}

.promo-copy-line {
  width: 34px;
  height: 3px;
  margin: 10px 0 9px;
}

.promo-ciphar-format {
  min-height: 0;

  font-size: .86rem;
}

/* Remise */
.promo-ciphar-offer {
  grid-column: 1;
  grid-row: 3;

  width: 96%;
  height: auto;
  min-height: 82px;

  gap: 10px;
  padding: 10px 11px;

  border-radius: 20px;
}

.promo-offer-icon {
  flex: 0 0 44px;

  width: 44px;
  height: 44px;
}

.promo-offer-icon i {
  font-size: 1.3rem;
}

.promo-offer-copy > span {
  font-size: .73rem;
}

.promo-offer-copy strong {
  font-size: 2rem;
}

/* Bouton */
.promo-ciphar-btn {
  grid-column: 1 / -1;
  grid-row: 4;

  width: 100%;
  height: 50px;
  min-height: 50px;

  padding: 0 18px;

  font-size: .95rem;
}

/* ===================================================== */
/* PRODUITS HORIZONTAUX                                  */
/* ===================================================== */

.promo-layout-horizontal .promo-ciphar-content {
  grid-template-columns: 45% 55%;
  grid-template-rows: 82px 1fr 92px 56px;

  min-height: 414px;
}

.promo-layout-horizontal .promo-product-zone {
  grid-column: 2;
  grid-row: 1 / 4;

  padding: 30px 8px 12px;
}

.promo-layout-horizontal .promo-product-image {
  width: 100%;
  max-width: 430px;
  max-height: 240px;
}

.promo-layout-horizontal .promo-ciphar-copy {
  grid-column: 1;
  grid-row: 2;

  align-self: center;
  min-height: 0;
  padding: 10px 12px 4px 2px;
}

.promo-layout-horizontal .promo-ciphar-offer {
  grid-column: 1;
  grid-row: 3;

  width: 96%;
  min-width: 0;
  min-height: 82px;
}

.promo-layout-horizontal .promo-ciphar-btn {
  grid-row: 4;
}

/* ===================================================== */
/* TABLETTE                                              */
/* ===================================================== */

@media screen and (max-width: 1200px) and (min-width: 751px) {

  .promo-card-ciphar {
    min-height: 420px;
  }

  .promo-ciphar-content,
  .promo-layout-horizontal .promo-ciphar-content {
    grid-template-columns: 46% 54%;
    grid-template-rows: 78px 1fr 88px 54px;

    min-height: 404px;
    padding: 16px 16px 13px;
  }

  .promo-product-image {
    max-height: 295px;
  }

  .promo-layout-vertical .promo-product-image-vertical,
  .promo-layout-vertical:first-child .promo-product-image-vertical {
    max-height: 315px;
  }

  .promo-layout-horizontal .promo-product-image {
    max-height: 225px;
  }
}

/* ===================================================== */
/* MOBILE : RESTE LARGE MAIS LISIBLE                     */
/* ===================================================== */

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

  .promo-card-ciphar {
    min-height: 390px;
  }

  .promo-ciphar-content,
  .promo-layout-horizontal .promo-ciphar-content {
    grid-template-columns: 48% 52%;
    grid-template-rows: 70px 1fr 78px 50px;

    min-height: 378px;
    padding: 13px 12px 11px;
  }

  .promo-ciphar-badge {
    top: 12px;
    left: 12px;

    min-width: 82px;
    min-height: 44px;

    padding: 6px 12px;

    border-radius: 16px;

    font-size: 1.25rem;
  }

  .promo-product-zone,
  .promo-layout-horizontal .promo-product-zone {
    padding: 24px 4px 10px;
  }

  .promo-product-image {
    max-height: 260px;
  }

  .promo-layout-vertical .promo-product-image-vertical,
  .promo-layout-vertical:first-child .promo-product-image-vertical {
    max-width: 118%;
    max-height: 280px;

    transform: scale(1.06);
  }

  .promo-layout-horizontal .promo-product-image {
    width: 100%;
    max-height: 190px;
  }

  .promo-ciphar-copy,
  .promo-layout-horizontal .promo-ciphar-copy {
    min-height: 0;
    padding: 8px 8px 2px 1px;
  }

  .promo-ciphar-copy h3 {
    font-size: 1.05rem;
  }

  .promo-ciphar-copy h4 {
    font-size: 1.1rem;
  }

  .promo-ciphar-format {
    font-size: .76rem;
  }

  .promo-ciphar-offer,
  .promo-layout-horizontal .promo-ciphar-offer {
    min-height: 70px;
    padding: 8px 9px;
  }

  .promo-offer-icon {
    flex-basis: 38px;

    width: 38px;
    height: 38px;
  }

  .promo-offer-copy > span {
    font-size: .64rem;
  }

  .promo-offer-copy strong {
    font-size: 1.65rem;
  }

  .promo-ciphar-btn {
    height: 46px;
    min-height: 46px;

    font-size: .88rem;
  }
}

/* Petit mobile */
@media screen and (max-width: 390px) {

  .promo-card-ciphar {
    min-height: 370px;
  }

  .promo-ciphar-content,
  .promo-layout-horizontal .promo-ciphar-content {
    grid-template-columns: 49% 51%;
    grid-template-rows: 66px 1fr 72px 48px;

    min-height: 358px;
    padding: 11px 10px 10px;
  }

  .promo-product-image {
    max-height: 240px;
  }

  .promo-layout-vertical .promo-product-image-vertical,
  .promo-layout-vertical:first-child .promo-product-image-vertical {
    max-height: 255px;
  }

  .promo-layout-horizontal .promo-product-image {
    max-height: 175px;
  }

  .promo-ciphar-copy h3 {
    font-size: .98rem;
  }

  .promo-ciphar-copy h4 {
    font-size: 1rem;
  }

  .promo-offer-copy strong {
    font-size: 1.5rem;
  }
}


/* ===================================================== */
/* PROMOS V2 — GRILLE STRICTE ET ALIGNEMENTS IDENTIQUES  */
/* ===================================================== */

.promo-v2-card {
  position: relative;
  display: grid;

  /* Badge | zone principale | remise | bouton */
  grid-template-rows: 68px 215px 86px 50px;
  row-gap: 12px;

  min-height: 455px;
  padding: 16px;

  overflow: hidden;

  border: 7px solid rgba(255,255,255,.96);
  border-radius: 34px;

  background:
    linear-gradient(
      128deg,
      #ffffff 0%,
      #ffffff 57%,
      #e8f8f4 57.2%,
      #d8f1eb 100%
    );

  box-shadow: 0 8px 20px rgba(4,31,45,.06);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.promo-v2-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(4,31,45,.10);
}

/* Badge */

.promo-v2-badge {
  grid-row: 1;
  align-self: start;
  justify-self: start;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 98px;
  height: 54px;
  padding: 0 16px;

  border-radius: 18px;

  background: linear-gradient(135deg,#178e73,#62beaf);
  box-shadow: 0 12px 28px rgba(21,154,131,.20);

  font-family: "Roboto",sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

/* Zone principale : texte à gauche, produit à droite */

.promo-v2-main {
  grid-row: 2;

  display: grid;
  grid-template-columns: 45% 55%;
  align-items: stretch;

  min-width: 0;
  min-height: 0;
}

/* Texte : mêmes hauteurs sur toutes les cartes */

.promo-v2-copy {
  display: grid;
  grid-template-rows: 28px 72px 16px 26px;
  align-content: center;

  min-width: 0;
  padding: 0 10px 0 2px;

  text-align: left;
}

.promo-v2-copy h3,
.promo-v2-copy h4,
.promo-v2-copy p {
  margin: 0;
  font-family: "Roboto",sans-serif;
}

.promo-v2-copy h3 {
  align-self: end;

  font-size: 1.25rem;
  font-weight: 850;
  line-height: 1;

  color: #082633;
}

.promo-v2-copy h4 {
  align-self: center;

  display: flex;
  align-items: center;

  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.04;

  color: #168c70;
}

.promo-v2-line {
  align-self: center;

  display: block;
  width: 34px;
  height: 3px;

  border-radius: 999px;
  background: #159a83;
}

.promo-v2-copy p {
  align-self: start;

  font-size: .86rem;
  font-weight: 650;
  line-height: 1.2;

  color: #59676d;
}

/* Zone image : même emplacement, seule la taille varie */

.promo-v2-image {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 0;
  padding: 6px;

  overflow: hidden;
}

.promo-v2-image img {
  display: block;

  width: auto;
  max-width: 100%;
  height: auto;

  object-fit: contain;
  object-position: center;

  filter: drop-shadow(0 14px 15px rgba(4,31,45,.13));
}

.promo-v2-vertical .promo-v2-image img {
  max-height: 245px;
}

.promo-v2-horizontal .promo-v2-image img {
  width: 100%;
  max-width: 390px;
  max-height: 175px;
}

/* Remise : même ligne et même hauteur */

.promo-v2-offer {
  grid-row: 3;
  align-self: stretch;
  justify-self: start;

  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: center;
  gap: 11px;

  width: 40%;
  min-width: 185px;
  height: 92px;
  padding: 10px 12px;

  border: 1px solid rgba(255,255,255,.98);
  border-radius: 21px;

  background: rgba(255,255,255,.94);
  box-shadow: 0 13px 30px rgba(4,31,45,.09);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.promo-v2-offer-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  border-radius: 50%;
  background: linear-gradient(135deg,#178e73,#20b191);
}

.promo-v2-offer-icon i {
  font-size: 1.4rem;
  color: #fff;
}

.promo-v2-offer > div {
  display: grid;
  grid-template-rows: 28px 42px;
  align-items: center;

  min-width: 0;
  height: 70px;

  text-align: left;
}

.promo-v2-offer span {
  font-family: "Roboto",sans-serif;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.05;

  color: #596267;
}

.promo-v2-offer strong {
  font-family: "Roboto",sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;

  color: #168c70;
  white-space: nowrap;
}

/* Bouton : même position pour absolument toutes les cartes */

.promo-v2-btn {
  grid-row: 4;
  align-self: stretch;

  position: relative;

  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;

  width: 100%;
  height: 52px;
  padding: 0 18px;

  border-radius: 999px;

  background: linear-gradient(135deg,#087361,#20b191);
  box-shadow: 0 12px 26px rgba(9,112,91,.20);

  font-family: "Roboto",sans-serif;
  font-size: .95rem;
  font-weight: 850;
  color: #fff;
  text-decoration: none;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    filter .3s ease;
}

.promo-v2-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(9,112,91,.27);
  filter: brightness(1.04);
}

.promo-v2-btn > span {
  grid-column: 1 / -1;
  grid-row: 1;

  justify-self: center;

  line-height: 1;
}

.promo-v2-btn .bx-right-arrow-alt {
  grid-column: 2;
  grid-row: 1;

  margin-right: 8px;
}

.promo-v2-btn .bx-map {
  grid-column: 3;
  grid-row: 1;
}

.promo-v2-btn i {
  font-size: 1.35rem;
  color: #fff;
}

/* Tablette */

@media screen and (max-width:1200px) and (min-width:751px) {

  .promo-v2-card {
    grid-template-rows: 64px 208px 84px 48px;

    min-height: 444px;
    padding: 15px;
  }

  .promo-v2-copy {
    grid-template-rows: 26px 68px 15px 24px;
  }

  .promo-v2-copy h3 {
    font-size: 1.17rem;
  }

  .promo-v2-copy h4 {
    font-size: 1.25rem;
  }

  .promo-v2-vertical .promo-v2-image img {
    max-height: 205px;
  }

  .promo-v2-horizontal .promo-v2-image img {
    max-height: 160px;
  }

  .promo-v2-offer {
    height: 88px;
  }

  .promo-v2-btn {
    height: 50px;
  }
}

/* Mobile */

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

  .promo-v2-card {
    grid-template-rows: 56px 188px 74px 46px;
    row-gap: 9px;

    min-height: 430px;
    padding: 12px;

    border-width: 6px;
    border-radius: 28px;

    background:
      linear-gradient(
        126deg,
        #ffffff 0%,
        #ffffff 55%,
        #e8f8f4 55.2%,
        #d8f1eb 100%
      );
  }

  .promo-v2-badge {
    min-width: 80px;
    height: 44px;
    padding-inline: 12px;

    border-radius: 15px;

    font-size: 1.2rem;
  }

  .promo-v2-main {
    grid-template-columns: 48% 52%;
  }

  .promo-v2-copy {
    grid-template-rows: 24px 60px 14px 22px;
    padding-right: 7px;
  }

  .promo-v2-copy h3 {
    font-size: 1rem;
  }

  .promo-v2-copy h4 {
    font-size: 1.08rem;
  }

  .promo-v2-copy p {
    font-size: .74rem;
  }

  .promo-v2-vertical .promo-v2-image img {
    max-height: 202px;
  }

  .promo-v2-horizontal .promo-v2-image img {
    max-height: 130px;
  }

  .promo-v2-offer {
    grid-template-columns: 40px minmax(0,1fr);

    width: 48%;
    min-width: 170px;
    height: 78px;
    padding: 8px 9px;
  }

  .promo-v2-offer-icon {
    width: 40px;
    height: 40px;
  }

  .promo-v2-offer-icon i {
    font-size: 1.2rem;
  }

  .promo-v2-offer > div {
    grid-template-rows: 24px 34px;
    height: 60px;
  }

  .promo-v2-offer span {
    font-size: .64rem;
  }

  .promo-v2-offer strong {
    font-size: 1.65rem;
  }

  .promo-v2-btn {
    height: 48px;
    padding-inline: 14px;

    font-size: .86rem;
  }

  .promo-v2-btn i {
    font-size: 1.2rem;
  }
}

/* Petit mobile */

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

  .promo-v2-card {
    grid-template-rows: 52px 176px 70px 44px;

    min-height: 414px;
    padding: 10px;
  }

  .promo-v2-main {
    grid-template-columns: 49% 51%;
  }

  .promo-v2-copy {
    grid-template-rows: 22px 56px 13px 20px;
  }

  .promo-v2-copy h3 {
    font-size: .94rem;
  }

  .promo-v2-copy h4 {
    font-size: 1rem;
  }

  .promo-v2-vertical .promo-v2-image img {
    max-height: 190px;
  }

  .promo-v2-horizontal .promo-v2-image img {
    max-height: 122px;
  }

  .promo-v2-offer {
    min-width: 158px;
    height: 74px;
  }

  .promo-v2-offer strong {
    font-size: 1.5rem;
  }

  .promo-v2-btn {
    height: 46px;
  }
}


/* Ajustement final : produit légèrement décalé vers la zone colorée */
.promo-v2-vertical .promo-v2-image {
  justify-content: flex-end;
  padding-right: 14px;
}

.promo-v2-horizontal .promo-v2-image {
  justify-content: flex-end;
  padding-right: 8px;
}

@media screen and (max-width: 750px) {
  .promo-v2-vertical .promo-v2-image {
    padding-right: 8px;
  }

  .promo-v2-horizontal .promo-v2-image {
    padding-right: 4px;
  }
}




/* ===================================================== */
/* CORRECTION RESPONSIVE MOBILE — CARTES PROMO V2        */
/* ===================================================== */

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

  /* La carte ne dépasse jamais de son emplacement dans le slider */
  .promo-v2-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    grid-template-rows: 54px minmax(170px, auto) 72px 46px;
    min-height: 0;

    padding: 11px;
    row-gap: 8px;
  }

  /* Les deux colonnes peuvent réellement se compresser */
  .promo-v2-main {
    width: 100%;
    min-width: 0;

    grid-template-columns:
      minmax(0, 46%)
      minmax(0, 54%);

    overflow: hidden;
  }

  .promo-v2-copy,
  .promo-v2-image {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .promo-v2-copy {
    grid-template-rows: 22px 56px 13px 21px;

    padding: 0 5px 0 1px;
    overflow-wrap: anywhere;
  }

  .promo-v2-copy h3 {
    font-size: clamp(.86rem, 3.8vw, 1rem);
  }

  .promo-v2-copy h4 {
    font-size: clamp(.92rem, 4vw, 1.08rem);
  }

  .promo-v2-copy p {
    font-size: clamp(.66rem, 3vw, .74rem);
  }

  /* Zone produit entièrement fluide */
  .promo-v2-image,
  .promo-v2-vertical .promo-v2-image,
  .promo-v2-horizontal .promo-v2-image {
    justify-content: center;

    padding: 4px;
    overflow: hidden;
  }

  .promo-v2-image img,
  .promo-v2-vertical .promo-v2-image img,
  .promo-v2-horizontal .promo-v2-image img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center;
  }

  /* Le produit vertical reste plus haut sans sortir du bloc */
  .promo-v2-vertical .promo-v2-image img {
    width: auto;
    max-width: 100%;
    height: 100%;
  }

  /* Le produit horizontal utilise toute la largeur disponible */
  .promo-v2-horizontal .promo-v2-image img {
    width: 100%;
    height: auto;
  }

  /* Suppression de la largeur minimale qui provoquait le débordement */
  .promo-v2-offer {
    width: min(48%, 180px);
    min-width: 0;
    max-width: 100%;

    grid-template-columns:
      clamp(34px, 10vw, 40px)
      minmax(0, 1fr);

    gap: 7px;
    height: 72px;
    padding: 7px 8px;
  }

  .promo-v2-offer-icon {
    width: clamp(34px, 10vw, 40px);
    height: clamp(34px, 10vw, 40px);
  }

  .promo-v2-offer > div {
    min-width: 0;
    height: auto;
    grid-template-rows: auto auto;
  }

  .promo-v2-offer span {
    font-size: clamp(.56rem, 2.6vw, .64rem);
  }

  .promo-v2-offer strong {
    font-size: clamp(1.35rem, 6vw, 1.65rem);
  }

  .promo-v2-btn {
    width: 100%;
    min-width: 0;

    height: 46px;
    padding-inline: 12px;
  }
}

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

  .promo-v2-card {
    grid-template-rows: 50px minmax(160px, auto) 68px 44px;
    padding: 9px;
  }

  .promo-v2-main {
    grid-template-columns:
      minmax(0, 47%)
      minmax(0, 53%);
  }

  .promo-v2-copy {
    grid-template-rows: 21px 52px 12px 19px;
  }

  .promo-v2-offer {
    width: 49%;
    height: 68px;
    padding: 6px 7px;
  }

  .promo-v2-btn {
    height: 44px;
  }
}



/* ===================================================== */
/* CORRECTION FINALE — SLIDER PROMOS RESPONSIVE          */
/* ===================================================== */

/* Bureau : 3 cartes visibles */
.promos-track > .promo-card {
  flex: 0 0 calc((100% - 56px) / 3);
  width: calc((100% - 56px) / 3);
  min-width: calc((100% - 56px) / 3);
  max-width: calc((100% - 56px) / 3);
}

/* Tablette : 2 cartes visibles */
@media screen and (max-width: 1100px) and (min-width: 751px) {

  .promos-track {
    gap: 22px;
    padding-right: 30px;
  }

  .promos-track > .promo-card {
    flex: 0 0 calc((100% - 22px) / 2);
    width: calc((100% - 22px) / 2);
    min-width: calc((100% - 22px) / 2);
    max-width: calc((100% - 22px) / 2);
  }
}

/* Mobile : une grande carte + aperçu de la suivante */
@media screen and (max-width: 750px) {

  .promos-slider {
    width: 100%;
    overflow: hidden;
  }

  .promos-track {
    width: 100%;

    gap: 14px;
    padding: 10px 42px 8px 12px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-padding-left: 12px;
    scroll-snap-type: x mandatory;

    touch-action: pan-x pan-y;
  }

  .promos-track > .promo-card {
    /*
     * 86 % permet d'afficher une carte lisible
     * tout en laissant apparaître la suivante.
     */
    flex: 0 0 86%;
    width: 86%;
    min-width: 86%;
    max-width: 86%;

    scroll-snap-align: start;
  }

  /* La carte reprend une largeur normale */
  .promo-v2-card {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  /*
   * On ne compresse plus la composition intérieure :
   * le texte conserve une largeur lisible et le produit
   * dispose d'une vraie zone à droite.
   */
  .promo-v2-main {
    grid-template-columns: minmax(0, 47%) minmax(0, 53%);
  }

  .promo-v2-copy {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .promo-v2-copy h3,
  .promo-v2-copy h4,
  .promo-v2-copy p {
    overflow-wrap: normal;
    word-break: normal;
  }

  .promo-v2-offer {
    width: 48%;
    min-width: 0;
    max-width: 190px;
  }
}

/* Très petit mobile */
@media screen and (max-width: 390px) {

  .promos-track {
    gap: 12px;
    padding-left: 10px;
    padding-right: 34px;
    scroll-padding-left: 10px;
  }

  .promos-track > .promo-card {
    flex-basis: 88%;
    width: 88%;
    min-width: 88%;
    max-width: 88%;
  }

  .promo-v2-main {
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  }
}




/* ===================================================== */
/* INDICATEURS PROMOS — STYLE BARRE TYPE DECATHLON       */
/* ===================================================== */

.promos-dots {
  display: flex;
  align-items: center;
  justify-content: stretch;

  width: 100%;
  max-width: none;

  gap: 5px;
  margin: 26px 0 0;
  padding: 0 2px;
}

/* Chaque page occupe une part égale de la largeur */
.promos-dots button {
  position: relative;

  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 4px;
  padding: 0;

  border: 0;
  border-radius: 999px;

  background: #d5dddf;

  cursor: pointer;
  overflow: hidden;

  transition:
    background-color .3s ease,
    transform .25s ease;
}

/* Suppression de l'ancien agrandissement du point actif */
.promos-dots button.active {
  width: auto;
  background: #0f2f33;
}

/* Zone cliquable plus confortable sans épaissir la barre */
.promos-dots button::before {
  content: "";
  position: absolute;
  inset: -9px 0;
}

/* Léger retour visuel au survol */
.promos-dots button:hover {
  background: #9eabad;
}

.promos-dots button.active:hover {
  background: #0f2f33;
}

/* Mobile */
@media screen and (max-width: 750px) {

  .promos-dots {
    gap: 4px;
    margin-top: 20px;
    padding-inline: 12px;
  }

  .promos-dots button {
    height: 4px;
  }
}

/* Très petit mobile */
@media screen and (max-width: 390px) {

  .promos-dots {
    gap: 3px;
    padding-inline: 10px;
  }

  .promos-dots button {
    height: 3px;
  }
}




/* ===================================================== */
/* INDICATEUR PROMOS — BARRE CONTINUE AVEC CURSEUR       */
/* ===================================================== */

.promos-dots {
  --promo-progress: 0;
  --promo-thumb-width: 25%;

  position: relative;

  display: block;
  width: 100%;
  height: 5px;

  margin: 24px 0 0;
  padding: 0;

  border-radius: 999px;
  background: #d5dddf;

  overflow: hidden;
}

/* Curseur mobile qui glisse sur toute la largeur */
.promos-dots::after {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: var(--promo-thumb-width);
  height: 100%;

  border-radius: inherit;
  background: #0f2f33;

  transform:
    translateX(
      calc(
        var(--promo-progress) *
        (100% / var(--promo-thumb-width) - 1) *
        var(--promo-thumb-width)
      )
    );

  transition: transform .35s cubic-bezier(.22, 1, .36, 1);

  pointer-events: none;
}

/*
 * Les boutons générés par le JS restent présents :
 * ils servent de zones cliquables, mais deviennent invisibles.
 */
.promos-dots button {
  position: absolute;
  top: 0;
  bottom: 0;

  width: calc(100% / var(--promo-pages));
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  opacity: 0;
  cursor: pointer;
}

.promos-dots button.active,
.promos-dots button:hover {
  width: calc(100% / var(--promo-pages));
  background: transparent;
}

/* Positionnement automatique des zones de clic */
.promos-dots button:nth-child(1) { left: calc(0 * 100% / var(--promo-pages)); }
.promos-dots button:nth-child(2) { left: calc(1 * 100% / var(--promo-pages)); }
.promos-dots button:nth-child(3) { left: calc(2 * 100% / var(--promo-pages)); }
.promos-dots button:nth-child(4) { left: calc(3 * 100% / var(--promo-pages)); }
.promos-dots button:nth-child(5) { left: calc(4 * 100% / var(--promo-pages)); }
.promos-dots button:nth-child(6) { left: calc(5 * 100% / var(--promo-pages)); }
.promos-dots button:nth-child(7) { left: calc(6 * 100% / var(--promo-pages)); }
.promos-dots button:nth-child(8) { left: calc(7 * 100% / var(--promo-pages)); }

@media screen and (max-width: 750px) {
  .promos-dots {
    height: 4px;
    margin-top: 20px;
  }
}

@media screen and (max-width: 390px) {
  .promos-dots {
    height: 4px;
  }
}




/* ===================================================== */
/* CORRECTION BARRE PROMOS — POSITION + DRAG             */
/* ===================================================== */

.promos-dots {
  --promo-progress: 0;
  --promo-thumb-width: 25%;

  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Le curseur va réellement de 0 % jusqu'au bord droit */
.promos-dots::after {
  left:
    calc(
      var(--promo-progress) *
      (100% - var(--promo-thumb-width))
    );

  transform: none;

  transition:
    left .18s cubic-bezier(.22, 1, .36, 1);
}

/* Pendant le glissement : suivi direct de la souris, sans retard */
.promos-dots.is-dragging::after {
  transition: none;
}

.promos-dots button {
  cursor: pointer;
}

/* === Slider bars micro interactions === */
.promos-dots,
.services-slider-dots,
.assurance-dots{
  transition:height .25s ease,opacity .25s ease;
  height:4px;
}
.promos-dots:hover,
.services-slider-dots:hover,
.assurance-dots:hover{
  height:6px;
}
.promos-dots.is-dragging,
.services-slider-dots.is-dragging,
.assurance-dots.is-dragging{
  height:7px;
}
.promos-dots::after,
.services-slider-dots::after,
.assurance-dots::after{
  transition:left .18s cubic-bezier(.22,1,.36,1),width .25s ease,box-shadow .25s ease,background .25s ease;
}
.promos-dots:hover::after,
.services-slider-dots:hover::after,
.assurance-dots:hover::after{
  background:linear-gradient(90deg,#0f2f33,#164247);
}
.promos-dots.is-dragging::after,
.services-slider-dots.is-dragging::after,
.assurance-dots.is-dragging::after{
  box-shadow:0 0 10px rgba(15,47,51,.18);
  background:linear-gradient(90deg,#0f2f33,#164247);
}



/* ==========================================================
   DESIGN SYSTEM — HARMONISATION GLOBALE
   Services / Promotions / Assurances / Contact
   ========================================================== */

:root {
  --site-container-xl: 1680px;
  --site-gutter: clamp(20px, 3vw, 48px);

  --section-space-y: clamp(80px, 7vw, 120px);
  --section-heading-gap: clamp(42px, 4vw, 64px);

  --section-label-size: .86rem;
  --section-title-size: clamp(2.15rem, 4vw, 3rem);
  --section-card-title-size: 1.28rem;
  --section-card-subtitle-size: 1rem;
  --section-body-size: 1rem;

  --section-title-color: #041f2d;
  --section-label-color: #159a83;
  --section-text-color: #5f7077;

  --card-radius: 26px;
  --card-shadow: 0 10px 28px rgba(4, 31, 45, .065);
  --card-shadow-hover: 0 16px 38px rgba(4, 31, 45, .10);
  --ui-transition: .35s ease;
}

/* Conteneur large unique */
.section-shell,
.services-shell,
.promos-container,
.contact-heading,
.contact-main,
.contact-signature {
  width: min(100%, var(--site-container-xl));
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

/* Sections : même rythme vertical */
.services,
.promos,
.contact {
  padding-top: var(--section-space-y);
  padding-bottom: var(--section-space-y);
}

/* Titres : même structure visuelle */
.section-heading,
.services-heading,
.promos-heading,
.contact-heading {
  margin-bottom: var(--section-heading-gap);
  text-align: left;
}

/* Suppression des icônes décoratives de titre */
.services-heading-icon,
.promos-label > i,
.promos-title-row > i,
.contact-heading-icon {
  display: none;
}

/* Labels */
.services-heading p,
.promos-label,
.contact-heading > p:first-of-type {
  margin: 0 0 14px;
  font-family: "Roboto", sans-serif;
  font-size: var(--section-label-size);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--section-label-color);
}

/* H2 */
.services-heading h2,
.promos-title-row h2,
.about-text h2,
.contact-heading h2 {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: var(--section-title-size);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.8px;
  color: var(--section-title-color);
}

/* Promotions : titre simplifié et centré */
.promos-title-row {
  display: block;
  margin-bottom: 28px;
}

/* Largeurs parfaitement alignées */
.services-grid,
.promos-slider,
.promos-dots,
.contact-main {
  width: 100%;
  max-width: none;
}

/* Évite le cumul des anciens paddings horizontaux */
.services {
  padding-inline: 0;
}

.promos {
  padding-inline: 0;
}

.contact {
  padding-inline: 0;
}

/* Cartes : langage commun sans modifier leur identité */
.service-item,
.promo-v2-card,
.contact-card {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition:
    transform var(--ui-transition),
    box-shadow var(--ui-transition);
}

.service-item:hover,
.promo-v2-card:hover,
.contact-card:hover {
  box-shadow: var(--card-shadow-hover);
}

/* H3 cohérents */
.service-card-face h3,
.promo-v2-copy h3,
.team-card-front h3,
.team-card-back h3,
.contact-card h3 {
  font-size: var(--section-card-title-size);
  line-height: 1.25;
}

/* Paragraphes cohérents */
.service-card-face p,
.contact-card p,
.contact-message-text {
  font-size: var(--section-body-size);
}

/* Les barres suivent exactement le conteneur commun */
.services-slider-dots,
.promos-dots {
  width: 100%;
  margin-inline: 0;
}

/* Contact : suppression du padding doublé */
.contact-heading,
.contact-main,
.contact-signature {
  max-width: var(--site-container-xl);
}

.contact-main {
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Tablette */
@media screen and (max-width: 1100px) {
  :root {
    --site-gutter: 28px;
    --section-space-y: 88px;
  }
}

/* Mobile */
@media screen and (max-width: 750px) {
  :root {
    --site-gutter: 20px;
    --section-space-y: 68px;
    --section-heading-gap: 34px;
    --section-title-size: clamp(2rem, 9vw, 2.55rem);
  }

  .section-shell,
  .services-shell,
  .promos-container,
  .contact-heading,
  .contact-main,
  .contact-signature {
    padding-inline: var(--site-gutter);
  }

  .services-grid.services-responsive-slider,
  .promos-track {
    scroll-padding-left: 0;
  }

  .promos-track {
    padding-left: 0;
  }
}




/* ==========================================================
   CORRECTION ALIGNEMENT PRODUITS
   Même conteneur que Services et Assurances
   ========================================================== */

.promos-container {
  width: min(100%, var(--site-container-xl));
  max-width: var(--site-container-xl);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

/* Le slider et sa barre utilisent toute la largeur utile */
.promos-slider,
.promos-dots {
  width: 100%;
  max-width: none;
}

/* Évite un retrait différent au début du slider */
.promos-track {
  padding-left: 0;
}

/* Mobile : mêmes marges que les deux autres sections */
@media screen and (max-width: 750px) {
  .promos-container {
    padding-inline: var(--site-gutter);
  }
}

/* ==========================================================
   SERVICES SLIDER — FLUIDITÉ RENFORCÉE
   ========================================================== */

.services-grid.services-responsive-slider {
  /*
   * Le JS gère le recalage sur bureau.
   * "proximity" évite les à-coups du snap obligatoire.
   */
  scroll-behavior: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}

.services-grid.services-responsive-slider.is-dragging,
.services-grid.services-responsive-slider.is-settling {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.services-grid.services-responsive-slider.is-dragging {
  cursor: grabbing;
}

/*
 * Sur mobile, on conserve le swipe et l'inertie 100 % natifs.
 * Le snap reste obligatoire uniquement une fois le geste terminé.
 */
@media screen and (max-width: 780px) {
  .services-grid.services-responsive-slider {
    scroll-behavior: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
}

/*
 * Le curseur de progression suit immédiatement le scroll.
 * L'animation reste active uniquement hors interaction.
 */
.services-slider-dots::after {
  transition:
    left .14s cubic-bezier(.22, 1, .36, 1),
    width .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.services-slider-dots.is-dragging::after {
  transition:
    width .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}


/* ==========================================================
   SERVICES — FLUIDITÉ STRICTEMENT IDENTIQUE À ASSURANCE
   ========================================================== */

.services-grid.services-responsive-slider {
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  cursor: grab;
  user-select: none;
  -webkit-user-select: none;

  -webkit-overflow-scrolling: touch;
}

/*
 * La classe utilisée est désormais exactement
 * la même logique que .assurance-track.dragging.
 */
.services-grid.services-responsive-slider.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* Neutralisation de l'ancienne version optimisée */
.services-grid.services-responsive-slider.is-dragging,
.services-grid.services-responsive-slider.is-settling {
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

/*
 * Sur mobile, comme Assurance :
 * swipe natif avec snap obligatoire.
 */
@media screen and (max-width: 780px) {
  .services-grid.services-responsive-slider {
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    touch-action: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Barre : mêmes transitions que Assurance */
.services-slider-dots::after {
  transition:
    left .18s cubic-bezier(.22, 1, .36, 1),
    width .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.services-slider-dots.is-dragging::after {
  transition:
    width .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}


/* ==========================================================
   CORRECTION OMBRE DES CARTES SERVICES
   L'ombre est portée uniquement par la face qui se déplace
   ========================================================== */

.service-item,
.service-item:hover {
  box-shadow: none;
}

/* Ombre normale sur la véritable carte */
.service-card-front {
  box-shadow: 0 12px 40px rgba(4, 31, 45, 0.06);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* La carte et son ombre montent ensemble */
.service-item:hover .service-card-front {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(4, 31, 45, 0.12);
}



/* ==========================================================
   HARMONISATION ESPACEMENT ENTRE EN-TÊTES ET CONTENU
   Réduit l'espace sous les titres de toutes les sections
   ========================================================== */

:root{
  --section-heading-gap: clamp(28px, 3vw, 40px);
}

.section-heading,
.services-heading,
.promos-heading,
.contact-heading{
  margin-bottom: var(--section-heading-gap);
}

/* Bloc promos : rapproche aussi le texte des cartes */
.promos-intro,
.promos-info,
.promos-validity{
  margin-bottom: 20px;
}



/* ==========================================================
   CORRECTION ESPACEMENT — BLOC PRODUITS
   Rapproche réellement l'introduction des cartes
   ========================================================== */

.promos-title-row {
  margin-bottom: 16px;
}

.promos-validity {
  margin-bottom: 0;
}

/* Réduit le vide situé au-dessus des cartes */
.promos-track {
  padding-top: 8px;
}

@media screen and (max-width: 750px) {
  .promos-heading {
    margin-bottom: 16px;
  }

  .promos-title-row {
    margin-bottom: 14px;
  }

  .promos-track {
    padding-top: 6px;
  }
}


/* ==========================================================
   DESIGN SYSTEM — PHASE 1
   Structure commune des en-têtes de sections
   Services / Produits / Contact
   ========================================================== */

:root {
  --section-content-gap: clamp(32px, 2.6vw, 42px);
  --section-label-gap: 14px;
}

/* Base commune */
.section-heading,
.services-heading,
.promos-heading,
.contact-heading {
  position: relative;
  text-align: left;
}

/* Labels communs */
.services-heading > p:first-of-type,
.promos-label,
.contact-heading > p:first-of-type {
  margin: 0 0 var(--section-label-gap);
}

/* Titres communs */
.services-heading h2,
.promos-title-row h2,
.contact-heading h2 {
  margin-top: 0;
}

/* Suppression des décorations inutiles */
.services-heading-icon,
.promos-label > i,
.promos-title-row > i,
.contact-heading-icon,
.contact-heading > i,
.contact-heading > span,
.contact-heading::after {
  display: none;
}

/* Services : distance entre le titre et les cartes */
.services-heading {
  margin-bottom: var(--section-content-gap);
}

/*
 * Produits :
 * la date de validité appartient encore à l'introduction.
 * L'écart commun est donc placé après cette date,
 * et non directement après .promos-heading.
 */
.promos-heading {
  margin-bottom: 0;
}

.promos-title-row {
  margin-bottom: 16px;
}

.promos-validity {
  margin-bottom: var(--section-content-gap);
}

/* Aucun espace artificiel au-dessus des cartes Produits */
.promos-track {
  padding-top: 0;
}

/* Contact : distance entre le texte d'introduction et les cartes */
.contact-heading {
  margin-bottom: var(--section-content-gap);
}

/* Mobile */
@media screen and (max-width: 750px) {
  :root {
    --section-content-gap: 30px;
    --section-label-gap: 12px;
  }

  .promos-title-row {
    margin-bottom: 14px;
  }

  .promos-track {
    padding-top: 0;
  }
}



/* ==========================================================
   DESIGN SYSTEM — PHASE 2
   À PROPOS DE NOUS : CONTENEUR ET TITRES HARMONISÉS
   ========================================================== */

/*
 * La section conserve son fond sombre et sa vague,
 * mais n'utilise plus ses anciennes marges latérales propres.
 */
.about {
  padding-left: 0;
  padding-right: 0;
}

/* Même conteneur large que Services / Produits / Assurance / Contact */
.about-container {
  width: min(100%, var(--site-container-xl, 1680px));
  max-width: var(--site-container-xl, 1680px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, clamp(20px, 3vw, 48px));
}

/* Titres alignés à gauche */
.about-text {
  width: 100%;
  text-align: left;
}

.about-text h2 {
  margin-top: 0;
  text-align: left;
  font-size: var(--section-title-size, clamp(2.15rem, 4vw, 3rem));
  line-height: 1.08;
  letter-spacing: -.8px;
}

.about-text .subtitle,
.about-text > .subtitle {
  text-align: left;
}

/* Le contenu reste aligné sur le même axe */
.about .description,
.about .description h3 {
  text-align: left;
}

/* Tablette */
@media screen and (min-width: 701px) and (max-width: 1100px) {
  .about {
    padding-left: 0;
    padding-right: 0;
  }

  .about-container {
    width: min(100%, var(--site-container-xl, 1680px));
    max-width: var(--site-container-xl, 1680px);
    padding-inline: var(--site-gutter, 28px);
  }
}

/* Mobile : neutralise l'ancien centrage */
@media screen and (max-width: 700px) {
  .about {
    padding-left: 0;
    padding-right: 0;
  }

  .about-container {
    width: 100%;
    padding-inline: var(--site-gutter, 20px);
  }

  .about-text,
  .about-text h2,
  .about-text .subtitle,
  .about .description,
  .about .description h3 {
    text-align: left;
  }
}



/* ==========================================================
   DESIGN SYSTEM — PHASE 1.2
   CONTENEURS HARMONISÉS
   ========================================================== */

:root {
  --site-container-xl: 1680px;
  --site-gutter: clamp(20px, 3vw, 48px);
}

/* Même largeur et mêmes marges pour toutes les grandes sections */
.services-shell,
.promos-container,
.about-container,
.contact-heading,
.contact-main,
.contact-signature {
  width: min(100%, var(--site-container-xl));
  max-width: var(--site-container-xl);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

/* Neutralisation des anciennes largeurs internes */
.services-grid,
.promos-slider,
.promos-dots,
.contact-main {
  width: 100%;
  max-width: none;
}

/* Services */
.services {
  padding-inline: 0;
}

.services-grid {
  margin-inline: 0;
}

/* Produits */
.promos {
  padding-inline: 0;
}

.promos-container {
  max-width: var(--site-container-xl);
}

.promos-slider,
.promos-dots {
  margin-inline: 0;
}

/* À propos */
.about-container {
  max-width: var(--site-container-xl);
}

/* Contact */
.contact {
  padding-inline: 0;
}

.contact-heading,
.contact-main,
.contact-signature {
  max-width: var(--site-container-xl);
}

/* Tablette */
@media screen and (max-width: 1100px) {
  :root {
    --site-gutter: 28px;
  }
}

/* Mobile */
@media screen and (max-width: 750px) {
  :root {
    --site-gutter: 20px;
  }

  .services-shell,
  .promos-container,
  .about-container,
  .contact-heading,
  .contact-main,
  .contact-signature {
    padding-inline: var(--site-gutter);
  }
}



/* ==========================================================
   DESIGN SYSTEM — PHASE 1.3
   RYTHME VERTICAL HARMONISÉ
   ========================================================== */

:root {
  /* Espace global en haut et en bas des sections */
  --section-space-y: clamp(82px, 6.5vw, 112px);

  /* Label → H2 */
  --section-label-gap: 14px;

  /* En-tête complet → contenu */
  --section-content-gap: clamp(34px, 2.8vw, 44px);

  /* Espacement interne spécifique au bloc Produits */
  --promos-meta-gap: 16px;
}

/* Même respiration verticale pour les grandes sections */
.services,
.promos,
.contact {
  padding-top: var(--section-space-y);
  padding-bottom: var(--section-space-y);
}

/* Même distance entre l'en-tête et le contenu */
.services-heading,
.contact-heading {
  margin-bottom: var(--section-content-gap);
}

/* Labels */
.services-heading > p:first-of-type,
.promos-label,
.contact-heading > p:first-of-type {
  margin-bottom: var(--section-label-gap);
}

/* Titres */
.services-heading h2,
.promos-title-row h2,
.contact-heading h2 {
  margin-bottom: 0;
}

/* ==========================================================
   PRODUITS
   Le bloc validité fait partie de l'introduction
   ========================================================== */

.promos-heading {
  margin-bottom: 0;
}

.promos-title-row {
  margin-bottom: var(--promos-meta-gap);
}

.promos-validity {
  margin-top: 0;
  margin-bottom: var(--section-content-gap);
}

/* Aucun faux espace au-dessus du slider */
.promos-slider,
.promos-track {
  margin-top: 0;
}

.promos-track {
  padding-top: 0;
}

/* ==========================================================
   À PROPOS
   Même respiration que les autres sections
   ========================================================== */

.about {
  padding-top: var(--section-space-y);
  padding-bottom: var(--section-space-y);
}

.about-text h2 {
  margin-bottom: 14px;
}

.about-text .subtitle,
.about-text > .subtitle {
  margin-top: 0;
  margin-bottom: var(--section-content-gap);
}

.about .description {
  margin-top: 0;
}

/* ==========================================================
   CONTACT
   ========================================================== */

.contact-main {
  margin-top: 0;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media screen and (max-width: 1100px) {
  :root {
    --section-space-y: 84px;
    --section-content-gap: 38px;
  }
}

@media screen and (max-width: 750px) {
  :root {
    --section-space-y: 66px;
    --section-label-gap: 12px;
    --section-content-gap: 30px;
    --promos-meta-gap: 14px;
  }

  .services,
  .promos,
  .about,
  .contact {
    padding-top: var(--section-space-y);
    padding-bottom: var(--section-space-y);
  }
}



/* ==========================================================
   DESIGN SYSTEM — PHASE 1.3.1
   VAGUES HARMONISÉES
   ========================================================== */

:root {
  --wave-height: clamp(68px, 5vw, 86px);
}

/* Vague haute commune : À propos + Assurance */
.aproposdenous-decoration {
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 1;

  display: block;
  width: 100%;
  height: var(--wave-height);

  object-fit: fill;
  object-position: center top;

  pointer-events: none;
  user-select: none;
}

/* Vague basse du Hero : même présence visuelle */
.hero-decoration {
  left: 0;
  bottom: -1px;

  width: 100%;
  height: var(--wave-height);

  overflow: hidden;
}

.hero-decoration img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: fill;
  object-position: center bottom;
}

/*
 * Le contenu À propos reste suffisamment bas sous la vague,
 * sans modifier le rythme général de la section.
 */
.about {
  padding-top:
    calc(
      var(--wave-height) +
      clamp(42px, 3.5vw, 58px)
    );
}

/* Mobile */
@media screen and (max-width: 750px) {
  :root {
    --wave-height: 58px;
  }

  .about {
    padding-top:
      calc(
        var(--wave-height) +
        34px
      );
  }
}


/* ==========================================================
   PHASE 1.5 — OMBRES ET PROFONDEUR DES CARTES
   Harmonisation sans modifier la géométrie ni les animations
   ========================================================== */

:root {
  /* Presque aucune ombre au repos */
  --card-shadow:
    0 2px 8px rgba(4, 31, 45, 0.025);

  /* Ombre très légère uniquement pour accompagner le survol */
  --card-shadow-hover:
    0 8px 18px rgba(4, 31, 45, 0.05);
}

/* Services : l’ombre reste portée par la face qui se déplace */
.service-card-front,
.service-card-back {
  box-shadow: var(--card-shadow);
}

.service-item:hover .service-card-front {
  box-shadow: var(--card-shadow-hover);
}

/* Promotions */
.promo-v2-card {
  box-shadow: var(--card-shadow);
}

.promo-v2-card:hover {
  box-shadow: var(--card-shadow-hover);
}

/* Équipe */
.team-card-front,
.team-card-back {
  box-shadow: var(--card-shadow);
}

.team-card:hover .team-card-front,
.team-card:hover .team-card-back {
  box-shadow: var(--card-shadow-hover);
}

/* Contact */
.contact-card {
  box-shadow: var(--card-shadow);
}

.contact-card:hover {
  box-shadow: var(--card-shadow-hover);
}

/*
 * Les ombres restent neutres et légèrement teintées de vert sombre,
 * afin d’éviter un rendu gris/noir trop lourd.
 */


/* ==========================================================
   PHASE TYPO — HIÉRARCHIE TYPOGRAPHIQUE
   H2 de section communs, H3 de cartes communs,
   H4 conservés comme sous-titres.
   ========================================================== */

.promo-v2-copy h4,
.promo-ciphar-copy h4,
.team-card-front .team-role,
.team-card-back .team-role {
  font-size: var(--section-card-subtitle-size);
  line-height: 1.45;
}


/* ==========================================================
   EXCEPTION — TITRE À PROPOS
   Même hiérarchie typographique que les autres H2,
   mais blanc sur le fond sombre.
   ========================================================== */

.about-text h2 {
  color: #fff;
}


/* ==========================================================
   MICRO-INTERACTIONS — ACCESSIBILITÉ
   Désactive les mouvements décoratifs lorsque l’utilisateur
   demande une réduction des animations.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .team-card-inner,
  .contact-card-arrow,
  .contact-back-btn,
  .ordonnance-back-btn,
  .contact-card-arrow i,
  .contact-back-btn i,
  .ordonnance-back-btn i,
  .footer-social a,
  .footer-social a i {
    transition: none;
  }

  .contact-card:hover .contact-card-arrow i,
  .contact-back-btn:hover i,
  .ordonnance-back-btn:hover i,
  .footer-social a:hover,
  .footer-social a:hover i {
    transform: none;
  }
}


/* ==========================================================
   PHASE FINALE — RYTHME VERTICAL
   Harmonisation prudente des espacements entre titres,
   contenus et indicateurs, sans modifier la géométrie.
   ========================================================== */

:root {
  --section-label-gap: 14px;
  --section-content-gap: clamp(34px, 2.8vw, 44px);
  --slider-indicator-gap: 24px;
}

/* Label → H2 */
.services-heading > p:first-of-type,
.promos-label,
.contact-heading > p:first-of-type {
  margin-bottom: var(--section-label-gap);
}

/* En-tête → contenu */
.services-heading,
.contact-heading {
  margin-bottom: var(--section-content-gap);
}

/* Produits : le bloc de validité appartient à l’introduction */
.promos-title-row {
  margin-bottom: 16px;
}

.promos-validity {
  margin-bottom: var(--section-content-gap);
}

/* Cartes → indicateur */
.services-slider-dots,
.promos-dots {
  margin-top: var(--slider-indicator-gap);
}

/*
 * Le padding vertical interne du conteneur Contact était plus fort
 * que celui des autres contenus. On conserve juste l’espace nécessaire
 * aux ombres et aux mouvements au survol.
 */
.contact-main {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* À propos : titre → sous-titre → contenu */
.about-text h2 {
  margin-bottom: 14px;
}

.about-text .subtitle,
.about-text > .subtitle {
  margin-top: 0;
  margin-bottom: var(--section-content-gap);
}

@media screen and (max-width: 750px) {
  :root {
    --section-label-gap: 12px;
    --section-content-gap: 30px;
    --slider-indicator-gap: 16px;
  }

  .promos-title-row {
    margin-bottom: 14px;
  }

  .contact-main {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}


/* ==========================================================
   RC1 — RESPONSIVE FINAL
   Dernières corrections validées sur mobile, tablette et desktop.
   ========================================================== */

/* ----------------------------------------------------------
   TABLETTE — SERVICES
   2 cartes complètes + aperçu clair de la suivante.
   ---------------------------------------------------------- */
@media screen and (min-width: 781px) and (max-width: 1100px) {
  .services-grid.services-responsive-slider {
    gap: 24px;
    padding: 6px 28px 28px 0;
    scroll-padding-left: 0;
  }

  .services-grid.services-responsive-slider > .service-item,
  .services-grid.services-responsive-slider > .services-hidden > .service-item {
    flex: 0 0 43.5%;
    width: 43.5%;
    min-width: 43.5%;
    max-width: 43.5%;
  }

  .services-slider-dots {
    width: calc(100% - 56px);
  }
}

/* ----------------------------------------------------------
   MOBILE — HERO
   Le contenu descend légèrement sans modifier la hauteur.
   ---------------------------------------------------------- */
@media screen and (max-width: 750px) {
  .hero-content {
    padding-top: 58px;
    padding-bottom: 22px;
    transform: translateY(16px);
  }
}

/* ----------------------------------------------------------
   À PROPOS — LARGEUR DE LECTURE
   ---------------------------------------------------------- */
@media screen and (min-width: 1101px) {
  .about-text {
    max-width: 100%;
  }

  .about .description {
    max-width: 100%;
  }

  .about .description p {
    margin-bottom: 26px;
  }

  .about-list {
    max-width: 1060px;
  }
}

/* ----------------------------------------------------------
   ÉQUIPE — CARTES UN PEU PLUS FINES SUR GRAND ÉCRAN
   ---------------------------------------------------------- */
@media screen and (min-width: 1101px) {
  .team-cards {
    width: 100%;
    margin-inline: auto;
  }
}

/* ----------------------------------------------------------
   CONTACT MOBILE — RYTHME PLUS COMPACT ENTRE LES CARTES
   ---------------------------------------------------------- */
@media screen and (max-width: 750px) {
  .contact-main {
    gap: 18px;
  }
}

/* ----------------------------------------------------------
   TRANSITION AVANT FOOTER
   Courbe légère intégrée au footer, sans image supplémentaire.
   ---------------------------------------------------------- */
.footer {
  padding-top: 46px;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5%;
  z-index: 1;

  width: 110%;
  height: 24px;

  background: rgba(255, 255, 255, 0.07);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;

  pointer-events: none;
}

@media screen and (max-width: 750px) {
  .footer {
    padding-top: 38px;
  }

  .footer::before {
    height: 18px;
  }
}


/* ==========================================================
   HEADER DESKTOP — BOUTONS HORAIRES / GARDES HARMONISÉS
   Même boîte extérieure, indépendamment du nombre de lignes.
   ========================================================== */
@media screen and (min-width: 901px) {
  #header .desktop-hours,
  #header .desktop-garde {
    width: 190px;
    height: 54px;
    min-height: 54px;
    padding: 7px 14px;
    border-radius: 12px;
    flex: 0 0 190px;
    justify-content: center;
  }

  #header .desktop-hours {
    margin-left: 35px;
  }

  #header .desktop-garde {
    margin-left: 14px;
  }

  #header .desktop-hours > div,
  #header .desktop-garde > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #header .desktop-garde .garde-button-text {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* ==========================================================
   MENU MOBILE V4 — COMPOSANT DÉFINITIF
   Intégré directement dans style.css pour éviter tout oubli
   ou mauvais chemin vers une deuxième feuille de style.
   ========================================================== */

/* Sécurité absolue : le HTML mobile est toujours caché par défaut. */
.mobile-menu-panel {
  display: none;
}

@media screen and (max-width: 900px) {
  :root {
    --mobile-menu-info-height: var(--info-bar-height, 35px);
    --mobile-menu-width: min(76vw, 360px);
  }

  body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: auto;
  }

  /* Une seule interface par format. */
  #header .desktop-menu {
    display: none;
  }

  #header .burger-btn {
    display: block;
    z-index: 10012;
  }

  /* Overlay partagé avec les popups existantes. */
  .menu-overlay {
    position: fixed;
    inset: var(--mobile-menu-info-height) 0 0;
    z-index: 10008;

    width: 100%;
    height: calc(100dvh - var(--mobile-menu-info-height));

    background: rgba(15, 47, 51, .22);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
      opacity .28s ease,
      visibility .28s ease;
  }

  .menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Panneau latéral */
  .mobile-menu-panel {
    position: fixed;
    font-family: "Roboto", Arial, sans-serif;
    top: var(--mobile-menu-info-height);
    right: 0;
    z-index: 10010;

    width: var(--mobile-menu-width);
    height: calc(100dvh - var(--mobile-menu-info-height));

    display: flex;
    flex-direction: column;

    padding:
      20px
      20px
      max(16px, env(safe-area-inset-bottom));

    overflow: hidden;

    background: rgba(255, 255, 255, .965);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    border-radius: 24px 0 0 24px;
    box-shadow: -22px 0 55px rgba(4, 31, 45, .18);

    transform: translateX(105%);
    transition: transform .34s cubic-bezier(.22, .61, .36, 1);
  }

  .mobile-menu-panel.active {
    transform: translateX(0);
  }

  /* En-tête */
  .mobile-menu-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
  }

  .mobile-menu-welcome {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .mobile-menu-welcome > strong {
    color: #0f2f33;
    font-family: "Roboto", sans-serif;
    font-size: 1.48rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
  }

  .mobile-menu-weather {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #60757b;
    font-family: "Roboto", sans-serif;
    font-size: .82rem;
  }

  .mobile-menu-weather .weather-icon {
    color: #f5b301;
    font-size: 1.08rem;
  }

  .mobile-menu-weather b {
    color: #0f2f33;
  }

  .mobile-menu-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #f2f8f6;
    color: #159a83;

    cursor: pointer;

    transition:
      transform .24s ease,
      background .24s ease,
      color .24s ease;
  }

  .mobile-menu-close i {
    color: currentColor;
    font-size: 1.65rem;
    line-height: 1;
  }

  .mobile-menu-close:active {
    transform: scale(.93) rotate(10deg);
  }

  /* Navigation */
  .mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;

    margin-top: 22px;
  }

  .mobile-menu-nav a {
    position: relative;

    min-height: 40px;

    display: flex;
    align-items: center;

    padding: 7px 4px;

    color: #0f2f33;
    text-decoration: none;

    font-family: "Roboto", sans-serif;
    font-size: 1.03rem;
    font-weight: 600;

    opacity: 0;
    transform: translateX(14px);

    transition:
      color .22s ease,
      transform .22s ease,
      opacity .28s ease;
  }

  .mobile-menu-panel.active .mobile-menu-nav a {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(70ms + (var(--item-index) * 42ms));
  }

  .mobile-menu-nav a::before {
    content: "";

    position: absolute;
    left: -8px;

    width: 4px;
    height: 18px;

    border-radius: 99px;
    background: #62beaf;

    opacity: 0;
    transform: scaleY(.45);

    transition:
      opacity .2s ease,
      transform .2s ease;
  }

  .mobile-menu-nav a:active {
    color: #159a83;
    transform: translateX(4px);
  }

  .mobile-menu-nav a:active::before {
    opacity: 1;
    transform: scaleY(1);
  }

  /* Séparation navigation / actions pratiques */
  .mobile-menu-section-separator {
    width: 100%;
    height: 1px;
    margin-top: 18px;
    background: rgba(4, 31, 45, .12);
  }

  .mobile-menu-section-title {
    margin: 11px 0 5px;
    color: #789096;
    font-family: "Roboto", sans-serif;
    font-size: .66rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  /* Téléphone + itinéraire */
  .mobile-menu-actions {
    display: flex;
    justify-content: center;
    gap: 42px;
    margin-top: 0;
  }

  .mobile-menu-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
  }

  .mobile-menu-action-item > span {
    color: #0f2f33;
    font-family: "Roboto", sans-serif;
    font-size: .76rem;
    font-weight: 650;
    line-height: 1;
  }

  .mobile-menu-actions .round-action {
    position: relative;

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: linear-gradient(145deg, #f5fbf9, #e8f5f1);
    color: #159a83;

    box-shadow:
      0 9px 20px rgba(4, 31, 45, .065),
      inset 0 0 0 1px rgba(21, 154, 131, .08);

    cursor: pointer;

    transition:
      transform .2s ease,
      box-shadow .2s ease;
  }

  /* Neutralise les anciennes règles génériques phone/map. */
  .mobile-menu-actions .round-action::after {
    display: none;
  }

  .mobile-menu-actions .round-action i {
    margin: 0;
    padding: 0;

    color: currentColor;
    font-size: 1.5rem;
    line-height: 1;

    transform: none;
  }

  .mobile-menu-actions .round-action:active {
    transform: scale(.92);
  }

  .mobile-menu-section-title--practical {
    margin-top: 20px;
    margin-bottom: 5px;
    padding-top: 13px;
    border-top: 1px solid rgba(4, 31, 45, .10);
  }

  /* Cartes */
  .mobile-menu-cards {
    display: grid;
    gap: 10px;

    margin-top: 0;
  }

  .mobile-menu-card {
    width: 100%;
    min-height: 66px;

    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0;
    padding: 11px 14px;

    border: 0;
    border-radius: 18px;

    color: #fff;
    text-align: left;

    cursor: pointer;

    transition:
      transform .2s ease,
      box-shadow .2s ease;
  }

  .mobile-hours-card {
    background: linear-gradient(135deg, #178e73, #62beaf);
    box-shadow: 0 13px 28px rgba(21, 154, 131, .20);
  }

  .mobile-garde-card {
    background: linear-gradient(135deg, #394B9A, #4B5EB0);
    box-shadow: 0 13px 28px rgba(80, 54, 160, .22);
  }

  .mobile-menu-card:active {
    transform: scale(.982);
  }

  .mobile-menu-card-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;
    background: rgba(255, 255, 255, .15);
  }

  .mobile-menu-card-icon i {
    color: #fff;
    font-size: 1.38rem;
  }

  .mobile-menu-card-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mobile-menu-card-copy small,
  .mobile-menu-card-copy strong {
    margin: 0;
    padding: 0;

    color: #fff;
    font-family: "Roboto", sans-serif;
    line-height: 1.2;
  }

  .mobile-menu-card-copy small {
    font-size: .73rem;
    font-weight: 400;
    opacity: .78;
  }

  .mobile-menu-card-copy strong {
    font-size: .97rem;
    font-weight: 800;
  }

  .mobile-menu-card-arrow {
    width: 28px;
    height: 28px;

    margin-left: auto;

    display: grid;
    place-items: center;

    color: #fff;
  }

  .mobile-menu-card-arrow i {
    color: currentColor;
    font-size: 1.45rem;
  }

  .mobile-menu-hours-arrow {
    animation: mobileHoursArrow 2.4s ease-in-out infinite;
  }

  .mobile-menu-garde-arrow {
    animation: mobileGardeArrow 2.8s ease-in-out infinite;
  }

  @keyframes mobileHoursArrow {
    0%, 62%, 100% {
      transform: translateX(0);
      opacity: 1;
    }

    74% {
      transform: translateX(5px);
      opacity: .85;
    }

    84% {
      transform: translateX(1px);
      opacity: 1;
    }
  }

  @keyframes mobileGardeArrow {
    0%, 70%, 100% {
      transform: translateX(0);
    }

    80% {
      transform: translateX(6px);
    }

    90% {
      transform: translateX(2px);
    }
  }

  /* Signature : le nom est déjà dans l'image du logo. */
  .mobile-menu-signature {
    margin-top: auto;
    margin-bottom: 18px;
    padding-top: 14px;

    display: flex;
    justify-content: center;

    opacity: .9;
  }

  .mobile-menu-signature img {
    display: block;

    width: min(138px, 70%);
    height: auto;

    object-fit: contain;
  }
}

/* Le bandeau info passe à 44 px sur les petits mobiles. */
@media screen and (max-width: 700px) {
  :root {
    --mobile-menu-info-height: 44px;
  }
}

/* Téléphones peu hauts */
@media screen and (max-width: 900px) and (max-height: 700px) {
  .mobile-menu-panel {
    padding-top: 14px;
  }

  .mobile-menu-welcome > strong {
    font-size: 1.32rem;
  }

  .mobile-menu-nav {
    margin-top: 17px;
    gap: 0;
  }

  .mobile-menu-nav a {
    min-height: 34px;
    padding-block: 5px;
    font-size: .96rem;
  }

  .mobile-menu-section-separator {
    margin-top: 12px;
  }

  .mobile-menu-section-title {
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: .61rem;
  }

  .mobile-menu-actions {
    gap: 36px;
    margin-top: 0;
  }

  .mobile-menu-actions .round-action {
    width: 46px;
    height: 46px;
  }

  .mobile-menu-action-item {
    gap: 5px;
  }

  .mobile-menu-action-item > span {
    font-size: .70rem;
  }

  .mobile-menu-section-title--practical {
    margin-top: 14px;
    margin-bottom: 4px;
    padding-top: 10px;
  }

  .mobile-menu-cards {
    margin-top: 0;
    gap: 8px;
  }

  .mobile-menu-card {
    min-height: 58px;
    padding-block: 8px;
  }

  .mobile-menu-card-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .mobile-menu-signature {
    margin-bottom: 10px;
    padding-top: 8px;
  }

  .mobile-menu-signature img {
    width: min(116px, 65%);
  }
}

@media screen and (max-width: 900px) and (max-height: 620px) {
  .mobile-menu-signature {
    display: none;
  }
}

/* ==========================================================
   MENU MOBILE — ACTIONS TÉLÉPHONE / ITINÉRAIRE
   Classes dédiées : aucun héritage des anciens .phone-trigger
   et .map-trigger du header.
   ========================================================== */
@media screen and (max-width: 900px) {
  .mobile-menu-actions .mobile-phone-trigger,
  .mobile-menu-actions .mobile-map-trigger {
    position: relative;

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: linear-gradient(145deg, #f5fbf9, #e8f5f1);
    color: #159a83;

    box-shadow:
      0 9px 20px rgba(4, 31, 45, .065),
      inset 0 0 0 1px rgba(21, 154, 131, .08);

    cursor: pointer;

    transition:
      transform .2s ease,
      box-shadow .2s ease;
  }

  .mobile-menu-actions .mobile-phone-trigger::after,
  .mobile-menu-actions .mobile-map-trigger::after {
    content: none;
  }

  .mobile-menu-actions .mobile-phone-trigger i,
  .mobile-menu-actions .mobile-map-trigger i {
    display: block;

    width: auto;
    height: auto;

    margin: 0;
    padding: 0;

    color: currentColor;
    font-size: 1.5rem;
    line-height: 1;

    transform: none;
  }

  .mobile-menu-actions .mobile-phone-trigger:active,
  .mobile-menu-actions .mobile-map-trigger:active {
    transform: scale(.92);
  }
}

@media screen and (max-width: 900px) and (max-height: 700px) {
  .mobile-menu-actions .mobile-phone-trigger,
  .mobile-menu-actions .mobile-map-trigger {
    width: 48px;
    height: 48px;
  }
}

/* =========================================================
   HORAIRES — FINITIONS POPUP + BOUTON DU MENU
   ========================================================= */

/* Croix du popup Horaires : même présence visuelle que Gardes. */
.hours-popup .hours-close-modern i {
  font-size: 2rem;
}

/* Le statut d'ouverture est déjà affiché dans la barre d'information. */
.desktop-hours .menu-hours-status,
.mobile-hours-card .menu-hours-status {
  display: none;
}

/* Le bouton du menu reste équilibré avec uniquement les horaires. */
.desktop-hours > div {
  display: flex;
  align-items: center;
}

.desktop-hours .menu-hours-time {
  line-height: 1.15;
}

/* =========================================================
   ÉTAPE 1 V1.4 — MODALE MOBILE SOUS LA BARRE INFO
   - barre info visible et nette
   - overlay et popup limités à la zone restante
   - centrage, croix et blocage du scroll conservés
   ========================================================= */

body.popup-open {
  overflow: hidden;
  overscroll-behavior: none;
}

@media screen and (max-width: 900px) {
  .map-popup.map-card-popup {
    position: fixed;
    inset: var(--info-bar-height) 0 0;

    display: flex;
    width: 100%;
    max-width: none;
    height: calc(100vh - var(--info-bar-height));
    height: calc(100dvh - var(--info-bar-height));
    align-items: center;
    justify-content: center;

    padding:
      12px
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));

    overflow: hidden;
    transform: none;
    pointer-events: none;
  }

  .map-popup.map-card-popup.active {
    transform: none;
    pointer-events: auto;
  }

  .map-popup.map-card-popup .menu-popup-shell {
    position: relative;
    width: min(var(--menu-popup-width), calc(100vw - 24px));
    max-width: 100%;
    max-height: calc(100dvh - var(--info-bar-height) - 24px);
    margin: auto;
  }

  .map-popup.map-card-popup .itineraire-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - var(--info-bar-height) - 24px);
    margin: 0;
  }

  .map-popup.map-card-popup .map-close-modern {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 110;
  }
}

/* =========================================================
   ÉTAPE 1 V1.5 — BARRE INFO STABLE PENDANT UNE MODALE
   La barre reste visible et nette même après avoir scrollé.
   ========================================================= */

@media screen and (max-width: 900px) {
  body.popup-open .led-info-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10020;

    width: 100%;
    height: var(--info-bar-height);

    transform: none;
    opacity: 1;
    visibility: visible;
  }

  body.popup-open .menu-overlay {
    inset: var(--info-bar-height) 0 0;
    width: 100%;
    height: calc(100vh - var(--info-bar-height));
    height: calc(100dvh - var(--info-bar-height));
    z-index: 10008;
  }

  body.popup-open .map-popup.map-card-popup {
    inset: var(--info-bar-height) 0 0;
    height: calc(100vh - var(--info-bar-height));
    height: calc(100dvh - var(--info-bar-height));
    z-index: 10009;
  }
}

/* =========================================================
   ÉTAPE 2 V1 — POPUP TÉLÉPHONE SUR LA BASE VALIDÉE
   Même centrage, largeur, croix, overlay et scroll lock
   que le popup Itinéraire.
   ========================================================= */

@media screen and (max-width: 900px) {
  .phone-popup.phone-popup-card {
    position: fixed;
    inset: var(--info-bar-height) 0 0;

    display: flex;
    width: 100%;
    max-width: none;
    height: calc(100vh - var(--info-bar-height));
    height: calc(100dvh - var(--info-bar-height));
    align-items: center;
    justify-content: center;

    padding:
      12px
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));

    overflow: hidden;
    transform: none;
    pointer-events: none;
    z-index: 10009;
  }

  .phone-popup.phone-popup-card.active {
    transform: none;
    pointer-events: auto;
  }

  .phone-popup.phone-popup-card .menu-popup-shell {
    position: relative;
    width: min(var(--menu-popup-width), calc(100vw - 24px));
    max-width: 100%;
    max-height: calc(100dvh - var(--info-bar-height) - 24px);
    margin: auto;
  }

  .phone-popup.phone-popup-card .phone-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - var(--info-bar-height) - 24px);
    margin: 0;
  }

  .phone-popup.phone-popup-card .phone-close-modern {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 110;
  }
}

/* =========================================================
   ÉTAPE 3 V1 — POPUP HORAIRES SUR LA BASE VALIDÉE
   Même centrage, largeur, croix, overlay et scroll lock
   que les popups Itinéraire et Téléphone.
   ========================================================= */

@media screen and (max-width: 900px) {
  .hours-popup.hours-popup-card {
    position: fixed;
    inset: var(--info-bar-height) 0 0;

    display: flex;
    width: 100%;
    max-width: none;
    height: calc(100vh - var(--info-bar-height));
    height: calc(100dvh - var(--info-bar-height));
    align-items: center;
    justify-content: center;

    padding:
      12px
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));

    overflow: hidden;
    transform: none;
    pointer-events: none;
    z-index: 10009;
  }

  .hours-popup.hours-popup-card.active {
    transform: none;
    pointer-events: auto;
  }

  .hours-popup.hours-popup-card .menu-popup-shell {
    position: relative;
    width: min(var(--menu-popup-width), calc(100vw - 24px));
    max-width: 100%;
    max-height: calc(100dvh - var(--info-bar-height) - 24px);
    margin: auto;
  }

  .hours-popup.hours-popup-card .horaires-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - var(--info-bar-height) - 24px);
    margin: 0;
  }

  .hours-popup.hours-popup-card .hours-close-modern {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 110;
  }
}

/* =========================================================
   ÉTAPE 4 V1 — POPUP GARDES SUR LA BASE VALIDÉE
   Même centrage, largeur, croix, overlay et scroll lock
   que les popups Itinéraire, Téléphone et Horaires.
   ========================================================= */

@media screen and (max-width: 900px) {
  .garde-popup-wrapper {
    position: fixed;
    inset: var(--info-bar-height) 0 0;

    display: flex;
    width: 100%;
    max-width: none;
    height: calc(100vh - var(--info-bar-height));
    height: calc(100dvh - var(--info-bar-height));
    align-items: center;
    justify-content: center;

    padding:
      12px
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));

    overflow: hidden;
    transform: none;
    pointer-events: none;
    z-index: 10009;
  }

  .garde-popup-wrapper.active {
    transform: none;
    pointer-events: auto;
  }

  .garde-popup-wrapper .menu-popup-shell {
    position: relative;
    width: min(var(--menu-popup-width), calc(100vw - 24px));
    max-width: 100%;
    max-height: calc(100dvh - var(--info-bar-height) - 24px);
    margin: auto;
  }

  .garde-popup-wrapper .garde-popup-version {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - var(--info-bar-height) - 24px);
    margin: 0;
  }

  .garde-popup-wrapper .garde-close-modern {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 110;
  }
}

/* ==========================================================
   ORDONNANCE V2 — PARCOURS PATIENT STABILISÉ
   Base historique conservée.
   Ce bloc gère uniquement :
   - les 5 panneaux
   - le formulaire coordonnées
   - les indicateurs 5 étapes
   - la référence de suivi
   ========================================================== */

/* ----- Track 5 étapes ----- */

.contact-ordonnance-card .ordonnance-slider {
  width: 500%;
}

.contact-ordonnance-card .ordonnance-default,
.contact-ordonnance-card .ordonnance-details,
.contact-ordonnance-card .ordonnance-upload,
.contact-ordonnance-card .ordonnance-loading,
.contact-ordonnance-card .ordonnance-success {
  width: 20%;
  flex: 0 0 20%;
  height: auto;
  min-height: 0;
  align-self: flex-start;
}

.contact-ordonnance-card.is-details .ordonnance-slider {
  transform: translateX(-20%);
}

.contact-ordonnance-card.is-upload .ordonnance-slider {
  transform: translateX(-40%);
}

.contact-ordonnance-card.is-loading .ordonnance-slider {
  transform: translateX(-60%);
}

.contact-ordonnance-card.is-success .ordonnance-slider {
  transform: translateX(-80%);
}

/* Les états V2 utilisent la hauteur dynamique calculée par le JS. */
.contact-ordonnance-card.is-details,
.contact-ordonnance-card.is-upload,
.contact-ordonnance-card.is-loading,
.contact-ordonnance-card.is-success {
  height: auto;
  min-height: 0;
}

/* ----- Slide 1 : on conserve le rendu historique ----- */

.contact-ordonnance-card:not(.is-details):not(.is-upload):not(.is-loading):not(.is-success) .contact-card-content {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.contact-ordonnance-card:not(.is-details):not(.is-upload):not(.is-loading):not(.is-success) .ordonnance-slider {
  height: 100%;
  align-items: stretch;
}

.contact-ordonnance-card:not(.is-details):not(.is-upload):not(.is-loading):not(.is-success) .ordonnance-default {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  align-self: stretch;
}

.contact-ordonnance-card:not(.is-details):not(.is-upload):not(.is-loading):not(.is-success) .contact-card-arrow-wrapper {
  margin-top: auto;
}

/* ----- Slide 2 : coordonnées ----- */

.ordonnance-details {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 24px;
}

.ordonnance-details-center {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ordonnance-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ordonnance-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  text-align: left;
}

.ordonnance-field--wide {
  grid-column: 1 / -1;
}

.ordonnance-field > span:first-child {
  color: #40575c;
  font-family: "Roboto", sans-serif;
  font-size: .78rem;
  font-weight: 800;
}

.ordonnance-field > span:first-child b {
  color: #20b191;
}

.ordonnance-field-control {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(32, 177, 145, .20);
  border-radius: 13px;
  background: rgba(98, 190, 175, .055);
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.ordonnance-field-control:focus-within {
  border-color: #20b191;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(32, 177, 145, .08);
}

.ordonnance-field-control i {
  flex: 0 0 auto;
  color: #20b191;
  font-size: 1.05rem;
}

.ordonnance-field-control input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #041f2d;
  font: inherit;
  font-size: .84rem;
  user-select: text;
}

.ordonnance-field-control input::placeholder {
  color: #9aa8ac;
}

.ordonnance-details-error {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(228, 93, 93, .20);
  border-radius: 13px;
  background: rgba(228, 93, 93, .07);
  color: #cf4f4f;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}

.ordonnance-details-error.is-visible {
  display: flex;
}

.ordonnance-privacy-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(32, 177, 145, .16);
  border-radius: 15px;
  background: rgba(98, 190, 175, .065);
  text-align: left;
}

.ordonnance-privacy-info > i {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #20b191;
  background: #fff;
  font-size: 1.15rem;
}

.ordonnance-privacy-info strong {
  display: block;
  margin-bottom: 4px;
  color: #041f2d;
  font-size: .82rem;
}

.ordonnance-privacy-info p {
  margin: 0;
  color: #6f7d85;
  font-size: .72rem;
  line-height: 1.45;
}

.ordonnance-privacy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
  color: #9ba7aa;
  font-size: .70rem;
}

.ordonnance-privacy-links a {
  color: #159a83;
  font-weight: 800;
  text-decoration: none;
}

.ordonnance-privacy-links a:hover {
  text-decoration: underline;
}

.ordonnance-details-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin-top: 18px;
}

.ordonnance-continue-btn {
  display: inline-flex;
  flex: 0 0 180px;
  max-width: 180px;
  height: 54px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #20b191, #67cfc0);
  cursor: pointer;
  font-size: .90rem;
  font-weight: 800;
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.ordonnance-continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(32, 177, 145, .22);
}

.ordonnance-continue-btn i {
  font-size: 1.2rem;
}

/* ----- Slide 3 : fichier sélectionné ----- */

.ordonnance-file-added {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 4px 0 2px;
  color: #65767a;
  font-family: "Roboto", sans-serif;
  font-size: .75rem;
  font-weight: 700;
  text-align: left;
}

.ordonnance-file-added[hidden] {
  display: none;
}

.ordonnance-file-added i {
  color: #20b191;
  font-size: 1rem;
}

/* ----- Indicateurs : 3 vraies étapes ----- */

/*
   Présentation → Coordonnées → Ordonnance.
   Loading et succès sont des états, pas des étapes de navigation.
*/
.contact-ordonnance-card .ordonnance-slide-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 4px;
  overflow: hidden;
}

.contact-ordonnance-card .ordonnance-slide-dots span {
  display: block;
  width: 28px;
  height: 4px;
  flex: 0 0 28px;
  border-radius: 999px;
  background: rgba(32, 177, 145, .25);
  box-shadow: none;
  transform: none;
  transition: background .25s ease;
}

.contact-ordonnance-card .ordonnance-slide-dots span.active {
  width: 28px;
  flex-basis: 28px;
  background: #20b191;
}

/* Intro : position historique de l'indicateur. */
.contact-ordonnance-card:not(.is-details):not(.is-upload):not(.is-loading):not(.is-success) .ordonnance-slide-footer {
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 100%;
  margin: 0;
}

/* Coordonnées et ordonnance : plus de respiration au-dessus des indicateurs. */
.contact-ordonnance-card .ordonnance-details .ordonnance-slide-footer,
.contact-ordonnance-card .ordonnance-upload .ordonnance-slide-footer {
  position: static;
  inset: auto;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
  padding-bottom: 8px;
  visibility: visible;
  opacity: 1;
}

/* Aucun indicateur pendant l'envoi ou sur l'écran de succès. */
.contact-ordonnance-card.is-loading .ordonnance-slide-footer,
.contact-ordonnance-card.is-success .ordonnance-slide-footer {
  display: none;
}

/* ----- Succès : référence ----- */

.ordonnance-success-reference {
  display: grid;
  gap: 5px;
  width: min(100%, 310px);
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(32, 177, 145, .18);
  border-radius: 16px;
  background: rgba(98, 190, 175, .08);
}

.ordonnance-success-reference[hidden] {
  display: none;
}

.ordonnance-success-reference span {
  color: #74828c;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ordonnance-success-reference strong {
  color: #159a83;
  font-size: 1.02rem;
  letter-spacing: .02em;
}

.ordonnance-success-reference small {
  color: #849397;
  font-size: .70rem;
  line-height: 1.4;
}

/* ----- Responsive ----- */

@media screen and (max-width: 780px) {
  .ordonnance-details,
  .ordonnance-upload {
    padding: 16px 16px 22px;
  }

  .ordonnance-fields {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ordonnance-field--wide {
    grid-column: auto;
  }

  .ordonnance-privacy-info {
    padding: 12px;
  }

  .ordonnance-details-bottom,
  .ordonnance-upload-bottom {
    gap: 10px;
  }

  .ordonnance-back-btn {
    width: 52px;
    height: 52px;
    min-width: 52px;
  }

  .ordonnance-continue-btn,
  .ordonnance-send-btn {
    flex: 1 1 auto;
    max-width: none;
    height: 52px;
  }

  .contact-main > .contact-ordonnance-card:not(.is-details):not(.is-upload):not(.is-loading):not(.is-success) {
    height: 430px;
    min-height: 430px;
  }

  .contact-ordonnance-card .ordonnance-details .ordonnance-slide-footer,
  .contact-ordonnance-card .ordonnance-upload .ordonnance-slide-footer {
    margin-top: 26px;
    padding-bottom: 6px;
  }

  .contact-ordonnance-card .ordonnance-slide-dots {
    gap: 9px;
  }

  .contact-ordonnance-card .ordonnance-slide-dots span {
    width: 25px;
    flex-basis: 25px;
  }

  .contact-ordonnance-card .ordonnance-slide-dots span.active {
    width: 25px;
    flex-basis: 25px;
  }
}

/* ==========================================================
   ORDONNANCE — ENCARTS INFORMATIONS HARMONISÉS
   Même hiérarchie typographique sur Coordonnées et Ordonnance.
   ========================================================== */

.contact-ordonnance-card .ordonnance-info-box {
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(32, 177, 145, .16);
  border-radius: 18px;
  background: rgba(98, 190, 175, .08);
  text-align: left;
  color: #5f7077;
}

.contact-ordonnance-card .ordonnance-info-box > i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: #fff;
  color: #20b191;
  font-size: 1.35rem;
}

.contact-ordonnance-card .ordonnance-info-box-content {
  min-width: 0;
}

.contact-ordonnance-card .ordonnance-info-box strong {
  display: block;
  margin: 0 0 5px;
  color: #041f2d;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.25;
}

.contact-ordonnance-card .ordonnance-info-box p {
  margin: 0;
  color: #5f7077;
  font-size: .78rem;
  line-height: 1.45;
}

.contact-ordonnance-card .ordonnance-info-box a {
  display: inline-flex;
  margin-top: 7px;
  color: #20b191;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

.contact-ordonnance-card .ordonnance-info-box a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 780px) {
  .contact-ordonnance-card .ordonnance-info-box {
    gap: 12px;
    padding: 13px 14px;
  }

  .contact-ordonnance-card .ordonnance-info-box > i {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 1.2rem;
  }

  .contact-ordonnance-card .ordonnance-info-box strong {
    font-size: .82rem;
  }

  .contact-ordonnance-card .ordonnance-info-box p,
  .contact-ordonnance-card .ordonnance-info-box a {
    font-size: .76rem;
  }
}





/* ==========================================================
   SERVICES — GÉOMÉTRIE FINALE SANS FLIP
   - image fixe et plus basse
   - hauteur commune = contenu de la carte la plus longue
   - seulement 30 px sous le dernier texte
   ========================================================== */
.services-grid.services-responsive-slider {
  align-items: stretch;
}

.services-grid.services-responsive-slider > .service-item,
.services-grid.services-responsive-slider > .services-hidden > .service-item {
  display: flex;
  height: auto;
  min-height: 0;
  align-self: stretch;
}

.services-grid.services-responsive-slider .service-card-inner {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
}

.services-grid.services-responsive-slider .service-card-face,
.services-grid.services-responsive-slider .service-card-front {
  width: 100%;
  height: auto;
  min-height: 0;
}

.services-grid.services-responsive-slider .service-card-front {
  flex: 1 1 auto;
  padding-bottom: 30px;
}

.services-grid.services-responsive-slider .service-image {
  height: 115px;
  flex: 0 0 115px;
  min-height: 115px;
  max-height: 115px;
}

.services-grid.services-responsive-slider .service-card-front p {
  margin-bottom: 0;
}

@media screen and (max-width: 780px) {
  .services-grid.services-responsive-slider .service-image {
    height: 115px;
    flex-basis: 115px;
    min-height: 115px;
    max-height: 115px;
  }
}


/* ==========================================================
   PROMOTIONS — AJUSTEMENTS FINAUX
   1. Ombres produit non coupées
   2. Texte descriptif légèrement agrandi
   3. H4 légèrement agrandi
   Typographie Roboto conservée.
   ========================================================== */

.promo-v2-image,
.promo-v2-vertical .promo-v2-image,
.promo-v2-horizontal .promo-v2-image {
  overflow: visible;
}

.promo-v2-copy p {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  color: #59676d;
}

.promo-v2-copy h4 {
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  line-height: 1.35;
}

/* Conserver les mêmes ajustements sur les cartes promo en responsive */
@media screen and (max-width: 750px) {
  .promo-v2-image,
  .promo-v2-vertical .promo-v2-image,
  .promo-v2-horizontal .promo-v2-image {
    overflow: visible;
  }

  .promo-v2-copy p {
    font-size: 1rem;
  }

  .promo-v2-copy h4 {
    font-size: 1.2rem;
  }
}


/* ==========================================================
   PROMOS V2 — CTA COMPACT INSPIRÉ DECATHLON
   ========================================================== */

@media screen and (min-width: 751px) {
  .promo-v2-btn {
    justify-self: start;
    align-self: center;

    width: 220px;
    max-width: 100%;
    height: 48px;
    padding: 0 16px;

    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(9,112,91,.16);
  }

  .promo-v2-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 24px rgba(9,112,91,.22);
  }
}

/* Sur mobile, on conserve un bouton confortable à toucher */
@media screen and (max-width: 750px) {
  .promo-v2-btn {
    width: 100%;
    border-radius: 14px;
  }
}


/* ==========================================================
   SERVICES — MOBILE : TOUTES LES CARTES À LA MÊME HAUTEUR
   La hauteur commune suit la carte la plus haute du slider.
   ========================================================== */
@media screen and (max-width: 780px) {

  .services-grid.services-responsive-slider {
    align-items: stretch;
  }

  .services-grid.services-responsive-slider .service-item {
    display: flex;
    height: auto;
    align-self: stretch;
  }

  .services-grid.services-responsive-slider .service-card-inner {
    display: flex;
    width: 100%;
    height: 100%;
    align-self: stretch;
  }

  .services-grid.services-responsive-slider .service-card-face,
  .services-grid.services-responsive-slider .service-card-front {
    width: 100%;
    height: 100%;
    align-self: stretch;
  }

  /* On conserve exactement la hauteur d'image actuelle */
  .services-grid.services-responsive-slider .service-image {
    height: 115px;
    flex: 0 0 115px;
    min-height: 115px;
    max-height: 115px;
  }
}


/* ==========================================================
   PROMOS V2 — TEST CARTE PLUS COMPACTE SANS BADGE SUPÉRIEUR
   - suppression du "-1 €" en haut
   - carte moins haute
   - produit légèrement agrandi
   - bloc remise immédiate conservé
   ========================================================== */

.promo-v2-badge {
  display: none;
}

/* Bureau */
.promo-v2-card {
  grid-template-rows: 220px 86px 50px;
  row-gap: 10px;
  min-height: 0;
  padding: 14px;
}

.promo-v2-main {
  grid-row: 1;
}

.promo-v2-offer {
  grid-row: 2;
}

.promo-v2-btn {
  grid-row: 3;
}

/* Produit visuellement plus présent sans modifier sa zone */
.promo-v2-image img,
.promo-v2-vertical .promo-v2-image img,
.promo-v2-horizontal .promo-v2-image img {
  transform: scale(1.15);
  transform-origin: center;
}

/* Tablette */
@media screen and (max-width: 1200px) and (min-width: 751px) {
  .promo-v2-card {
    grid-template-rows: 210px 82px 48px;
    row-gap: 9px;
    min-height: 0;
    padding: 13px;
  }
}

/* Mobile */
@media screen and (max-width: 750px) {
  .promo-v2-card {
    grid-template-rows: minmax(175px, auto) 72px 46px;
    row-gap: 8px;
    min-height: 0;
    padding: 10px;
  }

  .promo-v2-main {
    grid-row: 1;
  }

  .promo-v2-offer {
    grid-row: 2;
  }

  .promo-v2-btn {
    grid-row: 3;
  }

  .promo-v2-image img,
  .promo-v2-vertical .promo-v2-image img,
  .promo-v2-horizontal .promo-v2-image img {
    transform: scale(1.12);
  }
}

/* Petit mobile */
@media screen and (max-width: 390px) {
  .promo-v2-card {
    grid-template-rows: minmax(165px, auto) 68px 44px;
    row-gap: 7px;
    padding: 9px;
  }
}


/* ==========================================================
   PHASE 3 — STABILITÉ DU CHARGEMENT
   Réserve les dimensions des médias déjà dimensionnés par le design.
   Pas de content-visibility sur les sliders : cela pourrait fausser
   leurs calculs de largeur/hauteur au premier affichage.
   ========================================================== */

/* Les images ne dépassent jamais leur conteneur et gardent leur ratio. */
img {
  max-width: 100%;
}

/* Réserve explicitement la hauteur de la vague du Hero. */
.hero-decoration img {
  width: 100%;
  height: 100%;
}

/* Services : hauteur déjà validée à 115 px, conservée pendant le chargement. */
.service-image {
  height: 115px;
  flex-basis: 115px;
}

.service-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================
   CORRECTION 2026-08-19 — SLIDER ORDONNANCE 5 ETAPES
   Le track est maintenant sur 5 panneaux : chaque slide = 20 %.
   Neutralise l'ancien décalage -25 % du parcours 4 slides.
   ========================================================== */
.contact-ordonnance-card .ordonnance-slider {
  width: 500%;
}

.contact-ordonnance-card .ordonnance-default,
.contact-ordonnance-card .ordonnance-details,
.contact-ordonnance-card .ordonnance-upload,
.contact-ordonnance-card .ordonnance-loading,
.contact-ordonnance-card .ordonnance-success {
  width: 20%;
  flex: 0 0 20%;
  min-width: 0;
  box-sizing: border-box;
}

/* Compatibilité avec l'ancien état générique .is-open. */
.contact-ordonnance-card.is-open .ordonnance-slider,
.contact-ordonnance-card.is-details .ordonnance-slider {
  transform: translateX(-20%);
}

.contact-ordonnance-card.is-upload .ordonnance-slider {
  transform: translateX(-40%);
}

.contact-ordonnance-card.is-loading .ordonnance-slider {
  transform: translateX(-60%);
}

.contact-ordonnance-card.is-success .ordonnance-slider {
  transform: translateX(-80%);
}

/* ==========================================================
   CORRECTION 2026-08-19 — HAUTEUR AUTO PAR ETAPE ORDONNANCE
   La carte prend exactement la hauteur du panneau actuellement visible.
   Les panneaux non actifs restent dans le track horizontal mais ne
   participent plus au calcul de hauteur.
   ========================================================== */

/* Dès qu'on quitte l'écran d'introduction, aucune hauteur fixe. */
.contact-main > .contact-ordonnance-card.is-details,
.contact-main > .contact-ordonnance-card.is-upload,
.contact-main > .contact-ordonnance-card.is-loading,
.contact-main > .contact-ordonnance-card.is-success,
.contact-main > .contact-ordonnance-card.is-open {
  height: auto;
  min-height: 0;
}

.contact-ordonnance-card.is-details .contact-card-content,
.contact-ordonnance-card.is-upload .contact-card-content,
.contact-ordonnance-card.is-loading .contact-card-content,
.contact-ordonnance-card.is-success .contact-card-content,
.contact-ordonnance-card.is-open .contact-card-content {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.contact-ordonnance-card.is-details .ordonnance-slider,
.contact-ordonnance-card.is-upload .ordonnance-slider,
.contact-ordonnance-card.is-loading .ordonnance-slider,
.contact-ordonnance-card.is-success .ordonnance-slider,
.contact-ordonnance-card.is-open .ordonnance-slider {
  height: auto;
  min-height: 0;
  align-items: flex-start;
}

/* Par défaut, dans les états ouverts, les panneaux n'imposent aucune hauteur. */
.contact-ordonnance-card.is-details .ordonnance-slider > *,
.contact-ordonnance-card.is-upload .ordonnance-slider > *,
.contact-ordonnance-card.is-loading .ordonnance-slider > *,
.contact-ordonnance-card.is-success .ordonnance-slider > *,
.contact-ordonnance-card.is-open .ordonnance-slider > * {
  height: 0;
  min-height: 0;
  overflow: hidden;
  align-self: flex-start;
}

/* Seul le panneau visible détermine la hauteur réelle du track. */
.contact-ordonnance-card.is-details .ordonnance-details,
.contact-ordonnance-card.is-open:not(.is-upload):not(.is-loading):not(.is-success) .ordonnance-details {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.contact-ordonnance-card.is-upload .ordonnance-upload {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.contact-ordonnance-card.is-loading .ordonnance-loading {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.contact-ordonnance-card.is-success .ordonnance-success {
  height: auto;
  min-height: 0;
  overflow: visible;
}


/* ==========================================================
   CORRECTION FINALE — ORDONNANCE 5 ÉTAPES / HAUTEUR DYNAMIQUE
   2026-08-19
   ========================================================== */

.contact-ordonnance-card.is-details .ordonnance-slider { transform: translateX(-20%); }
.contact-ordonnance-card.is-upload .ordonnance-slider  { transform: translateX(-40%); }
.contact-ordonnance-card.is-loading .ordonnance-slider { transform: translateX(-60%); }
.contact-ordonnance-card.is-success .ordonnance-slider { transform: translateX(-80%); }

/* L'ancien état is-open ne pilote plus le parcours. */
.contact-ordonnance-card.is-open .ordonnance-slider {
  transform: none;
}

/* Les états ouverts sont dimensionnés par le panneau actif + le JS. */
.contact-main > .contact-ordonnance-card.is-details,
.contact-main > .contact-ordonnance-card.is-upload,
.contact-main > .contact-ordonnance-card.is-loading,
.contact-main > .contact-ordonnance-card.is-success {
  min-height: 0;
}

.contact-ordonnance-card.is-details .contact-card-content,
.contact-ordonnance-card.is-upload .contact-card-content,
.contact-ordonnance-card.is-loading .contact-card-content,
.contact-ordonnance-card.is-success .contact-card-content {
  min-height: 0;
  overflow: hidden;
}

.contact-ordonnance-card.is-details .ordonnance-slider,
.contact-ordonnance-card.is-upload .ordonnance-slider,
.contact-ordonnance-card.is-loading .ordonnance-slider,
.contact-ordonnance-card.is-success .ordonnance-slider {
  min-height: 0;
  align-items: flex-start;
}

/* Un seul panneau participe à la hauteur. */
.contact-ordonnance-card.is-details .ordonnance-slider > *,
.contact-ordonnance-card.is-upload .ordonnance-slider > *,
.contact-ordonnance-card.is-loading .ordonnance-slider > *,
.contact-ordonnance-card.is-success .ordonnance-slider > * {
  height: 0;
  min-height: 0;
  overflow: hidden;
}

.contact-ordonnance-card.is-details .ordonnance-details,
.contact-ordonnance-card.is-upload .ordonnance-upload,
.contact-ordonnance-card.is-loading .ordonnance-loading,
.contact-ordonnance-card.is-success .ordonnance-success {
  height: auto;
  min-height: 0;
  overflow: visible;
}


/* ==========================================================
   CORRECTION MOBILE — ARRIÈRE-PLAN FIGÉ PENDANT LES POPUPS
   ========================================================== */

@media screen and (max-width: 900px) {
  html:has(body.popup-open) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.popup-open {
    position: fixed;
    top: calc(-1 * var(--popup-scroll-y, 0px));
    left: 0;
    right: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }

  body.popup-open .map-popup,
  body.popup-open .phone-popup,
  body.popup-open .hours-popup,
  body.popup-open .garde-popup-wrapper {
    touch-action: pan-y;
  }
}

/* ==========================================================
   ÉQUIPE — CORRECTION DU "FLASH VIDE" PENDANT LE RETOURNEMENT
   Garde le même principe recto / verso, mais stabilise le rendu 3D
   et raccourcit légèrement le passage à 90°.
   ========================================================== */

.team-card {
  transform: translateZ(0);
}

.team-card-inner {
  transform: rotateY(0deg) translateZ(0);
  transform-origin: center center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  transition: transform .48s cubic-bezier(.22, 1, .36, 1);
}

.team-card:hover .team-card-inner {
  transform: rotateY(180deg) translateZ(0);
}

.team-card-front,
.team-card-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}

.team-card-front {
  transform: rotateY(0deg) translateZ(1px);
}

.team-card-back {
  transform: rotateY(180deg) translateZ(1px);
}

/* ==========================================================
   À PROPOS — ALLÈGEMENT DU TEXTE + MICRO-ANIMATIONS
   Conserve la structure, les couleurs et les cartes équipe.
   ========================================================== */

.about .description {
  text-align: left;
}

.about .about-intro {
  max-width: 980px;
  margin: 0;
  line-height: 1.75;
}

/* Les trois mots deviennent le seul effet visuel fort. */
.about-keywords {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2.2vw, 34px);
  margin: clamp(32px, 4vw, 54px) 0 clamp(28px, 3.5vw, 46px);
  overflow: hidden;
}

.about-keywords span {
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: clamp(2.5rem, 6vw, 6.8rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.055em;
  color: rgba(98, 190, 175, .14);
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1),
    color .35s ease;
}

.about-keywords span:nth-child(2) {
  transition-delay: .09s;
}

.about-keywords span:nth-child(3) {
  transition-delay: .18s;
}

.about-keywords span.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.about-keywords span:hover {
  color: rgba(98, 190, 175, .42);
}

/* Détails conservés, mais sortis du parcours de lecture principal. */
.about-engagements {
  width: min(100%, 820px);
  margin: 0 0 34px;
}

.about-engagements summary {
  width: fit-content;
  list-style: none;
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  font-size: .98rem;
  font-weight: 700;
  color: #62beaf;
  padding: 12px 18px;
  border: 1px solid rgba(98, 190, 175, .35);
  border-radius: 999px;
  transition:
    background-color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.about-engagements summary::-webkit-details-marker {
  display: none;
}

.about-engagements summary::after {
  content: "+";
  display: inline-block;
  margin-left: 10px;
  font-size: 1.15em;
  transition: transform .25s ease;
}

.about-engagements[open] summary::after {
  transform: rotate(45deg);
}

.about-engagements summary:hover {
  background: rgba(98, 190, 175, .08);
  border-color: rgba(98, 190, 175, .65);
  transform: translateY(-1px);
}

.about-engagements-content {
  max-width: 980px;
  padding-top: 18px;
}

.about-engagements-content p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .86);
  font-size: .98rem;
  line-height: 1.7;
}

/* Entrée très légère des cartes existantes. */
.about-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .75s cubic-bezier(.22, 1, .36, 1),
    transform .75s cubic-bezier(.22, 1, .36, 1);
}

.about-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 700px) {
  .about-keywords {
    gap: 10px 16px;
    margin: 28px 0 26px;
  }

  .about-keywords span {
    font-size: clamp(2.15rem, 12vw, 3.7rem);
  }

  .about-engagements {
    margin-bottom: 28px;
  }

  .about-engagements summary {
    font-size: .92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-keywords span,
  .about-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================
   À PROPOS — ENGAGEMENTS DÉPLIABLES + ÉQUIPE PLUS FINE
   ========================================================== */

/* Bouton centré */
.about-engagements {
  width: 100%;
  margin: 34px 0 0;
}

.about-engagements summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: fit-content;
  min-height: 52px;
  margin: 0 auto;
  padding: 0 24px;

  list-style: none;
  cursor: pointer;

  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 700;

  color: #62beaf;
  background: rgba(98, 190, 175, .04);
  border: 1px solid rgba(98, 190, 175, .38);
  border-radius: 999px;

  transition:
    background-color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.about-engagements summary::-webkit-details-marker {
  display: none;
}

.about-engagements summary::after {
  content: "+";
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 500;
  transition: transform .25s ease;
}

.about-engagements[open] summary::after {
  transform: rotate(45deg);
}

.about-engagements summary:hover {
  background: rgba(98, 190, 175, .09);
  border-color: rgba(98, 190, 175, .7);
  transform: translateY(-2px);
}

/* Paragraphe déplié */
.about-engagements-content {
  width: 100%;
  max-width: none;
  margin-top: 30px;
  animation: aboutEngagementsOpen .35s cubic-bezier(.22, 1, .36, 1);
}

.about-engagements-content p {
  margin-bottom: 22px;
}

.about-engagements-content p:last-child {
  margin-bottom: 0;
}

@keyframes aboutEngagementsOpen {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cartes équipe légèrement moins massives sur grand écran */
@media screen and (min-width: 1101px) {
  .team-cards {
    width: min(100%, 1380px);
    margin-inline: auto;
    gap: 30px;
  }
}

/* Tablette : on conserve le comportement responsive existant */
@media screen and (max-width: 700px) {
  .about-engagements summary {
    min-height: 50px;
    padding: 0 20px;
    font-size: .95rem;
  }

  .about-engagements-content {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-engagements-content {
    animation: none;
  }
}

/* ==========================================================
   À PROPOS — AJUSTEMENT BOUTON + TYPO ENGAGEMENTS
   ========================================================== */

/* Bouton aligné à gauche avec le reste du texte */
.about-engagements summary {
  margin-left: 0;
  margin-right: 0;
}

/* Même typo que le paragraphe principal de .description */
.about-engagements-content,
.about-engagements-content p {
  font-family: "Roboto", sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.8;
  color: #fff;
  text-align: left;
}

@media screen and (max-width: 900px) {
  .about-engagements-content,
  .about-engagements-content p {
    font-size: 1.05rem;
    line-height: 1.8;
  }
}

/* ==========================================================
   QUENTIN — ILLUSTRATION SURF AU VERSO
   Illustration décorative sur toute la largeur, en bas.
   ========================================================== */

.team-card-back {
  overflow: hidden;
}

.team-card-back > h3,
.team-card-back > .card-description {
  position: relative;
  z-index: 2;
}

.quentin-back-decoration {
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 180px;

  object-fit: cover;
  object-position: center bottom;

  opacity: .35;

  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* Tablette / mobile : garde l'illustration proportionnée. */
@media screen and (max-width: 900px) {
  .quentin-back-decoration {
    height: 155px;
    opacity: .30;
  }
}

/* ==========================================================
   SERVICES ACCUEIL — "VOIR TOUT" TYPE CATALOGUE
   6 cartes seulement sur l'accueil.
   La page complète reste accessible via le lien.
   ========================================================== */

.services-see-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 20px;

  color: #3643BA;
  text-decoration: none;

  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 600;

  transition: color .25s ease;
}

.services-see-all span {
  display: inline-block;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 400;

  transition: transform .25s ease;
}

.services-see-all:hover {
  color: #2D38A7;
}

.services-see-all:hover span {
  transform: translateX(4px);
}

/* Le lien fait partie de l'introduction :
   on conserve ensuite le rythme existant avant les cartes. */
.services-heading .services-see-all {
  margin-bottom: 0;
}

@media screen and (max-width: 780px) {
  .services-see-all {
    margin-top: 16px;
    font-size: .95rem;
  }
}


/* Correction couleur finale — Voir tout */
.services .services-heading a.services-see-all,
.services .services-heading a.services-see-all:visited {
  color: #3643BA;
}

.services .services-heading a.services-see-all:hover,
.services .services-heading a.services-see-all:focus-visible {
  color: #2D38A7;
}

/* ==========================================================
   MOBILE MENU — VERROUILLAGE COMPLET DU SCROLL DE LA PAGE
   Le panneau du menu reste utilisable, mais l'arrière-plan ne défile plus.
   ========================================================== */
@media screen and (max-width: 900px) {
  body.menu-open {
    position: fixed;
    top: calc(-1 * var(--menu-scroll-y, 0px));
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: auto;
  }

  body.menu-open .mobile-menu-panel {
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
}

/* ==========================================================
   À PROPOS DE NOUS — V5
   Copie fidèle de la V4 validée
   ========================================================== */
.about-v5{
  background:#092E38;
  color:#fff;
  padding:clamp(92px,7vw,120px) 0 clamp(92px,7vw,120px);
}

.about-v5-shell{
  width:min(1680px,calc(100% - 96px));
  margin-inline:auto;
}

.about-v5-eyebrow{
  display:block;
  margin-bottom:14px;
  color:#62beaf;
  font-family:"Roboto",sans-serif;
  font-size:.86rem;
  font-weight:700;
  line-height:1.3;
  letter-spacing:1.6px;
  text-transform:uppercase;
}

/* INTRO CENTRÉE */
.about-v5-intro{
  max-width:1180px;
  margin:0 auto clamp(95px,8vw,145px);
  text-align:center;
}

.about-v5-intro h2{
  margin:0;
  font-family:"Roboto",sans-serif;
  font-size:clamp(2.15rem,4vw,3rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.8px;
}

.about-v5-intro em{
  font-style:normal;
  color:#62beaf;
}

.about-v5-intro p{
  max-width:760px;
  margin:24px auto 0;
  color:#b7cfcc;
  font-family:"Roboto",sans-serif;
  font-size:1rem;
  font-weight:400;
  line-height:1.7;
}

/* ÉQUIPE + PHILOSOPHIE */
.about-v5-content{
  display:grid;
  grid-template-columns:minmax(0,2.15fr) minmax(320px,.85fr);
  gap:clamp(70px,6vw,125px);
  align-items:end;
}

.about-v5-team h2,
.about-v5-philosophy h2{
  margin:0;
  font-family:"Roboto",sans-serif;
  font-size:clamp(2.15rem,4vw,3rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.8px;
}

.about-v5-people{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:52px;
}

.about-v5-people article{
  min-width:0;
}

.about-v5-portrait{
  height:clamp(300px,24vw,430px);
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#1a4a4f,#12373b);
  color:#3643BA;
}

.about-v5-people .about-v5-person-shift{
  margin-top:48px;
}

.about-v5-people h3{
  margin:17px 0 0;
  color:#62beaf;
  font-family:"Roboto",sans-serif;
  font-size:1.6rem;
  font-weight:800;
  line-height:1.25;
}

.about-v5-people p{
  margin:6px 0 0;
  color:#b7cfcc;
  font-family:"Roboto",sans-serif;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
}

.about-v5-philosophy{
  align-self:center;
  padding-bottom:0;
}

.about-v5-philosophy h2{
  color:#3643BA;
}

.about-v5-philosophy p{
  margin:24px 0;
  color:#b7cfcc;
  font-family:"Roboto",sans-serif;
  font-size:1rem;
  font-weight:400;
  line-height:1.7;
}



.about-v5-philosophy a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#62beaf;
  text-decoration:none;
  font-family:"Roboto",sans-serif;
  font-size:1rem;
  font-weight:600;
  transition:opacity .2s ease;
}

.about-v5-philosophy a span{
  font-size:1.45em;
  line-height:1;
  transition:transform .2s ease;
}

.about-v5-philosophy a:hover{
  opacity:.78;
}

.about-v5-philosophy a:hover span{
  transform:translateX(4px);
}

@media(max-width:1100px){
  .about-v5-shell{
    width:min(100% - 56px,1680px);
  }

  .about-v5-content{
    grid-template-columns:1fr;
  }

  .about-v5-philosophy{
    max-width:720px;
    padding-top:20px;
  }
}

@media(max-width:760px){
  .about-v5{
    padding:76px 0 88px;
  }

  .about-v5-shell{
    width:calc(100% - 36px);
  }

  .about-v5-intro{
    margin-bottom:72px;
  }

  .about-v5-intro h2{
    font-size:clamp(2rem,9vw,2.55rem);
  }

  .about-v5-intro p{
    font-size:16px;
  }

  .about-v5-people{
    grid-template-columns:1fr;
    gap:38px;
  }

  .about-v5-people .about-v5-person-shift{
    margin-top:0;
  }

  .about-v5-portrait{
    height:420px;
  }
}


.about-v5-portrait img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* +100 ANS — TEST SCROLL */
.about-v5-counter{
  width:100%;
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.about-v5-counter-number{
  display:flex;
  align-items:baseline;
  justify-content:center;
  color:#62beaf;
  font-family:"Roboto",sans-serif;
  font-size:clamp(5rem,10vw,9rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.06em;
}

.about-v5-counter-plus{
  margin-right:.04em;
}

.about-v5-counter-unit{
  margin-left:.18em;
  font-size:.28em;
  letter-spacing:0;
}

.about-v5-counter p{
  margin:20px 0 0;
  color:#fff;
  font-family:"Roboto",sans-serif;
  font-size:1.2rem;
  font-weight:500;
  line-height:1.5;
}

@media(max-width:760px){
  .about-v5-counter{
    min-height:220px;
  }
}


/* ==========================================================
   À PROPOS — RESPONSIVE FINAL
   Desktop / tablette / mobile
   ========================================================== */

/* Grand écran */
@media (min-width: 1101px){
  .about-v5-shell{
    width:min(1680px,calc(100% - 96px));
  }

  .about-v5-intro{
    margin-bottom:clamp(72px,6vw,105px);
  }

  .about-v5-counter{
    min-height:220px;
  }
}

/* Tablette */
@media (min-width: 761px) and (max-width: 1100px){
  .about-v5{
    padding:88px 0 96px;
  }

  .about-v5-shell{
    width:calc(100% - 56px);
  }

  .about-v5-intro{
    max-width:860px;
    margin-bottom:76px;
  }

  .about-v5-intro p{
    max-width:680px;
  }

  .about-v5-counter{
    min-height:200px;
    margin-bottom:60px;
  }

  .about-v5-counter-number{
    font-size:clamp(4.8rem,12vw,7rem);
  }

  .about-v5-content{
    grid-template-columns:1fr;
    gap:72px;
  }

  .about-v5-team{
    width:100%;
  }

  .about-v5-people{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-top:44px;
  }

  .about-v5-portrait{
    height:auto;
    aspect-ratio:3 / 4;
  }

  .about-v5-people .about-v5-person-shift{
    margin-top:36px;
  }

  .about-v5-philosophy{
    width:min(100%,760px);
    max-width:none;
    margin-inline:0;
    padding-top:0;
    text-align:left;
  }

  .about-v5-philosophy .about-v5-eyebrow{
    text-align:left;
  }

  .about-v5-philosophy p{
    max-width:660px;
    margin:24px 0;
  }

  .about-v5-philosophy a{
    justify-content:flex-start;
  }
}

/* Mobile */
@media (max-width:760px){
  .about-v5{
    padding:68px 0 78px;
  }

  .about-v5-shell{
    width:calc(100% - 36px);
  }

  .about-v5-intro{
    max-width:none;
    margin-bottom:54px;
  }

  .about-v5-intro h2{
    font-size:clamp(2rem,9vw,2.55rem);
    line-height:1.07;
  }

  .about-v5-intro p{
    margin-top:20px;
    font-size:.95rem;
    line-height:1.65;
  }

  .about-v5-counter{
    min-height:170px;
    margin-bottom:50px;
  }

  .about-v5-counter-number{
    font-size:clamp(4rem,20vw,5.8rem);
    letter-spacing:-.045em;
  }

  .about-v5-counter-unit{
    font-size:.3em;
  }

  .about-v5-counter p{
    margin-top:14px;
    font-size:1rem;
  }

  .about-v5-content{
    grid-template-columns:1fr;
    gap:64px;
  }

  .about-v5-team h2,
  .about-v5-philosophy h2{
    font-size:clamp(2rem,9vw,2.55rem);
  }

  .about-v5-people{
    grid-template-columns:1fr;
    gap:34px;
    margin-top:36px;
  }

  .about-v5-people article,
  .about-v5-people .about-v5-person-shift{
    margin-top:0;
  }

  .about-v5-portrait{
    width:100%;
    height:auto;
    aspect-ratio:3 / 4;
  }

  .about-v5-people h3{
    margin-top:14px;
    font-size:1.5rem;
  }

  .about-v5-people p{
    font-size:.95rem;
  }

  .about-v5-philosophy{
    width:100%;
    max-width:none;
    padding-top:0;
    text-align:left;
  }

  .about-v5-philosophy p{
    margin:22px 0;
    font-size:.95rem;
    line-height:1.65;
  }

  .about-v5-philosophy a{
    font-size:1rem;
  }
}

/* Très petit mobile */
@media (max-width:420px){
  .about-v5-shell{
    width:calc(100% - 28px);
  }

  small{
    font-size:.78rem;
    letter-spacing:1.35px;
  }

  .about-v5-intro h2,
  .about-v5-team h2,
  .about-v5-philosophy h2{
    font-size:2rem;
  }

  .about-v5-counter-number{
    font-size:3.9rem;
  }
}


/* Vague haute entre Promotions et À propos */
.about-v5{
  position:relative;
  overflow:hidden;
}

.about-v5-decoration{
  position:absolute;
  top:-1px;
  left:0;
  z-index:1;
  display:block;
  width:100%;
  height:clamp(68px,5vw,86px);
  object-fit:fill;
  object-position:center top;
  pointer-events:none;
  user-select:none;
}

.about-v5-shell{
  position:relative;
  z-index:2;
}


/* Correction alignement titre ÉQUIPE */
.about-v5-team > .about-v5-eyebrow,
.about-v5-team > h2 {
  text-align: left;
}


/* Correction alignement bloc NOTRE PHILOSOPHIE */
.about-v5-philosophy,
.about-v5-philosophy .about-v5-eyebrow,
.about-v5-philosophy h2,
.about-v5-philosophy p {
  text-align: left;
}

.about-v5-philosophy a {
  justify-content: flex-start;
}


/* À PROPOS — respiration supplémentaire sous la vague */
.about-v5-intro {
  padding-top: 35px;
}

@media (max-width: 760px) {
  .about-v5-intro {
    padding-top: 28px;
  }
}


/* ==========================================================
   À PROPOS — PROTECTION VISUELLE DES PORTRAITS
   Limite l'enregistrement direct / glisser-déposer.
   ========================================================== */
.about-v5-portrait img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* ==========================================================
   PROMOS — "VOIR TOUT" : MÊME ÉQUILIBRE QUE SERVICES
   ========================================================== */

/* La date reste liée à l'introduction : pas de gros vide après elle. */
.promos-validity {
  margin-bottom: 0;
}

/* "Voir tout" se place sous la date, puis on garde
   la même respiration avant les cartes que dans Services. */
.promos-see-all-row {
  display: block;
  margin-top: 20px;
  margin-bottom: var(--section-content-gap);
  text-align: left;
}

.promos-see-all-row .promos-see-all {
  margin-top: 0;
}

@media screen and (max-width: 780px) {
  .promos-see-all-row {
    margin-top: 16px;
  }
}

/* ==========================================================
   MENU MOBILE — FORCER LE BANDEAU INFO + HEADER VISIBLES
   quand le burger est ouvert, même après avoir scrollé.
   ========================================================== */
@media screen and (max-width: 900px) {
  body.menu-open.mobile-header-floating.mobile-header-hidden .led-info-bar,
  body.menu-open.mobile-header-floating.mobile-header-hidden.mobile-header-switching .led-info-bar,
  body.menu-open.mobile-header-floating.mobile-header-hidden #header,
  body.menu-open.mobile-header-floating.mobile-header-hidden.mobile-header-switching #header {
    transform: translate3d(0, 0, 0);
  }

  body.menu-open .led-info-bar {
    position: fixed;
    top: 0;
    left: 0;
  }

  body.menu-open #header {
    position: fixed;
    top: var(--info-bar-height);
    left: 0;
  }
}



/* ==========================================================
   HEADER DESKTOP — LOGO À FLEUR DU CONTAINER
   ========================================================== */
@media screen and (min-width: 901px) {
  #header .header {
    padding-left: 0;
    padding-right: 18px;
  }

  #header .column_1,
  #header .column_1 a {
    margin-left: 0;
    padding-left: 0;
  }
}


/* ==========================================================
   HEADER DESKTOP — PLUS COMPACT + SÉPARATEUR TYPE McDO
   ========================================================== */
@media screen and (min-width: 901px) {

  /* Séparateur entre Contact et les actions */
  .menu li:nth-child(6)::after{
    content:"";
    width:1px;
    height:24px;
    margin:0 18px;
    background:rgba(4,31,45,.16);
  }

  /* Horaires : plus petit, coins moins arrondis */
  .desktop-hours{
    min-height:40px;
    margin-left:14px;
    padding:6px 12px;
    border-radius:8px;
    gap:10px;
  }

  .desktop-hours p{
    font-size:.72rem;
  }

  .desktop-hours strong{
    font-size:.95rem;
  }

  .desktop-hours i{
    font-size:1.25rem;
  }

  /* Gardes : plus compact + angles moins prononcés */
  .desktop-garde{
    min-height:40px;
    margin-left:10px;
    padding:6px 13px;
    border-radius:8px;
    gap:10px;
  }

  .desktop-garde strong{
    font-size:.95rem;
  }

  .desktop-garde > i{
    font-size:1.25rem;
  }

  /* Météo légèrement resserrée */
  .weather-widget-mini{
    height:40px;
    margin-left:10px;
    padding:0 14px;
    border-radius:12px;
  }
}


/* ==========================================================
   HEADER DESKTOP V2
   - séparateur entre téléphone et itinéraire
   - boutons horaires / gardes plus compacts
   ========================================================== */
@media screen and (min-width: 901px) {

  /* Supprime le séparateur placé après Contact */
  .menu li:nth-child(6)::after{
    display:none;
  }

  /* Séparateur APRÈS le téléphone = entre téléphone et itinéraire */
  .phone-trigger{
    margin-right:18px;
  }

  .phone-trigger::before{
    content:"";
    position:absolute;
    right:-18px;
    top:50%;
    width:1px;
    height:24px;
    background:rgba(4,31,45,.16);
    transform:translateY(-50%);
  }

  /* Laisse un peu d'air après le séparateur */
  .map-menu-item{
    margin-left:18px;
  }

  /* Horaires plus compact */
  .desktop-hours{
    min-height:36px;
    padding:5px 10px;
    border-radius:8px;
    gap:8px;
  }

  .desktop-hours strong{
    font-size:.82rem;
    line-height:1.15;
  }

  .desktop-hours p{
    font-size:.66rem;
  }

  .desktop-hours i{
    font-size:1.1rem;
  }

  /* Bouton gardes plus compact */
  .desktop-garde{
    min-height:36px;
    padding:5px 11px;
    border-radius:8px;
    gap:8px;
  }

  .desktop-garde strong{
    font-size:.82rem;
    line-height:1.15;
  }

  .desktop-garde p{
    font-size:.66rem;
  }

  .desktop-garde > i{
    font-size:1.1rem;
  }
}


/* HEADER V4 — téléphone remis à sa position d'origine,
   séparateur centré dans l'espace AVANT l'itinéraire */
@media screen and (min-width: 901px) {
  .phone-trigger{
    margin-right:18px;
  }

  .phone-trigger::before{
    display:none;
  }

  .map-menu-item{
    position:relative;
    margin-left:18px;
  }

  .map-menu-item::before{
    content:"";
    position:absolute;
    left:-18px;
    top:50%;
    width:1px;
    height:24px;
    background:rgba(4,31,45,.16);
    transform:translateX(-50%) translateY(-50%);
    pointer-events:none;
  }
}


/* HEADER V7 — téléphone et itinéraire à distance égale du trait */
@media screen and (min-width: 901px) {
  .phone-trigger{
    transform:none;
    margin-right:12px;
  }

  .phone-trigger::before{
    display:none;
  }

  .map-menu-item{
    position:relative;
    margin-left:12px;
  }

  .map-menu-item::before{
    content:"";
    position:absolute;
    left:-12px;
    top:50%;
    width:1px;
    height:24px;
    background:rgba(4,31,45,.16);
    transform:translate(-50%,-50%);
    pointer-events:none;
  }
}


/* ==========================================================
   HEADER V8 — CORRECTION À LA SOURCE
   Le .menu li:not(:last-child)::after ajoutait 20px de marge
   de chaque côté après le téléphone.
   On utilise CE séparateur natif pour garantir :
   téléphone — 14px — trait — 14px — itinéraire.
   ========================================================== */
@media screen and (min-width: 901px) {

  .phone-trigger{
    margin:0;
    transform:none;
  }

  .phone-trigger::before{
    display:none;
  }

  .map-menu-item{
    margin:0;
  }

  .map-menu-item::before{
    display:none;
  }

  .menu .phone-menu-item::after{
    content:"";
    display:block;
    width:1px;
    height:24px;
    margin:0 14px;
    background:rgba(4,31,45,.16);
    flex:0 0 1px;
  }
}


/* HEADER V9 — ajoute uniquement de l'espace entre Contact et téléphone */
@media screen and (min-width: 901px) {
  .phone-menu-item{
    margin-left:16px;
  }
}


/* HEADER V10 — plus d'air uniquement entre Contact et téléphone */
@media screen and (min-width: 901px) {
  .phone-menu-item{
    margin-left:28px;
  }
}


/* HEADER V11 — séparateur vertical plus court uniquement */
@media screen and (min-width: 901px) {
  .menu .phone-menu-item::after{
    height:18px;
  }
}


/* ==========================================================
   SOUS-MENU DESKTOP — L'ÉQUIPE
   ========================================================== */
@media screen and (min-width: 901px) {

  .team-submenu-trigger{
    display:inline-flex;
    align-items:center;
    gap:5px;
  }

  .team-submenu-trigger > i{
    font-size:18px;
    transition:transform .2s ease;
  }

  .team-submenu-trigger.is-open{
    color:#62beaf;
  }

  .team-submenu-trigger.is-open::after{
    width:100%;
  }

  .team-submenu-trigger.is-open > i{
    transform:rotate(180deg);
  }

  .team-submenu-panel{
    position:fixed;
    left:0;
    right:0;
    width:100%;
    z-index:10003;

    background:#fff;
    border-top:1px solid rgba(4,31,45,.07);
    box-shadow:0 18px 38px rgba(4,31,45,.10);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);

    transition:
      opacity .18s ease,
      visibility .18s ease,
      transform .18s ease;
  }

  .team-submenu-panel.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .team-submenu-inner{
    width:min(1180px,calc(100% - 80px));
    margin:0 auto;
    padding:34px 0 40px;

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
  }

  .team-submenu-card{
    display:block;
    min-width:0;
    color:#041f2d;
    text-decoration:none;
  }

  .team-submenu-card::before,
  .team-submenu-card::after{
    content:none !important;
    display:none !important;
  }

  .team-submenu-visual{
    display:block;
    width:100%;
    height:180px;
    overflow:hidden;
    background:linear-gradient(135deg,#e7f6f2,#bce8de);
  }

  .team-submenu-visual--demarche{
    background:linear-gradient(135deg,#eef4f3,#cee7e1);
  }

  .team-submenu-visual--engagements{
    background:linear-gradient(135deg,#eef0fb,#d5daf5);
  }

  .team-submenu-title{
    display:block;
    margin-top:15px;

    font-family:"Roboto",sans-serif;
    font-size:1.2rem;
    font-weight:600;
    line-height:1.25;

    color:#041f2d;
    transition:color .18s ease, transform .18s ease;
  }

  .team-submenu-card:hover .team-submenu-title{
    color:#159a83;
    transform:translateX(3px);
  }
}

@media screen and (max-width:900px){
  .team-submenu-panel{
    display:none !important;
  }
}


/* ==========================================================
   MENU — SOUS-MENUS VALIDÉS 29/08/2026
   ========================================================== */

/* Ajustement léger de l'espacement horizontal du menu desktop */
@media (min-width:1351px){
  .desktop-menu .menu li:not(:last-child)::after{
    margin-left:17px !important;
    margin-right:17px !important;
  }

  /* On conserve le séparateur téléphone / itinéraire tel quel */
  .desktop-menu .menu > .phone-menu-item::after{
    margin-left:20px !important;
    margin-right:20px !important;
  }
}

  /* ============================= */
  /* SOUS-MENU CONSEILS SANTÉ */
  /* ============================= */
  .health-submenu-item{
    position:static !important;
    cursor:pointer !important;
  }

  .health-submenu-trigger{
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    position:relative !important;
  }

  .health-submenu-trigger > i{
    font-size:18px !important;
    transition:transform .2s ease !important;
  }

  .health-submenu-item:hover > .health-submenu-trigger,
  .health-submenu-item.is-open > .health-submenu-trigger{
    color:#62beaf !important;
  }

  .health-submenu-item:hover > .health-submenu-trigger > i,
  .health-submenu-item.is-open > .health-submenu-trigger > i{
    transform:rotate(180deg) !important;
  }

  .health-submenu-panel{
    display:block !important;
    position:fixed !important;
    top:var(--team-submenu-top, 126px) !important;
    left:0 !important;
    width:100vw !important;
    height:350px !important;
    overflow:hidden !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    z-index:10003 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .health-submenu-panel.is-open{
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .health-submenu-inner{
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:30px max(40px, calc((100vw - 1180px) / 2)) 34px !important;
    background:#fff !important;
    border-top:1px solid #edf2f1 !important;
    box-shadow:none !important;
    will-change:transform;
  }

  .health-coming-card{
    width:calc((100% - 56px) / 3) !important;
    max-width:none !important;
  }

  .health-coming-visual{
    height:180px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:2px dashed #b8d8d2 !important;
    background:#f8fbfa !important;
    color:#62beaf !important;
  }

  .health-coming-visual > i{
    font-size:2rem !important;
  }

  .health-coming-title{
    display:block !important;
    margin-top:14px !important;
    font-family:"Roboto",sans-serif !important;
    font-size:1.18rem !important;
    font-weight:600 !important;
    color:#041f2d !important;
  }

  .health-submenu-overlay{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:var(--team-submenu-top, 126px) !important;
    bottom:0 !important;
    background:rgba(4,31,45,.22) !important;
    z-index:10002 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    will-change:opacity;
  }

  .health-submenu-overlay.is-open{
    visibility:visible !important;
    pointer-events:auto !important;
  }

/* TEST SOUS-MENU L'ÉQUIPE — autonome, sans JS */
@media (min-width:901px){

  #header{
    z-index:10004 !important;
  }

  .team-submenu-item{
    position:static !important;
  }

  .team-submenu-trigger{
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    position:relative !important;
  }

  .team-submenu-trigger > i{
    font-size:18px !important;
    transition:transform .2s ease !important;
  }

  /* Toute la hauteur réelle du bandeau/header devient interactive */
  .desktop-menu{
    align-self:stretch !important;
  }

  .desktop-menu .menu{
    align-self:stretch !important;
    height:calc(100% + 12px) !important;
    margin-top:-6px !important;
    margin-bottom:-6px !important;
  }

  .desktop-menu .menu > li{
    align-self:stretch !important;
    display:flex !important;
    align-items:stretch !important;
    height:100% !important;
    cursor:pointer !important;
  }

  .desktop-menu .menu > li > a,
  .desktop-menu .menu > li > button{
    display:flex !important;
    align-items:center !important;
    position:relative !important;
    z-index:2 !important;
    cursor:pointer !important;
    height:100% !important;
  }

  /* L’équipe : toute sa colonne sur la hauteur du bandeau déclenche le sous-menu */
  .team-submenu-item{
    cursor:pointer !important;
  }

  /* Trait de rollover : collé à la limite basse, mais à l'intérieur du bandeau */
  .desktop-menu .menu > li > a::after{
    bottom:0 !important;
  }

  .team-submenu-panel{
    display:block !important;
    position:fixed !important;
    top:var(--team-submenu-top, 126px) !important;
    left:0 !important;
    width:100vw !important;
    height:310px !important;

    overflow:hidden !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    z-index:10003 !important;

    visibility:hidden !important;
    pointer-events:none !important;

  }

  .team-submenu-panel.is-open{
    visibility:visible !important;
    pointer-events:auto !important;

  }

  .team-submenu-item:hover > .team-submenu-trigger,
  .team-submenu-item.is-open > .team-submenu-trigger{
    color:#62beaf !important;
  }

  .team-submenu-item:hover > .team-submenu-trigger > i,
  .team-submenu-item.is-open > .team-submenu-trigger > i{
    transform:rotate(180deg) !important;
  }

  .team-submenu-inner{
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:30px max(40px, calc((100vw - 1180px) / 2)) 34px !important;

    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:28px !important;

    background:#fff !important;
    border-top:1px solid #edf2f1 !important;
    box-shadow:none !important;

    will-change:transform;
  }

  .team-submenu-card{
    display:block !important;
    text-decoration:none !important;
    color:#041f2d !important;
  }

  .team-submenu-card{
    transition:opacity .25s ease !important;
  }

  .team-submenu-inner:has(.team-submenu-card:hover) .team-submenu-card:not(:hover){
    opacity:.42 !important;
  }

  .team-submenu-card::before,
  .team-submenu-card::after{
    display:none !important;
    content:none !important;
  }

  .team-submenu-visual{
    display:block !important;
    height:180px !important;
    background:#e9f6f3 !important;
  }

  .team-submenu-card:nth-child(1) .team-submenu-visual{
    background:url("../img/background.jpg") center center / cover no-repeat !important;
  }

  .team-submenu-card:nth-child(2) .team-submenu-visual{
    background-image:url("../img/notre-demarche.jpg") !important;
    background-position:center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
  }

  .team-submenu-card:nth-child(3) .team-submenu-visual{
    background:url("../img/engagement-pharmacie-garde.png") center center / cover no-repeat !important;
  }

  .team-submenu-title{
    display:block !important;
    margin-top:14px !important;
    font-family:"Roboto",sans-serif !important;
    font-size:1.18rem !important;
    font-weight:600 !important;
    color:#041f2d !important;
  }

  .team-submenu-card:hover .team-submenu-title{
    color:#159a83 !important;
  }

  .team-submenu-title{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
  }

  .team-submenu-title > i{
    font-size:1.18em !important;
    color:#159a83 !important;
    transition:transform .22s ease !important;
  }

  .team-submenu-card:hover .team-submenu-title > i.bx-right-arrow-alt{
    transform:translateX(3px) !important;
  }

  .team-submenu-card:hover .team-submenu-title > i.bx-down-arrow-alt{
    transform:translateY(3px) !important;
  }
  .team-submenu-overlay{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:var(--team-submenu-top, 126px) !important;
    bottom:0 !important;

    background:rgba(4,31,45,.22) !important;
    z-index:10002 !important;

    visibility:hidden !important;
    pointer-events:none !important;
    will-change:transform, opacity;
  }

  .team-submenu-overlay.is-open{
    visibility:visible !important;
    pointer-events:auto !important;
  }


  /* Séparateur téléphone / itinéraire : centré exactement entre les deux icônes */
  .desktop-menu .menu > .phone-menu-item::after{
    margin-left:20px !important;
    margin-right:20px !important;
    width:1px !important;
    height:18px !important;
    flex:0 0 1px !important;
    align-self:center !important;
    background:#072028 !important;
  }

}


  /* ============================= */
  /* RESPONSIVE MENU BUREAU / SOUS-MENU */
  /* ============================= */

  /* Écrans intermédiaires : on compacte sans changer la mécanique */
  @media (max-width:1350px) and (min-width:1101px){
    #header .header{
      padding-left:12px !important;
      padding-right:12px !important;
    }

    .desktop-menu .menu li:not(:last-child)::after{
      margin-left:13px !important;
      margin-right:13px !important;
    }

    .desktop-menu .menu > li > a{
      font-size:.92rem !important;
    }

    .desktop-hours,
    .desktop-garde{
      padding-left:8px !important;
      padding-right:8px !important;
    }

    .weather-widget-mini{
      margin-left:8px !important;
    }

    .team-submenu-inner{
      padding-left:28px !important;
      padding-right:28px !important;
      gap:22px !important;
    }
  }

  /* Petit desktop / grande tablette paysage */
  @media (max-width:1100px) and (min-width:901px){
    #header .header{
      padding-left:8px !important;
      padding-right:8px !important;
    }

    #header .column_1 img{
      width:76px !important;
    }

    .desktop-menu .menu li:not(:last-child)::after{
      margin-left:8px !important;
      margin-right:8px !important;
    }

    .desktop-menu .menu > li > a{
      font-size:.82rem !important;
    }

    .desktop-phone-trigger,
    .desktop-map-trigger{
      padding-left:4px !important;
      padding-right:4px !important;
    }

    .desktop-hours,
    .desktop-garde{
      min-height:34px !important;
      padding:4px 7px !important;
      gap:6px !important;
    }

    .desktop-hours strong,
    .desktop-garde strong{
      font-size:.72rem !important;
    }

    .desktop-hours p,
    .desktop-garde p{
      font-size:.60rem !important;
    }

    .weather-widget-mini{
      margin-left:5px !important;
      padding-left:5px !important;
      padding-right:5px !important;
    }

    .team-submenu-panel{
      height:280px !important;
    }

    .team-submenu-inner{
      padding:24px 22px 28px !important;
      gap:18px !important;
    }

    .team-submenu-visual{
      height:158px !important;
    }

    .team-submenu-title{
      margin-top:11px !important;
      font-size:1rem !important;
    }
  }

@media (max-width:900px){

  .mobile-menu-nav .mobile-health-open{
    width:100%;
    border:0;
    background:transparent;
    position:relative !important;
    height:40px !important;
    min-height:40px !important;
    padding:7px 4px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    font-family:"Roboto",sans-serif !important;
    font-size:1.03rem !important;
    font-weight:600 !important;
    line-height:normal !important;
    color:#0f2f33 !important;
    text-align:left;
    cursor:pointer;
  }

  .mobile-menu-nav .mobile-health-open > i{
    font-size:1.55rem;
  }

  .mobile-health-panel{
    position:absolute;
    inset:0;
    z-index:20;
    background:#fff;
    padding:34px 36px 40px;
    overflow-y:auto;
    transform:translateX(100%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .38s cubic-bezier(.22,1,.36,1), visibility 0s linear .38s;
    font-family:"Roboto",sans-serif;
  }

  .mobile-health-panel.is-open{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
    transition:transform .38s cubic-bezier(.22,1,.36,1), visibility 0s;
  }

  .mobile-health-back{
    border:0;
    background:transparent;
    padding:0;
    margin:56px 0 42px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:"Roboto",sans-serif;
    font-size:.95rem;
    font-weight:500;
    color:#041f2d;
    cursor:pointer;
  }

  .mobile-health-back i{
    font-size:1.6rem;
  }

  .mobile-health-heading{
    margin-bottom:36px;
  }

  .mobile-health-heading strong{
    display:block;
    font-family:"Roboto",sans-serif;
    font-size:1.45rem;
    line-height:1.2;
    font-weight:600;
    color:#041f2d;
  }

  .mobile-health-coming{
    width:calc(50% - 7px);
  }

  .mobile-health-coming-visual{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:1.48 / 1;
    border:2px dashed #b8d8d2;
    border-radius:6px;
    box-sizing:border-box;
    background:#f8fbfa;
    color:#62beaf;
  }

  .mobile-health-coming-visual i{
    font-size:1.7rem;
  }

  .mobile-health-coming-title{
    display:block;
    margin-top:10px;
    font-family:"Roboto",sans-serif;
    font-size:1rem;
    line-height:1.25;
    font-weight:500;
    color:#041f2d;
  }

  .mobile-menu-panel.health-level-open > .mobile-menu-top .mobile-menu-close,
  .mobile-menu-panel.health-level-open > .mobile-menu-signature{
    position:relative !important;
    z-index:30 !important;
  }

  .mobile-menu-panel.health-level-open,
  .mobile-menu-panel.team-level-open{
    overflow:hidden !important;
  }

  .mobile-menu-nav .mobile-team-open{
    width:100%;
    border:0;
    background:transparent;
    font-family:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;
    color:inherit;
    text-align:left;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  /* Le bouton L’équipe doit avoir EXACTEMENT la typo des liens du menu mobile */
  .mobile-menu-nav > .mobile-team-open{
    position:relative !important;
    height:40px !important;
    min-height:40px !important;
    padding:7px 4px !important;
    margin:0 !important;
    box-sizing:border-box !important;

    font-family:"Roboto", sans-serif !important;
    font-size:1.03rem !important;
    font-weight:600 !important;
    line-height:normal !important;

    color:#0f2f33 !important;
  }

  .mobile-menu-nav > .mobile-team-open > span{
    display:flex !important;
    align-items:center !important;
    height:100% !important;
  }

  .mobile-menu-nav .mobile-team-open > i{
    font-size:1.55rem;
  }

  .mobile-team-panel{
    position:absolute;
    inset:0;
    z-index:20;
    background:#fff;
    padding:34px 36px 40px;
    overflow-y:auto;
    transform:translateX(100%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .38s cubic-bezier(.22,1,.36,1), visibility 0s linear .38s;
  }

  .mobile-team-panel.is-open{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
    transition:transform .38s cubic-bezier(.22,1,.36,1), visibility 0s;
  }

  .mobile-team-back{
border:0;
    background:transparent;
    padding:0;
    margin:56px 0 42px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font:inherit;
    font-size:1.05rem;
    color:#041f2d;
    cursor:pointer;
  }

  .mobile-team-back i{
    font-size:1.6rem;
  }

  .mobile-team-heading{
    margin-bottom:36px;
  }

  .mobile-team-heading strong{
    display:block;
    font-family:"Roboto", sans-serif;
    font-size:1.45rem;
    line-height:1.2;
    font-weight:600;
    color:#041f2d;
    margin-bottom:14px;
  }

  .mobile-team-heading a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#159a83;
    text-decoration:none;
    font-size:1rem;
  }

  .mobile-team-links{
    display:flex;
    flex-direction:column;
  }

  .mobile-team-links > a{
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border-bottom:1px solid #e8eeec;
    color:#041f2d;
    text-decoration:none;
    font-size:1.05rem;
    font-weight:500;
  }

  .mobile-team-links > a:first-child{
    border-top:1px solid #e8eeec;
  }

  .mobile-team-links > a i{
    font-size:1.45rem;
    color:#159a83;
  }


  .mobile-team-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:28px 14px;
  }

  .mobile-team-card{
    display:block;
    min-width:0;
    color:#041f2d;
    text-decoration:none;
  }

  .mobile-team-card-visual{
    display:block;
    width:100%;
    aspect-ratio:1.48 / 1;
    overflow:hidden;
    border-radius:6px;
    background-color:#e9f6f3;
    background-position:center;
    background-size:cover;
    transition:transform .25s ease;
  }

  /* Emplacements prêts pour les vraies photos */
  .mobile-team-card-visual--equipe{
    background:url("../img/background.jpg") center center / cover no-repeat !important;
  }

  .mobile-team-card-visual--demarche{
    background-image:url("../img/notre-demarche.jpg");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
  }

  .mobile-team-card-visual--engagements{
    background:url("../img/engagement-pharmacie-garde.png") center center / cover no-repeat !important;
  }

  .mobile-team-card-title{
    display:block;
    margin-top:10px;
    font-size:1rem;
    line-height:1.25;
    font-weight:500;
    color:#041f2d;
  }

  .mobile-team-card:active .mobile-team-card-title{
    color:#159a83;
  }

  .mobile-team-card-title{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
  }

  .mobile-team-card-title > i{
    flex:0 0 auto;
    font-size:1.18em !important;
    color:#159a83 !important;
  }


  /* Charte typographique du site — sous-menu mobile L'équipe */
  .mobile-team-panel,
  .mobile-team-panel button,
  .mobile-team-panel a,
  .mobile-team-panel span,
  .mobile-team-panel strong{
    font-family:"Roboto", sans-serif !important;
  }

  .mobile-team-back{
    font-size:1.03rem !important;
    font-weight:500 !important;
    color:#041f2d !important;
  }

  .mobile-team-heading strong{
    font-family:"Roboto", sans-serif !important;
    font-size:1.45rem !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    color:#041f2d !important;
  }

  .mobile-team-heading a{
    font-size:1rem !important;
    font-weight:500 !important;
  }

  .mobile-team-card-title{
    font-family:"Roboto", sans-serif !important;
    font-size:1rem !important;
    font-weight:500 !important;
    line-height:1.25 !important;
    color:#041f2d !important;
  }


  /* Niveau L'équipe :
     on réutilise réellement la croix et le logo du menu principal.
     Ils gardent donc exactement leur taille ET leur emplacement d'origine. */
  .mobile-menu-panel.team-level-open > .mobile-menu-top .mobile-menu-close{
    position:relative !important;
    z-index:30 !important;
  }

  .mobile-menu-panel.team-level-open > .mobile-menu-signature{
    position:relative !important;
    z-index:30 !important;
  }

  @media (max-width:420px){
    .mobile-team-panel{
      padding-left:22px;
      padding-right:22px;
    }

    .mobile-team-grid{
      gap:24px 12px;
    }

    .mobile-team-card-title{
      font-size:.94rem;
    }
  }

}


/* Menu desktop — pas de trait sous les icônes téléphone / itinéraire */
.phone-trigger::after,
.map-trigger::after{
  display:none !important;
}

/* ==========================================================
   MENU MOBILE — TYPOGRAPHIE STABLE SUR NAVIGATEURS MOBILES
   Empêche le redimensionnement automatique du texte.
   ========================================================== */
@media screen and (max-width: 900px) {
  .mobile-menu-panel {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
}

/* ==========================================================
   MENU MOBILE — VERSION COMPACTE SUR TOUS LES TÉLÉPHONES
   Reprend le rendu auparavant réservé aux écrans <= 700px de haut.
   ========================================================== */
@media screen and (max-width: 900px) {
  .mobile-menu-panel {
    padding-top: 14px;
  }

  .mobile-menu-welcome > strong {
    font-size: 1.32rem;
  }

  .mobile-menu-nav {
    margin-top: 17px;
    gap: 0;
  }

  .mobile-menu-nav a,
  .mobile-menu-nav > .mobile-health-open,
  .mobile-menu-nav > .mobile-team-open {
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 4px !important;
    font-size: .96rem !important;
  }

  .mobile-menu-actions {
    margin-top: 9px;
  }

  .mobile-menu-actions .round-action {
    width: 48px;
    height: 48px;
  }

  .mobile-menu-cards {
    margin-top: 9px;
    gap: 8px;
  }
}

/* ==========================================================
   SOUS-MENU CONSEILS SANTÉ — LIEN "VOIR TOUT"
   ========================================================== */

.health-submenu-see-all{
  display:flex;
  width:calc((100% - 56px) / 3);
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin-top:18px;
  font-family:"Roboto",sans-serif;
  font-size:1rem;
  font-weight:600;
  line-height:1.25;
  color:#394B9A;
  text-decoration:none;
  transition:color .18s ease, transform .18s ease;
}

.health-submenu-see-all i{
  font-size:1.55rem;
  line-height:1;
  color:currentColor;
  transition:transform .18s ease;
}

.health-submenu-see-all:hover{
  color:#4B5EB0;
}

.health-submenu-see-all:hover i{
  transform:translateX(4px);
}

@media screen and (max-width:900px){
  .mobile-health-see-all{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
    font-family:"Roboto",sans-serif;
    font-size:1.03rem;
    font-weight:600;
    line-height:1.25;
    color:#394B9A;
    text-decoration:none;
  }

  .mobile-health-see-all i{
    font-size:1.55rem;
    line-height:1;
    color:currentColor;
  }
}

/* ==========================================================
   SOUS-MENU CONSEILS SANTÉ — TITRE ALIGNÉ À GAUCHE
   Même principe que les cartes du sous-menu "L'équipe".
   ========================================================== */
@media (min-width: 901px){
  .health-coming-card .health-coming-title{
    display:block;
    width:100%;
    margin-top:15px;
    text-align:left;
  }
}

/* ==========================================================
   HERO — H1 SLIDE "NOTRE PRIORITÉ"
   Le H1 reste un H1 pour la structure SEO, mais reprend
   exceptionnellement le rendu visuel des H2 du slider.
   ========================================================== */
.hero-slide-default .hero-content h1 {
  font-family: "Roboto", sans-serif;
  font-size: calc(5rem + 1.5px);
  line-height: 1.05;
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: -2px;
}

@media screen and (max-width: 900px) {
  .hero-slide-default .hero-content h1 {
    font-size: 3rem;
  }
}

/* ==========================================================
   PROMOS V2 — MOBILE PROPRE / HAUTEUR SELON LE CONTENU
   2026-09-08
   - repart du CSS serveur validé
   - 48 % texte / 52 % photo
   - titre produit : 2 lignes maximum
   - description : hauteur automatique
   - carte : hauteur minimale compacte, puis grandit seulement
     si le texte ou la photo en ont besoin
   ========================================================== */
@media screen and (max-width: 750px) {

  /* Les cartes du slider ne s'étirent pas à la hauteur de la plus grande. */
  .promos-track {
    align-items: flex-start;
  }

  .promos-track > .promo-card {
    align-self: flex-start;
  }

  .promo-v2-card {
    height: auto;
    min-height: 0;

    /* Zone contenu + remise + bouton */
    grid-template-rows:
      auto
      72px
      46px;

    row-gap: 8px;
    padding: 10px;
    align-content: start;
  }

  /* Zone principale :
     une base de 175 px pour garder une belle carte courte,
     mais elle grandit naturellement avec les textes longs. */
  .promo-v2-main {
    grid-row: 1;

    grid-template-columns:
      minmax(0, 48%)
      minmax(0, 52%);

    min-height: 175px;
    height: auto;
    align-items: start;
    overflow: visible;
  }

  .promo-v2-copy {
    height: auto;
    min-height: 0;

    grid-template-rows:
      auto
      auto
      13px
      auto;

    align-content: start;
    padding: 0 6px 0 1px;

    overflow: visible;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .promo-v2-copy h3,
  .promo-v2-copy h4,
  .promo-v2-copy p {
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Nom du produit : jamais plus de 2 lignes. */
  .promo-v2-copy h4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;

    overflow: hidden;
    max-height: none;
  }

  /* Description : aucune coupure ni hauteur forcée. */
  .promo-v2-copy p {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  /* La photo garde plus de la moitié de la largeur.
     Elle ne force pas une carte inutilement géante. */
  .promo-v2-image,
  .promo-v2-vertical .promo-v2-image,
  .promo-v2-horizontal .promo-v2-image {
    min-height: 0;
    height: auto;
    align-self: stretch;
    padding: 4px;
    overflow: hidden;
  }

  .promo-v2-image img,
  .promo-v2-vertical .promo-v2-image img,
  .promo-v2-horizontal .promo-v2-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 190px;
    object-fit: contain;
    object-position: center;
  }

  /* Remise et bouton suivent immédiatement le contenu. */
  .promo-v2-offer {
    grid-row: 2;
    height: 72px;
    min-height: 72px;
  }

  .promo-v2-btn {
    grid-row: 3;
    height: 46px;
    min-height: 46px;
  }
}

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

  .promo-v2-card {
    grid-template-rows:
      auto
      68px
      44px;

    row-gap: 7px;
    padding: 9px;
  }

  .promo-v2-main {
    grid-template-columns:
      minmax(0, 47%)
      minmax(0, 53%);

    min-height: 165px;
  }

  .promo-v2-copy {
    grid-template-rows:
      auto
      auto
      12px
      auto;
  }

  .promo-v2-image img,
  .promo-v2-vertical .promo-v2-image img,
  .promo-v2-horizontal .promo-v2-image img {
    max-height: 180px;
  }

  .promo-v2-offer {
    height: 68px;
    min-height: 68px;
  }

  .promo-v2-btn {
    height: 44px;
    min-height: 44px;
  }
}

/* ==========================================================
   PROMOS V2 — REMISE MOBILE ADAPTATIVE
   Le fond blanc s'ajuste à la largeur réelle du contenu :
   2 €, 12,9 €, 20 %, etc.
   ========================================================== */
@media screen and (max-width: 750px) {
  .promo-v2-offer {
    width: fit-content;
    min-width: 0;
    max-width: 100%;

    grid-template-columns: 40px max-content;
    column-gap: 10px;

    padding: 8px 12px;
  }

  .promo-v2-offer > div {
    width: max-content;
    min-width: 0;
  }

  .promo-v2-offer > div > span,
  .promo-v2-offer strong {
    white-space: nowrap;
  }
}

@media screen and (max-width: 390px) {
  .promo-v2-offer {
    width: fit-content;
    min-width: 0;
    max-width: 100%;

    grid-template-columns: 40px max-content;
    column-gap: 9px;

    padding-inline: 10px;
  }
}

/* ==========================================================
   PROMOS V2 — ESPACEMENTS ÉQUILIBRÉS
   L'espace avant la remise est porté par la zone principale
   afin de conserver le gap naturel entre remise et bouton.
   ========================================================== */
.promo-v2-main {
  margin-bottom: 14px;
}

@media screen and (max-width: 750px) {
  .promo-v2-main {
    margin-bottom: 12px;
  }

  .promo-v2-offer {
    margin-top: 0;
    margin-bottom: 0;
  }
}




/* ==========================================================
   MENU MOBILE — SCROLL VERTICAL DRAGGABLE V8
   - Le contenu ne se compresse plus.
   - Le panneau défile réellement.
   - Une barre visible à droite peut être déplacée au pouce.
   ========================================================== */
@media screen and (max-width: 900px) {
  .mobile-menu-panel {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mobile-menu-panel::-webkit-scrollbar {
    display: none;
  }

  /* Empêche le flex du panneau de tasser les blocs pour tout faire rentrer. */
  .mobile-menu-panel > .mobile-menu-top,
  .mobile-menu-panel > .mobile-menu-nav,
  .mobile-menu-panel > .mobile-menu-section-separator,
  .mobile-menu-panel > .mobile-menu-section-title,
  .mobile-menu-panel > .mobile-menu-actions,
  .mobile-menu-panel > .mobile-menu-cards,
  .mobile-menu-panel > .mobile-menu-signature {
    flex: 0 0 auto;
  }

  .mobile-menu-signature {
    margin-top: 22px;
    margin-bottom: 18px;
    padding-top: 10px;
  }

  .mobile-menu-scrollbar {
    position: fixed;
    top: calc(var(--mobile-menu-info-height) + 14px);
    right: 5px;
    bottom: 14px;
    z-index: 10014;

    width: 8px;
    display: none;

    border-radius: 999px;
    background: rgba(15, 47, 51, .08);

    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .mobile-menu-panel.active ~ .mobile-menu-scrollbar {
    display: block;
  }

  .mobile-menu-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 1px;

    width: 6px;
    min-height: 44px;

    border-radius: 999px;
    background: rgba(21, 154, 131, .72);
    box-shadow: 0 2px 8px rgba(4, 31, 45, .14);

    cursor: grab;
    touch-action: none;
  }

  .mobile-menu-scrollbar-thumb:active {
    cursor: grabbing;
    background: rgba(21, 154, 131, .92);
  }
}




/* ==========================================================
   MENU MOBILE — CORRECTION TACTILE V10
   Le BODY reste verrouillé visuellement, mais n'interdit plus
   les gestes tactiles du panneau scrollable.
   ========================================================== */
@media screen and (max-width: 900px) {
  body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: auto;
  }

  body.menu-open .mobile-menu-panel {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .menu-overlay {
    touch-action: none;
  }
}




/* ==========================================================
   MENU MOBILE — BARRE VERTICALE DÉCALÉE V11
   Crée un couloir à droite pour que la barre verticale
   ne touche plus visuellement le contenu.
   ========================================================== */
@media screen and (max-width: 900px) {
  body.menu-open .mobile-menu-panel,
  .mobile-menu-panel.active {
    padding-right: 22px;
    box-sizing: border-box;
  }

  .mobile-menu-scrollbar {
    right: 8px;
    width: 6px;
    background: rgba(15, 47, 51, .06);
  }

  .mobile-menu-scrollbar-thumb {
    left: 0;
    width: 6px;
  }
}




/* ==========================================================
   MENU MOBILE — FULL WIDTH V12 CORRIGÉ
   Inspiration menu pleine largeur type McDonald's.
   ========================================================== */
@media screen and (max-width: 900px) {
  body.menu-open {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: auto;
  }

  .menu-overlay,
  .menu-overlay.active {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.menu-open .mobile-menu-panel,
  .mobile-menu-panel.active {
    top: var(--mobile-menu-info-height);
    left: 0;
    right: 0;
    bottom: 0;

    width: 100vw;
    max-width: 100vw;
    height: calc(100dvh - var(--mobile-menu-info-height));

    margin: 0;
    padding: 24px 34px 28px 24px;

    border-radius: 0;
    box-shadow: none;

    background: rgba(255, 255, 255, .985);

    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu-top,
  .mobile-menu-nav,
  .mobile-menu-section-separator,
  .mobile-menu-section-title,
  .mobile-menu-actions,
  .mobile-menu-cards,
  .mobile-menu-signature {
    width: 100%;
    max-width: 100%;
  }

  .mobile-menu-top {
    margin-bottom: 14px;
  }

  .mobile-menu-nav {
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 18px;
  }

  .mobile-menu-nav a,
  .mobile-menu-nav > .mobile-health-open,
  .mobile-menu-nav > .mobile-team-open {
    min-height: 50px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .mobile-menu-section-separator {
    margin-top: 12px;
  }

  .mobile-menu-actions {
    margin-top: 6px;
    margin-bottom: 18px;
  }

  .mobile-menu-cards {
    margin-top: 6px;
  }

  .mobile-menu-signature {
    margin-top: 26px;
    margin-bottom: 12px;
    padding-top: 12px;
    padding-bottom: 18px;
  }

  .mobile-menu-scrollbar {
    top: calc(var(--mobile-menu-info-height) + 18px);
    right: 10px;
    bottom: 18px;

    width: 6px;
    background: rgba(15, 47, 51, .07);
  }

  .mobile-menu-scrollbar-thumb {
    left: 0;
    width: 6px;
  }
}




/* ==========================================================
   MENU MOBILE — V13 SCROLL FLUIDE + TITRES ALLÉGÉS
   Le scroll tactile est laissé entièrement au navigateur :
   pas de touchmove JS manuel, donc inertie naturelle.
   ========================================================== */
@media screen and (max-width: 900px) {
  body.menu-open .mobile-menu-panel,
  .mobile-menu-panel.active {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
  }

  .mobile-menu-section-gap {
    width: 100%;
    flex: 0 0 auto;
  }

  .mobile-menu-section-gap--quick {
    height: 24px;
  }

  .mobile-menu-section-gap--practical {
    height: 28px;
    margin-top: 10px;
    border-top: 1px solid rgba(4, 31, 45, .10);
  }

  .mobile-menu-actions {
    margin-top: 0;
    margin-bottom: 18px;
  }

  .mobile-menu-cards {
    margin-top: 0;
  }
}




/* ==========================================================
   MENU MOBILE — V14 MENU INDÉPENDANT DU SITE
   Le menu reste fixe et possède son propre scroll.
   Le body n'est plus verrouillé.
   ========================================================== */
@media screen and (max-width: 900px) {
  body.menu-open {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    overflow: visible;
    overscroll-behavior: auto;
    touch-action: auto;
  }

  body.menu-open .mobile-menu-panel,
  .mobile-menu-panel.active {
    position: fixed;

    top: var(--mobile-menu-info-height);
    left: 0;
    right: 0;
    bottom: 0;

    width: 100vw;
    max-width: 100vw;
    height: calc(100dvh - var(--mobile-menu-info-height));

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;

    transform: none;
  }

  .mobile-menu-panel.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .menu-overlay,
  .menu-overlay.active {
    pointer-events: none;
  }
}




/* ==========================================================
   MENU MOBILE — V15 SCROLL INTERNE RÉEL
   Le document derrière ne défile pas et sa scrollbar disparaît.
   Seul le panneau du menu possède le scroll vertical.
   ========================================================== */
@media screen and (max-width: 900px) {
  html.menu-open-root,
  body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.menu-open {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    touch-action: auto;
  }

  body.menu-open .mobile-menu-panel,
  .mobile-menu-panel.active {
    position: fixed;

    top: var(--mobile-menu-info-height);
    left: 0;
    right: 0;
    bottom: 0;

    width: 100vw;
    max-width: 100vw;
    height: calc(100dvh - var(--mobile-menu-info-height));

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;

    pointer-events: auto;
  }

  .menu-overlay,
  .menu-overlay.active {
    pointer-events: none;
  }
}




/* ==========================================================
   MENU MOBILE — V16B SOUS-MENUS SANS BARRE VISUELLE
   Aucun JS ajouté : on garde la V15 stable.
   Les sous-menus restent scrollables si besoin, mais la barre
   verticale personnalisée est masquée.
   ========================================================== */
@media screen and (max-width: 900px) {
  .mobile-menu-panel.health-level-open ~ .mobile-menu-scrollbar,
  .mobile-menu-panel.team-level-open ~ .mobile-menu-scrollbar {
    display: none;
  }

  .mobile-menu-panel.health-level-open,
  .mobile-menu-panel.team-level-open {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}




/* ==========================================================
   MENU MOBILE — V17 RETOUR BAS DROITE
   Même logique visuelle que le bouton Retour des articles :
   petit bouton flottant en bas à droite.
   ========================================================== */
@media screen and (max-width: 900px) {
  .mobile-health-panel,
  .mobile-team-panel {
    padding-bottom: calc(105px + env(safe-area-inset-bottom));
  }

  .mobile-menu-panel .mobile-health-panel > .mobile-health-back,
  .mobile-menu-panel .mobile-team-panel > .mobile-team-back {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 45;

    width: auto;
    max-width: none;
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    margin: 0;
    padding: 10px 15px;

    border: 1px solid rgba(54, 67, 186, .20);
    border-radius: 999px;

    background: rgba(255, 255, 255, .96);
    color: #3643BA;

    box-shadow: 0 6px 20px rgba(4, 31, 45, .13);

    font-family: "Roboto", Arial, sans-serif;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    transition:
      transform .18s ease,
      box-shadow .18s ease,
      background .18s ease;
  }

  .mobile-menu-panel .mobile-health-panel > .mobile-health-back i,
  .mobile-menu-panel .mobile-team-panel > .mobile-team-back i {
    display: none;
  }

  .mobile-menu-panel .mobile-health-panel > .mobile-health-back span,
  .mobile-menu-panel .mobile-team-panel > .mobile-team-back span {
    display: inline-flex;
    align-items: center;
    color: #3643BA;
  }

  .mobile-menu-panel .mobile-health-panel > .mobile-health-back span::before,
  .mobile-menu-panel .mobile-team-panel > .mobile-team-back span::before {
    content: "‹";
    margin-right: 5px;
    font-size: 1.28rem;
    font-weight: 500;
    line-height: .8;
  }

  .mobile-menu-panel .mobile-health-panel > .mobile-health-back:active,
  .mobile-menu-panel .mobile-team-panel > .mobile-team-back:active {
    transform: scale(.96);
  }
}




/* ==========================================================
   POPUPS MOBILE — V18 RESTAURATION DU FLOU D’ARRIÈRE-PLAN
   Le menu plein écran reste sans flou.
   Le flou revient uniquement lorsqu'une popup est ouverte.
   ========================================================== */
@media screen and (max-width: 900px) {
  body.popup-open .menu-overlay,
  body.popup-open .menu-overlay.active {
    background: rgba(4, 31, 45, .28);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    pointer-events: auto;
  }
}

/* ==========================================================
   PROMOS V2 — PRODUITS VERTICAUX : CENTRAGE + POSITION BASSE
   Correction finale ciblée, sans modifier les produits horizontaux.
   ========================================================== */
.promo-v2-vertical .promo-v2-image{
  justify-content:center;
  align-items:center;
  padding-right:0;
  overflow:visible;
}

.promo-v2-vertical .promo-v2-image img{
  position:relative;
  top:38px;
  margin-left:auto;
  margin-right:auto;
  transform-origin:center center;
}

/* Tablette */
@media screen and (max-width:1200px) and (min-width:751px){
  .promo-v2-vertical .promo-v2-image img{
    top:32px;
  }
}

/* Mobile */
@media screen and (max-width:750px){
  .promo-v2-vertical .promo-v2-image{
    justify-content:center;
    align-items:center;
    padding-left:4px;
    padding-right:4px;
    overflow:visible;
  }

  .promo-v2-vertical .promo-v2-image img{
    top:22px;
  }
}

/* ==========================================================
   ACCUEIL — PROMOS : PHOTOS TRÈS LÉGÈREMENT PLUS PETITES
   Réduction discrète sans changer les positions validées.
   ========================================================== */
.promos .promo-v2-image img,
.promos .promo-v2-vertical .promo-v2-image img,
.promos .promo-v2-horizontal .promo-v2-image img{
  transform:scale(1.10);
}

@media screen and (max-width:750px){
  .promos .promo-v2-image img,
  .promos .promo-v2-vertical .promo-v2-image img,
  .promos .promo-v2-horizontal .promo-v2-image img{
    transform:scale(1.08);
  }
}

/* ==========================================================
   SOUS-MENU CONSEILS SANTÉ — FOCUS AU SURVOL
   Même effet que le sous-menu "L'équipe".
   ========================================================== */
@media screen and (min-width: 901px){
  .health-menu-article-card{
    transition:opacity .25s ease !important;
  }

  .health-menu-articles:has(.health-menu-article-card:hover) .health-menu-article-card{
    opacity:.42 !important;
  }

  .health-menu-articles:has(.health-menu-article-card:hover) .health-menu-article-card:hover{
    opacity:1 !important;
  }
}


/* ==========================================================
   HERO — INDICATEURS : ZONE SÛRE SOUS LE CTA
   Sur desktop, la position verticale suit la hauteur d'écran
   afin d'éviter que les dots remontent dans le bouton CTA.
   ========================================================== */
@media screen and (min-width: 901px) {
  .hero-dots {
    bottom: clamp(28px, 5.2vh, 56px);
  }
}

/* Écrans desktop peu hauts : on libère encore un peu d'espace. */
@media screen and (min-width: 901px) and (max-height: 720px) {
  .hero-dots {
    bottom: 24px;
  }
}