@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --papier: #eef1f4;
  --blanc: #ffffff;
  --encre: #14213d;
  --nuit: #0e1830;
  --acier: #4a5a73;
  --trait: #c3ccd7;
  --ruban: #f2c230;
  --ruban-fonce: #d9a91a;
  --laser: #ff4d4d;
  --vert: #2fbf71;
  --largeur: 74rem;
  --rayon-carte: 14px;
  --ombre-dure: 8px 10px 0 var(--encre);
  --sortie: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ruban); outline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.05; }
p { margin: 0; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 1.25rem; }

/* Petites étiquettes en lettres larges, comme sur un bordereau */
.surtitre {
  display: inline-flex; align-items: center; gap: .6rem;
  font-stretch: 125%; font-weight: 700; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acier);
}
.surtitre::before { content: ""; width: 1.6rem; height: 3px; background: var(--ruban); }
.sombre .surtitre { color: #9fb0c8; }

h2.titre {
  font-stretch: 68%; font-weight: 800;
  font-size: clamp(2.2rem, 5.2vw, 3.9rem);
  letter-spacing: -.005em; margin: .8rem 0 1rem; max-width: 20ch;
}
h2.titre em { font-style: normal; color: var(--acier); }
.sombre h2.titre em { color: var(--ruban); }
.chapeau { color: var(--acier); max-width: 40rem; font-size: 1.1rem; }
.sombre .chapeau { color: #b8c4d6; }

/* ---------- Ruban, en-tête, barre de lecture ---------- */
.ruban {
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--ruban) 0 14px, var(--encre) 14px 28px);
  background-size: 39.6px 10px;
  animation: ruban-defile 1.6s linear infinite;
}
@keyframes ruban-defile { to { background-position: 39.6px 0; } }

.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(238, 241, 244, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.entete.defile { border-bottom-color: var(--trait); box-shadow: 0 6px 24px -18px rgba(20, 33, 61, .5); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.25rem; }
.marque {
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  font-stretch: 75%; font-weight: 800; font-size: 1.35rem; line-height: 1;
}
.marque svg { width: 34px; height: 34px; flex: none; transition: transform .4s var(--sortie); }
.marque:hover svg { transform: rotate(-8deg) scale(1.06); }
.nav { display: flex; align-items: center; gap: 1.6rem; font-weight: 600; font-size: .98rem; }
.nav a { text-decoration: none; position: relative; }
.nav a:not(.bouton-entete)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--ruban); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--sortie);
}
.nav a:not(.bouton-entete):hover::after { transform: scaleX(1); }
.bouton-entete {
  background: var(--encre); color: var(--blanc); padding: .55rem 1.05rem; border-radius: 8px;
  transition: background .2s, color .2s;
}
.bouton-entete:hover { background: var(--ruban); color: var(--encre); }
.progression {
  position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%;
  background: var(--ruban); transform-origin: left; transform: scaleX(0);
}

