/* ======================================================================
   PremiereEase — page de présentation du plugin
   S'ajoute à style.css (palette « chambre noire », Archivo + Fragment
   Mono, en-tête, boutons, formulaire, pied de page sont repris tels quels).

   1. Accueil : l'éditeur de courbe jouable
   2. Le principe (papier)
   3. Les outils : lignes numérotées + moniteurs
   4. Le panneau : la bande de pellicule
   5. Les détails
   5 bis. Gratuit ou complet
   6. Questions (papier)
   7. Obtenir le plugin
   8. Réduction des animations
   ====================================================================== */

.nav__cta{color:var(--papier)}
.pe .section__titre{text-wrap:balance;max-width:18ch}
.nav a.nav__cta{background-size:100% 2px}
@media (max-width:620px){.nav .nav__opt{display:none}}

.btn--rouge{background:var(--rec);border-color:var(--rec);color:var(--papier)}
.btn--rouge:hover{background:transparent;color:var(--papier)}
code{font:400 .92em/1 var(--f-mono);padding:.1em .35em;background:rgba(241,236,226,.08);border-radius:3px}

/* ----------------------------------------------------------------------
   1. ACCUEIL
   ---------------------------------------------------------------------- */
.pe-hero{position:relative;padding:calc(var(--header) + clamp(32px,7vh,80px)) 0 clamp(64px,10vh,120px);overflow:hidden}
/* halo rouge très discret derrière l'éditeur, comme une lampe de console */
.pe-hero::before{content:"";position:absolute;right:-10%;top:10%;width:70vw;height:70vw;max-width:900px;max-height:900px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(225,29,46,.13),transparent 70%)}
.pe-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pe-hero__grille{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(36px,6vw,80px);align-items:center}
.pe-hero__titre{margin-top:16px;font:900 clamp(2.6rem,6.6vw,5.6rem)/.88 var(--f-texte);font-stretch:62%;text-transform:uppercase;max-width:none}
.pe-hero__titre em{color:var(--rec)}
.pe-hero__titre>*{display:block}
.pe-hero__sous{margin-top:26px;max-width:46ch;font:400 .88rem/1.65 var(--f-mono);color:#d8d0c5}
.pe-hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pe-hero__chiffres{list-style:none;display:flex;flex-wrap:wrap;gap:14px clamp(20px,3vw,40px);margin-top:clamp(36px,6vh,56px);padding-top:20px;border-top:1px solid var(--trait)}
.pe-hero__chiffres b{display:block;font:900 clamp(1.8rem,3vw,2.4rem)/1 var(--f-texte);font-stretch:62%}
.pe-hero__chiffres span{font:400 .68rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}

/* entrée de la page : le texte monte, le boîtier se pose */
.js .pe-hero__texte>*{animation:monte .8s cubic-bezier(.16,1,.3,1) both}
.js .pe-hero__texte>:nth-child(2){animation-delay:.08s}
.js .pe-hero__texte>:nth-child(3){animation-delay:.16s}
.js .pe-hero__texte>:nth-child(4){animation-delay:.24s}
.js .pe-hero__texte>:nth-child(5){animation-delay:.32s}
.js .editeur{animation:pose 1s .2s cubic-bezier(.34,1.56,.64,1) both}
@keyframes monte{from{opacity:0;transform:translateY(18px)}}
@keyframes pose{from{opacity:0;transform:translateY(40px) rotate(2deg)}}

/* le boîtier, même matière que le clavier de l'accueil du site */
.editeur{position:relative;padding:16px;border-radius:16px;
  background:linear-gradient(180deg,#2c2622,#1b1714 60%,#15110f);
  box-shadow:inset 0 1px 0 #50453e,inset 0 -2px 0 #0a0807,0 30px 60px rgba(0,0,0,.55)}
.editeur__tete{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 2px 12px}
.editeur__grav{font:400 .62rem/1 var(--f-mono);letter-spacing:.2em;color:var(--gris-fonce)}
.editeur__ecran{display:flex;align-items:center;min-width:150px;height:26px;padding:0 10px;background:#0a0807;border-radius:3px;
  box-shadow:inset 0 1px 3px #000,0 1px 0 #3a322c;font:400 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--rec);white-space:nowrap}
.editeur__ecran i{display:inline-block;width:.55em;height:1em;margin-left:3px;background:var(--rec);animation:curseur 1s steps(1) infinite}

.editeur__graphe{padding:10px;border-radius:8px;background:#0d0b0a;box-shadow:inset 0 2px 8px rgba(0,0,0,.8)}
#edSvg{width:100%;height:auto;overflow:visible;touch-action:none;user-select:none}
.ed-grille line{stroke:#221d1a;stroke-width:1}
.ed-grille line.fort{stroke:#2e2823}
.ed-vitesse{fill:rgba(225,29,46,.08)}
.ed-lineaire{fill:none;stroke:#4a423b;stroke-width:1.5;stroke-dasharray:4 5}
.ed-courbe{fill:none;stroke:var(--rec);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ed-bras{stroke:#8a7f75;stroke-width:1.2}
.ed-image{fill:#F1ECE2;opacity:.55}
.ed-tete{stroke:#6a5f56;stroke-width:1}
.ed-point{fill:var(--papier);stroke:#0d0b0a;stroke-width:2}
.ed-cle{fill:var(--papier);stroke:#0d0b0a;stroke-width:1.5}
.ed-poignee{fill:var(--rec);stroke:var(--papier);stroke-width:2.5;cursor:grab;transition:r .15s}
.ed-poignee:hover,.ed-poignee:focus-visible,.ed-poignee.prise{r:11}
.ed-poignee:focus-visible{outline:none;stroke:#fff;stroke-width:3.5}
.ed-poignee.prise{cursor:grabbing}
.editeur.sans-poignees .ed-poignee,.editeur.sans-poignees .ed-bras{display:none}
.editeur__info{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font:400 .66rem/1.3 var(--f-mono);color:var(--gris)}
.editeur__info span:first-child{color:#d8d0c5}

/* deux pistes : Premiere (linéaire) contre PremiereEase */
.pistes{display:grid;gap:6px;margin-top:12px}
.piste{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px}
.piste__nom{font:400 .62rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.piste:last-child .piste__nom{color:var(--papier)}
.piste__rail{position:relative;height:30px;border-radius:4px;background:#1b1714;
  background-image:repeating-linear-gradient(90deg,#2a241f 0 1px,transparent 1px 10%)}
.carre{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:5px;background:var(--rec);
  box-shadow:0 0 16px rgba(225,29,46,.45);will-change:transform}
.carre--gris{background:#6a5f56;box-shadow:none}

.tuiles{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tuile{padding:9px 11px;border:1px solid #3a322c;border-radius:6px;background:#1f1a17;color:#d8d0c5;cursor:pointer;
  font:400 .66rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;transition:background-color .2s,color .2s,border-color .2s}
.tuile:hover{border-color:var(--gris)}
.tuile[aria-pressed="true"]{background:var(--rec);border-color:var(--rec);color:var(--papier)}
.editeur__astuce{margin-top:10px;font:400 .64rem/1.4 var(--f-mono);color:var(--gris-fonce)}

@media (max-width:900px){
  .pe-hero__grille{grid-template-columns:minmax(0,1fr)}
  .editeur{max-width:560px}
}
@media (max-width:420px){
  .piste{grid-template-columns:74px 1fr}
  .editeur{padding:10px}
}

/* ----------------------------------------------------------------------
   2. LE PRINCIPE (papier, grain partagé avec le site)
   ---------------------------------------------------------------------- */
.pe-principe,.pe-panneau,.pe-faq{position:relative;background:var(--papier);color:var(--noir)}
.pe-principe::before,.pe-panneau::before,.pe-faq::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pe-principe .container,.pe-panneau .container,.pe-faq .container{position:relative}
.pe-principe .eyebrow,.pe-panneau .eyebrow,.pe-faq .eyebrow{color:#6a5f56}
.pe-principe :focus-visible,.pe-panneau :focus-visible,.pe-faq :focus-visible{outline-color:var(--rec)}
.pe-principe .section__titre,.pe-panneau .section__titre{max-width:16ch}
.pe-principe__tete{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px 48px}
.pe-principe__intro{max-width:44ch;font:400 .86rem/1.65 var(--f-mono);color:#4a413a}

.etapes{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(40px,7vh,72px)}
.etape{position:relative;padding-top:22px;border-top:2px solid var(--noir)}
.etape__num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--rec);color:var(--papier);font:800 .9rem/1 var(--f-texte)}
.etape h3{margin-top:16px;font:900 clamp(1.4rem,2.6vw,2rem)/.95 var(--f-texte);font-stretch:62%;text-transform:uppercase}
.etape p{margin-top:10px;max-width:36ch;font:400 .8rem/1.65 var(--f-mono);color:#4a413a}
@media (max-width:760px){.etapes{grid-template-columns:minmax(0,1fr)}}

/* ----------------------------------------------------------------------
   3. LES OUTILS
   ---------------------------------------------------------------------- */
.pe-outils__intro{margin-top:18px;max-width:52ch;font:400 .84rem/1.6 var(--f-mono);color:#d8d0c5}
.outils-liste{list-style:none;margin-top:clamp(36px,6vh,64px)}
.outil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:20px clamp(24px,5vw,72px);align-items:center;
  padding:clamp(28px,5vh,48px) 0;border-top:1px solid var(--trait)}
.outil:last-child{border-bottom:1px solid var(--trait)}
.outil__texte{display:grid;grid-template-columns:clamp(44px,7vw,84px) minmax(0,1fr);column-gap:clamp(12px,2vw,24px);align-items:baseline}
.outil__texte>p{grid-column:2}
.outil__num{font:400 .74rem/1 var(--f-mono);letter-spacing:.1em;color:var(--gris)}
.outil__titre{font:900 clamp(2rem,4.6vw,3.6rem)/.9 var(--f-texte);font-stretch:62%;text-transform:uppercase;transition:color .25s}
.outil:hover .outil__titre{color:var(--rec)}
.outil__texte>p:not(.outil__presets){margin-top:14px;max-width:48ch;font:400 .84rem/1.65 var(--f-mono);color:#d8d0c5}
.outil__presets{margin-top:14px;max-width:52ch;font:400 .68rem/1.7 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}

.moniteur{margin:0;padding:8px;border-radius:10px;background:linear-gradient(180deg,#2c2622,#171310);
  box-shadow:inset 0 1px 0 #4a403a,inset 0 -2px 0 #0a0807,0 20px 40px rgba(0,0,0,.5)}
.moniteur canvas{display:block;width:100%;aspect-ratio:16 / 9;border-radius:3px;background:#0d0b0a}
.moniteur figcaption{display:flex;justify-content:space-between;padding:8px 4px 0;font:400 .62rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.moniteur figcaption::before{content:"● REC";color:var(--rec)}
@media (max-width:820px){
  .outil{grid-template-columns:minmax(0,1fr)}
  .moniteur{max-width:520px}
}

/* ----------------------------------------------------------------------
   4. LE PANNEAU : la bande de pellicule, en pleine largeur
   ---------------------------------------------------------------------- */
.pellicule{position:relative;list-style:none;display:flex;gap:0;margin-top:clamp(36px,6vh,60px);padding:0 var(--gouttiere) 18px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-color:#a89f94 transparent}
.pellicule li{flex:none;scroll-snap-align:center}
.vue-pe{display:flex;flex-direction:column;padding:0 9px;border:0;cursor:zoom-in;font:inherit;text-align:left;color:#cfc6ba;
  background:#141110 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Crect x='4' width='8' height='9' rx='1.6' fill='%23F1ECE2'/%3E%3C/svg%3E") repeat-x;
  background-position:0 4px}
.vue-pe::after{content:"";height:17px;margin:0 -9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Crect x='4' width='8' height='9' rx='1.6' fill='%23F1ECE2'/%3E%3C/svg%3E") repeat-x 0 4px}
.vue-pe__bord{display:flex;justify-content:space-between;height:32px;padding-top:15px;font:400 .62rem/1 var(--f-mono);letter-spacing:.08em}
.vue-pe__bord b{font-weight:400;color:var(--papier)}
.vue-pe__image{display:block;width:clamp(210px,24vw,280px);aspect-ratio:9 / 14;overflow:hidden;background:#000}
.vue-pe__image img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.vue-pe:hover img{transform:scale(1.04)}
.vue-pe:focus-visible{outline-offset:-4px}
/* la bande arrive en glissant quand elle entre à l'écran */
.js .pellicule li{transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .6s}
.js .pellicule:not(.vue) li{transform:translateX(60px);opacity:0}
.js .pellicule li:nth-child(2){transition-delay:.06s}
.js .pellicule li:nth-child(3){transition-delay:.12s}
.js .pellicule li:nth-child(4){transition-delay:.18s}
.js .pellicule li:nth-child(5){transition-delay:.24s}
.js .pellicule li:nth-child(6){transition-delay:.3s}

.lecteur.visionneuse{width:fit-content;max-width:calc(100vw - 32px)}
.visionneuse__image{max-height:calc(100vh - 140px);overflow:auto}
.visionneuse__image img{width:min(420px,calc(100vw - 72px));height:auto}

/* ----------------------------------------------------------------------
   5. LES DÉTAILS
   ---------------------------------------------------------------------- */
.details{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,7vh,72px);border-top:1px solid var(--trait)}
.details li{padding:26px clamp(14px,2vw,24px) 30px;border-bottom:1px solid var(--trait);border-right:1px solid var(--trait)}
.details li:nth-child(4n){border-right:0;padding-right:0}
.details li:nth-child(4n+1){padding-left:0}
.details h3{font:800 1.12rem/1.1 var(--f-texte);font-stretch:75%;text-transform:uppercase}
.details h3::before{content:"◆";display:block;margin-bottom:12px;font-size:.8rem;color:var(--rec)}
.details p{margin-top:10px;font:400 .76rem/1.65 var(--f-mono);color:#d8d0c5}
@media (max-width:980px){
  .details{grid-template-columns:repeat(2,minmax(0,1fr))}
  .details li:nth-child(n){border-right:1px solid var(--trait);padding:26px clamp(14px,2vw,24px) 30px}
  .details li:nth-child(2n){border-right:0;padding-right:0}
  .details li:nth-child(2n+1){padding-left:0}
}
@media (max-width:560px){
  .details{grid-template-columns:minmax(0,1fr)}
  .details li:nth-child(n){border-right:0;padding:24px 0 26px}
}

/* ----------------------------------------------------------------------
   6. QUESTIONS
   ---------------------------------------------------------------------- */
.pe-faq__grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start}
.faq{border-top:1px solid #d6cfc2}
.faq details{border-bottom:1px solid #d6cfc2}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;list-style:none;
  font:800 clamp(1.05rem,1.8vw,1.3rem)/1.15 var(--f-texte);font-stretch:80%;text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 1.4rem/1 var(--f-mono);color:var(--rec);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:58ch;padding-bottom:24px;font:400 .84rem/1.7 var(--f-mono);color:#4a413a}
@media (max-width:820px){.pe-faq__grille{grid-template-columns:minmax(0,1fr)}}

/* ----------------------------------------------------------------------
   7. OBTENIR LE PLUGIN
   ---------------------------------------------------------------------- */
.achat{margin-top:24px}
.pe-mention{margin-top:18px;max-width:52ch;font:400 .68rem/1.6 var(--f-mono);color:var(--gris)}
.pe-mention a,.comparatif__note a{color:var(--papier);text-underline-offset:3px}
.pe-signature{margin-top:36px;padding-top:18px;border-top:1px solid var(--trait);max-width:44ch;font:400 .76rem/1.6 var(--f-mono);color:var(--gris)}
.pe-signature a{color:var(--papier);text-underline-offset:3px}
.choix{display:flex;flex-wrap:wrap;gap:8px;border:0}
.choix legend{margin-bottom:12px;font:400 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.choix label{position:relative;cursor:pointer}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix span{display:inline-block;padding:11px 14px;border:1px solid #4a423b;font:400 .72rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#d8d0c5;transition:background-color .2s,border-color .2s,color .2s}
.choix label:hover span{border-color:var(--gris)}
.choix input:checked+span{background:var(--papier);border-color:var(--papier);color:var(--noir)}
.choix input:focus-visible+span{outline:2px solid var(--papier);outline-offset:3px}

/* ----------------------------------------------------------------------
   5 bis. GRATUIT OU COMPLET
   ---------------------------------------------------------------------- */
.pe-hero__free{align-self:center;padding:6px 2px;font:400 .72rem/1.3 var(--f-mono);letter-spacing:.06em;color:var(--gris);text-decoration:none;transition:color .2s}
.pe-hero__free:hover,.pe-hero__free:focus-visible{color:var(--papier);text-decoration:underline;text-underline-offset:3px}
.pe-comparatif{border-top:1px solid var(--trait)}
.pe-comparatif__intro{margin-top:18px;max-width:54ch;font:400 .84rem/1.65 var(--f-mono);color:#d8d0c5}
.comparatif{margin-top:clamp(32px,5vh,52px);overflow-x:auto}
.comparatif:focus-visible{outline:2px solid var(--papier);outline-offset:4px}
.comparatif table{width:100%;min-width:560px;border-collapse:collapse;text-align:left}
.comparatif thead th{padding:0 clamp(12px,2vw,24px) 16px;font:900 clamp(1.3rem,2.6vw,2rem)/1 var(--f-texte);font-stretch:62%;text-transform:uppercase;vertical-align:bottom;border-bottom:2px solid var(--papier)}
.comparatif thead th small{display:block;margin-top:6px;font:400 .62rem/1 var(--f-mono);letter-spacing:.12em;color:var(--gris)}
.comparatif thead .col-pro{color:var(--rec);border-bottom-color:var(--rec)}
.comparatif tbody th,.comparatif tbody td{padding:16px clamp(12px,2vw,24px);border-bottom:1px solid var(--trait);vertical-align:top}
.comparatif tbody th{width:34%;font:800 .98rem/1.2 var(--f-texte);font-stretch:80%;text-transform:uppercase}
.comparatif td{font:400 .8rem/1.45 var(--f-mono);color:#d8d0c5}
.comparatif td span{display:block;margin-top:3px;font-size:.68rem;color:var(--gris)}
.comparatif td i{font-style:normal;margin-right:8px;color:var(--gris-fonce)}
.comparatif td.oui i{color:var(--rec)}
.comparatif td.oui span,.comparatif td.non span{display:inline;margin:0;font-size:.8rem}
.comparatif td.non{color:var(--gris)}
.comparatif td.non span{color:var(--gris-fonce)}
.comparatif .col-pro{background:rgba(225,29,46,.06)}
.comparatif__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,4vh,40px)}
.comparatif__prix{margin-top:20px;font-size:.84rem;color:#d8d0c5}
.comparatif__prix b{color:var(--papier);font-weight:400}
.comparatif__note{margin-top:16px;max-width:62ch;font:400 .72rem/1.6 var(--f-mono);color:var(--gris)}
@media (max-width:620px){
  .comparatif table{min-width:500px}
  .comparatif tbody th{font-size:.86rem}
}

/* ----------------------------------------------------------------------
   8. RÉDUCTION DES ANIMATIONS
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .js .pe-hero__texte>*,.js .editeur{animation:none}
  .editeur__ecran i{animation:none}
  .js .pellicule li{transition:none;transform:none;opacity:1}
  .vue-pe img,.outil__titre{transition:none}
}