/* =========================================================
   LA DESCARGA
   STYLE GLOBAL — VERSION PLUS ÉLÉGANTE ET MOINS MASSIVE
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

  --black: #000000;
  --black-soft: #0b0b0b;
  --black-card: #151515;

  --cream: #f5f0e6;
  --cream-dark: #e8decc;

  --white: #ffffff;
  --gray: #bcb6ad;

  --gold: #d8ac30;
  --gold-light: #f1cf63;
  --gold-dark: #947026;

  --radius: 26px;

  --gold-glow:
    0 0 7px rgba(216, 172, 48, .28),
    0 0 22px rgba(216, 172, 48, .10);

}


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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--black);
  color: var(--white);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1.55;

  overflow-x: hidden;
}

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

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


/* =========================================================
   TYPOGRAPHIE GLOBALE
========================================================= */

h1,
h2,
h3 {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-weight: 900;
}

h1 {
  font-size:
    clamp(
      2.2rem,
      4vw,
      4.2rem
    );

  line-height: 1;

  letter-spacing: -.035em;
}

h2 {
  font-size:
    clamp(
      1.8rem,
      3vw,
      3rem
    );

  line-height: 1.05;

  letter-spacing: -.025em;
}

h3 {
  font-size: 1.35rem;
  line-height: 1.15;
}

p {
  color: var(--gray);
}

.gold-label {
  color: var(--gold);

  font-size: .74rem;
  font-weight: 900;

  letter-spacing: .08em;

  text-transform: uppercase;
}


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

.header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  min-height: 78px;

  z-index: 1000;

  display: grid;

  grid-template-columns:
    145px
    1fr
    auto;

  align-items: center;

  gap: 28px;

  padding:
    11px
    4vw;

  background:
    rgba(
      0,
      0,
      0,
      .94
    );

  border-bottom:
    1px solid
    rgba(
      216,
      172,
      48,
      .16
    );

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.header-brand {
  display: flex;
  align-items: center;
}

.header-logo {
  width: auto;
  height: 44px;
  object-fit: contain;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 27px;
}

.desktop-nav a {
  color: #f5efe5;

  font-size: .84rem;
  font-weight: 800;
}

.desktop-nav a:hover {
  color: var(--gold);
}

.header-app-button {
  min-height: 42px;

  padding:
    0
    18px;

  display: inline-flex;

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

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  color: #111;

  font-size: .76rem;
  font-weight: 900;

  border:
    1px solid
    var(--gold);

  box-shadow: var(--gold-glow);
}


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

.gold-button,
.outline-button {
  min-height: 52px;

  padding:
    0
    24px;

  border-radius: 15px;

  display: inline-flex;

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

  font-size: .78rem;

  font-weight: 900;

  letter-spacing: .01em;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.gold-button {
  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  color: #080808;

  border:
    1px solid
    var(--gold);

  box-shadow: var(--gold-glow);
}

.outline-button {
  background: #111;

  color: #fff;

  border:
    1px solid
    var(--gold);
}

.gold-button:hover,
.outline-button:hover {
  transform: translateY(-2px);
}


/* =========================================================
   SECTIONS GLOBALES
========================================================= */

.section {
  padding:
    78px
    5vw;
}

.section-title {
  max-width: 1100px;

  margin:
    0
    auto
    38px;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  gap: 16px;

  align-items: center;
}

.section-title span {
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      var(--gold)
    );
}

.section-title span:last-child {
  background:
    linear-gradient(
      to left,
      transparent,
      var(--gold)
    );
}

.section-title h2 {
  font-size:
    clamp(
      1.05rem,
      2vw,
      1.55rem
    );

  letter-spacing: .01em;

  text-align: center;

  white-space: nowrap;
}


/* =========================================================
   ACCUEIL
========================================================= */

.home-hero {
  min-height: 100vh;

  padding:
    118px
    5vw
    80px;

  background:
    radial-gradient(
      circle at center,
      rgba(
        216,
        172,
        48,
        .05
      ),
      transparent 45%
    ),
    #000;
}

.hero-inner {
  width: 100%;
  max-width: 1320px;

  margin: auto;

  text-align: center;
}

.hero-logo {
  width:
    min(
      420px,
      74vw
    );

  margin:
    0
    auto;
}

.hero-location {
  margin-top: 5px;
  margin-bottom: 30px;

  color: var(--gold);

  font-size: .75rem;
  font-weight: 800;

  letter-spacing: .18em;
}

.hero-photo {
  width: 100%;
  max-width: 1120px;

  aspect-ratio: 16 / 9;

  margin: auto;

  overflow: hidden;

  border-radius: 26px;

  border:
    1.5px solid
    rgba(
      216,
      172,
      48,
      .44
    );

  box-shadow: var(--gold-glow);
}

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

  display: flex;

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

  padding: 30px;

  background:
    linear-gradient(
      145deg,
      #181818,
      #080808
    );

  color: var(--gold);

  font-size: .74rem;
  font-weight: 900;
}

.hero-text {
  margin-top: 38px;
}

.hero-text h1 {
  font-size:
    clamp(
      2.3rem,
      4.8vw,
      4.4rem
    );
}

.hero-text p {
  margin-top: 14px;

  font-size: 1.05rem;

  color: #ded8ce;
}

.hero-actions {
  max-width: 900px;

  margin:
    36px
    auto
    0;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 18px;
}

.big-action-card {
  min-height: 130px;

  padding:
    24px
    30px;

  border-radius: 24px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #faf7f0,
      #eee4d4
    );

  color: #111;

  display: flex;

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

  text-align: left;

  box-shadow: var(--gold-glow);

  transition:
    transform .25s ease;
}

.big-action-card:hover {
  transform: translateY(-4px);
}

.big-action-card small {
  display: block;

  font-size: .74rem;
  font-weight: 900;
}

.big-action-card strong {
  display: block;

  margin-top: 3px;

  font-size: 1.65rem;
  line-height: 1;

  font-weight: 950;
}

.big-action-card > span {
  color: var(--gold);
  font-size: 2.2rem;
}


/* =========================================================
   COURS ACCUEIL
========================================================= */

.courses-intro {
  max-width: 720px;

  margin:
    0
    auto
    38px;

  text-align: center;
}

.courses-intro h3 {
  font-size:
    clamp(
      1.7rem,
      3vw,
      2.4rem
    );
}

.courses-intro p {
  margin-top: 13px;

  font-size: .98rem;
}

.courses-grid {
  width: 100%;
  max-width: 1120px;

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(
      5,
      1fr
    );

  gap: 14px;
}

.course-card {
  min-height: 235px;

  padding: 22px;

  border-radius: 24px;

  border:
    1.5px solid
    var(--gold);

  box-shadow: var(--gold-glow);

  display: flex;

  flex-direction: column;

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

  text-align: center;
}

.course-card.light {
  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ede3d2
    );

  color: #111;
}

.course-card.dark {
  background:
    linear-gradient(
      145deg,
      #181818,
      #090909
    );

  color: #fff;
}

.course-card.light p {
  color: #665f57;
}

.course-card.dark p {
  color: #bfb9b0;
}

.course-icon {
  width: 52px;
  height: 52px;

  margin-bottom: 18px;

  border-radius: 50%;

  display: flex;

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

  background: #111;

  color: var(--gold);

  border:
    1px solid
    var(--gold);

  font-size: .95rem;
  font-weight: 950;
}

.course-card h3 {
  font-size: 1.25rem;
}

.course-card p {
  margin-top: 10px;

  font-size: .86rem;
}

.course-card > span {
  margin-top: 17px;

  color: var(--gold);

  font-size: .68rem;
  font-weight: 950;
}

.planning-cta {
  max-width: 1120px;

  margin:
    38px
    auto
    0;

  padding: 30px;

  border-radius: 25px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #171717,
      #080808
    );

  display: flex;

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

  gap: 28px;

  box-shadow: var(--gold-glow);
}

.planning-cta h3 {
  margin-top: 7px;

  font-size: 1.55rem;
}

.planning-cta p:not(.gold-label) {
  margin-top: 9px;

  max-width: 620px;

  font-size: .92rem;
}


/* =========================================================
   CARTE PREMIÈRE VISITE
========================================================= */

.first-visit {
  padding-top: 0;
}

.first-visit-card {
  max-width: 1120px;

  margin: auto;

  padding: 36px;

  border-radius: 25px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ede3d2
    );

  color: #111;

  box-shadow: var(--gold-glow);
}

.first-visit-card h2 {
  margin-top: 7px;

  color: #111;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.6rem
    );
}

.first-visit-card p:not(.gold-label) {
  max-width: 760px;

  margin-top: 15px;

  color: #625d55;

  font-size: .96rem;
}

.large-gradient-button {
  width: 100%;
  min-height: 62px;

  margin-top: 25px;

  border-radius: 16px;

  display: flex;

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

  background:
    linear-gradient(
      135deg,
      #846631,
      #c39b45
    );

  color: #fff;

  font-size: .8rem;

  font-weight: 950;
}


/* =========================================================
   DÉCOUVRIR LA DESCARGA — STYLE PREMIUM LUDIQUE
========================================================= */

.discover-comic {
    width: 100%;
    max-width: 1120px;

    margin: 0 auto;

    padding:
        54px
        0;

    background:
        transparent;
}


/* =========================================================
   TITRE
========================================================= */

.discover-comic-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 28px;
}


.discover-comic-heading h2 {
    margin-top: 7px;

    color: #fff;

    font-size:
        clamp(
            2rem,
            4vw,
            3.2rem
        );

    line-height: 1;

    letter-spacing: -.035em;
}


.discover-comic-heading > div:first-child > p:last-child {
    max-width: 600px;

    margin-top: 12px;

    color:
        rgba(255,255,255,.60);

    font-size: .92rem;

    line-height: 1.55;
}


.discover-handwritten {
    color: #bd7c3b;

    font-size: 1rem;

    font-style: italic;

    font-weight: 800;

    line-height: 1.18;

    text-align: center;

    transform:
        rotate(-7deg);
}


/* =========================================================
   GRILLE
========================================================= */

.discover-comic-grid {
    display: grid;

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

    gap: 18px;
}


/* =========================================================
   CARTE
========================================================= */

.discover-comic-card {
    position: relative;

    min-height: 190px;

    padding:
        26px
        66px
        25px
        86px;

    display: flex;

    align-items: center;

    border-radius: 25px;

    color: #20150c;

    text-decoration: none;

    border:
        1px solid rgba(130,77,28,.22);

    box-shadow:
        0 13px 30px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.32);

    overflow: visible;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


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

    box-shadow:
        0 18px 38px rgba(0,0,0,.25);
}


/* =========================================================
   COULEURS
========================================================= */

.discover-comic-card.champagne {
    background:
        linear-gradient(
            145deg,
            #f7e7c6 0%,
            #e3b575 58%,
            #c78a49 100%
        );
}


.discover-comic-card.ivoire {
    background:
        linear-gradient(
            145deg,
            #fffaf1 0%,
            #f1dfbd 60%,
            #e5c18e 100%
        );
}


.discover-comic-card.bronze {
    background:
        linear-gradient(
            145deg,
            #e9c38e 0%,
            #c88446 55%,
            #9b5728 100%
        );
}


.discover-comic-card.champagne-light {
    background:
        linear-gradient(
            145deg,
            #fffaf0 0%,
            #f6e5c5 58%,
            #dca963 100%
        );
}


/* =========================================================
   NUMÉRO
========================================================= */

.discover-comic-number {
    position: absolute;

    top: -11px;
    left: 18px;

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #fff5df,
            #d49a50
        );

    color: #6c3e19;

    border:
        1px solid rgba(111,62,23,.28);

    font-size: .67rem;

    font-weight: 950;

    box-shadow:
        0 6px 15px rgba(70,40,16,.15);

    z-index: 2;
}


/* =========================================================
   ICÔNE
========================================================= */

.discover-comic-icon {
    position: absolute;

    left: 21px;

    top: 50%;

    width: 50px;
    height: 50px;

    transform:
        translateY(-50%);

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(255,255,255,.42);

    border:
        1px solid rgba(112,65,24,.20);

    color: #82501f;

    font-size: 1.45rem;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35);
}


/* =========================================================
   TEXTE
========================================================= */

.discover-comic-content {
    min-width: 0;
}


.discover-comic-content small {
    display: block;

    margin-bottom: 5px;

    color:
        #875526;

    font-size: .62rem;

    font-weight: 900;

    letter-spacing: .06em;
}


.discover-comic-card.bronze
.discover-comic-content small {
    color:
        #6a3717;
}


.discover-comic-content h3 {
    margin: 0;

    color: #1e140c;

    font-size: 1.27rem;

    line-height: 1.1;
}


.discover-comic-content p {
    max-width: 360px;

    margin-top: 7px;

    color:
        rgba(38,25,15,.68);

    font-size: .82rem;

    line-height: 1.45;
}


/* =========================================================
   FLÈCHE
========================================================= */

.discover-comic-arrow {
    position: absolute;

    right: 20px;

    top: 50%;

    width: 34px;
    height: 34px;

    transform:
        translateY(-50%);

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(255,255,255,.32);

    border:
        1px solid rgba(104,61,24,.18);

    color: #71421d;

    font-size: 1.45rem;

    font-weight: 900;
}


/* =========================================================
   PETITES TOUCHES BD
========================================================= */

.discover-comic-card:nth-child(1) {
    transform:
        rotate(-.4deg);
}


.discover-comic-card:nth-child(2) {
    transform:
        rotate(.45deg);
}


.discover-comic-card:nth-child(3) {
    transform:
        rotate(.3deg);
}


.discover-comic-card:nth-child(4) {
    transform:
        rotate(-.35deg);
}


.discover-comic-card:nth-child(1)::after {
    content: "✦";

    position: absolute;

    top: 14px;
    right: 18px;

    color: rgba(125,73,28,.55);

    font-size: .8rem;
}


.discover-comic-card:nth-child(2)::after {
    content: "〰";

    position: absolute;

    top: 12px;
    right: 18px;

    color: rgba(133,77,29,.55);

    font-size: 1rem;
}


.discover-comic-card:nth-child(3)::after {
    content: "✦";

    position: absolute;

    top: 14px;
    right: 18px;

    color: rgba(255,240,210,.7);

    font-size: .8rem;
}


.discover-comic-card:nth-child(4)::after {
    content: "♡";

    position: absolute;

    top: 13px;
    right: 18px;

    color: rgba(125,73,28,.55);

    font-size: .9rem;
}


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

@media (max-width: 768px) {

    .discover-comic {
        padding:
            48px
            15px
            54px;
    }


    .discover-comic-heading {
        display: block;

        margin-bottom: 24px;
    }


    .discover-comic-heading h2 {
        font-size:
            1.85rem;
    }


    .discover-comic-heading > div:first-child > p:last-child {
        font-size:
            .82rem;
    }


    .discover-handwritten {
        width:
            max-content;

        margin:
            12px
            5px
            0
            auto;

        font-size:
            .80rem;
    }


    .discover-comic-grid {
        display: flex;

        flex-direction: column;

        gap: 16px;
    }


    .discover-comic-card {
        min-height: 128px;

        padding:
            18px
            50px
            18px
            74px;

        border-radius:
            21px;
    }


    .discover-comic-card:nth-child(1) {
        width: 96%;

        margin-right: auto;

        transform:
            rotate(-.5deg);
    }


    .discover-comic-card:nth-child(2) {
        width: 94%;

        margin-left: auto;

        transform:
            rotate(.7deg);
    }


    .discover-comic-card:nth-child(3) {
        width: 97%;

        margin-right: auto;

        transform:
            rotate(-.35deg);
    }


    .discover-comic-card:nth-child(4) {
        width: 95%;

        margin-left: auto;

        transform:
            rotate(.4deg);
    }


    .discover-comic-number {
        top:
            -9px;

        left:
            -5px;

        width:
            32px;

        height:
            32px;

        font-size:
            .58rem;
    }


    .discover-comic-icon {
        left:
            15px;

        width:
            45px;

        height:
            45px;

        font-size:
            1.25rem;
    }


    .discover-comic-content small {
        font-size:
            .54rem;
    }


    .discover-comic-content h3 {
        font-size:
            1.05rem;
    }


    .discover-comic-content p {
        margin-top:
            5px;

        font-size:
            .74rem;

        line-height:
            1.4;
    }


    .discover-comic-arrow {
        right:
            13px;

        width:
            30px;

        height:
            30px;

        font-size:
            1.2rem;
    }

}
/* =========================================================
   BAR
========================================================= */

.split-section {
  max-width: 1300px;

  margin: auto;

  display: grid;

  grid-template-columns:
    1.1fr
    .9fr;

  gap: 55px;

  align-items: center;
}

.image-placeholder {
  min-height: 500px;

  border-radius: 27px;

  border:
    1.5px solid
    var(--gold);

  display: flex;

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

  background:
    linear-gradient(
      145deg,
      #171717,
      #080808
    );

  color: var(--gold);

  font-size: .74rem;
  font-weight: 900;

  box-shadow: var(--gold-glow);
}

.split-content {
  max-width: 560px;
}

.split-content h2 {
  margin-top: 12px;

  font-size:
    clamp(
      1.9rem,
      3vw,
      2.8rem
    );
}

.split-content > p:not(.gold-label) {
  margin-top: 17px;

  font-size: .96rem;
}

.gold-text-link {
  display: inline-block;

  margin-top: 23px;

  color: var(--gold);

  font-size: .76rem;
  font-weight: 950;
}


/* =========================================================
   SOIRÉES
========================================================= */

.evenings-card {
  max-width: 1120px;

  margin: auto;

  padding: 34px;

  border-radius: 25px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #171717,
      #080808
    );

  display: flex;

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

  gap: 38px;

  box-shadow: var(--gold-glow);
}

.evenings-card h3 {
  margin-top: 8px;

  font-size: 1.65rem;
}

.evenings-card p:not(.gold-label) {
  margin-top: 10px;

  max-width: 650px;

  font-size: .92rem;
}

.evenings-actions {
  display: flex;
  flex-direction: column;

  gap: 11px;

  min-width: 220px;
}


/* =========================================================
   LOCATION
========================================================= */

.location-card {
  max-width: 1080px;

  margin: auto;

  padding: 34px;

  border-radius: 25px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ede3d2
    );

  display: flex;

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

  gap: 28px;

  color: #111;

  box-shadow: var(--gold-glow);
}

.location-card h3 {
  margin-top: 7px;

  font-size: 1.45rem;
}

.location-card p:not(.gold-label) {
  margin-top: 9px;

  color: #635d54;

  font-size: .92rem;
}


/* =========================================================
   APPLICATION
========================================================= */

.application-section {
  max-width: 1120px;

  margin:
    30px
    auto
    90px;

  padding:
    60px
    5vw;

  border-radius: 29px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #131313,
      #050505
    );

  display: grid;

  grid-template-columns:
    1fr
    .65fr;

  gap: 55px;

  align-items: center;

  box-shadow: var(--gold-glow);
}

.app-content h2 {
  margin-top: 10px;

  font-size:
    clamp(
      2rem,
      3.5vw,
      3.2rem
    );
}

.app-content > p:not(.gold-label) {
  max-width: 560px;

  margin-top: 16px;

  font-size: .94rem;
}

.store-buttons {
  margin-top: 25px;

  display: flex;
  flex-wrap: wrap;

  gap: 11px;
}

.phone-mockup {
  width: 220px;

  aspect-ratio: 9 / 18;

  margin: auto;

  border-radius: 36px;

  border:
    2px solid
    var(--gold);

  background: #000;

  display: flex;

  flex-direction: column;

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

  gap: 22px;

  box-shadow: var(--gold-glow);
}

.phone-mockup img {
  width: 68%;
}

.phone-mockup span {
  color: var(--gold);

  font-size: .68rem;
  font-weight: 900;
}


/* =========================================================
   RÉSEAUX SOCIAUX — BOUTONS COULEURS OFFICIELLES
========================================================= */

.social-section {
  padding:
    35px
    20px
    35px;

  text-align: center;
}

.social-section h2 {
  margin-top: 6px;

  color: var(--gold);

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.6rem
    );
}

.social-links {
  margin-top: 24px;

  display: flex;

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

  gap: 18px;
}

.social-links a,
.social-button {
  width: 62px;
  height: 62px;

  border-radius: 18px;

  display: flex;

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

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .12
    );

  color: #fff;

  font-size: 1.8rem;
  font-weight: 900;

  line-height: 1;

  box-shadow:
    0 10px 25px
    rgba(
      0,
      0,
      0,
      .25
    );

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.social-links a:hover,
.social-button:hover {
  transform:
    translateY(-4px)
    scale(1.03);
}

.social-icon {
  color: #fff;

  font-size: 1.8rem;
  font-weight: 900;

  line-height: 1;
}


/* FACEBOOK */

.social-button.facebook,
.social-links a.facebook {
  background: #1877F2;
}

.social-button.facebook:hover,
.social-links a.facebook:hover {
  box-shadow:
    0 0 24px
    rgba(
      24,
      119,
      242,
      .45
    );
}


/* INSTAGRAM */

.social-button.instagram,
.social-links a.instagram {
  background:
    radial-gradient(
      circle at 30% 110%,
      #fdf497 0%,
      #fdf497 5%,
      #fd5949 45%,
      #d6249f 60%,
      #285AEB 90%
    );
}

.social-button.instagram:hover,
.social-links a.instagram:hover {
  box-shadow:
    0 0 26px
    rgba(
      214,
      36,
      159,
      .38
    );
}


/* TIKTOK */

.social-button.tiktok,
.social-links a.tiktok {
  background: #000;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .18
    );

  box-shadow:
    -3px 0 0
      rgba(
        37,
        244,
        238,
        .55
      ),
    3px 0 0
      rgba(
        254,
        44,
        85,
        .55
      );
}

.social-button.tiktok:hover,
.social-links a.tiktok:hover {
  box-shadow:
    -5px 0 18px
      rgba(
        37,
        244,
        238,
        .30
      ),
    5px 0 18px
      rgba(
        254,
        44,
        85,
        .30
      );
}


/* =========================================================
   CONTACT — VERSION COMPACTE
========================================================= */

.contact-section {
  padding:
    35px
    20px
    60px;

  text-align: center;

  border-top:
    1px solid
    rgba(
      216,
      172,
      48,
      .16
    );
}

.contact-logo {
  width: 175px;

  margin:
    0
    auto
    18px;
}

.contact-section .gold-label {
  margin-bottom: 6px;
}

.contact-address {
  margin:
    12px
    0
    20px;

  color: #ddd7cd;

  font-size: .95rem;
}

.contact-section .gold-button {
  margin-right: 10px;
}

.contact-section .gold-text-link {
  margin-top: 0;
}


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

.footer {
  padding:
    34px
    5vw;

  border-top:
    1px solid
    rgba(
      216,
      172,
      48,
      .16
    );

  background: #050505;

  display: grid;

  grid-template-columns:
    1fr
    auto
    auto;

  align-items: center;

  gap: 28px;
}

.footer-logo {
  width: 135px;
}

.footer-links {
  display: flex;

  gap: 18px;

  flex-wrap: wrap;
}

.footer-links a {
  color: #eee8df;

  font-size: .76rem;
  font-weight: 800;
}

.footer p {
  font-size: .72rem;
}


/* =========================================================
   PAGES DISCIPLINES — BASE
========================================================= */

.discipline-hero {
  min-height: 62vh;

  padding:
    130px
    5vw
    65px;

  display: flex;

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

  text-align: center;

  background:
    radial-gradient(
      circle at center,
      rgba(216, 172, 48, .07),
      transparent 40%
    ),
    #000;
}

.discipline-hero-inner {
  max-width: 880px;
}

.discipline-hero h1 {
  margin-top: 8px;

  font-size:
    clamp(
      3rem,
      7vw,
      5.6rem
    );

  line-height: .94;

  letter-spacing: -.045em;
}

.discipline-intro {
  max-width: 700px;

  margin:
    22px
    auto
    0;

  color: #d3cdc4;

  font-size: 1rem;
}

.discipline-buttons {
  margin-top: 28px;

  display: flex;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;
}

.discipline-photo-section {
  padding-top: 0;
}

.discipline-photo-placeholder {
  max-width: 1120px;

  aspect-ratio: 16 / 8;

  margin: auto;

  border-radius: 26px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #181818,
      #080808
    );

  display: flex;

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

  color: var(--gold);

  font-size: .74rem;
  font-weight: 900;

  box-shadow: var(--gold-glow);
}

.discipline-content-section {
  max-width: 1120px;

  margin: auto;

  display: grid;

  grid-template-columns:
    1fr
    .65fr;

  gap: 55px;

  align-items: center;
}

.discipline-text-block h2 {
  margin-top: 10px;

  font-size:
    clamp(
      1.9rem,
      3vw,
      2.8rem
    );
}

.discipline-text-block p:not(.gold-label) {
  margin-top: 17px;

  max-width: 660px;

  font-size: .94rem;
}

.discipline-highlight-card {
  min-height: 260px;

  padding: 30px;

  border-radius: 25px;

  border:
    1.5px solid
    var(--gold);

  box-shadow: var(--gold-glow);

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.discipline-highlight-card.light {
  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ede3d2
    );

  color: #111;
}

.discipline-highlight-card h3 {
  margin-top: 8px;

  font-size: 1.55rem;
}

.discipline-highlight-card p:not(.gold-label) {
  margin-top: 12px;

  color: #655f57;

  font-size: .9rem;
}


/* =========================================================
   ÉTAPES
========================================================= */

.steps-grid {
  max-width: 1120px;

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 18px;
}

.step-card {
  min-height: 235px;

  padding: 26px;

  border-radius: 25px;

  border:
    1.5px solid
    var(--gold);

  box-shadow: var(--gold-glow);

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.step-card.light {
  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ede3d2
    );

  color: #111;
}

.step-card.dark {
  background:
    linear-gradient(
      145deg,
      #181818,
      #090909
    );

  color: #fff;
}

.step-number {
  width: 44px;
  height: 44px;

  border-radius: 50%;

  border:
    1px solid
    var(--gold);

  background: #111;

  color: var(--gold);

  display: flex;

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

  font-size: .72rem;
  font-weight: 900;
}

.step-card h3 {
  margin-top: 20px;

  font-size: 1.3rem;
}

.step-card p {
  margin-top: 11px;

  font-size: .88rem;
}

.step-card.light p {
  color: #645f57;
}


/* =========================================================
   AUTRES DISCIPLINES
========================================================= */

.related-grid {
  max-width: 1120px;

  margin: auto;

  display: grid;

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

  gap: 14px;
}

.related-card {
  min-height: 125px;

  padding: 18px;

  border-radius: 21px;

  border:
    1.5px solid
    var(--gold);

  box-shadow: var(--gold-glow);

  display: flex;

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

  text-align: center;

  font-size: .9rem;

  font-weight: 950;
}

.related-card.light {
  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ede3d2
    );

  color: #111;
}

.related-card.dark {
  background:
    linear-gradient(
      145deg,
      #181818,
      #090909
    );

  color: #fff;
}


/* =========================================================
   CTA FIN PAGES
========================================================= */

.discipline-app-cta {
  max-width: 1020px;

  margin:
    15px
    auto
    90px;

  padding: 45px;

  border-radius: 27px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #151515,
      #060606
    );

  text-align: center;

  box-shadow: var(--gold-glow);
}

.discipline-app-cta h2 {
  margin-top: 8px;

  font-size:
    clamp(
      1.9rem,
      3vw,
      2.8rem
    );
}

.discipline-app-cta > p:not(.gold-label) {
  max-width: 660px;

  margin:
    17px
    auto
    25px;

  font-size: .92rem;
}


/* =========================================================
   BACHATA SIMPLE
========================================================= */

.bachata-simple-page {
  background: #000;
}

.bachata-simple-hero {
  padding:
    125px
    5vw
    52px;

  background:
    radial-gradient(
      circle at center,
      rgba(216, 172, 48, .065),
      transparent 38%
    ),
    #000;
}

.bachata-simple-inner {
  max-width: 1100px;

  margin: auto;

  text-align: center;
}

.bachata-simple-hero h1 {
  margin-top: 5px;

  font-size:
    clamp(
      3rem,
      7vw,
      5.5rem
    );

  line-height: .94;

  letter-spacing: -.045em;
}

.bachata-simple-subtitle {
  margin-top: 14px;

  color: var(--gold);

  font-size:
    clamp(
      1rem,
      1.8vw,
      1.35rem
    );

  font-weight: 900;
}

.bachata-main-card {
  max-width: 920px;

  margin:
    40px
    auto
    0;

  padding: 8px;

  border-radius: 28px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #f7f3eb,
      #eadfcd
    );

  box-shadow: var(--gold-glow);
}

.bachata-main-card-content {
  padding:
    40px
    45px;

  text-align: left;
}

.bachata-main-card h2 {
  max-width: 720px;

  margin-top: 9px;

  color: #111;

  font-size:
    clamp(
      1.9rem,
      3vw,
      2.8rem
    );
}

.bachata-main-card p:not(.gold-label) {
  max-width: 700px;

  margin-top: 16px;

  color: #605a51;

  font-size: .94rem;
}

.bachata-primary-button {
  width: 100%;
  min-height: 60px;

  margin-top: 25px;

  padding:
    0
    22px;

  display: flex;

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

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #886a34,
      #c39b43
    );

  color: #fff;

  font-size: .78rem;

  font-weight: 950;
}

.bachata-primary-button span {
  font-size: 1.55rem;
}

.bachata-simple-photo-section {
  padding:
    18px
    5vw
    78px;
}

.bachata-simple-photo {
  max-width: 1120px;

  aspect-ratio: 16 / 7;

  margin: auto;

  border-radius: 25px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #181818,
      #070707
    );

  display: flex;

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

  color: var(--gold);

  font-size: .74rem;
  font-weight: 900;

  box-shadow: var(--gold-glow);
}

.bachata-section-heading {
  max-width: 760px;

  margin:
    0
    auto
    34px;

  text-align: center;
}

.bachata-section-heading h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.6rem
    );
}

.bachata-levels-section {
  padding:
    20px
    5vw
    85px;
}

.bachata-levels-grid {
  max-width: 1120px;

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 16px;
}

.bachata-level-card {
  min-height: 235px;

  padding: 25px;

  border-radius: 25px;

  border:
    1.5px solid
    var(--gold);

  box-shadow: var(--gold-glow);

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.bachata-level-card.light {
  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ece2d1
    );

  color: #111;
}

.bachata-level-card.dark {
  background:
    linear-gradient(
      145deg,
      #181818,
      #080808
    );

  color: #fff;
}

.bachata-level-icon {
  width: 46px;
  height: 46px;

  margin-bottom: 17px;

  border-radius: 50%;

  display: flex;

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

  background: #111;

  border:
    1px solid
    var(--gold);

  color: var(--gold);

  font-size: .7rem;
  font-weight: 900;
}

.bachata-level-card h3 {
  font-size: 1.4rem;
}

.bachata-level-card p {
  margin-top: 11px;

  font-size: .88rem;
}

.bachata-level-card.light p {
  color: #655f56;
}

.bachata-alone-section {
  padding:
    0
    5vw
    85px;
}

.bachata-alone-card {
  max-width: 1120px;

  margin: auto;

  padding: 34px;

  border-radius: 25px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #171717,
      #080808
    );

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

  box-shadow: var(--gold-glow);
}

.bachata-alone-card h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}

.bachata-alone-card p:not(.gold-label) {
  max-width: 650px;

  margin-top: 12px;

  font-size: .9rem;
}

.bachata-app-section {
  padding:
    0
    5vw
    85px;
}

.bachata-app-card {
  max-width: 1120px;

  margin: auto;

  padding: 35px;

  border-radius: 26px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #f8f4ec,
      #ebe1cf
    );

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  color: #111;

  box-shadow: var(--gold-glow);
}

