body.ce-kit-78 p{margin-bottom:68px;}/* Start custom CSS for page-settings *//* =========================================================
CHAPITEAU RÉUNION — CSS GLOBAL (COMPLET / PROPRE / STABLE)
Objectif : un seul CSS, sans doublons, sans patches contradictoires.
Signature : dégradé mauve → rose → bleu (vif), fond épuré (pas de gros aplats).
========================================================= */

/* =========================
VARIABLES
========================= */
:root{
--cr-black:#0b0b0f;
--cr-text:#0b0b18;
--cr-muted:#2c2f44;

/* Signature HOME (d’après tes captures : mauve/rose/bleu) */
--cr-blue:#4C2AC8;
--cr-mauve:#8B6CF6;
--cr-pink:#FF40B4;

--cr-bg-page:#f4f5f8;
--cr-bg-card:#ffffff;
--cr-border:rgba(0,0,0,.12);

--cr-radius-lg:28px;
--cr-radius-md:20px;

/* ordre demandé : mauve → rose → bleu */
--cr-sig:linear-gradient(90deg, var(--cr-mauve) 0%, var(--cr-pink) 50%, var(--cr-blue) 100%);
}

/* =========================
GLOBAL
========================= */
*{ box-sizing:border-box; }

html, body{
margin:0;
padding:0;
overflow-x:hidden;
}

html{
scroll-behavior:smooth;
scrollbar-width:thin;
scrollbar-color:rgba(139,108,246,.8) rgba(0,0,0,.08);
}

body{
background:var(--cr-bg-page);
color:var(--cr-text);
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
font-weight:650; /* plus “gras” global */
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

/* Conteneur */
.cr{
max-width:1100px;
margin:0 auto;
padding:24px 18px 56px;
position:relative;
z-index:2;
overflow-x:hidden;
}

/* Anti overflow fréquent (grid/flex) */
.cr *{ min-width:0; }

/* =========================
SECTIONS / CARTES
========================= */
.cr-section,
.cr-card{
position:relative;
background:var(--cr-bg-card);
border:1px solid var(--cr-border);
border-radius:var(--cr-radius-lg);
padding:28px;
margin:0 0 32px;
box-shadow:0 18px 50px rgba(0,0,0,.08);
z-index:2;
overflow:hidden;
}

/* =========================
TITRES & TEXTES
========================= */
.cr-h1,.cr-h2,.cr-h3,.cr-title{
margin:0 0 10px;
color:var(--cr-black);
text-align:center;
}

.cr-h1{
font-size:clamp(26px,4vw,38px);
font-weight:950;
line-height:1.15;
letter-spacing:-0.01em;
}

.cr-h2{
font-size:clamp(20px,3vw,28px);
font-weight:900;
line-height:1.22;
}

.cr-h3{
font-size:clamp(16px,2.2vw,20px);
font-weight:900;
line-height:1.25;
}

.cr-title{
font-size:clamp(22px,3vw,32px);
font-weight:950;
line-height:1.15;
letter-spacing:-0.01em;
}

.cr-title--onDark{ color:#fff; }

.cr-titleBar{
width:140px;
height:4px;
border-radius:999px;
margin:0 auto 16px;
background:var(--cr-sig);
}

.cr-titleBar--onDark{
box-shadow:0 10px 26px rgba(0,0,0,.7);
}

.cr-trait{
width:120px;
height:4px;
border-radius:999px;
margin:12px auto 18px;
background:var(--cr-sig);
box-shadow:0 10px 22px rgba(76,42,200,.18);
}

.cr p,
.cr-p{
font-size:1.05rem;
font-weight:650; /* plus lisible */
line-height:1.75;
color:var(--cr-text);
margin:0 0 14px;
}

.cr p strong,
.cr-p strong{
font-weight:950;
color:var(--cr-black);
}

/* =========================
KICKER
========================= */
.cr-kicker{
font-weight:950;
letter-spacing:.18em;
text-transform:uppercase;
font-size:12px;
color:var(--cr-black);
opacity:.78;
margin:0 0 10px;
display:flex;
gap:10px;
align-items:center;
justify-content:flex-start;
}
.cr-kicker--onDark{ color:rgba(255,255,255,.86); }

/* =========================
BADGE 974
========================= */
.cr-badge{
display:inline-flex;
align-items:center;
gap:8px;
border:1px solid rgba(0,0,0,.14);
border-radius:999px;
padding:6px 12px;
font-size:12px;
font-weight:950;
color:var(--cr-black);
background:#fff;
margin:0 0 12px;
}
.cr-dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--cr-pink);
}

/* =========================
LISTES
========================= */
.cr-list{
margin:0;
padding-left:20px;
font-size:15px;
font-weight:650;
line-height:1.7;
}
.cr-list li{ margin:0 0 6px; }

/* =========================
TAGS / BOX / CALLOUT
========================= */
.cr-tag{
display:inline-flex;
align-items:center;
gap:8px;
font-size:11px;
font-weight:950;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(11,11,15,.82);
margin:0 0 10px;
}

.cr-boxN,
.cr-boxI{
border-radius:18px;
padding:18px 16px;
margin:14px 0 0;
border:1px solid rgba(0,0,0,.12);
background:#fff;
box-shadow:0 10px 26px rgba(0,0,0,.06);
position:relative;
overflow:hidden;
}

.cr-boxN::before,
.cr-boxI::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:6px;
background:linear-gradient(180deg, rgba(255,64,180,.26), rgba(76,42,200,.22));
}

.cr-boxI{
background:linear-gradient(180deg, rgba(255,64,180,.06), rgba(139,108,246,.06));
border-color:rgba(76,42,200,.18);
}

.cr-callout{
border-radius:18px;
padding:18px 16px;
margin:14px 0 0;
border:1px solid rgba(0,0,0,.12);
background:linear-gradient(180deg, rgba(76,42,200,.05), rgba(255,64,180,.04));
box-shadow:0 10px 26px rgba(0,0,0,.06);
position:relative;
overflow:hidden;
}

.cr-callout::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:6px;
background:var(--cr-sig);
opacity:.55;
}

.cr-callout-title{
font-size:11px;
font-weight:950;
letter-spacing:.14em;
text-transform:uppercase;
margin:0 0 10px;
color:rgba(11,11,15,.82);
}
.cr-callout-text{
font-size:1.05rem;
font-weight:650;
line-height:1.75;
margin:0;
}

/* =========================
BOUTONS (UN SEUL STYLE)
========================= */
.cr-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 22px;
border-radius:999px;
border:none;
background:var(--cr-sig);
color:#fff !important;
font-size:14px;
font-weight:900;
letter-spacing:.10em;
text-transform:uppercase;
text-decoration:none;
box-shadow:0 12px 30px rgba(76,42,200,.28);
transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease;
white-space:nowrap;
}
.cr-btn:hover{
transform:translateY(-1px);
box-shadow:0 14px 34px rgba(0,0,0,.26);
opacity:.98;
filter:saturate(1.05);
}

/* Bouton fantôme (pour “revenir en haut”) */
.cr-ghost{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 18px;
border-radius:999px;
border:1px solid rgba(0,0,0,.14);
background:#fff;
color:rgba(11,11,15,.78) !important;
font-size:13px;
font-weight:900;
letter-spacing:.10em;
text-transform:uppercase;
text-decoration:none;
transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
white-space:nowrap;
}
.cr-ghost:hover{
transform:translateY(-1px);
box-shadow:0 10px 26px rgba(0,0,0,.10);
}

