/* =========================================
   1) VARIABLES & RESET
========================================= */
:root {
  --blue:#1f4aa8;
  --green:#28b67a;
  --text:#0b1736;
  --muted:#6b7280;
  --bg:#f7f8fb;
  --dark:#0b1a33;
  --radius:14px;
  --shadow:0 10px 25px rgba(0,0,0,.08);

  /* Dégradé entreprise (repris de ton exemple) */
  --bg-start: #0ea5e9; /* bleu ciel */
  --bg-end: #0f766e;   /* vert teal */
}

*{box-sizing:border-box}
html,body{padding-top: 80px;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg)}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}

body {
  padding-top: 60px; 
}


/* =========================================
   2) LAYOUT GLOBAL
========================================= */
.container{width:min(1120px,92%);margin-inline:auto}
.section{padding:45px 0}
.section h2{font-size:30px;margin:0 0 10px}
.section p.lead{color:var(--muted);max-width:800px}


/* =========================================
   3) HEADER
========================================= */


/* Header caché en haut */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background:#fff;
  border-bottom:1px solid #e8ecf3;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transform: translateY(0);
  transition: transform 0.3s ease;
  z-index: 1000;
}

/* Quand on scrolle => header caché */
.header.is-hidden {
  transform: translateY(-100%);
}

/* Au survol => on force à réapparaître */
.header:hover {
  transform: translateY(0) !important;
}

/*.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}*/

.header-inner {
  height: 67px; /* fixe la hauteur du header */
  display: flex;
  align-items: center;
  justify-content:space-between;
}
.brand img {
  max-height: 100%; /* empêche de dépasser la hauteur du header */
  width: auto;
  transform: scale(1.2); /* agrandit visuellement sans pousser le header */
}

