:root {
  --ink: #161A34;
  --muted: #6B7086;

  --purple: #6C4FE0;
  --purple-deep: #5238C7;
  --blue: #4F7CF3;
  --pink: #E14F9B;
  --yellow: #FFC22E;
  --green: #2FBF8F;

  --lav-bg: #EEF3FF;
  --pink-bg: #F6ECF9;
  --peach-bg: #FFF3DE;
  --skyblue-bg: #EAF4FF;

  --navy: #10152B;
  --white: #FFFFFF;

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 999px;
}


/* =========================
   RESET
   ========================= */

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  color: var(--ink);
  background: #FFFFFF;

  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
.brand-name {
  font-family: "Baloo 2", sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button,
input {
  font: inherit;
}


/* =========================
   CONTAINER
   ========================= */

.wrap {
  width: 100%;

  margin: 0;
  padding: 0 48px;

  position: relative;
}


/* =========================
   BOUTONS
   ========================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 13px 24px;

  border-radius: var(--radius-sm);

  font-size: 14.5px;
  font-weight: 700;

  cursor: pointer;
  border: none;

  white-space: nowrap;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

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

.btn-primary {
  color: #FFFFFF;

  background:
    linear-gradient(
      120deg,
      #6C4FE0,
      #4F7CF3
    );

  box-shadow:
    0 10px 22px rgba(90, 70, 220, 0.28);
}

.btn-primary:hover {
  box-shadow:
    0 14px 28px rgba(90, 70, 220, 0.35);
}

.btn-outline {
  color: var(--ink);
  background: #FFFFFF;

  border: 1.6px solid #DCDFEE;
}

.btn-outline:hover {
  border-color: var(--purple);
}


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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 32px;

  background: #FFFFFF;

  position: relative;
  z-index: 100;

  border-bottom: 1px solid #F0F1F7;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 19px;
  font-weight: 700;

  color: var(--ink);
}

.logo .crown {
  font-size: 20px;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 30px;
}

.main-nav a {
  font-size: 14.5px;
  font-weight: 600;

  color: var(--muted);

  transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--purple);
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 22px;

  font-size: 17px;
  color: var(--ink);
}

.header-icons span {
  cursor: pointer;
}

.header-icons .cart {
  position: relative;
}

.header-icons .cart .badge {
  position: absolute;

  top: -8px;
  right: -9px;

  width: 16px;
  height: 16px;

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

  background: var(--pink);
  color: #FFFFFF;

  font-size: 10px;
  font-weight: 700;

  border-radius: 50%;
}


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

.hero {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      120deg,
      #EAF1FF 0%,
      #F1ECFC 55%,
      #FDEFF6 100%
    );

  padding: 56px 0 34px;
}

.hero-blob-1 {
  position: absolute;

  top: 40px;
  right: 34%;

  width: 230px;
  height: 230px;

  background:
    radial-gradient(
      circle,
      #FFD966 0%,
      #FFC22E 70%
    );

  border-radius:
    50% 45% 55% 50% /
    55% 50% 50% 45%;

  opacity: 0.55;

  filter: blur(2px);
}

.hero-blob-2 {
  position: absolute;

  bottom: -40px;
  left: 0;

  width: 260px;
  height: 180px;

  background:
    radial-gradient(
      circle,
      #C9E3FF 0%,
      transparent 70%
    );
}

.hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.05fr);

  align-items: center;

  gap: 80px;

  position: relative;
  z-index: 2;

  min-height: 420px;
}

.hero-text {
  position: relative;
  z-index: 5;
}

.hero-pill {
  display: inline-block;

  background: #FFFFFF;
  color: var(--purple-deep);

  font-size: 12.5px;
  font-weight: 700;

  padding: 8px 16px;

  border-radius: var(--radius-sm);

  margin-bottom: 20px;

  box-shadow:
    0 4px 14px rgba(90, 70, 220, 0.12);
}

.hero-text h1 {
  font-size: clamp(38px, 4vw, 58px);

  line-height: 1.1;

  font-weight: 700;

  margin: 0 0 16px;

  color: var(--ink);
}

.grad-purple {
  background:
    linear-gradient(
      100deg,
      #6C4FE0,
      #4F7CF3
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.grad-pink {
  background:
    linear-gradient(
      100deg,
      #C64FE0,
      #E14F9B
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.hero-text p {
  max-width: 400px;

  font-size: 14.5px;
  color: var(--muted);

  line-height: 1.6;

  margin: 0 0 24px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 30px;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;

  gap: 26px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 12.5px;
  font-weight: 600;
}

.trust-item .ic {
  width: 30px;
  height: 30px;

  border-radius: 50%;

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

  font-size: 14px;

  flex-shrink: 0;
}

.trust-item span.label {
  display: block;
  color: var(--ink);
}

.trust-item span.sub {
  display: block;

  font-size: 11px;
  font-weight: 500;

  color: var(--muted);
}


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

.hero-visual {
  position: relative;

  display: block;

  min-height: 480px;
}

.hero-photo {
  position: absolute;

  right: 0;
  top: 0;
  bottom: 0;

  width: 78%;

  object-fit: cover;
  object-position: center 15%;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.7) 5%,
      #000 11%,
      #000 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.7) 5%,
      #000 11%,
      #000 100%
    );
}

.watch-callout {
  position: absolute;

  top: 6%;
  right: 6%;

  background: #FFFFFF;

  padding: 8px 14px;

  border-radius: 14px;

  font-size: 11.5px;
  font-weight: 700;

  color: var(--ink);

  box-shadow:
    0 8px 20px rgba(30, 30, 60, 0.12);

  line-height: 1.3;

  z-index: 4;
}

.watch-callout .line {
  width: 26px;
  height: 2px;

  background: var(--pink);

  position: absolute;

  bottom: -14px;
  left: 20px;

  transform: rotate(45deg);
}


/* =========================
   WATCH 3D
   ========================= */

.watch-3d-stage {
  perspective: 1100px;

  position: absolute;

  left: -2%;
  top: 50%;

  transform: translateY(-46%);

  z-index: 3;
}

.watch-3d {
  width: 280px;
  height: 290px;

  position: relative;

  animation:
    watchRotate 6s ease-in-out infinite;

  transform-style: preserve-3d;
}

@keyframes watchRotate {

  0% {
    transform:
      rotateY(-14deg)
      rotateX(4deg)
      translateY(0);
  }

  50% {
    transform:
      rotateY(14deg)
      rotateX(-3deg)
      translateY(-16px);
  }

  100% {
    transform:
      rotateY(-14deg)
      rotateX(4deg)
      translateY(0);
  }
}

.watch-photo {
  width: 100%;
  height: 100%;

  object-fit: contain;

  filter:
    drop-shadow(
      0 26px 26px
      rgba(20, 40, 120, 0.35)
    );
}

.carousel-dots {
  display: flex;
  justify-content: center;

  gap: 7px;

  margin-top: 26px;

  position: relative;
  z-index: 2;
}

.carousel-dots span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #D6D2F0;
}

