
.caboux-transformation-showcase{width:100%!important;max-width:none!important;margin:0 auto 56px!important;padding:clamp(28px,4vw,64px) clamp(20px,5vw,90px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:24px;background:linear-gradient(120deg,#f7f0ff,#fefafd 55%,#e9f8e4);border:1px solid #e9dcf3;border-radius:0;box-sizing:border-box;overflow:hidden;position:relative;color:#25343d}
.caboux-transformation-showcase .caboux-transformation-kicker{font-size:12px;font-weight:900;letter-spacing:.12em;color:#7b39b2;margin:0 0 10px}
.caboux-transformation-showcase h2{font-size:clamp(25px,3vw,37px)!important;line-height:1.14!important;color:#273640!important;margin:0 0 16px!important}
.caboux-transformation-showcase .caboux-transformation-copy>p:not(.caboux-transformation-kicker){font-size:16px;line-height:1.6;color:#273640;margin:0 0 18px}
.caboux-transform-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.caboux-transform-nav button{background:#fff;border:1px solid #dbc8ed;border-radius:99px;min-width:46px;min-height:44px;padding:9px 16px;font-size:14px;font-weight:800;color:#67338c;cursor:pointer}
.caboux-transform-nav button:hover,.caboux-transform-nav button:focus-visible{background:#eee0fc;outline:2px solid #9661cd;outline-offset:2px}
.caboux-transform-stage{height:clamp(270px,37vw,420px);position:relative;isolation:isolate;min-width:0;display:grid;place-items:center}
.caboux-transform-frame{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:scale(.88);filter:blur(9px);transition:opacity .38s ease,transform .42s ease,filter .38s ease;pointer-events:none}
.caboux-transform-frame.is-active{opacity:1;transform:scale(1);filter:blur(0)}
.caboux-transform-frame img{width:auto!important;height:auto!important;max-width:88%!important;max-height:82%!important;object-fit:contain!important;filter:drop-shadow(0 14px 12px rgba(69,37,79,.14))}
.caboux-transform-frame figcaption{color:#71449b;font-size:13px;font-weight:800;background:#fff;border-radius:25px;padding:4px 12px;margin-top:7px}
.caboux-transform-glow{position:absolute;z-index:-1;width:64%;aspect-ratio:1;background:radial-gradient(circle,#cf9afa3e 0,transparent 68%);border-radius:50%;pointer-events:none}
@media(max-width:760px){.caboux-transformation-showcase{grid-template-columns:1fr;gap:4px;margin:0 auto 32px!important;padding:28px 18px!important;border-radius:0}.caboux-transform-stage{height:315px}.caboux-transformation-showcase .caboux-transformation-copy>p:not(.caboux-transformation-kicker){font-size:15px}}
@media(max-width:380px){.caboux-transform-stage{height:260px}}
@media(prefers-reduced-motion:reduce){.caboux-transform-frame{transition:none!important}}

/* V1.2.6 : source originale de La tribu et centrage des objets de proportions différentes */
.caboux-transform-stage{overflow:hidden}
.caboux-transform-frame img{display:block;max-width:88%!important;max-height:82%!important;object-position:center center!important}
.caboux-transform-frame[data-index="0"] img{max-height:85%!important;max-width:75%!important}
.caboux-transform-frame[data-index="2"] img,.caboux-transform-frame[data-index="5"] img{max-height:86%!important;max-width:62%!important}
.caboux-transform-frame[data-index="3"] img{max-height:82%!important;max-width:72%!important}

/* V1.3.27 : la transformation est le héros d'ouverture de la page L'univers. */
body.caboux-phase1-page .caboux-universe-transform-hero {
  margin:0!important;
  width:100%!important;
  max-width:none!important;
  min-height:clamp(440px,45vw,650px);
  padding:clamp(52px,5vw,84px) clamp(22px,5vw,90px)!important;
  border-left:0!important;
  border-right:0!important;
  border-top:0!important;
}
body.caboux-phase1-page .caboux-universe-transform-hero h1 {
  font-size:clamp(35px,4vw,64px)!important;
  line-height:1.04!important;
  color:#273640!important;
  max-width:760px;
  margin:0 0 22px!important;
}
body.caboux-phase1-page .caboux-universe-transform-hero .caboux-transformation-copy>p:not(.caboux-transformation-kicker){font-size:clamp(17px,1.3vw,21px)!important;line-height:1.55!important}
@media(max-width:760px){
  body.caboux-phase1-page .caboux-universe-transform-hero {min-height:0;padding:36px 18px!important}
  body.caboux-phase1-page .caboux-universe-transform-hero h1 {font-size:clamp(34px,9vw,48px)!important}
}

/* V1.3.32 — Animation plus rapide et galerie de cinq paires officielles, galerie des métamorphoses sous le héros. */
.caboux-transform-nav{display:none!important}
.cthover-gallery,.cthover-gallery *{box-sizing:border-box}
.cthover-gallery{width:100%!important;max-width:none!important;margin:0!important;padding:clamp(35px,4vw,62px) 3%!important;background:linear-gradient(125deg,#fff9ee,#f8f1ff 58%,#effbe9);border-bottom:1px solid #eadcf2;color:#27343b}
.cthover-gallery-head{max-width:1350px;margin:0 auto 24px;text-align:center}
.cthover-eyebrow{margin:0 0 7px!important;font-size:12px!important;font-weight:900!important;letter-spacing:.12em;color:#9c3bbb!important}
.cthover-gallery h2{font-size:clamp(30px,3.4vw,48px)!important;line-height:1.12!important;color:#263844!important;margin:0 0 10px!important}
.cthover-gallery-head>p:last-child{margin:0!important;font-size:clamp(15px,1.3vw,18px)!important;line-height:1.5!important;color:#556071!important}
.cthover-gallery-grid{width:min(1640px,100%);margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(245px,100%),1fr));gap:clamp(12px,1.7vw,25px)}
.cthover-card{appearance:none!important;background:#fff!important;border:1px solid #e6e2ef!important;border-radius:23px!important;box-shadow:0 10px 30px rgba(44,35,66,.08)!important;cursor:pointer;min-width:0;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:13px!important;position:relative;text-decoration:none!important;color:#333452!important;transition:transform .24s,box-shadow .24s}
.cthover-card:hover,.cthover-card:focus-visible{transform:translateY(-5px);box-shadow:0 18px 32px rgba(44,35,66,.15)!important}
.cthover-card:focus-visible{outline:3px solid #b747df!important;outline-offset:3px!important}
.cthover-pictures{height:212px;position:relative;display:block;width:100%;flex:1;overflow:hidden}
.cthover-image{position:absolute;inset:0;display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;filter:none!important;transition:opacity .33s ease,transform .33s ease}
.cthover-normal{opacity:1;transform:scale(1)}.cthover-changed{opacity:0;transform:scale(.93)}
.cthover-card:hover .cthover-normal,.cthover-card:focus-visible .cthover-normal,.cthover-card[aria-pressed="true"] .cthover-normal{opacity:0;transform:scale(.93)}
.cthover-card:hover .cthover-changed,.cthover-card:focus-visible .cthover-changed,.cthover-card[aria-pressed="true"] .cthover-changed{opacity:1;transform:scale(1)}
.cthover-card-caption{width:100%;font-weight:900;font-size:18px;display:block;color:#432a62;padding:8px 5px 7px}
@media(max-width:720px){.cthover-gallery{padding:32px 16px!important}.cthover-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cthover-card{min-height:220px}.cthover-pictures{height:160px}.cthover-card-caption{font-size:15px}}
@media(max-width:390px){.cthover-gallery-grid{gap:9px}.cthover-card{padding:9px!important;min-height:190px}.cthover-pictures{height:130px}}
@media(prefers-reduced-motion:reduce){.cthover-card,.cthover-image{transition:none!important}}

/* V1.3.32 — Présentation des cinq paires officielles, adaptable à la largeur. */
@media(min-width:1200px){.cthover-gallery-grid{grid-template-columns:repeat(4,minmax(245px,300px));justify-content:center}}
.cthover-card{min-height:278px}
.cthover-pictures{height:225px}
.cthover-card-caption{font-size:clamp(14px,1.1vw,18px);text-align:center}
@media(max-width:720px){.cthover-card{min-height:214px}.cthover-pictures{height:160px}}
@media(max-width:390px){.cthover-card{min-height:190px}.cthover-pictures{height:130px}}

/* V1.3.33 — Héros triptyque : Caméléon / texte / Câlin en boucle. */
body.caboux-phase1-page .caboux-universe-transform-hero.caboux-transform-three-columns {
  display:grid!important;
  grid-template-columns:minmax(210px,1fr) minmax(330px,1.42fr) minmax(240px,1.05fr)!important;
  grid-template-areas:"cameleon copy calin";
  align-items:center!important;
  column-gap:clamp(14px,2.3vw,45px)!important;
  min-height:clamp(420px,43vw,590px)!important;
  padding:clamp(32px,4vw,60px) clamp(20px,3.5vw,78px)!important;
}
.caboux-transform-three-columns .caboux-transform-cameleon {grid-area:cameleon;min-width:0;display:flex;justify-content:center;align-items:center;width:100%}
.caboux-transform-three-columns .caboux-transformation-copy {grid-area:copy;min-width:0;text-align:left}
.caboux-transform-three-columns .caboux-transform-stage {grid-area:calin;min-width:0;height:clamp(300px,30vw,425px)!important}
body.caboux-phase1-page .caboux-transform-three-columns h1 {font-size:clamp(33px,3.12vw,53px)!important;line-height:1.08!important;max-width:none!important;margin-bottom:18px!important}
body.caboux-phase1-page .caboux-transform-three-columns .caboux-transformation-copy>p:not(.caboux-transformation-kicker){font-size:clamp(15px,1.15vw,19px)!important;line-height:1.55!important;margin-bottom:0!important}
.caboux-transform-three-columns .caboux-transform-cameleon .cthover-card {
  width:min(100%,355px)!important;min-height:clamp(305px,29vw,410px)!important;padding:clamp(12px,1.5vw,22px)!important;
  border-radius:26px!important;box-shadow:0 12px 35px rgba(44,35,66,.08)!important;
}
.caboux-transform-three-columns .caboux-transform-cameleon .cthover-pictures{height:clamp(235px,26vw,340px)!important;min-height:0!important}
.caboux-transform-three-columns .caboux-transform-cameleon .cthover-card-caption{font-size:clamp(15px,1.2vw,19px)!important}
@media(max-width:1040px){
  body.caboux-phase1-page .caboux-universe-transform-hero.caboux-transform-three-columns {
    grid-template-columns:minmax(160px,.88fr) minmax(270px,1.45fr) minmax(175px,.95fr)!important;
    gap:14px!important;padding:34px 20px!important;
  }
  body.caboux-phase1-page .caboux-transform-three-columns h1{font-size:clamp(30px,3.5vw,43px)!important}
  .caboux-transform-three-columns .caboux-transform-cameleon .cthover-pictures{height:250px!important}
  .caboux-transform-three-columns .caboux-transform-stage{height:325px!important}
}
@media(max-width:760px){
  body.caboux-phase1-page .caboux-universe-transform-hero.caboux-transform-three-columns{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-areas:"copy copy" "cameleon calin"!important;
    gap:clamp(12px,3vw,20px)!important;
    min-height:0!important;padding:32px 15px!important;
  }
  body.caboux-phase1-page .caboux-transform-three-columns h1{font-size:clamp(30px,7.5vw,43px)!important}
  .caboux-transform-three-columns .caboux-transform-cameleon .cthover-card{padding:10px!important;border-radius:18px!important;min-height:clamp(215px,55vw,310px)!important}
  .caboux-transform-three-columns .caboux-transform-cameleon .cthover-pictures{height:clamp(160px,42vw,250px)!important}
  .caboux-transform-three-columns .caboux-transform-stage{height:clamp(210px,50vw,285px)!important}
  .caboux-transform-three-columns .caboux-transform-cameleon .cthover-card-caption{font-size:13px!important;padding:5px 2px!important}
}
