/* ════════════════════════════════════════════════════════════
   EchoBridge — socle du thème
   Chargé sur TOUTES les pages : en-tête, pied de page, typographie,
   pages intérieures. homepage.css ne couvre que la page d'accueil et
   dépend des variables déclarées ici.
   ════════════════════════════════════════════════════════════ */

:root {
  /* Charte — mêmes valeurs que l'application (CLAUDE.md § Charte graphique) */
  --eb-navy:      #043740;
  --eb-navy-mid:  #0A5868;
  --eb-teal-deep: #015464;
  --eb-teal:      #009EA0;
  --eb-teal-lt:   #54CAC3;
  --eb-teal-pale: #E6F7F7;
  --eb-bg:        #F2FAFA;
  --eb-white:     #FFFFFF;
  --eb-red:       #EF4444;
  --eb-amber:     #F59E0B;

  /* Encre : le gris de charte (#5A7A7A) tombe à 4.41:1 sur --eb-bg, sous le
     seuil AA. --eb-ink-soft est la valeur calibrée déjà utilisée par l'app
     pour le même rôle (7.46:1 sur blanc, 7.04:1 sur --eb-bg). */
  --eb-ink:       #043740;
  --eb-ink-soft:  #3E5A5A;
  --eb-gray:      #5A7A7A;   /* réservé aux traits et fonds, jamais au texte */
  --eb-border:    #D4EEEE;
  --eb-border-sq: #BFE4E4;

  --eb-font-title: 'Glacial Indifference', 'Nunito', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --eb-font-body:  'Nunito', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --eb-shell:     1200px;
  --eb-measure:   68ch;
  --eb-radius:    14px;
  --eb-radius-lg: 20px;

  /* Chrome des cadres d'appareil (captures produit) : hors charte de marque
     par nature (ce n'est pas une couleur de marque, c'est un boîtier), mais
     déclaré ici pour n'avoir qu'une seule source plutôt que trois valeurs
     dupliquées indépendamment dans homepage.css et pages.css. */
  --eb-bezel:       #0B1F24;
  --eb-bezel-light: #23383D;
  --eb-bezel-dark:  #12262B;

  --eb-shadow-sm: 0 1px 2px rgba(4, 55, 64, .06), 0 4px 12px rgba(4, 55, 64, .05);
  --eb-shadow-md: 0 2px 4px rgba(4, 55, 64, .06), 0 12px 28px rgba(4, 55, 64, .08);
  --eb-shadow-lg: 0 4px 8px rgba(4, 55, 64, .06), 0 24px 56px rgba(4, 55, 64, .12);

  --eb-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ════════════════ BASE ════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip`, pas `hidden` : les deux bloquent le débordement horizontal, mais
     `hidden` sur un axe force l'autre (`overflow-y`) à `auto` (règle CSS
     Overflow), ce qui fait de `html` ET `body` deux conteneurs de défilement
     concurrents — l'en-tête sticky perd alors sa référence de défilement et
     ne se fige plus jamais en haut d'écran (vérifié : `top` dérive avec tout
     le document au lieu de rester à 0). `clip` ne provoque pas ce couplage. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--eb-white);
  color: var(--eb-ink);
  font-family: var(--eb-font-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

a {
  color: var(--eb-teal-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s var(--eb-ease);
}
a:hover { color: var(--eb-navy); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--eb-font-title);
  color: var(--eb-navy);
  line-height: 1.2;
  text-wrap: balance;
}

/* Anneau de focus : jamais retiré, visible sur fond clair comme sur fond sombre. */
:focus-visible {
  outline: 3px solid var(--eb-teal);
  outline-offset: 2px;
  border-radius: 4px;
}
.site-footer :focus-visible,
.hero :focus-visible,
.value-prop :focus-visible,
.page-section-dark :focus-visible {
  outline-color: var(--eb-teal-lt);
}

/* ════════════════ ACCESSIBILITÉ ════════════════ */

/* Masque visuellement sans retirer du flux des lecteurs d'écran. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Le lien d'évitement reprend sa place au focus clavier. */
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 999;
  width: auto;
  height: auto;
  margin: 0;
  padding: 14px 22px;
  overflow: visible;
  clip-path: none;
  background: var(--eb-navy);
  color: var(--eb-white);
  font-family: var(--eb-font-title);
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: var(--eb-shadow-lg);
}

/* ════════════════ EN-TÊTE ════════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--eb-border);
  transition: box-shadow .3s var(--eb-ease);
}
/* Ajoutée par site.js après quelques pixels de défilement : l'en-tête se
   resserre et gagne une ombre, plutôt que de rester figée au même gabarit
   contre le bord de la fenêtre. */
.site-header.is-scrolled {
  box-shadow: 0 1px 2px rgba(4, 55, 64, .04), 0 8px 24px rgba(4, 55, 64, .08);
}

.site-header-inner {
  max-width: var(--eb-shell);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: padding .3s var(--eb-ease);
}
.site-header.is-scrolled .site-header-inner { padding-block: 13px; }

.site-branding { display: flex; align-items: center; flex: 0 0 auto; }
.site-branding img,
.site-branding .custom-logo { display: block; width: auto; max-height: 40px; }

.site-title {
  font-family: var(--eb-font-title);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--eb-navy);
  text-decoration: none;
  padding: 8px 0;
}
.site-title:hover { color: var(--eb-teal-deep); }

.site-logo-link { display: flex; align-items: center; padding: 4px 0; }
.site-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 44vw;
  transition: height .3s var(--eb-ease);
}
.site-header.is-scrolled .site-logo { height: 21px; }

.custom-logo-link img { display: block; height: 32px; width: auto; }

/* « Se connecter » vit désormais dans <nav> (voir header.php) : un seul
   sous-arbre à faire basculer en panneau mobile plutôt que deux éléments
   frères à repositionner indépendamment l'un de l'autre. */
.site-nav { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.site-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav-list li { margin: 0; }
.site-nav-list a {
  display: block;
  padding: 12px 14px;
  font-size: .97rem;
  font-weight: 600;
  color: var(--eb-ink-soft);
  text-decoration: none;
  border-radius: 10px;
  transition: color .18s var(--eb-ease), background-color .18s var(--eb-ease);
}
.site-nav-list a:hover { color: var(--eb-navy); background: var(--eb-teal-pale); }
.site-nav-list a:active { background: var(--eb-border); }
.site-nav-list .current-menu-item > a,
.site-nav-list .current_page_item > a { color: var(--eb-navy); }

/* Sous-menus (depth 2) : ouverture au survol et au focus clavier. */
.site-nav-list .sub-menu {
  position: absolute;
  min-width: 210px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius);
  box-shadow: var(--eb-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--eb-ease), transform .18s var(--eb-ease), visibility .18s;
}
.site-nav-list > li { position: relative; }
.site-nav-list > li:hover > .sub-menu,
.site-nav-list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Bouton de menu mobile : injecté par site.js, absent sans JavaScript. */
.site-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  color: var(--eb-navy);
  background: transparent;
  border: 1px solid var(--eb-border-sq);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .18s var(--eb-ease), border-color .18s var(--eb-ease), transform .12s var(--eb-ease);
}
/* Seul bouton cliquable du site sans retour au survol/appui jusqu'ici : même
   geste que .site-nav-list a (fond teal-pale) plutôt qu'un nouveau langage. */
.site-nav-toggle:hover { background: var(--eb-teal-pale); border-color: var(--eb-border); }
.site-nav-toggle:active { background: var(--eb-border); transform: scale(.94); }
.site-nav-toggle svg { width: 22px; height: 22px; display: block; }
.site-nav-toggle .icon-close { display: none; }
.site-nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.site-nav-toggle[aria-expanded="true"] .icon-open { display: none; }

/* ════════════════ CONTENU ════════════════ */

.site-main { display: block; }

/* La page d'accueil gère ses propres pleines largeurs. */
.site-main:not(.site-main--home) {
  max-width: var(--eb-shell);
  margin: 0 auto;
  padding: 56px 24px 88px;
}

.entry-header { margin: 0 0 32px; }

.entry-title {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0;
}

.entry-content { max-width: var(--eb-measure); }
.entry-content > * { margin-block: 0 1.15em; }
.entry-content > :last-child { margin-bottom: 0; }

.entry-content h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.015em;
  margin-top: 2.2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--eb-border);
}
.entry-content h3 {
  font-size: 1.24rem;
  font-weight: 700;
  margin-top: 1.9em;
}
.entry-content h4 {
  font-size: 1.06rem;
  font-weight: 700;
  margin-top: 1.6em;
}
.entry-content h2:first-child,
.entry-content h3:first-child { margin-top: 0; }

.entry-content p,
.entry-content li { color: var(--eb-ink-soft); }

.entry-content a {
  color: var(--eb-teal-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.entry-content a:hover { color: var(--eb-navy); }

.entry-content ul,
.entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .5em; }
.entry-content li::marker { color: var(--eb-teal); }

.entry-content blockquote {
  margin-inline: 0;
  padding: 20px 24px;
  background: var(--eb-teal-pale);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius);
  color: var(--eb-ink);
}
.entry-content blockquote > :last-child { margin-bottom: 0; }

/* Les tableaux longs défilent dans leur propre boîte, jamais la page. */
.entry-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .96rem;
}
.entry-content th,
.entry-content td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--eb-border);
}
.entry-content thead th {
  color: var(--eb-navy);
  font-family: var(--eb-font-title);
  font-weight: 700;
  background: var(--eb-teal-pale);
  border-bottom-color: var(--eb-border-sq);
}
.entry-content tbody tr:last-child td { border-bottom: 0; }

.entry-content img { border-radius: var(--eb-radius); }
.entry-content hr {
  height: 1px;
  margin-block: 2.4em;
  background: var(--eb-border);
  border: 0;
}
.entry-content code {
  padding: .15em .4em;
  font-size: .9em;
  background: var(--eb-teal-pale);
  border-radius: 5px;
}
.entry-content pre {
  padding: 18px 20px;
  overflow-x: auto;
  background: var(--eb-navy);
  color: var(--eb-white);
  border-radius: var(--eb-radius);
}
.entry-content pre code { background: none; color: inherit; }

.entry-summary { color: var(--eb-ink-soft); max-width: var(--eb-measure); }

.page-links,
.pagination { margin-top: 2em; font-weight: 600; }

/* ════════════════ PIED DE PAGE ════════════════ */

.site-footer {
  background: var(--eb-navy);
  color: var(--eb-white);
}

.site-footer-inner {
  max-width: var(--eb-shell);
  margin: 0 auto;
  padding: 64px 24px 40px;
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  align-items: start;
}

.site-footer-brand-col { min-width: 0; }

.site-footer-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  font-family: var(--eb-font-title);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.site-footer-mark { border-radius: 7px; flex: 0 0 auto; }
.site-footer-tagline {
  display: block;
  margin-top: 10px;
  max-width: 34ch;
  font-family: var(--eb-font-body);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}

.site-footer-social {
  display: flex;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.site-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: color .18s var(--eb-ease), background-color .18s var(--eb-ease), border-color .18s var(--eb-ease), transform .18s var(--eb-ease);
}
.site-footer-social a:hover {
  color: var(--eb-white);
  background: var(--eb-teal-deep);
  border-color: var(--eb-teal-deep);
  transform: translateY(-2px);
}
.site-footer-social a:active { transform: translateY(-1px) scale(.94); }
.site-footer-social svg { width: 18px; height: 18px; }

.site-footer-col-title {
  margin: 0 0 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.site-footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer-nav-list a {
  display: block;
  margin: 0 -12px;
  padding: 8px 12px;
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  border-radius: 8px;
  transition: color .18s var(--eb-ease), background-color .18s var(--eb-ease);
}
.site-footer-nav-list a:hover {
  color: var(--eb-white);
  background: rgba(255, 255, 255, .08);
}
.site-footer-nav-list a:active { background: rgba(255, 255, 255, .14); }

.site-footer-legal {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .9rem;
  color: rgba(255, 255, 255, .7);
}

/* ════════════════ RESPONSIVE ════════════════ */

@media (max-width: 900px) {
  .site-header-inner { flex-wrap: wrap; padding: 12px 20px; }

  /* Avec JavaScript : le menu se replie derrière le bouton.
     Sans JavaScript : le bouton n'existe pas et le menu reste déplié. */
  .site-nav-toggle { display: inline-flex; }
  .site-header.has-js .site-nav { display: none; }
  .site-header.has-js.is-open .site-nav { display: flex; }

  .site-nav {
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-left: 0;
  }
  /* Le menu ouvert devient un panneau détaché du flux plutôt que de repousser
     le contenu de la page dans le document : sur une page longue, repousser
     le contenu fait perdre au visiteur l'endroit où il en était une fois le
     menu refermé. Ancré en `position: absolute` sur `.site-header` (déjà
     sticky, donc déjà le bloc de référence naturel des descendants absolus)
     plutôt que de faire grandir `.site-header-inner` en flux normal : la
     hauteur de l'en-tête — et donc la position du bouton — ne change jamais
     entre ouvert et fermé. */
  .site-header.has-js.is-open .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    background: var(--eb-white);
    box-shadow: var(--eb-shadow-lg);
    padding: 8px 20px 24px;
  }

  .site-nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav-list a { padding: 13px 12px; }
  .site-nav-list .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 14px;
  }
  .site-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .site-footer-brand-col { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .site-main:not(.site-main--home) { padding: 36px 20px 64px; }
  .entry-content table { font-size: .9rem; }
}

/* ════════════════ BOUTONS D'APPEL À L'ACTION ════════════════ */

/* Partagés par la home (homepage.css) et les pages éditoriales : trouvés
   sans style sur les pages intérieures, faute d'être définis ici plutôt que
   dans homepage.css (chargé seulement sur is_front_page()). Les instances
   hors home passent leur couleur en style inline (voir les gabarits
   page-*.php) ; les valeurs ci-dessous sont celles du hero sombre. */
.cta-button,
.cta-button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 15px 34px;
  font-family: var(--eb-font-title);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 100px;
  transition: transform .2s var(--eb-ease), box-shadow .2s var(--eb-ease),
              background-color .2s var(--eb-ease), border-color .2s var(--eb-ease);
}
.cta-button svg,
.cta-button-ghost svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform .2s var(--eb-ease);
}
.cta-button:hover svg,
.cta-button-ghost:hover svg {
  transform: translateX(2px);
}

.cta-button {
  background: var(--eb-white);
  color: var(--eb-teal-deep);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .10), 0 12px 30px rgba(0, 0, 0, .16);
}
.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .12), 0 18px 40px rgba(0, 0, 0, .22);
}
.cta-button:active,
.cta-button-ghost:active {
  transform: translateY(0) scale(.98);
}

.cta-button-ghost {
  background: transparent;
  color: var(--eb-white);
  border: 2px solid rgba(255, 255, 255, .45);
}
.cta-button-ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .8);
}

/* Groupe de deux CTA côte à côte : le hero d'accueil (homepage.css) ET les
   sections « Et ensuite » des pages intérieures (fonctionnalites.php,
   methode.php, a-propos.php) partagent cette classe. Définie ici, pas
   seulement dans homepage.css, pour que les pages intérieures en héritent
   aussi — sans ces règles, les deux boutons s'empilaient sans le gap voulu
   (mesuré : ~0px au lieu de 14px) et ne repassaient jamais en pleine largeur
   sous 480px comme sur la home. */
.hero-cta-group {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .hero-cta-group { flex-direction: column; align-items: stretch; }
  .hero-cta-group .cta-button,
  .hero-cta-group .cta-button-ghost,
  .hero-cta-group .cta-button-ghost-light {
    width: 100%;
  }
}

/* Un bouton pleine largeur (carte tarif, formulaire de contact) hérite du
   même padding horizontal fixe (34px) qu'un bouton dimensionné à son texte :
   sous 600px, la carte qui l'accueille est déjà réduite par le padding de la
   page ET le sien, et « Demander une démo »/« Demander un devis » repassaient
   alors sur deux lignes (vérifié : hauteur rendue ~83px pour un bouton de
   52px de haut). Un padding resserré seulement ici, jamais sur les boutons
   du hero (dimensionnés à leur contenu, jamais à l'étroit) suffit à repasser
   sur une seule ligne. */
@media (max-width: 600px) {
  .pricing-card .cta-button,
  .pricing-card .cta-button-ghost,
  .pricing-card .cta-button-ghost-light,
  .contact-form .cta-button {
    padding-inline: 14px;
  }
}

/* ════════════════ CAPTURES DE PRODUIT (fenêtre flottante) ════════════════
   Partagé par homepage.css (visite produit de l'accueil, .tour-card) et
   pages.css (.page-section, une capture) : déplacé ici pour que les deux
   fichiers, qui ne se chargent jamais ensemble, rendent la même fenêtre au
   lieu de deux styles différents (l'accueil gardait l'ancien cadre bezel
   « mockup téléphone/ordinateur » quand les pages intérieures étaient déjà
   passées à la fenêtre avec barre d'adresse).
   Halo dégradé teal derrière le cadre (même geste que le halo du hero,
   assets/css/homepage.css `.hero::before`). Bordure hairline, barre
   d'adresse affichant la route réelle (texte, jamais un lien). Survol et
   redressement au défilement (`.has-tilt`, activé par pages.js/home.js). */
.section-shot {
  position: relative;
  max-width: 780px;
  margin: 40px auto 0;
}
.section-shot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(84, 202, 195, .28) 0%, rgba(0, 158, 160, .1) 45%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
.page-section-dark .section-shot::before {
  background: radial-gradient(circle, rgba(84, 202, 195, .35) 0%, rgba(84, 202, 195, .12) 45%, transparent 70%);
}
.section-shot-frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--eb-white);
  border: 1px solid rgba(4, 55, 64, .08);
  border-radius: var(--eb-radius-lg);
  box-shadow: var(--eb-shadow-lg);
  transition: transform .3s var(--eb-ease), box-shadow .3s var(--eb-ease);
}
.section-shot-frame::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--eb-teal-light) 30%, var(--eb-teal) 50%, var(--eb-teal-light) 70%, transparent);
  opacity: .9;
}
.page-section-dark .section-shot-frame {
  border-color: rgba(255, 255, 255, .14);
}
.section-shot-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .12), 0 30px 60px rgba(0, 0, 0, .24);
}
/* Le cadre reste une fenêtre CLAIRE même dans une section sombre (c'est un
   chrome de capture d'écran, pas un bloc de la page) : pas de variante
   `.page-section-dark` ici, sous peine de rendre la barre d'adresse et ses
   pastilles quasi invisibles sur le blanc du cadre. */
.section-shot-toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--eb-bg);
  border-bottom: 1px solid rgba(4, 55, 64, .07);
}
.section-shot-dots { display: flex; flex: none; gap: 6px; }
.section-shot-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(4, 55, 64, .16);
}
.section-shot-url {
  flex: 1;
  min-width: 0;
  padding: 5px 14px;
  background: var(--eb-white);
  border: 1px solid rgba(4, 55, 64, .06);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--eb-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-shot-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
  background: var(--eb-bg);
}
/* Capture absente : le cadre garde son format réservé plutôt qu'une image
   cassée. */
.section-shot-frame.is-empty::before {
  content: '';
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--eb-teal-pale);
}
.section-shot-caption {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  text-align: center;
  font-size: .88rem;
  color: var(--eb-ink-soft);
}
.page-section-dark .section-shot-caption { color: rgba(255, 255, 255, .75); }

/* Redressement au défilement : droit par défaut (sans JS ou mouvement
   réduit), incliné puis redressé une fois `.has-tilt` posé par pages.js ou
   home.js. `--tilt-delay` reste à 0ms sauf sur la grille de la visite
   produit de l'accueil, qui l'utilise pour faire entrer plusieurs captures
   voisines en cascade plutôt que d'un seul bloc. */
.section-shot.has-tilt .section-shot-frame {
  transform: perspective(1300px) rotateX(11deg) translateY(14px) scale(.965);
  transition: transform .8s var(--eb-ease) var(--tilt-delay, 0ms);
  will-change: transform;
}
.section-shot.has-tilt.is-in-view .section-shot-frame {
  transform: perspective(1300px) rotateX(0) translateY(0) scale(1);
}
.section-shot.has-tilt.is-in-view .section-shot-frame:hover {
  transform: translateY(-4px);
}

/* Variante portrait, pour une capture mobile (visite produit de l'accueil,
   côté collaborateur) : même fenêtre, aspect resserré. */
.section-shot-portrait { max-width: 260px; }
.section-shot-portrait .section-shot-frame img,
.section-shot-portrait .section-shot-frame.is-empty::before {
  aspect-ratio: 39 / 82;
}

/* ════════════════ TRANSITIONS ENTRE PAGES ════════════════ */

/* Navigation same-origin : fondu enchaîné natif du navigateur, sans bundler
   ni bibliothèque. Ignoré par les navigateurs qui ne connaissent pas la
   règle (repli silencieux sur une navigation classique). */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .32s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .01ms;
  }
}

/* ════════════════ ENTRÉE DES HERO ════════════════
   Partagé par homepage.css (hero d'accueil) et pages.css (.page-hero des
   pages intérieures) : un seul keyframe, jamais dupliqué entre les deux
   fichiers qui ne se chargent jamais en même temps. */
@keyframes eb-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════ MOUVEMENT RÉDUIT ════════════════ */

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