.naturalink-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 9999;
}

.naturalink-modal-overlay.show {
    opacity: 1;
    visibility: visible;
display: flex !important;
}

.naturalink-modal {
    position: relative;
    border-radius: 12px;
    padding: 30px;
    padding-top: 50px;
    width: min(500px, 90vw);
    transform: scale(.95);
    transition: transform .3s ease;
    max-height: 90vh;
    overflow-y: auto;
    color: #ffffff;
    border: solid 1px white;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.naturalink-modal::-webkit-scrollbar {
    display: none;
}

.naturalink-modal-overlay.show .naturalink-modal {
    transform: scale(1);
}

.naturalink-modal-close {
    position: absolute;
    top: 5px;
    right: 5px;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 35px;
    cursor: pointer;
    padding: 5px;
    transition: scale .5s;
    color: #ffffff !important;
}

.naturalink-modal-close:hover {
    scale: 1.3;
    color: #ffffff !important;
}

.naturalink-modal h3 {
    color: #ffffff;
    text-align: center;
}

.naturalink-modal p {
    text-align: center;
    line-height: 1.3;
}

.naturalink-modal label {
    color: #ffffff;
    display: block;
    margin-bottom: 5px;
}

.naturalink-modal input,
.naturalink-modal select {
    width: 100%;
    border-color: #ffffff;
    outline: none;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    padding: 0 16px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.naturalink-booking-note {
    color: #22632b;
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 15px;
    margin-top: 20px;
}

.naturalink-booking-note p {
    margin-bottom: 0;
}

.naturalink-booking-button {
    background: #ffffff !important;
    color: #22632b !important;
    margin: 20px auto;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border: 1px solid #ffffff !important;
}

.naturalink-booking-tabs {
    overflow: hidden;
    margin: 20px auto;
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
}

.naturalink-tablinks {
    background-color: #ffffff !important;
    color: #22632b !important;
    border: 1px solid transparent !important;
    outline: none !important;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

.naturalink-tablinks:hover,
.naturalink-tablinks.active {
    background-color: #22632b !important;
    color: #ffffff !important;
    border: solid 1px #ffffff !important;
}

.naturalink-tabcontent {
    display: none;
    padding: 6px 0;
}

.naturalink-tabcontent.active {
    display: block;
}

.naturalink-group-labels {
    display: flex;
    gap: 20px;
    width: 100%;
}

.naturalink-group-labels>div {
    flex: 1;
}

.naturalink-modal input[type="date"] {
    max-width: 100%;
    width: 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.naturalink-modal input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    padding: 0;
}

.naturalink-modal input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    background: #22632b;
    border-radius: 999px;
}

.naturalink-modal input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    border: solid 1px #22632b;
    cursor: pointer;
    margin-top: -6px;
}

.naturalink-modal input[type="range"]::-moz-range-track {
    height: 8px;
    background: #22632b;
    border-radius: 999px;
}

.naturalink-modal input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: solid 1px #22632b;
    border-radius: 50%;
    cursor: pointer;
}

.naturalink-modal output {
    display: flex;
    justify-content: center;
    font-weight: bold;
}

.naturalink-time-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.naturalink-time-select {
    position: relative;
    flex: 1;
}

.naturalink-time-button {
    height: 40px;
    background: white;
    border: 1px solid #22632b;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #22632b !important;
    cursor: pointer;
    font-size: 18px;
}

.naturalink-time-dropdown {
    position: absolute;
    top: 52px;
    left: 0;
    color: #22632b;
    width: 100%;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
    max-height: 220px;
    overflow: auto;
    display: none;
    z-index: 100;
}

.naturalink-time-select.open .naturalink-time-dropdown {
    display: block;
}

