/* ========================================================================== 
   V27 — regular living project grid and scoped responsive fixes.
   This layer is intentionally loaded last so the v24 site remains the stable
   foundation and every change below stays easy to remove or compare.
   ========================================================================== */

/* ---------- Living editorial wall ---------- */
.living-wall-host{
  width:100%;
  margin-top:28px;
}

.wall-toolbar{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:0 0 clamp(28px,4vw,58px);
  padding:16px 0;
}
/* Les 2 lignes qui encadrent la barre : en difference contre le vrai fond (comme "10 projets"). */
/* Pseudo-elements car mix-blend-mode ne s'applique pas a une bordure seule. La barre n'est plus
   isolee (z-index:auto plus bas), donc la difference atteint bien le grain. */
.wall-toolbar::before,.wall-toolbar::after{content:"";position:absolute;left:0;right:0;height:1px;background:#fff;mix-blend-mode:difference;pointer-events:none;}
.wall-toolbar::before{top:0;}
.wall-toolbar::after{bottom:0;}
.wall-filters{display:flex;flex-wrap:wrap;align-items:center;gap:7px;}
.wall-filter{
  appearance:none;
  border:1px solid transparent;
  border-radius:0;
  padding:8px 11px;
  color:var(--fg);
  background:transparent;
  font-family:'Space Mono',monospace;
  font-size:9px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.wall-filter:hover,.wall-filter:focus-visible{border-color:var(--fg);outline:none;}
.wall-filter.is-active{color:var(--bg);background:var(--fg);border-color:var(--fg);}
.wall-count{flex:0 0 auto;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;}
.wall-count b{font-family:'Archivo Black',sans-serif;font-size:18px;letter-spacing:-.04em;margin-right:5px;}

.living-wall{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:clamp(12px,1.5vw,24px);
  padding:0 0 clamp(40px,6vw,90px);
}

.wall-item{
  margin:0;
  min-width:0;
  min-height:0;
  aspect-ratio:16/11;
  opacity:1;
  transition:opacity .5s cubic-bezier(.16,.8,.3,1),filter .5s cubic-bezier(.16,.8,.3,1),transform .5s cubic-bezier(.16,.8,.3,1);
}
.wall-item[hidden]{display:none !important;}
.living-wall.is-reflowing .wall-item{opacity:.18;transform:translateY(12px);}
.wall-card{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  width:100%;
  height:100%;
  color:inherit;
  text-decoration:none;
}
.wall-media{
  position:relative;
  display:block;
  width:100%;
  min-height:0;
  height:100%;
  margin:0;
  overflow:hidden;
  background:rgba(127,127,127,.08);
}
.wall-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border:1px solid transparent;
  pointer-events:none;
  transition:border-color .25s ease;
}
.wall-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:grayscale(1) contrast(1.04);
  transform:scale(1.001);
  transform-origin:center;
  transition:filter .55s cubic-bezier(.16,.8,.3,1),transform .75s cubic-bezier(.16,.8,.3,1);
}
.wall-media-index{
  position:absolute;
  z-index:3;
  top:10px;
  left:10px;
  color:#fff;
  mix-blend-mode:difference;
  font-family:'Space Mono',monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
}
.wall-badges{position:absolute;z-index:3;right:10px;bottom:10px;display:flex;gap:5px;}
.wall-badge{padding:5px 7px;color:#fff;background:#000;font-family:'Space Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.08em;line-height:1;}
.wall-caption{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"index title open" ". meta open";
  column-gap:12px;
  row-gap:7px;
  align-items:start;
  padding:13px 0 0;
  color:#fff;
  border-top:1px solid currentColor;
  mix-blend-mode:difference;
}
.wall-caption > *{color:inherit;mix-blend-mode:normal;}
.wall-project-index{grid-area:index;padding-top:4px;font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.08em;}
.wall-title{grid-area:title;margin:0;font-family:'Archivo Black',sans-serif;font-size:clamp(19px,2.15vw,37px);line-height:.86;letter-spacing:-.055em;text-transform:uppercase;overflow-wrap:anywhere;}
.wall-meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:5px 8px;margin:0;font-family:'Space Mono',monospace;font-size:8px;line-height:1.45;letter-spacing:.04em;text-transform:uppercase;opacity:.72;}
.wall-open{grid-area:open;align-self:center;font-family:'Space Mono',monospace;font-size:18px;line-height:1;transition:transform .3s ease;}

