/* ========================================== */
/* RESET GLOBAL                                 */
/* ========================================== */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  min-height: 100%;
}

body {
  background-color: #fff;
  font-family: "Montserrat Alternates", sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

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

/* ========================================== */
/* CONTENEUR PRINCIPAL                          */
/* ========================================== */
.w-light {
  width: 100%;
  max-width: 100%;
  position: relative;
  background-color: #fff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  isolation: isolate;
  line-height: normal;
  letter-spacing: normal;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: hidden;
}

/* ========================================== */
/* HEADER - FIXÉ EN HAUT, SANS ESPACE BLANC    */
/* ========================================== */
.header {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 100;
  flex-shrink: 0;
}

.divsticky {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  height: 80px;
  background-color: rgba(23, 29, 36, 0.5);
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.navnavbar {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-align: left;
  font-size: 14px;
  color: #fff;
  font-family: Roboto, sans-serif;
  box-sizing: border-box;
}

.divcontainer7 {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  gap: 0;
  max-width: 1104px;
  margin: 0 auto;
  min-height: 80px;
  box-sizing: border-box;
}

.anavbar-brandmargin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 24px 20px 0;
  flex-shrink: 0;
}

.anavbar-brand-icon {
  width: 98.1px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  cursor: pointer;
}

.divnavbarsupportedcontent {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 80px;
  max-width: 100%;
}

.ulnavbar-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.linav-itemmargin-wrapper {
  display: flex;
  align-items: center;
  order: 99;
}

.linav-itemmargin {
  display: flex;
  align-items: center;
}

.linav-item {
  display: flex;
  align-items: center;
}

.component-8 {
  display: flex;
  align-items: center;
  border-radius: 50px;
  background-color: #f8f9fa;
  border: 3px solid #f8f9fa;
  padding: 11px 24px;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
}

.symbol-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.symbol4 {
  display: inline-block;
}

.mon-compte {
  font-weight: 700;
  color: #322b3a;
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 14px;
  text-decoration: none;
}

.linav-item-wrapper,
.ulnavbar-nav-inner {
  display: flex;
  align-items: center;
}

.linav-item2 {
  display: flex;
  align-items: center;
}

.a-menunav-link,
.a-menunav-link5 {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  cursor: pointer;
  gap: 5px;
}

.linav-itemmargin-parent {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}

.linav-itemmargin2,
.linav-itemmargin3,
.linav-itemmargin4,
.linav-itemmargin5 {
  display: flex;
  align-items: center;
  position: static;
  padding: 0;
}

.aides,
.fr {
  position: relative;
  line-height: 21px;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}

.fr-icon {
  width: 18px;
  height: auto;
  object-fit: cover;
}

.spanlanguage-textmargin {
  display: flex;
  align-items: center;
  padding: 0 5px;
}

/* ========================================== */
/* HAMBURGER MOBILE - caché en desktop         */
/* ========================================== */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: relative;
  padding: 0;
  flex-shrink: 0;
  margin-left: auto;
}

.mobile-menu-toggle span {
  display: block;
  position: absolute;
  left: 8px;
  right: 8px;
  height: 3px;
  background-color: #fff;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle span:nth-child(1) { top: 12px; }
.mobile-menu-toggle span:nth-child(2) { top: 19px; }
.mobile-menu-toggle span:nth-child(3) { top: 26px; }

.mobile-menu-toggle.is-open span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}
.mobile-menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-toggle.is-open span:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg);
}

/* ========================================== */
/* MAIN / HEADER-END                            */
/* ========================================== */
.header-end {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 80px;
  margin: 0;
  z-index: 0;
  flex-shrink: 0;
}

/* ========================================== */
/* HERO SECTION - FIX GRADIENT PLEINE LARGEUR  */
/* ========================================== */
.divsection-wave {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  /* FIX P1: padding latéral à 0 pour que le gradient couvre toute la largeur.
     Le padding interne est géré par .divparent-anim-home */
  padding: 0;
  margin: 0;
  position: relative;
  isolation: isolate;
  text-align: center;
  font-size: 22px;
  color: #fff;
  font-family: "Montserrat Alternates", sans-serif;
  background: linear-gradient(135deg, #f33472 0%, #fe771a 100%);
  box-sizing: border-box;
}

.divparent-anim-home {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* Padding latéral déplacé ici pour garder le contenu aligné */
  padding: 60px 28px 100px;
  box-sizing: border-box;
  isolation: isolate;
  z-index: 1;
  position: relative;
}

.divsection {
  flex: 1;
  min-width: 300px;
  max-width: 552px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 0;
  position: relative;
  z-index: 2;
}

.before {
  display: none;
}

.div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

/* ========================================== */
/* BOUTONS CTA - FIX P5 contraste              */
/* ombre pour décoller du fond gradient        */
/* ========================================== */
.component-2,
.component-22 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #fd3f5c;
  border: 2px solid rgba(255, 255, 255, 0.95);
  padding: 16px 32px;
  text-decoration: none;
  cursor: pointer;
  /* FIX P5 : ombre douce + ombre interne pour démarquer le bouton */
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.component-2:hover,
.component-22:hover {
  background-color: #e6304d;
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.25),
    0 4px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.text {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  font-family: "Montserrat Alternates", sans-serif;
  color: #fff;
}

.h1title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  text-align: left;
  font-size: 34px;
  color: #fff;
  font-family: Poppins, sans-serif;
  width: 100%;
}

