/*
Theme Name: Retail ITS
Description: Custom theme for Retail ITS: point-of-sale hardware, installation and maintenance. Built for Elementor and WooCommerce (catalogue), bilingual with Polylang. Brand colours and fonts follow Elementor > Site Settings.
Author: Retail ITS
Version: 4.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: retailits-modern
*/

/* =========================================================================
   Design tokens. Light is the site's only theme.
   Brand colours and fonts are read from the Elementor kit (Elementor >
   Site Settings > Global Colors / Global Fonts): the kit's variables live on
   body.elementor-kit-N, so the tokens that follow them are defined on body,
   with the brand literal as the fallback when the kit is not available.
   ========================================================================= */
:root{
  --white:#FFFFFF;
  --paper:#F5F7F9;
  --paper-2:#EDF0F3;
  --line:#E2E6EA;
  --line-2:#CFD5DB;
  --stage:#F5F7F9;

  --r-card:16px;
  --r-media:14px;
  --r-sm:10px;
  --gut:clamp(20px,4vw,64px);
  --maxw:1360px;
  --hdr-h:96px;
  --ease:cubic-bezier(.4,0,.2,1);

  --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:48px; --space-8:64px; --space-9:96px;
}
/* Kit-driven tokens: Primary = ink (headings), Text = body copy, Secondary =
   muted slate, Accent = the brand colour; Primary/Text fonts = display/body. */
body{
  --ink:var(--e-global-color-primary,#0A0D11);
  --ink-2:var(--e-global-color-text,#3D444C);
  --ink-3:var(--e-global-color-secondary,#5E656D);
  --accent:var(--e-global-color-accent,#0B4FE0);
  --accent-hover:color-mix(in srgb,var(--accent) 82%,#000);
  --accent-soft:color-mix(in srgb,var(--accent) 8%,#fff);
  --ink-on-stage:var(--ink);
  --k-ink:var(--ink);--k-ink-2:var(--ink-2);--k-ink-3:var(--ink-3);
  --k-accent:var(--accent);--k-accent-hover:var(--accent-hover);--k-accent-soft:var(--accent-soft);
  --f-display:var(--e-global-typography-primary-font-family,"Figtree"),"Figtree Fallback","Helvetica Neue",Arial,sans-serif;
  --f-body:var(--e-global-typography-text-font-family,"Hanken Grotesk"),"Hanken Grotesk Fallback","Helvetica Neue",Arial,sans-serif;
}

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

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--f-display);margin:0 0 .45em;font-weight:400;letter-spacing:-.025em;line-height:1.1;color:var(--ink);text-wrap:pretty}
h1{font-size:clamp(2.1rem,4.2vw,3.6rem);letter-spacing:-.03em}
h2{font-size:clamp(1.7rem,3vw,2.6rem)}
h3{font-size:1.2rem;font-weight:500}
h4{font-size:1rem;font-weight:500}
ul{padding-left:1.15em}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
/* white on the accent is only ~3.2:1 - the skip link inverts against the page
   ground instead, which reads at 19:1+ in both themes */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--white);padding:10px 18px;z-index:999;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.eyebrow{
  display:inline-block;font-family:var(--f-body);font-size:12px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-body);font-size:15px;font-weight:500;padding:13px 26px;
  border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.btn-primary:hover{background:#E4E4E4;border-color:#E4E4E4;color:var(--ink)}
.btn-outline,.btn-light{border-color:#fff;color:var(--ink);background:#fff}
.btn-outline:hover,.btn-light:hover{border-color:#E4E4E4;background:#E4E4E4;color:var(--ink)}

.btn-outline-light{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-white{background:#fff;color:var(--ink);border-color:#fff}
.btn-white:hover{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.86)}
.btn-wghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-wghost:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* ---------------- header ---------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;height:var(--hdr-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
/* The solid bar is a surface, not a flat fill. Three low-amplitude layers:
   a hairline of light along the top edge, one cobalt bloom anchored under
   the logo, and a vertical gradient that settles very slightly darker at the
   bottom so the bar has a direction. The bottom rule is a gradient that
   fades out at both ends rather than a border that stops dead at the
   viewport edge. Values are per-theme tokens - see light-site.css. */
.site-header{
  --hdr-lift:rgba(255,255,255,0);
  --hdr-bloom:color-mix(in srgb,var(--accent) 7%,transparent);
  --hdr-sink:rgba(10,13,17,.035);
  --hdr-edge:rgba(255,255,255,.85);
  --hdr-rule:rgba(10,13,17,.10);
  /* how much of the bar survives as its own surface once the page shows
     through it - low enough to see movement, high enough to carry the nav */
  --hdr-veil:rgba(255,255,255,.95);
}
.site-header.is-solid,.site-header.is-open,
body:not(.home) .site-header{
  background:
    linear-gradient(180deg,var(--hdr-lift) 0%,transparent 44%),
    radial-gradient(62% 190% at 13% -60%,var(--hdr-bloom) 0%,transparent 72%),
    linear-gradient(180deg,transparent 58%,var(--hdr-sink) 100%),
    var(--white);
  border-bottom-color:transparent;
  box-shadow:inset 0 1px 0 var(--hdr-edge);
}

/* The bar lets the page through. The opaque base is swapped for a veil and
   what is behind it is frosted, so content reads as continuing underneath
   rather than being cut off at the header's edge.

   Only inside @supports, and deliberately so: without backdrop-filter the
   veil alone would put the nav labels straight on top of whatever scrolls
   past, which is unreadable exactly when it matters. Those browsers keep
   the opaque surface above.

   The veil is per-theme - see light-site.css for the light value. */
@supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .site-header.is-solid,.site-header.is-open,
  body:not(.home) .site-header{
    background:
      linear-gradient(180deg,var(--hdr-lift) 0%,transparent 44%),
      radial-gradient(62% 190% at 13% -60%,var(--hdr-bloom) 0%,transparent 72%),
      linear-gradient(180deg,transparent 58%,var(--hdr-sink) 100%),
      var(--hdr-veil);
    /* the frost itself: without it the veil alone lets the text scrolling
       underneath show through the bar as a ghost */
    -webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);
  }
  /* The mobile drawer hangs off the header and is an opaque sheet; a frosted
     strip above it would read as a seam, so the open bar stays solid. */
  @media(max-width:1040px){
    .site-header.is-open{
      background:
        linear-gradient(180deg,var(--hdr-lift) 0%,transparent 44%),
        radial-gradient(62% 190% at 13% -60%,var(--hdr-bloom) 0%,transparent 72%),
        linear-gradient(180deg,transparent 58%,var(--hdr-sink) 100%),
        var(--white);
      -webkit-backdrop-filter:none;backdrop-filter:none;
    }
  }
}
/* the fading bottom rule, drawn outside the box so it never eats a pixel of
   the bar's height or shifts the layout */
.site-header.is-solid::after,.site-header.is-open::after,
body:not(.home) .site-header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--hdr-rule) 16%,var(--hdr-rule) 84%,transparent 100%);
}
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
/* On phones WordPress lets its toolbar scroll away with the page, which left
   a 46px gap above the fixed header where the content showed. The toolbar
   stays pinned instead, so the header always sits right under it. Logged-in
   users only: visitors have no toolbar. */
@media(max-width:600px){#wpadminbar{position:fixed}}

.header-inner{
  display:flex;align-items:center;gap:22px;height:var(--hdr-h);
  max-width:none;width:100%;margin:0;padding:0 clamp(20px,2.6vw,48px);
}
.logo{display:flex;align-items:center;flex-shrink:0;font-weight:600;font-size:1.15rem;color:var(--ink)}
.logo-img{height:46px!important;width:auto!important;max-width:none!important;transition:filter .22s var(--ease)}
/* the dark logo variant is gone: one mark, shown everywhere */

.mobile-panel{display:flex;align-items:center;flex:1;gap:20px}
.main-nav{margin-left:auto}
.main-nav>ul{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0}
.main-nav li{position:relative}
.main-nav>ul>li>a{
  display:flex;align-items:center;gap:6px;font-family:var(--f-body);font-size:15px;font-weight:500;
  color:var(--ink);padding:9px 15px;border-radius:999px;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.home .site-header:not(.is-solid):not(.is-open) .main-nav>ul>li>a{color:#fff}
.main-nav>ul>li>a:hover{background:var(--paper-2)}
.home .site-header:not(.is-solid):not(.is-open) .main-nav>ul>li>a:hover{background:rgba(255,255,255,.16)}
.main-nav .current-menu-item>a{background:var(--paper-2)}
.home .site-header:not(.is-solid):not(.is-open) .main-nav .current-menu-item>a{background:rgba(255,255,255,.16)}
.main-nav .menu-item-has-children>a::after{
  content:'';width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);margin-left:5px;opacity:.7;transition:transform .2s var(--ease);
}
.main-nav .menu-item-has-children.submenu-open>a::after{transform:rotate(-135deg) translateY(-2px)}

/* mega panel - grid-rows reveal */
.main-nav .sub-menu{
  position:absolute;left:0;right:0;top:var(--hdr-h);width:100vw;margin-left:calc(-50vw + 50%);
  list-style:none;padding:0;margin-block:0;
  /* padding-box: the panel keeps a 1px transparent bottom border while
     collapsed, and a border-box background paints straight through it,
     drawing a hairline across the hero under the fixed header.
     Panel is always white, independent of the site's dark/light theme -
     same contrast trick the reference site uses. Re-scoping the color
     tokens here (not just the background) flips every descendant that
     reads var(--ink)/var(--ink-2)/etc. to its light-mode value too, so
     the mega-menu text stays readable without touching each rule. */
  background:#fff;background-clip:padding-box;
  border-bottom-left-radius:28px;border-bottom-right-radius:28px;
  --white:#fff;--paper:#F5F7F9;--paper-2:#EDF0F3;
  
  --line:#E2E6EA;--line-2:#CFD5DB;
  
  border-bottom:1px solid transparent;
  display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .24s var(--ease);z-index:190;
}
.main-nav>ul>li{position:static}
.main-nav .menu-item-has-children.submenu-open>.sub-menu{grid-template-rows:1fr;border-bottom-color:var(--line)}
.main-nav .sub-menu>.mega-shell{min-height:0;overflow:hidden;list-style:none}
.mega-inner{
  max-width:var(--maxw);margin:0 auto;padding:clamp(20px,2.4vw,34px) var(--gut) clamp(10px,1vw,14px);
}
.mega-cols{
  list-style:none;margin:0;padding:0;
  /* wide columns so the six product categories land as a balanced 3 x 2
     rather than 5 + 1 with a hole in the second row */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;
}
/* a second-level item WITH children acts as a column heading... */
.mega-cols>li.menu-item-has-children>a{
  display:block;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);padding:0 0 14px;
}
.mega-cols>li.menu-item-has-children>a:hover{color:var(--accent)}
/* ...while one without children is simply a link - styled as a bordered tile */
/* mega panel items render as cards: name, blurb, count and an arrow that
   slides on hover (see RetailITS_Mega_Walker::start_el) */
.mega-cols>li{display:flex}

.mega-cols .sub-sub-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mega-cols .sub-sub-menu a{
  display:block;padding:8px 0;font-size:15.5px;color:var(--ink);transition:color .15s var(--ease);
}
.mega-cols .sub-sub-menu a:hover{color:var(--accent)}

.mobile-panel-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.mobile-panel-actions .btn{padding:9px 20px;font-size:14px}
.home .site-header:not(.is-solid):not(.is-open) .btn-outline{color:var(--ink);background:#fff;border-color:#fff}
.home .site-header:not(.is-solid):not(.is-open) .btn-outline:hover{background:#E4E4E4;color:var(--ink);border-color:#E4E4E4}
.lang-switch{display:flex;align-items:center}

.menu-toggle{
  display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);
  background:transparent;cursor:pointer;padding:0;place-items:center;flex-shrink:0;
}
.menu-toggle span{display:block;width:16px;height:1.6px;background:var(--ink);margin:3.5px auto;transition:transform .25s var(--ease),opacity .2s ease}
.home .site-header:not(.is-solid):not(.is-open) .menu-toggle{border-color:rgba(255,255,255,.45)}
.home .site-header:not(.is-solid):not(.is-open) .menu-toggle span{background:#fff}
.menu-toggle.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.submenu-caret{display:none}

/* body offset for the fixed header on non-hero pages */
body:not(.home){padding-top:var(--hdr-h)}

/* ---------------- hero ---------------- */
.hero-split{
  /* The logo bar sits directly under the hero and has to be inside the first
     screen, so the hero reserves its height instead of taking the whole fold.
     svh, not vh: on mobile vh is the tallest possible viewport, which would
     hide the bar again behind the browser's own chrome. */
  position:relative;min-height:min(88vh,760px);display:flex;align-items:center;overflow:hidden;
  background:var(--ink);width:100vw;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);
}
.hero-photo{position:absolute;inset:0;z-index:0;flex:none;border:0}
/* ---- first screen: hero + logo bar, never one clipping the other ---- */
:root{--ticker-h:214px}
@media(min-width:901px){
  .home .hero-split{min-height:min(760px,calc(100svh - var(--ticker-h)))}
}
/* Short screens: the hero cannot shrink past its own copy, so the bar scales
   with it. Each step trims the hero's padding and the logo height together,
   and --ticker-h is kept in sync so the hero keeps reserving the right amount.
   Measured, not guessed: the bar lands inside the first screen at 1040, 900,
   820 and 740px of viewport height. */
@media(min-width:901px) and (max-height:960px){
  :root{--ticker-h:158px}
  .hero-split .hero-panel{padding-top:calc(var(--hdr-h) + 18px);padding-bottom:48px}
}
@media(min-width:901px) and (max-height:880px){
  /* On a short screen the headline alone is most of the fold - 5.7rem of type
     over a 660px viewport. Padding cuts cannot buy enough room, so the hero
     steps down a type size here. The copy is all still there; it simply stops
     being set at display scale on a screen that has no room for it. */
  :root{--ticker-h:120px}
  .hero-split .hero-panel{padding-top:calc(var(--hdr-h) + 12px);padding-bottom:30px}
  .hero-split .hero-panel h1{font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1.04}
  .hero-split .hero-panel p{margin-top:16px;font-size:15.5px;line-height:1.55}
  .hero-split .hero-actions{margin-top:22px}
}
@media(max-width:900px){
  :root{--ticker-h:152px}
}

.hero-photo img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover}
/* The framing of the hero photograph.
   The source is 4:3 and the section is much wider, so cover scales it to the
   full width: object-position has nothing to pan, the whole frame is already
   on screen. Enlarging from the left edge is the only way to push the
   checkout stand rightward in a photograph that is not being cropped
   horizontally to begin with - and it crops the far right in exchange.
   1 is the widest the frame goes: below that, cover stops covering and the
   section shows through at the edges. Raise --hero-zoom to come in closer.
   The parent clips, because a transform paints outside the img's own box. */
@media(min-width:701px){
  .hero-photo{overflow:hidden;--hero-zoom:1}
  .hero-photo img{transform-origin:0 50%;transform:scale(var(--hero-zoom))}
}

/* LIGHT MODE: fit the photograph to the hero's HEIGHT, not its width.
   Spanning the full width forces a 4:3 frame into a much wider opening, so
   cover scales it up until better than a third of the picture is cropped off
   top and bottom and the checkout stand reads as a close-up. But the left of
   the band is under the ramp's pure white, so the photograph does not have to
   reach it. Sized to the height and anchored right, the whole frame fits
   vertically and the stand sits back at its true scale; the empty left is
   white on white and has no edge to see.

   min-width is the guard: on a very wide screen the height-fitted photo would
   be narrow enough that its left edge cleared the white and showed as a line,
   so it is not allowed below the width the ramp can still cover, and past
   that point it simply goes back to cropping.

   Light only: the dark theme has no white ramp to hide the gap behind, so
   there the photograph still has to cover the whole band. */
@media(min-width:701px){
  :root[data-theme="light"] .lh-on .hero-photo{display:flex;justify-content:flex-end}
  :root[data-theme="light"] .lh-on .hero-photo img{
    width:auto!important;height:100%!important;min-width:66%;
    object-fit:cover;object-position:center;transform:none;
  }
}
.hero-photo::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  /* dot grid must paint ABOVE the ::after darkening scrim (lower z-index)
     so it sits visibly on the near-solid backdrop instead of being
     covered by it - dots reading as a deliberate grid, not photo noise.
     Each dot is a tiny embossed bead rather than a flat disc: an
     off-center bright highlight layered over an offset dark shadow,
     both tiled on the same grid, reads as a small raised sphere. */
  background-image:
    radial-gradient(circle at 41% 38%, rgba(255,255,255,.95) 0px, rgba(255,255,255,.55) 1px, transparent 1.7px),
    radial-gradient(circle at 59% 62%, rgba(0,0,0,.4) 0px, transparent 1.6px);
  background-size:22px 22px,22px 22px;
  background-position:0 0,0 0;
  /* fixed pixel zone anchored to the bottom edge, not a percentage of hero
     height - a percentage-based fade breaks (creeps up into the content)
     whenever the hero's total height changes, which it has repeatedly.
     Re-measured against the actual rendered button position (not assumed):
     at the current copy length/text size, hero-actions bottoms out ~190px
     above the hero's bottom edge, so this zone starts at 150px to leave a
     real ~40px buffer, confirmed by direct measurement after deploy. */
  -webkit-mask-image:linear-gradient(180deg,
    transparent 0%, transparent calc(100% - 150px),
    rgba(0,0,0,.12) calc(100% - 120px),
    rgba(0,0,0,.35) calc(100% - 95px),
    rgba(0,0,0,.6) calc(100% - 65px),
    rgba(0,0,0,.85) calc(100% - 32px),
    black 100%);
  mask-image:linear-gradient(180deg,
    transparent 0%, transparent calc(100% - 150px),
    rgba(0,0,0,.12) calc(100% - 120px),
    rgba(0,0,0,.35) calc(100% - 95px),
    rgba(0,0,0,.6) calc(100% - 65px),
    rgba(0,0,0,.85) calc(100% - 32px),
    black 100%);
}
.hero-photo::after{
  content:'';position:absolute;inset:0;z-index:1;
  /* top scrim masks any horizontal edge in the photograph sitting under the
     transparent header, and keeps the nav legible whatever the image does.
     Bottom scrim fades the strip behind the dot grid to near-solid black,
     so the dots read as a clean deliberate pattern instead of scattered
     white flecks over photo detail. */
  /* Scrim weights were lowered so the photograph reads through instead of
     sitting in shadow. The left-hand value is the one that matters: the
     headline and paragraph sit over it, and white text needs the backdrop
     kept dark enough to stay legible - measured after the change against the
     actual rendered pixels behind the text, not judged by eye. */
  background:
    linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.34) 90px,rgba(0,0,0,0) 190px),
    linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) calc(100% - 170px),rgba(0,0,0,.6) calc(100% - 110px),rgba(0,0,0,.88) calc(100% - 55px),rgba(0,0,0,.97) 100%),
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.46) 46%,rgba(0,0,0,.16) 100%);
}
.hero-panel{
  position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;
  padding:calc(var(--hdr-h) + clamp(28px,3.4vw,58px)) var(--gut) clamp(74px,7.2vw,108px);
  background:none;color:#fff;display:block;
}
.hero-panel .eyebrow{color:rgba(255,255,255,.72)}
.hero-panel h1{color:#fff;max-width:15ch;margin-bottom:0;font-size:clamp(2.8rem,6.6vw,5.7rem);line-height:1.0}
/* The English headline runs ~8% longer than the French at the same size and
   spilled onto a fourth line, making the English hero taller than the French
   one. A proportionally wider measure keeps both on three lines at one size. */
.hero-panel h1:lang(en){max-width:16.2ch}
.hero-panel p{margin-top:22px;color:rgba(255,255,255,.82);max-width:52ch;font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.62}
.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}

