:root {
    /* Fonts */
    /* titres */
    --font-display: "Fraunces", serif;
    /* texte courant, UI */
    --font-body: "Jost", sans-serif;

    /* Transitions */
    /* doux */
    --transition-soft: 1s ease;
    /* rapide */
    --transition-fast: 0.5s ease;
    /* encore + rapide */
    --transition-faster: 0.3s ease;

    /* Couleurs de marque */
    /* couleur de marque n°1 */
    --charcoal: #434e52;
    /* textes, fonds sombres */
    --charcoal-deep: #2b3235;
    /* couleur de marque n°2 */
    --gold: #c6af83;
    /* couleur plus contrasté de n°2 : hover */
    --gold-heavy: #e6c17d;
    /* textes sur fond sombre */
    --gold-soft: #d9c7a3;
    /* fonds de section */
    --gold-pale: #efe6d3;
    /* fonds transparent */
    --bg-transparent: #f7f3eab4;

    /* Neutres */
    /* fond général du site */
    --ivory: #f7f3ea;
    /* fond des cartes, inputs, blanc cassé */
    --cream: #fffcf6;
    /* texte secondaire / paragraphes discrets */
    --slate: #7c898d;

    /* Utilitaires dérivés */
    /* charcoal à 14% — bordures, séparateurs */
    --line: rgba(67, 78, 82, 0.14);
    /* ombre portée des cartes */
    --shadow: 0 20px 60px rgba(43, 50, 53, 0.10);

    /* Unités */
    /* 0 */
    --size-0: 0;
    --size-0-15: 0.15rem;
    --size-0-25: 0.25rem;
    --size-0-5: 0.5rem;
    --size-0-75: 0.75rem;
    --size-1: 1rem;
    /* 1 */
    --size-1-25: 1.25rem;
    --size-1-5: 1.5rem;
    --size-1-75: 1.75rem;
    --size-2: 2rem;
    /* 2 */
    --size-2-25: 2.25rem;
    --size-2-5: 2.5rem;
    --size-2-75: 2.75rem;
    --size-3: 3rem;
    /* 3 */
    --size-3-25: 3.25rem;
    --size-3-5: 3.5rem;
    --size-3-75: 3.75rem;
    --size-4: 4rem;
    /* Personnalisés */
    --thin: 1px;
    --thiner: 0.5px;
    --z-index-overlord: 100;
    --card-size: 14rem;
    --card-size-dev: 20rem;
    --card-img-size: 16rem;
}

* {
    margin: var(--size-0);
    padding: var(--size-0);
}

body {
    background-color: var(--ivory);
}

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

header {
    position: sticky;
    top: var(--size-0);
    z-index: var(--z-index-overlord);
    background: var(--bg-transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

header.scrolled {
    background: var(--bg-transparent);
    backdrop-filter: blur(16px);
}

header>section>article:first-of-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--size-1-25);
    border-bottom: solid var(--thin) var(--gold-pale);
    transition: var(--transition-fast);
}

header>section>article:first-of-type:hover {
    cursor: pointer;
    color: var(--gold-heavy);
}

header>section>article:first-of-type>div>p:first-of-type {
    margin-top: var(--size-0-25);
    font-family: var(--font-display);
    font-weight: 500;
}

header>section>article:first-of-type>div>p:last-of-type {
    font-family: var(--font-body);
    color: var(--gold);
    font-size: var(--size-0-75);
}

/* MAIN ========================================================================================================================== */
/* SECTION I */

main>section:nth-of-type(1) {
    padding: var(--size-1-5);
}

.cont-title-indent {
    display: flex;
    position: relative;
}

.title-p {
    font-family: var(--font-body);
    margin-top: var(--size-1);
    color: var(--gold);
    letter-spacing: var(--size-0-25);
    font-size: var(--size-0-75);
    font-weight: 700;
}

.indentation-p {
    height: var(--thiner);
    width: var(--size-2);
    background-color: var(--gold);
    margin-top: var(--size-1-5);
    margin-right: var(--size-0-75);
}