.bachata-app-card h2 {
  margin-top: 7px;

  color: #111;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}

.bachata-app-card p:not(.gold-label) {
  margin-top: 10px;

  max-width: 650px;

  color: #625c54;

  font-size: .9rem;
}

.bachata-other-section {
  padding:
    10px
    5vw
    95px;
}

.bachata-other-grid {
  max-width: 950px;

  margin: auto;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 13px;
}

.bachata-other-card {
  min-height: 82px;

  padding:
    0
    22px;

  border-radius: 19px;

  border:
    1px solid
    var(--gold);

  background: #111;

  display: flex;

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

  color: #fff;

  font-size: .85rem;

  font-weight: 950;

  box-shadow: var(--gold-glow);
}

.bachata-other-card strong {
  color: var(--gold);

  font-size: 1.5rem;
}


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

@media (max-width: 1050px) {

  .desktop-nav {
    display: none;
  }

  .header {
    grid-template-columns:
      1fr
      auto;
  }

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

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

  .split-section,
  .discipline-content-section {
    grid-template-columns:
      1fr;
  }

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

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

  .planning-cta,
  .location-card,
  .evenings-card,
  .bachata-alone-card,
  .bachata-app-card {
    flex-direction: column;

    align-items: flex-start;
  }

  .application-section {
    margin-left: 5vw;
    margin-right: 5vw;

    grid-template-columns:
      1fr;
  }

  .bachata-levels-grid {
    grid-template-columns:
      1fr;
  }

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

}


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

@media (max-width: 700px) {

  h1 {
    font-size: 2.3rem;
  }

  h2 {
    font-size: 1.8rem;
  }

  h3 {
    font-size: 1.18rem;
  }


  .header {
    min-height: 68px;

    padding:
      8px
      16px;
  }

  .header-logo {
    height: 39px;
  }

  .header-app-button {
    min-height: 37px;

    padding:
      0
      13px;

    font-size: .65rem;
  }


  .home-hero {
    padding:
      95px
      18px
      58px;
  }

  .hero-logo {
    width:
      min(
        290px,
        78vw
      );
  }

  .hero-location {
    margin-bottom: 20px;

    font-size: .61rem;
  }

  .hero-photo {
    aspect-ratio: 1 / .83;

    border-radius: 16px;
  }

  .hero-text {
    margin-top: 30px;
  }

  .hero-text h1 {
    font-size: 1.95rem;
    line-height: 1.08;
  }

  .hero-text p {
    font-size: .92rem;
  }

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

  .big-action-card {
    min-height: 110px;

    padding: 22px;

    border-radius: 20px;
  }

  .big-action-card strong {
    font-size: 1.45rem;
  }


  .section {
    padding:
      58px
      18px;
  }

  .section-title {
    grid-template-columns:
      40px
      auto
      40px;

    gap: 9px;

    margin-bottom: 30px;
  }

  .section-title h2 {
    font-size: .88rem;
  }


  .courses-grid,
  .steps-grid,
  .related-grid {
    grid-template-columns:
      1fr;
  }

  .course-card {
    min-height: 190px;
  }


  .planning-cta {
    padding: 25px;
  }

  .planning-cta .gold-button {
    width: 100%;
  }


  .first-visit-card {
    padding:
      25px
      22px;
  }


  .discover-card {
    min-height: 185px;

    padding: 21px;
  }


  .image-placeholder {
    min-height: 340px;
  }


  .location-card,
  .evenings-card {
    padding: 25px;
  }

  .location-card .gold-button,
  .evenings-actions,
  .evenings-actions a {
    width: 100%;
  }


  .application-section {
    margin:
      10px
      18px
      60px;

    padding:
      28px
      22px;
  }

  .store-buttons {
    flex-direction: column;
  }

  .store-buttons a {
    width: 100%;
  }

  .phone-mockup {
    width: 185px;
  }


  .discipline-hero {
    min-height: auto;

    padding:
      110px
      18px
      58px;
  }

  .discipline-hero h1 {
    font-size: 2.7rem;
  }

  .discipline-intro {
    font-size: .92rem;
  }

  .discipline-buttons {
    flex-direction: column;
  }

  .discipline-buttons a {
    width: 100%;
  }

  .discipline-photo-placeholder {
    aspect-ratio: 1 / .8;

    border-radius: 19px;
  }

  .discipline-app-cta {
    margin:
      10px
      18px
      60px;

    padding:
      30px
      22px;
  }


  .bachata-simple-hero {
    padding:
      105px
      18px
      45px;
  }

  .bachata-simple-hero h1 {
    font-size: 2.7rem;
  }

  .bachata-main-card {
    margin-top: 30px;

    border-radius: 21px;
  }

  .bachata-main-card-content {
    padding:
      27px
      22px;
  }

  .bachata-simple-photo-section,
  .bachata-levels-section,
  .bachata-alone-section,
  .bachata-app-section,
  .bachata-other-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .bachata-simple-photo {
    aspect-ratio: 1 / .8;

    border-radius: 19px;
  }

  .bachata-level-card {
    min-height: 190px;
  }

  .bachata-alone-card,
  .bachata-app-card {
    padding: 25px;

    border-radius: 21px;
  }

  .bachata-alone-card .gold-button,
  .bachata-app-card .gold-button {
    width: 100%;
  }

  .bachata-other-grid {
    grid-template-columns:
      1fr;
  }

}

/* =========================================================
   SALSA — PAGE SPÉCIFIQUE
========================================================= */

.salsa-page {
  background: #000;
}


/* HERO */

.salsa-hero {
  padding:
    125px
    5vw
    55px;

  text-align: center;

  background:
    radial-gradient(
      circle at center,
      rgba(216,172,48,.065),
      transparent 38%
    ),
    #000;
}

.salsa-hero-inner {
  max-width: 900px;
  margin: auto;
}

.salsa-hero h1 {
  margin-top: 5px;

  color: #fff;

  font-size:
    clamp(
      3rem,
      7vw,
      5.5rem
    );

  line-height: .94;
  letter-spacing: -.045em;
}

.salsa-subtitle {
  margin-top: 14px;

  color: var(--gold);

  font-size:
    clamp(
      1rem,
      1.8vw,
      1.35rem
    );

  font-weight: 900;
}

.salsa-lead {
  max-width: 700px;

  margin:
    18px
    auto
    0;

  color: #d0cac0;
  font-size: .96rem;
}

.salsa-hero-actions {
  margin-top: 28px;

  display: flex;
  justify-content: center;

  gap: 12px;
  flex-wrap: wrap;
}


/* PHOTO */

.salsa-photo-section {
  padding:
    18px
    5vw
    75px;
}

.salsa-photo-placeholder {
  max-width: 1120px;

  aspect-ratio: 16 / 7;

  margin: auto;

  border-radius: 25px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #181818,
      #070707
    );

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

  color: var(--gold);

  font-size: .74rem;
  font-weight: 900;

  box-shadow: var(--gold-glow);
}


/* TITRES */

.salsa-section-heading {
  max-width: 760px;

  margin:
    0
    auto
    35px;

  text-align: center;
}

.salsa-section-heading h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.6rem
    );
}

.salsa-section-heading > p:not(.gold-label) {
  margin-top: 12px;
  font-size: .92rem;
}


/* DEUX STYLES */

.salsa-styles-section {
  padding:
    20px
    5vw
    85px;
}

.salsa-styles-grid {
  max-width: 1120px;

  margin: auto;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 18px;
}

.salsa-style-card {
  min-height: 390px;

  padding: 34px;

  border-radius: 26px;

  border:
    1.5px solid
    var(--gold);

  box-shadow: var(--gold-glow);
}

.salsa-cubaine {
  background:
    linear-gradient(
      145deg,
      #181818,
      #080808
    );

  color: #fff;
}

.salsa-porto {
  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ece2d1
    );

  color: #111;
}

.salsa-style-number {
  width: 45px;
  height: 45px;

  margin-bottom: 22px;

  border-radius: 50%;

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

  background: #111;

  border:
    1px solid
    var(--gold);

  color: var(--gold);

  font-size: .7rem;
  font-weight: 900;
}

.salsa-style-card h3 {
  margin-top: 7px;
  font-size: 1.65rem;
}

.salsa-style-card > p:not(.gold-label) {
  margin-top: 14px;
  font-size: .9rem;
}

.salsa-porto > p:not(.gold-label) {
  color: #655f56;
}

.salsa-style-card ul {
  margin-top: 25px;
  padding-left: 20px;
}

.salsa-style-card li {
  margin-top: 8px;
  font-size: .87rem;
}

.salsa-cubaine li {
  color: #c8c1b8;
}

.salsa-porto li {
  color: #5d574f;
}


/* CHOIX */

.salsa-choice-section {
  padding:
    0
    5vw
    85px;
}

.salsa-choice-card {
  max-width: 1120px;

  margin: auto;

  padding: 34px;

  border-radius: 25px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #171717,
      #080808
    );

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

  gap: 30px;

  box-shadow: var(--gold-glow);
}

.salsa-choice-card h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}

.salsa-choice-card p:not(.gold-label) {
  max-width: 650px;

  margin-top: 12px;

  font-size: .9rem;
}


/* DÉBUTANTS */

.salsa-beginner-section {
  padding:
    15px
    5vw
    85px;
}

.salsa-beginner-grid {
  max-width: 1120px;

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 16px;
}

.salsa-mini-card {
  min-height: 220px;

  padding: 25px;

  border-radius: 24px;

  border:
    1.5px solid
    var(--gold);

  box-shadow: var(--gold-glow);
}

.salsa-mini-card.light {
  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ece2d1
    );

  color: #111;
}

.salsa-mini-card.dark {
  background:
    linear-gradient(
      145deg,
      #181818,
      #080808
    );

  color: #fff;
}

.salsa-mini-card > span {
  color: var(--gold);

  font-size: .72rem;
  font-weight: 900;
}

.salsa-mini-card h3 {
  margin-top: 20px;
  font-size: 1.3rem;
}

.salsa-mini-card p {
  margin-top: 11px;
  font-size: .86rem;
}

.salsa-mini-card.light p {
  color: #655f56;
}


/* APPLICATION */

.salsa-app-section {
  padding:
    0
    5vw
    85px;
}

.salsa-app-card {
  max-width: 1120px;

  margin: auto;

  padding: 35px;

  border-radius: 26px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #f8f4ec,
      #ebe1cf
    );

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

  gap: 30px;

  color: #111;

  box-shadow: var(--gold-glow);
}

.salsa-app-card h2 {
  margin-top: 7px;

  color: #111;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}

.salsa-app-card p:not(.gold-label) {
  max-width: 650px;

  margin-top: 10px;

  color: #625c54;

  font-size: .9rem;
}


/* AUTRES DISCIPLINES */

.salsa-other-section {
  padding:
    10px
    5vw
    95px;
}

.salsa-other-grid {
  max-width: 950px;

  margin: auto;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 13px;
}

.salsa-other-grid a {
  min-height: 82px;

  padding:
    0
    22px;

  border-radius: 19px;

  border:
    1px solid
    var(--gold);

  background: #111;

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

  color: #fff;

  font-size: .85rem;
  font-weight: 950;

  box-shadow: var(--gold-glow);

  transition: transform .25s ease;
}

.salsa-other-grid a:hover {
  transform: translateY(-3px);
}

.salsa-other-grid strong {
  color: var(--gold);
  font-size: 1.5rem;
}


/* SALSA — TABLETTE */

@media (max-width: 1000px) {

  .salsa-styles-grid,
  .salsa-beginner-grid,
  .salsa-other-grid {
    grid-template-columns: 1fr;
  }

  .salsa-choice-card,
  .salsa-app-card {
    flex-direction: column;
    align-items: flex-start;
  }

}


/* SALSA — MOBILE */

@media (max-width: 700px) {

  .salsa-hero {
    padding:
      105px
      18px
      45px;
  }

  .salsa-hero h1 {
    font-size: 2.7rem;
  }

  .salsa-hero-actions {
    flex-direction: column;
  }

  .salsa-hero-actions a {
    width: 100%;
  }

  .salsa-photo-section,
  .salsa-styles-section,
  .salsa-choice-section,
  .salsa-beginner-section,
  .salsa-app-section,
  .salsa-other-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .salsa-photo-placeholder {
    aspect-ratio: 1 / .8;
    border-radius: 19px;
  }

  .salsa-style-card {
    min-height: auto;
    padding: 27px;
  }

  .salsa-choice-card,
  .salsa-app-card {
    padding: 25px;
    border-radius: 21px;
  }

  .salsa-choice-card .gold-button,
  .salsa-app-card .gold-button {
    width: 100%;
  }

}
/* =========================================================
   KIZOMBA — PAGE SPÉCIFIQUE
========================================================= */

.kizomba-page {
  background: #000;
}


/* HERO */

.kizomba-hero {
  padding:
    125px
    5vw
    55px;

  text-align: center;

  background:
    radial-gradient(
      circle at center,
      rgba(216,172,48,.055),
      transparent 40%
    ),
    #000;
}

.kizomba-hero-inner {
  max-width: 850px;
  margin: auto;
}

.kizomba-hero h1 {
  margin-top: 5px;

  font-size:
    clamp(
      3rem,
      7vw,
      5.5rem
    );

  line-height: .94;
  letter-spacing: -.045em;
}

.kizomba-subtitle {
  margin-top: 14px;

  color: var(--gold);

  font-size:
    clamp(
      1rem,
      1.8vw,
      1.3rem
    );

  font-weight: 900;
}

.kizomba-lead {
  max-width: 680px;

  margin:
    18px
    auto
    28px;

  color: #c8c2b8;

  font-size: .95rem;
}


/* PHOTO */

.kizomba-photo-section {
  padding:
    18px
    5vw
    75px;
}

.kizomba-photo-placeholder {
  max-width: 1120px;

  aspect-ratio: 16 / 7;

  margin: auto;

  border-radius: 25px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #141414,
      #050505
    );

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

  color: var(--gold);

  font-size: .74rem;
  font-weight: 900;

  box-shadow: var(--gold-glow);
}


/* INTRO */

.kizomba-intro-section {
  padding:
    10px
    5vw
    85px;
}

.kizomba-intro-card {
  max-width: 1120px;

  margin: auto;

  padding:
    42px
    45px;

  border-radius: 26px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #141414,
      #080808
    );

  display: grid;

  grid-template-columns:
    1fr
    .65fr;

  gap: 55px;

  align-items: center;

  box-shadow: var(--gold-glow);
}

.kizomba-intro-text h2 {
  margin-top: 8px;

  font-size:
    clamp(
      1.9rem,
      3vw,
      2.6rem
    );
}

.kizomba-intro-text p:not(.gold-label) {
  max-width: 620px;

  margin-top: 15px;

  font-size: .9rem;
}

.kizomba-word-block {
  min-height: 250px;

  border-left:
    1px solid
    rgba(216,172,48,.4);

  padding-left: 40px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.kizomba-word-block span {
  color: #777;

  font-size: .78rem;

  font-weight: 900;

  letter-spacing: .15em;
}

.kizomba-word-block strong {
  display: block;

  margin:
    14px
    0;

  color: var(--gold);

  font-size:
    clamp(
      2rem,
      4vw,
      3.5rem
    );

  line-height: 1;
}


/* TITRE SECTION */

.kizomba-section-heading {
  max-width: 760px;

  margin:
    0
    auto
    35px;

  text-align: center;
}

.kizomba-section-heading h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.6rem
    );
}


/* FONDAMENTAUX */

.kizomba-foundations-section {
  padding:
    15px
    5vw
    85px;
}

.kizomba-foundations-grid {
  max-width: 1000px;

  margin: auto;

  border-top:
    1px solid
    rgba(216,172,48,.35);
}

.kizomba-foundation {
  min-height: 130px;

  padding:
    24px
    10px;

  border-bottom:
    1px solid
    rgba(216,172,48,.35);

  display: grid;

  grid-template-columns:
    70px
    1fr;

  align-items: center;

  gap: 25px;
}

.kizomba-foundation > span {
  color: var(--gold);

  font-size: .75rem;

  font-weight: 900;
}

.kizomba-foundation h3 {
  font-size: 1.35rem;
}

.kizomba-foundation p {
  max-width: 700px;

  margin-top: 7px;

  font-size: .87rem;
}


/* DÉBUTANTS */

.kizomba-beginner-section {
  padding:
    0
    5vw
    85px;
}

.kizomba-beginner-card {
  max-width: 1120px;

  margin: auto;

  padding: 38px;

  border-radius: 26px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #f8f4ec,
      #ebe1cf
    );

  color: #111;

  display: grid;

  grid-template-columns:
    1fr
    .8fr;

  gap: 45px;

  align-items: center;

  box-shadow: var(--gold-glow);
}

.kizomba-beginner-card h2 {
  margin-top: 7px;

  color: #111;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}

.kizomba-beginner-card p:not(.gold-label) {
  max-width: 650px;

  margin-top: 12px;

  color: #625c54;

  font-size: .9rem;
}

.kizomba-checks {
  padding-left: 30px;

  border-left:
    1px solid
    rgba(148,112,38,.5);
}

.kizomba-checks p {
  margin: 12px 0;

  color: #111;

  font-weight: 800;

  font-size: .86rem;
}


/* APPLICATION */

.kizomba-app-section {
  padding:
    0
    5vw
    85px;
}

.kizomba-app-card {
  max-width: 1120px;

  margin: auto;

  padding: 34px;

  border-radius: 25px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #171717,
      #080808
    );

  display: flex;

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

  gap: 30px;

  box-shadow: var(--gold-glow);
}

.kizomba-app-card h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}

.kizomba-app-card p:not(.gold-label) {
  max-width: 650px;

  margin-top: 10px;

  font-size: .9rem;
}


/* AUTRES DISCIPLINES */

.kizomba-other-section {
  padding:
    10px
    5vw
    95px;
}

.kizomba-other-list {
  max-width: 900px;

  margin: auto;

  border-top:
    1px solid
    rgba(216,172,48,.35);
}

.kizomba-other-list a {
  min-height: 76px;

  padding:
    0
    8px;

  border-bottom:
    1px solid
    rgba(216,172,48,.35);

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: .84rem;

  font-weight: 950;
}

.kizomba-other-list a:hover {
  color: var(--gold);
}

.kizomba-other-list strong {
  color: var(--gold);

  font-size: 1.45rem;
}


/* TABLETTE */

@media (max-width: 1000px) {

  .kizomba-intro-card,
  .kizomba-beginner-card {
    grid-template-columns: 1fr;
  }

  .kizomba-word-block,
  .kizomba-checks {
    border-left: none;

    padding-left: 0;
  }

  .kizomba-word-block {
    border-top:
      1px solid
      rgba(216,172,48,.35);

    padding-top: 30px;
  }

  .kizomba-checks {
    border-top:
      1px solid
      rgba(148,112,38,.4);

    padding-top: 20px;
  }

  .kizomba-app-card {
    flex-direction: column;

    align-items: flex-start;
  }

}


/* MOBILE */

@media (max-width: 700px) {

  .kizomba-hero {
    padding:
      105px
      18px
      45px;
  }

  .kizomba-hero h1 {
    font-size: 2.7rem;
  }

  .kizomba-photo-section,
  .kizomba-intro-section,
  .kizomba-foundations-section,
  .kizomba-beginner-section,
  .kizomba-app-section,
  .kizomba-other-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .kizomba-photo-placeholder {
    aspect-ratio: 1 / .8;

    border-radius: 19px;
  }

  .kizomba-intro-card,
  .kizomba-beginner-card,
  .kizomba-app-card {
    padding: 25px;

    border-radius: 21px;
  }

  .kizomba-foundation {
    grid-template-columns:
      45px
      1fr;

    gap: 12px;
  }

  .kizomba-app-card .gold-button {
    width: 100%;
  }

}
/* =========================================================
   KIZOMBA — CONTENU SPÉCIFIQUE UNIQUEMENT
   Header / Hero / Photo / Boutons / CTA / Footer
   utilisent les styles communs du site
========================================================= */


/* INTRO */

.kizomba-intro {
  max-width: 1120px;

  margin: auto;

  padding:
    15px
    5vw
    80px;

  display: grid;

  grid-template-columns:
    1fr
    .65fr;

  gap: 55px;

  align-items: center;
}


.kizomba-intro-text h2 {
  margin-top: 8px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.6rem
    );
}


.kizomba-intro-text p:not(.gold-label) {
  max-width: 650px;

  margin-top: 15px;

  font-size: .92rem;
}


.kizomba-signature {
  padding:
    25px
    0
    25px
    40px;

  border-left:
    1px solid
    rgba(216, 172, 48, .45);

  display: flex;

  flex-direction: column;

  gap: 18px;
}


.kizomba-signature span {
  color: var(--gold);

  font-size:
    clamp(
      1.25rem,
      2.3vw,
      1.9rem
    );

  font-weight: 900;

  letter-spacing: .03em;
}



/* =========================================================
   FONDAMENTAUX
========================================================= */

.kizomba-foundations {
  max-width: 1000px;

  margin: auto;

  border-top:
    1px solid
    rgba(216, 172, 48, .35);
}


.kizomba-foundation {
  min-height: 125px;

  padding:
    24px
    10px;

  display: grid;

  grid-template-columns:
    55px
    1fr;

  gap: 22px;

  align-items: center;

  border-bottom:
    1px solid
    rgba(216, 172, 48, .35);
}


.kizomba-foundation-number {
  width: 44px;
  height: 44px;

  border-radius: 50%;

  display: flex;

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

  border:
    1px solid
    var(--gold);

  background: #111;

  color: var(--gold);

  font-size: .7rem;

  font-weight: 900;
}


.kizomba-foundation h3 {
  font-size: 1.3rem;
}


.kizomba-foundation p {
  max-width: 700px;

  margin-top: 7px;

  font-size: .88rem;
}



/* =========================================================
   DÉBUTANT
========================================================= */

.kizomba-beginner {
  max-width: 1120px;

  margin: auto;

  padding: 35px;

  border-radius: 25px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ede3d2
    );

  color: #111;

  display: grid;

  grid-template-columns:
    1fr
    .75fr;

  gap: 45px;

  align-items: center;

  box-shadow: var(--gold-glow);
}


.kizomba-beginner h2 {
  margin-top: 7px;

  color: #111;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}


.kizomba-beginner p:not(.gold-label) {
  max-width: 650px;

  margin-top: 12px;

  color: #625c54;

  font-size: .9rem;
}


.kizomba-beginner-list {
  padding-left: 30px;

  border-left:
    1px solid
    rgba(148, 112, 38, .4);

  display: flex;

  flex-direction: column;

  gap: 15px;
}


.kizomba-beginner-list div {
  color: #111;

  font-size: .88rem;

  font-weight: 800;
}


.kizomba-beginner-list span {
  margin-right: 8px;

  color: var(--gold-dark);

  font-weight: 900;
}



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

@media (max-width: 1000px) {

  .kizomba-intro {
    grid-template-columns: 1fr;
  }


  .kizomba-signature {
    padding:
      25px
      0
      0;

    border-left: 0;

    border-top:
      1px solid
      rgba(216, 172, 48, .45);
  }


  .kizomba-beginner {
    grid-template-columns: 1fr;
  }


  .kizomba-beginner-list {
    padding:
      20px
      0
      0;

    border-left: 0;

    border-top:
      1px solid
      rgba(148, 112, 38, .4);
  }

}



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

@media (max-width: 700px) {

  .kizomba-intro {
    padding:
      0
      18px
      60px;
  }


  .kizomba-foundation {
    grid-template-columns:
      44px
      1fr;

    gap: 14px;

    padding:
      20px
      4px;
  }


  .kizomba-beginner {
    padding: 25px;

    border-radius: 21px;
  }


  .kizomba-signature span {
    font-size: 1.2rem;
  }

}
/* =========================================================
   WEST COAST SWING — CONTENU SPÉCIFIQUE
========================================================= */

.wcs-intro {
  max-width: 1120px;

  margin: auto;

  padding:
    15px
    5vw
    80px;

  display: grid;

  grid-template-columns:
    1fr
    .55fr;

  gap: 55px;

  align-items: center;
}

.wcs-intro-main h2 {
  margin-top: 8px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.6rem
    );
}

.wcs-intro-main p:not(.gold-label) {
  max-width: 650px;

  margin-top: 15px;

  font-size: .92rem;
}


/* PETITS BLOCS VERTICAUX */

.wcs-feature-stack {
  display: flex;

  flex-direction: column;

  gap: 12px;
}

.wcs-feature-stack div {
  min-height: 72px;

  padding:
    0
    20px;

  border-radius: 18px;

  border:
    1px solid
    var(--gold);

  background: #111;

  display: flex;

  align-items: center;

  gap: 18px;

  box-shadow: var(--gold-glow);
}

.wcs-feature-stack span {
  color: var(--gold);

  font-size: .72rem;

  font-weight: 900;
}

.wcs-feature-stack strong {
  color: #fff;

  font-size: 1rem;
}


/* BENEFICES */

.wcs-benefits-grid {
  max-width: 1120px;

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 16px;
}

.wcs-benefit-card {
  min-height: 230px;

  padding: 25px;

  border-radius: 24px;

  border:
    1.5px solid
    var(--gold);

  box-shadow: var(--gold-glow);
}

.wcs-benefit-card.light {
  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ece2d1
    );

  color: #111;
}

.wcs-benefit-card.dark {
  background:
    linear-gradient(
      145deg,
      #181818,
      #080808
    );

  color: #fff;
}

.wcs-benefit-number {
  width: 44px;
  height: 44px;

  margin-bottom: 18px;

  border-radius: 50%;

  border:
    1px solid
    var(--gold);

  background: #111;

  display: flex;

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

  color: var(--gold);

  font-size: .7rem;

  font-weight: 900;
}

.wcs-benefit-card h3 {
  font-size: 1.3rem;
}

.wcs-benefit-card p {
  margin-top: 11px;

  font-size: .87rem;
}

.wcs-benefit-card.light p {
  color: #655f56;
}


/* DEBUTANTS */

.wcs-beginner {
  max-width: 1120px;

  margin: auto;

  padding: 35px;

  border-radius: 25px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ede3d2
    );

  color: #111;

  display: grid;

  grid-template-columns:
    1fr
    .8fr;

  gap: 45px;

  align-items: center;

  box-shadow: var(--gold-glow);
}

.wcs-beginner h2 {
  margin-top: 7px;

  color: #111;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}

.wcs-beginner p:not(.gold-label) {
  max-width: 650px;

  margin-top: 12px;

  color: #625c54;

  font-size: .9rem;
}

.wcs-beginner-points {
  padding-left: 30px;

  border-left:
    1px solid
    rgba(148,112,38,.4);

  display: flex;

  flex-direction: column;

  gap: 15px;
}

.wcs-beginner-points div {
  color: #111;

  font-size: .88rem;

  font-weight: 800;
}

.wcs-beginner-points span {
  margin-right: 8px;

  color: var(--gold-dark);

  font-weight: 900;
}


/* TABLETTE */

@media (max-width: 1000px) {

  .wcs-intro {
    grid-template-columns: 1fr;
  }

  .wcs-benefits-grid {
    grid-template-columns: 1fr;
  }

  .wcs-beginner {
    grid-template-columns: 1fr;
  }

  .wcs-beginner-points {
    padding:
      20px
      0
      0;

    border-left: 0;

    border-top:
      1px solid
      rgba(148,112,38,.4);
  }

}


/* MOBILE */

@media (max-width: 700px) {

  .wcs-intro {
    padding:
      0
      18px
      60px;
  }

  .wcs-beginner {
    padding: 25px;

    border-radius: 21px;
  }

  .wcs-feature-stack div {
    min-height: 64px;
  }

}
/* =========================================================
   ROCK — CONTENU SPÉCIFIQUE
========================================================= */

.rock-intro {
  max-width: 1120px;

  margin: auto;

  padding:
    15px
    5vw
    80px;

  display: grid;

  grid-template-columns:
    1fr
    .55fr;

  gap: 55px;

  align-items: center;
}

.rock-intro-text h2 {
  margin-top: 8px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.6rem
    );
}

.rock-intro-text p:not(.gold-label) {
  max-width: 650px;

  margin-top: 15px;

  font-size: .92rem;
}


/* BLOC LATÉRAL */

.rock-side-card {
  min-height: 250px;

  padding: 30px;

  border-radius: 24px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #181818,
      #080808
    );

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 10px;

  box-shadow: var(--gold-glow);
}

.rock-side-card strong {
  color: #fff;

  font-size:
    clamp(
      1.4rem,
      2.5vw,
      2rem
    );

  line-height: 1.05;
}

.rock-side-card strong:nth-of-type(2) {
  color: var(--gold);
}


/* COMPÉTENCES */

.rock-skills-grid {
  max-width: 1120px;

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 16px;
}

.rock-skill-card {
  min-height: 230px;

  padding: 25px;

  border-radius: 24px;

  border:
    1.5px solid
    var(--gold);

  box-shadow: var(--gold-glow);
}

.rock-skill-card.light {
  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ece2d1
    );

  color: #111;
}

.rock-skill-card.dark {
  background:
    linear-gradient(
      145deg,
      #181818,
      #080808
    );

  color: #fff;
}

.rock-skill-number {
  width: 44px;
  height: 44px;

  margin-bottom: 18px;

  border-radius: 50%;

  border:
    1px solid
    var(--gold);

  background: #111;

  display: flex;

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

  color: var(--gold);

  font-size: .7rem;

  font-weight: 900;
}

.rock-skill-card h3 {
  font-size: 1.3rem;
}

.rock-skill-card p {
  margin-top: 11px;

  font-size: .87rem;
}

.rock-skill-card.light p {
  color: #655f56;
}


/* DÉBUTANTS */

.rock-beginner {
  max-width: 1120px;

  margin: auto;

  padding: 35px;

  border-radius: 25px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ede3d2
    );

  color: #111;

  display: grid;

  grid-template-columns:
    1fr
    .8fr;

  gap: 45px;

  align-items: center;

  box-shadow: var(--gold-glow);
}

.rock-beginner h2 {
  margin-top: 7px;

  color: #111;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}

.rock-beginner p:not(.gold-label) {
  max-width: 650px;

  margin-top: 12px;

  color: #625c54;

  font-size: .9rem;
}

.rock-beginner-points {
  padding-left: 30px;

  border-left:
    1px solid
    rgba(148,112,38,.4);

  display: flex;

  flex-direction: column;

  gap: 15px;
}

.rock-beginner-points div {
  color: #111;

  font-size: .88rem;

  font-weight: 800;
}

.rock-beginner-points span {
  margin-right: 8px;

  color: var(--gold-dark);

  font-weight: 900;
}


/* TABLETTE */

@media (max-width: 1000px) {

  .rock-intro {
    grid-template-columns: 1fr;
  }

  .rock-skills-grid {
    grid-template-columns: 1fr;
  }

  .rock-beginner {
    grid-template-columns: 1fr;
  }

  .rock-beginner-points {
    padding:
      20px
      0
      0;

    border-left: 0;

    border-top:
      1px solid
      rgba(148,112,38,.4);
  }

}


/* MOBILE */

@media (max-width: 700px) {

  .rock-intro {
    padding:
      0
      18px
      60px;
  }

  .rock-side-card {
    min-height: 200px;

    padding: 25px;

    border-radius: 21px;
  }

  .rock-beginner {
    padding: 25px;

    border-radius: 21px;
  }

}
/* =========================================================
   BAR — CONTENU SPÉCIFIQUE
========================================================= */

.bar-intro {
  max-width: 1120px;

  margin: auto;

  padding:
    15px
    5vw
    80px;

  display: grid;

  grid-template-columns:
    1fr
    .55fr;

  gap: 55px;

  align-items: center;
}

.bar-intro-text h2 {
  margin-top: 8px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.6rem
    );
}

.bar-intro-text p:not(.gold-label) {
  max-width: 650px;

  margin-top: 15px;

  font-size: .92rem;
}


/* MOTS CLÉS */

.bar-signature {
  padding:
    25px
    0
    25px
    40px;

  border-left:
    1px solid
    rgba(216, 172, 48, .45);

  display: flex;

  flex-direction: column;

  gap: 13px;
}

.bar-signature span {
  color: var(--gold);

  font-size:
    clamp(
      1.2rem,
      2.2vw,
      1.8rem
    );

  font-weight: 900;
}


/* EXPÉRIENCES */

.bar-experience-grid {
  max-width: 1120px;

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 16px;
}

.bar-experience-card {
  min-height: 230px;

  padding: 25px;

  border-radius: 24px;

  border:
    1.5px solid
    var(--gold);

  box-shadow: var(--gold-glow);
}

.bar-experience-card.light {
  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ece2d1
    );

  color: #111;
}

.bar-experience-card.dark {
  background:
    linear-gradient(
      145deg,
      #181818,
      #080808
    );

  color: #fff;
}

.bar-experience-number {
  width: 44px;
  height: 44px;

  margin-bottom: 18px;

  border-radius: 50%;

  border:
    1px solid
    var(--gold);

  background: #111;

  display: flex;

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

  color: var(--gold);

  font-size: .7rem;

  font-weight: 900;
}

.bar-experience-card h3 {
  font-size: 1.3rem;
}

.bar-experience-card p {
  margin-top: 11px;

  font-size: .87rem;
}

.bar-experience-card.light p {
  color: #655f56;
}


/* PREMIÈRE VISITE */

.bar-visit-card {
  max-width: 1120px;

  margin: auto;

  padding: 35px;

  border-radius: 25px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ede3d2
    );

  color: #111;

  display: flex;

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

  gap: 35px;

  box-shadow: var(--gold-glow);
}

.bar-visit-card h2 {
  margin-top: 7px;

  color: #111;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}

.bar-visit-card p:not(.gold-label) {
  max-width: 650px;

  margin-top: 12px;

  color: #625c54;

  font-size: .9rem;
}


/* SOIRÉES */

.bar-evening-card {
  max-width: 1120px;

  margin: auto;

  padding: 35px;

  border-radius: 25px;

  border:
    1.5px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #171717,
      #080808
    );

  display: flex;

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

  gap: 35px;

  box-shadow: var(--gold-glow);
}

.bar-evening-card h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}

.bar-evening-card p:not(.gold-label) {
  max-width: 650px;

  margin-top: 12px;

  font-size: .9rem;
}

.bar-evening-actions {
  min-width: 230px;

  display: flex;

  flex-direction: column;

  gap: 11px;
}


/* TABLETTE */

@media (max-width: 1000px) {

  .bar-intro {
    grid-template-columns: 1fr;
  }

  .bar-signature {
    padding:
      25px
      0
      0;

    border-left: 0;

    border-top:
      1px solid
      rgba(216, 172, 48, .45);
  }

  .bar-experience-grid {
    grid-template-columns: 1fr;
  }

  .bar-visit-card,
  .bar-evening-card {
    flex-direction: column;

    align-items: flex-start;
  }

}


/* MOBILE */

@media (max-width: 700px) {

  .bar-intro {
    padding:
      0
      18px
      60px;
  }

  .bar-visit-card,
  .bar-evening-card {
    padding: 25px;

    border-radius: 21px;
  }

  .bar-visit-card .gold-button,
  .bar-evening-actions,
  .bar-evening-actions a {
    width: 100%;
  }

}
/* =========================================================
   BAR NÉON — CONTENU SPÉCIFIQUE
========================================================= */

.bar-neon-intro {
  max-width: 1120px;

  margin: auto;

  padding:
    15px
    5vw
    85px;

  display: grid;

  grid-template-columns:
    1fr
    .55fr;

  gap: 55px;

  align-items: center;
}

.bar-neon-intro h2 {
  margin-top: 8px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.6rem
    );
}

.bar-neon-intro p:not(.gold-label) {
  max-width: 650px;

  margin-top: 15px;

  font-size: .92rem;
}


/* ENSEIGNE NÉON */

.bar-neon-sign {
  min-height: 240px;

  padding: 30px;

  border-radius: 26px;

  border:
    1px solid
    rgba(216,172,48,.55);

  background:
    radial-gradient(
      circle at center,
      rgba(216,172,48,.10),
      transparent 55%
    ),
    #090909;

  display: flex;

  flex-direction: column;

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

  gap: 4px;

  box-shadow:
    0 0 18px rgba(216,172,48,.12);
}

.bar-neon-sign span {
  color: #d6d0c6;

  font-size: 1rem;

  font-weight: 900;

  letter-spacing: .20em;
}

.bar-neon-sign strong {
  color: var(--gold-light);

  font-size:
    clamp(
      2.4rem,
      5vw,
      4rem
    );

  line-height: 1;

  text-shadow:
    0 0 7px rgba(241,207,99,.65),
    0 0 20px rgba(216,172,48,.40),
    0 0 35px rgba(216,172,48,.22);
}


/* =========================================================
   CARTES BOISSONS
========================================================= */

.bar-drinks-grid {
  max-width: 1120px;

  margin: auto;

  display: grid;

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

  gap: 18px;
}

.drink-card {
  min-height: 330px;

  padding: 26px;

  border-radius: 26px;

  border:
    1px solid
    rgba(216,172,48,.55);

  background:
    linear-gradient(
      145deg,
      #151515,
      #080808
    );

  display: grid;

  grid-template-columns:
    180px
    1fr;

  gap: 28px;

  align-items: center;

  overflow: hidden;

  position: relative;

  box-shadow:
    0 0 16px rgba(216,172,48,.10);
}

.drink-content {
  position: relative;

  z-index: 2;
}

.drink-content h3 {
  margin-top: 6px;

  font-size: 1.55rem;
}

.drink-content p:not(.gold-label) {
  margin-top: 11px;

  max-width: 320px;

  font-size: .88rem;
}

.drink-price {
  display: inline-flex;

  margin-top: 18px;

  padding:
    8px
    13px;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  color: #111;

  font-size: .83rem;

  font-weight: 950;
}


/* =========================================================
   VISUELS VERRES
========================================================= */

.drink-visual {
  min-height: 250px;

  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;
}

