/* ══════════════════════════════════════════════════
   MON APPROCHE — Styles page
   Palette cohérente avec index.html
   ══════════════════════════════════════════════════ */

/* data-delay="5" manquant dans styles.css */
.fade-in[data-delay="5"] { transition-delay: .5s; }


/* ════════════════════════════════════════════════
   SECTION 1 — HERO APPROCHE
   Fond crème · Titre gauche · Carte droite
   ════════════════════════════════════════════════ */
.approche-hero {
  background-image:
    var(--paper-lines),
    radial-gradient(ellipse 55% 60% at 78% 85%, rgba(0,158,224,.10) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 15% 30%, rgba(201,168,76,.08) 0%, transparent 60%);
  background-color: var(--hero-bg);
  min-height: 100svh;
  padding: 7rem 1.5rem 2.5rem;
  position: relative; overflow: hidden;
  z-index: 0;
}

/* Marge rouge style carnet */
.approche-hero::before {
  content: '';
  position: absolute;
  top: 0; left: clamp(3.5rem, 6.5vw, 7rem);
  bottom: 0; width: 1px;
  background: rgba(200,60,60,.16);
  pointer-events: none;
}

/* Doodles hero approche */
.ah-boussole {
  width: clamp(140px, 15vw, 200px); opacity: .88;
  top: 14%; right: 2%;
  transform: rotate(15deg);
  filter: var(--filter-ink);
}
.ah-boussole2 {
  width: clamp(90px, 10vw, 135px); opacity: .76;
  bottom: 15%; right: 5%;
  transform: rotate(-22deg);
  filter: var(--filter-ink);
}
.ah-etoile {
  width: clamp(110px, 12vw, 165px); opacity: .84;
  top: 8%; left: 2%;
  transform: rotate(-12deg);
  filter: var(--filter-ink);
}
.ah-fleche {
  width: clamp(120px, 13vw, 175px); opacity: .80;
  bottom: 24%; left: 2%;
  transform: rotate(-35deg);
  filter: var(--filter-ink);
}

/* Annotation manuscrite */
.ah-annot {
  top: 52%; right: 3%;
  transform: rotate(-3deg);
  font-size: .90rem;
  color: var(--navy); opacity: .75;
}

/* Layout centré colonne unique */
.approche-hero__inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(2rem, 3.5vw, 3rem);
  text-align: center;
  position: relative; z-index: 1;
}
.approche-hero__text {
  width: 100%;
  max-width: 860px;
}

.approche-hero__titre {
  font-family: var(--font-ms);
  font-size: clamp(3rem, 6.5vw, 5.5rem);
  color: var(--navy);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}
/* Soulignement orange sous le titre */
.approche-hero__titre::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0; right: 0;
  height: 3px;
  background: var(--flamboyant);
  border-radius: 2px;
}

.approche-hero__corps {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--ink-mid);
  line-height: 1.85;
  max-width: 600px;
  border-top: 2px solid var(--cerulean);
  padding-top: .75rem;
  padding-left: 0;
  margin: 1rem auto 0;
}

/* Carte rétablissement — pleine largeur (hors __inner) */
.approche-hero__visual {
  width: 100%;
  padding: 0 1.5rem 2.5rem;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.approche-hero__carte {
  width: 85%;
  display: block;
  margin: 0 auto;
  mix-blend-mode: multiply;
  filter:
    drop-shadow(4px 12px 56px rgba(37,58,109,.28))
    drop-shadow(0 3px 12px rgba(0,158,224,.15));
}


/* ════════════════════════════════════════════════
   SECTION 2 — CHIME
   Fond navy · 5 cartes flip
   ════════════════════════════════════════════════ */
.chime {
  background: var(--navy);
  padding: 4rem 0 4.5rem;
  position: relative; overflow: hidden;
  color: #fff;
}
.chime::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,158,224,.10) 0%, transparent 60%);
  pointer-events: none;
}