/* Rangée actions */
.cr-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:12px;
}

/* =========================
ACCORDÉON
========================= */
.cr-accordion{ margin-top:10px; }

.cr-acc-item{
border:1px solid rgba(0,0,0,.10);
border-radius:18px;
background:#fff;
box-shadow:0 10px 24px rgba(0,0,0,.05);
margin:0 0 12px;
overflow:hidden;
}

.cr-acc-sum{
list-style:none;
cursor:pointer;
padding:16px 16px;
font-family:inherit;
font-size:clamp(15px,1.15vw,16px);
font-weight:950;
line-height:1.25;
color:var(--cr-black);
display:flex;
align-items:center;
gap:12px;
user-select:none;
position:relative;
}
.cr-acc-sum::-webkit-details-marker{ display:none; }

.cr-acc-sum::after{
content:"";
margin-left:auto;
width:10px;
height:10px;
border-right:2px solid rgba(11,11,15,.55);
border-bottom:2px solid rgba(11,11,15,.55);
transform:rotate(45deg);
transition:transform .18s ease, opacity .18s ease;
opacity:.9;
}
details[open] > .cr-acc-sum::after{ transform:rotate(-135deg); }

.cr-acc-sum::before{
content:"";
width:10px;
height:10px;
border-radius:50%;
background:var(--cr-sig);
box-shadow:0 10px 22px rgba(76,42,200,.20);
flex:0 0 auto;
}

.cr-acc-body{
padding:0 16px 16px;
overflow-wrap:anywhere;
word-break:break-word;
}

.cr-acc-body p,
.cr-acc-body li{
font-size:1.05rem;
font-weight:650;
line-height:1.75;
color:var(--cr-text);
}

/* =========================
TRIPTYQUE
========================= */
.cr-triptychGrid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}

.cr-triptychCard{
border-radius:18px;
background:#fff;
border:1px solid rgba(0,0,0,.08);
box-shadow:0 12px 28px rgba(0,0,0,.06);
overflow:hidden;
display:flex;
flex-direction:column;
}

.cr-triptychMedia{
aspect-ratio:1/1;
background:#0b0b0f;
}
.cr-triptychMedia img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.cr-triptychBody{ padding:10px 12px 14px; }

.cr-triptychTitle{
font-size:15px;
font-weight:950;
margin:0 0 4px;
}
.cr-triptychText{
font-size:13px;
margin:0;
font-weight:650;
color:var(--cr-muted);
}

/* =========================
GAMMES (fond noir) + CARTES
========================= */
.cr-gammes{
background:#05040a;
border:none;
box-shadow:0 24px 60px rgba(0,0,0,.6);
position:relative;
overflow:hidden;
}

/* 2 collines, volontaire, mais discret */
.cr-gammes::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(760px 520px at 25% -10%, rgba(139,108,246,.22), transparent 70%),
radial-gradient(820px 560px at 75% -12%, rgba(255,64,180,.18), transparent 72%);
opacity:.42;
pointer-events:none;
}

.cr-gamme-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:28px;
}

.cr-gamme{
display:flex;
flex-direction:column;
border-radius:18px;
overflow:hidden;
background:#fff;
border:1px solid rgba(76,42,200,.18);
box-shadow:0 16px 42px rgba(0,0,0,.16);
text-decoration:none;
transition:transform .2s ease, box-shadow .2s ease;
color:inherit;
}

.cr-gamme:hover{
transform:translateY(-4px);
box-shadow:0 22px 60px rgba(0,0,0,.22);
}

.cr-gamme-media{
background:#05040a;
aspect-ratio:1/1;
}
.cr-gamme-media img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}

/* Bloc texte */
.cr-gamme-head,
.cr-gamme-body{
background:linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%);
padding:14px 16px;
position:relative;
text-align:left;
}

.cr-gamme-head{
border-bottom:1px solid rgba(0,0,0,.08);
}

.cr-gamme-title{
margin:0 0 12px;
font-size:22px;
font-weight:950;
letter-spacing:-0.01em;
line-height:1.12;
color:#111125;
position:relative;
padding-bottom:12px;
}
.cr-gamme-title::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:84px;
height:3px;
border-radius:999px;
background:var(--cr-sig);
opacity:.95;
}

.cr-gamme-sub{
display:inline-block;
margin:10px 0 0;
padding:6px 10px;
font-size:13px;
font-weight:950;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(17,17,37,.74);
background:rgba(76,42,200,.06);
border:1px solid rgba(76,42,200,.16);
border-radius:12px;
}

.cr-gamme-desc{
margin:12px 0 12px;
font-size:15px;
line-height:1.7;
font-weight:700;
color:rgba(11,11,24,.88);
}

.cr-gamme-points{
margin:0;
padding:0;
list-style:none;
display:flex;
flex-direction:column;
gap:8px;
}

.cr-gamme-points li{
display:grid;
grid-template-columns:10px 1fr;
gap:10px;
align-items:start;
padding:10px 0;
border-top:1px solid rgba(0,0,0,.08);
font-size:14px;
font-weight:900;
line-height:1.45;
color:rgba(11,11,24,.86);
}

.cr-gamme-points li:first-child{
border-top:none;
padding-top:0;
}

.cr-gamme-points li::before{
content:"";
width:8px;
height:8px;
margin-top:5px;
border-radius:50%;
background:rgba(255,64,180,.95);
}

/* =========================
CATCARDS & MEDIACARDS
========================= */
.cr-catcard,
.cr-mediaCard{
display:grid;
grid-template-columns:1fr 1.1fr;
gap:18px;
align-items:stretch;
}

.cr-catcard-media,
.cr-mediaCardImg{
border-radius:18px;
overflow:hidden;
background:#0b0b0f;
aspect-ratio:1/1;
}

.cr-catcard-media img,
.cr-mediaCardImg img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}

.cr-catcard-body,
.cr-mediaCardBody{
display:flex;
flex-direction:column;
justify-content:center;
gap:8px;
}

.cr-catcard-title,
.cr-mediaCardTitle{
font-size:18px;
font-weight:950;
}

.cr-catcard-text,
.cr-mediaCardText{
font-size:14px;
font-weight:650;
color:var(--cr-muted);
line-height:1.6;
}

/* =========================
PILLS (sommaire accessoires)
========================= */
.cr-pillGrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.cr-pill{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:14px 14px;
border-radius:999px;
border:1px solid rgba(0,0,0,.12);
background:#fff;
text-decoration:none;
color:rgba(11,11,15,.86);
font-weight:950;
letter-spacing:.06em;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cr-pill:hover{
transform:translateY(-1px);
box-shadow:0 10px 26px rgba(0,0,0,.10);
border-color:rgba(255,64,180,.35);
}

/* =========================
CONTACT
========================= */
.cr-contact{ text-align:center; }

.cr-call{
display:inline-flex;
align-items:center;
justify-content:center;
gap:14px;
padding:16px 28px;
border-radius:999px;
background:var(--cr-sig);
color:#fff !important;
font-weight:950;
letter-spacing:.14em;
text-transform:uppercase;
margin:10px 0 16px;
text-decoration:none;
box-shadow:0 15px 38px rgba(76,42,200,.4);
white-space:nowrap;
}

.cr-callLabel{ font-size:12px; }
.cr-callNum{ font-size:20px; }

.cr-contact-actions{
display:flex;
justify-content:center;
margin-bottom:8px;
}

.cr-top{
font-size:12px;
font-weight:900;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--cr-muted);
text-decoration:none;
}

