/* ==========================================================================
   J'MAGINE — FEUILLE GLOBALE
   Remplace : hero-style.css, jmagine-sections.css, jmagine-prestations.css,
              jmagine-header-pages.css, footer-style.css

   À coller UNE SEULE FOIS dans WPCode (hook wp_head), pas dans les pages.
   Voir INSTALLATION.md.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS — la seule source de vérité
   ========================================================================== */
/* Toutes les valeurs ci-dessous sont relevées au pixel sur le logo officiel.
   Aucune n'est inventée. */
:root{
  /* ---- Surfaces — le fond de planche du logo ---- */
  --jm-paper:      #FBF9F7;
  --jm-paper-2:    #F4F1ED;
  --jm-ink-deep:   #14140F;

  /* ---- Encre — le monogramme J ---- */
  --jm-ink:        #181917;
  --jm-graphite:   #68645C;   /* AA sur sable comme sur papier */

  /* ---- Traits de construction ---- */
  --jm-line:       #E3DFD9;
  --jm-line-soft:  #EFEDE8;

  /* ---- Poché — le rectangle plein du logo ---- */
  --jm-sable:      #EFE8E0;   /* poché éclairci : la bande chaude */
  --jm-poche:      #C9B9AA;
  /* Assombri le 20 août : #A8968A donnait 2,34:1 sur sable et 2,70:1 sur
     papier, très en dessous du seuil AA de 4,5:1, alors qu'il porte du
     texte lisible à sept endroits. #72665D atteint 4,58:1 et 5,30:1 en
     conservant la nuance greige. */
  --jm-poche-deep: #72665D;

  /* ======================================================================
     L'ACCENT — le brun du sous-titre « ARCHITECTURE INTÉRIEURE ».
     Une seule ligne à changer pour reteinter tout le site.
        #7A634B  brun J'magine   (par défaut — relevé sur le logo)
        #404A38  vert olivier
        #2E4756  bleu de Prusse
        #8C4A3A  brique
     ====================================================================== */
  --jm-accent:     #7A634B;

  /* ---- Typographie ---- */
  --jm-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --jm-body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --jm-note:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Échelle de corps — fluide, ratio 1.333 ---- */
  --jm-t-note: 11px;
  --jm-t-sm:   14px;
  --jm-t-body: clamp(15px, 0.5vw + 14px, 17px);
  --jm-t-lead: clamp(18px, 0.8vw + 16px, 22px);
  --jm-t-h3:   clamp(21px, 1.2vw + 17px, 28px);
  --jm-t-h2:   clamp(30px, 3vw + 18px, 54px);
  --jm-t-h1:   clamp(38px, 5.2vw + 16px, 84px);

  /* ---- Rythme ---- */
  --jm-gut: clamp(20px, 5vw, 68px);   /* marge latérale */
  --jm-bay: clamp(66px, 8vw, 124px);  /* respiration verticale entre sections */
  --jm-max: 1360px;

  --jm-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --jm-head: 88px;                    /* hauteur de l'en-tête fixe */
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
.jm *, .jm *::before, .jm *::after{ box-sizing: border-box; }

body.jm{
  margin: 0;
  background: var(--jm-paper);
  color: var(--jm-ink);
  font-family: var(--jm-body);
  font-size: var(--jm-t-body);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;   /* clip, PAS hidden : hidden casserait le sticky du héros */
}

.jm h1, .jm h2, .jm h3, .jm h4{
  font-family: var(--jm-display);
  text-wrap: balance;   /* évite le mot orphelin en fin de titre */
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--jm-ink);
}
.jm h1{ font-size: var(--jm-t-h1); line-height: 0.98; }
.jm h2{ font-size: var(--jm-t-h2); line-height: 1.06; }
.jm h3{ font-size: var(--jm-t-h3); line-height: 1.2; }
.jm h4{ font-size: var(--jm-t-lead); line-height: 1.3; }
.jm p{ margin: 0; }
.jm a{ color: inherit; text-decoration: none; }
.jm img{ max-width: 100%; height: auto; display: block; }

/* Cible de clic confortable au doigt (WCAG 2.5.8) */
.jm a, .jm button{ min-height: 24px; }

.jm :focus-visible{
  outline: 2px solid var(--jm-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ==========================================================================
   3. UTILITAIRES
   ========================================================================== */
.jm-wrap{
  position: relative;
  z-index: 1;
  max-width: var(--jm-max);
  margin-inline: auto;
  padding-inline: var(--jm-gut);
}

/* Annotation technique — cotes, numéros, légendes */
.jm-note{
  font-family: var(--jm-note);
  font-size: var(--jm-t-note);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jm-graphite);
  margin: 0;
}
.jm-note--accent{ color: var(--jm-accent); }

/* Trait de cote annoté */
.jm-dim{ display: flex; align-items: center; gap: 14px; }

/* Lecture seule pour lecteurs d'écran */
.jm-sr{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* Réserve photo hachurée — tant que la vraie image n'est pas là */
.jm-plate{
  background:
    repeating-linear-gradient(45deg, var(--jm-line-soft) 0 1px, transparent 1px 9px),
    var(--jm-paper-2);
  display: flex; align-items: flex-end; padding: 14px;
}

/* ==========================================================================
   4. EN-TÊTE — un seul en-tête pour TOUT le site
      (remplace les deux implémentations jm- et jmp-)
   ========================================================================== */
.jm-topbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  min-height: var(--jm-head);
  padding: 18px var(--jm-gut);
  /* Franchement opaque : une barre translucide laisse voir le texte qui
     défile en dessous, ce qui donne l'impression de lignes superposées. */
  background: var(--jm-paper);
  border-bottom: 1px solid var(--jm-line);
}
/* Verrou horizontal : le verrou empilé devient illisible sous 90 px
   de haut, celui-ci tient à 44 px sans écraser le mot. */
.jm-topbar__logo img{ height: 44px; width: auto; display: block; }

.jm-nav{ display: flex; gap: 30px; }
.jm-nav a{
  font-family: var(--jm-note);
  font-size: var(--jm-t-note);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jm-graphite);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .35s var(--jm-ease), border-color .35s var(--jm-ease);
}
.jm-nav a:hover,
.jm-nav a[aria-current="page"]{
  color: var(--jm-accent);
  border-bottom-color: var(--jm-accent);
}

/* Bouton menu — mobile uniquement */
.jm-burger{
  display: none; align-items: center; gap: 12px;
  background: none; border: 0; cursor: pointer; padding: 8px;
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--jm-ink);
}
.jm-burger i{ display: flex; flex-direction: column; gap: 5px; width: 22px; }
.jm-burger i b{
  display: block; width: 100%; height: 1px; background: var(--jm-ink);
  transition: transform .35s var(--jm-ease);
}
.jm-burger[aria-expanded="true"] i b:nth-child(1){ transform: translateY(3px) rotate(45deg); }
.jm-burger[aria-expanded="true"] i b:nth-child(2){ transform: translateY(-3px) rotate(-45deg); }

/* Volet de navigation plein écran */
.jm-drawer{
  position: fixed; inset: 0; z-index: 90;
  background: var(--jm-paper);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--jm-ease), visibility 0s linear .45s;
}
.jm-drawer.is-open{
  opacity: 1; visibility: visible;
  transition: opacity .45s var(--jm-ease);
}
.jm-drawer ul{ list-style: none; margin: 0; padding: 0; text-align: center; }
.jm-drawer li{ margin: 12px 0; }
.jm-drawer a{
  display: inline-block;
  font-family: var(--jm-display);
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1.25;
  opacity: 0;
  /* Fondu simple : le glissement décalé donnait l'impression que la
     première entrée sautait. */
  transition: opacity .35s var(--jm-ease), color .3s;
}
.jm-drawer.is-open a{ opacity: 1; }
.jm-drawer a:hover{ color: var(--jm-accent); }

.jm-social{ display: flex; gap: 24px; margin-top: 48px; }
.jm-social a{
  width: 21px; height: 21px; color: var(--jm-ink);
  transition: color .3s, transform .3s;
}
.jm-social a:hover{ color: var(--jm-accent); transform: translateY(-2px); }
.jm-social svg{ width: 100%; height: 100%; }

@media (max-width: 900px){
  .jm-nav{ display: none; }
  .jm-burger{ display: flex; }
  .jm-topbar__logo img{ height: 34px; }
}
body.jm-locked{ overflow: hidden; }