/* The handwritten line, injected by retailits_hero_script_line().
   It sits in the gap between the copy and the checkout stand - the part of
   the ramp that has gone soft but not yet reached the photograph - so it
   needs no panel behind it.

   It only appears from 1400px up. The photograph is fitted to the hero's
   height and anchored right, so its left edge sits at roughly (viewport -
   1013px): the narrower the screen, the further left the picture reaches and
   the deeper into it this line falls. At 1440 it lands about 220px in, on the
   pale shutters; by 1100 it is 400px in, across the checkout stand itself,
   with the underline cutting through the machine. There is no position that
   works at both, so below 1400 it simply does not show. */
.hero-script{display:none}
@media(min-width:1400px){
  .hero-script{
    /* The line goes in the empty band between the copy and the checkout
       stand, and both of its walls move differently - which is why the first
       two attempts failed.

       Measured: the headline's right edge is FIXED at ~545px (its font-size
       is clamped, so it stops growing), while the stand's left edge sits at
       ~1038px at 1400 and ~1440px at 1900. It moves because the photograph's
       width is max(hero-height x 4/3, 66vw) - the height drives it on a
       short window, the 66vw floor on a wide one - so no percentage and no
       fixed right-offset can track it. A left % walked into the headline; a
       fixed right: landed on top of the stand at 1900.

       The clamp holds it in the band instead: 600px keeps it clear of the
       headline at the narrow end, 45.5vw follows the stand out as the window
       grows, and 1100px stops it wandering off on an ultra-wide screen. That
       leaves ~130px of air to the stand at 1400 and ~270px at 1900 - near it,
       as asked, without crowding it. */
    position:absolute;z-index:3;left:clamp(600px,45.5vw,1100px);top:73%;
    display:flex;flex-direction:column;align-items:center;
    transform:rotate(-4deg);transform-origin:center;
    font-family:"Sacramento","Sacramento Fallback","Segoe Script","Brush Script MT",cursive;
    font-size:clamp(1.45rem,2vw,2.2rem);line-height:1.02;letter-spacing:.01em;
    color:#1E3A6B;pointer-events:none;text-wrap:nowrap;
    /* The line is wider than the gap between the copy and the photograph, so
       its tail always crosses onto the image - there is nowhere it fits
       cleanly. A stacked white halo gives it its own ground instead of a
       panel, which is what keeps it readable over the shutters. */
    text-shadow:0 0 6px #fff,0 0 14px #fff,0 0 26px rgba(255,255,255,.92);
  }
  /* A breath of white behind the line. In the reference the handwriting sits
     on a blown-out part of the photograph; here the same spot is the checkout
     counter, which is busy enough to eat thin strokes. This is the blow-out,
     painted locally - a wide soft radial with no edge, so it reads as light
     on the glass rather than as a panel under the text. */
  .hero-script::before{
    content:'';position:absolute;z-index:-1;pointer-events:none;
    left:50%;top:50%;transform:translate(-50%,-50%);
    width:230%;height:420%;
    /* eased falloff (no visible ring) in the tones the hero fade itself
       uses - near-white easing into the page ground - then blurred so the
       ellipse has no edge left to find */
    background:radial-gradient(50% 50% at 50% 50%,
      rgba(250,251,253,.9) 0%,
      rgba(248,249,252,.82) 18%,
      rgba(245,247,251,.66) 34%,
      rgba(241,243,249,.46) 50%,
      rgba(237,240,247,.27) 64%,
      rgba(234,237,245,.12) 78%,
      rgba(233,236,244,.04) 90%,
      rgba(233,236,244,0) 100%);
    filter:blur(22px);
  }
  .hero-script-l1{padding-left:1.6em}
  .hero-script-rule{
    width:92%;height:auto;margin-top:.12em;color:#2A4A80;opacity:.95;
    filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 14px rgba(255,255,255,.9));
  }
}
/* The hero copy opens the page, so it starts on the same left edge as the
   logo above it. Capped to --maxw and centred it drifted inward once the
   viewport passed ~1490px - 334px in at 1900px, against the logo's 48px -
   which read as an indent rather than as the start of the page. Full-bleed
   on the header's own gutter puts the two on one edge. Below 1490px the cap
   never bound anyway, so only the gutter value changes there. */