/* =========================
DOUBLE BARRE
========================= */
.cr-sigBars{
position:relative;
width:100%;
height:34px;
margin:34px 0 18px;
overflow:hidden;
}

.cr-sigBars .cr-sigBar{
position:absolute;
width:170px;
height:12px;
border-radius:999px;
opacity:.90;
background:var(--cr-sig);
filter:saturate(1.05);
will-change:transform, opacity;
}

.cr-sigBars .cr-sigBar--left{
left:50%;
top:28%;
transform:translate3d(-50%,-50%,0);
animation:crSigSlideLeft 2.8s linear infinite;
}

.cr-sigBars .cr-sigBar--right{
right:50%;
top:72%;
transform:translate3d(50%,-50%,0);
animation:crSigSlideRight 2.8s linear infinite;
}

@keyframes crSigSlideLeft{
0%{ transform:translate3d(-50%,-50%,0); opacity:.95; }
100%{ transform:translate3d(-260%,-50%,0); opacity:.25; }
}
@keyframes crSigSlideRight{
0%{ transform:translate3d(50%,-50%,0); opacity:.95; }
100%{ transform:translate3d(260%,-50%,0); opacity:.25; }
}

/* =========================
FONDS SIGNATURE (discrets)
========================= */
.cr-bg-a{ background:linear-gradient(180deg, rgba(139,108,246,.08), rgba(76,42,200,.06)); }
.cr-bg-b{ background:linear-gradient(180deg, rgba(255,64,180,.08), rgba(139,108,246,.06)); }
.cr-bg-c{ background:linear-gradient(180deg, rgba(76,42,200,.10), rgba(11,11,15,.02)); }
.cr-bg-d{ background:linear-gradient(180deg, rgba(255,64,180,.06), rgba(139,108,246,.06), rgba(76,42,200,.05)); }
.cr-bg-e{ background:linear-gradient(180deg, #f7f7fa, #ececf3); }

/* =========================
HERO — SCÈNE (4 CONES) + ZOOM
========================= */
.cr-heroVisual{ padding:0; overflow:hidden; }

.cr-heroImgWrap{
position:relative;
overflow:hidden;
isolation:isolate;
border-radius:var(--cr-radius-lg);
border:1px solid rgba(0,0,0,.10);
box-shadow:0 18px 50px rgba(0,0,0,.10);
}

.cr-heroOverlay{
position:absolute;
inset:0;
pointer-events:none;
overflow:hidden;
background:transparent;
}

.cr-heroImg{
display:block;
width:100%;
height:auto;
transform-origin:50% 40%;
animation:crHeroZoom 7.2s ease-in-out infinite;
will-change:transform;
}

@keyframes crHeroZoom{
0%   { transform:scale(1) translateY(0); }
40%  { transform:scale(1.055) translateY(-0.6%); }
75%  { transform:scale(1.035) translateY(-0.2%); }
100% { transform:scale(1) translateY(0); }
}

.cr-heroScene{
position:absolute;
inset:0;
z-index:7;
pointer-events:none;
overflow:hidden;
background:transparent;
}

.cr-heroSource{
position:absolute;
left:50%;
top:14%;
transform:translate(-50%,-50%);
width:14px;
height:14px;
border-radius:50%;
background:radial-gradient(circle,
rgba(255,255,255,1) 0%,
rgba(255,255,255,.55) 26%,
rgba(255,255,255,0) 70%);
opacity:.95;
box-shadow:
0 0 18px rgba(255,255,255,.28),
0 0 34px rgba(139,108,246,.22),
0 0 48px rgba(76,42,200,.18);
animation:crSourcePulse 1.8s ease-in-out infinite;
will-change:transform, opacity;
}

@keyframes crSourcePulse{
0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.82; }
50%{ transform:translate(-50%,-50%) scale(1.18); opacity:1; }
}

.cr-cone{
position:absolute;
left:50%;
top:14%;
width:1100px;
height:900px;
transform-origin:50% 0%;
transform:translateX(-50%) rotate(0deg);
opacity:0;
filter:blur(12px);
mix-blend-mode:screen;
-webkit-clip-path:polygon(50% 0%, 52.8% 0%, 100% 100%, 0% 100%, 47.2% 0%);
clip-path:polygon(50% 0%, 52.8% 0%, 100% 100%, 0% 100%, 47.2% 0%);
will-change:transform, opacity;
pointer-events:none;
background-repeat:no-repeat;
background-color:transparent;
}

.cr-cone--white{
background:radial-gradient(70% 92% at 50% 0%,
rgba(255,255,255,.30) 0%,
rgba(255,255,255,.12) 22%,
rgba(255,255,255,0) 68%);
animation:crConeWhite 3.2s ease-in-out infinite;
}
.cr-cone--blue{
background:radial-gradient(70% 92% at 50% 0%,
rgba(80,140,255,.36) 0%,
rgba(80,140,255,.14) 26%,
rgba(80,140,255,0) 72%);
animation:crConeBlue 3.6s ease-in-out infinite;
}
.cr-cone--mauve{
background:radial-gradient(70% 92% at 50% 0%,
rgba(139,108,246,.38) 0%,
rgba(139,108,246,.15) 26%,
rgba(139,108,246,0) 72%);
animation:crConeMauve 3.9s ease-in-out infinite;
}
.cr-cone--violet{
background:radial-gradient(70% 92% at 50% 0%,
rgba(76,42,200,.40) 0%,
rgba(76,42,200,.16) 26%,
rgba(76,42,200,0) 74%);
animation:crConeViolet 4.2s ease-in-out infinite;
}

@keyframes crConeWhite{
0%{ opacity:0; transform:translateX(-50%) rotate(-5deg) scaleY(.96); }
18%{ opacity:.42; }
50%{ opacity:.62; transform:translateX(-50%) rotate(6deg) scaleY(1.03); }
74%{ opacity:.28; }
100%{ opacity:0; transform:translateX(-50%) rotate(-5deg) scaleY(.96); }
}
@keyframes crConeBlue{
0%{ opacity:0; transform:translateX(-50%) rotate(-13deg) scaleY(.94); }
20%{ opacity:.42; }
52%{ opacity:.62; transform:translateX(-50%) rotate(-2deg) scaleY(1.04); }
78%{ opacity:.26; }
100%{ opacity:0; transform:translateX(-50%) rotate(-13deg) scaleY(.94); }
}
@keyframes crConeMauve{
0%{ opacity:0; transform:translateX(-50%) rotate(8deg) scaleY(.94); }
20%{ opacity:.40; }
56%{ opacity:.60; transform:translateX(-50%) rotate(16deg) scaleY(1.05); }
80%{ opacity:.24; }
100%{ opacity:0; transform:translateX(-50%) rotate(8deg) scaleY(.94); }
}
@keyframes crConeViolet{
0%{ opacity:0; transform:translateX(-50%) rotate(18deg) scaleY(.94); }
22%{ opacity:.38; }
58%{ opacity:.58; transform:translateX(-50%) rotate(4deg) scaleY(1.06); }
82%{ opacity:.22; }
100%{ opacity:0; transform:translateX(-50%) rotate(18deg) scaleY(.94); }
}

/* halos recentrés */
.cr-halo{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.halo-1{ background:radial-gradient(820px 380px at 50% 14%, rgba(76,42,200,.42), transparent 70%); }
.halo-2{ background:radial-gradient(820px 380px at 50% 14%, rgba(255,64,180,.34), transparent 70%); }
.halo-3{ background:radial-gradient(980px 460px at 50% 14%, rgba(139,108,246,.30), transparent 72%); }

/* Effets optionnels (si présents en HTML) */
.cr-veilBiais{
position:absolute; inset:-10%;
background:linear-gradient(110deg, rgba(255,255,255,.08), rgba(255,255,255,0) 55%);
transform:rotate(-6deg);
z-index:5;
pointer-events:none;
}

.cr-beam{
position:absolute;
inset:0;
pointer-events:none;
z-index:5;
}
.cr-beam.beam-a{
background:radial-gradient(780px 360px at 50% 12%, rgba(255,64,180,.10), transparent 70%);
}

.cr-shine{
position:absolute;
inset:-20%;
pointer-events:none;
z-index:5;
mix-blend-mode:screen;
opacity:.35;
}
.cr-shine.shine-a{
background:radial-gradient(400px 280px at 30% 10%, rgba(255,255,255,.30), transparent 65%);
}
.cr-shine.shine-b{
background:radial-gradient(420px 300px at 70% 18%, rgba(255,255,255,.22), transparent 66%);
}

.cr-voileMulti{
position:absolute; inset:0; z-index:5; pointer-events:none;
}
.cr-voileMulti .beamX{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 60%);
}

/* =========================
COMPARATIF — TABLE SCROLL
========================= */
.cr-compareHint{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:10px 14px;
border-radius:999px;
font-size:12px;
font-weight:950;
letter-spacing:.14em;
text-transform:uppercase;
color:#fff;
background:var(--cr-sig);
box-shadow:0 14px 36px rgba(76,42,200,.25);
margin:0 0 12px;
}

.cr-compareRow{
display:grid;
grid-template-columns:112px minmax(0,1fr);
gap:12px;
align-items:stretch;
}

.cr-sizes{
border-radius:14px;
overflow:hidden;
border:2px solid rgba(0,0,0,.06);
background:#fff;
box-shadow:0 0 20px 2px rgba(0,0,0,.06);
}

.cr-sizesHead{
background:#e7e4f3;
font-weight:950;
color:#2c2c2c;
text-align:center;
padding:15px;
font-size:15px;
}

.cr-sizeRow{
text-align:center;
padding:15px;
font-size:15px;
font-weight:950;
border-top:2px solid rgba(0,0,0,.06);
}
.cr-sizes .cr-sizeRow:nth-child(odd){ background:#ffffff; }
.cr-sizes .cr-sizeRow:nth-child(even){ background:#f7f6fb; }

.cr-tableScroll{
position:relative;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
min-width:0;
border-radius:14px;
border:2px solid rgba(0,0,0,.06);
background:#fff;
box-shadow:0 0 20px 2px rgba(0,0,0,.06);
}

.cr-table--prices{
width:max-content;
min-width:720px;
border-collapse:separate;
border-spacing:0;
}

.cr-table--prices th,
.cr-table--prices td{
border-right:2px solid rgba(0,0,0,.06);
border-bottom:2px solid rgba(0,0,0,.06);
padding:15px;
font-size:15px;
font-weight:900;
text-align:center;
white-space:nowrap;
}
.cr-table--prices thead th{
background:#e7e4f3;
font-weight:950;
color:#2c2c2c;
}
.cr-table--prices tbody tr:nth-child(odd) td{ background:#f7f6fb; }
.cr-table--prices tbody tr:nth-child(even) td{ background:#ffffff; }

.cr-tableScroll::after{
content:"";
position:absolute;
top:0;
right:0;
width:78px;
height:100%;
pointer-events:none;
background:linear-gradient(90deg,
rgba(255,255,255,0),
rgba(255,64,180,.10),
rgba(139,108,246,.14),
rgba(255,255,255,.98)
);
}

/* =========================
SCROLLBAR (optionnel)
========================= */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{
background:rgba(0,0,0,.08);
border-radius:999px;
}
::-webkit-scrollbar-thumb{
background:linear-gradient(180deg, rgba(139,108,246,.8), rgba(255,64,180,.8));
border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{
background:linear-gradient(180deg, rgba(139,108,246,1), rgba(255,64,180,1));
}

/* =========================
ACCESSOIRES — cache sous-catégories (si tu le veux partout)
========================= */
#subcategories,
.block-categories,
.category-subcategories,
.subcategories,
.subcategory-list{
display:none !important;
}

/* =========================
RESPONSIVE
========================= */
@media (max-width:480px){
.cr{ padding:18px 10px 40px; }

.cr-section,
.cr-card{
padding:20px 16px;
margin-bottom:26px;
}

.cr-triptychGrid{ grid-template-columns:1fr; }
.cr-gamme-grid{ grid-template-columns:1fr; gap:20px; }

.cr-catcard,
.cr-mediaCard{ grid-template-columns:1fr; }

.cr-catcard-body,
.cr-mediaCardBody{ margin-top:18px; }

.cr-call{ padding:16px 20px; }
.cr-callNum{ font-size:22px; }

.cr-sigBars .cr-sigBar{ width:140px; height:11px; }

/* Comparatif */
.cr-compareRow{
grid-template-columns:96px minmax(0,1fr);
gap:10px;
}
.cr-table--prices{ min-width:680px; }

/* GAMMES : monter lisibilité */
.cr-gamme-head,
.cr-gamme-body{ padding:18px 16px; }

.cr-gamme-title{
font-size:24px;
line-height:1.1;
}

.cr-gamme-sub{
font-size:13px;
padding:6px 10px;
}

.cr-gamme-desc{
font-size:16px;
line-height:1.75;
}

.cr-gamme-points li{
font-size:15px;
line-height:1.55;
padding:10px 0;
}

/* Hero */
.cr-cone{ width:780px; height:640px; filter:blur(11px); }
.cr-heroSource{ width:12px; height:12px; }
}

@media (min-width:481px) and (max-width:900px){
.cr-gamme-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.cr-gamme-title{ font-size:23px; }
.cr-gamme-sub{ font-size:13px; }
.cr-gamme-desc{ font-size:15.5px; }
.cr-gamme-points li{ font-size:14.5px; }
}

/* =========================================================
NOTE IMPORTANTE (direct)
Si tu as encore “chevauchement photo”, ce n’est pas le CSS :
c’est ton HTML HOME qui est cassé (tu as un “<!” qui coupe le DOM).
Corrige le HTML sinon rien ne sera stable.
========================================================= /
/ =========================================================
PATCH — MASQUER SOUS-CATÉGORIES + LISTE PRODUITS SUR PAGE CATÉGORIE
PrestaShop 1.7.x
========================================================= */

/* 1) Masquer le bloc sous-catégories */
body#category #subcategories,
body#category #subcategories + hr,
body#category .subcategories,
body#category .subcategory-list,
body#category .block-categories,
body#category .category-subcategories{
display:none !important;
}

/* 2) Masquer la grille/listing produits */
body#category #products,
body#category #js-product-list,
body#category #js-product-list-top,
body#category #js-product-list-bottom,
body#category .products,
body#category .products-selection,
body#category .product-list,
body#category .product-miniature,
body#category .pagination{
display:none !important;
}

/* 3) Optionnel : masquer aussi le compteur/tri si encore visible */
body#category .total-products,
body#category .sort-by-row,
body#category .products-sort-order{
display:none !important;
}

/* 4) Optionnel : enlever le padding/espaces si ta page devient “vide” /
body#category #content-wrapper,
body#category #main{
padding-bottom:0 !important;
}
/ =========================================================
PATCH — BOUTONS TROP GROS (TABLETTE + MOBILE)

HERO PHOTO TROP PETITE (format carré / presque carré)
À coller EN DERNIER dans ton CSS
========================================================= */

/* =========================

1. BOUTONS (CTA) — réduire sans casser le desktop
========================= */



/* Tablette */
@media (max-width: 1024px){
.cr .cr-btn{
padding:10px 16px !important;
font-size:13px !important;
letter-spacing:.10em !important;
}
.cr .cr-btn.cr-btn--mini{
padding:8px 11px !important;
font-size:11.5px !important;
letter-spacing:.08em !important;
}

.cr .cr-call{
padding:14px 20px !important;
}
.cr .cr-callNum{
font-size:18px !important;
}
}

/* Mobile */
@media (max-width: 480px){
.cr .cr-btn{
padding:9px 14px !important;
font-size:12.5px !important;
letter-spacing:.08em !important;
}
.cr .cr-btn.cr-btn--mini{
padding:8px 10px !important;
font-size:11.5px !important;
letter-spacing:.06em !important;
}

.cr .cr-call{
padding:13px 16px !important;
gap:10px !important;
}
.cr .cr-callLabel{
font-size:11px !important;
}
.cr .cr-callNum{
font-size:18px !important;
}
}

/* =========================
2) HERO — rendre l’image grande (carré / presque carré)
Sans dérégler le reste : on ne touche qu’au wrapper
========================= */

/* Base : wrapper “carré” + image en cover /
.cr .cr-heroImgWrap{
width:100%;
max-width:100%;
aspect-ratio: 1 / 1;          / carré /
border-radius: 26px;          / cohérent cartes */
overflow:hidden;
}

.cr .cr-heroImg{
width:100%;
height:100% !important;       /* prend toute la hauteur du carré /
object-fit:cover;             / rempli, pas “petit au milieu” */
object-position:center;
display:block;
}

/* Mobile : “presque carré” (un peu plus haut, plus impact) /
@media (max-width: 480px){
.cr .cr-heroImgWrap{
aspect-ratio: 4 / 5;        / quasi carré, plus “plein” */
border-radius: 22px;
}
}

