/* -------------------------------------------------
	
	01 . IMPORT CSS + FONTS
	02 . BASE
	03 . HERO
	04 . FAQ
	05 . NOUS REJOINDRE
	06 . TEMOIGNAGES
	07 . ZONES
	08 . CLEAR
	09 . VIDEO
	10 . CONTACT
	11 . EN CONSTRUCTION
	12 . BILANS GRATUITS
	13 . PAGES STATIQUES
	14 . PRENDRE RENDEZ-VOUS
	
------------------------------------------------- */

/* ////////////////////////////////////////////////////////////////////////////

    01 . IMPORT CSS + FONTS

//////////////////////////////////////////////////////////////////////////// */

@import url("libs/magnific-popup.css");
@import url("libs/kenburns.css");

@import url("interface.css");
@import url("form.css");
@import url("blog.css");
@import url("about.css");
@import url("zone.css");
@import url("centres.css");
@import url("tarifs.css");
@import url("prestations.css");
@import url("ajustment.css");

:root {
    --site-width: 1530px;

    --font-text: "National Park", sans-serif;
    --font-title-1: "Cormorant Garamond", serif;
    --font-title-2: "Zalando Sans SemiExpanded", sans-serif;

    --color-dark: #141414; /* rgba(20,20,20,1); */
    --color-light: #fff; /* rgba(255,255,255,1); */

    --color-primary-1: #eb5a2e; /* rgba(235,90,46,1); */
    --color-primary-2: #fc95b9; /* rgba(252,149,185,1); */
    --color-primary-3: #47c1a0; /* rgba(71,193,160,1); */

    --color-grey-dark: #3d3d3d; /* rgba(61,61,61,1); */
    --color-grey: #707070; /* rgba(112,112,112,1); */
    --color-grey-light: #a3a3a3; /* rgba(163,163,1638,1); */
    --color-grey-xlight: #e0e0e0; /* rgba(224,224,224,1); */

    --line-dark: rgba(20, 20, 20, 0.2);
    --line-light: rgba(255, 255, 255, 0.2);
    --line-form: rgba(20, 20, 20, 0.2);

    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-full: 2em;
}

/* ////////////////////////////////////////////////////////////////////////////

    02 . BASE

//////////////////////////////////////////////////////////////////////////// */

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--color-light);
    color: var(--color-dark);
    font-family: var(--font-text);
    font-size: 18px;
    line-height: 1.5;
    overflow-x: hidden !important;
}
body.open {
    /* Empêche la page de fond de défiler quand le menu est ouvert.
       `touch-action: none` a été retiré : posé ici, il interdisait aussi le
       défilement tactile À L'INTÉRIEUR du menu (touch-action d'un ancêtre
       s'impose aux descendants, un enfant ne peut pas le ré-autoriser). Le
       blocage du fond est désormais porté par .nav-overlay, et .nav gère son
       propre défilement. */
    overflow-y: hidden !important;
}
body::after {
    content: "";
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.25s,
        visibility 0.25s;
}
body.overlay::after {
    opacity: 1;
    visibility: visible;
}

/* SCROLLBAR */
body::-webkit-scrollbar {
    width: 0;
    background: transparent;
}
body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0;
}

/* LIENS */
a {
    color: var(--color-dark);
    text-decoration: none;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent !important;
}
.no-touch a:hover {
    color: var(--color-dark);
    outline: 0;
    text-decoration: none;
}

a[href^="tel"] {
    color: inherit !important;
    text-decoration: inherit !important;
    font-size: inherit !important;
    font-style: inherit !important;
    font-weight: inherit !important;
}

/* TEXTE */
br {
    font-size: 0;
    line-height: 0;
}
strong,
b {
    font-weight: 600;
}

/* IMAGE */
img {
    position: relative;
    max-width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
}

/* LISTES */
ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* PARAGRAPHES */
p {
    margin: 0 0 10px 0;
    padding: 0;
}
p:last-child {
    margin: 0;
}

/* TITRES */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-text);
    line-height: 1;
    margin: 0;
    padding: 0;
    font-weight: normal;
}

/* PADDING */
.no-padding {
    padding: 0;
}

/* ////////////////////////////////////////////////////////////////////////////

	03 . HERO

//////////////////////////////////////////////////////////////////////////// */

.hero {
    position: relative;
    z-index: 0;
    overflow: hidden;
    width: 100%;
    height: calc(100vh);
    background-color: var(--color-light);
}
.hero-inner {
    position: relative;
    display: flex;
    width: calc(100%);
    height: calc(100%);
}
.hero-inner::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/interface/ray-01.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.08;
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #fff 15%);
    mask-image: linear-gradient(to top, transparent 0%, #fff 15%);
}
.hero-inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

