@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

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


* {
  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: #0f2f33;

  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: 150px;
  height: auto;

  object-fit: contain;

  padding-left: 60px;
}

/* ============================= */
/* 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: 30px;

  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: 430px;
  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:410px;
  margin:0;
}

.map-card-popup .itineraire-image{
  height:150px;
}

/* 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:410px;
    margin:0;
}

.phone-popup-card .phone-image{
    height:150px;
}

/* 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: 430px;
  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;
}

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

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

  body {
    padding-top: 84px;
  }

  #header .header {
    padding: 4px 20px;
    min-height: 48px;
  }

  #header .column_1 img {
    width: 88px;
    padding-left: 0;
  }

  .desktop-hours,
  .desktop-garde {
    display: none;
  }

  .mobile-hours,
  .mobile-garde {
    display: flex;
  }

  .burger-btn {
    display: block;
  }

  #header .column_2 {
    position: fixed;

    top: 0;
    right: -100%;

    width: 80%;
    max-width: 340px;

    height: calc(100vh - 35px);

    padding: 120px 40px 0;

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

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

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow-y: auto;

    transition: right 0.35s ease;

    box-shadow:
      -10px 0 30px rgba(0,0,0,0.1);

    z-index: 10006;
  }

  #header .column_2.active {
    right: 0;
  }

  .menu {
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
  }

  .menu li {
    width: 100%;
  }

  .menu li::after {
    display: none;
  }

  /* ============================= */
/* ICÔNES MOBILE CENTRÉES */
/* ============================= */

.menu li:nth-last-child(2),
.menu .map-menu-item {
  width: 100%;
  display: block;
}

.menu li:nth-last-child(2) a,
.menu .map-menu-item .map-trigger {
  width: 100%;
  height: 92px;

  padding: 0;

  display: grid;
  place-items: center;

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

.menu li:nth-last-child(2) a i,
.menu .map-menu-item .map-trigger i {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;

  font-size: 30px;

  transform: none;
}

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

/* Icône localisation mobile */
.menu .map-menu-item {
  width: 100%;
}

.menu .map-menu-item .map-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 18px 0;

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

  .menu a {
    width: 100%;

    justify-content: flex-start;

    padding: 18px 0;

    font-size: 1.15rem;

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

  .menu a::after {
    display: none;
  }

  /* MOBILE HOURS */

  .mobile-hours {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    width: calc(100% + 80px);
    height: 130px;

    margin: auto -40px 0;
    padding: 40px;

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

    color: #fff;
  }

  .mobile-hours i {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 2.2rem;

    line-height: 1;

    color: #fff;

    margin: 0;
    padding: 0;
  }

  .mobile-hours div {
    display: flex;
    flex-direction: column;
    justify-content: center;

    margin: 0;
    padding: 0;
  }

  .mobile-hours p,
  .mobile-hours strong {
    margin: 0;
    padding: 0;

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

    line-height: 1.15;

    color: #fff;
  }

  .mobile-hours p {
    font-size: .86rem;
    font-weight: 400;

    margin-bottom: 8px;
  }

  .mobile-hours strong {
    font-size: 1.15rem;
    font-weight: 700;
  }

  /* POPUP MAP MOBILE */

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

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

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

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

  .map-frame {
    height: 240px;
  }

}

/* ============================= */
/* 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, #3f2b82, #7657dc);
  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 #ded7f7;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:#6549c7;transition:color .3s,transform .3s}
.garde-popup-wrapper .garde-close-modern:hover{background:#6549c7;border-color:#6549c7;transform:scale(1.08)}
.garde-popup-wrapper .garde-close-modern:hover i{color:#fff;transform:rotate(90deg)}

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

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

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

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

/* SLIDE SUMMER */

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

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

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

  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.62) 0%,
      rgba(255,255,255,0.32) 45%,
      rgba(255,255,255,0.06) 100%
    );
}

/* CONTENT */

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

  height: 70vh;

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

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

  text-align: left;
}

.hero-content h1 {
  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 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: 95px;

  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: 70vh;
  }

  .hero-content {
    height: 70vh;

    max-width: 100%;

    padding: 40px 24px;
  }

  .hero-content h1 {
    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: 65px;
  }

  .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 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;
}