.carousel-dots span.active {
  width: 20px;

  border-radius: 5px;

  background: var(--purple);
}


/* =========================
   FEATURES
   ========================= */

.section-features {
  padding: 70px 0;

  background: #FFFFFF;
}

.features-top {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.85fr)
    minmax(0, 2.3fr);

  gap: 30px;

  align-items: center;
}

.features-top h2 {
  font-size: 26px;
  font-weight: 700;

  margin: 0 0 10px;

  line-height: 1.25;
}

.features-top p {
  font-size: 13.5px;

  color: var(--muted);

  line-height: 1.55;

  margin: 0 0 18px;
}

.feature-cards {
  display: flex;

  gap: 16px;
}

.feature-card {
  flex: 1;

  background: #FFFFFF;

  border: 1px solid #EFF0F7;

  border-radius: 18px;

  padding: 20px 14px;

  text-align: center;

  box-shadow:
    0 8px 24px
    rgba(30, 30, 70, 0.05);
}

.feature-card .ic {
  width: 46px;
  height: 46px;

  border-radius: 50%;

  margin: 0 auto 12px;

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

  font-size: 19px;

  color: #FFFFFF;
}

.feature-card h4 {
  font-size: 13px;
  font-weight: 700;

  margin: 0 0 6px;
}

.feature-card p {
  font-size: 11px;

  color: var(--muted);

  line-height: 1.4;

  margin: 0;
}


/* =========================
   NOS MONTRES
   ========================= */

.section-watches {
  padding: 70px 0;

  background: #F7F8FC;
}

.watches-top {
  display: grid;

  grid-template-columns:
    minmax(180px, 0.7fr)
    minmax(0, 3fr);

  gap: 30px;

  align-items: center;
}

.watches-top h2 {
  font-size: 24px;
  font-weight: 700;

  margin: 0 0 8px;
}

.watches-top p {
  font-size: 13px;

  color: var(--muted);

  margin: 0 0 16px;
}