/* ----- caption ----- */
.hero_caption {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    /* Sans box-sizing, width:100% + padding latéral de 30px donnait une boîte
       60px PLUS LARGE que le viewport (marge droite négative auto), et le texte
       était rogné à droite. Invisible tant que les titres tenaient sur des lignes
       courtes forcées par des <br>, visible dès qu'un titre se met à wraper. */
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    max-width: calc(var(--site-width) + 30px);
    margin: 0 auto;
    padding: 75px 30px 0 30px;
}
.hero_caption-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 15px;
    width: 100%;
    color: var(--color-light);
    /* transform: skewY(-2.5deg); */
}
.hero_caption h1 {
    font-family: var(--font-title-2);
    font-size: clamp(2.75rem, calc(3.5vw + 1.5rem), 6.25rem);
    line-height: 1;
    text-transform: uppercase;
    font-weight: 300;
}
.hero_caption h1 strong {
    font-weight: 700;
}
.hero_caption h2 {
    font-family: var(--font-title-2);
    font-size: clamp(0.75rem, calc(1vw + 1rem), 2.5rem);
    line-height: 1.25;
    font-weight: 300;
    max-width: 1050px;
    margin: 0 auto;
}
.hero_caption h2 strong {
    font-weight: 600;
}

/* ----- cta ----- */
.hero_cta {
    /* min-height: 450px;
    max-height: 550px; */
    /* display: flex;
    flex-direction: column;
    align-self: flex-start; */
    margin: 15px auto 0 auto;
    background-color: rgba(0, 0, 0, 0.65);
    color: var(--color-light);
    font-size: clamp(0.8rem, calc(0.65vw + 0.65rem), 1.45rem);
    line-height: 1.25;
    padding: 10px;
    border-radius: var(--radius-md);
}
.hero_cta strong {
    text-transform: uppercase;
    color: var(--color-primary-1);
}

/* ----- image ----- */
.hero_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}
.hero_image img {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ----- hero half ----- */
.hero.half {
    height: 65vh;
    min-height: 450px;
    max-height: 550px;
    background-color: var(--color-light);
}
.hero.half .hero_caption {
    background-color: transparent;
    /* padding: 0 30px 50px 30px; */
    /* align-items: flex-end; */
}

/* ----- hero light ----- */
.hero.light {
    height: auto;
    background-color: var(--color-light);
    padding: 250px 0 0 0;
}
.hero.light .hero-inner::before,
.hero.light .hero-inner::after {
    display: none;
}
.hero.light .hero_caption {
    background-color: transparent;
    padding: 0 30px 0 30px;
    align-items: flex-end;
}
.hero.light .hero_caption-inner {
    color: var(--color-dark);
    /* text-align: left; */
}
.hero.light .hero_caption h1 {
    font-size: 72px;
}

/* ----- hero presta ----- */
.hero.presta {
    height: 75vh;
    min-height: 450px;
    max-height: 600px;
    background-color: var(--color-light);
}
.hero.presta .hero_caption {
    background-color: transparent;
    /* padding: 0 30px 50px 30px; */
    /* align-items: flex-end; */
}

/* ----- hero slider ----- */
/* Fond sombre : évite le flash blanc pendant le fondu entre 2 slides. */
.hero.hero_slider {
    background-color: var(--color-dark);
    /* 100svh : avec 100vh, la barre d'URL mobile pousse le bas du hero
       (pagination et flèches) hors du viewport visible. Le fallback 100vh reste
       hérité de .hero pour les navigateurs sans unités dynamiques. */
    height: 100svh;
}
.swiper_hero {
    width: 100%;
    height: 100%;
}
.swiper_hero .swiper-slide {
    overflow: hidden;
    height: 100%;
}
.swiper_hero .swiper-slide .hero-inner {
    width: 100%;
    height: 100%;
}

/* SWIPER -- pagination */
.swiper_hero > .swiper-pagination {
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.swiper_hero > .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 2em;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    opacity: 1;
    transition: all 0.3s;
}
.swiper_hero > .swiper-pagination .swiper-pagination-bullet-active {
    width: 24px;
    height: 8px;
    background: var(--color-primary-1);
}
.swiper_hero
    > .swiper-pagination.swiper-pagination-bullets
    .swiper-pagination-bullet {
    margin: 0 3px;
}

/* SWIPER -- flèches latérales (affordance « swipe ») */
/* z-index 3 : au-dessus de .hero-inner::before/::after et de .hero_caption (z-index 1)
   et de la pagination (z-index 2). */
.swiper_hero .hero_slider-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(20, 20, 20, 0.35);
    color: var(--color-light);
    cursor: pointer;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.3s;
}
.swiper_hero .hero_slider-arrow-prev {
    left: 20px;
}
.swiper_hero .hero_slider-arrow-next {
    right: 20px;
}
.no-touch .swiper_hero .hero_slider-arrow:hover {
    background-color: var(--color-primary-1);
}
.swiper_hero .hero_slider-arrow i {
    display: block;
    font-size: 34px;
    line-height: 1;
}
/* Le « nudge » horizontal indique le sens du swipe. */
.swiper_hero .hero_slider-arrow-prev i {
    animation: heroNudgeLeft 1.8s ease-in-out infinite;
}
.swiper_hero .hero_slider-arrow-next i {
    animation: heroNudgeRight 1.8s ease-in-out infinite;
}
@keyframes heroNudgeLeft {
    0%,
    60%,
    100% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(-5px);
    }
}
@keyframes heroNudgeRight {
    0%,
    60%,
    100% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(5px);
    }
}
/* Swiper ajoute cette classe quand il n'y a qu'un seul visuel. */
.swiper_hero .hero_slider-arrow.swiper-button-lock {
    display: none;
}