/* CARD FLIP */

.service-item {
  position: relative;

  min-height: 465px;

  background: transparent;

  border-radius: 21px;

  perspective: 1200px;
}

.service-card-inner {
  position: relative;

  width: 100%;
  height: 100%;
  min-height: 530px;

  transform-style: preserve-3d;

  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-item.is-flipped .service-card-inner {
  transform: rotateY(180deg);
}

.service-card-face {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;

  background: #fff;

  border-radius: 21px;

  overflow: hidden;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  box-shadow: 0 8px 24px rgba(4,31,45,0.025);
}

.service-card-front {
  z-index: 2;
}

.service-card-back {
  transform: rotateY(180deg);

  padding: 55px 0 38px;

  overflow-y: auto;
}

.service-item:hover .service-card-front {
  transform: translateY(-5px);

  box-shadow: 0 12px 30px rgba(4,31,45,0.045);
}

.service-card-front,
.service-card-back {
  transition: 0.35s ease;
}

/* IMAGE */

.service-image {
  width: 100%;
  height: 190px;

  overflow: hidden;

  flex: 0 0 calc((100% - 72px) / 4);
  min-width: calc((100% - 72px) / 4);
}

.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-card-back h3 {
  margin-top: 0;
}

.service-line {
  display: block;

  width: 56px;
  height: 4px;

  margin: 0 auto 20px;

  border-radius: 50px;

  background: #20b191;
}

/* TEXTE */

.service-item p {
  max-width: 84%;
  margin: 0 auto 26px;

  text-align: center;

  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.72;

  color: #425761;
}

.service-card-front p {
  max-width: 84%;
  margin: 0 auto 26px;

  text-align: center;

  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.72;

  color: #425761;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;

  overflow: hidden;
  text-overflow: ellipsis;
}
.service-card-back p {
  max-height: none;
  overflow: visible;
}

/* LINK */

.service-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin: auto auto 24px;

  text-decoration: none;

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

  color: #18a88a;

  border: none;
  outline: none;

  transition: color 0.3s ease;
}

.service-link i {
  font-size: 1.1rem;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-link:hover i {
  transform: translateX(4px);
}

.service-back-link {
  margin-top: auto;
}

/* 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: 465px;
  }

  .service-image {
    height: 220px;
  }

  .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: #0f2f33;
  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: 170px;
  }
}

/* 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: 170px;
  }
}

@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-open):not(.is-loading):not(.is-success) .contact-card-content {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.contact-ordonnance-card:not(.is-open):not(.is-loading):not(.is-success) .ordonnance-slider {
  height: 100%;
  align-items: stretch;
}

.contact-ordonnance-card:not(.is-open):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-open):not(.is-loading):not(.is-success) .contact-card-arrow-wrapper {
  margin-top: auto;
}

.contact-ordonnance-card:not(.is-open):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-open):not(.is-loading):not(.is-success) {
    height: 430px;
    min-height: 430px;
  }

  .contact-ordonnance-card:not(.is-open):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) {
  .service-link i,
  .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;
  }

  .service-link:hover i,
  .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;
  }
}


/* ==========================================================
   MOBILE : Téléphone + Itinéraire sur une seule ligne
   ========================================================== */
@media screen and (max-width: 900px) {

  .menu{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start;
  }

  .menu > li:nth-child(-n+4){
    grid-column:1 / -1;
  }

  .phone-menu-item,
  .map-menu-item{
    width:100%;
  }

  .phone-trigger,
  .map-trigger{
    width:100%;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 !important;
    border-bottom:1px solid rgba(0,0,0,.08);
  }

  .phone-trigger i,
  .map-trigger i{
    font-size:30px;
    margin:0;
  }

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

  .phone-menu-item{
    border-right:1px solid rgba(0,0,0,.08);
  }
}


/* ==========================================================
   CORRECTION ALIGNEMENT DES DEUX ICÔNES MOBILE
   ========================================================== */
@media screen and (max-width: 900px) {

  #header .menu > .phone-menu-item,
  #header .menu > .map-menu-item {
    width: 100%;
    margin: 0;
    padding: 0;
    align-self: stretch;
  }

  #header .menu > .phone-menu-item {
    grid-column: 1;
  }

  #header .menu > .map-menu-item {
    grid-column: 2;
  }

  #header .menu > .phone-menu-item .phone-trigger,
  #header .menu > .map-menu-item .map-trigger {
    width: 100%;
    height: 72px;
    min-height: 72px;

    margin: 0;
    padding: 0;

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

    border-bottom: 1px solid rgba(0,0,0,.08);
    box-sizing: border-box;
  }

  #header .menu > .phone-menu-item .phone-trigger {
    border-right: 1px solid rgba(0,0,0,.08);
  }

  #header .menu > .map-menu-item .map-trigger {
    border-right: 0;
  }

  #header .menu > .phone-menu-item .phone-trigger i,
  #header .menu > .map-menu-item .map-trigger i {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
    transform: none;
  }
}


