/* Page d'accueil de la démo — habillage « vitrine »
   S'appuie sur les variables et polices de site.css. */
:root{--nuit:#0B2340; --nuit2:#123a66; --soleil:#F7A21B; --soleil2:#E8742A;}

/* ---------- bandeau d'accueil ---------- */
.vitrine{background:var(--nuit);}
.vitrine picture,.vitrine img{display:block;width:100%;height:auto;}
.vitrine img{max-height:min(62vh,760px);object-fit:cover;object-position:center;}
.accroche{background:linear-gradient(90deg,var(--nuit) 0%,var(--nuit2) 100%);color:#fff;border-bottom:3px solid var(--soleil2);}
.accroche .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;padding:26px 0;}
.accroche h1{font-size:clamp(22px,3vw,32px);margin:0 0 6px;max-width:22em;text-wrap:balance;}
.accroche h1 em{font-style:normal;color:var(--soleil);}
.accroche p{margin:0;color:#c9d7e6;font-size:15px;}
.accroche .actions{display:flex;gap:10px;flex-wrap:wrap;}
.accroche .btn.sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.accroche .btn.sec:hover{background:rgba(255,255,255,.08);}
.accroche .puces{list-style:none;margin:12px 0 0;padding:0;display:flex;gap:6px 18px;flex-wrap:wrap;font-size:13px;color:#c9d7e6;}
.accroche .puces li::before{content:"✓ ";color:#6fd39c;font-weight:700;}

/* ---------- scène bureau + terrain ---------- */
.scene-bloc{padding:64px 0 40px;background:linear-gradient(180deg,#fff 0%,#eef4fa 100%);border-bottom:1px solid var(--trait);}
.titre-section{text-align:center;max-width:44em;margin:0 auto 34px;}
.titre-section .sur{display:inline-block;font:600 12px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--soleil2);text-transform:uppercase;margin-bottom:10px;}
.titre-section h2{font-size:clamp(24px,3.6vw,36px);text-wrap:balance;}
.titre-section p{color:#4a5763;font-size:17px;margin:0;}

.scene{position:relative;width:min(1080px,100%);margin:0 auto;padding-left:215px;}
.ecran{position:relative;background:#fff;border-radius:14px;box-shadow:0 30px 70px rgba(11,35,64,.22),0 0 0 1px rgba(11,35,64,.08);overflow:hidden;}
.ecran .barre{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#eef1f5;border-bottom:1px solid #dfe4ea;}
.ecran .barre i{width:11px;height:11px;border-radius:50%;background:#f26b5b;}
.ecran .barre i:nth-child(2){background:#f6be3b;} .ecran .barre i:nth-child(3){background:#3cc665;}
.ecran .barre span{margin-left:14px;flex:1;max-width:340px;height:20px;border-radius:10px;background:#fff;font:500 11px/20px 'JetBrains Mono',monospace;color:#7a8696;padding:0 12px;}
.vues{position:relative;aspect-ratio:16/9.2;overflow:hidden;background:#f3f6f9;}
.vues img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;}
.vues img.v2{animation:fondu 12s ease-in-out infinite;}
/* la pastille 3 suit la vue fiches */
.pin.p-v1{animation:fondu-inv 12s ease-in-out infinite;}
@keyframes fondu-inv{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@keyframes fondu{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.etiquette-vue{position:absolute;right:14px;bottom:14px;display:flex;gap:6px;z-index:2;}
.etiquette-vue b{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.06em;color:#fff;background:rgba(11,35,64,.82);padding:5px 10px;border-radius:999px;}

.telephones{position:absolute;left:0;bottom:-34px;display:flex;align-items:flex-end;z-index:4;}
.telephones img{width:clamp(130px,16vw,180px);height:auto;filter:drop-shadow(0 24px 30px rgba(11,35,64,.35));}
.telephones img + img{margin-left:-46px;transform:translateY(-38px);}
.telephones img:first-child{animation:flotte 7s ease-in-out infinite;}
.telephones img + img{animation:flotte2 7s ease-in-out infinite;}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes flotte2{0%,100%{transform:translateY(-38px)}50%{transform:translateY(-30px)}}

.pin{position:absolute;z-index:3;width:30px;height:30px;border-radius:50%;background:var(--soleil2);color:#fff;font:700 14px/30px 'Archivo',sans-serif;text-align:center;box-shadow:0 0 0 5px rgba(232,116,42,.25),0 6px 14px rgba(0,0,0,.25);}
.pin::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(232,116,42,.55);animation:onde 2.6s ease-out infinite;}
@keyframes onde{0%{transform:scale(1);opacity:1}100%{transform:scale(1.9);opacity:0}}

.legendes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:70px;}
.legende{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--trait);border-radius:12px;padding:14px 16px;}
.legende .pin{position:static;flex:none;box-shadow:none;}
.legende .pin::after{display:none;}
.legende h3{font-size:16px;margin:2px 0 3px;}
.legende p{margin:0;font-size:14px;color:#4a5763;}

/* ---------- bureau / terrain ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;}
.cote{border-radius:16px;padding:26px 26px 22px;}
.cote.bureau{background:#fff;border:1px solid var(--trait);}
.cote.terrain{background:linear-gradient(160deg,var(--nuit) 0%,var(--nuit2) 100%);color:#fff;}
.cote .tete{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.cote .tete svg{flex:none;width:44px;height:44px;}
.cote h3{font-size:21px;margin:0;}
.cote .tete small{display:block;font:500 12px 'JetBrains Mono',monospace;letter-spacing:.06em;opacity:.7;}
.cote ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.cote li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;}
.cote li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:#e9f3fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231C7CC0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;}
.cote.terrain li::before{background-color:rgba(247,162,27,.18);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23F7A21B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.cote li b{font-weight:600;}
.cote.terrain li{color:#dbe6f2;} .cote.terrain li b{color:#fff;}

/* ---------- cycle complet ---------- */
.cycle{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:10px;counter-reset:c;position:relative;}
.cycle::before{content:"";position:absolute;left:10%;right:10%;top:46px;height:3px;background:linear-gradient(90deg,var(--soleil),var(--soleil2));border-radius:2px;opacity:.5;}
.etape{position:relative;text-align:center;padding:0 6px;}
.etape .rond{position:relative;width:92px;height:92px;margin:0 auto 14px;border-radius:50%;background:#fff;border:2px solid #dce6ef;display:grid;place-items:center;box-shadow:0 10px 24px rgba(11,35,64,.10);}
.etape .rond svg{width:46px;height:46px;}
.etape .rond::after{counter-increment:c;content:counter(c);position:absolute;top:-6px;right:-4px;width:28px;height:28px;border-radius:50%;background:var(--soleil2);color:#fff;font:700 13px/28px 'Archivo',sans-serif;}
.etape h3{font-size:16px;margin:0 0 4px;}
.etape p{font-size:14px;color:#4a5763;margin:0;}

/* ---------- appel final ---------- */
.final{background:linear-gradient(120deg,var(--nuit) 0%,var(--nuit2) 60%,#1b4f86 100%);color:#fff;text-align:center;padding:56px 0;}
.final h2{font-size:clamp(24px,3.4vw,34px);}
.final p{color:#c9d7e6;max-width:38em;margin:0 auto 22px;}

/* ---------- petits écrans ---------- */
@media (max-width:900px){
  .scene{padding-left:0;}
  .telephones{position:relative;right:auto;bottom:auto;justify-content:center;margin-top:-60px;}
  .legendes{grid-template-columns:1fr;margin-top:28px;}
  .duo{grid-template-columns:1fr;}
  .cycle{grid-template-columns:1fr 1fr;row-gap:26px;}
  .cycle::before{display:none;}
}
@media (max-width:760px){
  .vitrine img{max-height:none;}
  .accroche .wrap{padding:22px 0;}
  .pin{display:none;}
  .legende .pin{display:block;}
  .scene-bloc{padding:44px 0 28px;}
}
@media (prefers-reduced-motion:reduce){
  .vues img.v2,.telephones img,.pin::after,.pin.p-v1{animation:none!important;}
  .vues img.v2{opacity:0;}
}