/* ==========================================================================
   IMPRA × OFFICEVIBE — SIGNATURES DE MARQUE
   Couche minimale, chargée APRÈS les CSS structurels partagés.
   Ne redéfinit aucune géométrie : uniquement les trois signatures IMPRA
   (DA §8), le traitement des données, et les slots médias.
   ========================================================================== */

/* ==========================================================================
   1. SIGNATURE — LE SLASH BLEU  (DA §8.1)
   Trait oblique 18deg en bleu IMPRA, réservé aux surtitres / repères de
   section. Volontairement rare : il n'apparaît que sur .eyebrow.
   ========================================================================== */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-right: 0.62em;
  vertical-align: -0.07em;
  background: var(--impra-blue);
  transform: skewX(-18deg);
}
/* Sur surface sombre le slash reste bleu : il garde son rôle de repère,
   il n'est jamais porteur de texte (contraste bleu/navy = 3.97:1). */

/* ==========================================================================
   2. SIGNATURE — L'ACCENT DE TITRE
   Officevibe posait une phrase en sérif italique dans un titre sans-serif.
   Le PATTERN est de l'ADN structurel : il est conservé. La FAMILLE est une
   décision de marque : Plus Jakarta Sans italique la remplace.
   Le semibold rend l'inflexion lisible là où le sérif la portait seul.
   ========================================================================== */
.accent {
  font-weight: var(--weight-semibold);
  letter-spacing: inherit; /* suit le tracking du titre, contrairement au sérif */
}

/* ==========================================================================
   3. SIGNATURE — LA DONNÉE MÉTIER  (DA §8.2)
   Chiffres alignables : tabular-nums partout où une comparaison est possible.
   ========================================================================== */
.stat__value,
.gauge__value,
.metric__score,
.tier__amount,
.tier__price,
.quote-card__date,
.matrix td,
.timeline__year,
.data { font-variant-numeric: var(--font-numeric); }

/* Utilitaire de donnée : grand chiffre navy, bleu si la donnée est active */
.data { font-family: var(--font-geometric); color: var(--impra-navy); }
.data--active { color: var(--impra-blue); }
.data--success { color: var(--impra-success); }
.data--warning { color: var(--impra-warning); }
.data--danger  { color: var(--impra-danger); }
.data__unit { color: var(--impra-muted); font-weight: var(--weight-regular); }

/* ==========================================================================
   4. SLOTS MÉDIAS
   Deux natures strictement distinctes (DA §9 et §10). Aucune fausse UI
   produit n'est fabriquée : les emplacements restent des emplacements.
   ========================================================================== */
.slot {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;   /* les deux lignes restent groupées au centre */
  gap: var(--space-8);
  padding: var(--space-32);
  text-align: center;
  border-radius: var(--radius-images);
  min-height: 180px;
}
.slot__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-buttons);
}
.slot__hint {
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--impra-muted);
  max-width: 34ch;
  margin: 0;
}

/* REAL IMPRA PRODUCT — recevra un vrai screenshot SaaS ou mobile */
.slot--product {
  background: var(--impra-surface);
  border: 1px dashed color-mix(in srgb, var(--impra-blue) 42%, var(--impra-border));
}
.slot--product .slot__tag { background: var(--impra-blue-soft); color: var(--impra-blue); }

/* MARKETING ASSET — recevra une photographie automobile B2B */
.slot--asset {
  background: var(--impra-navy-soft);
  border: 1px dashed var(--impra-border-strong);
}
.slot--asset .slot__tag { background: var(--impra-surface); color: var(--impra-muted); border: 1px solid var(--impra-border); }

/* Sur surface sombre */
.showcase .slot--product,
.band-ink .slot--product,
.step-card--dark .slot--product {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.22);
}
.showcase .slot__hint,
.band-ink .slot__hint,
.step-card--dark .slot__hint { color: rgba(255, 255, 255, 0.62); }