/* ---------- Boutons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.bouton {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1rem; padding: .9rem 1.35rem; border-radius: 10px;
  border: 2px solid var(--encre);
  transition: transform .2s var(--sortie), box-shadow .2s var(--sortie), background .2s;
}
.bouton svg { width: 18px; height: 18px; transition: transform .25s var(--sortie); }
.bouton:hover svg { transform: translateX(4px); }
.bouton-plein { background: var(--ruban); box-shadow: 4px 5px 0 var(--encre); }
.bouton-plein:hover { transform: translate(-2px, -2px); box-shadow: 6px 7px 0 var(--encre); }
.bouton-plein:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--encre); }
.bouton-vide { background: transparent; }
.bouton-vide:hover { background: var(--blanc); }

/* ---------- Haut de page ---------- */
.accueil {
  position: relative; padding: clamp(2.5rem, 6vw, 5rem) 0 calc(clamp(2rem, 4vw, 3.5rem) + 150px);
  background-image:
    linear-gradient(var(--papier), rgba(238, 241, 244, 0) 30%, rgba(238, 241, 244, 0) 70%, var(--papier)),
    linear-gradient(to right, rgba(195, 204, 215, .45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(195, 204, 215, .45) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}
.accueil-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.accueil h1 {
  font-stretch: 64%; font-weight: 850;
  font-size: clamp(2.7rem, 5.4vw, 4.7rem);
  line-height: .95; letter-spacing: -.01em; margin: 1.1rem 0 1.4rem;
}
.accueil h1 .surligne {
  background: linear-gradient(var(--ruban), var(--ruban)) 0 88% / 100% .3em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .04em;
}
.intro { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--acier); max-width: 36rem; }
.atouts { list-style: none; padding: 0; margin: 2.2rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-size: .92rem; font-weight: 600; }
.atouts li { display: flex; align-items: center; gap: .5rem; }
.atouts svg { width: 18px; height: 18px; flex: none; }

/* Le poste d'expédition : imprimante + étiquette */
.poste { position: relative; max-width: 27rem; justify-self: center; width: 100%; padding: 1rem 0 1.5rem; }
.mouvement .poste { padding-top: 3.2rem; }
.imprimante {
  position: absolute; top: 0; left: -5%; right: -5%; height: 3.6rem; z-index: 2;
  background: var(--encre); border-radius: 14px 14px 6px 6px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .35);
  display: none; align-items: center; gap: .6rem; padding: 0 1rem;
}
.mouvement .imprimante { display: flex; }
.imprimante::after { /* fente de sortie */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 6px; height: 4px; border-radius: 4px; background: #050a16;
}
.imprimante .voyant { width: 9px; height: 9px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 8px var(--vert); }
.imprimante .nom { font-stretch: 125%; font-weight: 700; font-size: .62rem; letter-spacing: .18em; color: #8ea0bb; text-transform: uppercase; }
.imprimante .bouton-imp { margin-left: auto; width: 26px; height: 12px; border-radius: 4px; background: #24365c; }

.etiquette-boite { position: relative; margin: 0 auto; width: 88%; }
.etiquette {
  position: relative; margin: 0; background: var(--blanc);
  border: 2px solid var(--encre); border-radius: 6px; box-shadow: var(--ombre-dure);
  transform: rotate(-1.5deg) translate(4px, 10px);
}
.etiquette-ligne { display: grid; grid-template-columns: 6.2rem 1fr; gap: .8rem; padding: .78rem 1rem; border-bottom: 1.5px dashed var(--trait); }
.etiquette-ligne:first-child { background: var(--encre); color: var(--blanc); border-bottom: 0; border-radius: 3px 3px 0 0; }
.etiquette dt { font-stretch: 125%; font-weight: 700; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acier); padding-top: .2rem; }
.etiquette-ligne:first-child dt { color: #9fb0c8; }
.etiquette dd { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.etiquette dd.grand { font-stretch: 72%; font-weight: 850; font-size: 1.5rem; line-height: 1; }
.etiquette dd.grand small { display: block; margin-top: .3rem; font-stretch: 125%; font-weight: 700; font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ruban); }
.code-barres { position: relative; padding: .9rem 1rem .7rem; overflow: hidden; }
.code-barres svg { width: 100%; height: 3.6rem; }
.code-barres p { text-align: center; font-stretch: 125%; font-weight: 700; letter-spacing: .5em; font-size: .78rem; margin-top: .35rem; padding-left: .5em; }
.code-barres .laser {
  position: absolute; top: .55rem; bottom: 2.1rem; left: 1rem; width: 3px; border-radius: 3px;
  background: var(--laser); box-shadow: 0 0 6px 2px rgba(255, 77, 77, .7), 0 0 22px 6px rgba(255, 77, 77, .3);
  opacity: 0;
}
.code-barres .lu {
  position: absolute; left: .9rem; bottom: .6rem; display: flex; align-items: center; gap: .3rem;
  font-stretch: 125%; font-size: .58rem; font-weight: 800; letter-spacing: .12em; color: var(--vert); opacity: 0;
}
.code-barres .lu svg { width: 12px; height: 12px; }
.scotch {
  position: absolute; width: 5.2rem; height: 1.5rem; z-index: 3;
  background: rgba(242, 194, 48, .78);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0);
  mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0);
}
.scotch-1 { top: -.4rem; left: -1.6rem; transform: rotate(-38deg); }
.scotch-2 { bottom: -.9rem; right: -1.7rem; transform: rotate(-34deg); }

/* Séquence d'impression (seulement si JS et mouvement autorisés) */
.mouvement .imprimante { animation: imp-part .7s var(--sortie) 2.5s both; }
.mouvement .imprimante .voyant { animation: voyant .25s steps(2) 10 .2s; }
.mouvement .etiquette { animation: impression 1.9s cubic-bezier(.45, .05, .55, .95) .35s both, colle .65s var(--sortie) 2.35s forwards; }
.mouvement .scotch { animation: scotch .35s var(--sortie) both; }
.mouvement .scotch-1 { animation-delay: 2.85s; }
.mouvement .scotch-2 { animation-delay: 3.05s; }
.mouvement .code-barres .laser { animation: laser 4.5s ease-in-out 3.4s infinite; }
.mouvement .code-barres .lu { animation: lu 4.5s ease-out 3.4s infinite; }
.mouvement .code-barres svg { animation: barres 4.5s ease-out 3.4s infinite; }
.mouvement .etiquette-ligne > * { animation: encre .5s ease-out both; }
.mouvement .etiquette-ligne:nth-child(4) > * { animation-delay: .55s; }
.mouvement .etiquette-ligne:nth-child(3) > * { animation-delay: .9s; }
.mouvement .etiquette-ligne:nth-child(2) > * { animation-delay: 1.25s; }
.mouvement .etiquette-ligne:nth-child(1) > * { animation-delay: 1.6s; }

