/*
 * Couche typographique éditoriale — 2026
 *
 * Ce fichier ne touche ni aux grilles, ni aux médias, ni aux animations.
 * Il concentre uniquement la police, l'échelle, le rythme et les effets de
 * mise au point inspirés des affiches de référence.
 */

:root {
  --type-display: "Archivo", Arial, Helvetica, sans-serif;
  --type-heavy: "Archivo Black", "Archivo", Arial, Helvetica, sans-serif;
  --type-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --type-tight: -0.075em;
  --type-tight-soft: -0.045em;
  --type-focus-blur: 3.5px;
}

body,
button,
input,
textarea {
  font-family: var(--type-display);
}

.mono,
.tag,
.label,
.idx,
.project-tags,
.stack-tags,
.pipeline,
.fw-eyebrow,
.ed-eyebrow,
.sc-eyebrow,
.project-view-link,
.stack-link,
.btn-view-all,
.back-link,
.ed-back-btn,
.sc-back,
.toggle-btn,
nav.links,
.site-footer,
.form-status {
  font-family: var(--type-mono);
}

h1,
h2,
h3,
.hero-title,
.stack-title,
.mw-name,
.about-company-name,
.about-name,
.ed-hero-title,
.sc-title,
.sc-title-lg,
.fw-h2,
.ed-h2 {
  font-family: var(--type-display);
  font-weight: 850;
  font-synthesis: none;
  text-wrap: balance;
}

/* Accueil — grandes masses typographiques, sans modifier le placement. */
h1.hero-title {
  max-width: 12ch;
  font-size: clamp(68px, 12.8vw, 188px);
  font-weight: 900;
  line-height: 0.72;
  letter-spacing: -0.09em;
  text-transform: uppercase;
}

h1.hero-title em {
  display: inline-block;
  font-weight: 360;
  letter-spacing: -0.075em;
  filter: blur(var(--type-focus-blur));
}

.hero-sub {
  max-width: 48ch;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.48;
  letter-spacing: -0.018em;
}

.section-head h2 {
  max-width: 12ch;
  font-size: clamp(54px, 8.8vw, 132px);
  font-weight: 850;
  line-height: 0.74;
  letter-spacing: -0.078em;
}

.section-head h2 em,
.faq-head h2 em,
.contact-inner h2 em {
  display: inline-block;
  font-weight: 330;
  filter: blur(3px);
}