.drink-glow {
  position: absolute;

  width: 150px;
  height: 150px;

  border-radius: 50%;

  filter: blur(25px);

  opacity: .40;
}

.glow-orange {
  background: #ff8a22;
}

.glow-gold {
  background: #e9b93f;
}

.glow-pink {
  background: #ff6ca8;
}

.glow-green {
  background: #76d66a;
}


.drink-glass {
  position: relative;

  z-index: 2;

  border:
    2px solid
    rgba(255,255,255,.72);

  background:
    rgba(255,255,255,.05);

  box-shadow:
    inset 0 0 14px rgba(255,255,255,.08),
    0 0 12px rgba(255,255,255,.08);
}


/* VERRE HAUT */

.tall-glass {
  width: 76px;
  height: 170px;

  border-radius:
    12px
    12px
    25px
    25px;

  overflow: hidden;
}


/* VERRE BAS */

.rocks-glass {
  width: 96px;
  height: 105px;

  margin-top: 45px;

  border-radius:
    8px
    8px
    20px
    20px;

  overflow: hidden;
}


/* COUPE */

.coupe-glass {
  width: 120px;
  height: 70px;

  margin-top: -30px;

  border-radius:
    8px
    8px
    50px
    50px;
}

.coupe-glass::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 67px;

  width: 2px;
  height: 80px;

  transform: translateX(-50%);

  background:
    rgba(255,255,255,.75);
}

.coupe-glass::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 145px;

  width: 70px;
  height: 2px;

  transform: translateX(-50%);

  background:
    rgba(255,255,255,.75);
}


/* LIQUIDES */

.drink-liquid {
  position: absolute;

  left: 3px;
  right: 3px;
  bottom: 3px;

  border-radius:
    0
    0
    18px
    18px;
}

.orange-liquid {
  height: 72%;

  background:
    linear-gradient(
      to top,
      rgba(255,102,20,.95),
      rgba(255,190,61,.85)
    );
}

.amber-liquid {
  height: 72%;

  background:
    linear-gradient(
      to top,
      rgba(141,67,10,.95),
      rgba(234,167,53,.90)
    );
}

.pink-liquid {
  height: 85%;

  background:
    linear-gradient(
      to top,
      rgba(240,92,129,.90),
      rgba(255,176,180,.75)
    );

  border-radius:
    0
    0
    45px
    45px;
}

.clear-liquid {
  height: 74%;

  background:
    linear-gradient(
      to top,
      rgba(210,245,181,.35),
      rgba(245,255,225,.18)
    );
}


/* GLAÇONS */

.drink-ice {
  position: absolute;

  width: 25px;
  height: 25px;

  border:
    1px solid
    rgba(255,255,255,.65);

  background:
    rgba(255,255,255,.12);

  transform: rotate(18deg);

  z-index: 4;
}

.ice-one {
  bottom: 65px;
  left: 13px;
}

.ice-two {
  bottom: 42px;
  right: 13px;

  transform: rotate(-14deg);
}


/* PAILLE */

.drink-straw {
  position: absolute;

  width: 4px;
  height: 140px;

  top: -40px;
  right: 15px;

  transform: rotate(10deg);

  background:
    var(--gold-light);

  z-index: 5;
}


/* AGRUMES */

.drink-slice {
  position: absolute;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  z-index: 6;
}

.orange-slice {
  top: 17px;
  left: -15px;

  border:
    5px solid
    #ff9a2f;

  background:
    rgba(255,197,88,.35);
}

.lime-slice {
  top: 16px;
  left: -14px;

  border:
    5px solid
    #86cd5a;

  background:
    rgba(170,231,118,.25);
}


/* MENTHE */

.drink-leaf {
  position: absolute;

  width: 26px;
  height: 15px;

  border-radius:
    100% 0
    100% 0;

  background:
    #5fbd61;

  z-index: 5;
}

.leaf-one {
  top: 21px;
  left: 10px;

  transform: rotate(-25deg);
}

.leaf-two {
  top: 31px;
  left: 27px;

  transform: rotate(18deg);
}


/* =========================================================
   AUTRES COCKTAILS
========================================================= */

.bar-more-drinks {
  padding:
    10px
    5vw
    85px;
}

.bar-more-drinks-inner {
  max-width: 1120px;

  margin: auto;

  padding: 34px;

  border-radius: 25px;

  border:
    1px solid
    var(--gold);

  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(216,172,48,.09),
      transparent 36%
    ),
    #101010;

  display: grid;

  grid-template-columns:
    .8fr
    1.2fr;

  gap: 40px;

  align-items: center;

  box-shadow: var(--gold-glow);
}

.bar-more-drinks-inner h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.7rem,
      3vw,
      2.4rem
    );
}

.bar-drink-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}

.bar-drink-tags span {
  padding:
    10px
    14px;

  border-radius: 999px;

  border:
    1px solid
    rgba(216,172,48,.65);

  background:
    rgba(216,172,48,.06);

  color: #f2ede5;

  font-size: .78rem;

  font-weight: 800;
}


/* =========================================================
   CARTE BAR
========================================================= */

.bar-menu-card {
  max-width: 1120px;

  margin: auto;

  padding: 35px;

  border-radius: 25px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ede3d2
    );

  color: #111;

  display: grid;

  grid-template-columns:
    1fr
    .8fr;

  gap: 40px;

  align-items: center;

  box-shadow: var(--gold-glow);
}

.bar-menu-card h2 {
  margin-top: 7px;

  color: #111;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}

.bar-menu-card p:not(.gold-label) {
  max-width: 620px;

  margin-top: 12px;

  color: #625c54;

  font-size: .9rem;
}

.bar-menu-categories {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 10px;
}

.bar-menu-categories span {
  min-height: 52px;

  padding:
    0
    12px;

  border-radius: 14px;

  background: #111;

  border:
    1px solid
    var(--gold);

  color: #fff;

  display: flex;

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

  text-align: center;

  font-size: .73rem;

  font-weight: 900;
}


/* =========================================================
   AMBIANCE NUIT
========================================================= */

.bar-night-card {
  max-width: 1120px;

  margin: auto;

  padding: 35px;

  border-radius: 25px;

  border:
    1.5px solid
    var(--gold);

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(216,172,48,.09),
      transparent 35%
    ),
    #0d0d0d;

  display: flex;

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

  gap: 35px;

  box-shadow: var(--gold-glow);
}

.bar-night-card h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}

.bar-night-card p:not(.gold-label) {
  max-width: 650px;

  margin-top: 12px;

  font-size: .9rem;
}

.bar-night-actions {
  min-width: 230px;

  display: flex;

  flex-direction: column;

  gap: 11px;
}


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

@media (max-width: 1000px) {

  .bar-neon-intro {
    grid-template-columns: 1fr;
  }

  .bar-drinks-grid {
    grid-template-columns: 1fr;
  }

  .bar-more-drinks-inner,
  .bar-menu-card {
    grid-template-columns: 1fr;
  }

  .bar-night-card {
    flex-direction: column;

    align-items: flex-start;
  }

}


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

@media (max-width: 700px) {

  .bar-neon-intro {
    padding:
      0
      18px
      60px;
  }

  .bar-neon-sign {
    min-height: 200px;

    padding: 24px;
  }

  .drink-card {
    grid-template-columns: 1fr;

    text-align: center;

    padding: 24px;
  }

  .drink-visual {
    min-height: 220px;
  }

  .drink-content p:not(.gold-label) {
    margin-left: auto;
    margin-right: auto;
  }

  .bar-more-drinks {
    padding-left: 18px;
    padding-right: 18px;
  }

  .bar-more-drinks-inner,
  .bar-menu-card,
  .bar-night-card {
    padding: 25px;

    border-radius: 21px;
  }

  .bar-menu-categories {
    grid-template-columns: 1fr;
  }

  .bar-night-actions,
  .bar-night-actions a {
    width: 100%;
  }

}
/* =========================================================
   SOIRÉES — VERSION DÉFINITIVE
   FESTIVE / NÉON / ARTISTES INVITÉS
========================================================= */


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

.party-wow-hero {
  min-height: 78vh;

  padding:
    125px
    5vw
    75px;

  position: relative;
  overflow: hidden;

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

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(216, 172, 48, .10),
      transparent 34%
    ),
    #000;
}


.party-wow-hero-inner {
  max-width: 900px;

  position: relative;
  z-index: 5;
}


.party-wow-hero h1 {
  margin-top: 8px;

  font-size:
    clamp(
      3.2rem,
      7vw,
      5.5rem
    );

  line-height: .93;
  letter-spacing: -.045em;
}


.party-wow-subtitle {
  margin-top: 18px;

  color: var(--gold);

  font-size:
    clamp(
      1rem,
      1.8vw,
      1.3rem
    );

  font-weight: 900;
  letter-spacing: .08em;
}


.party-wow-lead {
  margin-top: 14px;

  color: #ded7cd;

  font-size:
    clamp(
      1.05rem,
      2vw,
      1.3rem
    );

  font-weight: 800;
}


.party-wow-actions {
  margin-top: 30px;

  display: flex;
  justify-content: center;

  gap: 12px;
  flex-wrap: wrap;
}


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

.party-wow-light {
  position: absolute;

  width: 360px;
  height: 360px;

  border-radius: 50%;

  filter: blur(100px);

  opacity: .30;
}


.party-wow-light-pink {
  left: -120px;
  top: 15%;

  background: #ff2f9d;
}


.party-wow-light-blue {
  right: -120px;
  top: 20%;

  background: #536cff;
}


.party-wow-light-gold {
  left: 38%;
  bottom: -180px;

  background: #d8ac30;
}


/* =========================================================
   GRANDE ZONE FESTIVE
========================================================= */

.party-wow-visual-section {
  padding-top: 0;
}


.party-wow-visual {
  max-width: 1120px;
  min-height: 400px;

  margin: auto;

  border-radius: 28px;

  border:
    1px solid
    rgba(216, 172, 48, .55);

  position: relative;
  overflow: hidden;

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

  background:
    radial-gradient(
      circle at 20% 60%,
      rgba(255, 43, 154, .18),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 35%,
      rgba(72, 93, 255, .18),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #141414,
      #050505
    );

  box-shadow:
    0 0 25px rgba(216, 172, 48, .11);
}


/* =========================================================
   FAISCEAUX
========================================================= */

.party-wow-beam {
  position: absolute;

  top: -100px;

  width: 80px;
  height: 650px;

  filter: blur(16px);

  opacity: .17;
}


.beam-one {
  left: 20%;

  background:
    linear-gradient(
      to bottom,
      #ff35a3,
      transparent
    );

  transform: rotate(22deg);
}


.beam-two {
  right: 18%;

  background:
    linear-gradient(
      to bottom,
      #5b68ff,
      transparent
    );

  transform: rotate(-24deg);
}


.beam-three {
  left: 49%;

  background:
    linear-gradient(
      to bottom,
      var(--gold),
      transparent
    );

  transform: rotate(5deg);
}


/* =========================================================
   BOULE DISCO
========================================================= */

.party-wow-disco-ball {
  position: absolute;

  top: 30px;
  right: 60px;

  width: 70px;
  height: 70px;

  border-radius: 50%;

  border:
    1px solid
    rgba(255, 255, 255, .45);

  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, .24) 0,
      rgba(255, 255, 255, .24) 4px,
      rgba(255, 255, 255, .06) 4px,
      rgba(255, 255, 255, .06) 8px
    );

  box-shadow:
    0 0 18px rgba(255, 255, 255, .20),
    0 0 35px rgba(216, 172, 48, .16);
}


/* =========================================================
   MESSAGE NÉON
========================================================= */

.party-wow-neon-message {
  position: relative;
  z-index: 4;

  text-align: center;

  display: flex;
  flex-direction: column;
}


.party-wow-neon-message span {
  color: #e6e0d8;

  font-size: .9rem;

  font-weight: 900;
  letter-spacing: .22em;
}


.party-wow-neon-message strong {
  margin-top: 5px;

  color: var(--gold-light);

  font-size:
    clamp(
      2.4rem,
      5.5vw,
      4.2rem
    );

  line-height: 1;

  text-shadow:
    0 0 8px rgba(241, 207, 99, .65),
    0 0 24px rgba(216, 172, 48, .38),
    0 0 50px rgba(216, 172, 48, .20);
}


/* =========================================================
   MINI BADGES
========================================================= */

.party-wow-mini-badges {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 28px;

  display: flex;
  justify-content: center;

  gap: 9px;
  flex-wrap: wrap;
}


.party-wow-mini-badges span {
  padding:
    8px
    13px;

  border-radius: 999px;

  border:
    1px solid
    rgba(216, 172, 48, .55);

  background:
    rgba(0, 0, 0, .50);

  color: #fff;

  font-size: .68rem;
  font-weight: 900;
}


/* =========================================================
   POURQUOI VENIR
========================================================= */

.party-reasons-grid {
  max-width: 1120px;

  margin: auto;

  display: grid;

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

  gap: 14px;
}


.party-reason-card {
  min-height: 200px;

  padding: 23px;

  border-radius: 22px;

  border:
    1px solid
    rgba(216, 172, 48, .55);

  background: #0f0f0f;

  position: relative;
  overflow: hidden;
}


.party-reason-card::after {
  content: "";

  position: absolute;

  width: 120px;
  height: 120px;

  border-radius: 50%;

  right: -40px;
  bottom: -45px;

  filter: blur(40px);

  opacity: .25;
}


.party-reason-pink::after {
  background: #ff38a1;
}


.party-reason-gold::after {
  background: #d8ac30;
}


.party-reason-blue::after {
  background: #5068ff;
}


.party-reason-green::after {
  background: #3cd6a2;
}


.party-reason-icon {
  width: 44px;
  height: 44px;

  border-radius: 50%;

  border:
    1px solid
    var(--gold);

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

  color: var(--gold);

  font-size: 1rem;

  position: relative;
  z-index: 2;
}


.party-reason-card h3 {
  margin-top: 16px;

  font-size: 1.2rem;

  position: relative;
  z-index: 2;
}


.party-reason-card p {
  margin-top: 9px;

  font-size: .84rem;

  position: relative;
  z-index: 2;
}


/* =========================================================
   MESSAGE CENTRAL
========================================================= */

.party-big-message-section {
  padding:
    30px
    5vw
    80px;
}


.party-big-message {
  max-width: 1050px;

  margin: auto;

  text-align: center;
}


.party-big-message h2 {
  margin-top: 8px;

  font-size:
    clamp(
      1.6rem,
      3vw,
      2.3rem
    );

  color: #fff;
}


.party-big-message strong {
  display: block;

  margin-top: 16px;

  color: var(--gold);

  font-size:
    clamp(
      1.9rem,
      4vw,
      3rem
    );

  line-height: 1.05;
}


/* =========================================================
   CHOISISSEZ VOTRE AMBIANCE
========================================================= */

.party-worlds-grid {
  max-width: 1120px;

  margin: auto;

  display: grid;

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

  gap: 14px;
}


/* CARTES PLUS COMPACTES */

.party-world {
  min-height: 165px;

  padding: 24px;

  border-radius: 22px;

  border:
    1px solid
    rgba(216, 172, 48, .55);

  background: #101010;

  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;

  box-shadow:
    0 0 13px rgba(216, 172, 48, .06);
}


.party-world-light {
  position: absolute;

  width: 170px;
  height: 170px;

  right: -45px;
  bottom: -55px;

  border-radius: 50%;

  filter: blur(45px);

  opacity: .34;
}


.party-world-bachata .party-world-light {
  background: #ff3f8e;
}


.party-world-salsa .party-world-light {
  background: #ff863b;
}


.party-world-kizomba .party-world-light {
  background: #5b66ff;
}


.party-world-kompa .party-world-light {
  background: #31c8aa;
}


.party-world-content {
  position: relative;
  z-index: 3;

  max-width: 78%;
}


.party-world h3 {
  margin-top: 6px;

  font-size: 1.3rem;
}


.party-world p:not(.gold-label) {
  max-width: 330px;

  margin-top: 7px;

  font-size: .84rem;
}


/* =========================================================
   ARTISTES INVITÉS
========================================================= */

.party-guests-section {
  position: relative;
}


.party-guests-header {
  max-width: 760px;

  margin:
    0
    auto
    35px;

  text-align: center;
}


.party-guests-header h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}


.party-guests-header p:not(.gold-label) {
  max-width: 670px;

  margin:
    11px
    auto
    0;

  font-size: .89rem;
}


/* =========================================================
   GRANDE CARTE ARTISTES
========================================================= */

.party-artists-showcase {
  max-width: 1120px;

  margin: auto;

  display: grid;

  grid-template-columns:
    .9fr
    1.1fr;

  border-radius: 26px;

  border:
    1px solid
    rgba(216, 172, 48, .55);

  overflow: hidden;

  background: #0d0d0d;

  box-shadow:
    0 0 20px rgba(216, 172, 48, .10);
}


.party-artists-photo {
  min-height: 330px;

  position: relative;

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

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 47, 157, .16),
      transparent 38%
    ),
    radial-gradient(
      circle at 30% 80%,
      rgba(78, 95, 255, .12),
      transparent 36%
    ),
    #070707;
}


.party-artists-photo-glow {
  position: absolute;

  width: 250px;
  height: 250px;

  border-radius: 50%;

  background: #ff3b9e;

  filter: blur(80px);

  opacity: .13;
}


.party-artists-photo-label {
  position: relative;
  z-index: 2;

  text-align: center;

  display: flex;
  flex-direction: column;
}


.party-artists-photo-label span {
  color: var(--gold);

  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .15em;
}


.party-artists-photo-label strong {
  margin-top: 5px;

  color: #fff;

  font-size: 1.35rem;
}


.party-artists-content {
  padding: 34px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.party-artists-content h3 {
  margin-top: 8px;

  font-size:
    clamp(
      1.5rem,
      2.7vw,
      2.2rem
    );
}


.party-artists-content p:not(.gold-label) {
  margin-top: 12px;

  font-size: .87rem;
}


.party-artists-tags {
  margin-top: 22px;

  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}


.party-artists-tags span {
  padding:
    8px
    12px;

  border-radius: 999px;

  border:
    1px solid
    rgba(216, 172, 48, .60);

  color: #fff;

  background:
    rgba(216, 172, 48, .05);

  font-size: .67rem;
  font-weight: 900;
}


/* =========================================================
   DJ INVITÉS
========================================================= */

.party-dj-card {
  max-width: 1120px;

  margin:
    16px
    auto
    0;

  padding: 25px;

  border-radius: 20px;

  border:
    1px solid
    rgba(216, 172, 48, .50);

  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(79, 96, 255, .12),
      transparent 35%
    ),
    #101010;

  display: grid;

  grid-template-columns:
    58px
    1fr;

  gap: 20px;

  align-items: center;
}


.party-dj-icon {
  width: 52px;
  height: 52px;

  border-radius: 50%;

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

  border:
    1px solid
    var(--gold);

  color: var(--gold);

  font-size: 1.2rem;
}


.party-dj-card h3 {
  margin-top: 5px;

  font-size: 1.3rem;
}


.party-dj-card p:not(.gold-label) {
  max-width: 680px;

  margin-top: 7px;

  font-size: .85rem;
}


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

.party-guests-cta {
  max-width: 1120px;

  margin:
    16px
    auto
    0;

  padding: 26px;

  border-radius: 20px;

  border:
    1px solid
    var(--gold);

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(216, 172, 48, .10),
      transparent 35%
    ),
    #101010;

  display: flex;

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

  gap: 30px;
}


.party-guests-cta h3 {
  margin-top: 6px;
}


.party-guests-cta p:not(.gold-label) {
  max-width: 630px;

  margin-top: 8px;

  font-size: .85rem;
}


/* =========================================================
   OUVERT À TOUS
========================================================= */

.party-everyone-card {
  max-width: 1120px;

  margin: auto;

  padding: 32px;

  border-radius: 24px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ece2d1
    );

  color: #111;

  display: grid;

  grid-template-columns:
    1fr
    .8fr;

  gap: 38px;

  align-items: center;

  box-shadow: var(--gold-glow);
}


.party-everyone-card h2 {
  margin-top: 7px;

  color: #111;

  font-size:
    clamp(
      1.7rem,
      3vw,
      2.4rem
    );
}


.party-everyone-card p:not(.gold-label) {
  max-width: 650px;

  margin-top: 11px;

  color: #625c54;

  font-size: .88rem;
}


.party-everyone-badges {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 9px;
}


.party-everyone-badges span {
  min-height: 48px;

  border-radius: 13px;

  background: #111;

  border:
    1px solid
    var(--gold);

  color: #fff;

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

  font-size: .7rem;
  font-weight: 900;
}


/* =========================================================
   BANDE FESTIVE
========================================================= */

.party-strip-section {
  padding:
    10px
    5vw
    70px;
}


.party-strip {
  max-width: 1120px;

  min-height: 68px;

  margin: auto;

  padding:
    0
    22px;

  border-radius: 18px;

  border:
    1px solid
    rgba(216, 172, 48, .50);

  background:
    linear-gradient(
      90deg,
      rgba(255, 50, 160, .08),
      rgba(216, 172, 48, .08),
      rgba(70, 90, 255, .08)
    );

  display: flex;

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

  flex-wrap: wrap;

  gap: 16px;
}


.party-strip span {
  color: #fff;

  font-size: .72rem;

  font-weight: 900;

  letter-spacing: .08em;
}


.party-strip i {
  color: var(--gold);

  font-style: normal;
}


/* =========================================================
   PROCHAINE SOIRÉE
========================================================= */

.party-next-card {
  max-width: 1120px;

  margin: auto;

  padding: 32px;

  border-radius: 24px;

  border:
    1.5px solid
    var(--gold);

  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(255, 47, 157, .10),
      transparent 35%
    ),
    #0d0d0d;

  display: flex;

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

  gap: 35px;

  box-shadow: var(--gold-glow);
}


.party-next-card h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.7rem,
      3vw,
      2.4rem
    );
}


.party-next-card p:not(.gold-label) {
  max-width: 650px;

  margin-top: 11px;

  font-size: .88rem;
}


/* =========================================================
   RÉSEAUX
========================================================= */

.party-wow-social {
  padding:
    25px
    20px
    85px;

  text-align: center;
}


.party-wow-social h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.7rem,
      3vw,
      2.4rem
    );
}


.party-wow-social > p:not(.gold-label) {
  max-width: 600px;

  margin:
    11px
    auto
    0;

  font-size: .88rem;
}


.party-wow-social-grid {
  max-width: 720px;

  margin:
    25px
    auto
    0;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 13px;
}


.party-wow-social-grid a {
  min-height: 95px;

  border-radius: 18px;

  border:
    1px solid
    var(--gold);

  background: #101010;

  display: flex;

  flex-direction: column;

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

  gap: 6px;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.party-wow-social-grid a:hover {
  transform: translateY(-3px);

  box-shadow:
    0 0 18px rgba(216, 172, 48, .12);
}


.party-wow-social-grid strong {
  font-size: 1.4rem;
}


.party-wow-social-grid span {
  color: var(--gold);

  font-size: .7rem;
  font-weight: 900;
}


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

@media (max-width: 1000px) {

  .party-reasons-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .party-worlds-grid {
    grid-template-columns: 1fr;
  }


  .party-artists-showcase {
    grid-template-columns: 1fr;
  }


  .party-artists-photo {
    min-height: 280px;
  }


  .party-everyone-card {
    grid-template-columns: 1fr;
  }


  .party-guests-cta,
  .party-next-card {
    flex-direction: column;

    align-items: flex-start;
  }

}


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

@media (max-width: 700px) {

  .party-wow-hero {
    min-height: auto;

    padding:
      105px
      18px
      58px;
  }


  .party-wow-hero h1 {
    font-size: 2.8rem;
  }


  .party-wow-actions {
    flex-direction: column;
  }


  .party-wow-actions a {
    width: 100%;
  }


  .party-wow-visual {
    min-height: 320px;

    border-radius: 21px;
  }


  .party-wow-disco-ball {
    width: 50px;
    height: 50px;

    top: 24px;
    right: 24px;
  }


  .party-wow-mini-badges {
    padding:
      0
      15px;
  }


  .party-reasons-grid {
    grid-template-columns: 1fr;
  }


  .party-reason-card {
    min-height: 180px;

    border-radius: 20px;
  }


  /* UNIVERS COMPACTS SUR MOBILE */

  .party-world {
    min-height: 145px;

    padding: 21px;

    border-radius: 20px;
  }


  .party-world-content {
    max-width: 82%;
  }


  .party-world-light {
    width: 145px;
    height: 145px;
  }


  .party-world h3 {
    font-size: 1.2rem;
  }


  .party-artists-showcase {
    border-radius: 21px;
  }


  .party-artists-photo {
    min-height: 230px;
  }


  .party-artists-content {
    padding: 24px;
  }


  .party-dj-card {
    grid-template-columns: 1fr;

    padding: 22px;
  }


  .party-guests-cta,
  .party-everyone-card,
  .party-next-card {
    padding: 24px;

    border-radius: 20px;
  }


  .party-everyone-badges {
    grid-template-columns: 1fr;
  }


  .party-guests-cta .gold-button,
  .party-next-card .gold-button {
    width: 100%;
  }


  .party-strip {
    padding:
      15px
      18px;

    gap: 11px;
  }


  .party-wow-social-grid {
    grid-template-columns: 1fr;
  }

}
/* =========================================================
   LOCATION — VERSION COMPLÈTE
========================================================= */


/* =========================================================
   INTRO
========================================================= */

.location-pro-intro {
  max-width: 1120px;

  margin: auto;

  padding:
    10px
    5vw
    80px;

  display: grid;

  grid-template-columns:
    1fr
    .75fr;

  gap: 50px;

  align-items: center;
}


.location-pro-intro h2 {
  margin-top: 8px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.6rem
    );
}


.location-pro-intro p:not(.gold-label) {
  max-width: 650px;

  margin-top: 13px;

  font-size: .9rem;
}


.location-pro-badges {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 10px;
}


.location-pro-badges span {
  min-height: 58px;

  padding:
    0
    12px;

  border-radius: 16px;

  border:
    1px solid
    rgba(216,172,48,.55);

  background: #111;

  display: flex;

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

  color: #fff;

  font-size: .72rem;

  font-weight: 900;
}



/* =========================================================
   CALCULATEUR
========================================================= */

.location-calculator {
  max-width: 1120px;

  margin: auto;

  display: grid;

  grid-template-columns:
    1fr
    .75fr;

  border-radius: 27px;

  overflow: hidden;

  border:
    1.5px solid
    var(--gold);

  box-shadow: var(--gold-glow);
}


.location-calculator-form {
  padding: 36px;

  background:
    linear-gradient(
      145deg,
      #151515,
      #080808
    );
}


.location-calculator-form h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.7rem,
      3vw,
      2.4rem
    );
}


.location-field {
  margin-top: 23px;
}


.location-field label {
  display: block;

  margin-bottom: 8px;

  color: #e8e1d7;

  font-size: .76rem;

  font-weight: 900;
}


.location-field select,
.location-field input {
  width: 100%;
  height: 52px;

  padding:
    0
    14px;

  border-radius: 13px;

  border:
    1px solid
    rgba(216,172,48,.55);

  background: #090909;

  color: #fff;

  font-family: inherit;

  font-size: .9rem;

  outline: none;
}


.location-field select:focus,
.location-field input:focus {
  border-color: var(--gold);

  box-shadow:
    0 0 8px
    rgba(216,172,48,.18);
}


.location-fields-row {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 14px;
}


.location-field-note {
  margin-top: 13px;

  font-size: .75rem;

  color: #918b82;
}



/* =========================================================
   RÉSULTAT CALCULATEUR
========================================================= */

.location-calculator-result {
  padding: 36px;

  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #eadfcd
    );

  color: #111;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.location-calculator-result .gold-label {
  color: var(--gold-dark);
}


.location-price {
  margin-top: 15px;

  display: flex;

  flex-direction: column;
}


.location-price strong {
  color: #111;

  font-size:
    clamp(
      2.8rem,
      5vw,
      4.3rem
    );

  line-height: 1;

  font-weight: 950;
}


.location-price > span {
  margin-top: 5px;

  color: #645e56;

  font-size: .85rem;
}


.location-price-rule {
  margin-top: 27px;

  display: flex;

  flex-direction: column;

  gap: 10px;
}


.location-price-rule div {
  padding:
    12px
    0;

  border-bottom:
    1px solid
    rgba(148,112,38,.25);

  display: flex;

  justify-content: space-between;

  gap: 20px;
}


.location-price-rule span {
  color: #726b61;

  font-size: .69rem;

  font-weight: 900;
}


.location-price-rule strong {
  color: #111;

  font-size: .8rem;
}


.location-price-info {
  margin-top: 20px;

  color: #70685e;

  font-size: .76rem;
}



/* =========================================================
   INTRO RÉSERVATION
========================================================= */

.location-booking-intro {
  max-width: 750px;

  margin:
    0
    auto
    30px;

  text-align: center;
}


.location-booking-intro h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}


.location-booking-intro p:not(.gold-label) {
  max-width: 620px;

  margin:
    11px
    auto
    0;

  font-size: .9rem;
}



/* =========================================================
   HORAIRES
========================================================= */

.location-hours-grid {
  max-width: 900px;

  margin:
    0
    auto
    25px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;
}


.location-hours-card {
  padding: 20px;

  border-radius: 18px;

  border:
    1px solid
    rgba(216,172,48,.50);

  background: #101010;

  text-align: center;
}


.location-hours-card > span {
  color: var(--gold);

  font-size: .68rem;

  font-weight: 900;
}


.location-hours-card strong {
  display: block;

  margin-top: 7px;

  color: #fff;

  font-size: 1.12rem;
}


.location-hours-card p {
  margin-top: 6px;

  font-size: .74rem;
}



/* =========================================================
   CADRE RÉSERVATION
========================================================= */

.location-booking-frame {
  max-width: 1120px;

  margin: auto;

  border-radius: 26px;

  border:
    1.5px solid
    var(--gold);

  background: #0c0c0c;

  overflow: hidden;

  box-shadow: var(--gold-glow);
}


.location-booking-frame-header {
  padding:
    22px
    26px;

  border-bottom:
    1px solid
    rgba(216,172,48,.30);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}


.location-booking-frame-header h3 {
  margin-top: 5px;
}


.location-live-badge {
  padding:
    8px
    12px;

  border-radius: 999px;

  border:
    1px solid
    rgba(216,172,48,.55);

  background:
    rgba(216,172,48,.05);

  color: var(--gold);

  font-size: .65rem;

  font-weight: 900;
}



/* =========================================================
   FILLOUT / ZITE INTÉGRÉ
========================================================= */

.location-fillout-embed {
  width: 100%;

  min-height: 900px;

  background: #fff;

  overflow: hidden;
}


.location-fillout-embed iframe {
  display: block;

  width: 100%;

  height: 900px;

  border: 0;

  background: #fff;
}



/* =========================================================
   VALIDATION
========================================================= */

.location-validation-card {
  max-width: 1000px;

  margin: auto;

  padding: 30px;

  border-radius: 23px;

  border:
    2px solid
    var(--gold);

  background:
    linear-gradient(
      145deg,
      #faf7ef,
      #ece2d1
    );

  color: #111;

  display: grid;

  grid-template-columns:
    60px
    1fr;

  gap: 24px;

  align-items: center;

  box-shadow: var(--gold-glow);
}


.location-validation-number {
  width: 54px;
  height: 54px;

  border-radius: 50%;

  background: #111;

  border:
    1px solid
    var(--gold);

  display: flex;

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

  color: var(--gold);

  font-size: 1.2rem;

  font-weight: 900;
}


.location-validation-card h2 {
  margin-top: 6px;

  color: #111;

  font-size:
    clamp(
      1.6rem,
      3vw,
      2.3rem
    );
}


.location-validation-card p:not(.gold-label) {
  max-width: 700px;

  margin-top: 9px;

  color: #625c54;

  font-size: .86rem;
}



/* =========================================================
   CONDITIONS / DEMANDES PARTICULIÈRES
========================================================= */

.location-conditions-card,
.location-special-card {
  max-width: 1120px;

  margin: auto;

  padding: 30px;

  border-radius: 23px;

  border:
    1.5px solid
    var(--gold);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

  box-shadow: var(--gold-glow);
}


.location-conditions-card {
  background:
    linear-gradient(
      145deg,
      #151515,
      #080808
    );
}


.location-special-card {
  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(216,172,48,.10),
      transparent 32%
    ),
    #101010;
}


.location-conditions-card h2,
.location-special-card h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.6rem,
      3vw,
      2.3rem
    );
}


.location-conditions-card p:not(.gold-label),
.location-special-card p:not(.gold-label) {
  max-width: 650px;

  margin-top: 9px;

  font-size: .86rem;
}



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

@media (max-width: 1000px) {

  .location-pro-intro,
  .location-calculator {
    grid-template-columns: 1fr;
  }


  .location-hours-grid {
    grid-template-columns: 1fr;
  }


  .location-fillout-embed,
  .location-fillout-embed iframe {
    min-height: 950px;
    height: 950px;
  }


  .location-conditions-card,
  .location-special-card {
    flex-direction: column;

    align-items: flex-start;
  }

}



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

@media (max-width: 700px) {

  .location-pro-intro {
    padding:
      0
      18px
      60px;
  }


  .location-pro-badges {
    grid-template-columns: 1fr;
  }


  .location-calculator {
    border-radius: 21px;
  }


  .location-calculator-form,
  .location-calculator-result {
    padding: 25px;
  }


  .location-fields-row {
    grid-template-columns: 1fr;
  }


  .location-price strong {
    font-size: 3rem;
  }


  .location-price-rule div {
    flex-direction: column;

    gap: 4px;
  }


  .location-booking-frame {
    border-radius: 21px;
  }


  .location-booking-frame-header {
    align-items: flex-start;

    flex-direction: column;
  }


  .location-fillout-embed,
  .location-fillout-embed iframe {
    min-height: 1050px;
    height: 1050px;
  }


  .location-validation-card {
    grid-template-columns: 1fr;

    padding: 24px;

    border-radius: 20px;
  }


  .location-conditions-card,
  .location-special-card {
    padding: 24px;

    border-radius: 20px;
  }


  .location-conditions-card a,
  .location-special-card a {
    width: 100%;
  }

}
/* ==========================================================
   LOCATION - CAL.COM
========================================================== */

.location-booking {
  padding: 100px 20px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(216, 172, 48, 0.08),
      transparent 40%
    ),
    #000;
}


.location-booking-heading {
  max-width: 760px;
  margin: 0 auto 36px;
  text-align: center;
}


.location-booking-heading h2 span {
  color: var(--gold);
}


.location-booking-notice {
  max-width: 980px;
  margin: 0 auto 28px;

  display: flex;
  align-items: center;
  gap: 16px;

  padding: 20px 22px;

  background: #151515;

  border:
    1px solid rgba(216, 172, 48, 0.35);

  border-radius: 20px;

  box-shadow:
    var(--gold-glow);
}