.wording {
    font-family: var(--font-display);
    color: var(--charcoal-deep);
    font-size: var(--size-2);
    margin-top: var(--size-0-5);
}

.wording>em {
    color: var(--gold);
    font-weight: 400;
}

.pres-p {
    font-family: var(--font-body);
    color: var(--slate);
    margin: var(--size-0-75);
}

#ligne-v {
    min-width: var(--thin);
    margin: var(--size-0-75) 0;
    background-color: var(--gold-soft);
}

/* ARTICLE II */

main>section:nth-of-type(1)>article:nth-of-type(2) {
    margin-top: var(--size-1);
}

main>section:nth-of-type(1)>article:nth-of-type(2)>button {
    border: solid var(--thin);
    padding: var(--size-1) var(--size-3);
    margin-top: var(--size-1);
    font-family: var(--font-body);
    background-color: var(--ivory);
    transition: var(--transition-fast);
}

main>section:nth-of-type(1)>article:nth-of-type(2)>button:hover {
    background-color: var(--charcoal);
    color: #fff;
}

main>section:nth-of-type(1)>article:nth-of-type(2)>button:nth-of-type(1) {
    background-color: var(--charcoal-deep);
    color: #fff;
    font-weight: 500;
}

main>section:nth-of-type(1)>article:nth-of-type(2)>button:nth-of-type(1):hover {
    background-color: var(--gold);
    color: var(--charcoal-deep);
}

/* ARTICLE III */

.ligne-h {
    width: 100%;
    height: var(--thiner);
    background-color: var(--gold-pale);
    margin-top: var(--size-2);
}

.ligne-h~div {
    display: flex;
    gap: var(--size-1);
    flex-direction: column;
    margin-top: var(--size-1);
}

.statistiques>p {
    margin-top: var(--size-0-5);
    font-family: var(--font-body);
    color: var(--slate);
}

.statistiques>p:first-of-type {
    font-size: var(--size-1-5);
    font-family: var(--font-display);
    font-weight: 600;
    margin-bottom: var(--size-1);
    background-color: var(--charcoal-deep);
    display: inline;
    border-radius: var(--size-0-25);
    padding: var(--size-0-25);
    color: var(--gold-heavy);
}

/* ARTICLE VI */
article:nth-of-type(4) {
    position: relative;
}

#logo-cont {
    height: var(--card-size);
}

article:nth-of-type(4)>section>div {
    position: absolute;
    top: var(--size-0);
    left: var(--size-0);
    background-color: var(--charcoal-deep);
    height: var(--card-size-dev);
    width: 100%;
    opacity: var(--size-0);
    transition: var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-0-5);
    padding: var(--size-1) var(--size-0);
}

article:nth-of-type(4)>section>div>p:nth-of-type(2) {
    color: var(--gold-heavy);
}

#logo-cont>div>div {
    background-color: var(--charcoal-deep);
    border: solid var(--thiner);
    border-color: var(--slate);
    padding: var(--size-0-5);
    margin-top: var(--size-1);
    border-radius: var(--size-0-25);
}

.title-serv {
    color: var(--gold);
    font-family: var(--font-display);
    font-size: var(--size-1-25);
}

.title-serv::before,
.title-serv::after {
    content: '+';
    align-self: center;
    font-size: var(--size-1-25);
    margin: var(--size-0) var(--size-1-25);
}

.line-gold {
    min-height: var(--thiner);
    min-width: var(--size-2-5);
    background-color: var(--gold);
    margin: var(--size-0-5);
}

.obj-serv {
    color: var(--gold-heavy);
    font-size: var(--size-0-75);
    letter-spacing: var(--size-0-15);
    margin-top: var(--size-0-25);
    background-color: var(--charcoal);
    padding: var(--size-0-25) var(--size-0-75);
    border: solid var(--thiner) var(--slate);
    border-radius: var(--size-0-25);
    font-family: var(--font-body);
}

#logo-cont>div>p:last-child {
    color: var(--charcoal);
    text-align: center;
    margin: var(--size-0-5);
    font-family: var(--font-body);
    font-size: var(--size-0-75);
}

