/*css/style.css*/
@charset "UTF-8";

/*
Sommaire
1. Styles généraux
2. Layout
3. Régions principales
3. Navigation
4. Téléphone
5. Main
6. Galerie
7. Article
8. Footer
*/

/*import des polices de caractères*/
@import "./font.css";

/*import de la réinitialisation et des variables*/
@import "./reset.css";
@import "./variables.css";

/* Styles généraux */
html, body {
    scroll-behavior:smooth;
    font-family: var(--font-main);
}
h1, h2, h3{
    font-family:'lora-Regular';
    text-align:center!important;
    padding:30px 0;
}
p, nav, footer{
    font-family:'liberationMono-Regular';
}
.titre-li{
    font-variant-caps:small-caps;
    padding:30px 0;
}

/* Layout */
.wrapper{
    width:100%;
    max-width:100%;
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:auto auto auto;
    grid-template-areas:
    "nav"
    "main"
    "footer";
    margin:0 auto;
    background:
        radial-gradient(120% 90% at 20% -10%, rgba(170, 194, 145, 0.18) 0%, rgba(170, 194, 145, 0) 58%),
        linear-gradient(180deg, #eef3e8 0%, #e7eedf 48%, #dfe8d6 100%);
}

/* Régions principales */
.nav{
    grid-area:nav;
    width:100%;
    overflow-x:clip;
    position:relative;
    z-index:3;
    padding:10px clamp(12px, 2.4vw, 24px);
    border-bottom:1px solid rgba(154, 191, 128, 0.45);
    background:
        radial-gradient(120% 120% at 8% -18%, rgba(170, 194, 145, 0.24) 0%, rgba(170, 194, 145, 0) 60%),
        radial-gradient(110% 120% at 92% 125%, rgba(111, 143, 90, 0.2) 0%, rgba(111, 143, 90, 0) 58%),
        linear-gradient(135deg, #1b2c21 0%, #24382a 52%, #1a2a1f 100%);
    box-shadow:0 10px 22px rgba(8, 16, 11, 0.26);
}
.nav-toggle-button{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:42px;
    padding:0.5rem 0.9rem 0.5rem 2.55rem;
    border-radius:999px;
    border:1px solid rgba(198, 217, 179, 0.34);
    background:rgba(255, 255, 255, 0.04);
    color:#e5efdb;
    cursor:pointer;
    -webkit-user-select:none;
    user-select:none;
}
.nav-toggle-button::before,
.nav-toggle-button::after{
    content:"";
    position:absolute;
    left:0.9rem;
    width:18px;
    height:2px;
    border-radius:999px;
    background:#d9ebca;
    transition:transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle-button::before{
    top:calc(50% - 6px);
    box-shadow:0 6px 0 #d9ebca;
}
.nav-toggle-button::after{
    top:calc(50% + 6px);
}
.nav-toggle-button .nav-toggle-text{
    width:auto;
    height:auto;
    background:none;
    font-family:'liberationMono-Regular';
    font-size:0.82rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#d9ebca;
}
.nav-toggle-button:focus-visible{
    outline:2px solid rgba(159, 224, 127, 0.75);
    outline-offset:2px;
}
.nav.is-menu-open .nav-toggle-button::before{
    top:50%;
    transform:translateY(-50%) rotate(45deg);
    box-shadow:none;
}
.nav.is-menu-open .nav-toggle-button::after{
    top:50%;
    transform:translateY(-50%) rotate(-45deg);
}
.main{
    grid-area:main;
    width:100%;
}
.footer{
    grid-area:footer;
    width:100%;
}

/* Navigation - base */
.nav-menu{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    min-height:0;
    width:100%;
    min-width:0;
    justify-items:stretch;
    align-items:center;
    margin-top:10px;
    max-height:0;
    opacity:0;
    transform:translateY(-6px);
    overflow:hidden;
    pointer-events:none;
    transition:max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.nav.is-menu-open .nav-menu{
    max-height:560px;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}
.nav li{
    width:100%;
    max-width:100%;
    min-width:0;
    display:flex;
    justify-content:center;
}
.menu-link {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:42px;
    text-decoration: none;
    text-align:center;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    color:#e5efdb;
    font-size:clamp(0.72rem, 0.83vw, 0.9rem);
    line-height:1.2;
    padding:0.55rem 0.8rem;
    border-radius:999px;
    border:1px solid rgba(198, 217, 179, 0);
    background:rgba(255, 255, 255, 0.04);
    transition:color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/*capsule lumineuse sous le lien au survol */
.menu-link::before {
    content: "";
    position: absolute;
    left:14px;
    right:14px;
    bottom:6px;
    height:3px;
    border-radius:999px;
    background:#9fe07f;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform 0.26s ease;
}

.menu-link:hover,
.menu-link:focus{
    color:#b5f594;
    background:rgba(170, 194, 145, 0.14);
    border-color:rgba(198, 217, 179, 0.42);
    box-shadow:0 0 0 1px rgba(159, 224, 127, 0.26), 0 6px 14px rgba(8, 16, 11, 0.22);
}
.menu-link:hover::before,
.menu-link:focus::before{
    transform:scaleX(1);
}
.menu-link:focus-visible{
    outline:2px solid rgba(159, 224, 127, 0.75);
    outline-offset:2px;
}

.home-link{
    display:inline-grid;
    place-items:center;
    width:auto;
    min-width:42px;
    min-height:42px;
    padding:0.45rem;
    border-radius:12px;
    color:#d9ebca;
    text-decoration:none;
    border:1px solid rgba(198, 217, 179, 0.24);
    background:rgba(255, 255, 255, 0.02);
    transition:color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.home-link:hover,
.home-link:focus{
    color:#b5f594;
    background:rgba(170, 194, 145, 0.1);
    border-color:rgba(198, 217, 179, 0.4);
    transform:translateY(-1px);
}
.home-link:focus-visible{
    outline:2px solid rgba(159, 224, 127, 0.75);
    outline-offset:2px;
}

/* Navigation - tablette */
@media (min-width:760px){
    .nav-toggle-button{
        display:none;
    }
    .nav-menu{
        grid-template-columns:repeat(3, minmax(190px, 1fr));
        min-height:0;
        gap:10px;
        margin-top:0;
        max-height:none;
        opacity:1;
        transform:none;
        overflow:visible;
        pointer-events:auto;
    }
    .menu-link{
        white-space:nowrap;
        overflow-wrap:normal;
        word-break:normal;
    }
}

/* Navigation - desktop large */
@media (min-width:1180px){
    .nav-menu{
        grid-template-columns:minmax(56px, 0.45fr) repeat(7, minmax(0, 1fr));
        gap:8px;
        min-height:72px;
    }
    .nav li.home-item{
        justify-content:center;
    }
}

/* Téléphone - base */
.tel{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    min-height:42px;
    width:100%;
    padding:0.55rem 0.95rem;
    border-radius:999px;
    border:1px solid rgba(180, 214, 154, 0.7);
    color:#eaf7de;
    background:linear-gradient(135deg, rgba(64, 106, 57, 0.9) 0%, rgba(90, 141, 78, 0.9) 100%);
    box-shadow:0 0 0 1px rgba(170, 214, 137, 0.26), 0 8px 16px rgba(8, 16, 11, 0.25);
    font-size:clamp(0.72rem, 0.83vw, 0.9rem);
    font-weight:700;
    line-height:1.2;
    letter-spacing:0.04em;
    white-space:nowrap;
    animation:slide 0.35s ease-out both;
}
.tel::before{
    content:"\260E";
    font-size:0.95rem;
    width:1.5rem;
    height:1.5rem;
    display:inline-grid;
    place-items:center;
    border-radius:50%;
    background:rgba(234, 247, 222, 0.2);
}
#num-tel{
    cursor: pointer;
}

#num-tel > button{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    width:100%;
    max-width:100%;
    min-width:0;
    padding:0.55rem 0.95rem;
    border-radius:999px;
    border:1px solid rgba(198, 217, 179, 0.34);
    background:rgba(255, 255, 255, 0.04);
    color:#e5efdb;
    text-decoration:none;
    font-family:'liberationMono-Regular';
    font-size:clamp(0.72rem, 0.83vw, 0.9rem);
    letter-spacing:0.03em;
    text-transform:none;
    cursor:pointer;
    transition:color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

#num-tel > button:hover,
#num-tel > button:focus{
    color:#b5f594;
    border-color:rgba(198, 217, 179, 0.52);
    background:rgba(170, 194, 145, 0.16);
    box-shadow:0 0 0 1px rgba(159, 224, 127, 0.24), 0 6px 14px rgba(8, 16, 11, 0.22);
    transform:translateY(-1px);
}

#num-tel > button:focus-visible,
#num-tel > button:focus-visible{
    outline:2px solid rgba(159, 224, 127, 0.75);
    outline-offset:2px;
}
#num-tel > button i{
    pointer-events:none;
}
#num-tel > button{
    justify-content:center;
    gap:0.45rem;
    padding:0.45rem 0.8rem;
    border-color:rgba(184, 221, 154, 0.75);
    background:linear-gradient(135deg, rgba(40, 77, 43, 0.95) 0%, rgba(63, 106, 56, 0.95) 100%);
    box-shadow:0 0 0 1px rgba(170, 214, 137, 0.3), 0 8px 16px rgba(8, 16, 11, 0.26);
    color:#eff9e4;
}
#num-tel > button::after{
    content:"Téléphone";
    font-weight:700;
    letter-spacing:0.04em;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
}
#num-tel > button i{
    width:1.6rem;
    height:1.6rem;
    border-radius:50%;
    display:inline-grid;
    place-items:center;
    color:#204227;
    background:rgba(234, 247, 222, 0.9);
    animation:phonePulse 1.8s ease-in-out infinite;
}
#num-tel > button:hover,
#num-tel > button:focus{
    color:#f7fff0;
    border-color:rgba(198, 234, 170, 0.88);
    background:linear-gradient(135deg, rgba(50, 90, 51, 0.96) 0%, rgba(76, 123, 65, 0.96) 100%);
    box-shadow:0 0 0 1px rgba(189, 231, 159, 0.34), 0 10px 20px rgba(8, 16, 11, 0.28);
    transform:translateY(-1px);
}

