/* ==========================================================================
   Datis Conseils & Solutions – feuille de style
   Charte « DATIS Web » (dérivée de la charte MODULO) : voir docs/CHARTE.md.
   Règle : aucune couleur, taille ou arrondi en dur, tout passe par les jetons.
   Aucune ressource externe (la politique CSP du site l'interdit).
   ========================================================================== */

/* ---------- Jetons : thème sombre (défaut) ---------- */
:root, [data-theme="sombre"] {
  --orange: #fd7e00;
  --orange-clair: #ff9633;
  --orange-fonce: #d96c00;
  --orange-halo: rgba(253,126,0,.35);
  --sur-orange: #1f1f1f;
  --fond: #333333;
  --surface: #3c3c3c;
  --surface2: #454545;
  --barre: #2a2a2a;
  --bordure: #4a4a4a;
  --bordure-forte: #5c5c5c;
  --texte: #ededed;
  --texte2: #adadad;
  --texte3: #8a8a8a;
  --lien: #fd7e00;
  --lien-survol: #ff9633;
  --alerte: #ff8a8a;
  --alerte-fond: rgba(255,138,138,.14);
  --alerte-bordure: rgba(255,138,138,.5);
  --ok: #98fb98;
  --ok-fond: rgba(152,251,152,.12);
  --ok-bordure: rgba(152,251,152,.55);
  --attention: #f1dfa6;
  --attention-fond: rgba(241,223,166,.16);
  --info: #8ab4f8;
  --info-fond: rgba(138,180,248,.14);
  --survol: rgba(255,255,255,.05);
  --zebre: rgba(255,255,255,.035);
  --voile: rgba(0,0,0,.6);
  --marque-titre: #f2f2f2;
  --ombre-carte: 0 1px 2px rgba(0,0,0,.25);
  --ombre-modale: 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}

/* ---------- Jetons : thème clair ---------- */
[data-theme="clair"] {
  --fond: #f1f3f6;
  --surface: #ffffff;
  --surface2: #e9edf2;
  --barre: #ffffff;
  --bordure: #dce1e8;
  --bordure-forte: #bfc7d1;
  --texte: #1e2329;
  --texte2: #4b535c;
  --texte3: #6b747e;
  --lien: #b35800;
  --lien-survol: #8a4300;
  --alerte: #b3261e;
  --alerte-fond: rgba(179,38,30,.09);
  --alerte-bordure: rgba(179,38,30,.5);
  --ok: #1b7a45;
  --ok-fond: rgba(27,122,69,.10);
  --ok-bordure: rgba(27,122,69,.55);
  --attention: #7a5a00;
  --attention-fond: rgba(122,90,0,.10);
  --info: #1f5fad;
  --info-fond: rgba(31,95,173,.10);
  --survol: rgba(16,24,40,.04);
  --zebre: rgba(16,24,40,.024);
  --marque-titre: #4a4f57;
  --ombre-carte: 0 1px 2px rgba(16,24,40,.08);
  --ombre-modale: 0 10px 30px rgba(16,24,40,.35);
  color-scheme: light;
}

/* ---------- Jetons communs ---------- */
:root {
  /* Ajout web pour les illustrations : papier d'étiquette, encre, écran d'appareil.
     Identiques dans les deux thèmes (une étiquette reste blanche, un écran reste sombre). */
  --papier: #f5f3ee;
  --encre: #1f1f1f;
  --encre2: rgba(31,31,31,.32);
  --ecran: #222222;
  --ecran-texte: rgba(255,255,255,.38);
  --ecran-texte-fort: rgba(255,255,255,.86);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-20: 80px;
  --radius-segment: 3px;
  --radius-pastille: 4px;
  --radius-controle: 5px;
  --radius-tuile: 6px;
  --radius-carte: 8px;
  --radius-modale: 10px;
  --radius-accueil: 12px;
  --hauteur-controle: 36px;
  --hauteur-tactile: 44px;
  --hauteur-entete: 64px;
  --largeur-contenu: 1160px;
  --largeur-texte: 780px;
  --marge-page: var(--space-6);
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (max-width: 600px) { :root { --marge-page: var(--space-4); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--font-sans); font-size: 16px; line-height: 26px;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
p { margin: 0 0 var(--space-4); }
a { color: var(--lien); }
a:hover { color: var(--lien-survol); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.muted { color: var(--texte2); }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--orange); color: var(--sur-orange); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-controle); font-weight: 600;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); color: var(--sur-orange); }

.container { width: 100%; max-width: var(--largeur-contenu); margin: 0 auto; padding: 0 var(--marge-page); }
.narrow { max-width: calc(var(--largeur-texte) + 2 * var(--marge-page)); }

.icon {
  width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -4px;
}

/* ---------- Titres ---------- */
h1, h2, h3 { color: var(--texte); font-weight: 600; margin: 0 0 var(--space-3); }
h2 { font-size: 28px; line-height: 34px; letter-spacing: -.005em; }
h3, .h3 { font-size: 18px; line-height: 24px; }
.kicker {
  margin: 0 0 var(--space-3); color: var(--lien);
  font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.h-hero { margin: 0 0 var(--space-4); font-size: 44px; line-height: 50px; font-weight: 600; letter-spacing: -.01em; color: var(--texte); }
.h-page { margin: 0 0 var(--space-3); font-size: 36px; line-height: 42px; font-weight: 600; letter-spacing: -.01em; color: var(--texte); }
.h-section { margin: 0 0 var(--space-3); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.005em; color: var(--texte); }
.h-card { margin: 0 0 var(--space-2); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--texte); }
.lead { margin: 0; max-width: 720px; font-size: 19px; line-height: 30px; color: var(--texte2); }
@media (max-width: 600px) {
  .h-hero { font-size: 32px; line-height: 38px; }
  .h-page { font-size: 28px; line-height: 34px; }
  .h-section, h2 { font-size: 24px; line-height: 30px; }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--hauteur-controle); padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-controle);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 20px; text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.btn .icon { width: 16px; height: 16px; vertical-align: 0; }
