/*
 * Investments Albania — main.css
 * Design system v1.0 — Mai 2026
 *
 * Ordre :
 *  1. @font-face
 *  2. Custom properties (tokens)
 *  3. Reset
 *  4. Base & typographie
 *  5. Layout & containers
 *  6. Composants : boutons, badges, cards, forms, nav, footer
 *  7. Sections homepage
 *  8. Utilitaires
 *  9. Accessibilité & responsive
 */

/* ============================================================
   1. @FONT-FACE
   Placer les fichiers dans /public/assets/fonts/
   Source Serif 4  : https://fonts.google.com/specimen/Source+Serif+4 → Download family
   Inter           : https://fonts.google.com/specimen/Inter → Download family
   (sélectionner Regular 400, Medium 500, Bold 700 + Italic 400)
   Copperplate Gothic : licence commerciale requise ; fallback Georgia ci-dessous
   ============================================================ */

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
/* TEMPORAIRE (preprod) : Source Serif 4 désactivé — les WOFF2 ne sont pas
   encore convertis. Les titres retombent sur Georgia (voir --font-heading).
   À réactiver une fois les fichiers source-serif-4-*.woff2 présents. */
/*
@font-face {
    font-family: 'Source Serif 4';
    src: url('/assets/fonts/source-serif-4-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Serif 4';
    src: url('/assets/fonts/source-serif-4-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Serif 4';
    src: url('/assets/fonts/source-serif-4-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*/

/* ============================================================
   2. CUSTOM PROPERTIES (TOKENS)
   ============================================================ */

:root {
    /* — Couleurs de marque — */
    --color-navy:          #1a1a2e;
    --color-burgundy:      #8b0000;
    --color-gold:          #c8a000;
    --color-adriatic-blue: #1a6b9a;
    --color-cream:         #faf6ec;

    /* — Couleurs sémantiques — */
    --color-text-primary:   #2c2c3a;
    --color-text-secondary: #5a5a6a;
    --color-text-muted:     #8a8a96;
    --color-text-on-dark:   #f5f5f7;

    --color-bg-default: #ffffff;
    --color-bg-alt:     var(--color-cream);
    --color-bg-dark:    var(--color-navy);

    --color-border-subtle:   #e5e5ea;
    --color-border-emphasis: #c8c8d0;

    --color-success: #2d7a3d;
    --color-error:   #b00020;
    --color-warning: #c87100;

    /* — Typographies — */
    /* TEMPORAIRE (preprod) : Georgia uniquement — aucune police non fournie référencée.
       Revenir à : 'Copperplate Gothic', 'Copperplate', 'Trajan Pro', Georgia, serif; quand la police display sera disponible. */
    --font-display: Georgia, 'Times New Roman', serif;
    /* TEMPORAIRE (preprod) : Georgia uniquement — WOFF2 de Source Serif 4 pas encore convertis.
       Revenir à : 'Source Serif 4', 'Source Serif Pro', Georgia, serif; une fois les WOFF2 en place. */
    --font-heading:  Georgia, 'Times New Roman', serif;
    --font-body:     'Inter', 'Helvetica Neue', system-ui, sans-serif;
    --font-mono:     'JetBrains Mono', 'Consolas', monospace;

    /* — Échelle typographique — */
    --fs-xs:   0.75rem;   /*  12px */
    --fs-sm:   0.875rem;  /*  14px */
    --fs-base: 1rem;      /*  16px */
    --fs-lg:   1.125rem;  /*  18px */
    --fs-xl:   1.25rem;   /*  20px */
    --fs-2xl:  1.5rem;    /*  24px */
    --fs-3xl:  1.875rem;  /*  30px */
    --fs-4xl:  2.25rem;   /*  36px */
    --fs-5xl:  3rem;      /*  48px */
    --fs-6xl:  3.75rem;   /*  60px */

    /* — Line heights — */
    --lh-tight:   1.2;
    --lh-snug:    1.4;
    --lh-normal:  1.6;
    --lh-relaxed: 1.75;

    /* — Espacement (base 4px) — */
    --space-1:  0.25rem;  /*  4px */
    --space-2:  0.5rem;   /*  8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */

    /* — Containers — */
    --container-narrow:  760px;
    --container-default: 1140px;
    --container-wide:    1440px;

    /* — Rayons — */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-full: 999px;

    /* — Ombres — */
    --shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.06);
    --shadow-md: 0 4px 12px rgba(26, 26, 46, 0.08);
    --shadow-lg: 0 12px 32px rgba(26, 26, 46, 0.12);
    --shadow-xl: 0 24px 64px rgba(26, 26, 46, 0.18);

    /* — Transitions — */
    --transition-fast:    150ms ease-out;
    --transition-default: 250ms ease-out;
    --transition-slow:    400ms ease-out;

    /* — Z-index — */
    --z-header:  100;
    --z-overlay: 200;
    --z-modal:   300;
    --z-toast:   400;

    /* — Header height — */
    --header-h-desktop: 80px;
    --header-h-mobile:  64px;
}

