@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@200;300;400;500&display=swap');

:root {
    --bg: #f7f5f1;
    --ink: #1a1a1a;
    --ink-soft: #6b6b6b;
    --line: #d8d4cc;
    --terracotta: rgb(162, 77, 63);
    --terracotta-soft: rgba(162, 77, 63, 0.08);
    --serif: "Inter", system-ui, -apple-system, sans-serif;
    --display: "Playfair Display", "Times New Roman", serif;
    --ease: cubic-bezier(0.65, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--serif);
    font-weight: 300;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    letter-spacing: 0.005em;
    overflow-x: hidden;
    padding-top: 140px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.4s var(--ease); }
a:hover { color: var(--terracotta); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--terracotta); color: var(--bg); }

/* ---- Header ---- */
.site-header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 4rem;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(216, 212, 204, 0.4);
    color: var(--ink);
}
.site-header a { color: inherit; }
.brand-logo {
    height: 72px;
    width: auto;
    fill: rgb(162, 77, 63);
    color: rgb(162, 77, 63);
}
.site-nav {
    display: flex;
    gap: 3rem;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.site-nav a { position: relative; padding-bottom: 4px; }
.site-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: var(--terracotta);
    transition: width 0.5s var(--ease);
}
.site-nav a:hover::after { width: 100%; }
.nav-admin { opacity: 0.4; }