/* ==========================================================================
   5. ACTIONS
   ========================================================================== */
.jm-btn{
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--jm-accent); color: var(--jm-paper);
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 15px 24px; border: 0; cursor: pointer;
  transition: background .45s var(--jm-ease), gap .4s var(--jm-ease);
}
.jm-btn svg{ width: 15px; height: 15px; flex: 0 0 auto; }
.jm-btn:hover{ gap: 18px; background: var(--jm-ink); }

.jm-link{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jm-graphite);
  padding-bottom: 7px; border-bottom: 1px solid var(--jm-line);
  transition: gap .4s var(--jm-ease), color .4s var(--jm-ease), border-color .4s var(--jm-ease);
}
.jm-link svg{ width: 15px; height: 15px; flex: 0 0 auto; }
.jm-link:hover{ gap: 18px; color: var(--jm-accent); border-bottom-color: var(--jm-accent); }

/* ==========================================================================
   6. SECTIONS
   ========================================================================== */
.jm-section{ padding-top: var(--jm-bay); }

/* Bande chaude pleine largeur. C'est elle qui sépare les chapitres :
   plus besoin de filets, la couleur fait le travail. */
/* Une bande colorée a besoin d'air AVANT elle : sans quoi la couleur
   démarre au ras du contenu précédent et semble « monter trop haut ». */
.jm-section:has(+ .jm-section--sable){ padding-bottom: var(--jm-bay); }
.jm-section--sable{
  padding-bottom: var(--jm-bay);
  background: var(--jm-sable);
  /* Sur fond sable, les réserves claires repassent en blanc cassé
     pour rester lisibles. */
  --jm-paper-2: #FBF9F7;
}

/* --------------------------------------------------------------------------
   BANDES ÉGALES
   Toutes les bandes de chapitre font exactement la même hauteur, parce
   qu'elle est calculée et non subie : hauteur d'image fixe + deux fois
   la respiration verticale. Le contenu est centré dans cette hauteur.
   -------------------------------------------------------------------------- */
:root{ --jm-visuel: clamp(300px, 34vw, 480px); }

.jm-egal{
  display: flex;
  align-items: center;
  padding-block: var(--jm-bay);
  min-height: calc(var(--jm-visuel) + 2 * var(--jm-bay));
}
.jm-egal > .jm-wrap{ width: 100%; }
/* Léger dégagement entre le bandeau de titre et le premier chapitre */
.jm-egal--premier{ padding-top: calc(var(--jm-bay) + clamp(16px, 2.5vw, 40px)); }

/* C'est la FIGURE ENTIÈRE qui fait la hauteur de référence, légende
   comprise : sinon une légende de 18 px décale toute une bande. */
.jm-egal .jm-beat figure{
  height: var(--jm-visuel);
  display: flex; flex-direction: column;
  margin: 0;
}
.jm-egal .jm-beat figure img{
  flex: 1 1 auto; min-height: 0;
  height: auto; width: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}
.jm-egal .jm-beat figure figcaption{ flex: 0 0 auto; margin-top: 10px; }
/* Le plan est un tracé détouré : contenu, centré, sans fond. */
.jm-egal .jm-beat figure.jm-beat--doc img{
  object-fit: contain;
  background: none;
  padding: 0;
}

@media (max-width: 820px){
  .jm-egal{ min-height: 0; display: block; }
  .jm-egal .jm-beat figure{ height: auto; display: block; }
  .jm-egal .jm-beat figure img{ height: auto; aspect-ratio: 4 / 3; }
  .jm-egal .jm-beat figure.jm-beat--doc img{ aspect-ratio: 3 / 4; }
}


.jm-head{ margin-bottom: clamp(34px, 4.5vw, 56px); }

/* Lien de renvoi sous une grille ou une liste d'étapes.
   Il doit se détacher du bloc qu'il conclut, pas y coller. */
.jm .jm-more{ margin-top: clamp(46px, 5.5vw, 76px); }
.jm .jm-more--proche{ margin-top: clamp(28px, 3.4vw, 48px); }
.jm .jm-more--centre{ text-align: center; }
/* Sélecteur préfixé « .jm » : sinon « .jm p{margin:0} » l'emporte
   en spécificité et la marge est purement et simplement ignorée. */
.jm-head .jm-dim{ margin-bottom: 24px; }
.jm-head h2{ max-width: 20ch; }
.jm-head > p{
  max-width: 52ch; margin-top: 20px;
  color: var(--jm-graphite);
  font-size: var(--jm-t-lead); line-height: 1.62;
}

/* Bandeau de titre pour les pages intérieures */
.jm-pagehead{
  background: var(--jm-sable);
  padding-block: clamp(52px, 6vw, 92px);
}
.jm-pagehead h1{ max-width: 16ch; margin-top: 20px; }

/* Titre et chapô côte à côte : le bandeau tient sur moitié moins de
   hauteur, et les images arrivent dans le premier écran. */
.jm-masthead > p{
  max-width: 46ch; margin-top: 24px;
  color: var(--jm-graphite);
  font-size: var(--jm-t-lead); line-height: 1.62;
}
@media (min-width: 1000px){
  .jm-masthead{
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 88px);
    align-items: end;
  }
  .jm-masthead > p{ margin-top: 0; margin-bottom: 10px; }
}
.jm-pagehead > .jm-wrap > p{
  max-width: 52ch; margin-top: 24px;
  color: var(--jm-graphite); font-size: var(--jm-t-lead); line-height: 1.62;
}



/* ==========================================================================
   6 bis. HÉROS PLEIN ÉCRAN — séquence défilante
   Trois vues qui se succèdent au scroll pendant que la scène reste fixe.
   Aucune dépendance : sticky en CSS, progression calculée en JS natif.
   ========================================================================== */
.jm-stage-wrap{
  position: relative;
  height: 320vh !important;      /* rien ne doit pouvoir l'écraser :
                                    sans cette hauteur, la scène n'a
                                    aucune marge pour tenir en haut */
  min-height: 320vh;
}
/* Mode piloté : le script prend la main quand « sticky » n'est pas honoré */
.jm-stage-wrap.jm-pilote{ overflow: visible; }
.jm-stage-wrap.jm-pilote .jm-stage{ will-change: transform; }
.jm-stage{
  position: sticky; top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--jm-ink-deep);
}
.jm-frame{ position: absolute; inset: 0; opacity: 0; }
/* En mode replié, les vues s'enchaînent au temps : il leur faut
   une transition, que le pilotage au scroll n'exige pas. */
.jm-auto .jm-frame{ transition: opacity 1.1s var(--jm-ease); }
.jm-frame:first-of-type{ opacity: 1; }
.jm-frame:first-of-type{ opacity: 1; }
.jm-frame img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.02);
  will-change: transform;
}
/* Voile : le texte doit rester lisible quelle que soit la photo */
.jm-frame::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.06) 26%,
                            rgba(0,0,0,.06) 62%, rgba(0,0,0,.5) 100%);
}

.jm-caption{
  position: absolute; z-index: 5;
  left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 90%; max-width: 820px; text-align: center;
  color: #fff;
}
.jm-caption .jm-note{ color: rgba(255,255,255,.82); }
/* Le premier panneau du héros porte le H1 de la page : même taille,
   même traitement, mais c'est lui le titre principal du document. */
.jm-caption h1,
.jm-caption h2{
  color: #fff;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.16;
  text-shadow: 0 4px 30px rgba(0,0,0,.55);
}
.jm-caption{ visibility: hidden; }
.jm-caption.is-on{ visibility: visible; }
.jm-caption > *{
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s var(--jm-ease), transform .8s var(--jm-ease);
}
.jm-caption .jm-note{ margin-bottom: 20px; }
.jm-caption .jm-btn, .jm-caption .jm-link{ margin-top: 30px; }
.jm-caption.is-on > *{ opacity: 1; transform: none; }
.jm-caption.is-on h2{ transition-delay: .08s; }
.jm-caption.is-on .jm-btn,
.jm-caption.is-on .jm-link{ transition-delay: .16s; }