/* Ratios — repris de .ph pour que les proportions Officevibe soient tenues */
.slot--16-10 { aspect-ratio: 16 / 10; }
.slot--4-3   { aspect-ratio: 4 / 3; }
.slot--21-9  { aspect-ratio: 21 / 9; }
.slot--1-1   { aspect-ratio: 1; }
@media (max-width: 620px) {
  /* DA §16 — un slot doit rester utile sur petit écran, pas s'effondrer */
  .slot { min-height: 150px; padding: var(--space-20); }
  .slot--21-9 { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   5. LOGO  (DA §7 — jamais redessiné, jamais recoloré)
   ========================================================================== */
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo img { height: 26px; width: auto; display: block; }
/* Version claire sur surface sombre : le SVG officiel est bicolore navy+bleu,
   il devient illisible sur navy. On l'inverse en blanc plutôt que de le
   recolorer arbitrairement — les proportions restent intactes. */
.footer .brand-logo img,
.band-ink .brand-logo img { filter: brightness(0) invert(1); }

/* ==========================================================================
   6. AJUSTEMENTS DE LISIBILITÉ
   Conséquences directes du remappage. Aucune géométrie touchée.
   ========================================================================== */

/* Le bleu IMPRA sur navy plafonne à 3.97:1 : jamais de texte bleu sur sombre.
   Les liens de footer restent en blanc atténué, comme chez Officevibe. */
.footer .link-arrow,
.band-ink .link-arrow { color: var(--impra-blue-soft); }

/* Plus Jakarta Sans a une hauteur d'x plus généreuse qu'Inter : les capitales
   traquées des eyebrows deviennent lourdes en 700. 600 rétablit la densité
   d'origine sans toucher à la taille ni au tracking. */
.eyebrow { font-weight: var(--weight-semibold); }

/* ==========================================================================
   7. GARDE-FOU — RÈGLE DU BLEU  (DA §5)
   Un même composant ne doit pas cumuler fond bleu, bordure bleue et icône
   bleue. La carte à bordure d'accent garde sa bordure ; son badge numéroté
   passe en navy pour ne pas doubler l'accent.
   ========================================================================== */
.step-card--bordered .step-num,
.tier--accent .step-num { background: var(--impra-navy); }

/* Les flèches manuscrites reliant les étapes étaient en corail chez
   Officevibe. Le corail est devenu une couleur d'état : elles passent en
   connecteur neutre pour ne pas simuler un avertissement.
   Ciblé sur l'ancien corail uniquement — la flèche navy du hero est conservée. */
.hand-arrow path[stroke="var(--color-coral)"] { stroke: var(--color-connector); }

/* ==========================================================================
   8. PLACEHOLDERS DE CONTENU
   Témoignages, logos clients, tarifs et statistiques ne peuvent pas être
   inventés (DA §18). Là où le contenu manque, l'emplacement se voit —
   il ne se déguise jamais en contenu réel.
   ========================================================================== */
.ph-line {
  display: block;
  height: 0.62em;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.15;
}
.ph-line + .ph-line { margin-top: 0.5em; }
.ph-line--80 { width: 80%; }
.ph-line--60 { width: 60%; }
.ph-line--45 { width: 45%; }

/* Emplacement de logo client — jamais de faux logo (DA §18).
   Sélecteur porté au niveau de .logo-strip span pour gagner en spécificité. */
.logo-strip .logo-slot,
.logo-slot {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: var(--space-8) var(--space-16);
  border: 1px dashed var(--impra-border-strong);
  border-radius: var(--radius-cards);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--impra-muted-soft);
}

/* Marqueur discret pour un contenu explicitement en attente */
.ph-note {
  font-size: var(--text-caption);
  color: var(--impra-muted-soft);
  font-style: italic;
}

/* Ratio téléphone pour les slots d'écran mobile */
.slot--phone { aspect-ratio: 9 / 16; }
@media (max-width: 620px) { .slot--phone { aspect-ratio: 3 / 4; } }

/* Un slot dans une cellule de bento suit la même borne que les placeholders
   du système : l'aspect-ratio seul produit des aplats démesurés. */
.bento .slot { aspect-ratio: auto; min-height: 170px; }

/* Le slash marque une SECTION, pas un sous-bloc : il ne se répète pas
   à l'intérieur d'une carte ou d'un panneau. */
.card .eyebrow::before,
.tier .eyebrow::before { display: none; }

/* Téléphone du hero — objet en avant-plan, liseré blanc en guise de bordure
   d'écran. Il reprend le rôle de la pilule flottante d'Officevibe : donner
   une seconde couche au visuel produit. */
.hero-phone {
  position: absolute;
  left: 0;
  bottom: -9%;
  width: 26%;
  min-height: 0;
  z-index: 3;
  padding: var(--space-12);
  border: 6px solid var(--impra-surface);
  outline: 1px dashed color-mix(in srgb, var(--impra-blue) 42%, var(--impra-border));
  box-shadow: var(--shadow-card);
  border-radius: 22px;
}
/* DA §16 — un screenshot doit rester utile sur petit écran.
   En colonne unique, le téléphone quitte la superposition et se pose sous la
   carte web, à une largeur réellement lisible. */
@media (max-width: 900px) {
  /* .slot--filled est déclaré plus bas et pose position:relative :
     on remonte la spécificité pour que la règle mobile l'emporte. */
  .hero-phone,
  .hero-phone.slot--filled {
    position: static;
    width: min(240px, 62%);
    margin: var(--space-24) auto 0;
    bottom: auto;
  }
}

/* ==========================================================================
   9. ÉCRANS PRODUIT RÉELS
   Un slot qui reçoit une capture cesse d'être un emplacement : l'image
   devient le contenu. Aucune image n'est jamais déformée — soit le ratio du
   fichier pilote la hauteur, soit object-fit: cover recadre sans étirer.
   ========================================================================== */
.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.slot--filled {
  display: block;             /* la grille du slot ne sert plus : l'image occupe tout */
  position: relative;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  border-style: solid;
  border-color: var(--impra-border);
}
/* L'image est sortie du flux : sans cela sa hauteur intrinsèque écraserait
   l'aspect-ratio du slot et le recadrage n'aurait pas lieu. */
.slot--filled .shot--fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* recadre, ne déforme jamais */
  object-position: top center; /* l'en-tête de l'écran reste visible */
  border-radius: 14px;
}
/* Le liseré blanc du téléphone reste, le pointillé d'emplacement disparaît */
.hero-phone.slot--filled { outline: none; }