article:nth-of-type(4)>section:nth-of-type(1) {
    display: flex;
    background-color: var(--charcoal);
    justify-content: center;
    align-items: center;
    padding: var(--size-4) var(--size-1);
    margin-top: var(--size-2);
    cursor: pointer;
}

article:nth-of-type(4)>section:nth-of-type(1)>img {
    transition: var(--transition-fast)
}

article:nth-of-type(4)>section:nth-of-type(1):hover>img {
    opacity: var(--size-0);
}

article:nth-of-type(4)>section:nth-of-type(1):hover>div {
    opacity: var(--size-1)
}

article:nth-of-type(4)>section:nth-of-type(1)>img {
    width: var(--card-img-size);
}

/* ARTICLE V */
/* Carousel */

body>div:first-of-type {
    margin: var(--var-2) var(--var-2);
    background-image: var(--linear-gray-white);
    border-radius: var(--var-0-5);
    padding: var(--var-0-25);
}

.carousel {
    margin: var(--size-0), auto;
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: auto;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.group {
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 1em; */
    animation: spin 25s infinite linear;
}

/* .carousel:hover .group {
    animation-play-state: paused;
} */

.card {
    flex: var(--size-0) var(--size-0) 5em;
    padding: var(--var-0-5);
    font-size: var(--size-1);
    margin: var(--size-2) var(--size-0);
    text-align: center;
    align-items: center;
    background-color: var(--gold-pale);
    padding: var(--size-1);
    justify-content: center;
    border-top: var(--thin) solid var(--line);
    border-bottom: var(--thin) solid var(--line);
}

.card>p {
    white-space: nowrap;
    margin-right: var(--size-1);
    color: var(--charcoal);
    font-style: italic;
    font-size: var(--size-1-25);
    font-weight: 500;
}

.card>p::after {
    content: "✦";
    color: var(--gold);
    font-style: normal;
    margin-left: var(--size-3);
}

@keyframes spin {
    from {
        translate: 0;
    }

    to {
        translate: -100%
    }
}

/* ==== */

/* Before and after */

#ba-cont {
    position: relative;
    /* hauteur explicite : les enfants sont en absolute, donc ne poussent pas la hauteur */
    height: var(--card-img-size);
    overflow: hidden;
    margin-top: var(--size-2);
    border-radius: var(--size-0-25);
    /* position du curseur de comparaison, pilotée par le JS */
    --clip: 50%;
    cursor: ew-resize;
}

#ba-cont > div.ba-before,
#ba-cont > div.ba-after {
    position: absolute;
    inset: 0;
}

#ba-cont > div.ba-before > img,
#ba-cont > div.ba-after > img {
    width: var(--card-img-size);
    position: absolute;
    inset: 0;
}

/* l'image "après" est rognée à droite de la poignée, ce qui révèle le "avant" en dessous */
#ba-cont > div.ba-after {
    clip-path: inset(0 calc(100% - var(--clip)) 0 0);
}

/* poignée : trait vertical + bouton rond, suit --clip */
#ba-handle {
    position: absolute;
    top: var(--size-0);
    bottom: var(--size-0);
    left: var(--clip);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* le trait ne doit pas capter les clics, seul le bouton le fait */
    pointer-events: none;
}

#ba-handle-line {
    flex: 1;
    width: var(--thin);
    background-color: var(--cream);
}

#ba-handle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-0-25);
    width: var(--size-2);
    height: var(--size-2);
    border-radius: 50%;
    background-color: var(--cream);
    color: var(--charcoal-deep);
    font-size: var(--size-0-75);
    box-shadow: var(--shadow);
    cursor: ew-resize;
    pointer-events: auto;
}

/* SECTION II - À PROPOS =========================================================================================================== */

main>section:nth-of-type(2) {
    padding: var(--size-1-5);
    margin-top: var(--size-3);
}

main>section:nth-of-type(2)>article:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    gap: var(--size-1-5);
    margin-top: var(--size-2);
}

.apropos-img {
    overflow: hidden;
    border-radius: var(--size-0-25);
}