/* Boutons posés sur la photo */
.jm-caption .jm-btn{ background: #fff; color: var(--jm-ink); }
.jm-caption .jm-btn:hover{ background: var(--jm-poche); }
.jm-caption .jm-link{ color: #fff; border-bottom-color: rgba(255,255,255,.5); }
.jm-caption .jm-link:hover{ color: #fff; border-bottom-color: #fff; }

/* Pastilles de position */
.jm-dots{
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  z-index: 6; display: flex; flex-direction: column; gap: 14px;
}
.jm-dots b{
  display: block; width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6);
  transition: background .4s var(--jm-ease), border-color .4s var(--jm-ease);
}
.jm-dots b.is-on{ background: #fff; border-color: #fff; }

/* Invitation à défiler */
.jm-cue{
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
  z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,.85);
  transition: opacity .5s var(--jm-ease);
}
.jm-cue i{
  display: block; width: 1px; height: 34px;
  background: rgba(255,255,255,.35); position: relative; overflow: hidden;
}
.jm-cue i::after{
  content: ""; position: absolute; left: 0; top: -100%;
  width: 100%; height: 100%; background: #fff;
  animation: jmCue 1.9s ease-in-out infinite;
}
@keyframes jmCue{ 0%{top:-100%} 60%{top:100%} 100%{top:100%} }

/* En-tête transparent tant qu'on est sur le héros */
body.jm-on-hero .jm-topbar{
  position: fixed; left: 0; right: 0;
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
body.jm-on-hero .jm-nav a{ color: rgba(255,255,255,.85); }
body.jm-on-hero .jm-nav a:hover,
body.jm-on-hero .jm-nav a[aria-current="page"]{ color: #fff; border-bottom-color: #fff; }
body.jm-on-hero .jm-burger{ color: #fff; }
body.jm-on-hero .jm-burger i b{ background: #fff; }
.jm-topbar__logo .jm-logo-blanc{ display: none; }
body.jm-on-hero .jm-topbar__logo .jm-logo-blanc{ display: block; }
body.jm-on-hero .jm-topbar__logo .jm-logo-encre{ display: none; }

@media (max-width: 720px){
  .jm-stage-wrap{ height: 260vh !important; min-height: 260vh; }
  .jm-dots{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .jm-stage-wrap{ height: 100vh !important; height: 100svh !important; min-height: 0; }
  .jm-frame:first-of-type{ opacity: 1 !important; }
  .jm-frame img{ transform: none !important; }
  .jm-caption > *{ opacity: 1 !important; transform: none !important; }
  .jm-cue i::after{ animation: none; }
}

/* ==========================================================================
   6 ter. PORTRAIT — la section « qui »
   ========================================================================== */
.jm-about__grid{
  display: grid;
  grid-template-columns: minmax(0, 0.52fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.jm-about__portrait img{ width: 100%; max-width: 380px; aspect-ratio: 4 / 5; object-fit: cover; }
.jm-about h2{ margin-block: 18px 20px; }
.jm-about p + p{ margin-top: 18px; }
.jm-about p{ color: var(--jm-graphite); max-width: 46ch; }
.jm-about__args{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(18px, 2.5vw, 32px);
  margin-block: clamp(28px, 3.5vw, 44px);
}
.jm-about__arg{ padding: 0; border-top: 1px solid var(--jm-line); padding-top: 16px; }
.jm-about__arg .jm-note{ color: var(--jm-poche-deep); margin-bottom: 8px; }
.jm-about__arg span{ font-size: var(--jm-t-sm); line-height: 1.5; }
@media (max-width: 820px){
  .jm-about__grid{ grid-template-columns: 1fr; }
  .jm-about__portrait img{ aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   7. CARTES — prestations, articles, etc.
   ========================================================================== */
.jm-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}
.jm-card{ background: none; }
.jm-card img, .jm-card .jm-plate{
  aspect-ratio: 4 / 3; object-fit: cover;
  width: 100%; margin-bottom: 22px;
  transition: opacity .5s var(--jm-ease);
}
.jm-card:hover img{ opacity: .86; }
.jm-card__body{ padding-inline: 0; }
.jm-card h3{ margin-bottom: 10px; }
.jm-card p{
  color: var(--jm-graphite); font-size: var(--jm-t-sm);
  line-height: 1.68; max-width: 34ch;
}

/* ==========================================================================
   8. ÉTAPES — numérotées, parce que c'est une séquence
   ========================================================================== */
.jm-steps{ border-top: 1px solid var(--jm-line); }
.jm-step{
  display: grid;
  grid-template-columns: 84px minmax(0, 22ch) minmax(0, 1fr);
  gap: 0 clamp(20px, 4vw, 52px);
  align-items: start;
  padding: clamp(24px, 3vw, 38px) 0;
  border-bottom: 1px solid var(--jm-line);
}
.jm-step__n{
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.16em; color: var(--jm-accent); padding-top: 8px;
}
.jm-step p{ color: var(--jm-graphite); font-size: var(--jm-t-sm); }
/* Placement explicite des trois éléments : le numéro est lui aussi un
   <p>, une règle « .jm-step p » l'attrapait et le déplaçait en colonne 2,
   ce qui renvoyait le titre dans la colonne étroite du numéro. */
.jm-step .jm-step__n{ grid-column: 1; grid-row: 1; }
.jm-step h3{ grid-column: 2; grid-row: 1; }
.jm-step p:not(.jm-step__n){ grid-column: 3; grid-row: 1; }

@media (max-width: 820px){
  .jm-step{ grid-template-columns: 54px minmax(0, 1fr); }
  .jm-step .jm-step__n{ grid-column: 1; grid-row: 1; padding-top: 3px; }
  .jm-step h3{ grid-column: 2; grid-row: 1; }
  .jm-step p:not(.jm-step__n){ grid-column: 2; grid-row: 2; margin-top: 10px; }
}

/* ==========================================================================
   9. RÉALISATIONS
   ========================================================================== */
.jm-projects{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.jm-project{ margin: 0; }
.jm-project .jm-plate,
.jm-project img{ aspect-ratio: 3 / 4; object-fit: cover; margin-bottom: 16px; }
.jm-project figcaption{
  display: flex; justify-content: space-between;
  gap: 16px; align-items: baseline;
}
.jm-project img{ transition: opacity .5s var(--jm-ease); }
.jm-project a:hover img{ opacity: .82; }

/* ==========================================================================
   10. BANDE D'APPEL
   ========================================================================== */
/* Clôture — deux moments typographiques, sans aplat.
   Le fond reste le papier ; c'est l'air qui sépare, pas la couleur. */
.jm-manifesto{
  padding: var(--jm-bay) 0;   /* même intervalle que les autres sections */
  text-align: center;
}
.jm-manifesto .jm-note{ color: var(--jm-poche-deep); margin-bottom: 26px; }
.jm-manifesto p:last-child{
  font-family: var(--jm-display); font-weight: 300;
  font-size: clamp(27px, 4.4vw, 58px); line-height: 1.16;
  max-width: 19ch; margin-inline: auto;
  color: var(--jm-ink);
}

/* Appel final — posé sur une photo. Un aplat de couleur pleine largeur
   pèse lourd en fin de page ; une image, non. */
.jm-band{
  position: relative;
  overflow: hidden;
  margin-top: var(--jm-bay);
  padding: clamp(78px, 10vw, 156px) 0;
  text-align: center;
  color: #fff;
}
.jm-band__bg{ position: absolute; inset: 0; z-index: 0; }
.jm-band__bg img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.jm-band__bg::after{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 60% at 50% 50%, rgba(18,17,14,.52) 0%, rgba(18,17,14,.2) 75%),
    linear-gradient(180deg, rgba(18,17,14,.5) 0%, rgba(18,17,14,.34) 45%, rgba(18,17,14,.6) 100%);
}
.jm-band > .jm-wrap{ position: relative; z-index: 1; }
.jm-band .jm-note{ color: rgba(255,255,255,.8); margin-bottom: 22px; }
.jm-band h2{
  color: #fff; max-width: 17ch; margin: 0 auto 32px;
  text-shadow: 0 3px 26px rgba(0,0,0,.45);
}
.jm-band .jm-btn{ background: #fff; color: var(--jm-ink); }
.jm-band .jm-btn:hover{ background: var(--jm-poche); }

/* ==========================================================================
   11. PIED DE PAGE
   ========================================================================== */
.jm-footer{
  margin-top: var(--jm-bay);
  border-top: 1px solid var(--jm-line);
  padding: clamp(48px, 6vw, 76px) 0 0;
}
.jm-footer__top{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--jm-line);
}
.jm-footer__logo{ height: 54px; width: auto; margin-bottom: 20px; }
.jm-footer__tagline{
  font-family: var(--jm-display); font-size: var(--jm-t-lead);
  line-height: 1.45; color: var(--jm-graphite); max-width: 30ch; margin-bottom: 24px;
}
/* Les titres du pied de page sont des h2 depuis le 20 août : en h4, ils
   suivaient un h2 et créaient un saut de niveau sur cinq pages, relevé par
   PageSpeed. Ils gardent ici l'apparence exacte qu'ils avaient. */
.jm-footer h4,
.jm-footer h2{
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jm-graphite); margin-bottom: 20px;
}
.jm-footer ul{ list-style: none; margin: 0; padding: 0; }
.jm-footer li{ margin-bottom: 11px; }
.jm-footer li a{
  font-size: var(--jm-t-sm); color: var(--jm-graphite);
  transition: color .3s var(--jm-ease);
}
.jm-footer li a:hover{ color: var(--jm-accent); }
.jm-footer__bottom{
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 24px;
  padding: 22px 0 30px;
}
.jm-footer__legal{ display: flex; flex-wrap: wrap; gap: 22px; }
@media (max-width: 900px){
  .jm-footer__top{ grid-template-columns: 1fr 1fr; }
  .jm-footer__brand{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  /* Deux colonnes pour la navigation et le contact : empilé, le pied de
     page faisait presque un écran entier. */
  .jm-footer{ padding-top: clamp(38px, 8vw, 52px); }
  .jm-footer__top{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
  .jm-footer__brand{ grid-column: 1 / -1; }
  .jm-footer__logo{ height: 40px !important; margin-bottom: 14px; }
  .jm-footer__tagline{ font-size: var(--jm-t-body); margin-bottom: 16px; }
  .jm-footer h4, .jm-footer h2{ margin-bottom: 12px; }
  .jm-footer li{ margin-bottom: 8px; }
  .jm-footer li a{ font-size: 13px; }
  .jm-footer__bottom{ padding: 18px 0 24px; gap: 8px; }
}

/* ==========================================================================
   11 bis. FICHE PROJET
   ========================================================================== */

/* Étiquette de nature — « Projection 3D » ou « Réalisation livrée ».
   Toujours visible : c'est ce qui distingue une intention d'un chantier. */
.jm-tag{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 7px 13px; border: 1px solid var(--jm-line);
  color: var(--jm-graphite); background: var(--jm-paper);
}
.jm-tag::before{
  content: ""; width: 7px; height: 7px; flex: 0 0 auto;
  background: var(--jm-poche-deep);
}
.jm-tag--built{ color: var(--jm-accent); border-color: var(--jm-accent); }
.jm-tag--built::before{ background: var(--jm-accent); }

/* Étiquette posée sur une vignette de projet */
.jm-project{ position: relative; }
.jm-project .jm-tag{ position: absolute; top: 14px; left: 14px; }

/* Le cartouche — les faits, comme sur un cartouche de planche */
.jm-facts{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(18px, 2.5vw, 34px);
  border-top: 1px solid var(--jm-line);
  padding-top: 24px;
}
.jm-facts > div{ padding: 0; }
.jm-facts dt{
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jm-graphite); margin-bottom: 8px;
}
.jm-facts dd{ margin: 0; font-size: var(--jm-t-sm); line-height: 1.5; }

/* Séquence narrative : texte et image en alternance */
.jm-story{ display: grid; gap: var(--jm-bay); }
.jm-beat{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.jm-beat--flip > figure{ order: -1; }
.jm-beat h3{ margin-bottom: 16px; }
.jm-beat p{ color: var(--jm-graphite); max-width: 44ch; }
.jm-beat figure{ margin: 0; }
.jm-beat figcaption{
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--jm-graphite); margin-top: 12px;
}
@media (max-width: 820px){
  .jm-beat, .jm-beat--flip{ grid-template-columns: 1fr; }
  .jm-beat--flip > figure{ order: 0; }
}

/* Planche de vues — mosaïque */
.jm-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.jm-gallery figure{ margin: 0; }
.jm-gallery img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.jm-gallery figcaption{
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--jm-graphite); margin-top: 10px;
}
.jm-gallery--wide figure:first-child{ grid-column: 1 / -1; }
.jm-gallery--wide figure:first-child img{ aspect-ratio: 21 / 9; }

/* --------------------------------------------------------------------------
   DU PLAN À LA PIÈCE — l'appariement qui prouve le métier
   Le plan à gauche, la vue rendue à droite. C'est ce qui distingue
   un architecte d'intérieur d'un décorateur.
   -------------------------------------------------------------------------- */
.jm-pair{
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1px;
  background: var(--jm-line);
  border: 1px solid var(--jm-line);
}
.jm-pair figure{ margin: 0; background: var(--jm-paper); display: flex; flex-direction: column; }
.jm-pair figcaption{
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--jm-graphite);
  padding: 14px 18px;
  border-top: 1px solid var(--jm-line);
  margin-top: auto;
}
/* Le plan respire sur son fond de planche ; la vue remplit son cadre */
.jm-pair__plan img{
  width: 100%; height: 100%; object-fit: contain;
  padding: clamp(18px, 2.5vw, 34px);
  background: var(--jm-paper-2);
  aspect-ratio: 4 / 3;
}
.jm-pair__view img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 760px){
  .jm-pair{ grid-template-columns: 1fr; }
}

/* Planche technique isolée — présentée comme un document, pas comme une image */
.jm-sheet-doc{
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}
.jm-sheet-doc img{
  width: 100%;
  background: var(--jm-paper);
  border: 1px solid var(--jm-line);
  padding: clamp(20px, 3vw, 40px);
}
.jm-sheet-doc p{ color: var(--jm-graphite); max-width: 46ch; }
.jm-sheet-doc p + p{ margin-top: 14px; }
@media (max-width: 760px){ .jm-sheet-doc{ grid-template-columns: 1fr; } }

/* ==========================================================================
   11 ter. PAGE PRESTATIONS
   ========================================================================== */


/* Chaque prestation devient un chapitre, pas un paragraphe de plus */
.jm-beat__label{
  display: block;
  margin-bottom: 16px;
}
.jm-beat h3,
.jm-beat h2{ max-width: 22ch; margin-bottom: 20px; }
.jm-beat p + p{ margin-top: 14px; }
/* Un chapitre est sémantiquement un H2 (le H1 est le titre de page),
   mais il garde la taille d'un H3 : la hiérarchie est corrigée sans
   que rien ne bouge à l'écran. */
.jm-beat h2{ font-size: var(--jm-t-h3); line-height: 1.2; }
.jm-beat__quote{
  margin-top: clamp(26px, 3.2vw, 44px);
  font-family: var(--jm-display);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.25;
  max-width: 18ch;
  color: var(--jm-ink) !important;
}

/* Ce qui est compris dans une prestation */
.jm-list{ list-style: none; margin: 26px 0 0; padding: 0; }
.jm-list li{
  position: relative; padding-left: 22px;
  font-size: var(--jm-t-sm); line-height: 1.62;
  color: var(--jm-graphite);
  break-inside: avoid;
}
.jm-list li + li{ margin-top: 13px; }
.jm-list li::before{
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 9px; height: 1px; background: var(--jm-accent); opacity: .55;
}
/* Deux colonnes dès qu'il y a la place : six puces d'affilée font un mur */
@media (min-width: 1000px){
  .jm-list--2col{ columns: 2; column-gap: 34px; }
  .jm-list--2col li:nth-child(4){ margin-top: 0; }
}

/* Un plan dans une séquence : le dessin seul, détouré, posé sur la bande.
   Pas de fond, pas de cadre — c'est un tracé, pas une photographie. */
.jm-beat figure.jm-beat--doc img{
  object-fit: contain;
  background: none;
  padding: 0;
}
.jm-beat figure.jm-beat--doc figcaption{
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--jm-graphite); margin-top: 12px;
}

/* « À vous de choisir » — quatre portes d'entrée */
.jm-routes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: clamp(26px, 3.2vw, 48px);
}

.jm-route{ border-top: 1px solid var(--jm-line); padding-top: 20px; }
/* Le bloc de tête se resserre pour tenir dans la hauteur de bande */
.jm-choix .jm-head{ margin-bottom: clamp(34px, 4vw, 52px); }
.jm-choix .jm-head p{ max-width: 60ch; }
.jm-route h3{ font-size: var(--jm-t-h3); margin-bottom: 10px; }
.jm-route p{
  color: var(--jm-graphite); font-size: var(--jm-t-sm);
  line-height: 1.65; margin-bottom: 18px;
}

/* Foire aux questions */
.jm-faq{ max-width: 72ch; margin-inline: auto; }
.jm-faq__item{ border-bottom: 1px solid var(--jm-line); }
.jm-faq__item:first-child{ border-top: 1px solid var(--jm-line); }
.jm-faq__q{
  width: 100%; display: flex; align-items: flex-start; gap: 20px;
  justify-content: space-between; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 22px 2px;
  font-family: var(--jm-display);
  font-size: clamp(18px, 1.3vw, 23px);
  line-height: 1.35; color: var(--jm-ink);
  transition: color .3s var(--jm-ease);
}
.jm-faq__q:hover{ color: var(--jm-accent); }
/* Le signe + devient − à l'ouverture */
.jm-faq__q i{
  position: relative; flex: 0 0 auto;
  width: 13px; height: 13px; margin-top: 7px;
}
.jm-faq__q i::before, .jm-faq__q i::after{
  content: ""; position: absolute; background: var(--jm-accent);
  transition: transform .35s var(--jm-ease), opacity .35s var(--jm-ease);
}
.jm-faq__q i::before{ left: 0; top: 6px; width: 13px; height: 1px; }
.jm-faq__q i::after{ top: 0; left: 6px; width: 1px; height: 13px; }
.jm-faq__item.is-open .jm-faq__q i::after{ transform: scaleY(0); opacity: 0; }

/* Ouverture sans mesure de hauteur en JS : 0fr → 1fr */
.jm-faq__a{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--jm-ease);
}
.jm-faq__item.is-open .jm-faq__a{ grid-template-rows: 1fr; }
.jm-faq__a > div{ overflow: hidden; }
/* Un lien dans une réponse doit se voir : sinon personne ne clique */
.jm-faq__a a{
  color: var(--jm-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--jm-accent) 35%, transparent);
  transition: border-color .3s var(--jm-ease);
}
.jm-faq__a a:hover{ border-bottom-color: var(--jm-accent); }
.jm-faq__a p{
  color: var(--jm-graphite); font-size: var(--jm-t-sm);
  line-height: 1.75; padding-bottom: 28px; max-width: 62ch;
}

/* ==========================================================================
   11 quater. PAGE TARIFS
   ========================================================================== */
.jm-tarifs{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(28px, 3.4vw, 52px);
  align-items: start;
}
.jm-tarif{ border-top: 1px solid var(--jm-line); padding-top: 24px; }
/* La formule centrale se signale par son filet, pas par un encadré :
   le reste de la page n'a pas de cadres, elle n'en aura pas non plus. */
.jm-tarif--phare{ border-top: 2px solid var(--jm-accent); }
.jm-tarif__rang{
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jm-accent); margin-bottom: 14px;
  min-height: 1em;
}
.jm-tarif h3,
.jm-tarif h2{ font-size: var(--jm-t-h3); line-height: 1.2; margin-bottom: 10px; }
/* Sélecteur renforcé : « .jm-tarif > p » (0-1-1) l'emportait sur
   « .jm-tarif__prix » (0-1-0) et écrasait la taille du prix. */
.jm-tarif > p.jm-tarif__prix{
  font-family: var(--jm-display);
  font-size: clamp(30px, 2.6vw, 42px);
  line-height: 1.1; color: var(--jm-ink);
  margin: 18px 0 4px;
}
.jm-tarif > p.jm-tarif__prix small{
  display: block; margin-top: 8px;
  font-family: var(--jm-body); font-size: var(--jm-t-note);
  letter-spacing: 0.04em; color: var(--jm-graphite);
}
.jm-tarif > p{ color: var(--jm-graphite); font-size: var(--jm-t-sm); line-height: 1.65; }
.jm-tarif .jm-list{ margin-top: 20px; }
.jm-tarif .jm-link{ margin-top: 24px; }

/* Exemple chiffré — le calcul posé à plat, comme un devis */
.jm-devis{
  max-width: 46ch;
  border-top: 1px solid var(--jm-line);
  margin-top: clamp(28px, 3.5vw, 44px);
}
.jm-devis div{
  display: flex; justify-content: space-between; gap: 24px;
  padding: 14px 0; border-bottom: 1px solid var(--jm-line);
  font-size: var(--jm-t-sm); color: var(--jm-graphite);
}
.jm-devis div:last-child{
  border-bottom: 0; padding-top: 20px;
  font-family: var(--jm-display); font-size: var(--jm-t-h3);
  color: var(--jm-ink);
}
.jm-devis b{ font-weight: 400; color: var(--jm-ink); }

/* Mentions de prix — obligation d'information du consommateur */
.jm-mentions{
  margin-top: clamp(30px, 4vw, 52px);
  font-size: var(--jm-t-note); line-height: 1.7;
  color: var(--jm-graphite); max-width: 74ch;
}
.jm-mentions li{ margin-bottom: 6px; }

/* ==========================================================================
   11 quinquies. PAGE CONTACT ET FORMULAIRE
   Les sélecteurs couvrent à la fois WPForms et Forminator : le formulaire
   garde l'allure du site quel que soit le plugin retenu.
   ========================================================================== */
/* Bandeau de coordonnées : pour qui veut décrocher tout de suite,
   sans traverser le formulaire. Trois colonnes, lecture immédiate. */
.jm-coords{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(26px, 3.2vw, 56px);
}

/* Le formulaire occupe sa propre zone, resserrée : une colonne étroite
   se remplit plus volontiers qu'une large. */
.jm-form-zone{ max-width: 660px; margin-inline: auto; }

/* Coordonnées directes — pour ceux qui préfèrent décrocher */
/* Bandeau de coordonnées : un filet au-dessus ET en dessous, et le
   contenu centré dans la hauteur. Les colonnes s'étirent à la hauteur
   de la plus haute, les filets du bas s'alignent donc d'eux-mêmes. */
.jm-section--coords{ padding-block: var(--jm-bay); }
.jm-coords{ align-items: stretch; }
.jm-coord{
  display: flex; flex-direction: column; justify-content: center;
  border-top: 1px solid var(--jm-line);
  border-bottom: 1px solid var(--jm-line);
  padding-block: clamp(24px, 3vw, 38px);
}
.jm-coord h3,
.jm-coord h2{ font-size: var(--jm-t-h3); line-height: 1.2; margin-bottom: 12px; }
.jm-coord p{ color: var(--jm-graphite); font-size: var(--jm-t-sm); line-height: 1.65; }
.jm-coord a:not(.jm-link){
  color: var(--jm-ink);
  border-bottom: 1px solid var(--jm-line);
  transition: border-color .3s var(--jm-ease);
}
.jm-coord a:not(.jm-link):hover{ border-bottom-color: var(--jm-accent); }
.jm-coord__gros{
  font-family: var(--jm-display);
  font-size: clamp(21px, 1.6vw, 27px);
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   LE FORMULAIRE
   -------------------------------------------------------------------------- */
.jm-formulaire label,
.jm-formulaire .wpforms-field-label,
.jm-formulaire .forminator-label{
  display: block;
  font-family: var(--jm-note);
  font-size: var(--jm-t-note);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jm-graphite);
  margin-bottom: 10px;
  font-weight: 400;
}
.jm-formulaire input[type="text"],
.jm-formulaire input[type="email"],
.jm-formulaire input[type="tel"],
.jm-formulaire input[type="url"],
.jm-formulaire input[type="number"],
.jm-formulaire select,
.jm-formulaire textarea{
  width: 100%;
  font-family: var(--jm-body);
  font-size: var(--jm-t-body);
  color: var(--jm-ink);
  background: transparent;   /* le champ épouse la bande, clair ou sable */
  border: 0;
  border-bottom: 1px solid var(--jm-line);
  border-radius: 0;
  padding: 12px 2px;
  transition: border-color .3s var(--jm-ease);
  appearance: none;
}
.jm-formulaire textarea{ min-height: 150px; resize: vertical; line-height: 1.7; }
.jm-section--sable .jm-formulaire input,
.jm-section--sable .jm-formulaire select,
.jm-section--sable .jm-formulaire textarea{ border-bottom-color: var(--jm-poche-deep); }

.jm-formulaire input:focus,
.jm-formulaire select:focus,
.jm-formulaire textarea:focus{
  outline: none;
  border-bottom-color: var(--jm-accent);
  border-bottom-width: 2px;
  padding-bottom: 11px;   /* compense l'épaisseur pour éviter le saut */
}
.jm-formulaire input::placeholder,
.jm-formulaire textarea::placeholder{ color: var(--jm-poche-deep); }

/* Le formulaire est découpé en trois temps. Un visiteur qui voit trois
   petits blocs remplit ; le même visiteur devant huit champs alignés
   referme l'onglet. */
.jm-formulaire fieldset{
  border: 0; padding: 0;
  margin: 0 0 clamp(38px, 4.5vw, 60px);
}
.jm-formulaire legend{
  display: block; width: 100%;
  font-family: var(--jm-display);
  font-size: var(--jm-t-h3); line-height: 1.2;
  color: var(--jm-ink);
  padding: 0 0 18px;
  margin-bottom: clamp(22px, 2.6vw, 30px);
  border-bottom: 1px solid var(--jm-line);
}
.jm-formulaire legend small{
  display: block; margin-top: 8px;
  font-family: var(--jm-body); font-size: var(--jm-t-sm);
  color: var(--jm-graphite); line-height: 1.6;
}

/* Mention « facultatif » : elle rassure plus qu'elle n'encombre */
.jm-opt{
  text-transform: none; letter-spacing: 0;
  font-family: var(--jm-body); font-size: var(--jm-t-sm);
  color: var(--jm-poche-deep);
}

.jm-champ{ margin-bottom: clamp(24px, 2.6vw, 34px); }

.jm-formulaire input[type="file"]{
  width: 100%; font-family: var(--jm-body); font-size: var(--jm-t-sm);
  color: var(--jm-graphite);
  border-bottom: 1px solid var(--jm-line); padding: 12px 2px;
}
.jm-formulaire input[type="file"]::file-selector-button{
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--jm-ink); background: var(--jm-paper-2);
  border: 1px solid var(--jm-line); border-radius: 0;
  padding: 9px 16px; margin-right: 14px; cursor: pointer;
  transition: border-color .3s var(--jm-ease);
}
.jm-formulaire input[type="file"]::file-selector-button:hover{ border-color: var(--jm-accent); }
.jm-champs-2{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 2.6vw, 36px);
}
@media (max-width: 620px){ .jm-champs-2{ grid-template-columns: 1fr; } }

