/* ============================================================
   Thème Davicom . composants
   Aucune valeur de marque ici : tout passe par les variables
   produites par theme.json, elles-mêmes reprises de
   company-vault/_shared/brand/design-system/css/tokens.css.
   Sans build, sans framework.
   ============================================================ */

/* ---------- accessibilité de base ---------- */
.dv-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--wp--preset--color--deepest);color:#fff;padding:12px 20px;
  font:600 14px/1 var(--wp--preset--font-family--body);
}
.dv-skip:focus{left:var(--wp--preset--spacing--50);top:var(--wp--preset--spacing--30)}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:none;box-shadow:var(--wp--custom--focus-ring);border-radius:var(--wp--custom--radius--xs);
}

/* ---------- surtitre : le seul endroit où le tracking s'ouvre ---------- */
.dv-eyebrow{
  display:flex;align-items:center;gap:var(--wp--preset--spacing--30);
  font-family:var(--wp--preset--font-family--body);
  font-size:var(--wp--preset--font-size--caption);font-weight:600;line-height:1;
  letter-spacing:var(--wp--custom--tracking--eyebrow);text-transform:uppercase;
  color:var(--wp--preset--color--muted);
}
.dv-eyebrow::before{
  content:"";flex:none;width:28px;height:2px;border-radius:2px;
  background:var(--wp--preset--color--signal);
}
.dv-eyebrow.is-invert{color:rgba(255,255,255,.62)}

/* ---------- la wave : 2px, jamais plus ---------- */
.dv-rule-wave{
  height:2px;border:0;margin:0;border-radius:2px;
  background:var(--wp--preset--gradient--wave);
}

/* ---------- en-tête ---------- */
.dv-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--wp--preset--color--border);
}
.dv-header .wp-block-site-logo img{height:42px;width:auto}

.dv-nav .wp-block-navigation-item__content{
  font-family:var(--wp--preset--font-family--body);
  font-size:var(--wp--preset--font-size--small);font-weight:500;
  color:var(--wp--preset--color--text);text-decoration:none;
  padding-block:8px;position:relative;white-space:nowrap;
}
.dv-nav .wp-block-navigation-item__content::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--wp--preset--color--signal);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}
.dv-nav .wp-block-navigation-item__content:hover::after,
.dv-nav .current-menu-item .wp-block-navigation-item__content::after{transform:scaleX(1)}

/* Sélecteur de langue Polylang, rendu en texte plutôt qu'en drapeaux :
   un drapeau désigne un pays, pas une langue, et le Canada en a deux. */
.dv-lang{
  display:flex;gap:var(--wp--preset--spacing--10);align-items:center;
  font-family:var(--wp--preset--font-family--body);
  font-size:13px;font-weight:500;color:var(--wp--preset--color--muted);
  list-style:none;margin:0;padding:0;
}
.dv-lang li{display:flex;align-items:center}
.dv-lang li+li::before{content:"/";margin-inline:6px;color:var(--wp--preset--color--border-strong)}
.dv-lang a{text-decoration:none;color:inherit}
.dv-lang .current-lang a{color:var(--wp--preset--color--deepest);font-weight:600}

/* ---------- hero ---------- */
.dv-hero{position:relative;overflow:hidden}
.dv-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 90% at 88% 12%, rgba(0,168,224,.10) 0%, rgba(0,168,224,0) 62%),
    radial-gradient(50% 70% at 4% 88%,  rgba(0,91,125,.07) 0%, rgba(0,91,125,0) 60%);
}
.dv-hero>*{position:relative}
.dv-hero h1{max-width:19ch}
.dv-hero h1 em{font-style:normal;color:var(--wp--preset--color--primary)}

