/* ============================================================
   STYLE.CSS – Marion Froment Portfolio  — version finale
   ============================================================ */

/* ─── VARIABLES ─────────────────────────────────────────── */
:root {
  --text-primary:   #1F1F1F;
  --text-secondary: #222;
  --text-muted:     #666;
}

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: "Montserrat", sans-serif;
  background: linear-gradient(to bottom, #8090EE 0%, #B1BBFF 55%, #D0D7FF 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ─── BANDES DÉCORATIVES ────────────────────────────────── */
.bg-stripes {
  position: fixed; top:0; left:0;
  width:100%; height:70vh;
  z-index:-1; pointer-events:none; overflow:hidden;
}
.bg-stripes div {
  position:absolute; background:#C0CAFF;
  opacity:0.5; border-radius:200px; width:180px;
}
.bg-stripes div:nth-child(1){height:70vh;top:-25vh;left:0%}
.bg-stripes div:nth-child(2){height:55vh;top:-18vh;left:20%}
.bg-stripes div:nth-child(3){height:65vh;top:-22vh;left:40%}
.bg-stripes div:nth-child(4){height:50vh;top:-15vh;left:60%}
.bg-stripes div:nth-child(5){height:60vh;top:-20vh;left:80%}

/* ─── GRAND TITRE EN FOND ───────────────────────────────── */
.header-title-bg {
  position: absolute; top:0; left:50%;
  transform: translateX(-50%);
  z-index:2;
  font-family:'Montserrat',sans-serif; font-weight:600;
  font-size: clamp(90px,15vw,280px);
  color: rgba(195,202,249,1);
  white-space:nowrap; pointer-events:none; user-select:none;
  letter-spacing:-0.02em;
}

/* ─── HEADER UNIFIÉ (logo + nav dans le même tag) ───────── */
.site-header {
  position: absolute;
  top: 32px;
  left: 0; right: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 0 20px;
}

/* Logo positionné à gauche de façon absolue dans le header */
.logo {
  position: absolute;
  left: 35px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  text-decoration: none;
  border:none; outline:none; box-shadow:none; background:transparent;
}
.logo img {
  height: 60px; width:auto; display:block;
  border:none; box-shadow:none;
}

/* Capsule nav */
.site-header nav {
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(255,255,255,0.6);
  padding: 14px 50px;
  border-radius: 50px;
  box-shadow: 0 8px 32px rgba(177,187,255,0.25);
  animation: fadeInDown 0.6s ease;
}

nav ul {
  display:flex; justify-content:center; align-items:center;
  gap:45px; list-style:none;
}

nav ul li a {
  font-family:"Montserrat",sans-serif;
  font-weight:700; font-size:1.1rem;
  color:white; text-decoration:none;
  position:relative; padding:6px 0;
  transition:opacity 0.2s ease;
}
nav ul li a:hover { opacity:0.8; }

nav ul li a.active::after {
  content:"";
  position:absolute; bottom:-4px; left:0;
  width:100%; height:3px;
  background:white; border-radius:2px;
}

/* ─── HERO – PAGE INDEX ─────────────────────────────────── */
.hero {
  min-height: 55vh;
  display:flex; justify-content:center; align-items:center;
  padding-top: 140px;
  position:relative; z-index:10;
}
.hero-center {
  text-align:center;
  animation: fadeInUp 0.8s ease;
}
.laptop {
  width: 100%; max-width:1100px;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.15));
}

/* ─── SECTION À PROPOS ──────────────────────────────────── */
.section {
  width:88%; max-width:900px;
  margin: 0 auto 60px;
  padding: 40px 45px;
  background:transparent; box-shadow:none;
  border-radius:0; border:none;
}
.section h2 {
  font-size: clamp(1.8rem,4vw,2.8rem);
  color:white; font-weight:600; margin-bottom:24px;
  text-shadow:0 2px 10px rgba(0,0,0,0.12);
}
.section .description {
  font-size: clamp(0.98rem,2vw,1.12rem);
  line-height:1.8; color:white; opacity:0.95;
  text-shadow:0 1px 6px rgba(0,0,0,0.08);
}