@media(min-width:901px){
  .hero-panel{max-width:none;padding-inline:clamp(20px,2.6vw,48px)}
}
@media(max-width:700px){
  .hero-split{min-height:0}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
}

/* ---------------- sections ---------------- */
.sec{padding:clamp(64px,7.5vw,120px) 0}

/* capabilities / services - icon card grid */

.cap{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  display:flex;flex-direction:column;overflow:hidden;
}

.cap-icon{
  width:60px;height:60px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;flex-shrink:0;
  position:relative;
}
/* icons via mask-image (a stylesheet value, not saved-post HTML) rather than
   inline <svg> markup - Elementor's text-widget sanitizer strips <svg>/<path>
   tags from stored content on render, which left these circles empty */
.cap-icon::before{
  content:'';display:block;width:24px;height:24px;background-color:#fff;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.cap-icon--printer::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
}
.cap-icon--gear::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
.cap-icon--shield::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9 8 11 4.6-2 8-6 8-11V5z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9 8 11 4.6-2 8-6 8-11V5z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.cap-icon--headset::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
}
.cap h3{margin:0 0 10px;font-size:18px;font-weight:500;color:var(--ink)}
.cap p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.6}

/* ---------------- product cards ---------------- */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
.product-card{
  background:var(--paper);border:0;border-radius:var(--r-card);padding:16px;overflow:visible;
  display:flex;flex-direction:column;transition:background .22s var(--ease);
}
.product-card:hover{background:var(--paper-2);transform:none;box-shadow:none}
.product-card-img{
  background:var(--white);border-radius:var(--r-media);aspect-ratio:1;display:grid;place-items:center;
  padding:22px;perspective:900px;overflow:hidden;
}
.product-card-img img{max-height:100%;width:auto;object-fit:contain;transition:transform .45s var(--ease)}
.product-card:hover .product-card-img img{transform:rotateY(-11deg) rotateX(4deg) scale(1.04)}
.product-card h3{padding:16px 6px 0;font-size:16.5px;font-weight:500;margin:0}
.product-card p{padding:6px 6px 0;color:var(--ink-2);font-size:14px;margin:0}
@media(max-width:1080px){.products-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.products-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------------- split / about ---------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}

/* ---------------- CTA band ---------------- */
.cta-band{
  background:var(--paper-2);color:#fff;border-radius:0;padding:0;text-align:left;overflow:hidden;
  width:100vw;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);
}
:root[data-theme="light"] .cta-band{background:var(--ink)}
.cta-band::before{content:none}
.cta-in{  max-width:var(--maxw);margin:0 auto;padding:clamp(52px,6vw,88px) var(--gut);
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
}
.cta-band h2{color:#fff;max-width:20ch;margin-bottom:0}
.cta-band p{margin-top:14px;color:rgba(255,255,255,.75);max-width:46ch;font-size:16.5px;margin-bottom:0}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
/* The band is an Elementor widget printed from a template (inc/footer-band.php):
   the wrappers Elementor puts around it take no room of their own. */
.rits-fb-tpl .elementor-section > .elementor-container{max-width:none}
.rits-fb-tpl .elementor-widget-wrap{padding:0!important}
/* widget option "Formes décoratives" switched off */
:root:root .cta-band.cta-band--plain::before,:root:root .cta-band.cta-band--plain::after{content:none}
/* a point that carries the owner's own image instead of a drawn icon */
.cta-point-icon img{width:20px;height:20px;object-fit:contain;display:block}
@media(max-width:600px){.cta-actions{flex-direction:column;width:100%}.cta-actions .btn{width:100%}}

/* ---------------- generic pages ---------------- */
/* The title band sits on the same column as the content under it, with the
   title and the breadcrumb centred above it and close to it: the band and the
   content read as one block, not as two sections. */
/* top padding = the three gaps under the breadcrumb (band bottom + content
   top + card margin) minus the blank the h1 line-height adds above its
   letters, so the title sits midway between the header and the card */
.page-hero{background:var(--paper);padding:clamp(24px,3.2vw,46px) 0 clamp(12px,1.4vw,20px);text-align:center;border-bottom:1px solid var(--line)}
body .page-hero + .page-content,body.page .page-hero + .page-content{padding-top:clamp(10px,1.2vw,16px)}
/* a white card that opens on a heading: the card padding is the gap, the
   heading does not add its own on top of it */
.page-content .rits-bar .elementor-widget:first-child :is(h1,h2,h3,h4){margin-top:0}
/* optical correction: the text under the title is left-aligned with a ragged
   right edge, so its visual weight sits left of the column centre and a title
   on the exact centre reads as pushed right. It is nudged left to sit over it. */
.page-hero .container{max-width:820px;transform:translateX(clamp(-20px,-2.2vw,0px))}
.page-hero:has(+ .rits-404) .container{max-width:760px}
/* pages whose content takes the full site width (clients, partners, solutions) */
:is(.has-rits-clients,.has-rits-partners,.has-rits-solutions) .page-hero .container{max-width:var(--maxw)}
.page-hero h1{margin-bottom:10px}
.page-hero .crumbs{color:var(--ink-3);font-size:14px}
.page-hero .crumbs a:hover{color:var(--accent)}
.page-content{padding:clamp(48px,6vw,88px) 0}
.page-content .container{max-width:820px}
.page-content h2{margin-top:1.5em}
.page-content p,.page-content li{color:var(--ink-2)}
.page-content li{margin-bottom:8px}
.shop-content{padding:clamp(40px,5vw,72px) 0}
/* shop page: category overview cards (replaces the flat grid on /boutique/
   itself - category archive pages keep the normal product grid, unchanged) */

.cat-card{
  display:flex;gap:clamp(18px,2vw,26px);align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(20px,2.2vw,28px);transition:background .18s var(--ease),border-color .18s var(--ease);
}
.cat-card:hover{background:var(--paper-2);border-color:var(--line-2)}

@media(max-width:520px){.cat-card{flex-direction:column}}

/* ---------------- Contact Form 7 ----------------
   The form sits in a white bar, same treatment as the product page's spec and
   resource bars. Redeclaring the light tokens locally is what does the work:
   the field rules below already draw their background and borders from
   --white / --line-2, so they flip to the light surface without being
   restated. --accent is rescoped too, because the submit button puts white
   text on it - the dark theme's lighter blue would only reach ~2.6:1 there,
   while the light theme's holds up on white. */
.wpcf7{
  --white:#fff;--paper:#F5F7F9;--paper-2:#EDF0F3;
  
  --line:#E2E6EA;--line-2:#CFD5DB;
  
  background:#fff;color:var(--ink);
  border-radius:clamp(16px,1.8vw,24px);
  padding:clamp(24px,3vw,40px) clamp(22px,2.8vw,40px);
  box-shadow:0 22px 50px -30px rgba(0,0,0,.7);
}
/* Fields take the tinted surface so their edges read against the white bar -
   white-on-white would leave only the hairline border to separate them. */
/* The submit is an <input type="submit">, so it has to be excluded by hand or
   it takes the field surface and loses its accent - white label on near-white. */
.wpcf7 .wpcf7-form input:not([type="submit"]):not([type="button"]):not([type="reset"]),
.wpcf7 .wpcf7-form textarea,
.wpcf7 .wpcf7-form select{background:var(--paper);border-color:var(--line-2)}
.wpcf7 .wpcf7-form input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
.wpcf7 .wpcf7-form textarea:focus,
.wpcf7 .wpcf7-form select:focus{background:#fff}
.wpcf7 .wpcf7-form ::placeholder{color:var(--ink-3);opacity:1}

.wpcf7-form{width:100%}
.wpcf7-form .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);width:100%}
.wpcf7-form .field{grid-column:span 1;display:flex;flex-direction:column;gap:6px;min-width:0}
.wpcf7-form .field-full{grid-column:1/-1}
.wpcf7-form label{font-size:14px;font-weight:500;color:var(--ink)}
.wpcf7-form .wpcf7-form-control-wrap{display:block;width:100%}
.wpcf7-form input,.wpcf7-form textarea,.wpcf7-form select{
  font-family:inherit;font-size:15px;padding:13px 15px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--white);color:var(--ink);box-sizing:border-box;
  width:100%;display:block;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.wpcf7-form input:focus,.wpcf7-form textarea:focus,.wpcf7-form select:focus{
  border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft);
}
.wpcf7-form textarea{min-height:150px;resize:vertical}
@media(max-width:680px){
  body .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
  body .wpcf7-form textarea,body .wpcf7-form select{font-size:16px}
}
.wpcf7-form .wpcf7-submit{
  background:var(--accent);color:#fff;border:1px solid var(--accent);padding:14px 30px;
  border-radius:999px;font-weight:500;font-size:15px;cursor:pointer;width:auto;
}
.wpcf7-form .wpcf7-submit:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.wpcf7-response-output{border-radius:var(--r-sm)}
@media(max-width:640px){.wpcf7-form .row{grid-template-columns:1fr}}

/* ---------------- WooCommerce: loop ---------------- */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px);list-style:none;margin:0;padding:0}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none!important;display:none!important}
.woocommerce ul.products li.product{
  width:100%!important;float:none!important;margin:0!important;padding:16px!important;text-align:left;
  background:var(--paper);border:0;border-radius:var(--r-card);overflow:visible;
  display:flex;flex-direction:column;transition:background .22s var(--ease);
}
.woocommerce ul.products li.product:hover{background:var(--paper-2);transform:none}
.woocommerce ul.products li.product a img,.woocommerce ul.products li.product img{
  border-radius:var(--r-media)!important;margin:0 0 14px!important;width:100%!important;height:210px!important;
  object-fit:contain!important;background:var(--white)!important;padding:20px!important;
  box-sizing:border-box!important;display:block!important;max-width:100%!important;
  transition:transform .45s var(--ease);
}
.woocommerce ul.products li.product:hover img{transform:scale(1.03)}
.woocommerce ul.products li.product h2,.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--f-display);font-size:16.5px;font-weight:500;padding:0 6px;color:var(--ink);margin:0 0 4px;
}
.woocommerce ul.products li.product .price{display:none}

.woocommerce a.button,
.woocommerce button.button{
  background:transparent!important;color:var(--accent)!important;border:0!important;
  border-radius:0!important;padding:8px 6px 0!important;font-weight:500!important;font-size:14px!important;
  margin:auto 0 0!important;display:inline-block;text-align:left;
}
.woocommerce a.button:hover{background:transparent!important;color:var(--accent-hover)!important;text-decoration:underline}
.woocommerce .woocommerce-result-count{color:var(--ink-3);font-size:14px}
.woocommerce .woocommerce-ordering select{
  padding:10px 38px 10px 16px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--white);color:var(--ink);font-family:inherit;font-size:14px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px;
  transition:border-color .18s var(--ease);
}
.woocommerce .woocommerce-ordering select:hover{border-color:var(--ink-3)}
.woocommerce .woocommerce-ordering select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.woocommerce-breadcrumb{color:var(--ink-3);font-size:14px;margin-bottom:18px!important}
.woocommerce-breadcrumb a{color:var(--ink-2)}
.woocommerce-breadcrumb a:hover{color:var(--accent)}
@media(max-width:1080px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}

/* ---------------- WooCommerce: single product ---------------- */
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:900px){.woocommerce div.product{grid-template-columns:1fr}}
.woocommerce div.product .rits-product-stage{flex:none;width:100%}
.woocommerce div.product .summary{float:none!important;width:auto!important;margin:0!important}
.woocommerce div.product .product_title{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:14px}
.woocommerce div.product div.images{border-radius:var(--r-media);overflow:hidden;width:100%!important;float:none!important;margin:0!important}
.rits-product-stage{
  position:relative;background:var(--stage);border-radius:var(--r-card);padding:clamp(18px,2vw,28px);display:flow-root;
}
.rits-product-stage .woocommerce-product-gallery__image{border-radius:var(--r-media);overflow:hidden}
.rits-product-stage img{color:var(--ink-on-stage)}