.section-head .tag,
.tag {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Projets de l'accueil — même construction, hiérarchie plus radicale. */
.project-info .idx {
  font-family: var(--type-display);
  font-size: clamp(38px, 5.2vw, 76px);
  font-weight: 900;
  line-height: 0.68;
  letter-spacing: -0.08em;
}

.stack-title,
.project-info h3 {
  font-size: clamp(42px, 5.4vw, 76px);
  font-weight: 850;
  line-height: 0.78;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

/* Compteur des six projets sélectionnés — chiffre net au premier plan,
   séquence suivante de plus en plus diffuse dans la profondeur. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stack-counter {
  position: relative;
  height: 100%;
  min-height: 280px;
  pointer-events: none;
  mix-blend-mode: difference;
}

.stack-counter-track {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.stack-counter-digit {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: block;
  color: #fff !important;
  font-family: var(--type-heavy);
  font-size: clamp(126px, 11.8vw, 190px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
  line-height: 0.7;
  letter-spacing: -0.11em;
  opacity: 0;
  filter: blur(24px);
  transform: translate(-50%, -50%) translate(8px, 90px) scale(0.68);
  transform-origin: 50% 50%;
  will-change: transform, filter, opacity;
  transition:
    transform 720ms cubic-bezier(.16,.8,.3,1),
    filter 720ms cubic-bezier(.16,.8,.3,1),
    opacity 520ms ease;
}

.stack-counter-digit.is-active {
  z-index: 6;
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) translate(0, 0) scale(1);
}

.stack-counter-digit.is-past {
  z-index: 0;
  opacity: 0;
  filter: blur(3px);
  transform: translate(-50%, -50%) translate(-10px, -72px) scale(1.08);
}

.stack-counter-digit.is-future[data-depth="1"] {
  z-index: 5;
  opacity: 0.64;
  filter: blur(4px);
  transform: translate(-50%, -50%) translate(0, 52px) scale(1.08);
}

.stack-counter-digit.is-future[data-depth="2"] {
  z-index: 4;
  opacity: 0.3;
  filter: blur(12px);
  transform: translate(-50%, -50%) translate(-2px, 83px) scale(0.96);
}

.stack-counter-digit.is-future[data-depth="3"] {
  z-index: 3;
  opacity: 0.14;
  filter: blur(18px);
  transform: translate(-50%, -50%) translate(5px, 91px) scale(0.86);
}

.stack-counter-digit.is-future[data-depth="4"] {
  z-index: 2;
  opacity: 0.06;
  filter: blur(26px);
  transform: translate(-50%, -50%) translate(10px, 108px) scale(0.78);
}

.stack-pitch,
.project-pitch {
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.28;
  letter-spacing: -0.025em;
}

.mw-item .mw-name {
  font-family: var(--type-display);
  font-size: clamp(26px, 3.7vw, 54px);
  font-weight: 850;
  line-height: 0.84;
  letter-spacing: -0.06em;
}

.mw-item .mw-cat,
.mw-item .mw-year,
.project-tags span,
.stack-tags span {
  font-size: 9px;
  letter-spacing: 0.09em;
}

/* Méthode et numérotations — chiffres utilisés comme éléments éditoriaux. */
.method-step .ms-num {
  font-family: var(--type-display);
  min-width: 1.25em;
  font-size: clamp(64px, 9vw, 134px);
  font-weight: 900;
  line-height: 0.62;
  letter-spacing: -0.095em;
}

.method-step .ms-body h3 {
  font-family: var(--type-display);
  font-size: clamp(28px, 4vw, 58px);
  font-weight: 850;
  line-height: 0.84;
  letter-spacing: -0.055em;
}

.faq-q {
  font-size: clamp(18px, 2.25vw, 30px);
  font-weight: 720;
  line-height: 1.08;
  letter-spacing: -0.038em;
}

/* Prestations — les sept entrées restent exactement dans leur grille. */
.presta-select-card .psc-num {
  font-family: var(--type-display);
  font-size: clamp(26px, 3.4vw, 48px);
  font-weight: 900;
  line-height: 0.7;
  letter-spacing: -0.075em;
}

.presta-select-card .psc-label {
  font-family: var(--type-display);
  font-size: clamp(15px, 1.7vw, 24px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.presta-contact-inner h3,
.service-contact h3 {
  font-family: var(--type-display);
  font-size: clamp(38px, 6vw, 88px);
  font-weight: 850;
  line-height: 0.78;
  letter-spacing: -0.07em;
}

.price-card .pc-amount {
  font-family: var(--type-display);
  font-weight: 850;
  letter-spacing: -0.055em;
}

/* Avis, à propos et contact. */
.testimonial-card .tc-quote-mark {
  font-family: var(--type-display);
  font-size: clamp(76px, 9vw, 130px);
  font-weight: 900;
  line-height: 0.5;
  letter-spacing: -0.1em;
}

.testimonial-card .tc-name {
  font-family: var(--type-display);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 850;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.about-company-name {
  font-family: var(--type-display);
  max-width: 12ch;
  font-size: clamp(52px, 8.8vw, 126px);
  font-weight: 850;
  line-height: 0.68;
  letter-spacing: -0.085em;
}

.about-name {
  font-family: var(--type-display);
  font-size: clamp(48px, 7vw, 102px);
  font-weight: 850;
  line-height: 0.72;
  letter-spacing: -0.075em;
}

.resume-col h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.contact-inner h2 {
  max-width: 10ch;
  font-family: var(--type-display);
  font-size: clamp(72px, 13vw, 196px);
  font-weight: 850;
  line-height: 0.66;
  letter-spacing: -0.09em;
}

/* Pages projet — médias et compositions restent intacts. */
.detail-hero-content h1,
.fw-header h1,
.ed-hero-title,
.sc-title,
.sc-title-lg {
  font-family: var(--type-display);
  font-size: clamp(74px, 14vw, 214px);
  font-weight: 900;
  line-height: 0.66;
  letter-spacing: -0.09em;
  text-transform: uppercase;
}

.ed-hero-title.ed-hero-title-sm {
  font-size: clamp(58px, 10vw, 152px);
}

.ed-hero-title em,
.sc-title em {
  display: inline-block;
  font-weight: 330;
  filter: blur(3.5px);
}

.ed-h2,
.fw-h2 {
  font-family: var(--type-display);
  font-size: clamp(40px, 6.8vw, 98px);
  font-weight: 850;
  line-height: 0.75;
  letter-spacing: -0.068em;
}

.ed-stat-num,
.sc-big {
  font-family: var(--type-display);
  font-weight: 900;
  letter-spacing: -0.105em;
}

.ed-footer-nav b {
  font-family: var(--type-display);
  font-weight: 850;
  line-height: 0.78;
  letter-spacing: -0.065em;
}

/* État clavier visible, sans modifier le dessin au repos. */
.skip-link {
  position: fixed;
  z-index: 10000;
  top: 10px;
  left: 10px;
  transform: translateY(-180%);
  padding: 10px 14px;
  background: var(--fg);
  color: var(--bg);
  font: 700 11px/1 var(--type-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

@media (max-width: 1023px) {
  h1.hero-title {
    font-size: clamp(58px, 16.5vw, 116px);
    line-height: 0.75;
  }

  .section-head h2 {
    font-size: clamp(48px, 13vw, 92px);
    line-height: 0.76;
  }

  .project-info .idx {
    font-size: clamp(34px, 10vw, 58px);
  }

  .stack-counter {
    min-height: 190px;
  }

  .stack-counter-digit {
    font-size: clamp(78px, 20vw, 118px);
  }

  .stack-title,
  .project-info h3 {
    font-size: clamp(40px, 12vw, 72px);
  }

  .method-step .ms-num {
    font-size: clamp(52px, 16vw, 92px);
  }

  .method-step .ms-body h3 {
    font-size: clamp(25px, 7vw, 42px);
  }

  .contact-inner h2 {
    font-size: clamp(62px, 18vw, 128px);
  }

  .detail-hero-content h1,
  .fw-header h1,
  .ed-hero-title,
  .sc-title,
  .sc-title-lg {
    font-size: clamp(62px, 19vw, 132px);
    line-height: 0.68;
  }

  .ed-hero-title.ed-hero-title-sm {
    font-size: clamp(48px, 14.5vw, 104px);
  }

  .ed-h2,
  .fw-h2 {
    font-size: clamp(34px, 10vw, 64px);
  }
}

@media (max-width: 620px) {
  :root {
    --type-focus-blur: 2.3px;
  }

  /* Les mêmes partis pris, ramenés à une largeur réellement mobile. */
  h1.hero-title {
    max-width: none;
    font-size: clamp(46px, 13vw, 58px);
    line-height: 0.76;
  }

  .stack-title {
    font-size: clamp(26px, 8vw, 34px);
  }

  header .brand {
    min-width: 0;
    gap: 7px;
  }

  header .brand img {
    height: 24px;
  }

  header .brand span {
    max-width: 84px;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 7px;
    line-height: 0.95;
    letter-spacing: 0.02em;
  }

  .mw-item-inner {
    gap: 12px;
  }

  .mw-item .mw-name {
    min-width: 0;
    flex-grow: 1.25;
    overflow-wrap: normal;
    font-size: clamp(15px, 4.3vw, 17px);
    line-height: 0.9;
  }

  .mw-item .mw-cat {
    min-width: 0;
    flex-grow: 0.75;
    overflow-wrap: anywhere;
    font-size: 8px;
    line-height: 1.25;
  }

  .mw-item .mw-year {
    font-size: 8px;
  }

  .mw-item .mw-arrow {
    display: none;
  }

  .section-head h2 em,
  .faq-head h2 em,
  .contact-inner h2 em,
  .ed-hero-title em,
  .sc-title em {
    filter: blur(2.2px);
  }

  .about-company-name {
    font-size: clamp(44px, 14vw, 76px);
  }

  .about-name {
    font-size: clamp(42px, 13vw, 70px);
  }

  .presta-select-card .psc-num {
    font-size: 28px;
  }

  .presta-select-card .psc-label {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-counter-digit,
  h1.hero-title em,
  .section-head h2 em,
  .faq-head h2 em,
  .contact-inner h2 em,
  .ed-hero-title em,
  .sc-title em {
    transition: none;
  }
}

/* ============ COMPTEUR v4 : décalage gauche et respiration avec le texte ============ */
#work .stack-counter{mix-blend-mode:normal !important;}
#work .stack-counter-digit{color:#fff !important;}
[data-theme="light"] #work .stack-counter-digit{color:#0d0d0f !important;}

@media (min-width:1024px){
  .stack-counter-track{
    inset:0 clamp(32px,2vw,38px) 0 clamp(-38px,-2vw,-32px);
  }
  .stack-counter-digit{
    font-size:clamp(300px,23vw,400px);
    line-height:0.7;
  }
}

/* ============ CONTRASTE v5 : typographie, commandes et pages secondaires ============ */
/* "Autres explorations" conserve sa composition mais redevient parfaitement net. */
.more-work .section-head h2 em{
  filter:none !important;
}

/* Les commandes rectangulaires utilisent toutes le même contraste explicite.
   Cette solution reste fiable même quand un navigateur isole un bouton natif. */
.btn-view-all,
#services-summary .btn-view-all,
.msg-form button[type="submit"],
#contact .msg-form button[type="submit"],
.back-to-top,
.to-contact,
#work .stack-nav-btn,
.toggle-btn{
  color:var(--fg) !important;
  background:transparent !important;
  border:1px solid var(--fg) !important;
  mix-blend-mode:normal !important;
  backdrop-filter:none !important;
}

/* Les anciens sélecteurs de la direction d'origine utilisent des identifiants.
   Ces variantes plus précises garantissent donc exactement le même rendu sur
   l'accueil, les prestations, les avis et les commandes flottantes. */
#view-home .btn-view-all,
#view-services .btn-view-all,
#view-testimonials .btn-view-all,
#view-home .msg-form button[type="submit"],
#view-services .msg-form button[type="submit"],
#view-testimonials .msg-form button[type="submit"],
#back-to-top,
#to-contact,
#view-home #work .stack-nav-btn,
header #lang-toggle,
header #theme-toggle{
  color:var(--fg) !important;
  background:transparent !important;
  border-color:var(--fg) !important;
  mix-blend-mode:normal !important;
}
#view-home .btn-view-all *,
#view-services .btn-view-all *,
#view-testimonials .btn-view-all *,
#view-home .msg-form button[type="submit"] *,
#view-services .msg-form button[type="submit"] *,
#view-testimonials .msg-form button[type="submit"] *,
#back-to-top *,
#to-contact *,
#view-home #work .stack-nav-btn *,
header #lang-toggle *,
header #theme-toggle *{
  color:inherit !important;
  mix-blend-mode:normal !important;
}
.btn-view-all *,
#services-summary .btn-view-all *,
.msg-form button[type="submit"] *,
#contact .msg-form button[type="submit"] *,
.back-to-top *,
.to-contact *,
#work .stack-nav-btn *,
.toggle-btn *{
  color:inherit !important;
  mix-blend-mode:normal !important;
}
.back-to-top svg,.to-contact svg{
  stroke:currentColor !important;
  fill:none !important;
}
header .burger span{background:var(--fg) !important;}

/* Les boutons textuels conservent leur géométrie, avec la même bascule
   blanc/noir que les commandes encadrées. */
#view-home .faq-q,
#view-home .testimonial-toggle,
#view-testimonials .testimonial-toggle,
footer .footer-legal-link,
#legal-modal .legal-close{
  color:var(--fg) !important;
  mix-blend-mode:normal !important;
}

@media (hover:hover){
  .btn-view-all:hover,
  #services-summary .btn-view-all:hover,
  .msg-form button[type="submit"]:not(:disabled):hover,
  #contact .msg-form button[type="submit"]:not(:disabled):hover,
  .back-to-top:hover,
  .to-contact:hover,
  #work .stack-nav-btn:not(:disabled):hover,
  .toggle-btn:hover{
    color:var(--bg) !important;
    background:var(--fg) !important;
    border-color:var(--fg) !important;
  }
}

/* Bouton retour unique : même position que celui du projet Nike Watch,
   présent sur chaque page secondaire et révélé après le début du scroll. */
#view-detail > .back-link,
#view-services > .back-link,
#view-testimonials > .back-link{
  top:84px !important;
  left:32px !important;
  z-index:95 !important;
  color:var(--fg) !important;
  background:transparent !important;
  border:1px solid var(--fg) !important;
  mix-blend-mode:normal !important;
  backdrop-filter:none !important;
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .25s ease,transform .25s ease,background .2s ease,color .2s ease;
}
#view-detail > .back-link.is-visible,
#view-services > .back-link.is-visible,
#view-testimonials > .back-link.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
@media (hover:hover){
  #view-detail > .back-link:hover,
  #view-services > .back-link:hover,
  #view-testimonials > .back-link:hover{
    color:var(--bg) !important;
    background:var(--fg) !important;
    border-color:var(--fg) !important;
  }
}
@media (max-width:900px){
  #view-detail > .back-link,
  #view-services > .back-link,
  #view-testimonials > .back-link{
    top:70px !important;
    left:18px !important;
  }
}

/* Contraste de toutes les familles de textes utilisées dans les projets.
   Le mélange est appliqué une seule fois par bloc, puis neutralisé sur ses
   enfants afin d'éviter les doubles inversions. Le héros Nike (.sc-stage)
   n'est volontairement visé par aucun de ces sélecteurs. */
#view-detail :is(
  .detail-hero-content,
  .detail-desc,
  .detail-side .side-block,
  .detail-nav a,
  .fw-desc,
  .fw-specs-cell,
  .ed-hero-tag,
  .ed-hero-title,
  .ed-hero-sub,
  .ed-scroll-hint,
  .ed-block-text,
  .ed-specs-cell,
  .ed-quad-stat,
  .ed-callout,
  .ed-3d-overlay,
  .ed-3d-hint,
  .ed-brand-note,
  .ed-footer-nav a,
  .personal-note,
  .video-label,
  .capline
){
  color:#fff !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}
#view-detail :is(
  .detail-hero-content,
  .detail-desc,
  .detail-side .side-block,
  .detail-nav a,
  .fw-desc,
  .fw-specs-cell,
  .ed-hero-tag,
  .ed-hero-title,
  .ed-hero-sub,
  .ed-scroll-hint,
  .ed-block-text,
  .ed-specs-cell,
  .ed-quad-stat,
  .ed-callout,
  .ed-3d-overlay,
  .ed-3d-hint,
  .ed-brand-note,
  .ed-footer-nav a,
  .personal-note,
  .video-label,
  .capline
) *{
  color:inherit !important;
  mix-blend-mode:normal !important;
}

/* ============ FINITIONS v6 : prestations et à propos ============ */
/* La bande Prestations est transparente dans cette direction artistique :
   son bouton doit donc suivre le thème global, comme "Voir tous les sketchs",
   et non les variables inversées historiquement attachées à la section. */
#services-summary .btn-view-all{
  color:#eeeeee !important;
  background:transparent !important;
  border-color:#eeeeee !important;
  mix-blend-mode:normal !important;
}
[data-theme="light"] #services-summary .btn-view-all{
  color:#0d0d0f !important;
  background:transparent !important;
  border-color:#0d0d0f !important;
}
@media (hover:hover){
  #services-summary .btn-view-all:hover{
    color:#0d0d0f !important;
    background:#eeeeee !important;
    border-color:#eeeeee !important;
  }
  [data-theme="light"] #services-summary .btn-view-all:hover{
    color:#eeeeee !important;
    background:#0d0d0f !important;
    border-color:#0d0d0f !important;
  }
}

/* Le nom reste monumental, mais sa largeur optique tient désormais dans le
   viewport aux tailles desktop, tablette et mobile. */
.about-company-name{
  max-width:none;
  font-size:clamp(40px,7.5vw,104px);
}

/* Dégager l'accent du À sans déplacer le grand titre. */
#resume-section .section-head .tag{
  position:relative;
  top:-12px;
}

/* Renforcer uniquement les quatre séparateurs demandés du CV. */
.resume-col h3[data-i18n="about.formationH"],
.resume-col h3[data-i18n="about.experienceH"],
.resume-col h3[data-i18n="about.toolkitH"],
.resume-col h3[data-i18n="about.languagesH"]{
  border-bottom-width:2px !important;
  border-bottom-style:solid !important;
  border-bottom-color:currentColor !important;
}

@media (max-width:640px){
  .about-company-name{
    font-size:clamp(24px,7vw,36px);
  }
  #resume-section .section-head .tag{
    top:-8px;
  }
}

/* ============ DIFFÉRENCE IMMÉDIATE v7 ============
   Le mode difference est désormais porté par le même élément que l'opacité
   d'apparition. Il reste donc actif pendant toute l'animation, et non
   seulement lorsque celle-ci est terminée. */
