/* File: /assets/css/main.css */
/* ─────────────────────────────────────────────────────────────
   MAIN CSS — Won Marketing
   Reset moderne + styles de base + utilitaires globaux.
   Importe dans cet ordre : variables.css → animations.css
   → components.css → main.css
───────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   IMPORT DES POLICES
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════
   RESET MODERNE (box-sizing, marges, etc.)
═══════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing:  border-box;
    margin:      0;
    padding:     0;
}

html {
    font-size:             16px;
    scroll-behavior:       smooth;
    text-size-adjust:      100%;
    -webkit-text-size-adjust: 100%;
    tab-size:              4;
    hanging-punctuation:   first last;
}

body {
    font-family:            var(--font-sans);
    font-size:              var(--text-base);
    font-weight:            var(--fw-regular);
    line-height:            var(--lh-normal);
    color:                  var(--clr-text-primary);
    background-color:       var(--clr-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:         optimizeLegibility;
    overflow-x:             hidden;
    transition:
        background-color var(--transition-slow),
        color            var(--transition-slow);
    /* Compenser la navbar fixe */
    padding-top: var(--navbar-height);
}

/* ═══════════════════════════════════════════════════════════
   ÉLÉMENTS DE BASE
═══════════════════════════════════════════════════════════ */

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

img {
    font-style:  italic; /* Texte alt stylisé si image manquante */
    background:  var(--clr-bg-muted);
}

/* Lazy loading — fondu à l'apparition */
img[loading="lazy"] {
    opacity:    0;
    transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded { opacity: 1; }

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

button { cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    hyphens:       auto;
}

p { max-width: 75ch; }

a {
    color:           var(--clr-primary-400);
    text-decoration: none;
    transition:      color var(--transition-fast);
}
a:hover { color: var(--clr-primary-500); }

ul, ol { list-style: none; }

table {
    border-collapse: collapse;
    width: 100%;
}

/* Focus visible (accessibilité clavier) */
:focus-visible {
    outline:        2px solid var(--clr-border-focus);
    outline-offset: 3px;
    border-radius:  var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Sélection de texte */
::selection {
    background: rgba(79,110,247,.2);
    color:      var(--clr-text-primary);
}

/* Scrollbar personnalisée (Webkit) */
::-webkit-scrollbar       { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
    background:    var(--scrollbar-thumb);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--clr-text-muted); }

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHIE GLOBALE
═══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family:   var(--font-display);
    font-weight:   var(--fw-bold);
    line-height:   var(--lh-tight);
    letter-spacing:var(--ls-tight);
    color:         var(--clr-text-primary);
}

