/* ==========================================================
   ASSURANCE / ENGAGEMENTS
   IMPORTANT : charger ce fichier APRÈS css/style.css
   ========================================================== */

.assurance {
  position: relative;
  /* Descend légèrement la section pour dégager le titre sous la vague */
  padding: 180px 0 105px;
  background: #62beaf14;
  overflow: hidden;
}

/* ---------- Titre ---------- */

.assurance-heading {
  margin-bottom: 64px;
  padding: 0 24px;
  text-align: left;
}

.assurance-heading i {
  margin-bottom: 12px;
  font-size: 2rem;
  color: #27b397;
}

.assurance-heading p {
  margin: 0 0 8px;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #159a83;
}

.assurance-heading h2 {
  margin: 0 0 20px;
  font-family: "Roboto", sans-serif;
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1px;
  color: #041f2d;
}

.assurance-heading > span {
  display: inline-block;
  width: 75px;
  height: 4px;
  border-radius: 50px;
  background: linear-gradient(90deg, #27b397, #8fe3d3);
}

/* ---------- Slider ---------- */

.assurance-slider {
  position: relative;
  width: 100%;
  max-width: 1580px;
  margin: 0 auto;
  padding: 0 68px;
  overflow: hidden;
}

.assurance-track {
  display: flex;
  gap: 24px;
  width: 100%;
  min-width: 0;
  padding: 10px 60px 28px 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}

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

.assurance-track.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* ---------- Carte ---------- */

.assurance-track > .assurance-card {
  --card-accent: #27b397;
  --card-icon-bg: rgba(39, 179, 151, 0.12);

  position: relative;
  isolation: isolate;

  flex: 0 0 calc((100% - 150px) / 4);
  width: calc((100% - 150px) / 4);
  min-width: 0;
  max-width: none;
  height: 300px;

  padding: 38px 34px;
  overflow: hidden;

  border: 1px solid rgba(4, 31, 45, 0.045);
  border-radius: 28px;

  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  box-shadow: 0 12px 34px rgba(12, 38, 47, 0.055);

  scroll-snap-align: start;
  scroll-snap-stop: always;

  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s cubic-bezier(.22,1,.36,1);
}

.assurance-track > .assurance-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.16) 0%,
    rgba(255,255,255,0.02) 60%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
}

.assurance-track > .assurance-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(12, 38, 47, 0.08);
}

/* ---------- Icône ---------- */

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

  width: 72px;
  height: 72px;
  margin: 0 0 30px;

  border-radius: 24px;
  background: var(--card-icon-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.assurance-card .assurance-icon i {
  font-size: 2rem;
  line-height: 1;
  color: var(--card-accent);
}

/* ---------- Texte ---------- */

.assurance-card h3 {
  position: relative;
  margin: 0 0 42px;

  font-family: "Roboto", sans-serif;
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;

  color: #041f2d;
}

.assurance-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -18px;

  width: 38px;
  height: 3px;

  border-radius: 99px;
  background: var(--card-accent);
}

.assurance-card p {
  margin: 0;
  max-width: 95%;

  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  text-align: left;

  color: #536d7a;
}

/* ---------- 6 identités ---------- */
/*
  Place les 6 images dans /img avec ces noms :
  assurance-conseils.webp
  assurance-garde.webp
  assurance-equipe.webp
  assurance-commande.webp
  assurance-confidentialite.webp
  assurance-produits.webp
*/

.assurance-card--conseils {
  --card-accent: #20b191;
  --card-icon-bg: rgba(32, 177, 145, 0.11);
  background-image: url("../img/assurance-conseils.jpg");
}

.assurance-card--garde {
  --card-accent: #79bd3f;
  --card-icon-bg: rgba(121, 189, 63, 0.12);
  background-image: url("../img/assurance-garde.jpg");
}

.assurance-card--equipe {
  --card-accent: #379bd1;
  --card-icon-bg: rgba(55, 155, 209, 0.11);
  background-image: url("../img/assurance-equipe.jpg");
}

.assurance-card--commande {
  --card-accent: #df6c72;
  --card-icon-bg: rgba(223, 108, 114, 0.11);
  background-image: url("../img/assurance-commande.jpg");
}