@media only screen and (max-width: 992px) {
    .swiper_hero > .swiper-pagination {
        bottom: 20px;
    }
    /* Sur mobile on garde le centrage vertical (aucune dépendance au bord bas,
       donc aucun risque de passer sous la barre d'URL) et on colle les flèches
       au bord en les réduisant, pour n'empiéter qu'à la marge sur le titre
       centré (padding latéral de 30px sur .hero_caption).
       Les bulles flottantes WhatsApp / retour-en-haut vivent en bas d'écran :
       pas de conflit de zone de tap. */
    .swiper_hero .hero_slider-arrow {
        width: 34px;
        height: 34px;
    }
    .swiper_hero .hero_slider-arrow i {
        font-size: 24px;
    }
    .swiper_hero .hero_slider-arrow-prev {
        left: 6px;
    }
    .swiper_hero .hero_slider-arrow-next {
        right: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .swiper_hero .hero_slider-arrow-prev i,
    .swiper_hero .hero_slider-arrow-next i {
        animation: none;
    }
}

/* ////////////////////////////////////////////////////////////////////////////

	04 . FAQ

//////////////////////////////////////////////////////////////////////////// */

.accordion-wrap {
    margin: 0 0 75px 0;
}
.accordion-wrap:last-child {
    margin: 0;
}
.accordion-wrap h2 {
    font-family: var(--font-title-2);
    font-size: clamp(24px, 4vw, 30px);
    line-height: 1.05;
    font-weight: 600;
    color: var(--color-primary-1);
    margin: 0 0 25px 0;
}
.accordion-list {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    list-style: none;
}
.accordion-list li {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    border-bottom: rgba(138, 146, 149, 0.25) solid 1px;
    padding: 15px 0;
    margin: 0 0 0 0;
}
.accordion-list li:last-child {
    margin: 0;
}
.accordion-list li:first-child {
    border-top: rgba(138, 146, 149, 0.25) solid 1px;
}
.accordion-list li.active {
    display: block;
    padding: 15px 0 25px 0;
}
.accordion-list li h3 {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
    cursor: pointer;
}
.accordion-list li h3 span {
    padding: 0 20px 0 0;
    flex: 1;
}
.accordion-list li h3:after {
    content: "\f30f";
    font-family: "Ionicons";
    position: relative;
    margin-left: auto;
    color: var(--color-primary-1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition:
        transform 0.25s,
        color 0.25s;
    font-size: 22px;
}
.no-touch .accordion-list li:hover h3:after,
.accordion-list li.active h3:after {
    transform: rotate(90deg);
    color: var(--color-primary-1);
}

.accordion-list li div.answer {
    position: relative;
    display: none;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10px 56px 0 0;
    color: var(--color-grey-dark);
}
.accordion-list li div.answer p {
    position: relative;
    display: block;
}
/* .accordion-list li div.answer p:first-child {
    padding-top: 10px;
} */

@media only screen and (max-width: 992px) {
    .accordion-wrap {
        margin: 0 0 50px 0;
    }
    .accordion-list li h3 {
        font-size: 17px;
        line-height: 1.2;
    }
    .accordion-list li div.answer {
        margin: 0;
        padding: 10px 0 0 0;
    }
}

/* ////////////////////////////////////////////////////////////////////////////

	05 . NOUS REJOINDRE

//////////////////////////////////////////////////////////////////////////// */

/* -------------------------------------------
    INTRO 
------------------------------------------- */
.join_intro {
}
.join_intro-wrap {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.join_intro-title h2 {
    display: inline-flex;
    font-family: var(--font-title-2);
    font-size: 42px;
    line-height: 1.05;
    font-weight: 600;
}
.join_intro-desc {
    flex: 1;
}
.join_intro-desc p {
    font-size: 24px;
    line-height: 1.4;
    color: var(--color-grey-dark);
}
.join_intro-desc p:last-child {
    margin: 0;
}
.join_intro-claim {
    transform: skewY(-2.5deg);
    margin: 25px 0 0 0;
}
.join_intro-claim p.lead {
    display: inline;
    background-color: var(--color-primary-1);
    box-shadow:
        10px 0 0 var(--color-primary-1),
        -10px 0 0 var(--color-primary-1);
    box-decoration-break: clone;
    padding: 5px 0 6px 0;
    font-family: var(--font-title-2);
    font-size: 26px;
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-light);
    border-radius: var(--radius-sm);
}

@media only screen and (max-width: 992px) {
    .join_intro-wrap {
        flex-direction: column;
        gap: 0;
    }

    .join_intro-title {
        margin: 0 0 50px 0;
    }

    .join_intro-title h2 {
        font-size: 40px;
    }

    .join_intro-desc {
        font-size: 22px;
    }

    .join_intro-claim {
        margin: 50px 0 0 0;
        align-self: flex-start;
        font-size: 15px;
        max-width: 100%;
    }
}

/* -------------------------------------------
    GALLERY 
------------------------------------------- */
.join_gallery {
    position: relative;
    background-color: var(--color-light);
}
.join_gallery.fixed::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: rgba(235, 90, 46, 0.05);
}

/* MOVING GALLERY */
.fw-gallery .wrapper-gallery {
    display: inline-flex;
    align-items: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
    clear: both;
}
.moving-gallery {
    display: flex;
}
.fixed-gallery {
    display: flex;
    justify-content: center;
}
.wrapper-gallery li {
    box-sizing: border-box;
    list-style: none;
    overflow: hidden;
    width: 20vw !important;
    margin: 0 5px;
}
.wrapper-gallery li:nth-child(odd) {
    flex: none;
    width: 35vw !important;
}
.wrapper-gallery li img {
    display: flex;
    width: 100%;
    height: 50vh;
    overflow: hidden;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

@media only screen and (max-width: 992px) {
    .wrapper-gallery li {
        width: 45vw !important;
    }
    .wrapper-gallery li:nth-child(odd) {
        width: 75vw !important;
    }
    .wrapper-gallery li img {
        height: 30vh;
    }
}

/* -------------------------------------------
    GRID 
------------------------------------------- */
.grid_join {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 0;
}
.item_join {
    position: relative;
    overflow: hidden;
    display: flex;
    padding: 45px 0;
    border-bottom: rgba(0, 0, 0, 0.1) solid 1px;
    transition:
        color 0.25s,
        background-color 0.25s;
}
.item_join:first-child {
    border-top: rgba(0, 0, 0, 0.1) solid 1px;
}
.no-touch .grid_join:hover > div {
    color: var(--color-dark);
}
.no-touch .grid_join:hover > div:hover {
    color: var(--color-primary-1);
    background-color: rgba(0, 0, 0, 0.02);
}
.item_join a {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.item_join-caption {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 75px;
    align-items: center;
}

.item_join-caption::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    box-sizing: border-box;
    font-family: "Ionicons";
    content: "\f30f";
    font-size: 32px;
    color: var(--color-dark);
    opacity: 1;
    width: auto;
    height: inherit !important;
    transition: color 0.25s;
}
.no-touch .item_join:hover .item_join-caption::after {
    color: var(--color-primary-1);
}
.item_join-caption h3 {
    font-family: var(--font-title-2);
    font-size: 28px;
    line-height: 1.1;
    font-weight: 500;
    grid-column: span 2 / span 2;
    margin-left: 15px;
}
.item_join-caption span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    line-height: 1;
    color: var(--color-grey);
    opacity: 0.8;
    border-left: rgba(0, 0, 0, 0.1) solid 1px;
    padding: 15px 0 15px 25px;
}
.item_join-caption span:last-child::before {
    position: relative;
    font-family: "Ionicons";
    content: "\f3a3";
    font-size: 85%;
}

@media only screen and (max-width: 992px) {
    .item_join {
        padding: 25px 0;
    }
    .item_join-caption::after {
        font-size: 24px;
        right: 0;
    }
    .item_join-caption {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 10px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .item_join-caption h3 {
        font-size: 20px;
        margin-left: 0;
        flex-basis: 100%;
        padding: 0 60px 0 0;
    }
    .item_join-caption span {
        font-size: 14px;
        border-left: none;
        padding: 0 10px 0 0;
    }
}

/* ////////////////////////////////////////////////////////////////////////////

	06 . TEMOIGNAGES

//////////////////////////////////////////////////////////////////////////// */

.avis {
    background-color: rgba(252, 149, 185, 0.1);
}
.avis .section_title h2 strong {
    color: rgba(252, 149, 185, 1);
}

/* SWIPER */
.swiper_avis .swiper-slide {
    display: flex;
    height: auto;
}
.swiper_avis-caption {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    background-color: var(--color-light);
    border-radius: var(--radius-md);
    padding: 30px;
}
.swiper_avis-note {
    --percent: calc(var(--rating) / 5 * 100%);
    display: block;
    font-size: 24px;
    line-height: 1;
}
.swiper_avis-note::before {
    font-family: "Ionicons";
    content: "\f4b3\f4b3\f4b3\f4b3\f4b3";
    letter-spacing: 2px;
    background: linear-gradient(
        90deg,
        var(--color-primary-2) var(--percent),
        var(--color-grey-xlight) var(--percent)
    );
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.swiper_avis-desc {
    font-size: 16px;
    line-height: 1.5;
    height: 100%;
    color: var(--color-grey-dark);
}
.swiper_avis-author {
    font-size: 15px;
    line-height: 1.51;
    font-weight: 500;
}

/* PAGINATION */
.swiper_avis .swiper-pagination {
    z-index: 1;
    display: none;
    justify-content: center;
    align-items: flex-end;
}
.swiper_avis .swiper-pagination.swiper-pagination {
    position: relative;
    margin-top: 25px;
    bottom: 0;
}
.swiper_avis .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 2em;
    background: rgba(20, 20, 20, 0.24);
    border: none;
    opacity: 0.5;
    transition: all 0.3s;
}
.swiper_avis .swiper-pagination .swiper-pagination-bullet-active {
    width: 24px;
    height: 8px;
    opacity: 1;
    background: rgba(20, 20, 20, 0.48);
}
.swiper_avis
    .swiper-pagination.swiper-pagination-bullets
    .swiper-pagination-bullet {
    margin: 0 2px;
}

@media only screen and (max-width: 1200px) {
    .swiper_avis .swiper-pagination {
        display: flex;
    }
}

@media only screen and (max-width: 992px) {
    .avis-title {
        font-size: 26px;
        margin-bottom: 25px;
        text-align: center;
    }
    .swiper_avis-header span {
        font-size: 18px;
        line-height: 1.3;
    }
    .swiper_avis-note {
        font-size: 15px;
        margin: 0 0 0 15px;
    }
}

/* ////////////////////////////////////////////////////////////////////////////

	07 . ZONES

//////////////////////////////////////////////////////////////////////////// */

.zones_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: max-content;
    gap: 5px;
}
.zones_item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.zones_item a {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.zones_item-img {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 76.25%;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.zones_item-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        0deg,
        rgba(20, 20, 20, 0.3) 0%,
        rgba(20, 20, 20, 0.15) 50%,
        rgba(20, 20, 20, 0) 100%
    );
}
.zones_item-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 0.5s;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.no-touch .zones_item:hover .zones_item-img img {
    transform: scale(1.1);
}
.zones_item-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 25px 50px 25px 25px;
    font-size: 24px;
    line-height: 1;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-light);
}
.zones_item-caption strong {
    display: block;
    font-family: var(--font-title-2);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 3px 0;
}

