:root {
    /* Guide couleurs */
    --white    : #ffffff;
    --turquoise: #00C1D5;
    --navy     : #031D3B;

    /* Système */
    --bg    : var(--white);
    --text  : var(--navy);
    --muted : rgba(3, 29, 59, .72);
    --line  : rgba(3, 29, 59, .16);
    --soft  : rgba(3, 29, 59, .06);
    --shadow: 0 8px 24px rgba(3, 29, 59, .18);

    --radius: 18px;

    /* fluid spacing */
    --space-1: clamp(8px, 1vw, 12px);
    --space-2: clamp(12px, 1.6vw, 18px);
    --space-3: clamp(18px, 2.2vw, 28px);
    --space-4: clamp(24px, 3vw, 40px);
    --space-5: clamp(40px, 5vw, 72px);

    --container: 1180px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height         : 100%;
    scroll-behavior: smooth;
}

body {
    margin     : 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background : var(--bg);
    color      : var(--text);
    line-height: 1.4;
}

a {
    color          : inherit;
    text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline       : 3px solid var(--turquoise);
    outline-offset: 3px;
    border-radius : 10px;
}

.container {
    width        : min(100% - 2 * var(--space-3), var(--container));
    margin-inline: auto;
}

/* ==================
   LOGO 
   ================== */
.logo {
    display  : block;
    width    : 100%;
    max-width: 300px;
    height   : auto;
}

.footer-logo {
    max-width    : 300px;
    margin-bottom: 14px;
    filter       : brightness(0) invert(1);
}

@media (max-width: 760px) {
    .logo {
        max-width: 300px;
    }
}

/* Typography (fluid) */
h1 {
    font-size     : clamp(30px, 3.4vw, 44px);
    letter-spacing: -0.02em;
    line-height   : 1.1;
    margin        : 0 0 var(--space-2);
}

h2 {
    font-size     : clamp(22px, 2.4vw, 30px);
    letter-spacing: -0.01em;
    line-height   : 1.15;
    margin        : 0 0 var(--space-2);
}

.lead {
    font-size: clamp(15px, 1.2vw, 18px);
    color    : var(--muted);
    margin   : 0 0 var(--space-2);
    max-width: 60ch;
}

/* Buttons (MAIN) */
.btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    gap            : 10px;
    padding        : 12px 16px;
    border-radius  : 999px;
    border         : 1px solid var(--turquoise);
    background     : var(--turquoise);
    color          : var(--white);
    font-weight    : 600;
    font-size      : 15px;
    white-space    : nowrap;
    cursor         : pointer;
    transition     : background .15s ease, border-color .15s ease, transform .1s ease;
}

.btn--ghost {
    background  : transparent;
    color       : var(--navy);
    border-color: var(--navy);
}

.btn--soft {
    background  : var(--navy);
    border-color: var(--navy);
    color       : var(--white);
}

@media (hover:hover) {
    .btn:hover {
        background  : var(--navy);
        border-color: var(--navy);
        color       : var(--white);
        transform   : translateY(-1px);
    }
}

/* =========================
   IMAGES (ex-placeholders)
   ========================= */

/* Le conteneur garde la taille (aspect-ratio) + masque les débords */
.ph {
    background   : #dcdcdc;
    /* fallback si l'image ne charge pas */
    border-radius: var(--radius);
    border       : 1px solid #cfcfcf;
    width        : 100%;
    position     : relative;
    overflow     : hidden;
}

/* L’image remplit le bloc */
.ph__img {
    width     : 100%;
    height    : 100%;
    display   : block;
    object-fit: cover;
}

/* Variantes (tailles) */
.ph--hero {
    aspect-ratio: 16 / 10;
}

.ph--card {
    aspect-ratio : 16 / 9;
    border-radius: 14px;
}

.ph--tall {
    aspect-ratio: 3 / 4;
}


/* ===================
   HEADER & TopNav
   ===================*/
.site-header {
    position       : sticky;
    top            : 0;
    z-index        : 50;
    background     : rgba(3, 29, 59, .96);
    backdrop-filter: blur(8px);
    color          : var(--white);
}

.topbar {
    display              : grid;
    grid-template-columns: 1fr auto 1fr;
    align-items          : center;
    padding              : var(--space-2) 0;
}

.brand {
    display        : flex;
    justify-content: center;
}

.social {
    display: flex;
    gap    : 10px;
}

.social__link {
    font-size: 20px;
    color    : var(--white);
}

.phone {
    display      : inline-flex;
    align-items  : center;
    gap          : 10px;
    padding      : 10px 14px;
    border-radius: 999px;
    border       : 1px solid rgba(255, 255, 255, .22);
    background   : var(--white);
    font-weight  : 700;
    font-size    : 14px;
    white-space  : nowrap;
    color        : var(--navy);
    justify-self : end;
    transition   : opacity 0.2s;
}