.span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.ma-carte-de {
  margin: 0;
  font-size: 32px;
  line-height: 1.3;
  font-weight: 500;
  font-family: inherit;
  color: #fff;
}

.lavieavec-pcs {
  margin: 0;
  font-size: 42px;
  line-height: 1.1;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
}

.ptext-price {
  display: flex;
  align-items: center;
  gap: 5px;
  text-align: left;
  font-size: 28px;
  color: #01d39a;
  font-weight: 800;
}

.ds-4-wrapper {
  display: flex;
  align-items: center;
}

.ds-4 {
  margin: 0;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.14px;
}

.separator {
  font-size: 15px;
  font-weight: 800;
}

.component-3 {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.image-trustpilot,
.component-12 {
  display: flex;
  align-items: center;
}

.b-icon {
  max-width: 200px;
  width: 100%;
  height: auto;
}

.divanim-el-homemarginalign-,
.divanim-el-homemargin,
.divanim-el-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 300px;
}

.div2 {
  width: 100%;
  height: 400px;
  position: relative;
}

/* ========================================== */
/* VAGUE DÉCORATIVE - clip-path pleine largeur */
/* ========================================== */
.after {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 0;
  padding: 0;
  display: block;
  background: linear-gradient(135deg, #f33472 0%, #fe771a 100%);
}

.component-13 {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  clip-path: ellipse(75% 100% at 50% 100%);
}

.vector-icon {
  display: none;
}

/* ========================================== */
/* SECTION CARTE                                */
/* ========================================== */
.sectioncarte {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 20px;
  gap: 40px;
  text-align: center;
  font-size: 14px;
  color: #322b3a;
  background-color: #fff;
  box-sizing: border-box;
}

.divjumbotron {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  border-radius: 3px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  box-sizing: border-box;
}

.divtext-center {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 20px;
  gap: 15px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding: 7px 0;
}

.libreadcrumb-item {
  display: flex;
  align-items: center;
  padding: 1px 0 5px;
  opacity: 0.35;
}

.component-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  cursor: pointer;
}

.text3 {
  line-height: 14px;
}

.li {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.nos-cartes-de {
  line-height: 24px;
  font-weight: 500;
}

.h1title2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 0;
  font-size: 48px;
  color: #333;
  font-family: Poppins, sans-serif;
  text-align: center;
  width: 100%;
}

.pwp-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  color: rgba(230, 55, 37, 0.8);
  font-family: "Montserrat Alternates", sans-serif;
  text-align: center;
}

.component-32 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.trustpilot-clear4fdda769svg,
.component-14 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 361px;
}

.b-icon2,
.b-icon3 {
  max-width: 100%;
  height: auto;
}

.h2wow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 0;
  font-size: 48px;
  color: #201f1f;
  font-family: Poppins, sans-serif;
  text-align: center;
  width: 100%;
}

.tout-simplement {
  margin: 0;
  font-size: 42px;
  line-height: 1.2;
  font-weight: 700;
  font-family: inherit;
  text-align: center;
}

.divrow {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  font-size: 16px;
  color: green;
}

.divcol-lg-6 {
  display: none;
}