/* ==========================================================
   MENU MOBILE FIXE — CORRECTION PROPRE
   Le panneau reste caché tant qu'il n'a pas la classe .active
   ========================================================== */
@media screen and (max-width: 900px) {

  /* ÉTAT FERMÉ */
  #header .column_2 {
    position: fixed;
    top: 44px;
    right: -100%;

    width: min(84vw, 340px);
    max-width: 340px;

    height: calc(100vh - 44px);
    height: calc(100dvh - 44px);

    padding: 68px 22px 0;

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

    overflow: hidden;

    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition: right .35s ease;
  }

  /* ÉTAT OUVERT */
  #header .column_2.active {
    right: 0;
  }

  body.menu-open {
    overflow: hidden;
  }

  /* Un seul bouton Garde sur mobile */
  #header .desktop-garde {
    display: none;
  }

  #header .mobile-garde {
    display: flex;
  }

  /* Liens principaux plus compacts */
  #header .column_2 .menu > li:nth-child(-n + 4) > a {
    min-height: 44px;
    padding: 9px 0;
    font-size: 1rem;
    line-height: 1.15;
  }

  /* Ligne téléphone + itinéraire */
  #header .column_2 .phone-trigger,
  #header .column_2 .map-trigger {
    height: 54px;
    min-height: 54px;
  }

  /* Horaires en bas du menu */
  #header .column_2 > .mobile-hours {
    display: flex;

    width: calc(100% + 44px);
    height: 68px;
    min-height: 68px;

    margin: auto -22px 0;
    padding: 10px 22px;

    flex-shrink: 0;
  }

  /* Garde juste dessous */
  #header .column_2 > .mobile-garde {
    width: calc(100% + 44px);
    height: 60px;
    min-height: 60px;

    margin: 0 -22px;
    padding: 10px 22px;

    flex-shrink: 0;
  }

  /* Météo visible tout en bas */
  #header .column_2 > .weather-widget-mini {
    display: flex;

    width: calc(100% + 44px);
    height: 40px;
    min-height: 40px;

    margin: 0 -22px;
    padding: 0 22px;

    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    flex-shrink: 0;
  }
}

/* Tablettes mobiles où le bandeau info mesure 35 px */
@media screen and (min-width: 701px) and (max-width: 900px) {
  #header .column_2 {
    top: 35px;
    height: calc(100vh - 35px);
    height: calc(100dvh - 35px);
  }
}

/* Mobiles peu hauts */
@media screen and (max-width: 900px) and (max-height: 720px) {

  #header .column_2 {
    padding-top: 56px;
  }

  #header .column_2 .menu > li:nth-child(-n + 4) > a {
    min-height: 38px;
    padding: 6px 0;
    font-size: .95rem;
  }

  #header .column_2 .phone-trigger,
  #header .column_2 .map-trigger {
    height: 46px;
    min-height: 46px;
  }

  #header .column_2 > .mobile-hours {
    height: 60px;
    min-height: 60px;
  }

  #header .column_2 > .mobile-garde {
    height: 54px;
    min-height: 54px;
  }

  #header .column_2 > .weather-widget-mini {
    height: 36px;
    min-height: 36px;
  }
}