.assurance-card--confidentialite {
  --card-accent: #e9a018;
  --card-icon-bg: rgba(233, 160, 24, 0.12);
  background-image: url("../img/assurance-confidentialite.jpg");
}

.assurance-card--produits {
  --card-accent: #d98768;
  --card-icon-bg: rgba(217, 135, 104, 0.13);
  background-image: url("../img/assurance-produits.jpg");
}

/* ---------- Flèches ---------- */

.assurance-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;

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

  width: 56px;
  height: 56px;
  padding: 0;

  border: 1px solid rgba(4, 31, 45, 0.05);
  border-radius: 50%;

  background: rgba(255,255,255,0.96);
  color: #20b191;

  box-shadow: 0 8px 24px rgba(12, 38, 47, 0.09);

  font-size: 1.6rem;
  cursor: pointer;

  transform: translateY(-50%);

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

.assurance-arrow:hover {
  background: #20b191;
  color: #fff;
  box-shadow: 0 12px 28px rgba(32, 177, 145, 0.22);
  transform: translateY(-50%) scale(1.06);
}

.assurance-prev {
  left: 10px;
}

.assurance-next {
  right: 10px;
}

/* ---------- Pagination : barre glissante ---------- */

.assurance-dots {
  --assurance-progress: 0;
  --assurance-thumb-width: 25%;
  --assurance-pages: 1;

  position: relative;

  display: block;
  width: calc(100% - 136px);
  height: 4px;

  min-height: 0;
  margin: 24px auto 0;
  padding: 0;

  border-radius: 999px;
  background: #d5dddf;

  overflow: hidden;
  cursor: pointer;

  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.assurance-dots::after {
  content: "";

  position: absolute;
  top: 0;
  left:
    calc(
      var(--assurance-progress) *
      (100% - var(--assurance-thumb-width))
    );

  width: var(--assurance-thumb-width);
  height: 100%;

  border-radius: inherit;
  background: #0f2f33;

  transition:
    left .18s cubic-bezier(.22, 1, .36, 1);

  pointer-events: none;
}

.assurance-dots.is-dragging::after {
  transition: none;
}

/*
 * Les boutons restent présents comme zones cliquables,
 * mais deviennent invisibles.
 */
.assurance-dot {
  position: absolute;
  top: 0;
  bottom: 0;

  appearance: none;

  width: calc(100% / var(--assurance-pages));
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  opacity: 0;

  cursor: pointer;
  transform: none;
}

.assurance-dot.active,
.assurance-dot:hover {
  width: calc(100% / var(--assurance-pages));
  background: transparent;
  transform: none;
}

.assurance-dot:nth-child(1) { left: calc(0 * 100% / var(--assurance-pages)); }
.assurance-dot:nth-child(2) { left: calc(1 * 100% / var(--assurance-pages)); }
.assurance-dot:nth-child(3) { left: calc(2 * 100% / var(--assurance-pages)); }
.assurance-dot:nth-child(4) { left: calc(3 * 100% / var(--assurance-pages)); }
.assurance-dot:nth-child(5) { left: calc(4 * 100% / var(--assurance-pages)); }
.assurance-dot:nth-child(6) { left: calc(5 * 100% / var(--assurance-pages)); }
.assurance-dot:nth-child(7) { left: calc(6 * 100% / var(--assurance-pages)); }
.assurance-dot:nth-child(8) { left: calc(7 * 100% / var(--assurance-pages)); }

@media screen and (max-width: 600px) {
  .assurance-dots {
    width: calc(100% - 40px);
    height: 4px;
    margin-top: 16px;
  }
}

/* ==========================================================
   TABLETTE : 2 cartes
   ========================================================== */

@media screen and (min-width: 601px) and (max-width: 1024px) {

  .assurance {
    padding: 100px 0 80px;
  }

  .assurance-heading {
    margin-bottom: 44px;
  }

  .assurance-slider {
    max-width: 100%;
    padding: 0 62px;
  }

  .assurance-track {
    gap: 24px;
    padding: 10px 30px 28px 0;
  }

  .assurance-track > .assurance-card {
    flex: 0 0 calc((100% - 50px) / 2);
    width: calc((100% - 50px) / 2);
    height: 480px;
    padding: 32px 28px;
  }

  .assurance-prev {
    left: 6px;
  }

  .assurance-next {
    right: 6px;
  }
}

/* ==========================================================
   MOBILE : 1 carte + aperçu de la suivante
   ========================================================== */

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

  .assurance {
    padding: 72px 0 64px;
  }

  .assurance-heading {
    margin-bottom: 34px;
    padding: 0 20px;
  }

  .assurance-heading h2 {
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .assurance-slider {
    max-width: 100%;
    padding: 0;
    overflow: hidden;
  }

  .assurance-track {
    gap: 16px;
    padding: 8px 54px 28px 20px;
    scroll-padding-left: 20px;
    scroll-padding-right: 54px;
  }

  .assurance-track > .assurance-card {
    flex: 0 0 calc(100vw - 88px);
    width: calc(100vw - 88px);
    min-width: calc(100vw - 88px);

    height: 340px;
    padding: 24px 22px;

    border-radius: 24px;
  }

  .assurance-card .assurance-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
  }

  .assurance-card .assurance-icon i {
    font-size: 1.65rem;
  }

  .assurance-card h3 {
    margin-bottom: 14px;
    font-size: 1.15rem;
  }

  .assurance-card p {
    max-width: 100%;
    font-size: .95rem;
    line-height: 1.5;
  }

  .assurance-arrow {
    display: none;
  }

  .assurance-dots {
    margin-top: 16px;
  }
}