h1 { font-size: var(--text-6xl); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* Classe hero titre */
.hero-title {
    font-size:     var(--text-6xl);
    font-weight:   var(--fw-extrabold);
    line-height:   var(--lh-tight);
    letter-spacing:var(--ls-tight);
    color:         var(--clr-text-primary);
}

.display-title {
    font-size:     clamp(2.8rem, 8vw, 5.5rem);
    font-weight:   var(--fw-extrabold);
    line-height:   1.05;
    letter-spacing:-0.04em;
}

.lead {
    font-size:   var(--text-lg);
    color:       var(--clr-text-muted);
    line-height: var(--lh-relaxed);
}

.text-balance { text-wrap: balance; }

/* ═══════════════════════════════════════════════════════════
   UTILITAIRES COULEURS & TEXTE
═══════════════════════════════════════════════════════════ */
.text-primary   { color: var(--clr-primary-400) !important; }
.text-accent    { color: var(--clr-accent-400)  !important; }
.text-muted     { color: var(--clr-text-muted)  !important; }
.text-secondary { color: var(--clr-text-secondary) !important; }
.text-inverse   { color: var(--clr-text-inverse) !important; }
.text-success   { color: var(--clr-success) !important; }
.text-error     { color: var(--clr-error)   !important; }

.text-xs   { font-size: var(--text-xs)   !important; }
.text-sm   { font-size: var(--text-sm)   !important; }
.text-base { font-size: var(--text-base) !important; }
.text-md   { font-size: var(--text-md)   !important; }
.text-lg   { font-size: var(--text-lg)   !important; }
.text-xl   { font-size: var(--text-xl)   !important; }

.fw-regular  { font-weight: var(--fw-regular)  !important; }
.fw-medium   { font-weight: var(--fw-medium)   !important; }
.fw-semibold { font-weight: var(--fw-semibold) !important; }
.fw-bold     { font-weight: var(--fw-bold)     !important; }

.text-center { text-align: center !important; }
.text-left   { text-align: left   !important; }
.text-right  { text-align: right  !important; }

.uppercase    { text-transform: uppercase !important; }
.capitalize   { text-transform: capitalize !important; }
.tracking-wide{ letter-spacing: var(--ls-wide)  !important; }
.tracking-wider{letter-spacing: var(--ls-wider) !important; }

/* ═══════════════════════════════════════════════════════════
   UTILITAIRES FOND
═══════════════════════════════════════════════════════════ */
.bg-primary { background: var(--clr-bg)     !important; }
.bg-alt     { background: var(--clr-bg-alt) !important; }
.bg-card    { background: var(--clr-bg-card)!important; }
.bg-brand   { background: var(--gradient-brand) !important; }
.bg-glass   {
    background:     var(--glass-bg)     !important;
    backdrop-filter:var(--glass-blur)   !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border:         1px solid var(--glass-border) !important;
}

/* ═══════════════════════════════════════════════════════════
   UTILITAIRES LAYOUT
═══════════════════════════════════════════════════════════ */
.flex        { display: flex !important; }
.flex-col    { flex-direction: column !important; }
.items-center{ align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end   { align-items: flex-end !important; }
.justify-center  { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-end     { justify-content: flex-end !important; }
.flex-wrap   { flex-wrap: wrap !important; }
.flex-1      { flex: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.grid        { display: grid !important; }
.block       { display: block !important; }
.inline-block{ display: inline-block !important; }
.inline-flex { display: inline-flex !important; }
.hidden      { display: none !important; }

.w-full  { width:  100% !important; }
.h-full  { height: 100% !important; }
.max-w-sm{ max-width: var(--container-sm) !important; }
.max-w-md{ max-width: var(--container-md) !important; }
.max-w-lg{ max-width: var(--container-max) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed    { position: fixed !important; }
.sticky   { position: sticky !important; }
.overflow-hidden { overflow: hidden !important; }

/* Gap utilitaires */
.gap-1  { gap: var(--sp-1)  !important; }
.gap-2  { gap: var(--sp-2)  !important; }
.gap-3  { gap: var(--sp-3)  !important; }
.gap-4  { gap: var(--sp-4)  !important; }
.gap-5  { gap: var(--sp-5)  !important; }
.gap-6  { gap: var(--sp-6)  !important; }
.gap-8  { gap: var(--sp-8)  !important; }
.gap-10 { gap: var(--sp-10) !important; }
.gap-12 { gap: var(--sp-12) !important; }

/* Padding utilitaires */
.p-4  { padding: var(--sp-4)  !important; }
.p-6  { padding: var(--sp-6)  !important; }
.p-8  { padding: var(--sp-8)  !important; }
.px-4 { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
.py-4 { padding-top:  var(--sp-4) !important; padding-bottom: var(--sp-4) !important; }
.py-8 { padding-top:  var(--sp-8) !important; padding-bottom: var(--sp-8) !important; }

/* Margin utilitaires */
.mt-2  { margin-top:    var(--sp-2)  !important; }
.mt-4  { margin-top:    var(--sp-4)  !important; }
.mt-6  { margin-top:    var(--sp-6)  !important; }
.mt-8  { margin-top:    var(--sp-8)  !important; }
.mb-2  { margin-bottom: var(--sp-2)  !important; }
.mb-4  { margin-bottom: var(--sp-4)  !important; }
.mb-6  { margin-bottom: var(--sp-6)  !important; }
.mb-8  { margin-bottom: var(--sp-8)  !important; }

/* Border radius utilitaires */
.rounded-sm   { border-radius: var(--radius-sm)   !important; }
.rounded-md   { border-radius: var(--radius-md)   !important; }
.rounded-lg   { border-radius: var(--radius-lg)   !important; }
.rounded-xl   { border-radius: var(--radius-xl)   !important; }
.rounded-2xl  { border-radius: var(--radius-2xl)  !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Ombres utilitaires */
.shadow-sm  { box-shadow: var(--shadow-sm)  !important; }
.shadow-md  { box-shadow: var(--shadow-md)  !important; }
.shadow-lg  { box-shadow: var(--shadow-lg)  !important; }
.shadow-xl  { box-shadow: var(--shadow-xl)  !important; }
.shadow-none{ box-shadow: none !important; }

/* ═══════════════════════════════════════════════════════════
   HERO — STYLES DE BASE (surcharge dans hero.php)
═══════════════════════════════════════════════════════════ */
.hero {
    position:       relative;
    min-height:     calc(100svh - var(--navbar-height));
    display:        flex;
    align-items:    center;
    overflow:       hidden;
    background:     var(--clr-bg);
}

/* Glow de fond (radial-gradient derrière le contenu) */
.hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--gradient-glow);
    pointer-events: none;
    z-index:    0;
}

.hero__container {
    position:   relative;
    z-index:    1;
    max-width:  var(--container-max);
    margin:     0 auto;
    padding:    var(--sp-20) var(--container-px);
    width:      100%;
}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO (pages internes)
═══════════════════════════════════════════════════════════ */
.page-hero {
    padding:    var(--section-py) 0 var(--section-py-sm);
    background: var(--clr-bg-alt);
    border-bottom: 1px solid var(--clr-border);
    position:   relative;
    overflow:   hidden;
    text-align: center;
}
.page-hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--gradient-glow);
    pointer-events: none;
}
.page-hero__container {
    position:  relative;
    z-index:   1;
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--container-px);
}
.page-hero h1 {
    font-size:   var(--text-5xl);
    font-weight: var(--fw-extrabold);
    margin:      var(--sp-4) 0 var(--sp-5);
    text-wrap:   balance;
}
.page-hero p {
    font-size:  var(--text-lg);
    color:      var(--clr-text-muted);
    max-width:  52ch;
    margin:     0 auto;
    line-height:var(--lh-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════════ */
.breadcrumb {
    display:    flex;
    align-items:center;
    gap:        var(--sp-2);
    font-size:  var(--text-sm);
    color:      var(--clr-text-muted);
    flex-wrap:  wrap;
    justify-content: center;
    margin-bottom: var(--sp-6);
}
.breadcrumb a {
    color:          var(--clr-text-muted);
    text-decoration:none;
    transition:     color var(--transition-fast);
}
.breadcrumb a:hover   { color: var(--clr-primary-400); }
.breadcrumb-sep       { opacity: 0.4; }
.breadcrumb span:last-child { color: var(--clr-text-primary); font-weight: var(--fw-medium); }

/* ═══════════════════════════════════════════════════════════
   GRILLE SERVICES (page services.php)
═══════════════════════════════════════════════════════════ */
.services-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   var(--sp-6);
}

/* ═══════════════════════════════════════════════════════════
   GRILLE PORTFOLIO (page realisations.php)
═══════════════════════════════════════════════════════════ */
.portfolio-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap:                   var(--sp-6);
}
.portfolio-filters {
    display:         flex;
    align-items:     center;
    gap:             var(--sp-3);
    flex-wrap:       wrap;
    justify-content: center;
    margin-bottom:   var(--sp-10);
}
.filter-btn {
    padding:       0.5rem 1.25rem;
    border-radius: var(--radius-full);
    border:        1.5px solid var(--clr-border);
    background:    transparent;
    font-size:     var(--text-sm);
    font-weight:   var(--fw-medium);
    color:         var(--clr-text-muted);
    cursor:        pointer;
    transition:
        background   var(--transition-fast),
        color        var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow   var(--transition-fast);
}
.filter-btn:hover,
.filter-btn.active {
    background:   var(--gradient-brand);
    color:        #fff;
    border-color: transparent;
    box-shadow:   var(--shadow-brand);
}
/* Animation masquage/affichage des cards filtrées */
.card-portfolio.hidden-card {
    display:  none;
    opacity:  0;
}
.card-portfolio {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════
   PAGE CONTACT
═══════════════════════════════════════════════════════════ */
.contact-grid {
    display:               grid;
    grid-template-columns: 1fr 1.6fr;
    gap:                   var(--sp-12);
    align-items:           start;
}
.contact-info-item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--sp-4);
    padding:     var(--sp-5) 0;
    border-bottom: 1px solid var(--clr-border-light);
}
.contact-info-item:last-child { border-bottom: none; }
.contact-info-icon {
    width:           44px;
    height:          44px;
    border-radius:   var(--radius-lg);
    background:      var(--gradient-subtle);
    border:          1px solid var(--clr-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--clr-primary-400);
    font-size:       1.1rem;
    flex-shrink:     0;
}
.contact-info-label {
    font-size:   var(--text-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color:       var(--clr-text-muted);
    margin-bottom:var(--sp-1);
}
.contact-info-value {
    font-size:   var(--text-base);
    font-weight: var(--fw-medium);
    color:       var(--clr-text-primary);
}
.contact-info-value a {
    color:          var(--clr-text-primary);
    text-decoration:none;
    transition:     color var(--transition-fast);
}
.contact-info-value a:hover { color: var(--clr-primary-400); }

/* Carte Google Maps */
.map-embed {
    border-radius: var(--radius-xl);
    overflow:      hidden;
    border:        1px solid var(--clr-border);
    height:        260px;
    margin-top:    var(--sp-6);
}
.map-embed iframe {
    width:  100%;
    height: 100%;
    border: none;
    display:block;
    filter: var(--map-filter, none);
}
[data-theme="dark"] { --map-filter: invert(0.9) hue-rotate(180deg); }

/* Formulaire de contact */
.contact-form {
    background:    var(--clr-bg-card);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-2xl);
    padding:       var(--sp-10);
}
.contact-form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--sp-5);
}
.contact-form-grid .col-span-2 { grid-column: 1 / -1; }

