@import "components/header.css";
@import "components/footer.css";
@import "components/buttons.css";

/* =========================
   PLAYFAIR DISPLAY
========================= */

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-display/PlayfairDisplay-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-display/PlayfairDisplay-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-display/PlayfairDisplay-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-display/PlayfairDisplay-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================
   HERO IMAGE LOADING
========================= */

.home-hero::before,
.entreprise-hero::before,
.nos-metiers-hero::before,
.realisations-hero::before {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.home-hero.is-hero-image-loaded::before,
.entreprise-hero.is-hero-image-loaded::before,
.nos-metiers-hero.is-hero-image-loaded::before,
.realisations-hero.is-hero-image-loaded::before {
    opacity: 1;
}

:root {
    /* =========================
       COLORS
       Règles d’usage :
       - base-* : palette brute
       - layout : titres, textes, labels
       - article-* : variables du template article, alignées sur layout
       - navigation : header / menus uniquement
       - footer-* : footer uniquement
       - cta : boutons et liens d’action
    ========================= */

    /* Base */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-grey-dark: #4e5056;
    --color-accent-warm: #b89c78;
    --color-accent-warm-contrast: #7a5f3e;
    --color-grey-text: #333;
    --color-beige-brand: #eadac4;
    --color-beige-light: #d8c7ac;
    --color-background-soft: #eadac4;

    /* Layout */
    --color-text-hero: var(--color-white);
    --color-eyebrow: var(--color-black);
    --color-title: var(--color-black);
    --color-text: var(--color-grey-text);

    /* articles template */
    --color-article-title: var(--color-title);
    --color-article-text: var(--color-text);
    --color-article-meta: rgba(0, 0, 0, 0.5);

    /* Navigation */
    --color-topbar-bg: var(--color-grey-dark);
    --color-topbar-text: var(--color-white);
    --color-header-bg: var(--color-white);
    --color-nav-link: var(--color-black);
    --color-submenu-bg: var(--color-grey-dark);
    --color-submenu-text: var(--color-white);

    /* Footer */
    --color-footer-bg: var(--color-grey-dark);
    --color-footer-text: var(--color-white);
    --color-footer-soft: rgba(255, 255, 255, 0.82);
    --color-footer-muted: rgba(255, 255, 255, 0.74);

    /* CTA */
    --color-cta: var(--color-black);
    --color-cta-text: var(--color-black);
    --color-cta-border: var(--color-black);
    --color-cta-hover-bg: var(--color-black);
    --color-cta-hover-text: var(--color-white);
    --color-cta-header: var(--color-black);
    --color-cta-header-hover: var(--color-beige-light);

    /* =========================
       FONT FAMILY
    ========================= */

    --font-main: "Playfair Display", sans-serif;

    /* =========================
       FONT WEIGHTS
       Règles d’usage :
       - title : titres de sections / cartes / hero / article
       - text : textes courants
       - eyebrow : petits labels
       - article-* : déclinaisons du template article, alignées sur title / text / eyebrow
       - cta : boutons / liens d’action
       - ui : navigation / header
       - footer-* : footer uniquement
    ========================= */

    /* UI / Header */
    --font-weight-heading: 500;
    --font-weight-icon: 700;

    /* Layout */
    --font-weight-eyebrow: 400;
    --font-weight-title: 500;
    --font-weight-text: 400;

    /* articles template */
    --font-weight-article-title: var(--font-weight-title);
    --font-weight-article-text: var(--font-weight-text);
    --font-weight-article-eyebrow: var(--font-weight-eyebrow);

    /* Footer */
    --font-weight-footer-logo-letter: 700;
    --font-weight-footer-brand-title: 500;
    --font-weight-footer-column-title: 500;

    /* CTA / Buttons */
    --font-weight-cta: 700;
    --font-weight-button-header: 700;
    --font-weight-button-hero: 700;
    --font-weight-button-footer: 700;

    /* =========================
       FONT SIZES
       Règles d’usage :
       - ui-* : header / navigation uniquement
       - footer-* : footer uniquement
       - hero-* : blocs hero
       - section-* : sections éditoriales
       - article-* : template article
       - card-* : cartes / blocs internes
       - button-* : boutons spécifiques
       - cta : liens ou boutons génériques
    ========================= */

    /* UI / Header */
    --font-size-ui-topbar-icon: clamp(13px, 0.9vw, 15px);
    --font-size-ui-topbar-text: clamp(11px, 0.75vw, 12px);
    --font-size-ui-nav: clamp(14px, 1.1vw, 16px);
    --font-size-ui-nav-chevron: clamp(11px, 0.8vw, 13px);
    --font-size-ui-submenu: clamp(13px, 0.95vw, 14px);
    --font-size-ui-mobile-nav: 15px;
    --font-size-ui-mobile-submenu: 13px;

    /* Footer */
    --font-size-footer-logo-letter: clamp(48px, 5vw, 76px);
    --font-size-footer-logo-text: 14px;
    --font-size-footer-brand-title: clamp(32px, 3vw, 48px);
    --font-size-footer-brand-text: clamp(15px, 1vw, 17px);
    --font-size-footer-column-title: clamp(13px, 0.9vw, 14px);
    --font-size-footer-link: clamp(14px, 0.95vw, 15px);
    --font-size-footer-bottom: 13px;
    --font-size-footer-cta-title: clamp(24px, 2.4vw, 38px);

    /* Hero */
    --font-size-hero-title: clamp(34px, 5vw, 72px);
    --font-size-hero-text: clamp(13px, 1.25vw, 19px);

    /* Sections */
    --font-size-section-eyebrow: clamp(11px, 0.8vw, 13px);
    --font-size-section-title: clamp(34px, 3.2vw, 52px);
    --font-size-section-text: clamp(15px, 1vw, 17px);

    /* articles template */
    --font-size-article-eyebrow: var(--font-size-section-eyebrow);
    --font-size-article-title: clamp(34px, 3.5vw, 56px);
    --font-size-article-text: clamp(16px, 1.05vw, 18px);
    --font-size-article-heading: var(--font-size-card-title);
    --font-size-article-heading-sm: var(--font-size-card-title-sm);
    --font-size-article-meta: var(--font-size-card-meta);

    /* Cards / Blocks */
    --font-size-card-title: clamp(24px, 2vw, 34px);
    --font-size-card-title-sm: clamp(22px, 1.8vw, 30px);
    --font-size-card-text: var(--font-size-section-text);
    --font-size-card-meta: 12px;

    /* Specific display text */
    --font-size-overlay-title: clamp(20px, 1.8vw, 28px);
    --font-size-workshop-caption: clamp(18px, 1.6vw, 26px);
    --font-size-timeline-year: clamp(32px, 3vw, 52px);
    --font-size-stat-number: clamp(38px, 4vw, 68px);

    /* Buttons / CTA */
    --font-size-button-header: clamp(15px, 1.2vw, 17px);
    --font-size-button-hero: clamp(15px, 1.15vw, 18px);
    --font-size-button-footer: clamp(13px, 0.9vw, 15px);
    --font-size-cta: clamp(13px, 0.9vw, 15px);

    /* =========================
       LAYOUT
    ========================= */

    --top-bar-height: 46px;
    --main-header-height: clamp(76px, 6vw, 100px);
    --hero-bottom-white-band: clamp(26px, 4vw, 64px);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-main), serif;
    background: var(--color-white);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

/* =========================
   INTERACTIONS
   Curseur sur éléments interactifs
========================= */

.card {
    cursor: pointer;
}