/* ==========================================================================
   Thiriet « gris souris » pour Cassiopeia (Joomla 6)
   Variante du thème moderne : bandeau gris souris, barre et pied anthracite,
   le logo bleu et jaune et une touche d'orange Thiriet en accent.
   Même identité que l'ancien site (orange, jaune, bleu marine, produits
   en bandeau, menu par rubriques) dans une présentation actuelle :
   en-tête blanc, bandeau produits, barre de navigation, contenu sur carte.
   ========================================================================== */

:root {
  --t-orange: #eb6d0b;
  --t-orange-clair: #f5a30f;
  --t-jaune: #ffcc00;
  --t-bleu: #0b2f6b;
  --t-bleu-moyen: #0f4d9a;
  --t-rouge: #d7261e;
  --t-fond: #eeeeef;
  --t-souris: #8b8e92;
  --t-souris-clair: #a4a7ab;
  --t-souris-fonce: #73767a;
  --t-anthracite: #3e4146;
  --t-anthracite-fonce: #2f3236;
  --t-titre: #2f3236;
  --t-texte: #2b2e33;
  --t-largeur: 1120px;
  --t-rayon: 14px;
  --t-police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cassiopeia-color-primary: var(--t-anthracite);
  --cassiopeia-color-link: var(--t-bleu-moyen);
  --cassiopeia-color-hover: var(--t-orange);
  --link-color: var(--t-bleu-moyen);
  --link-color-rgb: 15, 77, 154;
  --link-hover-color: var(--t-orange);
  --link-hover-color-rgb: 235, 109, 11;
  --body-font-family: var(--t-police);
  --body-color: var(--t-texte);
  --body-bg: var(--t-fond);
}

body.site {
  font-family: var(--t-police);
  color: var(--t-texte);
  background: var(--t-fond);
  font-size: 1rem;
  line-height: 1.6;
}

/* ---------- bandeau orange : logo à gauche, produits à droite ---------- */
.container-header {
  --t-bandeau: 170px;
  --t-nav: 54px;
  position: relative;
  z-index: 25;
  display: block;
  min-height: var(--t-bandeau);
  padding: 0;
  background:
    url(../images/hero-produits.png) right max(0px, calc((100% - var(--t-largeur)) / 2)) bottom 6px / auto calc(var(--t-bandeau) - 12px) no-repeat,
    repeating-linear-gradient(115deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 22px),
    linear-gradient(100deg, var(--t-souris-fonce) 0%, var(--t-souris) 50%, var(--t-souris-clair) 100%);
  box-shadow: none;
  border-bottom: 4px solid var(--t-orange);
}
.container-header .grid-child {
  max-width: var(--t-largeur);
  margin: 0 auto;
  padding: 0 16px;
}
.container-header .navbar-brand {
  display: flex;
  align-items: center;
  height: var(--t-bandeau);
  margin: 0;
  padding: 0;
}
.container-header .brand-logo {
  display: block;
  width: 320px;
  height: 94px;
  background: url(../images/logo-thiriet.svg) left center / contain no-repeat;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / .18));
  color: transparent;
  font-size: 0;
  overflow: hidden;
}
.container-header .brand-logo:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 4px; }
.container-header .site-description { display: none; }

/* drapeaux : à droite dans la barre de navigation bleue (juste sous le bandeau) */
.container-topbar {
  position: absolute;
  top: calc(100% + 4px);
  right: max(16px, calc((100% - var(--t-largeur)) / 2 + 16px));
  height: var(--t-nav);
  display: flex;
  align-items: center;
  padding: 0;
  background: none;
  z-index: 30;
}
.mod-languages ul.lang-inline { margin: 0; padding: 0; display: flex; gap: 4px; }
.mod-languages ul.lang-inline li { margin: 0; }
.mod-languages ul.lang-inline a {
  display: block;
  padding: 6px;
  border-radius: 8px;
  line-height: 0;
  transition: background .15s;
}
.mod-languages ul.lang-inline a:hover { background: rgb(255 255 255 / .12); }
.mod-languages ul.lang-inline li.lang-active a { background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 2px var(--t-orange); }
.mod-languages img { width: 22px; height: auto; border-radius: 2px; display: block; }

/* ---------- grille : barre de navigation pleine largeur, puis contenu ---------- */
.site-grid,
.wrapper-fluid .site-grid {
  grid-gap: 0;
  grid-template-columns: [full-start] minmax(16px, 1fr) [main-start] minmax(0, var(--t-largeur)) [main-end] minmax(16px, 1fr) [full-end];
  grid-template-areas:
    "nav nav nav"
    ". banner ."
    ". top-a ."
    ". top-b ."
    ". comp ."
    ". side-r ."
    ". bot-a ."
    ". bot-b .";
  margin-bottom: 0;
}
@media (min-width: 992px) {
  .site-grid {
    grid-template-areas:
      "nav nav nav"
      ". banner ."
      ". top-a ."
      ". top-b ."
      ". comp ."
      ". side-r ."
      ". bot-a ."
      ". bot-b .";
  }
}