/* ---- Flash messages ---- */
.flash-wrap {
    position: fixed;
    top: 110px; right: 4rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.flash {
    padding: 0.85rem 1.25rem;
    background: var(--ink);
    color: var(--bg);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    border-left: 2px solid var(--terracotta);
    animation: flashIn 0.5s var(--ease);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 260px;
}
.flash-error { border-left-color: #c44545; }
.flash-close {
    margin-left: auto;
    color: var(--bg);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0.25rem;
    opacity: 0.6;
    transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.flash-close:hover { opacity: 1; color: var(--terracotta); }
.flash.flash-hide { animation: flashOut 0.35s var(--ease) forwards; }
@keyframes flashIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes flashOut { to { transform: translateX(20px); opacity: 0; } }

/* ---- Home page: zero-scroll, hide navbar ---- */
.home-page {
    padding-top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.home-page .site-header { display: none; }
.home-page #top {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible !important;
}
.home-page .site-footer-global {
    padding: 10px 4rem;
    flex-shrink: 0;
}

/* ---- Home hero: centered logo composition ---- */
.hero-home {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 1rem;
    overflow: visible !important;
    contain: none !important;
    clip-path: none !important;
}
.logo-wrapper {
    position: relative;
    display: inline-block;
    overflow: visible !important;
    contain: none !important;
    clip-path: none !important;
    opacity: 0;
    will-change: opacity, transform;
    animation: fadeInLogo 2.2s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.logo-wrapper::after {
    content: "";
    position: absolute;
    inset: -40px;
    backdrop-filter: blur(25px);
    background: transparent;
    z-index: 10;
    pointer-events: none;
    will-change: opacity;
    animation: fadeOutBlurShield 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
.logo-svg {
    width: clamp(300px, 50vw, 700px);
    height: auto;
    display: block;
    overflow: visible !important;
    contain: none !important;
    clip-path: none !important;
    pointer-events: none;
    filter: drop-shadow(0px 12px 24px rgba(0, 0, 0, 0.45)) !important;
}
@keyframes fadeInLogo {
    0% { opacity: 0; transform: scale(0.97); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fadeOutBlurShield {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* SVG logo — disable pointer events on non-interactive parts */
.logo-block {
    pointer-events: none;
}

/* Interactive triangles inside SVG — default terracotta, hover black (triangle only) */
.logo-triangle-link {
    pointer-events: auto;
    cursor: pointer;
}
.logo-triangle-link:focus { outline: none; }
.logo-triangle {
    fill: #a24d3f;
    transition: fill 0.3s var(--ease);
}
.logo-triangle-link:hover .logo-triangle {
    fill: #000000;
}

/* Positioned text links (outside SVG, in CSS absolute) — hidden by default */
.logo-link {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #a24d3f;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
}
.logo-link span {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #a24d3f;
    white-space: nowrap;
}

/* CONTACT: aligned on the horizontal axis of the right triangle center (42%) */
.logo-link--contact {
    top: 42%;
    transform: translateY(-50%);
    left: calc(75% + 20px);
    flex-direction: row;
}

/* PROJETS: aligned on the vertical axis of the bottom triangle center (34%) */
.logo-link--projets {
    top: calc(65% + 35px);
    left: 34%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
}

/* Hover triangles → reveal text links */
.logo-wrapper:has(.logo-triangle-link--contact:hover) .logo-link--contact {
    opacity: 1;
    pointer-events: auto;
}
.logo-wrapper:has(.logo-triangle-link--projets:hover) .logo-link--projets {
    opacity: 1;
    pointer-events: auto;
}

/* Responsive: tablet */
@media (max-width: 900px) {
    .home-page .site-footer-global { padding: 8px 1.5rem; }
    .logo-svg { width: clamp(260px, 55vw, 450px); }
    .logo-link span { font-size: 15px; letter-spacing: 4px; }
}

/* Responsive: mobile */
@media (max-width: 768px) {
    .logo-svg { width: clamp(220px, 60vw, 340px); }
    .logo-link span { font-size: 13px; letter-spacing: 3px; }
}

/* ---- Hero (legacy, kept for other pages) ---- */
.hero {
    min-height: 100vh;
    padding: 12rem 4rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.hero-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 5rem;
}
.hero-title {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(2.8rem, 9vw, 10rem);
    line-height: 1;
    letter-spacing: -0.015em;
    margin: 4rem 0;
}
.line { display: block; overflow: hidden; }
.line-inner { display: block; transform: translateY(110%); }
.dot { color: var(--terracotta); font-style: normal; }
.hero-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 2rem;
    font-size: 0.95rem;
    color: var(--ink-soft);
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ink);
    transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.hero-cta .arrow { transition: transform 0.4s var(--ease); }
.hero-cta:hover { border-color: var(--terracotta); }
.hero-cta:hover .arrow { transform: translateX(8px); }

/* ---- Section heads ---- */
section { padding: 13rem 4rem; }
.section-head {
    margin-bottom: 7rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.section-num {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--terracotta);
}
.section-title {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(2.4rem, 6vw, 6rem);
    line-height: 1;
    letter-spacing: -0.01em;
    max-width: 18ch;
}

/* ==========================================================================
   GRILLE D'ARCHITECTE ÉPURÉE (Inspiration PL-NL / Magda Sakowicz)
   ========================================================================== */
.projects .gallery {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 colonnes parfaitement égales */
    gap: 1.5rem !important; /* Espacement très serré, propre et minimaliste */
    width: 100% !important;
    padding: 0 !important;
    align-items: start;
}

.projects .project {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

.project-media {
    overflow: hidden;
    background: var(--line);
    height: 100%;
    position: relative;
    width: 100%;
}
.project-media > a {
    display: block;
    width: 100%;
    height: 100%;
}

.projects .project-media img,
.projects .gallery img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 1.8s var(--ease), filter 0.7s var(--ease);
    filter: saturate(0.88);
}

/* Galerie de l'accueil — pas de fond derrière le média pour éviter
   tout liseré gris pendant l'animation de décalage GSAP. */
.projects .gallery.home-gallery .project-media {
    background: transparent !important;
    overflow: hidden;
}
.projects .gallery.home-gallery .project-media a {
    display: block;
    width: 100%;
    height: 100%;
}
.projects .gallery.home-gallery .project-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* ✂️ NETTOYAGE RADICAL : Supprime absolument tous les textes de la page d'accueil */
.project-info {
    display: none !important;
}

/* ==========================================================================
   STRUCTURE DES COLONNES ET AGENCEMENT DES FORMATS (Zéro espace vide)
   ========================================================================== */

/* --- COLONNE GAUCHE : Formats paysages horizontaux --- */
.projects .project-0 {
    grid-column: 1 !important;
    grid-row: span 2 !important;
}
.projects .project-0 .project-media { aspect-ratio: 1.4 !important; }

.projects .project-2 {
    grid-column: 1 !important;
    grid-row: span 2 !important;
}
.projects .project-2 .project-media { aspect-ratio: 1.4 !important; }

.projects .project-4 {
    grid-column: 1 !important;
    grid-row: span 2 !important;
}
.projects .project-4 .project-media { aspect-ratio: 1.4 !important; }


/* --- COLONNE DROITE : Formats portraits verticaux élancés --- */
.projects .project-1 {
    grid-column: 2 !important;
    grid-row: span 3 !important; /* Un span plus grand pour créer le décalage de hauteur */
}
.projects .project-1 .project-media { aspect-ratio: 0.85 !important; }

.projects .project-3 {
    grid-column: 2 !important;
    grid-row: span 3 !important;
}
.projects .project-3 .project-media { aspect-ratio: 0.85 !important; }

/* Dernier projet légèrement plus carré pour stabiliser le bas de la page */
.projects .project-5 {
    grid-column: 2 !important;
    grid-row: span 2 !important;
}
.projects .project-5 .project-media { aspect-ratio: 1.1 !important; }

.empty {
    text-align: center;
    color: var(--ink-soft);
    font-style: italic;
    padding: 4rem 0;
}

/* ---- Approach ---- */
.approach { background: #efeae3; }
.approach-grid { display: grid; gap: 7rem; }
.approach-lead {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    max-width: 26ch;
}
.approach-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    border-top: 1px solid var(--line);
    padding-top: 4rem;
}
.approach-cols > div { display: flex; flex-direction: column; gap: 1rem; }
.col-num {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: var(--terracotta);
}
.approach-cols h4 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 0.005em;
}
.approach-cols p { color: var(--ink-soft); font-size: 0.95rem; max-width: 32ch; line-height: 1.7; }

/* ---- Studio ---- */
.studio-text {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
    line-height: 1.4;
    max-width: 48ch;
    color: var(--ink);
}

/* ---- Studio link ---- */
.studio-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ink);
    transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.studio-link .arrow { transition: transform 0.4s var(--ease); }
.studio-link:hover { border-color: var(--terracotta); color: var(--terracotta); }
.studio-link:hover .arrow { transform: translateX(8px); }

/* ---- Contact page (wireframe layout) ---- */
.contact-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 6rem 4rem 4rem;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 200px);
}
.contact-columns {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: start;
    flex: 1;
    margin-top: 40px;
}
.contact-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.contact-circle {
    width: clamp(180px, 20vw, 280px);
    height: clamp(180px, 20vw, 280px);
    border-radius: 50%;
    background: #e8e4de;
}
.contact-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
}
.contact-line {
    display: flex;
    align-items: center;
    gap: 15px;
}
.icon-circle {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--terracotta);
    color: #fff;
}
.icon-circle svg {
    display: block;
}
.contact-infos-label {
    align-self: center;
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    color: var(--ink);
    letter-spacing: -0.01em;
}
.contact-bottom {
    margin-top: 4rem;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
}
.contact-bottom-label {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
    flex-shrink: 0;
}
.contact-bottom-line {
    height: 1px;
    background: var(--line);
    width: 100%;
    max-width: 60%;
    align-self: flex-end;
    margin-bottom: 0.1em;
}

/* ---- Contact Extended Sections ---- */
.contact-separator {
    width: 100%;
    height: 1px;
    background: #d4d0cb;
    margin: 3rem 0;
}
.contact-row-extended {
    display: grid;
    grid-template-columns: 25% 1fr;
    gap: 3rem;
    align-items: start;
}
.row-left {
    display: flex;
    align-items: flex-start;
    padding-top: 0.5rem;
}
.row-left-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: var(--ink);
}
.row-right {
    width: 100%;
}
.contact-section > .contact-row-extended:first-child {
    position: relative;
}
.contact-section > .contact-row-extended:first-child > .row-left {
    position: absolute;
    left: 0;
    top: 0;
}
.contact-section > .contact-row-extended:first-child > .row-right {
    width: 100%;
    display: flex;
    justify-content: center;
    grid-column: 1 / -1;
}
.architect-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0;
}
.architect-profile-img {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 0;
    margin-bottom: 25px;
    display: block;
}
.architect-profile-details {
    margin-left: 0;
    margin-right: 0;
}
.map-placeholder {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    background: #f0ece6;
    position: relative;
}
.map-placeholder iframe {
    display: block;
    width: 100%;
    height: 400px;
    filter: grayscale(100%);
    pointer-events: none;
}
.map-pin-link {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 50px;
    z-index: 3;
    cursor: pointer;
}
.contact-form-extended {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.contact-form-extended .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.contact-form-extended .form-label {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: var(--ink);
}
.contact-form-extended .form-row-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.contact-form-extended .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.contact-form-extended .form-hint {
    font-family: var(--serif);
    font-size: 0.75rem;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
}
.contact-form-extended input,
.contact-form-extended textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-family: var(--serif);
    font-size: 0.9rem;
    color: var(--ink);
    background: transparent;
    border: 1px solid #d4d0cb;
    border-radius: 2px;
    outline: none;
    transition: border-color 0.3s ease;
}
.contact-form-extended input:focus,
.contact-form-extended textarea:focus {
    border-color: var(--ink);
}
.contact-form-extended textarea {
    resize: vertical;
    min-height: 140px;
}
.btn-submit-extended {
    display: inline-block;
    padding: 1rem 3rem;
    background: #000;
    color: #fff;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    align-self: flex-start;
    transition: opacity 0.3s ease;
}
.btn-submit-extended:hover {
    opacity: 0.8;
}