[data-diff-shell]{
  color:#fff !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}
[data-diff-shell] *,
[data-diff-shell]::before,
[data-diff-shell]::after{
  color:inherit !important;
  mix-blend-mode:normal !important;
}

/* La liste « Autres travaux » contient à la fois une image et du texte :
   son animation ne peut donc pas être mélangée comme un bloc unique. On
   conserve exactement le glissement horizontal, mais avec `left` plutôt
   qu'avec l'opacité/transform qui isolait temporairement les libellés. */
.more-work-list .mw-item.reveal{
  opacity:1 !important;
  transform:none !important;
  transition:padding-left .25s ease,background .25s ease !important;
}
.more-work-list .mw-item.reveal .mw-item-inner{
  position:relative;
  left:-100vw;
  margin-left:0;
  transform:none !important;
  transition:left 1s cubic-bezier(.16,.8,.3,1) !important;
}
.more-work-list .mw-item.reveal.in .mw-item-inner{
  left:0;
}
.more-work-list .mw-item.reveal::after{
  opacity:0;
  transition:opacity .3s ease;
}
.more-work-list .mw-item.reveal.in::after{
  opacity:1;
}

/* Même principe pour les blocs Prestations qui associent texte et image :
   le texte glisse sans couche d'opacité, tandis que l'image garde son fondu. */
.presta-block.reveal:has(.presta-img){
  opacity:1 !important;
  transform:none !important;
}
.presta-block.reveal:has(.presta-img) .presta-text{
  position:relative;
  left:-42px;
  color:#fff !important;
  mix-blend-mode:difference !important;
  transition:left 1s cubic-bezier(.16,.8,.3,1);
}
.presta-block.reveal:has(.presta-img) .presta-block-flex.rev .presta-text{
  left:42px;
}
.presta-block.reveal:has(.presta-img).in .presta-text,
.presta-block.reveal:has(.presta-img).in .presta-block-flex.rev .presta-text{
  left:0;
}
.presta-block.reveal:has(.presta-img) .presta-text *{
  color:inherit !important;
  mix-blend-mode:normal !important;
}
.presta-block.reveal:has(.presta-img) .presta-img{
  opacity:0;
  transition:opacity 1s cubic-bezier(.16,.8,.3,1);
}
.presta-block.reveal:has(.presta-img).in .presta-img{
  opacity:1;
}

/* L'ouverture d'une prestation ne doit pas recréer une couche d'opacité
   autour de tous ses textes. L'expansion verticale reste animée. */
.presta-panel{
  opacity:1 !important;
  transition:max-height .6s cubic-bezier(.16,.8,.3,1) !important;
}

/* Même correction pour les panneaux révélés par interaction : l'ouverture
   reste fluide grâce à la hauteur animée, sans isoler leur typographie. */
.testimonial-preview{
  opacity:1 !important;
  transition:none !important;
}
.testimonial-more{
  opacity:1 !important;
  transition:max-height .6s cubic-bezier(.16,.8,.3,1) !important;
}
.presta-contact{
  opacity:1 !important;
  transition:max-height .5s cubic-bezier(.16,.8,.3,1) !important;
}

/* Les grilles interactives contiennent des cartes, fonds et bordures qui ne
   doivent jamais être inversés avec le texte. Leur apparition utilise donc
   un léger déplacement de mise en page, sans opacité ni transform isolant. */
:is(.presta-selector-grid,.pricing-grid,.process-flow,.testimonial-grid,.service-contact,.toolkit-wrap).reveal{
  position:relative;
  top:28px;
  opacity:1 !important;
  transform:none !important;
  mix-blend-mode:normal !important;
  transition:top 1s cubic-bezier(.16,.8,.3,1) !important;
}
:is(.presta-selector-grid,.pricing-grid,.process-flow,.testimonial-grid,.service-contact,.toolkit-wrap).reveal.in{
  top:0;
}

@media (prefers-reduced-motion:reduce){
  .more-work-list .mw-item.reveal .mw-item-inner{
    left:0;
    transition:none !important;
  }
  .more-work-list .mw-item.reveal::after{
    opacity:1;
    transition:none;
  }
  .presta-block.reveal:has(.presta-img) .presta-text{
    left:0 !important;
    transition:none;
  }
  .presta-block.reveal:has(.presta-img) .presta-img{
    opacity:1;
    transition:none;
  }
  :is(.presta-selector-grid,.pricing-grid,.process-flow,.testimonial-grid,.service-contact,.toolkit-wrap).reveal{
    top:0;
    transition:none !important;
  }
}

/* ============ BANDE ÉDITORIALE v8 ============
   Une grille typographique autonome, nette dans les deux thèmes. Aucun
   soulignement : le repère actif est une case pleine, comme dans un index
   imprimé. Le flou reste un accent de marque et non un défaut de lisibilité. */
:root{
  --header-bg:rgba(8,8,9,.90);
  --header-ink:#f2f2f0;
  --header-line:rgba(242,242,240,.24);
  --header-muted:rgba(242,242,240,.48);
}
[data-theme="light"]{
  --header-bg:rgba(243,243,241,.90);
  --header-ink:#09090a;
  --header-line:rgba(9,9,10,.24);
  --header-muted:rgba(9,9,10,.46);
}

body > header.editorial-header{
  position:fixed;
  top:10px;
  left:12px;
  right:12px;
  width:auto;
  height:72px;
  padding:0;
  display:grid;
  grid-template-columns:minmax(252px,.88fr) minmax(650px,2.35fr) auto;
  align-items:stretch;
  justify-content:stretch;
  gap:0;
  overflow:visible;
  color:var(--header-ink) !important;
  background:var(--header-bg) !important;
  border:1px solid var(--header-ink) !important;
  box-shadow:0 0 0 1px transparent;
  backdrop-filter:blur(14px) saturate(65%);
  -webkit-backdrop-filter:blur(14px) saturate(65%);
  isolation:isolate;
  transition:background-color .3s ease,color .3s ease,box-shadow .3s ease;
}
body > header.editorial-header.is-scrolled{
  box-shadow:8px 8px 0 rgba(0,0,0,.13);
}
[data-theme="light"] body > header.editorial-header.is-scrolled{
  box-shadow:8px 8px 0 rgba(0,0,0,.11);
}

/* L'ancien trait supérieur ressemblait à un surlignage accidentel. */
#progress{
  display:none !important;
}

header.editorial-header .brand{
  min-width:0;
  height:100%;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--header-ink) !important;
  border-right:1px solid var(--header-line);
  mix-blend-mode:normal !important;
}
header.editorial-header .brand-mark{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border:1px solid var(--header-ink);
  overflow:hidden;
}
header.editorial-header .brand img{
  width:auto;
  height:27px;
  filter:none !important;
  transition:filter .3s ease;
}
[data-theme="light"] header.editorial-header .brand img{
  filter:invert(1) !important;
}
header.editorial-header .brand-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  color:inherit !important;
  mix-blend-mode:normal !important;
  white-space:nowrap;
}
header.editorial-header .brand-copy strong{
  font-family:var(--type-display);
  font-size:15px;
  font-weight:900;
  line-height:.85;
  letter-spacing:-.055em;
  color:inherit !important;
}
header.editorial-header .brand-copy small{
  font-family:var(--type-mono);
  font-size:7.5px;
  font-weight:700;
  line-height:1;
  letter-spacing:.11em;
  color:inherit !important;
}
header.editorial-header .brand-focus{
  display:inline-block;
  color:inherit !important;
  filter:blur(1.25px);
  transition:filter .25s ease;
}
header.editorial-header .brand:hover .brand-focus,
header.editorial-header .brand:focus-visible .brand-focus{
  filter:blur(0);
}

header.editorial-header nav.links{
  min-width:0;
  height:100%;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  align-items:stretch;
  gap:0;
  color:var(--header-ink) !important;
}
header.editorial-header nav.links a{
  min-width:0;
  height:100%;
  padding:0 10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
  position:relative;
  overflow:hidden;
  border-right:1px solid var(--header-line);
  color:var(--header-ink) !important;
  background:transparent !important;
  mix-blend-mode:normal !important;
  transition:background-color .22s ease,color .22s ease;
}
header.editorial-header nav.links a::after{
  display:none !important;
  content:none !important;
}
header.editorial-header nav.links a .num{
  margin:0;
  font-family:var(--type-display);
  font-size:18px;
  font-weight:900;
  line-height:.72;
  letter-spacing:-.08em;
  color:inherit !important;
  opacity:.36;
  mix-blend-mode:normal !important;
  transition:opacity .22s ease,filter .22s ease;
}
header.editorial-header nav.links a > span:last-child{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:var(--type-mono);
  font-size:8px;
  font-weight:700;
  line-height:1;
  letter-spacing:.075em;
  white-space:nowrap;
  color:inherit !important;
  mix-blend-mode:normal !important;
}
header.editorial-header nav.links a:hover,
header.editorial-header nav.links a:focus-visible,
header.editorial-header nav.links a[aria-current="page"]{
  color:var(--header-bg) !important;
  background:var(--header-ink) !important;
  outline:none;
}
header.editorial-header nav.links a:hover .num,
header.editorial-header nav.links a:focus-visible .num,
header.editorial-header nav.links a[aria-current="page"] .num{
  opacity:1;
}
header.editorial-header nav.links a[aria-current="page"] .num{
  filter:blur(.55px);
}

header.editorial-header .toggle-group{
  min-width:0;
  height:100%;
  display:flex;
  align-items:stretch;
  gap:0;
  color:var(--header-ink) !important;
}
header.editorial-header .toggle-btn,
header.editorial-header .burger{
  height:100%;
  margin:0;
  border:0 !important;
  border-left:1px solid var(--header-line) !important;
  border-radius:0;
  color:var(--header-ink) !important;
  background:transparent !important;
  mix-blend-mode:normal !important;
  transition:background-color .2s ease,color .2s ease;
}
header.editorial-header .lang-toggle{
  min-width:82px;
  padding:0 14px;
  justify-content:center;
}
header.editorial-header .theme-toggle{
  width:54px;
  padding:0;
  justify-content:center;
}
header.editorial-header .theme-toggle::before{
  content:"MODE";
  position:absolute;
  top:11px;
  font-family:var(--type-mono);
  font-size:6px;
  font-weight:700;
  letter-spacing:.1em;
  opacity:.48;
}
header.editorial-header .theme-toggle{
  position:relative;
  align-items:flex-end;
  padding-bottom:13px;
}
header.editorial-header .theme-icon{
  font-size:15px;
  line-height:1;
  color:inherit !important;
}
header.editorial-header .lang-toggle .lang-opt,
header.editorial-header .lang-toggle .lang-sep{
  color:inherit !important;
}
header.editorial-header .lang-toggle .lang-opt.active{
  opacity:1;
}
header.editorial-header .toggle-btn:hover,
header.editorial-header .toggle-btn:focus-visible,
header.editorial-header .burger:hover,
header.editorial-header .burger:focus-visible{
  color:var(--header-bg) !important;
  background:var(--header-ink) !important;
  outline:none;
}