.btn-primary { background: var(--orange); color: var(--sur-orange); }
.btn-primary:hover { background: var(--orange-clair); color: var(--sur-orange); }
.btn-primary:active { background: var(--orange-fonce); }
.btn-secondary { background: var(--surface2); border-color: var(--bordure-forte); color: var(--texte); }
.btn-secondary:hover { background: var(--bordure); color: var(--texte); }
.btn-outline { background: transparent; border-color: var(--orange); color: var(--lien); }
.btn-outline:hover { background: var(--orange); color: var(--sur-orange); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--surface2); border-color: var(--bordure-forte); color: var(--texte3); cursor: not-allowed;
}
.btn-lg { height: var(--hauteur-tactile); padding: 0 20px; }
.btn-icon {
  width: 32px; height: 32px; padding: 0; background: var(--surface2);
  border-color: var(--bordure-forte); color: var(--texte2);
}
.btn-icon:hover { border-color: var(--orange); color: var(--lien); }
.btn-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn-busy::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--sur-orange); border-right-color: transparent; animation: rouet .8s linear infinite;
}
@keyframes rouet { to { transform: rotate(360deg); } }
@media (pointer: coarse) { .btn { height: var(--hauteur-tactile); } .btn-icon { width: 44px; height: 44px; } }
.link-more { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--lien); font-weight: 600; text-decoration: none; }
.link-more:hover { color: var(--lien-survol); text-decoration: underline; }
.link-more .icon { width: 16px; height: 16px; vertical-align: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Bouton thème : lune en sombre, soleil en clair */
.theme-toggle .icon-soleil { display: none; }
[data-theme="clair"] .theme-toggle .icon-soleil { display: block; }
[data-theme="clair"] .theme-toggle .icon-lune { display: none; }

/* ---------- Pastille d'état ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-pastille);
  font-size: 12px; line-height: 16px; font-weight: 600; background: var(--surface2); color: var(--texte2);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-ok { background: var(--ok-fond); color: var(--ok); }
.badge-alerte { background: var(--alerte-fond); color: var(--alerte); }
.badge-attention { background: var(--attention-fond); color: var(--attention); }
.badge-info { background: var(--info-fond); color: var(--info); }

/* ---------- Champs ---------- */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.field label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--texte2); }
.field input, .field select, .field textarea {
  width: 100%; height: var(--hauteur-controle); padding: 6px 10px;
  font: inherit; font-size: 15px; color: var(--texte); background: var(--surface);
  border: 1px solid var(--bordure-forte); border-radius: var(--radius-controle);
}
.field textarea { height: auto; min-height: 140px; resize: vertical; }
.field ::placeholder { color: var(--texte3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-halo);
}
/* is-invalid (charte) = input-validation-error (classe posée par ASP.NET) */
.field .is-invalid, .field .input-validation-error { border-color: var(--alerte); }
.field-help { font-size: 12.5px; line-height: 18px; color: var(--texte3); }
.field-error { font-size: 12.5px; line-height: 18px; color: var(--alerte); }
.field-error:empty { display: none; }
@media (pointer: coarse) { .field input, .field select { height: var(--hauteur-tactile); } }
.form-note { margin: 0; font-size: 14px; line-height: 20px; color: var(--texte2); }
/* Champ piège anti-robot : hors écran */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Messages ---------- */
.alert {
  padding: 12px 14px; border-radius: var(--radius-controle);
  background: var(--alerte-fond); border: 1px solid var(--alerte-bordure); color: var(--alerte);
}
.alert strong { font-weight: 600; }
.alert ul { margin: 0; padding-left: 1.2em; }
.validation-summary-valid { display: none; }
.success-line { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--ok); font-weight: 600; }
.success-line .icon { width: 16px; height: 16px; vertical-align: 0; }
.success-line[hidden] { display: none; }

/* ---------- Cartes ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.card {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-carte);
  box-shadow: var(--ombre-carte); padding: var(--space-6);
}
.card > .icon { display: block; width: 28px; height: 28px; color: var(--lien); margin-bottom: var(--space-3); }
.card p { margin: 0; color: var(--texte2); }
.card p + p { margin-top: var(--space-3); }
.card a { font-weight: 600; } /* lien dans une carte : SemiBold (contraste 4,3:1 en sombre) */
.card-link { display: flex; flex-direction: column; gap: var(--space-3); color: var(--texte); text-decoration: none; }
.card-link > .icon { margin-bottom: 0; }
.card-link .h-card { margin: 0; }
.card-link:hover { border-color: var(--orange); color: var(--texte); }
.card-link p { flex: 1; }
.card-link .link-more { margin-top: auto; }

/* ---------- Tuile de chiffre ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); align-content: start; }
.stat { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-tuile); padding: 14px 17px; }
.stat-label { display: block; font-size: 11.2px; line-height: 14px; letter-spacing: .09em; text-transform: uppercase; color: var(--texte3); }
.stat-value { display: block; margin-top: 6px; font-size: 25.6px; line-height: 30px; font-weight: 700; color: var(--texte); font-variant-numeric: tabular-nums; }
.stat-note { display: block; font-size: 12.8px; line-height: 18px; color: var(--texte3); }

/* ---------- Étapes ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: etape;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); }
.steps li { counter-increment: etape; padding-top: var(--space-4); border-top: 1px solid var(--bordure-forte); }
.steps li::before {
  content: "0" counter(etape); display: block; margin-bottom: var(--space-2);
  color: var(--lien); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
}
.steps h3 { margin: 0 0 var(--space-2); font-size: 18px; line-height: 24px; font-weight: 600; }
.steps p { margin: 0; color: var(--texte2); }

/* ---------- Listes à coches ---------- */
.checklist { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; padding: 6px 0; }
.checklist .icon { color: var(--lien); margin-top: 3px; vertical-align: 0; }
.card .checklist { margin: 0; }
.card .checklist li { color: var(--texte2); }

/* ---------- En-tête du site ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--barre); border-bottom: 1px solid var(--bordure); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--hauteur-entete); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--texte); text-decoration: none; }
.brand:hover { color: var(--texte); }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-mark .anneau { fill: none; stroke: var(--orange); stroke-width: 7.9; }
.brand-mark .point { fill: var(--orange); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 18px; font-weight: 700; letter-spacing: .14em; color: var(--marque-titre); }
.brand-text small { font-size: 12px; color: var(--texte2); }

.header-tools { display: flex; align-items: center; gap: var(--space-2); }
.main-nav ul { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.main-nav a:not(.btn) {
  display: block; padding: 7px 12px; border-radius: var(--radius-pastille);
  font-size: 15px; line-height: 20px; font-weight: 500; color: var(--texte); text-decoration: none;
}
.main-nav a:not(.btn):hover { background: var(--survol); color: var(--lien); }
.main-nav a[aria-current="page"], .main-nav .is-active > a { color: var(--lien); font-weight: 600; }
.main-nav .nav-cta { margin-left: var(--space-2); }

.has-sub { position: relative; }
.sub {
  min-width: 260px; padding: var(--space-1); background: var(--surface); border: 1px solid var(--bordure-forte);
  border-radius: var(--radius-carte); box-shadow: var(--ombre-modale);
}
.main-nav .sub { display: block; position: absolute; top: 100%; left: 0; visibility: hidden; opacity: 0; }
.has-sub:hover > .sub, .has-sub:focus-within > .sub { visibility: visible; opacity: 1; }
.sub a:not(.btn) { padding: 8px 14px; }

.nav-toggle { display: none; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; position: relative;
}
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 6px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 2;
    max-height: calc(100vh - var(--hauteur-entete)); overflow-y: auto;
    background: var(--surface); border-bottom: 1px solid var(--bordure-forte);
    border-radius: 0 0 var(--radius-modale) var(--radius-modale); box-shadow: var(--ombre-modale);
    padding: var(--space-3) var(--marge-page) var(--space-6);
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; }
  .main-nav .sub {
    position: static; visibility: visible; opacity: 1; min-width: 0;
    background: none; border: 0; box-shadow: none; padding: 0 0 0 var(--space-4);
  }
  .main-nav .nav-cta { margin: var(--space-3) 0 0; }
  .main-nav .nav-cta .btn { width: 100%; }
  /* Voile derrière le tiroir ouvert */
  body.menu-ouvert::after {
    content: ""; position: fixed; inset: var(--hauteur-entete) 0 0 0; background: var(--voile); z-index: 40;
  }
}