.dv-hero-media{position:relative;display:grid;place-items:center;padding:var(--wp--preset--spacing--60)}
.dv-hero-media::before{
  content:"";position:absolute;inset:8% 4%;border-radius:var(--wp--custom--radius--xl);
  background:linear-gradient(150deg,var(--wp--preset--color--panel),var(--wp--preset--color--white));
  box-shadow:var(--wp--preset--shadow--2);
}
.dv-hero-media img{position:relative;width:100%;max-width:560px;height:auto;
  filter:drop-shadow(0 18px 34px rgba(0,42,60,.20))}

/* ---------- bande de preuve ---------- */
.dv-proof{border-top:1px solid var(--wp--preset--color--border)}
.dv-proof-label{
  font-family:var(--wp--preset--font-family--body);
  font-size:var(--wp--preset--font-size--micro);font-weight:600;line-height:1;
  letter-spacing:var(--wp--custom--tracking--eyebrow);text-transform:uppercase;
  color:var(--wp--preset--color--muted);
}
.dv-proof-list{
  display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--50);
  font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:15px;
  color:var(--wp--preset--color--deepest);
}

/* ---------- cartes ---------- */
.dv-card{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  background:var(--wp--preset--color--white);
  border:1px solid var(--wp--preset--color--border);
  border-radius:var(--wp--custom--radius--lg);
  transition:
    transform    var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
    box-shadow   var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
    border-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}
.dv-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--wp--preset--shadow--3);
  border-color:var(--wp--preset--color--sky);
}
.dv-card-media{
  display:grid;place-items:center;aspect-ratio:16/10;padding:var(--wp--preset--spacing--60);
  background:var(--wp--preset--color--panel);
}
.dv-card-media img{
  max-width:100%;max-height:100%;width:auto;object-fit:contain;
  transition:transform var(--wp--custom--motion--dur-slow) var(--wp--custom--motion--ease-out);
}
.dv-card:hover .dv-card-media img{transform:scale(1.035)}
.dv-card-body{display:flex;flex-direction:column;gap:var(--wp--preset--spacing--30);
  padding:var(--wp--preset--spacing--50);flex:1}
.dv-card-body p{color:var(--wp--preset--color--muted);font-size:15px;line-height:1.6}
.dv-card-link{margin-top:auto;font-weight:600;font-size:var(--wp--preset--font-size--small)}

/* La flèche avance au survol de la carte entière, pas seulement du lien.
   Raison : la cible cliquable perçue est la carte. */
.dv-arrow{display:inline-block;
  transition:transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out)}
.dv-card:hover .dv-arrow,
.wp-block-button__link:hover .dv-arrow,
a:hover>.dv-arrow{transform:translateX(4px)}

/* ---------- tuiles industries ---------- */
.dv-tile{
  position:relative;display:flex;align-items:flex-end;isolation:isolate;
  min-height:260px;overflow:hidden;text-decoration:none;
  border-radius:var(--wp--custom--radius--lg);
}
.dv-tile img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform var(--wp--custom--motion--dur-slow) var(--wp--custom--motion--ease-out);
}
.dv-tile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(0,42,60,.10) 0%, rgba(0,42,60,.52) 55%, rgba(0,42,60,.86) 100%);
  transition:opacity var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}
.dv-tile:hover img{transform:scale(1.05)}
.dv-tile:hover::after{opacity:.88}
.dv-tile h3,.dv-tile .dv-tile-label{
  margin:0;padding:var(--wp--preset--spacing--50);
  color:var(--wp--preset--color--white);
  font-size:1.0625rem;line-height:1.3;
  text-shadow:0 1px 12px rgba(0,42,60,.5);
}

/* ---------- capture d'écran encadrée ---------- */
.dv-shot img{
  border-radius:var(--wp--custom--radius--md);
  border:1px solid var(--wp--preset--color--border);
  box-shadow:var(--wp--preset--shadow--4);
}

