/* Fyonalis — /decouvrir : expérience animée « Découvrir »
   À intégrer dans le produit (charger après style.css). Styles SCOPÉS sous .discover :
   les variables sont définies sur .discover pour ne pas entrer en collision avec le reste.
   N'inclut PAS l'en-tête / le shell (déjà fournis par public_home.html). */

.discover{
  --da-navy:#0b3a54; --da-navy3:#0a5d7c; --da-orange:#f08a24; --da-orange-bright:#ff760f;
  --da-muted:#c9e0ea; --da-white:#fff; --da-line:rgba(255,255,255,.16);
  position:relative;min-width:0;overflow:hidden;border-radius:26px;color:var(--da-white);
  background:linear-gradient(145deg,var(--da-navy),var(--da-navy3) 62%,#117ca5);
  box-shadow:0 24px 60px rgba(7,58,81,.22);padding:clamp(24px,3.4vw,46px);
}
.discover .da-intro{max-width:820px;}
.discover .da-intro .eyebrow{color:#ffb56d;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;}
.discover .da-intro h2{margin:10px 0 10px;color:var(--da-white);font-family:"DM Sans",Arial,sans-serif;
  font-size:clamp(28px,3.4vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1.08;}
.discover .da-intro p{margin:0;color:var(--da-muted);font-size:clamp(16px,1.6vw,19px);}
.discover .da-intro p b{color:#fff;font-weight:600;}

.discover .da-stage{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,40px);align-items:stretch;margin-top:clamp(22px,3vw,34px);}

.discover .da-photo{position:relative;border-radius:20px;overflow:hidden;min-height:360px;background:#08344a;
  box-shadow:0 18px 40px rgba(0,0,0,.28);}
.discover .da-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.06);transition:opacity .9s ease, transform 6s ease;}
.discover .da-photo img.on{opacity:1;transform:scale(1);}
.discover .da-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,58,81,.05) 40%,rgba(7,58,81,.72));}
/* Étape "interface" : capture produit ENTIÈRE dans un cadre-fenêtre (non rognée) */
.discover .da-photo.ui{background:radial-gradient(circle at 50% 30%,#12455f,#0a2c3f);}
.discover .da-photo.ui img{object-fit:contain;padding:18px;border-radius:16px;transform:none;}
.discover .da-photo.ui::after{background:none;}
.discover .da-photo.ui .da-badge{background:rgba(8,52,74,.85);}
.discover .da-badge{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:9px;
  padding:8px 14px;border-radius:999px;background:rgba(8,52,74,.72);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.22);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
.discover .da-badge .dot{width:9px;height:9px;border-radius:50%;background:var(--da-orange);}
.discover .da-step-num{position:absolute;right:16px;top:16px;z-index:2;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);}

.discover .da-panel{display:flex;flex-direction:column;justify-content:center;min-width:0;}
.discover .da-actor{color:#8fd3f2;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;min-height:16px;}
.discover .da-title{margin:8px 0 10px;font-family:"DM Sans",Arial,sans-serif;font-size:clamp(23px,2.6vw,33px);
  font-weight:500;letter-spacing:-.02em;line-height:1.12;color:#fff;}
.discover .da-desc{margin:0;color:#d6e8ef;font-size:clamp(15px,1.5vw,18px);max-width:44ch;min-height:3em;}
.discover .da-fade{animation:daIn .6s ease;}
@keyframes daIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.discover .da-timeline{display:flex;gap:8px;margin-top:26px;}
.discover .da-seg{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden;}
.discover .da-seg .fill{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--da-orange),var(--da-orange-bright));}
.discover .da-seg.done .fill{width:100%;transition:none;}
.discover .da-labels{display:flex;min-width:0;gap:8px;margin-top:10px;}
.discover .da-labels button{flex:1;background:none;border:0;color:#9fc2d2;font:inherit;font-size:12px;font-weight:600;
  text-align:left;cursor:pointer;padding:6px;border-radius:8px;letter-spacing:.01em;overflow-wrap:anywhere;transition:color .3s,background .3s;}
.discover .da-labels button.active{color:#fff;}
.discover .da-controls{display:flex;align-items:center;gap:14px;margin-top:20px;}
.discover .da-play{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:999px;padding:9px 16px;cursor:pointer;
  font:inherit;font-weight:600;font-size:14px;}
.discover .da-play:hover{background:rgba(255,255,255,.2);}
.discover .da-play:focus-visible,.discover .da-labels button:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.discover .da-hint{color:#93b6c6;font-size:12px;}

.discover .da-tagline{margin-top:clamp(22px,3vw,32px);padding-top:20px;border-top:1px solid var(--da-line);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.discover .da-tagline .k{font-family:"DM Sans",Arial,sans-serif;font-size:clamp(17px,1.8vw,22px);font-weight:500;color:#fff;}
.discover .da-tagline .k strong{color:#ffd0a1;font-weight:600;border-bottom:3px solid var(--da-orange-bright);padding-bottom:2px;}
.discover .da-tagline .pills{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;}
.discover .da-tagline .pill{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#dcecf3;}

@media (max-width:820px){
  .discover .da-stage{grid-template-columns:1fr;}
  .discover .da-photo{min-height:240px;}
  .discover .da-labels{overflow-x:auto;padding:3px 3px 9px;scroll-snap-type:x proximity;}
  .discover .da-labels button{flex:0 0 min(76%,240px);scroll-snap-align:start;}
  .discover .da-tagline .pills{margin-left:0;}
}
@media (prefers-reduced-motion:reduce){
  .discover .da-photo img{transition:opacity .01s;transform:none;}
  .discover .da-fade{animation:none;}
}