/* ============================================================
   Revalta by Altus Conseil — colors_and_type.css
   ============================================================
   PROPOSITION ÉTAPE 2 · direction B « Papier » (2026-09-25).
   Drop-in pour le dépôt : même structure, mêmes noms de variables,
   mêmes sélecteurs. Aucune variable renommée ni supprimée.
   Six variables ajoutées (marquées AJOUT) et trois règles adaptées
   à la bascule « défaut = clair, inverse = marine » (marquées BASCULE).
   ============================================================ */

/* Webfont — Instrument Sans, variable 400..700 (Google Fonts).
   Auto-hébergement en production : déposer le TTF dans fonts/ et remplacer
   cet @import par le @font-face de fonts/README.md.
   Repli système : Helvetica Neue > Helvetica > Arial. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400..700&display=swap');

:root {
  /* ─── COLORS ───────────────────────────────── */
  --revalta-bg:              #F5F3EE;                    /* background — papier */
  --revalta-fg1:             #101C33;                    /* textPrimary — encre */
  --revalta-fg2:             #5A6579;                    /* textSecondary — 5,3:1 sur papier */
  --revalta-accent:          #1F4B8F;                    /* accent — bleu encre, 7,7:1 sur papier */
  --revalta-sep:             rgba(16, 28, 51, 0.16);     /* separator — l'encre, atténuée */

  /* Inverse — sections et cartes marine (variante inverse, voile B) */
  --revalta-bg-inverse:      #0F1B33;                    /* marine (fond de revalta.com, échantillonné) */
  --revalta-fg1-inverse:     #F5F3EE;
  --revalta-fg2-inverse:     #A7B1C4;                    /* 7,9:1 sur marine */

  /* AJOUT — le bleu encre ne tient pas sur marine (2,0:1) : accent
     et filet ont une valeur inverse, appliquée par la règle BASCULE
     ci-dessous. Aucune section n'a besoin de les lire directement. */
  --revalta-accent-inverse:  #8FB3E3;                    /* glace — 7,9:1 sur marine */
  --revalta-sep-inverse:     rgba(245, 243, 238, 0.16);  /* le papier, atténué */

  /* AJOUT identité (étude 9, portée le 28/09/2026) — bande bleu très clair,
     or des valeurs, rayons, largeur de contenu, hauteur du header. */
  --revalta-sky:             #E8EEF7;   /* bleu très clair — bande et panneau */
  --revalta-gold:            #A67F26;   /* or sur papier/blanc : valeurs à l'échelle titre ou glyphes, jamais texte courant */
  --revalta-gold-inverse:    #D9B45B;   /* or sur marine : peut porter du texte courant */
  --revalta-gold-deep:       #8A6A1F;   /* bouton or, texte blanc (5:1) */
  --revalta-r-panel:         28px;      /* panneaux contenus, simulateur, grands cadres image */
  --revalta-r-card:          20px;      /* cartes, vignettes, résultat */
  --revalta-r-field:         16px;      /* champs, options, lignes d'accordéon */
  --revalta-r-pill:          999px;     /* boutons, puces, badges, sélecteurs */
  --revalta-max:             1240px;    /* largeur de contenu */
  --revalta-header-h:        90px;      /* header fixe — compensé par main > :first-child */

  /* AJOUT — alias des valeurs par défaut, pour qu'une surface inverse
     posée DANS une section inverse (card phare du pricing en C-flat)
     puisse revenir à l'accent et au filet du papier. */
  --revalta-accent-default:  #1F4B8F;
  --revalta-sep-default:     rgba(16, 28, 51, 0.16);

  /* AJOUT — voiles posés sur image. Aujourd'hui écrits en littéral
     dans chaque section (rgba(20,17,13,.72) / rgba(235,229,218,.88)) :
     les sections doivent lire ces deux variables. */
  --revalta-veil:            rgba(251, 250, 247, 0.72);  /* voile clair — texte encre (défaut). Identité (28/09) : 0.62 → 0.72 sur la surface « light ». */
  --revalta-veil-inverse:    rgba(15, 27, 51, 0.66);     /* voile sombre — texte papier (inverse). Identité (28/09) : 0.55 → 0.66. */

  /* Décision 2026-09-25 : les pilules du hero split (999px) et le
     header (14px) sont conservés tels quels — pas de variable de rayon. */

  /* Light — surface « blanche » à peine réchauffée, pour les cards
     qui doivent se détacher du papier (jamais #fff pur). */
  --revalta-light:           #FBFAF7;

  /* ─── TYPE ─────────────────────────────────── */
  --revalta-font:            "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --revalta-w-light:         400;     /* @kind font */ /* corps, chiffres, titre hero */
  --revalta-w-medium:        500;     /* @kind font */ /* labels, boutons, titres d'item (h3) */
  --revalta-w-title:         600;     /* @kind font */ /* AJOUT étape 5 (27/09/2026) — titres web h1/h2, option B validée. Vidéo : reste 500. */

  --revalta-size-titleHero:        88px;
  --revalta-size-titleSection:     48px;
  --revalta-size-body:             32px;
  --revalta-size-label:            14px;
  --revalta-size-legalMentions:    18px;
  --revalta-size-productNameSmall: 22px;

  --revalta-lh-tight:        1.1;     /* @kind font */
  --revalta-lh-normal:       1.5;     /* @kind font */
  --revalta-lh-relaxed:      1.7;     /* @kind font */
  --revalta-lh-legal:        1.8;     /* @kind font */

  --revalta-ls-label:        0.15em;  /* @kind font */
  --revalta-ls-title:        -0.03em; /* @kind font */ /* Instrument Sans est large : un cran de plus que la police d'origine */
  --revalta-ls-default:      0;       /* @kind font */

  /* ─── SPACING ──────────────────────────────── */
  --revalta-pad-frame:       144px;   /* vidéo — cadre 1920×1080 */
  --revalta-gap-block:       48px;    /* vidéo */
  --revalta-gap-tight:       12px;    /* vidéo */
  /* AJOUT étape 5 — échelle WEB, distincte du cadre vidéo (§ 4 web). */
  --revalta-web-pad-section: 96px;    /* padding vertical des sections */
  --revalta-web-pad-x:       9vw;     /* gouttière latérale */
  --revalta-web-gap-block:   64px;    /* en-tête → contenu */
  --revalta-web-gap-tight:   24px;    /* eyebrow → titre → lede */
  /* (valeurs ≤ 768 px : voir la media query juste après :root — tokens
      rapatriés depuis revalta-web.css, que les pages du site ne chargent pas) */

  /* ─── ANIMATION ────────────────────────────── */
  --revalta-fps:             30;                              /* @kind other */
  --revalta-ease:            cubic-bezier(0.33, 1, 0.68, 1);  /* @kind other */ /* easeOutCubic */
  --revalta-fade-in:         600ms;   /* @kind other */ /* 18 frames @30fps */
  --revalta-fade-out:        467ms;   /* @kind other */ /* 14 frames @30fps */
  --revalta-stagger:         200ms;   /* @kind other */ /*  6 frames @30fps */
  --revalta-translateY:      20px;    /* @kind other */
  --revalta-translateY-out:  -12px;   /* @kind other */
}

