/* =========================================
   CARRE3 v2 — STYLES PUBLICS
   ========================================= */

/* Variables par défaut (écrasées dynamiquement par PHP si settings.json) */
:root {
    --color-bg:         #F5F0E8;
    --color-surface:    #EDE8DC;
    --color-text:       #2C2C2C;
    --color-text-light: #7A7A6E;
    --color-green:      #8A9E7E;
    --color-gold:       #C8A96E;
    --color-border:     #E0D9CC;
    --color-white:      #FFFFFF;
    --font-serif:       'Crimson Text', Georgia, serif;
    --font-sans:        'DM Sans', system-ui, sans-serif;
    --radius:           2px;
    --transition:       0.25s ease;
    --shadow:           0 4px 24px rgba(44,44,44,0.08);
    --shadow-lg:        0 8px 40px rgba(44,44,44,0.14);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.6; min-height: 100vh; }
img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }

/* ---- TYPO ---- */
h1,h2,h3,h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); }

/* ---- NAV ---- */
.site-header { position: fixed; top:0;left:0;right:0; z-index:100; background:rgba(245,240,232,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--color-border); transition:box-shadow var(--transition); }
.site-header.scrolled { box-shadow: 0 2px 16px rgba(44,44,44,.1); }
.nav-inner { max-width:1400px; margin:0 auto; padding:0 2rem; height:70px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { font-family:var(--font-serif); font-size:1.5rem; letter-spacing:.2em; color:var(--color-text); font-weight:600; }
.nav-logo span { display:block; font-size:.6rem; letter-spacing:.35em; text-transform:uppercase; color:var(--color-text-light); font-family:var(--font-sans); font-weight:300; margin-top:-2px; }
.burger { display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:.5rem; background:none; border:none; z-index:200; }
.burger span { display:block; width:24px; height:2px; background:var(--color-text); transition:transform .3s, opacity .3s; }
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-menu { position:fixed; inset:0; background:var(--color-bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem; opacity:0; pointer-events:none; transition:opacity .35s; z-index:150; }
.nav-menu.open { opacity:1; pointer-events:all; }
.nav-menu a { font-family:var(--font-serif); font-size:clamp(1.8rem,4vw,3rem); color:var(--color-text); transition:color var(--transition); position:relative; }
.nav-menu a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--color-gold); transition:width var(--transition); }
.nav-menu a:hover { color:var(--color-green); }
.nav-menu a:hover::after { width:100%; }

/* ---- HERO ---- */
.hero { height:100vh; min-height:600px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding-bottom:5rem; }
.hero-bg { position:absolute; inset:0; background:var(--color-surface); overflow:hidden; }
.hero-bg img { width:100%; height:100%; object-fit:cover; opacity:.85; }
.hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(44,44,44,.5) 0%,transparent 60%); }
.hero-content { position:relative; z-index:2; max-width:1400px; margin:0 auto; padding:0 2rem; width:100%; color:#fff; }
.hero-eyebrow { font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; color:var(--color-gold); margin-bottom:1rem; }
.hero-title { font-size:clamp(2.5rem,6vw,4.5rem); font-family:var(--font-serif); font-style:italic; line-height:1.1; margin-bottom:1.5rem; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.hero-desc { font-size:1.05rem; max-width:500px; color:rgba(255,255,255,.85); line-height:1.7; }

/* ---- CATÉGORIES ---- */
.section-cats { max-width:1400px; margin:0 auto; padding:5rem 2rem; }
.section-label { font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--color-text-light); margin-bottom:1rem; }
.section-title { font-family:var(--font-serif); margin-bottom:3rem; }
.cats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media(max-width:900px){.cats-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:500px){.cats-grid{grid-template-columns:1fr;}}
.cat-card { position:relative; overflow:hidden; aspect-ratio:3/4; display:block; background:var(--color-surface); }
.cat-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.cat-card:hover img { transform:scale(1.04); }
.cat-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(44,44,44,.65) 0%,transparent 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; }
.cat-card-label { font-size:.65rem; letter-spacing:.25em; text-transform:uppercase; color:var(--color-gold); margin-bottom:.4rem; }
.cat-card-title { font-family:var(--font-serif); font-size:1.4rem; color:#fff; line-height:1.2; }
.cat-card-arrow { margin-top:.75rem; display:inline-block; width:32px; height:2px; background:var(--color-gold); position:relative; transition:width var(--transition); }
.cat-card:hover .cat-card-arrow { width:48px; }
.cat-card-arrow::after { content:''; position:absolute; right:0; top:-4px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:7px solid var(--color-gold); }

/* ---- ABOUT ---- */
.section-about { background:var(--color-surface); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); padding:5rem 2rem; }
.about-inner { max-width:900px; margin:0 auto; text-align:center; }
.about-inner p { font-size:1.1rem; color:var(--color-text-light); line-height:1.8; margin-top:1.5rem; }
.about-accent { display:inline-block; width:48px; height:3px; background:var(--color-green); margin:1.5rem 0; }

