/* ==========================================================
   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.2rem;          /* Grand titre */
    --fs-lead:1.7rem;        /* Sous-titre */
    --fs-card:1.15rem;       /* Liens des services */
    --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:2.8rem;
    --fs-lead-mobile:1.4rem;

    /* ================= COULEURS ================= */
    /* Palette volontairement plus chaude que le site "projet artistique",
       pour marquer visuellement la vocation commerciale de ce site. */

    --text:#211c16;
    --muted:#7a6f60;
    --bg:#fff;
    --surface:#f8f4ee;
    --border:#e4ddd0;
    --accent:#8a6a3b;
    --accent-dark:#6d5330;

    /* ================= 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(248,244,238,.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;
}

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

/* ==========================================================
   Navigation Desktop
   ========================================================== */
.desktop-menu>ul{
display:flex;
gap:2.1rem;
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:260px;
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:var(--surface);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:var(--muted);}
.mobile-menu .group-list a:hover{color:#111;}
.mobile-menu .single{padding:.45rem 0;}

/* ==========================================================
   Hero — léger grain argentique en fond, purement décoratif
   (aucune photographie, conformément au choix éditorial du site)
   ========================================================== */
.hero{
padding:5rem 0;
min-height:60vh;
position:relative;
}

.hero::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.035;
z-index:0;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
background-size:180px 180px;
}

.hero>.hero-intro,
.hero>section{position:relative;z-index:1;}

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

.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;
color:var(--muted);
}

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

.hero hr{
border:0;
height:1px;
margin:2.5rem 0;
background:var(--border);
}

/* Liens CTA en texte (héritage du site éditorial) */
.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;}

/* ==========================================================
   Bouton d'appel à l'action (identité "commerciale" du site)
   ========================================================== */
.btn{
display:inline-block;
padding:.85rem 1.9rem;
margin:.4rem .5rem;
background:var(--accent);
color:#fff !important;
font-weight:600;
letter-spacing:.02em;
border:1px solid var(--accent);
transition:background .2s ease,border-color .2s ease;
}

.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);}

.btn.btn-ghost{
background:transparent;
color:var(--text) !important;
border:1px solid var(--border);
}

.btn.btn-ghost:hover{border-color:var(--accent);color:var(--accent) !important;}

.btn::after{content:none !important;}

/* ==========================================================
   Grille des prestations (page d'accueil)
   ========================================================== */
.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.75rem;
margin:2.5rem 0;
text-align:left;
}

.service-card{
padding:1.75rem;
background:var(--surface);
border:1px solid var(--border);
transition:border-color .2s ease;
}

.service-card:hover{border-color:var(--accent);}

.service-card h3{
font-size:var(--fs-card);
font-weight:600;
margin-bottom:.6rem;
}

.service-card h3 a::after{content:" →";}

.service-card p{margin:0;color:var(--muted);}

/* ==========================================================
   Encadré d'avertissement / information éditoriale
   (utilisé notamment pour expliquer l'absence de galerie publique)
   ========================================================== */
.notice-box{
margin:2rem 0;
padding:1.5rem 1.75rem;
background:var(--surface);
border-left:3px solid var(--accent);
}

.notice-box h3{
font-size:1.15rem;
margin-bottom:.6rem;
color:var(--text);
}

.notice-box p:last-child{margin-bottom:0;}

/* ==========================================================
   Liste à puces éditoriale (ex. questionnaire du reportage mémoriel)
   ========================================================== */
.checklist{
margin:1.25rem 0;
padding:0;
}

.checklist li{
position:relative;
padding-left:1.5rem;
margin-bottom:.75rem;
}

.checklist li::before{
content:"—";
position:absolute;
left:0;
color:var(--accent);
}

/* ==========================================================
   Citation
   ========================================================== */
.quote-block{
font-style:italic;
color:var(--muted);
border-left:2px solid var(--border);
padding-left:1.25rem;
margin:1.5rem 0;
}

/* ==========================================================
   Portrait du photographe (page À propos)
   Seule photo du site : il ne s'agit pas d'un travail client,
   donc aucun conflit avec l'absence de galerie publique.
   ========================================================== */
.profile-figure{
max-width:320px;
margin:0 auto 2.5rem;
}

.profile-figure img{
width:100%;
display:block;
border:1px solid var(--border);
}

.profile-figure figcaption{
text-align:center;
font-size:.9rem;
font-style:italic;
color:var(--muted);
margin-top:.75rem;
}

/* ==========================================================
   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);
}

.services-grid{
grid-template-columns:1fr;
}

}

/* ==========================================================
   Sélecteur de langue (FR/EN)
   ========================================================== */
.desktop-menu li.lang-item{
display:flex;
align-items:center;
}

.lang-switch{
display:inline-flex;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;
gap:.4rem;
font-size:.85rem;
letter-spacing:.05em;
border:1px solid var(--border);
padding:.3rem .7rem;
white-space:nowrap;
line-height:1;
}

.lang-switch a{
display:inline!important;
padding:0!important;
color:var(--muted);
}

.lang-switch a:hover{color:#111;}

.lang-switch a.lang-current{
color:#111;
font-weight:700;
pointer-events:none;
}

.lang-switch .lang-sep{color:var(--border);}