.hero{
  padding: 30px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 -1px 0 rgba(122,74,31,.25);
  background: radial-gradient(1200px 500px at 20% 10%, rgba(122,74,31,.22), transparent 60%),
              radial-gradient(900px 400px at 80% 0%, rgba(255,255,255,.06), transparent 60%);
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: center;
  min-width: 0;
}
.hero-title{ margin:0 0 10px 0; font-size: 38px; line-height: 1.1; }
.hero-lead{ margin:0 0 18px 0; color: var(--muted); font-size: 16px; }

.hero-cta{ display:flex; gap:12px; flex-wrap: wrap; margin-bottom: 12px; }
.proofs{
  display:flex; flex-wrap:wrap; gap:10px;
  padding:0; margin: 10px 0 0 0; list-style:none;
  color: var(--muted);
}
.proofs li{
  border:1px solid rgba(255,255,255,.12);
  padding: 6px 10px;
  border-radius: 999px;
}

.hero-media{
  min-width: 0;
  overflow: hidden;
}
.hero-image{
  width: 100%;
  max-width: 100%;
  height: 240px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-color: rgba(255,255,255,.03);
}

/* === Hero: zoom lent + pan AU CURSEUR (JS) — desktop only ===
   IMPORTANT: on désactive toute animation CSS type "Ken Burns"
   pour éviter le double effet et les collisions sur background-position. */
/* === Hero: zoom lent + pan AU CURSEUR (JS) — desktop only ===
   NOTE: on utilise any-hover/any-pointer car (pointer:fine) est faux sur certains PC Windows. */
@media (any-hover: hover) and (any-pointer: fine){
  .hero-media{
    overflow: hidden; /* garde le zoom propre dans les coins */
    border-radius: var(--radius);
  }

  .hero-image{
    background-size: 112%;
    background-position: 50% 50%;

    will-change: background-size, background-position, filter;

    transition:
      background-size 7s cubic-bezier(.18,.85,.2,1),
      filter .8s ease;

    cursor: default;
  }

  .hero-image.is-zooming{
    background-size: 150%;
    filter: saturate(1.08) contrast(1.08);
  }
}

@media (max-width: 860px){
  .hero-inner{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .hero-image{
    background-size: cover;
    background-position: center center;
  }
}

/* ✅ CTA (Classique uniquement)
   - même “respiration” que Prestige (padding sur la section)
   - mais fond "hero-like" (radials), pas le fond Prestige
   - scoped pour éviter toute surcharge si prestige.css est chargé */
html:not(.theme-prestige) .section-cta{
  /* fond identique à .hero (pages.css) */
  background:
    radial-gradient(1200px 500px at 20% 10%, rgba(122,74,31,.22), transparent 60%),
    radial-gradient(900px 400px at 80% 0%, rgba(255,255,255,.06), transparent 60%);

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  /* respiration type prestige */
  padding-top: 12px;
  padding-bottom: 14px;
}

@media (min-width: 860px){
  html:not(.theme-prestige) .section-cta{
    padding-top: 22px;
    padding-bottom: 24px;
  }
}


/* La box interne porte le padding/bordure, pas la section */
.cta-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;

  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: rgba(0,0,0,.25);
}

.cta-title{ margin:0 0 8px 0; font-size: 24px; }
.cta-text{ color: var(--muted); }

@media (max-width: 860px){
  .cta-box{ flex-direction: column; align-items:flex-start; }
}

.page{ padding: 34px 0 64px; }
.page-title{ margin: 0 0 18px 0; font-size: 34px; }
.bullets{ margin:0; padding-left: 18px; color: var(--muted); }

/* Contact : espace entre bullets et bouton */
.contact-card .bullets{
  margin: 0 0 16px 0;
}

/* CMS list (ul.bullets) — premium responsive
   Mobile: items "capsules" (lisibilité)
   Desktop: grid 2-3 colonnes + style allégé (moins de cartouches)
*/
ul.bullets{
  list-style: none;
  padding: 0;
  margin: 0.85rem 0 0;

  display: grid;
  gap: 12px;

  max-width: 92ch;
}