.apropos-img>img {
    width: 100%;
    display: block;
}

.apropos-label {
    font-family: var(--font-body);
    color: var(--gold);
    letter-spacing: var(--size-0-15);
    font-size: var(--size-0-75);
    font-weight: 700;
    margin-bottom: var(--size-0-75);
}

.apropos-text>p {
    font-family: var(--font-body);
    color: var(--slate);
    margin-top: var(--size-0-75);
}

/* SECTION III - TÉMOIGNAGES ======================================================================================================= */

main>section:nth-of-type(3) {
    padding: var(--size-1-5);
    margin-top: var(--size-3);
}

.testi-cont {
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
    margin-top: var(--size-2);
}

.testi-card {
    background-color: var(--gold-pale);
    border-top: var(--thin) solid var(--line);
    border-bottom: var(--thin) solid var(--line);
    padding: var(--size-1-5);
}

.testi-stars {
    color: var(--gold);
    letter-spacing: var(--size-0-15);
}

.testi-text {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--charcoal-deep);
    margin-top: var(--size-0-75);
}

.testi-author {
    font-family: var(--font-body);
    color: var(--slate);
    font-size: var(--size-0-75);
    margin-top: var(--size-1);
}

/* SECTION IV - CONTACT ============================================================================================================ */

main>section:nth-of-type(4) {
    padding: var(--size-1-5);
    margin-top: var(--size-3);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--size-1-5);
    margin-top: var(--size-2);
}

.contact-label {
    font-family: var(--font-body);
    color: var(--gold);
    letter-spacing: var(--size-0-15);
    font-size: var(--size-0-75);
    font-weight: 700;
    margin-bottom: var(--size-0-5);
}

.contact-info>div>p:not(.contact-label) {
    font-family: var(--font-body);
    color: var(--charcoal);
}

.contact-map {
    margin-top: var(--size-1-5);
    overflow: hidden;
    border-radius: var(--size-0-25);
}

.contact-map>img {
    width: 100%;
    display: block;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
    margin-top: var(--size-2);
}

.contact-form label {
    display: block;
    font-family: var(--font-body);
    color: var(--gold);
    letter-spacing: var(--size-0-15);
    font-size: var(--size-0-75);
    font-weight: 700;
    margin-bottom: var(--size-0-5);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    font-family: var(--font-body);
    background-color: var(--cream);
    border: solid var(--thin) var(--line);
    border-radius: var(--size-0-25);
    padding: var(--size-0-75);
}

.contact-form button {
    border: solid var(--thin);
    padding: var(--size-1) var(--size-3);
    margin-top: var(--size-1);
    font-family: var(--font-body);
    background-color: var(--charcoal-deep);
    color: #fff;
    font-weight: 500;
    transition: var(--transition-fast);
}

.contact-form button:hover {
    background-color: var(--gold);
    color: var(--charcoal-deep);
}

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

footer {
    background-color: var(--charcoal-deep);
    margin-top: var(--size-3);
    padding: var(--size-2) var(--size-1-5);
}

footer>section>article:first-of-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--size-0-75);
}

.footer-brand>p {
    font-family: var(--font-display);
    color: var(--cream);
}

.footer-social {
    display: flex;
    gap: var(--size-1);
}

.footer-social>p {
    font-family: var(--font-body);
    color: var(--gold-soft);
    font-size: var(--size-0-75);
    cursor: pointer;
    transition: var(--transition-fast);
}

.footer-social>p:hover {
    color: var(--gold-heavy);
}

footer>section>article:last-of-type {
    display: flex;
    justify-content: space-between;
    margin-top: var(--size-2);
    padding-top: var(--size-1);
    border-top: solid var(--thiner) rgba(255, 255, 255, 0.14);
}

footer>section>article:last-of-type>p {
    font-family: var(--font-body);
    color: var(--slate);
    font-size: var(--size-0-75);
}

footer>section>article:last-of-type>p:last-of-type {
    cursor: pointer;
    transition: var(--transition-fast);
}

footer>section>article:last-of-type>p:last-of-type:hover {
    color: var(--gold-soft);
}