.booking-notice-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

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

  border-radius: 50%;

  background: var(--gold);
  color: #000;

  font-size: 20px;
  font-weight: 900;
}


.location-booking-notice strong {
  display: block;

  color: #fff;

  font-size: 15px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.location-booking-notice p {
  margin: 5px 0 0;

  color: var(--gray);

  font-size: 14px;
  line-height: 1.6;
}


.location-cal-wrapper {
  max-width: 1180px;
  margin: 0 auto;

  padding: 10px;

  overflow: hidden;

  background: var(--cream);

  border:
    1px solid rgba(216, 172, 48, 0.55);

  border-radius: 28px;

  box-shadow:
    0 0 0 1px rgba(216, 172, 48, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.45),
    var(--gold-glow);
}


.location-cal-embed {
  width: 100%;
  min-height: 760px;

  overflow: auto;

  border-radius: 20px;
}


.location-booking-help {
  max-width: 760px;

  margin: 28px auto 0;

  text-align: center;
}


.location-booking-help p {
  margin: 0 0 14px;

  color: var(--gray);

  font-size: 14px;
}


/* ==========================================================
   RESPONSIVE LOCATION CAL.COM
========================================================== */

@media (max-width: 900px) {

  .location-booking {
    padding: 72px 16px;
  }


  .location-cal-wrapper {
    padding: 6px;

    border-radius: 22px;
  }


  .location-cal-embed {
    min-height: 820px;

    border-radius: 17px;
  }

}


@media (max-width: 600px) {

  .location-booking {
    padding: 58px 12px;
  }


  .location-booking-notice {
    align-items: flex-start;

    padding: 17px;

    border-radius: 17px;
  }


  .booking-notice-icon {
    width: 36px;
    height: 36px;

    flex-basis: 36px;

    font-size: 17px;
  }


  .location-booking-notice strong {
    font-size: 13px;
  }


  .location-booking-notice p {
    font-size: 13px;
  }


  .location-cal-wrapper {
    width: 100%;

    padding: 4px;

    border-radius: 18px;
  }


  .location-cal-embed {
    min-height: 900px;

    border-radius: 14px;
  }

}
/* =========================================================
   LOCATION — CAL.COM NOIR + DURÉE PLUS VISIBLE
========================================================= */

.location-duration-alert {
  max-width: 1120px;

  margin:
    0
    auto
    18px;

  padding:
    20px
    24px;

  display: grid;

  grid-template-columns:
    52px
    1fr;

  gap: 18px;

  align-items: center;

  border:
    1.5px solid
    var(--gold);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      #171717,
      #080808
    );

  box-shadow: var(--gold-glow);
}


.location-duration-alert-number {
  width: 46px;
  height: 46px;

  border-radius: 50%;

  display: flex;

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

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  color: #000;

  font-size: 1.1rem;

  font-weight: 950;
}


.location-duration-alert strong {
  display: block;

  color: var(--gold);

  font-size: .88rem;

  font-weight: 950;

  letter-spacing: .04em;
}


.location-duration-alert p {
  margin-top: 5px;

  color: #d8d2c8;

  font-size: .84rem;
}


.location-booking-frame-clean {
  border: 0 !important;

  border-radius: 0 !important;

  background: #000 !important;

  box-shadow: none !important;

  overflow: hidden;
}


.location-cal-clean {
  width: 100%;

  min-height: 760px;

  background: #000;

  overflow: auto;
}


@media (max-width: 700px) {

  .location-duration-alert {
    grid-template-columns:
      42px
      1fr;

    padding: 17px;

    border-radius: 17px;
  }


  .location-duration-alert-number {
    width: 38px;
    height: 38px;
  }


  .location-duration-alert strong {
    font-size: .76rem;
  }


  .location-duration-alert p {
    font-size: .76rem;
  }


  .location-cal-clean {
    min-height: 900px;
  }

}
/* =========================================================
   LOCATION — ESPACEMENTS PLUS COMPACTS
========================================================= */

#calculateur.section,
#reservation.section {
  padding-top: 42px;
  padding-bottom: 42px;
}

#reservation + .section,
#reservation + .section + .section,
#reservation + .section + .section + .section {
  padding-top: 28px;
  padding-bottom: 28px;
}

.location-pro-intro {
  padding-bottom: 45px;
}

.location-booking-intro {
  margin-bottom: 20px;
}

.location-duration-alert {
  margin-bottom: 12px;
}

.location-validation-card,
.location-conditions-card,
.location-special-card {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 700px) {

  #calculateur.section,
  #reservation.section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  #reservation + .section,
  #reservation + .section + .section,
  #reservation + .section + .section + .section {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .location-pro-intro {
    padding-bottom: 32px;
  }

}
/* =========================================================
   LOCATION — PREMIUM MODERNE / INSTAGRAMABLE
========================================================= */

.location-page-premium {
  position: relative;
  overflow: hidden;
}


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

.location-premium-hero {
  position: relative;
  overflow: hidden;
}

.location-premium-hero::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  top: 15%;
  left: -180px;

  border-radius: 50%;

  background:
    rgba(216,172,48,.18);

  filter: blur(110px);

  pointer-events: none;
}

.location-premium-hero::after {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  right: -170px;
  bottom: -120px;

  border-radius: 50%;

  background:
    rgba(95,79,255,.12);

  filter: blur(115px);

  pointer-events: none;
}


.location-premium-hero
.discipline-hero-inner {
  position: relative;
  z-index: 2;
}


/* =========================================================
   LUMIÈRES
========================================================= */

.location-light {
  position: absolute;

  border-radius: 50%;

  filter: blur(80px);

  pointer-events: none;
}

.location-light-one {
  width: 170px;
  height: 170px;

  top: 35%;
  right: 18%;

  background:
    rgba(255,215,115,.22);
}

.location-light-two {
  width: 120px;
  height: 120px;

  bottom: 18%;
  left: 20%;

  background:
    rgba(185,152,255,.13);
}


/* =========================================================
   PHOTO
========================================================= */

.location-photo-premium-section {
  padding-top: 15px;
  padding-bottom: 55px;
}

.location-photo-premium {
  position: relative;

  max-width: 1120px;

  margin: auto;
}

.location-photo-glow {
  position: absolute;

  width: 65%;
  height: 40%;

  left: 50%;
  bottom: -25px;

  transform:
    translateX(-50%);

  background:
    rgba(216,172,48,.15);

  filter: blur(70px);

  pointer-events: none;
}


/* =========================================================
   INTRO
========================================================= */

.location-premium-intro {
  position: relative;

  padding-bottom: 50px;
}

.location-premium-intro::before {
  content: "";

  position: absolute;

  width: 240px;
  height: 240px;

  right: -110px;
  top: 0;

  background:
    rgba(216,172,48,.09);

  border-radius: 50%;

  filter: blur(75px);

  pointer-events: none;
}


/* =========================================================
   PROJETS
========================================================= */

.location-projects-section {
  position: relative;

  padding-top: 38px;
  padding-bottom: 48px;
}

.location-projects-grid {
  max-width: 1120px;

  margin: auto;

  display: grid;

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

  gap: 14px;
}

.location-project-card {
  position: relative;

  min-height: 175px;

  padding: 22px;

  border-radius: 23px;

  border:
    1px solid
    rgba(216,172,48,.28);

  background:
    linear-gradient(
      145deg,
      rgba(25,25,25,.96),
      rgba(7,7,7,.98)
    );

  box-shadow:
    0 18px 40px
    rgba(0,0,0,.35),
    inset
    0
    1px
    0
    rgba(255,255,255,.035);

  overflow: hidden;
}

.location-project-card::before {
  content: "";

  position: absolute;

  width: 90px;
  height: 90px;

  right: -30px;
  top: -30px;

  border-radius: 50%;

  background:
    rgba(216,172,48,.12);

  filter: blur(30px);
}

.location-project-number {
  display: block;

  margin-bottom: 20px;

  color: var(--gold);

  font-size: .7rem;
  font-weight: 900;

  letter-spacing: .14em;
}

.location-project-card h3 {
  font-size: 1.12rem;
}

.location-project-card p {
  margin-top: 9px;

  font-size: .82rem;
}


/* =========================================================
   TARIFS COMPACTS
========================================================= */

.location-pricing-premium {
  position: relative;

  padding-top: 40px;
  padding-bottom: 42px;
}

.location-pricing-premium::before {
  content: "";

  position: absolute;

  width: 350px;
  height: 350px;

  left: -130px;
  top: 10%;

  border-radius: 50%;

  background:
    rgba(216,172,48,.11);

  filter: blur(100px);

  pointer-events: none;
}

.location-pricing-compact {
  position: relative;

  z-index: 1;

  max-width: 1120px;

  margin: auto;

  display: grid;

  grid-template-columns:
    1.15fr
    .65fr;

  gap: 20px;

  align-items: stretch;
}

.location-pricing-compact-info {
  padding: 27px;

  border-radius: 25px;

  border:
    1px solid
    rgba(216,172,48,.26);

  background:
    linear-gradient(
      145deg,
      #151515,
      #070707
    );

  box-shadow:
    0 18px 38px
    rgba(0,0,0,.30);
}

.location-pricing-compact-info h2 {
  margin-top: 7px;

  font-size:
    clamp(
      1.65rem,
      3vw,
      2.25rem
    );
}

.location-pricing-compact-info
> p:not(.gold-label) {
  margin-top: 10px;

  font-size: .86rem;
}

.location-rate-cards {
  margin-top: 19px;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 10px;
}

.location-rate-card {
  padding: 15px;

  border-radius: 17px;

  border:
    1px solid
    rgba(216,172,48,.20);

  background:
    rgba(255,255,255,.025);
}

.location-rate-card span {
  display: block;

  color: #aaa49b;

  font-size: .62rem;

  font-weight: 900;

  letter-spacing: .05em;
}

.location-rate-card strong {
  display: block;

  margin-top: 7px;

  color: var(--gold-light);

  font-size: .92rem;
}

.location-rate-note {
  display: block;

  margin-top: 14px;

  color: #817b73;

  font-size: .69rem;
}


/* =========================================================
   MINI CALCULATEUR
========================================================= */

.location-mini-calculator {
  padding: 22px;

  border-radius: 25px;

  border:
    1px solid
    rgba(216,172,48,.30);

  background:
    radial-gradient(
      circle at top right,
      rgba(216,172,48,.13),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #131313,
      #070707
    );

  box-shadow:
    0 18px 38px
    rgba(0,0,0,.35);

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.location-mini-calculator-title {
  display: flex;

  align-items: center;

  gap: 9px;

  color: var(--gold);

  font-size: .67rem;

  font-weight: 900;

  letter-spacing: .08em;
}

.location-glow-dot {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: var(--gold-light);

  box-shadow:
    0 0 15px
    rgba(241,207,99,.85);
}

.location-mini-fields {
  margin-top: 16px;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 10px;
}

.location-mini-fields label {
  display: block;

  margin-bottom: 6px;

  color: #cfc9bf;

  font-size: .67rem;

  font-weight: 900;
}

.location-mini-fields input {
  width: 100%;

  height: 44px;

  padding:
    0
    12px;

  border-radius: 12px;

  border:
    1px solid
    rgba(216,172,48,.32);

  background: #070707;

  color: #fff;

  outline: none;
}

.location-mini-fields input:focus {
  border-color:
    var(--gold);
}

.location-mini-result {
  margin-top: 15px;

  padding: 15px;

  border-radius: 16px;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid
    rgba(216,172,48,.16);

  text-align: center;
}

.location-mini-result span {
  display: block;

  color: #aaa49b;

  font-size: .62rem;

  font-weight: 900;

  text-transform: uppercase;
}

.location-mini-result strong {
  display: block;

  margin-top: 6px;

  color: var(--gold-light);

  font-size: 2rem;

  line-height: 1;
}

.location-mini-result small {
  display: block;

  margin-top: 6px;

  color: #c8c2b8;

  font-size: .7rem;
}

.location-mini-calculator > p {
  margin-top: 10px;

  text-align: center;

  font-size: .65rem;

  color: #7f7a72;
}


/* =========================================================
   RÉSERVATION
========================================================= */

.location-reservation-premium {
  position: relative;

  padding-top: 40px;
  padding-bottom: 38px;
}

.location-reservation-premium::before {
  content: "";

  position: absolute;

  width: 350px;
  height: 350px;

  right: -130px;
  top: 7%;

  border-radius: 50%;

  background:
    rgba(121,102,255,.08);

  filter: blur(95px);

  pointer-events: none;
}

.location-duration-alert {
  position: relative;

  max-width: 1120px;

  margin:
    0
    auto
    12px;

  padding:
    16px
    20px;

  display: grid;

  grid-template-columns:
    44px
    1fr;

  gap: 15px;

  align-items: center;

  border-radius: 18px;

  border:
    1px solid
    rgba(216,172,48,.45);

  background:
    linear-gradient(
      145deg,
      #181818,
      #080808
    );

  box-shadow:
    var(--gold-glow);
}

.location-duration-alert::after {
  content: "";

  position: absolute;

  right: 20px;
  top: 50%;

  width: 80px;
  height: 80px;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:
    rgba(216,172,48,.08);

  filter: blur(25px);

  pointer-events: none;
}

.location-duration-alert-number {
  width: 40px;
  height: 40px;

  border-radius: 50%;

  display: flex;

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

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  color: #050505;

  font-size: .95rem;

  font-weight: 950;

  box-shadow:
    0 0 20px
    rgba(216,172,48,.25);
}

.location-duration-alert strong {
  color: var(--gold-light);

  font-size: .78rem;

  font-weight: 950;

  letter-spacing: .05em;
}

.location-duration-alert p {
  margin-top: 4px;

  font-size: .76rem;

  color: #cfc9c0;
}

.location-booking-frame-clean {
  max-width: 1120px;

  margin: auto;

  border: 0 !important;

  border-radius: 22px !important;

  padding: 8px;

  background:
    linear-gradient(
      145deg,
      #111,
      #040404
    ) !important;

  box-shadow:
    0 20px 45px
    rgba(0,0,0,.40),
    0 0 26px
    rgba(216,172,48,.06) !important;

  overflow: hidden;
}

.location-cal-clean {
  width: 100%;

  min-height: 760px;

  background: #000;

  border-radius: 17px;

  overflow: auto;
}


/* =========================================================
   PETITES SECTIONS DU BAS
========================================================= */

.location-small-section {
  padding-top: 18px;
  padding-bottom: 18px;
}

.location-validation-card,
.location-conditions-card,
.location-special-card {
  position: relative;

  overflow: hidden;

  box-shadow:
    0 18px 38px
    rgba(0,0,0,.32),
    var(--gold-glow);
}

.location-validation-card::after,
.location-conditions-card::after,
.location-special-card::after {
  content: "";

  position: absolute;

  width: 140px;
  height: 140px;

  right: -50px;
  top: -50px;

  border-radius: 50%;

  background:
    rgba(216,172,48,.10);

  filter: blur(35px);

  pointer-events: none;
}


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

@media (max-width: 1000px) {

  .location-projects-grid {
    grid-template-columns:
      1fr
      1fr;
  }

  .location-pricing-compact {
    grid-template-columns:
      1fr;
  }

}


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

@media (max-width: 700px) {

  .location-photo-premium-section {
    padding-bottom: 35px;
  }

  .location-premium-intro {
    padding-bottom: 32px;
  }

  .location-projects-section,
  .location-pricing-premium,
  .location-reservation-premium {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .location-projects-grid {
    grid-template-columns:
      1fr
      1fr;

    gap: 9px;
  }

  .location-project-card {
    min-height: 145px;

    padding: 17px;

    border-radius: 18px;
  }

  .location-project-card h3 {
    font-size: .95rem;
  }

  .location-project-card p {
    font-size: .73rem;
  }

  .location-pricing-compact-info,
  .location-mini-calculator {
    padding: 20px;

    border-radius: 20px;
  }

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

  .location-mini-fields {
    grid-template-columns:
      1fr
      1fr;
  }

  .location-duration-alert {
    grid-template-columns:
      38px
      1fr;

    padding:
      14px
      15px;
  }

  .location-duration-alert-number {
    width: 34px;
    height: 34px;
  }

  .location-duration-alert strong {
    font-size: .7rem;
  }

  .location-duration-alert p {
    font-size: .7rem;
  }

  .location-booking-frame-clean {
    padding: 4px;

    border-radius: 17px !important;
  }

  .location-cal-clean {
    min-height: 900px;

    border-radius: 14px;
  }

  .location-small-section {
    padding-top: 12px;
    padding-bottom: 12px;
  }

}

/* =========================================================
   LOCATION — NÉON DORÉ PREMIUM ADOUCI
========================================================= */


/* =========================================================
   HALOS DORÉS DE FOND
========================================================= */

.location-page-premium {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.location-page-premium::before {
  content: "";

  position: absolute;
  z-index: -1;

  width: 620px;
  height: 620px;

  top: 520px;
  left: -310px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 199, 64, .16) 0%,
      rgba(216, 172, 48, .08) 32%,
      rgba(216, 172, 48, .03) 52%,
      transparent 72%
    );

  filter: blur(55px);

  pointer-events: none;
}

.location-page-premium::after {
  content: "";

  position: absolute;
  z-index: -1;

  width: 660px;
  height: 660px;

  top: 1450px;
  right: -340px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 209, 92, .14) 0%,
      rgba(216, 172, 48, .07) 34%,
      rgba(216, 172, 48, .025) 52%,
      transparent 73%
    );

  filter: blur(58px);

  pointer-events: none;
}


/* =========================================================
   CADRES PRINCIPAUX — NÉON CHIC
========================================================= */

.location-project-card,
.location-pricing-compact-info,
.location-mini-calculator,
.location-duration-alert,
.location-booking-frame-clean,
.location-validation-card,
.location-conditions-card,
.location-special-card {

  position: relative;

  border:
    1.25px solid
    rgba(216, 172, 48, .58) !important;

  box-shadow:
    0 0 3px rgba(255, 221, 130, .40),
    0 0 10px rgba(237, 181, 43, .24),
    0 0 24px rgba(216, 172, 48, .13),
    0 0 48px rgba(216, 172, 48, .055),
    0 18px 38px rgba(0, 0, 0, .48),
    inset 0 0 12px rgba(216, 172, 48, .028) !important;
}


/* =========================================================
   FIN LISERÉ LUMINEUX SUR LE HAUT
========================================================= */

.location-project-card::before,
.location-pricing-compact-info::before,
.location-mini-calculator::before,
.location-duration-alert::before,
.location-booking-frame-clean::before,
.location-validation-card::before,
.location-conditions-card::before,
.location-special-card::before {

  content: "";

  position: absolute;

  top: -1px;
  left: 14%;

  width: 72%;
  height: 1.5px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 218, 115, .28),
      rgba(255, 241, 188, .58),
      rgba(255, 207, 75, .40),
      transparent
    );

  box-shadow:
    0 0 3px rgba(255, 225, 130, .50),
    0 0 8px rgba(235, 182, 48, .28),
    0 0 16px rgba(216, 172, 48, .14);

  pointer-events: none;

  z-index: 3;
}


/* =========================================================
   HALOS AUX ANGLES
========================================================= */

.location-project-card::after,
.location-pricing-compact-info::after,
.location-mini-calculator::after,
.location-duration-alert::after,
.location-validation-card::after,
.location-conditions-card::after,
.location-special-card::after {

  content: "";

  position: absolute;

  width: 165px;
  height: 165px;

  top: -82px;
  right: -62px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 225, 145, .20) 0%,
      rgba(234, 181, 42, .11) 30%,
      rgba(216, 172, 48, .035) 52%,
      transparent 72%
    );

  filter: blur(24px);

  opacity: .72;

  pointer-events: none;
}

.location-mini-calculator::after,
.location-special-card::after {

  top: auto;
  right: auto;

  bottom: -82px;
  left: -52px;
}


/* =========================================================
   CALCULATEUR
========================================================= */

.location-pricing-compact-info {

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(216, 172, 48, .07),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #171717,
      #070707
    ) !important;
}

.location-mini-calculator {

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(255, 207, 85, .10),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #151515,
      #050505
    ) !important;
}


/* =========================================================
   TARIF LUMINEUX
========================================================= */

.location-mini-result strong {

  color: #f3cc6c !important;

  text-shadow:
    0 0 3px rgba(255, 237, 175, .40),
    0 0 8px rgba(246, 203, 98, .24),
    0 0 18px rgba(216, 172, 48, .12);
}


/* =========================================================
   POINT ESTIMATION
========================================================= */

.location-glow-dot {

  background: #f5d77f !important;

  box-shadow:
    0 0 3px rgba(255, 242, 200, .60),
    0 0 7px rgba(243, 200, 94, .40),
    0 0 14px rgba(216, 172, 48, .28) !important;
}


/* =========================================================
   BADGES
========================================================= */

.location-pro-badges span {

  border:
    1px solid
    rgba(216, 172, 48, .48) !important;

  background:
    linear-gradient(
      145deg,
      #151515,
      #090909
    ) !important;

  box-shadow:
    0 0 3px rgba(255, 220, 130, .30),
    0 0 10px rgba(216, 172, 48, .17),
    0 10px 24px rgba(0, 0, 0, .32) !important;
}


/* =========================================================
   NUMÉROS / PASTILLES
========================================================= */

.location-duration-alert-number,
.location-validation-number {

  background:
    linear-gradient(
      135deg,
      #f1cf63,
      #c89421
    ) !important;

  border:
    1px solid
    rgba(255, 238, 178, .65) !important;

  box-shadow:
    0 0 3px rgba(255, 240, 190, .50),
    0 0 10px rgba(236, 188, 67, .30),
    0 0 20px rgba(216, 172, 48, .16) !important;
}


/* =========================================================
   TEXTES DORÉS
========================================================= */

.location-page-premium .gold-label,
.location-project-number,
.location-rate-card strong,
.location-duration-alert strong {

  color: #e9bf55 !important;

  text-shadow:
    0 0 4px rgba(255, 219, 120, .24),
    0 0 10px rgba(216, 172, 48, .10);
}


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

.location-page-premium .gold-button {

  border:
    1px solid
    rgba(255, 231, 161, .62);

  box-shadow:
    0 0 3px rgba(255, 225, 145, .28),
    0 0 9px rgba(216, 172, 48, .18),
    0 0 20px rgba(216, 172, 48, .07),
    0 10px 22px rgba(0, 0, 0, .34) !important;
}

.location-page-premium .outline-button {

  border-color:
    rgba(216, 172, 48, .58);

  box-shadow:
    0 0 3px rgba(255, 219, 120, .22),
    0 0 9px rgba(216, 172, 48, .10) !important;
}


/* =========================================================
   HOVER
========================================================= */

.location-project-card,
.location-mini-calculator,
.location-pricing-compact-info,
.location-pro-badges span,
.location-validation-card,
.location-conditions-card,
.location-special-card {

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

.location-project-card:hover,
.location-mini-calculator:hover,
.location-pricing-compact-info:hover,
.location-pro-badges span:hover,
.location-validation-card:hover,
.location-conditions-card:hover,
.location-special-card:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(255, 222, 126, .72) !important;

  box-shadow:
    0 0 4px rgba(255, 235, 170, .45),
    0 0 12px rgba(238, 188, 60, .30),
    0 0 28px rgba(216, 172, 48, .16),
    0 20px 42px rgba(0, 0, 0, .46) !important;
}


/* =========================================================
   CALENDRIER
========================================================= */

.location-booking-frame-clean {

  border:
    1.25px solid
    rgba(216, 172, 48, .58) !important;

  background:
    #050505 !important;

  box-shadow:
    0 0 3px rgba(255, 222, 135, .32),
    0 0 11px rgba(216, 172, 48, .18),
    0 0 28px rgba(216, 172, 48, .08),
    0 18px 42px rgba(0, 0, 0, .48) !important;
}


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

@media (max-width: 700px) {

  .location-project-card,
  .location-pricing-compact-info,
  .location-mini-calculator,
  .location-duration-alert,
  .location-booking-frame-clean,
  .location-validation-card,
  .location-conditions-card,
  .location-special-card {

    box-shadow:
      0 0 3px rgba(255, 224, 140, .34),
      0 0 9px rgba(216, 172, 48, .18),
      0 0 20px rgba(216, 172, 48, .075),
      0 14px 30px rgba(0, 0, 0, .40) !important;
  }

}
/* =========================================================
   ACCUEIL — FINITION PREMIUM / LUMIÈRE DORÉE ÉLÉGANTE
========================================================= */


/* CADRES SOMBRES : LUMIÈRE DORÉE DISCRÈTE */

.course-card.dark,
.planning-cta,
.discover-card.dark,
.evenings-card,
.application-section,
.phone-mockup,
.image-placeholder {

  border-color:
    rgba(216, 172, 48, .72);

  box-shadow:
    0 0 3px rgba(255, 224, 140, .28),
    0 0 11px rgba(216, 172, 48, .16),
    0 0 28px rgba(216, 172, 48, .07),
    0 18px 38px rgba(0, 0, 0, .38);

}


/* PETIT ÉCLAT SUR LE BORD SUPÉRIEUR */

.course-card.dark,
.planning-cta,
.discover-card.dark,
.evenings-card,
.application-section {
  position: relative;
  overflow: hidden;
}

.course-card.dark::before,
.planning-cta::before,
.discover-card.dark::before,
.evenings-card::before,
.application-section::before {

  content: "";

  position: absolute;

  top: -1px;
  left: 18%;

  width: 64%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 222, 125, .25),
      rgba(255, 236, 178, .72),
      rgba(255, 210, 90, .32),
      transparent
    );

  box-shadow:
    0 0 7px rgba(216, 172, 48, .30);

  pointer-events: none;
}


/* CARTES CLAIRES : MOINS BLANCHES, PLUS CHAMPAGNE */

.course-card.light,
.discover-card.light,
.first-visit-card,
.location-card {

  background:
    linear-gradient(
      145deg,
      #f4efe5,
      #e9dfce
    );

}


/* PREMIÈRE VISITE PLUS ÉLÉGANTE ET MOINS MASSIVE */

.first-visit-card {

  padding:
    29px
    32px;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, .24),
    0 0 13px rgba(216, 172, 48, .08);

}


/* BOUTONS DORÉS : PETIT ÉCLAT */

.gold-button,
.header-app-button,
.large-gradient-button {

  box-shadow:
    0 0 3px rgba(255, 229, 150, .30),
    0 0 11px rgba(216, 172, 48, .18),
    0 8px 20px rgba(0, 0, 0, .28);

}


/* TRAITS DE TITRES PLUS LUMINEUX */

.section-title span {

  height: 1px;

  filter:
    drop-shadow(
      0 0 4px
      rgba(216, 172, 48, .35)
    );

}


/* PHOTO / BAR : CADRE UN PEU PLUS PREMIUM */

.hero-photo,
.image-placeholder,
.discipline-photo-placeholder {

  border-color:
    rgba(216, 172, 48, .72);

  box-shadow:
    0 0 4px rgba(255, 222, 135, .20),
    0 0 15px rgba(216, 172, 48, .10),
    0 18px 40px rgba(0, 0, 0, .30);

}


/* RÉSEAUX : MOINS DE VIDE */

.social-section {

  padding:
    45px
    20px
    55px;

}


/* CONTACT : REMONTE */

.contact-section {

  padding:
    48px
    20px
    58px;

}


/* APPLICATION : UN PEU MOINS HAUTE */

.application-section {

  padding:
    48px
    5vw;

  margin-bottom:
    65px;

}


/* PETIT EFFET AU SURVOL */

.course-card,
.discover-card,
.planning-cta,
.evenings-card,
.location-card {

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}

.course-card:hover,
.discover-card:hover,
.planning-cta:hover,
.evenings-card:hover,
.location-card:hover {

  transform:
    translateY(-3px);

}
/* =========================================================
   APPLICATION — VRAIE CAPTURE ÉCRAN
========================================================= */

.app-real-phone {
  position: relative;

  width: min(290px, 100%);

  margin: auto;

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


/* HALO DORÉ DERRIÈRE LE TÉLÉPHONE */

.app-real-phone-glow {
  position: absolute;

  width: 75%;
  height: 82%;

  border-radius: 40px;

  background:
    radial-gradient(
      circle,
      rgba(216, 172, 48, .24),
      rgba(216, 172, 48, .08) 45%,
      transparent 72%
    );

  filter: blur(35px);

  pointer-events: none;
}


/* CAPTURE DE L'APPLICATION */

.app-real-phone img {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;
  height: auto;

  border-radius: 30px;

  border:
    1.5px solid
    rgba(216, 172, 48, .62);

  box-shadow:
    0 0 3px rgba(255, 225, 145, .30),
    0 0 12px rgba(216, 172, 48, .17),
    0 0 28px rgba(216, 172, 48, .08),
    0 22px 45px rgba(0, 0, 0, .48);
}


/* PETIT EFFET AU SURVOL */

.app-real-phone {
  transition:
    transform .3s ease;
}

.app-real-phone:hover {
  transform:
    translateY(-5px)
    scale(1.015);
}


/* MOBILE */

@media (max-width: 700px) {

  .app-real-phone {
    width:
      min(
        250px,
        82vw
      );
  }

  .app-real-phone img {
    border-radius: 25px;
  }

}
/* =========================================================
   ACCUEIL — GRANDE PHOTO LA DESCARGA
========================================================= */

.hero-photo-real {
  position: relative;

  overflow: hidden;

  background: #080808;

  border:
    1.5px solid
    rgba(216, 172, 48, .68);

  box-shadow:
    0 0 3px rgba(255, 225, 145, .30),
    0 0 12px rgba(216, 172, 48, .16),
    0 0 30px rgba(216, 172, 48, .07),
    0 22px 46px rgba(0, 0, 0, .42);
}


.hero-photo-real img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform .8s ease;
}


/* léger zoom premium au survol */

.hero-photo-real:hover img {
  transform: scale(1.018);
}


/* reflet doré très discret */

.hero-photo-real::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255, 214, 110, .035),
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, .16)
    );
}


/* MOBILE */

@media (max-width: 700px) {

  .hero-photo-real {
    aspect-ratio: 1 / .82;
  }

  .hero-photo-real img {
    object-position: center;
  }

}
/* =========================================================
   ANIMATIONS — SITE PLUS VIVANT
========================================================= */

.reveal-section,
.reveal-card {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.2,.7,.2,1);
}


.reveal-section.is-visible,
.reveal-card.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* CARTES : MOUVEMENT PREMIUM AU SURVOL */

.course-card,
.discover-card,
.big-action-card,
.location-card,
.evenings-card {
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}


.course-card:hover,
.discover-card:hover,
.big-action-card:hover {
  transform:
    translateY(-6px);
}


/* PHOTOS : LÉGER MOUVEMENT */

.hero-photo-real img,
.app-real-phone img {
  transition:
    transform 1s cubic-bezier(.2,.7,.2,1);
}


.hero-photo-real:hover img {
  transform:
    scale(1.025);
}


.app-real-phone:hover img {
  transform:
    scale(1.015);
}


/* BOUTONS : REFLET DORÉ */

.gold-button,
.header-app-button,
.large-gradient-button {
  position: relative;

  overflow: hidden;
}


.gold-button::after,
.header-app-button::after,
.large-gradient-button::after {
  content: "";

  position: absolute;

  top: -20%;
  left: -80%;

  width: 45%;
  height: 140%;

  transform:
    rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.28),
      transparent
    );

  transition:
    left .7s ease;
}


.gold-button:hover::after,
.header-app-button:hover::after,
.large-gradient-button:hover::after {
  left: 135%;
}


/* RESPECTE LES UTILISATEURS QUI DÉSACTIVENT LES ANIMATIONS */

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

  .reveal-section,
  .reveal-card {
    opacity: 1;

    transform: none;

    transition: none;
  }

}
/* =========================================================
   FOND PREMIUM ULTRA WAOUH — LA DESCARGA
========================================================= */

body {
  position: relative;

  background:
    radial-gradient(
      circle at top,
      rgba(45, 34, 10, .35),
      #070707 32%,
      #000 100%
    );
}


/* Le fond animé reste derrière tout */

.premium-background {
  position: fixed;
  inset: 0;

  overflow: hidden;
  pointer-events: none;

  z-index: 0;
}


/* Tout le contenu du site passe au-dessus */

body > *:not(.premium-background) {
  position: relative;
  z-index: 1;
}


/* =========================================================
   VIGNETTE LUXE
========================================================= */

.luxury-vignette {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at center,
      transparent 42%,
      rgba(0,0,0,.08) 68%,
      rgba(0,0,0,.22) 100%
    );

  pointer-events: none;
}


/* =========================================================
   GROS HALOS DORÉS
========================================================= */

.gold-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);

  opacity: .22;

  animation:
    orbFloat 16s ease-in-out infinite alternate,
    orbPulse 8s ease-in-out infinite;
}

.orb-1 {
  width: 320px;
  height: 320px;

  top: 4%;
  left: -110px;

  background:
    radial-gradient(
      circle,
      rgba(255, 216, 118, .58) 0%,
      rgba(216, 172, 48, .22) 42%,
      transparent 74%
    );

  animation-delay: 0s;
}

.orb-2 {
  width: 380px;
  height: 380px;

  top: 18%;
  right: -140px;

  background:
    radial-gradient(
      circle,
      rgba(255, 228, 145, .40) 0%,
      rgba(216, 172, 48, .18) 40%,
      transparent 76%
    );

  animation-delay: 1.5s;
}

.orb-3 {
  width: 300px;
  height: 300px;

  bottom: 20%;
  left: -90px;

  background:
    radial-gradient(
      circle,
      rgba(255, 203, 97, .36) 0%,
      rgba(216, 172, 48, .14) 40%,
      transparent 76%
    );

  animation-delay: 3s;
}

.orb-4 {
  width: 270px;
  height: 270px;

  bottom: 8%;
  right: -90px;

  background:
    radial-gradient(
      circle,
      rgba(255, 222, 132, .30) 0%,
      rgba(216, 172, 48, .12) 40%,
      transparent 76%
    );

  animation-delay: .8s;
}


/* =========================================================
   TRAITS DE LUMIÈRE DORÉS
========================================================= */

.gold-line {
  position: absolute;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 225, 145, .1),
      rgba(255, 236, 190, .7),
      rgba(255, 214, 110, .25),
      transparent
    );

  box-shadow:
    0 0 10px rgba(216, 172, 48, .22),
    0 0 24px rgba(216, 172, 48, .10);

  opacity: .55;

  transform: rotate(-14deg);

  animation:
    lineShimmer 10s ease-in-out infinite;
}

.line-1 {
  width: 460px;
  top: 12%;
  left: -120px;
  animation-delay: 0s;
}

.line-2 {
  width: 520px;
  top: 52%;
  right: -180px;
  animation-delay: 2s;
}

