:root { --bg:#fff; --fg:#1b1b1b; --muted:#777; --line:#e6e6e6; --accent:#b8892b; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"Helvetica Neue",Arial,sans-serif; color:var(--fg); background:var(--bg); line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

.site-header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1rem 2rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fffffff2; z-index:10; }
.logo img { width:300px; max-width:100%; height:auto; }
.nav { display:flex; gap:2rem; text-transform:uppercase; letter-spacing:.12em; font-size:.85rem; }
.nav a { padding:.3rem 0; border-bottom:2px solid transparent; }
.nav a:hover, .nav a.active { border-color:var(--accent); }
.social { display:flex; gap:1rem; font-size:.8rem; color:var(--muted); }
.social a:hover { color:var(--accent); }


main { max-width:1200px; margin:0 auto; padding:3rem 2rem 4rem; }
h1.page-title { font-weight:300; font-size:2rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.5rem; }
.lead { color:var(--muted); max-width:720px; margin-bottom:2.5rem; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.2rem; }
.card { position:relative; aspect-ratio:4/3; overflow:hidden; background:#ddd; }
.card img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.card:hover img { transform:scale(1.05); }
.card span { position:absolute; inset:auto 0 0 0; padding:1.2rem 1rem .8rem; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.7)); text-transform:uppercase; letter-spacing:.1em; font-size:.9rem; }
.card.empty { display:none; }

.gallery { columns:3 260px; column-gap:1rem; }
.gallery img { width:100%; margin-bottom:1rem; cursor:zoom-in; }

.timeline { list-style:none; border-left:2px solid var(--line); padding-left:1.5rem; }
.timeline li { position:relative; margin-bottom:1.2rem; }
.timeline li::before { content:""; position:absolute; left:-1.95rem; top:.55rem; width:.6rem; height:.6rem; border-radius:50%; background:var(--accent); }
.timeline b { color:var(--accent); margin-right:.6rem; }