/* Optionnel : si tu veux garder le zoom cinéma sans déformer /
.cr .cr-heroImg{
transform-origin:50% 40%;
}
/ =========================================================
HERO — VOIR LE CHAPITEAU EN ENTIER (sans crop)
À coller EN DERNIER dans ton CSS
========================================================= */

/* A) ZÉRO COUPE : on voit 100% (recommandé) /
.cr .cr-heroImgWrap{
width:100%;
max-width:100%;
aspect-ratio: 1 / 1;     / carré /
border-radius:26px;
overflow:hidden;
background:#05040a;      / fond propre derrière l’image (comme tes cartes) */
}

.cr .cr-heroImg{
width:100%;
height:100% !important;
object-fit:contain !important;  /* IMPORTANT : pas de coupe */
object-position:center;
display:block;
}

/* Mobile : un peu plus haut pour éviter l’effet “trop vide” */
@media (max-width:480px){
.cr .cr-heroImgWrap{ aspect-ratio: 4 / 5; border-radius:22px; }
}

/* Optionnel : si ton zoom cinéma faisait ré-apparaître du crop/bug /
.cr .cr-heroImg{ animation:none !important; }
/ =========================================================
PATCH — ESPACEMENT BOUTONS + "PROFONDEUR" TABLEAU COMPARATIF
À coller EN DERNIER dans ton CSS
========================================================= */