.line-3 {
  width: 400px;
  bottom: 16%;
  left: 20%;
  animation-delay: 4s;
}


/* =========================================================
   ÉTOILES / SPARKS PRINCIPALES
========================================================= */

.gold-spark {
  position: absolute;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,1) 0%,
      rgba(255, 234, 177, .95) 28%,
      rgba(255, 217, 115, .95) 54%,
      rgba(216, 172, 48, .45) 75%,
      transparent 100%
    );

  box-shadow:
    0 0 8px rgba(255, 243, 210, .85),
    0 0 18px rgba(216, 172, 48, .62),
    0 0 34px rgba(216, 172, 48, .22);

  opacity: .75;

  animation:
    sparkleTwinkle 4.8s ease-in-out infinite,
    sparkleDrift 13s linear infinite;
}

.spark-1 { top: 12%; left: 16%; animation-delay: .2s; }
.spark-2 { top: 20%; right: 18%; animation-delay: 1s; }
.spark-3 { top: 37%; left: 8%; animation-delay: 1.8s; }
.spark-4 { top: 50%; right: 14%; animation-delay: 2.6s; }
.spark-5 { top: 66%; left: 20%; animation-delay: .8s; }
.spark-6 { bottom: 23%; right: 11%; animation-delay: 3.2s; }
.spark-7 { bottom: 12%; left: 28%; animation-delay: 2s; }
.spark-8 { bottom: 9%; right: 24%; animation-delay: 1.4s; }


/* =========================================================
   PAILLETTES PLUS PETITES
========================================================= */

.gold-glitter {
  position: absolute;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background:
    rgba(255, 226, 145, .95);

  box-shadow:
    0 0 7px rgba(255, 226, 145, .55),
    0 0 14px rgba(216, 172, 48, .24);

  opacity: .45;

  animation:
    glitterFlicker 3.8s ease-in-out infinite,
    glitterMove 18s linear infinite;
}

.glitter-1 { top: 26%; left: 27%; animation-delay: .5s; }
.glitter-2 { top: 58%; right: 30%; animation-delay: 1.7s; }
.glitter-3 { bottom: 28%; left: 12%; animation-delay: 2.3s; }
.glitter-4 { bottom: 18%; right: 18%; animation-delay: .9s; }


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes orbFloat {
  0% {
    transform: translateY(0) translateX(0) scale(1);
  }
  50% {
    transform: translateY(-18px) translateX(10px) scale(1.03);
  }
  100% {
    transform: translateY(14px) translateX(-10px) scale(.98);
  }
}

@keyframes orbPulse {
  0% {
    opacity: .13;
  }
  50% {
    opacity: .28;
  }
  100% {
    opacity: .16;
  }
}

@keyframes lineShimmer {
  0% {
    opacity: .16;
    transform: rotate(-14deg) translateX(0);
  }
  50% {
    opacity: .58;
    transform: rotate(-14deg) translateX(10px);
  }
  100% {
    opacity: .20;
    transform: rotate(-14deg) translateX(-10px);
  }
}

@keyframes sparkleTwinkle {
  0% {
    opacity: .22;
    transform: scale(.75);
  }
  50% {
    opacity: .95;
    transform: scale(1.35);
  }
  100% {
    opacity: .30;
    transform: scale(.85);
  }
}

@keyframes sparkleDrift {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-14px) translateX(8px);
  }
  100% {
    transform: translateY(-28px) translateX(-6px);
  }
}

@keyframes glitterFlicker {
  0% {
    opacity: .14;
  }
  50% {
    opacity: .66;
  }
  100% {
    opacity: .20;
  }
}

@keyframes glitterMove {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-8px) translateX(6px);
  }
  100% {
    transform: translateY(-14px) translateX(-4px);
  }
}


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

@media (max-width: 700px) {

  .gold-orb {
    filter: blur(60px);
    opacity: .15;
  }

  .orb-1,
  .orb-2,
  .orb-3,
  .orb-4 {
    width: 180px;
    height: 180px;
  }

  .gold-line {
    opacity: .28;
  }

  .line-1,
  .line-2,
  .line-3 {
    width: 220px;
  }

  .gold-spark {
    width: 4px;
    height: 4px;
    opacity: .45;
  }

  .gold-glitter {
    opacity: .28;
  }

}
/* =========================================================
   ACCUEIL — HERO PLUS PREMIUM + LOGO PLUS PETIT
========================================================= */


/* HERO : LAISSER APPARAÎTRE LES LUMIÈRES */

.home-hero {
  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(216, 172, 48, .11),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #020202,
      #000
    ) !important;
}


/* =========================================================
   GROSSE LUMIÈRE DERRIÈRE LE LOGO
========================================================= */

.home-hero::before {
  content: "";

  position: absolute;

  width: 520px;
  height: 320px;

  top: 55px;
  left: 50%;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(255, 221, 125, .24) 0%,
      rgba(216, 172, 48, .12) 35%,
      rgba(216, 172, 48, .035) 58%,
      transparent 76%
    );

  filter: blur(45px);

  pointer-events: none;

  z-index: 0;

  animation:
    heroGoldBreath
    7s
    ease-in-out
    infinite;
}


/* =========================================================
   LUMIÈRE AUTOUR DE LA GRANDE PHOTO
========================================================= */

.home-hero::after {
  content: "";

  position: absolute;

  width: 900px;
  height: 480px;

  top: 310px;
  left: 50%;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(216, 172, 48, .15) 0%,
      rgba(216, 172, 48, .065) 42%,
      transparent 72%
    );

  filter: blur(65px);

  pointer-events: none;

  z-index: 0;
}


/* LE CONTENU RESTE DEVANT */

.hero-inner {
  position: relative;
  z-index: 2;
}


/* =========================================================
   PHOTO PLUS WAOUH
========================================================= */

.hero-photo-real {
  position: relative;

  border-color:
    rgba(230, 184, 62, .72) !important;

  box-shadow:
    0 0 4px rgba(255, 225, 145, .34),
    0 0 14px rgba(216, 172, 48, .20),
    0 0 38px rgba(216, 172, 48, .09),
    0 24px 55px rgba(0, 0, 0, .48) !important;
}


/* PETITE LIGNE DE LUMIÈRE SUR LA PHOTO */

.hero-photo-real::before {
  content: "";

  position: absolute;

  z-index: 5;

  top: -1px;
  left: 15%;

  width: 70%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 222, 125, .30),
      rgba(255, 242, 196, .72),
      rgba(255, 211, 88, .34),
      transparent
    );

  box-shadow:
    0 0 8px
    rgba(216, 172, 48, .35);

  pointer-events: none;
}


/* =========================================================
   PETITES LUMIÈRES AUTOUR DU HAUT
========================================================= */

.hero-inner::before,
.hero-inner::after {
  content: "";

  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    #f7d67c;

  box-shadow:
    0 0 6px
    rgba(255, 239, 190, .75),
    0 0 16px
    rgba(216, 172, 48, .55);

  pointer-events: none;

  animation:
    heroSpark
    4.5s
    ease-in-out
    infinite;
}


.hero-inner::before {
  top: 85px;
  left: 13%;
}


.hero-inner::after {
  top: 180px;
  right: 11%;

  animation-delay:
    1.7s;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes heroGoldBreath {

  0%,
  100% {
    opacity: .55;
    transform:
      translateX(-50%)
      scale(.96);
  }

  50% {
    opacity: .95;
    transform:
      translateX(-50%)
      scale(1.05);
  }

}


@keyframes heroSpark {

  0%,
  100% {
    opacity: .2;
    transform: scale(.7);
  }

  50% {
    opacity: .95;
    transform: scale(1.35);
  }

}


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

@media (max-width: 700px) {

  .hero-logo {
    width:
      min(
        235px,
        62vw
      ) !important;
  }


  .home-hero::before {
    width: 330px;
    height: 230px;

    top: 45px;

    filter: blur(38px);
  }


  .home-hero::after {
    width: 480px;
    height: 340px;

    top: 260px;

    filter: blur(48px);
  }

}
/* =========================================================
   ACCUEIL — HERO FINAL
   Réglage unique du logo et de "BAR DANSANT • ROUEN"
========================================================= */

.home-hero {
  padding-top: 20px !important;
  padding-bottom: 30px !important;
  min-height: auto !important;
  display: block !important;
  position: relative;
}

.hero-inner {
  width: min(1200px, 92%);
  margin: 0 auto !important;
  padding: 0 !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;

  position: relative;
  z-index: 2;
}

.hero-logo {
  display: block;
  width: min(220px, 42vw) !important;
  height: auto;

  margin: 0 auto 0 !important;

  background: transparent !important;
  box-shadow: none !important;
  border: none !important;

  filter:
    drop-shadow(
      0 0 12px
      rgba(216, 172, 48, .22)
    );
}

.hero-location {
  margin-top: -33px !important;
  margin-bottom: 18px !important;

  color: var(--gold);

  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .18em;

  text-align: center;
}

.hero-photo-real,
.hero-photo,
.hero-image {
  margin-top: 0 !important;
  border-radius: 26px;
  overflow: hidden;
}

.home-hero::before {
  top: 20px !important;
}

@media (max-width: 768px) {

  .home-hero {
    padding-top: 14px !important;
    padding-bottom: 22px !important;
  }

  .hero-logo {
    width: min(170px, 52vw) !important;
  }

  .hero-inner {
    gap: 10px;
  }

  .hero-location {
    margin-bottom: 16px !important;
    font-size: .61rem;
  }

}

/* =========================================================
   PAGE FAQ — LA DESCARGA
========================================================= */

.faq-page {
  position: relative;
  overflow: hidden;
}


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

.faq-hero {
  position: relative;

  min-height: 430px;

  padding:
    110px
    20px
    70px;

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

  text-align: center;

  overflow: hidden;
}


.faq-hero-glow {
  position: absolute;

  width: 650px;
  height: 320px;

  top: 30px;
  left: 50%;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(216, 172, 48, .20),
      rgba(216, 172, 48, .07) 42%,
      transparent 72%
    );

  filter: blur(45px);

  pointer-events: none;

  animation:
    faqGlow
    7s
    ease-in-out
    infinite;
}


.faq-eyebrow {
  position: relative;
  z-index: 2;

  margin:
    0
    0
    15px;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 4px;

  color:
    var(--gold-light);
}


.faq-hero h1 {
  position: relative;
  z-index: 2;

  margin: 0;

  font-size:
    clamp(
      42px,
      7vw,
      88px
    );

  line-height: .95;

  font-weight: 900;

  letter-spacing: -3px;

  color:
    var(--white);
}


.faq-hero h1 span {
  display: block;

  color:
    var(--gold);

  text-shadow:
    0 0 25px
    rgba(216, 172, 48, .18);
}


.faq-intro {
  position: relative;
  z-index: 2;

  width:
    min(
      700px,
      100%
    );

  margin:
    28px
    auto
    0;

  font-size: 17px;
  line-height: 1.75;

  color:
    #c9c3b9;
}


.faq-scroll-indicator {
  position: relative;
  z-index: 2;

  margin-top: 34px;

  color:
    var(--gold);

  font-size: 22px;

  animation:
    faqArrow
    1.7s
    ease-in-out
    infinite;
}


/* =========================================================
   FAQ LISTE
========================================================= */

.faq-section {
  position: relative;

  padding:
    30px
    5vw
    100px;
}


.faq-container {
  width:
    min(
      920px,
      100%
    );

  margin:
    0
    auto;
}


/* =========================================================
   QUESTION
========================================================= */

.faq-item {
  position: relative;

  margin-bottom: 15px;

  overflow: hidden;

  border:
    1px
    solid
    rgba(216, 172, 48, .34);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(20,20,20,.94),
      rgba(7,7,7,.96)
    );

  box-shadow:
    0 15px 38px
    rgba(0,0,0,.30);

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


.faq-item:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(216,172,48,.68);

  box-shadow:
    0 0 18px
    rgba(216,172,48,.08),
    0 18px 40px
    rgba(0,0,0,.38);
}


.faq-item[open] {
  border-color:
    rgba(216,172,48,.78);

  box-shadow:
    0 0 22px
    rgba(216,172,48,.11),
    0 20px 45px
    rgba(0,0,0,.42);
}


/* =========================================================
   SUMMARY
========================================================= */

.faq-item summary {
  position: relative;

  min-height: 88px;

  padding:
    20px
    70px
    20px
    24px;

  display: grid;

  grid-template-columns:
    45px
    1fr;

  align-items: center;

  gap: 14px;

  cursor: pointer;

  list-style: none;

  user-select: none;
}


.faq-item summary::-webkit-details-marker {
  display: none;
}


.faq-number {
  font-size: 12px;

  font-weight: 900;

  letter-spacing: 1px;

  color:
    rgba(216,172,48,.70);
}


.faq-question {
  font-size:
    clamp(
      16px,
      2vw,
      20px
    );

  line-height: 1.35;

  font-weight: 800;

  color:
    var(--white);
}


/* =========================================================
   PLUS / MOINS
========================================================= */

.faq-plus {
  position: absolute;

  width: 32px;
  height: 32px;

  right: 24px;
  top: 50%;

  transform:
    translateY(-50%);

  border:
    1px
    solid
    rgba(216,172,48,.48);

  border-radius: 50%;

  transition:
    background .3s ease,
    transform .35s ease;
}


.faq-plus::before,
.faq-plus::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 12px;
  height: 1.5px;

  background:
    var(--gold);

  transform:
    translate(-50%,-50%);
}


.faq-plus::after {
  transform:
    translate(-50%,-50%)
    rotate(90deg);

  transition:
    transform .3s ease;
}


.faq-item[open]
.faq-plus {
  background:
    rgba(216,172,48,.10);
}


.faq-item[open]
.faq-plus::after {
  transform:
    translate(-50%,-50%)
    rotate(0deg);
}


/* =========================================================
   RÉPONSE
========================================================= */

.faq-answer {
  padding:
    0
    70px
    30px
    83px;

  animation:
    faqOpen
    .38s
    ease;
}


.faq-answer p {
  margin:
    0
    0
    18px;

  font-size: 15.5px;

  line-height: 1.8;

  color:
    #c9c3b9;
}


.faq-answer strong {
  color:
    var(--cream);
}


/* =========================================================
   PETITS LIENS
========================================================= */

.faq-mini-links {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 20px;
}


.faq-mini-links a {
  padding:
    8px
    13px;

  border:
    1px
    solid
    rgba(216,172,48,.38);

  border-radius: 999px;

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

  letter-spacing: .4px;

  color:
    var(--gold-light);

  text-decoration: none;

  transition:
    background .3s ease,
    border-color .3s ease,
    transform .3s ease;
}


.faq-mini-links a:hover {
  transform:
    translateY(-2px);

  background:
    rgba(216,172,48,.10);

  border-color:
    rgba(216,172,48,.75);
}


.faq-inline-button {
  display: inline-block;

  margin-top: 5px;

  color:
    var(--gold-light);

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 1px;

  text-decoration: none;

  transition:
    transform .3s ease,
    color .3s ease;
}


.faq-inline-button:hover {
  transform:
    translateX(4px);

  color:
    var(--white);
}


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

.faq-final {
  padding:
    0
    5vw
    100px;
}


.faq-final-card {
  position: relative;

  width:
    min(
      900px,
      100%
    );

  margin:
    0
    auto;

  padding:
    55px
    30px;

  text-align: center;

  overflow: hidden;

  border:
    1px
    solid
    rgba(216,172,48,.58);

  border-radius:
    var(--radius);

  background:
    radial-gradient(
      circle at top,
      rgba(216,172,48,.11),
      transparent 50%
    ),
    #090909;

  box-shadow:
    0 0 28px
    rgba(216,172,48,.08),
    0 24px 55px
    rgba(0,0,0,.42);
}


.faq-final-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 18%;

  width: 64%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,231,160,.85),
      transparent
    );

  box-shadow:
    0 0 12px
    rgba(216,172,48,.35);
}


.faq-final-small {
  color:
    var(--gold);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 3px;
}


.faq-final-card h2 {
  margin:
    10px
    0
    13px;

  font-size:
    clamp(
      27px,
      4vw,
      42px
    );

  color:
    var(--cream);
}


.faq-final-card p {
  width:
    min(
      590px,
      100%
    );

  margin:
    0
    auto
    27px;

  line-height: 1.7;

  color:
    #aaa49b;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes faqGlow {

  0%,
  100% {
    opacity: .6;

    transform:
      translateX(-50%)
      scale(.95);
  }

  50% {
    opacity: 1;

    transform:
      translateX(-50%)
      scale(1.06);
  }

}


@keyframes faqArrow {

  0%,
  100% {
    transform:
      translateY(0);

    opacity: .5;
  }

  50% {
    transform:
      translateY(7px);

    opacity: 1;
  }

}


@keyframes faqOpen {

  from {
    opacity: 0;

    transform:
      translateY(-8px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


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

@media (max-width: 700px) {

  .faq-hero {
    min-height: 360px;

    padding:
      85px
      18px
      50px;
  }


  .faq-hero h1 {
    letter-spacing: -1.5px;
  }


  .faq-intro {
    font-size: 15px;
  }


  .faq-section {
    padding:
      20px
      16px
      70px;
  }


  .faq-item {
    border-radius: 18px;
  }


  .faq-item summary {
    min-height: 78px;

    grid-template-columns:
      30px
      1fr;

    padding:
      17px
      55px
      17px
      17px;

    gap: 9px;
  }


  .faq-number {
    font-size: 10px;
  }


  .faq-question {
    font-size: 15px;
  }


  .faq-plus {
    width: 28px;
    height: 28px;

    right: 15px;
  }


  .faq-answer {
    padding:
      0
      18px
      23px
      56px;
  }


  .faq-answer p {
    font-size: 14px;
  }


  .faq-final {
    padding:
      0
      16px
      70px;
  }


  .faq-final-card {
    padding:
      40px
      20px;
  }

}
/* =========================================================
   LOCATION 2026 — NOUVELLE MISE EN PAGE
   INSTAGRAM + WHATSAPP
========================================================= */


/* =========================================================
   STRUCTURE GÉNÉRALE
========================================================= */

.location-page-premium {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 22%,
      rgba(216,172,48,.06),
      transparent 22%
    ),
    radial-gradient(
      circle at 90% 58%,
      rgba(216,172,48,.045),
      transparent 25%
    ),
    #000;
}


/* =========================================================
   HERO — PLUS COMPACT ET PLUS PREMIUM
========================================================= */

.location-premium-hero {
  min-height: auto !important;

  padding:
    145px
    5vw
    58px !important;

  position: relative;

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

  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 50% 35%,
      rgba(216,172,48,.11),
      transparent 46%
    ),
    #000 !important;
}


.location-premium-hero::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  top: -220px;
  left: -220px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(245,205,96,.15),
      rgba(216,172,48,.055) 42%,
      transparent 70%
    );

  filter: blur(55px);

  pointer-events: none;
}


.location-premium-hero::after {
  content: "";

  position: absolute;

  width: 480px;
  height: 480px;

  right: -220px;
  bottom: -260px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(245,205,96,.12),
      rgba(216,172,48,.04) 42%,
      transparent 70%
    );

  filter: blur(60px);

  pointer-events: none;
}


.location-premium-hero
.discipline-hero-inner {
  position: relative;
  z-index: 2;

  width: min(850px,100%);

  margin: auto;

  text-align: center;
}


.location-premium-hero h1 {
  margin-top: 8px;

  font-size:
    clamp(
      3rem,
      6.5vw,
      5.4rem
    );

  line-height: .92;

  letter-spacing: -.045em;
}


.location-premium-hero
.discipline-intro {
  max-width: 690px;

  margin:
    20px
    auto
    0;

  font-size: .98rem;
  line-height: 1.75;

  color: #d2ccc2;
}


.location-premium-hero
.discipline-buttons {
  margin-top: 28px;

  gap: 12px;
}


/* =========================================================
   PHOTO
========================================================= */

.location-photo-premium-section {
  padding:
    20px
    5vw
    45px !important;
}


.location-photo-premium {
  position: relative;

  width: min(1120px,100%);

  margin: auto;
}


.location-photo-premium
.discipline-photo-placeholder {
  position: relative;

  aspect-ratio: 16 / 7;

  max-width: none;

  overflow: hidden;

  border-radius: 28px;

  border:
    1px solid
    rgba(216,172,48,.55);

  background:
    linear-gradient(
      145deg,
      #151515,
      #050505
    );

  box-shadow:
    0 0 4px rgba(255,224,140,.25),
    0 0 18px rgba(216,172,48,.10),
    0 25px 55px rgba(0,0,0,.45);
}


.location-photo-glow {
  position: absolute;

  z-index: -1;

  width: 70%;
  height: 45%;

  left: 50%;
  bottom: -30px;

  transform:
    translateX(-50%);

  background:
    rgba(216,172,48,.14);

  filter: blur(75px);
}


/* =========================================================
   INTRO — TEXTE + INFORMATIONS
========================================================= */

.location-premium-intro {
  width: min(1120px,90%);

  margin: auto;

  padding:
    35px
    0
    52px !important;

  display: grid;

  grid-template-columns:
    1.15fr
    .85fr;

  gap: 55px;

  align-items: center;
}


.location-premium-intro-text h2 {
  margin-top: 8px;

  font-size:
    clamp(
      2rem,
      3.5vw,
      3.1rem
    );

  line-height: .98;
}


.location-premium-intro-text
p:not(.gold-label) {
  margin-top: 14px;

  max-width: 620px;

  font-size: .92rem;

  line-height: 1.7;
}


.location-pro-badges {
  display: grid;

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

  gap: 11px;
}


.location-pro-badges span {
  min-height: 64px;

  padding:
    12px;

  display: flex;

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

  text-align: center;

  border-radius: 17px;

  border:
    1px solid
    rgba(216,172,48,.38);

  background:
    linear-gradient(
      145deg,
      rgba(22,22,22,.95),
      rgba(7,7,7,.98)
    );

  color: #eee9e0;

  font-size: .68rem;

  font-weight: 900;

  letter-spacing: .04em;

  box-shadow:
    0 12px 28px
    rgba(0,0,0,.30);

  transition:
    transform .3s ease,
    border-color .3s ease;
}


.location-pro-badges span:hover {
  transform: translateY(-3px);

  border-color:
    rgba(216,172,48,.72);
}


/* =========================================================
   PROJETS
========================================================= */

.location-projects-section {
  padding:
    45px
    5vw
    55px !important;
}


.location-projects-grid {
  width: min(1120px,100%);

  margin: auto;

  display: grid;

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

  gap: 15px;
}


.location-project-card {
  min-height: 190px;

  padding: 25px;

  position: relative;

  overflow: hidden;

  border-radius: 23px;

  border:
    1px solid
    rgba(216,172,48,.40) !important;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(216,172,48,.10),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #171717,
      #070707
    ) !important;

  box-shadow:
    0 18px 40px
    rgba(0,0,0,.38) !important;
}


.location-project-number {
  margin-bottom: 24px;

  color: var(--gold);
}


.location-project-card h3 {
  font-size: 1.15rem;
}


.location-project-card p {
  margin-top: 10px;

  font-size: .82rem;

  line-height: 1.6;
}


/* =========================================================
   CALCULATEUR
========================================================= */

.location-pricing-premium {
  padding:
    50px
    5vw
    55px !important;
}


.location-pricing-compact {
  width: min(1120px,100%);

  margin: auto;

  display: grid;

  grid-template-columns:
    1.1fr
    .72fr;

  gap: 18px;

  align-items: stretch;
}


.location-pricing-compact-info,
.location-mini-calculator {
  position: relative;

  border-radius: 26px;

  border:
    1px solid
    rgba(216,172,48,.48) !important;

  background:
    radial-gradient(
      circle at 95% 0,
      rgba(216,172,48,.09),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      #151515,
      #060606
    ) !important;

  box-shadow:
    0 0 4px rgba(255,224,140,.22),
    0 0 18px rgba(216,172,48,.08),
    0 22px 45px rgba(0,0,0,.42) !important;
}


.location-pricing-compact-info {
  padding: 32px;
}


.location-mini-calculator {
  padding: 28px;
}


.location-pricing-compact-info h2 {
  margin-top: 8px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.5rem
    );
}


.location-rate-cards {
  margin-top: 25px;

  display: grid;

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

  gap: 12px;
}


.location-rate-card {
  padding: 18px;

  border-radius: 17px;

  border:
    1px solid
    rgba(216,172,48,.25);

  background:
    rgba(255,255,255,.025);
}


.location-rate-card span {
  display: block;

  color: #aaa49b;

  font-size: .67rem;

  font-weight: 800;
}


.location-rate-card strong {
  display: block;

  margin-top: 7px;

  color: var(--gold-light);

  font-size: 1.2rem;
}


.location-rate-note {
  display: block;

  margin-top: 13px;

  color: #827c74;

  font-size: .7rem;
}


/* =========================================================
   NOUVELLE SECTION DEMANDE
========================================================= */

.location-reservation-premium {
  position: relative;

  padding:
    62px
    5vw
    60px !important;

  background:
    radial-gradient(
      circle at 85% 35%,
      rgba(216,172,48,.075),
      transparent 25%
    ) !important;
}


.location-reservation-premium::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  right: -210px;
  top: 80px;

  border-radius: 50%;

  background:
    rgba(216,172,48,.11) !important;

  filter: blur(105px);

  pointer-events: none;
}


.location-booking-intro {
  width: min(760px,100%);

  margin:
    0
    auto
    28px;

  text-align: center;
}


.location-booking-intro h2 {
  margin-top: 8px;

  font-size:
    clamp(
      2rem,
      4vw,
      3.2rem
    );
}


.location-booking-intro
p:not(.gold-label) {
  margin:
    15px
    auto
    0;

  max-width: 620px;

  line-height: 1.7;

  color: #bcb6ad;
}


/* =========================================================
   GRANDE CARTE DEMANDE
========================================================= */

.location-request-card {
  position: relative;

  width: min(1000px,100%);

  margin: auto;

  padding:
    45px;

  overflow: hidden;

  border-radius: 30px;

  border:
    1.25px solid
    rgba(216,172,48,.62);

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(216,172,48,.13),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #121212,
      #050505
    );

  box-shadow:
    0 0 4px rgba(255,228,150,.30),
    0 0 18px rgba(216,172,48,.12),
    0 28px 60px rgba(0,0,0,.48);
}


.location-request-card::before {
  content: "";

  position: absolute;

  top: -1px;
  left: 15%;

  width: 70%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,226,140,.35),
      rgba(255,241,195,.88),
      rgba(255,209,84,.40),
      transparent
    );

  box-shadow:
    0 0 10px
    rgba(216,172,48,.38);
}


/* =========================================================
   4 INFORMATIONS À DONNER
========================================================= */

.location-request-info {
  display: grid;

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

  gap: 12px;
}


.location-request-info > div {
  position: relative;

  min-height: 145px;

  padding:
    20px
    18px;

  border-radius: 19px;

  border:
    1px solid
    rgba(216,172,48,.22);

  background:
    rgba(255,255,255,.025);

  display: flex;

  flex-direction: column;

  justify-content: center;

  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease;
}


.location-request-info > div:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(216,172,48,.62);

  background:
    rgba(216,172,48,.045);
}


.location-request-info span {
  display: block;

  margin-bottom: 14px;

  color: var(--gold);

  font-size: .68rem;

  font-weight: 950;

  letter-spacing: .12em;
}


.location-request-info p {
  margin: 0;

  color: #ddd7ce;

  font-size: .82rem;

  line-height: 1.55;
}


/* =========================================================
   CHOIX CONTACT
========================================================= */

.location-contact-choice {
  width: min(650px,100%);

  margin:
    42px
    auto
    22px;

  text-align: center;
}


.location-contact-choice h3 {
  margin-top: 7px;

  font-size:
    clamp(
      1.35rem,
      2.5vw,
      2rem
    );
}


.location-contact-choice
p:not(.gold-label) {
  margin-top: 10px;

  font-size: .84rem;

  color: #989289;

  line-height: 1.65;
}


/* =========================================================
   INSTAGRAM + WHATSAPP
========================================================= */

.location-contact-buttons {
  display: grid;

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

  gap: 15px;

  width: min(760px,100%);

  margin: auto;
}


.location-instagram-button,
.location-whatsapp-button {
  min-height: 88px;

  padding:
    17px
    25px;

  border-radius: 20px;

  display: flex;

  flex-direction: column;

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

  gap: 3px;

  text-align: center;

  font-size: .78rem;

  font-weight: 950;

  letter-spacing: .025em;

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


.location-instagram-button span,
.location-whatsapp-button span {
  font-size: .60rem;

  letter-spacing: .16em;

  opacity: .72;
}


/* INSTAGRAM */

.location-instagram-button {
  color: #090909;

  border:
    1px solid
    rgba(255,239,190,.65);

  background:
    linear-gradient(
      135deg,
      #f3d46f,
      #d6a629
    );

  box-shadow:
    0 0 17px
    rgba(216,172,48,.14);
}


/* WHATSAPP — volontairement noir/or
   pour rester dans l'identité Descarga */

.location-whatsapp-button {
  color:
    var(--gold-light);

  border:
    1px solid
    rgba(216,172,48,.58);

  background:
    linear-gradient(
      145deg,
      #161616,
      #080808
    );
}


.location-instagram-button:hover,
.location-whatsapp-button:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 0 5px rgba(255,226,140,.35),
    0 0 18px rgba(216,172,48,.18),
    0 16px 32px rgba(0,0,0,.35);
}


/* =========================================================
   AVERTISSEMENT SOUS LES BOUTONS
========================================================= */

.location-request-note {
  width: min(670px,100%);

  margin:
    28px
    auto
    0;

  padding-top: 23px;

  border-top:
    1px solid
    rgba(216,172,48,.15);

  text-align: center;

  color: #817b73;

  font-size: .70rem;

  line-height: 1.65;
}


/* =========================================================
   CARTES DU BAS
========================================================= */

.location-small-section {
  padding:
    18px
    5vw !important;
}


.location-validation-card,
.location-conditions-card,
.location-special-card {
  position: relative;

  width: min(1000px,100%);

  margin: auto;

  padding:
    30px
    32px;

  border-radius: 23px;

  border:
    1px solid
    rgba(216,172,48,.46) !important;

  box-shadow:
    0 16px 36px
    rgba(0,0,0,.32) !important;
}


/* VALIDATION CLAIRE */

.location-validation-card {
  display: grid;

  grid-template-columns:
    55px
    1fr;

  gap: 23px;

  align-items: center;

  background:
    linear-gradient(
      145deg,
      #f4efe5,
      #e8ddca
    ) !important;

  color: #111;
}


.location-validation-card h2 {
  color: #111;
}


.location-validation-card
p:not(.gold-label) {
  color: #625c54;
}


/* CONDITIONS + SUR MESURE */

.location-conditions-card,
.location-special-card {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  background:
    radial-gradient(
      circle at 90% 0,
      rgba(216,172,48,.07),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #141414,
      #060606
    ) !important;
}


/* Dernier bloc */

.location-special-card {
  margin-bottom: 45px;
}


/* =========================================================
   ON DÉSACTIVE VISUELLEMENT LES ANCIENS STYLES CAL.COM
========================================================= */

.location-duration-alert,
.location-booking-frame-clean,
.location-cal-clean {
  display: none !important;
}


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

@media (max-width: 1000px) {

  .location-premium-intro,
  .location-pricing-compact {
    grid-template-columns:
      1fr;
  }


  .location-projects-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .location-request-info {
    grid-template-columns:
      repeat(2,1fr);
  }

}


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

@media (max-width: 700px) {

  .location-premium-hero {
    padding:
      110px
      18px
      45px !important;
  }


  .location-premium-hero h1 {
    font-size: 2.65rem;
  }


  .location-premium-hero
  .discipline-buttons {
    flex-direction: column;
  }


  .location-premium-hero
  .discipline-buttons a {
    width: 100%;
  }


  .location-photo-premium-section {
    padding:
      12px
      18px
      38px !important;
  }


  .location-photo-premium
  .discipline-photo-placeholder {
    aspect-ratio: 1 / .72;

    border-radius: 20px;
  }


  .location-premium-intro {
    width: auto;

    margin:
      0
      18px;

    padding-bottom:
      42px !important;

    gap: 30px;
  }


  .location-pro-badges {
    grid-template-columns:
      1fr
      1fr;
  }


  .location-projects-section {
    padding:
      35px
      18px
      42px !important;
  }


  .location-projects-grid {
    grid-template-columns:
      1fr
      1fr;

    gap: 10px;
  }


  .location-project-card {
    min-height: 160px;

    padding: 18px;
  }


  .location-project-number {
    margin-bottom: 16px;
  }


  .location-project-card h3 {
    font-size: .98rem;
  }


  .location-project-card p {
    font-size: .74rem;
  }


  .location-pricing-premium {
    padding:
      36px
      18px
      42px !important;
  }


  .location-pricing-compact {
    grid-template-columns:
      1fr;
  }


  .location-pricing-compact-info,
  .location-mini-calculator {
    padding: 23px;
  }


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


  .location-reservation-premium {
    padding:
      45px
      18px
      42px !important;
  }


  .location-request-card {
    padding:
      27px
      18px;

    border-radius: 23px;
  }


  .location-request-info {
    grid-template-columns:
      1fr
      1fr;

    gap: 9px;
  }


  .location-request-info > div {
    min-height: 125px;

    padding:
      16px
      14px;
  }


  .location-request-info p {
    font-size: .75rem;
  }


  .location-contact-choice {
    margin-top: 32px;
  }


  .location-contact-buttons {
    grid-template-columns:
      1fr;
  }


  .location-instagram-button,
  .location-whatsapp-button {
    width: 100%;
    min-height: 75px;
  }


  .location-small-section {
    padding:
      10px
      18px !important;
  }


  .location-validation-card {
    grid-template-columns:
      45px
      1fr;

    gap: 15px;

    padding: 23px 20px;
  }


  .location-conditions-card,
  .location-special-card {
    flex-direction: column;

    align-items: flex-start;

    padding: 24px 20px;
  }


  .location-conditions-card .gold-button,
  .location-special-card .gold-button {
    width: 100%;
  }


  .location-special-card {
    margin-bottom: 30px;
  }

}
/* =========================================================
   LOCATION — EFFET WAOUH HERO
========================================================= */

.location-premium-hero {
  position: relative;
  overflow: hidden;
}


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

.location-hero-logo {
  width:
    min(
      250px,
      48vw
    );

  margin:
    0
    auto
    12px;

  display: block;

  position: relative;

  z-index: 5;

  filter:
    drop-shadow(
      0 0 10px
      rgba(216,172,48,.20)
    )
    drop-shadow(
      0 0 24px
      rgba(216,172,48,.08)
    );

  animation:
    locationLogoFloat
    5s
    ease-in-out
    infinite;
}


/* =========================================================
   GROS HALO CENTRAL
========================================================= */