/* ---- À PROPOS PAGE ---- */
.about-page { max-width:1200px; margin:0 auto; padding:7rem 2rem 5rem; }
.about-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; margin-bottom:5rem; }
@media(max-width:768px){.about-hero-grid{grid-template-columns:1fr;}}
.about-hero-text h1 { margin-bottom:.5rem; }
.about-hero-text .about-subtitle { font-family:var(--font-serif); font-size:1.3rem; color:var(--color-text-light); font-style:italic; margin-bottom:2rem; }
.about-hero-text p { font-size:1.05rem; line-height:1.85; color:var(--color-text-light); }
.about-hero-img { aspect-ratio:4/5; overflow:hidden; background:var(--color-surface); }
.about-hero-img img { width:100%; height:100%; object-fit:cover; }
.about-values { background:var(--color-surface); border:1px solid var(--color-border); padding:3rem; margin:3rem 0; }
.about-values h2 { margin-bottom:2rem; }
.values-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.value-item { padding:1.5rem; background:var(--color-bg); border-left:3px solid var(--color-green); }
.value-item p { color:var(--color-text-light); font-size:.95rem; margin-top:.4rem; }
.team-section { margin-top:4rem; }
.team-section h2 { margin-bottom:2rem; }
.team-member { display:flex; gap:2rem; align-items:flex-start; background:var(--color-surface); border:1px solid var(--color-border); padding:2rem; }
@media(max-width:600px){.team-member{flex-direction:column;}}
.team-avatar { width:100px; height:100px; border-radius:50%; background:var(--color-border); flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.team-info h3 { font-family:var(--font-serif); font-size:1.3rem; margin-bottom:.25rem; }
.team-role { font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--color-gold); margin-bottom:.75rem; }
.team-bio { color:var(--color-text-light); font-size:.95rem; line-height:1.7; }

/* ---- GRILLE PROJETS ---- */
.page-wrapper { max-width:1400px; margin:0 auto; padding:7rem 2rem 4rem; }
.page-hero-title { margin-bottom:.5rem; }
.page-subtitle { color:var(--color-text-light); font-size:1rem; margin-bottom:3rem; }
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media(max-width:900px){.projects-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:550px){.projects-grid{grid-template-columns:1fr;}}
.project-card { display:block; overflow:hidden; background:var(--color-surface); border:1px solid var(--color-border); transition:transform var(--transition), box-shadow var(--transition); }
.project-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.project-card-thumb { aspect-ratio:4/3; overflow:hidden; background:var(--color-border); }
.project-card-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.project-card:hover .project-card-thumb img { transform:scale(1.04); }
.project-card-body { padding:1.25rem 1.5rem 1.5rem; }
.project-card-title { font-family:var(--font-serif); font-size:1.2rem; margin-bottom:.4rem; }
.project-card-meta { font-size:.8rem; color:var(--color-text-light); display:flex; gap:1rem; flex-wrap:wrap; }
.badge { display:inline-block; padding:.2rem .6rem; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-light); }
.badge-green { background:rgba(138,158,126,.15); border-color:var(--color-green); color:var(--color-green); }
.badge-gold  { background:rgba(200,169,110,.15); border-color:var(--color-gold);  color:var(--color-gold);  }

/* ---- DÉTAIL PROJET ---- */
.breadcrumb { display:flex; gap:.5rem; align-items:center; font-size:.8rem; color:var(--color-text-light); margin-bottom:2rem; flex-wrap:wrap; }
.breadcrumb a:hover { color:var(--color-green); }
.breadcrumb-sep { color:var(--color-border); }