.naturalink-time-option {
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

.naturalink-time-option:hover,
.naturalink-time-option.active {
    background: #22632b;
    color: white;
}

/*
 * Un creneau deja reserve : visible, mais clairement hors d'atteinte.
 * On le laisse affiche plutot que de le retirer, pour que le client
 * comprenne qu'il est pris et n'ait pas l'impression d'un bug.
 */
.naturalink-time-option.naturalink-time-option-prise,
.naturalink-time-option.naturalink-time-option-prise:hover,
.naturalink-time-option.active.naturalink-time-option-prise {
    color: #b9b9b9;
    background: #f4f4f4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.naturalink-creneau-avis {
      margin: 6px 0 0;
    color: red;
    font-size: 18px;
    font-weight: bold;
}

.naturalink-checkbox {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.naturalink-checkbox input {
    width: fit-content !important;
    margin-top: 3px;
}

.naturalink-checkbox p {
    margin: 0;
    text-align: left;
}
.naturalink-checkbox a {
    color: white;
font-weight: bold;
text-decoration: underline;
}
@media screen and (max-width: 560px) {

    .naturalink-booking-tabs {
        gap: 5px;
    }

    .naturalink-tablinks {
        font-size: 14px;
        padding: 12px 10px;
    }

    .naturalink-modal-overlay {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        align-items: flex-start;
    }

   .naturalink-modal {
    padding: 10px;
    padding-top: calc(30px + env(safe-area-inset-top, 0px));
    border: none;
    max-height: calc(100dvh - 30px);
    margin-top: 0;
    box-sizing: border-box;
overflow-x: hidden;
}

    .naturalink-group-labels {
        gap: 10px;
    }

    .naturalink-modal-close {
        top: 5px;
        right: -5px;
    }
}

@media screen and (max-width: 400px) {

    .naturalink-tablinks {
        font-size: 10px;
    }
}

/*
 * Le motif d'un refus de reservation. Il s'affiche en haut de la modale,
 * avant tout le reste : c'est la premiere chose a lire quand on revient
 * sur un formulaire qui n'a pas abouti.
 */
.naturalink-booking-erreur {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #d98b8b;
    background: #fdf1f1;
    color: #8c1f1f;
    font-size: 14px;
    line-height: 1.4;
}

/*
 * Le complement de profil : visible sans etre alarmant. Ce n'est pas une
 * erreur du client, c'est une information qui manque.
 */
.naturalink-booking-complement {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #cfe0cf;

}

.naturalink-booking-complement p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.45;
}

/* =====================================================================
   FIDELITE : catalogue de recompenses et historique
   ===================================================================== */

.naturalink-recompenses {
    color: inherit;
}

.naturalink-recompense-avis {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
}

.naturalink-recompense-avis.ok {
    background: rgba(35, 99, 35, 0.18);
    border: 1px solid #4c9a4c;
}

.naturalink-recompense-avis.ko {
    background: rgba(161, 32, 32, 0.15);
    border: 1px solid #c06868;
}

.naturalink-recompense-solde {
    margin: 0 0 18px;
    font-size: 17px;
}

.naturalink-recompense-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin: 0;
}

/* .naturalink-recompense {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 18px;
    text-align: center;
    border-radius: 14px;
    color: #fff;
} */

.naturalink-recompense-nom {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.naturalink-recompense-cout {
    font-size: 14px;
    opacity: 0.75;
}

.naturalink-recompense button {
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 999px;
    background: #236323;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.naturalink-recompense button:hover:not(:disabled) {
    background: #2d7c2d;
}

/* Hors de portee : visible, mais on ne laisse pas croire qu'on peut cliquer. */
.naturalink-recompense button:disabled {
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    opacity: 0.65;
    cursor: not-allowed;
}

.naturalink-mes-codes {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.naturalink-mes-codes li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 15px;
}

.naturalink-historique {
    list-style: none;
    margin: 0;
    padding: 0;
    color: inherit;
}

.naturalink-historique li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 15px;
}

.naturalink-historique-detail {
    flex: 1;
}

.naturalink-historique-date {
    opacity: 0.7;
    font-size: 14px;
    white-space: nowrap;
}

.naturalink-historique-points {
    font-weight: 700;
    white-space: nowrap;
}