.vp{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    width:100%;
    max-width:100%;
    min-width:0;
    padding:0.7rem 1rem;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:0.08rem;
    color:#f4f8ee;
    background:#2a2f29;
    border:none;
    border-radius:999px;
    cursor:pointer;
    transition:0.2s;
}
.vp::before{
    content:"";
    position:absolute;
    inset:2px;
    border-radius:999px;
    background:#232820;
}
.vp span{
    position:relative;
    z-index:1;
    white-space:nowrap;
}
.vp i{
    position:absolute;
    inset:0;
    display:block;
    pointer-events:none;
}
.vp i::before{
    content:"";
    position:absolute;
    width:10px;
    height:3px;
    left:78%;
    top:-3px;
    border:2px solid #9fe07f;
    background:#232820;
    transition:0.2s;
}
.vp i::after{
    content:"";
    position:absolute;
    width:10px;
    height:3px;
    left:22%;
    bottom:-3px;
    border:2px solid #9fe07f;
    background:#232820;
    transition:0.2s;
}
.vp:hover,
.vp:focus{
    letter-spacing:0.12rem;
    color:#f4ffe8;
    box-shadow:0 0 24px rgba(159, 224, 127, 0.45);
}
.vp:hover i::before,
.vp:focus i::before{
    width:16px;
    left:20%;
}
.vp:hover i::after,
.vp:focus i::after{
    width:16px;
    left:80%;
}
.vp:focus-visible{
    outline:2px solid rgba(159, 224, 127, 0.75);
    outline-offset:2px;
}