.divrowmargin {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.divrow2 {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.divcol-lg-4 {
  flex: 1;
  min-width: 280px;
  max-width: 358px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.divcard-img-icon {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.divcol-lg-8 {
  flex: 2;
  min-width: 280px;
  max-width: 716px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.component-5 {
  width: 100%;
  box-shadow: 0 0.5px 1px rgba(51, 77, 114, 0.1),
    0 1.6px 3.6px rgba(51, 77, 114, 0.15);
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  align-items: stretch;
  padding: 30px;
  box-sizing: border-box;
}

.divsection2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px 0;
}

.ullistingmargin {
  width: 100%;
  display: flex;
  padding: 20px 0 0;
}

.ullisting {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 25px;
}

.li2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 0 0 30px;
  position: relative;
}

.divitem {
  display: flex;
  align-items: center;
  gap: 5px;
}

.symbol {
  line-height: 16px;
}

.compte {
  line-height: 24px;
  font-family: "Montserrat Alternates", sans-serif;
}

.p {
  display: flex;
  flex-direction: column;
  color: #6a737c;
  font-family: Roboto, sans-serif;
}

.sans-engagement-ni,
.personnalis-franais-pour {
  letter-spacing: -0.08px;
  line-height: 26px;
}

.before2 {
  width: 17px;
  height: 17px;
  position: absolute;
  top: 3.5px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.component-15 {
  width: 17px;
  height: 17px;
  position: relative;
}

.vector-icon2 {
  width: 100%;
  height: 100%;
}

.abtn-full-mobilemargin {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0 0;
  text-align: center;
  font-size: 18px;
  color: #fd3f5c;
}

.component-23 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: 3px solid #fd3f5c;
  padding: 9px 24px;
  text-decoration: none;
}

.text4 {
  line-height: 27px;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* ========================================== */
/* AVANTAGES CARTES                             */
/* ========================================== */
.avantages-cartes {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 60px 0 0;
  text-align: center;
  font-size: 48px;
  color: #201f1f;
  font-family: Poppins, sans-serif;
  box-sizing: border-box;
}

.divjumbotron2 {
  width: 100%;
  border-radius: 3px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  color: #333;
  font-family: "Montserrat Alternates", sans-serif;
  box-sizing: border-box;
}

.divcontainer {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  box-sizing: border-box;
}

.h1title3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  font-family: Poppins, sans-serif;
  width: 100%;
  text-align: center;
}

.pwp-subtitlemargin {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 30px;
  font-size: 20px;
  color: rgba(230, 55, 37, 0.8);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.la-carte-de {
  letter-spacing: -0.5px;
  line-height: 30px;
  font-weight: 500;
  text-align: center;
}

.ulrowmargin {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  font-size: 24px;
  color: #322b3a;
  box-sizing: border-box;
}

.ulrow {
  width: 100%;
  max-width: 700px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.licol-6margin,
.licol-6margin2 {
  flex: 1;
  min-width: 140px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 14px 0;
  box-sizing: border-box;
}

.figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.picto-avantages-comptepng-icon {
  width: 100%;
  max-width: 137px;
  height: auto;
  object-fit: contain;
}

.figcaption,
.figcaption2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
}

.span-h2d-remove-before {
  display: none;
}

.separator-mark,
.carte2,
.rib2 {
  margin: 0;
  letter-spacing: -0.6px;
  line-height: 1.3;
  font-weight: 600;
  font-family: inherit;
  font-size: 24px;
}

.abtn-full-mobilemargin2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 35px 0 0;
  font-size: 22px;
  color: #fff;
}

.component-24 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #fd3f5c;
  border: 3px solid #fd3f5c;
  padding: 16px 32px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(253, 63, 92, 0.3);
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.component-24:hover {
  opacity: 0.95;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(253, 63, 92, 0.4);
}

/* ========================================== */
/* SECTION VERTE                                */
/* ========================================== */
.divbg-green {
  width: 100%;
  background-color: #aaffe5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  position: relative;
  isolation: isolate;
  gap: 40px;
  box-sizing: border-box;
}

.image-clip {
  display: none;
}

.component-18 {
  width: 100px;
  height: auto;
}

.vector-icon5 {
  width: 100%;
  height: auto;
}

.divwrap-pushto-img-icon {
  width: 100%;
  max-width: 720px;
  height: auto;
  object-fit: contain;
  z-index: 1;
}

.divcontainer2 {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 40px;
  gap: 20px;
  z-index: 2;
  box-sizing: border-box;
}

.divsection-content {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 40px 20px 0;
  box-sizing: border-box;
  text-align: left;
  font-size: 24px;
}

.divcol-12margin-parent {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 20px;
}

.divcol-12margin,
.divcol-12margin3,
.divcol-12margin4 {
  flex: 1;
  min-width: 280px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
  box-sizing: border-box;
}

.divcol-12 {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: 0 8px;
  gap: 20px;
  box-sizing: border-box;
}

.accessible-tous-et-sans-cond {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 24px 0 0;
  flex-shrink: 0;
}

.divmedia-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 0 10px;
  gap: 16px;
  min-width: 0;
}

.accessible-tous {
  margin: 0;
  letter-spacing: -0.6px;
  line-height: 1.3;
  font-weight: 600;
  font-family: inherit;
  font-size: 22px;
  color: #201f1f;
  font-family: Poppins, sans-serif;
}

.enregistrez-vous-avec-une {
  letter-spacing: -0.08px;
  line-height: 24px;
  font-weight: 500;
  font-size: 16px;
  color: #322b3a;
  font-family: "Montserrat Alternates", sans-serif;
}

.zro-dcouvert-icon {
  width: 85px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.divcol-12margin-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 280px;
  max-width: 100%;
}

/* ========================================== */
/* SECTION GRISE                                */
/* ========================================== */
.sectionbg-gray {
  width: 100%;
  background-color: #f5f5f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
}

.image-clip2 {
  display: none;
}

.divtext-center2 {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  z-index: 1;
}

.divsection-content2 {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  text-align: left;
  font-size: 24px;
}

.divcol-12margin7 {
  flex: 1;
  min-width: 280px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
  box-sizing: border-box;
}

.divcol-127 {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: 0 8px;
  gap: 20px;
  box-sizing: border-box;
}

.imgmr-3margin,
.imgmr-3margin2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 20px 0 0;
  flex-shrink: 0;
}

.plan-de-travail-1png-icon,
.plan-de-travail-2png-icon {
  width: 60px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.divmedia-body7,
.divmedia-body8 {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 0 10px;
  gap: 16px;
  min-width: 0;
}

/* ========================================== */
/* TARIFS                                       */
/* ========================================== */
.tarifs {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 20px 60px;
  text-align: center;
  font-size: 48px;
  color: #333;
  font-family: Poppins, sans-serif;
  box-sizing: border-box;
}

.divjumbotron3 {
  width: 100%;
  border-radius: 3px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

.divcontainer3 {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  color: #201f1f;
}

.psection-subtitle {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  color: #322b3a;
  font-family: "Montserrat Alternates", sans-serif;
  text-align: center;
}

.vous-de-choisir {
  letter-spacing: -0.08px;
  line-height: 24px;
  font-weight: 500;
}

.ulrow2 {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  padding: 60px 0;
  font-size: 22px;
  position: static;
}

.licard,
.licard2,
.licard3,
.licard4,
.licard5 {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  position: static;
  height: auto;
  margin: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.licard:hover,
.licard2:hover,
.licard3:hover,
.licard4:hover,
.licard5:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.licard-parent {
  display: contents;
}

.figuremargin,
.figuremargin2,
.figuremargin3,
.figuremargin5 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 15px 15px;
  box-sizing: border-box;
}

.figure4,
.figure8 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carte-pcs-metal-x,
.carte-pcs-absolut {
  width: 100%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
}

.figcaption4,
.figcaption7 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  text-align: center;
}

.divcard-body,
.divcard-body3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 19px 20px 20px;
  gap: 18px;
  box-sizing: border-box;
}

.h3card-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.carte-pcs-metal {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.55px;
  line-height: 1.3;
  font-weight: 600;
  font-family: Poppins, sans-serif;
  text-align: center;
}

.ullist-unstyled {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  color: #322b3a;
  font-family: "Montserrat Alternates", sans-serif;
  gap: 4px;
  text-align: center;
}

.abtn-full-mobile,
.abtn-full-mobile2,
.abtn-full-mobile3,
.abtn-full-mobile4,
.abtn-full-mobile5 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-size: 28px;
  color: #322b3a;
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 800;
}