/* ---------- Flèches désactivées ---------- */

.assurance-arrow {
  display: none;
}

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

  .assurance-track {
    padding-left: 16px;
    padding-right: 48px;
    scroll-padding-left: 16px;
  }

  .assurance-track > .assurance-card {
    flex-basis: calc(100vw - 78px);
    width: calc(100vw - 78px);
    min-width: calc(100vw - 78px);
    height: 330px;
    padding: 22px 20px;
  }
}



/* ==========================================================
   HARMONISATION ASSURANCE — CONTENEUR ET TYPOGRAPHIE COMMUNS
   ========================================================== */

.assurance {
  padding-top: var(--section-space-y, clamp(80px, 7vw, 120px));
  padding-bottom: var(--section-space-y, clamp(80px, 7vw, 120px));
}

.assurance-shell {
  width: min(100%, var(--site-container-xl, 1680px));
  margin-inline: auto;
  padding-inline: var(--site-gutter, clamp(20px, 3vw, 48px));
}

.assurance-heading {
  margin-bottom: var(--section-heading-gap, clamp(42px, 4vw, 64px));
  padding: 0;
}

.assurance-heading > i {
  display: none;
}

.assurance-heading p {
  margin: 0 0 14px;
  font-size: var(--section-label-size, .86rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--section-label-color, #159a83);
}

.assurance-heading h2 {
  margin: 0;
  font-size: var(--section-title-size, clamp(2.15rem, 4vw, 3rem));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.8px;
  color: var(--section-title-color, #041f2d);
}

/* Trait unique conservé, mais espacement harmonisé */
.assurance-heading > span {
  margin-top: 24px;
}

/* Le slider et la barre occupent exactement le même axe */
.assurance-slider {
  max-width: none;
  padding-inline: 0;
}

.assurance-dots {
  width: 100%;
  margin-inline: 0;
}

/* Cartes plus compactes et cohérentes */
.assurance-track > .assurance-card {
  border-radius: var(--card-radius, 26px);
  box-shadow: var(--card-shadow, 0 8px 22px rgba(4,31,45,.05));
}

.assurance-track > .assurance-card:hover {
  box-shadow: var(--card-shadow-hover, 0 12px 28px rgba(4,31,45,.075));
}

.assurance-card h3 {
  font-size: var(--section-card-title-size, 1.28rem);
}

.assurance-card p {
  font-size: var(--section-body-size, 1rem);
}

@media screen and (max-width: 750px) {
  .assurance-shell {
    padding-inline: var(--site-gutter, 20px);
  }

  .assurance-track {
    padding-left: 0;
    scroll-padding-left: 0;
  }
}



/* ==========================================================
   CARTES ASSURANCE PLUS COMPACTES
   ========================================================== */

.assurance-card{
    min-height:165px;
    padding:22px 20px;
}

.assurance-card h3{
    margin-bottom:10px;
}

.assurance-card p{
    margin-bottom:12px;
    line-height:1.5;
}

.assurance-card img{
    max-height:52px;
}

/* ==========================================================
   SUPPRESSION DES TRAITS
   ========================================================== */

/* Trait sous le titre de section */
.assurance-heading > span{
    display:none;
}

/* Trait sous les titres des cartes */
.assurance-card h3::after{
    display:none;
}

.assurance-card h3{
    margin-bottom:18px;
}


/* ==========================================================
   CORRECTION FINALE — TITRE SOUS LA VAGUE
   Cette règle est placée en dernier pour ne plus être écrasée
   ========================================================== */

@media screen and (min-width: 751px) {
  .assurance {
    padding-top: 190px;
  }
}

@media screen and (max-width: 750px) {
  .assurance {
    padding-top: 105px;
  }
}

/* ==========================================================
   DESIGN SYSTEM — PHASE 1
   En-tête Assurance aligné sur les autres sections
   ========================================================== */

.assurance-heading {
  position: relative;
  margin-bottom: var(--section-content-gap, clamp(32px, 2.6vw, 42px));
  padding: 0;
  text-align: left;
}

.assurance-heading > p:first-of-type {
  margin-bottom: var(--section-label-gap, 14px);
}

/* Suppression des décorations de l'en-tête */
.assurance-heading > i,
.assurance-heading > span,
.assurance-heading::after {
  display: none;
}

@media screen and (max-width: 750px) {
  .assurance-heading {
    margin-bottom: var(--section-content-gap, 30px);
  }
}



/* ==========================================================
   DESIGN SYSTEM — PHASE 1.2
   CONTENEUR ASSURANCE HARMONISÉ
   ========================================================== */

.assurance-shell {
  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));
}

