/*
Theme Name: Pixo
Theme URI: https://pixo.photo/
Author: Thibault
Author URI: https://pixo.photo/
Description: Thème sur-mesure pour Pixo, photographe de mariage dans les Hauts-de-France. Design éditorial, typographie soignée, performance optimisée.
Version: 1.0.0
License: All Rights Reserved
License URI: https://pixo.photo/
Text Domain: pixo
Tags: photography, wedding, custom, minimal
*/


/* ———— Custom serif font ———— */
@font-face{
  font-family:'Brand Serif';
  src:url('fonts/serif-regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Brand Serif';
  src:url('fonts/serif-regular-italic.woff2') format('woff2');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Brand Serif';
  src:url('fonts/serif-medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Brand Serif';
  src:url('fonts/serif-medium-italic.woff2') format('woff2');
  font-weight:500;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Brand Serif';
  src:url('fonts/serif-bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Brand Serif';
  src:url('fonts/serif-bold-italic.woff2') format('woff2');
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

:root{
  --ivory:#f4f0e8;
  --cream:#ece6d8;
  --ink:#1a1a1a;
  --muted:#6b6358;
  --accent:#8a6f4e;
  --line:rgba(26,26,26,.12);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  background:var(--ivory);
  color:var(--ink);
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
  font-size:.95rem;
}

/* ========== POLICE FORCÉE GLOBALEMENT ==========
   Tout le contenu du site (y compris les éléments générés par WordPress,
   les blocs Gutenberg, les plugins de formulaires, les widgets, etc.)
   utilise JetBrains Mono par défaut. Seuls les éléments explicitement
   en 'Brand Serif' (titres, citations, italiques) conservent leur police. */
body, p, a, span, div, li, ul, ol, dl, dt, dd,
input, textarea, select, button, label, legend,
h1, h2, h3, h4, h5, h6,
table, td, th, caption,
nav, header, footer, main, article, section, aside,
.wp-block-group, .wp-block-paragraph,
[class^="wp-block-"], [class*=" wp-block-"]{
  font-family:'JetBrains Mono',ui-monospace,monospace;
}

/* Eléments qui CONSERVENT Brand Serif (priorité haute) */
.serif,
.hero h1, .hero h1 *,
.hero-desc,
.philosophy-text, .philosophy-text *,
.portfolio-header h2, .portfolio-header h2 *,
.testimonial blockquote, .testimonial blockquote *,
.testimonial-counter,
.contact-left h2, .contact-left h2 *,
.about-sig,
.footer-brand p, .footer-brand p *,
.page-header h1, .page-header h1 *,
.page-intro,
.page-body textarea,
em, i,
blockquote,
cite{
  font-family:'Brand Serif',serif !important;
}

/* Reset des !important par défaut WordPress (certains thèmes parents et plugins injectent du !important) */
.wp-block-quote, .wp-block-quote *,
.has-text-align-center, .has-text-align-left, .has-text-align-right{
  font-family:inherit;
}

::selection{background:var(--ink);color:var(--ivory)}

/* ========== PROTECTION DES IMAGES ==========
   Dissuade le téléchargement par les méthodes courantes :
   glisser-déposer, sélection, long press mobile. Cela ne protège pas
   contre les capteurs déterminés (capture d'écran, inspecteur),
   mais bloque ~95% des tentatives ordinaires. */
img{
  -webkit-user-drag:none;
  -khtml-user-drag:none;
  -moz-user-drag:none;
  -o-user-drag:none;
  user-drag:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  pointer-events:auto;
}

/* Accessibilité : masque visuellement mais lisible par lecteurs d'écran et indexé par Google */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.serif{font-family:'Brand Serif',serif;font-weight:400}
.italic{font-style:italic}

/* ———— NAV ———— */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:1.5rem 3rem;
  display:flex;justify-content:space-between;align-items:center;
  color:var(--ink);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s ease, border-color .4s ease, padding .4s ease, backdrop-filter .4s ease;
}
nav.scrolled{
  background:rgba(244,244,238,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:1rem 3rem;
}
nav .logo{
  display:inline-flex;
  align-items:center;
  color:inherit;
  text-decoration:none;
  transition:opacity .3s;
  line-height:0;
}
nav .logo:hover{opacity:.7}
nav .logo svg{
  height:32px;
  width:auto;
  display:block;
  transition:height .4s ease;
}
nav.scrolled .logo svg{
  height:26px;
}
nav ul{
  display:flex;gap:2.5rem;list-style:none;
  align-items:center;
  transform:translateY(3px); /* aligne optiquement avec le centre du logo */
}
nav a{
  color:inherit;text-decoration:none;
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  position:relative;
  transition:opacity .3s;
}
nav a:hover{opacity:.6}


/* ———— HERO CARROUSEL ———— */
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  overflow:hidden;
  color:var(--ivory);
}

.carousel{
  position:absolute;
  inset:0;
  z-index:1;
}
.carousel-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.6s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
/* Fail-safe : la première slide est visible par défaut même si le JS n'est pas chargé */
.carousel-slide:first-child{
  opacity:1;
  pointer-events:auto;
}
.carousel-slide.active{
  opacity:1;
  pointer-events:auto;
}
.carousel-slide img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center center;
  filter:grayscale(.1) contrast(1.03) brightness(.92);
  transform:scale(1.06);
  animation:kenburns 9s ease-out forwards;
}
.carousel-slide.active img{
  animation:kenburns 9s ease-out forwards;
}
@keyframes kenburns{
  from{transform:scale(1.06)}
  to{transform:scale(1.12)}
}

/* Voile sombre pour lisibilité du texte */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.25) 30%,
      rgba(0,0,0,0) 60%
    ),
    linear-gradient(
      to right,
      rgba(0,0,0,.35) 0%,
      rgba(0,0,0,.1) 35%,
      rgba(0,0,0,0) 60%
    );
  z-index:2;
  pointer-events:none;
}

