/* ==========================================================================
   JFG SYSTEMES — feuille de style partagee par toutes les pages du site.
   Un seul fichier a modifier pour changer une couleur/police/composant
   partout : plus simple a maintenir que 5 fois le meme <style> inline.
   ========================================================================== */
:root{
  --bg: #efeee9;
  --panel: #ffffff;
  --ink: #1b1712;
  --ink-soft: #6b6255;
  --line: #ddd7c9;
  --gold: #96631a;
  --gold-bright: #cb902e;
  --gold-soft: #f2e6d3;
  --dark-bg: #0a0908;
  --dark-panel: #15130f;
  --dark-ink: #f2ede4;
  --dark-ink-soft: #a89f8e;
  --dark-line: #2e2a22;
}

/* ==========================================================================
   REPERES POUR MODIFIER FACILEMENT LE SITE (sans toucher au reste du CSS)
   ==========================================================================
   1) TAILLES DE POLICE : toutes les tailles importantes sont regroupees ici.
      Changez une valeur (ex: --fs-section-title) et elle s'applique partout
      ou elle est utilisee. Unite "rem" = multiple de la taille de base du
      navigateur (1rem = 16px par defaut). "clamp(min, ideal, max)" veut dire
      "jamais plus petit que min, jamais plus grand que max, ideal sinon".
   2) TEXTES : les textes vivent dans les fichiers .html (un par page),
      chacun precede d'un commentaire "<!-- TEXTE: ... -->".
   ========================================================================== */
:root{
  --fs-hero-eyebrow: 1.52rem;
  --fs-hero-title: clamp(2.3rem, 5vw, 3.7rem);
  --fs-section-title: clamp(1.6rem, 3vw, 2.3rem);
  --fs-subtitle: 1.4rem;
  --fs-eyebrow-big: 2.3rem;
  --fs-lead: 1.1rem;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--gold); }
::selection{ background: var(--gold-soft); color: var(--ink); }
.mono{ font-family: "IBM Plex Mono", monospace; }
.display{ font-family: "Chakra Petch", ui-sans-serif, sans-serif; font-weight: 700; }