/* Consentement — obligatoire dès qu'on collecte une donnée personnelle */
.jm-consent{
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.jm-consent input[type="checkbox"]{
  flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px;
  accent-color: var(--jm-accent);
}
.jm-consent span{
  font-size: var(--jm-t-sm); line-height: 1.6; color: var(--jm-graphite);
  text-transform: none; letter-spacing: 0;
}
.jm-consent a{ color: var(--jm-accent); border-bottom: 1px solid var(--jm-line); }

/* Bouton d'envoi — reprend le bouton du site */
.jm-formulaire button[type="submit"],
.jm-formulaire .wpforms-submit,
.jm-formulaire .forminator-button-submit{
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--jm-accent); color: var(--jm-paper);
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 15px 26px; border: 0; border-radius: 0; cursor: pointer;
  white-space: nowrap;
  transition: background .45s var(--jm-ease), gap .4s var(--jm-ease);
}
.jm-formulaire button[type="submit"] svg{ width: 15px; height: 15px; flex: 0 0 auto; }
.jm-formulaire button[type="submit"]:hover,
.jm-formulaire .wpforms-submit:hover,
.jm-formulaire .forminator-button-submit:hover{
  gap: 18px; background: var(--jm-ink);
}

/* Neutralisation des habillages par défaut des plugins */
.jm-formulaire .wpforms-container,
.jm-formulaire .forminator-ui{ margin: 0 !important; max-width: none !important; }
.jm-formulaire .wpforms-field{ padding: 0 0 clamp(24px, 2.6vw, 34px) !important; }
.jm-formulaire .wpforms-required-label,
.jm-formulaire .forminator-required{ color: var(--jm-accent); }