/* Échelle web sur petit écran (tokens, lus par toutes les sections). */
@media (max-width: 768px) {
  :root { --revalta-web-pad-section: 64px; --revalta-web-pad-x: 22px; --revalta-web-gap-block: 48px; --revalta-web-gap-tight: 16px; }
}

/* BASCULE — dans une section ou une carte inverse (marine), l'accent
   et le filet prennent leur valeur inverse. Les sections continuent
   de lire --revalta-accent / --revalta-sep : rien à changer chez elles. */
.revalta-section-inverse,
.revalta-bg-B {
  --revalta-accent: var(--revalta-accent-inverse);
  --revalta-sep:    var(--revalta-sep-inverse);
}

/* ============================================================
   BASE — fond de référence
   ============================================================ */
body {
  margin: 20px;
  background: var(--revalta-fg1);
}
/* Sol WEB (pages du site, <body class="revalta">) : blanc, sans marge ;
   le papier --revalta-bg reste la teinte des bandes « paper ». */
body.revalta {
  margin: 0;
  background: var(--revalta-light);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--revalta-header-h, 90px);
}
/* Header fixe (90 px) : la première section de la page commence sous
   la barre. Remplace toute compensation locale des heros (identité, 28/09/2026). */
body.revalta main > :first-child {
  padding-top: calc(var(--revalta-header-h, 90px) + clamp(40px, 5vw, 72px));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.revalta, .revalta * { box-sizing: border-box; }
.revalta {
  color: var(--revalta-fg1);
  font-family: var(--revalta-font);
  font-weight: var(--revalta-w-light);
  font-size: 17px;          /* corps de texte web (identité, 28/09/2026) */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Or des valeurs — utilitaire (montants, chiffres, note). Jamais sur du texte courant en surface claire. */
.revalta-gold { color: var(--revalta-gold); }
.revalta-section-inverse .revalta-gold { color: var(--revalta-gold-inverse); }

/* ============================================================
   BOUTONS — pilules, le bleu porte l'action (identité, 28/09/2026)
   Bloc unique du design system (anciennement dans sections/hero.css).
   Primaire bleu accent · secondaire contour encre · or pour les cartes
   produit · sur marine et sur image + voile sombre, primaire papier.
   ============================================================ */
.revalta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border: 1px solid transparent;
  border-radius: var(--revalta-r-pill);
  font-family: var(--revalta-font);
  font-size: 15px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  white-space: nowrap;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background   200ms var(--revalta-ease),
    color        200ms var(--revalta-ease),
    border-color 200ms var(--revalta-ease);
}
.revalta-btn:focus-visible { outline: 2px solid var(--revalta-accent); outline-offset: 3px; }
.revalta-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms var(--revalta-ease);
}
.revalta-btn:hover svg { transform: translateX(4px); }