@media (hover:hover){
  .living-wall:has(.wall-item:hover) .wall-item:not(:hover){opacity:.34;filter:blur(1.7px) grayscale(1);}
  .wall-card:hover .wall-media img{filter:grayscale(0) contrast(1);transform:scale(1.018);}
  .wall-card:hover .wall-media::after{border-color:#fff;mix-blend-mode:difference;}
  .wall-card:hover .wall-open{transform:translate(4px,-4px);}
}

/* ---------- Requested mobile-only corrections ---------- */
@media (max-width:1023px){
  .wall-toolbar{align-items:flex-start;margin-bottom:44px;padding:12px 0;}
  .wall-filters{flex-wrap:nowrap;max-width:calc(100vw - 88px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;}
  .wall-filters::-webkit-scrollbar{display:none;}
  .wall-filter{flex:0 0 auto;padding:8px 9px;}
  .wall-count{padding-top:5px;}
  .living-wall{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  .wall-title{font-size:clamp(15px,4.8vw,24px);}
  .wall-caption{grid-template-columns:auto 1fr auto;column-gap:7px;padding-top:10px;}
  .wall-meta{font-size:7px;gap:3px 5px;}
  /* Explicitly coloured fixed controls on mobile. They no longer depend on
     difference blending; every other button keeps the v24 behaviour. */
  html:not([data-theme="light"]) body #to-contact.to-contact,
  html:not([data-theme="light"]) body #back-to-top.back-to-top{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    background:#050506 !important;
    border-color:#fff !important;
    mix-blend-mode:normal !important;
    isolation:isolate !important;
  }
  html:not([data-theme="light"]) body #to-contact.to-contact svg{
    color:#fff !important;
    stroke:#fff !important;
  }
  html[data-theme="light"] body #to-contact.to-contact,
  html[data-theme="light"] body #back-to-top.back-to-top{
    color:#09090a !important;
    -webkit-text-fill-color:#09090a !important;
    background:#fff !important;
    border-color:#09090a !important;
    mix-blend-mode:normal !important;
    isolation:isolate !important;
  }
  html[data-theme="light"] body #to-contact.to-contact svg{
    color:#09090a !important;
    stroke:#09090a !important;
  }

  /* Sketchbook stays on one line and now retains a real side gutter on the
     narrowest phones. */
  #view-detail .detail-hero.detail-hero-sketchbook + .detail-hero-copy-below h1{
    max-width:100% !important;
    font-size:clamp(36px,10.8vw,62px) !important;
    line-height:.84 !important;
    letter-spacing:-.065em !important;
    white-space:nowrap;
  }

  /* Legal and privacy panels use the available dynamic viewport instead of
     enforcing the desktop square. The panel is the only scroll surface, so
     the close button and the final paragraph always remain reachable. */
  body .legal-modal.open{
    display:flex !important;
    align-items:stretch;
    justify-content:stretch;
    padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));
    box-sizing:border-box;
    overflow:hidden;
  }
  body .legal-modal .legal-box{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    transform:none !important;
    width:100% !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom))) !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    padding:52px 22px 28px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    box-sizing:border-box;
    -webkit-overflow-scrolling:touch;
  }
  body :is(#legal-modal,#privacy-modal) .legal-content{
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }
  body .legal-modal .legal-close{position:sticky !important;float:right;top:0 !important;right:0 !important;margin:-37px -8px 4px 0;z-index:2;}
}

@media (max-width:767px){
  .living-wall{grid-template-columns:minmax(0,1fr);gap:20px;}
  .wall-item{aspect-ratio:4/3;}
  .wall-media img{filter:grayscale(0) contrast(1);}
}