/* Contenu en surimpression */
.hero-content{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:8rem 3rem 3rem;
}

.hero-text{
  text-align:left;
  max-width:42ch;
  margin-bottom:3rem;
}

.hero h1{
  font-family:'Brand Serif',serif;
  font-weight:400;
  font-size:clamp(2rem, 5.5vw, 5rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ivory);
  text-shadow:0 2px 40px rgba(0,0,0,.4);
}
.hero h1 em{
  font-style:italic;
  color:#d4b896;
}

.hero-desc{
  font-size:.88rem;
  color:var(--ivory);
  margin:2rem 0 0;
  line-height:1.8;
  opacity:.92;
  text-shadow:0 1px 20px rgba(0,0,0,.4);
  white-space:nowrap;
}

.hero-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
}

.hero-meta{
  display:flex;
  gap:3rem;
  font-size:.72rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ivory);
}
.hero-meta div span{
  display:block;
  opacity:.55;
  margin-bottom:.4rem;
}

/* Contrôles du carrousel */
.carousel-controls{
  display:flex;
  align-items:center;
  gap:1.25rem;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.72rem;
  letter-spacing:.15em;
  color:var(--ivory);
}
.carousel-counter{
  font-family:'Brand Serif',serif;
  font-style:italic;
  font-size:1.1rem;
  letter-spacing:0;
}
.carousel-counter .total{opacity:.5}
.carousel-btn{
  background:transparent;
  border:1px solid rgba(244,244,238,.4);
  color:var(--ivory);
  width:44px;height:44px;
  padding:0;
  margin:0;
  font-size:1rem;
  border-radius:50%;
  cursor:pointer;
  transition:all .3s;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;
  letter-spacing:0;
}
.carousel-btn:hover{
  background:var(--ivory);
  color:var(--ink);
  border-color:var(--ivory);
}
.carousel-btn::after{content:none}
.carousel-btn:hover::after{transform:none}