.div3,
.div4,
.div6,
.div8,
.div10 {
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-symbol,
.btn-point-separation {
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ptext-oldprice {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
}

.div7 {
  text-decoration: line-through;
  letter-spacing: -0.08px;
  line-height: 24px;
  font-weight: 800;
}

.abtnmargin,
.abtnmargin2,
.abtnmargin3,
.abtnmargin4,
.abtnmargin5 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0 20px 20px;
  font-size: 18px;
  color: #fd3f5c;
  font-family: "Montserrat Alternates", sans-serif;
  box-sizing: border-box;
}

.component-25 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #fd3f5c;
  border: 3px solid #fd3f5c;
  padding: 12px 24px;
  text-decoration: none;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(253, 63, 92, 0.25);
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.component-25:hover {
  opacity: 0.95;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(253, 63, 92, 0.35);
}

.text6 {
  line-height: 27px;
  color: #fff;
  font-weight: 700;
}

/* ========================================== */
/* COMMENT CA MARCHE - FIX P2                  */
/* Suppression complète des éléments parasites */
/* Texte centré BLANC dans cercle gradient     */
/* ========================================== */
.comment-ca-marche {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 20px;
  gap: 50px;
  text-align: center;
  font-size: 48px;
  color: #322b3a;
  font-family: "Montserrat Alternates", sans-serif;
  box-sizing: border-box;
}

.divcontainer4 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
  gap: 30px;
  box-sizing: border-box;
}

.h2section-title4 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #201f1f;
  font-family: Poppins, sans-serif;
  text-align: center;
}

.psection-subtitle2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  text-align: center;
}

/* GRILLE 5 ÉTAPES */
.ullist-unstyled6 {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
  padding: 40px 0;
  font-size: 24px;
  align-items: start;
  position: relative;
}

/* Ligne pointillée connectant les étapes */
.ullist-unstyled6::before {
  content: "";
  position: absolute;
  top: 90px;
  left: 10%;
  right: 10%;
  height: 2px;
  background-image: linear-gradient(to right, #fd3f5c 50%, transparent 50%);
  background-size: 12px 2px;
  background-repeat: repeat-x;
  z-index: 0;
  opacity: 0.4;
}

/* Chaque étape */
.lijs-step-overlay,
.lijs-step-overlay2,
.lijs-step-overlayalign-flex- {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  gap: 20px;
  justify-content: flex-start;
  z-index: 1;
}

.lijs-step-overlay2 {
  width: 100%;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
}

/* CERCLE GRADIENT — taille augmentée pour contenir le texte */
.figurefig,
.figurefig2 {
  width: 170px;
  min-width: 170px;
  height: 170px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f33472 0%, #fe771a 100%);
  box-shadow: 0 8px 24px rgba(243, 52, 114, 0.3);
  box-sizing: border-box;
  margin: 0;
  /* FIX P2 — Animation au survol pour dynamisme */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Animation d'apparition discrète */
  animation: stepFadeIn 0.6s ease-out backwards;
}

.figurefig:hover,
.figurefig2:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 14px 30px rgba(243, 52, 114, 0.42);
}

