/**
 * Copyright © Hugo Stawiarski EI. Tous droits réservés.
 */

:root {
    --mure-noir:  #1B0F1C;
    --mure-deep:  #3D1A38;
    --mure-fresh: #B0387A;
    --mure-bloom: #D69CB5;
    --mure-glow:  #F8E1EC;

    --leaf-deep:  #2F5E1D;
    --leaf-fresh: #6FA53C;
    --leaf-glow:  #ECF5D8;

    --mur-blanc:    #FAF7F0;
    --mur-calcaire: #F4EFE2;
    --mur-beige:    #ECE2CB;
    --mur-pierre:   #C9C0AB;

    --ink:    #1A1418;
    --ink-80: #2D2429;
    --ink-60: #4A3F45;
    --ink-40: #7A6E72;
    --ink-20: #B5AAB0;

    --line:   #DCD2BC;
    --line-2: #EBE0CA;
    --line-3: #F4EFE2;

    --content:        1240px;
    --content-narrow: 920px;
    --px:             clamp(.75rem, 3.5vw, 2rem);

    --r-sm:   6px;
    --r-md:   12px;
    --r-lg:   20px;
    --r-xl:   32px;
    --r-pill: 999px;

    --section-py:       10rem;
    --section-py-tight: 6rem;

    --text-h1:   clamp(3.5rem, 8vw, 7rem);
    --text-h2:   clamp(2.5rem, 5vw, 4rem);
    --text-lede: clamp(1.0625rem, 1.5vw, 1.25rem);

    --transition: all 0.2s ease;
    --transition-fast: color 0.15s ease;

    --shadow-card:  0 2px 12px 0 rgba(26, 20, 24, 0.06);
    --shadow-float: 0 8px 32px 0 rgba(26, 20, 24, 0.12);
    --shadow-focus: 0 0 0 3px rgba(176, 56, 122, 0.25);
}

::selection {
    background: var(--mure-glow);
    color: var(--ink);
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background-color: var(--mur-blanc);
    color: var(--ink-60);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-feature-settings: 'ss01';
    line-height: 1.6;
}

.container-gdm {
    max-width: var(--content);
    margin-inline: auto;
    padding-inline: var(--px);
}

.container-gdm-narrow {
    max-width: var(--content-narrow);
    margin-inline: auto;
    padding-inline: var(--px);
}

@media (max-width: 768px) {
    .container-gdm,
    .container-gdm-narrow {
        padding-inline: 12px !important;
    }
    .columns {
        padding-inline: 12px !important;
    }
    .column.main > .container-gdm {
        padding-inline: 0 !important;
        max-width: 100% !important;
    }
    .gdm-tabs-first {
        border-top: none !important;
    }
}

h1.page-title { display: none !important; }

.section-py       { padding-block: var(--section-py); }
.section-py-tight { padding-block: var(--section-py-tight); }

.eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-40);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.eyebrow::before,
.eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.eyebrow.eyebrow-left::before  { display: none; }
.eyebrow.eyebrow-right::after  { display: none; }

.title-display {
    font-family: 'Fraunces', ui-serif, serif;
    font-size: var(--text-h1);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: var(--ink);
}

.title-section {
    font-family: 'Fraunces', ui-serif, serif;
    font-size: var(--text-h2);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.title-display em,
.title-section em {
    font-style: italic;
    color: var(--mure-fresh);
}

.lede {
    font-size: var(--text-lede);
    line-height: 1.55;
    color: var(--ink-60);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--r-pill);
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

.btn-primary {
    background: var(--ink);
    color: var(--mur-blanc);
    border-color: var(--ink);
}

.btn-primary:hover {
    background: var(--ink-80);
    border-color: var(--ink-80);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}

.btn-secondary:hover {
    background: var(--mur-calcaire);
    border-color: var(--mur-pierre);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--ink-60);
    border-color: transparent;
    padding-inline: 0.25rem;
}

.btn-ghost:hover {
    color: var(--ink);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-md);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    color: var(--ink-60);
    position: relative;
}

.icon-btn:hover {
    background: var(--mur-calcaire);
    color: var(--ink);
}

.icon-btn .badge-dot {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--mure-fresh);
}