/* ═══════════════════════════════════════════════════════════
   PAGE À PROPOS
═══════════════════════════════════════════════════════════ */
.about-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--sp-16);
    align-items:           center;
}
.about-image-wrap {
    position:      relative;
    border-radius: var(--radius-2xl);
    overflow:      hidden;
}
.about-image-wrap img {
    width:         100%;
    border-radius: var(--radius-2xl);
    display:       block;
}
.about-image-badge {
    position:       absolute;
    bottom:         var(--sp-6);
    left:           var(--sp-6);
    background:     var(--glass-bg);
    backdrop-filter:var(--glass-blur);
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-lg);
    padding:        var(--sp-4) var(--sp-5);
    box-shadow:     var(--shadow-lg);
}
.about-values-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--sp-5);
    margin-top:            var(--sp-8);
}
.about-value-item {
    padding:       var(--sp-5);
    background:    var(--clr-bg-card);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    transition:    box-shadow var(--transition-base), border-color var(--transition-base);
}
.about-value-item:hover {
    box-shadow:   var(--shadow-md);
    border-color: var(--clr-border-focus);
}
.about-value-icon {
    font-size:     1.5rem;
    margin-bottom: var(--sp-3);
}
.about-value-title {
    font-size:   var(--text-base);
    font-weight: var(--fw-semibold);
    color:       var(--clr-text-primary);
    margin-bottom:var(--sp-2);
}
.about-value-text {
    font-size:  var(--text-sm);
    color:      var(--clr-text-muted);
    line-height:var(--lh-relaxed);
}