/* Barre de progression */
.carousel-progress{
  position:absolute;
  bottom:0;left:0;
  height:2px;
  width:100%;
  background:rgba(244,240,232,.15);
  z-index:4;
}
.carousel-progress-bar{
  height:100%;
  background:var(--ivory);
  width:0;
  transition:width .1s linear;
}

/* Nav : adapter les couleurs pour le hero clair/sombre */
nav:not(.scrolled){color:var(--ivory)}

/* ———— APPROACH (fusion approche + à propos) ———— */
.approach{
  padding:8rem 3rem;
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:5rem;
  align-items:center;
}
.approach-img{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
}
.approach-img img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 30%;
  filter:grayscale(.05) contrast(1.02);
  transition:transform 1.6s cubic-bezier(.19,1,.22,1);
}
.approach:hover .approach-img img{transform:scale(1.03)}
.approach-text-wrap{
  display:flex;
  flex-direction:column;
  gap:2rem;
}
.section-label{
  font-size:.7rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:1rem;
}
.section-label::before{
  content:'';
  width:30px;height:1px;
  background:var(--muted);
}
.philosophy-text{
  font-family:'Brand Serif',serif;
  font-size:clamp(1.05rem, 1.6vw, 1.35rem);
  line-height:1.55;
  font-weight:400;
  letter-spacing:-.005em;
  color:var(--muted);
}
.philosophy-text em{
  font-style:italic;
  color:var(--accent);
}
.philosophy-text p + p{
  margin-top:1.5rem;
}

/* ———— PORTFOLIO ———— */
.portfolio{
  padding:4rem 0 8rem;
}
.portfolio-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:0 3rem 4rem;
  border-bottom:1px solid var(--line);
  margin-bottom:4rem;
}
.portfolio-header h2{
  font-family:'Brand Serif',serif;
  font-weight:400;
  font-size:clamp(2.5rem,5vw,4rem);
  letter-spacing:-.02em;
  line-height:1;
}
.portfolio-header h2 em{font-style:italic;color:var(--accent)}
.portfolio-header .count{
  font-size:.8rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
}

/* === GRILLE BENTO — formats natifs respectés === */
/* Grille 12 col × auto-rows pour cellules quasi-carrées par défaut.
   Les ratios des cellules correspondent aux orientations photos :
   - Portrait 2:3 (1100x1650) → cellules 4x6, 6x9, 4x8 (proches du ratio 2:3)
   - Portrait carré-vertical → cellules 3x4, 3x3, 4x4 (carré ou léger portrait)
   - Paysage 16:9 → cellules 6x3 (acceptable) */
.gallery{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:105px;
  grid-auto-flow:dense;
  gap:.5rem;
  padding:0 2rem;
  max-width:1500px;
  margin:0 auto;
}

.bento-cell{
  position:relative;
  overflow:hidden;
  background:var(--cream);
  cursor:zoom-in;
  margin:0;
  border-radius:8px;
}
.bento-cell img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.4s cubic-bezier(.19,1,.22,1), filter .6s;
  filter:grayscale(.08);
  display:block;
}
.bento-cell:hover img{
  transform:scale(1.05);
  filter:grayscale(0);
}
.bento-cell::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, transparent 60%, rgba(0,0,0,.1));
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.bento-cell:hover::after{opacity:1}

/* Tailles de cellules — bento-{cols}x{rows} */
.bento-3x3{grid-column:span 3;grid-row:span 3}
.bento-3x4{grid-column:span 3;grid-row:span 4}
.bento-4x4{grid-column:span 4;grid-row:span 4}
.bento-4x6{grid-column:span 4;grid-row:span 6}
.bento-4x8{grid-column:span 4;grid-row:span 8}
.bento-6x3{grid-column:span 6;grid-row:span 3}
.bento-6x9{grid-column:span 6;grid-row:span 9}

