/* =====================================================================================================================
   GOGO INDUSTRY — « Noir & Rouge » identity (09/10/2026). SINGLE SOURCE OF TRUTH for the brand design tokens.
   Loaded LAST (after tokens.css, components.css, layout.css, site.css, redesign.css): every older token is mapped onto
   these, so components keep working and no orange / gold / blue / turquoise colour remains on the site.

   Brand red = read from the client logo file brand/logo/client-2026-10-09/g-industry-logo-dark-text.png (square #D6212A).
   Red is an ACCENT only: logo, hover and focus states, active indicators, small highlights. Primary action = charcoal.

   ► To switch the primary action colour to red, change ONE line below:
       --gi-action: var(--gi-ink);   →   --gi-action: var(--gi-red);
     (white on red #D6212A = 5.1:1, hover darkens automatically.)

   Contrast (WCAG 2.2, text ≥ 4.5:1): ink #14171A / white 17.8:1 · muted #5B6470 / white 6.0:1, / #F4F4F4 5.4:1 ·
   white / action ink 17.8:1 · white / red 5.1:1 · red / white 5.1:1 · white / #111111 18.9:1 · #C4C9D0 / #111111 11.0:1.
   Non-text (≥ 3:1): red focus ring / white 5.1:1, / #111111 3.7:1 · red icons / #111111 3.7:1.
   ===================================================================================================================== */