/* ============================================================
   3. RESET
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-default);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

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

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

ul, ol {
    list-style: none;
}

/* ============================================================
   4. BASE & TYPOGRAPHIE
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-navy);
}

h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-3xl); }
h4 { font-size: var(--fs-2xl); }
h5 { font-size: var(--fs-xl); }
h6 { font-size: var(--fs-lg); }

p {
    line-height: var(--lh-relaxed);
    color: var(--color-text-secondary);
}

/* Titres display (hero) en Copperplate */
.display-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Lien texte */
a.text-link {
    color: var(--color-adriatic-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}
a.text-link:hover {
    color: var(--color-navy);
}

/* Section subtitle */
.section-eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-3);
}

/* Section heading */
.section-title {
    font-family: var(--font-heading);
    font-size: var(--fs-4xl);
    font-weight: 700;
    color: var(--color-navy);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-4);
}

.section-subtitle {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    line-height: var(--lh-relaxed);
    max-width: 640px;
}

/* Séparateur gold */
.gold-rule {
    width: 48px;
    height: 2px;
    background: var(--color-gold);
    margin: var(--space-4) 0;
    border: none;
}

/* ============================================================
   5. LAYOUT & CONTAINERS
   ============================================================ */

.container {
    width: 100%;
    max-width: var(--container-default);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

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

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

/* Sections */
.section {
    padding-block: var(--space-20);
}

.section--alt {
    background-color: var(--color-bg-alt);
}

.section--dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
    color: var(--color-text-on-dark);
}

.section--dark p {
    color: rgba(245, 245, 247, 0.75);
}

/* Grille générique */
.grid {
    display: grid;
    gap: var(--space-6);
}

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

/* Flex utilitaires */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-4 { gap: var(--space-4); }
.flex-gap-6 { gap: var(--space-6); }

/* ============================================================
   6. COMPOSANTS
   ============================================================ */

/* ---- 6.1 BOUTONS ---- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    white-space: nowrap;
}

.btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

/* Primary */
.btn--primary {
    background-color: var(--color-navy);
    color: #ffffff;
    border-color: var(--color-navy);
}
.btn--primary:hover {
    background-color: var(--color-burgundy);
    border-color: var(--color-burgundy);
}

/* Secondary */
.btn--secondary {
    background-color: transparent;
    color: var(--color-navy);
    border-color: var(--color-navy);
}
.btn--secondary:hover {
    background-color: var(--color-cream);
}

/* Ghost (sur fond sombre) */
.btn--ghost {
    background-color: transparent;
    color: var(--color-text-on-dark);
    border-color: rgba(245, 245, 247, 0.5);
}
.btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-text-on-dark);
}

/* Gold (CTA accent) */
.btn--gold {
    background-color: var(--color-gold);
    color: var(--color-navy);
    border-color: var(--color-gold);
    font-weight: 700;
}
.btn--gold:hover {
    background-color: #b89000;
    border-color: #b89000;
}

/* Tailles */
.btn--sm {
    padding: 0.5rem 1rem;
    font-size: var(--fs-sm);
}
.btn--lg {
    padding: 1rem 2rem;
    font-size: var(--fs-lg);
}

/* ---- 6.2 BADGES ---- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 500;
    font-family: var(--font-body);
    white-space: nowrap;
}

.badge--available {
    background-color: rgba(26, 107, 154, 0.12);
    color: var(--color-adriatic-blue);
}
.badge--reserved {
    background-color: rgba(200, 113, 0, 0.12);
    color: var(--color-warning);
}
.badge--sold {
    background-color: var(--color-border-subtle);
    color: var(--color-text-muted);
}
.badge--seafront {
    background-color: rgba(26, 107, 154, 0.12);
    color: var(--color-adriatic-blue);
}
.badge--featured {
    background-color: rgba(200, 160, 0, 0.15);
    color: #7a6000;
}

/* ---- 6.3 PROPERTY CARD ---- */

.property-card {
    background: var(--color-bg-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition:
        box-shadow var(--transition-default),
        transform var(--transition-default);
    display: flex;
    flex-direction: column;
}

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

.property-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.property-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-border-subtle);
}

.property-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.property-card:hover .property-card__image img {
    transform: scale(1.03);
}