@media (max-width:520px){
  .wall-toolbar{gap:10px;}
  .wall-count{font-size:0;}
  .wall-count b{font-size:16px;margin:0;}
  .living-wall{
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }
  .wall-caption{grid-template-columns:1fr auto;grid-template-areas:"title open" "meta meta";}
  .wall-project-index{display:none;}
  .wall-title{font-size:clamp(16px,5.1vw,23px);}
  .wall-open{font-size:15px;}
  .wall-media-index{top:7px;left:7px;font-size:7px;}
  .wall-badges{right:7px;bottom:7px;}
  .wall-badge{padding:4px 5px;font-size:6px;}
}

@media (prefers-reduced-motion:reduce){
  .living-wall,
  .living-wall *{
    animation-duration:.01ms !important;
    animation-delay:0s !important;
    transition-duration:.01ms !important;
  }
}

/* ===== v36 — "Autres explorations" : filtres solides / compteur en difference ===== */
/* scope #view-home pour battre la règle globale '#view-home *{color:#fff}' */
/* Filtres TOUT/TRANSPORT/PRODUIT : blanc en nuit, noir en jour (solide, pas de halo à gérer). */
#view-home .wall-filter{mix-blend-mode:normal !important;color:#fff !important;background:transparent !important;}
[data-theme="light"] #view-home .wall-filter{color:#0d0d0f !important;}
#view-home .wall-filter.is-active{color:var(--bg) !important;background:var(--fg) !important;border-color:var(--fg) !important;}
#view-home .wall-filter:hover,#view-home .wall-filter:focus-visible{border-color:currentColor !important;}
/* Compteur "10 projets" : en DIFFERENCE => reste lisible même dans le halo lumineux du fond. */
#view-home .wall-count{color:#fff !important;mix-blend-mode:difference !important;}
#view-home .wall-count b{color:#fff !important;mix-blend-mode:normal !important;}

/* ===== Bandeau Prestations : inversion dynamique du vrai fond du site =====
   La section ne possède plus d'image ni de couleur de fond autonome. Cette
   couche blanche en mode difference inverse directement le grain et le halo
   déjà présents derrière elle : leurs coordonnées et leur mouvement restent
   donc parfaitement continus avec le reste de la page. */
#services-summary{
  background:transparent !important;
  background-image:none !important;
  isolation:auto !important;
}
#services-summary::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:auto;
  pointer-events:none;
  background:#fff !important;
  background-image:none !important;
  opacity:1;
  mix-blend-mode:difference !important;
}
/* ==========================================================================
   r3 — CORRECTIFS DÉFINITIFS (battent les règles "double-classe" de typography.polish)
   ========================================================================== */

/* (A) COMPTEUR "10 projets" — .wall-toolbar a z-index:5 (contexte d'empilement) qui
   empêchait le mix-blend-mode:difference d'atteindre le grain du fond. On le neutralise :
   la difference se calcule alors bien contre le grain et s'inverse partout (halo compris). */
#view-home .wall-toolbar{ z-index:auto !important; isolation:auto !important; }

/* (B) BOUTON "Voir tous les services" — le bloc #view-home .btn-view-all.btn-view-all
   (spécificité 1,2,0 + -webkit-text-fill-color) forçait le bouton sur le thème GLOBAL.
   On le bat avec une spécificité supérieure (1,2,1) et on recolle le contraste sur le
   fond INVERSÉ de la section, en pilotant aussi -webkit-text-fill-color. */