/* Doodles CHIME — filtrés blanc */
.chime-etoile {
  width: clamp(145px, 15vw, 200px); opacity: .55;
  top: 5%; right: 1.5%;
  transform: rotate(20deg);
  filter: brightness(0) invert(1);
}
.chime-boussole {
  width: clamp(125px, 13vw, 175px); opacity: .48;
  bottom: 3%; left: 1.5%;
  transform: rotate(-15deg);
  filter: brightness(0) invert(1);
}

.chime__header {
  text-align: center;
  max-width: 780px; margin: 0 auto 2rem;
  padding: 0 1.5rem;
  position: relative; z-index: 1;
}
.chime__titre {
  font-family: var(--font-ms);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  color: #fff;
  margin-bottom: 1rem;
}
.chime__sous-titre {
  font-family: var(--font-ms);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: rgba(255,255,255,.82);
}

.chime__hint {
  text-align: center;
  font-family: var(--font-ms);
  font-size: .88rem;
  color: rgba(255,255,255,.72);
  margin-bottom: 2rem;
  padding: 0 1.5rem;
  position: relative; z-index: 1;
}

/* Grille 5 cartes — pleine largeur */
.chime__grille {
  display: flex;
  gap: clamp(.5rem, 1.2vw, 1.2rem);
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0 0 2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative; z-index: 1;
}
.chime__grille::-webkit-scrollbar { display: none; }

/* Carte flip — même mécanique que .tarif-flip */
.chime-flip {
  perspective: 1000px;
  flex: 1 1 0;
  min-width: 140px;
  max-width: 340px;
  aspect-ratio: 409 / 610;
  cursor: pointer;
  outline: none;
  scroll-snap-align: center;
}
.chime-flip:focus-visible { outline: 3px solid var(--cerulean); border-radius: 10px; }

.chime-flip__inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s ease;
}
.chime-flip.is-flipped .chime-flip__inner {
  transform: rotateY(180deg);
}
.chime-flip__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.chime-flip__face img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(4px 8px 24px rgba(0,0,0,.38));
}
.chime-flip__face--verso {
  transform: rotateY(180deg);
}


/* ════════════════════════════════════════════════
   SECTION 3 — FAQ
   Fond kraft · Accordéon sketchbook annoté
   ════════════════════════════════════════════════ */
.faq {
  background-color: #E8E0D0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 27px,
      rgba(44,36,22,.042) 27px, rgba(44,36,22,.042) 28px
    ),
    radial-gradient(ellipse 55% 45% at 82% 12%, rgba(0,158,224,.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 12% 82%, rgba(37,58,109,.05) 0%, transparent 50%);
  padding: 4rem 1.5rem;
  position: relative; overflow: hidden;
}

/* Doodles image permanents */
.faq-crayon {
  width: clamp(155px, 17vw, 220px); opacity: .84;
  top: 3%; right: 2%;
  transform: rotate(30deg);
  filter: var(--filter-ink);
}
.faq-fleche {
  width: clamp(135px, 14vw, 190px); opacity: .78;
  bottom: 3%; left: 1.5%;
  transform: rotate(-20deg);
  filter: var(--filter-ink);
}
.faq-outils {
  width: clamp(110px, 12vw, 155px); opacity: .72;
  top: 50%; left: .5%;
  transform: translateY(-50%) rotate(-12deg);
  filter: var(--filter-ink);
}
.faq-blob {
  width: clamp(280px, 32vw, 420px); opacity: .06;
  top: 20%; right: -5%;
  pointer-events: none;
}