.property-card__badges {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.property-card__body {
    padding: var(--space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.property-card__price {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-burgundy);
    line-height: 1;
}

.property-card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-navy);
    line-height: var(--lh-snug);
    margin-top: var(--space-1);
}

.property-card__location {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.property-card__specs {
    display: flex;
    gap: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
    border-top: 1px solid var(--color-border-subtle);
    padding-top: var(--space-3);
}

.property-card__spec {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.property-card__yield {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-success);
}

.property-card__ref {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    margin-top: auto;
    padding-top: var(--space-2);
}

/* ---- 6.4 FORMULAIRES ---- */

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.form-label--required::after {
    content: ' *';
    color: var(--color-error);
}

.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-default);
    border: 1px solid var(--color-border-emphasis);
    border-radius: var(--radius-sm);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
}

.form-control::placeholder {
    color: var(--color-text-muted);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-adriatic-blue);
    box-shadow: 0 0 0 3px rgba(26, 107, 154, 0.15);
}

.form-control--error {
    border-color: var(--color-error);
}

.form-control--error:focus {
    box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.15);
}

.form-helper {
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
}

.form-error {
    font-size: var(--fs-xs);
    color: var(--color-error);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Checkbox */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    accent-color: var(--color-navy);
    margin-top: 2px;
    cursor: pointer;
}

.form-check-label {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    line-height: var(--lh-normal);
    cursor: pointer;
}

/* Newsletter inline form */
.newsletter-form {
    display: flex;
    gap: var(--space-3);
    max-width: 480px;
}

/* Contact form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 640px;
}

.form-success {
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background-color: rgba(45, 122, 61, 0.1);
    color: var(--color-success);
    font-weight: 500;
}

.form-error--global {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background-color: rgba(176, 0, 32, 0.08);
}

/* Property filter bar */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-md);
}

.filter-bar .form-group {
    min-width: 160px;
}

.filter-bar__price {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
}

.filter-bar__price .form-group {
    min-width: 110px;
}

.results-count {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* Room-count pill filter (Century-style, single filter for now — more to
   come alongside it, see .filter-bar which already reserves the row) */
.room-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.room-filter__pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-emphasis);
    background-color: var(--color-bg-default);
    color: var(--color-text-primary);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.room-filter__pill:hover {
    border-color: var(--color-adriatic-blue);
}

.room-filter__pill--active {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: #ffffff;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-8);
}

.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-emphasis);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.pagination__link:hover {
    border-color: var(--color-adriatic-blue);
}

.pagination__link--active {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: #ffffff;
}

.pagination__link--disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Property detail page */
.property-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-block: var(--space-5) var(--space-6);
}

.property-gallery__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    cursor: zoom-in;
    border: none;
    padding: 0;
    display: block;
}

/* Fullscreen photo lightbox (1 photo per screen, Century-style) */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(10, 12, 16, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox[hidden] {
    display: none;
}

.lightbox__img {
    max-width: min(90vw, 1400px);
    max-height: 85vh;
    object-fit: contain;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border-radius: var(--radius-full);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox__close {
    top: var(--space-5);
    right: var(--space-5);
}

.lightbox__prev {
    left: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
}

.lightbox__next {
    right: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
}

.lightbox__counter {
    position: absolute;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: var(--fs-sm);
    background: rgba(255, 255, 255, 0.1);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
}

@media (max-width: 640px) {
    .lightbox__prev { left: var(--space-2); width: 40px; height: 40px; }
    .lightbox__next { right: var(--space-2); width: 40px; height: 40px; }
    .lightbox__close { top: var(--space-2); right: var(--space-2); width: 40px; height: 40px; }
}

.property-gallery__img:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 4 / 3;
}

.property-detail {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.property-detail__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.property-detail__desc {
    color: var(--color-text-secondary);
    line-height: var(--lh-normal);
    margin-top: var(--space-3);
}

.property-detail__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2) var(--space-4);
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0;
}

.property-detail__features li {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    padding-left: var(--space-4);
    position: relative;
}

.property-detail__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-adriatic-blue);
}

.property-detail__sidebar {
    position: sticky;
    top: var(--space-6);
}

@media (max-width: 768px) {
    .property-gallery {
        grid-template-columns: 1fr;
    }
    .property-gallery__img:first-child {
        grid-column: auto;
        grid-row: auto;
    }
    .property-detail {
        grid-template-columns: 1fr;
    }
}

.newsletter-form .form-control {
    flex: 1;
}

/* ---- 6.5 NAVIGATION PUBLIQUE ---- */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--color-bg-default);
    border-bottom: 1px solid var(--color-border-subtle);
    transition: box-shadow var(--transition-default);
    height: var(--header-h-desktop);
    display: flex;
    align-items: center;
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

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