.revalta-btn-primary { background: var(--revalta-accent); color: var(--revalta-light); border-color: transparent; }
.revalta-btn-primary:hover { background: var(--revalta-fg1); color: var(--revalta-light); }

.revalta-btn-secondary { background: transparent; color: var(--revalta-fg1); border-color: var(--revalta-fg1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.revalta-btn-secondary:hover { background: var(--revalta-fg1); color: var(--revalta-light); }

.revalta-btn-gold { background: var(--revalta-gold-deep); color: #fff; border-color: transparent; }
.revalta-btn-gold:hover { background: var(--revalta-fg1); color: var(--revalta-light); }

/* Contexte inverse (marine, ou image + voile sombre) : primaire papier, survol or ; secondaire contour papier. */
.revalta-section-inverse .revalta-btn-primary,
[data-revalta-broll].revalta-section-inverse .revalta-btn-primary { background: var(--revalta-fg1-inverse); color: var(--revalta-bg-inverse); border-color: transparent; }
.revalta-section-inverse .revalta-btn-primary:hover,
[data-revalta-broll].revalta-section-inverse .revalta-btn-primary:hover { background: var(--revalta-gold-inverse); color: var(--revalta-bg-inverse); }
.revalta-section-inverse .revalta-btn-secondary { background: transparent; color: var(--revalta-fg1-inverse); border-color: var(--revalta-fg1-inverse); }
.revalta-section-inverse .revalta-btn-secondary:hover { background: var(--revalta-fg1-inverse); color: var(--revalta-bg-inverse); }

/* Groupe : des pilules distinctes, jamais soudées. */
.revalta-btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: auto; }

/* ============================================================
   SEMANTIC TYPE — usage direct
   ============================================================ */
.revalta .h1, .revalta h1.revalta-hero {
  font-size: var(--revalta-size-titleHero);
  font-weight: var(--revalta-w-title);
  line-height: var(--revalta-lh-tight);
  letter-spacing: var(--revalta-ls-title);
  margin: 0;
}
.revalta .h2, .revalta h2.revalta-section {
  font-size: var(--revalta-size-titleSection);
  font-weight: var(--revalta-w-title);
  line-height: 1.15;
  letter-spacing: var(--revalta-ls-title);
  margin: 0;
}
.revalta .body, .revalta p.revalta-body {
  font-size: var(--revalta-size-body);
  font-weight: var(--revalta-w-light);
  line-height: var(--revalta-lh-normal);
  margin: 0;
}
.revalta .label, .revalta .revalta-label {
  font-size: var(--revalta-size-label);
  font-weight: var(--revalta-w-medium);
  letter-spacing: var(--revalta-ls-label);
  text-transform: uppercase;
  color: var(--revalta-fg2);
}
.revalta .product-small {
  font-size: var(--revalta-size-productNameSmall);
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.04em;
}
.revalta .legal {
  font-size: var(--revalta-size-legalMentions);
  font-weight: var(--revalta-w-light);
  line-height: var(--revalta-lh-legal);
  color: var(--revalta-fg2);
  max-width: 60ch;
}

/* Chiffres financiers — toujours tabular */
.revalta .figure, .revalta .figure-big, .revalta .figure-small,
.revalta [data-revalta-number] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.revalta .figure-big {
  font-size: 96px;
  font-weight: var(--revalta-w-light);
  color: var(--revalta-accent);
  line-height: 1;
}

/* ============================================================
   FRAME — cadre vidéo standard
   ============================================================ */
.revalta .revalta-frame {
  width: 1920px;
  height: 1080px;
  padding: var(--revalta-pad-frame);
  display: flex;
  flex-direction: column;
  gap: var(--revalta-gap-block);
  position: relative;
}
.revalta .revalta-tight  { display: flex; flex-direction: column; gap: var(--revalta-gap-tight); }
.revalta .revalta-block  { display: flex; flex-direction: column; gap: var(--revalta-gap-block); }

/* ============================================================
   ANIMATION — keyframes de base (utilitaires)
   ============================================================ */
@keyframes revalta-fade-in {
  from { opacity: 0; transform: translateY(var(--revalta-translateY)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes revalta-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(var(--revalta-translateY-out)); }
}
.revalta .revalta-enter { animation: revalta-fade-in var(--revalta-fade-in) var(--revalta-ease) both; }
.revalta .revalta-leave { animation: revalta-fade-out var(--revalta-fade-out) var(--revalta-ease) both; }

/* ============================================================
   ICONS — Lucide stroke 1, jamais en accent
   ============================================================ */
.revalta svg.revalta-icon, .revalta .lucide {
  width: 48px;
  height: 48px;
  stroke: var(--revalta-fg1);
  stroke-width: 1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   BACKGROUND VARIANTS — A / B / C / D
   A papier plat (défaut) · B image + voile marine (texte papier)
   C image + voile papier (texte encre) · D filigrane (plan muet)
   ============================================================ */
.revalta-bg-A { background: var(--revalta-bg); }

.revalta-bg-B,
.revalta-bg-C,
.revalta-bg-D {
  position: relative;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.revalta-bg-B::before { content: ''; position: absolute; inset: 0; background: var(--revalta-veil-inverse); z-index: 1; }
.revalta-bg-C::before { content: ''; position: absolute; inset: 0; background: var(--revalta-veil);         z-index: 1; }
.revalta-bg-D::before { content: ''; position: absolute; inset: 0; background: rgba(15, 27, 51, 0.10);      z-index: 1; }

.revalta-bg-B::after,
.revalta-bg-C::after,
.revalta-bg-D::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.22; mix-blend-mode: overlay; z-index: 2; pointer-events: none;
}

.revalta-bg-B > *, .revalta-bg-C > *, .revalta-bg-D > * { position: relative; z-index: 3; }

/* BASCULE — c'est désormais la variante B (voile sombre) qui inverse
   le texte ; C (voile clair) lit le texte par défaut. */
.revalta-bg-B { color: var(--revalta-fg1-inverse); }
.revalta-bg-B .revalta-label { color: var(--revalta-fg2-inverse); }

/* ============================================================
   COMPOSITION — attributs valables sur TOUTE section (identité, 28/09/2026)
   ------------------------------------------------------------
   data-revalta-band="white|paper|sky"  teinte de la bande pleine largeur
   data-revalta-contained               la section devient un panneau arrondi
                                        centré (largeur --revalta-max), le sol
                                        blanc apparaît autour
   data-revalta-broll                   image de fond (--revalta-broll:url())
                                        + voile clair (texte encre) ou sombre
                                        si .revalta-section-inverse (texte papier)
                                        + grain
   Spécificité (0,2,0) par attribut doublé : passe devant le fond et le
   padding posés par la section (0,1,0), s'efface devant
   .revalta-section-x.revalta-section-inverse (même poids, plus tard).
   ============================================================ */
[data-revalta-band][data-revalta-band="white"] { background: var(--revalta-light); }
[data-revalta-band][data-revalta-band="paper"] { background: var(--revalta-bg); }
[data-revalta-band][data-revalta-band="sky"]   { background: var(--revalta-sky); }

[data-revalta-contained][data-revalta-contained] {
  width: min(var(--revalta-max), calc(100% - 2 * var(--revalta-web-pad-x)));
  margin: clamp(20px, 2.5vw, 40px) auto;
  border-radius: var(--revalta-r-panel);
  overflow: hidden;
  padding: clamp(48px, 5vw, 80px) clamp(28px, 4.5vw, 72px);
  isolation: isolate;
}
[data-revalta-contained] + [data-revalta-contained] { margin-top: 0; }

[data-revalta-broll][data-revalta-broll] {
  position: relative;
  background-image: var(--revalta-broll);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
[data-revalta-broll][data-revalta-broll]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--revalta-veil);
  z-index: 0;
}
.revalta-section-inverse[data-revalta-broll][data-revalta-broll]::before { background: var(--revalta-veil-inverse); }
[data-revalta-broll][data-revalta-broll]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
[data-revalta-broll][data-revalta-broll] > * { position: relative; z-index: 1; }
.revalta-section-inverse[data-revalta-broll] p,
.revalta-section-inverse[data-revalta-broll] dd,
.revalta-section-inverse[data-revalta-broll] li { color: var(--revalta-fg1-inverse); }

@media (max-width: 900px) {
  [data-revalta-contained][data-revalta-contained] { width: calc(100% - 28px); padding: 36px 24px; border-radius: 22px; }
}
@media (max-width: 480px) {
  [data-revalta-contained][data-revalta-contained] { padding: 28px 20px; border-radius: 20px; }
}

/* ============================================================
   LIENS DE PROSE — <a> de contenu sans classe dans <main>
   ============================================================ */
main a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--revalta-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.2s var(--revalta-ease, ease);
}
main a:not([class]):hover { color: var(--revalta-accent); }
main a:not([class]):focus-visible { outline: 2px solid var(--revalta-accent); outline-offset: 2px; }