/* Doodles SVG inline scatter — 4× étoile navy · 3× point cerulean · 2× flèche orange */
.faq__sk {
  position: absolute;
  pointer-events: none;
}
/* — Étoiles navy — */
.faq__sk--s1 { top: 12%;  left: 2.5%;  transform: rotate(-18deg); opacity: .28; }
.faq__sk--s2 { top: 38%;  right: 1.8%; transform: rotate( 8deg);  opacity: .25; }
.faq__sk--s3 { top: 64%;  left: 7%;    transform: rotate(-5deg);  opacity: .30; }
.faq__sk--s4 { bottom:10%; right: 3.5%; transform: rotate(22deg);  opacity: .27; }
/* — Points cerulean — */
.faq__sk--d1 { top: 26%;  right: 3%;   opacity: .32; }
.faq__sk--d2 { top: 52%;  left: 4%;    opacity: .28; }
.faq__sk--d3 { bottom:24%; right: 5.5%; opacity: .25; }
/* — Micro flèches orange — */
.faq__sk--a1 { top: 33%;  left: 1.2%;  transform: rotate(-22deg); opacity: .28; }
.faq__sk--a2 { bottom:30%; right: 1%;   transform: rotate( 12deg); opacity: .25; }

/* Décors PNG dans les items FAQ */
.faq__deco {
  position: absolute;
  pointer-events: none;
}
.faq__deco--q3 {
  width: 60px;
  opacity: .60;
  bottom: 0.6rem;
  right: 1.2rem;
  transform: rotate(-25deg);
}
.faq__deco--q5 {
  width: 200px;
  opacity: .08;
  bottom: 0;
  right: -1rem;
  filter: var(--filter-ink);
}
.faq__deco--q6 {
  width: 50px;
  opacity: .40;
  top: 50%;
  right: 3.2rem;
  transform: translateY(-50%) rotate(8deg);
}
.faq__deco--q10 {
  width: 50px;
  opacity: .40;
  top: 50%;
  right: 3.2rem;
  transform: translateY(-50%) rotate(-12deg);
}
/* — Décors FAQ inline (toujours visibles, dans .faq__item) — */
.faq__deco--q7 {
  width: 58px;
  opacity: .55;
  top: 50%;
  right: 3.2rem;
  transform: translateY(-50%) rotate(18deg);
}
.faq__deco--q9 {
  width: 56px;
  opacity: .50;
  top: 50%;
  right: 3.2rem;
  transform: translateY(-50%) rotate(-8deg);
}
/* — Décors dans réponses ouvertes — */
.faq__deco--q1 {
  width: clamp(140px, 15vw, 185px);
  opacity: .10;
  bottom: 0;
  right: -0.5rem;
  filter: var(--filter-ink);
}
.faq__deco--q2 {
  width: clamp(170px, 19vw, 230px);
  opacity: .10;
  bottom: 0;
  right: 0;
  filter: var(--filter-ink);
}
.faq__deco--q8 {
  width: clamp(130px, 14vw, 170px);
  opacity: .10;
  bottom: 0;
  right: -0.5rem;
  filter: var(--filter-ink);
}
.faq__deco--q11 {
  width: clamp(110px, 12vw, 150px);
  opacity: .10;
  bottom: 0;
  right: 0;
  filter: var(--filter-ink);
}
/* — Pose témoignages — */
.temo-pose {
  position: absolute;
  width: clamp(220px, 24vw, 310px);
  opacity: .55;
  bottom: 0;
  right: 2%;
  pointer-events: none;
  filter: var(--filter-ink);
}

.faq__titre {
  font-family: var(--font-ms);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--navy);
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative; z-index: 1;
}

.faq__liste {
  max-width: 1100px;
  margin: 0 auto;
  position: relative; z-index: 1;
}

.faq__item {
  border-bottom: 1.5px solid rgba(44,36,22,.18);
  position: relative;
  transition: background .25s;
}
.faq__item:first-child { border-top: 1.5px solid rgba(44,36,22,.18); }
.faq__item.is-open {
  background: rgba(255,255,255,.40);
}