.location-premium-hero
.discipline-hero-inner::before {
  content: "";

  position: absolute;

  z-index: -1;

  width: 680px;
  height: 360px;

  top: -95px;
  left: 50%;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(255,224,135,.20) 0%,
      rgba(216,172,48,.09) 36%,
      rgba(216,172,48,.025) 58%,
      transparent 75%
    );

  filter: blur(48px);

  animation:
    locationHeroBreath
    7s
    ease-in-out
    infinite;

  pointer-events: none;
}


/* =========================================================
   TRAIT DORÉ AU-DESSUS DU TITRE
========================================================= */

.location-premium-hero
.discipline-hero-inner::after {
  content: "";

  position: absolute;

  width: 280px;
  height: 1px;

  top: 62px;
  left: 50%;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,218,110,.20),
      rgba(255,241,188,.85),
      rgba(255,208,76,.28),
      transparent
    );

  box-shadow:
    0 0 8px
    rgba(216,172,48,.32);

  opacity: .8;

  animation:
    locationLineGlow
    4.5s
    ease-in-out
    infinite;
}


/* =========================================================
   TITRE PLUS IMPACTANT
========================================================= */

.location-premium-hero h1 {
  text-shadow:
    0 0 12px
    rgba(255,226,145,.08),
    0 0 35px
    rgba(216,172,48,.07);
}


/* =========================================================
   PETITS SPARKS AUTOUR DU HERO
========================================================= */

.location-premium-hero
.location-light-one {
  width: 6px;
  height: 6px;

  top: 24%;
  right: 17%;

  background:
    radial-gradient(
      circle,
      #fff 0%,
      #f6da88 38%,
      #d8ac30 68%,
      transparent 100%
    );

  box-shadow:
    0 0 7px rgba(255,239,190,.8),
    0 0 17px rgba(216,172,48,.55),
    0 0 34px rgba(216,172,48,.18);

  filter: none;

  animation:
    locationSpark
    4.2s
    ease-in-out
    infinite;
}


.location-premium-hero
.location-light-two {
  width: 5px;
  height: 5px;

  bottom: 26%;
  left: 16%;

  background:
    radial-gradient(
      circle,
      #fff 0%,
      #f1cf63 45%,
      #d8ac30 70%,
      transparent 100%
    );

  box-shadow:
    0 0 7px rgba(255,239,190,.8),
    0 0 16px rgba(216,172,48,.48);

  filter: none;

  animation:
    locationSpark
    5.2s
    ease-in-out
    infinite;

  animation-delay:
    1.4s;
}


/* =========================================================
   BOUTONS HERO PLUS LUXE
========================================================= */

.location-premium-hero
.gold-button,
.location-premium-hero
.outline-button {
  position: relative;

  overflow: hidden;
}


.location-premium-hero
.gold-button::after,
.location-premium-hero
.outline-button::after {
  content: "";

  position: absolute;

  top: -40%;
  left: -60%;

  width: 45%;
  height: 180%;

  transform:
    rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.28),
      transparent
    );

  transition:
    left .7s ease;
}


.location-premium-hero
.gold-button:hover::after,
.location-premium-hero
.outline-button:hover::after {
  left: 125%;
}


/* =========================================================
   PHOTO — EFFET PREMIUM
========================================================= */

.location-photo-premium {
  position: relative;
}


.location-photo-premium::before {
  content: "";

  position: absolute;

  z-index: -1;

  width: 78%;
  height: 48%;

  left: 50%;
  bottom: -38px;

  transform:
    translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(216,172,48,.16),
      rgba(216,172,48,.06) 46%,
      transparent 72%
    );

  filter: blur(65px);

  pointer-events: none;
}


.location-photo-premium
.discipline-photo-placeholder {
  transition:
    transform .5s ease,
    box-shadow .5s ease,
    border-color .5s ease;
}


.location-photo-premium
.discipline-photo-placeholder:hover {
  transform:
    translateY(-4px)
    scale(1.006);

  border-color:
    rgba(255,221,120,.75);

  box-shadow:
    0 0 5px rgba(255,232,170,.32),
    0 0 20px rgba(216,172,48,.14),
    0 28px 58px rgba(0,0,0,.48);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes locationLogoFloat {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-4px);
  }

}


@keyframes locationHeroBreath {

  0%,
  100% {
    opacity: .55;

    transform:
      translateX(-50%)
      scale(.96);
  }

  50% {
    opacity: 1;

    transform:
      translateX(-50%)
      scale(1.05);
  }

}


@keyframes locationLineGlow {

  0%,
  100% {
    opacity: .35;
  }

  50% {
    opacity: .9;
  }

}


@keyframes locationSpark {

  0%,
  100% {
    opacity: .18;
    transform: scale(.7);
  }

  50% {
    opacity: 1;
    transform: scale(1.4);
  }

}


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

@media (max-width:700px) {

  .location-hero-logo {
    width:
      min(
        185px,
        52vw
      );

    margin-bottom:
      10px;
  }


  .location-premium-hero
  .discipline-hero-inner::before {
    width: 420px;
    height: 260px;

    top: -65px;
  }


  .location-premium-hero
  .discipline-hero-inner::after {
    width: 190px;

    top: 47px;
  }

}
/* =========================================================
   PAGES INTERNES — HERO FINAL
   Même logo que l'accueil, phrase légèrement plus basse.
   L'accueil n'est pas concerné par .site-hero-brand.
========================================================= */

.site-hero-brand {
  width: 100%;

  margin:
    0
    auto
    18px;

  padding: 0;

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

  text-align: center;

  position: relative;
  z-index: 10;
}

body main .site-hero-brand .hero-logo {
  display: block;

  width:
    min(
      220px,
      42vw
    ) !important;

  height: auto;

  margin:
    0
    auto
    0 !important;

  padding: 0;

  border: none !important;
  background: transparent !important;
  box-shadow: none !important;

  filter:
    drop-shadow(
      0 0 12px
      rgba(216, 172, 48, .22)
    );
}

body main .site-hero-brand .hero-location {
  margin-top: -12px !important;
  margin-bottom: 18px !important;

  padding: 0 !important;

  color: var(--gold) !important;

  font-size: .75rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .18em !important;

  text-transform: uppercase;
  text-align: center;
}

/* Position haute commune des héros internes */

.discipline-hero,
.bachata-simple-hero,
.salsa-hero,
.party-wow-hero,
.location-premium-hero,
.faq-hero {
  min-height: auto !important;
  padding-top: 20px !important;
}

.discipline-hero-inner,
.bachata-simple-inner,
.salsa-hero-inner,
.party-wow-hero-inner {
  width: 100%;

  margin-left: auto !important;
  margin-right: auto !important;

  text-align: center;
}

/* Location : suppression définitive de l'ancien trait sur le logo */

.location-premium-hero
.discipline-hero-inner::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 768px) {

  .discipline-hero,
  .bachata-simple-hero,
  .salsa-hero,
  .party-wow-hero,
  .location-premium-hero,
  .faq-hero {
    padding-top: 14px !important;
  }

  body main .site-hero-brand .hero-logo {
    width:
      min(
        170px,
        52vw
      ) !important;
  }

  body main .site-hero-brand .hero-location {
    margin-top: -17px !important;
    margin-bottom: 18px !important;

    padding: 0 !important;

    color: var(--gold) !important;

    font-size: .75rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .18em !important;

    text-transform: uppercase;
    text-align: center;
  }

}
/* =========================================================
   AVIS GOOGLE — VERSION PLUS VISIBLE
========================================================= */

.google-reviews-section {
  max-width: 1180px;

  margin:
    30px
    auto
    90px;

  padding:
    58px
    42px;

  border-radius: 30px;

  border:
    2px solid
    rgba(216, 172, 48, .78);

  background:
    linear-gradient(
      145deg,
      rgba(28, 28, 28, .98),
      rgba(5, 5, 5, .98)
    );

  box-shadow:
    0 0 0 1px rgba(216, 172, 48, .08),
    0 0 28px rgba(216, 172, 48, .14),
    0 22px 60px rgba(0, 0, 0, .45);

  position: relative;
  overflow: hidden;
}

.google-reviews-section::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  top: -180px;
  left: 50%;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(216, 172, 48, .16),
      transparent 66%
    );

  pointer-events: none;
}

.google-reviews-heading,
.google-reviews-grid,
.google-reviews-action {
  position: relative;
  z-index: 2;
}

.google-reviews-heading {
  max-width: 780px;

  margin:
    0
    auto
    42px;

  text-align: center;
}

.google-reviews-heading .gold-label {
  margin-bottom: 10px;

  color: var(--gold-light);

  font-size: .78rem;

  letter-spacing: .16em;
}

.google-reviews-heading h2 {
  color: #fff;

  font-size:
    clamp(
      2rem,
      3.6vw,
      3.2rem
    );

  line-height: 1.02;
}

.google-rating {
  margin-top: 24px;

  display: inline-flex;

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

  gap: 13px;

  flex-wrap: wrap;

  padding:
    12px
    18px;

  border-radius: 16px;

  border:
    1px solid
    rgba(216, 172, 48, .38);

  background:
    rgba(216, 172, 48, .06);
}

.google-rating-score {
  color: #fff;

  font-size: 1.6rem;

  font-weight: 950;
}

.google-stars {
  color: var(--gold-light);

  font-size: 1.15rem;

  letter-spacing: .1em;

  text-shadow:
    0 0 16px
    rgba(216, 172, 48, .28);
}

.google-review-count {
  color: #d7d0c6;

  font-size: .84rem;

  font-weight: 800;
}

.google-reviews-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 20px;
}

.google-review-card {
  min-height: 300px;

  padding: 28px;

  border-radius: 24px;

  border:
    1.5px solid
    rgba(216, 172, 48, .58);

  background:
    linear-gradient(
      145deg,
      #141414,
      #090909
    );

  box-shadow:
    0 12px 34px
    rgba(0, 0, 0, .32);

  display: flex;

  flex-direction: column;

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

.google-review-card:hover {
  transform: translateY(-5px);

  border-color: var(--gold);

  box-shadow:
    0 16px 40px
    rgba(0, 0, 0, .4),
    0 0 24px
    rgba(216, 172, 48, .12);
}

.google-review-card.featured {
  background:
    linear-gradient(
      145deg,
      #f9f4ea,
      #e9decc
    );

  color: #111;

  transform: translateY(-8px);
}

.google-review-card.featured:hover {
  transform: translateY(-12px);
}

.google-review-top {
  display: flex;

  align-items: center;

  gap: 14px;
}

.google-review-avatar {
  width: 50px;
  height: 50px;

  flex:
    0
    0
    50px;

  border-radius: 50%;

  display: flex;

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

  background:
    linear-gradient(
      145deg,
      #1a1a1a,
      #050505
    );

  border:
    1px solid
    var(--gold);

  color: var(--gold-light);

  font-weight: 950;
}

.google-review-card h3 {
  color: #fff;

  font-size: 1.05rem;
}

.google-review-card.featured h3 {
  color: #111;
}

.google-review-stars {
  margin-top: 3px;

  color: var(--gold);

  letter-spacing: .06em;
}

.google-review-card > p {
  margin-top: 24px;

  color: #d7d0c6;

  font-size: .95rem;

  line-height: 1.7;

  flex: 1;
}

.google-review-card.featured > p {
  color: #5e584f;
}

.google-review-source {
  margin-top: 22px;

  color: var(--gold);

  font-size: .68rem;

  font-weight: 950;

  letter-spacing: .1em;

  text-transform: uppercase;
}

.google-reviews-action {
  margin-top: 38px;

  text-align: center;
}

.google-reviews-action .gold-button {
  min-width: 280px;
}

@media (max-width: 900px) {

  .google-reviews-section {
    margin:
      20px
      18px
      70px;

    padding:
      42px
      22px;
  }

  .google-reviews-grid {
    grid-template-columns: 1fr;
  }

  .google-review-card.featured {
    transform: none;
  }

  .google-review-card.featured:hover {
    transform: translateY(-5px);
  }

}

@media (max-width: 700px) {

  .google-reviews-heading h2 {
    font-size: 2rem;
  }

  .google-rating {
    width: 100%;
  }

  .google-review-card {
    min-height: auto;
  }

  .google-reviews-action .gold-button {
    width: 100%;
    min-width: 0;
  }

}
/* =========================================================
   MAP / NOUS TROUVER
========================================================= */

.contact-map {
  width: min(860px, 100%);
  height: 360px;

  margin:
    24px
    auto
    26px;

  overflow: hidden;

  border-radius: 24px;

  border:
    1.5px solid
    rgba(
      216,
      172,
      48,
      .72
    );

  box-shadow:
    0 0 24px
    rgba(
      216,
      172,
      48,
      .12
    ),
    0 20px 50px
    rgba(
      0,
      0,
      0,
      .35
    );

  background: #0b0b0b;
}

.contact-map iframe {
  width: 100%;
  height: 100%;

  display: block;

  border: 0;
}

@media (max-width: 700px) {

  .contact-map {
    height: 300px;

    margin:
      20px
      auto
      22px;

    border-radius: 18px;
  }

}
/* =========================================================
   HERO — HIÉRARCHIE SEO
========================================================= */

/* =========================================================
   H1 SEO — DISCRET VISUELLEMENT
========================================================= */

.hero-seo-title {
  margin: 0 0 8px;

  color: #c8c1b7;

  font-size:
    clamp(
      .58rem,
      .72vw,
      .68rem
    );

  font-weight: 700;

  line-height: 1.3;

  letter-spacing: .10em;

  text-transform: uppercase;
}


.hero-slogan {
  margin-top: 14px !important;

  color: #ffffff !important;

  font-size:
    clamp(
      2.3rem,
      4.8vw,
      4.4rem
    ) !important;

  font-weight: 950;

  line-height: 1;

  letter-spacing: -.035em;
}
/* =========================================================
   LA DESCARGA
   MOBILE PREMIUM — ACCUEIL
   À LAISSER TOUT EN BAS DU STYLE.CSS
========================================================= */

@media (max-width: 700px) {


  /* =====================================================
     1 — PAGE GÉNÉRALE
  ====================================================== */

  body {
    background: #000;
    overflow-x: hidden;
  }


  .section {
    padding:
      48px
      18px;
  }


  /* =====================================================
     2 — HEADER MOBILE
  ====================================================== */

  .header {
    min-height: 62px;

    padding:
      8px
      14px;

    grid-template-columns:
      1fr
      auto;

    gap: 10px;

    background:
      rgba(
        0,
        0,
        0,
        .96
      );

    backdrop-filter:
      blur(18px);

    -webkit-backdrop-filter:
      blur(18px);

    border-bottom:
      1px solid
      rgba(
        216,
        172,
        48,
        .20
      );
  }


  .header-logo {
    height: 38px;
  }


  .desktop-nav {
    display: none;
  }


  .header-app-button {
    min-height: 36px;

    padding:
      0
      13px;

    border-radius: 11px;

    font-size: .62rem;
  }


  /* =====================================================
     3 — HERO
  ====================================================== */

  .home-hero {
    min-height: auto;

    padding:
      86px
      16px
      48px;

    background:
      radial-gradient(
        circle at 50% 15%,
        rgba(
          216,
          172,
          48,
          .09
        ),
        transparent 34%
      ),
      #000;
  }


  .hero-inner {
    width: 100%;
  }


  /* Logo plus léger */

  .hero-logo {
    width:
      min(
        245px,
        68vw
      );

    margin:
      0
      auto;
  }


  .hero-location {
    margin-top: 3px;

    margin-bottom: 20px;

    font-size: .58rem;

    letter-spacing: .16em;
  }


  /* =====================================================
     4 — PHOTO HERO
  ====================================================== */

  .hero-photo {
    width: 100%;

    aspect-ratio:
      4 / 5;

    max-height: 520px;

    border-radius: 22px;

    border:
      1px solid
      rgba(
        216,
        172,
        48,
        .35
      );

    box-shadow:
      0 15px 40px
      rgba(
        0,
        0,
        0,
        .42
      );
  }


  .hero-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }


  /* =====================================================
     5 — H1 SEO PETIT
  ====================================================== */

  .hero-seo-title {
    margin:
      26px
      auto
      8px;

    max-width: 330px;

    color: #aaa39a;

    font-size: .58rem !important;

    font-weight: 700;

    line-height: 1.45;

    letter-spacing: .09em;

    text-transform: uppercase;
  }


  /* =====================================================
     6 — SLOGAN PRINCIPAL
  ====================================================== */

  .hero-slogan {
    margin-top: 7px !important;

    padding:
      0
      5px;

    color: #fff !important;

    font-size:
      clamp(
        1.85rem,
        8vw,
        2.5rem
      ) !important;

    font-weight: 950;

    line-height: .98;

    letter-spacing: -.035em;
  }


  /* =====================================================
     7 — BOUTONS HERO
  ====================================================== */

  .hero-actions {
    width: 100%;

    margin-top: 27px;

    display: flex;

    flex-direction: column;

    gap: 11px;
  }


  .big-action-card {
    width: 100%;

    min-height: 78px;

    padding:
      16px
      19px;

    border-width: 1px;

    border-radius: 18px;

    box-shadow:
      0 8px 22px
      rgba(
        0,
        0,
        0,
        .25
      );
  }


  .big-action-card small {
    font-size: .59rem;

    letter-spacing: .05em;
  }


  .big-action-card strong {
    margin-top: 1px;

    font-size: 1.15rem;
  }


  .big-action-card > span {
    font-size: 1.65rem;
  }


  /* =====================================================
     8 — TITRES DE SECTION
  ====================================================== */

  .section-title {
    width: 100%;

    margin-bottom: 26px;

    gap: 10px;
  }


  .section-title h2 {
    font-size: 1rem;

    letter-spacing: .04em;
  }


  .section-title span {
    opacity: .65;
  }


  /* =====================================================
     9 — INTRO COURS
  ====================================================== */

  .courses-intro {
    margin-bottom: 24px;

    padding:
      0
      6px;
  }


  .courses-intro h3 {
    font-size: 1.45rem;

    line-height: 1.05;
  }


  .courses-intro p {
    margin-top: 10px;

    font-size: .82rem;

    line-height: 1.5;
  }


  /* =====================================================
     10 — COURS EN CARROUSEL HORIZONTAL
  ====================================================== */

  .courses-grid {
    width:
      calc(
        100% + 36px
      );

    max-width: none;

    margin-left: -18px;

    padding:
      4px
      18px
      15px;

    display: flex;

    gap: 12px;

    overflow-x: auto;

    scroll-snap-type:
      x mandatory;

    scrollbar-width: none;

    -webkit-overflow-scrolling:
      touch;
  }


  .courses-grid::-webkit-scrollbar {
    display: none;
  }


  .course-card {
    min-width: 185px;

    width: 185px;

    min-height: 205px;

    flex: 0 0 185px;

    padding: 19px;

    border-radius: 20px;

    scroll-snap-align: start;
  }


  .course-icon {
    width: 45px;
    height: 45px;

    margin-bottom: 13px;
  }


  .course-card h3 {
    font-size: 1.08rem;
  }


  .course-card p {
    margin-top: 7px;

    font-size: .76rem;

    line-height: 1.35;
  }


  .course-card > span {
    margin-top: 13px;
  }


  /* =====================================================
     11 — PLANNING
  ====================================================== */

  .planning-cta {
    margin-top: 26px;

    padding:
      23px
      20px;

    border-radius: 20px;

    display: block;
  }


  .planning-cta h3 {
    font-size: 1.25rem;
  }


  .planning-cta p:not(.gold-label) {
    font-size: .82rem;
  }


  .planning-cta .gold-button {
    width: 100%;

    margin-top: 18px;

    min-height: 48px;

    padding:
      0
      13px;

    font-size: .68rem;
  }


  /* =====================================================
     12 — PREMIÈRE VISITE
  ====================================================== */

  .first-visit {
    padding-top: 0;
  }


  .first-visit-card {
    padding:
      25px
      21px;

    border-width: 1px;

    border-radius: 21px;

    text-align: left;
  }


  .first-visit-card h2 {
    font-size: 1.55rem;
  }


  .first-visit-card p:not(.gold-label) {
    margin-top: 12px;

    font-size: .85rem;

    line-height: 1.55;
  }


  .large-gradient-button {
    min-height: 50px;

    margin-top: 19px;

    border-radius: 13px;

    font-size: .7rem;
  }


  /* =====================================================
     13 — DÉCOUVRIR LA DESCARGA
     CARTES PLUS FINES
  ====================================================== */

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

    gap: 11px;
  }


  .discover-card {
    min-height: 112px;

    padding:
      17px
      18px;

    grid-template-columns:
      38px
      1fr
      auto;

    gap: 13px;

    border-width: 1px;

    border-radius: 18px;
  }


  .discover-icon {
    width: 38px;
    height: 38px;

    font-size: .62rem;
  }


  .discover-content small {
    font-size: .55rem;
  }


  .discover-content h3 {
    margin-top: 3px;

    font-size: 1rem;
  }


  .discover-content p {
    margin-top: 4px;

    font-size: .72rem;

    line-height: 1.35;
  }


  .discover-arrow {
    font-size: 1.6rem;
  }


  /* =====================================================
     14 — AVIS GOOGLE
  ====================================================== */

  .google-reviews-section {
    margin:
      15px
      16px
      50px !important;

    padding:
      30px
      20px !important;

    border-radius: 22px !important;
  }


  .google-reviews-heading {
    text-align: left;
  }


  .google-reviews-heading h2 {
    font-size: 1.5rem;
  }


  .google-rating {
    margin-top: 12px;
  }


  .google-rating-score {
    font-size: 2rem;
  }


  .google-reviews-grid {
    width:
      calc(
        100% + 40px
      );

    margin-left: -20px;

    padding:
      6px
      20px
      14px;

    display: flex;

    gap: 12px;

    overflow-x: auto;

    scroll-snap-type:
      x mandatory;

    scrollbar-width: none;
  }


  .google-reviews-grid::-webkit-scrollbar {
    display: none;
  }


  .google-review-card {
    min-width: 270px;

    flex:
      0
      0
      270px;

    scroll-snap-align: start;
  }


  .google-reviews-action
  .gold-button {
    width: 100%;
  }


  /* =====================================================
     15 — BAR
  ====================================================== */

  .split-section {
    padding:
      45px
      18px;

    display: block;
  }


  /*
     Tant qu'une vraie photo du bar
     n'est pas utilisée, on évite
     un énorme bloc vide sur téléphone.
  */

  .image-placeholder {
    display: none;
  }


  .split-content {
    max-width: none;

    padding:
      25px
      22px;

    border:
      1px solid
      rgba(
        216,
        172,
        48,
        .30
      );

    border-radius: 20px;

    background:
      linear-gradient(
        145deg,
        #151515,
        #070707
      );
  }


  .split-content h2 {
    font-size: 1.65rem;
  }


  .split-content > p:not(.gold-label) {
    margin-top: 12px;

    font-size: .84rem;
  }


  /* =====================================================
     16 — SOIRÉES
  ====================================================== */

  .evenings-card {
    padding:
      24px
      21px;

    display: block;

    border-width: 1px;

    border-radius: 20px;
  }


  .evenings-card h3 {
    font-size: 1.3rem;
  }


  .evenings-card p:not(.gold-label) {
    font-size: .82rem;
  }


  .evenings-actions {
    width: 100%;

    min-width: 0;

    margin-top: 20px;
  }


  .evenings-actions a {
    width: 100%;
  }


  /* =====================================================
     17 — LOCATION
  ====================================================== */

  .location-card {
    padding:
      24px
      21px;

    display: block;

    border-width: 1px;

    border-radius: 20px;
  }


  .location-card h3 {
    font-size: 1.25rem;
  }


  .location-card p:not(.gold-label) {
    font-size: .82rem;
  }


  .location-card .gold-button {
    width: 100%;

    margin-top: 19px;
  }


  /* =====================================================
     18 — APPLICATION
  ====================================================== */

  .application-section {
    margin:
      15px
      16px
      55px;

    padding:
      30px
      22px;

    grid-template-columns:
      1fr;

    gap: 27px;

    border-width: 1px;

    border-radius: 22px;

    text-align: left;
  }


  .app-content h2 {
    font-size: 1.8rem;
  }


  .app-content > p:not(.gold-label) {
    font-size: .83rem;

    line-height: 1.5;
  }


  .store-buttons {
    display: grid;

    grid-template-columns:
      1fr
      1fr;
  }


  .store-buttons a {
    min-height: 45px;

    padding:
      0
      8px;

    font-size: .64rem;
  }


  .app-real-phone {
    max-width: 190px;

    margin:
      0
      auto;
  }


  /* =====================================================
     19 — RÉSEAUX
  ====================================================== */

  .social-section {
    padding:
      32px
      18px;
  }


  .social-section h2 {
    font-size: 1.55rem;
  }


  .social-links {
    gap: 13px;
  }


  .social-links a,
  .social-button {
    width: 52px;
    height: 52px;

    border-radius: 15px;
  }


  /* =====================================================
     20 — CONTACT + MAP
  ====================================================== */

  .contact-section {
    padding:
      32px
      16px
      45px;
  }


  .contact-logo {
    width: 135px;
  }


  .contact-address {
    font-size: .85rem;
  }


  .contact-map {
    height: 270px !important;

    margin:
      18px
      0
      20px !important;

    border-radius: 18px !important;
  }


  .contact-section .gold-button {
    width: 100%;

    margin:
      0
      0
      13px;
  }


  .contact-section .gold-text-link {
    display: block;

    margin-top: 5px;
  }


  /* =====================================================
     21 — FOOTER
  ====================================================== */

  .footer {
    padding:
      28px
      20px;

    grid-template-columns:
      1fr;

    gap: 22px;

    text-align: center;
  }


  .footer-logo {
    width: 120px;

    margin: auto;
  }


  .footer-links {
    justify-content: center;

    gap:
      10px
      15px;
  }


  .footer-links a {
    font-size: .66rem;
  }


  .footer p {
    font-size: .62rem;
  }

}
/* =========================================================
   LA DESCARGA
   HERO PHOTO — OVERLAY MODERNE
   CONSERVE LOGO + PHOTO ACTUELS
========================================================= */


/* =========================================================
   PHOTO
========================================================= */

.hero-photo-overlay-layout {
  position: relative;

  overflow: hidden;

  isolation: isolate;
}


/* On ne modifie absolument pas la photo elle-même */

.hero-photo-overlay-layout > img {
  position: relative;

  z-index: 1;
}


/* =========================================================
   FONDU PAR-DESSUS LA PHOTO
========================================================= */

.hero-photo-dark-overlay {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:

    linear-gradient(
      180deg,
      rgba(0, 0, 0, .06) 0%,
      rgba(0, 0, 0, .12) 30%,
      rgba(0, 0, 0, .48) 72%,
      rgba(0, 0, 0, .72) 100%
    ),

    radial-gradient(
      circle at 50% 68%,
      transparent 0%,
      rgba(0, 0, 0, .06) 50%,
      rgba(0, 0, 0, .30) 100%
    );
}


/* Petit reflet champagne tout en bas */

.hero-photo-overlay-layout::after {
  content: "";

  position: absolute;

  z-index: 3;

  left: 8%;

  right: 8%;

  bottom: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #8c642e,
      #d9b36b,
      #f1ddb0,
      #b5843e,
      transparent
    );

  box-shadow:
    0 0 15px
    rgba(215, 174, 101, .30);

  pointer-events: none;
}


/* =========================================================
   CONTENU SUR LA PHOTO
========================================================= */

.hero-overlay-content {
  position: absolute;

  z-index: 4;

  left: 50%;

  bottom: 8%;

  width:
    min(
      860px,
      88%
    );

  transform:
    translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}


/* =========================================================
   H1 SEO
   PETIT ET DISCRET
========================================================= */

.hero-overlay-content
.hero-seo-title {
  margin: 0 0 10px;

  max-width: 680px;

  color:
    rgba(
      255,
      255,
      255,
      .76
    );

  font-size:
    clamp(
      .58rem,
      .8vw,
      .72rem
    ) !important;

  font-weight: 700;

  line-height: 1.4;

  letter-spacing: .12em;

  text-transform: uppercase;

  text-shadow:
    0 2px 12px
    rgba(
      0,
      0,
      0,
      .90
    );
}


/* =========================================================
   SLOGAN
========================================================= */

.hero-overlay-content
.hero-slogan {
  margin: 0 !important;

  max-width: 900px;

  color: #fff !important;

  font-size:
    clamp(
      1.9rem,
      4.2vw,
      3.9rem
    ) !important;

  font-weight: 950;

  line-height: .96;

  letter-spacing: -.035em;

  text-shadow:
    0 3px 20px
    rgba(
      0,
      0,
      0,
      .92
    );
}


/* Le dernier mot reçoit une petite lumière champagne */

.hero-overlay-content
.hero-slogan {
  background:
    linear-gradient(
      100deg,
      #ffffff 0%,
      #ffffff 56%,
      #f0dfba 74%,
      #d0a25a 100%
    );

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent !important;
}


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

.hero-overlay-actions {
  margin-top: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 12px;
}


.hero-overlay-button {
  position: relative;

  min-height: 49px;

  padding:
    0
    22px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  overflow: hidden;

  border-radius: 14px;

  font-size: .70rem;

  font-weight: 900;

  letter-spacing: .025em;

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    background .28s ease;
}


.hero-overlay-button:hover {
  transform:
    translateY(-3px);
}


/* =========================================================
   BOUTON CHAMPAGNE / BRONZE
========================================================= */

.hero-overlay-button-main {
  color: #090806;

  border:
    1px solid
    rgba(
      245,
      224,
      184,
      .75
    );

  background:
    linear-gradient(
      120deg,
      #f2dfb5 0%,
      #dfbd7a 28%,
      #b9853d 63%,
      #ecd49f 100%
    );

  box-shadow:
    0 10px 30px
    rgba(
      183,
      132,
      60,
      .22
    ),
    inset
    0 1px 0
    rgba(
      255,
      255,
      255,
      .45
    );
}


.hero-overlay-button-main:hover {
  box-shadow:
    0 15px 40px
    rgba(
      183,
      132,
      60,
      .36
    ),
    0 0 20px
    rgba(
      232,
      202,
      147,
      .12
    );
}


/* =========================================================
   BOUTON TRANSPARENT
========================================================= */

.hero-overlay-button-secondary {
  color: #fff;

  border:
    1px solid
    rgba(
      229,
      197,
      137,
      .70
    );

  background:
    rgba(
      6,
      6,
      6,
      .55
    );

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-shadow:
    inset
    0 0 0
    1px
    rgba(
      255,
      255,
      255,
      .025
    );
}


.hero-overlay-button-secondary:hover {
  border-color:
    #e4c487;

  background:
    rgba(
      25,
      18,
      11,
      .70
    );

  box-shadow:
    0 10px 30px
    rgba(
      0,
      0,
      0,
      .35
    );
}


/* =========================================================
   PETIT REFLET SUR LE BOUTON PRINCIPAL
========================================================= */

.hero-overlay-button-main::before {
  content: "";

  position: absolute;

  top: -90%;

  left: -40%;

  width: 32%;

  height: 280%;

  transform:
    rotate(22deg);

  background:
    rgba(
      255,
      255,
      255,
      .28
    );

  transition:
    left
    .65s
    ease;
}


.hero-overlay-button-main:hover::before {
  left: 120%;
}


/* =========================================================
   APPLICATION — ON LA REND PLUS VIVANTE
   SANS CHANGER SA STRUCTURE
========================================================= */

.application-section {
  position: relative;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 68% 50%,
      rgba(
        225,
        185,
        108,
        .17
      ),
      transparent 24%
    ),

    radial-gradient(
      circle at 18% 85%,
      rgba(
        143,
        93,
        35,
        .13
      ),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      #0c0b0a 0%,
      #020202 60%,
      #100b06 100%
    ) !important;

  border-color:
    rgba(
      213,
      171,
      92,
      .45
    ) !important;

  box-shadow:
    0 25px 70px
    rgba(
      0,
      0,
      0,
      .38
    ),
    0 0 35px
    rgba(
      190,
      138,
      60,
      .08
    );
}


/* Courbes lumineuses derrière le téléphone */

.application-section::before {
  content: "";

  position: absolute;

  width: 620px;

  height: 620px;

  right: -150px;

  bottom: -310px;

  border-radius: 50%;

  border:
    1px solid
    rgba(
      228,
      194,
      130,
      .20
    );

  box-shadow:

    0 0 30px
    rgba(
      196,
      143,
      65,
      .12
    ),

    inset
    0 0 40px
    rgba(
      196,
      143,
      65,
      .08
    );

  pointer-events: none;
}


.application-section::after {
  content: "";

  position: absolute;

  width: 430px;

  height: 180px;

  left: 38%;

  top: 58%;

  transform:
    rotate(-18deg);

  border-top:
    1px solid
    rgba(
      239,
      210,
      154,
      .48
    );

  border-radius: 50%;

  filter:
    drop-shadow(
      0 0 8px
      rgba(
        229,
        190,
        117,
        .34
      )
    );

  pointer-events: none;
}


/* =========================================================
   TÉLÉPHONE PLUS EN RELIEF
========================================================= */

.app-real-phone {
  position: relative;

  z-index: 3;

  filter:
    drop-shadow(
      0 28px 28px
      rgba(
        0,
        0,
        0,
        .70
      )
    )
    drop-shadow(
      0 0 18px
      rgba(
        215,
        169,
        91,
        .22
      )
    );

  transform:
    perspective(900px)
    rotateY(-8deg)
    rotateZ(3deg);

  transition:
    transform
    .55s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    ),
    filter
    .4s
    ease;
}


.application-section:hover
.app-real-phone {
  transform:
    perspective(900px)
    rotateY(-3deg)
    rotateZ(1deg)
    translateY(-8px);

  filter:
    drop-shadow(
      0 35px 32px
      rgba(
        0,
        0,
        0,
        .72
      )
    )
    drop-shadow(
      0 0 27px
      rgba(
        215,
        169,
        91,
        .30
      )
    );
}


/* =========================================================
   BOUTONS GÉNÉRAUX :
   JAUNE → CHAMPAGNE / BRONZE
========================================================= */

.gold-button,
.large-gradient-button,
.header-app-button {
  background:
    linear-gradient(
      120deg,
      #f1ddb0 0%,
      #deb970 32%,
      #b6813b 66%,
      #ecd29b 100%
    ) !important;

  color: #090806 !important;

  border:
    1px solid
    rgba(
      246,
      226,
      187,
      .55
    ) !important;

  box-shadow:
    0 10px 28px
    rgba(
      169,
      117,
      48,
      .15
    ) !important;
}


/* =========================================================
   CONTOURS PLUS CHAMPAGNE
========================================================= */

.course-card,
.discover-card,
.first-visit-card,
.planning-cta,
.evenings-card,
.location-card,
.google-reviews-section {
  border-color:
    rgba(
      202,
      157,
      78,
      .42
    ) !important;
}


/* =========================================================
   LABELS :
   PLUS DE JAUNE PLAT
========================================================= */

