/* ══════════════════════════════════════════════════════════════════════════════════════════════
   SITE VISULOGISTIQUE — feuille commune aux quatre pages.  Design « Obsidian Precision ».

   Le dessin des pages est porté par des attributs `style` en ligne (fidèles à la maquette de DA).
   Cette feuille ne contient QUE ce qu'un attribut `style` ne peut pas porter : les polices, les
   images-clés, l'emblème OSMO animé, les pseudo-classes de survol/focus, le responsive téléphone et
   le respect de « mouvement réduit ».
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Polices, servies en fichiers (aucune dépendance externe) ─────────────────────────────────── */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 200; font-display: swap; src: url('polices/archivo-200-53135c1103ea.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300; font-display: swap; src: url('polices/archivo-300-24a97635cc12.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('polices/archivo-400-07f9160163da.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('polices/archivo-500-ab74eca5ad11.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('polices/plexmono-400-08949f728dc5.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('polices/plexmono-500-01d285447409.woff2') format('woff2'); }

/* ── Règles de base du document ──────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { margin: 0; background: #04080d; color: #f2f5f8; font-family: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
button, input, textarea, select { font-family: inherit; }
img, svg { display: block; }
::selection { background: rgba(73,145,253,.28); }

/* Un lien hérite de la couleur de son conteneur : la nav et les appels à l'action sont des textes
   stylés au pixel dans la maquette ; un `<a>` qui repeindrait son texte casserait la composition. */
a { color: inherit; text-decoration: none; }
a[href] { cursor: pointer; }

/* Coupures de titres plus élégantes, sans changer les tailles de la maquette. */
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Apparition douce des sections au défilement (posée par site.js ; sans script, tout reste visible). */
.vl-reveal { opacity: 0; transform: translateY(20px); }
.vl-reveal.vl-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
a[href]:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #4991fd; outline-offset: 3px; border-radius: 3px;
}

/* ── Survols (traduits des `style-hover` de la maquette) ──────────────────────────────────────── */
.h-card { transition: border-color 200ms cubic-bezier(.2,.8,.2,1), background 200ms cubic-bezier(.2,.8,.2,1), transform 200ms cubic-bezier(.2,.8,.2,1); }
.h-card:hover { border-color: #2d5795; transform: translateY(-2px); }
.h-card2 { transition: all 180ms cubic-bezier(.2,.8,.2,1); }
.h-card2:hover { border-color: #2d5795; background: #0e1722; transform: translateY(-2px); }
.h-primary { transition: all 140ms cubic-bezier(.2,.8,.2,1); }
.h-primary:hover { box-shadow: 0 0 40px rgba(73,145,253,.34); transform: translateY(-1px); }
.h-primary2 { transition: all 140ms cubic-bezier(.2,.8,.2,1); }
.h-primary2:hover { box-shadow: 0 0 44px rgba(73,145,253,.38); transform: translateY(-1px); }
.h-glow { transition: all 140ms cubic-bezier(.2,.8,.2,1); }
.h-glow:hover { box-shadow: 0 0 42px rgba(73,145,253,.36); }
.h-glow2 { transition: all 140ms cubic-bezier(.2,.8,.2,1); }
.h-glow2:hover { box-shadow: 0 0 32px rgba(73,145,253,.34); }
.h-outline { transition: all 140ms cubic-bezier(.2,.8,.2,1); }
.h-outline:hover { border-color: #3b78d8; background: #0f1e2e; }
.h-rdv { transition: all 140ms cubic-bezier(.2,.8,.2,1); }
.h-rdv:hover { border-color: #3b78d8; background: #0f1e2e; box-shadow: 0 0 26px rgba(73,145,253,.16); }
.h-ghost { transition: all 140ms cubic-bezier(.2,.8,.2,1); }
.h-ghost:hover { border-color: #35455d; color: #f2f5f8; }
.h-link { transition: color 140ms cubic-bezier(.2,.8,.2,1); }
.h-link:hover { color: #a8cfff; }
.h-nav { transition: color 140ms cubic-bezier(.2,.8,.2,1); }
.h-nav:hover { color: #f2f5f8; }
.h-foot { transition: color 140ms cubic-bezier(.2,.8,.2,1); }
.h-foot:hover { color: #f2f5f8; }
.h-round { transition: all 140ms cubic-bezier(.2,.8,.2,1); }
.h-round:hover { border-color: #3b78d8; color: #f2f5f8; }

/* Champs du formulaire : le focus se voit (repris du `style-focus` de la maquette). */
.fld { transition: border-color 140ms cubic-bezier(.2,.8,.2,1), box-shadow 140ms cubic-bezier(.2,.8,.2,1); }
.fld:focus { border-color: #3b78d8; box-shadow: 0 0 0 3px rgba(73,145,253,.09); outline: none; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   EMBLÈME OSMO — reproduit de la source `OsmoMark.dc.html`.
   Un noyau sombre, des anneaux lumineux (halo net + floraison + halo large + champ diffus) et un
   satellite en orbite à 1h30. Deux états : `idle` (repos, satellite fixe) et `action` (le satellite
   tourne, la traîne apparaît). La respiration (pulsation d'opacité) et l'orbite, gelées dans
   l'aperçu de l'éditeur, sont ici de vraies animations CSS.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.osmo { display: inline-block; line-height: 0; flex: none; }
.osmo svg { width: 100%; height: 100%; overflow: visible; display: block; }
.osmo--idle   { --ring: #4991fd; --halo: #75b4ff; }
.osmo--action { --ring: #4991fd; --halo: #bcdcff; }
/* Halo ambiant : donne à l'emblème « action » un rayonnement doux sur le fond sombre. */
.osmo--action { filter: drop-shadow(0 0 10px rgba(73,145,253,.16)); }
.osmo--anime .osmo-orbit { will-change: transform; }

.osmo-field, .osmo-sat-glow { fill: var(--ring); }
.osmo-wide, .osmo-bloom     { stroke: var(--ring); fill: none; }
.osmo-halo                  { stroke: var(--halo); fill: none; }
.osmo-core                  { stroke: var(--halo); fill: none; }
.osmo-sat-halo              { fill: var(--halo); }
.osmo-trail circle          { fill: var(--halo); }

/* Largeur de l'anneau net + opacités de repos, selon l'état. */
.osmo--idle   .osmo-core { stroke-width: 1.7; }
.osmo--action .osmo-core { stroke-width: 2.3; }
.osmo--idle   .osmo-field { opacity: .12; } .osmo--idle   .osmo-wide { opacity: .2; }  .osmo--idle   .osmo-bloom { opacity: .44; } .osmo--idle   .osmo-sat-glow { opacity: .42; }
.osmo--action .osmo-field { opacity: .17; } .osmo--action .osmo-wide { opacity: .28; } .osmo--action .osmo-bloom { opacity: .64; } .osmo--action .osmo-sat-glow { opacity: .68; }
.osmo--idle   .osmo-trail { opacity: 0; }
.osmo--action .osmo-trail { opacity: 1; }

/* Respiration : chaque couche oscille entre son opacité de repos et une valeur plus basse (période
   8,4 s, comme le minuteur de la source). */
.osmo--anime .osmo-field    { animation: osmoField 8.4s ease-in-out infinite; }
.osmo--anime .osmo-wide     { animation: osmoWide  8.4s ease-in-out infinite; }
.osmo--anime .osmo-bloom    { animation: osmoBloom 8.4s ease-in-out infinite; }
.osmo--anime .osmo-sat-glow { animation: osmoSat   8.4s ease-in-out infinite; }
.osmo--anime.osmo--action .osmo-field    { animation-name: osmoFieldA; }
.osmo--anime.osmo--action .osmo-wide     { animation-name: osmoWideA; }
.osmo--anime.osmo--action .osmo-bloom    { animation-name: osmoBloomA; }
.osmo--anime.osmo--action .osmo-sat-glow { animation-name: osmoSatA; }

/* Orbite du satellite : seulement en état `action` (6 s / tour, comme la source). */
.osmo-orbit { transform-box: view-box; transform-origin: 50% 50%; }
.osmo--anime.osmo--action .osmo-orbit { animation: osmoOrbit 6s linear infinite; }

@keyframes osmoField { 0%,100% { opacity: .12 } 50% { opacity: .074 } }
@keyframes osmoWide  { 0%,100% { opacity: .2 }  50% { opacity: .124 } }
@keyframes osmoBloom { 0%,100% { opacity: .44 } 50% { opacity: .361 } }
@keyframes osmoSat   { 0%,100% { opacity: .42 } 50% { opacity: .26 } }
@keyframes osmoFieldA { 0%,100% { opacity: .17 } 50% { opacity: .105 } }
@keyframes osmoWideA  { 0%,100% { opacity: .28 } 50% { opacity: .174 } }
@keyframes osmoBloomA { 0%,100% { opacity: .64 } 50% { opacity: .525 } }
@keyframes osmoSatA   { 0%,100% { opacity: .68 } 50% { opacity: .422 } }
@keyframes osmoOrbit  { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   CARROUSEL (page OSMOSE) — une diapo visible à la fois ; les points et les flèches pilotés par
   `site.js` basculent l'attribut `data-actif`. Sans script (JS coupé), la première diapo reste
   affichée : la page ne casse pas.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.vl-slide { display: none; }
.vl-slide[data-actif] { display: block; }
.vl-carrousel:not([data-js]) .vl-slide:first-child { display: block; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   DÉMONSTRATION GUIDÉE PAR OSMO (page OSMOSE) — OSMO parcourt la maquette et commente. Le bouton
   « VOIR EN ACTION » la lance ; posée par site.js, tout se nettoie à la fin.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
body.vl-demo-on { overflow: hidden; }
.vl-demo-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(2,5,9,.72); backdrop-filter: blur(2px); opacity: 0; transition: opacity .4s ease; }
.vl-demo-scrim.on { opacity: 1; }
.vl-demo-hl { position: relative; z-index: 160; border-radius: 10px; box-shadow: 0 0 0 2px #4991fd, 0 0 0 6px rgba(73,145,253,.18), 0 0 36px rgba(73,145,253,.45); transition: box-shadow .45s cubic-bezier(.2,.8,.2,1); }
.vl-demo-cap { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); z-index: 200; width: min(600px, calc(100% - 32px)); display: flex; gap: 16px; align-items: flex-start; background: rgba(9,17,26,.97); backdrop-filter: blur(14px); border: 1px solid #23416a; border-radius: 14px; padding: 18px 20px; box-shadow: 0 24px 70px rgba(0,0,0,.55); opacity: 0; transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.vl-demo-cap.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.vl-demo-cap .osmo { width: 46px; height: 46px; }
.vl-demo-cap-txt { flex: 1; min-width: 0; }
.vl-demo-cap-name { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .2em; color: #8dc0ff; margin-bottom: 8px; }
.vl-demo-cap-text { font-size: 14.5px; line-height: 1.58; color: #eef3f8; }
.vl-demo-cap-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.vl-demo-progress { display: flex; gap: 7px; }
.vl-demo-progress span { width: 6px; height: 6px; border-radius: 50%; background: #22364d; transition: background .3s ease; }
.vl-demo-progress span.on { background: #4991fd; }
.vl-demo-actions { display: flex; gap: 8px; }
.vl-demo-btn { background: none; border: 1px solid #24405f; border-radius: 6px; padding: 9px 15px; color: #cdd6e0; font-size: 11px; letter-spacing: .06em; cursor: pointer; white-space: nowrap; transition: all 140ms cubic-bezier(.2,.8,.2,1); }
.vl-demo-btn:hover { border-color: #3b78d8; color: #f2f5f8; }
.vl-demo-btn.primary { background: linear-gradient(180deg,#3d7ad6,#2a5da8); border-color: #4d8ce0; color: #fff; }
.vl-demo-btn.primary:hover { box-shadow: 0 0 26px rgba(73,145,253,.34); }
@media (max-width: 600px) { .vl-demo-cap { bottom: 12px; flex-direction: column; gap: 10px; } .vl-demo-cap .osmo { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) { .vl-demo-scrim, .vl-demo-cap { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   FORMULAIRE — radios « Type de demande » et consentement en contrôles natifs stylés (aucun script
   nécessaire pour la sélection). Le compteur de caractères, lui, est mis à jour par `site.js`.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.vl-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.vl-radio { border: 1px solid #1b2b3e; transition: border-color 140ms cubic-bezier(.2,.8,.2,1); }
.vl-radio:hover { border-color: #2d5795; }
.vl-radio:has(input:checked) { border-color: #3b78d8; }
.vl-radio .vl-dot { opacity: 0; transition: opacity 140ms; }
.vl-radio:has(input:checked) .vl-dot { opacity: 1; }
.vl-radio:has(input:focus-visible) { outline: 2px solid #4991fd; outline-offset: 2px; }

.vl-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.vl-consent .vl-check { background: transparent; border: 1px solid #35455d; transition: all 140ms cubic-bezier(.2,.8,.2,1); }
.vl-consent .vl-check span { opacity: 0; }
.vl-consent:has(input:checked) .vl-check { background: #3b78d8; border-color: #3b78d8; }
.vl-consent:has(input:checked) .vl-check span { opacity: 1; }
.vl-consent:has(input:focus-visible) .vl-check { outline: 2px solid #4991fd; outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — la maquette est en grande partie fluide (clamp + grilles auto-fit). On complète : la
   barre de navigation devient un menu déroulant natif (case à cocher, sans script) sous 860 px, et
   les cibles tactiles atteignent 44 px.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.vl-nav { display: flex; align-items: center; gap: 4px; }
.vl-burger, .vl-burger-lbl { display: none; }

@media (max-width: 860px) {
  .vl-burger-lbl {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 42px; height: 42px; flex: none; margin-left: auto;
    border: 1px solid #24405f; border-radius: 8px; background: #0b1622; cursor: pointer; color: #cdd6e0;
  }
  .vl-burger-lbl svg { width: 19px; height: 19px; }
  .vl-nav {
    display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch !important;
    gap: 2px !important; padding-top: 10px;
  }
  .vl-burger:checked ~ .vl-nav { display: flex; }
  .vl-nav a { padding: 13px 8px !important; border-radius: 7px; }
  .vl-nav a:hover { background: #0b1622; }
  .vl-rdv { display: none !important; }
  .vl-nav-underline { display: none !important; }
}

@media (max-width: 860px) {
  a[href], button, .fld { min-height: 44px; }
}

/* ── Mouvement réduit : l'emblème cesse de respirer et de tourner ; les transitions s'effacent. ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  /* Rien ne se cache : tout est visible d'emblée, sans dépendre du défilement. */
  .vl-reveal { opacity: 1 !important; transform: none !important; }
}