.faq__question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  background: none; border: none;
  padding: 1.3rem 1.25rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ms);
  font-style: normal;
  font-size: clamp(1.05rem, 1.8vw, 1.18rem);
  color: var(--navy);
  transition: color .2s;
}
.faq__question > span:first-child {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 1;
  min-width: 0;
}
.faq__question:hover,
.faq__question[aria-expanded="true"] { color: var(--cerulean); }

/* ── Icônes SVG inline devant les questions ── */
.faq__icon-svg {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ── Chevron SVG inline — V dessiné à la main, rotation 180deg ── */
.faq__chevron {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 1.6em;
  min-width: 1.6em;
}
.faq__chevron svg {
  width: 100%;
  height: auto;
  transition: transform .3s ease;
}
.faq__question[aria-expanded="true"] .faq__chevron svg {
  transform: rotate(180deg);
}

/* ── Réponse — fond crème ── */
.faq__reponse {
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
  background: #F5F0E8;
}
.faq__item.is-open .faq__reponse {
  max-height: 600px;
}
.faq__reponse p {
  font-family: var(--font-body);
  font-size: clamp(.9rem, 1.4vw, 1rem);
  color: #3a3220;
  line-height: 1.9;
  padding: .65rem 1.25rem 1.1rem;
}

/* ── Soulignages SVG main levée ── */
.underline-orange,
.underline-cerulean {
  position: relative;
  display: inline-block;
  line-height: inherit;
}
.ink-line {
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: 8px;
  pointer-events: none;
  overflow: visible;
}

/* ── Phrase forte ── */
.kw-bold { font-weight: 700; color: var(--navy); }

/* ── Liens internes ── */
.faq__lien {
  color: var(--cerulean);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--font-ms);
}
.faq__lien:hover { color: var(--flamboyant); }

/* ── Annotations volantes Kalam ── */
.faq__annot {
  display: block;
  font-family: var(--font-ms);
  font-style: normal;
  font-size: .92rem;
  opacity: .80;
  margin-top: .1rem;
  padding: 0 1rem 1rem;
  text-align: right;
  transform: rotate(-2deg);
  transform-origin: right center;
}
.faq__annot--cerulean { color: #009EE0; }
.faq__annot--orange   { color: #FF6F00; }
.faq__annot--r-pos    { transform: rotate(2.5deg); transform-origin: right center; }


/* ════════════════════════════════════════════════
   SECTION 4 — TÉMOIGNAGES
   Fond crème · Carousel manuel
   ════════════════════════════════════════════════ */
.temoignages {
  background-image: var(--paper-lines);
  background-color: var(--hero-bg);
  padding: 4rem 1.5rem;
  position: relative; overflow: hidden;
}

/* Doodles témoignages */
.temo-etoile {
  width: clamp(140px, 15vw, 195px); opacity: .84;
  top: 4%; right: 1.5%;
  transform: rotate(18deg);
  filter: var(--filter-ink);
}
.temo-fleche {
  width: clamp(120px, 13vw, 170px); opacity: .78;
  bottom: 5%; left: 1%;
  transform: rotate(-15deg);
  filter: var(--filter-ink);
}

.temoignages__titre {
  font-family: var(--font-ms);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--navy);
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative; z-index: 1;
}

/* Carousel */
.carousel {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 860px;
  margin: 0 auto;
  position: relative; z-index: 1;
}
.carousel__btn {
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: none;
  border: 2px solid rgba(37,58,109,.22);
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--font-struct);
  font-size: 1.6rem;
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, color .2s;
  line-height: 1;
  padding: 0;
}
.carousel__btn:hover {
  background: var(--cerulean);
  border-color: var(--cerulean);
  color: #fff;
}
.carousel__track-wrap {
  flex: 1;
  overflow: hidden;
  border-radius: 12px;
  background: white;
  box-shadow:
    0 4px 24px rgba(37,58,109,.10),
    0 1px 6px rgba(37,58,109,.06);
}
.carousel__track {
  display: flex;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.carousel__slide {
  min-width: 100%;
  text-align: center;
  padding: 3rem 2.5rem;
}
.carousel__label {
  font-family: var(--font-ms);
  font-size: clamp(.92rem, 1.5vw, 1.06rem);
  color: var(--cerulean);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: block;
}
.carousel__citation {
  font-family: var(--font-ms);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  color: var(--navy);
  line-height: 1.7;
  font-weight: 400;
  text-indent: -.52em;
  padding-left: .52em;
}

/* Dots */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: .65rem;
  margin-top: 1.5rem;
  position: relative; z-index: 1;
}
.carousel__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(37,58,109,.20);
  cursor: pointer;
  padding: 0;
  transition: background .25s, transform .25s;
}
.carousel__dot--active {
  background: var(--flamboyant);
  transform: scale(1.4);
}