.watch-grid {
  display: grid;

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

  gap: 18px;
}

.watch-card {
  background: #FFFFFF;

  border-radius: 18px;

  padding: 16px;

  box-shadow:
    0 8px 24px
    rgba(30, 30, 70, 0.05);

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

.watch-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 14px 30px
    rgba(30, 30, 70, 0.10);
}

.thumb-photo {
  width: 100%;
  height: 130px;

  border-radius: 14px;

  margin-bottom: 12px;

  object-fit: contain;

  background: #F7F8FC;
}

.watch-card-body h4 {
  font-size: 14.5px;
  font-weight: 700;

  margin: 0 0 2px;
}

.watch-card-body .tag {
  font-size: 11.5px;

  color: var(--muted);

  margin-bottom: 8px;
}

.watch-card-foot {
  display: flex;

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

  margin-bottom: 8px;
}

.watch-card-foot .price {
  font-size: 14px;

  font-weight: 700;

  color: var(--purple-deep);
}

.watch-card-foot .arrow {
  width: 26px;
  height: 26px;

  border-radius: 50%;

  background: #F1EEFC;

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

  font-size: 12px;

  color: var(--purple);
}

.swatches {
  display: flex;

  gap: 6px;

  margin-top: 10px;
}

.swatches span {
  width: 12px;
  height: 12px;

  border-radius: 50%;

  display: inline-block;

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


/* =========================
   POURQUOI KIDDOWATCH
   ========================= */

.section-why {
  padding: 60px 0;

  background:
    linear-gradient(
      120deg,
      #F7ECFB,
      #EDE8FC
    );

  position: relative;

  overflow: hidden;
}

.why-grid {
  display: grid;

  grid-template-columns:
    minmax(260px, 0.55fr)
    minmax(0, 2.4fr);

  gap: 36px;

  align-items: center;
}

.why-photo-wrap {
  border-radius: 20px;

  overflow: hidden;

  position: relative;
}

.why-photo {
  width: 100%;
  height: 220px;

  border-radius: 20px;

  object-fit: cover;

  object-position: center;
}

.why-bubble {
  position: absolute;

  top: 8px;
  left: 60%;

  background: #FFFFFF;

  padding: 6px 12px;

  border-radius: 12px;

  font-size: 10.5px;
  font-weight: 700;

  color: var(--pink);

  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.08);

  transform: rotate(-4deg);
}

.why-head h2 {
  font-size: 23px;
  font-weight: 700;

  margin: 0 0 18px;
}

.why-cols {
  display: grid;

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

  gap: 20px;
}

.why-col .ic {
  width: 42px;
  height: 42px;

  border-radius: 50%;

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

  font-size: 18px;

  color: #FFFFFF;

  margin-bottom: 10px;
}

.why-col h4 {
  font-size: 13.5px;
  font-weight: 700;

  margin: 0 0 5px;
}

.why-col p {
  font-size: 11px;

  color: var(--muted);

  line-height: 1.4;

  margin: 0;
}


/* =========================
   NOUVEAUTÉS
   ========================= */

.section-news {
  padding: 70px 0;

  background: #FFFFFF;
}

.news-top {
  margin-bottom: 30px;
}

.news-top h2 {
  font-size: 24px;
  font-weight: 700;

  margin: 0 0 8px;
}

.news-top p {
  font-size: 13px;

  color: var(--muted);

  margin: 0 0 16px;
}

.news-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.6fr)
    minmax(280px, 1fr);

  gap: 20px;
}

.news-card {
  position: relative;

  background:
    linear-gradient(
      120deg,
      #F9E4F0,
      #F3ECFB
    );

  border-radius: 20px;

  padding: 26px;

  display: flex;
  align-items: center;

  gap: 24px;
}

.news-card-img {
  border-radius: 20px;

  overflow: hidden;

  box-shadow:
    0 8px 24px
    rgba(30, 30, 70, 0.06);
}

.news-card-img img {
  width: 100%;
}

.news-card .thumb {
  width: 130px;
  height: 130px;

  border-radius: 16px;

  background:
    linear-gradient(
      150deg,
      #E14F9B,
      #8A5CF6
    );

  flex-shrink: 0;

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

  font-size: 40px;

  color: #FFFFFF;
}

.news-badge {
  position: absolute;

  top: 16px;
  left: 170px;

  background: var(--pink);

  color: #FFFFFF;

  font-size: 9.5px;
  font-weight: 700;

  padding: 3px 10px;

  border-radius: var(--radius-sm);
}