:root {
  /* ---- 1. Colour ---------------------------------------------------------------------------------------------------- */
  --gi-red: #D6212A;                 /* brand red — from the logo file (accent only) */
  --gi-red-dark: #A81A21;            /* red pressed / text on light red tint (7.6:1 on white) */
  --gi-ink: #14171A;                 /* charcoal: text, primary action */
  --gi-muted: #5B6470;               /* secondary text */
  --gi-bg: #FFFFFF;                  /* page background */
  --gi-surface-2: #F4F4F4;           /* light grey surfaces (cards, gallery, secondary buttons) */
  --gi-border-color: #E3E6EA;        /* light grey borders / rules */
  --gi-border-control: #CFD4DA;      /* control outlines (cards, selects, pager) */
  --gi-inverse: #111111;             /* top bar + footer background */
  --gi-inverse-muted: #C4C9D0;       /* secondary text on the dark surfaces */
  --gi-red-text: var(--gi-red-dark); /* red used as TEXT (links, current item); lighter in the dark theme */
  --gi-img-bg: #FFFFFF;              /* frame behind product photos / drawings: white in BOTH themes */

  /* ---- 2. Actions --------------------------------------------------------------------------------------------------- */
  --gi-action: var(--gi-ink);                                        /* PRIMARY ACTION — switch to var(--gi-red) here */
  --gi-action-fg: #FFFFFF;
  --gi-action-hover: color-mix(in srgb, var(--gi-action) 82%, #000000);
  --gi-action-accent: var(--gi-red);                                 /* hover bar under primary buttons */
  --gi-action-2: var(--gi-surface-2);                                /* secondary action (light grey, ink text) */
  --gi-action-2-fg: var(--gi-ink);
  --gi-action-2-hover: #E7E8EA;
  --gi-focus: var(--gi-red);                                         /* focus ring */

  /* ---- 3. Typography (brand typography kept: Source Sans 3 / IBM Plex Sans Arabic) ------------------------------- */
  --gi-text-xs: 13px;
  --gi-text-sm: 14px;
  --gi-text-base: 16px;              /* body never below 16 px */
  --gi-text-md: 18px;
  --gi-text-lg: 22px;
  --gi-text-xl: 28px;
  --gi-text-2xl: 36px;
  --gi-text-3xl: clamp(30px, 4vw, 44px);
  --gi-leading-tight: 1.15;
  --gi-leading-body: 1.55;

  /* ---- 4. Spacing, radius, borders, targets ------------------------------------------------------------------------ */
  --gi-space-1: 4px;
  --gi-space-2: 8px;
  --gi-space-3: 12px;
  --gi-space-4: 16px;
  --gi-space-5: 24px;
  --gi-space-6: 32px;
  --gi-space-7: 40px;
  --gi-space-8: 48px;
  --gi-space-9: 64px;
  --gi-space-10: 80px;
  --gi-radius-s: 2px;
  --gi-radius-m: 4px;
  --gi-radius-l: 8px;
  --gi-border-w: 1px;
  --gi-border: var(--gi-border-w) solid var(--gi-border-color);
  --gi-border-strong: var(--gi-border-w) solid var(--gi-ink);
  --gi-target: 44px;                 /* minimum touch target */

  /* ---- 5. Legacy tokens mapped onto the identity (tokens.css · redesign.css) -------------------------------------- */
  --gi-c-black: var(--gi-ink);
  --gi-c-red: var(--gi-red);
  --gi-c-orange: var(--gi-action);   /* former « Demander un devis » orange → primary action */
  --gi-c-blue-light: var(--gi-surface-2);
  --gi-c-grey-light: var(--gi-surface-2);
  --gi-c-grey-text: var(--gi-muted);
  --gi-c-border: var(--gi-border-color);
  --gi-c-border-control: var(--gi-border-control);
  --gi-c-steel: var(--gi-ink);       /* no blue: former steel-blue graphics / info state → ink */
  --gi-ix-orange-hover: var(--gi-action-hover);
  --gi-ix-black-hover: var(--gi-action-hover);
  --gi-ix-red-hover: var(--gi-red-dark);
  --gi-surface-inverse: var(--gi-inverse);
  --gi-accent: var(--gi-red);
  --gi-graphic: var(--gi-ink);
  --gi-state-info: var(--gi-ink);
  --gi-stock-quote: var(--gi-ink);
  --gi-action-quote-bg: var(--gi-action);
  --gi-action-quote-fg: var(--gi-action-fg);
  --gi-action-quote-bg-hover: var(--gi-action-hover);
  --gi-action-cart-bg: var(--gi-action);
  --gi-action-cart-fg: var(--gi-action-fg);
  --gi-action-cart-bg-hover: var(--gi-action-hover);
  --gi-action-brand-bg: var(--gi-red);
  --gi-action-brand-fg: #FFFFFF;
  --gi-action-brand-bg-hover: var(--gi-red-dark);
  --gi-action-secondary-bg-hover: var(--gi-surface-2);
  --gi-focus-color: var(--gi-focus);
  --gi-radius: var(--gi-radius-m);
  --gi-gold: var(--gi-red);          /* former header gold (icons, current-page underline) → red accent */
  --gi-gold-hover: var(--gi-action-hover);
  --gi-topbar-bg: var(--gi-inverse);
}

/* ---- Base ------------------------------------------------------------------------------------------------------------ */
body.gi { background: var(--gi-bg); color: var(--gi-ink); }
.gi a:focus-visible, .gi button:focus-visible, .gi input:focus-visible, .gi select:focus-visible, .gi textarea:focus-visible,
.gi summary:focus-visible, .gi [tabindex]:focus-visible { outline: 3px solid var(--gi-focus) !important; outline-offset: 2px; box-shadow: 0 0 0 2px var(--gi-bg); }

/* Buttons: primary = action (charcoal), red bar on hover; « Demander un devis » = primary action (no orange) */
.gi-btn--quote, .gi-btn--cart { background: var(--gi-action); color: var(--gi-action-fg); border-color: var(--gi-action); }
.gi-btn--quote:hover, .gi-btn--cart:hover, .gi-btn--quote.is-hover, .gi-btn--cart.is-hover { background: var(--gi-action-hover); color: var(--gi-action-fg); box-shadow: inset 0 -3px 0 var(--gi-action-accent); }
.gi-btn--secondary:hover { box-shadow: inset 0 -3px 0 var(--gi-red); }
.gi-ccard__btn:hover, .gi-nl__btn:hover { background: var(--gi-action-hover); color: var(--gi-action-fg); box-shadow: inset 0 -3px 0 var(--gi-action-accent); }

/* ---- Header (compact, minimal, utility icons) -------------------------------------------------------------------- */
.gi-header__main { min-height: 80px; }
.gi-logo--card { padding: 0; background: none; border-radius: 0; box-shadow: none; }
.gi-logo--card .gi-logo__img { height: 34px; }
.gi-langbar { background: var(--gi-surface-2); }
@container gi (max-width: 760px) {
  .gi-header__main { min-height: 64px; }
  .gi-logo--card .gi-logo__img { height: 28px; }
}

/* ---- Floating WhatsApp, notices, badges ------------------------------------------------------------------------- */
/* Floating contact buttons (client reference 10/10/2026): two round buttons, « Appeler » (brand red) above « WhatsApp »
   (green darkened from #25D366 to #189D4A so the white icon reaches 3.5:1 — the official green gives 2:1). */
.gi-fab { display: flex; flex-direction: column; gap: var(--gi-space-3); }
.gi-fab__btn { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(20, 23, 26, .28); transition: transform .15s ease, background-color .15s ease; }
.gi-fab__btn svg { width: 26px; height: 26px; stroke-width: 2; }
.gi-fab__btn--call { background: var(--gi-red); }
.gi-fab__btn--call:hover { background: var(--gi-red-dark); color: #FFFFFF; }
.gi-fab__btn--wa { background: #189D4A; }
.gi-fab__btn--wa:hover { background: #127A39; color: #FFFFFF; }
.gi-fab__btn:hover { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .gi-fab__btn { transition: none; } .gi-fab__btn:hover { transform: none; } }
@container gi (max-width: 760px) { .gi-fab__btn { width: 52px; height: 52px; } .gi-fab__btn svg { width: 24px; height: 24px; } }
.gi-msg--info { border-color: var(--gi-ink); background: var(--gi-surface-2); }

/* ---- Footer: approved structure ------------------------------------------------------------------------------------ */
.gi-footer { background: var(--gi-inverse); }

/* ---- Category page (approved mockup layout; colours only) ----------------------------------------------------- */
.gi-des__card[aria-current] { border-color: var(--gi-red); box-shadow: inset 0 0 0 1px var(--gi-red); }
.gi-pager__n[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gi-red); }
.gi-cfilters__opt input, .gi-nl__consent input { accent-color: var(--gi-ink); }

/* ---- Product page: no media → info column only (production) ------------------------------------------------------- */
.gi-pdp__top--nomedia { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.gi-pdp__details { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }   /* 2 or 3 blocks, no empty column */

/* ---- Local prototype banner: no blue ----------------------------------------------------------------------------- */
.gi-l-devbar { background: var(--gi-ink); }

/* ---- WooCommerce notices (WooCommerce 11.2 prints « block » notice banners on classic pages too) ------------------- */
.wc-block-components-notice-banner { display: flex; align-items: flex-start; gap: var(--gi-space-3); margin: var(--gi-space-3) 0; padding: var(--gi-space-3) var(--gi-space-4);
  border: var(--gi-border); border-inline-start: 4px solid var(--gi-ink); border-radius: var(--gi-radius-m); background: var(--gi-surface-2); color: var(--gi-ink); font-size: var(--gi-text-base); }
.wc-block-components-notice-banner > svg { flex: none; width: 20px; height: 20px; fill: currentColor; margin-block-start: 2px; }
.wc-block-components-notice-banner.is-success { border-inline-start-color: var(--gi-c-success); }
.wc-block-components-notice-banner.is-success > svg { color: var(--gi-c-success); }
.wc-block-components-notice-banner.is-error { border-inline-start-color: var(--gi-c-error); }
.wc-block-components-notice-banner.is-error > svg { color: var(--gi-c-error); }
.wc-block-components-notice-banner__content { flex: 1; min-width: 0; }
.wc-block-components-notice-banner a { color: var(--gi-ink); text-decoration: underline; }

/* ---- Forms: a search form inside a vertical stack (empty cart, 404, empty results) takes the full width ---------- */
.gi-l-stack > .gi-search, .gi-empty > .gi-search { width: 100%; max-width: 640px; }

/* ---- No underlines anywhere (client request 09/10/2026): links, headings, buttons, search highlights, in every state.
   Strike-through prices (<del>, <s>) keep their line: it carries meaning (former price). -------------------------- */
.gi :not(del, s, del *, s *) { text-decoration-line: none !important; }

/* ---- Search bar (client reference 10/10/2026): white pill, round red button inside the end of the field ---------- */
.gi .gi-search { align-items: center; gap: var(--gi-space-2); padding: 4px; padding-inline-start: var(--gi-space-2); background: var(--gi-bg);
  border: var(--gi-border-w) solid var(--gi-border-control); border-radius: 999px; box-shadow: 0 1px 3px rgba(20, 23, 26, .08); }
.gi .gi-search:hover { border-color: var(--gi-muted); }
.gi .gi-search:focus-within { border-color: var(--gi-red); box-shadow: 0 0 0 3px rgba(214, 33, 42, .18); }
.gi .gi-search__input { min-height: 44px; height: 44px; padding: 0 var(--gi-space-3); border: 0; border-radius: 999px; background: transparent; color: var(--gi-ink); font-size: var(--gi-text-base); }
.gi .gi-search__input::placeholder { color: var(--gi-muted); opacity: 1; }
.gi .gi-search__input:focus-visible { outline: none !important; box-shadow: none; }   /* the ring is drawn on the whole bar (:focus-within) */
.gi .gi-search__btn { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--gi-red); color: #FFFFFF; box-shadow: none; }
.gi .gi-search__btn:hover { background: var(--gi-red-dark); color: #FFFFFF; box-shadow: none; }
.gi .gi-search__btn .gi-i { width: 20px; height: 20px; }
.gi .gi-search__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* label kept for screen readers */

/* ---- Sticky header row (client request 10/10/2026): the logo / menu / tools row stays visible while scrolling.
   The WordPress template-part wrapper sticks (the header alone could not: it is the wrapper's only content); its top is set
   negative by a small script in gogo-core blocks.php so the dev bar, language banner and top bar scroll away.
   Without JavaScript the whole header block sticks. z-index: above the floating WhatsApp button and selection bar. ---- */
.wp-block-template-part:has(> .gi-header) { position: sticky; top: 0; z-index: 55; }
.gi-header { background: var(--gi-bg); }
html { scroll-padding-top: calc(var(--gi-hdr-stuck, 0px) + 8px); }
.gi-secnav { top: var(--gi-hdr-stuck, 0px); }
.gi-pdp__media { top: calc(var(--gi-hdr-stuck, 0px) + 24px); }
.gi-l-cart .gi-summary, .gi-l-toc { top: calc(var(--gi-hdr-stuck, 0px) + var(--gi-space-4)); }

/* ---- Light site only (dark mode removed, client 14/10/2026): browsers must not darken the pages themselves ---- */
:root { color-scheme: light; }

/* ---- Product page, SEO model of 14/10/2026: lead sentence + selling points under the title, uses list ------------------ */
.gi-pdp__title + .gi-pdp__short { margin: 0 0 var(--gi-space-3); color: var(--gi-muted); font-size: var(--gi-text-base); }
.gi-pdp__chips { display: flex; flex-wrap: wrap; gap: var(--gi-space-2); margin: 0 0 var(--gi-space-3); padding: 0; list-style: none; }
.gi-chip { padding: 3px 12px; border: var(--gi-border-w) solid var(--gi-border-control); border-radius: 999px; font-size: var(--gi-text-sm); font-weight: 600; color: var(--gi-ink); }
.gi-chip--key { border-color: var(--gi-red); color: var(--gi-red-text); background: color-mix(in srgb, var(--gi-red) 6%, var(--gi-bg)); }
.gi-pdp__uses-t { margin: var(--gi-space-4) 0 var(--gi-space-2); font-size: var(--gi-text-md); }
.gi-pdp__uses { margin: 0; padding-inline-start: var(--gi-space-5); line-height: 1.6; }

/* ---- « Added to cart » window (model A, 14/10/2026): centred card over a dimmed page ------------------------------ */
.gi-added { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 22px; overflow: auto; border: 0; border-radius: var(--gi-radius-l);
  background: var(--gi-bg); color: var(--gi-ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.gi-added[open]:not(:modal) { position: fixed; inset: 0; z-index: 100; }   /* without script: shown above the page */
.gi-added::backdrop { background: rgba(17, 17, 17, .5); }
.gi-added__close { position: absolute; top: 10px; inset-inline-end: 10px; margin: 0; }
.gi-added__x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gi-muted); cursor: pointer; }
.gi-added__x:hover { background: var(--gi-surface-2); color: var(--gi-ink); }
.gi-added__t { display: flex; align-items: center; gap: 10px; margin: 2px 48px 0 0; font-size: var(--gi-text-md); }
[dir="rtl"] .gi-added__t { margin: 2px 0 0 48px; }
.gi-added__ok { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gi-c-success); color: #FFFFFF; }
.gi-added__ok svg { width: 16px; height: 16px; stroke-width: 2.6; }
.gi-added__list { margin: 14px 0 0; padding: 0; list-style: none; border-block: var(--gi-border); }
.gi-added__item { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.gi-added__item + .gi-added__item { border-top: var(--gi-border); }
.gi-added__thumb { flex: none; width: 64px; height: 64px; overflow: hidden; border: var(--gi-border); border-radius: var(--gi-radius-m); background: var(--gi-img-bg); }
.gi-added__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gi-added__txt { display: grid; gap: 2px; min-width: 0; }
.gi-added__price { font-weight: 700; }
.gi-added__sum { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0; color: var(--gi-muted); }
.gi-added__sum b { color: var(--gi-ink); }
.gi-added__go, .gi-added__stay { width: 100%; }
.gi-added form[method="dialog"]:not(.gi-added__close) { margin: 8px 0 0; }
.gi-added__ship { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--gi-muted); font-size: var(--gi-text-sm); }
.gi-added__ship svg { flex: none; width: 18px; height: 18px; color: var(--gi-red); }