/* Tablette : grille 8 cols */
@media (max-width:1100px){
  .gallery{
    grid-template-columns:repeat(8,1fr);
    grid-auto-rows:100px;
    padding:0 1.5rem;
  }
  .bento-3x3{grid-column:span 2;grid-row:span 2}
  .bento-3x4{grid-column:span 2;grid-row:span 3}
  .bento-4x4{grid-column:span 3;grid-row:span 3}
  .bento-4x6{grid-column:span 3;grid-row:span 4}
  .bento-4x8{grid-column:span 3;grid-row:span 5}
  .bento-6x3{grid-column:span 4;grid-row:span 2}
  .bento-6x9{grid-column:span 4;grid-row:span 6}
}

/* Mobile : grille 6 cols, plus compacte */
@media (max-width:768px){
  .gallery{
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:60px;
    gap:.4rem;
    padding:0 .75rem;
  }
  .bento-3x3{grid-column:span 3;grid-row:span 3}
  .bento-3x4{grid-column:span 3;grid-row:span 4}
  .bento-4x4{grid-column:span 3;grid-row:span 3}
  .bento-4x6{grid-column:span 3;grid-row:span 5}
  .bento-4x8{grid-column:span 3;grid-row:span 6}
  .bento-6x3{grid-column:span 6;grid-row:span 3}
  .bento-6x9{grid-column:span 6;grid-row:span 8}
}

/* === LIGHTBOX === */
.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(20,22,18,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease-out;
  backdrop-filter:blur(8px);
}
.lightbox.open{
  opacity:1;
  pointer-events:auto;
}
.lightbox-img{
  max-width:92vw;
  max-height:88vh;
  object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  user-select:none;
  -webkit-user-drag:none;
  transition:opacity .25s;
}
.lightbox-img.loading{opacity:.3}

.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:absolute;
  background:rgba(244,244,238,.08);
  border:1px solid rgba(244,240,232,.15);
  color:var(--ivory);
  width:48px;height:48px;
  border-radius:50%;
  font-size:1.5rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s, transform .2s;
  font-family:inherit;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
  background:rgba(244,244,238,.18);
  transform:scale(1.05);
}
.lightbox-close{top:1.5rem;right:1.5rem}
.lightbox-prev{left:1.5rem;top:50%;transform:translateY(-50%)}
.lightbox-next{right:1.5rem;top:50%;transform:translateY(-50%)}
.lightbox-prev:hover{transform:translateY(-50%) scale(1.05)}
.lightbox-next:hover{transform:translateY(-50%) scale(1.05)}

.lightbox-counter{
  position:absolute;
  bottom:1.5rem;
  left:50%;
  transform:translateX(-50%);
  color:var(--ivory);
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  letter-spacing:.1em;
  opacity:.7;
}

@media (max-width:768px){
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next{
    width:40px;height:40px;
    font-size:1.2rem;
  }
  .lightbox-prev{left:.75rem}
  .lightbox-next{right:.75rem}
  .lightbox-close{top:1rem;right:1rem}
}

/* Signature dans la section approche */
.about-sig{
  font-family:'Brand Serif',serif;
  font-style:italic;
  font-size:1.7rem;
  color:var(--accent);
  margin-top:1rem;
  letter-spacing:-.01em;
}

/* ———— TESTIMONIAL CARROUSEL ———— */
.testimonial{
  padding:10rem 3rem;
  background:var(--cream);
  text-align:center;
}
.testimonial-inner{
  max-width:900px;margin:0 auto;
}
.testimonial .section-label{justify-content:center;margin-bottom:3rem}
.testimonial .section-label::before{display:none}