@media (max-width:1240px) and (min-width:1024px){
  body > header.editorial-header{
    grid-template-columns:72px minmax(650px,1fr) auto;
  }
  header.editorial-header .brand{
    padding:0 16px;
    justify-content:center;
  }
  header.editorial-header .brand-copy{
    display:none;
  }
  header.editorial-header nav.links a{
    padding-left:8px;
    padding-right:8px;
  }
}

@media (max-width:1023px){
  body > header.editorial-header{
    top:8px;
    left:8px;
    right:8px;
    height:64px;
    grid-template-columns:minmax(0,1fr) auto;
    overflow:visible;
  }
  header.editorial-header .brand{
    padding:0 14px;
    gap:10px;
    border-right:0;
  }
  header.editorial-header .brand-mark{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
  header.editorial-header .brand img{
    height:24px;
  }
  header.editorial-header .brand-copy{
    display:flex;
  }
  header.editorial-header .brand-copy strong{
    font-size:13px;
  }
  header.editorial-header .brand-copy small{
    font-size:6.5px;
  }
  header.editorial-header .toggle-group{
    grid-column:2;
  }
  header.editorial-header .lang-toggle{
    min-width:68px;
    padding:0 9px;
  }
  header.editorial-header .theme-toggle{
    width:48px;
  }
  header.editorial-header .burger{
    width:50px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
  }
  header.editorial-header .burger span{
    width:20px;
    height:1px;
    background:currentColor !important;
  }
  header.editorial-header nav.links{
    display:none;
  }
  header.editorial-header nav.links.open{
    position:fixed;
    top:79px;
    left:8px;
    right:8px;
    width:auto;
    height:auto;
    max-height:calc(100vh - 87px);
    padding:0;
    display:grid;
    grid-template-columns:1fr;
    overflow-y:auto;
    color:var(--header-ink) !important;
    background:var(--header-bg) !important;
    border:1px solid var(--header-ink);
    backdrop-filter:blur(18px) saturate(0%);
    -webkit-backdrop-filter:blur(18px) saturate(0%);
  }
  header.editorial-header nav.links.open a{
    height:62px;
    padding:0 18px;
    display:grid;
    grid-template-columns:48px 1fr;
    align-items:center;
    justify-content:stretch;
    gap:12px;
    border-right:0;
    border-bottom:1px solid var(--header-line);
  }
  header.editorial-header nav.links.open a:last-child{
    border-bottom:0;
  }
  header.editorial-header nav.links.open a .num{
    font-size:25px;
  }
  header.editorial-header nav.links.open a > span:last-child{
    font-size:11px;
    overflow:visible;
    text-overflow:clip;
  }
}

@media (max-width:520px){
  header.editorial-header .brand-copy small{
    display:none;
  }
  header.editorial-header .lang-toggle{
    min-width:58px;
    font-size:9px;
  }
  header.editorial-header .theme-toggle{
    width:44px;
  }
  header.editorial-header .burger{
    width:44px;
  }
}

@media (max-width:390px){
  header.editorial-header .brand-copy{
    display:none;
  }
}

/* ============ REVEAL CMF MINIMAL v10 ============
   Le cache est désormais un voile flou et bruité continu. Aucun mot ni
   cartouche : seule la flèche centrale signale le geste de révélation. */
.cmf-focus-mask{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  z-index:5;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  isolation:isolate;
  background:rgba(127,127,127,.025);
  transition:transform .7s cubic-bezier(.16,.8,.3,1),opacity .55s cubic-bezier(.16,.8,.3,1);
}
.cmf-focus-mask:active,
.cmf-focus-mask.is-dragging{
  cursor:grabbing;
}
.cmf-focus-mask.dismissed{
  transform:translateX(100%);
  opacity:0;
  pointer-events:none;
}
.cmf-focus-mask:focus-visible{
  outline:2px solid #fff;
  outline-offset:-4px;
}

.cmf-focus-image{
  position:absolute;
  top:0;
  right:0;
  z-index:0;
  width:auto !important;
  max-width:none !important;
  height:100% !important;
  object-fit:contain;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
  filter:blur(34px) saturate(.38) contrast(1.22);
  transform:scale(1.065);
  transform-origin:right center;
  -webkit-mask-image:none;
  mask-image:none;
}

.cmf-focus-noise{
  position:absolute;
  inset:-20%;
  z-index:4;
  pointer-events:none;
  opacity:.48;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

.cmf-focus-edge{
  position:absolute;
  left:50%;
  top:50%;
  z-index:8;
  width:50px;
  height:50px;
  display:block;
  transform:translate(-50%,-50%);
  border:1px solid #fff;
  background:#09090a;
  color:#fff !important;
  font-family:var(--type-mono);
  font-size:0;
  line-height:1;
  mix-blend-mode:normal !important;
  pointer-events:none;
}
.cmf-focus-edge::before{
  content:"→";
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  width:1em;
  color:#fff;
  font-family:var(--type-mono);
  font-size:17px;
  font-weight:400;
  line-height:1;
  text-align:center;
  transform:translate(calc(-50% - 1px),calc(-50% - .5px));
}
.cmf-focus-mask::after{
  content:none;
}

@media (max-width:700px){
  .cmf-focus-image{
    filter:blur(23px) saturate(.4) contrast(1.18);
  }
  .cmf-focus-edge{
    left:50%;
    width:42px;
    height:42px;
  }
  .cmf-focus-edge::before{
    font-size:14px;
  }
}

@media (prefers-reduced-motion:reduce){
  .cmf-focus-mask{
    transition-duration:.2s;
  }
}

/* ============ SYSTÈME DE TRAITS UNIFIÉ v10 ============
   Même épaisseur et même présence optique que le bouton « Voir tous les
   services ». Les états, couleurs de fond et interactions restent inchangés. */
:root{
  --construction-rule:1px;
  --construction-ink:#eeeeee;
}
[data-theme="light"]{
  --construction-ink:#0d0d0f;
}

/* Une largeur unique pour tout cadre réellement dessiné. Les éléments sans
   style de bordure restent naturellement sans encadrement. */
html *{
  border-width:var(--construction-rule);
}

/* Cadres, cellules, cartes, champs et séparateurs de la structure générale. */
:is(
  .project-tags span,
  .project,
  .specs-row,
  .features li,
  .stack-tags span,
  #work .stack-nav-btn,
  .method-steps,
  .faq-list,
  .placeholder-note,
  .services-marks .sm-mark,
  .btn-view-all,
  .msg-form button[type="submit"],
  .process-flow,
  .price-card,
  .service-card,
  .service-sub,
  .example-grid img,
  .service-contact,
  .services-divider,
  .presta-select-card,
  .testimonial-card,
  .testimonial-card .tc-footer,
  .rating-input .ri-bar,
  .presta-img img,
  .presta-contact-inner,
  .about-meta-row,
  .resume-col h3,
  .r-entry,
  .r-entry-parallel-wrap,
  .r-parallel-col .r-entry,
  .toolkit span,
  .contact-wrap,
  .contact-links a,
  .msg-form input,
  .msg-form textarea,
  footer.site-footer,
  .detail-tags span,
  .detail-side .side-block,
  .detail-side .spec-line,
  .detail-side .feat-list li,
  .detail-side .pipe-list span,
  .detail-nav,
  .fw-specs-grid,
  .fw-spec-row,
  .fw-feat-row,
  .ed-block,
  .ed-specs,
  .ed-spec-row,
  .ed-feat-row,
  .ed-glass,
  .ed-pipeline span,
  .ed-footer-nav,
  .ed-back-btn,
  .back-link,
  .back-to-top,
  .to-contact,
  .toggle-btn
){
  border-color:var(--construction-ink) !important;
}

/* Les champs avaient encore un gris translucide hérité de l'ancienne DA. */
.msg-form input,
.msg-form textarea{
  border-bottom-width:var(--construction-rule) !important;
  border-bottom-style:solid !important;
  border-bottom-color:var(--construction-ink) !important;
}

/* Traits générés et lignes verticales du CV. */
.mw-item::after,
.more-work-list::before,
.hero-meta::before,
.faq-item::after,
.method-step::before{
  height:var(--construction-rule) !important;
  opacity:1 !important;
}
.r-entry-parallel::before{
  width:var(--construction-rule) !important;
  background:#fff !important;
  mix-blend-mode:difference;
  opacity:1 !important;
}

/* Les quatre règles du CV rejoignent désormais exactement le même calibre. */
.resume-col h3[data-i18n="about.formationH"],
.resume-col h3[data-i18n="about.experienceH"],
.resume-col h3[data-i18n="about.toolkitH"],
.resume-col h3[data-i18n="about.languagesH"]{
  border-bottom-width:var(--construction-rule) !important;
  border-bottom-color:var(--construction-ink) !important;
}

/* Les tags posés directement sur les héros conservent un trait blanc, tandis
   que les pages éditoriales suivent leur propre palette interne. */
.detail-tags span{
  border-color:#fff !important;
}
:is(
  .ed-block,
  .ed-specs,
  .ed-spec-row,
  .ed-feat-row,
  .ed-glass,
  .ed-pipeline span,
  .ed-footer-nav,
  .ed-back-btn
){
  border-color:var(--ed-fg) !important;
}

/* Grille de navigation : contour extérieur et divisions au même niveau de
   contraste que les boutons du contenu. */
body > header.editorial-header,
header.editorial-header .brand-mark,
header.editorial-header nav.links.open{
  border-color:var(--header-ink) !important;
}
header.editorial-header .brand,
header.editorial-header nav.links a,
header.editorial-header .toggle-btn,
header.editorial-header .burger,
header.editorial-header nav.links.open a{
  border-color:var(--header-ink) !important;
}

/* Traits de repérage éditoriaux et crochets d'angle. */
.scroll-cue .line,
.ed-scroll-hint .ed-line{
  height:var(--construction-rule) !important;
  background:currentColor !important;
  opacity:1 !important;
}
.tag::before{
  border-left-width:var(--construction-rule) !important;
  border-top-width:var(--construction-rule) !important;
  border-color:currentColor !important;
  opacity:1 !important;
}
.stack-media::after,
.ed-hero::after,
.service-panel::after{
  background:
    linear-gradient(#fff,#fff) 0 0/26px var(--construction-rule) no-repeat,
    linear-gradient(#fff,#fff) 0 0/var(--construction-rule) 26px no-repeat,
    linear-gradient(#fff,#fff) 100% 0/26px var(--construction-rule) no-repeat,
    linear-gradient(#fff,#fff) 100% 0/var(--construction-rule) 26px no-repeat,
    linear-gradient(#fff,#fff) 0 100%/26px var(--construction-rule) no-repeat,
    linear-gradient(#fff,#fff) 0 100%/var(--construction-rule) 26px no-repeat,
    linear-gradient(#fff,#fff) 100% 100%/26px var(--construction-rule) no-repeat,
    linear-gradient(#fff,#fff) 100% 100%/var(--construction-rule) 26px no-repeat !important;
  opacity:1 !important;
}
.sc-progress{
  width:var(--construction-rule) !important;
  background:currentColor !important;
}

/* ============ FINITIONS MOBILE + DESKTOP v11 ============
   1. Les deux commandes flottantes se composent réellement en différence
      avec chaque zone du fond, contour et pictogramme compris.
   2. Le voile de navigation laisse deviner le site sans compromettre sa
      lisibilité ; ses valeurs sont communes aux variantes mobile et desktop. */
body #to-contact.to-contact,
body #back-to-top.back-to-top{
  color:#fff !important;
  background:transparent !important;
  border:var(--construction-rule) solid #fff !important;
  mix-blend-mode:difference !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body #to-contact.to-contact *,
body #back-to-top.back-to-top *{
  color:inherit !important;
  mix-blend-mode:normal !important;
}
body #to-contact.to-contact svg{
  stroke:currentColor !important;
  fill:none !important;
}
@media (hover:hover){
  body #to-contact.to-contact:hover,
  body #back-to-top.back-to-top:hover{
    color:#fff !important;
    background:transparent !important;
    border-color:#fff !important;
  }
}

/* ============ BANDEAU INTÉGRÉ v12 ============
   Le header cesse d'être une carte flottante : il rejoint les bords du
   viewport, reprend la valeur du fond et conserve seulement un voile léger,
   un grain très discret et un index typographique sans cellules. */
:root{
  --header-surface:rgba(7,7,8,.56);
  --header-surface-scrolled:rgba(7,7,8,.68);
  --header-menu-surface:rgba(7,7,8,.90);
  --header-ink:#f2f2f0;
  --header-line:rgba(242,242,240,.20);
  --header-muted:rgba(242,242,240,.50);
}
[data-theme="light"]{
  --header-surface:rgba(243,243,241,.56);
  --header-surface-scrolled:rgba(243,243,241,.68);
  --header-menu-surface:rgba(243,243,241,.90);
  --header-ink:#09090a;
  --header-line:rgba(9,9,10,.18);
  --header-muted:rgba(9,9,10,.48);
}

body > header.editorial-header{
  top:0;
  left:0;
  right:0;
  width:100%;
  height:66px;
  padding:0 clamp(18px,2.2vw,38px);
  grid-template-columns:minmax(190px,260px) minmax(0,1fr) auto;
  color:var(--header-ink) !important;
  background:var(--header-surface) !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible;
  backdrop-filter:blur(11px) saturate(45%) contrast(1.03);
  -webkit-backdrop-filter:blur(11px) saturate(45%) contrast(1.03);
  isolation:isolate;
  transition:background-color .3s ease,color .3s ease;
}
body > header.editorial-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px;
  mix-blend-mode:soft-light;
}
body > header.editorial-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  height:1px;
  pointer-events:none;
  background:var(--header-line);
}
body > header.editorial-header > *{
  position:relative;
  z-index:1;
}
body > header.editorial-header.is-scrolled,
[data-theme="light"] body > header.editorial-header.is-scrolled{
  background:var(--header-surface-scrolled) !important;
  box-shadow:none !important;
}

header.editorial-header .brand{
  height:100%;
  padding:0;
  gap:11px;
  border:0 !important;
  color:var(--header-ink) !important;
}
header.editorial-header .brand-mark{
  width:32px;
  height:32px;
  flex:0 0 32px;
  border:0 !important;
  overflow:visible;
}
header.editorial-header .brand img{
  height:28px;
}
header.editorial-header .brand-copy{
  gap:4px;
}
header.editorial-header .brand-copy strong{
  font-size:14px;
  letter-spacing:-.05em;
}
header.editorial-header .brand-copy small{
  font-size:6.5px;
  letter-spacing:.13em;
  opacity:.68;
}

header.editorial-header nav.links{
  height:100%;
  padding:0 clamp(10px,1.8vw,34px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(13px,1.35vw,27px);
  color:var(--header-ink) !important;
}
header.editorial-header nav.links a{
  width:auto;
  height:auto;
  min-height:32px;
  padding:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:6px;
  overflow:visible;
  border:0 !important;
  color:var(--header-ink) !important;
  background:transparent !important;
  opacity:.48;
  transition:opacity .2s ease,filter .2s ease;
}
header.editorial-header nav.links a::before,
header.editorial-header nav.links a::after{
  display:none !important;
  content:none !important;
}
header.editorial-header nav.links a .num{
  margin:0;
  font-size:12px;
  line-height:1;
  letter-spacing:-.07em;
  color:inherit !important;
  opacity:.72;
  filter:blur(.22px);
  transition:opacity .2s ease,filter .2s ease;
}
header.editorial-header nav.links a > span:last-child{
  font-size:7.5px;
  line-height:1;
  letter-spacing:.075em;
  color:inherit !important;
}
header.editorial-header nav.links a:hover,
header.editorial-header nav.links a:focus-visible,
header.editorial-header nav.links a[aria-current="page"]{
  color:var(--header-ink) !important;
  background:transparent !important;
  opacity:1;
  outline:none;
}
header.editorial-header nav.links a:hover .num,
header.editorial-header nav.links a:focus-visible .num,
header.editorial-header nav.links a[aria-current="page"] .num{
  opacity:1;
  filter:none;
}

header.editorial-header .toggle-group{
  height:100%;
  align-items:center;
  gap:17px;
  color:var(--header-ink) !important;
}
header.editorial-header .toggle-btn,
header.editorial-header .burger{
  width:auto;
  min-width:0;
  height:auto;
  min-height:32px;
  padding:0;
  border:0 !important;
  color:var(--header-ink) !important;
  background:transparent !important;
  opacity:.58;
  transition:opacity .2s ease;
}
header.editorial-header .lang-toggle{
  min-width:0;
  padding:0;
}
header.editorial-header .theme-toggle{
  width:18px;
  padding:0;
  align-items:center;
  justify-content:center;
}
header.editorial-header .theme-toggle::before{
  content:none !important;
  display:none !important;
}
header.editorial-header .theme-icon{
  font-size:14px;
}
header.editorial-header .toggle-btn:hover,
header.editorial-header .toggle-btn:focus-visible,
header.editorial-header .burger:hover,
header.editorial-header .burger:focus-visible{
  color:var(--header-ink) !important;
  background:transparent !important;
  opacity:1;
  outline:none;
}

@media (max-width:1240px) and (min-width:1024px){
  body > header.editorial-header{
    grid-template-columns:52px minmax(0,1fr) auto;
  }
  header.editorial-header .brand{
    padding:0;
    justify-content:flex-start;
  }
  header.editorial-header nav.links{
    gap:clamp(10px,1vw,16px);
    padding-left:16px;
    padding-right:16px;
  }
}

@media (max-width:1023px){
  body > header.editorial-header{
    top:0;
    left:0;
    right:0;
    width:100%;
    height:64px;
    padding:0 14px;
    grid-template-columns:minmax(0,1fr) auto;
    background:var(--header-surface) !important;
    border:0 !important;
  }
  header.editorial-header .brand{
    padding:0;
    gap:9px;
    border:0 !important;
  }
  header.editorial-header .brand-mark{
    width:30px;
    height:30px;
    flex-basis:30px;
    border:0 !important;
  }
  header.editorial-header .brand img{
    height:26px;
  }
  header.editorial-header .brand-copy strong{
    font-size:13px;
  }
  header.editorial-header .brand-copy small{
    font-size:6px;
  }
  header.editorial-header .toggle-group{
    gap:14px;
  }
  header.editorial-header .lang-toggle{
    min-width:0;
    padding:0;
  }
  header.editorial-header .theme-toggle{
    width:18px;
  }
  header.editorial-header .burger{
    width:24px;
    padding:0;
    gap:4px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  header.editorial-header .burger span{
    width:19px;
    height:1px;
  }
  header.editorial-header nav.links{
    display:none;
  }
  header.editorial-header nav.links.open{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    width:100%;
    height:auto;
    max-height:calc(100vh - 64px);
    padding:10px 18px 18px;
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    overflow-y:auto;
    color:var(--header-ink) !important;
    background:var(--header-menu-surface) !important;
    border:0 !important;
    border-top:1px solid var(--header-line) !important;
    backdrop-filter:blur(18px) saturate(35%);
    -webkit-backdrop-filter:blur(18px) saturate(35%);
  }
  header.editorial-header nav.links.open a{
    width:100%;
    height:52px;
    min-height:52px;
    padding:0 2px;
    display:grid;
    grid-template-columns:38px 1fr;
    align-items:center;
    justify-content:stretch;
    gap:10px;
    border:0 !important;
    border-bottom:1px solid var(--header-line) !important;
    opacity:.55;
  }
  header.editorial-header nav.links.open a:last-child{
    border-bottom:0 !important;
  }
  header.editorial-header nav.links.open a .num{
    font-size:19px;
  }
  header.editorial-header nav.links.open a > span:last-child{
    font-size:10px;
  }
  header.editorial-header nav.links.open a:hover,
  header.editorial-header nav.links.open a:focus-visible,
  header.editorial-header nav.links.open a[aria-current="page"]{
    opacity:1;
    color:var(--header-ink) !important;
    background:transparent !important;
  }
}

@media (max-width:520px){
  header.editorial-header .brand-copy{
    display:flex;
  }
  header.editorial-header .brand-copy small{
    display:none;
  }
  header.editorial-header .lang-toggle{
    min-width:0;
    font-size:8.5px;
  }
}

@media (max-width:390px){
  header.editorial-header .brand-copy{
    display:flex;
  }
  header.editorial-header .brand-copy small{
    display:none;
  }
}

/* ============ BANDEAU INTÉGRÉ + INVERSION ACTIVE v13 ============
   Un seul voile uni pour toute la largeur. La section courante devient la
   seule « case » visible : sombre en mode jour, claire en mode nuit. */
:root{
  --header-surface:rgba(7,7,8,.50);
  --header-surface-scrolled:rgba(7,7,8,.50);
  --header-menu-surface:rgba(7,7,8,.88);
  --header-base:#070708;
}
[data-theme="light"]{
  --header-surface:rgba(243,243,241,.50);
  --header-surface-scrolled:rgba(243,243,241,.50);
  --header-menu-surface:rgba(243,243,241,.88);
  --header-base:#f3f3f1;
}

body > header.editorial-header,
body > header.editorial-header.is-scrolled,
[data-theme="light"] body > header.editorial-header.is-scrolled{
  background:var(--header-surface) !important;
  backdrop-filter:blur(22px) saturate(0%) contrast(1.01);
  -webkit-backdrop-filter:blur(22px) saturate(0%) contrast(1.01);
}
body > header.editorial-header::before{
  content:none !important;
  display:none !important;
  background:none !important;
}
header.editorial-header .brand,
header.editorial-header nav.links,
header.editorial-header .toggle-group{
  background:transparent !important;
}

header.editorial-header .brand-copy{
  display:flex;
  min-width:0;
  justify-content:center;
  filter:none !important;
  white-space:nowrap;
}
header.editorial-header .brand-copy strong{
  display:block;
  font-family:var(--type-display);
  font-size:clamp(9px,.66vw,11.5px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.045em;
  color:inherit !important;
  filter:none !important;
  white-space:nowrap;
}
header.editorial-header .brand-focus{
  filter:none !important;
}

header.editorial-header nav.links a{
  height:100%;
  min-height:100%;
  padding:0 clamp(9px,.72vw,14px);
  border:0 !important;
  color:var(--header-ink) !important;
  background:transparent !important;
  opacity:.46;
  transition:opacity .2s ease,color .2s ease,background-color .2s ease;
}
header.editorial-header nav.links a:hover,
header.editorial-header nav.links a:focus-visible{
  color:var(--header-ink) !important;
  background:transparent !important;
  opacity:1;
}
header.editorial-header nav.links a[aria-current="page"],
header.editorial-header nav.links a[aria-current="page"]:hover,
header.editorial-header nav.links a[aria-current="page"]:focus-visible{
  color:var(--header-base) !important;
  background:var(--header-ink) !important;
  opacity:1;
}
header.editorial-header nav.links a[aria-current="page"] .num,
header.editorial-header nav.links a[aria-current="page"] > span:last-child{
  color:inherit !important;
  opacity:1;
  filter:none !important;
}

@media (max-width:1023px){
  body > header.editorial-header,
  body > header.editorial-header.is-scrolled,
  [data-theme="light"] body > header.editorial-header.is-scrolled{
    background:var(--header-surface) !important;
  }
  header.editorial-header .brand-copy strong{
    font-size:8.4px;
    letter-spacing:-.05em;
  }
  header.editorial-header nav.links.open{
    background:var(--header-menu-surface) !important;
  }
  header.editorial-header nav.links.open a{
    height:52px;
    min-height:52px;
    padding:0 12px;
    color:var(--header-ink) !important;
    background:transparent !important;
  }
  header.editorial-header nav.links.open a[aria-current="page"],
  header.editorial-header nav.links.open a[aria-current="page"]:hover,
  header.editorial-header nav.links.open a[aria-current="page"]:focus-visible{
    color:var(--header-base) !important;
    background:var(--header-ink) !important;
  }
}

/* ============ CONTRASTES DE SERVICE v14 ============
   Les traits utilisent désormais une source blanche en mode difference :
   ils deviennent noirs sur les zones claires et restent blancs sur les zones
   sombres, y compris lorsque le fond change localement dans une même page. */

/* La mention légale suit le fond réel du pied de page, pas seulement le thème
   global. Sa géométrie et son comportement restent inchangés. */
footer.site-footer .footer-legal-link{
  color:#fff !important;
  background:transparent !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}

/* Toutes les lignes des formulaires partagent la même épaisseur et la même
   composition locale. Les placeholders et le texte saisi restent lisibles
   sur chaque valeur du fond. */
form.msg-form{
  isolation:auto !important;
}
form.msg-form input:not([type="hidden"]),
form.msg-form textarea,
form.msg-form select{
  color:#fff !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:var(--construction-rule) solid #fff !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}
form.msg-form input:not([type="hidden"])::placeholder,
form.msg-form textarea::placeholder{
  color:#fff !important;
  opacity:.62 !important;
}

/* Les quatre PNG de logos gardent leur alpha original dans la lightbox. Le
   filtre est volontairement limité à l'image agrandie : aucune vignette de
   la page n'est modifiée. */
#lightbox-img.lightbox-logo-white{
  background:transparent !important;
  box-shadow:none !important;
  filter:grayscale(1) brightness(0) invert(1) !important;
}

/* Le second titre de la prestation Site web reprend exactement la famille,
   l'échelle et le flou du titre principal, avec une composition centrée. */
#panel-siteweb .web-example-heading{
  width:100%;
  margin:clamp(78px,8vw,126px) auto clamp(46px,5vw,72px);
  justify-content:center;
  align-items:center;
  text-align:center;
}
#panel-siteweb .web-example-heading h2{
  max-width:14ch;
  margin:0 auto;
  text-align:center;
}

/* Règles de processus, cadres des éléments inclus et encadrement du devis :
   le mélange porte sur l'élément transparent lui-même, jamais sur une image
   ni sur un fond de carte sélectionné. */
#panel-siteweb .process-flow{
  color:#fff !important;
  border-top-color:#fff !important;
  border-bottom-color:#fff !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}
#panel-siteweb .process-flow *{
  color:inherit !important;
  mix-blend-mode:normal !important;
}
#panel-siteweb .toolkit{
  mix-blend-mode:normal !important;
}
#panel-siteweb .toolkit span{
  color:#fff !important;
  background:transparent !important;
  border-color:#fff !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}
#panel-siteweb #siteweb-pricing-grid .price-card:not(.selected){
  color:#fff !important;
  background:transparent !important;
  border-color:#fff !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}
#panel-siteweb #siteweb-pricing-grid .price-card:not(.selected) *{
  color:inherit !important;
  mix-blend-mode:normal !important;
}
#panel-siteweb .presta-contact-inner{
  position:relative;
  border-top:0 !important;
}
#panel-siteweb .presta-contact-inner::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:var(--construction-rule);
  background:#fff;
  mix-blend-mode:difference;
  pointer-events:none;
}

/* ============ BANDEAU UNI + TRAITS À PROPOS v15 ============ */

/* Le bandeau est désormais une seule surface opaque. La case active conserve
   l'inversion prévue en v13, mais aucun contenu de page ne peut créer une
   différence de valeur sous le bloc de marque. */
:root{
  --header-surface:#070708;
  --header-surface-scrolled:#070708;
  --header-menu-surface:#070708;
}
[data-theme="light"]{
  --header-surface:#f3f3f1;
  --header-surface-scrolled:#f3f3f1;
  --header-menu-surface:#f3f3f1;
}
body > header.editorial-header,
body > header.editorial-header.is-scrolled,
[data-theme="light"] body > header.editorial-header.is-scrolled{
  background:var(--header-surface) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
header.editorial-header .brand,
header.editorial-header nav.links,
header.editorial-header .toggle-group{
  background:transparent !important;
}

/* Sur desktop, la navigation devient une grille de huit colonnes strictement
   identiques. La cellule Prestations fixe ainsi le gabarit commun sans que les
   libellés plus courts se rétractent. Le menu mobile reste pleine largeur. */
@media (min-width:1024px){
  header.editorial-header nav.links{
    width:100%;
    min-width:0;
    padding:0 clamp(10px,1.1vw,22px);
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    align-items:stretch;
    justify-content:stretch;
    gap:0;
  }
  header.editorial-header nav.links a{
    width:100%;
    min-width:0;
    height:100%;
    min-height:100%;
    padding:0 clamp(5px,.45vw,9px);
  }
}

/* Les traits de la partie À propos sont composés avec leur colonne de texte en
   une seule couche difference. Les descendants restent neutres : cela évite
   la double inversion qui rendait précisément les règles invisibles. */
#resume-section .about-bio.reveal,
#resume-section .resume-col.reveal{
  color:#fff !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}
#resume-section .about-bio.reveal *,
#resume-section .resume-col.reveal *{
  color:inherit !important;
  mix-blend-mode:normal !important;
}
#resume-section .about-meta-row,
#resume-section .resume-col h3,
#resume-section .r-entry,
#resume-section .r-entry-parallel-wrap{
  position:relative;
}
#resume-section .about-meta-row{
  border-top:0 !important;
}
#resume-section .resume-col h3,
#resume-section .r-entry,
#resume-section .r-entry-parallel-wrap{
  border-bottom:0 !important;
}
#resume-section .about-meta-row::before,
#resume-section .resume-col h3::after,
#resume-section .r-entry::after,
#resume-section .r-entry-parallel-wrap::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  z-index:0;
  height:var(--construction-rule);
  background:#fff;
  mix-blend-mode:normal !important;
  pointer-events:none;
}
#resume-section .about-meta-row::before{
  top:0;
}
#resume-section .resume-col h3::after,
#resume-section .r-entry::after,
#resume-section .r-entry-parallel-wrap::after{
  bottom:0;
}
#resume-section .r-parallel-col .r-entry:last-child::after,
#resume-section .r-parallel-col.right .r-entry::after{
  content:none;
  display:none;
}
#resume-section .r-entry-parallel::before{
  width:var(--construction-rule) !important;
  background:#fff !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}

