/* =========================================================
   TYPOGRAPHIES
========================================================= */

@import url('global.css');
@import url('section/header.css');
@import url('section/footer.css');

/* =========================================================
   DESIGN TOKENS GLOBAUX
========================================================= */

:root {
    --merriweather: "Merriweather", serif;
    --poppins: "Poppins", sans-serif;

    --couleur-noir: 0, 0, 0;
    --couleur-blanc: 217, 217, 217;
    --couleur-rouge: 255, 0, 0;
    --couleur-gris-clair: 81, 81, 81;

    --color-black: #000;
    --color-black-soft: #0d0d0d;
    --color-white: #f2f2f2;
    --color-gray: #d9d9d9;
    --color-red: #ff0000;

    --site-width: 1320px;
    --site-padding: clamp(24px, 5vw, 72px);
    --header-height: 88px;

    --font-weight-medium: 500;
    --headline-font-size: 48px;
    --headline-font-weight: 500;
    --subheadline-font-size: 28px;
    --subheadline-font-weight: 500;
    --body-font-size: 18px;

    --ease-premium: cubic-bezier(.22, 1, .36, 1);
    --border-light: rgba(255, 255, 255, .12);
    --border-dark: rgba(0, 0, 0, .14);
}

body {
    margin: 0;
    font-family: var(--poppins);
    font-weight: var(--font-weight-medium);
    background: var(--color-black);
    color: var(--color-white);
}

@media (max-width: 800px) {
    :root {
        --header-height: 72px;
    }
}

/* =========================================================
   SYSTÈME VISUEL COMMUN — V2
========================================================= */
:root {
    --surface-dark: #050505;
    --surface-dark-soft: #0d0d0d;
    --surface-light: #d9d9d9;
    --surface-light-soft: #f2f2f2;
    --text-on-dark: #f2f2f2;
    --text-muted-on-dark: rgba(255, 255, 255, .66);
    --text-on-light: #050505;
    --text-muted-on-light: rgba(0, 0, 0, .62);
    --accent: #ff0000;
    --content-width: 1320px;
    --content-gutter: clamp(24px, 5vw, 72px);
    --section-space: clamp(96px, 8vw, 136px);
    --section-space-large: clamp(120px, 10vw, 170px);
    --line-dark: rgba(255, 255, 255, .14);
    --line-light: rgba(0, 0, 0, .15);
    --label-size: 10px;
    --body-small: 14px;
    --body-regular: 15px;
    --title-tight: -.045em;
}

::selection {
    background: var(--accent);
    color: #fff;
}

:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 4px;
}

.site-admin-shortcut{display:none!important;}




/* ===== PROJETS PASSION — GALLERY V8 ===== */
.passion--gallery{padding:70px 0 140px;background:#050505;color:#f4f4f1}
.passion-gallery__head,.passion-gallery__grid{width:min(1500px,calc(100% - 96px));margin-inline:auto}
.passion-gallery__head{display:grid;grid-template-columns:.55fr 1.45fr;gap:60px;align-items:end;margin-bottom:54px}
.passion__eyebrow{margin:0 0 8px;font-size:10px;line-height:1.5;letter-spacing:.16em;font-weight:600;color:rgba(255,255,255,.55)}
.passion-gallery__intro{display:grid;grid-template-columns:1fr .72fr;gap:50px;align-items:end}
.passion-gallery__intro h2{font-family:var(--merriweather);font-size:clamp(52px,6vw,100px);font-weight:400;line-height:.9;letter-spacing:-.055em;margin:0}
.passion-gallery__intro h2 em{font-weight:400;color:#ff1616}
.passion-gallery__intro p{font-size:15px;line-height:1.65;margin:0 0 7px;color:rgba(255,255,255,.68);max-width:470px}
.passion-gallery__grid{display:grid;grid-template-columns:1.35fr .65fr;grid-template-rows:minmax(310px,34vw) minmax(310px,34vw);gap:18px}
.passion-tile{position:relative;display:block;overflow:hidden;background:#161616;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.09)}
.passion-tile--hero{grid-row:1/3}.passion-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,1,.36,1),filter .5s ease}
.passion-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.82) 100%);pointer-events:none}
.passion-tile:hover img{transform:scale(1.025)}
.passion-tile__index{position:absolute;z-index:2;top:20px;left:20px;font-size:10px;letter-spacing:.15em;border:1px solid rgba(255,255,255,.4);padding:8px 10px}
.passion-tile__overlay{position:absolute;z-index:2;left:26px;right:26px;bottom:24px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px 20px}
.passion-tile__overlay p{grid-column:1/-1;margin:0;font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.65)}
.passion-tile__overlay h3{font-family:var(--merriweather);font-weight:400;font-size:clamp(34px,3.6vw,68px);line-height:.92;letter-spacing:-.045em;margin:0}.passion-tile:not(.passion-tile--hero) .passion-tile__overlay h3{font-size:clamp(30px,2.8vw,50px)}
.passion-tile__overlay span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
@media(max-width:900px){.passion--gallery{padding:55px 0 90px}.passion-gallery__head,.passion-gallery__grid{width:calc(100% - 32px)}.passion-gallery__head{grid-template-columns:1fr;gap:18px}.passion-gallery__intro{grid-template-columns:1fr;gap:20px}.passion-gallery__grid{grid-template-columns:1fr;grid-template-rows:none}.passion-tile,.passion-tile--hero{grid-row:auto;aspect-ratio:4/3}.passion-tile__overlay{left:18px;right:18px;bottom:18px}}

/* V12 — projets Passion sélectionnés */
.passion-gallery__grid--selected{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto}.passion-gallery__grid--selected .passion-tile{aspect-ratio:4/5;grid-row:auto}.passion-gallery__grid--selected .passion-tile__overlay h3{font-size:clamp(28px,2.5vw,44px)}@media(max-width:1100px){.passion-gallery__grid--selected{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.passion-gallery__grid--selected{grid-template-columns:1fr}.passion-gallery__grid--selected .passion-tile{aspect-ratio:4/3}}