.news-card h4 {
  font-size: 17px;
  font-weight: 700;

  margin: 26px 0 6px;
}

.news-card p {
  font-size: 12.5px;

  color: var(--muted);

  margin: 0 0 8px;
}

.news-card .price {
  font-size: 15px;
  font-weight: 700;
}

.news-arrows {
  position: absolute;

  bottom: 16px;
  left: 26px;

  display: flex;

  gap: 8px;
}

.news-arrows span {
  width: 26px;
  height: 26px;

  border-radius: 50%;

  background: #FFFFFF;

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

  font-size: 12px;

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.08);
}

.customize-card {
  background:
    linear-gradient(
      150deg,
      #FFF3DE,
      #FFE3B8
    );

  border-radius: 20px;

  padding: 26px;

  position: relative;

  overflow: hidden;
}

.customize-card h4 {
  font-size: 16px;
  font-weight: 700;

  margin: 0 0 6px;
}

.customize-card p {
  font-size: 12px;

  color: var(--muted);

  margin: 0 0 14px;
}

.customize-avatar {
  position: absolute;

  right: 10px;
  top: 10px;

  font-size: 44px;
}


/* =========================
   SECTION PARENTS
   ========================= */

.section-parents {
  padding: 70px 0;

  background: var(--skyblue-bg);
}

.parents-grid {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.9fr)
    minmax(280px, 1.3fr)
    minmax(220px, 0.9fr);

  gap: 30px;

  align-items: center;
}

.parents-photo {
  width: 100%;
  height: 220px;

  border-radius: 20px;

  object-fit: cover;

  object-position: center;

  display: block;
}

.parents-text h3 {
  font-size: 19px;
  font-weight: 700;

  margin: 0 0 8px;
}

.parents-text p {
  font-size: 13px;

  color: var(--muted);

  margin: 0 0 16px;

  line-height: 1.5;
}

.check-list {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px 20px;

  margin-bottom: 18px;
}

.check-list li {
  font-size: 12.5px;

  font-weight: 600;

  display: flex;
  align-items: center;

  gap: 8px;
}

.check-list .tick {
  color: var(--green);

  font-weight: 800;
}

.parents-phone {
  position: relative;

  display: flex;

  justify-content: center;
}

.phone-mock {
  width: 170px;
  height: 230px;

  border-radius: 26px;

  box-shadow:
    0 20px 40px
    rgba(30, 50, 140, 0.15);

  border: 6px solid #FFFFFF;

  position: relative;

  overflow: hidden;
}

.phone-mock img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.phone-bubble {
  position: absolute;

  top: -6px;
  right: -22px;

  background: var(--blue);

  color: #FFFFFF;

  font-size: 11px;
  font-weight: 700;

  padding: 8px 14px;

  border-radius: 14px;

  box-shadow:
    0 8px 18px
    rgba(60, 100, 220, 0.3);
}

.phone-heart {
  position: absolute;

  bottom: 10px;
  right: -16px;

  width: 34px;
  height: 34px;

  background: #FFFFFF;

  border-radius: 50%;

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

  font-size: 15px;

  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.1);
}


/* =========================
   CTA
   ========================= */

.cta-banner-wrap {
  padding: 0 48px;

  margin: 50px 0;
}

.cta-banner {
  background:
    linear-gradient(
      100deg,
      #5B3FD6 0%,
      #4F7CF3 60%,
      #4FC3F3 100%
    );

  border-radius: var(--radius-sm);

  padding: 14px 36px 14px 14px;

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

  gap: 20px;

  color: #FFFFFF;

  flex-wrap: wrap;

  overflow: hidden;
}

.cta-photo {
  width: 70px;
  height: 70px;

  border-radius: 50%;

  object-fit: cover;

  object-position: center top;

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

  flex-shrink: 0;
}

.cta-left {
  display: flex;
  align-items: center;

  gap: 14px;
}

.cta-left .ic {
  width: 42px;
  height: 42px;

  border-radius: 50%;

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

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

  font-size: 20px;
}

.cta-left strong {
  font-size: 16px;
  font-weight: 700;
}

.cta-mid .btn {
  background: #FFFFFF;

  color: var(--purple-deep);
}

.cta-right {
  font-size: 13px;

  font-weight: 600;

  display: flex;
  align-items: center;

  gap: 8px;
}


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

.site-footer {
  background: var(--navy);

  color: #B9BDD4;

  padding: 56px 0 24px;
}