/* NUIT (fond de section CLAIR) : cadre + texte NOIRS, fond transparent */
#services-summary a.btn-view-all.btn-view-all{
  color:#0d0d0f !important; -webkit-text-fill-color:#0d0d0f !important;
  border-color:#0d0d0f !important; background:transparent !important; mix-blend-mode:normal !important;
}
#services-summary a.btn-view-all.btn-view-all *{
  color:#0d0d0f !important; -webkit-text-fill-color:#0d0d0f !important; mix-blend-mode:normal !important;
}
/* JOUR (fond de section SOMBRE) : cadre + texte BLANCS, fond transparent */
[data-theme="light"] #services-summary a.btn-view-all.btn-view-all{
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  border-color:#fff !important; background:transparent !important;
}
[data-theme="light"] #services-summary a.btn-view-all.btn-view-all *{
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
@media (hover:hover){
  /* NUIT survol : fond NOIR, texte BLANC */
  #services-summary a.btn-view-all.btn-view-all:hover{
    background:#0d0d0f !important; border-color:#0d0d0f !important;
    color:#fff !important; -webkit-text-fill-color:#fff !important;
  }
  #services-summary a.btn-view-all.btn-view-all:hover *{
    color:#fff !important; -webkit-text-fill-color:#fff !important;
  }
  /* JOUR survol : fond BLANC, texte NOIR */
  [data-theme="light"] #services-summary a.btn-view-all.btn-view-all:hover{
    background:#fff !important; border-color:#fff !important;
    color:#0d0d0f !important; -webkit-text-fill-color:#0d0d0f !important;
  }
  [data-theme="light"] #services-summary a.btn-view-all.btn-view-all:hover *{
    color:#0d0d0f !important; -webkit-text-fill-color:#0d0d0f !important;
  }
}
/* focus clavier : aligné sur le survol pour ne pas laisser le bloc d'origine reprendre la main */
#services-summary a.btn-view-all.btn-view-all:focus-visible{
  background:#0d0d0f !important; border-color:#0d0d0f !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
[data-theme="light"] #services-summary a.btn-view-all.btn-view-all:focus-visible{
  background:#fff !important; border-color:#fff !important;
  color:#0d0d0f !important; -webkit-text-fill-color:#0d0d0f !important;
}

/* ============================================================
   Modifs client — formulaire / prestations / bandeau accueil
   ============================================================ */

/* (7+8) Formulaire : texte en couleur EXPLICITE par thème (jamais blanc-sur-blanc,
   y compris les mots signalés par le correcteur), tout en gardant le soulignement
   rouge du correcteur. Bordure des champs recolorée par thème (sinon invisible en jour). */
.msg-form input,.msg-form textarea{
  color:#f4f3f1 !important; -webkit-text-fill-color:#f4f3f1 !important;
  mix-blend-mode:normal !important;
  border-bottom-color:rgba(244,243,241,0.40) !important;
}
[data-theme="light"] .msg-form input,[data-theme="light"] .msg-form textarea{
  color:#0d0d0f !important; -webkit-text-fill-color:#0d0d0f !important;
  border-bottom-color:rgba(13,13,15,0.35) !important;
}
.msg-form input::placeholder,.msg-form textarea::placeholder{
  color:#f4f3f1 !important; -webkit-text-fill-color:#f4f3f1 !important; opacity:.5 !important;
}
[data-theme="light"] .msg-form input::placeholder,[data-theme="light"] .msg-form textarea::placeholder{
  color:#0d0d0f !important; -webkit-text-fill-color:#0d0d0f !important; opacity:.5 !important;
}
/* (7) Auto-remplissage : on supprime le surlignage gris et on garde un texte lisible */
.msg-form input:-webkit-autofill,
.msg-form input:-webkit-autofill:hover,
.msg-form input:-webkit-autofill:focus,
.msg-form input:-webkit-autofill:active{
  -webkit-text-fill-color:#f4f3f1 !important;
  -webkit-box-shadow:0 0 0 40px transparent inset !important;
  box-shadow:0 0 0 40px transparent inset !important;
  caret-color:#f4f3f1;
  transition:background-color 99999s ease 0s;
}
[data-theme="light"] .msg-form input:-webkit-autofill,
[data-theme="light"] .msg-form input:-webkit-autofill:hover,
[data-theme="light"] .msg-form input:-webkit-autofill:focus,
[data-theme="light"] .msg-form input:-webkit-autofill:active{
  -webkit-text-fill-color:#0d0d0f !important;
  caret-color:#0d0d0f;
}

