/* JM Space — feuille de style commune à toutes les pages.
   Base de composants issue du design system Claude Design, rethémée
   avec la palette noir/anthracite + rouge/bordeaux de JM Space (sans doré). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap');

:root{
  --color-text:#e9e9ed;
  --color-surface:#1c1e27;
  --color-divider:rgba(233,233,237,.16);

  --color-accent:#d8232a;
  --color-accent-100:#fdeceb;--color-accent-200:#f9c9c6;--color-accent-300:#f3a09b;
  --color-accent-400:#e8595c;--color-accent-500:#d8232a;--color-accent-600:#b01c26;
  --color-accent-700:#85161f;--color-accent-800:#5e1018;--color-accent-900:#3a0b10;

  --color-section:#4a0f16;--color-section-glow:#6b1220;--color-section-ghost:#a3252c;

  --jm-ink:#0d0e13;--jm-ink-2:#14151b;--jm-line:rgba(233,233,237,.12);

  --font-heading:"Inter",system-ui,sans-serif;
  --font-heading-weight:500;
  --font-body:"Inter",system-ui,sans-serif;

  --space-2:5.6px;--space-3:8.4px;--space-4:11.2px;
  --radius-md:8px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--color-text);
  background-color:var(--jm-ink);
  background-image:
    radial-gradient(1200px 780px at 16% 0%, var(--color-section-glow) 0%, rgba(107,18,32,.4) 32%, transparent 68%);
  background-repeat:no-repeat;
  background-position:top left;
  font-family:var(--font-body);font-size:15px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* Quadrillage réservé à des zones ciblées (pas le fond général) */
