/* =========================================================================
   LIGHT MODE - EVERY PAGE BUT THE HOME HERO      assets/css/light-site.css
   Companion to light-home.css, which handles the homepage photo hero.

   Colour and gradient only. No layout, type, spacing or markup changes:
   every declaration is a colour, a gradient, a mask that shapes a gradient,
   an opacity, a filter or a box-shadow. All of it is scoped to
   :root[data-theme="light"], so the dark site is untouched.

   The four ideas carried over from the references:
     1  a luminance ladder, not one white - page grey, panel white, wash, ink
     2  blow-out instead of edges - bands dissolve, they don't stop at a line
     3  hairlines carry structure - not fills, not shadows
     4  one shadow on the page, on the thing that actually floats
   ========================================================================= */

body{
  --ls-bloom-a:color-mix(in srgb,var(--accent) 28%,transparent);   /* cobalt, pale   */
  --ls-bloom-b:rgba(126,136,214,0.336); /* periwinkle     */
  --ls-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- header */
/* the page hero below starts at pure white, so the header's hairline is the
   only thing drawing a line across that seam. It stays - the header is
   opaque and content scrolls under it - but at a weight that reads as a
   join rather than a border. */
/* Light mode reverses the lighting. White cannot be lifted by a white
   tint, so the bar carries no top wash at all; it gets a pale cobalt bloom,
   a faint settle toward the bottom, and a white top edge that reads as the
   sheet catching the light. The flat border is gone - style.css draws a
   fading rule instead - so this now only supplies the values. */
body:not(.home) .site-header{border-bottom-color:transparent}

/* ------------------------------------------------- the ladder, every page */
/* Light mode ran white-ground / grey-panels, which is the ladder upside
   down: the page was the brightest thing on it and every panel read as a
   grey box. Inverted here to the reference arrangement - page grey, panel
   white - which also matches the homepage, whose hero already blows out to
   white on a grey ground.

   The top of the page is the blow-out: pure white under the header for
   180px, dissolving into the page grey by 560px, with the bloom in it. It
   is painted on the body, so EVERY template gets the same opening - the
   generic .page-hero, the catalogue, a product, contact, actualités,
   références - without touching any of their own markup or layout. */
:root[data-theme="light"] body:not(.home){
  background-color:#E9ECF4;
  background-image:
    radial-gradient(75% 600px at 6% 0%, var(--ls-bloom-a) 0%, color-mix(in srgb,var(--accent) 0%,transparent) 72%),
    radial-gradient(65% 540px at 96% 0%, var(--ls-bloom-b) 0%, rgba(126,136,214,0) 70%),
    linear-gradient(180deg,#fff 0px,#fff 180px,rgba(255,255,255,.72) 340px,rgba(255,255,255,0) 560px);
  background-repeat:no-repeat;
  background-position:center top;
  background-attachment:scroll;
}
/* the flat grey band at the top of generic pages is no longer needed - the
   body gradient is the band now, and it has no edge to close */
:root[data-theme="light"] .page-hero{background:transparent;border-bottom-color:transparent}
:root[data-theme="light"] .page-hero .crumbs{color:var(--ink-3)}
/* the same, for the templates that bring their own opening block */
:root[data-theme="light"] :is(.rn-head,.rc-head){background:transparent}
/* grain over the blow-out, and only over it: light gradients band visibly */
/* The grain belongs to the document, not to the viewport. It used to be
   position:fixed with a hard bottom edge at 620px: the background beneath it
   scrolls, the grain did not, so its cut-off line stayed put on screen and
   read as a shade band sliding over the page. Anchored to #content it scrolls
   with everything else, and it fades out rather than ending on an edge. */
:root[data-theme="light"] body:not(.home) #content{position:relative;z-index:0}
:root[data-theme="light"] body:not(.home) #content::before{
  content:'';position:absolute;left:0;right:0;top:0;height:620px;z-index:-1;pointer-events:none;
  background-image:var(--ls-grain);background-size:180px 180px;
  opacity:.6;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.45) 72%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.45) 72%,transparent 100%);
}

/* The curved shapes. The blow-out gives the top of the page its light; these
   give it its form - two wide arcs struck from off the right edge, drawn as
   rings so they read as the edge of a soft shape rather than as a blur. Same
   motif as the navigation panel and the category rail, at page scale, so the
   three surfaces belong to one system. Anchored to #content, behind it, so
   they scroll with the page and never sit over anything. */
:root[data-theme="light"] body:not(.home) #content::after{
  content:'';position:absolute;left:0;right:0;top:0;height:760px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 70% at 108% -6%, rgba(168,194,244,0) 56%, rgba(168,194,244,.38) 59%, rgba(168,194,244,0) 62.5%),
    radial-gradient(48% 58% at 118% 10%, rgba(192,212,250,0) 62%, rgba(192,212,250,.32) 65%, rgba(192,212,250,0) 68.5%),
    radial-gradient(52% 64% at -14% 30%, rgba(178,200,246,0) 60%, rgba(178,200,246,.26) 63%, rgba(178,200,246,0) 66.5%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
}

/* ------------------------------------------------------------- catalogue */
/* the product tile was a filled box with a border. The white plinth behind
   the photograph is kept - it is the "panel white" step of the ladder and it
   is what the product shot needs. The tile is white on the grey ground now
   rather than grey on white, and a hairline carries the structure. */
