/* =========================================================================
   JAPRODS — Feuille de style principale
   Clone du site source, reconstruit sur stack propre (CI4).
   Toutes les couleurs et polices sont pilotées par variables (:root).
   Pour changer la charte : éditer UNIQUEMENT le bloc :root ci-dessous.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. POLICES — Cormorant en local (placeholder pour The Seasons)
   Fichiers dans /public/assets/fonts/ , donc ../fonts/ depuis ce CSS.
   Mapping demandé : corps = Light(300), sous-titres = Regular(400), titres = Bold(700)
   ------------------------------------------------------------------------- */
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/cormorant-v24-latin_latin-ext-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/cormorant-v24-latin_latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/cormorant-v24-latin_latin-ext-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/cormorant-v24-latin_latin-ext-600.woff2') format('woff2');
    font-weight: 600;                 /* pour la navigation (un peu plus gras) */
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------------------
   2. VARIABLES GLOBALES
   ------------------------------------------------------------------------- */
:root {
    /* ---- Couleurs (marque : noir, à la demande du client) ---- */
    --color-brand:          #262626;   /* couleur de marque : liens, hovers, boutons, barre haute */
    --color-brand-dark:     #000000;   /* variante foncée : hover boutons */
    --color-hero-btn:       rgba(38, 38, 38, 0.78);  /* bouton du carrousel */
    --color-text:           #8d8d8d;   /* texte courant */
    --color-heading:        #3f3f3f;   /* titres */
    --color-heading-hover:  #152332;   /* survol des items de menu */
    --color-bg:             #ffffff;   /* fond général */

    --color-topbar-bg:      #262626;   /* barre de contact en haut */
    --color-topbar-text:    #ffffff;
    --color-topbar-sep:     rgba(0, 0, 0, 0.25);  /* séparateurs verticaux */
    --color-topbar-sep-hi:  rgba(255, 255, 255, 0.10);  /* liseré clair pour le relief */

    --color-header-bg:      #ffffff;
    --color-header-border:  rgba(0, 0, 0, 0.08);

    --color-footer-bg:      #262626;   /* zone widgets du footer */
    --color-footer-text:    #e3e3e3;
    --color-footer-head:    #ffffff;
    --color-footer-border:  rgba(255, 255, 255, 0.10);

    --color-copy-bg:        #222222;   /* barre copyright */
    --color-copy-text:      #ffffff;

    /* ---- Typographie ---- */
    --font-family-base:     'Cormorant', Georgia, 'Times New Roman', serif;
    --font-weight-body:     400;       /* paragraphes  -> Cormorant Regular */
    --font-weight-subtitle: 400;       /* sous-titres  -> Cormorant Regular */
    --font-weight-title:    700;       /* titres       -> Cormorant Bold */
    --font-weight-nav:      700;       /* navigation   -> Cormorant Bold */

    /* Cormorant « rend petit » : on remonte légèrement l'échelle vs le Roboto d'origine */
    --font-size-base:       1.125rem;  /* ~18px */
    --line-height-base:     1.7;

    /* ---- Layout ---- */
    --container-max:        1200px;
    --container-pad:        15px;
    --header-height:        96px;      /* hauteur logo/header principal */
    --z-header:             1000;
    --z-dropdown:           1010;

    /* ---- Transitions ---- */
    --transition:           0.2s ease;
}

/* -------------------------------------------------------------------------
   3. RESET LÉGER
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Empêche les sous-menus absolus (masqués) de créer une barre de scroll horizontale.
       'clip' n'établit pas de conteneur de défilement -> ne casse pas le header sticky
       (contrairement à overflow:hidden). */
    overflow-x: clip;
}

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

a {
    color: var(--color-brand);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover,
a:focus { color: var(--color-brand-dark); }

ul { list-style: none; margin: 0; padding: 0; }

button { font-family: inherit; cursor: pointer; }

/* Icônes SVG inline */
.icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
}
.icon--sm { width: 16px; height: 16px; }
.icon--xs { width: 12px; height: 12px; }

/* Accessibilité : focus visible au clavier */
:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   4. TYPOGRAPHIE
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    color: var(--color-heading);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-title);   /* titres = Bold */
    line-height: 1.2;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.35rem; }
h5 { font-size: 1.15rem; }
h6 { font-size: 1rem; }

/* Sous-titres : classe utilitaire -> Cormorant Regular */
.subtitle {
    font-weight: var(--font-weight-subtitle);
    color: var(--color-text);
}

p { margin: 0 0 1em; }

/* -------------------------------------------------------------------------
   5. CONTENEUR
   ------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* -------------------------------------------------------------------------
   6. BARRE DE CONTACT (top bar, rouge)
   ------------------------------------------------------------------------- */
.topbar {
    background-color: var(--color-topbar-bg);
    color: var(--color-topbar-text);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--color-topbar-sep);
}
.topbar__inner {
    display: flex;
    align-items: stretch;                              /* cellules pleine hauteur -> séparateurs alignés */
    min-height: 50px;
    border-right: 1px solid var(--color-topbar-sep);   /* ligne verticale au bord droit du conteneur */
    box-shadow: inset -1px 0 0 var(--color-topbar-sep-hi);  /* liseré clair -> relief */
}
.topbar a { color: var(--color-topbar-text); }
.topbar a:hover { opacity: 0.85; color: var(--color-topbar-text); }

