/* ==========================================================
   Variables globales
   ========================================================== */
:root{

    /* ================= TYPOGRAPHIE ================= */

    --font:"Cormorant Garamond",serif;

    --fs-body:1.1rem;          /* Texte courant */
    --fs-logo:1.7rem;        /* Logo */
    --fs-brand:1.45rem;      /* Nom du site */
    --fs-h1:4.5rem;          /* Grand titre */
    --fs-lead:1.8rem;        /* Sous-titre */
    --fs-gallery:1.15rem;    /* Liens des galeries */
    --fs-title:2rem;         /* Titre du site */
    --fs-tagline:.95rem;     /* Slogan */
    --fs-mobile-menu:2rem;   /* Icône du menu mobile */

    /* Versions mobiles */
    --fs-brand-mobile:1.2rem;
    --fs-h1-mobile:3rem;
    --fs-lead-mobile:1.5rem;

    /* ================= COULEURS ================= */

    --text:#222;
    --muted:#666;
    --bg:#fff;
    --surface:#f6f6f4;
    --border:#ddd;

    /* ================= MISE EN PAGE ================= */

    --max:1200px;
}

/* ==========================================================
   Réinitialisation
   ========================================================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* ==========================================================
   Corps du document
   ========================================================== */
body{
font-family:var(--font);
font-size:var(--fs-body);
background:var(--bg);
color:var(--text);
line-height:1.75;
}

a{text-decoration:none;color:inherit;}
ul{list-style:none;}

.container{
width:min(92%,var(--max));
margin:auto;
}

/* ==========================================================
   En-tête
   ========================================================== */
.site-header{
position:sticky;
top:0;
background:rgba(246,246,244,.94);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
z-index:1000;
}

.site-header .container{
display:flex;
justify-content:space-between;
align-items:center;
min-height:78px;
}

/* Taille du logo */
.site-logo{
font-size:var(--fs-logo);
color:#111;
}

/* ==========================================================
   Navigation Desktop
   ========================================================== */
.desktop-menu>ul{
display:flex;
gap:2.2rem;
align-items:center;
}

.desktop-menu li{position:relative;}

.desktop-menu a,
.desktop-menu .label{
display:flex;
align-items:center;
gap:.35rem;
padding:1.6rem 0;
color:var(--muted);
}

.desktop-menu a:hover,
.desktop-menu .label:hover{
color:#111;
}

.chevron{
width:10px;
height:10px;
transition:transform .2s;
}

.has-submenu:hover .chevron,
.has-submenu:focus-within .chevron{
transform:rotate(180deg);
}

.submenu{
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:.18s;
position:absolute;
top:100%;
left:0;
min-width:250px;
background:#fff;
border:1px solid var(--border);
box-shadow:0 18px 40px rgba(0,0,0,.08);
padding:.8rem 0;
}

.has-submenu:hover>.submenu,
.has-submenu:focus-within>.submenu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.submenu a{display:block;padding:.6rem 1.2rem;}
.submenu a:hover{background:#f7f7f7;color:#111;}

/* ==========================================================
   Navigation Mobile
   ========================================================== */
.mobile-menu{display:none;}

.mobile-menu summary{
list-style:none;
font-size:var(--fs-mobile-menu);
cursor:pointer;
color:#111;
}

.mobile-menu summary::-webkit-details-marker{display:none;}
.mobile-menu nav{padding:1rem 0;}

.mobile-menu .group-title{
margin-top:1.2rem;
font-weight:600;
color:#222;
}

.mobile-menu .group-title:first-child{margin-top:0;}
.mobile-menu .group-list{margin-left:1.5rem;margin-top:.35rem;}
.mobile-menu .group-list li{padding:.35rem 0;}
.mobile-menu .group-list a{color:#666;}
.mobile-menu .group-list a:hover{color:#111;}
.mobile-menu .single{padding:.45rem 0;}

/* ==========================================================
   Hero
   ========================================================== */
.hero{padding:5rem 0;min-height:60vh;}

.site-brand{
display:flex;
flex-direction:column;
line-height:1.05;
}

.site-brand .line1,
.site-brand .line2{
font-size:var(--fs-brand);
letter-spacing:.04em;
}

.hero-intro{
text-align:center;
max-width:900px;
margin:0 auto .5rem;
}

.hero-intro h1{
font-size:var(--fs-h1);
font-weight:500;
margin-bottom:1rem;
}

.hero-intro .lead{
font-size:var(--fs-lead);
margin-bottom:2rem;
}

.hero-intro p:last-child{margin-top:2rem;}
.hero-intro a{display:inline-block;margin:.4rem .6rem;}

/* Séparateur entre sections */
.hero hr{
border:0;
height:0;
margin:1.25rem 0;
background:transparent;
}

/* Liens CTA */
.hero p>a{
display:inline-block;
color:#222;
font-weight:600;
letter-spacing:.02em;
transition:color .2s ease;
}

.hero p>a::after{
content:" →";
transition:margin-left .2s ease;
}

.hero p>a:hover{color:#000;}
.hero p>a:hover::after{margin-left:.35rem;}

/* ==========================================================
   Navigation des galeries
   ========================================================== */
.gallery-nav{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:1rem;
align-items:start;
text-align:center;
}

.gallery-nav a{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
min-height:4.5rem;
white-space:nowrap;
line-height:1.3;
font-size:var(--fs-gallery);
font-weight:600;
color:var(--text);
}

.gallery-nav a::after{
content:"";
display:block;
width:18px;
height:18px;
margin-top:.5rem;
background-repeat:no-repeat;
background-position:center;
background-size:18px 18px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.gallery-nav a:hover::after{
transform:translateY(2px);
transition:transform .2s ease;
}

/* ==========================================================
   Pied de page
   ========================================================== */
.site-footer{
background:var(--surface);
border-top:1px solid var(--border);
padding:2rem 0;
color:var(--muted);
}

.site-footer .container{
display:flex;
flex-direction:column;
align-items:center;
}

.site-footer ul{
display:flex;
gap:.75rem;
flex-wrap:wrap;
margin-top:1rem;
}

.site-title{
display:block;
font-size:var(--fs-title);
font-weight:600;
color:var(--text);
line-height:1.1;
}

.site-tagline{
display:block;
margin-top:.3rem;
font-size:var(--fs-tagline);
color:var(--muted);
letter-spacing:.03em;
line-height:1.3;
}

/* ==========================================================
   Responsive
   ========================================================== */
@media(max-width:900px){

.desktop-menu{display:none;}
.mobile-menu{display:block;}
.site-header .container{flex-wrap:wrap;}

.site-brand .line1,
.site-brand .line2{
font-size:var(--fs-brand-mobile);
}

.hero-intro h1{
font-size:var(--fs-h1-mobile);
}

.hero-intro .lead{
font-size:var(--fs-lead-mobile);
}

.gallery-nav{
grid-template-columns:1fr;
gap:1.5rem;
margin:1rem 0 2rem;
}

.gallery-nav a{
white-space:normal;
min-height:auto;
}

}