/* ==========================================================================
   Vardan Cloud — couche de finition (chargée après style.css et catalogue.css)
   Aucune couleur nouvelle : uniquement currentColor et les variables existantes.
   ========================================================================== */

/* --- Typographie : Archivo (auto-hébergée, licence OFL) -----------------
   Une seule famille, deux largeurs : étendue pour les titres et la marque,
   normale pour le texte. Aucun appel à Google : rien ne fuit vers un tiers. */
@font-face {
  font-family: "Archivo VC";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-variable.woff2") format("woff2-variations"),
       url("../fonts/archivo-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { --vc-font: "Archivo VC", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

body, button, input, select, textarea { font-family: var(--vc-font) !important; }
body *:not(.vc-terminal):not(.vc-terminal *):not(code):not(pre):not(kbd):not(samp) { font-family: inherit !important; }

body { font-weight: 400; font-stretch: 100%; letter-spacing: 0; font-feature-settings: "kern" 1; }
p, li { line-height: 1.6; }

/* Titres : largeur étendue, graisse franche, approche resserrée */
h1, h2, h3, h4 { font-stretch: 116%; }
h1 { font-weight: 800; letter-spacing: -.024em; line-height: 1.04; }
h2 { font-weight: 750; letter-spacing: -.016em; line-height: 1.12; }
h3 { font-weight: 700; letter-spacing: -.006em; line-height: 1.2; }
h4 { font-weight: 700; }
/* Le passage mis en avant garde sa couleur mais perd l'italique */
h1 em, h2 em { font-style: normal; }

/* Marque */
.brand-title, .footer-brand b { font-stretch: 125%; font-weight: 800; letter-spacing: .07em; }
.brand-sub, .footer-brand small { font-stretch: 125%; font-weight: 500; letter-spacing: .3em; }

/* Navigation, boutons, étiquettes */
.nav-link, .mobile-nav a, .btn, .vc-button, .vc-tab-link, .vc-switch, .preset-button strong { font-weight: 600; font-stretch: 106%; }
.eyebrow, .vc-eyebrow, .vc-service-tag, .vc-card-label, .tag, .mini-label, .vc-star, .vc-mini-status, .vc-demo-title {
  font-stretch: 112%; font-weight: 600; letter-spacing: .07em;
}

/* Prix et ressources */
.vc-price strong { font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; }
.vc-spec strong, .summary-line strong, .stat-card strong { font-weight: 700; font-stretch: 108%; }
.vc-table th, .data-table th { font-weight: 650; }

/* --- Rendu du texte ------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, .vc-lead { text-wrap: balance; }
p, li, .vc-footnote, .offer-disclaimer { text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; }
h1, h2, h3, h4, a, strong { hyphens: manual; -webkit-hyphens: manual; }

/* Chiffres alignés : prix, ressources, tableaux, récapitulatif */
.vc-price, .vc-spec strong, .vc-table, .data-table, .summary-line strong,
.stat-card strong, output, .minmax { font-variant-numeric: tabular-nums; }

/* --- Ancres : le header collant ne masque plus les titres ---------------- */
[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* --- Focus clavier visible et cohérent ----------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold, currentColor);
  outline-offset: 3px;
  border-radius: 6px;
}
:where(a, button, summary):focus:not(:focus-visible) { outline: none; }

/* --- Confort tactile ----------------------------------------------------- */
a, button, summary, label, select, input[type="checkbox"], input[type="range"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
summary { cursor: pointer; }

/* --- Médias -------------------------------------------------------------- */
img, svg, canvas { max-width: 100%; }
img { height: auto; }

/* --- Icônes SVG de l'accueil (remplacent les emojis) --------------------- */
.vc-board-icon, .vc-service-icon { display: inline-flex; align-items: center; justify-content: center; }
.vc-board-icon svg, .vc-service-icon svg {
  width: 1.1em; height: 1.1em;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
a.vc-board-tile { color: inherit; text-decoration: none; }
a.vc-board-tile .vc-board-arrow { transition: transform .18s ease; }
a.vc-board-tile:hover .vc-board-arrow,
a.vc-board-tile:focus-visible .vc-board-arrow { transform: translate(2px, -2px); }

/* --- Tableaux : défilement propre sur mobile ----------------------------- */
.vc-table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* --- Performances : le footer n'est rendu qu'à l'approche ---------------- */
.footer { content-visibility: auto; contain-intrinsic-size: auto 420px; }

/* --- Utilitaires (remplacent les attributs style="" pour la CSP) -------- */
.u-sprite { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-14 { margin-top: 14px !important; }
.u-mt-15 { margin-top: 15px !important; }
.u-mt-18 { margin-top: 18px !important; }
.u-mt-20 { margin-top: 20px !important; }
.u-mt-22 { margin-top: 22px !important; }
.u-mt-24 { margin-top: 24px !important; }
.u-mb-14 { margin-bottom: 14px !important; }
.u-mb-20 { margin-bottom: 20px !important; }
.u-fs-13 { font-size: 13px !important; }
.u-fs-14 { font-size: 14px !important; }
.u-h2-sm { font-size: 23px !important; margin-top: 10px !important; }
.u-mw-760 { max-width: 760px !important; }
.u-mw-790 { max-width: 790px !important; }
.u-mw-800 { max-width: 800px !important; }
.u-mw-690 { max-width: 690px !important; margin-top: 0 !important; }
.u-items-center { align-items: center !important; }
.u-ta-right { text-align: right !important; }
.u-c-green { color: var(--green) !important; }
.u-c-gold { color: var(--gold) !important; }
.u-modal-actions { justify-content: flex-end !important; margin-top: 25px !important; }
.u-form-intro { font-size: 14px !important; margin: 12px 0 28px !important; }
.u-notice { margin-top: 24px !important; margin-bottom: 0 !important; }

/* --- Mouvement réduit ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* --- Impression (devis, récapitulatif) ----------------------------------- */
@media print {
  .site-header, .mobile-nav, .skip-link, .footer, .toast-stack, .modal-wrap,
  .vc-button-row, .button-row, .vc-card-actions, .contact-buttons { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .vc-offer-card, .card, article { break-inside: avoid; }
}