/* Page produit « Prises de vue produit » (20/09) — complément de
   creation-publicitaire.css, qui porte le héros, « Comment ça marche ? », le
   bandeau et le retour. Ici : la scène avant/après du héros, l'outil de
   démonstration, la galerie des sept univers et le bloc de fidélité. */
.pp-page h2 em{font-style:normal;background:linear-gradient(105deg,#087aff,#6a3cff 82%,#8c29ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.pp-sec-head{max-width:840px;margin:0 auto 26px;text-align:center}
.pp-sec-head .cp-kicker{margin-bottom:14px}
.pp-sec-head h2{font-size:clamp(26px,2.4vw,38px);line-height:1.15;letter-spacing:-.045em;margin:0 0 12px;font-weight:780;color:#0a1045;text-wrap:balance}
.pp-sec-head p{font-size:17px;line-height:1.5;color:#53668e;margin:0}
.pp-page section+section{margin-top:46px}
.pp-demo-lien{display:inline-block;margin-top:16px;font-size:15px;font-weight:600;color:#5b37f0;text-decoration:none;border-bottom:1px solid #c9b9ff;padding-bottom:2px}
.pp-demo-lien:hover{border-bottom-color:#5b37f0}
.pp-steps{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ── La scène du héros : la photo d'origine, puis le résultat ── */
.pp-scene{position:relative;container-type:inline-size;aspect-ratio:1.02;min-width:0;isolation:isolate}
.pp-scene-inner{position:absolute;inset:0;color:#11162c}
.pp-note-top{top:0;left:0}.pp-note-top svg{width:6cqw;height:8cqw;margin:1cqw 0 0 2cqw}
.pp-note-bottom{right:0;bottom:1%;transform:rotate(-7deg)}.pp-note-bottom svg{width:5.5cqw;height:5.5cqw;position:absolute;right:3cqw;bottom:100%}
.pp-avant,.pp-apres{position:absolute;margin:0;background:#fff;border:1px solid #dce5ff;border-radius:2cqw;overflow:hidden;box-shadow:0 2cqw 4cqw #3664b426}
.pp-avant img,.pp-apres img{display:block;width:100%;height:auto}
.pp-avant{left:1%;top:12%;width:33%;z-index:4}
.pp-avant figcaption{padding:.9cqw 1.2cqw;font-size:1.3cqw;font-weight:650;color:#6a7596;background:#f6f9ff;border-top:1px solid #eef3ff}
.pp-apres{right:0;top:22%;width:58%;z-index:6;box-shadow:0 3cqw 6cqw #3a4fc433}
.pp-apres figcaption{position:absolute;left:1.4cqw;bottom:1.4cqw}
.pp-badge{display:inline-flex;align-items:center;gap:.7cqw;background:#ffffffea;border-radius:3cqw;padding:.8cqw 1.4cqw;font-size:1.3cqw;font-weight:700;color:#3f2a9c;box-shadow:0 .8cqw 2cqw #1b235626}
.pp-badge svg{width:1.9cqw;height:1.9cqw;flex:none;color:#7838ff}
.pp-chips{position:absolute;left:1%;bottom:6%;display:flex;flex-wrap:wrap;gap:.9cqw;width:36%;z-index:5}
.pp-chips span{background:#ffffffd9;border:1px solid #e7e6ff;border-radius:3cqw;padding:.7cqw 1.2cqw;font-size:1.2cqw;font-weight:600;color:#33406e;box-shadow:0 1cqw 2cqw #757cba14}

/* ── L'outil ── */
.pp-outil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;
  border:1px solid #e0e8fc;border-radius:22px;background:#fff;padding:20px;box-shadow:0 14px 40px #3a4fc410}
.pp-outil-gauche{display:grid;gap:16px;min-width:0}
.pp-depot{position:relative;display:grid;place-items:center;min-height:190px;border:2px dashed #c9d8f8;border-radius:16px;
  background:#f8fbff;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}
.pp-depot:hover,.pp-depot.survol{border-color:#7838ff;background:#f5f1ff}
.pp-depot:focus-visible{outline:3px solid #9274ff;outline-offset:2px}
.pp-depot-vide{display:grid;justify-items:center;gap:5px;padding:22px;text-align:center}
.pp-depot-vide i{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:#e9f1ff;color:#2f6bff;margin-bottom:4px}
.pp-depot-vide svg{width:26px;height:26px}
.pp-depot-vide b{font-size:17px;color:#0b1045;letter-spacing:-.02em}
.pp-depot-vide span{font-size:13px;color:#7a89a9}
.pp-depot-vide em{font-style:normal;font-size:12.5px;color:#5b37f0;margin-top:5px}
.pp-depot-plein{position:relative;width:100%}
.pp-depot-plein img{display:block;width:100%;max-height:240px;object-fit:contain;background:#fff}
.pp-depot-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:9px;border:1px solid #e0e8fc;
  background:#fff;color:#5a6890;cursor:pointer;font-size:13px;box-shadow:0 4px 12px #1b235618}
.pp-depot-x:hover{background:#fff0f2;color:#d03a4b;border-color:#f7c6cc}

.pp-decors{border:0;padding:0;margin:0;min-width:0}
.pp-decors legend{padding:0;font-size:13px;font-weight:650;color:#26355f;margin-bottom:8px}
.pp-decors-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pp-decor{position:relative;display:block;min-width:0}
.pp-decor input{position:absolute;opacity:0;width:0;height:0}
.pp-decor span{display:block;border:1px solid #dbe4fb;border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
.pp-decor img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.pp-decor b{display:block;padding:6px 8px 0;font-size:12px;line-height:1.25;color:#0b1045;letter-spacing:-.01em}
.pp-decor small{display:block;padding:1px 8px 7px;font-size:10.5px;line-height:1.3;color:#8b96b5}
.pp-decor input:checked+span{border-color:#7838ff;box-shadow:0 0 0 2px #7838ff33}
.pp-decor input:focus-visible+span{outline:3px solid #9274ff;outline-offset:2px}

.pp-champ{display:grid;gap:6px;font-size:13px;font-weight:650;color:#26355f}
.pp-champ small{font-weight:400;color:#7a89a9}
.pp-champ textarea{width:100%;font:inherit;font-size:15px;font-weight:400;line-height:1.5;color:#141a3d;
  border:1px solid #d7e1f8;border-radius:12px;padding:11px 13px;background:#fbfdff;resize:vertical}
.pp-champ textarea:focus{outline:2px solid #7838ff;outline-offset:1px;border-color:#7838ff;background:#fff}
.pp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
body.mode-site a.pp-btn-creer,.pp-btn-creer{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:13px;padding:14px 22px;
  font:inherit;font-size:16px;font-weight:700;color:#fff;-webkit-text-fill-color:#fff;text-decoration:none;
  background:linear-gradient(110deg,#087aff,#7838ff);box-shadow:0 8px 20px #4356e330;cursor:pointer;transition:transform .15s,box-shadow .15s}
.pp-btn-creer svg{width:20px;height:20px}
.pp-btn-creer:hover{transform:translateY(-1px);box-shadow:0 11px 26px #4356e33d}
.pp-btn-creer[disabled]{opacity:.65;cursor:wait;transform:none}
.pp-actions small{font-size:12.5px;line-height:1.45;color:#7a89a9;flex:1 1 190px}

/* ── La sortie ── */
.pp-outil-droite{min-width:0;border:1px solid #e6ecfa;border-radius:16px;background:#fbfcff;padding:14px;min-height:320px;display:grid;align-content:start}
.pp-exemple{position:relative;display:grid;gap:10px;justify-items:center}
.pp-exemple img{display:block;width:100%;max-width:420px;border-radius:12px}
.pp-exemple-etiq{position:absolute;top:10px;left:10px;z-index:2;background:#ffffffe6;border-radius:20px;padding:4px 11px;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5b37f0}
.pp-exemple p{margin:0;font-size:14px;color:#7a89a9;text-align:center}

.pp-attente{display:grid;justify-items:center;gap:10px;padding:34px 12px;text-align:center}
.pp-attente-anneau{display:flex;gap:7px}
.pp-attente-anneau span{width:11px;height:11px;border-radius:50%;background:#7838ff;animation:pp-saut 1s infinite ease-in-out}
.pp-attente-anneau span:nth-child(2){animation-delay:.15s;background:#4f6bff}
.pp-attente-anneau span:nth-child(3){animation-delay:.3s;background:#c026d3}
@keyframes pp-saut{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-8px);opacity:1}}
.pp-attente b{font-size:15.5px;color:#0b1045;letter-spacing:-.02em;max-width:34ch}
.pp-attente small{font-size:13px;color:#7a89a9}
.pp-attente i{font-style:normal;font-size:12px;font-weight:700;color:#5b37f0;background:#f1ecff;border-radius:20px;padding:3px 11px}

.pp-resultats header{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:10px}
.pp-resultats header b{font-size:15px;color:#0b1045}
.pp-resultats header small{font-size:12.5px;color:#7a89a9}
.pp-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pp-grille .pp-resultat:first-child{grid-column:1/-1}
.pp-resultat{margin:0;position:relative;border-radius:12px;overflow:hidden;border:1px solid #e6ecfa;background:#fff}
.pp-resultat img{display:block;width:100%;height:auto}
.pp-resultat figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;
  font-size:12px;color:#5a6890;background:#f8fbff;border-top:1px solid #eef3ff}
.pp-tele{color:#5b37f0;font-weight:650;text-decoration:none}
.pp-tele:hover{text-decoration:underline}
.pp-resultats-pied{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.pp-relancer{border:1px solid #c3aeff;background:#fff;border-radius:12px;padding:10px 16px;font:inherit;font-size:14px;
  font-weight:650;color:#5b37f0;cursor:pointer}
.pp-relancer:hover{background:#f3efff}
body.mode-site a.pp-vers-pub{display:inline-flex;align-items:center;border-radius:12px;padding:10px 16px;font-size:14px;font-weight:700;
  color:#fff;-webkit-text-fill-color:#fff;text-decoration:none;background:linear-gradient(110deg,#087aff,#7838ff)}
.pp-echec{display:grid;gap:9px;justify-items:start;padding:20px;border-radius:12px;background:#fff6f7;border:1px solid #f7c6cc}
.pp-echec b{font-size:15px;color:#a3202f}
.pp-echec p{margin:0;font-size:14px;line-height:1.5;color:#7c4a52}
.pp-essai-note{margin:12px 0 0;text-align:center;font-size:13px;color:#7a89a9}

/* ── La galerie des sept univers ── */
.pp-onglets{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:18px}
.pp-onglet{border:1px solid #dbe4fb;background:#fff;border-radius:20px;padding:8px 15px;font:inherit;font-size:13.5px;
  font-weight:600;color:#33406e;cursor:pointer;transition:background .15s,border-color .15s}
.pp-onglet:hover{background:#f2f7ff}
.pp-onglet.on{background:#efe9ff;border-color:#c3aeff;color:#5b37f0}
.pp-paire{display:grid;grid-template-columns:minmax(0,.72fr) 54px minmax(0,1fr) minmax(0,.8fr);gap:14px;align-items:center;
  border:1px solid #e2e9fc;border-radius:20px;background:#fff;padding:18px}
.pp-paire figure{margin:0;display:grid;gap:7px}
.pp-paire img{display:block;width:100%;border-radius:14px;border:1px solid #eef3ff}
.pp-paire figcaption{font-size:12.5px;font-weight:650;color:#7a89a9;text-align:center}
.pp-paire-fleche{display:grid;place-items:center;color:#7838ff}
.pp-paire-fleche svg{width:30px;height:30px}
.pp-paire-texte b{display:block;font-size:18px;letter-spacing:-.03em;color:#0b1045;margin-bottom:2px}
.pp-paire-texte small{display:block;font-size:12.5px;color:#8b96b5;margin-bottom:9px}
.pp-paire-texte p{margin:0;font-size:14px;line-height:1.55;color:#4c5d8c}

/* ── La fidélité ── */
.pp-fid-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pp-fid{border:1px solid #e2e9fc;border-radius:16px;background:#fff;padding:20px 18px}
.pp-fid i{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#eef4ff;color:#3f6bff;margin-bottom:13px}
.pp-fid svg{width:25px;height:25px}
.pp-fid h3{margin:0 0 7px;font-size:16.5px;line-height:1.25;letter-spacing:-.025em;color:#0b1045}
.pp-fid p{margin:0;font-size:14px;line-height:1.5;color:#4c5d8c}
.pp-fid-note{margin:16px auto 0;max-width:900px;text-align:center;font-size:13px;line-height:1.55;color:#7a89a9}

/* ── Petits écrans ── */
@media(max-width:1150px){
 .pp-outil{grid-template-columns:1fr}
 .pp-fid-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pp-paire{grid-template-columns:minmax(0,.8fr) 40px minmax(0,1fr);gap:12px}
 .pp-paire-texte{grid-column:1/-1}
 .pp-decors-liste{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:800px){
 .pp-scene{width:100%;max-width:700px;justify-self:center;margin-bottom:25px}
 .pp-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:620px){
 .pp-sec-head h2{font-size:clamp(23px,6.2vw,30px)}
 .pp-sec-head p{font-size:15px}
 .pp-steps{grid-template-columns:1fr}
 .pp-decors-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pp-fid-grille{grid-template-columns:1fr}
 .pp-paire{grid-template-columns:1fr;padding:14px}
 .pp-paire-fleche{transform:rotate(90deg)}
 .pp-grille{grid-template-columns:1fr}
 .pp-outil{padding:14px;border-radius:18px}
}
@media(prefers-reduced-motion:reduce){
 .pp-btn-creer,.pp-btn-creer:hover{transition:none;transform:none}
 .pp-attente-anneau span{animation:none}
}

/* ⚠ display:grid écrase [hidden] (même piège que la vue agrandie de l’écran 4,
   19/09) : sans cette ligne, les sept paires s’affichent toutes à la fois. */
.pp-paire[hidden],.pp-depot-plein[hidden],.pp-depot-vide[hidden]{display:none!important}

/* Les vignettes sont carrées : sans rapport explicite, la grille les étirait
   en hauteur (constat 20/09) — un flacon de parfum de 288 px de large sur
   700 px de haut, ce qui est exactement ce que cette page promet de ne pas faire. */
.pp-paire figure{align-self:center}
.pp-paire img{aspect-ratio:1;height:auto;object-fit:cover}
.pp-exemple img{aspect-ratio:1;height:auto;object-fit:cover}
.pp-resultat img{aspect-ratio:1;height:auto;object-fit:cover}
.pp-decor img{height:auto}