/* Les cadres du toolkit suivent la même règle pixel par pixel. */
#resume-section .toolkit{
  mix-blend-mode:normal !important;
}
#resume-section .toolkit span{
  color:#fff !important;
  background:transparent !important;
  border:var(--construction-rule) solid #fff !important;
  mix-blend-mode:normal !important;
  isolation:auto !important;
}
#resume-section .resume-col .btn-view-all{
  color:#fff !important;
  background:transparent !important;
  border-color:#fff !important;
  mix-blend-mode:normal !important;
}
@media (hover:hover){
  #resume-section .resume-col .btn-view-all:hover{
    color:#000 !important;
    background:#fff !important;
    border-color:#fff !important;
  }
}

/* ============ FORMULAIRES EN DIFFÉRENCE v16 ============
   Le formulaire entier constitue une seule couche de différence. Texte,
   règles et cadres sont donc calculés ensemble contre le fond local, sans
   double inversion entre un contrôle et son libellé. */
form.msg-form{
  color:#fff !important;
  background:transparent !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}
form.msg-form *,
form.msg-form *::before,
form.msg-form *::after{
  color:inherit !important;
  mix-blend-mode:normal !important;
}

/* Lignes des champs : une source blanche, au calibre commun du site. */
form.msg-form input:not([type="hidden"]),
form.msg-form textarea,
form.msg-form select{
  color:inherit !important;
  caret-color:currentColor !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:var(--construction-rule) solid #fff !important;
  mix-blend-mode:normal !important;
  isolation:auto !important;
}
form.msg-form input:not([type="hidden"])::placeholder,
form.msg-form textarea::placeholder{
  color:#fff !important;
  opacity:.62 !important;
}