/* ════════════════════════════════════════════════
   SECTION 5 — CTA APPROCHE
   Fond orange
   ════════════════════════════════════════════════ */
.cta-approche {
  background: var(--cerulean);
  padding: 5rem 1.5rem;
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-approche::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,255,255,.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 110%, rgba(0,60,110,.15) 0%, transparent 55%);
  pointer-events: none;
}
.cta-approche__inner {
  position: relative; z-index: 1;
  max-width: 680px; margin: 0 auto;
}
.cta-approche__accroche {
  font-family: var(--font-ms);
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  color: #fff;
  line-height: 1.3;
  margin-bottom: 2.25rem;
  text-shadow: 0 2px 14px rgba(0,50,100,.22);
}
.cta-approche__btn {
  display: inline-block;
  background: var(--flamboyant);
  color: #fff;
  font-family: var(--font-ms);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 700;
  padding: 1rem 2.25rem;
  border-radius: 4px;
  border: 2px solid rgba(44,36,22,.35);
  box-shadow: 6px 6px 0 rgba(0,50,100,.28);
  transition: background .2s, color .2s, transform .15s, box-shadow .15s;
  text-decoration: none;
}
.cta-approche__btn:hover {
  background: #e05e00;
  border-color: rgba(44,36,22,.5);
  box-shadow: 4px 4px 0 rgba(0,50,100,.32);
}
.cta-approche__btn:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 rgba(0,50,100,.32);
}
.cta-approche__mention {
  font-family: var(--font-ms);
  font-size: clamp(.88rem, 1.4vw, 1.05rem);
  color: rgba(255,255,255,.85);
  margin-top: 1.25rem;
}


/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .approche-hero {
    min-height: auto;
    padding-bottom: 1.5rem;
  }
  .approche-hero__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .approche-hero__text { width: 100%; }
  .approche-hero__corps {
    max-width: 100%;
    border-left: none;
    border-top: 2px solid var(--cerulean);
    padding-left: 0; padding-top: .65rem;
    margin: 1rem auto 0;
  }
  .approche-hero__visual { padding: 0 1rem 1rem; }

  .chime { padding: 2rem 0 2.5rem; }
  /* 5 cartes en colonne sur mobile */
  .chime__grille {
    flex-direction: column;
    align-items: center;
    overflow-x: visible;
    gap: 1rem;
    padding: 0 1rem 1rem;
    scroll-snap-type: none;
  }
  .chime-flip {
    flex: none;
    width: 90%;
    max-width: 340px;
    min-width: unset;
  }

  .faq { padding: 3rem 1rem; }
  .temoignages { padding: 3rem 1rem; }
  .carousel { gap: .5rem; }
  .carousel__btn { width: 40px; height: 40px; font-size: 1.4rem; }
  .carousel__slide { padding: 2rem 1.5rem; }

  .cta-approche { padding: 3.5rem 1rem; }
}