.brand img{height:50px;width:auto}
.nav{display:flex;gap:22px;align-items:center}
.nav a{font-weight:600;color:#23314d}
.mobile-toggle{display:none;background:transparent;border:none;font-size:28px}

.cta-btn-foot {
    background: #fff;          /* fond blanc */
    color: #0d47a1;            /* texte bleu (même bleu que tes titres) */
    padding: 10px 16px;
    border-radius: 10px;
    border: 2px solid #0d47a1; /* ajoute une bordure bleue élégante */
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
  }

  .cta-btn-foot:hover {
    background: #0d47a1; /* bleu au survol */
    color: #fff;
  }
/* =========================================
   4) HERO (page d’accueil)
========================================= */
.hero{
  background:
    linear-gradient(180deg,#f9fbff,transparent),
    radial-gradient(70% 60% at 10% 10%,rgba(40,182,122,.08),transparent),
    radial-gradient(60% 60% at 90% 20%,rgba(31,74,168,.08),transparent);
  padding:72px 0 56px;border-bottom:1px solid #eef2f9
}
.hero h1{font-size:42px;line-height:1.1;margin:4px 0 12px}
.hero p{color:var(--muted);max-width:720px}
.tag{display:inline-block;background:rgba(40,182,122,.12);border:1px solid rgba(40,182,122,.3);color:#136247;font-weight:700;padding:6px 10px;border-radius:999px;margin-bottom:16px}
.hero-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.btn{border:1px solid #d8e0ef;padding:12px 16px;border-radius:12px;font-weight:700}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.ghost{background:#fff}
.cta-btn {
  background: var(--blue);
  color: #fff !important;   /* force l’écriture blanche */
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  border: none;             /* au cas où un contour override */
  font-weight: 600;         /* optionnel : texte plus visible */
}


/* =========================================
   5) GRILLES GÉNÉRIQUES / CARTES / KPI / PRODUITS
========================================= */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.card{background:#fff;border:1px solid #e9eef7;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:18px}
.card ul{margin:10px 0 0 18px;color:var(--text)}
.card ul li{margin:6px 0}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
.kpi{background:#fff;border:1px solid #e9eef7;border-radius:16px;padding:24px;text-align:center;box-shadow:var(--shadow)}
.kpi .num{font-size:28px;font-weight:900;color:var(--blue)}
.kpi .lab{color:var(--muted)}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.product{background:#fff;border:1px solid #e9eef7;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.product .meta{padding:14px}
.badge{display:inline-block;background:rgba(31,74,168,.1);color:var(--blue);border:1px solid rgba(31,74,168,.3);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}

#service h2 {
   text-align: center;
    font-size: 2.3rem;
    font-weight: 700;
    color: #0d47a1; /* même bleu que tes autres titres */
    margin-bottom: 10px;
}
/* === KPI plus grands et rapprochés === */
.kpis{
  display:grid;
  grid-template-columns:repeat(3, 1fr); 
  gap:12px;                  /* espace réduit entre les cartes */
  margin-top:20px;
  justify-items:center;
}

.kpi{
  background:#fff;
  border:1px solid #e9eef7;
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:32px 24px;          /* padding plus large pour agrandir */
  min-height:140px;           /* plus grand */
  width:100%;                 /* occupe plus la largeur */
  max-width:280px;            /* limite la taille (ajuste si besoin) */
  display:flex;
  flex-direction:column;
  align-items:right;
  justify-content:center;
  text-align:center;
  gap:8px;
}

.kpi .num{
  margin:0;
  font-size:40px;             /* texte plus grand */
  font-weight:900;
  color:var(--blue);
}

.kpi .lab{
  margin:0;
  font-size:18px;             /* un peu plus grand */
  color:var(--muted);
  text-align:center;
}

/* Responsive */
@media (max-width: 960px){
  .kpis{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .kpis{ grid-template-columns:1fr; }
}


/* =========================================
   6) PARTENAIRES / QUALITÉ / ACTUALITÉS
========================================= */
.partners{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:18px;align-items:center;opacity:.9}
.partner{background:#fff;border:1px dashed #d8e0ef;border-radius:12px;height:54px;display:flex;align-items:center;justify-content:center}

.compliance{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.compliance .item{background:#fff;border:1px solid #e9eef7;border-radius:14px;padding:18px;box-shadow:var(--shadow)}

.news{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}


/* =========================================
   7) CTA & FOOTER
========================================= */
.cta-strip{background:linear-gradient(90deg,var(--blue),#163a85);color:#fff;padding:34px 0}
.cta-strip .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta-strip .inner .cta-btn{background:#fff;color:var(--blue)}
.footer{background:var(--dark);color:#c9d2e5;padding:48px 0;margin-top:48px;border-top:1px solid #0c2448}
.footer h4{color:#fff;margin:0 0 12px}
.footer a{color:#c9d2e5}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.copy{border-top:1px solid #183057;margin-top:24px;padding-top:16px;color:#8ea1c7;font-size:14px}


/* =========================================
   8) SLIDER PRODUITS
========================================= */
.bm-slider{position:relative;margin-top:18px;overflow:hidden;padding:0 60px} /* espace pour les flèches */
.bm-track{display:flex;gap:10px;overflow:hidden;scroll-behavior:smooth}
.bm-slide{
  flex:0 0 45%; /* rapproche les cartes */
  background:#fff;border:1px solid #e9eef7;border-radius:18px;box-shadow:var(--shadow);
  overflow:hidden;display:grid;grid-template-rows:auto 1fr;margin:0;
  transform:scale(.9);transform-origin:center;transition:transform .3s ease-in-out
}

#produits .bm-slide:hover{transform:scale(1)}
.bm-slide .bm-media img{width:100%;height:340px;object-fit:cover}
.bm-meta{padding:18px}
.bm-tags{display:flex;gap:8px;margin-bottom:8px}
.bm-tags span{background:rgba(31,74,168,.08);border:1px solid rgba(31,74,168,.25);color:var(--blue);border-radius:999px;font-weight:700;padding:4px 10px;font-size:12px}
.bm-specs{margin:10px 0 0 18px}
.bm-specs li{margin:6px 0}
.bm-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.bm-source{color:var(--muted);font-size:12px;margin-top:10px}
.bm-slide h3 {
  transition: color 0.2s ease, text-decoration 0.2s ease;
}
#produits h2 {
    text-align: center;
    font-size: 2.3rem;
    font-weight: 700;
    color: #0d47a1; /* même bleu que tes autres titres */
    margin-bottom: 10px;
  }

  #produits .lead {
    text-align: left;
    font-size: 1.1rem;
    color: var(--muted); 
  }
.bm-slide:hover h3 {
  text-decoration: underline;
  color: var(--blue); /* optionnel, pour renforcer l’effet */
}


.bm-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:#0f1f3f;color:#fff;border:none;border-radius:999px;
  width:44px;height:44px;font-size:26px;display:grid;place-items:center;
  opacity:.95;box-shadow:var(--shadow);cursor:pointer;z-index:10
}
.bm-nav.prev{left:15px}
.bm-nav.next{right:15px}

.bm-pagination{display:flex;gap:10px;margin-top:14px}
.bm-dot{width:12px;height:12px;border-radius:50%;border:1px solid #c9d2e5;background:#eaf0fb}
.bm-dot.is-active{background:var(--blue)}

.bm-timer{display:flex;align-items:center;gap:14px;margin-top:10px}
.bm-timebar{--w:0%;display:block;position:relative;width:160px;height:4px;background:#e0e7f5;border-radius:999px;overflow:hidden}
.bm-timebar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--blue)}
.bm-count{color:#23314d;font-weight:800}
.bm-count .bm-sep{display:inline-block;width:42px;height:2px;background:#d6def0;margin:0 10px;vertical-align:middle}


/* =========================================
   9) SECTION ENTREPRISE (blocs texte)
========================================= */
/* Ajustements section Entreprise */
#entreprise .eyebrow {
  text-align: center;
  font-size: 2.3rem;
  font-weight: 700;
  color: #0d47a1; /* même bleu que les autres titres */
  margin-bottom: 10px;
  display: block;
}

#entreprise h2,
#entreprise .enterprise__intro {
  text-align: left; /* aligner à gauche */
}



.entreprise-block{
  background:#f9f9f9;border-left:5px solid #0077b6;padding:20px;margin-bottom:25px;border-radius:8px;
  transition:transform .3s ease,box-shadow .3s ease
}
.entreprise-block:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.entreprise-block h3{color:#0077b6;font-size:1.4rem;margin-bottom:10px}
.entreprise-block p{margin-bottom:10px;line-height:1.6;color:#333}
.entreprise-block.vision{border-left-color:#009688}
.entreprise-block.mission{border-left-color:#ff9800}



/* =========================================
   10) ENTREPRISE — BANNIÈRE FULL-BLEED
      (section visuelle avec halo + cartes "verre")
========================================= */
.hero-enterprise{
  position:relative;
  isolation:isolate;
  padding:56px 0;                 /* espace vertical global */
  background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
  color:#fff;
  overflow:hidden;
}
.hero-enterprise::before,
.hero-enterprise::after{
  content:"";
  position:absolute;
  inset:auto auto -140px -140px;
  width:460px;height:460px;
  background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%);
  filter: blur(40px);
  transform: rotate(16deg);
  z-index:0;
}
.hero-enterprise::after{
  inset:-140px -140px auto auto;
  background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent 70%);
  transform: rotate(-10deg);
}
.hero-enterprise__inner{
  position:relative; z-index:1;   /* au-dessus des halos */
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:32px; align-items:center;
}
.hero-enterprise h2{color:#fff;margin:14px 0 10px;font-size:clamp(23px,3.2vw,30px);line-height:1.1;font-weight:800;letter-spacing:-.02em}
.hero-enterprise .lead{color:#f2f5ff;opacity:.95}
.hero-enterprise .eyebrow{
  display:inline-block;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.18);color:#fff;padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);backdrop-filter:saturate(140%) blur(4px)
}

/* Boutons contrastés sur fond sombre (utilisés dans la bannière) */
.btn-light{background:#111827;color:#fff;border:0}
.btn-outline-light{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn-light:hover,.btn-outline-light:hover{transform:translateY(-2px)}

/* Cartes “verre” de la bannière */
.hero-enterprise .values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.hero-enterprise .card.glass{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  border-radius:16px;padding:16px;backdrop-filter:blur(6px) saturate(140%);color:#fff
}
.hero-enterprise .card.glass h3{margin:0 0 6px;font-size:16px;color:#fff}
.hero-enterprise .badge{display:inline-block;font-size:12px;padding:4px 8px;border-radius:999px;background:#fff;color:var(--text);margin-bottom:10px;font-weight:700}

/* Bloc illustration dans la bannière */
.hero-enterprise__art{aspect-ratio:4/3;width:100%;max-width:560px;margin-inline:auto;background:#ffffff15;border:1px solid #ffffff30;border-radius:20px;padding:18px}


/* =========================================
   11) RESPONSIVE
========================================= */
@media (max-width: 960px){
  .cards,.kpis,.product-grid,.partners,.compliance,.news{grid-template-columns:1fr 1fr}
  .footgrid{grid-template-columns:1fr 1fr}
  .bm-slide{flex:0 0 100%}           /* slider en pleine largeur */
  .bm-nav.prev{left:8px}
  .bm-nav.next{right:8px}

  .hero-enterprise__inner{grid-template-columns:1fr}
  .hero-enterprise__art{order:-1}
  .hero-enterprise .values{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .nav{display:none}
  .mobile-toggle{display:block}
  .cards,.kpis,.product-grid,.partners,.compliance,.news{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr}
}

/* ========= Section Entreprise ========= */
.enterprise {
  background: #f7f8fb; /* fond doux, neutre */
  padding: 72px 0;
}

.enterprise__inner {
  display: grid;
  gap: 40px;
}

/* Header */
.enterprise__head {
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}

/* "L’entreprise" -> plus grand titre */
.enterprise__head .eyebrow {
  display: block;
  font-size: clamp(32px, 5vw, 42px); /* plus grand */
  font-weight: 900;
  color: var(--text);
  margin-bottom: 14px;
}

/* "Qui sommes-nous ?" -> bleu */
.enterprise__head h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 20px;
}

.enterprise__intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 14px;
}

/* Grille Vision & Mission */
.e-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.e-card {
  border-radius: 16px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e9eef7;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.e-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

.e-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--blue);
}

.e-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}

/* Responsive */
@media (max-width: 960px) {
  .e-grid {
    grid-template-columns: 1fr;
  }
}

/* Grille Vision & Mission */
.e-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.e-card {
  border-radius: 16px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e9eef7;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.e-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.e-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--blue);
}
.e-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}

/* Responsive */
@media (max-width: 960px) {
  .e-grid {
    grid-template-columns: 1fr;
  }
}


/* ================================
   ****** Fiche produit magicl-6000 — Hero (texte gauche / image droite) ***********
================================ */
.product-hero { 
  padding: 48px 0 24px; 
}
.product-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 32px;
}
.product-hero__content { 
  padding-block: 8px; 
}
.crumbs { 
  font-size: 14px; 
  color: var(--muted); 
  margin-bottom: 10px; 
}
.crumbs a { 
  color: var(--blue); 
}

.product-title {
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(21px, 4vw, 34px);
  margin: 10px 0 8px;
}
.product-title .accent { 
  color: var(--blue); 
}

.product-sub {
  font-size: clamp(16px, 2vw, 18px);
  margin: 8px 0 10px;
  color: var(--text);
}
.product-lead {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 60ch;
}

.product-hero__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fb;
  border: 1px solid #e9eef7;
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.product-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive — Hero */
@media (max-width: 960px){
  .product-hero__grid { 
    grid-template-columns: 1fr; 
  }
  .product-hero__media { 
    order: -1; /* image au-dessus sur mobile */ 
  }
}

/* ================================
   Section spécifications / fonctionnalités clés
================================ */
.product-specs {
  padding: 60px 20px;
  background-color: #f2f2f2; /* gris très léger */
  line-height: 1.35;         /* interligne plus serré */
  margin-bottom: 1px;
}
.product-specs .section-title {
  text-align: center;
  font-size: 2.3rem;  /* plus grand */
  margin-bottom: 40px;
  font-weight: 700;
}

/* Grille : texte à gauche + image à droite */
.product-specs .specs-grid {
  display: flex;
  align-items: flex-start;
  gap: 50px;
  flex-wrap: wrap;
}

.product-specs .section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 30px;
  font-weight: 700;
  color: #0d47a1; /* bleu cohérent avec les autres titres */
}

/* Texte à gauche */
.product-specs .specs-text {
  flex: 1;
  min-width: 300px;
}
.product-specs .specs-text h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0d47a1;      /* bleu */
  margin: 12px 0 6px;  /* resserré */
  line-height: 1.25;
}
.product-specs .specs-text p {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin: 6px 0;       /* réduit l’espace entre paragraphes */
}

/* Image à droite */
.product-specs .specs-image {
  flex: 1;
  min-width: 350px;
  text-align: center;
}
.product-specs .specs-image img {
  max-width: 100%;
  height: auto;        /* garde les proportions et évite la sur-étirement vertical */
  object-fit: contain;
}

/* Listes éventuelles dans la section */
.product-specs ul { 
  margin: 6px 0; 
  padding-left: 18px; 
}
.product-specs li { 
  margin: 4px 0; 
}


/* ===== Section vignettes Produit (3 colonnes + légendes) ===== */
.product-highlights {
  padding: 48px 0;
  background: #f6f8fb;           /* gris très léger */
}

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

.ph-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ph-media {
  width: 100%;
  aspect-ratio: 4 / 3;           /* garde un ratio propre */
  background: #fff;
  border: 1px solid #e9eef7;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ph-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* pleine largeur, recadrée proprement */
  display: block;
}

.product-highlights .section-title {
  text-align: center;
  font-size: 2.3rem;
  margin-bottom: 40px;
  font-weight: 700;
  color: #0d47a1; /* même bleu que tes titres */
}

.ph-caption {
  text-align: center;
  color: #555;              /* gris foncé au lieu de noir pur */
  font-size: 0.9rem;        /* plus petit */
  line-height: 1.45;        /* interligne un peu resserré */
  margin-top: 12px;
  max-width: 38ch;          /* légèrement plus étroit */
}


/* Responsive */
@media (max-width: 960px){
  .ph-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px){
  .ph-grid { grid-template-columns: 1fr; }
  .ph-caption { max-width: 52ch; }
}


/* ---- Cartes de la section Highlights ---- */
.product-highlights .ph-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .25s ease;
}

.product-highlights .ph-card:hover{
  transform:translateY(-4px);        /* petit lift de la carte (optionnel) */
}

/* Conteneur image : masque le débordement pour un zoom propre */
.product-highlights .ph-media{
  border-radius:16px;
  overflow:hidden;
  background:#f5f7fb;
  box-shadow:var(--shadow);
  aspect-ratio: 4 / 3;                /* adapte si besoin */
}

/* Image + transition */
.product-highlights .ph-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease;
  will-change:transform;
}

/* Effet zoom au survol / focus clavier / clic tactile */
.product-highlights .ph-card:hover .ph-media img,
.product-highlights .ph-card:focus-within .ph-media img,
.product-highlights .ph-card:active .ph-media img{
  transform:scale(1.08);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

/* Légende un peu plus discrète (si besoin) */
.product-highlights .ph-caption{
  font-size:.95rem;
  color:#3a4458;
  line-height:1.45;
}

/* Accessibilité : réduit les animations si l’utilisateur le demande */
@media (prefers-reduced-motion: reduce){
  .product-highlights .ph-media img,
  .product-highlights .ph-card{
    transition:none !important;
  }
}


/* ---- Menu test ---- */

.product-menu {
  padding: 60px 20px;
  background-color: #f2f2f2; /* fond gris clair */
}

.product-menu .section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 30px;
  font-weight: 700;
  color: #0d47a1; /* bleu cohérent avec les autres titres */
}

.product-menu .menu-image img {
  width: 100%;      /* prend toute la largeur */
  height: auto;     /* conserve le ratio */
  display: block;   /* évite espaces blancs */
  border-radius: 6px; /* optionnel : arrondi léger */
}


/* ---- Menu test getein1160 ---- */

.product-specs-list .section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 30px;
  font-weight: 700;
  color: #0d47a1; /* bleu cohérent avec les autres titres */
}

.product-specs-list {
  padding: 60px 20px;
  background: #fff; /* fond blanc pour rester propre */
}

.product-specs-list .section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 40px;
  font-weight: 700;
}

/* Liste style */
.specs-list {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.specs-list li {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  position: relative;
  padding-left: 28px;
}

.specs-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #0d47a1; /* bleu des titres */
  font-weight: bold;
}




<style>
  /* ---- Mentions légales (look & feel aligné) ---- */
  .legal-section { padding: 64px 0; background: #0f172a08; } /* léger fond comme les autres sections */
  .legal-wrap { max-width: 920px; margin: 0 auto; }
  .legal-meta { color: #6b7280; font-size: 14px; margin: 8px 0 24px; }
  .legal-block { margin: 12px 0 18px; line-height: 1.65; }
  .legal-block a { text-decoration: underline; }
  .legal-note { font-size: 14px; color: #6b7280; margin-top: 24px; }
  .legal-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
  .legal-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; }
  .legal-card h3 { margin-top: 0; }
  @media (min-width: 960px){
    .legal-grid { grid-template-columns: 1fr 1fr; }
  }

  /* lien du footer qui cible l’ancre */
  .footer a[href="#mentions-legales"] { text-decoration: underline; }
</style>