/* Cadre du bouton d'envoi : même construction que les autres commandes. */
form.msg-form button[type="submit"],
#contact form.msg-form button[type="submit"]{
  color:#fff !important;
  background:transparent !important;
  border:var(--construction-rule) solid #fff !important;
  mix-blend-mode:normal !important;
  isolation:auto !important;
}
form.msg-form button[type="submit"] *,
#contact form.msg-form button[type="submit"] *{
  color:inherit !important;
  mix-blend-mode:normal !important;
}
@media (hover:hover){
  form.msg-form button[type="submit"]:not(:disabled):hover,
  #contact form.msg-form button[type="submit"]:not(:disabled):hover{
    color:#000 !important;
    background:#fff !important;
    border-color:#fff !important;
  }
}
form.msg-form button[type="submit"]:disabled,
form.msg-form button[type="submit"]:disabled:hover{
  color:#fff !important;
  background:transparent !important;
  border-color:#fff !important;
}

/* Barres de satisfaction : contours et état rempli sont inclus dans le même
   groupe de différence que le formulaire. */
form.msg-form .rating-input .ri-bar{
  color:#fff !important;
  background:transparent !important;
  border:var(--construction-rule) solid #fff !important;
  border-bottom:0 !important;
  mix-blend-mode:normal !important;
  isolation:auto !important;
}
form.msg-form .rating-input .ri-bar:hover,
form.msg-form .rating-input .ri-bar.hovered{
  border-color:#fff !important;
}
form.msg-form .rating-input .ri-bar.filled{
  background:#fff !important;
  border-color:#fff !important;
}