.jm-grid{
  background-image:
    linear-gradient(rgba(233,233,237,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,233,237,.13) 1px, transparent 1px);
  background-size:44px 44px;
  background-position:top left;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  line-height:1.12;letter-spacing:-.015em;margin:0 0 var(--space-2);
}
p{margin:0 0 var(--space-3)}
a{color:#f3a09b;text-decoration:none}
a:hover{color:#fdeceb}
img{display:block;max-width:100%}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

@keyframes jm-pano{from{transform:scale(1.35) translateX(-9%)}to{transform:scale(1.35) translateX(9%)}}
@keyframes jm-ring{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* — boutons — */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;text-decoration:none;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:14px;line-height:1.2;color:var(--color-text);
  background:transparent;border:1px solid transparent;
  padding:var(--space-2) calc(var(--space-3) * 1.2);
  border-radius:var(--radius-md);transition:background .25s ease,border-color .25s ease;
}
.btn-primary{color:var(--color-accent);border-color:var(--color-accent)}
.btn-primary:hover{background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent)}
.btn-secondary{border-color:var(--color-divider)}
.btn-secondary:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.btn-ghost{color:var(--color-accent);padding-inline:var(--space-2)}
.btn-ghost:hover{background:color-mix(in srgb,var(--color-accent) 10%,transparent)}

/* — formulaire (page contact) — */
.field>label{display:block;font-size:12px;margin-bottom:5px;color:color-mix(in srgb,var(--color-text) 70%,transparent)}
.input{
  width:100%;min-height:40px;padding:9px 12px;font:inherit;font-size:14px;color:var(--color-text);
  caret-color:var(--color-accent);background:var(--color-surface);
  border:1px solid var(--color-divider);border-radius:var(--radius-md);
}
.input:hover{border-color:color-mix(in srgb,var(--color-text) 45%,transparent)}
.input:focus-visible{border-color:var(--color-accent);outline-offset:0}
textarea.input{min-height:110px;resize:vertical}

/* — navigation — */
.jm-navlink{color:rgba(233,233,237,.62)}
.jm-navlink:hover{background:rgba(233,233,237,.06)}
.jm-navlink.is-active{color:#fdeceb}
.jm-menu-btn:hover{background:rgba(233,233,237,.06)}
.jm-footer-link:hover,.jm-contact-link:hover{color:#f3a09b}
.jm-back-link:hover{color:#fdeceb}

@media (min-width:1080px){
  .jm-navlinks{display:flex}
  .jm-menu-btn{display:none!important}
  #jm-mobile-menu{display:none!important}
}
@media (max-width:1079px){
  .jm-navlinks{display:none}
  .jm-menu-btn{display:inline-flex}
}

/* — cartes projet / boutique — */
.jm-card{
  display:flex;flex-direction:column;gap:16px;padding:14px;
  border:1px solid var(--jm-line);border-radius:12px;background:var(--jm-ink-2);color:#e9e9ed;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease;
}
.jm-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,0,0,.55);border-color:rgba(216,35,42,.4)}

/* — emplacement d'image (placeholder) — */
.img-slot{
  position:relative;width:100%;height:100%;min-height:100%;
  display:flex;align-items:center;justify-content:center;text-align:center;gap:8px;
  background:
    repeating-linear-gradient(135deg,rgba(233,233,237,.045) 0 10px,transparent 10px 20px),
    #1b1c22;
  border:1px dashed rgba(233,233,237,.18);
  color:rgba(233,233,237,.4);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:12px;flex-direction:column;
}
.img-slot i{font-size:22px;color:rgba(233,233,237,.3)}
.img-slot span{max-width:24ch;line-height:1.4}

/* badge "visite 360°" avec icône qui tourne en continu */
.jm-pano-badge{
  position:absolute;display:flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;
  background:rgba(13,14,19,.72);border:1px solid rgba(216,35,42,.5);pointer-events:none;
}
.jm-pano-badge i{font-size:14px;color:#f3a09b;animation:jm-ring 6s linear infinite;display:inline-block}
.jm-pano-badge span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#fdeceb}

/* — comparateur avant / après — */
.jm-compare{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:10px;
  border:1px solid var(--jm-line);background:#1b1c22;touch-action:none;cursor:ew-resize;user-select:none;
}
.jm-compare .img-slot{position:absolute;inset:0}
.jm-compare-after{position:absolute;inset:0}
.jm-compare-before{position:absolute;inset:0}
.jm-compare-line{position:absolute;top:0;bottom:0;width:1px;background:rgba(253,236,235,.9);pointer-events:none}
.jm-compare-handle{
  position:absolute;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:999px;
  background:rgba(13,14,19,.82);border:1px solid rgba(253,236,235,.75);
  display:flex;align-items:center;justify-content:center;color:#fdeceb;font-size:15px;pointer-events:none;
}

/* — visionneuse 360° (modale) — */
body.jm-tour-open{overflow:hidden}
.jm-tour-modal{position:fixed;inset:0;z-index:200;background:rgba(5,5,8,.94)}
.jm-tour-modal[hidden]{display:none}
.jm-tour-viewer{position:absolute;inset:0}
.jm-tour-close{
  position:absolute;top:18px;right:18px;z-index:201;width:44px;height:44px;border-radius:999px;
  background:rgba(13,14,19,.85);border:1px solid var(--jm-line);color:#e9e9ed;font-size:20px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.jm-tour-close:hover{border-color:#d8232a;background:rgba(216,35,42,.16)}
.jm-tour-logo{position:absolute;top:14px;left:14px;z-index:201;width:clamp(90px,22vw,150px);aspect-ratio:3310/1460;pointer-events:none}
.jm-tour-logo img{width:100%;height:100%;object-fit:contain}
.jm-tour-trigger{border:none;text-align:left;font:inherit;color:inherit}

/* — transition douce entre pages internes — */
.jm-page-wrap{opacity:0;transform:translateY(10px)}
.jm-page-wrap.jm-in{opacity:1;transform:translateY(0);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.jm-page-wrap.jm-out{opacity:0;transform:translateY(-10px);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}

/* — apparition progressive des sections au défilement (une seule fois) — */
.jm-reveal{opacity:0;transform:translateY(40px) scale(.975);transition:opacity .75s cubic-bezier(.16,.7,.2,1),transform .75s cubic-bezier(.16,.7,.2,1)}
.jm-reveal.jm-visible{opacity:1;transform:translateY(0) scale(1)}

/* — grilles : les cartes apparaissent en cascade plutôt qu'en bloc — */
.jm-reveal.jm-stagger{opacity:1;transform:none;transition:none}
.jm-reveal.jm-stagger>*{opacity:0;transform:translateY(38px) scale(.97);transition:opacity .7s cubic-bezier(.16,.7,.2,1),transform .7s cubic-bezier(.16,.7,.2,1)}
.jm-reveal.jm-stagger.jm-visible>*{opacity:1;transform:translateY(0) scale(1)}

/* — entrée douce de l'image du hero au chargement (une seule fois, pas de boucle) — */
@keyframes jm-hero-in{from{transform:scale(1.1)}to{transform:scale(1)}}
#jm-hero img{animation:jm-hero-in 1.6s cubic-bezier(.16,.7,.2,1) both}

/* — hero : entrée du texte au chargement (une seule fois, pas de boucle) — */
@keyframes jm-hero-fade-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes jm-hero-line-in{from{transform:translateY(115%)}to{transform:translateY(0)}}
.jm-hero-fade{opacity:0;animation:jm-hero-fade-in 1.05s cubic-bezier(.16,.7,.2,1) both}
.jm-hero-line{display:block;overflow:hidden}
.jm-hero-line-inner{display:block;transform:translateY(115%);animation:jm-hero-line-in 1.1s cubic-bezier(.16,.7,.2,1) both}

/* — hero : parallaxe au défilement (transform posé en JS sur #jm-hero-bg) — */
#jm-hero-bg{transition:transform .05s linear}

/* — boutons "magnétiques" : léger suivi du curseur au survol (souris uniquement) — */
@media (hover:hover) and (pointer:fine){
  .jm-magnetic{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
}

/* — zoom léger au survol des images de projet (en plus du soulèvement de carte) — */
.jm-card-img-wrap{overflow:hidden}
.jm-card-img{transition:transform .45s cubic-bezier(.2,.7,.2,1);display:block;width:100%;height:100%;object-fit:cover}
.jm-card:hover .jm-card-img{transform:scale(1.06)}

/* — galerie zoomable (PhotoSwipe) — */
.jm-gallery-item{display:block;cursor:zoom-in;width:100%;height:100%;overflow:hidden}
.jm-gallery-item img{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.jm-gallery-item:hover img{transform:scale(1.06)}

/* — carrousel manuel (bloc Design intérieur) — */
.jm-carousel{position:relative;width:100%;height:100%}
.jm-carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.jm-carousel-slide.is-active{opacity:1;z-index:1}
.jm-carousel-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px;z-index:2}
.jm-carousel-dot{width:9px;height:9px;border-radius:999px;background:rgba(233,233,237,.35);border:none;padding:0;cursor:pointer}
.jm-carousel-dot.is-active{background:#fdeceb}
.jm-carousel-arrow{position:absolute;top:50%;margin-top:-18px;width:36px;height:36px;border-radius:999px;background:rgba(13,14,19,.7);border:1px solid var(--jm-line);color:#e9e9ed;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.jm-carousel-arrow:hover{border-color:#d8232a;background:rgba(216,35,42,.16)}
.jm-carousel-arrow.prev{left:10px}
.jm-carousel-arrow.next{right:10px}

/* — badge "bientôt disponible" (boutique) — */
.jm-soon-badge{display:inline-flex;align-items:center;margin-left:8px;padding:2px 9px;border-radius:999px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,233,237,.55);border:1px solid var(--jm-line)}

/* — info-bulle "glissez pour explorer" (premier clic sur la visite 360°) — */
.jm-tour-hint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  padding:10px 18px;border-radius:999px;background:rgba(13,14,19,.85);border:1px solid rgba(216,35,42,.5);
  color:#fdeceb;font-size:13px;letter-spacing:.03em;z-index:202;pointer-events:none;
  transition:opacity .5s ease;opacity:1;white-space:nowrap;
}
.jm-tour-hint.is-hidden{opacity:0}

/* — footer — */
footer{padding:44px clamp(18px,4vw,56px) 34px;border-top:1px solid var(--jm-line);background:#0a0b0f}