.contact { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.contact form { display:grid; gap:1rem; }
.contact input, .contact textarea { width:100%; padding:.7rem; border:1px solid var(--line); font:inherit; }
.contact button { justify-self:start; padding:.7rem 2rem; border:0; background:var(--fg); color:#fff; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; }
.contact button:hover { background:var(--accent); }
.credit { font-size:.75rem; color:var(--muted); margin-top:.4rem; }

.back { display:inline-block; margin-bottom:1.5rem; color:var(--muted); font-size:.9rem; }
.site-footer { border-top:1px solid var(--line); padding:2rem; text-align:center; color:var(--muted); font-size:.85rem; }
.site-footer .social { justify-content:center; margin-bottom:.8rem; }

.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; z-index:50; cursor:zoom-out; }
.lightbox.open { display:flex; }
.lightbox img { max-width:94vw; max-height:92vh; }

@media (max-width:800px) {
  .site-header { flex-wrap:wrap; justify-content:center; padding:.8rem 1rem; }
  .nav { gap:1.1rem; font-size:.75rem; }
  .contact { grid-template-columns:1fr; }
}

/* Accueil : hero plein écran, structure du site d'origine */
body { font-family:"Montserrat","Helvetica Neue",Arial,sans-serif; }
:root { --accent:#D9A00F; }
.site-header { background:#ffffff78; box-shadow:0 0 40px rgba(0,0,0,.16); padding:20px; backdrop-filter:blur(4px); }
.nav a { font-weight:400; color:#000; }
.nav a:hover, .nav a.active { color:var(--accent); border-color:transparent; }

.hero { min-height:100vh; display:flex; background:#222 url("../images/2021-Juliana-JMC-1.jpg") center right / cover no-repeat fixed; color:#fff; }
.hero-col { width:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-top:2rem; }
.hero-logo { margin-left:200px; margin-bottom:50px; }
.hero-inner { display:flex; align-items:flex-end; width:100%; max-width:1350px; margin:0 auto 150px; padding:0 50px; }
.hero-titles, .hero-menu { width:50%; }
.hero-titles { text-align:center; }
.hero-titles .name { font-size:26px; font-weight:300; text-transform:uppercase; line-height:1; margin-bottom:5px; }
.hero-titles .job { font-size:40px; font-weight:300; text-transform:uppercase; line-height:.8; }
.hero-divider { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:15px 0; font-size:25px; font-weight:200; }
.hero-divider span { width:30%; border-top:1px solid #fff; order:0; }
.hero-divider b { font-weight:200; order:1; }
.hero-menu ul { list-style:none; text-align:right; }
.hero-menu li:not(:last-child) { margin-bottom:35px; }
.hero-menu a { font-size:50px; font-weight:200; line-height:1; }
.hero-menu a:hover { color:#FC3B29; }

@media (max-width:1024px) {
  .hero-logo { margin-left:2rem; }
  .hero-inner { padding:0 30px; margin-bottom:120px; }
  .hero-menu a { font-size:38px; }
}
@media (max-width:767px) {
  .hero { background-attachment:scroll; }
  .hero-logo { margin-left:1rem; }
  .hero-inner { flex-direction:column; align-items:stretch; gap:2rem; padding:0 20px; margin-bottom:60px; }
  .hero-titles, .hero-menu { width:100%; }
  .hero-titles .job { font-size:30px; }
  .hero-menu a { font-size:32px; }
}

.social a { display:inline-flex; }
.social svg { width:22px; height:22px; fill:currentColor; }

/* Accueil : pas d'en-tête, le menu est dans le hero */
body[data-page="index.html"] .site-header { display:none; }

/* En-tête des pages intérieures : logo 300px, menu centré */
.site-header { display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; }
.site-header .social { justify-self:end; }
.nav { font-size:1rem; gap:2.5rem; }
@media (max-width:1000px) {
  .site-header { grid-template-columns:1fr; justify-items:center; gap:1rem; }
  .site-header .social { justify-self:center; }
}

/* Pages à fond photo plein écran (Presse) */
.page-hero { min-height:calc(100vh - 100px); background:#222 center / cover no-repeat; color:#fff; }
.page-hero-inner { display:flex; max-width:1400px; min-height:inherit; margin:0 auto; }
.page-hero-title { flex:1; margin-top:220px; }
.page-hero-title h1 { font-family:"Montserrat",sans-serif; font-size:139px; font-weight:300; text-transform:capitalize; line-height:1; color:#fff; }
.page-hero-list { flex:1; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; gap:15px; padding:0 20px 100px; }
.btn-ghost { font-family:"Montserrat",sans-serif; font-weight:500; font-size:17px; line-height:30px; color:#fff; text-align:right; padding:12px 35px; background:transparent; border:2px solid transparent; box-shadow:0 0 10px rgba(0,0,0,.5); transition:background .3s; }
.btn-ghost:hover { background:#2E303F; border-color:#fff; }
@media (max-width:1024px) { .page-hero-title h1 { font-size:80px; } .page-hero-title { margin-top:120px; } }
@media (max-width:767px) {
  .page-hero-inner { flex-direction:column; }
  .page-hero-title { margin-top:40px; padding:0 20px; flex:none; }
  .page-hero-title h1 { font-size:56px; }
  .page-hero-list { align-items:stretch; padding-bottom:40px; }
  .btn-ghost { text-align:center; padding:12px 16px; }
}

/* Contact : fond photo, "Me contacter" (mailto) et portrait */
.contact-title { flex:1; margin-top:150px; }
.contact-title h1 { font-family:"Roboto",sans-serif; font-size:64px; font-weight:300; text-transform:capitalize; line-height:1; letter-spacing:1.1px; word-spacing:5px; }
.contact-title a { color:#000; }
.contact-title a:hover { text-decoration:underline; }
.contact-side { flex:1; display:flex; align-items:flex-start; justify-content:flex-end; gap:1rem; padding:150px 0 0 20%; }
.contact-details { font-family:"Montserrat",sans-serif; font-size:15px; font-weight:300; line-height:1.8; text-align:right; }
.contact-details a { color:#000; font-size:inherit; font-weight:inherit; }
.contact-details a:hover { text-decoration:underline; }
.contact-side img { width:50%; max-width:393px; height:auto; opacity:.88; }
@media (max-width:1024px) { .contact-title h1 { font-size:64px; } .contact-title { margin-top:80px; padding-left:20px; } }
@media (max-width:767px) {
  .contact-title { flex:none; margin-top:40px; }
  .contact-title h1 { font-size:44px; }
  .contact-side { padding:2rem 20px; flex-direction:column; align-items:center; }
  .contact-side img { width:80%; }
}


/* Expositions : titre puis lignes année (20 %) | texte (80 %), comme le site d'origine */
.expo-hero { background-color:#e2e5e8; }
.expo-inner { max-width:1600px; margin:0 auto; padding:100px 10px 100px; color:#000; }
.expo-title { font-family:"Montserrat",sans-serif; font-size:145px; font-weight:300; text-transform:capitalize; line-height:1; color:#000; margin:0 10px 35px; }
.expo-row { display:flex; align-items:center; margin-bottom:89px; }
.expo-row h2 { flex:0 0 20%; padding:0 10px; text-align:right; font-family:"Roboto",sans-serif; font-size:37px; font-weight:700; line-height:25px; color:#000; }
.expo-row p { flex:1; padding:0 10px; font-family:"Roboto",sans-serif; font-size:16px; font-weight:400; line-height:25px; color:#000; }
@media (max-width:1024px) { .expo-title { font-size:120px; } }
@media (max-width:767px) {
  .expo-inner { padding:40px 10px; }
  .expo-title { font-size:50px; }
  .expo-row { flex-direction:column; align-items:flex-start; margin-bottom:40px; }
  .expo-row h2 { flex:none; text-align:left; margin-bottom:6px; }
}

/* Icônes sociales : carrés colorés comme sur le site d'origine */
.social a { width:36px; height:36px; align-items:center; justify-content:center; border-radius:4px; color:#fff; background:#262626; }
.social a[aria-label="Facebook"] { background:#3b5998; }
.social a:hover { color:#fff; opacity:.85; }
.social svg { width:18px; height:18px; }

/* En-tête : alignement sur le site d'origine */
.site-header { padding:10px 20px; grid-template-columns:minmax(0,1fr) auto minmax(0,.4fr); }
.logo { margin-left:clamp(0px,10.4vw,150px); }
.nav { text-transform:none; letter-spacing:0; font-size:17px; font-weight:400; gap:2rem; }
.nav a { padding:.4rem 0; border-bottom:2px solid transparent; }
.nav a:hover, .nav a.active { color:var(--accent); border-color:var(--accent); }
.site-header .social { flex-direction:column; gap:8px; margin-right:1rem; }
.site-header .social a { width:40px; height:40px; }
.site-header .social svg { width:20px; height:20px; }
@media (max-width:1000px) {
  .site-header { grid-template-columns:1fr; }
  .logo { margin-left:0; }
  .site-header .social { flex-direction:row; margin-right:0; }
}
/* Mobile : le menu tient dans la largeur de l'écran */
@media (max-width:600px) {
  .site-header { padding:8px 12px; gap:.5rem; }
  .logo img { width:150px; }
  .nav { width:100%; justify-content:space-between; gap:.4rem; font-size:14px; }
  .site-header .social { gap:6px; }
  .site-header .social a { width:32px; height:32px; }
  .site-header .social svg { width:16px; height:16px; }
}

/* Contact : "Me contacter" au-dessus, puis coordonnées + photo */
.contact-hero .page-hero-inner { flex-direction:column; align-items:center; padding:0 20px; }
.contact-title { flex:none; margin-top:60px; text-align:center; }
.contact-title h1 { font-size:40px; }
.contact-title a { text-decoration:underline; text-underline-offset:6px; }
.contact-side { flex:none; justify-content:center; align-items:flex-end; padding:40px 0 0; }
.contact-side img { width:320px; max-width:60vw; }
@media (max-width:767px) {
  .contact-title { margin-top:30px; }
  .contact-title h1 { font-size:30px; }
  .contact-side { flex-direction:column; align-items:center; padding:24px 0 0; }
}

/* Contact : contenu aligné à gauche */
.contact-hero .page-hero-inner { align-items:flex-start; padding:0 50px; }
.contact-title { text-align:left; }
.contact-side { justify-content:flex-start; }
@media (max-width:767px) { .contact-hero .page-hero-inner { padding:0 20px; } .contact-side { align-items:flex-start; } }

/* ===== Page Thèmes : texte + grille 3 colonnes ===== */
.themes-intro { max-width:950px; margin:0 auto; padding:55px 20px 25px; }
.themes-intro p { font-family:"Montserrat",sans-serif; font-weight:300; font-size:16px; line-height:25px; color:#1b1b1b; }
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:0 10px 10px; }
.theme-card { position:relative; display:flex; align-items:center; justify-content:center; height:280px; background:#222 center / cover no-repeat; }
.theme-card span { font-family:"Roboto",sans-serif; font-weight:700; font-size:17px; text-transform:uppercase; color:#fff; text-align:center; text-shadow:0 0 6px rgba(0,0,0,.45); padding:0 10px; }
.theme-card::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .4s; }
.theme-card:hover::after { background:rgba(0,0,0,.3); }
.theme-card span { position:relative; z-index:1; }
@media (max-width:1024px) { .theme-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .theme-grid { grid-template-columns:1fr; } .theme-card { height:220px; } }

/* ===== Page d'un thème : image 60 % | texte 40 %, puis galerie ===== */
.theme-hero { position:relative; display:flex; min-height:calc(100vh - 143px); background:#414141; overflow:hidden; }
.theme-cover { flex:0 0 60%; background:#111 center / cover no-repeat; }
.theme-panel { flex:1; display:flex; align-items:center; }
.theme-panel-inner { width:100%; padding:40px 80px; color:#fff; }
.theme-panel h1 { font-family:"Montserrat",sans-serif; font-weight:300; font-size:35px; line-height:1.2; text-transform:capitalize; color:#fff; margin-bottom:25px; }
.theme-text { font-family:"Montserrat",sans-serif; font-weight:200; font-size:16px; line-height:1.6; color:#fff; text-align:left; }
.theme-text p + p { margin-top:0; }
.theme-text a { color:#fff; text-decoration:underline; }
.theme-panel hr { border:0; border-top:1px solid rgba(255,255,255,.33); margin:15px 0; }
.theme-main { padding:0; }
.theme-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.theme-gallery a { position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:#ddd; }
.theme-gallery img { width:100%; height:100%; object-fit:cover; }
.theme-gallery a::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .8s; }
.theme-gallery a:hover::after { background:rgba(0,0,0,.5); }
@media (max-width:1024px) { .theme-gallery { grid-template-columns:repeat(2,1fr); gap:10px; } }
@media (max-width:767px) {
  .theme-hero { flex-direction:column; }
  .theme-cover { flex:none; height:60vh; }
  .theme-panel-inner { padding:30px 20px; }
  .theme-gallery { grid-template-columns:1fr; }
}

/* ===== Pied de page : bandeau sombre, icônes grises à droite ===== */
.site-footer { background:#2a2a2a; border:0; padding:30px 20px; }
.site-footer .social { justify-content:flex-end; margin:0; gap:14px; }
.site-footer .social a { width:auto; height:auto; background:none; color:#666; }
.site-footer .social a:hover { color:#ccc; opacity:1; }
.site-footer .social svg { width:16px; height:16px; }
.themes-intro { max-width:990px; padding:52px 20px 34px; }
.themes-intro p { color:#111; }
.site-footer { padding:37px 20px; }
.theme-text sup { line-height:0; }

/* ===== Page d'un thème : carrousel, slides, galeries, image finale ===== */
.theme-main > div { margin:0; }
.carousel { overflow:hidden; height:55vh; min-height:320px; }
.car-track { display:flex; height:100%; }
.car-item { flex:0 0 33.3333%; height:100%; overflow:hidden; }
.car-item img { width:100%; height:100%; object-fit:cover; }

.slides { position:relative; height:100vh; max-height:900px; min-height:420px; overflow:hidden; background:#000; }
.slide { position:absolute; inset:0; background:center / cover no-repeat; }
.fx-fade .slide { opacity:0; transition:opacity 1.2s ease; }
.fx-fade .slide.on { opacity:1; }
.fx-zoom .slide { opacity:0; transform:scale(1.15); transition:opacity 1.2s ease, transform 4s ease; }
.fx-zoom .slide.on { opacity:1; transform:scale(1); }
.fx-slide .slide { transition:transform 1s ease; }

.theme-gallery { display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:7px; margin:7px 0 !important; }
.theme-gallery a { opacity:0; transition:opacity .8s ease var(--d,0ms), transform .8s ease var(--d,0ms); }
.reveal-up a { transform:translateY(40px); }
.reveal-zoom a { transform:scale(.9); }
.reveal-left a { transform:translateX(-40px); }
.theme-gallery a.in { opacity:1; transform:none; }

.theme-final { height:100vh; max-height:900px; min-height:420px; background:#000 center / cover no-repeat fixed; }
.theme-more { text-align:center; padding:12px 0; }
.btn-dark { display:inline-block; background:#000; color:#fff; font-family:"Roboto",sans-serif; font-weight:700; font-size:17px; text-transform:uppercase; padding:14px 35px; }
.btn-dark:hover { background:#2E303F; }
@media (max-width:1024px) { .theme-gallery { --cols:2 !important; } .car-item { flex-basis:50%; } .theme-final { background-attachment:scroll; } }
@media (max-width:767px) { .car-item { flex-basis:100%; } .theme-gallery { --cols:1 !important; } }
main.theme-main { max-width:none; margin:0; padding:0; }

/* Lightbox : légende sous l'image */
.lightbox figure { display:flex; flex-direction:column; align-items:center; max-width:94vw; }
.lightbox figure img { max-width:94vw; max-height:84vh; }
.lightbox figcaption { margin-top:12px; color:#fff; font-family:"Montserrat",sans-serif; font-weight:300; font-size:15px; line-height:1.5; text-align:center; }
.lightbox figcaption b { font-weight:400; }
.lightbox figcaption:empty { display:none; }

/* Pied de page : copyright à gauche, icônes à droite */
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.site-footer .copyright { color:#8a8a8a; font-family:"Montserrat",sans-serif; font-size:13px; font-weight:300; }
.site-footer .version { margin-left:.3rem; opacity:.8; }

/* Texte réservé aux lecteurs d'écran et aux moteurs de recherche (h1 sans rendu visuel) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Presse : fenêtre modale pour les PDF / images */
.doc-modal { position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:100; padding:2vh 2vw; }
.doc-modal.open { display:flex; }
.doc-box { position:relative; width:min(1000px,100%); height:100%; background:#fff; display:flex; }
.doc-content { flex:1; display:flex; overflow:auto; }
.doc-content iframe { width:100%; height:100%; border:0; }
.doc-content img { max-width:100%; max-height:100%; margin:auto; object-fit:contain; }
.doc-close { position:absolute; top:-2px; right:-44px; width:40px; height:40px; border:0; background:transparent; color:#fff; font-size:36px; line-height:1; cursor:pointer; }
@media (max-width:1100px) { .doc-close { top:8px; right:8px; background:#000a; border-radius:50%; } }

/* Contact : pas de hauteur minimale plein écran, on réduit le vide sous le contenu */
.contact-hero, .contact-hero .page-hero-inner { min-height:0; }
.contact-hero { padding-bottom:60px; }