.figurefig2 {
  background: linear-gradient(135deg, #fe771a 0%, #f33472 100%);
}

/* Délais en cascade pour les étapes */
.ullist-unstyled6 > *:nth-child(1) .figurefig,
.ullist-unstyled6 > *:nth-child(1) .figurefig2 { animation-delay: 0.05s; }
.ullist-unstyled6 > *:nth-child(2) .figurefig,
.ullist-unstyled6 > *:nth-child(2) .figurefig2 { animation-delay: 0.15s; }
.ullist-unstyled6 > *:nth-child(3) .figurefig,
.ullist-unstyled6 > *:nth-child(3) .figurefig2 { animation-delay: 0.25s; }
.ullist-unstyled6 > *:nth-child(4) .figurefig,
.ullist-unstyled6 > *:nth-child(4) .figurefig2 { animation-delay: 0.35s; }
.ullist-unstyled6 > *:nth-child(5) .figurefig,
.ullist-unstyled6 > *:nth-child(5) .figurefig2 { animation-delay: 0.45s; }

@keyframes stepFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* FIX P2 — On masque TOUS les éléments parasites (SVG anciens, paints, before/after) */
.figurefig-paints,
.figurefig-paints2,
.before5,
.before6,
.before7,
.after2,
.after3,
.after4,
.after5,
.after7,
.after11,
.component-110,
.component-112,
.trac-1334-icon,
.trac-61-icon,
.groupe-36-icon {
  display: none !important;
}

/* On masque aussi les conteneurs d'icônes et les images dedans pour ne garder que le texte */
.jachte-ma-carte-sur-le-site,
.jactive-ma-carte2,
.avec-une-pice-didentit-je-c,
.je-recharge-ma-carte,
.je-gre-mon-compte,
.component-111,
.component-114,
.component-116,
.component-119,
.component-121,
.groupe-2308-icon,
.groupe-2309-icon,
.groupe-2310-icon,
.groupe-2311-icon,
.groupe-2312-icon {
  display: none !important;
}

/* TEXTE BLANC parfaitement centré DANS le cercle */
.figcaptioncap,
.figcaptioncap2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  margin: 0;
}

.jachte-ma-carte,
.jactive-ma-carte {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  font-family: "Montserrat Alternates", sans-serif;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  width: 100%;
}

.component-210 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: 3px solid #fd3f5c;
  padding: 12px 30px;
  font-size: 18px;
  color: #fd3f5c;
  margin-top: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.component-210:hover {
  background-color: #fd3f5c;
}

.component-210:hover .text11 {
  color: #fff;
}

.text11 {
  line-height: 27px;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

/* ========================================== */
/* BESOIN D'AIDE - FIX P3                      */
/* Tous les boutons visibles avec texte noir   */
/* ========================================== */
.divjumbotron4 {
  width: 100%;
  border-radius: 3px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 60px 20px;
  color: #333;
  box-sizing: border-box;
}

.divcontainer5 {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
  box-sizing: border-box;
}

.h1titlemargin {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  font-family: Poppins, sans-serif;
  text-align: center;
  box-sizing: border-box;
}

.pwp-subtitlemargin2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 30px;
  font-size: 20px;
  color: rgba(230, 55, 37, 0.8);
  text-align: center;
  box-sizing: border-box;
}

.ulrowmargin2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  font-size: 18px;
  color: #343a40;
  box-sizing: border-box;
}

.ulrow3 {
  width: 100%;
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  align-items: stretch;
}

.licol-12margin-parent {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

.licol-12margin,
.licol-12margin2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.licol-12 {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
}

.component-211,
.component-212 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  border: 3px solid #343a40;
  background-color: #fff;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  min-height: 50px;
  box-sizing: border-box;
}

/* FIX P3 — Tous les liens/boutons d'aide en texte noir par défaut, visibles */
.component-211 .text11,
.component-211 .text6,
.component-212 .text11,
.component-212 .text6,
.licol-12 a,
.licol-12 b {
  color: #343a40 !important;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
}

.component-211:hover,
.component-212:hover {
  background-color: #343a40;
}

.component-211:hover .text11,
.component-212:hover .text11,
.component-211:hover .text6,
.component-212:hover .text6,
.component-211:hover a,
.component-212:hover a,
.component-211:hover b,
.component-212:hover b {
  color: #fff !important;
}

/* ========================================== */
/* POINTS DE VENTE                              */
/* ========================================== */
.pdv {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  gap: 20px;
  text-align: center;
  font-size: 48px;
  color: #333;
  font-family: "Montserrat Alternates", sans-serif;
  box-sizing: border-box;
}

.h1title5 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Poppins, sans-serif;
}