/* ---------- Héros ---------- */
/* Seul dégradé autorisé par la charte : halo orange radial derrière le titre. */
.hero { position: relative; overflow: hidden; background: var(--fond); padding: var(--space-20) 0; }
.hero::before {
  content: ""; position: absolute; width: 600px; height: 600px; right: -120px; top: -260px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(253,126,0,.20), rgba(253,126,0,.07) 38%, rgba(253,126,0,0) 68%);
}
.hero-inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-12); align-items: center;
}
.hero-text > * { max-width: var(--largeur-texte); }
.hero-ill { max-width: 440px; justify-self: end; width: 100%; }
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-ill { max-width: 340px; justify-self: center; }
}
.hero .actions { margin-top: var(--space-8); }
.hero-rule { width: 56px; height: 2px; background: var(--orange); border: 0; margin: 0 0 var(--space-6); }
.page-hero { padding: var(--space-12) 0; background: var(--fond); border-bottom: 1px solid var(--bordure); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.page-hero-ill { max-width: 320px; justify-self: end; width: 100%; }
@media (max-width: 760px) {
  .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero-ill { max-width: 260px; justify-self: start; }
}
.page-hero .actions { margin-top: var(--space-6); }
@media (max-width: 600px) { .hero { padding: var(--space-12) 0; } }

/* ---------- Sections ---------- */
.section { padding: var(--space-20) 0; }
.section-alt { background: var(--barre); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.section-head { max-width: 720px; margin-bottom: var(--space-8); }
.section-cta { padding-top: 0; }
.section-alt + .section-cta, .page-hero + .section-cta { padding-top: var(--space-20); }
@media (max-width: 600px) { .section { padding: var(--space-12) 0; } }

/* Deux colonnes : texte + encadré */
.two-col { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: var(--space-8); } }
.side { position: sticky; top: calc(var(--hauteur-entete) + var(--space-6)); }
@media (max-width: 860px) { .side { position: static; } }

.prose { max-width: var(--largeur-texte); }
.prose h2 { margin-top: var(--space-8); }
.prose h2:first-child { margin-top: 0; }

.offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }

.contact-lines { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.contact-lines li { display: flex; gap: var(--space-2); align-items: center; padding: 2px 0; color: var(--texte2); }
.contact-lines .icon { color: var(--lien); width: 16px; height: 16px; vertical-align: 0; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-side { display: grid; gap: var(--space-4); }
.contact-side > .muted { display: flex; align-items: center; gap: var(--space-2); margin: 0; }

.downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.downloads li { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.downloads li > .icon { width: 28px; height: 28px; color: var(--lien); margin: 0; }
.downloads li > div { flex: 1; min-width: 200px; }

/* ---------- Appel à l'action ---------- */
.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-accueil);
  box-shadow: var(--ombre-carte); padding: var(--space-8);
}
.cta-band h2 { margin: 0 0 var(--space-1); font-size: 24px; line-height: 30px; font-weight: 600; }
.cta-band p { margin: 0; color: var(--texte2); }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--barre); border-top: 1px solid var(--bordure); color: var(--texte2); font-size: 14px; line-height: 22px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: var(--space-8); padding-top: var(--space-12); padding-bottom: var(--space-8); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid p { margin: 0 0 var(--space-2); }
.footer-brand { color: var(--texte); }
.footer-brand strong { letter-spacing: .14em; }
.footer-hours { color: var(--texte3); }
.footer-title { margin: 0 0 var(--space-3); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte3); }
.site-footer address { font-style: normal; }
.site-footer a { color: var(--texte); text-decoration: none; }
.site-footer a:hover { color: var(--lien); text-decoration: underline; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-bottom { padding-top: var(--space-4); padding-bottom: var(--space-4); border-top: 1px solid var(--bordure); color: var(--texte3); font-size: 13px; }
.footer-bottom p { margin: 0; }

/* Placement de l'en-tête : menu aligné à droite, outils en bout de ligne */
.main-nav { margin-left: auto; }
@media (max-width: 900px) { .header-tools { margin-left: auto; } }
sup { line-height: 0; }

/* ==========================================================================
   Illustrations métier (Pages/Shared/_Illustration.cshtml)
   ========================================================================== */
.ill { display: block; width: 100%; height: auto; overflow: visible; }
.ill .i-f  { fill: var(--surface); stroke: var(--bordure-forte); stroke-width: 1.5; }
.ill .i-f2 { fill: var(--surface2); stroke: var(--bordure-forte); stroke-width: 1.5; }
.ill .i-p  { fill: var(--papier); stroke: var(--bordure-forte); stroke-width: 1; }
.ill .i-e  { fill: var(--encre); }
.ill .i-e2 { fill: var(--encre2); }
.ill .i-o  { fill: var(--orange); }
.ill .i-ol { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ill .i-l  { fill: none; stroke: var(--bordure-forte); stroke-width: 2; stroke-linecap: round; }
.ill .i-fente { fill: var(--encre); }
.ill .i-ecran { fill: var(--ecran); }
.ill .i-ecran-l { fill: var(--ecran-texte); }
.ill .i-ok-o { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ill .i-ok { fill: none; stroke: var(--ecran-texte); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ill .i-strip { fill: none; stroke: var(--papier); stroke-width: 6; }
.ill .i-beam { fill: var(--orange); fill-opacity: .16; }
.ill .i-code { fill: var(--texte3); }
.ill .i-code2 { fill: var(--texte2); }
.ill .i-txt { fill: var(--encre); font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; }
.ill .i-txt-titre { font-size: 15px; font-weight: 700; }
.ill .i-txt-titre-s { font-size: 13px; font-weight: 700; }
.ill .i-txt-s { font-size: 8.5px; }
.ill .i-cote { fill: var(--bordure); stroke: var(--bordure-forte); stroke-width: 1.5; stroke-linejoin: round; }
.ill .i-vitre { fill: var(--ecran); fill-opacity: .88; stroke: var(--bordure-forte); stroke-width: 1.5; stroke-linejoin: round; }
.ill .i-reflet { fill: #ffffff; fill-opacity: .06; }
.ill .i-dash { fill: none; stroke: var(--bordure-forte); stroke-width: 2; stroke-dasharray: 3 7; }
.ill .i-plaque { fill: none; stroke: var(--bordure-forte); stroke-width: 3; stroke-linecap: round; }
.ill .i-strip-fin { stroke-width: 3; }
.ill .i-txt-num { font-size: 10px; font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.ill .i-txt-sur-orange { fill: var(--sur-orange); }
.ill .i-txt-ecran { fill: var(--orange); font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.ill .ill-scan { opacity: 0; }
/* Rotation/déplacement autour de l'élément lui-même pour les pièces animées */
.ill .ill-rouleau, .ill .ill-gachette, .ill .ill-led { transform-box: fill-box; }

/* ==========================================================================
   Mouvement en boucle — léger : uniquement transform et opacity (calculés par la
   carte graphique), cycles lents, et une illustration hors de l'écran est mise en
   pause (classe .en-vue posée par site.js). Tout est coupé si le visiteur a demandé
   à réduire les animations : les illustrations restent alors fixes.
   ========================================================================== */
.ill .ill-ecran-2 { opacity: 0; }
.ill-cadre { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* Héros (9 s) : l'imprimante industrielle imprime (rouleaux qui tournent, voyant),
     l'étiquette sort par l'avant, est lue, puis détachée ; l'écran suit. */
  .ill-zt .ill-label  { animation: z-sortie 9s ease-in-out infinite; }
  .ill-zt .ill-scan   { animation: z-lecture 9s ease-in-out infinite; }
  .ill-zt .ill-dash   { animation: z-roule 9s linear infinite; }
  .ill-hero .ill-led  { animation: h-voyant 9s linear infinite; }
  .ill .ill-ecran-1 { animation: h-ecran1 9s linear infinite; }
  .ill .ill-ecran-2 { animation: h-ecran2 9s linear infinite; }

  /* Imprimante (6 s) : rouleaux qui tournent, étiquette qui sort puis part */
  .ill .ill-rouleau   { transform-origin: center; animation: tourne 5s linear infinite; }
  .ill .ill-rouleau-2 { animation-duration: 2.5s; }
  .ill .ill-glisse    { animation: p-sortie 6s ease-in-out infinite; }
  .ill:not(.ill-hero) .ill-led { animation: pulse 2s ease-in-out infinite; }

  /* Terminal (4 s) : gâchette, faisceau, lecture validée */
  .ill .ill-gachette   { animation: s-gachette 4s ease-in-out infinite; }
  .ill .ill-beam, .ill .ill-beam-trait { animation: s-faisceau 4s linear infinite; }
  .ill .ill-ok         { animation: s-ok 4s ease-in-out infinite; }

  /* Impression-pose (6 s) : le carton avance, le capteur le détecte, le moteur imprime
     (rouleaux), l'étiquette passe sur le tampon, le vérin la pose puis remonte, le lecteur contrôle. */
  .ill-pa .ill-convoyeur { animation: pa-avance 6s ease-in-out infinite; }
  .ill-pa .ill-capteur   { animation: pa-capteur 6s linear infinite; }
  .ill-pa .ill-dash-l    { animation: pa-roule 6s linear infinite; }
  .ill-pa .ill-led-pa    { animation: pa-voyant 6s linear infinite; }
  .ill-pa .ill-etiq-pad  { animation: pa-etiquette 6s ease-in-out infinite; }
  .ill-pa .ill-verin     { animation: pa-verin 6s ease-in-out infinite; }
  .ill-pa .ill-pose      { animation: pa-pose 6s linear infinite; }
  .ill-pa .ill-scan-fx   { animation: pa-lecteur 6s linear infinite; }

  /* Code (8 s) : les lignes s'écrivent, l'étiquette se génère */
  .ill .ill-l { animation: k-ligne 8s ease-out infinite both; }
  .ill .ill-l2 { animation-delay: .35s; }
  .ill .ill-l3 { animation-delay: .7s; }
  .ill .ill-l4 { animation-delay: 1.05s; }
  .ill .ill-l5 { animation-delay: 1.4s; }
  .ill .ill-l6 { animation-delay: 1.75s; }
  .ill .ill-l7 { animation-delay: 2.1s; }
  .ill .ill-fleche    { animation: k-fleche 8s ease-in-out infinite; }
  .ill .ill-etiquette { animation: k-etiquette 8s ease-in-out infinite; }

  /* Pause hors écran (économie de batterie et de processeur) */
  .reveal-on .ill:not(.en-vue), .reveal-on .ill:not(.en-vue) * { animation-play-state: paused; }

  /* Apparition des blocs au défilement (une seule fois) */
  .reveal-on .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .reveal-on .reveal.is-visible { opacity: 1; transform: none; }
  .reveal-on .reveal:nth-child(2) { transition-delay: .07s; }
  .reveal-on .reveal:nth-child(3) { transition-delay: .14s; }
  .reveal-on .reveal:nth-child(4) { transition-delay: .21s; }
  .reveal-on .reveal:nth-child(5) { transition-delay: .28s; }
  .reveal-on .reveal:nth-child(6) { transition-delay: .35s; }
}

/* Héros */
@keyframes z-sortie {
  0%     { transform: translateY(-170px); opacity: 1; }
  32%    { transform: translateY(0); }
  76%    { transform: translateY(0); opacity: 1; }
  86%    { transform: translateY(44px); opacity: 0; }
  86.5%  { transform: translateY(-170px); opacity: 0; }
  90%, 100% { transform: translateY(-170px); opacity: 1; }
}
@keyframes z-lecture {
  0%, 36% { opacity: 0; transform: translateY(0); }
  39%     { opacity: .9; transform: translateY(0); }
  52%     { opacity: .9; transform: translateY(40px); }
  55%, 100% { opacity: 0; transform: translateY(40px); }
}
@keyframes z-roule { 0% { stroke-dashoffset: 0; } 32%, 100% { stroke-dashoffset: -90; } }
@keyframes h-voyant {
  0%, 10%, 20%, 30%, 100% { opacity: 1; }
  5%, 15%, 25% { opacity: .2; }
}
@keyframes h-ecran1 { 0%, 30% { opacity: 1; } 31%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes h-ecran2 { 0%, 30% { opacity: 0; } 31%, 99% { opacity: 1; } 100% { opacity: 0; } }

/* Imprimante */
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes p-sortie {
  0%       { opacity: 0; transform: translateX(-30px); }
  22%, 74% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateX(22px); }
}

/* Terminal */
@keyframes s-gachette { 0%, 14%, 32%, 100% { transform: none; } 18%, 28% { transform: translateY(2px); } }
@keyframes s-faisceau {
  0%, 18% { opacity: 0; }
  20%, 24%, 28% { opacity: 1; }
  22%, 26% { opacity: .3; }
  32%, 100% { opacity: 0; }
}
@keyframes s-ok { 0%, 32% { opacity: 0; } 38%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* Impression-pose : boucle sans raccord visible (les cartons sont décalés d'un pas) */
@keyframes pa-avance { 0% { transform: translateX(-106px); } 28%, 100% { transform: none; } }
@keyframes pa-capteur { 0%, 26% { opacity: .2; } 28%, 32% { opacity: 1; } 30% { opacity: .4; } 36%, 100% { opacity: .2; } }
@keyframes pa-roule { 0%, 32% { stroke-dashoffset: 0; } 50%, 100% { stroke-dashoffset: -60; } }
@keyframes pa-voyant { 0%, 32%, 50%, 100% { opacity: 1; } 36%, 44% { opacity: .25; } 40%, 48% { opacity: 1; } }
@keyframes pa-etiquette {
  0%, 34% { opacity: 0; transform: translateX(44px); }
  50%, 66% { opacity: 1; transform: none; }
  67%, 100% { opacity: 0; transform: none; }
}
@keyframes pa-verin { 0%, 52% { transform: none; } 62%, 68% { transform: translateY(40px); } 80%, 100% { transform: none; } }
@keyframes pa-pose { 0%, 66% { opacity: 0; } 67%, 100% { opacity: 1; } }
@keyframes pa-lecteur { 0%, 82% { opacity: 0; } 84%, 88% { opacity: 1; } 86% { opacity: .3; } 92%, 100% { opacity: 0; } }

/* Code */
@keyframes k-ligne { 0% { opacity: 0; transform: translateX(-6px); } 6%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes k-fleche {
  0%, 38% { opacity: .25; transform: none; }
  44% { opacity: 1; transform: translateX(5px); }
  50%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: .25; }
}
@keyframes k-etiquette {
  0%, 42% { opacity: 0; transform: translateX(-10px); }
  52%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; }
}

/* ==========================================================================
   Secteurs, exemples de projets, partenaires
   ========================================================================== */
.sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.sector {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-carte);
  box-shadow: var(--ombre-carte); padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4);
}
.sector-icon {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: var(--radius-carte); background: var(--surface2); color: var(--lien);
}
.sector-icon .icon { width: 24px; height: 24px; vertical-align: 0; }
.sector h3 { margin: 2px 0 2px; font-size: 16px; line-height: 22px; }
.sector p { margin: 0; font-size: 14px; line-height: 20px; color: var(--texte2); }

.case { display: flex; flex-direction: column; gap: var(--space-3); }
.case .badge { align-self: flex-start; }
.case .h-card { margin: 0; }
.case-ill { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; padding: var(--space-6) var(--space-6) var(--space-2);
  border-bottom: 1px solid var(--bordure); background: var(--surface2); border-radius: var(--radius-carte) var(--radius-carte) 0 0; }
.case-ill .ill { max-height: 150px; }

.partners { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.partners li {
  padding: var(--space-3) var(--space-6); border: 1px solid var(--bordure); border-radius: var(--radius-carte);
  background: var(--surface); color: var(--texte2); font-weight: 600; letter-spacing: .04em;
}
.partners img { display: block; height: 32px; width: auto; }


/* ==========================================================================
   Schémas : parcours de la donnée (flow), croquis annotés, journal d'impression
   ========================================================================== */
.section-more { margin: var(--space-6) 0 0; }
.page-hero-actions { margin-top: var(--space-6); }
.two-col-center { align-items: center; }
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Parcours : étapes reliées par des flèches orange */
.flow { display: grid; gap: var(--space-8); }
.flow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow-step {
  position: relative; background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--radius-carte); box-shadow: var(--ombre-carte); padding: var(--space-6) var(--space-4) var(--space-4);
}
.flow-core { border-color: var(--orange); }
.flow-kicker {
  margin: 0 0 var(--space-2); color: var(--lien);
  font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.flow-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.flow-list li { position: relative; padding: 0 0 var(--space-2) var(--space-4); font-size: 14px; line-height: 20px; color: var(--texte2); }
.flow-list li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--bordure-forte);
}
.flow-core .flow-list li::before { background: var(--orange); }
/* Flèche entre deux étapes */
.flow-step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: calc(-1 * var(--space-8) + 6px);
  width: calc(var(--space-8) - 12px); height: 2px; background: var(--orange);
}
.flow-step:not(:last-child)::before {
  content: ""; position: absolute; top: calc(50% - 5px); right: calc(-1 * var(--space-8) + 4px);
  border: 6px solid transparent; border-left: 8px solid var(--orange); border-right: 0; z-index: 1;
}
@media (max-width: 900px) {
  .flow-4, .flow-3 { grid-template-columns: 1fr; }
  .flow-step:not(:last-child)::after {
    top: auto; right: auto; left: 50%; bottom: calc(-1 * var(--space-8) + 6px);
    width: 2px; height: calc(var(--space-8) - 12px);
  }
  .flow-step:not(:last-child)::before {
    top: auto; right: auto; left: calc(50% - 5px); bottom: calc(-1 * var(--space-8) + 2px);
    border: 6px solid transparent; border-top: 8px solid var(--orange); border-bottom: 0;
  }
}
.flow-return {
  display: flex; gap: var(--space-3); align-items: flex-start; margin: var(--space-6) 0 0;
  padding: var(--space-4); border: 1px dashed var(--bordure-forte); border-radius: var(--radius-carte);
  color: var(--texte2);
}
.flow-return > .icon { color: var(--lien); margin-top: 3px; vertical-align: 0; }
.flow-return strong { color: var(--texte); }

/* Croquis annotés */
.sketch-card { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.sketch-card .ill { background: var(--surface2); border-radius: var(--radius-tuile); padding: var(--space-3); }
.sketch-wide { margin: 0; display: grid; gap: var(--space-6); }
.sketch-wide .ill { background: var(--surface2); border-radius: var(--radius-tuile); padding: var(--space-4); }
.sketch-legend { list-style: none; counter-reset: repere; margin: var(--space-2) 0 0; padding: 0; }
.sketch-legend li {
  counter-increment: repere; position: relative; padding: 2px 0 var(--space-2) 34px;
  color: var(--texte2); font-size: 15px; line-height: 22px;
}
.sketch-legend li::before {
  content: counter(repere); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--orange); color: var(--sur-orange);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sketch-legend strong { color: var(--texte); }
.sketch-legend-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: var(--space-2) var(--space-6); }
.ill .i-callout { fill: var(--sur-orange); font-family: var(--font-sans); font-size: 12px; font-weight: 700; }
.ill .i-ruban { fill: none; stroke: var(--encre); stroke-width: 4; stroke-linejoin: round; }
.ill .i-ruban-rouleau { fill: var(--encre); stroke: var(--bordure-forte); stroke-width: 1.5; }
.ill .i-tirets { stroke-width: 2; stroke-dasharray: 5 5; }

/* Tableaux : journal d'impression, comparatif */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { margin-top: var(--space-8); background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-carte); box-shadow: var(--ombre-carte); }
.log { margin: 0; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-carte); box-shadow: var(--ombre-carte); overflow: hidden; }
.log-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--bordure); background: var(--surface2); }
.log-title { font-weight: 600; font-size: 15px; }
.log figcaption { padding: var(--space-3) var(--space-4); font-size: 13px; line-height: 19px; color: var(--texte3); border-top: 1px solid var(--bordure); }
.log-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.log-table th {
  text-align: left; padding: var(--space-3) var(--space-4); white-space: nowrap;
  font-size: 11.2px; line-height: 14px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--texte3);
  border-bottom: 1px solid var(--bordure);
}
.log-table tbody th { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--texte); white-space: normal; }
.log-table td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--bordure); color: var(--texte2); vertical-align: top; }
.log-table tbody tr:nth-child(even) { background: var(--zebre); }
.log-table tbody tr:last-child td, .log-table tbody tr:last-child th { border-bottom: 0; }
.log-table .num-col { text-align: right; }
.log .log-table td { white-space: nowrap; }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards-3 { grid-template-columns: 1fr; } }
.section-head > p:not(.kicker):not(.lead) { color: var(--texte2); }
/* Symbole DATIS dans les illustrations */
.ill .anneau { fill: none; stroke: var(--orange); stroke-width: 7.9; }
.ill .point { fill: var(--orange); }