/* Gallery prev/next click-through arrows (WooCommerce/flexslider ships these unstyled + text-only by default) */
.rits-product-stage .woocommerce-product-gallery__wrapper{position:relative}

@keyframes rits-spin{to{transform:rotate(360deg)}}

.rits-product-sku{font-size:13.5px;color:var(--ink-3);margin:0 0 16px;letter-spacing:.02em}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--ink-2);font-size:16.5px;margin-bottom:26px}

/* WhatsApp CTA - a distinct brand green is the one deliberate departure
   from the accent-only color rule, since WhatsApp's colour is how people
   recognize the button at a glance */
.rits-whatsapp-btn{
  /* sits above the contact form now, so it needs clearance from the card below */
  display:inline-flex;align-items:center;gap:10px;margin:var(--space-4) 0 var(--space-5);padding:13px 26px;
  border-radius:999px;background:#25D366;color:#fff;font-weight:600;font-size:15px;border:1px solid #25D366;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.rits-whatsapp-btn:hover{background:#1EBE5A;border-color:#1EBE5A}
.rits-whatsapp-icon{width:18px;height:18px;display:inline-block;background-color:#fff;flex-shrink:0;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.1.2-.3.3-.4.1-.2 0-.4 0-.5C10 9 9.5 7.8 9.3 7.3c-.2-.5-.4-.4-.5-.4h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 5 4.3.7.3 1.2.5 1.7.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.1-1.4-.1-.1-.3-.2-.6-.4zM12 2a10 10 0 0 0-8.6 15L2 22l5.1-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 20.2 12 8.2 8.2 0 0 1 12 20.2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.1.2-.3.3-.4.1-.2 0-.4 0-.5C10 9 9.5 7.8 9.3 7.3c-.2-.5-.4-.4-.5-.4h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 5 4.3.7.3 1.2.5 1.7.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.1-1.4-.1-.1-.3-.2-.6-.4zM12 2a10 10 0 0 0-8.6 15L2 22l5.1-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 20.2 12 8.2 8.2 0 0 1 12 20.2z'/%3E%3C/svg%3E");
}

.rits-export-specs-pdf{
  display:inline-flex;align-items:center;gap:10px;padding:13px 26px;cursor:pointer;
  background:transparent;border:1px solid var(--line-2);border-radius:999px;
  color:var(--ink);font-weight:500;font-size:15px;font-family:inherit;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease);
}
.rits-export-specs-pdf:hover:not(:disabled){border-color:var(--ink);background:var(--ink);color:var(--white)}
.rits-export-specs-pdf:disabled{opacity:.6;cursor:wait}

.woocommerce div.product .woocommerce-tabs{grid-column:1/-1;margin-top:clamp(32px,4vw,56px)}
.woocommerce div.product .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--line);padding:0;list-style:none;display:flex;gap:6px;margin:0 0 var(--space-5)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{content:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0;background:transparent;border:0;border-radius:0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{content:none!important;border:0!important;box-shadow:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:12px 4px;display:block;color:var(--ink-2);font-weight:500;font-size:15px;border-bottom:2px solid transparent;margin-right:22px}
/* WooCommerce's own plugin CSS gives the active tab a hardcoded white
   background (meant to visually connect it to a white content panel) -
   harmless in a light theme, but invisible white-on-white once our text
   color for the active tab is var(--ink) (white by default now that dark
   is the site's base theme). Base li already sets background:transparent,
   but WooCommerce's .active selector has higher specificity and wins for
   that one state, so it needs its own explicit override here too. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:transparent}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink);border-bottom-color:var(--accent)}
.woocommerce div.product .woocommerce-tabs .panel{padding-top:0;color:var(--ink-2)}
.woocommerce div.product .woocommerce-tabs .panel h2{display:none}

.related.products{grid-column:1/-1;margin-top:clamp(40px,5vw,72px);padding-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.related.products h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:var(--space-5)}

/* ---------------- footer ---------------- */
.site-footer{background:var(--white);border-top:1px solid var(--line);color:var(--ink-2);padding:clamp(52px,5vw,80px) 0 44px}

.footer-bottom{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:24px;margin-top:clamp(38px,4vw,58px);border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-3);
}
/* minimal footer: just the copyright bar, no grid content above it */
.site-footer--minimal{padding:0}
.site-footer--minimal .footer-bottom{margin-top:0;padding:22px 0;border-top:0}