.footer-grid {
  display: grid;

  grid-template-columns:
    1.5fr
    1fr
    1fr
    1.3fr;

  gap: 36px;

  padding-bottom: 34px;

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

.footer-brand {
  display: flex;
  align-items: center;

  gap: 8px;

  color: #FFFFFF;

  font-size: 17px;
  font-weight: 700;

  margin-bottom: 10px;
}

.footer-col p {
  max-width: 220px;

  font-size: 12.5px;

  color: #8B90A8;

  line-height: 1.6;
}

.footer-col h5 {
  color: #FFFFFF;

  font-size: 13px;
  font-weight: 700;

  margin: 0 0 14px;
}

.footer-col ul li {
  font-size: 12.5px;

  color: #9297AC;

  margin-bottom: 10px;
}

.newsletter-input {
  display: flex;

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

  border-radius: 8px;

  padding: 4px;

  margin-top: 10px;
}

.newsletter-input input {
  flex: 1;

  min-width: 0;

  background: transparent;

  border: none;

  padding: 9px 10px;

  color: #FFFFFF;

  font-size: 12.5px;

  outline: none;
}

.newsletter-input input::placeholder {
  color: #8B90A8;
}

.btn-subscribe {
  background: var(--purple);

  color: #FFFFFF;

  border: none;

  padding: 9px 14px;

  border-radius: 6px;

  font-weight: 700;

  font-size: 14px;

  cursor: pointer;
}

.socials {
  display: flex;

  gap: 10px;

  margin-top: 16px;
}

.socials span {
  width: 30px;
  height: 30px;

  border-radius: 50%;

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

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

  font-size: 13px;

  color: #FFFFFF;
}

.footer-bottom {
  display: flex;

  justify-content: space-between;

  padding-top: 20px;

  font-size: 11.5px;

  color: #767B92;

  flex-wrap: wrap;

  gap: 10px;
}

.footer-bottom .legal {
  display: flex;

  gap: 20px;
}


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

@media (max-width: 980px) {

  .wrap {
    padding: 0 30px;
  }

  /* HEADER */

  .main-nav {
    display: none;
  }

  .site-header {
    padding: 15px 24px;
  }

  /* HERO */

  .hero-grid {
    grid-template-columns: 1fr;

    gap: 30px;

    min-height: auto;
  }

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

  .hero-text p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-ctas,
  .trust-row {
    justify-content: center;
  }

  .hero-visual {
    min-height: 430px;

    max-width: 700px;

    width: 100%;

    margin: 0 auto;
  }

  .watch-3d-stage {
    left: 5%;
  }

  /* FEATURES */

  .features-top {
    grid-template-columns: 1fr;
  }

  .features-top > div:first-child {
    text-align: center;
  }

  .feature-cards {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  /* WATCHES */

  .watches-top {
    grid-template-columns: 1fr;
  }

  .watches-top > div:first-child {
    text-align: center;
  }

  .watch-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  /* WHY */

  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-photo {
    height: 300px;
  }

  .why-cols {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  /* NEWS */

  .news-grid {
    grid-template-columns: 1fr;
  }

  /* PARENTS */

  .parents-grid {
    grid-template-columns: 1fr;
  }

  .parents-photo {
    height: 300px;
  }

  /* FOOTER */

  .footer-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


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

@media (max-width: 600px) {

  .wrap {
    padding: 0 20px;
  }

  /* HEADER */

  .site-header {
    padding: 13px 18px;
  }

  .logo {
    font-size: 17px;
  }

  .header-icons {
    gap: 12px;

    font-size: 15px;
  }

  /* HERO */

  .hero {
    padding: 40px 0 25px;
  }

  .hero-grid {
    gap: 10px;
  }

  .hero-pill {
    font-size: 10.5px;

    padding: 7px 12px;
  }

  .hero-text h1 {
    font-size: 38px;
  }

  .hero-text p {
    font-size: 13px;
  }

  .hero-ctas {
    flex-direction: column;

    align-items: stretch;

    margin-bottom: 24px;
  }

  .hero-ctas .btn {
    width: 100%;
  }

  .trust-row {
    display: grid;

    grid-template-columns: 1fr;

    gap: 10px;

    text-align: left;

    max-width: 220px;

    margin: 0 auto;
  }

  .hero-visual {
    min-height: 330px;
  }

  .hero-photo {
    width: 82%;

    right: -5%;

    object-position: center;
  }

  .watch-3d-stage {
    left: 0;

    transform:
      translateY(-45%)
      scale(0.72);
  }

  .watch-callout {
    font-size: 10px;

    right: 3%;
  }

  /* SECTIONS */

  .section-features,
  .section-watches,
  .section-news,
  .section-parents {
    padding: 50px 0;
  }

  .section-why {
    padding: 50px 0;
  }

  /* FEATURES */

  .feature-cards {
    grid-template-columns: 1fr;
  }

  /* WATCHES */

  .watch-grid {
    grid-template-columns: 1fr;
  }

  .thumb-photo {
    height: 180px;
  }

  /* WHY */

  .why-photo {
    height: 230px;
  }

  .why-cols {
    grid-template-columns: 1fr;
  }

  /* NEWS */

  .news-card {
    flex-direction: column;

    align-items: flex-start;

    padding: 20px;
  }

  .news-card .thumb {
    width: 100%;
    height: 180px;
  }

  .news-badge {
    left: 20px;

    top: 215px;
  }

  .news-card h4 {
    margin-top: 20px;
  }

  .news-arrows {
    position: static;

    margin-top: 15px;
  }

  /* PARENTS */

  .parents-photo {
    height: 230px;
  }

  .check-list {
    grid-template-columns: 1fr;
  }

  .phone-bubble {
    right: -10px;
  }

  .phone-heart {
    right: -10px;
  }

  /* CTA */

  .cta-banner-wrap {
    padding: 0 20px;

    margin: 35px auto;
  }

  .cta-banner {
    padding: 20px;

    border-radius: 20px;

    flex-direction: column;

    align-items: flex-start;
  }

  .cta-left {
    width: 100%;
  }

  .cta-mid {
    width: 100%;
  }

  .cta-mid .btn {
    width: 100%;
  }

  .cta-right {
    font-size: 12px;
  }

  /* FOOTER */

  .site-footer {
    padding: 45px 0 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .footer-bottom {
    flex-direction: column;

    align-items: flex-start;
  }

  .footer-bottom .legal {
    flex-direction: column;

    gap: 8px;
  }
}


/* =========================================================
   PETIT MOBILE
   ========================================================= */

@media (max-width: 390px) {

  .wrap {
    padding: 0 16px;
  }

  .site-header {
    padding: 12px 14px;
  }

  .logo {
    font-size: 16px;
  }

  .header-icons {
    gap: 9px;

    font-size: 14px;
  }

  .hero-text h1 {
    font-size: 34px;
  }

  .hero-pill {
    font-size: 9.5px;
  }

  .hero-visual {
    min-height: 290px;
  }

  .watch-3d-stage {
    transform:
      translateY(-45%)
      scale(0.62);
  }

  .feature-card {
    padding: 18px 12px;
  }

  .phone-mock {
    width: 150px;
    height: 210px;
  }
}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

:focus-visible {
  outline: 3px solid var(--purple);

  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================
   MENU MOBILE (conservé de l'ancienne version :
   le HTML utilise ces classes)
   ========================================================= */

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--ink);
}

.header-icons button {
  cursor: pointer;
}

.icon-btn {
  background: none;
  border: none;
  font-size: 17px;
  color: var(--ink);
}

.mobile-menu {
  display: none;
}

.mobile-menu.open {
  display: block;
  background: #fff;
  border-top: 1px solid #F0F1F7;
}

.mobile-menu ul {
  display: flex;
  flex-direction: column;
  padding: 12px 24px;
  gap: 2px;
}

.mobile-menu a {
  display: block;
  padding: 10px 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 15px;
  border-bottom: 1px solid #F5F6FA;
}

@media (max-width: 980px) {
  .menu-toggle {
    display: block;
  }
}


/* =========================================================
   FAQ (conservé de l'ancienne version :
   le HTML utilise ces classes)
   ========================================================= */

.section-faq { padding: 70px 0; background: #F7F8FC; }
.section-faq h2 { font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.faq-intro { font-size: 13.5px; color: var(--muted); margin: 0 0 24px; }
.faq-item { background: #fff; border: 1px solid #EFF0F7; border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; }
.faq-item summary { cursor: pointer; font-weight: 700; font-size: 14.5px; }
.faq-item p { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }

/* =========================================================
   CORRECTIONS PHOTOS
   ========================================================= */


/* Cartes montres : fond blanc, montre centrée */
.watch-card .thumb-photo {
  background: #FFFFFF; height: 160px; padding: 8px; object-fit: contain;
}

/* Nouveautés : le fond clair des photos se fond dans la carte */
.news-card .thumb-photo,
.customize-card .thumb-photo { mix-blend-mode: multiply; border-radius: 16px; }

/* Parents : photo plus haute */
.parents-photo { height: 260px; object-position: center 30%; }

/* Écran d'application dans le téléphone */
.phone-mock { background: #FFFFFF; }
.app-screen { height: 100%; display: flex; flex-direction: column; gap: 7px; padding: 8px; font-size: 9.5px; }
.app-top { display: flex; justify-content: space-between; font-weight: 700; color: var(--ink); }
.app-map {
  flex: 1; border-radius: 12px; position: relative; overflow: hidden;
  background:
    linear-gradient(90deg, transparent 46%, #FFFFFF 46%, #FFFFFF 54%, transparent 54%),
    linear-gradient(0deg, transparent 58%, #FFFFFF 58%, #FFFFFF 64%, transparent 64%),
    linear-gradient(35deg, transparent 70%, #FFFFFF 70%, #FFFFFF 74%, transparent 74%),
    #DCEFE4;
}
.app-zone {
  position: absolute; left: 50%; top: 45%; width: 64px; height: 64px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(79, 124, 243, 0.18); border: 2px solid rgba(79, 124, 243, 0.5);
}
.app-pin { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -85%); font-size: 20px; }
.app-card { background: #F1EEFC; border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.app-card strong { font-size: 10.5px; color: var(--ink); }
.app-card span { color: var(--muted); }
.app-actions { display: flex; gap: 5px; }
.app-actions span {
  flex: 1; text-align: center; background: var(--purple); color: #FFFFFF;
  border-radius: 999px; padding: 5px 0; font-weight: 700;
}


/* =========================================================
   NAV + HERO (d'après la maquette)
   ========================================================= */

/* ---------- NAV ---------- */
.site-header {
  position: sticky; top: 0;
  padding: 14px 80px;
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 2px 14px rgba(20, 30, 80, 0.06);
  font-family: "Poppins", sans-serif;
}
.logo { gap: 6px; font-family: "Baloo 2", sans-serif; font-size: 24px; font-weight: 800; }
.logo .crown { font-size: 22px; }
.logo-text {
  background: linear-gradient(100deg, #6C4FE0, #9B5CF6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.main-nav { flex: 1; margin-left: 64px; }
.main-nav ul { gap: 40px; }
.main-nav a {
  position: relative; display: block; padding: 6px 0;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.main-nav a.active { color: var(--purple); }
.main-nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; border-radius: 2px; background: var(--purple);
}
.header-icons { gap: 26px; }
.icon-btn { display: flex; padding: 4px; color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }
.header-icons .cart .badge { top: -4px; right: -6px; background: var(--purple); }

/* ---------- HERO ---------- */
.hero {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(90deg, #EEF3FF 0%, #E6EEFF 45%, #D6E8FF 100%);
  padding: 44px 0 28px;
}
.hero .wrap { position: static; padding: 0 96px; }

/* Le hero remplit tout l'écran sous la barre de navigation */
@media (min-width: 981px) {
  .hero {
    min-height: calc(100vh - 68px);
    min-height: calc(100svh - 68px);
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* Photo : collée au bord droit, fondue dans le fond à gauche */
.hero-photo-frame {
  position: absolute; inset: 0;
  width: 100%;
}
.hero-photo {
  position: static; width: 100%; height: 100%;
  object-fit: cover; object-position: 48% center;
  -webkit-mask-image: none; mask-image: none;
}

/* Flèches du carrousel */
.hero-arrow {
  position: absolute; top: 50%; z-index: 6;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: var(--purple-deep); border: none; cursor: pointer;
  box-shadow: 0 6px 16px rgba(30, 40, 110, 0.14);
  transform: translateY(-50%);
}
.hero-arrow svg { width: 18px; height: 18px; }
.hero-arrow-prev { left: 24px; }
.hero-arrow-next { right: 24px; }

.hero-grid {
  width: 68%;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 8px;
  min-height: 560px;
}
.hero-text h1 span { white-space: nowrap; }
.hero-ctas, .trust-row { flex-wrap: nowrap; }

.hero-pill {
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid #8C7CF0;
  box-shadow: none;
  color: #4B3FC9; font-size: 13px; font-weight: 500;
  padding: 6px 14px; margin-bottom: 18px;
}
.hero-pill strong { color: var(--purple); font-weight: 700; }

.hero-text h1 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(36px, 3.7vw, 58px);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.5px;
  color: #161A4A;
}
.hero .grad-purple { background-image: linear-gradient(100deg, #6C4FE0, #8B5CF6); }
.hero .grad-pink { background-image: linear-gradient(90deg, #B44FE0, #6C63F0 50%, #3B82F6); }
.hero-text p { max-width: none; font-size: 15px; color: #3A3F5C; }

.hero .btn { border-radius: 12px; padding: 14px 24px; font-size: 14px; }
.hero .btn svg { width: 18px; height: 18px; }
.hero .btn-primary {
  background: linear-gradient(90deg, #2F3BD9, #3F4DF2);
  box-shadow: 0 10px 22px rgba(47, 59, 217, 0.3);
}
.hero .btn-outline {
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid #7B6CF0; color: #3B35B8;
}

.trust-row { gap: 0; }
.trust-item { padding: 0 22px; font-size: 13px; }
.trust-item:first-child { padding-left: 0; }
.trust-item + .trust-item { border-left: 1px solid #D3D9EC; }
.trust-item .ic { width: 34px; height: 34px; font-size: 16px; }
.trust-item span.sub { white-space: nowrap; }

/* Visuel : grosse montre sur une forme jaune */
.hero-visual { position: relative; min-height: 460px; }
.hero-sun {
  position: absolute; left: 50%; top: 58%;
  width: 330px; height: 300px;
  transform: translate(-50%, -50%);
  background: #FFD84D;
  border-radius: 58% 42% 50% 50% / 50% 55% 45% 50%;
}
.hero-sun-small {
  position: absolute; left: 62%; top: 4%;
  width: 110px; height: 90px;
  background: #FFD84D;
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
}
.hero-sparks { position: absolute; left: 4%; top: 12%; width: 80px; height: 80px; }

.watch-3d-stage {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.watch-3d { width: 340px; height: 360px; }

.watch-callout {
  top: 0; right: -8%; left: auto;
  background: none; box-shadow: none; padding: 0;
  font-family: "Caveat", cursive; font-size: 24px; font-weight: 600;
  line-height: 1.1; color: #161A4A; text-align: center;
  transform: rotate(-6deg);
}
.callout-arrow {
  position: absolute; left: 10%; top: 100%;
  width: 48px; height: 64px;
}

.carousel-dots { margin-top: 18px; width: 68%; }

/* ---------- TABLETTE ---------- */
@media (max-width: 1200px) {
  .site-header { padding: 14px 40px; }
  .main-nav { margin-left: 40px; }
  .main-nav ul { gap: 26px; }
  .hero .wrap { padding: 0 72px; }
  .watch-3d { width: 290px; height: 310px; }
  .hero-sun { width: 260px; height: 235px; }
  .hero-sun-small { left: 55%; }
  .watch-callout { right: -4%; top: 4%; font-size: 20px; }
  .trust-item { padding: 0 14px; }
}

@media (max-width: 980px) {
  .site-header { padding: 14px 24px; }
  .main-nav { display: none; }

  .hero { display: flex; flex-direction: column; padding: 36px 0 0; }
  .hero .wrap { padding: 0 30px; }
  .hero-arrow { display: none; }
  .hero-ctas, .trust-row { flex-wrap: wrap; }
  .hero-grid { width: 100%; grid-template-columns: 1fr; gap: 10px; min-height: 0; }
  .hero-visual { min-height: 400px; max-width: 520px; width: 100%; margin: 0 auto; }
  .watch-callout { right: 0; top: 4%; }
  .carousel-dots { width: 100%; margin: 10px 0 24px; }

  /* La photo passe sous le contenu, en pleine largeur */
  .hero-photo-frame {
    order: 2; position: relative; width: 100%; height: 420px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
  }
  .hero-photo { object-position: 68% center; }
  .trust-item { padding: 0 14px; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {
  .site-header { padding: 12px 18px; }
  .header-icons { gap: 12px; }
  .icon-btn svg { width: 20px; height: 20px; }
  .logo { font-size: 20px; }

  .hero .wrap { padding: 0 20px; }
  .hero-visual { min-height: 320px; }
  .watch-3d { width: 250px; height: 265px; }
  .watch-3d-stage { transform: translate(-50%, -50%); }
  .hero-sun { width: 220px; height: 200px; }
  .hero-sun-small { width: 70px; height: 58px; }
  .hero-sparks { width: 56px; height: 56px; left: 0; }
  .watch-callout { font-size: 18px; }
  .callout-arrow { width: 34px; height: 46px; }
  .hero-photo-frame { height: 340px; }

  .trust-item { padding: 0; border-left: none !important; }
}