.testimonial-carousel{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.testimonial-slide{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .8s ease, transform .8s ease;
  pointer-events:none;
}
.testimonial-slide.active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.testimonial blockquote{
  font-family:'Brand Serif',serif;
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.2rem,2.6vw,1.9rem);
  line-height:1.4;
  letter-spacing:-.005em;
}
.testimonial blockquote::before,
.testimonial blockquote::after{
  color:var(--accent);
  font-style:normal;
}
.testimonial blockquote::before{content:'“ '}
.testimonial blockquote::after{content:' ”'}
.testimonial cite{
  display:block;
  margin-top:2.5rem;
  font-style:normal;
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Contrôles du carrousel témoignages */
.testimonial-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  margin-top:3rem;
  font-family:'JetBrains Mono',ui-monospace,monospace;
}
.testimonial-counter{
  font-family:'Brand Serif',serif;
  font-style:italic;
  font-size:1.1rem;
  letter-spacing:0;
  color:var(--ink);
  min-width:80px;
}
.testimonial-counter .total{opacity:.45}
.testimonial-btn{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  width:44px;height:44px;
  padding:0;margin:0;
  font-size:1rem;
  border-radius:50%;
  cursor:pointer;
  transition:all .3s;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;
  letter-spacing:0;
}
.testimonial-btn:hover{
  background:var(--ink);
  color:var(--ivory);
  border-color:var(--ink);
}
.testimonial-btn::after{content:none}
.testimonial-btn:hover::after{transform:none}

/* ———— CONTACT ———— */
.contact{
  padding:10rem 3rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6rem;
  max-width:1400px;
  margin:0 auto;
  align-items:start;
}
.contact-left h2{
  font-family:'Brand Serif',serif;
  font-weight:400;
  font-size:clamp(2.5rem,5vw,4.5rem);
  letter-spacing:-.02em;
  line-height:1;
  margin:1.5rem 0 2rem;
}
.contact-left h2 em{font-style:italic;color:var(--accent)}
.contact-left p{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.8;
  margin-bottom:2.5rem;
  max-width:46ch;
}
.contact-info{
  border-top:1px solid var(--line);
  padding-top:2rem;
}
.contact-info div{
  display:flex;
  justify-content:space-between;
  padding:1rem 0;
  border-bottom:1px solid var(--line);
  font-size:.85rem;
}
.contact-info span:first-child{
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  font-size:.7rem;
}
.contact-info a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:border .3s}
.contact-info a:hover{border-color:var(--accent)}

form{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}
label{
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  margin-bottom:.5rem;
}
input,textarea,select{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:.75rem 0;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.95rem;
  color:var(--ink);
  outline:none;
  transition:border-color .3s;
}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:100px;font-family:'Brand Serif',serif;font-style:italic;font-size:1.05rem}

form button{
  margin-top:1rem;
  background:var(--ink);
  color:var(--ivory);
  border:none;
  padding:1.25rem 2rem;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.7rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s, opacity .3s;
  align-self:flex-start;
  display:flex;
  align-items:center;
  gap:1rem;
}
form button:disabled{opacity:.6;cursor:wait}

#form-status{
  font-size:.8rem;
  line-height:1.6;
  min-height:1em;
  transition:opacity .3s;
}
.form-success{color:var(--accent);font-style:italic;font-family:'Brand Serif',serif;font-size:1rem}
.form-error{color:#b04040}
form button:hover{background:var(--accent)}
form button::after{content:'→';transition:transform .3s}
form button:hover::after{transform:translateX(4px)}

/* ———— FOOTER ———— */
footer{
  background:var(--ink);
  color:var(--ivory);
  padding:5rem 3rem 2rem;
}
.footer-top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:4rem;
  padding-bottom:4rem;
  border-bottom:1px solid rgba(244,240,232,.15);
}
.footer-brand svg{
  height:54px;
  width:auto;
  display:block;
  color:var(--ivory);
  margin-bottom:2rem;
}
.footer-brand p{
  font-family:'Brand Serif',serif;
  font-size:1.4rem;
  line-height:1.4;
  letter-spacing:-.01em;
  color:rgba(244,244,238,.85);
}
.footer-brand p em{
  font-style:italic;
  color:#d4b896;
}
.footer-col h4{
  font-size:.7rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:rgba(244,240,232,.5);
  margin-bottom:1.5rem;
}
.footer-col ul{list-style:none}
.footer-col li{padding:.4rem 0;font-size:.9rem}
.footer-col a{color:rgba(244,240,232,.8);text-decoration:none;transition:color .3s}
.footer-col a:hover{color:#d4b896}

/* Icônes sociales du footer */
.footer-top .social-icons{
  display:flex;
  gap:1rem;
  align-items:center;
  margin-top:.25rem;
}
footer .social-icons a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:42px !important;
  height:42px !important;
  border:1px solid rgba(244,244,238,.3);
  border-radius:50%;
  color:rgba(244,244,238,.85) !important;
  transition:all .3s ease;
  padding:0 !important;
}
footer .social-icons a:hover{
  background:#d4b896;
  border-color:#d4b896;
  color:var(--ink) !important;
  transform:translateY(-2px);
}
footer .social-icons a svg{
  display:block !important;
  width:18px !important;
  height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
}
footer .social-icons a svg.icon-fill,
footer .social-icons a svg.icon-fill path{
  fill:currentColor !important;
  stroke:none !important;
}
footer .social-icons a svg.icon-stroke{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.6;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:2rem;
  font-size:.75rem;
  color:rgba(244,240,232,.5);
  letter-spacing:.1em;
}

