/* ==========================================================================
   SELLERIE D'AUGE — Feuille de style principale
   Layout, typographie, header, footer, utilitaires globaux.
   Les variables CSS sont définies dans /style.css (chargé en premier).
   ========================================================================== */

/* ==========================================================================
   1. RESET MODERNE
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: var(--sda-font-principal);
    font-size: var(--sda-text-base);
    line-height: 1.6;
    color: var(--sda-vert);
    background-color: var(--sda-blanc);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

a {
    color: var(--sda-vert);
    text-decoration: none;
    transition: color var(--sda-transition);
}

a:hover {
    color: var(--sda-camel-fonce);
}

ul, ol {
    list-style: none;
}

/* Accessibilité : focus ring élégant (inspiré shadcn — 3px avec opacité) */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--sda-ring-offset), 0 0 0 5px rgba(202, 168, 134, 0.5);
    border-radius: var(--sda-radius-sm);
    transition: box-shadow var(--sda-transition-fast);
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Les boutons et liens conservent leur box-shadow propre, donc on cible */
a:focus-visible,
button:focus-visible {
    box-shadow: 0 0 0 2px var(--sda-ring-offset), 0 0 0 5px rgba(202, 168, 134, 0.5);
}

/* ==========================================================================
   2. TYPOGRAPHIE
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.sda-h1, .sda-h2, .sda-h3 {
    font-family: var(--sda-font-titre);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--sda-vert);
}

h1, .sda-h1 {
    font-size: clamp(var(--sda-text-3xl), 5vw, var(--sda-text-5xl));
    letter-spacing: -0.02em;
}

h2, .sda-h2 {
    font-size: clamp(var(--sda-text-2xl), 4vw, var(--sda-text-4xl));
}

h3, .sda-h3 {
    font-size: clamp(var(--sda-text-xl), 3vw, var(--sda-text-2xl));
}

h4 {
    font-size: var(--sda-text-xl);
}

p {
    line-height: 1.7;
}

strong, b {
    font-weight: 600;
}

.sda-overline {
    display: inline-block;
    font-size: var(--sda-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--sda-camel-fonce);
    font-weight: 500;
    margin-bottom: var(--sda-space-4);
}

.sda-lead {
    font-size: var(--sda-text-lg);
    line-height: 1.7;
    color: var(--sda-gris-700);
    max-width: 60ch;
}

/* ==========================================================================
   3. LAYOUT — Conteneurs et sections
   ========================================================================== */
.sda-container {
    width: 100%;
    max-width: var(--sda-container);
    margin-inline: auto;
    padding-inline: var(--sda-space-4);
}

@media (min-width: 768px) {
    .sda-container {
        padding-inline: var(--sda-space-8);
    }
}

@media (min-width: 1024px) {
    .sda-container {
        padding-inline: var(--sda-space-12);
    }
}

.sda-container--large {
    max-width: var(--sda-container-large);
}

.sda-container--text {
    max-width: var(--sda-container-text);
}

.sda-section {
    padding-block: clamp(var(--sda-space-16), 8vw, var(--sda-space-32));
}

.sda-section--narrow {
    padding-block: clamp(var(--sda-space-12), 6vw, var(--sda-space-20));
}

.sda-section--vert {
    background-color: var(--sda-vert);
    color: var(--sda-blanc);
}

.sda-section--vert h1,
.sda-section--vert h2,
.sda-section--vert h3 {
    color: var(--sda-blanc);
}

.sda-section--beige {
    background-color: var(--sda-gris-100);
}

/* ==========================================================================
   4. ACCESSIBILITÉ
   ========================================================================== */
.sda-skip-link {
    position: absolute;
    top: -100px;
    left: var(--sda-space-4);
    background: var(--sda-vert);
    color: var(--sda-blanc);
    padding: var(--sda-space-3) var(--sda-space-6);
    border-radius: var(--sda-radius);
    z-index: 9999;
    transition: top var(--sda-transition);
}

.sda-skip-link:focus {
    top: var(--sda-space-4);
    color: var(--sda-blanc);
}

.sda-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.sda-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--sda-z-header);
    height: var(--sda-header-height-mobile);
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    transition: all var(--sda-transition);
}

.sda-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom-color: var(--sda-gris-200);
}

@media (min-width: 1024px) {
    .sda-header {
        height: var(--sda-header-height);
    }
}

.sda-header__inner {
    height: 100%;
    max-width: var(--sda-container-large);
    margin-inline: auto;
    padding-inline: var(--sda-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sda-space-4);
}

@media (min-width: 768px) {
    .sda-header__inner {
        padding-inline: var(--sda-space-8);
    }
}

.sda-header__brand {
    display: flex;
    align-items: center;
}

.sda-header__brand .custom-logo-link img,
.sda-header__brand img,
.sda-header__brand .sda-logo-svg img {
    max-height: 48px;
    width: auto;
    display: block;
}

