/* =========================================================================
   NOS SOLUTIONS POUR VOTRE POINT DE VENTE   (see inc/gammes.php)

   A light island, like the sector tabs it replaces and like the product
   Description panel: the page's own tokens are re-declared light inside .rg
   so the card reads the same whichever theme the visitor is in.

   The card is not a flat white slab. There is a luminance ladder inside it -
   a cobalt/periwinkle bloom across the top corners, blown out to pure white
   down the middle where the heading and the body copy sit, and grain over
   the whole thing so the gradient cannot band. Nothing sits in a box that
   does not need one: the rail is separated by a hairline that fades out at
   both ends rather than by a border, and the products are pale pills.
   ========================================================================= */

.rg{
  /* light tokens, local to the card */
  --white:#FFFFFF;--paper:#F5F7F9;--paper-2:#EDF0F3;
  --line:#E2E6EA;--line-2:#CFD5DB;

  --rg-r:clamp(16px,1.8vw,24px);
  --rg-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");

  position:relative;isolation:isolate;overflow:hidden;
  background:#fff;color:var(--ink);
  border-radius:var(--rg-r);
  padding:clamp(30px,3.6vw,52px) 0 clamp(28px,3.4vw,48px);
  box-shadow:0 22px 50px -30px rgba(0,0,0,.7);
}

/* The bloom. Inset well past the card so the blur edge is clipped by the
   rounded corners instead of ending inside them. */
.rg::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:-12%;right:-12%;top:-18%;height:86%;
  background:
    radial-gradient(54% 60% at 4% 2%,  color-mix(in srgb,var(--accent) 30%,transparent) 0%,  color-mix(in srgb,var(--accent) 0%,transparent) 72%),
    radial-gradient(48% 54% at 98% 0%, rgba(126,136,214,.34) 0%, rgba(126,136,214,0) 70%),
    radial-gradient(40% 44% at 50% 0%, rgba(232,233,247,.55) 0%, rgba(232,233,247,0) 76%);
  filter:blur(30px);
}
/* Grain over the gradient, gone by the time it reaches the body copy. */
.rg::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:var(--rg-grain);background-size:180px 180px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,rgba(0,0,0,.35) 62%,transparent 82%);
  mask-image:linear-gradient(180deg,#000 0%,#000 40%,rgba(0,0,0,.35) 62%,transparent 82%);
}

.rg-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 clamp(20px,2.8vw,42px)}

.rg.rg-pre-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rg.rg-pre-reveal.rg-revealed{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.rg.rg-pre-reveal{opacity:1;transform:none;transition:none}}

/* ---------------- head ---------------- */
.rg-head{max-width:760px;margin:0 auto clamp(24px,2.8vw,36px);text-align:center}
.rg-head .eyebrow{color:var(--accent);margin-bottom:12px}
.rg-head h2{
  font-size:clamp(1.65rem,2.9vw,2.3rem);margin:0;color:var(--ink);
  letter-spacing:-.028em;line-height:1.08;
}
.rg-lede{margin:14px auto 0;max-width:580px;color:var(--ink-2);font-size:15px;line-height:1.55}

/* ---------------- family rail ----------------
   Hairline under it, faded at both ends: the structure is there, the box is
   not. On a narrow screen the rail scrolls instead of wrapping. */
.rg-rail{
  position:relative;
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(4px,.8vw,12px);
  padding:0 0 clamp(16px,1.8vw,22px);
  margin:0 0 clamp(26px,3.2vw,40px);
}
.rg-rail::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    rgba(226,230,234,0) 0%, var(--line) 10%,
    var(--line-2) 50%, var(--line) 90%, rgba(226,230,234,0) 100%);
}