/* Séparateurs qui précèdent les trois familles de formulaires. Comme ils se
   trouvent hors de la balise form, chacun porte directement la différence. */
.presta-contact-inner,
.service-contact,
.contact-wrap{
  position:relative;
  border-top:0 !important;
}
.presta-contact-inner::before,
.service-contact::before,
.contact-wrap::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:3;
  height:var(--construction-rule);
  background:#fff;
  mix-blend-mode:difference;
  pointer-events:none;
}

/* ============ CONTRASTE FORMULAIRES À COUCHE UNIQUE v17 ============
   Les captures de contrôle ont révélé que certains navigateurs recomposaient
   le groupe difference des formulaires puis ses contrôles une seconde fois.
   Les éléments internes utilisent donc une encre explicite par thème. Il ne
   peut plus y avoir ni double inversion ni délai d'activation. */
:root{
  --form-ink:#f4f4f2;
  --form-paper:#070708;
}
[data-theme="light"]{
  --form-ink:#0b0b0c;
  --form-paper:#f3f3f1;
}

form.msg-form,
form.msg-form[data-diff-shell]{
  color:var(--form-ink) !important;
  background:transparent !important;
  mix-blend-mode:normal !important;
  isolation:auto !important;
}
form.msg-form *,
form.msg-form *::before,
form.msg-form *::after{
  color:inherit !important;
  mix-blend-mode:normal !important;
}

form.msg-form input:not([type="hidden"]),
form.msg-form textarea,
form.msg-form select{
  color:var(--form-ink) !important;
  -webkit-text-fill-color:var(--form-ink) !important;
  caret-color:var(--form-ink) !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:var(--construction-rule) solid var(--form-ink) !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}
form.msg-form input:not([type="hidden"])::placeholder,
form.msg-form textarea::placeholder{
  color:var(--form-ink) !important;
  -webkit-text-fill-color:var(--form-ink) !important;
  opacity:.62 !important;
}

form.msg-form button[type="submit"],
#contact form.msg-form button[type="submit"]{
  color:var(--form-ink) !important;
  background:transparent !important;
  border:var(--construction-rule) solid var(--form-ink) !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}
form.msg-form button[type="submit"] *,
#contact form.msg-form button[type="submit"] *{
  color:inherit !important;
  mix-blend-mode:normal !important;
}
@media (hover:hover){
  form.msg-form button[type="submit"]:not(:disabled):hover,
  #contact form.msg-form button[type="submit"]:not(:disabled):hover{
    color:var(--form-paper) !important;
    background:var(--form-ink) !important;
    border-color:var(--form-ink) !important;
  }
}
form.msg-form button[type="submit"]:disabled,
form.msg-form button[type="submit"]:disabled:hover{
  color:var(--form-ink) !important;
  background:transparent !important;
  border-color:var(--form-ink) !important;
  opacity:.6 !important;
}

form.msg-form .rating-input .ri-bar{
  color:var(--form-ink) !important;
  background:transparent !important;
  border:var(--construction-rule) solid var(--form-ink) !important;
  border-bottom:0 !important;
  mix-blend-mode:normal !important;
}
form.msg-form .rating-input .ri-bar:hover,
form.msg-form .rating-input .ri-bar.hovered{
  border-color:var(--form-ink) !important;
}
form.msg-form .rating-input .ri-bar.filled{
  background:var(--form-ink) !important;
  border-color:var(--form-ink) !important;
}

/* ============ SÉPARATEURS COORDONNÉES v18 ============
   Le bloc entier constitue déjà la couche difference du texte. Ses bordures
   doivent donc être blanches à la source — et non recolorées une première
   fois par le thème — afin d'obtenir du noir sur clair et du blanc sur sombre. */
#contact .contact-links,
#contact .contact-links[data-diff-shell]{
  color:#fff !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}
#contact .contact-links a,
#contact .contact-links a *,
#contact .contact-links[data-diff-shell] a,
#contact .contact-links[data-diff-shell] a *{
  color:inherit !important;
  mix-blend-mode:normal !important;
}
#contact .contact-links a{
  border-top:var(--construction-rule) solid #fff !important;
  border-bottom-color:#fff !important;
}
#contact .contact-links a:last-child{
  border-bottom:var(--construction-rule) solid #fff !important;
}

/* ============ CORRECTIONS VALIDÉES v19 ============ */
.pricing-tax-note{
  display:block;
  margin-top:12px;
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  mix-blend-mode:difference;
}

/* La fenêtre de confidentialité reprend exactement le langage de la fenêtre
   légale et reste discrète tant que son petit lien n'est pas activé. */
#privacy-modal .legal-box,
#privacy-modal .legal-box h3,
#privacy-modal .legal-content h4,
#privacy-modal .legal-content p,
#privacy-modal .legal-content strong,
#privacy-modal .legal-close{
  color:#ededed !important;
}
[data-theme="light"] #privacy-modal .legal-box,
[data-theme="light"] #privacy-modal .legal-box h3,
[data-theme="light"] #privacy-modal .legal-content h4,
[data-theme="light"] #privacy-modal .legal-content p,
[data-theme="light"] #privacy-modal .legal-content strong,
[data-theme="light"] #privacy-modal .legal-close{
  color:#0d0d0f !important;
}
#privacy-modal .legal-content{
  max-height:calc(86vh - 122px);
  overflow-y:auto;
  padding-right:10px;
}

/* Si WebGL ou le réseau 3D échoue, la vue de base du projet prend le relais.
   Seul le message de secours reste au-dessus, en différence avec l'image. */
.ed-3d-viewer.ed3d-fallback,
.sc-stage.sc-fallback{
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}
.ed-3d-viewer.ed3d-fallback .ed-3d-canvas,
.sc-stage.sc-fallback .sc-canvas,
.ed-3d-viewer.ed3d-fallback .ed-3d-spinner,
.sc-stage.sc-fallback .ed-3d-spinner{
  display:none !important;
}
.ed-3d-viewer.ed3d-fallback .ed-3d-overlay,
.sc-stage.sc-fallback .sc-loading{
  opacity:1 !important;
  background:transparent !important;
  mix-blend-mode:normal !important;
}
.ed-3d-viewer.ed3d-fallback .ed-3d-pct,
.sc-stage.sc-fallback .sc-pct{
  max-width:min(78%,520px);
  color:#fff !important;
  mix-blend-mode:difference !important;
  font-family:'Space Mono',monospace;
  font-size:clamp(15px,2vw,28px) !important;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.04em;
  text-align:center;
}

/* Une assise typographique très légère sous les petits corps compense le
   grain sans ajouter de cartouche ni modifier la composition. */
:is(.tag,.label,.project-tags,.ed-eyebrow,.ed-feature-tag,.ed-spec-row .k,.pricing-note,.pricing-tax-note,.example-gallery-label,.site-footer){
  text-shadow:0 0 .35px currentColor;
}

/* ============ ÉTATS DES BOUTONS UNIFIÉS v20 ============
   Tous les boutons d'action encadrés reprennent exactement la bascule du
   bouton « Voir tous les services » : blanc sur noir en mode nuit, noir sur
   blanc en mode jour, puis inversion franche au survol et au clavier. Cette
   règle finale neutralise les anciennes exceptions locales sans modifier la
   géométrie, le libellé, les liens ou les animations des commandes. */
:root{
  --action-ink:#f4f4f2;
  --action-paper:#070708;
}
[data-theme="light"]{
  --action-ink:#0b0b0c;
  --action-paper:#f3f3f1;
}

#view-home .btn-view-all.btn-view-all,
#view-services .btn-view-all.btn-view-all,
#view-testimonials .btn-view-all.btn-view-all,
#view-home form.msg-form button[type="submit"],
#view-services form.msg-form button[type="submit"],
#view-testimonials form.msg-form button[type="submit"],
#view-detail > .back-link,
#view-services > .back-link,
#view-testimonials > .back-link,
#view-detail .ed-back-btn,
#view-detail .sc-back,
#view-detail .fw-media-link-btn,
body #to-contact.to-contact,
body #back-to-top.back-to-top{
  color:var(--action-ink) !important;
  -webkit-text-fill-color:currentColor !important;
  background:transparent !important;
  border-color:var(--action-ink) !important;
  mix-blend-mode:normal !important;
  isolation:auto !important;
  transition:color .2s ease,background-color .2s ease,border-color .2s ease !important;
}
#view-home .btn-view-all.btn-view-all *,
#view-services .btn-view-all.btn-view-all *,
#view-testimonials .btn-view-all.btn-view-all *,
#view-home form.msg-form button[type="submit"] *,
#view-services form.msg-form button[type="submit"] *,
#view-testimonials form.msg-form button[type="submit"] *,
#view-detail > .back-link *,
#view-services > .back-link *,
#view-testimonials > .back-link *,
#view-detail .ed-back-btn *,
#view-detail .sc-back *,
#view-detail .fw-media-link-btn *,
body #to-contact.to-contact *,
body #back-to-top.back-to-top *{
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  mix-blend-mode:normal !important;
}
body #to-contact.to-contact svg,
body #back-to-top.back-to-top svg{
  stroke:currentColor !important;
  fill:none !important;
}