/* ---------- barre de navigation (module « Menu principal » en sidebar-left) ---------- */
.site-grid > .container-sidebar-left {
  grid-area: nav;
  grid-column: full-start / full-end !important;
  grid-row: 1;
  min-height: 54px;
  width: auto;
  max-width: none;
  margin: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
  z-index: 20;
  background: var(--t-anthracite);
  box-shadow: 0 4px 14px rgb(0 0 0 / .22);
  padding-left: max(16px, calc((100% - var(--t-largeur)) / 2)) !important;
  padding-right: calc(max(16px, calc((100% - var(--t-largeur)) / 2)) + 200px) !important;
}
.container-sidebar-left .card,
.container-sidebar-left .card-body,
.container-sidebar-left .moduletable { background: none; border: 0; box-shadow: none; padding: 0 !important; margin: 0 !important; }
.container-sidebar-left ul.mod-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.container-sidebar-left ul.mod-menu > li { position: relative; margin: 0; padding: 0; }
.container-sidebar-left ul.mod-menu > li > a,
.container-sidebar-left ul.mod-menu > li > span {
  display: block;
  padding: 16px 18px 13px;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: background .15s, border-color .15s;
}
.container-sidebar-left ul.mod-menu > li > a:hover,
.container-sidebar-left ul.mod-menu > li:focus-within > a { background: rgb(255 255 255 / .08); }
.container-sidebar-left ul.mod-menu > li.active > a { border-bottom-color: var(--t-orange); color: #ffb347; }
.container-sidebar-left .mod-menu__toggle-sub { display: none !important; }

/* sous-menu déroulant */
.container-sidebar-left ul.mod-menu ul,
.container-sidebar-left ul.mod-menu__sub {
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border-radius: 0 0 var(--t-rayon) var(--t-rayon);
  border-top: 3px solid var(--t-orange);
  box-shadow: 0 14px 30px rgb(0 0 0 / .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.container-sidebar-left ul.mod-menu > li:hover > ul,
.container-sidebar-left ul.mod-menu > li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.container-sidebar-left ul.mod-menu ul li { margin: 0; }
.container-sidebar-left ul.mod-menu ul a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--t-titre);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
}
.container-sidebar-left ul.mod-menu ul a:hover { background: #fff3e6; color: var(--t-orange); }
.container-sidebar-left ul.mod-menu ul li.current > a,
.container-sidebar-left ul.mod-menu ul li.active > a { background: var(--t-orange); color: #fff; }

/* petit écran : sous-rubriques affichées en pastilles sous la barre */
@media (max-width: 767.98px) {
  .site-grid > .container-sidebar-left { position: static; padding: 6px 12px 10px; }
  .container-sidebar-left ul.mod-menu > li > a { padding: 10px 12px 8px; }
  .container-sidebar-left ul.mod-menu > li.parent { width: 100%; order: 5; }
  .container-sidebar-left ul.mod-menu ul,
  .container-sidebar-left ul.mod-menu__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: flex !important; flex-wrap: wrap; gap: 6px;
    min-width: 0; padding: 4px 0 0; background: none; border: 0; box-shadow: none;
  }
  .container-sidebar-left ul.mod-menu ul a {
    padding: 5px 11px; border-radius: 999px; font-size: .82rem;
    background: rgb(255 255 255 / .12); color: #fff;
  }
}

/* ---------- contenu sur carte blanche ---------- */
.site-grid > .container-component {
  grid-area: comp;
  grid-column: main-start / main-end !important;
  background: #fff;
  border-radius: var(--t-rayon);
  box-shadow: 0 10px 30px rgb(29 43 62 / .08);
  padding: clamp(20px, 4vw, 44px);
  margin: 32px 0 48px;
}
.container-component h1,
.container-component .page-header h1,
.container-component .page-header h2,
.com-content-category-blog > h1 {
  position: relative;
  color: var(--t-titre);
  font-family: var(--t-police);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 1.6rem;
  padding-bottom: .7rem;
}
.container-component h1::after,
.container-component .page-header h1::after,
.container-component .page-header h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--t-orange), var(--t-jaune));
}
.container-component h2 { color: var(--t-titre); font-size: 1.35rem; }
.container-component h3 { color: var(--t-titre); font-size: 1.1rem; }
.container-component p, .container-component td { color: var(--t-texte); }
.container-component a { color: var(--t-bleu-moyen); text-decoration: none; }
.container-component a:hover { color: var(--t-orange); }

/* anciens contenus en tableaux : on les rend souples */
.com-content-article__body table,
.category-desc table { max-width: 100%; height: auto !important; border-collapse: separate; border-spacing: 0; }
.com-content-article__body img,
.category-desc img { max-width: 100%; height: auto; }
.com-content-article__body,
.category-desc { overflow-x: auto; }

