/* ===== Page personnelle Anouar Moumen (/p/anouarmoumen/) — reprend les couleurs du site (style.css) ===== */
.p-perso{background:var(--bg);}
.p-perso section{max-width:none; padding:0;}

/* ---------- Haut de page ---------- */
.mo-hero{position:relative; padding:56px 20px 0; overflow:hidden;
  background:radial-gradient(60% 70% at 18% 20%, rgba(217,184,106,.28), transparent 70%), radial-gradient(50% 60% at 90% 0%, rgba(156,122,46,.12), transparent 70%), var(--bg);}
.mo-hero-in{max-width:1060px; margin:auto; display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center;}
.mo-portrait{position:relative; width:240px; aspect-ratio:1; border-radius:50%; padding:6px;
  background:conic-gradient(from 210deg, var(--gold-light), var(--gold), var(--gold-light), #fff, var(--gold-light)); box-shadow:0 24px 50px -20px rgba(110,86,32,.45);
  animation:mo-entree .8s ease both;}
.mo-portrait img{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 30%; border:5px solid var(--surface);}
.mo-portrait::after{content:""; position:absolute; right:14px; bottom:18px; width:22px; height:22px; border-radius:50%; background:var(--green); border:4px solid var(--surface);}   /* pastille « disponible » */
.mo-hero-txt{animation:mo-entree .8s .12s ease both;}
.mo-signature{margin:0 0 -6px; font-family:"Signature", cursive; font-size:44px; line-height:1.2; color:var(--gold);}
.mo-hero h1{margin:0 0 14px; font-size:clamp(32px, 5vw, 52px); line-height:1.05; color:var(--ink);}
.mo-hero h1 span{display:block; color:var(--gold-deep); font-style:italic; font-weight:500;}
.mo-lead{max-width:560px; margin:0 0 18px; font-size:17px; line-height:1.6; color:var(--ink-soft);}
.mo-tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; padding:0; list-style:none;}
.mo-tags li{padding:5px 13px; border:1px solid var(--border); border-radius:99px; background:rgba(255,255,255,.7); font-size:13px; color:var(--ink-soft);}
.mo-cta{display:flex; flex-wrap:wrap; gap:12px;}
.mo-btn{display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border:1.5px solid var(--gold); border-radius:99px; background:transparent; color:var(--gold-deep);
  font-weight:600; font-size:15px; text-decoration:none; transition:background .25s, color .25s, transform .25s, box-shadow .25s;}
.mo-btn:hover{background:var(--gold); color:#fff; transform:translateY(-2px);}
.mo-btn-wa{border-color:var(--green); background:var(--green); color:#fff; box-shadow:0 10px 24px -12px rgba(31,122,86,.7);}
.mo-btn-wa:hover{background:var(--green-deep); border-color:var(--green-deep);}
.mo-btn .ico-reseau{width:22px; height:22px;}
.mo-btn .ico-reseau .ico-fond{fill:transparent; stroke:none;}
.mo-btn-wa .ico-reseau, .mo-btn-wa:hover .ico-reseau{color:#fff;}

/* Repères en chiffres : bandeau blanc qui chevauche le bas du haut de page */
.mo-chiffres{position:relative; max-width:860px; margin:48px auto 0; padding:20px 10px; list-style:none; display:grid; grid-template-columns:repeat(4, 1fr);
  background:var(--surface); border:1px solid var(--border); border-bottom:0; border-radius:var(--radius) var(--radius) 0 0; box-shadow:0 -10px 30px -22px rgba(33,36,43,.35);}
.mo-chiffres li{text-align:center; padding:0 6px;}
.mo-chiffres li + li{border-left:1px solid var(--border);}
.mo-chiffres b{display:block; font-family:var(--serif); font-size:34px; line-height:1.05; color:var(--gold);}
.mo-chiffres span{font-size:13px; color:var(--ink-soft);}

/* ---------- Navigation interne (collante) ---------- */
.mo-ancres{position:sticky; top:0; z-index:40; display:flex; justify-content:center; gap:4px; padding:10px 12px; overflow-x:auto; scrollbar-width:none;
  background:rgba(255,255,255,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.mo-ancres::-webkit-scrollbar{display:none;}
.mo-ancres a{flex:none; padding:6px 14px; border-radius:99px; font-size:14px; font-weight:500; color:var(--ink-soft); text-decoration:none; transition:background .2s, color .2s;}
.mo-ancres a:hover{background:var(--soft); color:var(--gold-deep);}

/* ---------- Blocs ---------- */
.mo-main{max-width:1100px; margin:auto; padding:0 20px;}
.p-perso .mo-bloc{padding:64px 0 0; scroll-margin-top:60px;}
.p-perso section > h2.mo-titre{text-align:left;}
.p-perso section > h2.mo-titre::after{display:none;}
.mo-titre{margin:0 0 28px; font-size:clamp(26px, 3.6vw, 36px); color:var(--ink);}
.mo-titre small{display:flex; align-items:center; gap:10px; margin-bottom:8px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);}
.mo-titre small::before{content:""; width:28px; height:1.5px; background:var(--gold);}

/* Qui suis-je */
.mo-qui-grille{display:grid; grid-template-columns:1.5fr 1fr; gap:36px; align-items:start;}
.mo-texte p{margin:0 0 14px; font-size:16.5px; line-height:1.75; color:var(--ink-soft);}
.mo-texte b{color:var(--ink); font-weight:600;}
.mo-valeurs{display:grid; gap:12px; margin:0; padding:0; list-style:none;}
.mo-valeurs li{display:grid; grid-template-columns:auto 1fr; column-gap:14px; padding:16px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  transition:transform .25s, box-shadow .25s;}
.mo-valeurs li:hover{transform:translateY(-3px); box-shadow:0 14px 30px -20px rgba(33,36,43,.4);}
.mo-v-ico{grid-row:span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--soft); color:var(--gold);}
.mo-v-ico svg{width:22px; height:22px;}
.mo-valeurs b{font-family:var(--serif); font-size:17px; color:var(--ink);}
.mo-valeurs li > span:last-child{font-size:14px; line-height:1.5; color:var(--ink-soft);}

/* Univers : cartes photo */
.mo-univers{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;}
.mo-u{position:relative; display:block; aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius); color:#fff; text-decoration:none; background:var(--ink);}
.mo-u img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.mo-u::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(33,36,43,0) 35%, rgba(33,36,43,.88));}
.mo-u:hover img{transform:scale(1.07);}
.mo-u-num{position:absolute; top:12px; left:12px; z-index:1; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--gold-deep); font-family:var(--serif); font-weight:700;}
.mo-u-txt{position:absolute; left:16px; right:16px; bottom:16px; z-index:1; display:flex; flex-direction:column; gap:3px;}
.mo-u-txt svg{width:26px; height:26px; color:var(--gold-light); margin-bottom:4px;}
.mo-u-txt b{font-family:var(--serif); font-size:19px; line-height:1.15;}
.mo-u-txt small{font-size:13px; opacity:.85;}