@media (hover:hover){
  #view-home .btn-view-all.btn-view-all:hover,
  #view-services .btn-view-all.btn-view-all:hover,
  #view-testimonials .btn-view-all.btn-view-all:hover,
  #view-home form.msg-form button[type="submit"]:not(:disabled):hover,
  #view-services form.msg-form button[type="submit"]:not(:disabled):hover,
  #view-testimonials form.msg-form button[type="submit"]:not(:disabled):hover,
  #view-detail > .back-link:hover,
  #view-services > .back-link:hover,
  #view-testimonials > .back-link:hover,
  #view-detail .ed-back-btn:hover,
  #view-detail .sc-back:hover,
  #view-detail .fw-media-link-btn:hover,
  body #to-contact.to-contact:hover,
  body #back-to-top.back-to-top:hover{
    color:var(--action-paper) !important;
    -webkit-text-fill-color:currentColor !important;
    background:var(--action-ink) !important;
    border-color:var(--action-ink) !important;
  }
}

#view-home .btn-view-all.btn-view-all:focus-visible,
#view-services .btn-view-all.btn-view-all:focus-visible,
#view-testimonials .btn-view-all.btn-view-all:focus-visible,
#view-home form.msg-form button[type="submit"]:not(:disabled):focus-visible,
#view-services form.msg-form button[type="submit"]:not(:disabled):focus-visible,
#view-testimonials form.msg-form button[type="submit"]:not(:disabled):focus-visible,
#view-detail > .back-link:focus-visible,
#view-services > .back-link:focus-visible,
#view-testimonials > .back-link:focus-visible,
#view-detail .ed-back-btn:focus-visible,
#view-detail .sc-back:focus-visible,
#view-detail .fw-media-link-btn:focus-visible,
body #to-contact.to-contact:focus-visible,
body #back-to-top.back-to-top:focus-visible{
  color:var(--action-paper) !important;
  -webkit-text-fill-color:currentColor !important;
  background:var(--action-ink) !important;
  border-color:var(--action-ink) !important;
  outline:2px solid var(--action-ink);
  outline-offset:3px;
}

#view-home form.msg-form button[type="submit"]:disabled,
#view-home form.msg-form button[type="submit"]:disabled:hover,
#view-services form.msg-form button[type="submit"]:disabled,
#view-services form.msg-form button[type="submit"]:disabled:hover,
#view-testimonials form.msg-form button[type="submit"]:disabled,
#view-testimonials form.msg-form button[type="submit"]:disabled:hover{
  color:var(--action-ink) !important;
  -webkit-text-fill-color:currentColor !important;
  background:transparent !important;
  border-color:var(--action-ink) !important;
  opacity:.6 !important;
}

/* ============ HÉROS À LECTURE SÉQUENTIELLE v21 ============
   Pour les projets configurés en JS, le média reste strictement inchangé
   et tout le cartouche éditorial suit désormais l'image dans le flux. */
#view-detail .detail-hero.detail-hero-media-only{
  min-height:clamp(440px,68vw,920px);
  padding:0;
  align-items:stretch;
}
#view-detail .detail-hero.detail-hero-media-only::after{
  display:none !important;
}
#view-detail .detail-hero.detail-hero-media-only img{
  opacity:1 !important;
  filter:none !important;
}
#view-detail .detail-hero-content.detail-hero-copy-below{
  position:relative;
  z-index:auto;
  width:min(100%,1400px);
  max-width:1400px;
  margin:0 auto;
  padding:clamp(42px,6vw,88px) 40px clamp(54px,7vw,100px);
  color:#fff !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}
#view-detail .detail-hero-content.detail-hero-copy-below *{
  color:inherit !important;
  mix-blend-mode:normal !important;
}
#view-detail .detail-hero-content.detail-hero-copy-below .idx{
  margin-bottom:clamp(14px,2vw,24px);
}
#view-detail .detail-hero-content.detail-hero-copy-below h1{
  margin-bottom:clamp(22px,3vw,38px);
}
#view-detail .detail-hero-content.detail-hero-copy-below .detail-tags{
  margin-bottom:clamp(22px,3vw,34px);
}
#view-detail .detail-hero-content.detail-hero-copy-below .detail-tags span{
  border-color:currentColor !important;
}
#view-detail .detail-hero-content.detail-hero-copy-below .pitch{
  max-width:680px;
}
@media (max-width:900px){
  #view-detail .detail-hero.detail-hero-media-only{
    min-height:clamp(300px,72vw,620px);
  }
  #view-detail .detail-hero-content.detail-hero-copy-below{
    padding:34px 22px 58px;
  }
}

/* Sketchbook v23 : panoramique moins haut, cadrage moins zoomé et titre
   légèrement réduit. Ces ajustements restent isolés de tous les autres projets. */
#view-detail .detail-hero.detail-hero-sketchbook.detail-hero-media-only{
  min-height:0;
  height:clamp(110px,22.6vw,500px);
  background:#fff;
}
#view-detail .detail-hero.detail-hero-sketchbook.detail-hero-media-only img{
  object-fit:contain;
  object-position:center center;
}
#view-detail .detail-hero.detail-hero-sketchbook + .detail-hero-copy-below h1{
  max-width:100%;
  font-size:clamp(64px,11vw,168px);
}
@media (max-width:900px){
  #view-detail .detail-hero.detail-hero-sketchbook.detail-hero-media-only{
    min-height:0;
    height:clamp(110px,22.6vw,205px);
  }
  #view-detail .detail-hero.detail-hero-sketchbook + .detail-hero-copy-below h1{
    font-size:clamp(48px,14.5vw,100px);
  }
}

/* ============ FINITIONS RESPONSIVES v24 ============
   Les corrections ci-dessous restent limitées aux composants signalés :
   aucune image, navigation ou animation de projet n'est restructurée. */

/* La TVA est indiquée dans chaque carte qui contient réellement un prix.
   Les simples demandes de devis sans montant restent volontairement neutres. */
.price-card[data-price*="€"]::after{
  content:"TTC";
  display:block;
  margin-top:9px;
  color:inherit;
  font-family:var(--type-mono);
  font-size:8px;
  font-weight:700;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.62;
}
html[lang="en"] .price-card[data-price*="€"]::after{
  content:"VAT INCLUDED";
}

/* Les deux commandes fixes composent une seule fois en différence. Au repos,
   leur trait et leur pictogramme suivent chaque valeur locale du grain ; au
   survol, le carré entier s'inverse en conservant un glyphe lisible. */
body #to-contact.to-contact,
body #back-to-top.back-to-top{
  color:#fff !important;
  -webkit-text-fill-color:currentColor !important;
  background:transparent !important;
  border-color:#fff !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}
body #to-contact.to-contact *,
body #back-to-top.back-to-top *{
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  mix-blend-mode:normal !important;
}
@media (hover:hover){
  body #to-contact.to-contact:hover,
  body #back-to-top.back-to-top:hover{
    color:#000 !important;
    -webkit-text-fill-color:currentColor !important;
    background:#fff !important;
    border-color:#fff !important;
    mix-blend-mode:difference !important;
  }
}
body #to-contact.to-contact:focus-visible,
body #back-to-top.back-to-top:focus-visible{
  color:#000 !important;
  -webkit-text-fill-color:currentColor !important;
  background:#fff !important;
  border-color:#fff !important;
  mix-blend-mode:difference !important;
}

@media (max-width:1023px){
  /* Le point d'accroche coïncide avec le dessous du bandeau mobile. La hauteur
     dynamique reste alignée sur celle utilisée par le calcul JavaScript. */
  #work .stack-sticky{
    top:64px;
    height:calc(100vh - 64px);
    height:calc(100dvh - 64px);
    padding:0 22px 20px;
    gap:clamp(38px,6svh,52px);
  }

  /* Palindrome : un seul mot très long, ramené juste assez pour conserver
     toute sa terminaison dans la gouttière mobile. */
  #view-detail .detail-hero-copy-palindrome h1{
    max-width:100%;
    font-size:clamp(46px,13.5vw,78px);
    letter-spacing:-.085em;
  }

  /* Hermès × Binoculars : réduction volontairement plus légère. */
  #view-detail .ed-project-hermes .ed-hero-title.ed-hero-title-sm{
    max-width:100%;
    font-size:clamp(47px,13.9vw,98px);
  }
}

@media (max-width:620px){
  /* Le titre contact conserve son impact tout en faisant tenir
     « Construisons » sur une seule ligne dans la gouttière. */
  #contact .contact-inner h2{
    max-width:100%;
    font-size:clamp(40px,12.5vw,58px);
    line-height:.72;
  }

  /* Les libellés ne dictent plus une largeur minimale supérieure au viewport. */
  #view-services .presta-selector-grid{
    width:100%;
    min-width:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  #view-services .presta-select-card{
    width:auto;
    min-width:0;
    aspect-ratio:1.65/1;
    padding:14px 8px;
  }
  #view-services .presta-select-card .psc-label{
    max-width:100%;
    font-size:clamp(10px,3.1vw,13px);
    overflow-wrap:anywhere;
  }

  /* Les gabarits à deux tarifs gardent leurs deux colonnes, mais chacune peut
     désormais réellement se contracter sans rogner sa bordure droite. */
  #view-services :is(#card-pricing-grid,#cv-pricing-grid,#brochure-pricing-grid){
    width:100%;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px;
  }
  #view-services :is(#card-pricing-grid,#cv-pricing-grid,#brochure-pricing-grid) .price-card{
    min-width:0;
    padding:28px 10px;
  }
  #view-services :is(#card-pricing-grid,#cv-pricing-grid,#brochure-pricing-grid) .pc-count{
    min-width:0;
    font-size:9px;
    overflow-wrap:anywhere;
  }
  #view-services :is(#card-pricing-grid,#cv-pricing-grid,#brochure-pricing-grid) .pc-amount{
    font-size:clamp(38px,11vw,50px);
  }
}

/* ===== v28 — Héros projet (heroCopyBelow) : image pleine largeur, non zoomée, non recadrée ===== */
#view-detail .detail-hero.detail-hero-media-only:not(.detail-hero-sketchbook){min-height:0 !important;height:auto !important;overflow:visible !important;padding:0 !important;}
#view-detail .detail-hero.detail-hero-media-only:not(.detail-hero-sketchbook) img{position:static !important;inset:auto !important;width:100% !important;height:auto !important;object-fit:contain !important;opacity:1 !important;filter:none !important;}