/* Étapes qui suivent l'envoi */
.jm-suite{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
  gap: clamp(26px, 3.2vw, 48px);
}
.jm-suite > div{ border-top: 1px solid var(--jm-line); padding-top: 20px; }
.jm-suite h3{ font-size: var(--jm-t-h3); margin-bottom: 10px; }
.jm-suite p{ color: var(--jm-graphite); font-size: var(--jm-t-sm); line-height: 1.65; }
.jm-suite .jm-note{ color: var(--jm-poche-deep); margin-bottom: 10px; }

/* ==========================================================================
   11 sexies. PAGE RÉALISATIONS
   ========================================================================== */

/* Projet mis en avant : une grande image, puis son cartouche en dessous.
   Le jour où il y aura plusieurs projets, ce bloc se duplique — ou se
   remplace par la grille .jm-projects déjà en place sur l'accueil. */
.jm-vedette{ display: block; }
.jm-vedette__media{ position: relative; margin: 0; }
.jm-vedette__media img{
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: opacity .6s var(--jm-ease);
}
.jm-vedette:hover .jm-vedette__media img{ opacity: .88; }
.jm-vedette__media .jm-tag{ position: absolute; top: 16px; left: 16px; }

.jm-vedette__pied{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-top: clamp(24px, 3vw, 38px);
}
.jm-vedette__pied h2{ max-width: 16ch; }
.jm-vedette__pied p{ color: var(--jm-graphite); max-width: 46ch; }
.jm-vedette__pied .jm-link{ margin-top: 22px; }
@media (max-width: 820px){
  .jm-vedette__pied{ grid-template-columns: 1fr; align-items: start; }
}