.service-cta{
    overflow:hidden;
    justify-content:flex-start;
    width:auto;
    padding:0.86rem 1.45rem;
    border:1px solid rgba(203, 225, 184, 0.32);
    background:
        linear-gradient(180deg, rgba(95, 129, 84, 0.18) 0%, rgba(95, 129, 84, 0) 26%),
        linear-gradient(135deg, #203426 0%, #2d4933 52%, #18271d 100%);
    box-shadow:
        inset 0 1px 0 rgba(244, 250, 236, 0.16),
        inset 0 0 0 1px rgba(16, 28, 20, 0.22),
        0 10px 20px rgba(7, 16, 10, 0.22);
    letter-spacing:0.04rem;
    transition:transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease, color 0.32s ease, background 0.32s ease;
}
.service-cta::before{
    inset:1px;
    border-radius:999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(135deg, rgba(58, 88, 54, 0.32) 0%, rgba(23, 39, 29, 0.08) 100%);
}
.service-cta span{
    padding-right:2rem;
    color:#f1f7ea;
    text-shadow:0 1px 0 rgba(10, 18, 12, 0.35);
}
.service-cta i{
    position:absolute;
    right:1.05rem;
    inset:auto 1.05rem auto auto;
    width:1rem;
    height:1rem;
}
.service-cta i::before,
.service-cta i::after{
    content:"";
    position:absolute;
    top:50%;
    right:0;
    transition:transform 0.32s ease, border-color 0.32s ease, background-color 0.32s ease;
}
.service-cta i::before{
    width:0.8rem;
    height:1px;
    background:#dfead4;
    transform:translateY(-50%);
}
.service-cta i::after{
    width:0.38rem;
    height:0.38rem;
    border-top:1px solid #dfead4;
    border-right:1px solid #dfead4;
    background:transparent;
    transform:translateY(-50%) rotate(45deg);
    transform-origin:center;
}
.service-cta:hover,
.service-cta:focus{
    letter-spacing:0.04rem;
    color:#fcfff8;
    border-color:rgba(221, 238, 207, 0.52);
    background:
        linear-gradient(180deg, rgba(110, 145, 98, 0.2) 0%, rgba(110, 145, 98, 0) 26%),
        linear-gradient(135deg, #243a2a 0%, #35533b 52%, #1b2d21 100%);
    box-shadow:
        inset 0 1px 0 rgba(250, 255, 244, 0.18),
        inset 0 0 0 1px rgba(20, 32, 24, 0.18),
        0 16px 30px rgba(7, 16, 10, 0.28);
    transform:translateY(-2px);
}
.service-cta:hover i::before,
.service-cta:focus i::before{
    width:0.8rem;
    left:auto;
    transform:translate(0.18rem, -50%);
}
.service-cta:hover i::after,
.service-cta:focus i::after{
    width:0.38rem;
    left:auto;
    transform:translate(0.18rem, -50%) rotate(45deg);
}
.service-cta::after{
    content:"";
    position:absolute;
    top:1px;
    bottom:1px;
    left:-38%;
    width:26%;
    border-radius:999px;
    background:linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(246, 252, 240, 0.18) 50%, rgba(255, 255, 255, 0) 100%);
    transform:skewX(-22deg);
    opacity:0;
    pointer-events:none;
}
.service-cta:hover::after,
.service-cta:focus::after{
    opacity:1;
    animation:serviceCtaSweepLuxury 0.95s ease;
}
.service-cta:focus-visible{
    outline:2px solid rgba(215, 235, 200, 0.78);
    outline-offset:3px;
}

@keyframes serviceCtaSweepLuxury{
    from {
        left:-38%;
    }
    to {
        left:118%;
    }
}

@keyframes phonePulse{
    0% {
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(177, 222, 144, 0.45);
    }
    70% {
        transform:scale(1.06);
        box-shadow:0 0 0 7px rgba(177, 222, 144, 0);
    }
    100% {
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(177, 222, 144, 0);
    }
}

/* Téléphone - tablette et plus */
@media (min-width:760px){
    #num-tel > button{
        justify-content:flex-start;
    }
    #num-tel > button::after{
        content:"Afficher le numéro";
        white-space:nowrap;
        overflow-wrap:normal;
        word-break:normal;
    }
}