@media only screen and (max-width: 1200px) {
    .zones_wrap {
        grid-template-columns: repeat(2, 1fr);
    }
    .zones_item:nth-child(n + 1) {
        margin: 0;
    }
    .zones_item-img {
        padding-top: 110%;
    }
    .zones_item-caption {
        padding: 15px;
        font-size: 16px;
    }
    .zones_item-caption strong {
        font-size: 22px;
        line-height: 0.9;
    }
}

/* ////////////////////////////////////////////////////////////////////////////

	08 . CLEAR

//////////////////////////////////////////////////////////////////////////// */

/* Conservée volontairement : plus aucun template du thème n'utilise .clear depuis
   la suppression du bloc d'accroche, mais le nom est générique et peut encore être
   posé depuis un contenu richeditor du backoffice. À supprimer si nettoyage complet. */
.clear {
    /* background-color: rgba(235,90,46,.05); */
    background-color: rgba(235, 90, 46, 0.1);
}

/* Les règles .clear_wrap / .clear_block* ont été supprimées avec le bloc d'accroche
   de la page d'accueil : plus aucun template du thème n'utilisait ces classes. */

/* La media query 450px supprimée avec ces règles contenait aussi le centrage des
   CTA du menu mobile (.header_wrap-cta), utilisé sur toutes les pages : on le
   conserve ici pour ne pas régresser le header. La largeur des boutons (80 %)
   reste définie dans ajustment.css. */
