/* ==========================================================================
   Mona override — L'Agence Mona
   Editorial maximaliste pop — magenta + cyan + fraunces italic + anton XXL
   Chargé en dernier pour prendre le dessus sur lagencemona.css
   ========================================================================== */

/* Hide vendor badge if injected */
.w-webflow-badge,
[class*="webflow-badge"] { display: none !important; }

/* --- Palette Mona --- */
:root {
  /* Couleurs signature Mona */
  --mona-magenta: #FF2EC4;
  --mona-magenta-hot: #F72AB4;
  --mona-cyan: #3FE9D0;
  --mona-red: #E8211C;
  --mona-lavande: #C9A3FF;
  --mona-yellow: #D8FB5C;
  --mona-navy: #191B5A;
  --mona-rose-pastel: #F9D6DD;
  --mona-creme: #FCF8F1;
  --mona-black: #0A0A0F;

  /* Palette additionnelle — declaration CASTING */
  --mona-blue-royal: #4F65E8;   /* fond bleu royal/cornflower */
  --mona-pink-hot:  #F089D4;    /* texte rose chaud */

  /* Override Uxoral : tous les orange/scarlet/vermilion deviennent magenta */
  --_color---scarlet: var(--mona-magenta);
  --_color---vermilion: var(--mona-magenta);

  /* Stacks de polices Mona */
  --mona-font-display: "Anton", "InterDisplay", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --mona-font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mona-font-body: "InterDisplay", system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   Typographie Mona
   ========================================================================== */

/* Display condensé XXL (Anton) — pour L'AGENCE MONA, MONA, headings sections */
.hero-heading,
.hero-text,
.display,
.heading-style-h1,
.heading-style-h2,
.font-size-5-5-xl {
  font-family: var(--mona-font-display) !important;
  font-weight: 400 !important; /* Anton n'a qu'un poids, 400 = regular */
  letter-spacing: 0em;
  text-transform: uppercase;
}

/* hero-heading : "L'AGENCE MONA" — en haut de page, plus modeste que MONA */
.hero-heading {
  letter-spacing: -0.01em;
}

/* hero-text : "MONA" en XXL — le signature moment — color block magenta */
.hero-text {
  color: var(--mona-magenta) !important;
  letter-spacing: -0.02em;
  line-height: 0.85;
  text-shadow: 0.06em 0.06em 0 rgba(63, 233, 208, 0.6); /* un souffle cyan derriere */
}

/* Sous-titre hero : "Agence de casting et d'influence" — Fraunces italic bold */
.hero-subtitle {
  font-family: var(--mona-font-serif) !important;
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* Declarations serifs : utile dans stats, pull quotes */
.mona-serif {
  font-family: var(--mona-font-serif) !important;
  font-weight: 800;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Anti-overflow pour tous les headings uppercase — MOBILE UNIQUEMENT
   ==========================================================================
   Sur desktop les mots "Casting, Influencers & Brands." etc. tiennent tres
   largement, la regle n'est pas necessaire. On la limite au mobile pour
   eviter tout side-effect sur le layout/animations desktop (animations template). */
@media (max-width: 767px) {
  .hero-heading,
  .hero-text,
  .display,
  .heading-style-h1,
  .heading-style-h2,
  .font-size-5-5-xl,
  .mona-declaration,
  .mona-tv-eyebrow,
  .mona-tv-heading,
  .mona-tv-count-label,
  .mona-sphere-intro h2,
  .mona-sphere-cta,
  .mona-sphere-modal__title,
  .mona-founder-hero h2,
  .mona-founder-catalog h3,
  .mona-legal-wrap h1 {
    overflow-wrap: break-word;
  }
}

/* ==========================================================================
   Color blocks & backgrounds Mona
   ========================================================================== */

/* Marquee clients — bande creme pleine largeur, logos en couleurs naturelles */
.logo-marque-main {
  background-color: var(--mona-creme) !important;
  color: var(--mona-black) !important;
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
  border-top: 3px solid var(--mona-magenta);
  border-bottom: 3px solid var(--mona-magenta);
}

.marque-content {
  color: var(--mona-black) !important;
}

/* Utilitaires : aplat de couleur pour injecter des color blocks dans le HTML */
.mona-bg-magenta { background-color: var(--mona-magenta) !important; color: var(--mona-black); }
.mona-bg-cyan    { background-color: var(--mona-cyan) !important; color: var(--mona-black); }
.mona-bg-red     { background-color: var(--mona-red) !important; color: var(--mona-creme); }
.mona-bg-lavande { background-color: var(--mona-lavande) !important; color: var(--mona-black); }
.mona-bg-yellow  { background-color: var(--mona-yellow) !important; color: var(--mona-black); }
.mona-bg-navy    { background-color: var(--mona-navy) !important; color: var(--mona-creme); }
.mona-bg-rose    { background-color: var(--mona-rose-pastel) !important; color: var(--mona-black); }
.mona-bg-creme   { background-color: var(--mona-creme) !important; color: var(--mona-black); }
.mona-bg-royal   { background-color: var(--mona-blue-royal) !important; color: var(--mona-pink-hot); }
.mona-bg-royal em { color: var(--mona-creme) !important; text-decoration-color: var(--mona-creme); }

.mona-text-magenta { color: var(--mona-magenta) !important; }
.mona-text-cyan    { color: var(--mona-cyan) !important; }
.mona-text-yellow  { color: var(--mona-yellow) !important; }
.mona-text-red     { color: var(--mona-red) !important; }
.mona-text-lavande { color: var(--mona-lavande) !important; }
.mona-text-navy    { color: var(--mona-navy) !important; }

/* ==========================================================================
   Surligneur feutre (brush highlighter) - pour mots cles
   Usage : <span class="mona-highlight">mot</span>
           <span class="mona-highlight cyan">mot</span>
   ========================================================================== */

.mona-highlight {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 0 0.18em;
  color: var(--mona-black);
  white-space: nowrap;
}
.mona-highlight::before {
  content: "";
  position: absolute;
  inset: 0.1em -0.1em 0.15em -0.12em;
  background: var(--mona-yellow);
  z-index: -1;
  transform: rotate(-1.4deg);
  border-radius: 8px 18px 12px 22px / 14px 10px 20px 8px;
}
.mona-highlight.cyan::before    { background: var(--mona-cyan); }
.mona-highlight.magenta::before { background: var(--mona-magenta); }
.mona-highlight.lavande::before { background: var(--mona-lavande); }
.mona-highlight.yellow::before  { background: var(--mona-yellow); }
.mona-highlight.red::before     { background: var(--mona-red); color: var(--mona-creme); }

/* ==========================================================================
   Accents couleur — alternance magenta / cyan
   (.highlight-text.orrenge devient cyan pour rythme visuel)
   ========================================================================== */

.highlight-text.orrenge {
  color: var(--mona-cyan) !important;
}

/* Liens hover → cyan (accent secondaire) */
.button-link:hover,
a.font-size-sm.brand-color:hover,
.services-button:hover .font-size-sm.brand-color,
.mail:hover,
.social-text:hover {
  color: var(--mona-cyan) !important;
}

/* ==========================================================================
   Bandeau declaration (pleine largeur, aplat saturé + typo XXL)
   Usage : <section class="mona-declaration mona-bg-red">CASTING.</section>
   ========================================================================== */
.mona-declaration {
  padding: clamp(4rem, 10vw, 9rem) clamp(1.5rem, 5vw, 4rem);
  font-family: var(--mona-font-display);
  font-size: clamp(4rem, 14vw, 14rem);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  text-align: left;
  overflow: hidden;
}

.mona-declaration__sub {
  display: block;
  font-family: var(--mona-font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.8rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-top: clamp(1.5rem, 3vw, 3rem);
  max-width: 40ch;
}

.mona-declaration__kicker {
  display: block;
  font-family: var(--mona-font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-top: clamp(1rem, 2.4vw, 2rem);
  max-width: 30ch;
}

.mona-declaration__kicker em {
  font-family: var(--mona-font-serif);
  font-style: italic;
  font-weight: 900;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Marquee clients (wordmarks texte en attendant logos vectoriels)
   ========================================================================== */

.marque-logo-text {
  font-family: var(--mona-font-display);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: currentColor;
  display: inline-block;
  width: auto !important;
  text-transform: uppercase;
}

.marque-content:has(.marque-logo-text) {
  width: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Logos images (SVG/PNG/ICO) — couleurs naturelles sur fond creme */
.marque-logo-img {
  height: 2.6rem;
  width: auto !important;
  max-width: 10rem;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.marque-content:has(.marque-logo-img) {
  width: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  display: flex;
  align-items: center;
}

/* Cellule stack : logo en haut, nom de marque en Anton en dessous */
.marque-content.marque-stack {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.marque-label {
  font-family: var(--mona-font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mona-black);
  line-height: 1;
  white-space: nowrap;
}

/* Wordmark texte dans la marquee creme : forcer noir pour contraste */
.marque-logo-text {
  color: var(--mona-black) !important;
}

/* Responsive : logos un peu plus petits sur mobile */
@media (max-width: 767px) {
  .marque-logo-img { height: 1.8rem; max-width: 7rem; }
  .marque-logo-text { font-size: 1.6rem; }
  .marque-label { font-size: 0.8rem; }
  .marque-content:has(.marque-logo-img) { padding-left: 0.75rem; padding-right: 0.75rem; }
  .marque-content:has(.marque-logo-text) { padding-left: 0.75rem; padding-right: 0.75rem; }
  .marque-content.marque-stack { padding-left: 0.75rem; padding-right: 0.75rem; gap: 0.35rem; }
}

/* ==========================================================================
   Section TV emissions — "Sonia Nouri a caste pour"
   Bento poster-wall : chaque emission isolee dans sa tile, rotations legeres,
   palette Mona cyclee, intro editoriale avec hierarchie typographique.
   ========================================================================== */
.mona-tv-section {
  --tv-gap: clamp(0.75rem, 1.2vw, 1.25rem);
  background: var(--mona-creme);
  color: var(--mona-black);
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 5vw, 5rem);
  position: relative;
  overflow: hidden;
}

/* Accent decoratif : tache magenta floue en coin, facon edito fashion */
.mona-tv-section::before {
  content: "";
  position: absolute;
  top: -8rem;
  right: -8rem;
  width: 24rem;
  height: 24rem;
  background: var(--mona-magenta);
  opacity: 0.09;
  border-radius: 50%;
  filter: blur(30px);
  pointer-events: none;
}

.mona-tv-wrap {
  max-width: 90rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) 2fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
  position: relative;
  z-index: 1;
}

/* --- Colonne intro a gauche --- */
.mona-tv-intro {
  position: sticky;
  top: 2rem;
  padding-right: 1rem;
}

.mona-tv-eyebrow {
  font-family: var(--mona-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mona-black);
  opacity: 0.55;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mona-tv-slash {
  color: var(--mona-magenta);
  opacity: 1;
  font-weight: 700;
}

/* Heading : hierarchie verticale propre, 4 lignes stackees
   20+      (hero magenta Anton XXL)
   ans      (unit Anton black, baseline serree)
   les plus grandes   (Fraunces italic magenta, accent editorial)
   emissions TV.      (Anton caps, closing line)
*/
.mona-tv-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-family: var(--mona-font-display);
  font-weight: 400;
  color: var(--mona-black);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.mona-tv-num {
  color: var(--mona-magenta);
  font-size: clamp(5rem, 12vw, 10rem);
  line-height: 0.82;
  display: inline-flex;
  align-items: flex-start;
}
.mona-tv-plus {
  font-size: 0.5em;
  line-height: 1;
  margin-left: -0.02em;
  transform: translateY(0.15em);
  display: inline-block;
}

.mona-tv-unit {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  color: var(--mona-black);
  line-height: 0.9;
  margin-top: -0.08em;
  letter-spacing: -0.01em;
}

.mona-tv-phrase {
  font-family: var(--mona-font-serif);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.05;
  color: var(--mona-navy);
  text-transform: none;
  letter-spacing: -0.01em;
  margin-top: 0.75rem;
  max-width: 14ch;
}
.mona-tv-phrase em {
  font-style: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: var(--mona-magenta);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-decoration-color: var(--mona-magenta);
  text-underline-offset: 0.12em;
}

.mona-tv-end {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  color: var(--mona-black);
  line-height: 0.95;
  margin-top: 0.2rem;
  letter-spacing: -0.01em;
}

.mona-tv-sub {
  font-family: var(--mona-font-body);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--mona-black);
  opacity: 0.72;
  margin: 2.25rem 0 0;
  max-width: 28ch;
}

.mona-tv-count {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--mona-black);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.mona-tv-count-num {
  font-family: var(--mona-font-display);
  font-size: 4rem;
  line-height: 0.9;
  color: var(--mona-magenta);
  font-weight: 400;
}

.mona-tv-count-label {
  font-family: var(--mona-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--mona-black);
}

/* --- Carousel rotatif (remplace le bento) --- */
.mona-tv-carousel {
  position: relative;
  width: 100%;
  min-width: 320px;
  aspect-ratio: 1;
  max-width: 520px;
  justify-self: center;
  perspective: 1200px;
}

.mona-tv-carousel__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.mona-tv-carousel__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transition: transform 0.18s linear;
  will-change: transform;
}

.mona-tv-carousel__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--mona-creme);
  border: 3px solid var(--mona-black);
  box-shadow: 8px 10px 0 var(--mona-magenta),
              0 30px 60px -20px rgba(0, 0, 0, 0.45);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1),
              box-shadow 0.3s cubic-bezier(0.2, 0.9, 0.25, 1);
  transform-style: preserve-3d;
  cursor: pointer;
}

.mona-tv-carousel__frame:hover {
  transform: scale(1.12);
  box-shadow: 12px 14px 0 var(--mona-cyan),
              0 40px 80px -20px rgba(0, 0, 0, 0.55);
}

.mona-tv-carousel__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.85rem;
  background: var(--mona-creme);
  display: block;
  transition: transform 0.5s ease-out;
}

.mona-tv-carousel__frame:hover img {
  transform: scale(1.08);
}

.mona-tv-carousel__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 46, 196, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

.mona-tv-carousel__frame:hover .mona-tv-carousel__shine {
  opacity: 1;
}

/* --- Responsive TV section --- */
@media (max-width: 1024px) {
  .mona-tv-wrap {
    grid-template-columns: 1fr;
  }
  .mona-tv-intro {
    position: static;
    padding-right: 0;
  }
  .mona-tv-heading {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
  }
  .mona-tv-carousel {
    max-width: 420px;
  }
}

@media (max-width: 640px) {
  .mona-tv-count {
    margin-top: 1.5rem;
  }
  .mona-tv-count-num {
    font-size: 3rem;
  }
  .mona-tv-carousel {
    max-width: 340px;
  }
}

/* ==========================================================================
   Section Sphere — 50 talents en orbite 3D (vanilla JS port)
   ========================================================================== */
.mona-sphere-section {
  background: var(--mona-black);
  color: var(--mona-creme);
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}

.mona-sphere-section::before {
  content: "";
  position: absolute;
  top: 20%; left: -12rem;
  width: 28rem; height: 28rem;
  background: radial-gradient(circle, var(--mona-magenta) 0%, transparent 70%);
  opacity: 0.25;
  pointer-events: none;
  filter: blur(12px);
}
.mona-sphere-section::after {
  content: "";
  position: absolute;
  bottom: 10%; right: -10rem;
  width: 24rem; height: 24rem;
  background: radial-gradient(circle, var(--mona-cyan) 0%, transparent 70%);
  opacity: 0.18;
  pointer-events: none;
  filter: blur(16px);
}

.mona-sphere-wrap {
  max-width: 92rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

.mona-sphere-intro .eyebrow {
  font-family: var(--mona-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mona-creme);
  opacity: 0.55;
  margin-bottom: 1.5rem;
}
.mona-sphere-intro .eyebrow .slash { color: var(--mona-magenta); opacity: 1; font-weight: 700; }

.mona-sphere-intro h2 {
  font-family: var(--mona-font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: var(--mona-creme);
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}
.mona-sphere-intro h2 em {
  font-family: var(--mona-font-serif);
  font-style: italic;
  font-weight: 900;
  text-transform: none;
  color: var(--mona-magenta);
}
.mona-sphere-intro p {
  font-family: var(--mona-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: #ffffff;
  opacity: 1;
  margin: 0 0 2rem;
  max-width: 34ch;
}

.mona-sphere-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  font-family: var(--mona-font-body);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--mona-creme);
  background: rgba(255,255,255,0.05);
}
.mona-sphere-hint::before {
  content: "✦";
  color: var(--mona-magenta);
}

.mona-sphere-container-wrap {
  justify-self: center;
}

.mona-sphere-cta {
  display: inline-block;
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 2.5rem;
  /* padding-block 0.85rem pour atteindre 44px de hauteur (WCAG 2.5.5 tap target).
     Font 0.78rem * line-height 1 ~= 10.9px + 13.6px*2 padding-block = ~38px hauteur
     avec box-sizing content-box ; on push a 0.95rem pour marge de securite. */
  padding: 0.85rem 0.25rem;
  min-height: 44px;
  font-family: var(--mona-font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: color 0.25s ease, border-color 0.25s ease, letter-spacing 0.25s ease;
}
.mona-sphere-cta:hover {
  color: var(--mona-magenta);
  border-bottom-color: var(--mona-magenta);
  letter-spacing: 0.16em;
}

.mona-sphere {
  mask-image: radial-gradient(circle, black 65%, transparent 95%);
  -webkit-mask-image: radial-gradient(circle, black 65%, transparent 95%);
}

@media (max-width: 900px) {
  .mona-sphere-wrap { grid-template-columns: 1fr; }
  .mona-sphere-intro { text-align: center; }
  .mona-sphere-intro p { margin-left: auto; margin-right: auto; }
}

/* --- Modal talent --- */
.mona-sphere-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.mona-sphere-modal.is-open {
  display: flex;
  animation: mona-modal-fade 0.25s ease-out;
}
.mona-sphere-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mona-sphere-modal__card {
  position: relative;
  background: var(--mona-creme);
  color: var(--mona-black);
  max-width: 28rem;
  width: 100%;
  border: 3px solid var(--mona-black);
  box-shadow: 10px 10px 0 var(--mona-magenta);
  overflow: hidden;
  animation: mona-modal-pop 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}
.mona-sphere-modal__close {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  width: 2.2rem; height: 2.2rem;
  border: 2px solid var(--mona-black);
  background: var(--mona-creme);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s;
}
.mona-sphere-modal__close:hover { background: var(--mona-magenta); color: var(--mona-creme); }
.mona-sphere-modal__img-wrap {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--mona-black);
}
.mona-sphere-modal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mona-sphere-modal__body {
  padding: 1.5rem;
}
.mona-sphere-modal__title {
  font-family: var(--mona-font-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  line-height: 1;
}
.mona-sphere-modal__handle {
  display: inline-block;
  font-family: var(--mona-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--mona-magenta);
  text-decoration: none;
  margin-bottom: 0.3rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}
.mona-sphere-modal__handle:hover { border-bottom-color: var(--mona-magenta); }
.mona-sphere-modal__reach {
  font-family: var(--mona-font-body);
  font-size: 0.9rem;
  color: var(--mona-black);
  opacity: 0.65;
  letter-spacing: 0.02em;
}

@keyframes mona-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mona-modal-pop {
  from { transform: scale(0.88); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   Toggle langue (FR / EN / ES) dans le navbar
   ========================================================================== */
.mona-lang-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mona-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--mona-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  line-height: 1;
}

.mona-lang-btn:hover {
  color: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

.mona-lang-btn.is-active {
  background: var(--mona-magenta);
  color: var(--mona-black);
}

.mona-lang-btn svg {
  width: 1.1rem;
  height: 0.75rem;
  display: block;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Nav responsive — language toggle + navbar layout
   ==========================================================================
   Comportement par breakpoint du language toggle :
   - >= 992px : 3 boutons drapeau + code FR/EN/ES, padding .3rem .7rem
   - 768-991px : idem, mais gap du toggle resserre
   - 480-767px : drapeau seul (span caches), tap target 44x44px min
   - < 480px  : drapeau seul, toggle colle au bord, gap minimal

   Le bouton Contact CTA (nav-button-wrap) est masque par le template à <480px,
   ce qui libere l'espace pour le toggle + burger. */

@media (max-width: 991px) {
  /* Tablet — on garde les codes FR/EN/ES mais on resserre */
  .mona-lang-toggle {
    gap: 0.2rem;
    padding: 0.2rem;
  }
  .mona-lang-btn {
    padding: 0.3rem 0.55rem;
    font-size: 0.7rem;
    gap: 0.35rem;
  }
}

@media (max-width: 767px) {
  /* Mobile — on masque les codes texte, on garde seulement le drapeau.
     Tap target minimum 44x44 px (WCAG 2.5.5 AAA / 2.5.8 AA). */
  .mona-lang-btn span {
    display: none;
  }
  .mona-lang-toggle {
    gap: 0.15rem;
    padding: 0.2rem;
  }
  .mona-lang-btn {
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
    gap: 0;
  }
  .mona-lang-btn svg {
    width: 22px;
    height: 15px;
  }
  /* Navbar container : on reduit le padding horizontal pour que les 3 elements
     (burger gauche · lang toggle · Contact CTA) tiennent sur une ligne. */
  .navbar-container {
    gap: 0.5rem;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

@media (max-width: 479px) {
  /* Petit mobile — le nav-button-wrap Contact est deja masque par le template.
     On a donc juste : burger + lang toggle. Tap target 44x44 maintenu (WCAG 2.5.5). */
  .mona-lang-toggle {
    gap: 0.1rem;
    padding: 0.15rem;
  }
  .mona-lang-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .mona-lang-btn svg {
    width: 20px;
    height: 14px;
  }
  .navbar-container {
    gap: 0.4rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 359px) {
  /* Ultra-petit (iPhone SE 1ere gen / old Android) : on garde le tap target 44x44
     au minimum (WCAG 2.5.5) quitte a serrer encore le gap container. */
  .mona-lang-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .mona-lang-btn svg {
    width: 18px;
    height: 12px;
  }
}

/* ==========================================================================
   Nav Contact button — tap target WCAG 2.5.5 (44x44 minimum)
   ========================================================================== */
.nav-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 767px) {
  .nav-button {
    min-height: 44px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
}

/* ==========================================================================
   Footer legal links — Confidentialite / CGU sous le MONA display
   ========================================================================== */

.mona-footer-legal-links {
  flex-wrap: wrap;
  justify-content: center;
}

.mona-footer-legal-links a {
  /* Tap target acceptable sur mobile : 8px de padding vertical + line-height body
     donne environ 32-36px de hauteur tappable. On pousse a 44 en mobile. */
  padding: 0.25rem 0.1rem;
  display: inline-block;
}

@media (max-width: 767px) {
  .mona-footer-legal-links {
    gap: 1rem !important;
    font-size: 0.75rem !important;
  }
  .mona-footer-legal-links a {
    padding: 0.5rem 0.2rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .mona-footer-legal-links span {
    /* separateur "/" — on reduit pour eviter les wrap visuellement casses */
    opacity: 0.5;
  }
}

@media (max-width: 479px) {
  .mona-footer-legal-links {
    gap: 0.75rem !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.06em !important;
  }
}

/* ==========================================================================
   Nav overlay — lisibilite mobile
   ========================================================================== */
@media (max-width: 479px) {
  .nav-menu-overlay .container.large {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Menu burger : le template duplique chaque libelle (2 divs .nav-link-text par lien)
   pour animer au hover sur desktop (un slide up, l'autre apparait).
   Sur mobile tactile il n'y a pas de hover, les 2 copies s'affichent empilees
   et le libelle apparait double. On masque la 2eme + on laisse le bloc
   s'auto-dimensionner au lieu des 2rem figes. */
@media (max-width: 991px) {
  .nav-link-block {
    height: auto !important;
    overflow: visible !important;
  }
  .nav-link-block .nav-link-text + .nav-link-text {
    display: none !important;
  }
}

/* ==========================================================================
   prefers-reduced-motion — nav transforms
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mona-lang-btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   Accessibility : prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   RESPONSIVE — pages secondaires (about / contact / 404 / legal)
   Breakpoints cibles : 1280 / 991 / 767 / 479 / 375 px
   Zero scroll horizontal garanti a 375px.
   ==========================================================================*/

/* ---------- GLOBAL : empecher le scroll horizontal ----------
   ATTENTION : `overflow-x: hidden` sur un ancetre casse `position: sticky`
   des descendants (la services-grid desktop utilise sticky-wrapper 300vh +
   services-grid sticky top:12rem pour l'animation scroll IX3).
   `overflow: clip` ne cree PAS de scroll container et preserve sticky.
   Fallback `overflow-x: hidden` uniquement sur mobile (≤767) ou le sticky
   services est desactive (.services-grid { display: none } @991, voir
   lagencemona.css L3493). */
html, body { max-width: 100vw; overflow-x: clip; }
.page-wrapper { overflow-x: clip; }
/* Fallback pour les navigateurs sans support overflow:clip (<2023) */
@supports not (overflow: clip) {
  @media (max-width: 991px) {
    html, body { overflow-x: hidden; }
    .page-wrapper { overflow-x: hidden; }
  }
}
img, video, svg { max-width: 100%; }

/* Tout inline-grid verbeux reste dans la viewport */
.mona-founder-grid,
.mona-founder-voice-grid,
.mona-press-row { max-width: 100%; }

/* ==========================================================================
   about.html — hero + about-header-bottom
   ==========================================================================*/

/* About hero : heading peut etre tres large — clamp responsive */
.hero-heading {
  font-size: clamp(3rem, 12vw, 9rem) !important;
  line-height: 0.92;
  word-break: break-word;
}

/* About header bottom : sur mobile (<767px) la colonne sociale avec width:11rem
   fixe cause des overflows et pousse hors grid. Liberation totale sur mobile. */
@media (max-width: 767px) {
  .about-header-bottom {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
    justify-items: flex-start;
  }
  .about-social-wrap {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .about-button-wrap {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100%;
  }
  .about-header-info-left {
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 1rem;
  }
  .about-header-info-left .align-center-mobile { text-align: left !important; }
  /* Socials : min-height 44px pour touch target */
  .about-social-link {
    min-height: 2.75rem;
    display: inline-flex !important;
    align-items: center;
  }
}

/* Tres petit mobile (479-375) : socials compactes, bouton full width */
@media (max-width: 479px) {
  .about-social-wrap {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }
  .about-social-link {
    padding: 0.55rem 1rem !important;
    font-size: 0.8rem;
  }
  .about-button-wrap .btn-primary {
    width: 100%;
  }
}

/* ==========================================================================
   about.html — Block 1 : mona-founder-hero (photo + texte)
   ==========================================================================*/

/* Filigrane "01" : clamp + contenu aux bords pour eviter scroll sur petit mobile */
@media (max-width: 767px) {
  .mona-founder-hero [aria-hidden="true"] {
    font-size: clamp(10rem, 36vw, 18rem) !important;
    top: -0.5rem !important;
    right: -1.5rem !important;
  }
  .mona-founder-hero { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

@media (max-width: 479px) {
  .mona-founder-hero [aria-hidden="true"] {
    font-size: clamp(8rem, 40vw, 14rem) !important;
    opacity: 0.05 !important;
  }
  /* Photo : scale le shadow offset + rotation moins agressive sur petit ecran */
  .mona-founder-photo > div {
    box-shadow: 8px 8px 0 var(--mona-magenta) !important;
  }
  .mona-founder-photo { max-width: 18rem !important; }
  /* Badge "#monagang since 2020" : reduit pour ne pas deborder */
  .mona-founder-photo > div + div {
    font-size: 0.65rem !important;
    padding: 0.45rem 0.85rem !important;
    left: -0.5rem !important;
  }
  /* Barre signature Sonia Nouri / Fondatrice : stack au besoin */
  .mona-founder-hero div[style*="border-top: 2px solid"] {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
}

/* ==========================================================================
   about.html — Block 2 : mona-founder-catalog (pills emissions)
   ==========================================================================*/

/* Les pills ont font-size:.85rem — sur 375px certains titres longs debordent.
   Laisser wrap natif mais reduire padding pour faciliter la mise en grille. */
@media (max-width: 767px) {
  .mona-founder-catalog { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .mona-founder-catalog div[style*="flex-wrap: wrap"] {
    gap: 0.5rem !important;
  }
  .mona-founder-catalog span[style*="border: 1.5px solid"] {
    font-size: 0.78rem !important;
    padding: 0.45rem 0.9rem !important;
  }
  /* Chaines TF1/M6/Endemol : taille reduite + wrap */
  .mona-founder-catalog div[style*="border-top: 1px solid"] {
    gap: 0.75rem 1rem !important;
  }
  .mona-founder-catalog span[style*="font-size: 1.6rem"] {
    font-size: 1.2rem !important;
  }
}

@media (max-width: 479px) {
  .mona-founder-catalog span[style*="border: 1.5px solid"] {
    font-size: 0.72rem !important;
    padding: 0.4rem 0.8rem !important;
  }
}

/* ==========================================================================
   about.html — Block 3 : mona-founder-voice (citation + press links)
   ==========================================================================*/

/* Le guillemet « inline style font-size:12rem cause probleme sur mobile — clamp */
@media (max-width: 767px) {
  .mona-founder-voice-grid > div {
    padding: 3rem 1.5rem !important;
  }
  .mona-founder-voice-grid span[aria-hidden="true"] {
    font-size: clamp(6rem, 22vw, 10rem) !important;
    top: -0.25rem !important;
    left: 0.75rem !important;
  }
  /* Press rows : colonne numero '01' + titre + fleche sur 3col strict,
     a 767- la 1re colonne 4rem est trop grosse, on reduit */
  .mona-press-row {
    grid-template-columns: 2rem 1fr auto !important;
    gap: 0.85rem !important;
    padding: 1.25rem 0.25rem !important;
  }
  .mona-press-row span[style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
  }
  .mona-press-row span[style*="font-size: 1.25rem"] {
    font-size: 1rem !important;
  }
  .mona-press-row:hover {
    padding-left: 0.5rem !important;
  }
}

@media (max-width: 479px) {
  .mona-press-row { padding: 1rem 0.25rem !important; }
  .mona-press-row span[style*="font-size: 1.25rem"] {
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
  }
  .mona-founder-voice blockquote {
    font-size: 1.1rem !important;
    line-height: 1.35 !important;
  }
}

/* ==========================================================================
   about.html — Hero heading wrapper + spacing
   ==========================================================================*/

/* Reduire le gros spacer 28xl en haut sur mobile (il fait 28rem par defaut) */
@media (max-width: 767px) {
  .about-header-main {
    gap: 2rem !important;
  }
}

/* ==========================================================================
   contact.html — formulaire + grid
   ==========================================================================*/

/* Submit button : minimum touch target 44px */
.submit-button {
  min-height: 2.75rem;
}

@media (max-width: 767px) {
  .submit-button {
    min-height: 3rem;
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    font-size: 0.95rem;
  }
  /* Text field : le template applique padding 5xl a 479- (gigantesque), on reduit */
  .text-field {
    height: 3rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem; /* empeche le zoom iOS */
  }
  .text-field.messege-area {
    height: 6.5rem !important;
    padding: 0.75rem 1rem !important;
  }
  /* Heading contact : tres grand par defaut (font-size-5xl ~= 3.2rem+) */
  .contact-heading {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
    line-height: 1.2 !important;
  }
  /* Form title */
  .form-title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
  /* Contact link (phone + email) par defaut tres gros — clamp + word-break */
  .contact-link {
    font-size: clamp(1.1rem, 5vw, 1.7rem) !important;
    line-height: 1.3 !important;
    word-break: break-word;
  }
  /* Socials */
  .social-link-wrap {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }
  .contact-social-link {
    padding: 0.65rem 1.1rem !important;
    min-height: 2.75rem;
    display: inline-flex !important;
    align-items: center;
  }
}

/* Tres petit mobile 479- et 375 : compactage final */
@media (max-width: 479px) {
  .contact-link {
    font-size: 1.1rem !important;
  }
  .hero-heading.contact {
    font-size: clamp(2.5rem, 11vw, 5rem) !important;
  }
  .contact-left-top {
    gap: 1rem !important;
  }
  .max-width-13 {
    max-width: 100% !important;
  }
}

/* Lang toggle + bouton Contact nav — eviter overlap sur <400px */
@media (max-width: 479px) {
  .navbar-container {
    gap: 0.35rem !important;
  }
  .mona-lang-toggle {
    padding: 0.2rem !important;
    gap: 0.15rem !important;
  }
  .mona-lang-btn {
    padding: 0.3rem !important;
  }
}

/* ==========================================================================
   Footer — responsive sur toutes pages
   ==========================================================================*/

/* La typo "MONA" display = 20.75rem par defaut.
   A 991px : 12.1rem, a 767px : 8.5rem, a 479px : 5rem.
   Sur tres petits ecrans (<=375px), reduire encore pour eviter overflow. */
@media (max-width: 375px) {
  .display {
    font-size: 4rem !important;
  }
}

/* Footer legal links : reduire gap sur mobile */
@media (max-width: 767px) {
  .mona-footer-legal-links {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem !important;
    justify-content: center;
    font-size: 0.7rem !important;
    text-align: center;
  }
  .footer-desplay-wrapper {
    gap: 1.5rem !important;
  }
  .fotter-copy-right {
    text-align: center;
    justify-content: center !important;
  }
  .fotter-copy-right .font-size-sm {
    font-size: 0.75rem !important;
    line-height: 1.45;
    word-break: break-word;
  }
}

@media (max-width: 479px) {
  .mona-footer-legal-links {
    font-size: 0.65rem !important;
    letter-spacing: 0.05em !important;
  }
}

/* ==========================================================================
   404.html — page not found
   ==========================================================================*/

/* Les numeros 404 a 479px sont 9rem — OK mais les rotations (-9deg/-170deg)
   sortent parfois de la viewport. On ajoute un container overflow hidden. */
._404-number-wrap {
  overflow: hidden;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

@media (max-width: 375px) {
  ._404-number {
    font-size: 7rem !important;
  }
  ._404-content-block {
    gap: 1.5rem !important;
  }
  .inner-heading {
    font-size: 1.5rem !important;
    line-height: 1.2;
  }
}

/* ==========================================================================
   Pages legales — confidentialite.html + cgu.html
   ==========================================================================*/

/* Les pages legales ont deja .mona-legal-wrap avec clamp.
   On renforce juste sur tres petits ecrans. */
@media (max-width: 479px) {
  .mona-legal-wrap {
    padding: 3rem 1.25rem 2.5rem !important;
  }
  .mona-legal-wrap h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: 1 !important;
  }
  .mona-legal-wrap h2 {
    font-size: 1.15rem !important;
    margin-top: 2rem !important;
    padding-top: 1rem !important;
  }
  .mona-legal-wrap p {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }
  .mona-legal-wrap ul {
    padding-left: 1rem !important;
  }
  .mona-back-home {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   Marquee clients (contact.html et home) — empecher scroll horizontal parent
   ==========================================================================*/
.logo-marque-main { max-width: 100%; overflow: hidden; }

/* ==========================================================================
   RESPONSIVE index.html — Sections custom homepage
   Cible : pas de scroll horizontal a 375px, touch targets >= 44px.
   Sections : Hero / Marquee clients / Declaration / Sphere / Featured Work
   / Services / Process / TV carousel / FAQ / Testimonials / Footer mobile.
   Les regles globales (overflow-x, img, hero-heading, logo-marque-main) sont
   deja couvertes plus haut — on ne les redouble pas.
   ==========================================================================*/

/* === Hero — 3D card carousel (6 photos talents) ===
   animations template pilote les translate3d inline. On ne touche PAS aux transforms
   le template : on clip l'overflow parent + on scale-down le container +
   on force le centrage du bloc titre MONA qui est position:absolute. */
/* Hero container : on NE touche pas au rendu desktop.
   Sur mobile/tablette on force l'overflow:hidden + centrage pour que
   le "MONA" XXL position:absolute ne sorte pas de l'ecran. */
@media (max-width: 991px) {
  .hero-middle {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .hero-image-wrapper {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }
  .image-container {
    max-width: min(23.1rem, 70vw);
    margin: 0 auto;
  }
  /* hero-title-block : le "MONA" pink XXL est position:absolute (z-index:-1
     par le template). Sur mobile il peut sortir de l'ecran car il herite d'un
     positionnement desktop. On le recentre explicitement. */
  .hero-title-block {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100%;
    text-align: center;
    pointer-events: none;
  }
}

@media (max-width: 991px) {
  /* Tablette : carte _6 est deja opacity:0 mais occupe l'espace — la masque
     pour que la "MONA" visible soit centree sur la moyenne des cartes. */
  .card._6 { display: none !important; }
}
@media (max-width: 767px) {
  /* Grand mobile / petit tablette : on enleve aussi les cartes extremes
     _1 (-72%) et _5 (+72%) pour que le bloc cartes + "MONA" soit bien
     centre autour de la carte _3 (translate3d 0%). */
  .card._1, .card._5 { display: none !important; }
  .image-container {
    width: min(16rem, 55vw) !important;
    height: min(22rem, 75vw) !important;
  }
}
@media (max-width: 479px) {
  /* Mobile standard : garde seulement la carte centrale _3 pour un cadrage
     propre. Les _2 et _4 meme a +/- 40% sont clipees sur ecran etroit. */
  .card._2, .card._4 {
    /* On les garde visibles mais on reduit leur translate via scale down */
  }
  .image-container {
    width: min(12rem, 50vw) !important;
    height: min(16rem, 66vw) !important;
  }
}

/* MONA XXL : clamp pour ne jamais deborder + centre via text-align */
.hero-text {
  font-size: clamp(4rem, 22vw, 25rem) !important;
  line-height: 0.82;
  letter-spacing: -0.03em !important;
  word-break: break-word;
  text-align: center;
}
.hero-subtitle {
  font-size: clamp(1rem, 2.2vw, 1.6rem);
}
/* Hero review block : stack propre sur mobile */
@media (max-width: 767px) {
  .hero-review-block {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 1rem;
  }
  .reviewer-left, .reviewer-right {
    width: 100%;
    justify-content: flex-start;
  }
  .max-width-35 { padding: 0 1rem; }
}

/* === Marquee clients (logos) ===
   .logo-marque-main a deja overflow:hidden (global plus haut).
   On securise le track + on compacte les cellules sur mobile. */
.logo-marque-list {
  flex-shrink: 0;
  min-width: max-content;
}
@media (max-width: 991px) {
  .marque-content {
    height: 8.5rem !important;
    padding: 1.5rem 2.5rem !important;
  }
}
@media (max-width: 479px) {
  .marque-content {
    height: 6.5rem !important;
    padding: 1rem 1.5rem !important;
  }
  .logo-marque-main {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

/* === Declaration "CASTING." (bleu royal + rose) ===
   CASTING. est unhyphenable. Clamp agressif pour qu'il ne deborde pas a 375px.
   Le clamp definit dans .mona-declaration (ligne 172) est deja correct — on
   ajoute juste un overflow-wrap et une reduction forcee a 375px. */
.mona-declaration {
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (max-width: 375px) {
  .mona-declaration {
    font-size: clamp(2.4rem, 13vw, 4rem);
  }
}
.mona-declaration__sub {
  max-width: 100%;
  hyphens: auto;
}
.mona-declaration__kicker {
  max-width: 100%;
}

/* Hero — thumbnails brand cards (remplace les portraits ronds) ===
   On agrandit, on enleve le chevauchement, on arrondit en 6px (rule Mona),
   et on ajoute un mini bord noir pour bien marquer chaque card. */
.review-image-block--brand {
  gap: 0.4rem;
}
.reviewer-image--brand {
  width: 4.32rem !important;
  height: 4.32rem !important;
  margin-left: 0 !important;
  border-radius: 6px;
  border: 1.5px solid #000;
  object-fit: cover;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08);
}
@media (max-width: 479px) {
  .reviewer-image--brand {
    width: 3.36rem !important;
    height: 3.36rem !important;
  }
}
@media (max-width: 479px) {
  .mona-declaration__kicker {
    font-size: clamp(1.1rem, 4.5vw, 1.6rem);
    margin-top: 1rem;
  }
}
@media (max-width: 375px) {
  .mona-declaration__kicker {
    font-size: 1.05rem;
  }
}

/* === Sphere 3D — 50 talents ===
   Deja responsive (JS + CSS 900px). On clamp les headings + CTA. */
.mona-sphere-section {
  padding-left: clamp(1rem, 5vw, 4rem);
  padding-right: clamp(1rem, 5vw, 4rem);
}
.mona-sphere-intro h2 {
  word-break: break-word;
}
@media (max-width: 900px) {
  .mona-sphere-wrap { gap: 2rem; }
}
@media (max-width: 479px) {
  .mona-sphere-hint {
    font-size: 0.75rem;
    padding: 0.5rem 0.8rem;
  }
  .mona-sphere-cta {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    margin-top: 1.75rem;
    text-align: center;
  }
}

/* === Featured Work — 3 cartes images ===
   .project-collection-list est deja flex-column (core.css L2406).
   .project-card a height:90vh (eats viewport). Reduit sur mobile. */
@media (max-width: 991px) {
  .featured-card-wrapper {
    padding-left: clamp(1rem, 3vw, 1.5rem) !important;
    padding-right: clamp(1rem, 3vw, 1.5rem) !important;
  }
  .project-card {
    height: 60vh !important;
    min-height: 360px;
  }
}
@media (max-width: 767px) {
  .project-card {
    height: 50vh !important;
    min-height: 320px;
    padding: clamp(1.25rem, 4vw, 2.5rem) !important;
  }
}
@media (max-width: 479px) {
  .project-card {
    height: auto !important;
    min-height: 280px;
    aspect-ratio: 4 / 5;
  }
}

/* === "Casting, Influencers & Brands." — 5 services pills ===
   services-header flex-column @991 (core.css L3975). OK.
   services-grid 2col → 1col @991 via services-tab. OK.
   On secure les pills (wrap + touch target). */
.services-pill-wrap {
  flex-wrap: wrap;
  gap: 0.5rem;
}
.services-pill { max-width: 100%; }
@media (max-width: 479px) {
  .services-pill {
    padding: 0.5rem 0.85rem !important;
  }
  .services-title {
    font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    word-break: break-word;
  }
}

/* Niches couvertes — sub-rangee sous les pills services */
.services-niches {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 0.85rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.18);
}
.services-niches__label {
  font-family: var(--mona-font-display);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mona-magenta, #FF2EC4);
}
.services-niches__list {
  font-family: var(--mona-font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: #000;
}
@media (max-width: 479px) {
  .services-niches__list {
    font-size: 0.95rem;
  }
}

/* === "Comment ca fonctionne" — 4 etapes process ===
   .working-process-step : grid 4col → 1col @479 (core.css L4422).
   Passage brutal — on intercale 2col @991. process-card-wrapper gap 7.16rem +
   .font-super-xl 15.625rem par defaut, a reduire sur mobile. */
.working-process-step {
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 991px) {
  .working-process-step {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Spacer hide-tablet : annule les vides desktop qui cassent le flow 2col mobile */
  .spaching-20-xl.hide-tablet { display: none; }
}
@media (max-width: 767px) {
  .working-process-step {
    grid-template-columns: 1fr !important;
  }
  .process-card-wrapper {
    gap: 2rem !important;
    padding: 2rem 1.5rem 1.5rem !important;
  }
  .font-super-xl {
    font-size: clamp(5rem, 18vw, 9rem) !important;
  }
}

/* === TV Carousel 3D — emissions TV ===
   JS lit clientWidth au DOMContentLoaded. La classe .mona-tv-carousel est
   ajoutee APRES la lecture — donc #mona-tv-carousel doit deja avoir une
   largeur au moment de la lecture. On force un sizing sur l'id. */
#mona-tv-carousel {
  width: 100%;
  min-width: 280px;
  max-width: 520px;
  aspect-ratio: 1;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .mona-tv-section {
    padding-left: clamp(1rem, 4vw, 3rem);
    padding-right: clamp(1rem, 4vw, 3rem);
  }
  .mona-tv-wrap { gap: 2rem; }
}
@media (max-width: 767px) {
  .mona-tv-num { font-size: clamp(4rem, 18vw, 8rem) !important; }
  .mona-tv-unit { font-size: clamp(1.6rem, 5vw, 2.8rem) !important; }
  .mona-tv-phrase {
    font-size: clamp(1.2rem, 4.5vw, 2rem) !important;
    max-width: 100%;
  }
  .mona-tv-end { font-size: clamp(1.3rem, 4.5vw, 2rem) !important; }
  #mona-tv-carousel { max-width: 360px; }
}
@media (max-width: 479px) {
  #mona-tv-carousel { max-width: 300px; }
  .mona-tv-count-num { font-size: 2.5rem !important; }
  .mona-tv-count-label { font-size: 0.75rem !important; }
}
@media (max-width: 375px) {
  #mona-tv-carousel { max-width: 260px; }
}

/* === FAQ ===
   .faq-wrapper : 2col → 1col @991 (core.css L3432). OK.
   On secure tap target + la taille du texte des questions. */
@media (max-width: 767px) {
  .faq-tab-link {
    padding: 1.5rem !important;
    min-height: 44px;
  }
  .faq-quetion-wrapper { gap: 0.5rem; }
  .font-size-base.faq {
    font-size: clamp(0.95rem, 3.2vw, 1.05rem) !important;
    line-height: 1.35;
  }
}

/* === Testimonials (marquee horizontal .marque-list) ===
   Anti-overflow parent + stack vertical naturel. */
.marque-card-main {
  overflow: hidden;
  max-width: 100vw;
}
.marque-list {
  flex-shrink: 0;
  min-width: max-content;
}
@media (max-width: 479px) {
  .testiomonial-card {
    max-width: min(20rem, 85vw) !important;
  }
}

/* === Footer homepage (display "MONA" + liens legaux + pill socials) ===
   .footer-grid : 3col → 1col @479 (core.css L4476).
   Le MONA display peut deborder sur tres petit mobile — deja gere plus haut. */
.footer-desplay-wrapper {
  flex-wrap: wrap;
  gap: 1.5rem;
}
@media (max-width: 767px) {
  /* Garde les socials (Instagram/WhatsApp/Email/YouTube) sur UNE SEULE LIGNE
     meme sur mobile, avec wrap propre si vraiment trop etroit. */
  .pill-wraapr {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center !important;
    gap: 0.5rem 1rem;
  }
  .pill-devider {
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 1rem;
    white-space: nowrap;
  }
  .pill-devider .social-link {
    white-space: nowrap;
  }
}
@media (max-width: 479px) {
  .pill-wraapr {
    gap: 0.4rem 0.75rem;
  }
  .pill-devider {
    gap: 0.75rem;
  }
  .pill-devider .font-size-sm {
    font-size: 0.78rem;
  }
}
@media (max-width: 479px) {
  .footer-desplay-wrapper {
    padding: 1.5rem 0 !important;
    text-align: center;
    justify-content: center;
  }
}

/* === Touch targets globaux (WCAG 2.5.5 / 2.5.8) === */
@media (max-width: 991px) and (pointer: coarse) {
  .services-button,
  .primary-button,
  .mail,
  .social-text,
  .social-ichon,
  .social-link,
  .footer-link {
    min-height: 44px;
  }
  .social-ichon {
    min-width: 44px;
  }
}

/* === 375px — petit mobile (iPhone SE) ===
   Derniers filets de securite sur le plus petit viewport cible. */
@media (max-width: 375px) {
  .hero-text {
    font-size: clamp(3.2rem, 20vw, 5rem) !important;
  }
  .mona-declaration__sub {
    font-size: 0.95rem;
  }
  .mona-sphere-intro h2 {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }
  .marque-content.marque-stack {
    padding: 0.75rem 1rem !important;
  }
  .marque-logo-img {
    height: 1.6rem;
  }
  .marque-logo-text {
    font-size: 1.4rem;
  }
}

/* ================================
   Manifeste / Promesse Mona
   Section instagram-card style entre sphere et Featured Work
   ================================ */
.mona-manifesto {
  background: var(--mona-yellow);
  color: var(--mona-black);
  padding: clamp(4rem, 9vw, 8rem) clamp(1.5rem, 5vw, 4rem);
  border-top: 3px solid var(--mona-black);
  border-bottom: 3px solid var(--mona-black);
  position: relative;
}
.mona-manifesto__wrap {
  max-width: 64rem;
  margin: 0 auto;
}
.mona-manifesto__eyebrow {
  font-family: var(--mona-font-body);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: var(--mona-black);
}
.mona-manifesto__title {
  font-family: var(--mona-font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.5vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 2.5rem;
  color: var(--mona-black);
}
.mona-manifesto__title em {
  font-family: var(--mona-font-serif);
  font-style: italic;
  font-weight: 900;
  color: var(--mona-magenta);
  text-transform: none;
  letter-spacing: -.01em;
}
.mona-manifesto__points {
  list-style: none;
  padding: 0;
  margin: 0 0 3rem;
  display: grid;
  gap: 1.4rem;
}
.mona-manifesto__points li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  align-items: start;
  background: var(--mona-creme);
  border: 2px solid var(--mona-black);
  padding: 1.1rem 1.3rem;
  box-shadow: 5px 5px 0 var(--mona-black);
}
.mona-manifesto__emoji {
  font-size: 1.6rem;
  line-height: 1.2;
}
.mona-manifesto__points p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--mona-black);
}
.mona-manifesto__points strong {
  font-weight: 700;
}
.mona-manifesto__cta-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--mona-black);
}
.mona-manifesto__hook {
  font-family: var(--mona-font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--mona-black);
  line-height: 1.05;
}
.mona-manifesto__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 1.6rem;
  background: var(--mona-black);
  color: var(--mona-creme);
  font-family: var(--mona-font-body);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--mona-black);
  box-shadow: 5px 5px 0 var(--mona-magenta);
  transition: transform .15s, box-shadow .15s, background .15s;
  white-space: nowrap;
}
.mona-manifesto__cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--mona-magenta);
  background: var(--mona-magenta);
  color: var(--mona-creme);
}
.mona-manifesto__tag {
  margin-top: 2rem;
  font-family: var(--mona-font-body);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: lowercase;
  opacity: .7;
}
@media (max-width: 720px) {
  .mona-manifesto__points li {
    grid-template-columns: 2rem 1fr;
    padding: .95rem 1rem;
    box-shadow: 4px 4px 0 var(--mona-black);
  }
  .mona-manifesto__emoji { font-size: 1.4rem; }
  .mona-manifesto__cta-block { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .mona-manifesto__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mona-manifesto__cta { transition: none; }
}

/* ================================
   Services hashtag tag (above pills)
   #castinginfluencers / #casting / #booking
   ================================ */
.services-hashtag {
  display: inline-block;
  font-family: var(--mona-font-body);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--mona-magenta);
  text-transform: lowercase;
  border-bottom: 2px solid var(--mona-magenta);
  padding: 0 .15rem .3rem;
  margin-bottom: 1.25rem;
}

/* ================================
   Mona Loves you — founder card on homepage
   Section preview linking to about.html
   ================================ */
.mona-loves {
  background: var(--mona-creme);
  color: var(--mona-black);
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem);
  border-top: 3px solid var(--mona-black);
  border-bottom: 3px solid var(--mona-black);
  position: relative;
  overflow: hidden;
}
.mona-loves::before {
  content: "";
  position: absolute;
  top: -2rem;
  right: -3rem;
  width: 22rem;
  height: 22rem;
  background: var(--mona-pink-pastel, #F9D6DD);
  border-radius: 50%;
  opacity: .5;
  z-index: 0;
  pointer-events: none;
}
.mona-loves__wrap {
  max-width: 76rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.mona-loves__photo {
  position: relative;
  border: 3px solid var(--mona-black);
  box-shadow: 12px 12px 0 var(--mona-magenta);
  transform: rotate(-1.5deg);
  overflow: hidden;
  background: var(--mona-creme);
  aspect-ratio: 1;
  max-width: 28rem;
  margin: 0 auto;
}
.mona-loves__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mona-loves__badge {
  position: absolute;
  bottom: -1rem;
  left: -1rem;
  background: var(--mona-cyan);
  color: var(--mona-black);
  border: 2px solid var(--mona-black);
  padding: .5rem 1rem;
  font-family: var(--mona-font-body);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 var(--mona-black);
  z-index: 2;
}
.mona-loves__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--mona-font-body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mona-black);
  margin-bottom: 1.25rem;
}
.mona-loves__eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 2px;
  background: var(--mona-magenta);
}
.mona-loves__title {
  font-family: var(--mona-font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  color: var(--mona-black);
}
.mona-loves__title em {
  font-family: var(--mona-font-serif);
  font-style: italic;
  font-weight: 900;
  color: var(--mona-magenta);
  text-transform: none;
  letter-spacing: -.01em;
}
.mona-loves__role {
  font-family: var(--mona-font-display);
  font-size: 1.15rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  color: var(--mona-black);
  opacity: .75;
}
.mona-loves__quote {
  font-family: var(--mona-font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.45;
  margin: 0 0 2rem;
  color: var(--mona-black);
  max-width: 40ch;
  border-left: 3px solid var(--mona-magenta);
  padding-left: 1.25rem;
}
.mona-loves__cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  background: var(--mona-black);
  color: var(--mona-creme);
  font-family: var(--mona-font-body);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--mona-black);
  box-shadow: 5px 5px 0 var(--mona-magenta);
  transition: transform .15s, box-shadow .15s, background .15s;
  white-space: nowrap;
}
.mona-loves__cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--mona-magenta);
  background: var(--mona-magenta);
  color: var(--mona-creme);
}
@media (max-width: 860px) {
  .mona-loves__wrap {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .mona-loves__photo { max-width: 22rem; }
}
@media (max-width: 480px) {
  .mona-loves { padding: 3rem 1.25rem; }
  .mona-loves__photo { max-width: 18rem; box-shadow: 8px 8px 0 var(--mona-magenta); }
  .mona-loves__title { font-size: 2rem; }
  .mona-loves__cta { width: 100%; justify-content: center; }
}

/* Section Ils parlent de nous — captures Instagram polaroids */
.mona-presse {
  background: var(--mona-creme, #FCF8F1);
  padding: 6rem 2rem 7rem;
  position: relative;
  overflow: hidden;
}
.mona-presse::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(255,46,196,0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(63,233,208,0.08), transparent 60%);
  pointer-events: none;
}
.mona-presse__wrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.mona-presse__head {
  text-align: center;
  margin: 0 auto 4rem;
  max-width: 42rem;
}
.mona-presse__eyebrow {
  font-family: var(--mona-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mona-black);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.mona-presse__slash {
  color: var(--mona-magenta);
  font-weight: 700;
}
.mona-presse__title {
  font-family: var(--mona-font-display);
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--mona-black);
  margin: 0 0 1.5rem;
}
.mona-presse__title em {
  font-family: var(--mona-font-serif);
  font-style: italic;
  font-weight: 900;
  text-transform: none;
  color: var(--mona-magenta);
}
.mona-presse__sub {
  font-family: var(--mona-font-body);
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(0,0,0,0.65);
  margin: 0;
}
.mona-presse__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem;
  align-items: start;
  justify-items: center;
  padding: 1rem 0 2rem;
}
.mona-presse__card {
  margin: 0;
  background: #fff;
  border: 4px solid var(--mona-black);
  padding: 0.9rem 0.9rem 1.4rem;
  width: 100%;
  max-width: 240px;
  box-shadow: 10px 10px 0 var(--mona-magenta), 14px 14px 0 var(--mona-black);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
  cursor: pointer;
}
.mona-presse__card img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 0.6rem;
}
.mona-presse__card figcaption {
  font-family: var(--mona-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  text-align: center;
}
/* Random tilts for polaroid scatter feel */
.mona-presse__card--1 { transform: rotate(-3deg); }
.mona-presse__card--2 { transform: rotate(2deg) translateY(20px); }
.mona-presse__card--3 { transform: rotate(-1.5deg) translateY(-10px); }
.mona-presse__card--4 { transform: rotate(3.5deg) translateY(15px); }
.mona-presse__card:hover {
  transform: rotate(0deg) translateY(0) scale(1.04);
  box-shadow: 14px 14px 0 var(--mona-magenta), 18px 18px 0 var(--mona-black);
  z-index: 2;
}

@media (max-width: 991px) {
  .mona-presse { padding: 4rem 1.5rem 5rem; }
  .mona-presse__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
  .mona-presse__card { max-width: 220px; box-shadow: 8px 8px 0 var(--mona-magenta), 12px 12px 0 var(--mona-black); }
}
@media (max-width: 540px) {
  .mona-presse__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .mona-presse__card { max-width: 280px; }
  .mona-presse__card--1, .mona-presse__card--2, .mona-presse__card--3, .mona-presse__card--4 { transform: rotate(-1.5deg); }
  .mona-presse__card:nth-child(even) { transform: rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mona-presse__card { transition: none; transform: none !important; }
}

/* Variant: La presse en parle (3 articles) */
.mona-presse--articles { padding-top: 4rem; }
.mona-presse__grid--three {
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
.mona-presse__cardlink {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
  max-width: 260px;
  background: #fff;
  border: 4px solid var(--mona-black);
  padding: 0.9rem 0.9rem 1.4rem;
  box-shadow: 10px 10px 0 var(--mona-magenta), 14px 14px 0 var(--mona-black);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
  cursor: pointer;
}
.mona-presse__cardlink .mona-presse__card--inner {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  max-width: none;
  cursor: inherit;
  transform: none;
}
.mona-presse__cardlink .mona-presse__card--inner:hover {
  transform: none;
  box-shadow: none;
}
.mona-presse__cardlink.mona-presse__card--1 { transform: rotate(-2.5deg); }
.mona-presse__cardlink.mona-presse__card--2 { transform: rotate(1.5deg) translateY(18px); }
.mona-presse__cardlink.mona-presse__card--3 { transform: rotate(-1deg) translateY(-8px); }
.mona-presse__cardlink:hover {
  transform: rotate(0deg) translateY(0) scale(1.04);
  box-shadow: 14px 14px 0 var(--mona-cyan, #3FE9D0), 18px 18px 0 var(--mona-black);
  z-index: 2;
}
@media (max-width: 991px) {
  .mona-presse__grid--three { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
  .mona-presse__cardlink { max-width: 220px; box-shadow: 8px 8px 0 var(--mona-magenta), 12px 12px 0 var(--mona-black); }
}
@media (max-width: 540px) {
  .mona-presse__grid--three { grid-template-columns: 1fr; gap: 2.2rem; }
  .mona-presse__cardlink { max-width: 280px; }
  .mona-presse__cardlink.mona-presse__card--1,
  .mona-presse__cardlink.mona-presse__card--2,
  .mona-presse__cardlink.mona-presse__card--3 { transform: rotate(-1.5deg); }
  .mona-presse__cardlink.mona-presse__card--2 { transform: rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mona-presse__cardlink { transition: none; transform: none !important; }
}