.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo img {
    height: 80px;
    width: auto;
}

/* Navigation principale */
.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.site-nav__item {
    position: relative;
}

.site-nav__link {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__link--active {
    color: var(--color-navy);
    background-color: var(--color-cream);
}

.site-nav__link--active {
    color: var(--color-burgundy);
    font-weight: 600;
}

/* Sélecteur de langue */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.lang-switcher__btn {
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: none;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.lang-switcher__btn:hover {
    color: var(--color-navy);
    background-color: var(--color-cream);
    border-color: var(--color-border-subtle);
}

.lang-switcher__btn--active {
    color: var(--color-navy);
    border-color: var(--color-gold);
    font-weight: 700;
}

/* Séparateur lang */
.lang-switcher__sep {
    width: 1px;
    height: 14px;
    background: var(--color-border-subtle);
}

/* Burger mobile */
.site-header__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-2);
    cursor: pointer;
    background: none;
    border: none;
}

.site-header__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-navy);
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Menu mobile overlay */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--header-h-mobile);
    background: var(--color-bg-default);
    z-index: calc(var(--z-header) - 1);
    padding: var(--space-6);
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
}

.mobile-menu.is-open {
    display: flex;
}

.mobile-menu__link {
    display: block;
    padding: var(--space-4);
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-subtle);
    transition: color var(--transition-fast);
}

.mobile-menu__link:hover {
    color: var(--color-burgundy);
}

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

.site-footer {
    background-color: var(--color-navy);
    color: var(--color-text-on-dark);
}

.site-footer__main {
    padding-block: var(--space-16);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-12);
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.site-footer__logo img {
    height: 40px;
    width: auto;
    /* Filtrer pour rendre blanc sur fond navy */
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.site-footer__tagline {
    font-size: var(--fs-sm);
    color: rgba(245, 245, 247, 0.65);
    line-height: var(--lh-relaxed);
    max-width: 280px;
}

.site-footer__col-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-4);
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-footer__link {
    font-size: var(--fs-sm);
    color: rgba(245, 245, 247, 0.7);
    transition: color var(--transition-fast);
}

.site-footer__link:hover {
    color: var(--color-text-on-dark);
}

.site-footer__contact-item {
    font-size: var(--fs-sm);
    color: rgba(245, 245, 247, 0.7);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-2);
}

.site-footer__contact-item a {
    color: var(--color-adriatic-blue);
    transition: color var(--transition-fast);
}

.site-footer__contact-item a:hover {
    color: var(--color-text-on-dark);
}

/* Newsletter footer */
.footer-newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-newsletter .form-control {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-on-dark);
}

.footer-newsletter .form-control::placeholder {
    color: rgba(245, 245, 247, 0.4);
}

.footer-newsletter .form-control:focus {
    border-color: var(--color-adriatic-blue);
    background: rgba(255, 255, 255, 0.12);
}

/* Barre de fond */
.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-block: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: rgba(245, 245, 247, 0.55); /* 0.45 -> 0.55 : contraste 4,19:1 sous le minimum AA de 4,5 en corps 12px ; 0.55 donne 5,54:1 */
}

/* ---- 6.7 BREADCRUMB ---- */

.breadcrumb {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
}

.breadcrumb__list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    flex-wrap: wrap;
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.breadcrumb__link {
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.breadcrumb__link:hover {
    color: var(--color-navy);
}

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

.breadcrumb__current {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* ---- 6.8 TOASTS ---- */

.toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}

.toast {
    min-width: 280px;
    max-width: 420px;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-sm);
    pointer-events: all;
    animation: toast-in 0.3s ease-out;
}

.toast--success { background: var(--color-success); color: #fff; }
.toast--error   { background: var(--color-error);   color: #fff; }
.toast--info    { background: var(--color-adriatic-blue); color: #fff; }
.toast--warning { background: var(--color-warning); color: #fff; }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---- 6.9 FAQ ---- */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-6) 0;
}

.faq-item {
    border: 1px solid var(--color-border-emphasis);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-bg-default);
}

.faq-item__question {
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    list-style: none;
}

.faq-item__question::-webkit-details-marker {
    display: none;
}

.faq-item__question::after {
    content: '+';
    margin-left: auto;
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
}

.faq-item[open] .faq-item__question::after {
    content: '−';
}

.faq-item__category {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-adriatic-blue);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-full);
    padding: 0.2em 0.75em;
}

.faq-item__answer {
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
    line-height: var(--lh-normal);
}

/* ---- 6.10 OPPORTUNITIES — sections pilier ---- */

.opportunities-section {
    margin: var(--space-8) 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-subtle);
}

.opportunities-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.opportunities-section__title {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: var(--space-3);
}