.assurance-slider,
.assurance-dots {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

@media screen and (max-width: 1100px) {
  .assurance-shell {
    padding-inline: var(--site-gutter, 28px);
  }
}

@media screen and (max-width: 750px) {
  .assurance-shell {
    padding-inline: var(--site-gutter, 20px);
  }
}



/* ==========================================================
   DESIGN SYSTEM — PHASE 1.3
   RYTHME VERTICAL ASSURANCE
   ========================================================== */

/*
 * On conserve davantage d'espace en haut pour laisser respirer
 * la vague, mais on harmonise le reste du rythme.
 */
.assurance {
  padding-top: clamp(170px, 10vw, 190px);
  padding-bottom: var(--section-space-y, clamp(82px, 6.5vw, 112px));
}

.assurance-heading {
  margin-bottom: var(--section-content-gap, clamp(34px, 2.8vw, 44px));
}

.assurance-heading > p:first-of-type {
  margin-bottom: var(--section-label-gap, 14px);
}

.assurance-heading h2 {
  margin-bottom: 0;
}

.assurance-slider {
  margin-top: 0;
}

@media screen and (max-width: 1100px) {
  .assurance {
    padding-top: 135px;
    padding-bottom: var(--section-space-y, 84px);
  }
}

@media screen and (max-width: 750px) {
  .assurance {
    padding-top: 105px;
    padding-bottom: var(--section-space-y, 66px);
  }

  .assurance-heading {
    margin-bottom: var(--section-content-gap, 30px);
  }

  .assurance-heading > p:first-of-type {
    margin-bottom: var(--section-label-gap, 12px);
  }
}



/* ==========================================================
   DESIGN SYSTEM — PHASE 1.3.1
   VAGUE ASSURANCE HARMONISÉE
   ========================================================== */

/*
 * Même image, même hauteur et même position
 * que la vague du bloc À propos.
 */
.assurance > .aproposdenous-decoration {
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 1;

  display: block;
  width: 100%;
  height: var(--wave-height, clamp(68px, 5vw, 86px));

  object-fit: fill;
  object-position: center top;

  pointer-events: none;
  user-select: none;
}

/* Espace identique entre la fin de la vague et le titre */
.assurance {
  padding-top:
    calc(
      var(--wave-height, clamp(68px, 5vw, 86px)) +
      clamp(74px, 5vw, 104px)
    );
}

@media screen and (max-width: 1100px) {
  .assurance {
    padding-top:
      calc(
        var(--wave-height, 72px) +
        58px
      );
  }
}

@media screen and (max-width: 750px) {
  .assurance {
    padding-top:
      calc(
        var(--wave-height, 58px) +
        46px
      );
  }
}