/* Démonstration animée de Preuvier, en tête de la page d'accueil.
   Treize captures réelles de l'outil, sur un dossier fictif, enchaînées
   par une caméra (panoramiques, zooms), un curseur, des anneaux de mise
   en lumière, un texte qui s'écrit, une légende par scène. La première
   image et sa légende sont dans le HTML : sans script, la page montre
   l'outil quand même. */
.ouverture--demo .contenu{grid-template-columns:1fr;gap:40px}
.ouverture--demo .texte-ouverture{max-width:1040px}
.ouverture--demo .texte-ouverture .chapo{max-width:none}
.ouverture--demo .garanties{margin-top:22px}

.demo{margin:0;width:100%}
.demo-cadre{position:relative;border-radius:18px;background:#0C2742;box-shadow:0 1px 2px rgba(12,39,66,.12),0 30px 70px -30px rgba(12,39,66,.55);
  overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.demo-barre{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#0F2E4D;border-bottom:1px solid rgba(255,255,255,.08)}
.demo-barre span{width:11px;height:11px;border-radius:50%;background:#2F4A66}
.demo-barre span:nth-child(1){background:#E0665B}.demo-barre span:nth-child(2){background:#E2B14B}.demo-barre span:nth-child(3){background:#5DC27A}
.demo-barre i{margin-left:14px;font:500 12.5px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;color:#9FB3C8;font-style:normal;
  background:rgba(255,255,255,.06);padding:7px 12px;border-radius:7px;flex:1;max-width:360px;letter-spacing:.01em}
.demo-ecran{position:relative;aspect-ratio:16/10;overflow:hidden;background:#FBFAF8;cursor:pointer}
.demo-vues{position:absolute;inset:0;transform-origin:0 0;will-change:transform;transition:transform 1.3s cubic-bezier(.3,.7,.2,1)}
.demo-vue{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity .55s ease;display:block}
.demo-vue.est-active{opacity:1}

/* Les surcouches vivent dans l'espace de la caméra : elles suivent le zoom. */
.demo-anneau{position:absolute;border:2.5px solid #3B82C9;border-radius:10px;box-shadow:0 0 0 4px rgba(59,130,201,.18),0 0 0 9999px rgba(12,39,66,.10);
  opacity:0;transition:opacity .35s ease,left .6s cubic-bezier(.3,.7,.2,1),top .6s cubic-bezier(.3,.7,.2,1),width .6s cubic-bezier(.3,.7,.2,1),height .6s cubic-bezier(.3,.7,.2,1);pointer-events:none}
.demo-anneau.est-visible{opacity:1;animation:demo-pulse 1.6s ease-in-out infinite}
@keyframes demo-pulse{0%,100%{box-shadow:0 0 0 4px rgba(59,130,201,.18),0 0 0 9999px rgba(12,39,66,.10)}50%{box-shadow:0 0 0 9px rgba(59,130,201,.10),0 0 0 9999px rgba(12,39,66,.10)}}
.demo-curseur{position:absolute;width:22px;height:22px;margin:-3px 0 0 -3px;opacity:0;pointer-events:none;
  transition:opacity .3s ease,left .7s cubic-bezier(.4,.6,.2,1),top .7s cubic-bezier(.4,.6,.2,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));z-index:3}
.demo-curseur.est-visible{opacity:1}
.demo-curseur svg{width:100%;height:100%;display:block}
.demo-curseur.clic::after{content:"";position:absolute;left:-9px;top:-9px;width:36px;height:36px;border-radius:50%;border:2px solid #3B82C9;animation:demo-clic .5s ease-out forwards}
@keyframes demo-clic{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}
.demo-saisie{position:absolute;background:#fff;color:#16202B;font:400 14px/1.55 "IBM Plex Sans",system-ui,sans-serif;padding:10px 12px;box-sizing:border-box;
  overflow:hidden;opacity:0;transition:opacity .3s ease;border-radius:8px;white-space:pre-wrap;z-index:2;text-align:left}
.demo-saisie.est-visible{opacity:1}
.demo-saisie i{display:inline-block;width:2px;height:1.1em;background:#3B82C9;vertical-align:-2px;margin-left:1px;animation:demo-curseur-texte .9s steps(2) infinite}
@keyframes demo-curseur-texte{to{opacity:0}}

/* L'étiquette flotte hors de la caméra : sa taille ne bouge pas. */
.demo-etiquette{position:absolute;max-width:min(300px,46%);background:#0C2742;color:#fff;font-size:13.5px;line-height:1.45;padding:9px 13px;border-radius:9px;
  box-shadow:0 10px 30px -10px rgba(12,39,66,.6);opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease,left .6s cubic-bezier(.3,.7,.2,1),top .6s cubic-bezier(.3,.7,.2,1);
  pointer-events:none;z-index:4;text-align:left}
.demo-etiquette.est-visible{opacity:1;transform:none}
.demo-etiquette::before{content:"";position:absolute;left:18px;top:-6px;width:12px;height:12px;background:#0C2742;transform:rotate(45deg)}
.demo-etiquette.sous::before{top:auto;bottom:-6px}

.demo-fin{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(160deg,rgba(12,39,66,.96),rgba(15,46,77,.96));color:#fff;
  opacity:0;transition:opacity .8s ease;pointer-events:none;z-index:5;padding:24px}
.demo-fin.est-visible{opacity:1}
.demo-fin .marque-fin{font:600 clamp(26px,4vw,46px)/1.1 "Newsreader",Georgia,serif;letter-spacing:.01em}
.demo-fin p{margin:14px 0 0;font-size:clamp(14px,1.6vw,18px);color:#C9D6E4;max-width:34em}
.demo-fin .fin-trait{width:64px;height:2px;background:#A69060;margin:18px auto 0}

.demo-legende{margin-top:16px;display:grid;grid-template-columns:1fr auto;gap:10px 20px;align-items:center}
.demo-progres{grid-column:1/-1;display:flex;gap:4px}
.demo-progres button{flex:1;height:14px;border:0;background:transparent;padding:4px 0;cursor:pointer}
.demo-progres button i{display:block;height:4px;border-radius:2px;background:var(--trait);overflow:hidden;position:relative}
.demo-progres button i::after{content:"";position:absolute;inset:0;background:var(--ciel);transform:scaleX(var(--p,0));transform-origin:0 50%}
.demo-progres button.est-faite i::after{transform:scaleX(1)}
.demo-progres button:focus-visible{outline:2px solid var(--ciel);outline-offset:2px;border-radius:4px}
.demo-texte{margin:0;font-size:16px;line-height:1.5;color:var(--encre);min-height:3em}
.demo-texte b{display:inline-block;font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--ciel);margin-right:8px;vertical-align:1px}
.demo-commandes{display:flex;gap:6px}
.demo-commandes button{width:38px;height:38px;border-radius:50%;border:1px solid var(--traitf);background:var(--carte);color:var(--encre);cursor:pointer;display:grid;place-items:center}
.demo-commandes button:hover{border-color:var(--ciel);color:var(--ciel)}
.demo-commandes svg{width:16px;height:16px;fill:currentColor}
.demo-commandes .pause .lecture,.demo-commandes .pause.en-pause .pauser{display:none}
.demo-commandes .pause.en-pause .lecture{display:block}

@media (max-width:720px){
  .demo-barre i{display:none}
  .demo-legende{grid-template-columns:1fr}
  .demo-texte{font-size:14.5px}
  .demo-etiquette{font-size:12px;max-width:60%}
  .demo-saisie{font-size:9px;padding:5px 6px;line-height:1.45}
}
@media (prefers-reduced-motion:reduce){
  .demo-vues,.demo-vue,.demo-anneau,.demo-curseur,.demo-etiquette,.demo-fin,.demo-saisie{transition:none}
  .demo-anneau.est-visible{animation:none}
  .demo-curseur.clic::after{animation:none;display:none}
}

/* Le hero avec démonstration : plus compact, pour que l'écran de l'outil
   commence au-dessus du pli sur un écran de bureau. */
.ouverture--demo{padding:36px 0 64px}
.ouverture--demo .contenu{gap:28px}
.ouverture--demo h1{font-size:clamp(30px,3.4vw,42px);margin:10px 0 14px;max-width:none}
@media (max-width:700px){.ouverture--demo h1 br{display:none}}
.ouverture--demo .chapo{font-size:17px;max-width:none}
.ouverture--demo .actions{margin-top:22px}
.ouverture--demo .garanties{margin-top:18px}

/* Hero plus ramassé, demande du 11 octobre 2026 : la démonstration doit
   se voir entière sur un écran de bureau sans faire défiler. */
.ouverture--demo{padding:14px 0 56px}
.ouverture--demo .contenu{gap:18px}
.ouverture--demo .surtitre{margin:0}
.ouverture--demo h1{margin:6px 0 10px}
.ouverture--demo .chapo{margin:0}
.ouverture--demo .actions{margin-top:14px}
.ouverture--demo .garanties{margin-top:12px}
.ouverture--demo .demo{max-width:1000px;margin:0 auto}
@media (min-width:1600px){.ouverture--demo .demo{max-width:1120px}}
/* Les deux boutons prennent la fin de la seconde ligne du titre. */
.ouverture--demo .hero-titre{display:flex;align-items:flex-end;gap:14px 36px;flex-wrap:wrap}
.ouverture--demo .hero-titre h1{margin:6px 0 0}
.ouverture--demo .hero-titre .actions{margin:0 0 6px}
.ouverture--demo .chapo{margin-top:14px}
/* Les boutons sur la seconde ligne du titre, à droite, puisque cette
   ligne est courte ; et la démonstration prend la hauteur qui reste dans
   l'écran, pour se voir entière sans défiler. */
.ouverture--demo .hero-titre{position:relative;display:block}
.ouverture--demo .hero-titre .actions{position:absolute;right:0;bottom:4px;margin:0}
@media (max-width:1180px){.ouverture--demo .hero-titre .actions{position:static;margin-top:14px}}
.ouverture--demo .demo{max-width:min(1000px,calc((100vh - 400px) * 1.6));min-width:min(100%,640px)}
@media (min-width:1600px){.ouverture--demo .demo{max-width:min(1120px,calc((100vh - 400px) * 1.6))}}
@media (max-width:900px){.ouverture--demo .demo{max-width:none}}
/* Le bouton suit directement « indicateur par indicateur », dans la ligne. */
.ouverture--demo h1.hero-titre{position:static;display:block;margin:6px 0 0}
.ouverture--demo h1.hero-titre .bouton{font-size:15px;font-family:var(--font-texte,inherit);vertical-align:middle;margin-left:8px;position:relative;top:3px;white-space:nowrap}
@media (max-width:700px){.ouverture--demo h1.hero-titre .bouton{display:inline-flex;margin:12px 0 0;top:0}}