/* ———— RESPONSIVE ———— */
@media (max-width:900px){
  nav{padding:1.25rem 1.5rem}
  nav.scrolled{padding:.9rem 1.5rem}
  nav ul{display:none}
  .hero{min-height:600px}
  .hero-content{padding:6rem 1.5rem 2rem}
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:2rem}
  .hero-meta{gap:2rem;font-size:.68rem}
  .carousel-controls{width:100%;justify-content:space-between}
  .hero-desc{margin-top:1.5rem;white-space:normal}
  .approach,.contact{grid-template-columns:1fr;gap:3rem;padding:5rem 1.5rem}
  .portfolio-header{padding:0 1.5rem 2rem;flex-direction:column;align-items:flex-start;gap:1rem}
  .testimonial{padding:5rem 1.5rem}
  .footer-top{grid-template-columns:1fr;gap:2rem}
  .form-row{grid-template-columns:1fr}
  footer{padding:3rem 1.5rem 1.5rem}
}

/* === MENU HAMBURGER MOBILE === */
.nav-toggle{
  display:none;
  background:none;
  border:none;
  padding:0;
  margin:0;
  color:inherit;
  cursor:pointer;
  width:36px;height:36px;
  align-items:center;
  justify-content:center;
  transition:opacity .3s;
}
.nav-toggle:hover{opacity:.7}

.mobile-menu{
  position:fixed;
  top:0;left:0;right:0;
  z-index:998;
  background:var(--ivory);
  display:flex;
  flex-direction:column;
  padding:5rem 2rem 2.5rem;
  transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.77,0,.18,1);
  pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.mobile-menu.open{
  transform:translateY(0);
  pointer-events:auto;
}
.mobile-menu-close{
  position:absolute;
  top:1.5rem;right:1.5rem;
  background:none;
  border:none;
  padding:0;
  width:36px;height:36px;
  cursor:pointer;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .3s;
  z-index:1;
}
.mobile-menu-close:hover{opacity:.7}
.mobile-menu-nav{
  position:static;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  padding:0;
  background:none;
  border:none;
  z-index:auto;
}
.mobile-menu-nav a{
  font-family:'Brand Serif',Georgia,serif;
  font-size:1.6rem;
  font-weight:400;
  letter-spacing:-.005em;
  color:var(--ink);
  text-decoration:none;
  text-transform:none;
  line-height:1.1;
  transition:color .3s;
  display:inline-block;
  width:fit-content;
}
.mobile-menu-nav a:hover{color:var(--accent)}
.mobile-menu-footer{
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.mobile-menu-footer a{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.78rem;
  letter-spacing:.05em;
  color:var(--muted);
  text-decoration:none;
  transition:color .3s;
}
.mobile-menu-footer a:hover{color:var(--accent)}

@media (max-width:768px){
  .nav-toggle{display:flex}
}

body.menu-open{overflow:hidden}

/* Fade in on scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s ease, transform 1s ease}
.reveal.visible{opacity:1;transform:translateY(0)}