/* ─── PAGE CV ───────────────────────────────────────────── */
.cv-section {
  width:100%; min-height:100vh;
  display:flex; justify-content:center; align-items:center;
  padding-top:200px; padding-bottom:100px;
}
.cv-container {
  max-width:800px; width:90%;
  text-align:center; animation:fadeIn 0.8s ease;
}
.cv-image {
  width:100%; max-width:700px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  margin-bottom:30px;
}
.download-btn {
  display:inline-block;
  background:linear-gradient(135deg,#D0D7FF,#C0CAFF);
  color:white; padding:16px 45px; border-radius:50px;
  text-decoration:none; font-size:1.1rem; font-weight:600;
  box-shadow:0 10px 30px rgba(208,215,255,0.5);
  transition:all 0.3s ease; font-family:"Montserrat",sans-serif;
}
.download-btn:hover { transform:translateY(-3px); }

/* ─── PAGES PORTFOLIO ───────────────────────────────────── */
.portfolio-section {
  width:100%; min-height:100vh;
  padding-top:160px; padding-bottom:100px;
}
.portfolio-intro {
  width:88%; max-width:800px;
  margin:60px auto 40px;
  animation:fadeIn 0.8s ease;
}
.portfolio-intro p {
  font-size:clamp(0.92rem,2vw,1.02rem);
  color:#fff; opacity:0.92; line-height:1.7; margin-bottom:22px;
}
.portfolio-pdf-btn {
  display:inline-block;
  background:linear-gradient(135deg,#D0D7FF,#C8D0FF);
  color:#fff; padding:11px 28px; border-radius:50px;
  text-decoration:none; font-size:0.93rem; font-weight:600;
  box-shadow:0 6px 20px rgba(192,202,255,0.4);
  transition:all 0.3s ease; font-family:"Montserrat",sans-serif;
}
.portfolio-pdf-btn:hover { transform:translateY(-2px); }

.projects-title { text-align:center; margin-bottom:28px; }
.projects-title h2 {
  font-size:clamp(1.8rem,4vw,2.5rem);
  color:var(--text-primary); font-weight:600; margin-bottom:10px;
}
.projects-subtitle { font-size:clamp(0.88rem,2vw,1rem); color:var(--text-muted); }

/* ─── FILTRES ───────────────────────────────────────────── */
.portfolio-filters {
  width:90%; max-width:1200px;
  margin:0 auto 45px;
  display:flex; justify-content:center; flex-wrap:wrap; gap:12px;
}
.filter-btn {
  background:rgba(255,255,255,0.92);
  color:var(--text-primary);
  padding:10px 24px; border:none; border-radius:25px;
  font-size:0.93rem; font-weight:600; cursor:pointer;
  transition:all 0.3s ease;
  font-family:"Montserrat",sans-serif;
}
.filter-btn:hover, .filter-btn.active {
  background:linear-gradient(135deg,#aab7fa,#7d8aff);
  color:white; transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(192,202,255,0.5);
}

/* ─── GRILLE PROJETS ────────────────────────────────────── */
.portfolio-grid {
  width:90%; max-width:1200px;
  margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:60px 40px; padding:20px;
}
.project-card {
  text-align:center; cursor:pointer;
  animation:fadeInUp 0.6s ease;
  transition:transform 0.3s ease;
}
.project-card:hover { transform:translateY(-8px); }

.project-image {
  width:100%; margin-bottom:16px;
  display:flex; justify-content:center;
}
.project-image img {
  object-fit:contain;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,0.15));
  transition:transform 0.3s ease;
}
.project-card:hover .project-image img { transform:scale(1.02); }

/* Tailles bureau par projet */
.project-image img          { width:40%; }
.ordilum  img               { width:120%; }
.jazzordi img               { width:120%; }
.mot      img               { width:120%; }
.tor      img               { width:120%; }
.darty    img               { width:120%; }
.deconso  img               { width:40%; }
.ryoji    img               { width:500px; }
.rome     img               { width:80%; }
.marque   img               { width:40%; }
.reve     img               { width:60%; }
.philo    img               { width:90%; }
.diamond  img               { width:50%; }
.motion   img               { width:70%; }
.retro    img               { width:50%; }
.senso    img               { width:50%; }
.cera     img               { width:70%; }
.presence img               { width:55%; }
.ligne    img               { width:75%; }
.utopia   img               { width:60%; }
.vynil    img               { width:80%; }
.orphe    img               { width:60%; }
.futur    img               { width:65%; }
.biennale img               { width:50%; }
.bb       img               { width:50%; }
.ettore   img               { width:50%; }
.lumin    img               { width:60%; }
.snu      img               { width:90%; }
.bene     img               { width:55%; }
.harmo    img               { width:80%; }

.project-info h3 {
  font-size:clamp(1.2rem,3vw,1.7rem);
  color:var(--text-primary); font-weight:600; margin-bottom:4px;
}
.project-info p {
  font-size:clamp(0.88rem,2vw,1rem);
  color:var(--text-muted); opacity:0.85;
}

/* ─── FOOTER ────────────────────────────────────────────── */
.footer-contact {
  position:relative; width:100%;
  padding:60px 20px 80px;
  background:transparent; overflow:hidden;
}
.footer-title {
  position:absolute; bottom:-140px; left:50%;
  transform:translateX(-50%);
  font-family:"Montserrat",sans-serif; font-weight:600;
  font-size:clamp(120px,20vw,360px);
  color:rgba(255,255,255,0.3);
  white-space:nowrap; pointer-events:none; z-index:3;
  letter-spacing:-0.02em;
}
.footer-content {
  position:relative; z-index:10;
  display:flex; justify-content:space-around; align-items:center;
  width:90%; max-width:1200px; margin:auto;
  text-align:center; flex-wrap:wrap; gap:40px;
}
.footer-block h3 {
  font-size:1.3rem; margin-bottom:8px;
  color:var(--text-secondary); font-weight:500;
}
.footer-block p,
.footer-block p a {
  font-size:1.1rem; opacity:0.9;
  color:var(--text-primary); text-decoration:none;
}
.footer-block p a:hover { text-decoration:underline; }

.footer-icons {
  display:flex; flex-direction:row;
  align-items:center; justify-content:center;
  gap:20px; flex-wrap:nowrap; margin-top:8px;
}
.footer-icons a {
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.footer-icons a img {
  width:38px; height:38px; display:block;
  opacity:0.9; transition:all 0.3s ease;
}
.footer-icons a:hover img {
  opacity:1; transform:scale(1.1) translateY(-3px);
}

.footer-vertical-stripes {
  position:absolute; bottom:0; left:0;
  width:100%; height:45vh;
  pointer-events:none; overflow:hidden; z-index:2;
}
.footer-vertical-stripes div {
  position:absolute; background:#C0CAFF; opacity:0.5; border-radius:200px;
}
.footer-vertical-stripes div:nth-child(1){width:140px;height:38vh;bottom:-12vh;left:5%}
.footer-vertical-stripes div:nth-child(2){width:180px;height:45vh;bottom:-15vh;left:25%}
.footer-vertical-stripes div:nth-child(3){width:120px;height:40vh;bottom:-10vh;left:48%}
.footer-vertical-stripes div:nth-child(4){width:200px;height:42vh;bottom:-16vh;left:70%}
.footer-vertical-stripes div:nth-child(5){width:160px;height:36vh;bottom:-12vh;left:88%}
.footer-vertical-stripes div:nth-child(6){width:110px;height:42vh;bottom:-14vh;left:-3%}
.footer-vertical-stripes div:nth-child(7){width:130px;height:48vh;bottom:-18vh;right:-3%}

/* ─── MODAL ─────────────────────────────────────────────── */
.project-modal {
  display:none; position:fixed;
  top:0; left:0; width:100%; height:100%;
  z-index:9999; justify-content:center; align-items:center; padding:20px;
}
.project-modal.active { display:flex; animation:modalFadeIn 0.3s ease; }

.modal-overlay {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  cursor:pointer;
}
.modal-content {
  position:relative; z-index:1;
  background:#fff; border-radius:24px;
  padding:50px 55px; max-width:780px; width:100%;
  max-height:88vh; overflow-y:auto;
  box-shadow:0 30px 80px rgba(177,187,255,0.35);
  animation:modalSlideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);
  scrollbar-width:thin; scrollbar-color:#C0CAFF transparent;
}
.modal-content::-webkit-scrollbar{width:5px}
.modal-content::-webkit-scrollbar-thumb{background:#C0CAFF;border-radius:10px}

.modal-close {
  position:absolute; top:18px; right:22px;
  background:rgba(192,202,255,0.2); border:none;
  width:38px; height:38px; border-radius:50%;
  font-size:1.4rem; color:#555; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.25s ease; font-family:"Montserrat",sans-serif;
}
.modal-close:hover {
  background:linear-gradient(135deg,#5C6EE0,#8090EE);
  color:#fff; transform:scale(1.1) rotate(90deg);
}
.modal-header {
  margin-bottom:28px; padding-bottom:18px;
  border-bottom:2px solid #ECEEFF;
}
.modal-header h2 {
  font-family:"Montserrat",sans-serif;
  font-size:clamp(1.6rem,3.5vw,2.2rem);
  font-weight:700; color:#1F1F1F; margin-bottom:6px;
}
.modal-header p { font-size:1rem; color:#999; }

.modal-body { display:flex; flex-direction:column; gap:26px; }

.modal-gallery {
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
}
.modal-gallery img {
  width:100%; height:430px; object-fit:contain;
  border-radius:14px;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.12));
  transition:transform 0.3s ease;
}
.modal-gallery img:hover { transform:scale(1.01); }

.modal-description {
  font-size:1rem; line-height:1.75; color:#444;
  background:#F4F5FF; border-left:4px solid #8090EE;
  padding:18px 22px; border-radius:0 12px 12px 0;
}
.modal-description p { font-size:1rem; line-height:1.75; color:#444; }
.modal-description p+p { margin-top:10px; }

.modal-details ul {
  list-style:none; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px;
}
.modal-details ul li {
  background:#F4F5FF; border-radius:10px;
  padding:12px 16px; font-size:0.9rem; color:#333;
  display:flex; flex-direction:column; gap:3px;
}
.modal-details ul li span {
  font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em; color:#8090EE;
}

.modal-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.modal-links-title {
  width:100%; font-size:0.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.1em;
  color:#aaa; margin-bottom:5px;
}
.modal-link-btn {
  display:inline-block;
  background:linear-gradient(135deg,#b9c4fe,#909bfe);
  color:white; padding:9px 20px; border-radius:50px;
  text-decoration:none; font-size:0.86rem; font-weight:600;
  font-family:"Montserrat",sans-serif;
  transition:all 0.3s ease;
  box-shadow:0 4px 12px rgba(92,110,224,0.35);
}
.modal-link-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(92,110,224,0.55);
}

/* ─── ANIMATIONS ────────────────────────────────────────── */
@keyframes fadeIn    { from{opacity:0}    to{opacity:1} }
@keyframes fadeInUp  { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown{ from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-15px)} }
@keyframes modalFadeIn  { from{opacity:0} to{opacity:1} }
@keyframes modalSlideUp {
  from{opacity:0;transform:translateY(40px) scale(0.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE MOBILE  ≤ 768px
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  body { overflow-x:hidden; }

  /* Bandes : plus fines */
  .bg-stripes div { width:55px !important; }
  .bg-stripes div:nth-child(1){ left:-2% !important }
  .bg-stripes div:nth-child(2){ left:22% !important }
  .bg-stripes div:nth-child(3){ left:44% !important }
  .bg-stripes div:nth-child(4){ left:66% !important }
  .bg-stripes div:nth-child(5){ left:88% !important }

  /* Grand titre fond */
  .header-title-bg {
    font-size: clamp(44px,14vw,82px) !important;
    white-space:nowrap !important;
  }

  /* ── HEADER : fixé, logo à gauche + nav centrée ── */
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important; right:0 !important;
    width: 100% !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 9000 !important;
    /* fond léger pour lisibilité */
    background: transparent !important;
  }

  /* Logo : coin haut-gauche dans le header fixe */
  .logo {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 9001 !important;
  }
  .logo img {
    height: 36px !important;
    width: auto !important;
  }

  /* Capsule nav : glassmorphisme conservé, taille réduite */
  .site-header nav {
    background: rgba(255,255,255,0.28) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1.5px solid rgba(255,255,255,0.55) !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    box-shadow: 0 4px 20px rgba(177,187,255,0.2) !important;
    /* Décalé à droite pour ne pas couvrir le logo */
    margin-left: 52px !important;
  }

  nav ul {
    gap: 16px !important;
    flex-wrap: nowrap !important;
  }
  nav ul li a {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* ── PAGE INDEX ── */
  .hero {
    min-height: auto !important;
    padding-top: 74px !important;
    padding-bottom: 0 !important;
  }
  /* Laptop : grande, bien visible */
  .laptop {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .section {
    width: 92% !important;
    margin: 10px auto 40px !important;
    padding: 20px 18px !important;
  }
  .section h2  { font-size:1.3rem !important; margin-bottom:10px !important; }
  .section .description { font-size:0.88rem !important; line-height:1.7 !important; }

  /* ── PAGE CV ── */
  .cv-section {
    padding-top: 90px !important;
    padding-bottom: 50px !important;
    align-items: flex-start !important;
    min-height: auto !important;
  }
  .cv-container { padding:0 14px !important; width:100% !important; }
  .cv-image { width:100% !important; max-width:100% !important; }
  .download-btn { font-size:0.88rem !important; padding:11px 26px !important; }

  /* ── PORTFOLIO ── */
  .portfolio-section {
    padding-top: 80px !important;
    padding-bottom: 50px !important;
  }
  .portfolio-intro {
    width:92% !important; margin:16px auto 18px !important;
    padding:0 !important;
  }
  .portfolio-intro p { font-size:0.85rem !important; margin-bottom:12px !important; }
  .portfolio-pdf-btn { font-size:0.78rem !important; padding:8px 18px !important; }

  .projects-title { margin-bottom:12px !important; padding:0 14px !important; }
  .projects-title h2 { font-size:1.25rem !important; }
  .projects-subtitle { font-size:0.77rem !important; }

  /* Filtres : scroll horizontal */
  .portfolio-filters {
    width:100% !important; flex-wrap:nowrap !important;
    overflow-x:auto !important; justify-content:flex-start !important;
    padding:4px 14px 10px !important; margin-bottom:18px !important;
    gap:8px !important; -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }
  .portfolio-filters::-webkit-scrollbar { display:none !important; }
  .filter-btn {
    flex-shrink:0 !important; font-size:0.75rem !important;
    padding:7px 14px !important; white-space:nowrap !important;
  }

  /* Grille : 1 colonne */
  .portfolio-grid {
    width:92% !important;
    grid-template-columns:1fr !important;
    gap:40px 0 !important; padding:8px 0 !important;
  }

  /* ── IMAGES : toutes réinitialisées puis redéfinies ── */
  /* Reset universel */
  .project-image img,
  .ordilum img,.jazzordi img,.mot img,.tor img,.darty img,
  .deconso img,.ryoji img,.rome img,.marque img,.reve img,
  .philo img,.diamond img,.motion img,.retro img,.senso img,
  .cera img,.presence img,.ligne img,.utopia img,.vynil img,
  .orphe img,.futur img,.biennale img,.bb img,.ettore img,
  .lumin img,.snu img,.bene img,.harmo img {
    width: 85% !important;
    max-width: 300px !important;
    object-fit: contain !important;
  }

  /* Mockups ordi (très larges) */
  .ordilum img,.jazzordi img,.mot img,.tor img,.darty img {
    width: 95% !important;
    max-width: 340px !important;
  }

  /* Affiches portrait */
  .biennale img,.ettore img,.ryoji img,.philo img,
  .marque img,.retro img,.senso img,.cera img,
  .vynil img,.diamond img {
    width: 62% !important;
    max-width: 220px !important;
  }

  .project-info h3 { font-size:1rem !important; margin-top:8px !important; }
  .project-info p  { font-size:0.8rem !important; }

  /* ── MODAL ── */
  .project-modal { padding:0 !important; align-items:flex-end !important; }
  .modal-content {
    padding:24px 16px 30px !important;
    border-radius:22px 22px 0 0 !important;
    max-height:88vh !important;
    max-width:100% !important; width:100% !important;
  }
  .modal-header h2 { font-size:1.15rem !important; }
  .modal-gallery img {
    height:190px !important; width:100% !important;
    object-fit:contain !important; border-radius:10px !important;
  }
  .modal-description { font-size:0.85rem !important; padding:11px 13px !important; }
  .modal-details ul  { grid-template-columns:1fr 1fr !important; gap:7px !important; }
  .modal-details ul li { padding:9px 10px !important; font-size:0.78rem !important; }
  .modal-link-btn { font-size:0.76rem !important; padding:7px 14px !important; }

  /* ── FOOTER ── */
  .footer-contact {
    padding: 36px 20px 86px !important;
    overflow:hidden !important;
  }
  /* Texte CONTACT ancré en bas, taille maîtrisée */
  .footer-title {
    position:absolute !important;
    bottom: -8px !important;
    left:50% !important; transform:translateX(-50%) !important;
    font-size: clamp(46px,16vw,84px) !important;
    white-space:nowrap !important;
    color:rgba(255,255,255,0.3) !important;
    pointer-events:none !important; z-index:1 !important;
  }
  /* Blocs en colonne centrée */
  .footer-content {
    position:relative !important; z-index:10 !important;
    display:flex !important; flex-direction:column !important;
    align-items:center !important; text-align:center !important;
    gap:20px !important; width:100% !important;
    margin:0 auto !important; padding:0 !important;
  }
  .footer-block h3  { font-size:0.9rem !important; margin-bottom:4px !important; }
  .footer-block p,
  .footer-block p a { font-size:0.86rem !important; }

  /* Icônes : rangée centrée, TOUS affichés */
  .footer-icons {
    display:flex !important; flex-direction:row !important;
    align-items:center !important; justify-content:center !important;
    gap:22px !important; flex-wrap:nowrap !important;
    margin-top:6px !important;
  }
  .footer-icons a {
    display:inline-flex !important; align-items:center !important;
    justify-content:center !important; flex-shrink:0 !important;
  }
  .footer-icons a img {
    width:30px !important; height:30px !important; display:block !important;
  }

  /* Bandes décoratives footer : masquées */
  .footer-vertical-stripes { display:none !important; }
}

/* ─── TRÈS PETITS ÉCRANS ≤ 390px ──────────────────────── */
@media (max-width: 390px) {
  .site-header nav {
    margin-left:46px !important;
    padding:7px 13px !important;
  }
  nav ul { gap:12px !important; }
  nav ul li a { font-size:0.72rem !important; }

  .portfolio-section, .hero { padding-top:72px !important; }
  .filter-btn { font-size:0.7rem !important; padding:6px 11px !important; }

  .footer-title { font-size:clamp(38px,15vw,64px) !important; }
  .footer-contact { padding-bottom:76px !important; }
}