/* ==========================================================================
   Héros « écosystème » : logiciel → imprimante → contrôle → journal → logiciel
   Cycle de 10 s en boucle ; figé (état final lisible) si les animations sont réduites.
   ========================================================================== */
.ill .i-cap { fill: var(--texte2); font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ill .i-lien { fill: none; stroke: var(--bordure-forte); stroke-width: 2; stroke-dasharray: 4 6; }
.ill .i-surligne { fill: var(--orange); fill-opacity: .16; }
.ill .i-surligne-fixe { fill: var(--orange); fill-opacity: .12; }
.ill .i-txt-ui { fill: var(--texte); font-family: var(--font-sans); font-size: 10.5px; }
.ill .i-gras { font-weight: 600; font-size: 11.5px; }
.ill .i-txt-sur-o { fill: var(--sur-orange); font-family: var(--font-sans); font-size: 8px; font-weight: 700; }
.ill .i-txt-ecran-s { fill: var(--orange); font-family: var(--font-sans); font-size: 12px; font-weight: 600; }
.ill .i-txt-ecran-xs { fill: var(--ecran-texte); font-family: var(--font-sans); font-size: 8px; }
.ill .i-txt-e { font-size: 9px; font-weight: 700; }
.ill .i-txt-xs { font-size: 6px; }
.ill .i-point-ok { fill: var(--bordure-forte); }
.ill .i-halo { fill: var(--orange); fill-opacity: .25; }
.ill .e-ecran1, .ill .e-paquet { opacity: 0; }
.ill .e-progres { transform-box: fill-box; transform-origin: left center; }

@media (prefers-reduced-motion: no-preference) {
  .ill-eco .e-ligne     { animation: e-ligne 10s linear infinite; }
  .ill-eco .e-p1        { animation: e-p1 10s ease-in-out infinite; }
  .ill-eco .e-voyant    { animation: e-voyant 10s linear infinite; }
  .ill-eco .e-ecran1    { animation: e-ecran1 10s linear infinite; }
  .ill-eco .e-ecran2    { animation: e-ecran2 10s linear infinite; }
  .ill-eco .e-progres   { animation: e-progres 10s linear infinite; }
  .ill-eco .e-etiquette { animation: e-etiquette 10s ease-in-out infinite; }
  .ill-eco .e-faisceau  { animation: e-faisceau 10s linear infinite; }
  .ill-eco .e-ok        { animation: e-ok 10s linear infinite; }
  .ill-eco .e-p2        { animation: e-p2 10s ease-in-out infinite; }
  .ill-eco .e-nouvelle  { animation: e-nouvelle 10s ease-out infinite; }
  .ill-eco .e-p3        { animation: e-p3 10s ease-in-out infinite; }
  .ill-eco .e-statut    { animation: e-statut 10s linear infinite; }
}
@keyframes e-ligne { 0% { opacity: 0; } 5%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes e-p1 { 0%, 7% { opacity: 0; transform: none; } 8% { opacity: 1; transform: none; } 18% { opacity: 1; transform: translateX(88px); } 19%, 100% { opacity: 0; transform: translateX(88px); } }
@keyframes e-voyant { 0%, 20%, 25%, 30%, 35%, 40%, 44%, 100% { opacity: 1; } 22.5%, 27.5%, 32.5%, 37.5%, 42% { opacity: .2; } }
@keyframes e-ecran1 { 0%, 19.9% { opacity: 0; } 20%, 44% { opacity: 1; } 44.1%, 100% { opacity: 0; } }
@keyframes e-ecran2 { 0%, 19.9% { opacity: 1; } 20%, 44% { opacity: 0; } 44.1%, 100% { opacity: 1; } }
@keyframes e-progres { 0%, 20% { transform: scaleX(0); } 42%, 100% { transform: scaleX(1); } }
@keyframes e-etiquette {
  0%, 20% { transform: translateY(-112px); opacity: 1; }
  42%, 88% { transform: none; opacity: 1; }
  94% { transform: translateY(24px); opacity: 0; }
  94.5% { transform: translateY(-112px); opacity: 0; }
  97%, 100% { transform: translateY(-112px); opacity: 1; }
}
@keyframes e-faisceau { 0%, 45% { opacity: 0; } 47%, 51% { opacity: 1; } 49% { opacity: .3; } 54%, 100% { opacity: 0; } }
@keyframes e-ok { 0%, 50% { opacity: 0; } 53%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes e-p2 { 0%, 55% { opacity: 0; transform: none; } 56% { opacity: 1; transform: none; } 66% { opacity: 1; transform: translateX(-174px); } 67%, 100% { opacity: 0; transform: translateX(-174px); } }
@keyframes e-nouvelle { 0%, 66% { opacity: 0; transform: translateX(-8px); } 70%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes e-p3 { 0%, 69% { opacity: 0; transform: none; } 70% { opacity: 1; transform: none; } 80% { opacity: 1; transform: translateY(-104px); } 81%, 100% { opacity: 0; transform: translateY(-104px); } }
@keyframes e-statut { 0%, 80% { opacity: 0; } 83%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* ==========================================================================
   Étiquettes de mots-clés, technologies, normes, études de cas
   ========================================================================== */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.tag {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-pastille);
  background: var(--surface2); border: 1px solid var(--bordure); color: var(--texte2);
  font-size: 13px; line-height: 18px; font-weight: 600; text-decoration: none;
}
a.tag:hover { border-color: var(--orange); color: var(--lien); }
.hero-tags { margin-top: var(--space-6); }
.tags-nav { margin-top: var(--space-6); }
.tags-inline { margin: var(--space-2) 0 var(--space-4); }

.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.tech { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-carte); box-shadow: var(--ombre-carte); padding: var(--space-6); }
.tech-cat { margin: 0 0 var(--space-3); font-size: 11.2px; line-height: 14px; letter-spacing: .09em; text-transform: uppercase; color: var(--texte3); font-weight: 600; }
.prose .tech-cat { margin-top: var(--space-4); }
.tech-note { margin: var(--space-4) 0 0; font-size: 13px; color: var(--texte3); }

.standards-title { margin-top: var(--space-8); }
.standards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.standards li {
  display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--bordure); border-radius: var(--radius-tuile); background: var(--surface);
}
.standards strong { color: var(--lien); font-size: 15px; }
.standards span { color: var(--texte2); font-size: 14px; line-height: 20px; }

.case-study { scroll-margin-top: var(--hauteur-entete); }
.case-context { font-size: 17px; line-height: 27px; color: var(--texte2); }
.case-result { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 0; border-radius: var(--radius-tuile); background: var(--surface2); }
.case-aside { display: grid; gap: var(--space-3); }
.case-aside .case-ill { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2); }
.case-aside-title { margin: 0; font-size: 11.2px; letter-spacing: .09em; text-transform: uppercase; color: var(--texte3); font-weight: 600; }
.card-link.case .link-more { margin-top: auto; }
.modulo-ill { background: var(--surface2); }
.cards-2x { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 800px) { .cards-2x { grid-template-columns: 1fr; } }
.cards-2x .checklist li { font-size: 15px; line-height: 22px; padding: 4px 0; }
.side .tags-inline { margin-bottom: var(--space-3); }

/* Illustration « imprimante de face » des pages (cycle 6 s) */
.ill .p-ecran1 { opacity: 0; }
.ill .p-progres { transform-box: fill-box; transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .ill-imp .p-etiquette { animation: p-etiquette 6s ease-in-out infinite; }
  .ill-imp .p-ecran1    { animation: p-ecran1 6s linear infinite; }
  .ill-imp .p-ecran2    { animation: p-ecran2 6s linear infinite; }
  .ill-imp .p-progres   { animation: p-progres 6s linear infinite; }
  .ill-imp .p-voyant    { animation: p-voyant 6s linear infinite; }
}
@keyframes p-etiquette {
  0%, 15% { transform: translateY(-72px); opacity: 1; }
  55%, 85% { transform: none; opacity: 1; }
  93% { transform: translateY(16px); opacity: 0; }
  93.5% { transform: translateY(-72px); opacity: 0; }
  96%, 100% { transform: translateY(-72px); opacity: 1; }
}
@keyframes p-ecran1 { 0%, 14.9% { opacity: 0; } 15%, 55% { opacity: 1; } 55.1%, 100% { opacity: 0; } }
@keyframes p-ecran2 { 0%, 14.9% { opacity: 1; } 15%, 55% { opacity: 0; } 55.1%, 100% { opacity: 1; } }
@keyframes p-progres { 0%, 15% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
@keyframes p-voyant { 0%, 15%, 25%, 35%, 45%, 55%, 100% { opacity: 1; } 20%, 30%, 40%, 50% { opacity: .2; } }
.ill .i-cable { fill: none; stroke: var(--bordure-forte); stroke-width: 3; stroke-linecap: round; }

/* Secteurs cliquables et logos partenaires */
.sector-link { text-decoration: none; color: var(--texte); transition: border-color .15s; }
.sector-link:hover { border-color: var(--orange); color: var(--texte); }
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.logo-card {
  display: grid; place-items: center; height: 96px; padding: var(--space-4);
  background: #ffffff; border: 1px solid var(--bordure); border-radius: var(--radius-carte); box-shadow: var(--ombre-carte);
}
.logo-sombre { background: #1f1f1f; }
.logo-card img { max-height: 44px; width: auto; object-fit: contain; }
.field select {
  font: inherit; font-size: 15px; color: var(--texte); background: var(--surface);
  border: 1px solid var(--bordure-forte); border-radius: var(--radius-controle);
  height: var(--hauteur-controle); padding: 6px 10px; width: 100%;
}
.urgence { border-color: var(--orange); }
.urgence .icon { color: var(--lien); }
.urgence h2 { display: flex; align-items: center; gap: var(--space-2); }

/* Dépannage bien visible : téléphone dans l'en-tête, rappel sous le héros */
/* Le numéro du SAV reste joignable à toutes les largeurs :
   texte complet en grand écran, « SAV » seul en écran moyen, icône seule sur mobile. */
.header-tel { margin-right: var(--space-2); white-space: nowrap; gap: 8px; }
.header-tel .icon { color: var(--lien); }
.nav-tel { display: none; }
@media (max-width: 1180px) { .header-tel .num { display: none; } }
@media (max-width: 900px) {
  .header-tel .header-tel-mot { display: none; }
  .header-tel { width: var(--hauteur-tactile); height: var(--hauteur-tactile); padding: 0; justify-content: center; margin-right: var(--space-1); }
  .nav-tel { display: block; } .nav-tel a { font-weight: 600; } .nav-tel .icon { color: var(--lien); }
}
.hero-sav {
  display: flex; gap: var(--space-3); align-items: flex-start; margin: var(--space-6) 0 0;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--orange); border-radius: var(--radius-carte);
  background: var(--surface); color: var(--texte2); max-width: 620px;
}
.hero-sav > .icon { color: var(--lien); margin-top: 3px; flex: none; }
.hero-sav strong { color: var(--texte); }
@media (max-width: 1500px) and (min-width: 901px) {
  .main-nav a:not(.btn) { padding: 7px 9px; font-size: 14.5px; }
  .header-tel { padding: 0 12px; font-size: 14px; }
}


/* ==========================================================================
   Illustration « application » (page MODULO) : saisie → recherche en base →
   impression → journal. Uniquement du logiciel, aucune machine.
   Boucle de 12 s, une étape toutes les 3 s ; transform et opacity seulement.
   ========================================================================== */
.ill .i-cap-s { font-size: 10px; }
.ill .i-txt-mini { font-size: 8px; }
.ill .i-saisie { fill: var(--ecran); stroke: var(--bordure-forte); stroke-width: 1.5; }
.ill .i-txt-saisie { fill: var(--ecran-texte-fort); font-family: var(--font-sans); font-size: 11px; font-weight: 600; }
.ill .i-masque { fill: var(--ecran); }
.ill .i-cadre-actif { fill: none; stroke: var(--orange); stroke-width: 2; }
.ill .i-ok-fond { fill: var(--ok-fond); }
.ill .i-vert { fill: var(--ok); }
.ill .i-txt-ok { fill: var(--ok); font-family: var(--font-sans); font-size: 7.5px; font-weight: 700; }

/* Etats au repos (et si le visiteur a demandé moins d'animations) */
.ill .a-tape { transform: translateX(68px); }
.ill .a-caret, .ill .a-flux, .ill .a-pulse, .ill .a-ok, .ill .i-cadre-actif { opacity: 0; }
.ill-appli .a-progres, .ill-appli .a-pulse, .ill-appli .a-bouton, .ill-appli .a-btn-rech { transform-box: fill-box; }
.ill-appli .a-progres { transform-origin: left center; }
.ill-appli .a-pulse, .ill-appli .a-bouton, .ill-appli .a-btn-rech { transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .ill-appli .a-actif1   { animation: a-actif 12s linear infinite; }
  .ill-appli .a-actif2   { animation: a-actif 12s linear 3s infinite; }
  .ill-appli .a-actif3   { animation: a-actif 12s linear 6s infinite; }
  .ill-appli .a-actif4   { animation: a-actif 12s linear 9s infinite; }
  .ill-appli .a-tape     { animation: a-tape 12s steps(10, end) infinite; }
  .ill-appli .a-caret    { animation: a-tape 12s steps(10, end) infinite, a-caret 12s linear infinite; }
  .ill-appli .a-btn-rech { animation: a-presse 12s ease-in-out infinite; }
  .ill-appli .a-pulse    { animation: a-pulse 12s ease-out 3s infinite; }
  .ill-appli .a-res1     { animation: a-apparait 12s ease-out 3.1s infinite; }
  .ill-appli .a-res2     { animation: a-apparait 12s ease-out 3.4s infinite; }
  .ill-appli .a-res3     { animation: a-apparait 12s ease-out 3.7s infinite; }
  .ill-appli .a-sel      { animation: a-apparait 12s ease-out 4.1s infinite; }
  .ill-appli .a-res4     { animation: a-apparait 12s ease-out 4.4s infinite; }
  .ill-appli .a-bouton   { animation: a-presse 12s ease-in-out 6s infinite; }
  .ill-appli .a-progres  { animation: a-progres 12s ease-in-out 6s infinite; }
  .ill-appli .a-ok       { animation: a-apparait 12s ease-out 7.8s infinite; }
  .ill-appli .a-nouvelle { animation: a-apparait 12s ease-out 9.2s infinite; }
  .ill-appli .a-flux-d   { animation: a-flux-d 12s ease-in-out 2.4s infinite; }
  .ill-appli .a-flux-b   { animation: a-flux-b 12s ease-in-out 5.4s infinite; }
  .ill-appli .a-flux-g   { animation: a-flux-g 12s ease-in-out 8.4s infinite; }
  .ill-appli .a-flux-h   { animation: a-flux-h 12s ease-in-out 11.4s infinite; }
}
@keyframes a-actif { 0% { opacity: 0; } 2%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes a-tape { 0%, 2% { transform: translateX(0); } 15%, 100% { transform: translateX(68px); } }
@keyframes a-caret { 0%, 1% { opacity: 0; } 2%, 16% { opacity: 1; } 17%, 100% { opacity: 0; } }
@keyframes a-presse { 0%, 15% { transform: none; } 18% { transform: scale(.94); } 21%, 100% { transform: none; } }
@keyframes a-pulse { 0%, 2% { opacity: 0; transform: scale(.55); } 8% { opacity: 1; transform: scale(1); } 20%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes a-apparait { 0% { opacity: 0; transform: translateY(-5px); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes a-progres { 0%, 3% { transform: scaleX(0); } 16%, 100% { transform: scaleX(1); } }
@keyframes a-flux-d { 0% { opacity: 0; transform: none; } 2%, 7% { opacity: 1; } 8% { opacity: 0; transform: translateX(36px); } 9%, 100% { opacity: 0; transform: translateX(36px); } }
@keyframes a-flux-b { 0% { opacity: 0; transform: none; } 2%, 7% { opacity: 1; } 8% { opacity: 0; transform: translateY(24px); } 9%, 100% { opacity: 0; transform: translateY(24px); } }
@keyframes a-flux-g { 0% { opacity: 0; transform: none; } 2%, 7% { opacity: 1; } 8% { opacity: 0; transform: translateX(-36px); } 9%, 100% { opacity: 0; transform: translateX(-36px); } }
@keyframes a-flux-h { 0% { opacity: 0; transform: none; } 2%, 7% { opacity: 1; } 8% { opacity: 0; transform: translateY(-24px); } 9%, 100% { opacity: 0; transform: translateY(-24px); } }

/* Bandeau de tête MODULO : l'illustration prend plus de place */
.hero-appli { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.page-hero-ill-xl { max-width: 560px; }
@media (max-width: 900px) { .hero-appli { grid-template-columns: 1fr; } .page-hero-ill-xl { max-width: 520px; justify-self: start; } }

/* Etapes listees a cote de l'animation MODULO */
.etapes-appli { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-2); counter-reset: etape; }
.etapes-appli li { position: relative; padding-left: 30px; color: var(--texte2); font-size: 15px; line-height: 22px; counter-increment: etape; }
.etapes-appli li::before {
  content: counter(etape); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--orange); color: var(--sur-orange); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.etapes-appli strong { color: var(--texte); }

/* Formulaire de contact : rappel « production arrêtee » et aides contextuelles */
[hidden] { display: none !important; }
.alert-urgence {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  background: var(--attention-fond); border-color: var(--orange); color: var(--texte);
  font-size: 14.5px; line-height: 21px;
}
.alert-urgence .icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--orange); margin-top: 2px; }
.alert-urgence .num { font-weight: 700; white-space: nowrap; }
.form [data-aide] { margin: 2px 0 0; }
.field-row:has(> .field[hidden]) { grid-template-columns: 1fr; }


/* Accroche d'accueil : phrase de différenciation et étiquettes cliquables */
.hero-diff { margin: var(--space-4) 0 0; max-width: 620px; color: var(--texte); font-weight: 600; font-size: 16px; line-height: 24px; }
.hero-diff::before { content: ""; display: inline-block; width: 3px; height: 1em; margin-right: 10px; vertical-align: -2px; background: var(--orange); border-radius: 2px; }
.tag-link { display: inline-block; text-decoration: none; color: inherit; transition: border-color .15s, color .15s; }
.tag-link:hover, .tag-link:focus-visible { border-color: var(--orange); color: var(--lien); }

/* Entre 901 et 1180 px : le menu doit tenir sur une ligne a cote du bouton SAV */
@media (max-width: 1180px) and (min-width: 901px) {
  .main-nav a:not(.btn) { padding: 7px 7px; font-size: 14px; }
  .main-nav ul { gap: 0; }
  .nav-cta .btn { padding: 0 12px; font-size: 14px; }
  .brand-text small { display: none; }
}

/* Carte de France (page Contact) */
.carte-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.carte-bloc { justify-self: center; width: 100%; max-width: 480px; }
.carte { display: block; width: 100%; height: auto; }
.carte .c-terre { fill: var(--surface2); stroke: var(--bordure-forte); stroke-width: 1.5; stroke-linejoin: round; }
.carte .c-route { fill: none; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 4 6; opacity: .65; }
.carte .c-pastille { fill: var(--orange); }
.carte .c-halo { fill: var(--orange); opacity: .18; }
.carte .c-ville { fill: var(--texte); font-family: var(--font-sans); font-size: 15px; font-weight: 600; text-anchor: middle; }
.carte .c-ville-g { text-anchor: end; }
.offices-colonne { grid-template-columns: 1fr; }
@media (max-width: 860px) { .carte-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .carte .c-route { animation: c-route 6s linear infinite; }
  .carte .c-halo  { animation: c-halo 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes c-route { to { stroke-dashoffset: -40; } }
@keyframes c-halo { 0%, 100% { opacity: .12; transform: scale(.85); } 50% { opacity: .26; transform: scale(1.1); } }

/* Fenêtre de consentement à la mesure d'audience : petite carte, pas un bandeau */
.pop-mesure {
  position: fixed; z-index: 60; left: var(--space-6); bottom: var(--space-6); width: 340px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--bordure-forte); border-left: 3px solid var(--orange);
  border-radius: var(--radius-carte); box-shadow: var(--ombre-modale); padding: var(--space-4) var(--space-4) var(--space-3);
}
.pop-titre { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--texte); }
.pop-titre .brand-mark { width: 20px; height: 20px; flex: 0 0 auto; }
.pop-texte { margin: 0 0 var(--space-4); font-size: 13.5px; line-height: 20px; color: var(--texte2); }
.pop-actions { display: flex; gap: var(--space-2); }
.pop-actions .btn { flex: 1; justify-content: center; height: 36px; font-size: 14px; }
@media (max-width: 480px) { .pop-mesure { left: 12px; right: 12px; bottom: 12px; width: auto; } }
@media (prefers-reduced-motion: no-preference) {
  .pop-mesure { animation: pop-entree .45s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes pop-entree { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }