/* Styles propres au site APHAR (en plus de tailwind.css, les styles compilés repris de l'ancien site). */

/* ---- polices (déclarées dans tailwind.css) */
.police-texte { font-family: __DM_Sans_0d7163, __DM_Sans_Fallback_0d7163; font-style: normal; }
.police-titres { --font-cormorant: "__Cormorant_Garamond_589abc", "__Cormorant_Garamond_Fallback_589abc"; }

/* ---- écran de chargement */
#chargement-site { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
  background: #fff; transition: opacity .4s ease; }
#chargement-site .chargement-site-contenu { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#chargement-site img { width: 150px; height: auto; }
#chargement-site .chargement-site-roue { width: 34px; height: 34px; border: 3px solid #e5e2d8; border-top-color: #3f3a2e;
  border-radius: 50%; animation: chargement-tourne .8s linear infinite; }
@keyframes chargement-tourne { to { transform: rotate(360deg); } }

/* ---- rideau de transition entre pages (liens marqués data-transition) */
#transition-page { position: fixed; inset: 0; background: #080808; z-index: 9999; transform: translateX(100%);
  pointer-events: none; will-change: transform; }

/* ---- menu : liste « Nos Marques » */
.menu-marques-liste { padding: 6px 0; }
.menu-marques-liste a { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; font-size: 14px;
  line-height: 20px; color: rgba(255,255,255,.6); transition: color .15s, background-color .15s; }