.opportunities-section__text {
    color: var(--color-text-secondary);
    line-height: var(--lh-relaxed);
}

/* ============================================================
   7. SECTIONS HOMEPAGE
   ============================================================ */

/* ---- 7.1 HERO ---- */

.hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-navy);
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* 2026-10-01 : photo retiree, droits non etablis. L'image du hero est
       fournie par la section 8.7, en fin de feuille. Ne pas remettre d'URL ici. */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}

/* Gradient overlay : du navy transparent vers navy opaque en bas + léger en haut */
.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(26, 26, 46, 0.45) 0%,
        rgba(26, 26, 46, 0.35) 40%,
        rgba(26, 26, 46, 0.70) 80%,
        rgba(26, 26, 46, 0.88) 100%
    );
}

.hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-default);
    margin-inline: auto;
    padding: var(--space-20) var(--space-6);
}

.hero__eyebrow {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-4);
}

.hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-5xl); /* 48px desktop */
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: var(--lh-tight);
    max-width: 780px;
    margin-bottom: var(--space-6);
}

.hero__subtitle {
    font-size: var(--fs-xl);
    color: rgba(245, 245, 247, 0.80);
    max-width: 560px;
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-10);
}

.hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Scroll indicator */
.hero__scroll {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: rgba(245, 245, 247, 0.5);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    animation: scroll-bounce 2.5s ease-in-out infinite;
}

.hero__scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

@keyframes scroll-bounce {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
    50%       { opacity: 0.9; transform: translateX(-50%) translateY(6px); }
}

/* ---- 7.2 BLOC "POUR QUI ?" ---- */

.audience-section {
    padding-block: var(--space-20);
    background-color: var(--color-bg-default);
}

.audience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-top: var(--space-10);
}

.audience-card {
    position: relative;
    padding: var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-default);
    transition: box-shadow var(--transition-default), transform var(--transition-default);
    overflow: hidden;
}

.audience-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.audience-card--investor::before {
    background: var(--color-adriatic-blue);
}

.audience-card--cgp::before {
    background: var(--color-gold);
}

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

.audience-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
}

.audience-card--investor .audience-card__icon {
    background: rgba(26, 107, 154, 0.1);
    color: var(--color-adriatic-blue);
}

.audience-card--cgp .audience-card__icon {
    background: rgba(200, 160, 0, 0.1);
    color: var(--color-gold);
}

.audience-card__title {
    font-size: var(--fs-2xl);
    color: var(--color-navy);
    margin-bottom: var(--space-3);
}

.audience-card__text {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-6);
}

.audience-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    list-style: none;
}

.audience-card__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}

.audience-card__list li::before {
    content: '✓';
    font-weight: 700;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ---- 7.3 POURQUOI L'ALBANIE ---- */

.why-albania {
    background-color: var(--color-bg-alt);
}

.why-albania__header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.why-albania__header .section-subtitle {
    margin-inline: auto;
}

.why-albania__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.why-card {
    padding: var(--space-8);
    background: var(--color-bg-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-default);
}

.why-card:hover {
    box-shadow: var(--shadow-md);
}

.why-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 160, 0, 0.1);
    border-radius: var(--radius-md);
    color: var(--color-gold);
    margin-bottom: var(--space-5);
}

.why-card__title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: var(--space-3);
}

.why-card__text {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-3);
}

.why-card__link {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-adriatic-blue);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: gap var(--transition-fast);
}

.why-card__link:hover {
    gap: var(--space-2);
}

/* ---- 7.4 SÉLECTION D'OPPORTUNITÉS ---- */

.featured-properties {
    background-color: var(--color-bg-default);
}

.featured-properties__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-10);
    gap: var(--space-6);
}

.featured-properties__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* ---- 7.5 BLOC ÉQUIPE ---- */

.team-section {
    background-color: var(--color-navy);
    color: var(--color-text-on-dark);
}

.team-section__header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    max-width: 800px;
    margin-inline: auto;
}

.team-card {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    padding: var(--space-8);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.team-card__photo {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--color-gold);
}

.team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card__name {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-text-on-dark);
    margin-bottom: var(--space-1);
    font-family: var(--font-heading);
}

.team-card__role {
    font-size: var(--fs-sm);
    color: var(--color-gold);
    font-weight: 500;
    margin-bottom: var(--space-3);
    letter-spacing: 0.04em;
}

.team-card__bio {
    font-size: var(--fs-sm);
    color: rgba(245, 245, 247, 0.65);
    line-height: var(--lh-relaxed);
}

.team-card__linkedin {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--color-adriatic-blue);
    margin-top: var(--space-3);
    transition: color var(--transition-fast);
}