.phone:hover {
    opacity: 0.75;
}

/* ==================
   DESKTOP NAV
   =================*/
.nav {
    display        : flex;
    justify-content: center;
    padding-bottom : var(--space-2);
}

.nav ul {
    list-style   : none;
    display      : inline-flex;
    margin       : 0;
    padding      : 10px 14px;
    border-radius: 999px;
    background   : var(--white);
    gap          : 18px;
}

.nav a {
    position   : relative;
    padding    : 8px 4px;
    font-weight: 700;
    color      : var(--navy);
}

.nav a::after {
    content         : "";
    position        : absolute;
    left            : 0;
    right           : 0;
    bottom          : -6px;
    height          : 2px;
    background      : var(--turquoise);
    transform       : scaleX(0);
    transform-origin: left;
    transition      : transform .2s;
    border-radius   : 2px;
}

#active_menu a {
    color: var(--turquoise) !important;
}

@media (hover:hover) {
    .nav a:hover::after {
        transform: scaleX(1);
    }
}

/* =================
   BURGER BUTTON
   =================*/
.nav-toggle {
    position: absolute;
    opacity : 0;
}

.burger {
    position       : relative;
    display        : none;
    width          : 44px;
    height         : 44px;
    border-radius  : 999px;
    border         : 1px solid rgba(3, 29, 59, .18);
    background     : var(--white);
    justify-content: center;
    align-items    : center;
    cursor         : pointer;
    margin         : var(--space-2) auto var(--space-2);
}

.burger-icon {
    width     : 18px;
    height    : 2px;
    background: var(--navy);
    position  : relative;
}

.burger-icon::before,
.burger-icon::after {
    content   : "";
    position  : absolute;
    left      : 0;
    width     : 18px;
    height    : 2px;
    background: var(--navy);
    transition: transform .2s ease, top .2s ease;
}

.burger-icon::before {
    top: -6px;
}

.burger-icon::after {
    top: 6px;
}

/* animate burger when menu open */
.burger.is-open .burger-icon {
    background: transparent;
}

.burger.is-open .burger-icon::before {
    top      : 0;
    transform: rotate(45deg);
}

.burger.is-open .burger-icon::after {
    top      : 0;
    transform: rotate(-45deg);
}

/* ===================
   MOBILE NAV
   ===================*/
@media (max-width:760px) {

    .site-header {
        padding-bottom: var(--space-1);
    }

    .burger {
        display: flex;
        z-index: 60 !important;
    }

    .nav {
        display       : block !important;
        position      : absolute;
        top           : 100%;
        left          : 50%;
        transform     : translateX(-50%) translateY(-10px);
        width         : min(92vw, 520px);
        background    : var(--white);
        border-radius : 16px;
        box-shadow    : var(--shadow);
        opacity       : 0;
        pointer-events: none;
        transition    : opacity .2s ease, transform .2s ease;
        z-index       : 60;
        padding-bottom: 0;
        overflow      : hidden;
    }

    .nav a::after {
        bottom: 0;
    }

    .nav li:hover {
        background-color: rgb(0, 193, 213, .10);
    }

    .nav ul {
        flex-direction: column;
        padding       : 0;
        width         : 100%;
        gap           : 0;
    }

    .nav a {
        text-align   : center;
        display      : block;
        padding      : 22px 16px;
        border-bottom: 1px solid rgba(3, 29, 59, .08);
    }

    .nav.is-open {
        opacity       : 1;
        pointer-events: auto;
        transform     : translateX(-50%) translateY(0);
        transition    : opacity .2s ease, transform .2s ease;
    }

    .mobile-overlay {
        position      : fixed;
        inset         : 0;
        width         : 100%;
        height        : 100%;
        background    : rgba(3, 29, 59, .45);
        opacity       : 0;
        transition    : opacity .2s ease;
        z-index       : 10;
        pointer-events: none;
    }

    .mobile-overlay.is-open {
        opacity       : 1;
        pointer-events: auto;
    }
}

.resize-no-transition * {
    transition: none !important;
}

/* ======================
   SECTIONS PRINCIPALES
   ====================== */
main {
    padding: var(--space-4) 0 var(--space-5);
}

.section {
    padding: var(--space-5) 0;
}

.section--tight {
    padding: var(--space-4) 0;
}

.section-title {
    text-align   : center;
    margin-bottom: var(--space-3);
}

/* Hero */
.hero {
    padding-top: var(--space-4);
}

.hero-grid {
    display              : grid;
    grid-template-columns: 1.05fr .95fr;
    gap                  : var(--space-4);
    align-items          : center;
}

.hero-copy {
    max-width: 62ch;
}

/* Cards : fond navy, texte blanc, boutons blancs texte turquoise */
.cards {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : var(--space-3);
    align-items          : stretch;
}

