/* =========================================================
   SARLIEVE — Styles communs 
   ========================================================= */

/* ---------- Imports ---------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ---------- Variables ---------- */
:root {
  /* Couleurs principales */
  --color-primary:        #F57C00;   /* orange Sarlieve */
  --color-primary-hover:  #E06C00;
  --color-dark:           #1F1F3D;   /* bleu marine / quasi-noir */
  --color-dark-hover:     #2C2C55;
  --color-accent:         #6E8CB5;   /* bleu acier secondaire */

  /* Couleurs neutres */
  --color-text:           #1F1F3D;
  --color-text-muted:     #5A5A6E;
  --color-bg:             #FFFFFF;
  --color-bg-soft:        #F6F6F8;
  --color-card:           #D9D9DD;   /* gris des placeholders image */
  --color-card-outline:   #E5E5EA;   /* contour clair des cards service */
  --color-border:         #E5E5EA;
  /* Typographie */
  --font-base:            'Roboto', system-ui, sans-serif;
  --fs-xs:                0.75rem;
  --fs-sm:                0.875rem;
  --fs-base:              1rem;
  --fs-lg:                1.125rem;
  --fs-xl:                1.5rem;
  --fs-2xl:               2rem;
  --fs-3xl:               2.5rem;
  --fw-light:             300;
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-bold:              700;
  --lh-tight:             1.2;
  --lh-base:              1.5;

  /* Espacements */
  --space-xs:             0.25rem;
  --space-sm:             0.5rem;
  --space-md:             1rem;
  --space-lg:             1.5rem;
  --space-xl:             2rem;
  --space-2xl:            3rem;
  --space-3xl:            4rem;

  /* Rayons & ombres */
  --radius-sm:            8px;
  --radius-md:            16px;
  --radius-lg:            24px;
  --radius-pill:          999px;
  --shadow-sm:            0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:            0 4px 12px rgba(0,0,0,0.08);

  /* Layout global */
  --container-max:        1200px;
  --container-pad:        1.5rem;
  --header-height:        72px;
  --px:                   clamp(24px, 8%, 100px);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }


/* -------- LAYOUT COMMUN -------- */

main {
    max-width: var(--container-max);
    margin: 0 auto;
}

/* -------- HEADER -------- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--px);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-logo {
    display: flex;
    align-items: center;
}
.site-logo img {
    height: 40px;
    width: auto;
    display: block;
}

nav {
    display: flex;
    gap: var(--space-lg);
}

nav a {
    color: var(--color-dark);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    transition: color 0.15s;
}

nav a:hover {
    color: var(--color-primary);
}

.cta__button {
    background-color: var(--color-primary);
    color: white;
    text-decoration: none;
    border: none;
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background 0.15s;
}
.cta__button:hover {
    background-color: var(--color-primary-hover);
}
.cta__button.cta__button--desktop {
    background-color: var(--color-dark);
    color: #fff;
}
.cta__button.cta__button--desktop:hover {
    background-color: var(--color-dark-hover);
}

/* -------- BURGER -------- */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1001;
}
.burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #1F1F3D;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------- MOBILE MENU -------- */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    top: 56px;
    background: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.mobile-menu.is-open {
    opacity: 1;
    pointer-events: all;
}
.mobile-menu a {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    text-decoration: none;
}
.mobile-menu a:hover { color: var(--color-primary); }
.mobile-menu .cta__button { background-color: var(--color-dark); color: #fff; }
.mobile-menu .cta__button:hover { background-color: var(--color-dark-hover); color: #fff; }

/* Responsive */
@media screen and (max-width: 768px) {
    nav { display: none; }
    .burger { display: flex; }
    .mobile-menu { display: flex; }
    .cta__button--desktop { display: none; }
}

/* -------- FOOTER -------- */

footer {
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
    background-color: var(--color-bg-soft);
    margin-top: var(--space-2xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.footer__brand {
    height: 48px;
    width: auto;
    display: block;
}

.footer__address {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    font-style: normal;
}

@media (max-width: 600px) {
    .footer__address {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-xs);
    }
    .footer__sep { display: none; }
}

.footer__nav {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
    justify-content: center;
}

.footer__nav a {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    transition: color 0.15s;
}

.footer__nav a:hover {
    color: var(--color-primary);
}

.footer__socials svg {
    width: 20px;
    height: 20px;
}

.footer__legal {
    display: flex;
    gap: var(--space-lg);
}
.footer__legal a {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-decoration: underline;
    transition: color 0.15s;
}
.footer__legal a:hover { color: var(--color-primary); }

.footer__copy {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}