/* Cartouche horizontal — les faits en une ligne */
.jm-vedette__faits{
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  margin-top: 18px;
}
.jm-vedette__faits span{
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--jm-graphite);
}

/* Espaces : une pièce, une vignette */
.jm-espaces{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}
.jm-espace{ margin: 0; }
.jm-espace img{
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  margin-bottom: 14px;
  transition: opacity .5s var(--jm-ease);
}
.jm-espace a:hover img{ opacity: .88; }
.jm-espace h3{ font-size: var(--jm-t-h3); margin-bottom: 6px; }
.jm-espace figcaption .jm-note{ color: var(--jm-poche-deep); }

/* ==========================================================================
   12. BLOG — habille les articles WordPress natifs (Gutenberg)
       Tu écris tes articles normalement, ils héritent d'ici.
   ========================================================================== */
.jm-article{
  max-width: 70ch;
  margin-inline: auto;
  padding-block: clamp(48px, 6vw, 88px);
}
.jm-article > * + *{ margin-top: 1.4em; }
.jm-article h1{ font-size: var(--jm-t-h1); line-height: 1.02; margin-bottom: 0.5em; }
.jm-article h2{ font-size: var(--jm-t-h2); margin-top: 2em; }
.jm-article h3{ font-size: var(--jm-t-h3); margin-top: 1.8em; }
.jm-article p{ color: #2A2926; }
.jm-article a:not(.jm-btn):not(.jm-link){
  color: var(--jm-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--jm-accent) 35%, transparent);
  transition: border-color .3s var(--jm-ease);
}
.jm-article a:not(.jm-btn):not(.jm-link):hover{ border-bottom-color: var(--jm-accent); }
.jm-article ul, .jm-article ol{ padding-left: 1.3em; }
.jm-article li{ margin-bottom: 0.5em; }
.jm-article li::marker{ color: var(--jm-poche-deep); }
.jm-article blockquote{
  margin-inline: 0;
  padding-left: clamp(20px, 3vw, 34px);
  border-left: 2px solid var(--jm-accent);
  font-family: var(--jm-display);
  font-size: var(--jm-t-lead);
  line-height: 1.45;
  color: var(--jm-graphite);
}
.jm-article figure{ margin-inline: 0; }
.jm-article figcaption{
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--jm-graphite); margin-top: 12px;
}
.jm-article hr{ border: 0; border-top: 1px solid var(--jm-line); margin-block: 2.5em; }
.jm-article code{
  font-family: var(--jm-note); font-size: 0.88em;
  background: var(--jm-paper-2); padding: 2px 6px;
}
/* Méta d'article */
.jm-article__meta{
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding-bottom: 20px; border-bottom: 1px solid var(--jm-line);
}

/* ==========================================================================
   13. RÉVÉLATION AU SCROLL
   ========================================================================== */