.card {
    border       : 1px solid rgba(3, 29, 59, .40);
    border-radius: 22px;
    padding      : var(--space-3);
    background   : var(--navy);
    color        : var(--white);
    display      : grid;
    gap          : var(--space-2);
    min-height   : 240px;
    transition   : transform .15s ease, box-shadow .15s ease;
}

.card:hover {
    transform : translateY(-2px);
    box-shadow: var(--shadow);
}

.card h3 {
    margin        : 0;
    font-size     : 18px;
    letter-spacing: -0.01em;
    text-align    : center;
    color         : var(--white);
}

.card .btn {
    justify-self: center;
    background  : var(--white);
    color       : var(--turquoise);
    border-color: var(--white);
}

@media (hover:hover) {
    .card .btn:hover {
        background  : var(--turquoise);
        border-color: var(--turquoise);
        color       : var(--white);
    }
}

/* Accompagnement */
.two-col {
    display              : grid;
    grid-template-columns: 1.05fr .95fr;
    gap                  : var(--space-4);
    align-items          : center;
}

.bullets {
    margin      : var(--space-2) 0 var(--space-2);
    padding-left: 18px;
    color       : var(--navy);
}

.bullets li {
    margin: 10px 0;
}

.media-pair {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : var(--space-2);
    align-items          : stretch;
}

/* CTA band */
.services-cta {
    display        : flex;
    justify-content: center;
    margin-top     : var(--space-3);
}

.cta-band {
    text-align   : center;
    padding      : clamp(26px, 4vw, 44px);
    border-radius: 26px;
    border       : 1px solid rgba(255, 255, 255, .16);
    background   : var(--navy);
    color        : var(--white);
}

.cta-band h2 {
    margin-bottom: var(--space-2);
    color        : var(--white);
}

.cta-band .lead {
    color: rgba(255, 255, 255, .82);
}

.cta-band .btn {
    margin-top  : 6px;
    background  : var(--white);
    border-color: var(--white);
    color       : var(--turquoise);
}

@media (hover:hover) {
    .cta-band .btn:hover {
        background  : var(--turquoise);
        border-color: var(--turquoise);
        color       : var(--white);
    }
}

/* ===================================
   Footer : fond navy, texte blanc 
   =================================== */
footer {
    background: var(--navy);
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding   : var(--space-5) 0 var(--space-3);
    color     : var(--white);
}

.footer-grid {
    display        : flex;
    justify-content: space-between;
    gap            : var(--space-4);
    align-items    : center;
}

.footer-title {
    font-weight: 900;
    margin     : 0 0 var(--space-2);
    font-size  : 18px;
    color      : var(--white);
}

.footer-links a {
    display    : block;
    padding    : 6px 0;
    font-weight: 700;
    color      : rgba(255, 255, 255, .92);
}



@media (hover:hover) {
    .footer-links a:hover {
        color: var(--turquoise);
    }
}

.footer-meta {
    color     : rgba(255, 255, 255, .84);
    font-size : 14px;
    font-style: normal;
}

.footer-meta p {
    margin: 8px 0;
}

.footer-meta a:hover {
    text-decoration: underline;
}

.fineprint {
    margin-top: var(--space-4);
    text-align: center;
    color     : rgba(255, 255, 255, .70);
    font-size : 12px;
}

/* =======================
   Responsive 
   ======================*/
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .two-col {
        grid-template-columns: 1fr;
    }

    .cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .lead {
        max-width: unset;
        font-size: 1rem;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.75rem;
    }
}

@media (max-width: 760px) {
    .nav {
        display: none;
    }

    .mobile-nav {
        display: block;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .media-pair {
        grid-template-columns: 1fr 1fr;
    }

    .phone {
        font-size: 13px;
        padding  : 9px 12px;
    }

    .brand a {
        padding: 9px 12px;
    }

    .footer-grid {
        flex-direction: column;
    }

    main {
        padding-top: var(--space-3);
    }

    .hero {
        padding-top: var(--space-2);
    }
}

@media (min-width: 761px) {
    .nav {
        display: flex;
    }

    .mobile-nav {
        display: none;
    }
}

/* =========================
   À PROPOS / CONTACTS / REALISATIONS – AJOUTS
   ========================= */

.lead--center {
    margin-inline: auto;
    text-align   : center;
}

/* Réalisations : largeur texte */
.page-hero__inner {
    max-width: 60rem;
}

.page-hero__inner .lead {
    max-width: 60rem;
}


/* =========================
   RÉSEAUX SOCIAUX – FONT AWESOME
   ========================= */

.social__link {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;

    background   : none;
    border       : none;
    padding      : 0;
    border-radius: 0;

    font-size  : 24px;
    line-height: 1;
    color      : var(--white);

    transition: transform .15s ease, opacity .15s ease;
}

.social__link:hover {
    transform: translateY(-1px);
    opacity  : .75;
}

/* MODE DORMANT */
body.no-social .social {
    display: none;
}