.gold-label {
  color: #dab978 !important;
}


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

@media (max-width: 700px) {

  .hero-overlay-content {
    bottom: 7%;

    width: 91%;
  }


  .hero-overlay-content
  .hero-seo-title {
    max-width: 290px;

    margin-bottom: 7px;

    font-size: .54rem !important;

    letter-spacing: .08em;
  }


  .hero-overlay-content
  .hero-slogan {
    max-width: 330px;

    font-size:
      clamp(
        1.55rem,
        7vw,
        2.15rem
      ) !important;

    line-height: .98;
  }


  .hero-overlay-actions {
    width: 100%;

    margin-top: 16px;

    gap: 9px;
  }


  .hero-overlay-button {
    min-height: 43px;

    padding:
      0
      15px;

    font-size: .61rem;
  }


  .application-section::before {
    width: 360px;

    height: 360px;

    right: -170px;

    bottom: -160px;
  }


  .application-section::after {
    width: 260px;

    left: 28%;
  }


  .app-real-phone {
    transform:
      perspective(800px)
      rotateY(-7deg)
      rotateZ(2deg);
  }

}
/* =========================================================
   CORRECTION AFFICHAGE — ANCIEN SCRIPT.JS
========================================================= */

.reveal-section,
.reveal-card {
  opacity: 1 !important;
  transform: none !important;
}
/* =========================================================
   LA DESCARGA
   MOBILE FINAL — CORRECTIONS VISUELLES
   À COLLER TOUT EN BAS DU STYLE.CSS
========================================================= */

@media (max-width: 768px) {


  /* =====================================================
     1 — SÉCURITÉ GÉNÉRALE
  ====================================================== */

  html,
  body {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden !important;
  }


  body {
    padding-bottom: 0 !important;
  }


  main {
    width: 100%;
    overflow: hidden;
  }



  /* =====================================================
     2 — NAVIGATION MOBILE
     EN HAUT ET NON EN BAS
  ====================================================== */

   /* =====================================================
   NAVIGATION MOBILE — FIXÉE EN BAS
===================================================== */

@media (max-width: 768px) {

  .mobile-bottom-nav {
    position: fixed !important;

    top: 12px !important;
    bottom: auto !important;

    left: 50% !important;
    right: auto !important;

    transform: translateX(-50%);

    z-index: 9999;

    width: calc(100% - 24px);
    max-width: 560px;

    min-height: 50px;

    padding: 5px 6px;

    display: grid !important;
    grid-template-columns: repeat(6, 1fr);

    align-items: center;

    gap: 3px;

    border:
      1px solid
      rgba(229, 198, 140, .22);

    border-radius: 18px;

    background:
      linear-gradient(
        135deg,
        rgba(12, 12, 12, .38),
        rgba(5, 5, 5, .24)
      );

    backdrop-filter:
      blur(18px)
      saturate(125%);

    -webkit-backdrop-filter:
      blur(18px)
      saturate(125%);

    box-shadow:
      0 12px 30px
      rgba(0, 0, 0, .20),
      inset
      0 1px 0
      rgba(255,255,255,.035);
  }


  .mobile-bottom-nav a {
    min-width: 0;

    padding:
      8px
      3px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    border-radius: 12px;

    color:
      rgba(
        255,
        255,
        255,
        .78
      );

    font-size: .55rem;

    font-weight: 700;

    text-align: center;

    transition:
      background .25s ease,
      color .25s ease,
      transform .25s ease;
  }


  .mobile-bottom-nav
  .mobile-nav-icon {
    color: #d8b878;

    font-size: .88rem;
  }


  .mobile-bottom-nav a.active {
    color: #f4dfb4;

    background:
      rgba(
        218,
        177,
        105,
        .12
      );

    box-shadow:
      inset
      0 0 0
      1px
      rgba(
        229,
        198,
        140,
        .20
      );
  }


  .mobile-bottom-nav a:active {
    transform:
      scale(.96);
  }

}
  /* =====================================================
     3 — PLUS DE NAVIGATION EN DOUBLE EN BAS
  ====================================================== */

  .footer-links {
    display: none !important;
  }


  .footer {
    padding:
      28px
      20px
      32px !important;

    display: flex !important;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    text-align: center;
  }


  .footer-logo {
    width: 120px !important;

    margin: 0 auto !important;
  }



  /* =====================================================
     4 — HERO
     ON GARDE TA PHOTO ET TON LOGO
  ====================================================== */

  .hero-photo-overlay-layout {
    width:
      calc(
        100% - 24px
      ) !important;

    margin:
      0
      auto !important;

    border-radius:
      22px !important;
  }


  .hero-photo-overlay-layout
  > img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    opacity: 1 !important;

    filter: none !important;
  }


  .hero-photo-dark-overlay {
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 43%,
        rgba(0,0,0,.11) 58%,
        rgba(0,0,0,.66) 100%
      ) !important;
  }


  .hero-overlay-content {
    width: 92% !important;

    bottom: 5% !important;
  }


  .hero-overlay-content
  .hero-seo-title {
    margin-bottom:
      5px !important;

    font-size:
      .50rem !important;

    line-height:
      1.3 !important;

    letter-spacing:
      .07em !important;
  }


  .hero-overlay-content
  .hero-slogan {
    font-size:
      clamp(
        1.35rem,
        6vw,
        2rem
      ) !important;

    line-height:
      1 !important;
  }


  .hero-overlay-actions {
    width: 100%;

    margin-top:
      12px !important;

    display: grid !important;

    grid-template-columns:
      1fr
      1fr;

    gap: 8px !important;
  }


  .hero-overlay-button {
    width: 100%;

    min-height:
      39px !important;

    padding:
      0
      8px !important;

    gap: 5px !important;

    border-radius:
      12px !important;

    font-size:
      .52rem !important;
  }



  /* =====================================================
     5 — AVIS GOOGLE
     PLUS COMPACT + SWIPE
  ====================================================== */

  .google-reviews-section {
    width:
      calc(
        100% - 28px
      ) !important;

    max-width: none !important;

    margin:
      18px
      auto
      45px !important;

    padding:
      25px
      18px
      22px !important;

    overflow: hidden !important;

    border:
      1px solid
      rgba(
        207,
        163,
        82,
        .38
      ) !important;

    border-radius:
      22px !important;

    background:
      linear-gradient(
        145deg,
        rgba(21,19,16,.96),
        rgba(5,5,5,.98)
      ) !important;

    box-shadow:
      0 20px 45px
      rgba(
        0,
        0,
        0,
        .36
      ) !important;
  }


  /* Supprime le gros halo inutile */

  .google-reviews-section::before {
    width: 170px !important;
    height: 170px !important;

    top: -100px !important;

    opacity: .40;
  }


  .google-reviews-heading {
    text-align: left !important;
  }


  .google-reviews-heading
  .gold-label {
    margin-bottom:
      5px !important;

    font-size:
      .55rem !important;
  }


  .google-reviews-heading h2 {
    font-size:
      1.30rem !important;

    line-height:
      1.08 !important;
  }


  .google-rating {
    width: 100% !important;

    margin-top:
      13px !important;

    padding:
      11px
      13px !important;

    display: flex !important;

    align-items: center;

    flex-wrap: wrap;

    gap:
      7px !important;

    border:
      1px solid
      rgba(
        211,
        171,
        95,
        .30
      );

    border-radius:
      14px;

    background:
      rgba(
        255,
        255,
        255,
        .025
      );
  }


  .google-rating-score {
    font-size:
      1.65rem !important;
  }


  .google-stars {
    font-size:
      .90rem !important;
  }


  .google-review-count {
    font-size:
      .67rem !important;
  }



  /* Les avis deviennent un carrousel moderne */

  .google-reviews-grid {
    width:
      calc(
        100% + 18px
      ) !important;

    max-width: none !important;

    margin:
      18px
      -18px
      0
      0 !important;

    padding:
      0
      18px
      10px
      0 !important;

    display: flex !important;

    grid-template-columns:
      none !important;

    gap:
      11px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    scroll-snap-type:
      x mandatory;

    scrollbar-width:
      none;

    -webkit-overflow-scrolling:
      touch;
  }


  .google-reviews-grid::-webkit-scrollbar {
    display: none;
  }


  .google-review-card,
  .google-review-card.featured {
    width:
      82% !important;

    min-width:
      82% !important;

    max-width:
      82% !important;

    min-height:
      210px !important;

    flex:
      0
      0
      82% !important;

    padding:
      18px !important;

    border-radius:
      18px !important;

    scroll-snap-align:
      start;

    transform:
      none !important;
  }


  .google-review-card p {
    font-size:
      .78rem !important;

    line-height:
      1.48 !important;
  }


  .google-review-avatar {
    width:
      38px !important;

    height:
      38px !important;
  }


  .google-review-top h3 {
    font-size:
      .92rem !important;
  }


  .google-review-source {
    font-size:
      .57rem !important;
  }


  .google-reviews-action {
    margin-top:
      14px !important;
  }


  .google-reviews-action
  .gold-button {
    width: 100% !important;

    min-height:
      43px !important;

    font-size:
      .61rem !important;
  }



  /* =====================================================
     6 — APPLICATION
     SUPPRESSION DU GROS CERCLE
  ====================================================== */

  .application-section::before,
  .application-section::after {
    display:
      none !important;
  }


  .application-section {
    position: relative;

    width:
      calc(
        100% - 28px
      ) !important;

    max-width: none !important;

    margin:
      18px
      auto
      48px !important;

    padding:
      27px
      18px
      24px !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      stretch !important;

    gap:
      18px !important;

    overflow:
      hidden !important;

    border:
      1px solid
      rgba(
        218,
        180,
        108,
        .42
      ) !important;

    border-radius:
      24px !important;

    background:

      radial-gradient(
        circle at 80% 67%,
        rgba(194,136,54,.15),
        transparent 31%
      ),

      radial-gradient(
        circle at 4% 8%,
        rgba(238,211,161,.08),
        transparent 25%
      ),

      linear-gradient(
        145deg,
        #12100d,
        #050505 55%,
        #090704
      ) !important;

    box-shadow:
      0 22px 50px
      rgba(
        0,
        0,
        0,
        .42
      ) !important;
  }



  /* Ligne lumineuse fine et moderne */

  .application-section {
    background-image:

      linear-gradient(
        120deg,
        transparent 10%,
        rgba(218,177,100,.06) 42%,
        transparent 62%
      ),

      radial-gradient(
        circle at 80% 67%,
        rgba(194,136,54,.15),
        transparent 31%
      ),

      linear-gradient(
        145deg,
        #12100d,
        #050505 55%,
        #090704
      ) !important;
  }



  .app-content {
    position:
      relative;

    z-index:
      3;

    text-align:
      left !important;
  }


  .app-content
  .gold-label {
    font-size:
      .56rem !important;

    letter-spacing:
      .11em !important;
  }


  .app-content h2 {
    margin-top:
      7px !important;

    font-size:
      1.65rem !important;

    line-height:
      .98 !important;
  }


  .app-content
  > p:not(.gold-label) {
    margin-top:
      11px !important;

    max-width:
      92%;

    font-size:
      .78rem !important;

    line-height:
      1.48 !important;
  }



  /* Stores plus compacts */

  .store-buttons {
    margin-top:
      17px !important;

    display:
      grid !important;

    grid-template-columns:
      1fr
      1fr !important;

    gap:
      8px !important;
  }


  .store-buttons
  .gold-button,
  .store-buttons
  .outline-button {
    min-width:
      0 !important;

    min-height:
      42px !important;

    padding:
      0
      8px !important;

    border-radius:
      12px !important;

    font-size:
      .58rem !important;
  }



  /* =====================================================
     7 — TÉLÉPHONE EN RELIEF
  ====================================================== */

  .app-real-phone {
    position:
      relative !important;

    z-index:
      4;

    width:
      min(
        215px,
        58vw
      ) !important;

    margin:
      2px
      auto
      -10px !important;

    transform:
      perspective(900px)
      rotateY(-8deg)
      rotateZ(2.5deg) !important;

    filter:
      drop-shadow(
        0 24px 19px
        rgba(0,0,0,.70)
      )
      drop-shadow(
        0 0 10px
        rgba(209,164,87,.18)
      ) !important;
  }


  /*
     Le halo devient une petite lumière,
     plus un énorme cercle
  */

  .app-real-phone-glow {
    display:
      block !important;

    position:
      absolute !important;

    z-index:
      0;

    width:
      135% !important;

    height:
      60% !important;

    left:
      50% !important;

    top:
      50% !important;

    transform:
      translate(
        -50%,
        -40%
      ) !important;

    border-radius:
      50% !important;

    background:
      radial-gradient(
        ellipse,
        rgba(228,187,111,.25) 0%,
        rgba(179,120,46,.11) 34%,
        transparent 70%
      ) !important;

    filter:
      blur(
        23px
      ) !important;
  }


  .app-real-phone img {
    position:
      relative;

    z-index:
      2;

    width:
      100% !important;

    border:
      1px solid
      rgba(
        234,
        207,
        156,
        .50
      ) !important;

    border-radius:
      28px !important;

    box-shadow:
      inset
      0 0 0 1px
      rgba(255,255,255,.06) !important;
  }



  /* =====================================================
     8 — MAP EN FONDU
  ====================================================== */

  .contact-map {
    position:
      relative;

    width:
      calc(
        100% + 4px
      ) !important;

    height:
      285px !important;

    margin:
      14px
      -2px
      19px !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;

    background:
      transparent !important;

    overflow:
      hidden !important;

    /*
       Le cœur reste net,
       les bords disparaissent dans le fond.
    */

    -webkit-mask-image:
      radial-gradient(
        ellipse
        92%
        88%
        at
        center,
        #000 57%,
        rgba(0,0,0,.92) 69%,
        rgba(0,0,0,.48) 82%,
        transparent 100%
      );

    mask-image:
      radial-gradient(
        ellipse
        92%
        88%
        at
        center,
        #000 57%,
        rgba(0,0,0,.92) 69%,
        rgba(0,0,0,.48) 82%,
        transparent 100%
      );
  }


  .contact-map iframe {
    width:
      100% !important;

    height:
      100% !important;

    border:
      0 !important;

    filter:
      saturate(.78)
      contrast(.96)
      brightness(.91);
  }



  /* =====================================================
     9 — CONTACT PLUS COMPACT
  ====================================================== */

  .contact-section {
    padding:
      32px
      16px
      38px !important;
  }


  .contact-logo {
    width:
      130px !important;

    margin-bottom:
      12px !important;
  }


  .contact-address {
    margin:
      8px
      0
      6px !important;
  }


  .contact-section
  > .gold-button {
    width:
      calc(
        100% - 12px
      ) !important;

    min-height:
      46px !important;

    margin:
      0
      auto
      9px !important;
  }


  .contact-section
  .gold-text-link {
    margin-top:
      7px !important;

    font-size:
      .65rem !important;
  }

}



/* =========================================================
   DESKTOP
   NAVIGATION MOBILE INVISIBLE
========================================================= */

@media (min-width: 769px) {

  .mobile-bottom-nav {
    display:
      none !important;
  }

}
/* =========================================================
   MOBILE — HEADER ALLÉGÉ
========================================================= */

@media (max-width: 768px) {

  .header-brand,
  .header-app-button {
    display: none !important;
  }

  .header {
    min-height: 0 !important;
    height: 0 !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }


  /* La navigation remonte tout en haut */

  .mobile-bottom-nav {
    top: 12px !important;
  }


  /* Le contenu remonte aussi */

  .home-hero {
    padding-top: 80px !important;
  }

}
/* =========================================================
   NAV MOBILE — POSITION EN BAS
========================================================= */

@media (max-width: 768px) {

  .mobile-bottom-nav {
    top: auto !important;
    bottom: 12px !important;
  }

  body {
    padding-bottom: 78px !important;
  }

}
/* =========================================================
   PALETTE ALTERNÉE
   IVOIRE + CHAMPAGNE
========================================================= */

:root {
  --ivory-card:
    linear-gradient(
      145deg,
      #fffaf0 0%,
      #f2e7d3 100%
    );

  --champagne-card:
    linear-gradient(
      135deg,
      #f1ddb2 0%,
      #d8b16c 50%,
      #b98542 100%
    );
}


/* =========================================================
   COURS
========================================================= */

.course-card.light {
  background:
    var(--ivory-card) !important;

  color:
    #17120c !important;
}

.course-card.dark {
  background:
    var(--champagne-card) !important;

  color:
    #17120c !important;
}

.course-card.light p,
.course-card.dark p {
  color:
    rgba(
      35,
      26,
      17,
      .72
    ) !important;
}

.course-card h3 {
  color:
    #17120c !important;
}

.course-card > span {
  color:
    #805623 !important;
}


/* =========================================================
   DÉCOUVRIR LA DESCARGA
========================================================= */

.discover-card:nth-child(1),
.discover-card:nth-child(4) {
  background:
    var(--ivory-card) !important;

  color:
    #17120c !important;
}

.discover-card:nth-child(2),
.discover-card:nth-child(3) {
  background:
    var(--champagne-card) !important;

  color:
    #17120c !important;
}

.discover-card p,
.discover-card h3 {
  color:
    #17120c !important;
}

.discover-card p {
  opacity:
    .72;
}

.discover-content small {
  color:
    #825725 !important;
}

.discover-arrow {
  color:
    #6f451c !important;
}


/* =========================================================
   AVIS GOOGLE
========================================================= */

.google-review-card:nth-child(odd) {
  background:
    var(--ivory-card) !important;

  color:
    #17120c !important;
}

.google-review-card:nth-child(even) {
  background:
    var(--champagne-card) !important;

  color:
    #17120c !important;
}

.google-review-card h3,
.google-review-card p {
  color:
    #17120c !important;
}

.google-review-source {
  color:
    #7a4f20 !important;
}


/* =========================================================
   BORDURES PLUS FINES
========================================================= */

.course-card,
.discover-card,
.google-review-card {
  border:
    1px solid
    rgba(
      202,
      157,
      80,
      .38
    ) !important;

  box-shadow:
    0 12px 28px
    rgba(
      0,
      0,
      0,
      .22
    ) !important;
}


/* =========================================================
   ICÔNES
========================================================= */

.course-icon,
.discover-icon,
.google-review-avatar {
  background:
    #17110c !important;

  color:
    #e2bd79 !important;

  border:
    1px solid
    rgba(
      230,
      194,
      128,
      .62
    ) !important;
}
/* =========================================================
   APPLICATION — SUPPRESSION DU GROS CERCLE DORÉ
   DESKTOP + MOBILE
========================================================= */

.application-section::before,
.application-section::after {
  display: none !important;
}


/* =========================================================
   APPLICATION — FOND PLUS PROPRE
========================================================= */

.application-section {
  background:
    radial-gradient(
      circle at 72% 55%,
      rgba(216, 177, 105, .10),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #12100d 0%,
      #070707 52%,
      #0b0805 100%
    ) !important;

  overflow: visible !important;
}


/* =========================================================
   TÉLÉPHONE — EFFET 3D RÉALISTE
========================================================= */

.app-real-phone {
  position: relative !important;

  z-index: 5;

  transform:
    perspective(1100px)
    rotateY(-11deg)
    rotateX(2deg)
    rotateZ(2.5deg) !important;

  transform-style:
    preserve-3d;

  transition:
    transform .5s cubic-bezier(.2,.8,.2,1),
    filter .5s ease !important;

  filter:
    drop-shadow(
      0 28px 24px
      rgba(0,0,0,.62)
    )
    drop-shadow(
      8px 10px 14px
      rgba(0,0,0,.28)
    ) !important;
}


/* =========================================================
   FAUSSE ÉPAISSEUR DU TÉLÉPHONE
========================================================= */

.app-real-phone::before {
  content: "";

  position: absolute;

  z-index: 0;

  top: 7px;
  left: 9px;

  width: calc(100% - 2px);
  height: calc(100% - 2px);

  border-radius: 31px;

  background:
    linear-gradient(
      135deg,
      #d7b16c 0%,
      #72502d 26%,
      #17120d 55%,
      #b88447 100%
    );

  transform:
    translateZ(-10px);

  box-shadow:
    7px 9px 18px
    rgba(0,0,0,.45);

  pointer-events: none;
}


/* =========================================================
   CAPTURE D'ÉCRAN
========================================================= */

.app-real-phone img {
  position: relative !important;

  z-index: 2;

  display: block;

  width: 100% !important;
  height: auto;

  border-radius: 29px !important;

  border:
    1px solid
    rgba(238, 214, 165, .58) !important;

  background: #000;

  box-shadow:
    inset
    0 0 0
    1px
    rgba(255,255,255,.05),
    0 3px 8px
    rgba(0,0,0,.32) !important;
}


/* =========================================================
   REFLET VERRE
========================================================= */

.app-real-phone::after {
  content: "";

  position: absolute;

  z-index: 3;

  top: 3%;
  left: 8%;

  width: 33%;
  height: 72%;

  border-radius: 35px;

  background:
    linear-gradient(
      105deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,.045) 28%,
      transparent 62%
    );

  opacity: .55;

  transform:
    skewX(-8deg);

  pointer-events: none;
}


/* =========================================================
   PETIT HALO SOUS LE TÉLÉPHONE
   BEAUCOUP PLUS DISCRET
========================================================= */

.app-real-phone-glow {
  display: block !important;

  position: absolute !important;

  z-index: -1;

  width: 115% !important;
  height: 45% !important;

  left: 50% !important;
  top: 63% !important;

  transform:
    translate(-50%, -50%) !important;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(220,180,108,.18) 0%,
      rgba(160,104,44,.08) 38%,
      transparent 72%
    ) !important;

  filter:
    blur(24px) !important;
}


/* =========================================================
   SURVOL DESKTOP
========================================================= */

@media (min-width: 769px) {

  .application-section:hover
  .app-real-phone {
    transform:
      perspective(1100px)
      rotateY(-6deg)
      rotateX(1deg)
      rotateZ(1deg)
      translateY(-8px)
      scale(1.015) !important;
  }

}


/* =========================================================
   MOBILE — TÉLÉPHONE EN 3D
========================================================= */

@media (max-width: 768px) {

  .app-real-phone {
    width:
      min(
        220px,
        60vw
      ) !important;

    margin:
      4px
      auto
      -8px !important;

    transform:
      perspective(900px)
      rotateY(-10deg)
      rotateX(1deg)
      rotateZ(2deg) !important;

    filter:
      drop-shadow(
        0 24px 20px
        rgba(0,0,0,.68)
      )
      drop-shadow(
        7px 9px 12px
        rgba(0,0,0,.28)
      ) !important;
  }


  .app-real-phone::before {
    top: 6px;
    left: 8px;

    border-radius: 28px;
  }


  .app-real-phone img {
    border-radius:
      27px !important;
  }


  .app-real-phone::after {
    width: 30%;
    height: 68%;
  }


  .app-real-phone-glow {
    width:
      120% !important;

    height:
      42% !important;

    opacity:
      .75;
  }

}
/* =========================================================
   MOBILE — REMONTER LE HAUT DE PAGE
========================================================= */

@media (max-width: 768px) {

  .home-hero {
    padding-top: 30px !important;
  }

  .hero-inner {
    margin-top: 0 !important;
  }

  .hero-logo {
    margin-top: 0 !important;
  }

}
@media (max-width: 380px) {

  .mobile-bottom-nav a {
    font-size: .48rem !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  .mobile-bottom-nav .mobile-nav-icon {
    font-size: .78rem !important;
  }

}
/* =========================================================
   POP-UP COOKIES — VERSION FINALE
========================================================= */

.cookie-banner {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 20px !important;

    z-index: 9999999 !important;

    display: none !important;

    align-items: center !important;
    justify-content: center !important;

    background: rgba(0, 0, 0, .72) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;

    border: 0 !important;
    border-radius: 0 !important;

    transform: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-sizing: border-box !important;
}


.cookie-banner.is-visible {
    display: flex !important;
}


/* CARTE CENTRALE */

.cookie-banner-content {
    position: relative !important;

    display: block !important;

    width: min(480px, 100%) !important;

    margin: 0 auto !important;
    padding: 28px !important;

    background:
        linear-gradient(
            145deg,
            rgba(28, 24, 19, .99),
            rgba(7, 7, 7, .99)
        ) !important;

    border:
        1px solid rgba(216, 180, 118, .38) !important;

    border-radius: 24px !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.75),
        inset 0 1px 0 rgba(255,255,255,.05) !important;

    box-sizing: border-box !important;
}


.cookie-banner-text {
    width: 100% !important;
}


.cookie-banner-text strong {
    display: block !important;

    margin-bottom: 10px !important;

    color: #f1d8a4 !important;

    font-size: 1.25rem !important;
}


.cookie-banner-text p {
    max-width: none !important;

    margin: 0 !important;

    color: rgba(255,255,255,.76) !important;

    font-size: .88rem !important;
    line-height: 1.6 !important;
}


.cookie-banner-text a {
    display: inline-block !important;

    margin-top: 9px !important;

    color: #d8b476 !important;

    font-size: .75rem !important;
}


.cookie-banner-actions {
    display: flex !important;

    width: 100% !important;

    margin-top: 22px !important;

    gap: 10px !important;
}


.cookie-button {
    flex: 1 !important;

    min-height: 48px !important;

    padding: 12px 16px !important;

    border-radius: 12px !important;

    font-family: inherit !important;
    font-size: .8rem !important;
    font-weight: 800 !important;

    cursor: pointer !important;
}


.cookie-accept {
    background:
        linear-gradient(
            120deg,
            #f0dcae,
            #d1a45e,
            #a87536
        ) !important;

    border:
        1px solid rgba(242,218,170,.65) !important;

    color: #17110b !important;
}


.cookie-refuse {
    background:
        rgba(255,255,255,.06) !important;

    border:
        1px solid rgba(255,255,255,.20) !important;

    color: #fff !important;
}


body.cookie-popup-open {
    overflow: hidden !important;
}


/* MOBILE */

@media (max-width: 768px) {

    .cookie-banner {
        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        padding: 18px !important;
    }


    .cookie-banner-content {
        width: 100% !important;
        max-width: 420px !important;

        padding: 24px 20px !important;

        border-radius: 20px !important;
    }


    .cookie-banner-actions {
        flex-direction: column !important;
    }


    .cookie-button {
        width: 100% !important;
    }

}
/* =========================================================
   MODALE MENTIONS LÉGALES — VERSION FINALE
========================================================= */

.legal-modal {
    position: fixed !important;
    inset: 0 !important;

    z-index: 10000000 !important;

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

    width: 100vw !important;
    height: 100dvh !important;

    padding: 20px !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    background: transparent !important;

    box-sizing: border-box !important;

    transition:
        opacity .25s ease,
        visibility .25s ease !important;
}


.legal-modal.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


.legal-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;

    background: rgba(0, 0, 0, .74) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}


.legal-modal-box {
    position: relative !important;

    z-index: 2 !important;

    width: min(760px, 100%) !important;
    max-height: 84dvh !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            145deg,
            rgba(28, 24, 19, .99),
            rgba(8, 8, 8, .99)
        ) !important;

    border:
        1px solid rgba(216, 180, 118, .35) !important;

    border-radius: 24px !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.75),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}


.legal-modal-header {
    position: relative !important;

    padding:
        30px
        34px
        20px !important;

    border-bottom:
        1px solid rgba(216, 180, 118, .18) !important;
}


.legal-modal-kicker {
    display: block !important;

    margin-bottom: 7px !important;

    color: #d8b476 !important;

    font-size: .7rem !important;
    font-weight: 700 !important;

    letter-spacing: .18em !important;
    text-transform: uppercase !important;
}


.legal-modal-header h2 {
    margin: 0 !important;

    color: #ffffff !important;

    font-size:
        clamp(
            1.7rem,
            4vw,
            2.5rem
        ) !important;
}


.legal-modal-content {
    max-height:
        calc(84dvh - 110px) !important;

    overflow-y: auto !important;

    padding:
        28px
        34px
        38px !important;

    color:
        rgba(255,255,255,.78) !important;

    line-height: 1.7 !important;
}


.legal-modal-content h3 {
    margin:
        26px
        0
        8px !important;

    color: #d8b476 !important;

    font-size: 1rem !important;
}


.legal-modal-content h3:first-child {
    margin-top: 0 !important;
}


.legal-modal-content p {
    margin:
        0
        0
        15px !important;

    color:
        rgba(255,255,255,.75) !important;
}


.legal-modal-content a {
    color: #e7c98f !important;
}


.legal-modal-close {
    position: absolute !important;

    top: 14px !important;
    right: 16px !important;

    z-index: 10 !important;

    width: 40px !important;
    height: 40px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    border:
        1px solid rgba(255,255,255,.14) !important;

    border-radius: 50% !important;

    background:
        rgba(255,255,255,.06) !important;

    color: #fff !important;

    font-size: 1.6rem !important;
    line-height: 1 !important;

    cursor: pointer !important;
}


body.legal-modal-open {
    overflow: hidden !important;
}


/* MOBILE */

@media (max-width: 768px) {

    .legal-modal {
        padding: 16px !important;
    }


    .legal-modal-box {
        width: 100% !important;
        max-height: 86dvh !important;

        border-radius: 20px !important;
    }


    .legal-modal-header {
        padding:
            26px
            22px
            18px !important;
    }


    .legal-modal-content {
        max-height:
            calc(86dvh - 95px) !important;

        padding:
            22px !important;

        font-size: .88rem !important;
    }

}
/* =========================================================
   FOOTER — LIENS LÉGAUX COMPACTS
========================================================= */

.footer-legal-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;

    gap: 7px 14px !important;

    width: 100% !important;

    margin-top: 4px !important;
}


.footer-legal-links a,
.footer-legal-links .cookie-settings-link {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: none !important;
    border: 0 !important;

    color: rgba(255,255,255,.46) !important;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: .60rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;

    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;

    cursor: pointer !important;
}


.footer-legal-links a:hover,
.footer-legal-links .cookie-settings-link:hover {
    color: #d8b476 !important;
}


/* =========================================================
   MOBILE — LE FOOTER RESTE AU-DESSUS DE LA NAVIGATION
========================================================= */

@media (max-width: 768px) {

    .footer {
        padding:
            28px
            18px
            125px !important;
    }


    .footer-legal-links {
        gap: 7px 12px !important;

        margin-top: 2px !important;
        margin-bottom: 6px !important;

        padding: 0 4px !important;
    }


    .footer-legal-links a,
    .footer-legal-links .cookie-settings-link {
        font-size: .56rem !important;
        line-height: 1.3 !important;
    }

}


/* TRÈS PETITS TÉLÉPHONES */

@media (max-width: 380px) {

    .footer-legal-links {
        gap: 6px 10px !important;
    }


    .footer-legal-links a,
    .footer-legal-links .cookie-settings-link {
        font-size: .52rem !important;
    }

}
/* =========================================================
   MOBILE — FOOTER TOUJOURS AU-DESSUS DE LA NAVIGATION
========================================================= */

@media (max-width: 768px) {

    .footer {
        position: relative !important;
        z-index: 1 !important;

        padding-top: 28px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;

        /* espace réservé à la barre de navigation */
        padding-bottom: 165px !important;
    }


    .footer-logo {
        position: relative !important;
        z-index: 1 !important;
    }


    .footer-legal-links {
        position: relative !important;
        z-index: 1 !important;

        margin-bottom: 0 !important;
    }


    .footer > p {
        position: relative !important;
        z-index: 1 !important;

        margin-bottom: 0 !important;
    }


    /* LA NAVIGATION RESTE AU PREMIER PLAN */

    .mobile-bottom-nav {
        position: fixed !important;

        top: auto !important;
        bottom: 12px !important;

        z-index: 99999 !important;
    }

}
 /* =========================================================
   POP-UP SITE EN COURS DE FINALISATION
========================================================= */

.site-notice {
    position: fixed;
    inset: 0;

    z-index: 20000000;

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

    padding: 18px;
}

.site-notice.is-hidden {
    display: none;
}

.site-notice-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.76);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.site-notice-box {
    position: relative;
    z-index: 2;

    width: min(420px, 100%);

    padding:
        28px
        26px
        24px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(28,24,18,.99),
            rgba(7,7,7,.99)
        );

    border:
        1px solid rgba(216,180,118,.42);

    border-radius: 20px;

    box-shadow:
        0 24px 70px rgba(0,0,0,.70);
}

.site-notice-kicker {
    display: block;

    margin-bottom: 10px;

    color: #d8b476;

    font-size: .64rem;
    font-weight: 800;

    letter-spacing: .20em;
}

.site-notice-box h2 {
    margin:
        0
        0
        12px;

    color: #fff;

    font-size:
        clamp(
            1.45rem,
            4.5vw,
            2rem
        );

    line-height: 1.08;
}

.site-notice-box p {
    margin: 0;

    max-width: 360px;

    margin-left: auto;
    margin-right: auto;

    color: rgba(255,255,255,.72);

    font-size: .84rem;

    line-height: 1.55;
}

.site-notice-close {
    position: absolute;

    top: 12px;
    right: 14px;

    width: 32px;
    height: 32px;

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

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 50%;

    background:
        rgba(255,255,255,.05);

    color: #fff;

    font-size: 1.35rem;

    line-height: 1;

    cursor: pointer;
}


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

@media (max-width: 768px) {

    .site-notice {
        padding: 16px;
    }

    .site-notice-box {
        width: min(340px, 100%);

        padding:
            26px
            20px
            22px;

        border-radius: 18px;
    }

    .site-notice-kicker {
        font-size: .58rem;
    }

    .site-notice-box h2 {
        font-size: 1.35rem;
    }

    .site-notice-box p {
        font-size: .78rem;
        line-height: 1.5;
    }

    .site-notice-close {
        width: 30px;
        height: 30px;

        top: 10px;
        right: 12px;

        font-size: 1.25rem;
    }

}
/* =========================================================
   ACCUEIL — PLANNING + PREMIÈRE VISITE
   CORRECTION FINALE
========================================================= */

.planning-cta {
    width: 100% !important;
    max-width: 1120px !important;

    margin:
        36px
        auto
        0 !important;

    padding:
        30px
        30px
        28px !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    align-items: center !important;

    gap: 30px !important;

    border:
        1px solid rgba(216,172,48,.55) !important;

    border-radius:
        24px !important;

    background:
        radial-gradient(
            circle at top right,
            rgba(216,172,48,.08),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #171717,
            #080808
        ) !important;

    overflow: visible !important;
}


.planning-cta > div:first-child {
    min-width: 0 !important;
}


.planning-cta h3 {
    margin-top:
        8px !important;

    font-size:
        1.55rem !important;

    line-height:
        1.15 !important;
}


.planning-cta p:not(.gold-label) {
    max-width:
        650px !important;

    margin-top:
        11px !important;

    font-size:
        .92rem !important;

    line-height:
        1.6 !important;
}


.planning-program-actions {
    min-width:
        250px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        12px !important;
}