.jm [data-reveal]{ opacity: 0; transform: translateY(18px); }
.jm.jm-ready [data-reveal]{
  transition: opacity .9s var(--jm-ease), transform .9s var(--jm-ease);
}
.jm [data-reveal].is-visible{ opacity: 1; transform: none; }
.jm [data-reveal-delay="1"]{ transition-delay: .08s; }
.jm [data-reveal-delay="2"]{ transition-delay: .16s; }
.jm [data-reveal-delay="3"]{ transition-delay: .24s; }
.jm [data-reveal-delay="4"]{ transition-delay: .32s; }

/* ==========================================================================
   14. ACCESSIBILITÉ
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .jm *, .jm *::before, .jm *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .jm [data-reveal]{ opacity: 1 !important; transform: none !important; }
}

/* Impression — devis, fiches projet */
@media print{
  .jm-sheet, .jm-topbar, .jm-drawer, .jm-band{ display: none !important; }
  .jm{ background: #fff; color: #000; }
  .jm-article{ max-width: none; }
}

/* ==========================================================================
   15. COMPATIBILITÉ THÈME ET CONSTRUCTEUR
   Astra et Elementor imposent leurs propres règles, chargées après cette
   feuille. Les surcharges ci-dessous ne portent que sur les points dont
   la mise en page dépend réellement — nulle part ailleurs.
   ========================================================================== */

/* --- 0. Les conteneurs Elementor doivent laisser passer la largeur -------
   Mesuré sur une reproduction de la structure réelle : les conteneurs
   « flex » d'Elementor réduisaient le contenu à 189 px au lieu de 1440.
   Nos pages ne contiennent qu'un seul bloc HTML : les repasser en bloc
   simple ne casse rien et rend toute la largeur. */
.jm .elementor,
.jm .elementor-element,
.jm .e-con, .jm .e-con-inner,
.jm .elementor-widget, .jm .elementor-widget-html,
.jm .elementor-widget-container{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  flex: none !important;
}
/* Le thème impose aussi une largeur de colonne */
.jm .ast-container, .jm #content.site-content, .jm #primary, .jm .entry-content{
  max-width: none !important;
  width: auto !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

/* --- 1. Le héros a besoin d'ancêtres qui ne rognent pas -------------------
   « position: sticky » s'accroche au premier ancêtre dont le débordement
   est masqué. Elementor en pose sur ses conteneurs : le héros reste alors
   figé au lieu de défiler. */
.jm #page, .jm .site, .jm .site-content, .jm .ast-container,
.jm .entry-content, .jm .elementor, .jm .elementor-section,
.jm .elementor-container, .jm .elementor-widget-wrap,
.jm .elementor-widget-html, .jm .elementor-widget-container,
.jm .e-con, .jm .e-con-inner, .jm .e-parent, .jm .e-child{
  overflow: visible !important;
}
.jm .elementor-widget-html{ margin: 0 !important; }

/* --- 2. Les images dont la HAUTEUR porte la mise en page ------------------
   Astra applique « img { height: auto } ». Sans ces surcharges, le logo
   s'affiche à sa taille naturelle et les photos du héros ne remplissent
   plus l'écran : le fond sombre de la scène apparaît en dessous. */
.jm .jm-topbar__logo img{
  height: 44px !important;
  width: auto !important;
  max-width: none !important;
}
@media (max-width: 900px){
  .jm .jm-topbar__logo img{ height: 34px !important; }
}

.jm .jm-frame img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}
.jm .jm-stage{ height: 100vh; height: 100svh; }

.jm .jm-band__bg img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.jm .jm-egal .jm-beat figure{ height: var(--jm-visuel); }
.jm .jm-egal .jm-beat figure img{ height: auto; flex: 1 1 auto; min-height: 0; }
@media (max-width: 820px){
  .jm .jm-egal .jm-beat figure{ height: auto; }
}

.jm .jm-footer__logo{ height: 54px !important; width: auto !important; }

/* --- 3. Le pied de page du thème ne doit pas s'ajouter au nôtre ---------- */
.jm .site-footer, .jm .ast-small-footer{ display: none; }

/* ==========================================================================
   16. CORRECTIFS RELEVÉS SUR LE SITE EN LIGNE
   ========================================================================== */

/* --- A. Astra force « text-transform: capitalize » sur les titres ---------
   D'où « Nous Imaginons Des Intérieurs Qui Vous Ressemblent ». On rétablit
   la casse normale, puis on remet en capitales les seuls éléments qui
   doivent l'être. */
.jm h1, .jm h2, .jm h3, .jm h4, .jm h5, .jm h6,
.jm p, .jm li, .jm dd, .jm blockquote, .jm figcaption,
.jm span, .jm a, .jm em, .jm strong, .jm small,
.jm button{
  text-transform: none !important;
  letter-spacing: inherit;
}
.jm .jm-note, .jm .jm-link, .jm .jm-btn, .jm .jm-tag,
.jm .jm-nav a, .jm .jm-burger, .jm .jm-step__n, .jm .jm-tarif__rang,
.jm .jm-formulaire button[type="submit"],
.jm .jm-formulaire .forminator-button-submit,
.jm .jm-footer h4, .jm .jm-footer h2,
.jm .jm-formulaire label, .jm .jm-facts dt,
.jm .jm-vedette__faits span, .jm .jm-mark span,
.jm .jm-beat figcaption, .jm .jm-gallery figcaption,
.jm .jm-espace figcaption .jm-note, .jm .jm-suite .jm-note{
  text-transform: uppercase !important;
}
.jm .jm-opt, .jm .jm-mentions li, .jm .jm-consent span{
  text-transform: none !important;
}

/* --- B. Le fond vert derrière les questions ouvertes ----------------------
   Astra applique un fond aux boutons au survol et au focus. */