/* =========================

1. BOUTONS : plus d’espace + meilleur wrap
(CTA dans les cards : .cr-actions, .cr-catcard-body, etc.)
========================= /
.cr .cr-actions{
display:flex;
flex-wrap:wrap;
gap:12px;                 / espace ENTRE boutons */
align-items:center;
}



.cr .cr-actions .cr-btn,
.cr .cr-actions .cr-ghost{
margin:0 !important;      /* évite le thème qui colle tout */
}

/* Mobile / tablette : plus d'air + bouton pleine largeur si nécessaire */
@media (max-width:1024px){
.cr .cr-actions{ gap:14px; }
}
@media (max-width:480px){
.cr .cr-actions{ gap:12px; }
.cr .cr-actions .cr-btn,
.cr .cr-actions .cr-ghost{
flex:1 1 100%;
justify-content:center;
}
}

/* =========================
2) TABLEAU COMPARATIF : donner de la "profondeur"
=> le bloc tailles (2x2, 3x3...) + la table à droite
========================= */

/* Conteneur global : profondeur + séparation */
.cr .cr-compareRow{
gap:16px !important;
align-items:stretch;
}

/* Colonne tailles (gauche) : relief + bord + shadow /
.cr .cr-sizes{
border:1px solid rgba(0,0,0,.10) !important;
box-shadow: 0 18px 40px rgba(0,0,0,.10) !important; / profondeur /
transform: translateY(-2px);                         / léger détachement */
background:#fff !important;
}

/* Head tailles : plus "bloc" */
.cr .cr-sizesHead{
box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}

/* Table (droite) : profondeur, et “plan” derrière */
.cr .cr-tableScroll{
border:1px solid rgba(0,0,0,.10) !important;
box-shadow: 0 18px 40px rgba(0,0,0,.10) !important;
background:#fff !important;
position:relative;
}

/* Petit halo discret derrière la table (donne l’effet de profondeur) */
.cr .cr-tableScroll::before{
content:"";
position:absolute;
inset:-14px -18px -18px -18px;
background:
radial-gradient(520px 260px at 18% 12%, rgba(255,64,180,.18), transparent 70%),
radial-gradient(620px 320px at 78% 18%, rgba(139,108,246,.16), transparent 72%);
opacity:.55;
pointer-events:none;
z-index:0;
}

/* Remet le contenu au-dessus du halo */
.cr .cr-tableScroll > *{ position:relative; z-index:1; }

/* Mobile : on réduit le "lift" /
@media (max-width:480px){
.cr .cr-sizes{ transform:none; }
.cr .cr-compareRow{ gap:12px !important; }
}
/ =========================================================
PATCH — ESPACEMENT BOUTONS + "PROFONDEUR" TABLEAU COMPARATIF
À coller EN DERNIER dans ton CSS
========================================================= */

/* =========================

1. BOUTONS : plus d’espace + meilleur wrap
(CTA dans les cards : .cr-actions, .cr-catcard-body, etc.)
========================= /
.cr .cr-actions{
display:flex;
flex-wrap:wrap;
gap:12px;                 / espace ENTRE boutons */
align-items:center;
}



.cr .cr-actions .cr-btn,
.cr .cr-actions .cr-ghost{
margin:0 !important;      /* évite le thème qui colle tout */
}

/* Mobile / tablette : plus d'air + bouton pleine largeur si nécessaire */
@media (max-width:1024px){
.cr .cr-actions{ gap:14px; }
}
@media (max-width:480px){
.cr .cr-actions{ gap:12px; }
.cr .cr-actions .cr-btn,
.cr .cr-actions .cr-ghost{
flex:1 1 100%;
justify-content:center;
}
}

/* =========================
2) TABLEAU COMPARATIF : donner de la "profondeur"
=> le bloc tailles (2x2, 3x3...) + la table à droite
========================= */

/* Conteneur global : profondeur + séparation */
.cr .cr-compareRow{
gap:16px !important;
align-items:stretch;
}

/* Colonne tailles (gauche) : relief + bord + shadow /
.cr .cr-sizes{
border:1px solid rgba(0,0,0,.10) !important;
box-shadow: 0 18px 40px rgba(0,0,0,.10) !important; / profondeur /
transform: translateY(-2px);                         / léger détachement */
background:#fff !important;
}

/* Head tailles : plus "bloc" */
.cr .cr-sizesHead{
box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}

/* Table (droite) : profondeur, et “plan” derrière */
.cr .cr-tableScroll{
border:1px solid rgba(0,0,0,.10) !important;
box-shadow: 0 18px 40px rgba(0,0,0,.10) !important;
background:#fff !important;
position:relative;
}

/* Petit halo discret derrière la table (donne l’effet de profondeur) */
.cr .cr-tableScroll::before{
content:"";
position:absolute;
inset:-14px -18px -18px -18px;
background:
radial-gradient(520px 260px at 18% 12%, rgba(255,64,180,.18), transparent 70%),
radial-gradient(620px 320px at 78% 18%, rgba(139,108,246,.16), transparent 72%);
opacity:.55;
pointer-events:none;
z-index:0;
}

/* Remet le contenu au-dessus du halo */
.cr .cr-tableScroll > *{ position:relative; z-index:1; }

/* Mobile : on réduit le "lift" /
@media (max-width:480px){
.cr .cr-sizes{ transform:none; }
.cr .cr-compareRow{ gap:12px !important; }
}
/ HERO IMAGE — responsive propre (tel / tablette / ordi) */
.cr-heroVisual{
width:100%;
overflow:hidden;
}

.cr-heroImgWrap{
position:relative;
width:100%;
height: clamp(320px, 55vh, 680px); /* tel -> tablette -> ordi */
}

.cr-heroImg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}

/* TEL : plus haut pour éviter "trop petite" */
@media (max-width: 480px){
.cr-heroImgWrap{
height: 520px;
}
.cr-heroImg{
object-position: center 35%;
}
}

/* TABLETTE : évite "trop grand" */
@media (min-width: 481px) and (max-width: 1024px){
.cr-heroImgWrap{
height: 520px;
}
}

/* ORDI : garde un hero fort mais pas énorme */
@media (min-width: 1025px){
.cr-heroImgWrap{
height: 640px;
}
}

/* Option: si ton thème applique des max-height/width bizarres */
.cr-heroVisual img{
max-width:none !important;
}
.cr-heroMarquee{
position:absolute;
left:50%;
bottom:10px;
transform:translateX(-50%);
width:80%;
overflow:hidden;
mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.cr-heroMarqueeTrack{
display:flex;
gap:10px;
width:max-content;
animation: hero-marquee 18s linear infinite;
}

.cr-heroMarqueeTrack span{
display:block;
width:120px;
height:3px;
border-radius:999px;
background: rgba(255,255,255,.25);
}

@keyframes hero-marquee{
from{ transform: translateX(0); }
to{ transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
.cr-heroMarqueeTrack{ animation:none; }
}
.cr-pTop{
display:grid;
grid-template-columns: 1.05fr .95fr;
gap:18px;
align-items:start;
}

.cr-pTop__media{
border-radius:18px;
overflow:hidden;
background: rgba(0,0,0,.04);
}

.cr-pTop__info{ min-width:0; }

.cr-pTop__priceRow{
display:flex;
gap:14px;
align-items:baseline;
flex-wrap:wrap;
margin-top:10px;
}

.cr-price{ font-size:1.8rem; font-weight:800; }
.cr-pTop__actions{ margin:14px 0 10px; }

.cr-pTop__marquee{
margin-top:14px;
overflow:hidden;
mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.cr-heroMarqueeTrack{
display:flex;
gap:10px;
width:max-content;
animation: hero-marquee 18s linear infinite;
}

.cr-heroMarqueeTrack span{
display:block;
width:120px;
height:3px;
border-radius:999px;
background: rgba(0,0,0,.12);
}

@keyframes hero-marquee{
from{ transform: translateX(0); }
to{ transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
.cr-heroMarqueeTrack{ animation:none; }
}

@media (max-width: 980px){
.cr-pTop{ grid-template-columns: 1fr; }
}
/* ==============================
TYPOGRAPHIE PLUS FORTE
============================== */

/* Texte courant */
.cr p,
.cr .cr-p,
.cr li,
.cr .cr-list li,
.cr .cr-mediaCardText,
.cr .cr-triptychText,
.cr .cr-catcard-text {
font-weight: 500;
line-height: 1.55;
letter-spacing: 0.01em;
}

/* Titres principaux */
.cr h1,
.cr .cr-h1 {
font-weight: 800;
letter-spacing: -0.01em;
}

.cr h2,
.cr .cr-title,
.cr .cr-h2 {
font-weight: 750;
}

/* Titres intermédiaires */
.cr h3,
.cr .cr-triptychTitle,
.cr .cr-mediaCardTitle,
.cr .cr-catcard-title {
font-weight: 700;
}

/* Kicker (petits titres au-dessus) */
.cr .cr-kicker,
.cr .cr-tag,
.cr .cr-callout-title {
font-weight: 700;
letter-spacing: 0.06em;
}

/* Tableaux prix */
.cr-gamme-prices th {
font-weight: 700;
}

.cr-gamme-price {
font-weight: 800;
}

/* Boutons */
.cr-btn {
font-weight: 700;
letter-spacing: 0.04em;
}

/* Lien discret /
.cr-ghost {
font-weight: 600;
}
/ FIX affichage complet du texte "Installation ..." (plus de coupe/ellipsis) /
.cr-gamme-footText{
overflow:visible !important;
text-overflow:clip !important;
white-space:normal !important;   / autorise le retour à la ligne */
line-height:1.25 !important;
}

/* si ça force encore : on laisse le conteneur respirer */
.cr-gamme-sub{
align-items:flex-start !important;
}

/* optionnel : éviter les mots trop longs qui débordent /
.cr-gamme-sub .cr-gamme-footText{
word-break:break-word !important;
overflow-wrap:anywhere !important;
}
/ =========================================================
FIX PRIX/ACHETER : plus de chevauchement (ex: 3×4,5)
=> 3 colonnes stables : Taille (fixe) | Prix (flex) | CTA (auto)
========================================================= */

.cr .cr-priceRow{
display:grid !important;
grid-template-columns: 64px minmax(0,1fr) auto !important; /* taille fixe */
gap:12px !important;
align-items:center !important;
}

.cr .cr-sizeLink{
display:block;
width:64px;                 /* fixe = ne déborde plus */
font-weight:950;
white-space:nowrap !important;
overflow:hidden;
text-overflow:clip;
}

.cr .cr-price{
justify-self:start;
font-weight:950;
white-space:nowrap !important;
}

.cr .cr-buy{
justify-self:end;
display:flex;
}

/* Option : si tu veux “prix bien alignés” */
.cr .cr-priceGrid{
font-variant-numeric: tabular-nums;
}

/* Mobile : on repasse sur 2 lignes propres (taille/prix puis bouton) /
@media (max-width:480px){
.cr .cr-priceRow{
grid-template-columns: 64px 1fr !important;
grid-template-areas:
"size price"
"buy  buy";
row-gap:10px !important;
}
.cr .cr-sizeLink{ grid-area:size; }
.cr .cr-price{ grid-area:price; justify-self:start; }
.cr .cr-buy{ grid-area:buy; justify-self:start; }
}
/ =========================================================
PATCH TABLETTE

Gammes en 2 colonnes

Prix/Acheter : layout 2 colonnes + CTA dessous (anti décalage)
À coller EN TOUT DERNIER
========================================================= */

@media (min-width: 481px) and (max-width: 1024px){

/* 1) GAMMES : 2 colonnes sur tablette */
.cr .cr-gamme-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
}

/* 2) PRIX/ACHETER : éviter tout chevauchement sur tablette */
.cr .cr-priceRow{
grid-template-columns: 64px 1fr !important;
grid-template-areas:
"size price"
"buy  buy" !important;
row-gap: 10px !important;
}

.cr .cr-sizeLink{ grid-area: size !important; }
.cr .cr-price{
grid-area: price !important;
justify-self: start !important;
white-space: nowrap !important;
}
.cr .cr-buy{
grid-area: buy !important;
justify-self: start !important;   /* bouton aligné à gauche */
}

/* Bonus : bouton plus stable si thème ajoute des styles /
.cr .cr-buy .cr-btn{
width: auto !important;
max-width: 100% !important;
}
}
/ =========================================================
TABLETTE — PRIX : empiler les CTA par taille
Empêche l’élargissement des cartes (cause du décalage)
========================================================= */

@media (min-width: 481px) and (max-width: 1024px){

/* Le bloc qui contient les boutons Acheter */
.cr .cr-priceBlock,
.cr .cr-price,
.cr .cr-buy{
width:100% !important;
}

/* Liste des boutons Acheter /
.cr .cr-buy{
display:grid !important;
grid-template-columns: 1fr 1fr !important;   / 2 boutons par ligne */
gap:10px !important;
justify-items:stretch;
}

/* Boutons */
.cr .cr-buy .cr-btn{
width:100% !important;
justify-content:center;
}

/* Le texte prix (3×3 : 160 € etc) reste bien à gauche /
.cr .cr-price{
text-align:left !important;
}
}
/ =========================================================
GAMMES — PRIX + CTA (version catalogue propre)

Prix moins agressif

Bouton = "VOIR" au lieu de "ACHETER"
========================================================= */

/* PRIX plus discret */
.cr .cr-price{
font-size: 1.15rem !important;
font-weight: 700 !important;
color: rgba(11,11,24,.82) !important;
line-height: 1.2;
}

/* Conteneur CTA */
.cr .cr-buy{
width:100%;
}

/* Bouton : style catalogue */
.cr .cr-buy .cr-btn{
position: relative;
width:100% !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .12em !important;
text-transform: uppercase;
background: linear-gradient(90deg, rgba(255,64,180,.85), rgba(139,108,246,.85)) !important;
box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}

/* On masque le texte original (ACHETER, etc.) */
.cr .cr-buy .cr-btn *{
visibility: hidden !important;
}

/* Nouveau label /
.cr .cr-buy .cr-btn::after{
content:"VOIR";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
visibility: visible;
color:#fff;
}
.cr .cr-priceGrid .cr-btn--mini{
font-size:12px !important;
padding:8px 12px !important;
letter-spacing:.08em !important;
}
/ =========================================================
FIX — Prix des gammes = même taille que le tableau comparatif
(le comparatif est en 15px)
========================================================= */

.cr .cr-priceGrid .cr-price{
font-size:15px !important;     /* identique au comparatif /
font-weight:900 !important;    / identique au comparatif */
line-height:1.2 !important;
}

/* Option : si ton thème grossit TOUT sur mobile/tablette /
@media (max-width:1024px){
.cr .cr-priceGrid .cr-price{
font-size:15px !important;
}
}
.cr .cr-priceGrid .cr-price{
font-size:15px !important;
font-weight:900 !important;
}
.cr .cr-priceGrid .cr-price{
font-size:15px !important;
font-weight:900 !important;
}.cr .cr-priceGrid .cr-btn--mini{
font-size:12px !important;
padding:8px 12px !important;
letter-spacing:.08em !important;
}
.cr .cr-priceRow{display:grid !important}
/ FIX — images tuiles trop grosses : on limite la hauteur du bloc image /
.cr .cr-heroBox{
aspect-ratio: auto !important;                 / annule le carré /
height: clamp(180px, 22vw, 260px) !important;  / tel -> tablette -> ordi */
}

.cr .cr-heroBox img{
width:100% !important;
height:100% !important;
object-fit: contain !important;
object-position: center !important;
}

/* Mobile : un peu plus haut pour éviter trop petit /
@media (max-width: 420px){
.cr .cr-heroBox{
height: 220px !important;
}
}
/ SIGNATURE VISUELLE — liseré vertical discret */
#product .cr-boxN,
#product .cr-boxI,
#product .product-description,
#product .product-information,
#product .tabs,
#product .product-features{
position: relative;
}

#product .cr-boxN::before,
#product .cr-boxI::before,
#product .product-description::before,
#product .product-information::before{
content:"";
position:absolute;
left:0;
top:16px;
bottom:16px;
width:3px;
border-radius:999px;
background: linear-gradient(
180deg,
var(--cr-pink,#ff4aa6),
var(--cr-blue,#4C2AC8)
);
opacity:.9;
}
/* TITRES — plus d’impact sans grossir */
#product h2,
#product .h2{
position:relative;
padding-left:14px;
}

#product h2::before,
#product .h2::before{
content:"";
position:absolute;
left:0;
top:.25em;
width:6px;
height:6px;
border-radius:999px;
background: var(--cr-pink,#ff4aa6);
}
/* =========================================================
/* SIGNATURE — barres défilantes en rose bouton /
.cr-sigBar::before{
background: linear-gradient(
90deg,
var(--cr-pink) 0%,
var(--cr-pink) 40%,
rgba(255,74,166,0) 70%
) !important;
animation-duration: 2s;
}/ ESPACE sous "FAITES DÉFILER" /
.cr-compareHint{
margin-bottom: 22px !important;
}.cr-compareHint{
margin-bottom: 26px !important;
}
/ Forcer l'affichage du H1 Creative Elements dans le bloc CR /
#product .cr h1{
position:static !important;
width:auto !important;
height:auto !important;
clip:auto !important;
overflow:visible !important;
white-space:normal !important;
margin:0 0 10px !important;
}
/ Forcer l'affichage du H1 Creative Elements dans le bloc CR /
#product .cr h1{
position:static !important;
width:auto !important;
height:auto !important;
clip:auto !important;
overflow:visible !important;
white-space:normal !important;
margin:0 0 10px !important;
}
/ =========================================================
CSS — UNIQUEMENT CE QUI MANQUE (à coller dans CSS globale)
Objectif : badges / compatibilité / tables prix / media
========================================================= */

/* badges */
.cr-badges{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}

/* chips */
.cr-chip{
display:inline-flex;align-items:center;gap:8px;
border-radius:999px;padding:6px 10px;line-height:1;
font-weight:950;font-size:12px;letter-spacing:.02em;
border:1px solid rgba(0,0,0,.14);
background:#fff;
}

/* SOUPLE */
.cr-chip--soft{
border-color:rgba(255,64,180,.55);
box-shadow:0 10px 22px rgba(255,64,180,.10);
}
.cr-chip--softOutline{
background:transparent;
border-color:rgba(255,64,180,.40);
}

/* RUGUEUX */
.cr-chip--rough{ border-color:rgba(220,38,38,.55); }
.cr-chip--roughOutline{ background:transparent;border-color:rgba(220,38,38,.35); }

/* 420D */
.cr-chip--black{ border-color:rgba(0,0,0,.35); }
.cr-chip--blackOutline{ background:transparent;border-color:rgba(0,0,0,.22); }

/* PVC */
.cr-chip--white{
background:#fff;
color:#0b0b0b;
border-color:rgba(0,0,0,.18);
}
.cr-chip--whiteOutline{
background:transparent;
border-color:rgba(0,0,0,.18);
color:rgba(0,0,0,.75);
}

/* compatibilité */
.cr-compatGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
@media (max-width:768px){.cr-compatGrid{grid-template-columns:1fr}}

.cr-compatItem{
display:flex;gap:10px;align-items:flex-start;
padding:14px;border-radius:18px;
background:#fff;border:1px solid rgba(0,0,0,.10);
}

.cr-dot--soft{background:rgba(255,64,180,.95)}
.cr-dot--rough{background:rgba(220,38,38,.95)}

/* table prix */
.cr-gamme-prices-wrap{
margin-top:12px;
border:1px solid rgba(0,0,0,.10);
border-radius:14px;
overflow:hidden;
background:#fff;
}

table.cr-gamme-prices{
width:100%;
border-collapse:separate;
border-spacing:0;
table-layout:fixed;
}

.cr-gamme-prices th,
.cr-gamme-prices td{
padding:10px 10px;
border-top:1px solid rgba(0,0,0,.08);
font-size:14px;
vertical-align:middle;
line-height:1.2;
}
.cr-gamme-prices tr:first-child th,
.cr-gamme-prices tr:first-child td{border-top:none}

.cr-gamme-prices th{
width:34%;
text-align:left;
font-weight:950;
white-space:nowrap;
}

.cr-gamme-price{
width:32%;
text-align:left;
font-weight:900;
white-space:nowrap;
}

.cr-gamme-buy{
width:34%;
text-align:right;
}

.cr-gamme-prices tbody tr:nth-child(odd){
background:rgba(0,0,0,.02);
}

/* mini bouton */
.cr-btn--mini{
padding:9px 12px !important;
font-size:12px !important;
letter-spacing:.10em !important;
white-space:nowrap;
line-height:1;
}

/* images media */
.cr-mediaCardImg,
.cr-catcard-media{
overflow:hidden;
}
.cr-mediaCardImg img,
.cr-catcard-media img{
display:block;
width:100%;
height:100%;
object-fit:contain;
}
/* =========================================================
HERO — VOIR LE CHAPITEAU EN ENTIER (sans crop)
À coller EN DERNIER dans ton CSS
========================================================= */

/* A) ZÉRO COUPE : on voit 100% (recommandé) */
.cr .cr-heroImgWrap{
  width:100%;
  max-width:100%;
  aspect-ratio: 1 / 1;     /* carré */
  border-radius:26px;
  overflow:hidden;
  background:#05040a;      /* fond propre derrière l’image (comme tes cartes) */
}

.cr .cr-heroImg{
  width:100%;
  height:100% !important;
  object-fit:contain !important;  /* IMPORTANT : pas de coupe */
  object-position:center;
  display:block;
}

/* Mobile : un peu plus haut pour éviter l’effet “trop vide” */
@media (max-width:480px){
  .cr .cr-heroImgWrap{ aspect-ratio: 4 / 5; border-radius:22px; }
}

/* Optionnel : si ton zoom cinéma faisait ré-apparaître du crop/bug */
.cr .cr-heroImg{ animation:none !important; }
/* =========================================================
CATEGORY — MASQUER TITRES/SOUS-CATEGORIES NATIFS + NETTOYAGE
Sans impacter Creative Elements (.cr)
À coller EN TOUT DERNIER
========================================================= */

/* Sécurité : on ne casse pas les titres DANS Creative Elements */
body#category .cr h1,
body#category .cr h2,
body#category .cr h3,
body#category .cr .h1,
body#category .cr .h2,
body#category .cr .h3{
  display:block !important;
  visibility:visible !important;
  height:auto !important;
  width:auto !important;
  clip:auto !important;
  overflow:visible !important;
  white-space:normal !important;
}

/* Titre catégorie NATIF (selon thème) */
body#category #main > .page-header,
body#category #content-wrapper > .page-header,
body#category #main .page-header:not(.cr *),
body#category #main h1.h1:not(.cr *),
body#category #main .h1:not(.cr *){
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Sous-catégories NATIVES */
body#category #subcategories,
body#category #subcategories + hr,
body#category .category-subcategories,
body#category .subcategories,
body#category .subcategory-list,
body#category .block-categories{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Nettoyage des espaces résiduels */
body#category #main,
body#category #content-wrapper{
  padding-top:0 !important;
  margin-top:0 !important;
}

body#category hr{
  display:none !important;
}

/* Breadcrumb : évite le “trou” sous le header natif */
body#category .breadcrumb{
  margin-bottom:0 !important;
}
/* =========================================================
CATEGORY — SUPPRESSION MARGES/PADDINGS NATIFS PRESTASHOP
(sans casser Creative Elements .cr)
À coller EN TOUT DERNIER
========================================================= */

/* 1) Supprime le “haut de page” natif (souvent énorme sur category) */
body#category #wrapper,
body#category #content-wrapper,
body#category #main{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* 2) Container / row : enlève l’air natif au-dessus */
body#category #main > .container,
body#category #main > .container-fluid,
body#category #main .row{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* 3) Header natif (titre catégorie / cover) : zéro espace */
body#category #main > .page-header,
body#category #content-wrapper > .page-header,
body#category .page-header{
  margin:0 !important;
  padding:0 !important;
}

/* 4) Breadcrumb : enlève l’espace dessous */
body#category .breadcrumb{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

/* 5) HR natifs : souvent responsables des “trous” */
body#category hr{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* 6) IMPORTANT : on garde les espacements de TON bloc CE */
body#category .cr{
  margin-top:0 !important;
  padding-top:24px; /* garde ton rythme visuel */
}/* End custom CSS */