@media screen and (max-width: 450px) {
    .header_wrap-cta.open {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
}

/* ////////////////////////////////////////////////////////////////////////////

	09 . VIDEO

//////////////////////////////////////////////////////////////////////////// */

.video_block {
    background-color: rgba(71, 193, 160, 0.1);
}
.video_block .section_title h2 strong {
    color: rgba(71, 193, 160, 1);
}

.video_block .section_cta {
    margin: 50px 0 0 0;
}

.swiper-video .swiper-slide {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.swiper-video .swiper-slide::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 8px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Ionicons";
    content: "\f215";
    font-size: 48px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.75);
    background-color: rgba(0, 0, 0, 0.15);
    transition:
        background-color 0.25s,
        color 0.25s;
}
.swiper-video .swiper-slide:hover::after {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(0, 0, 0, 0.05);
}
.swiper-video .swiper-slide video {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

@media only screen and (max-width: 992px) {
    .swiper-video .swiper-slide video {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: var(--radius-lg);
    }
}

.swiper-video-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 50px;
}

@media only screen and (max-width: 992px) {
    .swiper-video-nav {
        margin-top: 35px;
    }
}

/* SWIPER -- navigation */
.swiper-video-nav .swiper-button-next,
.swiper-video-nav .swiper-button-prev {
    position: relative;
    display: flex;
    top: 0;
    height: 30px;
    width: 30px;
    background-color: transparent;
}
.swiper-video-nav .swiper-button-prev {
    left: auto;
    justify-content: center;
}
.swiper-video-nav .swiper-button-next {
    right: auto;
    justify-content: center;
}
.swiper-video-nav .swiper-button-prev::after,
.swiper-video-nav .swiper-button-next::after {
    content: "";
    box-sizing: border-box;
    font-family: "Ionicons";
    font-size: 40px;
    color: var(--color-primary-3);
    opacity: 1;
    width: auto;
    height: inherit !important;
    display: flex;
    align-items: center;
}
.swiper-video-nav .swiper-button-prev::after {
    content: "\f2ca";
}
.swiper-video-nav .swiper-button-next::after {
    content: "\f30f";
}
.swiper-video-nav .swiper-button-prev.swiper-button-disabled,
.swiper-video-nav .swiper-button-next.swiper-button-disabled {
    opacity: 1;
    /* display: flex; */
}
.swiper-video-nav .swiper-button-prev.swiper-button-disabled::after,
.swiper-video-nav .swiper-button-next.swiper-button-disabled::after {
    opacity: 0.35;
}