:root[data-theme="light"] .rits-cat-card{background:#fff;border-color:var(--line)}
:root[data-theme="light"] .rits-cat-card:hover{border-color:var(--line-2)}
:root[data-theme="light"] .rits-cat-name{color:var(--ink)}
:root[data-theme="light"] .rits-cat-count{color:#454A78}
/* cobalt stays, but only as a small mark */
:root[data-theme="light"] .rits-cat-cta{color:var(--accent)}

/* ------------------------------------------------------------ references */
/* the client bar floated on a shadow as well as a hairline; the hairline is
   enough, and the page keeps its single shadow for the quote modal. */
:root[data-theme="light"] .rc-bar{box-shadow:0 0 0 1px var(--line)}

/* ---------------------------------------------------------- product page */
:root[data-theme="light"] .rits-pd-section{border-color:var(--line)}
:root[data-theme="light"] .rits-pd-kicker{color:var(--ink-3)}
:root[data-theme="light"] .rits-pd-btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
:root[data-theme="light"] .rits-pd-btn-ghost:hover{background:rgba(10,13,17,.05);border-color:var(--ink)}

/* ------------------------------------------------------------- one shadow */
/* Flat surfaces stop floating. The exceptions keep theirs because they
   genuinely overlap the page: the quote modal, the mega-menu panel, the
   product frame controls and the sticky product bar. */
:root[data-theme="light"] :is(.rits-cat-card,.rits-cat-card:hover,.rc-panel,.rits-pd-section,.pgrid-hit,.mega-card,.mega-card:hover){box-shadow:none}

/* ------------------------------------------------------------------ footer */
:root[data-theme="light"] .site-footer{background:var(--paper);border-top-color:var(--line)}

/* =========================================================================
   THE DARK ISLANDS
   Several components are authored light-first - white panel, ink text - and
   then explicitly INVERTED in light mode (style.css:1464, clients.css:44,
   catalog.css:290, product-detail.css:396, quote-modal.css:39,
   style.css:530). On a dark site that inversion made sense: a white card
   would have glared. On a light site it produces black slabs - the contact
   form, the client bar, the CTA band, the family rail, the spec strip.

   Reverting the inversion is all that is needed: the components' own rules
   already read from these tokens, so restoring the light values restores
   the light component. Nothing below changes a layout or a text string.
   ========================================================================= */

/* one light token set, applied everywhere the inversion applied */
:root[data-theme="light"] :is(.rits-bar,.reference-card,.wpcf7,.sol-section,.rc-bar,.rits-cat-fams,.rq-dialog){
  --white:#FFFFFF;--paper:#F5F7F9;--paper-2:#EDF0F3;
  --ink:var(--k-ink);--ink-2:var(--k-ink-2);--ink-3:var(--k-ink-3);
  --line:#E2E6EA;--line-2:#CFD5DB;
  --accent:var(--k-accent);--accent-hover:var(--k-accent-hover);--accent-soft:var(--k-accent-soft);
}

/* panels: white on the page grey, hairline instead of a drop shadow */
:root[data-theme="light"] :is(.rits-bar,.reference-card,.wpcf7,.sol-section){
  background:#fff;color:var(--ink);
  box-shadow:0 0 0 1px var(--line);
}
/* the one exception: the quote modal genuinely floats, so it keeps a shadow */
:root[data-theme="light"] .rq-dialog{
  --rq-aside:#F5F7F9;
  background:#fff;color:var(--ink);
  box-shadow:0 40px 90px -40px rgba(16,24,40,.45);
}
:root[data-theme="light"] .rq-backdrop{background:rgba(10,13,17,.28)}

/* the client bar */
:root[data-theme="light"] .rc-bar{
  background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line);
  /* on white the marks go back to their own colours, greyed only slightly */
  --logo-filter:grayscale(1) contrast(1.05);--logo-opacity:.6;--logo-hover-filter:none;
}
:root[data-theme="light"] .rc-strip{background:#fff}

/* the catalogue family rail: a light band with the blow-out, not a black bar */
:root[data-theme="light"] .rits-cat-fams{
  background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);
  border-top-color:var(--line);border-bottom-color:var(--line);
}

/* The product spec strip (Aperçu) and the resources bar stay BLACK in light
   mode - product-detail.css inverts them into dark islands on purpose, and
   they are the anchor the rest of the product page is read against. This
   sheet used to override them to white, which collided with that inversion
   and produced a grey-to-black gradient with white text on the pale half.
   Nothing here touches them now. */

/* buttons that were white pills because they sat on black */
:root[data-theme="light"] :is(.cta-band,.sol-section,.rits-bar) :is(.btn-primary,.btn-white){
  background:var(--ink);border-color:var(--ink);color:#fff;
}
:root[data-theme="light"] :is(.cta-band,.sol-section,.rits-bar) :is(.btn-primary,.btn-white):hover{
  background:#2A2F36;border-color:#2A2F36;color:#fff;
}
:root[data-theme="light"] :is(.cta-band,.sol-section,.rits-bar) :is(.btn-wghost,.btn-outline-light){
  background:transparent;border-color:rgba(10,13,17,.28);color:var(--ink);
}
:root[data-theme="light"] :is(.cta-band,.sol-section,.rits-bar) :is(.btn-wghost,.btn-outline-light):hover{
  background:rgba(10,13,17,.05);border-color:var(--ink);color:var(--ink);
}

/* =========================================================================
   CTA band (footer.php) - a floating card rather than a full-bleed band:
   pale ice-blue wash, two soft curves rising from the lower corners, the
   copy with its three reassurances on the left, the two pills on the right.
   ========================================================================= */
:root[data-theme="light"] .cta-band{
  position:relative;isolation:isolate;overflow:hidden;
  width:auto;max-width:calc(var(--maxw) + 2 * var(--gut));
  margin:clamp(40px,5vw,72px) auto clamp(20px,2.4vw,32px);
  margin-inline:max(clamp(12px,1.4vw,24px),calc((100% - var(--maxw) - 2 * var(--gut)) / 2));
  border-radius:clamp(18px,1.8vw,24px);
  background:
    radial-gradient(70% 90% at 50% 0%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(100deg,#EDF2FC 0%,#F6F8FD 42%,#F4F7FD 70%,#EAF0FB 100%);
  box-shadow:0 0 0 1px rgba(205,217,238,.7),0 24px 50px -34px rgba(38,72,140,.28);
  color:var(--ink);
}
/* lower-left: a pale disc just breaking the corner */
:root[data-theme="light"] .cta-band::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:clamp(260px,26vw,420px);aspect-ratio:1;left:calc(clamp(260px,26vw,420px) * -.5);bottom:calc(clamp(260px,26vw,420px) * -.7);
  border-radius:50%;
  background:radial-gradient(circle at 60% 35%,#DCE6FA 0%,#E6EDFB 55%,rgba(230,237,251,0) 72%);
}
/* lower-right: two nested arcs sweeping up out of the corner */
:root[data-theme="light"] .cta-band::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:clamp(300px,30vw,480px);aspect-ratio:1;right:calc(clamp(300px,30vw,480px) * -.38);bottom:calc(clamp(300px,30vw,480px) * -.58);
  border-radius:50%;
  background:radial-gradient(circle,rgba(218,230,250,.7) 0%,rgba(218,230,250,.42) 46%,rgba(218,230,250,0) 47%);
  box-shadow:0 0 0 clamp(26px,3vw,46px) rgba(228,236,251,.38),0 0 0 calc(clamp(26px,3vw,46px) + 1px) rgba(200,215,240,.4);
}
:root[data-theme="light"] .cta-band .cta-in{
  max-width:none;margin:0;
  padding:clamp(34px,4vw,54px) clamp(24px,6.6vw,86px) clamp(26px,3.2vw,40px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(28px,4vw,64px);
}
:root[data-theme="light"] .cta-band h2{
  color:#0E1116;font-weight:600;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(1.9rem,2.9vw,2.6rem);max-width:21ch;margin:0;
}
:root[data-theme="light"] .cta-band p{
  color:#5A6475;font-size:clamp(15px,1.15vw,16.5px);line-height:1.6;max-width:52ch;margin:12px 0 0;
}
.cta-points{list-style:none;margin:clamp(22px,2.4vw,30px) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:12px}
.cta-points li{display:flex;align-items:center;gap:14px;font-size:14px;color:#262D3A;white-space:nowrap}
.cta-points li + li{margin-left:clamp(18px,2vw,26px);padding-left:clamp(18px,2vw,26px);border-left:1px solid #D3DCEA}
.cta-point-icon{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:#DCE6F9;color:#2F55A4;box-shadow:0 0 0 1px rgba(255,255,255,.7);
}
.cta-point-icon svg{width:20px;height:20px}

:root[data-theme="light"] .cta-band .cta-actions{gap:12px;flex-wrap:nowrap}
:root[data-theme="light"] .cta-band .cta-actions .btn{
  min-height:52px;padding:0 26px;border-radius:999px;font-size:15px;font-weight:500;
  display:inline-flex;align-items:center;gap:12px;
}
:root[data-theme="light"] .cta-band .btn-white{background:#0E1116;border-color:#0E1116;color:#fff}
:root[data-theme="light"] .cta-band .btn-white:hover{background:#262B33;border-color:#262B33}
:root[data-theme="light"] .cta-band .btn-wghost{background:rgba(255,255,255,.55);border-color:#C5CFDF;color:#0E1116;padding:0 30px}
:root[data-theme="light"] .cta-band .btn-wghost:hover{background:#fff;border-color:#0E1116}
.cta-arrow{width:18px;height:18px;transition:transform .2s var(--ease)}
.cta-band .btn-white:hover .cta-arrow{transform:translateX(3px)}
/* the handwritten aside over the buttons, its arrow curling down onto the quote pill */
:root[data-theme="light"] .cta-band .cta-actions{position:relative}
:root[data-theme="light"] .cta-band .cta-note{
  position:absolute;bottom:calc(100% + 2px);left:56px;margin:0;pointer-events:none;
  display:flex;align-items:flex-start;gap:6px;color:#5E82D8;
  font-family:"Caveat","Segoe Print","Bradley Hand",cursive;font-weight:500;
  font-size:clamp(21px,1.7vw,25px);line-height:1.05;max-width:none;transform:rotate(-3deg);transform-origin:left bottom;
}
.cta-note-arrow{flex:none;width:44px;height:auto;margin-top:12px}
.cta-note-text{display:flex;flex-direction:column;white-space:nowrap}
.cta-note-l2{padding-left:.4em}
@media(max-width:1180px){:root[data-theme="light"] .cta-band .cta-note{display:none}}

@media(max-width:1180px){
  :root[data-theme="light"] .cta-band .cta-in{grid-template-columns:1fr}
  :root[data-theme="light"] .cta-band .cta-actions{flex-wrap:wrap}
}
@media(max-width:640px){
  .cta-points{flex-direction:column;align-items:flex-start}
  .cta-points li + li{margin-left:0;padding-left:0;border-left:0}
  :root[data-theme="light"] .cta-band .cta-actions{flex-direction:column;width:100%}
  :root[data-theme="light"] .cta-band .cta-actions .btn{width:100%;justify-content:center}
}

/* =========================================================================
   WhatsApp button - white on #25D366 is 1.98:1, the one piece of text on the
   site that fails badly in either theme. Light mode drops it to WhatsApp's
   own darker brand green, which carries white at ~4.1:1. Remove this block
   if the brighter green has to be kept exactly.
   ========================================================================= */
:root[data-theme="light"] .rits-whatsapp-btn{background:#0F7A6C;border-color:#0F7A6C}
:root[data-theme="light"] .rits-whatsapp-btn:hover{background:#0B6154;border-color:#0B6154}

/* =========================================================================
   BARS AND FRAMES
   A bar filled with flat white on a grey page is the thing the references
   never do: an edge, a fill, and nothing else. Each bar below gets the same
   four moves as the hero, at bar scale -

     a wash      a pale diagonal, white at one end, page grey at the other
     a bloom     desaturated cobalt/periwinkle, wide and blurred
     blow-out    the band dissolves into the page instead of ending on a line
     grain       over the wash, because light gradients band

   The product frames get it too: the plinth becomes a luminance zone for the
   photograph - brightest where the product sits, dissolving at the edges -
   instead of a white box with a border.
   ========================================================================= */

/* ---- the sticky category rail --------------------------------------- */
/* was: flat --white between two hairlines */
:root[data-theme="light"] .rits-cat-fams{
  position:sticky;   /* unchanged - restated only so the layers below anchor */
  background:
    radial-gradient(62% 190% at 8% 125%, color-mix(in srgb,var(--accent) 50.4%,transparent) 0%, color-mix(in srgb,var(--accent) 0%,transparent) 70%),
    radial-gradient(48% 160% at 88% -45%, rgba(126,136,214,0.616) 0%, rgba(126,136,214,0) 72%),
    linear-gradient(170deg,#fff 0%,#fff 38%,rgba(245,247,249,.9) 78%,var(--paper) 100%);
  border-top-color:transparent;
  /* no bottom line: the band fades out instead of stopping */
  border-bottom-color:transparent;
  box-shadow:0 1px 0 0 rgba(10,13,17,.08);
}
:root[data-theme="light"] .rits-cat-fams::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--ls-grain);background-size:180px 180px;
  opacity:.3;mix-blend-mode:multiply;
}
:root[data-theme="light"] .rits-cat-fam{position:relative;z-index:1}

/* From a band to a card. The rail is the same object as the navigation panel
   - a white sheet of choices floating over the page - so it is given the same
   treatment: one radius, a hairline ring, a single soft shadow and the arc
   motif. No margin of its own: it already sits in the page container, so its
   edges line up with the breadcrumb and the product grid, which is the point.
   Plain band below 1041px, where the page has no room for the gutter. */
@media(min-width:1041px){
  :root[data-theme="light"] .rits-cat-fams{
    border-radius:22px;overflow:hidden;
    top:calc(var(--hdr-h) + 10px);
    box-shadow:0 0 0 1px rgba(210,222,242,.9),0 18px 36px -28px rgba(16,32,74,.45);
    /* the sheet, at the same weight as the navigation panel - the band's own
       wash is built for a full-bleed strip and reads far too saturated once
       it is cropped into a card this size */
    background:
      radial-gradient(52% 150% at 4% 120%, color-mix(in srgb,var(--accent) 13%,transparent) 0%, color-mix(in srgb,var(--accent) 0%,transparent) 70%),
      radial-gradient(44% 130% at 94% -20%, rgba(126,157,232,.2) 0%, rgba(126,157,232,0) 70%),
      linear-gradient(168deg,#FFFFFF 0%,#FDFEFF 46%,#F4F7FD 80%,#EDF2FB 100%);
  }
  :root[data-theme="light"] .rits-cat-fams::before{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(84% 190% at 110% -30%, rgba(168,194,244,0) 55%, rgba(168,194,244,.42) 58.5%, rgba(168,194,244,0) 62%),
      radial-gradient(66% 170% at -12% 130%, rgba(178,200,246,0) 60%, rgba(178,200,246,.3) 63.5%, rgba(178,200,246,0) 67%);
  }
}

/* ---- the mega-menu panel -------------------------------------------- */
/* It hangs off the header, so it blows out to white at the top - header and
   panel are one surface - and steps down to the page grey at its foot.
   Every stop in the base layer is OPAQUE. It used to finish on
   rgba(245,247,249,.85), so alpha fell from 1 to .85 across the lower half of
   the panel and the hero headline behind it ghosted straight through the
   category list. The blooms above it still read, because a translucent layer
   over an opaque one tints it - it does not make it see-through. */
/* Desktop is no longer painted here. The panel is a floating card now
   (style.css, "THE PANEL AS A FLOATING CARD"): .sub-menu is the transparent
   hover/animation box and .mega-inner::before carries the sheet, in both
   themes. Below 1041px the panel is still a plain surface inside the mobile
   drawer, so the wash stays there. */
@media(max-width:1040px){
  :root[data-theme="light"] .main-nav .sub-menu{
    background:
      radial-gradient(40% 90% at 88% 0%, rgba(126,136,214,0.392) 0%, rgba(126,136,214,0) 70%),
      radial-gradient(48% 110% at 6% 110%, color-mix(in srgb,var(--accent) 28%,transparent) 0%, color-mix(in srgb,var(--accent) 0%,transparent) 72%),
      linear-gradient(180deg,#fff 0%,#fff 54%,#F4F6FA 84%,var(--paper-2) 100%);
  }
}

/* ---- the resources bar: see the note above - it stays a dark island --- */

/* ---- the sort control: a small pale pill, not a bordered white box --- */
:root[data-theme="light"] .woocommerce .woocommerce-ordering select{
  background:rgba(214,218,244,.95);border-color:transparent;color:var(--ink);
}
:root[data-theme="light"] .woocommerce .woocommerce-ordering select:hover{
  background:rgba(196,203,240,1);border-color:transparent;
}

/* ---- the product frames --------------------------------------------- */
/* the plinth stops being a white box: it becomes a luminance zone, pure
   white where the product sits and dissolving to the page ground at the
   corners, so the photograph has somewhere bright to sit and the frame has
   no edge to see. */
:root[data-theme="light"] .rits-cat-shot{
  /* pure white, deliberately flat: product shots carry their own white
     background, so ANY tint on the plinth turns that shot into a visible
     white rectangle floating on a shade. The plinth is the "panel white"
     step of the ladder - the tint belongs below the join, not here. */
  background:#fff;
  position:relative;
}
/* the card around it: a wash rather than a fill, hairline still carrying the
   structure, and a pale cobalt bloom that only appears on hover */
:root[data-theme="light"] .rits-cat-card{
  background:linear-gradient(180deg,#fff 0%,#fff 72%,rgba(245,247,249,.55) 100%);
  border-color:var(--line);
}
:root[data-theme="light"] .rits-cat-card:hover{
  background:
    radial-gradient(70% 120% at 50% 120%, color-mix(in srgb,var(--accent) 25.3%,transparent) 0%, color-mix(in srgb,var(--accent) 0%,transparent) 72%),
    linear-gradient(180deg,#fff 0%,#fff 55%,rgba(245,247,249,.9) 100%);
  border-color:var(--line-2);
}
/* the count badge reads as one of the small pale pills, not a grey number */
:root[data-theme="light"] .rits-cat-count{
  background:rgba(205,211,241,1);color:#454A78;
}

/* the deeper page ground costs the breadcrumb a little contrast (4.02:1 on
   --ink-3); it moves one step darker to clear 4.5 */
:root[data-theme="light"] :is(.crumbs,.woocommerce-breadcrumb),
:root[data-theme="light"] :is(.crumbs,.woocommerce-breadcrumb) a{color:var(--ink-2)}

/* =========================================================================
   THE PRODUCT TILE AS ONE OBJECT
   The plinth and the name block were two separate rounded boxes with page
   ground showing through a 14px gap - two white slabs rather than one
   product tile. They are joined here into a single surface:

     the gap closes, the radii meet (plinth rounds the top only, the body
     rounds the bottom only), one hairline runs around the whole thing, and
     the wash CONTINUES across the join - the plinth ends on the periwinkle
     floor and the body picks that same tint up and clears to white.

   The join itself is a hairline, which is what separates the photograph
   from the label - structure carried by a rule, not by a gap.

   This is the one place where the light-mode work touches geometry
   (margin-bottom and border-radius); the dark theme keeps the two boxes
   unless you want this there too.
   ========================================================================= */
:root[data-theme="light"] .rits-cat-shot{
  margin-bottom:0;
  border-radius:var(--r-card) var(--r-card) 0 0;
  border:1px solid var(--line);
  border-bottom:0;
}
:root[data-theme="light"] .rits-cat-card{
  border-radius:0 0 var(--r-card) var(--r-card);
  border-top-color:var(--line-2);   /* the join: the one hairline inside the tile */
  /* the wash continues out of the plinth instead of restarting at white */
  background:linear-gradient(180deg,
    rgba(214,219,245,.34) 0%,
    rgba(255,255,255,.96) 38%,
    #fff 62%,
    rgba(245,247,249,.6) 100%);
}
/* hover reads on the whole tile, not on one half of it */
:root[data-theme="light"] li.product:hover .rits-cat-shot,
:root[data-theme="light"] li.product:hover .rits-cat-card{border-color:var(--line-2)}
:root[data-theme="light"] li.product:hover .rits-cat-card{
  background:
    radial-gradient(75% 130% at 50% 125%, color-mix(in srgb,var(--accent) 16%,transparent) 0%, color-mix(in srgb,var(--accent) 0%,transparent) 72%),
    linear-gradient(180deg,
      rgba(206,212,240,.46) 0%,
      rgba(255,255,255,.96) 40%,
      #fff 64%,
      rgba(245,247,249,.6) 100%);
}
:root[data-theme="light"] li.product:hover .rits-cat-shot{
  border-color:var(--line-2);border-bottom:0;
}

/* the frame controls: glass pills on the plinth rather than white circles */
:root[data-theme="light"] .rits-cat-nav{
  background:rgba(255,255,255,.9);
  border-color:rgba(10,13,17,.10);
  box-shadow:0 2px 10px -6px rgba(16,24,40,.45);
}
:root[data-theme="light"] .rits-cat-nav:hover{
  background:#fff;border-color:var(--accent);
}
:root[data-theme="light"] .rits-cat-nav:hover::before{background:var(--accent)}

/* the frame counter: a small pale pill, sitting on the plinth's own floor */
:root[data-theme="light"] .rits-cat-count{
  background:rgba(214,219,245,.92);
  color:#3B4278;
  box-shadow:0 0 0 1px rgba(69,74,120,.10);
}

/* ---------------- Nos solutions pour votre point de vente ----------------
   In the dark theme the card floats on black and carries a drop shadow. In
   light it sits on the page grey, so it becomes a rung on the ladder instead:
   a hairline holds the edge, the bloom is pushed up to survive against a grey
   ground, and the shadow is given up - the quote dialog is the one surface on
   the site allowed to cast one. */
:root[data-theme="light"] .rg{
  box-shadow:0 0 0 1px rgba(10,13,17,.08);
}
:root[data-theme="light"] .rg::before{
  background:
    radial-gradient(54% 60% at 4% 2%,  color-mix(in srgb,var(--accent) 44%,transparent) 0%,  color-mix(in srgb,var(--accent) 16%,transparent) 40%, color-mix(in srgb,var(--accent) 0%,transparent) 74%),
    radial-gradient(48% 54% at 98% 0%, rgba(126,136,214,.50) 0%, rgba(126,136,214,0) 72%),
    radial-gradient(44% 46% at 50% 0%, rgba(232,233,247,.80) 0%, rgba(232,233,247,0) 78%);
}
:root[data-theme="light"] .rg::after{opacity:.62}

/* the plinth carries a little more colour at its corners against the grey */
:root[data-theme="light"] .rg-shot{
  background:
    radial-gradient(66% 60% at 50% 48%, #fff 0%, #fff 44%, rgba(255,255,255,.7) 68%, rgba(255,255,255,0) 100%),
    linear-gradient(150deg,
      rgba(198,206,242,.95) 0%,
      rgba(234,238,250,.96) 42%,
      rgba(246,247,251,1) 62%,
      rgba(212,218,245,.92) 100%);
}

/* the family pills read as pale lavender rather than white-on-white */
:root[data-theme="light"] .rg-tab-ic{
  background:linear-gradient(180deg,#fff 0%,rgba(232,235,249,.95) 100%);
  box-shadow:0 0 0 1px rgba(69,74,120,.14);
}
:root[data-theme="light"] .rg-tab:hover .rg-tab-ic{
  background:linear-gradient(180deg,#fff 0%,rgba(214,224,252,.98) 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent);
}
:root[data-theme="light"] .rg-tab.is-active .rg-tab-ic{
  background:linear-gradient(158deg,#2F6BEA 0%,var(--accent) 52%,#0A46C6 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent),0 12px 22px -12px color-mix(in srgb,var(--accent) 95%,transparent);
}
:root[data-theme="light"] .rg-chip{
  background:linear-gradient(180deg,#fff 0%,rgba(236,239,250,.95) 100%);
  box-shadow:0 0 0 1px rgba(69,74,120,.14);
}
:root[data-theme="light"] .rg-chip:hover{
  background:#fff;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 48%,transparent),0 8px 18px -12px color-mix(in srgb,var(--accent) 90%,transparent);
}

/* =========================================================================
   2026-09-21 UPDATE
   ========================================================================= */

/* ---- homepage photo: the slideshow (inc/hero-slides.php) ---------------- */
/* Extra photos sit exactly where the first one does - right-anchored, full
   height - under the same fades, and crossfade in turn. Before the script
   starts only the first photo shows. */
.hero-photo.is-slideshow .hero-slide{
  position:absolute;top:0;right:0;z-index:0;
  height:100%!important;width:auto!important;min-width:66%;max-width:none!important;
  object-fit:cover;opacity:0;
}
.hero-photo.is-slideshow img{transition:opacity 1.4s ease}
.hero-photo.is-running img{opacity:0}
.hero-photo.is-running img.is-active{opacity:1}
@media(max-width:700px){
  .hero-photo.is-slideshow .hero-slide{width:100%!important;min-width:0}
}
@media(prefers-reduced-motion:reduce){.hero-photo.is-slideshow img{transition:none}}

/* ---- mobile header: the menu button on the right ------------------------ */
@media(max-width:1040px){
  .menu-toggle{margin-left:auto}
}

/* ---- product family bar: one tile per family ---------------------------- */
/* Each family is a white rounded tile carrying its icon, the name under it;
   the current family's tile turns solid blue with a white icon. */
:root[data-theme="light"] .rits-cat-fam{
  max-width:none;width:clamp(92px,8.4vw,122px);
  padding:14px 4px 12px;gap:10px;color:#3A4250;
}
:root[data-theme="light"] .rits-cat-fam::after{content:none}
:root[data-theme="light"] .rits-cat-fam .rits-cat-fam-ic{
  width:clamp(60px,5.2vw,78px);height:clamp(52px,4.4vw,64px);border-radius:16px;
  background:#fff;color:#2563EB;
  box-shadow:0 0 0 1px rgba(214,224,240,.95),0 10px 20px -14px rgba(30,60,130,.45);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
:root[data-theme="light"] .rits-cat-fam .rits-cat-fam-ic svg{width:26px;height:26px}
:root[data-theme="light"] .rits-cat-fam .rits-cat-fam-name{font-size:13px;font-weight:500;color:#3A4250;min-height:2.6em;justify-content:center}
:root[data-theme="light"] .rits-cat-fam:hover .rits-cat-fam-ic{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(170,196,240,.95),0 14px 24px -14px rgba(30,60,130,.55);
}
:root[data-theme="light"] .rits-cat-fam:hover .rits-cat-fam-name{color:#0E1116}
:root[data-theme="light"] .rits-cat-fam.is-active .rits-cat-fam-ic{
  background:linear-gradient(155deg,#3D86FF 0%,#1E63EC 55%,#1553D6 100%);color:#fff;
  box-shadow:0 14px 26px -12px rgba(29,95,230,.75),inset 0 1px 0 rgba(255,255,255,.28);
}
:root[data-theme="light"] .rits-cat-fam.is-active .rits-cat-fam-name{color:#0E1116;font-weight:600}
@media(max-width:680px){
  :root[data-theme="light"] .rits-cat-fam{width:84px;padding:12px 2px 10px}
  :root[data-theme="light"] .rits-cat-fam .rits-cat-fam-ic{width:54px;height:48px;border-radius:14px}
  :root[data-theme="light"] .rits-cat-fam .rits-cat-fam-ic svg{width:22px;height:22px}
  :root[data-theme="light"] .rits-cat-fam .rits-cat-fam-name{font-size:12px}
}

/* ---- product cards: one white block -------------------------------------- */
/* The whole card is a single white surface: the photo on a pale panel inset
   at the top, then the name and the link. The photos are shot on white, so
   they are multiplied onto the panel - their white takes the panel's tint
   instead of showing as a rectangle. */
:root[data-theme="light"] .woocommerce ul.products li.product,
:root[data-theme="light"] .woocommerce ul.products li.product:hover{
  background:#fff!important;border-radius:20px!important;overflow:hidden!important;
  padding:12px 12px 22px!important;
}
:root[data-theme="light"] .woocommerce ul.products li.product{
  box-shadow:0 0 0 1px rgba(214,224,240,.9),0 16px 34px -26px rgba(30,60,130,.35);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
:root[data-theme="light"] .woocommerce ul.products li.product:hover{
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(180,202,240,.95),0 22px 40px -26px rgba(30,60,130,.45);
}
:root[data-theme="light"] .woocommerce ul.products li.product .rits-cat-shot,
:root[data-theme="light"] .woocommerce ul.products li.product:hover .rits-cat-shot{
  margin:0 0 16px!important;border:0!important;border-radius:14px!important;
  background:#fff!important;box-shadow:inset 0 0 0 1px rgba(10,13,17,.07)!important;
}
:root[data-theme="light"] .woocommerce ul.products li.product .rits-cat-card,
:root[data-theme="light"] .woocommerce ul.products li.product:hover .rits-cat-card{
  background:none!important;border:0!important;border-radius:0!important;
  padding:2px 10px 0!important;box-shadow:none!important;transform:none!important;
}
:root[data-theme="light"] .woocommerce ul.products li.product h2.rits-cat-name{
  font-size:clamp(1.2rem,1.5vw,1.45rem);font-weight:600;letter-spacing:-.02em;margin:0 0 14px;
}
:root[data-theme="light"] .woocommerce ul.products li.product .rits-cat-name a{color:#0E1116}
:root[data-theme="light"] .woocommerce ul.products li.product .rits-cat-cta{gap:12px;font-weight:600;color:#1F5BD8}
:root[data-theme="light"] .woocommerce ul.products li.product .rits-cat-arrow{width:28px;height:28px;background:#1F5BD8}
:root[data-theme="light"] .woocommerce ul.products li.product .rits-cat-arrow::before{-webkit-mask-size:12px 12px;mask-size:12px 12px}

/* ---- phones: the homepage photo gets its own place ---------------------- */
/* Behind the copy it had to be washed almost to white to keep the text
   readable, so on a phone it simply disappeared. Here it comes out from
   under the text and sits below the buttons as a rounded photo card, at full
   strength, framed on the checkout stand. The slideshow runs in it too. */
@media(max-width:700px){
  :root[data-theme="light"] .lh-on .hero-split{flex-direction:column}
  :root[data-theme="light"] .lh-on .hero-panel{padding-bottom:26px}
  :root[data-theme="light"] .lh-on .hero-split .hero-photo{
    position:relative;inset:auto;order:2;z-index:2;
    height:clamp(220px,62vw,300px);margin:0 20px 34px;
    border-radius:18px;overflow:hidden;
    box-shadow:0 0 0 1px rgba(214,224,240,.8),0 18px 34px -22px rgba(30,60,130,.45);
  }
  :root[data-theme="light"] .lh-on .hero-split .hero-photo::after,
  :root[data-theme="light"] .lh-on .hero-split .hero-photo::before{content:none}
  :root[data-theme="light"] .lh-on .hero-split .hero-photo img{
    width:100%!important;height:100%!important;min-width:0;object-fit:cover;object-position:74% 45%;
  }
}

/* ---- the menu button: a compact ☰ that closes into a true ✕ -------------- */
/* The button is a grid, and a grid spreads its three rows over the full 38px:
   the lines sat 12px apart, so the ☰ looked stretched and, open, the two
   outer lines - moved only 5px toward the middle - never met and drew a ">"
   instead of a ✕. The lines are now a fixed stack, 5.5px apart, and the
   open state moves each outer line exactly that far onto the middle one. */
.menu-toggle{flex-direction:column;justify-content:center;align-items:center;gap:3.9px}
@media(max-width:1040px){.menu-toggle{display:flex}}
.menu-toggle span{margin:0;width:17px;height:1.6px;border-radius:1px;flex:none}
.menu-toggle.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---- family bar on phones: show that it scrolls -------------------------- */
@media(max-width:900px){
  .rits-cat-fams-in{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent 100%);
    padding-right:32px;
  }
}

/* ---- product family bar: one white card, tabs inside it (2026-09-25) ---- */
/* Replaces the tile look above. The bar is a single white card; the families
   share its width in equal columns, icon over name, both in slate grey. The
   current family sits on a pale blue tab with a blue rule along its foot,
   its icon blue and its name dark. The sort control under it is a white pill. */
:root[data-theme="light"] .rits-cat-fams{
  background:rgba(255,255,255,.95);
  border-color:transparent;
  box-shadow:0 0 0 1px rgba(226,232,242,.95),0 14px 34px -24px rgba(24,44,96,.35);
}
:root[data-theme="light"] .rits-cat-fams::before,
:root[data-theme="light"] .rits-cat-fams::after{content:none}
@media(min-width:1041px){
  :root[data-theme="light"] .rits-cat-fams{border-radius:16px;background:rgba(255,255,255,.86)}
  :root[data-theme="light"] .rits-cat-fams-in{justify-content:stretch;gap:0;padding:6px 8px 0;overflow:visible}
  :root[data-theme="light"] .rits-cat-fam{flex:1 1 0;width:auto;min-width:0}
}
:root[data-theme="light"] .rits-cat-fam{
  position:relative;padding:14px 6px 13px;gap:9px;border-radius:12px;
  color:#5B6472;transition:background-color .2s var(--ease),color .2s var(--ease);
}
:root[data-theme="light"] .rits-cat-fam .rits-cat-fam-ic{
  width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:#5B6472;transform:none;
}
:root[data-theme="light"] .rits-cat-fam .rits-cat-fam-ic svg{width:26px;height:26px}
:root[data-theme="light"] .rits-cat-fam .rits-cat-fam-name{
  font-size:13px;font-weight:500;line-height:1.3;color:#5F6775;min-height:2.6em;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
:root[data-theme="light"] .rits-cat-fam:hover{background:rgba(236,241,250,.7)}
:root[data-theme="light"] .rits-cat-fam:hover .rits-cat-fam-ic{transform:none;box-shadow:none;color:#2F3743}
:root[data-theme="light"] .rits-cat-fam:hover .rits-cat-fam-name{color:#1B2330}
:root[data-theme="light"] .rits-cat-fam.is-active{
  background:linear-gradient(180deg,#EEF3FC 0%,#E4ECF9 100%);
}
:root[data-theme="light"] .rits-cat-fam.is-active .rits-cat-fam-ic{background:none;box-shadow:none;color:#2563EB}
:root[data-theme="light"] .rits-cat-fam.is-active .rits-cat-fam-name{color:#1B2330;font-weight:600}
:root[data-theme="light"] .rits-cat-fam.is-active::after{
  content:'';position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;
  background:#2F6BDE;
}
@media(max-width:1040px){
  :root[data-theme="light"] .rits-cat-fams-in{gap:4px;padding-top:6px;padding-bottom:0}
  :root[data-theme="light"] .rits-cat-fam{width:104px;flex:0 0 auto}
}
@media(max-width:680px){
  :root[data-theme="light"] .rits-cat-fam{width:88px;padding:12px 4px 11px}
  :root[data-theme="light"] .rits-cat-fam .rits-cat-fam-ic{width:auto;height:auto}
  :root[data-theme="light"] .rits-cat-fam .rits-cat-fam-ic svg{width:23px;height:23px}
  :root[data-theme="light"] .rits-cat-fam .rits-cat-fam-name{font-size:12px}
}

/* the sort control: a white pill with a chevron, set a little under the bar */
:root[data-theme="light"] .woocommerce .woocommerce-ordering{margin:14px 0 18px}
:root[data-theme="light"] .woocommerce .woocommerce-ordering select,
:root[data-theme="light"] .woocommerce .woocommerce-ordering select:hover{
  height:44px;padding:0 46px 0 22px;border-radius:999px;
  border:1px solid rgba(228,233,242,.95);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111827' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 18px center/14px 14px;
  color:#111827;font-size:14px;font-weight:600;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 22px -14px rgba(24,44,96,.35);
  cursor:pointer;
}
:root[data-theme="light"] .woocommerce .woocommerce-ordering select:hover{border-color:rgba(200,212,234,1)}
:root[data-theme="light"] .rits-cat-fam .rits-cat-fam-name{max-width:6.8em;margin-inline:auto}
@media(max-width:1040px){:root[data-theme="light"] .rits-cat-fams{border-radius:16px;overflow:hidden}}

/* ---- homepage "Nos solutions" rail: same card-and-tabs look as the
   catalogue family bar (2026-09-25) ------------------------------------ */
:root[data-theme="light"] .rg-rail{
  flex-wrap:nowrap;justify-content:stretch;gap:0;
  padding:6px 8px 0;border-radius:16px;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(226,232,242,.95),0 14px 34px -24px rgba(24,44,96,.35);
}
:root[data-theme="light"] .rg-rail::after{content:none}
:root[data-theme="light"] .rg-tab{
  position:relative;flex:1 1 0;width:auto;min-width:0;
  padding:14px 6px 13px;gap:9px;border-radius:12px;
  transition:background-color .2s var(--ease);
}
:root[data-theme="light"] .rg-tab-ic,
:root[data-theme="light"] .rg-tab:hover .rg-tab-ic,
:root[data-theme="light"] .rg-tab.is-active .rg-tab-ic{
  width:auto;height:auto;border-radius:0;overflow:visible;
  background:none;box-shadow:none;transform:none;
}
:root[data-theme="light"] .rg-tab-ic{color:#5B6472;transition:color .2s var(--ease)}
:root[data-theme="light"] .rg-tab-ic svg{width:26px;height:26px}
:root[data-theme="light"] .rg .rg-tab-ic img{width:26px;height:26px}
:root[data-theme="light"] .rg-tab-name{
  font-size:13px;font-weight:500;line-height:1.3;color:#5F6775;
  min-height:2.6em;max-width:6.8em;margin-inline:auto;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
:root[data-theme="light"] .rg-tab:hover{background:rgba(236,241,250,.7)}
:root[data-theme="light"] .rg-tab:hover .rg-tab-ic{color:#2F3743}
:root[data-theme="light"] .rg-tab:hover .rg-tab-name{color:#1B2330}
:root[data-theme="light"] .rg-tab.is-active{background:linear-gradient(180deg,#EEF3FC 0%,#E4ECF9 100%)}
:root[data-theme="light"] .rg-tab.is-active .rg-tab-ic{color:#2563EB}
:root[data-theme="light"] .rg-tab.is-active .rg-tab-name{color:#1B2330;font-weight:600}
:root[data-theme="light"] .rg-tab.is-active::after{
  content:'';position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;
  background:#2F6BDE;
}
@media(max-width:900px){
  :root[data-theme="light"] .rg-rail{justify-content:flex-start;gap:4px;overflow-x:auto}
  :root[data-theme="light"] .rg-tab{flex:0 0 auto;width:104px}
}
@media(max-width:520px){
  :root[data-theme="light"] .rg-tab{width:88px;padding:12px 4px 11px}
  :root[data-theme="light"] .rg-tab-ic svg{width:23px;height:23px}
  :root[data-theme="light"] .rg-tab-name{font-size:12px}
}
/* narrow screens: tabs fill the card and only scroll when they cannot fit */
@media(max-width:1040px){:root[data-theme="light"] .rits-cat-fam{flex:1 0 96px;width:auto}}
@media(max-width:680px){:root[data-theme="light"] .rits-cat-fam{flex:1 0 84px}}
@media(max-width:900px){:root[data-theme="light"] .rg-tab{flex:1 0 96px;width:auto}}
@media(max-width:520px){:root[data-theme="light"] .rg-tab{flex:1 0 84px}}

/* ---- 404 and the fallback listing (404.php, index.php) ------------------ */
.rits-404 .container{max-width:760px}
.rits-404-lede{font-size:clamp(1.02rem,1.2vw,1.12rem);line-height:1.6;color:var(--ink-2);margin:0 0 26px}
.rits-404-search{margin:0 0 26px}
.rits-404-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.rits-list-item{margin-bottom:48px}

/* A consistent canvas leaves the product photography and reading panels clear. */
:root[data-theme="light"] body.rits-canvas-home{background:var(--rits-page-canvas,#E9ECF4)}
:root[data-theme="light"] body.rits-canvas-home #content::before,
:root[data-theme="light"] body.rits-canvas-home #content::after{content:none}
:root[data-theme="light"] body.rits-canvas-home :is(.rpa,.rca){display:none}