@media (min-width: 1024px) {
    .sda-header__brand .custom-logo-link img,
    .sda-header__brand img,
    .sda-header__brand .sda-logo-svg img {
        max-height: 64px;
    }
}

.sda-logo-svg {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}

.sda-logo-fallback {
    display: flex;
    align-items: baseline;
    gap: var(--sda-space-3);
    color: var(--sda-vert);
    font-family: var(--sda-font-titre);
}

.sda-logo-mono {
    font-size: var(--sda-text-2xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sda-camel);
}

.sda-logo-text {
    font-size: var(--sda-text-sm);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sda-vert);
}

@media (max-width: 767px) {
    .sda-logo-text {
        display: none;
    }
}

/* Menu desktop */
.sda-header__nav {
    display: none;
}

@media (min-width: 1024px) {
    .sda-header__nav {
        display: block;
        flex: 1;
        margin-left: var(--sda-space-12);
    }
}

.sda-menu {
    display: flex;
    align-items: center;
    gap: var(--sda-space-8);
}

.sda-menu li {
    position: relative;
}

.sda-menu a {
    font-size: var(--sda-text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    padding-block: var(--sda-space-2);
    position: relative;
    color: var(--sda-vert);
}

.sda-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background-color: var(--sda-camel);
    transition: width var(--sda-transition);
}

.sda-menu a:hover::after,
.sda-menu .current-menu-item > a::after,
.sda-menu .current_page_item > a::after {
    width: 100%;
}

/* Actions header */
.sda-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sda-space-3);
}

.sda-header__contact-btn {
    display: none;
}

@media (min-width: 1024px) {
    .sda-header__contact-btn {
        display: inline-flex;
    }
}

/* Burger menu mobile */
.sda-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
}

@media (min-width: 1024px) {
    .sda-burger {
        display: none;
    }
}

.sda-burger span {
    display: block;
    width: 24px;
    height: 1.5px;
    background-color: var(--sda-vert);
    margin-inline: auto;
    transition: all var(--sda-transition);
}

.sda-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.sda-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.sda-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   6. MENU MOBILE OVERLAY
   ========================================================================== */
.sda-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: var(--sda-z-overlay);
    background-color: var(--sda-blanc);
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: all var(--sda-transition-slow);
    overflow-y: auto;
    padding-top: var(--sda-header-height-mobile);
}

.sda-mobile-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.sda-mobile-nav__inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--sda-space-8) var(--sda-space-6) var(--sda-space-12);
}

.sda-mobile-nav__close {
    position: absolute;
    top: calc(var(--sda-header-height-mobile) / 2 - 16px);
    right: var(--sda-space-4);
    width: 32px;
    height: 32px;
}

.sda-mobile-nav__close span {
    display: block;
    width: 24px;
    height: 1.5px;
    background-color: var(--sda-vert);
    margin-inline: auto;
}

.sda-mobile-nav__close span:nth-child(1) {
    transform: translateY(1px) rotate(45deg);
}

.sda-mobile-nav__close span:nth-child(2) {
    transform: translateY(0) rotate(-45deg);
}

.sda-mobile-menu {
    display: flex;
    flex-direction: column;
    gap: var(--sda-space-2);
    margin-top: var(--sda-space-8);
}

.sda-mobile-menu a {
    display: block;
    font-size: var(--sda-text-2xl);
    font-weight: 500;
    color: var(--sda-vert);
    padding-block: var(--sda-space-3);
    border-bottom: 1px solid var(--sda-gris-200);
    transition: color var(--sda-transition);
}

.sda-mobile-menu a:hover {
    color: var(--sda-camel-fonce);
}

.sda-mobile-nav__footer {
    margin-top: auto;
    padding-top: var(--sda-space-12);
    display: flex;
    flex-direction: column;
    gap: var(--sda-space-6);
}

.sda-mobile-nav__phone {
    font-size: var(--sda-text-xl);
    color: var(--sda-camel-fonce);
    letter-spacing: 0.05em;
}

.sda-mobile-nav__social {
    display: flex;
    gap: var(--sda-space-4);
}

.sda-mobile-nav__social a {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sda-gris-300);
    border-radius: 50%;
    color: var(--sda-vert);
    transition: all var(--sda-transition);
}

.sda-mobile-nav__social a:hover {
    background-color: var(--sda-vert);
    color: var(--sda-blanc);
    border-color: var(--sda-vert);
}

.sda-mobile-nav__social svg {
    width: 20px;
    height: 20px;
}

/* Bloque le scroll body quand le menu mobile est ouvert */
body.sda-menu-open {
    overflow: hidden;
}

/* ==========================================================================
   7. CONTENU PRINCIPAL
   ========================================================================== */
.sda-main {
    padding-top: var(--sda-header-height-mobile);
    min-height: 60vh;
}