/* (13) « Nous contacter » (ex-« forfait ») souligné dans les cartes de prix */
.pc-unit[data-i18n="logo.perProject"]{ text-decoration:underline; text-underline-offset:2px; }

/* (18) Bandeau Prestations accueil : texte à gauche, grille des 7 prestations à droite */
#services-summary .services-summary-inner{
  position:relative;
  /* Aucun contexte d'empilement ici : les textes et traits en difference
     doivent pouvoir se mélanger avec le rectangle inversé placé derrière. */
  z-index:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(480px,660px);
  grid-template-areas:"head grid" "btn grid";
  column-gap:56px; row-gap:34px;
  align-items:center;
}
#services-summary .services-summary-inner > .section-head{ grid-area:head; align-self:end; margin:0; }
#services-summary .services-summary-inner > .btn-view-all{ grid-area:btn; align-self:start; justify-self:start; }
#services-summary .home-svc-grid{
  grid-area:grid; align-self:center; justify-self:center; margin:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,clamp(100px,8vw,122px));
  gap:12px; width:100%; max-width:660px;
}
/* Les cases reprennent EXACTEMENT le style .presta-select-card (bordure var(--line), déjà
   inversée dans le bandeau ; texte mis en difference par difference.js comme sur la page
   Prestations). On n'ajuste QUE la taille et la disposition. */
#services-summary .home-svc-grid .presta-select-card{ aspect-ratio:auto; padding:14px; }
/* Lecture linéaire : 01–02–03 / 04–05–06 / 07–08. 8 cases = flux naturel, aucun override. */
@media (max-width:1023px){
  #services-summary .services-summary-inner{ grid-template-columns:1fr; grid-template-areas:"head" "grid" "btn"; }
  #services-summary .home-svc-grid{ width:100%; max-width:660px; justify-self:center; }
}
@media (max-width:620px){
  #services-summary .home-svc-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-rows:clamp(96px,28vw,116px);
    max-width:420px;
  }
  /* 8 cases : flux naturel en 2 colonnes (4 lignes), aucun override. */
}

/* Témoignages : texte en couleur explicite par thème (pas de difference) → les emojis
   restent naturels (jaunes) au lieu d'être inversés en bleu. Couvre la page Avis et
   l'aperçu de l'accueil, enfants inclus, pour battre '#view-* *{color:#fff}'. */
#view-testimonials .tc-text, #view-testimonials .tc-text *,
#view-home .tc-text, #view-home .tc-text *{
  mix-blend-mode:normal !important; color:#f4f3f1 !important;
}
[data-theme="light"] #view-testimonials .tc-text, [data-theme="light"] #view-testimonials .tc-text *,
[data-theme="light"] #view-home .tc-text, [data-theme="light"] #view-home .tc-text *{
  color:#0d0d0f !important;
}

/* Bouton « Voir plus / moins d'avis » : en difference pour rester lisible dans les deux modes
   (il était forcé en couleur pleine par typography.css et disparaissait en mode jour). */
#view-testimonials .testimonial-toggle, #view-home .testimonial-toggle{
  color:#fff !important; mix-blend-mode:difference !important;
}
#view-testimonials .testimonial-toggle *, #view-home .testimonial-toggle *{
  color:#fff !important; mix-blend-mode:normal !important;
}

/* Cartes Prestations de l'accueil : exactement le composant de la page
   Prestations, uniquement redisposé en 2 colonnes / 4 rangées. Aucune couche,
   aucun filtre et aucun mode de fusion ne couvre la surface des cartes : le
   grain du bandeau reste donc intégralement visible à travers elles. */