.naturalink-historique-points.plus { color: #6fd06f; }
.naturalink-historique-points.moins { color: #e59a9a; }

.naturalink-historique-vide {
    opacity: 0.8;
}
.naturalink-password-requirement, .naturalink-password-match {
	color: red;
	font-size: 13px;
	margin: -13px 0px 10px 20px;
}

.naturalink-password-requirement.is-valid, .naturalink-password-match.is-match {
	color: #00ff00;
}

/*
 * LE CRENEAU PERDU PENDANT LE PAIEMENT.
 *
 * Ce n'est pas une faute du client : il avait bien choisi un creneau libre.
 * Le ton est donc informatif, pas accusateur -- mais assez visible pour qu'on
 * ne cherche pas pourquoi on est revenu au calendrier.
 */
.naturalink-creneau-perdu {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #d9b26b;
    background: #fdf7ea;
    color: #7a5310;
    font-size: 14px;
    line-height: 1.45;
}

/* ══ FIDELITE : programme, gains, TCE Golf Market ═════════════════════════
 *
 * ⚠ CHAQUE BLOC PORTE SON PROPRE FOND ET SA PROPRE COULEUR. Le fond du site
 * est vert fonce (#22632B) : un bloc qui compterait sur son environnement
 * deviendrait illisible le jour ou on le deplace dans une section claire, et
 * personne ne ferait le lien. Meme lecon que les cartes de recompenses.
 */

.naturalink-programme,
.naturalink-gagner,
.naturalink-market {
    background: #ffffff;
    color: #1d2b1d;
    border-radius: 16px;
    padding: 22px 24px;
    margin: 18px 0;
    font-size: 15px;
    line-height: 1.6;
}

.naturalink-programme-titre,
.naturalink-gagner-titre,
.naturalink-market-titre {
    font-family: "DM Serif Text", Georgia, serif;
    font-style: italic;
    color: #236323;
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 14px;
}

.naturalink-programme p { margin: 0 0 12px; }

.naturalink-programme-bareme,
.naturalink-programme-solde {
    background: #f2f7f2;
    border-left: 4px solid #236323;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    margin: 16px 0 0;
}
.naturalink-programme-solde strong { font-size: 22px; color: #236323; }
.naturalink-programme-invite { color: #5b6b5b; }

/* ── Gagner des points ── */
.naturalink-gagner-liste { list-style: none; margin: 0 0 16px; padding: 0; }
.naturalink-gagner-liste li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #e6ece6;
}
.naturalink-gagner-liste li:last-child { border-bottom: 0; }
.naturalink-gagner-combien { color: #236323; font-weight: 700; white-space: nowrap; }

.naturalink-gagner-parrain {
    background: #f2f7f2;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 12px;
}
.naturalink-gagner-code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 19px;
    letter-spacing: .12em;
    color: #14401a;
}

.naturalink-gagner-saisie { display: flex; gap: 8px; flex-wrap: wrap; }
.naturalink-gagner-saisie input {
    flex: 1 1 200px;
    border: 1px solid #cfdccf;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 15px;
    text-transform: uppercase;
}
.naturalink-gagner-saisie button {
    background: #236323;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 14px;
    cursor: pointer;
}
.naturalink-gagner-saisie button:hover { background: #2f8a2f; }
.naturalink-gagner-note { color: #5b6b5b; font-size: 13px; margin: 8px 0 0; }
.naturalink-gagner-avis { border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; }
.naturalink-gagner-avis.ok { background: #eaf4ea; color: #1a5c1a; }
.naturalink-gagner-avis.ko { background: #fdf1f1; color: #8c1f1f; }

/* ── Le market ──
 * Le carrousel est un simple defilement horizontal : pas de librairie, pas de
 * script. Il marche au doigt sur telephone et a la molette sur ordinateur, et
 * il ne casse pas le jour ou une mise a jour change une dependance.
 */
.naturalink-market-solde { margin: 0 0 14px; }
.naturalink-market-solde strong { color: #236323; font-size: 20px; }

.naturalink-market-piste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}
.naturalink-market-carrousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
}
.naturalink-market-carrousel .naturalink-market-carte {
    flex: 0 0 clamp(220px, 31%, 300px);
    scroll-snap-align: start;
}

.naturalink-market-carte {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: #f7faf7;
    border: 1px solid #dbe6db;
    border-radius: 12px;
    padding: 14px 16px;
}
.naturalink-market-partenaire { background: #fbf8f1; border-color: #e6dcc4; }

.naturalink-market-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7a6b;
}
.naturalink-market-nom { font-weight: 700; line-height: 1.35; }
.naturalink-market-cout { color: #236323; font-weight: 700; }
.naturalink-market-note { color: #6b7a6b; font-size: 13px; }

.naturalink-market-bouton {
    align-self: flex-start;
    background: #236323;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
}
.naturalink-market-bouton:hover { background: #2f8a2f; }

.naturalink-market-avis { border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; }
.naturalink-market-avis.ok { background: #eaf4ea; color: #1a5c1a; }
.naturalink-market-avis.ko { background: #fdf1f1; color: #8c1f1f; }

.naturalink-market-tout { margin: 14px 0 0; }
.naturalink-market-tout a { color: #236323; font-weight: 700; }

/*
 * ⛔ UNE COULEUR HERITEE EST UNE COULEUR PERDUE.
 *
 * Le theme du site ecrit en BLANC (le fond est vert fonce). Poser `color` sur
 * le seul conteneur ne suffit pas : ses regles a lui sont plus specifiques, et
 * le solde s'affichait en blanc SUR BLANC -- invisible, sans que rien ne
 * signale l'erreur. Chaque texte de ces blocs impose donc sa couleur.
 */
.naturalink-programme, .naturalink-programme p, .naturalink-programme li,
.naturalink-gagner, .naturalink-gagner p, .naturalink-gagner li, .naturalink-gagner label,
.naturalink-market, .naturalink-market p, .naturalink-market span,
.naturalink-market-solde, .naturalink-programme-solde, .naturalink-programme-bareme {
    color: #1d2b1d;
}

.naturalink-programme-solde strong,
.naturalink-market-solde strong,
.naturalink-market-cout,
.naturalink-gagner-combien,
.naturalink-gagner-code { color: #236323; }

.naturalink-market-type, .naturalink-market-note,
.naturalink-gagner-note { color: #6b7a6b; }

.naturalink-market-bouton, .naturalink-gagner-saisie button { color: #ffffff; }

.naturalink-programme-titre, .naturalink-gagner-titre, .naturalink-market-titre { color: #236323; }

/* ==========================================================================
   Carrousel récompenses
   Toutes les règles sont sous .naturalink-carousel.is-actif : cette classe
   est ajoutée par le JS. Sans JS, la liste reste une liste verticale
   normale, entièrement utilisable.
   ========================================================================== */

.naturalink-carousel.is-actif {
  --nl-track-h: 90px;          /* recalculé par le JS */
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  /* place au-dessus/en dessous pour la carte voisine + la flèche */
  padding-block: calc(var(--nl-track-h) + 62px);

  border-radius: 12px;
}

/* le formulaire devient la piste */
.naturalink-carousel.is-actif .naturalink-recompense-liste {
  position: relative;
  width: 100%;
  height: var(--nl-track-h);
  margin: 0;
}

/* ---------- MOBILE : vertical, cartes larges ---------- */

.naturalink-carousel.is-actif .naturalink-recompense {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  /* padding: 0 12px; */
  filter: drop-shadow(0 2px 2px #555);
  will-change: transform, opacity;
  transition: transform .6s ease, opacity .6s ease;
  /* état par défaut : hors champ, en attendant que le JS attribue data-pos */
  transform: translateY(-50%) translateY(100%) scale(.5);
  opacity: 0;
  visibility: hidden;
color: #22632b;

}

/* --- opacité / visibilité / empilement (communs aux deux orientations) --- */
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="0"] {
  opacity: 1;
  visibility: visible;
  z-index: 3;
}
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="-1"],
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="1"] {
  opacity: .4;
  visibility: visible;
  z-index: 2;
  cursor: pointer;             /* cliquer une voisine la met au centre */
}
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="-2"],
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="2"] {
  opacity: 0;
  visibility: visible;
}
/* garées : pas de transition, le bouclage ne traverse donc jamais l'écran */
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="-3"],
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="3"] {
  transition: none;
  pointer-events: none;
}

/* --- déplacement vertical --- */
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="0"]  { transform: translateY(-50%) translateY(0)     scale(1);  }
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="-1"] { transform: translateY(-50%) translateY(-65%) scale(.7); }
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="1"]  { transform: translateY(-50%) translateY(75%)  scale(.7); }
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="-2"],
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="-3"] { transform: translateY(-50%) translateY(-100%) scale(.5); }
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="2"],
.naturalink-carousel.is-actif .naturalink-recompense[data-pos="3"]  { transform: translateY(-50%) translateY(100%)  scale(.5); }

/* seule la carte active est cliquable ; les voisines servent de raccourci */
.naturalink-carousel.is-actif .naturalink-recompense:not([data-pos="0"]) button {
  pointer-events: none;
}

/* ---------- pastille + corps ---------- */

.naturalink-carousel.is-actif .naturalink-recompense-icone {
  border-radius: 50%;
  background-color: #22632b;
  width: 90px;
  height: 90px;
  padding: 14px;
  position: relative;
  z-index: 1;
  margin-right: -45px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
border: solid 1px white;
}
.naturalink-carousel.is-actif .naturalink-recompense-icone svg {
  width: 50px;
  height: 50px;
  color: #ffffff;
}

.naturalink-carousel.is-actif .naturalink-recompense-corps {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  padding: 16px 20px 16px 50px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}


.naturalink-carousel.is-actif .naturalink-recompense-cout {
  font-size: 15px;
  color: #555;
}
.naturalink-carousel.is-actif .naturalink-recompense button {
  margin-top: 4px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: #0b7285;
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.naturalink-carousel.is-actif .naturalink-recompense button[disabled] {
  background: #c3ccd0;
  cursor: not-allowed;
}

/* ---------- flèches (injectées par le JS) ---------- */

.naturalink-carousel__nav {
  position: absolute;
  left: 50%;
  z-index: 4;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.naturalink-carousel__nav svg { width: 22px; height: 22px; }
.naturalink-carousel__nav:hover { background: rgba(255, 255, 255, .3); }
.naturalink-carousel__nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.naturalink-carousel__nav--prev { top: 70px;    transform: translateX(-50%); }
.naturalink-carousel__nav--next { bottom: 60px; transform: translateX(-50%); }
.naturalink-carousel__nav--next svg { transform: rotate(180deg); }
.naturalink-carousel__nav--prev:active { transform: translateX(-50%) translateY(-3px); }
.naturalink-carousel__nav--next:active { transform: translateX(-50%) translateY(3px); }

/* ==========================================================================
   DESKTOP : horizontal, cartes carrées
   ========================================================================== */

@media (min-width: 768px) {

  .naturalink-carousel.is-actif {
    max-width: 900px;
    padding-block: 32px;
    padding-inline: 62px;
  }

  .naturalink-carousel.is-actif .naturalink-recompense {
    left: 50%;
    width: 240px;
    flex-direction: column;
    padding: 0;
  }

  /* --- déplacement horizontal --- */
  .naturalink-carousel.is-actif .naturalink-recompense[data-pos="0"]  { transform: translate(-50%, -50%) translateX(0)     scale(1);  }
  .naturalink-carousel.is-actif .naturalink-recompense[data-pos="-1"] { transform: translate(-50%, -50%) translateX(-90%) scale(.7); }
  .naturalink-carousel.is-actif .naturalink-recompense[data-pos="1"]  { transform: translate(-50%, -50%) translateX(90%)  scale(.7); }
  .naturalink-carousel.is-actif .naturalink-recompense[data-pos="-2"],
  .naturalink-carousel.is-actif .naturalink-recompense[data-pos="-3"] { transform: translate(-50%, -50%) translateX(-105%) scale(.5); }
  .naturalink-carousel.is-actif .naturalink-recompense[data-pos="2"],
  .naturalink-carousel.is-actif .naturalink-recompense[data-pos="3"]  { transform: translate(-50%, -50%) translateX(105%)  scale(.5); }

  /* la pastille chevauche le haut de la carte au lieu du côté gauche */
  .naturalink-carousel.is-actif .naturalink-recompense-icone {
    margin-right: 0;
    margin-bottom: -45px;
  }

  .naturalink-carousel.is-actif .naturalink-recompense-corps {
    height: 240px;
    padding: 62px 20px 24px;
    border-radius: 12px;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* flèches sur les côtés */
  .naturalink-carousel__nav--prev,
  .naturalink-carousel__nav--next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .naturalink-carousel__nav--prev { left: 8px;  right: auto; }
  .naturalink-carousel__nav--next { left: auto; right: 8px; }

  .naturalink-carousel__nav--prev svg { transform: rotate(-90deg); }
  .naturalink-carousel__nav--next svg { transform: rotate(90deg); }

  .naturalink-carousel__nav--prev:active { transform: translateY(-50%) translateX(-3px); }
  .naturalink-carousel__nav--next:active { transform: translateY(-50%) translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .naturalink-carousel.is-actif .naturalink-recompense { transition: none; }
}
@media screen and (min-width: 768px) {
.naturalink-recompenses {

    max-width: calc(100% - 95px);
    margin: auto;
}
}
@media screen and (min-width: 600px) and (max-width: 700px) {
    .naturalink-carousel.is-actif {
        max-width: 400px;
    }
}
@media screen and (max-width: 700px) {
.naturalink-carousel.is-actif .naturalink-recompense-icone {

    width: 60px;
    height: 60px;
    padding: 14px;
}
}
/*
 * L'AVIS QUI PORTE SUR LE JOUR, ET NON SUR UNE HEURE : jour ferme, compte
 * suspendu, quota de la semaine atteint.
 *
 * ⚠ Il est pose AVANT le selecteur d'heures, la ou le regard va avant de
 * cliquer. L'avertissement rouge de `.naturalink-creneau-avis`, lui, vient
 * APRES : il repond a un choix deja fait. Les deux ne disent pas la meme
 * chose et ne doivent pas se ressembler.
 */
.naturalink-jour-avis {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-left: 3px solid #d9a406;
    background: #fff8e5;
    color: #6b5200;
    font-size: 15px;
    line-height: 1.35;
}