/* Contact info text section */
.contact-info-text {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.5rem;
}
.contact-info-text p {
    font-family: var(--serif);
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
    text-align: left;
}

@media (max-width: 768px) {
    .contact-section { padding: 3rem 20px 2rem; }
    .contact-columns {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .contact-infos-label {
        text-align: center;
        order: -1;
    }
    .contact-row-extended {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .contact-form-extended .form-row-inline {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ---- About page ---- */
.about-page { padding: 13rem 4rem; }
.about-content { display: grid; gap: 4rem; max-width: 48ch; }
.about-lead {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
    line-height: 1.4;
    color: var(--ink);
}
.about-text p {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* ---- Contact ---- */
.contact { background: var(--ink); color: var(--bg); }
.contact .section-num { color: var(--terracotta); }
.contact .section-title { color: var(--bg); }
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 7rem;
    align-items: start;
}
.contact-info p {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(247, 245, 241, 0.12);
    font-size: 1rem;
}
.contact-info p span {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--terracotta);
}
.contact-form { display: flex; flex-direction: column; gap: 2.25rem; }
.contact-form label { display: flex; flex-direction: column; gap: 0.75rem; }
.contact-form label span {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(247, 245, 241, 0.5);
}
.contact-form input, .contact-form textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(247, 245, 241, 0.25);
    color: var(--bg);
    font-family: var(--serif);
    font-weight: 300;
    font-size: 1rem;
    padding: 0.75rem 0;
    transition: border-color 0.4s var(--ease);
    resize: none;
}
.contact-form input:focus, .contact-form textarea:focus {
    outline: none;
    border-bottom-color: var(--terracotta);
}
.contact-form button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 1rem 0 0.5rem;
    border-bottom: 1px solid var(--bg);
    color: var(--bg);
    transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
    margin-top: 1.5rem;
}
.contact-form button .arrow { transition: transform 0.4s var(--ease); }
.contact-form button:hover { color: var(--terracotta); border-color: var(--terracotta); }
.contact-form button:hover .arrow { transform: translateX(8px); }

/* ---- Footer global — minimaliste ---- */
.site-footer-global {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 4rem;
    background: var(--bg);
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
    font-family: var(--serif);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.footer-left, .footer-right {
    display: flex;
    align-items: center;
    gap: 30px;
}
.site-footer-global a {
    color: var(--ink-soft);
    transition: color 0.4s var(--ease);
}
.site-footer-global a:hover { color: var(--terracotta); }
.admin-dot {
    color: var(--bg);
    text-decoration: none;
    cursor: default;
    font-size: 0.6rem;
    opacity: 0.3;
}
.admin-dot:hover { color: var(--bg); }

/* ---- Studio heading link ---- */
.studio-heading-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ---- Reveal initial states (GSAP will animate to visible) ---- */
.reveal { opacity: 0; transform: translateY(50px); }
.reveal-img { overflow: hidden; }
.reveal-img img { transform: translateY(30px); opacity: 0; }

/* ---- Login / Admin shared minimal pages ---- */
.auth-shell, .admin-shell {
    min-height: 100vh;
    padding: 8rem 4rem 5rem;
}
.auth-card {
    max-width: 420px;
    margin: 6rem auto;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}
.auth-card h1 {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: 2.4rem;
}
.auth-card label { display: flex; flex-direction: column; gap: 0.6rem; }
.auth-card label span {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.auth-card input {
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding: 0.7rem 0;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 1rem;
}
.auth-card input:focus { outline: none; border-bottom-color: var(--terracotta); }
.auth-card button {
    align-self: flex-start;
    border-bottom: 1px solid var(--ink);
    padding: 0.85rem 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.auth-card button:hover { color: var(--terracotta); border-color: var(--terracotta); }

/* ---- Login page extras ---- */
.auth-body { min-height: 100vh; background: var(--bg); }
.auth-back {
    position: fixed;
    top: 2.25rem; left: 4rem;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-soft);
    z-index: 10;
}
.auth-back:hover { color: var(--terracotta); }
.auth-eyebrow {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--terracotta);
}
.auth-title {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(2.6rem, 4.5vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.01em;
}
.auth-sub {
    color: var(--ink-soft);
    font-size: 1rem;
    max-width: 32ch;
    margin-bottom: 1rem;
    line-height: 1.7;
}
.auth-form { display: flex; flex-direction: column; gap: 2rem; }
.auth-form label { display: flex; flex-direction: column; gap: 0.6rem; }
.auth-form label span {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.auth-form input {
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding: 0.8rem 0;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 1rem;
    color: var(--ink);
    transition: border-color 0.4s var(--ease);
}
.auth-form input:focus { outline: none; border-bottom-color: var(--terracotta); }
.auth-form button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 0 0.45rem;
    margin-top: 1.25rem;
    border-bottom: 1px solid var(--ink);
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.auth-form button .arrow { transition: transform 0.4s var(--ease); }
.auth-form button:hover { color: var(--terracotta); border-color: var(--terracotta); }
.auth-form button:hover .arrow { transform: translateX(8px); }

/* ---- Admin panel ---- */
.admin-body { background: var(--bg); min-height: 100vh; }
.admin-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem 4rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
.admin-brand { display: inline-flex; align-items: center; gap: 1.5rem; }
.admin-logo { height: 62px; width: auto; }
.admin-brand span {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.74rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.admin-nav {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 0.74rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.admin-nav a { position: relative; padding-bottom: 4px; }
.admin-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: var(--terracotta);
    transition: width 0.5s var(--ease);
}
.admin-nav a:hover::after { width: 100%; }
.admin-logout { color: var(--terracotta); }

.admin-main { padding: 5rem 4rem 7rem; max-width: 1320px; margin: 0 auto; }
.admin-section { margin-bottom: 8rem; }
.admin-section-head {
    display: flex;
    align-items: baseline;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 3.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}
.admin-section-head h2 {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -0.01em;
}
.admin-count {
    margin-left: auto;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Messages list */
.admin-messages { list-style: none; display: flex; flex-direction: column; gap: 1.75rem; }
.admin-message {
    background: #fff;
    border: 1px solid var(--line);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: border-color 0.4s var(--ease);
}
.admin-message:hover { border-color: var(--terracotta); }
.msg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: baseline;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}
.msg-name { font-weight: 500; color: var(--ink); }
.msg-email { color: var(--terracotta); }
.msg-date {
    margin-left: auto;
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.msg-content {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.7;
    padding-left: 1.25rem;
    border-left: 1px solid var(--terracotta);
}

/* Admin form (new project) */
.admin-form {
    background: #fff;
    border: 1px solid var(--line);
    padding: 3rem;
    margin-bottom: 5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 760px;
}
.admin-form h3 {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: 1.4rem;
    letter-spacing: 0.005em;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
.admin-form label { display: flex; flex-direction: column; gap: 0.65rem; }
.admin-form label span {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.admin-form input[type="text"],
.admin-form textarea {
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding: 0.75rem 0;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 1rem;
    color: var(--ink);
    resize: vertical;
    transition: border-color 0.4s var(--ease);
}
.admin-form input[type="text"]:focus,
.admin-form textarea:focus { outline: none; border-bottom-color: var(--terracotta); }
.admin-form input[type="file"] {
    font-family: var(--serif);
    font-weight: 300;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    color: var(--ink-soft);
}
.admin-form input[type="file"]::file-selector-button {
    border: 1px solid var(--ink);
    background: transparent;
    padding: 0.6rem 1.25rem;
    margin-right: 1rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.admin-form input[type="file"]::file-selector-button:hover {
    background: var(--terracotta);
    color: var(--bg);
    border-color: var(--terracotta);
}
.admin-form button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 0 0.45rem;
    border-bottom: 1px solid var(--ink);
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.admin-form button .arrow { transition: transform 0.4s var(--ease); }
.admin-form button:hover { color: var(--terracotta); border-color: var(--terracotta); }
.admin-form button:hover .arrow { transform: translateX(8px); }

/* Project list */
.admin-projects {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}
.admin-project {
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    transition: border-color 0.4s var(--ease);
}
.admin-project:hover { border-color: var(--terracotta); }
.admin-project-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--line);
    display: block;
}
a.admin-project-media img { transition: transform 1.2s var(--ease); }
a.admin-project-media:hover img { transform: scale(1.04); }

    /* Page détail projet — navbar */
    .nav-container.nav-container--detail {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        width: 100% !important;
        max-width: none !important;
        padding: 3rem 4rem 2rem !important;
        margin: 0 !important;
    }

    /* Page détail projet — layout 2 colonnes */
    .projet-detail-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        max-width: 1500px;
        margin: 0 auto;
        padding: 3rem 4rem 8rem;
        align-items: start;
    }

    .projet-detail-image-wrapper {
        position: sticky;
        top: 2rem;
        display: flex;
        flex-direction: column;
    }

    .projet-detail-image {
        aspect-ratio: 1 / 1;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
    }
    .projet-detail-image a {
        display: block;
        width: 100%;
        height: 100%;
    }
    .projet-main-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        cursor: pointer;
        transition: transform 0.4s cubic-bezier(0.65, 0, 0.2, 1);
    }
    .projet-main-img:hover {
        transform: scale(1.02);
    }

    .projet-zoom-hint {
        display: block;
        margin-top: 1rem;
        font-family: var(--serif);
        font-size: 0.8rem;
        font-style: italic;
        font-weight: 300;
        color: var(--ink-soft);
        text-decoration: none;
        letter-spacing: 0.02em;
        transition: color 0.3s var(--ease);
    }
    .projet-zoom-hint:hover {
        color: var(--terracotta);
    }

    .projet-detail-content {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding-top: 12vh;
        padding-left: 3rem;
        align-self: start;
    }
    .detail-title,
    .approche-title {
        font-family: var(--serif);
        font-weight: 200;
        font-style: normal;
        font-size: clamp(2.4rem, 4vw, 3.2rem);
        line-height: 1.15;
        letter-spacing: -0.02em;
        color: var(--ink);
        text-transform: uppercase;
    }
    .detail-title {
        margin-bottom: 2.5rem;
    }
    .detail-desc {
        font-family: var(--serif);
        font-weight: 300;
        font-style: normal;
        font-size: 0.95rem;
        line-height: 1.8;
        color: var(--ink-soft);
        letter-spacing: 0.005em;
        text-align: justify;
        /* Césure : la justification n'étire plus les espaces entre les mots */
        hyphens: auto;
        -webkit-hyphens: auto;
        hyphenate-limit-chars: 6 3 3;
        overflow-wrap: break-word;
    }
    .detail-desc p {
        margin-bottom: 1.4rem;
    }
    .detail-desc p:last-child {
        margin-bottom: 0;
    }

    /* ==========================================================================
       LAYOUT DÉTAIL PROJET — Desktop (titre non centré, aligné sur la 1ère
       colonne de description + image & texte 2 colonnes)
       ========================================================================== */
    .projet-detail-archsharing {
        max-width: 1500px;
        margin: 0 auto;
        padding: 3rem 4rem 8rem;
    }
    .archsharing-heading {
        text-align: left;
        margin-bottom: 3rem;
    }
    .archsharing-title {
        text-align: left;
        margin-bottom: 0;
    }
    /* Titre + sous-titre : non centrés, ils commencent à gauche et sont sur la
       même verticale que la 1ère colonne de description (mêmes colonnes et même
       gouttière que .archsharing-body) — layout desktop uniquement. */
    .projet-detail-archsharing .archsharing-heading {
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 3rem;
        align-items: start;
    }
    .projet-detail-archsharing .archsharing-heading > * {
        grid-column: 2;
    }
    .archsharing-subtitle {
        margin: 0.75rem 0 0;
        font-family: var(--serif);
        font-weight: 300;
        font-style: italic;
        font-size: clamp(1rem, 1.6vw, 1.25rem);
        line-height: 1.4;
        letter-spacing: 0.02em;
        color: var(--ink-soft);
    }
    .archsharing-body {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 3rem;
        align-items: start;
    }
    .archsharing-image {
        position: sticky;
        top: 2rem;
    }
    .archsharing-image .projet-main-img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1.1;
        object-fit: cover;
        border-radius: 16px;
        display: block;
        position: relative;
    }
    .archsharing-image a {
        display: block;
    }

    /* Métadonnées : sous la colonne image, après le bloc description */
    .archsharing-meta-wrap {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 3rem;
        margin-top: 2.5rem;
    }
    .archsharing-meta-wrap .projet-meta {
        grid-column: 1;
        margin-top: 0;
        padding-top: 1.4rem;
        border-top: 1px solid rgba(26, 26, 26, 0.12);
    }
    .projet-meta-list {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
    }
    .projet-meta-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
    .projet-meta-row dt {
        margin: 0;
        font-family: var(--serif);
        font-size: 0.68rem;
        font-weight: 400;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }
    .projet-meta-row dd {
        margin: 0;
        font-family: var(--serif);
        font-size: 0.9rem;
        font-weight: 300;
        line-height: 1.45;
        color: var(--ink);
    }
    .projet-meta-comment {
        margin: 1.1rem 0 0;
        padding-top: 1rem;
        border-top: 1px solid rgba(26, 26, 26, 0.08);
        font-family: var(--serif);
        font-size: 0.82rem;
        font-weight: 300;
        font-style: italic;
        line-height: 1.55;
        color: var(--ink-soft);
        /* Le texte reste échappé (pas de HTML interprété) mais la mise en page
           saisie dans le champ « Commentaires » est conservée telle quelle :
           retours à la ligne, lignes vides, espaces multiples et indentations. */
        white-space: pre-wrap;
        overflow-wrap: break-word;
    }

    /* Colonnes texte : 2 colonnes de largeur identique.
       La rupture entre la colonne 1 et la colonne 2 est calculée en JavaScript
       (au niveau du bas de l'image du projet) et non par le multicol CSS,
       voir le script en fin de projet_detail.html */
    .archsharing-text {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2.5rem;
        align-items: start;
    }
    .archsharing-text .detail-desc p {
        break-inside: avoid;
        margin-bottom: 1.4rem;
        text-align: justify;
    }

    .projet-detail-mobile-archsharing {
        display: none;
    }

    @media (max-width: 768px) {
        .projet-detail-archsharing {
            display: none !important;
        }
        .projet-detail-mobile-archsharing {
            display: block !important;
            padding: 0 16px 3rem;
        }
        .projet-detail-mobile-archsharing .archsharing-heading {
            margin-bottom: 0.8rem !important;
        }
        .projet-detail-mobile-archsharing .archsharing-title {
            font-size: 1rem !important;
            letter-spacing: 0.08em !important;
            line-height: 1.3 !important;
            margin-bottom: 0 !important;
        }
        .projet-detail-mobile-archsharing .archsharing-subtitle {
            margin-top: 0.4rem;
            font-size: 0.82rem;
            line-height: 1.35;
        }
        .archsharing-mobile-body {
            overflow: hidden;
        }
        .archsharing-mobile-image {
            float: left;
            width: 45%;
            margin: 0 1rem 0.5rem 0;
        }
        .archsharing-mobile-image .projet-main-img {
            width: 100%;
            height: auto;
            aspect-ratio: 1 / 1.1;
            object-fit: cover;
            border-radius: 12px;
            display: block;
            position: relative;
        }
        .archsharing-mobile-image a {
            display: block;
        }
        .archsharing-mobile-image .projet-zoom-hint {
            font-size: 0.7rem;
            display: block;
            margin-top: 0.3rem;
        }
        .archsharing-mobile-desc {
            font-size: 0.78rem;
            line-height: 1.6;
        }
        .archsharing-mobile-desc p {
            margin-bottom: 0.8rem;
        }
        .archsharing-mobile-overflow {
            column-count: 2;
            column-gap: 1rem;
            font-size: 0.78rem;
            line-height: 1.6;
            margin-top: 0.5rem;
        }
        .archsharing-mobile-overflow p {
            margin-bottom: 0.8rem;
            break-inside: avoid;
            text-align: justify;
        }
        .projet-meta--mobile {
            clear: both;
            margin-top: 1.4rem;
            padding-top: 1.1rem;
        }
        .projet-meta--mobile .projet-meta-row dt {
            font-size: 0.62rem;
        }
        .projet-meta--mobile .projet-meta-row dd {
            font-size: 0.8rem;
        }
        .projet-meta--mobile .projet-meta-comment {
            font-size: 0.75rem;
        }
    }

    /* ==========================================================================
       GALERIE ADDITIONNELLE — Page détail projet
       ========================================================================== */
    .projet-gallery-extra-section {
        padding: 0 4rem 6rem;
        max-width: 1500px;
        margin: 0 auto;
    }
    .projet-gallery-extra-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    .projet-gallery-extra-item {
        display: block;
        border-radius: 20px;
        overflow: hidden;
        background: var(--line);
        aspect-ratio: 4 / 3;
        position: relative;
    }
    .projet-gallery-extra-item img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 1.2s cubic-bezier(0.65, 0, 0.2, 1);
    }
    .projet-gallery-extra-item:hover img {
        transform: scale(1.03);
    }
    @media (max-width: 1024px) {
        .projet-gallery-extra-section { padding: 0 2rem 4rem; }
    }
    @media (max-width: 768px) {
        .projet-gallery-extra-section { padding: 0 20px 4rem; }
        .projet-gallery-extra-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
    }

    /* ==========================================================================
    PAGE GALERIE — Plein écran avec navigation overlay
    ========================================================================== */

    .galerie-page {
        padding-top: 0;
        height: 100vh;
        overflow: hidden;
    }

    .galerie-page .site-header {
        display: none;
    }

    .galerie-page .site-footer-global {
        display: none;
    }

    .galerie-container {
        position: relative;
        width: 100vw;
        height: 100vh;
        background: #0a0a0a;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    /* Image centrale */
    .galerie-image-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 88vw;
        height: 80vh;
    }

    .galerie-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        border-radius: 0;
    }

    /* Mode immersif — fond sombre, image plein écran sans recadrage */
    .galerie-page--immersive .galerie-container {
        background: #0a0a0a;
    }

    .galerie-page--immersive .galerie-image-wrapper {
        width: 100vw;
        height: 100vh;
    }

    .galerie-page--immersive .galerie-exit {
        top: 1.2rem;
        right: 1.5rem;
    }

    .galerie-page--immersive .galerie-exit-text {
        font-size: 11px;
    }

    .galerie-page--immersive .galerie-exit-triangle {
        font-size: 8px;
    }

    .galerie-page--immersive .galerie-nav {
        bottom: 1.2rem;
    }

    .galerie-page--immersive .galerie-nav--prev {
        left: 1.5rem;
    }

    .galerie-page--immersive .galerie-nav--next {
        right: 1.5rem;
    }

    .galerie-page--immersive .galerie-nav-text {
        font-size: 11px;
    }

    .galerie-page--immersive .galerie-nav-rect {
        width: 18px;
        height: 5px;
    }

    .galerie-page--immersive .galerie-img {
        object-fit: contain;
    }

    .galerie-page--immersive .galerie-exit {
        color: #fff;
    }

    .galerie-page--immersive .galerie-exit-triangle {
        color: #fff;
    }

    .galerie-page--immersive .galerie-nav {
        color: #fff;
    }

    .galerie-page--immersive .galerie-nav-rect {
        background-color: #fff;
    }

    .galerie-page--immersive .galerie-nav-trait {
        background-color: #fff;
    }

    .galerie-page--immersive .galerie-exit:hover,
    .galerie-page--immersive .galerie-exit:hover .galerie-exit-triangle {
        color: var(--terracotta);
    }

    .galerie-page--immersive .galerie-nav:hover {
        color: var(--terracotta);
    }

    .galerie-page--immersive .galerie-nav:hover .galerie-nav-rect {
        background-color: var(--terracotta);
    }

    .galerie-page--immersive .galerie-nav:hover .galerie-nav-trait {
        background-color: var(--terracotta);
    }

    /* Exit — haut droite, aligné avec le bord droit de l'image */
    .galerie-exit {
        position: absolute;
        top: -2.5rem;
        right: 0;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: #fff;
        transition: color 0.3s var(--ease);
    }

    .galerie-exit:hover {
        color: var(--terracotta);
    }

    .galerie-exit-triangle {
        font-size: 10px;
        color: #fff;
        transition: color 0.3s var(--ease);
    }

    .galerie-exit:hover .galerie-exit-triangle {
        color: var(--terracotta);
    }

    .galerie-exit-text {
        font-family: 'Inter', sans-serif;
        font-weight: bold;
        font-size: 14px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    /* Navigation Précédent / Suivant — alignés avec les bords de l'image */
    .galerie-nav {
        position: absolute;
        bottom: -2.5rem;
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        text-decoration: none;
        color: #fff;
        transition: color 0.3s var(--ease);
    }

    .galerie-nav:hover {
        color: var(--terracotta);
    }

    .galerie-nav--prev {
        left: 0;
    }

    .galerie-nav--next {
        right: 0;
        align-items: flex-end;
    }

    .galerie-nav--next .galerie-nav-line {
        flex-direction: row-reverse;
    }

    .galerie-nav-line {
        display: flex;
        align-items: flex-start;
        width: 100%;
    }

    .galerie-nav-rect {
        display: inline-block;
        width: 24px;
        height: 7px;
        background-color: #fff;
        transition: background-color 0.3s var(--ease);
    }

    .galerie-nav:hover .galerie-nav-rect {
        background-color: var(--terracotta);
    }

    .galerie-nav-trait {
        display: inline-block;
        height: 1px;
        background-color: #fff;
        margin-top: 0;
        flex: 1;
        transition: background-color 0.3s var(--ease);
    }

    .galerie-nav:hover .galerie-nav-trait {
        background-color: var(--terracotta);
    }

    .galerie-nav-text {
        font-family: 'Inter', sans-serif;
        font-weight: bold;
        font-size: 14px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    /* Responsive galerie mobile — tous les projets (immersif et standard) */
    @media (max-width: 768px) {
        .galerie-page {
            height: 100vh;
            height: 100dvh;
        }

        .galerie-page .galerie-container {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            background: #0a0a0a;
            overflow: visible;
        }

        .galerie-page .galerie-exit,
        .galerie-page .galerie-exit-triangle {
            color: #fff;
        }

        .galerie-page .galerie-nav {
            color: #fff;
        }

        .galerie-page .galerie-nav-rect {
            background-color: #fff;
        }

        .galerie-page .galerie-nav-trait {
            background-color: #fff;
        }

        .galerie-page .galerie-image-wrapper {
            position: static;
            display: grid;
            grid-template-rows: auto 1fr auto;
            grid-template-columns: 1fr 1fr;
            width: 100%;
            height: 100%;
            padding: 1rem;
            padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
            row-gap: 0.8rem;
        }

        .galerie-page .galerie-img {
            grid-row: 2;
            grid-column: 1 / -1;
            min-height: 0;
            object-fit: contain;
        }

        .galerie-page .galerie-exit {
            position: static;
            grid-row: 1;
            grid-column: 1 / -1;
            justify-self: end;
            align-self: center;
            top: auto;
            right: auto;
        }

        .galerie-page .galerie-nav {
            position: static;
            grid-row: 3;
            align-self: start;
            bottom: auto;
            left: auto;
            right: auto;
        }

        .galerie-page .galerie-nav--prev {
            grid-column: 1;
            justify-self: start;
        }

        .galerie-page .galerie-nav--next {
            grid-column: 2;
            justify-self: end;
            align-items: flex-end;
        }

        .galerie-page .galerie-exit-text,
        .galerie-page .galerie-nav-text {
            font-size: 12px;
        }
    }

    @media (max-width: 1024px) {
        .nav-container--detail { padding: 2rem 2rem 1.5rem !important; }
        .projet-detail-layout { padding: 0 2rem 6rem; gap: 2rem; }
    }
    /* Mobile : masquer la version desktop, afficher la version float */
    .projet-detail-mobile {
        display: none;
    }

    @media (max-width: 768px) {
        .projet-detail-layout {
            display: none !important;
        }
        .projet-detail-mobile {
            display: block !important;
            padding: 0 16px 3rem;
        }
        .projet-detail-mobile .detail-title {
            text-align: center !important;
            font-size: 1rem !important;
            letter-spacing: 0.08em !important;
            line-height: 1.3 !important;
            margin-bottom: 0.8rem !important;
        }
        .detail-mobile-body {
            overflow: hidden;
        }
        .projet-detail-image-float {
            float: left;
            width: 45%;
            margin: 0 1rem 0.5rem 0;
        }
        .projet-detail-image-float .projet-detail-image {
            aspect-ratio: 1 / 1.1;
            border-radius: 12px;
            overflow: hidden;
        }
        .projet-detail-image-float .projet-zoom-hint {
            font-size: 0.7rem;
            display: block;
            margin-top: 0.3rem;
        }
        .projet-detail-mobile .detail-desc {
            font-size: 0.78rem;
            line-height: 1.6;
        }
        .projet-detail-mobile .detail-desc p {
            margin-bottom: 0.8rem;
        }
    }

    /* Page publique "Tous les projets" — grille admin nettoyée */
    .projects-archive {
        padding: 4rem 4rem 6rem;
        max-width: 1400px;
        margin: 0 auto;
    }
    .projects-archive .admin-section-head {
        margin-bottom: 3rem;
    }
    .archive-projects { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 900px) {
        .projects-archive { padding: 3rem 1.5rem 4rem; }
        .archive-projects { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    }
    @media (max-width: 560px) {
        .archive-projects { grid-template-columns: 1fr; }
    }

    /* ==========================================================================
    PAGE PROJETS — Style croquis architecte
    ========================================================================== */
    .projets-page { padding-top: 0; }
    .projets-page .site-header { display: none; }

    /* En-tête navbar — flex space-between pour aligner les bords sur la grille projets */
    .nav-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        align-items: end !important;
        width: 100% !important;
        padding: 3rem 4rem 2rem;
        padding-left: calc(4rem + 10px) !important;
        padding-right: calc(4rem + 10px) !important;
        max-width: 1400px;
        margin: 0 auto;
    }
    .nav-container .nav-tab:first-child {
        justify-self: start;
    }
    .nav-container .nav-tab:nth-child(2) {
        justify-self: center;
    }
    .nav-container .nav-tab:last-child {
        justify-self: end;
    }

    /* ==========================================================================
       NAVIGATION — ONGLETS STYLE FEUTRE (unifié)
       Couleur unique : terracotta #B85436 pour TOUTES les lignes et rectangles.
       ========================================================================== */

    /* --- Base commune à tous les onglets --- */
    .nav-tab {
        text-decoration: none !important;
        color: #B85436 !important;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
        font-size: 18px !important;
        font-weight: bold !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
        background: transparent !important;
    }

    .nav-tab::before,
    .nav-tab::after {
        display: none !important;
    }

    .nav-tab .tab-text {
        font-weight: 300 !important;
    }

    /* --- Onglets INACTIFS (ligne et rectangle EN DESSOUS du texte) --- */
    .nav-tab:not(.active) {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        vertical-align: bottom !important;
        opacity: 1 !important;
    }

    .nav-tab:not(.active) .tab-rect {
        display: inline-block !important;
        width: 24px !important;
        height: 7px !important;
        background-color: #B85436 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1.5px solid #B85436 !important;
    }

    .nav-tab:not(.active) .tab-text {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1.5px solid #B85436 !important;
        line-height: 1 !important;
    }

    /* --- Onglet ACTIF — ligne et rectangle AU-DESSUS du texte. Atténué à 0.4. --- */
    .nav-tab.active {
        background: transparent !important;
        opacity: 0.4 !important;
        font-weight: normal !important;
    }

    .nav-tab.active > div > div,
    .nav-tab.active > div > div ~ div {
        background-color: #B85436 !important;
    }

    /* --- Onglet ACTIF — page DÉTAILS (PROJET + titre) ---
       Cible les span inline (ligne + rectangle au-dessus) en terracotta. */
    .nav-container--detail .nav-tab.active {
        background: transparent !important;
        opacity: 0.4 !important;
    }
    .nav-container--detail .nav-tab.active span span span {
        background-color: #B85436 !important;
    }

    /* Grille de projets */
    .projets-grid-section {
        padding: 2rem 4rem 6rem;
        max-width: 1400px;
        margin: 0 auto;
    }
    .projets-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
        margin-top: 40px !important;
    }

    /* Carte de projet */
    .projets-card {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .projets-card-media {
        display: block;
        position: relative;
        aspect-ratio: 4 / 3;
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        background: var(--line);
    }
    .projets-card-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 1.2s cubic-bezier(0.65, 0, 0.2, 1);
    }
    .projets-card-media:hover img {
        transform: scale(1.03);
    }
    .projets-card-placeholder {
        background: #ede9e3;
    }
    .projets-card-title {
        font-family: var(--serif);
        font-weight: 400;
        font-size: 0.78rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--ink);
        padding-left: 14px;
        margin-top: -8px;
    }

    /* Responsive projets page — tablette */
    @media (max-width: 900px) {
        .nav-container {
            padding: 2rem 1.5rem 1.5rem !important;
        }
        .projets-grid-section { padding: 1.5rem 1.5rem 4rem; }
        .projets-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    }

    /* Responsive global — mobile */
    @media (max-width: 768px) {
        /* ==========================================
        1. NAVBAR MOBILE — 3 onglets sur une ligne
        ========================================== */
        .nav-container {
            display: flex !important;
            justify-content: space-between !important;
            align-items: flex-end !important;
            padding: 20px 16px !important;
            gap: 0 !important;
        }
        .nav-container .nav-tab:first-child {
            justify-self: auto !important;
        }
        .nav-container .nav-tab:nth-child(2) {
            justify-self: auto !important;
        }
        .nav-container .nav-tab:last-child {
            justify-self: auto !important;
        }
        .nav-tab {
            font-size: 11px !important;
            letter-spacing: 0.08em !important;
        }
        .nav-tab:not(.active) .tab-rect {
            width: 14px !important;
            height: 4px !important;
        }
        .nav-tab.active > div > div:first-child {
            width: 14px !important;
            height: 4px !important;
        }
        .nav-tab.active span {
            font-size: 11px !important;
            letter-spacing: 0.08em !important;
        }

        /* ==========================================
        1b. NAVBAR DETAIL MOBILE — projet + retour aux extrémités
        ========================================== */
        .nav-container.nav-container--detail {
            display: flex !important;
            flex-wrap: nowrap !important;
            justify-content: space-between !important;
            align-items: flex-end !important;
            padding: 20px 16px 16px !important;
            margin-bottom: 1.5rem !important;
            width: 100% !important;
            max-width: 100% !important;
            gap: 6px !important;
        }
        .nav-container--detail .nav-tab.active {
            flex-shrink: 1 !important;
            min-width: 0 !important;
            overflow: hidden !important;
            gap: 6px !important;
        }
        .nav-container--detail .nav-tab.active span {
            font-size: 10px !important;
            letter-spacing: 0.04em !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }
        .nav-container--detail .nav-tab.active > span > span:first-child > span:first-child {
            width: 12px !important;
            height: 4px !important;
        }
        .nav-container--detail .nav-tab:not(.active) {
            flex-shrink: 0 !important;
            white-space: nowrap !important;
        }
        .nav-container--detail .nav-tab:not(.active) .tab-text {
            font-size: 10px !important;
            letter-spacing: 0.04em !important;
        }
        .nav-container--detail .nav-tab:not(.active) .tab-rect {
            width: 12px !important;
            height: 4px !important;
        }

        /* ==========================================
        2. GRILLE DE PROJETS MOBILE — 2 colonnes
        ========================================== */
        .projets-grid-section {
            padding: 1rem 16px 4rem !important;
        }
        .projets-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 10px !important;
        }
        .projets-card-media {
            width: 100% !important;
            border-radius: 12px !important;
        }
        .projets-card-title {
            font-size: 0.65rem !important;
            letter-spacing: 0.12em !important;
            padding-left: 8px !important;
        }

        /* Contact */
        .contact-page {
            padding: 4rem 20px !important;
        }
        .contact-grid {
            grid-template-columns: 1fr !important;
            gap: 2rem !important;
        }

        /* ==========================================
        3. FOOTER RÉDUIT
        ========================================== */
        .site-footer-global {
            flex-direction: row !important;
            align-items: center !important;
            padding: 10px 16px !important;
            gap: 12px !important;
        }
        .site-footer-global,
        .site-footer-global a,
        .site-footer-global span {
            font-size: 0.55rem !important;
            letter-spacing: 0.1em !important;
        }
        .footer-left, .footer-right {
            gap: 12px !important;
        }
    }
    .admin-project-media img {
        width: 100%; height: 100%;
        object-fit: cover;
    }
    .admin-project-info {
        padding: 1.75rem 2rem;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        flex: 1;
    }
    .admin-project-info h4 {
        font-family: var(--display);
        font-weight: 400;
        font-size: 1.45rem;
        line-height: 1.2;
    }
    .admin-project-info p {
        color: var(--ink-soft);
        font-size: 0.95rem;
        line-height: 1.7;
    }
    .admin-project .inline-form { padding: 0 2rem 1.75rem; }

    /* Ghost / delete buttons */
    .inline-form { margin-top: auto; }
    .btn-ghost {
        font-family: var(--serif);
        font-weight: 400;
        font-size: 0.7rem;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--ink-soft);
        padding: 0.5rem 0;
        border-bottom: 1px solid transparent;
        transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
    }
    .btn-ghost:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }
    .btn-ghost--danger:hover { color: #c0392b; border-bottom-color: #c0392b; }

    .admin-project-actions {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 1.5rem;
        padding: 0 2rem 1.75rem;
        margin-top: auto;
    }
    .admin-project-actions .inline-form {
        margin-top: 0;
        display: inline;
    }

    .admin-hint {
        color: var(--ink-soft);
        font-size: 0.88rem;
        margin-bottom: 1rem;
    }
    .admin-edit-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1.25rem;
        margin-bottom: 2.5rem;
    }
    .admin-edit-photo {
        position: relative;
        border: 1px solid var(--line);
        overflow: hidden;
    }
    .admin-edit-photo img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        display: block;
    }
    .admin-edit-photo-check {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
        font-size: 0.78rem;
        font-family: var(--serif);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ink-soft);
        cursor: pointer;
    }
    .admin-edit-photo-check input[type="checkbox"] {
        accent-color: var(--terracotta);
        width: 16px;
        height: 16px;
    }

    .admin-empty {
        color: var(--ink-soft);
        font-style: italic;
        padding: 3rem 0;
        border: 1px dashed var(--line);
        text-align: center;
    }

    .admin-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2.5rem 4rem;
        border-top: 1px solid var(--line);
        font-family: var(--serif);
        font-weight: 300;
        font-size: 0.72rem;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }
    .admin-footer a:hover { color: var(--terracotta); }

    /* ---- Responsive ---- */
    @media (max-width: 900px) {
        body { padding-top: 100px; }
        .home-page { padding-top: 0; }
        .site-header { padding: 1.25rem 1.5rem; }
        .brand-logo { height: 56px; }
        .site-nav { gap: 1.25rem; font-size: 0.7rem; }
        .hero { padding: 8rem 1.5rem 4rem; }
        section { padding: 7rem 1.5rem; }
        .projects .gallery { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
        .projects .project { height: auto !important; }
        .project-media,
        .projects .project-media { height: 380px !important; }
        .projects .project-media img,
        .projects .gallery img { height: 380px !important; }
        .approach-grid { gap: 3rem; }
        .approach-cols { grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; }
        .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
        .site-footer-global { flex-wrap: wrap; gap: 1.5rem; padding: 15px 1.5rem; justify-content: space-between; }
        .flash-wrap { right: 1rem; left: 1rem; top: 80px; }
        .admin-header { padding: 1rem 1.25rem; flex-wrap: wrap; gap: 1rem; }
        .admin-logo { height: 44px; }
        .admin-nav { gap: 1.25rem; font-size: 0.68rem; }
        .admin-main { padding: 2.5rem 1.25rem 4rem; }
        .admin-section { margin-bottom: 4rem; }
        .admin-section-head { gap: 1rem; }
        .admin-count { margin-left: 0; }
        .admin-projects { grid-template-columns: 1fr; }
        .admin-form { padding: 1.75rem; }
        .admin-edit-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
        .admin-project-actions { padding: 0 1.25rem 1.25rem; }
        .msg-meta { gap: 0.75rem; }
        .msg-date { margin-left: 0; }
        .admin-footer { flex-direction: column; gap: 0.75rem; text-align: center; padding: 2rem 1.5rem; }
        .auth-back { top: 1rem; left: 1.25rem; }
        .auth-card { margin: 4rem auto; }
    }

    @media (prefers-reduced-motion: reduce) {
        .reveal, .reveal-img img, .line-inner { opacity: 1 !important; transform: none !important; }
        * { transition: none !important; animation: none !important; }
    }

/* ==========================================================================
   PAGE APPROCHE
   ========================================================================== */
.approche-layout {
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 4rem 8rem;
}

.approche-title {
    text-align: left;
    margin-bottom: 3.5rem;
}

.approche-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    align-items: stretch;
}

.approche-col p {
    font-family: var(--serif);
    font-weight: 300;
    font-size: 0.92rem;
    line-height: 1.9;
    color: var(--ink-soft);
    letter-spacing: 0.005em;
    text-align: justify;
    margin-bottom: 1.5rem;
}
.approche-col p:last-child {
    margin-bottom: 0;
}

.approche-images {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}
.approche-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .approche-layout {
        padding: 1.5rem 1.5rem 4rem;
    }
    .approche-title {
        font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
        letter-spacing: 0.08em !important;
        line-height: 1.3 !important;
        margin-bottom: 2rem !important;
    }
    .approche-body {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    .approche-col p {
        font-size: 0.78rem;
        line-height: 1.7;
        margin-bottom: 1rem;
    }
    .approche-images {
        grid-column: 1 / -1;
        height: 280px;
        border-radius: 12px;
    }
}