@media (max-width: 520px) {
  .approche-hero { padding: 6rem 1rem 3rem; }
  .approche-hero__titre { font-size: clamp(2.4rem, 9vw, 3.8rem); }
  .approche-hero__visual { padding: 0 .5rem 1.5rem; }

  .chime-flip { flex: 0 0 clamp(140px, 42vw, 190px); max-width: none; }
  .carousel__slide { padding: 1.5rem 1rem; }
  .carousel__citation { font-size: clamp(1rem, 4.5vw, 1.3rem); }

  /* Masquer certains doodles sur mobile */
  .ah-boussole2, .ah-fleche { display: none; }
  .faq-fleche, .temo-fleche { display: none; }
}


/* ════════════════════════════════════════════════
   SKETCHNOTE ENRICHISSEMENTS — cohérence visuelle
   ════════════════════════════════════════════════ */

/* Tache café hero approche */
.ah-cafe {
  position: absolute;
  width: clamp(120px, 13vw, 175px);
  opacity: .065;
  bottom: 8%; right: 7%;
  transform: rotate(10deg);
  pointer-events: none;
  user-select: none;
}

/* ── Scatter blanc — section CHIME (fond navy) ── */
.chime__sk {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.chime__sk--s1 { top: 22%;    left: 3%;    transform: rotate(-12deg); opacity: .16; }
.chime__sk--s2 { top: 48%;    right: 2%;   transform: rotate(15deg);  opacity: .14; }
.chime__sk--s3 { bottom: 18%; left: 6%;    transform: rotate(8deg);   opacity: .18; }
.chime__sk--d1 { top: 35%;    left: 1.5%;  opacity: .20; }
.chime__sk--d2 { bottom: 30%; right: 4%;   opacity: .16; }
.chime__sk--a1 { top: 62%;    left: 2%;    transform: rotate(-15deg); opacity: .14; }

/* ── Scatter navy/cerulean — section TÉMOIGNAGES ── */
.temo__sk {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.temo__cafe {
  position: absolute;
  pointer-events: none;
}
.temo__sk--s1 { top: 14%;    left: 3%;    transform: rotate(-8deg);  opacity: .22; }
.temo__sk--s2 { top: 42%;    right: 2%;   transform: rotate(12deg);  opacity: .18; }
.temo__sk--s3 { bottom: 18%; left: 7%;    transform: rotate(-5deg);  opacity: .25; }
.temo__sk--s4 { bottom: 8%;  right: 5%;   transform: rotate(20deg);  opacity: .20; }
.temo__sk--d1 { top: 28%;    right: 3.5%; opacity: .28; }
.temo__sk--d2 { bottom: 34%; left: 4%;    opacity: .22; }
.temo__cafe   {
  bottom: 4%; right: 3%;
  width: clamp(100px, 11vw, 148px);
  opacity: .065;
  transform: rotate(-8deg);
}

/* ── Scatter blanc + doodles — section CTA APPROCHE (fond cerulean) ── */
.cta-sk {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.cta-doodle {
  position: absolute;
  pointer-events: none;
  filter: brightness(0) invert(1);
}
.cta-sk--s1 { top: 12%;    left: 3%;    transform: rotate(-12deg); opacity: .22; }
.cta-sk--s2 { top: 28%;    right: 2.5%; transform: rotate(8deg);   opacity: .18; }
.cta-sk--s3 { bottom: 18%; left: 8%;    transform: rotate(5deg);   opacity: .22; }
.cta-sk--s4 { bottom: 8%;  right: 4%;   transform: rotate(-15deg); opacity: .18; }
.cta-sk--d1 { top: 48%;    left: 2%;    opacity: .22; }
.cta-sk--d2 { top: 20%;    right: 5%;   opacity: .18; }
.cta-doodle--etoile {
  width: clamp(85px, 9.5vw, 128px);
  opacity: .14;
  top: 6%; right: 3%;
  transform: rotate(20deg);
}
.cta-doodle--boussole {
  width: clamp(75px, 8.5vw, 112px);
  opacity: .12;
  bottom: 8%; left: 3%;
  transform: rotate(-18deg);
}