/* SWIPER -- pagination */
.swiper-video-nav .swiper-pagination {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 25px;
}
.swiper-video-nav .swiper-pagination.swiper-pagination {
    position: relative;
    margin-top: 0;
    bottom: 12px;
}
.swiper-video-nav .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 50%;
    background: var(--color-grey-light);
    border: none;
    opacity: 0.5;
    transition: all 0.3s;
}
.swiper-video-nav .swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-primary-3);
}
.swiper-video-nav
    .swiper-pagination.swiper-pagination-bullets
    .swiper-pagination-bullet {
    margin: 0 2px;
}
.swiper-video-nav .swiper-pagination.swiper-pagination-hidden {
    opacity: 0 !important;
    height: 0 !important;
    display: none !important;
    margin: 0 !important;
}

@media only screen and (max-width: 992px) {
    /* .swiper-video-nav .swiper-pagination {
        display: flex;
    } */
}

/* ////////////////////////////////////////////////////////////////////////////

	10 . CONTACT

//////////////////////////////////////////////////////////////////////////// */

/* -------------------------------------------
    BLOCK
------------------------------------------- */
.contact_block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}
.contact_block img {
    height: 50px;
}
.contact_block-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    font-size: 17px;
    color: var(--color-grey-dark);
    background-color: rgba(0, 0, 0, 0.025);
    border-radius: var(--radius-lg);
    padding: 20px;
}
.contact_block-item h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-title-2);
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary-3);
    margin: 0 0 5px 0;
}
.contact_block-item a {
    margin: 10px 0 0 0;
    align-self: start;
}

/* -------------------------------------------
    FORM
------------------------------------------- */
.contact_form-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-title-2);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-primary-2);
    margin: 0 0 35px 0;
}
.contact_form-title i {
    position: relative;
    top: -0.025em;
}

@media only screen and (max-width: 992px) {
    .contact_form-title {
        font-size: 20px;
        margin: 50px 0 25px 0;
    }
}




/* ////////////////////////////////////////////////////////////////////////////

    11 . EN CONSTRUCTION

//////////////////////////////////////////////////////////////////////////// */

/* Page /en-construction : blocs de CTA de repli. */
.construction_cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin: 35px 0 0 0;
}
.construction_cta .btn-wrap {
    flex-wrap: wrap;
    justify-content: center;
}
/* Un lien glissé dans l'accroche (Instagram, page interne…) hérite sinon de la
   couleur du titre et de `text-decoration: none` : rien ne le signale comme
   cliquable. */
.construction_lede a {
    color: var(--color-primary-1);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}
.no-touch .construction_lede a:hover {
    color: var(--color-dark) !important;
}

.construction_back {
    margin: 30px 0 0 0;
    font-size: 16px;
}
.construction_back a {
    color: var(--color-grey);
    text-decoration: none;
}
.no-touch .construction_back a:hover {
    color: var(--color-primary-1);
}

@media only screen and (max-width: 767px) {
    .construction_cta {
        align-items: stretch;
    }
}




/* ////////////////////////////////////////////////////////////////////////////

    12 . BILANS GRATUITS

//////////////////////////////////////////////////////////////////////////// */

/* Page /bilans-gratuits — réutilise .presta_wrap / .presta_item de
   prestations.css, complété ici par le sommaire, le méta « durée » et la
   grille des centres. */

/* ----- sommaire des 4 bilans ----- */
.bilans_nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 30px 0 0 0;
}
.bilans_nav-item {
    font-family: var(--font-title-2);
    font-size: 13px;
    line-height: 40px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0 20px;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px var(--line-dark);
    color: var(--color-dark);
    white-space: nowrap;
}
.no-touch .bilans_nav-item:hover {
    background-color: var(--color-primary-1);
    box-shadow: inset 0 0 0 1px var(--color-primary-1);
    color: var(--color-light) !important;
}

/* ----- fiche bilan ----- */
/* Décalage de l'ancre : le header est fixe (100px desktop / 70px mobile). */
.presta_item[id] {
    scroll-margin-top: 120px;
}
.bilan_accroche {
    font-family: var(--font-title-2);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--color-primary-1);
    margin: 0 0 15px 0;
}
.bilan_meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 0 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-grey);
}
.bilan_meta i {
    font-size: 18px;
    color: var(--color-primary-3);
}
/* Les CTA de fiche bilan portent deux boutons dont les libellés sont longs :
   a.btn est nowrap + overflow:hidden (interface.css), le texte se faisait donc
   rogner. On autorise le retour à la ligne et on recentre la pastille ::after
   sur un bouton devenu multi-lignes. */
.presta_item-cta .btn-wrap {
    flex-wrap: wrap;
}
.presta_item-cta .btn-wrap a.btn {
    white-space: normal;
    line-height: 1.35;
    padding: 15px 60px 15px 25px;
}
.presta_item-cta .btn-wrap a.btn::after {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}
/* L'effet de survol fait monter le libellé de 100% pendant que le doublon
   ::before prend sa place. Sur un bouton multi-lignes le doublon se désaligne :
   on le masque ET on neutralise la translation, sans quoi le libellé sortirait
   du bouton au survol. Le changement de couleur du bouton, lui, reste actif. */
.presta_item-cta .btn-wrap a.btn span::before {
    display: none;
}
.no-touch .presta_item-cta .btn-wrap a.btn:hover span {
    transform: none;
}