/* ---- en-tete / navigation (toutes les pages) ---- */
header.top{
  position: sticky; top: 0; z-index: 20;
  background: rgba(239,238,233,0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top-inner{
  max-width: 1160px; margin: 0 auto; padding: 0.7rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.brand{ display: flex; align-items: center; gap: 1rem; margin-right: auto; text-decoration: none; }
.brand-badge{
  background: var(--dark-bg); padding: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.brand-badge img{ height: 50px; width: auto; display: block; }
.brand-text{ display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.25; }
.brand-line1{ font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.brand-line2{ font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
nav.top-nav a{
  font-family: "IBM Plex Mono", monospace; font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft); text-decoration: none; margin-left: 1.5rem; transition: color .15s;
}
nav.top-nav a:hover, nav.top-nav a[aria-current="page"]{ color: var(--gold); }
@media (max-width: 780px){
  .brand-text{ display: none; }
  .top-inner{ flex-wrap: wrap; row-gap: 0.6rem; }
  nav.top-nav{ width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem 0; }
  nav.top-nav a{ margin-left: 0; font-size: 0.66rem; text-align: center; }
}

section{ max-width: 1160px; margin: 0 auto; padding: 6rem 1.5rem; position: relative; }
section.tight{ padding-top: 3rem; padding-bottom: 3rem; }

h1{ font-size: var(--fs-hero-title); line-height: 1.08; margin: 0 0 1.1rem; text-wrap: balance; font-weight: 700; color: var(--dark-ink); }
h1 .accent-line{ color: var(--gold-bright); }
h2.section-title{
  font-family: "Chakra Petch", sans-serif; font-weight: 700;
  font-size: var(--fs-section-title); letter-spacing: 0.01em; margin: 0 0 0.5rem; text-wrap: balance;
}
.eyebrow{
  display: inline-flex; align-items: center; gap: 0.55rem; font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem;
}
.eyebrow.on-dark{ color: var(--gold-bright); }
.eyebrow.big{ font-size: var(--fs-eyebrow-big); margin-bottom: 1.3rem; }
.eyebrow.big .hexdot{ width: 0.55em; height: 0.55em; }
@media (max-width: 640px){ .eyebrow.big{ font-size: 1.6rem; } }
.hexdot{ width: 10px; height: 10px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: currentColor; display: inline-block; }
p.lead{ font-size: var(--fs-lead); color: var(--ink-soft); max-width: 46em; }
p{ max-width: 62ch; }
.kicker{ font-weight: 600; color: var(--dark-ink); font-size: 1.05rem; margin: 1.3rem 0 0; max-width: 30em; }
.kicker .g{ color: var(--gold-bright); }

/* ---- hero (section sombre, toutes les pages) ---- */
.hero-wrap{ background: var(--dark-bg); color: var(--dark-ink); overflow: hidden; }
.hero{ position: relative; padding-top: 5rem; padding-bottom: 5rem; text-align: left; }
#hexbg, #hexbg-contact, #hexbg-footer{ position: absolute; inset: 0; z-index: 0; opacity: 0.72; pointer-events: none; }
.hero > *{ position: relative; z-index: 1; }
.hero-top{ display: flex; align-items: center; gap: 2.4rem; margin-bottom: 2.4rem; }
@media (max-width: 720px){ .hero-top{ flex-direction: column; align-items: flex-start; gap: 1.4rem; } }
.hero-logo{ width: 200px; height: auto; flex-shrink: 0; filter: drop-shadow(0 0 30px rgba(203,144,46,0.35)); animation: pulse 5s ease-in-out infinite; }
.hero-logo.small{ width: 120px; }
@media (max-width: 720px){ .hero-logo{ width: 150px; } .hero-logo.small{ width: 96px; } }
@media (prefers-reduced-motion: reduce){ .hero-logo{ animation: none; } }
@keyframes pulse{ 0%,100%{ filter: drop-shadow(0 0 18px rgba(203,144,46,0.22)); } 50%{ filter: drop-shadow(0 0 40px rgba(203,144,46,0.45)); } }
.hero-title-block h1{ margin: 0; }
.eyebrow-hero{ font-size: var(--fs-hero-eyebrow); letter-spacing: 0.02em; text-transform: none; margin-bottom: 0.7rem; font-weight: 600; }
.eyebrow-hero .hexdot{ width: 14px; height: 14px; }
.hero p.lead{ color: var(--dark-ink-soft); }
.hero h1.page-title{ font-size: clamp(1.9rem, 4vw, 2.8rem); }
.cta-row{ display: flex; gap: 1rem; align-items: center; margin-top: 2.2rem; flex-wrap: wrap; }
.btn{
  font-family: "IBM Plex Mono", monospace; font-size: 0.82rem; letter-spacing: 0.05em;
  text-transform: uppercase; text-decoration: none; padding: 0.9rem 1.5rem;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: all 0.15s; display: inline-block; border: none; cursor: pointer;
}
.btn.primary{ background: var(--gold-bright); color: #171208; font-weight: 600; }
.btn.primary:hover{ background: #e0a747; }
.btn.ghost{ border: 1px solid #4a4030; color: var(--dark-ink); background: transparent; }
.btn.ghost:hover{ border-color: var(--gold-bright); background: rgba(203,144,46,0.1); }
.btn.on-light{ border: 1px solid var(--line); color: var(--ink); background: transparent; }
.btn.on-light:hover{ border-color: var(--gold); background: var(--gold-soft); }

/* ---- le constat (bloc 2 accueil) ---- */
.manifesto{
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  padding: 2.4rem 2.4rem; margin-top: 2rem;
}
.manifesto p.lead{ font-family: "IBM Plex Sans", sans-serif; font-size: 1.28rem; color: var(--ink); font-weight: 500; max-width: 42em; }
.manifesto p.lead strong{ color: var(--gold); }
.manifesto.note{ border-left-color: var(--gold-bright); }
.manifesto.note p.lead{ font-size: 1.05rem; }

/* ---- cartes generiques (offre / interventions / engagement) ---- */
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; }
.grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 3rem; }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.offre-card{
  background: var(--panel); border: 1px solid var(--line); padding: 2rem 1.5rem 1.7rem; position: relative;
  cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s;
  text-decoration: none; display: block; color: inherit;
}
.offre-card:hover{ background: var(--dark-bg); border-color: var(--dark-bg); transform: translateY(-3px); }
.offre-card h3, .offre-card p{ transition: color .2s; }
.offre-card:hover h3{ color: var(--dark-ink); }
.offre-card:hover p{ color: var(--dark-ink-soft); }
.offre-tag{ transition: color .2s; font-family: "IBM Plex Mono", monospace; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-bright); display: block; margin-bottom: 0.6rem; }
.offre-card:hover .offre-tag{ color: var(--gold-bright); }
.offre-card::after{
  content: "→"; position: absolute; top: 1.6rem; right: 1.5rem; font-family: "IBM Plex Mono", monospace;
  color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s;
}
.offre-card:hover::after{ opacity: 1; transform: translateX(0); color: var(--gold-bright); }
.offre-photo{
  aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--bg); overflow: hidden;
  margin-bottom: 1.2rem; transition: border-color .2s;
}
.offre-card:hover .offre-photo{ border-color: var(--gold-bright); }
.offre-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.offre-card:hover .offre-photo img{ transform: scale(1.08); }
.offre-photo.logo-fit img{ object-fit: contain; padding: 1.2rem; }
.photo-credit{ display: block; margin: -0.9rem 0 0.9rem; font-family: "IBM Plex Mono", monospace; font-size: 0.6rem; color: var(--ink-soft); }
.offre-card:hover .photo-credit{ color: var(--dark-ink-soft); }
.offre-card h3{ font-size: 1.05rem; margin: 0 0 0.5rem; font-weight: 600; }
.offre-card p{ font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.case-cta{ display: block; margin-top: 0.9rem; font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); }
.offre-card:hover .case-cta{ color: var(--gold-bright); }

/* ---- domaines (bloc 4 accueil : 4 blocs texte simples) ---- */
.domaines-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2rem; margin-top: 3rem; }
@media (max-width: 900px){ .domaines-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .domaines-grid{ grid-template-columns: 1fr; } }
.domaine{ border-top: 2px solid var(--gold); padding-top: 1rem; }
.domaine h3{ margin: 0 0 0.5rem; font-size: 1.02rem; font-weight: 600; }
.domaine p{ margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ---- ce qui nous distingue / principes (3 colonnes) ---- */
.principles{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.4rem; }
@media (max-width: 760px){ .principles{ grid-template-columns: 1fr; } }
.principle{ border-top: 2px solid var(--gold); padding-top: 1rem; }
.principle h4{ margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 600; }
.principle p{ margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* ---- realisations (2 vignettes cliquables vers les modales de cas concret) ---- */
.vignettes-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-top: 2.6rem; }
@media (max-width: 760px){ .vignettes-grid{ grid-template-columns: 1fr; } }
.vignette-card{
  background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--gold);
  padding: 1.8rem 1.7rem; cursor: pointer; transition: background-color .2s, transform .2s;
}
.vignette-card:hover{ background: var(--dark-bg); transform: translateY(-3px); }
.vignette-card:hover h3, .vignette-card:hover p{ color: var(--dark-ink-soft); }
.vignette-card h3{ font-size: 1.08rem; margin: 0 0 0.6rem; font-weight: 600; color: var(--ink); transition: color .2s; }
.vignette-card p{ margin: 0 0 0.9rem; font-size: 0.92rem; color: var(--ink-soft); }
.vignette-card .case-cta{ margin-top: 0; }

/* ---- secteurs ---- */
.secteurs-list{ margin-top: 2.3rem; border-top: 1px solid var(--line); }
.secteur-row{
  display: grid; grid-template-columns: 4.5em 1fr 1.6fr; gap: 1.5rem; padding: 1.4rem 0;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
@media (max-width: 700px){ .secteur-row{ grid-template-columns: 1fr; gap: 0.35rem; } }
.secteur-row .num{ font-family: "IBM Plex Mono", monospace; color: var(--gold); font-size: 0.85rem; }
.secteur-row h4{ margin: 0; font-size: 1.1rem; font-weight: 600; }
.secteur-row p{ margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

/* ---- deroulement (etapes numerotees) ---- */
.process-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-top: 2.6rem; }
@media (max-width: 900px){ .process-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .process-grid{ grid-template-columns: 1fr; } }
.process-step{ border-top: 2px solid var(--gold); padding-top: 1rem; }
.process-step .step-num{ font-family: "IBM Plex Mono", monospace; font-size: 1.6rem; color: var(--gold-bright); display: block; margin-bottom: 0.4rem; }
.process-step h4{ margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; }
.process-step p{ margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ---- perimetre (liste "ce que nous ne faisons pas") ---- */
.perimetre-list{ margin: 1.6rem 0 0; padding: 0; list-style: none; max-width: 62ch; }
.perimetre-list li{
  padding: 0.75rem 0 0.75rem 1.6rem; border-bottom: 1px solid var(--line); position: relative; color: var(--ink-soft);
}
.perimetre-list li::before{ content: "—"; position: absolute; left: 0; color: var(--gold); }

/* ---- socle technique : cercle des competences (relocalise sur la page Conception) ---- */
.socle{ margin-top: 3.5rem; padding-top: 2.8rem; border-top: 1px solid var(--line); }
.socle-head{ max-width: 46em; }
.socle-eyebrow{
  display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem;
}
.socle-eyebrow.big{ font-size: var(--fs-eyebrow-big); margin-bottom: 0.9rem; }
@media (max-width: 640px){ .socle-eyebrow.big{ font-size: 1.6rem; } }
.socle-head h3{ font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: var(--fs-subtitle); margin: 0; }
.skill-card{ position: relative; background: var(--panel); border: 1px solid var(--line); padding: 1.1rem 1.1rem 1.3rem; display: flex; flex-direction: column; gap: 0.8rem; }
.skill-card:hover{ z-index: 10; }
.skill-card h4{ margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--ink); }
a.skill-card{ text-decoration: none; cursor: pointer; }
.skill-photo{
  aspect-ratio: 4 / 3; border: 1px dashed var(--gold-soft); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.skill-photo span{ font-family: "IBM Plex Mono", monospace; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); text-align: center; padding: 0 0.5rem; }
.skill-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.skill-card:hover .skill-photo img{ transform: scale(1.5); }

.skill-card.hub{
  width: min(100%, 320px); margin: 2.4rem auto 2rem; background: var(--dark-bg); border: 1px solid var(--gold-bright);
  padding: 1.5rem 1.5rem 1.7rem;
}
.skill-card.hub .hub-tag{
  font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gold-bright);
}
.skill-card.hub h4{ font-size: 1.15rem; font-weight: 700; font-family: "Chakra Petch", sans-serif; color: var(--dark-ink); }
.skill-card.hub .skill-photo{ border-color: var(--gold-bright); background: var(--dark-panel); }

.skills-orbit{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2rem 1rem; }
.orbit-arm{ display: contents; }
.orbit-traces{ display: none; }

@media (min-width: 901px){
  .skills-orbit{
    display: block; position: relative; width: min(100%, 1060px); aspect-ratio: 1 / 1; margin: 3rem auto 0;
  }
  .skill-card.hub{
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 220px; margin: 0; z-index: 2;
  }
  .orbit-traces{
    display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  }
  .orbit-trace-path{ fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0.65; }
  .orbit-via{ fill: var(--gold); opacity: 0.85; }
  .orbit-pulse-dot{ fill: var(--gold-bright); filter: drop-shadow(0 0 4px rgba(203, 144, 46, 0.85)); }
  @media (prefers-reduced-motion: reduce){ .orbit-pulse-dot{ display: none; } }
  .orbit-arm{
    display: block; position: absolute; top: 50%; left: 50%; width: 400px; height: 0;
    transform-origin: 0 0; transform: rotate(calc(var(--a) * 1deg));
  }
  .orbit-arm:hover{ z-index: 10; }
  .skill-card.branch{
    position: absolute; top: 0; left: 100%; width: 168px; min-height: 196px; margin: 0;
    padding: 0.6rem 0.6rem 0.7rem; gap: 0.5rem;
    transform: translate(-50%, -50%) rotate(calc(var(--a) * -1deg));
  }
  .skill-card.branch h4{ font-size: 0.88rem; line-height: 1.25; }
}
.socle-sub{ margin-top: 3rem; padding-top: 2.2rem; border-top: 1px dashed var(--line); }
.socle-sub h3{ font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: var(--fs-subtitle); margin: 0 0 1.4rem; }
.subskills-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.subskill-card{ border: 1px dashed var(--line); padding: 0.9rem 1rem; }
.subskill-card h5{ margin: 0 0 0.35rem; font-family: "IBM Plex Mono", monospace; font-size: 0.82rem; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: 0.03em; }
.subskill-card p{ margin: 0; font-size: 0.82rem; color: var(--ink-soft); }

/* ---- sections texte des pages d'offre (avant-projet, conception, realisation, fiabilisation) ---- */
.offer-chapo{ font-size: 1.15rem; color: var(--ink); max-width: 52em; }
.offer-list{ margin: 1.4rem 0 0; padding: 0; list-style: none; max-width: 62ch; }
.offer-list li{ padding: 0.7rem 0 0.7rem 1.6rem; border-bottom: 1px solid var(--line); position: relative; color: var(--ink-soft); }
.offer-list li::before{ content: "—"; position: absolute; left: 0; color: var(--gold); }
.offer-subsections{ display: grid; gap: 2rem; margin-top: 2.4rem; }
.offer-sub h3{ font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 1.15rem; margin: 0 0 0.6rem; }
.offer-sub p{ margin: 0; color: var(--ink-soft); max-width: 62ch; }
.offer-cta-wrap{ text-align: left; margin-top: 3rem; }

/* ---- contact (section sombre) ---- */
.contact-wrap{ background: var(--dark-bg); color: var(--dark-ink); overflow: hidden; }
.contact-wrap .lead{ color: var(--dark-ink-soft); }
.contact-wrap section > *{ position: relative; z-index: 1; }
.contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2.2rem; align-items: start; }
@media (max-width: 800px){ .contact-grid{ grid-template-columns: 1fr; gap: 2rem; } }
.contact-details{ font-family: "IBM Plex Mono", monospace; font-size: 0.95rem; }
.contact-details a{ color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.contact-details div{ margin-bottom: 0.45rem; }
.contact-form{ display: grid; gap: 0.9rem; }
.contact-form label{ font-family: "IBM Plex Mono", monospace; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dark-ink-soft); display: block; margin-bottom: 0.35rem; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form input[type=tel], .contact-form textarea{
  width: 100%; background: var(--dark-panel); border: 1px solid var(--dark-line); color: var(--dark-ink);
  padding: 0.7rem 0.8rem; font-family: "IBM Plex Sans", sans-serif; font-size: 0.92rem;
}
.contact-form input:focus, .contact-form textarea:focus{ outline: none; border-color: var(--gold-bright); }
.contact-form textarea{ min-height: 110px; resize: vertical; }
.contact-form input[type=file]{ color: var(--dark-ink-soft); font-size: 0.82rem; }
.contact-form .field-note{ font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; color: var(--dark-ink-soft); margin-top: 0.3rem; }
.contact-form .form-mention{ font-size: 0.74rem; color: var(--dark-ink-soft); margin: 0.3rem 0 0; max-width: none; }

footer{
  position: relative; overflow: hidden;
  background: var(--dark-bg); color: var(--dark-ink-soft);
  padding: 1.6rem 1.5rem 2.2rem;
  display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap;
  font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  border-top: 1px solid var(--dark-line);
}
footer > *{ position: relative; z-index: 1; }
footer .fbar{ max-width: 1160px; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; }
footer a{ color: var(--dark-ink-soft); }

/* ---- lightbox (zoom photo) ---- */
#lightbox{
  position: fixed; inset: 0; z-index: 160; background: rgba(10,9,8,0.94);
  display: flex; align-items: center; justify-content: center; padding: 4vh 4vw;
  cursor: zoom-out;
}
#lightbox img{ max-width: 100%; max-height: 92vh; width: auto; height: auto; display: block; box-shadow: 0 20px 60px rgba(0,0,0,0.5); cursor: default; }
#lightbox-close{ position: absolute; top: 1.2rem; right: 1.5rem; background: none; border: none; color: var(--dark-ink); font-size: 2.2rem; line-height: 1; cursor: pointer; padding: 0.3rem 0.6rem; }
#lightbox-close:hover{ color: var(--gold-bright); }

/* ---- consentement analytics ---- */
#consent-backdrop{
  position: fixed; inset: 0; z-index: 200; background: rgba(10, 9, 8, 0.72);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
#consent{
  position: relative; max-width: 560px; width: 100%; background: var(--dark-bg); color: var(--dark-ink);
  border: 1px solid var(--dark-line); padding: 1.7rem 1.7rem 1.4rem; font-size: 0.85rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
#consent h3{ margin: 0 0 0.7rem; font-family: "Chakra Petch", sans-serif; font-size: 1.05rem; color: var(--dark-ink); }
#consent p{ margin: 0 0 1.2rem; max-width: none; color: var(--dark-ink-soft); font-size: 0.82rem; line-height: 1.55; }
#consent .actions{ display: flex; gap: 0.6rem; flex-wrap: wrap; }
#consent button{
  font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.5rem 0.9rem; cursor: pointer; border: 1px solid var(--dark-line); background: transparent; color: var(--dark-ink);
}
#consent button.accept{ background: var(--gold-bright); border-color: var(--gold-bright); color: #171208; font-weight: 600; }

/* ---- cas concret (modales) ---- */
.case-modal-backdrop{
  position: fixed; inset: 0; z-index: 150; background: rgba(10,9,8,0.82);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  cursor: zoom-out;
}
.case-modal{
  position: relative; max-width: 680px; width: 100%; max-height: 88vh; overflow-y: auto;
  background: var(--dark-bg); color: var(--dark-ink); border: 1px solid var(--dark-line);
  border-left: 3px solid var(--gold-bright); padding: 2.2rem 2rem 2rem; cursor: default;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.case-modal h3{ font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 1.4rem; margin: 0.6rem 0 1rem; color: var(--dark-ink); text-wrap: balance; }
.case-modal p{ color: var(--dark-ink-soft); max-width: none; }
.case-modal-close{ position: absolute; top: 0.9rem; right: 1.1rem; background: none; border: none; color: var(--dark-ink); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.5rem; }
.case-modal-close:hover{ color: var(--gold-bright); }
.case-study-points{ display: grid; gap: 0.9rem; margin: 1.4rem 0; }
.case-point{ border: 1px dashed var(--dark-line); padding: 0.9rem 1rem; }
.case-point h5{ margin: 0 0 0.4rem; font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gold-bright); }
.case-point p{ margin: 0; font-size: 0.88rem; }
.case-study-conclusion{ font-weight: 500; color: var(--dark-ink); border-top: 1px dashed var(--dark-line); padding-top: 1.1rem; margin-top: 0.4rem; }
.case-study-gallery{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.case-study-gallery figure{ margin: 0; }
.case-study-gallery img{ width: 100%; height: auto; display: block; border: 1px solid var(--dark-line); background: var(--dark-panel); cursor: zoom-in; }
.case-study-gallery figcaption{ font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; color: var(--dark-ink-soft); margin-top: 0.4rem; line-height: 1.4; }

[hidden]{ display: none !important; }