/* « Une photo, et tout s'enchaîne » — le visuel d'Enyss reproduit en HTML/CSS.
   Maquette : « une photo et tout s'enchaine.png », 2172 × 724. REPÈRE : 1em = 10 px de maquette
   (la scène prend font-size = largeur du bloc / 217,2). Toutes les coordonnées ci-dessous sont celles
   de la maquette divisées par 10 ; les éléments qui changent de corps divisent leur position par leur corps.
   Groupe gauche : origine maquette (30, 0). Groupe droit : origine (1540, 0). Téléphone redressé de −4,5°
   autour de (332, 240) ; carte montre de +4° autour de (1923, 213) — les découpes ont été prises redressées.
   Polices : Fraunces (déjà servie, /css/brand-fonts.css), Inter locale (/fonts/vitrine-demo-inter-*),
   Kalam 700 locale (/fonts/kalam-700-latin.woff2, OFL) pour l'écriture manuscrite.
   Tailles calibrées par la largeur : titre l.2 « et tout s’enchaîne. » 750 px → 88 px ; texte 1074 px → 20,8 px ;
   « Le client photographie » 187 px → 17,2 px ; pied 633 px → 22,5 px.
   [Cigogne-16 · PC2-260912-TS34 · Claude Code] */
@font-face{font-family:'PE Inter';src:url('/fonts/vitrine-demo-inter-normal400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PE Inter';src:url('/fonts/vitrine-demo-inter-normal600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'PE Inter';src:url('/fonts/vitrine-demo-inter-normal700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'PE Kalam';src:url('/fonts/kalam-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

.pe{container:pe / inline-size;margin:0}
.pe-stage{position:relative;height:72.4em;font-size:calc(100cqw / 217.2);overflow:hidden;border-radius:2.4em;
  background:radial-gradient(70em 42em at 50% 42%,#fff 0,rgba(255,255,255,0) 72%),#fafafc;
  font-family:'PE Inter',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:#051238}
.pe-stage p{margin:0}
.pe-ico{display:inline-block;flex:none;width:var(--iw,2em);height:var(--ih,2em);background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.pe-main{font-family:'PE Kalam','Kalam','Segoe Print','Comic Sans MS',cursive;font-weight:700;color:#0b1d45}

/* ── Illustrations ── */
.pe-illus{display:contents}
.pe-g{position:absolute;top:0}
.pe-g-gauche{left:3em;width:57em;height:45em}
.pe-g-droite{left:154em;width:63.2em;height:41em}

/* Gauche — photos floues derrière le téléphone (maquette x 437-562, y 69-331) */
.pe-flou{position:absolute;object-fit:cover;border-radius:1.2em;filter:blur(.55em)}
.pe-flou1{left:40.3em;top:6.7em;width:12em;height:22.6em;transform:rotate(12deg);opacity:.5}
.pe-flou2{left:43em;top:16em;width:10em;height:17em;transform:rotate(10deg);opacity:.45}
/* éclat rouge : quatre traits (167,28)→(190,48) · (201,17)→(204,39) · (152,61)→(183,64) · (170,85)→(184,79) */
.pe-eclat{position:absolute;left:11em;top:1em;width:7em;height:9em;color:#e2131b}
/* « Une simple photo suffit ! » : centre maquette (105, 205), incliné de −13° */
.pe-main-g{--f:1.95;position:absolute;font-size:calc(var(--f) * 1em);line-height:1.2;text-align:left;
  left:calc(1.8em / var(--f));top:calc(17.4em / var(--f));width:calc(14.5em / var(--f));transform:rotate(-13deg)}
.pe-fleche-g{position:absolute;left:8em;top:24.5em;width:9em;height:5.5em;color:#0b1d45}

/* Téléphone redressé : maquette x 216-446, y 34-434 (230 × 400), rayon 33 */
.pe-tel{position:absolute;left:18.6em;top:3.4em;width:23em;height:40em;border-radius:3.3em;background:#0c0c0f;
  box-shadow:inset 0 0 0 .28em #c9ccd2,inset 0 0 0 .42em #2a2b30;transform:rotate(-4.5deg);
  -webkit-mask-image:linear-gradient(180deg,#000 91%,rgba(0,0,0,.2) 100%);mask-image:linear-gradient(180deg,#000 91%,rgba(0,0,0,.2) 100%)}
.pe-tel::before,.pe-tel::after{content:"";position:absolute;left:-.12em;width:.3em;border-radius:.2em;background:#9da0a7}
.pe-tel::before{top:8.1em;height:1.8em}
.pe-tel::after{top:11.3em;height:2.8em}
.pe-tel-ile{position:absolute;left:9em;top:.9em;width:8.4em;height:1.8em;border-radius:1em;background:#000;box-shadow:inset 0 0 0 .08em #1d1d22}
.pe-tel-statut{--iw:2.2em;--ih:1.55em;position:absolute;left:18.5em;top:1.22em;color:#fff}
.pe-tel-rond{position:absolute;left:2.1em;top:3.7em;width:2.2em;height:2.2em;border-radius:50%;background:rgba(255,255,255,.13);display:grid;place-items:center}
.pe-tel-flash{--iw:1em;--ih:1.52em;color:#fff}
.pe-tel-live{--iw:.93em;--ih:.88em;position:absolute;left:19.14em;top:4.16em;color:#fff}
.pe-tel-photo{position:absolute;left:1.2em;top:6.8em;width:20.9em;height:22.2em;object-fit:cover;border-radius:.5em}
.pe-tel-format{--iw:1.68em;--ih:.85em;position:absolute;left:3.16em;top:31.4em;color:#fff}
.pe-tel-mode{--f:.8;position:absolute;font-size:calc(var(--f) * 1em);line-height:1;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.55);left:calc(var(--x) / var(--f));top:calc(31.6em / var(--f));transform:translate(-50%,-50%);white-space:nowrap}
.pe-tel-mode.pe-on{color:#f7c417;background:rgba(92,80,30,.6);padding:.35em .6em;border-radius:.45em}
.pe-tel-vignette{position:absolute;left:2.9em;top:34.1em;width:3em;height:3em;box-sizing:border-box;border-radius:.5em;border:.1em solid rgba(255,255,255,.75);object-fit:cover}
.pe-tel-declencheur{position:absolute;left:9.4em;top:33.3em;width:4.6em;height:4.6em;box-sizing:border-box;border-radius:50%;border:.32em solid #fff}
.pe-tel-declencheur::after{content:"";position:absolute;inset:.35em;border-radius:50%;background:#fff}

/* Droite — flèche rouge (1558,212)→(1634,179) */
.pe-fleche-d{position:absolute;left:1em;top:16.5em;width:9.5em;height:5.5em;color:#e2131b}
/* fiche floue derrière la carte : centre (1745, 230) */
.pe-doc{position:absolute;left:12.5em;top:8.4em;width:18em;height:28.5em;box-sizing:border-box;padding:2em 1.8em;border-radius:1.4em;
  background:#fff;box-shadow:0 1.2em 3em rgba(10,32,73,.1);transform:rotate(-6deg);filter:blur(.22em);opacity:.78}
.pe-doc b{display:block;font-size:1em;font-weight:700;color:#8e97a6;margin-bottom:1.3em}
.pe-doc i{display:block;height:.9em;width:80%;margin:.9em 0;border-radius:.5em;background:#e3e6ec}
.pe-doc i.court{width:55%}
.pe-doc-carre{display:inline-block;width:4.4em;height:4.4em;margin:1.3em 0 .4em;border-radius:.6em;background:#b9bec7}
.pe-doc-lig{display:inline-block;vertical-align:top;width:5em;height:.9em;margin:3em 0 0 1em;border-radius:.5em;background:#c9ced6}
/* carte de la photo détourée, redressée : x 1790-2050, y 72-367 */
.pe-carte{position:absolute;left:25em;top:7.2em;width:26em;height:29.5em;border-radius:1.8em;background:#fff;
  box-shadow:0 1.6em 4.4em rgba(226,19,27,.14),0 .3em 1em rgba(10,32,73,.05);transform:rotate(4deg)}
.pe-damier{position:absolute;left:2.2em;top:1.8em;width:21.4em;height:25.5em;border-radius:.6em;opacity:.95;
  background:repeating-conic-gradient(#e8e8eb 0 25%,#fff 0 50%) 0 0/2.2em 2.2em;
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,rgba(0,0,0,.5));mask-image:radial-gradient(closest-side,#000 72%,rgba(0,0,0,.5))}
.pe-montre{position:absolute;left:5.1em;top:4.6em;width:15.1em;height:19.8em;filter:drop-shadow(0 .8em 1em rgba(40,30,20,.18))}
/* étiquette manuscrite : x 1937-2143, y 20-90, inclinée de −6° */
.pe-etiquette{position:absolute;left:40em;top:2.3em;width:20.4em;height:6.6em;box-sizing:border-box;display:flex;align-items:center;gap:1.6em;
  padding:0 1.4em;border-radius:1em;background:#fff;box-shadow:0 .8em 2.4em rgba(10,32,73,.1);transform:rotate(-6deg)}
.pe-etincelle{--iw:2.7em;--ih:2.78em;color:#e54650}
.pe-etiquette .pe-main{font-size:1.74em;line-height:1.2}
.pe-fleche-e{position:absolute;left:45em;top:9.5em;width:6em;height:6.2em;color:#e2131b}
/* « Prêt à vendre ! » : centre (2007, 352), 212 × 56, incliné de −7° */
.pe-pret{position:absolute;left:35.6em;top:32.4em;width:21.2em;height:5.6em;box-sizing:border-box;display:flex;align-items:center;gap:2.1em;
  padding:0 2.1em;border-radius:2em;background:#fff;box-shadow:0 1em 3em rgba(226,19,27,.15);transform:rotate(-7deg)}
.pe-pret-ico{--iw:2.85em;--ih:3.02em;color:#e2131b}
.pe-pret-txt{font-size:1.64em;font-weight:700;color:#0b1d45;white-space:nowrap}

/* ── Titre, trait, texte ── (centre du bloc : x 1090) */
/* encre mesurée : l.1 x 856-1324, y 33… ; l.2 x 718-1466, pied de lettre y 190 */
.pe-titre{position:absolute;left:52em;width:114em;top:2.62em;text-align:center}
.pe .pe-titre h2{margin:0;font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:720;font-size:8.7em;line-height:1.0115;
  letter-spacing:0;color:#041736;font-variation-settings:"opsz" 144;text-wrap:initial}
.pe .pe-titre h2 span{color:#dc0616;letter-spacing:-.02em}
/* l.1 mesurée 456 px contre 468 : la maquette ne resserre pas « Une photo, » */
/* encre : x 1007-1165, y 213-217 */
.pe-trait{position:absolute;left:100.5em;top:21.25em;width:16.2em;height:.7em;color:#dc0616}
/* encre : lignes y 243-262 / 273-291 / 302-321 (pas 29,5) */
.pe-texte{position:absolute;left:39em;width:140em;top:23.62em;text-align:center}
.pe-texte p{font-size:2.06em;line-height:1.418;font-weight:400;color:#0a1638}
.pe-texte b{font-weight:600;color:#000b30}

/* ── Quatre atouts : x 578 / 835 / 1100 / 1360, y 350-405 ── */
.pe-atouts{list-style:none;margin:0;padding:0}
.pe-atouts li{position:absolute;left:var(--x);top:35em;width:var(--w);height:5.5em;box-sizing:border-box;display:flex;align-items:center;gap:1.9em;
  padding-left:2.6em;border-radius:2.75em;background:linear-gradient(90deg,#fce9ee,#fbeff3);font-weight:600;color:#051037}
.pe-atout-rond{flex:none;width:4.4em;height:4.4em;border-radius:50%;background:#fff;display:grid;place-items:center;color:#e2131b;box-shadow:0 .3em .8em rgba(226,19,27,.07)}
/* « Gain de temps » : encre 668-782 → 16,6 px */
.pe-atout-txt{font-size:1.66em;white-space:nowrap}

/* ── Neuf étapes : rangée 1 y 442-520, rangée 2 y 545-613 ; rond à +33, icône à +89, texte à +124 ── */
.pe-etapes{list-style:none;margin:0;padding:0;counter-reset:pe-etape}
/* SEO : le numéro n’est pas dans le texte (les robots lisaient « 1Le client… ») */
.pe-etapes li>b::before{counter-increment:pe-etape;content:counter(pe-etape)}
.pe-etapes li{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);box-sizing:border-box;display:flex;align-items:center;
  padding-left:1.4em;border-radius:2em;background:#fff;border:.1em solid #eceef3;box-shadow:0 .6em 1.8em rgba(10,32,73,.06)}
.pe-etapes li>b{--f:1.7;flex:none;font-size:calc(var(--f) * 1em);width:calc(3.8em / var(--f));height:calc(3.8em / var(--f));
  margin-right:calc(2em / var(--f));border-radius:50%;background:#de0015;color:#fff;font-weight:700;line-height:1;display:grid;place-items:center}
.pe-etapes li>.pe-ico{color:#051037;margin:0 calc(1.8em + (3.4em - var(--iw)) / 2) 0 calc((3.4em - var(--iw)) / 2)}
/* « Prépare la mise en boutique » : encre 1402-1624 → 16,6 px ; lignes y 465 / 490 (pas 25) */
.pe-etapes li>span:last-child{font-size:1.66em;line-height:1.506;font-weight:600;color:#051037;white-space:nowrap}
.pe-etapes li>span:last-child:has(br){margin-top:.5em}
.pe-fl{--f:2.6;position:absolute;font-size:calc(var(--f) * 1em);line-height:1;color:#e2131b;
  left:calc(var(--x) / var(--f));top:calc(var(--y) / var(--f));transform:translate(-50%,-50%)}

/* ── Pied : fusée (765, 662), texte 795 → 1428 ── */
/* encre : x 750-1425, y 651-673 */
.pe-pied{position:absolute;left:0;right:0;top:64.27em;display:flex;justify-content:center;align-items:center;gap:1.5em;color:#0b1c42}
.pe-pied>span:last-child{font-size:2.25em;line-height:1.333}
.pe-pied b{font-weight:700;color:#000f36}
.pe-fusee{--iw:3.3em;--ih:3.28em;color:#e2131b}
.pe-pied::after{content:"";position:absolute;left:100em;top:4.2em;width:17.5em;height:.4em;border-radius:1em;
  background:linear-gradient(90deg,rgba(247,190,194,0),#f7bec2 50%,rgba(247,190,194,0))}

/* ── Repli : le bloc n'a plus la place de la composition (tablette, téléphone) ── */
@container pe (max-width: 1199px){
  .pe-stage{height:auto;font-size:9px;display:flex;flex-direction:column;align-items:center;gap:16px;padding:18px 14px 24px;border-radius:20px}
  .pe-illus{display:flex;justify-content:center;align-items:flex-start;width:100%;font-size:calc((100cqw - 28px) / 121)}
  .pe-g{position:relative;left:auto;top:auto;flex:none}
  .pe-titre,.pe-texte,.pe-trait,.pe-pied{position:static;left:auto;right:auto;top:auto;width:auto}
  .pe .pe-titre h2{font-size:clamp(30px,8.4cqw,54px);line-height:1.04}
  .pe-trait{width:120px;height:6px;margin-top:-8px}
  .pe-texte p{font-size:15px;line-height:1.55}
  .pe-texte br{display:none}
  .pe-atouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
  .pe-atouts li{position:static;width:auto;height:44px;font-size:8px;gap:8px;padding-left:5px}
  .pe-atout-txt{white-space:normal;line-height:1.15}
  .pe-etapes{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%}
  .pe-etapes li{position:static;width:auto;height:auto;min-height:52px;font-size:8px;padding:6px 12px 6px 7px}
  .pe-etapes li>span:last-child{white-space:normal}
  .pe-etapes li br{display:none}
  .pe-fl{display:none}
  .pe-pied{flex-wrap:wrap;font-size:7px;gap:8px;text-align:center}
  .pe-pied::after{display:none}
}
@container pe (min-width: 640px) and (max-width: 1199px){
  .pe-atouts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pe-etapes{grid-template-columns:repeat(3,minmax(0,1fr))}
}