/* ----- bouton désactivé (auto-diagnostic « à venir ») ----- */
/* interface.css ne stylait que a.btn / button.btn actifs : sans ça, le bouton
   « à venir » restait plein contraste et paraissait cliquable. */
a.btn[disabled],
button.btn[disabled],
a.btn[aria-disabled="true"],
button.btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
/* Ces boutons n'ont pas de <span data-hover> : on neutralise l'effet de survol. */
.no-touch a.btn[disabled]:hover,
.no-touch button.btn[disabled]:hover {
    background-color: var(--color-primary-3);
    color: var(--color-light);
    box-shadow: none;
}

/* ----- sélecteur d'auto-diagnostic ----- */
/* Repris dans le vocabulaire de la charte : pilule, police de titre, accent
   menthe. Le bloc est centré comme le reste de .form_header (align-items:center
   + text-align:center) : en flex-start il se décalait à gauche sous un titre
   centré. */
.autodiag_select {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0 0;
}
.autodiag_select label {
    font-family: var(--font-title-2);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary-3);
}

/* Champ : pilule blanche cerclée de menthe, chevron orange dessiné à la main.
   `appearance: none` neutralise le rendu natif ET la flèche par défaut de
   form.css (dont le fill `var(--color-dark)` ne peut pas être résolu à
   l'intérieur d'une data-URI). */
.autodiag_select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: min(360px, 100%);
    max-width: 100%;
    font-family: var(--font-title-2);
    font-size: 15px;
    font-weight: 600;
    line-height: 56px;
    text-align: center;
    text-align-last: center;
    padding: 0 52px;
    color: var(--color-dark);
    background-color: var(--color-light);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23eb5a2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 22px) center;
    background-size: 14px 9px;
    border: none;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px rgba(71, 193, 160, 0.55);
    cursor: pointer;
    transition: box-shadow 0.25s, transform 0.25s;
}
.no-touch .autodiag_select select:hover {
    box-shadow:
        inset 0 0 0 2px var(--color-primary-3),
        0 6px 18px -8px rgba(20, 20, 20, 0.25);
    transform: translateY(-1px);
}
.autodiag_select select:focus-visible {
    outline: 2px solid var(--color-primary-1);
    outline-offset: 3px;
}
/* Les entrées « (à venir) » : grisées dans la liste déroulante. */
.autodiag_select select option:disabled {
    color: var(--color-grey-light);
}

.autodiag_select-note {
    /* Assez large pour tenir sur une ligne : à 420px la phrase se coupait au
       milieu du lien (« offert en / institut »). `balance` répartit proprement
       si la largeur disponible force quand même un retour. */
    max-width: 560px;
    text-wrap: balance;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-grey);
    margin: 0;
}
.autodiag_select-note a {
    color: var(--color-primary-1);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    /* Le lien ne se casse jamais en deux. */
    white-space: nowrap;
}
.no-touch .autodiag_select-note a:hover {
    color: var(--color-dark) !important;
}

@media only screen and (max-width: 992px) {
    .autodiag_select select {
        font-size: 14px;
        line-height: 52px;
        padding: 0 46px;
    }
    .autodiag_select-note {
        font-size: 13px;
    }
}

/* ----- grille des centres (bloc « réserver ») ----- */
.bilans_centres {
    position: relative;
    z-index: 1;
    display: grid;
    /* auto-fit + minmax : les cartes se replient d'elles-mêmes plutôt que de
       déborder d'une piste 1fr trop étroite (le CTA interne est en nowrap). */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0 0 0;
}
.bilans_centre {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 30px;
    border-radius: var(--radius-lg);
    background-color: var(--color-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.bilans_centre h3 {
    font-family: var(--font-title-2);
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary-3);
}
.bilans_centre p {
    font-size: 16px;
    margin: 0;
}
.bilans_centre .btn {
    margin: 10px 0 0 0;
    /* « Réserver gratuitement » ne tient pas en un mot dans une carte de 280px. */
    white-space: normal;
    line-height: 1.3;
    padding: 12px 55px 12px 20px;
}
.bilans_centre .btn::after {
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
}
.bilans_centre .btn span::before {
    display: none;
}
.no-touch .bilans_centre .btn:hover span {
    transform: none;
}
.bilans_centres-more {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin: 40px 0 0 0;
}

@media only screen and (max-width: 992px) {
    .bilans_nav {
        justify-content: flex-start;
    }
    .bilan_accroche {
        font-size: 18px;
    }
    .presta_item[id] {
        scroll-margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .presta_item-cta .btn-wrap a {
        width: 100%;
        justify-content: flex-start;
    }
}




/* ////////////////////////////////////////////////////////////////////////////

    13 . PAGES STATIQUES (mentions légales, CGV, confidentialité)

//////////////////////////////////////////////////////////////////////////// */

/* Le layout `static` injecte le contenu dans .content-static > .text ; aucune
   règle n'existait pour ces conteneurs, les pages légales s'affichaient donc
   pleine largeur sans typographie. */
.content-static {
    position: relative;
    padding: 100px 15px;
}
.content-static .text {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
}
.content-static .text h1 {
    font-family: var(--font-title-2);
    font-size: 42px;
    line-height: 1.05;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 35px 0;
}
.content-static .text h2 {
    font-family: var(--font-title-2);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-primary-1);
    margin: 40px 0 15px 0;
}
.content-static .text h3 {
    font-family: var(--font-title-2);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
    margin: 30px 0 10px 0;
}
.content-static .text p {
    margin: 0 0 15px 0;
}
.content-static .text ul {
    list-style: disc;
    margin: 0 0 15px 0;
    padding: 0 0 0 25px;
}
.content-static .text ul li {
    margin: 0 0 8px 0;
}
.content-static .text a {
    color: var(--color-primary-1);
    text-decoration: underline;
}
.no-touch .content-static .text a:hover {
    color: var(--color-dark);
}

@media only screen and (max-width: 992px) {
    .content-static {
        padding: 50px 0;
    }
    .content-static .text h1 {
        font-size: 28px;
        margin: 0 0 25px 0;
    }
    .content-static .text h2 {
        font-size: 20px;
    }
}




/* ////////////////////////////////////////////////////////////////////////////

    14 . PRENDRE RENDEZ-VOUS

//////////////////////////////////////////////////////////////////////////// */

/* Page /rendez-vous : choix du centre, puis réservation directe. Pas de photo
   de centre en base pour l'instant : la carte repose sur la typographie et la
   couleur plutôt que sur un visuel qui serait vide. */
.rdv_centres {
    background-color: rgba(235, 90, 46, 0.05);
}
/* Même texture de rayons que le bloc « Choisis ton centre » des fiches
   prestation, pour que les deux écrans se répondent. */
.rdv_centres::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/interface/ray-01.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.04;
    mix-blend-mode: luminosity;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #fff 15%);
    mask-image: linear-gradient(to top, transparent 0%, #fff 15%);
}
.rdv_centres .section-inner {
    position: relative;
    z-index: 1;
}

/* ----- grille ----- */
.rdv_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 50px 0 0 0;
}