#services-summary .home-svc-grid{
  align-items:stretch;
  background:transparent !important;
  background-image:none !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  mix-blend-mode:normal !important;
  isolation:auto !important;
  contain:none !important;
  will-change:auto !important;
}
#services-summary .home-svc-grid .presta-select-card,
#services-summary .home-svc-grid .presta-select-card:hover,
#services-summary .home-svc-grid .presta-select-card:focus-visible,
#services-summary .home-svc-grid .presta-select-card.active{
  height:auto;
  min-height:0;
  aspect-ratio:auto !important;
  align-self:stretch;
  overflow:visible;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  position:relative;
  border:var(--construction-rule,1px) solid transparent !important;
  box-shadow:none !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  mix-blend-mode:normal !important;
  isolation:auto !important;
  contain:none !important;
  will-change:auto !important;
}
#services-summary .home-svc-grid .presta-select-card::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  inset:-1px;
  box-sizing:border-box;
  pointer-events:none;
  background:transparent !important;
  border:var(--construction-rule,1px) solid #fff !important;
  mix-blend-mode:difference !important;
  z-index:auto;
}
#services-summary .home-svc-grid .presta-select-card::after{
  content:none !important;
  display:none !important;
}
#services-summary .home-svc-grid .presta-select-card .psc-num,
#services-summary .home-svc-grid .presta-select-card .psc-label{
  position:relative;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}

/* Le bloc éditorial de gauche possède déjà son animation reveal. La couleur
   et la fusion sont portées par ce bloc unique, tandis que ses descendants
   restent neutres : une seule inversion, sans texte blanc intermédiaire. */
#services-summary .section-head > .reveal{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}
#services-summary .section-head > .reveal *{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  mix-blend-mode:normal !important;
}
#services-summary .home-svc-grid .presta-select-card .psc-label{
  font-family:var(--type-display);
  font-size:clamp(12px,1.05vw,17px);
  font-weight:650;
  line-height:1;
  letter-spacing:-.02em;
}

/* Nike Watch — compositions dédiées : les deux lignes restent expressives,
   mais ne se chevauchent plus et chaque mot conserve une vraie respiration. */
.sc-cap-hero .sc-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px,1vw,22px);
  line-height:.78;
}
.sc-cap-hero .sc-title .sc-title-line{
  display:block;
  line-height:.78;
}
.sc-cap-final .sc-title-lg{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px,1.1vw,24px);
  line-height:.8;
}
.sc-cap-final .sc-title-lg-lead{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.22em;
  white-space:nowrap;
}
.sc-cap-final .sc-title-lg-lead > span,
.sc-cap-final .sc-title-lg-focus{
  display:block;
  line-height:.8;
}

/* ======================================================================
   DOSSIERS TECHNIQUES — COMPOSITION MOBILE
   Téléphone uniquement : le contenu abandonne les deux colonnes serrées
   pour deux séquences éditoriales lisibles (caractéristiques, puis points
   clés). Le desktop et la tablette conservent strictement leur composition.
   ====================================================================== */