.menu-marques-liste a:hover { color: #fff; background: rgba(255,255,255,.06); }
.menu-marques-liste svg { width: 12px; height: 12px; opacity: .4; }
[data-menu-marques][data-ouvert] > button svg { transform: rotate(180deg); }

/* ---- bandeau des logos partenaires (défile en boucle) */
.logos-defilants { animation: logos-defilent 30s linear infinite; }
@keyframes logos-defilent { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- fenêtre « Nouveauté » */
#aphpromo { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 280px; max-width: calc(100vw - 36px);
  background: #0d0d0d; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .45s ease, transform .45s ease;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
#aphpromo.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#aphpromo .aphpromo-close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 24px; height: 24px; border-radius: 999px;
  border: 0; background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
#aphpromo .aphpromo-close:hover { background: rgba(255,255,255,.16); color: #fff; }
#aphpromo .aphpromo-link { display: flex; gap: 12px; align-items: center; padding: 14px; text-decoration: none; }
#aphpromo .aphpromo-img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; background: #000; }
#aphpromo .aphpromo-text { min-width: 0; }
#aphpromo .aphpromo-kicker { margin: 0 0 2px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d6ca97; }
#aphpromo .aphpromo-title { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }
#aphpromo .aphpromo-cta { margin: 0; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); }
#aphpromo .aphpromo-link:hover .aphpromo-cta { color: #d6ca97; }
@media (max-width: 480px) { #aphpromo { left: 12px; right: 12px; bottom: 12px; width: auto; } }

/* ---- accueil : la salle 3D en fond du haut de page (textes par-dessus, à gauche) */
.aphar-hero { position: relative; }
.aphar-hero > .salle-3d-fond { position: absolute; inset: 0; z-index: 0; }
/* un seul fond pour la salle 3D et l'équipe : noir, avec une lumière grise qui monte du bas de la salle
   et s'étend sous les personnages ; la salle 3D est transparente par-dessus */
.accueil-scene { position: relative; background: #000; isolation: isolate; }
.accueil-scene::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 62% 34% at 64% 50%, rgba(84,84,94,.95) 0%, rgba(30,30,35,.85) 42%, rgba(0,0,0,0) 100%); }
.accueil-scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), #000); }
.salle-3d-fond iframe { display: block; width: 100%; height: 100%; border: 0;  color-scheme: dark; }  /* même schéma que la page 3D, sinon le navigateur peint l'iframe en gris opaque */
/* fondu vers le noir du menu (haut) et de la section suivante (bas) */
.aphar-hero::before { content: ""; position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; }
.aphar-hero::before { top: 0; height: 120px; background: linear-gradient(to top, rgba(0,0,0,0), #000); }
/* le contenu reste au-dessus ; seuls ses liens prennent les clics, le reste va à la salle */
.aphar-hero > .container { position: relative; z-index: 1; pointer-events: none; }
.aphar-hero > .container a, .aphar-hero > .container button { pointer-events: auto; }
/* la colonne de droite est une zone vide : la salle se centre dessus */
.aphar-hero .zone-salle-3d { position: relative; }
.salle-3d-ouvrir { display: none; }
@media (max-width: 767px) {
  .aphar-hero .zone-salle-3d { height: 460px; margin-top: 40px; }
  /* téléphone : dans la page la salle n'est qu'une image (le défilement reste libre) ; le bouton l'ouvre en plein écran */
  .salle-3d-fond iframe { pointer-events: none; }
  .salle-3d-ouvrir { display: inline-flex; position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2;
    align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(124,92,255,.75);
    background: rgba(124,92,255,.22); color: #fff; font: inherit; font-size: 15px; white-space: nowrap;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: auto; }
}
.salle-3d-plein { position: fixed; inset: 0; z-index: 2147483000; background: #000; }
.salle-3d-plein iframe { display: block; width: 100%; height: 100%; border: 0; }
.salle-3d-fermer { position: absolute; top: 14px; right: 14px; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(20,20,24,.75); color: #fff; font-size: 22px; line-height: 1; }
html.salle-3d-ouverte, html.salle-3d-ouverte body { overflow: hidden !important; }

/* ---- accueil : l'équipe, juste sous le haut de page */
.accueil-equipe { position: relative; z-index: 1; background: transparent; overflow-x: clip; padding: 24px 0 40px !important; }
.accueil-equipe .equipe-personnages { position: relative; height: 360px; max-width: 760px; margin: 112px auto 0; }
@media (min-width: 768px) { .accueil-equipe .equipe-personnages { height: 648px; margin-top: 0; } }
@media (max-width: 767px) {
  .accueil-equipe .equipe-personnages { height: 230px; margin-top: 8px; }
  .accueil-equipe .equipe-personnages img { width: 33vw !important; transform: translate(-50%, 15%) !important; }
}

/* ---- accueil : survols des liens Castellini / HEKA */
.lien-decouvrir:hover { opacity: .7; }
.bouton-castellini:hover { transform: translateY(-1px); background: #3B82F6 !important; }

/* ---- accueil sur téléphone : Castellini et HEKA passent en une colonne, sans décor ni animation
   (règles reprises de l'ancien site, où elles visaient les sections par leur position dans la page) */
@media (max-width:767px) {
  main.aphar-home-page+footer,main.aphar-home-page>section:first-child~div,main.aphar-home-page>section:first-child~section{display:block!important}
  .section-heka{display:block!important;min-height:auto!important;padding:88px 24px 72px!important;overflow:hidden!important}
  .section-heka>a,.section-heka>div[style*="position:absolute;inset:0;display:flex"]{display:none!important}
  .section-heka>div[style*="top:clamp"]{position:static!important;margin:0 0 28px!important}
  .section-heka>div[style*="top:clamp"] img{height:64px!important;width:auto!important}
  .section-heka>div[style*="grid-template-columns:52% 48%"]{display:block!important;min-height:auto!important;padding:0!important}
  .section-heka>div[style*="grid-template-columns:52% 48%"]>div:nth-child(2){display:none!important}
  .section-heka h2{font-size:clamp(40px,12vw,52px)!important;line-height:1.02!important}
  .section-castellini{display:block!important;min-height:auto!important;padding:88px 24px 72px!important;overflow:hidden!important}
  .section-castellini>a,.section-castellini>div[style*="position:absolute;inset:0;display:flex"]{display:none!important}
  .section-castellini>div[style*="top: clamp"]{position:static!important;margin:0 0 28px!important;transform:none!important}
  .section-castellini>div[style*="top: clamp"] img{height:64px!important;width:auto!important}
  .section-castellini>div[style*="grid-template-columns:52% 48%"]{display:block!important;min-height:auto!important;padding:0!important}
  .section-castellini>div[style*="grid-template-columns:52% 48%"]>div:nth-child(2){display:none!important}
  .section-castellini h2{font-size:clamp(40px,12vw,52px)!important;line-height:1.02!important}
  .section-heka{display:block!important;min-height:auto!important;padding:0!important;overflow:hidden!important}
  .section-heka>div{min-height:auto!important;border-radius:0!important}
  .section-heka>div>a,.section-heka>div>div[style*="position:absolute;inset:0;pointer-events:none"]{display:none!important}
  .section-heka>div>div[style*="position:relative;z-index:2;display:grid"]{display:block!important;min-height:auto!important;padding:88px 24px 72px!important}
  .section-heka>div>div[style*="position:relative;z-index:2;display:grid"]>div:first-child{display:none!important}
  .section-heka>div>div[style*="position:relative;z-index:2;display:grid"]>div:nth-child(2){max-width:none!important;padding-left:0!important}
  .section-heka h2{font-size:clamp(42px,14vw,58px)!important;line-height:.98!important;letter-spacing:-.02em!important}
  .section-heka p{font-size:16px!important;line-height:1.65!important}
  .section-heka>div>div[style*="pointer-events: none"]{display:none!important}
  .section-heka h2{font-size:clamp(40px,13vw,52px)!important}
  .section-castellini,.section-castellini *,.section-heka,.section-heka *{opacity:1!important;transform:none!important;translate:none!important}
  .section-castellini>div[style*="grid-template-columns:52% 48%"]>div:nth-child(2),.section-castellini>div[style*="position:absolute;inset:0;display:flex"],.section-heka>div>div[style*="pointer-events: none"],.section-heka>div>div[style*="position:relative;z-index:2;display:grid"]>div:first-child{display:none!important}
  .section-heka h2{color:#f4f1ea!important}
  .section-castellini>a{position:relative!important;right:auto!important;top:auto!important;transform:none!important;display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:0!important;width:100%!important;min-height:54px!important;margin:32px 0 0!important;border-radius:12px!important;background:#fff!important;color:#000!important;font-size:15px!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;z-index:5!important;box-shadow:0 16px 44px rgba(0,0,0,.28)!important}
  .section-castellini>a>*{display:none!important}
  .section-castellini>a:after{content:"Découvrir Castellini"}
  .section-castellini{padding-bottom:156px!important}
  .section-castellini>a{position:absolute!important;left:24px!important;right:24px!important;bottom:72px!important;width:auto!important;margin:0!important}
  .aphar-hero div[style*="left:8%"]>img{transform:translate(-50%,28%)!important}
  .aphar-hero div[style*="left:36%"]>img{transform:translate(-50%,27%)!important}
  .aphar-hero div[style*="left:64%"]>img,.aphar-hero div[style*="left:92%"]>img{transform:translate(-50%,25.5%)!important}
}

/* ---- page Castellini : survols du catalogue */
.castellini-card:hover { background: rgba(43,111,237,0.04) !important; }
.castellini-card:hover > div:first-child { opacity: 1 !important; }
.castellini-card > div:nth-child(2):hover img { transform: scale(1.03) !important; }
.castellini-fiche:hover { color: #fff !important; background: #2b6fed !important; border-color: #2b6fed !important; }
.castellini-fiche:hover svg { transform: translateX(3px) !important; }
.castellini-catalogue-btn:hover { border-color: rgba(43,111,237,0.5) !important; color: #f5f5f5 !important; }
.castellini-devis:hover { background: #4a8ef5 !important; }

/* ---- fiches produits Castellini : survols */
.fiche-fil:hover { color: #f5f5f5 !important; }
.fiche-vignette:not(.est-active):hover { opacity: .8 !important; }
.fiche-photo:hover img { transform: scale(1.05) !important; }
.fiche-photo img { transition: transform .4s ease; }
.castellini-catalogue-btn:hover { border-color: rgba(43,111,237,0.5) !important; color: #f5f5f5 !important; }

/* ---- page Devis : champs, choix de produits, bouton (couleurs de la marque : --accent, --accent-vif) */
.devis-champ:focus-within { background: var(--accent-champ) !important; border-color: var(--accent) !important; }
.devis-champ:focus-within label { color: var(--accent-vif) !important; }
.devis-choix:hover { border-color: var(--accent-vif) !important; color: #f5f5f5 !important; }
.devis-choix.est-choisi { border-color: var(--accent) !important; color: #f5f5f5 !important; background: var(--accent-choix) !important; }
[data-devis] button[type="submit"]:hover { background: var(--accent-vif) !important; }
[data-devis] button[type="submit"]:hover svg { transform: translateX(3px) !important; }

/* ---- accueil, section 2 : « Notre équipe » (titre, puis nom et rôle au-dessus de chaque personnage) */
.accueil-equipe .equipe-titre { text-align: center; position: relative; z-index: 5; }
.equipe-surtitre { display: inline-flex; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); padding: 4px 12px;
  border-radius: 8px; font-size: 14px; letter-spacing: -.01em; color: rgba(255,255,255,.8); }
.accueil-equipe .equipe-titre h2 { margin-top: 14px; font-size: clamp(30px, 4vw, 48px); font-weight: 700; letter-spacing: -.03em;
  background: linear-gradient(to bottom, #fff, #a3a3a3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.equipe-noms { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 6; }
.equipe-nom { position: absolute; top: 0; transform: translateX(-50%); text-align: center; white-space: nowrap;
  padding: 8px 14px; border-radius: 12px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.equipe-nom strong { display: block; font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.equipe-nom span { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.6); }
@media (min-width: 768px) { .accueil-equipe .equipe-personnages { margin-top: 24px; } }
@media (max-width: 767px) {
  .equipe-nom { padding: 5px 8px; border-radius: 9px; }
  .equipe-nom span { white-space: normal; max-width: 21vw; }
  .equipe-nom strong { font-size: 12px; }
  .equipe-nom span { font-size: 10px; }
}
.accueil-equipe { padding-bottom: 88px !important; }
@media (max-width: 767px) { .accueil-equipe { padding-bottom: 56px !important; } }

/* ---- fiches produits « équipements » (outils/fiches.py) : même esprit que les fiches Castellini, --accent par fiche */
.fiche-equipement { position: relative; background: #080808; color: #f5f5f5; min-height: 100vh; }
.fe-grille { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-size: 60px 60px;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); }
.fe-contenu { position: relative; z-index: 1; }
.fe-fil { padding: 20px 80px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: #666; }
.fe-fil a { color: #666; text-decoration: none; } .fe-sep { opacity: .4; } .fe-actuel { color: #f5f5f5; }
.fe-haut { display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; border-bottom: 1px solid rgba(255,255,255,.1); }
.fe-visuel { position: relative; background: #050505; border-right: 1px solid rgba(255,255,255,.1); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fe-visuel img { width: 100%; height: 100%; object-fit: cover; }
.fe-coin { position: absolute; width: 28px; height: 28px; }
.fe-coin-a { top: 20px; left: 20px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.fe-coin-b { bottom: 20px; right: 20px; border-bottom: 1px solid rgba(255,255,255,.2); border-right: 1px solid rgba(255,255,255,.2); }
.fe-ref { position: absolute; top: 20px; right: 20px; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(255,255,255,.1); padding: 5px 12px; background: rgba(8,8,8,.7); }
.fe-legende { position: absolute; bottom: 20px; left: 20px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.fe-infos { padding: 64px 72px; display: flex; flex-direction: column; justify-content: center; }
.fe-marque { font-size: 22px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 32px; }
.fe-type, .fe-titre-bloc { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.fe-infos h1 { font-size: clamp(48px, 6vw, 80px); font-weight: 800; line-height: .9; letter-spacing: -.02em; margin-bottom: 6px; }
.fe-sous-titre { font-size: clamp(20px, 2.5vw, 32px); font-weight: 300; font-style: italic; color: var(--accent); letter-spacing: .04em; margin-bottom: 32px; }
.fe-texte { font-size: 15px; font-weight: 300; color: #8a8a8a; line-height: 1.8; max-width: 460px; margin-bottom: 40px; }
.fe-etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px; }
.fe-etiquette { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 6px 14px; border: 1px solid rgba(255,255,255,.12); color: #777; }
.fe-etiquette-forte { border-color: var(--accent-doux); color: var(--accent); }
.fe-prix { padding-top: 40px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fe-petit { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: #666; margin-bottom: 4px; }
.fe-bas { margin: 4px 0 0; letter-spacing: .04em; text-transform: none; }
.fe-montant { font-size: 48px; font-weight: 700; line-height: 1; }
.fe-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.fe-actions-ligne { flex-direction: row; align-items: center; gap: 16px; flex-shrink: 0; }
.fe-devis { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  padding: 16px 32px; text-decoration: none; white-space: nowrap; transition: filter .2s; }
.fe-devis:hover { filter: brightness(1.15); }
.fe-secondaire { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.1); color: #777; font-size: 12px; font-weight: 500;
  padding: 12px 24px; text-decoration: none; white-space: nowrap; transition: all .2s; }
.fe-details { display: grid; grid-template-columns: 1fr 1fr; }
.fe-specs { padding: 64px 80px; border-right: 1px solid rgba(255,255,255,.1); }
.fe-points { padding: 64px 80px; }
.fe-details .fe-titre-bloc { margin-bottom: 36px; }
.fe-specs table { width: 100%; border-collapse: collapse; }
.fe-specs tr { border-bottom: 1px solid rgba(255,255,255,.06); }
.fe-specs td { padding: 14px 0; font-size: 13px; font-weight: 300; color: #f5f5f5; vertical-align: top; }
.fe-specs td:first-child { padding-right: 20px; width: 40%; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #666; }
.fe-note { margin-top: 20px; font-size: 12px; color: #555; line-height: 1.6; }
.fe-point { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; }
.fe-num { font-size: 28px; font-weight: 700; color: var(--accent-doux); line-height: 1; flex-shrink: 0; width: 32px; margin-top: 2px; }
.fe-point-titre { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.fe-point-texte { font-size: 13px; font-weight: 300; color: #777; line-height: 1.6; }
.fe-fin { padding: 72px 80px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.fe-fin h3 { font-size: clamp(28px, 3vw, 48px); font-weight: 700; line-height: 1.05; }
.fe-fin em { font-style: italic; font-weight: 300; color: var(--accent); }
@media (max-width: 900px) {
  .fe-fil { padding: 16px 20px; }
  .fe-haut, .fe-details { grid-template-columns: 1fr; }
  .fe-visuel { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); aspect-ratio: 4 / 3; }
  .fe-infos, .fe-specs, .fe-points { padding: 40px 20px; }
  .fe-specs { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .fe-actions { align-items: stretch; width: 100%; }
  .fe-devis, .fe-secondaire { justify-content: center; }
  .fe-fin { padding: 48px 20px; }
  .fe-actions-ligne { flex-direction: column; align-items: stretch; width: 100%; }
  .fe-montant { font-size: 40px; }
}

/* ---- catalogues de marques (outils/catalogues.py) : reprend les styles .fe-* des fiches */
.cat-entete { padding: 72px 80px 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
.cat-entete h1 { font-size: clamp(36px, 5vw, 68px); font-weight: 800; line-height: .98; letter-spacing: -.02em; max-width: 900px; margin: 6px 0 22px; }
.cat-entete .fe-texte { margin-bottom: 0; max-width: 620px; }
.cat-star { display: grid; grid-template-columns: 1.15fr 1fr; border-bottom: 1px solid rgba(255,255,255,.1); }
.cat-star-3d { position: relative; min-height: 600px; border-right: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(ellipse 70% 55% at 50% 72%, rgba(84,84,94,.55), rgba(20,20,24,.6) 50%, #050505 100%); }
.cat-star-3d iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; color-scheme: dark; }
.cat-astuce { position: absolute; left: 20px; right: 20px; bottom: 18px; text-align: center; font-size: 12px; color: rgba(255,255,255,.5); pointer-events: none; }
.cat-star-nom { font-size: clamp(44px, 5.5vw, 76px); font-weight: 800; line-height: .9; letter-spacing: -.02em; margin-bottom: 6px; }
.cat-points { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 10px; }
.cat-points li { position: relative; padding-left: 22px; font-size: 14px; color: #bbb; }
.cat-points li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 1px; background: var(--accent); }
.cat-actions { flex-wrap: wrap; }
.cat-gamme { padding: 64px 80px; }
.cat-gamme .fe-titre-bloc { margin-bottom: 28px; }
.cat-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.cat-carte { background: #0b0b0b; display: flex; flex-direction: column; transition: background .2s; }
.cat-carte:hover { background: #111; }
.cat-carte-visuel { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 50% 60%, rgba(255,255,255,.07), transparent 70%); border-bottom: 1px solid rgba(255,255,255,.06); }
.cat-carte-visuel img { max-width: 78%; max-height: 82%; object-fit: contain; transition: transform .4s ease; }
.cat-carte:hover .cat-carte-visuel img { transform: scale(1.04); }
.cat-chiffre { font-size: clamp(40px, 4.5vw, 64px); font-weight: 800; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px var(--accent-doux); }
.cat-carte-corps { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.cat-carte-marque { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.cat-carte h3 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.cat-carte p { font-size: 13px; font-weight: 300; color: #888; line-height: 1.6; flex: 1; }
.cat-carte-bas { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.cat-carte-bas span { color: #666; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
.cat-carte-bas a { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); text-decoration: none; font-weight: 600; }
@media (max-width: 900px) {
  .cat-entete { padding: 48px 20px 36px; }
  .cat-star { grid-template-columns: 1fr; }
  .cat-star-3d { min-height: 420px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .cat-gamme { padding: 44px 20px; }
  .cat-cartes { grid-template-columns: 1fr; }
}

/* ---- modèle 3D manipulable dans les fiches (salle 3D en mode ?integre&seul=...) */
.fe-visuel:has(.fe-3d) { background: radial-gradient(ellipse 70% 55% at 50% 72%, rgba(84,84,94,.55), rgba(20,20,24,.6) 50%, #050505 100%); }
.fe-3d, .fiche-3d { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; color-scheme: dark; }
.fe-visuel .fe-coin, .fe-visuel .fe-ref, .fe-visuel .fe-legende { pointer-events: none; z-index: 1; }
.fiche-castellini [data-fiche-image] { position: relative; }
.fiche-3d { background: radial-gradient(ellipse 70% 55% at 50% 62%, rgba(84,84,94,.55), rgba(20,20,24,.6) 50%, #050505 100%); }
.fiche-3d-astuce { position: absolute; left: 0; right: 0; top: 24px; text-align: center; margin: 0; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.45); pointer-events: none; z-index: 1; }
.fiche-vignette-3d { display: flex; align-items: center; justify-content: center; background: #111;
  font-size: 15px; font-weight: 800; letter-spacing: .08em; color: #2b6fed; }

/* ---- fiches Castellini sur téléphone : leur mise en page est en styles en ligne, on la replie en une colonne */
@media (max-width: 900px) {
  .fiche-castellini nav[style] { padding: 16px 20px !important; flex-wrap: wrap; }
  .fiche-castellini section[style*="grid-template-columns"] { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .fiche-castellini section[style*="grid-template-columns"] > div[style*="border-right"] { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.1); }
  .fiche-castellini section > div[style*="position:relative"][style*="overflow:hidden"] { aspect-ratio: 1 / 1; }
  .fiche-castellini [style*="padding:64px 72px"], .fiche-castellini [style*="padding:64px 80px"] { padding: 40px 20px !important; }
  .fiche-castellini [style*="padding:72px 80px"] { padding: 48px 20px !important; flex-direction: column; align-items: stretch !important; }
  .fiche-castellini [style*="justify-content:space-between"] { flex-wrap: wrap; gap: 20px; }
  .fiche-castellini [style*="align-items:flex-end"][style*="flex-direction:column"],
  .fiche-castellini [style*="padding:72px 80px"] [style*="flex-shrink:0"] { align-items: stretch !important; width: 100%; flex-direction: column; }
  .fiche-castellini .castellini-devis, .fiche-castellini .castellini-catalogue-btn { justify-content: center; }
  .fiche-castellini [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  .fiche-castellini table td { overflow-wrap: anywhere; }
  .fe-visuel:has(.fe-3d) { aspect-ratio: 1 / 1; }
  .fiche-3d-astuce { display: none !important; }
}