/* Bloc email : prend tout l'espace à gauche des réseaux, email centré dedans */
.topbar__contact {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-left: 1px solid var(--color-topbar-sep);    /* séparateur avant l'email */
    box-shadow: inset 1px 0 0 var(--color-topbar-sep-hi);  /* liseré clair -> relief */
}

/* Réseaux : chaque picto dans sa cellule, séparé par une bordure gauche */
.topbar__social {
    display: flex;
    align-items: stretch;
}
.topbar__social a {
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-left: 1px solid var(--color-topbar-sep);    /* séparateur entre pictos */
    box-shadow: inset 1px 0 0 var(--color-topbar-sep-hi);  /* liseré clair -> relief */
}

/* -------------------------------------------------------------------------
   7. HEADER PRINCIPAL
   ------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--color-header-bg);
    border-bottom: 1px solid var(--color-header-border);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    gap: 1.5rem;
}
.site-header__logo {
    flex-shrink: 0;              /* ne se comprime jamais, même avec une nav large */
    display: inline-flex;
    align-items: center;
}
.site-header__logo img {
    height: 60px;
    width: auto;
    display: block;
}

/* Groupe d'actions à droite : nav + sélecteur de langue + hamburger */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ---- Navigation desktop ---- */
.main-nav { display: block; }
.main-nav > ul { display: flex; align-items: center; gap: 0.25rem; }

.main-nav > ul > li > a {
    display: block;
    padding: 0 0.9rem;
    line-height: var(--header-height);
    color: var(--color-heading);
    font-weight: var(--font-weight-nav);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    /* Cormorant plafonne à 700 : on épaissit le trait pour aller "plus gras".
       Régler cette valeur (0 = poids brut, 0.6px = très épais). */
    -webkit-text-stroke: 0.4px currentColor;
    text-stroke: 0.4px currentColor;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.is-active > a { color: var(--color-brand); }

/* Chevron fin (outline) pour les items déroulants */
.main-nav .has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 0.5em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition);
}
.main-nav .has-children:hover > a::after {
    transform: translateY(0) rotate(225deg);   /* pivote vers le haut au survol */
}

/* ---- Sous-menus (dropdown) ---- */
.main-nav .sub-menu {
    position: absolute;
    min-width: 240px;
    background-color: var(--color-header-bg);
    box-shadow: rgba(0, 0, 0, 0.08) 0 10px 60px 1px;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: var(--z-dropdown);
}
.main-nav li { position: relative; }
.main-nav li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.main-nav .sub-menu a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.25rem;
    color: var(--color-heading);
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}
/* Pictos de sous-menu */
.main-nav .sub-menu .icon,
.main-nav .mega-title .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--color-brand);        /* touche de rouge, texte reste sombre */
}
.main-nav .sub-menu a:hover {
    color: var(--color-brand);
    background-color: rgba(0, 0, 0, 0.02);
}

/* ---- État actif : page courante ---- */
.main-nav > ul > li > a { position: relative; }
/* Item principal actif : couleur de marque + soulignement + trait plus gras */
.main-nav > ul > li.is-active > a {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 7px;
    text-decoration-thickness: 2px;
    -webkit-text-stroke: 0.7px currentColor;
    text-stroke: 0.7px currentColor;
}
/* Item de sous-menu actif (liste verticale : liseré latéral + fond) */
.main-nav .sub-menu a.is-active {
    color: var(--color-brand);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    background-color: rgba(0, 0, 0, 0.045);
    box-shadow: inset 3px 0 0 var(--color-brand);
}
/* Méga-menu : on garde le fond (comme au survol), on retire juste le liseré collé */
.main-nav .mega-menu .mega-col a.is-active {
    box-shadow: none;
}

/* Sous-menu ancré à droite (items de fin de barre) : ouvre vers la gauche */
.main-nav .sub-menu--right { right: 0; left: auto; }

/* ---- Méga-menu 2 colonnes (SITE WEB) ---- */
.main-nav .mega-menu {
    display: flex;
    gap: 2rem;
    min-width: 660px;
    padding: 1.5rem 1.75rem;
}
.main-nav .mega-menu .mega-col { flex: 1; }
.main-nav .mega-menu .mega-col > .mega-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-header-border);
    color: var(--color-heading);
    font-weight: var(--font-weight-title);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;               /* titres de colonne sur une seule ligne */
}
.main-nav .mega-menu .mega-col a {
    padding: 0.45rem 0.6rem;
    margin: 0 -0.6rem;          /* compense le padding : le texte reste aligné, le fond respire */
    white-space: normal;
}

/* -------------------------------------------------------------------------
   8. BARRE / MENU MOBILE
   ------------------------------------------------------------------------- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    background: none;
    border: none;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background-color: var(--color-heading);
    transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   9. SÉLECTEUR DE LANGUE
   ------------------------------------------------------------------------- */