@media (max-width:767px){
  /* Marges de lecture : aucun texte ne touche les bords du téléphone. */
  #view-detail .ed-section.ed-specs{
    padding:68px 36px 78px !important;
  }
  #view-detail .fw-specs-aligned{
    margin:64px 12px 0 !important;
    padding-bottom:76px !important;
  }

  /* Une seule colonne, avec réordonnancement visuel des éléments :
     titre > caractéristiques > points clés > logiciels. */
  #view-detail .ed-specs-grid,
  #view-detail .fw-specs-aligned{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }
  #view-detail :is(.ed-specs-grid,.fw-specs-aligned) > :is(.ed-specs-head,.fw-specs-head):first-child{
    order:1;
    padding:0 0 28px !important;
    align-items:flex-start;
  }
  #view-detail :is(.ed-specs-grid,.fw-specs-aligned) > :is(.ed-spec-row,.fw-spec-row){order:2;}
  #view-detail :is(.ed-specs-grid,.fw-specs-aligned) > :is(.ed-specs-head,.fw-specs-head):nth-child(2){
    order:3;
    padding:48px 0 16px !important;
    align-items:flex-start;
  }
  #view-detail :is(.ed-specs-grid,.fw-specs-aligned) > :is(.ed-feat-row,.fw-feat-row){order:4;}
  #view-detail :is(.ed-specs-grid,.fw-specs-aligned) > .ed-specs-cell:nth-last-child(2),
  #view-detail :is(.ed-specs-grid,.fw-specs-aligned) > .fw-specs-cell:nth-last-child(2){display:none !important;}
  #view-detail :is(.ed-specs-grid,.fw-specs-aligned) > :is(.ed-specs-cell,.fw-specs-cell):last-child{
    order:5;
    padding-top:26px;
  }

  /* Titre plus présent, mais calibré pour rester entièrement dans l'écran. */
  #view-detail :is(.ed-h2,.fw-h2){
    font-size:clamp(32px,10.5vw,40px) !important;
    line-height:.92 !important;
    letter-spacing:-.045em !important;
  }
  #view-detail :is(.ed-eyebrow,.fw-eyebrow){
    font-size:10px !important;
    line-height:1.3 !important;
    letter-spacing:.12em !important;
    margin-bottom:15px !important;
  }
  #view-detail :is(.ed-feature-tag,.fw-feature-tag){
    font-size:10px !important;
    line-height:1.2 !important;
    letter-spacing:.08em !important;
    padding:9px 12px !important;
  }

  /* Caractéristiques : libellé et valeur possèdent chacun leur vraie zone. */
  #view-detail :is(.ed-spec-row,.fw-spec-row){
    width:100%;
    display:grid !important;
    grid-template-columns:minmax(82px,.72fr) minmax(0,1.28fr);
    align-items:start !important;
    column-gap:18px;
    padding:18px 0 !important;
    font-size:13px !important;
    line-height:1.42 !important;
    letter-spacing:0 !important;
  }
  #view-detail :is(.ed-spec-row,.fw-spec-row) .k{
    font-size:10px !important;
    line-height:1.45 !important;
    letter-spacing:.055em !important;
    overflow-wrap:anywhere;
  }
  #view-detail :is(.ed-spec-row,.fw-spec-row) .v{
    min-width:0;
    text-align:left !important;
    font-size:13px !important;
    line-height:1.42 !important;
    overflow-wrap:anywhere;
  }

  /* Points clés : numéro isolé dans une colonne stable et texte respirant. */
  #view-detail :is(.ed-feat-row,.fw-feat-row){
    width:100%;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr);
    align-items:start !important;
    column-gap:14px !important;
    padding:18px 0 !important;
    font-size:14px !important;
    line-height:1.42 !important;
  }
  #view-detail :is(.ed-feat-row,.fw-feat-row) .n{
    display:block;
    font-size:10px !important;
    line-height:1.7 !important;
    letter-spacing:.04em;
  }

  /* Outils / logiciels : boutons plus lisibles et mieux espacés. */
  #view-detail .ed-pipeline,
  #view-detail .detail-side .pipe-list{
    gap:8px !important;
    margin-top:0 !important;
  }
  #view-detail .ed-pipeline span,
  #view-detail :is(.detail-side,.fw-specs-aligned) .pipe-list span{
    font-size:10px !important;
    line-height:1.2 !important;
    padding:9px 11px !important;
  }

  /* Les rares projets utilisant encore le dossier latéral classique suivent
     la même densité et les mêmes marges que les pages éditoriales. */
  #view-detail .detail-body .detail-side{margin-inline:12px;}
  #view-detail .detail-side .side-block{padding:28px 0 !important;}
  #view-detail .detail-side .side-label{
    margin-bottom:18px;
    font-size:10px;
    letter-spacing:.1em;
  }
  #view-detail .detail-side .spec-line{
    display:grid;
    grid-template-columns:minmax(82px,.72fr) minmax(0,1.28fr);
    gap:18px;
    align-items:start;
    padding:16px 0;
    font-size:13px;
    line-height:1.42;
  }
  #view-detail .detail-side .spec-line .k{font-size:10px;line-height:1.45;}
  #view-detail .detail-side .spec-line .v{text-align:left;overflow-wrap:anywhere;}
  #view-detail .detail-side .feat-list li{
    gap:14px;
    padding:15px 0;
    font-size:14px;
    line-height:1.42;
  }
}