/* Animation */
@keyframes slide{
    from {
        opacity:0;
        transform:translateY(-4px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

/* Main */
.main{
    position:relative;
    /*min-height:100vh;*/
}
.main img{
    display:block;
    max-width:100%;
    object-fit:contain;
}
/* Galerie - base */
.gallery{
    position: relative;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: clamp(150px, 52vw, 240px);
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    place-items: center;
    background:linear-gradient(180deg, #d7c8a8 0%, #cfbe9d 100%);
}
.gallery > *{
    background-color:#f3f0e7;
}
.gallery > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Signature au centre de la galerie */
.gallery-stamp{
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(122px, 34vw, 196px);
    aspect-ratio: 2.05 / 1;
    transform: translate(-50%, -50%) rotate(-6deg);
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 0;
    border: none;
    border-radius: 50% / 30%;
    background:radial-gradient(ellipse at center, rgba(224, 210, 177, 0.9) 0 50%, rgba(208, 192, 156, 0.93) 50% 68%, rgba(94, 90, 78, 0.9) 68% 74%, rgba(208, 192, 156, 0.9) 74% 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    z-index: 2;
    pointer-events: none;
}
.gallery-stamp::before{
    content: "";
    position: absolute;
    inset: 4px 10px;
    border: 2px dashed rgba(94, 90, 78, 0.72);
    border-radius: 50% / 30%;
    z-index: 2;
}
.gallery-stamp-fill{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50% / 30%;
    opacity: 0.82;
    z-index: 0;
}
.gallery-stamp > img:not(.gallery-stamp-fill){
    position: relative;
    width: 92%;
    height: auto;
    transform: rotate(6deg);
    filter: contrast(1.22) saturate(1.08) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.22));
    z-index: 1;
}
.gallery-stamp > img.gallery-stamp-fill{
    position: absolute;
    width: 100%;
    height: 100%;
    transform: none;
    filter: saturate(0.86) contrast(0.92) brightness(1.03);
}

/* Galerie - tablette et plus */
@media (min-width:760px){
    .gallery{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(150px, 33vw, 620px);
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    .gallery-stamp{
        width: clamp(188px, 20vw, 300px);
        padding: 0;
    }
    .gallery-stamp::before{
        inset: 5px 14px;
    }
    .gallery-stamp-fill{
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .gallery-stamp > img.gallery-stamp-fill{
        width: 100%;
        height: 100%;
    }
}

@media (max-width:420px){
    .gallery-stamp{
        width: min(44vw, 160px);
    }
    .gallery-stamp::before{
        inset: 3px 7px;
    }
}
/* Article - base */
article{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:clip;
    line-height:1.8;
    margin-left: 0;
    margin-right: 0;
    padding:clamp(6px, 1.2vw, 16px) 0 0 0;
    perspective:none;
    background:
        linear-gradient(180deg, rgba(231, 238, 222, 0.16) 0%, rgba(202, 215, 192, 0.12) 100%);
}
article p{
    text-align:justify;
}
/* Article - panneau geometrique */
.svg-wrapper{
    position: relative;
    width: 100%;
    height: auto;
    overflow-x: clip;
    overflow-y: visible;
    transform-style: preserve-3d;
    transform: none;
}
.svg-wrapper::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(85% 120% at 0% 50%, rgba(22, 39, 26, 0.2) 0%, rgba(22, 39, 26, 0) 78%),
        radial-gradient(85% 120% at 100% 50%, rgba(22, 39, 26, 0.2) 0%, rgba(22, 39, 26, 0) 78%);
    z-index: 0;
}
.svg-wrapper::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(140% 90% at 15% 0%, rgba(170, 194, 145, 0.2) 0%, rgba(170, 194, 145, 0) 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(24, 42, 31, 0.12) 100%);
    mix-blend-mode: multiply;
    opacity: 0.78;
    z-index: 1;
}
.polygon-bg{
    position: relative;
    width: 100%;
    height: 360px;
    display: block;
    z-index: 2;
    background:
        linear-gradient(135deg, #c6b48f 0%, #d8c8a6 40%, #9b8d70 100%);
    clip-path: polygon(4% 0, 92% 0, 100% 50%, 92% 100%, 4% 100%, 0 50%);
    border: 1px solid rgba(88, 82, 67, 0.28);
    filter: drop-shadow(0 18px 26px rgba(9, 22, 14, 0.26));
}
.polygon-bg::before{
    content: "";
    position: absolute;
    inset: 8px;
    clip-path: polygon(4% 0, 92% 0, 100% 50%, 92% 100%, 4% 100%, 0 50%);
    background:
        linear-gradient(160deg, rgba(231, 222, 199, 0.6) 0%, rgba(164, 150, 117, 0.35) 100%);
    border: 1px solid rgba(113, 106, 87, 0.2);
}
.polygon-bg::after{
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(4% 0, 92% 0, 100% 50%, 92% 100%, 4% 100%, 0 50%);
    background:
        radial-gradient(100% 100% at 15% 0%, rgba(170, 194, 145, 0.22) 0%, rgba(170, 194, 145, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(24, 42, 31, 0.1) 100%);
    mix-blend-mode: soft-light;
    pointer-events: none;
}
.child{
    position:absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92%, 620px);
    max-width: 980px;
    height: auto;
    padding: clamp(14px, 4vw, 22px);
    background: linear-gradient(180deg, rgba(239, 245, 232, 0.74) 0%, rgba(226, 236, 215, 0.68) 100%);
    border: 1px solid rgba(111, 143, 90, 0.26);
    box-shadow: 0 12px 26px rgba(17, 34, 23, 0.16);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    display: block;
    text-align: left;
    border-radius: 14px;
    z-index: 3;
}
.child h1{
    white-space: normal;
    font-size: clamp(1rem, 4vw, 1.35rem);
    line-height: 1.2;
    padding: 0 0 0.7rem 0;
    font-family:'lora-Regular';
}
.child p{
    margin: 0 0 0.7rem 0;
    line-height: 1.45;
}

/* Article - mobile : contenu en flux, polygon en fond */
@media (max-width:759px){
    .polygon-bg{
        position: absolute;
        inset: 0;
        height: 100%;
        width: 100%;
    }
    .child{
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: min(92%, 620px);
        margin: 0 auto;
    }
    .svg-wrapper{
        padding: clamp(20px, 5vw, 36px) 0;
    }
}

/* Article - tablette et plus */
@media (min-width:760px){
    article{
        width:100vw;
        max-width:100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        perspective:900px;
        background:
            linear-gradient(90deg, rgba(50, 74, 53, 0.16) 0%, rgba(50, 74, 53, 0) 22%, rgba(50, 74, 53, 0) 78%, rgba(50, 74, 53, 0.16) 100%),
            linear-gradient(180deg, rgba(231, 238, 222, 0.2) 0%, rgba(202, 215, 192, 0.16) 100%);
    }
    .svg-wrapper{
        transform: rotateX(9deg) rotateZ(-1.8deg);
    }
    .svg-wrapper::before{
        background:
            radial-gradient(75% 120% at 0% 50%, rgba(22, 39, 26, 0.28) 0%, rgba(22, 39, 26, 0) 72%),
            radial-gradient(75% 120% at 100% 50%, rgba(22, 39, 26, 0.28) 0%, rgba(22, 39, 26, 0) 72%);
    }
    .polygon-bg{
        height: 430px;
    }
    .child{
        transform: translate(-50%, -50%) translateZ(34px) rotateX(-9deg) rotateZ(1.8deg);
        width: 86%;
        padding: clamp(14px, 2vw, 24px);
    }
    .child h1{
        white-space: nowrap;
        font-size: clamp(1rem, 1.8vw, 1.6rem);
    }
}

/* Footer - base */
.footer{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr;
    gap:clamp(8px, 1.4vw, 16px);
    align-items:stretch;
    color:#e7efdf;
    margin-top:0;
    padding:12px;
    border-radius:18px 18px 0 0;
    border-top:4px solid #6f8f5a;
    background:
        radial-gradient(120% 160% at 12% 110%, rgba(111, 143, 90, 0.24) 0%, rgba(111, 143, 90, 0) 60%),
        radial-gradient(120% 140% at 88% -20%, rgba(170, 194, 145, 0.2) 0%, rgba(170, 194, 145, 0) 58%),
        linear-gradient(145deg, #1a2a1f 0%, #223728 48%, #18271d 100%);
    box-shadow:0 -12px 28px rgba(0, 0, 0, 0.24);
}
.footer::before{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(115deg, rgba(198, 217, 179, 0.07) 0 2px, rgba(198, 217, 179, 0) 2px 16px);
    opacity:0.28;
    pointer-events:none;
}
.footer .img-container{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    max-width:280px;
    margin:0 auto;
    padding:8px 8px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(170, 194, 145, 0.25) 0%, rgba(89, 120, 74, 0.18) 100%);
    border:1px solid rgba(188, 214, 168, 0.35);
}
.img-container img{
    display:block;
    width:220px;
    max-height:84px;
    height:auto;
    max-width:100%;
    object-fit:contain;
    filter:contrast(1.15) saturate(1.12) drop-shadow(0 8px 14px rgba(9, 19, 12, 0.35));
}
.footer .img-container a{
    display:block;
    width:100%;
    line-height:0;
}
.footer .cgu,
.footer .rs,
.footer .contact{
    position:relative;
    z-index:1;
    width:100%;
    max-width:560px;
    margin:0 auto;
    padding:10px 12px;
    border-radius:18px;
    background:rgba(24, 42, 31, 0.5);
    border:1px solid rgba(188, 214, 168, 0.24);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
}
.footer ul{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.footer .titre-li{
    padding:0 0 8px 0;
    margin-bottom:4px;
    border-bottom:1px solid rgba(188, 214, 168, 0.35);
    color:#c8dfb2;
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-size:0.92rem;
}
.footer li{
    line-height:1.35;
}
.footer a{
    color:#e3efda;
    text-decoration:none;
    transition:color 0.25s ease, text-shadow 0.25s ease;
}
.footer a:hover,
.footer a:focus{
    color:#9fe07f;
    text-shadow:0 0 10px rgba(159, 224, 127, 0.35);
}
.footer a:focus-visible{
    outline:2px solid rgba(159, 224, 127, 0.75);
    outline-offset:3px;
}

/* Footer - desktop */
@media (min-width:920px){
    .footer{
        grid-template-columns:minmax(240px, 340px) 1fr 1fr 1fr;
        padding:clamp(12px, 1.8vw, 20px);
        border-radius:0;
    }
    .footer .img-container{
        max-width:none;
        margin:0;
    }
    .footer .cgu,
    .footer .rs,
    .footer .contact{
        max-width:none;
        margin:0;
    }
}

    /* Pages de service - base */
    .page-header{
        padding:clamp(24px, 5vw, 48px) clamp(16px, 5vw, 48px) clamp(24px, 5vw, 48px);
        text-align:center;
        border-bottom:1px solid rgba(154, 191, 128, 0.3);
    }
    .page-header h1{
        padding:0 0 0.6rem 0;
    }
    .page-subtitle{
        font-family:'liberationMono-Regular';
        font-size:clamp(0.88rem, 1.6vw, 1.05rem);
        color:#4a6340;
        max-width:620px;
        margin:0 auto;
        line-height:1.6;
    }
    .page-content{
        max-width:1160px;
        margin:0 auto;
        padding:clamp(24px, 5vw, 56px) clamp(16px, 4vw, 40px);
    }
    .content-block{
        display:grid;
        grid-template-columns:1fr;
        gap:clamp(20px, 4vw, 40px);
    }
    .content-block-image{
        width:100%;
        border-radius:14px;
        overflow:hidden;
        box-shadow:0 12px 32px rgba(17, 34, 23, 0.18);
        border:1px solid rgba(154, 191, 128, 0.3);
    }
    .content-block-image img{
        display:block;
        width:100%;
        height:100%;
        object-fit:cover;
        aspect-ratio:3 / 2;
    }
    .content-block-text{
        display:flex;
        flex-direction:column;
        gap:1rem;
        justify-content:center;
    }
    .content-block-text h2{
        text-align:left !important;
        padding:0 0 0.4rem 0;
        font-size:clamp(1.1rem, 3vw, 1.5rem);
        color:#2a3d22;
        border-bottom:2px solid rgba(111, 143, 90, 0.4);
    }
    .content-block-text p{
        color:#3a4e30;
        line-height:1.75;
    }
    .content-list{
        list-style:none;
        display:flex;
        flex-direction:column;
        gap:0.5rem;
        padding:0;
    }
    .content-list li{
        font-family:'liberationMono-Regular';
        font-size:0.92rem;
        color:#3a4e30;
        padding-left:1.4rem;
        position:relative;
        line-height:1.5;
    }
    .content-list li::before{
        content:"▸";
        position:absolute;
        left:0;
        color:#6f8f5a;
        font-size:0.85rem;
        top:0.05em;
    }
    .content-block-text .vp{
        align-self:flex-start;
        margin-top:0.5rem;
    }

    /* Pages de service - desktop */
    @media (min-width:760px){
        .content-block{
            grid-template-columns:1fr 1fr;
            align-items:center;
        }
        .content-block-image img{
            aspect-ratio:auto;
            height:420px;
        }
    }
    @media (min-width:1024px){
        .content-block{
            grid-template-columns:1fr 1.2fr;
            gap:clamp(32px, 4vw, 56px);
        }
        .content-block-image img{
            height:480px;
        }
    }