/* textes blancs prévus pour le fond orange de l'ancien site */
.category-desc span[style*="#ffffff"],
.category-desc span[style*="#fff;"],
.com-content-article__body span[style*="#ffffff"] { color: var(--t-titre) !important; }
.category-desc span[style*="font-size: 10px"] { font-size: .85rem !important; font-weight: 600; }

/* page « Produits » : les vignettes deviennent des cartes */
.category-desc td > a > img[width="134"],
.category-desc td > a > img[src*="_new.png"] {
  border-radius: 12px;
  box-shadow: 0 6px 16px rgb(0 0 0 / .18);
  transition: transform .15s, box-shadow .15s;
}
.category-desc td > a:hover > img { transform: translateY(-3px); box-shadow: 0 12px 24px rgb(0 0 0 / .25); }

/* listes de produits d'une rubrique : lignes en carte */
.category-desc td[style*="5171ae"] {
  background: linear-gradient(135deg, var(--t-souris), var(--t-anthracite)) !important;
  border-radius: 10px;
  padding: 4px !important;
}
.category-desc tr + tr td { border-top: 6px solid transparent; }
.category-desc td[style*="5171ae"] + td { padding-left: 14px !important; }
.category-desc td[style*="5171ae"] + td a { font-weight: 600; }

/* fiche produit : bouton de téléchargement et pages du PDF */
.com-content-article__body a.jce_file,
.com-content-article__body a[href$=".pdf"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.com-content-article__body p:has(> img ~ img) {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 12px;
  align-items: flex-start;
  font-size: 0;
}
.com-content-article__body p:has(> img ~ img) img {
  border-radius: 8px;
  box-shadow: 0 6px 18px rgb(29 43 62 / .12);
}

/* fil d'Ariane (masqué à l'installation du 1er habillage) */
.mod-breadcrumbs__wrapper .breadcrumb { background: none; padding: 0; font-size: .8rem; }

/* ---------- pied de page ---------- */
.container-footer {
  background: var(--t-anthracite);
  color: #e4e5e7;
  border-top: 5px solid var(--t-orange);
  padding: 34px 16px 26px;
  margin: 0;
}
.container-footer .grid-child {
  max-width: var(--t-largeur);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.container-footer ul.mod-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.container-footer ul.mod-menu li { margin: 0; }
.container-footer a { color: #fff; text-decoration: none !important; font-weight: 600; font-size: .92rem; }
.container-footer a:hover,
.container-footer li.active > a,
.container-footer li.current > a { color: #ffb347; }
.container-footer .mod-custom,
.container-footer .mod-custom div,
.container-footer .mod-custom span,
.container-footer .mod-custom p { color: #b8babe !important; text-align: center; padding: 0 !important; margin: 0; font-size: .82rem !important; line-height: 1.7; }

.back-to-top-link { background: var(--t-orange); border-radius: 50%; }

/* ---------- adaptations écran ---------- */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .container-header { background-size: auto 118px, auto, auto; background-position: right 0 bottom 8px, 0 0, 0 0; }
}
@media (max-width: 767.98px) {
  .container-header { --t-bandeau: 100px; --t-nav: 46px; }
  .container-header { background-size: auto 70px, auto, auto; background-position: right 4px bottom 6px, 0 0, 0 0; }
  .container-header .brand-logo { width: 190px; height: 56px; }
  .site-grid > .container-sidebar-left { padding-right: 12px !important; padding-left: 12px !important; }
  /* sur mobile, les drapeaux restent dans le bandeau orange, en haut à droite */
  .container-topbar { top: 8px; right: 8px; height: auto; }
  .mod-languages ul.lang-inline a { background: rgb(0 0 0 / .22); }
  .mod-languages ul.lang-inline { gap: 0; }
  .mod-languages ul.lang-inline a { padding: 5px 4px; }
  .mod-languages img { width: 20px; }
  .site-grid > .container-component { margin: 18px 0 28px; border-radius: 10px; }
}
@media (max-width: 480px) {
  .container-header .navbar-brand { align-items: flex-end; padding-bottom: 12px; }
  .container-header { background-image: none, repeating-linear-gradient(115deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 22px), linear-gradient(100deg, var(--t-souris-fonce) 0%, var(--t-souris) 50%, var(--t-souris-clair) 100%); }
  .container-header .brand-logo { width: 170px; height: 50px; }
}

/* ---------- centrage du contenu dans la carte blanche ---------- */
.container-component h1,
.container-component .page-header h1,
.container-component .page-header h2,
.com-content-category-blog > h1 { text-align: center; }
.container-component h1::after,
.container-component .page-header h1::after,
.container-component .page-header h2::after { left: 50%; transform: translateX(-50%); }
.category-desc > table,
.com-content-article__body > table,
.category-desc > div > table,
.com-content-article__body > div > table { margin-inline: auto; }
.com-content-article__body p:has(> img ~ img) { justify-content: center; }
.com-content-article__body > p:has(> img:only-child) { text-align: center; }
/* anciens retraits à gauche (page Contact) */
.com-content-article__body p[style*="padding-left"] { padding-left: 0 !important; text-align: center; }