@keyframes impression {
  0% { transform: translateY(-100%); clip-path: inset(100% 0 0 0); box-shadow: 0 0 0 var(--encre); }
  22% { transform: translateY(-74%); clip-path: inset(74% 0 0 0); }
  28% { transform: translateY(-70%); clip-path: inset(70% 0 0 0); }
  58% { transform: translateY(-34%); clip-path: inset(34% 0 0 0); }
  64% { transform: translateY(-30%); clip-path: inset(30% 0 0 0); }
  99.9% { clip-path: inset(0 0 0 0); }
  100% { transform: translateY(0); clip-path: inset(-40% -40% -40% -40%); box-shadow: 0 0 0 var(--encre); }
}
@keyframes colle {
  0% { transform: none; box-shadow: 0 0 0 var(--encre); }
  45% { transform: rotate(-3deg) translate(4px, 4px) scale(1.04); box-shadow: 14px 18px 0 rgba(20, 33, 61, .35); }
  100% { transform: rotate(-1.5deg) translate(4px, 10px); box-shadow: var(--ombre-dure); }
}
@keyframes imp-part { to { transform: translateY(-14px); opacity: 0; visibility: hidden; } }
@keyframes voyant { 50% { opacity: .2; } }
@keyframes scotch { from { opacity: 0; scale: 1.6; } to { opacity: 1; scale: 1; } }
@keyframes encre { from { opacity: 0; } to { opacity: 1; } }
@keyframes laser {
  0%, 8% { left: 1rem; opacity: 0; }
  12% { opacity: 1; }
  44% { left: calc(100% - 1.2rem); opacity: 1; }
  48%, 100% { left: calc(100% - 1.2rem); opacity: 0; }
}
@keyframes lu { 0%, 44% { opacity: 0; transform: translateY(4px); } 50%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
@keyframes barres { 0%, 44% { opacity: 1; } 47% { opacity: .55; } 52%, 100% { opacity: 1; } }

/* Apparition du titre */
.mouvement .accueil h1 { animation: monte .9s var(--sortie) both; }
.mouvement .accueil h1 .surligne { animation: trace .8s var(--sortie) .7s both; }
.mouvement .accueil .surtitre, .mouvement .accueil .intro, .mouvement .accueil .actions, .mouvement .accueil .atouts { animation: fondu .8s var(--sortie) both; }
.mouvement .accueil .intro { animation-delay: .3s; }
.mouvement .accueil .actions { animation-delay: .42s; }
.mouvement .accueil .atouts { animation-delay: .54s; }
@keyframes monte { from { opacity: 0; transform: translateY(30px); } }
@keyframes trace { from { background-size: 0% .3em; } }
@keyframes fondu { from { opacity: 0; transform: translateY(14px); } }


/* Rue de livraison en bas du haut de page : maisons, camion, colis */
.route-camion {
  --hD1: 7vw; --hT1: 17vw; --hA: 30vw; --hT2: 47vw; --hB: 64vw; --hD2: 91vw; --off: 40px;
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px; overflow: hidden; pointer-events: none;
}
.route-camion::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 3px; background: repeating-linear-gradient(90deg, var(--trait) 0 26px, transparent 26px 46px); }
.maison { position: absolute; bottom: 20px; left: calc(var(--h) - 65px); width: 130px; }
.maison svg, .arbre svg, .colis-livre svg { display: block; width: 100%; height: auto; }
.arbre { position: absolute; bottom: 22px; left: calc(var(--h) - 17px); width: 34px; }
.colis-livre { position: absolute; bottom: 21px; left: calc(var(--h) + 1px); width: 17px; z-index: 1; }
.camion { position: absolute; left: 0; bottom: 4px; width: 158px; z-index: 2; transform: translateX(calc(var(--hB) + var(--off))); }
.camion svg { width: 100%; height: auto; overflow: visible; }
.fumee circle { fill: var(--trait); opacity: 0; }
[class^="drapeau"] { transform-box: fill-box; transform-origin: 50% 100%; }
.mouvement .camion { animation: rouler 16s linear infinite; }
.mouvement .caisse-camion { animation: cahot .5s ease-in-out infinite alternate; }
.mouvement .roue .tourne { animation: tourne-roue .55s linear infinite; }
.mouvement .fumee circle { animation: fumee 1.2s ease-out infinite; }
.mouvement .fumee circle:nth-child(2) { animation-delay: .4s; }
.mouvement .fumee circle:nth-child(3) { animation-delay: .8s; }
.mouvement .colis-a { animation: colis-a 16s ease-out infinite both; }
.mouvement .colis-b { animation: colis-b 16s ease-out infinite both; }
.mouvement .drapeau-a { animation: drapeau-a 16s ease-out infinite both; }
.mouvement .drapeau-b { animation: drapeau-b 16s ease-out infinite both; }
@keyframes rouler {
  0% { transform: translateX(-190px); animation-timing-function: ease-out; }
  20% { transform: translateX(calc(var(--hA) + var(--off))); }
  30% { transform: translateX(calc(var(--hA) + var(--off))); animation-timing-function: ease-in-out; }
  58% { transform: translateX(calc(var(--hB) + var(--off))); }
  68% { transform: translateX(calc(var(--hB) + var(--off))); animation-timing-function: ease-in; }
  100% { transform: translateX(calc(100vw + 30px)); }
}
@keyframes colis-a {
  0%, 21% { opacity: 0; transform: translate(48px, -30px) rotate(-20deg); }
  22% { opacity: 1; transform: translate(48px, -30px) rotate(-20deg); }
  25.5% { transform: translate(0, 0) rotate(0); }
  26.5% { transform: translate(0, -4px); }
  27.5%, 94% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@keyframes colis-b {
  0%, 59% { opacity: 0; transform: translate(48px, -30px) rotate(-20deg); }
  60% { opacity: 1; transform: translate(48px, -30px) rotate(-20deg); }
  63.5% { transform: translate(0, 0) rotate(0); }
  64.5% { transform: translate(0, -4px); }
  65.5%, 94% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@keyframes drapeau-a { 0%, 25% { transform: rotate(-90deg); } 27%, 94% { transform: rotate(0); } 97%, 100% { transform: rotate(-90deg); } }
@keyframes drapeau-b { 0%, 63% { transform: rotate(-90deg); } 65%, 94% { transform: rotate(0); } 97%, 100% { transform: rotate(-90deg); } }
@keyframes cahot { to { transform: translateY(-1.2px); } }
@keyframes tourne-roue { to { transform: rotate(360deg); } }
@keyframes fumee { 0% { opacity: .8; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-16px, -10px) scale(1.6); } }
.roue .tourne { transform-box: fill-box; transform-origin: center; }
@media (max-width: 640px) {
  .route-camion { --hA: 17vw; --hT2: 41vw; --hB: 57vw; --off: 30px; height: 130px; }
  .maison { width: 104px; left: calc(var(--h) - 52px); }
  .maison-deco, .arbre.deco { display: none; }
  .camion { width: 122px; }
  .colis-livre { width: 14px; }
}

/* ---------- Le trajet (carte) ---------- */
.sombre { background: var(--encre); color: var(--blanc); }
.trajet { position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.trajet::before { /* bande de ruban en biais */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--ruban) 0 10px, var(--encre) 10px 20px);
}
.trajet-grille { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 2rem; align-items: center; }
.trajet .carte { margin: -2rem -3rem -2rem 0; }
.etapes-trajet { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; }
.etapes-trajet li { position: relative; padding: 0 0 1.5rem 2.2rem; }
.etapes-trajet li:last-child { padding-bottom: 0; }
.etapes-trajet li::before {
  content: ""; position: absolute; left: 0; top: .25rem; width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--ruban); background: var(--encre);
}
.etapes-trajet li:not(:last-child)::after {
  content: ""; position: absolute; left: 6px; top: 1.3rem; bottom: .1rem; width: 2px;
  background: repeating-linear-gradient(var(--ruban) 0 5px, transparent 5px 10px);
}
.etapes-trajet span { display: block; font-stretch: 125%; font-weight: 700; font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: #8ea0bb; }
.etapes-trajet strong { font-stretch: 75%; font-weight: 800; font-size: 1.45rem; line-height: 1.15; }
.carte { position: relative; }
.carte svg { width: 100%; height: auto; overflow: visible; }
.carte .terres { stroke: #3d5277; stroke-width: 4.2; stroke-linecap: round; fill: none; }
.carte .fondu-carte { pointer-events: none; }
.carte .route { fill: none; stroke: var(--ruban); stroke-width: 2.2; stroke-linecap: round; opacity: .95; }
.carte .route-fond { fill: none; stroke: rgba(242, 194, 48, .16); stroke-width: 1.4; stroke-dasharray: 3 5; }
.carte .depart circle.coeur { fill: var(--ruban); }
.carte .depart circle.onde { fill: none; stroke: var(--ruban); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.mouvement .carte .depart circle.onde { animation: onde 2.4s ease-out infinite; }
.mouvement .carte .depart circle.onde:nth-of-type(2) { animation-delay: 1.2s; }
@keyframes onde { from { transform: scale(.4); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.carte .etiq-ville { font-family: inherit; font-stretch: 125%; font-weight: 800; font-size: 13px; letter-spacing: .12em; fill: var(--blanc); }
.carte .etiq-fond { fill: var(--encre); stroke: var(--ruban); stroke-width: 1.5; }
.carte .arrivee { fill: var(--blanc); transform-box: fill-box; transform-origin: center; transition: fill .3s; }
.carte .arrivee.livre { fill: var(--ruban); animation: pastille .6s var(--sortie); }
@keyframes pastille { 40% { transform: scale(2.2); } }
.carte .colis rect { fill: var(--ruban); stroke: var(--nuit); stroke-width: 1.5; }
.carte .colis path { stroke: var(--nuit); stroke-width: 1.5; }

/* ---------- Sections ---------- */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.section-blanche { background: var(--blanc); }
.tete-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 1.5rem 3rem; align-items: end; margin-bottom: 3rem; }

/* Cartes produits */
.familles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.famille {
  display: flex; flex-direction: column; background: var(--papier);
  border: 2px solid var(--encre); border-radius: var(--rayon-carte); overflow: hidden;
  transition: transform .35s var(--sortie), box-shadow .35s var(--sortie);
}
.famille:hover { transform: translate(-3px, -5px); box-shadow: var(--ombre-dure); }
.maquette {
  position: relative; aspect-ratio: 16 / 11; border-bottom: 2px solid var(--encre);
  background:
    radial-gradient(circle at 1px 1px, rgba(74, 90, 115, .28) 1px, transparent 1.4px) 0 0 / 14px 14px,
    var(--blanc);
  overflow: hidden;
}
.maquette svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.maquette .badge {
  position: absolute; left: .75rem; top: .7rem; z-index: 2;
  font-stretch: 125%; font-weight: 800; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--encre); color: var(--blanc); padding: .32rem .55rem; border-radius: 5px;
}
.famille-corps { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.famille h3 { font-stretch: 72%; font-weight: 800; font-size: 1.65rem; }
.famille p { color: var(--acier); font-size: 1rem; }
.puces { list-style: none; margin: auto 0 0; padding: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.puces li {
  font-size: .8rem; font-weight: 600; padding: .28rem .6rem; border-radius: 999px;
  border: 1.5px solid var(--trait); background: var(--blanc); transition: border-color .2s, background .2s;
}
.famille:hover .puces li { border-color: var(--encre); }
.famille:hover .puces li:first-child { background: var(--ruban); }

/* --- Maquettes : styles communs --- */
.m-trait { fill: none; stroke: var(--encre); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.m-fin { fill: none; stroke: var(--trait); stroke-width: 1.6; }
.m-texte { font-family: inherit; font-stretch: 125%; font-weight: 800; font-size: 8.5px; letter-spacing: .12em; fill: var(--acier); }
.m-anim { transform-box: fill-box; transform-origin: center; }

/* Maquette 1 : réseau Zigbee + mesure d'énergie (cycle de 9 s) */
.zig .capteur { animation: capteur 9s var(--sortie) infinite both; }
.zig .capteur .halo { fill: var(--ruban); opacity: .35; transform-box: fill-box; transform-origin: center; animation: halo 9s ease-out infinite both; animation-delay: inherit; }
.zig .lien { stroke: var(--ruban-fonce); stroke-width: 2; stroke-dasharray: 3 4; fill: none; animation: lien 9s ease-out infinite both; }
.zig .courbe { fill: none; stroke: var(--encre); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; animation: courbe 9s ease-in-out infinite both; }
.zig .aire { fill: var(--ruban); opacity: .32; animation: aire 9s ease-in-out infinite both; }
.zig .hub-onde { fill: none; stroke: var(--ruban-fonce); stroke-width: 2; animation: onde 1.8s ease-out infinite; }
.zig .point-mesure { animation: point 9s ease-in-out infinite both; offset-rotate: 0deg; }
@keyframes capteur { 0% { opacity: 0; transform: scale(.2); } 4%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes halo { 0% { transform: scale(.5); opacity: .6; } 9% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes lien { 0% { opacity: 0; } 5%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes courbe { 0%, 42% { stroke-dashoffset: 400; opacity: 1; } 78%, 88% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes aire { 0%, 70% { opacity: 0; } 80%, 88% { opacity: .32; } 95%, 100% { opacity: 0; } }

/* Maquette 2 : bass shaker sous le siège (cycle de 2,4 s) */
.vib .siege { animation: secousse 2.4s linear infinite; transform-box: view-box; }
.vib .onde-v { fill: none; stroke: var(--ruban-fonce); stroke-width: 2.6; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 0%; animation: onde-v 2.4s ease-out infinite both; }
.vib .onde-v:nth-of-type(2) { animation-delay: .3s; }
.vib .onde-v:nth-of-type(3) { animation-delay: .6s; }
.vib .barre { transform-box: fill-box; transform-origin: 50% 100%; animation: egaliseur 1.2s ease-in-out infinite; }
.vib .basse { fill: none; stroke: var(--encre); stroke-width: 2.4; stroke-linecap: round; animation: glisse 1.2s linear infinite; }
@keyframes secousse {
  0%, 12% { transform: translate(0, 0); }
  2% { transform: translate(.8px, -1.2px); } 4% { transform: translate(-.8px, 1px); }
  6% { transform: translate(.6px, -.9px); } 8% { transform: translate(-.5px, .6px); } 10% { transform: translate(.3px, -.3px); }
  50%, 62% { transform: translate(0, 0); }
  52% { transform: translate(.6px, -1px); } 54% { transform: translate(-.6px, .8px); } 56% { transform: translate(.4px, -.6px); } 58% { transform: translate(-.3px, .3px); }
  100% { transform: translate(0, 0); }
}
@keyframes onde-v { 0% { transform: scale(.35); opacity: 0; } 10% { opacity: 1; } 60%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes egaliseur { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes glisse { to { transform: translateX(-40px); } }

/* Maquette 3 : caisse d'atelier (cycle de 8 s) */
.caisse .piece { animation: tombe 8s cubic-bezier(.3, 0, .4, 1) infinite both; transform-box: fill-box; transform-origin: center; }
.caisse .couvercle { transform-box: fill-box; transform-origin: 50% 0%; animation: couvercle 8s var(--sortie) infinite both; }
.caisse .coche { animation: coche 8s ease-out infinite both; transform-box: fill-box; transform-origin: center; }
@keyframes tombe {
  0% { opacity: 0; transform: translateY(-130px) rotate(var(--rot, 25deg)); }
  6% { opacity: 1; transform: translateY(4px) rotate(0); }
  8% { transform: translateY(-3px); }
  10%, 62% { opacity: 1; transform: none; }
  65%, 100% { opacity: 0; transform: none; }
}
@keyframes couvercle { 0%, 54% { transform: scaleY(0); opacity: 0; } 60%, 78% { transform: scaleY(1); opacity: 1; } 86%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes coche { 0%, 61% { opacity: 0; transform: scale(.4); } 65%, 76% { opacity: 1; transform: scale(1); } 82%, 100% { opacity: 0; } }

/* Les maquettes ne tournent que lorsqu'elles sont visibles */
.anime:not(.joue) *, .anime:not(.joue) { animation-play-state: paused !important; }

/* Apparitions au défilement */
.js .revele { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--sortie), transform .8s var(--sortie); transition-delay: var(--retard, 0s); }
.js .revele.vu { opacity: 1; transform: none; }


/* ---------- Chiffres ---------- */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 3rem 0 .5rem; border-top: 1px solid #2c3f63; }
.chiffres > div { padding: 1.6rem 1.5rem 0 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .3rem; }
.chiffres > div + div { padding-left: 1.5rem; border-left: 1px solid #2c3f63; }
.chiffres dt { color: #b8c4d6; font-size: .95rem; }
.chiffres .prefixe { display: block; font-stretch: 125%; font-weight: 700; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #9fb0c8; line-height: 1; margin-bottom: .45rem; }
.chiffres dd { margin: 0; font-stretch: 64%; font-weight: 850; font-size: clamp(2.1rem, 3.8vw, 3.4rem); white-space: nowrap; line-height: 1; color: var(--ruban); font-variant-numeric: tabular-nums; }
.chiffres dt strong { color: var(--ruban); font-weight: 700; }
.chiffres dd small { font-size: .38em; font-stretch: 100%; font-weight: 800; letter-spacing: .06em; vertical-align: .9em; }
.note-chiffres { margin-top: 1.2rem; font-size: .78rem; color: #8ea0bb; }

/* ---------- INSTM ---------- */
.instm { background: var(--encre); position: relative; overflow: hidden; }
.instm::after { /* grille discrète */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask: radial-gradient(ellipse at 70% 0%, #000 0%, transparent 70%); mask: radial-gradient(ellipse at 70% 0%, #000 0%, transparent 70%);
}
.instm .conteneur { position: relative; z-index: 1; }
.logo-instm {
  display: inline-block; vertical-align: .12em; margin-right: .25em;
  font-stretch: 125%; font-weight: 900; font-size: .42em; letter-spacing: .08em;
  color: var(--encre); background: var(--ruban); padding: .22em .45em .18em; border-radius: 6px;
  transform: rotate(-3deg);
}
.sous-titre { display: flex; align-items: center; gap: .6rem; font-stretch: 72%; font-weight: 800; font-size: 1.6rem; margin-bottom: 1.4rem; }
.sous-titre .mention { font-stretch: 100%; font-weight: 600; font-size: .9rem; color: #9fb0c8; margin-left: .3rem; padding: .2rem .6rem; border: 1.5px solid #3d5277; border-radius: 999px; line-height: 1.3; }
.sous-titre svg { width: 26px; height: 26px; color: var(--ruban); flex: none; }
.outils { list-style: none; margin: 0 0 4rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.outil { background: #1a2a4c; border: 1.5px solid #2c3f63; border-radius: var(--rayon-carte); overflow: hidden; transition: transform .35s var(--sortie), border-color .35s, box-shadow .35s var(--sortie); }
.outil:hover { transform: translateY(-5px); border-color: var(--ruban); box-shadow: 0 20px 40px -24px rgba(0,0,0,.7); }
.sombre .maquette { background: radial-gradient(circle at 1px 1px, rgba(159,176,200,.18) 1px, transparent 1.4px) 0 0 / 14px 14px, #13203f; border-bottom: 1.5px solid #2c3f63; }
.outil-corps { padding: 1.2rem 1.3rem 1.4rem; }
.outil h4 { margin: 0 0 .4rem; font-stretch: 75%; font-weight: 800; font-size: 1.3rem; line-height: 1.15; }
.outil p { color: #b8c4d6; font-size: .97rem; }
.bloc-3d { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2.5rem; align-items: center; background: #1a2a4c; border: 1.5px solid #2c3f63; border-radius: var(--rayon-carte); overflow: hidden; }
.bloc-3d .maquette { border-bottom: 0; border-right: 1.5px solid #2c3f63; aspect-ratio: 16 / 11; }
.bloc-3d-texte { padding: 2rem 2rem 2rem 0; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.bloc-3d-texte p { color: #b8c4d6; }
.bloc-3d-texte .sous-titre { margin: 0; }
.puces-sombres { margin: 0; }
.puces-sombres li { background: transparent; border-color: #3d5277; color: var(--blanc); }
.bloc-3d:hover .puces-sombres li { border-color: var(--ruban); }
.bloc-3d .bouton { margin-top: .4rem; }

/* Maquette : extension (cycle 8 s) */
.ext .ean-hl { fill: var(--ruban); opacity: 0; animation: ean 8s ease-out infinite both; }
.ext .ext-popup { animation: popup 8s var(--sortie) infinite both; transform-box: fill-box; transform-origin: 100% 0; }
.ext .ext-ligne { animation: ligne 8s var(--sortie) infinite both; }
.ext .curseur { animation: curseur 8s ease-in-out infinite both; }
.ext .ext-icone { animation: icone 8s ease-out infinite both; }
@keyframes ean { 0% { opacity: 0; } 3% { opacity: .9; } 8%, 82% { opacity: .55; } 90%, 100% { opacity: 0; } }
@keyframes popup { 0%, 8% { opacity: 0; transform: translateY(-8px) scale(.92); } 13%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-8px) scale(.96); } }
@keyframes ligne { 0% { opacity: 0; transform: translateX(10px); } 4%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
@keyframes curseur { 0% { transform: translate(250px, 150px); } 8% { transform: translate(288px, 28px); } 11% { transform: translate(288px, 30px); } 30% { transform: translate(160px, 120px); } 60% { transform: translate(240px, 128px); } 100% { transform: translate(250px, 150px); } }
@keyframes icone { 0%, 8% { transform: scale(1); } 10% { transform: scale(.82); } 13%, 100% { transform: scale(1); } }

/* Maquette : appli mobile (cycle 7 s) */
.app .app-laser { animation: scan 7s ease-in-out infinite both; }
.app .app-camera { animation: camera 7s ease-out infinite both; }
.app .app-fiche { animation: fiche 7s var(--sortie) infinite both; }
.app .app-puce { animation: puce 7s var(--sortie) infinite both; transform-box: fill-box; transform-origin: center; }
@keyframes scan { 0% { transform: translateY(0); opacity: 1; } 10% { transform: translateY(46px); } 20% { transform: translateY(0); } 30% { transform: translateY(46px); opacity: 1; } 33%, 100% { opacity: 0; transform: translateY(46px); } }
@keyframes camera { 0%, 32% { opacity: 1; } 38%, 92% { opacity: .25; } 100% { opacity: 1; } }
@keyframes fiche { 0%, 33% { opacity: 0; transform: translateY(120px); } 40%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(120px); } }
@keyframes puce { 0% { opacity: 0; transform: scale(.6); } 5%, 45% { opacity: 1; transform: scale(1); } 52%, 100% { opacity: 0; transform: scale(.9); } }

/* Maquette : automatisation (cycle 7 s) */
.auto .log { animation: log 7s ease-out infinite both; }
.auto .aiguille { animation: tourne 2s linear infinite; transform-origin: 0 0; }
.auto .auto-barre { transform-box: fill-box; transform-origin: left; animation: barre 7s linear infinite both; }
.auto .auto-curseur { animation: clignote 1s steps(2) infinite; }
@keyframes log { 0% { opacity: 0; transform: translateX(-8px); } 3%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes barre { 0% { transform: scaleX(0); } 62%, 88% { transform: scaleX(1); } 95%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes clignote { 50% { opacity: 0; } }

/* Maquette : impression 3D (cycle 8 s) */
.imp3d .couche { fill: var(--ruban); stroke: var(--encre); stroke-width: 1; transform-box: fill-box; transform-origin: left; animation: couche 8s linear infinite both; }
.imp3d .trou { animation: aire 8s ease-in-out infinite both; opacity: 0; }
.imp3d .tete-x { animation: va-vient .6s linear .3s infinite alternate both; }
.imp3d .couche:nth-child(even) { transform-origin: right; }
.imp3d .tete-y { animation: monte-tete 8s steps(1) infinite both; }
@keyframes couche { 0% { transform: scaleX(0); opacity: 1; } 7% { transform: scaleX(1); } 88% { transform: scaleX(1); opacity: 1; } 95%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes va-vient { from { transform: translateX(0); } to { transform: translateX(72px); } }
@keyframes monte-tete {
0% { transform: translateY(13px); } 11.25% { transform: translateY(5px); } 18.75% { transform: translateY(-3px); } 26.25% { transform: translateY(-11px); } 33.75% { transform: translateY(-19px); } 41.25% { transform: translateY(-27px); } 48.75% { transform: translateY(-35px); } 56.25% { transform: translateY(-43px); } 63.75% { transform: translateY(-51px); } 71.25% { transform: translateY(-59px); } 78.75%, 100% { transform: translateY(-75px); }
}

/* ---------- Parcours ---------- */
.parcours { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.parcours-ligne { position: absolute; left: 2rem; right: calc(33.33% - 2rem); top: 2rem; height: 4px; background: var(--trait); border-radius: 4px; }
.parcours-ligne span { position: absolute; inset: 0; background: var(--ruban); border-radius: 4px; transform-origin: left; transform: scaleX(var(--p)); }
.etape { position: relative; padding-top: 5.5rem; }
.etape-noeud {
  position: absolute; top: 0; left: 0; width: 4rem; height: 4rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--blanc); border: 3px solid var(--trait); color: var(--acier);
  transition: background .4s, border-color .4s, color .4s, transform .5s var(--sortie), box-shadow .4s;
}
.etape-noeud svg { width: 26px; height: 26px; }
.etape.actif .etape-noeud { background: var(--ruban); border-color: var(--encre); color: var(--encre); transform: scale(1.08); box-shadow: 4px 5px 0 var(--encre); }
.etape-num { font-stretch: 125%; font-weight: 800; font-size: .7rem; letter-spacing: .16em; color: var(--acier); }
.etape h3 { font-stretch: 72%; font-weight: 800; font-size: 1.9rem; margin: .3rem 0 .6rem; }
.etape p { color: var(--acier); max-width: 22rem; }
.js .etape { opacity: .45; transition: opacity .5s; }
.js .etape.actif { opacity: 1; }

/* ---------- Contact ---------- */
.contact { padding: clamp(4rem, 8vw, 6.5rem) 0; background: var(--papier); border-top: 2px solid var(--encre); }
.contact .conteneur { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-mail {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.8rem;
  font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.25rem); text-decoration: none;
  padding: .7rem 1rem; border: 2px solid var(--encre); border-radius: 10px; background: var(--blanc);
  transition: background .2s, transform .2s var(--sortie), box-shadow .2s var(--sortie); overflow-wrap: anywhere;
}
.contact-mail svg { width: 22px; height: 22px; flex: none; }
.contact-mail:hover { background: var(--ruban); transform: translate(-2px, -2px); box-shadow: 4px 5px 0 var(--encre); }
.formulaire { background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--rayon-carte); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--ombre-dure); display: grid; gap: 1.1rem; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.champ { display: grid; gap: .35rem; }
.champ label { font-stretch: 125%; font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acier); }
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--encre); background: var(--papier);
  border: 2px solid var(--trait); border-radius: 9px; padding: .75rem .85rem; transition: border-color .2s, background .2s, box-shadow .2s;
}
.champ textarea { min-height: 9rem; resize: vertical; }
.champ select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--acier); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--encre); background: var(--blanc); box-shadow: 0 0 0 4px rgba(242, 194, 48, .45); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consentement { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--acier); cursor: pointer; }
.consentement input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--encre); flex: none; }
.formulaire .bouton { justify-self: start; }
.message-envoi:empty { display: none; }
.message-envoi { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 10px; border: 2px solid; animation: arrive .6s var(--sortie) both; }
.message-envoi:focus { outline: none; }
.message-envoi svg { width: 28px; height: 28px; flex: none; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.message-envoi strong { display: block; font-size: 1.05rem; }
.message-envoi span { font-size: .95rem; }
.message-envoi.ok { background: #e6f7ee; border-color: var(--vert); color: #135c36; }
.message-envoi.ok svg circle { fill: var(--vert); stroke: none; } .message-envoi.ok svg path { stroke: #fff; stroke-dasharray: 20; animation: coche-trace .5s ease-out .3s both; }
.message-envoi.erreur { background: #fdecec; border-color: #d64545; color: #8a1f1f; }
.message-envoi.erreur svg circle { fill: #d64545; stroke: none; } .message-envoi.erreur svg path { stroke: #fff; }
@keyframes arrive { from { opacity: 0; transform: translateY(-8px); } }
@keyframes coche-trace { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }


/* ---------- Page mentions légales ---------- */
.page-texte { padding: 3rem 0 5rem; }
.page-texte .conteneur { max-width: 46rem; }
.page-texte h1 { font-stretch: 68%; font-weight: 850; font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1; margin: 0 0 2rem; }
.page-texte h2 { font-stretch: 75%; font-weight: 800; font-size: 1.5rem; margin: 2.5rem 0 .6rem; padding-top: 1.25rem; border-top: 2px solid var(--encre); }
.page-texte p { margin: 0 0 1rem; }
.page-texte p, .page-texte li { color: var(--encre); }
.page-texte a { text-decoration-color: var(--ruban); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--nuit); color: #b8c4d6; padding: 2rem 0; font-size: .92rem; }
.pied .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.pied a { text-decoration: none; } .pied a:hover { color: var(--ruban); }

/* ---------- Écrans moyens et téléphones ---------- */
@media (max-width: 960px) {
  .outils { grid-template-columns: 1fr; max-width: 34rem; }
  .familles { grid-template-columns: 1fr; max-width: 34rem; }
  .famille { display: grid; grid-template-columns: 1fr; }
  .tete-section { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .contact .conteneur { grid-template-columns: 1fr; }
  .bloc-3d { grid-template-columns: 1fr; gap: 0; }
  .bloc-3d .maquette { border-right: 0; border-bottom: 1.5px solid #2c3f63; }
  .bloc-3d-texte { padding: 1.5rem; }
  .parcours { grid-template-columns: 1fr; gap: 2.2rem; }
  .parcours-ligne { left: 1.9rem; right: auto; top: 2rem; bottom: 2rem; width: 4px; height: auto; }
  .parcours-ligne span { transform-origin: top; transform: scaleY(var(--p)); }
  .etape { padding: .4rem 0 0 5.5rem; min-height: 4rem; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .chiffres > div { padding: 1.2rem 0; }
  .chiffres > div + div { padding-left: 0; border-left: 0; }
  .chiffres > div:nth-child(even) { padding-left: 1rem; border-left: 1px solid #2c3f63; }
  .chiffres > div:nth-child(n+3) { border-top: 1px solid #2c3f63; }
  .accueil-grille, .trajet-grille { grid-template-columns: 1fr; }
  .poste { max-width: 24rem; }
  .trajet .carte { margin: 0 -1.25rem; }
}
@media (max-width: 640px) {
  .nav a:not(.bouton-entete) { display: none; }
  .entete .conteneur { height: 3.75rem; }
  .accueil h1 { font-size: clamp(2.6rem, 12.5vw, 3.6rem); max-width: none; }
  .etiquette-ligne { grid-template-columns: 5.6rem 1fr; gap: .6rem; padding: .7rem .85rem; }
  .etiquette dt { font-size: .54rem; letter-spacing: .08em; }
  .etiquette dd { font-size: .9rem; }
  .imprimante { left: 0; right: 0; }
  .scotch-1 { left: -1rem; } .scotch-2 { right: -1rem; }
  .bouton { padding: .85rem 1.15rem; }
  .duo { grid-template-columns: 1fr; }
  .logo-instm { display: table; margin-bottom: .5rem; }
}

/* ---------- Mouvement réduit : tout est affiché, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .revele { opacity: 1; transform: none; }
  .js .etape { opacity: 1; }
  .parcours-ligne span { transform: none !important; }
  .imprimante { display: none; }
  .caisse .couvercle, .caisse .coche, .ext .curseur { display: none; }
  .imp3d .tete-y { transform: translateY(-75px); }
  .app .app-camera { opacity: .25; }
  .app .app-laser { opacity: 0; }
}