/* Timeline (À propos — méthode) */
.timeline {
    position:    relative;
    padding-left:var(--sp-8);
}
.timeline::before {
    content:    '';
    position:   absolute;
    left:       11px;
    top:        0;
    bottom:     0;
    width:      2px;
    background: var(--clr-border);
}
.timeline-item {
    position:      relative;
    padding-bottom:var(--sp-8);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
    position:      absolute;
    left:          calc(-1 * var(--sp-8) + 4px);
    top:           4px;
    width:         16px;
    height:        16px;
    border-radius: 50%;
    background:    var(--gradient-brand);
    border:        3px solid var(--clr-bg);
    box-shadow:    0 0 0 2px var(--clr-primary-400);
}
.timeline-step {
    font-size:     var(--text-xs);
    font-weight:   var(--fw-semibold);
    color:         var(--clr-primary-400);
    text-transform:uppercase;
    letter-spacing:var(--ls-wider);
    margin-bottom: var(--sp-1);
}
.timeline-title {
    font-size:   var(--text-lg);
    font-weight: var(--fw-semibold);
    color:       var(--clr-text-primary);
    margin-bottom:var(--sp-2);
}
.timeline-text {
    font-size:  var(--text-sm);
    color:      var(--clr-text-muted);
    line-height:var(--lh-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   SECTION PROCESS (étapes)
═══════════════════════════════════════════════════════════ */
.process-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:                   var(--sp-6);
    position:              relative;
}
/* Ligne de connexion entre étapes */
.process-grid::before {
    content:    '';
    position:   absolute;
    top:        36px;
    left:       10%;
    right:      10%;
    height:     2px;
    background: linear-gradient(90deg, var(--clr-primary-400), var(--clr-accent-400));
    opacity:    0.25;
}
.process-step {
    text-align: center;
    padding:    var(--sp-6);
    position:   relative;
}
.process-step__number {
    width:          56px;
    height:         56px;
    border-radius:  var(--radius-full);
    background:     var(--gradient-brand);
    color:          #fff;
    font-size:      var(--text-xl);
    font-weight:    var(--fw-bold);
    display:        flex;
    align-items:    center;
    justify-content:center;
    margin:         0 auto var(--sp-5);
    box-shadow:     var(--shadow-brand);
    position:       relative;
    z-index:        1;
}
.process-step__title {
    font-size:   var(--text-lg);
    font-weight: var(--fw-semibold);
    color:       var(--clr-text-primary);
    margin-bottom:var(--sp-3);
}
.process-step__text {
    font-size:  var(--text-sm);
    color:      var(--clr-text-muted);
    line-height:var(--lh-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════════════════════ */
.cta-section {
    padding:    var(--section-py) 0;
    position:   relative;
    overflow:   hidden;
}
.cta-inner {
    background:    var(--gradient-brand);
    border-radius: var(--radius-2xl);
    padding:       var(--sp-16) var(--sp-12);
    text-align:    center;
    position:      relative;
    overflow:      hidden;
    box-shadow:    var(--shadow-brand-lg);
}
.cta-inner::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(255,255,255,.15) 0%, transparent 60%);
    pointer-events: none;
}
.cta-inner h2 {
    font-size:   var(--text-4xl);
    font-weight: var(--fw-extrabold);
    color:       #fff;
    margin-bottom:var(--sp-4);
    position:    relative;
}
.cta-inner p {
    font-size:   var(--text-lg);
    color:       rgba(255,255,255,.85);
    margin:      0 auto var(--sp-8);
    max-width:   52ch;
    line-height: var(--lh-relaxed);
    position:    relative;
}
.cta-inner .btn-white { position: relative; }

/* ═══════════════════════════════════════════════════════════
   MENTIONS LÉGALES / POLITIQUE (page simple)
═══════════════════════════════════════════════════════════ */
.legal-content {
    max-width:  var(--container-sm);
    margin:     0 auto;
    padding:    var(--section-py) var(--container-px);
}
.legal-content h2 {
    font-size:    var(--text-2xl);
    margin:       var(--sp-8) 0 var(--sp-4);
}
.legal-content h3 {
    font-size:    var(--text-xl);
    margin:       var(--sp-6) 0 var(--sp-3);
}
.legal-content p,
.legal-content li {
    font-size:   var(--text-base);
    color:       var(--clr-text-secondary);
    line-height: var(--lh-relaxed);
    margin-bottom:var(--sp-3);
}
.legal-content ul { list-style: disc; padding-left: var(--sp-6); }

/* ═══════════════════════════════════════════════════════════
   PAGE 404
═══════════════════════════════════════════════════════════ */
.page-404 {
    min-height: calc(100svh - var(--navbar-height));
    display:    flex;
    align-items:center;
    justify-content:center;
    text-align: center;
    padding:    var(--sp-12) var(--container-px);
}
.page-404__code {
    font-size:     clamp(6rem, 20vw, 12rem);
    font-weight:   var(--fw-extrabold);
    line-height:   1;
    background:    var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display:       block;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE GÉNÉRAL
═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .contact-grid { grid-template-columns: 1fr; }
    .about-grid   { grid-template-columns: 1fr; }
    .contact-form-grid { grid-template-columns: 1fr; }
    .contact-form-grid .col-span-2 { grid-column: 1; }
    .cta-inner    { padding: var(--sp-12) var(--sp-8); }
}

@media (max-width: 767px) {
    body { padding-top: var(--navbar-height); }
    .page-hero h1    { font-size: var(--text-4xl); }
    .about-values-grid { grid-template-columns: 1fr; }
    .cta-inner       { padding: var(--sp-10) var(--sp-6); border-radius: var(--radius-xl); }
    .cta-inner h2    { font-size: var(--text-3xl); }
    .process-grid::before { display: none; }
    .portfolio-grid  { grid-template-columns: 1fr; }
    .services-grid   { grid-template-columns: 1fr; }
    .contact-form    { padding: var(--sp-6); }
    .timeline        { padding-left: var(--sp-6); }
}

@media (max-width: 479px) {
    h1, .hero-title  { font-size: var(--text-4xl); }
    .display-title   { font-size: var(--text-4xl); }
}

/* ═══════════════════════════════════════════════════════════
   IMPRESSION
═══════════════════════════════════════════════════════════ */
@media print {
    .navbar, .floating-buttons, .footer__social { display: none; }
    body { background: #fff; color: #000; padding-top: 0; }
    a    { color: #000; text-decoration: underline; }
    .btn { border: 1px solid #000; }
}