.pwp-subtitle3 {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  color: rgba(230, 55, 37, 0.8);
  text-align: center;
}

.formresellerssearchform {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 40px 0 0;
  text-align: left;
  font-size: 16px;
  color: #495057;
  box-sizing: border-box;
}

.divcol-129 {
  width: 100%;
  max-width: 968px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 8px;
  gap: 22px;
  box-sizing: border-box;
}

.selectcustom-select {
  width: 100%;
  height: 50px;
  border-radius: 50px;
  background-color: #fff;
  border: 2px solid #322b3a;
  display: flex;
  align-items: center;
  padding: 12px 24px;
  position: relative;
  box-sizing: border-box;
}

.image-clip3 {
  position: absolute;
  top: 0;
  right: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 0;
}

.component-122 {
  width: 14px;
  height: auto;
  display: flex;
  align-items: center;
}

.trac-675-icon {
  width: 100%;
  height: auto;
}

.div11 {
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 1;
}

.france-mtropolitaine {
  line-height: 24px;
  width: 100%;
}

.divinput-group {
  width: 100%;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  color: rgba(50, 43, 58, 0.35);
  font-family: Roboto, sans-serif;
}

.inputaddress {
  flex: 1;
  height: 50px;
  border-radius: 50px 0 0 50px;
  background-color: #fff;
  border: 2px solid #ced4da;
  border-right: none;
  padding: 13px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
}

.divplaceholder {
  width: 100%;
}

.rechercher-par-code {
  width: 100%;
}

.buttonbtnmargin {
  display: flex;
  align-items: stretch;
  text-align: center;
  font-size: 18px;
  color: #fff;
  font-family: "Font Awesome 5 Free", sans-serif;
  flex-shrink: 0;
}

.component-6 {
  border-radius: 0 50px 50px 0;
  background-color: #fd3f5c;
  border: 3px solid #fd3f5c;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  cursor: pointer;
  min-width: 60px;
  transition: opacity 0.2s;
}

.component-6:hover {
  opacity: 0.9;
}

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

.text22 {
  line-height: 18px;
}

.text22::before {
  content: "🔍";
  font-size: 16px;
}

/* ========================================== */
/* FOOTER                                       */
/* ========================================== */
.footer {
  width: 100%;
  background-color: #322b3a;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0 0;
  text-align: left;
  font-size: 16px;
  color: #fff;
  font-family: "Montserrat Alternates", sans-serif;
  box-sizing: border-box;
}

.divrow3 {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 20px;
  gap: 30px;
  box-sizing: border-box;
}

.ulmenu-menu-du-footermargin {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 10px;
  box-sizing: border-box;
}

.ulmenu-menu-du-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 8px;
  gap: 13px;
  box-sizing: border-box;
}