/* ---------- bande d'appel à l'action ---------- */
.dv-cta-band{
  position:relative;overflow:hidden;
  border-radius:var(--wp--custom--radius--xl);
  background:var(--wp--preset--gradient--deep-field);
  color:var(--wp--preset--color--white);
}
.dv-cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 100% at 78% 0%, rgba(0,168,224,.26), transparent 62%);
}
.dv-cta-band>*{position:relative}
.dv-cta-band :where(h1,h2,h3){color:var(--wp--preset--color--white)}
.dv-cta-band p{color:rgba(255,255,255,.78)}

/* ---------- pied de page ---------- */
.dv-footer{background:var(--wp--preset--color--deepest);color:rgba(255,255,255,.7);
  font-size:var(--wp--preset--font-size--small)}
.dv-footer :where(h2,h3,h4){
  color:var(--wp--preset--color--white);
  font-family:var(--wp--preset--font-family--body);
  font-size:var(--wp--preset--font-size--caption);font-weight:600;
  letter-spacing:var(--wp--custom--tracking--eyebrow);text-transform:uppercase;
}
.dv-footer a{color:rgba(255,255,255,.7);text-decoration:none}
.dv-footer a:hover{color:var(--wp--preset--color--signal)}
.dv-footer .wp-block-navigation{flex-direction:column;gap:5px}
.dv-footer .wp-block-site-logo img{height:30px;width:auto}

/* ---------- boutons : le geste tactile ---------- */
.wp-block-button__link{
  display:inline-flex;align-items:center;gap:var(--wp--preset--spacing--20);
  transition:
    background-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out),
    transform        var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out),
    box-shadow       var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}
.wp-block-button__link:hover{box-shadow:var(--wp--preset--shadow--3)}
.wp-block-button__link:active{transform:translateY(1px)}

.is-style-outline>.wp-block-button__link{
  background:transparent;color:var(--wp--preset--color--primary);
  border:1px solid var(--wp--preset--color--border-strong);
}
.is-style-outline>.wp-block-button__link:hover{
  background:var(--wp--preset--color--inset);
  border-color:var(--wp--preset--color--primary);
  color:var(--wp--preset--color--primary);box-shadow:none;
}
.dv-cta-band .is-style-outline>.wp-block-button__link{
  color:#fff;border-color:rgba(255,255,255,.35);
}
.dv-cta-band .is-style-outline>.wp-block-button__link:hover{
  background:rgba(255,255,255,.10);border-color:#fff;color:#fff;
}

/* ---------- confort de lecture ---------- */
.dv-lede{
  font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.6;
  color:var(--wp--preset--color--muted);max-width:60ch;
}
.dv-cta-band .dv-lede{color:rgba(255,255,255,.78);max-width:52ch}

/* Tableaux techniques : la lisibilité prime sur la décoration. */
.wp-block-table table{border-collapse:collapse;width:100%}
.wp-block-table :where(th,td){
  border-bottom:1px solid var(--wp--preset--color--border);
  padding:10px 12px;text-align:left;vertical-align:top;
}
.wp-block-table th{
  font-family:var(--wp--preset--font-family--body);font-weight:600;
  font-size:var(--wp--preset--font-size--caption);
  letter-spacing:var(--wp--custom--tracking--eyebrow);text-transform:uppercase;
  color:var(--wp--preset--color--muted);
}
.wp-block-table tr:last-child :where(th,td){border-bottom:0}

/* ============================================================
   MOUVEMENT . MOTION_INTENSITY 3
   Révélation au défilement en CSS natif (animation-timeline).
   Zéro JavaScript, zéro librairie. Le repli @supports garantit
   que sur un navigateur sans support le contenu s'affiche
   simplement : il ne disparaît jamais.
   transform et opacity uniquement, jamais top/left/width/height.
   ============================================================ */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .dv-reveal{
      animation:dv-rise linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 26%;
    }
  }
}
@keyframes dv-rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* Le bloc imposé par le design system. Tout ce qui est ajouté
   au-dessus de MOTION_INTENSITY 3 doit retomber statique ici. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}