.rg-tab{
  all:unset;box-sizing:border-box;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  width:clamp(94px,9.2vw,122px);padding:12px 6px 10px;
  border-radius:16px;
  transition:background .24s var(--ease),transform .24s var(--ease);
}
.rg-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.rg-tab-ic{
  width:54px;height:54px;flex:none;border-radius:15px;
  display:grid;place-items:center;overflow:hidden;
  color:var(--accent);
  background:linear-gradient(180deg,#fff 0%,rgba(245,247,252,.92) 100%);
  box-shadow:0 0 0 1px var(--line);
  transition:background .26s var(--ease),box-shadow .26s var(--ease),
             color .26s var(--ease),transform .26s var(--ease);
}
.rg-tab-ic svg{width:27px;height:27px;display:block}
.rg .rg-tab-ic img{width:100%;height:100%;object-fit:cover;display:block}

.rg-tab-name{
  font-size:12.5px;font-weight:500;line-height:1.25;text-align:center;
  color:var(--ink-3);transition:color .22s var(--ease),font-weight .22s var(--ease);
}

.rg-tab:hover .rg-tab-ic{
  background:linear-gradient(180deg,#fff 0%,var(--accent-soft) 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent);
  transform:translateY(-1px);
}
.rg-tab:hover .rg-tab-name{color:var(--ink-2)}

.rg-tab.is-active .rg-tab-ic{
  color:#fff;
  background:linear-gradient(158deg,#2F6BEA 0%,var(--accent) 52%,#0A46C6 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 12px 22px -12px color-mix(in srgb,var(--accent) 90%,transparent);
}
.rg-tab.is-active .rg-tab-name{color:var(--ink);font-weight:600}

/* ---------------- panels ----------------
   Stacked in one grid cell, so the section is as tall as the tallest family
   and switching a tab never makes the page jump. */
.rg-panels{display:grid}
.rg-panel{
  grid-column:1;grid-row:1;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,3.6vw,52px);align-items:center;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s;
}
.rg-panel.is-active{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  transition:opacity .42s var(--ease) .06s,transform .42s var(--ease) .06s;
}

/* ---------------- the photo ----------------
   Product shots are on white, so the plinth blows out to pure white exactly
   where the product sits and only carries colour out at the corners. The
   hairline dot grid is masked off the middle for the same reason. */
.rg-shot{
  --rg-pad:clamp(18px,2.4vw,34px);
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:clamp(14px,1.4vw,20px);
  aspect-ratio:4/3;
  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(206,213,243,.9) 0%,
      rgba(238,241,250,.95) 42%,
      rgba(246,247,251,1) 62%,
      rgba(219,224,246,.85) 100%);
  box-shadow:inset 0 0 0 1px var(--line);
}
.rg-shot::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(10,13,17,.16) 1px,transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(64% 58% at 50% 48%,transparent 0%,transparent 52%,#000 96%);
  mask-image:radial-gradient(64% 58% at 50% 48%,transparent 0%,transparent 52%,#000 96%);
}
/* The photos are every shape - a 432x577 portrait terminal next to a 1024x1024
   square scanner - so the image is given the whole plinth and letterboxed
   inside it.
   It is pinned to the plinth's inset rather than sized in percentages: the
   plinth's height comes from aspect-ratio, which is not a definite height a
   percentage can resolve against, so height:100% fell back to auto and a
   portrait shot overflowed and came out cropped. Pinned on all four sides,
   the plinth's own padding box is the containing block, and that one does
   have a definite height for a percentage to resolve against.
   The size is written out rather than left to the four insets: an absolutely
   positioned replaced element with width:auto takes its intrinsic size and
   ignores the opposite inset, which put every photo back at full size. */
.rg .rg-shot img{
  position:absolute;z-index:1;
  top:var(--rg-pad);left:var(--rg-pad);
  width:calc(100% - var(--rg-pad) * 2);
  height:calc(100% - var(--rg-pad) * 2);
  max-width:none;max-height:none;
  object-fit:contain;object-position:center;display:block;
}

/* ---------------- the body ---------------- */
.rg-body{min-width:0}
.rg-title{
  font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:600;margin:0 0 10px;
  color:var(--ink);letter-spacing:-.025em;line-height:1.12;
}
.rg-desc{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6;max-width:56ch}

.rg-kicker{
  display:block;margin:clamp(18px,2.2vw,26px) 0 11px;
  font-family:var(--f-body);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
}

.rg-body{container-type:inline-size}
.rg-chips{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;grid-auto-rows:minmax(48px,auto)}
.rg-chips > li{min-width:0}
@container (min-width:360px){
  .rg-chips{grid-template-columns:repeat(var(--rg-chip-compact-columns,1),minmax(0,1fr))}
}
@container (min-width:520px){
  .rg-chips{grid-template-columns:repeat(var(--rg-chip-columns,1),minmax(0,1fr))}
}
.rg-chip{
  display:flex;align-items:center;gap:10px;width:100%;height:100%;min-width:0;box-sizing:border-box;
  padding:5px 15px 5px 5px;border-radius:999px;text-decoration:none;
  color:var(--ink-2);font-size:13.5px;font-weight:500;line-height:1;
  background:linear-gradient(180deg,#fff 0%,rgba(244,246,252,.95) 100%);
  box-shadow:0 0 0 1px var(--line);
  transition:color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.rg-chip-n{min-width:0;line-height:1.35;overflow-wrap:anywhere}
.rg-chip-im{
  width:30px;height:30px;flex:none;border-radius:9px;overflow:hidden;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line);
  display:grid;place-items:center;
}
.rg .rg-chip-im img{width:100%;height:100%;object-fit:contain;display:block}
.rg-chip:hover{
  color:var(--ink);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 8px 18px -12px color-mix(in srgb,var(--accent) 85%,transparent);
  transform:translateY(-1px);
}
.rg-chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.rg-cta{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(20px,2.4vw,28px);
  padding:12px 22px;border-radius:999px;
  font-size:14.5px;font-weight:600;line-height:1;text-decoration:none;color:#fff;
  background:linear-gradient(158deg,#2F6BEA 0%,var(--accent) 55%,#0A46C6 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent),0 14px 26px -16px color-mix(in srgb,var(--accent) 95%,transparent);
  transition:gap .2s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
}
.rg-cta:hover{
  color:#fff;gap:14px;transform:translateY(-1px);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent),0 18px 30px -16px color-mix(in srgb,var(--accent) 100%,transparent);
}
.rg-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rg-ar{
  width:16px;height:16px;flex:none;display:inline-block;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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 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;
}

/* "Photo de la famille" switched off in the widget: the text takes the row */
.rg--nophoto .rg-panel{grid-template-columns:minmax(0,1fr)}

/* ---------------- narrow ---------------- */
@media(max-width:900px){
  .rg-panel{grid-template-columns:1fr;gap:22px}
  .rg-shot{aspect-ratio:16/10}
  .rg-rail{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .rg-rail::-webkit-scrollbar{display:none}
  .rg-tab{scroll-snap-align:center;width:96px}
}
@media(max-width:520px){
  .rg-head{text-align:left}
  .rg-tab-ic{width:48px;height:48px;border-radius:13px}
  .rg-tab-ic svg{width:24px;height:24px}
}