.planning-program-actions .gold-button {
    width:
        100% !important;

    min-height:
        52px !important;

    padding:
        0
        20px !important;

    white-space:
        nowrap !important;
}


.planning-social-link {
    display:
        block !important;

    width:
        100% !important;

    padding:
        5px
        8px !important;

    text-align:
        center !important;

    color:
        #d8b476 !important;

    font-size:
        .72rem !important;

    font-weight:
        900 !important;

    letter-spacing:
        .05em !important;

    text-decoration:
        none !important;
}


.planning-social-link:hover {
    color:
        #f1cf63 !important;
}


/* =========================================================
   PREMIÈRE VISITE
========================================================= */

.first-visit {
    padding-top:
        34px !important;
}


.first-visit-card {
    width:
        100% !important;

    max-width:
        1120px !important;

    margin:
        0
        auto !important;

    padding:
        32px !important;

    border:
        1px solid rgba(216,172,48,.35) !important;

    border-radius:
        24px !important;

    background:
        linear-gradient(
            145deg,
            #f6f0e5,
            #e9decc
        ) !important;

    color:
        #111 !important;

    overflow:
        visible !important;
}


.first-visit-card h2 {
    margin-top:
        8px !important;

    font-size:
        2rem !important;

    line-height:
        1.08 !important;
}


.first-visit-card p:not(.gold-label) {
    max-width:
        820px !important;

    margin-top:
        13px !important;

    color:
        #625d55 !important;

    font-size:
        .94rem !important;

    line-height:
        1.6 !important;
}


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

@media (max-width: 768px) {

    .planning-cta {
        margin-top:
            26px !important;

        padding:
            22px
            18px
            20px !important;

        display:
            block !important;

        border-radius:
            20px !important;
    }


    .planning-cta h3 {
        font-size:
            1.35rem !important;

        line-height:
            1.15 !important;
    }


    .planning-cta p:not(.gold-label) {
        font-size:
            .86rem !important;

        line-height:
            1.55 !important;
    }


    .planning-program-actions {
        min-width:
            0 !important;

        width:
            100% !important;

        margin-top:
            20px !important;

        gap:
            10px !important;
    }


    .planning-program-actions .gold-button {
        width:
            100% !important;

        min-height:
            50px !important;

        padding:
            0
            14px !important;

        font-size:
            .72rem !important;

        white-space:
            normal !important;

        text-align:
            center !important;
    }


    .planning-social-link {
        font-size:
            .68rem !important;
    }


    .first-visit {
        padding-top:
            28px !important;

        padding-left:
            18px !important;

        padding-right:
            18px !important;
    }


    .first-visit-card {
        padding:
            24px
            20px !important;

        border-radius:
            20px !important;
    }


    .first-visit-card h2 {
        font-size:
            1.55rem !important;
    }


    .first-visit-card p:not(.gold-label) {
        margin-top:
            11px !important;

        font-size:
            .86rem !important;

        line-height:
            1.55 !important;
    }

}
/* =========================================================
   PREMIÈRE VISITE — STYLE BANDE DESSINÉE PREMIUM
========================================================= */

.first-visit-comic {
    position: relative;

    max-width: 1120px;
    margin: 0 auto;

    padding: 34px;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at top right,
            rgba(182, 124, 61, .20),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #fff8e9 0%,
            #f2e1bf 55%,
            #d8ad70 100%
        );

    border:
        1px solid rgba(176, 112, 48, .42);

    box-shadow:
        0 18px 50px rgba(0,0,0,.24),
        0 0 22px rgba(216,172,48,.08);

    color: #20160d;

    overflow: visible;
}


/* =========================================================
   BULLE "VOUS DÉBUTEZ ?"
========================================================= */

.first-visit-bubble {
    display: inline-block;

    position: relative;

    margin-bottom: 24px;

    padding:
        13px
        24px;

    border-radius:
        18px
        18px
        18px
        8px;

    background:
        linear-gradient(
            145deg,
            #e5bd7b,
            #b87638
        );

    color: #24170c;

    font-size: .74rem;
    font-weight: 950;

    letter-spacing: .18em;

    transform:
        rotate(-2deg);

    box-shadow:
        0 8px 20px
        rgba(102,61,25,.18);
}

.first-visit-bubble::after {
    content: "";

    position: absolute;

    bottom: -10px;
    left: 27px;

    width: 0;
    height: 0;

    border-top:
        13px solid #b87638;

    border-right:
        11px solid transparent;
}


/* =========================================================
   EN-TÊTE
========================================================= */

.first-visit-comic-head {
    display: grid;

    grid-template-columns:
        1fr
        auto;

    gap: 30px;

    align-items: center;

    padding:
        6px
        6px
        28px;
}

.first-visit-comic-head h2 {
    margin: 0;

    color: #1d140c;

    font-size:
        clamp(
            2.3rem,
            5vw,
            4.3rem
        );

    line-height: .95;

    letter-spacing: -.045em;
}

.first-visit-comic-head p {
    max-width: 650px;

    margin-top: 18px;

    color: #34271c;

    font-size: 1rem;

    line-height: 1.65;
}

.first-visit-handwritten {
    color: #9d612b;

    font-size: 1.08rem;

    font-weight: 800;

    font-style: italic;

    line-height: 1.22;

    text-align: center;

    transform:
        rotate(-7deg);
}


/* =========================================================
   LES 3 CASES BD — DESKTOP
========================================================= */

.first-visit-comic-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;

    margin-top: 8px;
}

.first-visit-comic-card {
    position: relative;

    min-height: 245px;

    padding:
        24px
        20px;

    border-radius: 24px;

    border:
        1px solid rgba(129,78,30,.24);

    display: flex;

    flex-direction: column;

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

    text-align: center;

    color: #21170e;

    box-shadow:
        0 12px 28px rgba(103,65,28,.13),
        inset 0 1px 0 rgba(255,255,255,.35);

    overflow: visible;
}


/* CARTE 1 */

.first-visit-comic-card.champagne {
    background:
        linear-gradient(
            145deg,
            #f8e9c8 0%,
            #e8c58b 55%,
            #d19a58 100%
        );
}


/* CARTE 2 */

.first-visit-comic-card.ivoire {
    background:
        linear-gradient(
            145deg,
            #fffaf0 0%,
            #f5e7cb 58%,
            #e7c99c 100%
        );
}


/* CARTE 3 */

.first-visit-comic-card.bronze {
    background:
        linear-gradient(
            145deg,
            #efd3a3 0%,
            #d6a163 52%,
            #b9763c 100%
        );
}


/* =========================================================
   NUMÉRO STYLE BULLE
========================================================= */

.comic-number {
    position: absolute;

    top: 14px;
    left: 14px;

    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #fff6e5,
            #dda860
        );

    color: #70421c;

    font-size: .76rem;

    font-weight: 950;

    border:
        1px solid rgba(108,62,24,.28);

    box-shadow:
        0 5px 12px
        rgba(86,52,22,.12);
}


/* =========================================================
   ICÔNES
========================================================= */

.comic-icon {
    width: 66px;
    height: 66px;

    margin-bottom: 18px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(255,255,255,.38);

    border:
        1px solid rgba(113,67,25,.22);

    color: #85501f;

    font-size: 2rem;

    font-weight: 900;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.30);
}


/* =========================================================
   TEXTES DES CASES
========================================================= */

.first-visit-comic-card h3 {
    max-width: 210px;

    color: #21170e;

    font-size: 1.25rem;

    line-height: 1.08;
}

.first-visit-comic-card p {
    max-width: 220px;

    margin-top: 11px;

    color: rgba(33,23,14,.73);

    font-size: .86rem;

    line-height: 1.5;
}


/* =========================================================
   PETITES DÉCORATIONS BD
========================================================= */

.first-visit-comic-card:nth-child(1)::after {
    content: "✦";

    position: absolute;

    top: 17px;
    right: 18px;

    color: #a66a31;

    font-size: 1rem;
}

.first-visit-comic-card:nth-child(2)::after {
    content: "〰";

    position: absolute;

    top: 15px;
    right: 18px;

    color: #aa7138;

    font-size: 1.2rem;

    transform:
        rotate(-14deg);
}

.first-visit-comic-card:nth-child(3)::after {
    content: "✦";

    position: absolute;

    top: 17px;
    right: 18px;

    color: #fff0cf;

    font-size: 1.05rem;
}


/* =========================================================
   BULLE FINALE — BRONZE PLUS SOUTENU
========================================================= */

.first-visit-comic-footer {
    position: relative;

    margin-top: 20px;

    padding:
        20px
        70px;

    display: flex;

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

    gap: 20px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #c98a49 0%,
            #a86430 52%,
            #7b411f 100%
        );

    border:
        1px solid rgba(85,43,17,.48);

    color: #fff6e8;

    text-align: center;

    box-shadow:
        0 13px 30px rgba(76,39,14,.24),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.first-visit-comic-footer::after {
    content: "";

    position: absolute;

    bottom: -12px;
    left: 42px;

    width: 0;
    height: 0;

    border-top:
        14px solid #7b411f;

    border-right:
        15px solid transparent;
}

.first-visit-comic-footer p {
    margin: 0;

    color: #fff4e2;

    font-size: 1rem;

    line-height: 1.4;
}

.first-visit-comic-footer strong {
    color: #ffe0a6;
}

.comic-heart,
.comic-spark {
    color: #ffd28a;

    font-size: 2rem;

    font-weight: 900;
}


/* =========================================================
   MOBILE — VRAIE PLANCHE BD
========================================================= */

@media (max-width: 768px) {

    .first-visit {
        padding:
            34px
            14px !important;
    }


    /* GRAND CADRE */

    .first-visit-comic {
        padding:
            22px
            16px
            24px;

        border-radius:
            26px;

        background:
            radial-gradient(
                circle at top right,
                rgba(183,118,54,.20),
                transparent 30%
            ),
            linear-gradient(
                145deg,
                #fff8e9 0%,
                #f1dfbd 58%,
                #d6a96c 100%
            );

        overflow:
            visible;
    }


    /* BULLE TITRE */

    .first-visit-bubble {
        margin:
            0
            0
            20px
            3px;

        padding:
            10px
            17px;

        border-radius:
            16px
            16px
            16px
            7px;

        font-size:
            .63rem;

        letter-spacing:
            .15em;

        transform:
            rotate(-2deg);
    }


    /* INTRO */

    .first-visit-comic-head {
        display:
            block;

        padding:
            0
            4px
            22px;
    }

    .first-visit-comic-head h2 {
        font-size:
            2.45rem;

        line-height:
            .95;
    }

    .first-visit-comic-head p {
        margin-top:
            15px;

        color:
            #30261d;

        font-size:
            .91rem;

        line-height:
            1.55;
    }


    /* PETITE ÉCRITURE PENCHÉE */

    .first-visit-handwritten {
        width:
            max-content;

        margin:
            12px
            8px
            0
            auto;

        font-size:
            .88rem;

        line-height:
            1.2;

        transform:
            rotate(-7deg);
    }


    /* =====================================================
       PLANCHE BD MOBILE
    ====================================================== */

    .first-visit-comic-grid {
        display:
            flex;

        flex-direction:
            column;

        gap:
            17px;

        margin-top:
            5px;

        padding:
            0
            4px;
    }


    /* CARTES HORIZONTALES */

    .first-visit-comic-card {
        min-height:
            0;

        padding:
            20px
            18px;

        border-radius:
            21px;

        display:
            grid;

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

        grid-template-rows:
            auto
            auto;

        column-gap:
            14px;

        row-gap:
            3px;

        align-items:
            center;

        text-align:
            left;

        box-shadow:
            0 11px 24px
            rgba(98,60,25,.13);

        overflow:
            visible;
    }


    /* CASE 1 */

    .first-visit-comic-card:nth-child(1) {
        width:
            94%;

        margin-right:
            auto;

        transform:
            rotate(-1deg);
    }


    /* CASE 2 */

    .first-visit-comic-card:nth-child(2) {
        width:
            94%;

        margin-left:
            auto;

        transform:
            rotate(1deg);
    }


    /* CASE 3 */

    .first-visit-comic-card:nth-child(3) {
        width:
            97%;

        margin:
            0
            auto;

        transform:
            rotate(-.5deg);
    }


    /* NUMÉROS QUI DÉPASSENT */

    .comic-number {
        top:
            -10px;

        left:
            -7px;

        width:
            33px;

        height:
            33px;

        z-index:
            4;
    }


    /* ICÔNES À GAUCHE */

    .comic-icon {
        grid-row:
            1 / 3;

        width:
            54px;

        height:
            54px;

        margin:
            0;

        font-size:
            1.55rem;
    }


    /* TITRES */

    .first-visit-comic-card h3 {
        max-width:
            none;

        margin:
            0;

        font-size:
            1rem;

        line-height:
            1.15;
    }


    /* DESCRIPTIONS */

    .first-visit-comic-card p {
        max-width:
            none;

        margin:
            5px
            0
            0 !important;

        color:
            rgba(33,23,14,.70);

        font-size:
            .76rem;

        line-height:
            1.42;
    }


    /* EFFETS BD */

    .first-visit-comic-card:nth-child(1)::after {
        top:
            9px;

        right:
            13px;
    }

    .first-visit-comic-card:nth-child(2)::after {
        top:
            7px;

        right:
            13px;
    }

    .first-visit-comic-card:nth-child(3)::after {
        top:
            9px;

        right:
            13px;
    }


    /* =====================================================
       BULLE FINALE MOBILE — BRONZE
    ====================================================== */

    .first-visit-comic-footer {
        margin-top:
            22px;

        padding:
            17px
            16px;

        display:
            grid;

        grid-template-columns:
            auto
            1fr
            auto;

        gap:
            10px;

        border-radius:
            20px;

        background:
            linear-gradient(
                145deg,
                #c88949 0%,
                #a15e2b 55%,
                #74391b 100%
            );

        border:
            1px solid rgba(76,36,14,.50);

        box-shadow:
            0 12px 26px
            rgba(69,34,13,.24);

        transform:
            rotate(.4deg);
    }

    .first-visit-comic-footer::after {
        bottom:
            -10px;

        left:
            35px;

        border-top:
            12px solid #74391b;

        border-right:
            12px solid transparent;
    }

    .first-visit-comic-footer p {
        color:
            #fff3df;

        font-size:
            .79rem;

        line-height:
            1.35;
    }

    .first-visit-comic-footer strong {
        display:
            block;

        margin-top:
            2px;

        color:
            #ffe1a8;
    }

    .comic-heart,
    .comic-spark {
        color:
            #ffd28a;

        font-size:
            1.35rem;
    }

}
/* =========================================================
   PLANNING — VERSION PREMIUM
   MÊME UNIVERS QUE "PREMIÈRE VISITE"
========================================================= */

.planning-live {
    position: relative;

    width: 100% !important;
    max-width: 1120px !important;

    margin:
        34px
        auto
        0 !important;

    padding:
        32px !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, .95fr) !important;

    gap:
        34px !important;

    align-items:
        center !important;

    border-radius:
        30px !important;

    background:
        radial-gradient(
            circle at top right,
            rgba(183,118,54,.12),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #1a140e 0%,
            #0b0907 60%,
            #050403 100%
        ) !important;

    border:
        1px solid rgba(216,172,48,.50) !important;

    box-shadow:
        0 18px 48px rgba(0,0,0,.28),
        0 0 22px rgba(216,172,48,.08) !important;

    overflow:
        visible !important;
}


/* =========================================================
   PETIT LABEL DU HAUT
========================================================= */

.planning-live .gold-label {
    display:
        inline-block;

    position:
        relative;

    margin:
        0
        0
        18px !important;

    padding:
        10px
        17px;

    border-radius:
        15px
        15px
        15px
        7px;

    background:
        linear-gradient(
            145deg,
            #e4bb78,
            #b87538
        );

    color:
        #25170b !important;

    font-size:
        .68rem !important;

    font-weight:
        950 !important;

    letter-spacing:
        .14em !important;

    transform:
        rotate(-1deg);

    box-shadow:
        0 7px 18px rgba(82,48,20,.18);
}


/* PETITE POINTE DE BULLE */

.planning-live .gold-label::after {
    content: "";

    position:
        absolute;

    left:
        22px;

    bottom:
        -8px;

    border-top:
        10px solid #b87538;

    border-right:
        9px solid transparent;
}


/* =========================================================
   TEXTE GAUCHE
========================================================= */

.planning-live-content {
    min-width:
        0;
}


.planning-live-content h3 {
    margin:
        0 !important;

    color:
        #fff7eb !important;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.6rem
        ) !important;

    font-weight:
        900 !important;

    line-height:
        1.03 !important;

    letter-spacing:
        -.025em !important;
}


.planning-live-content > p:not(.gold-label) {
    max-width:
        580px !important;

    margin-top:
        13px !important;

    color:
        rgba(255,248,237,.68) !important;

    font-size:
        .91rem !important;

    line-height:
        1.58 !important;
}


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

.planning-live .planning-program-actions {
    margin-top:
        24px;

    display:
        flex !important;

    align-items:
        center;

    gap:
        13px !important;
}


.planning-live .gold-button {
    min-height:
        50px !important;

    padding:
        0
        20px !important;

    border-radius:
        16px !important;

    background:
        linear-gradient(
            145deg,
            #f1d498 0%,
            #dca861 52%,
            #b9763d 100%
        ) !important;

    color:
        #21150b !important;

    border:
        1px solid rgba(255,225,165,.45) !important;

    box-shadow:
        0 8px 20px rgba(92,54,22,.18) !important;
}


.planning-live .planning-social-link {
    padding:
        10px
        6px !important;

    color:
        #dcb779 !important;

    font-size:
        .72rem !important;

    font-weight:
        900 !important;

    letter-spacing:
        .05em !important;
}


/* =========================================================
   GRAND CADRE DU MINI PLANNING
========================================================= */

.planning-preview {
    position:
        relative;

    padding:
        18px;

    border-radius:
        25px;

    background:
        linear-gradient(
            145deg,
            #f9e8c8 0%,
            #e7bf83 58%,
            #c98d4f 100%
        );

    border:
        1px solid rgba(131,77,29,.28);

    box-shadow:
        0 14px 32px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.35);

    color:
        #20150c;

    overflow:
        visible;
}


/* PETITE DÉCO */

.planning-preview::before {
    content:
        "✦";

    position:
        absolute;

    top:
        -12px;

    right:
        24px;

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #fff5df,
            #d5a158
        );

    border:
        1px solid rgba(114,67,27,.24);

    color:
        #84501f;

    font-size:
        .85rem;

    box-shadow:
        0 6px 15px rgba(78,45,18,.17);
}


/* =========================================================
   "CETTE SEMAINE"
========================================================= */

.planning-preview-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    margin-bottom:
        14px;

    color:
        #2b1d11;

    font-size:
        .80rem;

    font-weight:
        900;
}


.planning-preview-arrow {
    width:
        27px;

    height:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.38);

    border:
        1px solid rgba(123,75,31,.18);

    color:
        #87511f;

    font-size:
        1rem;
}


/* =========================================================
   JOURS DE LA SEMAINE
========================================================= */

.planning-preview-days {
    display:
        grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap:
        6px;

    margin-bottom:
        15px;
}


.planning-preview-days > div {
    min-width:
        0;

    padding:
        8px
        3px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        2px;

    border-radius:
        12px;

    background:
        rgba(255,250,239,.42);

    border:
        1px solid rgba(121,72,29,.16);

    color:
        #63401f;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35);
}


.planning-preview-days span {
    font-size:
        .48rem;

    font-weight:
        900;
}


.planning-preview-days strong {
    color:
        #24170c;

    font-size:
        .76rem;
}


.planning-preview-days .active {
    background:
        linear-gradient(
            145deg,
            #c98242,
            #9a5627
        );

    color:
        #fff5e6;

    border-color:
        rgba(111,58,21,.40);

    box-shadow:
        0 7px 16px rgba(91,52,21,.19);
}


.planning-preview-days .active strong {
    color:
        #fff6e8;
}


/* =========================================================
   LISTE DES COURS
========================================================= */

.planning-preview-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.planning-preview-event {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        48px
        40px
        minmax(0,1fr);

    gap:
        10px;

    align-items:
        center;
}


/* PETIT TRAIT VERTICAL ENTRE LES COURS */

.planning-preview-event:not(:last-child)::after {
    content: "";

    position:
        absolute;

    left:
        67px;

    bottom:
        -11px;

    width:
        1px;

    height:
        12px;

    background:
        rgba(121,72,29,.22);
}


/* HEURE */

.planning-preview-time {
    color:
        #6d523c;

    font-size:
        .58rem;

    font-weight:
        700;

    line-height:
        1.15;

    text-align:
        right;
}


/* ICÔNE */

.planning-preview-icon {
    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #fff8e9,
            #e7c491
        );

    border:
        1px solid rgba(116,68,25,.22);

    color:
        #86501f;

    font-size:
        .85rem;

    box-shadow:
        0 5px 12px rgba(100,59,24,.10);
}


/* CARTE DU COURS */

.planning-preview-info {
    min-width:
        0;

    padding:
        11px
        14px;

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #f0ddbc
        );

    border:
        1px solid rgba(128,76,30,.13);

    color:
        #20150c;

    box-shadow:
        0 6px 14px rgba(99,59,25,.08);
}


/* ALTERNANCE TYPE PREMIÈRE VISITE */

.planning-preview-event:nth-child(1)
.planning-preview-info {
    background:
        linear-gradient(
            145deg,
            #f8e8c7,
            #e0ae69
        );
}


.planning-preview-event:nth-child(2)
.planning-preview-info {
    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #f0ddbc
        );
}


.planning-preview-event:nth-child(3)
.planning-preview-info {
    background:
        linear-gradient(
            145deg,
            #eac590,
            #c88748
        );
}


.planning-preview-info strong {
    display:
        block;

    color:
        #21160c;

    font-size:
        .78rem;

    font-weight:
        900;
}


.planning-preview-info span {
    display:
        block;

    margin-top:
        3px;

    color:
        rgba(51,35,22,.66);

    font-size:
        .59rem;

    line-height:
        1.25;
}


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

@media (max-width: 768px) {

    .planning-live {
        display:
            block !important;

        margin-top:
            28px !important;

        padding:
            24px
            17px
            22px !important;

        border-radius:
            27px !important;
    }


    .planning-live .gold-label {
        margin-bottom:
            21px !important;

        padding:
            10px
            15px;

        font-size:
            .61rem !important;
    }


    .planning-live-content h3 {
        font-size:
            1.78rem !important;

        line-height:
            1.04 !important;
    }


    .planning-live-content > p:not(.gold-label) {
        margin-top:
            12px !important;

        font-size:
            .84rem !important;

        line-height:
            1.5 !important;
    }


    .planning-live .planning-program-actions {
        margin-top:
            21px;

        display:
            flex !important;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            8px !important;
    }


    .planning-live .gold-button {
        width:
            100% !important;

        min-height:
            50px !important;
    }


    .planning-live .planning-social-link {
        text-align:
            center !important;
    }


    /* MINI PLANNING */

    .planning-preview {
        margin-top:
            24px;

        padding:
            15px
            12px
            16px;

        border-radius:
            22px;
    }


    .planning-preview::before {
        top:
            -11px;

        right:
            17px;

        width:
            29px;

        height:
            29px;
    }


    .planning-preview-head {
        margin-bottom:
            12px;

        font-size:
            .76rem;
    }


    .planning-preview-days {
        gap:
            4px;

        margin-bottom:
            14px;
    }


    .planning-preview-days > div {
        padding:
            7px
            1px;

        border-radius:
            10px;
    }


    .planning-preview-days span {
        font-size:
            .41rem;
    }


    .planning-preview-days strong {
        font-size:
            .66rem;
    }


    .planning-preview-event {
        grid-template-columns:
            41px
            34px
            minmax(0,1fr);

        gap:
            7px;
    }


    .planning-preview-time {
        font-size:
            .50rem;
    }


    .planning-preview-icon {
        width:
            34px;

        height:
            34px;

        font-size:
            .72rem;
    }


    .planning-preview-info {
        padding:
            10px
            11px;

        border-radius:
            14px;
    }


    .planning-preview-info strong {
        font-size:
            .71rem;
    }


    .planning-preview-info span {
        font-size:
            .53rem;
    }


    .planning-preview-event:not(:last-child)::after {
        left:
            58px;
    }

}
/* =========================================================
   AVIS GOOGLE — VERSION CHAMPAGNE PREMIUM
========================================================= */

.google-reviews-section {
    max-width: 1120px !important;

    margin:
        28px
        auto
        70px !important;

    padding:
        30px !important;

    border-radius:
        26px !important;

    background:
        linear-gradient(
            145deg,
            #fff9ed 0%,
            #f2dfbe 62%,
            #d7aa6b 100%
        ) !important;

    border:
        1px solid rgba(164,101,42,.38) !important;

    color:
        #1c140d !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.26) !important;
}


.google-reviews-heading {
    margin-bottom:
        22px !important;
}


.google-reviews-heading .gold-label {
    color:
        #9b5f29 !important;
}


.google-reviews-heading h2 {
    color:
        #18110b !important;
}


.google-rating {
    background:
        rgba(255,255,255,.38) !important;

    border:
        1px solid rgba(151,91,35,.18) !important;

    color:
        #1c140d !important;

    box-shadow:
        none !important;
}


.google-rating-score {
    color:
        #1b130b !important;
}


.google-stars,
.google-review-stars {
    color:
        #c88635 !important;
}


.google-review-count {
    color:
        #735f4d !important;
}


.google-review-card,
.google-review-card.featured {
    background:
        linear-gradient(
            145deg,
            #fffdf7,
            #f3e5cc
        ) !important;

    color:
        #1b140e !important;

    border:
        1px solid rgba(143,84,31,.18) !important;

    border-radius:
        20px !important;

    box-shadow:
        0 10px 25px rgba(100,58,25,.12) !important;

    transform:
        none !important;
}


.google-review-card h3 {
    color:
        #1b140e !important;
}


.google-review-card p {
    color:
        #5f5145 !important;
}


.google-review-source {
    color:
        #9a642e !important;
}


.google-review-avatar {
    background:
        linear-gradient(
            145deg,
            #d5a05c,
            #8c5327
        ) !important;

    color:
        #fff8e9 !important;

    border-color:
        rgba(110,64,25,.28) !important;
}


.google-reviews-action .gold-button {
    background:
        linear-gradient(
            145deg,
            #c88a47,
            #8f5429
        ) !important;

    color:
        #fff7e9 !important;
}


/* MOBILE */

@media (max-width: 768px) {

    .google-reviews-section {
        margin:
            24px
            14px
            60px !important;

        padding:
            22px
            16px !important;

        border-radius:
            22px !important;
    }


    .google-reviews-heading h2 {
        font-size:
            1.7rem !important;
    }


    .google-reviews-grid {
        gap:
            11px !important;
    }


    .google-review-card {
        padding:
            17px !important;

        border-radius:
            17px !important;
    }

}
/* =========================================================
   GOOGLE MAPS — REMPLISSAGE TOTAL DU CADRE
========================================================= */

.contact-map {
    position: relative !important;

    width:
        min(960px, 100%) !important;

    height:
        380px !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    border-radius:
        24px !important;

    background:
        #080808 !important;
}


.contact-map > .google-map-container {
    position:
        absolute !important;

    inset:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border-radius:
        inherit !important;

    overflow:
        hidden !important;
}


.contact-map .google-map-container iframe {
    position:
        absolute !important;

    inset:
        0 !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;
}


.contact-map .map-placeholder {
    width:
        100% !important;

    height:
        100% !important;

    min-height:
        0 !important;

    box-sizing:
        border-box !important;
}


/* MOBILE */

@media (max-width: 768px) {

    .contact-map {
        width:
            100% !important;

        height:
            260px !important;

        margin:
            20px
            auto
            22px !important;

        border-radius:
            19px !important;
    }

}
/* =========================================================
   LE BAR DANSANT — VERSION PREMIUM
========================================================= */

.bar-showcase {
    width: 100%;

    padding:
        58px
        5vw;
}


.bar-showcase-card {
    width: 100%;
    max-width: 1120px;

    margin: 0 auto;

    display: grid;

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

    gap: 28px;

    align-items: stretch;

    padding: 20px;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at top right,
            rgba(182,117,54,.12),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #19130e,
            #080605
        );

    border:
        1px solid rgba(216,172,48,.42);

    box-shadow:
        0 18px 48px rgba(0,0,0,.28),
        0 0 20px rgba(216,172,48,.07);
}


/* =========================================================
   PHOTO
========================================================= */

.bar-showcase-visual {
    position: relative;

    min-height: 420px;

    border-radius: 24px;

    overflow: hidden;

    border:
        1px solid rgba(216,172,48,.36);

    background:
        linear-gradient(
            145deg,
            #2a2017,
            #0e0b08
        );
}


.bar-showcase-photo {
    width: 100%;
    height: 100%;

    min-height: 420px;

    display: flex;

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

    color:
        rgba(255,255,255,.34);

    font-size: .72rem;

    font-weight: 900;

    letter-spacing: .12em;
}


/* PETIT CARTOUCHE SUR LA PHOTO */

.bar-showcase-photo-badge {
    position: absolute;

    top: 18px;
    left: 18px;

    padding:
        9px
        14px;

    border-radius:
        13px
        13px
        13px
        6px;

    background:
        linear-gradient(
            145deg,
            #efcb8d,
            #b97438
        );

    color: #24170d;

    font-size: .60rem;

    font-weight: 950;

    letter-spacing: .08em;

    box-shadow:
        0 6px 18px rgba(0,0,0,.18);
}


.bar-showcase-photo-badge::after {
    content: "";

    position: absolute;

    left: 20px;
    bottom: -8px;

    border-top:
        9px solid #b97438;

    border-right:
        8px solid transparent;
}


/* ÉCRITURE MANUSCRITE */

.bar-showcase-handwritten {
    position: absolute;

    right: 20px;
    bottom: 20px;

    color: #d59b58;

    font-size: .92rem;

    font-style: italic;

    font-weight: 800;

    line-height: 1.18;

    text-align: right;

    transform:
        rotate(-6deg);
}


/* =========================================================
   CONTENU
========================================================= */

.bar-showcase-content {
    padding:
        26px
        20px
        26px
        6px;
}


.bar-showcase-bubble {
    display: inline-block;

    position: relative;

    padding:
        10px
        16px;

    border-radius:
        15px
        15px
        15px
        7px;

    background:
        linear-gradient(
            145deg,
            #f0d29b,
            #b9763a
        );

    color: #24170d;

    font-size: .64rem;

    font-weight: 950;

    letter-spacing: .11em;

    transform:
        rotate(-1deg);
}


.bar-showcase-bubble::after {
    content: "";

    position: absolute;

    left: 22px;
    bottom: -8px;

    border-top:
        10px solid #b9763a;

    border-right:
        9px solid transparent;
}


/* TITRE */

.bar-showcase-content h2 {
    margin-top: 24px;

    color: #fff8ed;

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.6rem
        );

    line-height: .98;

    letter-spacing: -.04em;
}


/* INTRO */

.bar-showcase-intro {
    max-width: 570px;

    margin-top: 18px;

    color:
        rgba(255,255,255,.68);

    font-size: .95rem;

    line-height: 1.6;
}


/* =========================================================
   PETITES CARTES
========================================================= */

.bar-showcase-points {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 11px;

    margin-top: 24px;
}


.bar-showcase-point {
    min-width: 0;

    padding:
        16px
        13px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #fff8ea,
            #e7c58f
        );

    border:
        1px solid rgba(128,76,30,.16);

    color: #21160d;

    box-shadow:
        0 8px 20px rgba(0,0,0,.12);
}


.bar-showcase-point:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #f7e4c1,
            #dca45f
        );
}


.bar-showcase-point:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            #e4b679,
            #b76f36
        );
}


.bar-showcase-point-icon {
    width: 38px;
    height: 38px;

    margin-bottom: 11px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(255,255,255,.42);

    border:
        1px solid rgba(113,66,25,.20);

    color: #7e4a1d;

    font-size: 1rem;
}


.bar-showcase-point strong {
    display: block;

    color: #21160d;

    font-size: .81rem;

    line-height: 1.2;
}


.bar-showcase-point p {
    margin-top: 6px;

    color:
        rgba(45,30,18,.66);

    font-size: .68rem;

    line-height: 1.4;
}


/* =========================================================
   BOUTON
========================================================= */

.bar-showcase-button {
    width: max-content;

    min-height: 48px;

    margin-top: 24px;

    padding:
        0
        18px;

    display: inline-flex;

    align-items: center;

    gap: 18px;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #eac688,
            #b77238
        );

    border:
        1px solid rgba(255,222,164,.35);

    color: #21150b;

    font-size: .72rem;

    font-weight: 950;

    letter-spacing: .05em;

    text-decoration: none;

    box-shadow:
        0 8px 20px rgba(0,0,0,.18);
}


.bar-showcase-button span {
    font-size: 1.25rem;
}


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

@media (max-width: 768px) {

    .bar-showcase {
        padding:
            45px
            14px;
    }


    .bar-showcase-card {
        display: flex;

        flex-direction: column;

        gap: 0;

        padding: 15px;

        border-radius: 27px;
    }


    /* PHOTO PLUS COURTE */

    .bar-showcase-visual {
        min-height: 225px;

        border-radius: 21px;
    }


    .bar-showcase-photo {
        min-height: 225px;
    }


    .bar-showcase-photo-badge {
        top: 14px;
        left: 14px;

        padding:
            8px
            12px;

        font-size: .54rem;
    }


    .bar-showcase-handwritten {
        right: 14px;
        bottom: 14px;

        font-size: .76rem;
    }


    /* CONTENU */

    .bar-showcase-content {
        padding:
            23px
            3px
            6px;
    }


    .bar-showcase-bubble {
        padding:
            9px
            13px;

        font-size: .56rem;
    }


    .bar-showcase-content h2 {
        margin-top: 22px;

        font-size: 2.2rem;
    }


    .bar-showcase-intro {
        margin-top: 14px;

        font-size: .84rem;

        line-height: 1.5;
    }


    /* 3 PETITES CARTES EN COLONNE */

    .bar-showcase-points {
        display: flex;

        flex-direction: column;

        gap: 10px;

        margin-top: 21px;
    }


    .bar-showcase-point {
        display: grid;

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

        grid-template-rows:
            auto
            auto;

        column-gap: 11px;

        padding:
            13px
            14px;

        border-radius: 17px;
    }


    .bar-showcase-point-icon {
        grid-row:
            1 / 3;

        width: 40px;
        height: 40px;

        margin: 0;

        align-self: center;
    }


    .bar-showcase-point strong {
        font-size: .78rem;
    }


    .bar-showcase-point p {
        margin-top: 3px;

        font-size: .66rem;
    }


    .bar-showcase-button {
        width: 100%;

        margin-top: 18px;

        justify-content: center;
    }

}