@media (min-width: 1024px) {
    .sda-main {
        padding-top: var(--sda-header-height);
    }
}

.sda-page-header {
    text-align: center;
    margin-bottom: var(--sda-space-16);
}

.sda-page-title {
    margin-bottom: var(--sda-space-4);
}

.sda-page-description {
    color: var(--sda-gris-700);
    max-width: 60ch;
    margin-inline: auto;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.sda-footer {
    background-color: var(--sda-vert);
    color: rgba(255, 255, 255, 0.85);
    margin-top: var(--sda-space-20);
}

.sda-footer__main {
    padding-block: clamp(var(--sda-space-16), 6vw, var(--sda-space-20));
}

.sda-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sda-space-12);
}

@media (min-width: 640px) {
    .sda-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .sda-footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: var(--sda-space-16);
    }
}

.sda-footer__col--brand {
    max-width: 420px;
}

.sda-footer__logo {
    display: flex;
    flex-direction: column;
    gap: var(--sda-space-1);
    margin-bottom: var(--sda-space-6);
}

.sda-footer__logo-img {
    max-width: 240px;
    height: auto;
    display: block;
}

.sda-footer__monogramme {
    font-size: var(--sda-text-3xl);
    font-weight: 600;
    color: var(--sda-camel);
    letter-spacing: -0.02em;
}

.sda-footer__nom {
    font-size: var(--sda-text-xl);
    color: var(--sda-blanc);
    letter-spacing: 0.05em;
}

.sda-footer__baseline {
    font-size: var(--sda-text-xs);
    color: var(--sda-camel-clair);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.sda-footer__pitch {
    font-size: var(--sda-text-sm);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}

.sda-footer__titre {
    font-size: var(--sda-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--sda-camel);
    margin-bottom: var(--sda-space-4);
    font-weight: 500;
}

.sda-footer__adresse,
.sda-footer__horaires {
    font-style: normal;
    font-size: var(--sda-text-sm);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.sda-footer__contact {
    font-size: var(--sda-text-sm);
    margin-top: var(--sda-space-2);
}

.sda-footer__contact a {
    color: var(--sda-blanc);
    border-bottom: 1px solid transparent;
    transition: border-color var(--sda-transition);
}

.sda-footer__contact a:hover {
    color: var(--sda-camel);
    border-bottom-color: var(--sda-camel);
}

.sda-footer__menu {
    display: flex;
    flex-direction: column;
    gap: var(--sda-space-2);
    font-size: var(--sda-text-sm);
}

.sda-footer__menu a {
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--sda-transition);
}

.sda-footer__menu a:hover {
    color: var(--sda-camel);
}

.sda-footer__reseaux {
    margin-top: var(--sda-space-8);
}

.sda-footer__social {
    display: flex;
    gap: var(--sda-space-3);
}

.sda-footer__social a {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(202, 168, 134, 0.4);
    border-radius: 50%;
    color: var(--sda-camel);
    transition: all var(--sda-transition);
}

.sda-footer__social a:hover {
    background-color: var(--sda-camel);
    color: var(--sda-vert);
    border-color: var(--sda-camel);
}

.sda-footer__social svg {
    width: 18px;
    height: 18px;
}

.sda-footer__bottom {
    border-top: 1px solid rgba(202, 168, 134, 0.2);
    padding-block: var(--sda-space-6);
}

.sda-footer__bottom-inner {
    display: flex;
    flex-direction: column;
    gap: var(--sda-space-4);
    align-items: center;
    text-align: center;
    font-size: var(--sda-text-xs);
    color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 768px) {
    .sda-footer__bottom-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.sda-footer__legal {
    display: flex;
    gap: var(--sda-space-6);
    flex-wrap: wrap;
    justify-content: center;
}

.sda-footer__legal a {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--sda-transition);
}

.sda-footer__legal a:hover {
    color: var(--sda-camel);
}

/* ==========================================================================
   9. ANIMATIONS UTILITAIRES
   ========================================================================== */
.sda-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms ease, transform 800ms ease;
}

.sda-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   10. UTILITAIRES
   ========================================================================== */
.sda-text-center { text-align: center; }
.sda-text-vert { color: var(--sda-vert); }
.sda-text-camel { color: var(--sda-camel-fonce); }
.sda-bg-beige { background-color: var(--sda-gris-100); }
.sda-bg-vert { background-color: var(--sda-vert); color: var(--sda-blanc); }

.sda-mt-0 { margin-top: 0; }
.sda-mt-4 { margin-top: var(--sda-space-4); }
.sda-mt-8 { margin-top: var(--sda-space-8); }
.sda-mt-12 { margin-top: var(--sda-space-12); }
.sda-mt-16 { margin-top: var(--sda-space-16); }

.sda-divider {
    width: 60px;
    height: 1px;
    background-color: var(--sda-camel);
    margin: var(--sda-space-6) auto;
    border: none;
}