/* Company profile: a quiet, accessible link beside the support details. */
.site-footer--minimal .footer-bottom{align-items:center}
.rits-footer-connect{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.site-footer .rits-footer-linkedin{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink-2);font-size:13px;font-weight:500;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease}
.site-footer .rits-footer-linkedin svg{flex:none;color:#0A66C2}
.site-footer .rits-footer-linkedin:hover{background:#EDF3FF;border-color:#A5BDF0;color:#123876}
.site-footer .rits-footer-linkedin:focus-visible{outline:2px solid #0A66C2;outline-offset:4px}
@media(max-width:600px){.rits-footer-connect{width:100%;justify-content:space-between;gap:12px}}
@media(prefers-reduced-motion:reduce){.site-footer .rits-footer-linkedin{transition:none}}

/* ---------------- Elementor integration ---------------- */
.elementor-widget-heading .elementor-heading-title{color:var(--ink)!important;font-family:var(--f-display)}
.hero-panel .elementor-heading-title,.cta-band .elementor-heading-title{color:#fff!important}
.hero-panel .elementor-widget-text-editor,.cta-band .elementor-widget-text-editor{color:inherit}

/* ---------------- responsive: nav ---------------- */
@media(max-width:1040px){
  .menu-toggle{display:grid}
  .mobile-panel{
    display:none;position:fixed;top:var(--hdr-h);left:0;right:0;bottom:0;background:var(--white);
    flex-direction:column;align-items:stretch;justify-content:flex-start;padding:var(--space-5) var(--gut);
    overflow-y:auto;gap:0;z-index:190;
  }
  .mobile-panel.is-open{display:flex}
  body.mobile-panel-open{overflow:hidden}
  .main-nav{width:100%}
  .main-nav>ul{flex-direction:column;gap:0;width:100%;align-items:stretch}
  .main-nav>ul>li>a{
    padding:16px 0;font-size:17px;width:100%;border-bottom:1px solid var(--line);border-radius:0;color:var(--ink)!important;
  }
  .main-nav>ul>li>a:hover{background:transparent}
  .main-nav .menu-item-has-children{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line)}
  .main-nav .menu-item-has-children>a{flex:1;border-bottom:none}
  .main-nav .menu-item-has-children>a::after{content:none}
  .submenu-caret{
    display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;cursor:pointer;
  }
  .submenu-caret span{width:9px;height:9px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform .2s var(--ease)}
  .menu-item-has-children.submenu-open .submenu-caret span{transform:rotate(-135deg)}
  .main-nav .sub-menu{
    display:none;position:static;width:100%;margin:0 0 10px;background:transparent;border:0;
    grid-template-rows:none;overflow:visible;
  }
  .menu-item-has-children.submenu-open>.sub-menu{display:block;grid-template-rows:none;border-bottom:0}
  .main-nav .sub-menu>.mega-shell{overflow:visible}
  .mega-inner{padding:0 0 8px;max-width:none}
  .mega-cols{display:block}
  .mega-cols>li{margin-bottom:8px}
  .mega-cols>li:not(.mega-card-item)>a{padding:10px 0 8px}
  /* the blurb is noise in a cramped mobile drawer - name and count only */

  .mega-cols .sub-sub-menu a{padding:11px 0 11px 14px;font-size:15px;color:var(--ink-2)}
  .mobile-panel-actions{flex-direction:column;align-items:stretch;margin:var(--space-5) 0 0;gap:var(--space-3);width:100%}
  .mobile-panel-actions .btn{width:100%}
  .lang-switch{justify-content:center}
  body.home{padding-top:0}
}
@media(max-width:700px){
  :root{--hdr-h:68px}
}

/* The homepage hero must butt against the very top of the page: any margin or
   padding on Elementor's first section leaves a strip of page background
   showing through behind the transparent header. */
.home .elementor-section:first-of-type,
.home .elementor-section:first-of-type .elementor-container,
.home .elementor-section:first-of-type .elementor-column,
.home .elementor-section:first-of-type .elementor-widget,
.home .elementor-section:first-of-type .elementor-widget-wrap,
.home .elementor-section:first-of-type .elementor-widget:first-child .elementor-widget-container{
  margin:0;padding:0;
}
.home .hero-split{margin-top:0}

/* Full-bleed without the scrollbar bug: 100vw includes the scrollbar, so a
   100vw hero overhangs the viewport, gets clipped by overflow-x:hidden and
   leaves a visible seam under the fixed header. Widening the Elementor
   container instead lets the hero fill the real content width exactly. */
.home .elementor-section:first-of-type > .elementor-container{max-width:none}
.home .hero-split{width:100%;margin-left:0;margin-right:0}

/* ---------------- Solutions by sector ----------------
   A rounded white card floating on the dark page, same treatment as the
   product Description / Caractéristiques panel - not a full-bleed band. */
.sol-section{
  background:#fff;--white:#fff;--paper:#F5F7F9;--paper-2:#EDF0F3;
  --line:#E2E6EA;--line-2:#CFD5DB;
  color:var(--ink);
  border-radius:clamp(16px,1.8vw,24px);
  padding:clamp(26px,3.2vw,46px) 0;
  box-shadow:0 22px 50px -30px rgba(0,0,0,.7);
}

/* ---------------- platform grid ----------------
   A field of static dots with four nodes on the centre line. One node at a
   time expands from a dot into a filled disc carrying its icon, title and
   description; the rest stay as dots with the title sitting below them. The
   active node cycles on a loop (see retailits_platform_grid in functions.php).
   Mechanic observed on a reference site, rebuilt here in CSS - theirs ships as
   a pre-rendered Lottie file with the labels baked into the artwork, which
   could not carry our own copy. */
/* Sizing is locked to the dot grid the way the reference does it: one node
   column is exactly two dot cells wide, and the disc is a little narrower than
   a column so neighbouring discs can never touch. */
.pgrid{
  --pg-gap:clamp(90px,7.5vw,144px);          /* dot cell */
  --pg-col:calc(var(--pg-gap) * 2);          /* node column */
  --pg-disc:clamp(168px,14vw,268px);
  --pg-dot:rgba(255,255,255,.16);          /* background grid dots stay neutral */
  --pg-accent:#6EE7B7;                     /* node colour, scoped to this section only */
  /* One pair of curves drives the whole rotation, so nothing lands out of
     step with anything else. easeOutQuint in, easeInOutCubic out - the exit
     is deliberately quicker than the entrance so it clears the stage.
     Values from easings.net. */
  --pg-in:cubic-bezier(.22,1,.36,1);
  --pg-out:cubic-bezier(.65,0,.35,1);
  --pg-dur-in:.72s;
  --pg-dur-out:.44s;
  --pg-lag:.07s;                           /* grow waits for the shrink to start */
  padding:clamp(14px,1.6vw,24px) 0 clamp(40px,5vw,72px);
}
:root[data-theme="light"] .pgrid{--pg-dot:rgba(10,13,17,.14)}
.pgrid-head{max-width:640px;margin:0 0 clamp(18px,2.4vw,30px)}
.pgrid-head h2{margin:0;font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.08}
.pgrid-stage{position:relative;display:flex;align-items:center;width:100%;min-height:var(--pg-disc)}
/* the dot field runs the full viewport width (the nodes stay inside the content
   column), so the grid reads as a continuous surface the section sits on */
.pgrid-dots{
  position:absolute;top:-28px;bottom:-28px;left:50%;
  width:100vw;margin-left:-50vw;pointer-events:none;
  background-image:radial-gradient(circle,var(--pg-dot) 3.2px,transparent 3.7px);
  background-size:var(--pg-gap) var(--pg-gap);
  background-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.pgrid-nodes{
  position:relative;z-index:2;list-style:none;margin:0;padding:0;
  display:flex;justify-content:center;width:100%;
}
.pgrid-node{flex:0 0 var(--pg-col);min-width:0;display:flex;justify-content:center}
.pgrid-hit{
  all:unset;position:relative;display:grid;place-items:center;box-sizing:border-box;
  width:100%;min-height:var(--pg-disc);cursor:pointer;
}
.pgrid-hit:focus-visible{outline:2px solid var(--pg-accent);outline-offset:6px;border-radius:var(--r-card)}
.pgrid-disc{
  position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;background:var(--pg-accent);
  transition:width .34s var(--ease),height .34s var(--ease),margin .34s var(--ease);
}
.pgrid-node.is-active .pgrid-disc{
  width:var(--pg-disc);height:var(--pg-disc);
  margin:calc(var(--pg-disc) / -2) 0 0 calc(var(--pg-disc) / -2);
}
.pgrid-body{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  text-align:center;box-sizing:border-box;max-width:calc(var(--pg-disc) - 56px);
  transform:translateY(39px);transition:transform .34s var(--ease);
}
.pgrid-node.is-active .pgrid-body{transform:translateY(0)}
/* .cap-icon is reused only to inherit its mask-image; its Services-card box
   (a 60px accent circle) has to be reset or it shows up behind the glyph */
/* The box snaps instead of animating: open at the start, close only after
   the glyph has faded out, so the change is never on screen. What moves is
   the ::before below - opacity and scale, neither of which reflows. */
.pgrid-ic{
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  width:30px;height:0;background:none;border-radius:0;margin-bottom:0;
  transition:height 0s linear var(--pg-dur-out),margin-bottom 0s linear var(--pg-dur-out);
}
.pgrid-node.is-active .pgrid-ic{
  height:30px;margin-bottom:10px;
  transition:height 0s linear 0s,margin-bottom 0s linear 0s;
}
.pgrid-ic.cap-icon::before{
  width:30px;height:30px;background-color:var(--ink);opacity:0;transform:scale(.55);
  transition:opacity .2s var(--pg-out),transform .3s var(--pg-out);
}
.pgrid-node.is-active .pgrid-ic.cap-icon::before{
  opacity:1;transform:scale(1);
  transition:opacity .34s var(--pg-in) calc(var(--pg-lag) + .1s),
             transform .56s var(--pg-in) calc(var(--pg-lag) + .08s);
}
.pgrid-title{
  font-family:var(--f-display);font-size:clamp(15px,1.15vw,17px);font-weight:500;
  color:var(--ink);white-space:nowrap;transition:color .3s var(--pg-out);
}
.pgrid-node.is-active .pgrid-title{color:var(--ink);white-space:normal}
.pgrid-sub{
  font-size:13px;line-height:1.45;color:rgba(10,13,17,.74);
  max-height:0;opacity:0;overflow:hidden;transform:translateY(7px);
  transition:max-height 0s linear var(--pg-dur-out),
             margin-top 0s linear var(--pg-dur-out),
             opacity .2s var(--pg-out),
             transform .3s var(--pg-out);
}
.pgrid-node.is-active .pgrid-sub{
  max-height:90px;opacity:1;margin-top:8px;transform:none;
  transition:max-height 0s linear 0s,margin-top 0s linear 0s,
             opacity .36s var(--pg-in) calc(var(--pg-lag) + .14s),
             transform .6s var(--pg-in) calc(var(--pg-lag) + .12s);
}
.pgrid-cta{margin-top:clamp(26px,3.4vw,52px);text-align:center}

/* the global reduced-motion rule collapses every transition to .01ms, which
   would make the disc snap between nodes instead of growing. This rotation is
   the point of the section and the motion is a plain size/fade, so it is
   exempted the same way the logo marquee is - just eased off a little. */
@media (prefers-reduced-motion: reduce){
  .pgrid{--pg-dur-in:.3s;--pg-dur-out:.24s;--pg-lag:0s}
  /* The global reduced-motion rule is .01ms !important, so the tokens above
     are not enough on their own - these have to outrank it the same way the
     original block did. Without them the disc snaps between states, which
     reads as a fault rather than as restraint. */
  .pgrid-disc{transition-duration:.3s!important;transition-delay:0s!important}
  .pgrid-node.is-active .pgrid-disc{transition-duration:.3s!important;transition-delay:0s!important}
  .pgrid-body,.pgrid-node.is-active .pgrid-body{transition-duration:.3s!important;transition-delay:0s!important}
  .pgrid-ic.cap-icon::before,.pgrid-sub,.pgrid-title{transition-duration:.2s!important;transition-delay:0s!important}
  /* the ring is decoration, not content - it goes entirely */
  .pgrid-node.is-active .pgrid-disc::after{animation:none}
}

/* below the breakpoint the discs would collide, so the nodes become a plain
   readable list with every description shown and nothing cycling */
@media(max-width:820px){
  .pgrid-stage{min-height:0}
  .pgrid-dots{display:none}
  .pgrid-nodes{flex-direction:column;gap:10px}
  .pgrid-node{display:block;flex:0 0 auto;width:100%}
  .pgrid-hit{
    display:flex;align-items:flex-start;gap:14px;min-height:0;width:100%;
    padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r-card);cursor:default;
  }
  .pgrid-disc{position:static;margin:7px 0 0;width:12px;height:12px;flex:0 0 12px}
  .pgrid-node.is-active .pgrid-disc{width:12px;height:12px;margin:7px 0 0}
  .pgrid-body{transform:none;align-items:flex-start;text-align:left;max-width:none}
  .pgrid-ic{display:none}
  .pgrid-title,.pgrid-node.is-active .pgrid-title{color:var(--ink);white-space:normal}
  .pgrid-sub,.pgrid-node.is-active .pgrid-sub{max-height:none;opacity:1;margin-top:4px;color:var(--ink-2)}
}

/* ---------------- header product search ----------------
   Circular toggle in the header actions opens a full-width bar under the
   header. The query is restricted to products, matched on name only (see the
   posts_search filter in functions.php). */
/* deliberately larger than the theme/language controls next to it so search
   reads as the primary utility rather than one of a row of equal icons */
.hdr-search-toggle{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;padding:0;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.hdr-search-toggle:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.home .site-header:not(.is-solid):not(.is-open) .hdr-search-toggle{border-color:rgba(255,255,255,.45);color:#fff}
.home .site-header:not(.is-solid):not(.is-open) .hdr-search-toggle:hover{background:#fff;color:var(--ink);border-color:#fff}
.hdr-search-toggle-ic{
  width:20px;height:20px;background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
}
.hdr-search{
  position:absolute;left:0;right:0;top:100%;z-index:180;
  background:var(--white);border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(-10px);transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.hdr-search.is-open{opacity:1;transform:translateY(0)}
.hdr-search-form{
  max-width:var(--maxw);margin:0 auto;padding:16px var(--gut);
  display:flex;align-items:center;gap:12px;
}
.hdr-search-ic{
  flex-shrink:0;width:20px;height:20px;background:var(--ink-3);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.hdr-search-input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;
  font-family:var(--f-body);font-size:clamp(16px,1.5vw,20px);color:var(--ink);padding:6px 0;
}
.hdr-search-input::placeholder{color:var(--ink-3)}
.hdr-search-submit{flex-shrink:0}
.hdr-search-close{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);
  background:transparent;cursor:pointer;position:relative;padding:0;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.hdr-search-close:hover{background:var(--paper);border-color:var(--ink-3)}
.hdr-search-close::before,.hdr-search-close::after{
  content:'';position:absolute;top:50%;left:50%;width:13px;height:1.6px;background:var(--ink);
}
.hdr-search-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.hdr-search-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
@media(max-width:700px){
  .hdr-search-form{flex-wrap:wrap;gap:10px}
  .hdr-search-input{flex:1 1 100%;order:-1}
  .hdr-search-submit{flex:1 1 auto}
}

/* ---------------- product tabs: white info panel ----------------
   Description / Caractéristiques sit on a light card that lifts them off the
   dark page. Variables are rescoped locally (same approach as the mega menu)
   so the existing table, tab and button rules inside pick up light-surface
   colours without each one needing an override. */
.woocommerce div.product .woocommerce-tabs{
  --white:#fff;--paper:#F5F7F9;--paper-2:#EDF0F3;
  
  --line:#E2E6EA;--line-2:#CFD5DB;
  background:#fff;color:var(--ink);
  border-radius:clamp(16px,1.8vw,24px);
  padding:clamp(20px,2.6vw,38px) clamp(18px,2.6vw,40px) clamp(24px,3vw,42px);
  box-shadow:0 22px 50px -30px rgba(0,0,0,.7);
}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  border-bottom:1px solid var(--line);margin-bottom:clamp(18px,2.2vw,30px);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--ink-2);font-size:15.5px}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink)}
.woocommerce div.product .woocommerce-tabs .panel{color:var(--ink-2)}
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li{color:var(--ink-2)}
.woocommerce div.product .woocommerce-tabs .panel strong{color:var(--ink)}

/* download action on the light panel: filled accent pill rather than the
   outline style, so it reads as the one action in the card */
.woocommerce div.product .woocommerce-tabs .rits-export-specs-pdf{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;
  box-shadow:0 10px 22px -14px color-mix(in srgb,var(--accent) 90%,transparent);
}

.woocommerce div.product .woocommerce-tabs .rits-export-specs-pdf:hover:not(:disabled){
  background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;transform:translateY(-1px);
}

/* ---------------- gallery fixes ----------------
   WooCommerce pins the zoom trigger top-right, which is exactly where the
   "Voir en 3D" toggle sits - it landed on top of the label. Moved to the
   opposite corner. */
.woocommerce div.product .woocommerce-product-gallery__trigger{
  left:16px;right:auto;top:16px;
}

/* WooCommerce's own rule is more specific and sets li{width:25%}, which once
   these became grid cells meant 25% *of the cell* - hence !important here */

@media(max-width:700px){
  
  /* tap targets: these links rendered 18-23px tall, well under the ~44px
     that a finger reliably hits */
  .woocommerce a.button{padding:12px 8px 11px!important;display:inline-block}
  
  .site-footer a,.woocommerce-breadcrumb a{display:inline-block;padding:8px 0}
  
}

/* ---------------- shop page search bar with keyword pills ---------------- */
.shop-search-bar{
  margin-bottom:clamp(24px,3vw,40px);
}
.shop-search-form{width:100%}
.shop-search-field{
  position:relative;display:flex;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:60px;
  padding:6px 6px 6px 22px;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.shop-search-field:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.shop-search-icon{
  flex-shrink:0;width:22px;height:22px;color:var(--ink-3);
  display:grid;place-items:center;margin-right:12px;
}
.shop-search-icon svg{width:22px;height:22px}
.shop-search-input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;
  font-family:var(--f-body);font-size:clamp(15px,1.3vw,17px);color:var(--ink);
  padding:10px 0;
}
.shop-search-input::placeholder{color:var(--ink-3)}
/* hide webkit search cancel button */
.shop-search-input::-webkit-search-cancel-button{display:none}
.shop-search-btn{
  flex-shrink:0;width:46px;height:46px;border-radius:50%;border:0;
  background:var(--accent);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.shop-search-btn:hover{background:var(--accent-hover);transform:scale(1.06)}
.shop-search-btn svg{width:20px;height:20px}

/* keyword pills */

@media(max-width:600px){
  
  .shop-search-field{padding:4px 4px 4px 16px}
  .shop-search-btn{width:40px;height:40px}
}
/* ---------------- reusable white bar ----------------
   Add the CSS class "rits-bar" to any Elementor section, column or widget
   (Avancé > Classes CSS) and it gets the same white treatment used by the
   product spec bars, the resources list and the contact form: white ground,
   the light colour tokens redeclared locally so everything inside resolves
   against white instead of the site's dark base, and the shared radius and
   shadow. Nothing else needs editing. */
.rits-bar{
  --white:#fff;--paper:#F5F7F9;--paper-2:#EDF0F3;
  
  --line:#E2E6EA;--line-2:#CFD5DB;
  
  background:#fff;color:var(--ink);
  border-radius:clamp(16px,1.8vw,24px);
  padding:clamp(26px,3.2vw,44px) clamp(24px,3vw,44px);
  box-shadow:0 22px 50px -30px rgba(0,0,0,.7);
  /* consecutive Elementor sections sit flush against each other, so two bars
     in a row would meet with no seam - each carries its own half-gap */
  margin:clamp(12px,1.6vw,22px) 0;
}
.rits-bar h1,.rits-bar h2,.rits-bar h3,.rits-bar h4,
.rits-bar .elementor-heading-title{color:var(--ink)!important}
.rits-bar p,.rits-bar li,.rits-bar .elementor-widget-text-editor{color:var(--ink-2)}
.rits-bar a:not(.btn){color:var(--accent)}
/* an Elementor column carries its own padding; the bar supplies it instead */
.rits-bar.elementor-column > .elementor-widget-wrap,
.rits-bar > .elementor-widget-wrap{padding:0!important}
.rits-bar > *:last-child,
.rits-bar .elementor-widget:last-child{margin-bottom:0}
@media(max-width:700px){
  .rits-bar{padding:clamp(20px,5vw,28px) clamp(18px,4.5vw,24px)}
}

/* Visually hidden but still read by search engines and screen readers - used
   for page headings on the pages whose title band is switched off. */
.rits-sr-only{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0;
}
/* those pages start straight on their content, so it needs its own top room */
body.page .page-content{padding-top:clamp(28px,3.4vw,52px)}

/* =========================================================================
   HIGHLIGHT BARS: panels are white on the page grey (see light-site.css).
   ========================================================================= */
:root[data-theme="light"] .rits-bar h1,
:root[data-theme="light"] .rits-bar h2,
:root[data-theme="light"] .rits-bar h3,
:root[data-theme="light"] .rits-bar h4,
:root[data-theme="light"] .rits-bar .elementor-heading-title{color:var(--ink)!important}

/* form fields sit a step lighter than the bar so their edges still read */
:root[data-theme="light"] .wpcf7 .wpcf7-form input:not([type="submit"]):not([type="button"]):not([type="reset"]),
:root[data-theme="light"] .wpcf7 .wpcf7-form textarea,
:root[data-theme="light"] .wpcf7 .wpcf7-form select{background:var(--paper);border-color:var(--line-2);color:var(--ink)}
:root[data-theme="light"] .wpcf7 .wpcf7-form input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
:root[data-theme="light"] .wpcf7 .wpcf7-form textarea:focus,
:root[data-theme="light"] .wpcf7 .wpcf7-form select:focus{background:var(--paper-2)}

/* =========================================================================
   NAVIGATION PANELS  (inc/mega-menu.php)
   Three zones instead of a wall of bordered cards: an intro rail, the links
   as quiet rows, and one visual. Hierarchy comes from type and hairlines,
   not from boxes.
   ========================================================================= */
.main-nav .sub-menu .mega-inner{
  display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr) minmax(220px,272px);
  align-items:stretch;gap:0;
  padding:clamp(26px,2.6vw,38px) var(--gut) clamp(28px,2.8vw,40px);
}
/* the standing line sits in a narrower third column than a feature visual */
.main-nav .sub-menu .mega-inner:has(.mega-aside){
  grid-template-columns:minmax(250px,340px) minmax(0,1fr) minmax(150px,200px);
}
.mega-rail{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-right:clamp(24px,2.6vw,40px);border-right:1px solid var(--line)}
.mega-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7C93BC}
.mega-lede{margin:0;font-family:var(--f-display);font-size:clamp(1.3rem,1.5vw,1.6rem);line-height:1.22;letter-spacing:-.025em;color:var(--ink)}
/* the exit is the panel's one solid call to action: a cobalt pill with the
   arrow riding in a white disc, same shape language as the header CTA */
.mega-exit{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:12px;
  padding:7px 7px 7px 22px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:14.5px;font-weight:600;line-height:1;
  box-shadow:0 12px 24px -14px color-mix(in srgb,var(--accent) 85%,transparent);
  transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.mega-exit-ar{
  width:30px;height:30px;border-radius:50%;background:#fff;position:relative;flex:none;
  transition:background .18s var(--ease),transform .22s var(--ease);
}
.mega-exit-ar::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/13px no-repeat;
}
.mega-exit:hover{background:var(--accent-hover);color:#fff;transform:translateY(-1px);box-shadow:0 16px 28px -14px color-mix(in srgb,var(--accent) 95%,transparent)}
.mega-exit:hover .mega-exit-ar{transform:translateX(3px)}

/* the standing line in the third column (inc/mega-menu.php) */
.mega-aside{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;justify-content:flex-end;
  padding-left:clamp(24px,2.6vw,40px);
}
.mega-aside-rule{width:34px;height:2px;border-radius:2px;background:var(--accent);flex:none}
.mega-aside-text{
  margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-3);max-width:17ch;text-wrap:balance;
}

.main-nav .sub-menu .mega-cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px clamp(8px,1vw,16px);
  align-content:start;padding:0 clamp(16px,2vw,32px);
}
.main-nav .sub-menu .mega-cols>li{display:block}
.mega-link{
  display:grid;grid-template-columns:44px minmax(0,1fr) 14px;gap:14px;align-items:center;
  padding:12px 14px;border-radius:14px;transition:background .18s var(--ease);
}
.mega-link:hover,.mega-link:focus-visible{background:rgba(232,240,254,.78)}
.mega-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mega-ic{
  width:44px;height:44px;display:grid;place-items:center;border-radius:12px;
  border:1px solid transparent;color:var(--accent);background:#EEF4FE;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.mega-ic svg{width:22px;height:22px}
.mega-link:hover .mega-ic{background:#E0EBFD;border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.mega-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.mega-name{font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;transition:color .18s var(--ease)}
.mega-link:hover .mega-name{color:var(--accent)}
/* the row's trailing chevron - decorative, so it is drawn rather than marked up */
.mega-link::after{
  content:"";width:14px;height:14px;background:#A9B8D2;align-self:center;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/11px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/11px no-repeat;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.mega-link:hover::after{background:var(--accent);transform:translateX(3px)}
.mega-desc{
  font-size:13px;line-height:1.45;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mega-item.is-current .mega-name{color:var(--accent)}

.mega-feature{
  display:flex;flex-direction:column;gap:8px;padding-left:clamp(24px,2.6vw,36px);border-left:1px solid var(--line);
}
.mega-feature-media{
  display:grid;place-items:center;aspect-ratio:4/3;margin-bottom:8px;overflow:hidden;
  background:var(--paper);border-radius:12px;
}
.mega-feature.is-product .mega-feature-media{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.mega-feature-media img{width:76%;height:76%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mega-feature-media.is-photo img{width:100%;height:100%;object-fit:cover}
.mega-feature:hover .mega-feature-media img{transform:scale(1.03)}
.mega-feature-kicker{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.mega-feature-title{font-family:var(--f-display);font-size:1.08rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.mega-feature-more{font-size:13.5px;font-weight:600;color:var(--accent)}
.mega-feature:hover .mega-feature-title{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* entrance: rows settle in just after the panel opens */
@keyframes mega-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.main-nav .submenu-open .mega-rail,
.main-nav .submenu-open .mega-item,
.main-nav .submenu-open .mega-aside,
.main-nav .submenu-open .mega-feature{animation:mega-in .38s var(--ease) both}
.main-nav .submenu-open .mega-aside{animation-delay:.14s}
.main-nav .submenu-open .mega-item:nth-child(1){animation-delay:.04s}
.main-nav .submenu-open .mega-item:nth-child(2){animation-delay:.07s}
.main-nav .submenu-open .mega-item:nth-child(3){animation-delay:.1s}
.main-nav .submenu-open .mega-item:nth-child(4){animation-delay:.13s}
.main-nav .submenu-open .mega-item:nth-child(5){animation-delay:.16s}
.main-nav .submenu-open .mega-item:nth-child(n+6){animation-delay:.19s}
.main-nav .submenu-open .mega-feature{animation-delay:.14s}

/* -------------------------------------------------------------------------
   THE PANEL AS A FLOATING CARD  (desktop only)
   The .sub-menu box keeps its job - it spans the viewport, starts at the
   header's bottom edge so the pointer never crosses a dead gap on its way
   down, and it is the element the open/close animation sizes - so it goes
   transparent and .mega-inner paints the card inside it.
   The card is painted on ::before rather than on .mega-inner itself because
   .sub-menu clips to its own box: the inner's bottom padding is the room the
   drop shadow falls into, and the shadow would be cut off without it.
   ------------------------------------------------------------------------- */
@media(min-width:1041px){
  .main-nav .sub-menu{background:transparent;border-bottom-width:0;border-radius:0}

  .main-nav .sub-menu .mega-inner{
    --mm-gap:10px;                       /* header edge to card */
    --mm-inset:clamp(20px,2.6vw,48px);   /* card edge, aligned on .header-inner */
    --mm-room:40px;                      /* the space the shadow falls into */
    --mm-pad-y:clamp(24px,2.2vw,34px);
    --mm-pad-x:clamp(22px,2.2vw,40px);
    position:relative;max-width:none;
    padding:calc(var(--mm-gap) + var(--mm-pad-y))
            calc(var(--mm-inset) + var(--mm-pad-x))
            calc(var(--mm-room) + var(--mm-pad-y));
  }
  .main-nav .sub-menu .mega-inner::before,
  .main-nav .sub-menu .mega-inner::after{
    content:'';position:absolute;inset:var(--mm-gap) var(--mm-inset) var(--mm-room);
    border-radius:26px;pointer-events:none;z-index:0;
  }
  /* the sheet: white at the top-left, settling into pale blue at the foot,
     with a cobalt bloom low-left and a periwinkle one off the top-right */
  .main-nav .sub-menu .mega-inner::before{
    background:
      radial-gradient(62% 128% at 93% -12%, rgba(126,157,232,.26) 0%, rgba(126,157,232,0) 68%),
      radial-gradient(54% 132% at 4% 116%, color-mix(in srgb,var(--accent) 15%,transparent) 0%, color-mix(in srgb,var(--accent) 0%,transparent) 70%),
      radial-gradient(38% 86% at 72% 112%, rgba(146,174,240,.16) 0%, rgba(146,174,240,0) 70%),
      linear-gradient(168deg,#FFFFFF 0%,#FDFEFF 42%,#F3F7FD 76%,#E9F0FB 100%);
    box-shadow:0 20px 40px -26px rgba(16,32,74,.5),0 0 0 1px rgba(210,222,242,.9);
  }
  /* the curved shapes: wide arcs struck from off the corners, drawn as rings
     so they read as the edge of a soft form rather than as a blur */
  .main-nav .sub-menu .mega-inner::after{
    background:
      radial-gradient(86% 150% at 112% -18%, rgba(168,194,244,0) 54%, rgba(168,194,244,.5) 57.5%, rgba(168,194,244,0) 61%),
      radial-gradient(70% 124% at 122% 2%, rgba(192,212,250,0) 62%, rgba(192,212,250,.42) 65.5%, rgba(192,212,250,0) 69%),
      radial-gradient(64% 150% at -14% 112%, rgba(178,200,246,0) 60%, rgba(178,200,246,.34) 63.5%, rgba(178,200,246,0) 67%);
  }
  .mega-rail,.main-nav .sub-menu .mega-cols,.mega-aside,.mega-feature{position:relative;z-index:1}
}

@media(max-width:1240px) and (min-width:1041px){
  .main-nav .sub-menu .mega-inner{grid-template-columns:minmax(180px,210px) minmax(0,1fr) minmax(200px,230px)}
  .main-nav .sub-menu .mega-inner:has(.mega-aside){grid-template-columns:minmax(180px,230px) minmax(0,1fr) minmax(140px,180px)}
  .mega-desc{-webkit-line-clamp:1}
}
@media(max-width:1040px){
  .main-nav .sub-menu .mega-inner{display:block;padding:0 0 8px}
  .mega-rail,.mega-feature,.mega-aside{display:none}
  .main-nav .sub-menu .mega-cols{display:block;padding:0}
  .main-nav .sub-menu .mega-cols>li{margin:0}
  .mega-link{grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;padding:10px 4px;border-radius:10px}
  .mega-link::after{display:none}
  .mega-ic{width:34px;height:34px;border-radius:9px}
  .mega-ic svg{width:19px;height:19px}
  .mega-desc{display:none}
  .main-nav .submenu-open .mega-item{animation:none}
}

/* =========================================================================
   LANGUAGE SELECTOR - text labels
   Polylang's FR / EN links (rits_language_switcher() in inc/i18n.php), as a
   two-position control that sits with the round header buttons.
   ========================================================================= */
.lang-switch .lang-switch-in{
  display:inline-flex;align-items:center;height:38px;padding:3px;gap:2px;
  border:1px solid var(--line-2);border-radius:999px;
}
.lang-switch a.lang-link{
  display:grid;place-items:center;min-width:34px;height:30px;padding:0 9px;border-radius:999px;
  font-family:var(--f-body);font-size:12px;font-weight:600!important;letter-spacing:.08em;line-height:1;
  color:var(--ink-3);text-decoration:none;
  transition:color .2s var(--ease),background .25s var(--ease);
}
.lang-switch a.lang-link:hover{color:var(--ink)}
.lang-switch a.lang-link.is-current{background:var(--ink);color:var(--white);cursor:default}
.lang-switch a.lang-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.home .site-header:not(.is-solid):not(.is-open) .lang-switch .lang-switch-in{border-color:rgba(255,255,255,.45)}
.home .site-header:not(.is-solid):not(.is-open) .lang-switch a.lang-link{color:rgba(255,255,255,.72)}
.home .site-header:not(.is-solid):not(.is-open) .lang-switch a.lang-link:hover{color:#fff}
.home .site-header:not(.is-solid):not(.is-open) .lang-switch a.lang-link.is-current{background:#fff;color:var(--ink)}
@media(max-width:1040px){
  .lang-switch .lang-switch-in{height:44px;padding:4px}
  .lang-switch a.lang-link{height:34px;min-width:52px}
}

/* =========================================================================
   CONTACT PAGE - side drawings  (inc/contact-art.php)
   ========================================================================= */
body.has-contact-art .page-content{position:relative;overflow-x:clip}
body.has-contact-art .page-content > .container{position:relative;z-index:1}
/* the intro above the form (heading, line, e-mail, WhatsApp) sits centred on
   the form column rather than hanging off its left edge */
body.has-contact-art .page-content .elementor-widget:not(.elementor-widget-shortcode){text-align:center}
body.has-contact-art .page-content .rits-whatsapp-btn{margin-inline:auto}
.rca{display:none}
@media(min-width:1180px){
  .rca{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
  .rca::before{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1.3px);background-size:26px 26px;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 16%,transparent 32%,transparent 68%,rgba(0,0,0,.55) 84%,#000 100%);
    mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 16%,transparent 32%,transparent 68%,rgba(0,0,0,.55) 84%,#000 100%);
    opacity:.55;
  }
  .rca-side{
    position:absolute;top:clamp(240px,28%,400px);
    width:min(340px,calc((100vw - 760px) / 2 - 60px));height:auto;overflow:visible;
  }
  .rca-left{left:calc((100vw - 720px) / 4);transform:translateX(-50%)}
  .rca-right{right:calc((100vw - 720px) / 4);transform:translateX(50%)}

  /* the palette of the drawings: ice-blue bodies (gradients in the SVG),
     blue-grey outlines, lighter detail lines, one cobalt accent */
  .rca-o{stroke:#93A6C3;stroke-width:1.6}
  .rca-d{stroke:#B3C2D8;stroke-width:1.4}
  .rca-a{stroke:#7FA2E4;stroke-width:1.5}
  .rca-tile{stroke:#C3CFE0}
  .rca-bar{stroke:#C7D3E4;stroke-width:6}
  .rca-bar-soft{stroke:#DCE4EF}
  .rca-mark{stroke:#A3B3CA;stroke-width:1.6}
  .rca-ground{stroke:#C9D4E3;stroke-width:1.4}
  .rca-dash{stroke:#6F97E6;stroke-width:1.6;stroke-dasharray:5 6;opacity:.8}
  .rca-leaf{fill:#DCE6F6;opacity:.75}
  .rca-stem{stroke:#D3DDEE;stroke-width:2}
  .rca-dots-soft{opacity:.55}
  .rca-scan{stroke:#5B8DEF;stroke-width:2;opacity:0}
  .rca-parallax{transition:transform .2s linear}

  /* settle in, once */
  .rca.is-ready .rca-in{opacity:0;transform:translateY(18px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.7,.2,1)}
  .rca.is-ready .rca-right .rca-in{transition-delay:.25s}
  .rca.is-ready .rca-beam{opacity:0;transition:opacity 1s ease 1.1s,transform .2s linear}
  .rca.is-drawn .rca-in{opacity:1;transform:none}
  .rca.is-drawn .rca-beam{opacity:1}

  /* after that, quiet loops: the scan line, the receipt feeding out, the scanner hovering */
  .rca-paper,.rca-scan,.rca-float{transform-box:fill-box;transform-origin:center}
  .rca.is-drawn .rca-scan{animation:rca-scan 3.6s ease-in-out 1.8s infinite}
  .rca.is-drawn .rca-paper{animation:rca-feed 7s cubic-bezier(.5,0,.2,1) 1.8s infinite}
  .rca.is-drawn .rca-float{animation:rca-float 6s ease-in-out 1.4s infinite}
}
@keyframes rca-scan{
  0%,100%{opacity:0;transform:translateY(-26px)}
  20%{opacity:.8}
  50%{opacity:.8;transform:translateY(26px)}
  70%{opacity:0;transform:translateY(26px)}
}
@keyframes rca-feed{
  0%{transform:translateY(16px)}
  35%,100%{transform:translateY(0)}
}
@keyframes rca-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* Mobile drawer: the panel is not a white sheet there, so the submenu takes
   the page's own colours instead of the desktop panel's light set. */
@media(max-width:1040px){
  .main-nav .sub-menu{
    --white:inherit;--paper:inherit;--paper-2:inherit;--ink:inherit;--ink-2:inherit;--ink-3:inherit;
    --line:inherit;--line-2:inherit;--accent:inherit;--accent-hover:inherit;
  }
  .mega-ic{background:transparent}
}

/* Header controls share one height, matched to the 41px menu pills:
   language switch, theme toggle, search and the CTA were 38/38/46/42px. */
@media(min-width:1041px){
  :root{--hdr-ctl:40px}
  .mobile-panel-actions{gap:8px}
  .lang-switch .lang-switch-in{height:var(--hdr-ctl);padding:3px;box-sizing:border-box}
  .lang-switch a.lang-link{height:calc(var(--hdr-ctl) - 8px);min-width:34px}
  .hdr-search-toggle{width:var(--hdr-ctl);height:var(--hdr-ctl)}
  .hdr-search-toggle-ic{width:17px;height:17px}
  .mobile-panel-actions .btn{height:var(--hdr-ctl);padding:0 20px;font-size:14px;box-sizing:border-box}
}
/* Light theme: the header CTA is a white pill, which vanished on the white
   header. It inverts to ink there (the transparent home hero keeps white). */
:root[data-theme="light"] .site-header .mobile-panel-actions .btn-outline{background:var(--ink);border-color:var(--ink);color:#fff}
:root[data-theme="light"] .site-header .mobile-panel-actions .btn-outline:hover{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="light"] .home .site-header:not(.is-solid):not(.is-open) .mobile-panel-actions .btn-outline{background:#fff;border-color:#fff;color:var(--ink)}

/* Light theme: .btn-primary is a white pill, invisible on light sections.
   It inverts to ink, except inside the dark highlight bars where white stays. */
:root[data-theme="light"] .btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
:root[data-theme="light"] .btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="light"] :is(.cta-band,.sol-section,.rits-bar,.hero-panel) .btn-primary{background:#fff;border-color:#fff;color:var(--ink)}
:root[data-theme="light"] :is(.cta-band,.sol-section,.rits-bar,.hero-panel) .btn-primary:hover{background:#E4E4E4;border-color:#E4E4E4;color:var(--ink)}

/* =========================================================================
   "UNE SEULE ÉQUIPE" ROTATION - white, and smooth
   The disc grows with transform:scale instead of animating width/height (a
   layout change every frame, which read as jumpy). It is laid out at full
   size and scaled down to a dot when inactive.
   ========================================================================= */
@media(min-width:821px){
  .pgrid{--pg-accent:#FFFFFF}
  .pgrid-disc,
  .pgrid-node.is-active .pgrid-disc{
    width:var(--pg-disc);height:var(--pg-disc);
    margin:calc(var(--pg-disc) / -2) 0 0 calc(var(--pg-disc) / -2);
  }
  .pgrid-disc{
    transform:scale(calc(22 / 268));
    transition:transform var(--pg-dur-out) var(--pg-out),
               background-color .24s var(--pg-out);
    will-change:transform;
  }
  /* The grow waits out the first 70ms of the shrink. Without that lag the
     two discs are the same size at the same moment and the movement has no
     direction; with it, the eye follows one thing handing off to the next. */
  .pgrid-node.is-active .pgrid-disc{
    transform:scale(1);
    transition:transform var(--pg-dur-in) var(--pg-in) var(--pg-lag),
               background-color .24s var(--pg-out);
  }
  .pgrid-body{transition:transform var(--pg-dur-out) var(--pg-out)}
  .pgrid-node.is-active .pgrid-body{
    transition:transform var(--pg-dur-in) var(--pg-in) var(--pg-lag);
  }

  /* One hairline ring, thrown off the disc as it lands and gone in a second.
     Pure transform + opacity on a pseudo-element, so it is free. */
  .pgrid-disc::after{
    content:'';position:absolute;inset:0;border-radius:50%;
    border:1.5px solid var(--pg-accent);opacity:0;pointer-events:none;
  }
  .pgrid-node.is-active .pgrid-disc::after{
    animation:pgrid-ring 1.1s var(--pg-in) var(--pg-lag);
  }
  @keyframes pgrid-ring{
    0%  {opacity:.45;transform:scale(1)}
    100%{opacity:0;transform:scale(1.2)}
  }
  /* the disc colour on hover has to follow the theme: in light mode the
     node's title, subtitle and icon are white ON the disc, so a white
     disc made the whole node disappear. */
  :root[data-theme="light"] .pgrid-hit:hover .pgrid-disc{background:#0B3FB5}
  /* light theme: a white disc would vanish on the light page, so it inverts */
  :root[data-theme="light"] .pgrid{--pg-accent:var(--ink)}
  :root[data-theme="light"] .pgrid-node.is-active .pgrid-title{color:#fff}
  :root[data-theme="light"] .pgrid-node.is-active .pgrid-sub{color:rgba(255,255,255,.78)}
  :root[data-theme="light"] .pgrid-node.is-active .pgrid-ic.cap-icon::before{background-color:#fff}
}
@media(max-width:820px){
  .pgrid{--pg-accent:#FFFFFF}
  :root[data-theme="light"] .pgrid{--pg-accent:var(--ink)}
}

/* Panel with nothing in the third column (menu item class mega-feature-none,
   and no standing line either): drop the empty column. A catalogue panel
   carries .mega-aside there instead, so it keeps all three. */
@media(min-width:1041px){
  .main-nav .sub-menu .mega-inner:not(:has(.mega-feature)):not(:has(.mega-aside)){
    grid-template-columns:minmax(200px,250px) minmax(0,1fr);
  }
}

/* =========================================================================
   "UNE SEULE ÉQUIPE. DE BOUT EN BOUT." - the counter scene
   Driver: retailits_platform_grid() in functions.php

   Two columns. Left: the four capabilities as a vertical stepper with a
   progress line running down it. Right: a point-of-sale counter drawn in
   line art, where each capability lights a different layer of the SAME
   machine - the hardware, then the cabling that ties it together, then a
   diagnostic pass over it, then the link out to the service desk.

   The machine stays faintly visible throughout and the lit layer is drawn
   in the cobalt accent, so the rotation reads as a tour of one system
   rather than four unrelated pictures.

   Everything above this block that styled the old design is still valid CSS
   and simply outranked by source order. Delete this block and the previous
   version returns.
   ========================================================================= */
@media(min-width:821px){
  .pgrid{
    --pg-rail:rgba(255,255,255,.16);
    --pg-ink:var(--ink);
  }
  :root[data-theme="light"] .pgrid{--pg-rail:rgba(10,13,17,.14)}

  /* the dot field is now behind a whole drawing, so it recedes */
  .pgrid-dots{opacity:.32}

  .pgrid-stage{
    display:grid;
    grid-template-columns:minmax(232px,308px) minmax(0,1fr);
    gap:clamp(26px,3.6vw,64px);
    align-items:center;
    min-height:clamp(400px,34vw,500px);
  }

  /* ---- the stepper ---------------------------------------------------- */
  /* Geometry is measured by the driver rather than guessed: the rail has to
     start at the first dot's centre and stop at the last one's, and that
     depends on how many capabilities there are and how tall each row runs. */

  .pgrid-nodes{
    flex-direction:column;align-items:stretch;justify-content:center;
    position:relative;z-index:2;width:100%;
  }
  .pgrid-node{flex:0 0 auto;width:100%;display:block}
  .pgrid-hit{
    display:grid;grid-template-columns:24px minmax(0,1fr);gap:15px;
    align-items:start;min-height:0;width:100%;
    padding:clamp(11px,1.1vw,16px) 0;text-align:left;
  }

  /* the step marker */
  .pgrid-disc,
  .pgrid-node.is-active .pgrid-disc{
    position:static;width:12px;height:12px;margin:6px 0 0;
    justify-self:center;
  }
  .pgrid-disc{
    border-radius:50%;background:var(--white);
    box-shadow:inset 0 0 0 2px var(--pg-rail);
    transform:scale(1);will-change:transform;
    transition:transform .4s var(--pg-out),box-shadow .4s var(--pg-out),
               background-color .4s var(--pg-out);
  }
  .pgrid-node.is-active .pgrid-disc{
    background:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);
    transform:scale(1.55);
    transition:transform .6s var(--pg-in) .1s,box-shadow .36s var(--pg-in) .1s,
               background-color .36s var(--pg-in) .1s;
  }
  .pgrid-disc::after{
    content:'';position:absolute;inset:-5px;border-radius:50%;
    border:1.5px solid var(--accent);opacity:0;pointer-events:none;
  }
  .pgrid-node.is-active .pgrid-disc::after{animation:pgrid-ring 1.15s var(--pg-in) .18s}

  /* ---- the labels ----------------------------------------------------- */
  /* Text sits on the page, not on a filled disc, so every colour tuned for
     "white on an accent circle" inverts back to the page's own ink. */
  .pgrid-body,
  .pgrid-node.is-active .pgrid-body{
    transform:none;max-width:100%;margin:0;align-items:flex-start;text-align:left;
  }
  .pgrid-ic{display:none}
  .pgrid-title{
    color:var(--ink-3);white-space:normal;font-size:clamp(15px,1.2vw,17.5px);
    transition:color .4s var(--pg-out);
  }
  .pgrid-node.is-active .pgrid-title,
  :root[data-theme="light"] .pgrid-node.is-active .pgrid-title{
    color:var(--ink);transition:color .42s var(--pg-in) .1s;
  }
  .pgrid-sub,
  .pgrid-node.is-active .pgrid-sub,
  :root[data-theme="light"] .pgrid-node.is-active .pgrid-sub{color:var(--ink-2)}
  .pgrid-hit:hover .pgrid-title{color:var(--ink)}
  :root[data-theme="light"] .pgrid-hit:hover .pgrid-disc{
    background:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);
  }

  /* ---- the scene ------------------------------------------------------ */
  .pgrid-scene{position:relative;z-index:2;width:100%}
  .pgrid-scene svg{display:block;width:100%;height:auto;overflow:visible}

  /* the palette of the drawing: ice-blue bodies (gradients in the SVG),
     blue-grey outlines, lighter detail lines, cobalt for what is "live" */
  .pgs-o{stroke:#93A6C3;stroke-width:1.6;transition:stroke .6s var(--pg-in)}
  .pgs-d{stroke:#B3C2D8;stroke-width:1.4}
  .pgs-a{stroke:#7FA2E4;stroke-width:1.5}
  .pgs-room{opacity:.75}
  .pgs-shelf{fill:#E6EDF8;stroke:#C9D5E6;stroke-width:1.2}
  .pgs-leaf{fill:#D6E2F6}
  .pgs-stem{stroke:#C4D3EA;stroke-width:2}
  .pgs-bar{stroke:#AFC0D8;stroke-width:5}
  .pgs-led{fill:#5B8DEF}
  .pgs-icon{stroke:#3F74E0;stroke-width:1.8}
  .pgs-tick{stroke:#1F5BD8;stroke-width:1.8}
  text.pgs-247{font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:-.02em;fill:#1F5BD8}
  .pgs-online{fill:#34C27A;stroke:#fff;stroke-width:2}
  .pgs-cable{stroke:#5B8DEF;stroke-width:2;stroke-dasharray:10 8}
  .pgs-signal-bg{stroke:#B9D0F8;stroke-width:2;stroke-dasharray:4 6}
  .pgs-signal{stroke:#3F74E0;stroke-width:2.6;stroke-dasharray:22 300;stroke-dashoffset:22}
  .pgs-sweep{stroke:#5B8DEF;stroke-width:2;opacity:0}

  /* ---- which step is lit ---------------------------------------------- */
  /* The counter is always there. Step 0 outlines its hardware in blue; the
     other three bring their own overlay onto it. */
  .pgrid-stage[data-cap="0"] .pgs-dev .pgs-o{stroke:#5B8DEF}

  .pgs-layer{opacity:0;transition:opacity .55s var(--pg-in)}
  .pgrid-stage[data-cap="1"] .pgs-inst,
  .pgrid-stage[data-cap="2"] .pgs-maint,
  .pgrid-stage[data-cap="3"] .pgs-sup{opacity:1}

  /* maintenance takes over the till's own screen */
  .pgs-ui-sale,.pgs-ui-diag{transition:opacity .45s var(--pg-in)}
  .pgs-ui-diag{opacity:0}
  .pgrid-stage[data-cap="2"] .pgs-ui-sale{opacity:0}
  .pgrid-stage[data-cap="2"] .pgs-ui-diag{opacity:1}

  /* ---- the motion inside each step ------------------------------------ */
  /* Each loop runs only while its own step is lit, and restarts every time
     the step comes round, so there is one thing moving at a time. */
  .pgs-paper,.pgs-card,.pgs-prog,.pgs-gear,.pgs-bubble,.pgs-online{transform-box:fill-box}

  /* 0 hardware: the receipt prints, a card goes in, the status light breathes */
  .pgrid-stage[data-cap="0"] .pgs-paper{animation:pgs-feed 5s cubic-bezier(.5,0,.2,1) .3s infinite}
  .pgrid-stage[data-cap="0"] .pgs-card{animation:pgs-insert 5s cubic-bezier(.5,0,.2,1) .8s infinite}
  .pgrid-stage[data-cap="0"] .pgs-printer .pgs-led{animation:pgs-blink 2.4s ease-in-out infinite}
  .pgrid-stage[data-cap="0"] .pgs-tap{animation:pgs-blink 2.4s ease-in-out .6s infinite}

  /* 1 installation: current runs down the cables, the box lights up */
  .pgrid-stage[data-cap="1"] .pgs-cable{animation:pgs-flow 1.2s linear infinite}
  .pgrid-stage[data-cap="1"] .pgs-inst .pgs-led{animation:pgs-blink 1.6s ease-in-out infinite}

  /* 2 maintenance: the bar fills, the checks tick one by one, the gear turns */
  .pgs-prog{transform-origin:left center;transform:scaleX(0)}
  .pgrid-stage[data-cap="2"] .pgs-prog{animation:pgs-fill 2.2s cubic-bezier(.4,0,.2,1) .3s forwards}
  .pgs-row{opacity:0}
  .pgrid-stage[data-cap="2"] .pgs-row{animation:pgs-pop .45s var(--pg-in) forwards;animation-delay:calc(.8s + var(--i) * .5s)}
  .pgs-gear{transform-origin:center}
  .pgrid-stage[data-cap="2"] .pgs-gear{animation:pgs-spin 6s linear infinite}
  .pgrid-stage[data-cap="2"] .pgs-sweep{animation:pgs-sweep 2.6s cubic-bezier(.5,0,.5,1) .3s infinite}

  /* 3 support: the call goes out, the agent is online, the reply comes back */
  .pgrid-stage[data-cap="3"] .pgs-signal{animation:pgs-send 2.4s cubic-bezier(.5,0,.5,1) .2s infinite}
  .pgs-online{transform-origin:center}
  .pgrid-stage[data-cap="3"] .pgs-online{animation:pgs-pulse 1.8s ease-in-out infinite}
  .pgs-bubble{transform-origin:12px 30px;opacity:0}
  .pgrid-stage[data-cap="3"] .pgs-bubble{animation:pgs-reply 3.2s var(--pg-in) 1s infinite}
}

@keyframes pgs-feed{0%{transform:translateY(24px)}40%,100%{transform:translateY(0)}}
@keyframes pgs-insert{0%,10%{transform:translateY(-14px);opacity:0}28%{opacity:1}55%,100%{transform:translateY(12px);opacity:1}}
@keyframes pgs-blink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes pgs-flow{to{stroke-dashoffset:-18}}
@keyframes pgs-fill{to{transform:scaleX(1)}}
@keyframes pgs-pop{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes pgs-spin{to{transform:rotate(360deg)}}
@keyframes pgs-sweep{
  0%{opacity:0;transform:translateX(0)}
  12%{opacity:.8}
  78%{opacity:.8;transform:translateX(166px)}
  90%,100%{opacity:0;transform:translateX(166px)}
}
@keyframes pgs-send{
  0%{stroke-dashoffset:22;opacity:0}
  10%{opacity:1}
  85%{opacity:1}
  100%{stroke-dashoffset:-150;opacity:0}
}
@keyframes pgs-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes pgs-reply{
  0%{opacity:0;transform:scale(.6)}
  14%{opacity:1;transform:scale(1)}
  80%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}

/* Below the breakpoint the section is a plain readable list: no scene, no
   rail, every description shown, nothing cycling. */
@media(max-width:820px){
  .pgrid-scene{display:none}
}

/* The scene is illustration, not content. Under reduced motion the layers
   still swap - that is the information - but nothing inside them loops. */
@media(min-width:821px) and (prefers-reduced-motion:reduce){
  
  .pgrid-disc,.pgrid-node.is-active .pgrid-disc{
    transition-duration:.3s!important;transition-delay:0s!important;
  }
  .pgrid-node.is-active .pgrid-disc::after{animation:none}
  .pgrid-scene *{animation:none!important}
  .pgs-prog{transform:none}
  .pgs-row,.pgs-bubble{opacity:1}
  .pgs-sweep{opacity:0}
}