/* Musique */
.mo-musique{display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:start;}
.mo-spotify iframe{display:block; border:0; border-radius:var(--radius); box-shadow:0 20px 40px -26px rgba(33,36,43,.5);}
.mo-titres{padding:22px 24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);}
.mo-titres h3{margin:0 0 10px; font-size:18px;}
.mo-titres h3 + ul{margin:0 0 22px;}
.mo-titres ul:not(.icones){display:flex; flex-wrap:wrap; gap:6px; padding:0; list-style:none;}
.mo-titres ul:not(.icones) li{padding:4px 11px; border-radius:99px; background:var(--soft); font-size:13px; color:var(--ink-soft);}
.mo-plateformes{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none;}
#musique > :not(.mo-titre):not(.mo-musique){margin-top:28px;}   /* lecteur mp3 commun */

/* Vidéos */
.mo-videos{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.mo-vid{display:flex; flex-direction:column; gap:10px; padding:0; border:0; background:none; text-align:left; cursor:pointer; font:inherit; color:inherit;}
.mo-vid-img{position:relative; display:grid; place-items:center; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius); background:var(--soft);}
.mo-vid-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.mo-vid:hover .mo-vid-img img{transform:scale(1.05);}
.mo-play{position:absolute; width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 8px 24px rgba(0,0,0,.25); transition:transform .25s, background .25s;}
.mo-play::after{content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%); border-style:solid; border-width:10px 0 10px 16px; border-color:transparent transparent transparent var(--gold-deep);}
.mo-vid:hover .mo-play{transform:scale(1.1); background:var(--gold);}
.mo-vid:hover .mo-play::after{border-left-color:#fff;}
.mo-vid-img .ico-reseau{opacity:.35;}
.mo-badge-liste{position:absolute; right:8px; bottom:8px; padding:3px 9px; border-radius:6px; background:rgba(33,36,43,.82); color:#fff; font-size:12px; font-weight:600;}
.mo-mini .mo-badge-liste{right:4px; bottom:4px; padding:1px 6px; font-size:10px;}
.mo-vid-titre{font-weight:600; font-size:15px; line-height:1.4; color:var(--ink);}

/* Photos */
.mo-photos{gap:10px;}

/* Passions */
.mo-passions{display:grid; grid-template-columns:repeat(5, 1fr); gap:12px;}
.mo-p{display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 12px; text-align:center; text-decoration:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  transition:transform .25s, border-color .25s, box-shadow .25s;}
.mo-p:hover{transform:translateY(-4px); border-color:var(--gold-light); box-shadow:0 16px 30px -22px rgba(110,86,32,.6);}
.mo-p span{display:grid; place-items:center; width:54px; height:54px; margin-bottom:6px; border-radius:50%; background:var(--soft); font-size:26px;}
.mo-p b{font-family:var(--serif); font-size:17px; color:var(--ink);}
.mo-p small{font-size:13px; color:var(--ink-soft);}

/* Sites créés */
.mo-sites{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;}
.mo-sites a{position:relative; display:flex; flex-direction:column; gap:2px; padding:16px 44px 16px 18px; text-decoration:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); transition:border-color .25s, background .25s;}
.mo-sites a::after{content:"↗"; position:absolute; top:50%; right:18px; transform:translateY(-50%); color:var(--gold); transition:transform .25s;}
.mo-sites a:hover{border-color:var(--gold-light); background:#fffdf7;}
.mo-sites a:hover::after{transform:translate(3px,-60%);}
.mo-sites b{font-size:16px; color:var(--ink);}
.mo-sites small{font-size:13px; color:var(--ink-soft);}
.p-perso footer{margin-top:72px;}

/* ---------- Lecteur vidéo plein écran ---------- */
.mo-ecran{position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:60px 20px 16px; background:rgba(15,16,20,.92); backdrop-filter:blur(6px);}
.mo-ecran[hidden]{display:none;}
.mo-fermer{position:absolute; top:14px; left:16px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:20px; cursor:pointer;}
.mo-fermer:hover{background:var(--gold);}
.mo-cadre{flex:none; width:min(1000px, 100%, (100vh - 220px) * 16 / 9); aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#000;}
.mo-cadre.mo-vertical{width:auto; height:min(100vh - 220px, 760px); aspect-ratio:9/16; max-width:100%;}
.mo-cadre iframe{display:block; width:100%; height:100%; border:0;}
/* Playlist : bande de miniatures sous la vidéo */
.mo-liste-barre{display:flex; align-items:center; gap:8px; width:min(1000px, 100%);}
.mo-nav{flex:none; width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:16px; cursor:pointer;}
.mo-nav:hover{background:var(--gold);}
.mo-liste{flex:1; display:flex; align-items:flex-start; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; padding:4px 2px 6px;}
.mo-mini{flex:none; width:150px; padding:0; border:0; background:none; color:rgba(255,255,255,.75); font:inherit; font-size:12px; line-height:1.3; text-align:left; cursor:pointer; scroll-snap-align:center;}
.mo-mini .mo-vid-img{border-radius:8px; outline:2px solid transparent; outline-offset:2px; transition:outline-color .2s;}
.mo-mini .mo-play{width:30px; height:30px;} .mo-mini .mo-play::after{border-width:6px 0 6px 10px;}
.mo-mini-titre{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:6px;}
.mo-mini:hover, .mo-mini.mo-actif{color:#fff;}
.mo-mini.mo-actif .mo-vid-img{outline-color:var(--gold-light);}
@media (max-width:560px){ .mo-mini{width:112px;} .mo-nav{display:none;} .mo-ecran{padding-top:64px;} }

@keyframes mo-entree{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .mo-portrait, .mo-hero-txt{animation:none;} }

/* ---------- Tablette ---------- */
@media (max-width:900px){
  .mo-hero-in{grid-template-columns:1fr; gap:22px; text-align:center; justify-items:center;}
  .mo-portrait{width:190px;}
  .mo-lead{margin-inline:auto;}
  .mo-tags, .mo-cta{justify-content:center;}
  .mo-qui-grille, .mo-musique{grid-template-columns:1fr;}
  .mo-univers{grid-template-columns:repeat(2, 1fr);}
  .mo-videos, .mo-sites{grid-template-columns:repeat(2, 1fr);}
  .mo-passions{grid-template-columns:repeat(3, 1fr);}
  .mo-ancres{justify-content:flex-start;}
}
/* ---------- Mobile ---------- */
@media (max-width:560px){
  .mo-hero{padding-top:34px;}
  .mo-portrait{width:160px;}
  .mo-signature{font-size:36px;}
  .mo-lead{font-size:16px;}
  .mo-btn{padding:11px 18px;}
  .mo-chiffres{grid-template-columns:repeat(2, 1fr); row-gap:14px; margin-top:34px;}
  .mo-chiffres li:nth-child(3){border-left:0;}
  .p-perso .mo-bloc{padding-top:48px;}
  .mo-univers{gap:10px;}
  .mo-u-txt{left:12px; right:12px; bottom:12px;}
  .mo-u-txt b{font-size:16px;}
  .mo-u-txt small{display:none;}
  .mo-videos, .mo-sites{grid-template-columns:1fr;}
  .mo-passions{grid-template-columns:repeat(2, 1fr);}
}