/* Layout 2 colonnes : main photo + fiche technique */
.project-top-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    margin-bottom: 3rem;
    align-items: start;
}
@media(max-width:900px){ .project-top-grid { grid-template-columns:1fr; } }
.project-main-photo { width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--color-surface); }
.project-main-photo img { width:100%; height:100%; object-fit:cover; }
.project-infos { border-left:3px solid var(--color-green); padding-left:1.5rem; position:sticky; top:90px; }
.project-infos h4 { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-light); margin-bottom:1.2rem; font-family:var(--font-sans); font-weight:400; }
.info-row { display:flex; flex-direction:column; margin-bottom:1rem; }
.info-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.15em; color:var(--color-text-light); }
.info-value { font-size:1rem; color:var(--color-text); margin-top:.15rem; }

.project-description { font-size:1.05rem; line-height:1.85; color:var(--color-text); margin-bottom:3rem; }
.project-description p+p { margin-top:1.2rem; }

/* ---- GALERIE ---- */
.gallery-section { margin-bottom:3rem; }
.gallery-section h3 { font-family:var(--font-serif); margin-bottom:1.5rem; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
@media(max-width:700px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
.gallery-item { aspect-ratio:4/3; overflow:hidden; cursor:pointer; background:var(--color-surface); position:relative; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.gallery-item:hover img { transform:scale(1.06); }
.gallery-item-overlay { position:absolute; inset:0; background:rgba(44,44,44,0); display:flex; align-items:center; justify-content:center; transition:background .3s; }
.gallery-item:hover .gallery-item-overlay { background:rgba(44,44,44,.2); }
.gallery-item-overlay span { opacity:0; transform:scale(.8); transition:all .3s; color:#fff; font-size:2rem; }
.gallery-item:hover .gallery-item-overlay span { opacity:1; transform:scale(1); }

/* ---- CAROUSEL LIGHTBOX ---- */
.carousel-overlay {
    position:fixed; inset:0;
    background:rgba(10,10,10,.95);
    z-index:600;
    display:flex; flex-direction:column;
    opacity:0; pointer-events:none;
    transition:opacity .3s;
}
.carousel-overlay.active { opacity:1; pointer-events:all; }
.carousel-main {
    flex:1; display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden; padding:2rem 4rem;
}
.carousel-img {
    max-width:100%; max-height:100%;
    object-fit:contain;
    transition:opacity .25s;
    display:block;
    user-select:none;
}
.carousel-img.fade { opacity:0; }
.carousel-close {
    position:absolute; top:1.25rem; right:1.5rem;
    color:#fff; font-size:2rem; cursor:pointer;
    opacity:.7; transition:opacity .2s; background:none; border:none;
    z-index:10; line-height:1;
}
.carousel-close:hover { opacity:1; }
.carousel-prev, .carousel-next {
    position:absolute; top:50%; transform:translateY(-50%);
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
    color:#fff; font-size:1.8rem; padding:.5rem .9rem;
    cursor:pointer; border-radius:var(--radius);
    transition:background .2s; z-index:10;
}
.carousel-prev:hover, .carousel-next:hover { background:rgba(255,255,255,.2); }
.carousel-prev { left:1rem; }
.carousel-next { right:1rem; }
.carousel-counter {
    position:absolute; top:1.5rem; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.5); font-size:.85rem; letter-spacing:.1em;
    background:rgba(0,0,0,.3); padding:.3rem .8rem; border-radius:20px;
}
/* Bande de miniatures */
.carousel-thumbs {
    height:88px; flex-shrink:0;
    display:flex; align-items:center;
    gap:.5rem; padding:.75rem 1.5rem;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.2) transparent;
    background:rgba(0,0,0,.4);
}
.carousel-thumbs::-webkit-scrollbar { height:4px; }
.carousel-thumbs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2); border-radius:4px; }
.carousel-thumb {
    width:64px; height:64px; flex-shrink:0;
    overflow:hidden; cursor:pointer;
    border:2px solid transparent;
    border-radius:var(--radius);
    transition:border-color .2s, transform .2s;
    opacity:.55;
}
.carousel-thumb img { width:100%; height:100%; object-fit:cover; }
.carousel-thumb.active { border-color:var(--color-gold); opacity:1; transform:scale(1.05); }
.carousel-thumb:hover { opacity:.85; }

