.elementor-8793 .elementor-element.elementor-element-d0cc5dc{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-8793 .elementor-element.elementor-element-d0cc5dc > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-8793 .elementor-element.elementor-element-4ff3897 > .elementor-widget-container{margin:-14px -10px 0px 0px;}.elementor-8793 .elementor-element.elementor-element-87ed0e1{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:11px;margin-bottom:0px;}.elementor-8793 .elementor-element.elementor-element-87ed0e1 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-8793 .elementor-element.elementor-element-956c6c5 > .elementor-widget-container{margin:-14px 0px 0px 0px;}.elementor-8793 .elementor-element.elementor-element-566da4e{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-8793 .elementor-element.elementor-element-566da4e > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-8793 .elementor-element.elementor-element-ecda8f3 > .elementor-widget-container{margin:-14px 0px 0px 0px;}.elementor-8793 .elementor-element.elementor-element-6f85b97{margin-top:23px;margin-bottom:23px;}.elementor-8793 .elementor-element.elementor-element-c310b4c{margin-top:-41px;margin-bottom:0px;}.elementor-8793 .elementor-element.elementor-element-d73abee{margin-top:12px;margin-bottom:0px;}.elementor-8793 .elementor-element.elementor-element-88222ae{margin-top:-17px;margin-bottom:0px;}.elementor-8793 .elementor-element.elementor-element-7498a6b{--spacer-size:89px;}.elementor-widget-media-carousel .elementor-carousel-image-overlay{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-8793 .elementor-element.elementor-element-f5db7ed.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-8793 .elementor-element.elementor-element-f5db7ed .elementor-swiper-button{font-size:20px;}.elementor-8793 .elementor-element.elementor-element-f5db7ed .elementor-carousel-image-overlay{background-color:rgba(10,175,229,0.85);}:root{--page-title-display:none;}@media(max-width:1139px){.elementor-8793 .elementor-element.elementor-element-f5db7ed.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}}@media(max-width:767px){.elementor-8793 .elementor-element.elementor-element-d0cc5dc{margin-top:31px;margin-bottom:0px;}.elementor-8793 .elementor-element.elementor-element-4ff3897 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-8793 .elementor-element.elementor-element-87ed0e1:not(.elementor-motion-effects-element-type-background), .elementor-8793 .elementor-element.elementor-element-87ed0e1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://dreamdog-europe.com/wp-content/uploads/2026/04/laurent-notiuk-333.jpg");}.elementor-8793 .elementor-element.elementor-element-f5db7ed.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:9px;}}/* Start custom CSS for html, class: .elementor-element-ecda8f3 *//* =========================
   HERO — BASE (MOBILE FIRST)
   ========================= */
.dd-hero{
  /* Visuels à utiliser (brief) */
  --dd-bg-mobile: url("https://dreamdog-europe.com/wp-content/uploads/2026/04/ChatGPT-Image-13-avr.-2026-10_24_55.png");
  --dd-bg-desktop: url("https://dreamdog-europe.com/wp-content/uploads/2026/04/laurent--scaled.webp");

  /* Blanc pur obligatoire */
  --dd-white: #ffffff;

  /* Bleu premium (à ajuster si votre charte a une valeur exacte) */
  --dd-blue-1: #18bbff;
  --dd-blue-2: #49e6ff;
  --dd-blue-3: #0a62ff;

  position: relative;
  overflow: hidden;

  /* Le visuel doit occuper toute la section */
  background-image: var(--dd-bg-mobile);
  background-size: cover;          /* MDN: cover remplit le conteneur (avec recadrage) */
  background-repeat: no-repeat;
  background-position: 50% 22%;

  /* Section immersive */
  min-height: clamp(850px, 100vh, 960px);
  width: 100%;

  /* Typo: reprendre la typo du site / du brief précédent */
  font-family: inherit;

  /* BLANC pur pour tout le contenu */
  color: var(--dd-white);

  padding: clamp(18px, 4vw, 64px);
  padding-top: clamp(10px, 4vw, 20px);
}

/* Overlay global léger (PAS de cadre/panneau) */
.dd-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* léger, subtil, élégant */
  background: rgba(0,0,0,0.18);
}

/* Accroche en haut (blanc pur) */
.dd-hero__topline{
  position: absolute;
  top: clamp(14px, 2.8vw, 26px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  margin: 0;
  padding: 10px 14px;

  /* Premium sans gris : texte blanc, et fond très léger */
  color: #fff;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 999px;

  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: clamp(1.00rem, 3.0vw, 1.15rem);
  line-height: 1.2;

  text-align: center;
  max-width: min(92vw, 980px);

  /* lisibilité sans panneau */
  text-shadow: 0 2px 18px rgba(0,0,0,0.50);
}

/* Contenu */
.dd-hero__content{
  position: relative;
  z-index: 2;

  /* Mobile: tout centré */
  text-align: center;

  margin: 0 auto;
  width: min(92vw, 740px);

  /* Laisser respirer sous l’accroche top */
  padding-top: clamp(78px, 16vw, 130px);
}

/* Bloc brand (mobile): badge + signature centrés */
.dd-hero__brand{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

/* Estampille (mobile centrée plus petite) */
.dd-hero__badge{
  width: clamp(84px, 20vw, 112px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
}

/* Signature : doit être blanche (brief “tout blanc”) */
.dd-hero__signature{
  width: clamp(220px, 60vw, 360px);
  height: auto;
  display: block;

  /* Convertit l’asset noir en blanc */
  filter: brightness(0) invert(1) drop-shadow(0 10px 24px rgba(0,0,0,0.35));
}

/* Desktop signature en absolute (cachée en mobile) */
.dd-hero__signature--desktop{
  display: none;
}

/* H1 (blanc pur, impactant) */
.dd-hero__title{
  margin: 0 0 16px 0;
  color: #fff;
  font-weight: 900;
  line-height: 1.06;
  font-size: clamp(1.85rem, 5.8vw, 3.15rem);

  /* lisibilité sans panneau */
  text-shadow: 0 2px 22px rgba(0,0,0,0.55);
}

/* Liste problématiques (puces style “check” premium) */
.dd-hero__bullets{
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;

  display: flex;
  flex-direction: column;
  align-items: center; /* mobile: bloc centré */
  gap: 10px;
}

.dd-hero__bullets li{
  color: #fff;
  font-weight: 750;
  font-size: clamp(1.03rem, 3.2vw, 1.18rem);
  line-height: 1.25;

  /* group icon + text centered */
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;

  text-shadow: 0 2px 18px rgba(0,0,0,0.52);
}

.dd-hero__bullets li::before{
  content: "✓";
  flex: 0 0 auto;

  width: 22px;
  height: 22px;
  border-radius: 999px;

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

  color: #fff;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);

  margin-top: 2px;
}

.dd-hero__bullets-last{
  font-weight: 900;
}

/* Positionnement (blanc pur) */
.dd-hero__positioning{
  margin: 0 0 18px 0;
  color: #fff;
  font-weight: 850;
  font-size: clamp(1.05rem, 3.2vw, 1.18rem);
  line-height: 1.28;

  text-shadow: 0 2px 22px rgba(0,0,0,0.55);
}

/* =========================
   BOUTONS — PREMIUM GLOSS
   ========================= */
.dd-hero__ctas{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 14px;
}

.dd-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  user-select: none;

  padding: 14px 18px;
  min-height: 52px;
  border-radius: 999px;

  font-weight: 900;
  letter-spacing: 0.01em;
  color: #fff; /* BLANC pur (règle générale) */

  /* pas d’opacité -> jamais “gris” */
  background: transparent;
  border: none;

  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

.dd-btn--gloss{
  /* Base premium */
  background: linear-gradient(135deg, var(--dd-blue-3) 0%, var(--dd-blue-1) 45%, var(--dd-blue-2) 100%);
  box-shadow:
    0 18px 44px rgba(0, 130, 255, 0.35),
    0 10px 26px rgba(0, 0, 0, 0.28);

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

  transform: translateZ(0);
}

/* Bordure “glass” + relief interne */
.dd-btn--gloss::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.34),
    rgba(255,255,255,0.10) 45%,
    rgba(0,0,0,0.06)
  );
  opacity: 1;
  pointer-events: none;
}

/* Sheen animé (reflet qui traverse le bouton) */
.dd-btn--gloss::after{
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 55%;
  height: 180%;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.55) 45%,
    rgba(255,255,255,0.00) 70%
  );

  transform: rotate(12deg);
  filter: blur(0.2px);
  opacity: 0.75;

  animation: dd-glint 3.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dd-glint{
  0%   { transform: translateX(0)   rotate(12deg); opacity: 0.0; }
  12%  { opacity: 0.75; }
  45%  { transform: translateX(280%) rotate(12deg); opacity: 0.0; }
  100% { transform: translateX(280%) rotate(12deg); opacity: 0.0; }
}

/* Hover/focus premium */
.dd-btn--gloss:hover{
  box-shadow:
    0 22px 54px rgba(0, 160, 255, 0.45),
    0 12px 30px rgba(0, 0, 0, 0.30);
  transform: translateY(-1px);
}

.dd-btn--gloss:focus-visible{
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Secondaire = même esprit, un peu plus “glass” */
.dd-btn--secondary.dd-btn--gloss{
  background: linear-gradient(135deg, rgba(10, 98, 255, 0.65) 0%, rgba(24, 187, 255, 0.56) 55%, rgba(73, 230, 255, 0.50) 100%);
  border: 1px solid rgba(255,255,255,0.40);
}

/* Sous-texte (blanc pur, pas d’opacité) */
.dd-hero__fineprint{
  margin: 0;
  color: #fff;
  font-size: 0.98rem;
  line-height: 1.25;
  font-weight: 700;
  text-shadow: 0 2px 18px rgba(0,0,0,0.50);
}

/* Accessibilité: réduire l’animation si l’utilisateur le demande */
@media (prefers-reduced-motion: reduce){
  .dd-btn--gloss,
  .dd-btn--gloss::after{
    animation: none !important;
    transition: none !important;
  }
}

/* =========================
   DESKTOP — ALIGN LEFT STRICT
   ========================= */
@media (min-width: 992px){
  .dd-hero{
    background-image: var(--dd-bg-desktop);
    background-position: 52% 52%;

    /* overlay global en dégradé (toujours global, jamais un panneau) */
  }

  .dd-hero::before{
    background: linear-gradient(
      to right,
      rgba(0,0,0,0.48) 0%,
      rgba(0,0,0,0.34) 38%,
      rgba(0,0,0,0.18) 64%,
      rgba(0,0,0,0.06) 100%
    );
  }

  /* Desktop: contenu à gauche */
  .dd-hero__content{
    text-align: left;
    margin-left: 0;
    width: min(44vw, 680px);
    padding-top: clamp(86px, 7vw, 130px);
  }

  /* Desktop: la liste s’aligne à gauche */
  .dd-hero__bullets{
    align-items: flex-start;
  }

  /* Desktop: estampille en haut à droite */
  .dd-hero__badge{
    position: absolute;
    z-index: 3;
    top: clamp(18px, 2.2vw, 34px);
    right: clamp(18px, 2.6vw, 44px);
    width: clamp(120px, 9vw, 160px);
  }

  /* Desktop: signature “côté mer”, proche Laurent */
  .dd-hero__signature--desktop{
    display: block;
    position: absolute;
    z-index: 3;

    /* Ajustez finement selon votre header et votre rendu final */
    right: clamp(54px, 6vw, 110px);
    bottom: clamp(120px, 10vw, 190px);

    width: clamp(280px, 22vw, 440px);
    height: auto;

    /* Blanc pur + ombre premium */
    filter: brightness(0) invert(1) drop-shadow(0 14px 34px rgba(0,0,0,0.38));
  }

  /* Sur desktop, la signature “dans le flux” n’est plus nécessaire (on garde l’absolute) */
  .dd-hero__signature--inflow{
    display: none;
  }

  /* Desktop: CTAs en ligne (landing page aérée) */
  .dd-hero__ctas{
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .dd-btn{
    padding: 14px 20px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0816758 *//* =========================
   SECTION – “Vous vous reconnaissez ici ?”
   ========================= */

.dd-recog {
  /* Couleurs neutres et lumineuses (épuré) */
  --dd-ink: #0b1f2a;
  --dd-muted: #395463;
  --dd-border: rgba(11, 31, 42, 0.10);
  --dd-surface: rgba(255, 255, 255, 0.78);

  background:#fff;
  color: var(--dd-ink);
  padding-block: clamp(44px, 6vw, 84px);
}

.dd-recog__container {
  max-width: 1160px;
  margin: 0 auto;
  padding-inline: clamp(18px, 3vw, 28px);
}

.dd-recog__header {
  text-align: center;
  display: grid;
  gap: 10px;
  margin-bottom: clamp(18px, 3vw, 28px);
}

/* Titre : on garde la police du thème, on ajuste juste taille/espacement */
.dd-recog__title {
  margin: 0;
  /* pas de font-family ici = même police titre */
  font-size: clamp(22px, 3.2vw, 36px);
  letter-spacing: 0.01em;
  line-height: 1.05;
}

/* Sous-titre : plus “landing”, moins gras */
.dd-recog__subtitle {
  margin: 0 auto;
  max-width: 68ch; /* lisibilité : évite des lignes trop longues */
  color: var(--dd-muted);
  font-weight: 520;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.55;
}

/* Grille responsive */
.dd-recog__grid {
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: clamp(14px, 2vw, 24px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .dd-recog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .dd-recog__grid {
    grid-template-columns: 1fr;
  }
}

/* Cartes “outlined”, épurées */
.dd-recog__card {
  background: var(--dd-surface);
  border: 1px solid var(--dd-border);
  border-radius: 18px;
  padding: 20px 20px 18px;
  backdrop-filter: blur(6px);

  display: grid;
  gap: 10px;
  align-content: start;

  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.dd-recog__card:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 31, 42, 0.18);
  box-shadow: 0 14px 34px rgba(11, 31, 42, 0.10);
}

/* Image : ronde, plus moderne (moins “grosse”, plus clean) */
.dd-recog__media {
  margin: 0;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(11, 31, 42, 0.10);
  box-shadow: 0 10px 20px rgba(11, 31, 42, 0.08);
}

.dd-recog__media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* évite déformation */
  object-position: center;
  display: block;
}

/* Titre de carte : toujours très scannable, mais moins “agressif” */
.dd-recog__cardTitle {
  margin: 2px 0 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 780; /* moins lourd que 900, mais reste impactant */
  line-height: 1.2;
}

/* Texte de carte : contenu moins gras */
.dd-recog__cardText {
  margin: 0;
  color: var(--dd-muted);
  font-size: 15px;
  font-weight: 470;
  line-height: 1.55;
  max-width: 36ch;
}

/* Réduction des animations */
@media (prefers-reduced-motion: reduce) {
  .dd-recog__card {
    transition: none !important;
  }
  .dd-recog__card:hover {
    transform: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d76dba0 *//* =========================
   METHOD 3 — section landing
   ========================= */

.dd-method3{
  --dd-ink: #0b1f2a;
  --dd-muted: #3b5666;
  --dd-accent: #00c2ff;
  --dd-bg1: #eaf8ff;
  --dd-bg2: #ffffff;

  /* couleurs icônes (proches de la capture) */
  --dd-a1: #26d6ff;
  --dd-a2: #79e9ff;

  --dd-b1: #7c3aed;
  --dd-b2: #60a5fa;

  --dd-c1: #2dd4bf;
  --dd-c2: #a7f3d0;

  background: #fff;
  padding-block: clamp(44px, 6vw, 90px);
  color: var(--dd-ink);
}

.dd-method3__container{
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: clamp(18px, 3vw, 28px);
}

/* header (titre + sous-titre) */
.dd-method3__header{
  text-align: center;
  display: grid;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 34px);
}

.dd-method3__title{
  margin: 0;
  /* on ne touche pas au font-family pour garder votre police */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.05;
  font-size: clamp(26px, 3.7vw, 44px);
}

.dd-method3__accent{
  color: var(--dd-accent);
}

.dd-method3__subtitle{
  margin: 0 auto;
  max-width: 70ch; /* lisibilité */
  color: var(--dd-muted);
  font-weight: 520; /* moins gras */
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.6;
}

/* grille 3 cartes */
.dd-method3__grid{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 22px);
  align-items: stretch;
}

/* carte */
.dd-method3__card{
  background: #fff;
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(11, 31, 42, 0.10);
  border: 1px solid rgba(11, 31, 42, 0.06);

  display: grid;
  gap: 14px;
}

/* image */
.dd-method3__media{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #dbeef7;
  aspect-ratio: 16 / 9;
}

.dd-method3__media img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* recadrage propre */
  object-position: center;
  display: block;
}

/* body */
.dd-method3__body{
  padding: 6px 10px 10px;
  display: grid;
  gap: 8px;
}

.dd-method3__head{
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  align-items: center;
}

.dd-method3__icon{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(11, 31, 42, 0.06);
  box-shadow: 0 10px 22px rgba(11, 31, 42, 0.10);
  color: var(--dd-ink);
}

.dd-method3__icon--a{
  background: linear-gradient(135deg, var(--dd-a1) 0%, var(--dd-a2) 100%);
}

.dd-method3__icon--b{
  background: linear-gradient(135deg, var(--dd-b1) 0%, var(--dd-b2) 100%);
}

.dd-method3__icon--c{
  background: linear-gradient(135deg, var(--dd-c1) 0%, var(--dd-c2) 100%);
}

.dd-method3__svg{
  width: 22px;
  height: 22px;
  display: block;
}

.dd-method3__cardTitle{
  margin: 0;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 18px;
  line-height: 1.15;
}

.dd-method3__text{
  margin: 0;
  color: var(--dd-ink);
  font-weight: 460; /* moins gras */
  font-size: 16px;
  line-height: 1.55;
  max-width: 44ch; /* lisibilité */
}

/* CTA (moins large sur desktop) */
.dd-method3__ctaWrap{
  display: flex;
  justify-content: center;
  margin-top: clamp(18px, 3.2vw, 34px);
}

.dd-method3__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* moins large */
  width: auto;
  max-width: 480px;
  padding: 16px 30px;

  border-radius: 999px;
  background: linear-gradient(135deg, #14b8e5 0%, #22c4ee 100%);
  color: #06161d;
  text-decoration: none;

  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 18px 40px rgba(20, 184, 229, 0.22), 0 16px 40px rgba(11, 31, 42, 0.10);

  min-height: 52px; /* confort tactile */
  transition: transform 180ms ease, filter 180ms ease;
}

.dd-method3__cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.dd-method3__cta:focus-visible{
  outline: 3px solid rgba(11, 31, 42, 0.42);
  outline-offset: 4px;
}

/* responsive */
@media (max-width: 980px){
  .dd-method3__grid{
    grid-template-columns: 1fr;
  }
  .dd-method3__card{
    padding: 14px;
  }
  .dd-method3__cta{
    width: 100%;
    max-width: 520px; /* encore “moins large” que full viewport, mais confortable */
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .dd-method3__cta{
    transition: none !important;
  }
  .dd-method3__cta:hover{
    transform: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-75940eb *//* ==========================================================
   ORIENTATION 4 COLONNES — version “design”
   - Ne définit aucun font-family : titres héritent du thème
   ========================================================== */

.dd-orient4{
  --o-ink: #0b1f2a;
  --o-muted: #3b5666;
  --o-accent: #00c2ff;

  /* Tuning knobs */
  --o-card-radius: 22px;
  --o-img-radius: 18px;
  --o-btn-maxw: 220px;      /* bouton centré, pas trop large */
  --o-shadow: 0 22px 60px rgba(11,31,42,0.10);

  background:  #ffff);
  color: var(--o-ink);
  padding-block: clamp(28px, 4vw, 54px);
}

.dd-orient4__container{
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
}

.dd-orient4__title{
  margin: 0 0 clamp(18px, 2.6vw, 28px);
  text-align: center;
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.45;
  font-weight: 650; /* un peu moins gras */
  color: var(--o-ink);
  max-width: 70ch;
  margin-inline: auto;
}

/* GRID mobile-first */
.dd-orient4__grid{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: 1fr; /* mobile */
  gap: clamp(14px, 2vw, 22px);
}

/* tablette: 2 colonnes */
@media (min-width: 720px){
  .dd-orient4__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* desktop: 4 colonnes (exigence) */
@media (min-width: 1100px){
  .dd-orient4__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dd-orient4__card{
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(11,31,42,0.08);
  border-radius: var(--o-card-radius);
  box-shadow: var(--o-shadow);
  overflow: hidden;

  /* centrage total + structure verticale */
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;

  padding: 16px;
  text-align: center;
}

/* IMAGE 4:5 plus grande */
.dd-orient4__media{
  margin: 0;
  border-radius: var(--o-img-radius);
  overflow: hidden;
  aspect-ratio: 4 / 5; /* format imposé */
  background: #e7f6ff;
}

/* recadrage propre sans déformer */
.dd-orient4__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* clé */
  object-position: center;
  display: block;
}

/* texte */
.dd-orient4__body{
  display: grid;
  gap: 10px;
  align-content: start;
  padding-inline: 4px;
}

.dd-orient4__cardTitle{
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 880;               /* impact titre */
  font-size: 16px;
  line-height: 1.15;
}

.dd-orient4__text{
  margin: 0 auto;
  color: var(--o-muted);
  font-weight: 460;               /* corps moins gras */
  font-size: 15px;
  line-height: 1.6;
  max-width: 32ch;                /* lecture “landing” */
}

/* bouton centré */
.dd-orient4__btn{
  justify-self: center;           /* centrage dans la carte */
  width: 100%;
  max-width: var(--o-btn-maxw);   /* “pas trop large” */
  min-height: 52px;               /* touch-friendly */

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

  border-radius: 999px;
  text-decoration: none;

  font-weight: 820;
  letter-spacing: 0.01em;

  background: linear-gradient(135deg, var(--o-accent) 0%, rgba(0,194,255,0.75) 100%);
  color: #06212d;
  box-shadow: 0 18px 42px rgba(0,194,255,0.20), 0 16px 40px rgba(11,31,42,0.10);

  transition: transform 180ms ease, filter 180ms ease;
}

.dd-orient4__btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* focus visible clavier */
.dd-orient4__btn:focus-visible{
  outline: 3px solid rgba(11,31,42,0.45);
  outline-offset: 4px;
}

/* Mobile: bouton full-width (confort) */
@media (max-width: 719px){
  .dd-orient4__btn{ max-width: 100%; }
}

/* Réduction des animations si l’utilisateur le demande */
@media (prefers-reduced-motion: reduce){
  .dd-orient4__btn{ transition: none !important; }
  .dd-orient4__btn:hover{ transform: none !important; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-003c8a0 *//* =========================
   VIP DIFF — Section landing
   ========================= */

.dd-vipdiff{
  --dd-ink: #0b1f2a;
  --dd-muted: #3b5666;
  --dd-accent: #00c2ff;
  --dd-surface: #ffffff;
  --dd-border: rgba(11, 31, 42, 0.10);

  background:  #ffffff 70%);
  padding-block: clamp(44px, 6vw, 88px);
  color: var(--dd-ink);
}

/* conteneur central */
.dd-vipdiff__container{
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(18px, 3vw, 28px);
}

/* header */
.dd-vipdiff__header{
  text-align: center;
  display: grid;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 34px);
}

.dd-vipdiff__title{
  margin: 0;
  /* on ne force pas la font-family pour respecter votre thème */
  font-weight: 850;
  letter-spacing: 0.015em;
  line-height: 1.05;
  text-transform: uppercase;
  font-size: clamp(26px, 3.5vw, 42px);
}

.dd-vipdiff__accent{
  color: var(--dd-accent);
}

.dd-vipdiff__subtitle{
  margin: 0 auto;
  max-width: 72ch;
  color: var(--dd-muted);
  font-weight: 520; /* moins “gras” que la capture */
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.6;
}

/* grille principale */
.dd-vipdiff__grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(18px, 2.4vw, 28px);
  align-items: stretch;
}

/* image */
.dd-vipdiff__photo{
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(11, 31, 42, 0.14);
  background: #dcecf6;

  /* ratio proche de la capture */
  aspect-ratio: 16 / 10;
}

.dd-vipdiff__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* carte droite */
.dd-vipdiff__card{
  background: var(--dd-surface);
  border: 1px solid rgba(11, 31, 42, 0.06);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(11, 31, 42, 0.10);
  padding: clamp(18px, 2.2vw, 26px);
  display: grid;
  gap: 18px;
}

/* top row icon + texte */
.dd-vipdiff__top{
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  align-items: start;
}

.dd-vipdiff__icon{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, rgba(0, 194, 255, 0.45) 0%, rgba(0, 194, 255, 0.18) 55%, rgba(11, 31, 42, 0.04) 100%);
  border: 1px solid rgba(11, 31, 42, 0.06);
  box-shadow: 0 12px 28px rgba(11, 31, 42, 0.10);
  color: var(--dd-ink);
}

.dd-vipdiff__svg{
  width: 22px;
  height: 22px;
  display: block;
}

.dd-vipdiff__cardTitle{
  margin: 0 0 8px;
  font-weight: 760; /* moins lourd, mais reste “headline” */
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.25;
}

.dd-vipdiff__cardText{
  margin: 0;
  color: var(--dd-muted);
  font-weight: 460;
  font-size: 15px;
  line-height: 1.65;
  max-width: 60ch;
}

/* mini comparatif */
.dd-vipdiff__compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dd-vipdiff__mini{
  background: linear-gradient(180deg, #fbfdff 0%, #f6fbff 100%);
  border: 1px solid rgba(11, 31, 42, 0.08);
  border-radius: 18px;
  padding: 14px 14px 13px;
}

.dd-vipdiff__miniTitle{
  margin: 0 0 8px;
  font-weight: 760;
  font-size: 15px;
  line-height: 1.2;
}

.dd-vipdiff__miniText{
  margin: 0;
  color: var(--dd-muted);
  font-weight: 450;
  font-size: 14px;
  line-height: 1.55;
}

/* CTA */
.dd-vipdiff__cta{
  width: 100%;
  min-height: 52px; /* tactile confortable */
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.01em;

  background: linear-gradient(135deg, rgba(0, 194, 255, 1) 0%, rgba(0, 194, 255, 0.75) 100%);
  color: #06212d;

  box-shadow: 0 14px 34px rgba(0, 194, 255, 0.22), 0 18px 46px rgba(11, 31, 42, 0.12);
  transition: transform 180ms ease, filter 180ms ease;
}

.dd-vipdiff__cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* Focus visible (clavier) */
.dd-vipdiff__cta:focus-visible{
  outline: 3px solid rgba(11, 31, 42, 0.45);
  outline-offset: 4px;
}

/* Responsive */
@media (max-width: 980px){
  .dd-vipdiff__grid{
    grid-template-columns: 1fr;
  }
  .dd-vipdiff__compare{
    grid-template-columns: 1fr;
  }
}

/* Respect “réduire les animations” */
@media (prefers-reduced-motion: reduce){
  .dd-vipdiff__cta{
    transition: none !important;
  }
  .dd-vipdiff__cta:hover{
    transform: none !important;
  }
}/* End custom CSS */