.team-card__linkedin:hover {
    color: #5ba3cc;
}

/* ---- 7.6 CTA FINAL ---- */

.cta-banner {
    background-color: var(--color-burgundy);
    padding-block: var(--space-16);
    text-align: center;
}

.cta-banner__title {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: var(--space-4);
}

.cta-banner__subtitle {
    font-size: var(--fs-lg);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-8);
    line-height: var(--lh-relaxed);
}

/* ---- 7.7 NEWSLETTER SECTION ---- */

.newsletter-section {
    background-color: var(--color-bg-alt);
    padding-block: var(--space-16);
}

.newsletter-section__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
}

.newsletter-section__text .section-title {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-3);
}

.newsletter-section__text p {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
}

.newsletter-section__form {
    flex-shrink: 0;
    min-width: 380px;
}

.newsletter-section__form .newsletter-form {
    flex-direction: column;
}

.newsletter-rgpd {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

/* ============================================================
   8. UTILITAIRES
   ============================================================ */

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

.text-navy    { color: var(--color-navy); }
.text-gold    { color: var(--color-gold); }
.text-burgundy { color: var(--color-burgundy); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted   { color: var(--color-text-muted); }
.text-on-dark { color: var(--color-text-on-dark); }

.bg-cream   { background-color: var(--color-cream); }
.bg-navy    { background-color: var(--color-navy); }

.mt-0  { margin-top: 0; }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mt-8  { margin-top: var(--space-8); }
.mt-6  { margin-top: var(--space-6); }

.w-full { width: 100%; }

.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;
}

/* ============================================================
   9. ACCESSIBILITÉ & RESPONSIVE
   ============================================================ */

/* ---- Skip link ---- */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: calc(var(--z-header) + 1);
    padding: var(--space-3) var(--space-6);
    background: var(--color-navy);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top var(--transition-fast);
}
.skip-link:focus {
    top: 0;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .hero__scroll { animation: none; }
}

/* ---- Focus visible global ---- */
:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

/* ============================================================
   BREAKPOINTS — Mobile first
   --bp-sm:  640px   smartphones large
   --bp-md:  768px   tablettes portrait
   --bp-lg:  1024px  tablettes paysage / laptops
   --bp-xl:  1280px  desktop standard
   ============================================================ */

/* --- Tablette (max-width 1024px) --- */
@media (max-width: 1024px) {
    h1 { font-size: var(--fs-4xl); }
    h2 { font-size: var(--fs-3xl); }

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

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

    .site-footer__main {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10);
    }

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

    .newsletter-section__form {
        min-width: 320px;
    }
}