.jm .jm-faq__q,
.jm .jm-faq__q:hover,
.jm .jm-faq__q:focus,
.jm .jm-faq__q:active,
.jm .jm-burger, .jm .jm-burger:hover, .jm .jm-burger:focus{
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.jm button{ -webkit-tap-highlight-color: transparent; }
.jm .jm-faq__q:focus-visible{ outline: 2px solid var(--jm-accent); outline-offset: 3px; }

/* --- C. L'en-tête au-dessus du héros ------------------------------------- */
body.jm-on-hero .jm-topbar{
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* --- D. Logo un peu plus discret sur téléphone --------------------------- */
@media (max-width: 900px){
  .jm .jm-topbar__logo img{ height: 30px !important; }
  .jm-topbar{ min-height: 68px; padding-block: 14px; }
}

/* --- E. Mouvement réduit : héros fixe, mais pas cassé ---------------------
   Quand le système demande de limiter les animations, la séquence
   défilante est remplacée par une seule vue plein écran. C'est voulu :
   un héros épinglé au défilement gêne les personnes sensibles au
   mouvement. L'en-tête doit néanmoins se comporter correctement. */
@media (prefers-reduced-motion: reduce){
  .jm-stage-wrap{ height: 100vh !important; height: 100svh !important; min-height: 0; }
  .jm-cue, .jm-dots{ display: none; }
  .jm-frame:first-of-type{ opacity: 1 !important; }
  .jm-frame:not(:first-of-type){ display: none; }
  .jm-caption:first-of-type > *{ opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   17. EN-TÊTE FIXE — SUITE
   ========================================================================== */

/* Au-dessus du héros : aucune barre du tout. Le logo et le menu se posent
   directement sur la photo, dont le voile assure la lisibilité. */
/* Une page qui contient un héros démarre SANS barre : le logo et le menu
   se posent directement sur la photo. Écrit en CSS pur, donc valable même
   si le script n'a pas encore tourné. */
body:has(.jm-stage-wrap) .jm-topbar{
  background: transparent !important;
  border-bottom-color: transparent !important;
}
body:has(.jm-stage-wrap) .jm-nav a{ color: rgba(255,255,255,.86); }
body:has(.jm-stage-wrap) .jm-nav a:hover,
body:has(.jm-stage-wrap) .jm-nav a[aria-current="page"]{ color:#fff; border-bottom-color:#fff; }
body:has(.jm-stage-wrap) .jm-burger{ color:#fff; }
body:has(.jm-stage-wrap) .jm-burger i b{ background:#fff; }
body:has(.jm-stage-wrap) .jm-topbar__logo .jm-logo-encre{ display:none; }
body:has(.jm-stage-wrap) .jm-topbar__logo .jm-logo-blanc{ display:block; }

/* Une fois le héros dépassé, le script pose « jm-defile » : la barre
   redevient opaque et le logo repasse en encre. */
body.jm-defile .jm-topbar{
  background: var(--jm-paper) !important;
  border-bottom-color: var(--jm-line) !important;
}
body.jm-defile .jm-nav a{ color: var(--jm-graphite); }
body.jm-defile .jm-nav a:hover,
body.jm-defile .jm-nav a[aria-current="page"]{ color: var(--jm-accent); border-bottom-color: var(--jm-accent); }
body.jm-defile .jm-burger{ color: var(--jm-ink); }
body.jm-defile .jm-burger i b{ background: var(--jm-ink); }
body.jm-defile .jm-topbar__logo .jm-logo-encre{ display:block; }
body.jm-defile .jm-topbar__logo .jm-logo-blanc{ display:none; }

/* L'en-tête étant hors flux, les pages intérieures doivent lui laisser
   sa hauteur. La page d'accueil n'en a pas besoin : le héros passe
   volontairement dessous. */
.jm-pagehead{ padding-top: calc(var(--jm-head) + clamp(30px, 3.4vw, 52px)); }

/* Barre d'administration WordPress : sans ça, le logo se cache dessous
   tant que tu es connectée. */
body.admin-bar .jm-topbar{ top: 32px; }
@media screen and (max-width: 782px){
  body.admin-bar .jm-topbar{ top: 46px; }
}

@media (max-width: 900px){
  :root{ --jm-head: 68px; }
}

/* ==========================================================================
   18. AJUSTEMENTS MOBILES DEMANDÉS
   ========================================================================== */

@media (max-width: 720px){

  /* --- Réalisations de l'accueil : défilement horizontal ----------------
     Trois vignettes empilées font trois écrans. En rail, on les parcourt
     d'un geste, et la troisième se devine au bord — ce qui invite à
     faire glisser. */
  .jm-projects{
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--jm-gut);
    gap: 14px;
    /* on déborde volontairement de la marge pour que le rail touche
       les bords de l'écran */
    margin-inline: calc(var(--jm-gut) * -1);
    padding-inline: var(--jm-gut);
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .jm-projects::-webkit-scrollbar{ display: none; }
  .jm-projects > *{ scroll-snap-align: start; }
  .jm-projects .jm-project img{ aspect-ratio: 4 / 5; }

  /* --- Le plan technique était affiché en pleine hauteur --------------- */
  .jm-beat figure.jm-beat--doc img{
    max-height: 58vh;
    width: auto !important;
    max-width: 100%;
    margin-inline: auto;
    display: block;
  }
  .jm-beat figure.jm-beat--doc{ text-align: center; }

  /* --- Portrait de Julia : le cadrage large lui coupait la tête ------- */
  .jm-about__portrait img{
    aspect-ratio: 4 / 5 !important;
    object-position: 50% 18%;
  }
}

/* Le portrait garde un cadrage haut à toutes les tailles */
.jm-about__portrait img{ object-position: 50% 20%; }

/* ==========================================================================
   19. VITESSE DU HÉROS SUR ORDINATEUR
   La durée du héros est sa hauteur : moins de hauteur, moins de molette
   pour passer d'une vue à l'autre. On n'accélère que sur grand écran —
   sur téléphone, le pouce parcourt bien plus de distance par geste, et
   raccourcir encore rendrait l'enchaînement brusque.
   ========================================================================== */
@media (min-width: 901px){
  .jm-stage-wrap{ height: 220vh !important; min-height: 220vh; }
}

/* ==========================================================================
   20. LE PLAN TECHNIQUE, EN GRAND
   Un tracé de 1493 x 3458 px comprimé dans les 480 px de hauteur commune
   aux autres bandes ne fait plus que 194 px de large : les cotes
   deviennent illisibles. Ce chapitre s'affranchit donc de cette hauteur.
   La bande sera plus haute que les autres — c'est le prix à payer pour
   voir le document.
   ========================================================================== */
.jm-egal .jm-beat figure.jm-beat--doc{ height: auto !important; }

.jm-beat figure.jm-beat--doc img{
  height: min(80vh, 780px) !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  margin-inline: auto;
  display: block;
  object-fit: contain !important;
  padding: 0 !important;
  background: none !important;
}
@media (max-width: 820px){
  .jm-beat figure.jm-beat--doc img{ height: min(74vh, 660px) !important; }
}

/* Cliquable : la pleine résolution s'ouvre dans un nouvel onglet, seule
   façon de lire réellement les cotes sur un écran. */
.jm-beat--doc a{ display: block; }
.jm-beat--doc a img{ transition: opacity .35s var(--jm-ease); }
.jm-beat--doc a:hover img{ opacity: .82; }
.jm-doc-loupe{
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 12px;
  font-family: var(--jm-note); font-size: var(--jm-t-note);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--jm-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--jm-accent) 35%, transparent);
  padding-bottom: 4px;
}
.jm-doc-loupe svg{ width: 15px; height: 15px; }

/* --- Le plan dans la visionneuse d'Elementor ------------------------------
   Elementor affiche les images agrandies sur un fond noir à 80 %. Le plan
   technique est un PNG transparent à 87 %, au tracé quasi noir : il y
   devenait invisible. On lui rend le fond papier du site.
   Les photographies ne sont pas concernées : opaques, elles couvrent
   entièrement leur cadre et ce fond reste derrière elles. */
.jm .elementor-lightbox img,
.jm .elementor-lightbox .elementor-lightbox-image,
.jm .elementor-lightbox .swiper-slide-image,
.jm .dialog-type-lightbox img{
  background: var(--jm-paper);
}

/* ==========================================================================
   20. UN PLAN DANS UNE VIGNETTE
   Le plan mesure 1493 × 3458 : très vertical. Recadré en 4:3 comme les
   photos, on n'en voyait qu'une tranche centrale. Il est désormais
   CONTENU dans la même boîte — donc entier, et toujours aligné avec les
   trois autres cartes.
   ========================================================================== */
.jm-card img.jm-plan{
  object-fit: contain !important;
  background: var(--jm-paper-2);
  padding: clamp(12px, 1.6vw, 22px);
}
/* Un plan n'est jamais recadré, où qu'il apparaisse.
   Deux sélecteurs : la classe pour les pages recollées, le chemin du
   fichier pour celles qui ne l'ont pas encore été. */
.jm img.jm-plan{ object-fit: contain !important; }

/* ==========================================================================
   21. NEUTRALISATION DU THÈME ET DES CONTENEURS VIDES
   Relevé sur le DOM réel du site le 14 août.
   ========================================================================== */

/* --- L'en-tête et le menu hors-écran d'Astra ----------------------------
   Le thème pose son propre en-tête, son propre volet de navigation et sa
   propre liste de pages — générée automatiquement, avec « confidentialite »
   en minuscules et trois liens sociaux vides qui rechargent la page.
   Nos pages apportent les leurs : ceux du thème n'ont plus lieu d'être. */
.jm .site-header,
.jm #masthead,
.jm #ast-desktop-header,
.jm #ast-mobile-header,
.jm #ast-mobile-popup-wrapper,
.jm .ast-mobile-popup-drawer,
.jm .site-footer,
.jm #colophon{
  display: none !important;
}

/* --- Conteneurs Elementor vides ----------------------------------------
   Deux conteneurs sans aucun contenu précèdent le nôtre et ajoutaient
   80 px de vide au-dessus du héros.

   21 août — il en restait 50, et c'est ce qui produisait la bande claire
   en haut de l'accueil. Le rembourrage d'un conteneur « boxed » ne vit
   pas sur .e-con mais sur son enfant .e-con-inner, que la règle du 14 août
   ne visait pas. Relevé sur le site en ligne : 20 px pour chacun des deux
   conteneurs vides, 10 px pour celui qui porte notre bloc HTML. Le héros
   commençait donc à 50 px, et le fond de page apparaissait sous un
   en-tête pourtant correctement transparent — logo blanc et menu blanc
   posés sur du papier blanc cassé. La barre n'était pas en cause, ni les
   règles de la section 17. Un seul sélecteur ajouté ci-dessous.

   Les deux règles « :empty » qui suivent ne s'appliquent, elles, jamais :
   un conteneur qui contient un simple retour à la ligne n'est pas vide au
   sens de CSS. On les garde — elles ne coûtent rien — mais ce n'est pas
   sur elles qu'il faut compter. */
.jm .e-con,
.jm .e-con-inner{
  padding-block: 0 !important;
  min-height: 0 !important;
}
.jm .elementor-element:has(> .e-con-inner:empty){ display: none !important; }
.jm .e-con-inner:empty{ display: none !important; }