/*
Theme Name: Maison Mesbah
Theme URI: https://www.maisonmesbah.com/
Author: Maison Mesbah
Description: Thème sur mesure de Maison Mesbah : site vitrine en profondeur, blocs Elementor sur mesure et journal (blog). À utiliser avec l'extension « Maison Mesbah Essentiels ».
Version: 2.5.6
Tested up to: 6.8
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: maison-mesbah
*/
  /* Palette Maison Mesbah, tirée du logo (lampe : #EFB143 / #FDC755).
     Contrastes vérifiés (WCAG AA) : or sur noir 10,3:1 · bronze sur ivoire 6,3:1 · ardoise sur ivoire 6,3:1 · gris sur noir 9,4:1.
     L'or (#EFB143) ne s'utilise jamais en texte sur fond clair : prendre le bronze. */
  :root {
    color-scheme: dark;
    --mm-noir: #0B0B0C;
    --mm-nuit: #17171A;
    --mm-or: #EFB143;
    --mm-lumiere: #FDC755;
    --mm-bronze: #7A4F0E;
    --mm-ivoire: #F6F1E9;
    --mm-sable: #E8E0D2;
    --mm-ardoise: #5C5852;
    --mm-gris: #B8B3AA;
    --mm-blanc: #FFFFFF;
    --obsidienne: var(--mm-noir);
    --champagne: var(--mm-or);
    --halo: rgba(239, 177, 67, .14);
    --rx: 0deg; --ry: 0deg;
  }
  html { scroll-behavior: smooth; }
  body { background: var(--obsidienne); }
  h1, h2, h3 { text-wrap: balance; }
  /* Cormorant dessine par défaut des chiffres « elzéviriens » (0 et 1 ressemblent à o et I) : chiffres alignés dans les titres */
  .font-display, .mm-numero { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
  .etape[hidden] { display: none !important; }
  details summary::-webkit-details-marker { display: none; }

  /* Grain et halo de nuit */
  .grain::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .06;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  .halo { background: radial-gradient(60% 50% at 70% 35%, var(--halo), transparent 70%); }

  /* Cartes inclinables */
  .incline { transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .incline .reflet { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
    background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(253,199,85,.14), transparent 60%); }
  .incline:hover .reflet { opacity: 1; }
  .incline .profond { transform: translateZ(40px); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .incline { transition: none; transform: none; }
  }

/* Contenu éditorial : articles et pages */
.contenu-mm { color: rgba(255,255,255,.78); font-size: 1.0625rem; line-height: 1.8; }
.contenu-mm > * + * { margin-top: 1.25em; }
.contenu-mm h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.2; color: #fff; margin-top: 2.2em; padding-top: 1em; border-top: 1px solid rgba(255,255,255,.12); }
.contenu-mm h3 { font-size: 1.25rem; font-weight: 500; color: #fff; margin-top: 1.8em; }
.contenu-mm a { color: var(--mm-lumiere); text-decoration: underline; text-underline-offset: 3px; }
.contenu-mm a:hover { color: var(--mm-or); }
.contenu-mm strong { color: #fff; font-weight: 600; }
.contenu-mm ul, .contenu-mm ol { padding-left: 1.25em; }
.contenu-mm ul { list-style: disc; } .contenu-mm ol { list-style: decimal; }
.contenu-mm li + li { margin-top: .4em; }
.contenu-mm li::marker { color: var(--mm-or); }
.contenu-mm blockquote { border-left: 1px solid var(--mm-or); padding-left: 1.5rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.6rem; line-height: 1.35; color: #fff; font-style: italic; }
.contenu-mm img { max-width: 100%; height: auto; }
.contenu-mm figure figcaption { font-size: .8rem; color: rgba(255,255,255,.6); margin-top: .5rem; }
.contenu-mm table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.contenu-mm th, .contenu-mm td { border-bottom: 1px solid rgba(255,255,255,.12); padding: .7rem .8rem; text-align: left; }
.contenu-mm th { color: #fff; font-weight: 500; }
.contenu-mm dl { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 10px 24px; }
.contenu-mm dt { color: #fff; font-weight: 500; } .contenu-mm dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .contenu-mm dl { grid-template-columns: 1fr; gap: 2px; } .contenu-mm dd { margin-bottom: 12px; } }
.contenu-mm .a-completer { color: var(--mm-lumiere); }
.contenu-mm .maj { font-size: .9rem; color: rgba(255,255,255,.6); }
/* Articles : encadré « En bref », sommaire, ancres, légendes */
.contenu-mm .mm-en-bref { border: 1px solid rgba(239,177,67,.35); background: rgba(239,177,67,.06); padding: 1.25rem 1.5rem; color: rgba(255,255,255,.88); }
.contenu-mm .mm-sommaire { border-left: 1px solid var(--mm-or); padding: .25rem 0 .25rem 1.5rem; }
.contenu-mm .mm-sommaire__titre { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--mm-or); }
.contenu-mm .mm-sommaire ol { margin-top: .75rem; font-size: .95rem; line-height: 1.6; }
.contenu-mm .mm-sommaire li + li { margin-top: .5em; }
.contenu-mm .mm-sommaire a { color: rgba(255,255,255,.75); text-decoration: none; }
.contenu-mm .mm-sommaire a:hover, .contenu-mm .mm-sommaire a:focus-visible { color: var(--mm-lumiere); }
.contenu-mm h2[id], .contenu-mm h3[id] { scroll-margin-top: 7rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
figcaption a:hover { color: var(--mm-lumiere); }
.nav-links { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.nav-links .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.15); padding: 0 .9rem; font-size: .8rem; letter-spacing: .15em; }
.nav-links .page-numbers.current, .nav-links a.page-numbers:hover { border-color: var(--mm-or); color: var(--mm-or); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* -------------------------------------------------------------------------
   En-tête : logo blanc sur fond sombre, noir sur fond clair ; la lampe s'allume
   ---------------------------------------------------------------------- */
.mm-entete { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--mm-blanc);
  transition: background-color .5s ease, color .5s ease, transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
.admin-bar .mm-entete { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .mm-entete { top: 46px; } }
.mm-entete__barre { position: relative; z-index: 2; max-width: 80rem; margin: 0 auto; padding: 0 1rem; height: 5.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; transition: height .5s ease; }
@media (min-width: 640px) { .mm-entete__barre { padding: 0 2rem; } }
.mm-entete.est-defile, .mm-entete.menu-ouvert { color: var(--mm-noir); background: rgba(246,241,233,.94); box-shadow: 0 1px 0 var(--mm-sable);
  -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px); }
/* Menu ouvert : pas de flou (il limiterait le menu plein écran à la hauteur de l'en-tête) */
.mm-entete.menu-ouvert, .mm-entete.est-defile.menu-ouvert { background: var(--mm-ivoire); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mm-entete.est-defile .mm-entete__barre { height: 4.25rem; }
.mm-entete.est-cache:not(.menu-ouvert) { transform: translateY(-110%); }

/* Logo */
.mm-logo { display: block; flex: none; width: 3.75rem; height: 3.75rem; color: inherit; border-radius: 2px; transition: width .5s ease, height .5s ease; }
.est-defile .mm-logo { width: 3.1rem; height: 3.1rem; }
.mm-logo:focus-visible { outline: 2px solid var(--mm-or); outline-offset: 6px; }
.mm-logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mm-logo .mm-halo, .mm-logo .mm-faisceau { opacity: 0; transform-box: fill-box; transform-origin: 50% 0; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.mm-logo .mm-halo { transform-origin: 50% 50%; }
.mm-logo .mm-abat, .mm-logo .mm-ampoule { transition: filter .35s ease, opacity .35s ease; }
.mm-logo:not(.est-allume) .mm-abat { filter: saturate(.1) brightness(.7); }
.mm-logo:not(.est-allume) .mm-ampoule { opacity: .4; }
.mm-logo.est-allume .mm-halo { opacity: .8; animation: mm-respire 4.5s ease-in-out infinite; }
.mm-logo.est-allume .mm-faisceau { opacity: .7; }
.est-defile .mm-logo.est-allume .mm-faisceau, .menu-ouvert .mm-logo.est-allume .mm-faisceau { opacity: .35; }
.mm-logo.est-allume:hover .mm-halo, .mm-logo.est-allume:focus-visible .mm-halo { animation: none; opacity: 1; transform: scale(1.35); }
.mm-logo.est-allume:hover .mm-faisceau, .mm-logo.est-allume:focus-visible .mm-faisceau { opacity: .95; transform: scaleY(1.15); }
@keyframes mm-respire { 0%, 100% { opacity: .62; } 50% { opacity: .92; } }

/* Navigation */
.mm-nav { display: none; }
@media (min-width: 1024px) { .mm-nav { display: block; } }
.mm-nav ul { display: flex; align-items: center; gap: 2.25rem; }
.mm-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; opacity: .78; transition: opacity .3s ease; }
.mm-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: var(--mm-or); transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.est-defile .mm-nav a::after { background: var(--mm-bronze); }
.mm-nav a:hover, .mm-nav a:focus-visible, .mm-nav a[aria-current] { opacity: 1; }
.mm-nav a:hover::after, .mm-nav a:focus-visible::after, .mm-nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.mm-nav a:focus-visible { outline: none; }

/* Actions */
.mm-entete__actions { display: flex; align-items: center; gap: .75rem; }
.mm-bouton { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 44px; padding: .75rem 1.25rem; background: var(--mm-or); color: var(--mm-noir);
  font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; transition: background-color .35s ease; }
@media (min-width: 640px) { .mm-bouton { padding: .8rem 1.6rem; font-size: .72rem; } }
.mm-bouton:hover { background: var(--mm-lumiere); }
.mm-bouton:focus-visible { outline: 2px solid var(--mm-or); outline-offset: 3px; }
.mm-bouton svg { width: .9rem; height: .9rem; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.mm-bouton:hover svg { transform: translateX(4px); }
.mm-bouton--contour { background: transparent; color: var(--mm-or); border: 1px solid rgba(239,177,67,.6); transition: background-color .35s ease, color .35s ease; }
.mm-bouton--contour:hover { background: var(--mm-or); color: var(--mm-noir); }

/* Bouton menu (mobile) */
.mm-burger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: inherit; background: none; border: 0; cursor: pointer; }
@media (min-width: 1024px) { .mm-burger { display: none; } }
.mm-burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .45s cubic-bezier(.2,.7,.2,1), top .45s cubic-bezier(.2,.7,.2,1); }
.mm-burger span:nth-child(1) { top: 17px; }
.mm-burger span:nth-child(2) { top: 26px; }
.mm-burger[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.mm-burger[aria-expanded="true"] span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }
.mm-burger:focus-visible { outline: 2px solid var(--mm-or); outline-offset: 2px; }

/* Menu plein écran (mobile) */
.mm-menu-mobile { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: 7rem 1.5rem 2.5rem; background: var(--mm-ivoire); color: var(--mm-noir); overflow-y: auto;
  visibility: hidden; opacity: 0; transition: opacity .45s ease, visibility 0s linear .45s; }
.menu-ouvert .mm-menu-mobile { visibility: visible; opacity: 1; transition: opacity .45s ease, visibility 0s; }
.mm-menu-mobile ul { display: grid; gap: .25rem; }
.mm-menu-mobile li { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 60ms + 120ms); }
.menu-ouvert .mm-menu-mobile li { opacity: 1; transform: none; }
.mm-menu-mobile ul a { display: flex; align-items: baseline; justify-content: space-between; min-height: 56px; padding: .5rem 0; border-bottom: 1px solid var(--mm-sable);
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 2rem; font-weight: 400; line-height: 1.2; }
.mm-menu-mobile ul a::after { content: "→"; font-family: Manrope, system-ui, sans-serif; font-size: 1rem; color: var(--mm-bronze); transform: translateX(-6px); opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.mm-menu-mobile ul a:hover::after, .mm-menu-mobile ul a:focus-visible::after { transform: none; opacity: 1; }
.mm-menu-mobile ul a:focus-visible { outline: none; color: var(--mm-bronze); border-bottom-color: var(--mm-bronze); }
.mm-menu-mobile__pied { display: grid; gap: 1rem; font-size: .875rem; color: var(--mm-ardoise); }
.mm-menu-mobile__pied a { color: var(--mm-noir); }
.mm-menu-mobile .mm-bouton { width: 100%; padding: 1rem; }
html.mm-sans-defilement { overflow: hidden; }
/* Protège l'en-tête des styles globaux de liens et boutons (Elementor, extensions) */
.mm-entete .mm-logo, .mm-entete .mm-burger, .mm-entete .mm-nav a, .mm-entete .mm-menu-mobile ul a, .mm-entete .mm-menu-mobile__pied a:not(.mm-bouton), footer .mm-logo { color: inherit; }
.mm-entete .mm-bouton { color: var(--mm-noir); }
.mm-entete .mm-burger { background: none; border: 0; border-radius: 0; padding: 0; }
/* Petits téléphones (360 px et moins) : tout tient sur une ligne, le menu reste entièrement visible */
@media (max-width: 399px) {
  .mm-entete__barre { gap: .75rem; padding: 0 .875rem; }
  .mm-logo, .est-defile .mm-logo { width: 3.25rem; height: 3.25rem; }
  .mm-entete__actions { gap: .25rem; }
  .mm-entete__actions .mm-bouton { padding: .7rem .85rem; letter-spacing: .14em; }
  .mm-entete__actions .mm-bouton svg { display: none; }
}
@media (max-width: 339px) { .mm-entete__actions .mm-bouton { display: none; } }
/* Écrans tactiles : liens du pied de page et du bas du menu assez grands pour le doigt (44 px) */
@media (pointer: coarse) {
  footer li > a, .mm-menu-mobile__pied p > a { display: inline-flex; align-items: center; min-height: 44px; }
  footer ul.space-y-2 > li:not([hidden]) ~ li:not([hidden]) { margin-top: 0; }
  footer ul.gap-y-2 { row-gap: 0; }
  .mm-menu-mobile__pied { gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-entete, .mm-entete__barre, .mm-logo, .mm-menu-mobile, .mm-menu-mobile li, .mm-burger span, .mm-nav a::after { transition: none !important; }
  .mm-logo .mm-halo { animation: none !important; }
}
.wp-caption, .alignnone { max-width: 100%; }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignwide { max-width: none; }

/* Elementor : rend aux blocs natifs les marges et puces que la remise à zéro du thème retire */
.elementor-widget-text-editor p,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol { margin-bottom: .9em; }
.elementor-widget-text-editor ul { list-style: disc; padding-left: 1.25em; }
.elementor-widget-text-editor ol { list-style: decimal; padding-left: 1.25em; }
.elementor-widget-text-editor li::marker { color: var(--mm-or); }
.elementor-widget-text-editor a { color: var(--mm-lumiere); text-decoration: underline; text-underline-offset: 3px; }
.elementor-widget-text-editor strong { color: #fff; font-weight: 600; }
.elementor-widget-text-editor h2, .elementor-widget-text-editor h3 { font-family: "Cormorant Garamond", Georgia, serif; color: #fff; margin: 1.2em 0 .5em; }
.elementor-widget-text-editor h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 400; }
.elementor-widget-text-editor h3 { font-size: 1.5rem; font-weight: 400; }
.elementor-widget-image img { display: inline-block; }
/* Les blocs Maison Mesbah occupent toute la largeur, sans marge ajoutée par Elementor */
.elementor-widget[class*="elementor-widget-mm-"] { width: 100%; }
.elementor-widget[class*="elementor-widget-mm-"] > .elementor-widget-container { margin: 0; padding: 0; }

/* -------------------------------------------------------------------------
   Pages intérieures : icônes au trait, cartes, sections claires, textes provisoires
   ---------------------------------------------------------------------- */
.mm-icone-cadre { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border: 1px solid currentColor; border-radius: 0; }
.mm-icone-cadre .mm-icone { width: 1.6rem; height: 1.6rem; }
/* Le trait se dessine quand l'icône apparaît (si les animations sont autorisées) */
.mm-dessin .mm-icone-cadre .mm-icone * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.3,.6,.2,1); }
.mm-dessin .mm-icone-cadre.est-visible .mm-icone * { stroke-dashoffset: 0; }
.mm-carte { transition: background-color .4s ease; }
.mm-carte__lien::after { content: ""; position: absolute; inset: 0; }
.mm-carte__lien:focus-visible { outline: none; }
.mm-carte:has(.mm-carte__lien:focus-visible) { outline: 2px solid var(--mm-or); outline-offset: -2px; }
.mm-carte:has(.mm-carte__lien):hover { background-color: var(--mm-nuit); }
.mm-clair .mm-carte:has(.mm-carte__lien):hover { background-color: #EFE7DA; }
.mm-clair { color-scheme: light; }
.mm-clair .mm-bouton:focus-visible { outline-color: var(--mm-bronze); }
mark.mm-a-completer { background: rgba(239,177,67,.2); color: inherit; padding: 0 .2em; outline: 1px dashed rgba(239,177,67,.7); outline-offset: 1px; }
.mm-clair mark.mm-a-completer { background: rgba(122,79,14,.12); outline-color: var(--mm-bronze); }
@media (prefers-reduced-motion: reduce) { .mm-dessin .mm-icone-cadre .mm-icone * { stroke-dashoffset: 0; transition: none; } }
/* Filets fins entre cartes, sans case colorée quand la dernière ligne est incomplète */
.mm-carte { box-shadow: 0 0 0 .5px rgba(255,255,255,.14); }
.mm-clair .mm-carte { box-shadow: 0 0 0 .5px var(--mm-sable); }

/* -------------------------------------------------------------------------
   Illustrations au trait : silhouette de Rabat, carte des quartiers, trait d'or
   ---------------------------------------------------------------------- */
.mm-silhouette, .mm-illu { display: block; width: 100%; height: auto; overflow: visible; }
.mm-dessin [data-mm-trace] path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.3,.6,.2,1); transition-delay: calc(var(--i, 0) * 45ms); }
.mm-dessin [data-mm-trace].est-visible path { stroke-dashoffset: 0; }
.mm-lune { fill: currentColor; fill-opacity: .85; transition: fill-opacity 1.2s ease 2.6s; }
.mm-dessin [data-mm-trace]:not(.est-visible) .mm-lune { fill-opacity: 0; }

.mm-trait-or { display: block; height: 1px; width: min(16rem, 60%); background: var(--mm-or); }
.mm-dessin .mm-trait-or { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.3,.6,.2,1) .3s; }
.mm-dessin .mm-trait-or.est-visible { transform: scaleX(1); }
/* -------------------------------------------------------------------------
   « Tout Rabat » : cartes de quartier illustrées
   ---------------------------------------------------------------------- */
.mm-quartiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1023px) { .mm-quartiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .mm-quartiers { display: flex; gap: .875rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 3.5rem -1rem 0; padding: 0 1rem .75rem; scrollbar-width: thin; }
  .mm-quartier-carte { flex: 0 0 84%; scroll-snap-align: center; }
}
.mm-quartier-carte { transition: border-color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), background-color .45s ease; }
.mm-quartier-carte:hover, .mm-quartier-carte:focus-within { border-color: rgba(239,177,67,.65); transform: translateY(-4px); background-color: #1C1C20; }
.mm-quartier-carte:has(.mm-carte__lien:focus-visible) { outline: 2px solid var(--mm-or); outline-offset: 2px; }
.mm-quartier-illu { transition: color .45s ease; }
.mm-quartier-carte:hover .mm-quartier-illu { color: var(--mm-lumiere); }
/* Petites animations continues de chaque illustration (désactivées si l'on réduit les animations) */
.mm-anim-halo { opacity: 0; transform-box: fill-box; transform-origin: center; }
.mm-anim-fenetre { fill: currentColor; fill-opacity: 0; stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .mm-anim-halo { animation: mm-pulser 3s ease-in-out infinite 2.4s; }
  .mm-anim-train { animation: mm-rouler 7s linear infinite 1.6s; transform: translateX(-100px); }
  .mm-anim-fenetre { animation: mm-eclairer 4s ease-in-out infinite; }
  .mm-anim-vagues { animation: mm-houle 5s ease-in-out infinite alternate; }
  .mm-anim-vagues2 { animation: mm-houle2 6s ease-in-out infinite alternate; }
  .mm-anim-mouette { animation: mm-planer 4.5s ease-in-out infinite alternate; }
  .mm-anim-soleil { animation: mm-coucher 6s ease-in-out infinite alternate; }
  .mm-anim-palme { transform-box: fill-box; transform-origin: 50% 100%; animation: mm-balancer 4s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-anim-train { transform: translateX(80px); }
  .mm-anim-fenetre:nth-of-type(odd) { fill-opacity: .8; }
  .mm-quartier-carte:hover, .mm-quartier-carte:focus-within { transform: none; }
}
@keyframes mm-pulser { 0%, 100% { transform: scale(.8); opacity: .22; } 50% { transform: scale(1.3); opacity: .06; } }
@keyframes mm-rouler { from { transform: translateX(-100px); } to { transform: translateX(270px); } }
@keyframes mm-eclairer { 0%, 100% { fill-opacity: 0; } 40%, 70% { fill-opacity: .85; } }
@keyframes mm-houle { to { transform: translateX(-18px); } }
@keyframes mm-houle2 { to { transform: translateX(16px); } }
@keyframes mm-planer { to { transform: translate(14px, -6px); } }
@keyframes mm-coucher { to { transform: translateY(7px); } }
@keyframes mm-balancer { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.mm-quartier-illu .mm-illu { overflow: hidden; }

/* -------------------------------------------------------------------------
   Pages intérieures : en-tête illustré, grands numéros au trait, cartes de quartier
   ---------------------------------------------------------------------- */
/* La page commence par un en-tête Maison Mesbah : pas de marge en plus sous la barre fixe */
.mm-page-elementor:has(> .elementor > :first-child :is(.elementor-widget-mm-entete, .elementor-widget-mm-hero)) { padding-top: 0; }
.mm-numero { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300; font-size: clamp(4.5rem, 8vw, 7rem); line-height: .78; letter-spacing: -.02em; color: rgba(239,177,67,.45); }
.mm-clair .mm-numero { color: rgba(122,79,14,.45); }
@supports (-webkit-text-stroke: 1px black) {
  .mm-numero { color: transparent; -webkit-text-stroke: 1px var(--mm-or); }
  .mm-clair .mm-numero { -webkit-text-stroke-color: var(--mm-bronze); }
}
.mm-entete-illu .mm-quartier-illu { box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
@media (max-width: 639px) {
  .mm-cartes-defile { display: flex; gap: .875rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 3.5rem -1rem 0; padding: 0 1rem .75rem; scrollbar-width: thin; }
  .mm-cartes-defile > .mm-carte { flex: 0 0 84%; scroll-snap-align: center; }
}
.mm-carte .mm-quartier-illu { transition: color .45s ease; }
.mm-carte:has(.mm-carte__lien):hover .mm-quartier-illu { color: var(--mm-lumiere); }
.mm-clair .mm-carte:has(.mm-carte__lien):hover .mm-quartier-illu { color: var(--mm-noir); }