/* Swipe indicator (mobile) */
.carousel-swipe-hint {
    display:none;
    position:absolute; bottom:100px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.4); font-size:.75rem; letter-spacing:.08em;
    animation:fadeHint 3s ease forwards;
}
@keyframes fadeHint { 0%{opacity:1} 70%{opacity:1} 100%{opacity:0} }
@media(max-width:768px){
    .carousel-swipe-hint { display:block; }
    .carousel-main { padding:1rem 3rem; }
    .carousel-prev { left:.25rem; }
    .carousel-next { right:.25rem; }
}

/* Facebook share */
.fb-share-btn {
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.65rem 1.5rem;
    background:#1877F2; color:#fff;
    border:none; border-radius:var(--radius);
    font-family:var(--font-sans); font-size:.85rem;
    cursor:pointer; text-decoration:none;
    transition:background .2s; font-weight:500;
}
.fb-share-btn:hover { background:#1464d8; color:#fff; }
.fb-share-btn svg { width:18px; height:18px; fill:#fff; }

/* ---- CONTACT ---- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-top:2rem; }
@media(max-width:768px){.contact-grid{grid-template-columns:1fr;}}
.contact-info p { color:var(--color-text-light); line-height:1.8; margin-top:1rem; }
.contact-info-item { display:flex; gap:1rem; align-items:flex-start; margin-top:1.5rem; }
.contact-info-icon { width:40px; height:40px; background:var(--color-surface); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem; }
.contact-info-text span { display:block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-light); }
.contact-info-text strong { font-size:.95rem; }
.contact-form { display:flex; flex-direction:column; gap:1.25rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-group label { font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-light); }
.form-group input,.form-group textarea,.form-group select { padding:.8rem 1rem; border:1px solid var(--color-border); background:var(--color-bg); font-family:var(--font-sans); font-size:.95rem; color:var(--color-text); outline:none; transition:border-color var(--transition); border-radius:var(--radius); }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:var(--color-green); }
.form-group textarea { resize:vertical; min-height:140px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:500px){.form-row{grid-template-columns:1fr;}}
.btn-submit { padding:.9rem 2.5rem; background:var(--color-text); color:#fff; border:none; font-family:var(--font-sans); font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:background var(--transition); align-self:flex-start; }
.btn-submit:hover { background:var(--color-green); }
.form-success { background:rgba(138,158,126,.12); border:1px solid var(--color-green); color:#4a7a4a; padding:1rem 1.25rem; font-size:.9rem; border-radius:var(--radius); }
.form-error   { background:rgba(200,60,60,.08); border:1px solid #f8a0a0; color:#b34444; padding:1rem 1.25rem; font-size:.9rem; border-radius:var(--radius); }

/* ---- FOOTER ---- */
.site-footer { background:var(--color-text); color:rgba(255,255,255,.65); padding:3rem 2rem 2rem; margin-top:6rem; }
.footer-inner { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:3rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.1); }
@media(max-width:768px){.footer-inner{grid-template-columns:1fr;gap:2rem;}}
.footer-brand .logo-text { font-family:var(--font-serif); font-size:1.5rem; color:#fff; letter-spacing:.15em; }
.footer-brand p { margin-top:.75rem; font-size:.9rem; }
.footer-nav h4,.footer-contact h4 { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:1rem; font-family:var(--font-sans); font-weight:400; }
.footer-nav ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer-nav a { font-size:.9rem; transition:color var(--transition); }
.footer-nav a:hover { color:var(--color-gold); }
.footer-bottom { max-width:1400px; margin:1.5rem auto 0; display:flex; justify-content:space-between; align-items:center; font-size:.75rem; color:rgba(255,255,255,.3); flex-wrap:wrap; gap:.5rem; }
.footer-bottom a { transition:color var(--transition); }
.footer-bottom a:hover { color:rgba(255,255,255,.7); }

/* ---- MENTIONS ---- */
.mentions-content { max-width:780px; padding:7rem 2rem 5rem; margin:0 auto; }
.mentions-content h2 { font-family:var(--font-serif); font-size:1.4rem; margin:2.5rem 0 .75rem; }
.mentions-content p,.mentions-content li { color:var(--color-text-light); line-height:1.8; font-size:.95rem; }

/* ---- UTILITAIRES ---- */
.hidden { display:none !important; }
.text-center { text-align:center; }
.divider { height:1px; background:var(--color-border); margin:4rem 0; }
.fade-in { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
.fade-in.visible { opacity:1; transform:none; }