/* --- Mobile (max-width 768px) --- */
@media (max-width: 768px) {
    :root {
        --header-h-desktop: var(--header-h-mobile);
    }

    .container {
        padding-inline: var(--space-4);
    }

    .section {
        padding-block: var(--space-12);
    }

    /* Header mobile */
    .site-nav,
    .lang-switcher {
        display: none;
    }

    .site-header__burger {
        display: flex;
    }

    /* Logo plafonné pour respirer dans le header mobile */
    .site-logo img {
        height: 52px;
    }

    /* Hero */
    .hero {
        min-height: 80vh;
    }

    .hero__title {
        font-size: 2rem; /* 32px mobile */
    }

    .hero__subtitle {
        font-size: var(--fs-base);
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero__scroll { display: none; }

    /* Audience */
    .audience-grid {
        grid-template-columns: 1fr;
    }

    .audience-card {
        padding: var(--space-8);
    }

    /* Why Albania */
    .why-albania__grid {
        grid-template-columns: 1fr;
    }

    /* Featured */
    .featured-properties__grid {
        grid-template-columns: 1fr;
    }

    .featured-properties__header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Team */
    .team-card {
        flex-direction: column;
    }

    /* CTA */
    .cta-banner__title {
        font-size: var(--fs-3xl);
    }

    /* Newsletter */
    .newsletter-section__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .newsletter-section__form {
        min-width: unset;
        width: 100%;
    }

    .newsletter-form {
        flex-direction: column;
        max-width: 100%;
    }

    /* Footer */
    .site-footer__main {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .site-footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Section title */
    .section-title {
        font-size: var(--fs-3xl);
    }

    /* Toast */
    .toast-container {
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
    }
}

/* =============================================================================
   8. MISE EN COULEUR DES PAGES ÉDITORIALES — ajout du 2026-09-30
   -----------------------------------------------------------------------------
   Demande d'Alain : « mettre un peu de couleur pour rendre le site plus
   attractif ». Ce bloc n'utilise QUE la palette déjà définie dans :root et ne
   touche à aucune règle existante : il s'ajoute à la fin de la feuille, donc il
   se retire en supprimant la section.

   Contrastes vérifiés avant écriture (WCAG 2.1 AA, seuil 4,5 pour le texte) :
     texte primaire sur crème ........ 12,73
     texte secondaire sur crème ......  6,27
     navy sur crème .................. 15,81
     adriatique sur crème ............  5,38
     bordeaux sur crème ..............  9,28
     texte clair sur navy ............ 15,67
     texte clair sur adriatique ......  5,34
   L'OR (#c8a000) n'atteint que 2,48 sur blanc : il n'est employé ici QUE comme
   filet, bordure ou pastille décorative, JAMAIS pour du texte sur fond clair.
   ============================================================================= */

/* --- 8.1 Bandeau d'en-tête des pages éditoriales --------------------------- */
/* Cible les sections qui contiennent un fil d'Ariane, donc les pages Services,
   Investir en Albanie, Qui sommes-nous, FAQ, Contact et les pages légales.
   Les navigateurs sans :has() ignorent la règle : la page reste telle quelle. */
.section:has(> .container > .breadcrumb),
.section:has(> .container--narrow > .breadcrumb) {
    background-color: var(--color-cream);
    border-bottom: 3px solid var(--color-gold);
}

.section:has(.breadcrumb) .breadcrumb {
    border-bottom-color: rgba(26, 26, 46, 0.12);
}

/* --- 8.2 Blocs éditoriaux (services, sections longues) --------------------- */
.opportunities-section {
    position: relative;
    margin: var(--space-8) 0;
    padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
    border-top: none;
    border-left: 4px solid var(--color-gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background-color: var(--color-cream);
}

.opportunities-section + .opportunities-section {
    margin-top: var(--space-10);
}

.opportunities-section__title {
    color: var(--color-navy);
}

/* L'accroche d'un service : même rôle qu'un chapeau, on la distingue du corps. */
.opportunities-section .section-subtitle {
    color: var(--color-burgundy);
    font-size: var(--fs-base);
    max-width: none;
    margin-bottom: var(--space-4);
}

/* --- 8.3 Cartes « Pourquoi l'Albanie » ------------------------------------- */
.why-card {
    border-top: 4px solid var(--color-gold);
}

.why-card__title {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* --- 8.4 FAQ : pastille de catégorie et filet de repérage ------------------ */
.faq-item {
    border-left: 4px solid var(--color-adriatic-blue);
}

.faq-item[open] {
    background-color: var(--color-cream);
}

.faq-item__category {
    background-color: var(--color-adriatic-blue);
    color: var(--color-text-on-dark);
}

/* --- 8.5 Pastille de l'équipe --------------------------------------------- */
/* Le cercle est vide tant qu'aucune photo n'est fournie : un aplat dégradé vaut
   mieux qu'un trou gris. */
.team-card__photo {
    background: linear-gradient(135deg, var(--color-adriatic-blue), var(--color-navy));
}

/* --- 8.6 Respiration : fond crème pour la dernière section de contenu ------ */
.cta-banner + .site-footer,
.section:last-of-type:not(:has(.breadcrumb)):not(.cta-banner):not(.section--dark) {
    background-color: var(--color-bg-default);
}

/* =============================================================================
   8.7 PHOTOGRAPHIE DU HERO — ajout du 2026-10-01
   -----------------------------------------------------------------------------
   Remplace l'image Hero/hoteles-durres-playa-golem.jpg, dont les droits ne sont
   pas etablis, par la photo validee par Alain (Unsplash, credits dans
   CREDITS-PHOTOS.md). L'ancien fichier n'est plus reference nulle part : il peut
   etre supprime du depot.

   Opacite du voile : 0,65. Ce n'est pas un chiffre choisi a vue. La photo a ete
   mesuree pixel par pixel dans la zone ou le texte du hero peut se poser
   (colonne de gauche, bande verticale 18 %-82 %) : sa luminance maximale y est
   de 0,994 — le ciel est quasiment blanc. Compose avec le navy a 0,65, le pire
   fond retombe a 0,147, soit :
       titre blanc #ffffff ....... 5,33
       texte clair #f5f5f7 ....... 4,90
   Les deux passent le seuil AA de 4,5 sur le point le plus clair de l'image,
   sans dependre du cadrage. A 0,60 le texte clair tombe a 4,16 : c'est la marge
   reelle, il n'y a pas de place pour alleger le voile.
   ============================================================================= */

.hero__bg {
    background-image: url('/assets/images/Pages/accueil-plage-1280.webp?v=20261001');
    /* Le cadrage descend sous le ciel : horizon, parasols et plage dans l'axe. */
    background-position: center 62%;
}

@media (max-width: 767px) {
    .hero__bg { background-image: url('/assets/images/Pages/accueil-plage-768.webp?v=20261001'); }
}

@media (min-width: 1440px) {
    .hero__bg { background-image: url('/assets/images/Pages/accueil-plage-1920.webp?v=20261001'); }
}

/* Voile uniforme : .hero est en align-items: center, le texte peut se poser
   n'importe ou dans la hauteur. Un degrade qui s'eclaircit au milieu — c'etait
   le cas du precedent, 0,35 a 40 % — eclaircit precisement la ou le texte est. */
.hero__bg::after {
    background: linear-gradient(
        to bottom,
        rgba(26, 26, 46, 0.65) 0%,
        rgba(26, 26, 46, 0.65) 78%,
        rgba(26, 26, 46, 0.88) 100%
    );
}

/* Le sur-titre etait en or #c8a000 : 2,47 sur ce fond, et aucun voile realiste
   ne l'amene a 4,5 (il faudrait un fond quasiment opaque). L'or reste, en filet
   decoratif ; le mot passe en texte clair. */
.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-on-dark);
}

.hero__eyebrow::before {
    content: '';
    flex: 0 0 auto;
    width: 32px;
    height: 2px;
    background-color: var(--color-gold);
}

/* 0,80 d'opacite coutait un point de contraste pour un effet invisible. */
.hero__subtitle {
    color: var(--color-text-on-dark);
}

/* =============================================================================
   8.8 PHOTOGRAPHIE D'EN-TETE DES PAGES EDITORIALES — ajout du 2026-10-01
   -----------------------------------------------------------------------------
   Une image par page, posee sous le chapeau, dans le bandeau creme de 8.1.
   Aucun texte ne passe dessus : pas de contrainte de contraste, et alt=""
   puisqu'elle est decorative (le titre de la page dit deja de quoi il s'agit).
   ============================================================================= */

.page-hero-image {
    display: block;
    width: 100%;
    height: clamp(180px, 26vw, 300px);
    object-fit: cover;
    object-position: center 58%;
    margin-top: var(--space-8);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

@media (max-width: 640px) {
    .page-hero-image {
        height: 170px;
        border-radius: var(--radius-sm);
    }
}

/* =============================================================================
   8.9 DEUX CONTRASTES INSUFFISANTS, ANTERIEURS A CE LOT — 2026-10-01
   -----------------------------------------------------------------------------
   Releves par l'audit axe du 2026-10-01 sur les 24 pages. Ils ne viennent pas
   des sections 8.1 a 8.8 : ce sont deux couleurs de la feuille d'origine. Les
   valeurs ci-dessous sont calculees, pas choisies a l'oeil.

   a) .form-helper dans la section equipe, fond navy
      #5a5a6a sur #1a1a2e ............................ 2,52  (echec)
      rgba(245,245,247,0.55) sur #1a1a2e .............. 5,57  (AA)
      C'est exactement le traitement deja retenu pour le bas du pied de page :
      meme opacite, meme intention — un texte secondaire sur fond sombre.

   b) .property-card__ref, fond blanc
      #8a8a96 (--color-text-muted) sur blanc .......... 3,41  (echec)
      #70707a sur blanc ............................... 4,90  (AA)
      Le ton reste plus clair que le texte courant (#5a5a6a, 6,76), donc la
      hierarchie visuelle de la carte est conservee. Attention : #767680 ne
      donne que 4,49 — il echoue d'un centieme. La marge est etroite, ne pas
      eclaircir cette valeur sans la recalculer.

   --color-text-muted n'est PAS modifie : l'audit ne l'a trouve en defaut que
   sur cette classe. Le changer globalement toucherait des cas non mesures.
   ============================================================================= */

:root {
    /* Variante de --color-text-muted conforme AA sur fond blanc. */
    --color-text-muted-aa: #70707a;
}

.team-section .form-helper {
    color: rgba(245, 245, 247, 0.55);
}

.property-card__ref {
    color: var(--color-text-muted-aa);
}

/* =============================================================================
   8.10 ENCART D'INFORMATION DE FORMULAIRE — 2026-10-01
   -----------------------------------------------------------------------------
   Sert a annoncer que le formulaire de contact n'est pas en service. Ce n'est
   pas une erreur : .form-error est rouge et alarme pour rien. Meme traitement
   visuel que les blocs editoriaux (fond creme, filet or), donc deja coherent.

   Contraste : texte primaire #2c2c3a sur creme #faf6ec = 12,73. Aucune opacite
   n'est appliquee : attenuer un encart attenue aussi son contraste.
   ============================================================================= */

.form-notice {
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--color-gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background-color: var(--color-cream);
    color: var(--color-text-primary);
}