.a {
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.cartes,
.avantages,
.qui-sommes-nous {
  flex: 1;
  line-height: 24px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.divcustomer-servicemargin {
  flex: 1;
  min-width: 240px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.divcustomer-service {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 8px;
  gap: 6px;
  box-sizing: border-box;
}

.component-7 {
  display: flex;
  align-items: center;
  font-size: 24px;
  color: #fd3f5c;
}

.text23 {
  font-size: 24px;
  line-height: 36px;
  display: flex;
  align-items: center;
  font-weight: 700;
}

.pphone-desc {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 10px;
}

.mn-cot {
  letter-spacing: -0.05px;
  line-height: 15px;
  font-weight: 500;
}

.p13 {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 4px 0 0;
}

.divtext-center3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 20px 0;
  box-sizing: border-box;
}

.component-33 {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.trustpilot-dark984b39a1svg {
  height: 40px;
  max-width: 361px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divmiddlefooter {
  width: 100%;
  background-color: #423a4a;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 50px 20px 40px;
  margin-top: 50px;
  text-align: left;
  font-size: 16px;
  color: #fff;
  font-family: "Montserrat Alternates", sans-serif;
  box-sizing: border-box;
}

.divcontainer6 {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 8px;
  gap: 20px;
  box-sizing: border-box;
}

.divmr-3margin {
  display: flex;
  flex-direction: column;
  padding: 0 30px 0 0;
  flex-shrink: 0;
}

.pcs-mastercard {
  width: 65px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.divmedia-body9 {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 10px;
  gap: 10px;
  box-sizing: border-box;
}

.ulmenu-plan-du-site-mentions {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.a13,
.a14 {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.mentions-lgales,
.politique-de-confidentialit {
  line-height: 19.5px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}

.limenu-item-2340 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.p14 {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 0 4px;
  font-size: 12.8px;
}

.la-carte-de2 {
  letter-spacing: -0.08px;
  line-height: 18px;
  font-weight: 500;
}

.smallcontainer {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 15px 20px;
  text-align: center;
  font-size: 12.8px;
  gap: 8px;
  box-sizing: border-box;
}

.pcs-tous-droits {
  line-height: 14px;
  font-weight: 500;
}

.atext-white {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================== */
/* RESPONSIVE TABLETTE - max 1024px            */
/* ========================================== */
@media screen and (max-width: 1024px) {
  .divparent-anim-home {
    padding: 60px 30px 100px;
  }

  .ma-carte-de {
    font-size: 28px;
    line-height: 1.3;
  }

  .lavieavec-pcs {
    font-size: 36px;
    line-height: 1.1;
  }

  .tout-simplement {
    font-size: 36px;
  }

  .h1title2,
  .h2wow {
    font-size: 36px;
  }

  .ulrow2 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    padding: 40px 0;
  }

  /* Comment ça marche : 3 colonnes en tablette */
  .ullist-unstyled6 {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .ullist-unstyled6::before {
    display: none;
  }
}

/* ========================================== */
/* RESPONSIVE MOBILE - max 768px - HEADER FIX  */
/* ========================================== */
@media screen and (max-width: 768px) {
  /* HEADER MOBILE - FIX P4 — burger + drawer */
  .divsticky {
    height: 64px;
    min-height: 64px;
    background-color: rgba(23, 29, 36, 0.85);
  }

  .navnavbar {
    padding: 0 15px;
  }

  .divcontainer7 {
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 64px;
    padding: 0;
    align-items: center;
  }

  .anavbar-brandmargin {
    padding: 0;
    flex: 0 0 auto;
  }

  .anavbar-brand-icon {
    width: 80px;
  }

  /* Affichage du burger */
  .mobile-menu-toggle {
    display: block;
  }

  /* Le menu devient un drawer en haut, déclenché par .is-open */
  .divnavbarsupportedcontent {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #322b3a;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  }

  .divnavbarsupportedcontent.is-open {
    max-height: 600px;
    padding: 16px 0 24px;
  }

  .ulnavbar-nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding: 0;
  }

  /* "Mon compte" en premier dans le drawer */
  .linav-itemmargin-wrapper {
    order: 0;
    width: 100%;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    justify-content: center;
  }

  .linav-itemmargin {
    width: 100%;
    justify-content: center;
  }

  .component-8 {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    padding: 12px 20px;
  }

  /* Liens du menu en pleine largeur, séparés par des bordures */
  .linav-item-wrapper,
  .ulnavbar-nav-inner {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .linav-itemmargin-parent {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .linav-item2,
  .linav-item,
  .linav-itemmargin2,
  .linav-itemmargin3,
  .linav-itemmargin4,
  .linav-itemmargin5 {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .a-menunav-link,
  .a-menunav-link5 {
    width: 100%;
    padding: 14px 24px;
    justify-content: flex-start;
  }

  .a-menunav-link5 {
    flex-wrap: wrap;
    gap: 8px;
  }

  .aides,
  .fr {
    font-size: 15px;
    width: auto;
  }

  .header-end {
    padding-top: 64px;
  }

  /* HERO MOBILE */
  .divparent-anim-home {
    flex-direction: column;
    padding: 30px 20px 60px;
  }

  .divsection {
    min-width: 100%;
    max-width: 100%;
    padding: 30px 0;
    align-items: center;
    text-align: center;
  }

  .div {
    align-items: center;
  }

  .h1title {
    align-items: center;
    text-align: center;
  }

  .span {
    align-items: center;
  }

  .ma-carte-de {
    font-size: 22px;
    line-height: 1.4;
    text-align: center;
  }

  .lavieavec-pcs {
    font-size: 28px;
    line-height: 1.2;
    text-align: center;
  }

  .ptext-price {
    justify-content: center;
  }

  .divanim-el-home {
    display: none;
  }

  .after {
    height: 60px;
  }

  .sectioncarte,
  .avantages-cartes,
  .tarifs,
  .comment-ca-marche,
  .pdv {
    padding: 50px 15px;
  }

  .divjumbotron2,
  .divjumbotron3,
  .divjumbotron4,
  .sectionbg-gray,
  .divbg-green {
    padding: 40px 15px;
  }

  .tout-simplement {
    font-size: 28px;
    line-height: 1.3;
  }

  .h1title2,
  .h2wow {
    font-size: 28px;
  }

  .divrow2 {
    flex-direction: column;
    align-items: stretch;
  }

  .divcol-lg-4,
  .divcol-lg-8 {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  .component-5 {
    padding: 20px;
  }

  .li2 {
    padding-left: 25px;
  }

  .ulrow {
    flex-wrap: wrap;
    justify-content: center;
  }

  .licol-6margin,
  .licol-6margin2 {
    flex: 0 1 auto;
    min-width: 130px;
    max-width: 180px;
  }

  .divsection-content {
    padding: 30px 15px 0;
  }

  .divcol-12margin-parent {
    flex-direction: column;
    align-items: center;
  }

  .divcol-12margin,
  .divcol-12margin3,
  .divcol-12margin4,
  .divcol-12margin7 {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  .divcol-12,
  .divcol-127 {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .accessible-tous-et-sans-cond,
  .imgmr-3margin,
  .imgmr-3margin2 {
    padding: 0 15px 0 0;
  }

  .divmedia-body,
  .divmedia-body7,
  .divmedia-body8 {
    text-align: left;
    align-items: flex-start;
  }

  .accessible-tous {
    font-size: 18px;
    line-height: 1.3;
  }

  .ulrow2 {
    grid-template-columns: 1fr;
    max-width: 360px;
    gap: 25px;
    padding: 40px 0;
  }

  .licard,
  .licard2,
  .licard3,
  .licard4,
  .licard5 {
    max-width: 100%;
  }

  /* Comment ça marche - 2 colonnes mobile */
  .ullist-unstyled6 {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 30px 0;
  }

  .ullist-unstyled6::before {
    display: none;
  }

  .figurefig,
  .figurefig2 {
    width: 150px;
    min-width: 150px;
    height: 150px;
  }

  .jachte-ma-carte,
  .jactive-ma-carte {
    font-size: 12px;
    line-height: 1.3;
  }

  .ulrow3 {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .divinput-group {
    flex-direction: row;
  }

  .pwp-subtitle3 {
    font-size: 16px;
    padding: 0 10px;
  }

  .footer {
    padding: 40px 0 0;
  }

  .divrow3 {
    flex-direction: column;
    align-items: stretch;
    padding: 0 20px;
  }

  .ulmenu-menu-du-footermargin,
  .divcustomer-servicemargin {
    width: 100%;
    max-width: 100%;
    align-items: center;
  }

  .ulmenu-menu-du-footer,
  .divcustomer-service {
    align-items: center;
    text-align: center;
  }

  .a {
    justify-content: center;
  }

  .divtext-center3 {
    padding: 30px 20px 0;
  }

  .divmiddlefooter {
    padding: 40px 20px;
  }

  .divcontainer6 {
    flex-direction: column;
    align-items: center;
  }

  .divmr-3margin {
    padding: 0 0 20px 0;
    align-items: center;
  }

  .divmedia-body9 {
    align-items: center;
    text-align: center;
  }

  .ulmenu-plan-du-site-mentions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .smallcontainer {
    padding: 15px;
  }
}

/* ========================================== */
/* RESPONSIVE PETIT MOBILE - max 480px         */
/* ========================================== */
@media screen and (max-width: 480px) {
  .header-end {
    padding-top: 64px;
  }

  .ma-carte-de {
    font-size: 20px;
    line-height: 1.4;
  }

  .lavieavec-pcs {
    font-size: 24px;
    line-height: 1.2;
  }

  .tout-simplement {
    font-size: 24px;
    line-height: 1.3;
  }

  .h1title2,
  .h2wow {
    font-size: 24px;
  }

  .text {
    font-size: 16px;
  }

  .component-2,
  .component-22,
  .component-24 {
    padding: 14px 26px;
  }

  .ds-4 {
    font-size: 24px;
  }

  .sectioncarte,
  .avantages-cartes,
  .tarifs,
  .comment-ca-marche,
  .pdv {
    padding: 40px 15px;
  }

  .divjumbotron2,
  .divjumbotron3,
  .divjumbotron4,
  .sectionbg-gray,
  .divbg-green {
    padding: 30px 12px;
  }

  .ulrow2 {
    max-width: 100%;
    gap: 20px;
  }

  /* Comment ça marche - 1 colonne très petit mobile */
  .ullist-unstyled6 {
    grid-template-columns: 1fr;
    max-width: 280px;
    gap: 30px;
  }

  .figurefig,
  .figurefig2 {
    width: 160px;
    min-width: 160px;
    height: 160px;
  }

  .jachte-ma-carte,
  .jactive-ma-carte {
    font-size: 13px;
  }

  .component-211,
  .component-212 {
    padding: 10px 16px;
    font-size: 15px;
    min-height: 45px;
  }

  .france-mtropolitaine,
  .rechercher-par-code {
    font-size: 13px;
  }

  .accessible-tous {
    font-size: 17px;
  }

  .enregistrez-vous-avec-une {
    font-size: 14px;
    line-height: 22px;
  }

  .la-carte-de2 {
    font-size: 11px;
    line-height: 17px;
  }

  .mentions-lgales,
  .politique-de-confidentialit {
    font-size: 12px;
  }

  .pwp-subtitle3,
  .pwp-subtitle,
  .pwp-subtitlemargin,
  .pwp-subtitlemargin2 {
    font-size: 16px;
  }

  .la-carte-de {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ========================================== */
/* TRES PETIT MOBILE - max 360px               */
/* ========================================== */
@media screen and (max-width: 360px) {
  .ma-carte-de {
    font-size: 18px;
  }

  .lavieavec-pcs {
    font-size: 22px;
  }

  .tout-simplement,
  .h1title2,
  .h2wow {
    font-size: 22px;
  }

  .accessible-tous {
    font-size: 16px;
  }

  .figurefig,
  .figurefig2 {
    width: 140px;
    min-width: 140px;
    height: 140px;
  }
}