/* Base item (mobile/tablet): capsule lisible */
ul.bullets > li{
  position: relative;
  margin: 0;
  padding: 14px 16px 14px 44px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 160px at 18% 0%, rgba(122,74,31,.12), transparent 62%),
    rgba(0,0,0,.16);

  box-shadow: 0 12px 36px rgba(0,0,0,.22);

  color: rgba(255,255,255,.86);
  line-height: 1.45;
}

/* Puce premium */
ul.bullets > li::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;

  width: 12px;
  height: 12px;
  border-radius: 999px;

  background: rgba(122,74,31,.34);
  box-shadow:
    0 0 0 3px rgba(122,74,31,.10),
    0 10px 18px rgba(0,0,0,.22);
}

/* Respiration sous titre */
.section-title + ul.bullets{
  margin-top: 1rem;
}

/* === Desktop: grid + style plus "liste premium" (moins de cartouches) === */
@media (min-width: 980px){
  ul.bullets{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
    max-width: 110ch;
  }

  ul.bullets > li{
    padding: 12px 12px 12px 38px;
    border-radius: 14px;

    /* on enlève l'effet "panneau" */
    background: transparent;
    border-color: rgba(255,255,255,.07);
    box-shadow: none;

    /* petite séparation visuelle discrète */
    outline: 1px solid rgba(122,74,31,.07);
    outline-offset: -1px;
  }

  ul.bullets > li::before{
    left: 14px;
    top: 16px;
    width: 10px;
    height: 10px;

    background: rgba(122,74,31,.28);
    box-shadow: 0 0 0 3px rgba(122,74,31,.08);
  }
}

/* === Large desktop: 3 colonnes si tu veux un rendu plus "plaquette" === */
@media (min-width: 1280px){
  ul.bullets{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 980px){
  ul.bullets > li{
    color: rgba(255,255,255,.84);
  }
}

/* CMS list variant: cards (Prestige / approche) */
.list-cards{
  display: grid;
  gap: 14px;
  margin-top: 0.9rem;
}
.list-cards .card{
  padding: 16px;
  border-radius: 18px;
}
.list-cards .card-title{
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.list-cards .card-text{
  margin: 0;
  opacity: .9;
  line-height: 1.45;
}
/* list-cards: mise en page premium en desktop
   - 2 colonnes
   - si nombre impair: la 1ère card devient une "headline" pleine largeur (donc pas d'orpheline moche) */
@media (min-width: 860px){
  .list-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
  }

/* si impair (3,5,7...), on centre la DERNIÈRE card (orpheline) */
.list-cards:has(.card:nth-child(odd):last-child) .card:last-child{
  grid-column: 1 / -1;     /* prend la rangée */
  justify-self: center;    /* centrée */
  width: min(72ch, 82%);   /* pas full width */
}
}

/* Text variant: Prestige (premium block) */
.text-variant-prestige .container{
  position: relative;
  padding: 18px 16px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);

  /* ✅ évite le gros vide à droite en desktop */
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

.text-variant-prestige .section-title{
  margin-bottom: 10px;
  letter-spacing: .02em;
}

.text-variant-prestige .text-prestige-body{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  opacity: .92;
  max-width: 68ch;
}

/* filet discret "luxe" */
.text-variant-prestige .container::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:12px;
  height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0));
  opacity:.9;
}

/* === Prestige: resserrer l'espace entre "intro" (text-variant-prestige)
   et la section suivante (ex: what_we_do) === */
.section.text-variant-prestige{
  padding-bottom: 10px !important; /* réduit le bas de l'intro */
}

.section.text-variant-prestige + .section{
  padding-top: 10px !important;    /* réduit le haut de la section suivante */
}

/* Optionnel: sur desktop on peut laisser un poil plus d'air */
@media (min-width: 900px){
  .section.text-variant-prestige{
    padding-bottom: 16px !important;
  }
  .section.text-variant-prestige + .section{
    padding-top: 16px !important;
  }
}