/* ----- carte centre ----- */
.rdv_card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 35px 30px 30px 30px;
    border-radius: var(--radius-lg);
    background-color: var(--color-light);
    box-shadow: 0 4px 18px -10px rgba(20, 20, 20, 0.18);
    transition: transform 0.3s, box-shadow 0.3s;
}
/* Plaque cliquable couvrant la carte : le CTA reste l'affordance visible, mais
   tout le bloc est actionnable. z-index 2 = au-dessus du contenu, sauf les
   liens propres (téléphone) remontés à 3. */
.rdv_card-plate {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
}
.no-touch .rdv_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(20, 20, 20, 0.45);
}

/* ----- en-tête ----- */
.rdv_card-head {
    padding: 0 0 20px 0;
    margin: 0 0 20px 0;
    border-bottom: var(--line-dark) solid 1px;
}
.rdv_card-eyebrow {
    display: block;
    font-family: var(--font-title-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary-3);
    margin: 0 0 8px 0;
}
.rdv_card h3 {
    font-family: var(--font-title-2);
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-dark);
    transition: color 0.3s;
}
.no-touch .rdv_card:hover h3 {
    color: var(--color-primary-1);
}

/* ----- informations ----- */
.rdv_card-meta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    font-size: 15px;
    line-height: 1.45;
    color: var(--color-grey);
}
.rdv_card-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.rdv_card-line i {
    position: relative;
    top: 1px;
    font-size: 17px;
    color: var(--color-primary-3);
    flex: none;
}
.rdv_card-line a {
    position: relative;
    z-index: 3;
    color: var(--color-grey);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.no-touch .rdv_card-line a:hover {
    color: var(--color-primary-1) !important;
}
/* Les horaires arrivent en HTML riche depuis le backoffice. */
.rdv_card-hours p {
    margin: 0;
}

/* ----- appel à l'action ----- */
.rdv_card-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 25px 0 0 0;
}
/* Faux bouton : la carte entière porte le lien, ce <span> n'a pas à être
   focusable une seconde fois. */
.rdv_card-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
    font-family: var(--font-title-2);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 52px;
    padding: 0 10px 0 25px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-1);
    color: var(--color-light);
    transition: background-color 0.3s;
}
.rdv_card-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 22px;
    border-radius: 50%;
    background-color: var(--color-light);
    color: var(--color-primary-1);
    transition: transform 0.3s;
}
.no-touch .rdv_card:hover .rdv_card-btn {
    background-color: var(--color-dark);
}
.no-touch .rdv_card:hover .rdv_card-btn i {
    transform: translateX(3px);
}
.rdv_card-note {
    font-size: 13px;
    color: var(--color-grey-light);
}

/* Centre pas encore réservable : on éteint la carte sans la rendre triste. */
.rdv_card--soon {
    background-color: rgba(255, 255, 255, 0.6);
}
.rdv_card--soon .rdv_card-eyebrow {
    color: var(--color-grey-light);
}

/* ----- pied de section ----- */
.rdv_footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 50px 0 0 0;
    text-align: center;
}
.rdv_footer p {
    margin: 0;
    color: var(--color-grey);
}

@media only screen and (max-width: 992px) {
    .rdv_grid {
        margin: 35px 0 0 0;
    }
    .rdv_card {
        padding: 28px 24px 24px 24px;
    }
    .rdv_card h3 {
        font-size: 28px;
    }
}