/* ═══════════════════════════════════════════════════════
   CHIENS OUHOU — styles
   Chargé depuis index.html via <link rel="stylesheet" href="dogs.css">
═══════════════════════════════════════════════════════ */

.ouhou-dog{position:fixed;z-index:1;cursor:pointer;user-select:none;pointer-events:all;transition:filter .2s;}
.ouhou-dog:hover{filter:drop-shadow(0 0 12px #f4b8b8);}

@keyframes dogPoop{0%{opacity:0;transform:scaleY(0);transform-origin:bottom}30%{opacity:1;transform:scaleY(1)}70%{opacity:1}100%{opacity:0;transform:translateY(6px)}}
@keyframes digShake{0%,100%{transform:rotate(0deg)}20%{transform:rotate(-8deg) translateX(-3px)}60%{transform:rotate(7deg) translateX(3px)}}
@keyframes tremble{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,0px)}}
@keyframes butterFly{0%{transform:translate(0,0) rotate(0deg);opacity:0}10%{opacity:1}40%{transform:translate(-30px,-40px) rotate(-20deg)}70%{transform:translate(20px,-70px) rotate(15deg)}100%{transform:translate(-10px,-100px) rotate(-5deg);opacity:0}}
@keyframes heartPop{0%{transform:scale(0);opacity:0}40%{transform:scale(1.3);opacity:1}70%{transform:scale(1)}100%{transform:scale(0.8) translateY(-18px);opacity:0}}
@keyframes zzzFloat{0%{transform:translateY(0) scale(1);opacity:0}15%{opacity:1}100%{transform:translateY(-40px) scale(1.2);opacity:0}}
@keyframes wallHug{0%,100%{transform:scaleX(1)}50%{transform:scaleX(0.88)}}
@keyframes tailSlap{0%,100%{transform:rotate(0deg) translateY(0)}30%{transform:rotate(25deg) translateY(-3px)}60%{transform:rotate(-10deg) translateY(2px)}}
@keyframes dogWag{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(20deg)}}

.dog-bubble{
  position:fixed;background:white;border:2px solid #c4607a;border-radius:16px;
  padding:6px 14px;font-family:'Cormorant Garamond',Georgia,serif;font-size:13px;
  font-style:italic;color:#5a4a6e;pointer-events:none;opacity:0;
  transition:opacity .3s ease;white-space:nowrap;z-index:9001;
  box-shadow:0 6px 20px rgba(196,96,122,.2);
}
.dog-bubble::after{content:'';position:absolute;bottom:-9px;left:16px;border:5px solid transparent;border-top-color:#c4607a;}
.dog-bubble.show{opacity:1;}
.dog-poop{position:fixed;font-size:18px;z-index:8999;pointer-events:none;animation:dogPoop 3.5s ease forwards;}
.dog-butterfly{position:fixed;font-size:14px;z-index:8998;pointer-events:none;animation:butterFly 2.5s ease forwards;}
.dog-heart{position:fixed;font-size:16px;z-index:8998;pointer-events:none;animation:heartPop 1.8s ease forwards;}
.dog-zzz{position:fixed;font-size:13px;z-index:8998;pointer-events:none;animation:zzzFloat 2s ease forwards;color:#9a7abe;font-family:'Cormorant Garamond',serif;font-style:italic;}
.dog-dirt{position:fixed;font-size:11px;z-index:8998;pointer-events:none;animation:butterFly 1.2s ease forwards;filter:saturate(0.4);}

/* ── OVERLAY À PROPOS ── */
#ouhou-apropos-overlay{
  display:none;position:fixed;inset:0;z-index:9500;
  background:linear-gradient(160deg,rgba(90,74,110,.6),rgba(196,96,122,.45));
  backdrop-filter:blur(14px) saturate(1.3);
  align-items:center;justify-content:center;padding:20px;
}
#ouhou-apropos-overlay.open{display:flex;}

.apropos-card{
  background:linear-gradient(160deg,#fffbf9 0%,#fff5f8 100%);
  border-radius:36px;max-width:600px;width:100%;
  padding:0;overflow:hidden;position:relative;
  box-shadow:0 40px 100px rgba(90,74,110,.35),0 0 0 1px rgba(244,184,184,.3);
  animation:cardIn .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes cardIn{from{transform:scale(.88) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}

.apropos-header{
  background:linear-gradient(135deg,#f4b8b8 0%,#dba8d8 50%,#b890d4 100%);
  padding:36px 44px 28px;text-align:center;position:relative;overflow:hidden;
}
.apropos-header::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.25),transparent 60%);
}
.apropos-header-dogs{
  display:flex;justify-content:center;gap:24px;margin-bottom:16px;position:relative;
}
.apropos-header-dogs svg{filter:drop-shadow(0 4px 10px rgba(90,74,110,.3));transition:transform .3s;}
.apropos-header-dogs svg:hover{transform:scale(1.1) rotate(-3deg);}

.apropos-logo{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:3.2rem;
  font-weight:300;letter-spacing:10px;color:white;margin-bottom:4px;
  text-shadow:0 2px 20px rgba(90,74,110,.3);position:relative;
}
.apropos-sub{
  font-size:.65rem;font-weight:600;letter-spacing:3px;
  color:rgba(255,255,255,.85);text-transform:uppercase;position:relative;
}
.apropos-close{
  position:absolute;top:16px;right:18px;font-size:18px;color:rgba(255,255,255,.7);
  cursor:pointer;background:rgba(255,255,255,.2);border:none;border-radius:50%;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  transition:all .2s;line-height:1;z-index:2;backdrop-filter:blur(4px);
}
.apropos-close:hover{color:white;background:rgba(255,255,255,.35);transform:rotate(90deg);}

.apropos-body{padding:32px 44px 40px;text-align:center;}
.apropos-text p{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.13rem;
  line-height:1.9;color:#4a3a5e;margin-bottom:14px;
}
.apropos-text em{
  color:#c4607a;font-style:normal;
  background:linear-gradient(135deg,#c4607a,#a04898);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.apropos-divider{
  width:48px;height:2px;margin:20px auto;
  background:linear-gradient(90deg,#f4b8b8,#dba8d8);border-radius:2px;
}
.apropos-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px;}
.apropos-tag{
  font-size:.63rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:#5a4a6e;padding:6px 16px;border-radius:20px;
  border:1.5px solid rgba(196,96,122,.25);
  background:linear-gradient(135deg,rgba(244,184,184,.12),rgba(219,168,216,.12));
  transition:all .2s;
}
.apropos-tag:hover{border-color:#c4607a;color:#c4607a;transform:translateY(-1px);}
.apropos-btn{
  display:inline-block;margin-top:28px;padding:14px 44px;
  background:linear-gradient(135deg,#5a4a6e,#7a4a6e);
  color:white;border-radius:50px;font-size:.73rem;font-weight:600;
  letter-spacing:2.5px;text-transform:uppercase;cursor:pointer;border:none;
  transition:all .3s;box-shadow:0 8px 24px rgba(90,74,110,.3);
}
.apropos-btn:hover{background:linear-gradient(135deg,#c4607a,#a04898);transform:translateY(-2px);box-shadow:0 12px 32px rgba(196,96,122,.35);}
@media(max-width:600px){
  .apropos-header{padding:28px 20px 22px;}
  .apropos-body{padding:24px 20px 30px;}
  .apropos-text p{font-size:.97rem;}
  .apropos-logo{font-size:2.5rem;}
}