.lang-switch { position: relative; }
.lang-switch__current {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: 1px solid var(--color-header-border);
    padding: 0.35rem 0.7rem;
    color: var(--color-heading);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;                 /* un peu plus gras */
}
.lang-switch__list {
    position: absolute;
    right: 0;
    min-width: 160px;
    background-color: var(--color-header-bg);
    box-shadow: rgba(0, 0, 0, 0.08) 0 10px 60px 1px;
    padding: 0.35rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: var(--z-dropdown);
}
.lang-switch:hover .lang-switch__list,
.lang-switch:focus-within .lang-switch__list,
.lang-switch.is-open .lang-switch__list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-switch__list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--color-heading);
    font-size: 0.9rem;
    font-weight: 600;                 /* un peu plus gras */
}
.lang-switch__list a:hover { color: var(--color-brand); background-color: rgba(0, 0, 0, 0.02); }
.lang-switch__list a.is-active { color: var(--color-brand); font-weight: 700; }

/* Drapeaux */
.lang-switch .flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex: 0 0 auto;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);   /* léger contour pour les drapeaux clairs */
}

/* -------------------------------------------------------------------------
   10. FOOTER
   ------------------------------------------------------------------------- */
.site-footer__widgets {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 4rem 0;
}
.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}
.site-footer__widgets h3 {
    color: var(--color-footer-head);
    font-size: 1.35rem;
    margin-bottom: 1.25rem;
}
.site-footer__widgets a,
.site-footer__widgets li a { color: var(--color-footer-head); }
.site-footer__widgets a:hover { color: #fff; }   /* footer sombre : éclaircir, pas assombrir */

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-footer-border);
}
/* Pictos en clair : sur le footer sombre, la couleur de marque (noire) serait invisible */
.footer-contact-item .icon {
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
    margin-top: 0.15em;
}

.footer-projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
.footer-projects a {
    display: block;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    position: relative;
}
.footer-projects a::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity var(--transition);
}
.footer-projects a:hover::after { opacity: 1; }

.footer-social { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-footer-border);
    font-size: 1.05rem;
}
.footer-social a:hover {
    background-color: rgba(255, 255, 255, 0.14);   /* footer sombre : fond clair au survol */
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* ---- Barre copyright ---- */
.site-footer__copyright {
    background-color: var(--color-copy-bg);
    color: var(--color-copy-text);
    padding: 1.75rem 0;
    font-size: 0.9rem;
}
.site-footer__copyright a { color: var(--color-copy-text); }
.site-footer__copyright a:hover { color: #fff; }   /* barre sombre : éclaircir */

/* -------------------------------------------------------------------------
   11. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .nav-toggle { display: flex; }

    /* La nav desktop devient un panneau déroulant */
    .main-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background-color: var(--color-header-bg);
        border-top: 1px solid var(--color-header-border);
        box-shadow: rgba(0, 0, 0, 0.08) 0 10px 40px 1px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .main-nav.is-open { max-height: 80vh; overflow-y: auto; }

    .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
    .main-nav > ul > li > a { line-height: 1.4; padding: 0.9rem 1.25rem; }

    /* Sous-menus : accordéon, plus de position absolue */
    .main-nav .sub-menu,
    .main-nav .mega-menu {
        position: static;
        min-width: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        padding: 0 0 0 1.25rem;
    }
    .main-nav .mega-menu { flex-direction: column; gap: 0; }
    .main-nav li.is-open > .sub-menu,
    .main-nav li.is-open > .mega-menu { display: block; }
    .main-nav li:hover > .sub-menu { transform: none; }

    /* Sélecteur de langue en mobile : compact dans la barre (drapeau + chevron),
       la liste s'ouvre au clic (.is-open) en dropdown ancré à droite. */
    .lang-switch__name { display: none; }
    .lang-switch__current { padding: 0.35rem 0.45rem; gap: 0.3rem; }
}

@media (max-width: 767px) {
    .site-footer__columns { grid-template-columns: 1fr; gap: 2rem; }
    .topbar__inner { flex-direction: column; align-items: center; min-height: 0; padding: 0.5rem 0; border-right: none; box-shadow: none; }
    .topbar__contact { border-left: none; box-shadow: none; }
    .topbar__social a:first-child { border-left: none; box-shadow: none; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* =========================================================================
   ANIMATIONS D'ENTRÉE AU SCROLL
   Les éléments sont marqués automatiquement par main.js (aucune modif de vue).
   L'état initial n'est appliqué QUE si le JS a démarré (classe .js-reveal-on
   sur <html>) : sans JS, tout reste visible.
   ========================================================================= */
.js-reveal-on .reveal {
    opacity: 0;
    transform: translateY(28px);
}
.js-reveal-on .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Respect des préférences de mouvement réduit : pas d'animation du tout */
@media (prefers-reduced-motion: reduce) {
    .js-reveal-on .reveal,
    .js-reveal-on .reveal.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}